/*
 * SalesOS admin screens. Quiet and dense: neutral greys, one charcoal accent,
 * colour only where it carries meaning (risk, warning, done), hairline rules
 * instead of cards and shadows. Everything is prefixed .so- so Perfex's own
 * styles and scripts (e.g. .progress-bar rewriting) never reach it.
 */
@font-face { font-family: 'Hind Siliguri'; font-weight: 400; font-display: swap; src: url('fonts/hind-siliguri-400-bengali.woff2') format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+200C-200D, U+25CC; }
@font-face { font-family: 'Hind Siliguri'; font-weight: 600; font-display: swap; src: url('fonts/hind-siliguri-600-bengali.woff2') format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+200C-200D, U+25CC; }

.so {
    --so-ink: #1f2629;
    --so-ink-2: #4b575c;
    --so-muted: #6b777c;
    --so-line: #e3e7e9;
    --so-line-2: #cfd5d8;
    --so-bg: #f6f7f8;
    --so-surface: #ffffff;
    --so-accent: #222a2d;
    --so-risk: #b42318;
    --so-risk-bg: #fef3f2;
    --so-warn: #b54708;
    --so-warn-bg: #fffaeb;
    --so-ok: #067647;
    --so-radius: 6px;
    font-family: Inter, 'Hind Siliguri', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: var(--so-ink);
}
.so, .so * { box-sizing: border-box; }
.so :where(h1, h2, h3, p) { margin: 0; }
.so .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.so .muted { color: var(--so-muted); }
.so .small { font-size: 12px; }
.so a { color: inherit; }
.so :focus-visible { outline: 2px solid var(--so-accent); outline-offset: 2px; }

