/* ==========================================================================
   FERROXEL — WHMCS Client Area Theme
   --------------------------------------------------------------------------
   File: templates/ferroxel/css/ferroxel-theme.css
   Loaded via auto-includes/css/custom.css (parent head.tpl {assetExists})
   plus an explicit link in header.tpl.
   Targets the Twenty-One template (Bootstrap 4.5) markup. No WHMCS core
   files are modified.

   Palette (real marketing-site values from nodeforge/css/styles.css):
     --ferroxel-bg         #0F1114  deep charcoal (bg-primary)
     --ferroxel-bg-card    #1A1D26  cards (bg-card)
     --ferroxel-bg-elev    #1C1F28  elevated (bg-tertiary)
     --ferroxel-accent     #E86A2A  molten orange CTA (accent)
     --ferroxel-accent-2   #60A5FA  electric blue secondary (info)
     --ferroxel-text       #E8EAF0  primary text (text-primary)
     --ferroxel-text-muted #9BA1B4  secondary text (text-secondary)
     --ferroxel-border     #2A2E3A  dividers (border-color)
     --ferroxel-success    #34D399  status green (success)
     --ferroxel-warning    #FBBF24  status yellow (warning)
     --ferroxel-error      #FF4D4D  status red (not on site; from brief)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS — tweak the whole theme from this block
   -------------------------------------------------------------------------- */
:root {
    /* Surfaces */
    --ferroxel-bg:            #0F1114;
    --ferroxel-bg-card:       #1A1D26;
    --ferroxel-bg-elevated:   #1C1F28;
    --ferroxel-bg-input:      #0F1114;
    --ferroxel-bg-muted:      #161920;
    --ferroxel-bg-hover:      #222633;

    /* Accents */
    --ferroxel-accent:        #E86A2A;
    --ferroxel-accent-hover:  #F07A3A;
    --ferroxel-accent-soft:   rgba(232, 106, 42, 0.12);
    --ferroxel-accent-glow:   rgba(232, 106, 42, 0.15);
    --ferroxel-accent-2:      #60A5FA;
    --ferroxel-accent-2-soft: rgba(96, 165, 250, 0.12);

    /* Text */
    --ferroxel-text:          #E8EAF0;
    --ferroxel-text-muted:    #9BA1B4;
    --ferroxel-text-dim:      #6B7186;

    /* Borders */
    --ferroxel-border:        #2A2E3A;
    --ferroxel-border-strong: #3A3F4E;

    /* Status */
    --ferroxel-success:       #34D399;
    --ferroxel-success-soft:  rgba(52, 211, 153, 0.12);
    --ferroxel-warning:       #FBBF24;
    --ferroxel-warning-soft:  rgba(251, 191, 36, 0.12);
    --ferroxel-error:         #FF4D4D;
    --ferroxel-error-soft:    rgba(255, 77, 77, 0.12);

    /* Typography */
    --ferroxel-font-heading:  "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ferroxel-font-body:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Radii & shadow (site: radius-sm 6px, md 10px, lg 16px) */
    --ferroxel-radius:        10px;
    --ferroxel-radius-lg:     16px;
    --ferroxel-radius-pill:   999px;
    --ferroxel-shadow:        0 8px 24px rgba(0, 0, 0, 0.25);

    /* Focus ring */
    --ferroxel-focus:         rgba(232, 106, 42, 0.45);
}

/* --------------------------------------------------------------------------
   2. BASE / GLOBAL
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body,
body.primary-bg-color {
    background-color: var(--ferroxel-bg);
    color: var(--ferroxel-text);
    font-family: var(--ferroxel-font-body);
    font-size: 0.9375rem;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ferroxel-font-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ferroxel-text);
}

a, .btn-link {
    color: var(--ferroxel-accent);
    transition: color 0.15s ease-in-out;
}
a:hover, a:focus {
    color: var(--ferroxel-accent-hover);
    text-decoration: none;
}
a:not(.btn):hover, a:not(.btn):focus { text-decoration: underline; }

.text-muted, .text-secondary, small, .small { color: var(--ferroxel-text-muted) !important; }
.lead { color: var(--ferroxel-text); }

/* WCAG focus visibility for every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.form-control:focus,
.btn:focus,
.nav-link:focus-visible,
.page-link:focus-visible {
    outline: 3px solid var(--ferroxel-focus);
    outline-offset: 2px;
}

::selection { background: var(--ferroxel-accent); color: #0F1114; }

* { scrollbar-width: thin; scrollbar-color: var(--ferroxel-border-strong) var(--ferroxel-bg); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--ferroxel-bg); }
*::-webkit-scrollbar-thumb { background: var(--ferroxel-border-strong); border-radius: 6px; }

/* --------------------------------------------------------------------------
   3. HEADER / NAVIGATION (Twenty-One Bootstrap 4 markup)
   -------------------------------------------------------------------------- */
.header { background: var(--ferroxel-bg-card); border-bottom: 1px solid var(--ferroxel-border); }

/* logged-in utility strip */
.topbar { background: var(--ferroxel-bg-muted); border-bottom: 1px solid var(--ferroxel-border); }
.topbar .btn { color: var(--ferroxel-text-muted); }
.topbar .btn:hover { color: var(--ferroxel-text); }
.topbar .input-group-text { background: transparent; border: none; color: var(--ferroxel-text-muted); }
.topbar .btn-active-client { color: var(--ferroxel-text); font-weight: 600; }
.topbar .btn-return-to-admin { color: var(--ferroxel-warning); }

