:root {
    --font-sans: "Plus Jakarta Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: "Space Grotesk", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;

    --surface-0: #f4f7fb;
    --surface-1: #ffffff;
    --surface-2: #eef3f9;
    --text-0: #11233a;
    --text-1: #45607f;
    --line-0: #d4deea;

    --brand-500: #0f8b8d;
    --brand-600: #0b6c75;
    --accent-500: #f5a524;
    --danger-500: #d64550;

    --radius-s: 0.5rem;
    --radius-m: 0.8rem;
    --radius-l: 1.2rem;

    --shadow-soft: 0 10px 30px -22px rgba(16, 34, 57, 0.45);
    --shadow-raised: 0 14px 35px -20px rgba(10, 57, 92, 0.38);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
}

[data-bs-theme="dark"] {
    --surface-0: #0b1622;
    --surface-1: #132335;
    --surface-2: #1a2e44;
    --text-0: #e9f0f8;
    --text-1: #b1c5d9;
    --line-0: #2c4460;

    --brand-500: #36b5b4;
    --brand-600: #239695;
    --accent-500: #ffba4f;
    --danger-500: #f46a73;

    --shadow-soft: 0 10px 30px -22px rgba(0, 0, 0, 0.8);
    --shadow-raised: 0 16px 36px -18px rgba(0, 0, 0, 0.75);
}

body {
    font-family: var(--font-sans);
    color: var(--text-0);
    background:
            radial-gradient(1300px 650px at 95% -20%, rgba(15, 139, 141, 0.18), transparent 60%),
            radial-gradient(1000px 700px at -10% -15%, rgba(245, 165, 36, 0.16), transparent 55%),
            var(--surface-0);
    background-repeat: no-repeat;
    background-size: 100% 100%, 100% 100%, auto;
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.015em;
}

.container {
    padding-inline: clamp(1rem, 2vw, 1.75rem);
}

.navbar {
    border-bottom: 1px solid color-mix(in srgb, var(--line-0) 70%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--surface-1) 82%, transparent), color-mix(in srgb, var(--surface-2) 92%, transparent)) !important;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(8px);
}

.navbar .nav-link,
.navbar .navbar-brand {
    color: var(--text-0) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
    color: var(--brand-500) !important;
}

.btn {
    border-radius: var(--radius-m);
    border-width: 1px;
    font-weight: 600;
    transition: transform 140ms ease, box-shadow 200ms ease, background-color 180ms ease, border-color 180ms ease;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
}

.btn-primary {
    background-color: var(--brand-500);
    border-color: var(--brand-500);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
}

.btn-secondary {
    background-color: color-mix(in srgb, var(--surface-2) 85%, var(--surface-1));
    border-color: var(--line-0);
    color: var(--text-0);
}

.btn-outline-light {
    border-color: var(--line-0);
    color: var(--text-0);
}

.btn-outline-light:hover,
.btn-outline-light:focus-visible {
    background-color: var(--surface-2);
    color: var(--text-0);
}

.card,
.list-group-item,
.modal-content,
.dropdown-menu {
    background-color: color-mix(in srgb, var(--surface-1) 95%, transparent);
    border: 1px solid color-mix(in srgb, var(--line-0) 88%, transparent);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-soft);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-0);
    --bs-table-border-color: color-mix(in srgb, var(--line-0) 84%, transparent);
    --bs-table-striped-bg: color-mix(in srgb, var(--surface-2) 55%, transparent);
    --bs-table-hover-bg: color-mix(in srgb, var(--surface-2) 78%, transparent);
}

.table > :not(caption) > * > * {
    padding: 0.85rem 1rem;
}

.table thead th {
    font-family: var(--font-display);
    font-size: 0.83rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--text-0) 78%, var(--text-1));
}

