/* =====================================================================
   WAYVZ Modern Theme  —  PART 2 override   (MAPPED + HARDENED for ASTPP V6.0)
   Linked LAST in header.php (:143) and header_webpage.php (:31), after
   bootstrap / facebox / flexigrid / style.css / com-style.css.
   CSS-ONLY. No markup, no JS, no header.php changes.

   HARDENING: selectors win by WEIGHT, not load order. Where Bootstrap /
   flexigrid / com-style out-specify a plain selector, the rule is raised
   (body-prefixed and/or full chain) or marked !important to beat a
   Bootstrap !important utility (e.g. .bg-light).
     - flexigrid header cells competitor: .flexigrid div.hDivBox thead tr th  (0,2,4)
     - nav links competitor:              .navbar-light .navbar-nav .nav-link (0,3,0)
     - navbar bg competitor:              .bg-light { ... !important }
   FLEXIGRID-SAFE: only color / typography / background / border-color are
   touched on grid cells. NO padding/width/size changes inside .flexigrid
   (its JS measures inline px widths and syncs header<->body columns).

   Palette locked: brand brick red #A01E1E. Tabular numerals. Waveform accent.
   Revert: restore the .bak / timestamped backup, or drop the <link>.

   ---------------------------------------------------------------------
   NEUTRAL PULL-BACK PASS (2026-06-17) — modern SaaS-dashboard direction.
   Goal: read MOSTLY NEUTRAL (grey-white surfaces, white cards, soft diffuse
   shadows, muted grey type) with brick-red #A01E1E used ONLY as a precise
   ACCENT (primary buttons, active nav, links/hover, focus rings, small
   accent bars). Semantic green/amber/red are preserved where they signal
   status. Changes are mostly TOKEN-level (the :root block cascades), plus
   de-reddening of hardcoded warm values (warm cream -> neutral grey,
   brown-tinted shadows -> neutral slate, red hover washes -> neutral).
   Two "red vs neutral" surfaces are offered as A/B toggle blocks:
     (1) the full-width section header bar  -> see "PAGE CHROME"
     (2) the four dashboard stat cards      -> see "DASHBOARD (1)"
   Login is INTENTIONALLY kept brand-red: a brand splash screen is the
   standard place to let the brand color run full-bleed while the app
   itself stays neutral. Flexigrid touched COLOR/TYPE/SHADOW only.
   ---------------------------------------------------------------------

   OPEN DECISION (intentionally not implemented): ASTPP's PHP menu emits NO
   `.active` class, so the active-tab underline is INERT. Add `.active` to
   the current `.nav-link` (JS or header.php) later if you want it.
   ===================================================================== */

/* MODERN TYPE: load Inter (the professional SaaS/data-UI standard). Montserrat +
   system fonts remain graceful fallbacks if the webfont can't be fetched (offline
   server -> no visual regression). @import MUST precede all rules, so it sits here
   right after the banner comment. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* TRENDY PALETTE (2026-07-03) — blue-primary SaaS, slate chrome, Tailwind semantics */
  --brand:#3B82F6; --brand-deep:#2563EB; --clay:#60A5FA; --brand-soft:rgba(59,130,246,.10);
  /* surfaces: light slate body, white cards, slate-200 lines */
  --surface:#F1F5F9; --card:#FFFFFF; --line:#E2E8F0; --line-soft:#EDF1F5;
  /* type: slate-900 text, slate-500 muted, slate-400 muted-2 */
  --text:#0F172A; --muted:#64748B; --muted-2:#94A3B8;
  --good:#10B981; --good-soft:#D1FAE5; --warn:#F59E0B; --warn-soft:#FEF3C7;
  --bad:#EF4444; --bad-soft:#FEE2E2;
  /* extra semantic accent for KPI metrics (ACD/ALOC/PDD) */
  --metric:#8B5CF6; --metric-soft:#EDE9FE;
  /* modern rounding: cards ~12px, buttons/inputs ~8px */
  --r:16px; --r-md:12px; --r-sm:8px;
  --glass:rgba(255,255,255,.78);
  /* soft DIFFUSE neutral-slate shadows (replaces brown-tinted depth) */
  /* premium card depth: two-stop layered shadow for crisp-but-soft elevation */
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --shadow-md:0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.05);
  --shadow-lg:0 12px 32px rgba(16,24,40,.14);
  --ring:0 0 0 1px rgba(16,24,40,.04);
  --font:"Inter","Montserrat",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",ui-monospace,"Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
}

/* ---- numbers: align money columns ---- */
.num,td,.k-val,.dashboard_values .h1,.dashboard_values div.h1{font-variant-numeric:tabular-nums lining-nums}

/* ===== BODY WASH =================================================
   [CONFIRMED] base style.css sets body{background:#E2E9F2}. Raised to body
   weight; gradient keeps fixed attachment.
   PULL-BACK: dropped the two heavy red/clay radials for a near-flat neutral
   grey-white wash + a single faint (3%) brand whisper top-right so the page
   reads neutral, not red. */
body{
  font-family:var(--font) !important; color:var(--text); -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 620px at 90% -12%, rgba(59,130,246,.03), transparent 60%),
    linear-gradient(180deg,#F7F8FA,#F4F5F7) fixed !important;
}

/* ===== GLOBAL POLISH (portal-wide micro-touches) ================
   Small, safe, reversible refinements that lift the whole portal:
   - smooth in-page scrolling
   - branded text-selection highlight
   - modern thin neutral scrollbars (brand on hover)
   COLOUR / behaviour only; no layout or markup change. */
html{ scroll-behavior:smooth; }
::selection{ background:rgba(59,130,246,.18); color:var(--text); }
::-moz-selection{ background:rgba(59,130,246,.18); color:var(--text); }
/* Firefox thin scrollbar */
*{ scrollbar-width:thin; scrollbar-color:var(--muted-2) transparent; }
/* WebKit/Blink scrollbars */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#C7CCD4; border-radius:999px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--brand); border:3px solid transparent; background-clip:content-box; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* ===== FONT REACH — pin the few elements that set their own (non-Montserrat) font ==
   body{font-family:var(--font)!important} governs ONLY body's own font; descendants
   inherit it but lose to any element that sets its OWN font-family (!important does
   not propagate down). Tables already read Montserrat via .flexigrid{font-family:
   'Montserrat'!important}; labels + page headers inherit fine. These three force a
   font that isn't loaded (Noto Sans / Arial -> falls back to plain sans-serif), so
   pin them to var(--font). FONT ONLY — no colour/size/markup/JS. */
body .w-box h2,body .w-box h3,
body .flexigrid div.iDiv input,body .flexigrid div.iDiv select,body .flexigrid div.iDiv textarea,
body div.colCopy{ font-family:var(--font) !important; }

/* ===== BUTTONS ===================================================
   [CONFIRMED] Bootstrap 4 .btn/.btn-primary/.btn-secondary/.btn-danger +
   input[submit]. body-prefixed to beat Bootstrap (0,1,0) on weight.
   PULL-BACK: radius 12->8px, flat-with-subtle-depth (lighter red shadow),
   transition .18s->.15s. Primary stays brick-red = the main accent. */
