/* ==========================================================================
   Neon Noir Theme — Dark mode with neon green + hot pink accents
   Overrides Bootstrap 5 defaults for the Autotix dashboard.
   ========================================================================== */

:root {
    --nn-green: #00ff87;
    --nn-green-dark: #00cc6a;
    --nn-green-hover: #33ffaa;
    --nn-pink: #ff006e;
    --nn-pink-hover: #ff3389;
    --nn-purple: #a78bfa;
    --nn-amber: #fbbf24;

    --nn-bg: #0a0a0b;
    --nn-surface: #141416;
    --nn-surface-alt: #0e0e10;
    --nn-border: #2a2a2e;
    --nn-border-hover: #3a3a3e;

    --nn-text: #e4e4e7;
    --nn-text-muted: #a1a1aa;
    --nn-text-faint: #71717a;

    /* Override Bootstrap color variables to eliminate default blue */
    --bs-primary: #00ff87;
    --bs-primary-rgb: 0, 255, 135;
    --bs-secondary: #a1a1aa;
    --bs-secondary-rgb: 161, 161, 170;
    --bs-success: #00ff87;
    --bs-success-rgb: 0, 255, 135;
    --bs-info: #a78bfa;
    --bs-info-rgb: 167, 139, 250;
    --bs-warning: #fbbf24;
    --bs-warning-rgb: 251, 191, 36;
    --bs-danger: #ff006e;
    --bs-danger-rgb: 255, 0, 110;
    --bs-light: #141416;
    --bs-light-rgb: 20, 20, 22;
    --bs-dark: #141416;
    --bs-dark-rgb: 20, 20, 22;
    --bs-body-color: #e4e4e7;
    --bs-body-color-rgb: 228, 228, 231;
    --bs-body-bg: #0a0a0b;
    --bs-body-bg-rgb: 10, 10, 11;
    --bs-link-color: #00ff87;
    --bs-link-hover-color: #33ffaa;
}

/* ---------- Global ---------- */

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

