@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600;700;800&display=swap");

:root {
  --navy: #0f1e33;
  --bg: #eef1f5;
  --card: #ffffff;
  --border: #dbe2ea;
  --note-bg: #f7f4ec;
  --note-border: #d8cdb0;
  --today-bg: #fff7e8;
  --today-border: #f3dfb0;
  --amber: #f59e0b;
  --amber-dark: #c07a05;
  --amber-darker: #8a5b06;
  --amber-darkest: #7a4d05;
  --text-primary: #101f33;
  --text-secondary: #5b6b81;
  --text-tertiary: #93a2b6;
  --tab-track: #e2e7ee;
  --chip-bg: #eef1f5;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  font-family: "Manrope", sans-serif;
  color: var(--text-primary);
  min-height: 100vh;
}

#app { min-height: 100vh; }

.screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.header-navy {
  background: var(--navy);
  padding: max(58px, calc(env(safe-area-inset-top, 0px) + 14px)) 20px 14px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.back-link {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: 600 13px "Manrope", sans-serif;
  color: rgba(255, 255, 255, 0.85);
}

.chev {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  flex-shrink: 0;
  display: inline-block;
}
.chev-left { transform: rotate(135deg); }
.chev-right { transform: rotate(-45deg); }
.chev-up { transform: rotate(-135deg); }
.chev-down { transform: rotate(45deg); }

.app-title { font: 800 22px "Manrope", sans-serif; color: #ffffff; margin: 0; }
.app-subtitle { font: 600 12px "Manrope", sans-serif; color: rgba(255, 255, 255, 0.7); margin-top: 4px; }

.search-card {
  margin: 14px 20px 10px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 14px;
  box-shadow: 0 1px 2px rgba(16, 31, 51, 0.05);
}
.search-input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font: 500 15px "Manrope", sans-serif;
  color: var(--text-primary);
}

.tabs {
  margin: 0 20px 6px;
  background: var(--tab-track);
  border-radius: 10px;
  padding: 3px;
  display: flex;
  gap: 3px;
}
.tab {
  flex: 1;
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  font: 700 13px "Manrope", sans-serif;
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--text-secondary);
}
.tab.active {
  background: #ffffff;
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(16, 31, 51, 0.12);
}

.list-area { flex: 1; overflow: auto; padding-bottom: 16px; }
.letter-label {
  padding: 14px 20px 4px;
  font: 700 11px "Manrope", sans-serif;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.person-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--navy);
  color: #ffffff;
  font: 700 12.5px "IBM Plex Mono", monospace;
  display: flex;
  align-items: center;
  justify-content: center;
}
.person-info { flex: 1; min-width: 0; }
.person-name { font: 600 15px "Manrope", sans-serif; color: var(--text-primary); }
.person-role { font: 500 12px "Manrope", sans-serif; color: var(--text-secondary); margin-top: 2px; }

