/* =====================================================
   NETWORKER — Dark Theme for Ticket System
   Overrides Tailwind CDN with brand design system
   ===================================================== */

/* === VARIABLES === */
:root {
  --bg:      #1a2035;
  --bg2:     #161e30;
  --bg3:     #111827;
  --card:    #1e3a5f;
  --blue:    #1a1aff;
  --purple:  #9b30ff;
  --cyan:    #00d4ff;
  --grad:    linear-gradient(135deg, #1a1aff 0%, #9b30ff 55%, #00d4ff 100%);
  --border:  #253354;
  --border-a: rgba(0,212,255,.4);
  --g400:    #8b9cbf;
  --g600:    #475569;
  --radius:  16px;
  --radius-sm: 10px;
  --tr:      .3s cubic-bezier(.4,0,.2,1);
  --ft:      'Exo 2', sans-serif;
  --fb:      'Nunito', sans-serif;
}

/* === BASE === */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--bg) !important;
  color: #e0e7ff !important;
  font-family: var(--fb) !important;
}
h1, h2, h3, h4, h5 { font-family: var(--ft) !important; }

/* === TAILWIND BACKGROUND OVERRIDES === */
.bg-white         { background: var(--card) !important; }
.bg-gray-50       { background: var(--bg) !important; }
.bg-gray-100      { background: var(--bg2) !important; }
.bg-gray-200      { background: var(--bg3) !important; }
.bg-slate-50      { background: #131a2e !important; }
.bg-slate-900     { background: #111827 !important; }
.bg-slate-800     { background: var(--bg2) !important; }
.bg-slate-700     { background: var(--border) !important; }
.bg-blue-50       { background: rgba(0,212,255,.06) !important; }

/* === TAILWIND TEXT OVERRIDES === */
.text-gray-900, .text-gray-800 { color: #e0e7ff !important; }
.text-gray-700                 { color: #c7d0f0 !important; }
.text-gray-600                 { color: #8b9cbf !important; }
.text-gray-500                 { color: #64748b !important; }
.text-gray-400                 { color: #475569 !important; }
.text-slate-900, .text-slate-800 { color: #e0e7ff !important; }
.text-slate-700                { color: #c7d0f0 !important; }
.text-slate-600                { color: #8b9cbf !important; }
.text-slate-500, .text-slate-400 { color: #64748b !important; }
.text-blue-600, .text-blue-500 { color: var(--cyan) !important; }
.text-green-600, .text-green-500 { color: #22c55e !important; }

/* === TAILWIND BORDER OVERRIDES === */
.border-gray-100, .border-gray-200, .border-gray-300 { border-color: var(--border) !important; }
.divide-gray-200 > * + * { border-color: var(--border) !important; }

/* === INPUTS === */
input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
textarea, select {
  background: rgba(255,255,255,0.04) !important;
  border-color: var(--border) !important;
  color: #f1f5f9 !important;
}
input::placeholder, textarea::placeholder { color: var(--g600) !important; }
option { background: var(--bg2); color: #f1f5f9; }
.focus\:ring-blue-500:focus, .focus\:ring-2:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,212,255,.15) !important;
  outline: none !important;
}

/* === BUTTONS === */
.bg-blue-600, .bg-blue-500 {
  background: var(--grad) !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(26,26,255,.3) !important;
}
.hover\:bg-blue-700:hover { filter: brightness(1.08) !important; }
.hover\:bg-slate-700:hover { background: rgba(255,255,255,.06) !important; }
.hover\:bg-slate-800:hover { background: rgba(255,255,255,.04) !important; }

/* === SHADOWS === */
.shadow-2xl { box-shadow: 0 0 60px rgba(0,212,255,.06), 0 25px 60px rgba(0,0,0,.6) !important; }
.shadow-lg  { box-shadow: 0 0 30px rgba(0,212,255,.05), 0 10px 30px rgba(0,0,0,.5) !important; }
.shadow-sm  { box-shadow: 0 2px 8px rgba(0,0,0,.4) !important; }

/* === ALERTS / MESSAGES === */
.bg-red-50    { background: rgba(239,68,68,.1)  !important; }
.bg-green-50  { background: rgba(34,197,94,.1)  !important; }
.border-red-200  { border-color: rgba(239,68,68,.3)  !important; }
.border-green-200 { border-color: rgba(34,197,94,.3) !important; }
.text-red-700  { color: #f87171 !important; }
.text-green-700 { color: #4ade80 !important; }

/* === STATUS BADGE TAILWIND OVERRIDES === */
/* Abierto — bg-blue-100 text-blue-700 */
.bg-blue-100  { background: rgba(0,212,255,.12)   !important; }
.text-blue-700, .text-blue-800 { color: var(--cyan) !important; }
/* En progreso — bg-amber-100 text-amber-700 */
.bg-amber-100  { background: rgba(251,191,36,.12)  !important; }
.text-amber-700, .text-amber-800 { color: #fbbf24 !important; }
/* Resuelto — bg-emerald-100 text-emerald-700 */
.bg-emerald-100 { background: rgba(34,197,94,.12)  !important; }
.text-emerald-700, .text-emerald-800 { color: #22c55e !important; }
.text-emerald-600 { color: #4ade80 !important; }
/* Cerrado — bg-gray-100 text-gray-500 */
.bg-gray-100   { background: rgba(107,114,128,.1)  !important; }
.text-gray-500 { color: #9ca3af !important; }
/* Verde genérico */
.bg-green-100 { background: rgba(34,197,94,.12)    !important; }
.text-green-700, .text-green-800 { color: #4ade80 !important; }
/* Amarillo */
.bg-yellow-100 { background: rgba(251,191,36,.12)  !important; }
.text-yellow-700, .text-yellow-800 { color: #fbbf24 !important; }
/* Urgente / rojo */
.bg-red-100   { background: rgba(239,68,68,.12)    !important; }
.text-red-700  { color: #f87171 !important; }
/* Alta / naranja */
.bg-orange-100 { background: rgba(251,146,60,.12)  !important; }
.text-orange-700, .text-orange-800 { color: #fb923c !important; }
/* Morado (company_admin) */
.bg-purple-100 { background: rgba(155,48,255,.12)  !important; }
.text-purple-700, .text-purple-600 { color: #c084fc !important; }
/* Cyan */
.bg-cyan-100   { background: rgba(0,212,255,.1)    !important; }

/* === SCROLLBAR === */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(155,48,255,.4); border-radius: 10px; }

/* =====================================================
   NT COMPONENT CLASSES
   ===================================================== */

/* Logo block */
.nt-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nt-logo-icon {
  width: 40px; height: 40px; border-radius: 8px;
  background: rgba(26,26,255,.08);
  border: 1px solid rgba(155,48,255,.25);
  display: flex; align-items: center; justify-content: center;
  padding: 3px; flex-shrink: 0;
}
.nt-logo-icon img {
  width: 34px; height: 34px; object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(0,212,255,.4))
          drop-shadow(0 0 12px rgba(155,48,255,.3));
}
.nt-logo-text { display: flex; flex-direction: column; }
.nt-logo-name { color: #fff; font-weight: 700; font-size: 13px; line-height: 1.1; letter-spacing: .5px; font-family: var(--ft); }
.nt-logo-sub  { color: var(--cyan); font-size: 8px; letter-spacing: 3px; font-family: var(--ft); text-transform: uppercase; }

/* Status badges */
.nt-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 50px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap;
}
.nt-badge-open     { background: rgba(0,212,255,.12);   color: var(--cyan);  border: 1px solid rgba(0,212,255,.3); }
.nt-badge-progress { background: rgba(251,191,36,.12);  color: #fbbf24;      border: 1px solid rgba(251,191,36,.3); }
.nt-badge-resolved { background: rgba(34,197,94,.12);   color: #22c55e;      border: 1px solid rgba(34,197,94,.3); }
.nt-badge-closed   { background: rgba(107,114,128,.12); color: #9ca3af;      border: 1px solid rgba(107,114,128,.25); }
.nt-badge-urgent   { background: rgba(239,68,68,.12);   color: #f87171;      border: 1px solid rgba(239,68,68,.3); }
.nt-badge-high     { background: rgba(251,146,60,.12);  color: #fb923c;      border: 1px solid rgba(251,146,60,.3); }
.nt-badge-medium   { background: rgba(251,191,36,.12);  color: #fbbf24;      border: 1px solid rgba(251,191,36,.3); }
.nt-badge-low      { background: rgba(34,197,94,.12);   color: #22c55e;      border: 1px solid rgba(34,197,94,.3); }

/* Card */
.nt-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: var(--tr);
}
.nt-card:hover {
  border-color: rgba(0,212,255,.2);
  box-shadow: 0 0 20px rgba(0,212,255,.06), 0 8px 24px rgba(0,0,0,.4);
}

/* Stat card */
.nt-stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  transition: var(--tr);
}
.nt-stat:hover { border-color: rgba(0,212,255,.2); }

/* Sidebar */
.nt-sidebar {
  background: #111827;
  border-right: 1px solid rgba(255,255,255,.05);
}
.nt-sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; color: var(--g400);
  transition: var(--tr); cursor: pointer; text-decoration: none;
}
.nt-sidebar-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.nt-sidebar-item.active {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 4px 16px rgba(26,26,255,.25);
}
.nt-sidebar-divider { border-top: 1px solid rgba(255,255,255,.05); margin: 6px 12px; }

/* Input */
.nt-input {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: #f1f5f9; padding: .75rem 1rem;
  width: 100%; font-family: var(--fb);
  transition: border-color var(--tr);
}
.nt-input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,212,255,.15); }
.nt-input::placeholder { color: var(--g600); }

/* Label */
.nt-label {
  display: block; font-size: 11px; font-weight: 700;
  color: var(--g400); margin-bottom: 6px; letter-spacing: .06em;
  text-transform: uppercase; font-family: var(--ft);
}

/* Button */
.nt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: .7rem 1.5rem; border-radius: var(--radius-sm);
  background: var(--grad); color: #fff;
  font-family: var(--ft); font-weight: 600; font-size: .9rem;
  border: none; cursor: pointer; transition: var(--tr);
  box-shadow: 0 4px 20px rgba(26,26,255,.3);
}
.nt-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 30px rgba(0,212,255,.35); }
.nt-btn-sm { padding: .45rem 1rem; font-size: .8rem; }
.nt-btn-outline {
  background: transparent; border: 1px solid var(--border-a);
  color: var(--cyan); box-shadow: none;
}
.nt-btn-outline:hover { background: rgba(0,212,255,.08); box-shadow: 0 0 20px rgba(0,212,255,.15); }
.nt-btn-danger { background: rgba(239,68,68,.15); color: #f87171; border: 1px solid rgba(239,68,68,.3); box-shadow: none; }
.nt-btn-danger:hover { background: rgba(239,68,68,.25); }

/* Table */
.nt-table { width: 100%; border-collapse: collapse; }
.nt-table th {
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--border);
  color: var(--g400); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 10px 14px; text-align: left; font-family: var(--ft);
}
.nt-table td {
  border-bottom: 1px solid rgba(255,255,255,.04);
  padding: 12px 14px; font-size: 13px; color: #c7d0f0;
  vertical-align: middle;
}
.nt-table tr:hover td { background: rgba(255,255,255,.02); }

/* Gradient text */
.nt-grad-text {
  background: linear-gradient(90deg, #00d4ff, #9b30ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glow decorative line */
.nt-glow-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.3), rgba(155,48,255,.3), transparent);
}

/* Hover helpers */
.hover\:text-red-400:hover   { color: #f87171 !important; }
.hover\:text-white:hover     { color: #fff !important; }
.hover\:underline:hover      { text-decoration: underline; }
.hover\:bg-slate-50:hover    { background: rgba(255,255,255,.04) !important; }
.hover\:bg-white:hover       { background: rgba(255,255,255,.06) !important; }

/* Animation */
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.fade-in { animation: fadeIn .22s ease; }

/* =====================================================
   FILTER TABS — Status & Invoice
   ===================================================== */

/* Base: todos los tabs inactivos */
.status-tab, .invoice-tab {
  background: #253354 !important;
  color: #8b9cbf !important;
  border: 1px solid #2e4070 !important;
  box-shadow: none !important;
}
.status-tab:hover, .invoice-tab:hover {
  background: #2d4a70 !important;
  color: #c7d0f0 !important;
}

/* bg-white/70 inactivo generado por JS */
.status-tab.bg-white\/70, .invoice-tab.bg-white\/70 {
  background: #253354 !important;
  color: #8b9cbf !important;
}

/* Activo genérico (bg-slate-800 añadido por JS) */
.status-tab.bg-slate-800, .invoice-tab.bg-slate-800 {
  background: #1e3a5f !important;
  color: #e0e7ff !important;
  border-color: #3b6abf !important;
  box-shadow: 0 4px 16px rgba(30,58,95,.45) !important;
}

/* Activos semánticos por estado */
#tab-abierto.bg-slate-800 {
  background: rgba(0,212,255,.15) !important;
  color: #00d4ff !important;
  border-color: rgba(0,212,255,.4) !important;
  box-shadow: 0 0 16px rgba(0,212,255,.2) !important;
}
#tab-en_progreso.bg-slate-800 {
  background: rgba(251,191,36,.15) !important;
  color: #fbbf24 !important;
  border-color: rgba(251,191,36,.35) !important;
  box-shadow: 0 0 16px rgba(251,191,36,.15) !important;
}
#tab-resuelto.bg-slate-800 {
  background: rgba(34,197,94,.15) !important;
  color: #22c55e !important;
  border-color: rgba(34,197,94,.35) !important;
  box-shadow: 0 0 16px rgba(34,197,94,.15) !important;
}
#tab-cerrado.bg-slate-800 {
  background: rgba(107,114,128,.15) !important;
  color: #9ca3af !important;
  border-color: rgba(107,114,128,.3) !important;
  box-shadow: none !important;
}

/* Contadores dentro de los tabs */
#count-all       { background: rgba(255,255,255,.15) !important; color: #fff !important; }
#count-abierto   { background: rgba(0,212,255,.15)  !important; color: #00d4ff !important; }
#count-en_progreso { background: rgba(251,191,36,.15) !important; color: #fbbf24 !important; }
#count-resuelto  { background: rgba(34,197,94,.15)  !important; color: #22c55e !important; }
#count-cerrado   { background: rgba(107,114,128,.15) !important; color: #9ca3af !important; }

/* =====================================================
   VISTA TARJETAS — Cards
   ===================================================== */

/* Tarjeta base: bg-white + card-hover */
.card-hover {
  background: #1e3a5f !important;
  border: 1px solid #253354 !important;
  box-shadow: none !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .18s ease !important;
}
.card-hover:hover {
  border-color: #334155 !important;
  box-shadow: 0 0 20px rgba(0,212,255,.06), 0 8px 24px rgba(0,0,0,.5) !important;
  transform: translateY(-3px) !important;
}

/* Título del ticket dentro de card */
.card-hover p.font-bold,
.card-hover p.font-semibold { color: #e0e7ff !important; font-weight: 600 !important; }

/* Subtítulo cliente/asignado */
.card-hover p.text-slate-400,
.card-hover p.text-xs.text-slate-400 { color: #64748b !important; }

/* Divisor de facturación */
.card-hover .border-t { border-color: #1e293b !important; }
.card-hover .text-slate-700 { color: #cbd5e1 !important; }

/* Barras de categoría — inline style, ya están bien; ajustar opacidad */
.card-hover .h-2,
.card-hover .h-1\.5,
.card-hover .h-1 { opacity: .85; }

/* Selected ring */
.ring-2.ring-blue-500 { box-shadow: 0 0 0 2px rgba(0,212,255,.5) !important; }

/* =====================================================
   VISTA LISTA — Table
   ===================================================== */

/* Header de tabla */
.bg-slate-50.border-b { background: #161e30 !important; border-color: #253354 !important; }
thead tr th { color: #8b9cbf !important; background: #161e30 !important; }
thead tr { border-bottom: 1px solid #253354 !important; }

/* Separadores de filas */
.divide-y.divide-gray-50 > * + *,
.divide-y.divide-gray-100 > * + * { border-color: #1e293b !important; }
.divide-gray-50 > * + * { border-color: rgba(255,255,255,.04) !important; }

/* Filas alternas */
tbody tr:nth-child(even) { background: #1a2035 !important; }
tbody tr:nth-child(odd)  { background: #1c2540 !important; }

/* Texto principal de fila */
tbody tr td { color: #e0e7ff !important; }
tbody tr td p.font-semibold { color: #e0e7ff !important; }
tbody tr td.text-slate-400,
tbody tr td .text-slate-400 { color: #64748b !important; }
tbody tr td .text-slate-300 { color: #475569 !important; }

/* Hover de fila */
tbody tr.hover\:bg-slate-50:hover,
tbody tr:hover { background: #253354 !important; }

/* Fila seleccionada */
tbody tr.bg-blue-50 { background: rgba(0,212,255,.06) !important; }

/* =====================================================
   BOTONES DE ACCIÓN ESPECIALES
   ===================================================== */

/* Exportar / verde esmeralda */
.bg-emerald-600, .bg-emerald-500 {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(16,185,129,.3) !important;
}
.hover\:bg-emerald-700:hover, .hover\:bg-emerald-400:hover {
  filter: brightness(1.1) !important;
}

/* Botones de vista (card/list toggle) activo */
.view-btn.bg-slate-800.text-white {
  background: var(--grad) !important;
  color: #fff !important;
  border: none !important;
}
.view-btn:not(.bg-slate-800) { color: #64748b !important; }
.view-btn:not(.bg-slate-800):hover { color: #94a3b8 !important; }

/* =====================================================
   MODO DÍA (Light Mode)
   html[data-theme="light"]
   ===================================================== */

html[data-theme="light"] body {
  background: #f0f4f8 !important;
  color: #0f172a !important;
}

/* --- Text --- */
html[data-theme="light"] .text-gray-900,
html[data-theme="light"] .text-gray-800  { color: #1e293b !important; }
html[data-theme="light"] .text-gray-700  { color: #334155 !important; }
html[data-theme="light"] .text-gray-600  { color: #475569 !important; }
html[data-theme="light"] .text-gray-500  { color: #64748b !important; }
html[data-theme="light"] .text-gray-400  { color: #94a3b8 !important; }
html[data-theme="light"] .text-slate-900,
html[data-theme="light"] .text-slate-800 { color: #1e293b !important; }
html[data-theme="light"] .text-slate-700 { color: #334155 !important; }
html[data-theme="light"] .text-slate-600 { color: #475569 !important; }
html[data-theme="light"] .text-slate-500,
html[data-theme="light"] .text-slate-400 { color: #94a3b8 !important; }
html[data-theme="light"] .text-blue-600,
html[data-theme="light"] .text-blue-500  { color: #2563eb !important; }

/* --- Backgrounds --- */
html[data-theme="light"] .bg-white       { background: #ffffff !important; }
html[data-theme="light"] .bg-gray-50     { background: #f8fafc !important; }
html[data-theme="light"] .bg-gray-100    { background: #f1f5f9 !important; }
html[data-theme="light"] .bg-gray-200    { background: #e2e8f0 !important; }
html[data-theme="light"] .bg-slate-50    { background: #f8fafc !important; }
html[data-theme="light"] .bg-slate-100   { background: #f1f5f9 !important; }
html[data-theme="light"] .bg-slate-200   { background: #e2e8f0 !important; }
html[data-theme="light"] .bg-blue-50     { background: rgba(37,99,235,.07) !important; }

/* --- Borders --- */
html[data-theme="light"] .border-gray-100,
html[data-theme="light"] .border-gray-200,
html[data-theme="light"] .border-gray-300 { border-color: #e2e8f0 !important; }
html[data-theme="light"] .divide-y.divide-gray-50 > * + *,
html[data-theme="light"] .divide-y.divide-gray-100 > * + * { border-color: #f1f5f9 !important; }

/* --- Inputs --- */
html[data-theme="light"] input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #94a3b8 !important; }
html[data-theme="light"] option { background: #fff; color: #0f172a; }
html[data-theme="light"] .nt-input {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .nt-input::placeholder { color: #94a3b8 !important; }
html[data-theme="light"] .nt-label { color: #64748b !important; }

/* --- Shadows --- */
html[data-theme="light"] .shadow-2xl { box-shadow: 0 4px 40px rgba(0,0,0,.08), 0 12px 30px rgba(0,0,0,.06) !important; }
html[data-theme="light"] .shadow-lg  { box-shadow: 0 4px 20px rgba(0,0,0,.06), 0 8px 20px rgba(0,0,0,.04) !important; }
html[data-theme="light"] .shadow-sm  { box-shadow: 0 1px 6px rgba(0,0,0,.07) !important; }

/* --- Cards / Surfaces --- */
html[data-theme="light"] .nt-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
html[data-theme="light"] .nt-card:hover {
  border-color: #93c5fd !important;
  box-shadow: 0 4px 20px rgba(37,99,235,.08), 0 8px 24px rgba(0,0,0,.05) !important;
}
html[data-theme="light"] .nt-stat {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
html[data-theme="light"] .card-hover {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
}
html[data-theme="light"] .card-hover:hover {
  border-color: #93c5fd !important;
  box-shadow: 0 4px 18px rgba(37,99,235,.1), 0 8px 24px rgba(0,0,0,.05) !important;
  transform: translateY(-2px) !important;
}
html[data-theme="light"] .card-hover p.font-bold,
html[data-theme="light"] .card-hover p.font-semibold { color: #1e293b !important; }
html[data-theme="light"] .card-hover .border-t { border-color: #f1f5f9 !important; }
html[data-theme="light"] .card-hover .text-slate-700 { color: #334155 !important; }

/* --- Table --- */
html[data-theme="light"] .bg-slate-50.border-b { background: #f8fafc !important; border-color: #e2e8f0 !important; }
html[data-theme="light"] thead tr th  { color: #475569 !important; background: #f8fafc !important; }
html[data-theme="light"] thead tr     { border-bottom: 1px solid #e2e8f0 !important; }
html[data-theme="light"] tbody tr:nth-child(even) { background: #f8fafc !important; }
html[data-theme="light"] tbody tr:nth-child(odd)  { background: #ffffff !important; }
html[data-theme="light"] tbody tr td              { color: #1e293b !important; }
html[data-theme="light"] tbody tr td p.font-semibold { color: #1e293b !important; }
html[data-theme="light"] tbody tr td .text-slate-400 { color: #94a3b8 !important; }
html[data-theme="light"] tbody tr.hover\:bg-slate-50:hover,
html[data-theme="light"] tbody tr:hover { background: #eef2f7 !important; }
html[data-theme="light"] tbody tr.bg-blue-50 { background: rgba(37,99,235,.05) !important; }
html[data-theme="light"] .nt-table th { background: #f8fafc !important; color: #475569 !important; border-color: #e2e8f0 !important; }
html[data-theme="light"] .nt-table td { border-color: #f1f5f9 !important; color: #334155 !important; }
html[data-theme="light"] .nt-table tr:hover td { background: #f8fafc !important; }

/* --- Status tabs --- */
html[data-theme="light"] .status-tab,
html[data-theme="light"] .invoice-tab {
  background: #ffffff !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .status-tab:hover,
html[data-theme="light"] .invoice-tab:hover {
  background: #f1f5f9 !important;
  color: #1e293b !important;
}
html[data-theme="light"] .status-tab.bg-slate-800,
html[data-theme="light"] .invoice-tab.bg-slate-800 {
  background: #e0e7ff !important;
  color: #1e40af !important;
  border-color: #93c5fd !important;
}

/* --- Hover helpers --- */
html[data-theme="light"] .hover\:bg-slate-50:hover  { background: #f8fafc !important; }
html[data-theme="light"] .hover\:bg-white:hover     { background: #f1f5f9 !important; }
html[data-theme="light"] .hover\:bg-slate-100:hover { background: #f1f5f9 !important; }
html[data-theme="light"] .hover\:bg-slate-200:hover { background: #e2e8f0 !important; }
html[data-theme="light"] .hover\:bg-slate-700:hover { background: rgba(0,0,0,.04) !important; }
html[data-theme="light"] .hover\:bg-slate-800:hover { background: rgba(0,0,0,.05) !important; }

/* --- Detail sub-tabs --- */
html[data-theme="light"] .detail-tab.text-slate-500   { color: #64748b !important; }
html[data-theme="light"] .detail-tab:not(.bg-blue-600):hover { background: #f1f5f9 !important; color: #1e293b !important; }

/* --- Inline style overrides (by attribute selector) --- */
/* Panel/card backgrounds */
html[data-theme="light"] [style*="background:#161e30"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
html[data-theme="light"] [style*="background:#1a2035"] {
  background: #f0f4f8 !important;
  border-color: #e2e8f0 !important;
}
html[data-theme="light"] [style*="background:#1c2540"] { background: #ffffff !important; }
html[data-theme="light"] [style*="background:#1e2d45"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
html[data-theme="light"] [style*="background:#1a2a3f"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
html[data-theme="light"] [style*="background:#131a2e"],
html[data-theme="light"] [style*="background:#111827"] {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
/* Quote form header row */
html[data-theme="light"] [style*="background:#1a2035"][style] tr,
html[data-theme="light"] tr[style*="background:#1a2035"] { background: #f8fafc !important; }

/* Inline text colors */
html[data-theme="light"] [style*="color:#e0e7ff"]  { color: #0f172a !important; }
html[data-theme="light"] [style*="color:#c7d0f0"]  { color: #334155 !important; }
html[data-theme="light"] [style*="color:#8b9cbf"]  { color: #64748b !important; }
html[data-theme="light"] [style*="color:#64748b"]  { color: #64748b !important; }
html[data-theme="light"] [style*="color:#475569"]  { color: #475569 !important; }

/* Inline borders */
html[data-theme="light"] [style*="border-color:#253354"] { border-color: #e2e8f0 !important; }
html[data-theme="light"] [style*="border:1px solid #253354"] { border-color: #e2e8f0 !important; }
html[data-theme="light"] [style*="border-color:#2e4070"] { border-color: #cbd5e1 !important; }

/* Scrollbar in light mode */
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(99,102,241,.25); }

/* Quote action buttons (inline style overrides) */
html[data-theme="light"] [style*="background:#253354"] {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] [style*="background:#1e3a5f"] {
  background: #dbeafe !important;
  border: 1px solid #bfdbfe !important;
  color: #1d4ed8 !important;
}
html[data-theme="light"] [style*="background:#2d1515"] {
  background: #fee2e2 !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
}

/* --- Sidebar light mode --- */
html[data-theme="light"] .nt-sidebar,
html[data-theme="light"] aside.bg-slate-900,
html[data-theme="light"] #mobileSidebar {
  background: #f0f4f8 !important;
  border-right: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .nt-logo-name { color: #1e293b !important; }
html[data-theme="light"] .nt-logo-sub  { color: #2563eb !important; }
html[data-theme="light"] .nt-logo-icon {
  background: rgba(37,99,235,.08) !important;
  border-color: rgba(37,99,235,.2) !important;
}
html[data-theme="light"] aside.bg-slate-900 .text-slate-400,
html[data-theme="light"] #mobileSidebar .text-slate-400 { color: #475569 !important; }
html[data-theme="light"] aside.bg-slate-900 .hover\:bg-slate-700:hover,
html[data-theme="light"] #mobileSidebar .hover\:bg-slate-700:hover { background: #e2e8f0 !important; }
html[data-theme="light"] aside.bg-slate-900 .hover\:bg-slate-800:hover,
html[data-theme="light"] #mobileSidebar .hover\:bg-slate-800:hover { background: rgba(0,0,0,.05) !important; }
html[data-theme="light"] aside.bg-slate-900 .hover\:text-white:hover,
html[data-theme="light"] #mobileSidebar .hover\:text-white:hover { color: #1e293b !important; }
html[data-theme="light"] aside.bg-slate-900 .hover\:text-red-400:hover,
html[data-theme="light"] #mobileSidebar .hover\:text-red-400:hover { color: #ef4444 !important; }
html[data-theme="light"] aside.bg-slate-900 .hover\:text-emerald-400:hover,
html[data-theme="light"] #mobileSidebar .hover\:text-emerald-400:hover { color: #059669 !important; }

/* --- ToDo filter tabs light mode --- */
html[data-theme="light"] .todo-filter-bar { background: #e2e8f0 !important; }
html[data-theme="light"] .todo-status-tab {
  color: #64748b !important;
}
html[data-theme="light"] .todo-status-tab.bg-slate-700 {
  background: #2563eb !important;
  color: #fff !important;
}
html[data-theme="light"] .todo-status-tab:not(.bg-slate-700):hover { color: #1e293b !important; background: rgba(0,0,0,.06) !important; }

/* --- Theme toggle button --- */
.theme-toggle-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 12px; border-radius: 10px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  color: #94a3b8;
  transition: all .2s ease;
  margin-bottom: 6px;
}
.theme-toggle-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.theme-toggle-btn .theme-icon { font-size: 16px; line-height: 1; }
/* Theme toggle adapts in light sidebar */
html[data-theme="light"] .theme-toggle-btn {
  background: rgba(0,0,0,.05) !important;
  border-color: rgba(0,0,0,.1) !important;
  color: #475569 !important;
}
html[data-theme="light"] .theme-toggle-btn:hover { background: rgba(0,0,0,.1) !important; color: #1e293b !important; }
.theme-toggle-btn .theme-label { font-family: var(--ft); letter-spacing: .03em; }