/* Shard Development Client Portal
   Font system matched to sharddevelopment.com
   Dark-first. Lumen reserved for one primary CTA per view. */

/* === Variable Fonts === */
@font-face { font-family: "Inter Variable"; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-variable.woff2") format("woff2"); }
@font-face { font-family: "Sora Variable"; font-weight: 100 900; font-display: swap; src: url("../fonts/sora-variable.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono Variable"; font-weight: 100 900; font-display: swap; src: url("../fonts/jetbrains-mono-variable.woff2") format("woff2"); }

/* === Design Tokens === */
:root {
  --sd-void: #0A0814;
  --sd-abyss: #130F24;
  --sd-dusk: #1F1A3A;
  --sd-moonlight: #ECE8F7;
  --sd-haze: #9A92B8;
  --sd-amethyst: #9B6BFF;
  --sd-orchid: #B79BFF;
  --sd-glimmer: #EADFFF;
  --sd-royal: #5B2FD1;
  --sd-deep: #3E1F8F;
  --sd-lumen: #F2C36B;
  --sd-success: #5EE6A8;
  --sd-warning: #FF9F5A;
  --sd-danger: #FF6B8B;
  --sd-radius: 10px;
  --sd-font-display: "Sora Variable", ui-sans-serif, system-ui, sans-serif;
  --sd-font-body: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --sd-font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, monospace;
}

/* === Font Rendering === */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* === Base Typography === */
html, body { background: var(--sd-void); color: var(--sd-moonlight); overflow-x: hidden; }
body {
  font-family: var(--sd-font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.625;
}

/* Display: Sora Variable 600 */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title, .tile .title, .tile .stat,
.modal-title, .page-title {
  font-family: var(--sd-font-display) !important;
  font-weight: 600 !important;
  color: var(--sd-moonlight);
}
h1, .h1 { letter-spacing: -1.8px; }
h2, .h2 { letter-spacing: -1.08px; }

/* Body: Inter Variable 400 — catch-all for WHMCS's Open Sans */
p, li, td, dd, dt, span, div,
.form-control, .custom-select, select, textarea,
.input-group-text, .form-text, .help-block,
.alert, .toast-body, .popover-body, .tooltip-inner,
.card-body, .card-text, .panel-body, .well,
.modal-body, .list-group-item,
.article-content, .kb-article,
.description, .info-text,
.dataTables_info, .dataTables_length, .dataTables_filter,
.domain-checker-container, .domain-checker-container input,
.domain-checker-container textarea,
.login-form, .logincontainer,
.order-summary, .view-cart-items-header {
  font-family: var(--sd-font-body) !important;
}

/* Mono labels: JetBrains Mono Variable 400, 12px, uppercase, 1.2px tracking */
#nav a, #nav > li > a,
.main-navbar-wrapper #nav a,
.main-navbar-wrapper .navbar-nav a,
.main-navbar-wrapper .navbar-nav .nav-link,
.main-navbar-wrapper .navbar-nav.ml-auto a,
.main-navbar-wrapper .navbar-nav.ml-auto .nav-link,
.navbar-light .navbar-nav .nav-link,
header.header .topbar .btn,
header.header .topbar .nav-link,
.dropdown-menu .dropdown-item,
.breadcrumb-item, .breadcrumb-item a,
.breadcrumb-item + .breadcrumb-item::before,
.action-icon-btns a, .action-icon-btns a span,
.action-icon-btns a .title,
.sidebar .card-header .card-title,
th, .table thead th, label.text-uppercase,
code, kbd, pre, .label, .badge,
.dataTables_wrapper .dataTables_paginate .paginate_button {
  font-family: var(--sd-font-mono) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
}

/* Buttons: Inter Variable 600 */
.btn {
  font-family: var(--sd-font-body) !important;
  font-weight: 600 !important;
  border-radius: var(--sd-radius);
}

/* Footer: Inter Variable 400 14px */
footer.footer, footer.footer a, footer.footer p, footer.footer span {
  font-family: var(--sd-font-body) !important;
  font-size: 14px;
  font-weight: 400 !important;
}

/* === Link Colors === */
a, .btn-link { color: var(--sd-orchid); }
a:hover, .btn-link:hover { color: var(--sd-glimmer); }
.text-muted, small, .small { color: var(--sd-haze) !important; }
hr { border-color: var(--sd-dusk); }
::selection { background: var(--sd-royal); color: var(--sd-moonlight); }

/* === Header & Navigation === */
header.header, header.header .topbar, header.header .navbar, .main-navbar-wrapper {
  background: var(--sd-void) !important; border-color: var(--sd-dusk) !important;
}
header.header .topbar { border-bottom: 1px solid var(--sd-dusk); }
header.header .logo-img { max-height: 56px; }
header.header .topbar .container,
header.header .topbar .container-fluid { justify-content: flex-start; }
header.header .topbar .logo { margin-right: auto; }

/* Nav link colors */
#nav a, .main-navbar-wrapper .navbar-nav a,
.navbar-light .navbar-nav .nav-link,
header.header .topbar .btn,
header.header .topbar .nav-link {
  color: var(--sd-haze) !important;
}
#nav a:hover, .main-navbar-wrapper .navbar-nav a:hover,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .active > .nav-link,
header.header .topbar .btn:hover,
header.header .topbar .nav-link:hover {
  color: var(--sd-moonlight) !important;
}

/* Dropdowns */
.dropdown-menu { background: var(--sd-abyss); border: 1px solid var(--sd-dusk); border-radius: var(--sd-radius); }
.dropdown-item { color: var(--sd-moonlight); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--sd-dusk); color: var(--sd-glimmer); }

/* Breadcrumbs */
.master-breadcrumb, .breadcrumb, .breadcrumb-wrapper,
nav[aria-label=breadcrumb], .breadcrumb-area {
  background: var(--sd-abyss) !important; border-color: var(--sd-dusk) !important;
  border-bottom: 1px solid var(--sd-dusk) !important;
}
.breadcrumb-item, .breadcrumb-item a,
.breadcrumb-item + .breadcrumb-item::before { color: var(--sd-haze) !important; }

/* === Page Body === */
#main-body, section#main-body { background: var(--sd-void); }
section#main-body { background-image: none !important; }
body.primary-bg-color { background: var(--sd-void) !important; }
section, #main-body, section#main-body { width: 100%; }
section#main-body, section#main-body > .container,
.main-content, #main-body, .container, .container-fluid {
  border: none !important; box-shadow: none !important; outline: none !important;
}

/* Cards & Panels */
.card, .panel, .list-group-item, .modal-content, .tile, .client-home-cards .card {
  background: var(--sd-abyss); color: var(--sd-moonlight);
  border: 1px solid var(--sd-dusk); border-radius: var(--sd-radius);
}
.card-header, .card-footer, .modal-header, .modal-footer {
  background: var(--sd-abyss); border-color: var(--sd-dusk);
}
.tile { transition: border-color .15s; }
.tile:hover { border-color: var(--sd-amethyst); }
.tile .title, .tile i { color: var(--sd-haze); }
.tile .highlight { background: var(--sd-amethyst) !important; }
.list-group-item.active, .list-group-item-action.active {
  background: var(--sd-dusk); border-color: var(--sd-amethyst); color: var(--sd-glimmer);
}
.list-group-item-action:hover { background: var(--sd-dusk); color: var(--sd-moonlight); }

/* === Buttons === */
.btn-primary, .btn-info {
  background: var(--sd-amethyst); border-color: var(--sd-amethyst); color: var(--sd-void);
}
.btn-primary:hover, .btn-primary:focus, .btn-info:hover, .btn-info:focus {
  background: var(--sd-orchid); border-color: var(--sd-orchid); color: var(--sd-void);
}
.btn-success, .btn-cta, #checkout, .btn-checkout, .btn-order-now {
  background: var(--sd-lumen); border-color: var(--sd-lumen); color: var(--sd-void);
}
.btn-success:hover, .btn-cta:hover, #checkout:hover, .btn-checkout:hover, .btn-order-now:hover {
  filter: brightness(1.08); color: var(--sd-void);
}
.btn-default, .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary {
  background: transparent; border-color: var(--sd-dusk); color: var(--sd-moonlight);
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover,
.btn-outline-primary:hover, .btn-outline-secondary:hover {
  background: var(--sd-dusk); border-color: var(--sd-amethyst); color: var(--sd-glimmer);
}
.btn-danger { background: transparent; border-color: var(--sd-danger); color: var(--sd-danger); }
.btn-danger:hover { background: var(--sd-danger); color: var(--sd-void); }
.btn:focus, .form-control:focus, .custom-select:focus {
  box-shadow: 0 0 0 3px rgb(155 107 255 / .35) !important; outline: none;
}

/* === Forms === */
.form-control, .custom-select, select.form-control, textarea.form-control, .input-group-text {
  background: var(--sd-abyss); color: var(--sd-moonlight);
  border: 1px solid var(--sd-dusk); border-radius: var(--sd-radius);
  font-size: 14px !important;
}
.form-control:focus { background: var(--sd-abyss); color: var(--sd-moonlight); border-color: var(--sd-amethyst); }
.form-control::placeholder { color: var(--sd-haze); }
.form-control:disabled, .form-control[readonly] { background: var(--sd-dusk); color: var(--sd-haze); }
label { font-family: var(--sd-font-body) !important; font-weight: 500 !important; font-size: 14px !important; }

/* === Tables === */
.table, .table td, .table th { color: var(--sd-moonlight); border-color: var(--sd-dusk) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgb(31 26 58 / .45); }
.table-hover tbody tr:hover { background: var(--sd-dusk); color: var(--sd-moonlight); }
.table td { font-family: var(--sd-font-body) !important; font-size: 14px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: normal !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--sd-amethyst) !important; color: var(--sd-void) !important; border: 0;
}

