/* ==========================================
   Faciliter Shared Theme Tokens
   Single source of truth for application and public palette
   ========================================== */

:root {
    /* Core brand palette */
    --theme-primary: #1e40af;
    --theme-primary-hover: #1d4ed8;
    --theme-accent: #3b82f6;
    --theme-accent-soft: #06b6d4;
    --theme-secondary: #0f172a;

    /* Surfaces */
    --theme-bg: #f4f7fb;
    --theme-bg-soft: #eff6ff;
    --theme-surface: #ffffff;
    --theme-surface-muted: #f8fafc;
    --theme-surface-elevated: #eef4fb;

    /* Borders and text */
    --theme-border: #d8e1ee;
    --theme-border-strong: #bfd0ea;
    --theme-text: #0f172a;
    --theme-text-muted: #475569;
    --theme-text-soft: #64748b;
    --theme-text-faint: #94a3b8;
    --theme-text-inverse: #ffffff;

    /* Status */
    --theme-success: #16a34a;
    --theme-success-soft: rgba(22, 163, 74, 0.1);
    --theme-warning: #f59e0b;
    --theme-warning-soft: #fffbeb;
    --theme-danger: #ef4444;
    --theme-danger-strong: #dc2626;
    --theme-danger-soft: #fef2f2;
    --theme-info: var(--theme-primary);
    --theme-info-soft: rgba(30, 64, 175, 0.08);

    /* Shadows and overlays */
    --theme-shadow-soft: 0 10px 30px -20px rgba(15, 23, 42, 0.35);
    --theme-shadow-card: 0 14px 28px -24px rgba(15, 23, 42, 0.45);
    --theme-shadow-elevated: 0 20px 40px -24px rgba(15, 23, 42, 0.5);
    --theme-overlay: rgba(15, 23, 42, 0.5);

    /* Shared transition */
    --theme-transition: 0.15s ease;

    /* Tailwind token bridge */
    --color-primary-100: 239 246 255;
    --color-primary-200: 219 234 254;
    --color-primary-300: 147 197 253;
    --color-primary-400: 96 165 250;
    --color-primary-500: 59 130 246;
    --color-primary-600: 30 64 175;
    --color-primary-700: 29 78 216;
    --color-primary-800: 30 41 59;
    --color-primary-900: 15 23 42;

    /* Backward-compatible aliases */
    --primary-color: var(--theme-primary);
    --secondary-color: var(--theme-secondary);
    --portal-navy: var(--theme-secondary);
    --portal-royal: var(--theme-primary);
    --portal-blue: var(--theme-accent);
    --portal-cyan: var(--theme-accent-soft);
    --portal-bg: var(--theme-bg);
    --portal-bg-elevated: var(--theme-surface-elevated);
    --portal-border: var(--theme-border);
    --portal-border-strong: var(--theme-border-strong);
    --portal-text: var(--theme-text);
    --portal-text-muted: var(--theme-text-muted);
    --portal-shadow-soft: var(--theme-shadow-soft);
    --portal-shadow-card: var(--theme-shadow-card);
    --brand-navy: var(--theme-secondary);
    --brand-royal: var(--theme-primary);
    --accent-cyan: var(--theme-accent-soft);
    --accent-blue: var(--theme-accent);

    /* Layout overrides */
    --theme-surface-navbar: rgba(255, 255, 255, 0.9);
    --theme-content-bg: linear-gradient(180deg, rgba(30, 64, 175, 0.08) 0%, rgba(59, 130, 246, 0.04) 10%, rgba(255, 255, 255, 0.97) 24%, var(--theme-bg) 100%);
    --theme-page-surface-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
    --theme-portal-header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    --theme-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.94));
    --theme-panel-soft-bg: linear-gradient(180deg, rgba(239, 246, 255, 0.72), rgba(248, 250, 252, 0.96));
    --theme-table-head-bg: linear-gradient(180deg, rgba(239, 246, 255, 0.8), rgba(248, 250, 252, 0.95));
    --theme-table-row-hover: rgba(239, 246, 255, 0.52);
    --theme-pagination-link-bg: rgba(255, 255, 255, 0.96);
    --theme-stat-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.95));

    /* Chat overrides */
    --theme-bubble-assistant-bg: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    --theme-bubble-pending-bg: linear-gradient(180deg, rgba(239, 246, 255, 0.95), rgba(255, 255, 255, 0.98));
}

.theme-shell-body {
    background-color: var(--theme-bg);
    color: var(--theme-text-muted);
}

.theme-shell-text {
    color: var(--theme-text);
}

.theme-shell-muted {
    color: var(--theme-text-muted);
}

.theme-shell-link {
    color: var(--theme-text-soft);
    transition: color var(--theme-transition), background-color var(--theme-transition), border-color var(--theme-transition);
}

.theme-shell-link:hover {
    color: var(--theme-text);
}

.theme-shell-link-active {
    color: var(--theme-text);
    background-color: var(--theme-surface-muted);
    border-radius: 9999px;
    padding: 0.45rem 0.85rem;
    box-shadow: inset 0 0 0 1px var(--theme-border);
}

.theme-shell-hover-surface:hover {
    background-color: var(--theme-surface-muted);
}

.theme-shell-panel {
    background-color: var(--theme-surface);
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-shadow-soft);
}

.theme-shell-dropdown {
    background-color: var(--theme-surface);
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-shadow-elevated);
}

/* Prevent dropdown buttons from inheriting the global 100px min-width */
.theme-shell-dropdown button {
    min-width: 0 !important;
    padding: 0.25rem 0.5rem !important;
}

.theme-shell-avatar {
    background-color: var(--theme-surface-muted);
    color: var(--theme-text-muted);
    border: 1px solid var(--theme-border);
}

.theme-shell-language-chip {
    background-color: var(--theme-surface-muted);
    color: var(--theme-text-muted);
}

.theme-shell-dropdown-item {
    color: var(--theme-text-muted);
    transition: color var(--theme-transition), background-color var(--theme-transition);
}

.theme-shell-dropdown-item:hover {
    background-color: var(--theme-surface-muted);
    color: var(--theme-text);
}

.theme-shell-divider {
    border-color: var(--theme-border);
}

.theme-shell-subtext {
    color: var(--theme-text-faint);
}

.theme-shell-danger-link {
    color: var(--theme-danger-strong);
    transition: color var(--theme-transition), background-color var(--theme-transition);
}

.theme-shell-danger-link:hover {
    background-color: var(--theme-danger-soft);
}

.theme-shell-submenu-link {
    color: var(--theme-text-soft);
    transition: color var(--theme-transition), background-color var(--theme-transition);
}

.theme-shell-submenu-link:hover {
    color: var(--theme-primary);
    background-color: var(--theme-surface-muted);
}

.theme-shell-submenu-link-active {
    color: var(--theme-primary);
    background-color: rgba(30, 64, 175, 0.08);
    font-weight: 500;
}

.theme-shell-icon-active {
    color: var(--theme-primary);
}

.theme-shell-icon-inactive {
    color: var(--theme-text-faint);
}

.theme-shell-footer {
    background-color: var(--theme-surface);
    border-top: 1px solid var(--theme-border);
    color: var(--theme-text-faint);
}

.theme-shell-overlay {
    background-color: var(--theme-overlay);
}

.theme-shell-modal {
    background-color: var(--theme-surface);
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-shadow-elevated);
}

.theme-shell-modal-header {
    border-bottom: 1px solid var(--theme-border);
}

.theme-shell-modal-title {
    color: var(--theme-text);
}

.theme-shell-icon-accent {
    color: var(--theme-primary);
}

.theme-shell-close {
    border: 1px solid var(--theme-border);
    color: var(--theme-text-muted);
    transition: color var(--theme-transition), background-color var(--theme-transition), border-color var(--theme-transition);
}

