/* ===========================================================
   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: 70px;
  filter: brightness(1.05);
}
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 .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);
}