/* =============================================================
   Halvar.io brand palette override for WHMCS Twenty-One theme
   File location: <whmcs-root>/templates/twenty-one/custom.css

   WHMCS loads this file automatically AFTER the theme's own
   stylesheet, so every rule here wins.  The file is NOT shipped
   as part of the default theme, so WHMCS updates will never
   overwrite it.

   Extracted from halvar.io.
   ============================================================= */


/* ── 1. Design tokens ──────────────────────────────────────── */
:root {
  --hal-teal:           #3da897;
  --hal-teal-dark:      #339a89;
  --hal-teal-darker:    #2a7d72;
  --hal-teal-light:     #ebf6f4;
  --hal-teal-alpha13:   rgba(61, 168, 151, 0.13);
  --hal-teal-alpha25:   rgba(61, 168, 151, 0.25);

  --hal-amber:          #ea9a03;
  --hal-amber-dark:     #c98200;
  --hal-amber-light:    #fff4e0;

  --hal-navy-deep:      #002b40;
  --hal-navy-mid:       #063c57;
  --hal-navy:           #192a3d;

  --hal-text:           #3a4f66;
  --hal-text-muted:     #6b7f94;
  --hal-border:         #e1e8ed;
  --hal-bg-soft:        #f2f5f7;
  --hal-white:          #ffffff;

  --hal-green:          #6eb700;
  --hal-green-dark:     #5a9600;
  --hal-red:            #dc3545;
}


/* ── 2. Base ────────────────────────────────────────────────── */
body { color: var(--hal-text); }

a { color: var(--hal-teal-darker); }
a:hover, a:focus {
  color: var(--hal-teal-dark);
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--hal-navy);
}


/* ── 3. Navigation bar ──────────────────────────────────────── */
.navbar, #nav-bar, nav.navbar, .navigation, #header, .header-main, header.header {
  background-color: var(--hal-teal) !important;
  border-bottom: 2px solid var(--hal-teal-dark) !important;
}

.navbar-nav .nav-link,
.navbar-nav .nav-item > a,
#nav-bar a,
.navigation a {
  color: var(--hal-white) !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .active > .nav-link,
.navbar-nav .nav-item.active > a {
  color: var(--hal-teal-light) !important;
  background-color: var(--hal-teal-dark) !important;
}

.navbar-brand, .navbar-brand:hover { color: var(--hal-white) !important; }

.navbar .dropdown-menu { border-top: 3px solid var(--hal-teal); }
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus {
  background-color: var(--hal-teal-light);
  color: var(--hal-navy);
}
.navbar .dropdown-item.active, .navbar .dropdown-item:active {
  background-color: var(--hal-teal) !important;
  color: var(--hal-white) !important;
}


/* ── 4. Sidebar / client-area navigation ────────────────────── */
#sidebar .list-group-item, .sidebar .list-group-item {
  border-left: 3px solid transparent;
  transition: background-color 0.12s ease, border-left-color 0.12s ease;
}

#sidebar .list-group-item:hover, .sidebar .list-group-item:hover {
  background-color: var(--hal-teal-light);
  color: var(--hal-teal-darker);
}

#sidebar .list-group-item.active,
.sidebar .list-group-item.active,
#sidebar a.active, .sidebar a.active {
  background-color: var(--hal-teal) !important;
  border-color: var(--hal-teal) !important;
  border-left-color: var(--hal-teal-dark) !important;
  color: var(--hal-white) !important;
}


/* ── 5. Buttons ─────────────────────────────────────────────── */
.btn-primary, input[type="submit"].btn-primary, button.btn-primary {
  background-color: var(--hal-amber) !important;
  border-color: var(--hal-amber) !important;
  color: var(--hal-navy) !important;
  font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-color: var(--hal-amber-dark) !important;
  border-color: var(--hal-amber-dark) !important;
  color: var(--hal-navy) !important;
}
.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(234, 154, 3, 0.4) !important;
}

.btn-secondary, .btn-default {
  background-color: transparent !important;
  border-color: var(--hal-teal) !important;
  color: var(--hal-teal-darker) !important;
}
.btn-secondary:hover, .btn-secondary:focus,
.btn-default:hover, .btn-default:focus {
  background-color: var(--hal-teal-light) !important;
  border-color: var(--hal-teal-dark) !important;
  color: var(--hal-teal-dark) !important;
}

