/* ═══════════════════════════════════════════════════════════════════
   MAIN STYLES — unified design system
   Tokens aligned with statement-review / invoice-chat UI
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── Design tokens ── */
:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --border: #e4e7ec;
  --border-h: #c8cdd7;
  --text-1: #0f1623;
  --text-2: #5a6478;
  --text-3: #9aa2b4;
  --blue: #2463eb;
  --blue-dim: #eef3fd;
  --green: #0d9f6e;
  --green-dim: #e6f7f2;
  --amber: #d97706;
  --amber-dim: #fef3cd;
  --red: #dc2626;
  --red-dim: #fde8e8;
  --purple: #7c3aed;
  --purple-dim: #f5f3ff;
  --teal: #0891b2;
  --teal-dim: #ecfeff;
  --font: 'DM Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --r: 10px;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
  --transition: all 0.3s ease;
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; }

body, html {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  height: 100%;
  font-size: 0.8rem;
  -webkit-font-smoothing: antialiased;
}

p, td, th, tr {
  font-family: var(--font);
  font-size: 0.8rem !important;
}

a, a:hover, a:focus {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

label {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-2);
}


/* ═══════════════════════════════════════════════════════════════════
   LAYOUT — sidebar + main
   ═══════════════════════════════════════════════════════════════════ */

#mainpage {
  width: calc(100% - 270px);
  transition: var(--transition);
  padding: 15px 24px;
  min-height: 100vh;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  margin-left: 270px;
}


#mainpage.active {
  width: 100%;
  margin-left: 0;
}

/* ── Content wrappers — inner spacing ── */
#mainpage > .container-fluid { padding: 5px; }

#mainpage .bg-white.rounded {
  padding: 10px 24px;
  border-radius: var(--r);
}

.main-body {
  padding: 4px 0;
}

/* Page title bar */
.main-body .border-bottom {
  padding-bottom: 14px !important;
  margin-bottom: 20px !important;
}

.main-body h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
}

/* Breadcrumb spacing */
.breadcrumb {
  font-size: 12px;
  padding: 0;
  margin-bottom: 18px;
  background: none;
}
.breadcrumb-item a { color: var(--blue); }
.breadcrumb-item.active { color: var(--text-3); }

/* Search container */
.search-container .bg-white.rounded.border {
  padding: 16px 20px !important;
  border-radius: var(--r) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow);
}

/* Legend / section titles inside accordions */
legend {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

/* Items-per-page row */
.mb-3.d-flex.justify-content-between.align-items-center {
  margin-bottom: 14px !important;
}

/* Records info */
.records-info {
  font-size: 12px;
  color: var(--text-2);
  padding-top: 10px !important;
}

/* Table form controls — tighter but padded */
.searchable-table .form-control,
.searchable-table .form-select {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  border-color: var(--border);
  background: var(--surface);
}
.searchable-table .form-control:focus,
.searchable-table .form-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(36,99,235,.08);
}

/* Filter row selects inside table */
.searchable-table .filter-row th {
  padding: 6px 10px;
  background: #fafbfc;
}
.searchable-table .filter-row .filter {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
}

/* Pagination container at bottom */
.pagination-container,
.pagination-info {
  padding: 8px 0;
}
.pagination-container .numbers {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
.pagination-container .numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-2);
  background: var(--surface);
  transition: all .12s;
}
.pagination-container .numbers span:hover { background: var(--bg); color: var(--text-1); }
.pagination-container .numbers span.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 600;
}

/* Form select (items per page) */
select.itemsPerPage,
.form-select-sm {
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-1);
  font-family: var(--font);
}

/* General form-control styling */
.form-control, .form-select {
  font-family: var(--font);
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 12px;
  color: var(--text-1);
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(36,99,235,.08);
  outline: none;
}
.form-control::placeholder { color: var(--text-3); }
.form-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-3);
  margin-bottom: 4px;
}

.form-select.is-valid,
.form-control.is-valid,
.was-validated .form-select:valid,
.was-validated .form-control:valid {
  background-image: none !important;
  padding-right: 12px !important;
  border-color: var(--green) !important;
  box-shadow: none !important;
}

