:root {
    color-scheme: light;
    --bg-color: #f6f8fb;
    --surface-color: #ffffff;
    --surface-muted: #f0f4f8;
    --text-color: #1f2937;
    --text-muted: #64748b;
    --border-color: #dbe3ed;
    --primary-color: #ef683d;
    --primary-contrast: #ffffff;
    --success-color: #319c50;
    --warning-color: #7e62b0;
    --danger-color: #cd5a9b;
    --info-color: #3b96c4;
    --shadow-color: 30 41 59;
    --shadow-soft: 0 16px 40px rgb(var(--shadow-color) / 0.08);
    --shadow-card: 0 8px 24px rgb(var(--shadow-color) / 0.08);
    --radius: 8px;
    --transition: 180ms ease;

    /* Global Typography Scale & Tokens */
    --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 22px;
    --font-size-3xl: 28px;
    --font-size-display: 32px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --line-height-sm: 1.25;
    --line-height-md: 1.5;
    --line-height-lg: 1.75;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg-color: #111318;
    --surface-color: #1a1d24;
    --surface-muted: #232833;
    --text-color: #f8fafc;
    --text-muted: #cbd5e1;
    --border-color: #303643;
    --primary-color: #ef683d;
    --primary-contrast: #08111f;
    --success-color: #319c50;
    --warning-color: #7e62b0;
    --danger-color: #cd5a9b;
    --info-color: #3b96c4;
    --shadow-color: 0 0 0;
    --shadow-soft: 0 16px 40px rgb(var(--shadow-color) / 0.28);
    --shadow-card: 0 8px 24px rgb(var(--shadow-color) / 0.24);
}

* {
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
}

body {
    background-color: var(--bg-color);
    background-image: 
        radial-gradient(ellipse at top left, color-mix(in srgb, var(--danger-color) 12%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse at top right, color-mix(in srgb, var(--warning-color) 12%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse at bottom left, color-mix(in srgb, var(--info-color) 12%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--primary-color) 12%, transparent) 0%, transparent 60%);
    background-attachment: fixed;
    color: var(--text-color);
    font-family: var(--font-family) !important;
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
}

.btn-primary {
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-color: var(--primary-contrast);
    --bs-btn-hover-bg: color-mix(in srgb, var(--primary-color) 86%, #000000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--primary-color) 86%, #000000);
}

.form-control,
.form-select {
    background: var(--surface-color);
    border-color: var(--border-color);
    color: var(--text-color);
    font-size: var(--font-size-md);
}

.form-control:focus,
.form-select:focus {
    background: var(--surface-color);
    color: var(--text-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-color);
    --bs-table-border-color: var(--border-color);
}

/* Global Typography Hierarchy & Font Standardization */
h1, .h1 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-sm); color: var(--text-color); }
h2, .h2 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-sm); color: var(--text-color); }
h3, .h3 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-sm); color: var(--text-color); }
h4, .h4 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-sm); color: var(--text-color); }
h5, .h5 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: var(--line-height-md); color: var(--text-color); }
h6, .h6 { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); line-height: var(--line-height-md); color: var(--text-color); }

/* Form Elements Typography */
label, .form-label {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--text-color);
    margin-bottom: 0.35rem;
}
.form-control::placeholder {
    color: var(--text-muted);
    opacity: 0.8;
}
.form-text, .text-muted, small, .small {
    font-size: var(--font-size-sm);
    color: var(--text-muted) !important;
}

/* Badges & Buttons */
.badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: 0.35em 0.65em;
    border-radius: 6px;
}
.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    transition: all 0.2s ease !important;
}

.btn svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    stroke-width: 2.2 !important;
}
.btn-sm {
    font-size: var(--font-size-sm);
}
.btn-lg {
    font-size: var(--font-size-lg);
}

