/* ============================================================
   REPLICA BIM — Zoho Projects-style design system
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/Inter-latin.woff2') format('woff2');
}

:root {
  /* Zoho palette — white sidebar (Zoho Books style) */
  --nav-bg: #FFFFFF;
  --nav-bg-hover: #F2F5F9;
  --nav-active: var(--brand-primary-light);
  --nav-text: #43536E;
  --nav-text-dim: #93A1B7;
  --nav-white: #16294A;

  /* ---- brand (Phase 4) ----
     Single source of truth for the purple identity. The --blue-* names are
     kept as aliases so every existing rule repoints at once; new code should
     use --brand-* directly. */
  --brand-primary:        #6D28D9;
  --brand-primary-hover:  #5B21B6;
  --brand-primary-active: #4C1D95;
  --brand-primary-light:  #EDE9FE;
  --brand-primary-muted:  #F5F3FF;
  --brand-primary-border: #DDD6FE;
  --brand-on-light:       #5B21B6;   /* purple text on a light purple ground */
  --brand-focus-ring:     rgba(109, 40, 217, 0.18);

  /* legacy aliases — do not add new uses */
  --blue: var(--brand-primary);
  --blue-dark: var(--brand-primary-hover);
  --blue-soft: var(--brand-primary-light);
  --blue-border: var(--brand-primary-border);
  --link: var(--brand-primary);

  --bg: #F4F5F7;
  --panel: #FFFFFF;
  --border: #E3E8EF;
  --border-soft: #EDF0F5;
  --text: #23324D;
  --text-2: #64748C;
  --text-3: #93A1B7;

  --green: #3DA755;  --green-soft: #E7F6EB;
  --teal: #26B8A5;   --teal-soft: #E4F7F4;
  --amber: #F0A32F;  --amber-soft: #FDF3E0;
  --orange: #F2833B; --orange-soft: #FDEFE4;
  --red: #E5484D;    --red-soft: #FDEBEC;
  --purple: #4F46E5; --purple-soft: #E8E7FC;   /* categorical, deliberately not the brand purple */
  --cyan: #1CA5EC;   --cyan-soft: #E5F5FD;
  --gray-pill: #8B99AF;
  --tan: #B99B71;

  --shadow-1: 0 1px 2px rgba(16, 30, 54, 0.06);
  --shadow-2: 0 4px 14px rgba(16, 30, 54, 0.10);
  --shadow-3: 0 12px 40px rgba(16, 30, 54, 0.18);

  --radius: 6px;
  --sidebar-w: 236px;
  --rail-w: 46px;
  --topbar-h: 48px;
  --tabbar-h: 42px;
  --font: 'Inter', 'Segoe UI', -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--text); }
a { color: var(--link); text-decoration: none; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #C7D0DD; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ============ APP LAYOUT ============ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
}

