/* =====================================================
   STYLES — all visual styling for the agenda app.
   Edit the variables below to change colors globally.
   ===================================================== */


/* ---------- COLOR VARIABLES ---------- */
:root {
  --color-primary:   #4f46e5;    /* indigo — buttons, highlights */
  --color-primary-h: #4338ca;    /* darker indigo for hover */
  --color-danger:    #ef4444;    /* red — delete hover */
  --color-bg:        #f5f4ff;    /* light lavender page background */
  --color-card:      #ffffff;
  --color-text:      #1e1b4b;    /* near-black */
  --color-muted:     #6b7280;    /* grey secondary text */
  --color-border:    #e5e7eb;
  --color-today-bg:  #ede9fe;    /* light indigo for today's date */
  --radius-card:     12px;
  --radius-btn:      8px;
  --shadow-card:     0 2px 16px rgba(79, 70, 229, 0.09);
  /* Accent tints — JS overrides these when the user picks a custom accent color */
  --color-primary-tint:  #ede9fe;    /* ~15% primary on white — hover backgrounds */
  --color-primary-tint2: #ddd6fe;    /* ~30% primary on white — stronger hover */
  --color-focus-ring:    rgba(79, 70, 229, 0.18); /* input focus glow */
}


/* ---------- RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Dark night-sky fallback — shows in rubber-band overscroll areas on mobile */
html { background: #060a1e; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: transparent; /* sky-bg provides the background now */
  color: var(--color-text);
  min-height: 100vh;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }


/* ---------- AUTH SCREEN ---------- */
#auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px;
}

.auth-card {
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 40px 32px;
  width: 100%;
  max-width: 400px;
}

.app-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary);
  text-align: center;
  letter-spacing: -1px;
}

.auth-subtitle {
  text-align: center;
  color: var(--color-muted);
  margin: 4px 0 28px;
  font-size: 0.95rem;
}

.error-msg {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: var(--radius-btn);
  padding: 10px 14px;
  font-size: 0.875rem;
  margin-bottom: 16px;
  line-height: 1.4;
}

.form-group { margin-bottom: 16px; }

.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 6px;
}

input[type="email"],
input[type="password"],
input[type="text"] {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  font-size: 1rem;
  color: var(--color-text);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.auth-toggle {
  text-align: center;
  margin-top: 20px;
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* "Powered by Kayser Solutions" on the login card — slightly more prominent */
.auth-powered-by {
  text-align: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  font-size: 0.82rem;
  color: var(--color-muted);
}

/* Kayser Solutions link — used in both auth-powered-by and app-footer */
.kayser-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.15s;
}
.kayser-link:hover { opacity: 0.75; text-decoration: underline; }

/* Subtle "Powered by" line at the bottom of the main app screen */
.app-footer {
  text-align: center;
  font-size: 0.72rem;
  color: #b8b8c8;
  padding: 12px 24px 28px;
}
.app-footer .kayser-link {
  color: #a0a0b8;
  font-weight: 500;
}
.app-footer .kayser-link:hover { color: var(--color-primary); }


/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: none;
  border-radius: var(--radius-btn);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  text-decoration: none;
}

.btn:active { transform: scale(0.97); }

.btn-primary  { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-h); }

.btn-secondary { background: var(--color-primary-tint); color: var(--color-primary); }
.btn-secondary:hover { background: var(--color-primary-tint2); }

.btn-full { width: 100%; margin-top: 4px; }
.btn-sm   { padding: 6px 12px; font-size: 0.85rem; }

.btn-icon {
  background: transparent;
  color: var(--color-primary);
  font-size: 1.8rem;
  font-weight: 300;
  padding: 2px 10px;
  border-radius: 50%;
  line-height: 1;
}
.btn-icon:hover { background: var(--color-primary-tint); }

.link-btn {
  background: none;
  border: none;
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  font-size: inherit;
  padding: 0;
}
.link-btn:hover { color: var(--color-primary-h); }


