/* ══════════════════════════════════════════════════════════════════════════
   MAHENDRA GROUP – ENTERPRISE GOVERNANCE ERP · Design System
   Data-viz palette validated with the dataviz skill's checker:
     categorical (adjacent)  #2a78d6 #eb6834 #1baf7a #eda100        ALL PASS
     ordinal blue            #86b6ef → #104281                       ALL PASS
     ordinal severity red    #e8a0a0 → #8f2323                       ALL PASS
     status                  good/warning/serious/critical — always shipped
                             with a glyph + text label, never colour alone.
   Brand red (#C2181F) is chrome only and never appears inside a plot.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* chrome */
  --brand:            #C2181F;
  --brand-dark:       #8C1216;
  --sidebar:          #101418;
  --sidebar-2:        #171C22;
  --sidebar-ink:      #C9D1D9;
  --sidebar-ink-dim:  #7D8590;
  --sidebar-line:     #232A31;

  /* surfaces & ink (dataviz chrome tokens) */
  --surface-1:        #ffffff;
  --surface-2:        #f6f6f4;
  --surface-3:        #eeeeea;
  --page:             #f2f2ef;
  --text-primary:     #0b0b0b;
  --text-secondary:   #52514e;
  --text-muted:       #898781;
  --gridline:         #e1e0d9;
  --baseline:         #c3c2b7;
  --border:           rgba(11,11,11,0.10);
  --border-strong:    rgba(11,11,11,0.18);

  /* status (reserved — never used as a series colour) */
  --good:             #0ca30c;
  --good-text:        #006300;
  --warning:          #fab219;
  --warning-text:     #8a5c00;
  --serious:          #ec835a;
  --serious-text:     #93411c;
  --critical:         #d03b3b;
  --critical-text:    #a01f1f;
  --info:             #2a78d6;
  --info-text:        #1c5cab;
  --neutral:          #898781;

  /* categorical series */
  --series-1:         #2a78d6;
  --series-2:         #eb6834;
  --series-3:         #1baf7a;
  --series-4:         #eda100;

  /* ordinal ramps */
  --seq-1: #86b6ef; --seq-2: #5598e7; --seq-3: #2a78d6; --seq-4: #1c5cab; --seq-5: #104281;
  --sev-1: #e8a0a0; --sev-2: #dd7373; --sev-3: #d24f4f; --sev-4: #bd3232; --sev-5: #8f2323;

  /* metrics */
  --r-sm: 4px; --r: 6px; --r-lg: 10px; --r-xl: 14px;
  --sb-w: 248px;
  --hd-h: 56px;
  --shadow-1: 0 1px 2px rgba(11,11,11,.06), 0 1px 3px rgba(11,11,11,.04);
  --shadow-2: 0 2px 4px rgba(11,11,11,.05), 0 8px 24px rgba(11,11,11,.08);
  --shadow-3: 0 12px 40px rgba(11,11,11,.16);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 13.5px; line-height: 1.45;
  color: var(--text-primary); background: var(--page);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 .6em; }
