/* Minimal palette scaffolding (FR-7a, design.md §4). Real visual design
   is a later concern; only the light/dark variable mechanism is load-
   bearing now. Shift-state colors (FR-44b): light grey = open, blue =
   assigned; per-worker colors join with the curated list. */

:root {
  --bg: #ffffff;
  --fg: #1a1a1a;
  --accent: #2563eb;
  --shift-open: #d1d5db;   /* light grey: open shifts (dark label text) */
  --shift-assigned: #2563eb; /* blue: own/default assigned shifts */
}

:root[data-theme="dark"] {
  --bg: #16181d;
  --fg: #e8e8e8;
  --accent: #7aa2ff;
  --shift-open: #d1d5db;
  --shift-assigned: #1d4ed8;
}

/* Unauthenticated pages (no data-theme): follow the OS setting. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #16181d;
    --fg: #e8e8e8;
    --accent: #7aa2ff;
    --shift-open: #d1d5db;
    --shift-assigned: #1d4ed8;
  }
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, sans-serif;
  margin: 0;
}

header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 20%, transparent);
}

header nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

main {
  padding: 1rem;
  max-width: 70rem;
  margin: 0 auto;
}

form.inline {
  display: inline;
}

/* Author display rules (like .inline above) override the browser's
   built-in [hidden] handling — make hidden always win. */
[hidden] {
  display: none !important;
}

/* Disabled controls grey out until their precondition is met; the title
   tooltip on each explains what's needed (ui-pages.md). Site-wide (also
   the email "Sending…" buttons), with an explicit LIGHT face derived
   from the palette (2026-07-18) — a shade lighter than the native
   button chrome, matching the greyed drop-down's background. */
button:disabled,
select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: color-mix(in srgb, var(--fg) 7%, var(--bg));
  color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--fg) 35%, transparent);
  border-radius: 3px;
}

.flashes {
  list-style: none;
  padding: 0;
}

