/* ═══════════════════════════════════════════════════════════════
   FitAxis Client Area — WHMCS Twenty-One Template
   2026 dark theme: elevation, pills, glass chrome, mobile layer
   Complete replacement for templates/twenty-one/css/custom.css
   Accent is driven by --fx-accent — change one line to rebrand.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Set by the Portal Branding addon; defaults match FitAxis */
    --fx-on-accent: var(--fx-on-accent);

    /* Brand — swap these three to switch teal ⇄ cyan (#14dbff/#0aa8c9) */
    --fx-accent:      #14b8a6;
    --fx-accent-dark: #0d9488;
    --fx-accent-rgb:  20, 184, 166;

    --fx-bg:        #0a0f1a;
    --fx-raised:    #0d1117;
    --fx-card:      #11161f;
    --fx-hover:     #161f2e;
    --fx-border:    #1f2733;
    --fx-border-hi: rgba(255,255,255,0.12);
    --fx-text:      #ffffff;
    --fx-body:      #a1a8b5;
    --fx-muted:     #6b7280;
    --fx-dim:       #4b5563;

    --fx-radius:    12px;
    --fx-radius-sm: 9px;
    --fx-elev-1: 0 1px 2px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.25);
    --fx-elev-2: 0 2px 4px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.35);
    --fx-elev-3: 0 4px 8px rgba(0,0,0,0.4), 0 16px 48px rgba(0,0,0,0.45);
    --fx-grad: linear-gradient(135deg, var(--fx-accent) 0%, var(--fx-accent-dark) 100%);
    --fx-ring: 0 0 0 2px rgba(var(--fx-accent-rgb), 0.5);
    --fx-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Global ── */
body, body.primary-bg-color {
    background-color: var(--fx-bg) !important;
    color: var(--fx-body) !important;
    font-family: Inter, "Helvetica Neue", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}
hr { border-color: var(--fx-border) !important; }
h1,h2,h3,h4,h5,h6 { letter-spacing: -0.4px; }

a { color: var(--fx-accent) !important; }
a:hover { color: var(--fx-accent-dark) !important; }
.small.text-muted, .text-muted, small { color: var(--fx-muted) !important; }

a, .btn, .card, .tile, .list-group-item, .form-control, .dropdown-item, .page-link {
    transition: background-color 0.15s var(--fx-ease),
                border-color 0.15s var(--fx-ease),
                box-shadow 0.2s var(--fx-ease),
                transform 0.15s var(--fx-ease),
                color 0.15s var(--fx-ease);
}
:focus-visible { outline: none !important; box-shadow: var(--fx-ring) !important; }

/* ── Topbar (notifications / logged-in strip) ── */
#header .topbar {
    background-color: rgba(5,8,12,0.85) !important;
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border-bottom: 1px solid var(--fx-border) !important;
}
#header .topbar .btn,
#header .topbar .input-group-text { color: var(--fx-muted) !important; }
.active-client .input-group-text {
    background-color: var(--fx-card) !important;
    border-color: var(--fx-border) !important;
    color: var(--fx-muted) !important;
}
.btn-active-client {
    background-color: var(--fx-card) !important;
    color: var(--fx-text) !important;
    border-color: var(--fx-border) !important;
}
.btn-return-to-admin { color: var(--fx-body) !important; }

/* ── Navbar (glass) ── */
#header { background-color: var(--fx-raised) !important; }
#header .navbar {
    background-color: rgba(10,15,26,0.85) !important;
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border-bottom: 1px solid rgba(var(--fx-accent-rgb),0.15) !important;
    box-shadow: none !important;
}
#header .navbar .navbar-brand {
    color: var(--fx-text) !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    letter-spacing: -0.5px;
}
#header .navbar .navbar-brand img { max-height: 34px; }

#header .main-navbar-wrapper {
    background-color: rgba(13,17,23,0.85) !important;
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border-top: 1px solid rgba(var(--fx-accent-rgb),0.1) !important;
    border-bottom: 1px solid rgba(var(--fx-accent-rgb),0.1) !important;
}
#header .main-navbar-wrapper .navbar-nav .nav-item a,
#header #nav > li > a {
    color: var(--fx-body) !important;
    border-radius: var(--fx-radius-sm);
}
#header .main-navbar-wrapper .navbar-nav .nav-item a:hover,
#header #nav > li > a:hover {
    color: var(--fx-accent) !important;
    background: rgba(var(--fx-accent-rgb),0.06) !important;
}
.cart-btn { color: var(--fx-body) !important; }