.btn-info {
  background-color: var(--hal-teal) !important;
  border-color: var(--hal-teal-dark) !important;
  color: var(--hal-white) !important;
}
.btn-info:hover, .btn-info:focus {
  background-color: var(--hal-teal-dark) !important;
  border-color: var(--hal-teal-darker) !important;
}

.btn-warning {
  background-color: var(--hal-amber) !important;
  border-color: var(--hal-amber-dark) !important;
  color: var(--hal-navy) !important;
}
.btn-warning:hover, .btn-warning:focus {
  background-color: var(--hal-amber-dark) !important;
  color: var(--hal-navy) !important;
}

.btn-danger {
  background-color: var(--hal-red) !important;
  border-color: #b82030 !important;
  color: var(--hal-white) !important;
}

.btn-link { color: var(--hal-teal-darker) !important; }
.btn-link:hover { color: var(--hal-teal) !important; }


/* ── 6. Alerts ──────────────────────────────────────────────── */
.alert-info {
  background-color: var(--hal-teal-alpha13) !important;
  border-color: var(--hal-teal) !important;
  color: var(--hal-teal-darker) !important;
}
.alert-info a { color: var(--hal-teal-dark) !important; }

.alert-success {
  background-color: #f0fae8 !important;
  border-color: var(--hal-green) !important;
  color: #3d6200 !important;
}
.alert-success a { color: #3d6200 !important; }

.alert-warning {
  background-color: var(--hal-amber-light) !important;
  border-color: var(--hal-amber) !important;
  color: #7a5100 !important;
}
.alert-warning a { color: #7a5100 !important; }

.alert-danger {
  background-color: #fdf2f2 !important;
  border-color: var(--hal-red) !important;
  color: #7c2a2a !important;
}
.alert-danger a { color: #7c2a2a !important; }


/* ── 7. Form controls ───────────────────────────────────────── */
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--hal-teal) !important;
  box-shadow: 0 0 0 0.2rem var(--hal-teal-alpha25) !important;
  outline: none;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--hal-teal) !important;
  border-color: var(--hal-teal) !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem var(--hal-teal-alpha25) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--hal-teal) !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--hal-teal) !important;
}


/* ── 8. Tables ──────────────────────────────────────────────── */
.table thead th, table thead th, .table > thead > tr > th {
  background-color: var(--hal-navy) !important;
  color: var(--hal-white) !important;
  border-bottom: 2px solid var(--hal-teal) !important;
  border-top: none !important;
}

.table-striped > tbody > tr:nth-of-type(odd),
table.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--hal-teal-light) !important;
}

.table-hover > tbody > tr:hover,
table.table-hover > tbody > tr:hover {
  background-color: rgba(61, 168, 151, 0.08) !important;
}

.table-bordered, .table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border-color: var(--hal-border) !important;
}

.table > tbody > tr.active > td, .table > tbody > tr.active > th {
  background-color: var(--hal-teal-alpha13) !important;
}


/* ── 9. Panels / Cards ──────────────────────────────────────── */
.panel { border-color: var(--hal-border) !important; }
.panel-primary { border-color: var(--hal-teal) !important; }

.panel-primary > .panel-heading,
.panel-heading,
.card-header {
  background-color: var(--hal-navy) !important;
  border-color: var(--hal-teal) !important;
  color: var(--hal-white) !important;
}

.panel-heading a, .card-header a { color: var(--hal-teal-light) !important; }

.panel-primary > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: var(--hal-teal) !important;
}


/* ── 10. Pagination ─────────────────────────────────────────── */
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover,
.page-item.active .page-link {
  background-color: var(--hal-teal) !important;
  border-color: var(--hal-teal) !important;
  color: var(--hal-white) !important;
}

.pagination > li > a, .page-link { color: var(--hal-teal-darker) !important; }

.pagination > li > a:hover, .page-link:hover {
  background-color: var(--hal-teal-light) !important;
  border-color: var(--hal-teal) !important;
  color: var(--hal-teal-dark) !important;
}


