/**
 * SLICK DEFAULTS - Global Design System
 * =====================================
 *
 * Applies slick styling to Bootstrap classes without requiring
 * explicit .slick-* classes or #content-cloud wrapper.
 *
 * SCOPE: body.template_togglebox (entire client portal; includes nav/sidebar/footer)
 * REQUIRES: theme-variables.css (CSS custom properties)
 *
 * This file makes slick styling the template default by targeting
 * generic Bootstrap classes (.table, .btn, .form-control, etc.)
 * within the main content area.
 */

/* ===========================================
   TABLES
   =========================================== */

.template_togglebox .table {
  width: 100%;
  background: var(--color-bg, #fff);
  border-radius: 8px;
  overflow: visible;
  box-shadow: var(--shadow-sm);
  border-collapse: separate;
  border-spacing: 0;
}

.template_togglebox .table thead {
  position: relative;
  background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-3) 100%);
  border-bottom: 2px solid var(--color-border-subtle);
}

.template_togglebox .table th,
.template_togglebox .table thead td {
  padding: 12px 16px;
  text-align: left;
  font-weight: var(--font-weight-600, 600);
  font-size: .75rem;
  line-height: var(--line-height-125, 1.25);
  color: var(--color-fg-subtle);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-030, 0.03em);
  border: none;
}

.template_togglebox .table td {
  padding: 10px 16px;
  text-align: left;
  border-top: none;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-md, 14px);
  font-weight: var(--font-weight-400, 400);
  line-height: var(--line-height-135, 1.35);
  vertical-align: middle;
}

.template_togglebox .table tbody tr {
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background .15s ease, box-shadow .15s ease;
}

