/* ==========================================================================
   Soham Admin — design system v2
   Overrides Bootstrap 5.3 CSS variables + restyles shared shell/components.
   Loaded after bootstrap.min.css, so these rules win the cascade without
   touching any markup, IDs, or JS-bound classes elsewhere in the app.
   ========================================================================== */

:root,
[data-bs-theme="light"] {
  /* Brand */
  --brand: #f68d1d;
  --brand-rgb: 246, 141, 29;
  /* #d97710 (the original brand-dark) only reached 2.4:1 contrast with white
     text and 2.9:1 as text-on-brand-light — both fail WCAG AA (4.5:1). These
     two shades are darkened versions of the same amber hue chosen to clear
     4.5:1 in every direction they're actually used: as white-on-fill button
     backgrounds, and as text sitting on white/--brand-light. --brand itself
     stays the vibrant accent for non-text uses (borders, subtle tints, focus
     glow) where contrast rules don't apply. */
  --brand-dark: #a1590c;
  --brand-darker: #7b4409;
  --brand-light: #ffe8c8;

  /* Neutrals (cool slate scale) */
  --ink: #14161c;
  --ink-soft: #2b2e37;
  --slate-500: #64748b;
  --slate-200: #cbd1dc;
  --slate-100: #dde2ea;
  --surface: #fbfcfe;
  --surface-2: #edf1f6;

  --bs-body-bg: #e8ebf2;
  --bs-body-color: var(--ink-soft);
  --bs-secondary-color: var(--slate-500);
  --bs-border-color: var(--slate-200);
  --bs-border-color-translucent: var(--slate-200);

  /* Bootstrap derives several component backgrounds from --bs-body-bg by
     default (card, modal, dropdown, popover, offcanvas, list-group,
     accordion). Since our body background is a tinted off-white, pin these
     surfaces back to solid white explicitly so cards/modals/menus never
     look washed-out or "transparent" against the page. */
  --bs-card-bg: var(--surface);
  --bs-modal-bg: var(--surface);
  --bs-dropdown-bg: var(--surface);
  --bs-popover-bg: var(--surface);
  --bs-offcanvas-bg: var(--surface);
  --bs-list-group-bg: var(--surface);
  --bs-accordion-bg: var(--surface);

  /* Radius */
  --radius-sm: 0.5rem;
  --radius: 0.65rem;
  --radius-lg: 0.9rem;
  --radius-xl: 1.1rem;
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);

  /* Reuse the brand color everywhere Bootstrap's "warning" utility is used
     (btn-warning, bg-warning-subtle, .active) so the whole app reads as one
     coherent palette instead of a generic yellow. */
  --bs-warning: var(--brand);
  --bs-warning-rgb: var(--brand-rgb);
  --bs-warning-text-emphasis: var(--brand-dark);
  --bs-warning-bg-subtle: var(--brand-light);
  --bs-warning-border-subtle: #f7c987;

  --bs-primary: #3b6bf6;
  --bs-primary-rgb: 59, 107, 246;
  --bs-link-color: var(--brand-dark);
  --bs-link-hover-color: var(--brand);

  /* Layered elevation shadows (Tailwind-style depth scale) */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.10), 0 2px 4px -2px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.12), 0 4px 6px -4px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.14), 0 8px 10px -6px rgba(15, 23, 42, 0.09);
  --shadow-glow: 0 8px 20px -6px rgba(var(--brand-rgb), 0.45);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

* {
  scrollbar-width: thin;
  scrollbar-color: var(--slate-200) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--slate-200);
  border-radius: 999px;
  border: 2px solid var(--bs-body-bg);
}

::selection {
  background: rgba(var(--brand-rgb), 0.25);
  color: var(--ink);
}

body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "tnum";
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(circle at 100% 0%, rgba(var(--brand-rgb), 0.09) 0%, transparent 45%),
    radial-gradient(circle at 0% 20%, rgba(59, 107, 246, 0.07) 0%, transparent 40%);
  background-attachment: fixed;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* --------------------------------------------------------------------
   AdminLTE shell — app-header (topbar) + app-sidebar
   -------------------------------------------------------------------- */
:root {
  --lte-sidebar-width: 260px;
}

.app-header {
  background: rgba(248, 250, 253, 0.92) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--bs-border-color);
  box-shadow: var(--shadow-sm);
}

