/* ============================================================
   Versaweb Dark Theme for HostBill 2019
   Overlay — loads after app.min.css via @import in Custom CSS
   Version: 1.0.0 — 2026-03-24
   ============================================================ */

/* ── 1. Font Faces ──────────────────────────────────────────── */

@font-face {
  font-family: 'Proxima Nova';
  src: url('../fonts/ProximaNova-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('../fonts/ProximaNova-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('../fonts/ProximaNova-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('../fonts/ProximaNova-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── 2. Design Tokens ───────────────────────────────────────── */

:root {
  /* Section 59 (2026-06-08): bg stack lifted to harmonic L=12/16/20 tints
   * (HSL 222°, 21%) for a less-heavy / more-open dark theme. 4% gaps between
   * layers — above JND, slightly subtler than the prior 5% gaps. Same family
   * as the original, just brighter. Sections 51/52 set the precedent for this
   * kind of cross-site token retarget; the umbrella CLAUDE.md "Brand colors"
   * table is the canonical reference. */
  --vw-bg-base:        #181C25;
  --vw-bg-card:        #202531;
  --vw-bg-border:      #282F3E;
  --vw-bg-hover:       rgba(40, 47, 62, 0.5);
  --vw-bg-subtle:      rgba(40, 47, 62, 0.3);
  --vw-text-primary:   #edf0f6;
  --vw-text-secondary: #9dafc6;
  /* Token shifts (Section 49 + Section 51 + Section 52):
   *   --vw-text-muted:        #6b7a8d → #849ab2 — was 4.09:1 on bg-card (fails AA).
   *   --vw-brand:             #009bdb → #0077a8 — was 3.13:1 white-on-brand (fails AA).
   *   --vw-brand-hover:       #0088c2 → #006691 — direct Astro light-mode hover token.
   *   --vw-brand-green:       #6bc453 → #388e3c → #00c000 — Rob's preferred brand-green
   *                                                          (2026-05-24, Section 52). Pure
   *                                                          web-green; bright enough to use
   *                                                          as fg-text on dark cards (7.4:1).
   *   --vw-brand-green-hover: #2e7d32 → #00a000 — darker hover paired to new green.
   * Contrast trade-off: white text on #00c000 fails AA (2.48:1), so badge/label
   * surfaces use DARK text (#0d0f14, 8.47:1 AAA). As fg-text on bg-card the new
   * green passes AAA — no lightened-sibling needed (Section 51's #4caf50 retired).
   */
  --vw-text-muted:        #a8b9d0;  /* Section 59: lifted from #849ab2 to clear AA (5.1:1) on new card */
  --vw-brand:             #0077a8;
  --vw-brand-hover:       #006691;
  --vw-brand-text:        #009bdb;  /* Section 59: companion text token (5.8:1 on new card). For COLOR text uses; --vw-brand stays for bg/fill (white-on-brand button case). */
  --vw-brand-green:       #00c000;
  --vw-brand-green-hover: #00a000;
  --vw-danger:         #D9252E;
  --vw-warning:        #F6BB42;
  --vw-radius-btn:     6px;
  --vw-radius-card:    10px;
}

/* ── 3. Global Foundation ───────────────────────────────────── */

body,
body.template_2019,
body.template_2019_custom {
  background-color: var(--vw-bg-base) !important;
  color: var(--vw-text-primary) !important;
  font-family: 'Proxima Nova', 'Helvetica Neue', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: var(--vw-brand);
  color: #fff;
}

a {
  color: var(--vw-brand-text);
}

a:hover,
a:focus {
  color: var(--vw-brand-hover);
}

hr {
  border-top-color: var(--vw-bg-border);
}

.text-secondary {
  color: var(--vw-text-secondary) !important;
}

.text-muted {
  color: var(--vw-text-muted) !important;
}

.text-dark {
  color: var(--vw-text-primary) !important;
}

.text-gray {
  color: var(--vw-text-secondary) !important;
}

.text-primary {
  color: var(--vw-brand-text) !important;
}

.bg-white,
.bg-light {
  background-color: var(--vw-bg-card) !important;
}

/* ── 4. Top Navbar ──────────────────────────────────────────── */

.navbar.fixed-top {
  background-color: var(--vw-bg-card) !important;
  border-bottom: 1px solid var(--vw-bg-border) !important;
}

.navbar .navbar-left {
  background-color: var(--vw-bg-card) !important;
}

/* Section 60 (2026-06-08): navbar-body bg force-override.
 * Post-recompile custom.min.css regained `.navbar .navbar-body { background-color: #464851 }`
 * (from the stock `menu-bg` colorpicker default, not our token override). Same specificity
 * (0,2,0) as our rule but a stale-cache / rule-order quirk was letting #464851 win.
 * !important guarantees our bg-card token applies. Also covers the .navbar-menu .nav-link
 * children which inherit the bg via their own .navbar-body-scoped rule from custom.min.css. */
.navbar .navbar-body {
  background-color: var(--vw-bg-card) !important;
  border-bottom-color: var(--vw-bg-border) !important;
}

.navbar .navbar-body .navbar-menu .nav-link {
  background-color: var(--vw-bg-card) !important;
  border-left-color: var(--vw-bg-border) !important;
}

.navbar .navbar-body .navbar-search .input-group {
  background-color: var(--vw-bg-card) !important;
}

.navbar .navbar-body .navbar-search .input-group .input-group-text {
  background-color: var(--vw-bg-card) !important;
}

.navbar .btn-left-navbar {
  color: var(--vw-text-secondary);
}

.navbar .btn-left-navbar:hover {
  color: var(--vw-text-primary);
}

/* Navbar search */
.navbar-search .form-control {
  background-color: var(--vw-bg-base) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

.navbar-search .form-control::placeholder {
  color: var(--vw-text-muted);
}

/* Navbar order dropdown button — keep green */
.navbar-order .btn-success {
  background-color: var(--vw-brand-green);
  border-color: var(--vw-brand-green);
}

/* Sub-navigation bar */
.sub-navbar {
  background-color: var(--vw-bg-card) !important;
  border-bottom: 1px solid var(--vw-bg-border) !important;
}

.sub-navbar .nav-link {
  color: var(--vw-text-secondary) !important;
}

.sub-navbar .nav-link:hover,
.sub-navbar .nav-link.active {
  color: var(--vw-text-primary) !important;
}

/* ── 5. Left Sidebar ────────────────────────────────────────── */

aside.sidebar,
.sidebar {
  background-color: var(--vw-bg-card) !important;
  border-right: 1px solid var(--vw-bg-border) !important;
}

.sidebar-overlay {
  background-color: rgba(0, 0, 0, 0.6);
}

.sidebar .sidebar-heading {
  color: var(--vw-text-muted) !important;
}

.sidebar .nav-link {
  color: var(--vw-text-secondary) !important;
}

.sidebar .nav-link:hover {
  color: var(--vw-text-primary) !important;
  background-color: var(--vw-bg-hover) !important;
}

.sidebar .nav-link.active {
  color: var(--vw-brand-text) !important;
  background-color: var(--vw-bg-hover) !important;
}

.sidebar .nav-link .material-icons {
  color: inherit;
}

.sidebar .nav-link.active .material-icons {
  color: var(--vw-brand-text);
}

.sidebar .sub-nav {
  background-color: rgba(13, 15, 20, 0.3);
}

.sidebar .sub-nav a {
  color: var(--vw-text-secondary) !important;
}

.sidebar .sub-nav a:hover,
.sidebar .sub-nav a.active {
  color: var(--vw-text-primary) !important;
}

/* Sidebar service labels / badges */
.sidebar .badge {
  background-color: var(--vw-brand);
}

/* ── 6. Main Content Area ───────────────────────────────────── */

.body-content {
  background-color: var(--vw-bg-base);
}

.section-main {
  background-color: var(--vw-bg-base);
}

/* ── 7. Cards ───────────────────────────────────────────────── */

.card {
  background-color: var(--vw-bg-card) !important;
  border: 1px solid var(--vw-bg-border) !important;
  border-radius: var(--vw-radius-card) !important;
}

.card-header {
  background-color: var(--vw-bg-subtle) !important;
  border-bottom: 1px solid var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

.card-body {
  color: var(--vw-text-primary);
}

.card-footer {
  background-color: transparent !important;
  border-top: 1px solid var(--vw-bg-border) !important;
}

.card-head,
.card .card-head {
  background-color: var(--vw-bg-subtle) !important;
  color: var(--vw-text-primary) !important;
}

/* ── 8. Tables ──────────────────────────────────────────────── */

.table {
  color: var(--vw-text-primary);
}

.table thead th {
  background-color: var(--vw-bg-subtle) !important;
  border-bottom: 2px solid var(--vw-bg-border) !important;
  color: var(--vw-text-secondary) !important;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}

.table td,
.table th {
  border-top-color: var(--vw-bg-border) !important;
  border-bottom-color: var(--vw-bg-border) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--vw-bg-hover) !important;
}

.table-striped tbody tr:nth-of-type(even) {
  background-color: transparent;
}

.table-hover tbody tr:hover {
  background-color: var(--vw-bg-hover) !important;
  color: var(--vw-text-primary);
}

.table-bordered {
  border-color: var(--vw-bg-border);
}

.table-bordered td,
.table-bordered th {
  border-color: var(--vw-bg-border) !important;
}

/* ── 9. Forms ───────────────────────────────────────────────── */

.form-control,
.custom-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
select,
textarea {
  background-color: var(--vw-bg-base) !important;
  border: 1px solid var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
  border-radius: var(--vw-radius-btn);
}

.form-control:focus,
.custom-select:focus,
input:focus,
select:focus,
textarea:focus {
  background-color: var(--vw-bg-base) !important;
  border-color: var(--vw-brand) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 155, 219, 0.15) !important;
  color: var(--vw-text-primary) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--vw-text-muted) !important;
  opacity: 0.7;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--vw-bg-border) !important;
  color: var(--vw-text-secondary) !important;
}

label,
.form-label,
.col-form-label,
.form-check-label {
  color: var(--vw-text-primary);
}

.form-label-placeholder {
  color: var(--vw-text-muted) !important;
}

.input-group-text {
  background-color: var(--vw-bg-border) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-secondary) !important;
}

.custom-control-label::before {
  background-color: var(--vw-bg-base);
  border-color: var(--vw-bg-border);
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--vw-brand);
  border-color: var(--vw-brand);
}

/* ── 10. Buttons ────────────────────────────────────────────── */

.btn {
  border-radius: var(--vw-radius-btn) !important;
}

.btn-primary {
  background-color: var(--vw-brand) !important;
  border-color: var(--vw-brand) !important;
  color: #fff !important;
}

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

.btn-success {
  background-color: var(--vw-brand-green) !important;
  border-color: var(--vw-brand-green) !important;
}

.btn-success:hover,
.btn-success:focus {
  background-color: #5bb343 !important;
  border-color: #5bb343 !important;
}

.btn-outline-primary {
  color: var(--vw-brand-text) !important;
  border-color: var(--vw-brand) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--vw-brand) !important;
  color: #fff !important;
}