a { color: var(--info-text); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; border-radius: 3px; }
::selection { background: #cde2fb; }
.tnum { font-variant-numeric: tabular-nums; }

/* ───────────────────────────────────────────────────────── boot splash */
.app-boot { display: grid; place-items: center; min-height: 100vh; background: var(--sidebar); }
.boot { text-align: center; color: #fff; }
.boot-mark {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 12px; background: var(--brand);
  display: grid; place-items: center; font-size: 28px; font-weight: 700;
}
.boot-text { font-size: 16px; font-weight: 600; }
.boot-text span { display: block; font-size: 12px; font-weight: 400; color: var(--sidebar-ink-dim); margin-top: 3px; letter-spacing: .04em; text-transform: uppercase; }
.boot-bar { width: 180px; height: 3px; margin: 18px auto 0; background: #ffffff1f; border-radius: 3px; overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 40%; background: var(--brand); border-radius: 3px; animation: bootslide 1.1s ease-in-out infinite; }
@keyframes bootslide { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }

/* ═══════════════════════════════════════════════════════════ SHELL */
.shell { display: grid; grid-template-columns: var(--sb-w) 1fr; min-height: 100vh; }

/* ── sidebar */
.sidebar {
  background: var(--sidebar); color: var(--sidebar-ink);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 40;
}
.sb-brand {
  display: flex; align-items: center; gap: 10px; padding: 0 14px; height: var(--hd-h);
  border-bottom: 1px solid var(--sidebar-line); flex: 0 0 auto;
}
.sb-mark {
  width: 30px; height: 30px; border-radius: 7px; background: var(--brand); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 16px; flex: 0 0 auto;
}
.sb-name { font-size: 13px; font-weight: 650; color: #fff; line-height: 1.15; }
.sb-name span { display: block; font-size: 10px; font-weight: 500; color: var(--sidebar-ink-dim); letter-spacing: .05em; text-transform: uppercase; margin-top: 1px; }
.sb-scroll { flex: 1 1 auto; overflow-y: auto; padding: 8px 8px 20px; scrollbar-width: thin; }
.sb-scroll::-webkit-scrollbar { width: 8px; }
.sb-scroll::-webkit-scrollbar-thumb { background: #2b323a; border-radius: 8px; }
.sb-group { margin-top: 6px; }
/* The section heading is a control now, not a caption: it opens and closes the
   fifty-one items that used to be listed all at once. */
.sb-group-head {
  display: flex; align-items: center; gap: 6px; width: 100%;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--sidebar-ink-dim);
  margin: 0; padding: 7px 10px; font-weight: 600;
  background: none; border: 0; cursor: pointer; text-align: left; border-radius: var(--r);
}
.sb-group-head:hover { background: var(--sidebar-2); color: var(--sidebar-ink); }
.sb-group-head.open { color: var(--sidebar-ink); }
.sb-group-head .chev { font-size: 9px; opacity: .7; flex: 0 0 auto; }
/* How many items are behind a shut heading. Without it a collapsed section looked
   like an empty one, and half the application appeared to have been removed. */
.sb-group-head .gcount {
  flex: 0 0 auto; font-size: 10px; opacity: .55; font-weight: 500;
  letter-spacing: 0; margin-left: auto; padding-right: 2px;
}
.sb-group-head.open .gcount { opacity: 0; }
.sb-group-body { display: none; }
.sb-group-body.open { display: block; }
/* Kept so an older cached bundle still renders a readable heading. */
.sb-group > h6 {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--sidebar-ink-dim);
  margin: 0 0 4px; padding: 0 10px; font-weight: 600;
}
.sb-link {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--r);
  color: var(--sidebar-ink); font-size: 13px; cursor: pointer; position: relative;
  text-decoration: none; user-select: none; border: 0; background: none; width: 100%; text-align: left;
}
.sb-link:hover { background: var(--sidebar-2); color: #fff; text-decoration: none; }
.sb-link.active { background: var(--sidebar-2); color: #fff; font-weight: 600; }
.sb-link.active::before {
  content: ''; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px;
  background: var(--brand); border-radius: 0 3px 3px 0;
}
.sb-link .ic { width: 16px; height: 16px; flex: 0 0 auto; opacity: .85; }
.sb-link .cnt {
  margin-left: auto; font-size: 10.5px; font-weight: 700; background: #ffffff1a; color: #fff;
  border-radius: 20px; padding: 1px 6px; min-width: 20px; text-align: center;
}
.sb-link .cnt.hot { background: var(--critical); }
.sb-foot { border-top: 1px solid var(--sidebar-line); padding: 9px 10px; font-size: 11px; color: var(--sidebar-ink-dim); }

/* ── main + header */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: var(--hd-h); background: var(--surface-1); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; padding: 0 16px; position: sticky; top: 0; z-index: 30;
}
/* .tb-icon below also sets `display: grid`, and both are single-class selectors, so
   the later one wins and this had no effect at all — the hamburger was visible on
   every width regardless. Matching both classes settles it by specificity rather
   than by source order. */
.tb-icon.tb-menu { display: none; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); min-width: 0; }
.crumbs b { color: var(--text-primary); font-weight: 600; font-size: 14px; }
.crumbs span { white-space: nowrap; }
.tb-spacer { flex: 1 1 auto; }
.tb-search {
  display: flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); padding: 5px 9px; min-width: 230px; color: var(--text-muted); cursor: pointer; font-size: 12.5px;
}
.tb-search:hover { border-color: var(--border-strong); }
.tb-search kbd {
  margin-left: auto; font: 500 10.5px var(--font); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--text-muted);
}
.tb-icon {
  width: 32px; height: 32px; border-radius: var(--r); border: 1px solid transparent; background: none;
  display: grid; place-items: center; cursor: pointer; position: relative; color: var(--text-secondary);
}
.tb-icon:hover { background: var(--surface-2); border-color: var(--border); }
.tb-icon .dot {
  position: absolute; top: 5px; right: 5px; min-width: 15px; height: 15px; padding: 0 3px;
  background: var(--critical); color: #fff; font-size: 9.5px; font-weight: 700; border-radius: 9px;
  display: grid; place-items: center; border: 2px solid var(--surface-1);
}
.tb-user { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: var(--r); cursor: pointer; border: 1px solid transparent; }
.tb-user:hover { background: var(--surface-2); border-color: var(--border); }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--sidebar); color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: 0 0 auto;
}
.tb-user .who { line-height: 1.15; text-align: left; }
.tb-user .who b { display: block; font-size: 12.5px; font-weight: 600; }
.tb-user .who span { display: block; font-size: 10.5px; color: var(--text-muted); }

