/**
 * 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(--gray-50) 0%, var(--gray-100) 100%);
  border-bottom: 2px solid var(--gray-200);
}

.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(--gray-700);
  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(--gray-100);
  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(--gray-100);
  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-soft, 0 2px 4px rgba(0,0,0,.05));
}

/* Dark mode: force override compiled Bootstrap table-striped rules */
html[data-theme="dark"] .template_togglebox .table {
  background: var(--color-bg, #0f172a);
}

html[data-theme="dark"] .template_togglebox .table thead {
  border-bottom-color: var(--color-border, #334155);
}

html[data-theme="dark"] .template_togglebox .table tbody tr:nth-child(odd) {
  background: var(--color-surface-3, #1f2937) !important;
}

html[data-theme="dark"] .template_togglebox .table tbody tr:nth-child(even) {
  background: var(--color-bg, #0f172a) !important;
}

html[data-theme="dark"] .template_togglebox .table tbody tr,
html[data-theme="dark"] .template_togglebox .table td {
  border-bottom-color: var(--color-border, #334155);
}

/* 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 */
.template_togglebox .btn-secondary {
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-weight: var(--font-weight-500, 500);
  transition: all .15s ease;
}

.template_togglebox .btn-secondary:hover,
.template_togglebox .btn-secondary:focus {
  background: var(--gray-200);
  color: var(--gray-800);
  border-color: var(--gray-300);
}

/* 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 */
.template_togglebox .btn-success {
  background: var(--brand-success-gradient, linear-gradient(135deg, var(--brand-success) 0%, #25a85a 100%));
  color: var(--color-fg-inverse, #fff);
  border: none;
  border-radius: 6px;
  font-weight: var(--font-weight-500, 500);
  box-shadow: var(--shadow-sm-soft, 0 2px 4px rgba(45,199,107,.2));
  transition: transform .15s ease, box-shadow .15s ease;
}

.template_togglebox .btn-success:hover,
.template_togglebox .btn-success:focus {
  background: var(--brand-success-gradient, linear-gradient(135deg, var(--brand-success) 0%, #25a85a 100%));
  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, linear-gradient(135deg, var(--brand-danger) 0%, #c21f27 100%));
  color: var(--color-fg-inverse, #fff);
  border: none;
  border-radius: 6px;
  font-weight: var(--font-weight-500, 500);
  box-shadow: var(--shadow-sm-soft, 0 2px 4px rgba(217,37,46,.2));
  transition: transform .15s ease, box-shadow .15s ease;
}

.template_togglebox .btn-danger:hover,
.template_togglebox .btn-danger:focus {
  background: var(--brand-danger-gradient, linear-gradient(135deg, var(--brand-danger) 0%, #c21f27 100%));
  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, 0 2px 4px rgba(245,146,30,.2));
  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, 0 4px 10px rgba(245,146,30,.28));
}
.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, 0 2px 4px rgba(245,146,30,.2));
}
.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, 0 4px 10px rgba(245,146,30,.28));
}

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

.template_togglebox .form-control {
  border: 1px solid var(--gray-300);
  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;
}

.template_togglebox .form-control:focus {
  border-color: var(--brand-primary);
  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(--gray-100);
  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(--gray-700);
  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(--gray-100);
  border: 1px solid var(--gray-300);
  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(--gray-200, #e9ecef);
  border-radius: 8px;
  box-shadow: var(--elevation-soft-1, 0 2px 8px rgba(0,0,0,0.04));
}

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

/* Shared token-first helpers for extracted status/label primitives */
.template_togglebox .tb-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: var(--gray-400, #ced4da);
}

.template_togglebox .tb-status-dot--active { background: var(--brand-success, #2DC76B); box-shadow: var(--status-glow-success); }
.template_togglebox .tb-status-dot--pending { background: var(--brand-warning, #F59E0B); box-shadow: var(--status-glow-warning); }
.template_togglebox .tb-status-dot--suspended { background: var(--brand-primary, #29A7E6); box-shadow: var(--status-glow-info); }
.template_togglebox .tb-status-dot--cancelled { background: var(--brand-danger, #D9252E); box-shadow: var(--status-glow-danger); }

.template_togglebox .tb-label-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  padding: 1px 6px;
  font-size: 9px;
  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-based badges (HostBill convention) */
.template_togglebox .badge-Active,
.template_togglebox .badge-success,
.template_togglebox .badge-Answered,
.template_togglebox .badge-Paid {
  background: color-mix(in srgb, var(--brand-success, #2DC76B) 14%, #fff) !important;
  color: var(--color-success-strong, #166534) !important;
  border: 1px solid color-mix(in srgb, var(--brand-success, #2DC76B) 40%, transparent) !important;
}

.template_togglebox .badge-Pending,
.template_togglebox .badge-warning {
  background: var(--brand-warning) !important;
  color: var(--color-fg-inverse, #fff) !important;
}

.template_togglebox .badge-Cancelled,
.template_togglebox .badge-Terminated,
.template_togglebox .badge-Fraud,
.template_togglebox .badge-danger {
  background: var(--brand-danger) !important;
  color: var(--color-fg-inverse, #fff) !important;
}

.template_togglebox .badge-Suspended,
.template_togglebox .badge-info {
  background: var(--brand-primary) !important;
  color: var(--color-fg-inverse, #fff) !important;
}

.template_togglebox .badge-secondary,
.template_togglebox .badge-default {
  background: var(--brand-muted, #9BA0B3) !important;
  color: var(--color-fg-inverse, #fff) !important;
}

/* Ticket status badges */
.template_togglebox .badge-Open {
  background: var(--brand-primary) !important;
  color: var(--color-fg-inverse, #fff) !important;
}

.template_togglebox .badge-CustomerReply,
.template_togglebox .badge-Customer-Reply,
.template_togglebox .badge-Client-Reply {
  background: var(--brand-warning-bg, rgba(245, 158, 11, 0.08)) !important;
  border: 1px solid var(--brand-warning, #F59E0B) !important;
  color: var(--color-warning-strong, #92400e) !important;
}

.template_togglebox .badge-Closed {
  background: var(--gray-500) !important;
  color: var(--color-fg-inverse, #fff) !important;
}

.template_togglebox .badge-OnHold,
.template_togglebox .badge-On-Hold {
  background: var(--brand-accent, #6f42c1) !important;
  color: var(--color-fg-inverse, #fff) !important;
}

/* Invoice status badges */
.template_togglebox .badge-Unpaid {
  background: var(--brand-danger) !important;
  color: var(--color-fg-inverse, #fff) !important;
}

.template_togglebox .badge-Refunded {
  background: var(--gray-600) !important;
  color: var(--color-fg-inverse, #fff) !important;
}

/* Dark mode bridge: legacy .label status pills from app.css */
html[data-theme="dark"] .template_togglebox .label.label-success,
html[data-theme="dark"] .template_togglebox .label.label-Active,
html[data-theme="dark"] .template_togglebox .label.label-Accepted,
html[data-theme="dark"] .template_togglebox .label.label-Paid,
html[data-theme="dark"] .template_togglebox .label.label-Receiptpaid,
html[data-theme="dark"] .template_togglebox .label.label-Opened,
html[data-theme="dark"] .template_togglebox .label.label-Open {
  background: var(--brand-success-bg, rgba(45, 199, 107, 0.08)) !important;
  color: var(--brand-success, #2DC76B) !important;
  border: 1px solid var(--brand-success, #2DC76B) !important;
}

html[data-theme="dark"] .template_togglebox .label.label-warning,
html[data-theme="dark"] .template_togglebox .label.label-Suspended,
html[data-theme="dark"] .template_togglebox .label.label-Answered {
  background: var(--brand-warning-bg, rgba(245, 158, 11, 0.08)) !important;
  color: var(--brand-warning, #F59E0B) !important;
  border: 1px solid var(--brand-warning, #F59E0B) !important;
}

html[data-theme="dark"] .template_togglebox .label.label-danger,
html[data-theme="dark"] .template_togglebox .label.label-Unpaid,
html[data-theme="dark"] .template_togglebox .label.label-Chargeback,
html[data-theme="dark"] .template_togglebox .label.label-Collections,
html[data-theme="dark"] .template_togglebox .label.label-Receiptunpaid,
html[data-theme="dark"] .template_togglebox .label.label-Terminated {
  background: var(--brand-danger-bg, rgba(217, 37, 46, 0.08)) !important;
  color: var(--brand-danger, #D9252E) !important;
  border: 1px solid var(--brand-danger, #D9252E) !important;
}

html[data-theme="dark"] .template_togglebox .label.label-primary,
html[data-theme="dark"] .template_togglebox .label.label-Pending,
html[data-theme="dark"] .template_togglebox .label.label-Sent,
html[data-theme="dark"] .template_togglebox .label.label-In-Progress {
  background: var(--brand-primary-bg, rgba(41, 167, 230, 0.08)) !important;
  color: var(--brand-primary, #29A7E6) !important;
  border: 1px solid var(--brand-primary, #29A7E6) !important;
}

html[data-theme="dark"] .template_togglebox .label.label-secondary,
html[data-theme="dark"] .template_togglebox .label.label-default,
html[data-theme="dark"] .template_togglebox .label.label-status,
html[data-theme="dark"] .template_togglebox .label.label-Canceled,
html[data-theme="dark"] .template_togglebox .label.label-Cancelled,
html[data-theme="dark"] .template_togglebox .label.label-Closed,
html[data-theme="dark"] .template_togglebox .label.label-Creditnote,
html[data-theme="dark"] .template_togglebox .label.label-Fraud,
html[data-theme="dark"] .template_togglebox .label.label-Draft,
html[data-theme="dark"] .template_togglebox .label.label-Dead,
html[data-theme="dark"] .template_togglebox .label.label-Close,
html[data-theme="dark"] .template_togglebox .label.label-Receiptcanceled {
  background: var(--color-surface, #1e293b) !important;
  color: var(--color-fg-muted, #94a3b8) !important;
  border: 1px solid var(--color-border, #334155) !important;
}

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

.template_togglebox .card {
  background: var(--color-bg, #fff);
  border: 1px solid var(--gray-200);
  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(--gray-50) 0%, var(--gray-100) 100%);
  border-bottom: 1px solid var(--gray-200);
  border-radius: 8px 8px 0 0;
  padding: 12px 16px;
  font-weight: var(--font-weight-600, 600);
}

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

.template_togglebox .card-footer {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  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(--brand-primary-bg);
  color: var(--brand-primary-dark);
  border-left: 2px solid var(--brand-primary);
}

.template_togglebox .alert-success {
  background: var(--brand-success-bg);
  color: var(--color-success-strong, #15603a);
  border-left: 2px solid var(--brand-success);
}

.template_togglebox .alert-warning {
  background: var(--brand-warning-bg);
  color: var(--color-warning-strong, #92400e);
  border-left: 2px solid var(--brand-warning);
}

.template_togglebox .alert-danger {
  background: var(--brand-danger-bg);
  color: var(--color-danger-strong, #991b1b);
  border-left: 2px solid var(--brand-danger);
}

.template_togglebox .alert-info {
  background: var(--brand-primary-bg);
  color: var(--brand-primary-dark);
  border-left: 2px solid var(--brand-primary);
}

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

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

.template_togglebox .info-box h3 {
  font-size: 1.1rem;
  font-weight: var(--font-weight-600, 600);
  color: var(--gray-800);
  margin-bottom: 16px;
}

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

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

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

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

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

.template_togglebox .nav-tabs .nav-link.active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
  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);
}

.template_togglebox .pagination .page-item.active .page-link {
  background: var(--brand-primary, #29A7E6);
  border-color: var(--brand-primary, #29A7E6);
  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-accent-700, #0369A1) !important;
  border-color: var(--color-accent-700, #0369A1) !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(--gray-200);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  padding: 8px 0;
}

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

.template_togglebox .dropdown-item:hover {
  background: var(--gray-100);
  color: var(--gray-800);
}

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

.template_togglebox .dropdown-divider {
  border-top-color: var(--gray-200);
  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(--gray-200));
  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(--gray-700));
  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(--gray-100));
  color: var(--color-fg, var(--gray-800));
  text-decoration: none;
}

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

.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(--gray-700));
  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(--gray-100));
  color: var(--color-fg, var(--gray-800));
  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);
}

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

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

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

.modal-body {
  padding: 20px;
}

.modal-footer {
  border-top: 1px solid var(--gray-200);
  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-accent-700, #0369A1) !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-700, #DC2626) !important; }
.template_togglebox .text-warning { color: var(--brand-warning) !important; }

.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-primary-600, #035B85);
  --brand-primary-dark: var(--color-primary-600, #035B85);
  color: var(--color-primary-600, #035B85) !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-accent-700, #0369A1) !important;
  border-color: var(--color-accent-700, #0369A1) !important;
  color: var(--color-fg-inverse, #fff) !important;
}

html[data-theme="dark"] .template_togglebox .cloud-nav-bar .cloud-nav-items div#instances-vm-nav-dropdown > a#instances-vm-nav-link {
  --color-accent-600: var(--color-primary, #3FB7F2);
  --brand-primary-dark: var(--color-primary, #3FB7F2);
  color: var(--color-primary, #3FB7F2) !important;
}

html[data-theme="dark"] .template_togglebox .cloud-nav-bar .cloud-nav-items > a.nav-item.active,
html[data-theme="dark"] .template_togglebox .cloud-nav-bar .cloud-nav-items > a.ttn-nav__item.active,
html[data-theme="dark"] .template_togglebox .cloud-nav-bar .cloud-nav-items > .nav-dropdown > button.nav-item.active,
html[data-theme="dark"] .template_togglebox .cloud-nav-bar .cloud-nav-items > .nav-dropdown > button.ttn-nav__item.active {
  background: var(--color-accent-700, #0369A1) !important;
  border-color: var(--color-accent-700, #0369A1) !important;
  color: var(--color-fg-inverse, #fff) !important;
}

.template_togglebox #content-cloud .vm-activity-minimal__link {
  color: var(--color-accent-700, #0369A1) !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-accent-700, #0369A1);
}

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);
  --hourly-contrast-info-link: var(--brand-primary-light, #6BC8EF);
}

.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;
}

.template_togglebox #content-cloud .ssh-auth-tab.active {
  background: var(--color-accent-700, #0369A1) !important;
  border-color: var(--color-accent-700, #0369A1) !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-accent-700, #0369A1) !important;
  border-color: var(--color-accent-700, #0369A1) !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,
.template_togglebox #volumes-content-bar #volumes-table .oneb-type-root {
  background: #166534 !important;
  border-color: #166534 !important;
  color: var(--color-fg-inverse, #fff) !important;
}

.template_togglebox #content-cloud #volumes-table .oneb-type-chip.oneb-type-root,
.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,
.template_togglebox #volumes-content-bar #volumes-table .oneb-type-iso,
.template_togglebox #volumes-content-bar #volumes-table .oneb-type-data,
.template_togglebox #content-cloud #volumes-table .oneb-type-chip.oneb-type-iso,
.template_togglebox #content-cloud #volumes-table .oneb-type-chip.oneb-type-data {
  background: var(--color-accent-700, #0369A1) !important;
  border-color: var(--color-accent-700, #0369A1) !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: #5B21B6 !important;
  border-color: #5B21B6 !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, var(--color-accent-700, #0369A1)) !important;
}

.template_togglebox #volumes-content-bar #volumes-table a.text-info.oneb-vm-inline-link {
  color: var(--hourly-contrast-info-link, var(--color-accent-700, #0369A1)) !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;
}

/* Bridge legacy Bootstrap dark utility in dark theme */
html[data-theme="dark"] .template_togglebox .text-primary {
  color: var(--brand-primary, #38A9E0) !important;
}

html[data-theme="dark"] .template_togglebox .text-success {
  color: var(--color-success-strong, #86efac) !important;
}

html[data-theme="dark"] .template_togglebox .text-secondary,
html[data-theme="dark"] .template_togglebox .text-muted {
  color: var(--color-fg-subtle, #cbd5e1) !important;
}

html[data-theme="dark"] .template_togglebox .body-content > section.section-main > div.d-flex > h5 {
  color: var(--color-fg-subtle, #cbd5e1) !important;
}

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;
}

html[data-theme="dark"] .template_togglebox .text-dark {
  color: var(--color-fg-strong, #f8fafc) !important;
}

html[data-theme="dark"] .template_togglebox .form-label-group label.form-label-placeholder {
  color: var(--color-fg-subtle, #cbd5e1) !important;
}

html[data-theme="dark"] .template_togglebox .navbar-menu-balance small.text-danger,
html[data-theme="dark"] .template_togglebox .navbar-menu-balance .text-danger {
  color: var(--color-danger-soft, #F87171) !important;
}

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);
}

html[data-theme="dark"] .template_togglebox #content-cloud .vm-activity-minimal__link {
  color: var(--brand-primary, #38A9E0) !important;
}

/* Dark mode bridge: Bootstrap modal surfaces and controls */
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);
}

html[data-theme="dark"] .template_togglebox .modal-header,
html[data-theme="dark"] .template_togglebox .modal-footer {
  border-color: var(--oneb-modal-border, #334155);
}

html[data-theme="dark"] .template_togglebox .modal-title,
html[data-theme="dark"] .template_togglebox .modal-body,
html[data-theme="dark"] .template_togglebox .modal-body td,
html[data-theme="dark"] .template_togglebox .modal-body th,
html[data-theme="dark"] .template_togglebox .modal-body label {
  color: var(--oneb-modal-fg, #e2e8f0);
}

html[data-theme="dark"] .template_togglebox .modal-content .close {
  color: var(--oneb-modal-fg-muted, #94a3b8);
  opacity: 0.8;
  text-shadow: none;
}

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;
}

html[data-theme="dark"] .template_togglebox .modal .btn-secondary,
html[data-theme="dark"] .template_togglebox .modal a.btn-secondary,
html[data-theme="dark"] .template_togglebox .modal .slick-btn-secondary {
  background: var(--color-surface-2, #334155);
  color: var(--color-fg-strong, #f8fafc);
  border-color: var(--color-border-strong, #475569);
}

html[data-theme="dark"] .template_togglebox .modal .btn-secondary:hover,
html[data-theme="dark"] .template_togglebox .modal a.btn-secondary:hover,
html[data-theme="dark"] .template_togglebox .modal .slick-btn-secondary:hover {
  background: var(--color-surface, #1e293b);
  color: var(--color-fg-strong, #f8fafc);
  border-color: var(--color-border-strong, #475569);
}

html[data-theme="dark"] .template_togglebox .modal-content .close i.material-icons {
  color: currentColor;
}

/* Dark mode bridge: Bootstrap form controls */
html[data-theme="dark"] .template_togglebox .form-control:not(.form-control-noborders) {
  color: var(--color-fg, #e2e8f0);
  background-color: var(--surface-card, #111827);
  border-color: var(--color-border, #334155);
}

html[data-theme="dark"] .template_togglebox .form-control:not(.form-control-noborders)::placeholder {
  color: var(--color-fg-muted, #94a3b8);
  opacity: 1;
}

html[data-theme="dark"] .template_togglebox .form-control:not(.form-control-noborders):focus {
  border-color: var(--brand-primary, #29A7E6);
  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));
}

/* Dark mode bridge: native select text/option readability */
html[data-theme="dark"] .template_togglebox select {
  color: var(--color-fg, #e2e8f0) !important;
}

html[data-theme="dark"] .template_togglebox select:invalid {
  color: var(--color-fg-muted, #94a3b8) !important;
}

html[data-theme="dark"] .template_togglebox select option {
  color: var(--color-fg, #e2e8f0);
  background-color: var(--color-bg-elevated, #111827);
}

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, #29A7E6);
}

/* Guard against caret tiling when dark-mode rules override only background-image. */
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;
}

/* Light mode bridge: give checked checkboxes/radios a visible brand state.
   Theme core (main.scss) paints checked as gray-400 on white, which is nearly
   indistinguishable from unchecked. The !important border also neutralizes the
   core's gray hover !important; dark mode is scoped out and keeps its own bridge. */
html:not([data-theme="dark"]) .template_togglebox input[type="checkbox"]:checked::after,
html:not([data-theme="dark"]) .template_togglebox input[type="radio"]:checked::after {
  border: 1px solid var(--brand-primary, #29A7E6) !important;
  background: var(--brand-primary, #29A7E6);
  box-shadow: inset 0 0 0 2px var(--color-bg, #ffffff);
}

/* Dark mode bridge: global checkbox/radio + selectize controls */
html[data-theme="dark"] .template_togglebox input[type="checkbox"]::after,
html[data-theme="dark"] .template_togglebox input[type="radio"]::after {
  border-color: var(--color-border-strong, #475569);
  background: var(--surface-card-strong, #0f172a);
  box-shadow: inset 0 0 0 2px var(--surface-card-strong, #0f172a);
}

html[data-theme="dark"] .template_togglebox input[type="checkbox"]:checked::after,
html[data-theme="dark"] .template_togglebox input[type="radio"]:checked::after {
  border-color: var(--brand-primary-light, #6BC8EF);
  background: var(--brand-primary, #29A7E6);
  box-shadow: inset 0 0 0 2px var(--surface-card-strong, #0f172a);
}

html[data-theme="dark"] .template_togglebox input[type="checkbox"][disabled]::after,
html[data-theme="dark"] .template_togglebox input[type="radio"][disabled]::after {
  border-color: var(--color-border, #334155);
  background: var(--color-surface, #1e293b);
  box-shadow: none;
}

html[data-theme="dark"] .template_togglebox input[type="checkbox"][disabled]:checked::after,
html[data-theme="dark"] .template_togglebox input[type="radio"][disabled]:checked::after {
  border-color: var(--color-border, #334155);
  background: var(--color-fg-muted, #94a3b8);
  box-shadow: inset 0 0 0 2px var(--color-surface, #1e293b);
}

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(--color-border, #334155);
  box-shadow: var(--shadow-control-inset, inset 0 1px 2px rgba(0,0,0,0.45));
}

html[data-theme="dark"] .template_togglebox .selectize-input > input {
  color: var(--color-fg, #e2e8f0);
}

html[data-theme="dark"] .template_togglebox .selectize-input.focus {
  border-color: var(--brand-primary, #29A7E6);
  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));
}

html[data-theme="dark"] .template_togglebox .selectize-control.single .selectize-input:not(.no-arrow)::after {
  border-top-color: var(--color-fg-muted, #94a3b8);
}

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);
}

html[data-theme="dark"] .template_togglebox .selectize-dropdown,
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(--elevation-popover, 0 10px 28px rgba(2,6,23,0.6));
}

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);
}

html[data-theme="dark"] .template_togglebox .selectize-dropdown .active:not(.selected) {
  background: var(--color-surface, #1e293b);
  color: var(--color-fg-strong, #f8fafc);
}

html[data-theme="dark"] .template_togglebox .selectize-dropdown .selected,
html[data-theme="dark"] .template_togglebox .selectize-dropdown .active {
  background: var(--brand-primary, #29A7E6);
  color: var(--color-fg-inverse, #fff);
}

/* Dark mode bridge: dropdown menus (content-area and topbar) — shared rules */
html[data-theme="dark"] .template_togglebox .section-main .dropdown-menu,
html[data-theme="dark"] .template_togglebox .navbar .dropdown-menu,
html[data-theme="dark"] .template_togglebox .navbar .dropdown-order-items,
html[data-theme="dark"] .template_togglebox .navbar .navbar-search-results {
  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(--elevation-popover, 0 10px 28px rgba(2,6,23,0.6));
}

html[data-theme="dark"] .template_togglebox .section-main .dropdown-item,
html[data-theme="dark"] .template_togglebox .navbar .dropdown-item,
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));
}

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);
}

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);
}

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);
}

html[data-theme="dark"] .template_togglebox .section-main .dropdown-divider,
html[data-theme="dark"] .template_togglebox .navbar .dropdown-divider {
  border-top-color: var(--dropdown-border, var(--color-border, #334155));
}

/* Dark mode bridge: content-area dropdown additions */
html[data-theme="dark"] .template_togglebox .section-main .dropdown-item.text-danger {
  color: var(--color-danger, #D9252E) !important;
}

/* Dark mode bridge: topbar dropdown additions */
html[data-theme="dark"] .template_togglebox .navbar .notifications-drop-title {
  border-bottom-color: var(--dropdown-border, var(--color-border, #334155));
}

html[data-theme="dark"] .template_togglebox .navbar .dropdown-menu .text-dark {
  color: var(--color-fg-strong, #f8fafc) !important;
}

html[data-theme="dark"] .template_togglebox .navbar .dropdown-menu .text-gray,
html[data-theme="dark"] .template_togglebox .navbar .dropdown-menu .text-secondary,
html[data-theme="dark"] .template_togglebox .navbar .dropdown-menu .text-muted {
  color: var(--color-fg-muted, #94a3b8) !important;
}

/* Topbar user-menu trigger: the "Welcome" label keeps the light-mode gray
   (#64748b, ~3.8:1 on the dark topbar) — lift it to the muted foreground token. */
html[data-theme="dark"] .template_togglebox .navbar .navbar-menu-user .text-gray {
  color: var(--color-fg-muted, #94a3b8) !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. */
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. */
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-top-bar .slick-btn--danger-subtle {
  color: var(--color-danger-soft, #f87171);
  border-color: var(--color-danger-soft, #f87171);
}

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-top-bar .slick-btn--danger-subtle:hover {
  background: var(--color-danger, #dc2626);
  color: var(--color-fg-inverse, #fff);
  border-color: var(--color-danger, #dc2626);
}

/* Dark mode bridge: top navbar search input text contrast */
html[data-theme="dark"] .template_togglebox .navbar .navbar-search .input-group input.form-control.form-control-noborders,
html[data-theme="dark"] .template_togglebox .navbar .navbar-search .input-group input.form-control.form-control-noborders:focus,
html[data-theme="dark"] .template_togglebox .navbar .navbar-search .input-group input.form-control.form-control-noborders:hover,
html[data-theme="dark"] .template_togglebox .navbar .navbar-search .input-group input.form-control.form-control-noborders:active {
  color: var(--color-fg, #e2e8f0);
  caret-color: var(--color-fg, #e2e8f0);
  background-color: var(--color-surface, #1e293b);
}

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 */
html[data-theme="dark"] .template_togglebox .navbar .navbar-order {
  background: var(--color-surface, #1e293b);
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* Dark mode bridge: mobile sub-bar background */
html[data-theme="dark"] .template_togglebox .navbar.sub-bar {
  background-color: var(--color-bg, #0f172a) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

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) */
html[data-theme="dark"] .template_togglebox .section-main .form-control.form-control-noborders {
  color: var(--color-fg, #e2e8f0);
  caret-color: var(--color-fg, #e2e8f0);
}

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; }

html[data-theme="dark"] .template_togglebox .nav-tabs .nav-link:hover,
html[data-theme="dark"] .template_togglebox .nav-tabs .nav-link.active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary-dark);
}

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

/* Extra small text */
.template_togglebox .text-xs {
  font-size: 0.70rem;
  line-height: var(--line-height-130, 1.3);
  color: var(--gray-600);
}

/* 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(--gray-100);
  border-radius: 4px;
  font-size: 0.875em;
  color: var(--gray-800);
}

.template_togglebox pre {
  padding: 16px;
  background: var(--gray-100);
  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(--gray-200);
  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(--gray-100) 0%, var(--gray-200) 50%, var(--gray-100) 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) {
  .spinner,
  .skeleton {
    animation: none;
  }
  .skeleton {
    background: var(--gray-200);
  }
}

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

/* Base pill style */
.template_togglebox .badge-pill,
.template_togglebox .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: var(--font-weight-600, 600);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-030, 0.03em);
}

/* Primary - informational, in progress */
.template_togglebox .badge-pill-primary,
.template_togglebox .status-pill-primary {
  background: var(--brand-primary-bg);
  color: var(--brand-primary);
  border: 1px solid var(--brand-primary);
}

/* Success - active, completed, paid */
.template_togglebox .badge-pill-success,
.template_togglebox .status-pill-success {
  background: var(--brand-success-bg);
  color: var(--brand-success);
  border: 1px solid var(--brand-success);
}

/* Danger - error, cancelled, unpaid */
.template_togglebox .badge-pill-danger,
.template_togglebox .status-pill-danger {
  background: var(--brand-danger-bg);
  color: var(--brand-danger);
  border: 1px solid var(--brand-danger);
}

/* Warning - pending, attention needed */
.template_togglebox .badge-pill-warning,
.template_togglebox .status-pill-warning {
  background: var(--brand-warning-bg);
  color: var(--brand-warning);
  border: 1px solid var(--brand-warning);
}

/* Neutral - inactive, closed */
.template_togglebox .badge-pill-secondary,
.template_togglebox .status-pill-secondary {
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--gray-300);
}

/* Running/processing state with pulsing dot */
.template_togglebox .badge-pill-running,
.template_togglebox .status-pill-running {
  background: var(--brand-primary-bg);
  color: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  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%);
  animation: pulse 2s infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .template_togglebox .badge-pill-running::before,
  .template_togglebox .status-pill-running::before {
    animation: none;
  }
}

/* ===========================================
   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: 11px;
  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(--gray-200);
  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(--gray-800);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-200);
}

/* 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(--gray-700);
  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(--brand-danger);
}

/* Help text enhancement */
.template_togglebox .form-text,
.template_togglebox .help-block {
  font-size: 0.75rem;
  color: var(--gray-500);
  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(--gray-400);
  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(--brand-primary);
}

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

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

html[data-theme="dark"] .template_togglebox .badge.bg-secondary {
  background-color: var(--gray-300, #475569) !important;
  color: var(--color-fg-strong, #f8fafc) !important;
}

/* 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;
}

html[data-theme="dark"] .template_togglebox select.form-control {
  color: var(--color-fg-subtle, #cbd5e1);
}

/* 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;
}

html[data-theme="dark"] .template_togglebox textarea.form-control[readonly] {
  color: var(--color-fg-subtle, #cbd5e1);
}

/* Dark mode textarea in 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(--color-border, #334155);
}