/* ============================================================================
 * zobrx-theme.css — common enterprise-grade app theme (zobrx-inspired)
 * Loaded LAST in layout/header.php + layout/header1.php so it overrides
 * AdminLTE (skin-red-light) + Bootstrap 3 across all pages.
 * Palette (from zobrx-frontend): slate-900 #0F172A (ink/brand),
 * amber-500 #F59E0B (single accent), slate neutrals on a soft canvas.
 * Chrome is LIGHT (white header + subtle border) — the modern admin-panel
 * convention; colour is reserved for data, state and the single accent.
 * Scope: colour, type, borders, radius, elevation, state — never structural layout.
 * ==========================================================================*/

:root {
  /* ---- zobrx tokens (extracted from zobrx-frontend globals.css) ---------- */
  --zx-brand:      #0F172A;  --zx-brand-2:  #1E293B;  --zx-brand-3: #334155;
  --zx-accent:     #F59E0B;  --zx-accent-600: #D97706;  --zx-accent-50: #FFFBEB;
  --zx-canvas:     #F8FAFC;  --zx-surface: #FFFFFF;     --zx-surface-2: #F1F5F9;
  --zx-border:     #E2E8F0;  --zx-border-2: #CBD5E1;
  --zx-muted:      #475569;  --zx-text: #0F172A;  --zx-text-2: #334155;  --zx-text-3: #475569;
  --zx-success:    #059669;  --zx-success-600: #047857;  --zx-success-50: #ECFDF5;  --zx-success-fg: #065F46;
  --zx-info:       #2563EB;  --zx-info-600: #1D4ED8;     --zx-info-50: #EFF6FF;     --zx-info-fg: #1E40AF;
  --zx-warning:    #F59E0B;  --zx-warning-600: #D97706;  --zx-warning-50: #FFFBEB;  --zx-warning-fg: #92400E;
  --zx-danger:     #DC2626;  --zx-danger-600: #B91C1C;   --zx-danger-50: #FEF2F2;   --zx-danger-fg: #B91C1C;
  /* geometry: cards 12, controls 6, chips 4 */
  --zx-radius:     12px;  --zx-radius-sm: 6px;  --zx-radius-xs: 4px;
  /* slate-tinted elevation — never black */
  --zx-shadow-xs:  0 1px 2px 0 rgba(15,23,42,.04);
  --zx-shadow-sm:  0 1px 2px -1px rgba(15,23,42,.05), 0 2px 4px -1px rgba(15,23,42,.05);
  --zx-shadow:     0 1px 2px -1px rgba(15,23,42,.05), 0 2px 4px -1px rgba(15,23,42,.05);
  --zx-shadow-md:  0 2px 4px -2px rgba(15,23,42,.06), 0 4px 8px -2px rgba(15,23,42,.07);
  --zx-shadow-lg:  0 4px 6px -4px rgba(15,23,42,.06), 0 8px 16px -4px rgba(15,23,42,.09);
  --zx-shadow-xl:  0 8px 10px -6px rgba(15,23,42,.08), 0 16px 32px -8px rgba(15,23,42,.12);
  /* two-layer focus ring, on every control */
  --zx-ring:       0 0 0 2px #F8FAFC, 0 0 0 4px #0F172A;
  --zx-ring-tight: 0 0 0 1px #F8FAFC, 0 0 0 3px #0F172A;
  /* table tints */
  --zx-thead-bg:   rgba(241,245,249,.30);
  --zx-row-hover:  rgba(241,245,249,.40);
  --zx-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --zx-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --zx-transition: .15s cubic-bezier(.4,0,.2,1);
}

