/* DISCAF TZ-ROI · custom dashboard styles
 *
 * Layered on top of prod CSS (variables from app.discaf.ua/assets/index-...css).
 * Prefixes: .tz-* for everything TZ-ROI–specific to avoid clashing with
 * prod component classes we inherit through the base layer.
 *
 * Palette derives from existing --brand (#E8A355) and coffee-noir
 * background. Risk hints are LEFT-BORDER + TEXT-COLOR only — never
 * full-row backgrounds (per spec §8.3 and CLAUDE.md anti-AI rules,
 * with the explicit allowance here because this is a tabular
 * analytics UI where left borders are industry-standard for row
 * severity, not random "accent" lines on cards).
 */

:root {
    --tz-bg-page: #0E0E18;
    --tz-bg-surface: #15152A;
    --tz-bg-raised: #1C1C33;
    --tz-bg-input: #12122A;
    --tz-bg-hover: rgba(255, 255, 255, 0.03);

    --tz-border: rgba(255, 255, 255, 0.06);
    --tz-border-strong: rgba(255, 255, 255, 0.11);

    --tz-text: #F2EEE8;
    --tz-text-muted: #9A93AF;
    --tz-text-faint: #6B6586;

    --tz-brand: #E8A355;
    --tz-brand-hover: #F0B570;
    --tz-brand-soft: rgba(232, 163, 85, 0.12);
    --tz-brand-soft-strong: rgba(232, 163, 85, 0.22);

    --tz-danger: #F87171;
    --tz-danger-deep: #DC2626;
    --tz-warning: #FBBF24;
    --tz-success: #34D399;
    --tz-info: #7DD3FC;
    --tz-violet: #C4B5FD;

    --tz-risk-red-neg: #DC2626;
    --tz-risk-red: #F87171;
    --tz-risk-yellow: #FBBF24;
    --tz-risk-grey: #7A738E;
    --tz-risk-green: #34D399;

    --tz-radius-sm: 6px;
    --tz-radius-md: 10px;
    --tz-radius-lg: 14px;

    --tz-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* ── Reset-ish on top of prod CSS ───────────────────────────────────────── */

/* Prod CSS (app.discaf.ua/assets/index-*.css) sets `html,body{overflow:hidden}`
   to support the OKSANA SPA shell. We render classic server-rendered
   documents — restore natural page scroll. */
html, body.tz-body {
    overflow: auto !important;
    height: auto !important;
    overscroll-behavior: auto !important;
}

.tz-body {
    font-family: 'Onest', 'Inter', system-ui, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.45;
    color: var(--tz-text);
    background: var(--tz-bg-page);
    min-height: 100vh;
    margin: 0;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.tz-body::before {
    /* subtle atmospheric gradient — no purple, no cyan */
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(232, 163, 85, 0.06), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(125, 211, 252, 0.04), transparent 60%);
}

.tz-main { position: relative; z-index: 1; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.tz-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(14, 14, 24, 0.85);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid var(--tz-border);
}
.tz-topbar-inner {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 32px;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 40px;
}
.tz-brand {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.tz-brand-mark {
    color: var(--tz-brand);
    font-size: 16px;
    transform: translateY(1px);
}
.tz-brand-word {
    color: var(--tz-text);
    font-size: 15px;
}
.tz-brand-tag {
    color: var(--tz-brand);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 7px;
    border: 1px solid var(--tz-brand-soft-strong);
    border-radius: 4px;
    background: var(--tz-brand-soft);
}
.tz-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}
.tz-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    color: var(--tz-text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--tz-radius-sm);
    transition: background 150ms ease, color 150ms ease;
}
.tz-nav-link:hover { color: var(--tz-text); background: var(--tz-bg-raised); }
.tz-nav-link.is-active {
    color: var(--tz-brand);
    background: var(--tz-brand-soft);
}
.tz-topbar-right {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}
.tz-user {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--tz-text-muted);
    padding: 4px 10px;
    border: 1px solid var(--tz-border);
    border-radius: 999px;
}
.tz-nav-logout {
    color: var(--tz-text-faint);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--tz-radius-sm);
    transition: color 150ms ease, background 150ms ease;
}
.tz-nav-logout:hover {
    color: var(--tz-danger);
    background: rgba(248, 113, 113, 0.08);
}

