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

/* =============================================
   CSS VARIABLES — LIGHT MODE (default)
   ============================================= */
:root {
    --sp-font: 'Inter', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sp-bg: #F5F7FA;
    --sp-surface: #FFFFFF;
    --sp-surface-alt: #F8FAFC;
    --sp-text: #4A5568;
    --sp-text-heading: #1A1A2E;
    --sp-text-muted: #718096;
    --sp-text-inverse: #FFFFFF;
    --sp-primary: #1A73E8;
    --sp-primary-hover: #1558B0;
    --sp-primary-light: #DBEAFE;
    --sp-primary-subtle: #F0F7FF;
    --sp-border: #E2E8F0;
    --sp-border-strong: #CBD5E0;
    --sp-navbar-bg: #0F1B2D;
    --sp-navbar-active: rgba(26,115,232,0.3);
    --sp-success: #10B981;
    --sp-success-light: #D1FAE5;
    --sp-success-dark: #065F46;
    --sp-warning: #F59E0B;
    --sp-warning-light: #FEF3C7;
    --sp-warning-dark: #92400E;
    --sp-danger: #EF4444;
    --sp-danger-light: #FEE2E2;
    --sp-danger-dark: #991B1B;
    --sp-info: #4A9FF5;
    --sp-info-light: #DBEAFE;
    --sp-info-dark: #1E40AF;
    --sp-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --sp-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --sp-shadow-lg: 0 10px 30px rgba(0,0,0,0.12);
    --sp-input-bg: #FFFFFF;
    --sp-input-border: #E2E8F0;
    --sp-input-text: #1A1A2E;
    --sp-input-placeholder: #A0AEC0;
    --sp-input-disabled: #F5F7FA;
    --sp-dropdown-bg: #FFFFFF;
    --sp-dropdown-hover: #F0F7FF;
    --sp-code-bg: #F0F7FF;
    --sp-code-text: #1A73E8;
    --sp-modal-bg: #FFFFFF;
    --sp-ticket-self: #DBEAFE;
    --sp-ticket-self-text: #1E40AF;
    --sp-ticket-other: #FFFFFF;
    --sp-ticket-other-text: #4A5568;
    --sp-stripe-bg: #FFFFFF;
    --sp-radius: 6px;
    --sp-radius-lg: 10px;
    --sp-transition: 0.2s ease;
}

/* =============================================
   CSS VARIABLES — DARK MODE
   ============================================= */
[data-theme="dark"] {
    --sp-bg: #0B1120;
    --sp-surface: #151E2E;
    --sp-surface-alt: #1A2540;
    --sp-text: #CBD5E0;
    --sp-text-heading: #E2E8F0;
    --sp-text-muted: #718096;
    --sp-text-inverse: #FFFFFF;
    --sp-primary: #4A9FF5;
    --sp-primary-hover: #6DB5FF;
    --sp-primary-light: #1A2540;
    --sp-primary-subtle: #111B2E;
    --sp-border: #2D3748;
    --sp-border-strong: #4A5568;
    --sp-navbar-bg: #070D18;
    --sp-navbar-active: rgba(74,159,245,0.25);
    --sp-success: #34D399;
    --sp-success-light: #0D2818;
    --sp-success-dark: #6EE7B7;
    --sp-warning: #FBBF24;
    --sp-warning-light: #2D1F00;
    --sp-warning-dark: #FDE68A;
    --sp-danger: #F87171;
    --sp-danger-light: #2D0F0F;
    --sp-danger-dark: #FCA5A5;
    --sp-info: #60A5FA;
    --sp-info-light: #0F1B33;
    --sp-info-dark: #93C5FD;
    --sp-shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
    --sp-shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --sp-shadow-lg: 0 10px 30px rgba(0,0,0,0.4);
    --sp-input-bg: #1A2540;
    --sp-input-border: #2D3748;
    --sp-input-text: #E2E8F0;
    --sp-input-placeholder: #4A5568;
    --sp-input-disabled: #151E2E;
    --sp-dropdown-bg: #1A2540;
    --sp-dropdown-hover: #243352;
    --sp-code-bg: #1A2540;
    --sp-code-text: #60A5FA;
    --sp-modal-bg: #151E2E;
    --sp-ticket-self: #1A2540;
    --sp-ticket-self-text: #93C5FD;
    --sp-ticket-other: #1A2540;
    --sp-ticket-other-text: #CBD5E0;
    --sp-stripe-bg: #1A2540;
}

