/* BUDGÈRE v2.1 — Design System */
:root,[data-theme="light"]{--bg-body:#f0f2f5;--bg-sidebar:#1b2a4a;--bg-sidebar-hover:rgba(255,255,255,.08);--bg-sidebar-active:rgba(99,179,237,.18);--bg-card:#fff;--bg-input:#f7f8fa;--bg-topbar:#fff;--bg-modal:#fff;--text-primary:#1a202c;--text-secondary:#64748b;--text-sidebar:#cbd5e1;--text-sidebar-active:#63b3ed;--text-on-card:#1a202c;--border:#e2e8f0;--border-input:#cbd5e0;--accent:#3b82f6;--accent-hover:#2563eb;--accent-soft:rgba(59,130,246,.1);--success:#22c55e;--success-soft:rgba(34,197,94,.1);--danger:#ef4444;--danger-soft:rgba(239,68,68,.1);--warning:#f59e0b;--warning-soft:rgba(245,158,11,.1);--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--shadow-sm:0 1px 3px rgba(0,0,0,.06);--shadow-md:0 4px 12px rgba(0,0,0,.08);--shadow-lg:0 8px 30px rgba(0,0,0,.12);--font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-mono:'JetBrains Mono','Fira Code',Consolas,monospace;--sidebar-w:260px;--topbar-h:56px;--transition:.2s ease}
[data-theme="dark"]{--bg-body:#0f172a;--bg-sidebar:#0c1529;--bg-card:#1e293b;--bg-input:#1e293b;--bg-topbar:#1e293b;--bg-modal:#1e293b;--text-primary:#e2e8f0;--text-secondary:#94a3b8;--text-on-card:#e2e8f0;--border:#334155;--border-input:#475569;--shadow-sm:0 1px 3px rgba(0,0,0,.2);--shadow-md:0 4px 12px rgba(0,0,0,.3);--shadow-lg:0 8px 30px rgba(0,0,0,.4)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-sans);background:var(--bg-body);color:var(--text-primary);line-height:1.6;min-height:100vh}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover)}

/* Layout */
.app-layout{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--bg-sidebar);color:var(--text-sidebar);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:1000;transition:transform var(--transition);overflow-y:auto;overflow-x:hidden}
.sidebar-logo{padding:20px 24px 16px;font-size:1.35rem;font-weight:700;letter-spacing:-.02em;color:#fff;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-logo svg{width:28px;height:28px;flex-shrink:0}
.sidebar-section{padding:16px 16px 4px;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.35);font-weight:600}
.sidebar-nav{list-style:none;padding:4px 8px;flex:1}
.sidebar-nav li a{display:flex;align-items:center;gap:12px;padding:9px 16px;border-radius:var(--radius-sm);color:var(--text-sidebar);font-size:.88rem;font-weight:500;transition:all var(--transition);margin-bottom:2px}
.sidebar-nav li a:hover{background:var(--bg-sidebar-hover);color:#fff}
.sidebar-nav li a.active{background:var(--bg-sidebar-active);color:var(--text-sidebar-active);font-weight:600}
.sidebar-nav li a svg{width:18px;height:18px;flex-shrink:0;opacity:.7}
.sidebar-nav li a.active svg{opacity:1}

/* User footer */
.sidebar-user{padding:16px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;cursor:pointer;position:relative}
.sidebar-avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex-shrink:0}
.sidebar-user-name{font-size:.85rem;color:#fff;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-email{font-size:.72rem;color:rgba(255,255,255,.45)}
.sidebar-user-chevron{margin-left:auto;opacity:.4}

/* User dropdown */
.user-menu{display:none;position:absolute;bottom:calc(100% + 8px);left:12px;right:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:6px;z-index:1100}
.user-menu.open{display:block}
.user-menu a,.user-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-primary);font-size:.85rem;font-family:inherit;cursor:pointer;text-align:left}
.user-menu a:hover,.user-menu button:hover{background:var(--accent-soft);color:var(--accent)}
.user-menu svg{width:16px;height:16px;opacity:.6}
.user-menu hr{border:none;border-top:1px solid var(--border);margin:4px 0}

