/* Extracted from index.html <style> */
:root {
  /* Brand + UI tokens */
  --bg1: #0B0E14;
  --bg2: #111827;
  --text: #EAF2FF;
  --slate: #9EA9B8;
  --accent1: #00D2FF; /* cyan */
  --accent2: #7A43FF; /* purple */
  --mid: #4C64FF;
  --liam: #00D2FF;
  --marlee: #7A43FF;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  /* Layout sizing */
  --appbar-h: 64px; /* JS updates to exact px */
  --grid-gap: 8px;
  --cell-pad: clamp(6px, 1.2vmin, 10px);
  --chip-pad-y: clamp(6px, 1vmin, 10px);
  --chip-pad-x: clamp(8px, 1.2vmin, 12px);
  --chip-radius: 12px;
  --header-font: clamp(12px, 1.4vmin, 14px);
  --cell-font: clamp(12px, 1.5vmin, 14px);
  --chip-font: clamp(12px, 1.6vmin, 14px);
  /* NEW: compact left column sizing */
  --left-col-min: 20px; /* REALLY SMALL */
  --left-col-max: 36px;
  /* Locked sizing */
  --left-col-width: 36px; /* fixed day column width */
  --top-row-height: 40px; /* reduced fixed owner header row height to tighten gap */
  --day-focus-extra-gap: 8px; /* uniform extra spacer above focused day */
}
/* Basic modal hidden state to ensure overlays don't show until used */
.modal[hidden]{ display:none !important; }
/* Visually hidden utility (for screen-reader only content) */
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; }
/* Disable transitions helper for instant theme toggle */
body.no-theme-transition, body.no-theme-transition * { transition: none !important; }
/* =============================================
   LIGHT THEME (Unified tokens + elevations)
   Goals: cohesive cyan-infused light mode, clear elevation ladder,
   darkest chrome = top header row + bottom bar, soft glassy content.
   ============================================= */
body.theme-light {
  /* Base palette */
  --bg1: rgba(0,170,210,0.55);
  --bg2: rgba(0,170,210,0.25);
  --text: #08272f;
  --slate: #22505a;
  /* Elevation shadows tuned lighter than dark mode */
  --shadow: 0 6px 18px rgba(0,80,95,0.18);
  /* Surfaces (gradients) */
  --g-chrome: linear-gradient(180deg, rgba(0,155,195,0.46), rgba(0,140,185,0.30)); /* top/bottom bars, owner headers */
  --g-surface-1: linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.42)); /* cells + base grid */
  --g-surface-2: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.50)); /* chips */
  --g-surface-3: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(245,250,255,0.70)); /* modals / raised */
  --g-accent-soft: linear-gradient(180deg, rgba(212,247,255,0.90), rgba(185,239,255,0.55)); /* today highlight */
  /* Borders & rings */
  --border-soft: rgba(0,130,170,0.28);
  --border-strong: rgba(0,130,170,0.38);
  --border-chrome: rgba(0,125,165,0.34);
  --ring-accent: rgba(0,170,210,0.90);
  --ring-accent-soft: rgba(0,170,210,0.30);
  /* Component specific subtle tint */
  --chip-tint: rgba(0,155,195,0.10);
  background: linear-gradient(160deg, var(--bg1), var(--bg2)) !important;
  color: var(--text);
}
/* Smooth theme toggle (respect users pref for motion) */
@media (prefers-reduced-motion: no-preference) {
  body.theme-light, body.theme-light header.appbar, body.theme-light .corner, body.theme-light .colhdr, body.theme-light .rowhdr, body.theme-light .cell, body.theme-light .chip, body.theme-light .week-indicator, body.theme-light .modal-dialog {
    transition: background .45s cubic-bezier(.4,.0,.2,1), border-color .45s, box-shadow .45s, color .45s;
  }
}
/* Chrome (bottom bar) */
body.theme-light header.appbar {
  background: var(--g-chrome) !important;
  border-top: 1px solid var(--border-chrome) !important;
  box-shadow: 0 -1px 3px rgba(255,255,255,0.40) inset, 0 5px 16px rgba(0,70,85,0.20);
}
/* Top owner headers + corner cell share same chrome (darkest) */
body.theme-light .corner, body.theme-light .colhdr {
  background: var(--g-chrome) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: 0 2px 4px rgba(0,70,85,0.14) inset, 0 1px 2px rgba(255,255,255,0.55);
}
body.theme-light .colhdr.liam, body.theme-light .colhdr.marlee { background: var(--g-chrome) !important; }
/* Day row headers (default) sit one elevation lower than chrome */
body.theme-light .rowhdr:not(.today) {
  background: var(--g-surface-1) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: 0 1px 2px rgba(255,255,255,0.55) inset, 0 1px 2px rgba(0,70,85,0.12);
}
/* Grid cells base container */
body.theme-light .cell { background: var(--g-surface-1) !important; border: 1px solid var(--border-soft) !important; }
/* Chips (raised) */
body.theme-light .chip {
  background: var(--g-surface-2), linear-gradient(180deg, var(--chip-tint), var(--chip-tint));
  border-color: var(--border-soft) !important;
  box-shadow: 0 4px 14px rgba(0,70,85,0.18), inset 0 1px 0 rgba(255,255,255,0.42);
  backdrop-filter: saturate(140%) blur(4px);
  color: #06414d;
}
body.theme-light .chip:hover { border-color: var(--border-strong) !important; }
body.theme-light .chip .text { color: #06414d !important; }
body.theme-light .chip .time { background: rgba(255,255,255,0.46); border-color: rgba(255,255,255,0.60); color: #06414d; }
/* Today highlight (row + cell + chip inside) – darker cyan overlay */
body.theme-light .rowhdr.today { background: linear-gradient(180deg, rgba(0,155,195,0.45), rgba(0,135,175,0.26)) !important; border-color: rgba(0,140,185,0.55) !important; box-shadow: 0 0 0 1px rgba(0,140,185,0.55), 0 0 0 2px rgba(0,170,210,0.18); color:#062730; font-weight:600; }
body.theme-light .cell.today { background: linear-gradient(180deg, rgba(0,155,195,0.38), rgba(0,135,175,0.20)) !important; border-color: rgba(0,140,185,0.50) !important; box-shadow: 0 0 0 1px rgba(0,140,185,0.50), 0 0 0 2px rgba(0,170,210,0.14), var(--shadow) !important; }
body.theme-light .cell.today .chip { background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.46)) !important; border-color: rgba(0,140,185,0.35) !important; box-shadow: 0 2px 8px rgba(0,70,85,0.18), inset 0 1px 0 rgba(255,255,255,0.55); }
body.theme-light .cell.today .chip .text, body.theme-light .cell.today .chip .time { color: #0d1117 !important; }
/* Week indicator + buttons */
body.theme-light .week-indicator { background: var(--g-surface-2); border-color: var(--border-soft); }
body.theme-light .btn { border-color: rgba(0,0,0,0.14); background: var(--g-surface-2); color: var(--text); }
body.theme-light .btn.ghost { background: transparent; border-color: rgba(0,0,0,0.14); }
body.theme-light .btn-toggle { background: var(--g-surface-2); border-color: rgba(0,0,0,0.16); color: #0d1117; }
body.theme-light .btn-toggle.active { border-color: var(--ring-accent); box-shadow: 0 0 0 3px var(--ring-accent-soft); }
/* Modal */
body.theme-light .modal-dialog { 
  background: linear-gradient(180deg, rgba(0,155,195,0.50), rgba(0,135,175,0.28)) padding-box,
              linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55)) border-box; 
  border: 1px solid rgba(0,140,185,0.40); 
  box-shadow: 0 10px 28px rgba(0,70,85,0.25), 0 0 0 1px rgba(255,255,255,0.40) inset;
  backdrop-filter: saturate(140%) blur(12px);
}
body.theme-light .modal-dialog.settings-dialog { box-shadow: 0 12px 32px rgba(0,70,85,0.28), 0 0 0 1px rgba(255,255,255,0.42) inset; }
body.theme-light .modal-dialog h2 { color: #062730; }
body.theme-light .modal-dialog input[type="text"],
body.theme-light .modal-dialog textarea,
body.theme-light .modal-dialog select {
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.42));
  border: 1px solid rgba(0,140,185,0.40);
  color: #062730;
  box-shadow: 0 1px 0 rgba(255,255,255,0.60) inset;
}
body.theme-light .modal-dialog input[type="text"]:focus,
body.theme-light .modal-dialog textarea:focus,
body.theme-light .modal-dialog select:focus {
  border-color: rgba(0,170,210,0.75);
  box-shadow: 0 0 0 3px rgba(0,170,210,0.28), 0 1px 0 rgba(255,255,255,0.75) inset;
}
/* Swatches + util surfaces */
body.theme-light .swatch-input, body.theme-light .settings-section { background: var(--g-surface-1); border-color: rgba(0,0,0,0.10); }
body.theme-light .color-swatches .swatch { border-color: rgba(0,0,0,0.18); box-shadow: 0 4px 10px rgba(0,0,0,0.15), inset 0 -1px 0 rgba(0,0,0,0.12); }
/* Multi select ring */
body.theme-light .multi-selected.chip { outline: 2px solid var(--ring-accent); box-shadow: 0 0 0 3px var(--ring-accent-soft), 0 4px 14px rgba(0,70,85,0.22); }
/* Trash */
body.theme-light .trash { background: var(--g-surface-2); border-color: rgba(0,0,0,0.20); box-shadow: 0 16px 36px rgba(0,70,85,0.24), inset 0 -2px 0 rgba(0,0,0,0.12); }
body.theme-light .trash.hot { border-color: #ff4d4d; box-shadow: 0 18px 42px rgba(255,107,107,0.25), inset 0 0 0 2px rgba(255,107,107,0.30); }
/* Day mini text adjustments */
body.theme-light .rowhdr .day-mini .dow, body.theme-light .rowhdr .day-mini .date { color: #0d1117; }
body.theme-light .rowhdr .day-mini .bar { background: rgba(0,0,0,0.55); }

/* === Toggle Switch === */
.toggle-switch { display:flex; align-items:center; gap:14px; cursor:pointer; font-weight:600; user-select:none; }
.toggle-switch input { position:absolute; opacity:0; width:0; height:0; }
.switch-track { position:relative; width:54px; height:30px; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)); border:1px solid rgba(255,255,255,0.18); border-radius:999px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.35); transition: background .35s ease, border-color .35s ease, box-shadow .35s ease; display:inline-flex; align-items:center; padding:3px; }
.switch-thumb { position:absolute; top:3px; left:3px; width:24px; height:24px; background: linear-gradient(180deg, #FFFFFF, #DDE6EE); border-radius:50%; box-shadow: 0 2px 4px rgba(0,0,0,0.35), 0 4px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.9); transition: transform .35s cubic-bezier(.4,.0,.2,1), background .35s, box-shadow .35s; }
.toggle-switch input:focus-visible + .switch-track { outline:2px solid var(--accent1); outline-offset:3px; }
.toggle-switch input:checked + .switch-track { background: linear-gradient(180deg, var(--accent1), var(--accent2)); border-color: rgba(0,0,0,0.25); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 4px 12px rgba(0,0,0,0.35); }
.toggle-switch input:checked + .switch-track .switch-thumb { transform: translateX(24px); background: linear-gradient(180deg, #FFFFFF, #F2F8FA); box-shadow: 0 2px 6px rgba(0,90,105,0.35), 0 6px 14px rgba(0,90,105,0.30), inset 0 1px 0 rgba(255,255,255,0.95); }
.switch-track:active .switch-thumb { transform: translateX(2px); }
.toggle-switch .switch-label { font-size:14px; letter-spacing:.2px; line-height:1; display:flex; align-items:center; }
/* Ensure header toggle alignment */
.theme-toggle-header { align-items:center; }
/* Light theme adjustments */
body.theme-light .toggle-switch .switch-track { background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.45)); border-color: rgba(0,0,0,0.15); box-shadow: inset 0 1px 0 rgba(255,255,255,0.80), 0 2px 6px rgba(0,80,95,0.25); }
body.theme-light .toggle-switch input:checked + .switch-track { background: linear-gradient(180deg, var(--accent1), var(--accent2)); border-color: rgba(0,100,120,0.50); box-shadow: inset 0 1px 0 rgba(255,255,255,0.70), 0 4px 12px rgba(0,80,95,0.30); }
body.theme-light .toggle-switch input:checked + .switch-track .switch-thumb { box-shadow: 0 2px 6px rgba(0,80,95,0.30), 0 6px 14px rgba(0,80,95,0.25), inset 0 1px 0 rgba(255,255,255,0.95); }

/* ===== Modal Preference Row (Notify Partner) ===== */
.modal-pref-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 12px; margin:4px 0; border:1px solid rgba(255,255,255,0.10); background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); border-radius:12px; position:relative; }
.modal-pref-row::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:none; }
.modal-pref-row .pref-head { display:flex; flex-direction:column; gap:2px; min-width:0; }
.modal-pref-row .pref-title { margin:0; font-size:12px; letter-spacing:.4px; text-transform:uppercase; font-weight:800; opacity:.85; }
.modal-pref-row .pref-desc { margin:0; font-size:12px; line-height:1.35; letter-spacing:.2px; opacity:.60; font-weight:500; }
.modal-pref-row .notify-toggle { flex-shrink:0; }
.sr-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
body.theme-light .modal-pref-row { background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65)); border-color: var(--uniform-border-light); box-shadow: var(--uniform-shadow); }
body.theme-light .modal-pref-row::after { box-shadow: none; }
/* Reminder modal styles */
.reminder-options { display:flex; flex-direction:column; gap:8px; margin:8px 0 4px; border:0; padding:0; }
/* Boxed rows like the main Remind Me row */
.reminder-options .rem-toggle {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-radius:12px;
  flex-wrap:nowrap;
}
.reminder-options .rem-toggle .switch-label { flex:1 1 auto; min-width:0; }
.reminder-options .rem-toggle .switch-track { margin-left:auto; flex:0 0 auto; }
body.theme-light .reminder-options .rem-toggle {
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65));
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 6px rgba(0,70,85,0.15), inset 0 1px 0 rgba(255,255,255,0.40);
}
.rem-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid rgba(255,255,255,0.10); border-radius:12px; cursor:pointer; }
.rem-row:hover { border-color: rgba(255,255,255,0.18); }
.custom-wrap { margin-top:8px; }
.custom-wrap input[type="datetime-local"] { width:100%; height:42px; border-radius:12px; border:1px solid rgba(255,255,255,0.12); background: transparent; color: var(--text); padding: 8px 10px; }
.reminder-help { margin:6px 0 2px; font-size:12px; opacity:.75; }
body.theme-light .rem-row { border-color: rgba(0,0,0,0.10); }
body.theme-light .rem-row:hover { border-color: rgba(0,0,0,0.18); }

