@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;500;600;700;800&display=swap");

/* ==========================================================================
   Napa AI theme for WHMCS 9 (child of Nexus)

   Matches napa-ai.com: Kumbh Sans, violet accent, ink/paper neutrals,
   square corners and flat color (no gradients).

   Loaded after Nexus's theme.min.css on every client area page, and also by
   the standalone invoice page and the Nexus Cart / SPA pages, which read the
   same CSS variables. Sections:
     1. Nexus variables       5. Buttons            9. Badges & status labels
     2. Base                  6. Cards & panels    10. Tables
     3. App shell & sidebar   7. Forms             11. Page-specific
     4. Page header & footer  8. Alerts & banners  12. Cart / order forms
   ========================================================================== */

/* ---------- 1. Nexus variables ---------- */
:root {
    /* Napa brand tokens */
    --napa-ink: #0c0c0e;
    --napa-ink-2: #26262b;
    --napa-paper: #f5f4f8;
    --napa-mist: #e8e6ef;
    --napa-accent: #5b21b6;
    --napa-accent-hover: #6d28d9;
    --napa-accent-dark: #4c1d95;
    --napa-accent-soft: #7c3aed;
    --napa-accent-tint: rgba(91, 33, 182, 0.08);
    --napa-violet-300: #c4b5fd;
    --napa-stone: #6b7280;
    --napa-line: rgba(12, 12, 14, 0.1);
    --napa-line-strong: rgba(12, 12, 14, 0.18);
    --napa-success: #047857;
    --napa-success-tint: #ecfdf5;
    --napa-warning: #a16207;
    --napa-warning-tint: #fefce8;
    --napa-danger: #b91c1c;
    --napa-danger-tint: #fef2f2;
    --napa-info-tint: #f5f3ff;
    --napa-shadow: 0 20px 40px -24px rgba(12, 12, 14, 0.18);
    --napa-font: 'Kumbh Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --napa-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --napa-sidebar-w: 16.5rem;
    --napa-topbar-h: 4rem;

    --white: #fff;

    /* Neutral shades (cool grey, tinted toward the brand paper) */
    --neutral-50: #faf9fc;
    --neutral-100: #f5f4f8;
    --neutral-200: #e8e6ef;
    --neutral-300: #d6d3df;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #26262b;
    --neutral-900: #0c0c0e;
    --neutral-950: #050506;

    /* Brand palette (violet) */
    --primary-50: #f5f3ff;
    --primary-100: #ede9fe;
    --primary-200: #ddd6fe;
    --primary-300: #c4b5fd;
    --primary-400: #a78bfa;
    --primary-500: #8b5cf6;
    --primary-600: #7c3aed;
    --primary-700: #6d28d9;
    --primary-800: #5b21b6;
    --primary-900: #4c1d95;
    --primary-950: #2e1065;

    --primary: var(--primary-800);
    --primary-lifted: var(--primary-900);
    --primary-accented: var(--primary-950);

    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    --success: #047857;
    --success-lifted: #065f46;
    --success-accented: #064e3b;

    --info: var(--primary-800);
    --info-lifted: var(--primary-900);
    --info-accented: var(--primary-950);

    --notice: var(--primary-600);
    --notice-lifted: var(--primary-700);
    --notice-accented: var(--primary-800);

    --warning: #a16207;
    --warning-lifted: #854d0e;
    --warning-accented: #713f12;

    --error: #b91c1c;
    --error-lifted: #991b1b;
    --error-accented: #7f1d1d;

    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

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

    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--primary-800);

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

    --yellow-200: #fef08a;
    --yellow-300: #ca8a04;
    --teal-300: #5eead4;
    --teal-400: #2dd4bf;
    --emerald-300: #6ee7b7;
    --pink-400: #f472b6;

    --text-xs: 0.6875rem;
    --text-sm: 0.8125rem;
    --text-md: 0.9375rem;
    --text-lg: 1.0625rem;

    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Square corners everywhere */
    --rounding-sm: 0;
    --rounding-md: 0;
    --rounding-lg: 0;

    --letter-spacing: 0em;
    --disabled-opacity: 45%;

    /* Bootstrap 4 variables some components read */
    --primary-color: var(--primary-800);
    --blue: var(--primary-800);
    --font-family-sans-serif: var(--napa-font);
}

/* ---------- 2. Base ---------- */
/* Square corners: Nexus and Bootstrap hard-code many radii, so flatten them all.
   Radio buttons keep their circle so they still read as radios. */
*, *::before, *::after { border-radius: 0 !important; }
.custom-radio .custom-control-label::before,
.custom-radio .custom-control-label::after,
input[type="radio"],
.iradio_square-blue,
.rounded-circle,
.spinner-border,
.spinner-grow { border-radius: 50% !important; }
.bootstrap-switch { border-radius: 0 !important; }

/* No gradients */
.bg-gradient-primary, .bg-gradient-secondary, .bg-gradient-success,
.bg-gradient-info, .bg-gradient-warning, .bg-gradient-danger,
.bg-gradient-light, .bg-gradient-dark { background-image: none !important; }

html, body {
    height: auto;
    min-height: 100%;
    background-color: var(--napa-paper);
}
body,
.tooltip, .popover,
button, input, select, textarea, optgroup {
    font-family: var(--napa-font);
}
body {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--napa-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--napa-font);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--napa-ink);
}
a { color: var(--napa-accent); }
a:hover, a:focus { color: var(--napa-accent-dark); }
.primary-content a:not(.btn):not(.list-group-item):not(.dropdown-item):not(.nav-link):not(.page-link):not(.tile) { text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--napa-accent-soft); outline-offset: 2px; }
::selection { background: var(--primary-200); color: var(--napa-ink); }
hr { border-top-color: var(--napa-line); }
code, kbd, pre, samp { font-family: var(--napa-mono); }
code { color: var(--napa-accent-dark); }
.text-muted { color: var(--napa-stone) !important; }
.text-primary { color: var(--napa-accent) !important; }
a.text-primary:hover, a.text-primary:focus { color: var(--napa-accent-dark) !important; }
.bg-primary { background-color: var(--napa-accent) !important; }
.border-primary { border-color: var(--napa-accent) !important; }
.text-success { color: var(--napa-success) !important; }
.text-danger { color: var(--napa-danger) !important; }
.text-warning { color: var(--napa-warning) !important; }
.text-info { color: var(--napa-accent) !important; }
.bg-light { background-color: var(--napa-paper) !important; }
.bg-dark { background-color: var(--napa-ink) !important; }
.font-weight-bold, strong, b { font-weight: 700; }
.small, small { font-size: 0.8125rem; }

