/* ==========================================================================
   VPS Factory — branding override layer
   Load AFTER dist/css/custom.min.css (and app.min.css) in header.tpl.
   Purpose: re-skin HostBill's Bootstrap 4 base ("2019_dhcg" / DHC Group
   generic theme) with the VPS Factory brand — without touching Bootstrap's
   structural/layout CSS. This file only overrides color, type, radius and
   shadow, plus adds two new signature components (.vpsf-terminal-widget,
   .vpsf-status-dot).

   Source of truth: DESIGN_TOKENS.md (vpsfactory.eu, opgehaald 2026-07-25).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens — CSS custom properties
   -------------------------------------------------------------------------- */
:root {
  /* Brand colors */
  --vpsf-primary: #008a8a;
  --vpsf-primary-hover: #00a4a4;
  --vpsf-primary-active: #006b6b;
  --vpsf-primary-rgb: 0, 138, 138;

  --vpsf-accent: #00a97a;
  --vpsf-accent-hover: #008e67;
  --vpsf-accent-rgb: 0, 169, 122;

  --vpsf-ink: #0e1b2c;
  --vpsf-ink-soft: #4a5a70;
  --vpsf-bg: #ffffff;
  --vpsf-bg-alt: #f5f7fb;
  --vpsf-border: #e3e8f0;

  --vpsf-danger: #c0392b;
  --vpsf-danger-rgb: 192, 57, 43;
  --vpsf-success: #00a97a;
  --vpsf-warning: #f6bb42; /* geen expliciete token op site, behoud HostBill warning-geel */
  --vpsf-info: #008a8a;
  --vpsf-secondary: #4a5a70;
  --vpsf-dark: #0e1b2c;
  --vpsf-light: #f5f7fb;

  /* Typography */
  --vpsf-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  --vpsf-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Shape */
  --vpsf-radius: 10px;
  --vpsf-radius-lg: 14px;
  --vpsf-radius-sm: 6px;

  /* Shadow */
  --vpsf-shadow-sm: 0 1px 2px rgba(14, 27, 44, 0.06);
  --vpsf-shadow-md: 0 8px 24px rgba(14, 27, 44, 0.08);

  --vpsf-max-width: 1160px;

  /* Re-map Bootstrap's own custom properties (used by some HostBill widgets
     directly via var(--primary) etc., even though most compiled classes
     below use hardcoded hex and need their own overrides too). */
  --blue: var(--vpsf-primary);
  --green: var(--vpsf-accent);
  --red: var(--vpsf-danger);
  --yellow: var(--vpsf-warning);
  --primary: var(--vpsf-primary);
  --secondary: var(--vpsf-secondary);
  --success: var(--vpsf-accent);
  --info: var(--vpsf-primary);
  --warning: var(--vpsf-warning);
  --danger: var(--vpsf-danger);
  --dark: var(--vpsf-ink);
  --light: var(--vpsf-light);
  --font-family-sans-serif: var(--vpsf-font-sans);
  --font-family-monospace: var(--vpsf-font-mono);
}

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */
body,
.btn,
.form-control,
input,
select,
textarea {
  font-family: var(--vpsf-font-sans) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--vpsf-font-sans) !important;
  color: var(--vpsf-ink);
}

body {
  color: var(--vpsf-ink);
}

code, pre, kbd, samp {
  font-family: var(--vpsf-font-mono) !important;
}

/* --------------------------------------------------------------------------
   3. Links & general text/background/border utility classes
   -------------------------------------------------------------------------- */
a {
  color: var(--vpsf-primary);
}
a:hover,
a:focus {
  color: var(--vpsf-primary-active);
}

.text-primary { color: var(--vpsf-primary) !important; }
.text-secondary { color: var(--vpsf-secondary) !important; }
.text-success { color: var(--vpsf-accent) !important; }
.text-info { color: var(--vpsf-primary) !important; }
.text-warning { color: var(--vpsf-warning) !important; }
.text-danger { color: var(--vpsf-danger) !important; }
.text-dark { color: var(--vpsf-ink) !important; }
.text-muted { color: var(--vpsf-ink-soft) !important; }

.bg-primary { background-color: var(--vpsf-primary) !important; }
.bg-secondary { background-color: var(--vpsf-secondary) !important; }
.bg-success { background-color: var(--vpsf-accent) !important; }
.bg-info { background-color: var(--vpsf-primary) !important; }
.bg-warning { background-color: var(--vpsf-warning) !important; }
.bg-danger { background-color: var(--vpsf-danger) !important; }
.bg-dark { background-color: var(--vpsf-ink) !important; }
.bg-light { background-color: var(--vpsf-bg-alt) !important; }

.border-primary { border-color: var(--vpsf-primary) !important; }
.border-secondary { border-color: var(--vpsf-secondary) !important; }
.border-success { border-color: var(--vpsf-accent) !important; }
.border-info { border-color: var(--vpsf-primary) !important; }
.border-warning { border-color: var(--vpsf-warning) !important; }
.border-danger { border-color: var(--vpsf-danger) !important; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--vpsf-radius) !important;
  font-family: var(--vpsf-font-sans);
}
.btn-sm { border-radius: var(--vpsf-radius-sm) !important; }

/* NOTE (ronde 2): op vpsfactory.eu zijn CTA-knoppen ACCENT-GROEN (#00a97a),
   niet teal — teal is op de live site gereserveerd voor koppen, eyebrow-
   labels en stat-cijfers. .btn-primary is de belangrijkste actie-knop in de
   clientarea (opslaan, bestellen, bevestigen, etc.), dus die verdient het
   CTA-gevoel van de site. Vandaar: .btn-primary -> accent-groen i.p.v. teal.
   Teal blijft behouden voor .btn-info, actieve nav/sidebar-items en links,
   zodat het onderscheid "merkkleur voor structuur" vs. "actiekleur voor CTA"
   overeind blijft — precies zoals op de marketing site. */
.btn-primary {
  color: #fff !important;
  background-color: var(--vpsf-accent) !important;
  border-color: var(--vpsf-accent) !important;
}
.btn-primary:hover {
  background-color: var(--vpsf-accent-hover) !important;
  border-color: var(--vpsf-accent-hover) !important;
}
.btn-primary:focus,
.btn-primary.focus {
  background-color: var(--vpsf-accent-hover) !important;
  border-color: var(--vpsf-accent-hover) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--vpsf-accent-rgb), 0.35) !important;
}
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: #007a58 !important;
  border-color: #007a58 !important;
}
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--vpsf-accent) !important;
  border-color: var(--vpsf-accent) !important;
  opacity: 0.55;
}

