/*
  DayFlow component styles: pills, chips, and recurring day controls
  ----------------------------------------------------------------
  Edit this file when you want to change the shared pill look.

  Main selectors:
  - .repeat-pill          = general repeat option pills
  - .recurring-day-btn    = Mon / Tue / Wed selected-day pills

  The goal here is to keep font size, padding, borders, colours,
  and font family consistent across all repeat controls. Because
  the page has older layered overrides, the key visual values are
  marked !important where needed so they actually win. Human CSS,
  naturally, could not be trusted to behave.
*/

:root{
  --df-pill-font-family:'DM Mono', monospace;
  --df-pill-font-size:11px;
  --df-pill-font-weight:600;
  --df-pill-line-height:1.15;
  --df-pill-padding-y:7px;
  --df-pill-padding-x:11px;
  --df-pill-radius:999px;
  --df-pill-border-color:var(--border);
  --df-pill-bg:var(--bg2);
  --df-pill-text:var(--text2);
  --df-pill-selected-bg:rgba(105,213,160,.12);
  --df-pill-selected-border:var(--green);
  --df-pill-selected-text:var(--green);
}

/* =====================================
   Repeat and selected-day wrappers
   ===================================== */
#add-task-overlay .repeat-weeks-wrap,
#add-task-overlay .recurring-days-wrap{
  margin-top:10px !important;
  padding:11px 12px !important;
  background:var(--bg3) !important;
  border:1px solid var(--border) !important;
  border-radius:11px !important;
}

#add-task-overlay .repeat-weeks-row,
#add-task-overlay .recurring-days-row,
.repeat-weeks-row,
.recurring-days-row{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-top:0 !important;
}

.recurring-days-title{
  font-size:12px !important;
  font-weight:600 !important;
  color:var(--text2) !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
  font-family:var(--df-pill-font-family) !important;
}

/* =====================================
   Shared pill look
   ===================================== */
.repeat-pill,
.recurring-day-btn,
#add-task-overlay .repeat-pill,
#add-task-overlay .recurring-day-btn{
  background:var(--df-pill-bg) !important;
  border:1px solid var(--df-pill-border-color) !important;
  color:var(--df-pill-text) !important;
  border-radius:var(--df-pill-radius) !important;
  padding:var(--df-pill-padding-y) var(--df-pill-padding-x) !important;
  font-size:var(--df-pill-font-size) !important;
  font-weight:var(--df-pill-font-weight) !important;
  line-height:var(--df-pill-line-height) !important;
  font-family:var(--df-pill-font-family) !important;
  cursor:pointer !important;
  transition:all .12s ease !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  min-height:auto !important;
  box-shadow:none !important;
}

/* Keep the selected-day pills visually aligned with the other pills */
.recurring-day-btn,
#add-task-overlay .recurring-day-btn{
  min-width:44px !important;
}

.repeat-pill.selected,
.recurring-day-btn.selected,
#add-task-overlay .repeat-pill.selected,
#add-task-overlay .recurring-day-btn.selected{
  background:var(--df-pill-selected-bg) !important;
  border-color:var(--df-pill-selected-border) !important;
  color:var(--df-pill-selected-text) !important;
}

/* =====================================
   Repeat interval inputs and helper note
   ===================================== */
#add-task-overlay .repeat-weeks-custom{
  margin-top:10px !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}

#add-task-overlay .repeat-weeks-custom input[type="number"],
#add-task-overlay .repeat-weeks-custom input[type="date"]{
  background:var(--bg2) !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
  border-radius:10px !important;
  padding:10px 12px !important;
  font-size:13px !important;
  min-height:44px !important;
}

.repeat-weeks-note,
#add-task-overlay .repeat-weeks-note{
  margin-top:8px !important;
  font-size:12px !important;
  color:var(--text3) !important;
  line-height:1.5 !important;
}