/* Collapsed mobile navbar panel */
#header .navbar-collapse {
    background-color: var(--fx-raised) !important;
}

/* ── Search ── */
#header .input-group.search .form-control {
    background-color: var(--fx-card) !important;
    border-color: var(--fx-border) !important;
    color: var(--fx-text) !important;
}
#header .input-group.search .form-control::placeholder { color: var(--fx-dim) !important; }
#header .input-group.search .btn {
    background-color: var(--fx-card) !important;
    border-color: var(--fx-border) !important;
    color: var(--fx-muted) !important;
}

/* ── Breadcrumb ── */
.master-breadcrumb { background: transparent !important; }
.master-breadcrumb .breadcrumb { background: transparent !important; }
.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a { color: var(--fx-muted) !important; }
.master-breadcrumb .breadcrumb-item.active { color: var(--fx-body) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--fx-dim) !important; }

/* ── Main body ── */
#main-body { background-color: var(--fx-bg) !important; }

/* ── Cards: elevation ── */
.card, .card-sidebar {
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 60%), var(--fx-card) !important;
    border: 1px solid var(--fx-border) !important;
    border-radius: var(--fx-radius) !important;
    box-shadow: var(--fx-elev-1) !important;
    overflow: visible;           /* clipping here pushed dropdowns behind cards */
}
.card > .card-header { border-radius: calc(var(--fx-radius) - 1px) calc(var(--fx-radius) - 1px) 0 0; }
.card > .card-footer { border-radius: 0 0 calc(var(--fx-radius) - 1px) calc(var(--fx-radius) - 1px); }
.card:hover {
    border-color: var(--fx-border-hi) !important;
    box-shadow: var(--fx-elev-2) !important;
}
.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--fx-border) !important;
    color: var(--fx-text) !important;
    font-weight: 600;
}
.card-body { background-color: transparent !important; color: var(--fx-body) !important; }
.card-footer {
    background-color: rgba(0,0,0,0.15) !important;
    border-top: 1px solid var(--fx-border) !important;
    color: var(--fx-muted) !important;
}
.card-footer a { color: var(--fx-accent) !important; }
.card h3, .card h6, .card .h3, .card .h6,
.card .card-title { color: var(--fx-text) !important; }
.card .text-muted { color: var(--fx-muted) !important; }
.card-body p { color: var(--fx-body) !important; }
.card-accent-gold, .card-accent-blue, .card-accent-asbestos,
.card-accent-green, .card-accent-red { background-color: var(--fx-card) !important; }

/* ── Dashboard service rows ── */
.div-service-item {
    background-color: var(--fx-raised) !important;
    border-color: var(--fx-border) !important;
    border-radius: var(--fx-radius-sm) !important;
}
.div-service-item:hover {
    border-color: rgba(var(--fx-accent-rgb),0.35) !important;
    background-color: var(--fx-hover) !important;
}
.div-service-name .font-weight-bold { color: var(--fx-text) !important; }
.text-domain, .text-last-updated { color: var(--fx-muted) !important; }

/* ── Stat tiles ── */
.tile {
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 60%), var(--fx-card) !important;
    border: 1px solid var(--fx-border) !important;
    border-radius: var(--fx-radius) !important;
    box-shadow: var(--fx-elev-1) !important;
}
.tile:hover {
    background-color: var(--fx-hover) !important;
    border-color: rgba(var(--fx-accent-rgb),0.35) !important;
    box-shadow: var(--fx-elev-2) !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}
.tile .stat { color: var(--fx-accent) !important; font-weight: 700 !important; letter-spacing: -0.5px; }
.tile .title { color: var(--fx-body) !important; font-weight: 500 !important; }
.tile i { color: var(--fx-muted) !important; transition: color 0.15s var(--fx-ease); }
.tile:hover i { color: var(--fx-accent) !important; }

