/* ============================================================================
   ExpenseSync — modern UI layer (2026 refresh)
   Loads AFTER sb-admin-2.min.css and overrides its dated look with a clean,
   modern finance-app design. Pure visual layer: no markup, JS, or class names
   are changed, so all SB Admin 2 / Bootstrap 4 / DataTables / Select2 behaviour
   is preserved. Everything is driven by the tokens in :root below.
   ============================================================================ */

:root{
  /* Brand — kept close to ExpenseSync blue, refined */
  --brand:#4f6bed; --brand-600:#3f57d0; --brand-700:#3244a6; --brand-050:#eef1fe;
  /* Ink & neutrals (cool slate) */
  --ink:#1b2130; --ink-2:#5b6478; --ink-3:#8a92a6;
  --bg:#f3f5fb; --surface:#ffffff; --surface-2:#f7f8fc;
  --line:#e7eaf3; --line-2:#eff1f8;
  /* Sidebar (deep slate) */
  --side:#151b2b; --side-hi:#212a42;
  --side-text:#98a1b8; --side-text-hi:#eef1f8;
  /* Semantic + soft tints */
  --success:#10b981; --success-soft:#e6f7f0; --success-ink:#0b7a5b;
  --danger:#ef4b62;  --danger-soft:#fdebee;  --danger-ink:#c0293e;
  --warning:#f59e0b; --warning-soft:#fdf3e0; --warning-ink:#a76a06;
  --info:#37b6d3;    --info-soft:#e5f6fa;    --info-ink:#1f8ba3;
  /* Radius & shadow */
  --r-card:16px; --r:10px; --r-sm:8px;
  --sh-1:0 1px 2px rgba(20,28,48,.05), 0 1px 3px rgba(20,28,48,.05);
  --sh-2:0 6px 18px rgba(20,28,48,.08);
  --sh-3:0 16px 44px rgba(20,28,48,.14);
  --font:'Inter','Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body{ background:var(--bg); color:var(--ink); font-family:var(--font);
  -webkit-font-smoothing:antialiased; letter-spacing:-.005em; }
#content-wrapper{ background:var(--bg); }
a{ color:var(--brand); }
a:hover{ color:var(--brand-600); }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ font-family:var(--font);
  color:var(--ink); font-weight:700; letter-spacing:-.02em; }
.text-primary{ color:var(--brand)!important; }
.text-gray-800{ color:var(--ink)!important; }
.text-gray-600,.text-gray-500{ color:var(--ink-2)!important; }
.text-success{ color:var(--success)!important; }
.text-danger{ color:var(--danger)!important; }
.text-warning{ color:var(--warning)!important; }
.text-info{ color:var(--info)!important; }
.bg-gradient-primary{ background:var(--brand)!important; }
hr{ border-color:var(--line); }

/* ── Sidebar (id beats theme classes cleanly) ─────────────────────────────── */
#accordionSidebar{ background:var(--side)!important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.04); }
#accordionSidebar .sidebar-brand{ background:transparent; padding:1.35rem 1rem;
  height:auto; }
#accordionSidebar .sidebar-brand-text{ font-weight:800; letter-spacing:-.02em;
  font-size:1.05rem; }
#accordionSidebar .sidebar-brand-icon i{ color:#fff; }
#accordionSidebar .sidebar-divider{ border-top:1px solid rgba(255,255,255,.06);
  margin:.6rem 1rem; }
#accordionSidebar .sidebar-heading{ color:#67718c; font-size:.66rem;
  font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  padding:.5rem 1.6rem .35rem; }
#accordionSidebar .nav-item{ margin:1px 0; }
#accordionSidebar .nav-item .nav-link{ color:var(--side-text); font-weight:600;
  font-size:.86rem; margin:1px 12px; padding:.62rem .8rem; border-radius:10px;
  display:flex; align-items:center; transition:background .15s,color .15s; }
#accordionSidebar .nav-item .nav-link i{ color:inherit; opacity:.75;
  margin-right:.7rem; width:1.1rem; text-align:center; }
#accordionSidebar .nav-item .nav-link:hover{ background:var(--side-hi);
  color:var(--side-text-hi); }
#accordionSidebar .nav-item .nav-link:hover i{ opacity:1; }
#accordionSidebar .nav-item.active .nav-link{ background:var(--brand); color:#fff;
  box-shadow:0 6px 16px rgba(79,107,237,.35); }
#accordionSidebar .nav-item.active .nav-link i{ opacity:1; }
#accordionSidebar .nav-link .badge{ font-size:.6rem; }
/* Collapse submenu — keep the light popover, modernised */
#accordionSidebar .collapse-inner,
#accordionSidebar .collapsing .collapse-inner{ border-radius:12px!important;
  box-shadow:var(--sh-2); margin:.15rem .75rem .35rem; padding:.4rem!important; }
#accordionSidebar .collapse-header{ color:var(--ink-3); font-size:.62rem;
  letter-spacing:.1em; }
