/* ==========================================================================
   Design System — internal.salesevolution.ru + Claude Code SPA
   Single source of truth for tokens and base components.

   Spec: /srv/platform/service/docs/ui-guidelines.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — LIGHT theme (default)

   Applied when [data-theme="light"] OR system preference is light and no
   manual override. The theme attribute is set by inline <script> in the
   layout <head> before first render.
   -------------------------------------------------------------------------- */

:root,
:root[data-theme="light"] {
    /* Backgrounds — Radix Slate scale (cool gray, single hue family) */
    --bg-body:          #f7f8fa;   /* slate-2 */
    --bg-surface:       #ffffff;
    --bg-surface-alt:   #f1f3f5;   /* slate-3 */
    --bg-input:         #ffffff;
    --bg-hover:         #e9ebee;   /* slate-4 */
    --bg-code:          #f1f3f5;
    --bg-overlay:       rgba(17, 24, 28, 0.55);

    /* Text — Radix Slate 11/12 for AA contrast on white */
    --text-primary:     #11181c;   /* slate-12 */
    --text-secondary:   #4f575e;   /* slate-11 — passes AA on white & bg-body */
    --text-muted:       #889096;   /* slate-10 */
    --text-heading:     #0d1115;
    --text-on-accent:   #ffffff;
    --text-link:        #0a66c2;   /* Apple SystemBlue-700 / LinkedIn — readable on white */
    --text-link-hover:  #084c92;

    /* Borders — Radix slate-6/7/5 */
    --border:           #dfe3e6;   /* slate-6 */
    --border-subtle:    #ebedef;   /* slate-5 */
    --border-strong:    #c6cbd1;   /* slate-7 */

    /* Accents — SE brand red (брендбук /srv/shared/brand/core: единственный акцент) */
    --accent:           #ff031d;   /* --se-red */
    --accent-hover:     #d9000f;   /* --se-red-deep */
    --accent-subtle:    rgba(255, 3, 29, 0.07);
    --accent-brand:     #d97757; /* Claude brand, SPA only */
    --accent-brand-hover: #c6613f;

    /* Semantic — 600-step (less neon than 500) for solid use; subtle fills at 8% */
    --success:          #059669;   /* emerald-600 */
    --success-subtle:   rgba(5, 150, 105, 0.08);
    --warning:          #d97706;   /* amber-600, calmer than amber-500 */
    --warning-subtle:   rgba(217, 119, 6, 0.10);
    --danger:           #dc2626;   /* red-600 */
    --danger-subtle:    rgba(220, 38, 38, 0.08);
    --info:             #2563eb;   /* blue-600 */
    --info-subtle:      rgba(37, 99, 235, 0.08);

    /* Badges — subtle fills (Linear/Notion approach), AA text */
    --badge-success-bg: rgba(5, 150, 105, 0.10);
    --badge-success-fg: #047857;
    --badge-warning-bg: rgba(217, 119, 6, 0.10);
    --badge-warning-fg: #92400e;
    --badge-danger-bg:  rgba(220, 38, 38, 0.10);
    --badge-danger-fg:  #b91c1c;
    --badge-info-bg:    rgba(37, 99, 235, 0.10);
    --badge-info-fg:    #1d4ed8;
    --badge-neutral-bg: #e9ebee;
    --badge-neutral-fg: #3a4147;

    /* Sidebar (dark in both themes — бренд-navy, --se-navy-500 из брендбука) */
    --sidebar-bg:         #222e3c;
    --sidebar-surface:    #2a3644;
    --sidebar-text:       #e7eaef;
    --sidebar-text-muted: #93a0ae;
    --sidebar-hover:      #2c3a49;
    --sidebar-active:     #ff2a3c;   /* --se-red-bright: читаемее чистого красного на navy */
    --sidebar-border:     rgba(255, 255, 255, 0.08);

    /* Shadows */
    --shadow-sm:  0 1px 2px rgba(17, 24, 28, 0.04);
    --shadow-md:  0 4px 12px rgba(17, 24, 28, 0.07);
    --shadow-lg:  0 10px 30px rgba(17, 24, 28, 0.10);
    --shadow-xl:  0 20px 50px rgba(17, 24, 28, 0.14);

    /* Focus ring — accent at 25% */
    --focus-ring: 0 0 0 3px rgba(255, 3, 29, 0.22);

    /* Scrollbar */
    --scrollbar-thumb:  rgba(17, 24, 28, 0.20);
    --scrollbar-track:  transparent;
}

