/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* ---------- Site-wide dark theme base ----------
   Phase 1: global background/text/link colors so no page shows
   a jarring white canvas. Individual components (tables, panels,
   buttons, alerts) still use WHMCS's default light styling on top
   of this dark base until restyled page-by-page.
------------------------------------------------------ */

:root{
  --ob-bg:#0a0e17;
  --ob-surface:#111826;
  --ob-line:#232d40;
  --ob-text:#eaeff5;
  --ob-muted:#8a93a6;
  --ob-green:#00e5a0;
}

html, body{
  background-color: var(--ob-bg) !important;
  color: var(--ob-text);
}

section#header,
section#main-menu,
.navbar-default,
section#main-body,
section#footer{
  background-color: var(--ob-bg) !important;
}

section#header,
section#footer{
  border-color: var(--ob-line) !important;
}

.navbar-default{
  border-color: var(--ob-line) !important;
}

.navbar-default .navbar-nav > li > a{
  color: var(--ob-muted) !important;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a{
  color: var(--ob-text) !important;
  background-color: var(--ob-surface) !important;
}

section#footer,
section#footer p{
  color: var(--ob-muted) !important;
}
section#footer .back-to-top{
  color: var(--ob-muted) !important;
}
section#footer .back-to-top:hover{
  color: var(--ob-text) !important;
}

h1, h2, h3, h4, h5, h6,
.header-lined h1{
  color: var(--ob-text);
}

a{
  color: var(--ob-green);
}
a:hover,
a:focus{
  color: #1ff5b3;
}

.top-nav a,
.top-nav{
  color: var(--ob-muted);
}
.top-nav a:hover{
  color: var(--ob-text);
}

section#header .logo img{
  background: #fff;
  border-radius: 6px;
  padding: 4px 10px;
}

/* ---------- Phase 2: shared components, every page ----------
   Restyles WHMCS's default light Bootstrap components (panels, forms,
   tables, dropdowns, modals) so they blend with the Phase 1 dark base
   above everywhere, not just the hand-themed pages (homepage, login,
   store, etc.). Brand-colored buttons (btn-success/btn-danger/btn-primary)
   are left untouched on purpose.
------------------------------------------------------ */

/* Panels / cards (sidebar boxes, dashboard widgets, pricing cards) */
.panel,
.card{
  background-color: var(--ob-surface) !important;
  border-color: var(--ob-line) !important;
}
.panel-heading,
.card-header,
.panel-body,
.card-body,
.panel-footer,
.card-footer{
  background-color: var(--ob-surface) !important;
  border-color: var(--ob-line) !important;
  color: var(--ob-text) !important;
}
.panel-title,
.panel-title a,
.panel-title i,
.panel-heading i,
.card-header i{
  color: var(--ob-text) !important;
}

/* List groups (sidebar nav links, category/action lists) */
.list-group-item{
  background-color: var(--ob-surface) !important;
  color: var(--ob-text) !important;
  border-color: var(--ob-line) !important;
}
.list-group-item:hover,
.list-group-item.active{
  background-color: var(--ob-line) !important;
  color: var(--ob-text) !important;
}

/* Form controls: inputs/selects/textareas default to a white background */
.form-control,
select,
.custom-select,
textarea{
  background-color: var(--ob-surface) !important;
  color: var(--ob-text) !important;
  border-color: var(--ob-line) !important;
}
select option{
  background-color: var(--ob-surface) !important;
  color: var(--ob-text) !important;
}
.form-control::placeholder{
  color: var(--ob-muted) !important;
}
.form-control:focus,
select:focus{
  background-color: var(--ob-surface) !important;
  color: var(--ob-text) !important;
}
/* Ticket/message markdown editor textarea — the stock theme targets it
   with a 2-class+element selector (.md-editor>textarea.markdown-editor)
   that beats a plain .form-control rule on specificity; match it. */
.md-editor textarea.markdown-editor,
.md-editor.md-fullscreen-mode .md-input{
  background-color: var(--ob-surface) !important;
  color: var(--ob-text) !important;
}
.md-editor > .btn-toolbar,
.md-editor .md-footer,
.md-editor > .md-header{
  background-color: var(--ob-surface) !important;
  border-color: var(--ob-line) !important;
}
.markdown-editor-status{
  color: var(--ob-muted) !important;
}

/* Tables (invoice lists, ticket lists, product tables, etc.) */
.table{
  color: var(--ob-text) !important;
}
.table > thead > tr > th,
.table > tbody > tr > td,
.table > tbody > tr > th{
  border-color: var(--ob-line) !important;
}
.table-striped > tbody > tr:nth-of-type(odd),
.table > tbody > tr{
  background-color: var(--ob-surface) !important;
}
.table-hover > tbody > tr:hover{
  background-color: var(--ob-line) !important;
}
thead{
  background-color: var(--ob-bg) !important;
}

