/* 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; /* default accent */
  --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.has-img { background: transparent; box-shadow: none; overflow: visible; }
.logo-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.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: 2px; right: 2px; background: var(--red); color: #fff; font-size: 9.5px; min-width: 16px; max-width: 20px; height: 16px; line-height: 16px; border-radius: 99px; text-align: center; padding: 0 3px; overflow: hidden; 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, .seg .seg-btn { 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, .seg .seg-btn.on { background: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(var(--blue-rgb), .35); }
.seg summary .icon { width: 15px; height: 15px; }
.lbl-short { 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; }
/* ---------- 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; }

/* ---- Call update: eight large tap targets (mobile first) ---- */
.call-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.call-opt{position:relative;display:flex;align-items:center;justify-content:center;min-height:64px;padding:10px 12px;border:2px solid var(--line,#d6dbe6);border-radius:14px;background:var(--glass-strong,#fff);text-align:center;cursor:pointer;font-size:15px;line-height:1.25}
.call-opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.call-opt:has(input:checked){border-color:var(--brand,#2563eb);background:color-mix(in srgb,var(--brand,#2563eb) 12%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand,#2563eb) 25%,transparent)}
.call-opt:has(input:focus-visible){outline:3px solid var(--brand,#2563eb);outline-offset:2px}
.call-update-btn{font-weight:700}
.call-lines{list-style:none;margin:0;padding:0}.call-lines li{padding:8px 0;border-bottom:1px solid var(--line,#e5e8ef)}.call-lines li:last-child{border-bottom:0}
.agents-on-lead{list-style:none;margin:0;padding:0}.agents-on-lead li{padding:4px 0}
.locked-field{padding:9px 12px;border:1px dashed var(--line,#cfd5e1);border-radius:10px;background:var(--glass-strong,#f6f7fb);font-weight:600}
@media (max-width:520px){.call-grid{grid-template-columns:1fr 1fr}.call-opt{min-height:72px;font-size:16px}}

/* rc16: KPI card with clickable chips (Lost / Closed) — the card body is one link, each chip another */
.kpi-main { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; flex: 1; }
.kpi-main:hover { text-decoration: none; }
.kpi-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; position: relative; z-index: 1; }
.kpi-chips .chip { font-size: 11px; padding: 2px 8px; min-height: 28px; display: inline-flex; align-items: center; gap: 4px; }
.chip.dnc { background: #b42318; color: #fff; }

/* rc17 / N16: Visits page chips — one row of equal tiles; N15 below */
.visit-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 14px; }
.vchip { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; min-height: 84px; border-radius: 14px; background: var(--card, #fff); border: 1px solid rgba(20,36,51,.12); color: inherit; text-decoration: none; }
.vchip:hover { text-decoration: none; box-shadow: 0 6px 16px rgba(20,36,51,.12); }
.vchip.on { outline: 2px solid var(--blue, #2563eb); }
.vchip .vc-l { font-size: 12.5px; color: var(--muted, #5b6b7b); }
.vchip .vc-n { font-size: 24px; font-weight: 700; line-height: 1.1; }
.vchip .vc-h { font-size: 11px; color: var(--muted, #5b6b7b); }
@media (max-width: 600px) { .visit-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vchip .vc-h { display: block; } }

/* ===== rc17 / N15 — mobile (360 – 768px) ===== */
@media (max-width: 720px) {
  /* per-person / per-team tables become cards: name as heading, then a 2-column grid of label + value (left aligned, nothing pushed to the right edge) */
  table.cards.perf, table.cards.perf tbody { display: block; width: 100%; }
  table.cards.perf thead { display: none; }
  table.cards.perf tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.75); box-sizing: border-box; }
  table.cards.perf td { display: block; width: auto; min-width: 0; padding: 0; border: 0; text-align: left; }
  table.cards.perf td:first-child { grid-column: 1 / -1; font-size: 15.5px; font-weight: 700; padding-bottom: 2px; }
  table.cards.perf td[data-l]::before { display: block; content: attr(data-l); color: var(--muted); font-size: 11.5px; font-weight: 600; margin-bottom: 1px; }
  table.cards.perf td:first-child::before { display: none; }
  table.cards.perf td.num { text-align: left; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
  /* never any sideways page scroll; content clears the bottom navigation; tap targets >= 40px */
  .content { padding-bottom: calc(104px + var(--safe-b)); max-width: 100vw; overflow-x: clip; }
  .btn, .btn.small, .tabs a, .nav a, select, input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { min-height: 40px; }
  .btn.small { padding-top: 8px; padding-bottom: 8px; }
  .kpi-chips .chip, .chip[href], a.chip { min-height: 32px; }
  .table-wrap { max-width: 100%; overflow-x: auto; }
  .visit-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .kpi { min-width: 0; padding: 12px; } .kpi .val { font-size: 22px; } }
@media (max-width: 768px) {   /* tablets too: tap targets >= 40px */
  .btn, .btn.small, .btn.ghost, .tabs a, .seg > a, .seg summary, select, input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { min-height: 40px; }
  .btn.small { padding-top: 8px; padding-bottom: 8px; }
}

/* ===== rc18 / round 3 item 7 — layers: nothing in the page may paint over the bottom menu =====
   order (low → high): page content < date filter (5) < sticky top bar (90) < bottom tab bar (100) < drawer overlay / sidebar / modals.
   The date filter's By date / Custom panel opens ABOVE the tab bar (bottom offset = tab bar height), is scrollable inside, and never goes behind it. */
@media (max-width: 900px) {
  :root { --tabbar-h: 72px; }
  .tabbar { z-index: 100; }
  body:not(.nav-open) .topbar { z-index: 90; }
  body.nav-open .tabbar { z-index: 70; }
  .content { padding-bottom: calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom)); }
  .bulkbar { bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom)); z-index: 95; }
}

/* ===== Lead page on mobile (< 600px) — UI only. Desktop keeps the original header, chips and Quick actions card exactly as they were. ===== */
.lead-code-line, .qa-overlay, .lbl-short { display: none; }
.m-only { display: none !important; }
@media (max-width: 599px) {
  .m-only { display: inline-flex !important; }
  /* header: code as a small muted line, name as the title (20px, 2 lines max) */
  .lead-code-line { display: block; font-size: 12px; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
  .lead-title { font-size: 20px; line-height: 1.25; margin: 0 0 8px; }
  .lead-title .lc { display: none; }
  .lead-title .ln { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .lead-actions-desktop { display: none !important; }       /* the sticky bar below replaces the header buttons (no duplicate Call update) */
  /* chips: one neat wrapping block, equal 28px height — colours/icons are NOT changed here (identical to desktop) */
  .lead-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
  .lead-chips .lc-status, .lead-chips .lc-meta { display: inline-flex; }
  .lead-chips .chip { height: 28px; min-height: 28px; display: inline-flex; align-items: center; padding: 0 10px; font-size: 12px; line-height: 1; white-space: nowrap; box-sizing: border-box; }
  .lead-chips .chip.lw { flex: 0 0 auto; }                 /* warnings keep their coloured chip (same as desktop); they may wrap onto their own line */
  /* primary row: Call update · WhatsApp · More */
  .lead-bar { gap: 8px; }
  .lead-bar .btn, .lead-bar .btn.lb-primary { flex: 1 1 0; min-width: 0; width: 0; height: 48px; min-height: 48px; padding: 0 6px; font-size: 14px; font-weight: 600; border-radius: 12px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
  /* "More" = the Quick actions card as a bottom sheet (same buttons, same permission checks) */
  body:has(.lead-bar) .qa-card { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; margin: 0; max-height: 78dvh; overflow-y: auto; border-radius: 20px 20px 0 0; padding: 14px 14px calc(16px + env(safe-area-inset-bottom)); transform: translateY(110%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; box-shadow: 0 -14px 40px rgba(20,36,51,.3); background: #fff; }
  body.qa-open .qa-card { transform: none; visibility: visible; transition: transform .22s ease; }
  body:has(.lead-bar) .qa-overlay { display: block; position: fixed; inset: 0; background: rgba(15,27,40,.5); z-index: 115; opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.qa-open .qa-overlay { opacity: 1; pointer-events: auto; }
  body.qa-open { overflow: hidden; }
  .qa-card .card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .qa-card .qa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .qa-card .qa-grid > .btn, .qa-card .qa-grid > form { width: 100%; min-height: 44px; margin: 0; justify-content: flex-start; text-align: left; padding: 8px 12px; font-size: 13.5px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
  .qa-card .qa-grid > form { grid-column: 1 / -1; padding: 0; }
  .qa-card .qa-grid .call-update-btn { display: none; }      /* Call update is already in the sticky bar */
  .qa-card .lbl-short { display: inline; } .qa-card .lbl-full { display: none; }
  .qa-card .icon-btn { min-width: 44px; min-height: 44px; }
}

@media (max-width: 599px) { body:has(.lead-bar) .m-hide { display: none !important; } }

/* rc20 — equal-size action buttons on mobile: any row of large buttons shares the width equally (a hidden button never leaves a gap) */
@media (max-width: 599px) {
  dialog .foot, .seg-pop .seg-actions, .form-actions, .bulkbar .actions { display: flex; gap: 8px; justify-content: stretch; }
  dialog .foot > .btn, dialog .foot > button, dialog .foot > form, .seg-pop .seg-actions > .btn, .form-actions > .btn, .form-actions > form { flex: 1 1 0; min-width: 0; min-height: 44px; justify-content: center; box-sizing: border-box; white-space: nowrap; }
  dialog .foot > form > .btn, .form-actions > form > .btn { width: 100%; }
  .page-head .actions { display: flex; flex-wrap: wrap; gap: 8px; } .page-head .actions > .btn, .page-head .actions > form { flex: 1 1 0; min-width: 120px; justify-content: center; } .page-head .actions > form > .btn { width: 100%; }
}

/* ===== rc20 — ONE date filter for every page (see partials/period_bar.php + app.js "date filter") ===== */
.period { position: relative; z-index: 5; }
.period-seg { position: relative; max-width: 100%; }
.seg .seg-btn { border: 0; background: transparent; font: inherit; font-weight: 600; font-size: 13px; }
.seg .seg-btn:hover { color: var(--text); background: rgba(20,36,51,.05); } .seg .seg-btn.on:hover { background: var(--blue); color: #fff; }
.seg .seg-btn[aria-expanded="true"] { outline: 2px solid rgba(var(--blue-rgb), .45); outline-offset: -2px; }
.seg-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 8; width: 290px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 14px; background: #fff; border-radius: 14px; box-shadow: 0 18px 40px rgba(20,36,51,.22); border: 1px solid var(--line); }
.seg-pop[hidden], .dp-backdrop[hidden], .dp-err[hidden] { display: none !important; }
.seg-pop .dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.seg-pop .dp-x { border: 0; background: rgba(20,36,51,.06); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 14px; color: var(--text); }
.seg-pop .field { margin-bottom: 10px; } .seg-pop input[type=date] { width: 100%; min-width: 0; box-sizing: border-box; }
.seg-pop .dp-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; } .seg-pop .dp-actions .btn { width: 100%; min-height: 44px; justify-content: center; }
.dp-err { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: rgba(var(--red-rgb), .12); color: #a41d31; font-size: 13px; font-weight: 600; }
.period-err { margin-top: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(var(--orange-rgb), .18); color: #8a5300; font-weight: 600; }
.dp-backdrop { display: none; }
@media (max-width: 720px) {
  .period { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 12px; position: static; z-index: auto; }
  .period-seg { width: 100%; position: static; }
  /* pills: ONE horizontally scrollable row, the active pill scrolled into view by app.js */
  .seg { display: flex; flex-wrap: nowrap; width: 100%; overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 4px; box-sizing: border-box; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.85); }
  .seg::-webkit-scrollbar { display: none; } .seg { position: relative; }
  .seg > a, .seg .seg-btn { flex: 0 0 auto; height: 42px; padding: 0 16px; justify-content: center; box-sizing: border-box; scroll-snap-align: center; }
  .lbl-full { display: none; } .lbl-short { display: inline; }
  /* By date / Custom = bottom sheet ABOVE the bottom nav; the backdrop is a SEPARATE layer behind it, so the sheet is never dimmed */
  .dp-backdrop { display: block; position: fixed; inset: 0; background: rgba(15,27,40,.5); z-index: 80; }
  .dp-backdrop[hidden] { display: none; }
  .seg-pop { position: fixed; left: 0; right: 0; top: auto; bottom: calc(var(--tabbar-h, 72px) + env(safe-area-inset-bottom)); width: auto; max-width: 100vw; z-index: 85; border-radius: 20px 20px 0 0; border: 0; padding: 14px 16px 16px; max-height: calc(100dvh - var(--tabbar-h, 72px) - 70px - env(safe-area-inset-bottom)); overflow-y: auto; box-shadow: 0 -12px 40px rgba(20,36,51,.3); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 12px; }
  .seg-pop[hidden] { display: none; }
  .seg-pop .dp-head, .seg-pop .dp-full, .seg-pop .dp-actions, .seg-pop .dp-err { grid-column: 1 / -1; }
  .seg-pop input[type=date] { -webkit-appearance: none; appearance: none; min-height: 44px; }
  body.dp-open { overflow: hidden; }
  body.dp-open .tabbar { z-index: 100; }
  .period-note { padding-left: 4px; }
}

.brand-preview { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; margin: 10px 0; } .brand-preview figure { margin: 0; text-align: center; } .brand-preview figcaption { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.bp-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px 10px 0 0; background: #fff; border: 1px solid var(--line); font-size: 12px; max-width: 170px; } .bp-tab img { width: 16px; height: 16px; }
.bp-round { border-radius: 50%; } .bp-sq { border-radius: 14px; }

/* ===== rc21 / 7 — Import CSV page on phones (desktop unchanged) ===== */
.dropzone { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px; border: 1.5px dashed var(--line); border-radius: 12px; background: rgba(255,255,255,.6); }
.dropzone .dz-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }   /* native input stays in the page for keyboard / screen readers, visually hidden */
.dropzone:focus-within { outline: 2px solid rgba(var(--blue-rgb), .5); outline-offset: 2px; }
.dropzone .dz-name { font-size: 13px; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.dropzone.has-file { border-style: solid; } .dropzone.has-file .dz-name { color: var(--text); font-weight: 600; }
@media (max-width: 599px) {
  .imp-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .imp-actions .btn { min-width: 0; min-height: 44px; justify-content: center; white-space: nowrap; box-sizing: border-box; padding: 0 8px; width: 100%; }
  .imp-actions .btn:last-child { grid-column: 1 / -1; }
  .imp-actions .btn .icon { flex: 0 0 auto; }
  .dropzone { flex-direction: column; align-items: stretch; } .dropzone .dz-btn { width: 100%; min-height: 48px; justify-content: center; }
  .imp-submit { width: 100%; min-height: 48px; justify-content: center; }
  .filters { grid-template-columns: 1fr !important; }   /* column-mapping dropdowns: one per row */
  .table-wrap { overflow-x: auto; }
  form[action*="/commit"] .actions { display: flex; gap: 8px; } form[action*="/commit"] .actions .btn { flex: 1 1 0; min-width: 0; min-height: 46px; justify-content: center; }
}