/* ===========================================================================
   Night mode, and small-screen layout.
   ---------------------------------------------------------------------------
   Everything that repaints is scoped to [data-mode="dark"]. Day mode therefore
   inherits NOTHING from this file -- both apps keep the exact look they were
   designed with, which is the point: a theme should add a night option, not
   quietly restyle the day.

   `data-mode` is the EFFECTIVE mode, computed in <head> before first paint:
   the stored choice, or the machine's preference when the choice is "system".
   Writing it as an attribute rather than a media query means each rule below
   is written once instead of twice, so the two can never drift apart.

   The selectors are not guesses. Both apps ship a large template stylesheet
   that hard-codes light colours (`.card{background:#fff}`,
   `.table-striped tbody tr:nth-of-type(odd){background:#fafafa}`, and ~100
   more), so overriding the Bootstrap variables alone leaves white cards and
   white rows behind. Each stylesheet was scanned for rules that paint a light
   background or dark text, and every one of them is answered below.
   =========================================================================== */

/* ===========================================================================
   Day values for the same tokens.

   These were only ever defined under [data-mode="dark"], so by day every
   `var(--c-…, <literal>)` in the app fell back to the literal it was written
   with -- and those literals came from the bought template, where they were
   picked to look bright rather than to be read. On white: the muted grey at
   2.97:1, the "Resolved" green at 3.56, the amber at 3.32, all under the 4.5
   body text needs.

   Defining them HERE, before the dark block, fixes every one of those call
   sites at once and still lets [data-mode="dark"] override each in turn --
   same specificity, and it comes later in the file.
   =========================================================================== */
:root {
  /* The primary button, in daylight.
     This used to be defined ONLY inside [data-mode="dark"], so by day every
     var(--c-btn, ...) fell through to whatever fallback its own file happened
     to carry -- #6d3fd1 in one, #111827 in another, #7c4ddb in the stylesheet.
     The same button was three colours depending on which file drew it. */
  --c-btn:       #6d3fd1;  --c-btn-hover: #5b32b8;

  --c-ink-muted: #64748b;   /* was #8a97a7 -- 2.97:1 */
  --c-ink-2:     #41526a;
  --c-ok-ink:    #157347;   /* was #1f9254 -- 3.56:1 */
  --c-warn-ink:  #8a5a12;   /* was #b7791f -- 3.32:1 */
  --c-bad-ink:   #b02a37;
  --c-info-ink:  #6d3fd1;   /* was #6d3fd1 */
}

/* The template paints every link the same bright teal: 2.48:1 on white. A link
   colour has to differ by mode -- the darkened teal that fixes it on white is
   3.25:1 on the night ground, so it goes through a token, not a literal. */
