/* *****************************************************

    VernalWeb — Nexus reskin (Lagom-style)
    Drop-in replacement for: templates/nexus/css/custom.css

    Token-driven: this remaps Nexus's design tokens to the
    VernalWeb brand (Rubik + #1c40f2 blue + #f5931e orange),
    so buttons, links, focus, and active states rebrand
    automatically. Upgrade-safe — no core files edited.

***************************************************** */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');

:root {
    --white: #fff;

    /* Neutral shades — cooled slightly for the light Lagom backdrop */
    --neutral-50: #f4f6fb;
    --neutral-100: #eef1f7;
    --neutral-200: #e7ebf3;
    --neutral-300: #d3dae7;
    --neutral-400: #9aa3b6;
    --neutral-500: #6b7488;
    --neutral-600: #4b5566;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #0e1526;
    --neutral-950: #060b16;

    /* Primary palette — VernalWeb blue #1c40f2 */
    --primary-50:  #eef1fe;
    --primary-100: #dfe4fd;
    --primary-200: #c3ccfb;
    --primary-300: #9daaf8;
    --primary-400: #6f7ef3;
    --primary-500: #3f57f4;
    --primary-600: #1c40f2;
    --primary-700: #1430c4;
    --primary-800: #1a2f9e;
    --primary-900: #1b2c7d;
    --primary-950: #131d4f;

    /* Primary brand colors (used for buttons, links, active nav, focus) */
    --primary:          var(--primary-600);
    --primary-lifted:   var(--primary-700);
    --primary-accented: var(--primary-800);

    /* VernalWeb orange accent (CTAs, highlights) — custom addition */
    --accent-050: #fff6e9;
    --accent:     #f5931e;
    --accent-300: #faa72d;
    --accent-ink: #3d2100;

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Semantic colors */
    --success: #12b76a;  --success-lifted: #0e9c5a; --success-accented: #087443;
    --info: var(--primary-600); --info-lifted: var(--primary-700); --info-accented: var(--primary-800);
    --notice: #7f22fe; --notice-lifted: #7008e7; --notice-accented: #5d0ec0;
    --warning: #f79009; --warning-lifted: #d97706; --warning-accented: #b45309;
    --error: #f04438; --error-lifted: #d92d20; --error-accented: #b42318;

    /* Text */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Borders */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Backgrounds */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Softer, Lagom-style rounding */
    --rounding-sm: 0.375rem;   /* 6px  */
    --rounding-md: 0.625rem;   /* 10px */
    --rounding-lg: 0.875rem;   /* 14px */

    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* ---------------- Typography: Rubik everywhere ---------------- */
body,
button, input, select, textarea,
.btn, .navbar, .card-title, .panel-title,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
h1, h2, h3, h4, .card-title { letter-spacing: -0.01em; }

/* ---------------- Light app backdrop (cards stay white) ---------------- */
body { background-color: var(--bg-muted); }

/* ---------------- Buttons: brand blue, softer, medium weight ---------------- */
.btn { font-weight: 500; border-radius: var(--rounding-md); }
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--primary-lifted);
    border-color: var(--primary-lifted);
    color: var(--white);
}

/* Orange accent utility for high-emphasis CTAs (e.g. Pay Now) */
.btn-accent, .btn.btn-accent {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
}
.btn-accent:hover, .btn-accent:focus { background-color: #e9850f; border-color: #e9850f; color: var(--accent-ink); }

/* ---------------- Links ---------------- */
a { color: var(--primary); }
a:hover { color: var(--primary-lifted); }

/* ---------------- Cards / panels: softer, subtle shadow ---------------- */
.card, .panel {
    border-radius: var(--rounding-lg);
    border-color: var(--border-muted);
    box-shadow: 0 1px 2px rgba(16,21,38,.04), 0 8px 24px rgba(16,21,38,.05);
}

/* ---------------- Status labels: brand-toned pills ---------------- */
.label, .badge { font-weight: 500; border-radius: 20px; }

/* ---------------- Focus ring on brand ---------------- */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ============================================================
   VernalWeb left-nav rail (restructured header.tpl/footer.tpl)
   ============================================================ */
.vw-layout { display: flex; min-height: 100vh; align-items: stretch; }
.vw-rail {
    width: 258px; flex: 0 0 258px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    background: linear-gradient(120deg, #00165b, #0a00e9) top center no-repeat;
    color: #fff; padding: 20px 16px; display: flex; flex-direction: column; gap: 20px; z-index: 1000;
}
.vw-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--bg-muted); }