.week-name { font: 700 17px "Manrope", sans-serif; color: #ffffff; margin-top: 12px; }
.week-role { font: 500 12px "Manrope", sans-serif; color: rgba(255, 255, 255, 0.65); margin-top: 2px; }
.week-range-row { display: flex; align-items: center; justify-content: center; margin-top: 14px; }
.week-range-label { font: 700 12.5px "IBM Plex Mono", monospace; color: #ffffff; letter-spacing: 0.03em; }

.today-banner {
  background: var(--today-bg);
  border-bottom: 1px solid var(--today-border);
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.today-label { font: 800 10px "IBM Plex Mono", monospace; color: var(--amber-darker); letter-spacing: 0.06em; flex-shrink: 0; }
.today-status { font: 600 13px "Manrope", sans-serif; color: var(--amber-darkest); text-align: right; }

.day-label-row {
  padding: 12px 20px 6px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.day-label-left { display: flex; align-items: center; gap: 7px; }
.day-label { font: 800 12px "Manrope", sans-serif; letter-spacing: 0.04em; color: var(--text-secondary); }
.day-today-tag { font: 800 11px "Manrope", sans-serif; color: var(--amber); }
.day-count { font: 500 11px "Manrope", sans-serif; color: var(--text-tertiary); }

.entry-confirmed {
  display: flex;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--border);
  background: #ffffff;
  align-items: flex-start;
}
.entry-time { min-width: 46px; font: 700 13.5px "IBM Plex Mono", monospace; color: var(--text-primary); padding-top: 1px; }
.entry-text { flex: 1; font: 400 13.5px / 1.45 "Manrope", sans-serif; color: var(--text-primary); }

.entry-note {
  display: flex;
  gap: 10px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--border);
  border-left: 3px dashed var(--note-border);
  background: var(--note-bg);
}
.note-label { min-width: 44px; font: 700 10px "IBM Plex Mono", monospace; color: var(--text-tertiary); letter-spacing: 0.05em; padding-top: 2px; }
.note-text { flex: 1; font-style: italic; font-family: "Manrope", sans-serif; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }

.conflict-banner {
  margin: 0 20px 8px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #fdecea;
  border: 1px solid #f3b8b2;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.center-message {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  font: 500 14px "Manrope", sans-serif;
  color: var(--text-secondary);
  gap: 12px;
}
.signin-btn {
  background: var(--navy);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 22px;
  font: 700 14px "Manrope", sans-serif;
  cursor: pointer;
}
.error-text { color: #b91c1c; }
.bottom-spacer { height: 20px; }

/* Wide-screen (PC / landscape) week layout: all 7 days side by side instead of
   stacked, so the whole week is visible without scrolling the page — a busy day
   scrolls within its own column instead. Mobile keeps the default stacked layout;
   this only kicks in once there's genuinely room for 7 columns. */
@media (min-width: 860px) {
  /* Pin the whole screen to the viewport height so it never itself scrolls — the
     header stays put and the day columns fill exactly whatever's left, however tall
     the header actually rendered (no guessing a fixed px amount to subtract). Scoped
     to .screen-week only (Week/Overview), not Picker/Detail/Month, which still need
     their normal page scrolling on a wide screen. */
  .screen.screen-week {
    height: 100vh;
    overflow: hidden;
  }
  .week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 20px 20px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .week-grid .day-column {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* flex/grid items default to min-height:auto, which would otherwise
                       let content stretch the row instead of scrolling within it */
  }
  .week-grid .day-label-row {
    padding: 10px 12px 8px;
    flex-shrink: 0;
  }
  .week-grid .day-entries {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }
  .week-grid .entry-confirmed,
  .week-grid .entry-note {
    padding: 9px 12px;
    flex-wrap: wrap;
  }
  .week-grid .conflict-banner {
    margin: 0 12px 8px;
  }
  .week-grid .raw-line {
    padding: 9px 12px !important;
  }
  .week-grid .bottom-spacer { display: none; }
}

/* Wide-screen Month view: the header only needs its tall top padding to clear a
   phone's notch/status bar, which doesn't apply here — and with 6 full-height
   week rows to show, every bit of chrome above the grid counts. Tightened
   padding/margins only (same header rows, same info), scoped to this width so
   mobile keeps its normal safe-area-aware header. */
@media (min-width: 860px) {
  .screen-month .header-navy {
    padding: 16px 20px 10px;
  }
  .screen-month .week-name {
    margin-top: 4px;
  }
  .screen-month .week-range-row {
    margin-top: 6px;
  }
  .screen-month .month-card {
    margin: 10px 20px 14px;
    padding: 10px;
  }
}

/* Name-selection (Picker) screen: on a narrow/mobile screen this is just the
   header, search bar + name list, unchanged (.picker-body is a plain block on
   this screen size — .picker-main just fills it top to bottom like before).
   The month preview panel is built into the page unconditionally (see
   renderPicker in render.js) but stays hidden here — it only has anywhere
   sensible to go once the screen is wide enough for a real second column,
   not just a squeezed one. */
.picker-month-panel { display: none; }

/* Wide-screen (PC) Picker layout: a live Team Overview month preview fills what
   would otherwise be empty space to the right of the name list, and the navy
   header (now a sibling of .picker-body in the markup, not nested inside
   .picker-main) spans the full page above both columns. A plain calendar grid
   needs more room to read comfortably than the simpler 2-column week layout
   above, so this uses a wider breakpoint (1100px) than Week/Overview's 860px —
   below it, Picker looks exactly as it always has. The whole screen is pinned
   to the viewport height so only the name list scrolls internally — the
   header and the month panel stay fully visible while you scroll through
   names, same trick as the Week/Overview wide layout. */
@media (min-width: 1100px) {
  .screen.screen-picker {
    height: 100vh;
    overflow: hidden;
  }
  .screen-picker .header-navy {
    padding: 16px 20px 14px;
  }
  .picker-body {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1;
    min-height: 0;
  }
  .picker-main {
    width: 420px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .picker-main .list-area {
    min-height: 0;
  }
  .picker-month-panel {
    display: block;
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 24px 24px 24px 0;
  }
  .picker-month-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .picker-month-panel-title {
    font: 700 15px "Manrope", sans-serif;
    color: var(--text-primary);
  }
  .picker-month-panel-nav {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .picker-month-panel .month-card {
    margin: 0;
  }
}

/* PIN login screen */
.pin-input {
  display: block;
  margin: 20px auto 0;
  width: 160px;
  text-align: center;
  letter-spacing: 0.5em;
  font: 700 26px "IBM Plex Mono", monospace;
  color: var(--navy);
  background: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 12px 8px 12px 16px;
  outline: none;
}
.pin-error {
  min-height: 18px;
  margin-top: 10px;
  font: 600 12.5px "Manrope", sans-serif;
  color: #fca5a5;
}

/* ---------- Month view ----------
   Previously 100% inline-styled in render.js: a fixed 7-column grid with no
   responsive treatment at all, which on a phone-width screen squeezed real event
   names down to a couple of unreadable characters. These classes keep the same
   look render.js used to inline on desktop, and add a mobile breakpoint: below
   ~640px the grid keeps every day column at a genuinely readable minimum width
   and scrolls horizontally instead of shrinking text past the point of being
   legible — the same swipe-through-the-week pattern most phone calendar apps use
   for a month grid. Only what's actually dynamic per render (per-event colour,
   today state) stays as an inline style in render.js; everything else lives here. */
.month-card {
  margin: 16px 20px 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}
.month-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.month-swipe-hint {
  display: none;
  font: 600 10.5px "Manrope", sans-serif;
  color: var(--text-tertiary);
  margin: -2px 0 8px;
}
.month-dow-row,
.month-grid-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.month-dow-row {
  margin-bottom: 6px;
}
.month-grid-row {
  margin-bottom: 6px;
  align-items: stretch;
}
.month-dow-label {
  text-align: center;
  font: 700 10px "IBM Plex Mono", monospace;
  color: var(--text-tertiary);
}
.month-cell {
  /* Standard, uniform box for every day — see the comment above render.js's
     cellHtml for why this is fixed rather than grow-to-fit. Sized to comfortably
     hold the day number plus 6 rows of content (a leave badge and/or event chips)
     without scrolling — the day-number line (~18px) + 6 chip rows (~18px each,
     including their own padding) + 6 flex gaps (2px each) + the cell's own 4px
     top/bottom padding (8px) = 18 + 108 + 12 + 8 = 146px; a day with genuinely
     more than that still scrolls within its own box rather than growing it, so
     the grid stays uniform even on an exceptionally busy day. */
  height: 146px;
  overflow-y: auto;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 4px;
  cursor: pointer;
  border: 1px solid var(--border);
}
.month-cell.is-today {
  background: var(--today-bg);
  border: 1.5px solid var(--amber);
}
/* Lead/trail days outside the visible month, and any unused trailing row now the
   grid is always a full 6 weeks deep — still boxed at the same standard size, so
   the grid reads as one complete, evenly bordered calendar, but visually quieter
   (dashed, faint) and not clickable. */
.month-cell-blank {
  height: 146px;
  border-radius: 10px;
  border: 1px dashed var(--border);
  opacity: 0.5;
}
.month-daynum {
  font: 12px "Manrope", sans-serif;
  color: var(--text-primary);
  font-weight: 500;
}
.month-daynum.is-today {
  color: var(--amber-dark);
  font-weight: 800;
}
.month-event-chip {
  font: 600 10px "Manrope", sans-serif;
  color: var(--text-primary);
  border-radius: 4px;
  padding: 2px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.month-leave-chip {
  font: 700 9.5px "Manrope", sans-serif;
  border-radius: 4px;
  padding: 2px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 3px solid transparent;
}

/* Below ~640px (a phone in portrait) 7 columns at a legible width no longer fit on
   screen at once. Rather than keep shrinking text and padding until names become
   unreadable, give each day column a real minimum width and let the grid scroll
   horizontally — the day-of-week header row and every week row share the same
   min-width (via .month-scroll wrapping both in render.js) so columns stay lined
   up while scrolling. */
@media (max-width: 639px) {
  .month-card {
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px;
  }
  .month-dow-row,
  .month-grid-row {
    grid-template-columns: repeat(7, minmax(84px, 1fr));
    min-width: 620px;
  }
  .month-swipe-hint {
    display: block;
  }
}