.table thead.table-dark {
    background-color: color-mix(in srgb, var(--brand-600) 78%, #102234);
}

.table thead.table-dark th {
    background-color: inherit !important;
    color: #f3fbff !important;
    border-color: color-mix(in srgb, var(--brand-600) 45%, var(--line-0)) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.form-control,
.form-select,
.input-group-text {
    background-color: color-mix(in srgb, var(--surface-1) 85%, var(--surface-2));
    border-color: color-mix(in srgb, var(--line-0) 80%, transparent);
    color: var(--text-0);
    border-radius: var(--radius-m);
}

.form-control:focus,
.form-select:focus {
    border-color: color-mix(in srgb, var(--brand-500) 60%, white);
    box-shadow: 0 0 0 0.24rem color-mix(in srgb, var(--brand-500) 22%, transparent);
}

.pagination {
    gap: 0.25rem;
    --bs-pagination-border-radius: var(--radius-s);
}

.page-link {
    border-radius: var(--radius-s);
    border-color: color-mix(in srgb, var(--line-0) 85%, transparent);
    color: var(--brand-600);
    background-color: color-mix(in srgb, var(--surface-1) 92%, transparent);
    font-weight: 600;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.page-link:hover {
    color: var(--brand-600);
    background-color: color-mix(in srgb, var(--brand-500) 16%, var(--surface-1));
    border-color: color-mix(in srgb, var(--brand-500) 50%, var(--line-0));
}

.page-link:focus {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-500) 24%, transparent);
}

.page-item.active .page-link {
    background-color: var(--brand-500);
    border-color: var(--brand-500);
    color: #f3fbff;
    box-shadow: var(--shadow-soft);
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: var(--radius-s);
}

.page-item.disabled .page-link {
    color: color-mix(in srgb, var(--text-1) 70%, var(--line-0));
    background-color: color-mix(in srgb, var(--surface-2) 62%, var(--surface-1));
    border-color: color-mix(in srgb, var(--line-0) 75%, transparent);
}

.alert {
    border-radius: var(--radius-m);
    border-width: 1px;
}

.alert-danger {
    border-color: color-mix(in srgb, var(--danger-500) 42%, transparent);
    color: color-mix(in srgb, var(--danger-500) 88%, var(--text-0));
}

.badge {
    border-radius: 999px;
    font-weight: 600;
}

.welcome-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.35fr minmax(220px, 0.65fr);
    gap: clamp(1rem, 3vw, 2.2rem);
    align-items: center;
    min-height: min(72vh, 680px);
    padding: clamp(1.25rem, 4vw, 3rem);
    border: 1px solid color-mix(in srgb, var(--line-0) 84%, transparent);
    border-radius: clamp(1rem, 2vw, 1.6rem);
    background:
            linear-gradient(140deg, color-mix(in srgb, var(--surface-1) 96%, transparent), color-mix(in srgb, var(--surface-2) 92%, transparent));
    box-shadow: var(--shadow-raised);
    animation: welcome-rise 480ms ease-out both;
}

.welcome-glow {
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    filter: blur(10px);
}

.welcome-glow--one {
    width: min(42vw, 430px);
    height: min(42vw, 430px);
    top: -28%;
    right: -10%;
    background: color-mix(in srgb, var(--brand-500) 30%, transparent);
}

.welcome-glow--two {
    width: min(36vw, 350px);
    height: min(36vw, 350px);
    bottom: -35%;
    left: -8%;
    background: color-mix(in srgb, var(--accent-500) 34%, transparent);
}

.welcome-content h1 {
    font-size: clamp(1.9rem, 4.3vw, 3.5rem);
    line-height: 1.07;
    margin-bottom: 0.9rem;
}

.welcome-kicker {
    display: inline-block;
    margin-bottom: 0.8rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--brand-600);
    background: color-mix(in srgb, var(--brand-500) 16%, var(--surface-1));
    border: 1px solid color-mix(in srgb, var(--brand-500) 30%, transparent);
}

.welcome-lead {
    max-width: 56ch;
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    color: var(--text-1);
    margin-bottom: clamp(1rem, 2vw, 1.6rem);
}

.welcome-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.welcome-panel {
    display: grid;
    gap: 0.65rem;
    padding: 0.9rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--line-0) 82%, transparent);
    background: color-mix(in srgb, var(--surface-1) 88%, transparent);
    backdrop-filter: blur(5px);
}

.welcome-metric {
    padding: 0.75rem 0.85rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--surface-2) 76%, var(--surface-1));
    border: 1px solid color-mix(in srgb, var(--line-0) 75%, transparent);
}

.welcome-metric-value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 700;
}

.welcome-metric-label {
    display: block;
    font-size: 0.84rem;
    color: var(--text-1);
}

@keyframes welcome-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 991.98px) {
    .welcome-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }
}