.theme-shell-close:hover {
    color: var(--theme-text);
    background-color: var(--theme-surface-muted);
    border-color: var(--theme-border-strong);
}

.theme-shell-spinner {
    border-bottom-color: var(--theme-primary);
}

.theme-shell-toggle-icon {
    font-size: 18px;
}

.theme-shell-modal-layer {
    z-index: 99999;
}

.theme-brand-cta {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--theme-text-inverse);
    box-shadow: 0 18px 30px -22px rgba(15, 23, 42, 0.65);
    transition: transform var(--theme-transition), filter var(--theme-transition), box-shadow var(--theme-transition);
}

.theme-brand-cta:hover {
    filter: brightness(1.05);
    box-shadow: 0 20px 34px -22px rgba(15, 23, 42, 0.72);
}

.theme-public-nav {
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid var(--theme-border);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.theme-mobile-link {
    color: var(--theme-text-muted);
    transition: color var(--theme-transition), background-color var(--theme-transition);
}

.theme-mobile-link:hover {
    color: var(--theme-text);
    background-color: var(--theme-surface-muted);
}

.theme-mobile-link-active {
    color: var(--theme-text);
    background-color: var(--theme-surface-muted);
    box-shadow: inset 0 0 0 1px var(--theme-border-strong);
}

.theme-mobile-language {
    background-color: var(--theme-surface-muted);
    color: var(--theme-text-muted);
    transition: color var(--theme-transition), background-color var(--theme-transition), box-shadow var(--theme-transition);
}

.theme-mobile-language:hover {
    background-color: var(--theme-bg-soft);
}

.theme-mobile-language-active {
    box-shadow: 0 0 0 2px var(--primary-color);
}

.theme-mobile-language-chip {
    background-color: var(--theme-surface);
    color: var(--theme-text-muted);
}

.theme-mobile-outline-action {
    background-color: var(--theme-surface);
    color: var(--theme-text-muted);
    border: 1px solid var(--theme-border-strong);
    transition: color var(--theme-transition), background-color var(--theme-transition), border-color var(--theme-transition);
}

.theme-mobile-outline-action:hover {
    color: var(--theme-text);
    background-color: var(--theme-surface-muted);
    border-color: var(--theme-border-strong);
}

.theme-public-footer {
    background-color: var(--theme-secondary);
    color: rgba(255, 255, 255, 0.82);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.theme-public-footer-heading {
    color: var(--theme-text-inverse);
}

.theme-public-footer-link {
    color: inherit;
    transition: color var(--theme-transition);
}

.theme-public-footer-link:hover {
    color: var(--theme-accent-soft);
}

.theme-public-footer-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.theme-public-footer-muted {
    color: rgba(255, 255, 255, 0.64);
}

.theme-brand-gradient {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.theme-brand-primary {
    color: var(--primary-color);
}

.theme-brand-primary-bg {
    background-color: var(--primary-color);
}

.theme-brand-secondary {
    color: var(--secondary-color);
}

.theme-brand-secondary-bg {
    background-color: var(--secondary-color);
}

.theme-button-primary {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    color: var(--theme-text-inverse);
    border: 1px solid transparent;
    box-shadow: 0 12px 24px -18px rgba(30, 64, 175, 0.8);
    transition: background var(--theme-transition), box-shadow var(--theme-transition), transform var(--theme-transition);
}

.theme-button-primary:hover {
    background: linear-gradient(135deg, var(--theme-primary-hover), var(--theme-accent-soft));
    box-shadow: 0 16px 28px -18px rgba(30, 64, 175, 0.85);
}

.theme-button-secondary {
    background-color: var(--theme-surface-muted);
    color: var(--theme-text-muted);
    border: 1px solid var(--theme-border);
    transition: background-color var(--theme-transition), color var(--theme-transition), border-color var(--theme-transition);
}

.theme-button-secondary:hover {
    background-color: var(--theme-bg-soft);
    color: var(--theme-text);
    border-color: var(--theme-border-strong);
}

.theme-button-success {
    background-color: var(--theme-success);
    color: var(--theme-text-inverse);
}

.theme-button-success:hover {
    filter: brightness(1.05);
}

.theme-button-warning {
    background-color: var(--theme-warning);
    color: var(--theme-text-inverse);
}

.theme-button-warning:hover {
    filter: brightness(1.05);
}

.theme-button-danger {
    background-color: var(--theme-danger);
    color: var(--theme-text-inverse);
}

.theme-button-danger:hover {
    background-color: var(--theme-danger-strong);
}

.theme-link-muted {
    color: var(--theme-text-muted);
    transition: color var(--theme-transition), background-color var(--theme-transition);
}

.theme-link-muted:hover {
    color: var(--theme-text);
    background-color: var(--theme-surface-muted);
}

.theme-link-danger {
    color: var(--theme-danger-strong);
    transition: color var(--theme-transition), background-color var(--theme-transition);
}

.theme-link-danger:hover {
    background-color: var(--theme-danger-soft);
}

.theme-chip-disabled {
    background-color: #cbd5e1;
    color: var(--theme-text-muted);
}

.theme-empty-icon,
.theme-empty-icon svg {
    color: var(--theme-text-faint);
}

.theme-empty-title {
    color: var(--theme-text);
}

.theme-empty-message {
    color: var(--theme-text-muted);
}

.theme-filter-toggle {
    background-color: var(--theme-surface);
    border: 1px solid var(--theme-border);
    color: var(--theme-text);
    box-shadow: var(--theme-shadow-soft);
    transition: background-color var(--theme-transition), border-color var(--theme-transition), color var(--theme-transition);
}

.theme-filter-toggle:hover {
    background-color: var(--theme-surface-muted);
    border-color: var(--theme-border-strong);
}

.theme-filter-panel {
    background-color: var(--theme-surface);
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-shadow-soft);
}

.theme-filter-label {
    color: var(--theme-text-muted);
}

.theme-filter-input {
    border: 1px solid var(--theme-border-strong);
    transition: box-shadow var(--theme-transition), border-color var(--theme-transition);
}

.theme-filter-input:focus {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-600), 0.16);
}

.theme-tips-toggle {
    color: var(--theme-text-muted);
    transition: color var(--theme-transition), background-color var(--theme-transition);
}

.theme-tips-toggle:hover {
    color: var(--theme-text);
    background-color: var(--theme-surface-muted);
}

.theme-tips-toggle-active {
    background-color: var(--theme-surface-elevated);
    color: var(--theme-primary);
}

.theme-status-notice {
    border-left-width: 4px;
}

.theme-status-notice-info,
.theme-status-notice-processing {
    background-color: var(--theme-info-soft);
    border-color: var(--theme-primary);
}

.theme-status-notice-success {
    background-color: var(--theme-success-soft);
    border-color: var(--theme-success);
}

.theme-status-notice-warning {
    background-color: var(--theme-warning-soft);
    border-color: var(--theme-warning);
}

.theme-status-notice-error {
    background-color: var(--theme-danger-soft);
    border-color: var(--theme-danger);
}

.theme-status-icon-info,
.theme-status-icon-processing {
    color: var(--theme-primary);
}

.theme-status-icon-success {
    color: var(--theme-success);
}

.theme-status-icon-warning {
    color: var(--theme-warning);
}

.theme-status-icon-error {
    color: var(--theme-danger);
}

.theme-status-title-info,
.theme-status-title-processing {
    color: #1e3a8a;
}

.theme-status-title-success {
    color: #166534;
}

.theme-status-title-warning {
    color: #92400e;
}

.theme-status-title-error {
    color: #991b1b;
}

.theme-status-body-info,
.theme-status-body-processing {
    color: #1d4ed8;
}

.theme-status-body-success {
    color: #15803d;
}

.theme-status-body-warning {
    color: #b45309;
}