body .btn, body button.btn, body input[type=submit], body .button{
  border:0; border-radius:8px; font-weight:600; font-size:13px;
  padding:10px 18px; cursor:pointer; transition:.15s ease; font-family:var(--font);
}
body .btn-primary, body input[type=submit], body .btn.primary{
  color:#fff !important; background:linear-gradient(135deg,#2563EB,var(--brand-deep)) !important;
  border:0 !important; box-shadow:0 1px 2px rgba(37,99,235,.20);
}
body .btn-primary:hover, body input[type=submit]:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(37,99,235,.28); }
body .btn-secondary, body .btn-default, body .btn-light, body .btn-ghost{ background:#fff !important; border:1.5px solid var(--line) !important; color:var(--text) !important; }
body .btn-secondary:hover, body .btn-default:hover, body .btn-light:hover, body .btn-ghost:hover{ border-color:var(--muted-2) !important; }
body .btn-danger, body .btn.delete{ background:#fff; border:1.5px solid var(--bad); color:var(--bad); }
body .btn-danger:hover, body .btn.delete:hover{ background:var(--bad); color:#fff; }
/* crisp keyboard focus ring (a11y / premium polish): soft brand halo on focus,
   shown only for keyboard navigation so mouse clicks stay clean. */
body .btn:focus-visible, body button.btn:focus-visible, body input[type=submit]:focus-visible,
body .button:focus-visible, body .btn-success:focus-visible, body .btn-line-warning:focus-visible,
body .btn-line-blue:focus-visible, body .btn-xing:focus-visible, body .btn-warning:focus-visible,
body .btn-update:focus-visible, body .btn-line-danger:focus-visible, body .btn-danger:focus-visible{
  outline:none; box-shadow:0 0 0 4px var(--brand-soft) !important;
}

/* ===== REAL ASTPP BUTTONS (remap onto the classes ASTPP actually emits) ==
   [CONFIRMED] com-style.css FILLS .btn-success / .btn-line-warning / .btn-line-blue /
   .btn-xing / .btn-warning / .btn-update with #3b3280 !important (hover #9D91CC),
   and OUTLINES .btn-line-danger with #E5097F !important. Base weight is (0,1,0)
   !important; the only higher rule (.flexigrid .fbutton span.btn.btn-* at (0,4,1))
   sets line-height ONLY, not colour. So a body-prefixed (0,1,1)+(0,1,2 for ` a`)
   !important wins colour everywhere without touching flexigrid sizing.
   NOTE: .btn-update is included — it shares the exact #3b3280 base rule; omit it
   if you want it left purple. PULL-BACK: softened the red shadow only. */
body .btn-success, body .btn-line-warning, body .btn-line-warning a,
body .btn-line-blue, body .btn-line-blue a, body .btn-xing, body .btn-xing a,
body .btn-warning, body .btn-update{
  color:#fff !important;
  background:linear-gradient(135deg,#2563EB,var(--brand-deep)) !important;
  border:0 !important; box-shadow:0 1px 2px rgba(37,99,235,.20);
}
body .btn-success:hover, body .btn-success:focus, body .btn-success:active,
body .btn-line-warning:hover, body .btn-line-warning:hover a,
body .btn-line-blue:hover, body .btn-line-blue:hover a,
body .btn-xing:hover, body .btn-xing:hover a,
body .btn-warning:hover, body .btn-update:hover{
  background:linear-gradient(135deg,var(--clay),#2563EB) !important; color:#fff !important;
}
/* outline button (was magenta #E5097F) -> brand-red outline, fills on hover */
body .btn-line-danger{ color:var(--brand) !important; background:transparent !important; border:1.5px solid var(--brand) !important; }
body .btn-line-danger:hover, body .btn-line-danger:focus, body .btn-line-danger:active{ color:#fff !important; background:var(--brand) !important; border-color:var(--brand) !important; }

/* ===== PAGE CHROME (real ASTPP layout bars) ======================
   [CONFIRMED] full-width bars = .slice.color-one / .slice.color-three wrapping
   .w-section.inverse.border_box. The colour is painted by .border_box
   (style.css (0,1,0): blue gradient rgba(40,78,123,.9)->#2871b9) and by
   #login_form/#customer_form .border_box ((1,1,0) !important: rgb(46,37,112)).
   Section headers = h3.bg-secondary (bootstrap .bg-secondary (0,1,0) !important grey;
   in-card override .card h3.bg-secondary... (0,4,1) sets transparent — left intact).

   JUDGMENT CALL — the big section header bar: red vs neutral. Two options below.
   OPTION A (ACTIVE) = neutral white bar + brand-red title + thin red left accent
   (the modern "mostly neutral, red as accent" direction). OPTION B (commented) =
   keep it red but lighter/flatter with a white title. Because OPTION A makes the
   bar white, the forced-white page title (the `.color-one h2 / .slice h2` rule that
   used to keep the title legible on red) is FLIPPED to brand-red in the SAME block,
   so swapping options means swapping BOTH rules together (each option is self-
   contained). NOTE the `#login_form/#customer_form .border_box` rules below are MORE
   specific, so the login Sign-in button + customer form bar stay brand-red regardless.
   FLAG: if any list page puts extra light-coloured text (besides the h2 title) in
   this bar, OPTION A could render it faint — switch to OPTION B if you spot that. */

/* ---- OPTION A (ACTIVE): neutral header bar, red accent + red title -------------- */
body .w-section.inverse.border_box, body .border_box{
  background:#fff !important;
  border:1px solid var(--line) !important; border-left:3px solid var(--brand) !important;
  box-shadow:var(--shadow);
}
/* PAGE/SECTION TITLE PRESENCE (biggest typographic lever) — the title used to
   read weak (plain red, default size). Give it real heft: larger, heavy weight,
   tight tracking, and a short brand accent underbar so it anchors the page.
   Title-A (ACTIVE) = dark near-black title + short red accent bar (the modern
   "neutral with a precise red accent" look). Title-B (commented) = solid red
   title, no bar (bolder, more branded). Type/colour only — page titles are not
   inside flexigrid, so this is safe. */
body .color-one h2, body .dashboard-left h2, body .slice h2{
  color:var(--text) !important; font-weight:800; font-size:22px;
  letter-spacing:-.01em; line-height:1.25; position:relative;
  display:inline-block; padding-bottom:8px;
}
body .color-one h2::after, body .dashboard-left h2::after, body .slice h2::after{
  content:""; position:absolute; left:0; bottom:0; width:38px; height:3px;
  border-radius:3px; background:var(--brand);
}
/* ---- Title-B (alt): solid brand-red title, no accent bar -----------------------
   To use: comment OUT the two Title-A rules above, then uncomment this.
body .color-one h2, body .dashboard-left h2, body .slice h2{
  color:var(--brand) !important; font-weight:800; font-size:22px;
  letter-spacing:-.01em; line-height:1.25;
}
   ---- end Title-B ---- */

/* ---- OPTION B (alt): keep red, but lighter/flatter + white title ----------------
   To use: comment OUT both OPTION A rules above, then uncomment BOTH rules here.
body .w-section.inverse.border_box, body .border_box{
  background:linear-gradient(135deg,#B4322F 0%, #9A2420 100%) !important;
  border-color:rgba(37,99,235,.30) !important; box-shadow:var(--shadow);
}
body .color-one h2, body .dashboard-left h2, body .slice h2{ color:#fff !important; }
   ---- end OPTION B ---- */

/* login / customer-form bars stay brand-red (more specific than the OPTION rule) */
body #login_form .border_box, body #customer_form .border_box{
  background:linear-gradient(135deg, var(--brand-deep), #1E3A8A) !important;
}
body .slice.color-one, body .slice.color-three{ background:transparent; }
/* section-header strips: light brand tint + brand underline (keeps base dark text readable) */
body h3.bg-secondary, body .w-section .bg-secondary{
  background:var(--brand-soft) !important; border-bottom:2px solid var(--brand) !important;
}

/* ===== INPUTS ====================================================
   [CONFIRMED] Bootstrap .form-control; com-style has .form-control:focus (0,2,0)
   and #floating-label .form-control (1,1,0) -> raised accordingly.
   PULL-BACK: radius 12->8px; resting fill warm #FAFAF9 -> neutral #fff; the
   brand focus ring (the accent) is kept. */
body input[type=text],body input[type=password],body input[type=email],body input[type=number],
body select,body textarea,body .form-control{
  padding:11px 14px; border:1.5px solid var(--line); border-radius:8px;
  font-size:14px; font-family:var(--font); background:#fff; transition:.15s ease;
}
body input:focus,body select:focus,body textarea:focus,body .form-control:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); background:#fff;
}

/* ===== CARDS / STAT BOXES ========================================
   [CONFIRMED] Dashboard tiles = .card / .color-one; big number =
   .dashboard_values div.h1 (style.css 0,1,2); shine wrapper = .card_shine.
   NOTE: no .k-label/.k-sub in ASTPP — those apply only on custom markup.
   PULL-BACK: hard border -> hairline + soft diffuse neutral shadow (definition
   now comes from the shadow, not a line). Hover lift softened to -2px, neutral
   shadow. The 3px top accent bar stays brand-red (a small accent = on-brand). */
body .kpi,body .stat-card,body .card,body .color-one{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-md);
  position:relative; overflow:hidden; box-shadow:var(--shadow); transition:.2s ease;
}
body .kpi,body .stat-card{ padding:20px; }
body .kpi:hover,body .stat-card:hover,body .card_shine:hover,body .card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
body .kpi::before,body .color-one::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--accent,var(--brand)); z-index:1; }
body .kpi.feature{ background:linear-gradient(150deg,#fff 40%,rgba(59,130,246,.04)); border-color:rgba(59,130,246,.16); }
.k-label{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
body .k-val,body .dashboard_values .h1,body .dashboard_values div.h1{ font-size:29px; font-weight:800; letter-spacing:-.03em; color:var(--kc,var(--text)); }
.k-sub{ font-size:11px; color:var(--muted); margin-top:4px; }

/* ===== FORM CARD LAYOUT — BLINK FIX ==============================
   [ROOT CAUSE / CONFIRMED] form.php (build form) wraps each section
   ("Panel Access","Billing Settings",...) in <div class="card"> nested
   inside .card-columns / .card-two / .card-one, which use CSS MULTI-COLUMN
   (column-count:2/1) [style.css 1200-1209] + overflow:auto [style.css 1365].
   Cards inside a CSS multicol context that carry overflow:hidden + a hover
   transform trigger the Chromium compositing bug: the card paints blank and
   only reappears once a repaint is forced (mouse move / scroll / resize) =
   the reported "blinking" on Create Customer/Provider.
   FIX: drop multicol for the form (.pop_md) cards and lay them out with
   flexbox, which has no such repaint bug. Scoped to .pop_md so the addons
   masonry (.addons .card-columns) is left untouched. */
body .pop_md .card-columns,
body .pop_md .card-two.card-columns,
body .pop_md .card-one.card-columns{
  -webkit-column-count:auto !important; -moz-column-count:auto !important; column-count:auto !important;
  -webkit-columns:auto !important; -moz-columns:auto !important; columns:auto !important;
  display:flex !important; flex-wrap:wrap; gap:20px; align-items:flex-start;
  overflow:visible !important;
}
body .pop_md .card-columns > .card{
  display:block !important; flex:1 1 320px; min-width:0; margin:0 !important;
}
body .pop_md .card-one.card-columns > .card{ flex:1 1 100%; }

/* ===== TABLES ====================================================
   Plain (non-grid) tables: invoices, summaries. body-prefixed.
   PULL-BACK: warm header fill + red row-hover wash -> neutral; the red left-edge
   accent on hover is KEPT (precise accent). */
body table:not(.flexigrid table){ width:100%; border-collapse:collapse; font-size:13.5px; }
body thead th{
  text-align:right; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted-2); font-weight:700; padding:12px 16px; background:#F9FAFB; border-bottom:1px solid var(--line);
}
body thead th:first-child{ text-align:left; }
body tbody td{ padding:13px 16px; border-bottom:1px solid var(--line-soft); }
body tbody td:first-child{ text-align:left; font-weight:700; border-left:3px solid transparent; }
body tbody tr{ transition:.14s ease; }
body tbody tr:hover{ background:#F6F7F9; }
body tbody tr:hover td:first-child{ border-left-color:var(--brand); }

/* ----- FLEXIGRID (HARDENED, layout-safe) -----------------------------
   [CONFIRMED] .flexigrid > div.hDiv > div.hDivBox > table (header)
                .flexigrid > div.bDiv > table              (body)
   Competitor specificities beaten via full chain + body prefix.
   ONLY color/typography/background/border-color — NO padding/width changes,
   so flexigrid's JS column-width sync stays intact.
   PULL-BACK: warm header fill #FBFAF9 -> neutral #F9FAFB; even-row + row-hover
   washes de-reddened to neutral greys. The 2px brand header underline is KEPT
   (thickness unchanged = layout-safe; colour = a small brand accent). The red
   left-edge row accent on hover lives in the micro-interactions block (kept). */
body .flexigrid{ border-color:var(--line) !important; }
body .flexigrid div.hDiv{ background:#F9FAFB !important; border-bottom:2px solid var(--brand); }
body .flexigrid div.hDivBox thead tr th{ background:transparent !important; border-color:var(--line) !important; }
body .flexigrid div.hDivBox thead tr th div{ text-transform:uppercase; letter-spacing:.04em; font-size:10.5px; color:var(--muted); font-weight:700; }
body .flexigrid div.bDiv table td{ border-color:var(--line) !important; }
/* alternating row tint (flexigrid tags even rows tr.erow). erow MUST precede the
   :hover rule below: identical specificity (0,3,5)+!important, so source order decides
   — hover comes last so the neutral hover still wins on even rows. background only. */
body .flexigrid div.bDiv table tr.erow td{ background:#FAFBFC !important; }
body .flexigrid div.bDiv table tr:hover td{ background:#F3F4F6 !important; }
/* grid name links (kuwait-did, temu-backup, test-prov): Montserrat reached the cells
   but the linked anchor text still inherited an old font. Pin the body anchors (and the
   inner name span / number-icon spans) to var(--font). FONT ONLY — colour, JS, widths,
   dots and the status toggle are untouched. */
body .flexigrid div.bDiv table td a,
body .flexigrid div.bDiv table td a span,
body .flexigrid div.bDiv table td a.account-link,
body .flexigrid div.bDiv table td a .number-icon{ font-family:var(--font) !important; }
/* name links presence: weight 600 + dark text so gateway/account names read as strong
   neutral type; brick-red is reserved for hover (overrides the old indigo #3b3280).
   WEIGHT + COLOUR ONLY — no width/padding/font-size, so column-width JS is untouched. */
body .flexigrid div.bDiv table td a{ font-weight:600; color:var(--text) !important; }
body .flexigrid div.bDiv table td a:hover{ color:var(--brand) !important; }
/* full grid font: flexigrid.css sets its own font-family on the header/body cells and
   out-specifies the inherited Montserrat, so column headers (NAME, SIP PROFILE, PROXY,
   STATUS …) and all data rows still render the old font. Pin the cells + their contents
   to var(--font). FONT ONLY — no width/padding/alignment/colour/dot/toggle changes, so
   flexigrid's inline JS column-width measuring stays intact. */
body .flexigrid div.hDiv th,
body .flexigrid div.hDivBox th,
body .flexigrid div.hDivBox th div,
body .flexigrid div.bDiv td,
body .flexigrid div.bDiv td div,
body .flexigrid div.bDiv td span{ font-family:var(--font) !important; }

/* Status badges -> Bootstrap .badge.* (com-style .badge-success at 0,1,0 -> body raised)
   SEMANTIC colours preserved (green/amber/red carry meaning). */
body .pill,body .badge{ display:inline-block; min-width:36px; padding:4px 10px; border-radius:999px; font-weight:700; font-size:12px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.03); }
body .pill.bad,body .badge-danger{background:var(--bad-soft) !important;color:var(--bad) !important}
body .pill.warn,body .badge-warning{background:var(--warn-soft) !important;color:#A8740E !important}
body .pill.good,body .badge-success{background:var(--good-soft) !important;color:var(--good) !important}
body .pill.zero,body .badge-secondary{background:#F2F4F6 !important;color:var(--muted-2) !important}

/* ===== TOP NAV (frosted glass) ===================================
   [CONFIRMED] nav.navbar.mainmenu, menu #main_menu, links .nav-link.
   navbar bg uses !important to beat Bootstrap .bg-light !important.
   nav-link color body-prefixed to beat .navbar-light .navbar-nav .nav-link (0,3,0).
   See OPEN DECISION re: missing .active class.
   PULL-BACK: frosted glass kept (neutral); brown-tinted shadow -> neutral slate;
   nav-link hover wash de-reddened to neutral; nav-link radius 10->8px. */
body .navbar.mainmenu,.topnav{
  position:sticky; top:0; z-index:5;
  /* BLINK FIX: sticky + backdrop-filter:blur causes a GPU compositing repaint
     glitch ("part of the page blinks until the mouse moves"), aggravated by
     AJAX add/edit forms that change the document height beneath the blurred
     sticky header. Use a near-opaque solid background (no blur) so the sticky
     bar is painted on its own stable layer and never needs to re-sample the
     content scrolling behind it. */
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--ring),0 6px 24px rgba(16,24,40,.06); border-radius:var(--r) var(--r) 0 0;
}
/* nav-link colour competitor is bootstrap .navbar-light .navbar-nav .nav-link (0,3,0);
   the old `body .navbar .nav-link` (0,2,1) LOST to it. Raised below to (0,3,1)/(0,3,2). */
body .navbar-light .navbar-nav .nav-link,body nav.navbar.mainmenu .nav-link,body .navbar .nav-link,body .nav-items a{ color:#5E5A56 !important; text-decoration:none; font-size:13.5px; font-weight:600; padding:8px 13px; border-radius:8px; transition:.15s ease; position:relative; }
body .navbar-light .navbar-nav .nav-link:hover,body nav.navbar.mainmenu .nav-link:hover,body .navbar .nav-link:hover,body .nav-items a:hover{ color:var(--text) !important; background:rgba(17,24,39,.05); }
body .navbar-light .navbar-nav .nav-link.active,body nav.navbar.mainmenu .nav-link.active,body .navbar .nav-link.active,body .nav-items a.active{ color:var(--brand) !important; }
body .navbar .nav-link.active::after,body .nav-items a.active::after{ content:""; position:absolute; left:13px; right:13px; bottom:-1px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--brand),var(--clay)); }

/* User area: ASTPP shows TEXT only (.navbar-profile > .profile_name), no avatar. */
body .navbar-profile .btn{ display:flex; align-items:center; gap:8px; }
body .navbar-profile .profile_name{ font-weight:700; font-size:13px; color:var(--text); }
body .navbar-profile .profile_label{ font-size:11px; }
.avatar{ width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-deep)); display:grid; place-items:center; color:#fff; font-size:12px; font-weight:700; box-shadow:0 4px 12px rgba(37,99,235,.32); }

/* ===== TOP-NAV DROPDOWNS — map ASTPP/Bootstrap blue -> brand-red =========
   [CONFIRMED markup header.php] nav = nav.navbar.mainmenu; toggle =
   li.nav-item.dropdown > a.nav-link.dropdown-toggle ; item = li > a.dropdown-item ;
   submenu = li.dropdown-submenu > a.dropdown-item.dropdown-toggle ;
   profile = .navbar-profile.dropdown > ul.dropdown-menu > li > a.dropdown-item.
   Blue sources, NONE using !important, so a body-prefixed !important beats all:
     style.css:113  .mainmenu a.dropdown-item:hover/:focus  bg rgba(25,118,210)
     style.css:126  .mainmenu .navbar-nav > li:hover/:focus  bg #1976D2 (toggle open/hover)
     style.css:119  .mainmenu .navbar-nav > li.dropdown:hover .nav-link  text on blue
     style.css:94   .mainmenu .dropdown-menu border          #1976D2
     global-style:462/464 .navbar-nav .dropdown-menu > li > a:hover/:focus  #1976D2
     bootstrap      .dropdown-item.active/:active + .nav-link.active  bg #007bff
   Scoped to the nav containers so form/.bootstrap-select dropdowns are untouched.
   COLOUR ONLY — no sizing/markup/JS. The brand-red here is a TRANSIENT interaction
   highlight (hover/open), so it stays as the accent. (#2196F3 is commented out in
   style/com-style; the live one was the switch focus-glow, already remapped above.) */

/* (1) dropdown TOGGLE — hover / open(.show) / active state */
body .mainmenu .navbar-nav > li:hover,
body .mainmenu .navbar-nav > li:focus,
body .mainmenu .navbar-nav > li.show,
body .mainmenu .navbar-nav > li.dropdown.show,
body .mainmenu .navbar-nav > li > a:hover{ background:var(--brand) !important; }
body .mainmenu .navbar-nav > li.dropdown:hover > .nav-link,
body .mainmenu .navbar-nav > li.dropdown.show > .nav-link,
body .mainmenu .navbar-nav > li.show > .nav-link,
body .navbar .nav-item.dropdown.show > .dropdown-toggle,
body .navbar .nav-link.dropdown-toggle:focus{ color:#fff !important; background:var(--brand) !important; }
/* kill Bootstrap primary-blue bg on an .active top-nav link (text stays brand-red) */
body .navbar .nav-link.active,body .mainmenu .navbar-nav .nav-link.active{ background:transparent !important; }

/* (2) dropdown ITEMS — hover / focus / active (main menu + profile menu) */
body .mainmenu .dropdown-menu a.dropdown-item:hover,
body .mainmenu .dropdown-menu a.dropdown-item:focus,
body .mainmenu .navbar-nav .dropdown-menu > li > a:hover,
body .mainmenu .navbar-nav .dropdown-menu > li > a:focus,
body .mainmenu .dropdown-menu a.dropdown-item.active,
body .mainmenu .dropdown-menu a.dropdown-item:active,
body .navbar-profile .dropdown-menu a.dropdown-item:hover,
body .navbar-profile .dropdown-menu a.dropdown-item:focus,
body .navbar-profile .dropdown-menu a.dropdown-item.active,
body .navbar-profile .dropdown-menu a.dropdown-item:active{ background:var(--brand) !important; color:#fff !important; }

/* (3) SUBMENU hover */
body .mainmenu .dropdown-submenu:hover > a.dropdown-item,
body .mainmenu .dropdown-submenu:hover > a,
body .mainmenu .dropdown-submenu > a.dropdown-item:hover,
body .mainmenu .dropdown-submenu > a.dropdown-item:focus{ background:var(--brand) !important; color:#fff !important; }

/* (3b) FLATTEN FLYOUT SUBMENUS -> inline expanded sections (DESKTOP) ===========
   PROBLEM: named sub-groups (e.g. Accounts > "Customers", Configuration >
   "System Configuration") render as li.dropdown-submenu whose items live in a
   nested ul.dropdown-menu (.col-4) that flies out sideways (style.css:141 top:0
   left:100%) only on :hover (style.css:1554). Those side-flyouts are fragile /
   hard to discover -> users report "missing pages in the tabs". FIX (CSS-ONLY,
   reversible): on desktop, drop the nested menu INLINE inside its parent
   dropdown as a static, always-visible indented block. No markup / JS / call-path
   change; the menu DATA is unchanged, it just all shows in one column now. */
@media screen and (min-width:992px){
  /* the parent toggle becomes a quiet SECTION HEADER (not a hover trigger) */
  body .mainmenu .navbar-nav > li.dropdown > ul.dropdown-menu > li.dropdown-submenu > a.dropdown-item.dropdown-toggle{
    pointer-events:none; cursor:default;
    color:var(--muted-2) !important; background:transparent !important;
    font-size:10.5px !important; font-weight:700 !important;
    text-transform:uppercase; letter-spacing:.07em;
    padding-top:10px !important; padding-bottom:4px !important;
  }
  /* hide the sideways flyout arrow on the now-inline header */
  body .mainmenu .dropdown-submenu > a.dropdown-toggle::after{ display:none !important; }
  /* the nested flyout -> static inline block, full width, no card chrome */
  body .mainmenu .navbar-nav > li.dropdown > ul.dropdown-menu > li.dropdown-submenu > ul.dropdown-menu,
  body .mainmenu .navbar-nav > li.show > ul > li > ul.col-4,
  body .mainmenu .navbar-nav > li:hover > ul > li > ul.col-4{
    display:block !important; position:static !important; float:none !important;
    left:auto !important; top:auto !important; bottom:auto !important;
    margin:0 !important; padding:0 0 4px !important;
    width:auto !important; min-width:0 !important; max-width:none !important;
    height:auto !important; min-height:0 !important; overflow:visible !important;
    transform:none !important; animation:none !important;
    background:transparent !important; border:0 !important; box-shadow:none !important;
    border-radius:0 !important;
  }
  /* indent the inline child items so the hierarchy still reads */
  body .mainmenu .navbar-nav > li.dropdown > ul.dropdown-menu > li.dropdown-submenu > ul.dropdown-menu > li > a.dropdown-item{
    padding-left:24px !important;
  }
}

/* (4) menu border (was #1976D2) -> brand-red */
body .mainmenu .dropdown-menu,
body .navbar-profile .dropdown-menu{ border-color:var(--brand) !important; }

/* (5) FORM bootstrap-select dropdowns (Assign, DID Destination, etc.) — these
   are NOT nav menus so the nav rules above skip them; left on Bootstrap's
   default blue active/hover. Recolor selected + hovered + focused option to
   the brand red so form selects match the theme. Scoped to .bootstrap-select
   so the top-nav and profile menus (already styled) are untouched. */
body .bootstrap-select .dropdown-menu li.active > a,
body .bootstrap-select .dropdown-menu li.selected > a,
body .bootstrap-select .dropdown-menu li a:hover,
body .bootstrap-select .dropdown-menu li a:focus,
body .bootstrap-select .dropdown-menu li a:active,
body .bootstrap-select .dropdown-menu li.active > a:hover,
body .bootstrap-select .dropdown-menu li.active > a:focus{
  background:var(--brand) !important; color:#fff !important;
}
body .bootstrap-select .dropdown-menu li.active > a small,
body .bootstrap-select .dropdown-menu li a:hover small{ color:rgba(255,255,255,.7) !important; }

/* ===== FACEBOX MODAL =============================================
   [CONFIRMED] facebox plugin (facebox.css + .facebox()). Real plugin hooks,
   body-prefixed to beat facebox.css. PULL-BACK: radius 18->16px, footer warm
   fill -> neutral; the 3px brand top edge is kept as a small accent. */
body #facebox .popup, body .facebox{
  background:#fff; border-radius:16px; box-shadow:var(--shadow-lg);
  overflow:hidden; border-top:3px solid var(--brand);
}
body #facebox .body, body .facebox .fb-body{ padding:20px; }
body #facebox .footer, body .facebox .fb-foot{ display:flex; justify-content:flex-end; gap:10px; padding:15px 19px; border-top:1px solid var(--line); background:#F9FAFB; }

/* ===== TOAST / FLASH MESSAGE =====================================
   [CONFIRMED] toastr-style containers #toast-container / _ok / _error
   (.toast-top-right). main.css has no toast rules; item is the .toast child.
   SEMANTIC left-accent (green ok / red error) preserved. */
body #toast-container .toast,body #toast-container_ok .toast,body #toast-container_error .toast,body .toast,body .flash-message{
  display:inline-flex; align-items:stretch; gap:12px; background:rgba(255,255,255,.98);
  /* NO backdrop-filter: the toast lives in a position:fixed container and fires
     during create/edit (validation/save), so a blurred fixed layer flickers
     ("blink until mouse move"). Background bumped .92 -> .98 so it reads solid. */
  color:var(--text); border:1px solid var(--line);
  border-radius:12px; padding:14px 17px 14px 13px; box-shadow:var(--shadow-lg); font-size:13.5px; font-weight:600;
}
body #toast-container_ok .toast{ border-left:4px solid var(--good); }
body #toast-container_error .toast,body .toast.err,body .flash-message.error{ border-left:4px solid var(--bad); }
body .toast .accent{ width:4px; border-radius:3px; background:var(--good); }
body .toast.err .accent, body .flash-message.error .accent{ background:var(--bad); }

/* ===== LOGIN (remapped to the REAL view_login.php DOM) ===========
   [CONFIRMED view_login.php] outer = .col-md-12.form_card ; form panel =
   form#login_form.card (+ nested .card) ; fields = #floating-label .form-control
   + .control-label ; Sign-in btn = #login_form .border_box (already brand-red
   via the chrome remap) ; secondary = .btn-outline-primary.btn_index (purple
   rgb(46,37,112) !important -> beaten by #login_form chain + !important).
   Card rules SCOPED to .form_card / #login_form so global .card is untouched.
   INTENTIONALLY KEPT BRAND-RED: the login splash is the one place the brand
   colour runs full-bleed; the app itself stays neutral. (Card radius/shadow
   pick up the new tokens automatically.) */
/* page background: override the inline <body style="background:url(login_bg.jpg)">
   (view_login.php:129) via CSS — !important beats the inline style, no image swap.
   Scoped to the login body by its onload attr so no other page is touched. */
body[onload="FocusOnInput()"]{
  background:
    radial-gradient(820px 460px at 18% 16%, rgba(214,86,86,.55), transparent 58%),
    radial-gradient(600px 500px at 92% 88%, rgba(60,8,10,.5), transparent 60%),
    linear-gradient(135deg,#3B82F6 0%, #2563EB 50%, #1E3A8A 100%) !important;
  background-attachment:fixed !important;
}
.form_card{ display:flex; align-items:center; justify-content:center; }
.form_card #login_form.card, .form_card .card{
  background:rgba(255,255,255,.97); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-radius:20px; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.6);
}
body #floating-label .form-control{ background:#fff; }
body #floating-label .control-label{ color:var(--muted); }
/* secondary login button (was purple .btn-outline-primary.btn_index) -> brand-red outline */
body #login_form .btn-outline-primary, body .form_card .btn-outline-primary.btn_index{
  color:var(--brand) !important; border-color:var(--brand) !important; background:transparent !important;
}
body #login_form .btn-outline-primary:hover, body #login_form .btn_index:hover{ color:#fff !important; background:var(--brand) !important; border-color:var(--brand) !important; }

/* ===== LOGIN BLUE LEFTOVERS — kill the two stock-blue fallbacks =================
   Two color leftovers showed through the merged login: the Sign in button went blue
   on hover, and the Password label rendered blue. Both are pinned to brand-red below.
   COLOUR ONLY — no markup, JS, sizing, or call-path changes. */

/* (A) Sign in button = <button id="save_button" class="btn ... border_box">.
   [CONFIRMED] custome_index.css:192 `.border_box` carries a BLUE gradient
   (rgba(40,78,123,.9)->#2871b9). WAYVZ repaints the RESTING state brand-red,
   but the button had NO themed :hover/:focus/:active, so hover fell back to stock blue.
   Pin all interactive states to a darker brick (var(--brand-deep) -> #3A090C). The
   two-ID chain (#login_form #save_button) + !important beats every stock rule; the
   .border_box alias covers the same button. The base .btn lift/press transitions stay. */
body #login_form #save_button:hover, body #login_form #save_button:focus, body #login_form #save_button:active,
body #login_form .border_box:hover, body #login_form .border_box:focus, body #login_form .border_box:active{
  background:linear-gradient(135deg, var(--brand-deep) 0%, #3A090C 100%) !important;
  color:#fff !important; border-color:transparent !important;
  box-shadow:0 12px 26px rgba(37,99,235,.42) !important;
}

/* (B) Field labels = <label class="control-label"> in each .form-group.
   [CONFIRMED] view_login.php JS adds .control-highlight to EVERY .form-group, so
   com-style.css:88 (#3b3280 !important) and custome_index.css:58 (.control-focus
   #4285f4) paint the labels indigo/blue. WAYVZ's label rule is scoped to
   #floating-label, which the login form does NOT use, so both labels were left blue.
   Force BOTH labels (all states) to light/white so "Password" matches "Account No OR
   Email" on the red panel. Specificity (1 id + 3 class) + !important beats the stock
   !important indigo. COLOUR ONLY. */
body #login_form .control-label,
body #login_form .form-group .control-label,
body #login_form .form-group.control-highlight .control-label,
body #login_form .form-group.control-focus .control-label,
body #login_form .form-group.control-select .control-label,
body #login_form .form-group.focused .control-label{
  color:#fff !important;
}

/* ===== STATUS on/off TOGGLE (.switch/.slider — list-page enable switch) ===
   [CONFIRMED common.php get_status()] markup is
     <label class="switch"><input class="onoffswitch-checkbox" ... checked>
     <span class="slider round"></span></label>
   checked = ON / Active (status==0), unchecked = OFF / Inactive.
   The stock purple is com-style.css:59 `.switch input:checked + .slider`
   (#9D91CC, specificity 0,3,0, no !important); OFF track is #ccc.
   We win with a body-prefixed rule (0,4,1 ON / 0,3,1 OFF) + !important,
   matching this file's convention. ON must stay clearly distinct from OFF:
     ON  -> --brand   (#A01E1E brand-red)
     OFF -> --muted-2 (#9CA3AF neutral grey)
   COLOUR ONLY — knob stays white, sizing/round/transition untouched, no JS.
   Hits every list-page status toggle + the email/sms/alert switches (same markup). */
body .switch .slider{ background-color:var(--muted-2) !important; }
body .switch input:checked + .slider{ background-color:var(--brand) !important; }
/* focus ring: drop the stock blue (#2196F3) for the brand-soft glow */
body .switch input:focus + .slider{ box-shadow:0 0 0 3px var(--brand-soft) !important; }

/* ===== WAVEFORM accent (optional signature) ======================
   Add <span class="wave"><i></i><i></i><i></i><i></i></span> where wanted */
.wave{ display:inline-flex; align-items:flex-end; gap:2px; height:14px; color:var(--brand); }
.wave i{ width:3px; background:currentColor; border-radius:2px; animation:wz-eq 1.15s ease-in-out infinite; }
.wave i:nth-child(1){height:40%} .wave i:nth-child(2){height:100%;animation-delay:.15s}
.wave i:nth-child(3){height:65%;animation-delay:.3s} .wave i:nth-child(4){height:85%;animation-delay:.45s}
@keyframes wz-eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){ .wave i{animation:none} }

/* ============================================================================
   MICRO-INTERACTIONS (trendy / interactive layer) — MOTION + VISUAL ONLY.
   Everything .15–.2s, eased; appended last so it wins where needed. ALL motion
   is disabled under prefers-reduced-motion (single guard at the very end).
   FLEXIGRID-SAFE: the row hover-bar is an INSET box-shadow (NOT a real border-left)
   and name links animate via background-size — so NO cell width / padding / font-size
   change and flexigrid's column-width JS measurement stays intact. */

/* --- Buttons: hover lift + softer shadow grow + responsive press -----------
   base .btn already carries transition:.15s; give the ASTPP-emitted variants the
   same easing, then lift on hover and scale(.98) on press for all of them. */
body .btn-success, body .btn-line-warning, body .btn-line-blue, body .btn-xing,
body .btn-warning, body .btn-update, body .btn-line-danger{ transition:.15s ease; }
body .btn:hover, body button.btn:hover, body input[type=submit]:hover, body .button:hover,
body .btn-success:hover, body .btn-line-warning:hover, body .btn-line-blue:hover,
body .btn-xing:hover, body .btn-warning:hover, body .btn-update:hover,
body .btn-line-danger:hover{ transform:translateY(-1px); }
body .btn:active, body button.btn:active, body input[type=submit]:active, body .button:active,
body .btn-success:active, body .btn-line-warning:active, body .btn-line-blue:active,
body .btn-xing:active, body .btn-warning:active, body .btn-update:active,
body .btn-line-danger:active{ transform:scale(.98); transition-duration:.08s; }
/* white / outline buttons carry no shadow — give the lift some depth on hover */
body .btn-secondary:hover, body .btn-default:hover, body .btn-light:hover,
body .btn-ghost:hover, body .btn-danger:hover, body .btn.delete:hover{ box-shadow:var(--shadow-md); }

/* --- Table rows (flexigrid): ease the neutral hover in + slide a left bar in.
   The bar is an INSET box-shadow that grows 0 -> 3px (visual only, no box change). */
body .flexigrid div.bDiv table td{ transition:background-color .15s ease; }
body .flexigrid div.bDiv table td:first-child{ transition:background-color .15s ease, box-shadow .15s ease; box-shadow:inset 0 0 0 0 var(--brand); }
body .flexigrid div.bDiv table tr:hover td:first-child{ box-shadow:inset 3px 0 0 0 var(--brand); }

/* --- Name links: smooth dark -> brand colour + gradient underline that grows in.
   background-size trick — paints a 1.5px brand underline, 0% -> 100% on hover. */
body .flexigrid div.bDiv table td a{
  background-image:linear-gradient(var(--brand),var(--brand));
  background-repeat:no-repeat; background-position:left bottom; background-size:0% 1.5px;
  transition:color .18s ease, background-size .2s ease;
}
body .flexigrid div.bDiv table td a:hover{ background-size:100% 1.5px; }

/* --- Status toggle: slide instead of snap (track colour + knob travel) ------ */
body .switch .slider{ transition:background-color .2s ease !important; }
body .switch .slider:before{ transition:transform .2s ease, left .2s ease !important; }

/* --- Section-header bar: very subtle elevation (visual only) ---------------- */
body h3.bg-secondary, body .w-section .bg-secondary{ box-shadow:0 1px 0 rgba(59,130,246,.05), 0 6px 16px rgba(16,24,40,.04); }

/* --- Dropdowns: smooth fade/slide-in on open + animated item hover ---------
   Bootstrap toggles .show on open (markup also tags .animated.fadeIn); keep the
   established full-brand item hover but ease it in rather than snapping. */
body .mainmenu .dropdown-menu.show, body .navbar-profile .dropdown-menu.show,
body .dropdown-menu.animated.fadeIn{ animation:wz-dropin .15s ease both; }
@keyframes wz-dropin{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)} }
body .mainmenu .dropdown-menu a.dropdown-item, body .navbar-profile .dropdown-menu a.dropdown-item,
body .mainmenu .navbar-nav .dropdown-menu > li > a,
body .mainmenu .navbar-nav > li > a.nav-link, body .mainmenu .navbar-nav > li{ transition:background-color .15s ease, color .15s ease; }