/* Auto-detect system preference when no explicit choice */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --sp-bg: #0B1120;
        --sp-surface: #151E2E;
        --sp-surface-alt: #1A2540;
        --sp-text: #CBD5E0;
        --sp-text-heading: #E2E8F0;
        --sp-text-muted: #718096;
        --sp-text-inverse: #FFFFFF;
        --sp-primary: #4A9FF5;
        --sp-primary-hover: #6DB5FF;
        --sp-primary-light: #1A2540;
        --sp-primary-subtle: #111B2E;
        --sp-border: #2D3748;
        --sp-border-strong: #4A5568;
        --sp-navbar-bg: #070D18;
        --sp-navbar-active: rgba(74,159,245,0.25);
        --sp-success: #34D399;
        --sp-success-light: #0D2818;
        --sp-success-dark: #6EE7B7;
        --sp-warning: #FBBF24;
        --sp-warning-light: #2D1F00;
        --sp-warning-dark: #FDE68A;
        --sp-danger: #F87171;
        --sp-danger-light: #2D0F0F;
        --sp-danger-dark: #FCA5A5;
        --sp-info: #60A5FA;
        --sp-info-light: #0F1B33;
        --sp-info-dark: #93C5FD;
        --sp-shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
        --sp-shadow-md: 0 4px 12px rgba(0,0,0,0.3);
        --sp-shadow-lg: 0 10px 30px rgba(0,0,0,0.4);
        --sp-input-bg: #1A2540;
        --sp-input-border: #2D3748;
        --sp-input-text: #E2E8F0;
        --sp-input-placeholder: #4A5568;
        --sp-input-disabled: #151E2E;
        --sp-dropdown-bg: #1A2540;
        --sp-dropdown-hover: #243352;
        --sp-code-bg: #1A2540;
        --sp-code-text: #60A5FA;
        --sp-modal-bg: #151E2E;
        --sp-ticket-self: #1A2540;
        --sp-ticket-self-text: #93C5FD;
        --sp-ticket-other: #1A2540;
        --sp-ticket-other-text: #CBD5E0;
        --sp-stripe-bg: #1A2540;
    }
}

/* =============================================
   GLOBAL
   ============================================= */
body {
    font-family: var(--sp-font);
    background-color: var(--sp-bg);
    color: var(--sp-text);
    transition: background-color var(--sp-transition), color var(--sp-transition);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--sp-text-heading);
    font-weight: 600;
}

a { color: var(--sp-primary); }
a:hover, a:focus { color: var(--sp-primary-hover); }

hr { border-top-color: var(--sp-border); }

.text-muted { color: var(--sp-text-muted); }
.text-primary, .text-primary:hover { color: var(--sp-primary); }
.text-success, .text-success:hover { color: var(--sp-success); }
.text-info, .text-info:hover { color: var(--sp-info); }
.text-warning, .text-warning:hover { color: var(--sp-warning); }
.text-danger, .text-danger:hover { color: var(--sp-danger); }

.bg-primary { background-color: var(--sp-primary); color: var(--sp-text-inverse); }
.bg-success { background-color: var(--sp-success); color: var(--sp-text-inverse); }
.bg-info { background-color: var(--sp-info); color: var(--sp-text-inverse); }
.bg-warning { background-color: var(--sp-warning); color: var(--sp-text-inverse); }
.bg-danger { background-color: var(--sp-danger); color: var(--sp-text-inverse); }

/* =============================================
   NAVBAR
   ============================================= */