/* ── Container ───────────────────────────────────────────────────────────── */

.tz-container {
    max-width: 1680px;
    margin: 0 auto;
    padding: 28px 32px 60px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Header row ──────────────────────────────────────────────────────────── */

.tz-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}
.tz-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--tz-text);
    margin: 0 0 6px 0;
}
.tz-subtitle {
    margin: 0;
    color: var(--tz-text-muted);
    font-size: 13px;
}
.tz-subtitle strong {
    color: var(--tz-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
}
.tz-rate {
    color: var(--tz-brand) !important;
}
.tz-subtitle-note {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--tz-text-muted);
    max-width: 900px;
}
.tz-subtitle-note strong {
    color: var(--tz-text-soft, #B8B3C8);
    font-weight: 500;
    font-family: inherit;
    font-size: inherit;
}
.tz-info-icon {
    display: inline-block;
    width: 14px; height: 14px;
    margin-right: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tz-brand, #E8A355) 20%, transparent);
    color: var(--tz-brand, #E8A355);
    text-align: center;
    line-height: 14px;
    font-size: 10px;
    font-weight: 600;
    cursor: help;
    font-family: ui-sans-serif, system-ui;
    vertical-align: middle;
}
.tz-header-right {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Segmented toggles ───────────────────────────────────────────────────── */

.tz-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--tz-bg-surface);
    border: 1px solid var(--tz-border);
    border-radius: var(--tz-radius-md);
    padding: 3px;
}

/* Read-only window indicator — replaces the removed 30/90 toggle. Single
   source of truth is settings.default_window_days; admin can change it on
   /settings without churning the dashboard UI. */
.tz-window-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--tz-bg-surface);
    border: 1px solid var(--tz-border);
    border-radius: var(--tz-radius-md);
    font-size: 12px;
    color: var(--tz-text-muted);
    cursor: help;
}
.tz-window-badge-label {
    color: var(--tz-text-faint);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.tz-window-badge-value {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--tz-text);
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.tz-toggle-label {
    padding: 0 10px 0 8px;
    color: var(--tz-text-faint);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.tz-toggle-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--tz-text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.tz-toggle-btn:hover { color: var(--tz-text); }
.tz-toggle-btn.is-active {
    background: var(--tz-brand);
    color: #0D0D1A;
    font-weight: 600;
}

/* ── KPI strip ───────────────────────────────────────────────────────────── */

.tz-kpi {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 12px;
}
.tz-kpi-card {
    position: relative;
    padding: 14px 16px 16px;
    background: var(--tz-bg-surface);
    border: 1px solid var(--tz-border);
    border-radius: var(--tz-radius-md);
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 150ms ease, transform 150ms ease;
}
.tz-kpi-card::before {
    content: "";
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--tz-border-strong);
}
.tz-kpi-label {
    color: var(--tz-text-muted);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tz-kpi-value {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 22px;
    font-weight: 600;
    color: var(--tz-text);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tz-kpi-total::before { background: var(--tz-brand); }
.tz-kpi-total .tz-kpi-value { color: var(--tz-brand); }
.tz-kpi-red-neg::before { background: var(--tz-risk-red-neg); }
.tz-kpi-red-neg .tz-kpi-value { color: var(--tz-risk-red-neg); }
.tz-kpi-red::before { background: var(--tz-risk-red); }
.tz-kpi-red .tz-kpi-value { color: var(--tz-risk-red); }
.tz-kpi-yellow::before { background: var(--tz-risk-yellow); }
.tz-kpi-yellow .tz-kpi-value { color: var(--tz-risk-yellow); }
.tz-kpi-green::before { background: var(--tz-risk-green); }
.tz-kpi-green .tz-kpi-value { color: var(--tz-risk-green); }
.tz-kpi-grey::before { background: var(--tz-risk-grey); }
.tz-kpi-grey .tz-kpi-value { color: var(--tz-risk-grey); }
.tz-kpi-volatility::before { background: var(--tz-info); }
.tz-kpi-volatility .tz-kpi-value { color: var(--tz-info); display: inline-flex; align-items: center; gap: 8px; }
.tz-bolt {
    font-size: 16px;
    color: var(--tz-info);
    transform: translateY(-1px);
}

/* Stagnant (висяки) — помаранчева з brand-відтінком: "заморожений капітал"  */
.tz-kpi-stagnant::before { background: var(--tz-brand); }
.tz-kpi-stagnant .tz-kpi-value { color: var(--tz-brand); }

/* Overstocked (перезатарено) — violet, нейтральний холодний попереджальний  */
.tz-kpi-overstocked::before { background: var(--tz-violet); }
.tz-kpi-overstocked .tz-kpi-value { color: var(--tz-violet); }

/* Новинки — блакитний info-відтінок. SKU з малою історією, ABC/XYZ ще не
   визначені; картка сигналізує «слідкуй за цими позиціями, рано класифікувати». */
.tz-kpi-new::before { background: var(--tz-info); }
.tz-kpi-new .tz-kpi-value {
    color: var(--tz-info);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.tz-kpi-new-icon {
    font-size: 14px;
    line-height: 1;
    filter: saturate(0.85);
    transform: translateY(-1px);
}

/* Small sub-line with UAH for stagnant / overstocked cards */
.tz-kpi-sub {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--tz-text-faint);
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* ── Filter rails ────────────────────────────────────────────────────────── */

.tz-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.tz-filter-block {
    background: var(--tz-bg-surface);
    border: 1px solid var(--tz-border);
    border-radius: var(--tz-radius-lg);
    padding: 16px 18px;
}
.tz-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.tz-filter-head h3 {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tz-text-muted);
}
.tz-filter-clear {
    background: transparent;
    border: none;
    color: var(--tz-text-faint);
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}
.tz-filter-clear:hover { color: var(--tz-brand); background: var(--tz-brand-soft); }
.tz-filter-body {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    max-height: 168px;
    overflow-y: auto;
    padding-right: 4px;
}
.tz-filter-body::-webkit-scrollbar { width: 6px; }
.tz-filter-body::-webkit-scrollbar-track { background: transparent; }
.tz-filter-body::-webkit-scrollbar-thumb { background: var(--tz-border-strong); border-radius: 3px; }

/* Warehouses filter: vertical column (one chip per row, chips hug their content).
   Folder filter keeps the flex-wrap layout above because folder labels are
   shorter and reading a grid is faster there. */
#warehouse-filter {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 4px;
}
#warehouse-filter .tz-chip {
    width: auto;
    max-width: 100%;
}
.tz-filter-loading {
    color: var(--tz-text-faint);
    font-size: 12.5px;
    padding: 6px 0;
}
.tz-filter-search {
    display: block;
    width: 100%;
    padding: 7px 10px;
    margin: 0 0 10px 0;
    background: var(--tz-bg-raised);
    border: 1px solid var(--tz-border-strong);
    border-radius: 6px;
    color: var(--tz-text);
    font-family: inherit;
    font-size: 12.5px;
    transition: border-color 120ms ease;
}
.tz-filter-search:focus { outline: none; border-color: var(--brand, #E8A355); }
.tz-filter-search::placeholder { color: var(--tz-text-faint); }
.tz-chip.tz-chip-indent::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 1px;
    background: var(--tz-border-strong);
    margin-right: 4px;
}

/* ── Tree view (folder filter) ─────────────────────────────────────────── */

.tz-tree {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0;
}
.tz-tree-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px 5px 0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.2;
    color: var(--tz-text);
    transition: background 100ms ease;
    user-select: none;
    min-height: 28px;
}
.tz-tree-row:hover {
    background: rgba(255, 255, 255, 0.03);
}
.tz-tree-row.is-active {
    background: rgba(232, 163, 85, 0.08);
}
.tz-tree-row.is-active .tz-tree-name {
    color: var(--brand, #E8A355);
    font-weight: 500;
}
.tz-tree-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 10px;
    color: var(--tz-text-faint);
    flex-shrink: 0;
}
.tz-tree-chevron.is-clickable {
    cursor: pointer;
    color: var(--tz-text-muted);
    border-radius: 3px;
    transition: background 120ms ease, color 120ms ease;
}
.tz-tree-chevron.is-clickable:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--brand, #E8A355);
}
.tz-tree-check {
    accent-color: var(--brand, #E8A355);
    flex-shrink: 0;
    cursor: pointer;
}
.tz-tree-icon {
    font-size: 12px;
    opacity: 0.85;
    flex-shrink: 0;
}
.tz-tree-code {
    font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    font-size: 10.5px;
    color: var(--tz-text-faint);
    flex-shrink: 0;
    letter-spacing: 0.2px;
}
.tz-tree-name {
    color: var(--tz-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}
.tz-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px 5px 8px;
    background: var(--tz-bg-raised);
    border: 1px solid var(--tz-border);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--tz-text-muted);
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
    user-select: none;
}
.tz-chip:hover { color: var(--tz-text); border-color: var(--tz-border-strong); }
.tz-chip input { display: none; }
.tz-chip .tz-chip-mark {
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--tz-text-faint);
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0D0D1A;
    font-size: 9px;
    font-weight: 700;
}
.tz-chip.is-active {
    color: var(--tz-brand);
    background: var(--tz-brand-soft);
    border-color: var(--tz-brand-soft-strong);
}
.tz-chip.is-active .tz-chip-mark {
    background: var(--tz-brand);
    border-color: var(--tz-brand);
}
.tz-chip.is-active .tz-chip-mark::after {
    content: "✓";
}
.tz-chip-code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--tz-text-faint);
    font-size: 11px;
    margin-left: 4px;
}