/* --- Inputs: brand-soft focus ring already animates via transition:.15s on the
   base input rule — left as-is (no duplicate needed). ------------------------ */

/* --- prefers-reduced-motion: kill the motion above AND the pre-existing card /
   button lifts so reduced-motion users get instant, movement-free states. ---- */
@media (prefers-reduced-motion:reduce){
  body .btn, body button.btn, body input[type=submit], body .button,
  body .btn-success, body .btn-line-warning, body .btn-line-blue, body .btn-xing,
  body .btn-warning, body .btn-update, body .btn-line-danger,
  body .kpi, body .stat-card, body .card, body .color-one, body .card_shine,
  body .flexigrid div.bDiv table td, body .flexigrid div.bDiv table td:first-child,
  body .flexigrid div.bDiv table td a,
  body .switch .slider, body .switch .slider:before,
  body .mainmenu .dropdown-menu, body .navbar-profile .dropdown-menu,
  body .mainmenu .dropdown-menu a.dropdown-item, body .navbar-profile .dropdown-menu a.dropdown-item,
  body .mainmenu .navbar-nav > li, body .mainmenu .navbar-nav > li > a.nav-link{
    transition:none !important; animation:none !important;
  }
  body .btn:hover, body .btn:active, body button.btn:hover, body button.btn:active,
  body input[type=submit]:hover, body input[type=submit]:active, body .button:hover, body .button:active,
  body .btn-success:hover, body .btn-line-warning:hover, body .btn-line-blue:hover,
  body .btn-xing:hover, body .btn-warning:hover, body .btn-update:hover, body .btn-line-danger:hover,
  body .btn-primary:hover,
  body .kpi:hover, body .stat-card:hover, body .card:hover, body .card_shine:hover{ transform:none !important; }
  body .dropdown-menu.show, body .navbar-profile .dropdown-menu.show, body .dropdown-menu.animated.fadeIn{ animation:none !important; }
}

/* ===== LOGIN COHESION — merge logo + fields into ONE panel (CSS-only) =========
   [CONFIRMED view_login.php] form#login_form.card.p-4 is the OUTER white panel
   (carries inline style="background:rgba(255,255,255,.8)" -> beaten below with
   !important). Inside it, in order:
       h2.text-center > img#logo            (the WAYVZ logo)
       div.card.px-4.py-5                   (NESTED card: the 2 fields + Sign in)
       div.col-12.mt-4                      (Forgot password / Signup)
   The NESTED .card inherits .form_card .card (rgba(.97)+1px border+20px radius+
   shadow-lg), so it renders as a SECOND hard-edged white box stacked under the
   logo — the "divorced / two stacked pieces" look. The fix dissolves that inner
   box so the logo and fields share one continuous surface, softens the top edge,
   evens the padding, and gives BOTH inputs the same resting brand-red border
   (only the auto-focused #username showed the red ring before). No markup / JS
   change. Appended last so these win on source order + weight.

   Targeting note: the form IS #login_form; the nested card is `#login_form .card`
   (a .card INSIDE the form) — so the two are cleanly separable without markup.
   --------------------------------------------------------------------------- */

