:root {
    --ui-bg: #f4f7fb;
    --ui-surface: #ffffff;
    --ui-surface-muted: #f8fafc;
    --ui-border: #dbe3ee;
    --ui-text: #172033;
    --ui-muted: #667085;
    --ui-primary: #2454d6;
    --ui-primary-dark: #183a8a;
    --ui-accent: #0f9f8f;
    --ui-warning: #b7791f;
    --ui-danger: #c24141;
    --ui-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    --ui-shadow-md: 0 14px 34px rgba(16, 24, 40, 0.10);
    --ui-radius: 8px;
}

html {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    color: var(--ui-text);
}

.app-shell {
    background:
        linear-gradient(180deg, rgba(36, 84, 214, 0.07), rgba(15, 159, 143, 0.04) 300px, transparent 560px),
        var(--ui-bg);
}

.app-shell > .container-fluid {
    max-width: 1440px;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.app-shell .navbar.bg-primary {
    background: linear-gradient(90deg, #172554 0%, #1d4ed8 56%, #0f766e 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}

.app-shell .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    letter-spacing: 0;
    white-space: nowrap;
}

.app-shell .navbar .nav-link {
    color: rgba(255, 255, 255, 0.84);
    font-weight: 600;
}

.app-shell .navbar .nav-link:hover,
.app-shell .navbar .nav-link:focus {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.13);
}

.app-shell .navbar .nav-link.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.19);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.app-shell .dropdown-menu {
    border: 1px solid rgba(219, 227, 238, 0.9);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-md);
    padding: 0.45rem;
}

.app-shell .dropdown-item {
    border-radius: 6px;
    color: var(--ui-text);
    font-weight: 500;
    padding: 0.55rem 0.75rem;
}

.app-shell .dropdown-item:hover,
.app-shell .dropdown-item:focus {
    background: #eef4ff;
    color: var(--ui-primary-dark);
}

.app-shell h1,
.app-shell .h1,
.app-shell h2,
.app-shell .h2,
.app-shell h3,
.app-shell .h3 {
    color: #111827;
    font-weight: 750;
}

.app-shell .card {
    border: 1px solid rgba(219, 227, 238, 0.92) !important;
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.app-shell .card:hover {
    transform: none;
    border-color: rgba(148, 163, 184, 0.7) !important;
    box-shadow: 0 12px 26px rgba(16, 24, 40, 0.09);
}

.app-shell .card-header {
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border-bottom: 1px solid var(--ui-border);
    color: #1f2937;
    padding: 0.9rem 1rem;
}

.app-shell .card-body {
    color: var(--ui-text);
}

.app-shell .bg-primary {
    background-color: var(--ui-primary) !important;
}

.app-shell .bg-info {
    background-color: var(--ui-accent) !important;
}

.app-shell .bg-warning {
    background-color: #f4b942 !important;
}

.app-shell .btn {
    border-radius: var(--ui-radius);
    font-weight: 600;
    box-shadow: none;
}

.app-shell .btn:hover,
.app-shell .btn:focus {
    transform: none;
}

.app-shell .btn-primary {
    background: linear-gradient(180deg, #2f63ea, #214dc4);
    border-color: #214dc4;
}

.app-shell .btn-primary:hover,
.app-shell .btn-primary:focus {
    background: linear-gradient(180deg, #2858d6, #1d43aa);
    border-color: #1d43aa;
}

.app-shell .btn-info {
    background-color: var(--ui-accent);
    border-color: var(--ui-accent);
    color: #ffffff;
}

.app-shell .btn-warning {
    background-color: #f4b942;
    border-color: #f4b942;
    color: #1f2937;
}

.app-shell .btn-outline-primary {
    border-color: rgba(36, 84, 214, 0.55);
    color: var(--ui-primary);
}

.app-shell .btn-outline-primary:hover,
.app-shell .btn-outline-primary:focus {
    background-color: var(--ui-primary);
    color: #ffffff;
}

.app-shell .form-control,
.app-shell .form-select,
.app-shell .input-group-text {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius);
}

.app-shell .form-control,
.app-shell .form-select {
    background-color: #ffffff;
}

.app-shell .form-control:focus,
.app-shell .form-select:focus {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 0.2rem rgba(36, 84, 214, 0.14);
}

.app-shell .table-responsive {
    border-radius: var(--ui-radius);
}

.app-shell .table {
    margin-bottom: 0;
    color: #1f2937;
}

.app-shell .table thead th {
    background: #f1f5f9;
    border-bottom: 1px solid var(--ui-border);
    color: #344054;
    font-size: 0.78rem;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-shell .table tbody tr {
    vertical-align: middle;
}

.app-shell .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: #fbfdff;
}

.app-shell .table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: #eef6ff;
}

.app-shell .badge {
    border-radius: 999px;
    font-weight: 650;
    letter-spacing: 0;
}

.app-shell .alert {
    border: 1px solid transparent;
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-sm);
}

