/* ==========================================================================
   InvPortal – Design System v2.0  (layout-safe rewrite)
   Only visual properties are overridden — all structural layout (floats,
   widths, margins, positions) are left to style.css / Bootstrap 3.
   ========================================================================== */

/* ── GOOGLE FONTS ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── DESIGN TOKENS ─────────────────────────────────────────────────────────── */
:root {
  --sidebar-bg:           #f4f6f9;
  --sidebar-text:         #4a5778;
  --sidebar-active-bg:    #4f7ef8;
  --sidebar-active-text:  #ffffff;
  --sidebar-hover:        rgba(79,126,248,0.10);
  --navbar-bg:            #ffffff;
  --page-bg:              #f0f4fc;
  --accent:               #4f7ef8;
  --accent-hover:         #3a67e8;
  --green:                #22c55e;
  --green-soft:           #dcfce7;
  --red:                  #ef4444;
  --red-soft:             #fee2e2;
  --amber:                #f59e0b;
  --amber-soft:           #fef3c7;
  --purple:               #8b5cf6;
  --purple-soft:          #ede9fe;
  --surface:              #ffffff;
  --border:               #e2e8f4;
  --border-light:         #eef1f8;
  --text-primary:         #0f1729;
  --text-secondary:       #5c6a8a;
  --text-muted:           #94a3b8;
  --radius-sm:            6px;
  --radius-md:            10px;
  --radius-lg:            14px;
  --radius-xl:            20px;
  --radius-full:          9999px;
  --shadow-xs:            0 1px 3px rgba(15,23,42,0.06);
  --shadow-sm:            0 2px 8px rgba(15,23,42,0.08);
  --shadow-md:            0 4px 20px rgba(15,23,42,0.10);
  --shadow-lg:            0 8px 32px rgba(15,23,42,0.14);
  --transition:           0.18s ease;
}

/* ── BASE TYPOGRAPHY ──────────────────────────────────────────────────────── */
body,
input, textarea, select, button {
  font-family: 'Inter', 'Segoe UI', sans-serif !important;
}

body {
  background-color: var(--page-bg) !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

a {
  color: var(--accent);
  transition: color var(--transition);
}
a:hover {
  color: var(--accent-hover);
  text-decoration: none;
}

/* ── TOPBAR / NAVBAR ──────────────────────────────────────────────────────── */
/*
   Bootstrap 3 navbar structure:
     nav.navbar-default.navbar-static-top
       div.navbar-header          (full-width, contains .top-left-part + hamburger)
         div.top-left-part        (float:left 220px — logo area)
         ul.navbar-top-links      (hamburger)
       ul.navbar-top-links.navbar-right  (user menus)

   We colour the whole header bar dark navy. The logo area blends in
   because it's also dark navy. We do NOT touch float/display/width.
*/

nav.navbar.navbar-default.navbar-static-top {
  background-color: var(--navbar-bg) !important;
  border-bottom: 1px solid #e2e8f4 !important;
  box-shadow: 0 1px 6px rgba(15,23,42,0.07) !important;
  border-radius: 0 !important;
}

/* Full-width header strip — keep dark so logo area blends seamlessly */
.navbar-header {
  background-color: var(--navbar-bg) !important;
}

/* Logo area — same navy as sidebar so it looks like one continuous column */
.top-left-part {
  background-color: var(--navbar-bg) !important;
}

.top-left-part a.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 12px;
}

.top-left-part a.logo img {
  max-height: 40px;
  width: auto;
}

/* Navbar links (hamburger, user icons) */
.navbar-top-links > li > a {
  color: #4a5778 !important;
  font-size: 15px !important;
  transition: color var(--transition), background var(--transition);
  border-radius: var(--radius-sm);
}
.navbar-top-links > li > a:hover,
.navbar-top-links > li > a:focus {
  color: var(--accent) !important;
  background-color: rgba(79,126,248,0.07) !important;
}

/* User info block in navbar */
.info-user p {
  color: #4a5778 !important;
  margin: 0;
  font-size: 13px;
}
.info-user > p > strong {
  background: transparent !important;
  color: #94a3b8 !important;
  font-weight: 500;
}

/* Dropdown menus triggered from navbar */
.navbar-top-links .dropdown-menu {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 6px 0 !important;
  min-width: 200px;
}
.navbar-top-links .dropdown-menu > li > a {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  transition: background var(--transition), color var(--transition);
}
.navbar-top-links .dropdown-menu > li > a:hover {
  background-color: #f0f4fc !important;
  color: var(--text-primary) !important;
}
.navbar-top-links .dropdown-menu .divider {
  background-color: var(--border) !important;
  margin: 4px 0 !important;
}