/* ---- OPTION A (ACTIVE): seamless single white panel ------------------------- */
/* outer panel -> one solid, soft, rounded surface. !important beats the inline
   rgba(...,.8) on the <form> so the logo no longer floats on a translucent tint. */
body .form_card #login_form.card{
  background:rgba(255,255,255,.97) !important;
  border-radius:22px; box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.6);
  padding:34px 30px !important;            /* single consistent gutter: logo + fields */
}
/* nested field card -> DISSOLVE it: no second box, no border, no shadow, no hard
   top edge, no extra padding. Logo and fields now flow on the SAME white surface. */
body #login_form .card{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  border-radius:0 !important; padding:0 !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
/* logo -> tighten the gap so logo -> fields read as one unit (cap is tunable). */
body #login_form h2{ margin:0; }
body #login_form #logo{ display:inline-block; max-width:210px; margin:2px auto 22px; }
/* BOTH inputs -> same resting brand-red border (was light-grey --line at rest;
   only the FocusOnInput()-focused #username showed the red ring). Focus still
   deepens to full brand + brand-soft ring, so the two fields stay consistent. */
body #login_form .form-control{ border-color:rgba(59,130,246,.32) !important; background:#fff; }
body #login_form .form-control:focus{ border-color:var(--brand) !important; box-shadow:0 0 0 4px var(--brand-soft); }

/* ---- OPTION B (alt): same panel, but a soft brand-red HEADER band behind the
   logo, white field body below — top corners clip both so it reads as ONE branded
   panel (logo header + fields body). Layers ON TOP of Option A (keeps A's dissolved
   inner card + consistent input borders); just uncomment this block.
body .form_card #login_form.card{ padding:0 !important; overflow:hidden; }
body #login_form h2{
  margin:0; padding:30px 24px 24px;
  background:linear-gradient(135deg, var(--brand-deep), var(--brand));
  border-bottom:1px solid rgba(0,0,0,.06);
}
body #login_form #logo{ max-width:200px; margin:0 auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.28)); }
body #login_form .card{ padding:30px 30px 6px !important; }     |* re-add gutter to the field body *|
   ---- end Option B ---- */

