/* ==========================================================================
   WorkSpace by KnowMore — design system
   Tokens → shell (sidebar/topbar) → components → page pieces → responsive
   ========================================================================== */

:root {
    --brand: #4f39f6;
    --brand-ink: #ffffff;
    --brand-soft: rgba(79, 57, 246, .10);
    --accent: #10b981;
    --info: #0ea5e9;
    --warn: #f59e0b;
    --danger: #f43f5e;
    --violet: #8b5cf6;

    --bg: #f5f6fb;
    --surface: #ffffff;
    --surface-2: #f1f3f9;
    --surface-3: #e8ebf3;
    --border: #e3e6ef;
    --border-strong: #cfd4e3;

    --text: #0f172b;
    --text-soft: #4a5568;
    --text-mute: #7b869c;

    --sidebar-bg: #0f172b;
    --sidebar-bg-2: #151f38;
    --sidebar-text: #c3cad9;
    --sidebar-mute: #7c88a3;

    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 43, .06);
    --shadow: 0 4px 16px rgba(15, 23, 43, .07);
    --shadow-lg: 0 22px 44px rgba(15, 23, 43, .16);
    --font: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --mono: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
    --sidebar-w: 254px;
}

[data-theme="dark"] {
    --bg: #080c17;
    --surface: #111726;
    --surface-2: #171e30;
    --surface-3: #1e263a;
    --border: #232c42;
    --border-strong: #313c58;
    --text: #eef2fb;
    --text-soft: #a9b4cc;
    --text-mute: #7d89a4;
    --sidebar-bg: #05080f;
    --sidebar-bg-2: #0c1120;
    --sidebar-text: #b9c3d9;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 6px 22px rgba(0, 0, 0, .45);
    --shadow-lg: 0 24px 48px rgba(0, 0, 0, .55);
    --brand-soft: rgba(79, 57, 246, .18);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
p { margin: 0; }
svg { display: block; }

.mono { font-family: var(--mono); font-size: .92em; }
.muted { color: var(--text-mute); }
.soft { color: var(--text-soft); }
.strong { font-weight: 620; }
.small { font-size: 12.5px; }
.tiny { font-size: 11.5px; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.grow { flex: 1 1 auto; min-width: 0; }
.right { text-align: right; }
.center { text-align: center; }
.trend-up { color: var(--accent); }
.danger-num { color: var(--danger); }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 14px; } .mt-4 { margin-top: 22px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 14px; }
.hr { height: 1px; background: var(--border); margin: 14px 0; }

/* --------------------------------------------------------------- shell --- */
.app {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2));
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 45;
}

.sidebar-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 16px 14px;
}

.brand-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand), var(--violet));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
}

.brand-name { font-size: 14.5px; font-weight: 650; color: #fff; letter-spacing: -.01em; }
.brand-sub { font-size: 11px; color: var(--sidebar-mute); }

.biz-switch {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 12px 10px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .035);
    font-size: 12.5px;
}

select.biz-switch {
    appearance: none;
    background-image: none;
    cursor: pointer;
    font-family: var(--font);
    width: calc(100% - 24px);
}

.biz-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 8px; }
.biz-name { font-weight: 600; color: #fff; }
.biz-meta { font-size: 10.5px; color: var(--sidebar-mute); }

.nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 10px 18px;
    scrollbar-width: thin;
}

.nav-group { margin-bottom: 14px; }

.nav-group-title {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    font-size: 10.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sidebar-mute);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--sidebar-text);
    font-size: 13px;
    text-decoration: none;
    border: 0;
    background: none;
    font-family: var(--font);
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-link.active { background: linear-gradient(90deg, rgba(79, 57, 246, .9), rgba(79, 57, 246, .62)); color: #fff; }
.nav-ico { flex: 0 0 auto; opacity: .85; }

.nav-sub { display: flex; flex-direction: column; margin: 3px 0 6px 27px; }
.nav-sub a {
    padding: 5px 9px;
    font-size: 12.5px;
    color: var(--sidebar-mute);
    text-decoration: none;
    border-left: 1px solid rgba(255, 255, 255, .12);
}
.nav-sub a:hover { color: #fff; }
.nav-sub a.active { color: #fff; border-left-color: var(--brand); font-weight: 600; }

.sidebar-foot { padding: 10px 12px 14px; border-top: 1px solid rgba(255, 255, 255, .07); }

.user-chip {
    display: flex;
    align-items: center;
    gap: 9px;
}
.user-chip .name { font-size: 12.5px; font-weight: 600; color: #fff; }
.user-chip .role { font-size: 10.5px; color: var(--sidebar-mute); }

.main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 22px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 40;
}

.crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-mute); min-width: 0; }
.crumb strong { color: var(--text); font-weight: 620; }

.topbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    width: min(320px, 34vw);
}
.topbar-search svg { width: 15px; height: 15px; color: var(--text-mute); flex: 0 0 15px; }
.topbar-search input { border: 0; background: none; outline: none; width: 100%; color: var(--text); font-family: var(--font); font-size: 13px; }

.content { padding: 20px 22px 60px; }

/* ---------------------------------------------------------- typography --- */
.page-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.page-title { font-size: 21px; }
.page-sub { color: var(--text-mute); font-size: 12.5px; margin-top: 3px; }
.page-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------ buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 9px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 550;
    text-decoration: none;
    cursor: pointer;
    transition: .14s ease;
    white-space: nowrap;
}
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: #4530e0; border-color: #4530e0; color: #fff; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { color: #fff; border-color: #d9365c; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-soft); }
.btn-ghost:hover { background: var(--surface-2); border-color: transparent; color: var(--text); }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn-block { width: 100%; }
.inline-form { display: inline-flex; align-items: center; gap: 6px; }

.icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
}
.icon-btn:hover { border-color: var(--brand); color: var(--brand); }
.menu-btn { display: none; }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
    font-size: 11.5px;
    text-decoration: none;
    white-space: nowrap;
}
.pill:hover { border-color: var(--brand); color: var(--brand); }
.pill.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 580;
    border: 1px solid transparent;
    white-space: nowrap;
}
.badge-success { background: rgba(16, 185, 129, .13); color: #047857; border-color: rgba(16, 185, 129, .25); }
.badge-info    { background: rgba(14, 165, 233, .13); color: #0369a1; border-color: rgba(14, 165, 233, .25); }
.badge-warn    { background: rgba(245, 158, 11, .15); color: #b45309; border-color: rgba(245, 158, 11, .28); }
.badge-danger  { background: rgba(244, 63, 94, .13);  color: #be123c; border-color: rgba(244, 63, 94, .25); }
.badge-neutral { background: var(--surface-2);        color: var(--text-soft); border-color: var(--border); }
[data-theme="dark"] .badge-success { color: #6ee7b7; }
[data-theme="dark"] .badge-info { color: #7dd3fc; }
[data-theme="dark"] .badge-warn { color: #fcd34d; }
[data-theme="dark"] .badge-danger { color: #fda4af; }

select.badge { cursor: pointer; font-family: var(--font); outline: none; }
.dot-badge {
    min-width: 17px;
    height: 17px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 10.5px;
    display: inline-grid;
    place-items: center;
    padding: 0 4px;
}

/* --------------------------------------------------------------- cards --- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.card-pad { padding: 16px; }

.card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.card-title { font-size: 13.5px; font-weight: 640; }
.card-sub { font-size: 11.5px; color: var(--text-mute); }
.card-body { padding: 16px; }
.card-foot { padding: 11px 16px; border-top: 1px solid var(--border); background: var(--surface-2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ---------------------------------------------------------------- KPI --- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 13px;
    margin-bottom: 16px;
}
.kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
}
.kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-mute); }
.kpi-value { font-size: 24px; font-weight: 680; letter-spacing: -.02em; margin-top: 5px; }
.kpi-foot { font-size: 11.5px; color: var(--text-mute); margin-top: 4px; }

.mini-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 11px;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}
.mini-stat .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); }
.mini-stat .val { font-size: 14.5px; font-weight: 640; }

/* -------------------------------------------------------------- tables --- */
.table-wrap { width: 100%; overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th {
    text-align: left;
    padding: 10px 14px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-mute);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
table.data th a { text-decoration: none; color: inherit; }
table.data th a:hover { color: var(--brand); }
table.data td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tfoot td { padding: 10px 14px; background: var(--surface-2); font-weight: 620; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-main { display: block; font-weight: 570; }
.cell-sub { font-size: 11.5px; color: var(--text-mute); }
.cell-actions { display: flex; align-items: center; gap: 5px; justify-content: flex-end; }

.person { display: flex; align-items: center; gap: 9px; min-width: 0; }

.avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    color: #fff;
    font-size: 11.5px;
    font-weight: 640;
    letter-spacing: .02em;
}
.avatar-xs { width: 22px; height: 22px; flex-basis: 22px; font-size: 9.5px; }
.avatar-sm { width: 26px; height: 26px; flex-basis: 26px; font-size: 10.5px; }
.avatar-lg { width: 40px; height: 40px; flex-basis: 40px; font-size: 14px; }
.avatar-xl { width: 54px; height: 54px; flex-basis: 54px; font-size: 18px; }

.pagination {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
}
.pagination .pages { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.pagination a, .pagination .pg {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    display: inline-grid;
    place-items: center;
    font-size: 12px;
    text-decoration: none;
}
.pagination .pg.current { background: var(--brand); border-color: var(--brand); color: #fff; }
.pagination a:hover { border-color: var(--brand); color: var(--brand); }

/* -------------------------------------------------------------- forms --- */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field label { font-size: 12px; font-weight: 560; color: var(--text-soft); }
.field .hint { font-size: 11.5px; color: var(--text-mute); }
.field .err { font-size: 11.5px; color: var(--danger); }

.input, .select, .textarea {
    padding: 8px 11px;
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    outline: none;
    transition: .14s ease;
    width: 100%;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.input.invalid, .select.invalid, .textarea.invalid { border-color: var(--danger); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-2); color: var(--text-mute); }
.textarea { resize: vertical; min-height: 62px; }
select[multiple] { padding: 4px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.form-grid .span-2 { grid-column: span 2; }
.form-section { margin-bottom: 20px; }
.form-section h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-mute); margin-bottom: 11px; }

.check { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: var(--brand); }
.check span { font-size: 12.5px; color: var(--text-soft); }

.toolbar {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    min-width: 210px;
}
.search-box svg { width: 15px; height: 15px; color: var(--text-mute); flex: 0 0 15px; }
.search-box input { border: 0; outline: none; background: none; width: 100%; font-family: var(--font); font-size: 13px; color: var(--text); }

/* --------------------------------------------------------------- panel --- */
.panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(9, 13, 24, .48);
    backdrop-filter: blur(2px);
    z-index: 60;
}
.panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(560px, 100vw);
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    z-index: 61;
    display: flex;
    flex-direction: column;
}
.panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}
.panel-title { font-size: 15px; font-weight: 650; }
.panel-body { flex: 1 1 auto; overflow-y: auto; padding: 18px; }
.panel-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

/* -------------------------------------------------------------- flash --- */
.flash-stack {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-width: 380px;
}
.flash {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    font-size: 13px;
    animation: flash-in .2s ease;
}
.flash svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; }
.flash .close { margin-left: auto; border: 0; background: none; cursor: pointer; color: var(--text-mute); }
@keyframes flash-in { from { opacity: 0; transform: translateY(6px); } }

.banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 12.5px;
    color: var(--text-soft);
}
.banner svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; color: var(--info); }
.banner.warn { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .3); color: #92400e; }
.banner.warn svg { color: var(--warn); }
[data-theme="dark"] .banner.warn { color: #fcd34d; }
.banner-info { background: rgba(14, 165, 233, .09); border-color: rgba(14, 165, 233, .28); }

.empty {
    padding: 42px 20px;
    text-align: center;
    color: var(--text-mute);
}
.empty svg { width: 38px; height: 38px; margin: 0 auto 10px; opacity: .5; }
.empty .big { font-size: 14.5px; font-weight: 600; color: var(--text-soft); margin-bottom: 4px; }

/* ------------------------------------------------------------ progress --- */
.progress { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; flex: 1 1 auto; }
.progress span { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.progress.is-success span { background: var(--accent); }
.progress.is-warn span { background: var(--warn); }
.progress.is-danger span { background: var(--danger); }

.kv { display: flex; flex-direction: column; gap: 8px; }
.kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.kv > div > span { color: var(--text-mute); }
.kv > div > strong { font-weight: 580; text-align: right; }

.legend { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--text-mute); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* -------------------------------------------------------------- charts --- */
.chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 160px;
    padding-top: 8px;
}
.bar-wrap { flex: 1 1 0; display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; position: relative; }
.bar {
    width: 46%;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, var(--brand), rgba(79, 57, 246, .55));
    transition: height .5s cubic-bezier(.2, .8, .2, 1);
    min-height: 2px;
}
.bar.alt { background: linear-gradient(180deg, var(--accent), rgba(16, 185, 129, .5)); }
.chart-label {
    position: absolute;
    bottom: -19px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10px;
    color: var(--text-mute);
}
.chart { margin-bottom: 22px; }

.donut { display: flex; align-items: center; gap: 18px; }
.donut svg { width: 116px; height: 116px; flex: 0 0 116px; transform: rotate(-90deg); }
.donut svg text { transform: rotate(90deg); transform-origin: 21px 21px; }
.donut-seg { transition: stroke-dasharray .5s ease; }
.donut-legend { display: flex; flex-direction: column; gap: 7px; }
.donut-legend .item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.donut-legend .val { margin-left: auto; font-weight: 600; }

/* ------------------------------------------------------------- kanban --- */
.kanban {
    display: flex;
    gap: 13px;
    overflow-x: auto;
    padding-bottom: 8px;
    align-items: flex-start;
}
.kanban-col {
    flex: 0 0 268px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    max-height: 78vh;
}
.kanban-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--surface-2);
    border-radius: var(--radius) var(--radius) 0 0;
}
.kanban-body { padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; }
.kanban-foot { padding: 9px 12px; border-top: 1px solid var(--border); }
.kanban-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 11px;
    box-shadow: var(--shadow-sm);
}
.kanban-card:hover { border-color: var(--border-strong); }

/* ------------------------------------------------------- sticky notes --- */
.notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.sticky-note {
    position: relative;
    border-radius: 12px;
    padding: 16px 15px 12px;
    min-height: 168px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transform: rotate(-.35deg);
}
.sticky-note:nth-child(even) { transform: rotate(.4deg); }
.note-pin { position: absolute; top: 9px; right: 11px; width: 8px; height: 8px; border-radius: 50%; }
.note-body { font-size: 13px; line-height: 1.45; flex: 1 1 auto; }
.note-foot { display: flex; justify-content: space-between; font-size: 10.5px; opacity: .72; margin-top: 10px; }
.note-actions { display: flex; gap: 3px; margin-top: 7px; }
.mini-btn {
    border: 0;
    background: rgba(255, 255, 255, .5);
    border-radius: 7px;
    padding: 3px 7px;
    cursor: pointer;
    font-size: 12px;
    color: inherit;
}
.mini-btn:hover { background: rgba(255, 255, 255, .85); }

/* ----------------------------------------------------------- calendar --- */
.cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.cal-head > div { padding: 9px 11px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cell {
    min-height: 108px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 7px 8px;
    position: relative;
}
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.out { background: var(--surface-2); opacity: .55; }
.cal-cell.today { background: var(--brand-soft); box-shadow: inset 0 0 0 1px rgba(79, 57, 246, .35); }
.cal-day { display: flex; align-items: baseline; gap: 5px; font-size: 12px; font-weight: 620; margin-bottom: 5px; }
.cal-event {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding: 2px 5px;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    margin-bottom: 3px;
}
.cal-event.task { background: transparent; border-style: dashed; color: var(--text-mute); }
.cal-event .dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; background: var(--brand); }
.cal-add {
    position: absolute;
    right: 6px;
    bottom: 5px;
    font-size: 13px;
    color: var(--text-mute);
    text-decoration: none;
    opacity: 0;
    transition: .15s ease;
}
.cal-cell:hover .cal-add { opacity: 1; }

/* ---------------------------------------------------------- timeline ---- */
.timeline { position: relative; padding-left: 5px; }
.timeline-item {
    position: relative;
    padding: 0 0 16px 20px;
    border-left: 1px dashed var(--border-strong);
    margin-left: 5px;
}
.timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline-item::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--brand);
}
.timeline-item.done::before { border-color: var(--accent); }