.form-select.is-invalid,
.form-control.is-invalid,
.was-validated .form-select:invalid,
.was-validated .form-control:invalid {
  background-image: none !important;
  padding-right: 12px !important;
  border-color: var(--red) !important;
  box-shadow: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════════ */

#sidebar {
  width: 260px;
  background: linear-gradient(145deg, #1a1a1a, #000000);
  color: #ffffff;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: fixed;
  height: 100vh;
  max-height: 100vh;
  z-index: 1000;
  left: 0;
  top: 0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #333 #1a1a1a;
  padding-bottom: 20px;
}
 

#sidebar::-webkit-scrollbar { width: 6px; }
#sidebar::-webkit-scrollbar-track { background: #1a1a1a; }
#sidebar::-webkit-scrollbar-thumb { background-color: #333; border-radius: 3px; }

#sidebar.active { left: -260px; }

#sidebar .sidebar-header {
  padding: 20px;
  background-color: black;
  color: white;
  text-align: center;
}

#sidebar ul.components {
  padding: 5px 0;
  background-color: black;
  color: white;
}

#sidebar ul p {
  color: white;
  padding: 10px;
  text-align: center;
}

#sidebar ul li a {
  padding: 8px;
  font-size: 1.2em;
  display: block;
  color: black !important;
  text-align: left !important;
}

#sidebar ul li a:hover { color: var(--blue); }
#sidebar ul li.active > a, a[aria-expanded="true"] { color: white; }

#sidebar .dropdown-container { width: 100%; background-color: black; }
#sidebar .btn-light { background-color: black; color: white; border: none; width: 100%; text-align: center; }
#sidebar .dropdown-menu-custom { list-style-type: none; padding: 0; }
#sidebar .dropdown-item-custom { color: white; text-align: center; }
#sidebar .dropdown-item-custom:hover { transform: translateY(-2px); }


/* ═══════════════════════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════════════════════ */

.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .navbar-toggler { top: .25rem; right: 1rem; }
.navbar .form-control { padding: .75rem 1rem; }
.nav-link { padding: .5rem 1rem; }
.nav-link:hover { background-color: rgba(0, 0, 0, .1); }


/* ═══════════════════════════════════════════════════════════════════
   BUTTONS — unified system
   ═══════════════════════════════════════════════════════════════════ */