.btn-secondary,
.btn-default {
  background-color: var(--vw-bg-border) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

.btn-secondary:hover,
.btn-default:hover {
  background-color: #2a3040 !important;
  border-color: #2a3040 !important;
  color: var(--vw-text-primary) !important;
}

.btn-info {
  background-color: var(--vw-brand) !important;
  border-color: var(--vw-brand) !important;
}

.btn-link {
  color: var(--vw-brand-text);
}

.btn-link:hover {
  color: var(--vw-brand-hover);
}

/* ── 11. Dropdowns ──────────────────────────────────────────── */

.dropdown-menu {
  background-color: var(--vw-bg-card) !important;
  border: 1px solid var(--vw-bg-border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

.dropdown-item {
  color: var(--vw-text-secondary) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--vw-bg-hover) !important;
  color: var(--vw-text-primary) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--vw-brand) !important;
  color: #fff !important;
}

.dropdown-item.disabled {
  color: var(--vw-text-muted) !important;
}

.dropdown-divider {
  border-top-color: var(--vw-bg-border) !important;
}

.dropdown-header {
  color: var(--vw-text-muted) !important;
}

/* ── 12. Modals ─────────────────────────────────────────────── */

.modal-content {
  background-color: var(--vw-bg-card) !important;
  border: 1px solid var(--vw-bg-border) !important;
  border-radius: var(--vw-radius-card) !important;
  color: var(--vw-text-primary);
}

.modal-header {
  border-bottom-color: var(--vw-bg-border) !important;
}

.modal-header .modal-title {
  color: var(--vw-text-primary);
}

.modal-header .close,
.modal-header .btn-close {
  color: var(--vw-text-secondary) !important;
  text-shadow: none;
  opacity: 0.7;
}

.modal-body {
  color: var(--vw-text-primary);
}

.modal-footer {
  border-top-color: var(--vw-bg-border) !important;
}

.modal-backdrop.show {
  opacity: 0.75;
}

/* ── 13. Alerts ─────────────────────────────────────────────── */

.alert-info {
  background-color: rgba(0, 155, 219, 0.1) !important;
  border-color: rgba(0, 155, 219, 0.25) !important;
  color: var(--vw-brand-text) !important;
}

.alert-success {
  background-color: rgba(107, 196, 83, 0.1) !important;
  border-color: rgba(107, 196, 83, 0.25) !important;
  color: var(--vw-brand-green) !important;
}

.alert-warning {
  background-color: rgba(246, 187, 66, 0.1) !important;
  border-color: rgba(246, 187, 66, 0.25) !important;
  color: var(--vw-warning) !important;
}

.alert-danger {
  background-color: rgba(217, 37, 46, 0.1) !important;
  border-color: rgba(217, 37, 46, 0.25) !important;
  color: var(--vw-danger) !important;
}

.alert a {
  font-weight: 600;
  text-decoration: underline;
}

/* ── 14. Badges ─────────────────────────────────────────────── */

.badge-primary {
  background-color: var(--vw-brand) !important;
}

.badge-success {
  background-color: var(--vw-brand-green) !important;
}

.badge-info {
  background-color: var(--vw-brand) !important;
}

.badge-secondary {
  background-color: var(--vw-bg-border) !important;
  color: var(--vw-text-secondary) !important;
}

/* ── 15. Pagination ─────────────────────────────────────────── */

.page-link {
  background-color: var(--vw-bg-card) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-secondary) !important;
}

.page-link:hover {
  background-color: var(--vw-bg-hover) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

.page-item.active .page-link {
  background-color: var(--vw-brand) !important;
  border-color: var(--vw-brand) !important;
  color: #fff !important;
}

.page-item.disabled .page-link {
  background-color: var(--vw-bg-base) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-muted) !important;
}

/* ── 16. Breadcrumbs ────────────────────────────────────────── */

.breadcrumb {
  background-color: transparent !important;
}

.breadcrumb-item a {
  color: var(--vw-text-secondary);
}

.breadcrumb-item a:hover {
  color: var(--vw-brand-text);
}

.breadcrumb-item.active {
  color: var(--vw-text-muted);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--vw-text-muted);
}

/* ── 17. Tabs ───────────────────────────────────────────────── */

.nav-tabs {
  border-bottom-color: var(--vw-bg-border) !important;
}

.nav-tabs .nav-link {
  color: var(--vw-text-secondary);
  border-color: transparent;
}

.nav-tabs .nav-link:hover {
  border-color: var(--vw-bg-border) var(--vw-bg-border) transparent;
  color: var(--vw-text-primary);
}

.nav-tabs .nav-link.active {
  background-color: var(--vw-bg-card) !important;
  border-color: var(--vw-bg-border) var(--vw-bg-border) var(--vw-bg-card) !important;
  color: var(--vw-text-primary) !important;
}

/* ── 18. List Groups ────────────────────────────────────────── */

.list-group-item {
  background-color: var(--vw-bg-card) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

.list-group-item:hover {
  background-color: var(--vw-bg-hover) !important;
}

.list-group-item.active {
  background-color: var(--vw-brand) !important;
  border-color: var(--vw-brand) !important;
  color: #fff !important;
}

/* ── 19. Selectize (autocomplete dropdowns) ─────────────────── */

.selectize-input {
  background: var(--vw-bg-base) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

.selectize-input.focus {
  border-color: var(--vw-brand) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 155, 219, 0.15) !important;
}

.selectize-dropdown,
.selectize-dropdown.form-control {
  background: var(--vw-bg-card) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

.selectize-dropdown .active {
  background-color: var(--vw-brand) !important;
  color: #fff !important;
}

/* ── 20. Progress Bars ──────────────────────────────────────── */

.progress {
  background-color: var(--vw-bg-border);
}

.progress-bar {
  background-color: var(--vw-brand);
}

/* ── 21. Tooltips & Popovers ────────────────────────────────── */

.tooltip-inner {
  background-color: var(--vw-bg-card);
  border: 1px solid var(--vw-bg-border);
  color: var(--vw-text-primary);
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: var(--vw-bg-border);
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: var(--vw-bg-border);
}

.popover {
  background-color: var(--vw-bg-card) !important;
  border-color: var(--vw-bg-border) !important;
}

.popover-header {
  background-color: var(--vw-bg-border) !important;
  border-bottom-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

.popover-body {
  color: var(--vw-text-primary) !important;
}

/* ── 22. PNotify (toast notifications) ──────────────────────── */

.ui-pnotify .brighttheme {
  background-color: var(--vw-bg-card);
  border-color: var(--vw-bg-border);
}

.ui-pnotify .brighttheme-info {
  background-color: rgba(0, 155, 219, 0.15);
  border-color: var(--vw-brand);
  color: var(--vw-brand-text);
}

.ui-pnotify .brighttheme-error {
  background-color: rgba(217, 37, 46, 0.15);
  border-color: var(--vw-danger);
  color: var(--vw-danger);
}

/* ── 23. Login / Signup / Password Reset Pages ──────────────── */

.section-signin,
.section-passreminder,
.section-signup {
  background-color: var(--vw-bg-base) !important;
}

.form-credentials,
.form-signin {
  color: var(--vw-text-primary);
}

.form-credentials h1,
.form-credentials h2,
.form-credentials h3,
.form-signin h1 {
  color: var(--vw-text-primary) !important;
}

.form-credentials small {
  color: var(--vw-text-secondary);
}

.form-credentials .form-control {
  background-color: var(--vw-bg-card) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

/* ── 24. Footer ─────────────────────────────────────────────── */

.footer-content {
  background-color: var(--vw-bg-card);
  border-top: 1px solid var(--vw-bg-border);
}

footer.footer,
.footer {
  background-color: var(--vw-bg-card) !important;
}

.footer .footer-box {
  color: var(--vw-text-secondary);
}

.footer .nav-link {
  color: var(--vw-text-secondary) !important;
}

.footer .nav-link:hover {
  color: var(--vw-brand-text) !important;
}

/* ── 25. Service Management Pages ───────────────────────────── */

/* Service info boxes */
.info-item,
.info-item-box {
  background-color: var(--vw-bg-card);
  border-color: var(--vw-bg-border);
}

.info-item .icon-info-color,
.icon-info-color {
  color: var(--vw-text-secondary) !important;
}

/* Status badges */
.badge-active,
.status-active {
  color: var(--vw-brand-green) !important;
}

.badge-suspended,
.status-suspended {
  color: var(--vw-danger) !important;
}

.badge-pending,
.status-pending {
  color: var(--vw-warning) !important;
}

/* Service billing table */
.service-billing-table {
  border-color: var(--vw-bg-border);
}

/* ── 26. Ticket System ──────────────────────────────────────── */

.ticket-reply {
  background-color: var(--vw-bg-card);
  border-color: var(--vw-bg-border);
}

.ticket-reply-staff {
  background-color: var(--vw-bg-subtle);
}

/* ── 27. Invoice Pages ──────────────────────────────────────── */

.invoice-status-paid {
  color: var(--vw-brand-green);
}

.invoice-status-unpaid {
  color: var(--vw-danger);
}

/* ── 28. Cart / Shopping Cart ───────────────────────────────── */

.cart-table {
  background-color: var(--vw-bg-card);
}

.cart-table td,
.cart-table th {
  border-color: var(--vw-bg-border);
}

/* ── 29. Knowledgebase ──────────────────────────────────────── */

.kb-article {
  background-color: var(--vw-bg-card);
  border-color: var(--vw-bg-border);
}

.kb-categories .list-group-item {
  background-color: var(--vw-bg-card) !important;
}

/* ── 30. Loading / Preloader ────────────────────────────────── */

.pageloader-wrapper {
  background-color: var(--vw-bg-base);
}

.main-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

/* ── 31. Chosen Select Plugin ───────────────────────────────── */

.chosen-container .chosen-single {
  background: var(--vw-bg-base) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

.chosen-container .chosen-drop {
  background: var(--vw-bg-card) !important;
  border-color: var(--vw-bg-border) !important;
}

.chosen-container .chosen-results li.highlighted {
  background: var(--vw-brand) !important;
  color: #fff !important;
}

/* ── 32. Material Icons Color Fix ───────────────────────────── */

.material-icons {
  color: inherit;
}

/* ── 33. Scrollbar ──────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--vw-bg-base);
}

::-webkit-scrollbar-thumb {
  background: var(--vw-bg-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--vw-text-muted);
}

/* ── 34. Misc Bootstrap Overrides ───────────────────────────── */

.jumbotron {
  background-color: var(--vw-bg-card) !important;
}

.well {
  background-color: var(--vw-bg-card);
  border-color: var(--vw-bg-border);
}

blockquote {
  border-left-color: var(--vw-brand);
}

code {
  color: #e06c75;
  background-color: var(--vw-bg-border);
  padding: 0.15em 0.4em;
  border-radius: 3px;
}

pre {
  background-color: var(--vw-bg-card);
  border: 1px solid var(--vw-bg-border);
  color: var(--vw-text-primary);
}

/* Collapse/accordion */
.accordion .card {
  border-color: var(--vw-bg-border) !important;
}

.accordion .card-header {
  background-color: var(--vw-bg-subtle) !important;
}

/* Media object */
.media {
  color: var(--vw-text-primary);
}

/* Close buttons */
.close {
  color: var(--vw-text-secondary);
  text-shadow: none;
  opacity: 0.7;
}

.close:hover {
  color: var(--vw-text-primary);
  opacity: 1;
}

/* ── 35. Hotfixes — post-SCSS-compile residuals ─────────────── */

/* Login form credentials box — border was hardcoded in SCSS */
.form-credentials:not(.form-credentials-modal) {
  border-color: var(--vw-bg-border) !important;
  background-color: var(--vw-bg-card) !important;
}

/* Login modal */
.form-credentials-modal {
  background-color: var(--vw-bg-card) !important;
  color: var(--vw-text-primary);
}

/* Semantic UI search — hardcoded white backgrounds in SCSS */
.ui.search > .prompt {
  background: var(--vw-bg-base) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

.ui.search > .results {
  background: var(--vw-bg-card) !important;
  border-color: var(--vw-bg-border) !important;
}

.ui.search > .results .result {
  color: var(--vw-text-primary);
  border-bottom-color: var(--vw-bg-border);
}

.ui.search > .results .result:hover,
.ui.search > .results .result.active {
  background: var(--vw-bg-hover) !important;
}

/* Card-header/footer white backgrounds from SCSS */
.card-header,
.wbox .card-header {
  background-color: var(--vw-bg-subtle) !important;
  border-bottom-color: var(--vw-bg-border) !important;
}

/* wbox_header — legacy header class used by billing_contact_select module and other old widgets */
.wbox_header,
.wbox .wbox_header {
  background-color: var(--vw-bg-subtle) !important;
  border-bottom-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

.wbox_content,
.wbox .wbox_content {
  color: var(--vw-text-primary) !important;
}

/* Billing contact select on order form — native select inside wbox */
.wbox select.left,
.wbox select[name="cart_billing_contact_id"] {
  background-color: var(--vw-bg-base) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
  padding: 0.4em 0.8em;
  border-radius: 0.25rem;
}

.card-footer,
.wbox .card-footer {
  background-color: transparent !important;
  border-top-color: var(--vw-bg-border) !important;
}

/* wbox borders */
.wbox,
.card.message-box {
  background-color: var(--vw-bg-card) !important;
  border-color: var(--vw-bg-border) !important;
}

/* Breadcrumb — hardcoded EBECF0 bg in SCSS */
.breadcrumb {
  background-color: var(--vw-bg-card) !important;
}

/* Input group addon bg — EBECF0 in SCSS */
.input-group-text {
  background-color: var(--vw-bg-card) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-secondary) !important;
}

/* Custom file input browse button */
.custom-file-label::after {
  background-color: var(--vw-bg-card) !important;
  color: var(--vw-text-primary) !important;
}

/* Dropdown divider */
.dropdown-divider {
  border-top-color: var(--vw-bg-border) !important;
}

/* Tab borders — EBECF0 hardcoded in SCSS */
.nav-tabs {
  border-bottom-color: var(--vw-bg-border) !important;
}

.nav-tabs .nav-link.active {
  background-color: var(--vw-bg-card) !important;
  border-color: var(--vw-bg-border) var(--vw-bg-border) var(--vw-bg-card) !important;
  color: var(--vw-text-primary) !important;
}

/* Page-link (pagination) — hardcoded #fff bg */
.page-link {
  background-color: var(--vw-bg-card) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-brand-text) !important;
}

.page-item.active .page-link {
  background-color: var(--vw-brand) !important;
  border-color: var(--vw-brand) !important;
  color: #fff !important;
}

.page-item.disabled .page-link {
  background-color: var(--vw-bg-base) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-muted) !important;
}

/* HR hardcoded in SCSS */
hr {
  border-top-color: var(--vw-bg-border) !important;
}

/* ── 36. Post-compile form control fixes ────────────────────── */

/* Form control text color — SCSS compiled #495057 which is unreadable on dark */
.form-control {
  color: var(--vw-text-primary) !important;
  border-color: var(--vw-bg-border) !important;
}

.form-control:focus {
  color: var(--vw-text-primary) !important;
  border-color: var(--vw-brand) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 155, 219, 0.15) !important;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--vw-bg-base) !important;
  color: var(--vw-text-muted) !important;
  border-color: var(--vw-bg-border) !important;
}

/* Native select elements */
select.form-control,
select {
  color: var(--vw-text-primary) !important;
  background-color: var(--vw-bg-base) !important;
  border-color: var(--vw-bg-border) !important;
}

select.form-control option,
select option {
  background-color: var(--vw-bg-card);
  color: var(--vw-text-primary);
}

/* Selectize (billing contact, other dropdowns) — use background shorthand to fully override selectize.bootstrap4.css */
.selectize-input,
.selectize-control .selectize-input,
.selectize-control .selectize-input.full,
.selectize-control .selectize-input.has-items,
.selectize-control.single .selectize-input.input-active {
  background: var(--vw-bg-base) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

.selectize-input.focus {
  border-color: var(--vw-brand) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 155, 219, 0.15) !important;
}

.selectize-dropdown,
.selectize-dropdown.form-control {
  background: var(--vw-bg-card) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3) !important;
}

.selectize-dropdown .option,
.selectize-dropdown [data-selectable] {
  color: var(--vw-text-secondary) !important;
}

.selectize-dropdown .option:hover,
.selectize-dropdown .active:not(.selected) {
  background-color: var(--vw-bg-hover) !important;
  color: var(--vw-text-primary) !important;
}

.selectize-dropdown .selected {
  background-color: var(--vw-brand) !important;
  color: #fff !important;
}

.selectize-input.dropdown-active::before {
  background: var(--vw-bg-border) !important;
}

.selectize-control .selectize-input.disabled {
  background: var(--vw-bg-card) !important;
  opacity: 0.6;
}

/* Chosen plugin (alternate dropdown widget) */
.chosen-container .chosen-single,
.chosen-container .chosen-choices {
  background: var(--vw-bg-base) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

.chosen-container .chosen-drop {
  background: var(--vw-bg-card) !important;
  border-color: var(--vw-bg-border) !important;
}

.chosen-container .chosen-results li {
  color: var(--vw-text-secondary) !important;
}

.chosen-container .chosen-results li.highlighted {
  background-color: var(--vw-brand) !important;
  color: #fff !important;
}

/* Bootstrap custom-select */
.custom-select {
  background-color: var(--vw-bg-base) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

/* Textarea */
textarea.form-control {
  color: var(--vw-text-primary) !important;
  background-color: var(--vw-bg-base) !important;
  border-color: var(--vw-bg-border) !important;
}

/* #dee2e6 border cleanup — Bootstrap's default that SCSS didn't override */
.border,
.border-top,
.border-bottom,
.border-left,
.border-right {
  border-color: var(--vw-bg-border) !important;
}

/* List group borders */
.list-group-item {
  background-color: var(--vw-bg-card) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

.list-group-item.active {
  background-color: var(--vw-brand) !important;
  border-color: var(--vw-brand) !important;
}

/* ── 37. Contacts / Profiles page & nav-tabs-wrapper fixes ── */

/* Table wrapper borders — hardcoded #EBECF0 in compiled SCSS */
.table-borders {
  border-color: var(--vw-bg-border) !important;
}

.table-radius {
  border-radius: 6px;
}

/* Nav-tabs-wrapper — compiled SCSS has white gradients and dark text */
.nav-tabs-wrapper .nav-tabs-arrow-left {
  background: linear-gradient(to right, var(--vw-bg-base) 0%, var(--vw-bg-base) 65%, rgba(13, 15, 20, 0) 100%) !important;
  color: var(--vw-text-muted) !important;
}

.nav-tabs-wrapper .nav-tabs-arrow-right {
  background: linear-gradient(to left, var(--vw-bg-base) 0%, var(--vw-bg-base) 65%, rgba(13, 15, 20, 0) 100%) !important;
  color: var(--vw-text-muted) !important;
}

/* Nav-tabs link colors — must match compiled specificity */
.nav-tabs-wrapper .nav-tabs li.nav-item a.nav-link {
  color: var(--vw-text-secondary) !important;
}

.nav-tabs-wrapper .nav-tabs li.nav-item.active a.nav-link {
  color: var(--vw-text-primary) !important;
  font-weight: 500;
}

.nav-tabs-wrapper .nav-tabs li.nav-item:hover:not(.active) a.nav-link {
  color: var(--vw-text-primary) !important;
}

/* Slider indicator — keep brand color */
.nav-tabs-wrapper .nav-tabs .slider .indicator {
  background-color: var(--vw-brand) !important;
}

/* Service details borders — #EBECF0 hardcoded */
.section-account .service-details .service-details-line {
  border-bottom-color: var(--vw-bg-border) !important;
}

/* Tickets table — sort icons and header colors */
.tickets-table thead th {
  background-color: var(--vw-bg-hover) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-secondary) !important;
}

.tickets-table thead th a {
  color: var(--vw-text-secondary) !important;
}

.tickets-table thead th a:hover {
  color: var(--vw-text-primary) !important;
}

.tickets-table tbody td {
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

.tickets-table tbody td a {
  color: var(--vw-brand-text) !important;
}

.tickets-table tbody td a:hover {
  color: var(--vw-brand-hover) !important;
}

/* Sort icon color */
.sort-icon {
  color: var(--vw-text-muted) !important;
}

/* Section account heading */
.section-account-header h1 {
  color: var(--vw-text-primary) !important;
}

/* Dropdown more_vert button in table rows */
.btn-group .btn[data-toggle="dropdown"] {
  color: var(--vw-text-secondary) !important;
  background: transparent !important;
  border-color: transparent !important;
}

.btn-group .btn[data-toggle="dropdown"]:hover {
  color: var(--vw-text-primary) !important;
}

/* Billing contact card — select specificity boost */
#billing_contact_id {
  background-color: var(--vw-bg-base) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

#billing_contact_id:focus {
  border-color: var(--vw-brand) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 155, 219, 0.15) !important;
}

/* Card h3/h5 headings */
.card h3,
.card h5 {
  color: var(--vw-text-primary) !important;
}

/* Profile/team status badge — inline EBECF0 badge backgrounds */
.badge {
  border-color: var(--vw-bg-border) !important;
}

/* General h5 on page */
h5.my-4 {
  color: var(--vw-text-primary) !important;
}

/* ── 38. Preloader / updater overlay ────────────────────────── */

/* Dark overlay instead of bright #8fdeff light blue */
#preloader {
  background: rgba(13, 15, 20, 0.85) url("../images/preloader-dark.svg") no-repeat center center !important;
  opacity: 0.9 !important;
  border-radius: var(--vw-radius-card);
}

/* Order form preloader — same dark treatment */
.orderpage #preloader {
  background: rgba(13, 15, 20, 0.85) url("/templates/vw_2019_custom/dist/images/preloader-dark.svg") no-repeat center center !important;
  opacity: 0.9 !important;
  border-radius: var(--vw-radius-card);
}

