/* ============================================================
   drago-dark: dark client area skin over twenty-one.
   Tokens/design from mockups/clientarea (approved 8/10).
   Loaded last via head.tpl {assetExists file="custom.css"}.
   NOTE: viewinvoice.tpl is standalone (no head.tpl) and NEVER
   loads this file — the payment page is deliberately untouched.
   Body classes emitted by header.tpl:
     .dg          always
     .is-client   logged-in, not in cart  -> full app shell
     .in-cart     shopping cart pages     -> slim shell, panels untouched
     .{templatefile} per-page hooks (login, clientareahome, ...)
   ============================================================ */

@font-face { font-family: "Lowball Neue"; src: url("../fonts/LowballNeueRegular-rglJB.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lowball Neue"; src: url("../fonts/LowballNeueSemiBold-MVv5P.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Lowball Neue"; src: url("../fonts/LowballNeueBold-w18A6.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --dg-ink: #08080a;
  --dg-surface: #101012;
  --dg-surface-2: #16161a;
  --dg-surface-3: #1d1d22;
  --dg-line: #2a2a30;
  --dg-fg: #ffffff;
  --dg-fg-soft: #d9d9df;
  --dg-muted: #9a9aa4;
  --dg-brand: #d42128;
  --dg-brand-bright: #da1111;
  --dg-brand-dark: #2f0000;
  --dg-gold: #ffdf00;
  --dg-gold-soft: #ffcd70;
  --dg-green: #4ade80;
  --dg-display: "Lowball Neue", "Arial Narrow", sans-serif;
}

/* ---------- Base ---------- */
body.dg, body.dg.primary-bg-color { background: var(--dg-ink) !important; color: var(--dg-fg-soft); }
body.dg h1, body.dg h2 { font-family: var(--dg-display); color: var(--dg-fg); letter-spacing: -0.01em; }
body.dg h3 { color: var(--dg-fg); }
body.dg a { color: #ff8a8d; }
body.dg a:hover { color: #ffb3b5; }
body.dg ::selection { background: var(--dg-brand); color: #fff; }
body.dg hr { border-color: var(--dg-line); }
body.dg .text-muted, body.dg small { color: var(--dg-muted) !important; }

/* ---------- App shell (logged-in, non-cart) ---------- */
body.is-client { padding-bottom: 0; }
.dg-shell { display: flex; min-height: 100vh; }
.dg-side {
  width: 232px; flex: none; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--dg-surface); border-right: 1px solid var(--dg-line);
  padding: 26px 0 18px; display: flex; flex-direction: column; z-index: 40;
}
.dg-side .dg-logo { display: block; padding: 0 22px 24px; }
.dg-side .dg-logo img { display: block; height: 36px; width: auto; max-width: 100%; }
.dg-nav { flex: 1; }
.dg-nav > ul { list-style: none; margin: 0; padding: 0; }
.dg-nav a {
  display: flex; align-items: center; gap: 10px; padding: 10px 22px;
  color: var(--dg-muted); text-decoration: none; font-weight: 500; font-size: 14.5px;
  border-left: 3px solid transparent;
}
.dg-nav a:hover { color: var(--dg-fg-soft); text-decoration: none; }
.dg-nav a i { width: 18px; text-align: center; }
.dg-nav a .badge { margin-left: auto; background: var(--dg-brand); color: #fff; }
.dg-nav details { border: 0; }
.dg-nav details summary {
  display: flex; align-items: center; gap: 10px; padding: 10px 22px; cursor: pointer;
  color: var(--dg-muted); font-weight: 500; font-size: 14.5px; list-style: none;
  border-left: 3px solid transparent;
}
.dg-nav details summary::-webkit-details-marker { display: none; }
.dg-nav details summary::after { content: "\203A"; margin-left: auto; transition: transform .15s; color: var(--dg-muted); }
.dg-nav details[open] summary::after { transform: rotate(90deg); }
.dg-nav details a { padding-left: 50px; font-size: 13.5px; }
.dg-nav a.dg-current, .dg-nav summary.dg-current {
  color: var(--dg-fg); border-left-color: var(--dg-brand);
  background: linear-gradient(90deg, rgba(212,33,40,.13), transparent 70%);
}
.dg-nav details ul { list-style: none; margin: 0; padding: 0; }
.dg-side .dg-side-foot { padding: 16px 22px 0; font-size: 11.5px; color: var(--dg-muted); }
.dg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dg-topbar {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 14px 28px; border-bottom: 1px solid var(--dg-line);
}
.dg-topbar .btn { color: var(--dg-fg-soft); }
.dg-credit {
  display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 14px;
  border: 1px solid var(--dg-line); border-radius: 999px; font-size: 13px; color: var(--dg-muted);
  text-decoration: none; white-space: nowrap;
}
.dg-credit b { color: var(--dg-fg); font-family: var(--dg-display); font-weight: 600; font-size: 15px; }
.dg-content { padding: 6px 28px 60px; }
body.is-client #main-body .container { max-width: 1160px; margin-left: 0; }

/* Mobile app shell */
.dg-mtop, .dg-tabbar { display: none; }
@media (max-width: 1023.98px) {
  .dg-side { display: none; }
  .dg-topbar { display: none; }
  .dg-mtop {
    display: flex; position: sticky; top: 0; z-index: 50; align-items: center;
    justify-content: space-between; background: rgba(8,8,10,.88); backdrop-filter: blur(12px);
    padding: 12px 16px; border-bottom: 1px solid var(--dg-line);
  }
  .dg-mtop img { height: 28px; width: auto; }
  .dg-mtop-right { display: flex; align-items: center; gap: 10px; }
  .dg-msheet summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border: 1px solid var(--dg-line); border-radius: 10px; color: var(--dg-fg-soft);
  }
  .dg-msheet summary::-webkit-details-marker { display: none; }
  .dg-msheet[open] summary { border-color: var(--dg-brand); color: var(--dg-fg); }
  .dg-msheet-panel {
    position: fixed; left: 10px; right: 10px; top: 62px; z-index: 60;
    background: var(--dg-surface-2); border: 1px solid var(--dg-line); border-radius: 14px;
    padding: 6px 4px; box-shadow: 0 18px 50px -12px rgba(0,0,0,.8);
  }
  .dg-msheet-panel .dg-msheet-name {
    padding: 10px 16px 8px; font-weight: 600; color: var(--dg-fg); border-bottom: 1px solid var(--dg-line);
    margin-bottom: 4px; font-size: 14.5px;
  }
  body.dg .dg-msheet-panel a {
    display: block; padding: 11px 16px; color: var(--dg-fg-soft); text-decoration: none; font-size: 14.5px; border-radius: 8px;
  }
  .dg-msheet-panel a:hover { background: rgba(255,255,255,.05); color: var(--dg-fg); }
  .dg-msheet-panel a i { color: var(--dg-muted); margin-right: 6px; }

  /* Content first on phones: contextual sidebar panels drop below the page body */
  body.dg #main-body .row > .col-lg-4 { order: 2; }
  body.dg #main-body .row > .primary-content { order: 1; }
  .dg-content { padding: 6px 16px 96px; }
  .dg-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: rgba(16,16,18,.94); backdrop-filter: blur(12px); border-top: 1px solid var(--dg-line);
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom));
  }
  .dg-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--dg-muted); text-decoration: none; font-size: 10.5px; font-weight: 600; }
  .dg-tabbar a i { font-size: 17px; }
  .dg-tabbar a.dg-current { color: var(--dg-brand); }
}