/* Rail brand */
.vw-rail-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 2px; color: #fff; }
.vw-rail-brand:hover { color: #fff; text-decoration: none; }
.vw-rail-mark { width: 34px; height: 34px; border-radius: 9px; background: #fff; color: var(--primary); display: grid; place-items: center; font-weight: 700; font-size: 18px; flex: none; text-transform: uppercase; }
.vw-rail-brandname { font-weight: 600; font-size: 18px; }

/* Rail nav — renders navbar.tpl <li> vertically */
.vw-rail-nav { flex-direction: column; width: 100%; padding: 0; margin: 0; gap: 2px; list-style: none; }
.vw-rail-nav-secondary { margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.vw-rail-nav > li { width: 100%; list-style: none; position: relative; }
.vw-rail-nav > li > a {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
    color: rgba(255,255,255,.82); font-size: 14.5px; font-weight: 400; text-decoration: none;
}
.vw-rail-nav > li > a:hover { background: rgba(255,255,255,.10); color: #fff; }
.vw-rail-nav > li.active > a, .vw-rail-nav > li > a.active { background: rgba(255,255,255,.16); color: #fff; font-weight: 500; }
.vw-rail-nav .dropdown-toggle::after { margin-left: auto; }
.vw-rail-nav .badge { margin-left: auto; background: var(--accent); color: var(--accent-ink); }

/* Rail submenus — expand inline (static), never floating/clipped */
.vw-rail-nav .dropdown-menu {
    position: static !important; transform: none !important; float: none; display: none;
    background: rgba(255,255,255,.06); border: 0; box-shadow: none; margin: 2px 0 4px; padding: 4px;
    border-radius: 8px; width: 100%; min-width: 0;
}
.vw-rail-nav .dropdown-menu.show { display: block; }
.vw-rail-nav .dropdown-menu > li > a,
.vw-rail-nav .dropdown-menu .dropdown-item {
    color: rgba(255,255,255,.72); padding: 7px 10px; border-radius: 6px; font-size: 13.5px; display: block;
}
.vw-rail-nav .dropdown-menu > li > a:hover,
.vw-rail-nav .dropdown-menu .dropdown-item:hover { background: rgba(255,255,255,.10); color: #fff; }

/* Rail help card */
.vw-rail-help { margin-top: auto; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 15px; }
.vw-rail-help h4 { font-size: 14px; font-weight: 600; margin: 0 0 3px; color: #fff; }
.vw-rail-help p { font-size: 12.5px; color: rgba(255,255,255,.7); line-height: 1.5; margin: 0 0 11px; }
.vw-rail-help a { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 600; padding: 8px 13px; border-radius: 8px; text-decoration: none; }

/* ---------------- Top bar ---------------- */
.vw-topbar { background: var(--white); border-bottom: 1px solid var(--border-muted); min-height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 24px; position: sticky; top: 0; z-index: 100; }
.vw-burger { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-muted); background: var(--white); color: var(--text-lifted); place-items: center; }
.vw-topsearch { display: flex; align-items: center; gap: 8px; background: var(--bg-muted); border: 1px solid var(--border-muted); border-radius: 10px; padding: 8px 12px; width: 300px; color: var(--text-lifted); }
.vw-topsearch button { border: 0; background: none; color: var(--text-lifted); padding: 0; }
.vw-topsearch input { border: 0; background: none; outline: none; font: inherit; font-size: 14px; width: 100%; color: var(--text); }
.vw-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.vw-top-btn { min-width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-muted); background: var(--white); color: var(--text-lifted); display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 10px; }
.vw-top-btn:hover { background: var(--bg-muted); color: var(--text); }
.vw-top-count { font-size: 11px; font-weight: 600; color: var(--accent); }
.vw-top-account { display: flex; align-items: center; gap: 8px; padding-left: 6px; }
.vw-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-300), var(--accent)); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 14px; text-transform: uppercase; }
.vw-top-user { font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; }
.vw-top-icon { width: 34px; height: 34px; border-radius: 8px; color: var(--text-lifted); display: grid; place-items: center; }
.vw-top-icon:hover { background: var(--bg-muted); color: var(--text); }

/* Content spacing inside the offset main column */
.vw-main #main-body { padding-top: 22px; }
.vw-main .master-breadcrumb { background: transparent; }

/* ---------------- Mobile: rail becomes an off-canvas drawer ---------------- */
@media (max-width: 991px) {
    .vw-rail { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .24s ease; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
    .vw-rail.open { transform: none; }
    .vw-scrim { display: none; position: fixed; inset: 0; background: rgba(14,21,38,.45); z-index: 900; }
    .vw-scrim.show { display: block; }
    .vw-burger { display: grid; }
    .vw-topsearch { display: none; }
}

/* ============================================================
   Layout corrections + prototype-style polish (image 3)
   ============================================================ */

/* FIX 1: containers must fill the offset content column, not center
   at a fixed max-width (that caused the squeezed content + right gap). */
.vw-main .container,
.vw-main #main-body .container {
    max-width: 100% !important;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 28px;
    padding-right: 28px;
}

/* FIX 2: footer full-width at the bottom of the main column, not floating */
.vw-main #footer,
.vw-main footer.footer {
    width: 100%;
    margin-top: auto;
}
.vw-main { min-height: 100vh; }

/* FIX 3: rail must always paint its full height (no black bleed below nav) */
.vw-rail { background-attachment: local; }
.vw-layout, .vw-rail { min-height: 100vh; }

/* ---------------- Content rhythm ---------------- */
.vw-main #main-body { padding-bottom: 40px; }
.vw-main .master-breadcrumb .container { padding-top: 14px; padding-bottom: 14px; }

/* ---------------- Cards: consistent Lagom surface ---------------- */
.vw-main .card { border-radius: var(--rounding-lg); border: 1px solid var(--border-muted); box-shadow: 0 1px 2px rgba(16,21,38,.04), 0 8px 24px rgba(16,21,38,.05); }
.vw-main .card .card-header { background: transparent; border-bottom: 1px solid var(--border-muted); font-weight: 600; }

/* ---------------- Sidebar cards (Your Info / Contacts / Shortcuts) ---------------- */
.vw-main .sidebar .card-title, .vw-main .sidebar .panel-title { font-weight: 600; font-size: 15px; }

/* ---------------- Dashboard stat tiles (Services/Domains/Tickets/Invoices) ---------------- */
.vw-main .panel-sidebar, .vw-main .btn-block { border-radius: var(--rounding-md); }
#stats-container .stat, .stats-panel .stat, .client-home-panels .stat { border-radius: var(--rounding-lg); }

/* Brand-tint the big stat numbers + underline accents */
#stats-container .h1, .home-panels .number, .panel .number { color: var(--text); font-weight: 600; }

/* ---------------- Service / product rows ---------------- */
.vw-main .table td { vertical-align: middle; }
.vw-main .list-group-item { border-color: var(--border-muted); }

/* ---------------- Buttons keep pill-free, medium radius ---------------- */
.vw-main .btn { border-radius: var(--rounding-md); }

/* ---------------- Shopping cart: same full-width fix ---------------- */
.vw-main #order-standard_cart .container,
.vw-main #main-body.cart .container { max-width: 100% !important; }

/* ============================================================
   Dashboard stat tiles -> prototype cards with tinted icon chips
   Markup: .tiles .tile > i + .stat + .title + .highlight.bg-color-*
   ============================================================ */
.vw-main .tiles .row.no-gutters { margin-left: -8px; margin-right: -8px; }
.vw-main .tiles [class*="col-"] { padding: 8px; }

.vw-main .tiles .tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--white); border: 1px solid var(--border-muted); border-radius: var(--rounding-lg);
    box-shadow: 0 1px 2px rgba(16,21,38,.04), 0 8px 24px rgba(16,21,38,.05);
    padding: 18px; height: 100%; position: relative; text-decoration: none;
}
.vw-main .tiles .tile:hover { text-decoration: none; border-color: var(--border); }
.vw-main .tiles .tile i {
    width: 42px; height: 42px; border-radius: 11px; margin-bottom: 10px;
    background: var(--primary-50); color: var(--primary);
    display: grid; place-items: center; font-size: 18px;
}
.vw-main .tiles .tile .stat { font-size: 27px; font-weight: 600; color: var(--text); line-height: 1; }
.vw-main .tiles .tile .title { font-size: 13.5px; color: var(--text-lifted); text-transform: none; letter-spacing: 0; }
.vw-main .tiles .tile .highlight { display: none; }

