/* ===========================================================
   ETIME IT Solutions — Client Area Theme Override
   Re-skins the WHMCS "Twenty-One" theme to match the main
   site's dark / gold brand (visual only — no markup/logic
   is touched, this file is loaded automatically by the
   theme's built-in {assetExists file="custom.css"} hook).
   =========================================================== */

:root {
  --etime-gold: #b79a72;
  --etime-gold-light: #cbb090;
  --etime-gold-dark: #9a7f5a;
  --etime-bg: #0b0b0f;
  --etime-bg-darker: #07070a;
  --etime-bg-card: #131318;
  --etime-bg-card-hover: #1a1a22;
  --etime-header: #2e2f30;
  --etime-border: rgba(255, 255, 255, 0.08);
  --etime-text: #f0f0f0;
  --etime-text-muted: #9a9aa6;

  --primary: var(--etime-gold);
  --link-color: var(--etime-gold);
}

/* ── Base ────────────────────────────────────────────────── */
body,
body.primary-bg-color,
.primary-bg-color {
  background-color: var(--etime-bg) !important;
  color: var(--etime-text);
}

a {
  color: var(--etime-gold);
}
a:hover,
a:focus {
  color: var(--etime-gold-light);
}

h1, h2, h3, h4, h5, h6,
.card-title, .card-subtitle,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--etime-text);
}

hr {
  border-color: var(--etime-border);
}

/* ── Header / Topbar / Navbar ───────────────────────────── */
header.header,
header.header .navbar.navbar-light,
header.header .main-navbar-wrapper {
  background-color: var(--etime-header) !important;
}
header.header {
  border-bottom: 1px solid var(--etime-border);
}
header.header .topbar {
  background-color: var(--etime-bg-darker);
  color: rgba(255, 255, 255, 0.65);
  border-bottom: 1px solid var(--etime-border);
}
header.header .topbar .btn,
header.header .topbar .active-client .btn,
header.header .topbar .active-client .input-group-text {
  color: rgba(255, 255, 255, 0.7);
}
header.header .logo-img {
  max-height: 64px;
  width: auto;
  mix-blend-mode: lighten;
  transition: all 0.25s ease;
}
header.header .navbar-brand:hover .logo-img {
  filter: brightness(1.15);
}
header.header .navbar a,
header.header .navbar-nav a,
header.header .navbar-brand {
  color: var(--etime-text) !important;
}
header.header .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.25s ease;
}
header.header .navbar-nav .nav-link:hover,
header.header .navbar-nav .nav-link:focus,
header.header .navbar-nav .nav-link.active {
  color: #fff !important;
  background: rgba(183, 154, 114, 0.12);
}
header.header .toolbar .nav-link {
  border: 1px solid var(--etime-border);
  color: rgba(255, 255, 255, 0.8);
}
header.header .toolbar .nav-link:hover {
  color: var(--etime-gold);
  border-color: var(--etime-gold);
}
header.header .toolbar .nav-link .badge {
  background-color: var(--etime-gold);
  color: #0b0b0f;
}
header.header .navbar-light .navbar-nav .show > .nav-link,
header.header .navbar-light .navbar-nav .active > .nav-link,
header.header .navbar-light .navbar-nav .nav-link.show,
header.header .navbar-light .navbar-nav .nav-link.active {
  color: var(--etime-gold) !important;
}
header.header .navbar-toggler {
  color: var(--etime-text);
  border-color: var(--etime-border);
}
header.header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28183, 154, 114, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
header.header .navbar-text,
header.header .navbar-text a {
  color: var(--etime-text-muted);
}
header.header .search {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--etime-border);
}
header.header .search .form-control {
  background-color: transparent;
  color: var(--etime-text);
}
header.header .search .form-control::placeholder {
  color: var(--etime-text-muted);
}
header.header .search .btn {
  color: var(--etime-gold);
}
header.header .dropdown-menu {
  background-color: var(--etime-bg-card);
  border: 1px solid var(--etime-border);
}
header.header .dropdown-item {
  color: var(--etime-text);
}
header.header .dropdown-item:hover,
header.header .dropdown-item:focus {
  background-color: rgba(183, 154, 114, 0.12);
  color: var(--etime-gold);
}
header.header .dropdown-item.active,
header.header .dropdown-item:active {
  background-color: var(--etime-gold);
  color: #0b0b0f;
}
header.header .btn-active-client {
  color: var(--etime-text);
}
header.header .btn-active-client span {
  border-bottom: 1px dashed var(--etime-gold);
}