/* Cart preloader dots — brand blue (wizard order form) */
.cart_preloader .cart_preloader_line {
  background-color: var(--vw-brand) !important;
}

/* ── 39. Sidebar menu readability ───────────────────────────── */

/* Bump nav-link font size from 0.83rem (~13px) to 0.93rem (~15px) */
.sidebar .nav-item > .nav-link {
  font-size: 0.93rem !important;
  line-height: 1.5 !important;
}

/* Sub-headings — bump from 0.75rem to 0.8rem */
.sidebar .sidebar-heading {
  font-size: 0.8rem !important;
  letter-spacing: 0.04em;
}

/* Head items (section labels) — bump from 0.83rem */
.sidebar .nav-item.nav-item-head .nav-link {
  font-size: 0.88rem !important;
}

/* Add-link style */
.sidebar .nav-link.nav-link-add {
  font-size: 0.88rem !important;
}

/* ====================================================================
   Section 40 — Proxmox / Cloud Hosting module dark overrides
   Covers: cloudhosting/styles.css, clientarea.css, and module templates
   ==================================================================== */

/* -- Base text color -- */
.cloud {
  color: var(--vw-text-primary) !important;
  font-size: 14px;
}

/* -- Main content area — remove white bg and image -- */
#content-cloud {
  background: transparent !important;
}

/* -- Section header bar (Server details, Templates, Snapshots, etc.) -- */
#content-cloud .header-bar {
  background: var(--vw-bg-subtle) !important;
  border: 1px solid var(--vw-bg-border) !important;
  border-radius: 0.43rem 0.43rem 0 0;
}

#content-cloud .header-bar h3 {
  color: var(--vw-text-primary) !important;
  font-size: 16px !important;
  text-shadow: none !important;
}

/* Sub-tabs in header bar (Snapshots / Schedule) */
#content-cloud .header-bar .sub-ul a {
  color: rgba(237, 240, 246, 0.6) !important;
  text-shadow: none !important;
}

#content-cloud .header-bar .sub-ul a.active,
#content-cloud .header-bar .sub-ul a:hover {
  color: #fff !important;
}

/* -- Content bar (main content below header-bar) -- */
#content-cloud .content-bar {
  background-color: var(--vw-bg-card) !important;
  border-color: var(--vw-bg-border) !important;
  border-radius: 0 0 0.43rem 0.43rem;
  color: var(--vw-text-primary) !important;
}

#content-cloud .nopadding {
  background: var(--vw-bg-base) !important;
}

/* -- VM detail tables (.ttable) -- */
.ttable {
  color: var(--vw-text-primary) !important;
}

table.ttable tr td {
  background: var(--vw-bg-card) !important;
  border-bottom-color: var(--vw-bg-border) !important;
  border-top-color: transparent !important;
  color: var(--vw-text-primary) !important;
  font-size: 14px !important;
  padding: 12px 8px !important;
}

/* Labels (Status, Hostname, Username, etc.) */
table.ttable tr td b,
table.ttable tr td strong {
  color: var(--vw-text-secondary) !important;
  font-size: 13px !important;
}

table.ttable tr.lst td {
  border-bottom-color: var(--vw-bg-border) !important;
}