/* Notification / message badges */
.navbar-top-links .badge {
  background-color: var(--accent) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 600;
  border-radius: var(--radius-full);
  padding: 2px 5px;
}

/* ── SIDEBAR ──────────────────────────────────────────────────────────────── */
/*
   .navbar-default.sidebar is the sidebar element.
   Width (220px), position (fixed), overflow (hidden) come from style.css —
   we add only colour / typography / border overrides here.
*/

.navbar-default.sidebar,
.sidebar {
  background-color: var(--sidebar-bg) !important;
  border-right: 1px solid #dde3ef !important;
  box-shadow: none !important;
}

.sidebar-nav,
.sidebar-nav.navbar-collapse {
  background-color: var(--sidebar-bg) !important;
  padding: 6px 0 !important;
}

/* Side-menu list */
#side-menu,
#side-menu ul {
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Every nav link in sidebar */
#side-menu > li > a,
#side-menu li > a {
  color: var(--sidebar-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  border-radius: var(--radius-sm) !important;
  margin: 2px 10px !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  line-height: 1.4 !important;
  transition: background var(--transition), color var(--transition) !important;
  border: none !important;
  background-color: transparent !important;
}

#side-menu > li > a:hover,
#side-menu li > a:hover {
  background-color: var(--sidebar-hover) !important;
  color: var(--accent) !important;
}

/* Active item */
#side-menu > li > a.active,
#side-menu li > a.active,
#side-menu > li.active > a,
#side-menu li.active > a {
  background-color: var(--sidebar-active-bg) !important;
  color: var(--sidebar-active-text) !important;
  box-shadow: 0 1px 6px rgba(79,126,248,0.25) !important;
}

/* Icons inside sidebar links */
#side-menu li > a i {
  font-size: 18px !important;
  width: 22px !important;
  text-align: center !important;
  flex-shrink: 0;
  opacity: 0.85;
}
#side-menu li > a:hover i,
#side-menu li > a.active i,
#side-menu li.active > a i {
  opacity: 1;
}

/* hide-menu text label */
#side-menu li > a .hide-menu {
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

/* Arrow for items with children */
#side-menu li > a .fa-angle-down,
#side-menu li > a .fa-angle-left {
  margin-left: auto !important;
  opacity: 0.45;
  font-size: 10px !important;
}

/* Second-level sub-menu */
#side-menu .nav-second-level {
  background-color: transparent !important;
  margin: 0 8px 2px !important;
  padding: 2px 0 !important;
}

#side-menu .nav-second-level li > a {
  color: var(--sidebar-text) !important;
  font-size: 12.5px !important;
  padding: 7px 10px 7px 46px !important;
  margin: 0 !important;
  border-radius: var(--radius-sm) !important;
  display: block !important;
  line-height: 1.4 !important;
}

#side-menu .nav-second-level li > a:hover {
  color: var(--accent) !important;
  background-color: var(--sidebar-hover) !important;
}

#side-menu .nav-second-level li.active > a,
#side-menu .nav-second-level li > a.active {
  color: var(--accent) !important;
  background-color: rgba(79,126,248,0.10) !important;
  font-weight: 600 !important;
}

/* Sidebar section caps */
.nav-small-cap {
  color: #b0bcd4 !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding: 10px 18px 3px !important;
}

/* Sidebar search box */
.sidebar-search input {
  background: #f0f4fc !important;
  border: 1px solid #e2e8f4 !important;
  border-radius: var(--radius-full) !important;
  color: #4a5778 !important;
  font-size: 12.5px !important;
  padding: 7px 16px !important;
}
.sidebar-search input::placeholder {
  color: #b0bcd4;
}
.sidebar-search input:focus {
  background: #ffffff !important;
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(79,126,248,0.15) !important;
}

/* Slim-scroll bar */
.slimScrollBar {
  background: rgba(79,126,248,0.25) !important;
  border-radius: 4px !important;
}

/* ── PAGE WRAPPER (main content area) ────────────────────────────────────── */
/*
   margin-left: 220px is set by style.css — do NOT duplicate or override it.
   We only add background colour and padding here.
*/

#page-wrapper {
  background-color: var(--page-bg) !important;
  min-height: 100vh;
  /* Do NOT override padding — bg-title uses margin-left:-25.5px to compensate
     for the original padding:0 from style.css. Overriding breaks the header. */
}