/* Base ghost button (replaces button-4) */
.button-4,
.btn-professional:not(.dropdown-item) {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all .12s ease;
  text-decoration: none;
  line-height: 1.4;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.button-4:hover,
.btn-professional:not(.dropdown-item):hover {
  background: #f3f5f8;
  border-color: var(--border-h);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.button-4:disabled {
  opacity: .4;
  pointer-events: none;
  cursor: not-allowed;
}

.button-4:active { background: #edf0f5; }
.button-4:focus  { outline: 2px solid var(--blue-dim); outline-offset: 1px; }

/* Primary */
.btn-primary:not(.dropdown-item) {
  background: var(--blue) !important;
  color: #fff !important;
  border: 1px solid var(--blue) !important;
  -webkit-text-fill-color: #fff !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  font-weight: 600 !important;
}
.btn-primary:not(.dropdown-item):hover,
.btn-primary:not(.dropdown-item):focus {
  background: #1a52d3 !important;
  border-color: #1a52d3 !important;
  box-shadow: 0 4px 12px rgba(36,99,235,.2) !important;
  transform: translateY(-1px);
}

/* Secondary / Teal */
.btn-secondary:not(.dropdown-item) {
  background: var(--teal) !important;
  color: #fff !important;
  border: 1px solid var(--teal) !important;
  -webkit-text-fill-color: #fff !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  font-weight: 600 !important;
}
.btn-secondary:not(.dropdown-item):hover,
.btn-secondary:not(.dropdown-item):focus {
  background: #0e7490 !important;
  border-color: #0e7490 !important;
  box-shadow: 0 4px 12px rgba(8,145,178,.2) !important;
  transform: translateY(-1px);
}

/* Info / Green */
.btn-info:not(.dropdown-item) {
  background: var(--green) !important;
  color: #fff !important;
  border: 1px solid var(--green) !important;
  -webkit-text-fill-color: #fff !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  font-weight: 600 !important;
}
.btn-info:not(.dropdown-item):hover,
.btn-info:not(.dropdown-item):focus {
  background: #0b8a5f !important;
  border-color: #0b8a5f !important;
  box-shadow: 0 4px 12px rgba(13,159,110,.2) !important;
  transform: translateY(-1px);
}

/* Warning / Amber */
.btn-warning:not(.dropdown-item) {
  background: var(--amber) !important;
  color: #fff !important;
  border: 1px solid var(--amber) !important;
  -webkit-text-fill-color: #fff !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  font-weight: 600 !important;
}
.btn-warning:not(.dropdown-item):hover,
.btn-warning:not(.dropdown-item):focus {
  background: #b45309 !important;
  border-color: #b45309 !important;
  box-shadow: 0 4px 12px rgba(217,119,6,.2) !important;
  transform: translateY(-1px);
}

/* Danger / Red */
.btn-danger:not(.dropdown-item) {
  background: var(--red) !important;
  color: #fff !important;
  border: 1px solid var(--red) !important;
  -webkit-text-fill-color: #fff !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  font-weight: 600 !important;
}
.btn-danger:not(.dropdown-item):hover,
.btn-danger:not(.dropdown-item):focus {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  box-shadow: 0 4px 12px rgba(220,38,38,.2) !important;
  transform: translateY(-1px);
}

/* Success */
.btn-success:not(.dropdown-item) {
  background: var(--green) !important;
  color: #fff !important;
  border: 1px solid var(--green) !important;
  -webkit-text-fill-color: #fff !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  font-weight: 600 !important;
}
.btn-success:not(.dropdown-item):hover,
.btn-success:not(.dropdown-item):focus {
  background: #0b8a5f !important;
  border-color: #0b8a5f !important;
  box-shadow: 0 4px 12px rgba(13,159,110,.2) !important;
  transform: translateY(-1px);
}

/* Dropdown item resets */
.dropdown-item.btn {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-image: none !important;
  color: var(--text-1) !important;
  padding: 0.25rem 1rem !important;
  width: 100% !important;
  text-align: left !important;
  display: block !important;
  font-weight: 400 !important;
}
.dropdown-item.btn:hover {
  background-color: var(--bg) !important;
  color: var(--text-1) !important;
  transform: none !important;
  box-shadow: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
   TABLES — searchable-table
   ═══════════════════════════════════════════════════════════════════ */

.searchable-table {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
  font-family: var(--font);
  max-height: calc(100vh - 380px);
  overflow-y: auto;
  overflow-x: auto;
}

.searchable-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.searchable-table th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: #f8f9fc;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 2;
}

.searchable-table td {
  padding: 11px 14px;
  border-bottom: 1px solid #f3f5f8;
  font-size: 12.5px;
  color: var(--text-1);
  vertical-align: middle;
}

.searchable-table tr:last-child td { border-bottom: none; }
.searchable-table tbody tr:hover { background: #fafbfc; }
.searchable-table tbody tr:nth-child(even) { background: #fcfcfd; }

.searchable-table td.amount,
.searchable-table td.numeric {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
}

.searchable-table .badge,
.searchable-table .badge-custom {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
}

/* scrollbar */
.searchable-table::-webkit-scrollbar { height: 6px; width: 6px; }
.searchable-table::-webkit-scrollbar-track { background: #f1f3f7; }
.searchable-table::-webkit-scrollbar-thumb { background: var(--border-h); border-radius: 4px; }
.searchable-table::-webkit-scrollbar-thumb:hover { background: var(--text-3); }


/* ═══════════════════════════════════════════════════════════════════
   BADGES / PILLS
   ═══════════════════════════════════════════════════════════════════ */

.badge-custom {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  border-radius: 99px;
  color: #fff;
  background-color: var(--blue);
  transition: background-color 0.15s ease;
}

.badge-custom:hover {
  background-color: #1a52d3;
  text-decoration: none;
}

.dropdown-item-custom .badge-custom { margin-left: 5px; }


/* ═══════════════════════════════════════════════════════════════════
   STATUS BADGES — pill style
   ═══════════════════════════════════════════════════════════════════ */

.status-draft,
.status-archived {
  background-color: #edf0f5 !important;
  color: var(--text-3) !important;
  font-weight: 700 !important;
  border-radius: 99px !important;
}

.status-confirmed,
.status-active,
.status-in-transit,
.e_invoice_status_Valid {
  background-color: var(--teal-dim) !important;
  color: var(--teal) !important;
  font-weight: 700 !important;
  border-radius: 99px !important;
}

.status-cancelled,
.status-closed,
.status-could-not-deliver,
.status-overdue,
.e_invoice_status_Invalid {
  background-color: var(--red-dim) !important;
  color: var(--red) !important;
  font-weight: 700 !important;
  border-radius: 99px !important;
}

.status-pending,
.status-due {
  background-color: var(--amber-dim) !important;
  color: var(--amber) !important;
  font-weight: 700 !important;
  border-radius: 99px !important;
}

.status-pending-stock,
.status-partially-paid {
  background-color: #fff7ed !important;
  color: #ea580c !important;
  font-weight: 700 !important;
  border-radius: 99px !important;
}

.status-delivered,
.status-paid,
.status-completed {
  background-color: var(--green-dim) !important;
  color: var(--green) !important;
  font-weight: 700 !important;
  border-radius: 99px !important;
}

/* Text status variants */
.text-status-draft,
.text-status-archived,
.e_invoice_status_Submitted { color: var(--text-3) !important; font-weight: 600 !important; }
.text-status-active,
.text-status-paid { color: var(--green) !important; font-weight: 600 !important; }
.text-status-cancelled,
.text-status-closed,
.text-status-could-not-deliver,
.text-status-overdue { color: var(--red) !important; font-weight: 600 !important; }
.text-status-completed,
.text-status-in-transit,
.text-status-partially-paid { color: var(--teal) !important; font-weight: 600 !important; }
.text-status-pending { color: var(--amber) !important; font-weight: 600 !important; }
.text-status-pending-stock { color: #ea580c !important; font-weight: 600 !important; }
.text-status-confirmed,
.text-status-delivered { color: var(--green) !important; font-weight: 600 !important; }


/* ═══════════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════════ */

.card {
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--r);
  margin-bottom: 1.5rem;
  background: var(--surface);
  padding: 20px;
}

.card-header {
  background-color: #f8f9fc;
  border-bottom: 1px solid var(--border);
  padding: 14px 18px;
  border-top-left-radius: var(--r);
  border-top-right-radius: var(--r);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-1);
}

.card-body { padding: 18px 20px; }

/* Status summary cards row */
.row.mb-3 > [class*="col-"] > .card {
  transition: var(--transition);
}
.row.mb-3 > [class*="col-"] > .card .card-body {
  padding: 14px 16px;
}
.row.mb-3 > [class*="col-"] > .card .card-footer {
  padding: 8px 16px;
}

/* Status-bordered cards */
.card-draft      { border-color: var(--text-3) !important; border-width: 1.5px !important; }
.card-active     { border-color: var(--teal) !important; border-width: 1.5px !important; }
.card-pending    { border-color: var(--amber) !important; border-width: 1.5px !important; }
.card-lost,
.card-cancelled  { border-color: var(--red) !important; border-width: 1.5px !important; }
.card-paid,
.card-completed,
.card-delivered  { border-color: var(--green) !important; border-width: 1.5px !important; }

.card-draft .card-title      { color: var(--text-3) !important; }
.card-active .card-title     { color: var(--teal) !important; }
.card-pending .card-title    { color: var(--amber) !important; }
.card-lost .card-title,
.card-cancelled .card-title  { color: var(--red) !important; }
.card-paid .card-title,
.card-completed .card-title,
.card-delivered .card-title  { color: var(--green) !important; }

/* Outline button variants for cards */
.card-draft .btn-outline-draft       { color: var(--text-3) !important; border-color: var(--text-3) !important; }
.card-active .btn-outline-active     { color: var(--teal) !important; border-color: var(--teal) !important; }
.card-pending .btn-outline-pending   { color: var(--amber) !important; border-color: var(--amber) !important; }
.card-lost .btn-outline-lost,
.card-cancelled .btn-outline-cancelled { color: var(--red) !important; border-color: var(--red) !important; }
.card-paid .btn-outline-paid,
.card-completed .btn-outline-completed,
.card-delivered .btn-outline-delivered { color: var(--green) !important; border-color: var(--green) !important; }

.card-draft .btn-outline-draft:hover       { background: var(--text-3) !important; color: #fff !important; }
.card-active .btn-outline-active:hover     { background: var(--teal) !important; color: #fff !important; }
.card-pending .btn-outline-pending:hover   { background: var(--amber) !important; color: #fff !important; }
.card-lost .btn-outline-lost:hover,
.card-cancelled .btn-outline-cancelled:hover { background: var(--red) !important; color: #fff !important; }
.card-paid .btn-outline-paid:hover,
.card-completed .btn-outline-completed:hover,
.card-delivered .btn-outline-delivered:hover { background: var(--green) !important; color: #fff !important; }


/* ═══════════════════════════════════════════════════════════════════
   ACCORDION
   ═══════════════════════════════════════════════════════════════════ */

.accordion-item {
  border: 1px solid var(--border);
  margin-bottom: 0.5rem;
  border-radius: 8px;
  overflow-x: auto !important;
}

.accordion-button {
  border: none;
  background-color: #f8f9fc;
  font-weight: 600;
  font-size: 13px;
  padding: 12px 18px;
  color: var(--text-1);
  font-family: var(--font);
}

.accordion-button:not(.collapsed) {
  background-color: var(--blue-dim);
  color: var(--blue);
  box-shadow: none;
}

.accordion-button::after { color: var(--text-2); }
.accordion-button:focus { box-shadow: none; border-color: var(--border); }
.accordion-button:hover { background-color: #edf0f5; }

.accordion-body {
  padding: 20px 24px;
  background: var(--surface);
}

/* Table container inside accordion */
.accordion-body .table-container {
  padding: 4px 0;
}
.accordion-body .table-responsive {
  margin-top: 8px;
}


/* ═══════════════════════════════════════════════════════════════════
   FORMS & FILTERS
   ═══════════════════════════════════════════════════════════════════ */

.filter-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}

.filter-toggle { cursor: pointer; user-select: none; }
.filter-content { transition: var(--transition); }
.filter-content.collapsed { display: none; }
.filter-row { row-gap: 0.5rem; }

.clear-filters-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-weight: 600;
  font-size: 12px;
  border-radius: 7px;
  padding: 6px 14px;
}
.clear-filters-btn:hover { background: #f3f5f8; border-color: var(--border-h); }

input[type="date"] {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--text-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  transition: border-color .15s, box-shadow .15s;
}
input[type="date"]:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(36,99,235,.08);
}

/* Date range list */
.date-range-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.date-range-list ul { list-style: none; padding: 0; margin: 0; }
.date-range-list li {
  padding: 9px 14px;
  cursor: pointer;
  color: var(--text-1);
  background: var(--surface);
  transition: all .15s;
  border-bottom: 1px solid #f3f5f8;
  font-size: 12.5px;
}
.date-range-list li:last-child { border-bottom: none; }
.date-range-list li:hover { background: var(--bg); }
.date-range-list li.active {
  background: var(--blue-dim);
  color: var(--blue);
  font-weight: 600;
}
.date-range-list .custom-range { background: var(--bg); font-weight: 600; color: var(--blue); }
.date-range-list .custom-range.active { background: var(--blue-dim); }


/* ═══════════════════════════════════════════════════════════════════
   PAYABLE AMOUNT LINK
   ═══════════════════════════════════════════════════════════════════ */

.payable_amount {
  display: block;
  width: 100%;
  padding: 10px 0;
  color: var(--text-1) !important;
  font-weight: 700;
  font-family: var(--mono);
  text-align: center;
  cursor: pointer;
  transition: all .15s;
  font-size: 14px;
  border-radius: var(--r);
}
.payable_amount:hover,
.payable_amount:focus {
  background: var(--blue);
  color: #fff !important;
  text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════════════
   CHARTS
   ═══════════════════════════════════════════════════════════════════ */

.chart-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 20px;
}

.chart-container h4 {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
}

.chart-wrapper { height: 320px; width: 100%; position: relative; }
.chart-wrapper.small { height: 200px; }
.chart-wrapper.large { height: 400px; }
.chart-container canvas { width: 100%; height: 100% !important; }

.no-data-message,
.chart-error,
.chart-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 13px;
  color: var(--text-2);
}

.chart-error {
  background: var(--red-dim);
  color: var(--red);
  border-radius: 8px;
  padding: 14px 18px;
  border: 1px solid #fca5a5;
}

.chart-loading::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top: 2px solid var(--blue);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-top: 8px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-2);
}

.legend-color {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}


/* ═══════════════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════════════ */

.pagination .page-link {
  cursor: pointer;
  font-size: 12px;
  font-family: var(--font);
  color: var(--text-2);
  border-color: var(--border);
  border-radius: 6px;
}
.pagination .page-link:hover { background: var(--bg); color: var(--text-1); }
.pagination .page-item.active .page-link { background: var(--blue); border-color: var(--blue); color: #fff; }
.pagination .page-item.disabled .page-link { cursor: not-allowed; opacity: .5; }


/* ═══════════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
  .modal-dialog { max-width: 90%; margin: 1.75rem auto; }
}


/* ═══════════════════════════════════════════════════════════════════
   AUTOCOMPLETE
   ═══════════════════════════════════════════════════════════════════ */

.ui-menu {
  font-size: 12px !important;
  font-family: var(--font) !important;
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.ui-menu-item { font-family: var(--font) !important; }
.ui-menu-item-wrapper { font-family: var(--font) !important; padding: 8px 12px; }


/* ═══════════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════════ */

.loading-spinner {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
}

.itemsPerPage:disabled { opacity: 0.5; }

.bd-placeholder-img { font-size: 1.125rem; text-anchor: middle; user-select: none; }
@media (min-width: 768px) { .bd-placeholder-img-lg { font-size: 3.5rem; } }


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  #sidebar { left: -260px; }
  #sidebar.active { left: 0; }
  #sidebarCollapse span { display: none; }
  #mainpage { width: 100%; margin-left: 0; padding: 14px 16px; }
  #mainpage.active { margin-left: 260px; }

  .active1 {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    margin: 0; padding: 0;
    z-index: 2000;
    background-color: var(--surface);
    overflow-y: auto;
    transition: var(--transition);
  }
  .active1 ~ #sidebar { display: none; }
  body:has(.active1) { overflow: hidden; }

  .chart-container { padding: 14px; }
  .chart-wrapper { height: 260px; }
  .chart-container h4 { font-size: 14px; }
}


/* add a grey background to all disable/readonly forms */
input[readonly], textarea[readonly], select[disabled] {
  background-color: #f0f0f0 !important; 
} 


/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR COLLAPSED (icon-only rail)
   ═══════════════════════════════════════════════════════════════════ */

/* Collapsed sidebar width */
#sidebar.active {
  left: 0 !important;            /* keep visible, override -260px */
  width: 64px;
}

/* Main page shifts with collapsed sidebar */
#mainpage.active {
  width: calc(100% - 64px);
  margin-left: 64px;
}

/* ── Hide text-only elements when collapsed ── */
#sidebar.active .sidebar-header h4 span,
#sidebar.active .sidebar-section-toggle,            /* whole section header row */
#sidebar.active hr,
#sidebar.active .badge,
#sidebar.active .dropdown-toggle::after,            /* caret arrow */
#sidebar.active .collapse:not(.show),               /* prevent submenu peeking */
#sidebar.active .dropdown-menu-container {          /* hide all open submenus */
  display: none !important;
}

/* Header — center the icon, hide "Menu" text */
#sidebar.active .sidebar-header {
  padding: 18px 0;
  text-align: center;
}
#sidebar.active .sidebar-header h4 {
  justify-content: center;
  gap: 0;
}
#sidebar.active .sidebar-header h4 i {
  font-size: 16px;
  opacity: 1;
}

/* Hide button text but keep the icon centered */
#sidebar.active .dropdown-container {
  padding: 0 6px;
}
#sidebar.active .dropdown-container .btn-light {
  justify-content: center;
  padding: 11px 0 !important;
  gap: 0;
  font-size: 0 !important;            /* hides text node */
  position: relative;
}
#sidebar.active .dropdown-container .btn-light i {
  font-size: 14px !important;
  width: auto;
  opacity: .85;
  margin: 0;
}

/* Tooltip on hover — shows the label */
#sidebar.active .dropdown-container .btn-light:hover::before {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #1a1a1a;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  pointer-events: none;
}

/* Force-collapse any open submenus when sidebar collapses */
#sidebar.active .collapse.show {
  display: none !important;
}

/* Settings section spacing */
#sidebar.active .CTAs {
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 8px;
  padding-top: 8px !important;
}

/* Smooth transition */
#sidebar,
#mainpage {
  transition: width .25s ease, margin-left .25s ease, left .25s ease;
}

/* Mobile: keep existing off-canvas behavior */
@media (max-width: 768px) {
  #sidebar.active { width: 260px; left: 0 !important; }
  #mainpage.active { margin-left: 260px; width: 100%; }
  #sidebar.active .dropdown-container .btn-light { font-size: 1rem !important; justify-content: flex-start; padding: 9px 13px !important; gap: 10px; }
  #sidebar.active .sidebar-section-toggle,
  #sidebar.active .badge,
  #sidebar.active hr { display: revert !important; }
}