/* Service Time Control — Veritas corporate identity.
   Per the Veritas CI manual: Deep Navy #15233B, Veritas Gold #C4A55A,
   Charcoal body text, Ivory document grounds, Warm Grey secondary text.
   Cambria for titles/headings, Calibri for body. Restrained and professional. */

:root {
  /* Brand — CI section 04 */
  --royal: #15233B;        /* Deep Navy — primary background, headers, table headers */
  --royal-dark: #0D1724;   /* Navy Dark — full-bleed dark grounds */
  --gold: #C4A55A;         /* Veritas Gold — rules, icons, labels, borders (standard) */
  --gold-dark: #9c7f3a;    /* darker gold for hovers / accents that need contrast */
  --gold-ink: #6f5a24;     /* readable gold-toned text on light */
  --gold-light: #D8B671;   /* shimmer highlights in gradients only */
  --gold-pale: #E8D5A0;    /* very subtle background tints only */
  --ivory: #FAF8F3;        /* formal document backgrounds */
  /* Text — CI section 04/05 */
  --ink: #1C2336;          /* Charcoal — primary body text on light */
  --muted: #6B6B6B;        /* Warm Grey — captions, footnotes, secondary text */
  /* Neutrals */
  --line: #e3ded2;         /* warm hairline */
  --bg: #F2F0E9;           /* warm paper — app background */
  --surface: #ffffff;
  /* Type */
  --font-body: "Calibri", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-head: "Cambria", "Georgia", "Times New Roman", serif;
  /* Status */
  --ok-bg: #e7f4ec; --ok-ink: #1c6b3c;
  --info-bg: #e7ecf3; --info-ink: #223a5e;
  --warn-bg: #fbf1de; --warn-ink: #8a5a12;
  --err-bg: #fbeaea; --err-ink: #9c2a2a;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(21,35,59,.08), 0 1px 2px rgba(21,35,59,.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.5;
}

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

/* Gold ALL-CAPS section label — CI section 05 tracking rule (expanded ~3pt). */
.ci-label {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--gold-ink);
  font-weight: 600;
  font-size: 11px;
}