/* --------------------------------------------------------------------------
   2. Tokens — DARK theme

   Applied when [data-theme="dark"] OR system preference is dark and no
   manual override.
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] {
    /* Backgrounds — Radix Slate dark scale, wider step between body/surface/hover */
    --bg-body:          #0e1116;   /* slateDark-1 — slightly cooler */
    --bg-surface:       #161a20;   /* slateDark-2 */
    --bg-surface-alt:   #1f242c;   /* slateDark-3 */
    --bg-input:         #1c2129;
    --bg-hover:         #262c35;   /* slateDark-4 — distinct from surface */
    --bg-code:          #1c2129;
    --bg-overlay:       rgba(0, 0, 0, 0.72);

    /* Text — Radix slateDark for AA on bg-surface */
    --text-primary:     #ecedee;
    --text-secondary:   #adb1b8;   /* slateDark-11 */
    --text-muted:       #787f85;   /* slateDark-10 */
    --text-heading:     #f5f6f7;
    --text-on-accent:   #ffffff;
    --text-link:        #60a5fa;   /* blue-400, calm on dark */
    --text-link-hover:  #93c5fd;

    /* Borders — slate dark scale */
    --border:           #2c313a;
    --border-subtle:    #1f242c;
    --border-strong:    #3a414b;

    /* Accents — SE red, bright variant для тёмного фона */
    --accent:           #ff2a3c;
    --accent-hover:     #ff5563;
    --accent-subtle:    rgba(255, 42, 60, 0.14);

    /* Semantic — softer hues for dark bg, never neon */
    --success:          #3fb984;   /* between emerald-500 and 400, desaturated */
    --success-subtle:   rgba(63, 185, 132, 0.13);
    --warning:          #e09e3c;   /* warm amber, not yellow */
    --warning-subtle:   rgba(224, 158, 60, 0.13);
    --danger:           #e26161;   /* coral-ish red, not screaming red */
    --danger-subtle:    rgba(226, 97, 97, 0.13);
    --info:             #4493f8;
    --info-subtle:      rgba(68, 147, 248, 0.13);

    /* Badges — subtle fills, AA fg on dark */
    --badge-success-bg: rgba(63, 185, 132, 0.16);
    --badge-success-fg: #5dd4a3;
    --badge-warning-bg: rgba(224, 158, 60, 0.16);
    --badge-warning-fg: #f4ba5d;
    --badge-danger-bg:  rgba(226, 97, 97, 0.16);
    --badge-danger-fg:  #f08a8a;
    --badge-info-bg:    rgba(68, 147, 248, 0.16);
    --badge-info-fg:    #7ab3fa;
    --badge-neutral-bg: #2c313a;
    --badge-neutral-fg: #c8ccd2;

    /* Sidebar — slightly darker than body */
    --sidebar-bg:         #10151c;
    --sidebar-surface:    #171d25;
    --sidebar-hover:      #1e2530;

    /* Shadows — deeper in dark */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.50);
    --shadow-lg:  0 10px 30px rgba(0, 0, 0, 0.60);
    --shadow-xl:  0 20px 50px rgba(0, 0, 0, 0.70);

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(255, 42, 60, 0.32);

    /* Scrollbar */
    --scrollbar-thumb:  rgba(255, 255, 255, 0.14);
}

/* --------------------------------------------------------------------------
   3. Tokens — Shared (theme-independent)
   -------------------------------------------------------------------------- */

:root {
    /* Typography — Inter = единственный бренд-шрифт (брендбук); загрузка в layout <head> */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'Liberation Mono', monospace;

    --fs-xs:    11px;
    --fs-sm:    12px;
    --fs-md:    14px;
    --fs-lg:    15px;
    --fs-xl:    17px;
    --fs-2xl:   20px;
    --fs-3xl:   24px;
    --fs-4xl:   32px;

    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;

    --lh-tight:    1.2;
    --lh-base:     1.5;
    --lh-relaxed:  1.6;

    /* Spacing (4px grid) */
    --sp-0:  0;
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* Radii */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast:  0.15s ease;
    --transition-base:  0.2s ease;
    --transition-slow:  0.3s ease;

    /* Layout */
    --sidebar-width:           240px;
    --sidebar-width-collapsed: 56px;
    --topbar-height:           56px;
    --content-max-width: 1600px;
    --breakpoint-mobile: 768px;

    /* Z-index scale */
    --z-dropdown:    1000;
    --z-sticky:      1010;
    --z-sidebar:     1020;
    --z-overlay:     1030;
    --z-modal:       1040;
    --z-toast:       1050;
    --z-tooltip:     1060;
}