.template_togglebox .table tbody tr:nth-child(odd) {
  background: var(--color-surface-3, #fafbfc);
}

.template_togglebox .table tbody tr:nth-child(even) {
  background: var(--color-bg, #fff);
}

.template_togglebox .table tbody tr:hover {
  background: var(--brand-primary-bg) !important;
  box-shadow: var(--shadow-sm);
}

/* Dark mode: force override compiled Bootstrap table-striped rules */
/* Kept: no verification page renders it, so the token diff cannot show it is redundant yet. */
html[data-theme="dark"] .template_togglebox .table tbody tr:nth-child(odd) {
  background: var(--color-surface-3, #1f2937) !important;
}

/* Kept: no verification page renders it, so the token diff cannot show it is redundant yet. */
html[data-theme="dark"] .template_togglebox .table tbody tr:nth-child(even) {
  background: var(--color-bg, #0f172a) !important;
}
/* First row top border radius */
.template_togglebox .table thead tr:first-child th:first-child {
  border-top-left-radius: 8px;
}

.template_togglebox .table thead tr:first-child th:last-child {
  border-top-right-radius: 8px;
}

/* Last row bottom border radius */
.template_togglebox .table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}

.template_togglebox .table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

/* Table responsive wrapper */
.template_togglebox .table-responsive {
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.template_togglebox .table-responsive .table {
  box-shadow: none;
  margin-bottom: 0;
}

/* Canonical table wrapper extraction (replaces table-responsive table-borders table-radius triplet) */
.template_togglebox .tb-table-wrap {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.template_togglebox .tb-table-wrap .table {
  margin-bottom: 0;
  box-shadow: none;
}

/* ===========================================
   LOADERS
   =========================================== */

body.template_togglebox .pageloader-wrapper {
  background-color: var(--loader-page-bg, #f7fbff);
}

body.template_togglebox #preloader {
  background-color: var(--loader-inline-bg, #e0eefd);
}

/* ===========================================
   BUTTONS
   =========================================== */

.template_togglebox .btn-primary {
  background: var(--brand-primary-gradient);
  color: var(--color-fg-inverse, #fff);
  box-shadow: var(--shadow-brand-sm, 0 2px 4px rgba(41, 167, 230, .2));
  border: none;
  border-radius: 6px;
  font-weight: var(--font-weight-500, 500);
  transition: transform .15s ease, box-shadow .15s ease;
}

.template_togglebox .btn-primary:hover,
.template_togglebox .btn-primary:focus {
  background: var(--brand-primary-gradient);
  color: var(--color-fg-inverse, #fff);
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand-md, 0 4px 10px rgba(41, 167, 230, .28));
}

.template_togglebox .btn-primary:active {
  transform: scale(.99);
}

.template_togglebox .btn-primary:disabled,
.template_togglebox .btn-primary.disabled {
  opacity: .7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Secondary button: the primary reversed, like .slick-btn--secondary */
.template_togglebox .btn-secondary {
  background: var(--color-secondary-fill);
  color: var(--color-secondary-fg);
  border: 1px solid var(--color-secondary-border);
  border-radius: 6px;
  font-weight: var(--font-weight-500, 500);
  transition: all .15s ease;
}

/* Hover, press, a toggled .active and an open dropdown fill blue. Focus alone
   does not: a mouse-clicked toggle keeps focus and would look switched on, so
   keyboard focus gets the ring below instead. Disabled buttons keep the rest
   state. */
.template_togglebox .btn-secondary:not(:disabled):not(.disabled):hover,
.template_togglebox .btn-secondary:not(:disabled):not(.disabled):active,
.template_togglebox .btn-secondary:not(:disabled):not(.disabled).active,
.template_togglebox .show > .btn-secondary.dropdown-toggle {
  background: var(--color-secondary-fill-hover);
  color: var(--color-secondary-fg-hover);
  border-color: var(--color-secondary-border-hover);
}

.template_togglebox .btn-secondary:not(:disabled):not(.disabled):hover {
  transform: translateY(-1px);
}

.template_togglebox .btn-secondary:not(:disabled):not(.disabled):active {
  transform: scale(.99);
}

/* The compiled `.btn:focus { outline: none !important }` removes the ring from
   every Bootstrap button; keyboard focus restores it. */
.template_togglebox .btn:focus-visible {
  outline: 2px solid var(--focus-outline) !important;
  outline-offset: 2px;
}

/* Bootstrap reboot's compiled `button:focus { outline: 5px auto }` paints a ring
   on mouse clicks for plain <button>s that are not .btn (sidebar Services
   toggle, cloud Create toggle). Drop it for pointer focus only; keyboard focus
   keeps the :focus-visible rings. */
.template_togglebox button:focus:not(:focus-visible) {
  outline: 0;
}

/* The compiled `.modal-content button.close { outline: none }` and the
   button-styles mixin (`.swal-button:focus { outline: 0 }`) strip the dialog
   close and SweetAlert buttons too; keyboard focus restores the ring. */
.template_togglebox .modal-content .close:focus-visible,
.template_togglebox .swal-button:focus-visible {
  outline: 2px solid var(--focus-outline) !important;
  outline-offset: 2px;
}

/* Make legacy icon helper follow button variant text color */
.template_togglebox .btn .material-icons.icon-btn-color {
  color: currentColor;
  opacity: var(--btn-icon-opacity, .85);
}

/* Success button: white text on --color-success-fill (5.0:1 to 7.1:1 across
   the gradient, both themes); the brand green measured 2.2:1. */
.template_togglebox .btn-success {
  background: var(--brand-success-gradient);
  color: var(--color-fg-inverse, #fff);
  border: none;
  border-radius: 6px;
  font-weight: var(--font-weight-500, 500);
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}

.template_togglebox .btn-success:hover,
.template_togglebox .btn-success:focus {
  background: var(--brand-success-gradient);
  color: var(--color-fg-inverse, #fff);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md, 0 4px 10px rgba(45,199,107,.28));
}

/* Danger button */
.template_togglebox .btn-danger {
  background: var(--brand-danger-gradient);
  color: var(--color-fg-inverse, #fff);
  border: none;
  border-radius: 6px;
  font-weight: var(--font-weight-500, 500);
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}

.template_togglebox .btn-danger:hover,
.template_togglebox .btn-danger:focus {
  background: var(--brand-danger-gradient);
  color: var(--color-fg-inverse, #fff);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md, 0 4px 10px rgba(217,37,46,.28));
}

/* CTA button — commerce actions (Order, Pay, Checkout) */
.template_togglebox .btn-cta {
  background: var(--brand-cta-gradient);
  color: var(--color-fg-inverse, #fff);
  border: none;
  border-radius: 6px;
  font-weight: var(--font-weight-500, 500);
  box-shadow: var(--shadow-cta-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.template_togglebox .btn-cta:hover,
.template_togglebox .btn-cta:focus {
  background: var(--brand-cta-gradient);
  color: var(--color-fg-inverse, #fff);
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta-md);
}
.template_togglebox .btn-cta:active { transform: scale(.99); }
.template_togglebox .btn-cta:disabled,
.template_togglebox .btn-cta.disabled {
  opacity: .7; cursor: not-allowed; transform: none; box-shadow: none;
}

/* ── Vertical centring for stretched / icon-bearing interactive shells ──
   A box whose height is forced (touch-target min-height) or whose line box is
   driven by a taller Material icon lays its contents out from the top or the
   baseline, not the centre. Each rule below makes the shell a flex container
   so icon and label share one centred cross axis. */

/* Sidebar links: forced to 44px by the OpenNebula module's touch-target rules,
   which is where the offset is most visible (-3.6px to -4.5px). */
.template_togglebox .sidebar .nav-link {
  display: flex;
  align-items: center;
}

/* Keeps the collapse chevron hard right; its float is inert on a flex item.
   Targets the chevron rather than the label because three of these dropdowns
   ("Pages" in menu.left.logged / .notlogged / .custom) render a bare text node
   with no <span> to grow. !important is required to beat Bootstrap's .ml-1. */
.template_togglebox .sidebar .nav-link-dropdown > .icon-expand {
  margin-left: auto !important;
}

/* Navbar user menu: the 13px label sits on the baseline of a line box driven
   by the leading Material icon.

   Confined to the plain single-line items. The notification rows are already
   `flex-direction: column`, so align-items:center would centre their title and
   date horizontally instead of stretching them, defeating the title's
   text-overflow:ellipsis; and line-height:1 compressed them 50.8px -> 45px.
   The identity row (.d-flex) manages its own layout for the same reason. */
.template_togglebox .navbar .dropdown-menu .dropdown-item:not(.notifications-drop-item):not(.d-flex) {
  display: flex;
  align-items: center;
  line-height: 1;
}

/* Footer links wrap their label in <small>, which rides the parent's 16px
   strut baseline and lands low. Centring the inline box is enough here, and
   unlike flex it preserves the row height and the small type size. */
.template_togglebox .footer-box .nav-link > small {
  vertical-align: middle;
}

/* Buttons carrying a Material icon: Bootstrap's .btn is inline-block, so the
   19.2px icon glyph drives the inline line box and the smaller label sits on
   its baseline, above centre.

   The two reported buttons are stated in their own rule, deliberately kept
   separate from the :has() sweep below -- an invalid selector anywhere in a
   selector list drops the entire rule, so combining them would make these
   depend on :has() support. */
.template_togglebox .navbar .navbar-order-toggler,
.template_togglebox .dropdown-order-items .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Sweep for every other icon-bearing button. */
.template_togglebox .btn:has(> .material-icons) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Full-width buttons must stay block-level. */
.template_togglebox .btn-block:has(> .material-icons) {
  display: flex;
}

/* Navbar order toggler — CTA variant (preserves nav-specific sizing) */
.template_togglebox .navbar .navbar-order-toggler.btn-cta {
  background: var(--brand-cta-gradient);
  color: var(--color-fg-inverse, #fff);
  border: none;
  box-shadow: var(--shadow-cta-sm);
}
.template_togglebox .navbar .navbar-order-toggler.btn-cta:hover,
.template_togglebox .navbar .navbar-order-toggler.btn-cta:focus {
  background: var(--brand-cta-gradient);
  color: var(--color-fg-inverse, #fff);
  box-shadow: var(--shadow-cta-md);
}

/* ===========================================
   FORMS
   =========================================== */

.template_togglebox .form-control {
  border: 1px solid var(--input-border);
  border-radius: 6px;
  box-shadow: var(--shadow-control-inset, inset 0 1px 2px rgba(0,0,0,0.03));
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* The focus border is the indicator for pointer focus (keyboard focus adds
   the --focus-outline ring below), so it uses the icon accent: 5.2:1 on #fff,
   6.7:1 on the dark card. The brand blue was 2.7:1 in light. The brand tint
   stays as the halo only. */
.template_togglebox .form-control:focus {
  border-color: var(--color-icon-accent);
  box-shadow: 0 0 0 3px var(--brand-primary-bg), var(--shadow-control-inset, inset 0 1px 2px rgba(0,0,0,0.03));
  outline: none;
}

.template_togglebox .form-control:disabled,
.template_togglebox .form-control[readonly] {
  background-color: var(--color-surface-3);
  opacity: 0.7;
}

/* Select elements */
.template_togglebox select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  padding-right: 2.5rem;
  color: var(--color-fg-subtle, #495057);
}

/* Form labels */
.template_togglebox .form-group label,
.template_togglebox label.form-label {
  font-weight: var(--font-weight-500, 500);
  color: var(--color-fg-subtle);
  margin-bottom: 6px;
}

/* Input groups */
.template_togglebox .input-group .form-control {
  border-radius: 6px;
}

.template_togglebox .input-group .input-group-prepend .btn,
.template_togglebox .input-group .input-group-prepend .input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.template_togglebox .input-group .input-group-append .btn,
.template_togglebox .input-group .input-group-append .input-group-text {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.template_togglebox .input-group-text {
  background: var(--color-surface-3);
  border: 1px solid var(--input-border);
  border-radius: 6px;
}

/* Canonical filter panel extraction (replaces filters-box + spacing utility bundles) */
.template_togglebox .tb-filters-panel {
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--surface-card, #fff);
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

/* Modal shell extraction for repeated inline padding styles */
.template_togglebox .modal-content.tb-modal-shell {
  padding: 20px;
}

/* .tb-status-dot (unused) was removed: .slick-state-dot is the one status dot. */
.template_togglebox .tb-label-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 1px 6px;
  font-size: var(--font-size-sm, 12px);
  font-weight: var(--font-weight-700, 700);
  letter-spacing: var(--letter-spacing-040, 0.04em);
  text-transform: uppercase;
  color: var(--color-fg-subtle, #495057);
  background: var(--badge-label-bg, rgba(41, 167, 230, 0.1));
}

.template_togglebox .tb-hidden {
  display: none;
}

.template_togglebox .tb-hide {
  display: none;
}

.template_togglebox .tb-show {
  display: block;
}

.template_togglebox .tb-w-100 {
  width: var(--iframe-width, 100%) !important;
}

.template_togglebox .tb-col-w-xs {
  width: var(--table-col-xs, 20px) !important;
}

.template_togglebox .tb-col-w-sm {
  width: var(--table-col-sm, 50px) !important;
}

.template_togglebox .tb-col-w-md {
  width: var(--table-col-md, 100px) !important;
}

.template_togglebox .tb-icon-chip {
  width: var(--size-icon-chip-w, 50px);
  height: var(--size-icon-chip-h, 50px);
}

.template_togglebox .tb-captcha {
  width: var(--size-captcha-w, 120px);
  height: var(--size-captcha-h, 60px);
}

.template_togglebox .tb-action-offset-sm {
  margin-top: var(--action-offset-sm, 12px) !important;
}

.template_togglebox .tb-btn-compact {
  min-height: var(--control-min-h-sm, 28px);
}

/* ===========================================
   BADGES / LABELS
   =========================================== */

/* Base badge styling */
.template_togglebox .badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: var(--font-weight-600, 600);
  display: inline-block;
}

/* Status badges use the tone tokens, the same tinted model as .slick-status and
   status_pill.tpl: --color-{tone}-bg fill, --color-{tone}-border edge and
   --color-{tone}-strong text (4.5:1 or better on the tint in both themes). */
.template_togglebox .badge-Active,
.template_togglebox .badge-success,
.template_togglebox .badge-Answered,
.template_togglebox .badge-Paid {
  background: var(--color-success-bg) !important;
  color: var(--color-success-strong) !important;
  border: 1px solid var(--color-success-border) !important;
}

.template_togglebox .badge-Pending,
.template_togglebox .badge-warning,
.template_togglebox .badge-CustomerReply,
.template_togglebox .badge-Customer-Reply,
.template_togglebox .badge-Client-Reply,
.template_togglebox .badge-Unpaid {
  background: var(--color-warning-bg) !important;
  color: var(--color-warning-strong) !important;
  border: 1px solid var(--color-warning-border) !important;
}

.template_togglebox .badge-Cancelled,
.template_togglebox .badge-Terminated,
.template_togglebox .badge-Fraud,
.template_togglebox .badge-danger {
  background: var(--color-danger-bg) !important;
  color: var(--color-danger-strong) !important;
  border: 1px solid var(--color-danger-border) !important;
}

.template_togglebox .badge-Suspended,
.template_togglebox .badge-info,
.template_togglebox .badge-Open {
  background: var(--color-info-bg) !important;
  color: var(--color-info-strong) !important;
  border: 1px solid var(--color-info-border) !important;
}

.template_togglebox .badge-secondary,
.template_togglebox .badge-default,
.template_togglebox .badge-Closed,
.template_togglebox .badge-Refunded,
.template_togglebox .badge-OnHold,
.template_togglebox .badge-On-Hold {
  background: var(--color-muted-bg) !important;
  color: var(--color-muted-strong) !important;
  border: 1px solid var(--color-muted-border) !important;
}

/* Legacy HostBill .label status pills (compiled app.css paints them a brand
   hue on a tint, 1.7-3.2:1). They use the tone tokens like .badge-*, so one
   rule serves both themes. */
.template_togglebox .label.label-success,
.template_togglebox .label.label-Active,
.template_togglebox .label.label-Accepted,
.template_togglebox .label.label-Paid,
.template_togglebox .label.label-Receiptpaid,
.template_togglebox .label.label-Opened,
.template_togglebox .label.label-Open {
  background: var(--color-success-bg) !important;
  color: var(--color-success-strong) !important;
  border: 1px solid var(--color-success-border) !important;
}

.template_togglebox .label.label-warning,
.template_togglebox .label.label-Suspended,
.template_togglebox .label.label-Answered,
.template_togglebox .label.label-Unpaid {
  background: var(--color-warning-bg) !important;
  color: var(--color-warning-strong) !important;
  border: 1px solid var(--color-warning-border) !important;
}

.template_togglebox .label.label-danger,
.template_togglebox .label.label-Chargeback,
.template_togglebox .label.label-Collections,
.template_togglebox .label.label-Receiptunpaid,
.template_togglebox .label.label-Terminated {
  background: var(--color-danger-bg) !important;
  color: var(--color-danger-strong) !important;
  border: 1px solid var(--color-danger-border) !important;
}

.template_togglebox .label.label-primary,
.template_togglebox .label.label-Pending,
.template_togglebox .label.label-Sent,
.template_togglebox .label.label-In-Progress {
  background: var(--color-primary-bg) !important;
  color: var(--color-primary-strong) !important;
  border: 1px solid var(--color-primary-border) !important;
}

.template_togglebox .label.label-secondary,
.template_togglebox .label.label-default,
.template_togglebox .label.label-status,
.template_togglebox .label.label-Canceled,
.template_togglebox .label.label-Cancelled,
.template_togglebox .label.label-Closed,
.template_togglebox .label.label-Creditnote,
.template_togglebox .label.label-Fraud,
.template_togglebox .label.label-Draft,
.template_togglebox .label.label-Dead,
.template_togglebox .label.label-Close,
.template_togglebox .label.label-Receiptcanceled {
  background: var(--color-muted-bg) !important;
  color: var(--color-muted-strong) !important;
  border: 1px solid var(--color-muted-border) !important;
}

/* ===========================================
   CARDS
   =========================================== */

.template_togglebox .card {
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.template_togglebox .card:hover {
  box-shadow: var(--shadow-md);
}

.template_togglebox .card-header {
  background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-3) 100%);
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 12px 16px;
  font-weight: var(--font-weight-600, 600);
}

.template_togglebox .card-body {
  padding: 16px;
}

.template_togglebox .card-footer {
  background: var(--color-surface-subtle);
  border-top: 1px solid var(--color-border-subtle);
  border-radius: 0 0 8px 8px;
  padding: 12px 16px;
}

/* ===========================================
   ALERTS
   =========================================== */

.template_togglebox .alert {
  border-radius: 8px;
  border: none;
  padding: 12px 16px;
}

.template_togglebox .alert-primary {
  background: var(--color-primary-bg);
  color: var(--color-primary-strong);
  border: 1px solid var(--color-primary-border);
}

.template_togglebox .alert-success {
  background: var(--color-success-bg);
  color: var(--color-success-strong);
  border: 1px solid var(--color-success-border);
}

.template_togglebox .alert-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-strong);
  border: 1px solid var(--color-warning-border);
}

.template_togglebox .alert-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-strong);
  border: 1px solid var(--color-danger-border);
}

.template_togglebox .alert-info {
  background: var(--color-info-bg);
  color: var(--color-info-strong);
  border: 1px solid var(--color-info-border);
}

/* ===========================================
   INFO BOXES (Dashboard widgets)
   =========================================== */

.template_togglebox .info-box {
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.template_togglebox .info-box h3 {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-600, 600);
  color: var(--color-fg);
  margin-bottom: 16px;
}

.template_togglebox .info-box-table .table {
  margin-bottom: 0;
}

/* ===========================================
   NAV TABS
   =========================================== */

.template_togglebox .nav-tabs {
  border-bottom: 2px solid var(--color-border-subtle);
}

.template_togglebox .nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 10px 16px;
  color: var(--color-fg-muted);
  font-weight: var(--font-weight-500, 500);
  transition: color .2s ease, border-color .2s ease;
}

.template_togglebox .nav-tabs .nav-link:hover {
  color: var(--color-link);
  border-bottom-color: var(--color-border);
}

.template_togglebox .nav-tabs .nav-link.active {
  color: var(--color-link);
  border-bottom-color: var(--color-icon-accent);
  background: transparent;
}

/* ===========================================
   PAGINATION
   =========================================== */

.template_togglebox .pagination .page-link {
  background: var(--color-bg-elevated, #fff);
  border: 1px solid var(--color-border, #dee2e6);
  color: var(--color-fg-subtle, #495057);
  padding: 8px 14px;
  margin: 0 2px;
  border-radius: 6px;
  transition: all .15s ease;
}

.template_togglebox .pagination .page-link:hover {
  background: var(--color-surface, #f8f9fa);
  border-color: var(--color-border-strong, #e5e7eb);
  color: var(--color-fg, #212529);
}

/* White on the brand blue is 2.7:1; the primary fill keeps the active page
   at AA (5.2:1) in both themes. */
.template_togglebox .pagination .page-item.active .page-link {
  background: var(--color-primary-fill);
  border-color: var(--color-primary-fill);
  color: var(--color-fg-inverse, #fff);
}

/* Compiled .badge-primary (service labels) is white on #29A7E6 light and
   #212529 on #3fb7f2 dark; use the AA primary fill in both themes. The
   compiled .badge-primary.badge-styled variant (0,3,0) keeps its own look. */
.template_togglebox .badge-primary {
  background-color: var(--color-primary-fill);
  color: var(--color-fg-inverse, #fff);
}

.template_togglebox .nav-link.active,
.template_togglebox .nav-pills .nav-link.active,
.template_togglebox .nav .nav-link.active {
  background: var(--color-primary-fill) !important;
  border-color: var(--color-primary-fill) !important;
  color: var(--color-fg-inverse, #fff) !important;
}

.template_togglebox .nav-link.active span,
.template_togglebox .nav-link.active small,
.template_togglebox .nav-link.active b,
.template_togglebox .nav-link.active .material-icons {
  color: currentColor !important;
}

.template_togglebox .pagination .page-item.disabled .page-link {
  background: var(--color-surface, #f8f9fa);
  color: var(--color-fg-muted, #6c757d);
  border-color: var(--color-border, #dee2e6);
  opacity: .65;
  pointer-events: none;
}

.template_togglebox .pagination .page-link .material-icons {
  color: currentColor;
}

/* ===========================================
   DROPDOWNS
   =========================================== */

.template_togglebox .dropdown-menu {
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  padding: 8px 0;
}

.template_togglebox .dropdown-item {
  padding: 8px 16px;
  color: var(--color-fg-subtle);
  transition: background .15s ease;
}

.template_togglebox .dropdown-item:hover {
  background: var(--color-surface-3);
  color: var(--color-fg);
}

.template_togglebox .dropdown-item.active,
.template_togglebox .dropdown-item:active {
  background: var(--brand-primary-bg);
  color: var(--color-primary-strong);
}

/* Coarse pointers: tabs (41px) and menu items (37px) grow to the 44px touch
   target through vertical padding; both are block boxes, so a min-height
   would leave the label off-centre. The modal close button gets a 44px box. */
@media (pointer: coarse) {
  .template_togglebox .nav-tabs .nav-link { padding-top: 12px; padding-bottom: 12px; }
  .template_togglebox .dropdown-item { padding-top: 12px; padding-bottom: 12px; }
  .template_togglebox .modal-content .close {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
  }
  /* Portal slider tabs (Services All/Active/Cancelled, Invoices/Add Funds):
     the compiled `.nav-tabs-wrapper .nav-tabs li.nav-item a.nav-link` sets
     padding 0, so the 23px link is the whole hit area and the 10px vertical
     padding sits on the li. Move that padding onto the link (23 + 2x11 = 45px)
     so the row keeps its height and the target reaches 44px. */
  .template_togglebox .nav-tabs-wrapper .nav-slider li.nav-item { padding-top: 0; padding-bottom: 0; }
  .template_togglebox .nav-tabs-wrapper .nav-slider li.nav-item a.nav-link { padding-top: 11px; padding-bottom: 11px; }
}

.template_togglebox .dropdown-divider {
  border-top-color: var(--color-border-subtle);
  margin: 4px 0;
}

/* ===========================================
   NAVIGATION (Top bar + side menu polish)
   =========================================== */

.template_togglebox .navbar {
  background: var(--color-bg, #fff);
  border-bottom: 1px solid var(--color-border, var(--color-border-subtle));
  box-shadow: var(--shadow-sm);
}

.template_togglebox .navbar .nav-link,
.template_togglebox .navbar .btn-left-navbar {
  border-radius: 8px;
  color: var(--color-fg-subtle, var(--color-fg-subtle));
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.template_togglebox .navbar .nav-link:hover,
.template_togglebox .navbar .btn-left-navbar:hover {
  background: var(--color-surface, var(--color-surface-3));
  color: var(--color-fg, var(--color-fg));
  text-decoration: none;
}

.template_togglebox .navbar .nav-link.active,
.template_togglebox .navbar .show > .nav-link {
  background: var(--brand-primary-bg);
  color: var(--color-primary-strong);
}

/* The desktop navbar body starts at 994px (--bp-offcanvas-min), the same
   boundary as the sidebar drawer; Bootstrap's d-lg-* would show it at 992px
   beside the full-width mobile panel, so the mobile sub-bar and
   the drawer's mobile-only lists stay up to 993px.
   Up to 1199px the 280px panel leaves too little room for the labelled menu,
   so the balance, language and account labels collapse to their icons (the
   text stays as the accessible name) and the search field narrows. */
.template_togglebox .navbar .navbar-compact-icon {
  display: none;
}

@media (max-width: 993px) {
  .template_togglebox .navbar .navbar-body.d-lg-flex {
    display: none !important;
  }

  .template_togglebox .navbar .navbar-left .d-lg-none,
  .template_togglebox .navbar.sub-bar.d-lg-none,
  .template_togglebox .sidebar .nav.d-lg-none {
    display: flex !important;
  }
}

@media (min-width: 994px) and (max-width: 1199px) {
  .template_togglebox .navbar .navbar-search {
    width: 180px;
  }

  .template_togglebox .navbar .navbar-compact-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .template_togglebox .navbar .navbar-compact-icon {
    display: inline-block;
  }
}

/* The navbar-left panel is the navy sidebar surface in both themes (and the
   cap of the collapsed icon rail), so its icons use the non-flipping
   dark-surface foreground. */
.template_togglebox .navbar .navbar-left .btn-left-navbar {
  color: var(--color-on-dark-surface-muted, #cbd5e1);
}

.template_togglebox .navbar .navbar-left .btn-left-navbar:hover {
  background: var(--sidebar-hover-bg, #334155);
  color: var(--color-on-dark-surface, #f8fafc);
}

.template_togglebox .navbar .navbar-left .btn-left-navbar:focus-visible {
  outline-color: var(--sidebar-focus);
}

.template_togglebox .navbar .navbar-order-toggler.btn-primary {
  background: var(--brand-primary-gradient);
  color: var(--color-fg-inverse, #fff);
  border: none;
  box-shadow: var(--shadow-brand-sm, 0 2px 4px rgba(41, 167, 230, .2));
}

.template_togglebox .navbar .navbar-order-toggler.btn-primary:hover,
.template_togglebox .navbar .navbar-order-toggler.btn-primary:focus {
  background: var(--brand-primary-gradient);
  color: var(--color-fg-inverse, #fff);
  box-shadow: var(--shadow-brand-md, 0 4px 10px rgba(41, 167, 230, .28));
}

.template_togglebox .root-boxes .root-box {
  color: var(--color-fg, #212529);
}

.template_togglebox .root-boxes .root-box h4 {
  color: var(--color-fg-strong, #111827);
}

.template_togglebox .root-boxes .root-box span {
  color: var(--color-fg-subtle, #495057);
}

/* Order dropdown links (not using .dropdown-item) */
.template_togglebox .navbar-dropdown-item {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--color-fg-subtle, var(--color-fg-subtle));
  font-weight: var(--font-weight-500, 500);
  transition: background .15s ease, color .15s ease;
}

.template_togglebox .navbar-dropdown-item:hover {
  background: var(--color-surface, var(--color-surface-3));
  color: var(--color-fg, var(--color-fg));
  text-decoration: none;
}

/* Preserve "no borders" inputs (e.g., navbar search) */
.template_togglebox .form-control.form-control-noborders {
  border-color: transparent;
  box-shadow: none;
}

.template_togglebox .form-control.form-control-noborders:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px var(--brand-primary-bg);
}

/* Keyboard focus for form fields. The compiled CSS (app.min.css,
   custom*.min.css, from src/scss/main.scss) sets
   `input, textarea { outline: none !important }` and, through
   %form-control-styles, `.form-control, select { outline: none !important }`,
   which also removes the module's slider, checkbox and select rings. This
   restores an opaque outline on :focus-visible; it has to be !important to
   beat those rules. Offsets are left to the component rules. */
.template_togglebox input:focus-visible,
.template_togglebox textarea:focus-visible,
.template_togglebox select:focus-visible,
.template_togglebox .form-control:focus-visible {
  outline: 2px solid var(--focus-outline) !important;
}

/* The focus baseline, .slick-sr-only and .is-hidden live in
   slick-components.css, which module headers on other themes also load. */

/* Navbar controls whose compiled base suppresses native outlines.
   app.css resets the search input's box-shadow with !important, so the focus
   indicator is an outline; inset so the navbar's overflow cannot clip it.
   The compiled `.btn:focus { outline: none !important }` also covers the
   Order CTA, so its outline is !important. */
.template_togglebox .navbar .btn-left-navbar:focus-visible,
.template_togglebox .navbar .nav-link:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

/* Touch has no hover: a tapped navbar control keeps :hover until the next
   tap elsewhere, so the theme toggle would read as switched on. */
@media (hover: none) {
  .template_togglebox .navbar .theme-toggle-btn:hover,
  .template_togglebox .navbar .navbar-left .theme-toggle-btn:hover {
    background: transparent;
  }
}

.template_togglebox .navbar .navbar-search input.form-control-noborders:focus-visible {
  outline-offset: -2px;
}

.template_togglebox .navbar .navbar-order-toggler:focus-visible {
  outline: 2px solid var(--focus-outline) !important;
  outline-offset: 2px;
}

/* ===========================================
   MODAL ENHANCEMENTS
   =========================================== */

.modal-content {
  border: none;
  border-radius: 12px;
  box-shadow: var(--shadow-xl);
}

.modal-header {
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 16px 20px;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  border-top: 1px solid var(--color-border-subtle);
  padding: 16px 20px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ===========================================
   UTILITIES
   =========================================== */

/* Text colors using theme variables */
.template_togglebox .text-primary { color: var(--color-link) !important; }
.template_togglebox .text-success { color: var(--color-success-strong, #166534) !important; }
.template_togglebox .text-secondary,
.template_togglebox .text-muted { color: var(--color-fg-subtle-strong, #556274) !important; }
.template_togglebox .text-danger { color: var(--color-danger-strong) !important; }
.template_togglebox .text-warning { color: var(--color-warning-strong) !important; }
.template_togglebox .badge-light.text-danger { background-color: var(--color-surface); }

.template_togglebox .section-account-header .h2.text-success {
  color: var(--color-success-strong, #166534) !important;
}

.template_togglebox .body-content > section.section-main > div.d-flex > h5 {
  color: var(--color-fg-subtle-strong, #556274) !important;
}

.template_togglebox .cloud-nav-bar .cloud-nav-items div#instances-vm-nav-dropdown > a#instances-vm-nav-link {
  --color-accent-600: var(--color-link);
  --brand-primary-dark: var(--color-link);
  color: var(--color-link) !important;
}

.template_togglebox .cloud-nav-bar .cloud-nav-items > a.nav-item.active,
.template_togglebox .cloud-nav-bar .cloud-nav-items > a.ttn-nav__item.active,
.template_togglebox .cloud-nav-bar .cloud-nav-items > .nav-dropdown > button.nav-item.active,
.template_togglebox .cloud-nav-bar .cloud-nav-items > .nav-dropdown > button.ttn-nav__item.active {
  background: var(--color-primary-fill) !important;
  border-color: var(--color-primary-fill) !important;
  color: var(--color-fg-inverse, #fff) !important;
}

.template_togglebox #content-cloud .vm-activity-minimal__link {
  color: var(--color-link) !important;
}

.template_togglebox #content-cloud .vm-connection-password input#rootpss,
.template_togglebox #content-cloud .vm-connection-password .form-control {
  color: var(--hourly-contrast-field, var(--color-fg-strong, #334155)) !important;
  -webkit-text-fill-color: var(--hourly-contrast-field, var(--color-fg-strong, #334155));
  opacity: 1 !important;
}

/* Hourly cloud contrast hardening for repeated Lighthouse failures */
.template_togglebox {
  --hourly-contrast-muted: var(--color-fg-subtle-strong, #556274);
  --hourly-contrast-body: var(--color-fg-subtle, #334155);
  --hourly-contrast-field: var(--color-fg-strong, #334155);
  --hourly-contrast-elevated: var(--color-fg-subtle-strong, #556274);
  --hourly-contrast-success-text: var(--color-success-strong, #166534);
  --hourly-contrast-info-link: var(--color-link);
}

/* Kept: removing it changes span.createvm-network-name color #e2e8f0 -> #cbd5e1 on OpenNebula createvm. */
html[data-theme="dark"] .template_togglebox {
  --hourly-contrast-muted: var(--color-fg-subtle-strong, #cbd5e1);
  --hourly-contrast-body: var(--color-fg, #e2e8f0);
  --hourly-contrast-field: var(--color-fg, #e2e8f0);
  --hourly-contrast-elevated: var(--color-fg, #e2e8f0);
  --hourly-contrast-success-text: var(--color-success-strong, #86efac);
}

.template_togglebox #content-cloud #template-cost-summary .oneb-opacity-80,
.template_togglebox #content-cloud #ram-cost-summary .oneb-opacity-80,
.template_togglebox #content-cloud #cpu-cost-summary .oneb-opacity-80,
.template_togglebox #content-cloud #disk-cost-summary .oneb-opacity-80,
.template_togglebox #content-cloud #ip-cost-summary .oneb-opacity-80,
.template_togglebox #content-cloud .slick-settings-price .oneb-opacity-80,
.template_togglebox #content-cloud .createvm-network-price.oneb-opacity-70,
.template_togglebox #content-cloud .oneb-pricing-note.oneb-opacity-80,
.template_togglebox #content-cloud .createvm-network-primary-text,
.template_togglebox #content-cloud .createvm-network-name,
.template_togglebox #content-cloud .backup-preset__meta,
.template_togglebox #content-cloud .backup-retention-row__controls .slick-text-sm,
.template_togglebox #content-cloud #breakdown-content .pricing-row .label,
.template_togglebox #content-cloud #schedule .slick-settings-subtitle,
.template_togglebox #content-cloud #schedule .slick-settings-price > span,
.template_togglebox #content-cloud #schedule .schedule-cost-monthly,
.template_togglebox #content-cloud #schedule .slick-settings-row-controls > label > span,
.template_togglebox #content-cloud .oneb-sg-tips .slick-text-sm,
.template_togglebox #content-cloud .ip-copy,
.template_togglebox #content-cloud #activity-log-table .ip-support {
  color: var(--hourly-contrast-muted, var(--color-fg-subtle-strong, #556274)) !important;
  opacity: 1 !important;
}

.template_togglebox #content-cloud .ssh-auth-tab,
.template_togglebox #content-cloud .ssh-auth-tab .ssh-key-count {
  color: var(--hourly-contrast-muted, var(--color-fg-subtle-strong, #556274)) !important;
  opacity: 1 !important;
}

/* --ssh-auth-tab-active-bg lets a page pick its own fill without !important */
.template_togglebox #content-cloud .ssh-auth-tab.active {
  background: var(--ssh-auth-tab-active-bg, var(--color-primary-fill)) !important;
  border-color: var(--ssh-auth-tab-active-bg, var(--color-primary-fill)) !important;
  color: var(--color-fg-inverse, #fff) !important;
}

.template_togglebox #content-cloud .ssh-auth-tab.active .ssh-key-count {
  color: var(--color-fg-inverse, #fff) !important;
}

.template_togglebox #content-cloud .storage-unit-btn--active,
.template_togglebox #oneb-createvm .storage-unit-btn--active,
.template_togglebox #content-cloud .oneb-link-panel--info .oneb-link-panel__action,
.template_togglebox #content-cloud #activity-log-table .vm-id {
  background: var(--color-primary-fill) !important;
  border-color: var(--color-primary-fill) !important;
  color: var(--color-fg-inverse, #fff) !important;
}

.template_togglebox #content-cloud .oneb-link-panel--success .oneb-link-panel__action,
.template_togglebox #content-cloud .oneb-link-panel--success a.slick-btn.oneb-link-panel__action {
  background: #166534 !important;
  border-color: #166534 !important;
  color: var(--color-fg-inverse, #fff) !important;
}

.template_togglebox #volumes-content-bar #volumes-table .slick-status-success,
.template_togglebox #content-cloud #volumes-table .slick-status.slick-status-success {
  background: #166534 !important;
  border-color: #166534 !important;
  color: var(--color-fg-inverse, #fff) !important;
}

.template_togglebox #content-cloud .slick-status-primary {
  background: var(--color-primary-fill) !important;
  border-color: var(--color-primary-fill) !important;
  color: var(--color-fg-inverse, #fff) !important;
}

.template_togglebox #content-cloud .oneb-link-panel--accent .oneb-link-panel__action,
.template_togglebox #content-cloud .oneb-link-panel--accent a.slick-btn.oneb-link-panel__action {
  background: var(--brand-accent) !important; /* #fff 6.5:1, same in both themes */
  border-color: var(--brand-accent) !important;
  color: var(--color-fg-inverse, #fff) !important;
}

.template_togglebox #content-cloud #createvm-network-selector .createvm-network-name,
.template_togglebox #content-cloud #createvm-network-selector .createvm-network-price,
.template_togglebox #content-cloud #daily_backup_count .slick-text-sm,
.template_togglebox #content-cloud #weekly_backup_count .slick-text-sm,
.template_togglebox #content-cloud #monthly_backup_count .slick-text-sm,
.template_togglebox #content-cloud #schedule .slick-settings-price > span,
.template_togglebox #content-cloud #schedule .schedule-cost-monthly,
.template_togglebox #content-cloud #schedule .slick-settings-row-controls > label > span,
.template_togglebox #oneb-createvm .createvm-network-price,
.template_togglebox #oneb-createvm .slick-settings-row-controls > label > span,
.template_togglebox #oneb-createvm .slick-settings-row-count > .slick-text-sm,
.template_togglebox #oneb-createvm #oneb-ssh-card > .slick-text-sm,
.template_togglebox #pricing-display .pricing-setup .slick-text-sm,
.template_togglebox #breakdown-section .pricing-row .label {
  color: var(--hourly-contrast-body, var(--color-fg-subtle, #334155)) !important;
  opacity: 1 !important;
}

.template_togglebox #content-cloud #createvm-network-selector .createvm-network-row.is-disabled {
  opacity: 1 !important;
}

.template_togglebox #content-cloud .backup-retention-row-count.is-disabled {
  opacity: 1 !important;
}

.template_togglebox #content-cloud .backup-schedule-component .slick-settings-price > span,
.template_togglebox #content-cloud .backup-schedule-component .schedule-cost-monthly,
.template_togglebox #content-cloud .backup-schedule-component .slick-settings-row-controls > label > span,
.template_togglebox #content-cloud > div.content-bar > div > p.slick-text-sm,
.template_togglebox #content-cloud > div.content-bar > div > p.slick-text-sm strong {
  color: var(--hourly-contrast-elevated, var(--color-fg-subtle-strong, #556274)) !important;
  opacity: 1 !important;
}

.template_togglebox #content-cloud .oneb-link-panel__body,
.template_togglebox #content-cloud .oneb-sg-tips__label,
.template_togglebox #content-cloud .oneb-sg-deny-notice__text,
.template_togglebox #content-cloud .unit-badge,
.template_togglebox #content-cloud #activity-log-table .details-text,
.template_togglebox #content-cloud #activity-log-table .log-id,
.template_togglebox #content-cloud #activity-log-table .user-type {
  color: var(--hourly-contrast-muted, var(--color-fg-subtle-strong, #556274)) !important;
}

.template_togglebox #content-cloud .text-success {
  color: var(--hourly-contrast-success-text, var(--color-success-strong, #166534)) !important;
}

.template_togglebox #content-cloud .text-muted {
  color: var(--hourly-contrast-muted, var(--color-fg-subtle-strong, #556274)) !important;
}

.template_togglebox #content-cloud .oneb-vm-link.text-info {
  color: var(--hourly-contrast-info-link) !important;
}

.template_togglebox #volumes-content-bar #volumes-table a.text-info.oneb-vm-inline-link {
  color: var(--hourly-contrast-info-link) !important;
}

.template_togglebox .section-tickets {
  --ticket-meta-fg: var(--color-fg-subtle, #495057);
  --ticket-warning-fg: var(--color-warning-strong, #92400e);
  --ticket-detail-badge-bg: var(--color-bg-elevated, #fff);
  --ticket-detail-badge-border: var(--color-border, #dee2e6);
}

.template_togglebox .section-tickets .content-view-details .badges-group .badge {
  background: var(--ticket-detail-badge-bg, #fff);
  color: var(--ticket-meta-fg, #495057) !important;
  border-color: var(--ticket-detail-badge-border, #dee2e6) !important;
}

.template_togglebox .section-tickets .comment-date,
.template_togglebox .section-tickets .comment-date .date,
.template_togglebox .section-tickets .comment-date .time,
.template_togglebox .section-tickets #fileupload .fileupload-buttonbar small.form-text {
  color: var(--ticket-meta-fg, #495057) !important;
}

.template_togglebox .section-tickets small.text-warning {
  color: var(--ticket-warning-fg, #92400e) !important;
}

/* Kept: removing it changes span.badge-Active from the 16% green tint to the 8% one on the dashboard. */
html[data-theme="dark"] .template_togglebox .badge-Active,
html[data-theme="dark"] .template_togglebox .badge-success,
html[data-theme="dark"] .template_togglebox .badge-Answered,
html[data-theme="dark"] .template_togglebox .badge-Paid {
  background: color-mix(in srgb, var(--brand-success, #2DC76B) 16%, transparent) !important;
  color: var(--color-success-strong, #86efac) !important;
  border: 1px solid color-mix(in srgb, var(--brand-success, #2DC76B) 35%, transparent) !important;
}

.template_togglebox .text-dark {
  color: var(--color-fg-strong) !important;
}

.template_togglebox .form-label-group label.form-label-placeholder {
  color: var(--color-fg-subtle) !important;
}

.template_togglebox .navbar-menu-balance small.text-danger,
.template_togglebox .navbar-menu-balance .text-danger {
  color: var(--color-danger-strong) !important;
}

/* Kept: no verification page renders it, so the token diff cannot show it is redundant yet. */
html[data-theme="dark"] .template_togglebox #content-cloud .vm-connection-password input#rootpss,
html[data-theme="dark"] .template_togglebox #content-cloud .vm-connection-password .form-control {
  color: var(--color-fg, #e2e8f0) !important;
  -webkit-text-fill-color: var(--color-fg, #e2e8f0);
}

/* Dark mode bridge: Bootstrap modal surfaces and controls */
/* Kept: removing it changes div.modal-dialog height 258.016px -> 256.016px on the dashboard. */
html[data-theme="dark"] .template_togglebox .modal-content {
  background: var(--color-bg-modal, #0f172a);
  border: 1px solid var(--oneb-modal-border, #334155);
  color: var(--oneb-modal-fg, #e2e8f0);
}

/* Kept: removing it changes div.modal-header border-top-color #334155 -> #e2e8f0 on the dashboard, and the rgw modal footer's side borders. */
html[data-theme="dark"] .template_togglebox .modal-header,
html[data-theme="dark"] .template_togglebox .modal-footer {
  border-color: var(--oneb-modal-border, #334155);
}

/* Kept: removing it changes div.modal-body color #e2e8f0 -> #d4d4d4 on OpenNebula createvm. */
html[data-theme="dark"] .template_togglebox .modal-body,
html[data-theme="dark"] .template_togglebox .modal-body th,
html[data-theme="dark"] .template_togglebox .modal-body label {
  color: var(--oneb-modal-fg, #e2e8f0);
}

/* Kept: removing it changes button.close opacity 0.8 -> 1 on OpenNebula createvm. */
html[data-theme="dark"] .template_togglebox .modal-content .close {
  color: var(--oneb-modal-fg-muted, #94a3b8);
  opacity: 0.8;
  text-shadow: none;
}

/* Kept: removing it changes button.close color #e2e8f0 -> #a3b1c6 on OpenNebula createvm (hover). */
html[data-theme="dark"] .template_togglebox .modal-content .close:hover,
html[data-theme="dark"] .template_togglebox .modal-content .close:focus {
  color: var(--oneb-modal-fg, #e2e8f0);
  opacity: 1;
}
/* Dark mode bridge: Bootstrap form controls */
/* Field ink, fill and boundary from tokens in both themes. The :not() keeps
   the weight above the compiled light and dark bundles' own .form-control
   rules (the dark bundle has no field colours of its own). Placeholders use
   the !important --color-placeholder rule further down. */
.template_togglebox .form-control:not(.form-control-noborders) {
  color: var(--color-fg);
  background-color: var(--surface-card);
  border-color: var(--input-border);
}

.template_togglebox .form-control:not(.form-control-noborders):focus {
  border-color: var(--color-icon-accent);
  box-shadow: 0 0 0 3px var(--brand-primary-bg), var(--shadow-control-inset);
}

/* Keep the read-only/disabled fill; the rule above would otherwise paint
   them the card colour and they vanish into it. */
.template_togglebox .form-control:not(.form-control-noborders):disabled,
.template_togglebox .form-control:not(.form-control-noborders)[readonly] {
  background-color: var(--color-surface-3);
}

/* ===========================================
   FORM VALIDATION ERRORS (Parsley, and script-validated fields)
   Placed after the .form-control rules above so it wins the cascade.
   Fields also carry .is-invalid, which escapes the !important border
   rule in custom.min.css (its :not() list already excludes it); a field
   a page script validates carries .is-invalid alone.
   =========================================== */

.template_togglebox .form-control.is-invalid,
.template_togglebox .form-control.is-invalid:focus,
.template_togglebox .form-control.parsley-error,
.template_togglebox input.parsley-error,
.template_togglebox select.parsley-error,
.template_togglebox textarea.parsley-error,
.template_togglebox .form-control.parsley-error:focus,
.template_togglebox input.parsley-error:focus,
.template_togglebox select.parsley-error:focus,
.template_togglebox textarea.parsley-error:focus {
  border-color: var(--color-danger-soft, #dc2626);
  background-color: color-mix(in srgb, var(--color-danger-soft, #dc2626) 8%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger-soft, #dc2626) 18%, transparent);
}

.template_togglebox .parsley-errors-list {
  margin: 0.35rem 0 0;
  color: var(--color-danger-soft, #dc2626);
  font-size: 0.8125rem;
  line-height: 1.3;
}

/* The bundled green "valid" fill reads as a highlight, not as feedback. */
.template_togglebox input.parsley-success,
.template_togglebox select.parsley-success,
.template_togglebox textarea.parsley-success {
  background-color: transparent;
  color: inherit;
}

/* Kept: no verification page renders it, so the token diff cannot show it is redundant yet. */
html[data-theme="dark"] .template_togglebox .form-control.is-invalid,
html[data-theme="dark"] .template_togglebox .form-control.is-invalid:focus,
html[data-theme="dark"] .template_togglebox .form-control.parsley-error,
html[data-theme="dark"] .template_togglebox input.parsley-error,
html[data-theme="dark"] .template_togglebox select.parsley-error,
html[data-theme="dark"] .template_togglebox textarea.parsley-error,
html[data-theme="dark"] .template_togglebox .form-control.parsley-error:focus,
html[data-theme="dark"] .template_togglebox input.parsley-error:focus,
html[data-theme="dark"] .template_togglebox select.parsley-error:focus,
html[data-theme="dark"] .template_togglebox textarea.parsley-error:focus {
  border-color: var(--color-danger-soft, #f87171);
  background-color: color-mix(in srgb, var(--color-danger-soft, #f87171) 12%, var(--surface-card, #111827));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger-soft, #f87171) 22%, transparent);
}

/* Kept: no verification page renders it, so the token diff cannot show it is redundant yet. */
html[data-theme="dark"] .template_togglebox .parsley-errors-list {
  color: var(--color-danger-soft, #f87171);
}

/* Kept: no verification page renders it, so the token diff cannot show it is redundant yet. */
html[data-theme="dark"] .template_togglebox input.parsley-success,
html[data-theme="dark"] .template_togglebox select.parsley-success,
html[data-theme="dark"] .template_togglebox textarea.parsley-success {
  background-color: transparent;
  color: inherit;
}

/* Dark mode bridge: native select text/option readability */
/* Kept: removing it changes select.form-control color #e2e8f0 -> #cbd5e1 on the invoice. */
html[data-theme="dark"] .template_togglebox select {
  color: var(--color-fg, #e2e8f0) !important;
}

/* Kept: keeps an unchosen select muted in dark; without it the OpenNebula createvm template select turns #e2e8f0 (#a3b1c6 measured). */
html[data-theme="dark"] .template_togglebox select:invalid {
  color: var(--color-fg-muted, #94a3b8) !important;
}

/* Kept: removing it changes option background-color #111827 -> transparent on OpenNebula createvm. */
html[data-theme="dark"] .template_togglebox select option {
  color: var(--color-fg, #e2e8f0);
  background-color: var(--color-bg-elevated, #111827);
}

/* Kept: removing it changes option color #ffffff -> #e2e8f0 on OpenNebula createvm. */
html[data-theme="dark"] .template_togglebox select option:checked,
html[data-theme="dark"] .template_togglebox select option:hover,
html[data-theme="dark"] .template_togglebox select option:focus {
  color: var(--color-fg-inverse, #fff);
  background-color: var(--brand-primary);
}

/* Guard against caret tiling when dark-mode rules override only background-image. */
/* Kept: removing it changes the select.form-control chevron image on OpenNebula createvm. */
html[data-theme="dark"] .template_togglebox select.form-control:not(.form-control-noborders) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  padding-right: 2.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Selection controls: native checkboxes and radios in the brand colour.
   Theme core (src/scss/main.scss, compiled into app.min.css and
   custom_darkmode.min.css) painted an 18x18 ::after box over the native 13x13
   control at -3px/-2px. That box rendered only in Chromium, showed a filled
   square instead of a check mark, and slid off the control whenever a page
   sized the input, leaving the native corner showing as a second outline.
   The overlay is switched off here and the browser draws the control:
   accent-color gives the brand fill and a real check mark in every browser,
   color-scheme gives the dark unchecked box, and a page may size the input
   freely. The defaults sit at zero specificity so any page or module rule
   wins. A custom-drawn control (appearance: none with its own ::after) needs
   a selector that outranks the ::after rule below. */
.template_togglebox input[type="checkbox"]::after,
.template_togglebox input[type="radio"]::after {
  content: none;
  display: none;
}

:where(.template_togglebox) :where(input[type="checkbox"], input[type="radio"]) {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-primary);
  cursor: pointer;
}

:where(.template_togglebox) :where(input[type="checkbox"], input[type="radio"]):disabled {
  cursor: default;
}

html[data-theme="dark"] :where(.template_togglebox) :where(input[type="checkbox"], input[type="radio"]) {
  color-scheme: dark;
}

/* Core sets input { outline: none !important }, so the ring needs !important. */
.template_togglebox input[type="checkbox"]:focus-visible,
.template_togglebox input[type="radio"]:focus-visible {
  outline: 2px solid var(--focus-outline) !important;
  outline-offset: 2px;
}

/* Kept: removing it changes div.selectize-input color #e2e8f0 -> #303030 on the dashboard. */
html[data-theme="dark"] .template_togglebox .selectize-input,
html[data-theme="dark"] .template_togglebox .selectize-control.single .selectize-input.input-active {
  background: var(--surface-card, #111827);
  color: var(--color-fg, #e2e8f0);
  border-color: var(--input-border);
  box-shadow: var(--shadow-control-inset, inset 0 1px 2px rgba(0,0,0,0.45));
}

/* Kept: removing it changes input color #e2e8f0 -> #303030 on the dashboard. */
html[data-theme="dark"] .template_togglebox .selectize-input > input {
  color: var(--color-fg, #e2e8f0);
}

/* Kept: no verification page renders it, so the token diff cannot show it is redundant yet. */
html[data-theme="dark"] .template_togglebox .selectize-input.focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-bg, rgba(41, 167, 230, 0.16)),
    var(--shadow-control-inset, inset 0 1px 2px rgba(0,0,0,0.45));
}

/* Kept: removing it changes the ::after mark of div.selectize-input on the dashboard. */
html[data-theme="dark"] .template_togglebox .selectize-control.single .selectize-input:not(.no-arrow)::after {
  border-top-color: var(--color-fg-muted, #94a3b8);
}

/* Kept: no verification page renders it, so the token diff cannot show it is redundant yet. */
html[data-theme="dark"] .template_togglebox .selectize-control.single .selectize-input:not(.no-arrow).dropdown-active::after {
  border-bottom-color: var(--color-fg-muted, #94a3b8);
}

/* Kept: removing it changes the selectize dropdown shadow on the dashboard (focus). */
html[data-theme="dark"] .template_togglebox .selectize-dropdown.form-control {
  background: var(--surface-card, #111827);
  color: var(--color-fg, #e2e8f0);
  border-color: var(--color-border, #334155);
  box-shadow: var(--shadow-lg);
}

/* Kept: no verification page renders it, so the token diff cannot show it is redundant yet. */
html[data-theme="dark"] .template_togglebox .selectize-dropdown .option,
html[data-theme="dark"] .template_togglebox .selectize-dropdown .optgroup-header,
html[data-theme="dark"] .template_togglebox .selectize-dropdown .no-results,
html[data-theme="dark"] .template_togglebox .selectize-dropdown .create {
  color: var(--color-fg, #e2e8f0);
}

/* Kept: no verification page renders it, so the token diff cannot show it is redundant yet. */
html[data-theme="dark"] .template_togglebox .selectize-dropdown .active:not(.selected) {
  background: var(--color-surface, #1e293b);
  color: var(--color-fg-strong, #f8fafc);
}

/* Kept: no verification page renders it, so the token diff cannot show it is redundant yet. */
html[data-theme="dark"] .template_togglebox .selectize-dropdown .selected,
html[data-theme="dark"] .template_togglebox .selectize-dropdown .active {
  background: var(--brand-primary);
  color: var(--color-fg-inverse, #fff);
}

/* Dark mode bridge: dropdown menus (content-area and topbar) — shared rules */
/* Kept: removing it changes the div.dropdown-menu shadow (dark --shadow-lg to the compiled one) on OpenNebula createvm. */
html[data-theme="dark"] .template_togglebox .section-main .dropdown-menu,
html[data-theme="dark"] .template_togglebox .navbar .dropdown-menu {
  background: var(--dropdown-bg, var(--surface-card, #111827));
  color: var(--dropdown-fg, var(--color-fg, #e2e8f0));
  border-color: var(--dropdown-border, var(--color-border, #334155));
  box-shadow: var(--shadow-lg);
}

/* Kept: removing it changes a.navbar-dropdown-item color #cbd5e1 -> #9ba0b3 on OpenNebula createvm. */
html[data-theme="dark"] .template_togglebox .navbar .navbar-dropdown-item,
html[data-theme="dark"] .template_togglebox .navbar .navbar-search-results .result {
  color: var(--dropdown-fg, var(--color-fg, #e2e8f0));
}

/* Kept: removing it changes a.dropdown-item color #f8fafc -> #cbd5e1 on OpenNebula createvm (hover). */
html[data-theme="dark"] .template_togglebox .section-main .dropdown-item:hover,
html[data-theme="dark"] .template_togglebox .section-main .dropdown-item:focus,
html[data-theme="dark"] .template_togglebox .navbar .dropdown-item:hover,
html[data-theme="dark"] .template_togglebox .navbar .dropdown-item:focus,
html[data-theme="dark"] .template_togglebox .navbar .navbar-dropdown-item:hover,
html[data-theme="dark"] .template_togglebox .navbar .navbar-dropdown-item:focus,
html[data-theme="dark"] .template_togglebox .navbar .navbar-search-results .result:hover,
html[data-theme="dark"] .template_togglebox .navbar .navbar-search-results .result:focus {
  background: var(--dropdown-hover-bg, var(--color-surface, #1e293b));
  color: var(--color-fg-strong, #f8fafc);
}

/* Kept: removing it changes a.dropdown-item background-color from the blue tint to #1e293b on OpenNebula createvm (active). */
html[data-theme="dark"] .template_togglebox .section-main .dropdown-item.active,
html[data-theme="dark"] .template_togglebox .section-main .dropdown-item:active,
html[data-theme="dark"] .template_togglebox .navbar .dropdown-item.active,
html[data-theme="dark"] .template_togglebox .navbar .dropdown-item:active {
  background: var(--brand-primary-bg, rgba(41, 167, 230, 0.16));
  color: var(--brand-primary-light, #93c5fd);
}

/* Kept: removing it changes span.dropdown-item color #a3b1c6 -> #cbd5e1 on OpenNebula createvm. */
html[data-theme="dark"] .template_togglebox .section-main .dropdown-item.disabled,
html[data-theme="dark"] .template_togglebox .section-main .dropdown-item:disabled,
html[data-theme="dark"] .template_togglebox .navbar .dropdown-item.disabled,
html[data-theme="dark"] .template_togglebox .navbar .dropdown-item:disabled {
  color: var(--color-fg-muted, #94a3b8);
}
/* Dark mode bridge: content-area dropdown additions */
/* Kept: removing it changes a.dropdown-item color #fca5a5 -> #f42828 on the services list (hover). */
html[data-theme="dark"] .template_togglebox .section-main .dropdown-item.text-danger {
  color: var(--color-danger-strong) !important;
}

/* Topbar counts (notification bell, shopping cart). Compiled .badge-primary
   is white on a light blue (under 3:1); the primary fill token keeps the count
   at AA in both themes. The compiled navbar badge is 10px; the count uses the
   12px floor, and the pill grows from an 18px circle so "9", "95" and "99+"
   all stay centered. Both selectors outrank the compiled
   `.navbar .navbar-body .navbar-menu .nav-link .badge` (0,5,0). */
.template_togglebox .navbar .nav-link .badge.navbar-count-badge,
.template_togglebox .navbar .btn-left-navbar .badge.navbar-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: var(--font-size-sm, 12px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background-color: var(--color-primary-fill);
  color: var(--color-fg-inverse, #fff);
}

/* Sidebar order-category counts: the compiled .badge is 10px. */
.template_togglebox .sidebar .nav-link .badge {
  font-size: var(--font-size-sm, 12px);
}

/* The compiled navbar fades hovered links to .7 opacity, which would take the
   count under 4.5:1; keep the bell link opaque. */
.template_togglebox .navbar .navbar-body .navbar-menu .nav-link:hover:has(> .navbar-count-badge) {
  opacity: 1;
}

/* Dark mode bridge: topbar dropdown additions */
/* Kept: removing it changes div.notifications-drop-title border-bottom-color #334155 -> #e2e2e2 on OpenNebula createvm. */
html[data-theme="dark"] .template_togglebox .navbar .notifications-drop-title {
  border-bottom-color: var(--dropdown-border, var(--color-border, #334155));
}

/* Secondary text in topbar menus and the user-menu "Welcome" label: the
   muted foreground token in both themes (the compiled gray was ~3.8:1 on
   the dark topbar). */
.template_togglebox .navbar .dropdown-menu .text-gray,
.template_togglebox .navbar .dropdown-menu .text-secondary,
.template_togglebox .navbar .dropdown-menu .text-muted,
.template_togglebox .navbar .navbar-menu-user .text-gray {
  color: var(--color-fg-muted) !important;
}

/* Headings: custom.css pins h1-h5/.h1-.h5 to fixed navy (#2f405d) with no dark
   override (~1.7:1 on the dark background). Re-token them here; rules with a
   more specific or !important color (e.g. .text-danger) still win. */
/* Kept: removing it changes h3 color #f8fafc -> #ffffff on OpenNebula createvm. */
html[data-theme="dark"] .template_togglebox :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5) {
  color: var(--color-fg-strong, #f8fafc);
}

/* Danger-subtle buttons: full-strength danger red is ~3.7:1 on dark surfaces;
   use the soft variant, and pin filled-state text to the inverse token because
   --color-bg (the light-mode hover text) is dark in dark mode. */
/* Kept: the scoped copies overlap (a .modal inside .template_togglebox), so dropping some leaves #f87171 text on createvm modal buttons where #fca5a5 is measured. */
html[data-theme="dark"] #content-cloud .slick-btn--danger-subtle,
html[data-theme="dark"] .tag-modal .slick-btn--danger-subtle,
html[data-theme="dark"] .modal .slick-btn--danger-subtle,
html[data-theme="dark"] body > .tag-modal-overlay .slick-btn--danger-subtle,
html[data-theme="dark"] .oneb-snap-overlay .slick-btn--danger-subtle,
html[data-theme="dark"] .vm-notes-popover .slick-btn--danger-subtle,
html[data-theme="dark"] .vm-shell-stack .slick-btn--danger-subtle,
html[data-theme="dark"] .template_togglebox .slick-btn--danger-subtle {
  color: var(--color-danger-soft, #f87171);
  border-color: var(--color-danger-soft, #f87171);
}

/* Kept: the scoped copies overlap (a .modal inside .template_togglebox), so dropping some leaves #f87171 text on createvm modal buttons where #fca5a5 is measured. */
html[data-theme="dark"] #content-cloud .slick-btn--danger-subtle:hover,
html[data-theme="dark"] .tag-modal .slick-btn--danger-subtle:hover,
html[data-theme="dark"] .modal .slick-btn--danger-subtle:hover,
html[data-theme="dark"] body > .tag-modal-overlay .slick-btn--danger-subtle:hover,
html[data-theme="dark"] .oneb-snap-overlay .slick-btn--danger-subtle:hover,
html[data-theme="dark"] .vm-notes-popover .slick-btn--danger-subtle:hover,
html[data-theme="dark"] .vm-shell-stack .slick-btn--danger-subtle:hover,
html[data-theme="dark"] .template_togglebox .slick-btn--danger-subtle:hover {
  background: var(--color-danger-fill, #dc2626);
  color: var(--color-fg-inverse, #fff);
  border-color: var(--color-danger-fill, #dc2626);
}

/* Dark mode bridge: top navbar search input text contrast */
/* Kept: removing it changes input.form-control background-color #1e293b -> #0f172a on OpenNebula createvm. */
html[data-theme="dark"] .template_togglebox .navbar .navbar-search .input-group input.form-control.form-control-noborders {
  color: var(--color-fg, #e2e8f0);
  caret-color: var(--color-fg, #e2e8f0);
  background-color: var(--color-surface, #1e293b);
}

/* Kept: removing it changes the ::after mark of input.form-control on OpenNebula createvm. */
html[data-theme="dark"] .template_togglebox .navbar .navbar-search .input-group input.form-control.form-control-noborders::placeholder {
  color: var(--color-fg-muted, #94a3b8) !important;
  opacity: 1;
}

/* Dark mode bridge: order button container background */
/* Kept: removing it changes div.navbar-order background-color #1e293b -> transparent on OpenNebula createvm. */
html[data-theme="dark"] .template_togglebox .navbar .navbar-order {
  background: var(--color-surface, #1e293b);
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* Mobile sub-bar: size to its rows (50px closed, 100px with search open)
   instead of the compiled fixed 50px height. */
.template_togglebox .navbar.sub-bar {
  height: auto;
}

/* Dark mode bridge: mobile sub-bar background */
/* Kept: removing it changes nav.navbar background-color #0f172a -> #ffffff on OpenNebula createvm. */
html[data-theme="dark"] .template_togglebox .navbar.sub-bar {
  background-color: var(--color-bg, #0f172a) !important;
  box-shadow: var(--shadow-sm);
}

/* Kept: removing it changes div.w-100 background-color #0f172a -> #ffffff on OpenNebula createvm. */
html[data-theme="dark"] .template_togglebox .navbar.sub-bar .navbar-body {
  background-color: var(--color-bg, #0f172a) !important;
}

/* Dark mode bridge: content-area no-border controls (exclude navbar search) */
/* Kept: removing it changes the ::after mark of input.form-control on the invoice. */
html[data-theme="dark"] .template_togglebox .section-main .form-control.form-control-noborders::placeholder {
  color: var(--color-fg-muted, #94a3b8) !important;
  opacity: 1;
}

/* Background colors using theme variables */
.template_togglebox .bg-primary { background-color: var(--brand-primary) !important; }
.template_togglebox .bg-success { background-color: var(--brand-success) !important; }
.template_togglebox .bg-danger { background-color: var(--brand-danger) !important; }
.template_togglebox .bg-warning { background-color: var(--brand-warning) !important; }

/* ===========================================
   TYPOGRAPHY UTILITIES
   =========================================== */

/* Extra small text */
.template_togglebox .text-xs {
  font-size: var(--font-size-11);
  line-height: var(--line-height-130, 1.3);
  color: var(--color-fg-muted);
}

/* Enhanced small text */
.template_togglebox .text-sm,
.template_togglebox small,
.template_togglebox .small {
  font-size: 0.75rem;
  line-height: var(--line-height-133, 1.33);
}

/* Semibold weight */
.template_togglebox .fw-semibold,
.template_togglebox .fw-600,
.template_togglebox .font-weight-semibold {
  font-weight: var(--font-weight-600, 600);
}

/* Monospace font stack */
.template_togglebox code,
.template_togglebox pre,
.template_togglebox kbd,
.template_togglebox .font-monospace {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Code styling */
.template_togglebox code {
  padding: 2px 6px;
  background: var(--color-surface-3);
  border-radius: 4px;
  font-size: 0.875em;
  color: var(--color-fg);
}

.template_togglebox pre {
  padding: 16px;
  background: var(--color-surface-3);
  border-radius: 8px;
  overflow-x: auto;
}

.template_togglebox pre code {
  padding: 0;
  background: transparent;
}

/* ===========================================
   ICON SIZE UTILITIES
   =========================================== */

.icon-xs { font-size: 0.625rem !important; }   /* 10px */
.icon-sm { font-size: 0.75rem !important; }    /* 12px */
.icon-md { font-size: 1rem !important; }       /* 16px */
.icon-lg { font-size: 1.25rem !important; }    /* 20px */
.icon-xl { font-size: 1.5rem !important; }     /* 24px */
.icon-2xl { font-size: 2rem !important; }      /* 32px */

/* ===========================================
   LOADING STATES
   =========================================== */

/* Spinner */
.spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border-subtle);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner-sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.spinner-lg {
  width: 60px;
  height: 60px;
  border-width: 4px;
}

/* Color variants */
.spinner-success { border-top-color: var(--brand-success); }
.spinner-danger { border-top-color: var(--brand-danger); }
.spinner-warning { border-top-color: var(--brand-warning); }
.spinner-light { border-color: rgba(255,255,255,0.3); border-top-color: var(--color-fg-inverse, #fff); }

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Skeleton loading placeholder */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface-3) 0%, var(--color-surface-2) 50%, var(--color-surface-3) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
  width: 100%;
}

.skeleton-text:last-child {
  width: 70%;
  margin-bottom: 0;
}

.skeleton-title {
  height: 24px;
  width: 60%;
  margin-bottom: 12px;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.skeleton-button {
  height: 38px;
  width: 120px;
  border-radius: 6px;
}

.skeleton-card {
  height: 200px;
  border-radius: 8px;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  /* The spinner keeps a progress cue (slick-animations.css one-pulse) rather
     than going static. */
  .spinner {
    animation: one-pulse 2s ease-in-out infinite;
  }
  .skeleton {
    animation: none;
    background: var(--color-surface-2);
  }
}

/* ===========================================
   STATUS PILLS (Enhanced Badges)
   =========================================== */

/* Base pill shape. Tones (-primary, -success, -danger, -warning,
   -secondary, -running) come from the shared tone block in
   slick-components.css; -secondary is the muted tone. */
.template_togglebox .badge-pill,
.template_togglebox .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: var(--font-weight-600, 600);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-030, 0.03em);
}

/* Running state: a static dot. Running is a steady state, not progress, so it does not animate. */
.template_togglebox .badge-pill-running,
.template_togglebox .status-pill-running {
  position: relative;
  padding-left: 24px;
}

.template_togglebox .badge-pill-running::before,
.template_togglebox .status-pill-running::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--brand-primary);
  border-radius: 50%;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}


/* ===========================================
   TOOLTIPS (Pure CSS)
   =========================================== */

/* Tooltip trigger */
.tooltip-hover {
  position: relative;
  cursor: help;
}

/* Tooltip content - uses data-tooltip attribute */
.tooltip-hover::after {
  content: attr(data-tooltip);
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--tooltip-bg, #333);
  color: var(--tooltip-fg, #fff);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: var(--font-size-sm, 12px);
  font-weight: var(--font-weight-500, 500);
  white-space: nowrap;
  z-index: 1070;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  box-shadow: var(--shadow-md);
}

/* Tooltip arrow */
.tooltip-hover::before {
  content: "";
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--tooltip-bg, #333);
  z-index: 1070;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Show on hover */
.tooltip-hover:hover::after,
.tooltip-hover:hover::before {
  visibility: visible;
  opacity: 1;
}

/* Position variants */
.tooltip-hover.tooltip-bottom::after {
  bottom: auto;
  top: calc(100% + 8px);
}

.tooltip-hover.tooltip-bottom::before {
  bottom: auto;
  top: calc(100% + 2px);
  border-top-color: transparent;
  border-bottom-color: var(--tooltip-bg, #333);
}

.tooltip-hover.tooltip-left::after {
  bottom: auto;
  left: auto;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

.tooltip-hover.tooltip-left::before {
  bottom: auto;
  left: auto;
  right: calc(100% + 2px);
  top: 50%;
  transform: translateY(-50%);
  border-top-color: transparent;
  border-left-color: var(--tooltip-bg, #333);
}

.tooltip-hover.tooltip-right::after {
  bottom: auto;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

.tooltip-hover.tooltip-right::before {
  bottom: auto;
  left: calc(100% + 2px);
  top: 50%;
  transform: translateY(-50%);
  border-top-color: transparent;
  border-right-color: var(--tooltip-bg, #333);
}

/* Multi-line tooltip */
.tooltip-hover.tooltip-multiline::after {
  white-space: normal;
  max-width: 200px;
  text-align: center;
}

/* ===========================================
   FORM ENHANCEMENTS
   =========================================== */

/* Grouped form container with subtle background */
.template_togglebox .form-container {
  background: var(--surface-gradient, linear-gradient(145deg, #FFF 0%, #FAFBFC 100%));
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

/* Form section header */
.template_togglebox .form-section-title {
  font-size: 1rem;
  font-weight: var(--font-weight-600, 600);
  color: var(--color-fg);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Uppercase label variant */
.template_togglebox .form-label-uppercase,
.template_togglebox label.label-uppercase {
  display: block;
  margin-bottom: 8px;
  font-weight: var(--font-weight-500, 500);
  font-size: 0.75rem;
  color: var(--color-fg-subtle);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-030, 0.03em);
}

/* Required field indicator */
.template_togglebox .form-label-required::after,
.template_togglebox label.required::after {
  content: " *";
  color: var(--color-danger-strong);
}

/* Help text enhancement */
.template_togglebox .form-text,
.template_togglebox .help-block {
  font-size: 0.75rem;
  color: var(--color-fg-muted);
  margin-top: 6px;
}

/* Input with icon */
.template_togglebox .input-icon-wrapper {
  position: relative;
}

.template_togglebox .input-icon-wrapper .form-control {
  padding-left: 40px;
}

.template_togglebox .input-icon-wrapper .input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-fg-muted);
  pointer-events: none;
}

.template_togglebox .input-icon-wrapper .form-control:focus + .input-icon,
.template_togglebox .input-icon-wrapper .form-control:focus ~ .input-icon {
  color: var(--color-icon-accent);
}

/* ============================================
   CONTRAST ACCESSIBILITY FIXES (WCAG AA 4.5:1)
   ============================================ */

/* Bootstrap .bg-secondary badge: lighten background for contrast */
.template_togglebox .badge.bg-secondary {
  background-color: var(--color-surface-2) !important;
  color: var(--color-fg-subtle, #495057) !important;
}


/* Input placeholders: the compiled theme paints them #AFB2C1 !important (about
   2.1:1) and lightens them further on focus. Some fields (SG rule rows) carry
   their only hint in the placeholder, so it uses the AA placeholder token in
   both states. Only the colour is forced: .form-label-group still hides its
   placeholders with opacity. */
.template_togglebox input::placeholder,
.template_togglebox textarea::placeholder,
.template_togglebox input:focus::placeholder,
.template_togglebox textarea:focus::placeholder {
  color: var(--color-placeholder, #6b7280) !important;
  opacity: 1;
}

/* Select placeholder/disabled option text */
.template_togglebox select.form-control option[disabled],
.template_togglebox select.form-control option[value=""] {
  color: var(--color-fg-muted, #5f676e);
}

/* Select showing placeholder (required + no valid selection = :invalid) */
.template_togglebox select.form-control:invalid,
.template_togglebox select.styled:invalid,
.template_togglebox select.oneb-select:invalid {
  color: var(--color-fg-muted, #495057) !important;
}
/* Readonly textarea contrast — override opacity:0.7 from .form-control[readonly] */
.template_togglebox textarea.form-control[readonly] {
  color: var(--color-fg-subtle, #495057);
  opacity: 1;
}

/* Kept: no verification page renders it, so the token diff cannot show it is redundant yet. */
html[data-theme="dark"] .template_togglebox textarea.form-control[readonly] {
  color: var(--color-fg-subtle, #cbd5e1);
}

/* Dark mode textarea in modals */
/* Kept: removing it changes textarea.form-input background-color #1f2937 -> #0f172a on OpenNebula createvm.
   The textarea.form-control selector (0,4,2) also keeps --input-border on
   :focus and the modal fill over the parsley/is-invalid error state, as on
   master (add-SSH-key and bulk domain transfer modals). */
html[data-theme="dark"] .template_togglebox .control-group textarea,
html[data-theme="dark"] .template_togglebox .modal textarea.form-control,
html[data-theme="dark"] .template_togglebox .modal textarea {
  color: var(--color-fg, #e2e8f0);
  background-color: var(--color-surface-3, #1f2937);
  border-color: var(--input-border);
}

/* ==========================================================================
   HostBill 2019 upstream (2026-11-03): alternative-login separator, signup
   placeholder fields, and the smart-search "View all" result. Ported from
   HostBill's src/scss/main.scss with tokens in place of fixed colors.
   ========================================================================== */
.template_togglebox .empty-placeholder {
  width: 100%;
  min-height: 42px;
}

.template_togglebox .alt-login-separator {
  position: relative;
  width: 100%;
  height: 1px;
  margin: var(--space-6, 24px) 0;
  background: var(--color-border, #dee2e6);
}

.template_togglebox .alt-login-separator > div {
  width: 50px;
  margin: auto;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-fg-muted, #5f676e);
  background: var(--surface-card, var(--color-bg, #fff));
  transform: translateY(-50%);
}

.template_togglebox .alt-login,
.template_togglebox .alt-login > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  width: 100%;
}

.template_togglebox .alt-login {
  margin-top: var(--space-2, 8px);
}

.template_togglebox .alt-login > div {
  margin: 0 !important;
}

.template_togglebox .alt-login .btn {
  display: block;
  width: 100% !important;
  margin: 0 !important;
}

.template_togglebox .section-ipaccess form hr {
  border-top-color: var(--color-border, #dee2e6);
}

.template_togglebox .navbar-search-results .result.search-view-all {
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-primary-strong) !important; /* AA on the dropdown in both themes */
  white-space: normal;
}

/* ==========================================================================
   Select2 (multi-select config options on upgrade forms; HostBill core loads
   select2.css). Mirrors .form-control and the dropdown tokens so the widget
   matches native inputs in both themes. Port of HostBill's src/scss/select2.scss.
   ========================================================================== */
.template_togglebox .select2-container--default {
  width: 100% !important; /* select2 writes an inline pixel width */
}

.template_togglebox .select2-container--default .select2-selection {
  min-height: var(--control-min-h-md, 40px);
  color: var(--color-fg, #212529);
  background-color: var(--surface-card, #fff);
  border: 1px solid var(--input-border, #868e96);
  border-radius: var(--radius-md);
}

.template_togglebox .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 var(--space-6, 24px) 0 var(--space-3, 12px);
  line-height: calc(var(--control-min-h-md, 40px) - 2px);
  color: var(--color-fg, #212529);
}

.template_togglebox .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(var(--control-min-h-md, 40px) - 2px);
}

.template_togglebox .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-top-color: var(--color-fg-subtle, #495057);
}

.template_togglebox .select2-container--default .select2-selection__placeholder,
.template_togglebox .select2-container--default .select2-search--inline .select2-search__field::placeholder {
  color: var(--color-fg-muted, #5f676e);
}

.template_togglebox .select2-container--default .select2-selection--multiple .select2-selection__choice {
  color: var(--color-fg, #212529);
  background-color: var(--color-surface, #f8f9fa);
  border: 1px solid var(--color-border, #dee2e6);
  border-radius: var(--radius-sm);
}

.template_togglebox .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--color-fg-muted, #5f676e);
  border-right-color: var(--color-border, #dee2e6);
}

.template_togglebox .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.template_togglebox .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
  color: var(--color-danger, #dc3545);
  background-color: transparent;
}

.template_togglebox .select2-container--default .select2-search--inline .select2-search__field {
  color: var(--color-fg, #212529);
  font-family: inherit;
}

.template_togglebox .select2-container--default.select2-container--focus .select2-selection,
.template_togglebox .select2-container--default.select2-container--open .select2-selection {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-bg, rgba(41, 167, 230, 0.08));
}

.template_togglebox .select2-container--default.select2-container--disabled .select2-selection {
  background-color: var(--color-surface-3);
  cursor: not-allowed;
}

.template_togglebox .select2-container--default .select2-dropdown {
  color: var(--dropdown-fg, #495057);
  background-color: var(--dropdown-bg, #fff);
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-lg);
}

.template_togglebox .select2-container--default .select2-search--dropdown .select2-search__field {
  color: var(--color-fg, #212529);
  background-color: var(--surface-card, #fff);
  border-color: var(--input-border, #868e96);
  border-radius: var(--radius-sm);
}

.template_togglebox .select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--brand-primary);
  outline: none;
}

.template_togglebox .select2-container--default .select2-results__option {
  padding: var(--space-2, 8px) var(--space-4, 16px);
}

.template_togglebox .select2-container--default .select2-results__option--selected {
  background-color: var(--brand-primary-bg, rgba(41, 167, 230, 0.08));
}

.template_togglebox .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  color: var(--color-fg-strong, #111827);
  background-color: var(--dropdown-hover-bg, #f8f9fa);
}

.template_togglebox .select2-container--default .select2-results__option--disabled,
.template_togglebox .select2-container--default .select2-results__message {
  color: var(--color-fg-muted, #5f676e);
}

/* ===========================================
   INJECTED FORM INK FLOOR
   Gateway, signup and credit-card forms arrive as third-party markup that
   the compiled bundles colour with a fixed slate (.text-small and table
   cells, #1e293b), which is about 1.1:1 on the dark payment surfaces. The
   theme owns the floor so modules and order pages do not each repair it:
   label, cell and small-print ink follow the theme foreground, and browser
   autofill keeps the field's own surface and ink. One rule per element in
   both themes; the light values are the same near-black as before.
   =========================================== */
/* :where() on the containers keeps this at (0,2,0): above the compiled
   cell rules, below any component or utility that sets its own ink. */
.template_togglebox :where(.card-body, .wbox, .checkout, #gatewayform) :is(td, label, .text-small) {
  color: var(--color-fg);
}

.template_togglebox input:-webkit-autofill,
.template_togglebox input:-webkit-autofill:hover,
.template_togglebox input:-webkit-autofill:focus,
.template_togglebox textarea:-webkit-autofill,
.template_togglebox select:-webkit-autofill {
  -webkit-text-fill-color: var(--color-fg);
  caret-color: var(--color-fg);
  box-shadow: inset 0 0 0 1000px var(--surface-card);
}

/* Bootstrap outline-primary: the compiled #3891F2 text is 3.2:1 on white
   (2.7:1 once the configurator blue applies) and 2.4:1 on the dark page.
   It is the primary reversed, so it reads the secondary-tier tokens that
   .btn-secondary and .slick-btn--secondary already use (5.2:1 light, 6.0:1
   or better dark; hover fills with #fff text at 5.2:1). */
.template_togglebox .btn-outline-primary,
.template_togglebox .btn-outline-primary.disabled,
.template_togglebox .btn-outline-primary:disabled {
  color: var(--color-secondary-fg);
  background-color: var(--color-secondary-fill);
  border-color: var(--color-secondary-border);
}

.template_togglebox .btn-outline-primary:not(:disabled):not(.disabled):hover,
.template_togglebox .btn-outline-primary:not(:disabled):not(.disabled):active,
.template_togglebox .btn-outline-primary:not(:disabled):not(.disabled).active,
.template_togglebox .show > .btn-outline-primary.dropdown-toggle {
  color: var(--color-secondary-fg-hover);
  background-color: var(--color-secondary-fill-hover);
  border-color: var(--color-secondary-border-hover);
}