/* main brand row + nav row */
.navbar.navbar-light { background: var(--ferroxel-bg-card); }
.navbar.navbar-light .navbar-brand { color: var(--ferroxel-text); font-family: var(--ferroxel-font-heading); font-weight: 700; }
.navbar.navbar-light .navbar-brand .logo-img { max-height: 40px; width: auto; }

.main-navbar-wrapper {
    background: var(--ferroxel-bg) !important;
    border-top: 1px solid var(--ferroxel-border);
}

.main-navbar-wrapper .navbar-nav .nav-link,
.navbar.navbar-light .navbar-nav .nav-link {
    color: var(--ferroxel-text-muted);
    font-weight: 500;
    padding: 0.7rem 0.9rem;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.main-navbar-wrapper .navbar-nav .nav-link:hover,
.main-navbar-wrapper .navbar-nav .nav-link:focus,
.navbar.navbar-light .navbar-nav .nav-link:hover,
.navbar.navbar-light .navbar-nav .nav-link:focus {
    color: var(--ferroxel-text);
    border-bottom-color: var(--ferroxel-accent);
}
.main-navbar-wrapper .navbar-nav .nav-link.active,
.main-navbar-wrapper .navbar-nav .nav-item.active .nav-link,
.navbar.navbar-light .navbar-nav .nav-link.active {
    color: var(--ferroxel-accent);
    border-bottom-color: var(--ferroxel-accent);
}

/* navbar dropdowns */
.dropdown-menu {
    background: var(--ferroxel-bg-card);
    border: 1px solid var(--ferroxel-border);
    box-shadow: var(--ferroxel-shadow);
}
.dropdown-item { color: var(--ferroxel-text-muted); }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active {
    background: var(--ferroxel-accent-soft);
    color: var(--ferroxel-text);
}

/* top-right search box */
.navbar .input-group.search .form-control {
    background: var(--ferroxel-bg-input);
    border: 1px solid var(--ferroxel-border-strong);
    color: var(--ferroxel-text);
}
.navbar .input-group.search .btn { background: var(--ferroxel-bg-muted); border: 1px solid var(--ferroxel-border-strong); color: var(--ferroxel-text-muted); }

/* cart button + count badge */
.navbar .cart-btn { color: var(--ferroxel-text); }
.navbar .cart-btn:hover { color: var(--ferroxel-accent); }
.navbar .cart-btn .badge-info,
.badge-info {
    background: var(--ferroxel-accent);
    color: #FFFFFF;
}

/* client notifications popover */
#accountNotificationsContent li a { color: var(--ferroxel-text-muted); }
#accountNotificationsContent li a:hover { color: var(--ferroxel-accent); }

/* --------------------------------------------------------------------------
   4. BREADCRUMB
   -------------------------------------------------------------------------- */
nav.master-breadcrumb { background: var(--ferroxel-bg-muted); }
.breadcrumb { background: transparent; padding: 0.6rem 0; }
.breadcrumb a { color: var(--ferroxel-text-muted); }
.breadcrumb a:hover { color: var(--ferroxel-accent); }
.breadcrumb-item.active { color: var(--ferroxel-text); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ferroxel-text-dim); }

/* --------------------------------------------------------------------------
   5. FOOTER
   -------------------------------------------------------------------------- */
#footer.footer {
    background: var(--ferroxel-bg-card);
    border-top: 1px solid var(--ferroxel-border);
    color: var(--ferroxel-text-muted);
    font-size: 0.9rem;
    padding: 2rem 0;
}
#footer .nav-link,
#footer a { color: var(--ferroxel-text-muted); }
#footer .nav-link:hover,
#footer a:hover { color: var(--ferroxel-accent); }
#footer .copyright { color: var(--ferroxel-text-dim); }

/* --------------------------------------------------------------------------
   6. CARDS (universal dark panel surface)
   -------------------------------------------------------------------------- */
.card {
    background: var(--ferroxel-bg-card);
    border: 1px solid var(--ferroxel-border);
    border-radius: var(--ferroxel-radius);
    box-shadow: var(--ferroxel-shadow);
    color: var(--ferroxel-text);
}
.card-header {
    background: var(--ferroxel-bg-elevated);
    border-bottom: 1px solid var(--ferroxel-border);
    color: var(--ferroxel-text);
    padding: 0.9rem 1.25rem;
    border-radius: calc(var(--ferroxel-radius) - 1px) calc(var(--ferroxel-radius) - 1px) 0 0;
}
.card-header .card-title { color: var(--ferroxel-text); font-family: var(--ferroxel-font-heading); }
.card-body { padding: 1.25rem; color: var(--ferroxel-text); }
.card-footer {
    background: var(--ferroxel-bg-elevated);
    border-top: 1px solid var(--ferroxel-border);
    color: var(--ferroxel-text-muted);
    border-radius: 0 0 calc(var(--ferroxel-radius) - 1px) calc(var(--ferroxel-radius) - 1px);
}
.card-subtitle { color: var(--ferroxel-text-muted); }

/* --------------------------------------------------------------------------
   7. BUTTONS  (site style: accent bg + white text + glow hover, 6px radius)
   -------------------------------------------------------------------------- */