/* -- Data tables (.tonapp, .data-table) — list views, snapshots, etc. -- */
table.tonapp,
table.data-table {
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

.tonapp thead tr,
table.data-table thead tr {
  background: var(--vw-bg-subtle) !important;
  color: var(--vw-text-secondary) !important;
}

.tonapp tr,
table.data-table tr {
  background: var(--vw-bg-card) !important;
}

.tonapp th,
table.data-table th,
table.data-table thead td {
  text-shadow: none !important;
  color: var(--vw-text-secondary) !important;
  font-size: 13px !important;
  border-bottom-color: var(--vw-bg-border) !important;
}

.tonapp td,
table.data-table td {
  border-bottom-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
  font-size: 14px !important;
}

table.data-table tbody td {
  background: var(--vw-bg-card) !important;
  border-color: var(--vw-bg-border) !important;
}

table.data-table tbody tr:hover td {
  background-color: var(--vw-bg-hover) !important;
}

table.data-table.backups-list thead td {
  background: var(--vw-bg-subtle) !important;
  color: var(--vw-text-secondary) !important;
}

/* -- Side navigation (#nav-onapp) -- */
#nav-onapp h1,
.cloud-header h1 {
  color: var(--vw-text-primary) !important;
  font-size: 20px !important;
}

#nav-onapp a.apeded,
.cloud-nav a.apeded,
.cloud-header a.apeded {
  color: var(--vw-text-secondary) !important;
}

#nav-onapp li a,
.cloud-nav .menu-item > a {
  background: var(--vw-bg-card) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-secondary) !important;
  text-shadow: none !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

#nav-onapp li a:hover,
.cloud-nav .menu-item:hover > a {
  background: var(--vw-bg-hover) !important;
  color: var(--vw-text-primary) !important;
}

#nav-onapp li.current-menu-item a,
.cloud-nav .menu-item.current-menu-item > a {
  background: var(--vw-brand) !important;
  border-color: var(--vw-brand) !important;
  color: #fff !important;
  text-shadow: none !important;
}

#nav-onapp ul,
.cloud-nav .level-1 {
  border-bottom-color: var(--vw-bg-border) !important;
}

.cloud-nav .menu-item .dropdown-menu > li > a:hover,
.cloud-nav .menu-item .dropdown-menu > li > a:focus,
.cloud-nav .menu-item .dropdown-menu > .active > a {
  background: var(--vw-brand) !important;
}

/* -- VM action buttons toolbar (Serial console, Reboot, More) -- */
ul#vm-menu {
  background: var(--vw-bg-card) !important;
  border: 1px solid var(--vw-bg-border) !important;
  border-radius: 0.43rem;
  padding: 6px 10px;
}

ul#vm-menu li a,
ul#vm-menu > a {
  color: var(--vw-text-primary) !important;
  font-size: 13px !important;
  text-decoration: none;
}

ul#vm-menu li a:hover,
ul#vm-menu > a:hover {
  color: var(--vw-brand-text) !important;
}

/* -- Password input group -- */
.pw-input-group > .form-control {
  background-color: var(--vw-bg-base) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

.pw-input-group-append .btn {
  background-color: var(--vw-bg-subtle) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

.pw-input-group-append .btn:hover {
  background-color: var(--vw-bg-hover) !important;
}

/* -- Cloud module buttons -- */
.cloud .btn-default,
#content-cloud .btn-default {
  background-color: var(--vw-bg-subtle) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

.cloud .btn-default:hover,
#content-cloud .btn-default:hover {
  background-color: var(--vw-bg-hover) !important;
}

/* -- Help block / muted text in cloud -- */
.cloud .help-block,
#content-cloud .help-block {
  color: var(--vw-text-secondary) !important;
  font-size: 14px !important;
}

/* -- Tags section -- */
.vm-details-label b,
.vm-details-label strong {
  color: var(--vw-text-secondary) !important;
}

.vm-details-value {
  color: var(--vw-text-primary) !important;
}

.vm-details-tags em {
  color: var(--vw-text-muted) !important;
}

.vm-details-part.part-full {
  background: transparent !important;
}

/* -- Interface status badges --
 * Section 52: brand-green retargeted to #00c000 (Rob's pick). New green passes
 * AAA as fg-text on bg-card (7.4:1), so the Section 51 lightened-sibling hack
 * (#4caf50) is no longer needed — collapse to the token. */
.interface-status.up {
  color: var(--vw-brand-green) !important;
  background: rgba(0, 192, 0, 0.15) !important;
}

.interface-status.down {
  color: #e85746 !important;
  background: rgba(232, 87, 70, 0.15) !important;
}

/* -- Cloud module modals -- */
.cloud .modal-header,
.cloud .modal-body,
.cloud .modal-footer,
#content-cloud .modal-header,
#content-cloud .modal-body,
#content-cloud .modal-footer {
  background-color: var(--vw-bg-card) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

.cloud .modal-header h2,
.cloud .modal-header h3 {
  color: var(--vw-text-primary) !important;
}

/* -- File tree (backups browser) -- */
.file-tree .selected {
  background: var(--vw-bg-hover) !important;
}

.file-tree .tree {
  border-left-color: var(--vw-text-muted) !important;
}

.file-tree .tree-end::before,
.file-tree .tree-branch::before {
  border-color: var(--vw-text-muted) !important;
}

/* -- Firewall sort handles -- */
.firewall-rule .sort-handle::before {
  border-bottom-color: var(--vw-text-secondary) !important;
}

.firewall-rule .sort-handle::after {
  border-top-color: var(--vw-text-secondary) !important;
}

/* -- Sortable ghost (drag state) -- */
.sortable-ghost {
  background: var(--vw-bg-hover) !important;
}

/* -- Slider labels -- */
span.slabel {
  color: var(--vw-text-primary) !important;
}

/* -- Backup usage progress bar -- */
.backup-usage-description {
  color: var(--vw-text-primary) !important;
}

/* -- Checker/form rows in .nopadding -- */
.nopadding .checker td,
.table-checker td {
  border-top-color: var(--vw-bg-border) !important;
  border-bottom-color: var(--vw-bg-border) !important;
  background: var(--vw-bg-base) !important;
}

/* -- State switch visual enhancements -- */
.state_switch.off::before,
.state_switch.on::after {
  background: var(--vw-bg-subtle) !important;
  border-top-color: var(--vw-bg-border) !important;
}

/* -- Links inside cloud module -- */
.cloud a:not(.btn) {
  color: var(--vw-brand-text) !important;
}

.cloud a:not(.btn):hover {
  color: var(--vw-brand-hover) !important;
}

/* -- Proxmox chosen dropdown overrides -- */
.cloud .chzn-container .chzn-results li {
  color: var(--vw-text-primary) !important;
}

.cloud .chzn-container .chzn-results li.highlighted {
  background: var(--vw-brand) !important;
  color: #fff !important;
}


/* ====================================================================
   Section 41 — Brand consistency with versaweb.com
   Aligns HostBill component styling with the Astro marketing site.
   ==================================================================== */

/* -- Buttons: semibold weight + spacious padding (matches Astro Button.astro) -- */
.btn {
  font-weight: 600 !important;
  padding: 0.625rem 1.25rem !important;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.btn-sm {
  padding: 0.375rem 0.75rem !important;
}

.btn-lg {
  padding: 0.75rem 1.5rem !important;
}

/* -- Card hover: subtle brand border tint (matches Astro ServiceCard) -- */
.card {
  transition: border-color 0.2s ease !important;
}

.card:hover {
  border-color: rgba(0, 155, 219, 0.4) !important;
}

/* -- Links & interactive elements: smooth transitions -- */
a,
.nav-link,
.sidebar .nav-item > .nav-link,
.dropdown-item {
  transition: color 0.15s ease, background-color 0.15s ease !important;
}

/* -- Focus-visible: outline approach (matches Astro :focus-visible) -- */
:focus-visible {
  outline: 2px solid var(--vw-brand) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

/* Buttons and inputs keep their own focus style */
.btn:focus-visible,
.form-control:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 155, 219, 0.25) !important;
}

/* -- Custom scrollbar (matches Astro global.css) -- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--vw-bg-base);
}

::-webkit-scrollbar-thumb {
  background: var(--vw-bg-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--vw-text-muted);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--vw-bg-border) var(--vw-bg-base);
}

/* -- Body line-height: closer to Astro's 1.6 -- */
body {
  line-height: 1.5 !important;
}


/* -- Logo sizing: login page and navbar -- */
.form-credentials .image.size-lg,
.form-credentials .image.size-hg {
  max-width: 250px !important;
}

.navbar-brand img {
  max-height: 36px !important;
  width: auto !important;
}


/* ====================================================================
   Section 42 — Status badge fixes (Active badge readability)
   White text on colored backgrounds for all status badges
   ==================================================================== */

.badge-Active,
.badge-active,
.badge-On,
.badge-on,
span.badge[class*="badge-Active"],
span.badge[class*="badge-On"] {
  background-color: var(--vw-brand-green) !important;
  /* Section 52 update: green brightened (#388e3c → #00c000, Rob's pick).
   * White text on #00c000 = 2.48:1 (fails AA). Dark text = 8.47:1 (AAA). */
  color: #0d0f14 !important;
}

.badge-Pending,
.badge-pending,
span.badge[class*="badge-Pending"] {
  background-color: var(--vw-warning) !important;
  color: #1a1d27 !important;
}

.badge-Suspended,
.badge-suspended,
span.badge[class*="badge-Suspended"] {
  background-color: var(--vw-danger) !important;
  color: #fff !important;
}

.badge-Cancelled,
.badge-cancelled,
.badge-Terminated,
.badge-terminated,
.badge-Fraud,
.badge-fraud {
  background-color: var(--vw-bg-border) !important;
  color: var(--vw-text-secondary) !important;
}

.badge-Unpaid,
.badge-unpaid {
  background-color: var(--vw-danger) !important;
  color: #fff !important;
}

.badge-Paid,
.badge-paid {
  background-color: var(--vw-brand-green) !important;
  /* Section 52 update: green brightened. Dark text wins AA on #00c000. */
  color: #0d0f14 !important;
}

.badge-Recurring {
  background-color: var(--vw-brand) !important;
  color: #fff !important;
}

.badge-Creditnote,
.badge-Receiptpaid,
.badge-Receiptunpaid {
  background-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

.badge-Chargeback {
  background-color: var(--vw-danger) !important;
  color: #fff !important;
}

/* On/Off badges in service details */
.badge-On {
  background-color: var(--vw-brand-green) !important;
  color: #0d0f14 !important;
}

.badge-Off {
  background-color: var(--vw-bg-border) !important;
  color: var(--vw-text-secondary) !important;
}

/* ====================================================================
   Section 43 — Proxmox/Cloud module dropdown & white-background fixes
   Targets elements loaded AFTER dark theme by module CSS
   ==================================================================== */

/* Cloud module dropdown menus — ensure dark background wins */
.cloud .dropdown-menu,
.cloud-nav .dropdown-menu,
#content-cloud .dropdown-menu,
.cloud-nav .menu-item .dropdown-menu,
.cloud-nav .dropdown.open .dropdown-menu {
  background-color: var(--vw-bg-card) !important;
  border-color: var(--vw-bg-border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

.cloud .dropdown-menu li > a,
.cloud-nav .menu-item .dropdown-menu > li > a,
#content-cloud .dropdown-menu li > a {
  color: var(--vw-text-secondary) !important;
  text-shadow: none !important;
}

.cloud .dropdown-menu li > a:hover,
.cloud .dropdown-menu li > a:focus,
.cloud-nav .menu-item .dropdown-menu > li > a:hover,
.cloud-nav .menu-item .dropdown-menu > li > a:focus,
#content-cloud .dropdown-menu li > a:hover {
  background-color: var(--vw-bg-hover) !important;
  color: var(--vw-text-primary) !important;
}

.cloud .dropdown-menu > .active > a,
.cloud-nav .menu-item .dropdown-menu > .active > a {
  background-color: var(--vw-brand) !important;
  color: #fff !important;
}

/* Cloud nav menu items — override background images */
.cloud-nav .menu-item > a,
.cloud-nav .menu-item.dropdown.open .dropdown-toggle {
  background: var(--vw-bg-card) !important;
  background-image: none !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-secondary) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.cloud-nav .menu-item:hover > a {
  background: var(--vw-bg-hover) !important;
  color: var(--vw-text-primary) !important;
}

/* VM menu hover — override hardcoded #fff background */
ul#vm-menu li a:hover,
ul#vm-menu > a:hover {
  background: var(--vw-bg-hover) !important;
  border-color: var(--vw-bg-border) !important;
  box-shadow: none !important;
  color: var(--vw-brand-text) !important;
}

/* ttable — override white background-image and background-color */
table.ttable tr td {
  background: var(--vw-bg-card) !important;
  background-image: none !important;
  border-bottom-color: var(--vw-bg-border) !important;
  border-top-color: transparent !important;
}

/* Cloud module .popup elements */
.popup,
.cloud .popup {
  background-color: var(--vw-bg-card) !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
}

.popup label {
  color: var(--vw-text-primary) !important;
}

/* Gray submit buttons — override white backgrounds */
input[type="submit"].gray,
input[type="button"].gray {
  background-color: var(--vw-bg-border) !important;
  background-image: none !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
  text-shadow: none !important;
}

input[type="submit"].gray:hover,
input[type="button"].gray:hover {
  background-color: var(--vw-bg-hover) !important;
  background-image: none !important;
}

/* Catch-all: any remaining white-background list items in dropdowns */
.dropdown-menu li {
  background-color: transparent !important;
}

.dropdown-menu li:hover {
  background-color: var(--vw-bg-hover) !important;
}