.theme-status-body-error {
    color: #b91c1c;
}

.theme-status-dismiss {
    color: var(--theme-text-faint);
    transition: color var(--theme-transition);
}

.theme-status-dismiss:hover {
    color: var(--theme-text-muted);
}

.theme-status-badge {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
}

.theme-status-badge-blue,
.theme-status-badge-teal {
    background-color: rgba(var(--color-primary-600), 0.1);
    color: #1e3a8a;
}

.theme-status-badge-yellow {
    background-color: #fef3c7;
    color: #92400e;
}

.theme-status-badge-purple,
.theme-status-badge-indigo {
    background-color: #e0e7ff;
    color: #4338ca;
}

.theme-status-badge-emerald,
.theme-status-badge-green {
    background-color: var(--theme-success-soft);
    color: #166534;
}

.theme-status-badge-orange {
    background-color: #ffedd5;
    color: #9a3412;
}

.theme-status-badge-red {
    background-color: var(--theme-danger-soft);
    color: #991b1b;
}

.theme-status-badge-gray {
    background-color: var(--theme-surface-elevated);
    color: var(--theme-text-muted);
}

.theme-status-marker-public {
    background-color: #4ade80;
}

.theme-status-marker-internal {
    background-color: #fbbf24;
}

.theme-status-marker-confidential {
    background-color: #f87171;
}

.theme-banner-warning {
    background-color: var(--theme-warning);
    color: var(--theme-text-inverse);
}

.theme-banner-warning-link {
    color: var(--theme-text-inverse);
    transition: color var(--theme-transition);
}

.theme-banner-warning-link:hover {
    color: #fef3c7;
}

.theme-dialog-surface {
    background-color: var(--theme-surface);
    color: var(--theme-text);
    box-shadow: var(--theme-shadow-elevated);
}

.theme-dialog-header {
    background-color: var(--theme-surface);
}

.theme-dialog-text {
    color: var(--theme-text);
}

.theme-dialog-muted {
    color: var(--theme-text-muted);
}

.theme-dialog-divider {
    border-color: var(--theme-border);
}

.theme-dialog-actions {
    background-color: var(--theme-surface-muted);
}

.theme-dialog-cancel {
    background-color: var(--theme-surface);
    color: var(--theme-text);
    box-shadow: var(--theme-shadow-soft);
    border: 1px solid var(--theme-border-strong);
}

.theme-dialog-cancel:hover {
    background-color: var(--theme-surface-muted);
}

.theme-dialog-comment-error {
    color: var(--theme-danger-strong);
}

.theme-dialog-comment-invalid {
    border-color: var(--theme-danger) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.14);
}

.theme-dialog-icon-info,
.theme-dialog-icon-primary {
    background-color: rgba(var(--color-primary-600), 0.1);
    color: var(--theme-primary);
}

.theme-dialog-icon-success {
    background-color: var(--theme-success-soft);
    color: var(--theme-success);
}

.theme-dialog-icon-warning {
    background-color: var(--theme-warning-soft);
    color: var(--theme-warning);
}

.theme-dialog-icon-danger {
    background-color: var(--theme-danger-soft);
    color: var(--theme-danger);
}

.theme-dialog-confirm-primary,
.theme-dialog-confirm-info {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    color: var(--theme-text-inverse);
}

.theme-dialog-confirm-success {
    background-color: var(--theme-success);
    color: var(--theme-text-inverse);
}

.theme-dialog-confirm-warning {
    background-color: var(--theme-warning);
    color: var(--theme-text-inverse);
}

.theme-dialog-confirm-danger {
    background-color: var(--theme-danger);
    color: var(--theme-text-inverse);
}

.theme-shell-workspace {
    display: none;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    user-select: none;
}

@media (min-width: 640px) {
    .theme-shell-workspace {
        display: flex;
    }
}

.theme-shell-workspace-name {
    font-size: 0.875rem;
    font-weight: 600;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--theme-text);
}

.theme-shell-workspace-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    color: var(--theme-text-muted);
}

.theme-shell-avatar-enhanced {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--theme-primary);
    color: var(--theme-text-inverse);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 2px solid var(--theme-surface);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* ==========================================
   DYNAMIC PORTAL THEMES
   Centralized color theme sets for MyFAQ
   ========================================== */

/* 1. Dark Theme */
html[data-portal-theme="dark"] {
    --theme-primary: #3b82f6; /* Blue-500 */
    --theme-primary-hover: #60a5fa; /* Blue-400 */
    --theme-accent: #60a5fa;
    --theme-accent-soft: #22d3ee;
    --theme-secondary: #f8fafc; /* Slate-50 */

    /* Surfaces */
    --theme-bg: #0f172a; /* Slate-900 */
    --theme-bg-soft: #1e293b; /* Slate-800 */
    --theme-surface: #1e293b; /* Slate-800 */
    --theme-surface-muted: #334155; /* Slate-700 */
    --theme-surface-elevated: #334155;

    /* Borders and text */
    --theme-border: #334155; /* Slate-700 */
    --theme-border-strong: #475569; /* Slate-600 */
    --theme-text: #f8fafc; /* Slate-50 */
    --theme-text-muted: #cbd5e1; /* Slate-300 */
    --theme-text-soft: #94a3b8; /* Slate-400 */
    --theme-text-faint: #64748b; /* Slate-500 */
    --theme-text-inverse: #0f172a;

    /* Status adjustments for dark mode */
    --theme-success: #22c55e;
    --theme-success-soft: rgba(34, 197, 94, 0.15);
    --theme-warning: #eab308;
    --theme-warning-soft: rgba(234, 179, 8, 0.15);
    --theme-danger: #ef4444;
    --theme-danger-strong: #f87171;
    --theme-danger-soft: rgba(239, 68, 68, 0.15);
    --theme-info: #3b82f6;
    --theme-info-soft: rgba(59, 130, 246, 0.15);

    --theme-shadow-soft: 0 10px 30px -20px rgba(0, 0, 0, 0.7);
    --theme-shadow-card: 0 14px 28px -24px rgba(0, 0, 0, 0.8);
    --theme-shadow-elevated: 0 20px 40px -24px rgba(0, 0, 0, 0.9);
    --theme-overlay: rgba(0, 0, 0, 0.7);

    /* Tailwind overrides */
    --color-primary-100: 30 41 59;
    --color-primary-200: 51 65 85;
    --color-primary-300: 71 85 105;
    --color-primary-400: 100 116 139;
    --color-primary-500: 59 130 246;
    --color-primary-600: 96 165 250;
    --color-primary-700: 147 197 253;
    --color-primary-800: 241 245 249;
    --color-primary-900: 248 250 252;

    /* Layout overrides */
    --theme-surface-navbar: rgba(30, 41, 59, 0.9);
    --theme-content-bg: var(--theme-bg);
    --theme-page-surface-bg: var(--theme-surface);
    --theme-portal-header-bg: var(--theme-surface);
    --theme-panel-bg: var(--theme-surface);
    --theme-panel-soft-bg: var(--theme-surface-muted);
    --theme-table-head-bg: var(--theme-surface-muted);
    --theme-table-row-hover: rgba(59, 130, 246, 0.08);
    --theme-pagination-link-bg: var(--theme-surface-muted);
    --theme-stat-card-bg: var(--theme-surface);

    /* Chat overrides */
    --theme-bubble-assistant-bg: var(--theme-bg-soft);
    --theme-bubble-pending-bg: var(--theme-surface-muted);
}

/* ==========================================
   TAILWIND UTILITY OVERRIDES FOR DARK MODE
   Adapts standard utility classes to dark mode
   ========================================== */