.flash-error { color: #b91c1c; }
.flash-info { color: var(--accent); }

a { color: var(--accent); }

/* -- Calendar (FR-44b) ------------------------------------------------- */

.calendar-controls {
  display: flex;
  gap: 1rem;
  margin: 0.5rem 0 1rem;
  flex-wrap: wrap;
}
.calendar-controls .spacer { flex: 1; }

.grid-scroll { overflow-x: auto; }

.calendar-grid {
  /* Fixed layout: the week column takes its set width and the seven
     day columns split the remainder EQUALLY (previously percentage
     widths over-constrained the table and one day column absorbed the
     difference, coming out narrower than its siblings). */
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  min-width: 56rem;
}
.calendar-grid th,
.calendar-grid td {
  border: 1px solid color-mix(in srgb, var(--fg) 20%, transparent);
  vertical-align: top;
  padding: 0.25rem;
  overflow-wrap: break-word;
}
.daynum { font-size: 0.75rem; opacity: 0.7; }
.daynum a { color: inherit; text-decoration: none; }
.daynum a:hover { text-decoration: underline; }
.daynum.today { font-weight: 700; }
/* Today's cell: 4x-thickness border (collapsed borders let the
   wider edge win over the neighbors' 1px). */
.calendar-grid td.today-cell {
  border: 4px solid color-mix(in srgb, var(--fg) 20%, transparent);
}

.shift {
  position: relative; /* anchors the FR-53 star in the top-right corner */
  border-radius: 4px;
  padding: 0.2rem 0.35rem;
  /* room in the top-right so the star never overlaps the state/time text */
  padding-right: 1.3rem;
  margin: 0.2rem 0;
  font-size: 0.8rem;
  cursor: pointer;
  color: #ffffff;
}
.day-list .shift { font-size: 1rem; padding: 0.5rem; }
.shift .when { font-weight: 600; margin-right: 0.3rem; }
.shift .loc { display: block; opacity: 0.9; }
/* Links inside a shift block (the map-link location stops, 2026-07-18)
   take the block's own label color — light or dark per the block's
   background class — in every link state, instead of the global accent.
   The underline remains as the clickable affordance. */
.shift a,
.shift a:visited,
.shift a:hover,
.shift a:active {
  color: inherit;
}
/* Shift-state and curated worker colors (FR-44b): generic classes so
   both calendar blocks and inline chips (e.g. the Users page display
   names) share the exact same background/text pairs. Saturated
   mid-tones whose background dominates, so one value works under both
   palettes; orange, yellow, and lime green carry dark label text; all
   stay distinguishable from the open-shift light grey. */
.color-open { background: var(--shift-open); color: #1f2937; }
.color-own,
.color-blue { background: var(--shift-assigned); color: #ffffff; }
.color-pink { background: #db2777; color: #ffffff; }
.color-red { background: #dc2626; color: #ffffff; }
.color-yellow { background: #eab308; color: #1f2937; }
.color-lime-green { background: #84cc16; color: #1f2937; }
.color-dark-green { background: #166534; color: #ffffff; }
.color-cyan { background: #0891b2; color: #ffffff; }
.color-purple { background: #5b21b6; color: #ffffff; }
.color-lavender { background: #c4b5fd; color: #1f2937; }
.color-brown { background: #78350f; color: #ffffff; }
.color-orange { background: #f97316; color: #1f2937; }
.color-open .badge,
.color-yellow .badge,
.color-orange .badge,
.color-lavender .badge,
.color-lime-green .badge { border-color: rgba(31, 41, 55, 0.6); }

/* Inline color chip (Users page display names). */
.color-chip {
  display: inline-block;
  padding: 0 0.4rem;
  border-radius: 4px;
}
.shift.selected { outline: 3px solid var(--fg); }
.shift.multi-selected { outline: 3px dashed var(--fg); }

/* FR-53 starred shifts: a star in the shift block's top-right corner.
   Schedulers/Admins get a clickable form-button (toggles the DB flag);
   everyone else sees a plain star only when the shift is starred. The
   inactive (unstarred) star is filled black; the `starred` state fills
   it yellow. Both keep the black outline, which stays legible on every
   block background color. (Other roles render no element at all for an
   unstarred shift, so the black fill is only ever seen by managers.) */
.star-corner {
  position: absolute;
  top: 1px;
  right: 2px;
  margin: 0;
  line-height: 0;
}
.star-btn {
  background: none;
  border: none;
  padding: 1px;
  margin: 0;
  cursor: pointer;
  line-height: 0;
}
.star-corner svg {
  display: block;
  width: 15px;
  height: 15px;
}
.day-list .star-corner svg { width: 20px; height: 20px; }
.star-corner svg path {
  fill: #000000;
  stroke: #000000;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.star-btn.starred svg path,
.star-corner.starred svg path { fill: #f5c518; }
.star-btn:focus-visible { outline: 2px solid var(--fg); border-radius: 3px; }

/* Week-operation selectors (requirements.md §3.3.3). Column just fits
   "Week of" with small margins; day columns share the rest equally. */
.week-col { width: 4.8rem; }
.week-btn { width: 100%; cursor: pointer; padding-left: 0.1rem; padding-right: 0.1rem; }
.week-btn.week-source { outline: 3px solid var(--fg); }
.week-btn.week-target { outline: 3px dashed var(--fg); }

.badge {
  display: inline-block;
  font-size: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  padding: 0 0.25rem;
  margin-left: 0.25rem;
}

#action-bar {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  border-top: 1px solid color-mix(in srgb, var(--fg) 25%, transparent);
  padding: 0.5rem 0;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.hours table { border-collapse: collapse; }
.hours th, .hours td {
  border: 1px solid color-mix(in srgb, var(--fg) 20%, transparent);
  padding: 0.25rem 0.6rem;
}

/* Help page (viewing.help_page): readable prose column. */
.help-page { max-width: 46rem; line-height: 1.5; }
.help-page h2 {
  margin-top: 1.8rem;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 20%, transparent);
  padding-bottom: 0.2rem;
}
.help-toc {
  background: color-mix(in srgb, var(--fg) 5%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--fg) 15%, transparent);
  border-radius: 4px;
  padding: 0.6rem 1rem;
  margin: 1rem 0 1.5rem;
}
.help-toc ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.help-states { margin: 0.5rem 0; }
.help-states dt { font-weight: bold; margin-top: 0.4rem; }
.help-states dd { margin: 0 0 0 1.2rem; }
.help-footer {
  margin-top: 2rem;
  font-style: italic;
  color: color-mix(in srgb, var(--fg) 70%, var(--bg));
}