/* Topbar (mobile) */
.topbar{display:none;position:fixed;top:0;left:0;right:0;height:var(--topbar-h);background:var(--bg-topbar);border-bottom:1px solid var(--border);z-index:999;align-items:center;padding:0 16px;gap:12px;box-shadow:var(--shadow-sm)}
.topbar-menu-btn{width:36px;height:36px;border:none;background:transparent;cursor:pointer;color:var(--text-primary);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
.topbar-menu-btn:hover{background:var(--accent-soft)}
.topbar-title{font-weight:600;font-size:1rem}

.main-content{flex:1;margin-left:var(--sidebar-w);padding:24px;min-height:100vh;transition:margin-left var(--transition)}

/* Cards */
.card,.glass{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);color:var(--text-on-card)}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;display:flex;flex-direction:column;gap:8px;transition:all var(--transition);cursor:pointer;box-shadow:var(--shadow-sm)}
.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.stat-card .stat-icon{width:40px;height:40px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}
.stat-card .stat-icon svg{width:20px;height:20px}
.stat-card .stat-icon.blue{background:var(--accent-soft);color:var(--accent)}
.stat-card .stat-icon.green{background:var(--success-soft);color:var(--success)}
.stat-card .stat-icon.red{background:var(--danger-soft);color:var(--danger)}
.stat-card .stat-icon.yellow{background:var(--warning-soft);color:var(--warning)}
.stat-card .stat-label{font-size:.78rem;color:var(--text-secondary);font-weight:500}
.stat-card .stat-value{font-size:1.4rem;font-weight:700;font-variant-numeric:tabular-nums}

/* Module header */
.module-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.module-title{font-size:1.25rem;font-weight:700;display:flex;align-items:center;gap:8px}
.module-title svg{width:22px;height:22px;color:var(--accent)}
.module-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid transparent;border-radius:var(--radius-sm);font-family:inherit;font-size:.85rem;font-weight:500;cursor:pointer;transition:all var(--transition);white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-secondary{background:transparent;color:var(--text-primary);border-color:var(--border)}.btn-secondary:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}.btn-danger:hover{opacity:.9}
.btn-ghost{background:transparent;color:var(--text-secondary);border:none;padding:6px 10px}.btn-ghost:hover{color:var(--accent);background:var(--accent-soft)}
.btn-sm{padding:5px 10px;font-size:.8rem}.btn-xs{padding:3px 8px;font-size:.75rem}

/* Forms */
.form-label{display:block;font-size:.8rem;font-weight:600;color:var(--text-secondary);margin-bottom:4px}
.form-input,.form-control,.form-select{width:100%;padding:8px 12px;background:var(--bg-input) !important;border:1px solid var(--border-input) !important;border-radius:var(--radius-sm);font-family:inherit;font-size:.88rem;color:var(--text-primary) !important;transition:border-color var(--transition),box-shadow var(--transition)}
.form-input:focus,.form-control:focus,.form-select:focus{outline:none;border-color:var(--accent) !important;box-shadow:0 0 0 3px var(--accent-soft) !important}
.form-control-sm,.form-select-sm{padding:5px 8px;font-size:.82rem}
select.form-select,select.form-control{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .5rem center;background-size:14px;padding-right:2rem;-webkit-appearance:none;appearance:none}
.input-group-text{background:var(--bg-input) !important;color:var(--text-secondary) !important;border-color:var(--border-input) !important}

/* Tables */
.table{color:var(--text-on-card);border-color:var(--border)}
.table th{color:var(--text-secondary);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0;z-index:10;background:var(--bg-card)}
.table td{vertical-align:middle;font-size:.88rem}
.table-dark{background:transparent !important;color:var(--text-on-card) !important;--bs-table-bg:transparent}
.table-dark th{color:var(--text-secondary) !important;background:var(--bg-card) !important}
.table-dark td{color:var(--text-on-card) !important;background:transparent !important}
.table-active{--bs-table-active-bg:var(--accent-soft) !important}
.table-responsive{overflow-x:auto;border-radius:var(--radius-sm)}
.table .form-control,.table .form-select{background:transparent !important;border-color:transparent !important;padding:4px 6px}
.table .form-control:focus,.table .form-select:focus{background:var(--bg-input) !important;border-color:var(--accent) !important}
.text-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* Section heading */
.section-heading{font-size:.95rem;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px;color:var(--text-primary)}

/* Card accents */
.card.revenue{border-left:3px solid var(--success)}
.card.expense-card{border-left:3px solid var(--danger)}
.card.unexpected{border-left:3px solid var(--warning)}
.card.net-card{border-left:3px solid var(--accent)}

/* Badges */
.badge-green{background:var(--success-soft);color:var(--success);padding:2px 8px;border-radius:99px;font-size:.72rem;font-weight:600}
.badge-red{background:var(--danger-soft);color:var(--danger);padding:2px 8px;border-radius:99px;font-size:.72rem;font-weight:600}
.badge-blue{background:var(--accent-soft);color:var(--accent);padding:2px 8px;border-radius:99px;font-size:.72rem;font-weight:600}