/* ── Sidebar menus ── */
.list-group, .list-group-flush { background: transparent !important; }
.list-group-item {
    background-color: transparent !important;
    border-color: var(--fx-border) !important;
    color: var(--fx-body) !important;
}
.list-group-item-action:hover,
.list-group-item:hover {
    background: linear-gradient(90deg, rgba(var(--fx-accent-rgb),0.08) 0%, rgba(var(--fx-accent-rgb),0) 100%) !important;
    box-shadow: inset 2px 0 0 var(--fx-accent);
    color: var(--fx-accent) !important;
}
.list-group-item.active {
    background: var(--fx-grad) !important;
    border-color: transparent !important;
    color: var(--fx-on-accent) !important;
    font-weight: 600;
}
.sidebar-menu-item-label { color: var(--fx-body) !important; }
.sidebar-menu-item-icon { color: var(--fx-muted) !important; }
.list-group-item-action:hover .sidebar-menu-item-icon,
.list-group-item-action:hover .sidebar-menu-item-label { color: var(--fx-accent) !important; }
.list-group-item.active .sidebar-menu-item-icon,
.list-group-item.active .sidebar-menu-item-label { color: var(--fx-on-accent) !important; }

/* ── Forms ── */
.form-control {
    background-color: var(--fx-raised) !important;
    border: 1px solid var(--fx-border-hi) !important;
    color: var(--fx-text) !important;
    border-radius: var(--fx-radius-sm) !important;
}
.form-control:hover { border-color: rgba(var(--fx-accent-rgb),0.35) !important; }
.form-control:focus {
    background-color: var(--fx-raised) !important;
    border-color: var(--fx-accent) !important;
    color: var(--fx-text) !important;
    box-shadow: var(--fx-ring) !important;
}
.form-control::placeholder { color: var(--fx-dim) !important; }
.form-control-label, label, .col-form-label { color: var(--fx-body) !important; }
.input-group-text {
    background-color: var(--fx-raised) !important;
    border: 1px solid var(--fx-border) !important;
    color: var(--fx-muted) !important;
}
.btn-reveal-pw {
    background-color: var(--fx-raised) !important;
    border: 1px solid var(--fx-border) !important;
    color: var(--fx-muted) !important;
}
select, textarea {
    background-color: var(--fx-raised) !important;
    border: 1px solid var(--fx-border) !important;
    color: var(--fx-text) !important;
}
.form-check-input { accent-color: var(--fx-accent); }

/* ── Buttons ── */
.btn { border-radius: var(--fx-radius-sm) !important; font-weight: 600 !important; }
.btn:active { transform: scale(0.97); }
.btn-primary, .btn-success {
    background: var(--fx-grad) !important;
    border: none !important;
    color: var(--fx-on-accent) !important;
    box-shadow: 0 2px 12px rgba(var(--fx-accent-rgb),0.25) !important;
}
.btn-primary:hover, .btn-success:hover {
    box-shadow: 0 4px 20px rgba(var(--fx-accent-rgb),0.4) !important;
    transform: translateY(-1px);
    color: var(--fx-on-accent) !important;
}
.btn-default {
    background-color: var(--fx-card) !important;
    border: 1px solid var(--fx-border-hi) !important;
    color: var(--fx-body) !important;
}
.btn-default:hover { border-color: var(--fx-accent) !important; color: var(--fx-accent) !important; }
.btn-danger {
    background: rgba(239,68,68,0.12) !important;
    border: 1px solid rgba(239,68,68,0.35) !important;
    color: #f87171 !important;
}
.btn-danger:hover { background: rgba(239,68,68,0.2) !important; }

/* ── Status pills (.label.status.status-*) ── */
.label.status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px;
    text-transform: none !important;
}
.label.status::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.status-active, .status-paid, .label-success {
    background: rgba(16,185,129,0.14) !important; color: #34d399 !important;
}
.status-pending, .status-unpaid, .status-draft {
    background: rgba(245,158,11,0.14) !important; color: #fbbf24 !important;
}
.status-suspended, .status-overdue, .status-collections {
    background: rgba(239,68,68,0.14) !important; color: #f87171 !important;
}
.status-cancelled, .status-terminated, .status-expired, .status-fraud, .label-placeholder {
    background: rgba(255,255,255,0.08) !important; color: var(--fx-muted) !important;
}
.status-refunded, .badge-info {
    background: rgba(var(--fx-accent-rgb),0.12) !important; color: var(--fx-accent) !important;
}