/* === Flatpickr Submodal Centering === */
.flatpickr-backdrop { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); z-index: 999998; backdrop-filter: blur(2px); }
.fp-submodal { position: static !important; inset: auto !important; transform: none !important; margin: 20px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important; overflow: visible !important; padding-bottom: 6px !important; }
.fp-submodal::before, .fp-submodal::after { display: none !important; } /* hide the anchor arrow */

/* === Mobile Wheel Time Picker (replaces Flatpickr time row on touch) === */
.wheel-time{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 12px; /* extra breathing room to avoid visual clipping */
  overflow: hidden; /* clip center highlight to wheel area */
  border-radius: 10px; /* match visuals and clipping */
}

.wheel-col{
  position: relative;
  max-height: 140px;             /* shows ~5 items */
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.10);
  padding: 0 6px;
}

.wheel-item{
  scroll-snap-align: center;
  text-align: center;
  padding: 10px 4px;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--slate);
  opacity: 0.45;                  /* dim by default */
  transition: color .18s ease, opacity .18s ease, transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.wheel-item[aria-selected="true"]{
  color: var(--text);
  font-weight: 900;
  opacity: 1;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.30);
  transform: scale(1.05);
}

.wheel-mask{
  position: absolute; inset: 0 0 0 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.30), transparent 28%),
    linear-gradient(to top,   rgba(0,0,0,0.30), transparent 28%);
  border-radius: 12px;
}

.wheel-time::after{ content: none; }

.wheel-sep{
  font-weight: 900; opacity: .7;
}

/* Ensure the Flatpickr time container can grow for the wheel and has spacing from the grid */
.fp-wheel { padding: 6px 6px 10px; margin-bottom: 10px; }
.flatpickr-calendar .flatpickr-time.fp-wheel {
  height: auto !important;           /* override Flatpickr's fixed height */
  min-height: 180px !important;      /* ensure enough room for the wheel */
  max-height: none !important;
  overflow: visible !important;      /* allow wheel to extend fully */
  align-items: stretch !important;   /* don't vertically center the wheel */
  padding-bottom: 12px !important;   /* breathing room */
  border-bottom: none !important;    /* avoid a line that looks like clipping */
}
.flatpickr-calendar .fp-wheel + .flatpickr-innerContainer { margin-top: 6px; }
/* Gap between header (months) and wheel to avoid clipping overlap */
.flatpickr-calendar .flatpickr-months + .fp-wheel { margin-top: 8px; }
/* When date toggle row is inserted between the clock and the grid, keep spacing consistent */
.flatpickr-calendar .fp-wheel + .date-toggle-row { margin-top: 10px; }
.flatpickr-calendar .date-toggle-row + .flatpickr-innerContainer { margin-top: 6px; }
/* When date grid is hidden, keep a small gap above the footer */
.flatpickr-calendar.date-hidden .fp-wheel { margin-bottom: 12px; }

