/**
 * NexoTaller Theme - "Midnight Circuit" Design System
 * DARK-MODE ONLY utility classes and component overrides.
 * 
 * IMPORTANT: All rules are scoped to [data-theme="dark"] to prevent
 * breaking light mode. Global tokens live in theme.css.
 * 
 * Brand: "Mecánica de Precisión. Gestión Inteligente."
 */

/* ============================================
   DARK-ONLY COLOR TOKENS (Legacy Aliases)
   Already defined in theme.css [data-theme="dark"]
   block. Kept here only as reference.
   ============================================ */

/* ============================================
   BASE OVERRIDES — DARK MODE ONLY
   ============================================ */

/* Override Tailwind grays — dark mode */
[data-theme="dark"] body.nx-theme .bg-gray-100,
[data-theme="dark"] body.nx-theme .bg-gray-50,
[data-theme="dark"] body.nx-theme .bg-slate-50,
[data-theme="dark"] body.nx-theme .bg-slate-100 {
    background-color: var(--nx-carbon-slate) !important;
}

[data-theme="dark"] body.nx-theme .bg-white {
    background: var(--nx-titanium-armor) !important;
    border-color: var(--nx-border-subtle) !important;
}

/* Text color overrides — dark mode */
[data-theme="dark"] body.nx-theme .text-gray-900,
[data-theme="dark"] body.nx-theme .text-gray-800,
[data-theme="dark"] body.nx-theme .text-slate-800,
[data-theme="dark"] body.nx-theme .text-slate-900 {
    color: var(--nx-text-white) !important;
}

[data-theme="dark"] body.nx-theme .text-gray-700,
[data-theme="dark"] body.nx-theme .text-gray-600,
[data-theme="dark"] body.nx-theme .text-slate-700,
[data-theme="dark"] body.nx-theme .text-slate-600 {
    color: var(--nx-text-muted) !important;
}

[data-theme="dark"] body.nx-theme .text-gray-500,
[data-theme="dark"] body.nx-theme .text-gray-400,
[data-theme="dark"] body.nx-theme .text-slate-500,
[data-theme="dark"] body.nx-theme .text-slate-400 {
    color: var(--nx-text-subtle) !important;
}

/* Border overrides — dark mode */
[data-theme="dark"] body.nx-theme .border-gray-200,
[data-theme="dark"] body.nx-theme .border-gray-100,
[data-theme="dark"] body.nx-theme .border-slate-200,
[data-theme="dark"] body.nx-theme .border-slate-100 {
    border-color: var(--nx-border-subtle) !important;
}

/* ============================================
   COMPONENTS - BUTTONS — DARK MODE ONLY
   ============================================ */

/* Primary Button - Hyper Green with Colored Glow */
[data-theme="dark"] body.nx-theme .nx-btn-primary,
[data-theme="dark"] body.nx-theme .bg-blue-600 {
    background: var(--nx-hyper-green) !important;
    color: #000 !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(0, 230, 118, 0.39);
}

[data-theme="dark"] body.nx-theme .nx-btn-primary:hover,
[data-theme="dark"] body.nx-theme .bg-blue-600:hover {
    background: #00C853 !important;
    box-shadow: 0 6px 20px rgba(0, 230, 118, 0.5) !important;
    transform: translateY(-1px);
}

/* Secondary Button - Purple */
[data-theme="dark"] body.nx-theme .nx-btn-secondary {
    background: var(--nx-diagnostic-purple);
    color: white;
    box-shadow: 0 4px 14px var(--nx-purple-glow);
}

[data-theme="dark"] body.nx-theme .nx-btn-secondary:hover {
    background: #6D28D9;
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4);
}

/* Ghost Button */
[data-theme="dark"] body.nx-theme .nx-btn-ghost {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--nx-border-subtle);
    color: var(--nx-text-muted);
}

[data-theme="dark"] body.nx-theme .nx-btn-ghost:hover {
    background: rgba(6, 182, 212, 0.1);
    border-color: var(--nx-diagnostic-purple);
    color: var(--nx-diagnostic-purple);
}

/* ============================================
   COMPONENTS - CARDS — DARK MODE ONLY
   ============================================ */
[data-theme="dark"] body.nx-theme .nx-card,
[data-theme="dark"] body.nx-theme .rounded-xl.bg-white,
[data-theme="dark"] body.nx-theme .rounded-2xl.bg-white {
    background: var(--nx-surface-elevated) !important;
    border: 1px solid var(--nx-border-subtle) !important;
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.15);
}

[data-theme="dark"] body.nx-theme .nx-card:hover {
    border-color: var(--nx-border-purple);
    box-shadow: 0 8px 30px rgba(6, 182, 212, 0.25);
}

/* ============================================
   COMPONENTS - INPUTS — DARK MODE ONLY
   ============================================ */
[data-theme="dark"] body.nx-theme input[type="text"],
[data-theme="dark"] body.nx-theme input[type="email"],
[data-theme="dark"] body.nx-theme input[type="password"],
[data-theme="dark"] body.nx-theme input[type="number"],
[data-theme="dark"] body.nx-theme input[type="search"],
[data-theme="dark"] body.nx-theme select,
[data-theme="dark"] body.nx-theme textarea {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid var(--nx-border-subtle) !important;
    color: var(--nx-text-white) !important;
    border-radius: 12px;
}