/* ── Tables ── */
.table { color: var(--fx-body) !important; }
.table thead th {
    border-bottom: 1px solid var(--fx-border-hi) !important;
    border-top: none !important;
    color: var(--fx-muted) !important;
    background-color: transparent !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600 !important;
}
.table td, .table th { border-top: 1px solid var(--fx-border) !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,0.015) !important; }
.table-hover tbody tr:hover { background-color: rgba(var(--fx-accent-rgb),0.04) !important; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--fx-raised) !important;
    border: 1px solid var(--fx-border) !important;
    color: var(--fx-text) !important;
}
.dataTables_info, .dataTables_length, .dataTables_filter { color: var(--fx-muted) !important; }

/* ── Alerts ── */
.alert { border-radius: var(--fx-radius-sm) !important; }
.alert-success { background-color: rgba(16,185,129,0.1) !important; border-color: rgba(16,185,129,0.3) !important; color: #34d399 !important; }
.alert-danger  { background-color: rgba(239,68,68,0.1)  !important; border-color: rgba(239,68,68,0.3)  !important; color: #f87171 !important; }
.alert-warning { background-color: rgba(251,191,36,0.1) !important; border-color: rgba(251,191,36,0.3) !important; color: #fbbf24 !important; }
.alert-info    { background-color: rgba(var(--fx-accent-rgb),0.1) !important; border-color: rgba(var(--fx-accent-rgb),0.25) !important; color: var(--fx-accent) !important; }

/* ── Dropdowns ── */
.dropdown-menu {
    background-color: var(--fx-card) !important;
    border: 1px solid var(--fx-border-hi) !important;
    border-radius: var(--fx-radius) !important;
    box-shadow: var(--fx-elev-3) !important;
}
.dropdown-item, .dropdown-menu a { color: var(--fx-body) !important; }
.dropdown-item:hover, .dropdown-menu a:hover {
    background-color: rgba(var(--fx-accent-rgb),0.08) !important;
    color: var(--fx-accent) !important;
}
.dropdown-divider { border-top: 1px solid var(--fx-border) !important; }

/* ── Modals ── */
.modal-content {
    background-color: var(--fx-card) !important;
    border: 1px solid var(--fx-border-hi) !important;
    border-radius: var(--fx-radius) !important;
    box-shadow: var(--fx-elev-3) !important;
    color: var(--fx-body) !important;
}
.modal-header { background-color: transparent !important; border-bottom: 1px solid var(--fx-border) !important; }
.modal-header .modal-title { color: var(--fx-text) !important; }
.modal-header .close { color: var(--fx-body) !important; }
.modal-body { color: var(--fx-body) !important; }
.modal-footer { background-color: rgba(0,0,0,0.15) !important; border-top: 1px solid var(--fx-border) !important; }

/* ── Pagination ── */
.page-item .page-link {
    background-color: var(--fx-card) !important;
    border-color: var(--fx-border) !important;
    color: var(--fx-body) !important;
    min-width: 38px;
    text-align: center;
}
.page-item .page-link:hover { background-color: var(--fx-hover) !important; color: var(--fx-accent) !important; }
.page-item.active .page-link {
    background: var(--fx-grad) !important;
    border-color: transparent !important;
    color: var(--fx-on-accent) !important;
}
.page-item.disabled .page-link { color: var(--fx-dim) !important; }

/* ── Language selector ── */
.item-selector .item { background-color: var(--fx-raised) !important; border-color: var(--fx-border) !important; color: var(--fx-body) !important; }
.item-selector .item:hover, .item-selector .item.active { background: var(--fx-grad) !important; color: var(--fx-on-accent) !important; }

/* ── Footer ── */
#footer {
    background-color: var(--fx-raised) !important;
    border-top: 1px solid var(--fx-border) !important;
    color: var(--fx-muted) !important;
}
#footer .nav-link { color: var(--fx-muted) !important; }
#footer .nav-link:hover { color: var(--fx-accent) !important; }
#footer .copyright { color: var(--fx-dim) !important; }
#footer .btn { color: var(--fx-muted) !important; }

/* ── Thin unified scrollbars ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fx-border-hi); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--fx-accent); }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }

/* ════════════════════════════════════════════════════════════
   MOBILE LAYER — Twenty-One is Bootstrap-responsive already;
   this adds touch ergonomics + dark polish for mobile UI.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    /* Collapsed nav: dark panel, big tap rows */
    #header .navbar-collapse,
    #header .main-navbar-wrapper .navbar-collapse {
        background-color: var(--fx-raised) !important;
        border: 1px solid var(--fx-border);
        border-radius: var(--fx-radius);
        margin-top: 6px;
        box-shadow: var(--fx-elev-3);
        max-height: 75vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #header .navbar-nav .nav-item a {
        padding-top: 13px !important;
        padding-bottom: 13px !important;
    }
    #header .navbar-toggler {
        border-color: var(--fx-border-hi) !important;
        color: var(--fx-body) !important;
        min-width: 44px;
        min-height: 44px;
    }

    /* Tables scroll, don't squish */
    .table-container, .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border: 1px solid var(--fx-border);
        border-radius: var(--fx-radius-sm);
    }
    .table td, .table th { white-space: nowrap; }
}