/* Toast */
.toast-container{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 20px;box-shadow:var(--shadow-lg);font-size:.88rem;display:flex;align-items:center;gap:8px;animation:toastIn .3s ease;pointer-events:auto;color:var(--text-primary);max-width:380px}
.toast.success{border-left:3px solid var(--success)}.toast.error{border-left:3px solid var(--danger)}.toast.info{border-left:3px solid var(--accent)}
.toast.fade-out{animation:toastOut .3s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateX(40px)}}

/* Modal override */
.modal-content{background:var(--bg-modal) !important;color:var(--text-primary) !important;border:1px solid var(--border) !important;border-radius:var(--radius-lg) !important}
.modal-header{border-bottom:1px solid var(--border) !important}.modal-footer{border-top:1px solid var(--border) !important}
[data-theme="dark"] .btn-close{filter:invert(1)}

/* Auth */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-body);padding:24px}
.auth-card{width:100%;max-width:420px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:40px 32px}
.auth-logo{text-align:center;font-size:1.5rem;font-weight:800;color:var(--accent);margin-bottom:8px}
.auth-subtitle{text-align:center;color:var(--text-secondary);font-size:.9rem;margin-bottom:24px}
.auth-card .form-group{margin-bottom:16px}
.auth-card .btn-primary{width:100%;padding:10px;font-size:.95rem}
.auth-footer{text-align:center;margin-top:16px;font-size:.85rem;color:var(--text-secondary)}
.auth-footer a{color:var(--accent);font-weight:500}
#auth-error{color:var(--danger);font-size:.85rem;text-align:center;margin-bottom:12px;display:none}
#auth-error:not(:empty){display:block}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Budget totals grid */
.budget-grand-total{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:20px}
.budget-grand-total .stat-card{cursor:default}.budget-grand-total .stat-card:hover{transform:none}

/* Liquidity */
.liq-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.liq-summary-box{padding:16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card)}
.liq-summary-box .label{font-size:.78rem;color:var(--text-secondary);margin-bottom:4px}
.liq-summary-box .value{font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums}
.liq-summary-box .sub-label{font-size:.75rem;color:var(--text-secondary);margin-top:8px}
.liq-summary-box .sub-value{font-size:1rem;font-weight:600}
.liq-chip{border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;text-align:center}
.liq-chip .m{font-size:.72rem;color:var(--text-secondary);font-weight:600}
.liq-chip .v{font-variant-numeric:tabular-nums;font-size:.85rem;font-weight:600}

/* Progress bars */
.progress-bar-wrapper{width:100%;height:8px;background:var(--border);border-radius:99px;overflow:hidden}
.progress-bar-fill{height:100%;border-radius:99px;background:var(--accent);transition:width .5s ease}

/* Bootstrap overrides */
.bg-dark{background:var(--bg-card) !important}.text-light{color:var(--text-on-card) !important}
.text-white-50{color:var(--text-secondary) !important}.text-muted{color:var(--text-secondary) !important}
.border-secondary{border-color:var(--border) !important}
.btn-outline-light{color:var(--text-primary) !important;border-color:var(--border) !important;background:transparent !important}
.btn-outline-light:hover{background:var(--accent-soft) !important;border-color:var(--accent) !important;color:var(--accent) !important}
.opacity-50{opacity:.5}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999}
.sidebar-overlay.show{display:block}

/* Tag inline (budget) */
.tag{font-size:.75rem;border:1px solid var(--border);border-radius:999px;padding:.15rem .5rem}
.tag-success{border-color:var(--success) !important;color:var(--success)}
.tag-danger{border-color:var(--danger) !important;color:var(--danger)}

/* Responsive */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}
  .topbar{display:flex}
  .main-content{margin-left:0;padding:16px;padding-top:calc(var(--topbar-h) + 16px)}
  .budget-grand-total{grid-template-columns:1fr 1fr}
  .liq-summary-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .module-header{flex-direction:column;align-items:flex-start}
}
@media(max-width:480px){.auth-card{padding:28px 20px}.budget-grand-total{grid-template-columns:1fr}}
@media print{.sidebar,.topbar,.sidebar-overlay{display:none !important}.main-content{margin-left:0 !important;padding:0 !important}}

/* ================================================================
   COMPATIBILITY: Bootstrap dark classes → CSS variable theme system
   These ensure original templates render correctly in both themes
   ================================================================ */