.btn {
    border-radius: 6px;
    font-weight: 600;
    padding: 0.55rem 1.15rem;
    font-family: var(--ferroxel-font-heading);
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
                color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn:focus { box-shadow: 0 0 0 3px var(--ferroxel-focus) !important; }

.btn-primary {
    background: var(--ferroxel-accent);
    border-color: var(--ferroxel-accent);
    color: #FFFFFF;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
    background: var(--ferroxel-accent-hover);
    border-color: var(--ferroxel-accent-hover);
    color: #FFFFFF;
    box-shadow: 0 0 20px var(--ferroxel-accent-glow);
}
.btn-primary.disabled, .btn-primary:disabled {
    background: var(--ferroxel-accent);
    border-color: var(--ferroxel-accent);
    color: #FFFFFF;
    opacity: 0.55;
}

/* Bootstrap 4's neutral button */
.btn-default {
    background: var(--ferroxel-bg-muted);
    border: 1px solid var(--ferroxel-border-strong);
    color: var(--ferroxel-text);
}
.btn-default:hover, .btn-default:focus, .btn-default:not(:disabled):not(.disabled):active {
    background: var(--ferroxel-bg-hover);
    border-color: var(--ferroxel-accent);
    color: var(--ferroxel-text);
}

/* Ferroxel secondary accent — electric blue link-style */
.btn-accent-2, .btn-info {
    background: var(--ferroxel-accent-2);
    border-color: var(--ferroxel-accent-2);
    color: #0B1430;
}
.btn-accent-2:hover, .btn-accent-2:focus, .btn-info:hover, .btn-info:focus {
    background: #7BB8FF;
    border-color: #7BB8FF;
    color: #0B1430;
}

.btn-outline-primary {
    background: transparent;
    border: 1.5px solid var(--ferroxel-border);
    color: var(--ferroxel-text);
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary.active {
    background: transparent;
    border-color: var(--ferroxel-accent);
    color: var(--ferroxel-accent);
}

.btn-secondary { background: var(--ferroxel-bg-muted); border: 1px solid var(--ferroxel-border-strong); color: var(--ferroxel-text); }
.btn-secondary:hover { border-color: var(--ferroxel-accent); color: var(--ferroxel-text); }

.btn-danger { background: var(--ferroxel-error); border-color: var(--ferroxel-error); color: #2A0707; }
.btn-danger:hover { background: #E04545; border-color: #E04545; color: #2A0707; }
.btn-success { background: var(--ferroxel-success); border-color: var(--ferroxel-success); color: #062A1C; }
.btn-success:hover { background: #2FC686; border-color: #2FC686; color: #062A1C; }
.btn-warning { background: var(--ferroxel-warning); border-color: var(--ferroxel-warning); color: #3A2E05; }
.btn-warning:hover { background: #E8B42E; border-color: #E8B42E; color: #3A2E05; }

.btn-link { color: var(--ferroxel-accent-2); font-weight: 600; }
.btn-link:hover { color: #7BB8FF; text-decoration: underline; }

/* back-to-admin floating button */
.btn-return-to-admin { color: var(--ferroxel-warning) !important; background: var(--ferroxel-bg-card); border: 1px solid var(--ferroxel-border-strong); }

/* --------------------------------------------------------------------------
   8. FORMS (dark inputs everywhere except the printable invoice)
   -------------------------------------------------------------------------- */
.form-control, .form-control-file, select.form-control, textarea.form-control {
    background-color: var(--ferroxel-bg-input);
    border: 1px solid var(--ferroxel-border-strong);
    color: var(--ferroxel-text);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
    background-color: var(--ferroxel-bg-input);
    border-color: var(--ferroxel-accent);
    color: var(--ferroxel-text);
}
.form-control::placeholder { color: var(--ferroxel-text-dim); opacity: 1; }
.form-control:disabled, .form-control[readonly] { background-color: var(--ferroxel-bg-muted); color: var(--ferroxel-text-dim); }

.form-control-label, .form-group > label, .form-label { color: var(--ferroxel-text); font-weight: 500; }
.form-text, .help-block { color: var(--ferroxel-text-muted); }
.form-check-label { color: var(--ferroxel-text); }
.form-check-input { background-color: var(--ferroxel-bg-input); border-color: var(--ferroxel-border-strong); }
.form-check-input:checked { background-color: var(--ferroxel-accent); border-color: var(--ferroxel-accent); }
.form-check-input:focus { border-color: var(--ferroxel-accent); box-shadow: 0 0 0 3px var(--ferroxel-focus); }

.input-group-text {
    background: var(--ferroxel-bg-muted);
    border: 1px solid var(--ferroxel-border-strong);
    color: var(--ferroxel-text-muted);
}
.input-group-merge .input-group-text,
.input-group-merge .form-control {
    border: 1px solid var(--ferroxel-border-strong);
    background: var(--ferroxel-bg-input);
}
.input-group-merge .input-group-prepend .input-group-text { border-right: 0; border-radius: 8px 0 0 8px; }
.input-group-merge .input-group-prepend + .form-control { border-left: 0; border-radius: 0 8px 8px 0; }
.input-group-merge .form-control + .input-group-append .input-group-text,
.input-group-merge .form-control + .input-group-append .btn { border-left: 0; border-radius: 0 8px 8px 0; }

textarea.form-control { min-height: 120px; resize: vertical; }

/* password strength meter — restyled, never removed */
.progress {
    background: var(--ferroxel-bg-muted);
    border: 1px solid var(--ferroxel-border);
    height: 8px;
    border-radius: var(--ferroxel-radius-pill);
}
.progress-bar { background: var(--ferroxel-accent); }
.progress-bar.bg-success { background-color: var(--ferroxel-success) !important; }
.progress-bar.bg-warning { background-color: var(--ferroxel-warning) !important; }
.progress-bar.bg-danger { background-color: var(--ferroxel-error) !important; }

/* --------------------------------------------------------------------------
   9. TABLES
   -------------------------------------------------------------------------- */
.table { color: var(--ferroxel-text); }
.table thead th {
    background: var(--ferroxel-bg-elevated);
    color: var(--ferroxel-text-muted);
    font-family: var(--ferroxel-font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--ferroxel-border-strong);
    white-space: nowrap;
}
.table td, .table th { border-top: 1px solid var(--ferroxel-border); color: var(--ferroxel-text); }
.table-hover tbody tr:hover { background: rgba(255, 255, 255, 0.03); color: var(--ferroxel-text); }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255, 255, 255, 0.02); }
.table-responsive { -webkit-overflow-scrolling: touch; }
.table-sm td, .table-sm th { padding: 0.5rem 0.75rem; }

/* --------------------------------------------------------------------------
   10. STATUS PILLS & BADGES
   Shared pill system: service states, ticket priorities, invoice statuses.
   -------------------------------------------------------------------------- */
.status-pill,
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3em 0.8em;
    border-radius: var(--ferroxel-radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    vertical-align: middle;
    white-space: nowrap;
}

/* Success — Active / Paid / Low priority / Resolved / badge-success/badge-info maps */
.status-active, .status-paid, .status-resolved, .status-low, .status-completed,
.badge-success {
    background: var(--ferroxel-success-soft);
    color: var(--ferroxel-success);
    border-color: rgba(52, 211, 153, 0.35);
}

/* Warning — Pending / Unpaid / Medium / On Hold / In Progress */
.status-pending, .status-unpaid, .status-medium, .status-on-hold,
.status-in-progress, .status-partially-paid, .status-collections,
.badge-warning {
    background: var(--ferroxel-warning-soft);
    color: var(--ferroxel-warning);
    border-color: rgba(251, 191, 36, 0.35);
}

/* Error — Suspended / Terminated / Cancelled / Refunded / High+ priority */
.status-suspended, .status-terminated, .status-cancelled, .status-refunded,
.status-high, .status-critical, .status-error,
.badge-danger {
    background: var(--ferroxel-error-soft);
    color: var(--ferroxel-error);
    border-color: rgba(255, 77, 77, 0.35);
}

/* Neutral — Closed / fraud / undefined */
.status-closed, .status-fraud,
.badge-secondary, .badge-light, .badge-dark {
    background: rgba(156, 163, 175, 0.12);
    color: var(--ferroxel-text-muted);
    border-color: var(--ferroxel-border-strong);
}

/* Accent — Open / Answered / Customer-Reply / cart count */
.status-open, .status-answered, .status-customer-reply,
.badge-info {
    background: var(--ferroxel-accent-soft);
    color: var(--ferroxel-accent);
    border-color: rgba(232, 106, 42, 0.35);
}
.badge-primary { background: var(--ferroxel-accent); color: #FFFFFF; }

/* Product-type badges (web hosting = blue, game server = orange) */
.badge-product-web { background: var(--ferroxel-accent-2-soft); color: var(--ferroxel-accent-2); border-color: rgba(96, 165, 250, 0.35); }
.badge-product-game { background: var(--ferroxel-accent-soft); color: var(--ferroxel-accent); border-color: rgba(232, 106, 42, 0.35); }

/* Ticket priority badge (inline element on the list page) */
.ticket-priority {
    display: inline-block;
    padding: 0.25em 0.75em;
    border-radius: var(--ferroxel-radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.priority-low { background: var(--ferroxel-success-soft); color: var(--ferroxel-success); }
.priority-medium { background: var(--ferroxel-warning-soft); color: var(--ferroxel-warning); }
.priority-high, .priority-critical { background: var(--ferroxel-error-soft); color: var(--ferroxel-error); }

/* --------------------------------------------------------------------------
   11. ALERTS / NOTICES
   -------------------------------------------------------------------------- */
.alert { border-radius: var(--ferroxel-radius); border: 1px solid; }
.alert-info { background: var(--ferroxel-accent-2-soft); border-color: rgba(96, 165, 250, 0.35); color: #BFDFFF; }
.alert-success { background: var(--ferroxel-success-soft); border-color: rgba(52, 211, 153, 0.35); color: #A8F0D2; }
.alert-warning { background: var(--ferroxel-warning-soft); border-color: rgba(251, 191, 36, 0.35); color: #FFE4A1; }
.alert-danger { background: var(--ferroxel-error-soft); border-color: rgba(255, 77, 77, 0.35); color: #FFB3B3; }
.alert a { color: inherit; text-decoration: underline; }
.alert .close { color: var(--ferroxel-text); text-shadow: none; opacity: 0.7; }

/* --------------------------------------------------------------------------
   12. LOGIN / REGISTER (Twenty-One renders these inside the layout column)
   -------------------------------------------------------------------------- */
.auth-page-body #main-body { background: var(--ferroxel-bg); }
.login-brand { margin-bottom: -1rem; }
.login-brand img { max-height: 44px; width: auto; }

form.login-form .card { box-shadow: var(--ferroxel-shadow); }

/* blue, link-style "forgot password" per the brand brief */
form.login-form .text-muted a:hover { color: var(--ferroxel-accent-2); }

/* --------------------------------------------------------------------------
   13. CLIENT AREA DASHBOARD — tiles + panels
   -------------------------------------------------------------------------- */
.tiles { margin-top: 16px; }
.tiles .tile {
    background: var(--ferroxel-bg-card);
    border: 1px solid var(--ferroxel-border);
    border-top: none;
    border-radius: 0 0 var(--ferroxel-radius) var(--ferroxel-radius);
    position: relative;
    display: block;
    padding: 1.1rem 1.25rem;
    color: var(--ferroxel-text);
    min-height: 128px;
    transition: border-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}
.tiles .tile:hover {
    border-color: var(--ferroxel-border-strong);
    transform: translateY(-2px);
    color: var(--ferroxel-text);
    text-decoration: none;
}
.tiles .tile i { font-size: 1.4rem; color: var(--ferroxel-text-muted); display: block; margin-bottom: 0.5rem; }
.tiles .tile:hover i { color: var(--ferroxel-accent); }
.tiles .tile .stat { font-family: var(--ferroxel-font-heading); font-size: 1.8rem; font-weight: 700; color: var(--ferroxel-text); line-height: 1.1; }
.tiles .tile .title { color: var(--ferroxel-text-muted); font-size: 0.85rem; }
.tiles .tile .highlight { position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 4px 4px 0 0; }

/* tile accent colours map to the brand palette */
.bg-color-blue { background: var(--ferroxel-accent-2) !important; }
.bg-color-green { background: var(--ferroxel-success) !important; }
.bg-color-red { background: var(--ferroxel-error) !important; }
.bg-color-gold { background: var(--ferroxel-warning) !important; }

/* icon-only badge buttons at top of panels (btn-xs) */
.btn-xs { padding: 0.25rem 0.6rem; font-size: 0.8rem; }

/* home panels with accent left borders */
.card-accent-blue { border-left: 4px solid var(--ferroxel-accent-2) !important; }
.card-accent-green { border-left: 4px solid var(--ferroxel-success) !important; }
.card-accent-red { border-left: 4px solid var(--ferroxel-error) !important; }
.card-accent-gold { border-left: 4px solid var(--ferroxel-warning) !important; }
.btn.bg-color-blue, .btn.bg-color-green, .btn.bg-color-red, .btn.bg-color-gold { border: none; color: #FFFFFF !important; }

/* --------------------------------------------------------------------------
   14. SIDEBARS (left navigation + right panels)
   -------------------------------------------------------------------------- */
.sidebar .card {
    background: var(--ferroxel-bg-card);
    border: 1px solid var(--ferroxel-border);
    border-radius: var(--ferroxel-radius);
    margin-bottom: 1rem;
}
.sidebar .card-header {
    background: transparent;
    border-bottom: 1px solid var(--ferroxel-border);
    color: var(--ferroxel-text-muted);
    font-family: var(--ferroxel-font-heading);
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}
.sidebar .list-group-item {
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    color: var(--ferroxel-text-muted);
    padding: 0.65rem 1.25rem;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.sidebar .list-group-item:hover,
.sidebar .list-group-item:focus {
    background: rgba(255, 255, 255, 0.03);
    color: var(--ferroxel-text);
}
.sidebar .list-group-item.active {
    background: var(--ferroxel-accent-soft);
    border-left-color: var(--ferroxel-accent);
    color: var(--ferroxel-accent);
}
.sidebar .list-group-item .badge { margin-left: auto; }
.sidebar .card-body { color: var(--ferroxel-text-muted); font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   15. SERVICE CARDS (My Services override markup)
   -------------------------------------------------------------------------- */
.service-card {
    background: var(--ferroxel-bg-card);
    border: 1px solid var(--ferroxel-border);
    border-left: 4px solid var(--ferroxel-border-strong);
    border-radius: var(--ferroxel-radius);
    box-shadow: var(--ferroxel-shadow);
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    transition: border-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}
.service-card:hover { border-color: var(--ferroxel-border-strong); transform: translateY(-2px); }
.service-card.ferroxel-type-web { border-left-color: var(--ferroxel-accent-2); }
.service-card.ferroxel-type-game { border-left-color: var(--ferroxel-accent); }
.service-card .service-name { font-family: var(--ferroxel-font-heading); font-size: 1.05rem; margin-bottom: 0.35rem; }
.service-card .service-name a { color: var(--ferroxel-text); }
.service-card .service-name a:hover { color: var(--ferroxel-accent); }
.service-card .service-meta { color: var(--ferroxel-text-muted); font-size: 0.85rem; }

/* --------------------------------------------------------------------------
   16. ORDER / CART (WHMCS "standard_cart" order form classes)
   The cart flow itself is untouched; these classes are themed via CSS.
   -------------------------------------------------------------------------- */
#order-standard_cart .product-group { border: none; background: transparent; }
#order-standard_cart .product-group-heading {
    background: transparent;
    border-bottom: 1px solid var(--ferroxel-border);
    color: var(--ferroxel-text-muted);
    font-family: var(--ferroxel-font-heading);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.85rem;
}
#order-standard_cart .product-row,
#order-standard_cart .product,
#order-standard_cart .panel-default > .panel-heading + .panel-body .product {
    background: var(--ferroxel-bg-card);
    border: 1px solid var(--ferroxel-border);
    border-radius: var(--ferroxel-radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
    color: var(--ferroxel-text);
    transition: transform 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
#order-standard_cart .product-row:hover,
#order-standard_cart .product:hover { transform: translateY(-2px); border-color: var(--ferroxel-border-strong); }
#order-standard_cart .product-row.featured,
#order-standard_cart .product.featured {
    border: 2px solid var(--ferroxel-accent);
    box-shadow: 0 0 0 1px var(--ferroxel-accent), 0 8px 32px var(--ferroxel-accent-glow);
}
#order-standard_cart .product-name { font-family: var(--ferroxel-font-heading); font-weight: 700; font-size: 1.1rem; color: var(--ferroxel-text); }
#order-standard_cart .product-description { color: var(--ferroxel-text-muted); font-size: 0.9rem; }
#order-standard_cart .price { font-family: var(--ferroxel-font-heading); font-weight: 700; color: var(--ferroxel-accent); }
#order-standard_cart .billing-cycle { color: var(--ferroxel-text-muted); font-size: 0.8rem; }

#order-standard_cart .configoption,
#order-standard_cart .configureproduct .configoption {
    background: var(--ferroxel-bg-elevated);
    border: 1px solid var(--ferroxel-border-strong);
    border-radius: var(--ferroxel-radius);
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
#order-standard_cart .configoption:hover,
#order-standard_cart .configoption:focus-within { border-color: var(--ferroxel-accent); background: var(--ferroxel-bg-input); }
#order-standard_cart .configoption input[type="radio"],
#order-standard_cart .configoption input[type="checkbox"] { width: 1.3rem; height: 1.3rem; accent-color: var(--ferroxel-accent); }

#order-standard_cart .order-summary { background: var(--ferroxel-bg-card); border: 1px solid var(--ferroxel-border); border-radius: var(--ferroxel-radius); }
#order-standard_cart .order-summary .summary-totals,
#order-standard_cart .order-summary .total-due-today { font-family: var(--ferroxel-font-heading); font-weight: 700; color: var(--ferroxel-accent); }

/* ---- Ferroxel pricing-card component (configureproduct override markup) ---- */
.price-card {
    background: var(--ferroxel-bg-card);
    border: 1px solid var(--ferroxel-border);
    border-radius: var(--ferroxel-radius-lg);
    padding: 1.5rem 1.25rem;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.price-card:hover { transform: translateY(-3px); border-color: var(--ferroxel-border-strong); }
.price-card.recommended,
.price-card.featured {
    border-color: var(--ferroxel-accent);
    box-shadow: 0 0 0 1px var(--ferroxel-accent), 0 8px 32px var(--ferroxel-accent-glow);
}
.price-card.recommended::before,
.price-card.featured::before {
    content: attr(data-badge);
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ferroxel-accent);
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3em 1em;
    border-radius: var(--ferroxel-radius-pill);
    white-space: nowrap;
}
.price-card .plan-name { font-family: var(--ferroxel-font-heading); font-weight: 700; font-size: 1.15rem; }
.price-card .plan-price { font-family: var(--ferroxel-font-heading); font-weight: 700; font-size: 2.1rem; color: var(--ferroxel-accent); margin: 0.4rem 0; }
.price-card .plan-price .currency { font-size: 1.2rem; vertical-align: super; color: var(--ferroxel-text-muted); font-weight: 600; }
.price-card .plan-billing-cycle { color: var(--ferroxel-text-muted); font-size: 0.85rem; }
.price-card .plan-features { list-style: none; padding: 0; margin: 0.75rem 0 1.25rem; flex-grow: 1; }
.price-card .plan-features li { color: var(--ferroxel-text-muted); font-size: 0.9rem; padding: 0.35rem 0; display: flex; gap: 0.5rem; align-items: baseline; }
.price-card .plan-features li::before { content: "\2713"; color: var(--ferroxel-accent-2); font-weight: 700; }

.billing-cycle-toggle {
    display: inline-flex;
    background: var(--ferroxel-bg-muted);
    border: 1px solid var(--ferroxel-border-strong);
    border-radius: var(--ferroxel-radius-pill);
    padding: 0.25rem;
}
.billing-cycle-toggle .btn {
    border: none;
    border-radius: var(--ferroxel-radius-pill);
    padding: 0.45rem 1.1rem;
    color: var(--ferroxel-text-muted);
    font-size: 0.875rem;
    background: transparent;
}
.billing-cycle-toggle .btn:hover,
.billing-cycle-toggle .btn.active { background: var(--ferroxel-accent); color: #FFFFFF; }

/* configurable-option groups (RAM/CPU/disk pickers) */
.config-option-group {
    background: var(--ferroxel-bg-card);
    border: 1px solid var(--ferroxel-border);
    border-radius: var(--ferroxel-radius);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.config-option-group .group-label {
    font-family: var(--ferroxel-font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ferroxel-text);
    padding: 0 0.5rem;
    margin-bottom: 0.75rem;
}
.config-option {
    background: var(--ferroxel-bg-elevated);
    border: 1px solid var(--ferroxel-border-strong);
    border-radius: var(--ferroxel-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.config-option:hover,
.config-option:focus-within,
.config-option.selected { border-color: var(--ferroxel-accent); background: var(--ferroxel-bg-input); }
.config-option .option-label { font-weight: 600; color: var(--ferroxel-text); display: block; font-size: 0.95rem; }
.config-option .option-price { color: var(--ferroxel-accent); font-weight: 700; font-size: 1.05rem; }

/* large, touch-friendly tier rows */
.config-option.tier-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    min-height: 56px;
    cursor: pointer;
}
.config-option.tier-option .tier-value { font-family: var(--ferroxel-font-heading); font-size: 1.25rem; font-weight: 700; color: var(--ferroxel-text); }
.config-option.tier-option .tier-value small { color: var(--ferroxel-text-muted); font-size: 0.8rem; font-weight: 500; }
.config-option .form-check { display: flex; align-items: center; gap: 0.6rem; }
.config-option .form-check-input { width: 1.35rem; height: 1.35rem; }

/* order summary */
.cart-summary { background: var(--ferroxel-bg-card); border: 1px solid var(--ferroxel-border); border-radius: var(--ferroxel-radius); }
.cart-summary .cart-items .item { border-bottom: 1px solid var(--ferroxel-border); padding: 0.8rem 1.25rem; color: var(--ferroxel-text); }
.cart-summary .cart-totals { padding: 0.8rem 1.25rem; color: var(--ferroxel-text); }
.cart-summary .cart-totals.grand-total {
    background: var(--ferroxel-accent-soft);
    border-top: 1px solid rgba(232, 106, 42, 0.35);
    font-weight: 700;
    color: var(--ferroxel-accent);
    font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   17. INVOICES — printable light-mode (body.viewinvoice only)
   The invoice LIST page stays dark. viewinvoice.php is stamped with
   body.viewinvoice by header.tpl and forced to light mode so printing is
   clean; the parent template (and its payment gateway UI) is untouched.
   -------------------------------------------------------------------------- */
body.viewinvoice {
    background: #F5F6F8 !important;
    color: #1F2937;
}
body.viewinvoice #main-body { background: #F5F6F8 !important; color: #1F2937; }
body.viewinvoice .header,
body.viewinvoice #footer.footer { background: #0F1114 !important; }
body.viewinvoice .card {
    background: #FFFFFF !important;
    border-color: #E5E7EB !important;
    color: #1F2937 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
body.viewinvoice .card-header {
    background: #FFFFFF !important;
    border-bottom-color: #E5E7EB !important;
    color: #111827 !important;
}
body.viewinvoice .table { color: #1F2937 !important; }
body.viewinvoice .table thead th { background: #F3F4F6 !important; color: #374151 !important; border-bottom: 2px solid #E5E7EB !important; }
body.viewinvoice .table td, body.viewinvoice .table th { color: #1F2937 !important; border-top: 1px solid #E5E7EB !important; }
body.viewinvoice h1, body.viewinvoice h2, body.viewinvoice h3,
body.viewinvoice h4, body.viewinvoice h5, body.viewinvoice h6 { color: #111827 !important; }
body.viewinvoice a:not(.btn) { color: var(--ferroxel-accent-hover); }
body.viewinvoice .text-muted { color: #6B7186 !important; }

/* blank-ink printing: light everything, keep orange header strip */
@media print {
    body { background: #FFFFFF !important; color: #1F2937 !important; }
    body * {
        background-color: #FFFFFF !important;
        color: #1F2937 !important;
        border-color: #E5E7EB !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    #header, .topbar, .navbar, .footer { background: #0F1114 !important; }
    #header *, .footer * { color: #F4F5F8 !important; }
    a[href]::after { content: "" !important; }
    .btn, .no-print, #mainNavbar, .sidebar, .master-breadcrumb { display: none !important; }
}

/* --------------------------------------------------------------------------
   18. SUPPORT TICKETS (view page + list rows)
   -------------------------------------------------------------------------- */
.ticket-row { cursor: pointer; }
.ticket-thread .ticket-message,
.ticket-thread .ticket-reply,
#ticketReplies .row {
    background: var(--ferroxel-bg-card);
    border: 1px solid var(--ferroxel-border);
    border-radius: var(--ferroxel-radius);
    padding: 1.25rem;
}
.ticket-message .ticket-message-author,
.ticket-reply .reply-author { color: var(--ferroxel-accent-2); font-weight: 600; }
.ticket-reply.client, .client-reply { border-left: 4px solid var(--ferroxel-accent-2); }
.ticket-reply.staff, .staff-reply { border-left: 4px solid var(--ferroxel-accent); }
.ticket-reply-box textarea { min-height: 140px; }

/* --------------------------------------------------------------------------
   19. KNOWLEDGEBASE & ANNOUNCEMENTS
   -------------------------------------------------------------------------- */
.kb-category { border-left: 4px solid var(--ferroxel-accent-2); }
.kb-search .form-control { border-radius: 8px 0 0 8px; }
.kb-search .btn { border-radius: 0 8px 8px 0; }

.kb-article,
.announcement-item {
    background: var(--ferroxel-bg-card);
    border: 1px solid var(--ferroxel-border);
    border-radius: var(--ferroxel-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    transition: border-color 0.15s ease-in-out, transform 0.15s ease-in-out;
    color: var(--ferroxel-text);
}
.kb-article:hover,
.announcement-item:hover { border-color: var(--ferroxel-border-strong); transform: translateY(-1px); }
.kb-article h2 a,
.announcement-item h2 a { color: var(--ferroxel-text); }
.kb-article h2 a:hover,
.announcement-item h2 a:hover { color: var(--ferroxel-accent); }
.kb-article p,
.announcement-item p { color: var(--ferroxel-text-muted); font-size: 0.9rem; }
.kb-article .article-date,
.announcement-item .announcement-date { color: var(--ferroxel-text-dim); font-size: 0.8rem; }

.kb-article-view .article-date,
.announcement-card .announcement-date { color: var(--ferroxel-text-dim); font-size: 0.85rem; }
.kb-article-content, .announcement-content { font-size: 1rem; line-height: 1.75; color: var(--ferroxel-text); }
.kb-article-content h1, .kb-article-content h2, .kb-article-content h3,
.announcement-content h1, .announcement-content h2, .announcement-content h3 { margin-top: 1.5rem; margin-bottom: 0.6rem; }
.kb-article-content code, .announcement-content code {
    background: var(--ferroxel-bg-elevated);
    color: var(--ferroxel-accent);
    padding: 0.15em 0.45em;
    border-radius: 4px;
    font-size: 0.9em;
}
.kb-article-content pre, .announcement-content pre {
    background: var(--ferroxel-bg-input);
    border: 1px solid var(--ferroxel-border);
    border-radius: var(--ferroxel-radius);
    padding: 1rem;
    color: var(--ferroxel-text);
    overflow-x: auto;
}
.kb-article-content img, .announcement-content img { max-width: 100%; height: auto; border-radius: var(--ferroxel-radius); }

/* --------------------------------------------------------------------------
   20. PAGINATION
   -------------------------------------------------------------------------- */
.pagination .page-link {
    background: var(--ferroxel-bg-card);
    border-color: var(--ferroxel-border);
    color: var(--ferroxel-text-muted);
    border-radius: 6px;
    margin: 0 2px;
}
.pagination .page-link:hover,
.pagination .page-link:focus { background: var(--ferroxel-bg-hover); border-color: var(--ferroxel-accent); color: var(--ferroxel-text); }
.pagination .page-item.active .page-link { background: var(--ferroxel-accent); border-color: var(--ferroxel-accent); color: #FFFFFF; }
.pagination .page-item.disabled .page-link { background: var(--ferroxel-bg-card); border-color: var(--ferroxel-border); color: var(--ferroxel-text-dim); }

/* --------------------------------------------------------------------------
   21. MODALS, DROPDOWNS, LIST GROUPS, TABS, ACCORDION
   -------------------------------------------------------------------------- */
.modal-content {
    background: var(--ferroxel-bg-card);
    border: 1px solid var(--ferroxel-border);
    color: var(--ferroxel-text);
}
.modal-header { border-bottom-color: var(--ferroxel-border); }
.modal-footer { border-top-color: var(--ferroxel-border); }
.modal-content .close { color: var(--ferroxel-text); text-shadow: none; }

.list-group-item {
    background: var(--ferroxel-bg-card);
    border-color: var(--ferroxel-border);
    color: var(--ferroxel-text);
}
.list-group-item.active {
    background: var(--ferroxel-accent-soft);
    border-color: var(--ferroxel-accent);
    color: var(--ferroxel-accent);
}
.list-group-item-action:hover,
.list-group-item-action:focus { background: var(--ferroxel-bg-hover); color: var(--ferroxel-text); }

.nav-tabs { border-bottom-color: var(--ferroxel-border); }
.nav-tabs .nav-link {
    background: var(--ferroxel-bg-card);
    border: 1px solid var(--ferroxel-border);
    color: var(--ferroxel-text-muted);
    border-radius: 8px 8px 0 0;
    margin-right: 4px;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background: var(--ferroxel-accent-soft);
    border-color: var(--ferroxel-border) var(--ferroxel-border) var(--ferroxel-bg);
    color: var(--ferroxel-accent);
}

.accordion .card-header,
[data-toggle="collapse"] { color: var(--ferroxel-text); }
.accordion .card-header .btn { color: var(--ferroxel-text); font-family: var(--ferroxel-font-heading); }

.item-selector .item {
    display: block;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ferroxel-border-strong);
    border-radius: var(--ferroxel-radius);
    color: var(--ferroxel-text-muted);
    margin-bottom: 1rem;
}
.item-selector .item:hover,
.item-selector .item.active { border-color: var(--ferroxel-accent); color: var(--ferroxel-accent); background: var(--ferroxel-accent-soft); }

/* --------------------------------------------------------------------------
   22. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .main-navbar-wrapper .navbar-nav .nav-link {
        border-left: 3px solid transparent;
        border-bottom: none;
    }
    .main-navbar-wrapper .navbar-nav .nav-link.active {
        border-left-color: var(--ferroxel-accent);
        border-bottom: none;
    }
    .navbar-collapse { background: var(--ferroxel-bg-card); padding: 0.75rem; }
    .service-card .btn { width: 100%; margin-bottom: 0.4rem; }
    .tiles .tile { min-height: 110px; }
}

@media (max-width: 575.98px) {
    .price-card .plan-price { font-size: 1.75rem; }
    .config-option.tier-option { flex-direction: column; align-items: flex-start; }
    .config-option .option-price { margin-top: 0.25rem; }
}

/* --------------------------------------------------------------------------
   23. REDUCED MOTION / PREFERENCE SAFEGUARDS
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}