/* ============================================================
   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 {
  --vw-bg-base:        #0d0f14;
  --vw-bg-card:        #141720;
  --vw-bg-border:      #1e2433;
  --vw-bg-hover:       rgba(30, 36, 51, 0.5);
  --vw-bg-subtle:      rgba(30, 36, 51, 0.3);
  --vw-text-primary:   #edf0f6;
  --vw-text-secondary: #9dafc6;
  --vw-text-muted:     #6b7a8d;
  --vw-brand:          #009bdb;
  --vw-brand-hover:    #0088c2;
  --vw-brand-green:    #6bc453;
  --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);
}

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

.navbar .navbar-body {
  background-color: var(--vw-bg-card);
  border-bottom-color: var(--vw-bg-border);
}

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

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

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

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

.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) !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) !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) !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/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) !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 -- */
.interface-status.up {
  color: #6bc453 !important;
  background: rgba(107, 196, 83, 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) !important;
}

.cloud a:not(.btn):hover {
  color: #0088c2 !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;
}