/* ClockBot shared sheet — loads on every page of both portals, so it holds the
   tokens and only what a portal-less page (the manager login) or both portals
   use. A one-portal rule goes in that portal's sheet; check-css-shared.py
   holds it to that (root CLAUDE.md, "CSS — what clockbot.css holds"). */

/* Design tokens — the one palette, type stack and scale both portals draw
   from. The manager sheet builds the manager shell on them; the staff sheet
   (staff/css/staff.css) builds the staff app on the same values. */
:root {
  /* ink — near-black rail (slightly cool) */
  --cb-ink: #0e1116;
  --cb-hair: rgba(255, 255, 255, 0.07);
  --cb-rail-hover: rgba(255, 255, 255, 0.045);
  --cb-t-dim: rgba(255, 255, 255, 0.6);
  --cb-t-bright: #f4f6f8;
  --cb-label: rgba(255, 255, 255, 0.34);
  --cb-avatar-bg: #23262e;  /* the signed-in person's initials chip — rail and staff drawer */
  --cb-avatar-tx: #d8dbe2;

  /* one disciplined accent — indigo, distinct from the data semantics */
  --cb-accent-rgb: 93, 96, 231;  /* the accent as channels, for rgba() and Tabler's *-rgb variables */
  --cb-accent: rgb(var(--cb-accent-rgb));
  --cb-accent-soft: rgba(var(--cb-accent-rgb), 0.12);
  --cb-accent-hover: #4f52d8;  /* hover/active/pressed state of the accent */
  --cb-accent-ink-rgb: 74, 76, 208;
  --cb-accent-ink: rgb(var(--cb-accent-ink-rgb));  /* accent text or glyph on an accent-soft tint — badges, tiles, picks */
  --cb-accent-shadow: 0 2px 8px -2px rgba(var(--cb-accent-rgb), 0.5);  /* accent-button lift */
  --cb-mark: linear-gradient(160deg, color-mix(in srgb, var(--cb-accent) 85%, #fff), var(--cb-accent));  /* the logo tile */
  --cb-mark-shadow: 0 2px 6px -3px rgba(var(--cb-accent-rgb), 0.35);

  /* light canvas — neutral text scale */
  --cb-canvas: #fff;
  --cb-hover: #f5f7fb;  /* subtle cool grey fill — control hover states + quiet input fills */
  --cb-bleed: var(--tblr-page-padding, 1rem);  /* container side gutter — full-bleed row hovers eat and repay it */
  --cb-text-rgb: 28, 33, 40;
  --cb-text: rgb(var(--cb-text-rgb));   /* primary — body, names, values */
  --cb-strong: #242a31; /* strong control label — week nav, date pills */
  --cb-ink-2: #3a424c;  /* secondary — labels, headings, chrome */
  --cb-mid-rgb: 106, 115, 131;
  --cb-mid: rgb(var(--cb-mid-rgb));    /* mid — icons beside text, timestamps; quiet but clearly on */
  --cb-dim: #8a92a0;    /* muted — idle controls, hints, empty values */
  --cb-faint: #c4cad2;  /* faint — placeholders, empty marks */
  --cb-frame: #e6e8ec;
  --cb-line: #eff0f3;
  --cb-wash: #fafbfc;   /* faintest fill — a weekend column, a row lit on hover */
  /* Gap between a detail page's title row and the hairline that closes it
     off. The tab bar draws that rule; the Actions panel has to clear it. */
  --cb-title-rule-gap: 14px;
  --cb-tab-track: #edeff5;  /* segmented tab-rail track — faint indigo-cool grey */

  /* feed content tones — alias the neutral scale */
  --cb-evt-ic: var(--cb-mid);
  --cb-evt-tx: var(--cb-ink-2);
  --cb-site: var(--cb-ink-2);

  /* semantic red — failures only. One value; every lighter step below is
     mixed from it, never picked beside it, so the family moves together. */
  --cb-fail: #cb4a5e;
  /* The white "!" an issue's red mark carries (the board's chip corner, the
     Staff Calendar's mismatched bar). */
  --cb-excl: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="5" stroke-linecap="round"><path d="M12 4v10"/><path d="M12 20h.01"/></svg>') center/8px no-repeat;
  --cb-fail-tint: color-mix(in srgb, var(--cb-fail) 5%, transparent);
  --cb-fail-bg: color-mix(in srgb, var(--cb-fail) 11%, #fff);

  /* semantic amber — attention, short of a failure. Built like the red: one
     root, every step mixed from it. The root is an orange, not a yellow: a
     yellow dark enough for small text on white goes olive and its tint goes
     tan, while orange darkens and still reads orange. 4.6:1 on white, to sit
     beside the red's 4.5. */
  --cb-warn: #bb5a10;
  --cb-warn-bg: color-mix(in srgb, var(--cb-warn) 11%, #fff);
  /* The ink for text standing on --cb-warn-bg, where the root alone is too
     light to carry a small figure. */
  --cb-warn-deep: color-mix(in srgb, var(--cb-warn) 92%, #000);

  /* semantic green — approved / resolved / all clear. Its ground is mixed
     off the same ladder as the red, so the two families stay in step. The
     root is derived, not picked: the red's OKLCH lightness, as much chroma as
     sRGB holds there, and a cool hue (~160°) a third of the wheel from the
     accent — so it sits with the indigo and the rose-leaning red. */
  --cb-ok: #258c5f;
  --cb-ok-bg: color-mix(in srgb, var(--cb-ok) 11%, #fff);

  /* entity tints — avatars and lead pills, one per person or place, none red */
  --cb-tint-sky-bg: #e3eff8;
  --cb-tint-sky-tx: #3e77a6;
  /* clay, not amber: an identity tint must never alias a semantic signal. */
  --cb-tint-clay-bg: #f7e8e2;
  --cb-tint-clay-tx: #a15b40;
  --cb-tint-green-bg: #e6f0e4;
  --cb-tint-green-tx: #5c8a4e;
  --cb-tint-rose-bg: #f6e6ee;
  --cb-tint-rose-tx: #b25585;
  --cb-tint-teal-bg: #dcefee;
  --cb-tint-teal-tx: #3f8b86;

  /* travel time — the timesheets board's one category hue */
  --cb-travel: #22867c;

  /* type scale — every font-size is one of these (check-css-scale.py) */
  --cb-fs-3xs: 10px;
  --cb-fs-2xs: 11px;
  --cb-fs-xs: 12px;
  --cb-fs-sm: 13px;
  --cb-fs-md: 14px;
  --cb-fs-lg: 15px;
  --cb-fs-xl: 16px;
  --cb-fs-h3: 20px;
  --cb-fs-h2: 24px;
  --cb-fs-h1: 28px;
  --cb-fs-display: 40px;

  /* radius scale — every border-radius is one of these, 0, or round
     (50% / 999px) */
  --cb-r-2xs: 2px;
  --cb-r-xs: 4px;
  --cb-r-sm: 6px;
  --cb-r-md: 8px;
  --cb-r-lg: 10px;
  --cb-r-xl: 12px;
  --cb-r-2xl: 16px;
  --cb-r-3xl: 20px;

  /* eyebrow — the one uppercase micro-label (see .cb-eyebrow) */
  --cb-eyebrow-size: var(--cb-fs-2xs);
  --cb-eyebrow-size-xs: var(--cb-fs-3xs);
  --cb-eyebrow-weight: 650;
  --cb-eyebrow-track: 0.07em;

  /* forms & modals — inputs, labels, hairlines */
  --cb-label-tx: var(--cb-ink-2);
  --cb-input-bd: #dcdfe4;
  --cb-input-bd-focus: color-mix(in srgb, var(--cb-accent) 45%, #fff);
  --cb-input-tx: var(--cb-text);
  --cb-input-ph: var(--cb-faint);
  --cb-focus-ring: 0 0 0 3px rgba(var(--cb-accent-rgb), 0.15);

  /* elevation — floating cards (popovers, menus, dropdowns) */
  --cb-shade-rgb: 16, 22, 40;  /* every shadow and dimming backdrop, as rgba(var(--cb-shade-rgb), a) */
  --cb-shadow-pop: 0 12px 32px -8px rgba(var(--cb-shade-rgb), 0.24);
  --cb-shadow-float: 0 18px 44px -18px rgba(var(--cb-shade-rgb), 0.34), 0 2px 6px rgba(var(--cb-shade-rgb), 0.05);

  --cb-rail-w: 248px;
  --cb-topbar-h: 56px;  /* both portals' phone top bar, and the head of the drawer it opens */
  --cb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
}

:root {
  --tblr-primary-rgb: 31, 41, 55;
  --tblr-primary: rgb(var(--tblr-primary-rgb));
  --cb-header-bg: #4c5666;
  --cb-calendar-sticky-width: 160px;
  /* Soft selection blue: the same palette blue as --tblr-blue-lt (the blue at
     10%) but less opaque. Used for selected/hovered rows and tabs. */
  --cb-blue-soft: rgba(var(--tblr-blue-rgb), 0.06);
}

/* Login shell — every page on base_centered.html, both portals. The ink of
   the signed-in shells (the manager rail, the staff top bar) carries the mark;
   the page sits on a canvas sheet. Stacked on a phone, side by side from 900px,
   where the ink panel stands where the rail will be. */
.login-body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--cb-canvas);
  font-family: var(--cb-font);
}
/* iOS Safari tints the status bar from a fixed element at the top of the page
   (a real one, at least ~12px tall: a pseudo-element or a hairline is ignored)
   and the toolbar from the page itself: ink above, canvas below. Only the
   stacked layout has ink at the top. */
.login-tint {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1030;
  height: 12px;
  background: var(--cb-ink);
}

.login-layout {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--cb-ink);
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) 24px 24px;
  color: var(--cb-t-bright);
  text-align: center;
}

/* The rail's gradient tile, at login size. */
.login-mark {
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  border-radius: var(--cb-r-xl);
  display: grid;
  place-items: center;
  background: var(--cb-mark);
  color: #fff;
  box-shadow: var(--cb-mark-shadow);
}
.login-mark svg {
  width: 24px;
  height: 24px;
}

.login-word {
  font-size: var(--cb-fs-h3);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.login-portal {
  font-size: var(--cb-fs-sm);
  color: var(--cb-t-dim);
}
.login-portal:empty {
  display: none;
}

.login-sheet {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px 24px calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--cb-canvas);
  color: var(--cb-text);
}

.login-content {
  flex: 1;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.login-title {
  margin: 0 0 8px;
  font-size: var(--cb-fs-h2);
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--cb-text);
}

.login-actions {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding-top: 24px;
  text-align: center;
}

.login-actions .btn {
  display: block;
  width: 100%;
}

@media (min-width: 992px) {
  .login-tint {
    display: none;
  }
  .login-layout {
    flex-direction: row;
  }
  .login-brand {
    flex: 0 0 min(42%, 520px);
    justify-content: center;
    padding: 48px;
  }
  .login-mark {
    width: 72px;
    height: 72px;
    margin-bottom: 18px;
    border-radius: var(--cb-r-3xl);
  }
  .login-mark svg {
    width: 38px;
    height: 38px;
  }
  .login-word {
    font-size: var(--cb-fs-h1);
  }
  .login-portal {
    font-size: var(--cb-fs-md);
  }
  .login-sheet {
    justify-content: center;
    padding: 48px;
  }
  .login-content {
    flex: 0 0 auto;
    max-width: 380px;
  }
  .login-actions {
    max-width: 380px;
  }
}

/* A login page with no portal sheet (the manager's, the CSRF page) gets the
   brand on Tabler's components here; staff.css does the same for staff. */
.login-body:not(.staff-portal) {
  --tblr-primary: var(--cb-accent);
  --tblr-primary-rgb: var(--cb-accent-rgb);
  --tblr-link-color: var(--cb-accent-ink);
  --tblr-link-color-rgb: var(--cb-accent-ink-rgb);
  --tblr-link-hover-color: var(--cb-accent-ink);
  --tblr-link-hover-color-rgb: var(--cb-accent-ink-rgb);
  --tblr-body-font-family: var(--cb-font);
}
.login-body:not(.staff-portal) .btn-primary {
  --tblr-btn-color: #fff;
  --tblr-btn-bg: var(--cb-accent);
  --tblr-btn-border-color: var(--cb-accent);
  --tblr-btn-hover-color: #fff;
  --tblr-btn-hover-bg: var(--cb-accent-hover);
  --tblr-btn-hover-border-color: var(--cb-accent-hover);
  --tblr-btn-active-color: #fff;
  --tblr-btn-active-bg: var(--cb-accent-hover);
  --tblr-btn-active-border-color: var(--cb-accent-hover);
  --tblr-btn-disabled-color: #fff;
  --tblr-btn-disabled-bg: var(--cb-accent);
  --tblr-btn-disabled-border-color: var(--cb-accent);
  --tblr-btn-box-shadow: var(--cb-accent-shadow);
  border-radius: var(--cb-r-lg);
  font-weight: 600;
}
.login-body:not(.staff-portal) .form-label {
  color: var(--cb-label-tx);
  font-weight: 600;
}
.login-body:not(.staff-portal) .form-control {
  border-color: var(--cb-input-bd);
  border-radius: var(--cb-r-lg);
  color: var(--cb-input-tx);
}
.login-body:not(.staff-portal) .form-control::placeholder {
  color: var(--cb-input-ph);
}
.login-body:not(.staff-portal) .form-control:focus {
  border-color: var(--cb-input-bd-focus);
  box-shadow: var(--cb-focus-ring);
}

/* Toast strip — bottom-right of the viewport, clear of the header controls.
   Click-through except on the toast itself. */
#notify-toast-wrap {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  justify-content: flex-end;
  padding: 1rem;
  z-index: 1090;
  pointer-events: none;
}
#notify-toast-wrap .toast {
  pointer-events: auto;
}
/* Success toast — solid accent fill, white text. */
#notify-toast {
  background-color: var(--cb-accent);
  color: #fff;
}
#notify-toast .btn-close {
  filter: brightness(0) invert(1);
}
/* The action button (e.g. Undo) sits on the accent fill: a translucent
   white chip, not a blue btn-link. */
#notify-toast-action {
  border: 0;
  border-radius: var(--cb-r-md);
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: var(--cb-fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
#notify-toast-action:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* Unified modal header: dark CB bar with white title + close. Applies to every
   .modal-header in the app — notify, confirm, schedule, calendar, etc.
   Tabler's .btn-close uses currentColor for its mask, so the cross inherits
   the white text color automatically — no filter needed. */
.modal-header {
  background: var(--cb-header-bg);
  color: #fff;
}

/* Bump stroke on the alert/error icons in notify/confirm modal headers
   so they read at the same visual weight as denser icons like edit. */
.icon-bold {
  stroke-width: 2.5;
}

/* Hide any modal stacked beneath notify/confirm so the dialog reads alone.
   Backdrops remain. Driven by a body class toggled in notify.js, never
   body:has(.show) — see CLAUDE.md ("CSS performance"). */
body.notify-open .modal.show:not(#notify-modal),
body.confirm-open .modal.show:not(#confirm-modal) {
  visibility: hidden;
}