.app-header .nav-link {
  color: var(--bs-body-color);
}

/* Sidebar recolored to the brand palette instead of AdminLTE's default
   plain dark grey — active item and hover use the same amber brand used
   for primary buttons elsewhere in the app. */
.app-sidebar {
  --lte-sidebar-bg: var(--ink);
  --lte-sidebar-color: #c9cdd6;
  --lte-sidebar-header-color: #ffffff;
  --lte-sidebar-hover-bg: rgba(255, 255, 255, 0.08);
  --lte-sidebar-hover-color: #ffffff;
  --lte-sidebar-menu-active-bg: var(--brand-dark);
  --lte-sidebar-menu-active-color: #ffffff;
  background-color: var(--lte-sidebar-bg) !important;
  box-shadow: var(--shadow-lg);
}

.sidebar-brand {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.85rem 1rem;
}

.brand-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-image {
  max-height: 42px;
  width: auto;
  filter: brightness(0) invert(1);
}

.sidebar-menu .nav-link {
  border-radius: var(--radius);
  margin: 0.1rem 0.6rem;
  width: auto;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.sidebar-menu .nav-link .nav-icon {
  opacity: 0.75;
  transition: opacity 0.18s var(--ease);
}

.sidebar-menu .nav-link:hover .nav-icon,
.sidebar-menu .nav-link.active .nav-icon {
  opacity: 1;
}

.sidebar-menu > .nav-item > .nav-link.active {
  font-weight: 600;
  box-shadow: var(--shadow-glow);
}

.nav-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.nav-logout-btn {
  color: var(--bs-secondary-color) !important;
  border-radius: var(--radius);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.nav-logout-btn:hover {
  background-color: #fdecea;
  color: #c8322a !important;
}

/* Financial year selector, now living in the topbar */
#financial_year {
  border-radius: var(--radius);
  font-weight: 600;
  border-color: var(--bs-border-color);
  transition: box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}

#financial_year:hover {
  border-color: var(--brand);
}

.app-content {
  padding-top: 1rem;
}