/* ====================================================================
   Section 44 — Service/server details readability
   Bump small text in service detail lines, VM tables, and labels
   ==================================================================== */

/* Service details text — bump from ~12-13px to 15px */
.service-details .text-small,
.service-details span.text-small,
.service-details .break-word {
  font-size: 0.94rem !important;
  line-height: 1.5 !important;
}

/* Service details labels — bump from ~12px to 14px */
.service-details small,
.service-details small.d-block {
  font-size: 0.82rem !important;
  color: var(--vw-text-secondary) !important;
}

/* Proxmox VM detail table text — bump from 14px to 15px */
table.ttable tr td {
  font-size: 15px !important;
  padding: 12px 8px !important;
  line-height: 1.5 !important;
}

/* VM detail labels (Status, Hostname, etc.) */
table.ttable tr td b,
table.ttable tr td strong {
  font-size: 14px !important;
  color: var(--vw-text-secondary) !important;
  letter-spacing: 0.01em;
}

/* Bordered section service details lines */
.bordered-section .service-details-line {
  padding: 16px !important;
}

/* IP address tables in service details */
.service-details .table td,
.service-details .table th {
  font-size: 0.94rem !important;
}

/* Cloud module content-bar text */
#content-cloud .content-bar {
  font-size: 15px !important;
  line-height: 1.5 !important;
}


/* ====================================================================
   Section 45 — Global text size improvements
   Bump text across left nav, header, footer, and general body content
   ==================================================================== */

/* -- Left navigation (service sidebar: Overview, Billing, etc.) -- */
.leftnavigation-box .nav-link,
.leftnavigation-box .nav-item > .nav-link,
.leftnavigation-box.nav .nav-link {
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  padding: 10px 16px !important;
}

.leftnavigation-box .nav-link span {
  font-size: inherit !important;
}

/* -- Top navbar text -- */
.navbar .nav-link,
.navbar .navbar-nav .nav-link,
.sub-navbar .nav-link {
  font-size: 0.9rem !important;
}

.navbar .navbar-brand {
  font-size: 1rem !important;
}

/* Top nav user/account dropdown items */
.navbar .dropdown-item {
  font-size: 0.9rem !important;
}

/* -- Footer text -- */
footer.footer,
.footer,
.footer .footer-box,
.footer p,
.footer span,
.footer li,
.footer .nav-link {
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
}

.footer h5,
.footer h6,
.footer .footer-heading {
  font-size: 1rem !important;
}

/* -- General body content minimum -- */
.body-content,
.section-main,
.section-account {
  font-size: 0.94rem;
  line-height: 1.6;
}

/* Headings */
h1, .h1 { font-size: 1.75rem !important; }
h2, .h2 { font-size: 1.5rem !important; }
h3, .h3 { font-size: 1.25rem !important; }
h4, .h4 { font-size: 1.1rem !important; }

/* Page heading (service name, etc.) */
.section-account-header h1 {
  font-size: 1.5rem !important;
}


/* ====================================================================
   Section 46 — VM actions menu white background fix
   The #vm-menu li a elements have hardcoded white backgrounds
   and background-images from cloudhosting/styles.css
   ==================================================================== */

ul#vm-menu {
  background: var(--vw-bg-card) !important;
  border: 1px solid var(--vw-bg-border) !important;
  border-radius: 0.43rem;
  height: auto !important;
}

ul#vm-menu li {
  color: var(--vw-text-primary) !important;
  text-shadow: none !important;
}

ul#vm-menu li a {
  background: var(--vw-bg-card) !important;
  background-image: none !important;
  border-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
  text-shadow: none !important;
  font-size: 13px !important;
}

ul#vm-menu li a:hover {
  background: var(--vw-bg-hover) !important;
  background-image: none !important;
  border-color: var(--vw-bg-border) !important;
  box-shadow: none !important;
  color: var(--vw-brand-text) !important;
}

ul#vm-menu li a.disabled {
  opacity: 0.4 !important;
  color: var(--vw-text-muted) !important;
}

#lockable-vm-menu {
  background: transparent !important;
}

#lockable-vm-menu #lock {
  background: rgba(13, 15, 20, 0.7) !important;
}

/* ====================================================================
   Section 47 — Additional footer and service submenu size fixes
   Stronger selectors for elements that didn't respond to Section 45
   ==================================================================== */

/* Footer — stronger selectors */
body footer,
body footer.footer,
body .footer,
body .footer-content {
  font-size: 14px !important;
}

body footer a,
body footer .nav-link,
body footer p,
body footer span,
body footer li,
body footer td {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

body footer h5,
body footer h6 {
  font-size: 16px !important;
}

/* Service submenu (Overview, Network, Storage, etc.) — stronger selectors */
body .leftnavigation-box .nav-item .nav-link,
body .leftnavigation-box.nav .nav-item .nav-link,
body .leftnavigation-box > .nav-item > .nav-link,
ul.leftnavigation-box .nav-link {
  font-size: 15px !important;
  line-height: 1.5 !important;
  padding: 10px 16px !important;
}

body .leftnavigation-box .nav-item .nav-link span,
ul.leftnavigation-box .nav-link span {
  font-size: 15px !important;
}

/* Active state for service submenu */
body .leftnavigation-box .nav-link.active {
  font-weight: 600 !important;
}


/* ====================================================================
   Section 48 — VM menu <li> background fix
   compiled custom.min.css sets #vm-menu li { background: white }
   which bleeds through behind the <a> elements
   ==================================================================== */

#vm-menu li,
.cloud #vm-menu li,
#lockable-vm-menu #vm-menu li,
.cloud #lockable-vm-menu #vm-menu li {
  background: var(--vw-bg-card) !important;
  border-color: var(--vw-bg-border) !important;
}

#vm-menu li a,
.cloud #vm-menu li a,
#lockable-vm-menu #vm-menu li a {
  background: var(--vw-bg-card) !important;
  color: var(--vw-text-primary) !important;
  text-shadow: none !important;
}

#vm-menu li a:hover,
.cloud #vm-menu li a:hover,
#lockable-vm-menu #vm-menu li a:hover {
  background: var(--vw-bg-hover) !important;
  color: var(--vw-brand-text) !important;
  border: none !important;
  box-shadow: none !important;
}

/* More dropdown within vm-menu */
#vm-menu .dropdown-menu,
.cloud #vm-menu .dropdown-menu {
  background-color: var(--vw-bg-card) !important;
  border: 1px solid var(--vw-bg-border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

#vm-menu .dropdown-menu li,
.cloud #vm-menu .dropdown-menu li {
  background: transparent !important;
}

#vm-menu .dropdown-menu li a,
.cloud #vm-menu .dropdown-menu li a {
  color: var(--vw-text-secondary) !important;
  background: transparent !important;
}

#vm-menu .dropdown-menu li a:hover,
.cloud #vm-menu .dropdown-menu li a:hover {
  background: var(--vw-bg-hover) !important;
  color: var(--vw-text-primary) !important;
}

/* ── 46. Cloud module — sub-tab strips + dropdown active state
 * Fixes white .sub-ul backgrounds (Storage / Snapshots / Usage sub-tabs)
 * and the invisible brand-on-brand "active" sub-link in the left
 * service-nav dropdowns (e.g. Network → Interfaces).
 * Selectors match the offending custom.min.css rules so the cascade wins
 * by source-order tie-break — no !important needed.
 * Deferred to a follow-up: .graph_usage chart containers render white;
 * fix requires JS-side chart axis/gridline reconfig, not CSS alone.
 */
.cloud #content-cloud .sub-ul {
  background-color: var(--vw-bg-card);
  box-shadow: 0 -1px 0 inset var(--vw-bg-border);
}

.cloud #content-cloud ul.sub-ul li a {
  color: var(--vw-text-secondary);
}
.cloud #content-cloud ul.sub-ul li a:hover,
.cloud #content-cloud ul.sub-ul li a.active {
  color: var(--vw-text-primary);
}

.cloud .cloud-top .cloud-nav .level-1 .menu-item.dropdown .dropdown-menu > li.active > a,
.cloud .cloud-top .cloud-nav .level-1 .menu-item.dropdown .dropdown-menu > li:hover > a {
  /* !important required: custom.min.css's matching rule is !important,
   * which beats specificity ties regardless of source order. */
  color: #fff !important;
}

/* ── 47. Logo image white-bg leak
 * custom.min.css has `.image { background-color: #fff }` (single-class,
 * no !important) — paints a white pill behind anything tagged `.image`,
 * which on a dark page renders the login-form Versaweb logo on a stark
 * white background. Scoping the override narrowly so we don't strip
 * white from .image uses that legitimately want it (product thumbs etc).
 */
.form-credentials .image,
.navbar-brand .image,
.body-content .image,
.section-signin .image,
.section-passreminder .image {
  background-color: transparent;
}

/* ── 48. Legacy .label.label-* pills (history, transactions, etc.)
 * HostBill still emits Bootstrap-3-style `.label.label-success/warning/
 * danger/info/primary/default` for log-style tables. They were authored
 * for light theme — near-white bg with colored text. On dark theme they
 * render as floating cream capsules with poor WCAG contrast (~2:1).
 *
 * Re-skin: solid-color bg with appropriate text contrast per WCAG AA.
 * Sizing bumped 10px -> 11.5px for legibility while still reading as
 * "label" rather than body text.
 */
.label.label-styled.label-success,
.label.label-success {
  background-color: var(--vw-brand-green) !important;
  color: #0d0f14 !important;
  border-color: var(--vw-brand-green) !important;
  font-size: 11.5px !important;
}

.label.label-styled.label-warning,
.label.label-warning {
  background-color: var(--vw-warning) !important;
  color: #0d0f14 !important;
  border-color: var(--vw-warning) !important;
  font-size: 11.5px !important;
}

.label.label-styled.label-danger,
.label.label-danger {
  background-color: var(--vw-danger) !important;
  color: #fff !important;
  border-color: var(--vw-danger) !important;
  font-size: 11.5px !important;
}

.label.label-styled.label-info,
.label.label-info {
  background-color: var(--vw-brand) !important;
  color: #fff !important;
  border-color: var(--vw-brand) !important;
  font-size: 11.5px !important;
}

.label.label-styled.label-primary,
.label.label-primary {
  background-color: var(--vw-brand) !important;
  color: #fff !important;
  border-color: var(--vw-brand) !important;
  font-size: 11.5px !important;
}

.label.label-styled.label-default,
.label.label-default {
  background-color: var(--vw-bg-border) !important;
  color: var(--vw-text-primary) !important;
  border-color: var(--vw-bg-border) !important;
  font-size: 11.5px !important;
}

/* ── 49. Accessibility + readability batch (2026-05-23)
 * Token shifts at :root above; per-element rules below.
 *
 * (3) Status badges — Section 48 pattern: solid token bg, dark text on
 *     bright tokens, white on red. Replaces the prior Section 42 styling
 *     which set white-on-green at 2.18:1 (failed AA).
 * (4) state_switch labels — force white when active (was brand-on-brand
 *     1.44:1, effectively invisible).
 * (5) Cancellation link — bump weight + lighten red enough to clear AA.
 * (6) Invoices/billing table header row — darken the tr bg so the row
 *     band behind cells stops bleeding light.
 * (7-10) Text sizing — sidebar section headings, .btn-sm, footer.
 */

/* (3) Badges — text color updated in Section 52 (green brightened to #00c000) */
.badge.badge-Active,
.badge.badge-Paid,
.badge.badge-On {
  background-color: var(--vw-brand-green) !important;
  color: #0d0f14 !important;
  font-size: 11.5px !important;
}
.badge.badge-Pending {
  background-color: var(--vw-warning) !important;
  color: #0d0f14 !important;
  font-size: 11.5px !important;
}
.badge.badge-Unpaid,
.badge.badge-Suspended,
.badge.badge-Cancelled,
.badge.badge-Terminated,
.badge.badge-Off,
.badge.badge-Chargeback {
  background-color: var(--vw-danger) !important;
  color: #fff !important;
  font-size: 11.5px !important;
}
.badge.badge-Recurring {
  background-color: var(--vw-brand) !important;
  color: #fff !important;
  font-size: 11.5px !important;
}

/* (4) state_switch "On" — was brand-blue text on brand-green bg = 1.44:1 */
.cloud .iphone_switch.on,
.cloud .iphone_switch.state_switch_on,
.cloud .iphone_switch.iphone_switch_on,
.cloud .state_switch.on,
.cloud .state_switch.state_switch_on,
.cloud .state_switch.iphone_switch_on,
a.iphone_switch.on,
a.state_switch.on {
  color: #fff !important;
}