/* === Status Colors === */
.label-success, .badge-success, .status-active, .status-paid, .status-open { background: var(--sd-success); color: var(--sd-void); }
.label-warning, .badge-warning, .status-pending, .status-unpaid, .status-answered { background: var(--sd-warning); color: var(--sd-void); }
.label-danger, .badge-danger, .status-suspended, .status-overdue, .status-cancelled, .status-terminated { background: var(--sd-danger); color: var(--sd-void); }
.label-info, .badge-info, .status-customer-reply { background: var(--sd-orchid); color: var(--sd-void); }
.alert { border-radius: var(--sd-radius); border-width: 1px; background: var(--sd-abyss); color: var(--sd-moonlight); }
.alert-success { border-color: var(--sd-success); }
.alert-warning { border-color: var(--sd-warning); }
.alert-danger { border-color: var(--sd-danger); }
.alert-info { border-color: var(--sd-orchid); }

/* === Footer === */
footer.footer { background: var(--sd-void); border-top: 1px solid var(--sd-dusk); color: var(--sd-haze); }
footer.footer a { color: var(--sd-haze); }
footer.footer a:hover { color: var(--sd-orchid); }

/* === Login & Register === */
.login-form, .logincontainer {
  background: var(--sd-abyss); border: 1px solid var(--sd-dusk); border-radius: var(--sd-radius);
}
body.login-page, body[data-phone-cc-input] #main-body {
  background: radial-gradient(60% 60% at 70% 30%, rgb(91 47 209 / .25), transparent 70%), var(--sd-void);
}

