/* =====================================================================
   OffshoreKaka — WHMCS client-area skin
   Child theme of "twenty-one". Mirrors offshorekaka.in (Next.js site):
   dark neon glass aesthetic, Outfit font, cyan/purple/pink + gold CTAs.
   Light mode mirrors the main site's [data-theme="light"] palette.
   Loaded last via twenty-one's {assetExists file="custom.css"} hook.
   ===================================================================== */

/* ---------- Font (same family/weights as the main site) ---------- */
@font-face{font-family:'Outfit';src:url('https://offshorekaka.in/assets/fonts/outfit-v15-latin-300.woff2') format('woff2');font-weight:300;font-display:swap;}
@font-face{font-family:'Outfit';src:url('https://offshorekaka.in/assets/fonts/outfit-v15-latin-regular.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Outfit';src:url('https://offshorekaka.in/assets/fonts/outfit-v15-latin-500.woff2') format('woff2');font-weight:500;font-display:swap;}
@font-face{font-family:'Outfit';src:url('https://offshorekaka.in/assets/fonts/outfit-v15-latin-600.woff2') format('woff2');font-weight:600;font-display:swap;}
@font-face{font-family:'Outfit';src:url('https://offshorekaka.in/assets/fonts/outfit-v15-latin-700.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face{font-family:'Outfit';src:url('https://offshorekaka.in/assets/fonts/outfit-v15-latin-800.woff2') format('woff2');font-weight:800;font-display:swap;}

/* =====================================================================
   DESIGN TOKENS  (default = DARK, matching main site :root)
   ===================================================================== */
:root,
html[data-theme="dark"]{
  --ok-bg:#050508;
  --ok-bg-2:#0a0b12;
  --ok-bg-3:#0d0e16;
  --ok-surface:rgba(255,255,255,0.03);
  --ok-surface-2:rgba(255,255,255,0.05);
  --ok-text:#f0f4f8;
  --ok-text-muted:#8c9bb3;
  --ok-border:rgba(255,255,255,0.08);
  --ok-border-2:rgba(255,255,255,0.12);

  --ok-primary:#00e5ff;          /* cyan */
  --ok-primary-glow:rgba(0,229,255,0.40);
  --ok-secondary:#7b2cbf;        /* purple */
  --ok-accent:#ff007f;           /* pink */
  --ok-gold:#fec601;             /* CTA */
  --ok-gold-hover:#ffcc33;
  --ok-gold-glow:rgba(254,198,1,0.40);

  --ok-success:#21d07a;
  --ok-danger:#ff4d6d;
  --ok-warning:#fec601;
  --ok-info:#00e5ff;

  --ok-radius:14px;
  --ok-radius-lg:20px;
  --ok-shadow:0 8px 32px rgba(0,0,0,0.37);
  --ok-trans:all .3s cubic-bezier(.25,.8,.25,1);
}

/* ---------- LIGHT mode (mirrors main site [data-theme="light"]) ---------- */
html[data-theme="light"]{
  --ok-bg:#fafbff;
  --ok-bg-2:#ffffff;
  --ok-bg-3:#ffffff;
  --ok-surface:rgba(15,23,42,0.025);
  --ok-surface-2:#f1f5f9;
  --ok-text:#0f172a;
  --ok-text-muted:#475569;
  --ok-border:#e2e8f0;
  --ok-border-2:#cbd5e1;

  --ok-primary:#0e7490;
  --ok-primary-glow:rgba(8,145,178,0.15);
  --ok-secondary:#7c3aed;
  --ok-accent:#ec4899;
  --ok-gold:#f59e0b;
  --ok-gold-hover:#d97706;
  --ok-gold-glow:rgba(245,158,11,0.30);

  --ok-success:#059669;
  --ok-danger:#dc2626;
  --ok-warning:#d97706;
  --ok-info:#0e7490;
  --ok-shadow:0 1px 3px rgba(15,23,42,0.06);
}

/* =====================================================================
   BASE
   ===================================================================== */
html,body{
  font-family:'Outfit','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  background-color:var(--ok-bg) !important;
  color:var(--ok-text) !important;
  line-height:1.6;
}
body,body.primary-bg-color{
  background:
    radial-gradient(ellipse at 0% 0%, var(--ok-primary-glow) 0%, transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(123,44,191,0.18) 0%, transparent 45%),
    var(--ok-bg) !important;
  background-attachment:fixed !important;
}
html[data-theme="light"] body,
html[data-theme="light"] body.primary-bg-color{
  background:
    radial-gradient(ellipse at 0% 0%, rgba(8,145,178,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(124,58,237,0.05) 0%, transparent 50%),
    linear-gradient(180deg,#fafbff 0%,#ffffff 100%) !important;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5{color:var(--ok-text) !important;font-weight:700;letter-spacing:-.3px;}
p,span,label,dt,dd,td,th,li,.text-muted small,small{color:inherit;}
.text-muted{color:var(--ok-text-muted) !important;}
hr{border-color:var(--ok-border) !important;}
a{color:var(--ok-primary);transition:var(--ok-trans);}
a:hover,a:focus{color:var(--ok-gold);text-decoration:none;}

/* =====================================================================
   MASTHEAD  (top toolbar + brand)
   ===================================================================== */
#header.header{
  background:rgba(5,5,8,0.92) !important;
  border-bottom:1px solid var(--ok-border) !important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
html[data-theme="light"] #header.header{background:rgba(255,255,255,0.92) !important;}

#header .navbar.navbar-light{background:transparent !important;}

/* Brand: force the main-site logo so both sites read identical */
#header .navbar-brand{
  display:inline-flex !important;align-items:center;height:56px;
  padding:0;font-size:0 !important;line-height:0;
  background:url('https://offshorekaka.in/assets/img/logo.webp') left center / contain no-repeat;
  width:180px;
}
#header .navbar-brand img,#header .navbar-brand svg{display:none !important;}

/* toolbar (right) icons + text */
#header .navbar .nav-link,
#header .navbar .toolbar .nav-link{color:var(--ok-text) !important;}
#header .navbar .nav-link:hover{color:var(--ok-gold) !important;}
#header .cart-btn{
  background:var(--ok-surface-2) !important;border:1px solid var(--ok-border-2) !important;
  color:var(--ok-text) !important;border-radius:10px;
}

/* =====================================================================
   PRIMARY NAVIGATION
   ===================================================================== */
.main-navbar-wrapper,.navbar.main-navbar-wrapper{
  background:var(--ok-bg-2) !important;border-bottom:1px solid var(--ok-border) !important;
}
#nav .nav-link,.navbar-nav .nav-link{color:var(--ok-text-muted) !important;font-weight:500;}
#nav .nav-link:hover,#nav .nav-link:focus,
.navbar-nav .nav-link:hover,.navbar-nav .active>.nav-link,.navbar-nav .nav-link.active{
  color:var(--ok-primary) !important;
}
.dropdown-menu{
  background:var(--ok-bg-3) !important;border:1px solid var(--ok-border) !important;
  border-radius:12px;box-shadow:var(--ok-shadow);
}
.dropdown-item{color:var(--ok-text) !important;}
.dropdown-item:hover,.dropdown-item:focus{
  background:var(--ok-surface-2) !important;color:var(--ok-gold) !important;
}
.dropdown-divider{border-color:var(--ok-border) !important;}

/* =====================================================================
   CARDS / PANELS / WELLS  (the building blocks of every page)
   ===================================================================== */
.card,.panel,.well,.list-group-item,.tab-content,
.account-overview-card,.market-connect-card,.client-home-panels .panel{
  background:var(--ok-bg-3) !important;
  border:1px solid var(--ok-border) !important;
  border-radius:var(--ok-radius-lg) !important;
  color:var(--ok-text) !important;
  box-shadow:var(--ok-shadow);
}
html[data-theme="light"] .card,html[data-theme="light"] .panel,html[data-theme="light"] .well{
  box-shadow:0 1px 3px rgba(15,23,42,.06);
}
.card-header,.panel-heading,.card-footer,.panel-footer{
  background:var(--ok-surface) !important;
  border-color:var(--ok-border) !important;
  color:var(--ok-text) !important;
}
.bg-white,.bg-light{background:var(--ok-bg-3) !important;color:var(--ok-text) !important;}

/* generic white-box leak guard for nested utility backgrounds */
.panel-body,.card-body{background:transparent !important;color:var(--ok-text) !important;}

/* =====================================================================
   BUTTONS  (gold = primary CTA, exactly like the site)
   ===================================================================== */
.btn{border-radius:12px !important;font-weight:600;transition:var(--ok-trans);}
.btn-primary,.btn-order,.btn-success.checkout,#btnGoToConfigureProduct,
.btn-info.btn-checkout{
  background:var(--ok-gold) !important;border:none !important;color:#000 !important;
  font-weight:700;box-shadow:0 4px 20px var(--ok-gold-glow);
}
.btn-primary:hover,.btn-primary:focus,.btn-order:hover{
  background:var(--ok-gold-hover) !important;color:#000 !important;
  box-shadow:0 6px 26px var(--ok-gold-glow);transform:translateY(-1px);
}
.btn-secondary,.btn-default,.btn-light{
  background:var(--ok-surface-2) !important;border:1px solid var(--ok-border-2) !important;
  color:var(--ok-text) !important;
}
.btn-secondary:hover,.btn-default:hover{border-color:var(--ok-primary) !important;color:var(--ok-primary) !important;}
.btn-outline-primary,.btn-outline-secondary{
  background:transparent !important;border:1px solid var(--ok-gold) !important;color:var(--ok-gold) !important;
}
.btn-outline-primary:hover{background:var(--ok-gold) !important;color:#000 !important;}
.btn-success{background:var(--ok-success) !important;border:none !important;color:#021 !important;}
.btn-danger{background:var(--ok-danger) !important;border:none !important;color:#fff !important;}
.btn-link{color:var(--ok-primary) !important;}

/* "Order Now" CTA + cart "Checkout" button — brand gold, matches offshorekaka.in.
   Must come AFTER .btn-success (equal specificity) to win the cascade.
   (Checkout button is .btn-success.btn-checkout#checkout — green by default.) */
.btn-order-now,
#order-standard_cart .btn-order-now,
.products .product footer .btn-order-now,
.btn-checkout,#checkout,
#order-standard_cart .btn-checkout,
#order-standard_cart #checkout{
  background:var(--ok-gold) !important;border:none !important;color:#000 !important;
  font-weight:700 !important;box-shadow:0 4px 18px var(--ok-gold-glow) !important;
  letter-spacing:.2px;
}
.btn-order-now:hover,.btn-order-now:focus,
#order-standard_cart .btn-order-now:hover,
.btn-checkout:hover,.btn-checkout:focus,#checkout:hover,
#order-standard_cart .btn-checkout:hover{
  background:var(--ok-gold-hover) !important;color:#000 !important;
  box-shadow:0 6px 24px var(--ok-gold-glow) !important;transform:translateY(-1px);
}
.btn-order-now i,.btn-checkout i,#checkout i{color:#000 !important;}

/* =====================================================================
   FORMS
   ===================================================================== */
.form-control,.custom-select,.input-group-text,select,textarea,input[type=text],
input[type=email],input[type=password],input[type=number],input[type=tel],input[type=search]{
  background:var(--ok-bg-2) !important;
  border:1px solid var(--ok-border-2) !important;
  color:var(--ok-text) !important;border-radius:10px !important;
}
.form-control::placeholder{color:var(--ok-text-muted) !important;}
.form-control:focus,select:focus,textarea:focus{
  border-color:var(--ok-primary) !important;
  box-shadow:0 0 0 3px var(--ok-primary-glow) !important;background:var(--ok-bg-2) !important;
}
html[data-theme="light"] .form-control,html[data-theme="light"] select,html[data-theme="light"] textarea{background:#fff !important;}
.input-group-text{background:var(--ok-surface-2) !important;}

/* =====================================================================
   TABLES
   ===================================================================== */
.table,.table td,.table th{color:var(--ok-text) !important;border-color:var(--ok-border) !important;}
.table thead th{
  background:var(--ok-surface) !important;color:var(--ok-text-muted) !important;
  border-bottom:1px solid var(--ok-border) !important;text-transform:uppercase;
  font-size:.8rem;letter-spacing:.4px;
}
.table-striped tbody tr:nth-of-type(odd){background:rgba(255,255,255,0.02) !important;}
.table-hover tbody tr:hover{background:var(--ok-surface-2) !important;}
html[data-theme="light"] .table-striped tbody tr:nth-of-type(odd){background:#f8fafc !important;}

/* =====================================================================
   BADGES / LABELS / ALERTS / PROGRESS
   ===================================================================== */
.badge-primary,.label-primary{background:var(--ok-primary) !important;color:#021 !important;}
.badge-success,.label-success,.status-active{background:var(--ok-success) !important;color:#021 !important;}
.badge-danger,.label-danger{background:var(--ok-danger) !important;}
.badge-warning,.label-warning{background:var(--ok-warning) !important;color:#000 !important;}
.alert{border-radius:12px !important;border:1px solid var(--ok-border) !important;background:var(--ok-bg-3) !important;color:var(--ok-text) !important;}
.alert-success{border-left:4px solid var(--ok-success) !important;}
.alert-danger{border-left:4px solid var(--ok-danger) !important;}
.alert-info{border-left:4px solid var(--ok-primary) !important;}
.alert-warning{border-left:4px solid var(--ok-gold) !important;}
.progress{background:var(--ok-surface-2) !important;}
.progress-bar{background:linear-gradient(90deg,var(--ok-primary),var(--ok-secondary)) !important;}

/* =====================================================================
   SIDEBAR (client area)
   ===================================================================== */
.primary-sidebar .panel,.sidebar .panel,.primary-sidebar .list-group-item{
  background:var(--ok-bg-3) !important;border-color:var(--ok-border) !important;
}
.list-group-item.active,.list-group-item-action.active{
  background:var(--ok-surface-2) !important;border-color:var(--ok-primary) !important;
  color:var(--ok-primary) !important;
}
.list-group-item a{color:var(--ok-text) !important;}

/* =====================================================================
   HERO / JUMBOTRON / PAGE HEADERS / HOME PANELS
   ===================================================================== */
.jumbotron,.home-banner,.header-lined,.page-header{
  background:linear-gradient(135deg,rgba(0,229,255,0.06),rgba(123,44,191,0.08)) !important;
  border:1px solid var(--ok-border) !important;border-radius:var(--ok-radius-lg);
  color:var(--ok-text) !important;
}
.home-banner h1,.jumbotron h1{
  background:linear-gradient(135deg,var(--ok-primary),var(--ok-secondary));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.client-home-panels .number,.panel .number{color:var(--ok-primary) !important;}

/* =====================================================================
   FOOTER
   ===================================================================== */
#footer.footer,.footer{
  background:var(--ok-bg-2) !important;border-top:1px solid var(--ok-border) !important;
  color:var(--ok-text-muted) !important;
}
#footer a,.footer a{color:var(--ok-text-muted) !important;}
#footer a:hover,.footer a:hover{color:var(--ok-gold) !important;}

/* =====================================================================
   MODALS / MISC
   ===================================================================== */
.modal-content{background:var(--ok-bg-3) !important;color:var(--ok-text) !important;border:1px solid var(--ok-border) !important;border-radius:16px;}
.modal-header,.modal-footer{border-color:var(--ok-border) !important;}
.modal-header.bg-primary{background:var(--ok-secondary) !important;}
.close{color:var(--ok-text) !important;text-shadow:none;opacity:.7;}
.breadcrumb{background:transparent !important;}
.breadcrumb-item.active{color:var(--ok-text-muted) !important;}
.nav-tabs{border-bottom:1px solid var(--ok-border) !important;}
.nav-tabs .nav-link.active{background:var(--ok-bg-3) !important;border-color:var(--ok-border) var(--ok-border) var(--ok-bg-3) !important;color:var(--ok-primary) !important;}
.nav-tabs .nav-link{color:var(--ok-text-muted) !important;}
.pagination .page-link{background:var(--ok-bg-3) !important;border-color:var(--ok-border) !important;color:var(--ok-text) !important;}
.pagination .page-item.active .page-link{background:var(--ok-gold) !important;border-color:var(--ok-gold) !important;color:#000 !important;}

/* =====================================================================
   THEME TOGGLE BUTTON (injected by head.tpl) — same look as main site
   ===================================================================== */
#ok-theme-toggle{
  background:var(--ok-surface-2);border:1px solid var(--ok-border-2);color:var(--ok-text);
  width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:17px;margin:0 6px;transition:var(--ok-trans);
}
#ok-theme-toggle:hover{border-color:var(--ok-gold);color:var(--ok-gold);}

/* Scrollbar to match dark UI */
html[data-theme="dark"] ::-webkit-scrollbar{width:11px;height:11px;}
html[data-theme="dark"] ::-webkit-scrollbar-track{background:var(--ok-bg);}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#1c2030;border-radius:8px;border:2px solid var(--ok-bg);}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#2a3045;}

/* =====================================================================
   FIX 1 — breadcrumb band ("Portal Home / Announcements")
   Stock theme paints it #e9ecef (light grey); recolor to match dark UI.
   ===================================================================== */
.master-breadcrumb{
  background:var(--ok-bg-2) !important;
  border-bottom:1px solid var(--ok-border) !important;
}
html[data-theme="light"] .master-breadcrumb{background:var(--ok-surface-2) !important;}
.master-breadcrumb .breadcrumb,
.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a{color:var(--ok-text-muted) !important;}
.master-breadcrumb .breadcrumb-item a:hover{color:var(--ok-gold) !important;}
.master-breadcrumb .breadcrumb-item.active{color:var(--ok-text) !important;}
.master-breadcrumb .breadcrumb-item+.breadcrumb-item::before{color:var(--ok-text-muted) !important;}

/* =====================================================================
   FIX 2 — dropdown / menu stacking
   backdrop-filter on #header made a stacking context with z-index:auto, so
   page content painted over the open menus. Lift the whole masthead above
   content and push menus to the top layer.
   ===================================================================== */
#header.header{position:relative;z-index:1040;}
.navbar.navbar-light,
.main-navbar-wrapper,.navbar.main-navbar-wrapper{position:relative;z-index:1041;}
.dropdown,.dropdown.no-collapse{position:relative;}
.dropdown-menu,
#header .dropdown-menu,
.main-navbar-wrapper .dropdown-menu,
.navbar-nav .dropdown-menu{z-index:1090 !important;}
/* the store mega-dropdown and any open menu sit above cards */
.open>.dropdown-menu,.show>.dropdown-menu,.dropdown-menu.show{z-index:1090 !important;}
/* make sure content cards never create a context above the navbar */
.card,.panel,.tab-content{z-index:auto !important;}

/* =====================================================================
   FLOATING CHAT WIDGETS — 1:1 with offshorekaka.in (.floating-widgets)
   Glass rounded-square buttons, vertical stack, hover tooltips.
   ===================================================================== */
.floating-widgets{
  position:fixed !important;left:25px;bottom:30px;
  display:flex;flex-direction:column;gap:15px;z-index:990;
}
.floating-widgets .widget-btn{
  width:60px;height:60px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  color:#fff !important;font-size:28px;text-decoration:none;position:relative;
  border:1px solid rgba(255,255,255,0.1);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:all .4s cubic-bezier(0.175,0.885,0.32,1.275);
}
.floating-widgets .widget-btn.whatsapp{
  background:linear-gradient(135deg,rgba(37,211,102,0.2),rgba(18,140,126,0.4));
  box-shadow:0 10px 30px rgba(37,211,102,0.2),inset 0 0 15px rgba(37,211,102,0.2);
  border-color:rgba(37,211,102,0.4);
}
.floating-widgets .widget-btn.telegram{
  background:linear-gradient(135deg,rgba(0,136,204,0.2),rgba(0,102,153,0.4));
  box-shadow:0 10px 30px rgba(0,136,204,0.2),inset 0 0 15px rgba(0,136,204,0.2);
  border-color:rgba(0,136,204,0.4);
}
.floating-widgets .widget-btn:hover{transform:scale(1.1) translateX(5px);filter:brightness(1.2);}
.floating-widgets .widget-btn.whatsapp:hover{box-shadow:0 15px 40px rgba(37,211,102,0.4),0 0 20px rgba(37,211,102,0.3);}
.floating-widgets .widget-btn.telegram:hover{box-shadow:0 15px 40px rgba(0,136,204,0.4),0 0 20px rgba(0,136,204,0.3);}
.floating-widgets .widget-btn i{line-height:1;}
.floating-widgets .widget-btn::before{
  content:attr(data-label);position:absolute;left:75px;
  background:rgba(10,11,18,0.95);color:#fff;padding:8px 18px;border-radius:10px;
  font-size:14px;font-weight:600;white-space:nowrap;opacity:0;visibility:hidden;
  transition:all .3s ease;pointer-events:none;border:1px solid var(--ok-primary);
  box-shadow:0 5px 20px rgba(0,0,0,0.5);
}
.floating-widgets .widget-btn:hover::before{opacity:1;visibility:visible;left:70px;}
@media (max-width:767px){
  .floating-widgets{left:15px;bottom:20px;gap:12px;}
  .floating-widgets .widget-btn{width:52px;height:52px;font-size:24px;border-radius:14px;}
  .floating-widgets .widget-btn::before{display:none;}
}

/* =====================================================================
   LIGHT-MODE CONTRAST FIXES
   In light mode the masthead is white (like the main site). Fix the
   things that disappear on white: the white logo, faint nav links, and
   the translucent chat widgets (white icons vanish on white).
   ===================================================================== */

/* Logo: swap to the dark-text variant ("Offshore" is white in logo.webp
   and vanishes on a white header; logo-light.png has dark text). */
html[data-theme="light"] #header .navbar-brand{
  background-image:url('https://offshorekaka.in/assets/img/logo-light.png') !important;
}

/* Nav links: the stock theme hardcodes these anchors to white (#f0f4f8),
   which vanish on the white light header. They are .pr-4 / dropdown-toggle
   anchors, NOT .nav-link, so target the anchors directly. */
html[data-theme="light"] #header a,
html[data-theme="light"] #nav a,
html[data-theme="light"] #header .nav-link,
html[data-theme="light"] #header .dropdown-toggle,
html[data-theme="light"] .main-navbar-wrapper a{color:#1e293b !important;}
html[data-theme="light"] #header a:hover,
html[data-theme="light"] #nav a:hover,
html[data-theme="light"] .main-navbar-wrapper a:hover,
html[data-theme="light"] #nav .active>a{color:var(--ok-primary) !important;}
/* keep the gold "Sign In" / cart CTA buttons readable (dark text on gold) */
html[data-theme="light"] #header a.btn-primary,
html[data-theme="light"] #header .header-signin{color:#000 !important;}

/* Chat widgets: SOLID brand gradients so the white icons are visible
   (matches the main site's light-mode computed style). */
html[data-theme="light"] .floating-widgets .widget-btn{
  border:1px solid rgba(0,0,0,0.06);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
html[data-theme="light"] .floating-widgets .widget-btn.whatsapp{
  background:linear-gradient(135deg,#25D366,#128c7e) !important;
  box-shadow:0 8px 24px rgba(37,211,102,0.35) !important;border-color:#1da851 !important;
}
html[data-theme="light"] .floating-widgets .widget-btn.telegram{
  background:linear-gradient(135deg,#2AABEE,#1c87b8) !important;
  box-shadow:0 8px 24px rgba(42,171,238,0.35) !important;border-color:#1c87b8 !important;
}
html[data-theme="light"] .floating-widgets .widget-btn i{color:#fff !important;}
html[data-theme="light"] .floating-widgets .widget-btn::before{
  background:#0f172a;border-color:var(--ok-primary);
}

/* =====================================================================
   ORDER FORM (standard_cart) — the cart/checkout summary box renders a
   hard white background; theme it via the vars so it works in both modes
   (dark surface in dark mode, white in light mode).
   ===================================================================== */
.order-summary,.summary-container,.secondary-cart-sidebar,
.order-summary .summary-container{
  background:var(--ok-bg-3) !important;color:var(--ok-text) !important;
  border:1px solid var(--ok-border) !important;border-radius:var(--ok-radius-lg) !important;
}
.summary-container .subtotal,
.summary-container .recurring-totals,
.summary-container .promo,
.summary-container .total-due-today,
.order-summary .clearfix{
  color:var(--ok-text) !important;border-color:var(--ok-border) !important;
}
.summary-container hr,.order-summary hr{border-color:var(--ok-border) !important;}
.order-summary h1,.order-summary h2,.order-summary h3,
.summary-container .label,.summary-container span,.summary-container div{color:var(--ok-text) !important;}
.summary-container .amount,.summary-container .price{color:var(--ok-text) !important;}
/* the dark header strip above the summary keeps its own look; cart line items */
.cart-sidebar .panel,.order-summary .panel{background:var(--ok-bg-3) !important;}
/* product config / checkout panels in the order form */
.order-summary .continue,.summary-container a{color:var(--ok-primary) !important;}

/* =====================================================================
   DARK-MODE FIXES found via client-area QA
   ===================================================================== */

/* DataTables hardcode tbody cells to white — make them transparent so the
   card background shows through (dark card in dark mode, white in light). */
.table tbody td,.table tbody th,
.table-list tbody td,
table.dataTable tbody td,table.dataTable tbody th,
table.dataTable tbody tr td{
  background-color:transparent !important;color:var(--ok-text) !important;
}
table.dataTable tbody tr,.table tbody tr{background-color:transparent !important;}
.table-hover tbody tr:hover td{background:var(--ok-surface-2) !important;}
/* DataTables wrapper controls (length/search/info) text */
.dataTables_wrapper,.dataTables_info,.dataTables_length,.dataTables_filter,
.dataTables_paginate{color:var(--ok-text-muted) !important;}

/* Email verification banner: light grey #f9f9f9 by default → theme it */
.verification-banner,.email-verification,.verification-banner.email-verification{
  background:var(--ok-bg-3) !important;color:var(--ok-text) !important;
  border:1px solid var(--ok-border) !important;border-left:4px solid var(--ok-gold) !important;
}
.verification-banner a,.email-verification a{color:var(--ok-primary) !important;}
.verification-banner .btn,.email-verification .btn{color:var(--ok-text) !important;}

/* =====================================================================
   ORDER FORM (standard_cart) — FULL FLOW theming.
   The order form ships light-only styles (white .product cards, grey
   sub-panels, white fields) that become white islands with washed-out
   text in dark mode. Remap every hardcoded light surface via theme vars
   so both light and dark render correctly across the whole order flow:
   product list → configure → domain → review cart → checkout.
   ===================================================================== */

/* Primary surfaces: cards, cart items, promo/account boxes */
#order-standard_cart .products .product,
#order-standard_cart .view-cart-items .item,
#order-standard_cart .view-cart-promotion-code,
#order-standard_cart .mc-promo,
#order-standard_cart .account-select-container div.account,
.domain-checker-container .input-group-box,
.spotlight-tld{
  background:var(--ok-bg-3) !important;color:var(--ok-text) !important;
  border-color:var(--ok-border) !important;
}
/* logged-in cart: account chooser ("Create a New Account" + linked accounts).
   Base .account is #f6f6f6 / active is #fff in the stock css — re-skin both,
   highlight the selected one, and theme the container's light right border. */
#order-standard_cart .account-select-container{border-right-color:var(--ok-border) !important;}
#order-standard_cart .account-select-container div.account.active{
  background:var(--ok-surface-2) !important;border-color:var(--ok-primary) !important;
}
#order-standard_cart .account-select-container .account .address,
#order-standard_cart .account-select-container .account .small,
#order-standard_cart .account-select-container .account label{color:var(--ok-text) !important;}

/* Form fields in the order flow */
#order-standard_cart .field,
#order-standard_cart .form-control{
  background:var(--ok-bg-2) !important;color:var(--ok-text) !important;
  border-color:var(--ok-border-2) !important;
}
html[data-theme="light"] #order-standard_cart .field,
html[data-theme="light"] #order-standard_cart .form-control{background:#fff !important;}

/* Secondary surfaces: card headers, option rows, summaries, tabs, alt rows */
#order-standard_cart .products .product header,
#order-standard_cart .domain-selection-options .option,
#order-standard_cart .product-info,
#order-standard_cart .summary-container,
#order-standard_cart .apply-credit-container,
#order-standard_cart .view-cart-items .item:nth-child(even),
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
#order-standard_cart .view-cart-tabs .tab-content,
#order-standard_cart .mc-promo .body,
.domain-pricing .tld-pricing-header div:nth-child(odd),
.spotlight-tlds,
.suggested-domains .domain-lookup-suggestions-loader,
.domain-promo-box,
.domain-renewals,.service-renewals{
  background:var(--ok-surface-2) !important;color:var(--ok-text) !important;
  border-color:var(--ok-border) !important;
}

/* Text legibility across the whole order form */
#order-standard_cart,
#order-standard_cart h1,#order-standard_cart h2,#order-standard_cart h3,
#order-standard_cart h4,#order-standard_cart p,#order-standard_cart label,
#order-standard_cart span,#order-standard_cart td,#order-standard_cart th,
#order-standard_cart li,#order-standard_cart dt,#order-standard_cart dd,
#order-standard_cart .product header h2,#order-standard_cart .product-desc{
  color:var(--ok-text) !important;
}
#order-standard_cart .text-muted,#order-standard_cart .product-desc small{color:var(--ok-text-muted) !important;}

/* Price emphasis stays branded; borders/dividers themed */
#order-standard_cart .product .price,#order-standard_cart .price,
#order-standard_cart .cycle,#order-standard_cart .amount{color:var(--ok-primary) !important;}
#order-standard_cart .product,
#order-standard_cart .summary-container,
#order-standard_cart .view-cart-items .item{border:1px solid var(--ok-border) !important;}
#order-standard_cart hr{border-color:var(--ok-border) !important;}
#order-standard_cart .bordered-totals,#order-standard_cart .totals{border-color:var(--ok-border) !important;}
/* domain checker captcha + misc light boxes */
.domain-checker-captcha,.domain-promo-box,.tld-pricing-header{color:var(--ok-text) !important;}

/* Section-divider labels — "Configurable Options", "Personal Information",
   "Existing Customer Login" etc. The centered label uses .primary-bg-color
   which is a hardcoded #f1f1f1 white pill (theme.css). It sits on a horizontal
   divider line and must mask it with the PAGE bg, not white. Re-skin both. */
#order-standard_cart .sub-heading,
#order-standard_cart .sub-heading-borderless{border-top-color:var(--ok-border) !important;}
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span,
#order-standard_cart .sub-heading .primary-bg-color,
#order-standard_cart .primary-bg-color{
  background:var(--ok-bg) !important;color:var(--ok-primary) !important;font-weight:600;
}
html[data-theme="light"] #order-standard_cart .sub-heading span,
html[data-theme="light"] #order-standard_cart .sub-heading-borderless span,
html[data-theme="light"] #order-standard_cart .primary-bg-color{
  background:#fff !important;color:#0e7490 !important;
}

/* iCheck radios/checkboxes (payment gateways like PayPal, domain options, ToS,
   apply-credit) use the blue.png sprite which has a WHITE square baked into the
   image — it shows as a white box in dark mode. The white is in the PNG, so a
   bg color can't fix it: in dark mode we hide the sprite and CSS-draw the
   control instead. Light mode keeps the original sprite (looks fine there). */
html[data-theme="dark"] #order-standard_cart .iradio_square-blue,
html[data-theme="dark"] #order-standard_cart .icheckbox_square-blue{
  background-image:none !important;
  background-color:var(--ok-surface-2) !important;
  border:2px solid var(--ok-border-2) !important;
  width:22px !important;height:22px !important;position:relative;
  box-sizing:border-box;
}
html[data-theme="dark"] #order-standard_cart .iradio_square-blue{border-radius:50% !important;}
html[data-theme="dark"] #order-standard_cart .icheckbox_square-blue{border-radius:5px !important;}
html[data-theme="dark"] #order-standard_cart .iradio_square-blue.hover,
html[data-theme="dark"] #order-standard_cart .iradio_square-blue.checked,
html[data-theme="dark"] #order-standard_cart .icheckbox_square-blue.hover,
html[data-theme="dark"] #order-standard_cart .icheckbox_square-blue.checked{
  border-color:var(--ok-primary) !important;
}
/* radio: cyan dot when selected */
html[data-theme="dark"] #order-standard_cart .iradio_square-blue.checked::after{
  content:'';position:absolute;top:4px;left:4px;width:10px;height:10px;
  border-radius:50%;background:var(--ok-primary);
}
/* checkbox: cyan fill + dark check when selected */
html[data-theme="dark"] #order-standard_cart .icheckbox_square-blue.checked{
  background-color:var(--ok-primary) !important;
}
html[data-theme="dark"] #order-standard_cart .icheckbox_square-blue.checked::after{
  content:'';position:absolute;top:2px;left:7px;width:5px;height:10px;
  border:solid #04121a;border-width:0 2px 2px 0;transform:rotate(45deg);
}
html[data-theme="dark"] #order-standard_cart .iradio_square-blue.disabled,
html[data-theme="dark"] #order-standard_cart .icheckbox_square-blue.disabled{opacity:.45;}

/* PayPal Commerce (paypal_ppcpv) pay/checkout box — the module ships its own
   payment.css that hardcodes #fff / #f1f1f1 / #d9d9d9 / #666 (light look), so
   the "Link a New PayPal Account" / linked-accounts box shows light in dark
   mode. Override those exact declarations for dark theme (covers both the
   checkout #frmCheckout and invoice #frmPayment payment forms). */
html[data-theme="dark"] .paypal_ppcpv-payment-form #creditCardInputFields,
html[data-theme="dark"] #frmCheckout.paypal_ppcpv-payment-form #creditCardInputFields{
  background-color:var(--ok-bg-3) !important;border-radius:12px;
}
html[data-theme="dark"] .paypal_ppcpv-payment-form .paymethod-info,
html[data-theme="dark"] .paypal_ppcpv-payment-form #creditCardInputFields ul,
html[data-theme="dark"] #frmPayment.paypal_ppcpv-payment-form .paymethod-info[data-paymethod-id],
html[data-theme="dark"] .paypal_ppcpv-payment-form .paymethod-info:nth-child(5n+1),
html[data-theme="dark"] .paypal_ppcpv-payment-form .paymethod-info:nth-child(5n+4){
  border-color:var(--ok-border) !important;color:var(--ok-text) !important;
}
html[data-theme="dark"] .paypal_ppcpv-payment-form .selected{
  background-color:var(--ok-surface-2) !important;color:var(--ok-text) !important;
}
html[data-theme="dark"] .paypal_ppcpv-payment-form .payer-email,
html[data-theme="dark"] #frmCheckout.paypal_ppcpv-payment-form .payer-email,
html[data-theme="dark"] .paypal_ppcpv-payment-form .payer-label{
  color:var(--ok-text-muted) !important;
}
html[data-theme="dark"] .paypal_ppcpv-payment-form .approval-instructions{color:var(--ok-success) !important;}
html[data-theme="dark"] .paypal_ppcpv-payment-form{color:var(--ok-text) !important;}

/* "Pay with PayPal" smart-button area — the containers that wrap the PayPal SDK
   button (and the invoice #frmPayment pay box). Keep them on the page/dark bg so
   no white card shows behind the button. The PayPal button itself is a cross-
   origin SDK iframe and stays its standard gold — that's expected. */
html[data-theme="dark"] #paypal_ppcpv_input_container,
html[data-theme="dark"] #paypal_ppcpv_input_container_button,
html[data-theme="dark"] .paypal_ppcpv-payment-form #paymentGatewayInput,
html[data-theme="dark"] .paypal_ppcpv-payment-form .cc-payment-form,
html[data-theme="dark"] .paypal_ppcpv-payment-form #btnSubmitContainer,
html[data-theme="dark"] .paypal_ppcpv-payment-form .three-column-grid{
  background-color:transparent !important;color:var(--ok-text) !important;
}
html[data-theme="dark"] #frmPayment.paypal_ppcpv-payment-form,
html[data-theme="dark"] #frmPayment.paypal_ppcpv-payment-form #creditCardInputFields,
html[data-theme="dark"] #frmPayment.paypal_ppcpv-payment-form .paymethod-info:not([data-paymethod-id]){
  background-color:var(--ok-bg-3) !important;border-color:var(--ok-border) !important;color:var(--ok-text) !important;
}
/* generic WHMCS invoice pay-page wrappers, in case the button sits in one */
html[data-theme="dark"] #frmPayment .paymentbtn-container,
html[data-theme="dark"] #orderPaymentForm,
html[data-theme="dark"] .gateway-container{background-color:transparent !important;}

/* =====================================================================
   bootstrap-switch toggles (e.g. marketing-email "Yes / No" opt-in).
   Cohesive look for dark mode: "Yes" = theme neon-green (on-brand, replacing
   the off-brand stock bootstrap green), "No" = soft dark-grey track (NOT pure
   black, so it doesn't clash with green), knob = light grey.
   ===================================================================== */
html[data-theme="dark"] .bootstrap-switch{
  border-color:var(--ok-border-2) !important;background:var(--ok-surface-2) !important;
}
html[data-theme="dark"] .bootstrap-switch .bootstrap-switch-label{
  background:var(--ok-text-muted) !important;color:var(--ok-bg) !important;
  border-left-color:var(--ok-border) !important;border-right-color:var(--ok-border) !important;
}
/* "Yes" / on side → theme neon green */
html[data-theme="dark"] .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success{
  background:var(--ok-success) !important;color:#04121a !important;
  border-color:var(--ok-success) !important;
}
/* "No" / off side → soft dark-grey track (not black) */
html[data-theme="dark"] .bootstrap-switch .bootstrap-switch-handle-off:not(.bootstrap-switch-success):not(.bootstrap-switch-primary):not(.bootstrap-switch-info),
html[data-theme="dark"] .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,
html[data-theme="dark"] .bootstrap-switch .bootstrap-switch-default{
  background:var(--ok-surface-2) !important;color:var(--ok-text) !important;
}

/* =====================================================================
   Browser autofill — Chrome/Edge force a light yellow/white field bg via an
   internal box-shadow that ignores background-color. Repaint it for dark mode
   with an inset shadow + correct text colour. Light theme keeps native autofill.
   ===================================================================== */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] input:-webkit-autofill:active,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill:focus,
html[data-theme="dark"] select:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--ok-bg-2) inset !important;
  box-shadow:0 0 0 1000px var(--ok-bg-2) inset !important;
  -webkit-text-fill-color:var(--ok-text) !important;
  caret-color:var(--ok-text) !important;
  border-color:var(--ok-border-2) !important;
  transition:background-color 100000s ease-in-out 0s !important;
}

