/* Cascade Spaces CRM — shared glassmorphism design system. All three role dashboards and every module use these tokens. */
:root {
  --sidebar: #142433; --sidebar-2: #1b3146; --bg: #EAF0F7;
  --glass: rgba(255,255,255,.72); --glass-strong: rgba(255,255,255,.86); --glass-border: rgba(255,255,255,.80); --line: rgba(20,36,51,.10);
  --brand-gold: #C3943D; --brand-brown: #A26E38; --brand-gold-soft: #E3C98F; /* sampled from the Cascade Spaces logo */
  --blue: #2478ED; --green: #13A878; --orange: #F39A24; --red: #E84358; --purple: #8150DB; --teal: #109EAB;
  --blue-rgb: 36,120,237; --green-rgb: 19,168,120; --orange-rgb: 243,154,36; --red-rgb: 232,67,88; --purple-rgb: 129,80,219; --teal-rgb: 16,158,171; --grey-rgb: 102,117,138;
  --text: #172536; --muted: #5a6a80; --link: #1a63cc;
  --radius: 18px; --radius-sm: 12px; --shadow: 0 10px 30px rgba(20,36,51,.08), 0 1px 0 rgba(255,255,255,.7) inset;
  --blur: 14px; --font: Inter, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --chart-1: #2478ED; --chart-2: #13A878; --chart-3: #F39A24; --chart-4: #8150DB; --chart-5: #109EAB; --chart-6: #E84358;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 14px/1.5 var(--font); color: var(--text); background: var(--bg); min-height: 100vh;
  background-image: radial-gradient(900px 500px at 8% -5%, rgba(36,120,237,.22), transparent 60%), radial-gradient(800px 480px at 100% 0%, rgba(129,80,219,.16), transparent 60%), radial-gradient(900px 600px at 70% 110%, rgba(16,158,171,.16), transparent 60%);
  background-attachment: fixed; }