[data-theme="dark"] body.nx-theme input:focus,
[data-theme="dark"] body.nx-theme select:focus,
[data-theme="dark"] body.nx-theme textarea:focus {
    background: rgba(15, 23, 42, 0.9) !important;
    border-color: var(--nx-diagnostic-purple) !important;
    box-shadow: 0 0 0 3px var(--nx-purple-glow) !important;
    outline: none !important;
}

[data-theme="dark"] body.nx-theme input::placeholder,
[data-theme="dark"] body.nx-theme textarea::placeholder {
    color: var(--nx-text-subtle) !important;
}

/* ============================================
   COMPONENTS - TABLES — DARK MODE ONLY
   ============================================ */
[data-theme="dark"] body.nx-theme table {
    background: transparent;
}

[data-theme="dark"] body.nx-theme thead {
    background: rgba(15, 23, 42, 0.5) !important;
}

[data-theme="dark"] body.nx-theme th {
    color: var(--nx-diagnostic-purple) !important;
    border-bottom: 1px solid var(--nx-border-subtle) !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

[data-theme="dark"] body.nx-theme tbody tr {
    border-bottom: 1px solid var(--nx-border-subtle);
}

[data-theme="dark"] body.nx-theme tbody tr:hover {
    background: rgba(6, 182, 212, 0.05) !important;
}

[data-theme="dark"] body.nx-theme td {
    color: var(--nx-text-muted);
}

/* ============================================
   COMPONENTS - NAVIGATION — DARK MODE ONLY
   ============================================ */
[data-theme="dark"] body.nx-theme nav:not(.nx-nav-group):not(.nx-crm-header):not(.config-header) {
    background: var(--nx-titanium-armor) !important;
    border: none !important;
}

/* CRM Header — Synced with sidebar base for seamless visual flow */
[data-theme="dark"] body.nx-theme nav.nx-crm-header {
    background: var(--sidebar-bg) !important;
}

/* ============================================
   COMPONENTS - STAT CARDS (KPI) — DARK MODE
   ============================================ */
[data-theme="dark"] body.nx-theme .nx-stat-green .nx-stat-icon {
    background: var(--nx-green-glow);
    color: var(--nx-hyper-green);
}

[data-theme="dark"] body.nx-theme .nx-stat-purple .nx-stat-icon {
    background: var(--nx-purple-glow);
    color: var(--nx-diagnostic-purple);
}

[data-theme="dark"] body.nx-theme .nx-stat-amber .nx-stat-icon {
    background: var(--nx-amber-glow);
    color: var(--nx-alert-amber);
}

[data-theme="dark"] body.nx-theme .nx-stat-red .nx-stat-icon {
    background: var(--nx-red-glow);
    color: var(--nx-danger-red);
}

/* Override old blue/purple icon backgrounds — dark mode */
[data-theme="dark"] body.nx-theme .bg-blue-100 {
    background: var(--nx-purple-glow) !important;
}

[data-theme="dark"] body.nx-theme .text-blue-600,
[data-theme="dark"] body.nx-theme .text-blue-500 {
    color: var(--nx-diagnostic-purple) !important;
}

[data-theme="dark"] body.nx-theme .bg-green-100 {
    background: var(--nx-green-glow) !important;
}

[data-theme="dark"] body.nx-theme .text-green-600,
[data-theme="dark"] body.nx-theme .text-green-500 {
    color: var(--nx-hyper-green) !important;
}

[data-theme="dark"] body.nx-theme .bg-purple-100 {
    background: var(--nx-purple-glow) !important;
}

[data-theme="dark"] body.nx-theme .text-purple-600 {
    color: var(--nx-diagnostic-purple) !important;
}

[data-theme="dark"] body.nx-theme .bg-orange-100 {
    background: var(--nx-amber-glow) !important;
}

[data-theme="dark"] body.nx-theme .text-orange-600 {
    color: var(--nx-alert-amber) !important;
}

/* ============================================
   COMPONENTS - BADGES / PILLS (Theme-agnostic)
   ============================================ */
body.nx-theme .nx-badge-success {
    background: var(--nx-green-glow);
    color: var(--nx-hyper-green);
    font-weight: 700;
    font-size: 0.65rem;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.nx-theme .nx-badge-warning {
    background: var(--nx-amber-glow);
    color: var(--nx-alert-amber);
}

body.nx-theme .nx-badge-danger {
    background: var(--nx-red-glow);
    color: var(--nx-danger-red);
}

body.nx-theme .nx-badge-info {
    background: var(--nx-purple-glow);
    color: var(--nx-diagnostic-purple);
}

/* ============================================
   COMPONENTS - MODALS — DARK MODE ONLY
   ============================================ */
[data-theme="dark"] body.nx-theme .nx-modal-backdrop {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(8px);
}

[data-theme="dark"] body.nx-theme .nx-modal-content {
    background: var(--nx-titanium-armor);
    border: 1px solid var(--nx-border-purple);
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

/* --- Default modal header (dark) --- */
[data-theme="dark"] body.nx-theme .nx-modal-header {
    background: var(--nx-carbon-slate);
    border-bottom: 1px solid var(--nx-border-purple);
    padding: 20px 24px;
    border-radius: 24px 24px 0 0;
}

/* ============================================================
   CONFIG DASHBOARD — Premium Gradient Headers (BOTH THEMES)
   Misma especificidad [data-theme] + body.nx-theme + #id
   garantiza victoria sobre la regla general de arriba.
   ============================================================ */

/* — Roles & Asistente IA — Violeta */
[data-theme="dark"] body.nx-theme #roleModal .nx-modal-header,
[data-theme="light"] body.nx-theme #roleModal .nx-modal-header,
[data-theme="dark"] body.nx-theme #assistantModal .nx-modal-header,
[data-theme="light"] body.nx-theme #assistantModal .nx-modal-header {
    background: linear-gradient(135deg, #C040FF 0%, #6D28D9 100%) !important;
    border-bottom: none !important;
}

/* — Secuencias — Sky Blue */
[data-theme="dark"] body.nx-theme #editSequenceModal .nx-modal-header,
[data-theme="light"] body.nx-theme #editSequenceModal .nx-modal-header {
    background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%) !important;
    border-bottom: none !important;
}

/* — Usuarios (Crear/Editar) — Cyan */
[data-theme="dark"] body.nx-theme #createUserModal .nx-modal-header,
[data-theme="light"] body.nx-theme #createUserModal .nx-modal-header,
[data-theme="dark"] body.nx-theme #editUserModal .nx-modal-header,
[data-theme="light"] body.nx-theme #editUserModal .nx-modal-header {
    background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%) !important;
    border-bottom: none !important;
}