/* DataTables & Tables Typography */
.table th {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.table td {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    vertical-align: middle;
}

/* Dark Mode Readability & Contrast Overrides */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white {
    background-color: var(--surface-muted) !important;
    color: var(--text-color) !important;
}
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-black {
    color: var(--text-color) !important;
}
[data-theme="dark"] .border,
[data-theme="dark"] .border-light,
[data-theme="dark"] .table-bordered {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .dropdown-item {
    color: var(--text-color);
}
[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--surface-muted);
    color: var(--primary-color);
}
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-color) !important;
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
}
[data-theme="dark"] .badge.bg-light {
    background-color: var(--surface-muted) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color);
}
[data-theme="dark"] .badge.bg-warning {
    background-color: rgba(247, 189, 83, 0.2) !important;
    color: #fbd38d !important;
    border: 1px solid rgba(247, 189, 83, 0.4);
}
[data-theme="dark"] .badge.bg-info {
    background-color: rgba(103, 232, 249, 0.2) !important;
    color: #a5f3fc !important;
    border: 1px solid rgba(103, 232, 249, 0.4);
}

/* Dark Mode Close Button & Icon Enhancements */
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.85;
}
[data-theme="dark"] .btn-close:hover {
    opacity: 1;
}

/* Standardized UI Tabs (.nav-tabs) System */
.nav-tabs {
    border-bottom: 1px solid var(--border-color);
    gap: 8px;
}

.nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    min-height: 36px;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    background: transparent !important;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
    box-shadow: none !important;
    transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}

.nav-tabs .nav-link:hover {
    color: var(--text-color);
    background: var(--surface-muted) !important;
    border-color: transparent transparent var(--border-color);
}

.nav-tabs .nav-link.active {
    color: var(--primary-color) !important;
    background: transparent !important;
    border-color: transparent transparent var(--primary-color) !important;
    border-bottom-width: 2px !important;
    font-weight: var(--font-weight-bold);
    box-shadow: none !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--primary-color) !important;
    background: transparent !important;
    border-color: transparent transparent var(--primary-color) !important;
}

/* Unified Button Color Scheme Override */
.btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark,
.btn-secondary:hover, .btn-success:hover, .btn-danger:hover, .btn-warning:hover, .btn-info:hover, .btn-dark:hover,
.btn-secondary:active, .btn-success:active, .btn-danger:active, .btn-warning:active, .btn-info:active, .btn-dark:active,
.btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-dark,
.btn-outline-secondary:hover, .btn-outline-success:hover, .btn-outline-danger:hover, .btn-outline-warning:hover, .btn-outline-info:hover, .btn-outline-dark:hover {
    --bs-btn-bg: var(--primary-color) !important;
    --bs-btn-border-color: var(--primary-color) !important;
    --bs-btn-color: var(--primary-contrast) !important;
    --bs-btn-hover-bg: color-mix(in srgb, var(--primary-color) 86%, #000000) !important;
    --bs-btn-hover-border-color: color-mix(in srgb, var(--primary-color) 86%, #000000) !important;
    --bs-btn-hover-color: var(--primary-contrast) !important;
    --bs-btn-active-bg: color-mix(in srgb, var(--primary-color) 80%, #000000) !important;
    --bs-btn-active-border-color: color-mix(in srgb, var(--primary-color) 80%, #000000) !important;
    --bs-btn-active-color: var(--primary-contrast) !important;
    --bs-btn-focus-shadow-rgb: 239, 104, 61 !important;
}

.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-dark {
    --bs-btn-bg: transparent !important;
    --bs-btn-color: var(--primary-color) !important;
    --bs-btn-border-color: var(--primary-color) !important;
    --bs-btn-hover-bg: var(--primary-color) !important;
    --bs-btn-hover-color: var(--primary-contrast) !important;
    --bs-btn-hover-border-color: var(--primary-color) !important;
    --bs-btn-active-bg: var(--primary-color) !important;
    --bs-btn-active-color: var(--primary-contrast) !important;
    --bs-btn-active-border-color: var(--primary-color) !important;
}

.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover, .btn-outline-danger:hover, .btn-outline-warning:hover, .btn-outline-info:hover, .btn-outline-dark:hover,
.btn-outline-primary:active, .btn-outline-secondary:active, .btn-outline-success:active, .btn-outline-danger:active, .btn-outline-warning:active, .btn-outline-info:active, .btn-outline-dark:active {
    background-color: var(--primary-color) !important;
    color: var(--primary-contrast) !important;
    border-color: var(--primary-color) !important;
}