.content { padding: 16px; flex: 1 1 auto; min-width: 0; }
/* Focused only — it must be reachable by keyboard but out of the way otherwise.
   display:none or visibility:hidden would take it out of the tab order entirely,
   which defeats the point. */
.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 200;
  background: var(--brand, #c2181f); color: #fff;
  padding: 10px 16px; border-radius: 0 0 8px 8px; font-size: 14px;
  text-decoration: none; transition: top .12s ease;
}
.skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: -4px; }
.content:focus { outline: none; }
.page-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.page-head h1 { font-size: 19px; }
.page-head .sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════ PRIMITIVES */
.card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.card-hd {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border);
}
.card-hd h3 { font-size: 13.5px; }
.card-hd .sub { font-size: 11.5px; color: var(--text-muted); }
.card-hd .right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.card-bd { padding: 14px; }
.card-bd.flush { padding: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r); border: 1px solid var(--border-strong);
  background: var(--surface-1); color: var(--text-primary); font-size: 12.5px; font-weight: 550;
  cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--sidebar); border-color: var(--sidebar); color: #fff; }
.btn.primary:hover { background: #1c232b; }
.btn.brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.brand:hover { background: var(--brand-dark); }
.btn.good { background: var(--good-text); border-color: var(--good-text); color: #fff; }
.btn.danger { background: var(--critical-text); border-color: var(--critical-text); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { padding: 3.5px 8px; font-size: 11.5px; }
.btn.lg { padding: 9px 18px; font-size: 14px; }
.btn.block { width: 100%; }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--r) 0 0 var(--r); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--r) var(--r) 0; }
.btn-group .btn.on { background: var(--sidebar); border-color: var(--sidebar); color: #fff; z-index: 1; }

.pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 1.5px 7px; border-radius: 20px;
  font-size: 10.5px; font-weight: 650; letter-spacing: .02em; white-space: nowrap;
  border: 1px solid transparent; line-height: 1.5;
}
.pill .g { font-size: 9px; line-height: 1; }
.pill.grey  { background: #f0efec; color: #45443f; border-color: #e1e0d9; }
.pill.blue  { background: #e8f1fd; color: var(--info-text); border-color: #cde2fb; }
.pill.green { background: #e6f6e6; color: var(--good-text); border-color: #c8ebc8; }
.pill.amber { background: #fdf3dd; color: var(--warning-text); border-color: #f7e3b0; }
.pill.orange{ background: #fdeee7; color: var(--serious-text); border-color: #f8d8c8; }
.pill.red   { background: #fbeaea; color: var(--critical-text); border-color: #f3cccc; }
.pill.solid-red { background: var(--critical); color: #fff; border-color: var(--critical); }
.pill.violet{ background: #eeecf9; color: #3a2d86; border-color: #d9d5f1; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--border); font-size: 11.5px; color: var(--text-secondary);
}
.chip button { border: 0; background: none; cursor: pointer; color: var(--text-muted); padding: 0 0 0 2px; font-size: 13px; line-height: 1; }

.kv { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 7px 12px; font-size: 12.5px; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; color: var(--text-primary); font-weight: 500; word-break: break-word; }

.stat-row { display: flex; gap: 18px; flex-wrap: wrap; }
.stat { min-width: 100px; }
.stat b { display: block; font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.stat span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

.hr { height: 1px; background: var(--border); margin: 14px 0; border: 0; }
.muted { color: var(--text-muted); }
.small { font-size: 11.5px; }
.mono { font-family: var(--mono); font-size: 12px; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.grow { flex: 1 1 auto; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 10px; }
.grid { display: grid; gap: 12px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }

/* ═══════════════════════════════════════════════════════════ KPI TILES */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; }
.kpi {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 11px 13px; cursor: pointer; position: relative; overflow: hidden; text-align: left;
  display: block; width: 100%; box-shadow: var(--shadow-1); transition: box-shadow .12s, transform .12s;
}
.kpi:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
/* A tile that leads nowhere. The cursor and the hover lift are what say "clickable",
   and they are keyed on the class, so a display-only tile has to opt out of both
   rather than simply being rendered as a different element. */
.kpi.static { cursor: default; }
.kpi.static:hover { box-shadow: var(--shadow-1); transform: none; }
.kpi::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--neutral); }
.kpi.t-red::after    { background: var(--critical); }
.kpi.t-amber::after  { background: var(--warning); }
.kpi.t-green::after  { background: var(--good); }
.kpi.t-info::after   { background: var(--info); }
.kpi.t-neutral::after{ background: var(--baseline); }
.kpi .lbl { font-size: 11px; color: var(--text-secondary); font-weight: 550; line-height: 1.3; min-height: 2.6em; }
.kpi .val { font-size: 23px; font-weight: 680; letter-spacing: -.03em; margin-top: 3px; line-height: 1.1; }
.kpi .sub { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════ TABLE */
.tbl-wrap { overflow: auto; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
table.tbl th {
  text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); background: var(--surface-2); padding: 8px 10px; white-space: nowrap;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 2;
}
table.tbl th.sortable { cursor: pointer; user-select: none; }
table.tbl th.sortable:hover { color: var(--text-primary); }
table.tbl th .arr { opacity: .45; margin-left: 3px; }
table.tbl th.on .arr { opacity: 1; color: var(--info-text); }
table.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--gridline); vertical-align: middle; }
table.tbl tbody tr:hover td { background: #fafaf8; }
table.tbl tbody tr.clickable { cursor: pointer; }
table.tbl tbody tr.sel td { background: #eef5fe; }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl .id-link { font-weight: 600; color: var(--info-text); cursor: pointer; }
table.tbl .id-link:hover { text-decoration: underline; }
table.tbl.dense td { padding: 5px 9px; }
.tbl-foot {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-secondary); flex-wrap: wrap;
}
.tbl-foot .pager { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.filters {
  display: flex; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border);
  flex-wrap: wrap; align-items: center; background: var(--surface-1);
}
.empty { padding: 40px 20px; text-align: center; color: var(--text-muted); }
.empty h4 { font-size: 14px; color: var(--text-secondary); margin-bottom: 4px; }

/* ═══════════════════════════════════════════════════════════ FORMS */
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > label { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.field > label .req { color: var(--critical-text); margin-left: 2px; }
.field .hint { font-size: 11px; color: var(--text-muted); }
.field .err { font-size: 11px; color: var(--critical-text); font-weight: 550; }
.inp, select.inp, textarea.inp {
  width: 100%; padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: var(--r);
  background: var(--surface-1); font-size: 12.5px; min-height: 32px;
}
.inp:focus { border-color: var(--series-1); outline: none; box-shadow: 0 0 0 3px #cde2fb80; }
.inp:disabled, .inp[readonly] { background: var(--surface-2); color: var(--text-secondary); }
textarea.inp { min-height: 74px; resize: vertical; line-height: 1.45; }
select.inp { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23898781' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; padding-right: 26px; }
.field.invalid .inp { border-color: var(--critical); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }
.form-sec { margin-top: 4px; }
.form-sec > h4 {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
  padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 12px;
}
.check { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; cursor: pointer; }
.check input { margin-top: 2px; accent-color: var(--sidebar); width: 15px; height: 15px; }
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--r); overflow: hidden; }
.seg button {
  padding: 5px 11px; border: 0; background: var(--surface-1); cursor: pointer; font-size: 12px;
  border-left: 1px solid var(--border); color: var(--text-secondary);
}
.seg button:first-child { border-left: 0; }
.seg button.on { background: var(--sidebar); color: #fff; font-weight: 600; }
.seg.status button.on.ok    { background: var(--good-text); }
.seg.status button.on.bad   { background: var(--critical-text); }
.seg.status button.on.warn  { background: var(--warning-text); }
.seg.status button.on.na    { background: var(--neutral); }

/* ═══════════════════════════════════════════════════════════ DRAWER / MODAL */
.scrim { position: fixed; inset: 0; background: rgba(11,11,11,.42); z-index: 100; animation: fade .14s ease; }
@keyframes fade { from { opacity: 0; } }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100%); background: var(--surface-1);
  z-index: 101; display: flex; flex-direction: column; box-shadow: var(--shadow-3); animation: slidein .18s ease;
}
.drawer.wide { width: min(1080px, 100%); }
.drawer.narrow { width: min(520px, 100%); }
@keyframes slidein { from { transform: translateX(24px); opacity: .4; } }
.drawer-hd { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.drawer-hd h3 { font-size: 15px; }
.drawer-hd .sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.drawer-hd .x { margin-left: auto; }
.drawer-bd { flex: 1 1 auto; overflow-y: auto; padding: 16px; }
.drawer-ft { padding: 11px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; background: var(--surface-2); flex-wrap: wrap; }
.modal {
  position: fixed; z-index: 101; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(620px, calc(100% - 24px)); max-height: calc(100vh - 48px); background: var(--surface-1);
  border-radius: var(--r-xl); box-shadow: var(--shadow-3); display: flex; flex-direction: column; animation: pop .16s ease;
}
.modal.wide { width: min(940px, calc(100% - 24px)); }
@keyframes pop { from { transform: translate(-50%, -46%) scale(.98); opacity: 0; } }

/* ═══════════════════════════════════════════════════════════ TABS */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs button {
  padding: 8px 12px; border: 0; background: none; cursor: pointer; font-size: 12.5px; font-weight: 550;
  color: var(--text-secondary); border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs button:hover { color: var(--text-primary); }
.tabs button.on { color: var(--text-primary); border-bottom-color: var(--brand); font-weight: 650; }
.tabs button .cnt { font-size: 10.5px; background: var(--surface-3); border-radius: 10px; padding: 0 5px; margin-left: 4px; }

/* ═══════════════════════════════════════════════════════════ TIMELINE */
.timeline { position: relative; padding-left: 20px; }
.timeline::before { content: ''; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 1px; background: var(--gridline); }
.tl-item { position: relative; padding-bottom: 13px; font-size: 12.5px; }
.tl-item::before {
  content: ''; position: absolute; left: -18px; top: 4px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface-1); border: 2px solid var(--baseline);
}
.tl-item.ok::before { border-color: var(--good); }
.tl-item.bad::before { border-color: var(--critical); }
.tl-item.warn::before { border-color: var(--warning); }
.tl-item.info::before { border-color: var(--info); }
.tl-item b { font-weight: 600; }
.tl-item .when { font-size: 11px; color: var(--text-muted); }
.tl-item .body { color: var(--text-secondary); margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════ CHARTS */
/* An SVG with a viewBox and no width attribute resolves its min-content size to
   the intrinsic viewBox width, which pushes grid items past the viewport on a
   phone. Pinning max-width and letting the height follow the ratio fixes it. */
.chart { width: 100%; max-width: 100%; height: auto; display: block; overflow: visible; }
.grid > *, .row > *, .col > *, .card, .card-hd, .card-bd, .main, .content { min-width: 0; }
.tbl-wrap, .gantt, .kanban { max-width: 100%; }
.chart text { font-family: var(--font); }
.chart .ax { font-size: 10px; fill: var(--text-muted); }
.chart .grid { stroke: var(--gridline); stroke-width: 1; shape-rendering: crispEdges; }
.chart .base { stroke: var(--baseline); stroke-width: 1; shape-rendering: crispEdges; }
.chart .lbl { font-size: 10.5px; fill: var(--text-secondary); font-weight: 600; }
.chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .mk { stroke: var(--surface-1); stroke-width: 2; }
.chart .hit { fill: transparent; cursor: pointer; }
.chart .hit:hover + .hl, .chart .hit:focus + .hl { opacity: 1; }
.chart .hl { opacity: 0; pointer-events: none; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-secondary); margin-top: 8px; }
.legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: -1px; }
.chart-tip {
  position: fixed; z-index: 200; background: #101418; color: #fff; font-size: 11.5px; line-height: 1.4;
  padding: 6px 9px; border-radius: var(--r); pointer-events: none; box-shadow: var(--shadow-2); max-width: 250px;
}
.chart-tip b { display: block; font-size: 12px; margin-bottom: 2px; }
.chart-tip .r { display: flex; gap: 8px; justify-content: space-between; }
.chart-tip .r i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 5px; }
.chart-empty { padding: 28px; text-align: center; color: var(--text-muted); font-size: 12px; }

/* progress bars */
.pbar { height: 7px; background: var(--surface-3); border-radius: 5px; overflow: hidden; min-width: 60px; }
.pbar i { display: block; height: 100%; border-radius: 5px; background: var(--series-1); }
.pbar.good i { background: var(--good); }
.pbar.warn i { background: var(--warning); }
.pbar.bad i { background: var(--critical); }

/* ═══════════════════════════════════════════════════════════ GANTT */
.gantt { overflow-x: auto; overflow-y: visible; border: 1px solid var(--border); border-radius: var(--r); }
/* The timeline needs real width to be readable — the wrapper scrolls sideways
   rather than letting the task column squeeze the bars to nothing. */
.gantt table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1180px; font-size: 12px; table-layout: fixed; }
.gantt col.tcol { width: 280px; }
.gantt th { position: sticky; top: 0; background: var(--surface-2); z-index: 3; border-bottom: 1px solid var(--border); padding: 6px 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
.gantt td { border-bottom: 1px solid var(--gridline); padding: 0; }
.gantt .tname { padding: 6px 9px; white-space: nowrap; position: sticky; left: 0; background: var(--surface-1); z-index: 2; border-right: 1px solid var(--border); min-width: 230px; }
.gantt th.tname { z-index: 4; background: var(--surface-2); }
.gantt .lane { position: relative; height: 30px; }
.gantt .lane .wk { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--gridline); }
.gantt .bar { position: absolute; top: 7px; height: 15px; border-radius: 4px; background: var(--seq-3); cursor: pointer; }
.gantt .bar.done { background: var(--good); }
.gantt .bar.prog { background: var(--series-1); }
.gantt .bar.late { background: var(--critical); }
.gantt .bar.block { background: var(--warning); }
.gantt .bar.ns { background: var(--baseline); }
.gantt .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,.42); border-radius: 4px 0 0 4px; }
.gantt .today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--brand); opacity: .8; }