/* ── Breadcrumb ─────────────────────────────────────────── */
.master-breadcrumb {
  background-color: var(--etime-bg-darker);
  border-bottom: 1px solid var(--etime-border);
}
.breadcrumb {
  background-color: transparent;
}
.breadcrumb-item.active {
  color: var(--etime-text-muted);
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--etime-text-muted);
}
.breadcrumb-item a {
  color: var(--etime-gold);
}

/* ── Sidebar ────────────────────────────────────────────── */
.sidebar .card,
.sidebar .list-group {
  background-color: var(--etime-bg-card);
  border: 1px solid var(--etime-border);
}
.sidebar .list-group-item {
  background-color: transparent;
  color: var(--etime-text);
  border-color: var(--etime-border);
}
.sidebar .list-group-item.active {
  background-color: var(--etime-gold);
  border-color: var(--etime-gold);
  color: #0b0b0f;
}
.sidebar .list-group-item-action:hover,
.sidebar .list-group-item-action:focus {
  background-color: var(--etime-bg-card-hover);
  color: var(--etime-gold);
}
.sidebar a {
  color: var(--etime-text);
}
.sidebar a:hover {
  color: var(--etime-gold);
}

/* ── Cards / Panels ─────────────────────────────────────── */
.card,
.mc-promo-manage,
.mc-promo-login,
.panel {
  background-color: var(--etime-bg-card);
  border: 1px solid var(--etime-border);
  color: var(--etime-text);
}
.card-header,
.card-footer {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: var(--etime-border);
  color: var(--etime-text);
}
.primary-content .card-title {
  color: var(--etime-gold);
}

/* ── Buttons ────────────────────────────────────────────── */
.btn-primary {
  color: #0b0b0f;
  background-color: var(--etime-gold);
  border-color: var(--etime-gold);
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
  color: #0b0b0f;
  background-color: var(--etime-gold-light);
  border-color: var(--etime-gold-light);
  box-shadow: 0 0 0 0.2rem rgba(183, 154, 114, 0.35);
}
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--etime-gold-dark);
  border-color: var(--etime-gold-dark);
}
.btn-default,
.btn-secondary {
  color: var(--etime-text);
  background-color: transparent;
  border-color: var(--etime-border);
}
.btn-default:hover,
.btn-secondary:hover {
  color: var(--etime-gold);
  border-color: var(--etime-gold);
}
.btn-link {
  color: var(--etime-gold);
}

/* ── Forms ──────────────────────────────────────────────── */
.form-control,
select.form-control,
textarea.form-control,
.input-group-text {
  background-color: var(--etime-bg-card);
  border: 1px solid var(--etime-border);
  color: var(--etime-text);
}
.form-control:focus {
  background-color: var(--etime-bg-card);
  border-color: var(--etime-gold);
  color: var(--etime-text);
  box-shadow: 0 0 0 0.2rem rgba(183, 154, 114, 0.2);
}
.form-control::placeholder {
  color: var(--etime-text-muted);
}
.custom-control-label::before {
  background-color: var(--etime-bg-card);
  border-color: var(--etime-border);
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--etime-gold);
  border-color: var(--etime-gold);
}
.custom-select {
  background-color: var(--etime-bg-card);
  color: var(--etime-text);
  border-color: var(--etime-border);
}

