/* Theme modes: dark (default) + light — shared tokens for the whole panel */

:root,
[data-theme="dark"] {
    color-scheme: dark;

    --bg-0: #0f1218;
    --bg-1: #141821;
    --bg-2: #1a2030;
    --surface: #161b26;
    --surface-raised: #1c2330;
    --glass: #171d28;
    --glass-strong: #1e2634;
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-strong: rgba(255, 255, 255, 0.14);

    --text: #e8ecf3;
    --text-soft: #a7b0bf;
    --muted: #7b8494;
    --muted-strong: #c5ccd8;

    --cyan: #5ec4b6;
    --cyan-strong: #3aafa0;
    --lime: #5ecf8a;
    --rose: #e87272;
    --amber: #e0b04a;

    --hover-fill: rgba(255, 255, 255, 0.04);
    --hover-fill-strong: rgba(255, 255, 255, 0.07);
    --control-fill: rgba(255, 255, 255, 0.03);

    --sidebar-w: 248px;
    --radius: 10px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --control-h: 2.35rem;

    --font-display: "Vazirmatn", Tahoma, sans-serif;
    --font-sans: "Vazirmatn", Tahoma, sans-serif;
    --font-mono: "Vazirmatn", Tahoma, sans-serif;

    --bs-body-bg: var(--bg-0);
    --bs-body-color: var(--text);
    --surface-elevated: var(--surface-raised);
    --surface-muted: rgba(255, 255, 255, 0.045);
    --surface-subtle: rgba(255, 255, 255, 0.03);
    --border-color: var(--glass-border);
    --border-strong: var(--glass-border-strong);
    --input-border: rgba(255, 255, 255, 0.12);
    --input-bg: rgba(0, 0, 0, 0.32);
    --accent: var(--cyan-strong);
    --accent-hover: #2f9a8c;
    --accent-soft: rgba(58, 175, 160, 0.14);
    --accent-muted: rgba(58, 175, 160, 0.09);
    --chart-primary: var(--cyan);
    --danger: var(--rose);
    --danger-hover: #d95c5c;
    --danger-soft: rgba(232, 114, 114, 0.14);
    --success: var(--lime);
    --success-soft: rgba(94, 207, 138, 0.14);
    --warning: var(--amber);
    --warning-soft: rgba(224, 176, 74, 0.14);
    --table-header-bg: rgba(255, 255, 255, 0.035);
    --table-stripe: rgba(255, 255, 255, 0.018);
    --overlay: rgba(6, 8, 12, 0.7);
    --shadow-xs: none;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.4);
    --card-shadow: none;
    --focus-ring: 0 0 0 3px rgba(58, 175, 160, 0.28);
    --transition-fast: 140ms ease;

    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23a7b0bf' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

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

    --bg-0: #f3f5f8;
    --bg-1: #ffffff;
    --bg-2: #eef1f5;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --glass: #ffffff;
    --glass-strong: #f8fafc;
    --glass-border: rgba(15, 23, 42, 0.08);
    --glass-border-strong: rgba(15, 23, 42, 0.14);

    --text: #152033;
    --text-soft: #4b5568;
    --muted: #6b7280;
    --muted-strong: #374151;

    --cyan: #0f9f8f;
    --cyan-strong: #0d8a7c;
    --lime: #159a5a;
    --rose: #dc4b4b;
    --amber: #c6861a;

    --hover-fill: rgba(15, 23, 42, 0.04);
    --hover-fill-strong: rgba(15, 23, 42, 0.07);
    --control-fill: rgba(15, 23, 42, 0.03);

    --bs-body-bg: var(--bg-0);
    --bs-body-color: var(--text);
    --surface-elevated: var(--surface-raised);
    --surface-muted: rgba(15, 23, 42, 0.04);
    --surface-subtle: rgba(15, 23, 42, 0.025);
    --border-color: var(--glass-border);
    --border-strong: var(--glass-border-strong);
    --input-border: rgba(15, 23, 42, 0.14);
    --input-bg: #ffffff;
    --accent: var(--cyan-strong);
    --accent-hover: #0b7368;
    --accent-soft: rgba(13, 138, 124, 0.12);
    --accent-muted: rgba(13, 138, 124, 0.08);
    --chart-primary: var(--cyan);
    --danger: var(--rose);
    --danger-hover: #c53d3d;
    --danger-soft: rgba(220, 75, 75, 0.12);
    --success: var(--lime);
    --success-soft: rgba(21, 154, 90, 0.12);
    --warning: var(--amber);
    --warning-soft: rgba(198, 134, 26, 0.12);
    --table-header-bg: rgba(15, 23, 42, 0.03);
    --table-stripe: rgba(15, 23, 42, 0.02);
    --overlay: rgba(15, 23, 42, 0.4);
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.1);
    --card-shadow: var(--shadow-sm);
    --focus-ring: 0 0 0 3px rgba(13, 138, 124, 0.22);

    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Unified controls: selects / inputs look the same everywhere */