/* — Técnicos — Naranja */
[data-theme="dark"] body.nx-theme #technicianModal .nx-modal-header,
[data-theme="light"] body.nx-theme #technicianModal .nx-modal-header {
    background: linear-gradient(135deg, #F97316 0%, #EA580C 100%) !important;
    border-bottom: none !important;
}

/* — Aseguradoras — Rosa */
[data-theme="dark"] body.nx-theme #insuranceModal .nx-modal-header,
[data-theme="light"] body.nx-theme #insuranceModal .nx-modal-header {
    background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%) !important;
    border-bottom: none !important;
}

/* — Close buttons blancos en headers con gradiente — */
[data-theme="dark"] body.nx-theme #roleModal .nx-modal-header .nx-modal-close,
[data-theme="light"] body.nx-theme #roleModal .nx-modal-header .nx-modal-close,
[data-theme="dark"] body.nx-theme #assistantModal .nx-modal-header .nx-modal-close,
[data-theme="light"] body.nx-theme #assistantModal .nx-modal-header .nx-modal-close,
[data-theme="dark"] body.nx-theme #editSequenceModal .nx-modal-header .nx-modal-close,
[data-theme="light"] body.nx-theme #editSequenceModal .nx-modal-header .nx-modal-close,
[data-theme="dark"] body.nx-theme #createUserModal .nx-modal-header .nx-modal-close,
[data-theme="light"] body.nx-theme #createUserModal .nx-modal-header .nx-modal-close,
[data-theme="dark"] body.nx-theme #editUserModal .nx-modal-header .nx-modal-close,
[data-theme="light"] body.nx-theme #editUserModal .nx-modal-header .nx-modal-close,
[data-theme="dark"] body.nx-theme #technicianModal .nx-modal-header .nx-modal-close,
[data-theme="light"] body.nx-theme #technicianModal .nx-modal-header .nx-modal-close,
[data-theme="dark"] body.nx-theme #insuranceModal .nx-modal-header .nx-modal-close,
[data-theme="light"] body.nx-theme #insuranceModal .nx-modal-header .nx-modal-close,
/* También botones genéricos dentro del header */
[data-theme="dark"] body.nx-theme #roleModal .nx-modal-header button,
[data-theme="light"] body.nx-theme #roleModal .nx-modal-header button,
[data-theme="dark"] body.nx-theme #assistantModal .nx-modal-header button,
[data-theme="light"] body.nx-theme #assistantModal .nx-modal-header button {
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}
[data-theme="dark"] body.nx-theme #roleModal .nx-modal-header .nx-modal-close:hover,
[data-theme="light"] body.nx-theme #roleModal .nx-modal-header .nx-modal-close:hover,
[data-theme="dark"] body.nx-theme #assistantModal .nx-modal-header .nx-modal-close:hover,
[data-theme="light"] body.nx-theme #assistantModal .nx-modal-header .nx-modal-close:hover,
[data-theme="dark"] body.nx-theme #editSequenceModal .nx-modal-header .nx-modal-close:hover,
[data-theme="light"] body.nx-theme #editSequenceModal .nx-modal-header .nx-modal-close:hover,
[data-theme="dark"] body.nx-theme #createUserModal .nx-modal-header .nx-modal-close:hover,
[data-theme="light"] body.nx-theme #createUserModal .nx-modal-header .nx-modal-close:hover,
[data-theme="dark"] body.nx-theme #editUserModal .nx-modal-header .nx-modal-close:hover,
[data-theme="light"] body.nx-theme #editUserModal .nx-modal-header .nx-modal-close:hover,
[data-theme="dark"] body.nx-theme #technicianModal .nx-modal-header .nx-modal-close:hover,
[data-theme="light"] body.nx-theme #technicianModal .nx-modal-header .nx-modal-close:hover,
[data-theme="dark"] body.nx-theme #insuranceModal .nx-modal-header .nx-modal-close:hover,
[data-theme="light"] body.nx-theme #insuranceModal .nx-modal-header .nx-modal-close:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.15) !important;
}


/* ============================================================
   CFDI CSD BANNER — Contraste modo claro
   El fondo rgba(245,158,11,0.10) es casi blanco en light mode,
   por lo que el amarillo pálido #FDE68A resulta invisible.
   En dark mode el fondo es oscuro-ámbar, así el amarillo sí contrasta.
   ============================================================ */