/* ---------- MAIN APP LAYOUT ---------- */
#app-screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-header {
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.5px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.header-title:hover { opacity: 0.7; }

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-email {
  font-size: 0.8rem;
  color: var(--color-muted);
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-main {
  flex: 1;
  padding: 20px 16px 48px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card {
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px;
}


/* ---------- SKY BACKGROUND ---------- */

/* Fixed full-viewport container sitting behind all app content */
#sky-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

/* Four gradient layers stacked on top of each other.
   JS sets each layer's opacity so they cross-fade smoothly. */
.sky-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 60s ease-in-out;
}

/* Deep navy — full at night, invisible during the day */
#sky-night {
  background: linear-gradient(to bottom, #050b1f 0%, #0a1235 45%, #111955 100%);
}

/* Warm pink/orange — peaks at sunrise */
#sky-dawn {
  background: linear-gradient(to bottom, #1e3d72 0%, #8b4a82 35%, #e0693a 65%, #f5ab6a 100%);
}

/* Clear daytime blue — strongest midday */
#sky-day {
  background: linear-gradient(to bottom, #1a6fb5 0%, #3a9fd8 35%, #72c5e8 70%, #c5e8f8 100%);
}

/* Orange-purple sunset — peaks around 6 pm */
#sky-dusk {
  background: linear-gradient(to bottom, #1f0f3f 0%, #6b2367 25%, #c44033 52%, #f07030 76%, #f8b055 100%);
}

/* The sun: warm yellow radial with a soft outer glow */
.celestial-sun {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* left/top transition makes the 5-min auto-update a gentle drift, not a jump.
     Disabled on page load and preview-button clicks via setTransitions(false). */
  transition: left 60s linear, top 60s linear;
  background: radial-gradient(circle at 38% 38%, #fffde4, #ffe066 40%, #ffb300 72%);
  box-shadow:
    0 0 0   8px rgba(255, 220,  60, 0.10),
    0 0 40px 18px rgba(255, 200,  50, 0.28),
    0 0 80px 40px rgba(255, 160,  20, 0.12);
}

/* The moon: cool off-white circle with a soft glow */
.celestial-moon {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left 60s linear, top 60s linear;
  background: radial-gradient(circle at 36% 32%, #fffef5, #e8e6d0 50%, #d0cdb8);
  box-shadow:
    0 0 0   6px rgba(230, 228, 195, 0.12),
    0 0 32px 14px rgba(215, 212, 175, 0.38),
    0 0 70px 32px rgba(195, 192, 155, 0.18);
}

/* ---------- DATE PICKER (collapsed calendar) ---------- */

/* Wrapper that holds both the toggle pill and the dropdown panel */
.date-picker-section {
  position: relative;
}

/* Row that holds the date toggle + Today button side by side */
.date-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The clickable "Friday, June 26 ▾" pill — stretches to fill available space */
.date-picker-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--color-card);
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.date-picker-toggle:hover { background: #faf9ff; }

/* "Today" button — compact, sits to the right of the date toggle */
.today-btn {
  white-space: nowrap;
  box-shadow: var(--shadow-card);
  flex-shrink: 0;
}

.selected-date-display {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

/* The ▾ arrow that rotates when the panel is open */
.chevron-icon {
  font-size: 1rem;
  color: var(--color-muted);
  margin-left: 8px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.chevron-icon.open { transform: rotate(180deg); }

/* The expanded calendar panel that drops below the toggle */
.calendar-panel {
  margin-top: 8px;
}


/* ---------- CALENDAR GRID ---------- */
.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.calendar-month-label {
  font-size: 1rem;
  font-weight: 700;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 6px;
}

.calendar-weekdays span {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-muted);
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--color-text);
  transition: background 0.12s;
  padding: 0;
}

.cal-cell:hover:not(.cal-blank) { background: var(--color-primary-tint); }

.cal-blank { cursor: default; pointer-events: none; }

.cal-day-num { line-height: 1; }

/* Small dot indicating this day has tasks */
.cal-dot {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-primary);
  margin-top: 2px;
}

/* Today — light indigo circle */
.cal-today { background: var(--color-today-bg); font-weight: 700; }

/* Selected day — solid indigo circle */
.cal-selected {
  background: var(--color-primary) !important;
  color: #ffffff !important;
  font-weight: 700;
}
.cal-selected .cal-dot { background: rgba(255, 255, 255, 0.65); }


/* ---------- TASK SECTION ---------- */
.tasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

/* Wrapper that keeps the two header buttons side-by-side */
.tasks-header-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.task-date-label { font-size: 1rem; font-weight: 700; }

.add-task-form {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.task-input { flex: 1; min-width: 0; }

.task-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--color-border);
  border-left: 4px solid transparent;
  background: #fff;
  transition: background 0.12s, border-color 0.12s, opacity 0.2s;
}

/* Subtle hover on incomplete rows signals the row is interactive */
.task-item:not(.task-complete):hover {
  background: #faf9ff;
  border-color: var(--color-primary-tint2);
}

/* Completed rows fade back and get a neutral background */
.task-item.task-complete {
  opacity: 0.62;
  background: #f8f9fa;
}

/* When a task has a category, the left stripe becomes its color */
.task-item.has-category { border-left-color: var(--cat-color); }

/* Wraps just the checkbox — clicking here toggles complete, not the detail modal */
.task-check-label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}

/* Clickable area that opens the task detail modal */
.task-body {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.task-body:hover .task-title { color: var(--color-primary); }

/* Small row below the title: time pill and/or note indicator */
.task-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
}