/* =====================================================================
   CLIENT-AREA SWEEP — elements that still showed the stock light version
   inside dark mode (dashboard tiles, white badges, invoice, markdown
   editor, file inputs, ticket replies, service icon). All dark-scoped so
   light theme is untouched.
   ===================================================================== */

/* -- dashboard / sidebar summary tiles (SERVICES / QUOTES / TICKETS …) -- */
html[data-theme="dark"] a.tile,
html[data-theme="dark"] .tile{
  background:var(--ok-bg-3) !important;border:1px solid var(--ok-border) !important;
  color:var(--ok-text) !important;
}
html[data-theme="dark"] a.tile:hover{
  background:var(--ok-surface-2) !important;border-color:var(--ok-primary) !important;
}
html[data-theme="dark"] .tile .tile-bottom,
html[data-theme="dark"] .tile small,
html[data-theme="dark"] .tile .tile-name{color:var(--ok-text-muted) !important;}

/* -- white / light count badges (keep coloured status badges intact) -- */
html[data-theme="dark"] .badge-light,
html[data-theme="dark"] .badge-secondary,
html[data-theme="dark"] .badge:not(.badge-success):not(.badge-danger):not(.badge-warning):not(.badge-info):not(.badge-primary):not(.status-active){
  background:var(--ok-surface-2) !important;color:var(--ok-text) !important;
  border:1px solid var(--ok-border) !important;
}