[data-theme="light"] body.nx-theme #cfdi-csd-banner p:first-child {
    color: #B45309 !important;   /* amber-700 — título */
}
[data-theme="light"] body.nx-theme #cfdi-csd-banner p:last-child {
    color: #92400E !important;   /* amber-800 — descripción */
}

/* ============================================
   SCROLLBAR STYLING — DARK MODE ONLY
   ============================================ */
[data-theme="dark"] body.nx-theme ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] body.nx-theme ::-webkit-scrollbar-track {
    background: var(--nx-carbon-slate);
}

@supports (-webkit-appearance: none) {
    [data-theme="dark"] body.nx-theme ::-webkit-scrollbar-thumb {
        background: var(--nx-titanium-light);
        border-radius: 4px;
    }

    [data-theme="dark"] body.nx-theme ::-webkit-scrollbar-thumb:hover {
        background: var(--nx-diagnostic-purple);
    }
}

/* ============================================
   UTILITY CLASSES (Theme-agnostic)
   ============================================ */
.nx-glow-green {
    box-shadow: 0 4px 14px var(--nx-green-glow);
}

.nx-glow-purple {
    box-shadow: 0 4px 14px var(--nx-purple-glow);
}

.nx-text-gradient {
    background: linear-gradient(135deg, var(--nx-hyper-green), var(--nx-diagnostic-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================
   COMPONENTS - BUDGET APPROVAL TOGGLE
   Universal toggle switch for budget approval.
   States: .is-off (default), .is-on (approved)
   ============================================ */

/* --- Toggle Row Container --- */
.nx-budget-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
    width: 100%;
}
.nx-budget-row.is-on {
    border-color: rgba(16, 185, 129, 0.2);
    background: rgba(16, 185, 129, 0.05);
}
/* Light mode overrides */
[data-theme="light"] .nx-budget-row {
    border-color: rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .nx-budget-row.is-on {
    border-color: rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.06);
}

/* --- Toggle Row Label --- */
.nx-budget-row .nx-budget-label {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nx-budget-row .nx-budget-label i {
    font-size: 0.75rem;
    color: #64748b;
    transition: color 0.3s ease;
}
.nx-budget-row .nx-budget-label span {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
    transition: color 0.3s ease;
}
.nx-budget-row.is-on .nx-budget-label i,
.nx-budget-row.is-on .nx-budget-label span {
    color: #34d399;
}
[data-theme="light"] .nx-budget-row .nx-budget-label i { color: #94a3b8; }
[data-theme="light"] .nx-budget-row .nx-budget-label span { color: #64748b; }
[data-theme="light"] .nx-budget-row.is-on .nx-budget-label i,
[data-theme="light"] .nx-budget-row.is-on .nx-budget-label span { color: #059669; }

/* --- Toggle Switch Track --- */
.nx-toggle {
    position: relative;
    width: 40px;
    height: 20px;
    border-radius: 9999px;
    background: #334155;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.3s ease;
    padding: 0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.nx-toggle.is-on {
    background: #10b981;
    border-color: rgba(52, 211, 153, 0.3);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.2);
}
.nx-toggle:hover { opacity: 0.9; }
[data-theme="light"] .nx-toggle {
    background: #cbd5e1;
    border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .nx-toggle.is-on {
    background: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}

/* --- Toggle Knob --- */
.nx-toggle .nx-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    background: #94a3b8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    pointer-events: none;
}
.nx-toggle.is-on .nx-toggle-knob {
    left: 22px;
    background: #ffffff;
}
.nx-toggle:hover .nx-toggle-knob {
    background: #cbd5e1;
}
.nx-toggle.is-on:hover .nx-toggle-knob {
    background: #ffffff;
}
[data-theme="light"] .nx-toggle .nx-toggle-knob {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* --- Work Order Button States --- */
.nx-ot-btn {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    cursor: not-allowed;
    background: rgba(var(--md-sys-color-surface-rgb, 30, 30, 46), 0.05);
    color: #475569;
}
.nx-ot-btn.is-enabled {
    cursor: pointer;
    color: #22d3ee;
    background: rgba(6, 182, 212, 0.08);
    border-color: rgba(6, 182, 212, 0.2);
}
.nx-ot-btn.is-enabled:hover {
    background: rgba(6, 182, 212, 0.15);
    color: #67e8f9;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.15);
}
[data-theme="light"] .nx-ot-btn {
    background: rgba(0, 0, 0, 0.03);
    color: #94a3b8;
}
[data-theme="light"] .nx-ot-btn.is-enabled {
    color: #0891b2;
    background: rgba(6, 182, 212, 0.06);
    border-color: rgba(6, 182, 212, 0.2);
}
[data-theme="light"] .nx-ot-btn.is-enabled:hover {
    background: rgba(6, 182, 212, 0.12);
    color: #0e7490;
}

/* ============================================
   SERVICE ORDER MODAL — LIGHT MODE OVERRIDES
   Scoped to #orderDetailModal for precision.
   Fixes hardcoded dark-mode Tailwind utilities
   that become invisible on light backgrounds.
   ============================================ */

/* --- Modal Container & Background --- */
[data-theme="light"] #orderDetailModal .nx-modal-container {
    background: var(--theme-modal-bg) !important;
    border-color: var(--theme-modal-border) !important;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(160, 32, 240, 0.08) !important;
}

/* --- Modal Header --- */
[data-theme="light"] #orderDetailModal .nx-modal-container > div:first-child {
    border-bottom-color: var(--md-sys-color-outline-variant) !important;
    background: var(--theme-modal-header) !important;
}

/* Fix header metadata text */
[data-theme="light"] #orderDetailModal .text-slate-400 {
    color: var(--md-sys-color-on-surface-variant) !important;
}

/* --- Tab Navigation Bar --- */
[data-theme="light"] #orderDetailModal [class*="border-slate-700"] {
    border-color: var(--md-sys-color-outline-variant) !important;
}

/* Tab bar background */
[data-theme="light"] #orderDetailModal .bg-\[var\(--md-sys-color-surface\)\]\/50 {
    background: var(--md-sys-color-surface-container-low) !important;
}

/* Tab bar inner container */
[data-theme="light"] #orderDetailModal .bg-\[var\(--md-sys-color-surface\)\] {
    background: var(--md-sys-color-surface-container-lowest) !important;
    border-color: var(--md-sys-color-outline-variant) !important;
}

/* Inactive tab text */
[data-theme="light"] #orderDetailModal button[id^="tabBtn"]:not([class*="bg-cyan"]) {
    color: var(--md-sys-color-on-surface-variant) !important;
}