/* Backgrounds */
html[data-portal-theme="dark"] .bg-white,
html[data-portal-theme="dark"] .bg-slate-50,
html[data-portal-theme="dark"] .bg-slate-100,
html[data-portal-theme="dark"] .bg-gray-50,
html[data-portal-theme="dark"] .bg-gray-100,
html[data-portal-theme="dark"] .bg-zinc-50,
html[data-portal-theme="dark"] .bg-zinc-100 {
    background-color: var(--theme-surface) !important;
}
html[data-portal-theme="dark"] .bg-slate-50:not(.bg-gradient-to-b) {
    background-color: var(--theme-surface-muted) !important;
}
html[data-portal-theme="dark"] .hover\:bg-gray-50:hover,
html[data-portal-theme="dark"] .hover\:bg-gray-100:hover,
html[data-portal-theme="dark"] .hover\:bg-slate-50:hover,
html[data-portal-theme="dark"] .hover\:bg-slate-100:hover,
html[data-portal-theme="dark"] .hover\:bg-slate-200:hover {
    background-color: var(--theme-surface-muted) !important;
}

/* Borders & Dividers */
html[data-portal-theme="dark"] .border-gray-100,
html[data-portal-theme="dark"] .border-gray-200,
html[data-portal-theme="dark"] .border-slate-100,
html[data-portal-theme="dark"] .border-slate-200,
html[data-portal-theme="dark"] .divide-gray-100,
html[data-portal-theme="dark"] .divide-gray-200,
html[data-portal-theme="dark"] .divide-slate-100,
html[data-portal-theme="dark"] .divide-slate-200 {
    border-color: var(--theme-border) !important;
}


/* Colored dashboard widget overlays */
html[data-portal-theme="dark"] .bg-cyan-50 { background-color: rgba(6, 182, 212, 0.12) !important; }
html[data-portal-theme="dark"] .bg-orange-50 { background-color: rgba(249, 115, 22, 0.12) !important; }
html[data-portal-theme="dark"] .bg-purple-50 { background-color: rgba(139, 92, 246, 0.12) !important; }
html[data-portal-theme="dark"] .bg-green-50 { background-color: rgba(34, 197, 94, 0.12) !important; }
html[data-portal-theme="dark"] .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.12) !important; }
html[data-portal-theme="dark"] .bg-blue-50 { background-color: rgba(59, 130, 246, 0.12) !important; }
html[data-portal-theme="dark"] .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.12) !important; }
html[data-portal-theme="dark"] .bg-red-50 { background-color: rgba(239, 68, 68, 0.12) !important; }
html[data-portal-theme="dark"] .bg-rose-50 { background-color: rgba(244, 63, 94, 0.12) !important; }
html[data-portal-theme="dark"] .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.12) !important; }

html[data-portal-theme="dark"] .hover\:bg-cyan-100:hover { background-color: rgba(6, 182, 212, 0.22) !important; }
html[data-portal-theme="dark"] .hover\:bg-orange-100:hover { background-color: rgba(249, 115, 22, 0.22) !important; }
html[data-portal-theme="dark"] .hover\:bg-purple-100:hover { background-color: rgba(139, 92, 246, 0.22) !important; }
html[data-portal-theme="dark"] .hover\:bg-green-100:hover { background-color: rgba(34, 197, 94, 0.22) !important; }
html[data-portal-theme="dark"] .hover\:bg-indigo-100:hover { background-color: rgba(99, 102, 241, 0.22) !important; }
html[data-portal-theme="dark"] .hover\:bg-blue-100:hover { background-color: rgba(59, 130, 246, 0.22) !important; }
html[data-portal-theme="dark"] .hover\:bg-yellow-100:hover { background-color: rgba(234, 179, 8, 0.22) !important; }
html[data-portal-theme="dark"] .hover\:bg-red-100:hover { background-color: rgba(239, 68, 68, 0.22) !important; }
html[data-portal-theme="dark"] .hover\:bg-rose-100:hover { background-color: rgba(244, 63, 94, 0.22) !important; }
html[data-portal-theme="dark"] .hover\:bg-emerald-100:hover { background-color: rgba(16, 185, 129, 0.22) !important; }

/* Text colors */
html[data-portal-theme="dark"] .text-gray-950,
html[data-portal-theme="dark"] .text-gray-900, 
html[data-portal-theme="dark"] .text-gray-800, 
html[data-portal-theme="dark"] .text-gray-700, 
html[data-portal-theme="dark"] .text-slate-950,
html[data-portal-theme="dark"] .text-slate-900, 
html[data-portal-theme="dark"] .text-slate-800, 
html[data-portal-theme="dark"] .text-slate-700 {
    color: var(--theme-text) !important;
}
html[data-portal-theme="dark"] .text-gray-600, 
html[data-portal-theme="dark"] .text-gray-500, 
html[data-portal-theme="dark"] .text-slate-600, 
html[data-portal-theme="dark"] .text-slate-500 {
    color: var(--theme-text-muted) !important;
}
html[data-portal-theme="dark"] .text-gray-400, 
html[data-portal-theme="dark"] .text-slate-400 {
    color: var(--theme-text-faint) !important;
}

/* Borders */
html[data-portal-theme="dark"] .border-gray-200, 
html[data-portal-theme="dark"] .border-gray-100, 
html[data-portal-theme="dark"] .border-slate-200 {
    border-color: var(--theme-border) !important;
}

/* Dropdowns / Inputs */
html[data-portal-theme="dark"] select option {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
}

/* Translucent utility backdrops */
html[data-portal-theme="dark"] .bg-slate-50\/80 {
    background-color: var(--theme-bg) !important;
}
html[data-portal-theme="dark"] .bg-white\/95 {
    background-color: var(--theme-surface) !important;
}
html[data-portal-theme="dark"] .bg-slate-50\/70 {
    background-color: var(--theme-surface-muted) !important;
    color: var(--theme-text) !important;
}

/* Global Form inputs dark mode styling */
html[data-portal-theme="dark"] input[type="text"],
html[data-portal-theme="dark"] input[type="email"],
html[data-portal-theme="dark"] input[type="password"],
html[data-portal-theme="dark"] input[type="number"],
html[data-portal-theme="dark"] input[type="search"],
html[data-portal-theme="dark"] input[type="date"],
html[data-portal-theme="dark"] input[type="datetime-local"],
html[data-portal-theme="dark"] input[type="time"],
html[data-portal-theme="dark"] input[type="url"],
html[data-portal-theme="dark"] input[type="tel"],
html[data-portal-theme="dark"] select,
html[data-portal-theme="dark"] textarea,
html[data-portal-theme="dark"] .flatpickr-input {
    background-color: var(--theme-surface-muted) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}
html[data-portal-theme="dark"] input::placeholder,
html[data-portal-theme="dark"] textarea::placeholder {
    color: var(--theme-text-faint) !important;
}

/* Flatpickr date picker dark mode styling */
html[data-portal-theme="dark"] .flatpickr-calendar {
    background: var(--theme-surface-elevated) !important;
    border-color: var(--theme-border-strong) !important;
    box-shadow: var(--theme-shadow-elevated) !important;
    color: var(--theme-text) !important;
}
html[data-portal-theme="dark"] .flatpickr-calendar .flatpickr-months .flatpickr-month,
html[data-portal-theme="dark"] .flatpickr-calendar .flatpickr-weekdays,
html[data-portal-theme="dark"] .flatpickr-calendar span.flatpickr-weekday {
    background: var(--theme-surface-muted) !important;
    color: var(--theme-text-muted) !important;
}
html[data-portal-theme="dark"] .flatpickr-calendar .flatpickr-day {
    color: var(--theme-text) !important;
}
html[data-portal-theme="dark"] .flatpickr-calendar .flatpickr-day:hover,
html[data-portal-theme="dark"] .flatpickr-calendar .flatpickr-day:focus {
    background: var(--theme-surface-muted) !important;
    border-color: var(--theme-border) !important;
}
html[data-portal-theme="dark"] .flatpickr-calendar .flatpickr-day.selected,
html[data-portal-theme="dark"] .flatpickr-calendar .flatpickr-day.startRange,
html[data-portal-theme="dark"] .flatpickr-calendar .flatpickr-day.endRange {
    background: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: #ffffff !important;
}
html[data-portal-theme="dark"] .flatpickr-calendar .flatpickr-day.flatpickr-disabled,
html[data-portal-theme="dark"] .flatpickr-calendar .flatpickr-day.prevMonthDay,
html[data-portal-theme="dark"] .flatpickr-calendar .flatpickr-day.nextMonthDay {
    color: var(--theme-text-faint) !important;
}