/* -- service detail product icon disc -- */
html[data-theme="dark"] .product-icon{
  background:var(--ok-surface-2) !important;color:var(--ok-primary) !important;
  border:1px solid var(--ok-border) !important;
}

/* -- invoice view (was a fully white sheet in dark mode) -- */
html[data-theme="dark"] .invoice-container{
  background:var(--ok-bg-3) !important;border:1px solid var(--ok-border) !important;
  color:var(--ok-text) !important;box-shadow:var(--ok-shadow) !important;
}
html[data-theme="dark"] .invoice-container .card,
html[data-theme="dark"] .invoice-container .card.bg-default,
html[data-theme="dark"] .card.bg-default,
html[data-theme="dark"] .bg-default{
  background:var(--ok-bg-2) !important;border-color:var(--ok-border) !important;color:var(--ok-text) !important;
}
html[data-theme="dark"] .invoice-container td,
html[data-theme="dark"] .invoice-container th,
html[data-theme="dark"] .invoice-container p,
html[data-theme="dark"] .invoice-container span,
html[data-theme="dark"] .invoice-container strong,
html[data-theme="dark"] .invoice-container label,
html[data-theme="dark"] .invoice-container h1,
html[data-theme="dark"] .invoice-container h2,
html[data-theme="dark"] .invoice-container h3,
html[data-theme="dark"] .invoice-container h4{color:var(--ok-text) !important;}
html[data-theme="dark"] .invoice-container hr,
html[data-theme="dark"] .invoice-container table,
html[data-theme="dark"] .invoice-container td,
html[data-theme="dark"] .invoice-container th{border-color:var(--ok-border) !important;}
html[data-theme="dark"] .invoice-container .total-row,
html[data-theme="dark"] .total-row{background:var(--ok-surface) !important;color:var(--ok-text) !important;}
/* always print invoices on white paper regardless of active theme */
@media print{
  .invoice-container,.invoice-container *{background:#fff !important;color:#000 !important;
    border-color:#ddd !important;box-shadow:none !important;}
}

/* -- markdown / ticket reply editor (toolbar + textarea + footer) -- */
html[data-theme="dark"] .md-editor,
html[data-theme="dark"] .md-editor .md-header,
html[data-theme="dark"] .md-header.btn-toolbar,
html[data-theme="dark"] .md-editor .md-footer,
html[data-theme="dark"] .md-footer{
  background:var(--ok-bg-2) !important;border-color:var(--ok-border) !important;color:var(--ok-text-muted) !important;
}
html[data-theme="dark"] .md-editor>textarea,
html[data-theme="dark"] textarea.md-input,
html[data-theme="dark"] textarea.markdown-editor,
html[data-theme="dark"] .md-editor .md-preview{
  background:var(--ok-bg-3) !important;color:var(--ok-text) !important;border-color:var(--ok-border) !important;
}
html[data-theme="dark"] .md-header .btn-group .btn,
html[data-theme="dark"] .md-header .btn{
  background:transparent !important;color:var(--ok-text-muted) !important;border-color:var(--ok-border) !important;
}
html[data-theme="dark"] .md-header .btn:hover{color:var(--ok-primary) !important;}

/* -- file input ("Choose file") -- */
html[data-theme="dark"] .custom-file-label,
html[data-theme="dark"] .custom-file-label::after{
  background:var(--ok-bg-3) !important;color:var(--ok-text) !important;border-color:var(--ok-border) !important;
}

/* -- support ticket reply blocks -- */
html[data-theme="dark"] .posted-by{
  background:var(--ok-surface) !important;color:var(--ok-text-muted) !important;
  border-color:var(--ok-border) !important;
}

/* -- broaden toggle off-side so every bootstrap-switch off state is dark -- */
html[data-theme="dark"] .bootstrap-switch .bootstrap-switch-handle-off{
  background:var(--ok-surface-2) !important;color:var(--ok-text) !important;
}


/* =====================================================================
   PROVISIONING MODULE PANELS (hetzner / HetznerVPS / mylocvps / mylocserver)
   Each ships its own light-styled clientarea UI with a distinct class prefix
   (.hz- / .hvps- / .mylv- / .myl-). These render on the service-detail page
   which DOES load custom.css, so we dark-theme the light surfaces here while
   keeping the semantic coloured action buttons & status badges intact.
   ===================================================================== */
html[data-theme="dark"] .hz-wrap,html[data-theme="dark"] .hvps-wrap,html[data-theme="dark"] .mylv-wrap,html[data-theme="dark"] .myl-wrap{color:var(--ok-text) !important;}
html[data-theme="dark"] .hz-card,html[data-theme="dark"] .hvps-card,html[data-theme="dark"] .mylv-card,html[data-theme="dark"] .myl-card{background:var(--ok-bg-3) !important;border:1px solid var(--ok-border) !important;color:var(--ok-text) !important;box-shadow:var(--ok-shadow) !important;}
html[data-theme="dark"] .hz-card-header,html[data-theme="dark"] .hvps-card-header,html[data-theme="dark"] .mylv-card-header,html[data-theme="dark"] .myl-card-header{background:var(--ok-surface) !important;border-color:var(--ok-border) !important;color:var(--ok-text) !important;}
html[data-theme="dark"] .hz-card-body,html[data-theme="dark"] .hvps-card-body,html[data-theme="dark"] .mylv-card-body,html[data-theme="dark"] .myl-card-body{background:transparent !important;color:var(--ok-text) !important;}
html[data-theme="dark"] .hz-server-header,html[data-theme="dark"] .hvps-server-header,html[data-theme="dark"] .mylv-server-header,html[data-theme="dark"] .myl-server-header{background:transparent !important;}
html[data-theme="dark"] .hz-server-title,html[data-theme="dark"] .hvps-server-title,html[data-theme="dark"] .mylv-server-title,html[data-theme="dark"] .myl-server-title{color:var(--ok-text) !important;}
html[data-theme="dark"] .hz-server-sub,html[data-theme="dark"] .hvps-server-sub,html[data-theme="dark"] .mylv-server-sub,html[data-theme="dark"] .myl-server-sub,html[data-theme="dark"] .hz-info-label,html[data-theme="dark"] .hvps-info-label,html[data-theme="dark"] .mylv-info-label,html[data-theme="dark"] .myl-info-label{color:var(--ok-text-muted) !important;}
html[data-theme="dark"] .hz-info-row,html[data-theme="dark"] .hvps-info-row,html[data-theme="dark"] .mylv-info-row,html[data-theme="dark"] .myl-info-row{border-color:var(--ok-border) !important;}
html[data-theme="dark"] .hz-info-value,html[data-theme="dark"] .hvps-info-value,html[data-theme="dark"] .mylv-info-value,html[data-theme="dark"] .myl-info-value{color:var(--ok-text) !important;}
html[data-theme="dark"] .hz-spec,html[data-theme="dark"] .hvps-spec,html[data-theme="dark"] .mylv-spec,html[data-theme="dark"] .myl-spec,html[data-theme="dark"] .hz-spec-row,html[data-theme="dark"] .hvps-spec-row,html[data-theme="dark"] .mylv-spec-row,html[data-theme="dark"] .myl-spec-row{background:var(--ok-surface-2) !important;color:var(--ok-text) !important;border-color:var(--ok-border) !important;}
html[data-theme="dark"] .hz-iface-table,html[data-theme="dark"] .hvps-iface-table,html[data-theme="dark"] .mylv-iface-table,html[data-theme="dark"] .myl-iface-table{color:var(--ok-text) !important;}
html[data-theme="dark"] .hz-iface-table th,html[data-theme="dark"] .hvps-iface-table th,html[data-theme="dark"] .mylv-iface-table th,html[data-theme="dark"] .myl-iface-table th{background:var(--ok-surface) !important;color:var(--ok-text-muted) !important;border-color:var(--ok-border) !important;}
html[data-theme="dark"] .hz-iface-table td,html[data-theme="dark"] .hvps-iface-table td,html[data-theme="dark"] .mylv-iface-table td,html[data-theme="dark"] .myl-iface-table td{border-color:var(--ok-border) !important;color:var(--ok-text) !important;}
html[data-theme="dark"] .hz-wrap code,html[data-theme="dark"] .hvps-wrap code,html[data-theme="dark"] .mylv-wrap code,html[data-theme="dark"] .myl-wrap code,html[data-theme="dark"] .hz-ip,html[data-theme="dark"] .hvps-ip,html[data-theme="dark"] .mylv-ip,html[data-theme="dark"] .myl-ip,html[data-theme="dark"] .hz-ipv6,html[data-theme="dark"] .hvps-ipv6,html[data-theme="dark"] .mylv-ipv6,html[data-theme="dark"] .myl-ipv6,html[data-theme="dark"] .hz-pwd,html[data-theme="dark"] .hvps-pwd,html[data-theme="dark"] .mylv-pwd,html[data-theme="dark"] .myl-pwd,html[data-theme="dark"] .hz-user,html[data-theme="dark"] .hvps-user,html[data-theme="dark"] .mylv-user,html[data-theme="dark"] .myl-user{background:var(--ok-bg-2) !important;color:var(--ok-primary) !important;border-color:var(--ok-border) !important;}
html[data-theme="dark"] .hz-refresh-btn,html[data-theme="dark"] .hvps-refresh-btn,html[data-theme="dark"] .mylv-refresh-btn,html[data-theme="dark"] .myl-refresh-btn{background:var(--ok-surface-2) !important;color:var(--ok-text) !important;border-color:var(--ok-border) !important;}
html[data-theme="dark"] .hz-gauge-num,html[data-theme="dark"] .hvps-gauge-num,html[data-theme="dark"] .mylv-gauge-num,html[data-theme="dark"] .myl-gauge-num,html[data-theme="dark"] .hz-gauge-label,html[data-theme="dark"] .hvps-gauge-label,html[data-theme="dark"] .mylv-gauge-label,html[data-theme="dark"] .myl-gauge-label,html[data-theme="dark"] .hz-gauge-unit,html[data-theme="dark"] .hvps-gauge-unit,html[data-theme="dark"] .mylv-gauge-unit,html[data-theme="dark"] .myl-gauge-unit,html[data-theme="dark"] .hz-gauge-center,html[data-theme="dark"] .hvps-gauge-center,html[data-theme="dark"] .mylv-gauge-center,html[data-theme="dark"] .myl-gauge-center,html[data-theme="dark"] .hz-gauge-quota,html[data-theme="dark"] .hvps-gauge-quota,html[data-theme="dark"] .mylv-gauge-quota,html[data-theme="dark"] .myl-gauge-quota{color:var(--ok-text) !important;}
html[data-theme="dark"] .hz-cfip-alert,html[data-theme="dark"] .hvps-cfip-alert,html[data-theme="dark"] .mylv-cfip-alert,html[data-theme="dark"] .myl-cfip-alert{background:rgba(254,198,1,.12) !important;border-color:rgba(254,198,1,.35) !important;color:#fde9a9 !important;}
html[data-theme="dark"] .hz-wrap [style*="#f8f9fa"],html[data-theme="dark"] .hvps-wrap [style*="#f8f9fa"],html[data-theme="dark"] .mylv-wrap [style*="#f8f9fa"],html[data-theme="dark"] .myl-wrap [style*="#f8f9fa"]{background:var(--ok-surface) !important;color:var(--ok-text-muted) !important;border-color:var(--ok-border) !important;}
html[data-theme="dark"] .hz-wrap [style*="background:#fff;"],html[data-theme="dark"] .hvps-wrap [style*="background:#fff;"],html[data-theme="dark"] .mylv-wrap [style*="background:#fff;"],html[data-theme="dark"] .myl-wrap [style*="background:#fff;"]{background:var(--ok-surface-2) !important;}