/* ═══════════════════════════════════════════════════════════ CALENDAR */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--gridline); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.cal .dow { background: var(--surface-2); padding: 6px; text-align: center; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 600; }
.cal .day { background: var(--surface-1); min-height: 96px; padding: 5px 5px 6px; }
.cal .day.off { background: var(--surface-2); }
.cal .day.today { box-shadow: inset 0 0 0 2px var(--series-1); }
.cal .dn { font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-bottom: 3px; }
.cal .ev {
  font-size: 10.5px; padding: 2px 5px; border-radius: 4px; margin-bottom: 2px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid;
}
.cal .ev.GREEN { background: #e6f6e6; border-color: var(--good); color: var(--good-text); }
.cal .ev.BLUE  { background: #e8f1fd; border-color: var(--info); color: var(--info-text); }
.cal .ev.AMBER { background: #fdf3dd; border-color: var(--warning); color: var(--warning-text); }
.cal .ev.RED   { background: #fbeaea; border-color: var(--critical); color: var(--critical-text); }
.cal .ev.GREY  { background: #f0efec; border-color: var(--baseline); color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════ KANBAN */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.kcol { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 8px; min-height: 140px; }
.kcol > h5 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 7px; display: flex; }
.kcol > h5 .n { margin-left: auto; background: var(--surface-3); border-radius: 10px; padding: 0 6px; }
.kcard { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r); padding: 8px 9px; margin-bottom: 7px; cursor: pointer; box-shadow: var(--shadow-1); }
.kcard:hover { box-shadow: var(--shadow-2); }
.kcard b { font-size: 12px; display: block; }
.kcard .m { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════ MISC */
.toast-wrap { position: fixed; right: 16px; bottom: 16px; z-index: 300; display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.toast {
  background: var(--sidebar); color: #fff; padding: 10px 13px; border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); font-size: 12.5px; display: flex; gap: 9px; align-items: flex-start; animation: pop .16s ease;
}
.toast.ok { background: #10361a; border-left: 3px solid var(--good); }
.toast.err { background: #3a1414; border-left: 3px solid var(--critical); }
.toast .x { margin-left: auto; cursor: pointer; opacity: .6; background: none; border: 0; color: #fff; }

.banner {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 13px; border-radius: var(--r-lg);
  font-size: 12.5px; border: 1px solid; margin-bottom: 12px;
}
.banner .g { font-size: 13px; line-height: 1.2; }
.banner.red { background: #fbeaea; border-color: #f3cccc; color: var(--critical-text); }
.banner.amber { background: #fdf3dd; border-color: #f7e3b0; color: var(--warning-text); }
.banner.blue { background: #e8f1fd; border-color: #cde2fb; color: var(--info-text); }
.banner.green { background: #e6f6e6; border-color: #c8ebc8; color: var(--good-text); }
.banner.grey { background: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
.banner b { font-weight: 650; }

.rule-note {
  font-size: 11px; color: var(--text-muted); border-left: 2px solid var(--baseline);
  padding-left: 8px; margin-top: 6px; line-height: 1.4;
}

.evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.ev-tile {
  aspect-ratio: 1; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 10px; color: var(--text-muted); text-align: center; padding: 5px; overflow: hidden;
}
.ev-tile .g { font-size: 19px; }
.ev-tile.add { cursor: pointer; border-style: dashed; }
.ev-tile.add:hover { background: var(--surface-3); }

.q-item { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 11px 12px; margin-bottom: 9px; background: var(--surface-1); }
.q-item.answered { border-left: 3px solid var(--good); }
.q-item.failed { border-left: 3px solid var(--critical); }
.q-item.pending { border-left: 3px solid var(--baseline); }
.q-head { display: flex; gap: 9px; align-items: flex-start; }
.q-head .qn { font-size: 11px; color: var(--text-muted); font-weight: 700; min-width: 22px; }
.q-head .qt { font-size: 13px; font-weight: 550; flex: 1 1 auto; }
.q-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.q-body { margin-top: 9px; display: grid; gap: 8px; }

.login-wrap.single { grid-template-columns: minmax(0, 34rem); justify-content: center; }
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-1); }
.login-hero { background: var(--sidebar); color: #fff; padding: 44px; display: flex; flex-direction: column; justify-content: center; }
.login-hero h1 { font-size: 28px; line-height: 1.15; margin-bottom: 12px; }
.login-hero p { color: var(--sidebar-ink); font-size: 14px; max-width: 420px; }
.login-hero .feat { margin-top: 26px; display: grid; gap: 9px; }
.login-hero .feat div { display: flex; gap: 9px; font-size: 13px; color: var(--sidebar-ink); align-items: flex-start; }
.login-hero .feat b { color: #fff; font-weight: 600; }
.login-form { padding: 44px; display: flex; flex-direction: column; justify-content: center; max-width: 560px; margin: 0 auto; width: 100%; }
.login-form h2 { font-size: 21px; margin-bottom: 4px; }
.demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 7px; margin-top: 10px; max-height: 300px; overflow-y: auto; padding-right: 4px; }
.demo-card { border: 1px solid var(--border); border-radius: var(--r); padding: 7px 9px; cursor: pointer; background: var(--surface-1); text-align: left; }
.demo-card:hover { border-color: var(--series-1); background: #f8fbff; }
.demo-card b { display: block; font-size: 11.5px; font-weight: 650; }
.demo-card span { display: block; font-size: 10.5px; color: var(--text-muted); }

.cmdk { position: fixed; z-index: 200; top: 12vh; left: 50%; transform: translateX(-50%); width: min(660px, calc(100% - 24px)); background: var(--surface-1); border-radius: var(--r-xl); box-shadow: var(--shadow-3); overflow: hidden; }
.cmdk input { width: 100%; border: 0; border-bottom: 1px solid var(--border); padding: 14px 16px; font-size: 15px; outline: none; }
.cmdk .res { max-height: 58vh; overflow-y: auto; padding: 6px; }
.cmdk .grp { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); padding: 8px 10px 4px; font-weight: 650; }
.cmdk .item { padding: 7px 10px; border-radius: var(--r); cursor: pointer; display: flex; gap: 9px; align-items: center; }
.cmdk .item:hover, .cmdk .item.on { background: var(--surface-2); }
.cmdk .item b { font-size: 12.5px; font-weight: 600; }
.cmdk .item span { font-size: 11.5px; color: var(--text-muted); }

.spinner { width: 15px; height: 15px; border: 2px solid var(--border-strong); border-top-color: var(--sidebar); border-radius: 50%; animation: spin .6s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { padding: 36px; text-align: center; color: var(--text-muted); font-size: 12.5px; }
.skel { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; border-radius: var(--r); }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── the sidebar on a desktop screen
   It stays open. The menu used to collapse to a 58px icon rail and expand over the
   content when you pressed ☰, closing again on the next click — so reaching a second
   screen meant opening it a second time, and the labels were only ever visible while
   the mouse was busy. Fifty-one items behind a control you have to hold open is a
   filing cabinet you can only keep open with your foot.
   The base rules already lay the shell out as a fixed 248px column with the content
   beside it, so this block only has to stop overriding them. The hamburger stays
   hidden here and keeps its job below 1000px, where an off-canvas drawer is right. */

/* ═══════════════════════════════════════════════════════════ RESPONSIVE */
@media (max-width: 1180px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: 272px; transform: translateX(-100%);
    transition: transform .2s ease; height: 100dvh;
  }
  body.nav-open .sidebar { transform: none; box-shadow: var(--shadow-3); }
  body.nav-open::after { content: ''; position: fixed; inset: 0; background: rgba(11,11,11,.45); z-index: 39; }
  .tb-icon.tb-menu { display: grid; }
  .tb-search { min-width: 0; width: 36px; padding: 5px; justify-content: center; }
  .tb-search span, .tb-search kbd { display: none; }
  .g3, .g2 { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
.login-wrap { grid-template-columns: 1fr; }
  .login-hero { padding: 28px; }
  .login-form { padding: 28px; }
}
@media (max-width: 720px) {
  .content { padding: 12px; }
  .form-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { margin-top: 7px; }
  .drawer, .drawer.wide, .drawer.narrow { width: 100%; }
  .tb-user .who { display: none; }
  .page-head h1 { font-size: 17px; }
  table.tbl th, table.tbl td { padding: 7px 8px; }
  .modal { width: calc(100% - 16px); }
}

/* ═══════════════════════════════════════════════════════════ PRINT */
@media print {
  .sidebar, .topbar, .page-head .actions, .filters, .tbl-foot, .drawer-ft, .toast-wrap { display: none !important; }
  .shell { grid-template-columns: 1fr; }
  body { background: #fff; font-size: 11px; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  .content { padding: 0; }
  table.tbl th { background: #eee !important; }
  .print-head { display: block !important; margin-bottom: 12px; }
  a { color: inherit; text-decoration: none; }
}
.print-head { display: none; }

/* ═════════════════════════════════════════════ PERMISSION GRID (role designer)
   A subject × action matrix is only usable when the operator can always see
   which row and which column a checkbox belongs to, so the header row and the
   subject column both stay pinned while the wrapper scrolls sideways. */
.permgrid { overflow: auto; max-height: 68vh; -webkit-overflow-scrolling: touch; }
.permgrid table.tbl { font-size: 12px; width: auto; min-width: 100%; }
.permgrid table.tbl th, .permgrid table.tbl td { padding: 4px 8px; }
.permgrid th.cell, .permgrid td.cell { text-align: center; }
.permgrid th.subj, .permgrid td.subj {
  position: sticky; left: 0; z-index: 1; white-space: nowrap; font-weight: 600;
  background: var(--surface-1); border-right: 1px solid var(--border);
}
.permgrid thead th.subj { z-index: 3; background: var(--surface-2); }
.permgrid tbody tr:hover td, .permgrid tbody tr:hover td.subj { background: #fafaf8; }
.permgrid input[type=checkbox] {
  width: 15px; height: 15px; margin: 0; vertical-align: middle;
  accent-color: var(--sidebar); cursor: pointer;
}
.permgrid .colhd {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap;
}
.permgrid .colhd:hover { color: var(--text-primary); text-decoration: underline; }

.permbar {
  position: sticky; bottom: 0; z-index: 15; margin-top: 12px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}

/* ─────────────────────────────────────────── Super Admin access designer */

/* Two big choices ("a role" / "one person") rendered as pickable cards rather
   than a radio pair, because the difference between them matters. */
.pickcard {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface-1); cursor: pointer; font: inherit; width: 100%;
}
.pickcard:hover { border-color: var(--border-strong); }
.pickcard.on { border-color: var(--series-1); box-shadow: 0 0 0 2px #cde2fb80; background: #f6faff; }
.pickcard b { font-size: 13px; }

.picklist {
  max-height: 320px; overflow: auto; border: 1px solid var(--border);
  border-radius: var(--r); background: var(--surface-1);
}
.pickrow {
  display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px;
  border-bottom: 1px solid var(--gridline); font-size: 12.5px; cursor: pointer;
}
.pickrow:last-child { border-bottom: 0; }
.pickrow:hover { background: var(--surface-2); }
.pickrow.on { background: #f6faff; }
.pickrow input[type=checkbox] { margin-top: 2px; width: 14px; height: 14px; accent-color: var(--series-1); }
.pickrow .grow b { font-weight: 600; }

/* A horizontal row of resource-type switches above the picker. */
.chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chiprow > button.chip {
  cursor: pointer; font: inherit; font-size: 11.5px; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface-1);
  color: var(--text-secondary);
}
.chiprow > button.chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.chiprow > button.chip.on {
  background: var(--sidebar); border-color: var(--sidebar); color: #fff;
}

@media (max-width: 720px) {
  .picklist { max-height: 240px; }
}

/* ─── Photos & documents (components/photos.js) ─────────────────────────── */
.photo-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.photo-thumb {
  width: 84px; height: 84px; padding: 0; border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; background: var(--surface-2); display: grid; place-items: center; cursor: pointer;
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumb:hover { border-color: var(--info-text); }
.doc-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 260px; padding: 5px 9px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface-1);
  font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.std-name { padding: 7px 10px; border: 1px dashed var(--border); border-radius: 6px; background: var(--surface-2); }
.calc-total { padding: 7px 10px; border-radius: 6px; background: var(--surface-2); font-size: 15px; }

/* ─── Ticket work progress (modules/ticketwork.js) ──────────────────────── */
.progress-log { display: flex; flex-direction: column; gap: 10px; }
.progress-entry { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }

/* ─── Vendor KYC documents ──────────────────────────────────────────────── */
.kyc-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.kyc-row { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.kyc-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ─── Notice Board (modules/notices.js) ─────────────────────────────────── */
.notice-list { display: flex; flex-direction: column; gap: 10px; }
.notice {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start;
  border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--surface-1);
}
.notice.pinned { border-color: var(--warning-text, #b45309); box-shadow: inset 3px 0 0 var(--warning-text, #b45309); }
.notice.archived { opacity: .65; }
.notice-icon { font-size: 24px; line-height: 1; text-align: center; padding-top: 2px; }
.notice-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.notice-title { margin: 2px 0 6px; font-size: 15px; }
.notice-body { white-space: pre-wrap; font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
.notice-actions { display: flex; flex-direction: column; gap: 5px; }
@media (max-width: 700px) {
  .notice { grid-template-columns: 28px minmax(0, 1fr); }
  .notice-actions { grid-column: 1 / -1; flex-direction: row; }
}

/* Evidence tiles open the viewer (components/photos.js viewEvidence). */
button.ev-tile { cursor: pointer; font: inherit; color: inherit; }
button.ev-tile:hover { border-color: var(--info-text); }
.evidence-view { min-height: 120px; display: grid; place-items: center; }