/* ═══════════════════════════════════════════════════════════
   DTM Driver Compliance Matrix — compliance.css
   Light professional theme (Axis Connect design language,
   branded DTM navy/azure). Barlow + Barlow Condensed.
═══════════════════════════════════════════════════════════ */

:root {
  --navy:       #0F2A44;
  --navy-deep:  #091d30;
  --azure:      #2478D4;
  --azure-deep: #1D62B4;
  --azure-soft: #e8f1fb;

  --bg:          #eef1f5;
  --surface:     #f8f9fb;
  --white:       #fff;
  --border:      #dde2ec;
  --border-soft: #eaeef5;

  --text:     #0F2A44;
  --text-mid: #3d5166;
  --muted:    #8a9bb0;

  /* status — soft fills, strong readable foregrounds */
  --ok-fg: #256e39;  --ok-bg: #e3f4e8;  --ok-bd: #a9dcb8;
  --wa-fg: #8a6300;  --wa-bg: #fff3d1;  --wa-bd: #e6c34a;
  --vi-fg: #b3261e;  --vi-bg: #fbe1de;  --vi-bd: #eb9f98;

  --font: 'Barlow', system-ui, sans-serif;
  --cond: 'Barlow Condensed', system-ui, sans-serif;
  --rsm: 6px; --rmd: 10px;

  --shadow-sm: 0 1px 2px rgba(15,42,68,.06);
  --shadow-md: 0 6px 24px -8px rgba(15,42,68,.18);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* the fix for the stuck FMCSA popover: [hidden] must always win,
   even over display:flex on the same element */
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  font-family: var(--font); color: var(--text); background: var(--bg);
  font-size: 14px; -webkit-font-smoothing: antialiased;
}
button { cursor: pointer; border: none; background: none; font-family: var(--font); color: inherit; }
input  { font-family: var(--font); outline: none; }
:focus-visible { outline: 2px solid var(--azure); outline-offset: 2px; border-radius: 4px; }