/* ── Tables ─────────────────────────────────────────────── */
.table {
  color: var(--etime-text);
}
.table th,
.table td {
  border-color: var(--etime-border);
}
.table thead th {
  color: var(--etime-gold);
  border-bottom-color: var(--etime-border);
}
.table-hover tbody tr:hover {
  background-color: var(--etime-bg-card-hover);
  color: var(--etime-text);
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02);
}
.table-list {
  background-color: var(--etime-bg-card);
}

/* ── List groups / Alerts / Badges ──────────────────────── */
.list-group-item {
  background-color: var(--etime-bg-card);
  border-color: var(--etime-border);
  color: var(--etime-text);
}
.alert-primary,
.alert-info {
  background-color: rgba(183, 154, 114, 0.12);
  border-color: rgba(183, 154, 114, 0.3);
  color: var(--etime-gold-light);
}
.badge-primary,
.badge-info {
  background-color: var(--etime-gold);
  color: #0b0b0f;
}

/* ── Pagination / Dropdowns / Modals ────────────────────── */
.page-link {
  background-color: var(--etime-bg-card);
  border-color: var(--etime-border);
  color: var(--etime-text);
}
.page-link:hover {
  background-color: var(--etime-bg-card-hover);
  color: var(--etime-gold);
}
.page-item.active .page-link {
  background-color: var(--etime-gold);
  border-color: var(--etime-gold);
  color: #0b0b0f;
}
.dropdown-menu {
  background-color: var(--etime-bg-card);
  border: 1px solid var(--etime-border);
}
.dropdown-item {
  color: var(--etime-text);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(183, 154, 114, 0.12);
  color: var(--etime-gold);
}
.dropdown-divider {
  border-color: var(--etime-border);
}
.modal-content {
  background-color: var(--etime-bg-card);
  border: 1px solid var(--etime-border);
  color: var(--etime-text);
}
.modal-header,
.modal-footer {
  border-color: var(--etime-border);
}

/* ── Footer ─────────────────────────────────────────────── */
footer.footer {
  background-color: var(--etime-header) !important;
  color: var(--etime-text-muted);
  border-top: 1px solid var(--etime-border);
}
footer.footer .nav-link {
  color: var(--etime-text-muted);
}
footer.footer .nav-link:hover {
  color: var(--etime-gold);
}
footer.footer .btn {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--etime-text);
}
footer.footer .btn:hover {
  background-color: var(--etime-gold);
  color: #0b0b0f;
}
footer.footer .copyright {
  color: var(--etime-text-muted);
}
footer.footer a {
  color: var(--etime-gold);
}

/* ── Scrollbar (WebKit) ─────────────────────────────────── */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--etime-bg-darker);
}
::-webkit-scrollbar-thumb {
  background: var(--etime-bg-card-hover);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--etime-gold-dark);
}