/* --------------------------------------------------------------------
   Typography / page headers
   -------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--ink);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

.h4 {
  border-bottom-style: none;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.page-header {
  margin-bottom: 0.85rem;
}

.page-header .h4 {
  margin-bottom: 0;
}

.filter-card {
  background: var(--surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 0.85rem 0.85rem 0.1rem;
  margin-bottom: 0.85rem;
  transition: box-shadow 0.2s var(--ease);
}

.filter-card .form-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------- */
.card {
  /* Bootstrap re-declares --bs-card-bg locally inside .card itself
     (falling back to --bs-body-bg), which silently wins over a :root
     override since a local custom-property assignment always beats an
     inherited one. Set the color directly instead of relying on the var. */
  background-color: var(--surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card-stats {
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.card-stats:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.icon-shape {
  box-shadow: none !important;
}

/* --------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------- */
.btn {
  border-radius: var(--radius);
  font-weight: 600;
  box-shadow: none !important;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
    color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.1s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

/* Solid-fill buttons carry white text, so they use --brand-dark (WCAG AA
   safe at 5.3:1) rather than the vibrant --brand (2.4:1, fails) — see the
   --brand-dark comment above for the contrast rationale. */
.btn-warning,
.btn-warning.bg-gradient {
  background-image: none !important;
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning.bg-gradient:hover {
  background-color: var(--brand-darker);
  border-color: var(--brand-darker);
  color: #fff;
  box-shadow: var(--shadow-glow) !important;
}

.btn-outline-warning {
  color: var(--brand-dark);
  border-color: var(--brand);
}

.btn-outline-warning:hover {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
  box-shadow: var(--shadow-glow) !important;
}

.btn-outline-info,
.btn-outline-secondary {
  transition: box-shadow 0.18s var(--ease), background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.btn-outline-info:hover,
.btn-outline-secondary:hover {
  box-shadow: var(--shadow-sm) !important;
}

/* --------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------- */
.form-control,
.form-select,
.select2-container--default .select2-selection--single {
  border-radius: var(--radius) !important;
  border-color: var(--bs-border-color);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
  /* Force flat rendering — strips any native OS/browser gradient shading
     some platforms still apply to form controls even with Bootstrap's own
     appearance:none, and guards against any background-image bleeding
     through on plain text inputs. `.form-select`'s own chevron icon
     (a background-image) is left alone below so the dropdown arrow still
     shows. */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.form-control {
  background-image: none !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.15);
}

.select2-container--default .select2-selection--single {
  height: calc(2.35rem + 2px) !important;
  display: flex;
  align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.15);
}

.form-label {
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 0.3rem !important;
}

.error,
.error-msg {
  color: #dc3545;
}

.error-field {
  border: 1px solid #dc3545;
}

.error-msg {
  font-size: 12px;
  margin-top: 4px;
  display: inline-block;
}

/* --------------------------------------------------------------------
   Tables / DataTables
   -------------------------------------------------------------------- */

/* Sort direction icons — dataTables.bootstrap.min.css hardcodes
   `font-family: "Font Awesome 6 Free"` for the asc/desc/unsorted glyphs.
   The Font Awesome upgrade to v7 renamed the loaded @font-face family to
   "Font Awesome 7 Free", so that stale reference stopped matching any
   loaded font — the icons rendered as invisible tofu instead of glyphs.
   Codepoints (\f0dc/\f0de/\f0dd) are unchanged in v7, so only the family
   name needs overriding here; also differentiate asc vs desc (both used
   the same faint "unsorted" glyph before) so the active sort direction is
   actually visible instead of just present.

   That vendor rule is <link>ed at the BOTTOM of every listing page, after
   this file, with the exact same selector text/specificity as an
   equivalent override here — so on a specificity tie, source order wins
   and the vendor rule (loaded later) beats this one regardless of
   `!important` on either side, unless this one's specificity is pushed
   higher. Same `.class.class` repetition trick used for the pagination
   fix earlier in this file. */
table.dataTable.dataTable thead .sorting:after,
table.dataTable.dataTable thead .sorting_asc:after,
table.dataTable.dataTable thead .sorting_desc:after,
table.dataTable.dataTable thead .sorting_asc_disabled:after,
table.dataTable.dataTable thead .sorting_desc_disabled:after {
  font-family: "Font Awesome 7 Free" !important;
  font-weight: 900 !important;
}

table.dataTable.dataTable thead .sorting_asc:after {
  content: "\f0de" !important;
  opacity: 0.9 !important;
  color: #4f46e5 !important;
}

table.dataTable.dataTable thead .sorting_desc:after {
  content: "\f0dd" !important;
  opacity: 0.9 !important;
  color: #4f46e5 !important;
}

/* Loading indicator — every listing table has `"processing": true` set,
   but only Products had a spinner icon configured for it; the rest fell
   back to DataTables' plain "Processing..." text with no visual cue while
   an AJAX page/search/sort request is in flight. All 9 tables now share
   the same spinner via `language.processing` in their JS init. The
   vendor CSS never sets `position: relative` on `.dataTables_wrapper`
   either, so the indicator's `position: absolute; top/left: 50%` had
   nothing to center against — fixed here so it centers over the table. */
.dataTables_wrapper {
  position: relative;
}

.dataTables_processing {
  z-index: 20;
  background: rgba(248, 250, 253, 0.94);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.5rem 2rem !important;
}

.dataTables_processing i.fa-spinner {
  color: var(--brand);
}

.dataTables_processing .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.table {
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  font-variant-numeric: tabular-nums;
}

/* Every listing page initializes DataTables with `scrollX: true`. In that
   mode DataTables clones the table into two real, separate <table>
   elements — one holding just the header row (inside .dataTables_scrollHead)
   and one holding the body rows (inside .dataTables_scrollBody) — wrapped
   together in a shared .dataTables_scroll container. That split is a
   DataTables feature (it lets the body scroll horizontally while the
   header stays put), not a bug. But giving `.table` its own background/
   rounded-corners/shadow meant BOTH clones got boxed separately, which is
   what actually reads as "two tables" stacked with a visible seam. Move
   the box to the shared wrapper instead, and let the two inner tables sit
   flush inside it so it reads as one table again. */
.dataTables_scroll {
  clear: both;
  margin-top: 15px;
  background: #ffffff !important;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* All listing pages use `dom: 'Bfrtip'` with no Bootstrap row/column
   wrapper around the toolbar, so the Buttons extension's `.dt-buttons`
   (the "Show N rows" + "Export ..." controls) floats left with nothing
   clearing it before the table. Without a clear, the table — a normal
   block box — flows into the remaining space beside the float instead of
   dropping below it, which is why the toolbar sits left and the table
   gets squeezed to the right. `clear: both` above fixes the scrollX case
   (every table in this app); this covers the wrapper itself so the
   floated buttons/pagination never leak outside its own box either. */
table.dataTable {
  clear: both;
}

.dataTables_wrapper::after {
  content: "";
  display: table;
  clear: both;
}

.dataTables_scroll .table {
  background: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  margin-bottom: 0;
}

td,
th {
  background: #ffffff !important;
  border: none !important;
  text-align: center;
  vertical-align: middle;
  padding: 0.45rem 0.6rem !important;
}

.header tr th,
table.dataTable thead th {
  background: #ffffff !important;
  color: var(--bs-secondary-color);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

table.dataTable tbody tr td {
  transition: background-color 0.15s var(--ease);
}

/* td/th now force an explicit white background (!important, above), which
   would otherwise sit on top of and completely hide a background set on
   the parent <tr> — so hover has to target the cells directly to still be
   visible, with enough specificity to beat that !important rule. */
table.dataTable tbody tr:hover td {
  background-color: var(--slate-100) !important;
}

#stockTable tbody tr td:nth-child(3),
#productsTable tbody tr td:nth-child(2),
#productsTable tbody tr td:nth-child(3),
#categoryTable tbody tr td:nth-child(2),
#categoryTable tbody tr td:nth-child(3),
#inventoryTable tbody tr td:nth-child(3),
#inventoryTable tbody tr td:nth-child(4),
#customerTable tbody tr td:nth-child(2),
#usersTable tbody tr td:nth-child(3),
td:nth-child(2) {
  text-align: start;
}

.table td a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--radius-sm);
  color: var(--bs-secondary-color);
  text-decoration: none;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
  vertical-align: middle;
}

.table td a:hover {
  background-color: var(--brand-light);
  color: var(--brand-dark);
  text-decoration: none;
}

.table td a.text-success:hover {
  background-color: #e6f4ea;
  color: #198754 !important;
}

.table td .delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s var(--ease);
  vertical-align: middle;
}

.table td .delete-btn:hover {
  background-color: #fdecea;
}

/* Status pills — the app renders Active/Inactive as
   `.btn.btn-sm.btn-success|btn-danger` spans inside table cells; restyle
   those (and only those) as soft, modern pill badges instead of solid
   filled buttons, without touching the PHP that emits them. */
.table td span.btn.btn-sm,
.table td .btn.btn-sm {
  pointer-events: none;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: none;
}

.table td .btn.btn-sm.btn-success {
  background-color: #d5efdd !important;
  color: #1a7f42 !important;
}

.table td .btn.btn-sm.btn-danger {
  background-color: #f8d7d4 !important;
  color: #c8322a !important;
}

.marginminusten {
  margin-top: -10px;
}

.minimumStock td,
.minimumStock {
  background-color: rgba(220, 53, 69, 0.12) !important;
}

/* DataTables toolbar (search box, length select, export buttons) */
/* Same indigo scheme as the active nav pill, for consistency. */
.dataTables_wrapper .dataTables_filter input {
  border-radius: var(--radius);
  border: 1.5px solid #4f46e5;
  /* Solid flat tint (equivalent to the translucent #6366f124 over white)
     instead of a semi-transparent background, which can read as a subtle
     gradient depending on what's rendered behind it. */
  background-color: #e9e9fd;
  background-image: none;
  box-shadow: 0 2px 8px #6366f138;
  color: #4f46e5;
  transition: box-shadow 0.15s var(--ease), background-color 0.15s var(--ease);
}

.dataTables_wrapper .dataTables_filter input::placeholder {
  color: #4f46e5;
  opacity: 0.6;
}

.dataTables_wrapper .dataTables_filter input:focus {
  background-color: var(--surface);
  color: var(--ink-soft);
  box-shadow: 0 0 0 0.2rem #6366f138;
}

.dataTables_wrapper .dataTables_length select {
  border-radius: var(--radius);
  border: 1px solid var(--bs-border-color);
}

/* Same indigo scheme as the active nav pill / search box, on the top-level
   trigger buttons only ("Show N rows" / "Export ..."). These buttons'
   actual class is `.dt-button` (there is no `.btn` class on them at all —
   confirmed from the live DOM, since an earlier version of this rule
   targeted `.btn` and silently matched nothing). Scoping to
   `.dt-buttons .dt-button` (requires the `.dt-buttons` ancestor) rather
   than a bare `.dt-button` keeps this from also matching the dropdown's
   individual list items, which live in a separate `.dt-button-collection`
   popup elsewhere in the DOM and are styled on their own further down. */
.dt-buttons .dt-button {
  border-radius: 0 !important;
  background-color: transparent !important;
  border: none !important;
  color: #4f46e5 !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.dt-buttons .dt-button:hover {
  background-color: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #fff !important;
}

div.dt-button-background {
  background: none !important;
}

/* The "Show N rows" / "Export" dropdown popup — vendor CSS hardcodes a
   plain white background/dark border here, which read as an inconsistent
   plain-white box once the trigger buttons above turned indigo. */
div.dt-button-collection {
  background-color: #ffffff !important;
  border: 1.5px solid #4f46e5 !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 12px 28px -6px #6366f138 !important;
  padding: 0.5em 0 !important;
}

div.dt-button-collection .dt-button {
  color: #322659 !important;
  font-weight: 500 !important;
}

div.dt-button-collection .dt-button:hover:not(.disabled) {
  background: #6366f124 !important;
  color: #4f46e5 !important;
}

div.dt-button-collection .dt-button.dt-button-active {
  background: #6366f124 !important;
  color: #4f46e5 !important;
  font-weight: 700 !important;
}

/* Pagination — verified against the ACTUAL live-rendered DOM (via a
   headless-browser check), not assumed from the vendor CSS file's content.
   Despite dataTables.bootstrap.min.js claiming a "Bootstrap 3 integration",
   the pagination controls it actually renders on every listing page are
   flat `<a class="paginate_button">` elements with NO `<ul>`/`<li>`
   wrapper at all:

     <div class="dataTables_paginate paging_simple_numbers">
       <a class="paginate_button previous disabled">Previous</a>
       <span>
         <a class="paginate_button current">1</a>
         <a class="paginate_button">2</a>
         ...
         <span class="ellipsis">…</span>
       </span>
       <a class="paginate_button next">Next</a>
     </div>

   Every earlier attempt here targeted `ul.pagination > li > a`, which
   matches nothing in this markup — that's why it kept rendering as bare
   unstyled text no matter what specificity trick was applied. This rule
   set targets the real classes instead. */
/* div.dataTables_wrapper div.dataTables_paginate (vendor CSS) sets
   `display: inline-block; float: right` with higher specificity (2 types +
   2 classes) than a plain `.dataTables_paginate`, so it still wins that
   property and causes Previous/Next to wrap oddly instead of sitting
   inline with the page numbers — override explicitly rather than relying
   on selector weight. */
.dataTables_paginate {
  display: flex !important;
  float: none !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.3rem;
  margin-top: 1rem;
  white-space: normal !important;
}

.dataTables_paginate span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.dataTables_paginate span.ellipsis {
  padding: 0 0.15rem;
  color: var(--slate-500);
}

.dataTables_paginate a.paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.3rem;
  padding: 0.4em 0.85em;
  background-color: var(--surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius-sm);
  color: var(--bs-body-color);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.dataTables_paginate a.paginate_button:hover:not(.disabled):not(.current) {
  background-color: var(--brand-light);
  border-color: var(--brand);
  color: var(--brand-dark);
  text-decoration: none;
}

.dataTables_paginate a.paginate_button.current {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
  font-weight: 700;
  cursor: default;
}

.dataTables_paginate a.paginate_button.disabled {
  background-color: var(--surface-2);
  border-color: var(--bs-border-color);
  color: var(--slate-500);
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Some pages render a SECOND, different pagination structure: DataTables'
   Bootstrap-3 adapter (dataTables.bootstrap.min.js) only registers its
   `ul.pagination > li.paginate_button > a` renderer correctly when it loads
   AFTER the core jquery.dataTables.min.js. One page (customers/index.php)
   had that load order backwards, which is what caused the flat structure
   above and is now fixed at the source — but styling both structures here
   too means this can't silently break again if the same ordering mistake
   ever creeps back in on any page. Vendor CSS sets `ul.pagination li a`
   with more type-selectors than a plain equivalent, so the `.class.class`
   repetition below pushes past it on specificity regardless of load order. */
.dataTables_wrapper.dataTables_wrapper .dataTables_paginate.dataTables_paginate ul.pagination {
  display: flex !important;
  list-style: none !important;
  flex-wrap: wrap;
  align-items: center !important;
  gap: 0.3rem !important;
  margin: 0 !important;
  padding-left: 0 !important;
}

.dataTables_wrapper.dataTables_wrapper .dataTables_paginate.dataTables_paginate ul.pagination > li > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 2.3rem;
  background-color: var(--surface) !important;
  border: 1px solid var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.4em 0.85em !important;
  margin: 0 !important;
  text-align: center;
  text-decoration: none !important;
  font-weight: 500;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.dataTables_wrapper.dataTables_wrapper .dataTables_paginate.dataTables_paginate ul.pagination > li:not(.disabled):not(.active) > a:hover {
  background-color: var(--brand-light) !important;
  border-color: var(--brand) !important;
  color: var(--brand-dark) !important;
}

.dataTables_wrapper.dataTables_wrapper .dataTables_paginate.dataTables_paginate ul.pagination > li.active > a {
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
  color: #fff !important;
  font-weight: 700;
}

.dataTables_wrapper.dataTables_wrapper .dataTables_paginate.dataTables_paginate ul.pagination > li.disabled > a {
  background-color: var(--surface-2) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--slate-500) !important;
  opacity: 0.6;
  cursor: not-allowed;
}

.page-link {
  border-radius: var(--radius-sm) !important;
  margin: 0 2px;
  color: var(--bs-body-color);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.page-item.active .page-link {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* --------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------- */
.modal-content {
  background-color: var(--surface);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.modal-header,
.modal-body,
.modal-footer {
  border-color: var(--bs-border-color);
  padding: 0.85rem 1rem !important;
}

/* --------------------------------------------------------------------
   Purchase Order totals summary (add.php / edit.php)
   -------------------------------------------------------------------- */
.grand-total-row-po {
  margin-top: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  background-color: #d9f0e2;
}

.grand-total-amount {
  color: #1a7f42;
  font-size: 1.2rem;
  font-weight: 800;
}

/* --------------------------------------------------------------------
   Compact spacing — the page markup leans on Bootstrap's spacing
   utilities (mb-3, pt-3, p-4, gap-3, ...) on almost every field/section
   wrapper across every page. Bootstrap's utility classes are static
   !important rules, not variables, so the only way to make the whole
   app denser without touching 40+ PHP files again is to redefine these
   specific utility classes here, later in the cascade.
   -------------------------------------------------------------------- */
.mb-2 { margin-bottom: 0.4rem !important; }
.mb-3 { margin-bottom: 0.65rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mt-3 { margin-top: 0.65rem !important; }
.pt-2 { padding-top: 0.4rem !important; }
.pt-3 { padding-top: 0.65rem !important; }
.py-2 { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }
.py-3 { padding-top: 0.65rem !important; padding-bottom: 0.65rem !important; }
.p-4 { padding: 1.1rem !important; }
.gap-2 { gap: 0.4rem !important; }
.gap-3 { gap: 0.65rem !important; }

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */
/* --------------------------------------------------------------------
   Login page (AdminLTE .login-box)
   -------------------------------------------------------------------- */
body.login-page {
  background-image:
    radial-gradient(circle at 100% 0%, rgba(var(--brand-rgb), 0.12) 0%, transparent 45%),
    radial-gradient(circle at 0% 20%, rgba(59, 107, 246, 0.09) 0%, transparent 40%);
}

.login-logo-img {
  max-width: 220px;
}

.login-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.login-box-msg {
  color: var(--bs-secondary-color);
}

.app-footer {
  background: rgba(248, 250, 253, 0.92) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--bs-border-color);
  padding: 0.75rem 1rem;
}

footer .copyright {
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
}

.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.3rem;
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 0.18s var(--ease);
}

.footer-credit:hover {
  color: var(--brand-dark);
}

.footer-credit-heart {
  color: #e0245e;
  font-size: 0.75rem;
}

.footer-credit-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: middle;
}