/* ============================================================
   Omifi Dark Theme for WHMCS
   Base: Six (Bootstrap 3)
   Brand: Flexispectrum / Omifi
   ============================================================ */

/* ---- Design tokens ---- */
:root {
  --bg:              #0a0e17;
  --bg-alt:          #0d1220;
  --bg-card:         #111827;
  --surface:         #1a2235;
  --border:          rgba(255,255,255,0.06);
  --border-hover:    rgba(6,182,212,0.22);
  --text:            #f0f4f8;
  --text-muted:      #94a3b8;
  --text-dim:        #64748b;
  --cyan:            #06b6d4;
  --cyan-light:      #22d3ee;
  --cyan-glow:       rgba(6,182,212,0.12);
  --cyan-glow-s:     rgba(6,182,212,0.25);
  --green:           #10b981;
  --amber:           #f59e0b;
  --rose:            #f43f5e;
  --purple:          #8b5cf6;
  --ease:            cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-out:        cubic-bezier(0.16,1,0.3,1);
  --radius:          8px;
  --radius-sm:       6px;
  --font:            'Outfit', 'Open Sans', sans-serif;
  --font-mono:       'JetBrains Mono', monospace;
}

/* ---- Base ---- */
html, body { height: 100%; }
body {
  font-family: var(--font) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--cyan); color: var(--bg); }

a { color: var(--cyan); }
a:hover, a:focus { color: var(--cyan-light); text-decoration: none; }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font) !important;
  font-weight: 600;
  color: var(--text);
}

code, pre, .mono { font-family: var(--font-mono) !important; }

/* ---- Layout sections ---- */
section#header {
  background: var(--bg-alt) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

section#main-menu {
  background: var(--bg-alt) !important;
  border-bottom: 1px solid var(--border) !important;
}

section#main-body {
  background: var(--bg) !important;
  padding: 28px 0 !important;
  min-height: 60vh;
}

section#home-banner {
  background: linear-gradient(135deg, #0d1220 0%, #111827 100%) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 36px 0 !important;
}

section#footer {
  background: var(--bg-alt) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
  padding: 20px 10px !important;
}
section#footer p { color: var(--text-dim) !important; margin: 0; }
section#footer a { color: var(--text-muted); }
section#footer a:hover { color: var(--cyan); }
section#footer .back-to-top { color: var(--cyan); }
section#footer .back-to-top i { color: var(--cyan); }

/* ---- Logo / top nav ---- */
section#header .logo-text {
  font-family: var(--font) !important;
  font-weight: 700;
  font-size: 1.7em !important;
  color: var(--text) !important;
  letter-spacing: -0.5px;
}
section#header .logo img { max-height: 52px !important; width: auto !important; }
section#header .logo .omifi-logo { height: 52px !important; width: auto !important; display: block; }

ul.top-nav { margin: 0 !important; }
ul.top-nav > li > a {
  color: var(--text-muted) !important;
  font-size: 0.85rem;
  padding: 6px 12px;
  transition: color 0.2s var(--ease);
}
ul.top-nav > li > a:hover { color: var(--cyan) !important; background: transparent !important; }

ul.top-nav > li.primary-action > a.btn {
  background: var(--cyan) !important;
  border-color: var(--cyan) !important;
  color: var(--bg) !important;
  font-weight: 600;
  border-radius: var(--radius-sm) !important;
  padding: 6px 16px !important;
  font-size: 0.85rem;
  transition: all 0.25s var(--ease);
}
ul.top-nav > li.primary-action > a.btn:hover {
  background: var(--cyan-light) !important;
  border-color: var(--cyan-light) !important;
  box-shadow: 0 4px 16px var(--cyan-glow-s) !important;
}

/* Admin masquerade badge */
ul.top-nav > li > a.btn-logged-in-admin {
  background: var(--amber) !important;
  color: #000 !important;
  border-color: var(--amber) !important;
}

/* Notifications popover label */
.label.label-info {
  background: var(--cyan) !important;
  color: var(--bg) !important;
  border-radius: 10px;
}

/* ---- Main navigation ---- */
.navbar-main {
  background: var(--bg-alt) !important;
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  min-height: 44px !important;
  font-family: var(--font) !important;
  font-size: 0.9rem !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}
