/* ═══════════════════════════════════════════════════════════════
   ROMPODA STATS — Appearance layer
   Portal Rompoda charcoal system + explicit system/light/dark control.
   Loaded last so third-party and legacy components share one theme.
   ═══════════════════════════════════════════════════════════════ */

html { color-scheme: light; }
html[data-theme="dark"] {
    color-scheme: dark;

    /* Keep the complete palette here as well as in tokens.css. This layer is
       cache-busted independently, so returning visitors cannot mix the new
       components with an older navy token sheet. */
    --rs-dark: #F0F1F3;
    --rs-g900: #E2E4E8;
    --rs-g800: #D2D5DB;
    --rs-g700: #C3C6CD;
    --rs-g600: #AEB2BC;
    --rs-g500: #979CA7;
    --rs-g400: #6F747E;
    --rs-g300: #454954;
    --rs-g200: #343740;
    --rs-g100: #252830;
    --rs-white: #20232A;
    --rs-on-primary: #FFFFFF;

    --rs-primary: #65A9F8;
    --rs-primary-dark: #3F95F7;
    --rs-primary-light: #8EC1FA;
    --rs-primary-soft: #173D68;
    --rs-primary-bg: #152C45;
    --rs-primary-50: #202A36;

    --rs-success: #36C98F;
    --rs-success-bg: #15382C;
    --rs-success-border: #28634F;
    --rs-error: #FF6B6B;
    --rs-error-bg: #3B2225;
    --rs-error-border: #734047;
    --rs-warning: #FFB454;
    --rs-warning-bg: #3B3020;
    --rs-warning-border: #755A2D;
    --rs-info: #65A9F8;
    --rs-info-bg: #17324F;

    --rs-bg-canvas: #17191E;
    --rs-bg-surface: #20232A;
    --rs-bg-sidebar: #1C1F25;
    --rs-bg-sidebar-hover: #272A32;
    --rs-bg-overlay: rgba(10, 11, 14, .72);
    --rs-border: #343740;
    --rs-border-soft: #2B2E37;
    --rs-border-strong: #454954;
    --rs-border-focus: #65A9F8;

    --rs-gradient-blue: linear-gradient(135deg, #173D68 0%, #202A36 100%);
    --rs-gradient-card: linear-gradient(180deg, #20232A 0%, #1D2026 100%);
    --rs-gradient-soft: linear-gradient(135deg, #202A36 0%, #20232A 100%);
    --rs-shadow-xs: 0 1px 2px rgba(0, 0, 0, .18);
    --rs-shadow-sm: 0 2px 5px rgba(0, 0, 0, .2);
    --rs-shadow-md: 0 6px 14px rgba(0, 0, 0, .24);
    --rs-shadow-lg: 0 14px 30px rgba(0, 0, 0, .28);
    --rs-shadow-xl: 0 22px 48px rgba(0, 0, 0, .34);
    --rs-shadow-focus: 0 0 0 3px rgba(101, 169, 248, .22);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .rs-app,
html[data-theme="dark"] .rs-main { background: var(--rs-bg-canvas); }

html[data-theme="dark"] :is(button, input, textarea, select) { color-scheme: dark; }
html[data-theme="dark"] ::selection { color: var(--rs-dark); background: rgba(101, 169, 248, .28); }
html[data-theme="dark"] * { scrollbar-color: var(--rs-border-strong) transparent; }

/* Topbar, search and global date selector */
html[data-theme="dark"] .rs-main__header {
    background: rgba(28, 31, 37, .96);
    border-color: var(--rs-border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .018);
}
html[data-theme="dark"] .rs-topbar__search {
    background: #1B1E24;
    border-color: var(--rs-border);
    color: var(--rs-g600);
}
html[data-theme="dark"] .rs-topbar__search:hover,
html[data-theme="dark"] .rs-topbar__search:focus-within { background: var(--rs-bg-surface); border-color: var(--rs-border-strong); }
html[data-theme="dark"] .rs-topbar__search-kbd { background: var(--rs-bg-sidebar-hover); border-color: var(--rs-border); }
html[data-theme="dark"] .rs-topbar__notification-dot { border-color: var(--rs-bg-sidebar); }
html[data-theme="dark"] .rs-topbar__avatar { color: var(--rs-on-primary); border-color: var(--rs-bg-sidebar); }

html[data-theme="dark"] .rs-datepill {
    background: #1B1E24;
    border-color: var(--rs-border-strong);
    color: var(--rs-g700);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}
html[data-theme="dark"] .rs-datepill:hover { background: var(--rs-bg-surface); border-color: var(--rs-primary); color: var(--rs-dark); }
html[data-theme="dark"] .rs-datepill.is-filtered { background: #17324F; border-color: #3E72A5; color: #8EC1FA; }
html[data-theme="dark"] .rs-dp { background: var(--rs-bg-surface); border-color: var(--rs-border-strong); box-shadow: var(--rs-shadow-xl); }
html[data-theme="dark"] .rs-dp-presets { background: #1C1F25; border-color: var(--rs-border); }
html[data-theme="dark"] .rs-dp-preset:hover { background: var(--rs-bg-sidebar-hover); }
html[data-theme="dark"] .rs-dp-preset.is-active,
html[data-theme="dark"] .rs-dp-day:hover,
html[data-theme="dark"] .rs-dp-day.in-range { background: #173D68; color: #B9DAFF; }
html[data-theme="dark"] .rs-dp-day.is-edge { background: var(--rs-primary-dark); color: var(--rs-on-primary); }

/* Surfaces, forms, menus and tables */
html[data-theme="dark"] :is(.rs-card, .rs-table-wrap, .rs-filter-bar, .rs-modal, .rs-export-menu, .rs-notif-sidebar__panel, .rs-ss__pop, .rs-cmdk__panel) {
    background: var(--rs-bg-surface);
    border-color: var(--rs-border);
}
html[data-theme="dark"] .rs-card { box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 8px 22px rgba(0,0,0,.12); }
html[data-theme="dark"] .rs-card:hover { border-color: var(--rs-border-strong); }
html[data-theme="dark"] :is(.rs-input, .rs-filter-search, .rs-filter-select, .rs-ss__btn, input, textarea, select)[class] {
    background-color: #1B1E24;
    border-color: var(--rs-border-strong);
    color: var(--rs-dark);
}
html[data-theme="dark"] :is(.rs-input, .rs-filter-search, .rs-filter-select, .rs-ss__btn):hover { border-color: #5B606C; }
html[data-theme="dark"] :is(.rs-input, .rs-filter-search, .rs-filter-select):focus { border-color: var(--rs-primary); box-shadow: var(--rs-shadow-focus); }
html[data-theme="dark"] .rs-table thead th { background: #1C1F25; color: var(--rs-g600); border-color: var(--rs-border); }
html[data-theme="dark"] .rs-table tbody td { border-color: var(--rs-border-soft); }
html[data-theme="dark"] .rs-table tbody tr:hover { background: #252830; }
html[data-theme="dark"] .rs-table__pagination { background: #1C1F25; border-color: var(--rs-border); }
html[data-theme="dark"] .rs-export-option:hover,
html[data-theme="dark"] .rs-ss__opt:hover { background: var(--rs-bg-sidebar-hover) !important; }
html[data-theme="dark"] .rs-ss__opt.is-sel { background: #173D68; color: #B9DAFF; }

html[data-theme="dark"] .rs-btn--primary,
html[data-theme="dark"] .rs-agent-header-btn--primary { color: var(--rs-on-primary); }
html[data-theme="dark"] .rs-btn--ghost { background: var(--rs-bg-surface); border-color: var(--rs-border-strong); color: var(--rs-g800); }
html[data-theme="dark"] .rs-btn--ghost:hover { background: var(--rs-bg-sidebar-hover); border-color: #5B606C; }

html[data-theme="dark"] .rs-badge--success { color: #7AE0B7; }
html[data-theme="dark"] .rs-badge--warning { color: #FFD18B; }
html[data-theme="dark"] .rs-badge--error { color: #FF9B9B; }
html[data-theme="dark"] .rs-badge--info { color: #9CCBFF; }
html[data-theme="dark"] .rs-badge--accent { background: #3A2A1C; color: #FFB86B; }

/* Sidebar: restrained active rail and hard containment when collapsed. */
html[data-theme="dark"] .rs-sidebar { background: var(--rs-bg-sidebar); border-color: var(--rs-border); }
html[data-theme="dark"] .rs-sidebar__item:hover { background: var(--rs-bg-sidebar-hover); }
html[data-theme="dark"] .rs-sidebar__item.is-active { background: #17324F; color: #8EC1FA; }
.rs-app.is-collapsed .rs-sidebar__logo-text,
.rs-app.is-collapsed .rs-sidebar__logo-suffix { display: none !important; }
.rs-app.is-collapsed .rs-sidebar__brand { min-width: 0; }
.rs-app.is-collapsed .rs-sidebar__logo { width: 32px; min-width: 0; max-width: 32px; overflow: hidden; gap: 0; }
.rs-app.is-collapsed .rs-sidebar__logo-mark { flex: 0 0 28px; }

/* Settings: real three-way appearance choice. */
.rs-setting-row--theme { align-items: center; gap: 24px; }
.rs-theme-control {
    display: inline-grid;
    grid-template-columns: repeat(3, minmax(76px, 1fr));
    gap: 3px;
    padding: 4px;
    border: 1px solid var(--rs-border);
    border-radius: 11px;
    background: var(--rs-g100);
}
.rs-theme-control__option {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--rs-g600);
    font: 650 12px/1 var(--rs-font-sans);
    cursor: pointer;
}
.rs-theme-control__option:hover { color: var(--rs-dark); background: var(--rs-bg-surface); }
.rs-theme-control__option.is-active {
    color: var(--rs-dark);
    background: var(--rs-bg-surface);
    border-color: var(--rs-border-strong);
    box-shadow: var(--rs-shadow-sm);
}
.rs-theme-control__option:focus-visible { outline: 2px solid var(--rs-border-focus); outline-offset: 2px; }
html[data-theme="dark"] .rs-settings-block:hover { background: #252830; }
html[data-theme="dark"] .rs-settings-block [style*="background:#FFF7ED"] { background: #3A2A1C !important; }
html[data-theme="dark"] .rs-settings-block [style*="background:#ECFDF5"] { background: #15382C !important; }
html[data-theme="dark"] .rs-settings-block [style*="background:#FEF2F2"] { background: #3B2225 !important; }
html[data-theme="dark"] .rs-settings-block [style*="background:#F5F3FF"] { background: #302947 !important; }

/* Login follows the same preference before authentication. */
html[data-theme="dark"] {
    --rp-dark: #F0F1F3;
    --rp-g700: #D2D5DB;
    --rp-g500: #979CA7;
    --rp-g400: #6F747E;
    --rp-g300: #454954;
    --rp-g200: #343740;
    --rp-g100: #252830;
    --rp-g50: #20232A;
}
html[data-theme="dark"] body.rp-login-body,
html[data-theme="dark"] .rp-login-form-side,
html[data-theme="dark"] .rp-login-gradient-side { background: var(--rs-bg-canvas); color: var(--rp-dark); }
html[data-theme="dark"] .rp-login-input {
    background: #20232A;
    border-color: #454954;
    color: var(--rp-dark);
}
html[data-theme="dark"] .rp-login-input:focus { background: #252830; border-color: #65A9F8; box-shadow: var(--rs-shadow-focus); }
html[data-theme="dark"] .rp-login-alert { background: var(--rs-error-bg); border-color: var(--rs-error-border); color: #FF9B9B; }

/* Agent: one coherent dark surface instead of a light application nested inside dark UI. */
html[data-theme="dark"] {
    --agent-ink: #F0F1F3;
    --agent-panel: #20232A;
    --agent-panel-2: #292C34;
    --agent-line: #343740;
    --agent-line-strong: #454954;
    --agent-text: #D2D5DB;
    --agent-muted: #979CA7;
    --agent-blue: #65A9F8;
    --agent-blue-soft: #17324F;
    --agent-focus: rgba(101, 169, 248, .22);
    --agent-paper: #20232A;
}
html[data-theme="dark"] .rs-agent-launcher {
    background: #252830;
    color: var(--agent-ink);
    border-color: #555A65;
    box-shadow: 0 10px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="dark"] .rs-agent-launcher:hover { background: #2B2E37; border-color: #6B717D; box-shadow: 0 14px 34px rgba(0,0,0,.4); }
html[data-theme="dark"] .rs-agent-launcher__dot { border-color: #252830; }
html[data-theme="dark"] .rs-agent-backdrop { background: rgba(5, 6, 8, .45); }
html[data-theme="dark"] :is(.rs-agent-shell, .rs-agent-head, .rs-agent-drawer-bar, .rs-agent-action, .rs-agent-input-wrap, .rs-agent-model-menu, .rs-agent-conversation, .rs-agent-conversation__icon, .rs-agent-history-more, .rs-agent-history-all, .rs-agent-history-page, .rs-agent-table-wrap) {
    background: var(--agent-panel);
    border-color: var(--agent-line);
    color: var(--agent-text);
}
html[data-theme="dark"] .rs-agent-shell { box-shadow: 0 16px 42px rgba(0,0,0,.24); }
html[data-theme="dark"] .rs-agent-home .rs-agent-shell { border-color: var(--rs-border-strong); box-shadow: 0 1px 0 rgba(255,255,255,.025), 0 14px 34px rgba(0,0,0,.17); }
html[data-theme="dark"] .rs-agent-home .rs-agent-head { background: #22252C; }
html[data-theme="dark"] .rs-agent-home .rs-agent-mark { background: #17324F; border-color: #31587D; color: #8EC1FA; }
html[data-theme="dark"] .rs-agent-header-btn { background: #252830; border-color: var(--agent-line-strong); color: var(--agent-text); }
html[data-theme="dark"] .rs-agent-header-btn:hover { background: #2B2E37; color: var(--agent-ink); }
html[data-theme="dark"] .rs-agent-header-btn--primary { background: #2377D5; border-color: #3F95F7; color: var(--rs-on-primary); }
html[data-theme="dark"] .rs-agent-header-btn--primary:hover { background: #2B83E2; color: var(--rs-on-primary); }
html[data-theme="dark"] .rs-agent-action { background: #252830; border-color: var(--agent-line); }
html[data-theme="dark"] .rs-agent-action:hover,
html[data-theme="dark"] .rs-agent-home .rs-agent-action:hover { background: #2B2E37; border-color: #557798; }
html[data-theme="dark"] .rs-agent-action__key { background: #1C1F25; color: var(--agent-muted); }
html[data-theme="dark"] .rs-agent-suggestion { background: #252830; border-color: var(--agent-line); color: var(--agent-text); }
html[data-theme="dark"] .rs-agent-suggestion:hover { background: #17324F; border-color: #3E72A5; color: #B9DAFF; }
html[data-theme="dark"] .rs-agent-input-wrap { background: #1B1E24; border-color: #4B505B; box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 7px 22px rgba(0,0,0,.18); }
html[data-theme="dark"] .rs-agent-input-wrap:focus-within { border-color: var(--agent-blue); box-shadow: 0 0 0 3px var(--agent-focus); }
html[data-theme="dark"] .rs-agent-input { color: var(--agent-ink); }
html[data-theme="dark"] .rs-agent-input::placeholder { color: #7E838E; }
html[data-theme="dark"] .rs-agent-provider-icon { color: var(--agent-ink); }
html[data-theme="dark"] .rs-agent-new { background: #2377D5; border-color: #3F95F7; color: var(--rs-on-primary); }
html[data-theme="dark"] .rs-agent-new:hover { background: #2B83E2; border-color: #65A9F8; }
html[data-theme="dark"] .rs-agent-conversation:hover { background: #292C34; }
html[data-theme="dark"] .rs-agent-conversation.is-active { background: #17324F; border-color: #3E72A5; }
html[data-theme="dark"] .rs-agent-code { background: #14161B; border-color: #3B3F49; color: #EEF1F5; }
html[data-theme="dark"] .rs-agent-model-badge { background: #2B2E37; border-color: #454954; color: #B7BBC4; }
html[data-theme="dark"] .rs-agent-message--user .rs-agent-message__avatar,
html[data-theme="dark"] .rs-agent-message--user .rs-agent-bubble,
html[data-theme="dark"] .rs-agent-bubble code { background: #2B2E37; border-color: var(--agent-line-strong); }
html[data-theme="dark"] .rs-agent-bubble code { color: #F4A2BA; }
html[data-theme="dark"] .rs-agent-table th { background: #1C1F25; color: var(--agent-muted); }
html[data-theme="dark"] .rs-agent-table tbody tr:nth-child(even) { background: #23262D; }
html[data-theme="dark"] .rs-agent-table tbody tr:hover { background: #292D35; }
html[data-theme="dark"] .rs-agent-product-thumb { background: #fff; }
html[data-theme="dark"] .rs-agent-checklist__box { background: #1B1E24; color: var(--rs-on-primary); border-color: var(--agent-line-strong); }
html[data-theme="dark"] .rs-agent-send { color: var(--rs-on-primary); }

/* Inline legacy whites: scoped away from images and product thumbnails. */
html[data-theme="dark"] :is(.rs-export-menu, .rs-modal, .rs-notif-sidebar__panel)[style*="background:#fff"] { background: var(--rs-bg-surface) !important; }

@media (max-width: 720px) {
    .rs-setting-row--theme { align-items: flex-start; flex-direction: column; }
    .rs-theme-control { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
}