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

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

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

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