/* ── 11. Badges & labels ────────────────────────────────────── */
.badge-primary, .label-primary { background-color: var(--hal-teal) !important; color: var(--hal-white) !important; }
.badge-success, .label-success { background-color: var(--hal-green) !important; color: var(--hal-white) !important; }
.badge-info,    .label-info    { background-color: var(--hal-teal) !important; color: var(--hal-white) !important; }
.badge-warning, .label-warning { background-color: var(--hal-amber) !important; color: var(--hal-navy) !important; }
.badge-danger,  .label-danger  { background-color: var(--hal-red) !important; color: var(--hal-white) !important; }

.badge.bg-primary { background-color: var(--hal-teal) !important; color: var(--hal-white) !important; }
.badge.bg-success { background-color: var(--hal-green) !important; color: var(--hal-white) !important; }
.badge.bg-info    { background-color: var(--hal-teal) !important; color: var(--hal-white) !important; }
.badge.bg-warning { background-color: var(--hal-amber) !important; color: var(--hal-navy) !important; }


/* ── 12. Progress bars ──────────────────────────────────────── */
.progress-bar         { background-color: var(--hal-teal) !important; }
.progress-bar-info    { background-color: var(--hal-teal) !important; }
.progress-bar-success { background-color: var(--hal-green) !important; }
.progress-bar-warning { background-color: var(--hal-amber) !important; }
.progress-bar-danger  { background-color: var(--hal-red) !important; }


/* ── 13. Bootstrap text / bg utilities ──────────────────────── */
.text-primary { color: var(--hal-teal-darker) !important; }
.text-info    { color: var(--hal-teal-darker) !important; }
.text-success { color: var(--hal-green-dark) !important; }
.text-warning { color: #8a5e00 !important; }

.bg-primary { background-color: var(--hal-teal) !important; color: var(--hal-white) !important; }
.bg-info    { background-color: var(--hal-teal-light) !important; }
.bg-success { background-color: #f0fae8 !important; }
.bg-warning { background-color: var(--hal-amber-light) !important; }
.border-primary { border-color: var(--hal-teal) !important; }


/* ── 14. Nav tabs ───────────────────────────────────────────── */
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus,
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  color: var(--hal-teal-darker) !important;
  border-top-color: var(--hal-teal) !important;
  border-bottom-color: var(--hal-white) !important;
}

.nav-tabs .nav-link:hover {
  color: var(--hal-teal-darker) !important;
  border-color: var(--hal-border) !important;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: var(--hal-teal) !important;
  color: var(--hal-white) !important;
}


/* ── 15. Login / Register ───────────────────────────────────── */
#login-panel .panel-heading, #register-panel .panel-heading,
.login-panel .panel-heading, .form-signin .panel-heading,
.login-box .panel-heading {
  background-color: var(--hal-navy) !important;
  color: var(--hal-white) !important;
}

#login-panel .btn-primary, #register-panel .btn-primary,
.login-panel .btn-primary, .form-signin .btn-primary {
  background-color: var(--hal-amber) !important;
  border-color: var(--hal-amber-dark) !important;
  color: var(--hal-navy) !important;
}

.login-panel a, #login-panel a, #register-panel a {
  color: var(--hal-teal-darker) !important;
}


/* ── 16. Order / cart ──────────────────────────────────────── */
.package:hover, .product:hover, [class*="package"].hover,
.productlist .panel:hover, .packages .panel:hover {
  border-color: var(--hal-teal) !important;
  box-shadow: 0 0 0 2px var(--hal-teal-alpha13);
}

.package.selected, .package.featured, .product.selected,
[class*="package"].active, .most-popular, .recommended {
  border-color: var(--hal-teal) !important;
  background-color: var(--hal-teal-light) !important;
}

.order-btn, .orderBtn, .addToCart,
.productlist .btn-primary, .packages .btn-primary,
[id*="btnOrder"], [class*="orderbutton"] {
  background-color: var(--hal-amber) !important;
  border-color: var(--hal-amber-dark) !important;
  color: var(--hal-navy) !important;
  font-weight: 600;
}
.order-btn:hover, .orderBtn:hover, .addToCart:hover {
  background-color: var(--hal-amber-dark) !important;
}

.checkout-steps .step.active, .order-progress .active,
[class*="checkout"] .step.active, [class*="steps"] .active {
  background-color: var(--hal-teal) !important;
  color: var(--hal-white) !important;
  border-color: var(--hal-teal-dark) !important;
}