/* Action Required / Todo Section Box */
.theme-todo-box {
    background-color: var(--theme-surface-muted);
}
html[data-portal-theme="dark"] .theme-todo-box {
    background-color: rgba(239, 68, 68, 0.08) !important;
    border-color: #ef4444 !important;
}

/* ==========================================
   UNIFIED HELP & ONBOARDING BANNERS (.theme-help-box)
   Distinct callout styling so help content feels separate from data
   ========================================== */
.theme-help-box {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(99, 102, 241, 0.03) 100%);
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-left: 4px solid var(--theme-primary);
    box-shadow: 0 4px 14px -6px rgba(59, 130, 246, 0.08);
}
html[data-portal-theme="dark"] .theme-help-box {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.22) 0%, rgba(30, 41, 59, 0.4) 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    border-left: 4px solid var(--theme-accent) !important;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.5) !important;
}

/* Onboarding banner gradient overrides for light & dark mode */
html[data-portal-theme="dark"] .from-indigo-50,
html[data-portal-theme="dark"] .from-cyan-50,
html[data-portal-theme="dark"] .from-orange-50,
html[data-portal-theme="dark"] .from-green-50,
html[data-portal-theme="dark"] .from-purple-50 {
    --tw-gradient-from: rgba(30, 58, 138, 0.25) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(15, 23, 42, 0.6)) !important;
}
html[data-portal-theme="dark"] .to-white {
    --tw-gradient-to: rgba(15, 23, 42, 0.6) !important;
}
html[data-portal-theme="dark"] .border-indigo-100,
html[data-portal-theme="dark"] .border-cyan-100,
html[data-portal-theme="dark"] .border-orange-100,
html[data-portal-theme="dark"] .border-green-100,
html[data-portal-theme="dark"] .border-purple-100 {
    border-color: rgba(59, 130, 246, 0.28) !important;
}

/* Onboarding inner cards / callout boxes */
html[data-portal-theme="dark"] .bg-white.rounded-lg.border,
html[data-portal-theme="dark"] .bg-white.rounded-lg.shadow-sm {
    background-color: var(--theme-surface-muted) !important;
    border-color: var(--theme-border) !important;
}
html[data-portal-theme="dark"] .text-cyan-900,
html[data-portal-theme="dark"] .text-orange-900,
html[data-portal-theme="dark"] .text-green-900,
html[data-portal-theme="dark"] .text-indigo-900 {
    color: var(--theme-text) !important;
}
html[data-portal-theme="dark"] .text-cyan-800,
html[data-portal-theme="dark"] .text-orange-800,
html[data-portal-theme="dark"] .text-green-800,
html[data-portal-theme="dark"] .text-indigo-800 {
    color: var(--theme-text-muted) !important;
}
html[data-portal-theme="dark"] .text-cyan-600,
html[data-portal-theme="dark"] .text-orange-600,
html[data-portal-theme="dark"] .text-green-600,
html[data-portal-theme="dark"] .text-indigo-600 {
    color: var(--theme-accent) !important;
}

/* Button & interactive component dark theme fallback */
html[data-portal-theme="dark"] button:not([class*="bg-"]):not(.btn-primary):not(.theme-button-primary):not(.theme-button-success):not(.theme-button-warning):not(.theme-button-danger) {
    background-color: var(--theme-surface-muted);
    color: var(--theme-text);
    border-color: var(--theme-border);
}

/* ==========================================
   CHAT DARK MODE OVERRIDES
   ========================================== */

/* border-gray-200 on the outer chat card */
html[data-portal-theme="dark"] .kb-chat-split {
    border-color: var(--theme-border) !important;
}

/* Source badges (blue "document" and green "cloud" links) */
html[data-portal-theme="dark"] .source-doc-link {
    background: var(--theme-info-soft) !important;
    color: var(--theme-accent) !important;
    border-color: rgba(59,130,246,0.25) !important;
}
html[data-portal-theme="dark"] .source-doc-link:hover {
    background: rgba(59,130,246,0.25) !important;
}
html[data-portal-theme="dark"] .source-cloud-link {
    background: var(--theme-success-soft) !important;
    color: var(--theme-success) !important;
    border-color: rgba(34,197,94,0.25) !important;
}
html[data-portal-theme="dark"] .source-cloud-link:hover {
    background: rgba(34,197,94,0.25) !important;
}

/* Model selector modal */
html[data-portal-theme="dark"] #modelSelectorModal label:hover {
    background-color: var(--theme-surface-muted) !important;
}
html[data-portal-theme="dark"] #modelSelectorModal input[type="radio"] {
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border-strong) !important;
}

/* Chat message bubbles */
html[data-portal-theme="dark"] .kb-message-bubble.user {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.4) 0%, rgba(30, 64, 175, 0.5) 100%) !important;
    border: 1px solid rgba(96, 165, 250, 0.35) !important;
    color: #f0f6ff !important;
    box-shadow: 0 4px 14px -4px rgba(37, 99, 235, 0.3) !important;
}
html[data-portal-theme="dark"] .kb-message-bubble.assistant {
    color: var(--theme-text) !important;
}

/* Chat filter summary chip */
html[data-portal-theme="dark"] .filter-summary-chip {
    background: var(--theme-surface-muted) !important;
}
html[data-portal-theme="dark"] .filter-summary-chip-project {
    background: rgba(168, 85, 247, 0.18) !important;
    color: #c084fc !important;
}

/* Filter panel toggle button */
html[data-portal-theme="dark"] .theme-filter-toggle {
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}
html[data-portal-theme="dark"] .theme-filter-toggle:hover {
    background-color: var(--theme-surface-muted) !important;
}

/* ==========================================
   PURPLE COLOR OVERRIDES (subscription credits, projects)
   ========================================== */
html[data-portal-theme="dark"] .from-purple-50 {
    --tw-gradient-from: rgba(139, 92, 246, 0.12) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(139, 92, 246, 0)) !important;
}
html[data-portal-theme="dark"] .to-purple-100 {
    --tw-gradient-to: rgba(139, 92, 246, 0.2) !important;
}
html[data-portal-theme="dark"] .bg-purple-50 {
    background-color: rgba(139, 92, 246, 0.1) !important;
}
html[data-portal-theme="dark"] .bg-purple-100 {
    background-color: rgba(139, 92, 246, 0.2) !important;
}
html[data-portal-theme="dark"] .border-purple-50 {
    border-color: rgba(139, 92, 246, 0.15) !important;
}
html[data-portal-theme="dark"] .border-purple-100 {
    border-color: rgba(139, 92, 246, 0.22) !important;
}
html[data-portal-theme="dark"] .border-purple-200 {
    border-color: rgba(139, 92, 246, 0.32) !important;
}
html[data-portal-theme="dark"] .text-purple-900 {
    color: #e9d5ff !important;
}
html[data-portal-theme="dark"] .text-purple-800 {
    color: #ddd6fe !important;
}
html[data-portal-theme="dark"] .text-purple-700 {
    color: #c4b5fd !important;
}
html[data-portal-theme="dark"] .text-purple-600 {
    color: #a78bfa !important;
}
html[data-portal-theme="dark"] .hover\:text-purple-800:hover {
    color: #ddd6fe !important;
}