/* (5) Request Cancellation — was #D9252E weight 300 at 15px = 3.88:1.
 * Lighten red + bump weight to clear AA while keeping danger semantic. */
.cancellation,
a.cancellation,
.service-detail .cancellation {
  color: #E5505B !important;
  font-weight: 500 !important;
}

/* (6) Table header row light strip (invoices/billing/etc.) */
.table thead tr,
.invoices-table thead tr {
  background-color: var(--vw-bg-subtle) !important;
}

/* (7) Sidebar section headings — "Manage", "Account", "Help", "Other"
 * Actual class is .sidebar-heading inside aside.sidebar > .sidebar-wrap. */
.sidebar-heading,
.sidebar .sidebar-heading,
.sidebar-wrap .sidebar-heading,
aside h5.sidebar-heading {
  font-size: 0.85rem !important;
}

/* (8) Small buttons — bump 12px to 13.6px */
.btn.btn-sm,
.btn-sm.btn {
  font-size: 0.85rem !important;
}

/* (10) Footer copyright + nav links — bump 11.5px to 13.6px */
.contentinfo small,
footer small,
.contentinfo .text-small,
footer .text-small {
  /* Bumped 0.85rem -> 0.9rem (was a regression from Section 45 which had
   * already set 0.9rem for footer text — Section 49 inadvertently shrank
   * back to 0.85rem). */
  font-size: 0.9rem !important;
}

/* ── 50. Layout fix: .right utility class restored
 * HostBill emits `class="right"` in legacy cart0.tpl markup, expecting
 * Bootstrap-3-era `.right { float: right }`. Bootstrap 4 dropped that
 * utility (in favor of `.float-right`); HostBill kept the markup. Result:
 * on cart category pages the "Get in touch" button (`.right.product-actions`)
 * stacks orphaned above the "Need something special?" H1 instead of
 * floating alongside it. Restoring the float fixes the intended layout.
 * (Earlier version of this comment contained a literal star-slash inside
 *  the cart URL path which closed the CSS comment block early and ate
 *  the next rule — fixed by rewording.)
 */
.custom-footer .product-actions.right {
  float: right;
}
.custom-footer::after {
  content: "";
  display: block;
  clear: both;
}

/* ── 51. Brand-color sync with versaweb.com (2026-05-24)
 * Astro marketing site updated its brand-green tokens:
 *   --color-brand-green:       #6bc453 → #388e3c   (dark-mode brand-green)
 *   --color-brand-green-hover: (new)     #2e7d32
 *   --color-brand:             #009bdb (unchanged in dark mode)
 *   --color-brand-hover:       #006691 (Astro light-mode hover — already
 *                                       what HB-dark uses for AA harmony)
 *
 * Changes in this section's batch:
 *   1. --vw-brand-green token retargeted to #388e3c (see :root above).
 *   2. New --vw-brand-green-hover token (#2e7d32) added for future use.
 *   3. --vw-brand-hover synced from #005a87 (hand-derived) to Astro's
 *      light-mode #006691 — keeps the "HB dark mirrors Astro light brand"
 *      token-harmony pattern intact.
 *   4. All white-on-green badges (Section 42/49) flipped from dark text
 *      (#0d0f14) back to white. New green is dark enough (#388e3c) that
 *      white passes AA (4.55:1) and dark fails (~1.9:1).
 *   5. Literal hex #6bc453 hits converted to token references where
 *      possible; .interface-status.up uses a lightened sibling #4caf50
 *      because the token green is too dark as fg text on bg-card.
 *   6. Cache-buster bumped to v=1.6.0.
 *
 * No new rules in this section — token-edit + comment marker only. The
 * substantive changes live at :root and inside Sections 42, 48, 49.
 */

/* ── 52. Brand-green retarget to #00c000 + custom.min.css overrides (2026-05-24)
 *
 * Rob's call: the #388e3c forest from Section 51 read too dark; wanted a
 * "medium-bright green" that's friendly across every brand surface. Picked
 * #00c000 (pure web-green) as the final --vw-brand-green target.
 *
 * Two-sided migration:
 *   A. Token edit at :root (above) — every var(--vw-brand-green) consumer
 *      cascades automatically (Sections 42, 48, 49 badge bg, .interface-status.up,
 *      etc.).
 *   B. custom.min.css carries 46 HARDCODED #6bc453 rule-blocks (Bootstrap
 *      form-validation + .btn-success / .badge-success / .text-success / etc.).
 *      Token cascade doesn't reach those — overrides below target the same
 *      selectors and win by load-order (versaweb-dark loads after custom.min).
 *
 * Contrast pivots:
 *   - White text on #00c000 = 2.48:1 (fails AA). Badge/label rules in
 *     Sections 42, 48, 49 flipped from white back to dark text (#0d0f14)
 *     for AAA (8.47:1). Reverts the Section 51 white-text flip.
 *   - #00c000 as fg-text on bg-card (#141720) = 7.4:1 AAA — no lightened
 *     sibling needed. Section 51's #4caf50 mid-green hack is retired
 *     (.interface-status.up collapsed back to var(--vw-brand-green)).
 *
 * The 8 rgba(107,196,83,...) faded-tint backgrounds in custom.min.css are
 * intentionally NOT overridden — at alpha 0.1–0.25 the visual difference
 * between old/new RGB is sub-perceptual on dark surfaces. Leaving them avoids
 * 8 extra override rules for zero visual gain.
 *
 * Astro sync (versaweb-astro/src/styles/global.css) updated to #00c000
 * in parallel — preserves the "HB-dark mirrors Astro brand-green" pattern.
 *
 * Cache-buster bumped to v=1.7.0.
 */

/* --- A. Override Bootstrap --success token at :root so var(--success) consumers
 *     get the new green without per-rule overrides. */
:root {
  --success: #00c000 !important;
}

/* --- B. Bootstrap form-validation surfaces (.was-validated .form-control:valid etc.)
 *     Selectors mirror custom.min.css; properties only touch the green-bearing
 *     declarations. SVG checkmark data URIs duplicated with %2300c000 fill. */
.valid-feedback {
  color: var(--vw-brand-green) !important;
}

.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: var(--vw-brand-green) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2300c000' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
  border-color: var(--vw-brand-green) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 192, 0, 0.25) !important;
}

.was-validated .custom-select:valid,
.custom-select.is-valid {
  border-color: var(--vw-brand-green) !important;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.8rem center / 8px 10px,
              url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2300c000' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #0d0f14 no-repeat center right 1.8rem / calc(0.625em + 0.6rem) calc(0.625em + 0.6rem) !important;
}

.was-validated .custom-select:valid:focus,
.custom-select.is-valid:focus {
  border-color: var(--vw-brand-green) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 192, 0, 0.25) !important;
}

.was-validated .form-check-input:valid ~ .form-check-label,
.form-check-input.is-valid ~ .form-check-label,
.was-validated .custom-control-input:valid ~ .custom-control-label,
.custom-control-input.is-valid ~ .custom-control-label,
.was-validated .custom-file-input:valid ~ .custom-file-label,
.custom-file-input.is-valid ~ .custom-file-label {
  color: var(--vw-brand-green) !important;
}

.was-validated .custom-control-input:valid ~ .custom-control-label::before,
.custom-control-input.is-valid ~ .custom-control-label::before {
  border-color: var(--vw-brand-green) !important;
}

.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before,
.custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--vw-brand-green) !important;
}

.was-validated .custom-file-input:valid:focus ~ .custom-file-label,
.custom-file-input.is-valid:focus ~ .custom-file-label {
  border-color: var(--vw-brand-green) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 192, 0, 0.25) !important;
}

/* --- C. Bootstrap success utility classes */
.btn-success {
  background-color: var(--vw-brand-green) !important;
  border-color: var(--vw-brand-green) !important;
  color: #0d0f14 !important;
}

.btn-success.disabled,
.btn-success:disabled {
  background-color: var(--vw-brand-green) !important;
  border-color: var(--vw-brand-green) !important;
  color: #0d0f14 !important;
}

.btn-outline-success {
  color: var(--vw-brand-green) !important;
  border-color: var(--vw-brand-green) !important;
}

.btn-outline-success:hover {
  background-color: var(--vw-brand-green) !important;
  border-color: var(--vw-brand-green) !important;
  color: #0d0f14 !important;
}

.btn-outline-success.disabled,
.btn-outline-success:disabled {
  color: var(--vw-brand-green) !important;
}

.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled).active,
.show > .btn-outline-success.dropdown-toggle {
  background-color: var(--vw-brand-green) !important;
  border-color: var(--vw-brand-green) !important;
  color: #0d0f14 !important;
}

.badge-success {
  background-color: var(--vw-brand-green) !important;
  color: #0d0f14 !important;
}

.bg-success,
.bg-gradient-success {
  background-color: var(--vw-brand-green) !important;
}

.border-success {
  border-color: var(--vw-brand-green) !important;
}

.text-success {
  color: var(--vw-brand-green) !important;
}

/* --- D. HostBill custom status badges/labels (overrides custom.min.css rules
 *     that bake #6bc453 into compound selectors). Section 42/48/49 cover the
 *     plain `.badge.badge-Active` etc.; these handle the wildcard variants. */
.badge.badge-Accepted,
.badge.badge-Receiptpaid,
.badge.badge-Opened,
.badge.badge-Open,
.badge.badge-success.badge-styled {
  background-color: var(--vw-brand-green) !important;
  color: #0d0f14 !important;
}

.label.label-Active,
.label.label-Accepted,
.label.label-Paid,
.label.label-Receiptpaid,
.label.label-Opened,
.label.label-Open,
.label.label-success.label-styled {
  background-color: var(--vw-brand-green) !important;
  color: #0d0f14 !important;
}

.alert.alert-success,
.cloud .alert-success.notice {
  background-color: var(--vw-brand-green) !important;
  border-color: var(--vw-brand-green) !important;
  color: #0d0f14 !important;
}

input.parsley-success,
select.parsley-success,
textarea.parsley-success {
  border-color: var(--vw-brand-green) !important;
}

/* --- E. Knowledgebase article voting (.vote-article-like) */
.vote-article .vote-article-btn.vote-article-like {
  background-color: var(--vw-brand-green) !important;
  color: #0d0f14 !important;
}

.vote-article .vote-article-btn.vote-article-like .material-icons {
  color: #0d0f14 !important;
}

/* --- F. Orderbox submit/check buttons (non-primary go-green) */
.orderbox input[type="submit"]:not(.btn-primary),
.orderbox button[type="submit"]:not(.btn-primary) {
  background-color: var(--vw-brand-green) !important;
  border-color: var(--vw-brand-green) !important;
  color: #0d0f14 !important;
}

.orderbox input[type="submit"]:not(.btn-primary):hover,
.orderbox button[type="submit"]:not(.btn-primary):hover {
  background-color: var(--vw-brand-green-hover) !important;
  border-color: var(--vw-brand-green-hover) !important;
  color: #0d0f14 !important;
}

.orderbox input[type="submit"]:not(.btn-primary):focus,
.orderbox input[type="submit"]:not(.btn-primary).focus,
.orderbox button[type="submit"]:not(.btn-primary):focus,
.orderbox button[type="submit"]:not(.btn-primary).focus {
  background-color: var(--vw-brand-green) !important;
  border-color: var(--vw-brand-green) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 192, 0, 0.25) !important;
  color: #0d0f14 !important;
}

.orderbox input[type="submit"]:not(.btn-primary).disabled,
.orderbox input[type="submit"]:not(.btn-primary):disabled,
.orderbox button[type="submit"]:not(.btn-primary).disabled,
.orderbox button[type="submit"]:not(.btn-primary):disabled {
  background-color: var(--vw-brand-green) !important;
  border-color: var(--vw-brand-green) !important;
}

/* --- G. Check submit / checksubmit anchors */
a#checksubmit,
a.checksubmit,
.csubmit {
  background-color: var(--vw-brand-green) !important;
  color: #0d0f14 !important;
}

/* --- H. Table cells, cloud state switches, progress bars, badges in tables */
#tables td.d6 a {
  color: var(--vw-brand-green) !important;
}

/* Section 49 already forces white on .cloud .state_switch.on — overridden
   here only to recolor the green background. Text stays white per existing
   rule (state switch is a chunky pill with light-fg-on-bright-bg already AA). */
.cloud .iphone_switch.on,
.cloud .iphone_switch.state_switch_on,
.cloud .iphone_switch.iphone_switch_on,
.cloud .state_switch.on,
.cloud .state_switch.state_switch_on,
.cloud .state_switch.iphone_switch_on {
  background-color: var(--vw-brand-green) !important;
}