/* Light mode: override Bootstrap dark classes to use theme variables */
[data-theme="light"] .bg-dark { background: var(--bg-card) !important; color: var(--text-primary) !important; }
[data-theme="light"] .text-light { color: var(--text-primary) !important; }
[data-theme="light"] .text-white { color: var(--text-primary) !important; }
[data-theme="light"] .text-white-50 { color: var(--text-secondary) !important; }
[data-theme="light"] .border-secondary { border-color: var(--border) !important; }
[data-theme="light"] .table-dark { --bs-table-bg: var(--bg-card); --bs-table-color: var(--text-primary); background: var(--bg-card) !important; color: var(--text-primary) !important; }
[data-theme="light"] .table-dark th, [data-theme="light"] .table-dark td { background: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
[data-theme="light"] .btn-outline-light { color: var(--text-primary); border-color: var(--border); }
[data-theme="light"] .btn-outline-light:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
[data-theme="light"] .btn-close-white { filter: none; }
[data-theme="light"] .modal-content.bg-dark { background: var(--bg-modal) !important; }
[data-theme="light"] .form-control.bg-dark, [data-theme="light"] .form-select.bg-dark { background: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border-input) !important; }
[data-theme="light"] .form-control.text-light, [data-theme="light"] .form-select.text-light { color: var(--text-primary) !important; }
[data-theme="light"] .card.glass { background: var(--bg-card); border: 1px solid var(--border); }
[data-theme="light"] .app-banner { background: var(--bg-card) !important; }

/* Dark mode: Bootstrap dark classes work naturally, but ensure glass cards are correct */
[data-theme="dark"] .card.glass { background: var(--bg-card); border: 1px solid var(--border); }
[data-theme="dark"] .table-dark { background: var(--bg-card) !important; }
[data-theme="dark"] .table-dark th, [data-theme="dark"] .table-dark td { background: transparent !important; border-color: var(--border) !important; }
[data-theme="dark"] .modal-content.bg-dark { background: var(--bg-modal) !important; border-color: var(--border) !important; }

/* Glass card in both modes */
.card.glass { background: var(--bg-card); color: var(--text-on-card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }

/* Form controls inherit theme */
.form-control, .form-select { background: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border-input) !important; }
.form-control:focus, .form-select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
.form-control::placeholder { color: var(--text-secondary) !important; opacity: .7; }

/* Table styling */
.table { color: var(--text-primary); }
.table th, .table td { border-color: var(--border); }
.table thead th { color: var(--text-secondary); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }

/* Badge fixes for both themes */
.badge.bg-success { background: var(--success) !important; }
.badge.bg-danger { background: var(--danger) !important; }
.badge.bg-warning { background: var(--warning) !important; color: #000 !important; }

/* Calendar grid for both themes */
.cal-cell { background: var(--bg-card) !important; border-color: var(--border) !important; }
.cal-day { color: var(--text-secondary); }
.ev.inc { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); color: var(--text-primary); }
.ev.exp { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: var(--text-primary); }
.ev.ux  { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3); color: var(--text-primary); }

/* text-mono class */
.text-mono { font-family: var(--font-mono, 'JetBrains Mono', monospace); }

/* Section title from original templates */
.section-title { font-size: 1rem; font-weight: 700; }

/* Original app-banner compatibility */
.app-banner { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); }

/* Budget grand totals banner (new v2.1 feature) */
.budget-grand-total { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.budget-grand-total .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; }
.budget-grand-total .stat-label { font-size: .75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.budget-grand-total .stat-value { font-size: 1.4rem; font-weight: 700; font-family: var(--font-mono); }
@media (max-width: 768px) { .budget-grand-total { grid-template-columns: repeat(2, 1fr); } }

/* ═══ NUCLEAR TABLE FIX ═══ */
/* Override Bootstrap's --bs-table-bg on the table AND every cell */
.table-dark {
  --bs-table-bg: transparent !important;
  --bs-table-color: var(--text-on-card) !important;
  --bs-table-border-color: var(--border) !important;
  background-color: transparent !important;
}
.table-dark > :not(caption) > * > * {
  background-color: transparent !important;
  color: var(--text-on-card) !important;
  border-bottom-color: var(--border) !important;
}
.table-dark > thead > * > * {
  background-color: var(--bg-card) !important;
  color: var(--text-secondary) !important;
}
.table-dark > tfoot > * > * {
  background-color: transparent !important;
}
[data-theme="light"] .table-dark > :not(caption) > * > * {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}