/* ==========================================
   EMERALD COLOR OVERRIDES (subscription beta notice)
   ========================================== */
html[data-portal-theme="dark"] .from-emerald-50 {
    --tw-gradient-from: rgba(16, 185, 129, 0.1) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(16, 185, 129, 0)) !important;
}
html[data-portal-theme="dark"] .bg-emerald-50 {
    background-color: rgba(16, 185, 129, 0.1) !important;
}
html[data-portal-theme="dark"] .bg-emerald-100 {
    background-color: rgba(16, 185, 129, 0.2) !important;
}
html[data-portal-theme="dark"] .border-emerald-50 {
    border-color: rgba(16, 185, 129, 0.15) !important;
}
html[data-portal-theme="dark"] .border-emerald-100 {
    border-color: rgba(16, 185, 129, 0.22) !important;
}
html[data-portal-theme="dark"] .border-emerald-200 {
    border-color: rgba(16, 185, 129, 0.32) !important;
}
html[data-portal-theme="dark"] .text-emerald-900 {
    color: #a7f3d0 !important;
}
html[data-portal-theme="dark"] .text-emerald-800 {
    color: #6ee7b7 !important;
}
html[data-portal-theme="dark"] .text-emerald-700 {
    color: #34d399 !important;
}
html[data-portal-theme="dark"] .text-emerald-600 {
    color: #10b981 !important;
}

/* ==========================================
   AMBER / ORANGE COLOR OVERRIDES (subscription pending, warnings)
   ========================================== */
html[data-portal-theme="dark"] .bg-amber-50 {
    background-color: rgba(245, 158, 11, 0.12) !important;
}
html[data-portal-theme="dark"] .bg-amber-100 {
    background-color: rgba(245, 158, 11, 0.2) !important;
}
html[data-portal-theme="dark"] .border-amber-200 {
    border-color: rgba(245, 158, 11, 0.32) !important;
}
html[data-portal-theme="dark"] .text-amber-900 {
    color: #fde68a !important;
}
html[data-portal-theme="dark"] .text-amber-800 {
    color: #fde68a !important;
}
html[data-portal-theme="dark"] .text-amber-700 {
    color: #fcd34d !important;
}
html[data-portal-theme="dark"] .text-amber-600 {
    color: #f59e0b !important;
}
html[data-portal-theme="dark"] .hover\:bg-amber-100:hover {
    background-color: rgba(245, 158, 11, 0.25) !important;
}

/* Green-100 badge active state */
html[data-portal-theme="dark"] .bg-green-100 {
    background-color: rgba(34, 197, 94, 0.18) !important;
}
html[data-portal-theme="dark"] .text-green-800 {
    color: #86efac !important;
}
html[data-portal-theme="dark"] .bg-gray-200 {
    background-color: var(--theme-surface-muted) !important;
}
html[data-portal-theme="dark"] .text-gray-700 {
    color: var(--theme-text-muted) !important;
}

/* ==========================================
   STATUS NOTICE TEXT OVERRIDES (title/body colors are hardcoded)
   ========================================== */
html[data-portal-theme="dark"] .theme-status-title-info,
html[data-portal-theme="dark"] .theme-status-title-processing {
    color: #93c5fd !important;
}
html[data-portal-theme="dark"] .theme-status-title-success {
    color: #86efac !important;
}
html[data-portal-theme="dark"] .theme-status-title-warning {
    color: #fcd34d !important;
}
html[data-portal-theme="dark"] .theme-status-title-error {
    color: #fca5a5 !important;
}
html[data-portal-theme="dark"] .theme-status-body-info,
html[data-portal-theme="dark"] .theme-status-body-processing {
    color: #bfdbfe !important;
}
html[data-portal-theme="dark"] .theme-status-body-success {
    color: #a7f3d0 !important;
}
html[data-portal-theme="dark"] .theme-status-body-warning {
    color: #fde68a !important;
}
html[data-portal-theme="dark"] .theme-status-body-error {
    color: #fecaca !important;
}

/* ==========================================
   STATUS BADGE TEXT COLOR OVERRIDES (hardcoded dark colors)
   ========================================== */
html[data-portal-theme="dark"] .theme-status-badge-blue,
html[data-portal-theme="dark"] .theme-status-badge-teal {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
}
html[data-portal-theme="dark"] .theme-status-badge-yellow {
    background-color: rgba(234, 179, 8, 0.2) !important;
    color: #fcd34d !important;
}
html[data-portal-theme="dark"] .theme-status-badge-purple,
html[data-portal-theme="dark"] .theme-status-badge-indigo {
    background-color: rgba(139, 92, 246, 0.2) !important;
    color: #c4b5fd !important;
}
html[data-portal-theme="dark"] .theme-status-badge-emerald,
html[data-portal-theme="dark"] .theme-status-badge-green {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #86efac !important;
}
html[data-portal-theme="dark"] .theme-status-badge-orange {
    background-color: rgba(249, 115, 22, 0.2) !important;
    color: #fdba74 !important;
}
html[data-portal-theme="dark"] .theme-status-badge-red {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}
html[data-portal-theme="dark"] .theme-status-badge-gray {
    background-color: var(--theme-surface-muted) !important;
    color: var(--theme-text-muted) !important;
}

/* ==========================================
   CONFIDENTIALITY & CATEGORY BADGE OVERRIDES IN DARK MODE
   ========================================== */
html[data-portal-theme="dark"] .bg-gray-100.text-gray-700,
html[data-portal-theme="dark"] .bg-gray-100.text-gray-800 {
    background-color: var(--theme-surface-muted) !important;
    color: var(--theme-text-muted) !important;
}
html[data-portal-theme="dark"] .bg-blue-100.text-blue-700,
html[data-portal-theme="dark"] .bg-blue-100.text-blue-800,
html[data-portal-theme="dark"] .bg-cyan-100.text-cyan-800 {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
}
html[data-portal-theme="dark"] .bg-green-100.text-green-700,
html[data-portal-theme="dark"] .bg-green-100.text-green-800 {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #86efac !important;
}
html[data-portal-theme="dark"] .bg-orange-100.text-orange-700,
html[data-portal-theme="dark"] .bg-orange-100.text-orange-800 {
    background-color: rgba(249, 115, 22, 0.2) !important;
    color: #fdba74 !important;
}
html[data-portal-theme="dark"] .bg-red-100.text-red-700,
html[data-portal-theme="dark"] .bg-red-100.text-red-800,
html[data-portal-theme="dark"] .bg-rose-100.text-rose-700 {
    background-color: rgba(244, 63, 94, 0.2) !important;
    color: #fda4af !important;
}
html[data-portal-theme="dark"] .bg-emerald-100.text-emerald-700 {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
}
html[data-portal-theme="dark"] .bg-purple-100.text-purple-800,
html[data-portal-theme="dark"] .bg-purple-100.text-purple-700 {
    background-color: rgba(139, 92, 246, 0.2) !important;
    color: #c4b5fd !important;
}

/* ==========================================
   CHIP / TAG OVERRIDES
   ========================================== */
html[data-portal-theme="dark"] .theme-chip-disabled {
    background-color: var(--theme-surface-muted) !important;
    color: var(--theme-text-faint) !important;
}

/* ==========================================
   UNFOLD NAVBAR DARK OVERRIDE
   ========================================== */
html[data-portal-theme="dark"] .unfold-navbar {
    background-color: var(--theme-surface) !important;
    border-bottom-color: var(--theme-border) !important;
}