.thread-list { display: flex; flex-direction: column; }
.thread {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
}
.thread:hover { background: var(--surface-2); }
.thread.active { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.thread .meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }

/* ---------------------------------------------------------- subtabs ----- */
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.subtabs a {
    padding: 9px 13px;
    font-size: 13px;
    text-decoration: none;
    color: var(--text-mute);
    border-bottom: 2px solid transparent;
}
.subtabs a.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }

.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 13px; }

/* --------------------------------------------------------------- auth --- */
.auth-wrap { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100vh; }
.auth-aside {
    background: linear-gradient(155deg, #0f172b, #1c1440 55%, #2a1650);
    color: #dfe4f2;
    padding: 46px 52px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.auth-aside::after {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    right: -140px;
    bottom: -160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 57, 246, .55), transparent 65%);
}
.auth-aside h1 { font-size: 27px; line-height: 1.25; margin: 26px 0 12px; color: #fff; position: relative; z-index: 1; }
.auth-aside > div > p { color: #a9b4cc; font-size: 13.5px; max-width: 430px; position: relative; z-index: 1; }
.auth-points { margin-top: 30px; display: flex; flex-direction: column; gap: 15px; position: relative; z-index: 1; }
.auth-point { display: flex; gap: 11px; }
.auth-point .tick {
    width: 20px; height: 20px; flex: 0 0 20px;
    border-radius: 50%;
    background: rgba(16, 185, 129, .18);
    color: #34d399;
    display: grid;
    place-items: center;
    font-size: 11px;
}
.auth-point .t { font-size: 13px; font-weight: 600; color: #fff; }
.auth-point .d { font-size: 12px; color: #93a0bb; }
.auth-form-side { display: grid; place-items: center; padding: 34px 22px; background: var(--bg); }
.auth-card { width: min(400px, 100%); }
.auth-card h2 { font-size: 21px; margin-bottom: 5px; }
.auth-card .lead { color: var(--text-mute); font-size: 13px; margin-bottom: 20px; }
.auth-foot { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-mute); }
.demo-box {
    margin-top: 16px;
    padding: 12px 13px;
    border-radius: var(--radius-sm);
    background: rgba(79, 57, 246, .08);
    border: 1px dashed rgba(79, 57, 246, .35);
    font-size: 12px;
    color: var(--text-soft);
    line-height: 1.7;
}
.code-hint {
    margin-top: 15px;
    padding: 12px 13px;
    border-radius: var(--radius-sm);
    background: rgba(245, 158, 11, .1);
    border: 1px dashed rgba(245, 158, 11, .4);
    font-size: 12px;
    color: var(--text-soft);
}
.note-block { padding: 12px 13px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-mute); }

.otp-inputs { display: flex; gap: 9px; justify-content: space-between; }
.otp-inputs input {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 56px;
    text-align: center;
    font-size: 21px;
    font-weight: 650;
    border: 1px solid var(--border-strong);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text);
    outline: none;
    font-family: var(--font);
}
.otp-inputs input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.otp-inputs input.filled { border-color: var(--brand); }

.step-dots { display: flex; gap: 6px; margin-bottom: 14px; }
.step-dot { width: 26px; height: 4px; border-radius: 999px; background: var(--surface-3); }
.step-dot.done { background: var(--brand); }
.countdown { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-soft); }

/* -------------------------------------------------------------- print --- */
.print-only { display: none; }

@media print {
    .sidebar, .topbar, .page-actions, .toolbar, .pagination, .flash-stack { display: none !important; }
    body { background: #fff; }
    .content { padding: 0; }
    .print-only { display: block; }
    .card { box-shadow: none; border-color: #ddd; break-inside: avoid; }
}

/* --------------------------------------------------------- responsive --- */
@media (max-width: 1180px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .menu-btn { display: inline-grid; }
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-104%);
        transition: transform .2s ease;
        box-shadow: var(--shadow-lg);
    }
    .app.nav-open .sidebar { transform: none; }
    .app.nav-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(9, 13, 24, .45);
        z-index: 44;
    }
    .grid-2, .grid-3, .grid-4, .form-grid { grid-template-columns: minmax(0, 1fr); }
    .form-grid .span-2 { grid-column: auto; }
    .auth-wrap { grid-template-columns: minmax(0, 1fr); }
    .auth-aside { display: none; }
    .content { padding: 16px 14px 60px; }
}

@media (max-width: 720px) {
    .topbar { padding: 10px 13px; }
    .topbar-search { display: none; }
    .page-actions { width: 100%; }
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .panel { width: 100vw; }
    .donut { flex-direction: column; }
}

/* end of file */

/* ==========================================================================
   Time clock (attendance) + small interactions
   ========================================================================== */
.my-day { border:1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); background:linear-gradient(120deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface) 60%); }
.clock-time { font-size:30px; font-weight:700; letter-spacing:.5px; font-variant-numeric:tabular-nums; line-height:1.15; }
.btn-lg { padding:12px 22px; font-size:15px; border-radius:14px; }
.btn-xs { padding:3px 9px; font-size:11.5px; border-radius:8px; }

.chip-row { display:flex; flex-wrap:wrap; gap:7px; }
.chip-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; border:1px dashed var(--line);
            background:var(--surface-2); color:var(--text); font-size:12.5px; font-weight:600; cursor:pointer; transition:transform .12s, background .15s, border-color .15s; }
.chip-btn:hover { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--surface-2)); transform:translateY(-1px); }
.chip-btn:active { transform:scale(.97); }

.inline-form { display:inline; }
.row-menu { position:relative; }
.row-menu > summary { list-style:none; cursor:pointer; }
.row-menu > summary::-webkit-details-marker { display:none; }
.row-menu-body { position:absolute; right:0; top:calc(100% + 6px); z-index:40; width:210px; display:grid; gap:8px;
                 background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px; box-shadow:var(--shadow-lg, 0 24px 60px -30px rgba(15,23,43,.55)); }
.row-menu-body label { display:grid; gap:4px; }

/* touch feedback everywhere — makes taps feel native */
.btn:active, .chip-btn:active, .tab-item:active, .kpi:active { transform:scale(.985); }
.ripple { position:absolute; border-radius:50%; transform:scale(0); animation:ripple .5s ease-out; background:rgba(255,255,255,.45); pointer-events:none; }
@keyframes ripple { to { transform:scale(2.6); opacity:0; } }

/* ==========================================================================
   Drag & drop
   ========================================================================== */
[data-dnd-item] { touch-action:manipulation; }
[data-dnd-handle], .dnd-grab { touch-action:none; }
body.dnd-dragging { cursor:grabbing; }
body.dnd-dragging * { cursor:grabbing !important; }
.dnd-ghost { position:fixed; z-index:9999; pointer-events:none; opacity:.94; transform:rotate(1.4deg) scale(1.02);
             box-shadow:0 26px 60px -26px rgba(15,23,43,.6); border-radius:14px; }
.dnd-source { opacity:.35; }
[data-dnd-group].drop-active { outline:2px dashed color-mix(in srgb, var(--accent) 60%, transparent); outline-offset:3px;
                               background:color-mix(in srgb, var(--accent) 5%, transparent); border-radius:14px; }
.dnd-placeholder { border:1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius:12px; background:color-mix(in srgb, var(--accent) 6%, transparent); }
[data-dnd-handle] { cursor:grab; }
[data-dnd-handle]:active { cursor:grabbing; }
.card[draggable="true"], .widget[draggable="true"] { cursor:grab; }
.dnd-saved { animation:savedPulse .6s ease; }
@keyframes savedPulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--success, #10b981) 55%, transparent); } 100% { box-shadow:0 0 0 14px transparent; } }

/* ==========================================================================
   Mobile / PWA — the app should feel like an Android app
   ========================================================================== */