.checkout-steps .step.completed, [class*="steps"] .completed {
  background-color: var(--hal-green) !important;
  color: var(--hal-white) !important;
}

.configoptions .panel-primary, .configoptions .card-primary {
  border-color: var(--hal-teal) !important;
}


/* ── 17. Domain search ──────────────────────────────────────── */
.domain-available, .available, .domainavailable { color: var(--hal-green-dark) !important; }
.domain-unavailable, .unavailable, .domainunavailable { color: var(--hal-red) !important; }
.tldprice tr.selected, .tldlist tr:hover { background-color: var(--hal-teal-light) !important; }


/* ── 18. Invoice & billing status ───────────────────────────── */
.invoice-status-paid, .status-paid, .badge-paid,
[class*="paid"]:not([class*="unpaid"]) {
  background-color: var(--hal-green) !important;
  color: var(--hal-white) !important;
}

.invoice-status-unpaid, .status-unpaid, .badge-unpaid {
  background-color: var(--hal-amber) !important;
  color: var(--hal-navy) !important;
}

.invoice-status-overdue, .status-overdue, .badge-overdue {
  background-color: var(--hal-red) !important;
  color: var(--hal-white) !important;
}

.invoice-status-cancelled, .status-cancelled {
  background-color: var(--hal-text-muted) !important;
  color: var(--hal-white) !important;
}


/* ── 19. Service / product status ───────────────────────────── */
.status-active, .service-active, [class*="status-active"] {
  color: var(--hal-green-dark) !important;
  font-weight: 600;
}
.status-suspended, .service-suspended {
  color: var(--hal-red) !important;
  font-weight: 600;
}
.status-pending { color: #8a5e00 !important; }


/* ── 20. Support tickets ────────────────────────────────────── */
.ticket-status-open, [class*="ticket"].open { color: var(--hal-teal-darker) !important; }
.ticketreply, .ticket-reply, .staffreply { border-left: 4px solid var(--hal-teal) !important; }
.clientreply { border-left: 4px solid var(--hal-bg-soft) !important; }


/* ── 21. Footer ─────────────────────────────────────────────── */
footer, #footer, .site-footer, .footer {
  background-color: var(--hal-navy-deep) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border-top: 3px solid var(--hal-teal);
}
footer a, #footer a, .site-footer a, .footer a {
  color: var(--hal-teal-light) !important;
}
footer a:hover, #footer a:hover, .site-footer a:hover, .footer a:hover {
  color: var(--hal-white) !important;
  text-decoration: underline;
}


/* ── 22. Knowledgebase / announcements ──────────────────────── */
.announcement .panel-heading, .news .panel-heading {
  background-color: var(--hal-navy) !important;
  color: var(--hal-white) !important;
}
.kb-categories .panel-primary > .panel-heading,
.knowledgebase .panel-primary > .panel-heading {
  background-color: var(--hal-teal) !important;
}
.kb-article h3 a, .knowledgebase-article a {
  color: var(--hal-teal-darker) !important;
}


/* ── 23. Generic dropdowns ──────────────────────────────────── */
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus,
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--hal-teal-light) !important;
  color: var(--hal-navy) !important;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover,
.dropdown-item.active, .dropdown-item:active {
  background-color: var(--hal-teal) !important;
  color: var(--hal-white) !important;
}


/* ── 24. Misc widgets ───────────────────────────────────────── */
.stat-box, .home-stat, [class*="stat-"] { border-top: 3px solid var(--hal-teal); }
.credit-balance, .account-balance { color: var(--hal-teal-darker) !important; font-weight: 600; }

[style*="color: #1B62CF"], [style*="color:#1B62CF"],
[style*="color: #2575fc"], [style*="color:#2575fc"] {
  color: var(--hal-teal-darker) !important;
}
[style*="background-color: #1B62CF"], [style*="background-color:#1B62CF"],
[style*="background: #1B62CF"], [style*="background:#1B62CF"] {
  background-color: var(--hal-teal) !important;
}