.panel-body select,
.panel-body .field select,
.panel-body .field-block select,
.panel-body .s-row select,
.panel-body .create-field select,
.panel-body .inline-form select,
.panel-body .stack select,
.panel-body .form-card select,
.panel-body .dash-select select,
.panel-body .settings-card select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-height: var(--control-h);
    height: var(--control-h);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background-color: var(--input-bg);
    background-image: var(--select-chevron);
    background-repeat: no-repeat;
    background-position: left 0.75rem center;
    background-size: 0.75rem;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    padding: 0 0.85rem;
    padding-left: 2rem;
    outline: none;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.panel-body select:hover {
    border-color: var(--glass-border-strong);
}

.panel-body select:focus {
    border-color: rgba(58, 175, 160, 0.5);
    box-shadow: var(--focus-ring);
}

[data-theme="light"] .panel-body select:focus {
    border-color: rgba(13, 138, 124, 0.55);
}

.panel-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
.panel-body textarea,
.panel-body button,
.panel-body .btn {
    font-family: var(--font-sans);
}

.panel-body,
.panel-body * {
    font-family: inherit;
}

.panel-body code,
.panel-body pre,
.panel-body .chip--mono,
.panel-body .dash-app-card__pkg,
.panel-body [dir="ltr"].mono {
    font-family: var(--font-sans);
}

/* Theme toggle */
.shell-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: var(--control-h);
    min-width: var(--control-h);
    padding: 0 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: var(--control-fill);
    color: var(--text-soft);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 650;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.shell-theme-toggle:hover {
    background: var(--hover-fill-strong);
    color: var(--text);
    border-color: var(--glass-border-strong);
}

.shell-theme-toggle svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Dark: show sun + «روز» (switch to light). Light: show moon + «شب». */
[data-theme="dark"] .shell-theme-toggle [data-theme-icon-moon],
[data-theme="dark"] .shell-theme-toggle [data-theme-label-night],
:root:not([data-theme="light"]) .shell-theme-toggle [data-theme-icon-moon],
:root:not([data-theme="light"]) .shell-theme-toggle [data-theme-label-night] {
    display: none;
}

[data-theme="light"] .shell-theme-toggle [data-theme-icon-sun],
[data-theme="light"] .shell-theme-toggle [data-theme-label-day] {
    display: none;
}

/* Light-mode soft surfaces for cards that used dark glass */
[data-theme="light"] .glass,
[data-theme="light"] .dash-chart-card,
[data-theme="light"] .dash-apps,
[data-theme="light"] .dash-kpi,
[data-theme="light"] .dash-app-card,
[data-theme="light"] .ea-panel,
[data-theme="light"] .entity-item,
[data-theme="light"] .settings-card {
    background: var(--surface-raised);
    box-shadow: var(--card-shadow);
}

[data-theme="light"] .shell-sidebar {
    background: var(--bg-1);
    box-shadow: 1px 0 0 var(--glass-border);
}

[data-theme="light"] .shell-nav a:hover {
    background: var(--hover-fill);
}