/* Date visibility toggle inside Flatpickr (clock-first UX) */
.flatpickr-calendar.date-hidden .flatpickr-months,
.flatpickr-calendar.date-hidden .flatpickr-innerContainer { display: none !important; }
.flatpickr-calendar .date-toggle-row { margin: 6px 8px; text-align: left; }
.flatpickr-calendar .date-toggle-row { position: relative; z-index: 1; }
.flatpickr-calendar .date-toggle-row .pref-head { text-align: left; }
.flatpickr-calendar .date-toggle-row .pref-desc { white-space: nowrap; }

/* Avoid any clipping of clock or toggle inside the calendar container */
.flatpickr-calendar { overflow: visible !important; padding-bottom: 24px; border-radius: 14px !important; }
.flatpickr-calendar::after {
  content: "";
  display: block;
  height: 24px;                /* extend background below footer */
  background: inherit;         /* match calendar background */
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  pointer-events: none;
}

/* Footer spacing so it never overlaps the clock */
.flatpickr-calendar .fp-footer {
  padding-top: 10px;
  padding-bottom: 8px;
  margin-top: 0;
  position: relative;
  z-index: 1;
  background: inherit; /* visually extend calendar background under buttons */
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* Bottom month navigation for the week picker (centered Prev/Next) */
.fp-week-picker .fp-monthbar{
  display:flex; align-items:center; justify-content:center;
  gap:24px; padding:10px 12px 12px; margin-top: 4px;
  position: relative; z-index: 1;
}
.fp-week-picker .fp-nav-btn{
  min-width: 96px; height: 36px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  color: var(--text); font-weight: 800; letter-spacing:.2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
  cursor: pointer;
}
.fp-week-picker .fp-nav-btn:hover{ border-color: rgba(255,255,255,0.28); }
body.theme-light .fp-week-picker .fp-nav-btn{
  border-color: rgba(0,0,0,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65));
  color:#062730;
  box-shadow: 0 2px 8px rgba(0,80,95,0.18);
}

/* === Week highlight for bottom banner week picker === */
.fp-week-picker .dayContainer { position: relative; }
.fp-week-picker .dayContainer { position: relative; }
/* Single continuous band for the selected week */
.fp-week-picker .fp-weekband{
  position:absolute;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0,210,200,0.28), rgba(0,170,195,0.22));
  box-shadow: 0 0 0 2px rgba(0,210,200,0.20) inset, 0 8px 22px rgba(0,0,0,0.25);
  pointer-events: none;
  z-index: 0; /* sit behind days */
}
/* Tone for light theme */
body.theme-light .fp-week-picker .fp-weekband{
  background: linear-gradient(180deg, rgba(0,168,204,0.30), rgba(0,119,170,0.20));
  box-shadow: 0 0 0 2px rgba(0,140,185,0.22) inset, 0 8px 22px rgba(0,80,95,0.18);
}
/* Keep day cells above the band; remove bubble fills */
.fp-week-picker .flatpickr-day{ position: relative; z-index: 1; }
.fp-week-picker .flatpickr-day.fp-week{ background: transparent !important; box-shadow: none !important; }
/* Hide selected-day box; keep circle for today */
.fp-week-picker .flatpickr-day.selected{ z-index: 2; }
.fp-week-picker .flatpickr-day.selected:not(.today){
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* Slightly reduce wheel height on short viewports to avoid clipping */
@media (max-height: 700px) {
  .wheel-col { max-height: 120px; }
}

/* Remove fade mask inside Flatpickr to prevent "clipping" look */
.flatpickr-calendar .wheel-mask { display: none; }

/* Add inner padding so top/bottom items don't visually touch rounded edges */
.flatpickr-calendar .wheel-col { padding-top: 8px; padding-bottom: 8px; }
.flatpickr-calendar .flatpickr-time.fp-wheel .wheel-time { padding-top: 12px; padding-bottom: 12px; }

/* Light theme tuning for wheel contrast */
body.theme-light .wheel-item { opacity: 0.5; color: #35606b; }
body.theme-light .wheel-item[aria-selected="true"] {
  color: #062730;
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.35));
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 2px 10px rgba(0,80,95,0.18), inset 0 1px 0 rgba(255,255,255,0.65);
}
body.theme-light .wheel-time::after { background: rgba(0,0,0,0.06); box-shadow: 0 0 0 2px rgba(0,0,0,0.06) inset, 0 6px 14px rgba(0,0,0,0.10) inset; }

/* === Redesigned Settings Modal Layout === */
.settings-dialog h2 { 
  margin: 0 0 24px 0; 
  font-size: 22px; 
  font-weight: 800; 
  letter-spacing: 0.2px; 
}

.settings-form { 
  display: flex; 
  flex-direction: column; 
  gap: 24px; /* More breathing room between sections */
}

/* Remove old header bar styling */
.settings-header-bar { display: none; }

.settings-form .settings-section { 
  display: flex; 
  flex-direction: column; 
  gap: 16px; 
  padding: 20px 22px 22px; 
  border: none; /* Remove unnecessary borders for airy feel */
  border-radius: 16px; 
  position: relative; 
}

.settings-form .sec-head { 
  display: flex; 
  flex-direction: column; 
  gap: 6px; 
}

.settings-form .sec-head h3 { 
  margin: 0; 
  font-size: 16px; 
  letter-spacing: 0.2px; 
  font-weight: 700; 
}

.settings-form .sec-head .desc { 
  margin: 0; 
  font-size: 13px; 
  opacity: 0.7; 
  letter-spacing: 0.2px; 
  font-weight: 400; /* Lighter weight for descriptions */
  line-height: 1.4;
}

/* Theme toggle in section - inline with heading */
.theme-toggle-section {
  justify-content: flex-end; /* Align toggle to right */
  margin: 0; /* Remove top margin */
}

/* Make the theme section header flex to accommodate inline toggle */
.settings-section:first-child .sec-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.settings-section:first-child .sec-head h3 {
  margin: 0;
  flex: 1; /* Take available space */
}

/* Owner labels with lighter weight */
.owner-name-label, .owner-color-label { 
  font-size: 11px; 
  text-transform: uppercase; 
  font-weight: 500; /* Lighter than before */
  letter-spacing: 0.6px; 
  opacity: 0.7; 
  justify-self: start; 
}

/* Primary action button styling */
.btn.primary {
  background: linear-gradient(145deg, var(--accent1), var(--accent2)) !important;
  border-color: var(--accent1) !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 210, 255, 0.25) !important;
}

.btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 210, 255, 0.35) !important;
}