/* ── PAGE TITLE BAR (bg-title) ────────────────────────────────────────────── */
/*
   .bg-title uses margin-left/right: -25.5px (style.css) to span full width.
   We only change visual properties here — never margin/padding/overflow.
*/
.bg-title {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border-light) !important;
  box-shadow: 0 1px 4px rgba(15,23,42,0.05) !important;
}

.bg-title h4,
.bg-title .page-title {
  color: var(--text-primary) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

.bg-title .breadcrumb {
  background: transparent !important;
  font-size: 12.5px !important;
}

.bg-title .breadcrumb > li > a {
  color: var(--accent) !important;
}

.bg-title .breadcrumb > .active {
  color: var(--text-muted) !important;
}

/* ── BREADCRUMB ───────────────────────────────────────────────────────────── */
.page-titles {
  background: var(--surface) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  border: 1px solid var(--border-light) !important;
  padding: 14px 20px !important;
  margin-bottom: 20px !important;
}

.page-titles h4,
.page-titles .title-head {
  color: var(--text-primary) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 12.5px !important;
}

.breadcrumb > li + li::before {
  color: var(--text-muted) !important;
}

.breadcrumb > li > a {
  color: var(--accent) !important;
}

.breadcrumb > .active {
  color: var(--text-muted) !important;
}

/* ── PANELS / CARDS ───────────────────────────────────────────────────────── */
.panel,
.white-box,
.card {
  background: var(--surface) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--transition);
}

.panel:hover,
.white-box:hover {
  box-shadow: var(--shadow-md) !important;
}

.panel-default > .panel-heading {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding: 14px 20px !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
}

.panel-heading .panel-title {
  color: var(--text-primary) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
}

.panel-body {
  padding: 20px !important;
  color: var(--text-secondary) !important;
}

.panel-footer {
  background: #f7f9fd !important;
  border-top: 1px solid var(--border-light) !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
  padding: 12px 20px !important;
  font-size: 13px !important;
  color: var(--text-muted) !important;
}

/* Coloured panel variants */
.panel-primary > .panel-heading { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.panel-success > .panel-heading { background: var(--green) !important; border-color: var(--green) !important; color: #fff !important; }
.panel-danger  > .panel-heading { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
.panel-warning > .panel-heading { background: var(--amber) !important; border-color: var(--amber) !important; color: #fff !important; }
.panel-info    > .panel-heading { background: var(--purple) !important; border-color: var(--purple) !important; color: #fff !important; }

.panel-primary > .panel-heading .panel-title,
.panel-success > .panel-heading .panel-title,
.panel-danger  > .panel-heading .panel-title,
.panel-warning > .panel-heading .panel-title,
.panel-info    > .panel-heading .panel-title {
  color: #fff !important;
}

/* ── TABLES ───────────────────────────────────────────────────────────────── */
.table {
  color: var(--text-secondary) !important;
  font-size: 13.5px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.table > thead > tr > th {
  background: #f7f9fd !important;
  color: var(--text-primary) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-bottom: 2px solid var(--border) !important;
  padding: 8px 12px !important;
  white-space: nowrap;
  vertical-align: middle !important;
  line-height: 1.4 !important;
}

.table > tbody > tr > td {
  border-top: 1px solid var(--border-light) !important;
  padding: 8px 12px !important;
  vertical-align: middle !important;
  color: var(--text-secondary) !important;
  line-height: 1.5 !important;
}

/* Prevent icons inside table cells from getting stretched or misaligned */
.table > tbody > tr > td i,
.table > tbody > tr > td .fa,
.table > tbody > tr > td .ti {
  line-height: 1 !important;
  vertical-align: middle !important;
  display: inline !important;
}

/* Action icon links in tables — keep them inline and compact */
.table > tbody > tr > td a.btn,
.table > tbody > tr > td .btn {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 1px 2px !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: #f9fbff !important;
}

.table-hover > tbody > tr:hover > td {
  background-color: #eef2fd !important;
  color: var(--text-primary) !important;
}

.table-bordered {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border-color: var(--border-light) !important;
}

.table-responsive {
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
}

/* DataTables overrides */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-secondary) !important;
  padding: 5px 10px !important;
  font-size: 13px !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(79,126,248,0.15) !important;
  outline: none !important;
}

.dataTables_wrapper .dataTables_info {
  color: var(--text-muted) !important;
  font-size: 12.5px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--radius-sm) !important;
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  padding: 4px 10px !important;
  border: 1px solid transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #f0f4fc !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

/* ── BUTTONS ──────────────────────────────────────────────────────────────── */
.btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: var(--radius-sm) !important;
  padding: 5px 14px !important;
  letter-spacing: 0.01em !important;
  transition: all var(--transition) !important;
  line-height: 1.5 !important;
}

/* Flat/icon-only links in tables must not inflate row height */
.btn.no-padding,
a.btn.no-padding {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  line-height: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  border-radius: 0 !important;
}

.btn-default {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
  box-shadow: var(--shadow-xs) !important;
}
.btn-default:hover {
  background: #f0f4fc !important;
  border-color: #c8d3e8 !important;
  color: var(--text-primary) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm) !important;
}

.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(79,126,248,0.30) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(79,126,248,0.40) !important;
}

.btn-success {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(34,197,94,0.28) !important;
}
.btn-success:hover,
.btn-success:focus {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(34,197,94,0.38) !important;
}

.btn-danger {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(239,68,68,0.28) !important;
}
.btn-danger:hover,
.btn-danger:focus {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(239,68,68,0.38) !important;
}

.btn-warning {
  background: var(--amber) !important;
  border-color: var(--amber) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(245,158,11,0.28) !important;
}
.btn-warning:hover,
.btn-warning:focus {
  background: #d97706 !important;
  border-color: #d97706 !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.btn-info {
  background: var(--purple) !important;
  border-color: var(--purple) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(139,92,246,0.28) !important;
}
.btn-info:hover,
.btn-info:focus {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.btn-link {
  color: var(--accent) !important;
  box-shadow: none !important;
}
.btn-link:hover {
  color: var(--accent-hover) !important;
}

.btn-sm {
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-sm) !important;
}

.btn-lg {
  font-size: 14px !important;
  padding: 7px 18px !important;
  border-radius: var(--radius-md) !important;
}

.btn-xs {
  font-size: 11px !important;
  padding: 2px 7px !important;
  border-radius: var(--radius-sm) !important;
}

/* ── FORMS ────────────────────────────────────────────────────────────────── */
.form-control {
  background-color: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-size: 13.5px !important;
  padding: 8px 12px !important;
  height: auto !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
  box-shadow: none !important;
}

.form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(79,126,248,0.18) !important;
  outline: none !important;
}