/* Time shown as a compact, quiet pill */
.task-time {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-tint);
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Tiny note lines icon */
.task-note-icon {
  font-size: 0.78rem;
  color: var(--color-muted);
  line-height: 1;
  opacity: 0.7;
}

.task-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.task-title {
  font-size: 0.95rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.12s;
}

.task-complete .task-title {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: #9ca3af;
  color: var(--color-muted);
}

.task-delete-btn {
  background: none;
  border: none;
  color: #d1d5db;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.task-delete-btn:hover { color: var(--color-danger); background: #fef2f2; }

/* Quiet progress summary — "2 of 3 done · 1 remaining" */
.task-summary {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: -10px;   /* tucks up under the header's bottom margin */
  margin-bottom: 14px;
  letter-spacing: 0.01em;
}

/* Friendly empty state for days with no tasks */
.no-tasks-msg {
  text-align: center;
  color: var(--color-muted);
  font-size: 0.9rem;
  padding: 36px 24px 28px;
  border: 1.5px dashed #d1d5db;
  border-radius: var(--radius-btn);
  line-height: 1.7;
}


/* ---------- CARRY-FORWARD MODAL ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 27, 75, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
  backdrop-filter: blur(3px);
}

.modal-card {
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.2);
  padding: 28px 24px;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.modal-subtitle {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin-bottom: 16px;
  line-height: 1.5;
}

/* "Select all" row at the top of the task list */
.carry-select-all-row {
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--color-border);
  margin-bottom: 4px;
}

.carry-select-all-text {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
}

/* Scrollable task list inside the modal */
.carry-task-scroll {
  background: #f5f4ff;
  border-radius: var(--radius-btn);
  margin-bottom: 20px;
  max-height: 260px;
  overflow-y: auto;
}

/* A group of tasks that share the same original date */
.carry-date-group + .carry-date-group {
  border-top: 1px solid #e0deff;
}

/* Date heading above each group (e.g. "Yesterday — Monday, June 24") */
.carry-date-header {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  padding: 10px 16px 4px;
}

/* A single task row with checkbox + title */
.carry-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.1s;
}
.carry-task-row:hover { background: var(--color-primary-tint); }

/* Remove padding from the "select all" label since it's outside the scroll area */
.carry-select-all-label { padding: 4px 0; }

/* Checkboxes inside the modal */
.carry-cb {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
  cursor: pointer;
}

.carry-task-title {
  font-size: 0.9rem;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.modal-actions .btn { flex: 1; min-width: 120px; }


/* ---------- MOVE-FORWARD MODAL ---------- */

/* The modal card is a bit wider to comfortably fit the mini calendar */
.move-modal-card {
  max-width: 460px;
}

/* Task list inside the move modal — shorter than the carry modal
   so the mini calendar is visible without scrolling */
.move-task-scroll {
  max-height: 130px;
}

/* Container for the mini calendar date picker */
.mini-cal-section {
  margin-bottom: 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  padding: 12px 12px 10px;
  background: #faf9ff;
}

/* "Pick a destination" label above the mini cal */
.mini-cal-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: 10px;
}

/* Nav row: ‹ June 2026 › */
.mini-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.mini-month-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
}

/* Smaller icon buttons for the mini calendar */
.mini-cal-nav .btn-icon {
  font-size: 1.4rem;
  padding: 0 8px;
}

/* Su Mo Tu We Th Fr Sa row */
.mini-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 2px;
}

.mini-cal-weekdays span {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  padding: 2px 0;
}

/* 7-column grid of day cells */
.mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.mini-cal-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 50%;
  font-size: 0.8rem;
  color: var(--color-text);
  padding: 0;
  transition: background 0.12s;
  cursor: pointer;
}

/* Hoverable future dates */
.mini-cal-cell:hover:not(.mini-cal-disabled):not(.mini-cal-blank) {
  background: var(--color-primary-tint);
}

.mini-cal-blank { cursor: default; }

/* Disabled = today or any past date relative to the selected day */
.mini-cal-disabled {
  color: #d1d5db;
  cursor: not-allowed;
}

/* The chosen destination date */
.mini-cal-selected {
  background: var(--color-primary) !important;
  color: #ffffff !important;
  font-weight: 700;
}

/* Confirm button is grayed and not clickable until a date is chosen */
#move-confirm-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- TOAST ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #1e1b4b;
  color: #fff;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
  z-index: 200;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  pointer-events: none;
}