/* --- Glass Panel Overrides --- */
[data-theme="light"] #orderDetailModal .glass-panel {
    background: var(--premium-glass-bg) !important;
    border: var(--premium-glass-border) !important;
    box-shadow: var(--premium-glass-shadow) !important;
    backdrop-filter: var(--premium-blur) !important;
}

/* --- Vehicle Info Strip --- */
[data-theme="light"] #orderDetailModal .glass-panel .bg-black\/40 {
    background: var(--md-sys-color-surface-container-high) !important;
    border-color: var(--md-sys-color-outline-variant) !important;
}

[data-theme="light"] #orderDetailModal .glass-panel .text-gray-400 {
    color: var(--md-sys-color-on-surface-variant) !important;
}

/* --- Table Headers (Conceptos, Rentabilidad) --- */
[data-theme="light"] #orderDetailModal .bg-black\/20 {
    background: var(--md-sys-color-surface-container-high) !important;
}

[data-theme="light"] #orderDetailModal thead {
    background: var(--md-sys-color-surface-container-high) !important;
}

[data-theme="light"] #orderDetailModal thead .text-slate-500,
[data-theme="light"] #orderDetailModal thead th {
    color: var(--md-sys-color-on-surface-variant) !important;
}

/* --- Table Body Text --- */
[data-theme="light"] #orderDetailModal tbody .text-slate-200,
[data-theme="light"] #orderDetailModal tbody .text-slate-300,
[data-theme="light"] #orderDetailModal tbody .text-slate-400,
[data-theme="light"] #orderDetailModal tbody .text-white,
[data-theme="light"] #orderDetailModal tbody td {
    color: var(--md-sys-color-on-surface) !important;
}

[data-theme="light"] #orderDetailModal tbody {
    color: var(--md-sys-color-on-surface) !important;
}

/* Table row hover */
[data-theme="light"] #orderDetailModal .hover\:bg-white\/5:hover {
    background: var(--md-sys-color-surface-container-low) !important;
}

/* Table row dividers */
[data-theme="light"] #orderDetailModal .divide-white\/5 > :not(:last-child) {
    border-bottom-color: var(--md-sys-color-outline-variant) !important;
}

/* Contact info text (dynamic JS) */
[data-theme="light"] #orderDetailModal .text-slate-300 {
    color: var(--md-sys-color-on-surface) !important;
}

/* --- Card Headers ("Conceptos de la Orden", "Desglose") --- */
[data-theme="light"] #orderDetailModal .font-bold.text-slate-300 {
    color: var(--md-sys-color-on-surface) !important;
}

[data-theme="light"] #orderDetailModal .text-cyan-400 {
    color: var(--md-sys-color-primary) !important;
}

/* --- Section Headers & Labels --- */
[data-theme="light"] #orderDetailModal .text-slate-500 {
    color: var(--md-sys-color-on-surface-variant) !important;
}

[data-theme="light"] #orderDetailModal .text-slate-600 {
    color: var(--md-sys-color-on-surface-variant) !important;
}

/* --- White/Alpha Borders → Solid Light Borders --- */
[data-theme="light"] #orderDetailModal .border-white\/5,
[data-theme="light"] #orderDetailModal .border-white\/10,
[data-theme="light"] #orderDetailModal .border-white\/20 {
    border-color: var(--md-sys-color-outline-variant) !important;
}

/* Dashed border in financial summary */
[data-theme="light"] #orderDetailModal .border-dashed {
    border-color: var(--md-sys-color-outline) !important;
}

/* --- Card Footer Backgrounds --- */
[data-theme="light"] #orderDetailModal .border-t.border-white\/5.bg-black\/20 {
    background: var(--md-sys-color-surface-container-low) !important;
    border-top-color: var(--md-sys-color-outline-variant) !important;
}

/* --- RIGHT SIDEBAR --- */
[data-theme="light"] #orderDetailModal > div > div > div:last-child[style*="width: 384px"] {
    background: var(--md-sys-color-surface-container-low) !important;
    border-left-color: var(--md-sys-color-outline-variant) !important;
}