.btn-outline-primary {
  color: var(--vpsf-primary) !important;
  border-color: var(--vpsf-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
  color: #fff !important;
  background-color: var(--vpsf-primary) !important;
  border-color: var(--vpsf-primary) !important;
}

.btn-success {
  color: #fff !important;
  background-color: var(--vpsf-accent) !important;
  border-color: var(--vpsf-accent) !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success.focus {
  background-color: var(--vpsf-accent-hover) !important;
  border-color: var(--vpsf-accent-hover) !important;
}
.btn-success:active,
.btn-success.active {
  background-color: var(--vpsf-accent-hover) !important;
  border-color: var(--vpsf-accent-hover) !important;
}

.btn-danger {
  color: #fff !important;
  background-color: var(--vpsf-danger) !important;
  border-color: var(--vpsf-danger) !important;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:active,
.btn-danger.active {
  background-color: #a5301f !important;
  border-color: #a5301f !important;
}

.btn-info {
  color: #fff !important;
  background-color: var(--vpsf-primary) !important;
  border-color: var(--vpsf-primary) !important;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background-color: var(--vpsf-primary-hover) !important;
  border-color: var(--vpsf-primary-hover) !important;
}

.btn-warning {
  color: #212529 !important;
  background-color: var(--vpsf-warning) !important;
  border-color: var(--vpsf-warning) !important;
}

.btn-secondary {
  color: #fff !important;
  background-color: var(--vpsf-secondary) !important;
  border-color: var(--vpsf-secondary) !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: #3a4759 !important;
  border-color: #3a4759 !important;
}

.btn-link {
  color: var(--vpsf-primary) !important;
}
.btn-link:hover {
  color: var(--vpsf-primary-active) !important;
}

/* --------------------------------------------------------------------------
   5. Badges
   -------------------------------------------------------------------------- */
.badge {
  border-radius: var(--vpsf-radius-sm) !important;
}
.badge-primary { color: #fff !important; background-color: var(--vpsf-primary) !important; }
.badge-secondary { color: #fff !important; background-color: var(--vpsf-secondary) !important; }
.badge-success { color: #fff !important; background-color: var(--vpsf-accent) !important; }
.badge-info { color: #fff !important; background-color: var(--vpsf-primary) !important; }
.badge-warning { color: #212529 !important; background-color: var(--vpsf-warning) !important; }
.badge-danger { color: #fff !important; background-color: var(--vpsf-danger) !important; }
a.badge-primary:hover,
a.badge-primary:focus { background-color: var(--vpsf-primary-active) !important; }

/* --------------------------------------------------------------------------
   6. Navbar (top bar) — ronde 2, dieper herstijld
   Doel: van donkere generieke Bootstrap-adminbalk naar de lichte, rustige
   navbar-taal van vpsfactory.eu (hoogte 73px, witte achtergrond, dunne
   onderrand, geen shadow). Bestrijkt zowel .navbar-left (het vaste blok
   met logo + mobiele iconen, standaard donkergrijs #464851 in het
   basisthema) als .navbar-body (de balk met zoekbalk/menu), zodat de
   navbar niet langer "half donker, half licht" oogt.
   -------------------------------------------------------------------------- */
.navbar {
  height: 73px !important;
  background-color: var(--vpsf-bg) !important;
}
.navbar .navbar-left {
  background-color: var(--vpsf-bg) !important;
  border-right: 1px solid var(--vpsf-border) !important;
  box-shadow: none !important;
}
.navbar .navbar-left .navbar-brand {
  color: var(--vpsf-ink) !important;
}
.navbar .navbar-left .btn-left-navbar {
  color: var(--vpsf-ink-soft) !important;
}
.navbar .navbar-left .btn-left-navbar:hover,
.navbar .navbar-left .btn-left-navbar:active,
.navbar .navbar-left .btn-left-navbar:focus {
  color: var(--vpsf-primary) !important;
}
.sidenav-toggled .navbar .navbar-left .btn-toggler {
  color: var(--vpsf-ink-soft) !important;
}
.navbar .navbar-body {
  border-bottom: 1px solid var(--vpsf-border) !important;
  background-color: var(--vpsf-bg) !important;
  box-shadow: none !important;
}
.navbar-brand {
  color: var(--vpsf-ink) !important;
}

/* Top menu links: lichter, minder "boxy" dan de standaard verticale
   scheidingslijnen tussen elk item; subtiele hover-achtergrond i.p.v.
   een harde kleurverandering. */
.navbar-light .navbar-nav .nav-link,
.navbar .navbar-body .navbar-menu .nav-link {
  color: var(--vpsf-ink-soft) !important;
  background-color: transparent !important;
  border-left: 1px solid var(--vpsf-border) !important;
  font-family: var(--vpsf-font-sans);
  font-weight: 500 !important;
  font-size: 15.2px !important;
  transition: background-color .15s ease, color .15s ease;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar .navbar-body .navbar-menu .nav-link:hover,
.navbar .navbar-body .navbar-menu .nav-link:focus {
  color: var(--vpsf-accent) !important;
  background-color: var(--vpsf-bg-alt) !important;
}
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--vpsf-accent) !important;
}
.navbar-menu-balance {
  color: var(--vpsf-accent) !important;
}
.navbar .navbar-order-toggler,
.navbar-order .btn.btn-success {
  background-color: var(--vpsf-accent) !important;
  border-color: var(--vpsf-accent) !important;
  border-radius: var(--vpsf-radius) !important;
  font-weight: 600 !important;
}
.navbar .navbar-order .btn.btn-success:hover {
  background-color: var(--vpsf-accent-hover) !important;
  border-color: var(--vpsf-accent-hover) !important;
}

/* Search field inside the navbar */
.navbar .navbar-body .navbar-search-icon,
.navbar .navbar-body .navbar-search-icon .material-icons {
  color: var(--vpsf-ink-soft) !important;
  background-color: #fff !important;
}
.navbar .navbar-body .navbar-search .input-group input {
  color: var(--vpsf-ink) !important;
  font-family: var(--vpsf-font-sans);
}
.navbar .navbar-body .navbar-search .input-group input::placeholder {
  color: var(--vpsf-ink-soft) !important;
  opacity: 1;
}

/* Cart / notification pill badges in the navbar */
.navbar .badge.badge-pill.badge-primary {
  background-color: var(--vpsf-accent) !important;
}

/* Sub-bar (mobile breadcrumb/search/notifications strip under the navbar).
   Markup already forces bg-white inline; we only align icon + divider
   colors with the rest of the brand so it does not look like a leftover
   default-theme fragment on mobile. */
.navbar.sub-bar {
  border-top: 1px solid var(--vpsf-border) !important;
  box-shadow: none !important;
}
.navbar.sub-bar .navbar-menu .nav-link {
  color: var(--vpsf-ink-soft) !important;
}
.navbar.sub-bar .navbar-menu .nav-link:hover {
  color: var(--vpsf-primary) !important;
}

/* --------------------------------------------------------------------------
   7. Sidebar / left-menu — ronde 2, eigen lichte vertaling
   De marketing site heeft geen sidebar-equivalent, dus dit is een bewuste
   eigen keuze i.p.v. een 1-op-1 vertaling: in plaats van de standaard
   donkere HostBill-adminsidebar (#464851, wat DE herkenbare "generieke
   HostBill"-look is) krijgt de sidebar dezelfde lichte, rustige
   basiskleuren als de rest van de site (wit/--vpsf-bg-alt, dunne
   #e3e8f0-randen), met teal (--vpsf-primary) als actieve-status-kleur,
   pill-achtige afgeronde hoeken (radius 10px) op hover/actief, en de
   typografie-schaal van het merk (font-weight 500, 14px voor nav-items).
   -------------------------------------------------------------------------- */
.sidebar {
  background-color: var(--vpsf-bg) !important;
  border-right: 1px solid var(--vpsf-border) !important;
}
.sidebar .sidebar-heading {
  color: var(--vpsf-ink-soft) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em;
}
.sidebar .nav-item.nav-item-head .nav-link {
  background-color: var(--vpsf-bg-alt) !important;
  color: var(--vpsf-ink-soft) !important;
  border-radius: var(--vpsf-radius) !important;
}
.sidebar .nav-item > .nav-link {
  color: var(--vpsf-ink-soft) !important;
  font-family: var(--vpsf-font-sans);
  font-weight: 500 !important;
  font-size: 14px !important;
  border-radius: var(--vpsf-radius) !important;
  transition: background-color .15s ease, color .15s ease;
}
.sidebar .nav-item > .nav-link:hover:not(.active) {
  background-color: var(--vpsf-bg-alt) !important;
  color: var(--vpsf-ink) !important;
}
.sidebar .nav-item > .nav-link.active {
  background-color: rgba(var(--vpsf-primary-rgb), 0.1) !important;
  color: var(--vpsf-primary) !important;
  font-weight: 600 !important;
}
.sidebar .nav-item > .nav-link.active .material-icons {
  color: var(--vpsf-primary) !important;
}
.sidebar .nav-item > .nav-link > .material-icons {
  color: var(--vpsf-ink-soft) !important;
  opacity: .8;
}
.sidebar .nav-item > .nav-link:hover:not(.active) > .material-icons {
  color: var(--vpsf-ink) !important;
  opacity: 1;
}
.sidebar .nav-item > .nav-link .icon-expand {
  color: var(--vpsf-ink-soft) !important;
}
.sidebar .nav-item > .nav-link.nav-link-dropdown:not(.collapsed) {
  background-color: var(--vpsf-bg-alt) !important;
  color: var(--vpsf-ink) !important;
  border-radius: var(--vpsf-radius) var(--vpsf-radius) 0 0 !important;
}

/* Sub-navigation (expandable service groups etc.) — indent with a thin
   guide line instead of a solid dark panel, keeping the light feel. */
.sidebar .nav-item .nav-subnav {
  background-color: transparent !important;
  border-left: 2px solid var(--vpsf-border) !important;
  margin-left: 22px !important;
}
.sidebar .nav-item .nav-subnav .nav-item > .nav-link {
  background-color: transparent !important;
  color: var(--vpsf-ink-soft) !important;
  border-radius: var(--vpsf-radius) !important;
}
.sidebar .nav-item .nav-subnav .nav-item > .nav-link:hover:not(.active) {
  background-color: var(--vpsf-bg-alt) !important;
  color: var(--vpsf-ink) !important;
}
.sidebar .nav-item .nav-subnav .nav-item > .nav-link.active {
  background-color: rgba(var(--vpsf-primary-rgb), 0.1) !important;
  color: var(--vpsf-primary) !important;
  font-weight: 600 !important;
}
.sidebar .nav-item .nav-subnav .nav-item > .nav-link .badge.badge-secondary {
  background-color: var(--vpsf-border) !important;
  color: var(--vpsf-ink-soft) !important;
}

/* "Add / upgrade" call-to-action pill inside the sidebar (e.g. order new
   service) — mirrors the marketing site's primary CTA button styling. */
.sidebar .nav-link.nav-link-add {
  background-color: var(--vpsf-accent) !important;
  color: #fff !important;
  border-radius: var(--vpsf-radius) !important;
  font-weight: 600 !important;
}
.sidebar .nav-link.nav-link-add:hover:not(.active, .disabled) {
  background-color: var(--vpsf-accent-hover) !important;
  color: #fff !important;
}
.sidebar .nav-link.nav-link-add .material-icons {
  color: #fff !important;
}

.sidebar .nav-item > .nav-link .badge {
  background-color: var(--vpsf-accent) !important;
  color: #fff !important;
}

.sidebar-overlay {
  background: var(--vpsf-ink) !important;
}

/* --------------------------------------------------------------------------
   8. Forms — inputs, focus states, checkboxes/radios/switches
   -------------------------------------------------------------------------- */
.form-control,
input:not([type=submit]):not([type=button]):not([type=reset]),
select,
textarea {
  border-radius: var(--vpsf-radius) !important;
  border-color: var(--vpsf-border);
}

.form-control:focus,
input:focus:not([type=submit]):not([type=button]):not([type=reset]),
select:focus,
textarea:focus {
  border-color: var(--vpsf-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--vpsf-primary-rgb), 0.25) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--vpsf-primary) !important;
  background-color: var(--vpsf-primary) !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(var(--vpsf-primary-rgb), 0.25) !important;
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--vpsf-primary) !important;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--vpsf-primary) !important;
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: var(--vpsf-primary) !important;
  background-color: var(--vpsf-primary) !important;
}

/* --------------------------------------------------------------------------
   9. Progress bars
   -------------------------------------------------------------------------- */
.progress {
  border-radius: var(--vpsf-radius) !important;
  background-color: var(--vpsf-bg-alt);
}
.progress-bar {
  background-color: var(--vpsf-primary) !important;
}
.progress-bar-success,
.progress .bg-success {
  background-color: var(--vpsf-accent) !important;
}
.progress-bar-danger,
.progress .bg-danger {
  background-color: var(--vpsf-danger) !important;
}
.progress-bar-warning,
.progress .bg-warning {
  background-color: var(--vpsf-warning) !important;
}

/* --------------------------------------------------------------------------
   10. Tabs / pills
   -------------------------------------------------------------------------- */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--vpsf-primary) !important;
  border-color: var(--vpsf-border) var(--vpsf-border) var(--vpsf-bg) !important;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: var(--vpsf-border) !important;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff !important;
  background-color: var(--vpsf-primary) !important;
  border-radius: var(--vpsf-radius) !important;
}

/* --------------------------------------------------------------------------
   11. Tables
   -------------------------------------------------------------------------- */
.table thead th,
.table thead td {
  background-color: var(--vpsf-bg-alt) !important;
  color: var(--vpsf-ink) !important;
  border-color: var(--vpsf-border) !important;
}
.table td,
.table th {
  border-color: var(--vpsf-border) !important;
}
.table-hover tbody tr:hover {
  background-color: var(--vpsf-bg-alt) !important;
}
.table-primary,
.table-primary > th,
.table-primary > td {
  background-color: rgba(var(--vpsf-primary-rgb), 0.08) !important;
}
.table-hover .table-primary:hover,
.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
  background-color: rgba(var(--vpsf-primary-rgb), 0.14) !important;
}
.table-success,
.table-success > th,
.table-success > td {
  background-color: rgba(var(--vpsf-accent-rgb), 0.08) !important;
}
.table-danger,
.table-danger > th,
.table-danger > td {
  background-color: rgba(var(--vpsf-danger-rgb), 0.08) !important;
}

/* --------------------------------------------------------------------------
   12. Cards
   -------------------------------------------------------------------------- */
.wbox,
.card,
.card.message-box {
  border: 1px solid var(--vpsf-border) !important;
  border-radius: var(--vpsf-radius-lg) !important;
  box-shadow: var(--vpsf-shadow-sm);
}
.wbox .card-header,
.card .card-header,
.wbox .wbox_header,
.card .wbox_header {
  background-color: var(--vpsf-bg-alt) !important;
  border-bottom: 1px solid var(--vpsf-border) !important;
  border-top-left-radius: var(--vpsf-radius-lg) !important;
  border-top-right-radius: var(--vpsf-radius-lg) !important;
  color: var(--vpsf-ink);
}
.no-borders.wbox,
.no-borders.card {
  border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   13. Alerts
   -------------------------------------------------------------------------- */
.alert {
  border-radius: var(--vpsf-radius) !important;
}
.alert.alert-success,
.cloud .alert-success.notice {
  color: #00694e !important;
  background-color: rgba(var(--vpsf-accent-rgb), 0.12) !important;
  border-color: rgba(var(--vpsf-accent-rgb), 0.3) !important;
}
.alert.alert-info,
.cloud .alert-info.notice {
  color: var(--vpsf-primary-active) !important;
  background-color: rgba(var(--vpsf-primary-rgb), 0.1) !important;
  border-color: rgba(var(--vpsf-primary-rgb), 0.28) !important;
}
.alert.alert-danger,
.cloud .alert-danger.notice {
  color: #7a2318 !important;
  background-color: rgba(var(--vpsf-danger-rgb), 0.1) !important;
  border-color: rgba(var(--vpsf-danger-rgb), 0.28) !important;
}
.alert.alert-warning,
.cloud .alert-warning.notice {
  color: #7a5a10 !important;
  background-color: rgba(246, 187, 66, 0.15) !important;
  border-color: rgba(246, 187, 66, 0.35) !important;
}

/* --------------------------------------------------------------------------
   14. Misc radius normalization
   -------------------------------------------------------------------------- */
.btn,
.form-control,
.badge,
.alert,
.progress,
.modal-content,
.dropdown-menu {
  border-radius: var(--vpsf-radius) !important;
}
.card,
.wbox,
.modal-content {
  border-radius: var(--vpsf-radius-lg) !important;
}

/* --------------------------------------------------------------------------
   15. VPS Factory signature — terminal status widget
   Used on dashboard/root page as the visual signature element, mirroring
   the "root@pro-vps:~ $ vpsf status" terminal on vpsfactory.eu.
   Markup expectation (built by the templating engineer):
     <div class="vpsf-terminal-widget">
       <div class="vpsf-terminal-widget__header">
         <span class="vpsf-terminal-widget__dot vpsf-terminal-widget__dot--red"></span>
         <span class="vpsf-terminal-widget__dot vpsf-terminal-widget__dot--yellow"></span>
         <span class="vpsf-terminal-widget__dot vpsf-terminal-widget__dot--green"></span>
         <span class="vpsf-terminal-widget__title">root@pro-vps:~</span>
       </div>
       <div class="vpsf-terminal-widget__body">
         <p><span class="vpsf-terminal-widget__prompt">$</span> vpsf status</p>
         <p><span class="vpsf-terminal-widget__status vpsf-terminal-widget__status--healthy">healthy</span></p>
       </div>
     </div>
   -------------------------------------------------------------------------- */
.vpsf-terminal-widget {
  font-family: var(--vpsf-font-mono);
  background-color: #0e1b2c;
  color: #d7f7ec;
  border-radius: var(--vpsf-radius-lg);
  overflow: hidden;
  box-shadow: var(--vpsf-shadow-md);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.vpsf-terminal-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background-color: #10233a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vpsf-terminal-widget__dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vpsf-terminal-widget__dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.vpsf-terminal-widget__dot--red { background-color: #ff5f56; }
.vpsf-terminal-widget__dot--yellow { background-color: #ffbd2e; }
.vpsf-terminal-widget__dot--green { background-color: #27c93f; }

.vpsf-terminal-widget__title,
.vpsf-terminal-widget__meta {
  margin-left: 8px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  font-family: var(--vpsf-font-mono);
}
.vpsf-terminal-widget__meta {
  margin-left: 0;
}

.vpsf-terminal-widget__body {
  padding: 16px 18px 18px;
  font-size: 0.875rem;
  line-height: 1.9;
}

.vpsf-terminal-widget__body p {
  margin: 0 0 4px;
}

.vpsf-terminal-widget__prompt {
  color: var(--vpsf-accent);
  margin-right: 6px;
}

.vpsf-terminal-widget__cmd {
  color: #d7f7ec;
}

.vpsf-terminal-widget__label {
  display: inline-block;
  min-width: 84px;
  color: #7fa6c4;
}

.vpsf-terminal-widget__value {
  color: #f4fbf9;
}

.vpsf-terminal-widget__statusline {
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.vpsf-terminal-widget__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.vpsf-terminal-widget__status--healthy {
  color: var(--vpsf-accent);
}
.vpsf-terminal-widget__status--healthy::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--vpsf-accent);
  animation: vpsf-pulse 2s infinite;
}
.vpsf-terminal-widget__status--warning { color: var(--vpsf-warning); }
.vpsf-terminal-widget__status--warning::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--vpsf-warning);
}
.vpsf-terminal-widget__status--down { color: var(--vpsf-danger); }
.vpsf-terminal-widget__status--down::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--vpsf-danger);
}