/* Category-tinted chips (progressive: falls back to blue if :has unsupported) */
.vw-main .tiles .tile:has(.bg-color-green) i { background: #e7f8f0; color: var(--success); }
.vw-main .tiles .tile:has(.bg-color-red) i   { background: #fdecea; color: var(--error); }
.vw-main .tiles .tile:has(.bg-color-gold) i  { background: var(--accent-050); color: var(--accent); }

/* ---------------- Active products/services rows polish ---------------- */
.vw-main .div-service-status .label { font-weight: 500; }
.vw-main .active-products-services .list-group-item,
.vw-main #active-products-services .table td { padding-top: 14px; padding-bottom: 14px; }

/* ---------------- Panel headers a touch tighter ---------------- */
.vw-main .card > .card-header h3,
.vw-main .card > .card-header .card-title { font-size: 15.5px; font-weight: 600; margin: 0; }

/* ============================================================
   Polish pass 2 — login/auth, breadcrumb, forms, footer, cart
   ============================================================ */

/* Auth/login card: center nicely and soften */
.vw-main .card.card-body-focus,
.vw-main .authentication-form,
.vw-main #frmLogin { border-radius: var(--rounding-lg); }

/* Inputs with leading icon (login) — round the group cleanly */
.vw-main .input-group .input-group-text { border-radius: var(--rounding-md) 0 0 var(--rounding-md); background: var(--bg-muted); border-color: var(--border-muted); color: var(--text-lifted); }
.vw-main .input-group .form-control { border-color: var(--border-muted); }
.vw-main .input-group .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-50); }