.capp { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* ── TOP BAR ── */
.top {
  background: var(--navy); border-bottom: 3px solid var(--azure);
  min-height: 62px; padding: 8px 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; row-gap: 6px;
}
.top-left { display: flex; align-items: center; gap: 16px; }
.dtm-mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 30px; letter-spacing: 3px; color: #fff; line-height: 1;
}
.top-div { width: 1px; height: 30px; background: rgba(255,255,255,.18); }
.top-titles { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.top-brand { font-family: var(--cond); font-weight: 700; font-size: 20px; letter-spacing: .6px; color: #fff; }
.top-sub {
  font-size: 10px; font-weight: 700; letter-spacing: 1.7px;
  text-transform: uppercase; color: #7DCFFF;
}
.sync { display: flex; align-items: center; gap: 9px; }
.sync-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--muted); box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}
.sync-dot.ok   { background: #43d17c; box-shadow: 0 0 0 3px rgba(67,209,124,.25); }
.sync-dot.warn { background: #f5b942; box-shadow: 0 0 0 3px rgba(245,185,66,.25); }
.sync-dot.err  { background: #f2655c; box-shadow: 0 0 0 3px rgba(242,101,92,.25); }
.sync-txt { display: flex; flex-direction: column; line-height: 1.25; }
.sync-txt span:first-child { font-size: 12.5px; font-weight: 700; color: #fff; }
.sync-txt span:last-child  { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.55); }

/* ── STATS STRIP ── */
.stats {
  display: flex; gap: 10px; padding: 12px 22px; flex-wrap: wrap;
  background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--border-soft);
  border-radius: var(--rmd); padding: 8px 16px; box-shadow: var(--shadow-sm);
}
.chip b {
  font-family: var(--cond); font-weight: 700; font-size: 24px;
  line-height: 1; color: var(--text); font-variant-numeric: tabular-nums;
}
.chip span {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted); line-height: 1.2;
}
.chip.c-green  b { color: var(--ok-fg); }
.chip.c-amber  b { color: var(--wa-fg); }
.chip.c-red    b { color: var(--vi-fg); }
.chip.c-sky    b { color: var(--azure-deep); }
.chip.c-orange b { color: #d96b00; }

/* ── BANNER ── */
.cbanner {
  margin: 10px 22px 0; padding: 9px 14px; border-radius: var(--rsm);
  font-size: 12.5px; font-weight: 600;
  background: var(--wa-bg); border: 1px solid var(--wa-bd); color: var(--wa-fg);
}
.cbanner.info { background: var(--azure-soft); border-color: #b9d4f2; color: var(--azure-deep); }

/* ── TOOLBAR ── */
.toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 22px; background: var(--white);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.seg {
  display: flex; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--rsm); padding: 3px; gap: 2px;
}
.seg button {
  padding: 6px 16px; font-size: 12.5px; font-weight: 700; letter-spacing: .3px;
  color: var(--text-mid); border-radius: 4px; transition: .12s;
}
.seg button.on { background: var(--navy); color: #fff; }
.pager { display: flex; align-items: center; gap: 5px; }
.pager button {
  width: 30px; height: 30px; border-radius: var(--rsm);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-mid); font-size: 10px; transition: .12s;
}
.pager button:hover:not(:disabled) { border-color: var(--azure); color: var(--azure-deep); }
.pager button:disabled { opacity: .35; cursor: default; }
.pager .today-btn { width: auto; padding: 0 13px; font-size: 12px; font-weight: 700; }
.range-label {
  font-family: var(--cond); font-weight: 700; font-size: 15px; letter-spacing: .4px;
  color: var(--text); min-width: 185px; text-align: center; font-variant-numeric: tabular-nums;
}
.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--rsm); padding: 7px 11px; color: var(--muted);
  min-width: 210px; transition: border-color .15s, background .15s, box-shadow .15s;
}
.search:focus-within { border-color: var(--azure); background: #fff; box-shadow: 0 0 0 3px rgba(36,120,212,.10); }
.search input { flex: 1; border: none; background: transparent; font-size: 13px; color: var(--text); }
.search input::placeholder { color: var(--muted); }
.check {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--text-mid);
  cursor: pointer; user-select: none;
}
.check input { accent-color: var(--navy); width: 15px; height: 15px; }
.spacer { flex: 1; }
.ghost-btn {
  padding: 7px 14px; border-radius: var(--rsm);
  background: var(--white); border: 1px solid var(--border);
  color: var(--text-mid); font-size: 12.5px; font-weight: 700; transition: .12s;
}
.ghost-btn:hover { border-color: var(--azure); color: var(--azure-deep); }
.caret { display: inline-block; transition: transform .18s; font-size: 11px; }
.ghost-btn.open .caret { transform: rotate(180deg); }
.ghost-btn.open { background: var(--azure-soft); border-color: #b9d4f2; color: var(--azure-deep); }

/* ── FMCSA RULES PANEL (collapsible) ── */
.rulespanel {
  max-height: 0; overflow: hidden;
  transition: max-height .28s ease;
  background: var(--surface); border-bottom: 0 solid var(--border); flex-shrink: 0;
}
.rulespanel.open { max-height: 320px; overflow-y: auto; border-bottom-width: 1px; }
.rules-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 10px; padding: 14px 22px;
}
.rule {
  background: var(--white); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--azure); border-radius: var(--rsm);
  padding: 9px 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-mid);
  box-shadow: var(--shadow-sm);
}
.rule b { display: block; font-size: 13px; color: var(--navy); margin-bottom: 2px; }

