/* ============================================================
   Design tokens
   This file is loaded AFTER Bootstrap 5.3 (see includes/header.php),
   so it both (a) retunes Bootstrap's own CSS variables to this app's
   color palette/radius — which reflows through every Bootstrap
   component (.btn, .card, .form-control, .dropdown-menu, focus rings,
   links, ...) for free — and (b) adds the handful of bespoke pieces
   Bootstrap has no built-in equivalent for (the dark sidebar, stat
   cards, the bulk-action toolbar pills, the client-photo upload
   circles, the network diagram, ...).
   ============================================================ */
:root {
  --bg: #eef1f4;
  --surface: #ffffff;
  --sidebar: #14232e;
  --sidebar-hover: #1c313f;
  --text: #22303c;
  --text-muted: #6b7a86;
  --border: #dfe4e8;

  --teal: #0f8b8d;
  --blue: #2f6fa8;
  --violet: #6a5cb0;
  --slate: #46525c;
  --amber: #c9862f;
  --red: #bf4438;
  --green: #2f9e6e;

  --radius: 10px;
  --ref-navy: #22425c;      /* the reference's navy (buttons, some modal headers) */
  --label: #597080;         /* the reference's uppercase field-label colour */
  /* Checked live against the reference's own computed body font-family —
     it's Lato (via Google Fonts), not Poppins. Phase 18 guessed Poppins
     from a generic "Google Fonts" Wappalyzer hit without confirming which
     family; corrected here in Phase 23 once the user caught the mismatch
     by eye. Fallback stack copied from the reference's own too. */
  --font: 'Lato', Arial, Tahoma, sans-serif;

  /* Retune Bootstrap's own theme variables to match, so every stock
     Bootstrap component (buttons, focus rings, links, form controls,
     dropdowns, badges via bg-*, ...) picks up this palette automatically. */
  --bs-primary: var(--teal);
  --bs-primary-rgb: 15, 139, 141;
  --bs-secondary: var(--slate);
  --bs-secondary-rgb: 70, 82, 92;
  --bs-danger: var(--red);
  --bs-danger-rgb: 191, 68, 56;
  --bs-success: var(--green);
  --bs-success-rgb: 47, 158, 110;
  --bs-warning: var(--amber);
  --bs-warning-rgb: 201, 134, 47;
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-body-font-family: var(--font);
  /* Reference's own body computes to 14px, not Bootstrap's stock 16px —
     confirmed via getComputedStyle on portal.umaxinternet.com. Almost
     every custom class in this file already sets its own explicit
     font-size, so this mainly affects plain unstyled Bootstrap defaults
     (.form-control, .form-select, table cells, ...) — exactly the
     elements the live reference's filter panel showed as visibly more
     compact than ours. */
  --bs-body-font-size: 14px;
  --bs-border-color: var(--border);
  --bs-border-radius: 10px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 12px;
  --bs-link-color: var(--teal);
  --bs-link-hover-color: #0c6e70;
  --bs-link-color-rgb: 15, 139, 141;
  --bs-link-hover-color-rgb: 12, 110, 112;
}

body { font-family: var(--font); }
a { text-decoration: none; }