.navbar-main .navbar-nav > li > a {
  color: var(--text-muted) !important;
  padding: 12px 16px !important;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:hover {
  color: var(--cyan) !important;
  background: var(--cyan-glow) !important;
}
.navbar-main li.account { background: transparent !important; }

/* Dropdown menus */
.navbar-main .dropdown-menu {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-hover) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
  padding: 4px 0 !important;
  border-top: 0 !important;
}
.navbar-main .dropdown-menu > li > a {
  color: var(--text-muted) !important;
  padding: 8px 16px !important;
  font-size: 0.875rem;
  transition: all 0.15s;
}
.navbar-main .navbar-nav .dropdown-menu > li > a:hover,
.navbar-main .navbar-nav .dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: var(--cyan) !important;
  background: var(--cyan-glow) !important;
}

/* Mobile toggle */
.navbar-main .navbar-toggle { border-color: var(--border-hover) !important; }
.navbar-main .navbar-toggle .icon-bar { background: var(--text-muted) !important; }
.navbar-main .navbar-toggle:hover .icon-bar,
.navbar-main .navbar-toggle:focus .icon-bar { background: var(--cyan) !important; }

@media (max-width: 767px) {
  .navbar-main .navbar-nav .open .dropdown-menu > li > a { color: var(--text-muted) !important; }
  .navbar-main .navbar-nav .open .dropdown-menu > li > a:hover { color: var(--cyan) !important; }
}

/* ---- Home banner (domain search) ---- */
section#home-banner h2 {
  color: var(--text) !important;
  font-weight: 600;
}
section#home-banner .form-control {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}
section#home-banner .form-control:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 2px var(--cyan-glow) !important;
}
section#home-banner .btn.search {
  background: var(--cyan) !important;
  border-color: var(--cyan) !important;
  color: var(--bg) !important;
  font-weight: 600;
}
section#home-banner .btn.transfer {
  background: var(--surface) !important;
  border-color: var(--border-hover) !important;
  color: var(--text-muted) !important;
}

/* Home shortcuts */
.home-shortcuts { background: var(--bg-alt) !important; border-bottom: 1px solid var(--border) !important; }
.home-shortcuts .lead { color: var(--text-muted) !important; }
.home-shortcuts ul li a { color: var(--text-muted) !important; }
.home-shortcuts ul li a i { color: var(--cyan) !important; }
.home-shortcuts ul li a:hover { color: var(--cyan) !important; }

/* ---- Forms ---- */
.form-control {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font) !important;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form-control:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 3px var(--cyan-glow) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}
.form-control::placeholder { color: var(--text-dim) !important; }
select.form-control > option { background: var(--bg-card); color: var(--text); }

.control-label, .col-form-label { color: var(--text-muted) !important; font-weight: 500; }
.help-block { color: var(--text-dim) !important; }

.input-group-addon {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}

/* ---- Buttons ---- */
.btn {
  font-family: var(--font) !important;
  font-weight: 500;
  border-radius: var(--radius-sm) !important;
  transition: all 0.25s var(--ease) !important;
  overflow: hidden;
}
.btn-primary {
  background: var(--cyan) !important;
  border-color: var(--cyan) !important;
  color: var(--bg) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--cyan-light) !important;
  border-color: var(--cyan-light) !important;
  box-shadow: 0 4px 16px var(--cyan-glow-s) !important;
  color: var(--bg) !important;
}
.btn-default {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
.btn-default:hover, .btn-default:focus {
  background: var(--bg-card) !important;
  border-color: var(--border-hover) !important;
  color: var(--text) !important;
}
.btn-success {
  background: var(--cyan) !important;
  border-color: var(--cyan) !important;
  color: var(--bg) !important;
}
.btn-success:hover, .btn-success:focus {
  background: var(--cyan-light) !important;
  border-color: var(--cyan-light) !important;
  box-shadow: 0 4px 16px var(--cyan-glow-s) !important;
  color: var(--bg) !important;
}
.btn-danger {
  background: var(--rose) !important;
  border-color: var(--rose) !important;
  color: #fff !important;
}
.btn-warning {
  background: var(--amber) !important;
  border-color: var(--amber) !important;
  color: #000 !important;
}
.btn-info {
  background: var(--purple) !important;
  border-color: var(--purple) !important;
  color: #fff !important;
}
.btn-link { color: var(--cyan) !important; }
.btn-link:hover { color: var(--cyan-light) !important; }

/* ---- Panels / Cards ---- */
.panel {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-size: 0.9em;
}
.panel-heading {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  color: var(--text) !important;
  padding: 12px 16px;
}
.panel-title { color: var(--text) !important; font-weight: 600; }
.panel-body { color: var(--text) !important; padding: 16px !important; }
.panel-footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  color: var(--text-muted) !important;
}

/* Primary panel accent */
.panel-primary { border-color: var(--cyan) !important; }
.panel-primary > .panel-heading {
  background: var(--cyan-glow) !important;
  border-color: var(--border) !important;
}
.panel-primary > .panel-heading .panel-title { color: var(--cyan-light) !important; }

