/* Comar DOC - house design (martin-group-design skill tokens), hand-written, no framework.
   Shell, tokens, tables, forms and the responsive block are copied from CC-Comar_Compliance
   (live 2026-09-06) with its kiosk/grid/switcher parts left out.
   Desktop-first (1360-1440); breakpoints 900 / 840 (hamburger) / 640 at the end (dashboard-mobile-design.md).

   UTILITY CLASSES FOR PAGE TEMPLATES (the contract; use these, do not restyle them per page):
   Layout   .page-head (.sub, .actions)  .card  .card-head (h2)  .grid.grid-3|grid-4|grid-6  .form-row  .kv (dl)
   Tiles    .tiles > .tile (StatTile): .tile .label / .value (.good|.bad|.warn) / .meta; auto-fit grid, 2-up at 640
   Flags    .flag-strip > .flag.flag--red | .flag--amber | .flag--green  (status pill with a dot; red = action,
            amber = caution, green = OK - status colors carry meaning only)
   Badges   .badge.ok|good  .badge.warn  .badge.bad  .badge.neutral  .badge.teal
   Tables   .table-wrap > table.data  (header #F1F3F2, zebra #F7F8F8 on tbody rows, hover tint).
            td.num / th.num right-aligned tabular; .ident identity cell nowrap (.long/.xlong steps);
            tr.grouprow = group label row; tr.total = bold total row; tr.missing = MISSING day row (red text)
   Numbers  .num (tabular-nums; right-aligned inside table cells)  .muted-zero (a zero rendered muted)
   Forms    .form-section (a titled block of the entry form: > h2 + content; .form-section + .form-section spaced)
            label.field > span + input  .help  .check  .computed (read-only computed value, yellow-tint box)
            Inputs are NEVER text-align:right (dashboard-text-clipping.md); put the unit in .unit beside it.
   Buttons  .btn  .btn.primary  .btn.danger  .btn.ghost  .btn.sm  .btn.block
   Alerts   .alert.ok|warn|error
   Text     .muted .faint .small .mono .nowrap .right .center-text .tabular
   Charts   svg.chart (width 100%, height auto)  .chart-wrap (scroll-safe container)
*/
:root {
  --mg-teal: #17A38C; --mg-teal-hover: #128A76; --mg-teal-deep: #0E7C6B; --mg-teal-tint: #E2F3EF; --mg-teal-tint-border: #B9E0D7;
  --mg-ink: #232B2A; --mg-ink-hover: #2E3836; --mg-ink-divider: #3A4442; --mg-ink-text: #B9C2BF; --mg-ink-text-strong: #E8ECEA; --mg-ink-muted: #7E8A86; --mg-ink-label: #6E7A76;
  --mg-page: #F4F5F4; --mg-card: #FFFFFF; --mg-strip: #FAFBFA; --mg-table-head: #F1F3F2; --mg-zebra: #F7F8F8; --mg-row-hover: #F6FAF9;
  --mg-border: #DDE1DF; --mg-border-control: #C9CFCC; --mg-border-row: #EEF0EF;
  --mg-text: #222927; --mg-text-2: #5A6461; --mg-text-muted: #6B7370; --mg-text-faint: #98A09D;
  --mg-red: #C0392B; --mg-red-tint: #FBEAE7; --mg-red-border: #E5C4BE;
  --mg-amber: #A8720A; --mg-amber-text: #8A6D1F; --mg-amber-tint: #FBF3D9; --mg-amber-border: #E8D89A;
  --mg-green: #1E6B34; --mg-green-tint: #E3F3E4; --mg-green-border: #B5DDB9;
  --mg-neutral: #4A5350; --mg-neutral-tint: #ECEEED;
  --font-sans: Arial, 'Helvetica Neue', Helvetica, sans-serif; --font-mono: Consolas, 'SF Mono', 'Courier New', monospace;
  --radius: 4px; --radius-md: 6px; --sidebar-w: 216px; --topbar-h: 52px;
  --shadow-float: 0 2px 14px rgba(0,0,0,.14);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--mg-page); color: var(--mg-text); font-family: var(--font-sans); font-size: 13px; line-height: 1.5; }
a { color: var(--mg-teal-deep); text-decoration: none; } a:hover { color: #0A5C50; text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.2; }
h1 { font-size: 19px; } h2 { font-size: 16px; } h3 { font-size: 14px; }
p { margin: 0 0 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--mg-text-muted); } .faint { color: var(--mg-text-faint); } .small { font-size: 12px; } .mono { font-family: var(--font-mono); }
.tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }

/* ---------- Dashboard shell ---------- */
.shell { display: flex; min-height: 100vh; }
/* Viewport-pinned rail (switcher-canonical.md §2): the rail sticks, the CONTENT
   scrolls, and .nav is the one flexible band that scrolls internally -- so the
   logo plate above and the switcher foot below never leave the screen on a long
   page. The explicit height also stops .shell's flex stretch from re-growing the
   rail to page height. 100dvh second so it wins where supported. */
.sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--mg-ink); color: var(--mg-ink-text); display: flex; flex-direction: column; position: sticky; top: 0; z-index: 10; height: 100vh; height: 100dvh; }
.logo-plate { background: #fff; padding: 12px 16px; border-bottom: 3px solid var(--mg-teal); display: flex; align-items: center; gap: 10px; }
.logo-plate img { height: 26px; width: auto; display: block; }
.logo-plate .app-name { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--mg-text-2); font-weight: 600; }
.nav { padding: 10px 0; flex: 1; min-height: 0; overflow-y: auto; }
.nav-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--mg-ink-label); padding: 12px 16px 4px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 16px; color: var(--mg-ink-text); font-size: 13px; text-decoration: none; border-left: 3px solid transparent; }
.nav a:hover { background: var(--mg-ink-hover); color: var(--mg-ink-text-strong); }
.nav a.active { color: #fff; border-left-color: var(--mg-teal); background: var(--mg-ink-hover); }
.nav .glyph { width: 16px; text-align: center; color: var(--mg-ink-muted); }
.nav a.active .glyph { color: var(--mg-teal); }
/* ONE row: nine-dots mount first (hard against the rail's left edge -- that is
   what the asymmetric padding buys), identity beside it (switcher-canonical.md
   §2). margin-top:auto pins the block to the rail's foot even if .nav is short.
   The canonical font stack is restated because the foot and the panel are
   estate chrome and must match the reference even where the body differs
   (--font-sans is Arial-first, so it is NOT the same stack). */
.sidebar-foot {
  margin-top: auto;
  border-top: 1px solid var(--mg-ink-divider);
  padding: 12px 10px 12px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--mg-ink-text);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* Identity is name + email ONLY -- not a link, not a button, no role line, no
   sign-out (canonical §2/§4). min-width:0 is what lets the ellipsis engage
   inside a flex row. */
.sidebar-foot-id { min-width: 0; flex: 1; }
.sidebar-user { font-weight: 600; color: var(--mg-ink-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-email { margin-top: 2px; font-size: 12px; color: var(--mg-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Fallback identity line, rendered only when the session carries no email. */
.sidebar-scope { margin-top: 2px; font-size: 11px; color: var(--mg-ink-muted); text-transform: capitalize; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-h); background: #fff; border-bottom: 1px solid var(--mg-border); display: flex; align-items: center; gap: 12px; padding: 0 24px; position: sticky; top: 0; z-index: 5; }
.topbar h1 { font-size: 17px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: .12em; }
.topbar .fresh { font-size: 12px; color: var(--mg-text-muted); white-space: nowrap; }
.hamburger { display: none; width: 44px; height: 40px; border: 1px solid var(--mg-border-control); background: #fff; border-radius: var(--radius); cursor: pointer; position: relative; }
.hamburger span, .hamburger span::before, .hamburger span::after { content: ""; position: absolute; left: 12px; width: 18px; height: 2px; background: var(--mg-ink); }
.hamburger span { top: 19px; } .hamburger span::before { top: -6px; left: 0; } .hamburger span::after { top: 6px; left: 0; }
.content { padding: 20px 24px 40px; flex: 1; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head .sub { color: var(--mg-text-muted); font-size: 12px; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Cards / tiles ---------- */
.card { background: var(--mg-card); border: 1px solid var(--mg-border); border-radius: var(--radius); padding: 14px 16px; }
.card + .card, .grid + .card, .card + .grid { margin-top: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.card-head h2 { font-size: 14px; }
.grid { display: grid; gap: 12px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tile { background: #fff; border: 1px solid var(--mg-border); border-radius: var(--radius); padding: 12px 14px; display: block; color: inherit; text-decoration: none; }
.tile:hover { text-decoration: none; border-color: var(--mg-teal-tint-border); background: var(--mg-strip); color: inherit; }
.tile .label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--mg-text-muted); font-weight: 600; }
.tile .value { font-size: 28px; font-weight: 600; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tile .value.good { color: var(--mg-green); } .tile .value.bad { color: var(--mg-red); } .tile .value.warn { color: var(--mg-amber); }
.tile .meta { font-size: 12px; color: var(--mg-text-2); margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.bar { height: 6px; background: var(--mg-neutral-tint); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.bar i { display: block; height: 100%; background: var(--mg-teal); }

/* ---------- Badges / chips ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; line-height: 1.6; }
.badge.complete, .badge.pass, .badge.ok, .badge.good { background: var(--mg-green-tint); color: var(--mg-green); border-color: var(--mg-green-border); }
/* `warn` is the ONE class for "recorded, but short of its photo rule" (R16);
   `complete_short` is kept as an alias only so a status-driven badge can never
   render unstyled. New markup uses warn. */
.badge.due, .badge.abnormal, .badge.warn, .badge.complete_short, .badge.flag, .badge.low { background: var(--mg-amber-tint); color: var(--mg-amber-text); border-color: var(--mg-amber-border); }
.badge.overdue, .badge.missed-red, .badge.failed, .badge.fail, .badge.bad, .badge.high, .badge.error { background: var(--mg-red-tint); color: var(--mg-red); border-color: var(--mg-red-border); }
.badge.neutral, .badge.pending, .badge.skipped, .badge.resolved, .badge.open-neutral { background: var(--mg-neutral-tint); color: var(--mg-neutral); border-color: var(--mg-border); }
.badge.teal { background: var(--mg-teal-tint); color: var(--mg-teal-deep); border-color: var(--mg-teal-tint-border); }
.with-badge { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Tables (house palette) ---------- */
.table-wrap { overflow-x: auto; position: relative; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th { background: var(--mg-table-head); color: var(--mg-text-2); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--mg-border); white-space: nowrap; }
table.data td { padding: 7px 10px; border-bottom: 1px solid var(--mg-border-row); vertical-align: middle; min-height: 34px; }
table.data tbody tr:nth-child(even) td { background: var(--mg-zebra); }
table.data tbody tr:hover td { background: var(--mg-row-hover); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .ident { white-space: nowrap; font-weight: 600; }
table.data .ident.long { font-size: 12px; } table.data .ident.xlong { font-size: 11px; }
.empty { padding: 24px; text-align: center; color: var(--mg-text-muted); }

.narrow-only, .only-sm { display: none; }
table.data tbody tr.grouprow td { background: var(--mg-strip); font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--mg-text-2); }
/* ---------- Forms / buttons ---------- */
label.field { display: block; margin-bottom: 12px; }
fieldset.field > legend { padding: 0; margin: 0; }
label.field > span, fieldset.field > legend, fieldset.field > legend > span, .field-label { display: block; font-size: 12px; font-weight: 600; color: var(--mg-text-2); margin-bottom: 4px; }
input[type=text], input[type=number], input[type=email], input[type=password], input[type=date], input[type=search], select, textarea { width: 100%; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--mg-border-control); border-radius: var(--radius); background: #fff; color: var(--mg-text); }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--mg-teal-tint), 0 0 0 3px var(--mg-teal); }
textarea { min-height: 72px; resize: vertical; }
.check { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--mg-teal); }
.help { font-size: 12px; color: var(--mg-text-muted); margin-top: 3px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--mg-border-control); background: #fff; color: var(--mg-text); cursor: pointer; text-decoration: none; min-height: 36px; }
.btn:hover { background: var(--mg-strip); text-decoration: none; color: var(--mg-text); }
.btn.primary { background: var(--mg-teal); border-color: var(--mg-teal); color: #fff; } .btn.primary:hover { background: var(--mg-teal-hover); color: #fff; }
.btn.danger { color: var(--mg-red); border-color: var(--mg-red-border); } .btn.danger:hover { background: var(--mg-red-tint); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--mg-teal-deep); }
.btn.sm { padding: 4px 10px; min-height: 28px; font-size: 12px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.alert { padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--mg-border); background: var(--mg-strip); margin-bottom: 12px; font-size: 13px; }
.alert.error { background: var(--mg-red-tint); border-color: var(--mg-red-border); color: var(--mg-red); }
.alert.ok { background: var(--mg-green-tint); border-color: var(--mg-green-border); color: var(--mg-green); }
.alert.warn { background: var(--mg-amber-tint); border-color: var(--mg-amber-border); color: var(--mg-amber-text); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.filters label.field { margin: 0; min-width: 160px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 13px; }
.kv dt { color: var(--mg-text-muted); } .kv dd { margin: 0; }
.chart { width: 100%; height: auto; display: block; }

/* ---------- Login / error ---------- */
.center-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--mg-border); border-radius: var(--radius-md); padding: 24px; }
.login-card .brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 18px; }
.login-card .brand img { height: 32px; }
.login-card .brand .app { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--mg-text-2); font-weight: 600; }
.login-card .btn.primary.block { min-height: 44px; }
.center-text { text-align: center; }


/* ---------- Comar DOC utilities (see the contract at the top of this file) ---------- */
.num { font-variant-numeric: tabular-nums; }
.muted-zero { color: var(--mg-text-faint); }
table.data td.muted-zero { color: var(--mg-text-faint); }
table.data tbody tr.total td { font-weight: 700; background: var(--mg-table-head); border-top: 2px solid var(--mg-border); }
table.data tbody tr.missing td { color: var(--mg-red); }
.cell-clip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: .12em; }

/* StatTile grid: auto-fit, never forces a page scroll. */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-bottom: 16px; }
.tiles .tile .value { font-size: 24px; }
.tiles .tile .value .unit { font-size: 13px; font-weight: 600; color: var(--mg-text-2); margin-left: 3px; }

/* Flags: status pill with a dot. Meaning only: red action, amber caution, green OK. */
.flag-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.flag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--mg-border); background: var(--mg-neutral-tint); color: var(--mg-neutral); font-size: 12px; font-weight: 600; line-height: 1.5; }
.flag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.flag--red { background: var(--mg-red-tint); border-color: var(--mg-red-border); color: var(--mg-red); }
.flag--amber { background: var(--mg-amber-tint); border-color: var(--mg-amber-border); color: var(--mg-amber-text); }
.flag--green { background: var(--mg-green-tint); border-color: var(--mg-green-border); color: var(--mg-green); }
a.flag:hover { text-decoration: none; filter: brightness(.97); }

/* Entry form sections. */
.form-section { background: var(--mg-card); border: 1px solid var(--mg-border); border-radius: var(--radius); padding: 14px 16px; }
.form-section + .form-section { margin-top: 16px; }
.form-section > h2 { font-size: 14px; margin-bottom: 10px; }
.computed { display: block; padding: 8px 10px; min-height: 38px; border: 1px dashed var(--mg-amber-border); background: #FFFBEA; border-radius: var(--radius); font-variant-numeric: tabular-nums; font-size: 14px; }
.unit { color: var(--mg-text-muted); font-size: 12px; white-space: nowrap; }
.input-unit { display: flex; align-items: center; gap: 6px; }
.chart-wrap { width: 100%; overflow-x: auto; }

/* ---------- Responsive (end of file, max-width only) ---------- */
@media (max-width: 900px) {
  .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content { padding: 16px; }
}
@media (max-width: 840px) {
  .topbar .fresh { display: none; }
  .shell { display: block; }
  .sidebar { position: static; width: auto; height: auto; display: none; }
  .js-nav .sidebar { display: none; }
  .js-nav.nav-open .sidebar { display: flex; }
  .sidebar { flex-direction: column; }
  .hamburger { display: block; }
  .topbar { padding: 0 12px; }
  .main { min-height: 100vh; }
  .no-js .sidebar { display: flex; }
  .fresh-inline { display: block; }
}
@media (max-width: 640px) {
  table.data th.hide-sm, table.data td.hide-sm { display: none; }
  .wide-only { display: none; } .narrow-only { display: inline; }
  .grid-6, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tiles .tile { padding: 10px 12px; }
  .tiles .tile .value { font-size: 20px; }
  .page-head { flex-direction: column; align-items: stretch; }
  .filters label.field { min-width: 0; flex: 1 1 100%; }
  .btn { min-height: 44px; } .btn.sm { min-height: 36px; }
  input[type=text], input[type=number], input[type=email], input[type=password], input[type=date], select, textarea { font-size: 16px; min-height: 44px; }
  .tile .value { font-size: 24px; }
  .kv { grid-template-columns: 1fr; }
  .form-section { padding: 12px; }
}
@media print {
  .sidebar, .hamburger { display: none; }
}