/* ── 25. Order Now button (store page) ──────────────────────── */
.btn-order-now, .btn-order-now.btn-success, a.btn-order-now {
  background-color: var(--hal-amber) !important;
  border-color: var(--hal-amber-dark) !important;
  color: var(--hal-navy) !important;
  font-weight: 600;
}
.btn-order-now:hover, .btn-order-now:focus, a.btn-order-now:hover {
  background-color: var(--hal-amber-dark) !important;
  border-color: #a86d00 !important;
  color: var(--hal-navy) !important;
}


/* ── 26. Card accent top-border colours ─────────────────────── */
.card-accent-teal         { border-top-color: var(--hal-teal) !important; }
.card-accent-pomegranate  { border-top-color: var(--hal-teal) !important; }
.card-accent-sun-flower   { border-top-color: var(--hal-amber) !important; }
.card-accent-asbestos     { border-top-color: var(--hal-teal) !important; }
.card-accent-green        { border-top-color: var(--hal-green) !important; }
.card-accent-midnight-blue{ border-top-color: var(--hal-navy) !important; }


/* ── 27. Twenty-One menu links ──────────────────────────────── */
.header a, .header a.pr-4, .header .navbar a,
.main-navbar-wrapper a, .main-navbar-wrapper a.pr-4,
.main-navbar-wrapper .dropdown-toggle,
.navbar-light .pr-4,
header.header a, header.header .dropdown-toggle {
  color: var(--hal-white) !important;
  text-decoration: none !important;
}

.header a:hover, .header a:focus, .header a.pr-4:hover,
.main-navbar-wrapper a:hover, .main-navbar-wrapper a:focus,
.main-navbar-wrapper a.pr-4:hover, .navbar-light .pr-4:hover {
  color: var(--hal-teal-light) !important;
  text-decoration: none !important;
}

.header li.active > a, .header li.current > a,
.main-navbar-wrapper li.active > a, .main-navbar-wrapper .nav-item.active > a {
  color: var(--hal-white) !important;
  font-weight: 600;
  border-bottom: 2px solid var(--hal-amber);
}

.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-brand,
.navbar-light .navbar-text {
  color: var(--hal-white) !important;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--hal-teal-light) !important;
}

.cart-btn, .btn.nav-link.cart-btn {
  color: var(--hal-white) !important;
  border-color: rgba(255,255,255,0.4) !important;
}
.cart-btn:hover {
  background-color: var(--hal-teal-dark) !important;
  border-color: var(--hal-white) !important;
}

.header .form-control, .main-navbar-wrapper .form-control {
  background-color: rgba(255,255,255,0.95) !important;
  border-color: rgba(255,255,255,0.4) !important;
  color: var(--hal-navy) !important;
}
.header .form-control:focus {
  background-color: var(--hal-white) !important;
  border-color: var(--hal-amber) !important;
  box-shadow: 0 0 0 0.15rem rgba(234, 154, 3, 0.35) !important;
}


/* ── 28. Unify all primary CTAs to amber ────────────────────── */
a.btn-success, button.btn-success, input.btn-success,
.btn.btn-success, .btn-success.btn-block,
.btn-success.btn-sm, .btn-success.btn-lg {
  background-color: var(--hal-amber) !important;
  border-color: var(--hal-amber) !important;
  color: var(--hal-navy) !important;
  font-weight: 600;
}
a.btn-success:hover, button.btn-success:hover,
.btn.btn-success:hover, .btn.btn-success:focus,
.btn-success:active, .btn-success.active {
  background-color: var(--hal-amber-dark) !important;
  border-color: var(--hal-amber-dark) !important;
  color: var(--hal-navy) !important;
}

.btn-transfer, .continue-btn, .checkout-btn, .proceed-btn {
  background-color: var(--hal-amber) !important;
  border-color: var(--hal-amber-dark) !important;
  color: var(--hal-navy) !important;
}


/* ── 29. Product cards – header & price box ─────────────────── */
.product > header, .product header,
.products-list .product header, .productsList .product header {
  background-color: var(--hal-navy) !important;
  color: var(--hal-white) !important;
  border-bottom: 2px solid var(--hal-teal) !important;
  padding: 12px 18px !important;
}

.product > header span,
.product > header h3, .product > header h4,
.product header * {
  color: var(--hal-white) !important;
}