@media (max-width: 900px) {
    .app { display:block; }
    .sidebar { position:fixed; inset:0 auto 0 0; width:268px; transform:translateX(-102%); transition:transform .22s ease; z-index:60; }
    .app.nav-open .sidebar { transform:none; box-shadow:0 30px 80px -20px rgba(0,0,0,.5); }
    .app.nav-open::after { content:""; position:fixed; inset:0; background:rgba(8,12,24,.5); z-index:55; }
    .main { padding-bottom:calc(74px + env(safe-area-inset-bottom)); }
    .menu-btn { display:inline-flex !important; }
    .content { padding:14px 14px 20px; }
    .page-head { flex-direction:column; align-items:flex-start; gap:10px; }
    .kpi-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .form-grid, .grid-2, .grid-3 { grid-template-columns:1fr; }
    .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .card, .panel-body { border-radius:16px; }
    .btn, .chip-btn, .tab-item, select, .input { min-height:42px; }
}

/* bottom app bar (Android-style) */
.tabbar { display:none; }
@media (max-width: 900px) {
    .tabbar {
        display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
        position:fixed; left:0; right:0; bottom:0; z-index:70;
        background:color-mix(in srgb, var(--surface) 92%, transparent);
        backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
        border-top:1px solid var(--line); padding:7px 6px calc(7px + env(safe-area-inset-bottom));
    }
    .tabbar a { display:grid; justify-items:center; gap:3px; padding:5px 2px; border-radius:12px; color:var(--muted);
                text-decoration:none; font-size:10.5px; font-weight:600; }
    .tabbar a svg { width:21px; height:21px; }
    .tabbar a.active { color:var(--accent); background:color-mix(in srgb, var(--accent) 11%, transparent); }
    .tabbar a:active { transform:scale(.94); }
    .fab { display:grid; }
}

/* floating action button */
.fab { display:none; position:fixed; right:16px; bottom:calc(78px + env(safe-area-inset-bottom)); z-index:71;
       width:56px; height:56px; border-radius:50%; place-items:center; background:var(--accent); color:#fff;
       border:none; box-shadow:0 18px 40px -14px rgba(79,57,246,.75); font-size:26px; line-height:1; cursor:pointer; }
.fab:active { transform:scale(.94); }

/* install-to-home-screen banner */
.install-bar { position:fixed; left:12px; right:12px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:72;
               display:none; gap:10px; align-items:center; padding:11px 13px; border-radius:16px;
               background:var(--surface); border:1px solid var(--line); box-shadow:0 24px 60px -28px rgba(15,23,43,.6); }
.install-bar.show { display:flex; }
.install-bar .grow { flex:1; min-width:0; }

/* app-like transitions */
@media (prefers-reduced-motion: no-preference) {
    .content > * { animation:riseIn .28s ease both; }
    @keyframes riseIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
}
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:color-mix(in srgb, var(--muted) 35%, transparent); border-radius:8px; }

/* dashboard widget grid (drag to rearrange) */
.widget-grid { grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start; }
.dnd-card { position:relative; }
.dnd-grab { position:absolute; top:9px; right:10px; opacity:.28; font-size:14px; line-height:1; cursor:grab;
            padding:3px 5px; border-radius:8px; transition:opacity .15s, background .15s; z-index:2; }
.dnd-card:hover .dnd-grab { opacity:.7; background:var(--surface-2); }
.dnd-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width: 900px) { .widget-grid { grid-template-columns:1fr; } .dnd-grab { opacity:.5 } }

/* clickable KPI tiles */
.kpi-link { text-decoration:none; color:inherit; display:block; transition:transform .14s ease, box-shadow .18s ease, border-color .18s ease; }
.kpi-link:hover { transform:translateY(-2px); box-shadow:var(--shadow-md, 0 18px 40px -30px rgba(15,23,43,.5)); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.kpi-link::after { content:"→"; position:absolute; top:10px; right:12px; font-size:12px; opacity:0; transition:opacity .16s ease; color:var(--accent); }
.kpi-link { position:relative; }
.kpi-link:hover::after { opacity:1; }

/* toast host */
.toast-host { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(24px + env(safe-area-inset-bottom)); z-index:120; display:grid; gap:8px; justify-items:center; pointer-events:none; }
.toast { background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:12px; padding:10px 15px;
         font-size:13px; font-weight:600; box-shadow:0 22px 50px -24px rgba(15,23,43,.55); transition:opacity .25s, transform .25s; max-width:min(90vw, 420px); }
.toast-success { border-left-color:#10b981; }
.toast-error { border-left-color:#f43f5e; }
.toast-info { border-left-color:#0ea5e9; }
@media (max-width: 900px) { .toast-host { bottom:calc(96px + env(safe-area-inset-bottom)); } }

/* ----- agent roster + popover panels ------------------------------------- */
.popover-card { max-height:min(78vh, 640px); overflow:auto; }
.field-block > summary { list-style:none; cursor:pointer; }
.field-block > summary::-webkit-details-marker { display:none; }
.tiny.muted { line-height:1.4; }

/* ------------------------------------------- call distribution (prospects) --- */
.field-label { font-size: 12px; font-weight: 560; color: var(--text-soft); }
.step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 19px; height: 19px; border-radius: 50%; margin-right: 6px;
    background: var(--brand-soft, rgba(98, 95, 255, .13)); color: var(--brand);
    font-size: 11.5px; font-weight: 700; vertical-align: 1px;
}
.tiny-pill { font-size: 10.5px; padding: 2px 7px; }
.table-sm td, .table-sm th { padding: 7px 10px; font-size: 12.5px; }
.is-disabled { opacity: .45; pointer-events: none; }

.drop-zone {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 20px 16px; border: 1.5px dashed var(--border-strong); border-radius: 13px;
    background: var(--surface-2); text-align: center; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.drop-zone:hover, .drop-zone.over { border-color: var(--brand); background: rgba(98, 95, 255, .06); }
.drop-zone input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.drop-ico { font-size: 20px; color: var(--brand); line-height: 1; }
.drop-title { font-size: 13px; font-weight: 600; }

.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px; }
.member-pick {
    display: flex; align-items: center; gap: 9px; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 11px; background: var(--surface);
    cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.member-pick:hover { border-color: var(--brand); }
.member-pick input { width: 15px; height: 15px; accent-color: var(--brand); flex: none; }
.member-pick:has(input:checked) {
    border-color: var(--brand); background: rgba(98, 95, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(98, 95, 255, .25);
}
.member-pick .grow { display: flex; flex-direction: column; }

.spread-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 9px; margin-top: 6px; }
.spread-mode {
    display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer;
}
.spread-mode input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--brand); flex: none; }
.spread-mode > span { display: flex; flex-direction: column; gap: 2px; }
.spread-mode:has(input:checked) { border-color: var(--brand); background: rgba(98, 95, 255, .05); }
.spread-filters {
    border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--surface-2);
}
[data-when].is-hidden { display: none; }

.preview-line { display: flex; align-items: center; gap: 9px; }
.tip-line { font-size: 12px; color: var(--text-soft); line-height: 1.5; }
.tip-line .badge { margin-right: 4px; }

@media (max-width: 900px) {
    .member-grid { grid-template-columns: 1fr; }
    .spread-modes { grid-template-columns: 1fr; }
}

/* phones: the conversations page sat wider than the screen — let every flex
   child shrink, wrap the pill rows and stop the streams from forcing width */
@media (max-width: 900px) {
    .page-head .page-actions .row,
    .page-head .page-actions,
    .toolbar { flex-wrap: wrap; }
    .page-head { flex-wrap: wrap; }
    .timeline, .timeline-item, .timeline-item > *, .card-body, .card-body > * { min-width: 0; }
    .timeline-item .row, .timeline-item .row-between { flex-wrap: wrap; }
    .timeline-item .small[style*="pre-wrap"] { white-space: pre-wrap; overflow-wrap: anywhere; }
    .grid { min-width: 0; }
    .thread-list { max-height: none !important; }
}

/* any two-column grid written inline collapses on phones (inline styles would
   otherwise beat the media query) */
@media (max-width: 900px) {
    .grid.split-2, .grid[style*="grid-template-columns"] { grid-template-columns:1fr !important; }
    .page-actions .popover-card { position:static !important; width:auto !important; }
}

/* ==========================================================================
   Notifications — bell panel, live badge, list
   ========================================================================== */
.icon-btn { position:relative; }
.badge-count { position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px; border-radius:9px;
               background:var(--danger, #f43f5e); color:#fff; font-size:10.5px; font-weight:700; line-height:17px; text-align:center; }
.bell > summary { list-style:none; }
.bell > summary::-webkit-details-marker { display:none; }
.notify-panel { position:absolute; right:0; top:46px; z-index:60; width:min(380px, 94vw);
                background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden;
                box-shadow:var(--shadow-lg, 0 30px 70px -30px rgba(15,23,43,.55)); display:flex; flex-direction:column; max-height:min(72vh, 560px); }
.notify-head { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); }
.notify-head > div:first-child { flex:1; min-width:0; }
.notify-list { overflow-y:auto; -webkit-overflow-scrolling:touch; }
.notify-item { display:flex; align-items:flex-start; gap:6px; border-bottom:1px solid var(--line); position:relative; }
.notify-item.unread { background:color-mix(in srgb, var(--accent) 6%, transparent); }
.notify-item.unread::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); }
.notify-open { flex:1; min-width:0; }
.notify-body { display:block; width:100%; text-align:left; background:none; border:none; padding:11px 12px; cursor:pointer; color:inherit; font:inherit; }
.notify-body:hover { background:var(--surface-2); }
.notify-line { display:flex; align-items:center; gap:8px; }
.notify-body .small { display:block; line-height:1.35; }
.notify-dismiss { padding:9px 10px 0 0; }
.notify-foot { padding:10px 12px; border-top:1px solid var(--line); background:var(--surface-2); }
@media (max-width: 900px) {
    .notify-panel { position:fixed; left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom)); top:auto;
                    width:auto; max-height:76vh; border-radius:18px; }
}

/* ==========================================================================
   Assistant thinking state
   ========================================================================== */
