/* CashFrame — global custom styles */

:root {
    --color-primary: #4F46E5;
    --color-primary-hover: #6366F1;
    --color-primary-dark: #3730A3;
    --color-cash: #10B981;
    --color-surface: #0D1021;
    --color-surface-deep: #080A14;
    --color-border: #1C2040;
    --color-text: #F1F5F9;
    --color-text-muted: #64748B;
    --color-text-dim: #475569;
    --color-positive: #10B981;
    --color-negative: #F43F5E;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
    /* Structural theme variables */
    --bg-body: #08091A;
    --bg-sidebar: #0B0C1E;
    --bg-mobile-header: #0B0C1E;
    --bg-input: #080A14;
    --bg-select: #0D1021;
    --bg-modal-chrome: #080A14;
    --bg-table-head: #080A14;
    --bg-table-detail: #080A14;
    --sidebar-border: #1C2040;
    --sidebar-item-active-color: #FFFFFF;
    --sidebar-item-inactive-color: #64748B;
    --sidebar-item-hover-bg: rgba(255,255,255,0.05);
    --sidebar-user-bg: #131628;
    --proj-btn-bg: #131628;
    --proj-dropdown-bg: #0D1021;
}

html.light {
    --bg-body: #F1F5F9;
    --bg-sidebar: #FFFFFF;
    --bg-mobile-header: #FFFFFF;
    --bg-input: #F8FAFC;
    --bg-select: #FFFFFF;
    --bg-modal-chrome: #F8FAFC;
    --bg-table-head: #F8FAFC;
    --bg-table-detail: #F1F5F9;
    --color-surface: #FFFFFF;
    --color-surface-deep: #F8FAFC;
    --color-border: #E2E8F0;
    --color-text: #0F172A;
    --color-text-muted: #64748B;
    --color-text-dim: #94A3B8;
    --sidebar-border: #E2E8F0;
    --sidebar-item-active-color: #4F46E5;
    --sidebar-item-inactive-color: #64748B;
    --sidebar-item-hover-bg: rgba(0,0,0,0.04);
    --sidebar-user-bg: #F1F5F9;
    --proj-btn-bg: #F1F5F9;
    --proj-dropdown-bg: #FFFFFF;
}

html { scroll-behavior: smooth; }

/* ── Blog content ────────────────────────────────────────────── */
.blog-content p { margin-bottom: 1rem; line-height: 1.75; }
.blog-content h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 1rem; }
.blog-content h3 { font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 0.75rem; }
.blog-content strong { font-weight: 600; }
.blog-content em { font-style: italic; }
.blog-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.blog-content li { margin-bottom: 0.25rem; line-height: 1.75; }
.blog-content a { color: var(--color-primary); text-decoration: underline; }
.blog-content a:hover { color: var(--color-primary-dark); }
.blog-content img { max-width: 100%; border-radius: 0.5rem; margin: 1.5rem 0; }

/* ══════════════════════════════════════════════════════════════
   CRM Design System
══════════════════════════════════════════════════════════════ */

/* ── Page Header ─────────────────────────────────────────────── */
.crm-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}
.crm-page-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.015em;
    line-height: 1.25;
}
.crm-page-sub {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 0.3rem;
}
@media (max-width: 639px) {
    .crm-page-header { flex-direction: column; align-items: stretch; }
    .crm-page-header > *:last-child { align-self: flex-start; }
}

/* ── Metric / Summary Cards ──────────────────────────────────── */
.crm-metric-card {
    background: linear-gradient(150deg, #0D1021 0%, #0e1228 100%);
    border: 1px solid var(--color-border);
    border-radius: 0.875rem;
    padding: 1.125rem 1.25rem;
    position: relative;
    overflow: hidden;
}
/* Signature: faint radial glow from accent color */
.crm-metric-card::after {
    content: '';
    position: absolute;
    bottom: -24px;
    left: -16px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    opacity: 0.12;
    pointer-events: none;
}
.crm-metric-card.accent-green::after { background: #10B981; }
.crm-metric-card.accent-red::after   { background: #F43F5E; }
.crm-metric-card.accent-blue::after  { background: #6366F1; }

.crm-metric-accent {
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 3px;
    border-radius: 0 2px 2px 0;
}
.crm-metric-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-dim);
    margin-bottom: 0.625rem;
}
.crm-metric-value {
    font-family: var(--font-mono);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
}
.crm-metric-currency {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-text-dim);
    margin-left: 0.3rem;
    vertical-align: baseline;
}

/* ── Filter Toolbar ──────────────────────────────────────────── */
.crm-toolbar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.875rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
}
.crm-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.375rem;
    background: rgba(99,102,241,0.12);
    color: #818CF8;
    border: 1px solid rgba(99,102,241,0.2);
}