/* --------------------------------------------------------------------------
   4. Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: var(--lh-base);
    color-scheme: light dark;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: var(--lh-base);
    color: var(--text-primary);
    background: var(--bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--text-link-hover);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-heading);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }

p {
    color: var(--text-primary);
}

small {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

code, kbd, pre, samp {
    font-family: var(--font-mono);
    font-size: 0.925em;
}

code {
    background: var(--bg-code);
    padding: 0.15em 0.35em;
    border-radius: var(--radius-sm);
}

kbd {
    display: inline-block;
    padding: 0.15em 0.45em;
    background: var(--bg-surface-alt);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
    color: var(--text-secondary);
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--sp-4) 0;
}

/* --------------------------------------------------------------------------
   5. Focus
   -------------------------------------------------------------------------- */

:focus { outline: none; }

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

button, a, input, select, textarea {
    &:focus-visible { box-shadow: var(--focus-ring); }
}

/* --------------------------------------------------------------------------
   6. Scrollbars (webkit)
   -------------------------------------------------------------------------- */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* --------------------------------------------------------------------------
   7. Icons

   Rendered via the {{ icon() }} Jinja macro → <svg class="icon"><use .../></svg>
   -------------------------------------------------------------------------- */

.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   8. Card
   -------------------------------------------------------------------------- */

.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    margin-bottom: var(--sp-6);
    box-shadow: var(--shadow-sm);
}

.card--compact { padding: var(--sp-4); }
.card--flat { box-shadow: none; }

.card > h1,
.card > h2,
.card > h3,
.card > h4 {
    margin-bottom: var(--sp-4);
}

.card > *:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   9. Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 36px;
    padding: var(--sp-2) var(--sp-4);
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    line-height: 1;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
    user-select: none;
}

.btn:hover { background: var(--bg-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Variants */
.btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
}
.btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--text-on-accent);
}

.btn--secondary {
    background: var(--bg-surface);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.btn--danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #ffffff;
}
.btn--danger:hover { filter: brightness(0.93); }

.btn--success {
    background: var(--success);
    border-color: var(--success);
    color: #ffffff;
}
.btn--success:hover { filter: brightness(0.93); }

.btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}
.btn--ghost:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.btn--icon {
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}
.btn--icon:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Sizes */
.btn--sm { min-height: 28px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
.btn--lg { min-height: 44px; padding: var(--sp-3) var(--sp-5); font-size: var(--fs-lg); }

@media (max-width: 768px) {
    .btn { min-height: 44px; }
    .btn--sm { min-height: 36px; }
    .btn--icon { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   10. Form fields
   -------------------------------------------------------------------------- */

.field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-bottom: var(--sp-4);
}

.field__label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
}

.field__hint {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.field__error {
    font-size: var(--fs-xs);
    color: var(--danger);
}

.input,
.textarea,
.select {
    display: block;
    width: 100%;
    min-height: 36px;
    padding: var(--sp-2) var(--sp-3);
    font-family: inherit;
    font-size: var(--fs-md);
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--text-muted);
}

.input:focus,
.textarea:focus,
.select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.input--error,
.textarea--error { border-color: var(--danger); }

.textarea { min-height: 96px; resize: vertical; line-height: var(--lh-base); }

.input--sm { min-height: 28px; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); }
.input--lg { min-height: 44px; font-size: var(--fs-lg); }

@media (max-width: 768px) {
    .input, .textarea, .select { min-height: 44px; font-size: 16px; /* prevent iOS zoom */ }
}

/* --------------------------------------------------------------------------
   11. Tables
   -------------------------------------------------------------------------- */

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--sp-4) 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-md);
    color: var(--text-primary);
}

.table th,
.table td {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-subtle);
}

.table th {
    background: var(--bg-surface-alt);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    position: sticky;
    top: 0;
    z-index: 1;
}

.table tbody tr {
    transition: background var(--transition-fast);
}