.product-pricing, .pricing-box, [class*="pricing"][class*="box"], .product .pricing {
  background-color: var(--hal-navy) !important;
  color: var(--hal-white) !important;
  border: 1px solid var(--hal-teal-dark) !important;
}
.product-pricing *, .pricing-box * { color: var(--hal-white) !important; }


/* ── 30. Sidebar list-group items: clean light defaults ─────── */
/* Idle: white bg, dark text — like a normal Bootstrap list item.  */
/* The previous version mistakenly painted every :first-child navy */
/* which broke real menu items like "Mar 2026" in announcements.   */

.list-group-item.list-group-item-action,
a.list-group-item,
.sidebar .list-group-item,
aside .list-group-item {
  background-color: var(--hal-white);
  color: var(--hal-text);
  border-color: var(--hal-border);
}

/* Hover */
.list-group-item.list-group-item-action:hover,
a.list-group-item:hover,
.sidebar .list-group-item:hover,
aside .list-group-item:hover {
  background-color: var(--hal-teal-light) !important;
  color: var(--hal-teal-darker) !important;
  border-color: var(--hal-border) !important;
}

/* Only the truly empty/decorative .list-group-item-secondary blocks
   (Twenty-One uses these as visual separators) get the navy bar */
.list-group-item.list-group-item-secondary {
  background-color: var(--hal-navy) !important;
  border-color: var(--hal-navy) !important;
  color: var(--hal-white) !important;
  border-bottom: 3px solid var(--hal-teal) !important;
}


/* ── 31. Header dropdown menus ──────────────────────────────── */
.header .dropdown-menu, .main-navbar-wrapper .dropdown-menu {
  border: none !important;
  border-top: 3px solid var(--hal-teal) !important;
  box-shadow: 0 6px 18px rgba(25,42,61,0.15) !important;
}

.header .dropdown-menu a, .main-navbar-wrapper .dropdown-menu a {
  color: var(--hal-text) !important;
  padding: 8px 18px !important;
}

.header .dropdown-menu a:hover, .main-navbar-wrapper .dropdown-menu a:hover,
.header .dropdown-item:hover, .main-navbar-wrapper .dropdown-item:hover {
  background-color: var(--hal-teal-light) !important;
  color: var(--hal-navy) !important;
}


/* ── 32. Breadcrumb ─────────────────────────────────────────── */
.breadcrumb, ol.breadcrumb, .breadcrumb-bar {
  background-color: var(--hal-bg-soft) !important;
  border-bottom: 1px solid var(--hal-border);
}
.breadcrumb a, .breadcrumb-bar a { color: var(--hal-teal-darker) !important; }
.breadcrumb .active, .breadcrumb-item.active { color: var(--hal-text) !important; }


/* ── 33. Return to admin tab ───────────────────────────────── */
.return-to-admin, [class*="return-to-admin"] {
  background-color: var(--hal-navy) !important;
  color: var(--hal-white) !important;
  border-color: var(--hal-teal) !important;
}


/* ── 34. Card body content ─────────────────────────────────── */
.panel-body, .card-body, .product .card-body {
  color: var(--hal-text);
  background-color: var(--hal-white);
}