.cloud :not(.progress) > .progress-bar .bar.green {
  background-color: var(--vw-brand-green) !important;
}

.cloud .label.label-Active,
.cloud .label.label-Accepted,
.cloud .label.label-Paid,
.cloud .label.label-Receiptpaid,
.cloud .label.label-Opened,
.cloud .label.label-Open,
.cloud .label.label-success.label-styled {
  background-color: var(--vw-brand-green) !important;
  color: #0d0f14 !important;
}

.cloud span.Active,
table.display tbody tr .label.Active {
  background-color: var(--vw-brand-green) !important;
  color: #0d0f14 !important;
}

/* --- I. Other orderpage themes (rainbow_boxes header, coverflow promocode btn) —
 *     not used by Versaweb's active themes, but keeping in sync for completeness. */
.orderpage.orderpage-onestep_rainbow_boxes .ui-widget-header {
  background-color: var(--vw-brand-green) !important;
}

.orderpage.orderpage-onestep_coverflow #promocode .btn {
  background-color: var(--vw-brand-green) !important;
  border-color: var(--vw-brand-green) !important;
  color: #0d0f14 !important;
}

.orderpage.orderpage-onestep_coverflow #promocode .btn:hover {
  background-color: var(--vw-brand-green-hover) !important;
  border-color: var(--vw-brand-green-hover) !important;
}

.orderpage.orderpage-onestep_coverflow #promocode .btn:focus,
.orderpage.orderpage-onestep_coverflow #promocode .btn.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 192, 0, 0.25) !important;
}

.orderpage.orderpage-onestep_coverflow #promocode .btn.disabled,
.orderpage.orderpage-onestep_coverflow #promocode .btn:disabled {
  background-color: var(--vw-brand-green) !important;
  border-color: var(--vw-brand-green) !important;
}

/* ── 53. Wizard cart summary sticky (md+ viewports) ─────────────────────
   Keep the cart summary panel visible as the customer scrolls through
   the long product configuration form (Disk1-4, OS, IP, Bandwidth, etc.)
   on the cart_2019wizard_custom theme. Pure CSS — position:sticky
   degrades gracefully when there isn't enough vertical room to slide.

   Scoped to md+ so mobile stays as-is (cart already at bottom of the
   stacked DOM flow). align-self:flex-start prevents Bootstrap's
   .row flex from stretching the column to full row height (which would
   leave no room for sticky to behave). Offset accounts for the
   70px fixed top navbar plus 1rem breathing room. */
@media (min-width: 768px) {
  #cartSummary {
    position: sticky;
    top: calc(70px + 1rem);
    align-self: flex-start;
  }
}

/* ── 54. Service upgrade-package form (VPS Proxmox / HostBill-core inline render)
   ────────────────────────────────────────────────────────────────────────────────
   Found 2026-06-07 on /clientarea/services/<vps-product>/<service>/&vpsdo=upgrade.
   The page renders two upgrade forms: "Resource upgrades" (the slider-driven
   $fieldupgrades form, dark-themed correctly from earlier sections) AND
   "Upgrade package" (the product-swap dropdown form, rendered inline by
   ioncube HostBill core — no .tpl exists in vw_2019_custom to override).

   That second form has zero class hooks — no .upgrade-package, no .card,
   nothing. Stock styling paints it white on the dark page; description text
   was light-grey-on-white, essentially unreadable.

   Identify by the distinctive hidden input + scope every override under it
   so we don't touch the other upgrade form (which has
   value="upgradeconfig" — exact-match attribute selectors won't collide). */

/* The wrapping container around the form is `<div id="addon_bar">` — stock
   custom.min.css paints it white. ID selector beats anything stock can throw
   at us; zero out the white panel styling so the dark form (rule below)
   shows clean against the page bg. Leave the inline padding alone — that's
   from HostBill core's render and is fine. */
#addon_bar {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

form:has(> input[name="make"][value="upgrade"]) {
  background: var(--vw-bg-card) !important;
  color: var(--vw-text-primary) !important;
  padding: 16px !important;
  border-radius: 6px !important;
  margin-top: 12px !important;
}

form:has(> input[name="make"][value="upgrade"]) table,
form:has(> input[name="make"][value="upgrade"]) td {
  background: transparent !important;
  color: var(--vw-text-primary) !important;
  border: 0 !important;
}

/* Spec list — was .fs11 (11px) light-grey-on-white. Bump to 0.85rem
   (~13.6px) to clear the 12.8px minimum from Section 49. */
form:has(> input[name="make"][value="upgrade"]) #up_descriptions {
  color: var(--vw-text-primary) !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  margin-top: 12px !important;
}

form:has(> input[name="make"][value="upgrade"]) #up_descriptions ul {
  margin: 8px 0 0 1.2em !important;
  padding: 0 !important;
}

/* Package + cycle selects inside the form — inherit dark form-control
   styling instead of browser default white. */
form:has(> input[name="make"][value="upgrade"]) select {
  background: var(--vw-bg-subtle) !important;
  color: var(--vw-text-primary) !important;
  border: 1px solid var(--vw-bg-border) !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
}

/* Legacy class="blue" Continue button — match the brand-button pattern
   from Sections 49 + 50 (white-on-brand-blue, AA-passing). */
form:has(> input[name="make"][value="upgrade"]) input[type="submit"].blue {
  background: var(--vw-brand) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 0.5rem 1.25rem !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

form:has(> input[name="make"][value="upgrade"]) input[type="submit"].blue:hover {
  background: var(--vw-brand-hover) !important;
}

/* ── 55. .notice card — HostBill-classic warning banner
   ────────────────────────────────────────────────────────────
   Stock custom.min.css uses a bare `.notice` class with multiple cascading
   color declarations (green, blue, red, yellow) — the last one wins, so
   every `<div class="notice">` defaults to warning-yellow on a CREAM
   background (#fdf3de). Unreadable on our dark theme.

   Found 2026-06-07 on /clientarea/services/<vps>/<id>/&vpsdo=upgrade with
   the disk-resize/restart warning text. Distinct from Bootstrap `.alert`
   markup (we already handle `.alert-*` in Section 13), so this needs
   its own selector.

   Match the same colorway as our existing `.alert-warning` (Section 13):
   semi-transparent yellow bg + dim yellow border + warning text color.
   Text color (#F6BB42) is already legible on dark when the bg is
   transparent, so leaving the text token alone — only the bg and border
   need to change. */
.notice {
  background-color: rgba(246, 187, 66, 0.1) !important;
  border-color: rgba(246, 187, 66, 0.25) !important;
  color: var(--vw-warning) !important;
}

/* ── 56. .badge-light dark-theme override
   ─────────────────────────────────────────
   Stock Bootstrap 4 `.badge-light` is white-bg / dark-text (intended for light
   themes). On our dark page it reads as light-grey-on-cream — fails contrast.
   Pin it to bg-subtle + primary text. Found 2026-06-07 on the invoice page
   where the secondary "issue date" pill uses
   `class="badge badge-light text-secondary px-3 py-2"`.
   The `.text-secondary` modifier still drops to secondary text tone via the
   second rule for visual hierarchy with the primary green PAID pill next to it. */

.badge.badge-light {
  background-color: var(--vw-bg-subtle) !important;
  color: var(--vw-text-primary) !important;
  border: 1px solid var(--vw-bg-border) !important;
}

.badge.badge-light.text-secondary {
  color: var(--vw-text-secondary) !important;
}

/* ── 57. Success-status badges → white text on brand-green
   ─────────────────────────────────────────────────────────
   Replaces the dark-text-on-bright-green pattern from Sections 42/49/52 for
   the badge variants only — for visual crispness at small badge sizes.

   Rob (2026-06-07) preferred white text + brand-green `#00c000` over both
   the original dark-text-on-bright (Section 49 / Section 52) and the
   intermediate `#1b5e20` darker-green compromise. The white-on-bright
   contrast is 2.48:1 — FAILS WCAG AA. Accepted trade-off: brand fidelity
   over strict AA compliance for the small-pill use case. If a future audit
   re-prioritizes contrast over brand consistency, swap bg to Astro's
   light-mode `#1b5e20` (9.16:1 AAA — documented in umbrella CLAUDE.md's
   Brand colors section).

   Covers all known success-status variants found in HostBill markup:
   .badge-Active / .badge-Paid / .badge-On (primary statuses from Section 42)
   plus .badge-Accepted / .badge-Receiptpaid / .badge-Opened / .badge-Open
   / .badge-success (extended variants from Section 52). And the parallel
   .label.label-* family from Section 48 for legacy markup.

   font-size carried forward from Section 49 (11.5px → keep until/unless
   Section 49's text-floor decision is revisited). */

.badge.badge-Active,
.badge.badge-Paid,
.badge.badge-On,
.badge.badge-Accepted,
.badge.badge-Receiptpaid,
.badge.badge-Opened,
.badge.badge-Open,
.badge.badge-success,
.badge.badge-success.badge-styled,
.label.label-Active,
.label.label-Accepted,
.label.label-Paid,
.label.label-Receiptpaid,
.label.label-Opened,
.label.label-Open,
.label.label-success,
.label.label-success.label-styled {
  background-color: var(--vw-brand-green) !important;  /* brand green #00c000. White text 2.48:1 — fails AA but matches brand. */
  color: #fff !important;
}

/* ── 58. Support ticket workflow status badges
   ──────────────────────────────────────────────
   Status badges specific to the ticket workflow: Client-Reply, Answered, etc.
   These communicate workflow state (attention-needed / responded / waiting)
   rather than asset/billing state. Per Rob (2026-06-07): don't have to use
   theme tokens, just be semantically sensible and not too garish.

   Color reasoning:
   - Client-Reply: needs staff attention. Warm amber (between warning-yellow
     and danger-red). Distinct from success/danger families. White text 3.4:1
     at #fb8c00 — fails AA but matches the "small status pill brand fidelity"
     precedent set by Section 57. If contrast becomes a complaint, drop the
     orange to MD orange-900 `#e65100` (white 4.65:1 AA).
   - Answered: staff replied, ticket "handled." Use the brand-blue var so this
     visually pairs with the other professional-blue UI elements (Recurring
     badge, links, etc.). White on `var(--vw-brand)` = white on #0077a8 =
     5.1:1 AA per Section 49.

   Add new statuses here as they're found in HostBill markup — see the
   "Status" section of the umbrella CLAUDE.md for the running list. */

/* Section 58 originally: Client-Reply at #fb8c00 amber (3.4:1 fail AA) +
 * Answered at brand-blue. Superseded by Section 64's full 5-status palette
 * refresh — kept as the foundation rule; Section 64 overrides per-status
 * with AA-compliant colors. */
.badge.badge-Client-Reply,
.label.label-Client-Reply {
  background-color: #fb8c00 !important;
  color: #fff !important;
}

.badge.badge-Answered,
.label.label-Answered {
  background-color: var(--vw-brand) !important;
  color: #fff !important;
}

/* ── 61. Dashboard service list — text-size bumps
   ────────────────────────────────────────────────
   The `My services` table on /clientarea/ (dashboard.tpl, table #dashboard_services_list)
   uses HostBill's default `<small>` + Bootstrap `.small` + the custom `.text-small` class
   for the category prefix / product name / domain-IP rows in the Product/Service column.
   Default rendering yields ~10-13px text — below the 12.8px floor established in Section 49
   and visually too small for the dashboard's primary asset listing.

   Scope tightly to `#dashboard_services_list` so we don't bump font-size on every `<small>`
   site-wide. */

#dashboard_services_list td small.text-uppercase {
  /* "CPANEL LICENSES" — category prefix. Uppercase needs slight extra size for legibility. */
  font-size: 0.8rem !important;
  letter-spacing: 0.03em;
}

#dashboard_services_list td .text-small {
  /* The anchor wrapping the product name. */
  font-size: 0.95rem !important;
}

#dashboard_services_list td .text-small .font-weight-bold,
#dashboard_services_list td .text-small span.text-dark {
  /* "cPanel Admin Cloud 5" — product name (bold span inside text-small anchor).
     Primary content, gets the largest bump. */
  font-size: 1rem !important;
}

#dashboard_services_list td .d-block.small,
#dashboard_services_list td div.small {
  /* "104.143.10.20" — domain/IP secondary info. */
  font-size: 0.85rem !important;
}