/* Danger button */
.btn.danger {
  background: linear-gradient(145deg, #D72D2D, #A61E1E) !important;
  border-color: #D72D2D !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(215, 45, 45, 0.25) !important;
}
.btn.danger:hover { box-shadow: 0 6px 16px rgba(215, 45, 45, 0.35) !important; transform: translateY(-1px); }
body.theme-light .btn.danger {
  background: linear-gradient(145deg, #E23C3C, #C92F2F) !important;
  border-color: #E23C3C !important;
  box-shadow: 0 4px 12px rgba(226, 60, 60, 0.25) !important;
}
body.theme-light .btn.danger:hover { box-shadow: 0 6px 16px rgba(226, 60, 60, 0.35) !important; }

/* Small red text link variant for settings footer */
.linklike.danger {
  color: #ff6b6b !important;
  text-decoration: underline;
  font-weight: 700;
}
body.theme-light .linklike.danger { color: #D72D2D !important; }

/* Light theme primary button */
body.theme-light .btn.primary {
  background: linear-gradient(145deg, #00A8CC, #0077AA) !important;
  border-color: #00A8CC !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 168, 204, 0.25) !important;
}

body.theme-light .btn.primary:hover {
  box-shadow: 0 6px 16px rgba(0, 168, 204, 0.35) !important;
}

/* === Top-of-screen toast === */
.toast-container { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 999999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; min-width: 240px; max-width: min(92vw, 520px); padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(27,36,55,0.95), rgba(20,28,45,0.95)); color: var(--text); box-shadow: 0 8px 24px rgba(0,0,0,0.35); font-size: 14px; letter-spacing:.2px; display:flex; align-items:center; gap:10px; opacity: 0; transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast .toast-icon { flex:0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: var(--accent1); box-shadow: 0 0 0 2px rgba(255,255,255,0.10) inset; }
body.theme-light .toast { background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(245,250,255,0.90)); border-color: rgba(0,0,0,0.12); color: #062730; }

/* Utilities extracted from inline styles (index.html) */
#weekPicker { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.matrix > .corner { grid-row: 1; grid-column: 1; display: flex; align-items: center; justify-content: center; padding: 0; }
.colhdr.liam { grid-row: 1; grid-column: 2; }
.colhdr.marlee { grid-row: 1; grid-column: 3; }
.modal-dialog .time-row .input-row { display: flex; align-items: center; gap: 8px; }
.modal-dialog .time-row .input-row .input { flex: 1; }
.modal-dialog #clearStart, .modal-dialog #clearEnd { padding: 4px 8px; font-size: 12px; min-height: 32px; }
.settings-dialog #addSwatch { min-height: 38px; }
.settings-dialog #logoutBtn { display: block; margin: 28px auto 4px; background: none; border: 0; padding: 4px 8px; color: var(--accent1); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .5px; cursor: pointer; text-transform: uppercase; opacity: .85; }
/* Align footer actions (Invite + Logout) on a single row inside settings */
.settings-footer-actions { align-items: center; }
.settings-footer-actions #logoutBtn { display: inline-flex; margin: 0; align-items: center; }
.settings-footer-actions #settingsInvite { margin: 0; }
.settings-footer-actions .settings-footer-left { display:flex; align-items:center; }
.settings-footer-actions .settings-footer-right { display:flex; align-items:center; gap:12px; }
/* People section refined layout */
.people-grid { display:flex; flex-direction:column; gap:12px; }
.people-head { display:grid; grid-template-columns: 1fr 120px; gap:10px; font-size:13px; font-weight:600; letter-spacing:.3px; opacity:.75; padding:0 2px; }
.people-row { display:grid; grid-template-columns: 1fr 120px; gap:10px; align-items:center; }
.people-row input[type="text"] { min-height:40px; }
.people-row .owner-color { width:100%; height:40px; }
/* Preview style for display name inputs to mimic column headers */
.name-preview { 
  border: 1px solid rgba(255,255,255,0.10); 
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03)); 
  border-radius: 12px; 
  font-weight: 900; 
  letter-spacing: .3px; 
  text-align: center; 
  font-size: var(--header-font); 
  padding: 8px 10px; 
  color: var(--slate); 
  min-height: var(--top-row-height);
  display: flex; align-items:center; justify-content:center;
  transition: border-color .18s ease, box-shadow .18s ease, background .3s ease;
}
.name-preview.liam { color: var(--liam); }
.name-preview.marlee { color: var(--marlee); }
.name-preview:focus { outline: none; border-color: rgba(255,255,255,0.28); box-shadow: 0 0 0 3px rgba(255,255,255,0.12); }
body.theme-light .name-preview { background: var(--g-chrome); border-color: var(--border-strong); box-shadow: 0 1px 2px rgba(0,70,85,0.14) inset, 0 1px 2px rgba(255,255,255,0.55); color: var(--slate); }
body.theme-light .name-preview.liam { color: var(--liam); }
body.theme-light .name-preview.marlee { color: var(--marlee); }
body.theme-light .name-preview:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px var(--ring-accent-soft); }
@media (max-width:520px){
  .people-head { grid-template-columns: 1fr 100px; }
  .people-row { grid-template-columns: 1fr 100px; }
  .people-row .owner-color { height:38px; }
}
.owner-color { width:100%; height:42px; border-radius:12px; border:1px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.06); padding:0; cursor:pointer; }
body.theme-light .owner-color { border-color: rgba(0,140,185,0.40); background: linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,255,255,0.50)); }
.owner-name-label, .owner-color-label { font-size:11px; text-transform:uppercase; font-weight:700; letter-spacing:.8px; opacity:.65; justify-self:end; }
body.theme-light .owner-name-label, body.theme-light .owner-color-label { color:#062730; opacity:.55; }
.settings-actions { margin-top:4px; }

/* Light mode modal backdrop lighten */
body.theme-light .modal { background: rgba(250,253,255,0.85); backdrop-filter: blur(6px); }

/* === Reminder sheet content === */
/* Card-like layout and title/time/notes styling */
#reminderSheet .modal-dialog { gap: 10px; padding-top: 14px; }
#reminderSheet h2 { margin: 0 0 4px 0; font-size: 16px; opacity: .85; letter-spacing: .2px; }
#reminderSheet .rem-colorbar { height: 3px; border-radius: 8px; background: var(--slate); opacity: .9; }
#reminderSheet .rem-title { font-weight: 800; font-size: 16px; letter-spacing: .2px; color: var(--text); margin-top: 2px; }
#reminderSheet .rem-when { opacity: .85; font-size: 14px; color: var(--slate); }
#reminderSheet .rem-notes { opacity: .82; font-size: 14px; line-height: 1.35; color: var(--text); display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
#reminderSheet .modal-actions { margin-top: 6px; }

/* Owner color accent via data-owner class we’ll add dynamically */
#reminderSheet .rem-colorbar.liam { background: var(--liam); }
#reminderSheet .rem-colorbar.marlee { background: var(--marlee); }

/* Light theme tweaks */
body.theme-light #reminderSheet .rem-title { color: #044d5a; }
body.theme-light #reminderSheet .rem-notes { color: #062730; opacity: .9; }
body.theme-light #reminderSheet .rem-when { color: #35606b; }

/* Light theme surface adjustments for new sections (reuse earlier styles) */
body.theme-light .settings-form .settings-section { background: linear-gradient(180deg, rgba(0,155,195,0.24), rgba(0,135,175,0.18)); border:1px solid rgba(0,140,185,0.40); box-shadow: 0 2px 6px rgba(0,70,85,0.15), inset 0 1px 0 rgba(255,255,255,0.40); }
/* Dark theme section styling unify */
body:not(.theme-light) .settings-form .settings-section { background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025)); border:1px solid rgba(255,255,255,0.08); box-shadow: 0 2px 4px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04); }

/* Settings modal tweaks */
.settings-dialog h2 { margin-bottom: 4px; }
.settings-section { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.08); padding: 12px 14px 14px; border-radius: 14px; display: flex; flex-direction: column; gap: 10px; }
body.theme-light .settings-section { background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.02)); border-color: rgba(0,0,0,0.08); }
.settings-sub { margin: 0; font-size: 14px; letter-spacing: .3px; font-weight: 700; opacity: 0.8; }
.settings-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width:520px){ .settings-row-2 { grid-template-columns: 1fr; } }
.swatch-inputs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.swatch-input { display: flex; align-items: center; justify-content: space-between; gap: 4px; background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.12); padding: 4px 6px; border-radius: 12px; min-width:0; }
body.theme-light .swatch-input { background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.02)); border-color: rgba(0,0,0,0.12); }
.swatch-input input[type="color"] { flex:1 1 auto; width: 100%; aspect-ratio:1 / 1; height:auto; border: none; background: transparent; padding: 0; min-width:0; }
/* Make native color input inner swatch rounded (WebKit + Firefox) */
.swatch-input input[type="color"],
.owner-color,
#modalColor { -webkit-appearance: none; appearance: none; }
.swatch-input input[type="color"]::-webkit-color-swatch-wrapper,
.owner-color::-webkit-color-swatch-wrapper,
#modalColor::-webkit-color-swatch-wrapper { padding:0; border-radius:10px; }
.swatch-input input[type="color"]::-webkit-color-swatch,
.owner-color::-webkit-color-swatch,
#modalColor::-webkit-color-swatch { border:none; border-radius:10px; }
.swatch-input input[type="color"]::-moz-color-swatch,
.owner-color::-moz-color-swatch,
#modalColor::-moz-color-swatch { border:none; border-radius:10px; }