/* Page header */
.so-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 16px; }
.so-head h1 { font-size: 20px; font-weight: 600; }
.so-head p { color: var(--so-muted); margin-top: 2px; }
.so-head .so-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Figures: one row, divided by hairlines */
.so-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); background: var(--so-surface); border: 1px solid var(--so-line); border-radius: var(--so-radius); margin-bottom: 16px; }
.so-kpi { padding: 12px 16px; border-left: 1px solid var(--so-line); }
.so-kpi:first-child { border-left: 0; }
.so-kpi dt { font-size: 12px; color: var(--so-muted); font-weight: 400; }
.so-kpi dd { margin: 2px 0 0; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.so-kpi dd small { font-size: 12px; font-weight: 400; color: var(--so-muted); margin-left: 4px; }

/* Buttons: primary (one per view), secondary, ghost, danger */
.so-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--so-radius); border: 1px solid var(--so-line-2); background: var(--so-surface); color: var(--so-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.so-btn:hover { background: var(--so-bg); color: var(--so-ink); text-decoration: none; }
.so-btn.primary { background: var(--so-accent); border-color: var(--so-accent); color: #fff; }
.so-btn.primary:hover { background: #000; }
.so-btn.ghost { border-color: transparent; background: transparent; }
.so-btn.ghost:hover { background: var(--so-bg); }
.so-btn.danger { color: var(--so-risk); }
.so-btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.so-btn.lg { height: 40px; padding: 0 18px; font-size: 14px; }
.so-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Tabs with counts */
.so-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--so-line); margin-bottom: 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.so-tabs a { padding: 8px 12px; color: var(--so-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 600; font-size: 13px; }
.so-tabs a:hover { color: var(--so-ink); }
.so-tabs a.on { color: var(--so-ink); border-bottom-color: var(--so-accent); }
.so-tabs a .n { font-weight: 400; margin-left: 4px; color: var(--so-muted); font-variant-numeric: tabular-nums; }

/* Toolbar */
.so-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.so-input, .so-select, .so-textarea { height: 32px; padding: 0 10px; border: 1px solid var(--so-line-2); border-radius: var(--so-radius); background: var(--so-surface); font: inherit; font-size: 13px; color: var(--so-ink); }
.so-textarea { height: auto; padding: 8px 10px; resize: vertical; width: 100%; }
.so-input.grow { flex: 1 1 260px; min-width: 0; }

/* Table */
.so-table-wrap { background: var(--so-surface); border: 1px solid var(--so-line); border-radius: var(--so-radius); overflow-x: auto; }
.so-table { width: 100%; border-collapse: collapse; }
.so-table th { position: sticky; top: 0; background: var(--so-surface); text-align: left; font-size: 12px; font-weight: 600; color: var(--so-muted); padding: 10px 12px; border-bottom: 1px solid var(--so-line); white-space: nowrap; }
.so-table td { padding: 10px 12px; border-bottom: 1px solid var(--so-line); vertical-align: top; }
.so-table tr:last-child td { border-bottom: 0; }
.so-table tbody tr { cursor: pointer; }
.so-table tbody tr:hover, .so-table tbody tr.sel { background: var(--so-bg); }
.so-table tbody tr.sel { box-shadow: inset 2px 0 0 var(--so-accent); }
.so-table .r { text-align: right; }
.so-table .strong { font-weight: 600; }

/* Status: a dot and words, not a coloured block */
.so-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.so-st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--so-line-2); }
.so-st.risk { color: var(--so-risk); } .so-st.risk::before { background: var(--so-risk); }
.so-st.warn { color: var(--so-warn); } .so-st.warn::before { background: var(--so-warn); }
.so-st.ok { color: var(--so-ok); } .so-st.ok::before { background: var(--so-ok); }
.so-st.new::before { background: var(--so-muted); }
.so-flags { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }

/* Messages */
.so-note { padding: 8px 12px; border-radius: var(--so-radius); background: var(--so-bg); font-size: 13px; }
.so-note.warn { background: var(--so-warn-bg); color: #7a2e0e; }
.so-note.risk { background: var(--so-risk-bg); color: #7a271a; }
.so-empty { padding: 48px 16px; text-align: center; color: var(--so-muted); }
.so-empty strong { display: block; color: var(--so-ink); font-size: 15px; margin-bottom: 4px; }

/* Pager */
.so-pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 0; color: var(--so-muted); font-size: 13px; }
.so-pager .so-btn + .so-btn { margin-left: 6px; }

/* Side drawer */
.so-drawer-backdrop { position: fixed; inset: 0; background: rgba(15, 20, 22, .28); z-index: 1040; display: none; }
.so-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--so-surface); z-index: 1041; border-left: 1px solid var(--so-line); display: none; flex-direction: column; }
.so-drawer.open, .so-drawer.open + .so-drawer-backdrop, .so-drawer-backdrop.open { display: flex; }
.so-drawer-backdrop.open { display: block; }
.so-drawer > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--so-line); }
.so-drawer > header h2 { font-size: 16px; font-weight: 600; }
.so-drawer .body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.so-drawer > footer { padding: 12px 20px; border-top: 1px solid var(--so-line); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.so-drawer > footer .grow { flex: 1; }
.so-sec { padding: 14px 0; border-bottom: 1px solid var(--so-line); }
.so-sec:first-child { padding-top: 0; }
.so-sec:last-child { border-bottom: 0; }
.so-sec h3 { font-size: 12px; font-weight: 600; color: var(--so-muted); margin-bottom: 8px; }
.so-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.so-dl dt { color: var(--so-muted); font-weight: 400; }
.so-dl dd { margin: 0; }
.so-money td { padding: 3px 0; }
.so-money td.num { text-align: right; }
.so-money tr.total td { border-top: 1px solid var(--so-line-2); padding-top: 6px; font-weight: 600; }
.so-money tr.due td { font-size: 16px; font-weight: 600; }
.so-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.so-field label { display: block; font-size: 12px; color: var(--so-muted); margin-bottom: 4px; }
.so-field .so-input, .so-field .so-select { width: 100%; }
.so-timeline { list-style: none; margin: 0; padding: 0; }
.so-timeline li { display: grid; grid-template-columns: 92px 1fr; gap: 8px; padding: 4px 0; font-size: 13px; }
.so-timeline time { color: var(--so-muted); font-size: 12px; }
.so-kbd { display: inline-block; min-width: 18px; padding: 0 4px; border: 1px solid var(--so-line-2); border-bottom-width: 2px; border-radius: 4px; font-size: 11px; text-align: center; color: var(--so-muted); }

/* Toast */
.so-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--so-accent); color: #fff; padding: 10px 14px; border-radius: var(--so-radius); display: none; align-items: center; gap: 12px; z-index: 1050; font-size: 13px; }
.so-toast.show { display: flex; }
.so-toast button { background: none; border: 0; color: #fff; font-weight: 600; text-decoration: underline; cursor: pointer; font: inherit; }

/* Phones: the table becomes a list of rows */
@media (max-width: 767px) {
    .so-table thead { display: none; }
    .so-table, .so-table tbody, .so-table tr, .so-table td { display: block; width: 100%; }
    .so-table tr { padding: 10px 12px; border-bottom: 1px solid var(--so-line); }
    .so-table td { padding: 2px 0; border: 0; }
    .so-table td.hide-sm { display: none; }
    .so-table .r { text-align: left; }
    .so-kpi { border-left: 0; border-top: 1px solid var(--so-line); }
    .so-kpi:first-child { border-top: 0; }
    .so-grid2 { grid-template-columns: 1fr; }
}

/* Centred dialog (courier booking) */
.so-dialog-backdrop { position: fixed; inset: 0; background: rgba(15, 20, 22, .35); z-index: 1060; display: none; align-items: center; justify-content: center; padding: 16px; }
.so-dialog-backdrop.open { display: flex; }
.so-dialog { background: var(--so-surface); border-radius: var(--so-radius); width: min(520px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; border: 1px solid var(--so-line-2); }
.so-dialog > header { padding: 16px 20px; border-bottom: 1px solid var(--so-line); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.so-dialog > header h2 { font-size: 16px; font-weight: 600; }
.so-dialog .body { padding: 16px 20px; overflow-y: auto; }
.so-dialog > footer { padding: 12px 20px; border-top: 1px solid var(--so-line); display: flex; justify-content: flex-end; gap: 8px; }
.so-choice { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--so-line-2); border-radius: var(--so-radius); margin-bottom: 8px; cursor: pointer; }
.so-choice:has(input:checked) { border-color: var(--so-accent); box-shadow: inset 0 0 0 1px var(--so-accent); }
.so-choice input { margin: 0; }
.so-choice .muted { margin-left: auto; }

/* Selection bar */
.so-bulk { position: sticky; top: 0; z-index: 5; display: none; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 8px; background: var(--so-accent); color: #fff; border-radius: var(--so-radius); }
.so-bulk.show { display: flex; }
.so-bulk .so-btn { background: transparent; border-color: #596468; color: #fff; }
.so-bulk .so-btn:hover { background: #333c40; }
.so-bulk .so-btn.danger { color: #ffb4ab; }
.so-bulk .grow { flex: 1; }
.so-table td.chk, .so-table th.chk { width: 36px; padding-right: 0; }

/* ── Home dashboard: calm, but with some life — soft cards, one urgency colour per task, sparklines ── */
.so-home { --so-radius-lg: 10px; --so-shadow: 0 1px 2px rgba(16, 24, 28, .05); --so-web: #222a2d; --so-pos: #3f7d6e; --so-phone: #c8963e; --so-hot: #f22520; }
.so-hello { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 18px; }
.so-hello h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.so-hello p { color: var(--so-muted); margin-top: 2px; }
.so-find { position: relative; flex: 1 1 320px; max-width: 460px; }
.so-find input { width: 100%; height: 40px; padding: 0 14px 0 38px; border: 1px solid var(--so-line-2); border-radius: 999px; background: var(--so-surface); font: inherit; font-size: 14px; color: var(--so-ink); box-shadow: var(--so-shadow); }
.so-find input:focus { outline: 2px solid var(--so-accent); outline-offset: 1px; border-color: transparent; }
.so-find svg { position: absolute; left: 13px; top: 12px; width: 16px; height: 16px; stroke: var(--so-muted); fill: none; stroke-width: 2; }
.so-card { background: var(--so-surface); border: 1px solid var(--so-line); border-radius: var(--so-radius-lg); box-shadow: var(--so-shadow); }
.so-card > h2, .so-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; padding: 14px 18px 0; }
.so-card-h a { font-size: 12px; font-weight: 400; color: var(--so-muted); }
.so-card .pad { padding: 14px 18px 18px; }

/* Things to do now */
.so-todo { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 14px; }
.so-act { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 14px 20px; background: var(--so-surface); border: 1px solid var(--so-line); border-radius: var(--so-radius-lg); box-shadow: var(--so-shadow); text-decoration: none; color: var(--so-ink); overflow: hidden; transition: border-color .12s, transform .12s; }
.so-act::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--so-line-2); }
.so-act.warn::before { background: #e0a030; } .so-act.risk::before { background: var(--so-risk); } .so-act.go::before { background: var(--so-accent); }
.so-act:hover { border-color: var(--so-line-2); transform: translateY(-1px); text-decoration: none; color: var(--so-ink); }
.so-act .t { font-size: 13px; color: var(--so-ink-2); }
.so-act .n { font-size: 30px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.so-act .s { font-size: 12px; color: var(--so-muted); min-height: 18px; }
.so-act .go { position: absolute; right: 14px; top: 14px; font-size: 12px; font-weight: 600; color: var(--so-ink); }
.so-act.zero { background: transparent; box-shadow: none; }
.so-act.zero .n { color: var(--so-line-2); } .so-act.zero .t { color: var(--so-muted); }

/* Figures with a 7-day sparkline */
.so-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 14px; }
.so-fig { padding: 16px 18px; border-left: 1px solid var(--so-line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.so-fig:first-child { border-left: 0; }
.so-fig .t { font-size: 12px; color: var(--so-muted); }
.so-fig .n { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.so-fig .s { font-size: 12px; color: var(--so-muted); }
.so-fig svg { display: block; width: 100%; height: 28px; margin-top: 8px; }
.so-fig svg path.l { fill: none; stroke: var(--so-accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.so-fig svg path.a { fill: var(--so-accent); opacity: .07; }

/* Two-column rows */
.so-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; align-items: start; }
.so-cols.even { grid-template-columns: 1fr 1fr; }

/* Where orders stand: one segmented bar + legend */
.so-seg { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--so-bg); gap: 2px; }
.so-seg i { display: block; height: 100%; min-width: 4px; }
.so-legend { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; margin-top: 14px; font-size: 13px; }
.so-legend span.k { display: inline-flex; align-items: center; gap: 8px; color: var(--so-ink-2); }
.so-legend span.k::before { content: ''; width: 8px; height: 8px; border-radius: 3px; background: var(--c, var(--so-line-2)); }
.so-legend b { font-weight: 600; text-align: right; }
.so-legend small { color: var(--so-muted); font-weight: 400; margin-left: 6px; }

/* Soft status pill and channel tag */
.so-pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--so-bg); color: var(--so-ink-2); white-space: nowrap; }
.so-pill.warn { background: var(--so-warn-bg); color: var(--so-warn); } .so-pill.ok { background: #ecfdf3; color: var(--so-ok); } .so-pill.risk { background: var(--so-risk-bg); color: var(--so-risk); }
.so-tag { font-size: 12px; color: var(--so-muted); }
.so-tag::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--c, var(--so-line-2)); }
.so-list { list-style: none; margin: 0; padding: 6px 0 8px; }
.so-list li { display: flex; align-items: center; gap: 10px; padding: 9px 18px; border-top: 1px solid var(--so-line); cursor: pointer; }
.so-list li:first-child { border-top: 0; }
.so-list li:hover { background: var(--so-bg); }
.so-list .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-bar { width: 64px; height: 5px; border-radius: 999px; background: var(--so-bg); overflow: hidden; }
.so-bar i { display: block; height: 100%; background: var(--so-risk); }
.so-home .so-table-wrap { border-radius: var(--so-radius-lg); box-shadow: var(--so-shadow); }
.so-home .so-table th { background: #fbfbfc; }
.so-links { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; color: var(--so-muted); font-size: 12px; margin-top: 4px; }

@media (max-width: 991px) { .so-cols, .so-cols.even { grid-template-columns: 1fr; } .so-fig { border-left: 0; border-top: 1px solid var(--so-line); } .so-fig:first-child { border-top: 0; } }

/* Line icons: one stroke weight, tinted by the task's urgency */
.so-home .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.so-act .ic { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--so-bg); color: var(--so-ink-2); }
.so-act.warn .ic { background: #fdf3df; color: #a86a0a; } .so-act.risk .ic { background: var(--so-risk-bg); color: var(--so-risk); } .so-act.go .ic { background: #e9eef0; color: var(--so-accent); }
.so-act.zero .ic { background: var(--so-bg); color: #b4bdc1; }
.so-act .go { right: auto; left: 20px; top: auto; bottom: 12px; position: static; margin-top: 6px; }
.so-fig .t { display: flex; align-items: center; gap: 8px; }
.so-fig .t .ico { width: 16px; height: 16px; color: var(--so-muted); }

/* Larger icons */
.so-home .ico { width: 24px; height: 24px; stroke-width: 1.6; }
.so-act .ic { width: 46px; height: 46px; border-radius: 12px; right: 14px; top: 14px; }
.so-act { padding-right: 76px; min-height: 104px; }
.so-fig .t { gap: 10px; font-size: 13px; }
.so-fig .t .ico { width: 22px; height: 22px; color: var(--so-ink-2); }

/* ── Spacing pass: every card stands alone with room around it ── */
.so-home { max-width: 1400px; margin: 0 auto; padding: 8px 4px 40px; }
.so-hello { margin: 0 0 28px; gap: 20px; }
.so-todo { gap: 20px; margin-bottom: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.so-act { padding: 22px 22px 20px; gap: 0; min-height: 0; align-items: flex-start; border-radius: 14px; background: var(--so-surface); box-shadow: 0 1px 3px rgba(16, 24, 28, .06); }
.so-act::before { display: none; }
.so-act:hover { box-shadow: 0 6px 18px rgba(16, 24, 28, .08); transform: translateY(-2px); }
.so-act .ic { position: static; width: 52px; height: 52px; border-radius: 50%; margin-bottom: 18px; }
.so-home .so-act .ico { width: 26px; height: 26px; }
.so-act .n { font-size: 34px; line-height: 1.1; }
.so-act .t { font-size: 14px; font-weight: 600; color: var(--so-ink); margin-top: 4px; }
.so-act .s { margin-top: 4px; min-height: 0; }
.so-act .go { margin-top: 14px; padding: 5px 12px; border-radius: 999px; background: var(--so-accent); color: #fff; font-size: 12px; }
.so-act.zero { background: var(--so-surface); box-shadow: 0 1px 3px rgba(16, 24, 28, .04); }
.so-act.zero .n { color: var(--so-ink-2); } .so-act.zero .t { color: var(--so-ink); } .so-act.zero .ic { background: #edf5f1; color: var(--so-pos); }
.so-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 20px; }
.so-fig.so-card { border: 1px solid var(--so-line); border-left: 1px solid var(--so-line); padding: 20px 22px; border-radius: 14px; box-shadow: 0 1px 3px rgba(16, 24, 28, .06); }
.so-fig .n { font-size: 28px; margin-top: 6px; }
.so-home .so-fig .t .ico { width: 24px; height: 24px; }
.so-cols, .so-cols.even { gap: 20px; margin-bottom: 20px; }
.so-card { border-radius: 14px; box-shadow: 0 1px 3px rgba(16, 24, 28, .06); }
.so-card > h2, .so-card-h { padding: 18px 22px 0; }
.so-card .pad { padding: 16px 22px 22px; }
.so-list li { padding: 11px 22px; }
.so-home .so-table-wrap { border-radius: 14px; box-shadow: 0 1px 3px rgba(16, 24, 28, .06); }
.so-home .so-table th, .so-home .so-table td { padding: 12px 18px; }

/* ── Icon on the side, text beside it ── */
.so-home { max-width: none; padding: 4px 0 40px; }
.so-act, .so-fig.so-card { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: center; align-content: center; }
.so-act { padding: 20px 22px; }
.so-act .ic, .so-fig .ic { grid-column: 1; grid-row: 1 / span 4; width: 56px; height: 56px; border-radius: 16px; margin: 0; display: grid; place-items: center; align-self: center; }
.so-act > :not(.ic), .so-fig > :not(.ic) { grid-column: 2; min-width: 0; }
.so-act .t { margin: 0; order: 0; font-size: 13px; font-weight: 400; color: var(--so-ink-2); }
.so-act .n { font-size: 32px; margin: 2px 0; }
.so-act .go { justify-self: start; margin-top: 8px; }
.so-home .so-act .ico { width: 28px; height: 28px; }
.so-fig .ic { background: var(--so-bg); color: var(--so-ink-2); }
.so-home .so-fig .ico { width: 26px; height: 26px; }
.so-fig .t { display: block; }
.so-fig .n { margin-top: 2px; }
@media (max-width: 480px) { .so-act, .so-fig.so-card { grid-template-columns: 48px 1fr; } .so-act .ic, .so-fig .ic { width: 48px; height: 48px; } }

/* ── KPI dashboard ── */
.so-period { display: flex; align-items: center; gap: 6px; margin: 4px 0 14px; }
.so-period a { padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--so-ink-2); text-decoration: none; border: 1px solid transparent; }
.so-period a:hover { background: var(--so-surface); }
.so-period a.on { background: var(--so-surface); border-color: var(--so-line-2); color: var(--so-ink); }
.so-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px; }
.so-hero { background: #222a2d; color: #fff; border-radius: 14px; padding: 26px 28px; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(16, 24, 28, .12); }
.so-hero .lab { font-size: 13px; color: #aab5b9; }
.so-hero .big { font-size: 44px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin: 6px 0 4px; }
.so-hero .sub { font-size: 13px; color: #cfd6d9; }
.so-hero .dl, .so-hero em { font-style: normal; font-weight: 600; font-size: 12px; margin: 0 4px; }
.so-hero .up { color: #7fd1a8; } .so-hero .down { color: #ff9f98; }
.so-hero .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #3a454a; }
.so-hero .trio span { display: block; font-size: 12px; color: #aab5b9; }
.so-hero .trio b { font-size: 18px; font-weight: 600; }
.so-hero .hnote { margin-top: auto; padding-top: 18px; font-size: 12px; line-height: 1.5; color: #93a0a5; }
.so-hero .hnote strong { color: #ffd9a0; font-weight: 600; }
.so-figs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.so-cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; align-items: start; }
.so-advice { margin-bottom: 20px; }
.so-advice .ad { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--so-bg); color: var(--so-ink-2); flex: none; }
.so-advice .ad.risk { background: var(--so-risk-bg); color: var(--so-risk); } .so-advice .ad.warn { background: #fdf3df; color: #a86a0a; }
.so-advice .ad .ico { width: 20px; height: 20px; }
.so-list .wrap { white-space: normal; }
.so-list li .num { white-space: nowrap; }
.so-funnel .row { position: relative; display: flex; justify-content: space-between; align-items: baseline; padding: 0 0 12px; margin-bottom: 14px; font-size: 13px; }
.so-funnel .row i { position: absolute; left: 0; bottom: 0; height: 6px; border-radius: 999px; }
.so-funnel .row::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; border-radius: 999px; background: var(--so-bg); z-index: 0; }
.so-funnel .row i { z-index: 1; }
.so-funnel small { color: var(--so-muted); font-weight: 400; margin-left: 4px; }
.so-funnel .out { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.bignum { font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.so-sub { padding: 12px 22px 0; border-top: 1px solid var(--so-line); font-size: 12px; font-weight: 600; color: var(--so-muted); }
.so-sub + .so-list { padding-top: 2px; }
.so-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.so-warnline { margin: 0; padding: 10px 22px 14px; font-size: 12px; color: var(--so-warn); border-top: 1px solid var(--so-line); }
.so-heat { display: grid; grid-template-columns: 36px repeat(8, 1fr); gap: 4px; align-items: center; }
.so-heat i { display: block; aspect-ratio: 1.5; border-radius: 4px; min-height: 18px; }
.so-heat .hl { font-size: 10px; color: var(--so-muted); text-align: center; }
.so-heat .hd { font-size: 12px; color: var(--so-muted); }
@media (max-width: 1199px) { .so-cols3 { grid-template-columns: 1fr; } .so-top { grid-template-columns: 1fr; } }

/* ── Phase 1 polish: equal-height rows, thick funnel, day-part bars, two-column advice ── */
.so-cols, .so-cols3, .so-cols.even { align-items: stretch; }
.so-advice .so-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; }
.so-advice .so-list li { border-top: 1px solid var(--so-line); }
.so-advice .so-list li:nth-child(-n+2) { border-top: 0; }
.so-advice .so-list li:nth-child(odd) { border-right: 1px solid var(--so-line); }
@media (max-width: 991px) { .so-advice .so-list { grid-template-columns: 1fr; } .so-advice .so-list li:nth-child(2) { border-top: 1px solid var(--so-line); } .so-advice .so-list li:nth-child(odd) { border-right: 0; } }
.so-funnel .fbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 36px; padding: 0 14px; margin: 0 auto 8px; border-radius: 8px; color: #fff; font-size: 13px; min-width: 200px; }
.so-funnel .fbar b { font-weight: 600; }
.so-funnel .out { justify-content: center; margin-top: 12px; }
.so-hero .hspark svg { display: block; width: 100%; height: 38px; margin-top: 14px; }
.so-hero .hspark svg path.l { stroke: #7fd1a8; stroke-width: 2; } .so-hero .hspark svg path.a { fill: #7fd1a8; opacity: .12; }
.stage { display: grid; grid-template-columns: 90px 1fr 32px; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.stage i { display: block; height: 10px; border-radius: 999px; background: #3b484d; }
.stage b { text-align: right; }
.part { display: grid; grid-template-columns: 130px 1fr 42px; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 13px; }
.part i { display: block; height: 22px; border-radius: 6px; background: #c9d0d3; }
.part.top i { background: #222a2d; } .part.top span { font-weight: 600; }
.part b { text-align: right; }
.so-more { margin-top: 14px; }
.so-more summary { cursor: pointer; font-size: 12px; color: var(--so-muted); }
.so-more .so-heat { margin-top: 12px; }
.so-card { display: flex; flex-direction: column; }
.so-hero .hspark svg path.l { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.so-card .grow1 { flex: 1; display: flex; }
.so-card .grow1 > div { flex: 1; }
.so-hint { margin: auto 0 0; padding: 12px 22px 16px; font-size: 12px; color: var(--so-muted); border-top: 1px solid var(--so-line); }
.so-tip { margin: 16px 0 0; padding: 12px 14px; background: var(--so-bg); border-radius: 10px; font-size: 13px; line-height: 1.5; }
.so-loading { opacity: .45; pointer-events: none; transition: opacity .12s; }
.so-period { flex-wrap: wrap; }

/* ── Lead work ── */
.so-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.so-table .so-st { margin-right: 8px; }
.so-table .so-st::before { width: 9px; height: 9px; }
.stage.wide { grid-template-columns: 110px 1fr 90px; }
.stage .track { display: block; background: var(--so-bg); height: 12px; border-radius: 999px; background-clip: padding-box; position: relative; }
.stage .track b { display: block; height: 100%; background: #3b484d; border-radius: 999px; position: relative; overflow: hidden; }
.stage .track u { position: absolute; right: 0; top: 0; bottom: 0; background: #d9695f; text-decoration: none; }
.stage em { font-style: normal; text-align: right; font-weight: 600; }
.stage em small { font-weight: 400; color: var(--so-muted); }
.so-table tr[data-staff] { cursor: pointer; }
.so-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 10px; }
.so-three b { display: block; font-size: 24px; font-weight: 600; }
.so-three b.bad { color: var(--so-risk); }
.so-three span { font-size: 12px; color: var(--so-muted); }
.so-worst { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--so-line); text-decoration: none; color: inherit; font-size: 13px; flex-wrap: wrap; }
.so-worst:hover { background: var(--so-bg); }

/* Narrow screens: a single column must be allowed to shrink below its content, or the whole page scrolls sideways */
.so-cols > *, .so-cols3 > *, .so-top > *, .so-figs2 > *, .so-todo > * { min-width: 0; }
@media (max-width: 1199px) { .so-cols3, .so-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 991px) { .so-cols, .so-cols.even { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
    .so-figs2 { grid-template-columns: minmax(0, 1fr); }
    .so-hero { padding: 20px; } .so-hero .big { font-size: 34px; }
    .so-hero .trio { grid-template-columns: 1fr 1fr; }
    .part { grid-template-columns: 96px 1fr 38px; }
    .so-funnel .fbar { min-width: 0; }
    .so-card .so-table-wrap { overflow-x: auto; }
}

/* ── Incoming-call popup: a small portrait window, one column ── */
.cp-body { margin: 0; background: var(--so-bg); min-height: 100vh; }
.cp { max-width: 460px; margin: 0 auto; padding: 14px 14px 22px; display: flex; flex-direction: column; gap: 12px; }
.cp-top { display: flex; align-items: center; gap: 12px; background: #222a2d; color: #fff; border-radius: 14px; padding: 12px 14px; }
.cp-top .muted { color: #aab5b9; }
.cp-top .so-btn { color: #fff; }
.cp-ring { width: 40px; height: 40px; border-radius: 50%; background: #3f7d6e; display: grid; place-items: center; animation: cp-ring 1.1s ease-in-out infinite; flex: none; }
.cp-ring .ico { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes cp-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .cp-ring { animation: none; } }
.cp-num { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cp-num b { font-size: 20px; letter-spacing: .01em; }
.cp-timer { font-size: 13px; color: #aab5b9; }
.cp-card { background: var(--so-surface); border: 1px solid var(--so-line); border-radius: 14px; box-shadow: 0 1px 3px rgba(16, 24, 28, .06); }
.cp-id { display: flex; gap: 14px; padding: 16px; align-items: center; }
.cp-avatar { width: 52px; height: 52px; border-radius: 16px; background: #edf1f2; display: grid; place-items: center; font-size: 22px; font-weight: 600; color: var(--so-ink-2); flex: none; }
.cp-who { min-width: 0; }
.cp-who h1 { font-size: 18px; font-weight: 600; line-height: 1.25; margin: 0; }
.cp-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cp-alert { margin: 0; padding: 11px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 4px; }
.cp-alert.risk { background: var(--so-risk-bg); color: #7a271a; }
.cp-alert.warn { background: var(--so-warn-bg); color: #7a2e0e; }
.cp-alert a { color: inherit; font-weight: 600; text-decoration: none; }
.cp-alert a:hover { text-decoration: underline; }
.cp-dl { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; padding: 14px 16px; margin: 0; font-size: 13px; }
.cp-dl dt { color: var(--so-muted); font-weight: 400; } .cp-dl dd { margin: 0; } .cp-dl dd.late { color: var(--so-risk); font-weight: 600; }
.cp-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--so-surface); border: 1px solid var(--so-line); border-radius: 14px; box-shadow: 0 1px 3px rgba(16, 24, 28, .06); }
.cp-stats div { padding: 12px 8px; text-align: center; border-left: 1px solid var(--so-line); min-width: 0; }
.cp-stats div:first-child { border-left: 0; }
.cp-stats b { display: block; font-size: 16px; font-weight: 600; } .cp-stats b.bad { color: var(--so-risk); }
.cp-stats span { font-size: 11px; color: var(--so-muted); }
.cp-h { padding: 14px 16px 8px; font-size: 13px; font-weight: 600; }
.cp-tl { list-style: none; margin: 0; padding: 0 16px 8px; max-height: 240px; overflow-y: auto; }
.cp-tl li { display: grid; grid-template-columns: 88px 1fr; gap: 8px; padding: 8px 0; border-top: 1px solid var(--so-line); font-size: 13px; }
.cp-tl li:first-child { border-top: 0; }
.cp-tl time { color: var(--so-muted); font-size: 12px; }
.cp-note { padding: 14px 16px; }
.cp-note label { display: block; font-size: 12px; font-weight: 600; color: var(--so-muted); margin-bottom: 6px; }
.cp-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-actions .so-btn { flex: 1 1 auto; justify-content: center; }

.cp-fu { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.cp-fu .so-btn { flex: 1 1 auto; justify-content: center; }
.cp-fu-card .cp-row .so-input { flex: 1; width: auto; }

/* ── Drawer: product picker, script, notes ── */
.so-pick { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; background: var(--so-surface); border: 1px solid var(--so-line-2); border-radius: var(--so-radius); box-shadow: 0 8px 24px rgba(16,24,28,.12); max-height: 260px; overflow-y: auto; }
.so-pick button { display: flex; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 9px 12px; background: none; border: 0; border-bottom: 1px solid var(--so-line); cursor: pointer; font: inherit; font-size: 13px; }
.so-pick button:hover { background: var(--so-bg); }
.so-script p { color: var(--so-ink-2); }
.so-note.warn a { font-weight: 600; }

.so-sortby { margin-left: auto; display: inline-flex; gap: 10px; align-items: center; }
.so-sortby a { color: var(--so-muted); text-decoration: none; } .so-sortby a.on { color: var(--so-ink); font-weight: 600; text-decoration: underline; }
.so-dialog-backdrop.open { display: flex; }

/* ── Settings screens ─────────────────────────────────────────────────────────────────────────── */
.so-set-top { align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.so-set-search { position: relative; width: min(380px, 100%); }
.so-set-results { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--so-surface); border: 1px solid var(--so-line-2); border-radius: var(--so-radius); box-shadow: 0 6px 18px rgba(0,0,0,.08); max-height: 340px; overflow: auto; }
.so-set-results a { display: block; padding: 8px 10px; border-radius: 4px; color: var(--so-ink); text-decoration: none; }
.so-set-results a:hover, .so-set-results a:focus { background: var(--so-bg); }
.so-set-results small { color: var(--so-muted); }
.so-set-results .is-empty { padding: 8px 10px; color: var(--so-muted); }
.so-set-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; margin-top: 16px; align-items: start; }
.so-set-nav { position: sticky; top: 70px; }
.so-set-nav ul { list-style: none; margin: 0 0 14px; padding: 0; }
.so-set-nav-group { margin: 0 0 4px; padding: 0 10px; font-size: 12px; color: var(--so-muted); }
.so-set-nav a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--so-radius); color: var(--so-ink-2); text-decoration: none; }
.so-set-nav a i { width: 16px; text-align: center; color: var(--so-muted); }
.so-set-nav a:hover { background: var(--so-bg); color: var(--so-ink); }
.so-set-nav a.is-active { background: var(--so-accent); color: #fff; }
.so-set-nav a.is-active i { color: #fff; }
.so-set-pagehead h2 { margin: 0; font-size: 20px; font-weight: 600; }
.so-set-pagehead p { margin: 2px 0 14px; color: var(--so-muted); }
.so-set-card { background: var(--so-surface); border: 1px solid var(--so-line); border-radius: var(--so-radius); margin-bottom: 16px; }
.so-set-card.is-flash { outline: 2px solid var(--so-accent); }
.so-set-card-head { padding: 14px 18px 0; }
.so-set-card-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.so-set-card-body { padding: 12px 18px 16px; }
.so-set-lead { margin: 4px 0 0; color: var(--so-ink-2); }
.so-set-field { margin: 0 0 16px; max-width: 760px; }
.so-set-label { display: block; margin: 0 0 4px; font-weight: 600; color: var(--so-ink); }
.so-set-tip { margin-left: 4px; color: var(--so-muted); cursor: help; font-weight: 900; font-size: 13px; }
.so-set-help { margin: 4px 0 0; color: var(--so-muted); font-size: 13px; line-height: 1.5; }
.so-set-check { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 6px; font-weight: 400; cursor: pointer; }
.so-set-check input { margin-top: 4px; }
.so-set-toggle .so-set-check, .so-set-field.so-set-toggle > .so-set-check { font-weight: 600; }
.so-set-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.so-set-num { width: 140px; }
.so-set-unit, .so-set-default { color: var(--so-muted); font-size: 13px; }
.so-set-saved { color: var(--so-ok); font-weight: 400; font-size: 12px; }
.so-set-err { margin: 4px 0 0; color: var(--so-risk); font-size: 13px; }
.so-set-field [aria-invalid="true"] { border-color: var(--so-risk); }
.so-set-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; }
.so-chip { height: 26px; padding: 0 8px; border: 1px solid var(--so-line-2); border-radius: 13px; background: var(--so-bg); color: var(--so-ink-2); font-size: 12px; font-family: monospace; cursor: pointer; }
.so-chip:hover { border-color: var(--so-accent); color: var(--so-ink); }
.so-set-tpl-foot { display: flex; gap: 12px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.so-set-link { background: none; border: 0; padding: 0; color: var(--so-accent); text-decoration: underline; cursor: pointer; font-size: 13px; }
.so-set-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--so-line); }
.so-set-state { color: var(--so-muted); font-size: 13px; }
.so-set-state.is-dirty { color: var(--so-warn); }
.so-set-state.is-ok { color: var(--so-ok); }
.so-set-state.is-err { color: var(--so-risk); }
.so-btn-primary { background: var(--so-accent); color: #fff; border-color: var(--so-accent); }
.so-btn-primary:hover { background: #111618; color: #fff; }
.so-set-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 16px; margin-bottom: 12px; }
.so-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.so-row > select, .so-row > input[type=text] { flex: 1 1 220px; min-width: 0; }
.so-set-table .so-row { align-items: center; }
.so-set-rowlabel { flex: 0 0 180px; margin: 0; font-weight: 400; }
.so-set-logos { display: flex; gap: 16px; flex-wrap: wrap; }
.so-set-logos figure { margin: 0; padding: 14px; border: 1px solid var(--so-line); border-radius: var(--so-radius); }
.so-set-logos img { height: 40px; max-width: 100%; display: block; }
.so-set-logos figcaption { margin-top: 6px; font-size: 12px; color: var(--so-muted); }
.so-set-linkgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.so-set-linkcard { border: 1px solid var(--so-line); border-radius: var(--so-radius); padding: 12px 14px; }
.so-set-linkcard h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.so-set-linkcard a { display: block; margin-bottom: 10px; color: var(--so-ink); text-decoration: none; }
.so-set-linkcard a span { display: block; color: var(--so-muted); font-size: 13px; }
.so-set-linkcard a:hover strong { text-decoration: underline; }
.so-set-status { list-style: none; margin: 12px 0 0; padding: 0; }
.so-set-status li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--so-line); }
.so-set-status li:first-child { border-top: 0; }
.so-set-status p { margin: 2px 0 0; color: var(--so-ink-2); font-size: 13px; }
.so-set-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--so-line-2); }
.so-set-status .is-ok .so-set-dot { background: var(--so-ok); }
.so-set-status .is-warn .so-set-dot { background: var(--so-warn); }
.so-set-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.so-set-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 24px; margin: 0; }
.so-set-facts dt { font-weight: 400; color: var(--so-muted); font-size: 12px; }
.so-set-facts dd { margin: 0; font-weight: 600; }
.so-set-card.is-collapsible .so-set-card-head { cursor: pointer; padding-bottom: 12px; }
.so-set-card.is-collapsible .so-set-card-head h2::after { content: ' ▾'; color: var(--so-muted); }
.so-set-card.is-collapsible:not(.is-open) .so-set-card-body { display: none; }
@media (max-width: 860px) {
    .so-set-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .so-set-nav { position: static; overflow-x: auto; white-space: nowrap; border-bottom: 1px solid var(--so-line); padding-bottom: 6px; }
    .so-set-nav ul { display: inline-flex; gap: 2px; margin: 0 8px 0 0; }
    .so-set-nav-group { display: none; }
    .so-set-num { width: 110px; }
    .so-set-rowlabel { flex-basis: 100%; }
}