/* Blinking cursor, optional use inside .vpsf-terminal-widget__body */
.vpsf-terminal-widget__cursor {
  display: inline-block;
  width: 7px;
  height: 1em;
  vertical-align: text-bottom;
  background-color: var(--vpsf-accent);
  animation: vpsf-blink 1s steps(1) infinite;
}

/* --------------------------------------------------------------------------
   16. VPS Factory signature — status dot ("alles online" indicator)
   Markup expectation: <span class="vpsf-status-dot"></span> Online
   Modifiers: .vpsf-status-dot--warning / .vpsf-status-dot--danger /
   .vpsf-status-dot--muted for other states (no pulse on non-healthy states).
   -------------------------------------------------------------------------- */
.vpsf-status-dot {
  position: relative;
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--vpsf-accent);
  vertical-align: middle;
}
.vpsf-status-dot::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--vpsf-accent);
  animation: vpsf-pulse-ring 1.8s ease-out infinite;
}
.vpsf-status-dot--warning,
.vpsf-status-dot--warning::after { background-color: var(--vpsf-warning); }
.vpsf-status-dot--danger,
.vpsf-status-dot--danger::after { background-color: var(--vpsf-danger); }
.vpsf-status-dot--muted,
.vpsf-status-dot--muted::after { background-color: var(--vpsf-secondary); }
.vpsf-status-dot--warning::after,
.vpsf-status-dot--danger::after,
.vpsf-status-dot--muted::after {
  animation: none;
  opacity: 0;
}