:root { --c-link: #6d3fd1; }
/* Link ink, for things that are actually links.

   The exclusion list used to name .btn and hope. It missed every custom button
   class in these apps -- .dc-btn-primary, .tm-btn, .pk-btn and the rest -- and
   because a chain of :not(.class) carries their specificity, this rule BEAT
   the button's own `color: #fff`. The Generate New Credentials button ended up
   with #c4b5fd text on its #6d3fd1 fill: 2.84:1, which is the washed-out look.

   [class*="btn"] catches the whole family at once, so a new button class is
   safe by default rather than after someone notices. */
/* The :focus half of this pair carried none of the exclusions the first half
   carries, so ANY focused link took the link colour -- including one in the
   sidebar. Settings is the only item there with href="#", so it is the only
   one that keeps focus after a click, and it alone turned link-blue against
   the navy rail: it read as greyed out, as though the menu were disabled.
   Both halves are excluded the same way now. */
a:not([class*="btn"]):not(.nav-link):not(.dropdown-item):not(.lp-nav a):not(.sidebar a),
a:focus:not([class*="btn"]):not(.nav-link):not(.dropdown-item):not(.lp-nav a):not(.sidebar a) {
  color: var(--c-link); }

/* The profile page's tabs sit on a BLUE ground, not white. Darkening their
   label for "contrast on white" took them from 4.9:1 to 1.25:1 -- the muddy
   unreadable row of tabs. They get a proper pair of states instead: white on
   the blue for the ones you can go to, white on the darkened brand teal for
   the one you are on (the original #03aabb was only 2.8:1 under white). */
.tablinks {
  color: #ffffff !important;
  background: #8b5cf6;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px 8px 0 0;
  transition: background-color .14s ease;
}
.tablinks:hover { background: #3d6489; }
.tab1 button.active,
.tablinks.active {
  background-color: #6d3fd1 !important;
  color: #ffffff !important;
  font-size: 13px;
  padding: 7px 14px;
  margin-top: 0;
  border-radius: 8px 8px 0 0;
}
.tab1 { border-bottom: 2px solid #6d3fd1; }

[data-mode="dark"] {
  --page:       #0d1420;   /* the ground behind everything */
  --surface:    #161f2c;   /* cards, panels, popovers      */
  --surface-2:  #1e2937;   /* table heads, insets, tabs    */
  --surface-3:  #26344a;   /* hover                        */
  --ink:        #e2e8f0;   /* body text                    */
  --ink-strong: #f8fafc;   /* headings, figures            */
  --ink-muted:  #93a1b5;   /* labels, hints, placeholders  */
  --line:       #2a3645;   /* borders and rules            */
  --field:      #111a26;   /* input grounds                */
  --field-line: #34455c;
  --brand-ink:  #b79cff;   /* the brand navy is unreadable on a dark ground */
  color-scheme: dark;

  /* ---------------------------------------------------------------------
     Tokens for the screens we built ourselves (wallet, packages, payments,
     credentials, calculator, usage log). Those were written with a light
     palette spelled out in hex, so each literal was turned into
     `var(--c-…, <the original hex>)`. Defining the tokens HERE and nowhere
     else means day mode falls back to the original hex -- byte for byte the
     look it always had -- and only night mode sees these values.
     --------------------------------------------------------------------- */
  --c-card:       #161f2c;   /* was #fff          */
  --c-inset:      #1a2431;   /* was #f7f9fc       */
  --c-inset2:     #1e2937;   /* was #eef2f7 etc.  */
  --c-line:       #2a3645;   /* was #e6ebf1 etc.  */

  --c-ink-strong: #f1f5fb;   /* was #111827 -- headings and figures */
  --c-ink:        #dbe4ef;   /* was #1f2937 -- body                 */
  --c-ink-2:      #aab8c9;   /* was #41526a -- secondary            */
  --c-ink-muted:  #93a1b5;   /* was #8a97a7 -- labels               */
  --c-ink-faint:  #78859a;   /* was #b3bdc9 -- placeholders         */

  /* A solid button ground. NOT --c-ink-strong: that is near-white at night,
     which would paint a white button under a white label. */
     The same blue as daylight, so a button does not change identity when the
     theme does; only the hover moves, lifting rather than deepening because
     a darker hover is invisible against a dark card. */
  --c-btn:       #6d3fd1;  --c-btn-hover: #8b5cf6;

  /* The current item in the left menu: a tint a hair lighter than --surface-2,
     so it reads as selected without becoming a second card, and a label light
     enough to sit on it. --c-btn is a mid blue meant for a WHITE label on a
     solid button; as text on this tint it manages 2.8:1. */
  --c-active-bg:  #1b3149;
  --c-active-ink: #cbbdf7;

  --c-ok-bg:   #12301f;  --c-ok-ink:   #6ee7a8;  --c-ok-line:   #1d4a33;
  --c-info-bg: #14273f;  --c-info-ink: #c4b5fd;  --c-info-line: #2e1a5c;
  --c-warn-bg: #33270d;  --c-warn-ink: #f0b45f;  --c-warn-line: #4d3a14;
  --c-bad-bg:  #351a1e;  --c-bad-ink:  #f8a3ab;  --c-bad-line:  #53262c;
}

/* ========================================================== page and shell */
html[data-mode="dark"],
[data-mode="dark"] body,
[data-mode="dark"] #main-wrapper,
[data-mode="dark"] #content,
[data-mode="dark"] .main-content,
[data-mode="dark"] #preloader, [data-mode="dark"] #pageLoader,
[data-mode="dark"] .report-container {
  background: var(--page) !important;
  color: var(--ink);
}

/* ================================================================ surfaces */
/* Raised things: anything that reads as a card sitting on the page. */
[data-mode="dark"] .card, [data-mode="dark"] .card-opt,
[data-mode="dark"] .ibox, [data-mode="dark"] .ibx-genrl,
[data-mode="dark"] .ibox-content, [data-mode="dark"] .ibox-content1,
[data-mode="dark"] .ibox-content-sen, [data-mode="dark"] .ibox-content-ip,
[data-mode="dark"] .ibox-content-cre, [data-mode="dark"] .ibox-content-editpro,
[data-mode="dark"] .page-title, [data-mode="dark"] .page-title1,
[data-mode="dark"] .topbar, [data-mode="dark"] .container1,
[data-mode="dark"] .account-card-new, [data-mode="dark"] .profile-card,
[data-mode="dark"] .testimonial, [data-mode="dark"] .team,
[data-mode="dark"] .featured-box.style-5,
[data-mode="dark"] .pricing-card, [data-mode="dark"] .plan-details,
[data-mode="dark"] .stat-card, [data-mode="dark"] .compliance-item,
[data-mode="dark"] .tabcontent, [data-mode="dark"] #customers,
[data-mode="dark"] #footer, [data-mode="dark"] .footer,
[data-mode="dark"] .modal-content, [data-mode="dark"] .dropdown-menu,
[data-mode="dark"] .manages-hover:hover .dropdown-menu,
[data-mode="dark"] .popover, [data-mode="dark"] .offcanvas,
[data-mode="dark"] .list-group-item, [data-mode="dark"] .accordion-item,
[data-mode="dark"] .fancybox__content,
/* our own additions */
[data-mode="dark"] .tok-card, [data-mode="dark"] .pm-card,
[data-mode="dark"] .dc-card, [data-mode="dark"] .np-card,
[data-mode="dark"] .ac-card, [data-mode="dark"] .pc-card,
[data-mode="dark"] .pk-card, [data-mode="dark"] .pk-svc,
[data-mode="dark"] .bg-white {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink);
}

/* Inset things: headers, table heads, tabs, subtle panels. */
[data-mode="dark"] .card-header, [data-mode="dark"] .card-footer,
[data-mode="dark"] .modal-header, [data-mode="dark"] .modal-footer,
[data-mode="dark"] .tabl-hd, [data-mode="dark"] thead td,
[data-mode="dark"] thead th, [data-mode="dark"] .results-table th,
[data-mode="dark"] .data-table thead th, [data-mode="dark"] .tok-table th,
[data-mode="dark"] .pay-table thead td,
[data-mode="dark"] .bg-light, [data-mode="dark"] .bg-light-1,
[data-mode="dark"] .bg-light-2, [data-mode="dark"] .bg-light-3,
[data-mode="dark"] .bg-light-4, [data-mode="dark"] .bg-light-5,
[data-mode="dark"] .detail-card, [data-mode="dark"] .features-list,
[data-mode="dark"] .risk-section, [data-mode="dark"] .stats-grid,
[data-mode="dark"] .input-group-text, [data-mode="dark"] .tags a,
[data-mode="dark"] .reset-btn, [data-mode="dark"] .divider,
[data-mode="dark"] .transaction-title,
[data-mode="dark"] .nav-tabs.flex-column .nav-item .nav-link,
[data-mode="dark"] .nav-tabs.alternate .nav-item .nav-link,
[data-mode="dark"] h2.resp-tab-active,
/* our own additions */
[data-mode="dark"] .pk-stat, [data-mode="dark"] .wl-filter,
[data-mode="dark"] .pc-load, [data-mode="dark"] .pm-pkgcard,
[data-mode="dark"] .np-summary, [data-mode="dark"] .ul-detail > td,
[data-mode="dark"] .pay-detail > td, [data-mode="dark"] tr.tok-off td {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
}

/* A selected tab reads as raised, not inset. */
[data-mode="dark"] .nav-tabs.alternate .nav-item .nav-link.active,
[data-mode="dark"] .resp-vtabs li.resp-tab-active,
[data-mode="dark"] .resp-vtabs li.resp-tab-active:hover {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

/* Hover states, which were all pale tints of white. */
[data-mode="dark"] .transaction-item:hover,
[data-mode="dark"] .notifications-list .notifications-item:hover,
[data-mode="dark"] #tranx_table tr:hover,
[data-mode="dark"] .results-table tr:hover,
[data-mode="dark"] .data-table tbody tr:hover,
[data-mode="dark"] .stat-card:hover, [data-mode="dark"] .page-link:hover,
[data-mode="dark"] .reset-btn:hover,
[data-mode="dark"] .bootstrap-select .dropdown-item:focus,
[data-mode="dark"] .bootstrap-select .dropdown-item:hover,
[data-mode="dark"] .dropdown-item:hover {
  background: var(--surface-3) !important;
  color: var(--ink-strong) !important;
}

/* ==================================================================== text */
[data-mode="dark"] body, [data-mode="dark"] .text-body,
[data-mode="dark"] label, [data-mode="dark"] .lab-txt,
[data-mode="dark"] ul.list-unstyled li,
[data-mode="dark"] ul.list-unstyled li span.float-end,
[data-mode="dark"] .list-item li a, [data-mode="dark"] .tags a,
[data-mode="dark"] .nav .nav-item .nav-link,
[data-mode="dark"] .primary-menu ul.navbar-nav > li > a:not(.btn),
[data-mode="dark"] .dropdown-item,
[data-mode="dark"] .new_leftmenu .nav-link {
  color: var(--ink) !important;
}

[data-mode="dark"] h1, [data-mode="dark"] h2, [data-mode="dark"] h3,
[data-mode="dark"] h4, [data-mode="dark"] h5, [data-mode="dark"] h6,
[data-mode="dark"] .value, [data-mode="dark"] .chart-header,
[data-mode="dark"] .features-list h3, [data-mode="dark"] .active_menu,
[data-mode="dark"] .nav-tabs .nav-item .nav-link.active,
[data-mode="dark"] strong, [data-mode="dark"] b,
[data-mode="dark"] .tok-name, [data-mode="dark"] .pk-svc-price {
  color: var(--ink-strong) !important;
}

/* The brand navy (#6d3fd1 / #1f1440 / #2e1a5c) disappears on a dark ground. */
[data-mode="dark"] .topbar h2, [data-mode="dark"] .topbar h4,
[data-mode="dark"] .card h3, [data-mode="dark"] .card .value,
[data-mode="dark"] .clr-icn-tbl, [data-mode="dark"] .rest-button,
[data-mode="dark"] .detail-card h3, [data-mode="dark"] .dblue,
[data-mode="dark"] .clr-blue, [data-mode="dark"] .card-title,
[data-mode="dark"] .signup-text a,
[data-mode="dark"] .navbar-light .navbar-nav .active > .nav-link,
[data-mode="dark"] .navbar-light .navbar-nav .nav-link.active,
[data-mode="dark"] .navbar-light .navbar-nav .show > .nav-link,
[data-mode="dark"] a.text-primary, [data-mode="dark"] .footer a,
[data-mode="dark"] #footer .nav .nav-item .nav-link {
  color: var(--brand-ink) !important;
}

/* .ibox-title is the navy->light-navy gradient strip at the top of a card --
   on every page that uses it, in both modes. It was in the list above, which
   repaints brand navy as #b79cff for a dark ground; on its own blue fill that
   is 2.59:1, so "Balance", "Spent (last 30 days)" and "Wallet Transactions"
   were blue-on-blue. Text on a coloured strip stays white. */
[data-mode="dark"] .ibox-title h3, [data-mode="dark"] .ibox-title h4,
[data-mode="dark"] .ibox-title h5, [data-mode="dark"] .ibox-title h6,
[data-mode="dark"] .ibox-title .card-title,
[data-mode="dark"] .ibox-title b, [data-mode="dark"] .ibox-title strong,
[data-mode="dark"] .ibox-title small, [data-mode="dark"] .ibox-title p {
  color: #ffffff !important;
}

[data-mode="dark"] .text-muted, [data-mode="dark"] small,
[data-mode="dark"] .card p, [data-mode="dark"] .forgot,
[data-mode="dark"] .bootstrap-select > .dropdown-toggle.bs-placeholder,
[data-mode="dark"] .pm-hint, [data-mode="dark"] .np-hint,
[data-mode="dark"] .ac-sec-note, [data-mode="dark"] .pk-note,
[data-mode="dark"] .dc-hint {
  color: var(--ink-muted) !important;
}

/* ================================================================== tables */
/* Bootstrap paints each cell with --bs-table-bg, and the template stylesheet
   hard-codes #fafafa on odd rows -- so recolouring the card behind a table is
   not enough on its own. */
[data-mode="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink);
  --bs-table-striped-bg: var(--surface-2);
  --bs-table-striped-color: var(--ink);
  --bs-table-hover-bg: var(--surface-3);
  --bs-table-hover-color: var(--ink-strong);
  --bs-table-border-color: var(--line);
}
[data-mode="dark"] .table, [data-mode="dark"] .tok-table,
[data-mode="dark"] .pay-table, [data-mode="dark"] .results-table,
[data-mode="dark"] .data-table { background: transparent; color: var(--ink); }

[data-mode="dark"] tbody tr { background: transparent !important; }
[data-mode="dark"] .table-striped tbody tr:nth-of-type(odd),
[data-mode="dark"] .results-table tr:nth-child(even) {
  background: var(--surface-2) !important;
}
[data-mode="dark"] .table tr, [data-mode="dark"] .table th,
[data-mode="dark"] .table td, [data-mode="dark"] tbody td,
[data-mode="dark"] tbody th, [data-mode="dark"] .tabl-row td {
  color: var(--ink) !important;
}
[data-mode="dark"] td, [data-mode="dark"] th, [data-mode="dark"] hr,
[data-mode="dark"] .ibox-title,
[data-mode="dark"] .table > :not(caption) > * > * { border-color: var(--line) !important; }

/* =================================================================== forms */
[data-mode="dark"] input, [data-mode="dark"] select, [data-mode="dark"] textarea,
[data-mode="dark"] .form-control, [data-mode="dark"] .form-select,
[data-mode="dark"] .entries-per-page select,
[data-mode="dark"] .dc-input, [data-mode="dark"] .np-input,
[data-mode="dark"] .np-select, [data-mode="dark"] .ac-input,
[data-mode="dark"] .pm-input, [data-mode="dark"] .pm-select,
[data-mode="dark"] .pk-cost, [data-mode="dark"] .pay-sel,
[data-mode="dark"] .pc-in {
  /* background-COLOR, not the `background` shorthand. The shorthand resets
     background-image too, and with !important behind it that erased the
     chevron from every <select> after dark -- including the one the browser
     draws itself. */
  background-color: var(--field) !important;
  color: var(--ink) !important;
  border-color: var(--field-line) !important;
}
[data-mode="dark"] input::placeholder,
[data-mode="dark"] textarea::placeholder { color: var(--ink-muted) !important; }
[data-mode="dark"] option { background-color: var(--surface) !important; color: var(--ink) !important; }
[data-mode="dark"] input[readonly], [data-mode="dark"] textarea[readonly],
[data-mode="dark"] select[disabled] {
  background-color: var(--surface-2) !important; color: var(--ink-muted) !important;
}
/* Native date/number widgets draw their own glyphs in black. */
[data-mode="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-mode="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.7);
}

/* The profile banner is a bright teal panel (#0e89b0) behind white text.
   Darkened it keeps the brand read and lifts the text to 7.7:1. */
[data-mode="dark"] .profile-banner { background-color: #0b5a74 !important; }

/* The tab strip inverts in day mode -- the selected tab is white, the rest are
   mid-blue. Night has to keep that relationship, so the selected tab is the
   LIGHTER one here too; simply recolouring both to card grey loses which tab
   you are on. */
[data-mode="dark"] .tab1 .tablinks {
  background: #1b2534 !important; color: var(--ink-muted) !important;
}
[data-mode="dark"] .tab1 .tablinks:hover {
  background: #24344a !important; color: var(--ink) !important;
}
[data-mode="dark"] .tab1 button.active,
[data-mode="dark"] .tab1 .tablinks.active {
  background: #2f4a6b !important; color: var(--ink-strong) !important;
}

/* The footer's grey (#67727c) was chosen against white. */
[data-mode="dark"] footer p, [data-mode="dark"] #footer p,
[data-mode="dark"] .footer p, [data-mode="dark"] footer .text-center {
  color: var(--ink-muted) !important;
}

/* Bootstrap's own defaults, which the template never overrode. `code` in
   particular is #d63384 -- fine on white, barely legible on a dark card, and
   it is what every client id and app key on these pages is rendered in. */
[data-mode="dark"] code, [data-mode="dark"] kbd, [data-mode="dark"] samp {
  color: #f2a0c4 !important;
}
[data-mode="dark"] pre {
  background-color: var(--field) !important; color: var(--ink) !important;
}
[data-mode="dark"] .btn-light, [data-mode="dark"] .btn-outline-secondary,
[data-mode="dark"] .btn-outline-dark {
  background: var(--surface-2) !important; color: var(--ink) !important;
  border-color: var(--line) !important;
}
[data-mode="dark"] .form-check-input:not(:checked) {
  background-color: var(--field) !important; border-color: var(--field-line) !important;
}
[data-mode="dark"] .breadcrumb, [data-mode="dark"] .table-light,
[data-mode="dark"] .table-light > td, [data-mode="dark"] .table-light > th {
  background: var(--surface-2) !important; color: var(--ink) !important;
}
[data-mode="dark"] .border, [data-mode="dark"] .border-top,
[data-mode="dark"] .border-bottom, [data-mode="dark"] .border-start,
[data-mode="dark"] .border-end { border-color: var(--line) !important; }

/* Status pills were pale green / pale red: keep the meaning, lose the glare. */
[data-mode="dark"] .status-active {
  background: #133024 !important; color: #6ee7a8 !important;
}
[data-mode="dark"] .status-inactive {
  background: #3a1a1f !important; color: #f8a3ab !important;
}

/* The admin's brand header is a bright teal gradient across the top of the
   page. Left alone it is the one glaring thing in an otherwise dark UI, so it
   keeps its hue and direction at roughly half the brightness. */
[data-mode="dark"] header, [data-mode="dark"] #header {
  background-image: linear-gradient(to left, #0c5573, #00727a) !important;
}

/* The panel's sidebar is already navy; it only needs a deeper ground so it
   does not glow against the page. */
[data-mode="dark"] .sidebar {
  background: linear-gradient(180deg, #14263f 0%, #102138 55%, #0c1a2c 100%) !important;
}

/* ===========================================================================
   The appearance switch. Styled for both hosts: a dark sidebar (panel) and a
   light card (admin, via .light-host).
   =========================================================================== */
.thm {
  display: flex; gap: 2px; margin: 0 14px 12px; padding: 3px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
}
.thm button {
  flex: 1; border: none; background: transparent; color: rgba(255, 255, 255, .62);
  font-size: 11px; font-weight: 700; padding: 6px 0; border-radius: 7px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 5px; transition: background .15s, color .15s;
}
.thm button:hover { color: #fff; }
.thm button.on { background: rgba(255, 255, 255, .18); color: #fff; }
.thm button i { font-size: 11px; }

.thm.light-host { background: #f1f4f8; border: 1px solid #e3e8ef; }
.thm.light-host button { color: #6b7a90; }
.thm.light-host button:hover { color: #111827; }
.thm.light-host button.on { background: #fff; color: #111827;
  box-shadow: 0 1px 3px rgba(16, 40, 70, .12); }
[data-mode="dark"] .thm.light-host { background: var(--surface-2) !important;
  border-color: var(--line) !important; }
[data-mode="dark"] .thm.light-host button { color: var(--ink-muted); }
[data-mode="dark"] .thm.light-host button.on { background: var(--surface) !important;
  color: var(--ink-strong); box-shadow: none; }

/* ===========================================================================
   Small screens. The sidebar is a fixed 240px column with the content offset
   by it, so on a phone the content was squeezed into what was left. Below
   992px it becomes a drawer over the page and the content takes full width.
   =========================================================================== */
#navToggle, #navScrim { display: none; }

@media (max-width: 991.98px) {
  /* !important because the app's own stylesheet also positions .sidebar. */
  .sidebar {
    transform: translateX(-100%) !important;
    transition: transform .22s ease;
    z-index: 1200 !important;
    box-shadow: 4px 0 26px rgba(0, 0, 0, .35);
    /* The drawer button is fixed at 10,10 -- inside this panel's own top-left
       corner once it slides out. Start the menu below it, not under it. */
    padding-top: 58px !important;
  }
  body.nav-open .sidebar { transform: translateX(0) !important; }

  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 4px 10px 10px !important;
  }
  .topbar { padding-left: 58px !important; }

  #navToggle {
    display: flex !important;
    position: fixed; top: 10px; left: 10px; z-index: 1300;
    width: 40px; height: 40px; align-items: center; justify-content: center;
    border: 1px solid #e3e8ef; border-radius: 10px;
    background: #fff; color: #111827;
    font-size: 16px; cursor: pointer; box-shadow: 0 2px 8px rgba(16, 40, 70, .18);
  }
  [data-mode="dark"] #navToggle {
    background: var(--surface); color: var(--ink-strong); border-color: var(--line);
  }
  body.nav-open #navScrim {
    display: block; position: fixed; inset: 0; z-index: 1150;
    background: rgba(0, 0, 0, .45);
  }

  /* Wide tables scroll inside their card rather than stretching the page. */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tok-table, .pay-table { min-width: 720px; }

  /* Stacks that sat side-by-side at desktop width. */
  .pk-facts { grid-template-columns: repeat(2, 1fr); }
  .pk-grid, .pk-plans { grid-template-columns: 1fr; }
  .wl-filter, .pc-load { flex-direction: column; align-items: stretch; }
  .wl-sum { margin-left: 0; }
}

/* ===========================================================================
   Night-mode gaps found by clicking through both consoles.
   =========================================================================== */

/* The sign-in card. stylesheet.css paints .login-container a hard
   rgba(255,255,255,.95) and nothing repainted it, while the text inside took
   the dark palette -- near-white ink on a white card, 1.11:1. The first screen
   of the product was unreadable after dark. */
[data-mode="dark"] .login-container {
  background-color: var(--surface, #161f2c) !important;
  border: 1px solid var(--line, #2a3645);
}
[data-mode="dark"] .logn_body { background-blend-mode: multiply; }

/* Bootstrap's own text colours are chosen for a white page. On this ground
   .text-muted reads 3.5:1 and .text-success 3.3:1 -- both under the 4.5 body
   text needs, and both used for things that matter (row counts, "Enabled"). */
[data-mode="dark"] .text-muted,
[data-mode="dark"] .dataTables_info,
[data-mode="dark"] .pagination-info { color: var(--c-ink-2, #aab8c9) !important; }
[data-mode="dark"] .text-success,
[data-mode="dark"] .text-green { color: var(--c-ok-ink, #6ee7a8) !important; }
[data-mode="dark"] .text-danger { color: var(--c-bad-ink, #f8a3ab) !important; }
[data-mode="dark"] .text-primary { color: var(--c-info-ink, #c4b5fd) !important; }

/* A solid-green badge with a white label is 3.96:1. Give the pill the same
   tinted treatment every other state indicator here uses. */
[data-mode="dark"] .badge.bg-success,
[data-mode="dark"] .badge-success {
  background: var(--c-ok-bg, #12301f) !important;
  color: var(--c-ok-ink, #6ee7a8) !important;
}
[data-mode="dark"] .badge.bg-danger,
[data-mode="dark"] .badge-danger {
  background: var(--c-bad-bg, #351a1e) !important;
  color: var(--c-bad-ink, #f8a3ab) !important;
}

/* Pagination: the panel's navy #6d3fd1 as TEXT on a dark ground is 2.1:1 --
   the page numbers were very nearly invisible. */
[data-mode="dark"] .pagination .page-link,
[data-mode="dark"] .paginate_button,
[data-mode="dark"] .pagination a { color: var(--c-info-ink, #c4b5fd) !important; }
[data-mode="dark"] .pagination .page-item.active .page-link {
  background: var(--c-btn, #7c4ddb) !important;
  border-color: var(--c-btn, #7c4ddb) !important;
  color: #fff !important;
}

/* The three the class-level rules above did not reach -- found by reading the
   exact elements the sweep flagged rather than guessing at more selectors. */

/* "Showing 1 to 10 of 428": the figures are bare <span>s carrying the panel's
   navy #6d3fd1. As text on a dark ground that is 2.1:1 -- the numbers were
   very nearly invisible. */
[data-mode="dark"] .pagination-info,
[data-mode="dark"] .pagination-info span {
  color: var(--c-ink-2, #aab8c9) !important;
}
[data-mode="dark"] .pagination-info span { font-weight: 700; }

/* "entries" beside the rows-per-page select, inheriting Bootstrap's #6c757d. */
[data-mode="dark"] .entries-per-page,
[data-mode="dark"] .entries-per-page span,
[data-mode="dark"] .dataTables_length,
[data-mode="dark"] .dataTables_length label { color: var(--c-ink-2, #aab8c9) !important; }

/* The package card's state chip: white on solid green is 3.96:1. Same tinted
   treatment as every other state indicator in the dark palette. */
[data-mode="dark"] .pk-chip.good {
  background: var(--c-ok-bg, #12301f) !important;
  color: var(--c-ok-ink, #6ee7a8) !important;
}
[data-mode="dark"] .pk-chip.bad {
  background: var(--c-bad-bg, #351a1e) !important;
  color: var(--c-bad-ink, #f8a3ab) !important;
}

/* ===========================================================================
   Button labels. NOT a night-mode fix -- this one is wrong in both modes.

   A white label on the teal the template uses for its primary action reads at
   2.6:1 (#02b0bd), 2.8:1 (#00a4e3) and 2.5:1 (#00b6bf). Button text needs 4.5.
   Every "Search", "Reset" and "Add Company" in both consoles has been below
   half the required contrast since the template was bought.

   The hue is unchanged -- this is the same teal, taken down until the label on
   it can actually be read (#6d3fd1 is 4.5:1, #6d3fd1 is 5.1:1). Applied at the
   top level, not under [data-mode], because day mode has the same problem.
   =========================================================================== */
.view-more-button, .vieew-more-button,
.btn-sbmt, .btn-sbmt1 {
  background-color: #6d3fd1 !important;
  border-color: #6d3fd1 !important;
  color: #fff !important;
}
.view-more-button:hover, .vieew-more-button:hover,
.btn-sbmt:hover, .btn-sbmt1:hover {
  background-color: #5b32b8 !important;
  border-color: #5b32b8 !important;
  color: #fff !important;   /* the old hover turned the label near-black on cyan */
}
/* A FILLED grey button -- stylesheet.css gives it `background:#6c757d`. It was
   painted teal here, with a border colour, as though it were an outline button:
   teal on grey is about 1.4:1, so the label was invisible in both themes. */
.back-more-button { color: #fff !important; }
.back-more-button:hover { background-color: #565e64 !important; color: #fff !important; }
[data-mode="dark"] .back-more-button { color: #fff !important; }
[data-mode="dark"] .back-more-button:hover { background-color: #565e64 !important; }

/* ===========================================================================
   Day-mode text contrast.

   The template's palette was chosen to look bright, not to be read. On white,
   every one of these is under the 4.5:1 body text needs -- the teal accent at
   2.5, the muted greys at 2.9, the state colours at 3.1-4.0. Same hues, taken
   down until the words can be read; nothing here changes what a colour MEANS,
   only whether you can see it. (Gradient-backed text such as the header's
   Day/Night switch is excluded -- white on that teal is fine.)
   =========================================================================== */
.green                                  { color: #6d3fd1 !important; }   /* 2.49 -> 5.11 */
.text-muted, .text-mute, small.text-muted { color: #64748b !important; } /* 2.97 -> 4.76 */
.nav-tabs .nav-link                     { color: #5c6367; }              /* 3.99 -> 6.11 */
.text-success, .text-green              { color: #157347 !important; }   /* 3.13 -> 5.87 */
/* stylesheet.css sets #00b6bf !important on a list that includes .btn-link --
   which is what "View all" is, so targeting .text-primary alone missed it. */
.text-primary, .btn-link, a.btn-link    { color: #6d3fd1 !important; }   /* 3.98 -> 6.44 */
.text-warning                           { color: #8a5a12 !important; }   /* 3.64 -> 5.91 */

/* The night palette sets its own values for all of these further up, and this
   block sits above [data-mode="dark"] rules of equal specificity only where
   they use !important -- so each of the above is answered after dark too. */
[data-mode="dark"] .green               { color: var(--c-info-ink, #c4b5fd) !important; }
[data-mode="dark"] { --c-link: #c4b5fd; }
[data-mode="dark"] .tablinks            { color: #ffffff !important; background: #3b2378; }
[data-mode="dark"] .tablinks:hover      { background: #35587e; }
[data-mode="dark"] .tab1 button.active,
[data-mode="dark"] .tablinks.active     { background-color: var(--c-btn, #7c4ddb) !important; }
[data-mode="dark"] .tab1                { border-bottom-color: var(--c-btn, #7c4ddb); }
[data-mode="dark"] .text-primary,
[data-mode="dark"] .btn-link,
[data-mode="dark"] a.btn-link           { color: var(--c-info-ink, #c4b5fd) !important; }
[data-mode="dark"] .nav-tabs .nav-link  { color: var(--c-ink-2, #aab8c9); }
[data-mode="dark"] .text-warning        { color: var(--c-warn-ink, #f0b45f) !important; }


/* ===========================================================================
   FORM CONTROLS -- one shape for every field and button
   ===========================================================================

   These apps grew four different <select> styles, three input styles and a
   scatter of button shapes, because each page styled its own. A survey of the
   pages found selects at 30px, 37px and 40px tall, with 4px and 11px corners,
   some carrying the browser's native arrow and some not -- side by side in the
   same filter row.

   So the shape is stated once, here, in the stylesheet that loads last. Pages
   keep their own classes; they simply no longer decide how tall a dropdown is.

   Excluded on purpose: checkboxes and radios (their own shape), file inputs
   (the browser owns that widget), the 2FA digit boxes, and anything inside a
   .thm / .navbar control, which are icon buttons rather than
   form fields. */

:root {
  --ctl-h: 40px;
  --ctl-radius: 10px;
  --ctl-pad-x: 13px;
  --ctl-font: 13.5px;
  --ctl-accent: #6d3fd1;
}

input[type="text"]:not([hidden]), input[type="email"]:not([hidden]),
input[type="password"]:not([hidden]), input[type="search"]:not([hidden]),
input[type="number"]:not([hidden]), input[type="tel"]:not([hidden]),
input[type="url"]:not([hidden]), input[type="date"]:not([hidden]),
input[type="datetime-local"]:not([hidden]), input[type="time"]:not([hidden]),
select:not([hidden]), textarea:not([hidden]) {
  box-sizing: border-box;
  min-height: var(--ctl-h);
  margin: 0;
  padding: 0 var(--ctl-pad-x);
  font-family: inherit;
  font-size: var(--ctl-font);
  line-height: normal;
  color: var(--c-ink-strong, #111827);
  background-color: var(--c-card, #fff);
  border: 1px solid var(--c-line, #dfe5ec);
  border-radius: var(--ctl-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* A textarea is the one control that must not be a fixed row high. */
textarea:not([hidden]) { min-height: 88px; padding: 10px var(--ctl-pad-x); line-height: 1.45; }

/* The dropdown arrow, drawn once instead of left to the platform.

   Native select arrows differ between macOS, Windows and Linux, which is why
   these never looked like a set. appearance:none removes the platform widget;
   the chevron below is a background image, so it costs no extra markup and
   cannot fall out of sync with the field. padding-right leaves room for it. */
select:not([hidden]) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2341526a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px 8px;
  cursor: pointer;
}
/* The chevron is drawn in ink, so at night it needs the pale one instead. */
[data-mode="dark"] select:not([hidden]) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23a9b6c6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* With the image, everything that places it: a `background` shorthand
     elsewhere resets these, and this rule alone would then tile it. */
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px 8px;
}
select:not([hidden]):disabled { opacity: .55; cursor: not-allowed; }

/* One focus treatment everywhere: the border takes the accent and a soft ring
   grows outside it. Never `outline: none` on its own -- that removes the only
   thing a keyboard user has to go on. */
input:not([hidden]):focus, select:not([hidden]):focus, textarea:not([hidden]):focus {
  outline: none;
  border-color: var(--ctl-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctl-accent) 18%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--c-ink-muted, #8a97a7); }

/* --- controls that are NOT text fields ----------------------------------

   This undoes `input { width: 100% }` from stylesheet.css, which would
   otherwise stretch a checkbox across its row.

   Bootstrap's own form-check controls are excluded. They size themselves --
   1em for a checkbox, 2em for the switch track -- and this rule outweighs
   theirs: `input[type="checkbox"]:not([hidden])` is (0,2,1) against
   `.form-switch .form-check-input` at (0,2,0). `auto` on a control with
   `appearance: none` has no intrinsic size to fall back to, so the result was
   a switch zero pixels wide. The Auto Renew toggle on the admin's Balance tab
   was invisible for exactly this reason -- the label read "Yes" beside a 1px
   sliver, and there was no way to change it. */
input[type="checkbox"]:not([hidden]):not(.form-check-input),
input[type="radio"]:not([hidden]):not(.form-check-input) {
  min-height: 0; width: auto; padding: 0; border-radius: 0;
  accent-color: var(--ctl-accent);
}
input[type="file"]:not([hidden]) { min-height: 0; padding: 8px 12px; }
input[type="range"]:not([hidden]) { min-height: 0; padding: 0; border: 0; background: none; }
/* Single-character boxes size themselves. */
.twofa-otp-box { min-height: 0 !important; padding: 0 !important; }

/* --- buttons ------------------------------------------------------------
   Only real buttons: the icon controls in the header and sidebar keep their
   own shape, and are named here rather than swept up. */
button.btn, a.btn, input[type="submit"], input[type="button"],
.btn-primary, .btn-secondary, .btn-danger {
  min-height: var(--ctl-h);
  padding: 0 18px;
  border-radius: var(--ctl-radius);
  font-family: inherit;
  font-size: var(--ctl-font);
  font-weight: 700;
  line-height: normal;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: filter .15s ease, box-shadow .15s ease;
}
button.btn:hover, a.btn:hover, input[type="submit"]:hover { filter: brightness(1.06); }
button.btn:active, a.btn:active, input[type="submit"]:active { filter: brightness(.96); }
button.btn:focus-visible, a.btn:focus-visible, input[type="submit"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctl-accent) 32%, transparent);
}
button:disabled, .btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; filter: none; }

/* The header's theme switch, the sidebar's environment toggle and the table
   row icons are buttons in markup only -- they must keep their own metrics. */
.thm button, .nb-btn, .navbar-toggler,
#navToggle, .act-bt, .tok-status, .nt-read, .sp-refresh, .nt-all,
.fancybox__button, .tm-btn, .al-pg a, .al-pg span {
  min-height: 0;
}


/* =========================================================
   Pagination at night
   =========================================================
   Two things were wrong here. The active-page rule was written for Bootstrap 5
   markup (`.page-item.active .page-link`) while these pages render
   `li.active > a`, so it never matched -- the page you were on was a navy chip
   on a dark ground, the one slot you most need to pick out. And the buttons
   were being styled by three unrelated grab-bag selectors further up, so the
   day rules' navy text came through on a dark card at 2.11:1.

   Same shape as day: a boxed button per slot, a filled chip for the current
   page, a faded box for a dead edge. */
[data-mode="dark"] .pagination a {
  background-color: var(--c-card, #161d26) !important;
  border-color: var(--c-line, #2a3542) !important;
  color: var(--c-info-ink, #c4b5fd) !important;
}
[data-mode="dark"] .pagination a:hover {
  background-color: rgba(140, 192, 248, 0.14) !important;
  border-color: #c4b5fd !important;
  color: #e4dbfc !important;
}
[data-mode="dark"] .pagination .active a,
[data-mode="dark"] .pagination .active a:hover,
[data-mode="dark"] .pagination .page-item.active .page-link {
  background: linear-gradient(90deg, #7c4ddb 0%, #8b5cf6 100%) !important;
  border-color: var(--c-btn, #7c4ddb) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(124, 77, 219, 0.4) !important;
}
[data-mode="dark"] .pagination .disabled a,
[data-mode="dark"] .pagination .disabled a:hover {
  background-color: var(--surface-2, #1a222d) !important;
  border-color: var(--c-line, #2a3542) !important;
  /* Dimmer than the rest of the row but still readable: --c-ink-faint landed
     at 4.44:1 here, just under the line. */
  color: #8b98aa !important;
}