#accordionSidebar .collapse-item{ border-radius:8px; color:var(--ink-2);
  font-weight:600; padding:.5rem .75rem; }
#accordionSidebar .collapse-item:hover{ background:var(--brand-050);
  color:var(--brand-700); }
#accordionSidebar .collapse-item.active{ color:var(--brand); font-weight:700; }
#sidebarToggle{ background:rgba(255,255,255,.08); }
#sidebarToggle:hover{ background:rgba(255,255,255,.16); transform:none; }

/* ── Topbar ───────────────────────────────────────────────────────────────── */
.topbar{ height:68px; background:var(--surface)!important;
  box-shadow:none!important; border-bottom:1px solid var(--line); }
.topbar .nav-link{ color:var(--ink-2)!important; }
.topbar .nav-link:hover{ color:var(--ink)!important; }
.topbar .dropdown-list .dropdown-header{ background:var(--brand);
  border-radius:12px 12px 0 0; }
.topbar .badge-counter{ background:var(--danger)!important; color:#fff!important;
  border:2px solid var(--surface); }
.img-profile{ border:2px solid var(--line); }
.topbar .dropdown-menu{ margin-top:.5rem; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card{ border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--sh-1); transition:box-shadow .2s ease; }
.card:hover{ transform:none; box-shadow:var(--sh-2)!important; }
.card-header{ background:var(--surface); border-bottom:1px solid var(--line);
  font-weight:700; color:var(--ink); padding:1rem 1.25rem;
  border-radius:var(--r-card) var(--r-card) 0 0!important; }