/* ── LEGEND ── */
.legend {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  padding: 9px 22px; font-size: 11.5px; font-weight: 600; color: var(--text-mid);
  background: var(--bg); flex-shrink: 0;
}
.legend span { display: flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid transparent; }
.sw-green    { background: linear-gradient(180deg, #e9f8ee, #c8ebd4); border-color: #56b474; }
.sw-amber    { background: linear-gradient(180deg, #fff6d8, #ffe8a3); border-color: #dfae2e; }
.sw-red      { background: linear-gradient(180deg, #fde4e1, #f8c3bc); border-color: #d9574a; }
.sw-orange   { background: linear-gradient(180deg, #ffc06a, #ff9224); border-color: #e06d00; }
.sw-dgreen   { background: linear-gradient(180deg, #5fc07f, #2f9457); border-color: #1f7a42; }
.sw-none     { background: var(--white); border-color: var(--border); }
.sw-flag     { background: var(--azure); border-radius: 50%; width: 8px; height: 8px; margin: 0 2px; }
.sw-inactive { background: repeating-linear-gradient(45deg, #dfe5ee 0 3px, #eef1f5 3px 6px); border-color: var(--border); }

/* ── MATRIX ── */
.wallwrap {
  flex: 1; min-height: 320px; overflow: auto; position: relative; background: var(--bg);
}
.wallwrap::-webkit-scrollbar { width: 12px; height: 12px; }
.wallwrap::-webkit-scrollbar-thumb { background: #c8d2e0; border-radius: 8px; border: 3px solid var(--bg); }
.wallwrap::-webkit-scrollbar-thumb:hover { background: #aebccd; }
.wall { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }

.wall thead th {
  position: sticky; top: 0; z-index: 6;
  background: var(--surface); box-shadow: 0 2px 3px -2px rgba(15,42,68,.12);
  border-bottom: 1px solid var(--border);
  padding: 7px 4px; text-align: center; white-space: nowrap;
  font-family: var(--cond); font-weight: 700; font-size: 12.5px; color: var(--text);
}
.wall thead th small {
  display: block; font-family: var(--font); font-size: 9.5px; font-weight: 700;
  letter-spacing: .8px; color: var(--muted); margin-top: 1px;
}
.wall thead th.wknd { color: var(--muted); background: #f2f4f8; }
.wall thead th.today { background: var(--azure-soft); border-bottom: 2px solid var(--azure); color: var(--azure-deep); }
.wall thead th:first-child {
  left: 0; z-index: 8; text-align: left; padding: 11px 16px;
  min-width: 250px; width: 250px;
  font-family: var(--font); font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted);
  border-right: 1px solid var(--border);
}

.wall td:first-child {
  position: sticky; left: 0; z-index: 4; background: var(--white);
  min-width: 250px; width: 250px; padding: 7px 16px;
  border-bottom: 1px solid var(--border-soft); border-right: 1px solid var(--border);
  box-shadow: 6px 0 8px -6px rgba(15,42,68,.08); white-space: nowrap;
}
.wall tbody tr:hover td:first-child { background: #f4f8fd; }
.wall tbody tr:hover td.cell { background: #f3f7fc; }

.drv { display: flex; align-items: center; gap: 8px; }
.drv-name {
  font-size: 13.5px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; max-width: 150px;
}
.drv-pct {
  margin-left: auto; padding-left: 8px;
  font-family: var(--cond); font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums; color: var(--muted);
}
.drv-pct.p-good { color: var(--ok-fg); }
.drv-pct.p-warn { color: var(--wa-fg); }
.drv-pct.p-bad  { color: var(--vi-fg); }
.drv-badge {
  font-size: 9px; font-weight: 800; letter-spacing: .8px;
  padding: 2px 7px; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}
tr.r-inactive td:first-child { background: #f7f8fa; }
tr.r-inactive .drv-name { color: var(--text-mid); font-weight: 600; }

.sect-row td {
  position: sticky; left: 0;
  background: linear-gradient(180deg, #eaf0f7, #e4ebf4) !important;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  border-right: 0 !important; box-shadow: none !important;
  padding: 7px 16px !important;
  font-family: var(--cond); font-weight: 700; font-size: 14px;
  letter-spacing: .4px; color: var(--navy);
}

/* cells */
.wall td.cell {
  padding: 4px; text-align: center;
  border-bottom: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft);
  background: var(--white);
}
.wall td.cell.wknd  { background: #f7f8fb; }
.wall td.cell.today { background: rgba(36,120,212,.05); }
.cbox {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  border: 1.5px solid transparent; cursor: pointer;
  font-family: var(--cond); font-weight: 700; font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 1px 2px rgba(15,42,68,.16);
  transition: transform .1s, box-shadow .1s;
}
.cbox:hover {
  transform: scale(1.22); z-index: 2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 6px 16px -4px rgba(15,42,68,.35);
}
.cbox.s1 { background: linear-gradient(180deg, #e9f8ee, #c8ebd4); border-color: #56b474; color: #1d6a35; }
.cbox.s2 { background: linear-gradient(180deg, #fff6d8, #ffe8a3); border-color: #dfae2e; color: #7d5a00; }
.cbox.s3 { background: linear-gradient(180deg, #fde4e1, #f8c3bc); border-color: #d9574a; color: #a31d15; }
.cbox.s4 {   /* Personal Conveyance / Yard Move — needs DTM review */
  background: linear-gradient(180deg, #ffc06a, #ff9224);
  border-color: #e06d00; color: #7a3900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 4px rgba(224,109,0,.45);
}
.cbox.s5 {   /* approved by reviewer — verified compliant */
  background: linear-gradient(180deg, #5fc07f, #2f9457);
  border-color: #1f7a42; color: #fff;
}
td.cell .cbox.s5::before { content: "✓"; font-size: 13px; font-weight: 700; }
.cbox.s0 {
  background: transparent; border: 1px solid var(--border-soft);
  box-shadow: none; cursor: default;
}
.cbox.s0:hover { transform: none; box-shadow: none; }
.cbox.future { border-color: transparent; }
.cbox.flagged::after {
  content: ""; position: absolute; top: -3px; right: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--azure); border: 1.5px solid #fff;
}
.cbox.wide { width: 52px; }
tr.r-inactive .cbox { filter: saturate(.55); opacity: .8; }

.wall-empty {
  padding: 70px 20px; text-align: center;
  font-size: 13.5px; font-weight: 600; color: var(--muted);
}

/* ── HOVER SUMMARY CARD ── */
.hovercard {
  position: fixed; z-index: 60; width: 250px; pointer-events: none;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--rmd); box-shadow: 0 14px 40px -10px rgba(15,42,68,.30);
  padding: 11px 13px; font-size: 12px; line-height: 1.45; color: var(--text-mid);
}
.hc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.hc-date { font-family: var(--cond); font-weight: 700; font-size: 14px; color: var(--text); }
.hc-state {
  font-size: 9.5px; font-weight: 800; letter-spacing: .8px;
  padding: 2px 8px; border-radius: 100px; border: 1px solid;
}
.hc-state.s1 { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-bd); }
.hc-state.s2 { color: var(--wa-fg); background: var(--wa-bg); border-color: var(--wa-bd); }
.hc-state.s3 { color: var(--vi-fg); background: var(--vi-bg); border-color: var(--vi-bd); }
.hc-state.s4 { color: #9a4a00; background: #ffedd6; border-color: #eda056; }
.hc-state.s5 { color: #14532d; background: #d8f2e0; border-color: #52a873; }
.hc-row { display: flex; justify-content: space-between; gap: 10px; padding: 1.5px 0; }
.hc-row b { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.hc-foot { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-soft); font-size: 10.5px; color: var(--muted); }

/* ── DRAWER ── */
.drawer-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(15,42,68,.38); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41;
  width: 470px; max-width: 94vw;
  background: var(--bg); border-left: 1px solid var(--border);
  box-shadow: -24px 0 60px rgba(15,42,68,.25);
  display: flex; flex-direction: column;
}
.drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 20px 14px; background: var(--navy);
  border-bottom: 3px solid var(--azure); flex-shrink: 0;
}
.drawer-driver { font-family: var(--cond); font-weight: 700; font-size: 21px; color: #fff; display: flex; align-items: center; gap: 10px; }
.drawer-driver .drv-badge { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.75); }
.drawer-date { font-size: 12px; font-weight: 600; color: #7DCFFF; margin-top: 3px; letter-spacing: .4px; }
.xbtn {
  color: rgba(255,255,255,.7); font-size: 24px; line-height: 1; padding: 2px 7px;
  border-radius: 5px; transition: .12s;
}
.xbtn:hover { color: #fff; background: rgba(255,255,255,.12); }
.drawer-body { flex: 1; overflow-y: auto; padding: 14px 18px 24px; }
.drawer-body::-webkit-scrollbar { width: 10px; }
.drawer-body::-webkit-scrollbar-thumb { background: #c8d2e0; border-radius: 8px; border: 2px solid var(--bg); }

/* shift summary */
.shift {
  background: var(--white); border: 1px solid var(--border-soft);
  border-radius: var(--rmd); box-shadow: var(--shadow-sm);
  padding: 13px 14px; margin-bottom: 10px;
}
.shift-title {
  font-family: var(--cond); font-weight: 700; font-size: 15px; color: var(--navy);
  letter-spacing: .3px; margin-bottom: 9px;
  display: flex; align-items: center; justify-content: space-between;
}
.shift-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; }
.sg-item { display: flex; flex-direction: column; gap: 1px; }
.sg-item span {
  font-size: 9.5px; font-weight: 700; letter-spacing: .9px;
  text-transform: uppercase; color: var(--muted);
}
.sg-item b {
  font-family: var(--cond); font-weight: 700; font-size: 16px; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sg-item b.miss { color: var(--wa-fg); }
.sg-item small { font-size: 11px; font-weight: 600; color: var(--text-mid); }

/* clocks */
.clock { margin-top: 11px; }
.clock-row {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 3px;
}
.clock-row span { font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.clock-row b { font-family: var(--cond); font-weight: 700; font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.clock-row b.over { color: var(--vi-fg); }
.clock-bar { height: 8px; border-radius: 100px; background: var(--border-soft); overflow: hidden; }
.clock-bar i { display: block; height: 100%; border-radius: 100px; background: var(--azure); }
.clock-bar i.warn { background: #E0A500; }
.clock-bar i.over { background: #CE3B2C; }

/* PC / Yard-Move review box */
.rvbox {
  background: var(--white); border: 1px solid var(--border-soft);
  border-left: 4px solid #ff9224; border-radius: var(--rmd);
  box-shadow: var(--shadow-sm); padding: 12px 14px; margin-bottom: 10px;
}
.rvbox.rv-pending  { background: #fff9f2; border-color: #f3ddc2; border-left-color: #ff9224; }
.rvbox.rv-approved { border-left-color: #2f9457; }
.rvbox.rv-rejected { border-left-color: #CE3B2C; }
.rvbox-title {
  font-family: var(--cond); font-weight: 700; font-size: 15px;
  letter-spacing: .3px; margin-bottom: 8px; color: #b35400;
}
.rv-approved .rvbox-title { color: #1f7a42; }
.rv-rejected .rvbox-title { color: var(--vi-fg); }
.rv-seg { font-size: 12.5px; color: var(--text-mid); padding: 2px 0; }
.rv-seg b { color: var(--text); font-weight: 700; margin-right: 6px; }
.rv-seg .t { font-weight: 700; color: var(--azure-deep); font-variant-numeric: tabular-nums; margin-right: 4px; }
.rv-note { color: var(--muted); font-style: italic; }
.rv-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rv-name {
  flex: 1 1 160px; padding: 8px 11px; font-size: 13px; color: var(--text);
  background: #fff; border: 1px solid var(--border); border-radius: var(--rsm);
}
.rv-name:focus { border-color: var(--azure); box-shadow: 0 0 0 3px rgba(36,120,212,.10); }
.rv-btn {
  padding: 8px 18px; border-radius: var(--rsm); font-size: 13px; font-weight: 700;
  color: #fff; transition: .12s;
}
.rv-ok { background: #2f9457; } .rv-ok:hover { background: #257a46; }
.rv-no { background: #CE3B2C; } .rv-no:hover { background: #b32d20; }
.rv-done { margin-top: 9px; font-size: 13px; font-weight: 600; color: var(--text-mid); }
.rv-done b { color: var(--text); }
.rv-done .t { color: var(--muted); font-weight: 600; margin-left: 6px; font-size: 11.5px; }
.rv-undo {
  margin-left: 10px; font-size: 11px; font-weight: 700; color: var(--muted);
  text-decoration: underline; padding: 2px 4px;
}
.rv-undo:hover { color: var(--vi-fg); }

/* compliance cards */
.ccard {
  background: var(--white); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--muted); border-radius: var(--rsm);
  box-shadow: var(--shadow-sm);
  padding: 10px 13px; margin-bottom: 8px;
}
.ccard.k-green { border-left-color: #4a8a2a; }
.ccard.k-amber { border-left-color: #E0A500; }
.ccard.k-red   { border-left-color: #CE3B2C; }
.ccard.k-grey  { opacity: .72; }
.ccard-top { display: flex; align-items: center; gap: 8px; }
.ccard-title { font-size: 13px; font-weight: 700; color: var(--text); flex: 1; }
.ccard-state {
  font-size: 9.5px; font-weight: 800; letter-spacing: .8px;
  padding: 2px 9px; border-radius: 100px; border: 1px solid;
}
.k-green .ccard-state { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-bd); }
.k-amber .ccard-state { color: var(--wa-fg); background: var(--wa-bg); border-color: var(--wa-bd); }
.k-red   .ccard-state { color: var(--vi-fg); background: var(--vi-bg); border-color: var(--vi-bd); }
.k-grey  .ccard-state { color: var(--muted); background: var(--surface); border-color: var(--border); }
.ccard-detail { margin-top: 5px; font-size: 12.5px; line-height: 1.55; color: var(--text-mid); }
.ccard-detail .t { font-weight: 700; color: var(--azure-deep); font-variant-numeric: tabular-nums; }

/* duty bar */
.dutybar {
  display: flex; height: 13px; border-radius: 100px; overflow: hidden;
  margin: 4px 0 6px; border: 1px solid var(--border-soft);
}
.dutybar i { height: 100%; }
.db-off { background: #d7dee8; }
.db-sb  { background: #9fb3cc; }
.db-dr  { background: var(--azure); }
.db-on  { background: #48a9a6; }
.dutykey { display: flex; gap: 13px; flex-wrap: wrap; font-size: 11px; font-weight: 600; color: var(--muted); }
.dutykey b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

.dmeta {
  margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.75;
}
.dmeta b { color: var(--text-mid); font-weight: 600; }

/* mini day-grid for week/month drill-down */
.minigrid { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 14px; }
.minigrid .cbox { width: 37px; height: 33px; flex-direction: column; font-size: 12px; line-height: 1; }
.minigrid .cbox small { font-size: 8px; font-weight: 700; opacity: .7; margin-top: 1px; }

/* narrow screens */
@media (max-width: 1100px) {
  .stats { padding: 10px 14px; }
  .toolbar, .top { padding-left: 14px; padding-right: 14px; }
}