/* =====================================================================
   AI SALES INTELLIGENCE — MODERN THEME
   ---------------------------------------------------------------------
   A pure-CSS skin loaded LAST, after every other stylesheet.
   No markup, JS or layout geometry is changed:
     - sidebar stays 230px, .page keeps its margin, toggles still work
   Remove the <link> to modern-theme.css to get the original UI back.
   Brand colours taken from the logo (royal blue -> emerald).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ---------- 1. Design tokens ---------------------------------------- */
:root {
  --brand: #2563eb;          /* royal blue (logo)   */
  --brand-600: #1d4ed8;
  --brand-700: #1e40af;
  --brand-2: #10b981;        /* emerald (logo)      */
  --brand-3: #06b6d4;        /* cyan accent         */
  --grad: linear-gradient(135deg, #2563eb 0%, #0891b2 55%, #10b981 100%);
  --grad-soft: linear-gradient(135deg, rgba(37,99,235,.10), rgba(16,185,129,.10));
  --grad-side: linear-gradient(180deg, #0b1437 0%, #0f1e4a 55%, #0b2a3f 100%);

  --bg: #eef2f9;
  --surface: #ffffff;
  --surface-2: #f6f8fc;
  --glass: rgba(255,255,255,.72);
  --border: #e3e8f2;
  --text: #1e293b;
  --text-2: #475569;
  --muted: #8a94a8;

  --success: #10b981;
  --info: #0ea5e9;
  --warning: #f59e0b;
  --danger: #ef4444;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 8px;

  /* layered "3D" shadows */
  --sh-1: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --sh-2: 0 2px 4px rgba(16,24,40,.04), 0 8px 24px -4px rgba(16,24,40,.08);
  --sh-3: 0 4px 8px rgba(16,24,40,.04), 0 20px 40px -8px rgba(30,64,175,.18);
  --sh-brand: 0 6px 16px -4px rgba(37,99,235,.45), inset 0 1px 0 rgba(255,255,255,.25);
  --ring: 0 0 0 4px rgba(37,99,235,.15);

  --ease: cubic-bezier(.2,.8,.2,1);

  --theme-color: #2563eb;        /* used by original CSS */
  --primary-bg-color: rgba(37,99,235,.08);
}

body.dark-mode {
  --bg: #0b1120;
  --surface: #131c2e;
  --surface-2: #19243a;
  --glass: rgba(19,28,46,.78);
  --border: #24314b;
  --text: #e2e8f0;
  --text-2: #b6c2d6;
  --muted: #7d8aa3;
  --sh-1: 0 1px 2px rgba(0,0,0,.3);
  --sh-2: 0 8px 24px -6px rgba(0,0,0,.5);
  --sh-3: 0 20px 40px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(96,165,250,.12);
  --primary-bg-color: rgba(96,165,250,.12);
}

/* ---------- 2. Base ------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', 'Nunito', -apple-system, 'Segoe UI', sans-serif !important;
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(1200px 600px at 100% -10%, rgba(37,99,235,.07), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(16,185,129,.07), transparent 60%);
  background-attachment: fixed;
  color: var(--text-2) !important;
  -webkit-font-smoothing: antialiased;
}
body.dark-mode {
  background-image:
    radial-gradient(1200px 600px at 100% -10%, rgba(37,99,235,.14), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(16,185,129,.10), transparent 60%);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--text) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
}

a { color: var(--brand); transition: color .2s var(--ease); }
a:hover, a:focus { color: var(--brand-700); text-decoration: none; }
.dark-mode a { color: #60a5fa; }

::selection { background: rgba(37,99,235,.18); }

/* Slim modern scrollbars */
* { scrollbar-width: thin; scrollbar-color: #c3cbe0 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c3cbe0; border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #94a3c4; background-clip: padding-box; }
.dark-mode ::-webkit-scrollbar-thumb { background: #33415e; background-clip: padding-box; }

/* Page loader */
#loader {
  border: 3px solid rgba(37,99,235,.12) !important;
  border-top-color: var(--brand) !important;
  border-right-color: var(--brand-2) !important;
}

/* ---------- 3. Sidebar ---------------------------------------------- */
.side-navbar {
  background: var(--grad-side) !important;
  box-shadow: 8px 0 32px -12px rgba(11,20,55,.45) !important;
  border-right: 1px solid rgba(255,255,255,.04);
  padding-left: 0 !important;
}
.side-navbar .brand-big {
  display: block;
  margin: 14px 12px 10px;
  padding: 12px 10px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.55), inset 0 -2px 0 rgba(15,30,74,.06);
  line-height: 1 !important;
  text-align: center;
}
.side-navbar .brand-big img { max-width: 100%; height: auto; }
.side-navbar .brand-big h1 { color: var(--brand-700) !important; margin: 0; font-size: 1.2rem; }

.side-navbar .side-menu { padding: 6px 0 24px; }

.side-navbar li a {
  color: #b9c4dc !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  margin: 3px 12px !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  transition: background .25s var(--ease), color .2s, transform .25s var(--ease), box-shadow .25s !important;
}
.side-navbar li a i {
  color: #7fa6ff !important;
  transition: transform .3s var(--ease), color .2s !important;
}
.side-navbar li a:hover {
  background: rgba(255,255,255,.07) !important;
  color: #ffffff !important;
  transform: translateX(3px);
}
.side-navbar li a:hover i { color: #6ee7b7 !important; transform: scale(1.12); }

.side-navbar li.active > a,
.side-navbar li a[aria-expanded=true] {
  background: var(--grad) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px -6px rgba(8,145,178,.6), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.side-navbar li.active > a i,
.side-navbar li a[aria-expanded=true] i { color: #ffffff !important; }
.side-navbar li a[data-toggle=collapse]::before { color: rgba(255,255,255,.55); }

/* Sub-menus */
.side-navbar li ul,
.dark-mode .side-navbar li ul {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 12px !important;
  margin: 4px 12px 8px !important;
  padding: 6px !important;
}
.side-navbar li ul li a {
  color: #9fb0cf !important;
  font-size: 13px !important;
  margin: 1px 0 !important;
  padding: 7px 10px 7px 14px !important;
  position: relative;
}
.side-navbar li ul li a::after {
  content: '';
  position: absolute; left: 4px; top: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: #4b5f86; transform: translateY(-50%);
  transition: background .2s, box-shadow .2s;
}
.side-navbar li ul li a:hover,
.side-navbar li ul li.active > a {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.side-navbar li ul li a:hover::after,
.side-navbar li ul li.active > a::after {
  background: #34d399; box-shadow: 0 0 8px #34d399;
}
.side-navbar li ul.collapse a:hover { padding-left: 18px !important; }

/* malihu scrollbar inside sidebar */
.side-navbar .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background: rgba(255,255,255,.25) !important; }

/* ---------- 4. Top navbar (glass) ----------------------------------- */
header.container-fluid { position: relative; z-index: 50; padding-top: 14px; }

/* NOTE: backdrop-filter must NOT sit on nav.navbar itself — it would become the
   containing block for the position:fixed .right-sidebar panels (profile,
   notifications, language) and squash them. The glass lives on ::before. */
nav.navbar {
  background: transparent !important;
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius) !important;
  box-shadow: var(--sh-2) !important;
}
.dark-mode nav.navbar { border-color: rgba(255,255,255,.06); }
nav.navbar::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  pointer-events: none;
}

nav.navbar a.menu-btn,
.dark-mode nav.navbar a.menu-btn {
  width: 40px; height: 40px; line-height: 40px !important;
  border: none !important;
  border-radius: 12px !important;
  background: var(--grad) !important;
  color: #fff !important;
  box-shadow: var(--sh-brand);
  transition: transform .25s var(--ease), box-shadow .25s;
}
nav.navbar a.menu-btn:hover { transform: translateY(-2px) rotate(-3deg); box-shadow: 0 10px 22px -6px rgba(37,99,235,.6); }
nav.navbar a.menu-btn i { color: #fff !important; }

nav.navbar .nav-item a i,
.dark-mode nav.navbar .nav-item a i { color: var(--brand) !important; transition: transform .25s var(--ease); }
.dark-mode nav.navbar .nav-item a i { color: #60a5fa !important; }
nav.navbar .nav-item > a:hover i { transform: translateY(-2px) scale(1.1); }
nav.navbar .nav-item > a { color: var(--text-2); font-weight: 600; }

nav.navbar .badge,
.notification-number {
  background: linear-gradient(135deg, #f43f5e, #f97316) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px -2px rgba(244,63,94,.6);
  font-weight: 700;
  animation: mt-pulse 2.2s infinite;
}
@keyframes mt-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(244,63,94,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(244,63,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(244,63,94,0); }
}

/* POS / action pill in header */
.btn-pos {
  border: none !important;
  background: var(--grad) !important;
  border-radius: 12px !important;
  box-shadow: var(--sh-brand);
  transition: transform .25s var(--ease), box-shadow .25s !important;
}
.btn-pos i, .btn-pos span { color: #fff !important; }
.btn-pos:hover { transform: translateY(-2px); border: none !important; box-shadow: 0 12px 24px -8px rgba(37,99,235,.6); }

/* right slide-out panels (notifications, language, user menu) */
.right-sidebar,
.dark-mode .right-sidebar {
  background: var(--surface) !important;
  box-shadow: -20px 0 50px -20px rgba(15,23,42,.35) !important;
  border-left: 1px solid var(--border);
  border-radius: 20px 0 0 20px;
  z-index: 1050 !important;
}
.right-sidebar li { border-bottom: 1px solid var(--border) !important; }
.right-sidebar li a { color: var(--text-2) !important; transition: color .2s, padding .25s var(--ease); }
.right-sidebar li a:hover { color: var(--brand) !important; padding-left: 6px; }
.right-sidebar li a i { color: var(--brand) !important; }

/* ---------- 5. Cards / surfaces (depth) ----------------------------- */
.card,
.dark-mode .card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--sh-2) !important;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover { box-shadow: var(--sh-3) !important; }
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 1.1rem 1.4rem !important;
}
.card-header h3, .card-header h4 { font-size: 1.05rem !important; }
.card-header h3::before, .card-header h4::before {
  content: '';
  display: inline-block;
  width: 4px; height: 16px;
  margin-right: 10px;
  vertical-align: -2px;
  border-radius: 4px;
  background: var(--grad);
}
.card-footer { background: var(--surface-2) !important; border-top: 1px solid var(--border) !important; border-radius: 0 0 var(--radius) var(--radius) !important; }

/* Dashboard counters: 3D tiles */
.count-title,
.dark-mode .count-title {
  position: relative;
  overflow: hidden;
  background: var(--surface) !important;
  border: 1px solid var(--border);
  border-radius: 18px !important;
  box-shadow: var(--sh-2) !important;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  transform: perspective(900px) translateZ(0);
}
.count-title::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--grad);
}
.count-title::after {
  content: '';
  position: absolute; right: -40px; top: -40px;
  width: 130px; height: 130px; border-radius: 50%;
  background: var(--grad-soft);
  transition: transform .5s var(--ease);
}
.count-title:hover {
  transform: perspective(900px) translateY(-6px) rotateX(4deg);
  box-shadow: var(--sh-3) !important;
}
.count-title:hover::after { transform: scale(1.35); }
.dashboard-counts [class*=col-]:has(> .count-title) { display: flex; }
.dashboard-counts [class*=col-] > .count-title { flex: 1 1 auto; align-items: center; }
.dashboard-counts .count-title i {
  position: relative; z-index: 1;
  width: 54px !important; height: 54px; line-height: 54px;
  font-size: 1.5em !important;
  text-align: center;
  border-radius: 16px;
  color: #fff !important;
  background: var(--grad);
  box-shadow: var(--sh-brand);
  margin-right: 14px;
}
.dashboard-counts .count-title:nth-child(4n+2) i,
.dashboard-counts [class*=col-]:nth-child(4n+2) .count-title i { background: linear-gradient(135deg,#10b981,#059669); box-shadow: 0 6px 16px -4px rgba(16,185,129,.5); }
.dashboard-counts [class*=col-]:nth-child(4n+3) .count-title i { background: linear-gradient(135deg,#f59e0b,#f97316); box-shadow: 0 6px 16px -4px rgba(245,158,11,.5); }
.dashboard-counts [class*=col-]:nth-child(4n+4) .count-title i { background: linear-gradient(135deg,#8b5cf6,#6366f1); box-shadow: 0 6px 16px -4px rgba(139,92,246,.5); }
.dashboard-counts .count-number { color: var(--text) !important; font-weight: 800 !important; position: relative; z-index: 1; }
.dashboard-counts .count-title span,
.dashboard-counts strong { position: relative; z-index: 1; }
.dashboard-counts strong { color: var(--text-2) !important; font-weight: 600 !important; }

.statistics .user-activity .page-statistics strong,
.payment-amount h2 { color: var(--brand) !important; }
.statistics .user-activity .progress { border-radius: 20px !important; background: var(--surface-2) !important; overflow: hidden; }
.statistics .user-activity .progress .progress-bar.bg-primary,
.progress-bar { background: var(--grad) !important; border-radius: 20px; }
.gmpc { color: var(--brand) !important; border-right-color: var(--border) !important; }

/* Date filter pills on dashboard */
.filter-toggle .date-btn {
  border-radius: 999px !important;
  padding: .35rem .95rem !important;
  font-weight: 600;
  transition: all .25s var(--ease);
}
.filter-toggle .date-btn:not(.active) {
  background: var(--surface) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--sh-1) !important;
}
.filter-toggle .date-btn:not(.active):hover { color: var(--brand) !important; border-color: var(--brand) !important; }
.filter-toggle .date-btn.active { background: var(--grad) !important; color: #fff !important; box-shadow: var(--sh-brand) !important; border-color: transparent !important; }

/* ---------- 6. Buttons (tactile / 3D) ------------------------------- */
.btn {
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .25s, filter .2s !important;
}
.btn:not(.btn-link):not(.dropdown-toggle):hover { transform: translateY(-2px); }
.btn:not(.btn-link):active { transform: translateY(0) scale(.98); }

.btn-primary,
.btn-primary:disabled, .btn-primary.disabled {
  background: var(--grad) !important;
  background-size: 160% 160% !important;
  border: none !important;
  color: #fff !important;
  box-shadow: var(--sh-brand) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-position: 100% 0 !important;
  box-shadow: 0 12px 24px -8px rgba(37,99,235,.6), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.btn-primary.active {
  background: transparent !important;
  border: 2px solid var(--brand) !important;
  color: var(--brand) !important;
}

.btn-success { background: linear-gradient(135deg,#10b981,#059669) !important; border: none !important; box-shadow: 0 6px 16px -4px rgba(16,185,129,.5), inset 0 1px 0 rgba(255,255,255,.2) !important; color:#fff !important; }
.btn-info    { background: linear-gradient(135deg,#0ea5e9,#0284c7) !important; border: none !important; box-shadow: 0 6px 16px -4px rgba(14,165,233,.5), inset 0 1px 0 rgba(255,255,255,.2) !important; color:#fff !important; }
.btn-warning { background: linear-gradient(135deg,#fbbf24,#f59e0b) !important; border: none !important; box-shadow: 0 6px 16px -4px rgba(245,158,11,.5), inset 0 1px 0 rgba(255,255,255,.3) !important; color:#fff !important; }
.btn-danger  { background: linear-gradient(135deg,#f43f5e,#e11d48) !important; border: none !important; box-shadow: 0 6px 16px -4px rgba(244,63,94,.5), inset 0 1px 0 rgba(255,255,255,.2) !important; color:#fff !important; }
.btn-secondary { background: linear-gradient(135deg,#64748b,#475569) !important; border: none !important; color:#fff !important; }
.btn-dark { background: linear-gradient(135deg,#1e293b,#0f172a) !important; border: none !important; color:#fff !important; }

.btn-outline-primary { color: var(--brand) !important; border: 1.5px solid var(--brand) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--grad) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--sh-brand) !important; }

.btn-default, .btn.btn-default {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-2) !important;
  box-shadow: var(--sh-1) !important;
}
.btn.btn-default:hover { border-color: var(--brand) !important; color: var(--brand) !important; }
.dark-mode .btn-default { color: var(--text-2) !important; border-color: var(--border) !important; }

.btn-link { color: var(--brand) !important; }
.btn:focus, .btn.focus { box-shadow: var(--ring) !important; }

/* keep bootstrap-select's toggle looking like an input, not a raised button */
.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle:hover,
.bootstrap-select .btn { transform: none !important; }

/* DataTables export buttons */
.dt-buttons .btn, .dt-buttons button {
  border: none !important;
  border-radius: 10px !important;
  margin: 0 2px;
  box-shadow: var(--sh-1);
}
.buttons-pdf    { background: linear-gradient(135deg,#f43f5e,#e11d48) !important; }
.buttons-csv    { background: linear-gradient(135deg,#fbbf24,#f59e0b) !important; }
.buttons-print  { background: linear-gradient(135deg,#0ea5e9,#2563eb) !important; }
.buttons-delete { background: linear-gradient(135deg,#ef4444,#b91c1c) !important; }
.buttons-collection, .buttons-colvis { background: linear-gradient(135deg,#8b5cf6,#6366f1) !important; }
.dt-button-collection.dropdown-menu { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; box-shadow: var(--sh-3) !important; }
.dt-button-collection.dropdown-menu a { color: var(--text-2) !important; border-radius: 8px; }
.dt-button-collection.dropdown-menu a.active { background: var(--primary-bg-color) !important; color: var(--brand) !important; }

/* ---------- 7. Forms ------------------------------------------------ */
.form-control,
.bootstrap-select.form-control,
.input-group-text,
select.form-control {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  font-weight: 500 !important;
  box-shadow: inset 0 1px 2px rgba(16,24,40,.04);
  transition: border-color .2s, box-shadow .2s, background-color .2s !important;
}
.dark-mode .form-control,
.dark-mode .bootstrap-select.form-control,
.dark-mode .input-group-text { background-color: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; }

.form-control:focus,
.bootstrap-select.form-control.show,
.bootstrap-select .dropdown-toggle:focus {
  border-color: var(--brand) !important;
  box-shadow: var(--ring) !important;
  outline: 0 !important;
}
.input-group-text { color: var(--muted) !important; background: var(--surface-2) !important; }
.input-group > .form-control:not(:last-child),
.input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .form-control:not(:first-child),
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

label, .forms label { color: var(--text-2); font-weight: 600; font-size: .82rem !important; }
input.form-control::placeholder { color: #a3adc2 !important; }
.italic small { color: var(--muted); }

.bootstrap-select .dropdown-toggle { background: transparent !important; border: none !important; color: var(--text) !important; box-shadow: none !important; }
.bootstrap-select .dropdown-menu { border-radius: 14px !important; }
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li.selected a { background: var(--primary-bg-color) !important; color: var(--brand) !important; }
.bootstrap-select .bs-searchbox .form-control { border-radius: 8px !important; }

/* checkboxes */
.checkbox label::after { color: var(--brand) !important; }
.checkbox input[type=checkbox]:checked + label::before,
.abc-checkbox-primary input[type=checkbox]:checked + label::before { background: var(--brand) !important; border-color: var(--brand) !important; }
input[type=checkbox], input[type=radio] { accent-color: var(--brand); }

/* bootstrap-toggle */
.toggle.btn-primary, .toggle-on.btn-primary { background: var(--grad) !important; }
.toggle.btn { transform: none !important; }

/* dropzone / tinymce */
.dropzone { border: 2px dashed #c7d2fe !important; border-radius: var(--radius) !important; background: var(--grad-soft) !important; }
.mce-panel { border-radius: 12px !important; border-color: var(--border) !important; }

/* ---------- 8. Tables / DataTables ---------------------------------- */
table.dataTable,
.dark-mode table.dataTable,
.dark-mode table.table {
  background: var(--surface) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--sh-2) !important;
  color: var(--text-2) !important;
}
table.dataTable thead th:first-child { border-top-left-radius: var(--radius); }
table.dataTable thead th:last-child { border-top-right-radius: var(--radius); }
.table { color: var(--text-2); }
.table thead,
.dark-mode .table thead { background: var(--surface-2) !important; }
.table thead th {
  color: var(--muted) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--border) !important;
  padding-top: 14px !important; padding-bottom: 14px !important;
  white-space: nowrap;
}
.table td { border-bottom: 1px solid var(--border) !important; border-top: none !important; vertical-align: middle !important; }
.table tbody tr { transition: background .2s, box-shadow .2s; }
.table-hover tbody tr:hover,
table.dataTable tbody tr:hover { background: var(--primary-bg-color) !important; }
table.dataTable tbody > tr.selected,
table.dataTable tbody > tr > .selected { background: rgba(37,99,235,.10) !important; }
table.dataTable tbody > tr.selected td { color: var(--text) !important; }
table.dataTable img { box-shadow: var(--sh-1); }
.table-bordered td, .table-bordered th { border-color: var(--border) !important; }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after { color: var(--brand); }

.dataTables_wrapper .dataTables_filter input {
  border-radius: 999px !important;
  padding-left: 14px !important;
  min-width: 200px;
}
.dataTables_info { color: var(--muted) !important; font-size: .82rem; }

/* pagination */
.pagination { gap: 4px; }
.page-link,
.dark-mode .page-link {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--text-2) !important;
  background: var(--surface) !important;
  min-width: 36px; text-align: center;
  transition: all .2s var(--ease);
}
.page-link:hover { color: var(--brand) !important; border-color: var(--brand) !important; transform: translateY(-1px); }
.page-item.active .page-link { background: var(--grad) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--sh-brand); }

/* ---------- 9. Dropdowns / menus ------------------------------------ */
.dropdown-menu,
.dark-mode .dropdown-menu,
nav.navbar .dropdown-menu {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: var(--sh-3) !important;
  padding: 6px !important;
  animation: mt-drop .18s var(--ease);
}
@keyframes mt-drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.dropdown-item { border-radius: 8px; color: var(--text-2) !important; transition: background .15s, color .15s; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--primary-bg-color) !important; color: var(--brand) !important; }
.dropdown-item.active, .dropdown-item:active { background: var(--grad) !important; color: #fff !important; }
.dropdown-menu.edit-options li a,
.dropdown-menu.edit-options li .btn-link { color: var(--text-2) !important; border-radius: 8px; transform: none !important; box-shadow: none !important; }
.dropdown-menu.edit-options li a:hover,
.dropdown-menu.edit-options li .btn-link:hover { background: var(--primary-bg-color) !important; color: var(--brand) !important; }
.dropdown-menu.edit-options li a i,
.dropdown-menu.edit-options li .btn-link i { color: var(--brand); }

/* ---------- 10. Modals ---------------------------------------------- */
.modal { background-color: rgba(15,23,42,.35) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-backdrop.show { opacity: .25 !important; }
.modal-content,
.dark-mode .modal-content {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: 0 30px 60px -12px rgba(15,23,42,.35), 0 0 0 1px rgba(255,255,255,.05) !important;
}
.modal-header { border-radius: 20px 20px 0 0; }
.modal.fade .modal-dialog { transform: translateY(20px) scale(.97); transition: transform .3s var(--ease); }
.modal.show .modal-dialog { transform: none; }
.modal-header {
  border-bottom: 1px solid var(--border) !important;
  background: var(--grad-soft);
  padding: 1rem 1.5rem !important;
}
.modal-title { color: var(--text) !important; font-weight: 700 !important; }
.modal-header .close {
  color: var(--text-2) !important; opacity: .7;
  text-shadow: none;
  transition: transform .25s var(--ease), opacity .2s;
}
.modal-header .close:hover { opacity: 1; transform: rotate(90deg); }
.modal-footer { border-top: 1px solid var(--border) !important; }

/* ---------- 11. Badges / alerts / tabs ------------------------------ */
.badge { border-radius: 999px !important; padding: .35em .75em !important; font-weight: 700 !important; letter-spacing: .02em; }
.badge-primary { background: rgba(37,99,235,.12) !important; color: var(--brand-600) !important; }
.badge-success { background: rgba(16,185,129,.14) !important; color: #047857 !important; }
.badge-info    { background: rgba(14,165,233,.14) !important; color: #0369a1 !important; }
.badge-warning { background: rgba(245,158,11,.16) !important; color: #b45309 !important; }
.badge-danger  { background: rgba(244,63,94,.14) !important; color: #be123c !important; }
.badge-secondary, .badge-dark { background: rgba(100,116,139,.15) !important; color: #475569 !important; }
.dark-mode .badge-success { color: #34d399 !important; }
.dark-mode .badge-danger  { color: #fb7185 !important; }
.dark-mode .badge-warning { color: #fbbf24 !important; }
.dark-mode .badge-info    { color: #38bdf8 !important; }
.dark-mode .badge-primary { color: #93c5fd !important; }
nav.navbar .badge.notification-number { padding: 0 !important; }

.alert {
  border: none !important;
  border-radius: 14px !important;
  box-shadow: var(--sh-1);
  border-left: 4px solid currentColor !important;
  font-weight: 500;
}
.alert-success { background: #ecfdf5 !important; color: #047857 !important; }
.alert-danger  { background: #fff1f2 !important; color: #be123c !important; }
.alert-warning { background: #fffbeb !important; color: #b45309 !important; }
.alert-info    { background: #eff6ff !important; color: #1d4ed8 !important; }

.nav-tabs { border-bottom: 1px solid var(--border) !important; }
.nav-tabs .nav-link { color: var(--text-2); font-weight: 600; border: none !important; padding: .7rem 1.1rem !important; transition: color .2s; }
.nav-tabs .nav-link:hover { color: var(--brand) !important; }
.nav-tabs .nav-item .nav-link.active,
.nav-tabs .nav-link.active {
  color: var(--brand) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: inset 0 -3px 0 var(--brand);
}
.nav-pills .nav-link { border-radius: 10px !important; font-weight: 600; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--grad) !important; box-shadow: var(--sh-brand); }

/* colour utility re-mapping to brand */
.text-primary { color: var(--brand) !important; }
.bg-primary { background: var(--grad) !important; }
.border-primary { border-color: var(--brand) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.dripicons-question { color: var(--brand) !important; }

/* ---------- 12. Date pickers / autocomplete ------------------------- */
.daterangepicker, .datepicker.dropdown-menu {
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: var(--sh-3) !important;
  font-family: inherit !important;
}
.daterangepicker td.active, .daterangepicker td.active:hover,
.datepicker table tr td.active, .datepicker table tr td.active:hover,
.datepicker table tr td.active.active, .datepicker table tr td span.active {
  background: var(--grad) !important; color: #fff !important; border-radius: 8px !important; text-shadow: none !important;
}
.daterangepicker td.in-range { background: var(--primary-bg-color) !important; }
.daterangepicker .custom-range-buttons button.apply-btn,
.daterangepicker .applyBtn { background: var(--grad) !important; border: none !important; border-radius: 8px !important; }
.datepicker table tr td, .datepicker table tr th { border-radius: 8px !important; }

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: var(--sh-3) !important;
  padding: 8px !important;
}
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li.ui-menu-item {
  color: var(--text-2) !important; border-radius: 8px; padding: 6px 10px !important;
}
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li.ui-menu-item:hover { background: var(--primary-bg-color); color: var(--brand) !important; opacity: 1 !important; }

/* ---------- 13. POS screen ------------------------------------------ */
#product-table td { border-color: var(--border) !important; border-radius: 0; transition: background .2s, transform .25s var(--ease), box-shadow .25s !important; }
#product-table td:hover {
  background: var(--surface) !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
  box-shadow: var(--sh-3);
  transform: translateY(-3px);
  position: relative; z-index: 2;
}
.product-img img { border-radius: 10px; transition: transform .3s var(--ease); }
#product-table td:hover img { transform: scale(1.08); }

.btn-default.minus, .btn-default.plus,
.btn-default.minus:focus, .btn-default.plus:focus {
  background: var(--primary-bg-color) !important;
  color: var(--brand) !important;
  border: none !important;
  box-shadow: none !important;
}
.payment-amount { background: var(--grad-soft) !important; border-radius: 14px; border: 1px solid var(--border); }
.payment-options,
.dark-mode .payment-options {
  background: var(--glass) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 30px -12px rgba(15,23,42,.2);
}
.btn-custom { border-radius: 12px !important; }
.filter-window { background: var(--surface) !important; }
.totals .col-sm-4 { border-bottom-color: var(--border) !important; }

/* ---------- 14. Misc ------------------------------------------------ */
footer.main-footer p { color: var(--muted) !important; }
.breadcrumb-holder { background: transparent !important; }
hr { border-top-color: var(--border) !important; }
.tooltip-inner { background: #0f172a !important; border-radius: 8px !important; padding: 6px 10px !important; font-weight: 500; }
.list-group-item { border-color: var(--border) !important; background: var(--surface); }

/* Gentle entrance animation for page content (no layout shift) */
.page > section,
.page > .container-fluid > .row,
section.dashboard-counts,
section.forms { animation: mt-rise .5s var(--ease) both; }
@keyframes mt-rise { from { opacity: 0; } to { opacity: 1; } }
@keyframes mt-rise-card { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- 15. Login / register ------------------------------------ */
.login-page, .register-page {
  background: #0b1437 !important;
  background-image:
    radial-gradient(700px 500px at 15% 20%, rgba(37,99,235,.55), transparent 60%),
    radial-gradient(600px 500px at 85% 80%, rgba(16,185,129,.45), transparent 60%),
    radial-gradient(500px 400px at 80% 10%, rgba(6,182,212,.35), transparent 60%) !important;
  background-size: cover !important;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
.login-page::before, .login-page::after, .register-page::before, .register-page::after {
  content: '';
  position: absolute; border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}
.login-page::before, .register-page::before {
  width: 380px; height: 380px; left: -120px; bottom: -120px;
  background: radial-gradient(circle at 30% 30%, rgba(96,165,250,.55), rgba(37,99,235,0) 70%);
  animation: mt-float 12s ease-in-out infinite;
}
.login-page::after, .register-page::after {
  width: 300px; height: 300px; right: -80px; top: -80px;
  background: radial-gradient(circle at 30% 30%, rgba(52,211,153,.5), rgba(16,185,129,0) 70%);
  animation: mt-float 14s ease-in-out infinite reverse;
}
@keyframes mt-float { 0%,100% { transform: translate(0,0); } 50% { transform: translate(30px,-25px); } }

.login-page .form-outer, .register-page .form-outer { position: relative; z-index: 2; }
.login-page .form-inner, .register-page .form-inner, .dark-mode .login-page .form-inner {
  background: #ffffff !important;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 24px !important;
  box-shadow: 0 40px 80px -20px rgba(2,6,23,.6), 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.8) !important;
  animation: mt-rise-card .6s var(--ease) both;
}
.login-page .form-inner .logo img { max-width: 100%; height: auto; filter: drop-shadow(0 6px 12px rgba(37,99,235,.18)); }
.login-page .input-material {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  padding: 12px 14px !important;
  color: var(--text) !important;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.login-page .input-material:focus { border-color: var(--brand) !important; box-shadow: var(--ring) !important; background: #fff !important; outline: 0; }
.login-page .label-material { left: 14px !important; color: var(--muted) !important; }
.login-page .label-material.active { color: var(--brand) !important; background: #fff; padding: 0 6px; border-radius: 6px; }
.login-page .btn-primary,
.login-page button[type=submit] {
  border-radius: 12px !important;
  padding: .75rem 1rem !important;
  font-size: 1rem !important;
}
.login-page a { color: var(--brand) !important; font-weight: 600; }
.login-page .copyrights, .register-page .copyrights { z-index: 2; }
.login-page .copyrights p, .login-page .copyrights a { color: rgba(255,255,255,.7) !important; }

/* ---------- 16. Responsive / accessibility -------------------------- */
@media (max-width: 1023px) {
  header.container-fluid { padding-top: 8px; }
  nav.navbar { border-radius: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  body { background: #fff !important; }
  .card, table.dataTable { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ---------- 17. Auth forms: full-width fields ----------------------- */
.login-page .form-inner,
.register-page .form-inner { padding: 44px 40px !important; }
.login-page form,
.register-page form { max-width: none !important; width: 100% !important; margin: 1.75rem 0 1rem !important; }
.login-page .form-group-material,
.register-page .form-group-material { width: 100%; }
.login-page .input-material,
.login-page select.form-control,
.register-page .input-material,
.register-page select.form-control {
  width: 100% !important;
  height: 50px !important;
  line-height: 1.4 !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background-color: #f8fafc !important;
  padding: 12px 14px !important;
  color: var(--text) !important;
  font-size: .95rem !important;
}
.login-page select.form-control,
.register-page select.form-control {
  -webkit-appearance: none; appearance: none;
  padding-right: 40px !important;
  color: var(--text-2) !important;
  font-weight: 500 !important;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  cursor: pointer;
}
.login-page select.form-control:focus,
.register-page select.form-control:focus { border-color: var(--brand) !important; box-shadow: var(--ring) !important; background-color: #fff !important; }
.login-page form .btn,
.login-page form button[type=submit],
.register-page form .btn,
.register-page form button[type=submit] { display: block; width: 100% !important; height: 50px; }
/* site title (register page) in brand gradient */
.login-page .logo span,
.register-page .logo span {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  font-weight: 800;
  letter-spacing: -.02em;
}
@media (max-width: 575px) {
  .login-page .form-inner, .register-page .form-inner { padding: 32px 22px !important; }
}
/* empty required select looks like a placeholder, real choice looks like typed text */
.login-page select.form-control:invalid,
.register-page select.form-control:invalid { color: #8a94a8 !important; font-weight: 400 !important; }
.login-page select.form-control option,
.register-page select.form-control option { color: var(--text); }

/* ---------- 18. Dashboard: cards in the same row get equal height ---- */
/* (only the card stretches; card bodies stay normal blocks so Chart.js can size its canvases) */
.dashboard-counts .row > [class*="col-md-"]:has(> .card) { display: flex; flex-direction: column; }
.dashboard-counts .row > [class*="col-md-"] > .card { flex: 1 1 auto; margin-bottom: 30px; }