::selection { background: rgba(0, 255, 135, 0.2); color: #fff; }

body {
    background-color: var(--nn-bg);
    color: var(--nn-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

a { color: var(--nn-green); }
a:hover { color: var(--nn-green-hover); }

body code, body pre, body .font-monospace {
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

hr { border-color: var(--nn-border); opacity: 1; }

/* ---------- Navbar ---------- */

body .navbar {
    background: rgba(10, 10, 11, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--nn-border);
    transition: all 300ms;
    position: relative;
    z-index: 1030;
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: -0.02em;
}
.navbar-brand i { color: var(--nn-green); }

body .navbar-dark .navbar-nav .nav-link {
    color: var(--nn-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 200ms, text-shadow 200ms;
}
body .navbar-dark .navbar-nav .nav-link:hover,
body .navbar-dark .navbar-nav .nav-link.active {
    color: var(--nn-text);
    text-shadow: 0 0 12px rgba(0, 255, 135, 0.3);
}

body .dropdown-menu {
    background: var(--nn-surface);
    border: 1px solid var(--nn-border);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
body .dropdown-item {
    color: var(--nn-text-muted);
    font-size: 0.875rem;
    transition: all 150ms;
}
body .dropdown-item:hover, body .dropdown-item:focus {
    background: rgba(0, 255, 135, 0.08);
    color: var(--nn-text);
}
body .dropdown-divider { border-color: var(--nn-border); }
body .dropdown-header { color: var(--nn-text-faint); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- Cards ---------- */

body .card {
    background: rgba(20, 20, 22, 0.6);
    border: 1px solid var(--nn-border);
    border-radius: 0.75rem;
    transition: all 300ms;
}
body .card:hover {
    border-color: var(--nn-border-hover);
}

body .card-header {
    background: rgba(20, 20, 22, 0.8);
    border-bottom: 1px solid var(--nn-border);
    color: var(--nn-text);
    font-weight: 600;
    font-size: 0.9rem;
}

body .card-body { color: var(--nn-text); }
body .card-footer { background: rgba(20, 20, 22, 0.5); border-top: 1px solid var(--nn-border); }

body .shadow-sm { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }

/* ---------- Buttons ---------- */

body .btn-primary {
    background: var(--nn-green);
    border-color: var(--nn-green);
    color: #000;
    font-weight: 700;
    box-shadow: 0 0 20px rgba(0, 255, 135, 0.15);
    transition: all 200ms;
}
body .btn-primary:hover, body .btn-primary:focus {
    background: var(--nn-green-hover);
    border-color: var(--nn-green-hover);
    color: #000;
    box-shadow: 0 0 30px rgba(0, 255, 135, 0.35);
    transform: translateY(-1px);
}

body .btn-outline-primary {
    color: var(--nn-green);
    border-color: var(--nn-green);
}
body .btn-outline-primary:hover {
    background: var(--nn-green);
    color: #000;
    box-shadow: 0 0 20px rgba(0, 255, 135, 0.2);
}

body .btn-outline-secondary {
    color: var(--nn-text-muted);
    border-color: var(--nn-border-hover);
    transition: all 200ms;
}
body .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--nn-text-muted);
    color: var(--nn-text);
}

body .btn-outline-danger {
    color: var(--nn-pink);
    border-color: var(--nn-pink);
}
body .btn-outline-danger:hover {
    background: var(--nn-pink);
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 0, 110, 0.3);
}

body .btn-danger {
    background: var(--nn-pink);
    border-color: var(--nn-pink);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 15px rgba(255, 0, 110, 0.15);
}
body .btn-danger:hover {
    background: var(--nn-pink-hover);
    border-color: var(--nn-pink-hover);
    box-shadow: 0 0 25px rgba(255, 0, 110, 0.35);
    transform: translateY(-1px);
}

/* ---------- Badges ---------- */

body .badge.bg-primary { background: var(--nn-green); color: #000; }
body .badge.bg-success { background: rgba(0, 255, 135, 0.15); color: #000; border: 1px solid rgba(0, 255, 135, 0.3); }
body .badge.bg-danger { background: rgba(255, 0, 110, 0.15); color: var(--nn-pink); border: 1px solid rgba(255, 0, 110, 0.3); }
body .badge.bg-warning { background: rgba(251, 191, 36, 0.15); color: var(--nn-amber); border: 1px solid rgba(251, 191, 36, 0.3); }
body .badge.bg-secondary { background: rgba(113, 113, 122, 0.15); color: var(--nn-text-muted); border: 1px solid rgba(113, 113, 122, 0.3); }
body .badge.bg-info { background: rgba(167, 139, 250, 0.15); color: var(--nn-purple); border: 1px solid rgba(167, 139, 250, 0.3); }

/* Billing nav — plan badge + upgrade label */
.nn-badge-plan { background: rgba(113, 113, 122, 0.3); color: #fff; border: 1px solid rgba(113, 113, 122, 0.3); }
.nn-upgrade { color: #fff; }

/* ---------- Forms ---------- */

body .form-control, body .form-select {
    background-color: var(--nn-bg);
    border: 1px solid var(--nn-border);
    color: var(--nn-text);
    border-radius: 0.5rem;
    transition: border-color 200ms;
}
body .form-control:focus, body .form-select:focus {
    border-color: var(--nn-green);
    box-shadow: 0 0 0 2px rgba(0, 255, 135, 0.15);
}
body .form-control::placeholder { color: var(--nn-text-faint); }
body .form-control:disabled, body .form-control[readonly] {
    background-color: var(--nn-surface);
    color: var(--nn-text-muted);
    opacity: 0.8;
}

body .input-group-text {
    background-color: var(--nn-surface);
    border: 1px solid var(--nn-border);
    color: var(--nn-text-muted);
}

body .form-label {
    color: var(--nn-text-muted);
    font-size: 0.8rem;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body .form-text { color: var(--nn-text-faint); }

body .form-check-input {
    background-color: var(--nn-bg);
    border-color: var(--nn-border);
}
body .form-check-input:checked {
    background-color: var(--nn-green);
    border-color: var(--nn-green);
}
body .form-check-input:focus { box-shadow: 0 0 0 2px rgba(0, 255, 135, 0.15); }
body .form-check-label { color: var(--nn-text); }

/* ---------- Tables ---------- */

body .table { color: var(--nn-text); --bs-table-bg: transparent; }
body .table > :not(caption) > * > * { border-bottom-color: var(--nn-border); }
body .table > thead { border-bottom: 2px solid var(--nn-border); }

body .table-light, body thead.table-light > tr > th {
    background-color: rgba(20, 20, 22, 0.8);
    color: var(--nn-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'JetBrains Mono', monospace;
    border-color: var(--nn-border);
}

body .table-hover > tbody > tr:hover > * {
    background-color: rgba(0, 255, 135, 0.03);
    color: var(--nn-text);
}

body .table-secondary > * { background-color: rgba(20, 20, 22, 0.4); }

/* ---------- Alerts ---------- */

body .alert {
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

body .alert-success {
    background: rgba(0, 255, 135, 0.1);
    color: var(--nn-green);
    border-color: rgba(0, 255, 135, 0.25);
}

body .alert-danger {
    background: rgba(255, 0, 110, 0.1);
    color: var(--nn-pink);
    border-color: rgba(255, 0, 110, 0.25);
}

body .alert-warning {
    background: rgba(251, 191, 36, 0.1);
    color: var(--nn-amber);
    border-color: rgba(251, 191, 36, 0.25);
}

body .alert-info {
    background: rgba(167, 139, 250, 0.1);
    color: var(--nn-purple);
    border-color: rgba(167, 139, 250, 0.25);
}

body .btn-close { filter: invert(1) grayscale(100%) brightness(0.8); }

/* ---------- Nav Pills (Admin tabs) ---------- */

body .nav-pills .nav-link {
    color: var(--nn-text-muted);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    padding: 0.6rem 1rem;
    transition: all 200ms;
}
body .nav-pills .nav-link:hover {
    color: var(--nn-text);
    background: rgba(255, 255, 255, 0.03);
}
body .nav-pills .nav-link.active {
    background: rgba(0, 255, 135, 0.1);
    color: var(--nn-green);
    border: 1px solid rgba(0, 255, 135, 0.2);
}

/* ---------- Pagination ---------- */

body .page-link {
    background-color: var(--nn-surface);
    border-color: var(--nn-border);
    color: var(--nn-text-muted);
}
body .page-link:hover {
    background-color: rgba(0, 255, 135, 0.08);
    border-color: var(--nn-border-hover);
    color: var(--nn-green);
}
body .page-item.active .page-link {
    background-color: var(--nn-green);
    border-color: var(--nn-green);
    color: #000;
}
body .page-item.disabled .page-link {
    background-color: var(--nn-surface);
    border-color: var(--nn-border);
    color: var(--nn-text-faint);
}

/* ---------- Misc ---------- */

body .text-muted, .nn-muted { color: var(--nn-text-muted); }
body .text-success { color: var(--nn-green); }
body .text-danger { color: var(--nn-pink); }
body .text-warning { color: var(--nn-amber); }
body .text-primary { color: var(--nn-green); }
body .text-info { color: var(--nn-purple); }

body .bg-light { background-color: var(--nn-surface); }
body .bg-primary { background-color: var(--nn-green); }

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

/* Stats cards in billing tab */
body .card.bg-light .card-body .text-muted,
.card.bg-light .card-body .nn-muted { color: var(--nn-text-faint); }
body .card.bg-light .card-body .fw-bold { color: var(--nn-green); }

/* Auth pages — centered card with top accent */
.auth-card {
    background: var(--nn-surface);
    border: 1px solid var(--nn-border);
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
}
.auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--nn-green), var(--nn-pink));
}
.auth-card .card-body { padding: 2rem; }

/* Gradient text utility */
.nn-gradient-text {
    background: linear-gradient(135deg, var(--nn-green) 0%, var(--nn-green-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glow effect on icons */
.nn-glow { filter: drop-shadow(0 0 8px rgba(0, 255, 135, 0.4)); }

/* Navbar toggler */
body .navbar-toggler { border-color: var(--nn-border); }
body .navbar-toggler:focus { box-shadow: 0 0 0 2px rgba(0, 255, 135, 0.15); }

/* ---------- Themed card header ---------- */

.nn-card-header {
    background: rgba(20, 20, 22, 0.8);
    color: var(--nn-text);
    border-bottom: 1px solid var(--nn-border);
}
.nn-card-header h1, .nn-card-header h2, .nn-card-header h3,
.nn-card-header h4, .nn-card-header h5, .nn-card-header h6 {
    color: inherit;
}

/* Table dark header → surface */
body .table-dark, body thead.table-dark > tr > th {
    background-color: rgba(20, 20, 22, 0.8);
    color: var(--nn-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'JetBrains Mono', monospace;
    border-color: var(--nn-border);
}

/* Table striped rows */
body .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(20, 20, 22, 0.3);
    color: var(--nn-text);
}

/* Progress bars */
body .progress {
    background-color: var(--nn-surface);
    border: 1px solid var(--nn-border);
}
body .progress-bar.bg-success { background-color: var(--nn-green); }
body .progress-bar.bg-warning { background-color: var(--nn-amber); }
body .progress-bar.bg-danger { background-color: var(--nn-pink); }

/* Modals */
body .modal-content {
    background: var(--nn-surface);
    border: 1px solid var(--nn-border);
    color: var(--nn-text);
}
body .modal-header { border-bottom-color: var(--nn-border); }
body .modal-footer { border-top-color: var(--nn-border); }

/* List groups */
body .list-group-item {
    background-color: var(--nn-surface);
    border-color: var(--nn-border);
    color: var(--nn-text);
}
body .list-group-item:hover {
    background-color: rgba(0, 255, 135, 0.03);
}

/* Accordion (dark) */
body .accordion-item {
    background-color: var(--nn-surface);
    border-color: var(--nn-border);
}
body .accordion-button {
    background-color: var(--nn-surface);
    color: var(--nn-text);
}
body .accordion-button:not(.collapsed) {
    background-color: rgba(0, 255, 135, 0.05);
    color: var(--nn-green);
    box-shadow: inset 0 -1px 0 var(--nn-border);
}
body .accordion-button::after {
    filter: invert(1) brightness(0.7);
}
body .accordion-body {
    background: var(--nn-bg);
    color: var(--nn-text-muted);
}

/* Nav tabs */
body .nav-tabs {
    border-bottom-color: var(--nn-border);
}
body .nav-tabs .nav-link {
    color: var(--nn-text-muted);
    border-color: transparent;
    transition: all 200ms;
}
body .nav-tabs .nav-link:hover {
    color: var(--nn-text);
    border-color: var(--nn-border) var(--nn-border) transparent;
}
body .nav-tabs .nav-link.active {
    background-color: var(--nn-surface);
    color: var(--nn-green);
    border-color: var(--nn-border) var(--nn-border) var(--nn-surface);
}

/* .bg-dark overrides (not in card-header context) */
body .bg-dark { background-color: var(--nn-surface); }

/* Buttons: btn-info, btn-success, btn-warning for dark theme */
body .btn-info {
    background: var(--nn-purple);
    border-color: var(--nn-purple);
    color: #fff;
}
body .btn-info:hover {
    background: #b9a0ff;
    border-color: #b9a0ff;
}
body .btn-success {
    background: var(--nn-green);
    border-color: var(--nn-green);
    color: #000;
    font-weight: 700;
}
body .btn-success:hover {
    background: var(--nn-green-hover);
    border-color: var(--nn-green-hover);
    color: #000;
}
body .btn-warning {
    background: var(--nn-amber);
    border-color: var(--nn-amber);
    color: #000;
}
body .btn-warning:hover {
    background: #f5cc4d;
    border-color: #f5cc4d;
}
body .btn-dark {
    background: var(--nn-surface);
    border-color: var(--nn-border);
    color: var(--nn-text);
}
body .btn-dark:hover {
    background: var(--nn-border);
    color: #fff;
}

/* Onboarding wizard stepper */
body .stepper-circle {
    background: var(--nn-surface);
    color: var(--nn-text-faint);
    border: 1px solid var(--nn-border);
}
body .stepper-step.active .stepper-circle {
    background: var(--nn-green);
    color: #000;
    border-color: var(--nn-green);
    box-shadow: 0 0 15px rgba(0, 255, 135, 0.3);
}
body .stepper-step.done .stepper-circle {
    background: rgba(0, 255, 135, 0.15);
    color: var(--nn-green);
    border-color: rgba(0, 255, 135, 0.3);
}
body .stepper-line {
    background: var(--nn-border);
}
body .stepper-line.done {
    background: var(--nn-green);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--nn-bg); }
::-webkit-scrollbar-thumb { background: var(--nn-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--nn-border-hover); }