/* Financial card total box */
[data-theme="light"] #orderDetailModal .bg-black\/20.rounded-xl {
    background: var(--md-sys-color-surface-container) !important;
    border-color: var(--md-sys-color-outline-variant) !important;
}

/* --- Action Buttons (Dark Mode) --- */
[data-theme="dark"] #orderDetailModal .glass-button {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(160, 32, 240, 0.2) !important;
    border-radius: 8px;
    backdrop-filter: blur(8px);
    transition: all 0.25s ease;
}

[data-theme="dark"] #orderDetailModal .glass-button:hover {
    background: rgba(160, 32, 240, 0.1) !important;
    border-color: rgba(160, 32, 240, 0.4) !important;
    box-shadow: 0 4px 14px rgba(160, 32, 240, 0.15);
}

/* --- Action Buttons (Light Mode) --- */
[data-theme="light"] #orderDetailModal .glass-button {
    background: var(--md-sys-color-surface-container) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}

[data-theme="light"] #orderDetailModal .glass-button:hover {
    background: var(--md-sys-color-surface-container-high) !important;
}

/* Fix button text colors */
[data-theme="light"] #orderDetailModal .glass-button.text-slate-300 {
    color: var(--md-sys-color-on-surface-variant) !important;
}

[data-theme="light"] #orderDetailModal .glass-button.text-emerald-400 {
    color: #059669 !important;
}

[data-theme="light"] #orderDetailModal .glass-button.text-emerald-400:hover {
    color: #047857 !important;
}

/* Emerald accent in light mode */
[data-theme="light"] #orderDetailModal .text-emerald-400 {
    color: #059669 !important;
}

/* --- Tab 2: General & Client --- */
[data-theme="light"] #orderDetailModal .bg-\[var\(--md-sys-color-surface\)\]\/50 {
    background: var(--md-sys-color-surface-container-low) !important;
}

[data-theme="light"] #orderDetailModal .bg-\[var\(--md-sys-color-surface-variant\)\] {
    background: var(--md-sys-color-surface-container-high) !important;
}

/* --- Disabled button fix --- */
[data-theme="light"] #orderDetailModal button:disabled {
    color: var(--md-sys-color-outline) !important;
    background: var(--md-sys-color-surface-container-low) !important;
}

/* --- Hover states for interactive rows --- */
[data-theme="light"] #orderDetailModal .hover\:bg-\[var\(--md-sys-color-surface\)\]\/5:hover {
    background: var(--md-sys-color-surface-container-low) !important;
}

/* --- Surface divider lines --- */
[data-theme="light"] #orderDetailModal .bg-\[var\(--md-sys-color-surface\)\]\/10,
[data-theme="light"] #orderDetailModal .h-px.bg-\[var\(--md-sys-color-surface\)\]\/10 {
    background: var(--md-sys-color-outline-variant) !important;
}

/* --- Close & History Buttons --- */
[data-theme="light"] #orderDetailModal button[title="Historial"],
[data-theme="light"] #orderDetailModal button[onclick*="closeOrderDetail"] {
    background: var(--theme-close-btn-bg) !important;
    border-color: var(--md-sys-color-outline-variant) !important;
    color: var(--md-sys-color-on-surface-variant) !important;
}

[data-theme="light"] #orderDetailModal button[onclick*="closeOrderDetail"]:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
}

/* --- Inventory Status Badge Card --- */
[data-theme="light"] #orderDetailModal #modalInvCard .text-slate-400 {
    color: var(--md-sys-color-on-surface-variant) !important;
}

[data-theme="light"] #orderDetailModal .bg-\[var\(--md-sys-color-surface-variant\)\] {
    background: var(--md-sys-color-surface-container) !important;
}

/* ============================================
   NEW ORDER MODAL — LIGHT MODE FIXES
   ============================================ */

/* Preserve violet gradient icon in light mode */
[data-theme="light"] .nx-modal-header .from-violet-500 {
    background: linear-gradient(to bottom right, #a020f0, #A020F0) !important;
    color: white !important;
}

/* Container */
[data-theme="light"] #newOrderModal .nx-modal-container {
    background: var(--theme-modal-bg) !important;
    border-color: var(--theme-modal-border) !important;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(160, 32, 240, 0.08) !important;
}

/* Header */
[data-theme="light"] #newOrderModal .nx-modal-header {
    background: var(--theme-modal-header) !important;
    border-bottom-color: var(--md-sys-color-outline-variant) !important;
}

/* Footer */
[data-theme="light"] #newOrderModal .nx-modal-footer {
    background: var(--md-sys-color-surface-container-low) !important;
    border-top-color: var(--md-sys-color-outline-variant) !important;
}

/* Close button */
[data-theme="light"] #newOrderModal button[title="Cerrar"] {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: var(--md-sys-color-outline-variant) !important;
    color: var(--md-sys-color-on-surface-variant) !important;
}

/* ============================================
   PATTERN BACKGROUNDS — DARK MODE ONLY
   ============================================ */
[data-theme="dark"] body.nx-theme .pattern-bg {
    background-color: var(--nx-carbon-slate) !important;
    background-image:
        linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
}

/* ============================================================
   INVENTORY AGING — Light Mode Overrides
   Problem: inline dark gradients (rgba 30,41,59 / 15,23,42) in
   inventory_aging.html don't respond to theme tokens.
   Strategy: CSS-only [data-theme="light"] + !important overrides.
   ============================================================ */