/* Breadcrumb strip: lose the heavy grey band, make it light */
.vw-main .master-breadcrumb { background: transparent; border: 0; }
.vw-main .breadcrumb { background: transparent; padding-left: 0; margin-bottom: 0; }
.vw-main .breadcrumb-item, .vw-main .breadcrumb-item a { color: var(--text-lifted); font-size: 13px; }
.vw-main .breadcrumb-item.active { color: var(--text); }

/* Footer: brand-navy instead of pure black, comfortable spacing */
#footer.footer, footer.footer { background: #101a3d; padding: 26px 0 18px; }
#footer.footer .container, footer.footer .container { max-width: 1180px; }
#footer.footer .nav-link, footer.footer .nav-link { color: rgba(255,255,255,.82); }
#footer.footer .nav-link:hover, footer.footer .nav-link:hover { color: #fff; }
#footer.footer .copyright, footer.footer .copyright { color: rgba(255,255,255,.55); }

/* Cart: keep summary + checkout on brand */
.vw-main .order-summary .btn-primary,
.vw-main #checkout { background: var(--primary); border-color: var(--primary); }

/* Rail: subtle divider above the account (Hello, x) group + tidy caret */
.vw-rail-nav-secondary > li > a { color: rgba(255,255,255,.9); }
.vw-rail .dropdown-toggle::after { opacity: .7; border-top-color: currentColor; }

/* Search field in top bar: match rounded prototype */
.vw-topsearch { border-radius: 10px; }

/* Secondary/default buttons (used ~124x: Update, My Services, View, toggles)
   -> clean light button like the prototype's "Manage"/"View", not near-black.
   Active/toggle state (e.g. Register/Transfer) goes brand blue for emphasis. */
.vw-main .btn-default {
    background: var(--white);
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 500;
}
.vw-main .btn-default:hover,
.vw-main .btn-default:focus {
    background: var(--bg-muted);
    border-color: var(--border-lifted);
    color: var(--text);
}
.vw-main .btn-default.active,
.vw-main .btn-group .btn-default.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ============================================================
   FIXES: rail hover double-layer, nav gaps, footer, card-sidebar
   ============================================================ */