@media (max-width: 767px) {
    /* iOS zoom prevention + touch inputs */
    .form-control, select, textarea,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="search"] {
        font-size: 16px !important;
        min-height: 44px;
    }
    .btn {
        min-height: 44px !important;
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }

    /* Tiles: 2-up grid stays comfortable */
    .tile { padding: 12px !important; }
    .tile .stat { font-size: 1.4rem !important; }

    /* Modals near-full-width */
    .modal-dialog { margin: 8px !important; max-width: none !important; }
    .modal-body { max-height: 68vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

    /* Pagination touch targets */
    .page-item .page-link { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }

    /* Footer stacks */
    #footer { text-align: center; }
}


/* ════════════════════════════════════════════════════════════
   PRODUCTION FIXES — stacking order + uncovered components
   ════════════════════════════════════════════════════════════ */

/* ── Stacking: glass backdrop-filter creates new stacking contexts;
      establish explicit hierarchy so menus always float on top ── */
#header { position: relative; z-index: 500; }
#header .navbar, #header .main-navbar-wrapper, #header .topbar { z-index: auto; }
.dropdown-menu { z-index: 1050 !important; }
.popover { z-index: 1060 !important; }
.modal { z-index: 1072 !important; }
.modal-backdrop { z-index: 1071 !important; }
.tooltip { z-index: 1080 !important; }
#main-body { position: relative; z-index: 1; }

/* ── Ticket editor (bootstrap-markdown: .md-editor) ──
   WHMCS Twenty-One builds the editor at runtime via jQuery .markdown();
   the plugin's stylesheet paints .md-editor white — theme every part. ── */