/* --------------------------------------------------------------------------
   16b. VPS Factory signature — eyebrow + section intro (root.tpl)
   -------------------------------------------------------------------------- */
.vpsf-section-intro {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.vpsf-eyebrow {
  display: inline-block;
  color: var(--vpsf-primary);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.vpsf-section-title {
  font-weight: 700;
  color: var(--vpsf-ink);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.vpsf-section-subtitle {
  color: var(--vpsf-ink-soft);
  font-size: 15px;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   16c. VPS Factory signature — feature cards ("Waarom VPS Factory" stijl)
   Used for the root.tpl action cards (bestellen / klantomgeving / support).
   -------------------------------------------------------------------------- */
.vpsf-feature-grid {
  display: flex;
  flex-wrap: wrap;
}

.vpsf-feature-card {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left;
  background-color: var(--vpsf-bg);
  border: 1px solid var(--vpsf-border) !important;
  border-radius: var(--vpsf-radius-lg) !important;
  box-shadow: var(--vpsf-shadow-sm);
  padding: 32px;
  text-decoration: none !important;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.vpsf-feature-card:hover,
.vpsf-feature-card:focus {
  box-shadow: var(--vpsf-shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}

.vpsf-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background-color: #eafaf5;
  margin-bottom: 18px;
}

.vpsf-feature-icon .material-icons {
  color: var(--vpsf-primary);
  font-size: 24px;
}

.vpsf-feature-title {
  font-weight: 700;
  font-size: 18px;
  color: var(--vpsf-ink);
  margin-bottom: 8px;
}

.vpsf-feature-desc {
  color: var(--vpsf-ink-soft);
  font-size: 14.5px;
  line-height: 1.5;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   16d. VPS Factory signature — dashboard content cards (clientarea/dashboard.tpl)
   Applied to the services table wrapper and the tickets/invoices info-boxes so
   they read as consistent cards, matching the marketing site's card language.
   -------------------------------------------------------------------------- */
.vpsf-dashboard-card {
  background-color: var(--vpsf-bg);
  border: 1px solid var(--vpsf-border) !important;
  border-radius: var(--vpsf-radius-lg) !important;
  box-shadow: var(--vpsf-shadow-sm);
  padding: 20px;
}

.vpsf-dashboard-card.table-responsive {
  padding: 0;
  overflow: hidden;
}

.vpsf-dashboard-card.table-responsive table {
  margin-bottom: 0;
}

.vpsf-subsection-title {
  font-weight: 700;
  color: var(--vpsf-ink);
}

.vpsf-page-title {
  font-weight: 700;
  color: var(--vpsf-ink);
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   17. Keyframes
   -------------------------------------------------------------------------- */
@keyframes vpsf-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--vpsf-accent-rgb), 0.55); }
  70% { box-shadow: 0 0 0 6px rgba(var(--vpsf-accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--vpsf-accent-rgb), 0); }
}

@keyframes vpsf-pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

@keyframes vpsf-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vpsf-terminal-widget__status--healthy::before,
  .vpsf-status-dot::after,
  .vpsf-terminal-widget__cursor {
    animation: none;
  }
}

/* ==========================================================================
   RONDE 2 — global typografie- en spacing-systeem
   Onderstaande secties (18+) zijn toegevoegd in de verdiepende herstijl-ronde.
   Doel: de koppen, knoppen, pill-badges, cards, secties, tabellen en
   formulieren die door de HELE clientarea heen gebruikt worden pixel-exact
   laten aansluiten bij vpsfactory.eu, i.p.v. alleen losse pagina's.
   Bron: DESIGN_TOKENS.md, sectie "Aanvullende exacte metingen".
   ========================================================================== */

/* --------------------------------------------------------------------------
   18. Typography scale — exacte live-site maten
   Overschrijft (met hogere specificiteit / latere bron-volgorde) de generieke
   regel uit sectie 2, die alleen font-family/kleur zette. h4-h6 zijn niet
   apart gemeten op de site maar geëxtrapoleerd op dezelfde schaal-ratio
   (~0.83 per stap) zodat de hiërarchie consistent aanvoelt.
   -------------------------------------------------------------------------- */
h1, .h1 {
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 57.6px !important;
  letter-spacing: -0.48px !important;
  color: var(--vpsf-ink) !important;
  margin-bottom: 0.5em;
}
h2, .h2 {
  font-size: 33.6px !important;
  font-weight: 700 !important;
  line-height: 40.32px !important;
  letter-spacing: -0.2px !important;
  color: var(--vpsf-ink) !important;
  margin-bottom: 0.55em;
}
h3, .h3 {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 31.2px !important;
  letter-spacing: -0.1px !important;
  color: var(--vpsf-ink) !important;
  margin-bottom: 0.5em;
}
h4, .h4 {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 26px !important;
  color: var(--vpsf-ink) !important;
  margin-bottom: 0.5em;
}
h5, .h5 {
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 23px !important;
  color: var(--vpsf-ink) !important;
  margin-bottom: 0.5em;
}
h6, .h6 {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 21px !important;
  color: var(--vpsf-ink) !important;
  margin-bottom: 0.5em;
}

/* Body copy: align with the 15-16px live-site base, tighten default line-height */
body,
.form-control,
.table {
  font-size: 15px;
}
p {
  line-height: 1.6;
}

/* Reuse the exact scale on the signature components the other engineers
   already introduced in section 16b/16d, so page titles / section titles
   read at the correct size instead of inheriting Bootstrap defaults. */
.vpsf-page-title {
  font-size: 28px;
  line-height: 1.25;
}
.vpsf-section-title {
  font-size: 33.6px;
  line-height: 40.32px;
}
.vpsf-subsection-title {
  font-size: 18px;
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   19. Buttons — exact live-site sizing
   Kleurbeslissing staat in sectie 4 (.btn-primary -> accent-groen). Hier
   alleen maatvoering: padding/radius/font-weight/font-size gelijk aan de
   CTA-knoppen op vpsfactory.eu, toegepast op alle .btn's zodat het geheel
   niet aanvoelt als het standaard (compactere) Bootstrap-formaat.
   -------------------------------------------------------------------------- */
.btn {
  padding: 12px 22px !important;
  font-weight: 600 !important;
  font-size: 15.2px !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
}
.btn-sm {
  padding: 7px 14px !important;
  font-size: 13.5px !important;
}
.btn-lg {
  padding: 14px 28px !important;
  font-size: 17px !important;
}
.btn-link {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}
/* Secondary CTA on the live site: white background, thin border, no fill */
.btn-outline-primary,
.btn-outline-secondary {
  background-color: var(--vpsf-bg) !important;
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   20. Pill badges — .vpsf-badge
   Nieuwe, herbruikbare component die de "Alle systemen online"-pill-stijl
   van de live site nabootst. Beschikbaar voor de andere engineers (navbar/
   dashboard) voor bijv. statuslabels, plan-tags, service-status.
   Markup:
     <span class="vpsf-badge"><span class="vpsf-badge__dot"></span>Online</span>
     <span class="vpsf-badge vpsf-badge--warning"><span class="vpsf-badge__dot"></span>Onderhoud</span>
   Modifiers: --success (default/groen), --warning, --danger, --muted, --info(teal)
   -------------------------------------------------------------------------- */
.vpsf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--vpsf-bg);
  border: 1px solid var(--vpsf-border);
  border-radius: 999px;
  color: var(--vpsf-ink);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  padding: 6px 14px 6px 10px;
  white-space: nowrap;
}
.vpsf-badge__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--vpsf-accent);
  flex: 0 0 auto;
}
.vpsf-badge--warning .vpsf-badge__dot { background-color: var(--vpsf-warning); }
.vpsf-badge--danger .vpsf-badge__dot { background-color: var(--vpsf-danger); }
.vpsf-badge--muted .vpsf-badge__dot { background-color: var(--vpsf-secondary); }
.vpsf-badge--info .vpsf-badge__dot { background-color: var(--vpsf-primary); }