/* ── 35. Universal button consistency ──────────────────────── */
.btn {
  border-radius: 4px !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
.btn-lg { font-weight: 600 !important; }
.btn:disabled, .btn.disabled { opacity: 0.55 !important; cursor: not-allowed !important; }


/* ── 36. Homepage product-category cards: equal heights ─────── */
/* Twenty-One uses .card-columns (CSS multi-column masonry) which   */
/* gives every card a different height.  Override with CSS Grid so  */
/* every card in a row is exactly the same size, equal to the       */
/* tallest in that row.                                             */

.card-columns.home {
  column-count: unset !important;
  column-gap: unset !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
}

@media (max-width: 991px) {
  .card-columns.home { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 575px) {
  .card-columns.home { grid-template-columns: 1fr !important; }
}

.card-columns.home .card,
.card-columns .card.mb-3 {
  height: 220px !important;
  min-height: 220px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid var(--hal-border) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.card-columns.home .card:hover {
  border-color: var(--hal-teal) !important;
  box-shadow: 0 4px 12px rgba(61, 168, 151, 0.15);
  transform: translateY(-2px);
}

.card-columns.home .card-body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  overflow: hidden;
}

.card-columns.home .card-title,
.card-columns.home .pricing-card-title {
  margin-bottom: 0.75rem !important;
  color: var(--hal-navy) !important;
}

.card-columns.home .card-body .btn {
  margin-top: auto !important;
  padding: 12px 28px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  min-width: 180px;
  min-height: 44px;
  line-height: 1.3;
}


/* ── 37. Headings inside dark headers must be white ─────────── */
/* Global rule (§2) sets all h1-h6 to navy. Inside navy-bg containers
   (.card-header, .panel-heading, .product header, footer, .navbar)
   that produces navy-on-navy = invisible.  Force white.            */

.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6,
.card-header .card-title,
.card-header .card-title.m-0,
.card-header h3.card-title,
.card-header h3.card-title.m-0,
.card-header .h1, .card-header .h2, .card-header .h3,
.card-header .h4, .card-header .h5, .card-header .h6,

.panel-heading h1, .panel-heading h2, .panel-heading h3,
.panel-heading h4, .panel-heading h5, .panel-heading h6,
.panel-heading .panel-title,

.product > header h1, .product > header h2, .product > header h3,
.product > header h4, .product > header h5, .product > header h6,
.product > header .card-title,
.product header h1, .product header h2, .product header h3,
.product header h4, .product header h5, .product header h6,

.product-pricing h1, .product-pricing h2, .product-pricing h3,
.product-pricing h4, .product-pricing h5, .product-pricing h6,

.bg-primary h1, .bg-primary h2, .bg-primary h3,
.bg-primary h4, .bg-primary h5, .bg-primary h6,

.navbar h1, .navbar h2, .navbar h3,
.navbar h4, .navbar h5, .navbar h6,
.header h1, .header h2, .header h3,
.header h4, .header h5, .header h6,

footer h1, footer h2, footer h3,
footer h4, footer h5, footer h6,
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6 {
  color: var(--hal-white) !important;
}

/* Links inside dark headers also need to be readable */
.card-header a,
.panel-heading a,
.product > header a,
.product header a {
  color: var(--hal-teal-light) !important;
}

.card-header a:hover,
.panel-heading a:hover,
.product > header a:hover,
.product header a:hover {
  color: var(--hal-white) !important;
}


/* ── 38. Sidebar menu items (sidebar-menu-item-wrapper) ─────── */
/* WHMCS uses this structure for KB / announcements / services    */
/* sidebars:                                                      */
/*   .list-group-item                                             */
/*     └─ .sidebar-menu-item-wrapper                              */
/*         ├─ .sidebar-menu-item-label > .truncate                */
/*         └─ .sidebar-menu-item-badge > .badge                   */
/* When the parent .list-group-item is .active, the inner label   */
/* text and the badge need to invert for legibility on teal.      */

/* Default (non-active) wrapper layout */
.sidebar-menu-item-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 8px;
}

.sidebar-menu-item-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: var(--hal-text);
}

.sidebar-menu-item-label .truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-menu-item-badge {
  flex: 0 0 auto !important;
}

.sidebar-menu-item-badge .badge {
  background-color: var(--hal-bg-soft) !important;
  color: var(--hal-text) !important;
  border: 1px solid var(--hal-border);
  font-weight: 600;
  min-width: 22px;
  text-align: center;
}

/* Hover state */
.list-group-item:hover .sidebar-menu-item-label,
.list-group-item:hover .sidebar-menu-item-label .truncate {
  color: var(--hal-teal-darker) !important;
}

.list-group-item:hover .sidebar-menu-item-badge .badge {
  background-color: var(--hal-white) !important;
  border-color: var(--hal-teal) !important;
  color: var(--hal-teal-dark) !important;
}

/* ACTIVE state — parent is teal, invert everything inside */
.list-group-item.active .sidebar-menu-item-wrapper,
.list-group-item.active .sidebar-menu-item-label,
.list-group-item.active .sidebar-menu-item-label .truncate,
a.list-group-item.active .sidebar-menu-item-label,
a.list-group-item.active .sidebar-menu-item-label .truncate {
  color: var(--hal-white) !important;
}