.md-editor {
    background-color: var(--fx-raised) !important;
    border: 1px solid var(--fx-border-hi) !important;
    border-radius: var(--fx-radius-sm) !important;
    overflow: hidden;
}
.md-editor.active {
    border-color: var(--fx-accent) !important;
    box-shadow: var(--fx-ring) !important;
    outline: none !important;
}
.md-editor > .md-header, .md-editor .md-footer {
    background-color: var(--fx-card) !important;
    border-bottom: 1px solid var(--fx-border) !important;
}
.md-editor > .md-header .btn,
.md-editor > .md-header .btn-default,
.md-editor > .md-header .btn-sm {
    background-color: transparent !important;
    border: none !important;
    color: var(--fx-body) !important;
    box-shadow: none !important;
    min-height: 34px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.md-editor > .md-header .btn:hover,
.md-editor > .md-header .btn.active {
    background-color: rgba(var(--fx-accent-rgb),0.12) !important;
    color: var(--fx-accent) !important;
    border-radius: 6px !important;
    transform: none !important;
}
/* theme.min.css ships `.md-editor > textarea.markdown-editor { background:#fff !important }`
   — must out-specific it, not just out-order it */
.md-editor > textarea,
.md-editor > textarea.markdown-editor,
.md-editor > textarea.form-control.markdown-editor.md-input,
.md-editor > .md-input {
    background-color: var(--fx-raised) !important;
    background: var(--fx-raised) !important;
    color: var(--fx-text) !important;
    border: none !important;
    border-top: 1px solid var(--fx-border) !important;
    border-radius: 0 !important;
    padding: 12px !important;
}
.md-editor > textarea:focus,
.md-editor > textarea.form-control.markdown-editor.md-input:focus,
.md-editor > .md-input:focus {
    background-color: var(--fx-raised) !important;
    background: var(--fx-raised) !important;
    color: var(--fx-text) !important;
    box-shadow: none !important;
}
/* theme.min.css also pairs `.md-editor > .md-preview` at (0,2,0) important */
.md-editor > .md-preview.md-preview.md-preview {
    background: var(--fx-card) !important;
    color: var(--fx-body) !important;
}
.md-editor > .md-preview {
    background-color: var(--fx-card) !important;
    color: var(--fx-body) !important;
    border-top: 1px solid var(--fx-border) !important;
    min-height: 200px;
    padding: 12px !important;
}
.md-editor .md-controls .md-control { color: var(--fx-muted) !important; }
.md-editor .md-controls .md-control:hover { color: var(--fx-accent) !important; }
.markdown-editor-status { color: var(--fx-muted) !important; padding: 4px 10px; font-size: 12px; }
/* Fullscreen mode */
.md-editor.md-fullscreen-mode {
    background: var(--fx-bg) !important;
    z-index: 1090 !important;
}
.md-editor.md-fullscreen-mode .md-input,
.md-editor.md-fullscreen-mode .md-preview {
    background: var(--fx-bg) !important;
    color: var(--fx-text) !important;
}
.md-editor.md-fullscreen-mode .md-fullscreen-controls a { color: var(--fx-muted) !important; }
.md-editor.md-fullscreen-mode .md-fullscreen-controls a:hover { color: var(--fx-accent) !important; }

/* ── Bootstrap custom file input (attachments) — was white ── */
.custom-file-label {
    background-color: var(--fx-raised) !important;
    border: 1px solid var(--fx-border-hi) !important;
    color: var(--fx-body) !important;   /* muted failed WCAG AA (3.9:1) */
    border-radius: var(--fx-radius-sm) !important;
}
.custom-file-label::after {
    background-color: var(--fx-card) !important;
    color: var(--fx-body) !important;
    border-left: 1px solid var(--fx-border) !important;
}
.custom-file-input:focus ~ .custom-file-label {
    border-color: var(--fx-accent) !important;
    box-shadow: var(--fx-ring) !important;
}

/* ── Notifications popover (topbar flag) — was white ── */
.popover {
    background-color: var(--fx-card) !important;
    border: 1px solid var(--fx-border-hi) !important;
    border-radius: var(--fx-radius) !important;
    box-shadow: var(--fx-elev-3) !important;
}
.popover-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--fx-border) !important;
    color: var(--fx-text) !important;
}
.popover-body { color: var(--fx-body) !important; }
.popover .arrow::before { border-color: transparent !important; }
.popover.bs-popover-bottom .arrow::after { border-bottom-color: var(--fx-card) !important; }
.popover.bs-popover-top .arrow::after { border-top-color: var(--fx-card) !important; }
.client-alerts li a { color: var(--fx-body) !important; }
.client-alerts li a:hover { background: rgba(var(--fx-accent-rgb),0.08) !important; }
.client-alerts li.none { color: var(--fx-muted) !important; }

/* ── Ticket thread (viewticket) ── */
.view-ticket .ticket-reply {
    background-color: var(--fx-card) !important;
    border: 1px solid var(--fx-border) !important;
    border-radius: var(--fx-radius) !important;
}
.view-ticket .ticket-reply.staff {
    border-color: rgba(var(--fx-accent-rgb),0.35) !important;
    background: linear-gradient(90deg, rgba(var(--fx-accent-rgb),0.05) 0%, rgba(var(--fx-accent-rgb),0) 40%), var(--fx-card) !important;
}
.view-ticket .message { color: var(--fx-body) !important; }
.markdown-content, .markdown-content p { color: var(--fx-body) !important; }
.markdown-content pre, .markdown-content code {
    background-color: var(--fx-bg) !important;
    color: var(--fx-accent) !important;
    border: 1px solid var(--fx-border) !important;
    border-radius: 6px;
}

/* ── Datetime picker (payment method expiry etc.) ── */
.bootstrap-datetimepicker-widget {
    background-color: var(--fx-card) !important;
    border: 1px solid var(--fx-border-hi) !important;
    color: var(--fx-body) !important;
}
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background: var(--fx-grad) !important;
    color: var(--fx-on-accent) !important;
}
.bootstrap-datetimepicker-widget table td:hover,
.bootstrap-datetimepicker-widget table th:hover {
    background: var(--fx-hover) !important;
}

/* ── Custom select (Bootstrap) ── */
.custom-select {
    background-color: var(--fx-raised) !important;
    border: 1px solid var(--fx-border-hi) !important;
    color: var(--fx-text) !important;
    border-radius: var(--fx-radius-sm) !important;
}