/* ============================================================
   App shell
   ============================================================ */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  height: 56px;
  background: var(--sidebar);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
}
.topbar-brand { display: flex; align-items: center; gap: 8px; font-size: 17px; letter-spacing: .2px; }
.sidebar-toggle-btn {
  background: none;
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 16px;
  line-height: 1;
  margin-right: 6px;
}
.sidebar-toggle-btn:hover { background: rgba(255,255,255,.1); }
.brand-mark { color: var(--teal); font-size: 20px; }
.brand-name b { color: var(--teal); }
.topbar-right { display: flex; align-items: center; gap: 18px; font-size: 14px; color: #fff; }
/* Below Bootstrap's md breakpoint the topbar-right row (search box +
   2 notification dropdowns + Online Client Monitoring + user dropdown)
   no longer fits a phone width and was forcing the whole page into
   horizontal scroll, pushing the notification/user icons off-screen —
   a real bug found while checking the reference's own (also broken,
   but differently) mobile layout. Shrink the search box and drop the
   button's text label so everything stays reachable without scroll. */
@media (max-width: 767.98px) {
  .topbar { padding: 0 10px; }
  .topbar-right { gap: 8px; }
  .topbar-right .select2-container { width: 110px !important; }
  .topbar-right .btn .topbar-btn-label { display: none; }
  .topbar-right .btn { padding: 6px 9px; }
  .brand-name { display: none; }
}

.app-body { display: flex; flex: 1; }

/* ============================================================
   Sidebar — a bespoke dark vertical nav; the submenus underneath
   (.nav-submenu) are real Bootstrap `.collapse` panels and the
   sidebar itself collapses on mobile via Bootstrap's collapse JS
   (see includes/header.php's hamburger button + includes/sidebar.php).
   ============================================================ */
.sidebar {
  width: 220px;
  background: var(--sidebar);
  color: #cfd9df;
  flex-shrink: 0;
  padding: 14px 0;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: 14px;
  border-left: 3px solid transparent;
  color: #cfd9df;
}
.nav-item:hover { background: var(--sidebar-hover); color: #fff; }
.nav-item.active {
  background: var(--sidebar-hover);
  color: #fff;
  border-left-color: var(--teal);
}
.nav-item.disabled { color: #56636c; cursor: default; }
.nav-item.disabled:hover { background: none; }
.nav-ico { width: 18px; display: inline-block; text-align: center; }

.nav-group-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  border-left: 3px solid transparent;
  background: none;
  border-top: none; border-right: none; border-bottom: none;
  color: inherit;
  width: 100%;
  text-align: left;
  font-family: var(--font);
}
.nav-group-toggle:hover { background: var(--sidebar-hover); color: #fff; }
.nav-group-toggle .chev { margin-left: auto; font-size: 10px; transition: transform .2s; }
.nav-group-toggle:not(.collapsed) .chev { transform: rotate(180deg); }
.nav-group-toggle.active { background: var(--sidebar-hover); color: #fff; border-left-color: var(--teal); }
.nav-submenu { background: rgba(0,0,0,.15); }
.nav-submenu a {
  display: block;
  padding: 8px 20px 8px 46px;
  font-size: 13px;
  border-left: 3px solid transparent;
  color: #cfd9df;
}
.nav-submenu a:hover { color: #fff; }
.nav-submenu a.active { color: #fff; background: var(--sidebar-hover); border-left-color: var(--teal); }
.nav-section {
  margin: 14px 20px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #556069;
}

/* Icon-only collapsed sidebar — matches the live reference's own
   "narrow to icons" toggle (its #menuToggle-bar, a circular arrow that
   flips direction — verified live via getComputedStyle/class diffing,
   since the toggle has no visible text to select by). Rather than
   wrapping every nav label in its own <span> just to hide it, this
   clips the already-flexed label text via overflow, since .nav-item/
   .nav-group-toggle are flex containers with a fixed-width .nav-ico
   first child — shrinking the container and hiding overflow leaves
   just the icon visible with no markup changes needed. Chevrons and
   the "Coming soon" heading hide outright. v1.9.71: 52 px like the
   portal's rail, and a group still opens in it - its entries show as
   bullet-only rows, each name in a tooltip (script.js), as on the portal. */
.sidebar-toggle-collapse {
  background: none;
  border: none;
  color: #cfd9df;
  font-size: 18px;
  padding: 4px 8px;
  cursor: pointer;
}
.sidebar-toggle-collapse:hover { color: #fff; }
body.sidebar-collapsed .sidebar { width: 52px; }
body.sidebar-collapsed .sidebar .nav-item,
body.sidebar-collapsed .sidebar .nav-group-toggle {
  overflow: hidden;
  white-space: nowrap;
}
body.sidebar-collapsed .sidebar .chev,
body.sidebar-collapsed .sidebar .nav-section {
  display: none;
}

.content { flex: 1; padding: 22px 26px; max-width: 100%; overflow-x: auto; }

.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 10px;
}
.page-head h1 { font-size: 20px; margin: 0; }
.page-head .sub { color: var(--text-muted); font-size: 13px; margin-left: 8px; }
.page-head h1 .head-icon { color: var(--sidebar); margin-right: 8px; font-size: 18px; }
.breadcrumb-trail { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.breadcrumb-trail .current { color: var(--text); font-weight: 600; }
.breadcrumb-trail i { margin-right: 4px; }

/* Bootstrap's .btn-small isn't a real class (Bootstrap's own size
   modifier is .btn-sm, which the app now uses) — kept only as a
   harmless legacy alias in case any old link is still around. */
.btn-small { padding: 4px 10px; font-size: 12px; }

/* ============================================================
   Dashboard stat cards — no Bootstrap equivalent, kept bespoke.
   ============================================================ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px 24px;
  margin-bottom: 26px;
}
/* Matches the reference's actual DOM/CSS exactly (read live via
   getComputedStyle, not guessed from a screenshot): a fixed 75px-tall
   card, icon fixed to the left, title+number stacked top-right, and the
   description ("hint") as its own absolutely-positioned translucent
   dark strip pinned to the card's bottom edge — spanning the FULL card
   width (including under the icon), not just the text column. */
.stat-card {
  position: relative;
  height: 75px;
  border-radius: 5px;
  padding: 0;
  color: #fff;
  display: flex;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
/* A card that links into its own filtered list (Dashboard → Client List /
   Billing List), the same way the reference's cards do. It's an <a>, so
   kill the link underline/color and let the card's own styling stand. */
a.stat-card.stat-linked,
a.stat-card.stat-linked:hover,
a.stat-card.stat-linked:focus { text-decoration: none; color: #fff; cursor: pointer; }

/* Banner shown on a list page you arrived at by clicking a Dashboard card,
   so a pre-filtered view never looks like the full list. */
.quick-view-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text);
}
.stat-card .ico {
  flex: 0 0 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 45px;
  opacity: .95;
}
.stat-card > div:last-child {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px 0 0;
}
.stat-card .num { font-size: 25px; font-weight: 400; line-height: 1.2; margin: 0; }
.stat-card .label { font-size: 15px; margin: 0 0 1px; opacity: .95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-card .hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .12);
  padding: 2px 12px;
  font-size: 11.5px;
  line-height: 16px;
  opacity: 1;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "v2" stat-card style requested for the Dashboard — a rounder,
   pill-caption style the user supplied as an image, distinct from the
   reference's own current card design (verified live: the reference
   still uses the boxy 5px-radius/stacked-label style above). Approved
   after a single-card preview, now used for every card in the
   Dashboard's two main stat-grids. Scoped to its own classes rather
   than touching .stat-card, so Report and Online Client Monitoring's
   own stat cards (and the Dashboard's small 4-card ticket/task stack,
   a deliberately compact variant) are untouched by this block. */
.stat-card-v2 {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 108px;
  box-sizing: border-box;
  padding: 14px 20px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, #22c3c3 0%, #159c9c 100%);
  position: relative;
  overflow: hidden;
}
a.stat-card-v2, a.stat-card-v2:hover, a.stat-card-v2:focus { text-decoration: none; color: #fff; }
/* Reference's real hover treatment: a semi-transparent overlay that wipes
   in from the left over .95s (its own "hover-expand-effect" class), not a
   lift/shadow — confirmed live via its actual ::after CSS rule. */
.stat-card-v2::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, .05);
  transition: .95s;
}
.stat-card-v2:hover::after { width: 100%; }
.stat-card-v2 .sc-icon { flex: 0 0 auto; font-size: 38px; opacity: .95; }
.stat-card-v2 .sc-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.stat-card-v2 .sc-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.stat-card-v2 .sc-label {
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.stat-card-v2 .sc-num { flex: 0 0 auto; font-size: 27px; font-weight: 700; line-height: 1; }
.stat-card-v2 .sc-hint {
  background: rgba(9, 33, 62, .55);
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 12.5px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Same 4-color cycle as the original .stat-blue/.stat-teal/.stat-violet/
   .stat-slate, just applied to the rounder v2 card shape. */
.stat-v2-blue   { background: linear-gradient(135deg, #29a8e0 0%, #0288d1 100%); }
.stat-v2-teal   { background: linear-gradient(135deg, #22c3c3 0%, #159c9c 100%); }
.stat-v2-violet { background: linear-gradient(135deg, #9370f0 0%, #7248d9 100%); }
.stat-v2-slate  { background: linear-gradient(135deg, #6b747c 0%, #4b5359 100%); }

/* Reference's own 4-gradient cycle (its class names — blue/orange/green/red
   -gradiant — no longer match the actual colors after a rebrand, so these
   are named here by what they actually look like: blue→cyan, teal, purple→
   lavender, dark slate. Reused as-is by report/bill_collection.php,
   client-monitoring/online.php and others for their own stat cards. */
.stat-blue   { background: linear-gradient(45deg, #0288d1 0%, #26c6da 100%); }
.stat-teal   { background: linear-gradient(45deg, #2cb8b8 0%, #2ebaba 100%); }
.stat-violet { background: linear-gradient(45deg, #825bec 0%, #898cc6 100%); }
.stat-slate  { background: linear-gradient(45deg, #555e65 0%, #585f65 100%); }
/* Reference's own "pending-gradiant"/"processing-gradiant" classes
   (typo'd on their end too) for the ticket/task mini-cards. */
.stat-pending-gradiant    { background: linear-gradient(45deg, #fb483a 0%, #b1261b 100%); }
.stat-processing-gradiant { background: linear-gradient(45deg, #ff9600 0%, #a97224 100%); }

/* SMS Gateway's own stat-card palette — unlike the rebranded gradient
   cycle above, this one page still genuinely uses flat Material colors
   in the reference (verified live via getComputedStyle: #4caf50/#00bcd4/
   #ff9600/#ff5042), so it gets its own modifier classes on the same
   .stat-card structure rather than reusing stat-blue/teal/violet/slate. */
.stat-flat-green  { background: #4caf50; }
.stat-flat-cyan   { background: #00bcd4; }
.stat-flat-orange { background: #ff9600; }
.stat-flat-red    { background: #ff5042; }

/* Reference-parity "Problem Occurrence" row: two chart placeholders,
   a stacked column of the 4 ticket/task mini-cards, and a third chart
   placeholder — see index.php for why (Support & Ticketing / Task
   Management modules are not built in this app yet). */
.problem-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 26px;
}
.chart-placeholder {
  background: var(--surface);
  border: 1px dashed #c7ccd1;
  border-radius: var(--radius);
  padding: 14px 16px;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  cursor: not-allowed;
}
.chart-placeholder .cp-title { font-size: 22px; font-weight: 700; color: var(--text); }
.chart-placeholder .cp-legend { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.chart-placeholder .cp-nodata { margin: auto 0 0; align-self: center; color: var(--text-muted); font-size: 13px; }
.todo-head-bar {
  margin: 0;
  padding: 14px 18px;
  background: linear-gradient(45deg, var(--ref-navy) 0%, #0288d1 100%);
  color: #fff;
  font-size: 24px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.chart-card .cp-title { font-size: 22px; font-weight: 700; color: var(--text); }
.chart-card .cp-legend { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.chart-card .google-chart-target { min-height: 168px; display: flex; align-items: center; justify-content: center; }
.chart-card .cp-nodata { color: var(--text-muted); font-size: 13px; }
.problem-row-2 { grid-template-columns: repeat(3, 1fr); }
.problem-ticket-stack { display: flex; flex-direction: column; gap: 10px; }
.problem-ticket-stack .stat-card { height: 56px; }
.problem-ticket-stack .stat-card .ico { flex-basis: 56px; font-size: 26px; }
.problem-ticket-stack .stat-card > div:last-child { padding: 5px 10px 0 0; }
.problem-ticket-stack .stat-card .num { font-size: 17px; }
.problem-ticket-stack .stat-card .label { font-size: 11.5px; }
.problem-ticket-stack .stat-card .hint { font-size: 10px; line-height: 14px; padding: 1px 10px; }
@media (max-width: 1100px) {
  .problem-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .problem-row { grid-template-columns: 1fr; }
}

/* Quick Setting panel — one mini-form per setting, each with its own pill-
   style radio choices and its own Save button, matching the reference
   admin panel's layout instead of one big form with a single save button. */
.qs-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.qs-item:first-child { padding-top: 0; }
.qs-item:last-child { border-bottom: none; }
.qs-item.qs-disabled { opacity: .6; }
.qs-question {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--text);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.qs-question .qs-hint-icon { text-transform: none; font-weight: 400; color: var(--text-muted); cursor: help; }
.qs-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qs-pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.qs-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  background: var(--surface);
  transition: background .12s, color .12s, border-color .12s;
}
.qs-pill input { position: absolute; opacity: 0; pointer-events: none; }
.qs-pill:has(input:checked) { background: var(--teal); border-color: var(--teal); color: #fff; }
.qs-pill:has(input:disabled) { cursor: not-allowed; opacity: .7; }
.qs-item select.qs-select { max-width: 220px; display: inline-block; }
.qs-save-btn { margin-left: auto; }
@media (max-width: 480px) {
  .qs-controls { flex-direction: column; align-items: stretch; }
  .qs-save-btn { margin-left: 0; }
}
/* System Setup's real "Information" hint under each setting (Phase 68) —
   the reference's own disclosed default-behavior text, not this app's
   invention. Deliberately plain: Bootstrap's own text-muted color/small
   size, no new visual language. */
.qs-info { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.qs-info i { margin-right: 4px; }
.qs-info-text { margin-top: 2px; font-style: italic; }

/* ============================================================
   Cards, tables, badges, forms
   Bootstrap's own .card / .table / .badge / .form-control /
   .form-select / .btn / .alert / .dropdown-menu now provide the
   base look (via the --bs-* retuning above); the rules below just
   add the small extras — pill-shaped badges, padded cards, uppercase
   table headers, exact legacy alert colors — that keep this looking
   the same as before the framework switch.
   ============================================================ */
.card { padding: 18px; margin-bottom: 20px; }

/* Reference's own text inputs/plain selects read via getComputedStyle:
   border-radius 3-4px (not this app's globally-retuned 10px — scoped
   here rather than lowering --bs-border-radius, which also drives
   .card/.dropdown-menu/.alert that haven't been checked against the
   reference), a plain #ccc border, and a 34px/14px box. font-size needs
   setting explicitly here rather than relying on the --bs-body-font-size
   retune above: Bootstrap's shipped .form-control hardcodes font-size to
   a plain 1rem, which tracks the <html> root's font-size, not body's —
   so it stayed 16px even after body correctly dropped to 14px (confirmed
   by inspecting a Configuration Add-modal input, which sat at 16px while
   the page's own body text around it was already 14px). Left unscoped
   (not just .filter-panel) since every text input/select in the app
   inherits from the same two Bootstrap classes. */
.form-control, .form-select {
  border-radius: 4px;
  border-color: #ccc;
  background-color: #fff;
  font-size: 14px;
  min-height: 34px;
}
.form-control:disabled, .form-select:disabled { background-color: var(--bg); }
/* Select2's default theme already ships ~4px radius / #aaa border /
   white background that happens to match the reference closely (both
   load the same library) — it only needed resizing to this app's
   corrected 14px body font-size instead of inheriting the old 16px. */
.select2-container--default .select2-selection--single {
  min-height: 34px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 32px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 32px;
}

.table > :not(caption) > * > * { padding: 10px 12px; }
.table thead th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
  border-bottom-width: 1px;
}

/* The reference's "+ X" add-new pill button (Configuration pages' "+Zone"
   etc., Client Request's "+Client Request") — read via getComputedStyle,
   it's the same dark navy as the table headers, not Bootstrap's blue
   .btn-primary this app had been using for these buttons. */
.btn-ref-navy {
  background: rgba(20, 54, 82, .94);
  color: #fff;
  border: none;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
}
.btn-ref-navy:hover, .btn-ref-navy:focus {
  background: rgba(20, 54, 82, 1);
  color: #fff;
}
/* v1.9.82: the portal's page action buttons (.btn-topbar-color - Generate Excel / PDF / CSV, Add / Create / New ..., Save or Update,
   Submit, Sync, Export, Send, Transfer, Show, Update Report, Clear Filters ...; found on 96 of its 138 menu pages) turn white with navy
   text and a soft shadow on hover, in 0.3 s. Same here, Classic only, outside popups (the portal's popup buttons do not). */
body:not(.ui-modern) .btn-ref-navy { transition: .3s; }
body:not(.ui-modern) .btn-ref-navy:not(.disabled):not(:disabled):hover {
  background: #fff; color: rgba(20, 54, 82, .94);
  box-shadow: inset 0 0 0 1px rgba(20, 54, 82, .94), rgba(60, 64, 67, .3) 0 2px 3px 1px, rgba(60, 64, 67, .15) 0 4px 8px 0;
}
body:not(.ui-modern) .modal .btn-ref-navy:hover { background: rgba(20, 54, 82, 1); color: #fff; box-shadow: none; }

/* Online Client Monitoring's 4 view-switch tabs (custom-tickets-btn in the
   reference, read live via getComputedStyle) — white pill, 2px navy
   border/text, list icon. The reference genuinely gives the active tab
   no distinct styling at all (confirmed live: all 4 render identically
   regardless of which one is selected), so this doesn't add one either. */
.view-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: var(--ref-navy);
  border: 2px solid var(--ref-navy);
  border-radius: 25px;
  font-weight: 700;
  font-size: 13px;
  padding: 7px 16px;
}
.view-tab-btn:hover, .view-tab-btn:focus { background: #f4f7f9; color: var(--ref-navy); text-decoration: none; }

/* Configuration submenu tables (Zone, Sub Zone, Box, Connection Type,
   Client Type, Protocol Type, Billing Status, Package, District, Upazila)
   — matched to the live reference's own table styling, read via
   getComputedStyle on portal.umaxinternet.com's Configuration pages
   (dark navy header, centered/compact cells). Scoped to .config-table
   rather than changed on .table globally, since Client List/Billing List
   already got their own dedicated header/column matching in earlier
   phases and shouldn't inherit this. */
/* table.dataTable's own stylesheet sets thead th { text-align: left },
   which beats a plain .config-table thead th rule on specificity —
   bumped here (table.config-table…) so the reference's centered header
   text actually wins. */
table.config-table thead th {
  background: rgba(20, 54, 82, .94);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  padding: 10px 3px;
  vertical-align: middle;
}
.config-table tbody td {
  padding: 10px 2px;
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
  color: #333;
}

/* DataTables' own "Show X entries" / "Search:" controls read uppercase
   on the reference (verified: computed text-transform is none by default
   in this app, but every reference page — Client List, Configuration,
   Client Request — renders them in caps), so it's a real site-wide
   convention, not a one-off. */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info {
  text-transform: uppercase;
  font-size: 12px;
}

/* Reference-style filter-panel label (Client Request's From Date/To
   Date/Setup Status/etc.) — bold, small, uppercase, unlike this app's
   generic .form-grid label (used by many other, unrelated forms, so
   scoped to its own class here rather than changed globally).
   Selector is .form-grid label.filter-label-ref, not just
   .filter-label-ref: a plain single-class selector loses to
   ".form-grid label" below on specificity regardless of source order,
   which silently no-op'd this class everywhere it was already applied
   (Client Request, Daily Collection) until caught here on Billing List. */
.form-grid label.filter-label-ref {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: normal;
  color: var(--label);
  margin-bottom: 6px;
}

.badge { border-radius: 20px; font-weight: 500; }
.badge-running, .badge-paid { background: var(--green); color: #fff; }
.badge-inactive, .badge-partial { background: var(--amber); color: #fff; }
.badge-deactivated, .badge-unpaid, .badge-blocked { background: var(--red); color: #fff; }
.badge-left { background: var(--slate); color: #fff; }
.badge-conn-online { background: var(--green); color: #fff; }
.badge-conn-offline { background: var(--red); color: #fff; }
.badge-conn-unknown { background: var(--slate); color: #fff; }
/* Support Category's "Category Type" pill — its own exact colors read
   live off the reference (#08aa17/#ff8c00), distinct from --green. */
.badge-cat-everyone { background: #08aa17; color: #fff; }
.badge-cat-office { background: #ff8c00; color: #fff; }

/* Mikrotik Server list's own 3 action icons — colors read directly off
   the live reference via getComputedStyle (no background, just a
   colored glyph, 15px). */
.action-btn-bg-sync { color: #0177e5; font-size: 15px; }
.action-btn-bg-edit { color: #08aa17; font-size: 15px; }
.action-btn-bg-mac-sync { color: #663398; font-size: 15px; }
/* Bandwidth Purchase Bill list (Phase 206) — the reference's Preview /
   Delete icons and its Status column's Pay / Due tags. */
.action-btn-bg-view { color: rgba(20, 54, 82, .94); font-size: 15px; }
.action-btn-bg-delete { color: #f50707; font-size: 15px; }
.bw-pay-btn { background: #686868; color: #fff; padding: 4px 6px; margin: 2px; border-radius: 3px; text-decoration: none; }
.bw-pay-btn:hover { color: #fff; opacity: .9; }
.bw-due-tag { background: #dc3545; color: #fff; padding: 4px 6px; margin: 2px; border-radius: 3px; }
/* POP Funding's Trans.Status (Phase 218): Refund / Withdraw / Paid·Advance,
   the reference's btn-refund / btn-withdraw / paid-btn colours. */
.bw-refund-btn, .bw-withdraw-btn, .bw-paid-tag { color: #fff; padding: 4px 6px; margin: 2px; border-radius: 3px; text-decoration: none; white-space: nowrap; }
.bw-refund-btn { background: #00b0e4; }
.bw-withdraw-btn { background: #ffd800; }
.bw-paid-tag { background: #2b982b; }
.bw-refund-btn:hover, .bw-withdraw-btn:hover { color: #fff; opacity: .9; }
.fund-act, .fund-history-btn, .fund-delete-btn, .fund-remarks-btn { cursor: pointer; }
/* Support tickets (Phase 220): the reference's status / assign buttons,
   solver names and Duration. */
.tk-status-pending { background: #fb483a; color: #fff; }
.tk-status-processing { background: #ff9600; color: #fff; }
.tk-assign-btn { background: #1f91f3; color: #fff; }
.tk-reassign-btn { background: #00b0e4; color: #fff; }
.tk-status-pending:hover, .tk-status-processing:hover, .tk-assign-btn:hover, .tk-reassign-btn:hover { color: #fff; opacity: .9; }
.tk-emp { display: block; color: #337ab7; white-space: nowrap; }
.tk-dur { color: #008080; font-weight: 700; }
.tk-comments, .tk-edit, .tk-delete, .rt-discussion, .rt-msg-reply, .rt-msg-edit, .tk-solved-info { cursor: pointer; }
/* POP Tariff change logs (Phase 219): a value that differs from the row below. */
.changed-data-section { background: #fff3cd !important; font-weight: 600; }
.fund-restrict-badge { display: inline-block; color: #fff; font-weight: 700; padding: 4px 12px; border-radius: 16px; border: 3px solid #000; cursor: pointer; white-space: nowrap; }

form.filter-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
form.filter-bar .form-control, form.filter-bar .form-select { width: auto; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
/* Add/Edit Client's real grid is 4 columns for Personal/Contact/Network
   Information (confirmed live + from the user's own reference
   screenshot), not this app's generic 2-column default — opt-in per
   section via this modifier so unrelated .form-grid usage elsewhere
   (Configuration side panels, other Add modals already matched to
   their own reference column counts) is untouched. */
.form-grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Some reference sections (Add Client's Personal/Service Information)
   turned out to use real, unequal-width Bootstrap columns with several
   fields stacked inside one column — not a strict N-per-row grid — so
   those use Bootstrap 5's own .row/.col-* directly instead of
   .form-grid. This keeps their labels on the same established style. */
.form-section-body .row > [class*="col-"] > div + div { margin-top: 14px; }
.form-section-body .row label:not(.upload-circle) { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--label); margin-bottom: 6px; }
/* Reference's real required-field marker — confirmed live in its own
   source (Client _ Add.html): a heavy asterisk "✱", not a plain "*",
   colored #f90000, distinct from the label's own blue-gray text. */
.required-mark { color: #f90000; font-size: 11px; line-height: 14px; font-weight: 700; }
@media (max-width: 1100px) { .form-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .form-grid-4 { grid-template-columns: 1fr; } }
/* Left Client filters: Bootstrap col-sm-3 on the reference = 4 per row from 768px up. */
@media (min-width: 768px) { .form-grid-4.left-filter-4 { grid-template-columns: repeat(4, 1fr); } }
.form-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .form-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .form-grid-3 { grid-template-columns: 1fr; } }
/* Five filters in one row (Daily Account's Daily Total Expense: 19% each).
   The --wide-dates variant is Daily Total Income's col-sm-3/3/2/2/2 split. */
.form-grid-5 { grid-template-columns: repeat(5, 1fr); }
.form-grid-5.form-grid-5--wide-dates { grid-template-columns: 3fr 3fr 2fr 2fr 2fr; }
@media (max-width: 1100px) { .form-grid-5, .form-grid-5.form-grid-5--wide-dates { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .form-grid-5, .form-grid-5.form-grid-5--wide-dates { grid-template-columns: 1fr; } }
/* HR Add/Edit Employee's real section header is NOT the navy bar
   .form-section-head uses elsewhere (Client Add/Edit) — confirmed live
   via getComputedStyle on the reference's own /employee/add: plain,
   no background at all, icon + text in #3d5869, 20px/weight 500. Its
   own class name there is literally "info-head", reused here since
   this page's header genuinely doesn't share Client Add's styling. */
.info-head { background: transparent; color: #3d5869; padding: 4px 0 12px; }
.info-head h2 { margin: 0; font-size: 20px; font-weight: 500; color: #3d5869; }
.info-head h2 i { margin-right: 8px; }
/* General-purpose "locked, auto-filled value with a pencil to unlock
   manual editing" field — same real reference pattern already built
   for Client Request's wizard Monthly Bill (Phase 161), just not
   scoped to .wizard-panel since Add/Edit Client isn't a wizard. */
.field-with-edit { display: flex; align-items: center; gap: 8px; }
.field-with-edit .form-control { flex: 1 1 auto; }
.field-edit-toggle {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.field-edit-toggle:hover { color: var(--teal); border-color: var(--teal); }
/* Reference's real Add/Edit field labels — verified live via getComputedStyle
   on THREE independent modals (Configuration > Add Zone, Purchase > Add
   Vendor, Bandwidth Sale > Create Customer): bold, uppercase, 12px, color
   rgb(89,112,128). This app's own .filter-label-ref (built for filter
   panels only) already had this exact styling — now confirmed to be the
   reference's general form-label convention, not just a filter-panel one,
   so it's promoted here to the shared .form-grid label default. */
.form-grid label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--label); margin-bottom: 6px; }
/* Same reference label style as .form-grid label above, for standalone
   full-width field labels outside a .form-grid (e.g. a single textarea).
   Not applied to every bare <label> site-wide because several unrelated
   ones are actually checkbox/toggle captions (.checkbox-line, form-check) that intentionally keep their own plain styling — so this
   is opt-in per label rather than a blanket tag selector. */
.field-label-ref { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--label); margin-bottom: 6px; }
.form-actions { margin-top: 18px; display: flex; gap: 10px; }

/* Client Profile (clients/view.php) — matched to the reference's own
   two-column layout: a narrow profile card (photo, doc-icon links, info
   list, action buttons) plus a wide tabbed card, verified live at
   desktop width (it collapses to one column narrower than that, same
   breakpoint as .config-layout below). */
.profile-layout { display: flex; gap: 20px; align-items: flex-start; }
.profile-header-card { flex: 0 0 300px; padding: 0; overflow: hidden; }
.profile-tabs-card { flex: 1; min-width: 0; }
@media (max-width: 860px) { .profile-layout { flex-direction: column; } .profile-header-card { flex-basis: auto; width: 100%; } }

.profile-banner { background: var(--sidebar); height: 70px; }
.profile-photo-wrap { display: flex; justify-content: center; margin-top: -50px; }
.profile-photo { width: 100px; height: 100px; border-radius: 50%; border: 4px solid #fff; object-fit: cover; background: #eef1f5; }
.profile-photo-placeholder { display: flex; align-items: center; justify-content: center; font-size: 34px; color: #98a2b3; }
.profile-doc-icons { display: flex; justify-content: center; gap: 50px; margin-top: 8px; }
.profile-doc-icon {
  width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 2px solid var(--sidebar);
  display: flex; align-items: center; justify-content: center; color: var(--sidebar); text-decoration: none; font-size: 13px;
}
.profile-doc-icon.disabled { opacity: .4; cursor: not-allowed; }
.profile-name { text-align: center; font-size: 17px; font-weight: 600; margin: 10px 0 14px; }
.profile-info-list { list-style: none; padding: 0 18px 16px; margin: 0; }
.profile-info-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.profile-info-list li:last-child { border-bottom: none; }
.profile-info-list li span:first-child { color: var(--text-muted); white-space: nowrap; }
.profile-info-list li span:first-child i { width: 16px; text-align: center; margin-right: 4px; }
.profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 18px 16px; }
.profile-actions .full { grid-column: 1 / -1; }
.profile-action-btn {
  background: var(--sidebar); color: #fff; border: none; border-radius: 6px; padding: 10px 8px;
  font-size: 12.5px; text-align: center; text-decoration: none; display: block; cursor: pointer; line-height: 1.3;
}
.profile-action-btn:hover { opacity: .88; color: #fff; }

.profile-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.profile-tab-link { color: var(--text-muted); text-decoration: none; padding-bottom: 6px; font-size: 13.5px; cursor: pointer; border-bottom: 2px solid transparent; }
.profile-tab-link.active { color: var(--teal); border-bottom-color: var(--teal); font-weight: 600; }
.profile-tabs-card .tab-panel { display: none; padding: 18px; }
.profile-tabs-card .tab-panel.active { display: block; }
.profile-subhead { font-size: 13.5px; font-weight: 700; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); text-transform: uppercase; color: var(--text-muted); }

/* Client Profile page (clients/view.php) tab-panel section bars + info
   tables — read live via getComputedStyle against the reference's own
   .tabpan-info-title/.client-profile-table (bg rgb(33,65,91), 18px/700
   bar; striped rows rgb(233,237,240); label 700/16px, value 400/14px,
   both #555). Deliberately its own classes, not .profile-subhead/
   .form-grid, since those are shared with other, unrelated pages. */
.profile-info-title { background: rgb(33, 65, 91); color: #fff; font-weight: 700; font-size: 18px; padding: 5px 10px; margin: 0 0 14px; }
.profile-info-table { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #eee; border-left: 1px solid #eee; margin: 0 0 14px; }
.profile-info-table > div { display: flex; align-items: center; padding: 9px 10px; border-right: 1px solid #eee; border-bottom: 1px solid #eee; color: #555; font-size: 14px; }
.profile-info-table > div label { flex: 0 0 42%; font-weight: 700; color: #555; font-size: 16px; margin: 0; }
.profile-info-table > div label::after { content: ':'; display: inline-block; width: 20px; text-align: center; }
.profile-info-table > div:nth-child(4n+1), .profile-info-table > div:nth-child(4n+2) { background: rgb(233, 237, 240); }
@media (max-width: 700px) { .profile-info-table { grid-template-columns: 1fr; } .profile-info-table > div:nth-child(4n+1), .profile-info-table > div:nth-child(4n+2) { background: none; } .profile-info-table > div:nth-child(odd) { background: rgb(233, 237, 240); } }

/* SMS Gateway / SMS Sending — a settings card styled to match the
   reference's own dark title bar + bold field labels (read live via
   getComputedStyle: #143652 bar, #333/700/14px labels — the reference's
   own Material "form-line" underline inputs aren't replicated, since
   every other Configuration/System page in this app already standardizes
   on boxed .form-control). */
.settings-header-bar {
  background: #143652;
  color: #fff;
  margin: -18px -18px 18px;
  padding: 14px 18px;
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: 16px;
  font-weight: 500;
}
.settings-header-bar i { margin-right: 8px; }
.field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.label-strong { display: block; font-size: 14px; font-weight: 700; color: #333; margin-bottom: 6px; }
.label-strong i { color: var(--label); margin-right: 6px; width: 14px; text-align: center; }

/* Individual SMS composer — the reference's own uppercase/gray/12px field
   captions (read live via getComputedStyle: color rgb(89,112,128)). */
.label-caps { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--label); margin-bottom: 5px; }
.sms-compose-grid { display: flex; gap: 24px; align-items: stretch; }
.sms-compose-grid > .sms-compose-fields { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.sms-compose-grid > .sms-compose-desc { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.sms-compose-grid > .sms-compose-desc textarea { flex: 1 1 auto; resize: none; }
@media (max-width: 720px) { .sms-compose-grid { flex-direction: column; } }

.form-grid .checkbox-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); margin: 0; }
.form-grid .checkbox-line .form-check-input { width: 1em; height: 1em; margin: 0; flex-shrink: 0; }

.alert-success { background: #e4f6ee; color: var(--green); border-color: #cdece0; }
.alert-danger { background: #fdecea; color: var(--red); border-color: #f6d4d0; }

/* Reference's real Add/Edit modal footer buttons are always solid-fill,
   never Bootstrap's outline style this app had been using everywhere —
   confirmed live via getComputedStyle on 3 independent modals
   (Configuration > Add Zone, Purchase > Add Vendor, Support > New Ticket).
   Simple lookup-CRUD modals (the majority) use a bright blue Save
   (#1f91f3) / red Close (#fb483a); a few richer modals (Support Ticket,
   Bandwidth Sale > Create Customer) use navy Submit + a slightly
   different red instead — but every single one checked was solid fill,
   never outline. This fixes that universally; the finer simple-vs-rich
   radius/color distinction is left as a follow-up (see README). */
.modal-footer .btn-outline-primary {
  background-color: #1f91f3;
  border-color: #1f91f3;
  color: #fff;
}
.modal-footer .btn-outline-primary:hover,
.modal-footer .btn-outline-primary:focus {
  background-color: #0d7ee0;
  border-color: #0d7ee0;
  color: #fff;
}
.modal-footer .btn-outline-danger {
  background-color: #fb483a;
  border-color: #fb483a;
  color: #fff;
}
.modal-footer .btn-outline-danger:hover,
.modal-footer .btn-outline-danger:focus {
  background-color: #e8382a;
  border-color: #e8382a;
  color: #fff;
}
/* These 2 specific modals are the "richer" exceptions confirmed live
   (not the simple-CRUD default above): Bandwidth Sale > Create Customer's
   real Next/step button and Support > New Ticket's real Submit/Cancel
   both read back their own distinct colors via getComputedStyle. */
#customerModal .modal-footer .btn-outline-primary {
  background-color: var(--ref-navy);
  border-color: var(--ref-navy);
}
#customerModal .modal-footer .btn-outline-primary:hover,
#customerModal .modal-footer .btn-outline-primary:focus {
  background-color: #1a3348;
  border-color: #1a3348;
}
#newTicketModal .modal-footer .btn-outline-primary {
  background-color: rgba(20, 54, 82, .94);
  border-color: rgba(20, 54, 82, .94);
}
#newTicketModal .modal-footer .btn-outline-primary:hover,
#newTicketModal .modal-footer .btn-outline-primary:focus {
  background-color: rgba(20, 54, 82, 1);
  border-color: rgba(20, 54, 82, 1);
}
#newTicketModal .modal-footer .btn-outline-danger {
  background-color: #ff5042;
  border-color: #ff5042;
}
#newTicketModal .modal-footer .btn-outline-danger:hover,
#newTicketModal .modal-footer .btn-outline-danger:focus {
  background-color: #e8382a;
  border-color: #e8382a;
}
#requestModal .modal-footer .btn-outline-primary {
  background-color: var(--ref-navy);
  border-color: var(--ref-navy);
}
#requestModal .modal-footer .btn-outline-primary:hover,
#requestModal .modal-footer .btn-outline-primary:focus {
  background-color: #1a3348;
  border-color: #1a3348;
}

/* ============================================================
   Multi-step "wizard" modal — matches the reference's real Add Client
   Request popup (and similarly-shaped Add Customer/Add Employee forms):
   a 4-icon stepper with a progress bar, one field-panel visible at a
   time, Next/Previous/Close/Save navigation. Colors read live off the
   reference via getComputedStyle: header/active-step/progress-fill
   var(--ref-navy), inactive step #ccc, Close/Previous gray #808080.
   ============================================================ */
.wizard-header { background: var(--ref-navy); color: #fff; padding: 14px 20px; align-items: flex-start; }
.wizard-header .modal-title { font-size: 19px; font-weight: 700; }
.wizard-subtitle { font-size: 12.5px; color: rgba(255,255,255,.75); margin-top: 2px; }
.wizard-stepper { display: flex; padding: 18px 24px 0; background: var(--surface); }
.wizard-step-item { flex: 1; text-align: center; position: relative; }
.wizard-step-item:not(:last-child)::after {
  content: ""; position: absolute; top: 17px; left: 50%; width: 100%; height: 2px; background: #dfe4e8; z-index: 0;
}
.wizard-step-item.completed:not(:last-child)::after { background: var(--ref-navy); }
.wizard-step-icon {
  width: 36px; height: 36px; border-radius: 50%; background: #ccd3d8; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  margin: 0 auto 8px; position: relative; z-index: 1;
}
.wizard-step-item.active .wizard-step-icon,
.wizard-step-item.completed .wizard-step-icon { background: var(--ref-navy); }
.wizard-step-label { font-size: 13px; color: var(--text-muted); }
.wizard-step-item.active .wizard-step-label { color: var(--ref-navy); font-weight: 600; }
.wizard-progress { height: 7px; background: #e4e8eb; margin: 12px 24px 0; border-radius: 4px; overflow: hidden; }
.wizard-progress-bar {
  height: 100%; background: repeating-linear-gradient(-45deg, var(--ref-navy), var(--ref-navy) 8px, #2c5170 8px, #2c5170 16px);
  border-radius: 4px; transition: width .25s ease;
}
.wizard-panel { display: none; }
.wizard-panel.active { display: block; }
.wizard-panel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.wizard-panel-head h6 { margin: 0; font-size: 17px; color: var(--text); }
.wizard-panel-head .step-count { font-size: 13px; color: var(--text-muted); }

/* Reference's real wizard field boxes (verified live via getComputedStyle
   on Step 3 AND Step 4 — same style on every step): pill-shaped (20px
   radius), 40px tall, #f8f8f8 fill on plain fields, a slightly darker
   #e9edf0 on auto-filled/locked ones like Monthly Bill. Scoped to
   .wizard-panel so it doesn't touch the simple-CRUD modal styling
   Phase 158 already tuned to a different (3px, white) reference shape. */
.wizard-panel .form-control,
.wizard-panel .form-select,
.wizard-panel .select2-container--default .select2-selection--single {
  border-radius: 20px;
  min-height: 40px;
  background-color: #f8f8f8;
  border-color: #ccc;
}
.wizard-panel .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px;
  padding-left: 14px;
}
.wizard-panel .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px;
}
.wizard-panel .form-control[readonly].bg-locked { background-color: #e9edf0; cursor: not-allowed; }
/* Reference's real wizard field grid is 3 columns, not this app's
   generic 2-column .form-grid used elsewhere — confirmed against the
   user's own screenshot of Step 4 (Package/Billing Status/Monthly Bill
   in one row) and Step 1 (Name/Gender/Occupation, DOB/Father/Mother,
   .../.../Remarks, 3 photo fields — exactly 3 per row, no reordering
   needed since this app's own field order already matched). */
.wizard-panel .form-grid { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 900px) {
  .wizard-panel .form-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .wizard-panel .form-grid { grid-template-columns: 1fr; }
}
.wizard-field-with-edit { display: flex; align-items: center; gap: 8px; }
.wizard-field-with-edit .form-control { flex: 1 1 auto; }
.wizard-edit-toggle {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.wizard-edit-toggle:hover { color: var(--teal); border-color: var(--teal); }

/* ============================================================
   Configuration (simple lookup CRUD: table + side add/edit form)
   ============================================================ */
.config-layout { display: flex; gap: 20px; align-items: flex-start; }
.config-layout > .card:first-child { flex: 2; min-width: 0; }
.config-form-card { flex: 1; min-width: 260px; position: sticky; top: 20px; }
.config-form-card h2 { margin: 0 0 14px; font-size: 15px; }
.config-form-card label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--label); margin: 12px 0 4px; }
.config-form-card label:first-of-type { margin-top: 0; }
@media (max-width: 900px) {
  .config-layout { flex-direction: column; }
  .config-form-card { width: 100%; position: static; }
}

/* ============================================================
   "Planned feature" placeholder pages
   ============================================================ */
.placeholder-card {
  text-align: center;
  padding: 50px 30px;
  color: var(--text-muted);
}
.placeholder-ico { font-size: 34px; margin-bottom: 10px; }
.placeholder-card h2 { color: var(--text); margin: 0 0 8px; font-size: 17px; }
.placeholder-card p { max-width: 480px; margin: 0 auto; font-size: 14px; line-height: 1.5; }

/* ============================================================
   Auth pages (login / setup)
   ============================================================ */
.auth-body {
  background: var(--sidebar);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.auth-card {
  background: var(--surface);
  padding: 34px 36px;
  border-radius: 12px;
  width: 320px;
}
.auth-card h1 { margin: 0 0 4px; font-size: 20px; }
.auth-sub { color: var(--text-muted); font-size: 13px; margin: 0 0 18px; }
.auth-card label { display: block; font-size: 13px; margin: 12px 0 4px; color: var(--text-muted); }
.auth-card .btn { width: 100%; margin-top: 20px; }

/* ============================================================
   Network diagram
   ============================================================ */
.diagram-toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.diagram-toolbar #diagramSearch { flex: 1; min-width: 200px; }
.diagram-zoom { display: flex; gap: 6px; }
.diagram-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.diagram-legend .dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 5px; vertical-align: middle;
}

.diagram-wrap { display: flex; gap: 16px; align-items: flex-start; }
.diagram-canvas-holder {
  flex: 1;
  height: 620px;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  cursor: grab;
  touch-action: none;
}
.diagram-canvas-holder.panning { cursor: grabbing; }
.diagram-canvas-holder svg { width: 100%; height: 100%; display: block; }

.diagram-edge { fill: none; stroke: #aebac2; stroke-width: 2.5; }

.dnode { cursor: pointer; }
.dnode > rect:first-of-type { stroke: transparent; stroke-width: 2; transition: opacity .15s, stroke .15s; }
.dnode-badge { fill: rgba(0,0,0,.16); pointer-events: none; }
.dnode-icon { fill: #fff; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 14px; pointer-events: none; }
.dnode-label { fill: #fff; font-size: 13px; font-weight: 700; font-family: var(--font); pointer-events: none; }
.dnode-sub { fill: rgba(255,255,255,.82); font-size: 10.5px; font-family: var(--font); pointer-events: none; }
.dnode.selected > rect:first-of-type { stroke: #ffd166; stroke-width: 3; }
.dnode.match > rect:first-of-type { stroke: #ffd166; stroke-width: 3; }
.dnode.dim { opacity: .28; }

.diagram-panel {
  width: 300px;
  flex-shrink: 0;
  height: 620px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.diagram-panel h3 { margin: 0 0 4px; font-size: 15px; }
.diagram-panel-sub { color: var(--text-muted); font-size: 13px; margin: 0 0 14px; }
.diagram-panel-empty { color: var(--text-muted); font-size: 13px; }
.diagram-panel-loading { color: var(--text-muted); font-size: 13px; }
.diagram-client-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.diagram-client-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.diagram-client-list a { color: var(--blue); }

@media (max-width: 900px) {
  .diagram-wrap { flex-direction: column; }
  .diagram-panel { width: 100%; height: 260px; }
}

/* Manual canvas editor (network-diagram/index.php "Diagram" tab) */
.cv-toolbar-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.cv-search-group { display: inline-flex; align-items: center; gap: 6px; }
#cvConnectHint { font-size: 12px; color: var(--blue); font-weight: 600; }

.cvnode { cursor: grab; }
.cvnode > rect:first-of-type { stroke: transparent; stroke-width: 2; transition: stroke .15s, filter .15s; }
.cvnode:hover > rect:first-of-type { stroke: rgba(255,255,255,.55); }
.cvnode-badge { fill: rgba(0,0,0,.16); pointer-events: none; }
.cvnode-icon {
  fill: #fff; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 15px;
  pointer-events: none;
}
.cvnode-label { fill: #fff; font-size: 13px; font-weight: 700; font-family: var(--font); pointer-events: none; }
.cvnode-sub { fill: rgba(255,255,255,.78); font-size: 10.5px; font-family: var(--font); text-transform: capitalize; letter-spacing: .2px; pointer-events: none; }
.cvnode.selected > rect:first-of-type { stroke: #ffd166; stroke-width: 3; }
.cvnode.cv-source-picked > rect:first-of-type { stroke: #ffd166; stroke-width: 3; stroke-dasharray: 5 3; }

.cvcust { cursor: grab; }
.cvcust circle { stroke: #fff; stroke-width: 2.5; transition: stroke .15s; }
.cvcust:hover circle { stroke: #d7f3ec; }
.cvcust-icon { fill: #fff; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; pointer-events: none; }
.cvcust-label {
  fill: var(--text); font-size: 12px; font-weight: 600; font-family: var(--font);
  paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round;
}
.cvcust.selected circle { stroke: #ffd166; stroke-width: 3; }

.cvedge { pointer-events: none; }
.cvedge-hit { cursor: pointer; }
.cvedge-chip { fill: var(--surface); stroke: var(--border); stroke-width: 1; }
.cvedge-label { fill: var(--text-muted); font-size: 10.5px; font-weight: 600; font-family: var(--font); }
.cvcustedge { stroke: #9fb3ac; stroke-width: 2; stroke-dasharray: 1 5; stroke-linecap: round; }

.cv-panel-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cv-panel-heading { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted); margin: 14px 0 6px; }
/* Network Items popup (v1.9.64; look v1.9.65): light header, segmented Assign / Re-Stock / Destroy, item cards,
   serial chips and − / + steppers. The tone colour follows the tab (data-tone on the modal). */
.cvi-modal { --cvi-tone: #16a34a; --cvi-tone-soft: #e8f7ee; --cvi-ink: #0f2d46; --cvi-line: #e5e9ef; --cvi-muted: #6b7785; }
.cvi-modal[data-tone="restock"] { --cvi-tone: #2563eb; --cvi-tone-soft: #e8f0fe; }
.cvi-modal[data-tone="destroy"] { --cvi-tone: #dc2626; --cvi-tone-soft: #fdecec; }
.cvi-modal .modal-content { border: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(15, 45, 70, .28); background: #fff; }
.cvi-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px 14px; }
.cvi-head-icon { flex: 0 0 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; color: #fff;
  background: linear-gradient(135deg, #143652, #2a6f97); box-shadow: 0 6px 14px rgba(20, 54, 82, .25); }
.cvi-head-txt { flex: 1; min-width: 0; }
.cvi-head-txt h5 { margin: 0; font-size: 18px; font-weight: 700; color: var(--cvi-ink); }
.cvi-target { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; max-width: 100%; padding: 2px 10px; border-radius: 20px;
  background: #eef3f8; color: #35506a; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvi-head .btn-close { align-self: flex-start; opacity: .5; }
.cvi-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 22px 4px; padding: 4px; background: #f1f4f8; border-radius: 12px; }
.cvi-seg .cv-items-tab { display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; background: transparent; border-radius: 9px;
  padding: 9px 6px; font-size: 13.5px; font-weight: 600; color: #5b6b7b; transition: background .15s, color .15s, box-shadow .15s; }
.cvi-seg .cv-items-tab:hover { color: var(--cvi-ink); }
.cvi-seg .cv-items-tab.active { background: #fff; color: var(--cvi-tone); box-shadow: 0 1px 4px rgba(15, 45, 70, .14); }
.cv-items-count:not(:empty) { min-width: 20px; padding: 0 6px; border-radius: 10px; background: #dfe6ee; color: #35506a; font-size: 11px; line-height: 20px; text-align: center; }
.cv-items-tab.active .cv-items-count:not(:empty) { background: var(--cvi-tone); color: #fff; }
.cvi-body { padding: 14px 22px 8px; min-height: 280px; border-top: 1px solid transparent; }
.cvi-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -14px -22px 12px; padding: 14px 22px 10px; position: sticky; top: -14px; z-index: 2; background: #fff; }
.cvi-search { position: relative; flex: 1 1 240px; }
.cvi-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #9aa6b2; font-size: 14px; }
.cvi-search input { width: 100%; height: 40px; padding: 0 14px 0 38px; border: 1px solid var(--cvi-line); border-radius: 10px; background: #f8fafc; font-size: 14px; }
.cvi-search input:focus { outline: 0; border-color: #8fb3d9; background: #fff; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.cvi-switch { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: #44515e; cursor: pointer; user-select: none; white-space: nowrap; }
.cvi-switch input { position: absolute; opacity: 0; pointer-events: none; }
.cvi-switch-track { position: relative; width: 36px; height: 20px; border-radius: 10px; background: #cfd8e2; transition: background .15s; }
.cvi-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.cvi-switch input:checked + .cvi-switch-track { background: #16a34a; }
.cvi-switch input:checked + .cvi-switch-track::after { transform: translateX(16px); }
.cvi-tree { padding-bottom: 4px; }
.cvi-cat { margin-bottom: 8px; }
.cvi-cat > summary { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: #f6f8fb; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 14px; color: var(--cvi-ink); }
.cvi-cat > summary::-webkit-details-marker { display: none; }
.cvi-cat > summary:hover { background: #eef2f7; }
.cvi-cat.sub > summary { background: transparent; padding: 7px 10px; font-size: 13.5px; }
.cvi-chev { font-size: 11px; color: #8a96a3; transition: transform .15s; width: 12px; }
.cvi-cat[open] > summary .cvi-chev { transform: rotate(90deg); }
.cvi-folder { color: #e0a526; }
.cvi-badge { margin-left: auto; min-width: 22px; padding: 0 7px; border-radius: 10px; background: #fff; border: 1px solid var(--cvi-line); color: var(--cvi-muted); font-size: 11.5px; font-weight: 600; line-height: 20px; text-align: center; }
.cvi-cat-body { padding: 6px 0 2px 14px; }
.cvi-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--cvi-line); border-radius: 12px; background: #fff; transition: border-color .15s, background .15s, box-shadow .15s; }
.cvi-item:hover { border-color: #c9d4df; }
.cvi-item.is-on { border-color: var(--cvi-tone); background: var(--cvi-tone-soft); box-shadow: 0 0 0 1px var(--cvi-tone) inset; }
.cvi-item.is-off { opacity: .55; }
.cvi-item-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; }
.cvi-item-pick input, .cvi-all input { position: absolute; opacity: 0; pointer-events: none; }
.cvi-box { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 7px; border: 2px solid #c3ccd6; background: #fff; display: grid; place-items: center; color: #fff; font-size: 12px; transition: all .15s; }
.cvi-box i { opacity: 0; transform: scale(.6); transition: all .15s; }
input:checked + .cvi-box { background: var(--cvi-tone); border-color: var(--cvi-tone); }
input:checked + .cvi-box i { opacity: 1; transform: scale(1); }
input:focus-visible + .cvi-box { box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); }
input:disabled + .cvi-box { background: #eef1f4; }
.cvi-item-main { display: flex; flex-direction: column; min-width: 0; }
.cvi-item-name { font-weight: 600; font-size: 14px; color: #1f2d3a; overflow-wrap: anywhere; }
.cvi-item-name .fa-barcode { color: #64748b; margin-right: 2px; }
.cvi-stock { font-size: 12px; color: #15803d; font-weight: 600; }
.cvi-stock.low { color: #b45309; }
.cvi-stock.none { color: #b91c1c; }
.cvi-meta { font-size: 12px; color: var(--cvi-muted); }
.cvi-stepper { display: inline-flex; align-items: center; flex: 0 0 auto; border: 1px solid #c9d4df; border-radius: 10px; background: #fff; overflow: hidden; }
.cvi-stepper button { width: 32px; height: 34px; border: 0; background: #f3f6f9; color: var(--cvi-ink); font-size: 17px; font-weight: 700; line-height: 1; }
.cvi-stepper button:hover:not(:disabled) { background: #e5ebf1; }
.cvi-stepper input { width: 62px; height: 34px; border: 0; text-align: center; font-weight: 700; font-size: 14px; color: var(--cvi-ink); -moz-appearance: textfield; }
.cvi-stepper input::-webkit-outer-spin-button, .cvi-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cvi-stepper input:focus { outline: 0; background: #f8fbff; }
.cvi-unit { padding: 0 10px 0 4px; font-size: 12px; color: var(--cvi-muted); white-space: nowrap; }
.cvi-stepper.is-dim { opacity: .45; }
.cvi-item-ser { display: block; }
.cvi-ser-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cvi-link { border: 0; background: none; padding: 2px 4px; font-size: 12.5px; font-weight: 600; color: #2563eb; }
.cvi-link:hover { text-decoration: underline; }
.cvi-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cvi-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 12px; border: 1px solid #cfd8e2; border-radius: 20px; background: #f8fafc;
  font-family: Consolas, 'Courier New', monospace; font-size: 12.5px; color: #334155; cursor: pointer; user-select: none; transition: all .15s; }
.cvi-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cvi-chip i { display: none; font-size: 11px; }
.cvi-chip small { font-family: var(--font); color: #94a3b8; font-size: 11px; }
.cvi-chip:hover { border-color: #9fb3c8; background: #fff; }
.cvi-chip.is-on { background: var(--cvi-tone); border-color: var(--cvi-tone); color: #fff; }
.cvi-chip.is-on i { display: inline; }
.cvi-chip.is-on small { color: rgba(255,255,255,.8); }
.cvi-chip:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); }
.cvi-all { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px 12px; font-size: 13px; font-weight: 600; color: #44515e; cursor: pointer; }
.cvi-list { padding-bottom: 4px; }
.cvi-row { padding: 10px 12px; }
.cvi-qty-fixed { flex: 0 0 auto; padding: 4px 12px; border-radius: 20px; background: #eef3f8; font-size: 12.5px; font-weight: 600; color: #35506a; }
.cv-serial-tag { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 6px; background: #eef3f8; border: 1px solid #d5dfe9; font-family: Consolas, monospace; font-size: 12px; font-weight: 500; color: #334155; }
[data-pane="restock"] .cvi-tools { position: static; margin: 0 0 12px; padding: 0; }
.cvi-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; margin-bottom: 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; }
.cvi-note i { margin-top: 2px; }
.cvi-note-blue { background: #eef4ff; color: #1e3a8a; }
.cvi-note-red { background: #fef2f2; color: #991b1b; }
.cvi-loc { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; font-weight: 600; color: #44515e; flex-wrap: wrap; }
.cvi-loc i { color: #64748b; }
.cvi-loc select { width: auto; min-width: 220px; border-radius: 10px; }
.cvi-empty { padding: 40px 10px; text-align: center; color: #94a3b8; }
.cvi-empty i { font-size: 34px; margin-bottom: 10px; color: #cbd5e1; }
.cvi-empty p { margin: 0; font-size: 14px; color: #64748b; }
.cvi-empty small { color: #94a3b8; }
.cv-items-msg { display: none; margin: 0 22px; padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.cv-items-msg.ok { display: block; background: #e8f7ee; color: #166534; }
.cv-items-msg.bad { display: block; background: #fdecec; color: #991b1b; }
.cvi-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px 18px; }
.cvi-cancel { border: 0; background: none; padding: 10px 6px; font-weight: 600; color: #64748b; }
.cvi-cancel:hover { color: var(--cvi-ink); }
.cvi-go { display: inline-flex; align-items: center; gap: 8px; min-width: 150px; justify-content: center; height: 44px; padding: 0 22px; border: 0; border-radius: 12px;
  background: var(--cvi-tone); color: #fff; font-weight: 700; font-size: 14.5px; box-shadow: 0 6px 16px color-mix(in srgb, var(--cvi-tone) 35%, transparent); transition: filter .15s, opacity .15s; }
.cvi-go:hover:not(:disabled) { filter: brightness(1.08); }
.cvi-go:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
.cvi-go.is-busy i::before { content: "\f110"; }
.cvi-go.is-busy i { animation: fa-spin 1s linear infinite; }
/* v1.9.66: the rest of the Network Diagram popups in the same look */
.cvi-modal[data-tone="navy"] { --cvi-tone: #143652; --cvi-tone-soft: #e9eff5; }
.cvi-modal[data-tone="assign"] { --cvi-tone: #16a34a; --cvi-tone-soft: #e8f7ee; }
.cvi-body-sm { min-height: 0; padding-bottom: 4px; }
.cvi-label { display: block; margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: #44515e; letter-spacing: .2px; }
.cvi-label + * { margin-bottom: 14px; }
.cvi-opt { font-weight: 500; color: #94a3b8; margin-left: 4px; }
.cvi-modal .form-control, .cvi-modal .form-select { min-height: 42px; border-radius: 10px; border-color: var(--cvi-line); background-color: #f8fafc; font-size: 14px; }
.cvi-modal .form-control:focus, .cvi-modal .form-select:focus { border-color: #8fb3d9; background-color: #fff; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.cvi-input { position: relative; }
.cvi-input > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #9aa6b2; font-size: 13px; pointer-events: none; }
.cvi-input > .form-control { padding-left: 36px; }
.cvi-textarea { min-height: 120px; resize: vertical; }
.cvi-counter { margin: -8px 2px 6px; text-align: right; font-size: 12px; color: #94a3b8; }
.cvi-hint { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; margin: 2px 0 6px; border-radius: 10px; background: #f6f8fb; color: #5b6b7b; font-size: 12.5px; line-height: 1.45; }
.cvi-hint i { margin-top: 2px; color: #94a3b8; }
.cvi-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.cvi-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.cvi-choice button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 9px; border: 1px solid var(--cvi-line); border-radius: 12px; background: #fff; font-size: 13px; font-weight: 600; color: #44515e; transition: all .15s; }
.cvi-choice button svg { width: 60px; height: 10px; }
.cvi-choice button line { stroke: #94a3b8; stroke-width: 3; stroke-linecap: round; }
.cvi-choice button:hover { border-color: #b8c6d4; }
.cvi-choice button.is-on { border-color: var(--cvi-tone); background: var(--cvi-tone-soft); color: var(--cvi-tone); box-shadow: 0 0 0 1px var(--cvi-tone) inset; }
.cvi-choice button.is-on line { stroke: var(--cvi-tone); }
.cvi-color { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px 0 6px; margin: 0 0 14px; border: 1px solid var(--cvi-line); border-radius: 10px; background: #f8fafc; cursor: pointer; font-family: Consolas, monospace; font-size: 13px; color: #44515e; }
.cvi-color input { width: 32px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.cvi-color input::-webkit-color-swatch-wrapper { padding: 0; } .cvi-color input::-webkit-color-swatch { border: 1px solid rgba(0,0,0,.15); border-radius: 7px; }
.cvi-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin-bottom: 16px; }
.cvi-swatch { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid var(--cvi-line); border-radius: 10px; background: #fff; font-size: 12.5px; font-weight: 600; color: #44515e; text-align: left; transition: all .15s; }
.cvi-swatch b { min-width: 16px; color: #94a3b8; font-weight: 700; font-size: 11.5px; }
.cvi-swatch .dot { flex: 0 0 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(0,0,0,.15); color: #fff; font-size: 11px; }
.cvi-swatch .dot i { opacity: 0; }
.cvi-swatch[data-color="#f5f5f5"] .dot, .cvi-swatch[data-color="#f2d02f"] .dot, .cvi-swatch[data-color="#f48fb1"] .dot { color: #1f2d3a; }
.cvi-swatch-none .dot { background: repeating-linear-gradient(45deg, #fff 0 4px, #e2e8f0 4px 8px); color: #1f2d3a; }
.cvi-swatch:hover { border-color: #b8c6d4; }
.cvi-swatch.is-on { border-color: var(--cvi-tone); background: var(--cvi-tone-soft); box-shadow: 0 0 0 1px var(--cvi-tone) inset; color: var(--cvi-ink); }
.cvi-swatch.is-on .dot i { opacity: 1; }
.cvi-split { display: flex; align-items: center; justify-content: center; margin: 4px 0 16px; }
.cvi-split .dot { width: 14px; height: 14px; border-radius: 50%; background: #94a3b8; }
.cvi-split .dot.new { width: 28px; height: 28px; display: grid; place-items: center; background: var(--cvi-tone); color: #fff; font-size: 12px; box-shadow: 0 0 0 5px var(--cvi-tone-soft); }
.cvi-split .line { width: 70px; height: 3px; background: #cbd5e1; border-radius: 2px; }
.cvi-dl { border: 1px solid var(--cvi-line); border-radius: 12px; overflow: hidden; }
.cvi-dl-row { display: flex; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #f0f2f5; font-size: 13.5px; }
.cvi-dl-row:last-child { border-bottom: 0; }
.cvi-dl-row:nth-child(odd) { background: #fafbfd; }
.cvi-dl-k { flex: 0 0 42%; color: #64748b; font-weight: 600; }
.cvi-dl-k i { width: 16px; color: #94a3b8; font-size: 12px; text-align: center; }
.cvi-dl-v { flex: 1; min-width: 0; color: #1f2d3a; font-weight: 600; overflow-wrap: anywhere; }
.cvi-pill { display: inline-block; padding: 1px 10px; border-radius: 20px; background: #eef3f8; color: #35506a; font-size: 12px; text-transform: capitalize; }
.cvi-colordot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px; border: 1px solid rgba(0,0,0,.15); }
.cvi-foot:has(.cvi-cancel:only-child) { justify-content: flex-end; }
.cvi-modal .select2-container { margin-bottom: 12px; }
.cvi-modal .select2-container .select2-selection--single { height: 42px; border-radius: 10px; border-color: var(--cvi-line); background: #f8fafc; }
.cvi-modal .select2-container .select2-selection--single .select2-selection__rendered { line-height: 40px; padding-left: 14px; }
.cvi-modal .select2-container .select2-selection--single .select2-selection__arrow { height: 40px; right: 6px; }
@media (max-width: 575px) {
  .cvi-head { padding: 14px 16px 10px; } .cvi-seg { margin: 0 16px 4px; } .cvi-body { padding: 12px 16px 6px; }
  .cvi-tools { margin: -12px -16px 10px; padding: 12px 16px 8px; top: -12px; }
  .cvi-seg .cv-items-tab { font-size: 12.5px; padding: 8px 4px; gap: 5px; }
  .cvi-item { flex-wrap: wrap; } .cvi-item .cvi-stepper { margin-left: 34px; }
  .cvi-foot { padding: 12px 16px 16px; } .cvi-go { flex: 1; } .cvi-grid2 { grid-template-columns: 1fr; } .cvi-split .line { width: 46px; }
  .cv-items-msg { margin: 0 16px; }
}
.btn-inline-x {
  border: none; background: transparent; color: var(--text-muted); font-size: 16px;
  line-height: 1; cursor: pointer; padding: 0 2px;
}
.btn-inline-x:hover { color: #d9534f; }


/* Sidebar becomes a Bootstrap `.collapse` panel below the `lg`
   breakpoint (toggled by the hamburger button in the topbar); above
   it, Bootstrap's `.d-lg-block` utility keeps it permanently shown
   regardless of collapse state. When it's open on a small screen it
   should stack above the page content rather than squeeze beside it. */
@media (max-width: 991.98px) {
  .app-body { flex-direction: column; }
  .sidebar { width: 100%; }
  /* The icon-only collapse is a desktop feature (the toggle button
     itself is d-lg-only) — this guards against a stale "collapsed"
     preference saved on desktop still shrinking the stacked mobile
     sidebar after a resize down. */
  body.sidebar-collapsed .sidebar { width: 100%; }
}

@media (max-width: 800px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Billing List — bulk action toolbar, toggle switch, wide table
   ============================================================ */
.bulk-toolbar-card { padding: 15px; }
.bulk-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 15px;
}
.bulk-btn {
  background: rgba(20, 54, 82, .94);
  color: #fff;
  border: none;
  padding: 4.8px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}
.bulk-btn:hover { background: rgba(20, 54, 82, 1); color: #fff; }
/* v1.9.81: the portal's action buttons (.add-action-btn-bg.btn-topbar-color, measured live): a 1px dark border, and on hover a white
   button with navy text and a soft shadow, in 0.3 s. Classic only (Modern keeps its own); SMS / WhatsApp keep their colours. */
body:not(.ui-modern) .bulk-btn { border: 1px solid #000; transition: .3s; }
body:not(.ui-modern) .bulk-btn:not(.bulk-btn-sms):not(.bulk-btn-wa):not(.danger):not(.active-tab):hover {
  background: #fff; color: rgba(20, 54, 82, .94); border-color: rgba(20, 54, 82, .94);
  box-shadow: rgba(60, 64, 67, .3) 0 2px 3px 1px, rgba(60, 64, 67, .15) 0 4px 8px 0; position: relative; z-index: 1;
}
.bulk-btn.danger { background: var(--red); }
.bulk-btn.active-tab { background: var(--teal); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
select.bulk-btn { -webkit-appearance: none; appearance: none; }
.bulk-btn.dropdown-toggle::after { display: none; }

/* ============================================================
   Client List (clients/list.php) — matched to the reference's own saved
   HTML + live getComputedStyle (Phase 182). Scoped to this page only:
   Billing List / Left Client keep their own already-matched layouts.
   ============================================================ */
/* Its buttons each float:right in DOM order Sync … Generate Excel, so
   Sync sits far right and a wrap drops Pdf/Excel to a right-aligned
   second line — row-reverse + wrap reproduces that exactly. */
.client-list-actions {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
/* Phone width: the portal stacks them left-aligned in DOM order (Sync first). */
@media (max-width: 767px) {
  .client-list-actions { flex-direction: row; }
}
.client-list-actions .bulk-btn { font-size: 13px; padding: 6px 12px; }
.client-list-actions a.bulk-btn { display: inline-block; text-decoration: none; }
/* Its info-box cards: 84px tall, 60px icon column (40px icon), title
   ABOVE the number (15px / 14px), and a centered 26px footer strip. */
.client-list-stats { grid-template-columns: 1fr; gap: 22px 30px; }
/* Reference columns: col-lg-3 (>=1200) / col-md-4 (>=992) / col-sm-6 (>=768) / col-xs-12 */
@media (min-width: 768px) { .client-list-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .client-list-stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .client-list-stats { grid-template-columns: repeat(4, 1fr); } }
.client-list-stats .stat-card { height: 84px; }
.client-list-stats .stat-card .ico { flex: 0 0 60px; font-size: 40px; align-items: flex-start; line-height: 65px; }
.client-list-stats .stat-card > div:last-child { padding: 7px 10px 0; }
.client-list-stats .stat-card .label { margin: 4px 0 0; font-size: 15px; line-height: 21px; }
.client-list-stats .stat-card .num { font-size: 14px; line-height: 20px; }
.client-list-stats .stat-card .hint { text-align: center; padding: 3px; font-size: 11.9px; line-height: 20px; }
/* Its filter panel: 6 equal col-sm-2 columns per row. */
.form-grid-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .form-grid-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .form-grid-6 { grid-template-columns: 1fr; } }
#clientFilterPanel select:disabled { background-color: #eee; }
/* includes/list_pager.php's Show / Search bar (Client List, Left
   Client, Billing List) — inline controls like the reference's own. */
.list-pager .dataTables_length select { display: inline-block; width: auto; margin: 0 4px; }
.list-pager .dataTables_filter input { display: inline-block; width: auto; margin-left: 6px; }
.filter-info-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 11px;
  background: var(--ref-navy);
  color: #fff;
  margin-left: 3px;
  cursor: help;
}
.filter-toggle-btn { padding: 6px 12px; font-size: 13px; font-weight: 700; border-radius: 20px; line-height: 1.43; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); }
.filter-toggle-btn span { font-size: 14px; font-weight: 700; margin-left: 3px; }
.filter-toggle-btn i { font-size: 20px; font-weight: 900; vertical-align: middle; }
/* Its table: centered cells, 14px bold header, compact 2-3px padding. */
#clientListTable th, #clientListTable td { text-align: center; }
#clientListTable thead th { font-size: 14px; font-weight: 700; padding: 10px 3px; }
#clientListTable tbody td { padding: 10px 2px; }
#clientListTable tfoot th { text-align: center; }
#clientListTable .password-field {
  border: 0;
  background: transparent;
  width: 110px;
  text-align: center;
  padding: 0;
  outline: none;
}
#clientListTable .pw-eye { cursor: pointer; color: #3498db; margin-left: 2px; }
#clientListTable .cl-sync-icon { color: #0089ff; font-size: 16px; margin-right: 6px; text-decoration: none; }
#clientListTable .cl-status-dot { font-size: 16px; padding: 3px 4px; cursor: help; }
#clientListTable .cl-info-icon { font-size: 16px; color: inherit; text-decoration: none; }
#clientListTable .cl-mac-refresh,
#clientListTable .cl-mac-lock { color: #2ecc71; font-size: 15px; text-decoration: none; margin-left: 4px; }

.table-scroll { width: 100%; overflow-x: auto; }
.table-scroll table { min-width: 1400px; }

.toggle-switch {
  display: inline-block;
  width: 36px;
  height: 20px;
  border-radius: 20px;
  background: var(--red);
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}
.toggle-switch.on { background: #0d6efd; }
.toggle-switch .knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .15s;
}
.toggle-switch.on .knob { left: 18px; }

/* Client List's, Billing List's and Daily Bill Collection's own header
   styling (dark navy instead of this app's generic light one) —
   confirmed live via getComputedStyle against all three of their real
   equivalents on portal.umaxinternet.com (same rgba(20,54,82,.94)/
   white as .config-table's own header, just on tables that don't use
   that class). Scoped to each table's own id rather than folded into
   .config-table, since that class is deliberately NOT used on any of
   them (each keeps its own dedicated header/columns — see the
   .config-table note above) and carries other rules (centered/compact
   cells) none of them was ever meant to inherit. */
#billingListTable thead th,
#dailyCollectionTable thead th,
#clientListTable thead th,
#leftClientsTable thead th,
#crTable thead th,
#registeredClientsTable thead th,
#mikrotikServersTable thead th {
  background: rgba(20, 54, 82, .94);
  color: #fff;
}
.bstatus-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  justify-content: center;
}

/* Client List's per-row Action icon strip: Action is the table's last
   column, so the strip pops out to the LEFT of the "⋮" toggle (anchored
   by `right`, no `left`, so it grows leftward over already-visible
   columns) instead of flowing right off the edge of the table. */
.action-bar-cell { position: relative; }
.action-bar-toggle {
  font-size: 18px;
  line-height: 1;
  padding: 2px 8px;
  border-color: transparent;
  background: transparent;
}
.action-bar-toggle:hover, .action-bar-toggle:focus {
  background: var(--bg);
  border-color: transparent;
}
.action-icon-row {
  position: absolute;
  top: 50%;
  right: 34px;
  transform: translateY(-50%);
  align-items: center;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  z-index: 30;
  white-space: nowrap;
}

/* ============================================================
   Client form — sectioned layout (Personal / Contact / Network / Service)
   ============================================================ */
.form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
}
/* Reference's real section header bar — confirmed live via
   getComputedStyle on Add Client's "Personal Information" bar:
   #21415b (a 3rd distinct navy, not --sidebar/var(--ref-navy)/.btn-ref-navy),
   8px/25px padding, and top-only 20px rounding (its own border-radius,
   not inherited from .form-section's 10px corner-clip). Its "hint"
   sub-line is plain white/weight-300, not this app's old dimmed
   #9db0bd — same white, just lighter weight than the bold title. */
.form-section-head {
  background: #21415b;
  color: #fff;
  padding: 8px 25px;
  border-radius: 20px 20px 0 0;
}
.form-section-head h2 { margin: 0; font-size: 14px; font-weight: 700; }
.form-section-head .hint { font-size: 14px; font-weight: 300; color: #fff; margin-top: 2px; }
.form-section-body { padding: 18px; }

.mini-add-btn {
  display: inline-block;
  background: var(--sidebar);
  color: #fff;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
}
.mini-add-btn:hover { background: var(--sidebar-hover); color: #fff; }
/* "+ Sub Zone" / "+ Box" before their parent is picked (Phase 243). */
.mini-add-btn.disabled { opacity: .45; cursor: not-allowed; }

/* Reference's real photo-upload circle — confirmed live via
   getComputedStyle on all 3 of Add Client's own (Profile/NID/
   Registration Form, identical on each): 192px, 6px solid #f8f8f8
   border (not this app's old 100px dashed-border), plus a separate
   navy (var(--ref-navy)) circular pencil-edit badge overlaid bottom-right. */
.upload-circle {
  width: 192px; height: 192px;
  border-radius: 50%;
  border: 6px solid #f8f8f8;
  background: var(--bg) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  font-size: 48px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.upload-circle input[type=file] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
/* Real default placeholder images (user-supplied, matching the
   reference's own default.png/nid-card.png/regi-form.png) shown until
   a real photo is uploaded — replaces the earlier FontAwesome-icon
   stand-in. A real uploaded photo's inline background-image (set
   server-side in edit.php, or client-side on file select) overrides
   these via normal cascade since it's a more specific inline style. */
.upload-circle-profile { background-image: url('../images/profile-placeholder.svg'); }
.upload-circle-nid { background-image: url('../images/nid-placeholder.svg'); }
.upload-circle-registration { background-image: url('../images/registration-form-placeholder.svg'); }
.upload-circle-wrap { position: relative; display: inline-block; }
.upload-circle-edit {
  position: absolute; right: 4px; bottom: 4px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ref-navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
  pointer-events: none;
}

/* ============================================================
   Date fields — bootstrap-datepicker (see assets/js/script.js's
   auto-conversion of every native <input type="date">). The wrapper
   just gives the calendar icon a positioning context; the icon itself
   is decorative since the whole field already opens the picker.
   ============================================================ */
.date-field-wrap { position: relative; }
.date-field-wrap .datepicker-field { padding-right: 34px; cursor: pointer; background: var(--surface); }
.date-field-wrap .date-field-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: 14px;
}

/* Bootstrap-datepicker's own CSS predates this app's palette (and
   Bootstrap 5), so it ships hardcoded blues — retint it to the app's
   real accent (teal) instead of leaving a mismatched foreign blue
   sitting in the middle of an otherwise teal-themed app. */
.datepicker.dropdown-menu {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(20, 35, 46, .16);
  padding: 8px;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover {
  background: #fff3e0 !important;
  background-image: none !important;
  color: var(--text) !important;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
  background: var(--teal) !important;
  background-image: none !important;
  border-color: var(--teal) !important;
  color: #fff !important;
  text-shadow: none !important;
}
.datepicker table tr td.day:hover,
.datepicker table tr td.focused,
.datepicker table tr td span:hover {
  background: var(--bg) !important;
  cursor: pointer;
}
.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next {
  font-weight: 700;
  color: var(--text);
}
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover {
  background: var(--bg) !important;
}

/* ---- Inventory category tree (Item Category list + Select Parent Category
   modal) — mirrors the reference's .product-category-tree / .tree CSS. ---- */
/* White like the reference — also what .tree li:last-child::before masks with. */
.card.inventory-tree-card, .modal-content.inventory-tree-card { background: #fff; }
.product-category-tree-section { padding: 30px; }
.product-category-tree { border: 1px solid #333; padding: 30px; color: #333; }
.product-category-tree .tree-head { border-bottom: 1px solid #333; padding-bottom: 12px; }
.product-category-tree .tree-head b { font-size: 14px; }
.tree { background: #fff; font-size: 16px; }
.tree, .tree ul { margin: 0 0 0 1em; padding: 0; list-style: none; position: relative; }
.tree ul { margin-left: .5em; }
.tree::before, .tree ul::before {
  content: ""; display: block; width: 0; position: absolute; top: 0; bottom: 0; left: 0; border-left: 1px solid;
}
.tree li {
  padding: 0 1.5em; line-height: 1.25em; position: relative; margin-top: 2rem;
  cursor: pointer; font-weight: bold;
}
.tree li span { font-weight: normal; }
.tree li span:hover { background-color: rgba(246, 246, 246, .7); }
.tree li::before {
  content: ""; display: block; width: 10px; height: 0; border-top: 1px solid; margin-top: -1px;
  position: absolute; top: .8em; left: 0;
}
.tree li:last-child::before { background: #fff; height: auto; top: .8em; bottom: 0; }
/* The reference marks a node that has children with a small arrow image. */
.tree li.contains-items > .tree-arrow {
  position: absolute; left: 11px; top: .15em; font-size: 11px; font-weight: 900;
  transition: transform .15s;
}
.tree li.contains-items.items-expanded > .tree-arrow { transform: rotate(90deg); }
.tree .badge {
  font-size: 12px; font-weight: 700; padding: 3px 4.8px; border-radius: .25rem;
  line-height: 1; vertical-align: baseline; text-decoration: none; cursor: pointer;
}
.tree .badge-info { color: #fff; background-color: #17a2b8; }
.tree .badge-danger { color: #fff; background-color: #dc3545; }
.tree .matching-string { background-color: #229ac5; }
.category-parent-select { background-color: #e9edf0 !important; pointer-events: none; }
.category-parent-pick { cursor: pointer; }

/* ---- Chart of Accounts (Phase 203) — the reference's type tabs
   (.custom-tab-btn / .custom-selected-tab-btn) and per-section tables
   (.tr-cus-design-tbl-hdr), values read via getComputedStyle. ---- */
.coa-tabs { display: flex; list-style: none; padding: 0; margin: 0 0 16px; }
.coa-tabs li { width: 20%; }
.coa-tab { width: 95%; margin-top: 10px; padding: 8px; border: 2px solid var(--ref-navy); border-radius: 25px; background: #fff; color: var(--ref-navy); font-size: 15px; font-weight: 700; text-align: center; cursor: pointer; }
.coa-tab:hover, .coa-tab.active { background: var(--ref-navy); color: #fff; }
.coa-table { border-collapse: separate; border-spacing: 0; margin-bottom: 20px; }
.coa-table thead th { background: rgba(20, 54, 82, .94); color: #fff; font-size: 14px; font-weight: 700; padding: 6px 6px 6px 12px; border-radius: 15px; border: 0; text-transform: none; letter-spacing: normal; }
.coa-table thead th .coa-section-name { display: inline-block; margin: 6px 6px 6px 0; }
.coa-add-btn { float: right; background: rgba(52, 85, 110, .94); color: #fff; border: 0; border-radius: 20px; padding: 6px 12px; font-size: 13px; font-weight: 700; }
.coa-add-btn:hover { background: #fff; color: var(--ref-navy); }
.coa-table tbody td { padding: 10px; border-bottom: 1px solid #eee; font-size: 14px; color: #333; vertical-align: middle; }
.coa-table tbody td:nth-child(1) { width: 10%; }
.coa-table tbody td:nth-child(2) { width: 60%; }
.coa-table tbody td:nth-child(3) { width: 20%; }
.coa-table tbody td:nth-child(4) { width: 10%; }
.coa-desc { cursor: pointer; }
.coa-edit, .coa-delete { color: var(--ref-navy); margin-right: 8px; }
.coa-delete { color: #dc3545; }
.coa-inactive { margin-left: 6px; font-size: 11px; font-weight: 700; color: #fff; background: #8c837a; border-radius: 3px; padding: 1px 5px; }
@media (max-width: 700px) {
  .coa-tabs { flex-wrap: wrap; }
  .coa-tabs li { width: 50%; }
  .coa-tab { font-size: 13px; }
  .coa-add-btn { float: none; display: block; margin-top: 4px; }
}

/* ---- Item Tree / Add Item / Item Details (Phase 201) — values read via
   getComputedStyle on the reference's /item/index, /Item/add, /Item/Details. ---- */
.tree .badge-details { color: #fff; background-color: #8c837a; }
/* "Select Category" picker checkboxes (the reference's .containerCheckBoxMini). */
.containerCheckBoxMini { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 0 0 6px; cursor: pointer; vertical-align: middle; user-select: none; }
.containerCheckBoxMini input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkmarkMini { position: absolute; top: 0; left: 0; width: 20px; height: 20px; background-color: #eee; }
.containerCheckBoxMini:hover input ~ .checkmarkMini { background-color: #ccc; }
.containerCheckBoxMini input:checked ~ .checkmarkMini { background-color: #2196f3; }
.checkmarkMini::after { content: ""; position: absolute; display: none; left: 7px; top: 3px; width: 7px; height: 12px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.containerCheckBoxMini input:checked ~ .checkmarkMini::after { display: block; }
.item-select-category-btn { color: #fff; background-color: #17a2b8; font-size: 12px; text-decoration: none; margin-top: 18px; }
.item-select-category-btn:hover { color: #fff; opacity: .9; }
/* Product / Service pair (.kt-checkbox: 18px box, #6f7278 border). */
.item-type-check { position: relative; display: inline-block; padding: 4px 0 0 30px; margin: 4px 0 10px; font-size: 12px; color: var(--label); cursor: pointer; }
.item-type-check input { position: absolute; opacity: 0; }
.item-type-check > span { position: absolute; top: 3px; left: 0; width: 18px; height: 18px; border: 1px solid #6f7278; border-radius: 3px; }
.item-type-check > input:checked ~ span::after { content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px; border: solid var(--label); border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Image box: 350px wide, a 230px preview in a 6px #f8f8f8 frame, with the
   pencil (upload) and red x (remove) circles on its top right. */
.item-avatar-upload { position: relative; max-width: 350px; margin: 20px auto; }
.item-avatar-edit { position: absolute; right: 22px; top: 12px; z-index: 1; }
.item-avatar-edit input { display: none; }
.item-avatar-edit label { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; border-radius: 100%; background: #fff; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12); color: #757575; font-size: 12px; cursor: pointer; }
.item-avatar-remove { position: absolute; right: 23px; top: 58px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 30px; background: #fb4721; color: #fff; text-decoration: none; }
.item-avatar-remove:hover { color: #fff; opacity: .9; }
.item-avatar-preview { height: 230px; border: 6px solid #f8f8f8; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1); }
.item-avatar-preview > div { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: center / contain no-repeat; }
.item-avatar-placeholder { font-size: 110px; color: #c8c8c8; }
/* Item Details: the reference's profile-accordian-btn bar over a bordered table. */
.item-info-bar { background: rgba(20, 54, 82, .94); color: #fff; font-size: 13px; padding: 8px 15px; border-radius: 2px; }
.card.item-info-card { border-top-left-radius: 0; border-top-right-radius: 0; padding: 12px; background: #fff; }
.item-info-table td { padding: 10px 8px; font-size: 14px; color: #333; width: 50%; }
/* The reference's col-sm-5 / col-sm-1 / col-sm-6 label : value split. */
.item-info-row { display: grid; grid-template-columns: 5fr minmax(12px, 1fr) 6fr; column-gap: 6px; overflow-wrap: anywhere; }
.card.item-details-picture { height: 250px; display: flex; align-items: center; justify-content: center; background: #fff; }
.item-details-picture img { max-width: 200px; max-height: 220px; }
.item-details-placeholder { font-size: 120px; color: #d5d5d5; }
/* ---- Client Scheduler (Phase 212) — the reference's activity badges
   (.act-*-status: 16px bold, 3px 10px, 25px radius), read via
   getComputedStyle, and its 5-across filter row. ---- */
.act-req-status, .act-com-status, .act-can-status, .act-app-status, .act-fail-status {
  display: inline-block; color: #fff; font-size: 16px; font-weight: 700; padding: 3px 10px; border-radius: 25px; white-space: nowrap;
}
.act-req-status { background: #ff8c00; }
.act-com-status { background: #008000; }
.act-can-status { background: #ff4500; }
.act-app-status { background: #3cb371; }
.act-fail-status { background: #ff0000; }
/* A tick-box line inside a form: plain sentence, not the small uppercase field label */
label.lbl-plain, .modal label.lbl-plain, .card label.lbl-plain { display: block; text-transform: none; font-size: 13px; font-weight: 400; color: #333; letter-spacing: 0; }
label.lbl-plain input { margin-right: 6px; }
/* English / Bangla switch inside an explainer popup (Change Request > What happens after approval?) */
.lm-langs { display: flex; gap: 8px; margin-bottom: 12px; }
.lm-lang { height: 30px; padding: 0 16px; border: 1px solid #143652; border-radius: 15px; background: #fff; color: #143652; font-size: 13px; font-weight: 700; cursor: pointer; }
.lm-lang.active { background: #143652; color: #fff; }
.lm-text li { margin-bottom: 8px; line-height: 1.6; }
/* Change Request filters: the six boxes in one row as on the reference (col-sm-2 each, 34px fields) */
.cr-filter-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 15px; }
/* col-sm-2 on the reference: six boxes in one row from 768px up */
@media (max-width: 767px) { .cr-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .cr-filter-grid { grid-template-columns: 1fr; } }
.cr-learn-switch { font-weight: 700; font-size: 15px; color: #000; margin: 0 0 8px; display: flex; align-items: center; gap: 10px; padding-left: 0; }
.cr-learn-switch .form-check-input { float: none; margin: 0; order: 2; width: 2.4em; height: 1.2em; }
.cr-learn-box { font-size: 14px; line-height: 1.5; color: #333; margin-bottom: 10px; }
/* The four buttons float right on the reference, so the DOM order CSV, PDF, Approve, Cancel reads Cancel … CSV. */
.cr-toolbar { display: flex; flex-direction: row-reverse; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.cr-toolbar .bulk-btn { font-size: 14px; padding: 7px 14px; text-decoration: none; display: inline-block; }
.sched-toolbar .btn { font-size: 14px; }
/* The customer-name link on the reference's Scheduler / Change Request lists is Bootstrap-3 link blue. */
#schedTable tbody td a:not(.btn), #crTable tbody td a:not(.btn) { color: #337ab7; }
#crTable input[type=checkbox] { appearance: auto; -webkit-appearance: checkbox; width: 13px; height: 13px; margin: 3px 3px 3px 4px; background: none; border: 0; accent-color: #0075ff; cursor: pointer; }
.sched-filter-grid { grid-template-columns: repeat(5, 1fr); }
/* the reference's five boxes stay in one row from 768px up */
@media (max-width: 767px) { .sched-filter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .sched-filter-grid { grid-template-columns: 1fr; } }
.sched-client-info { font-size: 16px; padding: 3px 4px; color: var(--sidebar); }
tr.sched-row-picked > td { background: #fff3cd; }
.sched-conn-status { font-weight: 700; text-align: center; }
.sched-conn-status.is-online { background: #008000; color: #fff; }
.sched-conn-status.is-offline { background: #ff0000; color: #fff; }
.sched-conn-status.is-unknown { background: #e9edf0; }

/* VIP Client medal over the ID/IP (Client List / Billing List, Phase 214),
   the reference's fa-medal at 20px #f58902. */
.vip-medal { font-size: 20px; color: #f58902; }
/* POP List: an archived POP's row is dimmed (Phase 217). */
tr.pop-archived-row > td { opacity: .6; }
/* Billing List's inline Edit Customer Name / Mobile Number pencil (Phase 215). */
.inline-edit-icon { cursor: pointer; margin-left: 5px; color: var(--ref-navy); font-size: 12px; }

/* Left Client's Recovered / Non-Recovered pills (Phase 213) — the
   reference's .spn-cus-responsibility-* (5px 10px, 25px radius, 14px). */
.spn-recovered, .spn-non-recovered { display: inline-block; color: #fff; font-size: 14px; padding: 5px 10px; border-radius: 25px; cursor: pointer; margin-top: 3px; white-space: nowrap; }
.spn-recovered { background: #398439; }
.spn-non-recovered { background: #ac2925; }

/* Invoice Details (Sales & Service, Phase 211) uses the same bar + table;
   the reference stripes its odd rows #e9edf0 and bolds the labels. */
.sales-info-table tr:nth-child(odd) > td { background: #e9edf0; }
.sales-info-table .item-info-row > div:first-child { font-weight: 700; }
.item-info-bar + .card.item-info-card { margin-bottom: 18px; }

/* ---- Accounting Dashboard cards — the reference's .card.dc, read via
   getComputedStyle: 45° gradients cycling blue / teal / purple (its own
   class names say blue/orange/green, but those are the real colors),
   5px radius, a month figure on the left and the filtered one right. ---- */
.acct-dc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 20px; }
@media (max-width: 900px) { .acct-dc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .acct-dc-grid { grid-template-columns: 1fr; } }
.acct-dc {
  display: block; color: #fff; text-decoration: none; border-radius: 5px; padding: 5px 10px 8px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .08); transition: transform .15s;
}
.acct-dc:hover { color: #fff; transform: scale(1.02); }
.acct-dc.dc-blue { background-image: linear-gradient(45deg, #0288d1 0%, #26c6da 100%); }
.acct-dc.dc-teal { background-image: linear-gradient(45deg, #2cb8b8 0%, #2ebaba 100%); }
.acct-dc.dc-purple { background-image: linear-gradient(45deg, #825bec 0%, #898cc6 100%); }
.acct-dc .dc-title { font-size: 12px; font-weight: 700; margin: 0 0 5px; }
.acct-dc .dc-amount { font-size: 14px; font-weight: 700; margin: 0; }
.acct-dc .dc-short-title { font-size: 10px; }

/* ---- All Report — the reference's .accordion-card, read via
   getComputedStyle: 12px radius, soft shadow, #21415b header (16px,
   15px 20px), white link rows (14px #555, 12px 20px, #ddd rule). ---- */
.report-accordion-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, .1); overflow: hidden; }
.report-accordion-header {
  background: #21415b; color: #fff; font-size: 16px; padding: 15px 20px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
}
.report-accordion-header .report-accordion-icon { transition: transform .2s; }
.report-accordion-header.collapsed .report-accordion-icon { transform: rotate(180deg); }
.report-accordion-card .list-group-item { font-size: 14px; color: #555; padding: 12px 20px; border-color: #ddd; }

/* Send SMS's section headings ("Template:", "Groups", "Users") — the
   reference sets these inline at 20px / 600. */
.send-sms-heading { font-size: 20px; font-weight: 600; margin-bottom: 6px; }

/* ---- Accounting reports' "Generate PDF" (the browser's print dialog):
   print only the report — no sidebar, top bar, filters or buttons. ---- */
@media print {
  .topbar, .sidebar, .no-print, .acct-report-filters { display: none !important; }
  .app-body, main.content { display: block !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
  .card { border: 0 !important; box-shadow: none !important; background: #fff !important; }
}

/* ---- Daily Account Closing — the reference's Bill / Service Income /
   Expense boxes and Cash on Hand row, read via getComputedStyle. ---- */
.daily-closing-item h3 { font-size: 22px; font-weight: 700; color: #333; margin: 10px; }
.daily-closing-table { width: 100%; margin-bottom: 0; background: #fff; }
.daily-closing-table td, .daily-closing-table th { text-align: center; font-size: 14px; padding: 10px 3px; }
.daily-closing-table th { background: rgba(20, 54, 82, 0.94); color: #fff; font-weight: 700; }

/* ============================================================
   Utilities (Phase 265 CSS cleanup) — the inline style="" values
   repeated across pages, as classes. !important like Bootstrap's own
   utilities, so they win the way the inline styles they replace did.
   (fw-normal / fw-semibold / fw-bold / m-0 are Bootstrap's.)
   ============================================================ */
.modal-rounded { border-radius: var(--radius) !important; overflow: hidden !important; }
.bg-navy-header { background: var(--sidebar) !important; color: #fff !important; }
.bg-ref-navy { background: var(--ref-navy) !important; color: #fff !important; }
.section-title { margin-top: 0 !important; font-size: 15px !important; }
.bg-readonly { background: #e9edf0 !important; }
.cursor-pointer { cursor: pointer !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.pre-line { white-space: pre-line !important; }
.btn-filter-clear { background: #c9302c !important; color: #fff !important; }
.btn-filter-apply { background: #5bc0de !important; color: #fff !important; }

/* ============================================================
   Page-specific (moved out of the pages' own <style> blocks, Phase 265)
   ============================================================ */
/* Report › BTRC: N.B notice icon, blinking notice, "Sync Clients & Servers" banner */
.btrc-nb-icon { display: inline-block; width: 20px; height: 20px; line-height: 18px; text-align: center; border-radius: 50%; background: var(--ref-navy); border: 1px solid var(--ref-navy); color: #fff; font-size: 11px; }
.btrc-blink { animation: btrcBlink 1.6s steps(1) infinite; }
@keyframes btrcBlink { 0% { color: blue; } 50% { color: red; } }
#btrcSyncBanner { position: fixed; top: 90px; left: 50%; transform: translateX(-50%); width: min(620px, 92vw); z-index: 2000; padding: 10px 14px; border-radius: 10px;
  background: #143652f0; color: #fff; opacity: .9; font-size: 16px; font-weight: 700; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
/* Report › Customer Report: remaining-days badge */
.rdays { display: inline-block; min-width: 28px; padding: 1px 6px; border-radius: 10px; font-weight: 700; color: #fff; }
.rdays-red { background: #dc3545; } .rdays-yellow { background: #f0ad4e; } .rdays-green { background: #28a745; }
/* HR › Attendance: the month grid */
.att-grid th, .att-grid td { padding: 3px 4px; font-size: 12px; min-width: 22px; }

/* Utilities, batch 2 (Phase 265). Bootstrap's text-end / text-center / opacity-50 / d-flex / gap-2 cover the rest. */
.mb-12 { margin-bottom: 12px !important; }
.mb-16 { margin-bottom: 16px !important; }
.mt-6 { margin-top: 6px !important; }
.mt-16 { margin-top: 16px !important; }
.ps-40 { padding-left: 40px !important; }
.fs-10 { font-size: 10px !important; }
.fs-15 { font-size: 15px !important; }
.fs-18 { font-size: 18px !important; }
.cursor-default { cursor: default !important; }
.rounded-10 { border-radius: 10px !important; }
.border-top-soft { border-top: 1px solid var(--border) !important; }
.grid-full { grid-column: 1 / -1 !important; }
.grid-row-2 { grid-row: span 2 !important; }
.check-20 { width: 20px !important; height: 20px !important; }
.textarea-address { height: 100px !important; resize: none !important; line-height: 25px !important; }

/* ============================================================
   Generated single-purpose utilities (u-*) — Phase 265 part 3.
   One declaration each, named u-<property>-<value>; they replace the
   one-off inline style="" attributes. Prefer an existing utility or a
   named component class before adding another.
   ============================================================ */
.u-ai-end { align-items: end !important; }
.u-b-0 { border: 0 !important; }
.u-b-1px-solid-border { border: 1px solid var(--border) !important; }
.u-b-1px-solid-ddd { border: 1px solid #ddd !important; }
.u-b-none { border: none !important; }
.u-bb-1px-solid { border-bottom: 1px solid !important; }
.u-bb-1px-solid-border { border-bottom: 1px solid var(--border) !important; }
.u-bg-00b0e4 { background: #00b0e4 !important; }
.u-bg-0f172a { background: #0f172a !important; }
.u-bg-17a2b8 { background: #17a2b8 !important; }
.u-bg-188fe9 { background: #188fe9 !important; }
.u-bg-28a745 { background: #28a745 !important; }
.u-bg-298f2a { background: #298f2a !important; }
.u-bg-6c757d { background: #6c757d !important; }
.u-bg-6f42c1 { background: #6f42c1 !important; }
.u-bg-808080 { background: #808080 !important; }
.u-bg-e9edf0 { background: #e9edf0 !important; }
.u-bg-eef1f4 { background: #eef1f4 !important; }
.u-bg-eef4fa { background: #eef4fa !important; }
.u-bg-f6f8fa { background: #f6f8fa !important; }
.u-bg-f9f9f9 { background: #f9f9f9 !important; }
.u-bg-ffa847 { background: #ffa847 !important; }
.u-bg-linear-gradient-45deg-0288d1-26c6da { background: linear-gradient(45deg,#0288d1,#26c6da) !important; }
.u-bg-linear-gradient-45deg-0f8b8d-14a3a5 { background: linear-gradient(45deg,#0f8b8d,#14a3a5) !important; }
.u-bg-linear-gradient-45deg-2cb8b8-2ebaba { background: linear-gradient(45deg,#2cb8b8,#2ebaba) !important; }
.u-bg-linear-gradient-45deg-555e65-585f65 { background: linear-gradient(45deg,#555e65,#585f65) !important; }
.u-bg-linear-gradient-45deg-825bec-898cc6 { background: linear-gradient(45deg,#825bec,#898cc6) !important; }
.u-border-top-left-radius-0 { border-top-left-radius: 0 !important; }
.u-bt-2px-solid-border { border-top: 2px solid var(--border) !important; }
.u-c-007bff { color: #007bff !important; }
.u-c-00b0e4 { color: #00b0e4 !important; }
.u-c-0d8ccd { color: #0d8ccd !important; }
.u-c-17a2b7 { color: #17a2b7 !important; }
.u-c-198754 { color: #198754 !important; }
.u-c-1f91f3 { color: #1f91f3 !important; }
.u-c-21415b { color: #21415b !important; }
.u-c-22425c { color: #22425c !important; }
.u-c-27a844 { color: #27a844 !important; }
.u-c-298f2a { color: #298f2a !important; }
.u-c-46bb47 { color: #46BB47 !important; }
.u-c-4caf50 { color: #4caf50 !important; }
.u-c-666 { color: #666 !important; }
.u-c-9aa5b1 { color: #9aa5b1 !important; }
.u-c-amber { color: var(--amber) !important; }
.u-c-blue { color: var(--blue) !important; }
.u-c-dc3545 { color: #dc3545 !important; }
.u-c-e2e8f0 { color: #e2e8f0 !important; }
.u-c-f58902 { color: #f58902 !important; }
.u-c-fb483a { color: #fb483a !important; }
.u-c-fb7907 { color: #fb7907 !important; }
.u-c-fec107 { color: #fec107 !important; }
.u-c-ff9800 { color: #ff9800 !important; }
.u-c-fff { color: #fff !important; }
.u-c-green { color: green !important; }
.u-c-red { color: red !important; }
.u-c-sidebar { color: var(--sidebar) !important; }
.u-c-slate { color: var(--slate) !important; }
.u-c-text-muted { color: var(--text-muted) !important; }
.u-cur-default { cursor: default !important; }
.u-cur-pointer { cursor: pointer !important; }
.u-fs-12px { font-size: 12px !important; }
.u-fs-13px { font-size: 13px !important; }
.u-fs-15px { font-size: 15px !important; }
.u-fs-16px { font-size: 16px !important; }
.u-fs-18px { font-size: 18px !important; }
.u-fs-20px { font-size: 20px !important; }
.u-fs-28px { font-size: 28px !important; }
.u-fst-italic { font-style: italic !important; }
.u-fw-400 { font-weight: 400 !important; }
.u-fw-600 { font-weight: 600 !important; }
.u-fw-700 { font-weight: 700 !important; }
.u-fw-normal { font-weight: normal !important; }
.u-gap-6px { gap: 6px !important; }
.u-grid-column-1-span-2 { grid-column: 1 / span 2 !important; }
.u-grid-column-span-2 { grid-column: span 2 !important; }
.u-gtc-1fr { grid-template-columns: 1fr !important; }
.u-gtc-auto-auto { grid-template-columns: auto auto !important; }
.u-gtc-repeat-auto-fill-minmax-160px-1fr { grid-template-columns: repeat(auto-fill,minmax(160px,1fr)) !important; }
.u-h-150px { height: 150px !important; }
.u-wh-24 { width: 24px !important; height: 24px !important; }
.u-h-28px { height: 28px !important; }
.u-h-32px { height: 32px !important; }
.u-h-40px { height: 40px !important; }
.u-h-75px { height: 75px !important; }
.u-jc-flex-end { justify-content: flex-end !important; }
.u-jc-space-between { justify-content: space-between !important; }
.u-lh-1 { line-height: 1 !important; }
.u-lh-25px { line-height: 25px !important; }
.u-m-0 { margin: 0 !important; }
.u-m-0-0-10px { margin: 0 0 10px !important; }
.u-m-0-0-12px { margin: 0 0 12px !important; }
.u-m-0-0-4px { margin: 0 0 4px !important; }
.u-m-12px-0-0 { margin: 12px 0 0 !important; }
.u-m-14px-0-8px { margin: 14px 0 8px !important; }
.u-m-16px-0-8px { margin: 16px 0 8px !important; }
.u-m-22px-0-0 { margin: 22px 0 0 !important; }
.u-m-22px-0-10px { margin: 22px 0 10px !important; }
.u-m-4px-4px-0-0 { margin: 4px 4px 0 0 !important; }
.u-m-8px-0-0 { margin: 8px 0 0 !important; }
.u-maxh-180px { max-height: 180px !important; }
.u-maxh-320px { max-height: 320px !important; }
.u-maxh-340px { max-height: 340px !important; }
.u-maxh-40vh { max-height: 40vh !important; }
.u-maxh-420px { max-height: 420px !important; }
.u-maxh-45vh { max-height: 45vh !important; }
.u-maxh-55vh { max-height: 55vh !important; }
.u-maxh-70vh { max-height: 70vh !important; }
.u-maxh-80vh { max-height: 80vh !important; }
.u-maxh-90px { max-height: 90px !important; }
.u-maxw-100px { max-width: 100px !important; }
.u-maxw-110px { max-width: 110px !important; }
.u-maxw-120px { max-width: 120px !important; }
.u-maxw-130px { max-width: 130px !important; }
.u-maxw-160px { max-width: 160px !important; }
.u-maxw-220px { max-width: 220px !important; }
.u-maxw-240px { max-width: 240px !important; }
.u-maxw-260px { max-width: 260px !important; }
.u-maxw-320px { max-width: 320px !important; }
.u-maxw-360px { max-width: 360px !important; }
.u-maxw-480px { max-width: 480px !important; }
.u-maxw-500px { max-width: 500px !important; }
.u-maxw-520px { max-width: 520px !important; }
.u-maxw-560px { max-width: 560px !important; }
.u-maxw-640px { max-width: 640px !important; }
.u-maxw-700px { max-width: 700px !important; }
.u-maxw-760px { max-width: 760px !important; }
.u-maxw-820px { max-width: 820px !important; }
.u-mb-10px { margin-bottom: 10px !important; }
.u-mb-16px { margin-bottom: 16px !important; }
.u-mb-26px { margin-bottom: 26px !important; }
.u-minh-38px { min-height: 38px !important; }
.u-minh-60px { min-height: 60px !important; }
.u-minw-120px { min-width: 120px !important; }
.u-minw-130px { min-width: 130px !important; }
.u-minw-160px { min-width: 160px !important; }
.u-minw-170px { min-width: 170px !important; }
.u-minw-180px { min-width: 180px !important; }
.u-minw-200px { min-width: 200px !important; }
.u-minw-210px { min-width: 210px !important; }
.u-minw-220px { min-width: 220px !important; }
.u-ml-4px { margin-left: 4px !important; }
.u-ml-5px { margin-left: 5px !important; }
.u-ml-auto { margin-left: auto !important; }
.u-mr-10px { margin-right: 10px !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-12px { margin-top: 12px !important; }
.u-mt-24px { margin-top: 24px !important; }
.u-mt-2px { margin-top: 2px !important; }
.u-mt-6px { margin-top: 6px !important; }
.u-mt-8px { margin-top: 8px !important; }
.u-of-cover { object-fit: cover !important; }
.u-op-d55 { opacity: .55 !important; }
.u-ov-hidden { overflow: hidden !important; }
.u-ovy-auto { overflow-y: auto !important; }
.u-p-0 { padding: 0 !important; }
.u-p-0-20px-20px { padding: 0 20px 20px !important; }
.u-p-10px-12px { padding: 10px 12px !important; }
.u-p-16px { padding: 16px !important; }
.u-p-2px { padding: 2px !important; }
.u-p-30px { padding: 30px !important; }
.u-p-6px { padding: 6px !important; }
.u-p-8px { padding: 8px !important; }
.u-pe-none { pointer-events: none !important; }
.u-pl-18px { padding-left: 18px !important; }
.u-r-15px { border-radius: 15px !important; }
.u-r-4px { border-radius: 4px !important; }
.u-r-6px { border-radius: 6px !important; }
.u-r-8px { border-radius: 8px !important; }
.u-right-15px { right: 15px !important; }
.u-rs-none { resize: none !important; }
.u-ta-center { text-align: center !important; }
.u-tt-none { text-transform: none !important; }
.u-w-100px { width: 100px !important; }
.u-w-10pct { width: 10% !important; }
.u-w-110px { width: 110px !important; }
.u-w-120px { width: 120px !important; }
.u-w-130px { width: 130px !important; }
.u-w-140px { width: 140px !important; }
.u-w-150px { width: 150px !important; }
.u-w-180px { width: 180px !important; }
.u-w-200px { width: 200px !important; }
.u-w-32px { width: 32px !important; }
.u-w-48px { width: 48px !important; }
.u-w-60px { width: 60px !important; }
.u-w-70px { width: 70px !important; }
.u-w-75px { width: 75px !important; }
.u-w-80px { width: 80px !important; }
.u-w-90px { width: 90px !important; }
.u-w-95px { width: 95px !important; }
.u-ws-normal { white-space: normal !important; }
.u-ws-pre-wrap { white-space: pre-wrap !important; }
/* HR › Salary: the print view shows only the salary sheet (header.php gives every page body.page-<folder>-<file>). */
body.page-hr-salary .print-only { display: none; }
@media print {
  body.page-hr-salary .no-print, body.page-hr-salary .page-head .btn, body.page-hr-salary .stat-grid { display: none !important; }
  body.page-hr-salary .print-only { display: block; }
}
/* Generated single-purpose utilities, last pass (Phase 265 part 5). */
.u-ai-center { align-items: center !important; }
.u-bg-eef1f5 { background: #eef1f5 !important; }
.u-d-flex { display: flex !important; }
.u-d-inline { display: inline !important; }
.u-flex-0-0-100pct { flex: 0 0 100% !important; }
.u-fs-11px { font-size: 11px !important; }
.u-fs-14px { font-size: 14px !important; }
.u-fwr-wrap { flex-wrap: wrap !important; }
.u-gap-10px { gap: 10px !important; }
.u-gap-8px { gap: 8px !important; }
.u-h-640px { height: 640px !important; }
.u-ml-6px { margin-left: 6px !important; }
.u-mt-10px { margin-top: 10px !important; }
.u-ov-auto { overflow: auto !important; }
.u-w-100pct { width: 100% !important; }
.u-w-170px { width: 170px !important; }
.u-w-190px { width: 190px !important; }
.u-w-420px { width: 420px !important; }
.u-w-90pct { width: 90% !important; }
.u-w-auto { width: auto !important; }
.u-ww-break-word { word-wrap: break-word !important; }
.u-minw-260px { min-width: 260px !important; }
/* Fixed-palette colours used by computed classes (voucher status, attendance, import badges …). */
.u-bg-fb7907 { background: #fb7907 !important; }
.u-bg-dc3545 { background: #dc3545 !important; }
.u-bg-darkorange { background: darkorange !important; }
.u-bg-198754 { background: #198754 !important; }
.u-bg-fd7e14 { background: #fd7e14 !important; }
.u-bg-0d6efd { background: #0d6efd !important; }
.u-bg-adb5bd { background: #adb5bd !important; }
.u-c-fd7e14 { color: #fd7e14 !important; }
.u-c-0d6efd { color: #0d6efd !important; }
.u-c-6c757d { color: #6c757d !important; }
.u-c-848282 { color: #848282 !important; }
.u-accent-198754 { accent-color: #198754 !important; }
.u-accent-fd7e14 { accent-color: #fd7e14 !important; }
.u-accent-dc3545 { accent-color: #dc3545 !important; }
.u-accent-0d6efd { accent-color: #0d6efd !important; }
/* A small square showing a record's own colour (Events, Network Connections); the colour itself stays inline. */
.color-swatch { display: inline-block !important; width: 14px !important; height: 14px !important; border-radius: 3px !important; vertical-align: middle !important; }
.color-swatch-bordered { border: 1px solid var(--border) !important; }
.u-mr-4px { margin-right: 4px !important; }
.u-bg-f7f9fb { background: #f7f9fb !important; }

/* Phase 266: hidden until a script shows it (the shim in includes/header.php drops the class on the
   first el.style.display change). The :not(#_) pairs lift it above any ordinary rule, the way the
   inline display:none it replaces outranked them; -force is for an element whose own !important
   display utility (e.g. d-block) the inline style also had to beat. */
.is-hidden:not(#_):not(#_) { display: none; }
.is-hidden-force:not(#_):not(#_) { display: none !important; }
.u-bg-f6f9fc { background: #f6f9fc !important; }
.u-bg-22425c { background: #22425c !important; }
.u-r-10px { border-radius: 10px !important; }
.u-c-25d366 { color: #25d366 !important; }

/* WhatsApp number status (Phase 269): the badge after a mobile number */
.wa-badge { cursor: pointer; margin-left: 4px; font-size: 13px; color: #b0b7bf; }
.wa-badge.wa-yes { color: #25d366; }
.wa-badge.wa-no { color: #dc3545; }
.wa-num-no { color: #9aa0a6; text-decoration: line-through; }

/* Network Monitor / NOC Dashboard (Phase 270) */
.noc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.noc-card { position: relative; background: #fff; border: 1px solid #e3e6ea; border-left: 5px solid #adb5bd; border-radius: 10px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); cursor: pointer; transition: box-shadow .15s; }
.noc-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.noc-card.is-online { border-left-color: #28a745; }
.noc-card.is-offline { border-left-color: #dc3545; background: #fff5f5; }
.noc-card.is-slow { border-left-color: #f0ad4e; }
.noc-card.is-paused { opacity: .55; }
.noc-card.is-selected { outline: 2px solid #0d6efd; }
.noc-card .noc-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 64px; }
.noc-card .noc-ip { font-size: 12px; color: #6c757d; }
.noc-card .noc-badge { position: absolute; top: 10px; right: 10px; font-size: 11px; }
.noc-card .noc-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-top: 8px; font-size: 12.5px; }
.noc-card .noc-metrics b { font-weight: 600; }
.noc-card .noc-err { margin-top: 6px; font-size: 11.5px; color: #b02a37; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.noc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; background: #adb5bd; }
.noc-dot.is-online { background: #28a745; box-shadow: 0 0 0 3px rgba(40,167,69,.18); }
.noc-dot.is-offline { background: #dc3545; box-shadow: 0 0 0 3px rgba(220,53,69,.2); animation: noc-blink 1.2s infinite; }
@keyframes noc-blink { 50% { opacity: .35; } }
.noc-fault { display: flex; align-items: center; gap: 8px; background: #dc3545; color: #fff; border-radius: 8px; padding: 8px 12px; margin-bottom: 6px; font-size: 14px; }
.noc-fault.is-slow { background: #f0ad4e; color: #212529; }
.noc-alerts { max-height: 360px; overflow-y: auto; }
.noc-alerts li { padding: 7px 4px; border-bottom: 1px solid #eef0f2; font-size: 13px; list-style: none; }
.noc-chart-box { position: relative; height: 300px; }
.noc-chart-box.is-small { height: 180px; }
.noc-refresh { font-size: 12.5px; color: #6c757d; }

/* Phase 285: Huawei ONU Manager */
.u-w-40p { width: 40%; }
.u-pre-scroll { max-height: 320px; overflow: auto; white-space: pre; background: #f6f8fa; padding: 6px; border-radius: 4px; }

/* Phase 298: the "Release (vX.Y.Z)" label at the foot of the sidebar, and a wrapped <pre> */
.nav-release {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 12px 4px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px;
  font-weight: 600;
  color: #cfd9df;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.nav-release:hover { color: #fff; }
body.sidebar-collapsed .sidebar .nav-release { font-size: 0; gap: 0; justify-content: center; }
body.sidebar-collapsed .sidebar .nav-release i { font-size: 14px; }
.u-pre-wrap { white-space: pre-wrap; font-family: inherit; font-size: 13px; }

/* Phase 299: the brand (company name) in the topbar links to the Dashboard */
.brand-link { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.brand-link:hover { color: inherit; opacity: .9; }

/* Phase 299: Collection Map */
.cm-map { width: 100%; height: 56vh; min-height: 320px; }
.cm-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; }
.cm-dot-red { background: #d62828; }
.cm-dot-orange { background: #f28c28; }
.cm-dot-blue { background: #2563eb; }
.cm-actions { min-width: 230px; }
.cm-actions .btn { margin: 0 2px 4px 0; }
@media (max-width: 767.98px) {
  /* a phone: every client is a card, with the buttons big enough for a thumb */
  .cm-table thead { display: none; }
  .cm-table, .cm-table tbody { display: block; width: 100%; }
  .cm-table tr { display: block; border: 1px solid #d9e1e8; border-radius: 10px; margin-bottom: 10px; padding: 8px 4px; background: #fff; }
  .cm-table td { display: block; border: 0 !important; padding: 3px 10px !important; text-align: left !important; }
  .cm-table td.text-end { font-size: 16px; }
  .cm-dist-col { display: none !important; }
  .cm-actions { min-width: 0; padding-top: 8px !important; }
  .cm-actions .btn { padding: 8px 12px; font-size: 14px; }
  #cmLocate { width: 100%; white-space: normal; border-radius: 10px !important; }
  .cm-head-actions { width: 100%; }
}

.cm-chk-col { width: 44px; text-align: center; }
@media (max-width: 767.98px) { .cm-chk-col { text-align: left !important; } }

/* Phase 300: My Route */
.cr-progress { height: 14px; }
.cr-seq { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #0f2d46; color: #fff; font-size: 12px; font-weight: 700; margin-right: 6px; }
.cr-next { border: 2px solid #1d9a6c; box-shadow: 0 2px 10px rgba(29, 154, 108, .25); }
.cr-done { opacity: .78; }
.cr-done .cr-seq { background: #6b7c8a; }
@media (max-width: 767.98px) {
  .cr-actions .btn, .cr-outcomes .btn { padding: 9px 12px; font-size: 14px; }
}

.cr-ticket { font-size: 14px; color: #34495e; }

.cm-dot-green { background: #2e9e8f; }

/* Phase 305: client profile, invoices table */
.inv-exp-col { width: 44px; text-align: center; }
#profileInvoicesTable tr.child td, #profileInvoicesTable td.child { background: #f7fafc; padding: 8px 12px; }

/* ============================================================
   Phase 306 — one look for every page (white cards, navy table
   headers, navy buttons / pagination), matching the reference.
   ============================================================ */
.card { background: var(--surface); border: 1px solid #e3e8ed; box-shadow: 0 1px 3px rgba(20, 54, 82, .06); }
.card .card, .modal .card { box-shadow: none; }
.card .table:not(.table-light) thead th,
.table-scroll .table:not(.table-light) thead th,
.table-responsive .table:not(.table-light) thead th {
  background: rgba(20, 54, 82, .94);
  color: #fff;
  border-color: rgba(255, 255, 255, .15);
  font-size: 12px;
}
.card .table:not(.table-light) tfoot td { background: #f1f4f7; }
.btn-primary { --bs-btn-bg: var(--ref-navy); --bs-btn-border-color: var(--ref-navy); --bs-btn-hover-bg: #17344a; --bs-btn-hover-border-color: #17344a; --bs-btn-active-bg: #17344a; --bs-btn-active-border-color: #17344a; --bs-btn-disabled-bg: var(--ref-navy); --bs-btn-disabled-border-color: var(--ref-navy); }
.btn-outline-primary { --bs-btn-color: var(--ref-navy); --bs-btn-border-color: var(--ref-navy); --bs-btn-hover-bg: var(--ref-navy); --bs-btn-hover-border-color: var(--ref-navy); --bs-btn-active-bg: var(--ref-navy); --bs-btn-active-border-color: var(--ref-navy); }
.pagination { --bs-pagination-color: var(--ref-navy); --bs-pagination-hover-color: var(--ref-navy); --bs-pagination-active-bg: var(--ref-navy); --bs-pagination-active-border-color: var(--ref-navy); --bs-pagination-focus-color: var(--ref-navy); }
.page-item.active .page-link { background: var(--ref-navy); border-color: var(--ref-navy); color: #fff; }
.btn-filter-apply { background: var(--ref-navy) !important; }

.auth-logo { display: block; max-height: 64px; max-width: 100%; margin: 0 auto 12px; }
.auth-card .auth-remember { display: flex; align-items: center; gap: 6px; margin-top: 12px; cursor: pointer; }
.auth-card .auth-remember input { margin: 0; }

/* Phase 306: Client Profile read from the reference (getComputedStyle) — tabs flow in a row, navy header, 170px photo, 15px/600 action buttons */
.profile-tabs { display: flex; flex-wrap: wrap; gap: 0; padding: 0; border-bottom: 2px solid #eee; }
.profile-tab-link { color: #999; font-size: 16px; font-weight: 600; padding: 10px 15px; margin: 0 2px -2px 0; border-bottom: 2px solid transparent; }
.profile-tab-link:hover { color: #555; }
.profile-tab-link.active { color: #222; font-weight: 600; border-bottom-color: var(--teal); }
.profile-banner { background: rgb(33, 65, 91); height: 104px; }
.profile-photo-wrap { margin-top: -85px; }
.profile-photo { width: 170px; height: 170px; border: 2px solid rgb(33, 65, 91); padding: 2px; background: #fff; }
.profile-name { margin-top: 12px; }
.profile-info-list li { font-size: 14px; padding: 10px 0; border-bottom-color: #eee; color: #333; }
.profile-action-btn { background: rgb(34, 66, 92); font-size: 15px; font-weight: 600; border-radius: 4px; padding: 5px 0; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.profile-info-table > div { color: #555; font-size: 14px; }
.profile-info-table > div label { font-size: 14px; }

/* Phase 306: page background and cards read from the reference — #e9e9e9 page, white 4px-radius card with the material shadow, no border */
:root { --bg: #e9e9e9; }
.card { border: 0; border-radius: 4px; box-shadow: rgba(0, 0, 0, .16) 0 2px 2px 0, rgba(0, 0, 0, .08) 0 0 0 1px; }
.card .card, .modal .card { box-shadow: none; }
.profile-info-title { line-height: 1.43; }

/* Phase 306: reference table headers are mixed case, 14px bold, compact (read from the Billing List) — not uppercase 12px */
.card .table:not(.table-light) thead th,
.table-scroll .table:not(.table-light) thead th,
.table-responsive .table:not(.table-light) thead th,
#billingListTable thead th, #clientListTable thead th, .config-table thead th {
  text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 700; padding: 10px 6px;
}

/* ---- Login page (v1.6.2): split screen, brand side + form side ---- */
.lg-body { margin: 0; background: #fff; font-family: 'Lato', sans-serif; }
.lg { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
.lg-brand { position: relative; overflow: hidden; color: #fff; display: flex; align-items: center; justify-content: center; padding: 48px;
  background: radial-gradient(circle at 15% 10%, rgba(15,139,141,.45), transparent 45%), linear-gradient(150deg, #0e2234 0%, #22425c 60%, #1a5d73 120%); }
.lg-rings { position: absolute; left: -140px; bottom: -140px; width: 420px; height: 420px; }
.lg-rings span { position: absolute; inset: 0; border: 1.5px solid rgba(255,255,255,.14); border-radius: 50%; animation: lgPulse 6s ease-out infinite; }
.lg-rings span:nth-child(2) { animation-delay: 2s; } .lg-rings span:nth-child(3) { animation-delay: 4s; }
@keyframes lgPulse { 0% { transform: scale(.25); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.lg-brand-in { position: relative; max-width: 420px; }
.lg-logo { width: 92px; height: 92px; border-radius: 22px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,.3); margin-bottom: 24px; overflow: hidden; }
.lg-logo img { max-width: 76%; max-height: 76%; object-fit: contain; }
.lg-logo span { font-size: 44px; font-weight: 900; color: #22425c; }
.lg-name { font-size: 34px; font-weight: 900; line-height: 1.15; margin: 0 0 8px; }
.lg-tag { font-size: 16px; opacity: .8; margin: 0 0 34px; }
.lg-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.lg-points li { display: flex; gap: 14px; align-items: center; }
.lg-points i { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.lg-points span { font-size: 13px; opacity: .85; line-height: 1.4; } .lg-points b { display: block; font-size: 15px; opacity: 1; }
.lg-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: #f6f8fa; }
.lg-form-in { width: 100%; max-width: 380px; }
.lg-form h2 { font-size: 28px; font-weight: 900; color: #22425c; margin: 0 0 4px; }
.lg-sub { color: #6b7b88; margin: 0 0 26px; }
.lg-mini { display: none; align-items: center; gap: 10px; margin-bottom: 22px; color: #22425c; }
.lg-mini img { height: 34px; }
.lg-label { display: block; font-size: 13px; font-weight: 700; color: #4a5a67; margin: 16px 0 6px; }
.lg-field { position: relative; display: flex; align-items: center; background: #fff; border: 1.5px solid #d5dde4; border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
.lg-field:focus-within { border-color: #0f8b8d; box-shadow: 0 0 0 3px rgba(15,139,141,.15); }
.lg-field > i { width: 44px; text-align: center; color: #8a99a6; }
.lg-field input { flex: 1; border: 0; outline: 0; background: transparent; padding: 13px 12px 13px 0; font-size: 15px; min-width: 0; }
.lg-eye { border: 0; background: transparent; width: 44px; height: 44px; color: #8a99a6; cursor: pointer; }
.lg-eye:hover { color: #22425c; }
.lg-remember { display: flex; align-items: center; gap: 8px; margin: 16px 0 22px; color: #4a5a67; cursor: pointer; font-size: 14px; }
.lg-btn { width: 100%; border: 0; border-radius: 10px; padding: 14px; font-size: 16px; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #22425c, #0f8b8d); transition: transform .1s, box-shadow .15s; }
.lg-btn:hover { box-shadow: 0 8px 20px rgba(34,66,92,.35); transform: translateY(-1px); }
.lg-btn i { margin-left: 6px; font-size: 13px; }
.lg-foot { text-align: center; color: #98a5b0; font-size: 12px; margin: 30px 0 0; }
@media (max-width: 860px) {
  .lg { grid-template-columns: 1fr; }
  .lg-brand { padding: 28px 24px; min-height: 0; } .lg-brand-in { max-width: none; width: 100%; }
  .lg-logo { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 14px; } .lg-name { font-size: 24px; } .lg-tag { margin-bottom: 0; } .lg-points { display: none; }
  .lg-form { padding: 28px 20px 40px; align-items: flex-start; }
}
/* ---- v1.6.7: fixed top bar + menu, centred table headers (as the reference) ---- */
/* The top bar stays at the top and, on a desktop screen, the menu stays beside the page: only the page content scrolls
   (the menu scrolls inside itself when it is longer than the screen). Below 992px the menu is the stacked collapse panel, as before. */
.topbar { position: sticky; top: 0; z-index: 1030; }
@media (min-width: 992px) {
  .sidebar { position: sticky; top: 56px; align-self: flex-start; height: calc(100vh - 56px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
}
/* Table headers: centred and vertically in the middle, like every table of the reference (a header with .text-start keeps its left edge) */
.card .table:not(.table-light) thead th:not(.text-start),
.table-scroll .table:not(.table-light) thead th:not(.text-start),
.table-responsive .table:not(.table-light) thead th:not(.text-start),
#billingListTable thead th, #clientListTable thead th, #dailyCollectionTable thead th, .config-table thead th {
  text-align: center !important;
  vertical-align: middle;
}

/* ---- v1.6.8: menu drawer on small screens (the reference's slide-in menu) + Menu Search ---- */
.menu-search { padding: 4px 14px 10px; }
.menu-search-input { width: 100%; height: 34px; border: 1px solid #21415b; border-radius: 6px; padding: 0 10px; font-size: 14px; background: #fff; color: #333; outline: 0; }
.menu-search-input:focus { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(15,139,141,.2); }
.sidebar .ms-hide { display: none !important; }
body.sidebar-collapsed .sidebar .menu-search { display: none; }
.sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
  .sidebar-backdrop { display: block; position: fixed; inset: 56px 0 0 0; background: rgba(0,0,0,.45); z-index: 1035; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
  body.sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; transition: opacity .3s; }
  .app-body { flex-direction: row; }
  .sidebar, body.sidebar-collapsed .sidebar {
    position: fixed; top: 56px; left: 0; bottom: 0; width: 250px; max-width: 86vw; z-index: 1040;
    background: var(--sidebar); color: #cfd9df; padding: 10px 0 24px; overflow-y: auto; overscroll-behavior: contain;
    box-shadow: 2px 2px 5px rgba(0,0,0,.1);
    transform: translateX(-105%); visibility: hidden; transition: transform .35s ease, visibility 0s .35s;
  }
  body.sidebar-open .sidebar { transform: none; visibility: visible; transition: transform .35s ease; box-shadow: 6px 0 24px rgba(0,0,0,.28); }
  body.sidebar-collapsed .sidebar .menu-search { display: block; }
  /* the icon-only narrowing is a desktop feature: bring the labels, chevrons and submenus back inside the drawer */
  body.sidebar-collapsed .sidebar .nav-item, body.sidebar-collapsed .sidebar .nav-group-toggle { overflow: visible; white-space: normal; }
  body.sidebar-collapsed .sidebar .chev { display: inline; }
  body.sidebar-collapsed .sidebar .nav-section { display: block; }
  body.sidebar-collapsed .sidebar .nav-submenu.show { display: block; }
  /* the drawer: roomier touch rows, bold labels (the reference's slide-in menu) */
  .sidebar .nav-item, .sidebar .nav-group-toggle { padding: 12px 18px; font-weight: 700; }
}
/* ---- v1.9.59: the side menu has ONE look at every screen size. Classic = the reference's light menu (measured on the
   portal at 1366 px: #f3f3f3, navy #0f2d46 text, light-grey open group and submenu with ring bullets, navy current page);
   Modern keeps its dark gradient (modern.css). ---- */
body:not(.ui-modern) .sidebar { background: #f3f3f3; color: #0f2d46; box-shadow: 2px 2px 5px rgba(0, 0, 0, .1); }
/* v1.9.72 (measured again on the portal at rest): labels Lato 800 (it renders Black); the current page's top-level row or group is
   light grey - open or closed - with navy text, and only an entry inside a group turns navy; an open group that is not the current
   one stays plain; entries 12 px (the current one 800) with black ring bullets */
body:not(.ui-modern) .sidebar .nav-item, body:not(.ui-modern) .sidebar .nav-group-toggle { color: #0f2d46; border-left-color: transparent; font-weight: 800; }
body:not(.ui-modern) .sidebar .nav-item.active, body:not(.ui-modern) .sidebar .nav-group-toggle.active { background: #e9e9e9; color: #0f2d46; }
body:not(.ui-modern) .sidebar .nav-ico, body:not(.ui-modern) .sidebar .chev { color: #0f2d46; }
body:not(.ui-modern) .sidebar .nav-item:hover, body:not(.ui-modern) .sidebar .nav-group-toggle:hover { background: #22425c; color: #fff; }   /* v1.9.71: the portal's hover is navy with white text */
body:not(.ui-modern) .sidebar .nav-item:hover .nav-ico, body:not(.ui-modern) .sidebar .nav-group-toggle:hover .nav-ico, body:not(.ui-modern) .sidebar .nav-group-toggle:hover .chev { color: #fff; }
body:not(.ui-modern) .sidebar .nav-submenu { background: #e8e8e8; }
body:not(.ui-modern) .sidebar .nav-submenu a { position: relative; color: #0f2d46; font-size: 12px; font-weight: 400; padding: 9px 15px 9px 52px; border-left: 0; }
body:not(.ui-modern) .sidebar .nav-submenu a::before { content: ""; position: absolute; left: 22px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border: 2px solid #000; border-radius: 50%; box-sizing: border-box; background: radial-gradient(circle, #000 0 1.5px, transparent 2px); }
body:not(.ui-modern) .sidebar .nav-submenu a:hover { background: #22425c; color: #fff; }
body:not(.ui-modern) .sidebar .nav-submenu a:hover::before { border-color: #fff; background: radial-gradient(circle, #fff 0 1.5px, transparent 2px); }
body:not(.ui-modern) .sidebar .nav-submenu a.active { background: #21415b; color: #fff; font-weight: 800; }
body:not(.ui-modern) .sidebar .nav-submenu a.active::before { border-color: #fff; background: radial-gradient(circle, #fff 0 1.5px, transparent 2px); }
body:not(.ui-modern) .sidebar .nav-section { color: #6b7b88; }
body:not(.ui-modern) .sidebar .nav-release { color: #0f2d46; }
/* v1.9.71: the menu's name tooltips (script.js) look like the portal's: navy, white 14 px semibold, square corners, 3 x 8 px */
.tooltip.menu-tip { --bs-tooltip-bg: #0f2d46; --bs-tooltip-color: #fff; --bs-tooltip-font-size: 14px; --bs-tooltip-padding-x: 8px; --bs-tooltip-padding-y: 3px; --bs-tooltip-border-radius: 0; --bs-tooltip-max-width: 200px; font-weight: 600; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.tooltip.menu-tip[data-popper-placement] .tooltip-arrow::before { border-right-color: #000; }   /* v1.9.72: the portal's arrow is black */
/* v1.9.72 (Classic): the group arrow is the portal's - ▸ 19 px at the row's right edge, turning into ▾ (a quick scale) while open */
body:not(.ui-modern) .sidebar .nav-group-toggle { position: relative; }
body:not(.ui-modern) .sidebar .nav-group-toggle .chev { position: absolute; right: 2px; top: 50%; width: 16px; height: 24px; margin: -12px 0 0; font-size: 0; transform: none; transition: none; }
body:not(.ui-modern) .sidebar .nav-group-toggle .chev::before, body:not(.ui-modern) .sidebar .nav-group-toggle .chev::after { position: absolute; inset: 0; font-size: 19px; line-height: 24px; text-align: center; transition: transform .3s; }
body:not(.ui-modern) .sidebar .nav-group-toggle .chev::before { content: "▸"; }
body:not(.ui-modern) .sidebar .nav-group-toggle .chev::after { content: "▾"; transform: scale(0); }
body:not(.ui-modern) .sidebar .nav-group-toggle:not(.collapsed) .chev::before { transform: scale(0); }
body:not(.ui-modern) .sidebar .nav-group-toggle:not(.collapsed) .chev::after { transform: scale(1); }
/* v1.9.72 (Classic, desktop): while the mouse is on the menu a grey scroll thumb shows at its right edge, as the portal's
   perfect-scrollbar does (15 px, #aaa at 60 %); it can be dragged. Placed by script.js; the menu's own scrollbar stays hidden. */
.menu-thumb { display: none; }
@media (min-width: 992px) {
  body:not(.ui-modern) .sidebar .menu-thumb { display: block; position: absolute; right: 2px; width: 15px; border-radius: 6px; background: #aaa; opacity: 0; transition: opacity .2s linear; z-index: 2; }
  body:not(.ui-modern) .sidebar:hover .menu-thumb, body:not(.ui-modern) .sidebar.menu-thumb-drag .menu-thumb { opacity: .6; }
}
/* the icon-only narrow sidebar (desktop, v1.9.71): an open group's entries are 36 px rows showing only their ring bullet,
   lined up with the icons (the portal's rail); the name is in the tooltip */
@media (min-width: 992px) {
  body.sidebar-collapsed #sidebarNav .nav-submenu a { height: 36px; margin: 0; padding: 0; font-size: 0; overflow: hidden; white-space: nowrap; }
  body.sidebar-collapsed:not(.ui-modern) .sidebar .nav-submenu a::before { left: 20px; }
}
/* ---- v1.6.9: polish — no Bootstrap blue left in checkboxes / pill tabs / outline buttons; dashboard card text wraps instead of being cut ---- */
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { background-color: var(--ref-navy); border-color: var(--ref-navy); }
.form-check-input:focus { border-color: var(--teal); box-shadow: 0 0 0 .2rem rgba(15, 139, 141, .2); }
.nav-pills .nav-link { color: var(--ref-navy); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--ref-navy); color: #fff; }
.btn.btn-outline-primary { --bs-btn-color: var(--ref-navy); --bs-btn-border-color: var(--ref-navy); --bs-btn-hover-bg: var(--ref-navy); --bs-btn-hover-border-color: var(--ref-navy); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--ref-navy); --bs-btn-active-border-color: var(--ref-navy); --bs-btn-active-color: #fff; --bs-btn-disabled-color: var(--ref-navy); --bs-btn-disabled-border-color: var(--ref-navy); }
/* Dashboard stat cards: up to two lines for the title and the hint (they were cut with "…" on a narrower screen); on a wide screen it still fits on one line */
.stat-card-v2 .sc-label, .stat-card-v2 .sc-hint { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.stat-card-v2 .sc-label { line-height: 1.15; }
.stat-card-v2 .sc-hint { line-height: 1.3; }

/* ---- v1.6.10: the per-row Action menu looks like the reference's: a black vertical-dots button, and a navy rounded bar of white icons that opens to its left ---- */
.action-bar-cell { text-align: center; }
.action-bar-toggle { width: 40px; height: 40px; padding: 0; font-size: 22px; color: #000; display: inline-flex; align-items: center; justify-content: center; }
.action-bar-toggle:hover, .action-bar-toggle:focus { background: rgba(0, 0, 0, .06); color: #000; }
.action-icon-row { right: calc(50% + 14px); background: #22425c; border: 0; border-radius: 7px; padding: 0 0 0 8px; gap: 0; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.action-icon-row .btn.btn-light, .action-icon-row .btn {
  --bs-btn-bg: transparent; --bs-btn-color: #fff; --bs-btn-border-color: transparent; --bs-btn-hover-bg: rgba(255, 255, 255, .16); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: rgba(255, 255, 255, .24); --bs-btn-active-color: #fff; --bs-btn-active-border-color: transparent;
  padding: 10px; font-size: 17px; line-height: 17px; border-radius: 0; color: #fff;
}
.action-icon-row .btn:first-child { border-radius: 7px 0 0 7px; }
.action-icon-row .btn:last-child { border-radius: 0 7px 7px 0; }
.action-icon-row .btn i { color: #fff; }
/* ---- v1.6.11: Action bar — narrower buttons, and it fits a small screen ---- */
.action-icon-row .btn.btn-light, .action-icon-row .btn { padding: 8px 7px; font-size: 16px; line-height: 16px; }
.action-icon-row { width: max-content; max-width: calc(100vw - 96px); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 575.98px) {
  .action-bar-toggle { width: 34px; height: 34px; font-size: 20px; }
  .action-icon-row .btn.btn-light, .action-icon-row .btn { padding: 8px 6px; font-size: 15px; line-height: 15px; }
  .action-icon-row { right: calc(50% + 12px); max-width: calc(100vw - 70px); }
}
/* v1.7.0: the Modern / Classic switch is a desktop control — on a phone the top bar has no room for it */
@media (max-width: 575.98px) { #uiThemeToggle { display: none; } }

/* ---- v1.7.1: Dashboard stat cards — the hint is a full-width strip along the bottom (icon left, title with the number under it), as in the Billing List cards ---- */
.stat-card-v2 {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; column-gap: 14px; align-items: stretch;
  height: auto; min-height: 128px; padding: 0;
}
.stat-card-v2 .sc-icon { grid-column: 1; grid-row: 1; align-self: center; padding: 16px 0 8px 20px; font-size: 44px; }
.stat-card-v2 .sc-body { display: contents; }
.stat-card-v2 .sc-main { grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 14px 16px 8px 0; min-width: 0; }
.stat-card-v2 .sc-num { font-size: 24px; line-height: 1.1; }
.stat-card-v2 .sc-hint { grid-column: 1 / -1; grid-row: 2; border-radius: 0; background: rgba(0, 0, 0, .14); padding: 8px 14px; font-size: 13.5px; text-align: center; }
.stat-card-v2 { min-height: 112px; }
.stat-card-v2 .sc-main { padding: 10px 14px 4px 0; }
.stat-card-v2 .sc-icon { padding: 12px 0 6px 18px; font-size: 42px; }
.stat-card-v2 .sc-label { font-size: 16px; }
.stat-card-v2 .sc-num { font-size: 22px; }
.stat-card-v2 .sc-hint { padding: 6px 12px; font-size: 12.5px; line-height: 1.3; }

/* ---- v1.7.2: Dashboard stat cards smaller — more of them per row, shorter, tighter text ---- */
.stat-grid:has(.stat-card-v2) { grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card-v2 { min-height: 92px; column-gap: 10px; border-radius: 14px; }
.stat-card-v2 .sc-icon { padding: 10px 0 4px 14px; font-size: 32px; }
.stat-card-v2 .sc-main { padding: 8px 10px 2px 0; gap: 0; }
.stat-card-v2 .sc-label { font-size: 14.5px; line-height: 1.15; }
.stat-card-v2 .sc-num { font-size: 20px; line-height: 1.1; }
.stat-card-v2 .sc-hint { padding: 4px 8px; font-size: 11.5px; line-height: 1.25; }

/* ---- v1.7.3: Dashboard stat cards = the reference's own (read live): 75px, 5px radius, 0 2px 10px shadow, 80px icon column (45px icon), 15px title,
   25px number, 11.9px hint as a darker strip along the bottom, four columns whose colours are fixed by column (blue / teal / violet / slate, 45deg) ---- */
.stat-grid:has(.stat-card-v2) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 30px; margin-bottom: 26px; }
/* v1.9.43: no 3-column step any more - the colours run by column (4 colours), so 3 columns at 100% zoom on a 1280-1366 px screen
   shuffled them row by row and the cards looked out of order; it stays 4 columns down to 1100 px (cards tightened at the end of this file) */
@media (max-width: 1359.98px) { .stat-grid:has(.stat-card-v2) { gap: 16px 18px; } }
@media (max-width: 1099.98px) { .stat-grid:has(.stat-card-v2) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .stat-grid:has(.stat-card-v2) { grid-template-columns: minmax(0, 1fr); } }
.stat-card-v2 {
  display: grid; grid-template-columns: 80px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 0 10px; align-items: stretch;
  height: auto; min-height: 75px; padding: 0; border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, .2); overflow: hidden;
}
.stat-card-v2 .sc-icon { grid-column: 1; grid-row: 1; align-self: center; padding: 0; text-align: center; font-size: 45px; line-height: 55px; opacity: 1; }
.stat-card-v2 .sc-body { display: contents; }
.stat-card-v2 .sc-main { grid-column: 2; grid-row: 1; display: block; padding: 4px 8px 0 0; gap: 0; }
.stat-card-v2 .sc-label { display: block; font-size: 15px; font-weight: 400; line-height: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.stat-card-v2 .sc-num { display: block; font-size: 25px; font-weight: 400; line-height: 1.25; }
.stat-card-v2 .sc-hint {
  grid-column: 1 / -1; grid-row: 2; display: block; -webkit-line-clamp: unset; background: rgba(0, 0, 0, .12); border-radius: 0; padding: 0 12px;
  font-size: 11.9px; line-height: 17px; text-align: center; white-space: normal; overflow: visible;
}
.stat-v2-blue   { background: linear-gradient(45deg, #0288d1 0%, #26c6da 100%); }
.stat-v2-teal   { background: linear-gradient(45deg, #2cb8b8 0%, #2ebaba 100%); }
.stat-v2-violet { background: linear-gradient(45deg, #825bec 0%, #898cc6 100%); }
.stat-v2-slate  { background: linear-gradient(45deg, #555e65 0%, #585f65 100%); }

/* ---- v1.7.4: Top 20 Unpaid Client is the fourth box of the chart row ---- */
.problem-row-2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1359.98px) { .problem-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .problem-row-2 { grid-template-columns: minmax(0, 1fr); } }
.top-unpaid-card { display: flex; flex-direction: column; min-width: 0; }
.top-unpaid-scroll { margin-top: 8px; max-height: 300px; overflow-y: auto; }
.top-unpaid-table { font-size: 13px; margin: 0; }
.top-unpaid-table thead th { position: sticky; top: 0; z-index: 1; background: rgba(20, 54, 82, .94); color: #fff; text-align: center; font-size: 13px; font-weight: 700; padding: 6px; }
.top-unpaid-table td { padding: 6px; vertical-align: middle; }
.top-unpaid-table td small { display: block; color: var(--text-muted); font-size: 11.5px; }
.top-unpaid-table .due { color: #c0392b; font-weight: 700; text-align: right; white-space: nowrap; }
/* ---- v1.7.5: Top 20 Unpaid Client looks like the reference's: gradient title bar, User Name / Mobile / Bill Amount / Due Amount, everything centred, white body ---- */
/* Bootstrap paints table cells with the page colour (--bs-body-bg = #e9e9e9), which showed grey rows inside white cards; cells are transparent now, like the reference. */
.table { --bs-table-bg: transparent; }
@media (min-width: 1360px) { .problem-row-2 { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.55fr); } }
.chart-card.top-unpaid-card { padding: 0; overflow: hidden; background: #fff; }
.top-unpaid-card .tu-head {
  margin: 0; padding: 12px 16px; background: linear-gradient(45deg, #143652 0%, #0288d1 100%); color: #fff;
  font-size: 19px; font-weight: 400; text-transform: uppercase; letter-spacing: .4px; line-height: 1.2;
}
.top-unpaid-scroll { margin: 0; max-height: 340px; overflow-y: auto; overflow-x: auto; background: #fff; }
.top-unpaid-table { font-size: 13.5px; margin: 0; background: #fff; --bs-table-bg: #fff; }
.top-unpaid-table thead th {
  position: sticky; top: 0; z-index: 1; background: #21415b; color: #fff; text-align: center; font-size: 13.5px; font-weight: 700; padding: 10px 6px;
  border: 0; border-right: 1px solid rgba(255, 255, 255, .35); white-space: nowrap;
}
.top-unpaid-table thead th:last-child { border-right: 0; }
.top-unpaid-table td { padding: 11px 6px; text-align: center; vertical-align: middle; color: #333; border: 0; border-bottom: 1px solid #e9ecef; background: #fff; }
.top-unpaid-table td a { color: #333; text-decoration: none; }
.top-unpaid-table td a:hover { color: var(--teal); text-decoration: underline; }
.top-unpaid-table tbody tr:hover td { background: #f3f7fa; }.top-unpaid-table { font-size: 13px; }
.top-unpaid-table thead th { white-space: normal; font-size: 13px; padding: 9px 4px; line-height: 1.15; }
.top-unpaid-table td { padding: 10px 4px; }
.top-unpaid-table td:first-child { word-break: break-all; }

/* ---- v1.7.6: the four boxes of the first Dashboard chart row are the same size (equal columns, the ticket cards share the height); client / billing list tables like the reference ---- */
.problem-row:not(.problem-row-2) { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 1100px) { .problem-row:not(.problem-row-2) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .problem-row:not(.problem-row-2) { grid-template-columns: minmax(0, 1fr); } }
.problem-row .chart-card, .problem-row .chart-placeholder { min-width: 0; overflow: hidden; }
.problem-row .google-chart-target { width: 100%; min-width: 0; }
.problem-ticket-stack { height: 100%; min-height: 0; }
.problem-ticket-stack .stat-card { flex: 1 1 0; height: auto; min-height: 56px; }

/* Client / billing list tables: body cells centred, vertically in the middle, #333, 14px, 10px 3px — the reference's own (read live on its Billing List) */
:is(.page-clients-list, .page-clients-left, .page-clients-change-requests, .page-clients-requests, .page-clients-scheduler, .page-clients-portal, .page-billing-list, .page-billing-daily-collection) .table > tbody > tr > td:not(.text-start) {
  text-align: center; vertical-align: middle; color: #333; font-size: 14px; padding: 10px 3px;
}

/* ---- v1.7.7: client / billing list parts matched to the reference's Billing List (measured live) ---- */
/* the M.Status / status switch: 50x24, #ccc when off, #2196f3 when on, 16px knob */
.toggle-switch { width: 50px; height: 24px; border-radius: 34px; background: #ccc; }
.toggle-switch.on { background: #2196f3; }
.toggle-switch { transition: background-color .4s; }
.toggle-switch .knob { top: 4px; left: 4px; transition: left .4s; }   /* the portal's .4s slide (v1.9.78) */
.toggle-switch.on .knob { left: 30px; }
/* Import From Mikrotik: the table while it is read again after a switch (the portal's table reload) */
#mtTable.is-reloading { opacity: .55; pointer-events: none; transition: opacity .15s; }
/* B.Status buttons: Pay #686868, Due #dc3545, Paid #2b982b — square-ish (3px), 6px padding, white 14px */
body.page-billing-list .bstatus-actions .btn.bill-pay-btn { background: #686868; border: 0; color: #fff; border-radius: 3px; padding: 6px; font-size: 14px; line-height: 17px; }
body.page-billing-list .bstatus-actions .badge { border-radius: 3px; padding: 6px; font-size: 14px; font-weight: 400; line-height: 17px; }
body.page-billing-list .bstatus-actions .badge-unpaid { background: #dc3545; color: #fff; }
body.page-billing-list .bstatus-actions .badge-paid { background: #2b982b; color: #fff; }
/* table lines: only the light vertical rules between columns */
body:is(.page-clients-list, .page-clients-left, .page-clients-change-requests, .page-clients-requests, .page-clients-scheduler, .page-billing-list, .page-billing-daily-collection) .table > tbody > tr { border: 0; }
body:is(.page-clients-list, .page-clients-left, .page-clients-change-requests, .page-clients-requests, .page-clients-scheduler, .page-billing-list, .page-billing-daily-collection) .table > tbody > tr > td { border: 0; border-right: .667px solid #eee; }
/* paging: joined square buttons, #555 bold on white, active #2196f3, disabled #bbb; "Show" box and Search with 3px #ccc */
body:is(.page-clients-list, .page-clients-left, .page-clients-change-requests, .page-clients-requests, .page-clients-scheduler, .page-billing-list, .page-billing-daily-collection) .dataTables_paginate .pagination .page-link {
  border: 0; border-radius: 0; margin: 0 0 0 -1px; padding: 6px 12px; background: #fff; color: #555; font-size: 14px; font-weight: 700; box-shadow: none;
}
body:is(.page-clients-list, .page-clients-left, .page-clients-change-requests, .page-clients-requests, .page-clients-scheduler, .page-billing-list, .page-billing-daily-collection) .dataTables_paginate .pagination .page-item.active .page-link { background: #2196f3; color: #fff; box-shadow: none; }
body:is(.page-clients-list, .page-clients-left, .page-clients-change-requests, .page-clients-requests, .page-clients-scheduler, .page-billing-list, .page-billing-daily-collection) .dataTables_paginate .pagination .page-item.disabled .page-link { color: #bbb; }
body:is(.page-clients-list, .page-clients-left, .page-clients-change-requests, .page-clients-requests, .page-clients-scheduler, .page-billing-list, .page-billing-daily-collection) .dataTables_length select,
body:is(.page-clients-list, .page-clients-left, .page-clients-change-requests, .page-clients-requests, .page-clients-scheduler, .page-billing-list, .page-billing-daily-collection) .dataTables_filter input { border: 1px solid #ccc !important; border-radius: 3px !important; }

/* v1.7.8 — Billing List / Client List cells like the reference: Ex.Date calendar button, info + edit icons, sync + status dot */
#billingListTable .cl-sync-icon { color: #0089ff; font-size: 16px; margin-right: 6px; text-decoration: none; }
#billingListTable .cl-status-dot { font-size: 16px; padding: 3px 4px; cursor: help; }
#billingListTable .cl-info-icon { font-size: 16px; padding: 3px 4px; color: #333; text-decoration: none; }
#billingListTable .inline-edit-icon, #clientListTable .inline-edit-icon { cursor: pointer; margin-left: 5px; color: #22425c; font-size: 12px; }
.effective-to-btn { background: #f0f0f0; color: #333; border: 0; border-radius: 2px; font-size: 12px; padding: 3px 4px; line-height: 1.4; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); }
.effective-to-btn:hover { background: #e4e4e4; color: #333; }
.effective-to-btn .fa-calendar { font-size: 20px; }

/* v1.7.9 — Client List filter form like the reference (measured live): 12px / 600 / #597080 labels, 3px #ccc inputs, 20px #aaa select boxes, pill Clear / Apply buttons */
body #clientFilterPanel label { font-size: 12px; font-weight: 600; color: #597080; margin-bottom: 5px; text-transform: uppercase; }
body #clientFilterPanel .form-select, body #clientFilterPanel .form-control { border: 1px solid #ccc; border-radius: 3px; box-shadow: none; }
body #clientFilterPanel .select2-container--default .select2-selection--single { border: 1px solid #aaa; border-radius: 20px; height: 34px; }
body #clientFilterPanel .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 32px; padding-left: 14px; }
body #clientFilterPanel .select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; }
body #clientFilterPanel .btn-filter-clear, body #clientFilterPanel .btn-filter-apply { font-size: 13px; font-weight: 400; padding: 6px 12px; border: 0; border-radius: 20px; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); }
body #clientFilterPanel .btn-filter-clear { background: #c9302c !important; background-image: none !important; }
body #clientFilterPanel .btn-filter-apply { background: #5bc0de !important; background-image: none !important; }

/* v1.7.10 — the 100px-high info boxes (Support, POP, OLT Users, Daily Bill) and the 3-column variant (Daily Bill: col-lg-4) */
.client-list-stats.ref-stats-100 .stat-card { height: 100px; }
@media (min-width: 992px) { .client-list-stats.ref-stats-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .client-list-stats.ref-stats-3 { grid-template-columns: repeat(3, 1fr); } }
/* v1.9.59 — Online Clients Monitoring as on the reference: ONE card with the tabs (left, 12px pills) and Sync (right) on
   top, a thin rule, then the info-box-2 cards, the filters and the table. */
.mon-one { padding: 0 15px 15px; }
.mon-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0 15px; padding-bottom: 10px; }
.mon-tabs { display: flex; flex-wrap: wrap; flex: 1 1 0; min-width: 0; }
@media (min-width: 768px) { .mon-tabs { flex: 0 0 calc(75% - 15px); max-width: calc(75% - 15px); } .mon-sync { flex: 1 1 0; } }
.mon-tabs .view-tab-btn { margin: 10px 0 0 10px; padding: 7px 6px; font-size: 12px; gap: 4px; line-height: 17px; }
.mon-sync { padding: 15px 15px 0 0; }
.mon-sync .btn { font-size: 13px; padding: 6px 12px; }
.mon-rule { display: none; }
.mon-dt-top { margin-bottom: 8px; }
.mon-dt-top .dataTables_length select { display: inline-block; width: auto; margin: 0 4px; }
.mon-dt-top .dataTables_filter input { display: inline-block; width: auto; margin-left: 6px; }
.mon-table .dataTables_paginate .pagination { justify-content: flex-end; margin: 0; }   /* the reference's rule sits behind its floated tab row - not visible */
@media (max-width: 991.98px) { .mon-tabs .view-tab-btn { font-size: 14px; } .mon-sync { flex-basis: 100%; text-align: right; padding: 10px 0 0; } }
/* The reference's info-box-2 (Online Clients Monitoring): 100px, an 80px icon column with a 50px icon, the title (15px)
   over a 26px number, the cyan "quick info" shadow; 30px between columns, none between stacked rows. */
.client-list-stats.ref-info2 { gap: 0 30px; margin: 10px 0 15px; }
.client-list-stats.ref-info2 .stat-card { height: 100px; box-shadow: 0 6px 20px 0 rgba(38, 198, 218, .5); }
.client-list-stats.ref-info2 .stat-card:hover { transform: none; box-shadow: 0 10px 30px 0 rgba(38, 198, 218, .5); }
.client-list-stats.ref-info2 .stat-card .ico { flex: 0 0 80px; font-size: 50px; line-height: 80px; align-items: flex-start; justify-content: center; }
.client-list-stats.ref-info2 .stat-card > div:last-child { padding: 7px 10px; }
.client-list-stats.ref-info2 .stat-card .label { margin: 11px 0 0; font-size: 15px; line-height: 21px; }
.client-list-stats.ref-info2 .stat-card .num { margin: -4px 0 0; font-size: 26px; line-height: 37px; }
/* Bandwidth Buy → Purchase Bill: 72px boxes, four per row from 768px (col-sm-3) */
.client-list-stats.ref-stats-72 .stat-card { height: 72px; }
@media (min-width: 768px) { .client-list-stats.ref-stats-72 { grid-template-columns: repeat(4, 1fr); gap: 25px 30px; } }

/* v1.7.10 — invoice / bill / requisition / journal line-item tables: on a phone keep the cells usable and let the wrapper scroll sideways (inputs were squeezed to 19-60px) */
@media (max-width: 767.98px) {
  .table-responsive > #lineTable { min-width: 760px; }
  .table-responsive > #billLines { min-width: 1150px; }
  .table-responsive > table.u-maxw-760px { min-width: 440px; }
  #lineTable input.form-control, #billLines input.form-control { min-width: 70px; }
}
@media (max-width: 575.98px) { .profile-action-btn { font-size: 13.5px; padding: 5px 6px; } }

/* v1.7.12 — Client Profile on a phone: the tab card was growing to the widest table (1800px) and pushed the Show / Search boxes off screen; keep the card at the page width and let the tab panel scroll sideways */
@media (max-width: 860px) {
  .profile-layout { align-items: stretch; }
  .profile-tabs-card { width: 100%; max-width: 100%; }
}
.profile-tabs-card .tab-panel { overflow-x: auto; }
@media (max-width: 575.98px) { #clientSetLoc { display: block; margin: 6px 0 0 !important; max-width: 100%; white-space: normal; text-align: left; } }
@media (max-width: 575.98px) { div:has(> #clientSetLoc) { flex-wrap: wrap; } #clientSetLoc { flex: 0 0 auto; } }

/* v1.7.13 — Client Profile > Generated & Updated Bill/Invoices: the green edit icon and the "Edit Package & Bill" popup like the reference */
.inv-edit-icon { color: #0aa50a; font-size: 20px; text-decoration: none; cursor: pointer; }
.inv-edit-icon:hover { color: #078207; }
.inv-edit-icon.is-disabled { color: #b5b5b5; cursor: not-allowed; }
#invEditModal .modal-content { border: 0; border-radius: 3px; box-shadow: 0 5px 25px rgba(0, 0, 0, .3); }
#invEditModal .modal-title { font-size: 28px; font-weight: 400; color: #333; }
#invEditModal .modal-header { border-bottom: 0; padding: 28px 30px 6px; background: #fff; color: #333; }
#invEditModal .modal-body { padding: 14px 30px 4px; }
#invEditModal .modal-footer { padding: 0 30px 20px; }
#invEditModal label { font-size: 12px; font-weight: 600; color: #597080; margin-bottom: 5px; }
#invEditModal .form-control, #invEditModal .form-select { border: 1px solid #ccc; border-radius: 3px; box-shadow: none; }
#invEditModal .form-control[readonly] { background: #e9ecef; }
#invEditModal .btn-danger { background: #f44336; border: 0; border-radius: 2px; padding: 8px 40px; box-shadow: 0 2px 5px rgba(0,0,0,.16), 0 2px 10px rgba(0,0,0,.12); }
#invEditModal .modal-footer .btn-primary { background: #2196f3 !important; background-image: none !important; border: 0; border-radius: 2px; padding: 8px 40px; box-shadow: 0 2px 5px rgba(0,0,0,.16), 0 2px 10px rgba(0,0,0,.12); }
#invEditModal .inv-amount-edit { background: #fff; color: #0aa50a; border: 0; font-size: 20px; box-shadow: 0 2px 5px rgba(0,0,0,.16), 0 2px 10px rgba(0,0,0,.12); }
#invEditModal .modal-content, #invEditModal .modal-body, #invEditModal .modal-footer { background: #fff; }

/* v1.7.14 — Billing List / Client List like the reference: 30px bulk buttons with the soft shadow, narrower table columns (3px cell padding) */
body.page-billing-list .bulk-btn, body.page-clients-list .bulk-btn { padding: 6px 12px; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); }
body #billingListTable thead th, body #clientListTable thead th { padding: 10px 3px; }
/* The reference's list checkboxes are the browser's own 13px box (dark outline), not Bootstrap's pale one. */
#billingListTable input[type=checkbox], #clientListTable input[type=checkbox] { appearance: auto; -webkit-appearance: checkbox; width: 13px; height: 13px; margin: 3px 3px 3px 4px; background: none; border: 0; accent-color: #0075ff; cursor: pointer; }
.list-pager.is-loading > :not(:first-child) { opacity: .45; pointer-events: none; transition: opacity .15s; }

/* v1.7.19 — reference-wide basics, measured on 110 pages of the live portal:
   page title 22px / 400, data-table headers 10px 3px, cells centred with 2px padding, 3px input corners.
   Tables with typing fields in them (invoice / journal line items), modal tables and the Accounting report pages keep their own look. */
.page-head h1 { font-size: 22px; font-weight: 400; }
body:not([class*="page-accounting-"]) .content table.table:has(> thead th):not(:has(input[type=text], input[type=number], input[type=date], input[type=email], input[type=tel], input[type=search], input:not([type]), select, textarea)):not(.modal table) > thead > tr > th { padding: 10px 3px; text-align: center; vertical-align: middle; }
body:not([class*="page-accounting-"]) .content table.table:has(> thead th):not(:has(input[type=text], input[type=number], input[type=date], input[type=email], input[type=tel], input[type=search], input:not([type]), select, textarea)):not(.modal table) > tbody > tr > td { padding: 10px 2px; text-align: center; vertical-align: middle; font-size: 14px; }
.form-control, .form-select { border-radius: 3px; }
/* Accounting Dashboard cards: 72px high, 30px / 25px gaps like the reference (335 x 72 at 1366px wide) */
.acct-dc-grid { gap: 25px 30px; }
.acct-dc { height: 72px; overflow: hidden; padding-bottom: 2px; }

/* v1.7.21 — the two messaging bulk buttons wear their own colour wherever they appear: SMS orange, WhatsApp green (fixed, no change on hover / click) */
.bulk-btn.bulk-btn-sms, .bulk-btn.bulk-btn-sms:hover, .bulk-btn.bulk-btn-sms:focus, .bulk-btn.bulk-btn-sms:active { background: #f0840c !important; background-image: none !important; color: #fff; }
.bulk-btn.bulk-btn-wa, .bulk-btn.bulk-btn-wa:hover, .bulk-btn.bulk-btn-wa:focus, .bulk-btn.bulk-btn-wa:active { background: #1ea952 !important; background-image: none !important; color: #fff; }

/* v1.7.23 — Online Clients Monitoring row: Connected green / Disconnected red badge (12px, 700, 5px corners), running duration, green icon actions like the reference */
.mon-badge { font-size: 12px; font-weight: 700; padding: 6px; border-radius: 5px; color: #fff; }
.mon-badge.badge-running { background: #28a745; }
.mon-badge.badge-danger { background: #dc3545 !important; }
.btn-duration-calculation { font-weight: 600; color: #0f8b8d; white-space: nowrap; }
.mon-actions { text-align: center; }
.mon-act { display: inline-block; margin: 0 3px; font-size: 18px; color: #22b14c; text-decoration: none; cursor: pointer; }
.mon-act:hover { color: #178a39; }
.mon-act-warn { color: #f0840c; }
.mon-act-warn:hover { color: #c96a05; }
.mon-act-off { color: #b5b5b5; cursor: not-allowed; }
.mon-ping-out { background: #0e2234; color: #d6e6f2; padding: 14px; border-radius: 6px; font-size: 13px; max-height: 320px; overflow: auto; white-space: pre-wrap; }

/* v1.7.25: no up/down spinner on number boxes anywhere (a stray click or wheel changed amounts) */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; display: none; }

/* v1.7.26: availability tick / cross inside Client Code and Username / IP (Add / Edit Client) */
.uc-wrap { position: relative; display: block; }
.uc-wrap > input.form-control { padding-right: 34px; }
.uc-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 17px; line-height: 1; pointer-events: auto; cursor: default; }
.uc-ok > input.form-control { border-color: #1a7f37; }
.uc-ok .uc-icon { color: #1a7f37; }
.uc-bad > input.form-control { border-color: #d92d20; }
.uc-bad .uc-icon { color: #d92d20; }

.uc-msg { color: #a94442; font-size: 14px; line-height: 1.5; margin-top: 4px; }
.uc-msg:empty { display: none; }

/* Portal Manage (Client > Portal Manage), like the reference: stacked pill list on the left, the section on the right
   under a dark-teal title bar. */
.pm-layout { display: grid; grid-template-columns: minmax(150px, 16.6%) minmax(0, 1fr); gap: 15px 20px; align-items: start; margin-bottom: 16px; }
@media (max-width: 991px) { .pm-layout { grid-template-columns: 1fr; } }
.pm-nav { list-style: none; padding: 0; margin: 0; }
.pm-nav .nav-item { margin: 0 0 3px; }
.pm-nav .nav-link { display: block; width: 100%; text-align: left; border: 0; border-radius: 4px; padding: 10px 15px; font-size: 14px; background: #fff; color: #000; }
.pm-nav .nav-link:hover { background: #f2f2f2; }
.pm-nav .nav-link.active { background: #00485c; color: #fff; }
.pm-card { padding: 0; overflow: hidden; }
.pm-card-head { background: #00485c; color: #fff; font-size: 18px; padding: 8px 8px 8px 12px; }
.pm-card-body { padding: 14px 15px; }
.pm-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #e8e8e8; }
.pm-toolbar-left { display: flex; gap: 12px; flex-wrap: wrap; }
.pm-act { font-size: 15px; padding: 6px; text-decoration: none; }
.pm-act-edit { color: #08aa17; }
.pm-act-delete { color: #f50707; }
.pm-toolbar-end { justify-content: flex-end; }
.pm-subtabs { border-bottom: 1px solid #e3e3e3; }
.pm-subtabs .nav-link { border: 0; border-bottom: 2px solid transparent; background: none; color: #555; padding: 8px 14px; }
.pm-subtabs .nav-link.active { color: #337ab7; border-bottom-color: #337ab7; background: none; }
.pm-card table th, .pm-card table td { text-align: center; }
.pm-speed-title { font-size: 13px; margin-bottom: 14px; }
.pm-speed-row { display: flex; align-items: center; gap: 30px; margin-bottom: 14px; }
.pm-radio { display: inline-flex; align-items: center; gap: 12px; min-width: 190px; margin: 0; font-size: 14px; }
.pm-speed-url { display: flex; align-items: center; gap: 12px; flex: 1; max-width: 560px; }
.pm-speed-url .form-control { flex: 1; }
.pm-speed-url label { white-space: nowrap; margin: 0; }
.pm-speed .filter-label-ref { text-transform: uppercase; font-weight: 600; font-size: 12px; color: var(--label); }
.pm-speed .required-mark { margin-left: 3px; }
.pm-layout > * { min-width: 0; }
.pm-nav .nav-item { padding: 0; }
/* Inline required message under a field (Add / Edit Client) - the reference's red line of text. */
.inline-req-msg { display: block; color: #a94442; font-size: 14px; font-weight: 300; margin-top: 4px; }
/* Empty required field: red border (plain input / select, and the Select2 box that follows a select). */
.inline-req-invalid, .inline-req-invalid:focus { border-color: #a94442 !important; box-shadow: none !important; }
.inline-req-invalid + .select2 .select2-selection { border-color: #a94442 !important; }
/* Daily Bill Collection: one card, pill tabs, buttons left / right (the reference). */
.dc-one { padding: 14px 15px; }
.dc-tabs { display: flex; gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #e8e8e8; }
.dc-tab { border: 2px solid #143652; background: #fff; color: #143652; border-radius: 20px; padding: 6px 14px; font-size: 14px; font-weight: 700; cursor: pointer; }
.dc-tab.active-tab { background: #143652; color: #fff; }
.dc-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin: 6px 0 16px; }
.dc-toolbar-left, .dc-toolbar-right { display: flex; gap: 12px; flex-wrap: wrap; }
.dc-toolbar .btn { font-size: 14px; }
#dailyCollectionTable input[type=checkbox] { appearance: auto; -webkit-appearance: checkbox; width: 13px; height: 13px; margin: 3px 3px 3px 4px; background: none; border: 0; accent-color: #0075ff; cursor: pointer; }
/* Mikrotik Server list, like the reference: borderless green status text, bare password box. */
.mk-conn { font-size: 14px; }
.mk-conn-success { color: #3c763d; }
.mk-conn-danger { color: #a94442; }
.mk-conn-secondary { color: #777; }
.mk-pw-wrap { display: flex; align-items: center; justify-content: center; gap: 6px; }
.mk-pw-wrap .mt-pw-field { border: 0; background: transparent; width: 110px; text-align: center; padding: 0; font-size: 14px; }
/* Import From Mikrotik: the export buttons sit top right, above the filters. */
.mi-buttons { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.mi-buttons-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.bi-buttons { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
/* "Learn how to ..." guides (includes/learn_guide.php): the switch + inline English / Bangla steps. */
.lgd { margin-bottom: 10px; }
.lg-intro { margin: 0 0 8px; }
.lg-steps { margin: 0 0 8px; padding-left: 22px; }
.lg-steps li { margin-bottom: 7px; line-height: 1.6; }
.lg-steps li::marker { font-weight: 700; color: #143652; }
.lg-tip { margin: 6px 0 0; padding: 8px 12px; background: #fff8e1; border: 1px solid #f3e0a0; border-radius: 8px; font-size: 13.5px; line-height: 1.55; }
.lg-tip i { color: #e8960c; margin-right: 4px; }
.lgd code, .cr-learn-box code { background: rgba(20,54,82,.08); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lg-tip { background: #3a3318; border-color: #6b5a1e; } }
:root[data-theme="dark"] .lg-tip { background: #3a3318; border-color: #6b5a1e; }
.lg-card { padding: 10px 16px; margin-bottom: 14px; }
.lg-card .cr-learn-switch { margin-bottom: 0; }
.lg-card .cr-learn-box { margin: 10px 0 2px; }

/* POP List: the reference keeps S/N as a hidden sort column. */
.pop-sn { display: none; }
.u-bg-606423 { background: #606423 !important; }

/* v1.9.5: Customer Change Log - a cell that changed since the row below it */
.cl-changed { background: #fff3cd !important; font-weight: 600; }

/* ---- v1.9.43: dashboard stat cards keep 4 per row on 1100-1359 px screens (100% zoom on a laptop): a narrower icon column
   and a slightly smaller title so the card text still fits ---- */
@media (min-width: 1100px) and (max-width: 1359.98px) {
  .stat-card-v2 { grid-template-columns: 60px minmax(0, 1fr); gap: 0 8px; }
  .stat-card-v2 .sc-icon { font-size: 36px; line-height: 50px; }
  .stat-card-v2 .sc-label { font-size: 14px; line-height: 1.2; white-space: normal; }   /* a long title wraps instead of "Purchase Payable D..." */
  .stat-card-v2 .sc-num { font-size: 23px; }
  .stat-card-v2 .sc-hint { font-size: 11.2px; padding: 0 8px; }
}

/* ---- v1.9.60: the page frame as on the portal (measured on the portal at 1366 px): 65 px top bar, 225 px side menu,
   page title / breadcrumb, content edges. Classic = the portal's colours; Modern keeps its own colours with the same sizes. ---- */
.topbar { height: 65px; }
@media (min-width: 992px) {
  .sidebar { width: 225px; top: 65px; height: calc(100vh - 65px); }
  body:not(.ui-modern) .sidebar { margin-top: 5px; top: 70px; height: calc(100vh - 70px); padding-top: 0; scrollbar-width: none; }   /* no scrollbar column: the menu keeps its full 225 px, still scrolls by wheel / touch */
  body:not(.ui-modern) .sidebar::-webkit-scrollbar { display: none; }
}
@media (max-width: 991.98px) {
  .sidebar-backdrop { inset: 65px 0 0 0; }
  .sidebar, body.sidebar-collapsed .sidebar { top: 65px; width: 225px; }
}
/* top bar (Classic): the portal's navy with its shadow; the toggle is a white round arrow, the company name plain white 18 px;
   Search Customer sits right after the name (a 33 px pill); the icon buttons are bare white icons, Online Client Monitoring 12 px bold */
body:not(.ui-modern) .topbar { background: rgba(20, 54, 82, .94); box-shadow: 0 1px 5px rgba(0, 0, 0, .3); padding: 0 15px; }
body:not(.ui-modern) .topbar-brand { gap: 5px; }
body:not(.ui-modern) .sidebar-toggle-collapse { padding: 0; margin: 0; font-size: 20px; line-height: 1; color: #fff; }
body:not(.ui-modern) .sidebar-toggle-collapse:hover { color: #fff; opacity: .85; }
body:not(.ui-modern) .topbar .brand-mark { display: none; }
body:not(.ui-modern) .topbar .brand-name { font-size: 18px; line-height: 20px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body:not(.ui-modern) .topbar .brand-name b { color: inherit; font-weight: 400; }
body:not(.ui-modern) .topbar-right { flex: 1 1 auto; justify-content: flex-end; gap: 4px; min-width: 0; }
body:not(.ui-modern) .topbar-right > .select2-container { order: -1; margin-right: auto; }
@media (min-width: 768px) { body:not(.ui-modern) .topbar-right > .select2-container { width: 188px !important; } }
body:not(.ui-modern) .topbar-right > .select2-container .select2-selection.select2-selection--single { height: 33px !important; min-height: 33px !important; border-radius: 20px; border-color: #aaa; }
body:not(.ui-modern) .topbar-right > .select2-container .select2-selection__rendered { line-height: 31px; padding-left: 12px; }
body:not(.ui-modern) .topbar-right > .select2-container .select2-selection__arrow { height: 31px; right: 6px; }
body:not(.ui-modern) .topbar .btn-dark {
  --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, .12); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, .18); --bs-btn-active-border-color: transparent; --bs-btn-active-color: #fff;
  padding: 7px; border-radius: 3px;
}
body:not(.ui-modern) .topbar .btn-dark:not(:has(.topbar-btn-label)) > i { font-size: 17.5px; }
body:not(.ui-modern) .topbar .btn-dark:has(.topbar-btn-label) { font-size: 12px; font-weight: 700; padding: 7px 10px; }
body:not(.ui-modern) .topbar .btn-dark:has(.topbar-btn-label) > i { font-size: 15px; margin-right: 3px; }
@media (min-width: 992px) {
  /* the name takes the menu's width, so Search Customer starts where the page does (x = 229 on the portal) */
  body:not(.ui-modern) .topbar-brand { flex: 0 0 214px; min-width: 0; }
  body:not(.ui-modern) .topbar-brand .brand-link { min-width: 0; }
}
/* side menu (Classic, desktop): Menu Search 4 px from the edges, 46 px rows with a 20 px icon column 15 px in and the 13 px
   label 12 px after it, 36 px submenu rows (text 55 px in) */
body:not(.ui-modern) .menu-search { padding: 5px 4px; }
@media (min-width: 992px) {
  body:not(.ui-modern) .sidebar .nav-item, body:not(.ui-modern) .sidebar .nav-group-toggle { min-height: 46px; padding: 5px 15px; gap: 12px; border-left: 0; font-size: 13px; }
  body:not(.ui-modern) .sidebar .nav-ico { width: 20px; font-size: 14px; flex: 0 0 20px; }
  body:not(.ui-modern) .sidebar .nav-submenu a { padding: 7px 15px 7px 55px; line-height: 22px; }
}
/* page title and breadcrumb (Classic): 22 px navy title with a 22 px icon, 12 px grey sub-title, 12 px breadcrumb (current page grey);
   the page starts 15 px under the top bar and 30 px from the menu and the right edge */
body:not(.ui-modern) .content { padding: 15px 30px 30px; }
@media (max-width: 575.98px) { body:not(.ui-modern) .content { padding: 15px 15px 24px; } }
body:not(.ui-modern) .page-head { padding: 10px 0; margin-bottom: 15px; }
body:not(.ui-modern) .page-head h1 { color: #0f2d46; line-height: 24px; }
body:not(.ui-modern) .page-head h1 .head-icon { color: #0f2d46; font-size: 22px; line-height: 1; margin-right: 6px; vertical-align: -2px; }
body:not(.ui-modern) .page-head .sub { color: #888; font-size: 12px; font-weight: 300; margin-left: 5px; line-height: 1; }
body:not(.ui-modern) .breadcrumb-trail { font-size: 12px; color: #333; }
body:not(.ui-modern) .breadcrumb-trail .current { color: #777; font-weight: 400; }

/* ---- v1.9.60: buttons as on the portal (its 118 menu pages read side by side with this app's at 1366 px) ----
   (1) the navy action button carries the portal's soft shadow; a disabled one stays navy, only faded (it went transparent) */
body:not(.ui-modern) .btn-ref-navy { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); }
.btn-ref-navy { --bs-btn-disabled-bg: rgba(20, 54, 82, .94); --bs-btn-disabled-color: #fff; --bs-btn-disabled-border-color: transparent; --bs-btn-disabled-opacity: .55; }
/* (2) where the portal's list uses DataTables' own export buttons, Generate CSV / PDF / Excel look like them:
   navy, 14 px regular weight, 8 px padding (37 px high), no shadow, text only */
body:not(.ui-modern):is(.page-clients-scheduler, .page-clients-change-requests, .page-clients-portal, .page-billing-daily-collection,
  .page-network-diagram-customer-nodes, .page-network-diagram-distributed-items, .page-support-history, .page-tasks-list, .page-tasks-history,
  .page-bandwidth-buy-purchase-bills, .page-bandwidth-sell-sales-invoices, .page-bandwidth-sell-bill-collection, .page-asset-list, .page-asset-destroyed,
  .page-sales-service-installation-fee, .page-expense-daily, .page-expense-history, .page-accounting-vouchers, .page-accounting-journal,
  .page-report-bill-collection, .page-report-discount, .page-report-customer, .page-report-message, .page-report-due-customer-sms,
  .page-report-processing-fee, .page-report-financial-transaction, .page-system-activity-logger)
  .content :is(a[href*="export"], [data-voucher-export]):is(.btn, .bulk-btn) {
  display: inline-block; background: rgba(20, 54, 82, .94); color: #fff; font-size: 14px; font-weight: 400; line-height: 21px;
  padding: 8px; border: 0; border-radius: 20px; box-shadow: none; text-decoration: none;
}
body:not(.ui-modern):is(.page-clients-scheduler, .page-clients-change-requests, .page-clients-portal, .page-billing-daily-collection,
  .page-network-diagram-customer-nodes, .page-network-diagram-distributed-items, .page-support-history, .page-tasks-list, .page-tasks-history,
  .page-bandwidth-buy-purchase-bills, .page-bandwidth-sell-sales-invoices, .page-bandwidth-sell-bill-collection, .page-asset-list, .page-asset-destroyed,
  .page-sales-service-installation-fee, .page-expense-daily, .page-expense-history, .page-accounting-vouchers, .page-accounting-journal,
  .page-report-bill-collection, .page-report-discount, .page-report-customer, .page-report-message, .page-report-due-customer-sms,
  .page-report-processing-fee, .page-report-financial-transaction, .page-system-activity-logger)
  .content :is(a[href*="export"], [data-voucher-export]):is(.btn, .bulk-btn) > i { display: none; }
/* (3) the portal's bigger page actions (15 px, 500 weight, 36 px high): Create / Cancel / Approve Schedules,
   Approve / Cancel Request, Daily Expense's "+ Expense" */
body:not(.ui-modern) :is(#createScheduleBtn, #cancelSchedulesBtn, #approveSchedulesBtn),
body:not(.ui-modern).page-clients-change-requests .cr-toolbar button.bulk-btn,
body:not(.ui-modern).page-expense-daily .content a.btn-ref-navy[href*="voucher_add.php"] {
  font-size: 15px; font-weight: 500; line-height: 21px; padding: 8px 10px 7px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}
/* (4) shared list tables (script.js's .config-table DataTables, custom dom without Bootstrap rows): "Show N entries" left and
   Search right on one line, "Showing x to y" left and the pager right on one line, as on the portal */
.dataTables_wrapper.dt-bootstrap5 > .dataTables_length { float: left; width: auto; }
.dataTables_wrapper.dt-bootstrap5 > .dataTables_filter { float: right; width: auto; }
.dataTables_wrapper.dt-bootstrap5 > table.dataTable, .dataTables_wrapper.dt-bootstrap5 > .dataTables_processing + table.dataTable { clear: both; }
.dataTables_wrapper.dt-bootstrap5 > .dataTables_info { float: left; }
.dataTables_wrapper.dt-bootstrap5 > .dataTables_paginate { float: right; }
.dataTables_wrapper.dt-bootstrap5::after { content: ""; display: table; clear: both; }
/* a filter grid's column never grows with a long Select2 choice (Task History's Clients picker) */
.form-grid-6 > * { min-width: 0; }

/* ---- v1.9.61: form buttons as on the portal ----
   Add / Edit Client: Go To List (grey) and Save & Exit (navy) are 40 px, 16 px light (300) text, 25 px corners */
body:not(.ui-modern):is(.page-clients-add, .page-clients-edit) .form-actions > .btn { font-size: 16px; font-weight: 300; line-height: 22px; padding: 9px 20px; border-radius: 25px !important; }
/* Add POP and Purchase Entry: every action is the navy 13 px bold pill with the soft shadow (Go To List / Save, Back to List / Add New / Save) */
body:not(.ui-modern).page-pop-add .form-actions > .btn,
body:not(.ui-modern).page-purchase-bill-add :is(.page-head a.btn-secondary, #addRowBtn, form button[type=submit].btn-primary) {
  background: rgba(20, 54, 82, .94) !important; color: #fff !important; border: 0; font-size: 13px; font-weight: 700; line-height: 20px; padding: 7px 12px; border-radius: 20px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}
body:not(.ui-modern).page-pop-add .form-actions > .btn:hover,
body:not(.ui-modern).page-purchase-bill-add :is(.page-head a.btn-secondary, #addRowBtn, form button[type=submit].btn-primary):hover { background: rgba(20, 54, 82, 1) !important; color: #fff !important; }
/* v1.9.80: the portal's #headerLoader - a thin moving bar at the very top while a status switch is being saved */
.hdr-loader { display: none; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 20000;
    background: linear-gradient(90deg, #2196f3, #22425c, #2196f3); background-size: 200% 100%; animation: hdrLoaderMove 1s linear infinite; }
@keyframes hdrLoaderMove { from { background-position: 200% 0; } to { background-position: 0 0; } }

/* ---- v1.9.87 Client List, better than the portal ---- */
/* (1) quick filter chips above the list */
.cl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.cl-chip { padding: 4px 16px; border-radius: 20px; border: 1px solid rgba(20, 54, 82, .94); color: rgba(20, 54, 82, .94); background: #fff;
  font-size: 13px; font-weight: 700; text-decoration: none; transition: .2s; }
.cl-chip:hover, .cl-chip.is-on { background: rgba(20, 54, 82, .94); color: #fff; }
/* (2) the tick and C.Code columns stay in view while the wide table scrolls sideways (desktop) */
@media (min-width: 768px) {
  #clientListTable tbody td:nth-child(-n+2) { position: sticky; z-index: 2; background: #fff; }
  #clientListTable thead th:nth-child(-n+2) { position: sticky; z-index: 3; background: #22425c; }
  #clientListTable :is(th, td):nth-child(1) { left: 0; }
  #clientListTable :is(th, td):nth-child(2) { box-shadow: 3px 0 4px -2px rgba(0, 0, 0, .15); }
  #clientListTable tbody tr:hover td:nth-child(-n+2) { background: #f5f8fb; }
  /* v1.9.136 (the user): C.Code ... Conn. Type stay on one line (CL-00467 broke at its hyphen); a narrow window squeezes the
     columns from Cus. Type on instead, and the table scrolls sideways */
  #clientListTable :is(th, td):nth-child(n+2):nth-child(-n+8) { white-space: nowrap; }
  /* v1.9.137 (the user): on a wide enough window everything up to Conn. Type stays in place (list.php sets each left offset and
     the class); only Cus. Type onward scrolls sideways */
  #clientListTable.cl-pin8 tbody td:nth-child(-n+8) { position: sticky; z-index: 2; background: #fff; }
  #clientListTable.cl-pin8 thead th:nth-child(-n+8) { position: sticky; z-index: 3; background: #22425c; }
  #clientListTable.cl-pin8 :is(th, td):nth-child(2) { box-shadow: none; }
  #clientListTable.cl-pin8 :is(th, td):nth-child(8) { box-shadow: 3px 0 4px -2px rgba(0, 0, 0, .15); }
  #clientListTable.cl-pin8 tbody tr:hover td:nth-child(-n+8) { background: #f5f8fb; }
}
/* (3) phones: every client is a card (name, mobile + Call, package, bill, statuses, switch, actions) instead of the 16-column table */
.cl-call { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: #1a8f3c; color: #fff !important; margin-right: 6px; font-size: 12px; text-decoration: none; }
@media (max-width: 767.98px) {
  .table-scroll:has(#clientListTable) { overflow: visible; }
  #clientListTable.cl-cards { min-width: 0 !important; border: 0; }
  #clientListTable.cl-cards thead { display: none; }
  #clientListTable.cl-cards, #clientListTable.cl-cards tbody, #clientListTable.cl-cards tfoot { display: block; width: 100%; }
  #clientListTable.cl-cards tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; border: 1px solid #dfe5ea; border-radius: 14px;
    padding: 10px 12px 12px; margin-bottom: 12px; background: #fff; box-shadow: 0 2px 6px rgba(20, 54, 82, .08); }
  #clientListTable.cl-cards tbody td { display: block; border: 0 !important; padding: 0 !important; text-align: left !important; font-size: 13px; white-space: normal; min-width: 0; }
  #clientListTable.cl-cards tbody td::before { content: attr(data-label); display: block; font-size: 10.5px; font-weight: 700; color: #7a8794; text-transform: uppercase; letter-spacing: .3px; }
  #clientListTable.cl-cards tbody td:nth-child(1)::before, #clientListTable.cl-cards tbody td:nth-child(5)::before, #clientListTable.cl-cards tbody td:last-child::before { content: none; }
  #clientListTable.cl-cards tbody td:nth-child(5) { grid-column: 1 / -1; order: -1; font-size: 15px; font-weight: 700; color: #22425c; }
  #clientListTable.cl-cards tbody td:nth-child(1) { order: -2; grid-column: 1 / -1; }
  #clientListTable.cl-cards tbody td:is(:nth-child(4), :nth-child(8), :nth-child(9), :nth-child(12)) { display: none; }
  #clientListTable.cl-cards tbody td:last-child { grid-column: 1 / -1; }
  #clientListTable.cl-cards tfoot tr { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: #eef3f7; }
  #clientListTable.cl-cards tfoot th { border: 0; padding: 0; }
  #clientListTable.cl-cards tfoot th:empty { display: none; }
}
/* ---- v1.9.88 the same upgrades for any list (listUpgrade() in script.js): sticky columns on a desktop, cards on a phone ---- */
@media (min-width: 768px) {
  table.lx-cards tbody td.lx-stick { position: sticky; z-index: 2; background: #fff; }
  /* !important: DataTables makes sortable header cells position: relative (sort arrows), and a relative cell with a left offset
     slides right over its neighbours (v1.9.139 - the Online page's header broke) */
  table.lx-cards thead th.lx-stick { position: sticky !important; z-index: 3; background: #22425c; }
  table.lx-cards tbody tr:hover td.lx-stick { background: #f5f8fb; }
  table.lx-cards :is(th, td).lx-nw { white-space: nowrap; }   /* v1.9.138: the pinned block's columns stay on one line */
  table.lx-cards :is(th, td).lx-stick + :is(th, td):not(.lx-stick) { box-shadow: inset 3px 0 4px -3px rgba(0, 0, 0, .18); }
}
@media (max-width: 767.98px) {
  :is(.table-scroll, .table-responsive):has(table.lx-cards) { overflow: visible; }
  table.lx-cards { min-width: 0 !important; border: 0; }
  table.lx-cards thead { display: none; }
  table.lx-cards, table.lx-cards tbody, table.lx-cards tfoot { display: block; width: 100%; }
  table.lx-cards tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; border: 1px solid #dfe5ea; border-radius: 14px;
    padding: 10px 12px 12px; margin-bottom: 12px; background: #fff; box-shadow: 0 2px 6px rgba(20, 54, 82, .08); }
  table.lx-cards tbody td { display: block; border: 0 !important; padding: 0 !important; text-align: left !important; font-size: 13px; white-space: normal; min-width: 0; }
  table.lx-cards tbody td::before { content: attr(data-label); display: block; font-size: 10.5px; font-weight: 700; color: #7a8794; text-transform: uppercase; letter-spacing: .3px; }
  table.lx-cards tbody td:is(.lx-tick, .lx-name, .lx-act)::before { content: none; }
  table.lx-cards tbody td.lx-tick { order: -2; grid-column: 1 / -1; }
  table.lx-cards tbody td.lx-name { order: -1; grid-column: 1 / -1; font-size: 15px; font-weight: 700; color: #22425c; }
  table.lx-cards tbody td.lx-hide { display: none; }
  table.lx-cards tbody td.lx-act { grid-column: 1 / -1; }
  table.lx-cards tbody td[colspan] { grid-column: 1 / -1; text-align: center !important; }
  table.lx-cards tfoot tr { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px; border-radius: 10px; background: #eef3f7; }
  table.lx-cards tfoot :is(th, td) { border: 0; padding: 0; }
  table.lx-cards tfoot :is(th, td):empty { display: none; }
}

/* v1.9.117 Bill Receive modal laid out as the portal's (includes/bill_receive_modal.php): label | field | label | field rows,
   read-only fields greyed, the amounts table centred and striped, the two ticks large; two columns on a phone. */
.br-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 10px 14px; align-items: center; }
.br-grid > label { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #46566a; }
.br-grid .form-control.br-ro { background: #e9ecef; color: #495057; }
.br-grid .br-note { grid-column: span 2; font-size: 12px; color: #6c757d; }
.br-amounts { font-size: 13.5px; }
.br-amounts th, .br-amounts td { text-align: center; vertical-align: middle; }
.br-amounts tbody tr:nth-child(odd) td { background: #f2f4f7; }
.br-amounts td .form-control { max-width: 260px; margin: 0 auto; text-align: center; }
.br-vat-box { margin: 0 0 0 10px; font-weight: 400; font-size: 13px; white-space: nowrap; }
.br-extra { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 6px; }
.br-extra label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 600; color: #2b3a4c; }
.br-extra input[type=checkbox] { width: 20px; height: 20px; }
@media (max-width: 575px) {
  .br-grid { grid-template-columns: max-content minmax(0, 1fr); }
  .br-grid .br-note { grid-column: 1 / -1; }
}

/* v1.9.117 App User Review (system/user_view.php): the user's details, and chips counting each kind of activity */
.uv-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 18px; }
.uv-info > div { display: flex; flex-direction: column; gap: 2px; }
.uv-info > div > span { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #6c7a8a; }
.uv-info b { font-size: 14.5px; font-weight: 600; color: #22303f; }
.uv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.uv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid #c9d3de; background: #f5f8fb; color: #2b3a4c; font-size: 13px; text-decoration: none; }
.uv-chip b { background: #22425c; color: #fff; border-radius: 999px; padding: 0 8px; font-size: 12px; }
.uv-chip.on { background: #22425c; color: #fff; border-color: #22425c; }
.uv-chip.on b { background: #fff; color: #22425c; }