/* Bump the Status / Total / Billing Cycle / Expiry cells too for consistency.
   They currently inherit Bootstrap's default 1rem but feel small against the
   bumped Product/Service column. Slight bump keeps the table balanced. */
#dashboard_services_list td.inline-row,
#dashboard_services_list td {
  font-size: 0.95rem !important;
}

/* ── 62. Service-detail left sub-nav (.leftnavigation-box) — lift bg
   ──────────────────────────────────────────────────────────────────
   Stock custom.min.css (post-recompile) paints `.leftnavigation-box .nav-item`
   with `#181C25` — which after Section 59's bg-token lift IS our page-bg.
   Net effect: every menu item shares the page bg and the submenu reads as
   floating text with no card lift. Rob (2026-06-08) flagged this on the
   cPanel license service-detail page (`/clientarea/services/cpanel-licenses/<id>/`).

   Note: the proxmox VPS service-detail submenu uses different markup
   (`.cloud-nav` class family per Section 46) and renders correctly already —
   only `.leftnavigation-box` needs lifting. */

.leftnavigation-box .nav-item {
  background-color: var(--vw-bg-card) !important;
}

.leftnavigation-box .nav-item:hover {
  background-color: var(--vw-bg-border) !important;
}

/* ── 63. Final force-override — white text on ALL green and red status pills
   ─────────────────────────────────────────────────────────────────────────
   Section 57 covered the capital-letter variants of the success-status family
   (`.badge.badge-Active`, `.badge.badge-Paid` etc.) but left the LOWERCASE
   variants (`.badge-active`, `.badge-paid`, `.badge-on`, `.badge-suspended`)
   and the 3-class `.label.label-styled.label-success` from Section 48 still
   inheriting dark text from earlier rules.

   Per Rob (2026-06-08): all green and red pills should use white text site-wide
   for visual consistency. This is a final catch-all override that supersedes
   any per-variant text-color setting from Sections 42, 48, or 57. White on
   bright green (#00c000) is 2.48:1 — fails AA but matches brand fidelity
   precedent set in Section 57. */

.badge-Active,         .badge-active,
.badge-Paid,           .badge-paid,
.badge-On,             .badge-on,
.badge-Accepted,
.badge-Receiptpaid,
.badge-Opened,
.badge-Open,
.badge-success,
.badge.badge-success,
.badge.badge-success.badge-styled,
span.badge[class*="badge-Active"],
span.badge[class*="badge-On"],
.badge-Suspended,      .badge-suspended,
.badge-Unpaid,         .badge-unpaid,
.badge-Chargeback,
span.badge[class*="badge-Suspended"],
.label.label-Active,
.label.label-Accepted,
.label.label-Paid,
.label.label-Receiptpaid,
.label.label-Opened,
.label.label-Open,
.label.label-success,
.label.label-success.label-styled,
.label.label-styled.label-success,
.label.label-danger,
.label.label-danger.label-styled,
.label.label-styled.label-danger {
  color: #fff !important;
}

/* ── 64. Support ticket workflow — 5-status palette refresh (supersedes Section 58)
   ─────────────────────────────────────────────────────────────────────────────────
   Five ticket statuses with white text + distinct hues for visual disambiguation
   in ticket lists. Semantic palette (final after 2026-06-08 iteration):

   - Open         → amber-800        #b45309   white 4.5:1 AA       (new, needs first response)
   - Answered     → astro-light-green #1b5e20  white 9.16:1 AAA      (positive, staff replied; darker harmonic of brand-green)
   - Client-Reply → danger-red       #D9252E   white 5.8:1 AA       (URGENT, customer pinged)
   - In-Progress  → cyan-700         #0e7490   white 5.0:1 AA       (active work, motion)
   - Closed       → slate-600        #475569   white 5.7:1 AA       (archived, no action)

   Iteration history:
   - v1: Answered was brand-blue `#0077a8` — too close to In-Progress cyan `#0e7490`
     (both blue-teal range; couldn't visually distinguish at a glance)
   - v2: Answered shifted to bright brand-green `#00c000` — visually clean but
     identical to Active/Paid pills (which are also bright `#00c000`); didn't read
     as distinct.
   - v3 (this): Answered shifted to darker harmonic `#1b5e20` (Astro light-mode
     brand-green, documented in umbrella CLAUDE.md as the AA-safe alternative
     to `--vw-brand-green`). Visually distinct from both Active/Paid (bright
     green) AND In-Progress (cyan). All 5 statuses now AA-or-better.

   These rules also need to win against Section 57's success-family rule that
   currently includes .badge-Open (treating it as success-green). Section 64
   loads later → same-specificity wins for .badge.badge-Open. */

.badge.badge-Open,
.label.label-Open {
  background-color: #b45309 !important;  /* amber-800 — needs first response */
  color: #fff !important;
}

.badge.badge-Answered,
.label.label-Answered {
  /* Darker harmonic of brand-green (Astro light-mode green family).
   * Documented in umbrella CLAUDE.md "Brand colors" + Section 51/52 as the
   * AA-safe alternative to var(--vw-brand-green). Distinguishes Answered
   * from Active/Paid (both bright #00c000) and from In-Progress (cyan).
   * White text = 9.16:1 AAA. */
  background-color: #1b5e20 !important;
  color: #fff !important;
}

.badge.badge-Client-Reply,
.label.label-Client-Reply {
  background-color: var(--vw-danger) !important;  /* danger-red — URGENT */
  color: #fff !important;
}

.badge.badge-In-Progress,
.label.label-In-Progress {
  background-color: #0e7490 !important;  /* cyan-700 — active work */
  color: #fff !important;
}

.badge.badge-Closed,
.label.label-Closed {
  background-color: #475569 !important;  /* slate-600 — archived */
  color: #fff !important;
}

/* ── 65. Filter slide-down (.filters-box)
   ──────────────────────────────────────────────────────────────────
   HostBill compiles this as rgba($body-color, .05). With body text
   #edf0f6 that is a 5% wash, not a card. The pre-2026-10-12 bake was
   solid #f8f9fa, so .form-check-label (light, from section 9) sat on
   a white panel. Same markup on services, domains, invoices, credit
   receipts, and overrides/dedicated_client_list.tpl.
   Card fill has to beat a later module stylesheet, same as section 43. */

.filters-box {
  background-color: var(--vw-bg-card) !important;
  border: 1px solid var(--vw-bg-border);
  color: var(--vw-text);
}

.filters-box label,
.filters-box .form-check-label {
  color: var(--vw-text) !important;
}

/* ==========================================================================
   Section 66: Proxmox VM action toolbar, equal button heights
   Serial console (no icon), Reboot (hidden icon div) and More (dropdown
   toggle) came out 33 / 36 / 38px tall because the module styles each
   differently. Pin them to one height and centre the label. The module
   stylesheet loads in the body after this file, hence !important.
   ========================================================================== */
ul#vm-menu > li > a {
  box-sizing: border-box !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Serial console is the one toolbar button the module renders without a
   .vpsdo-icon div. Give it the same Material Icons monitor glyph the module
   maps to src-24_terminal. */
/* The "Server details" title box was 32px against the 40px toolbar beside it.
   Match it, and move the absolutely positioned toolbar up by the same 4px
   the taller bar adds (-52px -> -56px) so the two boxes stay flush. */
#content-cloud .header-bar:has(> h3.vmdetails) {
  box-sizing: border-box !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
}

#content-cloud .header-bar:has(> h3.vmdetails) > h3 {
  margin: 0 !important;
}

/* Only the Overview bar carries the toolbar. Sub-pages (Snapshots, Network,
   ...) keep the stock bar, whose tab strip hangs off it. */
#content-cloud:has(.header-bar > h3.vmdetails) ul#vm-menu {
  top: -56px !important;
}

/* The More menu is capped at 400px and scrolls, but it holds ~12 items
   (about 430px), so one row is always clipped. Let it grow. */
#vm-menu .dropdown-menu {
  max-height: none !important;
  overflow: visible !important;
}

/* Sub-pages render the toolbar box with no buttons; it shows as a stray line. */
ul#vm-menu:not(:has(li)) {
  display: none !important;
}

/* Stock caps the toolbar at 50% of the bar, and the module JS only keeps as
   many buttons as fit that width (max 4, the rest go under More). The title
   box needs about 200px, so give the toolbar everything else. */
.cloud #lockable-vm-menu #vm-menu,
.cloud #vm-menu {
  width: calc(100% - 200px) !important;
  max-width: calc(100% - 200px) !important;
}

ul#vm-menu > li > a.vps-do-vmdetails {
  gap: 10px;
}

ul#vm-menu > li > a.vps-do-vmdetails::before {
  font-family: "Material Icons";
  font-weight: normal;
  content: "computer";
  font-size: 13px;
  line-height: 1;
}

/* Add-SSH-key link beside the SSH Keys label on the VPS Overview
   (dist/js/versaweb-custom.js). */
.vw-add-ssh-key {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
  color: var(--vw-brand-text);
  text-decoration: none;
}

.vw-add-ssh-key:hover {
  color: var(--vw-text);
}

.vw-add-ssh-key .material-icons {
  font-size: 18px;
}

/* ==========================================================================
   Section 67: bandwidth graph images
   The LibreNMS / RRDtool graphs are transparent PNGs with black text, so on
   the dark page they are close to invisible. Back them with white, the same
   way the VPS Network traffic chart already looks. The box-shadow adds the
   padding without changing the image size.
   ========================================================================== */
.widget-graph-image {
  background: #fff !important;
  border-radius: 4px;
  box-shadow: 0 0 0 8px #fff;
  margin: 8px 0;
  max-width: 100%;
}


/* ==========================================================================
   Section 68: dedicated service overview toolbar
   services/service_details.tpl puts a full-width h4 and the toolbar in one
   flex row, so the toolbar wraps onto its own line in a stretched box. Let the
   heading size to its text and the toolbar sit beside it. Also give the two
   widgets that ship without an icon (Reverse DNS, Bandwidth graphs) one, so
   every button in the row has the same shape.
   ========================================================================== */
.cloud:has(> ul.service-header-menu) > h4 {
  width: auto !important;
  flex: 1 1 auto;
  margin: 0;
}
.cloud > ul.service-header-menu#vm-menu {
  width: auto !important;
  max-width: 100% !important;
  top: 0 !important;
  flex: 0 1 auto;
}
.widg-image.widg_reverse_dns::before { content: "swap_horiz"; }
.widg-image.widg_l_graphs::before { content: "show_chart"; }
.widg-image.widg_reverse_dns,
.widg-image.widg_l_graphs { width: 26px; height: 25.28px; }

/* Section 68 (cont.): VPS right-hand sub-menu. Items were right-aligned with
   zero padding, so labels touched the panel edge and the Usage caret clipped.
   Left-align, pad, and line the top up with the Server details bar. */
.cloud-top .cloud-nav ul.level-1 > li > a {
  text-align: left !important;
  padding: 0 16px !important;
}

/* ==========================================================================
   Section 69: VPS sub-page consistency + mobile notifications overflow
   a) The mobile notifications dropdown is 400px wide and anchored off the bell,
      so on a 390px phone it widens every page. Pin it to the viewport.
   b) Sub-page title bars were 32/40/52px depending on the page. Give every
      title-only bar the Overview bar's 40px and left-align its heading.
      Tab-strip bars (Storage, Snapshots, Usage) keep their own layout.
   c) Left sub-menu: the rule from Section 68 offset the menu for the old
      right-hand layout. Align its top with the title bar, and give the Usage
      children the same left padding as their parents.
   ========================================================================== */
@media (max-width: 575.98px) {
  /* Anchored to the bell with left:-130px and 400px wide, it ends 80px past a
     phone screen even while hidden. Pin it to the viewport instead. */
  .dropdown-menu.notifications-drop {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
  }
}
#content-cloud .header-bar:not(:has(.sub-ul)) {
  display: flex !important;
  align-items: center !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
}
#content-cloud .header-bar:not(:has(.sub-ul)) > h3 {
  margin: 0 !important;
  text-align: left !important;
}
.cloud-top > .cloud-header { margin: 0 !important; }
.cloud-top .cloud-nav { display: flow-root; margin: 0 !important; padding: 0 !important; }
.cloud-top .cloud-nav ul.level-1 { margin-top: 76px !important; }
/* Most pages render the hostname h1 above the nav (22px + margins); Billing does not. */
.cloud-top:has(> .cloud-header h1) .cloud-nav ul.level-1 { margin-top: 32px !important; }
.cloud-top .cloud-nav .dropdown-menu a {
  text-align: left !important;
  padding-left: 16px !important;
}