/* ── Table ───────────────────────────────────────────────────────────────── */

.tz-table-wrap {
    background: var(--tz-bg-surface);
    border: 1px solid var(--tz-border);
    border-radius: var(--tz-radius-lg);
    box-shadow: var(--tz-shadow-card);
    overflow: hidden;
}
.tz-table-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--tz-border);
}
.tz-table-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--tz-text);
}
.tz-dot { color: var(--tz-text-faint); margin: 0 6px; }
.tz-table-hint {
    font-size: 12px;
    color: var(--tz-text-faint);
}
.tz-freshness {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--tz-text-muted);
}
.tz-table-scroll { overflow-x: auto; }

.tz-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}
.tz-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--tz-bg-raised);
    color: var(--tz-text-muted);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    padding: 10px 16px;
    border-bottom: 1px solid var(--tz-border);
    white-space: nowrap;
}
.tz-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--tz-border);
    vertical-align: middle;
    color: var(--tz-text);
}
.tz-table tbody tr:last-child td { border-bottom: none; }
.tz-col-risk { width: 4px; padding: 0 !important; }
.tz-col-num, .tz-col-date { text-align: right !important; font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; white-space: nowrap; }
.tz-col-badge { width: 140px; text-align: left; }

/* Folder row */
.tz-folder-row {
    cursor: pointer;
    transition: background 120ms ease;
}
.tz-folder-row:hover td { background: var(--tz-bg-hover); }
.tz-folder-row.is-open td { background: rgba(232, 163, 85, 0.04); }

