/* SHARED FILE — do not edit this copy. The canonical version lives in the
   meta-repo at shared/styles.css and is copied byte-for-byte into apps/ca-ops
   and services/auth by shared/sync.sh; the stack gate fails on drift. To
   change it: edit shared/styles.css, run `./shared/sync.sh apply`, and commit
   each repo separately.

   Sleep Inn stack shell — the shared operator-page stylesheet (stack spec 15).
   The palette mirrors tc's "timeclock" DaisyUI theme (apps/tc/static/input.css),
   which is the canonical source of the brand colors. Keep the union of both
   apps' components here so the single sheet serves both. Stack rule (root
   CLAUDE.md): no CSS in HTML — templates carry classes only, all styling
   lives here. */

:root {
  --primary: #1e6b50;          /* actions, links, success — tc --color-primary */
  --primary-dark: #17553f;     /* hover shade of --primary */
  --primary-content: #ffffff;
  --secondary: #475569;        /* neutral/pending status — tc --color-secondary */
  --neutral: #0f172a;          /* header bar — tc --color-neutral */
  --neutral-content: #eef2f5;
  --base-100: #ffffff;         /* cards — tc --color-base-100 */
  --base-200: #eef2f5;         /* page background — tc --color-base-200 */
  --base-300: #cbd5e1;         /* input borders — tc --color-base-300 */
  --base-content: #0f172a;     /* body text — tc --color-base-content */
  --error: #9b2f2a;            /* tc --color-error */
  --warning: #955311;          /* tc --color-warning */
  --muted: #64748b;            /* secondary text (slate, matches tc secondary family) */
  --line: #e2e8f0;             /* card/table hairlines */
  --line-soft: #f1f5f9;        /* row separators */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
body { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
       background: var(--base-200); color: var(--base-content); line-height: 1.5 }

/* ── header bar ─────────────────────────────────────────────────────────── */
header { background: var(--neutral); color: var(--neutral-content);
         padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1rem }
header h1 { font-size: 1.1rem; font-weight: 600; letter-spacing: .02em }
header a { color: #94a3b8; text-decoration: none; font-size: .85rem }
header a:hover { color: var(--neutral-content) }
/* sign-out: a button that reads as a header link */
header .linklike { background: none; border: none; padding: 0; font: inherit;
                   cursor: pointer; color: #94a3b8; font-size: .85rem }
header .linklike:hover { color: var(--neutral-content) }
/* muted text sitting on the dark header needs the lighter slate */
header .muted { color: #94a3b8; font-size: .85rem }

main { max-width: 860px; margin: 2rem auto; padding: 0 1rem }
main a { color: var(--primary); text-decoration: none }
main a:hover { text-decoration: underline }

/* ── cards + tables ─────────────────────────────────────────────────────── */
.card { background: var(--base-100); border: 1px solid var(--line); border-radius: .5rem;
        margin-bottom: 1.25rem; overflow: hidden }
.card-header { padding: .75rem 1rem; display: flex; align-items: center;
               justify-content: space-between; border-bottom: 1px solid var(--line) }
.card-header h2 { font-size: 1rem; font-weight: 600 }

/* a too-wide table (e.g. the 9-column jobs list) scrolls sideways within its
   card on desktop instead of being clipped by the card's overflow:hidden; on
   narrow screens .stacked reflows to cards, so there's nothing to scroll */
.table-wrap { overflow-x: auto }
table { width: 100%; border-collapse: collapse }
th { text-align: left; font-size: .78rem; font-weight: 600; color: var(--muted);
     text-transform: uppercase; letter-spacing: .05em;
     padding: .5rem 1rem; border-bottom: 1px solid var(--line); background: var(--base-200) }
td { padding: .55rem 1rem; border-bottom: 1px solid var(--line-soft); font-size: .92rem }
td.room { font-weight: 600; width: 5rem; color: var(--primary) }
td.empty { color: #94a3b8; font-style: italic; text-align: center; padding: 1rem }
.table-sep { border-top: 1px solid var(--line) }
.index-row td:first-child { font-weight: 600; white-space: nowrap }
/* last-child scoped per row group: .stacked tables put one row group (tbody)
   per logical item, so the trailing hairline is dropped only on the final
   group. Neutral for single-tbody tables (the tbody is also :last-child). */
tbody:last-child tr:last-child td { border-bottom: none }

/* ── status badges (severity classes set by the app) ────────────────────── */
.badge { font-size: .72rem; font-weight: 700; letter-spacing: .06em;
         padding: .2rem .55rem; border-radius: 999px; text-transform: uppercase }
.badge-ok      { color: var(--primary);   background: color-mix(in srgb, var(--primary) 10%, white) }
.badge-warn    { color: var(--warning);   background: color-mix(in srgb, var(--warning) 12%, white) }
.badge-error   { color: var(--error);     background: color-mix(in srgb, var(--error) 8%, white) }
.badge-pending { color: var(--secondary); background: color-mix(in srgb, var(--secondary) 10%, white) }
.badge-muted   { color: var(--muted);     background: var(--line-soft) }

/* ── messages + banners ─────────────────────────────────────────────────── */
.ts { font-size: .82rem; color: var(--muted) }
.muted { color: var(--muted) }
.protected { color: var(--muted); font-style: italic }
.ok-msg { padding: 1.5rem 1rem; text-align: center; color: var(--primary); font-weight: 500 }
.error-msg { padding: 1rem; background: color-mix(in srgb, var(--error) 6%, white);
             color: var(--error); font-family: monospace; font-size: .82rem; white-space: pre-wrap }
.err { color: var(--error); background: color-mix(in srgb, var(--error) 6%, white);
       padding: .75rem 1rem; border-radius: .25rem; margin-bottom: 1rem }
.notice { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, white);
          padding: .75rem 1rem; border-radius: .25rem; margin-bottom: 1rem }

/* ── forms ──────────────────────────────────────────────────────────────── */
form { display: grid; gap: .75rem; margin: 0 }
form.card { max-width: 20rem; padding: 1rem }
label { display: grid; gap: .25rem; font-size: .9rem }
input, select, button { font: inherit; padding: .5rem; border: 1px solid var(--base-300);
                        border-radius: .25rem }
input:focus, select:focus { outline: none; border-color: var(--primary);
                            box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, white) }
button { cursor: pointer; background: var(--primary); color: var(--primary-content);
         border: none; font-weight: 600 }
button:hover { background: var(--primary-dark) }
.actions { display: flex; gap: .25rem; flex-wrap: wrap }
/* inline checkbox row (auth: the show-password toggle) */
.check-row { display: flex; align-items: center; gap: .5rem;
             font-size: .85rem; color: var(--muted) }
.check-row input { width: auto; padding: 0; margin: 0; accent-color: var(--primary) }

/* ── spacing utilities (replacing the old style="" attributes) ──────────── */
.push-right { margin-left: auto }
.pad { padding: 1rem }
.pad-lg { padding: 2rem }
.narrow { max-width: 20rem }
.mt-sm { margin-top: .5rem }
.pt-0 { padding-top: 0 }

/* ── narrow screens ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* plain tables (e.g. result pages) just tighten up */
  td, th { padding: .45rem .65rem }

  /* .stacked tables reflow to one card per row group (tbody): the column
     header is dropped and each cell shows its own label (data-label) beside
     the value, so a wide table (jobs = 9 cols) reads top-to-bottom with no
     horizontal scrolling. Templates carry the class + data-label only. */
  .stacked thead { display: none }
  .stacked tbody, .stacked tr, .stacked td { display: block }
  .stacked tbody { border: 1px solid var(--line); border-radius: .5rem;
                   margin: .75rem 1rem; padding: .25rem .75rem }
  .stacked td { display: flex; justify-content: space-between; align-items: baseline;
                gap: 1rem; padding: .35rem 0; border: none; text-align: right;
                word-break: break-word }
  .stacked td::before { content: attr(data-label); text-align: left; white-space: nowrap;
                        font-size: .72rem; font-weight: 600; letter-spacing: .05em;
                        text-transform: uppercase; color: var(--muted) }
  /* the jobs subject line spans full width under the fields — no label, and the
     empty spacer cell it pairs with on desktop is dropped */
  .stacked .subject-row td:first-child { display: none }
  .stacked .subject-row td { display: block; text-align: left; margin-top: .35rem;
                             padding-top: .5rem; border-top: 1px solid var(--line-soft) }
  .stacked .subject-row td::before { content: none }
}