/* Also make Bootstrap's own pill utility match, in case a page already uses it */
.badge-pill {
  border-radius: 999px !important;
}

/* --------------------------------------------------------------------------
   21. Cards — global consistency across invoices/services/tickets pages
   Uitgebreid t.o.v. sectie 12: dekt ook de HostBill-specifieke wrapper-
   classes die in clientarea/*.tpl en services/*.tpl gebruikt worden
   (.widget, .info-box, .table-responsive.table-borders.table-radius),
   zodat facturen-, services- en ticketpagina's meteen meeliften zonder dat
   iemand die specifieke templates hoeft aan te passen.
   -------------------------------------------------------------------------- */
.card,
.wbox,
.widget,
.info-box,
.table-responsive.table-borders.table-radius {
  background-color: var(--vpsf-bg);
  border: 1px solid var(--vpsf-border) !important;
  border-radius: var(--vpsf-radius-lg) !important;
  box-shadow: var(--vpsf-shadow-sm) !important;
}
.card-body,
.wbox .wbox_body,
.widget {
  padding: 18px;
}
/* Feature/action cards (root.tpl) already use 32px via .vpsf-feature-card;
   keep the generic clientarea card padding tighter at 18px per the measured
   token, feature-cards are intentionally more generous. */

.card:hover,
.widget:hover,
.info-box:hover {
  box-shadow: var(--vpsf-shadow-md) !important;
}

.info-box-table {
  padding: 0;
  overflow: hidden;
}
.info-box-table .info-box-items {
  padding: 4px 4px 10px;
}

/* table-radius wrapper: remove the double-border look (border already on
   the wrapper, table itself shouldn't add another) */
.table-responsive.table-borders.table-radius table {
  border: 0 !important;
}
.table-responsive.table-borders.table-radius {
  padding: 4px;
}

/* --------------------------------------------------------------------------
   22. Sections & whitespace
   HostBill-admin-panelen voelen van nature compact aan (Bootstrap defaults).
   Hier expliciet meer lucht toevoegen rond hoofdsecties, kopregels en
   card-grids zodat de clientarea net zo "ademt" als de marketing site.
   -------------------------------------------------------------------------- */
.section-account-header {
  margin-bottom: 28px;
}
.section-account {
  margin-bottom: 40px;
}
.section-account + .section-account,
.section-account-header + .section-account {
  margin-top: 8px;
}

.card + .card,
.widget + .widget,
.wbox + .wbox {
  margin-top: 20px;
}

.row.vpsf-grid-spaced,
.vpsf-feature-grid {
  margin-left: -12px;
  margin-right: -12px;
}
.row.vpsf-grid-spaced > [class*="col-"],
.vpsf-feature-grid > [class*="col-"] {
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 24px;
}

/* Give breathing room under page/section titles before the content that follows */
.vpsf-page-title,
.vpsf-section-title {
  margin-bottom: 0.6em;
}
.vpsf-section-intro {
  margin-bottom: 40px;
}

/* Card headers/bodies: a touch more internal padding than Bootstrap default */
.card-header,
.wbox_header {
  padding: 14px 18px;
}

/* --------------------------------------------------------------------------
   23. Tables & forms — subtler, modern surface
   -------------------------------------------------------------------------- */
.table thead th {
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--vpsf-ink-soft) !important;
  border-bottom-width: 1px !important;
  border-top: 0 !important;
  padding: 12px 16px;
}
.table td {
  padding: 12px 16px;
  vertical-align: middle;
  border-color: var(--vpsf-border) !important;
}
.table {
  border-color: var(--vpsf-border);
}

label {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--vpsf-ink);
  margin-bottom: 6px;
}

.form-control,
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]),
select,
textarea {
  padding: 10px 14px !important;
  height: auto !important;
  font-size: 15px;
  border-color: var(--vpsf-border) !important;
  box-shadow: none !important;
}

.form-group {
  margin-bottom: 20px;
}

.input-group-text {
  border-color: var(--vpsf-border) !important;
  background-color: var(--vpsf-bg-alt) !important;
  border-radius: var(--vpsf-radius) !important;
  color: var(--vpsf-ink-soft);
}

/* Softer disabled state, matches the light/airy surface language */
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--vpsf-bg-alt) !important;
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   17. Bugfix: basisthema regel ".root-boxes .root-box span { opacity: 0; }"
   (bedoeld voor oude hover-reveal tekst) treft ook onze nieuwe feature-icon
   badges. Force zichtbaar met hogere specificiteit.
   -------------------------------------------------------------------------- */
.root-boxes .root-box .vpsf-feature-icon,
.root-boxes .root-box .vpsf-feature-icon .material-icons {
  opacity: 1 !important;
}

/* ==========================================================================
   RONDE 3 — facturen & services/VPS-beheer
   HostBill rendert statuslabels als "badge badge-{$status}" met de letterlijke
   backend-statusnaam als classnaam (bv. badge-Paid, badge-Unpaid, badge-Active,
   badge-Suspended). Die classes vielen tot nu toe terug op de generieke
   .badge-stijl (grijs, geen kleurbetekenis). Sectie 24 geeft de statussen die
   op de facturen- en services/VPS-pagina's voorkomen hun eigen zachte
   pill-badge-kleur, exact zoals de "Alle systemen online"-pill op de live
   site: rond (999px), lichte tint-achtergrond, gekleurde tekst — geen volle
   kleurvlakken. Secties 25-26 stylen de rest van de facturen- en
   services/VPS-pagina's (balans-kaart, tabellen, actieknoppen).
   ========================================================================== */

/* --------------------------------------------------------------------------
   24. Status pill-badges — dynamische HostBill statusclasses
   Gedeeld component: elke pagina die "badge badge-{$status}" rendert
   (facturen, services/VPS, dashboard-services, addons, sub-services) profiteert
   hiervan automatisch, zonder dat elke tpl los aangepast hoeft te worden.
   Kleurgroepen volgen de tokens uit sectie 13 (alerts): success/warning/danger
   tint+tekstkleur worden hergebruikt zodat badges en alerts consistent ogen.
   -------------------------------------------------------------------------- */
.badge-Paid,
.badge-Active,
.badge-Recurring,
.badge-Receiptpaid,
.badge-Completed,
.badge-Confirmed {
  color: #00694e !important;
  background-color: rgba(var(--vpsf-accent-rgb), 0.12) !important;
  border: 1px solid rgba(var(--vpsf-accent-rgb), 0.24);
}

.badge-Unpaid,
.badge-Pending,
.badge-PaymentPending,
.badge-Suspended,
.badge-Receiptunpaid,
.badge-Draft,
.badge-Awaiting,
.badge-InProgress {
  color: #7a5a10 !important;
  background-color: rgba(246, 187, 66, 0.18) !important;
  border: 1px solid rgba(246, 187, 66, 0.35);
}

.badge-Overdue,
.badge-Cancelled,
.badge-Terminated,
.badge-Fraud,
.badge-Chargeback,
.badge-Refunded,
.badge-Collections,
.badge-Expired,
.badge-Failed {
  color: #7a2318 !important;
  background-color: rgba(var(--vpsf-danger-rgb), 0.1) !important;
  border: 1px solid rgba(var(--vpsf-danger-rgb), 0.24);
}

/* Any badge whose class is one of the dynamic status names above: force the
   pill shape, override the flat solid-color/6px-radius default from sections
   5 & 14 (source order gives this the win since it comes later in the file). */
.badge-Paid, .badge-Active, .badge-Recurring, .badge-Receiptpaid, .badge-Completed, .badge-Confirmed,
.badge-Unpaid, .badge-Pending, .badge-PaymentPending, .badge-Suspended, .badge-Receiptunpaid, .badge-Draft, .badge-Awaiting, .badge-InProgress,
.badge-Overdue, .badge-Cancelled, .badge-Terminated, .badge-Fraud, .badge-Chargeback, .badge-Refunded, .badge-Collections, .badge-Expired, .badge-Failed {
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  padding: 5px 12px !important;
  letter-spacing: 0.01em;
}

/* The small "date" pill next to the status badge on the invoice detail page
   (badge-light) — align it with the same pill language, muted/neutral tint. */
.badge-light {
  color: var(--vpsf-ink-soft) !important;
  background-color: var(--vpsf-bg-alt) !important;
  border: 1px solid var(--vpsf-border);
  border-radius: 999px !important;
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   25. Facturen — balans-kaart & factuurlijst
   -------------------------------------------------------------------------- */

/* "Huidige balans" kaart bovenaan clientarea/invoices.tpl (via
   components/billing_header.tpl), in dezelfde card-taal als de rest
   (radius-lg, zachte shadow, witte achtergrond, rand). */
.vpsf-balance-card {
  background-color: var(--vpsf-bg);
  border: 1px solid var(--vpsf-border);
  border-radius: var(--vpsf-radius-lg);
  box-shadow: var(--vpsf-shadow-sm);
  padding: 18px 24px;
  gap: 8px;
}
.vpsf-balance-item + .vpsf-balance-item {
  border-left: 1px solid var(--vpsf-border);
  padding-left: 32px;
}
.vpsf-balance-amount {
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* Invoice list + services list: clearer whitespace, subtler row separators,
   hover highlight per row (the tables don't carry Bootstrap's .table-hover
   class in the markup, so target the known table classes directly). */
.invoices-table tbody tr,
.services-table tbody tr,
#dashboard_services_list tbody tr {
  transition: background-color 0.12s ease;
}
.invoices-table tbody tr:hover,
.services-table tbody tr:hover,
#dashboard_services_list tbody tr:hover {
  background-color: var(--vpsf-bg-alt);
}
.invoices-table td,
.services-table td {
  border-top: 1px solid var(--vpsf-border);
}
.invoices-table thead th,
.services-table thead th {
  border-bottom: 2px solid var(--vpsf-border) !important;
}