.app-shell .alert-info {
    background: #ecfeff;
    border-color: #bae6fd;
    color: #155e75;
}

.app-shell .alert-success {
    background: #ecfdf3;
    border-color: #bbf7d0;
    color: #166534;
}

.app-shell .alert-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.app-shell .alert-danger {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #991b1b;
}

.app-shell .progress {
    background-color: #e8eef7;
    border-radius: 999px;
}

.app-shell .modal-content {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
}

.app-shell .modal-header,
.app-shell .modal-footer {
    background: #f8fafc;
    border-color: var(--ui-border);
}

.app-shell .floating-alert {
    border: 1px solid rgba(219, 227, 238, 0.95);
    border-left-width: 4px;
    box-shadow: var(--ui-shadow-md);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    padding: 0.45rem 0.65rem;
}

.auth-page,
.welcome-page {
    color: var(--ui-text);
}

.auth-page {
    background:
        linear-gradient(135deg, rgba(23, 37, 84, 0.98) 0%, rgba(36, 84, 214, 0.94) 52%, rgba(15, 118, 110, 0.95) 100%) !important;
    padding: 1.25rem;
}

.auth-page::before,
.welcome-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.14), transparent 26%),
        radial-gradient(circle at 86% 18%, rgba(20, 184, 166, 0.16), transparent 24%),
        radial-gradient(circle at 62% 82%, rgba(251, 191, 36, 0.12), transparent 22%);
}

.auth-page .container,
.auth-page .selection-card {
    position: relative;
    z-index: 1;
}

.auth-page .login-card,
.auth-page .selection-card {
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--ui-radius);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
}

.auth-page .login-header,
.auth-page .selection-header {
    background: linear-gradient(135deg, #172554 0%, #2454d6 58%, #0f766e 100%) !important;
}

.auth-page .login-title,
.auth-page .selection-header h1 {
    letter-spacing: 0;
}

.auth-page .form-control,
.auth-page .input-group-text {
    border-color: #dbe3ee;
}

.auth-page .form-control:focus {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 0.2rem rgba(36, 84, 214, 0.14);
}

.auth-page .btn-login,
.auth-page .btn-primary {
    background: linear-gradient(180deg, #2f63ea, #214dc4) !important;
    border-color: #214dc4 !important;
}

.auth-page .btn-login:hover,
.auth-page .btn-primary:hover {
    transform: none;
    box-shadow: 0 12px 26px rgba(36, 84, 214, 0.26);
}

.auth-page .option-card {
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-sm);
}

.auth-page .option-card:hover {
    transform: none;
    border-color: rgba(36, 84, 214, 0.28);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
}

.welcome-page {
    background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 50%, #0f766e 100%) !important;
}

.welcome-page #welcome-bg {
    background:
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.16), transparent 28%),
        radial-gradient(circle at 80% 12%, rgba(20, 184, 166, 0.20), transparent 24%),
        radial-gradient(circle at 68% 82%, rgba(251, 191, 36, 0.13), transparent 22%) !important;
}

.welcome-page .hero-eyebrow {
    border-radius: 999px;
    letter-spacing: 0.04em;
}

.welcome-page .hero-title {
    letter-spacing: 0;
}

.welcome-page .hero-button {
    border-radius: 999px;
}

@media (max-width: 991.98px) {
    .app-shell {
        padding-top: 64px;
    }

    .app-shell .navbar-collapse {
        background: rgba(15, 23, 42, 0.20);
        border-radius: var(--ui-radius);
        margin-top: 0.75rem;
        padding: 0.75rem;
    }

    .app-shell .navbar-nav {
        gap: 0.25rem;
    }

    .app-shell .navbar .nav-link {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .app-shell > .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .app-shell h1,
    .app-shell .h1,
    .app-shell h2,
    .app-shell .h2,
    .app-shell h3,
    .app-shell .h3 {
        line-height: 1.2;
    }

    .app-shell .card-body {
        padding: 1rem;
    }

    .app-shell .btn {
        min-height: 40px;
    }

    .app-shell .mobile-card-item {
        border-color: var(--ui-border);
        box-shadow: var(--ui-shadow-sm);
    }
}

@media (max-width: 575.98px) {
    .auth-page {
        padding: 0.75rem;
    }

    .auth-page .login-card,
    .auth-page .selection-card {
        border-radius: var(--ui-radius);
    }
}