.form-control::placeholder {
  color: var(--text-muted) !important;
  opacity: 1;
}

.form-control[disabled],
.form-control[readonly] {
  background-color: #f7f9fd !important;
  color: var(--text-muted) !important;
  border-color: var(--border-light) !important;
}

.input-group-addon {
  background: #f7f9fd !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius-md) !important;
  font-size: 14px !important;
}

.control-label,
label {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-bottom: 5px !important;
}

.form-group {
  margin-bottom: 18px !important;
}

/* Validation states */
.has-error .form-control {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.15) !important;
}
.has-error .control-label,
.has-error .help-block {
  color: var(--red) !important;
}

.has-success .form-control {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.15) !important;
}
.has-success .control-label,
.has-success .help-block {
  color: var(--green) !important;
}

.help-block {
  color: var(--text-muted) !important;
  font-size: 12px !important;
  margin-top: 4px !important;
}

/* Select2 / Bootstrap Select */
.bootstrap-select .btn {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-size: 13.5px !important;
  padding: 7px 12px !important;
  box-shadow: none !important;
}
.bootstrap-select.open .btn {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(79,126,248,0.18) !important;
}
.bootstrap-select .dropdown-menu {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
}
.bootstrap-select .dropdown-menu > li > a {
  font-size: 13.5px !important;
  color: var(--text-secondary) !important;
  padding: 7px 14px !important;
}
.bootstrap-select .dropdown-menu > li > a:hover,
.bootstrap-select .dropdown-menu > li.selected > a {
  background: #eef2fd !important;
  color: var(--text-primary) !important;
}

/* ── ALERTS ───────────────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius-md) !important;
  border-width: 1px !important;
  padding: 12px 18px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

.alert-success {
  background-color: var(--green-soft) !important;
  border-color: #86efac !important;
  color: #166534 !important;
}

.alert-danger,
.alert-error {
  background-color: var(--red-soft) !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
}

.alert-warning {
  background-color: var(--amber-soft) !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}

.alert-info {
  background-color: var(--purple-soft) !important;
  border-color: #c4b5fd !important;
  color: #5b21b6 !important;
}

.alert .close {
  color: inherit !important;
  opacity: 0.5;
}
.alert .close:hover {
  opacity: 1;
}

/* ── MODALS ───────────────────────────────────────────────────────────────── */
.modal-content {
  background: var(--surface) !important;
  border: none !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  overflow: hidden;
}