/* === Domain Search === */
.domain-checker-container, .domain-checker-bg, .domainchecker-homepage,
.home-domain-search, .domain-search-container, .search-container,
section.domain-checker, .hero-unit, .home-hero,
.main-content > .container-fluid:first-child,
#order-standard_cart .domain-checker-container,
.domainchecker-homepage-bg {
  background: var(--sd-abyss) !important; color: var(--sd-moonlight);
}
.domain-checker-container input, .domain-checker-container textarea,
.domainchecker-homepage input, .domainchecker-homepage textarea,
.domain-search-input, .home-domain-search input,
input.domain-checker-field, textarea.domain-checker-field {
  background: var(--sd-dusk) !important; color: var(--sd-moonlight) !important;
  border: 1px solid var(--sd-dusk) !important; border-radius: var(--sd-radius) !important;
}
.domain-checker-container input::placeholder,
.domain-checker-container textarea::placeholder { color: var(--sd-haze) !important; }
.domain-checker-container .btn, .domainchecker-homepage .btn { border-radius: var(--sd-radius) !important; }
.domain-checker-container .btn-primary, .domain-checker-container .btn-check-domain {
  background: var(--sd-amethyst) !important; border-color: var(--sd-amethyst) !important; color: var(--sd-void) !important;
}
.domain-checker-container .btn-transfer, .domain-checker-container .btn-success {
  background: var(--sd-lumen) !important; border-color: var(--sd-lumen) !important; color: var(--sd-void) !important;
}
.domain-checker-container a, .domain-pricing-link,
.domain-checker-container .dropdown-toggle { color: var(--sd-orchid) !important; }
.domain-checker-container small, .domain-checker-container .text-muted,
.domain-checker-container label { color: var(--sd-haze) !important; }

/* === Main Content & Shortcuts === */
.main-content, #main-body .container, .home-shortcuts,
.product-group, .products-list-container {
  background: var(--sd-void) !important; color: var(--sd-moonlight);
}
.home-shortcuts .card, .product-group .card {
  background: var(--sd-abyss); border: 1px solid var(--sd-dusk);
}
.home-shortcuts .card:hover, .product-group .card:hover { border-color: var(--sd-amethyst); }

/* Nova AI override */
.nova-search-container, .nova-homepage, [class*=nova] { background: var(--sd-abyss) !important; }

/* === Pagination === */
.page-item .page-link {
  background: var(--sd-abyss); border-color: var(--sd-dusk); color: var(--sd-moonlight);
  font-family: var(--sd-font-body) !important;
}
.page-item.active .page-link {
  background: var(--sd-amethyst); border-color: var(--sd-amethyst); color: var(--sd-void);
}

