/* ═══════════════════════════════════════════════════════
   BELLA MARKET POS — Global Styles
   ═══════════════════════════════════════════════════════ */

/* Transición suave en todos los elementos al cambiar modo */
*, *::before, *::after {
    transition: background-color 0.2s ease, color 0.15s ease, border-color 0.15s ease !important;
}
/* Excepción: no animar transforms ni shadows (se ve raro) */
button, [class*="shadow"] {
    transition: background-color 0.15s ease, color 0.1s ease, border-color 0.1s ease, transform 0.1s ease !important;
}

/* Fade-up animation para vistas */
.fade-up {
    animation: fadeUp 0.18s ease both;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Nav button active state */
.nav-btn.active {
    background: #0f172a !important;
    color: #f5c400 !important;
}

/* ═══════════════════════════════════════════════════════
   MODO OSCURO 🌙
   ═══════════════════════════════════════════════════════ */
body.dark-mode {
    background: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Navbar */
body.dark-mode #navbar {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
body.dark-mode .nav-btn {
    color: #94a3b8 !important;
}
body.dark-mode .nav-btn:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}
body.dark-mode .nav-btn.active {
    background: #f5c400 !important;
    color: #0f172a !important;
}
body.dark-mode #dark-mode-btn {
    background: #334155 !important;
    color: #f5c400 !important;
    border-color: #475569 !important;
}
body.dark-mode #logout-btn {
    background: #1e293b !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}

/* Contenedor principal */
body.dark-mode #app-view,
body.dark-mode body,
body.dark-mode .min-h-screen {
    background: #0f172a !important;
}

/* Todos los fondos blancos → azul oscuro */
body.dark-mode .bg-white {
    background: #1e293b !important;
}
body.dark-mode .bg-slate-50 {
    background: #1e293b !important;
}
body.dark-mode .bg-slate-100 {
    background: #334155 !important;
}
body.dark-mode .bg-slate-200 {
    background: #475569 !important;
}
body.dark-mode .bg-f8fafc,
body.dark-mode [style*="background:#f8fafc"],
body.dark-mode [style*="background: #f8fafc"] {
    background: #0f172a !important;
}

/* Textos */
body.dark-mode .text-slate-900 { color: #f1f5f9 !important; }
body.dark-mode .text-slate-800 { color: #e2e8f0 !important; }
body.dark-mode .text-slate-700 { color: #cbd5e1 !important; }
body.dark-mode .text-slate-600 { color: #94a3b8 !important; }
body.dark-mode .text-slate-500 { color: #64748b !important; }
body.dark-mode .text-slate-400 { color: #475569 !important; }

/* Bordes */
body.dark-mode .border-slate-900 { border-color: #f1f5f9 !important; }
body.dark-mode .border-slate-800 { border-color: #e2e8f0 !important; }
body.dark-mode .border-slate-200 { border-color: #334155 !important; }
body.dark-mode .border-slate-100 { border-color: #1e293b !important; }
body.dark-mode .border-b-4,
body.dark-mode .border-b-5,
body.dark-mode .border-b-2 {
    border-color: #334155 !important;
}

/* Inputs, selects, textareas */
body.dark-mode input:not([type="checkbox"]):not([type="radio"]),
body.dark-mode select,
body.dark-mode textarea {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #475569 !important;
}
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: #3b82f6 !important;
    outline: none !important;
}

/* Tabla inventario y POS */
body.dark-mode table { background: #1e293b !important; }
body.dark-mode thead { background: #0f172a !important; }
body.dark-mode td, body.dark-mode th { color: #e2e8f0 !important; border-color: #334155 !important; }
body.dark-mode tr:hover,
body.dark-mode .hover\:bg-blue-50:hover { background: #1e3a5f !important; }
body.dark-mode tbody tr { border-color: #334155 !important; }

/* Cards brutalist */
body.dark-mode [class*="border-slate-900"][class*="rounded"] {
    border-color: #475569 !important;
}
body.dark-mode [class*="shadow-\[4px_4px_0px_\#0f172a\]"] {
    box-shadow: 4px 4px 0px #000 !important;
}
body.dark-mode [class*="shadow-\[3px_3px_0px_\#0f172a\]"] {
    box-shadow: 3px 3px 0px #000 !important;
}
body.dark-mode [class*="shadow-\[2px_2px_0px_\#0f172a\]"] {
    box-shadow: 2px 2px 0px #000 !important;
}
body.dark-mode [class*="border-b-\[6px\]"],
body.dark-mode [class*="border-b-\[5px\]"],
body.dark-mode [class*="border-b-\[4px\]"] {
    filter: brightness(0.85);
}

/* Modales overlay */
body.dark-mode .fixed.inset-0 {
    background: rgba(0,0,0,0.88) !important;
}
body.dark-mode .fixed.inset-0 > div {
    background: #1e293b !important;
}

/* Hover states */
body.dark-mode .hover\:bg-slate-100:hover { background: #334155 !important; }
body.dark-mode .hover\:bg-slate-200:hover { background: #475569 !important; }
body.dark-mode .hover\:bg-blue-50:hover { background: #1e3a5f !important; }

/* Badges coloreados — mantener colores */
body.dark-mode .bg-emerald-500,
body.dark-mode .bg-blue-600,
body.dark-mode .bg-red-500,
body.dark-mode .bg-yellow-400,
body.dark-mode .bg-orange-500 {
    filter: brightness(0.9) !important;
}

/* Gradientes y fondos especiales */
body.dark-mode [style*="background:#0f172a"] {
    background: #020617 !important;
}

/* Toast notifications */
body.dark-mode #toast-container > div {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}