/* Invoice detail header: status/date pill row + action buttons get a touch
   more breathing room and align with the card below. */
.content-view-details.invoice-btns {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--vpsf-border);
}
.content-view-details.invoice-btns .badge {
  font-size: 13px !important;
}

/* Invoice iframe wrapper: consistent card, plenty of internal white space so
   the embedded invoice body (line items + totals) doesn't look cramped
   against the frame edge. */
.info-box .info-box-items.invoice-iframe {
  padding: 8px;
}

/* --------------------------------------------------------------------------
   26. Services / VPS-beheer
   -------------------------------------------------------------------------- */

/* Service detail header (services/service_details.tpl): name + status pill
   inline, a bit more vertical rhythm than the cramped Bootstrap default. */
.section-account-service ~ *,
section.d-flex.flex-row.flex-wrap.align-items-center.mb-3 {
  margin-bottom: 20px;
}

/* Start/Stop/Reboot/Get status action links (services/left_nav_service.tpl,
   services/services.vps.tpl, ajax/ajax.services.tpl) render as plain <a>
   text links in the base theme. Give them the accent-green CTA treatment
   used site-wide for primary actions, without touching the Smarty markup —
   scoped to the "actions" info line by its label sibling context is not
   reliably selectable in pure CSS, so we target the anchors inside the
   service quick-actions blocks directly via known containers/handlers. */
.bordered-section .p-4 span a[onclick*="process('Start'"],
.bordered-section .p-4 span a[onclick*="process('Stop'"],
.bordered-section .p-4 span a[onclick*="process('Reboot'"],
.bordered-section .p-4 span a[onclick*="process('GetStatus'"] {
  display: inline-flex;
  align-items: center;
  color: #fff !important;
  background-color: var(--vpsf-accent);
  border-radius: var(--vpsf-radius);
  padding: 6px 14px;
  margin: 2px 6px 2px 0;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none !important;
  transition: background-color 0.15s ease;
}
.bordered-section .p-4 span a[onclick*="process('Start'"]:hover,
.bordered-section .p-4 span a[onclick*="process('Stop'"]:hover,
.bordered-section .p-4 span a[onclick*="process('Reboot'"]:hover,
.bordered-section .p-4 span a[onclick*="process('GetStatus'"]:hover {
  background-color: var(--vpsf-accent-hover);
  color: #fff !important;
}
/* "Stop" reads as a disruptive action even though it shares the same markup
   pattern as Start/Reboot — keep it visually distinct (outline instead of
   filled) so clients don't stop a VPS by mistake while scanning quick CTAs. */
.bordered-section .p-4 span a[onclick*="process('Stop'"] {
  background-color: var(--vpsf-bg);
  color: var(--vpsf-danger) !important;
  border: 1px solid rgba(var(--vpsf-danger-rgb), 0.35);
}
.bordered-section .p-4 span a[onclick*="process('Stop'"]:hover {
  background-color: rgba(var(--vpsf-danger-rgb), 0.08);
  color: var(--vpsf-danger) !important;
}

/* Service quick-action "label" cells read as ordinary Bootstrap <small>
   above the buttons; bump their weight/spacing slightly for a card-like feel
   matching the rest of the site's info tiles. */
.bordered-section .service-details-line,
.bordered-section > .row > div > .p-4 {
  border-radius: var(--vpsf-radius);
}
.bordered-section > .row > div > .p-4:hover,
.service-details-line:hover {
  background-color: var(--vpsf-bg-alt);
}

/* Addons / sub-services tables inside service_details.tpl: same soft
   card + row hover language as the invoices/services list tables. */
.section-account-service .table-responsive.table-borders.table-radius,
.service-details {
  margin-top: 4px;
}

/* Sidebar service menu (services/left_nav_service.tpl) "cancel service" link
   already renders text-danger; make it read as a subtle, intentional action
   rather than an accidental-looking red link buried in the nav. */
.leftnavigation-box .nav-link.text-danger {
  font-weight: 600;
}

/* ==========================================================================
   RONDE 3 — navbar + sidebar verdere verfijning
   Doel: de in ronde 2 al lichte/rustige navbar en sidebar minder "kaal"
   laten aanvoelen: subtiele diepte (schaduw i.p.v. alleen een harde lijn),
   verfijnde zoekbalk/dropdowns/hover-states, een elegante animerende
   actief-indicator op topmenu-items, duidelijkere hiërarchie en een
   linkerrand-accent op actieve sidebar-items, en doorlopende, zachte
   150-200ms transitions op alle interactieve elementen. Bouwt uitsluitend
   voort op secties 6/7 (kleuren/basislayout blijven van daar) — hier komt
   alleen diepte, beweging en fijnere detaillering bij.
   Bron: DESIGN_TOKENS.md + live gedrag van vpsfactory.eu (hover/focus-states).
   ========================================================================== */

/* --------------------------------------------------------------------------
   24. Navbar — diepte, zoekbalk, dropdowns, actief-indicator
   -------------------------------------------------------------------------- */

/* Subtiele schaduw i.p.v. alleen een harde onderrand. De border uit sectie 6
   blijft staan (fijne 1px lijn), de schaduw voegt er zachte diepte aan toe
   zodat de navbar "zwevend" oogt boven de content, zoals op vpsfactory.eu
   bij scroll-elevatie. */
.navbar.fixed-top {
  box-shadow: 0 2px 10px rgba(14, 27, 44, 0.05), 0 1px 0 rgba(14, 27, 44, 0.02) !important;
}
.navbar .navbar-body {
  box-shadow: 0 1px 0 rgba(14, 27, 44, 0.02) !important;
}

/* Zoekbalk: rondere vorm, zachte achtergrond in rust, duidelijke maar
   subtiele focus-state in de primary-kleur i.p.v. de kale Bootstrap-default. */
.navbar .navbar-body .navbar-search .input-group {
  background-color: var(--vpsf-bg-alt);
  border: 1px solid var(--vpsf-border);
  border-radius: 999px;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.navbar .navbar-body .navbar-search .input-group:focus-within {
  background-color: var(--vpsf-bg);
  border-color: var(--vpsf-primary);
  box-shadow: 0 0 0 3px rgba(var(--vpsf-primary-rgb), 0.14);
}
.navbar .navbar-body .navbar-search-icon.input-group-text {
  background-color: transparent !important;
  border: 0 !important;
  padding-left: 14px;
}
.navbar .navbar-body .navbar-search .input-group input.form-control {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 4px;
}
.navbar .navbar-body .navbar-search-loader {
  background-color: transparent !important;
}

/* Cart-icoon + hamburger + user-icoon in het vaste linkerblok (mobiel):
   ronde hover-achtergrond i.p.v. alleen een kleurverandering, zodat het
   klikbare gebied ook visueel duidelijk is. */
.navbar .navbar-left .btn-left-navbar {
  border-radius: 999px;
  transition: background-color .18s ease, color .18s ease;
}
.navbar .navbar-left .btn-left-navbar:hover,
.navbar .navbar-left .btn-left-navbar:focus {
  background-color: var(--vpsf-bg-alt) !important;
}

/* Cart / notificatie / gebruikers-icoon in de brede navbar-menu (desktop):
   zelfde ronde hover-vlak, en iets meer ademruimte tussen items dan de
   strakke divider-look uit sectie 6. */
.navbar .navbar-body .navbar-menu .nav-item.dropdown > .nav-link,
.navbar .navbar-body .navbar-menu .nav-item.dropdown > .nav-link.cursor-pointer {
  border-radius: var(--vpsf-radius);
  margin: 10px 2px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.navbar .navbar-body .navbar-menu .nav-item.dropdown > .nav-link:hover,
.navbar .navbar-body .navbar-menu .nav-item.dropdown > .nav-link:focus {
  background-color: var(--vpsf-bg-alt) !important;
}

/* Animerende, subtiele onderlijn-indicator op topmenu-items (i.p.v. alleen
   een kleurverandering) — in accentgroen, groeit in/uit vanuit het midden.
   Alleen op items die een "sectie" voorstellen (niet op de losse divider-
   lijnen), dus toegepast op de directe nav-link binnen elk nav-item. */
.navbar .navbar-body .navbar-menu .nav-item > .nav-link {
  position: relative;
}
.navbar .navbar-body .navbar-menu .nav-item > .nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 2px;
  background-color: var(--vpsf-accent);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width .2s ease;
}
.navbar .navbar-body .navbar-menu .nav-item > .nav-link:hover::after,
.navbar .navbar-body .navbar-menu .nav-item > .nav-link:focus::after,
.navbar .navbar-body .navbar-menu .nav-item.active > .nav-link::after,
.navbar .navbar-body .navbar-menu .nav-item > .nav-link.active::after {
  width: calc(100% - 28px);
}

/* Gebruikersmenu- / cart- / notificatie-dropdown: zachtere, "gelikte"
   kaart-stijl i.p.v. de kale Bootstrap-dropdown, met een korte fade/slide-in
   wanneer Bootstrap de .show klasse toevoegt. */
.navbar .dropdown-menu,
.dropdown-menu {
  border: 1px solid var(--vpsf-border) !important;
  border-radius: var(--vpsf-radius-lg) !important;
  box-shadow: var(--vpsf-shadow-md) !important;
  padding: 8px !important;
  margin-top: 10px !important;
}
.navbar .dropdown-menu.show,
.dropdown-menu.show {
  animation: vpsf-dropdown-in .16s ease;
}
.dropdown-item {
  border-radius: var(--vpsf-radius-sm) !important;
  padding: 9px 12px !important;
  transition: background-color .15s ease, color .15s ease;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--vpsf-bg-alt) !important;
  color: var(--vpsf-ink) !important;
}
.dropdown-item.disabled:hover {
  background-color: transparent !important;
}
.dropdown-item .material-icons {
  transition: color .15s ease;
}
.dropdown-divider {
  border-color: var(--vpsf-border) !important;
  margin: 6px -8px !important;
}