.table tbody tr:hover {
    background: var(--bg-hover);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* Modifiers */
.table--compact th,
.table--compact td { padding: var(--sp-2) var(--sp-3); }

.table--striped tbody tr:nth-child(even) { background: var(--bg-surface-alt); }
.table--striped tbody tr:nth-child(even):hover { background: var(--bg-hover); }

.table--nums .amt,
.table--nums .num { font-variant-numeric: tabular-nums lining-nums; text-align: right; }

/* Числовые значения (суммы, метрики) — Inter с табличными цифрами вместо mono */
.tnum { font-variant-numeric: tabular-nums lining-nums; }

/* --------------------------------------------------------------------------
   12. Badges
   -------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: 1.4;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.badge--success { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.badge--warning { background: var(--badge-warning-bg); color: var(--badge-warning-fg); }
.badge--danger  { background: var(--badge-danger-bg);  color: var(--badge-danger-fg); }
.badge--info    { background: var(--badge-info-bg);    color: var(--badge-info-fg); }
.badge--neutral { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); }

/* --------------------------------------------------------------------------
   13. Status dot
   -------------------------------------------------------------------------- */

.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
    flex-shrink: 0;
}
.dot--success { background: var(--success); }
.dot--warning { background: var(--warning); }
.dot--danger  { background: var(--danger); }
.dot--info    { background: var(--info); }
.dot--neutral { background: var(--text-muted); }

/* --------------------------------------------------------------------------
   14. Alerts
   -------------------------------------------------------------------------- */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-md);
    border: 1px solid transparent;
}

.alert--success { background: var(--success-subtle); color: var(--badge-success-fg); border-color: var(--success); }
.alert--warning { background: var(--warning-subtle); color: var(--badge-warning-fg); border-color: var(--warning); }
.alert--error   { background: var(--danger-subtle);  color: var(--badge-danger-fg);  border-color: var(--danger); }
.alert--info    { background: var(--info-subtle);    color: var(--badge-info-fg);    border-color: var(--info); }

/* --------------------------------------------------------------------------
   15. Layout primitives
   -------------------------------------------------------------------------- */

.container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--sp-6);
}

@media (max-width: 768px) {
    .container { padding: var(--sp-4); }
}

.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack--sm { gap: var(--sp-2); }
.stack--lg { gap: var(--sp-6); }

.row { display: flex; flex-direction: row; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.row--nowrap { flex-wrap: nowrap; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }

.grow { flex: 1; }

/* Visually-hidden (a11y) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   16. Top bar
   -------------------------------------------------------------------------- */

.top-bar {
    /* Прибит к верху (sticky) и сам несёт safe-area-инсет: в PWA standalone
       (iPhone, вырез) фон бара заходит под статус-бар, контентная строка
       начинается ниже него — и совпадает с fixed SE-значком (.mobile-toggle,
       top: sp-2 + inset). В обычном браузере env()=0 — геометрия прежняя.
       align-items:center центрирует по content-box (56px ниже инсета). */
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: calc(var(--topbar-height) + env(safe-area-inset-top));
    padding: 0 var(--sp-6);
    padding-top: env(safe-area-inset-top);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
}

.top-bar h1,
.top-bar .top-bar__title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    color: var(--text-heading);
    margin: 0;
}

@media (max-width: 768px) {
    /* per-side, НЕ shorthand: padding закоротил бы padding-top (safe-area) базы */
    .top-bar { padding-left: calc(var(--sp-4) + 48px); /* leave room for hamburger */
               padding-right: var(--sp-4); }
    .top-bar h1 { font-size: var(--fs-lg); }
}

/* Status dot used in top-bar for draft/active/in_progress/completed/on_hold */
.top-bar .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.top-bar .status-dot.draft       { background: var(--text-muted); }
.top-bar .status-dot.active      { background: var(--success); }
.top-bar .status-dot.in_progress { background: var(--info); }
.top-bar .status-dot.completed   { background: var(--text-muted); opacity: 0.6; }
.top-bar .status-dot.on_hold     { background: var(--warning); }

/* --------------------------------------------------------------------------
   17. Content area
   -------------------------------------------------------------------------- */

.main-content { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; }

.content {
    flex: 1;
    padding: var(--sp-6);
    max-width: var(--content-max-width);
    width: 100%;
}

@media (max-width: 768px) {
    .main-content { margin-left: 0; }
    .content { padding: var(--sp-4); }
}

/* --------------------------------------------------------------------------
   19. Legacy mobile rules — global responsive adjustments inherited from
   the pre-Phase-0 theme.css. Kept to avoid regressions until screens are
   individually refactored.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    /* Horizontal-scrolling tabs (legacy .tabs / .proj-tabs) */
    .tabs, .proj-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
    }
    .tabs::-webkit-scrollbar,
    .proj-tabs::-webkit-scrollbar { display: none; }

    .tab, .proj-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Legacy info-row grids collapse on mobile */
    .info-row {
        grid-template-columns: 1fr !important;
        gap: var(--sp-1) !important;
    }
}