.modal-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border-light) !important;
  padding: 18px 24px !important;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
}

.modal-header .modal-title {
  color: var(--text-primary) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.modal-header .close {
  color: var(--text-muted) !important;
  opacity: 1;
  font-size: 20px;
  line-height: 1;
  transition: color var(--transition);
}
.modal-header .close:hover {
  color: var(--text-primary) !important;
}

.modal-body {
  padding: 22px 24px !important;
  color: var(--text-secondary) !important;
  font-size: 13.5px !important;
}

.modal-footer {
  background: #f7f9fd !important;
  border-top: 1px solid var(--border-light) !important;
  padding: 14px 24px !important;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
}

.modal-backdrop.in {
  opacity: 0.45;
}

/* ── BADGES & LABELS ──────────────────────────────────────────────────────── */
.badge {
  border-radius: var(--radius-full) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
}

.label {
  border-radius: var(--radius-sm) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  letter-spacing: 0.02em;
}

.label-default { background-color: var(--text-muted) !important; color: #fff !important; }
.label-primary,
.badge-primary  { background-color: var(--accent) !important; color: #fff !important; }
.label-success,
.badge-success  { background-color: var(--green) !important; color: #fff !important; }
.label-danger,
.badge-danger   { background-color: var(--red) !important; color: #fff !important; }
.label-warning,
.badge-warning  { background-color: var(--amber) !important; color: #fff !important; }
.label-info,
.badge-info     { background-color: var(--purple) !important; color: #fff !important; }

/* ── TABS ─────────────────────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid var(--border) !important;
  margin-bottom: 20px !important;
}

.nav-tabs > li > a {
  color: var(--text-muted) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 9px 18px !important;
  margin-bottom: -2px !important;
  transition: color var(--transition), border-color var(--transition) !important;
  background: transparent !important;
}

.nav-tabs > li > a:hover {
  color: var(--text-primary) !important;
  border-bottom-color: var(--border) !important;
  background: transparent !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--accent) !important;
  border-bottom: 2px solid var(--accent) !important;
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

.tab-content {
  padding: 16px 0 !important;
  color: var(--text-secondary) !important;
}

/* ── PILLS NAV ────────────────────────────────────────────────────────────── */
.nav-pills > li > a {
  color: var(--text-secondary) !important;
  border-radius: var(--radius-md) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 7px 16px !important;
  transition: background var(--transition), color var(--transition);
}
.nav-pills > li > a:hover {
  background: #eef2fd !important;
  color: var(--accent) !important;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover {
  background: var(--accent) !important;
  color: #fff !important;
}

/* ── DROPDOWNS ────────────────────────────────────────────────────────────── */
.dropdown-menu {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 6px 0 !important;
  font-size: 13.5px !important;
}

.dropdown-menu > li > a {
  color: var(--text-secondary) !important;
  padding: 8px 16px !important;
  transition: background var(--transition), color var(--transition);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: #f0f4fc !important;
  color: var(--text-primary) !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
  background: var(--accent) !important;
  color: #fff !important;
}

.dropdown-menu .divider {
  background-color: var(--border-light) !important;
  margin: 5px 0 !important;
}

.dropdown-header {
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 8px 16px 4px !important;
}

/* ── PROGRESS BARS ────────────────────────────────────────────────────────── */
.progress {
  background-color: #e8edf6 !important;
  border-radius: var(--radius-full) !important;
  box-shadow: none !important;
  height: 8px !important;
  overflow: hidden;
}

.progress-bar {
  border-radius: var(--radius-full) !important;
  transition: width 0.5s ease !important;
}

.progress-bar-primary,
.progress-bar              { background-color: var(--accent) !important; }
.progress-bar-success      { background-color: var(--green) !important; }
.progress-bar-danger       { background-color: var(--red) !important; }
.progress-bar-warning      { background-color: var(--amber) !important; }
.progress-bar-info         { background-color: var(--purple) !important; }

/* ── WELLS ────────────────────────────────────────────────────────────────── */
.well {
  background: #f7f9fd !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  color: var(--text-secondary) !important;
  padding: 18px 20px !important;
}

/* ── LIST GROUPS ──────────────────────────────────────────────────────────── */
.list-group-item {
  background: var(--surface) !important;
  border-color: var(--border-light) !important;
  color: var(--text-secondary) !important;
  font-size: 13.5px !important;
  padding: 11px 16px !important;
  transition: background var(--transition);
}

.list-group-item:hover {
  background: #f7f9fd !important;
}

.list-group-item.active,
.list-group-item.active:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

.list-group-item:first-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}
.list-group-item:last-child {
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}

/* ── TOOLTIPS & POPOVERS ──────────────────────────────────────────────────── */
.tooltip-inner {
  background: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
}

.tooltip.top    .tooltip-arrow { border-top-color: var(--text-primary) !important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--text-primary) !important; }
.tooltip.left   .tooltip-arrow { border-left-color: var(--text-primary) !important; }
.tooltip.right  .tooltip-arrow { border-right-color: var(--text-primary) !important; }

.popover {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  font-size: 13.5px !important;
}

.popover-title {
  background: #f7f9fd !important;
  border-bottom: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
}

.popover-content {
  color: var(--text-secondary) !important;
  padding: 12px 16px !important;
}

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
footer.footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border-light) !important;
  color: var(--text-muted) !important;
  font-size: 12.5px !important;
  padding: 14px 24px !important;
  margin-top: 24px !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

footer.footer a {
  color: var(--accent) !important;
}

/* ── STAT / COUNTER WIDGETS ───────────────────────────────────────────────── */
.bg-primary { background-color: var(--accent) !important; }
.bg-success { background-color: var(--green) !important; }
.bg-danger  { background-color: var(--red) !important; }
.bg-warning { background-color: var(--amber) !important; }
.bg-info    { background-color: var(--purple) !important; }

.text-primary { color: var(--accent) !important; }
.text-success { color: var(--green) !important; }
.text-danger  { color: var(--red) !important; }
.text-warning { color: var(--amber) !important; }
.text-info    { color: var(--purple) !important; }
.text-muted   { color: var(--text-muted) !important; }

/* ── SPARKLINE / CHART CONTAINERS ────────────────────────────────────────── */
.chart-wrapper {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}

/* ── SCROLLBAR ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #c8d3e8;
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

/* ── UTILITY OVERRIDES ────────────────────────────────────────────────────── */
hr {
  border-top: 1px solid var(--border-light) !important;
  margin: 20px 0 !important;
}

.text-right  { text-align: right !important; }
.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }

/* Ripple / Waves (kept but neutralised if causing issues) */
.waves-effect .waves-ripple {
  background-color: rgba(79,126,248,0.20);
}

/* ── SWITCHERY ────────────────────────────────────────────────────────────── */
.switchery {
  border-radius: var(--radius-full) !important;
}

/* ── DATEPICKER / TIMEPICKER / DATERANGEPICKER ────────────────────────────── */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.datepicker table tr td:hover {
  background: #eef2fd !important;
}

.daterangepicker .ranges li.active,
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--accent) !important;
}

.timepicker-widget {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ── SWEET ALERT ──────────────────────────────────────────────────────────── */
.sweet-alert {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  font-family: 'Inter', sans-serif !important;
}

.sweet-alert h2 {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

.sweet-alert p {
  color: var(--text-secondary) !important;
}

.sweet-alert .sa-button-container .btn {
  border-radius: var(--radius-md) !important;
}

/* ── DROPIFY ──────────────────────────────────────────────────────────────── */
.dropify-wrapper {
  background: #f7f9fd !important;
  border: 2px dashed var(--border) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text-muted) !important;
  transition: border-color var(--transition), background var(--transition);
}

.dropify-wrapper:hover {
  background: #eef2fd !important;
  border-color: var(--accent) !important;
}

.dropify-wrapper .dropify-message p {
  color: var(--text-muted) !important;
  font-size: 13.5px !important;
}

/* ── OVERFLOW HIDDEN fix for body when modal open ────────────────────────── */
body.modal-open {
  overflow: hidden;
}

/* ── LOGIN / MERCHANT LOGIN PAGE ──────────────────────────────────────────── */
.login-register {
  background: var(--page-bg) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-box {
  background: var(--surface) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  padding: 40px !important;
  border: 1px solid var(--border-light) !important;
}

.login-box .logo-center img {
  max-height: 52px;
}

/* ── PRINT ────────────────────────────────────────────────────────────────── */
@media print {
  .navbar, .sidebar { display: none !important; }
  #page-wrapper {
    margin-left: 0 !important;
    padding: 0 !important;
  }
}