/* ============================================================================
   DASHBOARD (view_dashboard.php) — the last stock-ASTPP page. CSS-ONLY.
   No markup / JS / call-path changes. These are dashboard WIDGET classes
   (Bootstrap utilities on .card / .badge / .border), NOT the flexigrid.

   Verified DOM (application/modules/dashboard/views/view_dashboard.php):
     - 4 stat cards live in  .dashboard_values  (line 830). Each colored card is a
       .card.col-12.text-light carrying a Bootstrap bg utility, with a small
       "Today" sub-strip carrying the matching .alert-* tint:
         New Accounts  .bg-primary  + .alert-primary
         Orders        .bg-success  + .alert-success
         Refills       .bg-dark     + .alert-dark
         Total Calls   .bg-danger   + .alert-danger
     - Right-column metric tiles live in  #month_total_info > .card  (line 783).
       Each row is .border + a Bootstrap .border-* accent, with a .badge.text-*
       label: ASR(primary) ACD(dark) MCD(warning) Total Calls(danger)
       Debit(secondary) Cost(info) Profit(success). Header band = .alert-dark.
     - "Get Addons" button = application/views/master.php:29, an a.btn.text-light
       with an INLINE style="...background:#3b3280" (stock purple). Inline style
       has NO !important, so any !important rule here beats it.

   Bootstrap .bg-*/.border-*/.text-* utilities are (0,1,0)!important; every rule
   below is scoped (.dashboard_values… / #month_total_info… / .dashboard-right…)
   so it wins on weight AND stays off every other page's utilities.
   ---------------------------------------------------------------------------- */

/* ----- (1) FOUR STAT CARDS — red vs neutral. Two options. --------------------
   JUDGMENT CALL. OPTION A (ACTIVE) = the modern "neutral-with-accent" treatment:
   white cards, soft shadow, DARK numbers, MUTED labels, and a single distinct
   coloured TOP ACCENT BAR + matching ICON per card (so each card keeps its
   identity without a full colour fill). OPTION B (commented) = the previous
   solid warm-brick ramp (4 coloured fills) — uncomment it and comment OPTION A
   if you prefer the bolder look.

   IMPORTANT (OPTION A): the cards carry Bootstrap `.text-light` (white text,
   !important). On a WHITE card that would be invisible, so OPTION A sets the
   card's own colour to dark with !important (children inherit it) and then only
   re-tints the icon. If you switch to OPTION B, the cards are coloured again and
   the original white text is correct, so OPTION B restores white on
   numbers/labels/icons in its own block. */

/* ---- OPTION A (ACTIVE): neutral white metric cards + per-card accent --------- */
body .dashboard_values .card.bg-primary,
body .dashboard_values .card.bg-success,
body .dashboard_values .card.bg-dark,
body .dashboard_values .card.bg-danger{
  background:#fff !important; border:1px solid var(--line-soft) !important;
  box-shadow:var(--shadow) !important; color:var(--text) !important;   /* dark text cascades to number+label */
}
/* distinct top accent bar per card (retains identity; ::before is free on these .card) */
body .dashboard_values .card.bg-primary::before,
body .dashboard_values .card.bg-success::before,
body .dashboard_values .card.bg-dark::before,
body .dashboard_values .card.bg-danger::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; z-index:1;
}
body .dashboard_values .card.bg-primary::before{ background:var(--brand); }   /* New Accounts — brick */
body .dashboard_values .card.bg-success::before{ background:var(--clay); }    /* Orders — clay */
body .dashboard_values .card.bg-dark::before{ background:var(--brand-deep); } /* Refills — oxblood */
body .dashboard_values .card.bg-danger::before{ background:#8C2B2E; }         /* Total Calls — muted brick */
/* big number -> dark (inherits, pinned for safety); label -> muted grey */
body .dashboard_values .h1{ color:var(--text) !important; }
body .dashboard_values h3{ color:var(--muted) !important; }
/* icon -> the card's accent colour */
body .dashboard_values .card.bg-primary .fa{ color:var(--brand) !important; }
body .dashboard_values .card.bg-success .fa{ color:var(--clay) !important; }
body .dashboard_values .card.bg-dark .fa{ color:var(--brand-deep) !important; }
body .dashboard_values .card.bg-danger .fa{ color:#8C2B2E !important; }
/* the small "Today" sub-strip -> one quiet neutral band, muted text (dt/dd inherit) */
body .dashboard_values .alert-primary,
body .dashboard_values .alert-success,
body .dashboard_values .alert-dark,
body .dashboard_values .alert-danger{
  background:var(--line-soft) !important; color:var(--muted) !important; border-color:transparent !important;
}
/* hover: neutral soft elevation (the .card:hover lift already applies) */
body .dashboard_values .card:hover{ box-shadow:var(--shadow-md) !important; }

/* ---- OPTION B (alt): solid warm-brick ramp (the previous bolder look) --------
   To use: comment OUT the whole OPTION A block above, then uncomment this block.
body .dashboard_values .card.bg-primary{
  background:linear-gradient(135deg,#2563EB,var(--brand-deep)) !important; border-color:rgba(37,99,235,.45) !important;
}
body .dashboard_values .card.bg-success{
  background:linear-gradient(135deg,#C2603F,#9C3D22) !important; border-color:rgba(156,61,34,.45) !important;
}
body .dashboard_values .card.bg-dark{
  background:linear-gradient(135deg,#6E1216,#3A090C) !important; border-color:rgba(58,9,12,.55) !important;
}
body .dashboard_values .card.bg-danger{
  background:linear-gradient(135deg,#8C2B2E,#5A1518) !important; border-color:rgba(90,21,24,.5) !important;
}
body .dashboard_values .alert-primary, body .dashboard_values .alert-success,
body .dashboard_values .alert-dark, body .dashboard_values .alert-danger{
  background:rgba(255,255,255,.14) !important; color:#fff !important; border-color:transparent !important;
}
body .dashboard_values .h1, body .dashboard_values h3, body .dashboard_values .fa{ color:#fff !important; }
body .dashboard_values .card:hover{ box-shadow:0 1px 1px rgba(40,30,28,.05), 0 18px 42px rgba(37,99,235,.22) !important; }
   ---- end OPTION B ---- */

/* ----- (2) RIGHT-COLUMN METRIC TILES — brand palette + kept semantics --------
   brand-red for the primary headline metrics (ASR, Total Calls); semantic amber
   for MCD and semantic green for Profit (kept on purpose); the rest become quiet
   neutrals so the colored ones read. Scoped to #month_total_info so the dashboard
   chart-toggle inputs (.border-primary/.text-primary outside it) are untouched.
   Already aligned with "neutral with red accent + kept semantics" — unchanged. */
/* ASR — primary */
body #month_total_info .border-primary{ border-color:var(--brand) !important; }
body #month_total_info .text-primary{ color:var(--brand) !important; }
/* ACD — neutral */
body #month_total_info .border-dark{ border-color:var(--muted-2) !important; }
body #month_total_info .text-dark{ color:var(--muted) !important; }
/* MCD — semantic warning (amber, kept) */
body #month_total_info .border-warning{ border-color:var(--warn) !important; }
body #month_total_info .text-warning{ color:#A8740E !important; }
/* Total Calls — primary */
body #month_total_info .border-danger{ border-color:var(--brand) !important; }
body #month_total_info .text-danger{ color:var(--brand) !important; }
/* Debit — neutral (darker) */
body #month_total_info .border-secondary{ border-color:var(--muted-2) !important; }
body #month_total_info .text-secondary{ color:var(--muted) !important; }
/* Cost — neutral (lighter, to separate from Debit) */
body #month_total_info .border-info{ border-color:var(--muted-2) !important; }
body #month_total_info .text-info{ color:var(--muted-2) !important; }
/* Profit — semantic good (green, kept) */
body #month_total_info .border-success{ border-color:var(--good) !important; }
body #month_total_info .text-success{ color:var(--good) !important; }
/* header band ("Today / This Month") -> soft brand tint instead of grey alert-dark */
body #month_total_info .alert-dark{ background:var(--brand-soft) !important; color:var(--text) !important; border-color:transparent !important; }
/* micro-interaction: ease a faint warm wash in on tile hover (visual only) */
body #month_total_info .border{ transition:background-color .15s ease; }
body #month_total_info .border:hover{ background:rgba(59,130,246,.04); }

/* ----- (2b) DASHBOARD PANEL BLOCKS — headers, icons, toggles, tables ----------
   The lower dashboard cards (.dashboard-block: Low Balance, Trunk Statistics,
   Top 10 Accounts/Countries, system specs) use h3.text-dark.p-3 headers with a
   .fa.text-primary icon, a "View All" .btn-secondary, "By Minutes" toggle inputs
   (.border-primary/.text-primary) and thead-light tables. com-style paints all of
   .text-primary/.border-primary indigo (#3b3280 !important) — re-brand them. */
/* panel header: clean dark title, hairline divider, brand-red leading icon */
body .dashboard-block > h3.text-dark{
  color:var(--text) !important; font-weight:700; font-size:15px; letter-spacing:-.01em;
  border-bottom:1px solid var(--line-soft); margin:0;
}
body .dashboard-block h3 .fa.text-primary,
body .dashboard-block h3 i.text-primary{ color:var(--brand) !important; }
/* "By Minutes / By Calls" toggle field -> neutral box, brand text */
body .dashboard-block input.border-primary,
body .dashboard-block .border-primary{ border-color:var(--line) !important; }
body .dashboard-block input.text-primary,
body .dashboard-block .text-primary{ color:var(--brand) !important; }
/* badges that label the chart metrics -> brand */
body .dashboard-block .badge.text-primary{ color:var(--brand) !important; }
/* panel tables: quiet neutral head, soft hairlines */
body .dashboard-block thead.thead-light th,
body .dashboard-block .thead-light th{
  background:#F9FAFB !important; color:var(--muted-2) !important;
  text-transform:uppercase; letter-spacing:.06em; font-size:11px; font-weight:600;
  border-color:var(--line-soft) !important;
}
body .dashboard-block .table td{ color:var(--muted); border-color:var(--line-soft) !important; }
body .dashboard-block .table-hover tbody tr:hover{ background:var(--brand-soft) !important; }
/* the small "Notify" button inside Low Balance is .btn-secondary -> base rule covers it */

/* ----- (3) "GET ADDONS" BUTTON — stock purple inline -> brand-red ------------
   master.php:29 <a class="btn text-light" href="/addons/addons_list/..."
   style="...background:#3b3280">. The inline bg has no !important, so this wins.
   Matches .btn-primary (lift + press already come from body .btn:hover/:active). */
body .dashboard-right a.btn[href*="addons_list"]{
  background:linear-gradient(135deg,#2563EB,var(--brand-deep)) !important;
  color:#fff !important; border:0 !important;
  box-shadow:0 1px 2px rgba(37,99,235,.20);
}
body .dashboard-right a.btn[href*="addons_list"]:hover,
body .dashboard-right a.btn[href*="addons_list"]:focus{
  background:linear-gradient(135deg,var(--clay),#2563EB) !important; color:#fff !important;
}

/* ----- (4) CHARTS (Call Stat + the two pies) — NOT touched, see note ---------
   Highcharts here runs in NON-styled mode (no styledMode:true), so series colors
   are emitted as inline SVG fill/stroke attributes from the JS series config in
   view_dashboard.php (Call Stat colors hardcoded at lines 143/150/162/173; the
   pies use Highcharts' default palette). There is no stable CSS class hook to
   retint them safely — recoloring would mean editing that JS. Per "No JS", these
   are intentionally LEFT AS-IS. */

/* ----- (5) reduced-motion: fold the new hover transitions into the existing
   guard (the card lift is already covered by body .card in the main block). */
@media (prefers-reduced-motion:reduce){
  body #month_total_info .border{ transition:none !important; }
}

/* ============================================================================
   FLEXIGRID CHROME (ALL LIST PAGES) — MODERN GRID CHROME. CSS-ONLY.
   Originally a "start with gateways" pass scoped via :has(#fs_gateway_grid);
   now applied to every `body .flexigrid` so all list pages (customers, providers,
   CDRs, rates, DIDs ...) share the same brand chrome — this is what fixes the
   stock-navy pager arrows / reload disc that lingered on the non-gateway grids.
   The only rules still gateway-scoped are the COLUMN-SEMANTIC ones below
   (td:nth-child 4/5/8/9 monospace, 6/7 booleans) — those encode the gateway
   grid's specific column layout and would mis-style other grids' columns.

   LAYOUT-SAFE: touches ONLY the chrome AROUND the grid — wrapper card, title
   .mDiv, toolbar .tDiv, pager .pDiv, quick-search .sDiv. It does NOT change any
   header/body CELL width/padding, so flexigrid's inline column-width JS sync is
   unaffected. The data rows/cells keep the global modern styling already in this
   file. Verified DOM from assets/js/flexigrid.js:
     .flexigrid (wrapper) > .mDiv>.ftitle | .tDiv>.tDiv2>.fbutton | .hDiv |
     .bDiv | .pDiv>.pDiv2 (.pGroup .pButton .pcontrol .pPageStat select[name=rp])
     .sDiv>.sDiv2 (.qsbox + select[name=qtype] + input[type=button] Clear)
   ---------------------------------------------------------------------------- */

/* wrapper -> one clean white card (rounded, hairline, soft shadow) */
body .flexigrid{
  border:1px solid var(--line) !important; border-radius:var(--r-md);
  overflow:hidden; background:#fff; box-shadow:var(--shadow);
}

/* NOTE: these grids are built with title:'' so flexigrid creates NO .mDiv/.ftitle
   title bar — the toolbar (.tDiv) is the topmost chrome, styled below. */

/* toolbar strip (.tDiv) -> quiet neutral bar holding the action buttons */
body .flexigrid .tDiv,
body .flexigrid .tDiv2{
  background:#FBFCFD; border-bottom:1px solid var(--line-soft);
}
body .flexigrid .tDiv2{ display:flex; align-items:center; gap:8px; padding:9px 12px; }
/* toolbar action buttons (Create=btn-line-warning, Delete=btn-line-danger are
   already brand-themed elsewhere) — just give modern radius + spacing + lift */
body .flexigrid .fbutton{
  border-radius:8px; margin:0; transition:.15s ease;
}
body .flexigrid .fbutton:hover{ transform:translateY(-1px); }
body .flexigrid .btnseparator{ display:none; }

/* header band — reinforce the neutral fill + brand underline on this grid */
body .flexigrid .hDiv{ background:#F9FAFB !important; border-bottom:2px solid var(--brand); }

/* pager (.pDiv) -> light footer strip, modern type + rounded rows-per-page select */
body .flexigrid .pDiv{
  background:#FBFCFD; border-top:1px solid var(--line-soft);
}
body .flexigrid .pDiv2{ display:flex; align-items:center; gap:10px; padding:8px 12px; }
body .flexigrid .pcontrol input,
body .flexigrid .pGroup select[name=rp]{
  border:1.5px solid var(--line); border-radius:8px; padding:5px 8px;
  font-family:var(--font); font-size:13px; background:#fff;
}
body .flexigrid .pPageStat,
body .flexigrid .pcontrol{
  font-family:var(--font); font-size:13px; color:var(--muted);
}
/* pager nav buttons (.pButton) — the stock first/prev/next/last/reload/search
   icons are dark NAVY PNG sprites (load.png is the navy reload disc). PNGs can't
   be recoloured, so replace each with a crisp inline-SVG via CSS mask: the icon
   COLOUR is then driven by background-color -> neutral slate at rest, brand-red
   on hover. Kills the off-palette navy. (mask is widely supported; if a very old
   browser ignores it, background:var(--muted) just shows a quiet slate square.) */
body .flexigrid .pDiv .pButton{
  background:var(--muted) !important; border-radius:8px;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:17px 17px; mask-size:17px 17px;
  transition:background-color .15s ease;
}
body .flexigrid .pDiv .pButton:hover,
body .flexigrid .pDiv .pButton.pBtnOver{ background:var(--brand) !important; }
/* per-icon mask shapes (stroke colour in the SVG is irrelevant — mask uses alpha) */
body .flexigrid .pSearch{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27%2F%3E%3Cline%20x1%3D%2721%27%20y1%3D%2721%27%20x2%3D%2716.65%27%20y2%3D%2716.65%27%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27%2F%3E%3Cline%20x1%3D%2721%27%20y1%3D%2721%27%20x2%3D%2716.65%27%20y2%3D%2716.65%27%2F%3E%3C%2Fsvg%3E"); }
body .flexigrid .pFirst{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%2711%2017%206%2012%2011%207%27%2F%3E%3Cpolyline%20points%3D%2718%2017%2013%2012%2018%207%27%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%2711%2017%206%2012%2011%207%27%2F%3E%3Cpolyline%20points%3D%2718%2017%2013%2012%2018%207%27%2F%3E%3C%2Fsvg%3E"); }
body .flexigrid .pPrev{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%2715%2018%209%2012%2015%206%27%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%2715%2018%209%2012%2015%206%27%2F%3E%3C%2Fsvg%3E"); }
body .flexigrid .pNext{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%279%2018%2015%2012%209%206%27%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%279%2018%2015%2012%209%206%27%2F%3E%3C%2Fsvg%3E"); }
body .flexigrid .pLast{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%2713%2017%2018%2012%2013%207%27%2F%3E%3Cpolyline%20points%3D%276%2017%2011%2012%206%207%27%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%2713%2017%2018%2012%2013%207%27%2F%3E%3Cpolyline%20points%3D%276%2017%2011%2012%206%207%27%2F%3E%3C%2Fsvg%3E"); }
body .flexigrid .pReload{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M23%204v6h-6%27%2F%3E%3Cpath%20d%3D%27M20.49%2015a9%209%200%201%201-2.12-9.36L23%2010%27%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M23%204v6h-6%27%2F%3E%3Cpath%20d%3D%27M20.49%2015a9%209%200%201%201-2.12-9.36L23%2010%27%2F%3E%3C%2Fsvg%3E"); }
/* keep the reload spinning while loading (replaces the old load.gif spinner) */
body .flexigrid .pReload.loading{ animation:wz-spin .8s linear infinite; }
@keyframes wz-spin{ to{ transform:rotate(360deg); } }

/* ---- GRID TEXT: modern, professional, interactive (FLEXIGRID-SAFE) ---------
   ONLY font / colour / weight / letter-spacing / background / box-shadow /
   transition — NO width or padding inside cells (flexigrid measures inline px
   column widths in JS, so touching the box model would desync the columns). */

/* column headers -> refined uppercase micro-label: lighter weight than the
   stock bold, wide tracking reads as "designed", quiet slate so DATA leads */
body .flexigrid div.hDivBox thead tr th div{
  font-family:var(--font);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:10px;
  font-weight:600;
  color:var(--muted-2);
}
/* header cell highlights on hover so columns feel interactive */
body .flexigrid div.hDivBox thead tr th{ transition:background-color .15s ease; }
body .flexigrid div.hDivBox thead tr th:hover div{ color:var(--brand); }

/* body cells -> clean readable slate, NORMAL weight (kills the bold look),
   roomier line-height for an airy modern feel, antialiased, tabular figures
   so date / numeric columns line up. Hairline row separators keep it crisp.
   (line-height / border-bottom only affect ROW HEIGHT, which flexigrid does
   not measure — column widths stay intact, so this is grid-safe.) */
body .flexigrid div.bDiv table td,
body .flexigrid div.bDiv table td div{
  font-family:var(--font);
  font-size:13px;
  font-weight:400;
  line-height:1.7;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body .flexigrid div.bDiv table td{
  border-bottom:1px solid var(--line-soft);
}
/* column hierarchy: NAME column (2nd, after the checkbox) leads in strong dark,
   everything else recedes to a calm slate so the eye lands on the gateway name */
body .flexigrid div.bDiv table td:nth-child(2),
body .flexigrid div.bDiv table td:nth-child(2) div{
  color:var(--text); font-weight:600;
}
/* TECHNICAL COLUMNS -> monospace, so the data reads "technical / aligned" like a
   v7 data grid: Username(4), Proxy/IP:port(5), Created(8) & Modified(9) dates.
   font-family only (column widths are fixed inline px in JS, so this is grid-safe);
   slightly tighter tracking + tabular figures keep the digits crisp and aligned. */
body .flexigrid:has(#fs_gateway_grid) div.bDiv table td:nth-child(4),
body .flexigrid:has(#fs_gateway_grid) div.bDiv table td:nth-child(4) div,
body .flexigrid:has(#fs_gateway_grid) div.bDiv table td:nth-child(5),
body .flexigrid:has(#fs_gateway_grid) div.bDiv table td:nth-child(5) div,
body .flexigrid:has(#fs_gateway_grid) div.bDiv table td:nth-child(8),
body .flexigrid:has(#fs_gateway_grid) div.bDiv table td:nth-child(8) div,
body .flexigrid:has(#fs_gateway_grid) div.bDiv table td:nth-child(9),
body .flexigrid:has(#fs_gateway_grid) div.bDiv table td:nth-child(9) div{
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:-.01em; color:var(--text);
  font-variant-numeric:tabular-nums;
}
/* Register / Caller-Id columns (6,7) hold True/False — give them a calm muted
   slate so the boolean flags read as quiet metadata, not primary data */
body .flexigrid:has(#fs_gateway_grid) div.bDiv table td:nth-child(6),
body .flexigrid:has(#fs_gateway_grid) div.bDiv table td:nth-child(6) div,
body .flexigrid:has(#fs_gateway_grid) div.bDiv table td:nth-child(7),
body .flexigrid:has(#fs_gateway_grid) div.bDiv table td:nth-child(7) div{
  color:var(--muted); font-weight:500;
}

/* INTERACTIVE ROWS -> smooth hover wash + brand accent rail on the left edge
   (box-shadow inset, so no layout shift), plus subtle zebra for scan-ability */
body .flexigrid div.bDiv table tr{ transition:background-color .12s ease; }
body .flexigrid div.bDiv table tr.erow td{ background:#FBFCFD; }
body .flexigrid div.bDiv table tr:hover td,
body .flexigrid div.bDiv table tr.trOver td{
  background:var(--brand-soft) !important;
}
body .flexigrid div.bDiv table tr:hover td:first-child,
body .flexigrid div.bDiv table tr.trOver td:first-child{
  box-shadow:inset 3px 0 0 var(--brand);
}
/* selected row keeps a steady brand tint */
body .flexigrid div.bDiv table tr.trSelected td{ background:rgba(59,130,246,.12) !important; }

/* the editable Name link -> semibold with an animated underline that grows
   from the left on hover (background-image, so it never shifts text).
   :not(:last-child) keeps the action-column icon links out of this. */
body .flexigrid div.bDiv table td:not(:last-child) a{
  font-weight:600; color:var(--text) !important; text-decoration:none;
  background-image:linear-gradient(var(--brand),var(--brand));
  background-position:0 100%; background-repeat:no-repeat;
  background-size:0% 1.5px; transition:background-size .2s ease, color .15s ease;
}
body .flexigrid div.bDiv table td:not(:last-child) a:hover{
  color:var(--brand) !important; background-size:100% 1.5px;
}

/* row action icons (last column) -> clean square outline buttons w/ hover lift,
   echoing the reference platform's pencil / folder action chips */
body .flexigrid div.bDiv table td:last-child a{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; margin:0 2px; border:1px solid var(--line);
  border-radius:8px; background:#fff; color:var(--muted) !important;
  text-decoration:none; transition:.15s ease; vertical-align:middle;
}
body .flexigrid div.bDiv table td:last-child a:hover{
  border-color:var(--brand); color:var(--brand) !important;
  background:var(--brand-soft); transform:translateY(-1px);
}

/* secondary detail text (proxy/profile) -> a touch lighter for hierarchy */
body .flexigrid div.bDiv table td span.text-muted,
body .flexigrid div.bDiv table td small{ color:var(--muted) !important; }

/* quick-search panel (.sDiv) -> padded modern row; inputs inherit the global
   modern field styling; the Clear button gets a neutral outline-button look */
body .flexigrid .sDiv2{ display:flex; align-items:center; gap:8px; padding:10px 12px; font-family:var(--font); font-size:13px; color:var(--muted); }
body .flexigrid .sDiv2 .qsbox{ flex:1; max-width:320px; }
body .flexigrid .sDiv2 input[type=button]{
  border:1.5px solid var(--line); border-radius:8px; background:#fff; color:var(--text);
  font-family:var(--font); font-weight:600; font-size:13px; padding:8px 14px; cursor:pointer; transition:.15s ease;
}
body .flexigrid .sDiv2 input[type=button]:hover{ border-color:var(--muted-2); }

@media (prefers-reduced-motion:reduce){
  body .flexigrid .fbutton,
  body .flexigrid .pButton,
  body .flexigrid .sDiv2 input[type=button],
  body .flexigrid div.bDiv table tr,
  body .flexigrid div.bDiv table td a,
  body .flexigrid div.hDivBox thead tr th{ transition:none !important; }
  body .flexigrid .fbutton:hover,
  body .flexigrid div.bDiv table td:last-child a:hover{ transform:none !important; }
  body .flexigrid .pReload.loading{ animation:none !important; }
}

/* ===== FLOATING QUICK-ACTION BUTTON (#q_toggle) — stock indigo -> brand =======
   [CONFIRMED header.php:459] <div id="q_toggle" class="btn rounded-circle p-btn-1">
   <i class="fa fa-plus">. The stock fill is off-palette (style.css .p-btn-1 +
   whatever overrides it render it dark indigo). This is ONE shared header element
   present on every page (so it's branded globally, which also fixes it on the
   gateways page). COLOUR ONLY — no size/position/markup/JS change. */
body .btn-quick .btn.rounded-circle,
body .btn-quick #q_toggle.p-btn-1{
  background:linear-gradient(135deg,#2563EB,var(--brand-deep)) !important;
  color:#fff !important; border:0 !important;
  box-shadow:0 8px 22px rgba(37,99,235,.34) !important;
}
body .btn-quick .btn.rounded-circle:hover,
body .btn-quick #q_toggle.p-btn-1:hover{
  background:linear-gradient(135deg,var(--clay),#2563EB) !important;
}

/* ===== EDIT-PAGE LEFT TABS (.sidebar / .sidemenu) — stock black+blue -> theme ==
   [CONFIRMED left_panel_master.php] the customer / provider / reseller / package /
   plan EDIT pages render their sub-section tabs as <ul class="sidemenu"> inside
   <div class="sidebar collapse"> (items: Details, Charges, DIDs, SIP Devices ...).
   THEME-AUDIT GAP: wayvz-modern.css never touched these, so they kept the stock
   sidebar_style.css look — a BLACK panel (.sidebar:before #000) with STOCK-BLUE
   active/hover (#004470) and grey-blue link text (#bbc0cf) — the one set of "tabs"
   left off-brand while the rest of the app is light + brand-red. This remaps them
   onto the same light surface / neutral-hover / brand-red-active language used by
   the top nav and flexigrid rows. COLOUR + surface only — width/layout/JS untouched
   (panel stays 190px; structure unchanged). body-prefixed !important so it wins
   over sidebar_style.css regardless of stylesheet order. */
body .sidebar:before{
  background:var(--card) !important;
  /* hairline border only — NO box-shadow: this pseudo-element is position:fixed
     (sidebar_style.css) and a soft shadow on a full-height fixed layer repaints
     on every scroll, which flickers. A 1px border has no repaint cost. */
  border-right:1px solid var(--line);
  box-shadow:none !important;
}
body .sidebar .sidemenu li a{
  color:var(--muted) !important; font-weight:600; transition:background-color .15s ease, color .15s ease, box-shadow .15s ease;
  box-shadow:inset 0 0 0 0 var(--brand);
}
body .sidebar .sidemenu li:hover{ background:rgba(17,24,39,.05) !important; }
body .sidebar .sidemenu li:hover a, body .sidebar .sidemenu li a:hover{ color:var(--text) !important; }
body .sidebar .sidemenu li.active{ background:var(--brand-soft) !important; }
body .sidebar .sidemenu li.active a, body .sidebar .sidemenu li.active > a{
  color:var(--brand) !important; font-weight:700;
  box-shadow:inset 3px 0 0 0 var(--brand);
}
@media (prefers-reduced-motion:reduce){
  body .sidebar .sidemenu li a{ transition:none !important; }
}

/* ===== CONTENT TABS (ul.tabs — menucool "tabcontent" system) — blue -> brand ==
   [CONFIRMED tabcontent.css + tabcontent.js, loaded header.php:132/155] the
   in-page tab strips on edit / import pages render as <ul class="tabs"><li><a>,
   with the open tab as <li class="selected">. tabcontent.css colours them BLUE
   (link #446aa3, selected top-border #3f73a1, selected text #2e4e6a) — this is
   the "tabs still blue" set. Remapped to the brand language: quiet slate tabs on
   a light strip, brand-red underline + text on the selected tab. body-prefixed so
   it beats tabcontent.css (lower specificity, loaded earlier). COLOUR ONLY. */
body ul.tabs li a{
  color:var(--muted); background:#FBFCFD; border:1px solid var(--line); border-right:0;
  transition:color .15s ease, background-color .15s ease;
}
body ul.tabs li:last-child a{ border-right:1px solid var(--line); }
body ul.tabs li a:hover{ color:var(--text); background:#fff; }
body ul.tabs li.selected a, body ul.tabs li.selected a:hover{
  color:var(--brand); background:#fff;
  border-top:2px solid var(--brand); border-bottom:1px solid #fff;
}
body div.tabcontents section{ border:1px solid var(--line); }
@media (prefers-reduced-motion:reduce){ body ul.tabs li a{ transition:none !important; } }

/* ===== BLINK FIX: 3D PERSPECTIVE ON FIXED FLOATING MENU (.dl-menuwrapper) ======
   [CONFIRMED sticky_menu.css:1-14] the floating quick-action menu wrapper is
   position:fixed with perspective:1000px (+ perspective-origin) — a 3D rendering
   context on a fixed, always-present element. A fixed + perspective layer is a
   well-known Chromium compositing trigger for the "a region goes blank until a
   repaint (mouse move) restores it" glitch. The 3D is only decoration for the
   menu's open/close flip; flattening it keeps the menu fully functional (it just
   fades/slides instead of rotating in 3D) and removes the stale-layer blink. */
body .dl-menuwrapper{
  -webkit-perspective:none !important; perspective:none !important;
  -webkit-perspective-origin:50% 50% !important; perspective-origin:50% 50% !important;
}

/* ==================================================================
   GLOBAL MODERN — ADMIN  (staging, scoped by <body> class)
   header.php now emits <body class="wv-admin"> for staff/admin and
   <body class="wv-portal"> for the customer login-type (userlevel 2).
   The Inter webfont is loaded globally (header.php), and :root --font is
   Inter-first, so the whole app now renders Inter. To keep the CUSTOMER
   PORTAL exactly as before, freeze it back to Montserrat here. All the
   modern-grid upgrades below are scoped to body.wv-admin ONLY, so the
   customer portal is untouched.
   ================================================================== */

/* Freeze customer portal to its previous typeface (Montserrat). */
body.wv-portal{ --font:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }

/* ----- ADMIN GRID: dark navy gradient header (matches report pages) --
   Overrides the light #F9FAFB header (defined earlier at body-level).
   body.wv-admin (0,1,1) beats body (0,0,1); appears later in source too.
   COLOUR / TYPOGRAPHY ONLY — no padding/width/alignment, so flexigrid's
   JS column-width sync stays intact. */
body.wv-admin .flexigrid div.hDiv{
  background:linear-gradient(180deg,#1E293B,#0F172A) !important;
  border-bottom:0 !important;
}
body.wv-admin .flexigrid div.hDivBox thead tr th{
  background:transparent !important; border-color:rgba(255,255,255,.07) !important;
}
body.wv-admin .flexigrid div.hDivBox thead tr th div{
  color:#CBD5E1 !important; text-transform:uppercase !important;
  letter-spacing:.06em !important; font-size:10.5px !important; font-weight:700 !important;
}
body.wv-admin .flexigrid div.hDivBox thead tr th:hover div{ color:#fff !important; }

/* body-cell typography: tabular numerics + tuned weight/colour (report look) */
body.wv-admin .flexigrid div.bDiv table td div{
  font-size:12.5px !important; font-weight:500 !important; color:#334155 !important;
  letter-spacing:-.005em; line-height:1.45; font-variant-numeric:tabular-nums;
}
/* first column = quieter id/date */
body.wv-admin .flexigrid div.bDiv table td:first-child div{
  color:#64748B !important; font-weight:600 !important; font-variant-numeric:tabular-nums;
}
/* zebra + hover with indigo accent rail (report grids) */
body.wv-admin .flexigrid div.bDiv table tr.erow td{ background:#F7F8FE !important; }
body.wv-admin .flexigrid div.bDiv table tr:hover td{ background:#EEF0FF !important; }
body.wv-admin .flexigrid div.bDiv table tr:hover td:first-child{
  box-shadow:inset 3px 0 0 0 var(--brand) !important;
}

/* ==================================================================
   DARK PROFESSIONAL TOP NAV  (admin only, body.wv-admin)
   Turns the light frosted mainmenu into a dark navy bar with a
   "WAYVZ Voice" text logo, per-menu icons (injected by header.php JS),
   a pulsing Live pill, and a blue active underline. Customer portal
   (wv-portal / header_webpage.php) is untouched.
   ================================================================== */
body.wv-admin .navbar.mainmenu{
  background:#0F172A !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
  box-shadow:0 2px 16px rgba(2,6,23,.35) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}

/* --- brand: hide the uploaded logo image, render "WAYVZ Voice" + phone icon --- */
body.wv-admin .navbar.mainmenu #logo{ display:none !important; }
body.wv-admin .navbar.mainmenu .navbar-brand{
  position:relative; display:inline-flex; align-items:center;
  padding-left:32px !important; margin-right:8px;
  font-family:var(--font); font-weight:800; font-size:20px;
  letter-spacing:-.02em; line-height:1; white-space:nowrap;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233B82F6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.81.36 1.6.7 2.34a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.74-1.27a2 2 0 0 1 2.11-.45c.74.34 1.53.57 2.34.7A2 2 0 0 1 22 16.92z'/></svg>") no-repeat left center;
  background-size:21px 21px;
}
body.wv-admin .navbar.mainmenu .navbar-brand::before{ content:"WAYVZ"; color:#F1F5F9; }
body.wv-admin .navbar.mainmenu .navbar-brand::after{ content:"Voice"; color:var(--brand); margin-left:6px; }

/* --- top-level menu links --- */
body.wv-admin .navbar.mainmenu .navbar-nav > li.nav-item > a.nav-link{
  color:#CBD5E1 !important; font-weight:600 !important; font-size:13.5px;
  position:relative; display:inline-flex; align-items:center; gap:6px;
  transition:color .14s ease;
}
body.wv-admin .navbar.mainmenu .navbar-nav > li.nav-item > a.nav-link:hover{ color:#fff !important; }
body.wv-admin .navbar.mainmenu .navbar-nav > li.nav-item > a.nav-link.active{ color:#fff !important; }
body.wv-admin .navbar.mainmenu .navbar-nav > li.nav-item > a.nav-link.active::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-6px; height:3px;
  background:var(--brand); border-radius:3px 3px 0 0;
}
/* injected per-menu icon */
body.wv-admin .navbar.mainmenu .wv-nav-ic{ display:inline-flex; }
body.wv-admin .navbar.mainmenu .wv-nav-ic svg{
  width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; opacity:.9;
}
/* dropdown caret inherits link colour (light) automatically */

/* --- Live pill (injected before the profile menu) --- */
body.wv-admin .navbar.mainmenu .wv-live{
  display:inline-flex; align-items:center; gap:7px; margin-right:16px;
  color:#34D399; font-weight:700; font-size:12.5px; letter-spacing:.02em; white-space:nowrap;
}
body.wv-admin .navbar.mainmenu .wv-live-dot{
  width:8px; height:8px; border-radius:50%; background:#34D399;
  box-shadow:0 0 0 0 rgba(52,211,153,.5); animation:wvpulse 2s infinite;
}
@keyframes wvpulse{
  0%{ box-shadow:0 0 0 0 rgba(52,211,153,.5); }
  70%{ box-shadow:0 0 0 6px rgba(52,211,153,0); }
  100%{ box-shadow:0 0 0 0 rgba(52,211,153,0); }
}

/* --- right-side profile (Admin): clear its light-grey box, sit on the dark bar --- */
body.wv-admin .navbar.mainmenu .navbar-profile,
body.wv-admin .navbar.mainmenu .navbar-profile.dropdown{
  background:transparent !important; box-shadow:none !important; border:0 !important;
}
body.wv-admin .navbar.mainmenu .navbar-profile .btn,
body.wv-admin .navbar.mainmenu .navbar-profile .profile_name{ color:#E2E8F0 !important; background:transparent !important; }
body.wv-admin .navbar.mainmenu .navbar-profile .btn:hover{ color:#fff !important; }

/* --- FIT GUARD: keep the profile dropdown (Log out / My Profile) always on
   screen. The menu <ul> ships as a fixed Bootstrap col-lg-10 (83.33%) that
   neither shrinks nor wraps, so once enough top tabs are added (Fraud,
   Configuration, ...) the row overflows and shoves the profile off the right
   edge. Let the menu row shrink + wrap and pin the profile so it never gets
   pushed off. Also tighten tab spacing so all tabs stay on one row at common
   widths and only wrap gracefully on narrower screens. --- */
body.wv-admin .navbar.mainmenu .navbar-collapse{ min-width:0 !important; }
body.wv-admin .navbar.mainmenu ul.navbar-nav{
  flex:1 1 auto !important; max-width:none !important; min-width:0 !important;
  flex-wrap:wrap !important;
}
body.wv-admin .navbar.mainmenu .navbar-profile,
body.wv-admin .navbar.mainmenu .navbar-profile.dropdown{
  flex:0 0 auto !important; width:auto !important; max-width:none !important;
}
body.wv-admin .navbar.mainmenu .navbar-nav > li.nav-item > a.nav-link{
  padding-left:9px !important; padding-right:9px !important; font-size:13px;
}
body.wv-admin .navbar.mainmenu .wv-live{ margin-right:10px; }

/* --- Rate Sheets import: native file input readability. Duplicated here (not
   only inline in the facebox view) BECAUSE the facebox loads its view via an
   AJAX GET that the browser caches, so an inline-CSS edit can be masked by a
   stale cached response. This file is ?v=<filemtime> cache-busted, and the
   !important + higher specificity beats any stale cached inline rule, so a
   normal reload fixes the "Choose File overlaps the filename" clipping without
   the user clearing cache. Flex-centres the native button + filename on one
   clean line. --- */
body.wv-admin #qr_file_row input[type="file"].form-control{
  height:auto !important; min-height:44px !important; line-height:normal !important;
  padding:10px 12px !important; display:flex !important; align-items:center !important;
}
body.wv-admin #qr_file_row input[type="file"].form-control::-webkit-file-upload-button{ margin-right:10px; }

/* --- mobile toggler visible on dark --- */
body.wv-admin .navbar.mainmenu .navbar-toggler{ border-color:rgba(255,255,255,.22) !important; }
body.wv-admin .navbar.mainmenu .navbar-toggler-icon{
  background-image:url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='rgba(255,255,255,0.85)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/></svg>") !important;
}

/* ==================================================================
   SUPER — PREMIUM CONTENT LAYER  (admin only, body.wv-admin)
   Lifts the *content* (lower part) of every native ASTPP page to the
   polish of the custom report pages: floating grid cards, richer page
   headers, filled form fields, modern section headers, branded toggles
   and pills. CSS-ONLY, scoped body.wv-admin (customer portal untouched).
   Flexigrid-safe: only the OUTER wrapper gets radius/shadow/overflow —
   no th/td padding/width touched, so flexigrid's JS column sync stays.
   ================================================================== */

/* ---- (A) LIST GRID -> one floating rounded card (toolbar+header+rows+pager) */
body.wv-admin .slice.color-three .card.col-md-12,
body.wv-admin .slice.color-three > .w-section.inverse{
  background:transparent !important; border:0 !important; box-shadow:none !important; padding-top:4px;
}
body.wv-admin .flexigrid{
  border:1px solid var(--line) !important; border-radius:var(--r-md) !important;
  overflow:hidden !important; box-shadow:var(--shadow-md) !important; background:#fff !important;
}
/* toolbar (Create/Delete) reads as the card's top strip */
body.wv-admin .flexigrid .tDiv,
body.wv-admin .flexigrid .tDiv2{
  background:linear-gradient(180deg,#FFFFFF,#F8FAFC) !important;
  border-bottom:1px solid var(--line) !important; padding:12px 14px !important;
}
body.wv-admin .flexigrid .fbutton{
  border:1px solid var(--line) !important; border-radius:var(--r-sm) !important;
  background:#fff !important; box-shadow:var(--shadow) !important; transition:.15s ease;
}
body.wv-admin .flexigrid .fbutton:hover{ border-color:var(--brand) !important; box-shadow:var(--shadow-md) !important; }
/* pager -> soft footer */
body.wv-admin .flexigrid .pDiv{
  background:linear-gradient(180deg,#F8FAFC,#F1F5F9) !important;
  border-top:1px solid var(--line) !important;
}

/* ---- (B) RICHER PAGE HEADER (the .slice.color-one title bar) */
body.wv-admin .slice.color-one .w-section.inverse.border_box{
  background:linear-gradient(180deg,#FFFFFF,#FBFCFE) !important;
  border:1px solid var(--line) !important; border-left:4px solid var(--brand) !important;
  border-radius:var(--r-md) !important; box-shadow:var(--shadow) !important;
  padding:2px 20px !important; margin-bottom:4px;
}
body.wv-admin .slice.color-one h2,
body.wv-admin .dashboard-left h2{
  font-size:24px !important; font-weight:800 !important; letter-spacing:-.02em !important;
}
/* header action buttons (Back / search) -> tidy pill buttons */
body.wv-admin .slice.color-one a.btn,
body.wv-admin .slice.color-one .btn,
body.wv-admin .slice.color-one input[type=submit]{
  border-radius:var(--r-sm) !important; font-weight:600 !important;
}

/* ---- (C) FORM FIELDS -> filled boxed inputs (was thin underline) */
body.wv-admin #floating-label .form-group input[type=text],
body.wv-admin #floating-label .form-group input[type=password],
body.wv-admin #floating-label .form-group input[type=email],
body.wv-admin #floating-label .form-group input[type=number],
body.wv-admin #floating-label .form-group input:not([type]),
body.wv-admin #floating-label .form-group select,
body.wv-admin #floating-label .form-group textarea,
body.wv-admin .form-group > input[type=text],
body.wv-admin .form-group > select,
body.wv-admin .form-group > textarea{
  width:100% !important; box-sizing:border-box !important;
  border:1.5px solid var(--line) !important; border-radius:var(--r-sm) !important;
  background:#FBFCFE !important; padding:10px 12px !important;
  font-size:14px !important; color:var(--text) !important; transition:.15s ease !important;
  box-shadow:none !important;
}
body.wv-admin #floating-label .form-group input[type=text]:focus,
body.wv-admin #floating-label .form-group input[type=password]:focus,
body.wv-admin #floating-label .form-group input[type=email]:focus,
body.wv-admin #floating-label .form-group input[type=number]:focus,
body.wv-admin #floating-label .form-group select:focus,
body.wv-admin #floating-label .form-group textarea:focus,
body.wv-admin .form-group > input[type=text]:focus,
body.wv-admin .form-group > select:focus{
  border-color:var(--brand) !important; background:#fff !important;
  box-shadow:0 0 0 3px var(--brand-soft) !important; outline:0 !important;
}
/* labels above fields -> quiet uppercase caption */
body.wv-admin #floating-label .form-group > label.control-label{
  font-size:11.5px !important; font-weight:600 !important; color:var(--muted) !important;
  text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px !important; display:block;
}
/* bootstrap-select (Country/Timezone/Currency) -> match boxed look */
body.wv-admin .form-group .bootstrap-select > .btn,
body.wv-admin .bootstrap-select.form-control > .btn{
  border:1.5px solid var(--line) !important; border-radius:var(--r-sm) !important;
  background:#FBFCFE !important; padding:9px 12px !important; box-shadow:none !important; color:var(--text) !important;
}
body.wv-admin .bootstrap-select.open > .btn{ border-color:var(--brand) !important; box-shadow:0 0 0 3px var(--brand-soft) !important; }

/* ---- (D) FORM SECTION HEADERS (h3.bg-secondary.text-light) -> clean chip */
body.wv-admin #floating-label h3.bg-secondary,
body.wv-admin .card h3.bg-secondary{
  background:linear-gradient(180deg,#F8FAFF,#EFF4FF) !important;
  color:var(--text) !important; font-size:14px !important; font-weight:700 !important;
  letter-spacing:-.01em; padding:12px 16px !important;
  border:1px solid var(--line) !important; border-left:4px solid var(--brand) !important;
  border-radius:var(--r-sm) !important; margin-bottom:14px !important;
}

/* ---- (E) STATUS TOGGLE SLIDERS -> brand-on, smooth */
body.wv-admin .switch input:checked + .slider,
body.wv-admin input:checked + .slider.round{ background-color:var(--brand) !important; }
body.wv-admin .slider.round{ transition:.2s ease !important; }
body.wv-admin .switch input:focus + .slider{ box-shadow:0 0 0 3px var(--brand-soft) !important; }

/* ---- (F) PILLS: bootstrap badges/labels (dispositions/types) -> modern pill */
body.wv-admin .badge, body.wv-admin .label{
  border-radius:999px !important; padding:.34em .72em !important;
  font-weight:600 !important; font-size:11px !important; letter-spacing:.01em;
}

/* ---- (G) SAVE / CANCEL action row -> centered, primary Save, ghost Cancel */
body.wv-admin .col-12.text-center > input[type=submit],
body.wv-admin .col-12.text-center > .btn-success{
  min-width:150px; border-radius:var(--r-sm) !important; font-weight:700 !important;
  box-shadow:var(--shadow-md) !important;
}
body.wv-admin .col-12.text-center > a.btn,
body.wv-admin .col-12.text-center > .btn-line-warning{
  min-width:120px; background:#fff !important; color:var(--muted) !important;
  border:1.5px solid var(--line) !important; border-radius:var(--r-sm) !important; font-weight:600 !important;
}

/* ---- (H) content breathing room */
body.wv-admin .page-wrap.p-4{ padding:22px 26px !important; }

/* ---- (F2) SOFT-TINTED PILLS: bootstrap badges -> modern report-style chips */
body.wv-admin .badge{
  border-radius:999px !important; padding:.36em .72em !important;
  font-weight:700 !important; font-size:10px !important; letter-spacing:.03em !important;
  text-transform:uppercase !important; line-height:1.5 !important;
  border:1px solid transparent !important; box-shadow:none !important;
}
body.wv-admin .badge-success{ background:var(--good-soft) !important; color:#047857 !important; border-color:rgba(16,185,129,.22) !important; }
body.wv-admin .badge-primary{ background:var(--brand-soft) !important; color:var(--brand-deep) !important; border-color:rgba(59,130,246,.24) !important; }
body.wv-admin .badge-dark,
body.wv-admin .badge-secondary{ background:#EEF2F7 !important; color:#475569 !important; border-color:var(--line) !important; }
body.wv-admin .badge-danger{ background:var(--bad-soft) !important; color:#B91C1C !important; border-color:rgba(239,68,68,.22) !important; }
body.wv-admin .badge-warning{ background:var(--warn-soft) !important; color:#B45309 !important; border-color:rgba(245,158,11,.25) !important; }
body.wv-admin .badge-info{ background:#E0F2FE !important; color:#0369A1 !important; border-color:rgba(14,165,233,.22) !important; }
/* keep the two stacked chips tidy */
body.wv-admin .flexigrid .bDiv td .badge.float-left{ margin-top:5px !important; }
/* ==================================================================
   SUPER v2 — ADVANCED DEPTH, MOTION & HIERARCHY  (admin, body.wv-admin)
   Layered on top of the SUPER premium content layer. CSS-ONLY.
   Flexigrid-safe: only VERTICAL padding + colors/shadows/hover — NO
   horizontal padding or width changes, so column JS sync is untouched.
   ================================================================== */

/* ---- (1) PAGE CANVAS: soft tint so the white cards visibly float */
body.wv-admin .page-wrap,
body.wv-admin .page-wrap.p-4{
  background:linear-gradient(180deg,#F6F8FC 0%,#EDF1F8 100%) !important;
}

/* ---- (2) GRID CARD: layered elevation (near + far shadow) */
body.wv-admin .flexigrid{
  box-shadow:0 1px 2px rgba(16,24,40,.05), 0 10px 28px -8px rgba(16,24,40,.16) !important;
}

/* ---- (3) HEADER: deeper gradient, crisp labels, brand sort chevrons */
body.wv-admin .flexigrid div.hDiv{
  background:linear-gradient(180deg,#26374F 0%,#0D1626 100%) !important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.07) !important;
}
body.wv-admin .flexigrid div.hDiv th,
body.wv-admin .flexigrid div.hDiv td{ border-color:rgba(255,255,255,.06) !important; }
body.wv-admin .flexigrid div.hDiv .sortasc,
body.wv-admin .flexigrid div.hDiv .sortdesc{ color:#93C5FD !important; }

/* ---- (4) ROWS: airier, smooth hover lift with a brand accent rail */
body.wv-admin .flexigrid .bDiv tr td{ padding-top:12px !important; padding-bottom:12px !important; }
body.wv-admin .flexigrid .bDiv tr{ transition:background .12s ease, box-shadow .12s ease; }
body.wv-admin .flexigrid .bDiv tr.erow td{ background:#FAFBFE !important; }
body.wv-admin .flexigrid .bDiv tr:hover td{
  background:linear-gradient(180deg,#F4F9FF 0%,#ECF4FF 100%) !important;
}
body.wv-admin .flexigrid .bDiv tr:hover td:first-child{
  box-shadow:inset 3px 0 0 0 var(--brand) !important;
}

/* ---- (5) TOOLBAR: ONE filled primary action, the rest quiet ghosts */
body.wv-admin .flexigrid .tDiv .fbutton:first-child{
  background:linear-gradient(180deg,var(--brand) 0%,var(--brand-deep) 100%) !important;
  border-color:var(--brand-deep) !important;
  box-shadow:0 2px 8px rgba(37,99,235,.34) !important;
}
body.wv-admin .flexigrid .tDiv .fbutton:first-child,
body.wv-admin .flexigrid .tDiv .fbutton:first-child *{ color:#fff !important; }
body.wv-admin .flexigrid .tDiv .fbutton:first-child:hover{ filter:brightness(1.06); }

/* ---- (6) PILLS: leading status dot for an at-a-glance state read */
body.wv-admin .badge::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:currentColor; opacity:.85; margin-right:6px; vertical-align:1px;
}

/* ---- (7) PAGE HEADER: subtle top sheen for a premium finish */
body.wv-admin .slice.color-one .w-section.inverse.border_box{
  background:linear-gradient(180deg,#FFFFFF 0%,#F7FAFF 100%) !important;
  box-shadow:0 1px 2px rgba(16,24,40,.04), inset 0 1px 0 #fff !important;
}
/* ==================================================================
   SUPER v3 — BOLD REDESIGN (admin, body.wv-admin). Unmistakable.
   Sits on top of SUPER + v2. CSS-ONLY, flexigrid-safe (no col widths).
   ================================================================== */

/* (1) CANVAS: clearly gray so the card floats like a real product */
body.wv-admin .page-wrap,
body.wv-admin .page-wrap.p-4{ background:#E8EDF4 !important; padding:26px 30px !important; }

/* (2) GRID CARD: big radius, generous float, strong shadow */
body.wv-admin .flexigrid{
  border:0 !important; border-radius:16px !important;
  box-shadow:0 1px 3px rgba(16,24,40,.06), 0 18px 40px -12px rgba(16,24,40,.28) !important;
}

/* (3) HEADER: taller, bigger uppercase labels, colored underline accent */
body.wv-admin .flexigrid div.hDiv{
  background:linear-gradient(180deg,#1F2E45,#0B1322) !important;
  border-bottom:3px solid var(--brand) !important;
}
body.wv-admin .flexigrid div.hDiv th td,
body.wv-admin .flexigrid div.hDiv .content{
  font-size:11px !important; font-weight:800 !important;
  letter-spacing:.06em !important; text-transform:uppercase !important; color:#DCE5F2 !important;
}

/* (4) ROWS: bold rhythm, strong hover, thick brand rail */
body.wv-admin .flexigrid .bDiv tr td{
  padding-top:14px !important; padding-bottom:14px !important;
  font-size:13px !important; color:#1E293B !important;
}
body.wv-admin .flexigrid .bDiv tr.erow td{ background:#F4F7FB !important; }
body.wv-admin .flexigrid .bDiv tr:hover td{ background:#E8F1FF !important; }
body.wv-admin .flexigrid .bDiv tr:hover td:first-child{ box-shadow:inset 4px 0 0 0 var(--brand) !important; }
/* first data column reads as the row's title */
body.wv-admin .flexigrid .bDiv tr td:nth-child(2){ font-weight:700 !important; color:#0F172A !important; }

/* (5) PILLS: SOLID vivid fills, white text, dot — big visible change */
body.wv-admin .badge{
  border:0 !important; color:#fff !important; font-weight:700 !important;
  font-size:10px !important; letter-spacing:.04em !important; text-transform:uppercase !important;
  padding:.4em .8em !important; border-radius:999px !important;
  box-shadow:0 1px 2px rgba(16,24,40,.18) !important;
}
body.wv-admin .badge::before{ background:rgba(255,255,255,.9) !important; opacity:1 !important; }
body.wv-admin .badge-success{ background:linear-gradient(180deg,#10B981,#059669) !important; }
body.wv-admin .badge-primary{ background:linear-gradient(180deg,#3B82F6,#2563EB) !important; }
body.wv-admin .badge-dark,
body.wv-admin .badge-secondary{ background:linear-gradient(180deg,#64748B,#475569) !important; }
body.wv-admin .badge-danger{ background:linear-gradient(180deg,#F87171,#DC2626) !important; }
body.wv-admin .badge-warning{ background:linear-gradient(180deg,#FBBF24,#D97706) !important; color:#fff !important; }
body.wv-admin .badge-info{ background:linear-gradient(180deg,#38BDF8,#0284C7) !important; }

/* (6) TOOLBAR: filled primary + clean ghost siblings (bootstrap + flexigrid) */
body.wv-admin .tDiv,
body.wv-admin .slice.color-three .card > .row:first-child{ }
body.wv-admin .flexigrid .tDiv{ padding:14px 16px !important; }

/* (7) PAGE TITLE: bigger, bolder */
body.wv-admin .slice.color-one h2,
body.wv-admin .dashboard-left h2{ font-size:26px !important; font-weight:800 !important; }

/* ==================================================================
   SUPER v3b — INTERACTIVE COLOR & MOTION (body.wv-admin)
   ================================================================== */
/* smooth everything */
body.wv-admin .flexigrid .bDiv tr td{ transition:background .15s ease, color .15s ease, box-shadow .15s ease; }

/* pills: hover pop + glow */
body.wv-admin .badge{ transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; }
body.wv-admin .badge:hover{ transform:translateY(-1px) scale(1.05); filter:brightness(1.1); box-shadow:0 5px 12px rgba(16,24,40,.3) !important; }

/* grid links: brand color on hover */
body.wv-admin .flexigrid .bDiv td a{ transition:color .12s ease; }
body.wv-admin .flexigrid .bDiv td a:hover{ color:var(--brand-deep) !important; }

/* header cells: interactive sortable highlight */
body.wv-admin .flexigrid div.hDiv th,
body.wv-admin .flexigrid div.hDiv td{ transition:background .12s ease; }
body.wv-admin .flexigrid div.hDiv th:hover,
body.wv-admin .flexigrid div.hDiv td:hover{ background:rgba(59,130,246,.22) !important; cursor:pointer; }

/* flexigrid toolbar buttons: interactive brand fill + glow */
body.wv-admin .flexigrid .fbutton{ transition:all .15s ease; }
body.wv-admin .flexigrid .fbutton:hover{
  background:linear-gradient(180deg,var(--brand),var(--brand-deep)) !important;
  border-color:var(--brand-deep) !important; box-shadow:0 4px 12px rgba(37,99,235,.35) !important;
  transform:translateY(-1px);
}
body.wv-admin .flexigrid .fbutton:hover,
body.wv-admin .flexigrid .fbutton:hover *{ color:#fff !important; }

/* bootstrap toolbar buttons (Create Customer etc): lift + colored glow */
body.wv-admin .slice.color-three .btn,
body.wv-admin .page-wrap .btn{ transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; }
body.wv-admin .slice.color-three .btn:hover,
body.wv-admin .page-wrap .btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(37,99,235,.3) !important; filter:brightness(1.06); }

/* status toggles: hover ring */
body.wv-admin .switch:hover .slider{ box-shadow:0 0 0 4px var(--brand-soft) !important; }

/* ==================================================================
   SUPER v4 — CUSTOM REPORT PAGE UNIFICATION  (admin, body.wv-admin)
   The ~15 custom report/list views (DID, Invoices, Audit, CDR
   reports, Summaries, Low Balance, Email, Activity, Refill,
   Commission) ship an INLINE <style> built on an older INDIGO palette
   (--wv-primary:#4F46E5) with an `html body .flexigrid` prefix. This
   block re-skins that grid to the brand-BLUE bold theme WITHOUT
   editing any view file. `html body.wv-admin` (+1 class) out-specifies
   the inline `html body` rules; the --wv-primary override (higher
   specificity than the inline :root) recolours every var-based bit.
   CSS-ONLY, flexigrid-safe (no column widths touched).
   ================================================================== */

/* recolour the inline variable -> Dashboard blue brand (beats inline :root); this
   also drives the action-column chip rules which reference var(--wv-primary)/(--wv-line).
   Palette + tokens mirror the Dashboard design system (view_dashboard.php): Inter,
   white 14px cards, blue #3B82F6 primary, soft slate lines, dashboard pill tints. */
body.wv-admin{ --wv-primary:#3B82F6; --wv-primary-deep:#2563EB; --wv-line:#E5E9F2; }

/* grid header: Dashboard blue gradient (matches the wv-accent tiles) */
html body.wv-admin .flexigrid div.hDiv{
  background:linear-gradient(135deg,#3B82F6 0%,#2563EB 100%) !important;
  border-bottom:0 !important;
  box-shadow:0 2px 8px rgba(37,99,235,.20) !important;
}
html body.wv-admin .flexigrid div.hDivBox thead tr th div{
  color:rgba(255,255,255,.92) !important; text-transform:uppercase !important;
  letter-spacing:.04em !important; font-weight:700 !important; font-size:11px !important;
}
html body.wv-admin .flexigrid div.hDivBox thead tr th:hover div{ color:#fff !important; }

/* links in cells: Dashboard blue, deep on hover (Inter ink elsewhere) */
html body.wv-admin .flexigrid div.bDiv table td a{ color:#2563EB !important; font-weight:600 !important; }
html body.wv-admin .flexigrid div.bDiv table td a:hover{ color:#1D4ED8 !important; }
html body.wv-admin .flexigrid div.bDiv table td{ color:#344054 !important; }

/* zebra + hover row: cool slate tint (matches dashboard table borders) */
html body.wv-admin .flexigrid div.bDiv table tr.erow td{ background:#F8FAFC !important; }
html body.wv-admin .flexigrid div.bDiv table tr:hover td{ background:#EFF8FF !important; }
html body.wv-admin .flexigrid div.bDiv table tr:hover td:first-child{
  box-shadow:inset 3px 0 0 0 #3B82F6 !important;
}

/* action-column icon chips: neutral -> Dashboard blue (delete -> red) */
html body.wv-admin .flexigrid div.bDiv table td a.btn-royelblue{ color:#98A2B3 !important; }
html body.wv-admin .flexigrid div.bDiv table td a.btn-royelblue:hover{ color:#3B82F6 !important; }
html body.wv-admin .flexigrid div.bDiv table td a.btn-royelblue[href*="delete"]:hover,
html body.wv-admin .flexigrid div.bDiv table td a.btn-royelblue[onclick*="alert"]:hover{ color:#EF4444 !important; }

/* card + search panel: soft slate card like .wv-card (14px, gentle shadow) */
html body.wv-admin .flexigrid{
  border-color:#E5E9F2 !important; border-radius:14px !important; overflow:hidden !important;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 18px 40px -20px rgba(37,99,235,.18) !important;
}
html body.wv-admin #search_bar{
  border-color:#E5E9F2 !important; border-radius:14px !important;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 12px 30px -20px rgba(37,99,235,.16) !important;
}

/* ==================================================================
   SUPER v5 — CLEAR SELECTS + GHOST CANCEL  (admin, body.wv-admin)
   Fixes two "not clear" issues on native forms (Invoices Generate,
   DID/product add-edit): (1) the Cancel button rendered dark navy
   because com-style.css:229 `.btn.btn-secondary{background:#3b3280
   !important}` (0,2,0) out-specified our white .btn-secondary (0,1,1);
   (2) bootstrap-select toggles/menus were low-contrast + the open
   menu had no shadow so it blended over the report hero banner.
   CSS-ONLY, admin-scoped, reversible.
   ================================================================== */

/* (A) Cancel / secondary buttons -> clean white ghost.
   `body.wv-admin .btn.btn-secondary` = (0,3,1) beats com-style (0,2,0)!important */
body.wv-admin .btn.btn-secondary,
body.wv-admin button.btn.btn-secondary,
body.wv-admin form .btn.btn-secondary,
body.wv-admin .pop_md .btn.btn-secondary{
  background:#fff !important; color:var(--text) !important;
  border:1.5px solid var(--line) !important; box-shadow:none !important;
}
body.wv-admin .btn.btn-secondary:hover,
body.wv-admin button.btn.btn-secondary:hover{
  background:#F8FAFC !important; border-color:var(--muted-2,#94A3B8) !important; color:var(--text) !important;
}

/* (B) ALL bootstrap-select toggles -> boxed, dark, readable control
   (broadens the old .form-group/.form-control-only rule so form selects
   like Invoices Generate 'Accounts/Provider' are clear too) */
body.wv-admin .bootstrap-select > .btn.dropdown-toggle{
  background:#FBFCFE !important; color:var(--text) !important;
  border:1.5px solid var(--line) !important; border-radius:var(--r-sm) !important;
  box-shadow:none !important;
}
body.wv-admin .bootstrap-select > .btn.dropdown-toggle .filter-option,
body.wv-admin .bootstrap-select > .btn.dropdown-toggle .filter-option-inner,
body.wv-admin .bootstrap-select > .btn.dropdown-toggle .filter-option-inner-inner{ color:var(--text) !important; }
body.wv-admin .bootstrap-select > .btn.dropdown-toggle .caret{ border-top-color:var(--muted,#64748B) !important; }
body.wv-admin .bootstrap-select.open > .btn.dropdown-toggle{
  border-color:var(--brand) !important; box-shadow:0 0 0 3px var(--brand-soft) !important;
}

/* (C) open dropdown MENU -> solid white, bordered, strong shadow, clearly
   above the report hero banner (was shadow:none, blended on overlap) */
body.wv-admin .bootstrap-select .dropdown-menu{
  background:#fff !important; border:1px solid var(--line) !important; border-radius:10px !important;
  box-shadow:0 14px 36px -8px rgba(16,24,40,.34) !important; z-index:1060 !important;
  padding:6px !important;
}
body.wv-admin .bootstrap-select .dropdown-menu li a{
  color:var(--text) !important; border-radius:6px !important; padding:8px 12px !important;
}
body.wv-admin .bootstrap-select .dropdown-menu li a small{ color:var(--muted,#64748B) !important; }

/* ===================================================================
   CARRIERS HUB WORKSPACE  —  company / customer / supplier detail pages
   Appended 2026-07-29. Trendy SaaS look built entirely on theme tokens
   (--brand blue, slate chrome, soft shadows, Inter). Scoped under
   .carr-ws so nothing leaks to the rest of the portal. The three
   workspace views drop their inline <style> and share this. Revert =
   delete this block (+ restore inline styles if desired).
   =================================================================== */
.carr-ws{ padding:2px 2px 10px; --brand:#3B82F6; --brand-soft:rgba(59,130,246,.16); }
.carr-ws-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; padding:10px 6px 0; }
.carr-ws-crumb{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); }
.carr-ws-crumb a{ color:var(--brand); text-decoration:none; }
.carr-ws-crumb a:hover{ text-decoration:underline; }
.carr-ws-title{ font-size:24px; font-weight:800; letter-spacing:-.015em; color:var(--text); margin-top:5px; line-height:1.12; }
.carr-ws-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-top:11px; }
.carr-ws-badge{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; padding:5px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--muted); box-shadow:var(--ring); }
.carr-ws-badge::before{ content:""; width:6px; height:6px; border-radius:999px; background:var(--muted-2); }
.carr-ws-badge.on{ background:var(--good-soft); border-color:transparent; color:#047857; }
.carr-ws-badge.on::before{ background:var(--good); }
.carr-ws-badge.off{ background:var(--bad-soft); border-color:transparent; color:#B91C1C; }
.carr-ws-badge.off::before{ background:var(--bad); }

.carr-tabs{ display:flex; flex-wrap:wrap; gap:2px; margin:20px 6px 0; border-bottom:1px solid var(--line); }
.carr-tab{ padding:11px 17px; font-size:13px; font-weight:600; cursor:pointer; color:var(--muted); border:0; border-bottom:2px solid transparent; background:transparent; transition:color .15s ease, border-color .15s ease; user-select:none; margin-bottom:-1px; }
.carr-tab:hover{ color:var(--text); }
.carr-tab.active{ color:var(--brand); border-bottom-color:var(--brand); }

.carr-panel{ border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r-md) var(--r-md); background:var(--card); box-shadow:var(--shadow); padding:24px; margin:0 6px; }
.carr-ess{ max-width:600px; }
.carr-ess .fld{ margin-bottom:16px; }
.carr-sec{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--brand); margin:20px 0 14px; padding-bottom:7px; border-bottom:1px dashed var(--line); }
.carr-sec:first-child{ margin-top:0; }
.carr-grid{ display:flex; gap:16px; flex-wrap:wrap; }
.carr-fld{ flex:1; min-width:210px; margin-bottom:16px; }
.carr-fld.wide{ flex:2; min-width:300px; }
.carr-fld label,.carr-ess label{ display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.carr-fld input,.carr-fld select,.carr-ess input,.carr-ess select{ width:100%; padding:9px 12px; font-size:13.5px; font-family:var(--font); color:var(--text); background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); transition:border-color .15s ease, box-shadow .15s ease; box-sizing:border-box; }
.carr-fld input:hover,.carr-fld select:hover,.carr-ess input:hover,.carr-ess select:hover{ border-color:var(--muted-2); }
.carr-fld input:focus,.carr-fld select:focus,.carr-ess input:focus,.carr-ess select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.carr-hint,.carr-ess .hint{ font-size:12px; color:var(--muted-2); margin-top:6px; }

.carr-save{ margin-top:12px; padding-top:18px; border-top:1px solid var(--line-soft); }
.carr-ws .btn{ border-radius:var(--r-sm) !important; font-weight:600 !important; padding:9px 18px !important; }

.carr-roster{ width:100%; border-collapse:separate; border-spacing:0; margin-bottom:24px; }
.carr-roster th{ text-align:left; padding:9px 12px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted-2); border-bottom:1px solid var(--line); }
.carr-roster td{ padding:12px; font-size:13.5px; color:var(--text); border-bottom:1px solid var(--line-soft); }
.carr-roster tr:hover td{ background:var(--surface); }
.carr-roster a{ color:var(--brand); text-decoration:none; font-weight:600; }
.carr-roster a:hover{ text-decoration:underline; }
.carr-pill{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:999px; }
.carr-pill.on{ background:var(--good-soft); color:#047857; }
.carr-pill.off{ background:var(--bad-soft); color:#B91C1C; }
.carr-empty{ color:var(--muted-2); font-size:13px; padding:16px 0; }
.carr-empty a{ color:var(--brand); font-weight:600; }

.carr-frame{ width:100%; height:1400px; border:0; display:block; border-radius:var(--r-sm); background:var(--card); }
.carr-frame-note{ font-size:12px; color:var(--muted-2); padding:0 2px 14px; }
#carr_iframe_wrap{ display:none; }

/* =====================================================================
   WV GUIDANCE FRAMEWORK (2026-07-31) — reusable inline-help / onboarding.
   Emitted by application/helpers/wvguide_helper.php (wv_page_banner /
   wv_help / wv_empty_state) + assets/js/wv-tour.js. Uses the design tokens
   above so it inherits the theme on every page (no per-page CSS needed).
   ===================================================================== */
.wv-banner{ display:flex; align-items:flex-start; gap:10px; background:var(--brand-soft); border:1px solid var(--line);
  border-left:3px solid var(--brand); border-radius:var(--r-md); padding:12px 14px; margin:0 0 16px; font-size:13px; color:var(--text); }
.wv-banner-ico{ color:var(--brand); font-size:16px; line-height:1.3; flex:0 0 auto; }
.wv-banner-txt{ flex:1; line-height:1.55; color:var(--muted); }
.wv-banner-txt strong{ color:var(--text); font-weight:700; }
.wv-banner-tour{ color:var(--brand); font-weight:600; text-decoration:none; margin-left:4px; white-space:nowrap; }
.wv-banner-tour:hover{ text-decoration:underline; }
.wv-banner-x{ flex:0 0 auto; color:var(--muted-2); font-size:20px; line-height:1; text-decoration:none; padding:0 2px; }
.wv-banner-x:hover{ color:var(--bad); }

.wv-help{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:5px;
  border-radius:50%; background:var(--line); color:var(--muted); font-size:11px; font-weight:700; cursor:help;
  vertical-align:middle; line-height:1; }
.wv-help:hover, .wv-help:focus{ background:var(--brand); color:#fff; outline:none; }

.wv-empty{ text-align:center; padding:40px 20px; color:var(--muted); }
.wv-empty-ico{ font-size:34px; line-height:1; margin-bottom:10px; color:var(--muted-2); }
.wv-empty-title{ font-size:16px; font-weight:700; color:var(--text); margin-bottom:6px; }
.wv-empty-body{ font-size:13px; color:var(--muted); max-width:420px; margin:0 auto 14px; line-height:1.55; }
.wv-empty-cta{ display:inline-block; background:var(--brand); color:#fff; font-weight:600; font-size:13px;
  padding:8px 18px; border-radius:var(--r-sm); text-decoration:none; }
.wv-empty-cta:hover{ background:var(--brand-deep); color:#fff; }

/* =====================================================================
   WV GLOBAL TRENDY FLEXIGRID THEME (2026-07-31)
   Promotes the DID-page "trendy" grid look to ALL flexigrid list pages
   (titles + the data inside the cells). `html body` prefix + later
   cascade beats the earlier conservative `body .flexigrid` rules above.
   Padding is changed on BOTH th and td so flexigrid's inner-div
   width-sync stays column-count-INDEPENDENT: th outer pad == td outer
   pad == 0, visual padding lives inside the border-box inner div, and
   equal borders => every column's th outer width == td outer width for
   any width W / column count (verified <=1px drift across pages).
   Presentation only — no markup / JS / width-attr change. */
:root{ --wv-primary:#3B82F6; --wv-primary-deep:#2563EB; --wv-line:#E5E9F2; --wv-ink:#101828; --wv-sub:#667085; --wv-font:"Inter",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif; }
html body .flexigrid,html body .flexigrid *{font-family:var(--wv-font) !important}
/* ICON GUARD: the universal grid-font rule above must NOT clobber FontAwesome icon
   glyphs (the <i class="fa fa-..."> action-column edit/delete chips). Restore the
   icon font on any .fa element so the glyphs render instead of tofu. */
html body .flexigrid i.fa,html body .flexigrid .fa,html body .flexigrid [class^="fa-"],html body .flexigrid [class*=" fa-"]{font-family:"FontAwesome" !important}
html body .flexigrid{border:1px solid var(--wv-line) !important;border-radius:14px !important;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px -22px rgba(37,99,235,.34)}
html body .flexigrid div.mDiv{background:#fff !important;border-bottom:1px solid #EEF1F6 !important}
html body .flexigrid div.mDiv div.ftitle{color:var(--wv-ink) !important;font-weight:800;font-size:14px}
html body .flexigrid div.tDiv,html body .flexigrid div.tDiv2{background:#F8FAFC !important;border-color:#EEF1F6 !important}
html body .flexigrid div.fbutton{border-radius:8px}
/* Dashboard blue gradient header (matches the wv-accent tiles) */
html body .flexigrid div.hDiv{background:linear-gradient(135deg,#3B82F6 0%,#2563EB 100%) !important;border-bottom:0 !important}
html body .flexigrid div.hDivBox thead tr th{background:transparent !important;border-color:rgba(255,255,255,.14) !important;padding-left:0 !important;padding-right:0 !important}
html body .flexigrid div.hDivBox thead tr th div{color:rgba(255,255,255,.92) !important;text-transform:uppercase !important;letter-spacing:.04em !important;font-size:10.5px !important;font-weight:700 !important}
html body .flexigrid div.hDivBox thead tr th:hover div{color:#fff !important}
/* body cells + zebra + hover + trendy typography */
html body .flexigrid div.bDiv table td{border-color:#F4F6FA !important;color:#344054;padding:2px 0}
html body .flexigrid div.bDiv table td div{font-size:12.5px !important;font-weight:500 !important;color:#344054 !important;letter-spacing:-.005em;line-height:1.45;font-variant-numeric:tabular-nums;padding:9px 10px !important}
html body .flexigrid div.bDiv table td:first-child div{color:#667085 !important;font-weight:600 !important}
html body .flexigrid div.bDiv table td a{color:var(--wv-primary-deep) !important;font-weight:600 !important;text-decoration:none}
html body .flexigrid div.bDiv table td a:hover{color:#1D4ED8 !important;text-decoration:underline}
html body .flexigrid div.bDiv table tr.erow td{background:#F8FAFC !important}
html body .flexigrid div.bDiv table tr:hover td{background:#EFF8FF !important}
html body .flexigrid div.bDiv table tr:hover td:first-child{box-shadow:inset 3px 0 0 0 var(--wv-primary) !important}
/* pager + search toolbar */
html body .flexigrid div.pDiv{background:#F8FAFC !important;border-top:1px solid #EEF1F6 !important}
html body .flexigrid div.pDiv2 input.pcontrol{border:1px solid #D6DEEB;border-radius:7px}
html body .flexigrid div.sDiv,html body .flexigrid div.sDiv2{background:#F4F6FA !important;border-color:#EEF1F6 !important}
html body .flexigrid div.sDiv2 input,html body .flexigrid div.sDiv2 select{border:1px solid #D6DEEB;border-radius:8px}
/* ACTION-COLUMN ICON CHIPS: every grid's edit/delete/restore link is emitted by
   common.php as <a class="btn btn-royelblue btn-sm"><i class="fa ..."></a>. Turn
   them into clean square outline buttons; neutral at rest, brand-red on hover,
   red on the delete/destructive action. The FA glyph is restored by the icon guard
   above. Scoped to .btn-royelblue so text buttons are never affected. */
html body .flexigrid div.bDiv table td a.btn-royelblue{display:inline-flex !important;align-items:center;justify-content:center;width:30px;height:30px;margin:0 2px !important;padding:0 !important;border:1px solid var(--wv-line) !important;border-radius:8px !important;background:#fff !important;color:#98A2B3 !important;box-shadow:none !important;text-decoration:none !important;vertical-align:middle;transition:.15s ease}
html body .flexigrid div.bDiv table td a.btn-royelblue:hover{border-color:var(--wv-primary) !important;color:var(--wv-primary) !important;background:#EFF8FF !important;transform:translateY(-1px)}
html body .flexigrid div.bDiv table td a.btn-royelblue[href*="delete"]:hover,
html body .flexigrid div.bDiv table td a.btn-royelblue[onclick*="alert"]:hover{border-color:#EF4444 !important;color:#EF4444 !important;background:#FEF3F2 !important}
html body .flexigrid div.bDiv table td a.btn-royelblue i{color:inherit !important}
/* --- MODERNIZE THE DATA INSIDE CELLS: legacy Bootstrap label/arrowed + badge
   chips (label-inverse_blue/arrowed_blue-in, label-inverse/arrowed-in, badge-*)
   become clean rounded pills; the dated arrow-notch pseudo-elements are removed.
   Scoped to grid cells so other UI chips are untouched. Colour only. */
html body .flexigrid div.bDiv table td .label,
html body .flexigrid div.bDiv table td .badge{display:inline-block !important;padding:3px 11px !important;border-radius:999px !important;font-weight:700 !important;font-size:11px !important;line-height:1.6 !important;border:0 !important;box-shadow:none !important;text-shadow:none !important;letter-spacing:.01em !important}
html body .flexigrid div.bDiv table td [class*="arrowed"]:before,
html body .flexigrid div.bDiv table td [class*="arrowed"]:after{display:none !important;border:0 !important;content:none !important}
html body .flexigrid div.bDiv table td .label-inverse_blue,
html body .flexigrid div.bDiv table td .badge-primary,
html body .flexigrid div.bDiv table td .badge-dark{background:#EFF8FF !important;color:#175CD3 !important}
html body .flexigrid div.bDiv table td .badge-secondary,
html body .flexigrid div.bDiv table td .label-inverse{background:#F2F4F7 !important;color:#475467 !important}
html body .flexigrid div.bDiv table td .badge-success{background:#ECFDF3 !important;color:#067647 !important}
html body .flexigrid div.bDiv table td .badge-danger{background:#FEF3F2 !important;color:#B42318 !important}
html body .flexigrid div.bDiv table td .badge-warning{background:#FFFAEB !important;color:#B54708 !important}

/* WAYVZ BRANDING: replace the ASTPP page-transition loading mark
   (#loading-img, was assets/images/logo-only.png) with the WAYVZ "W".
   Unscoped + !important so it wins over style.css for BOTH admin and
   customer, and is delivered via the cache-busted (?v=filemtime) stylesheet
   so browsers pick it up on a normal reload (the raw .png stays cached). */
#loading-img{
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%233B82F6'/><stop offset='1' stop-color='%232563EB'/></linearGradient></defs><circle cx='32' cy='32' r='32' fill='url(%23g)'/><path d='M14 19 L23 46 L32 28 L41 46 L50 19' fill='none' stroke='%23ffffff' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:contain !important;
}