/* ---- Top bar ---- */
.topbar {
  background: var(--royal);
  border-bottom: 3px solid var(--gold);
  color: #fff;
}
.topbar-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 8px 20px;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; flex: none; }
/* Gold Ionic-column mark reads directly on the Deep Navy bar — no plate needed. */
.brand-logo { display: block; height: 42px; width: auto; }
.brand-mark {
  font-family: var(--font-head);
  font-weight: 700; letter-spacing: .01em;
  color: var(--gold); font-size: 19px; white-space: nowrap;
}
.brand-name {
  font-family: var(--font-head); font-size: 15px; color: #EDEBE4; white-space: nowrap;
  padding-left: 12px; border-left: 1px solid rgba(196,165,90,.5);
}
.topbar-right { display: flex; align-items: center; gap: 12px; font-size: 14px; margin-left: auto; flex: none; }
.user-name { color: #eef0f7; white-space: nowrap; }
.role-badge {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  padding: 2px 9px; border-radius: 999px; font-size: 12px; letter-spacing: .02em;
}
.logout-form { margin: 0; }

/* ---- Global work bar ---- */
.workbar { background: #EEEAE0; border-bottom: 1px solid var(--line); }
.workbar-inner { max-width: 1600px; margin: 0 auto; padding: 8px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wb-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wb-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.wb-dot.wb-run { background: #1c9c53; box-shadow: 0 0 0 3px rgba(28,156,83,.18); }
.wb-dot.wb-pause { background: var(--gold-dark); }
.wb-clock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 16px; color: var(--royal); }
.wb-meta { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-idle { font-style: italic; }
.wb-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--warn-bg); color: var(--gold-dark); font-size: 11px; font-weight: 600; }
.wb-badge.wb-warn { background: var(--err-bg); color: var(--err-ink); }
.wb-actions { display: flex; gap: 8px; align-items: center; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.note-cell { max-width: 320px; }
.wb-badge.wb-run-badge { background: rgba(28,156,83,.15); color: #1c7a44; margin-left: 0; }

/* ---- Timer popup panel (always available from the work bar) ---- */
.wb-pop { position: relative; }
.wb-pop > summary { list-style: none; cursor: pointer; }
.wb-pop > summary::-webkit-details-marker { display: none; }
.wb-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  width: 360px; max-width: 90vw;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(20,24,54,.18);
  padding: 12px;
}
.wb-panel-head { font-weight: 700; color: var(--royal); font-size: 13px; margin-bottom: 8px; }
.wb-timer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px;
}
.wb-timer-run { border: 1px solid rgba(28,156,83,.4); background: rgba(28,156,83,.05); border-radius: 8px; padding: 12px; margin-bottom: 10px; text-align: center; }
.wb-bigclock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 34px; letter-spacing: .02em; color: var(--royal); line-height: 1.1; }
.wb-run-meta { color: var(--muted); font-size: 13px; margin: 4px 0 10px; }
.wb-run-form textarea { width: 100%; resize: vertical; margin-bottom: 8px; }
.wb-run-buttons { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.wb-start-block { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-bottom: 10px; }
.wb-timer-info { min-width: 0; }
.wb-timer-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-timer-controls { display: flex; gap: 6px; flex: none; }
.wb-none { margin: 4px 0 10px; }
.wb-panel-actions { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }

/* ---- Stop & save: assign / create toggle ---- */
.assign-block { border: 1px solid var(--line); border-radius: 8px; padding: 14px; margin: 6px 0 4px; }
.assign-block legend { font-weight: 700; color: var(--royal); padding: 0 6px; font-size: 14px; }
.assign-modes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.assign-radio { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.assign-radio input { width: auto; }
.assign-panel { border-top: 1px dashed var(--line); padding-top: 10px; }

/* ---- Layout ---- */
.content { max-width: 1600px; margin: 0 auto; padding: 28px 32px 56px; position: relative; z-index: 1; }

/* Column-capital watermark — CI logo rule: column used alone at <=8% opacity.
   Fixed to the lower-right, full gold over the ivory ground (no recolouring),
   behind all content and non-interactive. Hidden on the navy sign-in screens. */
.app-watermark {
  position: fixed; right: -70px; bottom: -50px; z-index: 0;
  width: 480px; max-width: 44vw; height: auto;
  opacity: .06; pointer-events: none; user-select: none;
}
@media print { .app-watermark { display: none !important; } }

/* Centered layout for sign-in / MFA screens */
body.auth {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #15233B 0%, #0D1724 100%);
  padding: 24px;
}
body.auth .content { padding: 0; width: 100%; }

/* ---- Cards ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}
.auth-card {
  max-width: 400px; margin: 0 auto; padding: 30px 30px 26px;
}
.auth-card .auth-head { text-align: center; margin-bottom: 22px; }
/* Logo on a Deep Navy chip so the gold mark reads on the light sign-in card. */
.auth-logo-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--royal); padding: 14px 24px; border-radius: 8px; margin-bottom: 16px;
}
.auth-logo { display: block; height: 38px; width: auto; }
.auth-card h1 { font-size: 20px; margin: 0 0 4px; color: var(--royal); }
.auth-lead { color: var(--muted); font-size: 14px; margin: 0 0 18px; }

/* ---- Headings — Cambria per CI section 05 type hierarchy ---- */
h1, h2, h3 { font-family: var(--font-head); }
h1 { font-size: 23px; margin: 0 0 4px; color: var(--royal); font-weight: 700; }
.page-head { margin-bottom: 22px; }
.page-head p { color: var(--muted); margin: 2px 0 0; font-family: var(--font-body); }
h2 { font-size: 17px; margin: 0 0 12px; color: var(--royal); font-weight: 600; }

/* ---- Forms ---- */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.field input[type=text], .field input[type=password], .field input[type=email],
.field input[type=number], .field input[type=date], .field input, .field select, .field textarea {
  width: 100%; padding: 9px 11px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink);
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--royal); outline-offset: 0; border-color: var(--royal);
}
.field-check label { display: flex; align-items: center; gap: 9px; font-weight: 500; }
.field-check input { width: auto; }
.req { color: var(--gold-dark); }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 22px; }
.max-form { max-width: 620px; }
.field .help { color: var(--muted); font-size: 12px; margin-top: 5px; }
.field-error { color: var(--err-ink); font-size: 13px; margin-top: 5px; }
.form-errors {
  background: var(--err-bg); color: var(--err-ink);
  border: 1px solid #f0cccc; border-radius: 6px; padding: 10px 12px; margin-bottom: 16px; font-size: 14px;
}
.callout {
  background: var(--panel, #f6f2e7); border-left: 3px solid var(--gold);
  border-radius: 6px; padding: 10px 12px; margin: 12px 0; font-size: 14px;
}
/* Approval / printable document. */
.doc { max-width: 820px; margin: 0 auto; }
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--royal); padding-bottom: 12px; margin-bottom: 18px; gap: 16px; }
.doc-brand { font-weight: 700; color: var(--royal); font-size: 22px; letter-spacing: .01em; }
.doc-brand .doc-sub { display: block; font-weight: 400; font-size: 12px; color: var(--muted); letter-spacing: normal; }
.doc-title { text-align: right; font-size: 12px; color: var(--muted); line-height: 1.6; }
.doc-title strong { color: var(--ink); font-size: 15px; }
.doc-intro { font-size: 13px; color: #444; background: #f6f7fb; border-left: 3px solid var(--royal); padding: 10px 14px; border-radius: 6px; margin: 0 0 18px; }
.doc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px; margin-bottom: 22px; }
.doc-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.doc-value { font-size: 14px; margin-top: 2px; }
.doc-h { font-size: 15px; color: var(--royal); border-bottom: 1px solid var(--line); padding-bottom: 6px; margin: 24px 0 10px; }
.doc-table th .th-sub { font-weight: 400; font-size: 10px; color: var(--muted); }
.doc-summary { max-width: 460px; margin-left: auto; }
.doc-summary td { padding: 6px 10px; }
.doc-summary .total-row td { border-top: 2px solid var(--royal); font-size: 15px; }
.doc-credits { margin: 4px 0 0; padding-left: 18px; }
.doc-notes { white-space: pre-wrap; font-size: 13.5px; line-height: 1.6; background: #fafbfe; border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; }
.sign-block { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 18px; font-size: 14px; }
.sign-row { display: flex; gap: 30px; margin-top: 36px; flex-wrap: wrap; }
.sign-row > div { flex: 1 1 180px; }
.sign-line { display: block; border-bottom: 1px solid #333; height: 0; }
.sign-cap { font-size: 11px; color: var(--muted); margin-top: 5px; }
.doc-note { max-width: 460px; margin: 8px 0 0 auto; font-style: italic; line-height: 1.5; }
.doc-foot { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 10px; }
@media print {
  .topbar, .workbar, .toolbar, .form-actions, .no-print { display: none !important; }
  body { background: #fff; }
  .content { max-width: none; padding: 0; }
  .card, .doc { border: none; box-shadow: none; padding: 0; margin: 0; max-width: none; }
  .doc-intro, .doc-notes { background: #fff; }
  a { color: #000; text-decoration: none; }
  table.data th { background: #eef; }
}
.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; vertical-align: middle; }
.badge-warn { background: var(--warn-bg); color: var(--warn-ink); }
.settle-choices { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.settle-option { flex: 1 1 260px; background: #fff; border: 1px solid #e3e6ef; border-radius: 8px; padding: 14px; }
.token-input input {
  letter-spacing: .5em; text-align: center; font-size: 22px; font-variant-numeric: tabular-nums;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 600; font-size: 14px;
  padding: 9px 16px; border-radius: 6px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
}
.btn-primary { background: var(--royal); color: #fff; }
.btn-primary:hover { background: var(--royal-dark); }
.btn-block { width: 100%; }
.btn-quiet {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.4);
}
.btn-quiet:hover { background: rgba(255,255,255,.12); }
.btn-ghost { background: #fff; color: var(--royal); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--royal); }

/* ---- Messages ---- */
.messages { margin-bottom: 20px; display: grid; gap: 8px; }
.message { padding: 10px 14px; border-radius: 6px; font-size: 14px; border: 1px solid transparent; }
.message-success { background: var(--ok-bg); color: var(--ok-ink); border-color: #bfe3cd; }
.message-info { background: var(--info-bg); color: var(--info-ink); border-color: #c6d3f4; }
.message-warning { background: var(--warn-bg); color: var(--warn-ink); border-color: #f1d9b0; }
.message-error { background: var(--err-bg); color: var(--err-ink); border-color: #f0cccc; }

/* ---- Info / definition grid ---- */
.info-grid { display: grid; grid-template-columns: 180px 1fr; gap: 10px 18px; margin: 0; }
.info-grid dt { color: var(--muted); font-size: 13px; }
.info-grid dd { margin: 0; font-weight: 600; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill-ok { background: var(--ok-bg); color: var(--ok-ink); }
.pill-warn { background: var(--warn-bg); color: var(--warn-ink); }

.card + .card { margin-top: 20px; }
.stack > * + * { margin-top: 20px; }
.muted { color: var(--muted); }

/* ---- MFA setup ---- */
.qr-wrap { text-align: center; margin: 8px 0 16px; }
.qr-wrap img { width: 190px; height: 190px; border: 1px solid var(--line); border-radius: 6px; padding: 6px; background: #fff; }
.secret {
  font-family: "Cascadia Code", Consolas, monospace; font-size: 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; word-break: break-all; text-align: center;
}
.steps { padding-left: 18px; color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.steps li { margin-bottom: 6px; }

/* ---- Tables (audit history) ---- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
table.data tbody tr:hover { background: #fafbfd; }
.ts { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- Pagination ---- */
.pager { display: flex; gap: 10px; align-items: center; margin-top: 18px; font-size: 14px; }

/* ---- Admin hub cards ---- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.hub-card {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px;
}
.hub-card:hover { border-color: var(--royal); }
.hub-card .hub-title { font-weight: 600; font-size: 16px; color: var(--royal); }
.hub-card .hub-count { color: var(--muted); font-size: 13px; margin-top: 6px; }

/* ---- Toolbar / filters ---- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.filters { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.filters a { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--muted); }
.filters a.on { background: var(--royal); color: #fff; border-color: var(--royal); }
.inline-form { display: inline; margin: 0; }
.linkbtn { background: none; border: none; padding: 0; color: var(--royal); cursor: pointer; font: inherit; text-decoration: underline; }
.status-active { color: var(--ok-ink); font-weight: 600; }
.status-inactive { color: var(--muted); font-weight: 600; }
.row-actions { white-space: nowrap; display: flex; gap: 12px; }
.nav-links { display: flex; gap: 16px; align-items: center; flex: none; }
.nav-links a { color: #EDEBE4; text-decoration: none; font-size: 14px; white-space: nowrap; }
.nav-links a:hover { color: #fff; text-decoration: underline; }
.total-row td { font-weight: 700; border-top: 2px solid var(--line); }

/* ---- Pills / status ---- */
.pill-ok { background: var(--ok-bg); color: var(--ok-ink); }
.pill-warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill-muted { background: #eceef3; color: var(--muted); }
.pill-plain { background: #eceef3; color: var(--muted); }
.pill-gold { background: var(--warn-bg); color: var(--gold-dark); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.head-status { display: flex; gap: 8px; }
.small { font-size: 12px; }
.notes { white-space: pre-line; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; margin-top: 8px; }
.row-muted td { color: var(--muted); }
.btn-quiet-dark { background: transparent; color: var(--muted); border-color: var(--line); }
.btn-quiet-dark:hover { border-color: var(--royal); color: var(--royal); }

/* ---- Filter card ---- */
.filter-card { margin-bottom: 20px; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 16px; }
.filter-grid .field { margin-bottom: 0; }
.filter-grid label { font-size: 12px; }
.search-row { display: flex; gap: 10px; align-items: center; }
.search-row input[type=search] {
  flex: 1 1 auto; min-width: 0; width: 100%; padding: 11px 16px; font-size: 15px;
  color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.search-row .btn { flex: 0 0 auto; }
.more-filters { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.more-filters summary { cursor: pointer; color: var(--royal); font-weight: 600; font-size: 14px; list-style: revert; }
.more-filters[open] summary { margin-bottom: 12px; }

/* ---- Calendar ---- */
.cal-title { font-weight: 600; padding: 0 6px; }
table.calendar { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.calendar th { padding: 6px; font-size: 12px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
table.calendar td { border: 1px solid var(--line); vertical-align: top; height: 92px; padding: 4px; }
.cal-out { background: #fafbfd; }
.cal-today { outline: 2px solid var(--gold); outline-offset: -2px; }
.cal-day { display: flex; align-items: center; justify-content: space-between; }
.cal-num { font-size: 12px; color: var(--muted); font-weight: 600; }
.cal-add { text-decoration: none; color: var(--royal); font-weight: 700; padding: 0 5px; border-radius: 4px; }
.cal-add:hover { background: var(--bg); }
.cal-event { display: block; font-size: 12px; padding: 2px 5px; border-radius: 4px; margin-top: 3px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-open { background: var(--info-bg); color: var(--info-ink); }
.ev-closed { background: #eceef3; color: var(--muted); }
.legend { font-size: 14px; }
.legend.ev-open { color: var(--royal); background: none; }
.legend.ev-closed { color: var(--muted); background: none; }
.legend-row { margin-top: 12px; }
.block { display: block; }

/* View switcher */
.viewswitch { display: flex; gap: 4px; }
.viewswitch a { padding: 6px 12px; border: 1px solid var(--line); text-decoration: none; color: var(--muted); font-size: 14px; }
.viewswitch a:first-child { border-radius: 6px 0 0 6px; }
.viewswitch a:last-child { border-radius: 0 6px 6px 0; }
.viewswitch a + a { border-left: none; }
.viewswitch a.on { background: var(--royal); color: #fff; border-color: var(--royal); }

/* Outlook-style week / work-week time grid */
.tg-scroll { overflow-x: auto; }
.timegrid { display: grid; min-width: 620px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.timegrid.cols-7 { grid-template-columns: 54px repeat(7, minmax(90px, 1fr)); }
.timegrid.cols-5 { grid-template-columns: 54px repeat(5, minmax(110px, 1fr)); }
.tg-corner { background: #fafbfd; border-bottom: 1px solid var(--line); }
.tg-dayhead { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 7px 8px; font-size: 13px; font-weight: 600; background: #fafbfd; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.tg-dayhead.cal-today { color: var(--royal); box-shadow: inset 0 -3px 0 var(--gold); }
.tg-allday-label { font-size: 10px; color: var(--muted); text-transform: uppercase; padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: right; }
.tg-allday-col { border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); padding: 3px; display: flex; flex-direction: column; gap: 3px; min-height: 24px; }
.tg-gutter { display: grid; grid-template-rows: repeat(12, 52px); }
.tg-hour { font-size: 11px; color: var(--muted); text-align: right; padding: 2px 6px 0 0; border-top: 1px solid var(--line); }
.tg-daycol {
  display: grid; grid-template-rows: repeat(24, 26px); border-left: 1px solid var(--line); position: relative;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 51px, var(--line) 51px, var(--line) 52px);
}
.tg-ev {
  grid-column: 1; margin: 1px 2px; padding: 2px 5px; border-radius: 4px; overflow: hidden;
  text-decoration: none; font-size: 11px; line-height: 1.25; display: block; z-index: 1;
}
.tg-ev-time { font-weight: 700; margin-right: 4px; }
.tg-ev-name { }
.tg-ev.ev-open { background: var(--info-bg); color: var(--info-ink); border-left: 3px solid var(--royal); }
.tg-ev.ev-closed { background: #eceef3; color: var(--muted); border-left: 3px solid #b8bdc9; }

/* Global search */
.search { position: relative; }
.search input {
  width: 190px; max-width: 40vw; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12); color: #fff; font-size: 13px;
}
.search input::placeholder { color: #cdd2e8; }
.search input:focus { outline: 2px solid var(--gold); background: rgba(255,255,255,.2); }
.search-pop {
  position: absolute; top: 42px; right: 0; width: 340px; max-height: 60vh; overflow-y: auto;
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(28,34,48,.18); z-index: 50;
}
.search-pop:empty { display: none; }
.search-group-title { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 12px 2px; }
.search-item { display: block; padding: 8px 12px; text-decoration: none; color: var(--ink); border-top: 1px solid var(--line); }
.search-item:hover { background: #f4f6fb; }
.search-item .si-sub { color: var(--muted); font-size: 12px; }
.search-empty { padding: 12px; color: var(--muted); font-size: 14px; }
.result-list { list-style: none; padding: 0; margin: 0 0 10px; }
.result-list li { padding: 7px 0; border-bottom: 1px solid var(--line); }

/* ---- Utilities ---- */
.text-center { text-align: center; }
.secret-label { text-align: center; margin: 0 0 6px; font-size: 13px; }
.form-gap { margin-top: 18px; }

/* ---- Error pages ---- */
.error-page { max-width: 520px; margin: 80px auto; text-align: center; }
.error-code { font-size: 46px; font-weight: 700; color: var(--royal); }

/* Time-grid row placement (generated: rs = row start, rsp = row span) */
.rs-1 { grid-row-start: 1; }
.rs-2 { grid-row-start: 2; }
.rs-3 { grid-row-start: 3; }
.rs-4 { grid-row-start: 4; }
.rs-5 { grid-row-start: 5; }
.rs-6 { grid-row-start: 6; }
.rs-7 { grid-row-start: 7; }
.rs-8 { grid-row-start: 8; }
.rs-9 { grid-row-start: 9; }
.rs-10 { grid-row-start: 10; }
.rs-11 { grid-row-start: 11; }
.rs-12 { grid-row-start: 12; }
.rs-13 { grid-row-start: 13; }
.rs-14 { grid-row-start: 14; }
.rs-15 { grid-row-start: 15; }
.rs-16 { grid-row-start: 16; }
.rs-17 { grid-row-start: 17; }
.rs-18 { grid-row-start: 18; }
.rs-19 { grid-row-start: 19; }
.rs-20 { grid-row-start: 20; }
.rs-21 { grid-row-start: 21; }
.rs-22 { grid-row-start: 22; }
.rs-23 { grid-row-start: 23; }
.rs-24 { grid-row-start: 24; }
.rsp-1 { grid-row-end: span 1; }
.rsp-2 { grid-row-end: span 2; }
.rsp-3 { grid-row-end: span 3; }
.rsp-4 { grid-row-end: span 4; }
.rsp-5 { grid-row-end: span 5; }
.rsp-6 { grid-row-end: span 6; }
.rsp-7 { grid-row-end: span 7; }
.rsp-8 { grid-row-end: span 8; }
.rsp-9 { grid-row-end: span 9; }
.rsp-10 { grid-row-end: span 10; }
.rsp-11 { grid-row-end: span 11; }
.rsp-12 { grid-row-end: span 12; }
.rsp-13 { grid-row-end: span 13; }
.rsp-14 { grid-row-end: span 14; }
.rsp-15 { grid-row-end: span 15; }
.rsp-16 { grid-row-end: span 16; }
.rsp-17 { grid-row-end: span 17; }
.rsp-18 { grid-row-end: span 18; }
.rsp-19 { grid-row-end: span 19; }
.rsp-20 { grid-row-end: span 20; }
.rsp-21 { grid-row-end: span 21; }
.rsp-22 { grid-row-end: span 22; }
.rsp-23 { grid-row-end: span 23; }
.rsp-24 { grid-row-end: span 24; }

/* Numeric table cells: right-aligned with tabular figures for clean columns. */
table.data th.num, table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Billing: the live reference-amount readout and the adjustment-required note. */
.big-amount { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink, #1b1b1b); margin: 2px 0; }
.field-note { color: #9a6b00; background: rgba(211,171,96,.15); border: 1px solid rgba(211,171,96,.5); border-radius: 6px; padding: 6px 9px; font-size: 12px; margin-top: 6px; }

/* Date/time inputs with a native-picker trigger button. */
.input-with-picker { position: relative; display: block; }
.input-with-picker > input[type="text"] { padding-right: 38px; }
.picker-btn { position: absolute; right: 4px; top: 4px; background: none; border: none;
  cursor: pointer; font-size: 16px; line-height: 1; padding: 4px 6px; }
.native-picker { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
  right: 8px; bottom: 0; }

/* Dashboard: stat tiles, two-column sections, link lists. */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-tile { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card, #fff); text-decoration: none; color: inherit; }
.stat-tile:hover { border-color: var(--royal, #15233B); }
.stat-num { font-family: var(--font-head); font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--royal, #15233B); }
.stat-label { font-size: 12px; color: var(--muted); margin-top: 2px; }
.dash-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.link-list { list-style: none; padding: 0; margin: 0; }
.link-list li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.link-list li:last-child { border-bottom: none; }

/* ---- CI document treatment (client-facing approval / billing letterhead) ---- */
/* Ivory ground and gold logo, per CI: formal document backgrounds are Ivory,
   the mark is Veritas Gold. Tables follow the borderless fee/financial style. */
.doc { background: var(--ivory); }
.doc-logo { display: block; height: 42px; width: auto; margin-bottom: 6px; }
.doc-brand { display: flex; flex-direction: column; align-items: flex-start; }
/* Fee/financial table: borderless body, 1.5pt gold rule under header and above total. */
table.doc-table { border-collapse: collapse; }
table.doc-table thead th { border-bottom: 1.5px solid var(--gold); }
table.doc-table tbody td { border-bottom: none; }
table.doc-table tbody tr:hover { background: transparent; }
table.doc-table .total-row td { border-top: 1.5px solid var(--gold); color: var(--royal); font-weight: 700; }
.doc-summary .total-row td { border-top: 1.5px solid var(--gold); color: var(--royal); }
@media print {
  .doc { background: #fff; }
  table.data th { background: #fff; }
}

/* ---- Sortable column headings ---- */
table.data th.sortable { padding: 0; }
table.data th.sortable > a {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; text-decoration: none; color: inherit; white-space: nowrap;
}
table.data th.sortable.num > a { justify-content: flex-end; }
table.data th.sortable > a:hover { color: var(--royal); background: #f6f2e7; }
table.data th.sortable .sort-arrow { font-size: 9px; opacity: .35; }
table.data th.sortable.sorted > a { color: var(--royal); }
table.data th.sortable.sorted .sort-arrow { opacity: 1; color: var(--gold-dark); }

/* ---- Reports: grouped rows, export/print ---- */
tr.rk-client td {
  background: #f1ead7; color: var(--royal); font-family: var(--font-head);
  font-weight: 700; font-size: 15px; letter-spacing: .01em;
}
tr.rk-client_total td {
  font-weight: 700; color: var(--royal); border-top: 1.5px solid var(--gold); background: #fbfaf6;
}
tr.rk-meeting td, tr.rk-item td { font-weight: 600; }
/* Phase row: the name cell spans Date/Type/Status (unused on these rows) so a
   long note has room to wrap under the phase name instead of being crammed
   into a narrow right-hand column. */
tr.rk-phase .phase-cell { padding-left: 26px; }
tr.rk-phase .phase-name { color: var(--muted); }
tr.rk-phase .phase-note {
  display: block; margin-top: 2px; color: var(--ink);
  font-size: 12.5px; line-height: 1.45; white-space: normal;
}
tr.rk-phase .phase-note::before { content: "— "; color: var(--gold-dark); }
/* Full-width note beneath a retainer-deliverable line (it has no phase row). */
tr.rk-noterow td {
  padding: 2px 12px 8px 26px; color: var(--ink); font-size: 12.5px; line-height: 1.45;
}
tr.rk-noterow td::before { content: "— "; color: var(--gold-dark); }
/* ---- Searchable multi-select filter (type to filter, tick several) ---- */
.ms { position: relative; }
.ms-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px; font: inherit; font-size: 14px; text-align: left;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted);
  cursor: pointer;
}
.ms-toggle:hover { border-color: var(--gold); }
.ms.ms-has .ms-toggle { color: var(--ink); border-color: var(--gold); background: #fffdf7; }
.ms-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-caret { flex: none; color: var(--muted); font-size: 11px; }
.ms-panel {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 100%;
  width: max-content; max-width: 360px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(21,35,59,.18); padding: 8px;
}
.ms-search {
  width: 100%; padding: 7px 9px; font: inherit; font-size: 13px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink);
}
.ms-search:focus { outline: 2px solid var(--royal); border-color: var(--royal); }
.ms-tools { display: flex; gap: 12px; padding: 7px 2px; border-bottom: 1px solid var(--line); }
.ms-link {
  background: none; border: none; padding: 0; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--royal); cursor: pointer; text-decoration: underline;
}
.ms-link:hover { color: var(--gold-dark); }
.ms-list { max-height: 240px; overflow-y: auto; margin-top: 6px; }
.ms-item {
  display: flex; align-items: center; gap: 8px; padding: 5px 4px;
  font-size: 13px; cursor: pointer; border-radius: 4px;
}
/* `display:flex` above would otherwise beat the browser's [hidden] rule, so
   filtered-out options would stay visible. Keep this next to it. */
.ms-item[hidden], .ms-none[hidden] { display: none; }
.ms-item:hover { background: #f6f2e7; }
.ms-item input { width: auto; flex: none; margin: 0; }
.ms-none { color: var(--muted); font-size: 12px; margin: 6px 4px; }
.print-only { display: none; }
.report-print-head {
  align-items: center; gap: 16px; border-bottom: 2px solid var(--royal);
  padding-bottom: 10px; margin-bottom: 14px;
}
.report-print-head .print-logo { height: 40px; width: auto; }
.print-title { font-family: var(--font-head); font-size: 18px; color: var(--royal); font-weight: 700; }
.print-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
@media print { .print-only { display: flex; } }