:root {
    --bg-page: #080a10;
    --surface: #0f1322;
    --surface-soft: #161b2e;
    --primary: #818cf8;
    --primary-600: #6366f1;
    --primary-500: #4f46e5;
    --slate-50: #161b2e;
    --slate-100: #1d233e;
    --slate-200: #293155;
    --slate-300: #3b4576;
    --slate-400: #6270b2;
    --slate-500: #8c9ccf;
    --slate-600: #cbd5e1;
    --text-main: #f3f4f6;
    --text-muted: #9ca3af;
    --success-soft: rgba(16, 185, 129, 0.12);
    --success-text: #34d399;
    --warning-soft: rgba(245, 158, 11, 0.12);
    --warning-text: #fbbf24;
    --danger-soft: rgba(244, 63, 94, 0.12);
    --danger-text: #fb7185;
    --info-soft: rgba(59, 130, 246, 0.12);
    --info-text: #60a5fa;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 9999px;
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-medium: 0 10px 30px -10px rgba(99, 102, 241, 0.35);
    --transition-fast: 200ms cubic-bezier(0.16, 1, 0.3, 1);
    --content-max: 72rem;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg-page);
    color: var(--text-main);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.app-body {
    min-height: 100vh;
    background: var(--bg-page);
    color: var(--text-main);
}

.app-shell {
    min-height: 100vh;
    background: var(--bg-page);
    color: var(--text-main);
}

.page-shell {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

a:hover {
    color: var(--primary-600);
}

::selection {
    background: rgba(99, 102, 241, 0.25);
    color: #ffffff;
}

.text-surface {
    color: var(--surface) !important;
}

.text-main {
    color: var(--text-main) !important;
}

.text-muted-soft {
    color: var(--text-muted) !important;
}

.bg-page {
    background: var(--bg-page) !important;
}

.bg-surface {
    background: var(--surface) !important;
}

.border-surface {
    border-color: var(--slate-100) !important;
}

.shadow-soft {
    box-shadow: var(--shadow-soft) !important;
}

.shadow-medium {
    box-shadow: var(--shadow-medium) !important;
}

/* OVERRIDES FOR BOOTSTRAP TO ADAPT DARK THEME NATIVELY */
.bg-white, [class*="bg-white"] {
    background-color: var(--surface) !important;
}

.bg-light, [class*="bg-light"] {
    background-color: var(--surface-soft) !important;
}

.text-dark, [class*="text-dark"] {
    color: var(--text-main) !important;
}

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

.card {
    background-color: var(--surface) !important;
    border-color: var(--slate-100) !important;
    color: var(--text-main) !important;
}

.card-header {
    background-color: var(--surface) !important;
    border-bottom-color: var(--slate-100) !important;
}

.border, .border-bottom, .border-top, .border-start, .border-end {
    border-color: var(--slate-100) !important;
}

.table {
    color: var(--text-main) !important;
}

.table th, .table td {
    background-color: transparent !important;
    color: var(--text-main) !important;
    border-bottom-color: var(--slate-100) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

.table-hover tbody tr:hover {
    background-color: var(--slate-50) !important;
}

/* Form controls overrides */
.form-control, .form-select {
    background-color: var(--surface-soft) !important;
    border-color: var(--slate-200) !important;
    color: var(--text-main) !important;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
    background-color: var(--surface-soft) !important;
}

/* Badge corrections */
.badge {
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.badge.bg-success {
    background-color: var(--success-soft) !important;
    color: var(--success-text) !important;
}

.badge.bg-warning {
    background-color: var(--warning-soft) !important;
    color: var(--warning-text) !important;
}

.badge.bg-danger {
    background-color: var(--danger-soft) !important;
    color: var(--danger-text) !important;
}

.badge.bg-secondary, .badge.bg-info {
    background-color: var(--info-soft) !important;
    color: var(--info-text) !important;
}

/* Temporary compatibility layer for pages that still use the existing orders table styling. */
.orders-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.orders-table thead th {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: .9rem;
}

.orders-table tbody tr {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--slate-100);
}

.orders-table tbody tr td {
    vertical-align: middle;
    border: none;
}

.orders-table td.package {
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orders-table td.package .fw-semibold {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orders-table td.price {
    width: 140px;
    font-weight: 600;
}

.orders-table td.actions-cell {
    white-space: nowrap;
    width: 170px;
}

.orders-table .badge {
    font-size: .75rem;
    padding: .45em .6em;
    border-radius: var(--radius-pill);
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .28rem .55rem;
    gap: .4rem;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .32rem .5rem;
}

.btn-icon svg {
    width: .95rem;
    height: .95rem;
}

.orders-table tbody tr:hover {
    transform: translateY(-2px);
    transition: .12s ease;
    box-shadow: var(--shadow-medium);
    background-color: var(--surface-soft);
}

@media (max-width: 767px) {
    .orders-table td.package {
        max-width: 60%;
    }

    .orders-table td.actions-cell {
        width: auto;
    }
}

/* ==========================================================================
   Universal Dark Space Theme Overrides for All Components & Pages
   ========================================================================== */

/* Universal Headings & Text Color Overrides for Dark Mode */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: #ffffff !important;
}

/* Override dark text utility classes */
.text-dark,
.text-black,
.text-slate-900,
.text-slate-950,
.text-gray-900 {
    color: var(--text-main) !important;
}

/* Card and Surface components override */
.card,
.panel-card,
.table-card,
.search-card,
.summary-card,
.balance-card,
.feature-card,
.package-card,
.modern-card,
.section-card,
.addon-card,
.stat-card,
.setup-checklist-card,
.page-card,
.page-side-card,
.setup-step-row {
    background: rgba(15, 19, 34, 0.65) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-soft) !important;
    color: var(--text-main) !important;
}

/* Card internals */
.card-header,
.card-footer,
.panel-card .card-header,
.table-card .card-header,
.summary-card .card-header,
.package-card .card-header,
.modern-card .card-header,
.section-card .card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.card-body,
.panel-card .card-body,
.table-card .card-body,
.summary-card .card-body,
.package-card .card-body,
.modern-card .card-body,
.section-card .card-body {
    background: transparent !important;
    color: var(--text-main) !important;
}

/* Override background colors of list items or boxes inside cards */
.list-group-item {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-main) !important;
}

.list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Override other generic boxes */
.bg-light,
.bg-stone-50,
.bg-gray-50,
.bg-slate-50,
.bg-stone-100,
.bg-gray-100 {
    background-color: var(--surface-soft) !important;
}

/* Text utility overrides */
.text-muted,
.text-secondary,
.text-slate-500,
.text-slate-600,
.text-gray-500,
.text-gray-600 {
    color: var(--text-muted) !important;
}

/* Table overrides to look dark space */
.table th {
    color: var(--text-muted) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.table td {
    color: var(--text-main) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}