/* ── Homepage: heading labels ───────────────────────────── */
#main-body h2.text-center,
.primary-content h2.text-center {
  color: var(--etime-text);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Homepage: domain search banner ─────────────────────── */
.home-domain-search.bg-white,
.home-domain-search {
  background-color: var(--etime-bg-card) !important;
  border-bottom: 1px solid var(--etime-border);
}
.home-domain-search h2 {
  color: var(--etime-text);
}
.home-domain-search .input-group-wrapper {
  background-color: var(--etime-bg);
  border: 1px solid var(--etime-border);
}
.home-domain-search .input-group-wrapper .form-control {
  background-color: transparent;
  color: var(--etime-text);
}
.home-domain-search .tld-logos {
  color: var(--etime-text-muted);
}
.home-domain-search .btn-link {
  color: var(--etime-gold);
}
.captchaimage {
  background-color: var(--etime-bg);
  border: 1px solid var(--etime-border);
}

/* ── Homepage: product / service cards ──────────────────── */
.card-columns.home .card,
.card-columns.home .mc-promo-manage,
.card-columns.home .mc-promo-login {
  background-color: var(--etime-bg-card);
  border: 1px solid var(--etime-border);
}
.card-columns.home .pricing-card-title {
  color: var(--etime-gold);
  font-weight: 700;
}
.card-columns.home .btn-outline-primary {
  color: var(--etime-gold);
  border-color: var(--etime-gold);
  background: transparent;
}
.card-columns.home .btn-outline-primary:hover {
  color: #0b0b0f;
  background-color: var(--etime-gold);
  border-color: var(--etime-gold);
}

/* ── Homepage: "How can we help" / "Your Account" tiles ─── */
.action-icon-btns a {
  background-color: var(--etime-bg-card);
  border: 1px solid var(--etime-border);
  border-radius: var(--radius, 12px);
  color: var(--etime-text-muted);
}
.action-icon-btns a .ico-container i {
  color: var(--etime-gold);
}
.action-icon-btns a:hover {
  background-color: var(--etime-bg-card-hover);
  color: var(--etime-text);
  border-color: var(--etime-gold);
  transform: translateY(-3px);
}
.action-icon-btns a:hover .ico-container i {
  color: var(--etime-gold-light);
}
/* Replace the colourful top-border accents with a single gold accent */
.action-icon-btns a[class*="card-accent-"] {
  border-top: 3px solid var(--etime-gold);
}

/* ── "Powered by" line ──────────────────────────────────── */
#main-body p,
.primary-content p {
  color: var(--etime-text-muted);
}
#main-body a,
.primary-content a {
  color: var(--etime-gold);
}

/* ── Client area dashboard tiles & widget cards ─────────── */
.tiles .tile {
  background-color: var(--etime-bg-card);
  border-right: 1px solid var(--etime-border);
  color: var(--etime-text);
}
.tiles .tile .title {
  color: var(--etime-text-muted);
}
.tiles .tile i {
  color: rgba(255, 255, 255, 0.08);
}
.tiles .tile:hover {
  background-color: var(--etime-bg-card-hover);
}
.tiles .tile:hover i {
  color: var(--etime-gold);
  opacity: 0.5;
}

.client-home-cards .card-header {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--etime-text);
}
.client-home-cards .list-group,
.client-home-cards .list-group .list-group-item {
  border-color: var(--etime-border) !important;
}
.client-home-cards small {
  color: var(--etime-text-muted);
}
.highlight.bg-color-gold    { background-color: var(--etime-gold) !important; }
.highlight.bg-color-blue    { background-color: #5a8fd6 !important; }
.highlight.bg-color-green   { background-color: #6fbf73 !important; }
.highlight.bg-color-red     { background-color: #e0726f !important; }

/* ── Invoices ───────────────────────────────────────────── */
.invoice-container,
.card.bg-default {
  background-color: var(--etime-bg-card);
  color: var(--etime-text);
}
.invoice-container .card,
.invoice-container .card-header,
.invoice-container .table {
  background-color: var(--etime-bg-card);
  border-color: var(--etime-border);
  color: var(--etime-text);
}
.invoice-container hr {
  border-color: var(--etime-border);
}

/* ── Support tickets ────────────────────────────────────── */
.view-ticket .card-body,
.attachments {
  background-color: var(--etime-bg-card);
  color: var(--etime-text);
}
.attachment-list a {
  color: var(--etime-gold);
}
.custom-file-label {
  background-color: var(--etime-bg-card);
  border: 1px solid var(--etime-border);
  color: var(--etime-text-muted);
}
.custom-file-label::after {
  background-color: var(--etime-bg-card-hover);
  color: var(--etime-text);
  border-left: 1px solid var(--etime-border);
}
.markdown-editor,
.CodeMirror {
  background-color: var(--etime-bg);
  color: var(--etime-text);
  border-color: var(--etime-border);
}