/* --- Nav gap: tighten top-level rail items (kill theme padding/margin) --- */
.vw-rail-nav.navbar-nav { gap: 1px; }
.vw-rail-nav.navbar-nav > li { margin: 0 !important; padding: 0 !important; }
.vw-rail-nav.navbar-nav > li > a { padding: 9px 12px !important; margin: 0 !important; line-height: 1.35; }

/* --- Hover: ONE clickable layer. The <a> is the only hover surface --- */
.vw-rail-nav > li:hover { background: transparent !important; }
.vw-rail-nav > li > a { width: 100%; }

/* Submenu children: <li class="dropdown-item"> wraps <a class="dropdown-item">.
   Neutralise the <li> (outer, not clickable); style only the <a> (fills row). */
.vw-rail-nav .dropdown-menu > li.dropdown-item {
    padding: 0 !important; background: transparent !important; display: block;
}
.vw-rail-nav .dropdown-menu > li.dropdown-item:hover { background: transparent !important; }
.vw-rail-nav .dropdown-menu a.dropdown-item {
    display: block; width: 100%; padding: 8px 10px !important;
    border-radius: 6px; color: rgba(255,255,255,.72);
}
.vw-rail-nav .dropdown-menu a.dropdown-item:hover,
.vw-rail-nav .dropdown-menu a.dropdown-item:focus {
    background: rgba(255,255,255,.12) !important; color: #fff;
}

/* --- Remove the card sidebar column entirely (belt: header.tpl also drops it) --- */
.vw-main #main-body .row > .col-lg-4.col-xl-3 { display: none !important; }

/* --- Footer: light + minimal to match the clean prototype (not dark navy) --- */
#footer.footer, footer.footer { background: var(--bg-muted); padding: 22px 0; border-top: 1px solid var(--border-muted); }
#footer.footer .container, footer.footer .container { max-width: none; padding-left: 28px; padding-right: 28px; }
#footer.footer .nav-link, footer.footer .nav-link { color: var(--text-lifted); }
#footer.footer .nav-link:hover, footer.footer .nav-link:hover { color: var(--text); }
#footer.footer .copyright, footer.footer .copyright { color: var(--text-muted); }

/* ============================================================
   Auth pages (login / register): full-screen Lagom-style split
   ============================================================ */
body.vw-login .vw-rail, body.vw-login .vw-scrim, body.vw-login .vw-topbar, body.vw-login .master-breadcrumb, body.vw-login #footer,
body.vw-register .vw-rail, body.vw-register .vw-scrim, body.vw-register .vw-topbar, body.vw-register .master-breadcrumb, body.vw-register #footer {
    display: none !important;
}
body.vw-login .vw-main, body.vw-register .vw-main { margin: 0 !important; min-height: 100vh; }
body.vw-login #main-body, body.vw-register #main-body { padding: 0 !important; }
body.vw-login #main-body .container, body.vw-register #main-body .container { max-width: none !important; padding: 0 !important; }
body.vw-login #main-body .row, body.vw-register #main-body .row { margin: 0; }
body.vw-login #main-body .primary-content, body.vw-register #main-body .primary-content { padding: 0 !important; }