.napa-eyebrow {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--napa-accent);
}
.napa-eyebrow-light { color: var(--napa-violet-300); }

.napa-skip-link {
    position: absolute;
    left: -9999px;
    top: 1rem;
    z-index: 1100;
    padding: 0.75rem 1rem;
    background: var(--napa-accent);
    color: #fff;
    font-weight: 600;
}
.napa-skip-link:focus { left: 1rem; color: #fff; }

/* ---------- 3. App shell & sidebar ---------- */
.napa-app { display: block; }
.napa-main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.napa-main > #main-body { flex: 1 0 auto; }
@media (min-width: 1200px) {
    .napa-main { margin-left: var(--napa-sidebar-w); }
}

/* The main wrapper also carries Bootstrap's .container (Nexus JS measures it) */
.napa-container,
.container.napa-container {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}
@media (min-width: 768px) { .napa-container, .container.napa-container { padding: 0 2rem; } }

section#main-body {
    min-height: 0;
    padding: 2rem 0 4rem;
    background-color: var(--napa-paper);
}
@media (min-width: 1200px) { section#main-body { padding-top: 2.75rem; } }

/* Mobile top bar */
.napa-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--napa-topbar-h);
    padding: 0 1rem 0 1.25rem;
    background: #fff;
    border-bottom: 1px solid var(--napa-line);
}
.napa-brand img { height: 2rem; width: auto; display: block; }
.napa-topbar-actions { display: flex; align-items: center; gap: 0.5rem; }
@media (min-width: 1200px) { .napa-topbar { display: none; } }

.napa-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: var(--napa-ink);
    background: #fff;
    border: 1px solid var(--napa-line);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.napa-icon-btn:hover, .napa-icon-btn:focus { border-color: var(--napa-accent); color: var(--napa-accent); text-decoration: none; }
.napa-count {
    position: absolute;
    top: -0.45rem;
    right: -0.45rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--napa-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}
.napa-count[hidden] { display: none; }

/* Sidebar */
.napa-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    width: var(--napa-sidebar-w);
    max-width: 86vw;
    display: flex;
    flex-direction: column;
    background: var(--napa-ink);
    color: rgba(255, 255, 255, 0.72);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 1199.98px) {
    .napa-sidebar { transform: translateX(-100%); visibility: hidden; transition: transform 0.25s ease, visibility 0s linear 0.25s; }
    body.napa-nav-open .napa-sidebar { transform: none; visibility: visible; transition: transform 0.25s ease; }
    body.napa-nav-open { overflow: hidden; }
}
.napa-backdrop { position: fixed; inset: 0; z-index: 1045; background: rgba(12, 12, 14, 0.55); }
.napa-backdrop[hidden] { display: none; }
@media (min-width: 1200px) { .napa-backdrop { display: none !important; } }

.napa-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.5rem 0; }
.napa-sidebar-brand img { height: 2.1rem; width: auto; display: block; }
.napa-sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
}
@media (min-width: 1200px) { .napa-sidebar-close { display: none; } }
.napa-sidebar-tag {
    margin: 0;
    padding: 0.6rem 1.5rem 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--napa-violet-300);
}
.napa-sidebar-label {
    margin: 0;
    padding: 1.5rem 1.5rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}
