/* ==========================================================================
   Hammer Hill Technologies - MSP Command Center
   Dark navy rail, blue for action, quiet light work surface. The one loud
   element is the HAMMER HILL wordmark (Barlow Semi Condensed); everything
   else stays disciplined so status colors read instantly.
   Fonts: Barlow / Barlow Semi Condensed (SIL OFL, self-hosted in /static/fonts).
   ========================================================================== */
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap;
  src: url("/static/fonts/Barlow-Regular.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap;
  src: url("/static/fonts/Barlow-Medium.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap;
  src: url("/static/fonts/Barlow-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap;
  src: url("/static/fonts/BarlowSemiCondensed-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap;
  src: url("/static/fonts/BarlowSemiCondensed-Bold.woff2") format("woff2"); }

:root {
  --navy: #0F2340;        /* sidebar */
  --navy-2: #17325C;      /* sidebar hover */
  --navy-line: #24406B;
  --navy-ink: #C9D5E8;
  --blue: #2563C9;        /* action / brand accent */
  --blue-ink: #FFFFFF;
  --bg: #F2F4F7;          /* work surface */
  --panel: #FFFFFF;
  --panel-2: #F6F8FA;
  --line: #DCE2EA;
  --ink: #182230;
  --ink-dim: #4E5A6C;
  --ink-faint: #7F8A9B;
  --signal: var(--blue);  /* legacy name used by section code */
  --ok: #1E8A52;   --ok-bg: #E3F4EA;
  --warn: #A86A05; --warn-bg: #FBF0DA;
  --crit: #C0362C; --crit-bg: #FBE6E4; --crit-line: #EDB9B4;
  --info: #2563C9; --info-bg: #E6EEFB;
  --neutral-bg: #ECEFF3;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --sidebar-w: 236px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 14.5px; line-height: 1.5; }
a { color: var(--blue); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

button {
  font-family: var(--sans); font-size: 14px; font-weight: 500; cursor: pointer;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 13px; transition: border-color .12s, background .12s;
}
button:hover { border-color: #B7C1CF; background: var(--panel-2); }
button.primary { background: var(--blue); color: var(--blue-ink); border-color: var(--blue); font-weight: 600; }
button.primary:hover { background: #1E54AD; border-color: #1E54AD; }
button.danger { color: var(--crit); border-color: var(--crit-line); }
button.danger:hover { background: var(--crit-bg); }
input, select, textarea {
  font-family: var(--sans); font-size: 14px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: var(--blue); }
.mono { font-family: var(--mono); font-size: .92em; }
.dim { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }

/* ---------------- login ---------------- */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 44%) 1fr; }
.login-brand { background: var(--navy); color: #fff; display: flex; flex-direction: column;
  justify-content: center; padding: 48px clamp(32px, 6vw, 88px); position: relative; overflow: hidden; }
/* A low ridge line along the bottom: the "hill", drawn, not decorated. */
.login-brand::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: var(--navy-2);
  clip-path: polygon(0 100%, 0 62%, 18% 40%, 34% 55%, 52% 18%, 68% 46%, 82% 34%, 100% 58%, 100% 100%); }
.wordmark { font-family: var(--display); font-weight: 700; letter-spacing: .04em; line-height: .9; margin: 0; }
.login-brand .wordmark { font-size: clamp(56px, 7.4vw, 104px); }
.login-brand .wordmark span { display: block; }
.login-brand .tagline { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: .22em;
  color: #8FB0E6; margin-top: 18px; }
.login-form { display: grid; place-items: center; padding: 32px 20px; }
.login-card { width: 100%; max-width: 360px; }
.login-card h2 { font-family: var(--display); font-weight: 600; font-size: 26px; margin: 0 0 22px; }
.login-card .foot { margin-top: 20px; font-size: 13px; color: var(--ink-faint); text-align: center; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-dim); margin-bottom: 5px; }
.field input { width: 100%; }
.err { color: var(--crit); font-size: 13.5px; min-height: 18px; margin-bottom: 6px; }
.notice { background: var(--info-bg); border: 1px solid #C4D6F5; border-radius: 6px; padding: 10px 12px;
  font-size: 13.5px; margin-bottom: 14px; }
@media (max-width: 760px) {
  .login-wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login-brand { padding: 36px 28px 64px; }
  .login-brand::after { height: 56px; }
  .login-brand .wordmark { font-size: 54px; }
}

/* ---------------- app shell ---------------- */
#app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
#sidebar { background: var(--navy); color: var(--navy-ink); position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; z-index: 40; }
#sidebar .brand { padding: 22px 20px 18px; border-bottom: 1px solid var(--navy-line); }
#sidebar .brand .wordmark { color: #fff; font-size: 27px; }
#sidebar .brand .sub { font-size: 12.5px; color: #8FB0E6; margin-top: 4px; }
#sidebar nav { flex: 1; overflow-y: auto; padding: 12px 10px; overscroll-behavior: contain; }
#sidebar .nav-group { font-size: 12px; color: #7F95B8; padding: 14px 10px 6px; }
.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; border-radius: 6px; color: var(--navy-ink);
  padding: 9px 10px; font-size: 14.5px; font-weight: 500; }
.nav-item:hover { background: var(--navy-2); color: #fff; border: none; }
.nav-item.active { background: var(--blue); color: #fff; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .9; }
#sidebar .me { border-top: 1px solid var(--navy-line); padding: 12px 10px; display: flex; gap: 8px; align-items: center; }
#accountBtn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: none;
  color: #fff; padding: 6px; text-align: left; }
#accountBtn:hover { background: var(--navy-2); }
#meInitial { width: 32px; height: 32px; border-radius: 50%; background: var(--navy-2); display: grid;
  place-items: center; font-weight: 600; flex-shrink: 0; border: 1px solid var(--navy-line); }
#accountBtn .who { min-width: 0; line-height: 1.25; }
#meName { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#meRole { display: block; font-size: 12px; color: #8FB0E6; }
#logoutBtn { background: none; border: 1px solid var(--navy-line); color: var(--navy-ink); font-size: 13px; }
#logoutBtn:hover { background: var(--navy-2); color: #fff; }

.topbar { display: flex; align-items: center; gap: 16px; padding: 12px 24px; background: var(--panel);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.topbar .spacer { flex: 1; }
.topbar .stat { font-size: 13.5px; color: var(--ink-dim); }
.topbar .stat b { color: var(--ink); font-variant-numeric: tabular-nums; }
#navToggle { display: none; padding: 6px 10px; }
#navScrim { display: none; }
main { padding: 24px; max-width: 1360px; width: 100%; }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.page-head h1 { font-family: var(--display); font-weight: 600; font-size: 28px; margin: 0; flex: 1; line-height: 1.1; }
#pageBody > .card:first-child, #pageBody { min-width: 0; }
#pageView .page-surface { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 20px; }

@media (max-width: 960px) {
  #app { grid-template-columns: 1fr; }
  #sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(84vw, 280px);
    transform: translateX(-100%); transition: transform .2s ease; }
  body.nav-open #sidebar { transform: none; }
  body.nav-open #navScrim { display: block; position: fixed; inset: 0; background: rgba(15,35,64,.45); z-index: 35; }
  #navToggle { display: inline-flex; }
  .topbar { padding: 10px 14px; gap: 10px; }
  .topbar .stat.secondary { display: none; }
  main { padding: 16px 14px; }
  .summary { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  #detail > .grid { grid-template-columns: 1fr !important; }
  .card table, #pageBody table { display: block; overflow-x: auto; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------------- dialog ---------------- */
#modalOverlay { position: fixed; inset: 0; background: rgba(15,35,64,.5); z-index: 50; display: flex;
  align-items: flex-start; justify-content: center; padding: 60px 16px; overflow: auto; }
#modalBox { width: 560px; max-width: 100%; }
#modalBox h2 { font-family: var(--display); font-weight: 600; font-size: 22px; }

/* ---------------- section content (carried over, retuned for light) ---------------- */
  .grid { display: grid; gap: 16px; }
  .summary { grid-template-columns: repeat(4, minmax(0,1fr)); margin-bottom: 20px; }
  .card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
  .metric { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .metric .label { display:block; font-size: 11px; font-weight: 500; color: var(--ink-faint); margin-bottom: 6px; }
  .metric.ok { color: var(--ok); } .metric.warn { color: var(--warn); } .metric.crit { color: var(--crit); }

  /* device table */
  table { width: 100%; border-collapse: collapse; }
  th { text-align: left; font-size: 11px; color: var(--ink-faint); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); }
  td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  tr.devrow:hover { background: var(--panel-2); cursor: pointer; }
  .dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px; }
  .dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
  .dot.off { background: var(--ink-faint); }
  .badge { font-size: 11px; padding: 2px 7px; border-radius: 100px; font-weight: 600;
    }
  .badge.crit { background: var(--crit-bg); color: var(--crit); }
  .badge.warn { background: var(--warn-bg); color: var(--warn); }
  .badge.info { background: var(--info-bg); color: var(--info); }
  .badge.queued { background: var(--neutral-bg); color: var(--ink-dim); }
  .badge.running { background: var(--warn-bg); color: var(--warn); }
  .badge.success { background: var(--ok-bg); color: var(--ok); }
  .badge.failed { background: var(--crit-bg); color: var(--crit); }
  .badge.expired, .badge.sent { background: var(--neutral-bg); color: var(--ink-faint); }

  .section-title { font-size: 12px; color: var(--ink-faint); font-weight: 600; margin: 24px 0 10px; }

  /* detail panel */
  .back { font-size: 13px; margin-bottom: 12px; display:inline-block; }
  .kv { display:grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: 13px; }
  .kv .k { color: var(--ink-faint); }
  .kv .v { font-family: var(--mono); }
  .actions { display:flex; gap:8px; flex-wrap:wrap; margin: 12px 0; }
  .inv-block { font-family: var(--mono); font-size:12px; white-space: pre-wrap;
    background: var(--bg); border:1px solid var(--line); border-radius:8px; padding:12px;
    max-height: 280px; overflow:auto; color: var(--ink-dim); }
  .pill-row { display:flex; gap: 6px; flex-wrap: wrap; }

  /* ---- rich inventory ---- */
  .inv-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
  .inv-card { background: var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:14px; }
  .inv-card h4 { margin:0 0 10px; font-size:11px; color:var(--ink-faint); font-weight:600; }
  .inv-stat { font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; }
  .inv-stat small { font-size:13px; color:var(--ink-dim); font-weight:400; }
  .meter { height:8px; border-radius:100px; background:var(--bg); overflow:hidden; margin:8px 0 4px; }
  .meter > span { display:block; height:100%; border-radius:100px; transition:width .3s; }
  .meter.ok > span { background: var(--ok); }
  .meter.warn > span { background: var(--warn); }
  .meter.crit > span { background: var(--crit); }
  .inv-line { display:flex; justify-content:space-between; font-size:13px; padding:3px 0; }
  .inv-line .lbl { color:var(--ink-dim); }
  .inv-line .val { font-family:var(--mono); }
  .disk-row { padding:8px 0; border-bottom:1px solid var(--line); }
  .disk-row:last-child { border-bottom:none; }
  .disk-head { display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px; }
  .sw-search { width:100%; margin-bottom:10px; }
  .sw-table { width:100%; border-collapse:collapse; font-size:13px; }
  .sw-table td { padding:6px 8px; border-bottom:1px solid var(--line); }
  .sw-table tr:hover { background:var(--panel-2); }
  .sw-ver { font-family:var(--mono); color:var(--ink-dim); text-align:right; white-space:nowrap; }
  .upd-item { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
  .upd-item:last-child { border-bottom:none; }
  .upd-kb { font-family:var(--mono); font-size:12px; color:var(--signal); background:var(--warn-bg); padding:2px 7px; border-radius:100px; white-space:nowrap; }
  .empty-state { color:var(--ink-faint); text-align:center; padding:28px; font-size:13px; }
  .badge-ok { color:var(--ok); } .badge-bad { color:var(--crit); }

  /* sortable table headers */
  th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
  th.sortable:hover { color:var(--ink-dim); }
  th.sortable::after { content:'⇅'; opacity:.3; margin-left:5px; font-size:11px; }
  th.sortable.asc::after { content:'↑'; opacity:1; color:var(--signal); }
  th.sortable.desc::after { content:'↓'; opacity:1; color:var(--signal); }

  /* recent activity feed */
  .act-row { display:flex; align-items:center; gap:12px; padding:9px 14px; border-bottom:1px solid var(--line); font-size:13px; }
  .act-row:last-child { border-bottom:none; }
  .act-icon { width:26px; height:26px; border-radius:7px; display:grid; place-items:center; flex-shrink:0; font-size:13px; }
  .act-icon.cmd { background:var(--info-bg); color:var(--info); }
  .act-icon.alert { background:var(--crit-bg); color:var(--crit); }
  .act-icon.alert-clear { background:var(--ok-bg); color:var(--ok); }
  .act-icon.auth { background:var(--neutral-bg); color:var(--ink-dim); }
  .act-icon.config { background:var(--warn-bg); color:var(--warn); }
  .act-body { flex:1; min-width:0; }
  .act-main { color:var(--ink); }
  .act-sub { color:var(--ink-faint); font-size:12px; }
  .act-time { color:var(--ink-faint); font-size:12px; font-family:var(--mono); white-space:nowrap; }

  /* inventory tabs styled as clear links */
  .tab { position:relative; }
  .tab:not(.active):hover { color:var(--info); }
  .hidden { display:none !important; }
  .toast { position: fixed; bottom: 20px; right: 20px; background: var(--panel-2);
    border:1px solid var(--line); border-left: 3px solid var(--signal); border-radius:8px;
    padding: 12px 16px; font-size:13px; box-shadow: 0 8px 24px rgba(15,35,64,.18);
    opacity:0; transform: translateY(8px); transition: .2s; }
  .toast.show { opacity:1; transform: translateY(0); }
  .tabs { display:flex; gap: 4px; border-bottom:1px solid var(--line); margin-bottom: 16px; }
  .tab { padding: 8px 14px; border:none; background:none; color: var(--ink-dim);
    border-bottom: 2px solid transparent; border-radius:0; }
  .tab.active { color: var(--ink); border-bottom-color: var(--signal); }

.metric { font-family: var(--display); font-size: 34px; }
.metric .label { font-family: var(--sans); font-size: 13px; color: var(--ink-dim); font-weight: 500; }
.card { box-shadow: none; }
th { font-size: 12.5px; color: var(--ink-dim); font-weight: 600; background: var(--panel-2); }
.section-title { font-size: 15px; color: var(--ink); font-weight: 600; }
.inv-card h4 { font-size: 13px; color: var(--ink-dim); }
.tab.active { color: var(--blue); }
.toast { color: var(--ink); background: var(--panel); }
.badge { font-weight: 600; }
.workspace { min-width: 0; display: flex; flex-direction: column; }
#pageBody { max-width: 1100px; }
@media (max-width: 960px) {
  #overview > div[style*="display:flex"] { flex-wrap: wrap; }
  #search { flex: 1 1 100% !important; }
}

/* ---------------- customers (Stage 1) ---------------- */
.small { font-size: 13px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid.two { grid-template-columns: 1fr 1fr; gap: 0 12px; }
.grid.three { grid-template-columns: 2fr 1fr 1fr; gap: 0 12px; }
.field textarea, .field select { width: 100%; }
textarea { resize: vertical; line-height: 1.45; }
.cust-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cust-toolbar input { flex: 1 1 260px; }
.cust-table { width: 100%; border-collapse: collapse; }
.cust-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr.click { cursor: pointer; }
tr.click:hover, tr.click:focus-visible { background: var(--panel-2); }
.cust-head { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.cust-id { flex: 1; min-width: 0; }
.cust-facts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; color: var(--ink-dim); }
.sep { display: inline-block; width: 1px; height: 14px; background: var(--line); margin: 0 10px; }
.cust-reach { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 14px; }
.cust-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0;
  border: 1px solid var(--line); border-radius: 8px; margin-bottom: 18px; overflow: hidden; }
.cust-stats > div { padding: 12px 14px; border-right: 1px solid var(--line); }
.cust-stats > div:last-child { border-right: none; }
.cust-stats span { display: block; font-size: 13px; color: var(--ink-dim); }
.cust-stats b { font-family: var(--display); font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cust-stats small { font-family: var(--sans); font-size: 13px; color: var(--ink-faint); font-weight: 400; }
.cust-stats .is-warn b { color: var(--warn); }
.cust-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 8px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 8px; }
.sec-head h3 { font-size: 15px; font-weight: 600; margin: 0; }
.contact { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.contact:last-child { border-bottom: none; }
.contact-main { flex: 1; min-width: 0; }
.contact-main .badge { margin-left: 6px; }
.contact-reach { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13.5px; margin-top: 2px; }
.link-btn { background: none; border: none; color: var(--blue); padding: 4px 6px; align-self: flex-start; }
.link-btn:hover { background: var(--info-bg); }
.note-box { white-space: pre-wrap; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 10px 12px; font-size: 14px; min-height: 44px; }
.note-box.internal { background: var(--warn-bg); border-color: #EBD3A2; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding: 8px 0 8px 14px;
  border-left: 2px solid var(--line); position: relative; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 15px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--ink-faint); }
.timeline li.tl-ticket::before { background: var(--blue); }
.timeline li.tl-device::before { background: var(--ok); }
.timeline li.tl-invoice::before { background: var(--warn); }
.tl-when { color: var(--ink-faint); font-size: 13px; font-variant-numeric: tabular-nums; }
.ip-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ip-row > div { flex: 1; }
@media (max-width: 960px) {
  .cust-cols, .grid.two, .grid.three { grid-template-columns: 1fr; }
  .cust-head { flex-direction: column; }
  .cust-stats > div { border-right: none; border-bottom: 1px solid var(--line); }
}
.tabs { overflow-x: auto; scrollbar-width: thin; }
.tab { white-space: nowrap; flex-shrink: 0; }

/* ---------------- storage & documents (Stage 1b) ---------------- */
.check { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; font-weight: 500; }
.warn-text { color: var(--warn); }
.sec-head > span { display: flex; gap: 8px; }
.doc-upload { display: grid; grid-template-columns: 1fr 170px auto; gap: 8px; align-items: center;
  border: 1px dashed #B7C1CF; border-radius: 8px; padding: 12px; margin-bottom: 12px; background: var(--panel-2); }
.doc-upload input[type=text] { grid-column: 1 / -1; }
.doc-name { display: flex; align-items: center; gap: 8px; }
.doc-kind { font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--neutral-bg);
  color: var(--ink-dim); min-width: 38px; text-align: center; }
@media (max-width: 960px) { .doc-upload { grid-template-columns: 1fr; } }

/* ---------------- help desk (Stage 2) ---------------- */
.badge.quiet { background: var(--neutral-bg); color: var(--ink-dim); }
.tk-views { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.chip { border-radius: 999px; padding: 6px 14px; font-size: 13.5px; }
.chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.tk-table td:first-child { white-space: nowrap; }
.tk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.tk-meta-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.tk-desc { white-space: pre-wrap; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; font-size: 14.5px; }
.thread { display: flex; flex-direction: column; gap: 10px; }
.msg { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; background: var(--panel); }
.msg.internal { background: var(--warn-bg); border-color: #EBD3A2; }
.msg.customer { border-left: 3px solid var(--blue); }
.msg.public { border-left: 3px solid var(--ok); }
.msg-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.msg-body { white-space: pre-wrap; font-size: 14.5px; }
.composer { margin-top: 14px; border: 1px solid #EBD3A2; background: #FFFBF2; border-radius: 8px; padding: 10px; }
.composer.public { border-color: #B9D9C6; background: #F4FBF7; }
.composer textarea { width: 100%; background: #fff; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-bottom: 8px; }
.seg-btn { border: none; border-radius: 0; background: #fff; padding: 6px 12px; font-size: 13.5px; }
.seg-btn + .seg-btn { border-left: 1px solid var(--line); }
.seg-btn.active { background: var(--navy); color: #fff; }
.tk-activity { margin-top: 18px; }
.tk-activity summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.tk-attach { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.tk-side { display: flex; flex-direction: column; gap: 12px; }
.side-block { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--panel-2); }
.side-block h4 { margin: 0 0 8px; font-size: 14px; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.side-block label { display: block; font-size: 12.5px; color: var(--ink-dim); margin: 8px 0 3px; font-weight: 500; }
.side-block label:first-child { margin-top: 0; }
.side-block select, .side-block input:not([type=checkbox]) { width: 100%; }
.side-block .ro { font-size: 14px; }
.side-links { margin-top: 10px; font-size: 13.5px; }
.sla-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; padding: 3px 0; }
.sla-met { color: var(--ok); } .sla-missed, .sla-breached { color: var(--crit); font-weight: 600; }
.sla-at_risk { color: var(--warn); font-weight: 600; } .sla-ok { color: var(--ink); }
.time-row { display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 13.5px; padding: 4px 0;
  border-bottom: 1px solid var(--line); }
.time-row > div { flex-basis: 100%; }
.time-form { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 8px; align-items: center; }
.time-form input#ttNote { grid-column: 1 / -1; }
.time-form button { grid-column: 1 / -1; }
.btn-link { display: inline-block; margin-right: 12px; font-size: 13.5px; }
.alert-line { margin-bottom: 4px; }
.cat-pill { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 4px 2px 12px; margin: 0 6px 6px 0; font-size: 13.5px; background: var(--panel); }
.cat-pill.retired { color: var(--ink-faint); text-decoration: line-through; }
.cat-pill.retired button { text-decoration: none; }
.cust-cols.three { grid-template-columns: repeat(3, 1fr); }
input[data-sla-r], input[data-sla-z] { width: 100px; }
@media (max-width: 960px) {
  .tk-layout { grid-template-columns: 1fr; }
  .tk-side { order: -1; }
  .cust-cols.three { grid-template-columns: 1fr; }
}

/* ---------------- contracts (Stage 4) ---------------- */
.grid.three-even { grid-template-columns: repeat(3, 1fr); gap: 0 12px; }
.cust-coverage { margin: -4px 0 14px; }
.contract-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin-bottom: 8px;
  border-left: 4px solid var(--ok); background: var(--panel); }
.contract-card.scheduled, .contract-card.draft { border-left-color: var(--info); }
.contract-card.expired { border-left-color: var(--warn); opacity: .85; }
.contract-card.cancelled { border-left-color: var(--line); opacity: .7; }
.kc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.kc-money { margin-left: auto; font-family: var(--display); font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums; }
.kc-actions { margin-top: 4px; display: flex; gap: 4px; }
.meter-line { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; }
.meter-line .meter { flex: 1; max-width: 260px; height: 8px; background: var(--neutral-bg); border-radius: 4px; overflow: hidden; }
.meter-line .meter span { display: block; height: 100%; background: var(--blue); }
@media (max-width: 960px) { .grid.three-even { grid-template-columns: 1fr 1fr; } }

/* ---------------- billing (Stage 5) ---------------- */
.age-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; }
.age-col { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--panel-2); }
.age-col span { display: block; font-size: 12.5px; color: var(--ink-dim); }
.age-col b { font-family: var(--display); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.age-col.late b { color: var(--warn); }
.doc-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.bill-to { margin-top: 8px; line-height: 1.45; }
.doc-dates { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 18px; align-self: start; }
.doc-dates span { display: block; font-size: 12.5px; color: var(--ink-dim); }
.doc-dates input { width: 90px; }
.doc-lines.editable input.dl-desc { width: 100%; min-width: 220px; }
.doc-lines.editable input.num { width: 90px; text-align: right; }
.doc-lines.editable td { padding: 6px; }
.doc-foot { display: grid; grid-template-columns: 1fr 320px; gap: 24px; margin-top: 12px; align-items: start; }
.doc-notes textarea { width: 100%; }
.doc-adjust { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.doc-adjust label { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 13.5px; }
.doc-adjust input { width: 90px; text-align: right; }
.doc-totals { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.doc-totals td { padding: 4px 0; }
.doc-totals td:last-child { text-align: right; }
.doc-totals tr.grand td { font-weight: 700; font-size: 16px; border-top: 1px solid var(--line); padding-top: 8px; }
.doc-actions { flex-wrap: wrap; align-items: center; }
tr.struck td { text-decoration: line-through; color: var(--ink-faint); }
@media (max-width: 960px) {
  .age-row { grid-template-columns: 1fr 1fr; }
  .doc-foot { grid-template-columns: 1fr; }
  .doc-lines.editable { display: block; overflow-x: auto; }
}

/* ---------------- sales (Stage 6) ---------------- */
.tk-views .spacer { flex: 1; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(165px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.board-col { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px; min-height: 160px;
  display: flex; flex-direction: column; gap: 8px; transition: background .12s; }
.board-col.drop { background: var(--info-bg); border-color: var(--blue); }
.board-col header { display: flex; flex-direction: column; gap: 2px; padding: 2px 4px 6px; border-bottom: 1px solid var(--line); }
.opp-card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; cursor: pointer; }
.opp-card:hover, .opp-card:focus-visible { border-color: var(--blue); }
.opp-card.due { border-left: 3px solid var(--warn); }
.opp-card.dragging { opacity: .5; }
.opp-meta { display: flex; justify-content: space-between; font-size: 13px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.board-empty { text-align: center; margin: 12px 0; }
.stage-track { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 12px; }
.stage-step { font-size: 13px; padding: 5px 10px; border-radius: 999px; }
.stage-step.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.act-composer { border-color: var(--line); background: var(--panel-2); }
.act-row { display: flex; justify-content: flex-end; gap: 10px; align-items: center; margin-top: 8px; }
.struck-text { text-decoration: line-through; color: var(--ink-faint); }

/* ---------------- command center (Phase 2) ---------------- */
.dash-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.dash-bar .spacer { flex: 1; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; align-items: start; }
#pageView .dash-grid ~ * { max-width: none; }
.dash-w { padding: 14px 16px; margin: 0; }
.dash-w.off { opacity: .55; border-style: dashed; }
.dash-w header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.dash-w h3 { font-size: 15px; margin: 0; }
.dash-edit { display: flex; align-items: center; gap: 4px; }
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin-bottom: 10px; }
.dash-stat { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); min-width: 0; }
.dash-stat:hover { border-color: var(--blue); background: var(--info-bg); }
.dash-stat span { font-size: 12.5px; color: var(--ink-dim); font-weight: 500; }
.dash-stat b { font-family: var(--display); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; }
.dash-stat b small { font-family: var(--sans); font-size: 12px; color: var(--ink-faint); font-weight: 400; }
.dash-stat.ok b { color: var(--ok); } .dash-stat.warn b { color: var(--warn); } .dash-stat.crit b { color: var(--crit); }
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 7px 4px;
  border-top: 1px solid var(--line); cursor: pointer; font-size: 14px; }
.dash-list li:hover, .dash-list li:focus-visible { background: var(--panel-2); }
.dash-list li > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-table td, .dash-table th { padding: 6px 8px; }
.ok-text { color: var(--ok); }
.age-mini, .funnel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 8px; }
.funnel { grid-template-columns: repeat(6, 1fr); }
.age-mini div, .funnel div { background: var(--panel-2); border-radius: 6px; padding: 6px; text-align: center; min-width: 0; }
.age-mini span, .funnel span { display: block; font-size: 11.5px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.age-mini b, .funnel b { font-variant-numeric: tabular-nums; font-size: 14px; }
@media (max-width: 960px) { .dash-grid { grid-template-columns: 1fr; } .funnel { grid-template-columns: repeat(3, 1fr); } }
#pageBody:has(.dash-grid) { max-width: none; }

/* ---------------- automation (Phase 11) ---------------- */
.auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-bottom: 8px; }
.auto-rule { margin: 0; padding: 14px 16px; border-left: 3px solid var(--line); }
.auto-rule.on { border-left-color: var(--ok); }
.auto-rule header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.auto-rule h3 { margin: 0; font-size: 15px; }
.auto-field { margin-bottom: 8px; }
.auto-field input { width: 110px; }
.auto-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.auto-foot > span:last-child { display: flex; gap: 6px; }
.switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.switch input { width: 34px; height: 18px; accent-color: var(--ok); }

/* ---------------- help & health (Phases 12/15) ---------------- */
.help-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; }
.help-toc { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 70px; align-self: start; }
.help-toc .link-btn { text-align: left; padding: 7px 10px; border-radius: 6px; color: var(--ink); }
.help-toc .link-btn.on { background: var(--info-bg); color: var(--blue); font-weight: 600; }
.md { max-width: 860px; line-height: 1.6; }
.md .md-h { font-family: var(--display); margin: 22px 0 8px; }
.md h2.md-h { font-size: 26px; margin-top: 0; } .md h3.md-h { font-size: 19px; } .md h4.md-h { font-size: 16px; }
.md code { font-family: var(--mono); font-size: .9em; background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.md pre.md-code { background: var(--navy); color: #E6EEFB; padding: 12px; border-radius: 8px; overflow-x: auto; }
.md-table { overflow-x: auto; margin: 8px 0 14px; }
.md li { margin: 3px 0; }
.health-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 600; font-size: 16px;
  padding: 12px 14px; border-radius: 8px; margin-bottom: 12px; background: var(--ok-bg); }
.health-top.warn { background: var(--warn-bg); } .health-top.fail { background: var(--crit-bg); }
.health-top button { margin-left: auto; }
@media (max-width: 960px) { .help-layout { grid-template-columns: 1fr; } .help-toc { position: static; flex-direction: row; flex-wrap: wrap; } }
.sched td, .sched th { padding: 6px 8px; white-space: nowrap; } .sched td:first-child { white-space: normal; }
.asset-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; }
.dash-stat.on { border-color: var(--blue); background: var(--info-bg); }
@media (max-width: 960px) { .asset-grid { grid-template-columns: 1fr; } }
.mail-card { margin: 0 0 10px; padding: 12px 14px; }
.mail-subj { font-weight: 600; margin: 2px 0; }
.mail-body { white-space: pre-wrap; font-family: var(--sans); font-size: 13.5px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 10px; max-height: 220px; overflow: auto; margin: 6px 0; }
.mail-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.notice.warn { background: var(--crit-bg); }

/* =====================================================================
   Section colors: every area has its own accent so you always know where
   you are. Set by setActiveNav() as <body data-section="...">.
   ===================================================================== */
:root { --accent: #2563C9; --accent-soft: #E6EEFB; --accent-ink: #1D4E9E; }
body[data-section="command"]   { --accent: #4F46E5; --accent-soft: #EEF0FF; --accent-ink: #3730A3; }
body[data-section="devices"]   { --accent: #0284C7; --accent-soft: #E3F4FC; --accent-ink: #075985; }
body[data-section="customers"] { --accent: #0D9488; --accent-soft: #E0F5F2; --accent-ink: #115E59; }
body[data-section="tickets"]   { --accent: #D97706; --accent-soft: #FEF3E2; --accent-ink: #92400E; }
body[data-section="sales"]     { --accent: #7C3AED; --accent-soft: #F1EAFE; --accent-ink: #5B21B6; }
body[data-section="billing"]   { --accent: #059669; --accent-soft: #E3F7EF; --accent-ink: #065F46; }
body[data-section="people"]    { --accent: #DB2777; --accent-soft: #FDE8F2; --accent-ink: #9D174D; }
body[data-section="admin"]     { --accent: #475569; --accent-soft: #EDF0F4; --accent-ink: #334155; }
body[data-section="help"]      { --accent: #0891B2; --accent-soft: #E0F5FA; --accent-ink: #155E75; }

/* sidebar: a colored dot per section, active item in its section color */
#sidebar .nav-item { position: relative; transition: background .18s ease, color .18s ease, padding-left .18s ease; }
#sidebar .nav-item::before { content: ""; position: absolute; left: 4px; top: 50%; width: 4px; height: 0; border-radius: 3px;
  background: var(--dot, #64748B); transform: translateY(-50%); transition: height .2s ease; }
#sidebar .nav-item:hover::before { height: 40%; }
#sidebar .nav-item.active::before { height: 70%; }
#sidebar .nav-item:hover { padding-left: 14px; }
#dashNav { --dot: #818CF8; } #fleetNav, #assetsNav, #softwareBtn, #reportsBtn { --dot: #38BDF8; }
#customersNav { --dot: #2DD4BF; } #ticketsBtn { --dot: #FBBF24; } #salesNav { --dot: #A78BFA; } #billingBtn { --dot: #34D399; }
#schedNav, #teamBtn { --dot: #F472B6; } #helpNav { --dot: #22D3EE; }
#sidebar .nav-item.active { background: color-mix(in srgb, var(--dot, #64748B) 28%, transparent) !important; color: #fff; }

/* page header: a colored band and accent line */
#pageView .page-head, #pageView > header, #pageTitle { position: relative; }
#pageTitle { padding-left: 16px; }
#pageTitle::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 6px; border-radius: 4px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #fff)); }
.topbar { border-bottom: 3px solid var(--accent); transition: border-color .3s ease; }
.sec-head h3 { position: relative; padding-bottom: 3px; }
.sec-head h3::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 28px; height: 3px; border-radius: 2px; background: var(--accent); }
.chip.active, .seg-btn.active, .stage-step.on { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.dash-w { border-top: 3px solid var(--accent); }
.dash-stat:hover, .cust-stats > div:hover { border-color: var(--accent); background: var(--accent-soft); }
.side-block h4, .dash-w h3 { color: var(--accent-ink); }
a, .link-btn { transition: color .15s ease; }

/* =====================================================================
   Motion. Pages slide up into place, cards and rows cascade in, cards
   lift on hover, dialogs and toasts glide. All of it switches off for
   "reduce motion" users.
   ===================================================================== */
@keyframes hh-page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hh-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes hh-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hh-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes hh-slide-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes hh-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

.enter { animation: hh-page-in .32s cubic-bezier(.2,.7,.2,1) both; }
.enter .dash-w, .enter .card, .enter .side-block, .enter .auto-rule, .enter .board-col, .enter .mail-card,
.enter .cust-stats > div, .enter .dash-stat, .enter .age-col { animation: hh-rise .45s cubic-bezier(.2,.7,.2,1) both; }
.enter .dash-w:nth-child(1), .enter .card:nth-child(1), .enter .board-col:nth-child(1) { animation-delay: .03s; }
.enter .dash-w:nth-child(2), .enter .card:nth-child(2), .enter .board-col:nth-child(2) { animation-delay: .07s; }
.enter .dash-w:nth-child(3), .enter .card:nth-child(3), .enter .board-col:nth-child(3) { animation-delay: .11s; }
.enter .dash-w:nth-child(4), .enter .card:nth-child(4), .enter .board-col:nth-child(4) { animation-delay: .15s; }
.enter .dash-w:nth-child(5), .enter .card:nth-child(5), .enter .board-col:nth-child(5) { animation-delay: .19s; }
.enter .dash-w:nth-child(6), .enter .card:nth-child(6), .enter .board-col:nth-child(6) { animation-delay: .23s; }
.enter .dash-w:nth-child(7), .enter .card:nth-child(7) { animation-delay: .27s; }
.enter .dash-w:nth-child(8), .enter .card:nth-child(8) { animation-delay: .31s; }
.enter .dash-w:nth-child(n+9), .enter .card:nth-child(n+9) { animation-delay: .35s; }
.enter .dash-stat:nth-child(2), .enter .cust-stats > div:nth-child(2) { animation-delay: .06s; }
.enter .dash-stat:nth-child(3), .enter .cust-stats > div:nth-child(3) { animation-delay: .12s; }
.enter .dash-stat:nth-child(n+4), .enter .cust-stats > div:nth-child(n+4) { animation-delay: .18s; }
.enter tbody tr:nth-child(-n+18) { animation: hh-fade .4s ease both; }
.enter tbody tr:nth-child(2) { animation-delay: .03s; } .enter tbody tr:nth-child(3) { animation-delay: .06s; }
.enter tbody tr:nth-child(4) { animation-delay: .09s; } .enter tbody tr:nth-child(5) { animation-delay: .12s; }
.enter tbody tr:nth-child(6) { animation-delay: .15s; } .enter tbody tr:nth-child(n+7) { animation-delay: .18s; }

.dash-w, .card, .auto-rule, .opp-card, .mail-card, .side-block { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.dash-w:hover, .auto-rule:hover, .opp-card:hover, .mail-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15,35,64,.10); }
.dash-stat { transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.dash-stat:hover { transform: translateY(-2px); }
tbody tr.click { transition: background .15s ease; }
tbody tr.click:hover td { background: var(--accent-soft); }
button, .btn-link { transition: transform .12s ease, box-shadow .15s ease, background .15s ease; }
button.primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,201,.25); }
button:active { transform: translateY(0) scale(.98); }
#modalBox { animation: hh-pop .22s cubic-bezier(.2,.7,.2,1) both; }
#modalOverlay:not(.hidden) { animation: hh-fade .18s ease both; }
#toast.show { animation: hh-slide-in .28s cubic-bezier(.2,.7,.2,1) both; }
.badge { transition: transform .15s ease; } tr:hover .badge { transform: scale(1.04); }
.dim:only-child:not(:empty) { background: linear-gradient(90deg, transparent 0, var(--accent-soft) 50%, transparent 100%);
  background-size: 800px 100%; animation: hh-shimmer 1.4s linear infinite; border-radius: 6px; padding: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body[data-section="docs"] { --accent: #0891B2; --accent-soft: #E0F5FA; --accent-ink: #155E75; }
body[data-section="help"] { --accent: #475569; --accent-soft: #EDF0F4; --accent-ink: #334155; }
#kbNav { --dot: #22D3EE; } #helpNav { --dot: #94A3B8; }
.vault td { vertical-align: middle; }
.article-row { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; cursor: pointer; background: var(--panel); transition: border-color .15s ease, transform .15s ease; }
.article-row:hover { border-color: var(--accent); transform: translateX(3px); }
.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.kb-card { margin: 0; padding: 14px; cursor: pointer; border-top: 3px solid var(--accent); }
.kb-card h4 { margin: 8px 0 4px; font-size: 15px; }
.kb-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15,35,64,.10); }
.article-body { margin: 10px 0 16px; }
#leadsNav { --dot: #A78BFA; }
.lead-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.lead-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.convert-btn { background: linear-gradient(135deg, #059669, #10B981) !important; border-color: #059669 !important; }
.convert-btn:hover { box-shadow: 0 6px 16px rgba(5,150,105,.35) !important; }
.contact-log li { align-items: flex-start; }
.contact-log .log-text { white-space: pre-wrap; margin: 2px 0; }
.lead-person { padding: 4px 0; border-bottom: 1px solid var(--line); }
.act-composer .seg { flex-wrap: wrap; }
.side-block textarea { width: 100%; }
.cust-toolbar { align-items: center; }
.first-time { font-size: 12.5px; color: var(--ink-dim); margin-top: 6px; line-height: 1.4; }
.setup-steps { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); font-size: 13.5px; }
.setup-steps ol { margin: 8px 0 10px; padding-left: 18px; } .setup-steps li { margin: 4px 0; }
#totpSecret { word-break: break-all; }
#mileageNav { --dot: #FBBF24; } .mile-table td { vertical-align: top; }
.cust-toolbar .check { white-space: nowrap; }
.form-sec { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-ink); }
.form-sec:first-child { margin-top: 0; }
.ind-add { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.ind-add input { flex: 1; }
/* ---- calendar ---- */
body[data-section="calendar"] { --accent: #EA580C; --accent-soft: #FFF0E6; --accent-ink: #9A3412; }
#calendarNav { --dot: #FB923C; }
.cal-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.cal-bar .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cal-bar .seg button { border: 0; border-radius: 0; padding: 6px 12px; background: var(--panel); }
.cal-bar .seg button + button { border-left: 1px solid var(--line); }
.cal-bar .seg button.active { background: var(--accent); color: #fff; }
.cal-title { font-size: 16px; margin-right: auto; }
#calNew { margin-left: auto; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--ink-dim); margin-bottom: 8px; }
.cal-legend i, .cal-head i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.cal-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 10px; max-height: 72vh; background: var(--panel); }
.cal-grid { display: grid; grid-template-columns: 64px repeat(var(--cols), minmax(150px, 1fr)); grid-template-rows: auto calc(var(--rows) * var(--row)); min-width: max-content; }
.cal-corner, .cal-head { position: sticky; top: 0; z-index: 3; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.cal-head { padding: 8px 10px; font-weight: 600; font-size: 13px; border-left: 1px solid var(--line); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cal-head.today { color: var(--accent-ink); background: var(--accent-soft); }
.cal-times { grid-row: 2; }
.cal-time { height: var(--row); font-size: 11px; color: var(--ink-dim); text-align: right; padding-right: 6px; transform: translateY(-7px); }
.cal-col { grid-row: 2; position: relative; border-left: 1px solid var(--line); }
.cal-col.off { background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(217,119,6,.07) 8px 16px); }
.cal-slot { height: var(--row); border-top: 1px dashed rgba(120,130,150,.15); cursor: pointer; }
.cal-slot.hour { border-top: 1px solid rgba(120,130,150,.28); }
.cal-slot.outside { background: rgba(120,130,150,.08); }
.cal-slot:hover { background: var(--accent-soft); }
.cal-slot.drop { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.cal-appt { position: absolute; left: 4px; right: 4px; z-index: 2; border-radius: 6px; padding: 3px 6px; font-size: 12px; line-height: 1.3; overflow: hidden; cursor: pointer;
  background: color-mix(in srgb, var(--c) 14%, var(--panel)); border-left: 4px solid var(--c); color: var(--ink); box-shadow: 0 1px 3px rgba(15,35,64,.12);
  transition: transform .12s ease, box-shadow .12s ease; }
.cal-appt:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(15,35,64,.18); z-index: 4; }
.cal-appt b { font-weight: 600; } .cal-appt .who { font-size: 11px; color: var(--ink-dim); }
.cal-appt.st-confirmed { border-left-style: double; } .cal-appt.st-completed { opacity: .65; }
.cal-appt.st-cancelled { opacity: .45; text-decoration: line-through; }
.cal-appt.dragging { opacity: .5; }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: #DC2626; z-index: 3; pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #DC2626; }
.visit { font-size: 13px; padding: 2px 0; }
.visit-form { display: grid; gap: 6px; margin: 6px 0; }
.visit-form input:not([type=checkbox]), .visit-form select { width: 100%; min-width: 0; }
.vf-row { display: flex; gap: 6px; } .vf-row > * { flex: 1; } .vf-row button.link-btn { flex: 0; white-space: nowrap; }
.visit-next { font-size: 13px; margin-bottom: 4px; }
.vf-links { display: flex; gap: 10px; flex-wrap: wrap; }
.visit-past summary { cursor: pointer; margin-top: 4px; }
.visit-chip { display: inline-block; margin-top: 3px; font-size: 11.5px; color: #9A3412; background: #FFF0E6; border-radius: 10px; padding: 1px 8px; }
.part-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.part-add { display: grid; gap: 6px; margin-top: 6px; }
.part-add input:not([type=checkbox]) { width: 100%; min-width: 0; }
.crit-text { color: var(--crit, #C0392B); } .ok-text { color: var(--ok, #1E8E5A); }
/* ---- My day (phone first) ---- */
.md-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.md-bar button { font-size: 22px; padding: 4px 16px; }
.md-date { text-align: center; } .md-date b { display: block; font-size: 18px; } .md-date span { color: var(--ink-dim); font-size: 13px; }
.md-who { width: 100%; margin-bottom: 10px; }
.job-card { border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: 12px; padding: 12px; margin-bottom: 12px; background: var(--panel); }
.job-card.st-onsite { border-left-color: #D97706; } .job-card.st-done { border-left-color: #059669; opacity: .85; }
.job-top { display: flex; gap: 12px; align-items: flex-start; }
.job-time { font-weight: 700; font-size: 15px; min-width: 64px; } .job-time span { display: block; font-weight: 400; font-size: 12px; color: var(--ink-dim); }
.job-main { flex: 1; min-width: 0; } .job-main b { font-size: 15.5px; }
.job-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.job-btn { flex: 1; min-width: 92px; text-align: center; padding: 10px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2);
  font-weight: 600; text-decoration: none; color: var(--ink); font-size: 14px; }
.job-go { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .job-go button { flex: 1; }
button.big { padding: 12px 14px; font-size: 15px; }
.job-times { margin-top: 6px; }
.md-tomorrow { text-align: center; }
.sig-wrap { position: relative; border: 2px dashed var(--line); border-radius: 10px; background: #fff; touch-action: none; }
.sig-wrap canvas { width: 100%; height: auto; display: block; touch-action: none; cursor: crosshair; }
.sig-line { position: absolute; left: 12px; right: 12px; bottom: 28px; border-top: 1px solid #c8d0dc; font-size: 11px; color: #8a94a6; padding-top: 2px; pointer-events: none; }
.signoff { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.signoff img { width: 180px; max-width: 45%; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
#mydayNav { --dot: #FB923C; }
.md-check { list-style: none; padding-left: 4px; } .md-box { font-size: 15px; color: var(--accent-ink); margin-right: 2px; }
.seg-radio { display: flex; flex-direction: column; gap: 2px; }
.pick-list { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin-bottom: 10px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 12px; }
/* ---- pictures & files ---- */
.article-body img.kb-img { display: block; max-width: 100%; border-radius: 8px; border: 1px solid var(--line); margin: 6px 0; cursor: zoom-in; }
.kb-files { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin: 6px 0 10px; }
.kb-file { width: 180px; }
.kb-file img { width: 180px; height: 130px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; display: block; }
.kb-doc { display: block; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); text-decoration: none; word-break: break-word; }
.btn-like { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--panel); font-size: 13px; font-weight: 600; margin-left: 6px; }
.btn-like:hover { border-color: var(--accent); }
.zoom-overlay { position: fixed; inset: 0; background: rgba(10,18,30,.86); z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: zoom-out; }
.zoom-overlay img { max-width: 94vw; max-height: 86vh; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.zoom-hint { color: #cfd8e3; font-size: 12px; margin-top: 10px; }
/* ---- team chat ---- */
body[data-section="chat"] { --accent: #E11D48; --accent-soft: #FFE8EE; --accent-ink: #9F1239; }
#chatNav { --dot: #FB7185; }
.nav-item { position: relative; }
.nav-badge { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: #64748B; color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.nav-badge.hot { background: #E11D48; }
.chat-wrap { display: grid; grid-template-columns: 240px 1fr; height: calc(100vh - 190px); min-height: 420px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.chat-side { border-right: 1px solid var(--line); overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; background: var(--panel-2); }
.chat-side input, .chat-side select { width: 100%; margin: 4px 0 6px; }
.chat-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dim); margin: 10px 6px 4px; }
.chat-conv { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: 0; background: none; padding: 7px 8px; border-radius: 6px; color: var(--ink); font-size: 14px; cursor: pointer; }
.chat-conv:hover { background: var(--accent-soft); } .chat-conv.active { background: var(--accent); color: #fff; }
.chat-main { display: flex; flex-direction: column; min-width: 0; }
.chat-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.chat-top > div { flex: 1; min-width: 0; }
.chat-back { display: none; font-size: 22px; text-decoration: none; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 10px 14px; }
.chat-more { display: block; margin: 0 auto 8px; }
.chat-day { text-align: center; margin: 12px 0 6px; } .chat-day span { font-size: 11px; color: var(--ink-dim); background: var(--panel-2); padding: 2px 10px; border-radius: 10px; }
.chat-msg { padding: 5px 8px; border-radius: 8px; } .chat-msg:hover { background: var(--panel-2); }
.chat-msg.at-me { background: var(--accent-soft); border-left: 3px solid var(--accent); }
.chat-msg.click { cursor: pointer; }
.chat-meta { font-size: 12px; color: var(--ink-dim); display: flex; gap: 6px; align-items: center; }
.chat-meta b { color: var(--ink); font-size: 13px; }
.chat-tools { margin-left: auto; display: none; gap: 8px; } .chat-msg:hover .chat-tools { display: inline-flex; }
.chat-body { font-size: 14px; line-height: 1.45; word-wrap: break-word; }
.chat-at { background: rgba(37,99,235,.12); border-radius: 4px; padding: 0 2px; } .chat-at.me { background: rgba(225,29,72,.18); font-weight: 600; }
.chat-compose { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.chat-compose textarea { flex: 1; resize: none; }
@media (max-width: 760px) {
  .chat-wrap { grid-template-columns: 1fr; height: calc(100vh - 150px); }
  .chat-wrap .chat-main { display: none; } .chat-wrap.show-conv .chat-side { display: none; } .chat-wrap.show-conv .chat-main { display: flex; }
  .chat-back { display: inline-block; } .chat-tools { display: inline-flex; }
}
.setup-list li { margin: 6px 0; line-height: 1.5; }