[data-theme="light"] .shell-nav a.is-active {
    background: var(--accent-muted);
    border-color: rgba(13, 138, 124, 0.2);
}

[data-theme="light"] .shell-action {
    background: var(--control-fill);
}

[data-theme="light"] .shell-action:hover {
    background: var(--hover-fill-strong);
}

[data-theme="light"] .shell-action--danger:hover {
    color: #b91c1c;
}

[data-theme="light"] .shell-nav-overlay {
    background: rgba(15, 23, 42, 0.42);
}

[data-theme="light"] .dash-chip.is-on {
    color: #0d8a7c;
    background: rgba(13, 138, 124, 0.1);
    border-color: rgba(13, 138, 124, 0.22);
}

[data-theme="light"] .dash-chip.is-off {
    color: #64748b;
    background: rgba(100, 116, 139, 0.08);
    border-color: rgba(100, 116, 139, 0.14);
}

[data-theme="light"] .dash-kpi__delta.is-up,
[data-theme="light"] .dash-link,
[data-theme="light"] .dash-app-card__rank {
    color: #0d8a7c;
}

[data-theme="light"] .dash-app-card__rank {
    background: rgba(13, 138, 124, 0.12);
}

[data-theme="light"] .dash-seg {
    background: rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .dash-seg__item.is-active span,
[data-theme="light"] .dash-seg__item:has(input:checked) span {
    background: var(--accent, #0d8a7c);
    color: #fff;
    box-shadow: 0 4px 12px rgba(13, 138, 124, 0.28);
}

/* Shared surfaces that used white-alpha glass */
[data-theme="light"] .entity-item,
[data-theme="light"] .ea-panel,
[data-theme="light"] .glass,
[data-theme="light"] .form-card,
[data-theme="light"] .card,
[data-theme="light"] .stat-card,
[data-theme="light"] .rule-card,
[data-theme="light"] .push-card,
[data-theme="light"] .settings-card,
[data-theme="light"] .create-bar,
[data-theme="light"] .apps-rail,
[data-theme="light"] .tab-panel {
    --_surface-fix: 1;
}

[data-theme="light"] .entity-item,
[data-theme="light"] .ea-panel,
[data-theme="light"] .glass,
[data-theme="light"] .form-card,
[data-theme="light"] .rule-card,
[data-theme="light"] .settings-card,
[data-theme="light"] .create-bar {
    background: var(--surface-raised);
    border-color: var(--glass-border);
    box-shadow: var(--card-shadow);
}

[data-theme="light"] table thead th {
    background: var(--table-header-bg);
}

[data-theme="light"] .alert-success {
    background: var(--success-soft);
    color: #0b5f3c;
    border-color: rgba(21, 154, 90, 0.25);
}

[data-theme="light"] .alert-error {
    background: var(--danger-soft);
    color: #9f1c1c;
    border-color: rgba(220, 75, 75, 0.25);
}

[data-theme="light"] .auth-body {
    background: var(--bg-0);
    color: var(--text);
}

[data-theme="light"] .store-fieldset,
[data-theme="light"] .empty-state {
    background: var(--surface-muted);
}

[data-theme="light"] .apps-rail,
[data-theme="light"] .apps-stage,
[data-theme="light"] .apps-list__item.is-active,
[data-theme="light"] .ea-panel,
[data-theme="light"] .push-composer,
[data-theme="light"] .media-grid .media-card {
    background: var(--surface-raised);
}

[data-theme="light"] .apps-list a:hover {
    background: var(--hover-fill);
}

[data-theme="light"] .apps-list a.is-active {
    background: var(--accent-muted);
    border-color: rgba(13, 138, 124, 0.22);
}

/* --- Light theme overrides for apps, payloads, modals, and charts --- */
[data-theme="light"] .js-mode-tabs {
    background: var(--surface-subtle);
    border-color: var(--border-color);
}

[data-theme="light"] .apps-tabs {
    background: transparent;
    border-color: transparent;
    border-bottom-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .js-mode-tab:hover {
    color: var(--text);
    background: var(--hover-fill);
}

[data-theme="light"] .apps-tab:hover {
    color: var(--text);
    background: transparent;
}

[data-theme="light"] .js-mode-tab.is-active {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: rgba(13, 138, 124, 0.22);
}

[data-theme="light"] .apps-tab.is-active {
    color: #0284c7;
    background: transparent;
    border-color: transparent;
}

[data-theme="light"] .apps-tab em {
    background: rgba(15, 23, 42, 0.08);
    color: var(--muted-strong, #475569);
}

[data-theme="light"] .apps-tab.is-active em {
    background: #0284c7;
    color: #fff;
}

[data-theme="light"] .apps-tab.is-active::after {
    background: #0284c7;
}

[data-theme="light"] .apps-tab__status.is-ok {
    color: #059669;
}

[data-theme="light"] .apps-tab__status.is-warn {
    color: #d97706;
}

[data-theme="light"] .apps-tab__status.is-error {
    color: #dc2626;
}

[data-theme="light"] .api-strip--compact {
    background: var(--surface-subtle);
    border-color: var(--border-color);
}

[data-theme="light"] .api-strip--compact code {
    color: var(--accent);
}

[data-theme="light"] .create-bar {
    background: linear-gradient(145deg, var(--accent-soft), var(--surface-subtle));
    border-color: rgba(13, 138, 124, 0.2);
}

[data-theme="light"] .banner-composer {
    background: linear-gradient(145deg, var(--accent-soft), var(--surface-subtle));
    border-color: rgba(13, 138, 124, 0.2);
}

[data-theme="light"] .entity-item__media {
    background: var(--control-fill);
    border-color: var(--border-color);
}

[data-theme="light"] .schedule-clear-btn {
    color: #64748b;
}

[data-theme="light"] .schedule-clear-btn.is-visible:hover,
[data-theme="light"] .schedule-clear-btn.is-visible:focus-visible {
    color: #fff;
    background: #dc2626;
    border-color: rgba(220, 38, 38, 0.35);
}
[data-theme="light"] .payload-status-icon--warn {
    color: #b45309;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.28);
}

[data-theme="light"] .payload-status-icon--danger {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.24);
}

[data-theme="light"] .payloads-rail__list a.is-active .payload-status-icon--warn,
[data-theme="light"] .payloads-rail__list a:hover .payload-status-icon--warn {
    color: #92400e;
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.38);
}

[data-theme="light"] .payloads-rail__list a.is-active .payload-status-icon--danger,
[data-theme="light"] .payloads-rail__list a:hover .payload-status-icon--danger {
    color: #b91c1c;
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(220, 38, 38, 0.32);
}

[data-theme="light"] .payloads-rail__list a {
    background: var(--surface-subtle);
    border-color: var(--border-color);
    color: var(--text);
}

[data-theme="light"] .payloads-rail__list a strong {
    color: var(--text);
}

[data-theme="light"] .payloads-rail__list a:hover,
[data-theme="light"] .payloads-rail__list a.is-active {
    background: var(--accent-soft);
    border-color: rgba(13, 138, 124, 0.22);
}

[data-theme="light"] .payloads-rail__list a.has-delivery-block {
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.08);
}

[data-theme="light"] .payloads-rail__list a.has-missing-workflow:not(.has-delivery-block) {
    border-color: rgba(217, 119, 6, 0.4);
    background: rgba(217, 119, 6, 0.1);
}

[data-theme="light"] .payloads-rail__list a.has-delivery-block.is-active,
[data-theme="light"] .payloads-rail__list a.has-delivery-block:hover {
    border-color: rgba(220, 38, 38, 0.55);
    background: rgba(220, 38, 38, 0.12);
}

[data-theme="light"] .payloads-rail__list a.has-missing-workflow:not(.has-delivery-block).is-active,
[data-theme="light"] .payloads-rail__list a.has-missing-workflow:not(.has-delivery-block):hover {
    border-color: rgba(217, 119, 6, 0.55);
    background: rgba(217, 119, 6, 0.14);
}

[data-theme="light"] .payloads-rail__item {
    background: var(--surface-subtle);
    border-color: var(--border-color);
    color: var(--text);
}

[data-theme="light"] .payloads-rail__item .payloads-rail__title {
    color: var(--text);
}

[data-theme="light"] .payloads-rail__item:hover,
[data-theme="light"] .payloads-rail__item.is-active {
    background: var(--accent-soft);
    border-color: rgba(13, 138, 124, 0.22);
}

[data-theme="light"] .payloads-rail__item.has-delivery-block {
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.08);
}