.napa-sidebar-account { margin-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.napa-sidebar-account .napa-sidebar-label { padding-top: 1.25rem; }
.napa-sidebar-client {
    display: block;
    padding: 0 1.5rem;
    font-weight: 700;
    color: #fff;
    overflow-wrap: anywhere;
}
.napa-sidebar-client:hover, .napa-sidebar-client:focus { color: var(--napa-violet-300); text-decoration: none; }
.napa-sidebar-account-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 1.5rem 0; }
.napa-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.25rem 0.65rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    cursor: pointer;
}
.napa-chip:hover, .napa-chip:focus { color: #fff; border-color: var(--napa-violet-300); text-decoration: none; }
.napa-chip-alert { color: #fff; background: var(--napa-accent); border-color: var(--napa-accent); }
.napa-sidebar-admin {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.75rem 1.5rem 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fde68a;
    border: 1px solid rgba(253, 230, 138, 0.35);
}
.napa-sidebar-admin:hover { color: #fff; border-color: #fde68a; text-decoration: none; }

.napa-nav { flex: 1; padding-bottom: 1rem; }
.napa-nav-list { list-style: none; margin: 0; padding: 0; }
.napa-nav > .napa-nav-list:first-child { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.napa-nav-list li { display: block; }
.napa-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.6rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    color: rgba(255, 255, 255, 0.72);
    background: none;
    border: 0;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.napa-nav-link:hover, .napa-nav-link:focus { color: #fff; background: rgba(255, 255, 255, 0.05); text-decoration: none; }
.napa-nav-link:focus-visible { outline: 2px solid var(--napa-violet-300); outline-offset: -2px; }
.napa-nav-link.is-active { color: #fff; background: rgba(255, 255, 255, 0.08); border-left-color: var(--napa-violet-300); }
.napa-nav-link.is-active .napa-nav-icon,
.napa-nav-toggle.has-active .napa-nav-icon { color: var(--napa-violet-300); }
.napa-nav-toggle.has-active { color: #fff; }
.napa-nav-icon { width: 1.1rem; font-size: 0.95rem; text-align: center; flex-shrink: 0; }
.napa-nav-label { flex: 1; min-width: 0; }
.napa-nav-caret { font-size: 0.7rem; opacity: 0.6; transition: transform 0.2s ease; }
.napa-nav-toggle:not(.collapsed) .napa-nav-caret { transform: rotate(180deg); }
.napa-nav-sub { list-style: none; margin: 0; padding: 0 0 0.35rem; }
.napa-nav-sub .napa-nav-link { padding: 0.45rem 1.5rem 0.45rem 3.35rem; font-size: 0.875rem; font-weight: 500; }
.napa-nav-badge {
    margin-left: auto;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}
.napa-nav-badge-accent { background: var(--napa-accent); }
.napa-nav-badge.napa-empty { display: none; }

.napa-sidebar-foot { padding: 1.25rem 1.5rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.napa-sidebar-user { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.napa-avatar {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--napa-accent);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
}
.napa-sidebar-user-text { min-width: 0; }
.napa-sidebar-user-name, .napa-sidebar-user-email { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.napa-sidebar-user-name { color: #fff; font-weight: 700; font-size: 0.9375rem; }
.napa-sidebar-user-email { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); }

/* Notifications popover (opened from the sidebar) */
.popover-user-notifications { max-width: 22rem; border: 1px solid var(--napa-line); box-shadow: var(--napa-shadow); }
.popover-user-notifications .popover-body { padding: 0; }
.popover-user-notifications .client-alerts { list-style: none; margin: 0; padding: 0; }
.popover-user-notifications .client-alerts li { border-bottom: 1px solid var(--napa-line); }
.popover-user-notifications .client-alerts li:last-child { border-bottom: 0; }
.popover-user-notifications .client-alerts a { display: flex; gap: 0.6rem; padding: 0.75rem 1rem; color: var(--napa-ink); font-size: 0.875rem; }
.popover-user-notifications .client-alerts a:hover { background: var(--napa-paper); text-decoration: none; }
.popover-user-notifications .client-alerts .fa-exclamation-circle { color: var(--napa-danger); }
.popover-user-notifications .client-alerts .fa-exclamation-triangle { color: var(--napa-warning); }
.popover-user-notifications .client-alerts .fa-info-circle { color: var(--napa-accent); }
.popover-user-notifications .client-alerts .fa-check-circle { color: var(--napa-success); }
.popover-user-notifications .client-alerts li.none { padding: 0.75rem 1rem; color: var(--napa-stone); font-size: 0.875rem; }

/* ---------- 4. Page header & footer ---------- */
.napa-page-head { margin-bottom: 2rem; }
.napa-page-head h1 { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
@media (min-width: 768px) { .napa-page-head h1 { font-size: 2.5rem; } }
.napa-page-lead { margin: 0.5rem 0 0; max-width: 42rem; color: var(--napa-stone); font-size: 1.0625rem; }

.master-breadcrumb { background: none; padding: 0; margin: 0 0 0.75rem; }
.master-breadcrumb .breadcrumb,
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    background: none;
    font-size: 0.875rem;
}
.breadcrumb-item, .breadcrumb-item a, .master-breadcrumb .breadcrumb a { color: var(--napa-stone); }
.breadcrumb-item a:hover, .master-breadcrumb .breadcrumb a:hover { color: var(--napa-accent); text-decoration: none; }
.breadcrumb-item.active, .master-breadcrumb .breadcrumb .breadcrumb-item.active { color: var(--napa-ink); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--napa-line-strong); }

.napa-footer { margin-top: auto; background: #fff; border-top: 1px solid var(--napa-line); }
.napa-footer .napa-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
    font-size: 0.875rem;
    color: var(--napa-stone);
}
.napa-footer .copyright { margin: 0; }
.napa-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }
.napa-footer a { color: var(--napa-stone); }
.napa-footer a:hover { color: var(--napa-ink); text-decoration: none; }
.napa-social { display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.napa-social .list-inline-item { margin: 0; }
.napa-social .btn-icon { padding: 0.25rem 0.4rem; margin: 0 !important; color: var(--napa-stone); background: none; border: 0; }
.napa-social .btn-icon:hover { color: var(--napa-accent); }
.napa-locale-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--napa-ink);
    background: #fff;
    border: 1px solid var(--napa-line-strong);
    cursor: pointer;
}
.napa-locale-btn:hover { border-color: var(--napa-accent); color: var(--napa-accent); }

/* Language / currency modal */
.modal-localisation .modal-content { background: var(--napa-ink); color: #fff; border: 0; }
.modal-localisation .modal-footer { border-top-color: rgba(255, 255, 255, 0.1); }
.modal-localisation .h5 { color: #fff; }
.modal-localisation .item-selector .item { color: rgba(255, 255, 255, 0.75); border: 1px solid transparent; }
.modal-localisation .item-selector .item:hover { color: #fff; border-color: rgba(255, 255, 255, 0.2); }
.modal-localisation .item-selector .item.active { color: #fff; background: var(--napa-accent); border-color: var(--napa-accent); }

/* ---------- Sign-in layout ---------- */
.napa-auth { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
@media (min-width: 992px) { .napa-auth { grid-template-columns: 1fr 1fr; } }
.napa-auth-aside {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
    padding: 4rem;
    background: var(--napa-ink);
    color: #fff;
}
@media (min-width: 992px) { .napa-auth-aside { display: flex; } }
.napa-auth-logo { height: 2.5rem; width: auto; display: block; }
.napa-auth-aside .napa-eyebrow { margin-top: 2rem; }
.napa-auth-title { margin: 1rem 0 0; color: #fff; font-size: 2.75rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.02; }
.napa-auth-title span { color: var(--napa-violet-300); }
.napa-auth-lead { margin: 1.25rem 0 0; max-width: 28rem; color: rgba(255, 255, 255, 0.7); font-size: 1.0625rem; }
.napa-door {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 700;
    font-size: 1.125rem;
}
.napa-door:hover, .napa-door:focus { color: var(--napa-violet-300); text-decoration: none; }
.napa-door small { display: block; margin-top: 0.15rem; font-weight: 400; font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); }
.napa-auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.25rem;
    background: var(--napa-paper);
}
.napa-auth-card { width: 100%; max-width: 30rem; }
.napa-auth-mobile-logo { display: inline-block; margin-bottom: 2rem; }
.napa-auth-mobile-logo img { height: 2.25rem; width: auto; display: block; }
@media (min-width: 992px) { .napa-auth-mobile-logo { display: none; } }
.napa-auth-card .primary-content > .row { margin: 0; }
.napa-auth-card .primary-content .card { width: 100%; max-width: none; margin: 0 0 1rem !important; }
.napa-auth-card .primary-content .card-body { padding: 2rem !important; }
.napa-auth-card .primary-content .card-footer { padding: 1rem 2rem !important; }
.napa-auth-card .primary-content .card-title { font-size: 1.5rem; font-weight: 800; }
.napa-auth-card .network-issue-alert { margin-bottom: 1rem !important; }
.napa-auth-card .network-issue-alert .container { padding: 0; }
.napa-auth-legal { margin: 1.5rem 0 0; font-size: 0.8125rem; color: var(--napa-stone); }
.napa-auth-head { margin-bottom: 1.75rem; }
.napa-auth-head h1 { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
.napa-auth-head p { margin: 0.5rem 0 0; color: var(--napa-stone); }

/* ---------- 5. Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0.6rem 1.25rem;
    font-family: var(--napa-font);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    border-width: 1px;
    box-shadow: none !important;
    background-image: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn.btn-block { display: flex; }
.btn.dropdown-toggle::after { margin-left: 0.25rem; }
.btn:focus-visible { outline: 2px solid var(--napa-accent-soft); outline-offset: 2px; }
.btn-sm, .btn-group-sm > .btn { min-height: 2.25rem; padding: 0.4rem 0.85rem; font-size: 0.875rem; }
.btn-xs { min-height: 1.85rem; padding: 0.2rem 0.6rem; font-size: 0.8125rem; }
.btn-lg, .btn-group-lg > .btn { min-height: 3.25rem; padding: 0.85rem 1.75rem; font-size: 1rem; }
.input-group > .input-group-append > .btn,
.input-group > .input-group-prepend > .btn { min-height: 0; }
.btn-group > .btn, .btn-group-vertical > .btn { min-height: 0; }

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: var(--napa-accent);
    border-color: var(--napa-accent);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:hover {
    color: #fff;
    background-color: var(--napa-accent-dark);
    border-color: var(--napa-accent-dark);
}
.btn-primary.disabled, .btn-primary:disabled { color: #fff; background-color: var(--napa-accent); border-color: var(--napa-accent); }

.btn-default, .btn-secondary, .btn-light, .btn-outline-secondary {
    color: var(--napa-ink);
    background-color: #fff;
    border-color: var(--napa-line-strong);
}
.btn-default:hover, .btn-default:focus, .btn-default.focus,
.btn-secondary:hover, .btn-secondary:focus,
.btn-light:hover, .btn-light:focus,
.btn-outline-secondary:hover, .btn-outline-secondary:focus,
.btn-default:not(:disabled):not(.disabled):active,
.btn-default:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled):active {
    color: var(--napa-accent);
    background-color: #fff;
    border-color: var(--napa-accent);
}

.btn-outline-primary { color: var(--napa-accent); background-color: #fff; border-color: var(--napa-accent); }
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: var(--napa-accent);
    border-color: var(--napa-accent);
}

.btn-dark, .btn-info {
    color: #fff;
    background-color: var(--napa-ink);
    border-color: var(--napa-ink);
}
.btn-dark:hover, .btn-dark:focus, .btn-info:hover, .btn-info:focus,
.btn-dark:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: var(--napa-ink-2);
    border-color: var(--napa-ink-2);
}

.btn-success { color: #fff; background-color: var(--napa-success); border-color: var(--napa-success); }
.btn-success:hover, .btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active { color: #fff; background-color: #065f46; border-color: #065f46; }

.btn-warning { color: #fff; background-color: var(--napa-warning); border-color: var(--napa-warning); }
.btn-warning:hover, .btn-warning:focus { color: #fff; background-color: #854d0e; border-color: #854d0e; }

.btn-danger, .btn-outline-danger { color: var(--napa-danger); background-color: #fff; border-color: rgba(185, 28, 28, 0.35); }
.btn-danger:hover, .btn-danger:focus, .btn-outline-danger:hover, .btn-outline-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active { color: #fff; background-color: var(--napa-danger); border-color: var(--napa-danger); }

.btn-white { color: var(--napa-accent-dark); background-color: #fff; border-color: #fff; }
.btn-white:hover, .btn-white:focus { color: var(--napa-accent-dark); background-color: var(--napa-paper); border-color: var(--napa-paper); }
.btn-outline-light { color: #fff; border-color: rgba(255, 255, 255, 0.35); background: transparent; }
.btn-outline-light:hover, .btn-outline-light:focus { color: var(--napa-ink); background-color: #fff; border-color: #fff; }

.btn-link { color: var(--napa-accent); font-weight: 600; }
.btn-link:hover, .btn-link:focus { color: var(--napa-accent-dark); }

/* ---------- 6. Cards & panels ---------- */
.card,
.primary-content .card,
body .primary-content .card,
.mc-promo-manage, .mc-promo-login {
    background: #fff;
    border: 1px solid var(--napa-line);
    box-shadow: none;
}
.primary-content .card, body .primary-content .card { margin-bottom: 1.5rem; }
.card-header {
    padding: 1.1rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid var(--napa-line);
}
.card-header .card-title,
.primary-content .card-header .card-title { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.card-body, .primary-content .card-body { padding: 1.5rem; }
@media (min-width: 768px) { .card-body, .primary-content .card-body { padding: 1.75rem; } }
.primary-content .card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.25rem; }
.card-footer {
    padding: 1rem 1.5rem;
    background: #fcfcfd;
    border-top: 1px solid var(--napa-line);
}
.card-footer:empty { display: none; }

/* Coloured accent strips used by dashboard panels: one brand colour */
.card[class*="card-accent-"] { border-top: 3px solid var(--napa-accent) !important; }
.card-accent-red, .card-accent-pomegranate { border-top-color: var(--napa-danger) !important; }
[class*="bg-color-"] { background-color: var(--napa-accent) !important; color: #fff !important; border-color: var(--napa-accent) !important; }
.btn.btn-default[class*="bg-color-"] { background-color: #fff !important; color: var(--napa-accent) !important; border-color: var(--napa-line-strong) !important; }
.btn.btn-default[class*="bg-color-"]:hover { border-color: var(--napa-accent) !important; }

/* Context sidebar panels (Your Info, Actions, Filter, ...) */
.napa-context .card-sidebar { margin-bottom: 1.25rem; }
.card-sidebar .card-header { padding: 0.9rem 1.25rem; }
.card-sidebar .card-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--napa-stone); }
.card-sidebar .card-title i:not(.card-minimise) { color: var(--napa-accent); }
.card-sidebar .card-minimise { color: var(--napa-stone); cursor: pointer; }
.card-sidebar .card-body { padding: 1.25rem; font-size: 0.9375rem; }
.card-sidebar .card-footer { padding: 0.9rem 1.25rem; }

.list-group-item {
    padding: 0.7rem 1.25rem;
    color: var(--napa-ink);
    background: #fff;
    border-color: var(--napa-line);
    font-size: 0.9375rem;
}
.list-group-flush > .list-group-item { border-left: 0; border-right: 0; }
.list-group-item-action:hover, .list-group-item-action:focus { color: var(--napa-accent); background-color: var(--napa-paper); text-decoration: none; }
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    z-index: 1;
    color: var(--napa-accent);
    background-color: var(--napa-accent-tint);
    border-color: var(--napa-line);
    box-shadow: inset 3px 0 0 var(--napa-accent);
    font-weight: 600;
}
.list-group-item.disabled { color: var(--napa-stone); }
.list-group-item .badge, .sidebar-menu-item-badge .badge { background: var(--napa-paper); color: var(--napa-ink); }
.list-group-item.active .badge { background: var(--napa-accent); color: #fff; }
.sidebar-menu-item-icon { color: var(--napa-stone); }
.list-group-item.active .sidebar-menu-item-icon { color: var(--napa-accent); }

/* Dashboard stat tiles */
.tiles { margin-bottom: 2rem !important; }
.tiles .row { margin: 0 -0.625rem; }
.tiles .row > div { padding: 0 0.625rem 1.25rem; }
.tiles .tile,
.tiles .row > div:last-child .tile,
.tiles div:nth-child(1) > .tile,
.tiles div:nth-child(2) > .tile {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.4rem;
    height: 100%;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid var(--napa-line);
    color: var(--napa-ink);
    transition: border-color 0.2s ease;
}
.tiles .tile:hover { background: #fff; border-color: var(--napa-accent); text-decoration: none; }
.tiles .tile i,
.tiles .tile:hover i {
    position: static;
    grid-column: 1;
    grid-row: 1;
    font-size: 0.95rem;
    color: var(--napa-accent);
}
.tiles .tile .title { grid-column: 2; grid-row: 1; margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; color: var(--napa-stone); }
.tiles .tile .stat { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--napa-ink); }
.tiles .tile .highlight { display: none; }

.client-home-cards .card { margin-bottom: 1.5rem; }
.client-home-cards .card-header .btn { min-height: 0; }

/* Nexus styles these with high specificity; bring them back to the brand */
body .sidebar .btn-success,
body .primary-content .client-home-cards .card .btn-success {
    color: #fff;
    background: var(--napa-accent);
    border-color: var(--napa-accent);
}
body .sidebar .btn-success:hover, body .sidebar .btn-success:focus,
body .primary-content .client-home-cards .card .btn-success:hover,
body .primary-content .client-home-cards .card .btn-success:focus {
    color: #fff;
    background: var(--napa-accent-dark);
    border-color: var(--napa-accent-dark);
}
body .sidebar .btn-default { border-color: var(--napa-line-strong); }
body .primary-content .client-home-cards .card { border-top-width: 3px; }
body .primary-content .client-home-cards .card .card-header { padding: 1rem 1.25rem; }
body .primary-content .client-home-cards .card .card-header .btn {
    min-height: 0;
    padding: 0.3rem 0.7rem;
    font-size: 0.8125rem;
    color: var(--napa-ink);
    background: #fff;
    border: 1px solid var(--napa-line-strong);
}
body .primary-content .client-home-cards .card .card-header .btn:hover {
    color: var(--napa-accent);
    background: #fff;
    border-color: var(--napa-accent);
}
body .primary-content .client-home-cards .card .card-body { padding: 0.25rem 0.5rem 0.75rem; }
body .primary-content .client-home-cards .card .card-body p { padding: 0.5rem 0.75rem; margin: 0; }
body .primary-content .client-home-cards .card .card-body form { padding: 0.5rem 0.75rem; }
body .primary-content .client-home-cards .card .card-footer { padding: 0.75rem 1.25rem; background: #fff; }
body .primary-content .client-home-cards .card .card-footer .btn-view-more { color: var(--napa-accent); font-weight: 600; }
.client-home-cards .list-group { border-top: 1px solid var(--napa-line) !important; border-bottom: 1px solid var(--napa-line) !important; }
body .primary-content .client-home-cards .card .list-group .list-group-item { padding: 0.6rem 1.25rem; }
body .sidebar .list-group-item .badge { color: var(--napa-ink); }

/* Dropdowns, modals, popovers, tooltips */
.dropdown-menu {
    padding: 0.4rem 0;
    border: 1px solid var(--napa-line);
    box-shadow: var(--napa-shadow);
    font-size: 0.9375rem;
}
.dropdown-item { padding: 0.5rem 1rem; color: var(--napa-ink); }
.dropdown-item:hover, .dropdown-item:focus { color: var(--napa-accent); background-color: var(--napa-paper); }
.dropdown-item.active, .dropdown-item:active { color: #fff; background-color: var(--napa-accent); }
.dropdown-divider { border-top-color: var(--napa-line); }

.modal-content { border: 0; box-shadow: 0 30px 60px -20px rgba(12, 12, 14, 0.35); }
.modal-header { padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--napa-line); }
.modal-title { font-weight: 700; }
.modal-body { padding: 1.5rem; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--napa-line); background: #fcfcfd; }
.modal-backdrop.show { opacity: 0.55; background: var(--napa-ink); }

.popover { border-color: var(--napa-line); box-shadow: var(--napa-shadow); font-family: var(--napa-font); }
.popover-header { background: #fcfcfd; border-bottom-color: var(--napa-line); font-weight: 700; }
.tooltip-inner { background: var(--napa-ink); font-size: 0.8125rem; padding: 0.4rem 0.65rem; }
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--napa-ink); }
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: var(--napa-ink); }

/* Tabs & pills */
.nav-tabs { border-bottom: 1px solid var(--napa-line); }
.nav-tabs .nav-link {
    margin-bottom: -1px;
    padding: 0.75rem 1.1rem;
    font-weight: 600;
    color: var(--napa-stone);
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { color: var(--napa-ink); border-bottom-color: var(--napa-line-strong); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: var(--napa-accent);
    background: none;
    border-bottom-color: var(--napa-accent);
}
.nav-pills .nav-link { color: var(--napa-stone); font-weight: 600; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff; background-color: var(--napa-accent); }

/* Pagination */
.pagination { gap: 0.25rem; }
.page-link,
.pagination > li > a, .pagination > li > span {
    min-width: 2.25rem;
    text-align: center;
    color: var(--napa-ink);
    background: #fff;
    border: 1px solid var(--napa-line);
    margin-left: 0 !important;
    font-weight: 600;
}
.page-link:hover, .page-link:focus { color: var(--napa-accent); background: #fff; border-color: var(--napa-accent); box-shadow: none; }
.page-item.active .page-link,
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus,
.pagination > .active > span {
    color: #fff;
    background-color: var(--napa-accent);
    border-color: var(--napa-accent);
}
.page-item.disabled .page-link { color: var(--napa-stone); background: #fff; border-color: var(--napa-line); }

.progress { height: 0.6rem; background: var(--napa-mist); }
.progress-bar { background-color: var(--napa-accent); }
.progress-bar.bg-success { background-color: var(--napa-success) !important; }
.progress-bar.bg-warning { background-color: var(--napa-warning) !important; }
.progress-bar.bg-danger { background-color: var(--napa-danger) !important; }

/* ---------- 7. Forms ---------- */
label, .form-control-label, .col-form-label { font-size: 0.875rem; font-weight: 600; color: var(--napa-ink); }
.form-control,
.custom-select,
select.form-control {
    min-height: 2.875rem;
    height: auto;
    padding: 0.6rem 0.85rem;
    font-size: 1rem;
    color: var(--napa-ink);
    background-color: #fff;
    border: 1px solid var(--napa-line-strong);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.custom-select, select.form-control {
    padding-right: 2.25rem;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b21b6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
}
select[multiple].form-control, select[size].form-control { background-image: none !important; padding-right: 0.85rem; }
.form-control-sm, .input-group-sm > .form-control { min-height: 2.25rem; padding: 0.35rem 0.7rem; font-size: 0.875rem; }
.form-control-lg, .input-group-lg > .form-control { min-height: 3.5rem; font-size: 1.125rem; }
textarea.form-control { min-height: 8rem; line-height: 1.5; }
.form-control:hover, .custom-select:hover { border-color: rgba(12, 12, 14, 0.35); }
.form-control:focus, .custom-select:focus {
    border-color: var(--napa-accent);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
    outline: none;
}
.form-control::placeholder { color: #9b9aa6; }
.form-control:disabled, .form-control[readonly] { background-color: var(--napa-paper); }
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: var(--napa-danger); }
.invalid-feedback { color: var(--napa-danger); font-weight: 600; }
.form-text, .help-block { color: var(--napa-stone); font-size: 0.8125rem; }
.form-group { margin-bottom: 1.25rem; }

.input-group-text {
    color: var(--napa-stone);
    background-color: var(--napa-paper);
    border-color: var(--napa-line-strong);
}
.input-group > .form-control:focus { z-index: 3; }
.input-group .btn-reveal-pw { border-color: var(--napa-line-strong); border-left: 0; color: var(--napa-stone); background: #fff; }
.input-group .btn-reveal-pw:hover { color: var(--napa-accent); background: #fff; }
.input-group-merge .form-control:focus + .input-group-append .btn,
.input-group-merge .input-group-prepend + .form-control:focus { border-color: var(--napa-accent); }

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--napa-accent);
    background-color: var(--napa-accent);
}
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18); }
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--napa-accent); }
.custom-control-label::before { border-color: var(--napa-line-strong); }
.custom-switch .custom-control-label::after { background-color: var(--napa-stone); }
.custom-switch .custom-control-input:checked ~ .custom-control-label::after { background-color: #fff; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--napa-accent); }

.bootstrap-switch { border-color: var(--napa-line-strong); }
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success { background: var(--napa-accent); color: #fff; }
.bootstrap-switch.bootstrap-switch-focused { border-color: var(--napa-accent); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18); }

.password-strength-meter .progress { height: 0.35rem; }
.intl-tel-input .country-list { border: 1px solid var(--napa-line); box-shadow: var(--napa-shadow); }

/* ---------- 8. Alerts & banners ---------- */
.alert {
    position: relative;
    padding: 1rem 1.25rem;
    color: var(--napa-ink);
    background: #fff;
    border: 1px solid var(--napa-line);
    border-left-width: 4px;
    font-size: 0.9375rem;
}
.alert-success { border-left-color: var(--napa-success); background: var(--napa-success-tint); }
.alert-danger, .alert-error { border-left-color: var(--napa-danger); background: var(--napa-danger-tint); }
.alert-warning { border-left-color: var(--napa-warning); background: var(--napa-warning-tint); }
.alert-info, .alert-primary { border-left-color: var(--napa-accent); background: var(--napa-info-tint); }
.alert-secondary, .alert-light, .alert-dark { border-left-color: var(--napa-stone); }
.alert-success > i:first-child, .alert-success .fas, .alert-success .far { color: var(--napa-success); }
.alert-danger > i:first-child, .alert-danger .fas, .alert-danger .far { color: var(--napa-danger); }
.alert-warning > i:first-child, .alert-warning .fas, .alert-warning .far { color: var(--napa-warning); }
.alert-info > i:first-child, .alert-info .fas, .alert-info .far { color: var(--napa-accent); }
.alert-link, .alert a:not(.btn) { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.alert .close { opacity: 0.5; }

/* Network-status alert spans the top of the main column */
.napa-main > .network-issue-alert {
    margin: 0;
    border-width: 0 0 1px;
    border-left: 0;
    font-weight: 600;
}
.napa-main > .network-issue-alert .container { max-width: 80rem; padding: 0 2rem; }

/* Email-verification / validation banners: flat violet strip like the portal */
.verification-banner {
    padding: 0.6rem 0;
    background: var(--napa-accent-dark);
    border: 0;
    color: #f3f2f8;
    font-weight: 500;
}
.verification-banner .container { max-width: 80rem; padding: 0 2rem; }
.verification-banner .fas,
.verification-banner .fal,
.verification-banner .far { color: var(--napa-violet-300); font-size: 1.1rem; padding-top: 0.45rem; }
.verification-banner .btn {
    min-height: 0;
    padding: 0.4rem 0.85rem;
    color: var(--napa-accent-dark);
    background: #fff;
    border-color: #fff;
    font-weight: 700;
}
.verification-banner .btn:hover { color: var(--napa-accent-dark); background: var(--napa-paper); }
.verification-banner.email-verification .btn.btn-action,
.verification-banner.email-verification .btn.btn-action:active,
.verification-banner.email-verification .btn.btn-action[disabled]:hover,
.verification-banner.user-validation .btn.btn-action {
    color: var(--napa-accent-dark);
    background-color: #fff;
    border-color: #fff;
}
.verification-banner.email-verification .btn.btn-action:hover,
.verification-banner.user-validation .btn.btn-action:hover { background-color: var(--napa-paper); border-color: var(--napa-paper); }
@media (min-width: 768px) {
    .verification-banner .fas, .verification-banner .fal, .verification-banner .far { font-size: 1.1rem; }
}
.md-editor, .md-editor > textarea.markdown-editor, .md-editor > .md-preview { border-color: var(--napa-line) !important; }
.verification-banner .btn.close { color: rgba(255, 255, 255, 0.7); background: none; border: 0; text-shadow: none; }
.verification-banner .btn.close:hover { color: #fff; }

/* ---------- 9. Badges & status labels ---------- */
.badge {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.badge-primary, .badge-info { color: var(--napa-accent); background-color: var(--napa-accent-tint); }
.badge-secondary, .badge-light, .badge-default { color: var(--napa-stone); background-color: var(--napa-paper); }
.badge-dark { color: #fff; background-color: var(--napa-ink); }
.badge-success { color: var(--napa-success); background-color: var(--napa-success-tint); }
.badge-warning { color: var(--napa-warning); background-color: var(--napa-warning-tint); }
.badge-danger { color: var(--napa-danger); background-color: var(--napa-danger-tint); }

/* Status pills on services, domains, invoices, tickets, quotes: tinted with a square dot */
.label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    margin-bottom: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--napa-stone);
    background-color: var(--napa-paper);
}
.label.status::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    background: currentColor;
    flex-shrink: 0;
}
.label-success, .status-active, .status-open, .status-completed, .status-paid,
.status-accepted, .status-delivered { color: var(--napa-success); background-color: var(--napa-success-tint); }
.label-danger, .status-unpaid, .status-fraud, .status-overdue, .status-lost, .status-dead,
.status-collections { color: var(--napa-danger); background-color: var(--napa-danger-tint); }
.label-warning, .status-pending, .status-pending-transfer, .status-suspended, .status-customer-reply,
.status-pending-registration, .status-redemption, .status-grace, .status-inprogress, .status-refunded,
.status-payment-pending { color: var(--napa-warning); background-color: var(--napa-warning-tint); }
.label-info, .status-answered, .status-onhold, .status-draft { color: var(--napa-accent); background-color: var(--napa-accent-tint); }
.label-default, .status-expired, .status-transferred-away, .status-terminated, .status-closed,
.status-cancelled { color: var(--napa-stone); background-color: var(--napa-paper); }
/* Custom ticket statuses set an inline background colour; keep it readable */
.label.status-custom { color: #fff; }

/* ---------- 10. Tables ---------- */
.table { color: var(--napa-ink); font-size: 0.9375rem; }
.table th, .table td { padding: 0.9rem 1.25rem; border-top: 0; border-bottom: 1px solid var(--napa-line); vertical-align: middle; }
.table thead th,
.dataTables_wrapper table.table-list thead th {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--napa-stone);
    background: #fcfcfd;
    border-bottom: 1px solid var(--napa-line);
    white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table-striped tbody tr:nth-of-type(odd) { background-color: #fcfcfd; }
.table-hover tbody tr:hover, table.table-list tbody tr:hover td { background-color: #fbfafd; }
.table-bordered, .table-bordered th, .table-bordered td { border-color: var(--napa-line); }
.table-container, .table-responsive { background: #fff; }

.dataTables_wrapper table.table-list {
    margin: 0 !important;
    background: #fff;
    border: 1px solid var(--napa-line);
}
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc { color: var(--napa-ink); background-color: #fcfcfd; }
.dataTables_wrapper .dataTables_filter label .form-control { min-height: 2.5rem; }
.dataTables_wrapper .dataTables_info { color: var(--napa-stone); font-size: 0.875rem; }
.dataTables_wrapper .dataTables_length select { min-height: 2.25rem; }
table.table-list tbody tr td { cursor: pointer; }

/* Status filter buttons above lists */
.view-filter-btns .list-group-item,
.view-filter-btns a { font-weight: 600; }

/* ---------- 11. Page-specific ---------- */
/* Homepage hero (logged out and logged in) */
.napa-hero { padding: 3.5rem 0 3rem; background: var(--napa-ink); color: #fff; }
@media (min-width: 992px) { .napa-hero { padding: 5rem 0 4rem; } }
.napa-hero h1 { margin: 1rem 0 0; color: #fff; font-size: 2.5rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; }
@media (min-width: 768px) { .napa-hero h1 { font-size: 3.5rem; } }
.napa-hero h1 span { color: var(--napa-violet-300); }
.napa-hero-lead { margin: 1rem 0 0; max-width: 40rem; color: rgba(255, 255, 255, 0.7); font-size: 1.125rem; }
.napa-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.napa-domain-search { max-width: 48rem; margin-top: 2.25rem; }
.napa-domain-search .input-group { flex-wrap: nowrap; background: #fff; }
.napa-domain-search .form-control {
    min-height: 3.75rem;
    padding-left: 1.25rem;
    font-size: 1.125rem;
    border: 0;
}
.napa-domain-search .form-control:focus { box-shadow: inset 0 0 0 2px var(--napa-accent-soft); }
.napa-domain-search .input-group-append .btn { min-height: 3.75rem; padding: 0 1.75rem; border: 0; }
.napa-domain-search .input-group-append .btn-dark { background: var(--napa-ink-2); }
.napa-domain-search-mobile { margin-top: 0.5rem; gap: 0.5rem; }
.napa-domain-search-mobile .btn-dark { background: var(--napa-ink-2); border-color: rgba(255, 255, 255, 0.2); }
.napa-domain-search-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-top: 1rem; }
.napa-tld-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.7); }
.napa-tld-list strong { color: #fff; margin-right: 0.25rem; }
.napa-link-light { color: var(--napa-violet-300); font-weight: 700; font-size: 0.9375rem; }
.napa-link-light:hover, .napa-link-light:focus { color: #fff; text-decoration: none; }
.napa-domain-search .recaptcha-container { margin-top: 1rem; }

/* Homepage sections */
.napa-section + .napa-section { margin-top: 3.5rem; }
.napa-section-head { margin-bottom: 1.25rem; }
.napa-section-head h2 { margin: 0.4rem 0 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; }
.napa-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .napa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .napa-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .napa-grid-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .napa-grid-links { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.napa-product-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.75rem;
    background: #fff;
    border: 1px solid var(--napa-line);
    border-top: 4px solid var(--napa-accent);
    color: var(--napa-ink);
}
.napa-product-card h3 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.napa-product-card p { margin: 0; flex: 1; color: var(--napa-stone); }
.napa-arrow-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--napa-accent); transition: gap 0.2s ease; }
.napa-arrow-link:hover, .napa-arrow-link:focus { gap: 0.7rem; color: var(--napa-accent-dark); text-decoration: none; }
.napa-link-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid var(--napa-line);
    color: var(--napa-ink);
    font-weight: 700;
    transition: border-color 0.2s ease;
}
.napa-link-card i { font-size: 1.25rem; color: var(--napa-accent); }
.napa-link-card:hover, .napa-link-card:focus { color: var(--napa-ink); border-color: var(--napa-accent); text-decoration: none; }

/* Knowledgebase, announcements, downloads */
.kb-category .card-body, .primary-content .card.kb-category { border-color: var(--napa-line); }
.kb-article-content, .announcement-single .card-body { font-size: 1.0625rem; line-height: 1.7; }
.kb-article-title, .announcement-title { font-weight: 800; letter-spacing: -0.02em; }

/* Ticket conversations */
.ticket-reply { border: 1px solid var(--napa-line); background: #fff; margin-bottom: 1rem; }
.ticket-reply .posted-by { background: #fcfcfd; border-bottom: 1px solid var(--napa-line); }
.ticket-reply.staff { border-left: 4px solid var(--napa-accent); }
.ticket-reply .requestor-type-operator { background: var(--napa-accent); }
.requestor-badge, .requestor-type-operator, .requestor-type-owner, .requestor-type-user, .requestor-type-guest { font-weight: 700; }

/* Product details */
.product-details .product-icon { background: var(--napa-paper); border: 1px solid var(--napa-line); }
.product-details .product-icon .fa-stack .fa-circle { color: var(--napa-accent); }
.product-status-active { background: var(--napa-success); }

/* Markdown editor */
.md-editor > .md-header, .md-editor .md-footer { background: #fcfcfd; border-color: var(--napa-line); }
.md-editor.active { border-color: var(--napa-accent); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18); }

/* Fullpage overlay spinner */
#fullpage-overlay { background: rgba(12, 12, 14, 0.75); }

/* Invoice page (standalone; loads this file too) */
.invoice-container { max-width: 62rem; margin: 2.5rem auto; padding: 2.5rem; background: #fff; border: 1px solid var(--napa-line); }
.invoice-container .invoice-header { border-bottom: 1px solid var(--napa-line); }
.invoice-container .invoice-status .paid { color: var(--napa-success); }
.invoice-container .invoice-status .unpaid, .invoice-container .invoice-status .overdue { color: var(--napa-danger); }
.invoice-container .invoice-status .cancelled, .invoice-container .invoice-status .refunded { color: var(--napa-stone); }
.invoice-container .invoice-status .collections { color: var(--napa-warning); }
.invoice-container .card-header { background: #fcfcfd; }

/* ---------- 12. Cart / order forms ---------- */
/* Standard Cart and Nexus Cart pick up the Nexus variables above; these rules
   cover the parts they hard-code. */
#order-standard_cart .header-lined h1,
#order-standard_cart h1 { font-weight: 800; letter-spacing: -0.02em; }
#order-standard_cart .panel,
#order-standard_cart .card,
#order-standard_cart .product,
#order-standard_cart .order-summary,
#order-standard_cart .view-cart-items,
#order-standard_cart .sub-heading span { border-color: var(--napa-line); }
#order-standard_cart .order-summary { background: var(--napa-ink); border: 0; }
#order-standard_cart .order-summary h2 { background: none; color: #fff; font-weight: 700; }
#order-standard_cart .summary-container { background: #fff; border: 1px solid var(--napa-line); }
#order-standard_cart .view-cart-items-header { background: var(--napa-ink); color: #fff; }
#order-standard_cart .products .product header { background: #fcfcfd; border-bottom: 1px solid var(--napa-line); }
#order-standard_cart .products .product header span { color: var(--napa-ink); font-weight: 700; }
#order-standard_cart .products .product div.product-pricing span.price { color: var(--napa-accent); font-weight: 800; }
#order-standard_cart .sub-heading span { color: var(--napa-stone); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.8125rem; background: var(--napa-paper); }
#order-standard_cart .btn-checkout,
#order-standard_cart .btn-primary,
#order-standard_cart .btn-success { color: #fff; background: var(--napa-accent); border-color: var(--napa-accent); }
#order-standard_cart .btn-checkout:hover,
#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn-success:hover { background: var(--napa-accent-dark); border-color: var(--napa-accent-dark); }
#order-standard_cart .domain-checker-container { background: var(--napa-ink); background-image: none; }
#order-standard_cart .domain-checker-bg { background-image: none !important; }
#order-standard_cart .field-container, #order-standard_cart .domain-selection-options .option { border-color: var(--napa-line); }
#order-standard_cart .domain-selection-options .option-selected { background: var(--napa-accent-tint); border-color: var(--napa-accent); }
#order-standard_cart .cart-sidebar .list-group-item.active { color: var(--napa-accent); }
#order-standard_cart .secure-warning { background: var(--napa-paper); border-color: var(--napa-line); color: var(--napa-stone); }
#order-standard_cart .order-summary .total-due-today .amt,
#order-standard_cart #totalDueToday { color: #fff; font-weight: 800; }
#order-standard_cart .order-summary .summary-totals,
#order-standard_cart .order-summary .product-name { color: rgba(255, 255, 255, 0.85); }
#order-standard_cart .order-summary .summary-container { color: var(--napa-ink); }
#order-standard_cart .order-summary .summary-container .product-name { color: var(--napa-ink); }
#order-standard_cart .order-summary .summary-container .summary-totals { color: var(--napa-ink); }

/* ---------- Print ---------- */
@media print {
    .napa-topbar, .napa-sidebar, .napa-backdrop, .napa-footer, .verification-banner, .network-issue-alert, .napa-context { display: none !important; }
    .napa-main { margin-left: 0 !important; }
    section#main-body { padding: 0; background: #fff; }
}