/* Portal menu (dropdown) dark overrides */
html[data-portal-theme="dark"] .portal-menu {
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}
html[data-portal-theme="dark"] .portal-menu-item {
    color: var(--theme-text-muted) !important;
}
html[data-portal-theme="dark"] .portal-menu-item:hover,
html[data-portal-theme="dark"] .portal-menu-item:focus-visible {
    background-color: var(--theme-surface-muted) !important;
    color: var(--theme-text) !important;
}
html[data-portal-theme="dark"] .portal-menu-item i,
html[data-portal-theme="dark"] .portal-menu-item .material-icons,
html[data-portal-theme="dark"] .portal-menu-item .material-symbols-outlined {
    color: var(--theme-text-soft) !important;
}
html[data-portal-theme="dark"] .portal-menu-item:hover i {
    color: var(--theme-text-muted) !important;
}
html[data-portal-theme="dark"] .portal-menu-separator {
    background: var(--theme-border) !important;
}
html[data-portal-theme="dark"] .portal-sidebar-btn {
    color: var(--theme-text-soft) !important;
}
html[data-portal-theme="dark"] .portal-sidebar-btn:hover {
    background: var(--theme-surface-muted) !important;
    color: var(--theme-text) !important;
}
html[data-portal-theme="dark"] .portal-kebab-btn {
    color: var(--theme-text-soft) !important;
}
html[data-portal-theme="dark"] .portal-kebab-btn:hover {
    background: var(--theme-surface-muted) !important;
    color: var(--theme-text) !important;
}

/* ==========================================
   DAISY UI OVERRIDES FOR DARK MODE
   Daisy UI's own classes override our theme-shell classes
   ========================================== */
html[data-portal-theme="dark"] .dropdown-content {
    background-color: var(--theme-surface) !important;
    border: 1px solid var(--theme-border) !important;
    box-shadow: var(--theme-shadow-elevated) !important;
}
html[data-portal-theme="dark"] .bg-base-200 {
    background-color: var(--theme-surface-muted) !important;
}
html[data-portal-theme="dark"] .bg-base-100 {
    background-color: var(--theme-surface) !important;
}
html[data-portal-theme="dark"] .bg-base-300 {
    background-color: var(--theme-surface-elevated) !important;
}

/* Red badge (Microsoft/Google account indicators in dropdown) */
html[data-portal-theme="dark"] .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.12) !important;
}
html[data-portal-theme="dark"] .text-red-700 {
    color: #fca5a5 !important;
}
html[data-portal-theme="dark"] .border-red-100 {
    border-color: rgba(239, 68, 68, 0.2) !important;
}
html[data-portal-theme="dark"] .text-blue-700 {
    color: #93c5fd !important;
}
html[data-portal-theme="dark"] .border-blue-100 {
    border-color: rgba(59, 130, 246, 0.2) !important;
}

/* Navbar company block overrides */
html[data-portal-theme="dark"] .navbar-company-name {
    color: var(--theme-text-muted) !important;
}
html[data-portal-theme="dark"] .navbar-divider {
    background-color: var(--theme-border) !important;
}

/* ==========================================
   LOGO SWAPPING
   ========================================== */
.dark-logo {
    display: none !important;
}
html[data-portal-theme="dark"] .light-logo {
    display: none !important;
}
html[data-portal-theme="dark"] .dark-logo {
    display: block !important;
}

/* ==========================================
   SIDEBAR & ACTIVE MENU ITEM DARK MODE OVERRIDES
   ========================================== */
html[data-portal-theme="dark"] .sidebar {
    background-color: var(--theme-surface) !important;
    border-right-color: var(--theme-border) !important;
}
html[data-portal-theme="dark"] .sidebar-menu-item {
    color: var(--theme-text-muted) !important;
}
html[data-portal-theme="dark"] .sidebar-menu-item:hover {
    background: var(--theme-surface-muted) !important;
    color: var(--theme-text) !important;
}
html[data-portal-theme="dark"] .sidebar-menu-item.active {
    background: rgba(59, 130, 246, 0.16) !important;
    color: var(--theme-accent) !important;
    border-left-color: var(--theme-accent) !important;
}
html[data-portal-theme="dark"] .sidebar-menu-item.active .theme-shell-icon-active {
    color: var(--theme-accent) !important;
}

/* ==========================================
   NAVBAR BUTTONS (Light & Dark compatible)
   ========================================== */
.navbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--theme-text-muted) !important;
    padding: 0.4375rem 0.75rem !important;
    border-radius: 0.5rem !important;
    transition: all var(--theme-transition) !important;
    cursor: pointer;
    border: 1px solid var(--theme-border) !important;
    background-color: var(--theme-surface) !important;
    min-width: 0 !important;
    height: 34px !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.05) !important;
    line-height: 1 !important;
}
.navbar-btn:hover {
    background-color: var(--theme-surface-muted) !important;
    border-color: var(--theme-border-strong) !important;
    color: var(--theme-text) !important;
}
.navbar-btn i,
.navbar-btn .material-icons {
    font-size: 0.9375rem !important;
    line-height: 1 !important;
    margin: 0 !important;
}
.theme-tips-toggle {
    color: var(--theme-text-muted) !important;
}
.theme-tips-toggle-active {
    background-color: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #b45309 !important;
}
.theme-tips-toggle-active i,
.theme-tips-toggle-active .material-icons {
    color: #d97706 !important;
}
html[data-portal-theme="dark"] .theme-tips-toggle-active {
    background-color: rgba(245, 158, 11, 0.18) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
    color: #fcd34d !important;
}
html[data-portal-theme="dark"] .theme-tips-toggle-active i,
html[data-portal-theme="dark"] .theme-tips-toggle-active .material-icons {
    color: #fbbf24 !important;
}

/* ==========================================
   DOCUMENT & RFX DETAIL DARK OVERRIDES
   ========================================== */
html[data-portal-theme="dark"] .doc-tab-card .bg-slate-50,
html[data-portal-theme="dark"] .rfx-tab-card .bg-slate-50 {
    background-color: var(--theme-bg-soft) !important;
}
html[data-portal-theme="dark"] .doc-tab-card .bg-slate-100,
html[data-portal-theme="dark"] .rfx-tab-card .bg-slate-100 {
    background-color: var(--theme-surface-muted) !important;
}
html[data-portal-theme="dark"] .doc-tab-card .bg-slate-200,
html[data-portal-theme="dark"] .rfx-tab-card .bg-slate-200 {
    background-color: var(--theme-border) !important;
}
html[data-portal-theme="dark"] .from-slate-50 {
    --tw-gradient-from: var(--theme-surface-muted) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(51, 65, 85, 0)) !important;
}
html[data-portal-theme="dark"] .border-slate-200,
html[data-portal-theme="dark"] .border-slate-300 {
    border-color: var(--theme-border) !important;
}
html[data-portal-theme="dark"] .border-gray-300 {
    border-color: var(--theme-border) !important;
}
html[data-portal-theme="dark"] .bg-gray-200,
html[data-portal-theme="dark"] .bg-gray-300 {
    background-color: var(--theme-surface-muted) !important;
}

/* Custom tabs in detail views */
html[data-portal-theme="dark"] .doc-tab-card > div:first-child,
html[data-portal-theme="dark"] .rfx-tab-card > div:first-child {
    background-color: var(--theme-surface-muted) !important;
    background-image: none !important;
    border-bottom-color: var(--theme-border) !important;
}
html[data-portal-theme="dark"] .doc-tab,
html[data-portal-theme="dark"] .rfx-tab {
    color: var(--theme-text-soft) !important;
}
html[data-portal-theme="dark"] .doc-tab:hover,
html[data-portal-theme="dark"] .rfx-tab:hover {
    color: var(--theme-text) !important;
    border-bottom-color: var(--theme-border-strong) !important;
}
html[data-portal-theme="dark"] .doc-tab-active,
html[data-portal-theme="dark"] .rfx-tab-active {
    color: var(--theme-accent) !important;
    background-color: var(--theme-surface) !important;
    border-bottom: 2px solid var(--theme-accent) !important;
}