.tz-folder-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tz-chevron {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    color: var(--tz-text-faint);
    font-size: 11px;
    transition: transform 160ms ease, color 160ms ease;
}
.tz-folder-row.is-open .tz-chevron {
    transform: rotate(90deg);
    color: var(--tz-brand);
}
.tz-folder-name {
    font-weight: 600;
    color: var(--tz-text);
    font-size: 13.5px;
}
.tz-folder-code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--tz-text-faint);
    padding: 2px 6px;
    background: var(--tz-bg-raised);
    border-radius: 4px;
}
.tz-folder-skucount {
    color: var(--tz-text-faint);
    font-size: 12px;
}

/* SKU row */
.tz-sku-row td {
    background: #11112A;
    font-size: 12.5px;
}
.tz-sku-row:hover td { background: #14142F; }
.tz-sku-name-cell { padding-left: 48px !important; }
.tz-sku-name {
    color: var(--tz-text);
    font-weight: 500;
}
.tz-sku-code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--tz-text-faint);
    font-size: 11px;
    margin-right: 8px;
}
.tz-sku-hidden { display: none; }

/* Left border bar — risk indicator */
.tz-risk-bar {
    display: block;
    width: 4px;
    height: 34px;
    margin: 0;
    background: var(--tz-risk-grey);
    border-radius: 0 2px 2px 0;
}
.tz-risk-bar--red_neg { background: var(--tz-risk-red-neg); }
.tz-risk-bar--red { background: var(--tz-risk-red); }
.tz-risk-bar--yellow { background: var(--tz-risk-yellow); }
.tz-risk-bar--green { background: var(--tz-risk-green); }
.tz-risk-bar--grey { background: var(--tz-risk-grey); }