/* ── Any remaining white inline panels WHMCS injects ── */
[style*="background-color: #fff"], [style*="background-color: white"],
[style*="background:#fff"], [style*="background: #fff"] {
    background-color: var(--fx-card) !important;
    color: var(--fx-body) !important;
}


/* ════════════════════════════════════════════════════════════
   AUTH PAGES + MOBILE ROUND 2 (login / register / password reset)
   ════════════════════════════════════════════════════════════ */

/* Empty breadcrumb bar: remove the dead strip (login & other bare pages) */
.master-breadcrumb:has(.breadcrumb:empty) { display: none; }

/* Auth card: breathing room + centered on phones */
@media (max-width: 767px) {
    .login-form .card,
    form[action*="password"] .card,
    .mw-540 {
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }
    .login-form .card-body {
        padding: 26px 20px !important;
    }

    /* Login button: full-width primary action; Remember Me stacks below */
    .login-form .float-left {
        float: none !important;
        width: 100%;
    }
    .login-form #login {
        width: 100%;
        font-size: 16px !important;
    }
    .login-form .text-right {
        text-align: center !important;
        margin-top: 14px;
    }
    .login-form .text-right label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;   /* comfortable tap target for the checkbox row */
        margin: 0;
        color: var(--fx-body);
    }
    .login-form .form-check-input {
        position: static;
        margin: 0;
        width: 18px; height: 18px;
    }
    .login-form .card-footer {
        text-align: center;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Reveal-password button: proper touch size at all widths */
.btn-reveal-pw { min-width: 46px; }

/* Language / localisation modal: tappable grid */
.modal-localisation .item-selector .item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-bottom: 8px;
    border-radius: var(--fx-radius-sm);
    text-align: center;
}
@media (max-width: 575px) {
    .modal-localisation .item-selector .col-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .modal-localisation .modal-body { padding: 16px !important; }
    .modal-localisation .h5 { padding-top: 8px !important; }
}

/* navbar-expand-xl collapses below 1200px — extend collapsed-nav polish
   (base dark bg already applies; this adds the tablet-range ergonomics) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #header .navbar-collapse {
        border: 1px solid var(--fx-border);
        border-radius: var(--fx-radius);
        margin-top: 6px;
        box-shadow: var(--fx-elev-3);
        padding: 8px;
    }
    #header .navbar-nav .nav-item a,
    #header #nav > li > a {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
}


/* ════════════════════════════════════════════════════════════
   ORDER FORM (standard_cart) — loads its own CSS after custom.css,
   so these use #order-standard_cart specificity to win back the theme.
   Covers: store/product list, view cart, checkout, order complete.
   ════════════════════════════════════════════════════════════ */

/* Page heading */
#order-standard_cart .header-lined h1 {
    color: var(--fx-text) !important;
    border-bottom: 1px solid var(--fx-border) !important;
    font-size: 26px !important;
    letter-spacing: -0.5px;
}
@media (max-width: 767px) {
    #order-standard_cart .header-lined h1 { font-size: 21px !important; }
}

/* ── Product cards ── */
#order-standard_cart .products .product {
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 60%), var(--fx-card) !important;
    border: 1px solid var(--fx-border) !important;
    border-radius: var(--fx-radius) !important;
    box-shadow: var(--fx-elev-1) !important;
    overflow: hidden;
    margin-bottom: 16px;
    transition: border-color 0.15s var(--fx-ease), box-shadow 0.2s var(--fx-ease), transform 0.15s var(--fx-ease);
}
#order-standard_cart .products .product:hover {
    border-color: rgba(var(--fx-accent-rgb),0.4) !important;
    box-shadow: var(--fx-elev-2) !important;
    transform: translateY(-2px);
}
#order-standard_cart .products .product header {
    background: transparent !important;
    border-bottom: 1px solid var(--fx-border) !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
#order-standard_cart .products .product header span {
    color: var(--fx-text) !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    letter-spacing: -0.3px;
}
/* Product image slot — populated by the Portal Branding addon */
#order-standard_cart .products .product header.fx-has-image {
    padding-top: 150px !important;
    background-size: cover !important;
    background-position: center !important;
}
#order-standard_cart .products .product header.fx-has-image span {
    text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}