/* Notificatie-/winkelwagen-dropdown headers: iets duidelijker onderscheiden
   van de losse items eronder. */
.notifications-drop-title {
  padding: 6px 8px 10px;
  font-weight: 600;
  color: var(--vpsf-ink);
}

/* Balans-indicator naast het account-icoon: subtiele hover, consistent met
   de rest van de navbar-menu items. */
.navbar-menu-balance {
  transition: color .15s ease;
}

/* --------------------------------------------------------------------------
   25. Sidebar — hiërarchie, actief-accent, iconen, scheiding met content
   -------------------------------------------------------------------------- */

/* Sectiekopjes ("MANAGE" / "ACCOUNT" / "HELP"): kleiner, duidelijk gedempter
   en met iets meer letter-spacing zodat ze evident "meta" zijn t.o.v. de
   navigatie-items eronder, i.p.v. bijna even prominent als een nav-item. */
.sidebar .sidebar-heading {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: #8896aa !important;
  opacity: 1;
}

/* Iconen: consistente afmeting/uitlijning voor alle nav-items, ongeacht of
   het material-icons-element van zichzelf een iets ander baseline-gedrag
   heeft. Voorkomt dat sommige rijen "springen" t.o.v. andere. */
.sidebar .nav-item > .nav-link,
.sidebar .nav-item .nav-subnav .nav-item > .nav-link {
  display: flex !important;
  align-items: center;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.sidebar .nav-item > .nav-link > .material-icons,
.sidebar .nav-item .nav-subnav .nav-item > .nav-link > .material-icons {
  flex: 0 0 auto;
  width: 20px;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  transition: color .18s ease, opacity .18s ease;
}

/* Actieve nav-items: naast de zachte achtergrondtint uit sectie 7 nu ook een
   duidelijke linkerrand-accent in de primary-kleur (via inset box-shadow,
   zodat het geen layout-shift geeft t.o.v. niet-actieve items). */
.sidebar .nav-item > .nav-link.active {
  box-shadow: inset 3px 0 0 0 var(--vpsf-primary) !important;
}
.sidebar .nav-item .nav-subnav .nav-item > .nav-link.active {
  box-shadow: inset 2px 0 0 0 var(--vpsf-primary) !important;
}

/* Hover-state: zachte achtergrond + vloeiende overgang (transition staat al
   op het element hierboven), plus een lichte linkerrand-hint zodat hover en
   actief visueel verwant aanvoelen zonder identiek te zijn. */
.sidebar .nav-item > .nav-link:hover:not(.active) {
  box-shadow: inset 3px 0 0 0 var(--vpsf-border) !important;
}

/* Duidelijkere visuele scheiding tussen sidebar en content: zachte schaduw
   aan de rechterkant bovenop de bestaande 1px-rand uit sectie 7, zodat de
   sidebar net iets "voor" de content ligt i.p.v. een platte lijn. */
.sidebar {
  box-shadow: 3px 0 12px -6px rgba(14, 27, 44, 0.08);
}

/* Sidebar-overlay (mobiel, bij open hamburger-menu): zachte fade i.p.v. een
   harde aan/uit-knip, en een lichte blur zodat de focus duidelijk op de
   sidebar zelf ligt. */
.sidebar-overlay {
  opacity: 0.45;
  transition: opacity .2s ease;
  backdrop-filter: blur(1px);
}

/* Uitklap-pijltje (services-submenu e.d.): vloeiende rotatie i.p.v. een
   abrupte flip wanneer het submenu open/dicht gaat. */
.sidebar .nav-item > .nav-link .icon-expand {
  transition: transform .2s ease;
}
.sidebar .nav-item > .nav-link[aria-expanded="true"] .icon-expand {
  transform: rotate(180deg);
}

/* Subnav-items: zelfde consistente icoon-uitlijning + zachte transitions als
   de hoofd-items, plus een iets kleinere linkerrand-accent (sectie hierboven)
   zodat het "kind"-niveau visueel lichter blijft dan het hoofdniveau. */
.sidebar .nav-item .nav-subnav .nav-item > .nav-link {
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

/* --------------------------------------------------------------------------
   26. Micro-interacties — soepele transitions op interactieve elementen
   Vult secties 6/7 aan (die al transitions hadden op specifieke kleur-
   wisselingen) met dezelfde 150-200ms ease-taal op de overige klikbare
   elementen, zodat niets in de navbar/sidebar/dropdowns hard/abrupt aanvoelt.
   -------------------------------------------------------------------------- */
a,
.btn,
.badge,
.vpsf-badge,
.nav-link,
.nav-tabs .nav-link,
.nav-pills .nav-link,
.card,
.widget,
.info-box,
.custom-control-label::before,
.custom-control-label::after {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .18s ease, opacity .18s ease;
}

/* --------------------------------------------------------------------------
   27. Keyframes (ronde 3)
   -------------------------------------------------------------------------- */
@keyframes vpsf-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar .dropdown-menu.show,
  .dropdown-menu.show {
    animation: none;
  }
  a,
  .btn,
  .badge,
  .vpsf-badge,
  .nav-link,
  .card,
  .widget,
  .info-box,
  .sidebar .nav-item > .nav-link,
  .sidebar .nav-item .nav-subnav .nav-item > .nav-link,
  .navbar .navbar-body .navbar-search .input-group,
  .sidebar-overlay,
  .sidebar .nav-item > .nav-link .icon-expand {
    transition: none;
  }
}

/* ==========================================================================
   RONDE 3 — support & tickets
   support.tpl krijgt dezelfde eyebrow/feature-card-taal als root.tpl (sectie
   16b/16c), tickets.tpl/ajax.tickets.tpl/viewticket.tpl krijgen prominente
   status-pillen (open=teal, beantwoord=accentgroen, gesloten=neutraal grijs),
   een duidelijkere kaart/lijst-stijl per ticketrij, en dieper gestylede
   conversatie-bubbels (klant vs. support visueel onderscheiden).
   ========================================================================== */

/* --------------------------------------------------------------------------
   28. Support-overzicht — links uitgelijnde section-intro variant
   .vpsf-section-intro is in sectie 16b gebouwd voor gecentreerde secties
   (max-width 640px, margin auto). support.tpl gebruikt "— ZELF ONTDEKKEN" en
   "— JOUW TICKETS" als volle-breedte, links uitgelijnde subkopjes tussen de
   content in — dezelfde eyebrow/title-typografie, maar zonder de gecentreerde
   kolombeperking.
   -------------------------------------------------------------------------- */
.vpsf-section-intro.text-left {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.vpsf-section-intro.text-left .vpsf-section-subtitle {
  max-width: 640px;
}

/* h2-variant van .vpsf-section-title (root.tpl gebruikt hem tot nu toe alleen
   op een h1) iets kleiner dan de hero-titel, blijft verder identiek qua taal. */
h2.vpsf-section-title {
  font-size: 22px;
}

/* Kennisbank-/downloads-/nieuws-lijstjes (support.tpl, knowledgebase.tpl,
   root.tpl) delen dezelfde .list-group-item opbouw: icoon + tekst in een
   platte Bootstrap-lijst. Geef ze een zachte hover en wat meer ademruimte
   zodat ze niet als een dichte tabel aanvoelen, consistent met de
   kaart-taal (radius, subtiele hover) van de rest van de site. */
.list-group-item {
  border-color: var(--vpsf-border) !important;
  padding: 12px 18px;
  display: flex;
  align-items: center;
}
.list-group-item:hover,
.list-group-item:focus {
  background-color: var(--vpsf-bg-alt) !important;
  text-decoration: none;
}
.list-group-item:first-child {
  border-top-left-radius: var(--vpsf-radius-lg) !important;
  border-top-right-radius: var(--vpsf-radius-lg) !important;
}
.list-group-item:last-child {
  border-bottom-left-radius: var(--vpsf-radius-lg) !important;
  border-bottom-right-radius: var(--vpsf-radius-lg) !important;
}
.icon-info-color {
  color: var(--vpsf-primary) !important;
}
.icon-btn-color {
  color: currentColor;
}
.btn-view-all {
  display: inline-flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   29. Tickets — status pill-badges (.vpsf-ticket-badge)
   Markup: <span class="badge vpsf-ticket-badge badge-{$ticket.status}">
   toegevoegd in ajax.tickets.tpl (ticketlijst) en support/viewticket.tpl
   (ticketdetail), zonder de onderliggende Smarty-logica aan te raken.
   Kleuren: Open = primary teal, Answered/Client-Reply/In-Progress = accent-
   groen ("wacht op jouw antwoord" leest net zo positief als "beantwoord"),
   Closed/Close = neutraal grijs. Onbekende/overige statussen vallen terug
   op de bestaande generieke badge-stijl.
   -------------------------------------------------------------------------- */
.vpsf-ticket-badge {
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  padding: 5px 14px !important;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vpsf-ticket-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  flex: 0 0 auto;
}
.vpsf-ticket-badge.badge-Open,
.vpsf-ticket-badge.badge-Opened {
  color: #fff !important;
  background-color: var(--vpsf-primary) !important;
}
.vpsf-ticket-badge.badge-Answered,
.vpsf-ticket-badge.badge-Client-Reply,
.vpsf-ticket-badge.badge-Customer-Reply,
.vpsf-ticket-badge.badge-In-Progress {
  color: #fff !important;
  background-color: var(--vpsf-accent) !important;
}
.vpsf-ticket-badge.badge-Closed,
.vpsf-ticket-badge.badge-Close {
  color: var(--vpsf-ink-soft) !important;
  background-color: var(--vpsf-bg-alt) !important;
  border: 1px solid var(--vpsf-border);
}
.vpsf-ticket-badge.badge-Closed::before,
.vpsf-ticket-badge.badge-Close::before {
  background-color: var(--vpsf-ink-soft);
}

/* --------------------------------------------------------------------------
   30. Tickets — lijstweergave (support/listtickets.tpl, support.tpl,
   ajax.tickets.tpl)
   De ticketlijst is een gewone Bootstrap-tabel; hier krijgt elke rij een
   duidelijker "kaart-per-ticket"-gevoel: ruimere rijen, zachte hover, het
   ticketnummer gedempt/monospace (consistent met het terminal-signature-
   element), het onderwerp als de dominante, donkere tekst, en de statuskolom
   rechts uitgelijnd zodat de pill meteen opvalt.
   -------------------------------------------------------------------------- */
.tickets-table.table td {
  padding: 16px;
  vertical-align: middle;
}
.tickets-table.table tbody tr {
  transition: background-color 0.12s ease;
}
.tickets-table.table tbody tr:hover {
  background-color: var(--vpsf-bg-alt);
}
.tickets-table.table tbody tr td {
  border-top: 1px solid var(--vpsf-border);
}
.vpsf-ticket-number {
  font-family: var(--vpsf-font-mono);
  color: var(--vpsf-ink-soft) !important;
  font-size: 13px;
  font-weight: 600;
}
.vpsf-ticket-subject {
  color: var(--vpsf-ink) !important;
  font-weight: 600;
  font-size: 15px;
}
.vpsf-ticket-subject:hover {
  color: var(--vpsf-primary) !important;
}
.vpsf-ticket-date {
  color: var(--vpsf-ink-soft) !important;
  font-size: 13.5px;
}
.tickets-table .overflow-elipsis.inline-row-right {
  text-align: right;
}

/* Tab-slider bovenaan de ticketlijst (Alle / Open / Answered): huidige
   Bootstrap nav-tabs ogen kaal; geef ze de pill-nav-taal die past bij de
   rest van de site (zachte pil bij hover/actief i.p.v. een onderstreepte
   tab-rand). */
.nav-tabs-wrapper .nav-slider .nav-link-slider {
  border-radius: 999px !important;
  padding: 7px 16px !important;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--vpsf-ink-soft) !important;
  border: 0 !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-tabs-wrapper .nav-slider .nav-item.active .nav-link-slider,
.nav-tabs-wrapper .nav-slider .nav-link-slider:hover {
  background-color: var(--vpsf-bg-alt) !important;
  color: var(--vpsf-primary) !important;
}

/* --------------------------------------------------------------------------
   31. Ticket-detail — header + conversatie-bubbels
   (support/viewticket.tpl, klasse ".vpsf-comments" toegevoegd op de wrapper)
   Klant vs. support onderscheiden zich al in de basis-Smarty-logica via
   .comment-client / .comment-admin — hier krijgen die twee varianten een
   duidelijk ander uiterlijk: klantberichten in een neutrale kaart, support-
   antwoorden met een lichte teal-tint en een dunne linkeraccent, zodat een
   ticket in één oogopslag leesbaar is als een chatgesprek.
   -------------------------------------------------------------------------- */
.content-view-details {
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--vpsf-border);
}
.badges-group .badge {
  border-radius: var(--vpsf-radius) !important;
  font-weight: 500 !important;
  color: var(--vpsf-ink-soft) !important;
  background-color: transparent !important;
  border: 1px solid var(--vpsf-border) !important;
}

.vpsf-comments .comment {
  background-color: var(--vpsf-bg);
  border: 1px solid var(--vpsf-border);
  border-radius: var(--vpsf-radius-lg);
  box-shadow: var(--vpsf-shadow-sm);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.vpsf-comments .comment.comment-admin {
  background-color: #eafaf5;
  border-color: rgba(var(--vpsf-accent-rgb), 0.28);
  border-left: 3px solid var(--vpsf-accent);
}
.vpsf-comments .comment.comment-client {
  background-color: var(--vpsf-bg-alt);
  border-left: 3px solid var(--vpsf-border);
}
.vpsf-comments .comment-sender {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--vpsf-ink);
}
.vpsf-comments .comment-sender img.image {
  border-radius: 50%;
  width: 28px;
  height: 28px;
}
.vpsf-comments .comment-body p {
  color: var(--vpsf-ink);
  line-height: 1.6;
  margin-bottom: 0;
}
.vpsf-comments .comment-date {
  font-family: var(--vpsf-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.01em;
  opacity: 0.85;
}
.vpsf-comments .comment + .comment {
  margin-top: 0;
}

/* Reactieformulier onderaan de ticketconversatie: zelfde kaart-taal, met de
   card-header iets duidelijker gescheiden van het tekstveld. */
.message-box.message-box-file.card .card-header {
  font-weight: 700;
  color: var(--vpsf-ink);
  background-color: var(--vpsf-bg-alt);
  border-bottom: 1px solid var(--vpsf-border);
}

/* --------------------------------------------------------------------------
   32. Bugfix: logo-achtergrond + iets groter logo
   Basisthema zet expliciet background-color:#464851 op .navbar-left en
   begrenst .navbar-brand op 80% hoogte. Logo-bestand zelf is nu correct
   transparant (zie install-log), dus alleen de container hoeft gefixt.
   -------------------------------------------------------------------------- */
.navbar .navbar-left .navbar-brand {
  background-color: transparent !important;
  height: 88% !important;
}
.navbar .navbar-left .navbar-brand img {
  max-height: 100% !important;
  max-width: 165px !important;
  width: auto !important;
}

/* --------------------------------------------------------------------------
   33. Compactere, modernere sidebar (smaller, minder dominant)
   Basisthema: .sidebar / .sidebar-wrap / .navbar-left vast op 250px.
   Hier verlaagd naar 212px, met alle gekoppelde layout-offsets meegenomen
   zodat de content-marge en in-/uitklap-animatie synchroon blijven.
   -------------------------------------------------------------------------- */
.sidebar,
.sidebar .sidebar-wrap {
  width: 212px !important;
}
.navbar .navbar-left {
  flex: 0 0 212px !important;
  padding: 0.6rem !important;
}
.sidebar .nav-link {
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
  font-size: 13.5px !important;
}
.sidebar .sidebar-heading {
  font-size: 11px !important;
  letter-spacing: 0.06em;
}
.sidebar .material-icons {
  font-size: 19px !important;
}
@media (min-width: 994px) {
  .body-content, .footer-content {
    margin-left: 212px !important;
  }
  .sidenav-toggled .sidebar {
    margin-left: -212px !important;
  }
  .dropdown-order-items {
    left: 212px !important;
  }
}
@media (max-width: 993px) {
  .sidebar {
    margin-left: -212px !important;
  }
}