/* ============================================================
   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. Submenus,
   chevrons and the "Coming soon" heading hide outright rather than
   trying to reproduce the reference's hover-flyout, which is a much
   bigger feature than "click to narrow to icons" asked for. */
.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: 60px; }
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-submenu,
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;
}

/* 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; }
.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; }
.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-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: #f3f3f3; color: #0f2d46; 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; }
  /* light drawer: navy text, grey open group, navy current page */
  .sidebar .nav-item, .sidebar .nav-group-toggle { color: #0f2d46; font-weight: 700; padding: 12px 18px; border-left: 0; }
  .sidebar .nav-item:hover, .sidebar .nav-group-toggle:hover { background: #e9e9e9; color: #0f2d46; }
  .sidebar .nav-group-toggle:not(.collapsed), .sidebar .nav-group-toggle.active { background: #e9e9e9; color: #0f2d46; }
  .sidebar .nav-item.active { background: #21415b; color: #fff; }
  .sidebar .nav-ico, .sidebar .chev { color: #0f2d46; }
  .sidebar .nav-item.active .nav-ico { color: #fff; }
  .sidebar .nav-submenu { background: #f3f3f3; }
  .sidebar .nav-submenu a { position: relative; color: #0f2d46; font-size: 14px; font-weight: 400; padding: 10px 18px 10px 52px; border-left: 0; }
  .sidebar .nav-submenu a::before { content: ""; position: absolute; left: 22px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border: 2px solid #0f2d46; border-radius: 50%; box-sizing: border-box; background: radial-gradient(circle, #0f2d46 0 1.5px, transparent 2px); }
  .sidebar .nav-submenu a:hover { background: #e9e9e9; color: #0f2d46; }
  .sidebar .nav-submenu a.active { background: #21415b; color: #fff; font-weight: 700; }
  .sidebar .nav-submenu a.active::before { border-color: #fff; background: radial-gradient(circle, #fff 0 1.5px, transparent 2px); }
  .sidebar .nav-section { color: #6b7b88; }
  .sidebar .nav-release { color: #0f2d46; }
}
/* ---- 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 .knob { top: 4px; left: 4px; transition: left .2s; }
.toggle-switch.on .knob { left: 30px; }
/* 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); } }
/* 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; }
}