/* Coloured panel accents */
.panel.panel-accent-gold     { border-left: 3px solid #f59e0b !important; }
.panel.panel-accent-green    { border-left: 3px solid var(--green) !important; }
.panel.panel-accent-red      { border-left: 3px solid var(--rose) !important; }
.panel.panel-accent-blue     { border-left: 3px solid var(--cyan) !important; }
.panel.panel-accent-orange   { border-left: 3px solid #f97316 !important; }
.panel.panel-accent-purple   { border-left: 3px solid var(--purple) !important; }
.panel.panel-accent-teal     { border-left: 3px solid #14b8a6 !important; }

/* ---- List groups ---- */
.list-group-item {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  transition: background 0.15s;
}
a.list-group-item:hover { background: var(--surface) !important; color: var(--text) !important; }
.list-group-item .badge { background: transparent !important; color: var(--text-muted) !important; }
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
  background: var(--cyan-glow) !important;
  border-color: var(--border-hover) !important;
  color: var(--cyan-light) !important;
}

/* ---- Alerts ---- */
.alert {
  border-radius: var(--radius-sm) !important;
  border-width: 1px !important;
  font-size: 0.9rem;
}
.alert-success {
  background: rgba(16,185,129,0.1) !important;
  border-color: rgba(16,185,129,0.25) !important;
  color: #6ee7b7 !important;
}
.alert-danger, .alert-error {
  background: rgba(244,63,94,0.1) !important;
  border-color: rgba(244,63,94,0.25) !important;
  color: #fda4af !important;
}
.alert-warning {
  background: rgba(245,158,11,0.1) !important;
  border-color: rgba(245,158,11,0.25) !important;
  color: #fcd34d !important;
}
.alert-info {
  background: var(--cyan-glow) !important;
  border-color: var(--border-hover) !important;
  color: var(--cyan-light) !important;
}
.alert-bordered-left {
  border-left: 3px solid !important;
}

/* ---- Tables ---- */
.table {
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.table > thead > tr > th {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}
.table > tbody > tr > td {
  border-color: var(--border) !important;
  color: var(--text) !important;
  vertical-align: middle;
}
.table > tbody > tr:hover > td { background: var(--surface) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,0.02) !important; }
.table-bordered { border-color: var(--border) !important; }
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: var(--border) !important; }

/* ---- Badges & Labels ---- */
.badge {
  background: var(--surface) !important;
  color: var(--text-muted) !important;
  border-radius: 10px;
}
.label { border-radius: 4px !important; }
.label-default { background: var(--surface) !important; color: var(--text-muted) !important; }
.label-primary { background: var(--cyan) !important; color: var(--bg) !important; }
.label-success { background: var(--green) !important; color: #fff !important; }
.label-danger  { background: var(--rose) !important; color: #fff !important; }
.label-warning { background: var(--amber) !important; color: #000 !important; }
.label-info    { background: var(--purple) !important; color: #fff !important; }

/* ---- Breadcrumb ---- */
.breadcrumb {
  background: transparent !important;
  border: 0 !important;
  padding: 4px 0 !important;
  margin: 0 0 12px 0 !important;
  font-size: 0.82rem;
}
.breadcrumb > li { color: var(--text-dim) !important; }
.breadcrumb > li + li::before { color: var(--text-dim) !important; content: "/ " !important; }
.breadcrumb > li a { color: var(--text-muted) !important; }
.breadcrumb > li a:hover { color: var(--cyan) !important; }
.breadcrumb > .active { color: var(--text-muted) !important; }

div.header-lined .breadcrumb li a { color: var(--text-muted) !important; }
div.header-lined .breadcrumb > .active { color: var(--text-dim) !important; }

/* Page title */
.page-header {
  border-color: var(--border) !important;
  color: var(--text) !important;
  margin: 0 0 20px 0;
}
.page-header h1, .page-header h2 { color: var(--text) !important; font-size: 1.4rem; }

/* ---- Sidebar ---- */
.sidebar .list-group-item { font-size: 0.875rem; }
.sidebar .panel-heading { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---- Pagination ---- */
.pagination > li > a,
.pagination > li > span {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
.pagination > li > a:hover { background: var(--surface) !important; color: var(--cyan) !important; }
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > a:focus {
  background: var(--cyan) !important;
  border-color: var(--cyan) !important;
  color: var(--bg) !important;
}
.pagination > .disabled > a { background: var(--bg-card) !important; color: var(--text-dim) !important; border-color: var(--border) !important; }

/* ---- Modals ---- */
.modal-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-hover) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
  color: var(--text) !important;
}
.modal-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
}
.modal-title { color: var(--text) !important; font-weight: 600; }
.modal-header .close { color: var(--text-muted) !important; opacity: 0.7; text-shadow: none; }
.modal-body { color: var(--text) !important; }
.modal-footer {
  border-top: 1px solid var(--border) !important;
  background: var(--surface) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
}
.modal-backdrop { background: #000; }
.modal-backdrop.in { opacity: 0.7; }
.modal-content.panel-primary > .modal-header.panel-heading { background: var(--cyan-glow) !important; border-color: var(--border-hover) !important; }
.modal-content.panel-primary > .modal-header.panel-heading .modal-title { color: var(--cyan-light) !important; }

/* ---- Tabs ---- */
.nav-tabs {
  border-color: var(--border) !important;
}
.nav-tabs > li > a {
  color: var(--text-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
}
.nav-tabs > li > a:hover {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  border-bottom-color: var(--bg-card) !important;
  color: var(--cyan) !important;
}
.tab-content { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-top: 0 !important; padding: 16px !important; border-radius: 0 0 var(--radius) var(--radius) !important; }

/* ---- Client home panels ---- */
.client-home-panels .panel > .panel-heading .panel-title .btn { color: var(--text-muted) !important; }
.client-home-panels .panel > .panel-heading .panel-title .btn:hover { color: var(--cyan) !important; }
.client-home-panels .panel > .panel-body p { color: var(--text-muted) !important; }
.client-home-panels .panel > .list-group .list-group-item:hover { background: var(--surface) !important; }

/* ---- Well ---- */
.well {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  color: var(--text) !important;
}

/* ---- Captcha ---- */
#default-captcha-domainchecker, .captchaimage { filter: brightness(0.85); }

/* ---- Popovers (notifications) ---- */
.popover {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-hover) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
.popover-title {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
}
.popover-content { color: var(--text) !important; }
.popover.top > .arrow::after { border-top-color: var(--bg-card) !important; }
.popover.bottom > .arrow::after { border-bottom-color: var(--bg-card) !important; }
.popover.right > .arrow::after { border-right-color: var(--bg-card) !important; }

/* Client alerts */
.client-alerts li a { color: var(--text-muted) !important; padding: 8px 16px; display: flex; align-items: flex-start; gap: 8px; }
.client-alerts li a:hover { background: var(--surface) !important; color: var(--cyan) !important; }
.client-alerts li a i { color: var(--cyan); margin-top: 2px; flex-shrink: 0; }
.client-alerts li.none { color: var(--text-dim) !important; padding: 12px 16px; font-size: 0.875rem; }

/* Language chooser */
#languageChooserContent { background: var(--bg-card) !important; border: 1px solid var(--border-hover) !important; border-radius: var(--radius-sm) !important; }
#languageChooserContent ul li a { color: var(--text-muted) !important; padding: 8px 14px; display: block; }
#languageChooserContent ul li a:hover { color: var(--cyan) !important; background: var(--surface) !important; }

/* ---- Tooltips ---- */
.tooltip .tooltip-inner { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm); font-size: 0.8rem; }
.tooltip.top .tooltip-arrow { border-top-color: var(--surface) !important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--surface) !important; }

/* ---- Validation / errors ---- */
.has-error .form-control {
  border-color: var(--rose) !important;
  box-shadow: 0 0 0 2px rgba(244,63,94,0.15) !important;
}
.has-error .control-label,
.has-error .help-block { color: #fda4af !important; }
.has-success .form-control { border-color: var(--green) !important; }
.has-success .control-label { color: #6ee7b7 !important; }

/* ---- Flash messages ---- */
.flashmessage-panel { margin-bottom: 12px; }

/* ---- Verify email banner ---- */
.email-unverified-bar {
  background: rgba(245,158,11,0.1) !important;
  border: 1px solid rgba(245,158,11,0.2) !important;
  color: #fcd34d !important;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 0.875rem;
}

/* ---- Overlay spinner ---- */
#fullpage-overlay { background: rgba(10,14,23,0.85) !important; }
#fullpage-overlay img { filter: invert(1) sepia(1) saturate(5) hue-rotate(155deg); }

/* ---- Scrollbar (Webkit) ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

/* ---- Misc utilities ---- */
hr { border-color: var(--border) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--cyan) !important; }
.text-success { color: #6ee7b7 !important; }
.text-danger  { color: #fda4af !important; }
.text-warning { color: #fcd34d !important; }
.bg-info    { background: var(--cyan-glow) !important; color: var(--cyan-light) !important; }
.bg-success { background: rgba(16,185,129,0.1) !important; color: #6ee7b7 !important; }
.bg-danger  { background: rgba(244,63,94,0.1) !important; color: #fda4af !important; }
.bg-warning { background: rgba(245,158,11,0.1) !important; color: #fcd34d !important; }

/* ============================================================
   FONT SIZE NORMALISATION (16px base, matching Omifi site)
   ============================================================ */
html { font-size: 16px !important; }
body { font-size: 1rem !important; line-height: 1.6 !important; }

/* Bootstrap 3 type scale adjusted to 16px base */
h1, .h1 { font-size: 2rem !important; }
h2, .h2 { font-size: 1.6rem !important; }
h3, .h3 { font-size: 1.3rem !important; }
h4, .h4 { font-size: 1.1rem !important; }
h5, .h5 { font-size: 0.95rem !important; }
h6, .h6 { font-size: 0.85rem !important; }

p, li, td, th, .form-control, .btn,
.list-group-item, .panel-body, .panel-heading,
.dropdown-menu > li > a, .navbar-nav > li > a {
  font-size: 1rem !important;
}
small, .small, .text-xs { font-size: 0.8rem !important; }
.panel { font-size: 1rem !important; }
.breadcrumb { font-size: 0.82rem !important; }
.pagination { font-size: 0.875rem !important; }

/* Client home tiles */
.tile .stat { font-size: 2rem !important; font-weight: 700; }
.tile .title { font-size: 0.875rem !important; }

/* ============================================================
   CART / PRODUCT GROUP LISTING — dark card treatment
   Covers both inline-div and .panel structures WHMCS may generate.
   ============================================================ */

/* Container reset for store pages */
.store-order-container {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 28px !important;
}
.store-order-container h2 { color: var(--text) !important; }
.store-order-container .store-domain-tabs li a {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
.store-order-container .store-domain-tabs li.active a {
  background: var(--bg-card) !important;
  color: var(--cyan-light) !important;
}
.store-order-container .store-domain-tab-content {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
.store-order-container .payment-term h4 { color: var(--text) !important; }

/* Product group header — scoped to avoid affecting all h2 page titles */
.group-description h2,
.group-description h3 {
  color: var(--cyan-light) !important;
}


/* ============================================================
   PRODUCT CARDS — landing-page / product-options structure
   (cart.php product group listing)
   ============================================================ */

/* ---- Card container ---- */
.landing-page .product-options { background: transparent !important; padding: 20px 0 !important; }

.landing-page .product-options .item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 24px 20px !important;
  color: var(--text) !important;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
.landing-page .product-options .item:hover {
  border-color: var(--border-hover) !important;
  box-shadow: 0 4px 24px rgba(6,182,212,0.08) !important;
}

/* ---- Product image / icon — ciano placeholder ---- */
.landing-page .product-options .icon {
  position: relative !important;
  width: 80px !important;
  height: 80px !important;
  margin: 0 auto 16px !important;
  line-height: 80px !important;
  background: var(--surface) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306b6d4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='5' rx='1'/%3E%3Crect x='2' y='10' width='20' height='5' rx='1'/%3E%3Crect x='2' y='17' width='20' height='5' rx='1'/%3E%3Ccircle cx='18.5' cy='5.5' r='1' fill='%2306b6d4' stroke='none'/%3E%3Ccircle cx='18.5' cy='12.5' r='1' fill='%2306b6d4' stroke='none'/%3E%3Ccircle cx='18.5' cy='19.5' r='1' fill='%2306b6d4' stroke='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 44px !important;
  border-radius: var(--radius) !important;
  color: var(--cyan) !important;
  font-size: 2.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.landing-page .product-options .icon img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 12px !important;
  z-index: 1 !important;
  background: var(--surface) !important;
}
/* Hide broken image browser artefact — show SVG bg instead */
.landing-page .product-options .icon img[src=""],
.landing-page .product-options .icon img:not([src]) {
  opacity: 0 !important;
}

/* ---- Product name ---- */
.landing-page .product-options h4 {
  color: var(--text) !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  margin: 8px 0 !important;
}

/* ---- Price ---- */
.landing-page .product-options .price,
.landing-page .product-options .item .price {
  color: var(--cyan-light) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin: 8px 0 !important;
}

/* ---- Description / feature text ---- */
.landing-page .product-options p,
.landing-page .product-options span {
  color: var(--text-muted) !important;
  font-size: 0.9rem !important;
}
.landing-page .product-options .item ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 !important;
  width: 100% !important;
  text-align: left !important;
}
.landing-page .product-options .item ul li {
  color: var(--text-muted) !important;
  padding: 4px 0 !important;
  font-size: 0.875rem !important;
  border-bottom: 1px solid var(--border) !important;
}
.landing-page .product-options .item ul li:last-child { border-bottom: none !important; }
.landing-page .product-options .item ul li i,
.landing-page .product-options .item ul li .fa { color: var(--cyan) !important; margin-right: 6px !important; }

/* ---- Order Now button ---- */
.landing-page .product-options .item .btn,
.landing-page .product-options .item .btn-success,
.landing-page .product-options .item a.btn {
  background: var(--cyan) !important;
  border-color: var(--cyan) !important;
  color: var(--bg) !important;
  font-weight: 600 !important;
  width: 100% !important;
  margin-top: auto !important;
  padding: 10px 20px !important;
  border-radius: var(--radius-sm) !important;
  transition: all 0.25s var(--ease) !important;
}
.landing-page .product-options .item .btn:hover {
  background: var(--cyan-light) !important;
  border-color: var(--cyan-light) !important;
  box-shadow: 0 4px 16px var(--cyan-glow-s) !important;
}

/* Group header */
.landing-page .hero,
.landing-page .product-options h2,
.landing-page .product-options h3 {
  color: var(--text) !important;
  background: transparent !important;
}

/* ============================================================
   DATATABLES — override injected white backgrounds
   ============================================================ */
table.dataTable tbody tr,
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even {
  background: var(--bg-card) !important;
  color: var(--text) !important;
}
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
  background: rgba(26,34,53,0.6) !important;
}
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover,
table.dataTable tbody tr.odd:hover,
table.dataTable tbody tr.even:hover {
  background: var(--surface) !important;
}
table.dataTable tbody td,
table.dataTable tbody th {
  color: var(--text) !important;
  border-color: var(--border) !important;
  background: inherit !important;
}
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td {
  background: var(--surface) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}
/* Sort icons */
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after { color: var(--text-dim) !important; }

/* DataTables wrapper controls */
.dataTables_wrapper { color: var(--text-muted) !important; background: transparent !important; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info { color: var(--text-muted) !important; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--cyan) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--cyan-glow) !important;
}
/* Processing overlay */
.dataTables_wrapper .dataTables_processing {
  background: var(--bg-card) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border) !important;
}
/* Empty table message */
table.dataTable tbody td.dataTables_empty {
  color: var(--text-dim) !important;
  background: var(--bg-card) !important;
}
/* Clickable rows */
table.dataTable tbody tr[onclick] { cursor: pointer !important; }

/* ============================================================
   TICKET MESSAGES — view ticket content area
   ============================================================ */
.ticket-message,
.viewticket .panel,
.viewticket-reply,
#ticketReplies .panel,
#ticketReplies .panel-body {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.ticket-message .panel-heading,
#ticketReplies .panel-heading {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
.ticket-message .panel-body,
#ticketReplies .panel-body,
.viewticket .message-body {
  background: var(--bg-card) !important;
  color: var(--text) !important;
}
/* Force inline-styled content inside ticket messages */
.ticket-message .panel-body *,
#ticketReplies .panel-body p,
#ticketReplies .panel-body div {
  color: inherit !important;
}
/* Operator/client badge — covered by .label.label-info rule above */
.ticket-message .badge {
  background: var(--cyan) !important;
  color: var(--bg) !important;
}

/* ============================================================
   PRODUCT DETAILS PAGE (clientareaproductdetails.tpl)
   ============================================================ */
div.product-details {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
}
div.product-details div.product-icon {
  background: var(--surface) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306b6d4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='5' rx='1'/%3E%3Crect x='2' y='10' width='20' height='5' rx='1'/%3E%3Crect x='2' y='17' width='20' height='5' rx='1'/%3E%3Ccircle cx='18.5' cy='5.5' r='1' fill='%2306b6d4' stroke='none'/%3E%3Ccircle cx='18.5' cy='12.5' r='1' fill='%2306b6d4' stroke='none'/%3E%3Ccircle cx='18.5' cy='19.5' r='1' fill='%2306b6d4' stroke='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 64px !important;
  border-radius: var(--radius) !important;
  min-height: 160px;
}
div.product-details div.product-icon img {
  background: var(--surface) !important;
  object-fit: contain;
  max-height: 160px;
  padding: 16px;
  position: relative;
  z-index: 1;
}
.product-status-text {
  color: var(--text-muted) !important;
  background: var(--bg-card) !important;
}
/* Product details tab container */
div.product-details-tab-container {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ============================================================
   STATUS LABELS — full set for all WHMCS states
   ============================================================ */
.status, span.label.status {
  border-radius: var(--radius-sm) !important;
  padding: 4px 10px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  display: inline-block !important;
  border: 1px solid !important;
}
.status-active   { background: rgba(16,185,129,0.12) !important; color: #6ee7b7 !important; border-color: rgba(16,185,129,0.25) !important; }
.status-paid     { background: rgba(16,185,129,0.12) !important; color: #6ee7b7 !important; border-color: rgba(16,185,129,0.25) !important; }
.status-unpaid   { background: rgba(244,63,94,0.12) !important;  color: #fda4af !important; border-color: rgba(244,63,94,0.25) !important; }
.status-suspended, .status-overdue { background: rgba(245,158,11,0.12) !important; color: #fcd34d !important; border-color: rgba(245,158,11,0.25) !important; }
.status-pending  { background: rgba(139,92,246,0.12) !important; color: #c4b5fd !important; border-color: rgba(139,92,246,0.25) !important; }
.status-terminated, .status-cancelled, .status-fraud { background: rgba(100,116,139,0.12) !important; color: var(--text-dim) !important; border-color: rgba(100,116,139,0.2) !important; }
.status-closed   { background: rgba(100,116,139,0.12) !important; color: var(--text-dim) !important; border-color: rgba(100,116,139,0.2) !important; }
.status-answered { background: rgba(6,182,212,0.12) !important; color: var(--cyan-light) !important; border-color: rgba(6,182,212,0.25) !important; }
.status-customer-reply { background: rgba(245,158,11,0.12) !important; color: #fcd34d !important; border-color: rgba(245,158,11,0.25) !important; }
.status-open     { background: rgba(16,185,129,0.12) !important; color: #6ee7b7 !important; border-color: rgba(16,185,129,0.25) !important; }

/* Also covers DataTables status cells that don't use .label wrapper */
td .status-active   { background: rgba(16,185,129,0.12) !important; }
td .status-terminated { background: rgba(100,116,139,0.12) !important; }

/* ============================================================
   PROMOTED PRODUCT (store upsell)
   ============================================================ */
.store-promoted-product {
  background: var(--surface) !important;
  border: 1px solid var(--border-hover) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
}
.store-promoted-product h3, .store-promoted-product h4 { color: var(--text) !important; }
.store-promoted-product p { color: var(--text-muted) !important; }
.store-promoted-product ul.features li { color: var(--text-muted) !important; }
.store-promoted-product ul.features li .fa { color: var(--cyan) !important; }
/* .store-promoted-product .btn-success covered by global .btn-success rule */

/* ============================================================
   CLIENT HOME TILES
   ============================================================ */
.tile {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  margin-bottom: 16px;
  overflow: hidden;
}
.tile:hover {
  border-color: var(--border-hover) !important;
  box-shadow: 0 4px 20px var(--cyan-glow) !important;
}
.tile a { color: var(--text) !important; }
.tile .icon { color: var(--cyan) !important; font-size: 2rem !important; padding: 20px 0 8px; }
.tile .stat { color: var(--text) !important; }
.tile .title { color: var(--text-muted) !important; padding-bottom: 12px; }
.tile .highlight { height: 3px !important; }
.tile .highlight.bg-color-blue   { background: var(--cyan) !important; }
.tile .highlight.bg-color-green  { background: var(--green) !important; }
.tile .highlight.bg-color-red    { background: var(--rose) !important; }
.tile .highlight.bg-color-gold   { background: var(--amber) !important; }

/* ============================================================
   CART SIDEBAR (Category list)
   ============================================================ */
.cart-sidebar .list-group-item,
.sidebar .list-group-item {
  font-size: 0.9rem !important;
  padding: 10px 15px !important;
}

/* ============================================================
   TICKET REPLIES — correct selectors (.ticket-reply, not .ticket-message)
   ============================================================ */
.ticket-reply {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius) !important;
  margin: 12px 0 !important;
}
.ticket-reply.staff {
  border-color: var(--border-hover) !important;
}

/* Message header (user/date bar) */
.ticket-reply .user {
  background-color: var(--surface) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  padding: 8px 15px !important;
  color: var(--text) !important;
}
.ticket-reply.staff .user {
  background-color: rgba(6,182,212,0.08) !important;
}
.ticket-reply .user .name { color: var(--text) !important; }
.ticket-reply .user .type { color: var(--cyan-light) !important; }
.ticket-reply .user i { color: var(--text-dim) !important; }
.ticket-reply .date { color: var(--text-dim) !important; }

/* Message content */
.ticket-reply .message {
  padding: 16px !important;
  color: var(--text) !important;
  background: var(--bg-card) !important;
}
/* Force email HTML content to dark — target all common inline-styled elements */
.ticket-reply .message p,
.ticket-reply .message div,
.ticket-reply .message span,
.ticket-reply .message li,
.ticket-reply .message td,
.ticket-reply .message th,
.ticket-reply .message a,
.ticket-reply .message font {
  background-color: transparent !important;
  color: var(--text) !important;
}
.ticket-reply .message a { color: var(--cyan) !important; }
.ticket-reply .message pre,
.ticket-reply .message code {
  background: var(--surface) !important;
  color: var(--cyan-light) !important;
  border-color: var(--border) !important;
}
/* Tables inside ticket messages (common in email HTML) */
.ticket-reply .message table { background: transparent !important; }
.ticket-reply .message table td,
.ticket-reply .message table th {
  background-color: transparent !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Rendered markdown inside ticket replies */
.ticket-reply .message.markdown-content h1,
.ticket-reply .message.markdown-content h2,
.ticket-reply .message.markdown-content h3 { color: var(--text) !important; }
.ticket-reply .message.markdown-content pre { background: var(--surface) !important; }
.ticket-reply .message.markdown-content code { color: var(--cyan-light) !important; }
.ticket-reply .message.markdown-content blockquote {
  border-left: 3px solid var(--border-hover) !important;
  color: var(--text-muted) !important;
  background: var(--surface) !important;
  padding: 8px 16px !important;
}

/* Attachments bar */
.ticket-reply .attachments {
  background-color: var(--surface) !important;
  border-top: 1px dashed var(--border) !important;
  color: var(--text-muted) !important;
}
.ticket-reply .attachments a { color: var(--cyan) !important; }

/* Requestor type labels */
.label.requestor-type-operator { background: var(--cyan) !important; color: var(--bg) !important; }
.label.requestor-type-owner    { background: var(--green) !important; color: #fff !important; }
.label.requestor-type-authorizeduser,
.label.requestor-type-registereduser { background: var(--surface) !important; color: var(--text-muted) !important; }

/* Star rating */
.ticket-reply .rating span.star:before { color: var(--text-dim) !important; }
.ticket-reply .rating span.star:hover:before,
.ticket-reply .rating-done span.star.active:before { color: var(--amber) !important; }

/* ============================================================
   BOOTSTRAP MARKDOWN EDITOR (WHMCS built-in, NOT EasyMDE)
   styles.css uses .md-editor > textarea { background:#fff !important }
   We need identical specificity + later load order to win.
   ============================================================ */

/* Outer container */
.md-editor,
div.md-editor.active {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Toolbar — same selector as styles.css, identical specificity, loads after → wins */
.md-editor > .btn-toolbar {
  background-color: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  padding: 6px 8px !important;
}

/* Toolbar buttons */
.md-editor .btn-toolbar .btn {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius-sm) !important;
}
.md-editor .btn-toolbar .btn:hover,
.md-editor .btn-toolbar .btn:focus {
  background: var(--surface) !important;
  color: var(--cyan) !important;
  border-color: var(--border-hover) !important;
}
.md-editor .btn-toolbar .btn.active {
  background: var(--cyan-glow) !important;
  color: var(--cyan-light) !important;
  border-color: var(--border-hover) !important;
}

/* The textarea — exact same selector as styles.css, same specificity, loads after → wins */
.md-editor > textarea.markdown-editor,
.md-editor > .md-preview {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  caret-color: var(--cyan) !important;
}
.md-editor > textarea.markdown-editor::placeholder { color: var(--text-dim) !important; }
.md-editor > textarea.markdown-editor:focus {
  background-color: var(--bg-card) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Preview panel */
.md-editor > .md-preview {
  color: var(--text) !important;
}
.md-editor > .md-preview h1,
.md-editor > .md-preview h2,
.md-editor > .md-preview h3 { color: var(--text) !important; }
.md-editor > .md-preview a { color: var(--cyan) !important; }
.md-editor > .md-preview pre,
.md-editor > .md-preview code {
  background: var(--bg-alt) !important;
  color: var(--cyan-light) !important;
  border-color: var(--border) !important;
}
.md-editor > .md-preview blockquote {
  border-left-color: var(--border-hover) !important;
  color: var(--text-muted) !important;
}

/* Fullscreen mode */
.md-editor.md-fullscreen-mode {
  background: var(--bg) !important;
}
.md-editor.md-fullscreen-mode > textarea.markdown-editor {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Status bar */
.markdown-editor-status {
  background: var(--bg-card) !important;
  color: var(--text-dim) !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
}