/* Dropdown menus (notification bell, language selector, account menu) */
.dropdown-menu{
  background-color: var(--ob-surface) !important;
  border-color: var(--ob-line) !important;
}
.dropdown-menu > li > a{
  color: var(--ob-text) !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus{
  background-color: var(--ob-line) !important;
  color: var(--ob-text) !important;
}

/* Tab navigation (e.g. "Apply Promo Code" on the cart page) defaults to
   a white active-tab background. The stock stylesheet targets this with
   an ID-qualified selector (#order-standard_cart ...) that loads after
   this file, so plain classes here lose on both specificity and source
   order — match its selector shape to win. */
.nav-tabs{
  border-color: var(--ob-line) !important;
}
.nav-tabs > li > a,
.nav-link{
  background-color: var(--ob-surface) !important;
  color: var(--ob-text) !important;
  border-color: var(--ob-line) !important;
}
.nav-tabs > li.active > a,
.nav-link.active{
  background-color: var(--ob-line) !important;
  color: var(--ob-text) !important;
}
#order-standard_cart .view-cart-tabs .nav-tabs a,
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded=true],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected=true]{
  background-color: var(--ob-surface) !important;
  color: var(--ob-text) !important;
  border-color: var(--ob-line) !important;
}

/* Order summary box (cart/checkout) ships with a mid-gray (#666)
   background that clashes with the dark theme and has weak text contrast.
   Stock CSS uses #order-standard_cart .order-summary (ID-qualified, loads
   after this file) so match that selector shape to actually win. */
.order-summary,
#order-standard_cart .order-summary{
  background-color: var(--ob-surface) !important;
  color: var(--ob-text) !important;
}
.order-summary h2,
.order-summary span,
.order-summary .subtotal,
.order-summary .recurring-totals,
#order-standard_cart .order-summary h2,
#order-standard_cart .order-summary span,
#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .recurring-totals,
#order-standard_cart .order-summary .total-due-today,
#order-standard_cart .order-summary .btn-continue-shopping{
  color: var(--ob-text) !important;
}
#order-standard_cart .order-summary .btn-continue-shopping:hover{
  color: var(--ob-green) !important;
}

/* Rest of the #order-standard_cart checkout flow: payment form, promo
   box, cart item rows, gateway checkout, captcha, upsells. All use the
   same ID-qualified stock selector pattern as above. */
#order-standard_cart .field,
#order-standard_cart .form-control{
  background-color: var(--ob-surface) !important;
  color: var(--ob-text) !important;
  border-color: var(--ob-line) !important;
}
#order-standard_cart .summary-container,
#order-standard_cart .apply-credit-container,
#order-standard_cart .cc-input-container,
#order-standard_cart .view-cart-tabs .tab-content,
#order-standard_cart .view-cart-promotion-code,
#order-standard_cart .view-cart-gateway-checkout,
#order-standard_cart .product-info,
#order-standard_cart .domain-selection-options .option,
#order-standard_cart .default-captcha{
  background-color: var(--ob-surface) !important;
  color: var(--ob-text) !important;
  border-color: var(--ob-line) !important;
}
#order-standard_cart .view-cart-items .item{
  background-color: var(--ob-surface) !important;
  color: var(--ob-text) !important;
}
#order-standard_cart .view-cart-items .item:nth-child(even){
  background-color: var(--ob-line) !important;
}
#order-standard_cart .products .product,
#order-standard_cart .products .product header{
  background-color: var(--ob-surface) !important;
  color: var(--ob-text) !important;
  border-color: var(--ob-line) !important;
}
#order-standard_cart .mc-promo{
  background-color: var(--ob-surface) !important;
  border-color: var(--ob-line) !important;
}
#order-standard_cart .mc-promo .body{
  background-color: var(--ob-surface) !important;
  color: var(--ob-text) !important;
}
#order-standard_cart .account-select-container div.account{
  background-color: var(--ob-surface) !important;
  color: var(--ob-text) !important;
}
#order-standard_cart .account-select-container div.account.active{
  background-color: var(--ob-line) !important;
}

/* Modals (Added to Cart, password generator, confirmation dialogs) */
.modal-content{
  background-color: var(--ob-surface) !important;
  color: var(--ob-text) !important;
}
.modal-header,
.modal-footer{
  border-color: var(--ob-line) !important;
}

/* Plain/default buttons only — brand-colored buttons keep their own
   explicit colors since those rules are more specific. */
.btn-default{
  background-color: var(--ob-surface) !important;
  color: var(--ob-text) !important;
  border-color: var(--ob-line) !important;
}
.btn-default:hover{
  background-color: var(--ob-line) !important;
}

/* Product/pricing cards (store pages) */
.product{
  background-color: var(--ob-surface) !important;
  border-color: var(--ob-line) !important;
  color: var(--ob-text) !important;
}
.product header,
.product .product-desc,
.product .product-desc p,
.product .product-desc ul,
.product .product-desc li,
.product footer,
.product .product-pricing,
.product .product-pricing .price{
  background-color: transparent !important;
  color: var(--ob-text) !important;
  border-color: var(--ob-line) !important;
}
.product header span{
  color: var(--ob-text) !important;
}

/* "Add Web Hosting" / "Transfer your domain" promo boxes */
.domain-promo-box{
  background-color: var(--ob-surface) !important;
  color: var(--ob-text) !important;
}
.domain-promo-box h3,
.domain-promo-box p{
  color: var(--ob-text) !important;
}