[data-theme="light"] .payloads-rail__item.has-missing-workflow:not(.has-delivery-block) {
    border-color: rgba(217, 119, 6, 0.4);
    background: rgba(217, 119, 6, 0.1);
}

[data-theme="light"] .payloads-rail__item.has-delivery-block.is-active,
[data-theme="light"] .payloads-rail__item.has-delivery-block:hover {
    border-color: rgba(220, 38, 38, 0.55);
    background: rgba(220, 38, 38, 0.12);
}

[data-theme="light"] .payloads-rail__item.has-missing-workflow:not(.has-delivery-block).is-active,
[data-theme="light"] .payloads-rail__item.has-missing-workflow:not(.has-delivery-block):hover {
    border-color: rgba(217, 119, 6, 0.55);
    background: rgba(217, 119, 6, 0.14);
}

[data-theme="light"] .payloads-rail__item.is-active .payload-status-icon--warn,
[data-theme="light"] .payloads-rail__item:hover .payload-status-icon--warn {
    color: #92400e;
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.38);
}

[data-theme="light"] .payloads-rail__item.is-active .payload-status-icon--danger,
[data-theme="light"] .payloads-rail__item:hover .payload-status-icon--danger {
    color: #b91c1c;
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(220, 38, 38, 0.32);
}