/* ── Table ───────────────────────────────────────────────────── */
.crm-table-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.875rem;
    overflow: hidden;
}
.crm-table-scroll {
    overflow-x: auto;
}
.crm-table {
    width: 100%;
    font-size: 0.8125rem;
    border-collapse: collapse;
}
.crm-table thead {
    background: var(--bg-table-head);
}
.crm-table thead tr {
    border-bottom: 1px solid var(--color-border);
}
.crm-table thead th {
    padding: 0.625rem 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-dim);
    white-space: nowrap;
    text-align: left;
}
.crm-table thead th.th-right  { text-align: right; }
.crm-table thead th.th-center { text-align: center; }
.crm-table tbody tr {
    border-top: 1px solid var(--color-border);
    transition: background 0.1s;
}
.crm-table tbody tr:first-child { border-top: none; }
.crm-table tbody tr.detail-row { background: var(--bg-table-detail); }
.crm-table tbody tr:not(.detail-row):hover { background: rgba(255,255,255,0.017); }
.crm-table td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
}

/* ── Badges ──────────────────────────────────────────────────── */
.crm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.5625rem;
    border-radius: 0.375rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    line-height: 1.4;
}
.crm-badge-sale        { background: #052e1f; color: #34D399; }
.crm-badge-purchase    { background: #2a0a0a; color: #F87171; }
.crm-badge-paid        { background: #052e1f; color: #34D399; }
.crm-badge-unpaid      { background: #2d0a12; color: #F87171; }
.crm-badge-telegram    { background: #0a1f30; color: #38BDF8; }
.crm-badge-max         { background: #1a0d35; color: #A78BFA; }
.crm-badge-neutral     { background: #111329; color: #64748B; }
.crm-badge-periodicity { background: #111329; color: #94A3B8; }

/* ── Buttons ─────────────────────────────────────────────────── */
.crm-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.625rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.4;
}
.crm-btn-primary           { background: #4F46E5; color: #fff; }
.crm-btn-primary:hover     { background: #6366F1; }
.crm-btn-ghost             { background: transparent; color: #64748B; border: 1px solid #1C2040; }
.crm-btn-ghost:hover       { color: #e2e8f0; background: rgba(255,255,255,0.04); border-color: #2A2E5A; }
.crm-btn-danger            { background: #9f1239; color: #fff; }
.crm-btn-danger:hover      { background: #be123c; }
.crm-btn-link              { background: transparent; color: #64748B; padding: 0.5rem 0.625rem; }
.crm-btn-link:hover        { color: #e2e8f0; }
.crm-btn-block             { width: 100%; justify-content: center; }

.crm-btn-icon {
    width: 2rem; height: 2rem;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.5rem;
    background: transparent;
    color: #475569;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.crm-btn-icon:hover           { color: #cbd5e1; background: rgba(255,255,255,0.06); }
.crm-btn-icon.danger:hover    { color: #F87171; background: rgba(248,113,113,0.07); }

/* History button (icon style) */
.crm-history-btn {
    width: 2rem; height: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.5rem;
    color: #475569;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.crm-history-btn:hover { color: #94A3B8; background: rgba(255,255,255,0.05); }

/* ── Form Inputs ─────────────────────────────────────────────── */
.form-input,
.crm-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--color-border);
    border-radius: 0.625rem;
    padding: 0.5625rem 0.875rem;
    font-size: 0.875rem;
    color: var(--color-text);
    outline: none;
    transition: border-color 0.15s;
    line-height: 1.5;
}
.form-input:focus,
.crm-input:focus        { border-color: #6366F1; }
.form-input::placeholder,
.crm-input::placeholder { color: #334155; }
html.light .form-input::placeholder,
html.light .crm-input::placeholder { color: #94A3B8; }
/* Native date picker icon: invert on dark, keep on light */
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
html.light input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }

/* ── Select Overrides ────────────────────────────────────────── */
select.form-input,
select.crm-input {
    background-color: var(--bg-select);
    border-radius: 0.75rem;
    padding-right: 2.25rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ── Modal ───────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.modal-overlay.hidden { display: none; }

.modal-box {
    width: 100%;
    background: var(--color-surface);
    border: 1px solid #1E2348;
    border-radius: 1rem;
    box-shadow: 0 24px 80px rgba(0,0,0,0.65);
    display: flex;
    flex-direction: column;
    max-height: 92vh;
    /* clip for border-radius without hiding child scrollbars */
    overflow: clip;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--bg-modal-chrome);
    border-radius: 1rem 1rem 0 0;
    flex-shrink: 0;
}
/* form inside modal-box must itself be a flex column so modal-body can scroll */
.modal-box > form {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.modal-body {
    overflow-y: scroll;
    padding: 1.25rem 1rem 1.25rem 1.5rem;
    flex: 1;
    min-height: 0; /* without this flex won't shrink below content — no scroll */
    /* themed scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #2A2E5A #080A14;
}
.modal-body::-webkit-scrollbar        { width: 6px; }
.modal-body::-webkit-scrollbar-track  { background: #080A14; }
.modal-body::-webkit-scrollbar-thumb  { background: #2A2E5A; border-radius: 3px; }
.modal-body::-webkit-scrollbar-thumb:hover { background: #4F46E5; }
.modal-footer {
    padding: 0.875rem 1.5rem;
    border-top: 1px solid var(--color-border);
    background: var(--bg-modal-chrome);
    border-radius: 0 0 1rem 1rem;
    flex-shrink: 0;
}
.modal-close-btn {
    width: 2rem; height: 2rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0.5rem;
    color: #475569;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.modal-close-btn:hover { color: #f1f5f9; background: rgba(255,255,255,0.07); }

/* ── Form Sections (in modals) ───────────────────────────────── */
.crm-form-section {
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--color-border);
}
.crm-form-section-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #334155;
    margin-bottom: 0.875rem;
}
.crm-form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: #94A3B8;
    margin-bottom: 0.375rem;
}
.crm-form-label .req { color: #F43F5E; margin-left: 0.125rem; }
.crm-form-helper {
    font-size: 0.6875rem;
    color: var(--color-text-dim);
    margin-top: 0.375rem;
}

/* ── Error alert in modal ────────────────────────────────────── */
.crm-form-error {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    background: #1a0a0a;
    border: 1px solid rgba(244,63,94,0.25);
    border-radius: 0.625rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    color: #F87171;
}

/* ── Channel lookup status ───────────────────────────────────── */
.ch-lookup-status{display:flex;align-items:flex-start;gap:.5rem;margin-top:.375rem;padding:.5rem .75rem;border-radius:.5rem;font-size:.75rem;line-height:1.4;}
.ch-lookup-loading{background:#0B0E1F;color:#94A3B8;}
.ch-lookup-ok{background:#071410;border:1px solid #10B98128;color:#94A3B8;}
.ch-lookup-manual{background:#140E00;border:1px solid #F59E0B28;color:#94A3B8;}
html.light .ch-lookup-loading{background:#F1F5F9;color:#475569;}
html.light .ch-lookup-ok{background:#F0FDF4;border-color:#10B98140;}
html.light .ch-lookup-manual{background:#FFFBEB;border-color:#F59E0B40;}

/* ── Clickable channel block ─────────────────────────────────── */
a.crm-ch-link { text-decoration: none; border-radius: .375rem; transition: opacity .15s; }
a.crm-ch-link:hover { opacity: .75; }

/* ── Delete preview in modal ─────────────────────────────────── */
.crm-delete-preview {
    background: rgba(244,63,94,0.05);
    border: 1px solid rgba(244,63,94,0.18);
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
}

/* ── Empty State ─────────────────────────────────────────────── */
.crm-empty {
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: 0.875rem;
    padding: 3.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.crm-empty-icon {
    width: 3rem; height: 3rem;
    background: #111329;
    border-radius: 0.75rem;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
}
.crm-empty-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.375rem;
}
.crm-empty-sub {
    font-size: 0.8125rem;
    color: var(--color-text-dim);
    margin-bottom: 1.25rem;
    max-width: 28rem;
}

/* ── Mobile Card List ────────────────────────────────────────── */
.crm-mobile-list { display: flex; flex-direction: column; gap: 0.625rem; }
.crm-mobile-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
}

/* ── Channel Mode Toggle ─────────────────────────────────────── */
.channel-toggle-btns {
    display: inline-flex;
    background: #080A14;
    border: 1px solid #1C2040;
    border-radius: 0.5rem;
    padding: 2px;
    gap: 2px;
}
.channel-toggle-btn {
    padding: 0.3125rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    color: #64748B;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    line-height: 1.4;
    background: transparent;
    border: none;
}
.channel-toggle-btn.active {
    background: #1E2348;
    color: #f1f5f9;
    font-weight: 600;
}
.channel-section-disabled {
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
}

/* ── Info Tooltip (i) ────────────────────────────────────────── */
.channel-tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.channel-tooltip-icon {
    width: 1.125rem;
    height: 1.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #2A2E5A;
    font-size: 0.625rem;
    font-style: italic;
    font-weight: 700;
    color: #475569;
    cursor: default;
    user-select: none;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s;
}
.channel-tooltip-wrap:hover .channel-tooltip-icon {
    color: #818CF8;
    border-color: #6366F1;
}
.channel-tooltip-box {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    right: 0;
    top: calc(100% + 0.375rem);
    width: 210px;
    background: #111329;
    border: 1px solid #2A2E5A;
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.6875rem;
    color: #94A3B8;
    line-height: 1.55;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    transition: opacity 0.15s;
    pointer-events: none;
    font-style: normal;
    font-weight: 400;
}
.channel-tooltip-wrap:hover .channel-tooltip-box {
    visibility: visible;
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   Theme Toggle Button
══════════════════════════════════════════════════════════════ */
.theme-track {
    width: 2.75rem; height: 1.375rem;
    background: #1C2040;
    border-radius: 9999px; border: none;
    position: relative; cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0; padding: 0; line-height: 0; display: block;
}
html.light .theme-track { background: #4F46E5; }
.theme-thumb {
    position: absolute;
    width: 1rem; height: 1rem;
    background: #475569;
    border-radius: 50%;
    top: 0.1875rem; left: 0.1875rem;
    transition: transform 0.3s, background 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    pointer-events: none;
}
html.light .theme-thumb { transform: translateX(1.375rem); background: #FFFFFF; }
.theme-label { font-size: .6875rem; font-weight: 500; color: var(--color-text-muted); }
.theme-lbl-dark { display: inline; }
.theme-lbl-light { display: none; }
html.light .theme-lbl-dark { display: none; }
html.light .theme-lbl-light { display: inline; }

/* ══════════════════════════════════════════════════════════════
   Light Theme — Component Overrides
══════════════════════════════════════════════════════════════ */

/* Sidebar nav items */
html.light aside nav a,
html.light aside nav button { color: var(--sidebar-item-inactive-color) !important; }
html.light aside nav a:hover,
html.light aside nav button:hover { color: #0F172A !important; background: var(--sidebar-item-hover-bg) !important; }
html.light aside nav a[class*="text-white"] { color: var(--sidebar-item-active-color) !important; }
html.light aside .crm-btn-icon { color: #94A3B8 !important; }
html.light aside .crm-btn-icon:hover { color: #0F172A !important; background: rgba(0,0,0,0.06) !important; }

/* Sidebar user section */
html.light aside a.text-slate-400 { color: #64748B !important; }
html.light aside a.hover\:text-rose-400:hover { color: #F43F5E !important; background: rgba(244,63,94,0.06) !important; }

/* Buttons */
html.light .crm-btn-ghost { color: #475569; border-color: #E2E8F0; }
html.light .crm-btn-ghost:hover { color: #0F172A; background: rgba(0,0,0,0.04); border-color: #CBD5E1; }

/* Table */
html.light .crm-table thead th { color: #64748B; }
html.light .crm-table tbody tr:not(.detail-row):hover { background: rgba(0,0,0,0.02); }

/* Badges */
html.light .crm-badge-sale     { background: #D1FAE5; color: #065F46; }
html.light .crm-badge-purchase { background: #FEE2E2; color: #991B1B; }
html.light .crm-badge-paid     { background: #D1FAE5; color: #065F46; }
html.light .crm-badge-unpaid   { background: #FEE2E2; color: #991B1B; }
html.light .crm-badge-telegram { background: #E0F2FE; color: #0369A1; }
html.light .crm-badge-max      { background: #EDE9FE; color: #6D28D9; }
html.light .crm-badge-neutral  { background: #F1F5F9; color: #64748B; }
html.light .crm-badge-periodicity { background: #F1F5F9; color: #475569; }

/* Form sections */
html.light .crm-form-section-title { color: #94A3B8; }
html.light .crm-form-label { color: #374151; }
html.light .crm-form-helper { color: #94A3B8; }
html.light .crm-form-error { background: #FFF1F2; }

/* Modal close button */
html.light .modal-close-btn { color: #94A3B8; }
html.light .modal-close-btn:hover { color: #0F172A; background: rgba(0,0,0,0.06); }

/* Scrollbar in modal */
html.light .modal-body {
    scrollbar-color: #CBD5E1 #F8FAFC;
}
html.light .modal-body::-webkit-scrollbar-track { background: #F8FAFC; }
html.light .modal-body::-webkit-scrollbar-thumb { background: #CBD5E1; }
html.light .modal-body::-webkit-scrollbar-thumb:hover { background: #6366F1; }

/* Empty state */
html.light .crm-empty-icon { background: #F1F5F9; }
html.light .crm-metric-card { background: linear-gradient(150deg,#FFFFFF 0%,#F8FAFC 100%); }

/* Toolbar, channel toggle */
html.light .crm-toolbar { background: var(--color-surface); }
html.light .channel-toggle-btns { background: #F1F5F9; border-color: #E2E8F0; }
html.light .channel-toggle-btn { color: #64748B; }
html.light .channel-toggle-btn.active { background: #E2E8F0; color: #0F172A; }

/* History/icon buttons in table */
html.light .crm-btn-icon,
html.light .crm-history-btn { color: #94A3B8; }
html.light .crm-btn-icon:hover { color: #334155; background: rgba(0,0,0,0.05); }
html.light .crm-history-btn:hover { color: #334155; background: rgba(0,0,0,0.05); }
html.light .crm-btn-icon.danger:hover { color: #EF4444; background: rgba(239,68,68,0.07); }

/* Page header text on light */
html.light .crm-page-title { color: #0F172A; }
html.light .crm-page-sub { color: #64748B; }

/* ── Tailwind utility overrides for light theme ─────────────── */
html.light .text-white { color: #0F172A !important; }
/* Keep white text on colored backgrounds (buttons, badges) */
html.light [class*="bg-indigo-"].text-white,
html.light [class*="bg-emerald-"].text-white,
html.light [class*="bg-rose-"].text-white,
html.light [class*="bg-violet-"].text-white,
html.light [class*="bg-teal-"].text-white { color: #FFFFFF !important; }
html.light .text-slate-400 { color: #64748B !important; }
html.light .text-slate-500 { color: #94A3B8 !important; }
html.light .text-slate-600 { color: #94A3B8 !important; }
html.light .text-emerald-400 { color: #059669 !important; }
html.light .text-rose-400 { color: #E11D48 !important; }
html.light .text-indigo-400 { color: #4338CA !important; }
html.light .text-indigo-300:hover { color: #4338CA !important; }
/* Keep active sidebar nav item indigo, not #0F172A */
html.light aside nav a.text-white,
html.light aside nav button.text-white { color: var(--sidebar-item-active-color) !important; }

/* Dashboard table row hover (overrides rgba(255,255,255,0.03) set by JS) */
html.light #tbl-platforms tbody tr:hover,
html.light #tbl-channels tbody tr:hover { background: rgba(0,0,0,0.025) !important; }

/* Dashboard "Нет данных" placeholder text */
html.light [style*="color:#334155"] { color: #64748B; }

/* Donut chart legend text swap */
html.light .legend-row-val { color: #334155 !important; }

/* Pay toggle buttons on light */
html.light .pay-toggle-btn { background: #F1F5F9; border-color: #E2E8F0; color: #64748B; }
html.light .pay-toggle-btn.active-paid { background: #D1FAE5; border-color: #6EE7B7; color: #065F46; }
html.light .pay-toggle-btn.active-post { background: #FEF3C7; border-color: #FCD34D; color: #92400E; }

/* Channel card on light */
html.light .ch-card { background: #F8FAFC; border-color: #E2E8F0; }
html.light .ch-pair-btn { background: #F8FAFC; border-color: #E2E8F0; color: #334155; }
html.light .ch-pair-btn.filled { background: #EEF2FF; border-color: #C7D2FE; }
html.light .ch-card-del { color: #94A3B8; }
html.light .ch-card-del:hover { color: #E11D48; }

/* Sort buttons in dashboard tables */
html.light .sort-btn { color: #94A3B8; }
html.light .dpager-btn { border-color: #E2E8F0; color: #64748B; }
html.light .dpager-btn:hover:not([disabled]) { background: rgba(0,0,0,0.04); color: #0F172A; border-color: #CBD5E1; }

/* ══════════════════════════════════════════════════════════════
   Compact sidebar for short screens (≤ 800px height, e.g. 1366×768)
   Reduces nav item padding, nav area padding, and bottom section padding
   so all items fit without a vertical scrollbar.
══════════════════════════════════════════════════════════════ */
@media (max-height: 800px) {
    /* Nav item vertical padding: 10px → 4px each side */
    #sidebar nav > a,
    #sidebar nav > button {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
    /* Nav area outer padding: 16px → 8px each side */
    #sidebar nav {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    /* Bottom panel (theme/user/logout) outer padding: 16px → 10px each side */
    #sidebar > div:last-child {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }
}