/* Indigo-themed layout boxes (instructions / preview block) */
html[data-portal-theme="dark"] .bg-indigo-50 {
    background-color: rgba(99, 102, 241, 0.1) !important;
}
html[data-portal-theme="dark"] .border-indigo-200 {
    border-color: rgba(99, 102, 241, 0.22) !important;
}
html[data-portal-theme="dark"] .text-indigo-800 {
    color: #c4b5fd !important;
}
html[data-portal-theme="dark"] .text-indigo-700 {
    color: #a78bfa !important;
}
html[data-portal-theme="dark"] .text-indigo-600 {
    color: #818cf8 !important;
}

/* Cyan components */
html[data-portal-theme="dark"] .bg-cyan-50 {
    background-color: rgba(6, 182, 212, 0.1) !important;
}
html[data-portal-theme="dark"] .border-cyan-200 {
    border-color: rgba(6, 182, 212, 0.22) !important;
}
html[data-portal-theme="dark"] .text-cyan-900 {
    color: #a5f3fc !important;
}
html[data-portal-theme="dark"] .text-cyan-800 {
    color: #67e8f9 !important;
}
html[data-portal-theme="dark"] .text-cyan-700 {
    color: #22d3ee !important;
}
html[data-portal-theme="dark"] .text-cyan-600 {
    color: #06b6d4 !important;
}
html[data-portal-theme="dark"] .from-cyan-50 {
    --tw-gradient-from: rgba(6, 182, 212, 0.1) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(6, 182, 212, 0)) !important;
}
html[data-portal-theme="dark"] .to-indigo-50 {
    --tw-gradient-to: rgba(99, 102, 241, 0.1) !important;
}
html[data-portal-theme="dark"] .border-cyan-100 {
    border-color: rgba(6, 182, 212, 0.18) !important;
}

/* Readonly fields in dark mode */
html[data-portal-theme="dark"] .read-only\:bg-slate-50:read-only {
    background-color: var(--theme-bg-soft) !important;
}

/* ==========================================
   LIFECYCLE PROGRESS CARD OVERRIDES (progress_bar.html)
   ========================================== */
html[data-portal-theme="dark"] .lifecycle-card {
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    box-shadow: var(--theme-shadow-soft) !important;
}
html[data-portal-theme="dark"] .lifecycle-card__header {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(37, 99, 235, 0.08)) !important;
    border-bottom-color: var(--theme-border) !important;
    color: var(--theme-accent) !important;
}
html[data-portal-theme="dark"] .current-state {
    background-color: var(--theme-surface-muted) !important;
    color: var(--theme-text) !important;
}
html[data-portal-theme="dark"] .current-state__description {
    color: var(--theme-text-muted) !important;
}

/* State variables inside current state badge */
html[data-portal-theme="dark"] .state-blue { --accent: #60a5fa; --accent-bg: rgba(59, 130, 246, 0.12); }
html[data-portal-theme="dark"] .state-yellow { --accent: #fcd34d; --accent-bg: rgba(234, 179, 8, 0.12); }
html[data-portal-theme="dark"] .state-purple { --accent: #a78bfa; --accent-bg: rgba(139, 92, 246, 0.12); }
html[data-portal-theme="dark"] .state-orange { --accent: #fdba74; --accent-bg: rgba(249, 115, 22, 0.12); }
html[data-portal-theme="dark"] .state-indigo { --accent: #818cf8; --accent-bg: rgba(99, 102, 241, 0.12); }
html[data-portal-theme="dark"] .state-green { --accent: #86efac; --accent-bg: rgba(34, 197, 94, 0.12); }
html[data-portal-theme="dark"] .state-red { --accent: #fca5a5; --accent-bg: rgba(220, 38, 38, 0.12); }
html[data-portal-theme="dark"] .state-gray { --accent: #94a3b8; --accent-bg: var(--theme-surface-muted); }

/* Progress bar & timeline metadata */
html[data-portal-theme="dark"] .lifecycle-progress-bar__meta {
    color: var(--theme-text-muted) !important;
}
html[data-portal-theme="dark"] .lifecycle-progress-bar__percentage-text {
    color: var(--theme-accent) !important;
}
html[data-portal-theme="dark"] .lifecycle-progress-bar__track {
    background: var(--theme-surface-muted) !important;
}
html[data-portal-theme="dark"] .timeline__title {
    color: var(--theme-text-muted) !important;
}
html[data-portal-theme="dark"] .timeline-dot {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}
html[data-portal-theme="dark"] .timeline-content {
    background: var(--theme-surface-muted) !important;
}
html[data-portal-theme="dark"] .timeline-label {
    color: var(--theme-text) !important;
}
html[data-portal-theme="dark"] .timeline-item::after {
    background: var(--theme-border) !important;
}

/* Timeline status state colors & active chips */
html[data-portal-theme="dark"] .timeline-item.dot-blue {
    --dot-active: #60a5fa;
    --dot-ring: rgba(59, 130, 246, 0.18);
    --chip-bg: rgba(59, 130, 246, 0.18);
    --chip-color: #93c5fd;
}
html[data-portal-theme="dark"] .timeline-item.dot-yellow {
    --dot-active: #fcd34d;
    --dot-ring: rgba(234, 179, 8, 0.18);
    --chip-bg: rgba(234, 179, 8, 0.18);
    --chip-color: #fde68a;
}
html[data-portal-theme="dark"] .timeline-item.dot-purple {
    --dot-active: #a78bfa;
    --dot-ring: rgba(139, 92, 246, 0.18);
    --chip-bg: rgba(139, 92, 246, 0.18);
    --chip-color: #c4b5fd;
}
html[data-portal-theme="dark"] .timeline-item.dot-orange {
    --dot-active: #fdba74;
    --dot-ring: rgba(249, 115, 22, 0.18);
    --chip-bg: rgba(249, 115, 22, 0.18);
    --chip-color: #fdba74;
}
html[data-portal-theme="dark"] .timeline-item.dot-indigo {
    --dot-active: #818cf8;
    --dot-ring: rgba(99, 102, 241, 0.18);
    --chip-bg: rgba(99, 102, 241, 0.18);
    --chip-color: #c7d2fe;
}
html[data-portal-theme="dark"] .timeline-item.dot-green {
    --dot-active: #86efac;
    --dot-ring: rgba(34, 197, 94, 0.18);
    --chip-bg: rgba(34, 197, 94, 0.18);
    --chip-color: #a7f3d0;
}
html[data-portal-theme="dark"] .timeline-item.dot-red {
    --dot-active: #fca5a5;
    --dot-ring: rgba(220, 38, 38, 0.18);
    --chip-bg: rgba(220, 38, 38, 0.18);
    --chip-color: #fecaca;
}
html[data-portal-theme="dark"] .timeline-item.dot-gray {
    --dot-active: #94a3b8;
    --dot-ring: rgba(148, 163, 184, 0.18);
    --chip-bg: var(--theme-surface-muted);
    --chip-color: var(--theme-text-muted);
}

html[data-portal-theme="dark"] .timeline-item.is-complete .timeline-label {
    color: var(--theme-text-muted) !important;
}
html[data-portal-theme="dark"] .timeline-item.is-current .timeline-content {
    background: rgba(59, 130, 246, 0.12) !important;
}
html[data-portal-theme="dark"] .timeline-item.is-current .timeline-label {
    color: var(--theme-accent) !important;
}
html[data-portal-theme="dark"] .terminal-note {
    background: var(--theme-surface-muted) !important;
    color: var(--theme-text-muted) !important;
}
html[data-portal-theme="dark"] .terminal-note .material-symbols-outlined {
    color: var(--theme-text) !important;
}