.toast-visible { transform: translateX(-50%) translateY(0); }
.toast-success { background: #166534; }
.toast-error   { background: #991b1b; }


/* ---------- TASK DETAIL MODAL ---------- */

.detail-modal-card { max-width: 440px; }

/* Editable task title input at the top of the detail modal */
.detail-title-input {
  width: 100%;
  font-weight: 700;
  font-size: 1rem;
}

/* Each label + input pair */
.detail-section { margin-bottom: 16px; }

.detail-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  margin-bottom: 6px;
}

.detail-time-input {
  padding: 8px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  font-size: 0.95rem;
  color: var(--color-text);
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.detail-time-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.detail-note-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  font-size: 0.95rem;
  color: var(--color-text);
  background: #fff;
  outline: none;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
  min-height: 80px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.detail-note-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* Scrollable list of category radio buttons */
.cat-picker {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 8px;
}

.cat-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.1s;
}
.cat-option:hover { background: #f5f4ff; }
.cat-option input[type="radio"] {
  accent-color: var(--color-primary);
  flex-shrink: 0;
  cursor: pointer;
}

/* Colored dot showing the category's color */
.cat-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cat-color, #6b7280);
  flex-shrink: 0;
}

/* Inline form that slides in when "New category" is clicked */
.new-cat-form {
  margin-top: 8px;
  padding: 12px;
  background: #f5f4ff;
  border-radius: var(--radius-btn);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Row of 8 preset color circles */
.color-swatches { display: flex; gap: 8px; flex-wrap: wrap; }

.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: transform 0.1s, border-color 0.1s;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.swatch-selected { border-color: #1e1b4b; transform: scale(1.1); }

.new-cat-actions { display: flex; gap: 8px; }


/* ---------- RESPONSIVE ---------- */
@media (min-width: 520px) {
  .app-main { padding: 28px 24px 60px; }
  .card     { padding: 24px; }
  .cal-cell { font-size: 0.95rem; }
  .calendar-weekdays span { font-size: 0.75rem; }
}


/* ---------- SETTINGS ---------- */

/* Gear icon button in the header */
#settings-btn {
  background: transparent;
  border: none;
  color: var(--color-muted);
  font-size: 1.1rem;
  padding: 5px 8px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
#settings-btn:hover {
  background: var(--color-primary-tint);
  color: var(--color-primary);
}

/* Settings modal card — narrower than the carry modals */
.settings-modal-card { max-width: 360px; }

/* Each labeled group of controls */
.settings-section { margin-bottom: 22px; }

.settings-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: 10px;
}

/* Two-option segmented toggle for Background */
.settings-toggle-group {
  display: flex;
  gap: 8px;
}

.settings-toggle-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-btn);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
}

/* Hide the native radio — the label IS the visual toggle */
.settings-toggle-option input[type="radio"] { display: none; }

.settings-toggle-option.active {
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-weight: 700;
}

/* Color picker row */
.settings-color-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Native <input type="color"> styled as a compact swatch */
.settings-color-input {
  width: 44px;
  height: 38px;
  padding: 2px 3px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  cursor: pointer;
  background: #fff;
  flex-shrink: 0;
}

.settings-color-hint {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.4;
}

/* Simple (non-sky) background mode — applied to <body> */
body.bg-default {
  background: var(--color-bg);
}

/* "Reset to defaults" link below the Save/Cancel buttons */
.settings-reset-row {
  text-align: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.settings-reset-btn {
  background: none;
  border: none;
  font-size: 0.82rem;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.settings-reset-btn:hover { color: var(--color-danger); }


/* ---------- RECURRING TASKS ---------- */

/* Three-option repeat toggle inside the task detail modal */
.repeat-option-group {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.repeat-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-btn);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
}

.repeat-option input[type="radio"] { display: none; }

.repeat-option.active {
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-weight: 700;
}

/* 7 circle buttons for picking days of the week */
.weekday-picker {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: 2px;
}

.weekday-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: transparent;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--color-text);
  flex-shrink: 0;
  padding: 0;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.weekday-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.weekday-btn:hover:not(.active) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Red outline when Weekly is selected but no days are picked */
.weekday-picker.weekday-invalid {
  outline: 2px solid var(--color-danger);
  border-radius: 8px;
  padding: 4px;
}

/* Small explanatory note shown inside the detail modal for recurring tasks */
.recur-edit-note {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 8px;
  margin-bottom: 0;
  line-height: 1.4;
}

/* ↻ icon in the task meta row that flags a repeating task */
.task-recur-icon {
  font-size: 0.78rem;
  color: var(--color-primary);
  opacity: 0.7;
  line-height: 1;
}

/* Danger button — used for destructive actions like "delete all future" */
.btn-danger {
  background: var(--color-danger);
  color: #fff;
  border: none;
}
.btn-danger:hover { background: #dc2626; }

/* Recurring delete choice modal */
.recur-del-modal-card { max-width: 380px; }

.recur-del-actions {
  flex-direction: column;
  gap: 10px;
}

.recur-del-actions .btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Smaller explanatory line inside each delete-choice button */
.recur-del-btn-hint {
  font-size: 0.73rem;
  font-weight: 400;
  opacity: 0.8;
  line-height: 1.2;
}