/* ---- Base ---------------------------------------------------------------- */
body, .content-wrapper, .right-side {
  font-family: var(--zx-font); color: var(--zx-text); background-color: var(--zx-canvas);
  font-size: 12px; line-height: 1.5;
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "rlig" 1, "calt" 1; }
.text-muted, small, .small { color: var(--zx-muted); font-size: 11px; }
.font-mono, code, kbd, pre, .mono { font-family: var(--zx-font-mono); }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5 { font-family: var(--zx-font); color: var(--zx-text); font-weight: 600; letter-spacing: -.02em; }
a { color: var(--zx-brand-2); transition: color var(--zx-transition); }
a:hover, a:focus { color: var(--zx-accent-600); }
:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--zx-ring); }
hr { border-top-color: var(--zx-border); }
code, kbd, pre { border-radius: var(--zx-radius-sm); }
::selection { background: var(--zx-accent); color: var(--zx-brand); }
/* tabular figures — this is a finance panel, columns of numbers must line up */
.table, table, td, th, input, .amount { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* slim modern scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #94A3B8; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- Top header / navbar — LIGHT chrome ---------------------------------- */
.skin-red-light .main-header .logo,
.skin-red-light .main-header .navbar,
.main-header .logo, .main-header .navbar {
  background-color: var(--zx-surface) !important;
  background-image: none !important;
  color: var(--zx-text) !important;
  border-bottom: 1px solid var(--zx-border) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.skin-red-light .main-header .logo, .main-header .logo {
  font-weight: 700; letter-spacing: .01em; border-right: 1px solid var(--zx-border) !important;
}
.skin-red-light .main-header .logo:hover, .main-header .logo:hover { background-color: var(--zx-surface-2) !important; }
.skin-red-light .main-header .navbar .nav > li > a,
.main-header .navbar .nav > li > a,
.main-header .navbar .nav-link {
  color: var(--zx-text-2) !important; font-weight: 600; font-size: 14px; border-radius: var(--zx-radius-sm);
}
/* shell geometry — was inline on <header>/<a.logo>/<nav>, which beat AdminLTE's
   own mobile rules; scoped to the desktop breakpoint so stacking works again */
@media (min-width: 768px) {
  .main-header { height: 60px; }
  .main-header .logo { width: 200px; }
  .main-header .navbar-static-top { margin-left: 200px; }
}
/* header nav dropdowns (replaced the mega-menu once the nav shrank to 22 items) */
.main-header .navbar-nav > .dropdown > .dropdown-menu {
  min-width: 232px; margin-top: 2px; padding: 6px;
  border: 1px solid var(--zx-border); border-radius: var(--zx-radius-sm);
  box-shadow: var(--zx-shadow-lg);
}
.main-header .navbar-nav > .dropdown > .dropdown-menu > li > a {
  padding: 7px 12px; border-radius: var(--zx-radius-xs); font-size: 13px;
  color: var(--zx-text-2); white-space: nowrap;
}
.main-header .navbar-nav > .dropdown > .dropdown-menu > li > a:hover,
.main-header .navbar-nav > .dropdown > .dropdown-menu > li > a:focus {
  background: var(--zx-surface-2); color: var(--zx-text);
}
.main-header .navbar-nav > .dropdown.open > .dropdown-toggle {
  background-color: var(--zx-surface-2) !important; color: var(--zx-text) !important;
}
.main-header .navbar-nav > .dropdown > .dropdown-toggle .fa-angle-down { margin-left: 4px; opacity: .5; font-size: 11px; }
/* icon-only header actions (Help, bell) */
.main-header .navbar .nav-icon-link { font-size: 16px; }
/* user menu header sits on the dark brand panel */
.main-header .user-header a, .main-header .user-header p, .main-header .user-header small { color: #fff !important; }
.main-header .user-body { font-size: 12px; }
.donut-450 { width: 450px; height: 250px; max-width: 100%; }
/* full-width marquee notice strips under the header */
.notice-marquee { margin: 0; padding: 5px; background: #fff !important; border: 0; border-radius: 0; color: var(--zx-danger) !important; }
.notice-marquee:empty { display: none; }
.skin-red-light .main-header .navbar .nav > li > a:hover,
.skin-red-light .main-header .navbar .nav > li > a:focus,
.skin-red-light .main-header .navbar .nav .open > a,
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav-link:hover {
  background-color: var(--zx-surface-2) !important; color: var(--zx-text) !important;
}
.main-header .navbar .nav > li.active > a,
.main-header .navbar .treeview.active > a { color: var(--zx-text) !important; box-shadow: inset 0 -2px 0 var(--zx-accent); }
.skin-red-light .main-header .sidebar-toggle, .main-header .sidebar-toggle { color: var(--zx-text-2) !important; }
.skin-red-light .main-header .sidebar-toggle:hover { background-color: var(--zx-surface-2) !important; }
.skin-red-light .main-header li.user-header { background-color: var(--zx-brand) !important; }
/* header search + inputs sitting in the light bar */
.main-header .navbar .form-control, .main-header input[type="text"], .main-header input[type="search"] {
  background: var(--zx-surface-2); border: 1px solid var(--zx-border); border-radius: var(--zx-radius-sm);
  color: var(--zx-text); height: 34px; box-shadow: none;
}
.main-header .navbar .form-control:focus { border-color: var(--zx-brand); box-shadow: var(--zx-ring); background: #fff; }
/* mega-menu / popover nav panels */
.popover-custom-content, .dropdown-mega-menu { background: var(--zx-surface); border-radius: var(--zx-radius); box-shadow: var(--zx-shadow-lg); }
.dropdown-mega-menu .nav-item > .nav-link {
  color: var(--zx-text-2); padding: 6px 10px; border-radius: var(--zx-radius-sm); font-weight: 500;
  display: block; transition: background var(--zx-transition), color var(--zx-transition);
}
.dropdown-mega-menu .nav-item > .nav-link:hover { background: var(--zx-surface-2); color: var(--zx-text); }

/* ---- Sidebar (secondary / contextual nav) -------------------------------- */
/* only the sidebar is dark - .wrapper is the whole-page container, and painting
   it brand-slate left a navy gutter beside the content and a black band
   around the logo wherever .content-wrapper did not cover it */
.skin-red-light .main-sidebar, .skin-red-light .left-side { background-color: var(--zx-brand) !important; }
.skin-red-light .wrapper, .wrapper { background-color: var(--zx-canvas) !important; }
.skin-red-light .sidebar a, .skin-red-light .sidebar-menu > li > a { color: #CBD5E1 !important; }
.skin-red-light .sidebar-menu > li.header { color: #7C8BA1 !important; background: var(--zx-brand) !important; text-transform: uppercase; letter-spacing: .07em; font-size: 10.5px; font-weight: 700; }
.skin-red-light .sidebar-menu > li:hover > a,
.skin-red-light .sidebar-menu > li.active > a,
.skin-red-light .sidebar-menu > li.menu-open > a { color: #fff !important; background-color: var(--zx-brand-2) !important; }
.skin-red-light .sidebar-menu > li.active > a { border-left: 3px solid var(--zx-accent) !important; }
.skin-red-light .sidebar-menu .treeview-menu > li > a { color: #94A3B8 !important; }
.skin-red-light .sidebar-menu .treeview-menu > li.active > a,
.skin-red-light .sidebar-menu .treeview-menu > li > a:hover { color: var(--zx-accent) !important; }
.skin-red-light .sidebar-form { border: 1px solid var(--zx-brand-2) !important; }
.skin-red-light .user-panel > .info, .skin-red-light .user-panel > .info > a { color: #E2E8F0 !important; }

/* ---- Footer: plain, quiet, matches the zobrx chrome ---------------------- */
.main-footer {
  background: var(--zx-surface); border-top: 1px solid var(--zx-border);
  color: var(--zx-muted); font-size: 11px; padding: 0 16px; margin-left: 0;
}
.main-footer .footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; min-height: 48px;
}
.main-footer .footer-links { display: inline-flex; gap: 16px; }
.main-footer a { color: var(--zx-muted); }
.main-footer a:hover { color: var(--zx-text); }

/* ---- Content + boxes / cards -------------------------------------------- */
.content-wrapper { padding-top: 4px; }
.content-header > h1, .content-header > h3 { font-weight: 600; font-size: 18px; letter-spacing: -.02em; margin: 0 0 4px; }
.box {
  background: var(--zx-surface); border: 1px solid var(--zx-border); border-top: 1px solid var(--zx-border);
  border-radius: var(--zx-radius); box-shadow: var(--zx-shadow); margin-bottom: 18px;
}
.box.box-primary { border-top: 3px solid var(--zx-brand) !important; }
.box.box-warning, .box.box-accent { border-top: 3px solid var(--zx-accent) !important; }
.box.box-success { border-top: 3px solid var(--zx-success) !important; }
.box.box-danger  { border-top: 3px solid var(--zx-danger) !important; }
.box.box-info    { border-top: 3px solid var(--zx-info) !important; }
.box-header { color: var(--zx-text); border-bottom: 1px solid var(--zx-border); padding: 14px 16px; }
.box-header .box-title { font-weight: 600; font-size: 14px; letter-spacing: -.02em; }
.box-body { padding: 16px; }
.box-footer { background: var(--zx-surface-2); border-top: 1px solid var(--zx-border); border-radius: 0 0 var(--zx-radius) var(--zx-radius); }

/* ---- Buttons (enterprise) ----------------------------------------------- */
.btn {
  border-radius: var(--zx-radius-sm); font-weight: 500; font-size: 14px; letter-spacing: 0;
  height: 36px; padding: 8px 16px; line-height: 20px; border: 1px solid transparent;
  transition: background-color var(--zx-transition), border-color var(--zx-transition), box-shadow var(--zx-transition), color var(--zx-transition);
  box-shadow: var(--zx-shadow-sm); text-decoration: none;
}
.btn:focus, .btn:active:focus, .btn.active:focus { outline: none; box-shadow: var(--zx-ring); }
.btn:active, .btn.active { box-shadow: inset 0 2px 4px rgba(15,23,42,.12); }
.btn:disabled, .btn.disabled, fieldset[disabled] .btn { opacity: .5; box-shadow: none; pointer-events: none; }
.btn-lg { height: 40px; padding: 0 32px; font-size: 14px; border-radius: var(--zx-radius-sm); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12px; }
.btn-xs { height: 28px; padding: 0 12px; font-size: 12px; }
.btn-group > .btn { box-shadow: none; }
.btn-group > .btn:first-child { border-top-left-radius: var(--zx-radius-sm); border-bottom-left-radius: var(--zx-radius-sm); }
.btn-group > .btn:last-child  { border-top-right-radius: var(--zx-radius-sm); border-bottom-right-radius: var(--zx-radius-sm); }

.btn-primary, .btn-primary.active, .skin-red-light .btn-primary { background-color: var(--zx-brand); border-color: var(--zx-brand); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--zx-brand-2) !important; border-color: var(--zx-brand-2) !important; color: #fff; }
.btn-accent, .btn-warning { background-color: var(--zx-accent) !important; border-color: var(--zx-accent) !important; color: var(--zx-brand) !important; }
.btn-accent:hover, .btn-warning:hover, .btn-warning:focus { background-color: var(--zx-accent-600) !important; border-color: var(--zx-accent-600) !important; color: var(--zx-brand) !important; }
.btn-success { background-color: var(--zx-success); border-color: var(--zx-success); color: #fff; }
.btn-success:hover, .btn-success:focus { background-color: var(--zx-success-600) !important; border-color: var(--zx-success-600) !important; color: #fff; }
.btn-info { background-color: var(--zx-info); border-color: var(--zx-info); color: #fff; }
.btn-info:hover, .btn-info:focus { background-color: var(--zx-info-600) !important; border-color: var(--zx-info-600) !important; color: #fff; }
.btn-danger { background-color: var(--zx-danger); border-color: var(--zx-danger); color: #fff; }
.btn-danger:hover, .btn-danger:focus { background-color: var(--zx-danger-600) !important; border-color: var(--zx-danger-600) !important; color: #fff; }
.btn-default { background: #fff; border-color: var(--zx-border); color: var(--zx-text); box-shadow: var(--zx-shadow-xs); }
.btn-default:hover, .btn-default:focus { background: var(--zx-surface-2); border-color: var(--zx-muted); color: var(--zx-text); }
.btn-link { box-shadow: none; color: var(--zx-brand-2); font-weight: 500; }
.btn-link:hover { color: var(--zx-accent-600); }
.btn-flat { border-radius: var(--zx-radius-sm) !important; }

/* ---- Forms (enterprise) ------------------------------------------------- */
.form-control {
  border-radius: var(--zx-radius-sm); border: 1px solid var(--zx-border); box-shadow: none;
  color: var(--zx-text); height: 36px; padding: 0 12px; font-size: 14px; background: #fff;
  transition: border-color var(--zx-transition), box-shadow var(--zx-transition);
}
textarea.form-control { height: auto; }
.form-control:focus { border-color: var(--zx-brand); box-shadow: var(--zx-ring); }
.form-control::placeholder { color: var(--zx-muted); }
.form-control[disabled], .form-control[readonly] { background: var(--zx-surface-2); color: var(--zx-muted); }
.input-group-addon { border-radius: var(--zx-radius-sm); border-color: var(--zx-border); background: var(--zx-surface-2); color: var(--zx-text-2); }
.input-sm { height: 28px; padding: 0 8px; font-size: 12px; }
.input-lg { height: 40px; font-size: 14px; }
label, .control-label { color: var(--zx-text-2); font-weight: 500; font-size: 12px; }
input[type=checkbox], input[type=radio] { accent-color: var(--zx-brand); }
.has-error .form-control { border-color: var(--zx-danger); }
.has-success .form-control { border-color: var(--zx-success); }
select.form-control { background-image: none; }

/* ---- Tables — the zobrx signature: 12px body, 10px uppercase head, 8x12 cells,
   hairline rules, single hover intensity, NO zebra striping ----------------- */
.table { font-size: 12px; margin-bottom: 0; }
.table > thead > tr > th {
  background: var(--zx-thead-bg); color: var(--zx-muted);
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--zx-border); border-top: 0;
  vertical-align: middle; padding: 8px 12px; white-space: nowrap; text-align: left;
}
.table > tbody > tr > td {
  border-top: 1px solid var(--zx-border); vertical-align: middle; padding: 8px 12px;
}
.table > tbody > tr { transition: background-color var(--zx-transition); }
.table > tbody > tr:hover,
.table-hover > tbody > tr:hover { background-color: var(--zx-row-hover); }
/* zobrx uses no zebra — separation is the hairline + hover alone */
.table-striped > tbody > tr:nth-of-type(odd) { background-color: transparent; }
.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th,
.table-bordered > thead > tr > th { border-color: var(--zx-border); }
.table.dataTable thead th { border-bottom-color: var(--zx-border); }
/* numeric columns line up */
.table td.ta-r, .table th.ta-r, .table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .meta { font-size: 11px; color: var(--zx-muted); }
/* card-wrapped scroll container with a sticky header row */
.table-responsive {
  border: 1px solid var(--zx-border); border-radius: var(--zx-radius-sm);
  background: var(--zx-surface); overflow-x: auto;
}
.table-responsive > .table { margin-bottom: 0; }
.table-responsive > .table > thead > tr > th { position: sticky; top: 0; z-index: 2; }
/* compact density for the heaviest report grids */
.table-compact > thead > tr > th, .table-compact > tbody > tr > td { padding-top: 6px; padding-bottom: 6px; }
.table-compact > tbody > tr { line-height: 1.2; }

/* ---- Nav tabs ----------------------------------------------------------- */
.nav-tabs { border-bottom-color: var(--zx-border); }
.nav-tabs > li > a { color: var(--zx-muted); border-radius: var(--zx-radius-sm) var(--zx-radius-sm) 0 0; font-weight: 600; }
.nav-tabs > li > a:hover { background: var(--zx-surface-2); border-color: transparent; color: var(--zx-text); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: var(--zx-text); border-color: var(--zx-border) var(--zx-border) transparent; border-top: 2px solid var(--zx-accent); }
.nav-tabs-custom { border-radius: var(--zx-radius); box-shadow: var(--zx-shadow); }
.nav-tabs-custom > .nav-tabs > li.active { border-top-color: var(--zx-accent) !important; }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover { background-color: var(--zx-brand); }

/* ---- Dropdowns / modals / popovers -------------------------------------- */
.dropdown-menu { border: 1px solid var(--zx-border); border-radius: var(--zx-radius); box-shadow: var(--zx-shadow); padding: 6px; }
.dropdown-menu > li > a { border-radius: var(--zx-radius-sm); padding: 7px 12px; color: var(--zx-text-2); }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--zx-surface-2); color: var(--zx-text); }
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover { background: var(--zx-brand); color: #fff; }
.modal-content { border: 0; border-radius: var(--zx-radius); box-shadow: var(--zx-shadow-lg); }
.modal-header { border-bottom: 1px solid var(--zx-border); }
.modal-footer { border-top: 1px solid var(--zx-border); }
.popover, .tooltip-inner { border-radius: var(--zx-radius-sm); }
.tooltip-inner { background: var(--zx-brand); }

/* ---- Labels / badges / pagination / alerts ------------------------------ */
.label, .badge { display: inline-flex; align-items: center; font-weight: 600; border-radius: var(--zx-radius-sm); padding: 2px 10px; font-size: 12px; line-height: 16px; border: 1px solid transparent; }
.label-primary, .badge { background-color: var(--zx-brand); }
.label-warning { background-color: var(--zx-warning-50); color: var(--zx-warning-fg); }
.label-success { background-color: var(--zx-success-50); color: var(--zx-success-fg); }
.label-info { background-color: var(--zx-info-50); color: var(--zx-info-fg); }
.label-danger { background-color: var(--zx-danger-50); color: var(--zx-danger-fg); }
.pagination > li > a, .pagination > li > span { color: var(--zx-brand-2); border-color: var(--zx-border); }
.pagination > li > a:hover { background: var(--zx-surface-2); }
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > span { background-color: var(--zx-brand); border-color: var(--zx-brand); }
.alert { border-radius: var(--zx-radius); border-left-width: 4px; }
.alert-info { background: var(--zx-info-50); border-color:#BFDBFE; border-left-color: var(--zx-info); color:#1E3A8A; }
.alert-success { background: var(--zx-success-50); border-color:#BBF7D0; border-left-color: var(--zx-success); color:#166534; }
.alert-warning { background: var(--zx-accent-50); border-color:#FDE68A; border-left-color: var(--zx-accent); color:#92400E; }
.alert-danger { background: var(--zx-danger-50); border-color:#FECACA; border-left-color: var(--zx-danger); color:#991B1B; }

/* status pills for reconciliation / report states */
/* hand-rolled inline pill (zobrx: rounded-full, 10px, 500, uppercase, tracking-wider) */
.pill { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 999px;
        font-size: 10px; font-weight: 500; line-height: 1.6; text-transform: uppercase; letter-spacing: .04em; }
/* 6px status dot */
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; vertical-align: middle; }
.dot-ok { background: var(--zx-success); } .dot-warn { background: var(--zx-warning); }
.dot-bad { background: var(--zx-danger); } .dot-idle { background: rgba(71,85,105,.6); }
.pill-ok   { background: var(--zx-success-50); color: var(--zx-success-fg); }
.pill-warn { background: var(--zx-warning-50); color: var(--zx-warning-fg); }
.pill-bad  { background: var(--zx-danger-50);  color: var(--zx-danger-fg); }
.pill-info { background: var(--zx-info-50);    color: var(--zx-info-fg); }

/* ---- AdminLTE dashboard widgets + misc ---------------------------------- */
.small-box { border-radius: var(--zx-radius); box-shadow: var(--zx-shadow); }
.small-box > .small-box-footer { background: rgba(0,0,0,.06); }
.info-box { border-radius: var(--zx-radius); box-shadow: var(--zx-shadow); }
.info-box-icon { border-radius: var(--zx-radius) 0 0 var(--zx-radius); }
.progress { border-radius: 999px; box-shadow: none; background: var(--zx-border); }
.progress-bar { background-color: var(--zx-brand); }
.breadcrumb { background: transparent; padding: 8px 0; }
.breadcrumb > .active { color: var(--zx-muted); }
.callout { border-radius: var(--zx-radius); }

/* ============================================================================
 * Migrated from inline <style>: layout/header1 (notification tray + mega-menu)
 * Conflicting declarations dropped where the theme already defines them
 * (.dropdown-menu border/radius/padding/background); palette recoloured.
 * ==========================================================================*/
.fade.in { opacity: 1; display: block !important; }
.modal-backdrop.in { filter: alpha(opacity=50); opacity: .5; display: none !important; }
.notify .dropdown-menu { height: 90vh; overflow-y: auto; }
.head   { padding: 5px 15px; border-radius: var(--zx-radius) var(--zx-radius) 0 0; }
.footer { padding: 5px 15px; border-radius: 0 0 var(--zx-radius) var(--zx-radius); }
.notification-box { padding: 10px; background: #fff; margin: 8px; border-radius: var(--zx-radius); border: 1px solid var(--zx-border); }
.bg-gray { background-color: var(--zx-surface-2); }
.bg-dark { background-color: var(--zx-brand) !important; color: #fff; }
.bg-secondary { background-color: var(--zx-muted) !important; }
.w460 { width: 460px; max-width: 92vw; }
.feature-bg { background: var(--zx-success-50); color: var(--zx-success-fg); padding: 2px 8px; font-size: 10px; border-radius: 999px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.navbar-custom-menu > .navbar-nav > li { position: relative; padding: 0 0 0 5px; }
.navbar-nav > li > a { padding-top: 19px; padding-bottom: 19px; }
/* mega-menu / dropdown header panel (structure only — chrome comes from theme) */
.dropdown-menu {
  position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left;
  min-width: 15rem; margin: .125rem 0 0; text-align: left; list-style: none; background-clip: padding-box;
}
.dropdown-menu .dropdown-menu-header,
.dropdown-menu .menu-header-image,
.dropdown-menu .dropdown-menu-header-inner { border-top-left-radius: var(--zx-radius); border-top-right-radius: var(--zx-radius); }
.dropdown-menu-header { color: #fff; margin: -.65rem 0 .65rem; position: relative; z-index: 6; }
.dropdown-menu-header .dropdown-menu-header-inner { margin: -1px -1px 0; padding: 1.5rem .5rem; position: relative; }
.dropdown-menu-header .menu-header-image { position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: 8; opacity: .25; filter: grayscale(80%); background-size: cover; }
.dropdown-menu-header .menu-header-content { text-align: center; position: relative; z-index: 10; }
.menu-header-title { font-weight: 600; font-size: 1.25rem; margin: 0; }
.menu-header-subtitle { font-size: 12px; margin: 5px 0 0; opacity: .8; }
.ps { overflow: hidden !important; overflow-anchor: none; touch-action: auto; }
.dropdown-header { display: block; padding: .65rem 1.5rem; margin-bottom: 0; font-size: 12px; color: var(--zx-muted); white-space: nowrap; }
.dropdown-menu .dropdown-header { text-transform: uppercase; font-size: 10.5px; color: var(--zx-text-3); font-weight: 700; letter-spacing: .07em; }
.dropdown-menu .dropdown-item {
  font-size: 13px; display: flex; padding: 6px 12px; align-items: center; cursor: pointer;
  z-index: 6; position: relative; border-radius: var(--zx-radius-sm); color: var(--zx-text-2);
  transition: background-color var(--zx-transition), color var(--zx-transition);
}
.dropdown-item:hover { background: var(--zx-surface-2); color: var(--zx-text); }
.dropdown-menu .dropdown-item .dropdown-icon { font-size: 1rem; margin-right: .325rem; width: 30px; text-align: center; opacity: .45; margin-left: -10px; }

/* ============================================================================
 * Migrated from inline <style>: reconciliation/payment_reconciliation
 * (page classes kept unique; generic .table overrides dropped — theme handles
 * tables; colours tuned to the zobrx palette + semantic paid/unpaid)
 * ==========================================================================*/
#SLData th { background:#fff; border-bottom:1px solid var(--zx-border); border-top:0; }
#SLData td { font-size:13px; }
#SLData td span { background:#F1F5F9; margin-left:-8px; padding:9px; }
.f_11 { font-size:11px !important; }
.p_0 { padding:0 !important; }
.m-0 { margin:0 !important; }
.c_green { background: var(--zx-brand); color:#fff; text-align:center; }
.eva-module-header { background:#fff; border-bottom:1px solid var(--zx-border); box-shadow: var(--zx-shadow); box-sizing:border-box; min-height:52px; line-height:1; padding-left:0; }
.module-breadcump { min-width:178px; padding-top:18px; }
.lfloat,.lfloat5,.lfloat10,.lfloat17,.lfloat23,.lfloat20 { display:inline-block; float:left; }
.cw-flush { margin-left:0; }
.mt-30 { margin-top:30px; }
.w-100 { width:100%; }
.cell-white { background:#fff; }
.th-center { text-align:center; }
.th-c-5  { text-align:center; width:5%; }
.th-c-15 { text-align:center; width:15%; }
.th-c-25 { text-align:center; width:25%; }
.ch-icon { height:16px; width:16px; padding:0; }
.reco-cell-paid { background-color: var(--zx-success); }
.reco-cell-paid a b, .reco-cell-paid b { color:#fff !important; }
.text-unpaid { color: var(--zx-danger) !important; }

/* ============================================================================
 * Shared utilities + components (replace common inline styles across pages)
 * ==========================================================================*/
.m-auto { margin: auto !important; }
.ml-0 { margin-left: 0 !important; }
.mt-22 { margin-top: 22px; }
.mt-25 { margin-top: 25px; }
.h-32 { height: 32px; }
.h-36 { height: 36px; }
.bg-white { background: #fff; }
.sticky { position: fixed; top: 0; width: 100%; z-index: 900; }
.sticky + .content { padding-top: 102px; }
/* page title in the AdminLTE content-header (force slate over app heading colours) */
.page-title { font-size: 18px !important; font-weight: 600 !important; color: var(--zx-text) !important; margin: 2px 0 4px !important; letter-spacing: -.02em; }
/* content-header: stack title + breadcrumb, no absolute-positioned overlap */
.content-header { position: relative; }
.content-header > .breadcrumb { position: static; float: none; display: block; top: auto; right: auto; margin: 0 0 6px; padding: 0; background: transparent; font-size: 12px; }
.content-header > .breadcrumb > li + li:before { color: var(--zx-border-2); }
/* right-aligned action toolbar above tables/forms */
.page-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 12px; }
.page-toolbar form { margin: 0; }

/* ---- DataTables controls (Copy/CSV/Excel buttons, search, length, paging) - */
.dt-buttons { margin-bottom: 8px; }
.dt-button, .dt-buttons .dt-button, div.dt-buttons > .dt-button {
  background: #fff !important; background-image: none !important;
  border: 1px solid var(--zx-border-2) !important; color: var(--zx-text-2) !important;
  border-radius: var(--zx-radius-sm) !important; padding: 5px 12px !important;
  font-size: 12px !important; font-weight: 600 !important; margin-right: 6px !important;
  box-shadow: var(--zx-shadow-sm) !important; text-shadow: none !important;
}
.dt-button:hover, .dt-buttons .dt-button:hover, div.dt-buttons > .dt-button:hover {
  background: var(--zx-surface-2) !important; border-color: var(--zx-muted) !important; color: var(--zx-text) !important;
}
.dt-button:focus, .dt-buttons .dt-button:focus { outline: none !important; box-shadow: var(--zx-ring) !important; }
.dataTables_length select, .dataTables_filter input {
  border: 1px solid var(--zx-border); border-radius: var(--zx-radius-sm); height: 32px;
  padding: 2px 10px; color: var(--zx-text); background: #fff;
}
.dataTables_length select:focus, .dataTables_filter input:focus { border-color: var(--zx-brand); box-shadow: var(--zx-ring); outline: none; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: var(--zx-radius-sm) !important; border-color: var(--zx-border) !important; color: var(--zx-brand-2) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--zx-brand) !important; border-color: var(--zx-brand) !important; color: #fff !important; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { color: var(--zx-text-2); }

/* more shared utilities (reconciliation batch) */
.f_9 { font-size: 9px; }
.f_12 { font-size: 12px; }
.f_24 { font-size: 24px; }
.mb-0 { margin-bottom: 0 !important; }
.mt-13 { margin-top: 13px; }
.text-white { color: #fff !important; }
.ml-30 { margin-left: 30px; }
.d-block { display: block; }
.cell-head { background: var(--zx-brand); color: #fff; }  /* was #6c7ae0 header rows */
.mt-29 { margin-top: 29px; }
.d-none { display: none; }
.h-auto { height: auto; }

/* alignment + spacing + status utilities (reconciliation batch 3) */
.ta-c { text-align: center; }
.ta-l { text-align: left; }
.ta-r { text-align: right; }
.ovx-scroll { overflow-x: scroll; }
.mr-5 { margin-right: 5px; }
.mb-5 { margin-bottom: 5px; }
.mt-10 { margin-top: 10px; }
.flag-dot { width: 20px; height: 20px; display: block; margin: 3px auto 0; border-radius: 3px; }
.flag-ok { background-color: var(--zx-success); }
.flag-bad { background-color: var(--zx-danger); }