.navbar-default {
    background-color: var(--sp-navbar-bg);
    border-color: transparent;
    box-shadow: var(--sp-shadow-md);
}
.navbar-default .navbar-brand { color: #FFF; font-weight: 700; font-size: 20px; letter-spacing: .5px; }
.navbar-default .navbar-brand:hover { color: var(--sp-primary); }
.navbar-default .navbar-nav > li > a { color: rgba(255,255,255,.7); font-weight: 500; transition: color var(--sp-transition); }
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus { color: #FFF; background: rgba(255,255,255,.05); }
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus { color: #FFF; background: var(--sp-navbar-active); }
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus { color: #FFF; background: rgba(255,255,255,.1); }
.navbar-default .navbar-toggle { border-color: rgba(255,255,255,.3); }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background: rgba(255,255,255,.1); }
.navbar-default .navbar-toggle .icon-bar { background: rgba(255,255,255,.7); }
.navbar-default .navbar-collapse,
.navbar-default .navbar-form { border-color: rgba(255,255,255,.1); }
.navbar-default .navbar-text { color: rgba(255,255,255,.6); }
.navbar-default .navbar-link { color: rgba(255,255,255,.7); }
.navbar-default .navbar-link:hover { color: #FFF; }
.navbar .badge { background: var(--sp-primary); color: #FFF; }

.navbar-inverse { background: var(--sp-primary); border-color: var(--sp-primary-hover); }
.navbar-inverse .navbar-brand { color: #FFF; }
.navbar-inverse .navbar-nav > .active > a { background: var(--sp-primary-hover); }

/* Mobile navbar */
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: rgba(255,255,255,.7); }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { color: #FFF; }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a { color: #FFF; background: var(--sp-navbar-active); }
    .navbar-default .navbar-collapsed .navbar-nav .open .dropdown-menu > li > a { color: rgba(255,255,255,.7); }
    .navbar-default .navbar-collapsed .navbar-nav .open .dropdown-menu > li > a:hover { color: #FFF; }
    .navbar-collapsed .navbar-nav .open .dropdown-menu > li > a { color: rgba(255,255,255,.7); }
    .navbar-collapsed .navbar-nav .open .dropdown-menu > li > a:hover { color: #FFF; }
}

/* Theme toggle button in navbar */
.sp-theme-toggle {
    background: none;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 8px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--sp-transition);
    color: rgba(255,255,255,.7);
    line-height: 1;
}
.sp-theme-toggle:hover {
    background: rgba(255,255,255,.1);
    color: #FFF;
    border-color: rgba(255,255,255,.4);
}
.sp-theme-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.sp-theme-toggle .sp-icon-sun,
.sp-theme-toggle .sp-icon-moon { display: none; }

/* Show correct icon based on theme */
:root:not([data-theme="dark"]) .sp-theme-toggle .sp-icon-moon { display: block; }
:root:not([data-theme="dark"]) .sp-theme-toggle .sp-icon-sun { display: none; }
[data-theme="dark"] .sp-theme-toggle .sp-icon-sun { display: block; }
[data-theme="dark"] .sp-theme-toggle .sp-icon-moon { display: none; }

/* Auto-detect icon display */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .sp-theme-toggle .sp-icon-sun { display: block; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .sp-theme-toggle .sp-icon-moon { display: none; }
}

/* =============================================
   DROPDOWNS
   ============================================= */
.dropdown-menu {
    background: var(--sp-dropdown-bg);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    box-shadow: var(--sp-shadow-lg);
    padding: 8px 0;
}
.dropdown-menu > li > a { color: var(--sp-text); padding: 8px 20px; transition: all .15s ease; }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { color: var(--sp-primary); background: var(--sp-dropdown-hover); }
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover { color: var(--sp-text-inverse); background: var(--sp-primary); }
.dropdown-menu .divider { background: var(--sp-border); }
.dropdown-header { color: var(--sp-text-muted); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .5px; }
.dropdown-menu > .disabled > a { color: var(--sp-text-muted); }

/* =============================================
   BUTTONS
   ============================================= */
.btn { border-radius: var(--sp-radius); font-weight: 500; transition: all var(--sp-transition); border: none; box-shadow: var(--sp-shadow-sm); }
.btn:hover { box-shadow: var(--sp-shadow-md); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: var(--sp-shadow-sm); }

.btn-primary { background: var(--sp-primary); border-color: var(--sp-primary); color: #FFF; }
.btn-primary:hover, .btn-primary:focus { background: var(--sp-primary-hover); border-color: var(--sp-primary-hover); color: #FFF; }
.btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background: var(--sp-primary-hover); border-color: var(--sp-primary-hover); color: #FFF; }

.btn-success { background: var(--sp-success); border-color: var(--sp-success); color: #FFF; }
.btn-success:hover, .btn-success:focus { background: #059669; border-color: #059669; color: #FFF; }
.btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success { background: #047857; color: #FFF; }

.btn-info { background: var(--sp-info); border-color: var(--sp-info); color: #FFF; }
.btn-info:hover, .btn-info:focus { background: var(--sp-primary); border-color: var(--sp-primary); color: #FFF; }
.btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { background: var(--sp-primary-hover); color: #FFF; }

.btn-warning { background: var(--sp-warning); border-color: var(--sp-warning); color: #FFF; }
.btn-warning:hover, .btn-warning:focus { background: #D97706; border-color: #D97706; color: #FFF; }
.btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning { background: #B45309; color: #FFF; }

.btn-danger { background: var(--sp-danger); border-color: var(--sp-danger); color: #FFF; }
.btn-danger:hover, .btn-danger:focus { background: #DC2626; border-color: #DC2626; color: #FFF; }
.btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { background: #B91C1C; color: #FFF; }

.btn-default { background: var(--sp-surface); border: 1px solid var(--sp-border); color: var(--sp-text); }
.btn-default:hover, .btn-default:focus { background: var(--sp-surface-alt); border-color: var(--sp-border-strong); color: var(--sp-text-heading); }
.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { background: var(--sp-surface-alt); border-color: var(--sp-border-strong); color: var(--sp-text-heading); }

.btn-link { color: var(--sp-primary); }
.btn-link:hover, .btn-link:focus { color: var(--sp-primary-hover); }

/* =============================================
   FORMS
   ============================================= */
.form-control {
    background: var(--sp-input-bg);
    border: 1px solid var(--sp-input-border);
    border-radius: var(--sp-radius);
    color: var(--sp-input-text);
    box-shadow: var(--sp-shadow-sm);
    transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
    height: 38px;
    padding: 8px 12px;
}
.form-control:focus {
    border-color: var(--sp-primary);
    box-shadow: 0 0 0 3px rgba(26,115,232,.15);
}
.form-control::-moz-placeholder { color: var(--sp-input-placeholder); opacity: 1; }
.form-control:-ms-input-placeholder { color: var(--sp-input-placeholder); }
.form-control::-webkit-input-placeholder { color: var(--sp-input-placeholder); }
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background: var(--sp-input-disabled);
    border-color: var(--sp-border);
    color: var(--sp-text-muted);
}
label { color: var(--sp-text-heading); font-weight: 500; }
output { color: var(--sp-input-text); }
.input-group-addon { background: var(--sp-surface-alt); border: 1px solid var(--sp-input-border); color: var(--sp-text); }

.has-success .form-control, .has-success .form-control:focus { border-color: var(--sp-success); }
.has-success .help-block, .has-success .control-label { color: var(--sp-success); }
.has-warning .form-control, .has-warning .form-control:focus { border-color: var(--sp-warning); }
.has-warning .help-block, .has-warning .control-label { color: var(--sp-warning); }
.has-error .form-control, .has-error .form-control:focus { border-color: var(--sp-danger); }
.has-error .help-block, .has-error .control-label { color: var(--sp-danger); }
.help-block { color: var(--sp-text-muted); }

/* =============================================
   PANELS / CARDS
   ============================================= */
.panel {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-lg);
    box-shadow: var(--sp-shadow-sm);
    transition: background-color var(--sp-transition), border-color var(--sp-transition);
}
.panel-body { padding: 20px; }
.panel-heading { border-radius: var(--sp-radius-lg) var(--sp-radius-lg) 0 0; }
.panel-title { font-weight: 600; }
.panel-footer { background: var(--sp-surface-alt); border-color: var(--sp-border); }

.panel-default { border-color: var(--sp-border); }
.panel-default > .panel-heading { background: var(--sp-surface-alt); border-color: var(--sp-border); color: var(--sp-text-heading); }

.panel-primary { border-color: var(--sp-primary); }
.panel-primary > .panel-heading { background: var(--sp-primary); border-color: var(--sp-primary); color: #FFF; }

.panel-success { border-color: var(--sp-success); }
.panel-success > .panel-heading { background: var(--sp-success); border-color: var(--sp-success); color: #FFF; }

.panel-info { border-color: var(--sp-info); }
.panel-info > .panel-heading { background: var(--sp-info); border-color: var(--sp-info); color: #FFF; }

.panel-warning { border-color: var(--sp-warning); }
.panel-warning > .panel-heading { background: var(--sp-warning); border-color: var(--sp-warning); color: #FFF; }

.panel-danger { border-color: var(--sp-danger); }
.panel-danger > .panel-heading { background: var(--sp-danger); border-color: var(--sp-danger); color: #FFF; }

/* =============================================
   TABLES
   ============================================= */
.table > thead > tr > th {
    border-bottom-color: var(--sp-border);
    color: var(--sp-text-heading);
    font-weight: 600;
    background: var(--sp-surface-alt);
}
.table > thead > tr > th, .table > tbody > tr > th,
.table > tfoot > tr > th, .table > thead > tr > td,
.table > tbody > tr > td, .table > tfoot > tr > td {
    border-top-color: var(--sp-border);
    color: var(--sp-text);
}
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--sp-surface-alt); }
.table-hover > tbody > tr:hover { background: var(--sp-primary-subtle); }
.table-bordered, .table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { border-color: var(--sp-border); }
.table-responsive { border-color: var(--sp-border); }

.table > tbody > tr.success > td, .table > tbody > tr > td.success { background: var(--sp-success-light); color: var(--sp-success-dark); }
.table > tbody > tr.info > td, .table > tbody > tr > td.info { background: var(--sp-info-light); color: var(--sp-info-dark); }
.table > tbody > tr.warning > td, .table > tbody > tr > td.warning { background: var(--sp-warning-light); color: var(--sp-warning-dark); }
.table > tbody > tr.danger > td, .table > tbody > tr > td.danger { background: var(--sp-danger-light); color: var(--sp-danger-dark); }

/* =============================================
   ALERTS
   ============================================= */
.alert { border-radius: 8px; border: none; font-weight: 500; }
.alert-success { background: var(--sp-success-light); color: var(--sp-success-dark); border-left: 4px solid var(--sp-success); }
.alert-info { background: var(--sp-info-light); color: var(--sp-info-dark); border-left: 4px solid var(--sp-info); }
.alert-warning { background: var(--sp-warning-light); color: var(--sp-warning-dark); border-left: 4px solid var(--sp-warning); }
.alert-danger { background: var(--sp-danger-light); color: var(--sp-danger-dark); border-left: 4px solid var(--sp-danger); }
.alert-success .alert-link { color: var(--sp-success); }
.alert-info .alert-link { color: var(--sp-info); }
.alert-warning .alert-link { color: var(--sp-warning); }
.alert-danger .alert-link { color: var(--sp-danger); }
.alert-success hr { border-top-color: var(--sp-success); }
.alert-info hr { border-top-color: var(--sp-info); }
.alert-warning hr { border-top-color: var(--sp-warning); }
.alert-danger hr { border-top-color: var(--sp-danger); }

/* =============================================
   LABELS & BADGES
   ============================================= */
.label { border-radius: 4px; font-weight: 500; padding: 3px 8px; }
.label-default { background: var(--sp-text-muted); }
.label-primary { background: var(--sp-primary); }
.label-success { background: var(--sp-success); }
.label-info { background: var(--sp-info); }
.label-warning { background: var(--sp-warning); }
.label-danger { background: var(--sp-danger); }
.badge { background: var(--sp-primary); border-radius: 12px; font-weight: 500; }

/* =============================================
   WELL / JUMBOTRON
   ============================================= */
.well {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-lg);
    box-shadow: var(--sp-shadow-sm);
}
.jumbotron { background: var(--sp-surface); border-radius: 12px; box-shadow: var(--sp-shadow-sm); }
.jumbotron h1, .jumbotron .h1 { color: var(--sp-text-heading); }

/* =============================================
   PAGINATION & BREADCRUMBS
   ============================================= */
.pagination > li > a, .pagination > li > span {
    color: var(--sp-primary);
    background: var(--sp-surface);
    border-color: var(--sp-border);
}
.pagination > li > a:hover { color: var(--sp-primary-hover); background: var(--sp-primary-subtle); border-color: var(--sp-border-strong); }
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover {
    background: var(--sp-primary);
    border-color: var(--sp-primary);
    color: #FFF;
}
.pagination > .disabled > a, .pagination > .disabled > span { color: var(--sp-border-strong); background: var(--sp-surface); border-color: var(--sp-border); }

.breadcrumb { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); }
.breadcrumb > li + li:before { color: var(--sp-border-strong); }
.breadcrumb > .active { color: var(--sp-text-muted); }

/* =============================================
   NAV TABS & PILLS
   ============================================= */
.nav-tabs { border-bottom-color: var(--sp-border); }
.nav-tabs > li > a { color: var(--sp-text); border-radius: var(--sp-radius) var(--sp-radius) 0 0; }
.nav-tabs > li > a:hover { border-color: var(--sp-border) var(--sp-border) transparent; background: var(--sp-surface-alt); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: var(--sp-primary);
    background: var(--sp-surface);
    border-color: var(--sp-border) var(--sp-border) transparent;
    font-weight: 600;
}
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { background: var(--sp-primary); color: #FFF; }
.nav-pills > li > a { border-radius: var(--sp-radius); color: var(--sp-text); }
.nav-pills > li > a:hover { background: var(--sp-primary-subtle); color: var(--sp-primary); }
.nav > li.disabled > a { color: var(--sp-border-strong); }

/* =============================================
   MODALS
   ============================================= */
.modal-content {
    background: var(--sp-modal-bg);
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    box-shadow: var(--sp-shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--sp-border); padding: 20px 24px; }
.modal-title { color: var(--sp-text-heading); font-weight: 600; }
.modal-body { padding: 24px; color: var(--sp-text); }
.modal-footer { border-top: 1px solid var(--sp-border); padding: 16px 24px; }
.close { color: var(--sp-text-muted); text-shadow: none; opacity: .5; }
.close:hover { color: var(--sp-text-heading); opacity: .8; }

/* =============================================
   PROGRESS BARS
   ============================================= */
.progress { background: var(--sp-border); border-radius: 8px; box-shadow: none; height: 8px; }
.progress-bar { background: var(--sp-primary); box-shadow: none; }
.progress-bar-success { background: var(--sp-success); }
.progress-bar-info { background: var(--sp-info); }
.progress-bar-warning { background: var(--sp-warning); }
.progress-bar-danger { background: var(--sp-danger); }

/* =============================================
   LIST GROUPS
   ============================================= */
.list-group-item { background: var(--sp-surface); border-color: var(--sp-border); color: var(--sp-text); }
a.list-group-item:hover, button.list-group-item:hover { background: var(--sp-primary-subtle); color: var(--sp-primary); }
.list-group-item.active, .list-group-item.active:hover { background: var(--sp-primary); border-color: var(--sp-primary); color: #FFF; }
a.list-group-item .list-group-item-heading { color: var(--sp-text-heading); }

/* =============================================
   TOOLTIPS & POPOVERS
   ============================================= */
.tooltip-inner { background: var(--sp-navbar-bg); border-radius: var(--sp-radius); padding: 6px 12px; }
.popover { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-lg); }
.popover-title { background: var(--sp-surface-alt); border-bottom-color: var(--sp-border); color: var(--sp-text-heading); font-weight: 600; }
.popover-content { color: var(--sp-text); }
.popover.top > .arrow:after { border-top-color: var(--sp-surface); }
.popover.right > .arrow:after { border-right-color: var(--sp-surface); }
.popover.bottom > .arrow:after { border-bottom-color: var(--sp-surface); }
.popover.left > .arrow:after { border-left-color: var(--sp-surface); }

/* =============================================
   CODE / PRE
   ============================================= */
code { color: var(--sp-code-text); background: var(--sp-code-bg); }
pre { background: var(--sp-surface-alt); border-color: var(--sp-border); color: var(--sp-text-heading); }

/* =============================================
   THUMBNAILS & IMAGES
   ============================================= */
.thumbnail { background: var(--sp-surface); border-color: var(--sp-border); }
a.thumbnail:hover { border-color: var(--sp-primary); }
.thumbnail .caption { color: var(--sp-text); }
.img-thumbnail { background: var(--sp-surface); border-color: var(--sp-border); }

/* =============================================
   PAGER
   ============================================= */
.pager li > a, .pager li > span { background: var(--sp-surface); border-color: var(--sp-border); color: var(--sp-primary); }
.pager li > a:hover { background: var(--sp-primary-subtle); }
.pager .disabled > a, .pager .disabled > span { color: var(--sp-border-strong); background: var(--sp-surface); }

/* =============================================
   PAGE HEADER / LEGEND / BLOCKQUOTE
   ============================================= */
.page-header { border-bottom-color: var(--sp-border); }
legend { color: var(--sp-text-heading); border-bottom-color: var(--sp-border); }
blockquote { border-left-color: var(--sp-primary); color: var(--sp-text); }
caption { color: var(--sp-text-muted); }

/* =============================================
   STRIPE
   ============================================= */
.StripeElement { background: var(--sp-stripe-bg); border: 1px solid var(--sp-input-border); }
.StripeElement--focus { box-shadow: 0 0 0 3px rgba(26,115,232,.15); border-color: var(--sp-primary); }

/* =============================================
   CUSTOM: TICKETS
   ============================================= */
/* Ticket thread */
.sp-ticket-thread {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sp-ticket-msg {
    display: flex;
    max-width: 85%;
}
.sp-ticket-msg--self {
    align-self: flex-end;
}
.sp-ticket-msg--support {
    align-self: flex-start;
}
.sp-ticket-msg__bubble {
    width: 100%;
}
.sp-ticket-msg--self .ticket-message {
    background: var(--sp-ticket-self);
    color: var(--sp-ticket-self-text);
    border-radius: 12px 12px 0 12px;
    padding: 14px 18px;
}
.sp-ticket-msg--support .ticket-message {
    background: var(--sp-ticket-other);
    color: var(--sp-ticket-other-text);
    border: 1px solid var(--sp-border);
    border-radius: 12px 12px 12px 0;
    padding: 14px 18px;
}
.sp-ticket-msg__meta {
    margin-top: 6px;
    font-size: 12px;
    color: var(--sp-text-muted);
}
.sp-ticket-msg__meta--right {
    text-align: right;
}
.sp-ticket-msg__meta strong {
    color: var(--sp-text-heading);
    font-weight: 600;
    margin-right: 6px;
}
.sp-ticket-msg__time {
    opacity: .7;
}
.sp-ticket-msg__files {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sp-ticket-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--sp-primary);
    padding: 4px 10px;
    background: rgba(26,115,232,.08);
    border-radius: 6px;
    transition: background .15s ease;
    text-decoration: none;
}
.sp-ticket-file:hover {
    background: rgba(26,115,232,.15);
    text-decoration: none;
    color: var(--sp-primary-hover);
}
[data-theme="dark"] .sp-ticket-file {
    background: rgba(74,159,245,.1);
}
[data-theme="dark"] .sp-ticket-file:hover {
    background: rgba(74,159,245,.2);
}

@media (max-width: 767px) {
    .sp-ticket-msg {
        max-width: 95%;
    }
}

/* Account page sections */
.sp-account-section {
    margin-bottom: 20px;
}
.sp-account-section__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--sp-text-heading);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sp-border);
}

/* API page */
.sp-api-method-title {
    color: var(--sp-text-heading);
    font-size: 17px;
    font-weight: 700;
    margin: 24px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--sp-primary);
    display: inline-block;
}

.titcket-title { color: var(--sp-text-heading); border-bottom-color: var(--sp-border); }
.ticket-message-right .ticket-message { background: var(--sp-ticket-self); color: var(--sp-ticket-self-text); border-radius: 12px 12px 0 12px; }
.ticket-message-left .ticket-message { background: var(--sp-ticket-other); color: var(--sp-ticket-other-text); border: 1px solid var(--sp-border); border-radius: 12px 12px 12px 0; }
.ticket-message blockquote { border-left-color: var(--sp-primary); color: var(--sp-text); }
.ticket-message hr { border-top-color: var(--sp-border); }

/* =============================================
   CUSTOM: BORDERS & MISC
   ============================================= */
.border-solid { border-color: var(--sp-border); }
.border-rounded { background: var(--sp-surface); color: var(--sp-text-heading); border: 1px solid var(--sp-border); }
.forgot-password { color: var(--sp-primary); }
.forgot-password:hover { color: var(--sp-primary-hover); }
.description { border-bottom-color: var(--sp-border); }
.modal-body-scroller { border-radius: var(--sp-radius); }

/* =============================================
   MASS ALERTS
   ============================================= */
.mass-alert .alert:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.mass-alert .alert:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }

/* =============================================
   SMOOTH TRANSITIONS (theme switch)
   ============================================= */
/* =============================================
   MEGA MENU (Public navbar)
   ============================================= */
.sp-mega-trigger { position: static !important; }
.sp-mega-menu {
    width: 100%;
    left: 0 !important;
    right: 0 !important;
    padding: 0;
    border: none;
    border-radius: 0 0 12px 12px;
    box-shadow: var(--sp-shadow-lg);
    background: var(--sp-dropdown-bg);
    border-top: 2px solid var(--sp-primary);
}
.sp-mega-menu__inner {
    display: flex;
    padding: 24px 20px;
    gap: 0;
}
.sp-mega-menu__col {
    flex: 1;
    padding: 0 16px;
    border-right: 1px solid var(--sp-border);
}
.sp-mega-menu__col:last-child {
    border-right: none;
}
.sp-mega-menu__heading {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--sp-text-muted);
    margin: 0 0 12px;
    padding: 0 10px;
}
.sp-mega-menu__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sp-mega-menu__col ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--sp-text);
    font-size: 14px;
    font-weight: 500;
    transition: all .15s ease;
    text-decoration: none;
}
.sp-mega-menu__col ul li a:hover {
    background: var(--sp-dropdown-hover);
    color: var(--sp-primary);
    text-decoration: none;
}
.sp-mega-menu__col ul li a i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    color: var(--sp-primary);
}

/* Mobile mega menu */
@media (max-width: 767px) {
    .sp-mega-menu {
        position: static !important;
        float: none !important;
        width: 100%;
        box-shadow: none;
        border-radius: 0;
        border-top: 1px solid var(--sp-border);
        background: transparent;
    }
    .sp-mega-menu__inner {
        flex-direction: column;
        padding: 10px 0;
        gap: 8px;
    }
    .sp-mega-menu__col {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.05);
        padding: 0 0 8px;
    }
    .sp-mega-menu__col:last-child {
        border-bottom: none;
    }
    .sp-mega-menu__heading {
        color: rgba(255,255,255,.4);
        padding: 0 15px;
    }
    .sp-mega-menu__col ul li a {
        color: rgba(255,255,255,.7);
        padding: 6px 15px;
    }
    .sp-mega-menu__col ul li a:hover {
        color: #fff;
        background: rgba(255,255,255,.05);
    }
    .sp-mega-menu__col ul li a i {
        color: rgba(255,255,255,.5);
    }
}

/* =============================================
   FOOTER
   ============================================= */
.sp-footer {
    background: var(--sp-navbar-bg);
    color: rgba(255,255,255,.6);
    padding: 48px 0 0;
    margin-top: 40px;
    font-size: 14px;
}
.sp-footer__col {
    margin-bottom: 32px;
}
.sp-footer__brand {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}
.sp-footer__desc {
    color: rgba(255,255,255,.5);
    line-height: 1.7;
    font-size: 13px;
    margin-bottom: 16px;
}
.sp-footer__social {
    display: flex;
    gap: 10px;
}
.sp-footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.6);
    font-size: 16px;
    transition: all .2s ease;
    text-decoration: none;
}
.sp-footer__social a:hover {
    background: var(--sp-primary);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}
.sp-footer__title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.sp-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sp-footer__links li {
    margin-bottom: 8px;
}
.sp-footer__links a {
    color: rgba(255,255,255,.5);
    text-decoration: none;
    transition: color .15s ease;
    font-size: 13px;
}
.sp-footer__links a:hover {
    color: #fff;
    text-decoration: none;
}
.sp-footer__contact li {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sp-footer__contact li i {
    color: var(--sp-primary);
    width: 16px;
    text-align: center;
}
.sp-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 20px 0;
    margin-top: 16px;
    text-align: center;
    color: rgba(255,255,255,.35);
    font-size: 13px;
}

/* =============================================
   SMOOTH TRANSITIONS
   ============================================= */
body, .panel, .well, .modal-content, .form-control, .btn,
.dropdown-menu, .table, .alert, .list-group-item, .breadcrumb,
.jumbotron, .thumbnail, .popover, .navbar-default {
    transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* =============================================
   AUTH PAGES (Sign In / Sign Up / Reset)
   ============================================= */
.sp-auth-wrapper {
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    padding: 40px 0;
}
.sp-auth-header {
    margin-bottom: 28px;
}
.sp-auth-logo {
    max-height: 48px;
    margin-bottom: 16px;
}
.sp-auth-brand {
    color: var(--sp-primary);
    font-weight: 700;
    font-size: 28px;
    margin: 0 0 8px;
}
.sp-auth-subtitle {
    color: var(--sp-text-muted);
    font-size: 15px;
    margin: 0;
}
.sp-auth-card {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    padding: 32px;
    box-shadow: var(--sp-shadow-md);
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.sp-auth-card .form-group {
    margin-bottom: 18px;
}
.sp-auth-card .form-control {
    height: 44px;
    padding: 10px 14px;
    font-size: 15px;
}
.sp-auth-card .form-group__password .form-control {
    padding-right: 140px;
}
.sp-auth-card .forgot-password {
    font-size: 13px;
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
}
.sp-auth-card .checkbox {
    margin-bottom: 20px;
}
.sp-auth-card .checkbox label {
    color: var(--sp-text);
    font-weight: 400;
}
.sp-auth-btn {
    height: 48px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    letter-spacing: .3px;
    margin-top: 4px;
}
.sp-auth-divider {
    position: relative;
    text-align: center;
    margin: 22px 0;
}
.sp-auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--sp-border);
}
.sp-auth-divider span {
    position: relative;
    background: var(--sp-surface);
    padding: 0 14px;
    color: var(--sp-text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.sp-google-btn-wrap {
    display: flex;
    justify-content: center;
}
.sp-auth-footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--sp-border);
    color: var(--sp-text-muted);
    font-size: 14px;
}
.sp-auth-footer a {
    color: var(--sp-primary);
    font-weight: 600;
}
.sp-auth-footer a:hover {
    color: var(--sp-primary-hover);
}
.sp-auth-text {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    padding: 24px 28px;
    margin-top: 20px;
    box-shadow: var(--sp-shadow-sm);
    color: var(--sp-text);
    transition: background-color .3s ease, border-color .3s ease;
}
.sp-auth-text h1, .sp-auth-text h2, .sp-auth-text h3,
.sp-auth-text h4, .sp-auth-text h5, .sp-auth-text h6 {
    color: var(--sp-text-heading);
}

/* =============================================
   INNER PAGES (Dashboard, Orders, Services, etc.)
   ============================================= */
.sp-page-header {
    margin-bottom: 24px;
}
.sp-page-title {
    color: var(--sp-text-heading);
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}
.sp-card {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    padding: 28px;
    box-shadow: var(--sp-shadow-sm);
    margin-bottom: 24px;
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.sp-card .form-control {
    height: 42px;
    padding: 9px 14px;
    font-size: 14px;
}
.sp-card select.form-control {
    height: 42px;
}
.sp-card textarea.form-control {
    height: auto;
    min-height: 80px;
}
.sp-content-block {
    padding: 24px 28px;
    color: var(--sp-text);
    line-height: 1.7;
}
.sp-content-block h1, .sp-content-block h2, .sp-content-block h3,
.sp-content-block h4, .sp-content-block h5, .sp-content-block h6 {
    color: var(--sp-text-heading);
}

/* Submit button (full-width on inner pages) */
.sp-submit-btn {
    height: 48px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    letter-spacing: .3px;
    margin-top: 8px;
}

/* Service description box */
.sp-service-desc {
    background: var(--sp-surface-alt);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    padding: 14px 16px;
    color: var(--sp-text);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.6;
    font-size: 13px;
}
.sp-service-desc table { width: auto !important; }

/* Charge display */
.sp-charge-display .form-control {
    background: var(--sp-primary-subtle);
    border-color: var(--sp-primary);
    color: var(--sp-primary);
    font-weight: 700;
    font-size: 16px;
}
[data-theme="dark"] .sp-charge-display .form-control {
    background: var(--sp-primary-light);
}

/* Order success message grid */
.sp-order-success {
    border-left-width: 4px;
}
.sp-order-success__title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 14px;
}
.sp-order-success__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
}
.sp-order-success__item {
    display: flex;
    flex-direction: column;
}
.sp-order-success__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    opacity: .7;
    margin-bottom: 2px;
}
.sp-order-success__value {
    font-size: 14px;
    font-weight: 500;
}
@media (max-width: 575px) {
    .sp-order-success__grid {
        grid-template-columns: 1fr;
    }
}

/* Table card wrapper */
.sp-table-card {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    box-shadow: var(--sp-shadow-sm);
    overflow: hidden;
    margin-bottom: 24px;
    transition: background-color .3s ease, border-color .3s ease;
}
.sp-table-card .table {
    margin-bottom: 0;
}
.sp-table-card .table > thead > tr > th {
    border-top: none;
}
.sp-table-card .table > tbody > tr:last-child > td {
    border-bottom: none;
}

/* Stats row for dashboard */
.sp-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}
.sp-stat-card {
    flex: 1;
    min-width: 150px;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: var(--sp-shadow-sm);
    transition: all .3s ease;
}
.sp-stat-card:hover {
    box-shadow: var(--sp-shadow-md);
    transform: translateY(-2px);
}
.sp-stat-card__value {
    font-size: 28px;
    font-weight: 700;
    color: var(--sp-primary);
    line-height: 1.2;
}
.sp-stat-card__label {
    font-size: 13px;
    color: var(--sp-text-muted);
    margin-top: 4px;
    font-weight: 500;
}

/* Toolbar (search + filters above tables) */
.sp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.sp-toolbar .form-control {
    height: 38px;
}
.sp-toolbar .btn {
    height: 38px;
}

/* Card with no padding (for tables) */
.sp-card--flush {
    padding: 0;
}
.sp-card--flush .sp-card__header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--sp-border);
}
.sp-card--flush .sp-card__header h4 {
    margin: 0;
    font-weight: 600;
    color: var(--sp-text-heading);
}
.sp-card--flush .sp-card__body {
    padding: 20px 24px;
}

/* Nav pills inside toolbar */
.sp-nav-pills {
    flex: 1;
    margin-bottom: 0;
}
.sp-nav-pills > li > a {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
}

/* Toolbar search area */
.sp-toolbar__search {
    min-width: 220px;
}
.sp-toolbar__search .input-group {
    width: 100%;
}
@media (max-width: 767px) {
    .sp-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .sp-toolbar__search {
        min-width: 100%;
    }
    .sp-nav-pills {
        flex-wrap: wrap;
        margin-bottom: 8px;
    }
    .sp-nav-pills > li {
        float: none;
        display: inline-block;
    }
}

/* Category header rows in services table */
.sp-category-row td {
    background: var(--sp-primary-subtle) !important;
    color: var(--sp-primary);
    font-size: 13px;
    padding: 10px 14px !important;
    border-left: 3px solid var(--sp-primary);
}
.sp-category-row td strong {
    font-weight: 700;
    color: var(--sp-primary);
}

/* Favorite star */
[data-favorite-service-id] {
    cursor: pointer;
    color: var(--sp-text-muted);
    transition: color .15s ease;
}
[data-favorite-service-id]:hover,
[data-favorite-service-id].favorite-active {
    color: var(--sp-warning);
}

/* Status badge (inline in tables) */
.sp-status-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    background: var(--sp-surface-alt);
    color: var(--sp-text);
    border: 1px solid var(--sp-border);
    white-space: nowrap;
}

/* Inner page responsive */
@media (max-width: 767px) {
    .sp-card {
        padding: 20px 16px;
        border-radius: 10px;
    }
    .sp-content-block {
        padding: 18px 16px;
    }
    .sp-stats-row {
        gap: 10px;
    }
    .sp-stat-card {
        min-width: calc(50% - 10px);
        padding: 14px;
    }
    .sp-stat-card__value {
        font-size: 22px;
    }
}

/* Responsive auth */
@media (max-width: 767px) {
    .sp-auth-wrapper {
        padding: 24px 0;
        min-height: auto;
    }
    .sp-auth-card {
        padding: 24px 20px;
        border-radius: 10px;
    }
    .sp-auth-card .form-group__password .form-control {
        padding-right: 14px;
    }
    .sp-auth-card .forgot-password {
        position: static;
        transform: none;
        display: block;
        margin-top: 6px;
        font-size: 13px;
    }
}