/* Badges — OUTLINE style, no fill background per anti-slop rule */
.tz-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.02em;
    border: 1px solid currentColor;
    background: transparent;
}
.tz-badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}
.tz-badge--red_neg { color: var(--tz-risk-red-neg); }
.tz-badge--red { color: var(--tz-risk-red); }
.tz-badge--yellow { color: var(--tz-risk-yellow); }
.tz-badge--grey { color: var(--tz-risk-grey); }
.tz-badge--green { color: var(--tz-risk-green); }

.tz-badge-confidence--high { color: var(--tz-success); border-color: rgba(52, 211, 153, 0.4); }
.tz-badge-confidence--medium { color: var(--tz-text-muted); border-color: var(--tz-border-strong); }
.tz-badge-confidence--low { color: var(--tz-text-faint); border-color: var(--tz-border); border-style: dashed; }

/* ── ABC / XYZ / Status badges ─────────────────────────────────────────── */

/* Compact letter badges for ABC / XYZ — single glyph so we keep them tight.  */
.tz-col-abc, .tz-col-xyz { width: 40px; text-align: center; padding-left: 4px !important; padding-right: 4px !important; }
.tz-badge-abc, .tz-badge-xyz {
    padding: 2px 8px;
    min-width: 24px;
    justify-content: center;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.tz-badge-abc--A { color: var(--tz-success); border-color: rgba(52, 211, 153, 0.4); }
.tz-badge-abc--B { color: var(--tz-warning); border-color: rgba(251, 191, 36, 0.4); }
.tz-badge-abc--C { color: var(--tz-danger); border-color: rgba(248, 113, 113, 0.45); }
.tz-badge-xyz--X { color: var(--tz-success); border-color: rgba(52, 211, 153, 0.4); }
.tz-badge-xyz--Y { color: var(--tz-warning); border-color: rgba(251, 191, 36, 0.4); }
.tz-badge-xyz--Z { color: var(--tz-danger); border-color: rgba(248, 113, 113, 0.45); border-style: dashed; }

/* Composite status badge — reuses risk/confidence token vocabulary but with
 * distinct colors for stagnant (brand) and overstocked (violet). */
.tz-badge-status--critical { color: var(--tz-risk-red); }
.tz-badge-status--warning { color: var(--tz-risk-yellow); }
.tz-badge-status--normal { color: var(--tz-risk-green); }
.tz-badge-status--negative { color: var(--tz-risk-red-neg); }
.tz-badge-status--no_data { color: var(--tz-risk-grey); border-style: dashed; }
.tz-badge-status--stagnant { color: var(--tz-brand); }
.tz-badge-status--overstocked { color: var(--tz-violet); }

/* New-SKU badge replaces the composite status for SKUs with < window/2
 * history. Blue-info palette so it reads as "neutral, awaiting data"
 * rather than a warning. Icon precedes the label instead of the usual dot. */
.tz-badge-status--new {
    color: var(--tz-info);
    border-color: rgba(125, 211, 252, 0.4);
    background: rgba(125, 211, 252, 0.06);
}
.tz-badge-status--new .tz-badge-dot { display: none; }
.tz-badge-status--new::before {
    content: "🆕";
    font-size: 11px;
    line-height: 1;
    margin-right: 4px;
    filter: saturate(0.85);
}

/* Overstock money column — highlight висяки / перезатарене. */
.tz-overstock { font-weight: 600; }
.tz-overstock--stagnant { color: var(--tz-brand); }
.tz-overstock--over { color: var(--tz-violet); }
.tz-overstock--folder { color: var(--tz-text); }

.tz-badge-volatility {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10.5px;
    color: var(--tz-info);
    border: 1px solid rgba(125, 211, 252, 0.28);
    background: rgba(125, 211, 252, 0.06);
    margin-left: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.tz-badge-volatility::before { content: "⚡"; font-size: 10px; }

.tz-empty td {
    text-align: center !important;
    color: var(--tz-text-faint);
    padding: 56px 20px !important;
    font-size: 13px;
}

.tz-num-dim { color: var(--tz-text-faint); }

/* ── Login page ──────────────────────────────────────────────────────────── */

.tz-login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.tz-login-frame {
    position: relative;
    width: 100%;
    max-width: 420px;
}
.tz-login-stripe {
    position: absolute;
    inset: -40px -80px auto auto;
    width: 260px;
    height: 260px;
    background: radial-gradient(closest-side, rgba(232, 163, 85, 0.25), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}
.tz-login-box {
    position: relative;
    z-index: 1;
    padding: 36px 32px 32px;
    background: linear-gradient(180deg, rgba(28, 28, 51, 0.92), rgba(21, 21, 42, 0.94));
    border: 1px solid var(--tz-border);
    border-radius: 16px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}
.tz-login-logo { text-align: center; margin-bottom: 28px; }
.tz-login-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--tz-brand-soft-strong);
    background: var(--tz-brand-soft);
    color: var(--tz-brand);
    border-radius: 12px;
    font-size: 18px;
    margin-bottom: 14px;
}
.tz-login-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--tz-text);
    letter-spacing: -0.01em;
}
.tz-login-sub {
    font-size: 12px;
    color: var(--tz-text-muted);
    margin-top: 4px;
    letter-spacing: 0.01em;
}
.tz-login-error {
    padding: 10px 14px;
    margin-bottom: 18px;
    border: 1px solid rgba(248, 113, 113, 0.25);
    background: rgba(248, 113, 113, 0.08);
    border-radius: 10px;
    color: var(--tz-danger);
    font-size: 13px;
}
.tz-login-form label {
    display: block;
    color: var(--tz-text-muted);
    font-size: 11px;
    font-weight: 500;
    margin: 12px 0 6px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tz-login-form input[type="text"],
.tz-login-form input[type="password"] {
    width: 100%;
    background: var(--tz-bg-input);
    color: var(--tz-text);
    border: 1px solid var(--tz-border);
    border-radius: 10px;
    padding: 0 14px;
    height: 42px;
    font-family: inherit;
    font-size: 14px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.tz-login-form input:focus {
    outline: none;
    border-color: var(--tz-brand);
    box-shadow: 0 0 0 3px var(--tz-brand-soft);
}
.tz-login-form button {
    width: 100%;
    height: 44px;
    margin-top: 18px;
    background: var(--tz-brand);
    color: #0D0D1A;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 150ms ease, transform 80ms ease;
}
.tz-login-form button:hover { background: var(--tz-brand-hover); }
.tz-login-form button:active { transform: translateY(1px); }

/* ── ROI report styles ───────────────────────────────────────────────────── */

/* ROI page has a single filter column (managers). Override the 2-col grid. */
.tz-filters-roi { grid-template-columns: 1fr; }
.tz-filters-roi .tz-filter-body {
    max-height: 280px;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
}

.tz-filter-actions {
    display: flex;
    gap: 4px;
}
.tz-filter-counter {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    background: var(--tz-bg-raised, rgba(255,255,255,0.06));
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    color: var(--tz-text-muted, #857FA0);
    letter-spacing: 0.02em;
    text-transform: none;
}

.tz-mgr-row {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 7px 4px 7px 2px;
    font-size: 12.5px;
    cursor: pointer;
    border-bottom: 1px solid color-mix(in srgb, var(--tz-border, #2a2a3e) 40%, transparent);
}
.tz-mgr-row:last-child { border-bottom: 0; }
.tz-mgr-row:hover { background: var(--tz-bg-raised, rgba(255,255,255,0.04)); }
.tz-mgr-row input[type="checkbox"] {
    accent-color: var(--tz-brand, #E8A355);
    margin: 0;
    cursor: pointer;
}
.tz-mgr-name {
    color: var(--tz-text, #F0EDE8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tz-mgr-meta {
    font-size: 11px;
    color: var(--tz-text-muted, #857FA0);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tz-mgr-roe {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 1px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.tz-kpi-sub {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--tz-text-muted, #857FA0);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── ROI KPI strip layout (8 tiles vs the default 10) ──────────────────── */
.tz-kpi-roi {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}
@media (max-width: 1400px) {
    .tz-kpi-roi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .tz-kpi-roi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Neutral tile (money figures without pass/fail semantics) */
.tz-kpi-neutral::before { background: var(--tz-border-strong, rgba(255,255,255,0.12)); }
.tz-kpi-neutral .tz-kpi-value { color: var(--tz-text, #F0EDE8); }

/* ROE tiles get tile-ok / tile-warn / tile-bad classes from JS (see fillKpi) */
.tz-kpi-roe-uah::before,
.tz-kpi-roe-usd::before { background: var(--tz-border-strong, rgba(255,255,255,0.12)); }

/* ── ROI KPI tinting: pass/warn/fail vs 7%-монтlу норм ─────────────────── */
.tz-kpi-card.tile-ok::before   { background: var(--tz-risk-green, #3ED987); }
.tz-kpi-card.tile-ok .tz-kpi-value { color: var(--tz-risk-green, #3ED987); }
.tz-kpi-card.tile-warn::before { background: var(--tz-risk-yellow, #F0C674); }
.tz-kpi-card.tile-warn .tz-kpi-value { color: var(--tz-risk-yellow, #F0C674); }
.tz-kpi-card.tile-bad::before  { background: var(--tz-risk-red, #F87171); }
.tz-kpi-card.tile-bad .tz-kpi-value { color: var(--tz-risk-red, #F87171); }
.tz-kpi-card.tile-na::before   { background: var(--tz-border-strong, rgba(255,255,255,0.12)); }
.tz-kpi-card.tile-na .tz-kpi-value { color: var(--tz-text-muted, #857FA0); }

.tz-chip {
    display: inline-block;
    padding: 2px 8px;
    background: var(--tz-bg-raised);
    border: 1px solid var(--tz-border);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--tz-text-soft);
    margin-left: 10px;
    letter-spacing: 0.02em;
}

.tz-col-roe {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ROE colour bands — green ≥100%, amber 50-100%, muted 0-50%, red <0 */
.tz-col-roe.roe-high { color: #3ED987; }
.tz-col-roe.roe-mid  { color: #F0C674; }
.tz-col-roe.roe-low  { color: var(--tz-text-soft, #B8B3C8); }
.tz-col-roe.roe-neg  { color: #F87171; }
.tz-col-roe.roe-na   { color: var(--tz-text-muted, #857FA0); }

.roe-mgr-row {
    cursor: pointer;
    background: color-mix(in srgb, var(--tz-brand, #E8A355) 5%, transparent);
}
.roe-mgr-row:hover { background: color-mix(in srgb, var(--tz-brand, #E8A355) 10%, transparent); }
.roe-mgr-row .tz-col-name { font-weight: 600; font-size: 14px; }
.roe-mgr-name { color: var(--tz-text, #F0EDE8); }

.roe-cli-row {
    cursor: pointer;
}
.roe-cli-row:hover { background: var(--tz-bg-raised, rgba(255,255,255,0.04)); }
.roe-cli-row .tz-col-name { padding-left: 28px; font-size: 13px; }
.roe-cli-name { color: var(--tz-text, #F0EDE8); }

.roe-sub-row {
    cursor: pointer;
    background: color-mix(in srgb, var(--tz-brand, #E8A355) 3%, transparent);
}
.roe-sub-row:hover { background: color-mix(in srgb, var(--tz-brand, #E8A355) 7%, transparent); }
.roe-sub-row .tz-col-name { padding-left: 42px; font-size: 12.5px; }
.roe-sub-name { color: var(--tz-text-soft, #B8B3C8); }
.roe-subcount-dim {
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    color: var(--tz-text-muted, #857FA0);
    font-variant-numeric: tabular-nums;
}
.roe-venue {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    background: color-mix(in srgb, var(--tz-brand, #E8A355) 15%, transparent);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    color: var(--tz-brand, #E8A355);
    letter-spacing: 0.02em;
}

.roe-equip-row {
    background: color-mix(in srgb, #000 15%, transparent);
}
#roe-table .roe-sub-row + .roe-equip-row .tz-col-name,
#roe-table .roe-equip-row[data-sub-key] .tz-col-name {
    padding-left: 72px;
}
.roe-equip-row .tz-col-name { padding-left: 56px; font-size: 12px; }
.roe-equip-name { color: var(--tz-text-soft, #B8B3C8); line-height: 1.3; }
.roe-equip-meta {
    color: var(--tz-text-muted, #857FA0);
    font-size: 11px;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.roe-subcount {
    display: inline-block;
    margin-left: 10px;
    padding: 1px 7px;
    background: var(--tz-bg-raised, rgba(255,255,255,0.06));
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    color: var(--tz-text-muted, #857FA0);
    letter-spacing: 0.02em;
}

.roe-new {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    background: color-mix(in srgb, var(--tz-brand, #E8A355) 20%, transparent);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    color: var(--tz-brand, #E8A355);
    letter-spacing: 0.02em;
}

.roe-noos {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    background: color-mix(in srgb, var(--tz-text-muted, #857FA0) 18%, transparent);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    color: var(--tz-text-muted, #857FA0);
    letter-spacing: 0.02em;
    cursor: help;
}

.roe-no-cost {
    color: var(--tz-text-muted, #857FA0);
    font-style: italic;
    font-size: 11px;
}

.tz-chev {
    display: inline-block;
    width: 14px;
    color: var(--tz-text-muted, #857FA0);
    font-size: 10px;
}

.is-hidden { display: none !important; }

/* ── ROI table: fixed layout so columns don't reflow when rows expand ──── */

#roe-table { table-layout: fixed; }

/* Column widths — headers anchor the table-layout:fixed layout. Order
 * matches <thead>: chev | name | ВП grn | ВП $ | Вартість grn | Вартість $
 * | ROE grn/міс | ROE $/міс | ОС */
#roe-table colgroup col.c-chev   { width: 30px; }
#roe-table colgroup col.c-name   { width: auto; }
#roe-table colgroup col.c-money  { width: 130px; }
#roe-table colgroup col.c-money-usd { width: 95px; }
#roe-table colgroup col.c-roe    { width: 105px; }
#roe-table colgroup col.c-equip  { width: 110px; }

#roe-table thead th,
#roe-table tbody td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Allow equipment-row name cell to wrap (it has two lines of meta). */
#roe-table tbody .roe-equip-row .tz-col-name {
    white-space: normal;
}
#roe-table tbody .roe-equip-row .roe-equip-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#roe-table tbody .roe-equip-row .roe-equip-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Numeric cells: always on one line, right-aligned, mono-spaced digits */
#roe-table td.tz-col-num,
#roe-table th.tz-col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* Manager/client name cells can truncate long names with … rather than wrap */
#roe-table .roe-mgr-row .tz-col-name,
#roe-table .roe-cli-row .tz-col-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Responsive fallback (narrow viewports degrade gracefully) ───────────── */

@media (max-width: 1400px) {
    .tz-kpi { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .tz-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .tz-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tz-filters { grid-template-columns: 1fr; }
    .tz-topbar-inner { padding: 0 16px; gap: 18px; }
    .tz-container { padding: 18px 16px 40px; }
}