.list-group-item.active .sidebar-menu-item-badge .badge,
a.list-group-item.active .sidebar-menu-item-badge .badge {
  background-color: var(--hal-white) !important;
  color: var(--hal-teal-dark) !important;
  border-color: var(--hal-white) !important;
  font-weight: 700;
}

/* If the active item is inside a non-list-group element */
.active > .sidebar-menu-item-wrapper .sidebar-menu-item-label,
.active > .sidebar-menu-item-wrapper .truncate,
.current > .sidebar-menu-item-wrapper .sidebar-menu-item-label,
.current > .sidebar-menu-item-wrapper .truncate {
  color: var(--hal-white) !important;
}

.active > .sidebar-menu-item-wrapper .badge,
.current > .sidebar-menu-item-wrapper .badge {
  background-color: var(--hal-white) !important;
  color: var(--hal-teal-dark) !important;
  border-color: var(--hal-white) !important;
}

/* ── 39. Client area: white text on coloured headers ────────── */
/* In the logged-in client area (clientarea.php, /services, etc.)  */
/* WHMCS renders many panel/card headers with teal or navy bg.     */
/* My global heading rule made those titles dark navy/green —       */
/* invisible on coloured surfaces.  Force white inside any          */
/* coloured container.                                              */

/* Any heading or link sitting on a teal/navy/amber background */
.bg-primary, .bg-primary *,
.bg-info, .bg-info *,
[class*="bg-teal"], [class*="bg-teal"] * {
  /* don't blanket-set; handle below */
}

/* Headings & links inside teal panels */
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-primary .card-title, .bg-primary .panel-title,
.bg-primary a, .bg-primary .text-muted,
.panel-info > .panel-heading h1, .panel-info > .panel-heading h2,
.panel-info > .panel-heading h3, .panel-info > .panel-heading h4,
.panel-info > .panel-heading .panel-title,
.panel-info > .panel-heading a {
  color: var(--hal-white) !important;
}

/* Links and headings inside navy or teal client-area sections */
.client-home h1, .client-home h2, .client-home h3,
.client-home .panel-heading, .client-home .card-header {
  color: var(--hal-navy) !important;
}

/* Any panel/card-header that is teal-coloured */
.panel-heading[style*="background-color: rgb(61, 168, 151)"],
.panel-heading[style*="background:#3da897"],
.card-header[style*="background-color: rgb(61, 168, 151)"],
.card-header[style*="background:#3da897"],
.panel.panel-info > .panel-heading,
.card.bg-info > .card-header {
  background-color: var(--hal-navy) !important;
  color: var(--hal-white) !important;
}

.panel.panel-info > .panel-heading *,
.card.bg-info > .card-header *,
.panel.panel-info > .panel-heading a,
.card.bg-info > .card-header a {
  color: var(--hal-white) !important;
}

/* Catch-all: any element with a teal background must show white text */
[style*="background-color: #3da897"],
[style*="background-color:#3da897"],
[style*="background: #3da897"],
[style*="background:#3da897"] {
  color: var(--hal-white) !important;
}
[style*="background-color: #3da897"] *,
[style*="background-color:#3da897"] *,
[style*="background: #3da897"] *,
[style*="background:#3da897"] *,
[style*="background-color: #3da897"] a,
[style*="background-color:#3da897"] a,
[style*="background: #3da897"] a,
[style*="background:#3da897"] a {
  color: var(--hal-white) !important;
}

/* Client area "Hello, ..." welcome strip and similar coloured banners */
.welcome-bar, .welcome-banner, .client-welcome,
.greeting-bar, .greeting-banner,
[class*="welcome"][class*="bar"],
[class*="welcome"][class*="banner"] {
  background-color: var(--hal-navy) !important;
  color: var(--hal-white) !important;
}
.welcome-bar *, .welcome-banner *, .client-welcome *,
.greeting-bar *, .greeting-banner *,
[class*="welcome"][class*="bar"] *,
[class*="welcome"][class*="banner"] * {
  color: var(--hal-white) !important;
}
.welcome-bar a, .welcome-banner a,
.greeting-bar a, .greeting-banner a {
  color: var(--hal-teal-light) !important;
  text-decoration: underline;
}
.welcome-bar a:hover, .welcome-banner a:hover { color: var(--hal-white) !important; }

/* ── End Halvar.io WHMCS override ─────────────────────────── */