/* === Sidebar === */
.sidebar .card, .sidebar .list-group-item { background: var(--sd-abyss); border-color: var(--sd-dusk); }

/* === Modals === */
.modal-content { background: var(--sd-abyss); color: var(--sd-moonlight); }
.modal-header, .modal-footer { border-color: var(--sd-dusk); }
.close, .btn-close { color: var(--sd-moonlight); opacity: .7; }

/* === Cart & Checkout === */
.view-cart-items-header, .order-summary, .sub-heading {
  background: var(--sd-abyss) !important; color: var(--sd-moonlight);
}

/* === Action Icon Panels (How can we help / Your Account) === */
.action-icon-btns a {
  background: var(--sd-abyss) !important; color: var(--sd-moonlight) !important;
  border: 1px solid var(--sd-dusk) !important; border-radius: var(--sd-radius) !important;
}
.action-icon-btns a:hover {
  border-color: var(--sd-amethyst) !important; color: var(--sd-glimmer) !important;
}
.action-icon-btns .ico-container { background: transparent !important; }
.action-icon-btns .ico-container i { color: var(--sd-haze) !important; }
.action-icon-btns a:hover .ico-container i { color: var(--sd-orchid) !important; }
.action-icon-btns a[class*='card-accent-'] { border-top: 3px solid var(--sd-amethyst) !important; }
.action-icon-btns a.card-accent-teal { border-top-color: var(--sd-success) !important; }
.action-icon-btns a.card-accent-pomegranate { border-top-color: var(--sd-danger) !important; }
.action-icon-btns a.card-accent-sun-flower { border-top-color: var(--sd-lumen) !important; }
.action-icon-btns a.card-accent-asbestos { border-top-color: var(--sd-haze) !important; }
.action-icon-btns a.card-accent-green { border-top-color: var(--sd-success) !important; }
.action-icon-btns a.card-accent-midnight-blue { border-top-color: var(--sd-orchid) !important; }

/* === Homepage Panels === */
.panel-card, .action-card, .home-shortcuts .panel,
.client-home-panels .panel, .client-home-panels .card,
.panel-surround, .home-panel, .quick-nav-card,
a.panel-card, a.action-card,
.client-home-cards .card-body, .client-home-cards a,
.home-shortcuts .card-body,
.shortcuts .card, .shortcuts a.card,
.row .col-sm-4 .card, .row .col-md .card,
.panel-default, .well {
  background: var(--sd-abyss) !important; color: var(--sd-moonlight) !important;
  border: 1px solid var(--sd-dusk) !important;
}
.panel-card:hover, .action-card:hover, .home-shortcuts .panel:hover,
.client-home-panels .panel:hover, .client-home-panels .card:hover,
.shortcuts .card:hover, .shortcuts a.card:hover,
.row .col-sm-4 .card:hover, .row .col-md .card:hover {
  border-color: var(--sd-amethyst) !important;
}
.panel-card i, .action-card i, .home-shortcuts i,
.client-home-panels i, .shortcuts i,
.panel-card .fas, .panel-card .far, .panel-card .fal,
.panel-card svg, .action-card svg { color: var(--sd-haze) !important; }
.panel-card .border-top, .action-card [class*=border-top] { border-top-width: 3px !important; }
.panel-card h3, .panel-card h4, .panel-card .title,
.action-card h3, .action-card h4, .action-card .title,
.shortcuts .card h3, .shortcuts .card h4,
.client-home-panels h3, .client-home-panels h4,
.client-home-panels .card h3, .client-home-panels .card h4 { color: var(--sd-moonlight) !important; }

/* Product cards */
.card-columns.home .card {
  background: var(--sd-abyss) !important; color: var(--sd-moonlight) !important;
  border: 1px solid var(--sd-dusk) !important; border-radius: var(--sd-radius) !important;
}
.card-columns.home .card:hover { border-color: var(--sd-amethyst) !important; }
.card-columns.home .card-title { color: var(--sd-moonlight) !important; }
.card-columns.home p { color: var(--sd-haze); }

/* === Layout Fixes === */
.primary-content { overflow: hidden; }
.action-icon-btns.row { margin-left: 0; margin-right: 0; }
.action-icon-btns.row > [class*="col"] { padding-left: 15px; padding-right: 15px; }

/* Hide admin return tab */
#admin-return, .admin-return, [id*='admin-return'],
a[href*='admin'][style*='fixed'], .return-to-admin,
.sidebar-right-fixed, .fixed-action-btn { display: none !important; }

/* === Scrollbar === */
html { scrollbar-width: thin; scrollbar-color: var(--sd-dusk) var(--sd-void); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--sd-void); }
::-webkit-scrollbar-thumb { background: var(--sd-dusk); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--sd-haze); }