/* ---------- Slim shell (logged-out + cart) ---------- */
.dg-slimbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px; border-bottom: 1px solid var(--dg-line); background: var(--dg-surface);
}
.dg-slimbar img { height: 32px; width: auto; }
.dg-slimbar .dg-slimlinks { display: flex; align-items: center; gap: 14px; }
.dg-slimbar a { color: var(--dg-fg-soft); text-decoration: none; font-weight: 500; font-size: 14px; }
.dg-slimbar .cart-btn .badge { background: var(--dg-brand); color: #fff; }

/* ---------- twenty-one component overlay ---------- */
/* Cards -> glass */
body.dg .card {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid var(--dg-line); border-radius: 14px; color: var(--dg-fg-soft);
}
body.dg .card .card-header { background: transparent; border-bottom: 1px solid var(--dg-line); color: var(--dg-fg); }
body.dg .card .card-footer { background: transparent; border-top: 1px solid var(--dg-line); }
body.dg .card .card-title { color: var(--dg-fg); }
body.dg .list-group-item { background: transparent; border-color: var(--dg-line); color: var(--dg-fg-soft); }
body.dg .list-group-item-action:hover { background: rgba(255,255,255,.04); color: var(--dg-fg); }
body.dg .list-group-item.active { background: rgba(212,33,40,.15); border-color: rgba(212,33,40,.4); color: var(--dg-fg); }

/* Home tiles (fallback layout) */
body.dg .tiles .tile { background: var(--dg-surface-2); border: 1px solid var(--dg-line); color: var(--dg-fg-soft); }
body.dg .tiles .tile .stat { color: var(--dg-fg); font-family: var(--dg-display); }
body.dg .tiles .tile:hover { background: var(--dg-surface-3); }

/* Buttons */
body.dg .btn-primary, body.dg .modal-submit {
  color: #fff; border: 0;
  background-image: linear-gradient(149deg, var(--dg-brand-bright) 8%, var(--dg-brand-dark) 92%);
  box-shadow: 0 8px 24px -10px rgba(218,17,17,.55), inset 0 1px 0 rgba(255,255,255,.15);
}
body.dg .btn-primary:hover { background-image: linear-gradient(149deg, var(--dg-brand-bright) 8%, #470000 92%); }
body.dg .btn-default, body.dg .btn-secondary, body.dg .btn-outline-primary {
  background: transparent; border: 1px solid var(--dg-line); color: var(--dg-fg-soft);
}
body.dg .btn-default:hover, body.dg .btn-secondary:hover, body.dg .btn-outline-primary:hover { border-color: var(--dg-muted); color: var(--dg-fg); background: transparent; }
body.dg .btn-link { color: #ff8a8d; }

/* Forms */
body.dg .form-control, body.dg .custom-select, body.dg select, body.dg textarea.form-control {
  background: var(--dg-surface-2); border: 1px solid var(--dg-line); color: var(--dg-fg);
}
body.dg .form-control:focus { background: var(--dg-surface-2); border-color: var(--dg-brand); color: var(--dg-fg); box-shadow: none; }
body.dg .form-control::placeholder { color: var(--dg-muted); }
body.dg .input-group-text { background: var(--dg-surface-3); border-color: var(--dg-line); color: var(--dg-muted); }
body.dg label, body.dg .form-control-label { color: var(--dg-fg-soft); }

/* Tables + dataTables */
body.dg .table { color: var(--dg-fg-soft); }
body.dg .table, body.dg table.table-list { background: transparent !important; }
body.dg .table tbody tr, body.dg .table tbody td { background: transparent !important; }
body.dg .table tbody td { color: var(--dg-fg-soft) !important; }
body.dg table.dataTable tbody tr { background: transparent !important; }
body.dg .sidebar .list-group-item { background: transparent; color: var(--dg-fg-soft); }
body.dg .sidebar .list-group-item.active { background: rgba(212,33,40,.18); color: var(--dg-fg); }
body.dg .table th, body.dg .table td { border-color: var(--dg-line); }
body.dg .table thead th { border-bottom-color: var(--dg-line); color: var(--dg-muted); text-transform: uppercase; font-size: 11.5px; letter-spacing: .08em; }
body.dg .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.025); }
body.dg .table-hover tbody tr:hover { background: rgba(255,255,255,.05); color: var(--dg-fg); }
body.dg .dataTables_wrapper .dataTables_length select,
body.dg .dataTables_wrapper .dataTables_filter input { background: var(--dg-surface-2); border: 1px solid var(--dg-line); color: var(--dg-fg); }
body.dg .dataTables_wrapper .dataTables_info, body.dg .dataTables_wrapper .dataTables_paginate { color: var(--dg-muted) !important; }
body.dg .page-item .page-link { background: transparent; border-color: var(--dg-line); color: var(--dg-fg-soft); }
body.dg .page-item.active .page-link { background: var(--dg-brand); border-color: var(--dg-brand); color: #fff; }
body.dg .page-item.disabled .page-link { background: transparent; color: var(--dg-muted); }

/* Status colors (invoices/tickets/services) */
body.dg .status--open, body.dg .label-success, body.dg .badge-success, body.dg .status-active, body.dg .textgreen { color: var(--dg-green) !important; }
body.dg .status--overdue, body.dg .label-danger, body.dg .badge-danger, body.dg .textred { color: #ff6b6e !important; }
body.dg .label-warning, body.dg .badge-warning { color: var(--dg-gold-soft) !important; background: rgba(255,205,112,.09) !important; }

/* Alerts */
body.dg .alert-info { background: rgba(64,150,255,.08); border-color: rgba(64,150,255,.35); color: #9cc6ff; }
body.dg .alert-success { background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.35); color: var(--dg-green); }
body.dg .alert-warning { background: rgba(255,205,112,.08); border-color: rgba(255,205,112,.35); color: var(--dg-gold-soft); }
body.dg .alert-danger { background: rgba(212,33,40,.1); border-color: rgba(212,33,40,.45); color: #ff8a8d; }

/* Dropdowns, popovers, modals */
body.dg .dropdown-menu { background: var(--dg-surface-2); border: 1px solid var(--dg-line); }
body.dg .dropdown-menu a, body.dg .dropdown-item { color: var(--dg-fg-soft); }
body.dg .dropdown-item:hover, body.dg .dropdown-menu a:hover { background: rgba(255,255,255,.05); color: var(--dg-fg); }
body.dg .popover { background: var(--dg-surface-2); border: 1px solid var(--dg-line); }
body.dg .popover-body { color: var(--dg-fg-soft); }
body.dg .modal-content { background: var(--dg-surface-2); border: 1px solid var(--dg-line); color: var(--dg-fg-soft); }
body.dg .modal-header, body.dg .modal-footer { border-color: var(--dg-line); }
body.dg .modal-title { color: var(--dg-fg); }
body.dg .close { color: var(--dg-fg); text-shadow: none; }

/* Breadcrumb + page furniture */
body.dg .master-breadcrumb { background: transparent; border-bottom: 1px solid var(--dg-line); }
body.dg .breadcrumb { background: transparent; margin: 0; padding: 8px 0; font-size: 12.5px; }
body.dg .breadcrumb-item, body.dg .breadcrumb-item a { color: var(--dg-muted); }
body.dg #footer { background: transparent; border-top: 1px solid var(--dg-line); color: var(--dg-muted); }
body.dg #footer .nav-link, body.dg #footer .btn { color: var(--dg-muted); }
body.dg #footer .copyright { color: var(--dg-muted); font-size: 12.5px; }

/* Per-page contextual sidebars (actions) inside main-body */
body.dg #main-body .sidebar .card { background: var(--dg-surface); }
body.dg #main-body .sidebar .card-header { font-family: var(--dg-display); }

/* ---------- Login ---------- */
body.dg.login #main-body { position: relative; min-height: 78vh; display: flex; align-items: center; }
body.dg.login #main-body::before {
  content: ""; position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
  width: 360px; height: 360px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(212,33,40,.4), transparent 76%); filter: blur(30px);
}
body.dg.login .mw-540 { margin: 0 auto; backdrop-filter: blur(10px); }
body.dg.login .card-footer small, body.dg.login .card-footer a { color: var(--dg-muted); }

/* ---------- Dashboard (clientareahome) ---------- */
.dg-hero { position: relative; overflow: hidden; padding: 30px; margin-bottom: 20px; }
.dg-hero .dg-eyebrow { display: inline-flex; font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--dg-brand); }
.dg-hero .dg-amount { font-family: var(--dg-display); font-weight: 700; font-size: 56px; line-height: 1; color: var(--dg-fg); }
.dg-hero .dg-glow { position: absolute; top: -120px; right: -60px; width: 340px; height: 340px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(212,33,40,.45), transparent 76%); filter: blur(30px); }
.dg-badge-gold { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 8px; background: linear-gradient(125deg, #d89a26 12%, var(--dg-gold-soft) 88%); color: #1a1200; font-size: 12px; font-weight: 700; }
.dg-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; border: 1px solid; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.dg-pill.ok { color: var(--dg-green); border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.07); }
.dg-pill.bad { color: #ff6b6e; border-color: rgba(212,33,40,.45); background: rgba(212,33,40,.1); }
.dg-sect { font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--dg-muted); margin: 30px 0 12px; font-family: inherit; font-weight: 600; }
.dg-rowcard { display: flex; flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 24px; }
.dg-rowcard h3 { font-family: var(--dg-display); }
.dg-rowcard .grow { flex: 1 1 200px; min-width: 0; }
.dg-rowcard h3 { font-size: 20px; margin: 0; }
.dg-rowcard .sub { font-size: 13px; color: var(--dg-muted); margin-top: 4px; }
.dg-rowcard.unpaid { border-color: rgba(212,33,40,.5); }
a.dg-rowcard { text-decoration: none; }

/* Referral addon page: its inline-styled light card goes dark */
body.dg .drago-ref div[style*="background"] { background: var(--dg-surface-2) !important; border-color: var(--dg-line) !important; }
body.dg .drago-ref h3, body.dg .drago-ref h4 { color: var(--dg-fg); }

/* ---------- Add funds hook chips: harmonize on dark ---------- */
body.dg .drago-af p { color: var(--dg-muted); }
body.dg .drago-af-chip { background: transparent; }
body.dg .drago-af-chip:hover { background: #d42128; }

/* ---------- Cart: fully light store pages under the dark brand bar. ----------
   The order-form CSS (premium_comparison/store.css) is designed light; a
   dark/light hybrid looked broken (Jared 8/10). This block resets every
   component the dark overlay touches back to light defaults, scoped in-cart. */
body.dg.in-cart, body.dg.in-cart.primary-bg-color { background: #f2f3f5 !important; color: #212529; }
body.dg.in-cart h1, body.dg.in-cart h2, body.dg.in-cart h3 { color: #16181d; }
body.dg.in-cart a { color: #1779ba; }
body.dg.in-cart a:hover { color: #105582; }
body.dg.in-cart a.btn-primary, body.dg.in-cart .btn-primary, body.dg.in-cart .btn-primary * { color: #fff !important; }
body.dg.in-cart .text-muted, body.dg.in-cart small { color: #6c757d !important; }
body.dg.in-cart hr { border-color: #dee2e6; }
body.dg.in-cart .card { background: #fff; border-color: #e3e6ea; color: #212529; backdrop-filter: none; }
body.dg.in-cart .card .card-header { background: #f8f9fa; border-color: #e3e6ea; color: #212529; }
body.dg.in-cart .card .card-title { color: #212529; }
body.dg.in-cart .card .card-footer { background: #f8f9fa; border-color: #e3e6ea; }
body.dg.in-cart .list-group-item { background: #fff; border-color: #e9ecef; color: #212529; }
body.dg.in-cart .list-group-item-action:hover { background: #f1f3f5; color: #16181d; }
body.dg.in-cart .list-group-item.active { background: var(--dg-brand); border-color: var(--dg-brand); color: #fff; }
body.dg.in-cart .table, body.dg.in-cart .table tbody td { color: #212529 !important; }
body.dg.in-cart .table th, body.dg.in-cart .table td { border-color: #dee2e6; }
body.dg.in-cart .table thead th { color: #6c757d; }
body.dg.in-cart .form-control, body.dg.in-cart .custom-select, body.dg.in-cart select, body.dg.in-cart textarea.form-control { background: #fff; border-color: #ced4da; color: #212529; }
body.dg.in-cart .form-control:focus { background: #fff; color: #212529; border-color: var(--dg-brand); }
body.dg.in-cart .form-control::placeholder { color: #868e96; }
body.dg.in-cart .input-group-text { background: #e9ecef; border-color: #ced4da; color: #495057; }
body.dg.in-cart label, body.dg.in-cart .form-control-label { color: #212529; }
body.dg.in-cart .btn-default, body.dg.in-cart .btn-secondary { background: #fff; border-color: #ced4da; color: #212529; }
body.dg.in-cart .btn-default:hover, body.dg.in-cart .btn-secondary:hover { background: #f1f3f5; color: #16181d; border-color: #adb5bd; }
body.dg.in-cart .alert-info { background: #e7f3fe; border-color: #b6daf5; color: #0c5395; }
body.dg.in-cart .alert-success { background: #e6f6ec; border-color: #b7e4c7; color: #1e7c40; }
body.dg.in-cart .alert-warning { background: #fff6e5; border-color: #ffe1a8; color: #8a6116; }
body.dg.in-cart .alert-danger { background: #fdecec; border-color: #f5b8ba; color: #a11a1f; }
body.dg.in-cart .dropdown-menu { background: #fff; border-color: #e3e6ea; }
body.dg.in-cart .dropdown-item, body.dg.in-cart .dropdown-menu a { color: #212529; }
body.dg.in-cart .dropdown-item:hover, body.dg.in-cart .dropdown-menu a:hover { background: #f1f3f5; color: #16181d; }
body.dg.in-cart .modal-content { background: #fff; border-color: #e3e6ea; color: #212529; }
body.dg.in-cart .modal-title { color: #16181d; }
body.dg.in-cart .close { color: #16181d; }
body.dg.in-cart .master-breadcrumb { border-bottom-color: #dee2e6; }
body.dg.in-cart .breadcrumb-item, body.dg.in-cart .breadcrumb-item a { color: #6c757d; }
body.dg.in-cart .page-item .page-link { background: #fff; border-color: #dee2e6; color: #1779ba; }
body.dg.in-cart #footer { border-top-color: #dee2e6; color: #6c757d; }
body.dg.in-cart #footer .nav-link, body.dg.in-cart #footer .btn, body.dg.in-cart #footer .copyright { color: #6c757d; }

/* Semantic green buttons: keep meaning, mute the shout */
body.dg .btn-success { background: rgba(74,222,128,.14); border: 1px solid rgba(74,222,128,.4); color: var(--dg-green); }
body.dg .btn-success:hover { background: rgba(74,222,128,.24); color: #d8ffe6; }

/* Wide tables scroll inside their container on small screens */
@media (max-width: 1023.98px) {
  body.dg .table-container, body.dg .dataTables_wrapper, body.dg .table-responsive { overflow-x: auto; }
  body.dg table.table-list { display: block !important; overflow-x: auto; } /* !important: DataTables sets inline display */
  body.dg .dg-content { overflow-x: hidden; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { body.dg * { animation: none !important; transition: none !important; } }