.vw-auth { display: flex; min-height: 100vh; }
.vw-auth-form { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--white); }
.vw-auth-inner { width: 100%; max-width: 440px; }
.vw-auth-brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 26px; font-weight: 600; font-size: 20px; color: var(--text); }
.vw-auth-brand .vw-rail-mark { background: var(--primary); color: #fff; }
.vw-auth-art { flex: 1 1 50%; background: linear-gradient(160deg, #1c40f2 0%, #1a34c9 55%, #142268 100%); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.vw-auth-art-inner { text-align: center; color: #fff; padding: 48px; max-width: 480px; z-index: 1; }
.vw-auth-art-inner h2 { color: #fff; font-size: 30px; font-weight: 600; margin-bottom: 12px; }
.vw-auth-art-inner p { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.6; }
.vw-auth-art-inner svg { width: 100%; max-width: 320px; margin: 0 auto 28px; display: block; }
.vw-auth-art::before { content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%; background: rgba(255,255,255,.06); top: -140px; right: -120px; }
.vw-auth-art::after { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.05); bottom: -100px; left: -80px; }

/* Strip the login card chrome — the split panel is the frame now */
.vw-auth .login-form .card { border: 0; box-shadow: none; max-width: none; margin: 0; background: transparent; }
.vw-auth .login-form .card-body { padding: 0 !important; }
.vw-auth .login-form .card-footer { background: transparent; border: 0; padding: 18px 0 0 !important; }
.vw-auth .login-form .btn-primary { width: 100%; padding: 11px; }
.vw-auth .login-form .float-left, .vw-auth .login-form .text-right { float: none !important; text-align: left !important; }

@media (max-width: 900px) { .vw-auth-art { display: none; } .vw-auth-form { flex: 1 1 100%; } }

/* ============================================================
   Overrides for ID-specificity / footer button (targeted)
   ============================================================ */

/* The theme sets `#nav { gap: 40px }` — an ID selector that beat my class
   rules. Match the ID to kill the huge rail spacing. */
.vw-rail ul#nav.vw-rail-nav { gap: 1px; }
.vw-rail ul#nav.vw-rail-nav > li { margin: 0; padding: 0; }
.vw-rail ul#nav.vw-rail-nav > li > a { padding: 9px 12px; line-height: 1.35; }

/* Footer language/currency button: was .btn-outline-light (white, for a dark
   footer). On the light footer, make it a normal light button. */
#footer .btn-outline-light, footer.footer .btn-outline-light {
    color: var(--text);
    border-color: var(--border);
    background: var(--white);
}
#footer .btn-outline-light:hover, footer.footer .btn-outline-light:hover,
#footer .btn-outline-light:focus, footer.footer .btn-outline-light:focus {
    color: var(--text);
    border-color: var(--border-lifted);
    background: var(--bg-muted);
}

/* ---------------- Rail nav icons (added by vernalweb_navicons.php hook) ---------------- */
.vw-rail-nav > li > a > i {
    width: 20px; font-size: 15px; text-align: center; flex: none; opacity: .92;
}
.vw-rail-nav .dropdown-menu a.dropdown-item > i { width: 16px; text-align: center; opacity: .8; margin-right: 2px; }

/* ============================================================
   Stat tiles — match prototype exactly (override theme's
   absolute top-right icon + short height). Icon chip TOP-LEFT,
   tall card, number + label stacked at the bottom.
   ============================================================ */
.vw-main .tiles .tile {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    min-height: 150px;
    background: var(--white);
    border: 1px solid var(--border-muted) !important;
    border-radius: var(--rounding-lg);
    box-shadow: 0 1px 2px rgba(16,21,38,.04), 0 8px 24px rgba(16,21,38,.05);
    text-decoration: none;
}
.vw-main .tiles .tile:hover { background: var(--white); border-color: var(--border) !important; }
.vw-main .tiles .row > div:last-child .tile { border: 1px solid var(--border-muted); }

/* Icon: from absolute top-right 55px -> static top-left rounded chip */
.vw-main .tiles .tile i {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 44px; height: 44px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary-50); color: var(--primary);
    font-size: 18px !important; line-height: 1; margin: 0; transition: none;
}
.vw-main .tiles .tile:hover i { font-size: 18px !important; color: var(--primary); }

/* Number pushed to the bottom, label under it (prototype rhythm) */
.vw-main .tiles .tile .stat {
    margin-top: auto; padding-top: 16px;
    font-size: 28px; font-weight: 600; color: var(--text); line-height: 1;
}
.vw-main .tiles .tile .title {
    margin-top: 6px; font-weight: 400; color: var(--text-lifted);
    text-transform: none; letter-spacing: 0; font-size: 13.5px;
}
.vw-main .tiles .tile .highlight { display: none; }

/* ---------------- Rail logo (uploaded white wordmark) ---------------- */
.vw-rail-brand { padding: 12px 8px 8px; display: block; }
.vw-rail-logo { max-width: 190px; width: 92%; height: auto; display: block; }

/* ---------------- Clean top bar (search + notifications removed) ---------------- */
.vw-topbar { justify-content: flex-end; }
.vw-topbar .vw-burger { margin-right: auto; }   /* keep burger on the left (mobile) */
.vw-topbar-right { margin-left: 0; }

/* ---------------- Footer: keep it minimal (hide social clutter if present) ---------------- */
#footer .footer-social, footer.footer .footer-social,
#footer .social-accounts, footer.footer .social-accounts { display: none; }


