/* Date navigator: week strip, day tabs, calendar sheet */

.day-tab:focus-visible {
      outline: 3px solid rgba(10,166,214,.28);
      outline-offset: 2px;
    }
.day-tabs {
      display: none;
      gap: 8px;
      overflow-x: auto;
      padding: 2px 0 8px;
      scrollbar-width: none;
    }
.day-tabs::-webkit-scrollbar { display: none; }
.day-tab {
      flex: 0 0 auto;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--ink);
      border-radius: 999px;
      padding: 9px 14px;
      font-weight: 750;
      cursor: pointer;
      transition: .15s ease;
    }
.day-tab:hover { border-color: #a9bac8; }
.day-tab.active {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy);
      box-shadow: 0 6px 16px rgba(24,59,91,.18);
    }
@media (max-width: 1100px) {
.day-tabs { display: flex; }
.day-tabs { flex: 1 1 auto; padding-bottom: 6px; }
}
@media (max-width: 620px) {
.day-tab { padding: 8px 12px; font-size: 13px; }
}
.day-tabs { display: flex; flex: 1 1 auto; gap: 8px; padding: 0; }
.day-tab { min-width: 62px; min-height: 40px; padding: 8px 16px; border-color: #d4e2eb; color: var(--navy); font-weight: 850; box-shadow: 0 4px 14px rgba(7,31,61,.04); }
.day-tab.active { color: var(--navy); background: var(--accent); border-color: var(--accent); box-shadow: 0 8px 20px rgba(17,201,239,.26); }
.today-tag .lucide { width: 17px; height: 17px; color: #0aa6d6; }
@media (max-width: 1080px) {
.day-tabs { order: 1; width: 100%; }
}
@media (max-width: 700px) {
.day-tabs { gap: 7px; }
.day-tab { min-width: 55px; min-height: 42px; padding: 8px 13px; font-size: 13px; }
}
.calendar-button, .week-arrow, .calendar-month-arrow {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 50%;
  background: rgba(255,255,255,.54);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 8px 18px rgba(36,68,113,.09);
  cursor: pointer;
}
.calendar-button:hover, .week-arrow:hover { background: rgba(255,255,255,.82); }
.date-navigator {
  position: sticky;
  top: 116px;
  z-index: 24;
  margin: 14px 0 20px;
  height: 122px;
  padding: 9px 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 26px;
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 #fff, 0 13px 34px rgba(36,68,113,.08);
  backdrop-filter: blur(22px) saturate(145%);
  clip-path: inset(-28px -28px -28px -28px round 26px);
  transition: top .22s ease, border-radius .2s ease, box-shadow .2s ease, clip-path .2s ease;
}
.date-navigator-top, .week-strip { display: flex; align-items: center; }
.date-navigator-top { height: 43px; justify-content: space-between; gap: 18px; margin: 0 0 3px; opacity: 1; transform: translateY(0); transition: opacity .16s ease, transform .2s ease; }
.date-navigator.is-compact { top: 52px; overflow: visible; border-color: transparent; border-radius: 20px; background: transparent; box-shadow: none; backdrop-filter: none; clip-path: none; }
.date-navigator.is-compact .date-navigator-top { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.date-navigator.is-compact .week-strip {
  min-height: 68px;
  padding-top: 6px;
  padding-bottom: 6px;
  transform: translateY(-43px);
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 20px;
  background: rgba(255,255,255,.88);
  box-shadow: inset 0 1px 0 #fff, 0 10px 26px rgba(36,68,113,.10);
  backdrop-filter: blur(22px) saturate(145%);
}
.date-actions { display: flex; align-items: center; gap: 10px; }
.calendar-button, .week-arrow { width: 40px; height: 40px; box-shadow: inset 0 1px 0 #fff, 0 7px 16px rgba(36,68,113,.07); }
.calendar-button .lucide, .week-arrow .lucide { width: 21px; height: 21px; }
.week-strip { position: relative; gap: 0; padding: 0 48px; transition: transform .2s ease; }
.week-arrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); }
.day-tabs {
  min-width: 0;
  flex: 1;
  display: grid !important;
  grid-template-columns: repeat(7, minmax(58px,1fr));
  gap: 8px;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.day-tabs::-webkit-scrollbar { display: none; }
.day-tab {
  min-height: 56px;
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 5px 6px;
  border: 1px solid transparent;
  border-radius: 18px;
  color: #667590;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
.day-tab .day-name { font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .045em; }
.day-tab .day-number { color: var(--sm-ink); font-size: 22px; font-weight: 850; }
.day-tab .event-dot { width: 5px; height: 5px; border-radius: 50%; background: #8391a9; }
.day-tab.active {
  color: rgba(255,255,255,.82);
  background: var(--sm-blue);
  border-color: rgba(255,255,255,.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 22px rgba(22,119,242,.25);
}
.day-tab.active .day-number { color: #fff; }
.day-tab.active .event-dot { background: #fff; }
.calendar-dialog { width: min(420px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 26px; color: var(--sm-ink); background: rgba(248,251,255,.97); box-shadow: 0 30px 90px rgba(20,40,75,.28); }
.calendar-dialog::backdrop { background: rgba(22,33,55,.28); backdrop-filter: blur(10px); }
.calendar-sheet { padding: 20px; }
.calendar-sheet-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; text-align: center; }
.calendar-month-arrow { width: 40px; height: 40px; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; }
.calendar-weekdays { margin: 18px 0 8px; color: var(--sm-muted); font-size: 11px; font-weight: 800; text-align: center; }
.calendar-day { aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: 13px; background: transparent; font-weight: 750; cursor: pointer; }
.calendar-day:hover { background: rgba(22,119,242,.08); }
.calendar-day.selected { color: #fff; background: var(--sm-blue); }
.calendar-day.today:not(.selected) { color: var(--sm-blue); box-shadow: inset 0 0 0 1px rgba(22,119,242,.3); }
.calendar-close { width: 100%; min-height: 46px; margin-top: 14px; border: 0; border-radius: 14px; color: #fff; background: var(--sm-blue); font-weight: 850; }
@media (max-width: 760px) {
.date-navigator { top: 88px; height: 115px; margin: 10px 10px 8px; padding: 7px 9px; border-radius: 21px; }
.date-navigator-top { height: 39px; margin-bottom: 2px; padding: 0 4px; }
.date-navigator.is-compact .week-strip { transform: translateY(-39px); }
.date-navigator.is-compact { top: 46px; clip-path: none; }
.week-strip { gap: 0; padding: 0 34px; }
.week-arrow { width: 34px; height: 42px; border: 0; background: rgba(255,255,255,.78); box-shadow: 0 5px 14px rgba(36,68,113,.08); }
.day-tabs { display: flex !important; gap: 4px; overflow: visible; }
/* Seven days share the row instead of overflowing it. A fixed 48px basis made
   the week 360px wide inside a 294px strip, so the last day was clipped by the
   right edge — visible on a Saturday, hidden the rest of the week. */
.day-tab { flex: 1 1 0; min-width: 0; min-height: 54px; padding: 5px 2px; border-radius: 15px; }
.day-tab .day-name { font-size: 11px; letter-spacing: .02em; }
.day-tab .day-number { font-size: 21px; }
}
@media (max-width: 430px) {
.date-navigator-top { align-items: center; }
.calendar-button { width: 40px; height: 40px; }
}
@media print {
.date-navigator { display: none !important; }
}