[data-theme="light"] .payloads-group {
    background: rgba(15, 23, 42, 0.03);
    border-color: var(--border-color);
}

[data-theme="light"] .payloads-tg-tabs {
    --tg-tabs-fade: rgba(248, 250, 252, 0.98);
    border-bottom-color: var(--border-color);
}

[data-theme="light"] .payloads-tg-tabs__arrow {
    color: #2563eb;
}

[data-theme="light"] .payloads-tg-tabs__arrow--left {
    background: linear-gradient(
        90deg,
        var(--tg-tabs-fade) 0%,
        var(--tg-tabs-fade) 64%,
        transparent 100%
    );
}

[data-theme="light"] .payloads-tg-tabs__arrow--right {
    background: linear-gradient(
        270deg,
        var(--tg-tabs-fade) 0%,
        var(--tg-tabs-fade) 64%,
        transparent 100%
    );
}

[data-theme="light"] .payloads-tg-tabs__arrow:hover,
[data-theme="light"] .payloads-tg-tabs__arrow:hover:not(:disabled) {
    color: #2563eb;
    background: linear-gradient(
        90deg,
        var(--tg-tabs-fade) 0%,
        var(--tg-tabs-fade) 64%,
        transparent 100%
    );
    box-shadow: none;
}

[data-theme="light"] .payloads-tg-tabs__arrow--right:hover,
[data-theme="light"] .payloads-tg-tabs__arrow--right:hover:not(:disabled) {
    background: linear-gradient(
        270deg,
        var(--tg-tabs-fade) 0%,
        var(--tg-tabs-fade) 64%,
        transparent 100%
    );
}