/* ============================================================
   "More" (collapsable) submenu — single hover layer, no underline
   Items are JS-cloned and may be nested, so use descendant selectors.
   ============================================================ */

/* No underline anywhere in the rail (top-level + every submenu) */
.vw-rail a,
.vw-rail a:hover,
.vw-rail a:focus,
.vw-rail a:active { text-decoration: none !important; }

/* Flatten the collapsable "More" menu to one clean, single-hover layer */
.vw-rail .collapsable-dropdown-menu {
    position: static !important; transform: none !important; float: none;
    background: rgba(255,255,255,.06); border: 0; box-shadow: none;
    padding: 4px; margin: 2px 0 4px; border-radius: 8px; width: 100%;
}
.vw-rail .collapsable-dropdown-menu li {
    background: transparent !important; padding: 0 !important; list-style: none;
}
.vw-rail .collapsable-dropdown-menu li:hover { background: transparent !important; }
.vw-rail .collapsable-dropdown-menu a {
    display: block; width: 100%; padding: 8px 10px !important; border-radius: 6px;
    color: rgba(255,255,255,.72) !important;
}
.vw-rail .collapsable-dropdown-menu a:hover,
.vw-rail .collapsable-dropdown-menu a:focus {
    background: rgba(255,255,255,.12) !important; color: #fff !important;
}
/* Nested submenu inside "More" stays inline/flat (no floating layer) */
.vw-rail .collapsable-dropdown-menu .dropdown-menu {
    position: static !important; transform: none !important;
    background: transparent; border: 0; box-shadow: none; padding: 0 0 0 8px; width: 100%;
}

/* ============================================================
   Rail fills full height (fixed) + top-level single-hover fix
   ============================================================ */

/* Fixed rail always paints the full left column top-to-bottom (no white gap) */
.vw-rail { position: fixed !important; left: 0; top: 0; height: 100vh; }
.vw-main { margin-left: 258px; }

/* Kill the OUTER (li) hover layer on top-level items.
   Theme uses `#nav > li:hover {background}` (ID) — beat it with ID specificity. */
.vw-rail ul#nav.vw-rail-nav > li,
.vw-rail ul#nav.vw-rail-nav > li:hover,
.vw-rail ul#nav.vw-rail-nav > li:focus-within {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* The <a> is the one and only hover surface, filling the full row */
.vw-rail ul#nav.vw-rail-nav > li > a:hover,
.vw-rail ul#nav.vw-rail-nav > li > a:focus {
    background: rgba(255,255,255,.10) !important;
    text-decoration: none !important;
}
.vw-rail ul#nav.vw-rail-nav > li.active > a {
    background: rgba(255,255,255,.16) !important;
}

/* Mobile: rail stays an off-canvas drawer, content un-offset (must come last) */
@media (max-width: 991px) {
    .vw-rail { transform: translateX(-100%); }
    .vw-rail.open { transform: none; }
    .vw-main { margin-left: 0 !important; }
}

/* ============================================================
   Ticket / status labels — WHMCS outputs BS3-style .label, which
   Nexus (Bootstrap 4) leaves unstyled -> white-on-white. Give a
   visible pill + brand-mapped colors. Inline status colors (if any)
   still win over the fallback background.
   ============================================================ */