/* ============ SIDEBAR ============ */
.sidebar {
  background: var(--nav-bg);
  color: var(--nav-text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
}
.side-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 12px;
  flex-shrink: 0;
}
.side-logo .logo-mark {
  width: 30px; height: 30px; border-radius: 7px;
  background: linear-gradient(135deg, #2D8CFF 0%, var(--brand-primary) 55%, #7C5CE0 100%);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: #fff;
  box-shadow: 0 2px 8px rgba(29, 106, 229, 0.45);
}
.side-logo .logo-name { color: var(--nav-white); font-size: 15px; font-weight: 700; letter-spacing: 0.1px; }
.side-logo .logo-sub { display: block; font-size: 9.5px; color: var(--nav-text-dim); font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; }

.side-scroll { flex: 1; overflow-y: auto; padding-bottom: 14px; }
.side-scroll::-webkit-scrollbar-thumb { background: #C7D0DD; background-clip: content-box; border: 2px solid transparent; }

/* ---- sidebar search (Zoho Books style) ---- */
.side-search { padding: 2px 14px 10px; }
.side-search .sbox {
  display: flex; align-items: center; gap: 8px;
  background: #F3F5F8;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.side-search .sbox:focus-within {
  border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 3px rgba(29, 106, 229, 0.10);
}
.side-search input {
  background: none; border: none; outline: none;
  color: var(--text); font-size: 12px; flex: 1; min-width: 0;
  font-family: var(--font);
}
.side-search input::placeholder { color: var(--nav-text-dim); }
.side-search .sbox svg { width: 13px; height: 13px; color: var(--nav-text-dim); flex-shrink: 0; }

/* ---- category groups (accordion) ---- */
.side-group { margin: 1px 0; }
.side-group-h {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 9px 16px;
  color: var(--nav-text);
  font-size: 12.5px; font-weight: 600;
  text-align: left;
  border-left: 3px solid transparent;
  transition: background 0.15s, color 0.15s;
}
.side-group-h:hover { background: var(--nav-bg-hover); color: var(--nav-white); }
.side-group-h .ico { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.9; }
.side-group-h .chev {
  margin-left: auto; width: 13px; height: 13px; flex-shrink: 0;
  display: inline-flex; opacity: 0.55;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.side-group.open > .side-group-h { color: var(--nav-white); }
.side-group.open > .side-group-h .chev { transform: rotate(180deg); }
.side-group.has-active > .side-group-h { color: var(--nav-white); }
.side-group.has-active > .side-group-h .ico { color: var(--blue); opacity: 1; }

/* smooth Zoho-style expand/collapse */
.side-group-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}
.side-group.open > .side-group-body { grid-template-rows: 1fr; }
.side-group-body > .sgb-in { overflow: hidden; min-height: 0; }
.side-group-body .sgb-pad { padding: 2px 0 6px; }

.side-sub {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 7px 16px 7px 45px;
  color: #5F7194;
  font-size: 12px; font-weight: 500;
  border-left: 3px solid transparent;
  text-align: left;
  position: relative;
  transition: background 0.15s, color 0.15s;
}
.side-sub::before {
  content: '';
  position: absolute; left: 27px; top: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: 0.4;
  transform: translateY(-50%);
  transition: opacity 0.15s, background 0.15s;
}
.side-sub:hover { background: var(--nav-bg-hover); color: var(--nav-white); }
.side-sub.active {
  background: var(--nav-active);
  color: var(--blue);
  border-left-color: var(--blue);
  font-weight: 600;
}
.side-sub.active::before { background: var(--blue); opacity: 1; }
.side-sub .count {
  margin-left: auto; font-size: 10.5px; font-weight: 700;
  background: #EEF1F6; color: #5A6B87;
  padding: 1px 7px; border-radius: 9px;
}
.side-sub.active .count { background: #D9E7FE; color: var(--blue); }
.side-sub.hidden-by-search, .side-group.hidden-by-search, .side-item.hidden-by-search { display: none; }

.side-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 8px 16px;
  color: var(--nav-text);
  font-size: 12.5px; font-weight: 500;
  border-left: 3px solid transparent;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.side-item:hover { background: var(--nav-bg-hover); color: var(--nav-white); }
.side-item.active {
  background: var(--nav-active);
  color: var(--blue);
  border-left-color: var(--blue);
}
.side-item .ico { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.9; }
.side-item .count {
  margin-left: auto; font-size: 10.5px; font-weight: 700;
  background: #EEF1F6; color: #5A6B87;
  padding: 1px 7px; border-radius: 9px;
}
.side-section {
  padding: 16px 16px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.9px;
  color: var(--nav-text-dim); text-transform: uppercase;
  display: flex; align-items: center; justify-content: space-between;
}
.side-proj {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 6px 16px 6px 19px;
  color: var(--nav-text); font-size: 12px; text-align: left;
}
.side-proj:hover { color: var(--nav-white); background: var(--nav-bg-hover); }
.side-proj.active { color: var(--blue); font-weight: 600; }
.side-proj .dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.side-proj .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.side-user {
  flex-shrink: 0;
  border-top: 1px solid var(--border-soft);
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
  transition: background 0.15s;
}
.side-user:hover { background: var(--nav-bg-hover); }
.side-user .who { min-width: 0; text-align: left; }
.side-user .who b { display: block; color: var(--nav-white); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user .who span { font-size: 10.5px; color: var(--nav-text-dim); }

/* ============ MAIN ============ */
.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; }

/* Top bar row 1 */
.topbar {
  height: var(--topbar-h);
  background: var(--panel);
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center;
  padding: 0 12px 0 18px;
  gap: 10px;
  flex-shrink: 0;
}
.topbar .crumb { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar .crumb .pid { color: var(--text-2); font-weight: 600; font-size: 13px; }
.topbar .crumb h1 { font-size: 15.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .crumb .info-i {
  width: 17px; height: 17px; border-radius: 50%;
  border: 1.4px solid var(--text-3); color: var(--text-3);
  font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.top-icons { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.icon-btn {
  width: 32px; height: 32px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #5A6B87; position: relative;
  transition: background 0.15s;
}
.icon-btn:hover { background: #EEF1F6; color: var(--text); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn .bdg {
  position: absolute; top: 2px; right: 2px;
  min-width: 15px; height: 15px; padding: 0 4px;
  background: var(--red); color: #fff;
  font-size: 9px; font-weight: 700;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
.icon-btn.primary-sq {
  background: var(--blue-soft); color: var(--blue);
}
.icon-btn.primary-sq:hover { background: #DBE9FF; }

/* Tab bar row 2 */
.tabbar {
  height: var(--tabbar-h);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 2px;
  padding: 0 10px;
  flex-shrink: 0;
  overflow-x: auto;
}
.tabbar::-webkit-scrollbar { display: none; }
.tab {
  padding: 0 13px;
  height: 100%;
  display: inline-flex; align-items: center;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  border-bottom: 2.5px solid transparent;
  white-space: nowrap;
  transition: color 0.15s;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--blue); }

/* Content area + right rail */
.content-wrap { flex: 1; display: flex; min-height: 0; }
.content { flex: 1; overflow-y: auto; min-width: 0; }
.rail {
  width: var(--rail-w);
  background: var(--panel);
  border-left: 1px solid var(--border-soft);
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 0; gap: 4px;
  flex-shrink: 0;
}
.rail .icon-btn { color: #8A98AE; }
.rail .divider { width: 22px; height: 1px; background: var(--border); margin: 6px 0; }

/* ============ TOOLBAR ============ */
.toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  flex-wrap: wrap;
}
/* The page's scope, as a HEADING rather than a control.

   This used to be `.scope`: link-blue, 700 weight, with a chevron beside it.
   It read as a dropdown and behaved as a <span> — there was no scope switcher
   anywhere in the application, and no listener on any of the nine places it
   appeared. Link colour on something that is not a link is a promise the page
   cannot keep, so it is now plainly a label. */
.toolbar .scope-label {
  display: inline-flex; align-items: center;
  color: var(--text); font-size: 14px; font-weight: 700;
}
.toolbar .spacer { flex: 1; }
.view-switch {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel); overflow: hidden;
}
.view-switch button {
  padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 6px;
  border-right: 1px solid var(--border-soft);
}
.view-switch button:last-child { border-right: none; }
.view-switch button svg { width: 14px; height: 14px; }
.view-switch button:hover { background: #F6F8FB; }
.view-switch button.active { color: var(--blue); background: var(--blue-soft); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--border);
  background: var(--panel); color: var(--text);
  transition: background 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.btn:hover { background: #F6F8FB; }
.btn svg { width: 14px; height: 14px; }
.btn.primary {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 1px 3px rgba(109, 40, 217, 0.30);
}
.btn.primary:hover { background: var(--blue-dark); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.success { background: var(--green); border-color: var(--green); color: #fff; }
.btn.ghost { border-color: transparent; color: var(--link); }
.btn.ghost:hover { background: var(--blue-soft); }
.btn.sm { padding: 4px 10px; font-size: 11.5px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.split-btn { display: inline-flex; }
.split-btn .btn.primary { border-radius: 6px 0 0 6px; }
.split-btn .caret {
  background: var(--blue); color: #fff;
  border: 1px solid var(--blue); border-left-color: rgba(255,255,255,0.35);
  border-radius: 0 6px 6px 0;
  padding: 7px 8px; display: inline-flex; align-items: center;
}
.split-btn .caret:hover { background: var(--blue-dark); }
.split-btn .caret svg { width: 12px; height: 12px; }

/* ============ PAGE SECTIONS ============ */
.page { padding: 0 18px 30px; }
.page-pad { padding-top: 14px; }
.section-title {
  font-size: 13.5px; font-weight: 700; color: var(--text);
  margin: 22px 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.section-title .sub { font-weight: 500; color: var(--text-3); font-size: 12px; }

/* ============ CARDS / STAT TILES ============ */
.cards { display: grid; gap: 12px; }
.cards.c4 { grid-template-columns: repeat(4, 1fr); }
.cards.c5 { grid-template-columns: repeat(5, 1fr); }
.cards.c6 { grid-template-columns: repeat(6, 1fr); }
.cards.c3 { grid-template-columns: repeat(3, 1fr); }
.cards.c2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  box-shadow: var(--shadow-1);
  padding: 14px 16px;
}
.stat .lbl { font-size: 11px; font-weight: 600; color: var(--text-2); letter-spacing: 0.2px; display: flex; align-items: center; gap: 6px; }
.stat .val { font-size: 22px; font-weight: 700; margin-top: 6px; letter-spacing: -0.3px; }
.stat .sub { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.stat .delta-up { color: var(--green); font-weight: 600; }
.stat .delta-down { color: var(--red); font-weight: 600; }
.stat.tone-red .val { color: var(--red); }
.stat.tone-green .val { color: var(--green); }
.stat.tone-amber .val { color: var(--amber); }
.stat.tone-blue .val { color: var(--blue); }
.stat.tone-purple .val { color: var(--purple); }

.panel-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.panel-h h3 { font-size: 13px; font-weight: 700; }
.panel-h .more { font-size: 11.5px; color: var(--link); font-weight: 600; }

/* ============ TABLE (Zoho style) ============ */
.tbl-wrap {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
  box-shadow: var(--shadow-1);
}
table.tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.tbl thead th {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-2);
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: #FAFBFC;
  text-align: left;
  white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
.tbl tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12.5px;
  vertical-align: middle;
  white-space: nowrap;
}
.tbl tbody tr { transition: background 0.12s; }
.tbl tbody tr:hover { background: #F7F9FC; }
.tbl tbody tr.clickable { cursor: pointer; }
.tbl .id-cell { color: var(--text-2); font-size: 11.5px; font-weight: 600; }
.tbl .main-cell { font-weight: 600; color: var(--text); }
.tbl .main-cell .sub { display: block; font-weight: 500; font-size: 11px; color: var(--text-3); margin-top: 1px; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tfoot td {
  padding: 9px 12px; font-size: 12px; color: var(--link); font-weight: 600;
  border-top: 1px solid var(--border-soft);
}
.tbl-group-row td {
  background: #F6F8FA !important;
  font-weight: 700; font-size: 12px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
}
.tbl-group-row .grp-ico { color: var(--text-3); margin-right: 6px; }

/* ============ PILLS / BADGES ============ */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 78px;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.2px;
  color: #fff;
  white-space: nowrap;
}
.pill.open        { background: var(--cyan); }
.pill.created     { background: var(--gray-pill); }
.pill.assigned    { background: #6C8CD5; }
.pill.accepted    { background: #48A9E6; }
.pill.inprogress  { background: var(--amber); }
.pill.submitted   { background: #9B78E8; }
.pill.underreview { background: var(--purple); }
.pill.revision    { background: var(--red); }
.pill.resubmitted { background: var(--teal); }
.pill.approved    { background: #59B76B; }
.pill.completed   { background: var(--green); }
.pill.blocked     { background: #5A6B87; }
.pill.onhold      { background: var(--orange); }
.pill.cancelled   { background: #9AA5B5; }
.pill.active      { background: #59B76B; }
.pill.planning    { background: #6C8CD5; }
.pill.atrisk      { background: var(--orange); }
.pill.delayed     { background: var(--red); }
.pill.archived    { background: var(--tan); }
.pill.deferred    { background: #F2C230; color: #6B5200; }
.pill.paid        { background: var(--green); }
.pill.sent        { background: var(--cyan); }
.pill.draft       { background: var(--gray-pill); }
.pill.partiallypaid { background: var(--amber); }
.pill.overdueinv  { background: var(--red); }
.pill.pending     { background: var(--amber); }
.pill.rejected    { background: var(--red); }

/* soft chips (deadline states etc.) */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2.5px 9px;
  border-radius: 20px;
  font-size: 10.5px; font-weight: 700;
  white-space: nowrap;
}
.chip .cdot { width: 6px; height: 6px; border-radius: 50%; }
.chip.green { background: var(--green-soft); color: #22753A; } .chip.green .cdot { background: var(--green); }
.chip.red { background: var(--red-soft); color: #B3282D; }     .chip.red .cdot { background: var(--red); }
.chip.amber { background: var(--amber-soft); color: #8F5F0D; } .chip.amber .cdot { background: var(--amber); }
.chip.orange { background: var(--orange-soft); color: #9A4A12; } .chip.orange .cdot { background: var(--orange); }
.chip.blue { background: var(--blue-soft); color: #1D5BBF; }   .chip.blue .cdot { background: var(--blue); }
.chip.purple { background: var(--purple-soft); color: #5B3EBC; } .chip.purple .cdot { background: var(--purple); }
.chip.teal { background: var(--teal-soft); color: #147A6D; }   .chip.teal .cdot { background: var(--teal); }
.chip.gray { background: #EEF1F5; color: var(--text-2); }      .chip.gray .cdot { background: var(--text-3); }

/* priority */
.prio { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 12px; }
.prio .bang { font-weight: 800; font-size: 13px; }
.prio.p-critical { color: #C1121F; } .prio.p-critical .bang { color: #C1121F; }
.prio.p-high { color: var(--red); } .prio.p-high .bang { color: var(--red); }
.prio.p-medium { color: var(--amber); } .prio.p-medium .bang { color: var(--amber); }
.prio.p-low { color: var(--text-3); } .prio.p-low .bang { color: var(--text-3); }

/* progress bar (Zoho green style) */
.prog { display: inline-flex; align-items: center; gap: 8px; min-width: 110px; }
.prog .bar { flex: 1; height: 14px; background: #EDF0F4; border-radius: 4px; overflow: hidden; position: relative; min-width: 64px; }
.prog .bar i {
  display: block; height: 100%;
  background: #6DC981;
  border-radius: 4px 0 0 4px;
  transition: width 0.4s ease;
}
.prog.warn .bar i { background: var(--amber); }
.prog.danger .bar i { background: var(--red); }
.prog .pv { font-size: 11px; font-weight: 700; color: var(--text-2); min-width: 32px; }

/* avatars */
.av {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  flex-shrink: 0;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px var(--border);
}
.av.lg { width: 40px; height: 40px; font-size: 14px; }
.av.sm { width: 21px; height: 21px; font-size: 8.5px; }
.av-name { display: inline-flex; align-items: center; gap: 8px; }
.av-name .nm { font-weight: 600; font-size: 12.5px; }
.av-name .role { display: block; font-size: 10.5px; color: var(--text-3); font-weight: 500; }
.av-stack { display: inline-flex; }
.av-stack .av { margin-left: -7px; }
.av-stack .av:first-child { margin-left: 0; }

/* ============ KANBAN ============ */
.kanban {
  display: flex; gap: 14px;
  padding: 4px 18px 24px;
  overflow-x: auto;
  align-items: flex-start;
}
.kcol {
  background: #F0F2F5;
  border-radius: 10px;
  min-width: 272px; width: 272px;
  padding: 10px;
  flex-shrink: 0;
}
.kcol-h { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px; }
.kcol-h .kpill {
  color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 11px; border-radius: 4px;
}
.kcol-h .kadd { color: var(--text-3); }
.kcol.drag-over { outline: 2px dashed var(--blue); outline-offset: -4px; background: #E9F1FE; }
.kcard {
  background: #fff; border-radius: 8px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-1);
  padding: 10px 12px;
  margin-bottom: 10px;
  cursor: grab;
  transition: box-shadow 0.15s, transform 0.15s;
}
.kcard:hover { box-shadow: var(--shadow-2); }
.kcard.dragging { opacity: 0.55; transform: rotate(1.5deg); }
.kcard .kid { font-size: 10.5px; font-weight: 700; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.kcard .kname { font-size: 12.5px; font-weight: 600; margin: 5px 0 7px; color: var(--text); line-height: 1.35; }
.kcard .klist { font-size: 11px; color: var(--text-2); display: flex; align-items: center; gap: 5px; margin-bottom: 8px; }
.kcard .klist svg { width: 12px; height: 12px; color: var(--text-3); }
.kcard .kfoot { display: flex; align-items: center; gap: 8px; }
.kcard .kdate { font-size: 10.5px; font-weight: 600; }
.kcard .kdate.late { color: var(--red); }
.kcard .kdate.ok { color: var(--text-3); }
.kcard .kfoot .right { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* ============ GANTT ============ */
.gantt-wrap {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
  box-shadow: var(--shadow-1);
}
.gantt {
  display: grid;
  grid-template-columns: 320px 1fr;
  min-width: 900px;
}
.gantt-left { border-right: 1px solid var(--border); }
.gantt-left .g-h {
  height: 52px; display: flex; align-items: flex-end;
  padding: 8px 14px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  background: #FAFBFC;
  position: sticky; top: 0;
}
.g-row {
  height: 40px; display: flex; align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px; gap: 8px;
  cursor: pointer;
}
.g-row:hover { background: #F7F9FC; }
.g-row .gid { color: var(--text-3); font-size: 10.5px; font-weight: 700; min-width: 66px; }
.g-row .gnm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-grp {
  height: 34px; display: flex; align-items: center;
  padding: 0 14px;
  background: #F6F8FA;
  border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 12px;
}
.gantt-right { position: relative; overflow: hidden; }
.g-months {
  display: flex; height: 52px;
  align-items: flex-end;
  border-bottom: 1px solid var(--border);
  background: #FAFBFC;
}
.g-months .g-mcell { height: 30px; }
.g-quarters { display: flex; height: 26px; border-bottom: 1px solid var(--border-soft); background: #FAFBFC; }
.g-qcell, .g-mcell {
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--text-2);
  border-right: 1px solid var(--border-soft);
  text-transform: uppercase; letter-spacing: 0.5px;
  flex-shrink: 0;
}
.g-body { position: relative; }
.g-lane {
  height: 40px;
  border-bottom: 1px solid var(--border-soft);
  position: relative;
}
.g-lane.grp { height: 34px; background: #F6F8FA; border-bottom: 1px solid var(--border); }
.g-grid-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border-soft); }
.g-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); opacity: 0.65; z-index: 3; }
.g-today::after {
  content: 'TODAY';
  position: absolute; top: 2px; left: 4px;
  font-size: 8px; font-weight: 800; color: var(--red); letter-spacing: 0.5px;
}
.g-bar {
  position: absolute; top: 10px; height: 20px;
  border-radius: 5px;
  cursor: pointer;
  display: flex; align-items: center;
  overflow: hidden;
  transition: filter 0.15s;
}
.g-bar:hover { filter: brightness(0.94); }
.g-bar .fill { height: 100%; border-radius: 5px 0 0 5px; }
.g-bar .glabel {
  position: absolute; left: 8px; top: 0; bottom: 0;
  display: flex; align-items: center;
  font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, 0.95);
  white-space: nowrap; pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

/* ============ CALENDAR ============ */
.cal-wrap { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-1); overflow: hidden; }
.cal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.cal-head .mon { font-size: 13.5px; font-weight: 700; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dow {
  padding: 7px 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--text-2); text-transform: uppercase;
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border-soft);
  background: #FAFBFC;
}
.cal-cell {
  min-height: 92px;
  min-width: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
  padding: 5px 6px;
  font-size: 11px;
}
.cal-ev { max-width: 100%; }
.cal-cell .dnum { font-weight: 600; color: var(--text-2); font-size: 11px; }
.cal-cell.dim { background: #FAFBFC; }
.cal-cell.today-cell { background: #F2F7FF; }
.cal-cell.today-cell .dnum { color: #fff; background: var(--blue); width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.cal-ev {
  display: block; margin-top: 3px;
  padding: 2px 7px; border-radius: 3px;
  font-size: 10.5px; font-weight: 600; color: #2B4E8C;
  background: #DCE9FC;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
  border-left: 3px solid var(--blue);
}
.cal-ev.done { text-decoration: line-through; opacity: 0.65; }
.cal-ev.red { background: #FBE3E4; color: #A02A2E; border-left-color: var(--red); }
.cal-ev.green { background: #E1F3E5; color: #1F6B33; border-left-color: var(--green); }
.cal-ev.more { background: none; color: var(--link); border: none; font-weight: 700; }

/* ============ FORMS ============ */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-2); margin-bottom: 5px; }
.field label .req { color: var(--red); }
.field input[type=text], .field input[type=number], .field input[type=date],
.field select, .field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
  background: #fff;
  transition: border 0.15s, box-shadow 0.15s;
}
.field textarea { min-height: 70px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(29, 106, 229, 0.12);
}
.field .hint { font-size: 10.5px; color: var(--text-3); margin-top: 4px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .span2 { grid-column: 1 / -1; }
.field.err input, .field.err select, .field.err textarea { border-color: var(--red); box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.12); }
.field .err-msg { color: var(--red); font-size: 11px; font-weight: 600; margin-top: 4px; }

/* ============ MODAL ============ */
.overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(15, 27, 50, 0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 7vh 20px 20px;
  animation: fadeIn 0.18s ease;
  overflow-y: auto;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: #fff; border-radius: 10px;
  width: 560px; max-width: 100%;
  box-shadow: var(--shadow-3);
  animation: popIn 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-h h3 { font-size: 14px; font-weight: 700; }
.modal-b { padding: 18px; max-height: 62vh; overflow-y: auto; }
.modal-f {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: #FAFBFC;
  border-radius: 0 0 10px 10px;
}

/* ============ DRAWER (task detail — Zoho right panel) ============ */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(15, 27, 50, 0.35);
  animation: fadeIn 0.18s ease;
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 85;
  width: 660px; max-width: 96vw;
  background: #fff;
  box-shadow: -12px 0 40px rgba(16, 30, 54, 0.22);
  display: flex; flex-direction: column;
  animation: slideIn 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes slideIn { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-h {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; gap: 12px;
}
.drawer-h .t-id { font-size: 11px; font-weight: 700; color: var(--text-3); }
.drawer-h h2 { font-size: 15.5px; font-weight: 700; line-height: 1.3; margin-top: 2px; }
.drawer-b { flex: 1; overflow-y: auto; padding: 16px 18px 30px; }
.drawer-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); padding: 0 18px; flex-shrink: 0; }
.drawer-tabs .tab { height: 38px; }

.meta-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 12px 18px;
  padding: 12px 0;
}
.meta-grid .mi .k { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); margin-bottom: 4px; }
.meta-grid .mi .v { font-size: 12.5px; font-weight: 600; }

/* activity timeline */
.timeline { position: relative; padding-left: 22px; margin-top: 6px; }
.timeline::before {
  content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border);
}
.tl-item { position: relative; padding: 0 0 16px; }
.tl-item::before {
  content: ''; position: absolute; left: -21px; top: 4px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #fff; border: 3px solid var(--blue);
}
.tl-item.warn::before { border-color: var(--red); }
.tl-item.good::before { border-color: var(--green); }
.tl-item .tl-txt { font-size: 12.5px; font-weight: 600; }
.tl-item .tl-meta { font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* action bar in drawer */
.action-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 0 4px;
  border-top: 1px dashed var(--border);
  margin-top: 10px;
}

/* ============ NOTIFICATION POPOVER ============ */
.pop {
  position: fixed; z-index: 95;
  background: #fff; border-radius: 10px;
  box-shadow: var(--shadow-3);
  border: 1px solid var(--border);
  width: 380px; max-width: 92vw;
  animation: popIn 0.18s ease;
  overflow: hidden;
}
.pop-h { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.pop-h h3 { font-size: 13px; font-weight: 700; }
.pop-b { max-height: 420px; overflow-y: auto; }
.ntf {
  display: flex; gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}
.ntf:hover { background: #F7F9FC; }
.ntf.unread { background: #F2F7FF; }
.ntf .n-ico {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ntf .n-txt { font-size: 12px; line-height: 1.45; }
.ntf .n-time { font-size: 10.5px; color: var(--text-3); margin-top: 3px; }

/* menu (role switcher etc.) */
.menu {
  position: fixed; z-index: 95;
  background: #fff; border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  min-width: 230px;
  padding: 6px;
  animation: popIn 0.15s ease;
}
.menu .m-label { font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-3); padding: 8px 10px 4px; }
.menu button.m-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 7px 10px; border-radius: 6px;
  font-size: 12.5px; font-weight: 600;
}
.menu button.m-item:hover { background: #F2F5F9; }
.menu button.m-item.on { background: var(--blue-soft); color: var(--blue); }
.menu .m-div { height: 1px; background: var(--border-soft); margin: 6px 4px; }

/* ============ TOAST ============ */
.toasts { position: fixed; bottom: 18px; left: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: #1E2C48; color: #fff;
  padding: 11px 16px;
  border-radius: 8px;
  font-size: 12.5px; font-weight: 600;
  box-shadow: var(--shadow-3);
  display: flex; align-items: center; gap: 10px;
  animation: toastIn 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  max-width: 420px;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.toast.err { background: #B3282D; }
.toast.ok { background: #22753A; }
.toast .t-ico { flex-shrink: 0; width: 16px; height: 16px; }

/* ============ CHARTS ============ */
.chart-box { position: relative; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.legend .lg { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--text-2); }
.legend .sw { width: 9px; height: 9px; border-radius: 2.5px; }

/* KPI ring */
.kpi-ring-row { display: flex; align-items: center; gap: 16px; }
.kpi-metric { margin-bottom: 9px; }
.kpi-metric .km-h { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; margin-bottom: 4px; }
.kpi-metric .km-h .v { color: var(--text-2); }
.kpi-metric .km-bar { height: 6px; border-radius: 4px; background: #EDF0F4; overflow: hidden; }
.kpi-metric .km-bar i { display: block; height: 100%; border-radius: 4px; }

/* ============ MISC ============ */
.empty {
  padding: 46px 20px; text-align: center; color: var(--text-3);
}
.empty .e-ico { font-size: 30px; margin-bottom: 8px; }
.empty b { display: block; color: var(--text-2); font-size: 13px; margin-bottom: 3px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.three-col { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: start; }
/* A grid item defaults to min-width:auto, so it refuses to shrink below the
   min-content width of what is inside it. `table.tbl` carries min-width:640px
   on purpose — that is what gives .tbl-wrap something to scroll — and without
   this line that 640px propagated all the way out and forced the whole column
   wide. On the dashboard at 1100px the Review Queue card overflowed its
   column by 154px and its right-hand columns were cut off.

   min-width:0 lets the column shrink, which puts the overflow back inside
   .tbl-wrap where it belongs: the table scrolls in its own card, which is the
   rule the rest of the interface already follows. */
.two-col > *, .three-col > * { min-width: 0; }
.mt0 { margin-top: 0 !important; }
.muted { color: var(--text-3); }
.small { font-size: 11px; }
.bold { font-weight: 700; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.link-like { color: var(--link); font-weight: 600; cursor: pointer; }
.flex { display: flex; align-items: center; gap: 8px; }
.flex .grow { flex: 1; }
.tag {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  background: #EEF1F6; color: var(--text-2);
  font-size: 10.5px; font-weight: 600;
  margin: 2px 4px 2px 0;
}
.hamburger { display: none; }

.search-box {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: #fff; padding: 6px 10px;
  min-width: 210px;
}
.search-box input { border: none; outline: none; flex: 1; font-size: 12.5px; background: none; }
.search-box svg { width: 14px; height: 14px; color: var(--text-3); }

.global-search-results { padding: 4px 0; }
.gsr {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; cursor: pointer;
}
.gsr:hover { background: #F2F5F9; }
.gsr .g-type { font-size: 9.5px; font-weight: 800; letter-spacing: 0.5px; color: var(--text-3); width: 52px; flex-shrink: 0; }
.gsr b { font-size: 12.5px; }
.gsr span { font-size: 11px; color: var(--text-3); }

/* print/export hint */
@media print { .sidebar, .rail, .topbar .top-icons, .tabbar { display: none !important; } }

/* ============ RESPONSIVE ============ */
@media (max-width: 1280px) {
  .cards.c6 { grid-template-columns: repeat(3, 1fr); }
  .cards.c5 { grid-template-columns: repeat(3, 1fr); }
  .cards.c4 { grid-template-columns: repeat(2, 1fr); }
  .rail { display: none; }
}
@media (max-width: 1024px) {
  :root { --sidebar-w: 64px; }
  .sidebar:not(.open) .side-logo .logo-name, .sidebar:not(.open) .side-logo .logo-sub,
  .sidebar:not(.open) .side-item span.txt, .sidebar:not(.open) .side-item .count,
  .sidebar:not(.open) .side-section, .sidebar:not(.open) .side-proj,
  .sidebar:not(.open) .side-user .who,
  .sidebar:not(.open) .side-search,
  .sidebar:not(.open) .side-group-h .txt, .sidebar:not(.open) .side-group-h .chev,
  .sidebar:not(.open) .side-group-body { display: none; }
  .sidebar:not(.open) .side-item { justify-content: center; padding: 11px 0; }
  .sidebar:not(.open) .side-group-h { justify-content: center; padding: 11px 0; }
  .sidebar:not(.open) .side-user { justify-content: center; }
  .sidebar.open {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
    width: min(300px, 80vw);
    box-shadow: var(--shadow-3);
  }
  .three-col, .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 30% 0 0; z-index: 100;
    transform: translateX(-105%);
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
    width: min(300px, 78vw);
  }
  .sidebar.open { transform: none; box-shadow: var(--shadow-3); }
  .sidebar.open .side-logo .logo-name, .sidebar.open .side-logo .logo-sub,
  .sidebar.open .side-item span.txt, .sidebar.open .side-item .count,
  .sidebar.open .side-section, .sidebar.open .side-proj, .sidebar.open .side-user .who { display: block; }
  .sidebar.open .side-item { justify-content: flex-start; padding: 9px 16px; }
  .side-backdrop { position: fixed; inset: 0; z-index: 99; background: rgba(10, 25, 47, 0.4); }
  .hamburger { display: inline-flex; }
  .cards.c6, .cards.c5, .cards.c4, .cards.c3, .cards.c2 { grid-template-columns: 1fr 1fr; }
  .drawer { width: 100vw; max-width: 100vw; }
  .form-grid { grid-template-columns: 1fr; }
  .toolbar { padding: 10px 12px; }
  .page { padding: 0 12px 26px; }
  .kanban { padding: 4px 12px 20px; }
  .topbar .crumb h1 { font-size: 13.5px; }
}
@media (max-width: 480px) {
  .cards.c6, .cards.c5, .cards.c4, .cards.c3, .cards.c2 { grid-template-columns: 1fr; }
}

/* ============================================================
   ERP EXTENSIONS — documents, check-in, phases, lists, ET
   ============================================================ */

/* ---- callouts ---- */
.callout{background:var(--brand-primary-muted);border:1px solid var(--brand-primary-border);color:#243B5E;border-radius:9px;
  padding:11px 13px;font-size:12.5px;line-height:1.55;margin-bottom:14px}
.callout.amber{background:#FFF6E6;border-color:#F5DCA8;color:#5C4413}
.callout b{font-weight:650}

/* ---- empty state ---- */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:38px 20px;color:var(--muted);text-align:center;
  background:#FBFCFD;border:1px dashed var(--line);border-radius:10px}
.empty-state .es-i{width:26px;height:26px;opacity:.42}
.empty-state b{color:var(--ink);font-size:13px}
.empty-state span{font-size:12px}

/* ---- documents ---- */
.doc-group{margin-bottom:22px}
.dg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:4px}
.dg-hint{font-size:12px;color:var(--muted);margin-bottom:9px}
.section-title .cnt{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  padding:0 5px;margin-left:7px;border-radius:9px;background:var(--line);color:var(--muted);
  font-size:11px;font-weight:650;vertical-align:middle}
.doc-row{display:flex;align-items:center;gap:11px;padding:10px 12px;background:#fff;
  border:1px solid var(--line);border-radius:9px;margin-bottom:7px}
.doc-row:hover{border-color:#C9D4E4}
.doc-ic{width:30px;height:30px;flex:none;border-radius:7px;display:flex;align-items:center;
  justify-content:center;background:#EEF2F7;color:#5C7095}
.doc-ic svg{width:15px;height:15px}
.doc-ic.input{background:#FFF0E6;color:#B85C1A}
.doc-ic.scope{background:#F0EBFA;color:#6B4BB5}
.doc-ic.source{background:#E7F4EC;color:#1F7A44}
.doc-ic.deliverable{background:var(--brand-primary-light);color:var(--brand-on-light)}
.doc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.doc-main b{font-size:13px;font-weight:600}
.doc-main .sub{font-size:11.5px;color:var(--muted)}
.doc-main .sub.note{color:#5A6577;font-style:italic}
.doc-act{display:flex;gap:6px;flex:none}
.doc-empty{padding:13px;font-size:12px;color:var(--muted);background:#FBFCFD;
  border:1px dashed var(--line);border-radius:9px}

.doc-view h3{margin:8px 0 4px;font-size:16px}
.doc-badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:650;
  background:#EEF2F7;color:#5C7095}
.doc-badge.input{background:#FFF0E6;color:#B85C1A}
.doc-badge.scope{background:#F0EBFA;color:#6B4BB5}
.doc-badge.source{background:#E7F4EC;color:#1F7A44}
.link-box{margin-top:12px;background:#F7F9FC;border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.link-box .lb-l{display:block;font-size:11px;color:var(--muted);margin-bottom:4px;font-weight:600}
.link-box code{font-size:12px;color:#20364F;word-break:break-all}
.pdf-stage{margin-top:14px;background:#F7F9FC;border:1px dashed var(--line);border-radius:10px;
  padding:34px 20px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.pdf-stage svg{width:34px;height:34px;opacity:.4}
.pdf-stage b{font-size:13px}
.pdf-stage span{font-size:12px;color:var(--muted)}

/* ---- check-in bar ---- */
.checkin-bar{display:flex;align-items:center;gap:10px;padding:7px 12px;background:#F7F9FC;
  border:1px solid var(--line);border-radius:9px;margin-bottom:12px}
.checkin-bar.active{background:#EAF6EF;border-color:#BFE3CD}
.ci-dot{width:8px;height:8px;border-radius:50%;background:#28A25B;flex:none;
  box-shadow:0 0 0 3px rgba(40,162,91,.18);animation:cipulse 2s infinite}
@keyframes cipulse{0%,100%{opacity:1}50%{opacity:.45}}
.ci-txt{flex:1;font-size:12.5px}
.ci-txt b{font-weight:650}

/* ---- phases ---- */
.phase-card{display:flex;align-items:center;gap:13px;padding:12px 14px;background:#fff;
  border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.phase-card:hover{border-color:#C9D4E4}
.pc-n{width:27px;height:27px;flex:none;border-radius:50%;background:var(--blue-soft);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.pc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pc-main b{font-size:13.5px}
.pc-main .sub{font-size:11.5px;color:var(--muted)}
.pc-main .sub.warn{color:#B0710E}
.pc-prog{width:150px;flex:none}
.pc-st{width:96px;flex:none}
.pc-act{display:flex;gap:6px;flex:none}

/* ---- master lists ---- */
.lists-wrap{display:flex;gap:18px;align-items:flex-start}
.lists-side{width:212px;flex:none;display:flex;flex-direction:column;gap:3px}
.list-tab{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:9px 11px;border:1px solid transparent;border-radius:8px;background:none;cursor:pointer;
  font-size:12.5px;color:var(--ink);text-align:left;font-family:inherit}
.list-tab:hover{background:#F2F5F9}
.list-tab.active{background:var(--blue-soft);border-color:var(--brand-primary-border);color:var(--blue);font-weight:600}
.list-tab .cnt{background:rgba(0,0,0,.07);border-radius:9px;padding:1px 7px;font-size:11px}
.lists-main{flex:1;min-width:0}
.ml-row{display:flex;align-items:center;gap:11px;padding:9px 12px;background:#fff;
  border:1px solid var(--line);border-radius:8px;margin-bottom:6px}
.ml-row b{flex:1;font-size:13px;font-weight:500}
.ml-n{width:22px;color:var(--muted);font-size:11.5px;flex:none}
.ml-act{display:flex;gap:6px;flex:none}
.mini-search{height:29px;padding:0 10px;border:1px solid var(--line);border-radius:7px;
  font-size:12.5px;font-family:inherit;min-width:180px}
.row-gap{display:flex;gap:7px;align-items:center}

/* ---- ET burn-down ---- */
.et-box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:14px}
.et-box.amber{border-color:#F0D9A8;background:#FFFBF2}
.et-box.red{border-color:#F2C3C5;background:#FEF6F6}
.et-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;margin-bottom:8px}
.et-head .over{color:var(--red)}
.et-bar{height:8px;border-radius:5px;background:var(--line);overflow:hidden}
.et-bar i{display:block;height:100%;border-radius:5px;background:var(--green)}
.et-box.amber .et-bar i{background:#E8A33D}
.et-box.red .et-bar i{background:var(--red)}
.et-warn{margin-top:8px;font-size:12px;color:var(--red);display:flex;align-items:center;gap:6px}
.et-warn .ico svg{width:14px;height:14px}

/* ---- small buttons ---- */
.btn.xs{height:26px;padding:0 10px;font-size:11.5px;border-radius:6px}
.btn.success{background:var(--green);border-color:var(--green);color:#fff}
.btn.success:hover{filter:brightness(.95)}

/* ---- hidden-field marker ---- */
.admin-only{position:relative}
.admin-only::after{content:'ADMIN';position:absolute;top:-7px;right:-4px;font-size:8.5px;
  font-weight:700;letter-spacing:.4px;background:#2A3550;color:#fff;padding:1px 5px;border-radius:8px}

@media (max-width:900px){
  .lists-wrap{flex-direction:column}
  .lists-side{width:100%;flex-direction:row;flex-wrap:wrap}
  .pc-prog,.pc-st{display:none}
}

#checkin-host:empty{display:none}
#checkin-host{padding:8px 22px 0}
#checkin-host .checkin-bar{margin-bottom:0}

/* ============================================================
   DESIGN REFINEMENT PASS
   Written after reviewing rendered screenshots. Three problems:
     1. destructive actions were the loudest thing on screen
     2. 19 solid saturated status pills competed with each other
     3. cards were flat, so nothing established depth or hierarchy
   ============================================================ */

/* ---- 1 · row actions: quiet until you need them ----
   A list of 16 rows should not render 16 red buttons. Actions stay
   ghosted, surface on row hover, and only take colour on their own hover. */
.tbl tbody .btn.xs,
.ml-row .btn.xs,
.doc-row .btn.xs,
.phase-card .btn.xs {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  opacity: .55;
  transition: opacity .12s, color .12s, background .12s, border-color .12s;
}
.tbl tbody tr:hover .btn.xs,
.ml-row:hover .btn.xs,
.doc-row:hover .btn.xs,
.phase-card:hover .btn.xs { opacity: 1; }

.tbl tbody .btn.xs:hover,
.ml-row .btn.xs:hover,
.doc-row .btn.xs:hover,
.phase-card .btn.xs:hover {
  background: #F1F4F9;
  border-color: var(--line, #E6EBF2);
  color: var(--ink);
}
.tbl tbody .btn.xs.danger:hover,
.ml-row .btn.xs.danger:hover,
.doc-row .btn.xs.danger:hover,
.phase-card .btn.xs.danger:hover {
  background: #FDECEC;
  border-color: #F3C6C6;
  color: #A32B2B;
}

/* ---- 2 · one tinted pill system instead of nineteen solids ----
   Same shape, five semantic families, tinted rather than filled.
   Colour now signals category, not decoration. */
.pill {
  background: #EEF1F6 !important;
  color: #4A5670 !important;
  font-weight: 600;
  border: 1px solid transparent;
  box-shadow: none;
}
/* informational — in the review pipeline */
.pill.assigned, .pill.accepted, .pill.open, .pill.submitted,
.pill.underreview, .pill.resubmitted, .pill.planning {
  background: var(--brand-primary-light) !important; color: var(--brand-on-light) !important; border-color: var(--brand-primary-border);
}
/* in flight */
.pill.inprogress, .pill.onhold, .pill.atrisk {
  background: #FEF4E4 !important; color: #8A5A10 !important; border-color: #F7E2BC;
}
/* needs attention */
.pill.revision, .pill.delayed, .pill.blocked, .pill.overdueinv {
  background: #FDECEC !important; color: #A32B2B !important; border-color: #F5CFCF;
}
/* good */
.pill.approved, .pill.completed, .pill.active, .pill.paid {
  background: #E6F4EC !important; color: #1B6E43 !important; border-color: #C9E7D6;
}
/* dormant */
.pill.created, .pill.cancelled, .pill.archived {
  background: #EEF1F6 !important; color: #5C6880 !important; border-color: #E1E6EE;
}

/* ---- 3 · depth ----
   A hairline alone reads flat at this density. A single soft shadow
   lifts cards off the page without turning into decoration. */
.card {
  box-shadow: 0 1px 2px rgba(16, 27, 46, .04), 0 1px 1px rgba(16, 27, 46, .03);
}
.card.stat { transition: box-shadow .15s, transform .15s; }
.card.stat:hover {
  box-shadow: 0 4px 12px rgba(16, 27, 46, .07), 0 1px 2px rgba(16, 27, 46, .04);
}
.card.stat .val { letter-spacing: -.5px; }

/* ---- 4 · tighter rows ----
   Single-line content did not need 50px of height. */
.ml-row { padding: 7px 12px; margin-bottom: 4px; }
.ml-row b { font-weight: 500; }
.doc-row { padding: 9px 12px; margin-bottom: 5px; }
.phase-card { padding: 10px 14px; margin-bottom: 6px; }

/* ---- 5 · document groups read as groups ---- */
.doc-group {
  background: #fff;
  border: 1px solid var(--line, #E6EBF2);
  border-radius: 11px;
  padding: 15px 16px 13px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(16, 27, 46, .04);
}
.doc-group .doc-row {
  border-color: #EDF1F6;
  background: #FBFCFE;
}
.doc-group .doc-row:hover { background: #fff; border-color: #D8E1EC; }
.dg-head { align-items: center; margin-bottom: 2px; }
.dg-hint { margin-bottom: 11px; max-width: 62ch; }
.doc-empty { background: #FBFCFE; border-style: solid; border-color: #EDF1F6; }

/* ---- 6 · the count chip should read as metadata, not a badge ---- */
.section-title .cnt {
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  padding: 0 0 0 2px;
  font-size: 12px;
}
.section-title .cnt::before { content: '·'; margin-right: 4px; opacity: .55; }

/* ---- 7 · callouts are advisory, not alarming ---- */
.callout {
  background: var(--brand-primary-muted);
  border-color: var(--brand-primary-border);
  color: #33445E;
}

/* ---- 8 · the right icon rail was pure ornament; reclaim the space ---- */
.rail { display: none; }
@media (min-width: 1500px) { .rail { display: flex; } }

/* ---- 9 · busy state while an API call is in flight ---- */
body.api-busy { cursor: progress; }
body.api-busy .btn.primary { opacity: .75; pointer-events: none; }

/* ---- 10 · bar chart: shared baseline + visible scale ----
   Bars previously floated with no axis, so four values read as four
   unrelated blocks. A track shows the full scale; the baseline ties them. */
.vb-wrap { display: flex; align-items: flex-end; gap: 14px; padding-top: 6px; }
.vb-col { flex: 1; display: flex; flex-direction: column; align-items: center;
          gap: 6px; height: 100%; min-width: 0; }
.vb-val { font-size: 10.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.vb-track { flex: 1; width: 100%; max-width: 42px; display: flex; align-items: flex-end;
            background: #F1F4F9; border-radius: 5px; overflow: hidden; }
.vb-bar { width: 100%; border-radius: 5px 5px 0 0; transition: height .45s cubic-bezier(.4,0,.2,1); min-height: 2px; }
.vb-lbl { font-size: 10px; font-weight: 600; color: var(--text-3); white-space: nowrap;
          overflow: hidden; text-overflow: ellipsis; max-width: 100%;
          padding-top: 5px; border-top: 1px solid var(--line, #E6EBF2); width: 100%; text-align: center; }

/* ---- session menu (sign out / change password) ---- */
.pop-menu .pop-head{padding:9px 12px 8px;border-bottom:1px solid var(--line,#E6EBF2);
  font-size:13px;font-weight:650;color:var(--ink)}
.pop-menu .pop-head span{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:1px}
.pop-item{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;border:0;
  background:none;cursor:pointer;font-family:inherit;font-size:12.5px;color:var(--ink);text-align:left}
.pop-item:hover{background:#F2F5F9}
.pop-item.danger{color:#A32B2B}
.pop-item.danger:hover{background:#FDECEC}
.pop-item svg{width:14px;height:14px;opacity:.7}

/* the session and role menus are narrow lists, not the wide notification panel */
.pop.pop-menu, .pop.menu { width: auto; padding: 4px 0; }
.pop.pop-menu { min-width: 200px; }

/* ---- employee register ---- */
.inline-check{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  color:var(--muted);white-space:nowrap;cursor:pointer}
.inline-check input{margin:0;cursor:pointer}
.field .v{font-size:13px;color:var(--ink);padding:6px 0}

/* document viewer — a real preview of the stored object, not a placeholder */
.doc-frame { width:100%; height:min(60vh,520px); border:1px solid var(--line);
             border-radius:10px; background:var(--surface-2); }
.doc-frame.img { display:flex; align-items:center; justify-content:center;
                 overflow:auto; padding:10px; height:auto; max-height:min(60vh,520px); }
.doc-frame.img img { max-width:100%; max-height:min(56vh,480px); border-radius:6px; }
.doc-row .ver { font-size:11px; font-weight:600; padding:1px 6px; border-radius:999px;
                background:var(--surface-2); color:var(--muted); margin-left:6px; }
.doc-row.superseded { opacity:.62; }
.doc-row.superseded .doc-main b { text-decoration:line-through; text-decoration-thickness:1px; }

/* ---------- the 9-dot application launcher ----------
   Built from the same catalogue as the sidebar (see appsPop in app.js), so it
   shows exactly the sections this role has and nothing else. Brand purple, not
   the categorical purple — this is chrome, not a data category. */
.pop-apps .apps-b { padding: 4px 0 8px; }
.apps-grp {
  padding: 10px 16px 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
}
.apps-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; padding: 0 8px;
}
.app-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px 9px;
  background: none; border: 0; border-radius: var(--radius);
  cursor: pointer; text-align: center;
  color: var(--text); font: inherit;
}
.app-tile:hover { background: var(--brand-primary-muted); }
.app-tile:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
  background: var(--brand-primary-muted);
}
.app-ic {
  width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-primary-light); color: var(--brand-on-light);
}
.app-ic .ico svg { width: 17px; height: 17px; }
.app-tx {
  font-size: 10.5px; line-height: 1.25; font-weight: 600;
  /* Two lines maximum: "KPI Configuration" must not stretch the tile and
     leave the grid ragged. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* On a phone the popover is nearly full width, so three columns become cramped. */
@media (max-width: 420px) {
  .apps-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Messages ----------
   Three columns: conversations, the thread, and the panel that stops files
   getting lost in a long history. Deliberately the ERP's own design language
   — this is an internal communication tool, not a social product. */
.chat-wrap {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 280px;
  gap: 1px;
  background: var(--border);
  height: calc(100vh - 132px);
  min-height: 420px;
}
.chat-list, .chat-main, .chat-side { background: var(--surface, #fff); overflow: hidden; display: flex; flex-direction: column; }
.chat-list, .chat-side { overflow-y: auto; }

.chat-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.chat-tabs button {
  flex: 1; padding: 9px 6px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent;
}
.chat-tabs button.active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }

.chat-grp {
  padding: 12px 14px 5px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.chat-row {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  padding: 9px 14px; border: 0; background: none; cursor: pointer; text-align: left; font: inherit;
  border-left: 3px solid transparent;
}
.chat-row:hover { background: var(--surface-2); }
.chat-row.active { background: var(--brand-primary-muted); border-left-color: var(--brand-primary); }
.chat-row-top { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.chat-row-sub { font-size: 11.5px; }

.chat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }

.chat-msg { display: flex; flex-direction: column; max-width: 74%; }
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-who { font-size: 11px; font-weight: 700; color: var(--muted); margin: 0 0 2px 10px; }
.chat-bub {
  position: relative; padding: 8px 12px 6px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.chat-msg.mine .chat-bub {
  background: var(--brand-primary-light); border-color: var(--brand-primary-border);
}
.chat-msg.pinned .chat-bub { border-color: var(--amber); }
.chat-text { display: block; white-space: pre-wrap; word-break: break-word; line-height: 1.4; }
.chat-time { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
.chat-pinmark { float: right; margin-left: 8px; color: var(--amber); }
.chat-pinmark svg { width: 12px; height: 12px; }
.chat-pin {
  position: absolute; top: -8px; right: -8px; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid var(--border); background: #fff;
  cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0;
}
.chat-bub:hover .chat-pin { display: inline-flex; }
.chat-pin svg { width: 11px; height: 11px; }

/* A file REFERENCE. Never a copy — the bytes stay in the File Hub. */
.chat-ref {
  display: flex; align-items: center; gap: 7px; margin-top: 6px; padding: 7px 9px;
  border: 1px solid var(--brand-primary-border); border-radius: 8px;
  background: #fff; text-decoration: none; color: var(--text);
}
.chat-ref svg { width: 15px; height: 15px; color: var(--brand-primary); flex-shrink: 0; }
.chat-ref.denied { border-style: dashed; border-color: var(--border); background: var(--surface-2); }
.chat-ref .ver {
  font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted);
}

.chat-compose {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 14px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.chat-compose input {
  /* min-width:0 for the same reason as the grid columns above: a flex item
     will not shrink below its own content width by default, so at narrower
     widths the text box held its size and pushed Send past the right edge of
     the compose row. The buttons keep their size; the input gives way. */
  flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--border);
  border-radius: 999px; font: inherit;
}
.chat-compose .btn { flex-shrink: 0; }
.chat-compose input:focus { outline: 2px solid var(--brand-focus-ring); border-color: var(--brand-primary); }

.chat-panel { padding: 12px 14px; overflow-y: auto; }
.chat-member { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.chat-member .truncate { flex: 1; }
.chat-pinrow { padding: 8px 0; border-bottom: 1px solid var(--border); }
.chat-filerow {
  display: flex; align-items: center; gap: 8px; padding: 8px 0;
  border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text);
}
.chat-filerow svg { width: 15px; height: 15px; color: var(--brand-primary); flex-shrink: 0; }
.chat-filerow span { display: flex; flex-direction: column; min-width: 0; }
.chat-picklist { max-height: 210px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; padding: 8px; }
.chat-picklist .check { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.chat-result {
  display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0;
  border-bottom: 1px solid var(--border); background: none; cursor: pointer; font: inherit;
}
.chat-result:hover { background: var(--surface-2); }

@media (max-width: 900px) {
  .chat-wrap { grid-template-columns: 1fr; height: auto; }
  .chat-side { display: none; }
}

/* ============================================================
   Attendance & leave (S6–S25) — views-hr-attendance.js
   ============================================================ */

/* A rating is drawn AND written out. Counting glyphs is not something a
   screen reader, or a tired person at 6pm, should have to do. */
.star-rating { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.star-glyph { color: #E0A21A; letter-spacing: 1.5px; font-size: 12.5px; line-height: 1; }
.star-num { font-size: 11px; font-weight: 700; color: var(--text-2); }
/* Never a zero: a day with no arrival time was not rated, and says so. */
.star-none { font-size: 11px; font-weight: 600; color: var(--text-3); }

/* A correction keeps the original reading beside the corrected one. */
.hr-raw { margin-left: 6px; font-size: 10.5px; color: var(--text-3); text-decoration: line-through; }
.hr-corr { cursor: help; }

.hr-starbar { display: flex; flex-wrap: wrap; gap: 8px; }
.hr-starbar .sb {
  flex: 1 1 84px; min-width: 84px; padding: 9px 10px; text-align: center;
  background: var(--border-soft); border: 1px solid var(--border); border-radius: 8px;
}
.hr-starbar .sb b { display: block; font-size: 17px; font-weight: 700; line-height: 1.25; }
.hr-starbar .sb span { font-size: 10.5px; color: var(--text-3); font-weight: 600; }

.hr-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.hr-filters .field { margin-bottom: 0; min-width: 160px; }
.hr-filters .btn { margin-bottom: 1px; }

.hr-inline { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 11.5px; color: var(--text-2); }
.hr-inline b { color: var(--text); font-weight: 700; }

.hr-check { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.hr-check input { width: 15px; height: 15px; flex-shrink: 0; }
.hr-check label { font-size: 12px; font-weight: 600; color: var(--text-2); }

/* Ahead of the normal Casual Leave pattern. Tinted, not red: the Usage
   Warnings page is informational and says so at the top. */
.tbl tbody tr.hr-over td { background: #FFF6E6; }
.tbl tbody tr.hr-over:hover td { background: #FBEFD8; }