[data-theme="light"] .payloads-tg-tabs__arrow-icon {
    background: rgba(248, 250, 252, 0.98);
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .payloads-tg-tab {
    color: var(--text-soft);
}

[data-theme="light"] .payloads-tg-tab:hover,
[data-theme="light"] .payloads-tg-tab:hover:not(:disabled),
[data-theme="light"] .payloads-tg-tab.is-active:hover {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

[data-theme="light"] .payloads-tg-tab.is-active {
    color: #2563eb;
}

[data-theme="light"] .payloads-tg-tab__badge {
    background: rgba(37, 99, 235, 0.12);
    color: #1e3a8a;
}

[data-theme="light"] .payloads-tg-tab.is-active .payloads-tg-tab__badge {
    background: #2563eb;
    color: #fff;
}

[data-theme="light"] .payloads-tg-tab.is-active::after {
    background: #2563eb;
}

[data-theme="light"] .payloads-rail__search input,
[data-theme="light"] .payloads-field input,
[data-theme="light"] .payloads-field select {
    background: var(--surface-subtle);
    border-color: var(--border-color);
    color: var(--text);
}

[data-theme="light"] .payloads-rail__search input:focus,
[data-theme="light"] .payloads-field input:focus,
[data-theme="light"] .payloads-field select:focus {
    border-color: rgba(37, 99, 235, 0.45);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

[data-theme="light"] .payloads-icon-btn {
    border-color: rgba(13, 138, 124, 0.28);
    background: var(--accent-soft);
    color: var(--text);
}

[data-theme="light"] .payloads-icon-btn--ghost {
    border-color: var(--border-color);
    background: var(--surface-subtle);
    color: var(--text-soft);
}

[data-theme="light"] .payloads-icon-btn--danger {
    border-color: rgba(220, 38, 38, 0.28);
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
}

[data-theme="light"] .payloads-create-dialog {
    background: var(--surface-raised);
    color: var(--text);
    border-color: var(--border-color);
}

/* Rule summary and body */
[data-theme="light"] .rule-card__summary {
    background: var(--table-header-bg);
}

[data-theme="light"] .rule-card__body,
[data-theme="light"] .payload-rule-form__actions {
    border-top: 1px solid var(--border-color);
}

[data-theme="light"] .rule-section,
[data-theme="light"] .rule-pane,
[data-theme="light"] .ua-mutate-col {
    border-color: var(--border-color);
    background: var(--surface-subtle);
}

[data-theme="light"] .rule-combobox__menu {
    background: var(--surface-raised, #fff);
    border-color: var(--border-color);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .rule-combobox__option:hover,
[data-theme="light"] .rule-combobox__option.is-active {
    background: var(--accent-soft);
}

[data-theme="light"] .rule-combobox__option.is-picked {
    background: rgba(13, 138, 124, 0.12);
    border-color: rgba(13, 138, 124, 0.35);
    color: var(--accent);
}

[data-theme="light"] .rule-combobox__option.is-picked::before {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2L4.8 8.5L9.5 3.5' stroke='%230d8a7c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 0.7rem no-repeat,
      rgba(13, 138, 124, 0.18);
}

[data-theme="light"] .rule-combobox__option.is-picked .rule-combobox__meta {
    color: rgba(13, 138, 124, 0.7);
}

[data-theme="light"] .rule-tz-mode__card {
    border-color: var(--border-color);
    background: var(--control-fill);
}

[data-theme="light"] .rule-tz-mode input:checked + .rule-tz-mode__card {
    border-color: rgba(13, 138, 124, 0.45);
    background: var(--accent-soft);
    box-shadow: none;
}

[data-theme="light"] .rule-tz-mode input:checked + .rule-tz-mode__card em {
    color: var(--accent);
}

[data-theme="light"] .payload-device-badge {
    color: #0f766e;
    background: rgba(13, 148, 136, 0.1);
    border-color: rgba(13, 148, 136, 0.28);
}

[data-theme="light"] .payload-device-panel {
    border-color: var(--border-color);
    background: var(--control-fill, rgba(15, 23, 42, 0.02));
}

[data-theme="light"] .payload-device-panel__auto-pill,
[data-theme="light"] .payload-device-panel__auto-label {
    color: #0f766e;
    background: rgba(13, 148, 136, 0.1);
    border-color: rgba(13, 148, 136, 0.28);
}

[data-theme="light"] .payload-device-panel__chips {
    border-color: var(--border-color);
    background: rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .payload-device-chip {
    color: #0f172a;
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .payload-device-panel__divider {
    background: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .rule-chips {
    border-color: var(--border-color);
    background: var(--control-fill, rgba(15, 23, 42, 0.03));
}

[data-theme="light"] .rule-quick__btn {
    border-color: var(--border-color);
    background: var(--control-fill);
}

[data-theme="light"] .rule-select,
[data-theme="light"] .rule-combobox__search,
[data-theme="light"] .rule-quota__item input,
[data-theme="light"] .payload-rule-form .date-field,
[data-theme="light"] .rule-time {
    border-color: var(--input-border);
    background-color: var(--input-bg);
    color: var(--text);
}

[data-theme="light"] .payload-rule-form__actions {
    background: linear-gradient(180deg, transparent, var(--surface, #f8fafc) 38%);
}

[data-theme="light"] .rule-card select,
[data-theme="light"] .rule-card .field-block select,
[data-theme="light"] .rule-card .app-picker__controls select,
[data-theme="light"] .rule-select {
    border-color: var(--input-border);
    background-color: var(--input-bg);
    color: var(--text);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75L6 6.25L10.5 1.75' stroke='%234b5568' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="light"] .day-pill span {
    border-color: var(--border-color);
    background: var(--control-fill);
    color: var(--text-soft);
}

[data-theme="light"] .day-pill input:checked + span {
    border-color: rgba(13, 138, 124, 0.45);
    background: var(--accent-soft);
    color: var(--accent);
}

/* Date and Time Fields inside Rules */
[data-theme="light"] .rule-section .date-field,
[data-theme="light"] .rule-section .time-field,
[data-theme="light"] .payload-rule-form .date-field,
[data-theme="light"] .rule-time {
    background: var(--input-bg);
    border-color: var(--input-border);
}

[data-theme="light"] .rule-section .time-field__part input[type="number"],
[data-theme="light"] .rule-time input[type="number"] {
    border-color: var(--input-border) !important;
    background: transparent !important;
    color: var(--text);
}

[data-theme="light"] .rule-card select option {
    background: var(--surface-raised);
    color: var(--text);
}

/* Fieldset and Legend */
[data-theme="light"] .days-fieldset,
[data-theme="light"] .rule-fieldset {
    border-color: var(--border-color);
}

/* Choice Cards */
[data-theme="light"] .choice-card {
    border-color: var(--border-color);
    background: var(--surface-subtle);
}

[data-theme="light"] .choice-card.is-active {
    border-color: rgba(13, 138, 124, 0.45);
    background: var(--accent-soft);
}

/* Code tokens */
[data-theme="light"] code {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: rgba(13, 138, 124, 0.18);
}

/* Modal sheets */
[data-theme="light"] .panel-dialog__backdrop {
    background: rgba(15, 23, 42, 0.4);
}

[data-theme="light"] .panel-dialog__sheet {
    background: var(--surface-raised);
    border-color: var(--border-color);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .panel-dialog__sheet .muted {
    color: var(--text-soft);
}

/* Workflow editor light mode styling */
[data-theme="light"] .workflow-editor--page {
    background: var(--bg-0);
}

[data-theme="light"] .workflow-editor__toolbar {
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .wf-desc-strip {
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .wf-desc-strip__label strong {
    color: var(--text);
}

[data-theme="light"] .wf-desc-strip__input {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text);
}

[data-theme="light"] .workflow-editor__palette {
    background: var(--bg-1);
    border-inline-end: 1px solid var(--border-color);
}

[data-theme="light"] .workflow-palette-item {
    background: var(--surface-raised);
    border-color: var(--border-color);
    color: var(--text);
}

[data-theme="light"] .workflow-palette-item:hover {
    background: var(--accent-soft);
    border-color: rgba(13, 138, 124, 0.35);
}

[data-theme="light"] .workflow-palette-item__icon {
    background: var(--control-fill);
    border-color: var(--border-color);
}

[data-theme="light"] .wf-palette-settings {
    background: var(--control-fill);
    border-color: var(--border-color);
    color: var(--text-soft);
}

[data-theme="light"] .workflow-editor__canvas-wrap {
    background-color: var(--bg-2);
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(13, 138, 124, 0.05), transparent 55%),
        radial-gradient(circle at 1px 1px, rgba(15, 23, 42, 0.05) 1px, transparent 0);
}

[data-theme="light"] .wf-palette-edge-btn {
    background: var(--surface-raised);
    color: var(--text-soft);
    border-color: var(--border-color);
}

[data-theme="light"] .wf-palette-edge-btn:hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: rgba(13, 138, 124, 0.35);
}

[data-theme="light"] .workflow-node {
    background: var(--surface-raised);
    border-color: var(--border-color);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 10px 30px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .workflow-node.is-selected {
    border-color: color-mix(in srgb, var(--node-accent) 75%, rgba(15, 23, 42, 0.2));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--node-accent) 45%, transparent),
        0 12px 36px rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .workflow-node__icon {
    background: color-mix(in srgb, var(--node-accent) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--node-accent) 25%, transparent);
}

[data-theme="light"] .workflow-node__title-actions .wf-node-btn {
    border-color: var(--border-color);
    background: var(--control-fill);
}

[data-theme="light"] .workflow-node__title-actions .wf-node-btn:hover {
    background: var(--hover-fill);
}

[data-theme="light"] .workflow-node__title-actions .wf-node-btn--gear.is-custom {
    color: var(--accent);
    border-color: rgba(13, 138, 124, 0.35);
    background: var(--accent-soft);
}

[data-theme="light"] .workflow-edge-path {
    stroke: #09af9e;
}

[data-theme="light"] .workflow-edge-path.is-selected {
    stroke: var(--accent);
}

[data-theme="light"] .workflow-edge-flow {
    stroke: rgba(13, 138, 124, 0.95);
}

[data-theme="light"] .workflow-edge-label-bg {
    fill: var(--surface-raised);
    stroke: var(--border-color);
    stroke-width: 1;
}

[data-theme="light"] .workflow-edge-label {
    fill: var(--text-soft);
}

/* Datepicker + entity analytics nested controls */
.date-field,
.pnl-cal,
.pnl-cal__nav,
.pnl-cal__day,
.pnl-cal__action {
    color: var(--text);
}

/* Workflow ports / status — follow tokens in both themes */
.workflow-port {
    background: var(--surface-raised) !important;
    box-shadow:
        0 0 0 2px var(--bg-0),
        0 0 0 3px color-mix(in srgb, var(--node-accent, var(--accent)) 55%, transparent) !important;
}

.workflow-editor__status {
    background: var(--surface-subtle);
    border-top: 1px solid var(--border-color);
    color: var(--text-soft);
}

/* Payloads dialog / select options */
.panel-dialog__backdrop {
    background: var(--overlay);
}

.panel-dialog__sheet {
    background: var(--surface-raised);
    border-color: var(--border-color);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}

.rule-card select option,
.payload-rule-form select option,
.panel-dialog select option {
    background: var(--surface-raised);
    color: var(--text);
}

/* Integration guide dialog */
.ig-dialog__sheet {
    background: var(--surface-raised) !important;
    border-color: var(--border-color) !important;
    color: var(--text) !important;
}

.ig-dialog__foot {
    background: var(--surface-subtle) !important;
    border-top-color: var(--border-color) !important;
}

.ig-section,
.ig-header-card {
    background: var(--surface-subtle) !important;
    border-color: var(--border-color) !important;
}

.ig-section__title h4,
.ig-inline-example,
.ig-code {
    color: var(--text) !important;
}

.ig-inline-example,
.ig-code {
    background: var(--bg-2) !important;
    border-color: var(--border-color) !important;
}

[data-theme="light"] .ig-tok-num { color: #b45309; }
[data-theme="light"] .ig-status-table td.is-miss { color: #b91c1c; }

/* Soften remaining white-alpha glass leftovers in light mode */
[data-theme="light"] .composer-collapse,
[data-theme="light"] .media-grid .media-card,
[data-theme="light"] .push-composer,
[data-theme="light"] .empty-state {
    background: var(--surface-subtle);
    border-color: var(--border-color);
}

[data-theme="light"] code {
    color: var(--accent);
}