/* Tight radius variant for small size in mobile media rule */
@media (max-width:520px){
  .swatch-input input[type="color"]::-webkit-color-swatch-wrapper,
  .owner-color::-webkit-color-swatch-wrapper,
  #modalColor::-webkit-color-swatch-wrapper { border-radius:8px; }
  .swatch-input input[type="color"]::-webkit-color-swatch,
  .owner-color::-webkit-color-swatch,
  #modalColor::-webkit-color-swatch { border-radius:8px; }
  .swatch-input input[type="color"]::-moz-color-swatch,
  .owner-color::-moz-color-swatch,
  #modalColor::-moz-color-swatch { border-radius:8px; }
}
.swatch-input button { flex:0 0 auto; min-height: 32px; height:32px; padding:0 8px; width:34px; display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1; }
.settings-actions { grid-template-columns: 1fr 1fr !important; }
* { box-sizing: border-box; }
html, body { height: 100%; overflow-x: hidden; overflow-y: hidden; }
body {
  margin: 0;
  color: var(--text);
  background: linear-gradient(160deg, var(--bg1), var(--bg2));
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* App Bar */
header.appbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  backdrop-filter: saturate(120%) blur(6px);
  background: linear-gradient(180deg, rgba(10,16,28,0.96), rgba(10,16,28,0.90));
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-bottom: env(safe-area-inset-bottom);
}
.appbar-inner {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 1fr auto 1fr; /* left | center | right */
  position: relative;
  padding: 10px clamp(12px, 4vw, 24px);
  min-height: var(--appbar-h);
}
.bar-left { justify-self: start; display: flex; align-items: center; gap: 8px; }
.bar-right { justify-self: end; display: inline-flex; align-items: center; gap: 8px; }
.logo-btn {
  position: static; transform: none; justify-self: center;
  border: none; background: transparent; padding: 0; margin: 0; cursor: pointer;
  width: 44px; height: 44px; border-radius: 10px;
}
.logo-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.logo-btn img.logo { width: 100%; height: 100%; display: block; border-radius: 10px; }
.btn {
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px; cursor: pointer;
  transition: transform 0.06s ease, background 0.2s ease, border-color 0.2s ease;
  min-height: 44px;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:hover { border-color: rgba(255,255,255,0.24); }
.btn.ghost { background: transparent; border-color: rgba(255,255,255,0.12); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.week-indicator {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  min-height: 44px; font-weight: 700;
}
.week-indicator > span:first-child { display: none; }
main {
  /* Fixed viewport-based height so grid fractions have a definite size */
  height: calc(100svh - var(--appbar-h));
  padding: clamp(6px, 1.4vmin, 12px);
  padding-bottom: 8px;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; /* scroll only if rows can't fit */
  overflow-x: hidden;
  -ms-overflow-style: none; /* IE/old Edge hide */
  scrollbar-width: none; /* Firefox hide */
}
main::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* ================================
   SIMPLE MODE: GRID + STICKY HEADERS
   ================================ */
.matrix-wrap { flex: 1; overflow: visible; min-height: 0; display: flex; }
.matrix {
  height: 100%;
  width: 100%;
  grid-auto-rows: auto;
  display: grid;
  /* left day labels + 2 owner columns */
  grid-template-columns: var(--left-col-width) 1fr 1fr; /* locked left column width */
  grid-template-rows: var(--top-row-height) repeat(7, auto); /* header + natural content height rows (no giant gap when empty) */
  /* FILL GRID HEIGHT */
  flex: 1;
  row-gap: var(--grid-gap);
  column-gap: var(--grid-gap); /* use explicit column-gap so we can neutralize extra gap when one column collapses */
  max-width: 100%;
  overflow: visible; /* Allow today glow to extend beyond grid boundaries */
  transition: grid-template-columns .28s cubic-bezier(.4,0,.2,1);
}
/* Top sticky row (owner headers), Left sticky column (day labels), corner merged */
.corner, .colhdr, .rowhdr, .cell {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  overflow-y: visible;
  overflow-x: hidden;
}
.settings-btn { width:100%; height:100%; background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; color: var(--slate); font-size: 18px; cursor: pointer; display:flex; align-items:center; justify-content:center; font-weight:700; position: relative; z-index: 130; pointer-events: auto; }
.settings-btn:hover { color: var(--text); }
.settings-btn:focus-visible { outline:2px solid var(--accent1); outline-offset:2px; border-radius:10px; }
body.theme-light .settings-btn { color: #374151; background: var(--g-chrome); border: 1px solid var(--border-strong); }
body.theme-light .settings-btn:hover { color:#0d1117; }
/* Absolutely no vertical scrollbars in headers/cells */
.colhdr, .rowhdr, .cell { overflow-y: visible !important; }
/* FIX: give corner real background/border and higher z to avoid bleed */
.corner { position: sticky; top: 0; left: 0; z-index: 120; /* raised above headers/cells */ overflow: visible; height: var(--top-row-height); display: flex; align-items: center; justify-content: center; pointer-events: auto; }
.colhdr {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; letter-spacing: 0.3px; color: var(--slate);
  padding: 0 6px; /* fixed height; horizontal pad only */
  font-size: var(--header-font);
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  height: var(--top-row-height);
  max-width: 100%;
  overflow: hidden !important;
}
/* Remove extra vertical gap just under locked header row */
/* Removed gap pull-up; natural auto rows remove large space */
.colhdr.liam { color: var(--liam); padding: 0 6px; }
.colhdr.marlee { color: var(--marlee); padding: 0 6px; }
/* ========= Owner Focus Mode ========= */
/* Owner focus: keep 3-column grid so spacing stays correct; collapse hidden column width to 0 */
body.owner-focus-Liam .matrix { grid-template-columns: var(--left-col-width) 1fr 0px; column-gap: 0; }
body.owner-focus-Marlee .matrix { grid-template-columns: var(--left-col-width) 0px 1fr; column-gap: 0; }
/* Recreate a single consistent horizontal gap between day labels and the visible owner column */
body.owner-focus-Liam .colhdr.liam,
body.owner-focus-Liam .cell[data-owner="Liam"] { margin-left: var(--grid-gap); }
body.owner-focus-Marlee .colhdr.marlee,
body.owner-focus-Marlee .cell[data-owner="Marlee"] { margin-left: var(--grid-gap); }
/* Include today cell variants */
body.owner-focus-Liam .cell.today[data-owner="Liam"],
body.owner-focus-Marlee .cell.today[data-owner="Marlee"] { margin-left: var(--grid-gap); }
/* Ensure day label column (rowhdr) not shifted */
body.owner-focus-Liam .rowhdr,
body.owner-focus-Marlee .rowhdr { margin-left: 0; }
/* Fully hide opposite header to avoid residual sliver */
body.owner-focus-Liam .colhdr.marlee,
body.owner-focus-Marlee .colhdr.liam { display: none !important; }
body.owner-focus-Liam .colhdr.marlee,
body.owner-focus-Liam .cell[data-owner="Marlee"],
body.owner-focus-Marlee .colhdr.liam,
body.owner-focus-Marlee .cell[data-owner="Liam"] {
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
/* ========= Day Focus Refined (pre-measured span) ========= */
body.day-focus { --day-focus-span: auto; --day-focus-gap: 0px; overflow: hidden; }
body.day-focus #appbar { position: sticky; top:0; z-index:1000; }
body.day-focus .matrix { row-gap:0; position:relative; height: var(--day-focus-span); }
body.day-focus .rowhdr:not(.focused-day),
body.day-focus .cell:not(.focused-day-cell) { height:0!important; min-height:0!important; max-height:0!important; margin:0!important; padding:0!important; opacity:0; pointer-events:none; overflow:hidden!important; transition:opacity .22s ease,height .22s ease; }
body.day-focus .rowhdr.focused-day,
body.day-focus .cell.focused-day-cell {
  opacity:1; pointer-events:auto;
  /* Uniform measured height applied; min/max removed to reduce overflow calc sensitivity */
  height:var(--day-focus-content-height);
  padding-top:calc(var(--day-focus-gap) + var(--day-focus-extra-gap));
  /* Prevent bottom/right faint bar caused by background + internal scroll math */
  overflow:hidden; /* clip internal scroll wrapper instead */
  position:relative;
  transition:opacity .22s ease,height .22s ease;
}
/* Inner scroll wrapper (injected via JS later if not present) */
body.day-focus .cell.focused-day-cell > .chips { position:relative; overflow:visible; }
/* Slightly tighter bottom padding in focused mode to keep plus button within measured height */
body.day-focus .cell.focused-day-cell > .chips { padding-bottom: 20px; }
body.day-focus.grow .cell.focused-day-cell { overflow:hidden; }
body.day-focus.grow .cell.focused-day-cell > .chips { overflow:auto; padding-right:6px; scrollbar-gutter: stable; }
body.day-focus.grow { overflow:hidden; }
body.day-focus.grow .cell.focused-day-cell { overflow:auto; height:auto; max-height:none; }
body.owner-focus-Liam .colhdr.liam,
body.owner-focus-Marlee .colhdr.marlee { position: relative; z-index: 20; }
body.owner-focus-Liam .colhdr.liam::after,
body.owner-focus-Marlee .colhdr.marlee::after { content:""; position:absolute; inset:0; box-shadow:0 4px 14px -4px rgba(0,0,0,0.35); border-radius:inherit; pointer-events:none; }
/* Make headers obviously interactive */
.colhdr.liam, .colhdr.marlee { cursor: pointer; user-select: none; }
.colhdr.liam:focus-visible, .colhdr.marlee:focus-visible { outline:2px solid var(--accent1); outline-offset:2px; }
/* Interaction with owner focus: already hidden owner column stays hidden */
body.owner-focus-Liam[class*="day-focus-"] .cell[data-owner="Marlee"],
body.owner-focus-Marlee[class*="day-focus-"] .cell[data-owner="Liam"] { opacity:0 !important; pointer-events:none !important; }
/* Allow clearing on escape – pointer cursor for day headers */
.rowhdr { cursor: pointer; }
/* ULTRA-COMPACT ROW HEADERS */
/* Prevent grid children from forcing horizontal overflow */
.matrix > .rowhdr,
.matrix > .cell { min-width: 0; }
.rowhdr {
  position: sticky; left: 0; z-index: 3;
  display: grid; place-items: center;
  padding: clamp(2px, 0.6vmin, 6px);
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  max-width: 100%;
  overflow: visible !important; /* Allow glow to show for today rows */
}

/* Special overflow handling for today row to prevent glow clipping */
.rowhdr.today {
  overflow: visible !important; /* keep glow visible */
  margin: 0 !important; /* unify spacing with other rows */
}

.rowhdr:not(.today) {
  overflow: hidden !important; /* Keep normal rows contained */
}
.rowhdr:active { transform: translateY(1px); }
.rowhdr:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rowhdr .day-mini { display: grid; grid-template-rows: auto auto auto; align-items: center; justify-items: center; line-height: 1; gap: 2px; width: 100%; }
.rowhdr .day-mini .dow { font-weight: 900; color: var(--text); font-size: clamp(10px, 1.1vmin, 12px); letter-spacing: 0.2px; }
.rowhdr .day-mini .bar { width: 56%; height: 1px; background: rgba(255,255,255,0.55); border-radius: 1px; }
.rowhdr .day-mini .date { font-size: clamp(9px, 1.0vmin, 11px); color: var(--text); font-weight: 900; }
.cell { 
  padding: var(--cell-pad); 
  overflow: visible; 
  position: relative; 
}

/* Special margin for today cells to ensure glow visibility */
.cell.today {
  margin: 0 !important; /* unify spacing */
  overflow: visible !important; /* allow glow */
}

.cell:focus-within { overflow: visible; }
/* Chips */
.chips { 
  display: flex; 
  flex-direction: column; 
  gap: 6px; 
  padding-bottom: 24px;  
  min-width: 0; 
  overflow-x: hidden; 
  overflow-y: visible; 
}

/* Special handling for chips in today cells */
.cell.today .chips {
  overflow: visible !important; /* Ensure today chip shadows aren't clipped */
  margin: 4px 0 !important; /* Extra space for drop shadows */
}
.chip { position: relative; display: flex; align-items: center; gap: 8px; padding: var(--chip-pad-y) var(--chip-pad-x); border-radius: var(--chip-radius); background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.14); box-shadow: var(--shadow); min-height: 44px; user-select: none; max-width: 100%; overflow-x: hidden; }
.chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.chip .dot { position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: 10px 10px 0 0; background: var(--slate); }
.chip .time { font-variant-numeric: tabular-nums; font-size: clamp(11px, 1.3vmin, 12px); color: var(--slate); padding: 2px 6px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); flex: 0 0 auto; }
.chip .text { flex: 1; min-width: 0; font-size: var(--chip-font); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plus { position: absolute; right: -2px; bottom: -2px; z-index: 30; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 14px; line-height: 1; color: #0b0e14; font-weight: 900; background: none !important; border: 0; outline: none; padding: 0; appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; pointer-events: auto; }
.plus::before { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 999px; background: linear-gradient(90deg, var(--accent1), var(--accent2)); box-shadow: 0 6px 12px rgba(0,0,0,0.35), inset 0 -1px 0 rgba(0,0,0,0.2); z-index: -1; pointer-events: none; }
.plus:hover::before { transform: scale(1.06); transition: transform .12s ease; }
.plus:active::before { transform: scale(0.98); }
.plus:focus-visible { outline: none; }
/* ===== Item Modal Editor ===== */
.modal{position:fixed;inset:0;background:rgba(11,14,20,0.88);display:grid;place-items:center;z-index:1000}
.modal[hidden]{display:none}
.modal-dialog{background:#121826;border:1px solid rgba(255,255,255,.14); border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,.45);width:min(92vw,520px);padding:16px;display:flex;flex-direction:column;gap:10px;max-height:calc(100svh - 24px);overflow:auto;-webkit-overflow-scrolling:touch}
.modal-dialog h2{margin:0 0 6px 0;font-size:16px;letter-spacing:.2px}
.modal-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.modal-row .field{display:flex;flex-direction:column;gap:6px}
.modal-dialog input,.modal-dialog textarea,.modal-dialog select{width:100%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06); color:var(--text);border-radius:10px;padding:10px 12px;font:inherit}
.modal-dialog input[type="color"]{padding:0;height:40px;border-radius:10px}
.modal-dialog textarea{min-height:96px;resize:vertical}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:2px;position:sticky;bottom:0;background:inherit;padding-top:8px}
.modal-actions .btn{min-height:38px}
/* ----- Modal polish ----- */
.modal-dialog { background: linear-gradient(180deg, rgba(13,20,34,0.96), rgba(10,16,28,0.96)); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 12px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04); border-radius: 18px; padding: 18px 16px 14px; backdrop-filter: blur(10px); max-height: calc(100svh - 24px); overflow: auto; }

/* Compact modal layout on short viewports (e.g., phones with limited height) */
@media (max-height: 740px){
  .modal-dialog { padding: 12px 12px 10px; gap: 8px; }
  .modal-dialog h2 { margin-bottom: 6px; font-size: 16px; }
  .modal-actions .btn { min-height: 36px; }
  .modal-dialog input[type="text"], .modal-dialog textarea, .modal-dialog select { padding: 10px 12px; }
  .time-row { gap: 6px; }
  .owner-toggle { gap: 6px; }
}
.modal-dialog h2 { font-size: 18px; font-weight: 800; letter-spacing: .2px; margin: 0 0 10px 0; }
.modal-dialog label { display: block; font-size: 12px; letter-spacing: .2px; opacity: 0.75; margin: 10px 0 6px; }
.modal-dialog input[type="text"], .modal-dialog textarea, .modal-dialog select, .modal-dialog .flatpickr-input, .modal-dialog .flatpickr-alt-input { width: 100%; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(27,36,55,0.9), rgba(20,28,45,0.9)); color: var(--text); padding: 10px 12px; outline: none; transition: box-shadow .15s ease, border-color .15s ease; min-height: 40px; font-size: 14px; }
.modal-dialog input[type="text"]:focus, .modal-dialog textarea:focus, .modal-dialog select:focus { border-color: rgba(0,210,255,0.55); box-shadow: 0 0 0 3px rgba(0,210,255,0.20); }
.modal-dialog textarea { min-height: 110px; resize: vertical; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 14px; }
.modal-actions .btn { height: 44px; border-radius: 12px; }
.modal-actions .btn.ghost { border-color: rgba(255,255,255,0.14); }
.modal-actions .btn:last-child { font-weight: 700; }
.time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Force single column inside modal editor (matches previous inline style) */
.modal-dialog .time-row { grid-template-columns: 1fr; }
@media (max-width:520px){ .time-row { grid-template-columns: 1fr 1fr; } }
.dt-pair { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
@media (max-width: 420px){ .dt-pair { grid-template-columns: 1fr 1fr; } }
@media (max-width:420px){ .time-row { grid-template-columns: 1fr; } }
.owner-toggle { display: flex; gap: 8px; margin-top: 4px; }
.btn-toggle { border: 1px solid rgba(255,255,255,0.18); background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)); color: var(--text); padding: 10px 12px; border-radius: 12px; cursor: pointer; user-select: none; min-height: 40px; font: inherit; }
.btn-toggle.active { border-color: rgba(255,255,255,0.35); box-shadow: 0 0 0 3px rgba(124, 91, 255, 0.16); }
#modalOwner { display: none; }
.color-picked { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; }
#modalColor { flex: 1 1 auto; width: auto; height: 46px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); padding: 0; background: transparent; }
.color-row { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.eyedropper { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)); border: 1px solid rgba(255,255,255,0.18); color: var(--text); cursor: pointer; }
.eyedropper:hover { filter: brightness(1.05); }
.eyedropper:active { transform: translateY(1px); }
.color-swatches { display: flex; gap: 10px; margin-top: 0; flex: 0 0 auto; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
.color-swatches .swatch { width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); background: var(--swatch, #888); padding: 0; }
.color-swatches .swatch[data-color] { background: none; }
.color-swatches .swatch[data-color="#00D2FF"] { background: #00D2FF; }
.color-swatches .swatch[data-color="#7A43FF"] { background: #7A43FF; }
.color-swatches .swatch[data-color="#FF8800"] { background: #FF8800; }
.color-swatches .swatch[data-color="#FF0000"] { background: #FF0000; }
.color-swatches .swatch[data-color="#FFFF00"] { background: #FFFF00; }
.color-swatches .swatch[data-color="#FF00FF"] { background: #FF00FF; }
.color-swatches .swatch[data-color="#00FF00"] { background: #00FF00; }
.chip.drag-origin { opacity: 0.35; }
.drag-ghost { position: fixed; left: 0; top: 0; transform: translate(-9999px, -9999px); pointer-events: none; z-index: 10000; padding: var(--chip-pad-y) var(--chip-pad-x); border-radius: var(--chip-radius); background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)); border: 1px solid rgba(255,255,255,0.22); box-shadow: 0 12px 28px rgba(0,0,0,0.45); min-height: 44px; display: flex; align-items: center; gap: 8px; color: var(--text); font-size: var(--chip-font); }
.chip, .item { touch-action: pan-y; -webkit-user-drag: none; user-select: none; }
body.dragging .chip, body.dragging .item { touch-action: none; }
.cell.drop-hover { outline: 2px dashed rgba(255,255,255,0.35); outline-offset: -4px; }
.cell .dup-overlay{ position: absolute; inset: 0; display: none; pointer-events: none; }
.cell.drop-hover .dup-overlay{ display: block; }
.cell .dup-overlay .dup-right{ position: absolute; top: 0; right: 0; bottom: 0; width: var(--dupW, 160px); }
.cell .dup-overlay .dup-divider{ position: absolute; top: 10%; bottom: 10%; left: 0; border-left: 1px dashed rgba(255,255,255,0.55); opacity: 0.9; }
.cell .dup-overlay .dup-label{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; letter-spacing: .3px; color: rgba(234,242,255,0.55); text-transform: uppercase; }
@media (max-width: 480px){ .cell .dup-overlay .dup-label{ font-size: 10px; letter-spacing: .2px; } }
.cell .dup-overlay.dup-active .dup-label{ color: rgba(234,242,255,0.9); text-shadow: 0 1px 0 rgba(0,0,0,0.35); }

/* Light theme duplicate label - lighter muted grey against white backgrounds */
body.theme-light .cell .dup-overlay .dup-label { 
  color: #9CA3AF; /* lighter muted grey */
  text-shadow: none; /* clean appearance */
}
body.theme-light .cell .dup-overlay.dup-active .dup-label { 
  color: #6B7280; /* medium grey for active state */
  font-weight: 900;
  text-shadow: none;
}

/* Light theme duplicate divider and border styling */
body.theme-light .cell .dup-overlay .dup-divider { 
  border-left-color: rgba(107, 114, 128, 0.4) !important; /* muted grey divider */
}

body.theme-light .cell.drop-hover { 
  outline-color: rgba(107, 114, 128, 0.5) !important; /* muted grey dashed border */
}
.trash { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--appbar-h) + 14px); width: 72px; height: 72px; border-radius: 999px; display: none; align-items: center; justify-content: center; z-index: 200000; background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)); border: 1px solid rgba(255,255,255,0.22); box-shadow: 0 16px 36px rgba(0,0,0,0.48), inset 0 -2px 0 rgba(0,0,0,0.22); backdrop-filter: saturate(140%); cursor: pointer; outline: none; }
.trash:focus-visible { box-shadow: 0 0 0 3px rgba(0,210,255,0.65), 0 16px 36px rgba(0,0,0,0.48), inset 0 -2px 0 rgba(0,0,0,0.22); }
.trash.visible { display: flex; }
.trash .icon { font-size: 28px; line-height: 1; user-select: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); pointer-events: none; }
.trash.hot { border-color: #ff6b6b; box-shadow: 0 18px 42px rgba(255,107,107,0.35), inset 0 0 0 2px rgba(255,107,107,0.35); }
.colhdr.liam, .colhdr.marlee { background: linear-gradient(160deg, var(--bg1), var(--bg2)) !important; opacity: 1 !important; }
@media (max-width: 520px){ .modal-row { grid-template-columns: 1fr 1fr; } #modalColor { height: 38px; min-width: 110px; } .eyedropper { width: 34px; height: 34px; } .owner-toggle { flex-wrap: wrap; gap: 6px; } .btn-toggle { padding: 8px 10px; min-height: 36px; font-size: 14px; flex: 1 1 0; min-width: 0; } .color-swatches { gap: 8px; } .color-swatches .swatch { width: 28px; height: 28px; border-radius: 999px; box-shadow: 0 4px 10px rgba(0,0,0,0.35), inset 0 -1px 0 rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.22); }}
@media (max-width: 420px){ .modal-row { grid-template-columns: 1fr; } .owner-toggle { justify-content: stretch; } .btn-toggle { flex: 1 1 auto; } }
.color-swatches .swatch:hover { transform: translateY(-1px); transition: transform .12s ease; }
.color-swatches .swatch:active { transform: translateY(0); }
.rowhdr.today { background: linear-gradient(180deg, rgba(0,210,255,0.28), rgba(0,210,255,0.12)); border-color: rgba(0,230,255,0.65); box-shadow: 0 0 0 1px rgba(0,230,255,0.55), 0 0 0 3px rgba(0,220,255,0.18), inset 0 0 0 1px rgba(255,255,255,0.08); color: #fff; font-weight: 600; letter-spacing: .3px; }
.cell.today { background: linear-gradient(180deg, rgba(0,210,255,0.18), rgba(0,210,255,0.08)) !important; border-color: rgba(0,220,255,0.55) !important; box-shadow: 0 0 0 1px rgba(0,220,255,0.48), 0 0 0 3px rgba(0,220,255,0.10), var(--shadow) !important; position: relative; transition: background .25s ease, box-shadow .25s ease, border-color .25s ease; }
/* Removed oversized glow; subtle consistent sizing retained */
.chip { background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)) !important; border-color: rgba(255,255,255,0.10) !important; box-shadow: var(--shadow); display: flex; align-items: center; gap: 6px; }
.chip .text { color: var(--slate) !important; }
.chip.multi-selected { outline: 2px solid rgba(0,230,255,0.9); box-shadow: 0 0 0 3px rgba(0,230,255,0.25), var(--shadow); position: relative; }
.grip-wrap { display: flex; align-items: center; margin-left: auto; }
.grip { font-size: 14px; line-height: 1; cursor: grab; user-select: none; touch-action: none; opacity: 0.55; padding: 4px 2px 4px 4px; }
.grip:active { cursor: grabbing; }
.chip:hover .grip { opacity: 0.85; }
.cell.today .chip .text, .cell.today .chip .time { color: var(--text) !important; }
.cell.today .chip { filter: brightness(1.02) saturate(1.02); }

/* ===============================================
   ELEVATED UNIFORM LIGHT CYAN THEME
   Beautiful gradient background with refined styling
   =============================================== */
body.theme-light {
  --uniform-cyan: #CFF7FF;
  --uniform-cyan-light: #E8FCFF;
  --uniform-cyan-soft: #D7F9FE;
  --uniform-cyan-bg: #B8F0F8;
  --uniform-cyan-bg-deep: #A5E8F2;
  --uniform-border: #86CBD7;
  --uniform-border-light: #A8DBE5;
  --uniform-shadow: 0 2px 8px rgba(0, 150, 180, 0.08);
  --uniform-shadow-strong: 0 4px 16px rgba(0, 150, 180, 0.12);
  background: linear-gradient(135deg, var(--uniform-cyan-bg) 0%, var(--uniform-cyan-bg-deep) 50%, var(--uniform-cyan-bg) 100%) !important;
}

/* Apply uniform cyan with subtle elevation and refinement */
body.theme-light header.appbar,
body.theme-light .corner,
body.theme-light .colhdr,
body.theme-light .colhdr.liam,
body.theme-light .colhdr.marlee,
body.theme-light .rowhdr,
body.theme-light .rowhdr:not(.today),
body.theme-light .cell,
body.theme-light .week-indicator,
body.theme-light .btn,
body.theme-light .btn-toggle,
body.theme-light .settings-section,
body.theme-light .settings-header-bar,
body.theme-light .swatch-input,
body.theme-light .owner-color,
body.theme-light .trash,
body.theme-light .drag-ghost {
  background: linear-gradient(145deg, var(--uniform-cyan-light), var(--uniform-cyan)) !important;
  border: 1px solid var(--uniform-border-light) !important;
  box-shadow: var(--uniform-shadow) !important;
  backdrop-filter: blur(2px) !important;
}

/* Chips get subtle elevation */
body.theme-light .chip {
  background: linear-gradient(145deg, var(--uniform-cyan-light), var(--uniform-cyan-soft)) !important;
  border: 1px solid var(--uniform-border) !important;
  box-shadow: var(--uniform-shadow-strong), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(4px) !important;
}

/* Modal gets enhanced glass effect */
body.theme-light .modal-dialog {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.75), var(--uniform-cyan-light)) !important;
  border: 1px solid var(--uniform-border-light) !important;
  box-shadow: 0 12px 32px rgba(0, 150, 180, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(12px) saturate(1.1) !important;
}

/* Today variants with enhanced dual-layer glow effect */
body.theme-light .rowhdr.today,
body.theme-light .cell.today,
body.theme-light .cell.today .chip {
  background: linear-gradient(145deg, var(--uniform-cyan-light), var(--uniform-cyan)) !important;
  border: 1px solid var(--uniform-border) !important;
  box-shadow: 0 0 6px #4FBCFF,      /* crisp edge glow */
              0 0 20px #80E3FF,     /* soft outer aura */
              0 2px 6px rgba(0,0,0,0.08) !important; /* grounding shadow */
  transform: translateY(-2px) !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Today row header (day label) gets near-white treatment */
body.theme-light .rowhdr.today {
  background: linear-gradient(145deg, #FFFFFF, #F8FDFF) !important;
  color: #006B7D !important; /* cyan-teal text matching theme */
  font-weight: 800 !important;
  border: 1px solid rgba(79, 188, 255, 0.4) !important;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9),     /* white inner glow */
              0 0 15px rgba(79, 188, 255, 0.3),      /* cyan aura */
              0 3px 8px rgba(0,0,0,0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.95) !important; /* bright inner highlight */
  transform: translateY(-3px) !important;
  z-index: 6 !important;
}

/* Today cells get near-white treatment to match */
body.theme-light .cell.today {
  background: linear-gradient(145deg, #FFFFFF, #F8FDFF) !important;
  border: 1px solid rgba(79, 188, 255, 0.3) !important;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.9),
              0 0 12px rgba(79, 188, 255, 0.2),
              0 2px 6px rgba(0,0,0,0.04),
              inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* Today chips get enhanced drop shadows to pop off bright background */
body.theme-light .cell.today .chip {
  background: linear-gradient(145deg, #FFFFFF, #F8FDFF) !important;
  border: 1px solid rgba(79, 188, 255, 0.4) !important;
  box-shadow: 0 3px 12px rgba(0, 150, 180, 0.25),     /* strong drop shadow */
              0 6px 20px rgba(0, 150, 180, 0.15),     /* deeper shadow for pop */
              0 1px 4px rgba(0,0,0,0.1),              /* crisp edge definition */
              inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  color: #006B7D !important;
  transform: translateY(-1px) !important; /* slight lift for more pop */
}

/* Form inputs and time pills with glass effect */
body.theme-light .chip .time,
body.theme-light .modal-dialog input[type="text"],
body.theme-light .modal-dialog textarea,
body.theme-light .modal-dialog select {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.6), var(--uniform-cyan-light)) !important;
  border: 1px solid var(--uniform-border-light) !important;
  box-shadow: inset 0 1px 3px rgba(0, 150, 180, 0.05) !important;
  backdrop-filter: blur(4px) !important;
}

/* Enhanced text contrast and readability */
body.theme-light .chip .text,
body.theme-light .chip .time,
body.theme-light .modal-dialog input,
body.theme-light .modal-dialog textarea,
body.theme-light .modal-dialog select {
  color: #044d5a !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}

/* Modal backdrop with enhanced blur */
body.theme-light .modal {
  background: linear-gradient(135deg, rgba(207, 247, 255, 0.9), rgba(232, 252, 255, 0.8));
  backdrop-filter: blur(8px) !important;
}

/* Reminder sheet: translucent backdrop and centered modal */
#reminderSheet.modal {
  /* Dim, but keep app visible underneath */
  background: rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(2px) !important;
  /* Center the dialog to avoid being off-screen */
  align-items: center !important;
  justify-items: center !important;
  z-index: 999998 !important;
}
#reminderSheet .modal-dialog {
  /* Centered card look */
  margin: 16px !important;
  border-radius: 18px !important;
  width: min(92vw, 520px) !important;
}

/* Subtle hover effects */
body.theme-light .chip:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--uniform-shadow-strong), 0 6px 20px rgba(0, 150, 180, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.theme-light .btn:hover,
body.theme-light .rowhdr:hover {
  box-shadow: var(--uniform-shadow-strong), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  transition: all 0.2s ease !important;
}

/* (removed old app-aligned Flatpickr block; using minimal overrides below) */

/* ===== Flatpickr minimal overrides (cosmetic only) ===== */
.flatpickr-calendar {
  /* Cosmetic look */
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(27,36,55,0.95), rgba(20,28,45,0.95));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 32px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.04);
  color: var(--text);
  /* Only width cap per viewport */
  max-width: calc(100vw - 16px);
}