/* --- Aging KPI Cards (4 cubes: 0-90, 91-180, 181-360, 360+) --- */
[data-theme="light"] .aging-card {
    background: var(--md-sys-color-surface) !important;
    border-color: var(--md-sys-color-outline-variant) !important;
    box-shadow: var(--md-sys-elevation-1) !important;
}

/* Glow blobs — decorative only, hide in light */
[data-theme="light"] .aging-card > .absolute.blur-2xl {
    display: none !important;
}

/* Semantic color labels — darken for light backgrounds */
[data-theme="light"] .aging-card .text-emerald-400,
[data-theme="light"] .aging-card .text-emerald-300\/60 {
    color: #059669 !important;
}

[data-theme="light"] .aging-card .text-blue-400,
[data-theme="light"] .aging-card .text-blue-300\/60 {
    color: #2563EB !important;
}

[data-theme="light"] .aging-card .text-amber-400,
[data-theme="light"] .aging-card .text-amber-300\/60 {
    color: #D97706 !important;
}

[data-theme="light"] .aging-card .text-red-400,
[data-theme="light"] .aging-card .text-red-300 {
    color: #DC2626 !important;
}

/* Semantic dot indicators — same color, slightly more opaque */
[data-theme="light"] .aging-card .bg-emerald-400 { background-color: #10B981 !important; }
[data-theme="light"] .aging-card .bg-blue-400 { background-color: #3B82F6 !important; }
[data-theme="light"] .aging-card .bg-amber-400 { background-color: #F59E0B !important; }
[data-theme="light"] .aging-card .bg-red-500 { background-color: #EF4444 !important; }

/* --- Liquidation Candidates Table Section --- */
[data-theme="light"] #agingCubes + section {
    background: var(--md-sys-color-surface) !important;
    border-color: var(--md-sys-color-outline-variant) !important;
    box-shadow: var(--md-sys-elevation-1) !important;
}

/* Table header bar (divider) */
[data-theme="light"] #agingCubes + section > div:first-child {
    border-bottom-color: var(--md-sys-color-outline-variant) !important;
}

/* Filter badge */
[data-theme="light"] #agingCubes + section .rounded-full[style*="background: rgba(239, 68, 68"] {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: #DC2626 !important;
}

/* Table thead */
[data-theme="light"] #agingCubes + section thead {
    background: var(--md-sys-color-surface-container-high) !important;
}

[data-theme="light"] #agingCubes + section thead tr {
    color: var(--md-sys-color-on-surface-variant) !important;
    border-color: var(--md-sys-color-outline-variant) !important;
}

/* Table body */
[data-theme="light"] #candidatesTableBody {
    color: var(--md-sys-color-on-surface) !important;
}

[data-theme="light"] #candidatesTableBody .text-slate-500,
[data-theme="light"] #candidatesTableBody .text-slate-600 {
    color: var(--md-sys-color-on-surface-variant) !important;
}

/* Empty state icon circle */
[data-theme="light"] #candidatesTableBody .rounded-full[style*="background: rgba(100, 116, 139"] {
    background: var(--md-sys-color-surface-container) !important;
}

[data-theme="light"] #candidatesTableBody .text-slate-600 i {
    color: #94A3B8 !important;
}

/* --- Export Button --- */
[data-theme="light"] button[onclick="exportToExcel()"] {
    background: var(--md-sys-color-surface-container) !important;
    border-color: var(--md-sys-color-outline) !important;
    color: var(--md-sys-color-on-surface-variant) !important;
}

/* --- Section Header Icon (gradient clock) --- */
[data-theme="light"] .flex.items-center.gap-3 > div[style*="background: linear-gradient(135deg, #06B6D4"] > i {
    color: white !important;
}

/* --- Subtitle text (shared selector, scoped to main content) --- */
[data-theme="light"] main.abyssal-bg .text-slate-400 {
    color: var(--md-sys-color-on-surface-variant) !important;
}


/* ============================================================
   DISCOUNT RULES (Motor de Precios) — Light Mode Overrides
   Problem: inline dark gradients (rgba 30,41,59 / 15,23,42) in
   discount_rules.html don't respond to theme tokens.
   Strategy: CSS-only [data-theme="light"] + !important overrides.
   ============================================================ */

/* --- Main Rules Section Card --- */
[data-theme="light"] main.abyssal-bg section[style*="linear-gradient(145deg, rgba(30, 41, 59"] {
    background: var(--md-sys-color-surface) !important;
    border-color: var(--md-sys-color-outline-variant) !important;
    box-shadow: var(--md-sys-elevation-1) !important;
}

/* Section header divider */
[data-theme="light"] main.abyssal-bg section[style*="linear-gradient(145deg, rgba(30, 41, 59"] > div:first-child {
    border-bottom-color: var(--md-sys-color-outline-variant) !important;
}

/* Section footer divider (above "Añadir Escalón" button) */
[data-theme="light"] main.abyssal-bg section[style*="linear-gradient(145deg, rgba(30, 41, 59"] > div:last-child {
    border-top-color: var(--md-sys-color-outline-variant) !important;
}

/* FIFO Badge */
[data-theme="light"] .rounded-full[style*="background: rgba(6, 182, 212, 0.15)"][style*="color: #22D3EE"] {
    background: rgba(6, 182, 212, 0.08) !important;
    border-color: rgba(6, 182, 212, 0.2) !important;
    color: #0891B2 !important;
}