.card-header .dropdown .btn{ box-shadow:none; }
.card .card-body{ padding:1.35rem; }
/* Accent stat cards — keep the semantic left rail, refined */
.card.border-left-primary{ border-left:4px solid var(--brand)!important; }
.card.border-left-success{ border-left:4px solid var(--success)!important; }
.card.border-left-info{ border-left:4px solid var(--info)!important; }
.card.border-left-warning{ border-left:4px solid var(--warning)!important; }
.card.border-left-danger{ border-left:4px solid var(--danger)!important; }
.card .text-xs{ letter-spacing:.06em; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{ border-radius:var(--r); font-weight:600; padding:.5rem 1.05rem;
  box-shadow:none; transition:background .15s,border-color .15s,color .15s;
  letter-spacing:-.01em; }
.btn:hover,.btn:focus{ transform:none!important; }
.btn:focus{ box-shadow:0 0 0 .2rem rgba(79,107,237,.28); }
.btn-sm{ border-radius:8px; padding:.32rem .7rem; }
.btn-lg{ border-radius:12px; padding:.7rem 1.4rem; }
.btn-primary{ background:var(--brand)!important; border-color:var(--brand)!important; }
.btn-primary:hover{ background:var(--brand-600)!important;
  border-color:var(--brand-600)!important; }
.btn-success{ background:var(--success); border-color:var(--success); }
.btn-success:hover{ background:#0da271; border-color:#0da271; }
.btn-danger{ background:var(--danger); border-color:var(--danger); }
.btn-danger:hover{ background:#e13653; border-color:#e13653; }
.btn-warning{ background:var(--warning); border-color:var(--warning); color:#fff; }
.btn-info{ background:var(--info); border-color:var(--info); color:#fff; }
.btn-secondary{ background:#eef0f6!important; border-color:#eef0f6!important;
  color:var(--ink-2)!important; }
.btn-secondary:hover{ background:#e3e6f0!important; border-color:#e3e6f0!important; }
.btn-outline-primary{ color:var(--brand); border-color:var(--line); }
.btn-outline-primary:hover{ background:var(--brand); border-color:var(--brand);
  color:#fff; }
.btn-link{ color:var(--brand); }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-control,.custom-select,.custom-file-label{ border:1px solid var(--line);
  border-radius:var(--r); color:var(--ink); padding:.55rem .8rem; height:auto;
  background-color:var(--surface); transition:border-color .15s,box-shadow .15s; }
.form-control::placeholder{ color:var(--ink-3); }
.form-control:focus,.custom-select:focus{ border-color:var(--brand);
  box-shadow:0 0 0 .2rem rgba(79,107,237,.16); }
.form-control-user{ border-radius:999px; }
label,.col-form-label{ color:var(--ink-2); font-weight:600; font-size:.85rem; }
.input-group-text{ background:var(--surface-2); border:1px solid var(--line);
  color:var(--ink-2); border-radius:var(--r); font-weight:500; }
.custom-control-input:checked ~ .custom-control-label::before{
  background-color:var(--brand); border-color:var(--brand); }
.custom-file-label::after{ background:var(--surface-2); color:var(--ink-2);
  border-left:1px solid var(--line); }
/* Select2 aligned to the form look */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
  border:1px solid var(--line)!important; border-radius:var(--r)!important;
  min-height:calc(1.5em + 1.1rem + 2px); }
.select2-dropdown{ border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-2); }
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--brand); }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table{ color:var(--ink); }
.table thead th{ background:var(--surface-2); color:var(--ink-3);
  text-transform:uppercase; font-size:.72rem; letter-spacing:.05em;
  font-weight:700; border-top:0; border-bottom:1px solid var(--line);
  padding:.85rem 1rem; }
.table td,.table th{ border-top:1px solid var(--line-2); padding:.8rem 1rem;
  vertical-align:middle; }
.table-hover tbody tr{ transition:background .12s; }
.table-hover tbody tr:hover{ background:var(--surface-2); }
.table-bordered,.table-bordered td,.table-bordered th{ border-color:var(--line); }
/* DataTables controls */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{ border:1px solid var(--line);
  border-radius:var(--r-sm); padding:.35rem .6rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--brand)!important; border-color:var(--brand)!important;
  color:#fff!important; border-radius:8px; }
.dataTables_wrapper .dataTables_paginate .paginate_button{ border-radius:8px; }

/* ── Badges (soft, modern) ────────────────────────────────────────────────── */
.badge{ border-radius:999px; font-weight:600; padding:.36em .72em; font-size:.72rem;
  letter-spacing:.01em; }
.badge-primary{ background:var(--brand-050); color:var(--brand-700); }
.badge-success{ background:var(--success-soft); color:var(--success-ink); }
.badge-danger{ background:var(--danger-soft); color:var(--danger-ink); }
.badge-warning{ background:var(--warning-soft); color:var(--warning-ink); }
.badge-info{ background:var(--info-soft); color:var(--info-ink); }
.badge-secondary{ background:#eef0f5; color:var(--ink-2); }
.badge-light{ background:var(--surface-2); color:var(--ink-2); }
/* Counters stay solid so they read as alerts */
.badge-counter{ border-radius:999px; }

/* ── Alerts (soft) ────────────────────────────────────────────────────────── */
.alert{ border:1px solid transparent; border-radius:var(--r); box-shadow:none;
  font-weight:500; }
.alert-success{ background:var(--success-soft); color:var(--success-ink);
  border-color:#cbeede; }
.alert-danger,.alert-error{ background:var(--danger-soft); color:var(--danger-ink);
  border-color:#f7d3d9; }
.alert-warning{ background:var(--warning-soft); color:var(--warning-ink);
  border-color:#f6e2be; }
.alert-info{ background:var(--info-soft); color:var(--info-ink);
  border-color:#c9ebf3; }

/* ── Dropdowns / modals / popovers ────────────────────────────────────────── */
.dropdown-menu{ border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-2); padding:.4rem; }
.dropdown-item{ border-radius:var(--r-sm); padding:.5rem .75rem; font-weight:500;
  color:var(--ink-2); }
.dropdown-item:hover,.dropdown-item:focus{ background:var(--surface-2);
  color:var(--ink); }
.dropdown-divider{ border-color:var(--line); }
.modal-content{ border:0; border-radius:var(--r-card); box-shadow:var(--sh-3); }
.modal-header{ background:var(--surface); color:var(--ink);
  border-bottom:1px solid var(--line);
  border-radius:var(--r-card) var(--r-card) 0 0; }
.modal-footer{ border-top:1px solid var(--line); }
.tooltip-inner{ background:var(--ink); border-radius:var(--r-sm); font-weight:500; }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.pagination{ gap:4px; }
.page-link{ border:1px solid var(--line); color:var(--brand); border-radius:8px;
  transition:background .12s,color .12s; }
.page-link:hover{ background:var(--surface-2); color:var(--brand-600);
  transform:none; }
.page-item.active .page-link{ background:var(--brand); border-color:var(--brand);
  color:#fff; }

/* ── Progress ─────────────────────────────────────────────────────────────── */
.progress{ background:var(--line-2); border-radius:999px; height:.6rem; }
.progress-bar{ background:var(--brand); border-radius:999px; }

/* ── Misc chrome ──────────────────────────────────────────────────────────── */
.sticky-footer{ background:var(--surface)!important;
  border-top:1px solid var(--line); }
.sticky-footer .copyright{ color:var(--ink-3); }
.scroll-to-top{ background:var(--ink); border-radius:12px; opacity:.85; }
.scroll-to-top:hover{ background:var(--brand); opacity:1; }
.border-bottom,.border-top,.border{ border-color:var(--line)!important; }
.shadow,.shadow-sm{ box-shadow:var(--sh-1)!important; }

/* Subtle scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#cdd3e2; border-radius:999px;
  border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#b6bdd0; }

/* Respect users who prefer reduced motion (calms the hover transitions) */
@media (prefers-reduced-motion:reduce){ *{ animation:none!important;
  transition:none!important; } }

@media (max-width:768px){
  .card .card-body{ padding:1.1rem; }
  .topbar{ height:60px; }
}