:root {
    --tm-primary: #2b5fd9;
    --tm-primary-dark: #1e4dc4;
    --tm-accent: #22c1c3;
    --tm-success: #109b6e;
    --tm-warning: #f5a524;
    --tm-danger: #e24a62;
    --tm-info: #4c6fff;
    --tm-bg: #f4f7ff;
    --tm-surface: #ffffff;
    --tm-text: #1f2a44;
    --tm-muted: #6f7d98;
    --tm-border: #e3e9f7;
    --tm-shadow: 0 12px 30px rgba(43, 95, 217, 0.08);
}

body {
    color: var(--tm-text);
    background: var(--tm-bg);
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: 270px;
    min-height: 100vh;
    background: linear-gradient(170deg, #1d2a52 0%, #18213f 100%);
    color: #d8e2ff;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    z-index: 1050;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.app-sidebar .brand {
    padding: 1.4rem 1.25rem 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}

.nav-section {
    margin-top: .8rem;
    padding: .5rem 1.25rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(225, 233, 255, .6);
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: .25rem .75rem;
    padding: .62rem .8rem;
    border-radius: .7rem;
    color: rgba(225, 233, 255, .8);
    transition: .2s ease;
    border: 1px solid transparent;
}

.sidebar-nav .nav-link i {
    width: 1.25rem;
    text-align: center;
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
    color: #fff;
    background: rgba(84, 124, 255, .28);
    border-color: rgba(150, 176, 255, .3);
}

.app-main {
    margin-left: 270px;
    width: calc(100% - 270px);
    min-height: 100vh;
}

.topbar {
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid var(--tm-border);
    backdrop-filter: blur(10px);
    padding: .85rem 1.35rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-area {
    padding: 1.5rem;
}

.btn-icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: .7rem;
    border: 1px solid var(--tm-border);
    background: #fff;
}

.role-badge {
    background: #e8eeff;
    color: #3855a5;
    border-radius: 999px;
    padding: .35rem .7rem;
    font-weight: 600;
}

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

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--tm-primary-dark);
    border-color: var(--tm-primary-dark);
}

.btn-outline-primary {
    color: var(--tm-primary);
    border-color: #b5c8ff;
}

.btn-outline-primary:hover {
    background: #e8efff;
    color: var(--tm-primary-dark);
    border-color: #9fb7ff;
}

.card-header {
    background: #fbfcff;
    border-bottom-color: var(--tm-border);
}

.form-control,
.form-select {
    border-radius: .7rem;
    border-color: #d8e2fb;
}

.form-control:focus,
.form-select:focus {
    border-color: #93adf8;
    box-shadow: 0 0 0 .15rem rgba(43, 95, 217, .12);
}

.card {
    border: 1px solid var(--tm-border);
    border-radius: 1rem;
    box-shadow: var(--tm-shadow);
}

.premium-stat-card {
    border: 1px solid #e7ecfb;
    border-radius: 1rem;
    background: var(--tm-surface);
    box-shadow: var(--tm-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}

.premium-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 30px rgba(40, 78, 170, 0.14);
}

.premium-stat-card .value {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
}

.premium-stat-card .label {
    margin-top: .4rem;
    font-size: .86rem;
    color: var(--tm-muted);
}

.icon-bubble {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-bubble.primary { background: rgba(43, 95, 217, .12); color: var(--tm-primary); }
.icon-bubble.warning { background: rgba(245, 165, 36, .16); color: #c68000; }
.icon-bubble.success { background: rgba(16, 155, 110, .14); color: #0a8a61; }
.icon-bubble.info { background: rgba(76, 111, 255, .14); color: #3757d5; }

.table-modern {
    margin-bottom: 0;
    vertical-align: middle;
}

.table-modern > :not(caption) > * > * {
    border-bottom-color: #eef2fb;
    padding-top: .85rem;
    padding-bottom: .85rem;
}

.table-modern tbody tr:nth-child(even) {
    background: #fbfcff;
}

.table-modern tbody tr:hover {
    background: #f2f7ff;
}

.status-badge {
    border-radius: 999px;
    padding: .35rem .65rem;
    font-size: .76rem;
    font-weight: 600;
}

.status-badge.badge-requested { background: #fff4db; color: #a56a00; }
.status-badge.badge-approved { background: #def7ed; color: #0e7a55; }
.status-badge.badge-cancelled { background: #ffe3e7; color: #af203b; }
.status-badge.badge-completed { background: #e6ebff; color: #3456cb; }

.btn-action {
    border-radius: .65rem;
    font-weight: 600;
}

.empty-state {
    border: 1px dashed #d8e1f7;
    border-radius: 1rem;
    background: #fcfdff;
    text-align: center;
    padding: 2rem 1rem;
    color: var(--tm-muted);
}

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top left, #79b4ff 0%, #4159d4 40%, #1d2750 100%);
    position: relative;
    overflow: hidden;
}

.auth-background-glow {
    position: absolute;
    width: 540px;
    height: 540px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    filter: blur(20px);
    top: -160px;
    right: -120px;
}

.auth-wrapper {
    width: min(960px, 94vw);
}

.login-shell {
    border-radius: 1.2rem;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(15, 24, 57, .38);
    background: #fff;
}

.login-info {
    background: linear-gradient(180deg, #2448b6 0%, #1a2c71 100%);
    color: #f0f5ff;
    padding: 2.3rem 2rem;
    min-height: 100%;
}

.login-form-panel {
    padding: 2rem;
}

.input-icon-group {
    position: relative;
}

.input-icon-group .form-control {
    padding-left: 2.4rem;
    border-radius: .7rem;
}

.input-icon-group i {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #8ea0c5;
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14, 24, 54, .35);
    z-index: 1000;
    display: none;
}

@media (max-width: 991.98px) {
    .app-sidebar {
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

    .app-main {
        margin-left: 0;
        width: 100%;
    }

    .sidebar-open .app-sidebar {
        transform: translateX(0);
    }

    .sidebar-open .sidebar-overlay {
        display: block;
    }
}