/* --- Rule Rows (template-generated) --- */
[data-theme="light"] .rule-row {
    background: var(--md-sys-color-surface-container-low) !important;
    border-color: var(--md-sys-color-outline-variant) !important;
}

[data-theme="light"] .rule-row:hover {
    border-color: rgba(6, 182, 212, 0.35) !important;
}

/* Rule index badge */
[data-theme="light"] .rule-row .index-badge {
    background: rgba(6, 182, 212, 0.06) !important;
    border-color: rgba(6, 182, 212, 0.18) !important;
    color: #0891B2 !important;
}

/* Days input */
[data-theme="light"] .rule-row input[name="min_aging_days"] {
    background: var(--md-sys-color-surface-container) !important;
    border-color: var(--md-sys-color-outline) !important;
    color: var(--md-sys-color-on-surface) !important;
}

/* Discount % input */
[data-theme="light"] .rule-row input[name="discount_percent"] {
    background: rgba(6, 182, 212, 0.05) !important;
    border-color: rgba(6, 182, 212, 0.18) !important;
    color: #0891B2 !important;
}

/* Row labels */
[data-theme="light"] .rule-row .text-slate-400 {
    color: var(--md-sys-color-on-surface-variant) !important;
}

[data-theme="light"] .rule-row .text-slate-500 {
    color: #64748B !important;
}

/* --- Add Button (dashed border) --- */
[data-theme="light"] button[onclick="addMetricRow()"] {
    background: rgba(6, 182, 212, 0.03) !important;
    border-color: rgba(6, 182, 212, 0.18) !important;
    color: #0891B2 !important;
}

/* --- Bottom Cards Grid --- */

/* Exclusions Card */
[data-theme="light"] .grid.grid-cols-1.md\:grid-cols-2 > div[style*="opacity: 0.75"] {
    background: var(--md-sys-color-surface) !important;
    border-color: var(--md-sys-color-outline-variant) !important;
    box-shadow: var(--md-sys-elevation-1) !important;
}

[data-theme="light"] .grid.grid-cols-1.md\:grid-cols-2 > div[style*="opacity: 0.75"] .text-slate-300 {
    color: var(--md-sys-color-on-surface) !important;
}

[data-theme="light"] .grid.grid-cols-1.md\:grid-cols-2 > div[style*="opacity: 0.75"] .text-slate-500,
[data-theme="light"] .grid.grid-cols-1.md\:grid-cols-2 > div[style*="opacity: 0.75"] .text-slate-400 {
    color: var(--md-sys-color-on-surface-variant) !important;
}

/* Exclusion inner toggle row */
[data-theme="light"] .grid.grid-cols-1.md\:grid-cols-2 > div[style*="opacity: 0.75"] label[style*="background: rgba(30, 41, 59"] {
    background: var(--md-sys-color-surface-container-low) !important;
}

/* "Próximamente" badge */
[data-theme="light"] .grid.grid-cols-1.md\:grid-cols-2 > div[style*="opacity: 0.75"] .rounded-full[style*="background: rgba(100, 116, 139"] {
    background: var(--md-sys-color-surface-container-high) !important;
    color: var(--md-sys-color-on-surface-variant) !important;
}

/* Global Application Mode Card (Violet) */
[data-theme="light"] .grid.grid-cols-1.md\:grid-cols-2 > div[style*="rgba(139, 92, 246"] {
    background: linear-gradient(145deg, rgba(160, 32, 240, 0.05), var(--md-sys-color-surface)) !important;
    border-color: var(--nx-brand-violet-border) !important;
    box-shadow: var(--md-sys-elevation-1), 0 0 20px rgba(160, 32, 240, 0.03) !important;
}

/* Violet card inner toggle row */
[data-theme="light"] .grid.grid-cols-1.md\:grid-cols-2 > div[style*="rgba(139, 92, 246"] div[style*="background: rgba(30, 41, 59"] {
    background: var(--md-sys-color-surface-container-low) !important;
}

[data-theme="light"] .grid.grid-cols-1.md\:grid-cols-2 > div[style*="rgba(139, 92, 246"] .text-slate-400 {
    color: var(--md-sys-color-on-surface-variant) !important;
}

/* --- Toggle Switch (light mode base) --- */
[data-theme="light"] .toggle-switch {
    background: #CBD5E1 !important;
}

[data-theme="light"] .toggle-switch.active {
    background: linear-gradient(135deg, #06B6D4, #0891B2) !important;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.2) !important;
}

/* --- Discount Rules Scrollbar (light mode) --- */
[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #CBD5E1 !important;
}

[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94A3B8 !important;
}


/* ============================================================
   BRANDING & COMPANY CONTEXT OVERRIDES
   ============================================================ */

/* 1. Sidebar Company/Workshop Name Branding - Nexo Violeta */
#crm-header-company-name {
    color: var(--md-sys-color-ai) !important;
}

.nx-crm-header .w-8.h-8 .fa-building {
    color: var(--md-sys-color-ai) !important;
}

/* 2. Company Context Pill (Dashboard) Light Mode Overrides */
[data-theme="light"] #company-context-pill {
    background-color: var(--md-sys-color-surface-variant) !important;
    border-color: var(--md-sys-color-outline-variant) !important;
}

[data-theme="light"] #company-context-name {
    color: var(--md-sys-color-on-background) !important;
}

[data-theme="light"] #company-context-pill .fa-building {
    opacity: 1 !important;
}