#order-standard_cart .products .product .product-desc {
    color: var(--fx-body) !important;
    padding: 12px 20px !important;
}
#order-standard_cart .products .product .product-desc ul { color: var(--fx-body) !important; }
#order-standard_cart .products .product footer {
    background: rgba(0,0,0,0.15) !important;
    border-top: 1px solid var(--fx-border) !important;
    padding: 14px 20px !important;
}
#order-standard_cart .product-pricing,
#order-standard_cart .products .product .price {
    color: var(--fx-accent) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}
#order-standard_cart .btn-order-now,
#order-standard_cart .btn-success {
    background: var(--fx-grad) !important;
    border: none !important;
    color: var(--fx-on-accent) !important;
    font-weight: 600 !important;
    border-radius: var(--fx-radius-sm) !important;
    box-shadow: 0 2px 12px rgba(var(--fx-accent-rgb),0.25) !important;
    min-height: 42px;
    padding: 9px 18px !important;
}
#order-standard_cart .btn-order-now:hover {
    box-shadow: 0 4px 20px rgba(var(--fx-accent-rgb),0.4) !important;
    transform: translateY(-1px);
}

/* ── Cart sidebar panels ── */
#order-standard_cart .cart-sidebar .panel,
#order-standard_cart .sidebar-collapsed .panel {
    background: var(--fx-card) !important;
    border: 1px solid var(--fx-border) !important;
    border-radius: var(--fx-radius) !important;
}
#order-standard_cart .cart-sidebar .card-header,
#order-standard_cart .sidebar-collapsed .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--fx-border) !important;
}
#order-standard_cart .panel-title { color: var(--fx-text) !important; }
#order-standard_cart .cart-sidebar .list-group-item {
    background: transparent !important;
    border-color: var(--fx-border) !important;
    color: var(--fx-body) !important;
}
#order-standard_cart .cart-sidebar .list-group-item.active {
    background: var(--fx-grad) !important;
    color: var(--fx-on-accent) !important;
    border-color: transparent !important;
}

/* ── View cart / checkout ── */
#order-standard_cart .view-cart-items,
#order-standard_cart .view-cart-items .item {
    background: var(--fx-card) !important;
    border-color: var(--fx-border) !important;
    color: var(--fx-body) !important;
}
#order-standard_cart .view-cart-items .item-title,
#order-standard_cart .view-cart-items .item-title a { color: var(--fx-text) !important; }
#order-standard_cart .summary-container {
    background: var(--fx-card) !important;
    border: 1px solid var(--fx-border) !important;
    border-radius: var(--fx-radius) !important;
    color: var(--fx-body) !important;
}
#order-standard_cart .summary-container .subtotal,
#order-standard_cart .summary-container .total-due-today {
    color: var(--fx-text) !important;
}
#order-standard_cart .summary-container .total-due-today .amt { color: var(--fx-accent) !important; }
#order-standard_cart .btn-checkout {
    background: var(--fx-grad) !important;
    border: none !important;
    color: var(--fx-on-accent) !important;
    font-weight: 700 !important;
    border-radius: var(--fx-radius-sm) !important;
    min-height: 46px;
}
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span {
    background: var(--fx-bg) !important;
    color: var(--fx-muted) !important;
}
#order-standard_cart .account-select-container div.account {
    background: var(--fx-card) !important;
    border-color: var(--fx-border) !important;
    color: var(--fx-body) !important;
}
#order-standard_cart .account-select-container div.account.active {
    border-color: var(--fx-accent) !important;
    background: rgba(var(--fx-accent-rgb),0.06) !important;
}
#order-standard_cart .field-container, #order-standard_cart .field {
    color: var(--fx-body) !important;
}
#order-standard_cart .empty-cart h2 { color: var(--fx-text) !important; }
#order-standard_cart .empty-cart p { color: var(--fx-muted) !important; }

/* Promo/notice strips inside cart */
#order-standard_cart .addon-promo-container,
#order-standard_cart .promo-container {
    background: var(--fx-raised) !important;
    border: 1px solid var(--fx-border) !important;
    border-radius: var(--fx-radius-sm) !important;
    color: var(--fx-body) !important;
}

/* Mobile: product grid stacks with breathing room */
@media (max-width: 767px) {
    #order-standard_cart .products .product footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }
    #order-standard_cart .btn-order-now { flex: 1 1 auto; text-align: center; }
    #order-standard_cart .cart-sidebar { display: none; } /* Twenty-One shows the select-based fallback instead */
}