.vw-main .label {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: #fff;
    background-color: var(--text-lifted);
}
.vw-main .label-success,
.vw-main .label.label-open        { background-color: var(--success) !important; color: #fff !important; }
.vw-main .label-danger,
.vw-main .label.label-customer    { background-color: var(--error) !important; color: #fff !important; }
.vw-main .label-warning,
.vw-main .label.label-onhold      { background-color: var(--warning) !important; color: #fff !important; }
.vw-main .label-info,
.vw-main .label-primary,
.vw-main .label.label-answered    { background-color: var(--primary) !important; color: #fff !important; }
.vw-main .label-default,
.vw-main .label.label-closed      { background-color: var(--text-lifted) !important; color: #fff !important; }

/* ============================================================
   Data tables (tickets, invoices, etc.) — consistent LEFT alignment
   so headers line up with their cell content.
   ============================================================ */
.vw-main table.table > thead > tr > th,
.vw-main table.table > tbody > tr > td,
.vw-main .dataTable thead th,
.vw-main .dataTable tbody td {
    text-align: left;
    vertical-align: middle;
}

/* Keep DataTables sort arrows from pushing header text to center */
.vw-main table.dataTable thead th {
    position: relative;
    padding-right: 24px;
}

/* Status/label cell: pill sits left with its text */
.vw-main table.table td .label { vertical-align: middle; }

/* The "Actions" / button column can stay right-aligned if present */
.vw-main table.table > thead > tr > th.text-right,
.vw-main table.table > tbody > tr > td.text-right { text-align: right !important; }
.vw-main table.table > thead > tr > th.text-center,
.vw-main table.table > tbody > tr > td.text-center { text-align: center !important; }

/* ============================================================
   Ticket status colors — real markup is:
     <span class="label status status-{statusClass}">
     (or status-custom with an inline background-color).
   Map each WHMCS status to a distinct, readable color.
   ============================================================ */
.vw-main .label.status-open,
.vw-main .status.status-open            { background-color: #12b76a !important; color: #fff !important; } /* Open — green */

.vw-main .label.status-answered,
.vw-main .status.status-answered        { background-color: #1c40f2 !important; color: #fff !important; } /* Answered — blue */

.vw-main .label.status-customerreply,
.vw-main .label.status-customer-reply,
.vw-main .status.status-customerreply,
.vw-main .status.status-customer-reply  { background-color: #f79009 !important; color: #fff !important; } /* Customer-Reply — orange */

.vw-main .label.status-closed,
.vw-main .status.status-closed          { background-color: #6b7488 !important; color: #fff !important; } /* Closed — grey */

.vw-main .label.status-inprogress,
.vw-main .label.status-in-progress      { background-color: #7f22fe !important; color: #fff !important; } /* In Progress — purple */

.vw-main .label.status-onhold,
.vw-main .label.status-on-hold          { background-color: #f5931e !important; color: #fff !important; } /* On Hold — amber */

/* status-custom keeps the admin-defined inline color (nothing to do). */

/* ============================================================
   Register page — templatefile is "clientregister" (body.vw-clientregister).
   Full-screen Lagom split: form left, brand panel right (sticky).
   ============================================================ */
body.vw-clientregister .vw-rail,
body.vw-clientregister .vw-scrim,
body.vw-clientregister .vw-topbar,
body.vw-clientregister .master-breadcrumb,
body.vw-clientregister #footer { display: none !important; }
body.vw-clientregister .vw-main { margin: 0 !important; min-height: 100vh; }
body.vw-clientregister #main-body { padding: 0 !important; }
body.vw-clientregister #main-body .container { max-width: none !important; padding: 0 !important; }
body.vw-clientregister #main-body .row { margin: 0; }
body.vw-clientregister #main-body .primary-content { padding: 0 !important; }

/* Two-column register: form scrolls with the page, art panel stays put */
body.vw-clientregister .vw-auth { align-items: stretch; }
body.vw-clientregister .vw-auth-form { align-items: flex-start; padding: 44px 40px; }
body.vw-clientregister .vw-auth-inner { max-width: 760px; }
body.vw-clientregister .vw-auth-art { position: sticky; top: 0; height: 100vh; align-self: flex-start; }
body.vw-clientregister .vw-auth .card { box-shadow: none; }

.vw-auth-title { font-size: 26px; font-weight: 600; margin: 0 0 4px; }
.vw-auth-sub { color: var(--text-lifted); font-size: 14.5px; margin: 0 0 24px; }

@media (max-width: 900px) {
    body.vw-clientregister .vw-auth-art { display: none; }
    body.vw-clientregister .vw-auth-form { padding: 32px 20px; }
}

/* ---------------- Intl-tel-input flag dropdown arrow position ---------------- */
.intl-tel-input .selected-flag .iti-arrow { right: 2px; }

/* ---------------- Auth pages: actual logo in a brand lockup ---------------- */
.vw-auth-brand { justify-content: center; }
.vw-auth-logobox {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary); padding: 10px 18px; border-radius: 12px;
}
.vw-auth-logobox img { max-width: 150px; height: auto; display: block; }


/* Auth logo: dark variant, no background box (sits directly on white) */
.vw-auth-logobox { background: transparent; padding: 0; border-radius: 0; }
.vw-auth-logobox img { max-width: 175px; }