.thinking-dots { display:inline-flex; gap:3px; margin-left:7px; vertical-align:middle; }
.thinking-dots i { width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.35; animation:think 1s infinite; }
.thinking-dots i:nth-child(2) { animation-delay:.15s; }
.thinking-dots i:nth-child(3) { animation-delay:.3s; }
.thinking-dots.big i { width:9px; height:9px; }
@keyframes think { 0%, 80%, 100% { opacity:.25; transform:translateY(0); } 40% { opacity:1; transform:translateY(-3px); } }
.thinking-overlay { position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:color-mix(in srgb, var(--bg, #0b1020) 55%, transparent); backdrop-filter:blur(3px); }
.thinking-card { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px 26px; text-align:center;
                 box-shadow:0 30px 70px -30px rgba(15,23,43,.6); max-width:min(90vw, 320px); }
.live-dot { width:9px; height:9px; border-radius:50%; background:#10b981; box-shadow:0 0 0 0 rgba(16,185,129,.5); animation:pulseDot 2.2s infinite; display:inline-block; }
.live-dot.off { background:#94a3b8; animation:none; }
@keyframes pulseDot { 0% { box-shadow:0 0 0 0 rgba(16,185,129,.45); } 70% { box-shadow:0 0 0 9px rgba(16,185,129,0); } 100% { box-shadow:0 0 0 0 rgba(16,185,129,0); } }
.run-answer { border-left:3px solid color-mix(in srgb, var(--accent) 40%, transparent); padding-left:10px; }

/* ==========================================================================
   Everything responsive — phones first, then tablets and small laptops
   ========================================================================== */
@media (max-width: 1100px) {
    .grid[style*="grid-template-columns"] { grid-template-columns:1fr !important; }
    .kpi-grid { grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); }
}
@media (max-width: 900px) {
    .topbar { flex-wrap:wrap; row-gap:8px; padding:9px 12px; }
    .topbar-search { order:3; width:100%; max-width:none; }
    .page-title { font-size:20px; }
    .page-sub { font-size:12.5px; }
    .kanban { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(78%, 1fr); overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
    .kanban-col { scroll-snap-align:start; }
    .kanban-body { max-height:none; }
    .table-wrap table.data { min-width:620px; }         /* columns stay readable, the wrapper scrolls */
    .page-actions { flex-wrap:wrap; }
    .page-actions > * { flex:1 1 auto; }
    .page-actions .btn, .page-actions .pill { flex:0 0 auto; }
    .popover-card, .row-menu-body { position:static !important; width:auto !important; margin-top:8px; }
    details > .card[style*="position:absolute"] { position:static !important; width:auto !important; }
    .input[style*="width"], .select[style*="width"] { width:100% !important; }
    .card-body, .card-foot { padding:13px; }
    .sticky-note { min-height:auto; }
    .notes-grid { grid-template-columns:1fr 1fr; }
    .cal-grid { font-size:11px; }
    .auth-card { padding:22px 18px; }
    .step-dots { justify-content:center; }
    .timeline-cols { grid-template-columns:1fr !important; }
}
@media (max-width: 620px) {
    .kpi-grid { grid-template-columns:1fr 1fr; gap:9px; }
    .kpi { padding:11px 12px; }
    .kpi-value { font-size:20px; }
    .notes-grid { grid-template-columns:1fr; }
    .otp-inputs input { width:42px; height:52px; font-size:20px; }
    .modal, .panel { border-radius:16px 16px 0 0; }
    .content { padding:11px 11px 18px; }
    .card, .panel-body { border-radius:14px; }
    .search-box { width:100% !important; }
    h1, .page-title { font-size:19px; }
    .run-row { padding:12px !important; }
    .btn-block-mobile { width:100%; }
}
@media (max-width: 420px) {
    .kpi-grid { grid-template-columns:1fr; }
    .tabbar a span { font-size:9.5px; }
}
/* phones held sideways and small tablets: tables and forms breathe again */
@media (min-width: 620px) and (max-width: 1024px) {
    .kpi-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .notes-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media print {
    .tabbar, .fab, .topbar, .sidebar, .install-bar, .notify-panel { display:none !important; }
    .content { padding:0; }
}


/* ==========================================================================
   Data tables become cards on phones (labels injected by app.js)
   ========================================================================== */
@media (max-width: 700px) {
    .table-wrap { overflow:visible; border:none; }
    table.data { display:block; min-width:0 !important; border:none; }
    table.data thead { display:none; }
    table.data tbody { display:block; }
    table.data tbody tr { display:block; border:1px solid var(--line); border-radius:14px; margin-bottom:9px;
                          background:var(--surface); padding:4px 0; }
    table.data tbody td { display:flex; align-items:center; justify-content:space-between; gap:12px;
                          padding:7px 12px; border:none; text-align:right; }
    table.data tbody td::before { content:attr(data-label); flex:0 0 auto; max-width:46%; text-align:left;
                                 font-weight:650; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
                                 color:var(--muted); }
    table.data tbody td:empty, table.data tbody td[data-label=""] { display:none; }
    table.data tbody td .cell-main, table.data tbody td .cell-sub { text-align:right; }
    table.data .btn, table.data .btn-xs, table.data .btn-sm { flex:0 0 auto; }
    .table-actions, td > .row { justify-content:flex-end; }
}

/* phone-sized dialogs and sheets */
@media (max-width: 620px) {
    .panel { position:fixed !important; inset:auto 0 0 0 !important; width:auto !important; max-height:88vh; overflow-y:auto;
             border-radius:18px 18px 0 0 !important; }
    .panel-backdrop { background:rgba(8,12,24,.55); }
    .modal { width:auto !important; margin:0 10px; }
    .otp-inputs { gap:6px; }
    .quick-grid, .chip-row { gap:6px; }
}

/* ==========================================================================
   Company switcher — sidebar select + a chip in the topbar (phones)
   ========================================================================== */
.company { position:relative; }
.company > summary { list-style:none; }
.company > summary::-webkit-details-marker { display:none; }
.company-chip { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:999px;
                border:1px solid var(--line); background:var(--surface-2); cursor:pointer;
                font:inherit; font-size:12.5px; font-weight:650; color:inherit; max-width:210px; }
.company-chip:hover { border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.company-chip .company-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.company-menu { position:absolute; right:0; top:44px; z-index:60; width:min(290px, 92vw); padding:6px;
                background:var(--surface); border:1px solid var(--line); border-radius:14px;
                box-shadow:0 30px 70px -30px rgba(15,23,43,.55); max-height:min(70vh, 420px); overflow-y:auto; }
.company-option { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
                  padding:9px 10px; border:none; background:none; border-radius:10px; font:inherit;
                  font-size:13px; color:inherit; cursor:pointer; text-align:left; text-decoration:none; }
.company-option:hover { background:var(--surface-2); }
.company-option.current { color:var(--muted); }
.company-option.current .badge { flex:0 0 auto; }
.biz-switch select, select.biz-switch { width:100%; }
@media (max-width: 620px) {
    .company-chip { max-width:150px; font-size:12px; }
    .company-menu { position:fixed; left:8px; right:8px; top:auto; bottom:calc(8px + env(safe-area-inset-bottom));
                    width:auto; border-radius:16px; }
}
@media (min-width: 1025px) {
    /* the sidebar already carries the switcher on wide screens */
    .company { display:none; }
}


/* ==========================================================================
   Distribute sales — recipient pickers and the day-by-day bars
   ========================================================================== */
.people-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px; }
.people-row { display:flex; align-items:center; gap:9px; padding:8px 10px; border:1px solid var(--line);
              border-radius:11px; background:var(--surface-2); }
.people-row.on { border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); background:color-mix(in srgb, var(--accent) 7%, var(--surface-2)); }
.people-row .badge { flex:0 0 auto; }
.avatar-mini { width:26px; height:26px; flex:0 0 26px; border-radius:9px; display:grid; place-items:center;
               color:#fff; font-size:11.5px; font-weight:700; }
.day-bars { display:flex; align-items:flex-end; gap:4px; height:110px; padding:8px 4px 0; overflow-x:auto; }
.day-bar { flex:1 1 0; min-width:16px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; }
.day-bar-fill { width:100%; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #ffffff));
                min-height:3px; transition:height .3s ease; }
.day-bar-label { font-size:9.5px; color:var(--muted); white-space:nowrap; }
.tone-success { color:#0f9d6c; } .tone-danger { color:#d2455b; } .tone-warn { color:#b45309; } .tone-muted { color:var(--muted); }
table.data td.num, table.data th.num { text-align:right; font-variant-numeric:tabular-nums; }
@media (max-width: 900px) {
    .people-grid { grid-template-columns:1fr; }
    .day-bars { height:88px; }
}

/* ==========================================================================
   WorkSpace theme — matches the reference product UI (employee.html)
   Inter + Space Grotesk, violet #625fff, slate #0f172b, #f8fafc canvas.
   Loaded last on purpose: it re-skins the components defined above.
   ========================================================================== */
:root {
    --brand: #625fff;
    --brand-ink: #ffffff;
    --brand-soft: rgba(98, 95, 255, .10);
    --accent: #00bb7f;
    --info: #4f39f6;
    --warn: #f99c00;
    --danger: #ff2357;
    --violet: #8b5cf6;
    --pink: #ff2357;
    --teal: #12b6a5;

    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-2: #f1f5f9;
    --surface-3: #e2e8f0;
    --line: #e2e8f0;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --muted: #64748b;

    --text: #0f172b;
    --text-soft: #475569;
    --text-mute: #64748b;

    --sidebar-bg: #0f172b;
    --sidebar-bg-2: #16203a;
    --sidebar-text: #cbd5e1;
    --sidebar-mute: #8794ad;

    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 43, .06);
    --shadow: 0 1px 3px rgba(15, 23, 43, .07), 0 10px 24px -18px rgba(15, 23, 43, .25);
    --shadow-lg: 0 24px 48px -20px rgba(15, 23, 43, .35);
    --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --sidebar-w: 244px;
}

h1, h2, h3, .page-title, .brand-name, .kpi-value, .fig-value, .stat-value { font-family: var(--font-display); letter-spacing: -.015em; }

/* ---------------------------------------------------------------- sidebar */
.sidebar { background: var(--sidebar-bg); width: var(--sidebar-w); }
.sidebar-head { padding: 16px 14px 12px; gap: 10px; border-bottom: 0; }
.brand-mark { width: 34px; height: 34px; border-radius: 11px; background: var(--brand); color: #fff;
              display: grid; place-items: center; box-shadow: 0 6px 16px -6px rgba(98, 95, 255, .8); }
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.brand-sub { font-size: 10.5px; color: var(--sidebar-mute); letter-spacing: .01em; }
.biz-switch, .sidebar .biz-switch { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
              border-radius: 11px; padding: 8px 10px; margin: 0 12px 8px; color: #fff; }
.biz-name { font-size: 12.5px; font-weight: 600; }
.biz-meta { font-size: 10.5px; color: var(--sidebar-mute); }
.biz-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(0, 187, 127, .18); }

.nav { padding: 8px 10px 18px; }
.nav-group { margin-bottom: 15px; }
.nav-group-title { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
                   color: var(--sidebar-mute); padding: 6px 8px; gap: 6px; }
.nav-link { border-radius: 10px; padding: 8px 10px; gap: 10px; font-size: 12.8px; font-weight: 500;
            color: var(--sidebar-text); transition: background .14s ease, color .14s ease; }
.nav-link svg { width: 15px; height: 15px; flex: 0 0 15px; opacity: .85; }
.nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-link.active { background: var(--brand); color: #fff; box-shadow: 0 10px 22px -14px rgba(98, 95, 255, 1); }
.nav-count { margin-left: auto; font-size: 10.5px; font-weight: 600; line-height: 1; padding: 3px 6px; border-radius: 999px;
             background: rgba(255, 255, 255, .10); color: #fff; }
.nav-link.active .nav-count { background: rgba(255, 255, 255, .22); }
.nav-sub { margin: 2px 0 6px 26px; }
.nav-sub a { font-size: 12px; padding: 5px 0; color: var(--sidebar-mute); border-left: 2px solid rgba(255, 255, 255, .08); padding-left: 12px; }
.nav-sub a.active { color: #fff; border-left-color: var(--brand); }
.sidebar-foot { border-top: 1px solid rgba(255, 255, 255, .08); }
.user-chip { background: rgba(255, 255, 255, .05); border-radius: 12px; padding: 8px; }

/* ----------------------------------------------------------------- topbar */
.topbar { background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
          padding: 10px 18px; gap: 12px; }
.crumb { font-size: 12.5px; }
.crumb span:first-child { color: var(--text-mute); }
.crumb strong { font-weight: 600; }
.topbar-search { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
                 padding: 7px 14px; max-width: 420px; flex: 1 1 260px; }
.topbar-search:focus-within { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: #fff;
                              box-shadow: 0 0 0 4px var(--brand-soft); }
.icon-btn { border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--text-soft); }
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); }
.badge-count { background: var(--danger); }

/* -------------------------------------------------------- page + content */
.content { padding: 20px 22px 40px; }
.page-head { gap: 14px; margin-bottom: 16px; align-items: flex-start; }
.page-title { font-size: 22px; font-weight: 700; }
.page-sub { font-size: 12.5px; color: var(--text-mute); margin-top: 3px; }

/* ------------------------------------------------------------------ cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-head { padding: 13px 16px; border-bottom: 1px solid var(--line); gap: 10px; align-items: center; }
.card-title { font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; }
.card-sub { font-size: 11.5px; color: var(--text-mute); margin-top: 2px; }
.card-body { padding: 14px 16px; }
.card-foot { padding: 10px 16px; border-top: 1px solid var(--line); }

/* -------------------------------------------------------------- KPI strip */
.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi-tile { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px;
            background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
            padding: 13px 14px; box-shadow: var(--shadow-sm); color: inherit; text-decoration: none;
            transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
a.kpi-tile:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); box-shadow: var(--shadow); transform: translateY(-1px); }
.kpi-tile.static { cursor: default; }
.kpi-icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.kpi-icon svg { width: 16px; height: 16px; }
.kpi-green .kpi-icon { background: rgba(0, 187, 127, .12); color: #00a06e; }
.kpi-red .kpi-icon { background: rgba(255, 35, 87, .12); color: #e01e4a; }
.kpi-amber .kpi-icon { background: rgba(249, 156, 0, .14); color: #c47b00; }
.kpi-violet .kpi-icon { background: rgba(139, 92, 246, .14); color: #7c4ff0; }
.kpi-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi-label { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-mute); }
.kpi-value { font-size: 21px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-mute); min-width: 0; }
.kpi-sub { color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delta { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.delta.up { background: rgba(0, 187, 127, .13); color: #00875d; }
.delta.down { background: rgba(255, 35, 87, .13); color: #d31a45; }
.delta.flat { background: var(--surface-2); color: var(--text-mute); }
.spark { width: 76px; height: 26px; opacity: .95; }

/* ------------------------------------------------------------ charts etc. */
.donut-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.donut-svg { flex: 0 0 auto; }
.donut-center-top { font-size: 3.1px; fill: var(--text-mute); font-family: var(--font); }
.donut-center-value { font-size: 5.4px; font-weight: 700; fill: var(--text); font-family: var(--font-display); }
.donut-legend { flex: 1 1 168px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.donut-legend .item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.donut-legend .item .lbl { color: var(--text-soft); flex: 1 1 auto; }
.donut-legend .item .val { font-weight: 650; font-variant-numeric: tabular-nums; }
.donut-legend .swatch { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 9px; }
.donut-foot { font-size: 11.5px; color: var(--text-mute); border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 4px; }

.rank-list { display: flex; flex-direction: column; gap: 9px; }
.rank-row { display: flex; flex-direction: column; gap: 4px; }
.rank-head { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.rank-label { color: var(--text-soft); font-weight: 550; }
.rank-value { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.rank-value em { font-style: normal; font-weight: 500; color: var(--text-mute); font-size: 10.5px; margin-left: 4px; }
.rank-track { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.rank-track span { display: block; height: 100%; border-radius: 999px; }

.heat { overflow-x: auto; }
.heat-grid { display: grid; gap: 3px; align-items: center; min-width: 420px; }
.heat-col, .heat-row { font-size: 9.5px; color: var(--text-mute); }
.heat-row { text-align: right; padding-right: 6px; white-space: nowrap; }
.heat-col { text-align: center; padding-bottom: 2px; }
.heat-cell { border-radius: 5px; height: 24px; display: grid; place-items: center; font-size: 9.5px; color: #fff;
             background: var(--surface-2); font-variant-numeric: tabular-nums; }
.heat-corner { }

.area-svg { width: 100%; height: auto; display: block; }
.area-grid { stroke: var(--line); stroke-width: .6; stroke-dasharray: 3 5; }
.area-x { font-size: 10px; fill: var(--text-mute); font-family: var(--font); }
.bars { display: flex; align-items: flex-end; gap: 10px; }
.bar-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.bar-stack { flex: 1 1 auto; width: 100%; max-width: 34px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.bar-seg { border-radius: 6px; display: block; }
.bar-x { font-size: 10px; color: var(--text-mute); }

/* ----------------------------------------------------- figures / snapshot */
.fig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 10px; }
.fig { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.fig-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute); font-weight: 700; }
.fig-value { font-size: 18px; font-weight: 700; margin-top: 2px; }
.fig-sub { font-size: 10.5px; color: var(--text-mute); }

/* ----------------------------------------------------------- AI/agent row */
.ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.ai-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 13px 14px;
           display: flex; flex-direction: column; gap: 8px; }
.ai-head { display: flex; align-items: center; gap: 9px; }
.ai-avatar { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 12px;
             font-weight: 700; font-family: var(--font-display); }
.ai-name { font-size: 13px; font-weight: 650; font-family: var(--font-display); }
.ai-role { font-size: 10.5px; color: var(--text-mute); }
.ai-line { font-size: 12px; color: var(--text-soft); line-height: 1.5; min-height: 34px; }
.ai-actions { display: flex; gap: 7px; margin-top: auto; }

/* ------------------------------------------------------- pills and chips */
.pill { border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--text-soft);
        padding: 5px 12px; font-size: 12px; font-weight: 550; }
.pill:hover { border-color: var(--border-strong); color: var(--text); }
.pill.active, .pill.on { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 8px 18px -12px rgba(98, 95, 255, .9); }
.chip-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.badge { border-radius: 999px; font-size: 10.5px; font-weight: 650; padding: 3px 9px; border: 1px solid transparent; }
.badge-success, .badge-low, .badge-done, .badge-paid, .badge-connected, .badge-qualified { background: rgba(0, 187, 127, .12); color: #00875d; }
.badge-warn, .badge-medium, .badge-pending, .badge-partial, .badge-voicemail { background: rgba(249, 156, 0, .15); color: #b3730a; }
.badge-danger, .badge-high, .badge-overdue, .badge-urgent, .badge-not_interested, .badge-no_answer { background: rgba(255, 35, 87, .12); color: #d31a45; }
.badge-info, .badge-sent, .badge-open, .badge-in_progress { background: rgba(79, 57, 246, .12); color: #4f39f6; }
.badge-muted, .badge-draft, .badge-later, .badge-busy { background: var(--surface-2); color: var(--text-mute); }

/* conversations — one badge class per real channel */
.badge-email    { background: rgba(79, 57, 246, .12);  color: #4f39f6; }
.badge-whatsapp { background: rgba(0, 187, 127, .13);  color: #00875d; }
.badge-phone    { background: rgba(249, 156, 0, .15);  color: #b3730a; }
.badge-web_chat { background: rgba(14, 165, 233, .13); color: #0369a1; }
.badge-sms      { background: rgba(139, 92, 246, .14); color: #6d28d9; }
.badge-meeting  { background: rgba(244, 63, 94, .12);  color: #be123c; }
.badge-note     { background: var(--surface-2);        color: var(--text-soft); }
[data-theme="dark"] .badge-email    { color: #a5b4fc; }
[data-theme="dark"] .badge-whatsapp { color: #6ee7b7; }
[data-theme="dark"] .badge-phone    { color: #fcd34d; }
[data-theme="dark"] .badge-web_chat { color: #7dd3fc; }
[data-theme="dark"] .badge-sms      { color: #c4b5fd; }
[data-theme="dark"] .badge-meeting  { color: #fda4af; }
.tag-chip { border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-soft);
            font-size: 10.5px; padding: 2px 9px; }

/* ---------------------------------------------------------------- buttons */
.btn { border-radius: 10px; font-weight: 600; font-size: 12.5px; border: 1px solid var(--line); background: #fff; color: var(--text); }
.btn:hover { border-color: var(--border-strong); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 10px 22px -14px rgba(98, 95, 255, 1); }
.btn-primary:hover { background: #554fff; border-color: #554fff; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-soft); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
/* this layer re-declares .btn after the base rules, so the tones that are not
   restated here would lose their colour — Delete used to render as a plain
   white button. */
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff;
              box-shadow: 0 10px 22px -14px rgba(255, 35, 87, .9); }
.btn-danger:hover { background: #e01e4a; border-color: #e01e4a; color: #fff; }
.btn-sm { padding: 6px 11px; font-size: 12px; }
.btn-xs { padding: 4px 9px; font-size: 11px; }

/* ----------------------------------------------------------------- tables */
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; }
table.data thead th { background: var(--surface-2); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
                      color: var(--text-mute); font-weight: 700; padding: 9px 12px; border-bottom: 1px solid var(--line); }
table.data tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; vertical-align: middle; }
table.data tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 60%, #fff); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data .cell-main { font-weight: 600; }
table.data .cell-sub { font-size: 10.5px; color: var(--text-mute); }
.soft { color: var(--text-mute); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(228px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.kanban-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.kanban-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; }
.kanban-head .t { font-size: 12.5px; font-weight: 650; }
.kanban-head .c { margin-left: auto; font-size: 11px; color: var(--text-mute); background: #fff; border: 1px solid var(--line);
                  border-radius: 999px; padding: 1px 7px; }
.kanban-body { display: flex; flex-direction: column; gap: 9px; min-height: 60px; }
.kanban-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px;
               box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 7px; }
.kanban-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.kanban-card .k-title { font-size: 12.8px; font-weight: 600; line-height: 1.35; }
.kanban-card .k-meta { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--text-mute); }
.kanban-card .k-foot { display: flex; align-items: center; gap: 8px; }
.kanban-card .k-foot .avatar { margin-left: auto; }

/* ------------------------------------------------------- stat + misc bits */
.stat-value { font-size: 22px; font-weight: 700; }
.metric-row { display: flex; align-items: baseline; gap: 8px; }
.grid-3 > .card, .grid-2 > .card, .grid-4 > .card { height: 100%; }

/* ------------------------------------------------------- ask-AI floating */
.ask-ai { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: inline-flex; align-items: center; gap: 8px;
          background: var(--brand); color: #fff; border-radius: 999px; padding: 11px 18px 11px 14px; font-size: 13px; font-weight: 600;
          box-shadow: 0 20px 40px -18px rgba(98, 95, 255, 1); text-decoration: none; }
.ask-ai:hover { background: #554fff; }
.ask-ai svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .ask-ai { right: 16px; bottom: calc(74px + env(safe-area-inset-bottom)); padding: 10px 15px 10px 12px; } }

/* --------------------------------------------------- reference-ish tweaks */
.kpi, .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.kpi-label { font-size: 10px; letter-spacing: .09em; }
.kpi-value { font-size: 20px; font-weight: 700; }
.kpi-foot { font-size: 11px; color: var(--text-mute); }
.table thead th, .data thead th { text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.inline-form { display: inline-flex; margin: 0; }
a, button { -webkit-tap-highlight-color: transparent; }
.section-title { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute);
                 display: flex; align-items: center; gap: 8px; margin: 20px 2px 10px; }

/* dashboard widget board (drag to rearrange) */
.widget-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; align-items:start; grid-auto-flow:row dense; }
.widget-grid > .span-2 { grid-column: span 2; }
.stack-track { display:flex; height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; gap:2px; }
.stack-seg { height:100%; border-radius:999px; }
.row { display:flex; align-items:center; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.legend { display:flex; align-items:center; gap:12px; font-size:11px; color:var(--text-mute); flex-wrap:wrap; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend i { width:9px; height:9px; border-radius:3px; display:inline-block; }
@media (max-width: 900px) {
    .widget-grid { grid-template-columns:minmax(0,1fr); }
    .widget-grid > .span-2 { grid-column: span 1; }
    .kpi-strip { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .kpi-strip .kpi-tile { grid-template-columns:30px minmax(0,1fr); }
    .kpi-strip .spark { display:none; }
}

/* chart sizing (the SVGs scale with the card, never balloon) */
.area-svg { width:100%; height:200px; }
.card-body .area-svg { max-height:260px; }

/* install prompt: a corner card instead of a full-width bar that covered content */
.install-bar { left:auto; right:20px; max-width:360px; bottom:calc(24px + env(safe-area-inset-bottom)); }
@media (max-width: 900px) { .install-bar { left:12px; right:12px; max-width:none; bottom:calc(84px + env(safe-area-inset-bottom)); } }

/* never let a wide table stretch its grid column (payroll, invoices…) */
.table-wrap { overflow-x: auto; }
.grid > *, .stack > * { min-width: 0; }
.data { min-width: 0; }

/* phones: let KPI captions breathe and keep the floating bits apart */
@media (max-width: 900px) {
    .kpi-sub { white-space: normal; }
    .kpi-meta { flex-wrap: wrap; }
    .ask-ai { bottom: calc(96px + env(safe-area-inset-bottom)); }
    /* install prompt docked right above the tabbar as a slim strip, so it hides
       as little of the page as possible */
    .install-bar { bottom: calc(76px + env(safe-area-inset-bottom)); padding: 8px 10px; gap: 8px; border-radius: 13px; }
    .install-bar .brand-mark { width: 30px !important; height: 30px !important; border-radius: 10px !important; }
    .install-bar .tiny { display: none; }
    /* the floating AI pill would sit on the content on a phone — the topbar
       carries the same shortcut as an icon instead */
    .ask-ai { display: none !important; }
    .ask-ai-top { display: inline-flex !important; }
}

/* KPI captions wrap instead of clipping mid-word */
.kpi-sub { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
.kpi-meta { flex-wrap: wrap; }
.kpi-strip { align-items: stretch; }

/* in-page confirm dialog — works even where window.confirm() is blocked */
.confirm-host { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:18px;
                opacity:0; transition:opacity .16s ease; }
.confirm-host.in { opacity:1; }
.confirm-backdrop { position:absolute; inset:0; background:rgba(15,23,43,.42); }
.confirm-card { position:relative; z-index:1; width:min(94vw, 384px); background:var(--surface); border:1px solid var(--line);
                border-radius:16px; padding:18px; box-shadow:0 34px 70px -30px rgba(15,23,43,.6);
                display:grid; gap:14px; transform:translateY(6px) scale(.98); transition:transform .18s ease; }
.confirm-host.in .confirm-card { transform:none; }
.confirm-text { margin:0; font-size:14px; font-weight:600; color:var(--text); line-height:1.45; }
.confirm-actions { display:flex; justify-content:flex-end; gap:8px; }

/* ================================================== sales call log ==== */
.mini-chip { display:inline-flex; align-items:center; gap:3px; padding:1px 6px; border-radius:6px; font-size:10px; font-weight:700;
             background:var(--surface-3); color:var(--text-mute); white-space:nowrap; }
.mini-chip.warn { background:#f99c001f; color:#b97400; }

/* clickable table rows */
tr[data-row-href] { cursor:pointer; }
tr[data-row-href]:hover { background:var(--surface-2); }

/* row action menu (⋯) */
.row-menu > summary { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
                      border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--text-soft);
                      font-size:15px; line-height:1; }
.row-menu > summary:hover { border-color:var(--accent); color:var(--accent); }
.row-menu[open] > summary { border-color:var(--accent); color:var(--accent); }
.row-menu-panel { position:absolute; right:0; top:calc(100% + 6px); z-index:60; width:238px; max-height:70vh; overflow-y:auto;
                  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:8px;
                  box-shadow:0 30px 60px -28px rgba(15,23,43,.5); display:grid; gap:2px; text-align:left; }
.row-menu-head { padding:6px 8px 8px; border-bottom:1px solid var(--line); margin-bottom:5px; display:grid; gap:2px; }
.row-menu-label { padding:6px 8px 2px; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-mute); }
.row-menu-item { display:flex; align-items:center; gap:7px; width:100%; padding:7px 9px; border:0; background:none; border-radius:9px;
                 font:inherit; font-size:12.5px; font-weight:600; color:var(--text); text-align:left; cursor:pointer; text-decoration:none; }
.row-menu-item:hover { background:var(--surface-2); color:var(--accent); }
.row-menu-item.danger { color:var(--danger); }
.row-menu-item.danger:hover { background:color-mix(in srgb, var(--danger) 12%, var(--surface)); color:var(--danger); }
.row-menu-sep { height:1px; background:var(--line); margin:5px 4px; }
.row-menu-row { display:flex; flex-wrap:wrap; gap:5px; padding:2px 8px 4px; }
.row-menu-row .chip-btn { padding:4px 9px; font-size:11px; border-style:solid; }
.row-menu-row .chip-btn.on { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.row-menu .swatch { width:9px; height:9px; border-radius:3px; display:inline-block; }
.inline-form { display:inline; }

/* =============================================== topbar punch clock ==== */
.punch { display:flex; align-items:center; gap:6px; }
.punch-form { display:inline; }
.punch-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; border:1px solid transparent;
             font:inherit; font-size:12.5px; font-weight:650; cursor:pointer; white-space:nowrap; }
.punch-btn.in { background:var(--brand, #625fff); color:#fff; }
.punch-btn.in:hover { filter:brightness(1.06); }
.punch-btn.out { background:var(--surface); border-color:var(--line); color:var(--text); }
.punch-btn.out:hover { border-color:var(--brand, #625fff); color:var(--brand, #625fff); }
.punch-live { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; background:#00bb7f1a;
              border:1px solid #00bb7f44; color:#00895c; font-size:12.5px; font-weight:650; font-variant-numeric:tabular-nums; }
.punch-dot { width:7px; height:7px; border-radius:999px; background:#00bb7f; box-shadow:0 0 0 3px #00bb7f26; }
.punch-done { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; background:var(--surface-2);
              border:1px solid var(--line); color:var(--text-soft); font-size:12.5px; font-weight:650; text-decoration:none; }
@media (max-width: 900px) {
    .punch-btn .punch-label { display:none; }
    .punch-btn { padding:8px 10px; }
    .punch-live { padding:6px 9px; }
    .punch-done span { display:none; }
}

/* ================================================= record drawer ====== */
.drawer-host { position:fixed; inset:0; z-index:150; }
.drawer-backdrop { position:absolute; inset:0; background:rgba(15,23,43,.38); animation:fadeIn .16s ease; }
.drawer { position:absolute; top:0; right:0; height:100%; width:min(94vw, 430px); background:var(--surface);
          border-left:1px solid var(--line); box-shadow:-30px 0 70px -34px rgba(15,23,43,.6);
          display:flex; flex-direction:column; animation:slideIn .22s cubic-bezier(.22,.8,.3,1); }
@keyframes slideIn { from { transform:translateX(28px); opacity:.4 } to { transform:none; opacity:1 } }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
.drawer-head { display:flex; align-items:center; gap:11px; padding:16px; border-bottom:1px solid var(--line); }
.drawer-title { margin:0; font-size:16px; font-weight:700; letter-spacing:-.01em; }
.drawer-sub { font-size:12px; color:var(--text-mute); }
.drawer-close { margin-left:auto; width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
                border:1px solid var(--line); color:var(--text-soft); text-decoration:none; }
.drawer-close:hover { border-color:var(--danger); color:var(--danger); }
.drawer-tags { display:flex; flex-wrap:wrap; gap:6px; padding:12px 16px 0; }
.drawer-stats { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; padding:12px 16px; }
.drawer-stat { background:var(--surface-2); border:1px solid var(--line); border-radius:11px; padding:8px 10px; display:grid; gap:2px; }
.drawer-stat .lbl { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-mute); font-weight:700; }
.drawer-stat .val { font-size:13px; font-weight:650; font-variant-numeric:tabular-nums; }
.drawer-actions { display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 14px; border-bottom:1px solid var(--line); }
.drawer-body { padding:14px 16px 26px; overflow-y:auto; display:grid; gap:16px; }
.drawer-block { display:grid; gap:8px; }
.drawer-block-head { display:flex; align-items:baseline; gap:8px; }
.drawer-block-head .tiny { margin-left:auto; }
.drawer-form { display:grid; gap:8px; }
.drawer-row { display:flex; align-items:center; gap:10px; justify-content:space-between; padding:9px 11px;
              background:var(--surface-2); border:1px solid var(--line); border-radius:11px; }
.drawer-row.link { text-decoration:none; color:inherit; }
.drawer-row.link:hover { border-color:var(--accent); }
.timeline { list-style:none; margin:0; padding:0 0 0 4px; display:grid; gap:12px; }
/* Only the drawer's dotted list is a flex row (dot + text). The conversation
   stream stacks its header, subject and body — laying that out as flex put the
   subject and the message side by side in two squashed columns. */
.timeline-item.timeline-dotted { display:flex; gap:10px; position:relative; }
.timeline-item.timeline-dotted:not(:last-child)::before { content:""; position:absolute; left:4px; top:14px; bottom:-12px; width:1px; background:var(--line); }
.timeline-dot { width:9px; height:9px; border-radius:999px; margin-top:5px; flex:0 0 9px; }
@media (max-width: 640px) {
    .drawer { width:100%; }
    .drawer-stats { grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* Ask-AI shortcut for phones: hidden on desktop, shown by the rule above */
.ask-ai-top { display: none; }

/* ==========================================================================
   Phone layout — a telesales rep works this app one-handed, standing up.
   The job on a small screen is: see the list, tap the number, log the call.
   Everything else (filters, KPIs, chrome) gets out of the way.
   ========================================================================== */
@media (max-width: 720px) {

    /* ---- one compact app bar instead of two stacked rows ---- */
    .topbar {
        display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
        padding: 8px 10px calc(8px); min-height: 54px;
        position: sticky; top: 0; z-index: 50;
    }
    .topbar .crumb { min-width: 0; flex: 1; font-size: 15px; font-weight: 700; }
    .topbar .crumb .crumb-org,
    .topbar .crumb .sep { display: none; }          /* company lives in the drawer */
    .topbar .icon-btn { width: 38px; height: 38px; flex: 0 0 38px; }
    .topbar .ask-ai-top,
    .topbar [data-theme-toggle],
    .topbar .company { display: none; }              /* moved into More */
    .topbar .punch { margin-left: auto; }
    .topbar .punch .punch-label { display: none; }

    /* ---- page head: title small, actions inline ---- */
    .content { padding: 12px 12px 18px; }
    .page-title { font-size: 21px; line-height: 1.2; }
    .page-sub { font-size: 12.5px; }
    .page-head { gap: 8px; margin-bottom: 10px; }
    .page-actions { gap: 6px; }
    .page-actions .btn { flex: 0 0 auto; }

    /* ---- KPIs: a swipeable strip, not four full-width cards ---- */
    .kpi-grid {
        display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin-bottom: 10px;
        scrollbar-width: none;
    }
    .kpi-grid::-webkit-scrollbar { display: none; }
    .kpi-grid > * { flex: 0 0 46%; scroll-snap-align: start; padding: 11px 12px; }
    .kpi-value { font-size: 20px; }
    .kpi-label { font-size: 10px; }
    .kpi-foot { font-size: 10.5px; }

    /* ---- filters collapse behind one button ---- */
    .toolbar { position: relative; gap: 8px; }
    .toolbar .search-box { order: -1; width: 100%; min-height: 44px; }
    .toolbar.is-collapsed > *:not(.search-box):not(.filter-toggle) { display: none; }
    .filter-toggle {
        display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 13px;
        border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2);
        color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    }
    .filter-toggle[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); border-color: var(--accent); color: var(--accent); }
    .filter-toggle .count { background: var(--accent); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px; }

    /* ---- tables become cards: no sideways scrolling to read a row ---- */
    table.data.as-cards,
    table.data.as-cards tbody,
    table.data.as-cards tr,
    table.data.as-cards td { display: block; width: auto; }
    table.data.as-cards thead { display: none; }
    table.data.as-cards tr {
        border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
        padding: 10px 12px; margin-bottom: 9px;
    }
    table.data.as-cards td {
        display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
        padding: 3px 0; border: 0; text-align: right; font-size: 13px;
    }
    table.data.as-cards td::before {
        content: attr(data-label); flex: 0 0 auto; text-align: left;
        color: var(--text-mute); font-size: 11.5px; font-weight: 600;
        text-transform: uppercase; letter-spacing: .04em;
    }
    /* first cell is the row's title */
    table.data.as-cards td:first-child {
        font-size: 15px; font-weight: 680; text-align: left; padding-bottom: 7px;
        margin-bottom: 5px; border-bottom: 1px solid var(--line);
    }
    table.data.as-cards td:first-child::before { display: none; }
    table.data.as-cards td:empty { display: none; }
    table.data.as-cards td.num { font-variant-numeric: tabular-nums; }
    /* the actions cell sits full width at the bottom, thumb-sized */
    table.data.as-cards td.cell-actions-wrap,
    table.data.as-cards td:last-child { justify-content: flex-start; padding-top: 8px; }
    table.data.as-cards td:last-child::before { display: none; }
    table.data.as-cards .cell-actions { display: flex; flex-wrap: wrap; gap: 7px; width: 100%; }
    table.data.as-cards .cell-actions .btn { min-height: 38px; }
    table.data.as-cards .cell-sub { display: block; text-align: right; }
    table.data.as-cards td:first-child .cell-sub { text-align: left; }

    /* ---- tap-to-call: the one action that matters on this phone ---- */
    .call-now {
        display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px;
        border-radius: 999px; background: var(--success, #10b981); color: #fff;
        font-size: 13px; font-weight: 650; text-decoration: none; white-space: nowrap;
    }
    .call-now:active { transform: scale(.96); }
    .call-now svg { width: 15px; height: 15px; }

    /* ---- comfortable hit targets everywhere ---- */
    .btn, .chip-btn, select, .input, .pill, summary.icon-btn { min-height: 42px; }
    .btn-sm, .btn-xs { min-height: 38px; }
    .pagination { gap: 8px; }
    .pagination .pages a, .pagination .pages .pg { min-width: 38px; min-height: 38px; display: grid; place-items: center; }
}

/* The drawer carries what the compact phone bar drops. On wider screens the
   topbar still has these controls, so the block must stay hidden — otherwise
   the sidebar shows a second Dark mode toggle and a second Ask AI link. */
.drawer-extras { display: none; }

@media (max-width: 720px) {
    .drawer-extras {
        display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
        padding: 10px 12px; border-top: 1px solid rgba(255, 255, 255, .08);
    }
    /* match the dark drawer instead of punching two white slabs through it */
    .drawer-extras .btn {
        min-height: 40px; padding: 0 10px; font-size: 12.5px;
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .14);
        color: #e7ebf5;
    }
    .drawer-extras .btn:active { background: rgba(255, 255, 255, .12); }

    /* The company switcher ran the full width of the drawer while every other
       row is inset, so it read as a broken text box hanging off the edge. */
    .sidebar form[data-switch-company] { padding: 0 12px; }
    .sidebar .biz-switch,
    .sidebar select.biz-switch {
        width: 100%; min-height: 44px; border-radius: 12px;
        font-size: 13.5px; line-height: 1.25;
    }

    /* the bottom tab bar sits over the drawer; keep the user chip clear of it */
    .sidebar { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
    .sidebar .nav { flex: 1 1 auto; min-height: 0; }
}

/* On a phone the rep wants the list, not the analytics. Reordering is done
   with flex `order` so the DOM stays exactly as the server sent it — the live
   filter swap matches nodes by position and would break if we moved them. */
@media (max-width: 720px) {
    .content { display: flex; flex-direction: column; }
    .content > *            { order: 0; }
    .content > .is-primary-list { order: 1; }
    .content > .kpi-grid,
    .content > .kpi-strip   { order: 2; }
    .content > .widget-grid { order: 3; }
    .content > .kpi-grid > *, .content > .kpi-strip > * { scroll-snap-align: start; }
}

/* Table / Board switch — every list can be read either way */
.view-switch { display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--surface-2); }
.view-switch a { display:inline-flex; align-items:center; gap:6px; padding:8px 13px; font-size:12.5px; font-weight:600;
                 color:var(--text-mute); text-decoration:none; }
.view-switch a svg { width:14px; height:14px; }
.view-switch a.active { background:var(--surface); color:var(--accent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
@media (max-width: 720px) {
    .view-switch a { min-height:40px; padding:0 14px; }
    .kanban { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
    .kanban > .kanban-col { flex:0 0 82%; scroll-snap-align:start; }
}

/* Masked contact details — one row's number at a time, never the whole list */
.reveal { position: relative; display: inline-block; cursor: pointer; }
.reveal-mask { font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--text-mute); }
.reveal-full { display: none; font-variant-numeric: tabular-nums; }
tr:hover .reveal .reveal-mask,
.reveal:hover .reveal-mask,
.reveal.is-shown .reveal-mask { display: none; }
tr:hover .reveal .reveal-full,
.reveal:hover .reveal-full,
.reveal.is-shown .reveal-full { display: inline; color: var(--text); }
.reveal-go {
    display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 7px;
    border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2);
    color: var(--accent); vertical-align: middle; text-decoration: none;
}
.reveal-go svg { width: 13px; height: 13px; }
.reveal-go:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); border-color: var(--accent); }
.reveal-go:active { transform: scale(.94); }
@media (max-width: 720px) {
    .reveal-go { width: 38px; height: 38px; margin-left: 10px; }
    .reveal-go svg { width: 16px; height: 16px; }
}

/* ==========================================================================
   Match the WorkSpace reference design (employee.html)
   --------------------------------------------------------------------------
   The reference is a Tailwind build; these are its measured values expressed
   in this app's own tokens, so every existing component picks them up:

     sidebar      #ffffff, 240px, 1px right border #e2e8f0
     nav link     13px / 500, radius 8px, padding 8px 10px, slate-500
     nav active   #4f39f6 on #eef2ff
     card         radius 16px, 1px #e2e8f0, shadow 0 1px 3px rgba(15,23,42,.03)
     KPI value    24px / 700, tracking -.025em, slate-900
   ========================================================================== */
:root {
    /* the reference sidebar is light, not navy */
    --sidebar-bg: #ffffff;
    --sidebar-bg-2: #ffffff;
    --sidebar-text: #475569;   /* slate-600 */
    --sidebar-mute: #94a3b8;   /* slate-400 */
    --sidebar-line: #e2e8f0;   /* slate-200 */
    --sidebar-w: 240px;

    --border: #e2e8f0;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
    --shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px -1px rgba(15, 23, 42, .04);
}

/* dark mode keeps a dark rail, as the reference does behind its moon toggle */
:root[data-theme="dark"] {
    --sidebar-bg: #0b1120;
    --sidebar-bg-2: #0b1120;
    --sidebar-text: #cbd5e1;
    --sidebar-mute: #64748b;
    --sidebar-line: rgba(255, 255, 255, .08);
}

.sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-line);
    color: var(--sidebar-text);
}
.sidebar-head { border-bottom: 1px solid var(--sidebar-line); }
.brand-name { color: var(--text); }
.brand-sub, .biz-meta, .nav-group-title { color: var(--sidebar-mute); }

/* the company switcher reads as a card, not a dark well */
.biz-switch, .sidebar .biz-switch, .sidebar select.biz-switch {
    background: var(--surface);
    border: 1px solid var(--sidebar-line);
    color: var(--text);
    border-radius: 10px;
}
.biz-name { color: var(--text); }

/* nav */
.nav-group-title { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.nav-link {
    font-size: 13px; font-weight: 500; border-radius: 8px; padding: 8px 10px;
    color: var(--sidebar-text);
}
.nav-link:hover { background: #f1f5f9; color: var(--text); }
:root[data-theme="dark"] .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-link.active {
    background: var(--brand-soft); color: var(--brand); font-weight: 600;
}
.nav-link.active svg { color: var(--brand); }
.nav-count {
    background: #f1f5f9; color: var(--sidebar-text);
    border-radius: 999px; font-size: 10.5px; font-weight: 700; padding: 1px 7px;
}
.nav-link.active .nav-count { background: var(--brand); color: #fff; }
:root[data-theme="dark"] .nav-count { background: rgba(255, 255, 255, .1); }
.nav-sub a { color: var(--sidebar-mute); border-left-color: var(--sidebar-line); }
.nav-sub a:hover, .nav-sub a.active { color: var(--brand); }

/* footer + user chip */
.sidebar-foot { border-top: 1px solid var(--sidebar-line); }
.user-chip { background: #f8fafc; border: 1px solid var(--sidebar-line); }
.user-chip .name { color: var(--text); }
.user-chip .role { color: var(--sidebar-mute); }
:root[data-theme="dark"] .user-chip { background: rgba(255, 255, 255, .05); border-color: transparent; }
:root[data-theme="dark"] .user-chip .name { color: #fff; }

/* cards + surfaces */
.card, .panel, .kpi, .widget {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

/* KPI tiles: coloured top edge, compact type — as the reference renders them */
.kpi { position: relative; overflow: hidden; padding: 14px 16px; }
.kpi::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--violet, #8b5cf6));
}
.kpi:nth-child(2n)::before { background: linear-gradient(90deg, var(--info), #22d3ee); }
.kpi:nth-child(3n)::before { background: linear-gradient(90deg, var(--accent), #34d399); }
.kpi:nth-child(4n)::before { background: linear-gradient(90deg, var(--danger), #fb7185); }
.kpi:nth-child(5n)::before { background: linear-gradient(90deg, var(--warn), #fbbf24); }
.kpi-label { font-size: 10.5px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; color: var(--text-mute); }
.kpi-value { font-size: 24px; font-weight: 700; letter-spacing: -.025em; color: var(--text); margin-top: 6px; }
.kpi-foot { font-size: 11px; color: var(--text-mute); }

/* page heading scale */
.page-title { font-size: 22px; font-weight: 700; letter-spacing: -.025em; }
.card-title { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.card-sub { font-size: 12px; color: var(--text-mute); }

/* KPI label stays on one line, as in the reference */
.kpi-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .kpi-value { line-height: 1.15; }

/* KPI tile laid out like the reference:
      [icon]  LABEL
      VALUE
      delta · sub                       sparkline
   The old row layout made the label compete with the sparkline for width,
   so every label truncated to "TOTAL A…". */
.kpi-tile {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icon  label"
        "value value"
        "meta  spark";
    align-items: center;
    gap: 7px 10px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
}
.kpi-tile .kpi-icon  { grid-area: icon; width: 30px; height: 30px; border-radius: 9px; }
.kpi-tile .kpi-icon svg { width: 15px; height: 15px; }
.kpi-tile .kpi-body  { display: contents; }
.kpi-tile .kpi-label {
    grid-area: label; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 10.5px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase;
    color: var(--text-mute);
}
.kpi-tile .kpi-value {
    grid-area: value; font-size: 24px; font-weight: 700; letter-spacing: -.025em;
    line-height: 1.1; margin: 0; color: var(--text);
}
.kpi-tile .kpi-meta  { grid-area: meta; flex-wrap: wrap; }
.kpi-tile .spark     { grid-area: spark; justify-self: end; }

/* the coloured top edge belongs to the tile, not only the .kpi block */
.kpi-tile { position: relative; overflow: hidden; }
.kpi-tile::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--violet, #8b5cf6));
}
.kpi-tile.kpi-info::before    { background: linear-gradient(90deg, var(--info), #22d3ee); }
.kpi-tile.kpi-success::before,
.kpi-tile.kpi-accent::before  { background: linear-gradient(90deg, var(--accent), #34d399); }
.kpi-tile.kpi-danger::before  { background: linear-gradient(90deg, var(--danger), #fb7185); }
.kpi-tile.kpi-warn::before    { background: linear-gradient(90deg, var(--warn), #fbbf24); }
/* the tones the pages actually pass (green / amber / red / violet / brand) */
.kpi-tile.kpi-green::before  { background: linear-gradient(90deg, var(--accent), #34d399); }
.kpi-tile.kpi-amber::before  { background: linear-gradient(90deg, var(--warn), #fbbf24); }
.kpi-tile.kpi-red::before    { background: linear-gradient(90deg, var(--danger), #fb7185); }
.kpi-tile.kpi-violet::before { background: linear-gradient(90deg, #8b5cf6, #c4b5fd); }
.kpi-tile.kpi-brand::before  { background: linear-gradient(90deg, var(--brand), #a5b4fc); }
.kpi-tile.kpi-amber .kpi-icon { background: rgba(249, 156, 0, .14); color: #c47b00; }

@media (max-width: 720px) {
    .kpi-tile { padding: 12px 13px; }
    .kpi-tile .kpi-value { font-size: 21px; }
}

/* The sparkline needs its own column, otherwise the long "meta" line sizes
   column 1 and squeezes the label down to "TO…". */
.kpi-tile {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "icon  label label"
        "value value spark"
        "meta  meta  spark";
    column-gap: 10px;
}
.kpi-tile .spark { grid-area: spark; align-self: center; justify-self: end; width: 72px; }
.kpi-tile .kpi-meta { grid-area: meta; min-width: 0; font-size: 11px; }
.kpi-tile .kpi-sub { white-space: normal; }
@media (max-width: 720px) {
    .kpi-tile { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon label" "value value" "meta meta"; }
    .kpi-tile .spark { display: none; }
}

/* ==========================================================================
   Call console — the dialler at the top of the call log
   ========================================================================== */
.call-console.is-live { box-shadow: 0 0 0 2px rgba(0, 187, 127, .35), var(--shadow); }
.console-mode .inline-form { display: inline-flex; }
.console-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 18px; align-items: start; }
.console-who { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--surface-2); }
.console-name { font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.console-meta { font-size: 12.5px; color: var(--text-soft); margin-top: 2px; }
.console-contacts { margin-top: 10px; display: grid; gap: 4px; }
.console-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.console-dial { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn-dial { padding: 10px 20px; font-size: 14px; border-radius: 999px; }
.btn-dial svg { width: 16px; height: 16px; }
.console-timer { display: flex; align-items: center; gap: 6px; }
.timer-face { font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 650; min-width: 58px;
              padding: 3px 8px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.call-console.is-live .timer-face { color: #00bb7f; border-color: rgba(0, 187, 127, .45); }
.console-history { margin-top: 12px; display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.console-label { font-size: 12.5px; color: var(--text-soft); margin-bottom: 8px; }
.dispo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.dispo-btn { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer;
             border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
             color: var(--text); font: inherit; font-size: 13px; font-weight: 550; text-align: left;
             transition: border-color .12s ease, background .12s ease, transform .12s ease; }
.dispo-btn:hover { border-color: var(--dispo, var(--brand)); background: var(--surface-2); transform: translateY(-1px); }
.dispo-btn:focus-visible { outline: 2px solid var(--dispo, var(--brand)); outline-offset: 2px; }
.dispo-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dispo, var(--brand)); flex: none; }
.dispo-key { margin-left: auto; font-size: 10.5px; color: var(--text-soft); border: 1px solid var(--line);
             border-radius: 5px; padding: 0 5px; line-height: 16px; }
.console-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
tr.is-active-call > td { background: color-mix(in srgb, var(--brand) 8%, transparent); }

@media (max-width: 900px) {
    .console-grid { grid-template-columns: minmax(0, 1fr); }
    .dispo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .btn-dial { flex: 1 1 100%; justify-content: center; }
}

/* ---------------------------------------------- presence: a pausable timer */
.punch-live.is-paused { opacity: .75; }
.punch-live.is-paused .punch-dot { background: var(--warn, #f99c00); animation: none; }
.punch-paused { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
                color: var(--warn, #f99c00); }
.punch-paused[hidden] { display: none; }

/* ------------------------------------------- daily activity report heatmap */
.activity-report th.num, .activity-report td.num { text-align: center; }
.activity-report .act-cell { font-variant-numeric: tabular-nums; font-size: 12px; padding: 6px 8px; }
.activity-report .act-link { color: inherit; text-decoration: none; font-weight: 600; }
.activity-report .act-link:hover { text-decoration: underline; }
.activity-report .act-sep { opacity: .45; margin: 0 1px; }
.activity-report tfoot th { background: var(--surface-2); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Touch feel — ripples, press states and the pull-to-refresh spinner.
   This is what separates "a website on a phone" from "an app".
   ========================================================================== */
.ripple-host { position: relative; }
.btn, .pill, .icon-btn, .chip-btn, .dispo-btn, .nav-item, .bottom-nav a,
.row-menu-item, .kpi-tile, .punch-btn, .fab, a.tab { overflow: hidden; }
.ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: currentColor;
    opacity: .18;
    transform: scale(0);
    animation: ripple-out .58s cubic-bezier(.22, .61, .36, 1) forwards;
}
@keyframes ripple-out { to { transform: scale(1); opacity: 0; } }

/* the press-in: small, fast, and only where a finger is the pointer */
@media (hover: none) and (pointer: coarse) {
    .btn:active, .pill:active, .icon-btn:active, .chip-btn:active, .dispo-btn:active,
    .punch-btn:active, .kpi-tile:active, .fab:active { transform: scale(.97); }
    .nav-item:active, .bottom-nav a:active, .row-menu-item:active,
    table.data tbody tr:active { background: color-mix(in srgb, var(--brand) 9%, transparent); }
    .btn, .pill, .icon-btn, .chip-btn, .dispo-btn, .punch-btn, .kpi-tile, .fab,
    .nav-item, .bottom-nav a { transition: transform .1s ease, background .12s ease; }
    /* momentum where a finger drags */
    .table-wrap, .kpi-strip, .chip-row, .kanban { -webkit-overflow-scrolling: touch; }
    .chip-row, .kpi-strip { scroll-snap-type: x proximity; }
    .chip-row > *, .kpi-strip > * { scroll-snap-align: start; }
    .sidebar, .drawer-sheet { overscroll-behavior-y: contain; }
}

/* pull to refresh */
.ptr {
    position: fixed; top: 0; left: 50%; z-index: 120;
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--line);
    box-shadow: var(--shadow);
    transform: translate(-50%, -48px); opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
}
.ptr-spinner {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--brand) 30%, transparent);
    border-top-color: var(--brand);
}
.ptr.is-armed .ptr-spinner { border-top-color: var(--accent, #00bb7f); }
.ptr.is-loading .ptr-spinner { animation: ptr-spin .7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ripple { display: none; }
    .ptr-spinner { animation: none; }
}

/* ------------------------------------------- Conversations: the team channel */
.chat-stream { display: grid; gap: 10px; }
.chat-msg { display: flex; }
.chat-msg.mine { justify-content: flex-end; }
.chat-bubble {
    max-width: 78%;
    border: 1px solid var(--line);
    border-radius: 14px 14px 14px 4px;
    padding: 10px 12px;
    background: var(--surface-2);
}
.chat-msg.mine .chat-bubble {
    border-radius: 14px 14px 4px 14px;
    background: color-mix(in srgb, var(--brand) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--brand) 26%, var(--line));
}
.chat-bubble .icon-btn.danger { color: var(--danger); width: 22px; height: 22px; }
@media (max-width: 1100px) {
    .chat-bubble { max-width: 92%; }
}

/* ------------------------------------------------ popovers in the page head
   "Hire an agent" and "Add teammate" open a card under the button. The card
   sat at z-index 30 inside the page head, and the first card of the page
   below it painted on top — the Add button was there but nothing could click
   it. Give the open popover its own stacking context, above the content. */
.page-head { position: relative; z-index: 5; }
.page-actions details { position: relative; }
.page-actions details[open] { z-index: 240; }
.popover-card { z-index: 240 !important; box-shadow: var(--shadow-lg); }
.page-actions details[open] > summary { position: relative; z-index: 241; }

/* ==========================================================================
   Phone: a list is a list.
   A table row on a 390px screen was a screenful of LABEL → value. On a phone
   each row is one line you can tap, and the ⋯ opens the whole record — with
   every button it carries — in a bottom sheet.
   ========================================================================== */
@media (max-width: 720px) {
    table.data.as-list-source,
    table.table.as-list-source { display: none; }
    .table-wrap:has(> table.as-list-source) { border: 0; background: transparent; overflow: visible; }
    table.table.as-cards td::before { content: attr(data-label); }

    .mlist { display: flex; flex-direction: column; background: var(--surface); }
    .mrow {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) minmax(0, auto) 34px;
        align-items: center; gap: 10px;
        min-height: 64px; padding: 10px 12px;
        border-bottom: 1px solid var(--line);
        position: relative; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mrow:last-child { border-bottom: 0; }
    .mrow:active { background: color-mix(in srgb, var(--brand) 8%, transparent); }
    .mrow-av {
        width: 38px; height: 38px; border-radius: 50%;
        display: grid; place-items: center;
        background: var(--brand-soft); color: var(--brand);
        font-size: 13px; font-weight: 700; letter-spacing: .02em;
    }
    .mrow-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .mrow-title { font-size: 15px; font-weight: 620; line-height: 1.25;
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mrow-sub { font-size: 12.5px; color: var(--text-mute); line-height: 1.3;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mrow-trail { font-size: 12px; font-weight: 600; white-space: nowrap;
                  max-width: 38vw; overflow: hidden; text-overflow: ellipsis; justify-self: end; }
    .mrow-trail.mrow-num { font-variant-numeric: tabular-nums; color: var(--text); }
    .mrow-more {
        width: 34px; height: 34px; border: 0; border-radius: 50%;
        background: transparent; color: var(--text-mute); display: grid; place-items: center;
    }
    .mrow-more svg { width: 18px; height: 18px; }
    .mrow-more:active { background: var(--surface-2); }

    /* the sheet */
    .msheet { position: fixed; inset: 0; z-index: 300; }
    .msheet-scrim { position: absolute; inset: 0; background: rgba(15, 23, 43, .45);
                    opacity: 0; transition: opacity .2s ease; }
    .msheet.open .msheet-scrim { opacity: 1; }
    .msheet-card {
        position: absolute; left: 0; right: 0; bottom: 0;
        max-height: 88vh; overflow: hidden;
        background: var(--surface); border-radius: 20px 20px 0 0;
        box-shadow: 0 -18px 40px rgba(15, 23, 43, .22);
        transform: translateY(100%); transition: transform .24s cubic-bezier(.22,.61,.36,1);
        padding-bottom: env(safe-area-inset-bottom);
        display: flex; flex-direction: column;
    }
    .msheet.open .msheet-card { transform: translateY(0); }
    .msheet-handle { width: 38px; height: 4px; border-radius: 999px; background: var(--line);
                     margin: 8px auto 2px; flex: none; }
    .msheet-head { display: flex; align-items: center; gap: 10px; padding: 6px 14px 10px;
                   border-bottom: 1px solid var(--line); flex: none; }
    .msheet-title { font-size: 15px; font-weight: 680; flex: 1; min-width: 0;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .msheet-body { padding: 10px 12px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .msheet-body table.data.as-cards tr { border: 0; padding: 0; margin: 0; }
    .msheet-body .cell-actions { justify-content: flex-start; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .msheet-body .btn, .msheet-body button, .msheet-body select { min-height: 40px; }
    .msheet-body td:first-child { font-size: 16px; }

    /* the floated primary action */
    .fab.fab-page { display: grid; }
    .page-actions .btn.is-floated { display: none; }
}

/* a parked row leaves nothing behind while it is in the sheet */
tr.mrow-parked { display: none; }

/* ---------------------------------------------- phone: app-bar page header */
@media (max-width: 720px) {
    /* the tab name is already in the app bar — no need to shout it twice */
    .page-head .page-title { font-size: 15px; font-weight: 700; margin: 0; }
    .page-head > div:first-child { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
    .page-head .page-sub { font-size: 12px; margin-top: 0; }

    /* actions become a scrollable row of chips, not a stack of buttons */
    .page-head .page-actions {
        width: 100%; margin-left: 0; flex-wrap: nowrap; overflow-x: auto;
        gap: 6px; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .page-head .page-actions::-webkit-scrollbar { display: none; }
    .page-head .page-actions > * { flex: 0 0 auto; }
    .page-head .page-actions .btn,
    .page-head .page-actions .pill,
    .page-head .page-actions .view-switch a {
        min-height: 36px; padding: 0 12px; font-size: 12.5px; border-radius: 999px;
    }
    .page-head .page-actions .view-switch { flex: 0 0 auto; }

    /* the search sits on its own line, full width, like a search field */
    .card > .card-body > form.toolbar,
    .card > form.toolbar { padding: 10px 12px; }
    .toolbar .search-box input { font-size: 15px; }

    /* room for the floating button over the last row */
    .mlist { padding-bottom: 6px; }
    .is-primary-list { margin-bottom: 76px; }
}

/* ------------------------------------------------ phone: dashboard reads KPI-first
   A list page puts the list first — that is what the rep came for. The
   dashboard is the exception: its job is the glance, so the numbers lead. */
@media (max-width: 720px) {
    body[data-tab="overview"] .content > .page-head { order: -2; }
    body[data-tab="overview"] .content > .kpi-strip,
    body[data-tab="overview"] .content > .kpi-grid { order: -1; }
    body[data-tab="overview"] .content > section { order: 2; }

    /* KPIs are a swipeable strip on a phone, not a wall of cards */
    .kpi-strip {
        display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
        padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: none;
    }
    .kpi-strip::-webkit-scrollbar { display: none; }
    .kpi-strip > .kpi-tile { flex: 0 0 62%; scroll-snap-align: start; }
    .kpi-tile .kpi-label { font-size: 9.5px; }
    .kpi-tile .kpi-value { font-size: 19px; }
}

/* ------------------------------------------- phone: one conversation at a time
   A messaging app shows the list or the thread, never both stacked. */
.chat-back { display: none; }
@media (max-width: 720px) {
    .timeline-cols.has-thread .chat-people,
    .timeline-cols.has-thread .chat-rail { display: none; }
    .timeline-cols.has-thread .chat-back { display: inline-grid; margin-right: 2px; }
    .timeline-cols.has-thread .chat-thread .chat-stream { max-height: none !important; }
    .timeline-cols:not(.has-thread) .chat-thread,
    .timeline-cols:not(.has-thread) .chat-rail { display: none; }
    /* the thread takes the whole screen — its own header names the person */
    body.chat-open .page-head,
    body.chat-open .kpi-strip { display: none; }
    body.chat-open .content { padding-top: 6px; }
    .timeline-cols.has-thread .chat-thread { margin: 0; }
    /* the composer sits at the bottom of the screen, like a keyboard bar */
    .timeline-cols.has-thread .chat-thread > form {
        position: sticky; bottom: calc(66px + env(safe-area-inset-bottom));
        background: var(--surface); z-index: 3;
    }
}

@media (max-width: 720px) {
    .fab-page.is-away { opacity: 0; transform: scale(.6); pointer-events: none; }
}