/* Don’t pad the days container; pad inside the dayContainer instead */
.flatpickr-calendar .flatpickr-days { padding: 0 !important; }
.flatpickr-calendar .flatpickr-days .dayContainer { padding: 10px 16px 12px !important; }
/* Match weekday header width to day grid by mirroring horizontal padding */
.flatpickr-calendar .flatpickr-weekdays { padding: 0 16px !important; box-sizing: border-box; }

/* Round the top header as well so the top corners look curved */
.flatpickr-calendar .flatpickr-months {
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  overflow: hidden;
}

/* Day cosmetics */
.flatpickr-day:hover,
.flatpickr-day:focus,
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.inRange { border-radius: 8px; }

/* Month/header cosmetics */
.flatpickr-months, .flatpickr-weekdays { background: transparent; color: var(--slate); }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { color: var(--text); }

/* Light theme cosmetic tweaks */
body.theme-light .flatpickr-calendar {
  background: linear-gradient(145deg, var(--uniform-cyan-light), var(--uniform-cyan));
  border: 1px solid var(--uniform-border-light);
  color: #044d5a;
}
body.theme-light .flatpickr-calendar .flatpickr-time { border-bottom: 1px solid var(--uniform-border-light); }
body.theme-light .flatpickr-calendar .flatpickr-time .numInputWrapper {
  background: linear-gradient(145deg, rgba(255,255,255,0.6), var(--uniform-cyan-light));
  border: 1px solid var(--uniform-border-light);
}
body.theme-light .flatpickr-calendar .flatpickr-time input { color: #044d5a; }

/* ===== Login page extracted inline styles ===== */
.login-page .appbar .bar-left,
.login-page .appbar .bar-right { opacity: 0; pointer-events: none; }
.login-page .appbar .bar-right { display: flex; gap: 8px; }
.login-page .appbar .bar-right .btn { visibility: hidden; }
.login-page #googleBtn { background: linear-gradient(90deg, var(--accent1), var(--accent2)); color: #fff; }
.login-page .signup-only { display: none; }

/* Welcome sheet */
.modal .home-welcome { max-width: 480px; padding: 20px; }
.welcome-header { text-align: left; margin-bottom: 12px; }
.welcome-header .brand { font-weight: 600; }
.welcome-sub { color: var(--muted-fg, #8a94a6); margin: 6px 0 0; }
.welcome-form .field { margin: 10px 0; }
.welcome-form .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.welcome-form .hint { font-size: 0.85rem; color: var(--muted-fg, #8a94a6); align-self: end; }
.welcome-footer { margin-top: 8px; display: flex; justify-content: flex-end; }
.linklike { background: none; border: 0; color: var(--muted-fg, #8a94a6); text-decoration: underline; cursor: pointer; }
.linklike.primary { color: var(--accent, #1778F2); }
#inviteToast { display:inline-block; padding:4px 10px; border-radius:999px; background: rgba(23,120,242,0.1); color:#1778F2; font-size:0.9rem; margin:8px auto 0; }
#inviteToast[hidden]{ display:none !important; }

/* Invite modal layout refinements */
.invite-link-row { display:grid; grid-template-columns: 1fr auto; gap: 8px; align-items:center; }
.invite-link-row input[type="text"] { width: 100%; min-height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); color: var(--text); padding: 8px 10px; }
body.theme-light .invite-link-row input[type="text"] { background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65)); border-color: rgba(0,0,0,0.12); color: #062730; }
.one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 420px){
  .welcome-form .grid-2 { grid-template-columns: 1fr; }
}

/* ===== PWA Open/Install Banner ===== */
#pwaBanner { position: fixed; left: 8px; right: 8px; bottom: 10px; z-index: 990; pointer-events: auto; }
#pwaBanner[hidden]{ display: none !important; }
#pwaBanner .pwa-banner-inner { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(27,36,55,0.95), rgba(20,28,45,0.92)); box-shadow: 0 10px 26px rgba(0,0,0,0.35); color: var(--text); position: relative; }
#pwaBanner .pwa-banner-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#pwaBanner .pwa-banner-text strong { font-size: 14px; letter-spacing: .2px; }
#pwaBanner .pwa-banner-text .muted { font-size: 12px; opacity: .75; }
#pwaBanner .pwa-banner-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#pwaBanner .pwa-dismiss { position: absolute; top: 6px; right: 8px; background: transparent; border: 0; color: var(--slate); cursor: pointer; font-size: 16px; line-height: 1; padding: 4px; }

@media (max-width: 520px){
  #pwaBanner .pwa-banner-inner { flex-direction: column; align-items: stretch; gap: 10px; padding-right: 32px; }
  #pwaBanner .pwa-banner-actions { justify-content: flex-end; }
  #pwaBanner .pwa-dismiss { top: 4px; right: 6px; }
}

/* Light theme adjustments */
body.theme-light #pwaBanner .pwa-banner-inner {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(245,250,255,0.92));
  border: 1px solid rgba(0,0,0,0.12);
  color: #062730;
}

/* Ensure invite help stays on one line nicely */
.invite-help { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; }

/* Center Go back and Share equally */
#inviteActions.modal-actions { display: flex; justify-content: center; gap: 12px; }
#inviteActions .btn { min-width: 120px; }