a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; }
h1,h2,h3,h4 { margin: 0; line-height: 1.25; } h1 { font-size: 22px; } h2 { font-size: 16px; } h3 { font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
:focus-visible { outline: 3px solid rgba(36,120,237,.55); outline-offset: 2px; border-radius: 6px; }
.muted { color: var(--muted); } .small { font-size: 12px; } .right { text-align: right; } .nowrap { white-space: nowrap; } .mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }
.sidebar { background: linear-gradient(180deg, var(--sidebar), #0f1b28); color: #cfd9e6; padding: 18px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; z-index: 40; }
/* brand lock-up: "CS" tile + company name */
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; color: #fff; font-weight: 700; letter-spacing: .2px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand .logo { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, var(--blue), var(--purple)); display: grid; place-items: center; font-weight: 800; color: #fff; box-shadow: 0 6px 16px rgba(36,120,237,.4); }
.brand small { display: block; font-weight: 500; color: #8da2b8; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav h6 { margin: 16px 10px 6px; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: #7e93aa; font-weight: 600; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; color: #cfd9e6; font-weight: 500; position: relative; }
.nav a:hover { background: rgba(255,255,255,.07); text-decoration: none; color: #fff; }
.nav a.active { background: var(--blue); color: #fff; box-shadow: 0 8px 18px rgba(36,120,237,.35); }
.nav .badge-n { margin-left: auto; background: var(--red); color: #fff; font-size: 11px; border-radius: 99px; padding: 0 7px; min-width: 20px; text-align: center; line-height: 20px; }
.sidebar-foot { margin-top: auto; padding-top: 14px; font-size: 11px; color: #7e93aa; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: rgba(234,240,247,.78); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); border-bottom: 1px solid var(--glass-border); }
.icon-btn.hamburger { display: none; }
.search { flex: 1; max-width: 520px; position: relative; }
.search input { width: 100%; padding-left: 38px; border-radius: 99px; background: var(--glass-strong); }
.search .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-results { position: absolute; top: 46px; left: 0; right: 0; background: #fff; border-radius: 14px; box-shadow: 0 18px 40px rgba(20,36,51,.18); padding: 6px; display: none; max-height: 70vh; overflow: auto; z-index: 50; }
.search-results.open { display: block; }
.search-results a { display: block; padding: 8px 10px; border-radius: 9px; color: var(--text); } .search-results a:hover, .search-results a:focus { background: #eef3fa; text-decoration: none; }
.search-results h6 { margin: 8px 10px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn { position: relative; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--glass-border); background: var(--glass-strong); display: grid; place-items: center; cursor: pointer; color: var(--text); }
.icon-btn:hover { background: #fff; }
.dot { position: absolute; top: 5px; right: 5px; background: var(--red); color: #fff; font-size: 10px; min-width: 17px; height: 17px; line-height: 17px; border-radius: 99px; text-align: center; padding: 0 4px; font-weight: 700; }
.menu { position: relative; }
.menu-panel { position: absolute; right: 0; top: 48px; min-width: 240px; background: #fff; border-radius: 14px; box-shadow: 0 18px 40px rgba(20,36,51,.2); padding: 8px; display: none; z-index: 60; }
.menu-panel.open { display: block; }
.menu-panel a, .menu-panel button.link { display: flex; width: 100%; gap: 10px; align-items: center; padding: 9px 11px; border-radius: 9px; color: var(--text); background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }
.menu-panel a:hover, .menu-panel button.link:hover { background: #eef3fa; text-decoration: none; }
.menu-panel .sep { height: 1px; background: var(--line); margin: 6px 0; }
.notif-panel { width: 360px; max-width: calc(100vw - 24px); padding: 0; right: -60px; }
.notif-panel header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.notif-list { max-height: 60vh; overflow: auto; }
.notif-item { display: block; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--text); } .notif-item.unread { background: #f1f6fe; } .notif-item:hover { text-decoration: none; background: #eaf1fc; }
.notif-item b { display: block; } .notif-item span { color: var(--muted); font-size: 12px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--purple)); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 13px; flex: none; }
.user-chip { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 3px 8px 3px 3px; border-radius: 99px; border: 1px solid var(--glass-border); background: var(--glass-strong); }
.user-chip .who { line-height: 1.15; } .user-chip small { color: var(--muted); display: block; font-size: 11px; }
.content { padding: 22px 24px 60px; max-width: 1500px; width: 100%; }
.crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; display: flex; gap: 6px; flex-wrap: wrap; } .crumbs a { color: var(--muted); } .crumbs span.sep { opacity: .5; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- glass surfaces ---------- */
.card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; backdrop-filter: blur(var(--blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--blur)) saturate(140%); min-width: 0; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .card, .topbar { background: rgba(255,255,255,.96); } .topbar { background: #eaf0f7; } }
.card > header, .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-head a.more { font-size: 12.5px; }
.grid { display: grid; gap: 16px; } .g2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-main { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }
.stack { display: flex; flex-direction: column; gap: 16px; }

/* ---------- KPI cards (identical component for all roles) ---------- */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px; margin-bottom: 14px; }
.kpis.sub { grid-template-columns: repeat(2, minmax(0,1fr)); }
.kpi { --c: var(--blue); --c-rgb: var(--blue-rgb); display: flex; flex-direction: column; gap: 6px; min-height: 124px; padding: 16px; border-radius: var(--radius); color: var(--text); position: relative; overflow: hidden;
  background: linear-gradient(145deg, rgba(var(--c-rgb), .20), rgba(255,255,255,.74) 62%); border: 1px solid var(--glass-border); box-shadow: var(--shadow), 0 0 0 1px rgba(var(--c-rgb), .10) inset;
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); transition: transform .15s ease, box-shadow .15s ease; }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(var(--c-rgb), .20), var(--shadow); text-decoration: none; }
.kpi::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.kpi .ico { width: 38px; height: 38px; border-radius: 12px; background: var(--c); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 16px rgba(var(--c-rgb), .35); }
.kpi .ico .icon { width: 20px; height: 20px; }
.kpi .val { font-size: 30px; font-weight: 800; letter-spacing: -.5px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi .lbl { font-weight: 600; font-size: 13px; } .kpi .sub { color: var(--muted); font-size: 12px; }
.kpi .top { display: flex; justify-content: space-between; align-items: flex-start; }
.kpi--blue { --c: var(--blue); --c-rgb: var(--blue-rgb); } .kpi--green { --c: var(--green); --c-rgb: var(--green-rgb); } .kpi--orange { --c: var(--orange); --c-rgb: var(--orange-rgb); }
.kpi--red { --c: var(--red); --c-rgb: var(--red-rgb); } .kpi--purple { --c: var(--purple); --c-rgb: var(--purple-rgb); } .kpi--teal { --c: var(--teal); --c-rgb: var(--teal-rgb); }
.kpi.wide { flex-direction: row; align-items: center; gap: 14px; min-height: 92px; } .kpi.wide .val { font-size: 28px; }
.kpi .delta { font-size: 12px; font-weight: 600; } .delta.up { color: #0b7a56; } .delta.down { color: #b42339; }

/* ---------- controls ---------- */
input, select, textarea { font: inherit; color: var(--text); background: var(--glass-strong); border: 1px solid rgba(20,36,51,.16); border-radius: 11px; padding: 9px 12px; min-height: 40px; width: 100%; }
textarea { min-height: 88px; resize: vertical; } input[type=checkbox], input[type=radio] { width: auto; min-height: 0; accent-color: var(--blue); }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(36,120,237,.30); border-color: var(--blue); }
label { font-weight: 600; font-size: 12.5px; display: block; margin-bottom: 4px; } label.inline { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; font-size: 14px; }
.field { margin-bottom: 12px; } .field .hint { color: var(--muted); font-size: 12px; margin-top: 3px; } .req::after { content: " *"; color: var(--red); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 16px; } .form-grid .full { grid-column: 1 / -1; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 11px; border: 1px solid transparent; font: inherit; font-weight: 600; cursor: pointer; background: var(--blue); color: #fff; text-decoration: none; white-space: nowrap; }
.btn:hover { filter: brightness(1.07); text-decoration: none; } .btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.secondary { background: var(--glass-strong); color: var(--text); border-color: rgba(20,36,51,.16); } .btn.secondary:hover { background: #fff; filter: none; }
.btn.danger { background: var(--red); } .btn.success { background: #0e8a62; } .btn.small { min-height: 32px; padding: 4px 11px; font-size: 12.5px; border-radius: 9px; }
.btn.ghost { background: transparent; color: var(--link); } .btn.wa { background: #1a9d56; }
.alert { padding: 11px 14px; border-radius: 12px; margin-bottom: 14px; border: 1px solid; font-weight: 500; }
.alert.success { background: #e5f7ef; border-color: #a4dcc4; color: #0a5c40; } .alert.error { background: #fdebee; border-color: #f4b6c0; color: #8f1d2e; }
.alert.warning { background: #fff4e2; border-color: #f6d29c; color: #7a4a05; } .alert.info { background: #e8f1fe; border-color: #b4d0f7; color: #164f9f; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: rgba(var(--grey-rgb), .14); color: #44546a; white-space: nowrap; }
.chip.blue { background: rgba(var(--blue-rgb), .14); color: #1556b3; } .chip.green { background: rgba(var(--green-rgb), .16); color: #0a6b4b; } .chip.orange { background: rgba(var(--orange-rgb), .20); color: #8a5300; }
.chip.red { background: rgba(var(--red-rgb), .15); color: #a41d31; } .chip.purple { background: rgba(var(--purple-rgb), .15); color: #5a32b0; } .chip.teal { background: rgba(var(--teal-rgb), .17); color: #0a6670; } .chip.grey { background: rgba(var(--grey-rgb), .16); color: #44546a; }
.chip button { all: unset; cursor: pointer; padding: 0 2px; font-weight: 800; }

/* ---------- add-lead source picker ---------- */
.src-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.src-opt { margin: 0; cursor: pointer; } .src-opt input { position: absolute; opacity: 0; pointer-events: none; }
.src-opt span { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(20,36,51,.16); background: var(--glass-strong); font-weight: 600; font-size: 13.5px; min-height: 48px; }
.src-opt input:checked + span { border-color: var(--blue); background: rgba(var(--blue-rgb), .12); box-shadow: 0 0 0 2px rgba(var(--blue-rgb), .25); color: #1556b3; }
.src-opt input:focus-visible + span { outline: 3px solid rgba(36,120,237,.55); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- date filter (segmented control) ---------- */
.period { position: relative; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 16px; }
.seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 13px; background: rgba(255,255,255,.62); border: 1px solid var(--glass-border); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 4px 14px rgba(20,36,51,.06); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); max-width: 100%; }
.seg > a, .seg summary { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 10px; font-weight: 600; font-size: 13px; color: var(--muted); white-space: nowrap; cursor: pointer; list-style: none; text-decoration: none; }
.seg summary::-webkit-details-marker { display: none; }
.seg > a:hover, .seg summary:hover { color: var(--text); background: rgba(20,36,51,.05); text-decoration: none; }
.seg > a.on, .seg summary.on { background: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(var(--blue-rgb), .35); }
.seg summary .icon { width: 15px; height: 15px; }
.seg-custom { position: relative; } .lbl-short { display: none; }
.seg-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; width: 250px; padding: 14px; background: #fff; border-radius: 14px; box-shadow: 0 18px 40px rgba(20,36,51,.22); }
.seg-pop .field { margin-bottom: 10px; } .seg-pop .btn { width: 100%; } .seg-pop .seg-cancel { display: none; }
.period-note { font-size: 12.5px; color: var(--muted); } .period-note b { color: var(--text); } .period-note a { color: var(--muted); margin-left: 4px; font-weight: 700; }
@media (max-width: 720px) {
  .period { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 12px; }
  /* no scroll container and no blur on the control: everything is visible at once and fixed-position children behave */
  .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; width: 100%; overflow: visible; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.85); }
  .lbl-full { display: none; } .lbl-short { display: inline; }
  .seg > a, .seg summary { justify-content: center; padding: 10px 6px; font-size: 13.5px; min-height: 42px; }
  .seg-custom { position: static; display: block; }
  .seg-custom summary { height: 100%; }
  .seg-custom[open]::after { content: ""; position: fixed; inset: 0; background: rgba(15,27,40,.5); z-index: 90; }
  .seg-pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; z-index: 91; border-radius: 20px 20px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(20,36,51,.3); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; box-sizing: border-box; max-width: 100vw; }
  .seg-pop .field { min-width: 0; margin-bottom: 12px; } .seg-pop input[type=date] { min-width: 0; width: 100%; max-width: 100%; -webkit-appearance: none; appearance: none; }
  .seg-pop::before { content: ""; grid-column: 1 / -1; width: 44px; height: 4px; border-radius: 4px; background: rgba(20,36,51,.2); margin: -6px auto 12px; }
  .seg-pop .btn { grid-column: 1 / -1; min-height: 46px; } .seg-pop .seg-cancel { display: inline-flex; margin-top: 8px; }
  .period-note { padding-left: 4px; }
}

/* ---------- bulk selection ---------- */
.selbox { display: inline-flex; align-items: center; margin: 0 8px 0 0; vertical-align: middle; cursor: pointer; } .selbox input { width: 18px; height: 18px; margin: 0; }
.bulkbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; width: min(760px, calc(100vw - 24px)); background: var(--sidebar); color: #fff; border-radius: 16px; box-shadow: 0 18px 44px rgba(20,36,51,.45); }
.bulkbar a { color: var(--brand-gold-soft); } .bulkbar .btn.secondary { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.2); }
.agent-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; max-height: 200px; overflow: auto; padding: 8px 10px; border: 1px solid rgba(20,36,51,.14); border-radius: 12px; background: var(--glass-strong); }
@media (max-width: 720px) { .bulkbar { flex-direction: column; align-items: stretch; gap: 8px; bottom: 10px; padding: 10px 12px; } .bulkbar .actions .btn { flex: 1; } }
@media (max-width: 1180px) { table.cards.leadcards td:nth-child(1) { display: flex; align-items: center; } }

/* ---------- compact lead filter bar ---------- */
.lf-main { display: grid; grid-template-columns: minmax(220px, 3fr) minmax(150px, 1fr) minmax(170px, 1fr) auto; gap: 10px; align-items: center; }
.lf-q { position: relative; } .lf-q .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .lf-q input { padding-left: 38px; }
.lf-more { margin-top: 10px; } .lf-more summary { cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--link); font-size: 13px; list-style: none; padding: 4px 2px; }
.lf-more summary::-webkit-details-marker { display: none; }
.lf-checks { display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: center; min-height: 40px; grid-column: 1 / -1; }
@media (max-width: 900px) { .lf-main { grid-template-columns: 1fr 1fr; gap: 8px; } .lf-q { grid-column: 1 / 2; } .lf-go { grid-column: 2 / 3; grid-row: 1; } .lf-go .btn { width: 100%; }
  .lf-main > div:nth-child(2), .lf-main > div:nth-child(3) { grid-row: 2; } }
@media (max-width: 720px) {
  .card.lf { padding: 12px; } .lf-more { margin-top: 4px; } .lf-more summary { padding: 8px 2px 2px; }
  .lf-main { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lf-q { grid-column: 1 / 4; grid-row: 1; } .lf-go { grid-column: 4; grid-row: 1; } .lf-go .btn { width: 100%; padding: 8px 0; font-size: 0; gap: 0; } .lf-go .btn .icon { width: 20px; height: 20px; }
  .lf-main > div:nth-child(2) { grid-column: 1 / 3; grid-row: 2; } .lf-main > div:nth-child(3) { grid-column: 3 / 5; grid-row: 2; }
  .period { margin-bottom: 8px; } .period-note { display: none; }
}

/* ---------- lead list: compact cards on phones AND tablets (an 11-column table cannot fit below ~1180px without hiding Status/Owner/Actions) ---------- */
@media (max-width: 1180px) {
  table.cards.leadcards, table.cards.leadcards tbody { display: block; width: 100%; }
  table.cards.leadcards thead { display: none; }
  table.cards.leadcards tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; align-items: center; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.7); position: relative; }
  table.cards.leadcards tr.row-warn { box-shadow: inset 4px 0 var(--orange); } table.cards.leadcards tr.row-crit { box-shadow: inset 4px 0 var(--red); }
  table.cards.leadcards td { display: block; padding: 0; border: 0; width: auto; min-width: 0; }
  table.cards.leadcards td::before { display: none; }
  table.cards.leadcards td:nth-child(1)  { order: 0; grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
  table.cards.leadcards td:nth-child(2)  { order: 1; font-size: 15px; }
  table.cards.leadcards td:nth-child(7)  { order: 2; text-align: right; }
  table.cards.leadcards td:nth-child(3)  { order: 3; font-weight: 600; font-size: 14.5px; }
  table.cards.leadcards td:nth-child(4)  { order: 4; text-align: right; font-weight: 600; }
  table.cards.leadcards td:nth-child(5)  { order: 5; font-size: 13px; color: var(--muted); }
  table.cards.leadcards td:nth-child(6)  { order: 6; text-align: right; font-size: 12.5px; color: var(--muted); }
  table.cards.leadcards td:nth-child(8)  { order: 7; }
  table.cards.leadcards td:nth-child(9)  { order: 8; text-align: right; font-size: 12.5px; }
  table.cards.leadcards td:nth-child(10) { order: 9; grid-column: 1 / -1; font-size: 12.5px; }
  table.cards.leadcards td:nth-child(10):empty, table.cards.leadcards td:nth-child(10) .muted:only-child { display: none; }
  table.cards.leadcards td:nth-child(11) { order: 10; grid-column: 1 / -1; } table.cards.leadcards td:nth-child(11) .btn { width: 100%; }
  table.cards.leadcards td:nth-child(1) .chip { margin-left: 6px; }
}

/* ---------- disposition cards ---------- */
.disp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.disp { --c: var(--blue); --c-rgb: var(--blue-rgb); display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--radius); color: var(--text); text-decoration: none; position: relative; overflow: hidden;
  background: linear-gradient(145deg, rgba(var(--c-rgb), .16), rgba(255,255,255,.78) 65%); border: 1px solid var(--glass-border); box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.disp::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.disp:hover { transform: translateY(-2px); text-decoration: none; box-shadow: 0 14px 28px rgba(var(--c-rgb), .18), var(--shadow); }
.disp.on { box-shadow: 0 0 0 2px var(--c), 0 14px 28px rgba(var(--c-rgb), .22); background: linear-gradient(145deg, rgba(var(--c-rgb), .26), rgba(255,255,255,.85) 70%); }
.disp .n { font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; } .disp .l { font-weight: 700; font-size: 13.5px; } .disp .d { font-size: 11.5px; color: var(--muted); }
.disp--green { --c: var(--green); --c-rgb: var(--green-rgb); } .disp--red { --c: var(--red); --c-rgb: var(--red-rgb); } .disp--orange { --c: var(--orange); --c-rgb: var(--orange-rgb); }
.disp--purple { --c: var(--purple); --c-rgb: var(--purple-rgb); } .disp--teal { --c: var(--teal); --c-rgb: var(--teal-rgb); } .disp--grey { --c: #7b8aa0; --c-rgb: var(--grey-rgb); } .disp--blue { --c: var(--blue); --c-rgb: var(--blue-rgb); }
.disp--all { --c: var(--sidebar); --c-rgb: 20,36,51; }
@media (max-width: 1100px) { .disp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .disp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .disp { padding: 12px 13px; } .disp .n { font-size: 23px; } }

/* ---------- filters ---------- */
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.filters .wide { grid-column: span 2; } .quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.quick a { padding: 6px 13px; border-radius: 99px; background: var(--glass-strong); border: 1px solid rgba(20,36,51,.12); color: var(--text); font-weight: 600; font-size: 12.5px; } .quick a:hover { text-decoration: none; background: #fff; }
.quick a.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 0; }
details.more-filters summary { cursor: pointer; font-weight: 600; color: var(--link); margin-top: 10px; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border-radius: 14px; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; } th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: rgba(255,255,255,.4); position: sticky; top: 0; }
td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; } tbody tr:hover { background: rgba(var(--blue-rgb), .05); } tr.row-warn td:first-child { box-shadow: inset 3px 0 var(--orange); } tr.row-crit td:first-child { box-shadow: inset 3px 0 var(--red); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; } .pager .pages { display: flex; gap: 4px; flex-wrap: wrap; }
.pager a, .pager span.cur { padding: 6px 11px; border-radius: 9px; background: var(--glass-strong); border: 1px solid rgba(20,36,51,.12); color: var(--text); font-weight: 600; } .pager span.cur { background: var(--blue); color: #fff; border-color: var(--blue); } .pager a:hover { text-decoration: none; background: #fff; }
.empty { text-align: center; padding: 34px 12px; color: var(--muted); } .empty b { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; }
.list { list-style: none; margin: 0; padding: 0; } .list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); align-items: center; } .list li:last-child { border: 0; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 1.1fr) 3fr auto; gap: 10px; align-items: center; padding: 5px 0; } .bar { height: 9px; border-radius: 99px; background: rgba(20,36,51,.08); overflow: hidden; } .bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--blue), var(--teal)); }
.chart-box { position: relative; height: 260px; } .chart-box.sm { height: 210px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 16px 16px; } .timeline li::before { content: ""; position: absolute; left: -26px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--c, var(--blue)); }
.timeline .t-blue { --c: var(--blue); } .timeline .t-green { --c: var(--green); } .timeline .t-orange { --c: var(--orange); } .timeline .t-red { --c: var(--red); } .timeline .t-purple { --c: var(--purple); } .timeline .t-grey { --c: #8795a8; } .timeline .t-teal { --c: var(--teal); }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; } .kv dt { color: var(--muted); font-weight: 600; font-size: 12.5px; } .kv dd { margin: 0; word-break: break-word; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; } .tabs a { padding: 8px 14px; border-radius: 11px; background: var(--glass-strong); border: 1px solid rgba(20,36,51,.12); color: var(--text); font-weight: 600; } .tabs a.on { background: var(--blue); color: #fff; border-color: var(--blue); } .tabs a:hover { text-decoration: none; }
dialog { border: 0; border-radius: 18px; padding: 0; width: min(520px, calc(100vw - 24px)); box-shadow: 0 30px 80px rgba(20,36,51,.35); background: #fff; color: var(--text); }
dialog::backdrop { background: rgba(15,27,40,.5); backdrop-filter: blur(3px); } dialog form { padding: 20px; } dialog h2 { margin-bottom: 12px; } dialog .foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: #8795a8; margin-right: 6px; } .status-dot.healthy { background: var(--green); } .status-dot.failing { background: var(--red); } .status-dot.idle { background: var(--orange); } .status-dot.not_configured { background: var(--red); }
.bottom-actions { display: none; }
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; } .auth-card { width: min(430px, 100%); } .auth-brand { flex-direction: column; text-align: center; gap: 8px; padding: 0 0 14px; justify-content: center; }
.auth-brand { color: var(--text); }
.auth-brand small { color: var(--muted); }
.skeleton { background: linear-gradient(90deg, rgba(20,36,51,.06), rgba(20,36,51,.12), rgba(20,36,51,.06)); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 8px; min-height: 16px; } @keyframes sk { to { background-position: -200% 0; } }
.overlay { display: none; } 

/* ---------- responsive ---------- */
@media (max-width: 1280px) { .kpis { grid-template-columns: repeat(3, minmax(0,1fr)); } .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 1024px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 20px 0 50px rgba(0,0,0,.3); }
  body.nav-open .sidebar { transform: none; } body.nav-open .overlay { display: block; position: fixed; inset: 0; background: rgba(15,27,40,.5); z-index: 35; }
  .icon-btn.hamburger { display: grid; } .g-main, .g3 { grid-template-columns: 1fr; } .content { padding: 16px 16px 90px; } .topbar { padding: 10px 16px; }
}
@media (max-width: 720px) {
  .kpis { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } .kpi { min-height: 112px; padding: 13px; } .kpi .val { font-size: 26px; }
  .g2, .g4, .form-grid { grid-template-columns: 1fr; } .user-chip .who { display: none; } h1 { font-size: 19px; } .filters .wide { grid-column: auto; }
  .btn { min-height: 44px; } .btn.small { min-height: 36px; } input, select, textarea { min-height: 44px; font-size: 16px; }
  .bottom-actions { display: flex; position: fixed; left: 0; right: 0; bottom: 0; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.92); backdrop-filter: blur(var(--blur)); border-top: 1px solid var(--line); z-index: 25; } .bottom-actions .btn { flex: 1; }
  .kv { grid-template-columns: 110px 1fr; } .notif-panel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
  table.cards thead { display: none; } table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; } table.cards tr { padding: 10px 4px; border-bottom: 1px solid var(--line); } table.cards td { border: 0; padding: 3px 8px; } table.cards td[data-l]::before { content: attr(data-l) ": "; color: var(--muted); font-size: 12px; font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media print { .sidebar, .topbar, .actions, .bottom-actions { display: none !important; } .app { display: block; } }

/* bulk selection: keep checkbox + received time on one line (desktop) */
@media (min-width: 1181px) { table.cards.leadcards td:first-child { white-space: nowrap; } }

/* ---- sign-in pages: animated real-estate dusk skyline ---- */
.auth-body { background: #0e1b2b; }
.scene { position: fixed; inset: 0; overflow: hidden; z-index: 0; background: linear-gradient(180deg, #0c1826 0%, #14304a 48%, #2a5a70 74%, #c99a52 100%); }
.scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sun { position: absolute; left: 50%; bottom: -18vh; width: 90vmin; height: 90vmin; margin-left: -45vmin; border-radius: 50%; background: radial-gradient(circle, rgba(243,197,107,.55) 0%, rgba(243,154,36,.18) 38%, transparent 68%); animation: sunPulse 9s ease-in-out infinite; }
.sk-near { filter: drop-shadow(0 -6px 18px rgba(0,0,0,.35)); }
.sk-far { opacity: .85; animation: floatFar 24s ease-in-out infinite alternate; }
.st { opacity: .25; animation: twinkle 4s ease-in-out infinite; } .st.s1 { animation-delay: 1s; animation-duration: 5s; } .st.s2 { animation-delay: 2.2s; animation-duration: 3.4s; } .st.s3 { animation-delay: 3s; animation-duration: 6s; }
.wins rect { opacity: .08; animation: win 7s ease-in-out infinite; }
.wins .w0 { animation-delay: 0s; } .wins .w1 { animation-delay: 1.4s; animation-duration: 9s; } .wins .w2 { animation-delay: 2.8s; animation-duration: 6s; } .wins .w3 { animation-delay: 4.2s; animation-duration: 11s; } .wins .w4 { animation-delay: 5.6s; animation-duration: 8s; }
.blueprint path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .55; animation: draw 9s ease-in-out infinite alternate; }
.blueprint path + path { animation-delay: 2.5s; }
.scene-tag { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 0 16px; background: linear-gradient(transparent, rgba(8,16,26,.9)); text-align: center; color: rgba(227,201,143,.85); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; }
.auth-wrap { position: relative; z-index: 1; }
.auth-body .auth-card { background: rgba(255,255,255,.93) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.35); animation: cardIn .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes win { 0%, 100% { opacity: .08; } 40%, 60% { opacity: .95; } }
@keyframes twinkle { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }
@keyframes sunPulse { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes floatFar { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
@keyframes draw { 0% { stroke-dashoffset: 1; } 55%, 100% { stroke-dashoffset: 0; } }
@media (max-width: 700px) { .scene-tag { font-size: 10px; letter-spacing: 2px; } .blueprint { display: none; } }
@media (prefers-reduced-motion: reduce) { .scene *, .auth-body .auth-card { animation: none !important; } .wins rect { opacity: .55; } .blueprint path { stroke-dashoffset: 0; } }

/* =====================================================================
   PREMIUM APP LAYER — motion tokens, glass fallback, compact sidebar,
   tab bar, transitions, toasts, skeletons, polish. Additive only.
   ===================================================================== */
:root { --ease: cubic-bezier(.2,.7,.2,1); --t-fast: 150ms; --t-med: 220ms; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); }
/* backdrop-filter fallback: solid, still-readable panels when blur is unsupported or switched off */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --glass: rgba(255,255,255,.92); --glass-strong: rgba(255,255,255,.96); } .topbar { background: rgba(234,240,247,.97); } }
/* low-power devices (set by JS from deviceMemory / cores / Save-Data) and users who asked for less transparency */
.lowfx { --blur: 0px; }
.lowfx body { background-attachment: scroll; }
.lowfx .glass, .lowfx .card, .lowfx .topbar, .lowfx dialog::backdrop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
@media (prefers-reduced-transparency: reduce) { :root { --blur: 0px; --glass: rgba(255,255,255,.96); --glass-strong: #fff; } }
@media (max-width: 720px) { body { background-attachment: scroll; } }
html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-tap-highlight-color: transparent; }

/* ---------- page transitions (cross-document View Transitions where supported; fade-up fallback) ---------- */
@view-transition { navigation: auto; }
.sidebar { view-transition-name: app-sidebar; } .topbar { view-transition-name: app-topbar; } .tabbar { view-transition-name: app-tabbar; }
::view-transition-group(app-sidebar), ::view-transition-group(app-topbar), ::view-transition-group(app-tabbar) { animation-duration: 0s; }
::view-transition-old(root) { animation: vt-out 120ms var(--ease) both; } ::view-transition-new(root) { animation: vt-in 200ms var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } } @keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
.content { animation: page-in var(--t-med) var(--ease) backwards; }   /* backwards only: a lingering transform would turn .content into the containing block for position:fixed bars */
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- controls: press, focus, loading ---------- */
.btn, .icon-btn, .tabs a, .seg a, .chip, .kpi, .nav a, .tabbar a, .tabbar button { transition: transform var(--t-fast) var(--ease), background-color var(--t-fast), box-shadow var(--t-med) var(--ease), color var(--t-fast), border-color var(--t-fast); }
.btn:active, .icon-btn:active, .tabbar a:active, .tabbar button:active { transform: scale(.97); }
.btn[disabled], .btn.is-loading, button[disabled] { opacity: .6; cursor: not-allowed; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff; animation: spin .7s linear infinite; }
.btn.secondary.is-loading::after, .btn.ghost.is-loading::after { border-color: rgba(20,36,51,.2); border-top-color: var(--blue); }
@keyframes spin { to { transform: rotate(360deg); } }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(36,120,237,.30); border-color: var(--blue); }
@media (hover: hover) { tbody tr { transition: background-color var(--t-fast); } tbody tr:hover { background: rgba(36,120,237,.045); } }

/* ---------- KPI cards: glass highlight, hover only on hover devices, press on touch ---------- */
.kpi { isolation: isolate; }
.kpi::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; background: linear-gradient(160deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 46%); }
.kpi:hover { transform: none; box-shadow: var(--shadow); }
@media (hover: hover) { .kpi:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(var(--c-rgb), .20), var(--shadow); } }
.kpi:active { transform: scale(.985); }
.kpi .val { transition: opacity var(--t-med); }

/* ---------- compact sidebar (desktop toggle; tablet default) ---------- */
.sidebar-toggle { display: none; }
@media (min-width: 1025px) {
  .sidebar-toggle { display: grid; }
  .app { transition: grid-template-columns var(--t-med) var(--ease); }
  body.nav-compact .app { grid-template-columns: 76px 1fr; }
}
body.nav-compact .sidebar { padding-left: 10px; padding-right: 10px; }
body.nav-compact .brand { justify-content: center; padding-left: 0; padding-right: 0; } body.nav-compact .brand > div:last-child { display: none; }
body.nav-compact .nav h6 { height: 1px; margin: 12px 10px; overflow: hidden; padding: 0; background: rgba(255,255,255,.12); color: transparent; font-size: 0; }
body.nav-compact .nav a { justify-content: center; padding: 11px 0; } body.nav-compact .nav a > span:not(.badge-n) { display: none; }
body.nav-compact .nav .badge-n { position: absolute; top: 3px; right: 5px; margin: 0; min-width: 17px; line-height: 17px; font-size: 10px; padding: 0 4px; }
body.nav-compact .sidebar-foot { display: none; }
@media (min-width: 1025px) and (max-width: 1199px) {
  body:not(.nav-expanded) .app { grid-template-columns: 76px 1fr; } body:not(.nav-expanded) .sidebar { padding-left: 10px; padding-right: 10px; }
  body:not(.nav-expanded) .brand { justify-content: center; padding-left: 0; padding-right: 0; } body:not(.nav-expanded) .brand > div:last-child, body:not(.nav-expanded) .sidebar-foot { display: none; }
  body:not(.nav-expanded) .nav h6 { height: 1px; margin: 12px 10px; overflow: hidden; padding: 0; background: rgba(255,255,255,.12); color: transparent; font-size: 0; }
  body:not(.nav-expanded) .nav a { justify-content: center; padding: 11px 0; } body:not(.nav-expanded) .nav a > span:not(.badge-n) { display: none; }
  body:not(.nav-expanded) .nav .badge-n { position: absolute; top: 3px; right: 5px; margin: 0; min-width: 17px; line-height: 17px; font-size: 10px; padding: 0 4px; }
}

/* ---------- mobile: drawer polish + bottom tab bar ---------- */
.tabbar { display: none; }
@media (max-width: 1024px) {
  .sidebar { padding-top: calc(18px + var(--safe-t)); padding-bottom: calc(18px + var(--safe-b)); transition: transform var(--t-med) var(--ease), visibility 0s linear var(--t-med); visibility: hidden; }
  body.nav-open .sidebar { visibility: visible; transition-delay: 0s; }
  .overlay { transition: opacity var(--t-med); } body.nav-open { overflow: hidden; }
  .topbar { padding-left: calc(16px + var(--safe-l)); padding-right: calc(16px + var(--safe-r)); padding-top: calc(10px + var(--safe-t)); }
}
@media (max-width: 720px) {
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 6px 6px calc(6px + var(--safe-b)); background: rgba(255,255,255,.88); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(20,36,51,.06); }
  .tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 4px 2px; border: 0; background: none; border-radius: 12px; color: var(--muted); font: 600 10.5px/1.2 var(--font); cursor: pointer; text-decoration: none; }
  .tabbar .icon { width: 22px; height: 22px; } .tabbar a.active { color: var(--blue); background: rgba(var(--blue-rgb), .10); }
  .tabbar .badge-n { position: absolute; top: 2px; left: calc(50% + 6px); background: var(--red); color: #fff; font-style: normal; font-size: 10px; min-width: 16px; line-height: 16px; border-radius: 99px; text-align: center; padding: 0 4px; }
  .content { padding-bottom: calc(84px + var(--safe-b)); }
  body:has(.bottom-actions) .tabbar { display: none; }               /* pages with their own sticky action bar keep it */
  .bottom-actions { padding-bottom: calc(10px + var(--safe-b)); }
  .bulkbar { bottom: calc(72px + var(--safe-b)); }
  body:has(.bottom-actions) .bulkbar { bottom: calc(76px + var(--safe-b)); }
}
@media (max-width: 374px) { .kpis { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; } .kpi { padding: 11px; min-height: 104px; } .kpi .val { font-size: 22px; } .content { padding-left: 12px; padding-right: 12px; } h1 { font-size: 18px; } .page-head .actions .btn { flex: 1 1 auto; } }
@media (min-width: 1800px) { .content { max-width: 1680px; margin-inline: auto; width: 100%; } }

/* ---------- dialogs, menus, popovers: short, restrained motion ---------- */
dialog { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
dialog[open] { animation: dlg-in var(--t-med) var(--ease) both; } dialog[open]::backdrop { animation: fade-in var(--t-med) ease both; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes fade-in { from { opacity: 0; } }
@media (max-width: 560px) { dialog { margin-bottom: 0; width: 100vw; max-width: 100vw; border-radius: 22px 22px 0 0; max-height: 92dvh; padding-bottom: var(--safe-b); } dialog[open] { animation-name: sheet-in; } }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
.menu-panel { display: block; visibility: hidden; opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; pointer-events: none; transition: opacity var(--t-fast), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast); }
.menu-panel.open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
.alert { animation: page-in var(--t-med) var(--ease) both; }
.chip { animation: chip-in var(--t-fast) var(--ease) both; } @keyframes chip-in { from { opacity: 0; transform: scale(.94); } }
.seg a, .seg button { transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }

/* ---------- toasts, offline bar, skeletons ---------- */
.toasts { position: fixed; z-index: 120; left: 50%; transform: translateX(-50%); bottom: calc(20px + var(--safe-b)); display: grid; gap: 8px; width: min(440px, calc(100vw - 24px)); pointer-events: none; }
@media (max-width: 720px) { .toasts { bottom: calc(78px + var(--safe-b)); } }
.toast { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: #142433; color: #fff; box-shadow: 0 14px 34px rgba(20,36,51,.35); font-weight: 500; animation: page-in var(--t-med) var(--ease) both; border-left: 4px solid var(--blue); }
.toast.success { border-color: var(--green); } .toast.error { border-color: var(--red); } .toast.warning { border-color: var(--orange); } .toast button { margin-left: auto; background: none; border: 0; color: inherit; font-size: 16px; cursor: pointer; opacity: .7; }
.offline-bar { position: fixed; z-index: 110; left: 0; right: 0; top: 0; padding: calc(8px + var(--safe-t)) 14px 8px; text-align: center; font-weight: 600; font-size: 13px; background: #7a4a00; color: #fff; }
body.is-offline .topbar { top: 38px; }
.sk-row { height: 14px; margin: 10px 12px; } .sk-row.short { width: 55%; }
canvas[data-chart]:not(.ready) { background: linear-gradient(90deg, rgba(20,36,51,.04), rgba(20,36,51,.09), rgba(20,36,51,.04)); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 12px; }
canvas[data-chart] { min-height: 180px; }
@media (max-width: 480px) { canvas[data-chart] { max-height: 240px; } }

/* ---------- tables: contain overflow on every width, tidy pagination ---------- */
.table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.table-wrap thead th { position: sticky; top: 0; background: var(--glass-strong); z-index: 1; }
img, canvas, svg { max-width: 100%; }
.pager { flex-wrap: wrap; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  .content, .alert, .chip, dialog[open], dialog[open]::backdrop, .toast, .menu-panel, .app, .sidebar, .overlay { animation: none !important; transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}
.g-main > *, .g2 > *, .g3 > *, .g4 > *, .grid > *, .stack, .card { min-width: 0; }

/* ---- collapsible filters on phones (results first) ---- */
.mf > summary { display: none; list-style: none; } .mf > summary::-webkit-details-marker { display: none; }
@media (max-width: 720px) {
  .mf { margin-bottom: 14px; }
  .mf > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: 14px; cursor: pointer; background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--shadow); font-size: 14px; }
  .mf > summary .icon { color: var(--blue); } .mf-total { margin-left: auto; font-weight: 600; color: var(--muted); font-size: 13px; }
  .mf > summary::after { content: "▾"; color: var(--muted); transition: transform var(--t-fast); } .mf[open] > summary::after { transform: rotate(180deg); }
  .mf[open] > .mf-body { margin-top: 10px; }
  .mf:not(.mf-ready) > .mf-body { display: none; }                  /* no layout jump before the script collapses it */
  .page-head p.long-desc { display: none; }
  .page-head { margin-bottom: 10px; }
}
@media (max-width: 1180px) { table.cards.leadcards td:nth-child(2) { white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; } table.cards.leadcards td:nth-child(2) .chip { margin: 0; } }

/* ---- final audit: no scrolling of the page behind a modal; no layout jump when the scrollbar disappears ---- */
html { scrollbar-gutter: stable; scroll-padding-top: 76px; scroll-padding-bottom: 96px; }   /* focused fields are never left under the sticky top bar or the bottom bars */
html.modal-open, html:has(dialog[open]) { overflow: hidden; }
a.sr-only:focus, a.sr-only:focus-visible { position: fixed; top: 10px; left: 10px; width: auto; height: auto; clip: auto; overflow: visible; z-index: 200; padding: 10px 16px; border-radius: 12px; background: #142433; color: #fff; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.35); text-decoration: none; }

/* ---- WCAG AA: text-bearing fills use slightly deeper shades of the brand colours (white text ≥ 4.5:1). Brand tokens above are unchanged for icons/accents. ---- */
:root { --blue-ink: #1c66d6; --green-ink: #0a7a55; --red-ink: #cc2a42; --wa-ink: #138044; }
.btn:not(.secondary):not(.ghost):not(.danger):not(.success):not(.wa):not(.is-loading) { background: var(--blue-ink); }
.btn.danger, .nav .badge-n, .tabbar .badge-n, .dot { background: var(--red-ink); }
.btn.success { background: var(--green-ink); } .btn.wa { background: var(--wa-ink); }
.seg a.on, .seg .on, .tabs a.on, .nav a.active { background: var(--blue-ink); }
.err-page { max-width: 520px; margin: 7vh auto; padding: 28px 22px; text-align: center; border-radius: var(--radius); background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--shadow); }
.err-page h1 { margin: 10px 0 8px; font-size: 22px; } .err-page p { margin: 6px 0; } .err-actions { margin-top: 18px !important; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* menus never extend past the screen (landscape phones, 200% zoom): the notification list scrolls inside the panel */
.menu-panel { max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
.notif-panel { display: flex; flex-direction: column; overflow: hidden; } .notif-panel .notif-list { overflow-y: auto; min-height: 0; flex: 1 1 auto; overscroll-behavior: contain; }

/* the top bar's dropdowns (bell, user menu, search) must sit above the date-range bar (.period, z 40); the drawer overlay keeps its own order */
body:not(.nav-open) .topbar { z-index: 42; }

/* ---------- rc3 polish: long text never squeezes neighbouring columns ---------- */
.bar-l { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.notif-item b, .notif-item span { display: block; overflow-wrap: anywhere; }
.notif-item span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-top: 2px; }
@media (max-width: 1180px) {
  table.cards.leadcards td:nth-child(5), table.cards.leadcards td:nth-child(6) { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
  table.cards.leadcards td:nth-child(6) { max-width: 48vw; }
}
.menu-panel a.notif-item, .menu-panel div.notif-item { display: block; }
@media (max-width: 1180px) { table.cards.leadcards td:nth-child(3) { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow-wrap: anywhere; } }

/* mobile drawer: sidebar + dim overlay must sit above EVERYTHING in the page (date bar z40, bulk bar z60, tab bar, top bar z42).
   Also size to the visible viewport (dvh), so the last menu items are reachable when the browser's address bar is showing. */
@media (max-width: 1024px) {
  .sidebar { z-index: 80; height: 100vh; height: 100dvh; padding-bottom: calc(18px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
  body.nav-open .overlay { z-index: 75; }
}

/* integrations: endpoint boxes with a Copy button (long URLs stay selectable; the button never wraps off-screen) */
.copy-row { display: flex; gap: 8px; align-items: center; } .copy-row input { flex: 1 1 auto; min-width: 0; text-overflow: ellipsis; } .copy-row .btn { flex: 0 0 auto; }

/* ---------- rc7 polish found in tablet-width review ---------- */
.kpi.wide .delta { display: block; margin-top: 2px; }                                   /* delta never splits a sentence across the card */
.card-head { flex-wrap: wrap; row-gap: 6px; } .card-head a.more { white-space: nowrap; }  /* "Drill down →" stays on one line; the head wraps as a whole */
td[data-l="Received"] > div.chip { display: flex; width: fit-content; margin-top: 4px; }  /* age chip always sits under the date → uniform rows */
a[href^="tel:"] { white-space: nowrap; }                                                /* a phone number is never split across lines */
.table-wrap.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.table-wrap.more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.table-wrap.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }

/* tablets: lead cards in two columns; tighter cell padding so mid-size tables overflow less */
@media (min-width: 700px) and (max-width: 1180px) { table.cards.leadcards tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } table.cards.leadcards tr { margin-bottom: 0; } }
@media (max-width: 1100px) { th, td { padding-left: 9px; padding-right: 9px; } }
@media (max-width: 1180px) { table.cards.leadcards td:nth-child(1) { gap: 4px 8px; flex-wrap: wrap; } table.cards.leadcards td[data-l="Received"] > div.chip { margin-top: 0; } }
button.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
/* mobile call bar: three equal buttons that can shrink, so a longer label never pushes the last one off a 320px screen */
.bottom-actions .btn { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; white-space: nowrap; justify-content: center; }
/* rarely-used destructive action: quiet, at the bottom of the lead page, never in the everyday action row */
.danger-zone { margin: 18px 0 8px; padding-top: 14px; border-top: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.danger-zone .btn { color: var(--red-ink); border-color: transparent; }
td.actions-cell { white-space: nowrap; } td.actions-cell form { display: inline-block; margin: 0 4px 4px 0; }
/* a log/list line may contain one long unbroken string (IDs, JSON, URLs): it must wrap instead of widening the page */
.list li > span:first-child, .list li > div:first-child { min-width: 0; } .list li .small, .list li b { overflow-wrap: anywhere; } .list li > .nowrap { flex-shrink: 0; }