:root {
    --app-primary: #7c3aed;
    --app-primary-dark: #5b21b6;
    --app-primary-soft: #f1eafe;
    --app-accent: #06b6d4;
    --app-success: #10b981;
    --app-excel: #17864f;
    --app-warning: #f59e0b;
    --app-danger: #f43f5e;
    --app-secondary: #665778;
    --app-ink: #172033;
    --app-muted: #6b7280;
    --app-bg: #f7f7fc;
    --app-card: #ffffff;
    --app-border: #e8e6f0;
    --app-field: #fafafe;
    --app-sidebar: 272px;
    --app-sidebar-collapsed: 68px;
    --app-radius: 20px;
    --app-shadow: 0 14px 38px rgba(55, 40, 95, .08);
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
    color: var(--app-ink);
    background:
        radial-gradient(circle at 8% 0%, rgba(124, 58, 237, .055), transparent 26rem),
        var(--app-bg);
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}
a { transition: color .2s ease, background-color .2s ease, transform .2s ease; }
:focus-visible { outline: 3px solid rgba(124, 58, 237, .25); outline-offset: 2px; }

/* Login */
.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    grid-template-columns: minmax(0, 1fr);
    background:
        radial-gradient(circle at 12% 16%, rgba(6, 182, 212, .3), transparent 28%),
        radial-gradient(circle at 88% 78%, rgba(244, 63, 94, .18), transparent 32%),
        linear-gradient(145deg, #17102d, #5b21b6 55%, #7c3aed);
}
.login-page .login-card {
    width: 100%;
    max-width: 430px;
    justify-self: center;
    padding: 38px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 26px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 30px 80px rgba(29, 16, 54, .36);
    backdrop-filter: blur(12px);
}
.login-page .login-logo { width: 118px; height: auto; }
.login-page .form-control { min-height: 50px; border-radius: 13px; }
.login-page .btn-custom { min-height: 50px; border-radius: 13px; font-weight: 700; }

/* Admin navigation */
.admin-layout { min-height: 100vh; overflow-x: hidden; }
.admin-sidebar {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 1040;
    width: var(--app-sidebar);
    height: 100vh;
    padding: 24px 18px;
    color: #fff;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 0%, rgba(124, 58, 237, .4), transparent 18rem),
        linear-gradient(180deg, #171429 0%, #21183d 58%, #171429 100%);
    box-shadow: -14px 0 40px rgba(29, 20, 52, .2);
    transition: width .28s ease, padding .28s ease, transform .28s ease, box-shadow .28s ease;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.admin-sidebar::-webkit-scrollbar { display: none; width: 0; height: 0; }
.admin-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 8px 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.admin-brand-mark {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    flex: 0 0 auto;
    padding: 2px;
    border-radius: 13px;
    background: transparent;
    box-shadow: none;
}
.admin-brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.admin-sidebar-collapse {
    position: absolute;
    top: 22px;
    left: 14px;
    z-index: 2;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    padding: 8px;
    border: 1px solid rgba(0, 0, 0, 0.55);
    border-radius: 13px;
    background: radial-gradient(circle at 50% 0%, rgba(124, 58, 237, .4), transparent 18rem), linear-gradient(180deg, #171429 0%, #21183d 58%, #171429 100%);
    box-shadow: 0 8px 20px rgba(65, 65, 65, 0.2);
    transition: transform .2s ease, background-color .2s ease;
}
.admin-sidebar-collapse:hover { transform: translateY(-2px); transparent; background: #5b21b6; }
.admin-sidebar-collapse img { display: block; width: 100%; height: 100%; object-fit: contain; }
.admin-brand strong { display: block; font-size: 15px; }
.admin-brand small { display: block; color: #cfc5ea; font-size: 12px; }
.admin-user {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px;
    margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    background: rgba(255,255,255,.07);
}
.admin-user img { width: 48px; height: 48px; object-fit: cover; border: 2px solid rgba(255,255,255,.72); }
.admin-avatar-fallback {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    flex: 0 0 48px;
    color: #fff;
    border: 2px solid rgba(255,255,255,.45);
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    font-size: 19px;
    font-weight: 850;
    box-shadow: 0 7px 18px rgba(6,182,212,.18);
}
.admin-user-name { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-role { color: #8eeafb; font-size: 12px; }
.admin-sidebar .nav { gap: 5px; }
.admin-sidebar .nav-link { 
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    color: #e6e0f5;
    border-radius: 12px;
    font-weight: 600;
}
.admin-sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.09); transform: translateX(-2px); }
.admin-sidebar .nav-link.active { color: #fff; background: linear-gradient(135deg, #8b5cf6, #6d28d9); box-shadow: 0 10px 24px rgba(91,33,182,.38); }
.admin-sidebar .nav-icon {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.18));
}
.admin-sidebar .logout-link { margin-top: 10px; color: #ffb7ba; border-top: 1px solid rgba(255,255,255,.1); border-radius: 0 0 12px 12px; }
.admin-menu-toggle {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 1060;
    display: none;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    font-size: 22px;
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    box-shadow: var(--app-shadow);
    transform: translateX(0);
    transition: right .28s ease, transform .2s ease, background-color .2s ease;
}
.admin-menu-toggle:hover { transform: translateY(-2px); }
.admin-overlay { position: fixed; inset: 0; z-index: 1030; display: none; background: rgba(8, 13, 33, .52); backdrop-filter: blur(2px); }
.admin-layout .content,
.admin-layout .admin-content {
    width: auto;
    min-height: 100vh;
    margin-right: var(--app-sidebar);
    padding: 32px !important;
    transition: margin-right .28s ease, width .28s ease;
}
.admin-sidebar-collapsed .admin-sidebar {
    width: var(--app-sidebar-collapsed);
    padding-inline: 12px;
    transform: none;
    box-shadow: -8px 0 24px rgba(29, 20, 52, .14);
}
.admin-sidebar-collapsed .admin-brand,
.admin-sidebar-collapsed .admin-user {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.admin-sidebar-collapsed .admin-sidebar .nav {
    position: absolute;
    top: 78px;
    right: 12px;
    left: 12px;
    display: flex;
    gap: 7px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.admin-sidebar-collapsed .admin-sidebar .nav-link {
    width: 44px;
    height: 44px;
    min-height: 44px;
    justify-content: center;
    gap: 0;
    padding: 10px;
    margin: 0 auto;
    border-radius: 13px;
}
.admin-sidebar-collapsed .admin-sidebar .nav-link span { display: none; }
.admin-sidebar-collapsed .admin-sidebar .nav-icon { width: 25px; height: 25px; flex-basis: 25px; }
.admin-sidebar-collapsed .admin-sidebar .logout-link { margin-top: 7px; border-top: 1px solid rgba(255,255,255,.12); border-radius: 13px; }
.admin-sidebar-collapsed .admin-sidebar-collapse img { transform: rotate(180deg); }
.admin-sidebar .admin-brand,
.admin-sidebar .admin-user,
.admin-sidebar .nav { transition: opacity .16s ease, visibility .16s ease; }
.admin-sidebar-collapsed .content,
.admin-sidebar-collapsed .admin-content { margin-right: var(--app-sidebar-collapsed); }
.admin-layout h1, .admin-layout h2, .admin-layout h3 { font-weight: 800; letter-spacing: -.02em; }
.page-heading { margin-bottom: 24px; }
.page-heading p { margin: 7px 0 0; color: var(--app-muted); }
.page-heading h3::after,
.admin-layout .content > h3:first-child::after,
.admin-layout .admin-content > h3:first-child::after {
    content: "";
    display: block;
    width: 46px;
    height: 4px;
    margin-top: 10px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--app-primary), var(--app-accent));
}

/* Shared cards, forms, and tables */
.card, .report-panel, .form-panel {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
}
.card { overflow: hidden; }
.card-body { padding: 22px; }
.stat-card {
    position: relative;
    min-height: 138px;
    color: var(--app-ink);
    border: 1px solid #e7e3ec;
    background: #fff;
    box-shadow: 0 10px 28px rgba(43, 33, 61, .07);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.stat-card:hover { border-color: #d8d1e2; transform: translateY(-3px); box-shadow: 0 15px 34px rgba(43, 33, 61, .11); }
.stat-card .card-body { display: flex; min-height: 138px; flex-direction: column; justify-content: center; }
.stat-card::after {
    display: none;
}
.stat-card .stat-icon { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #e9e5ee; border-radius: 13px; background: #f6f5f8; font-size: 23px; }
.stat-card .stat-value { margin-top: 0; color: #221a2d; font-size: clamp(25px, 3vw, 34px); font-weight: 850; }
.stat-card .stat-label { color: #716a7a; font-size: 14px; }
.stat-primary,
.stat-success,
.stat-warning,
.stat-danger,
.stat-violet { color: var(--app-ink); background: #fff; }

/* Modern forms */
.admin-layout .content > form:not(.d-inline),
.admin-layout .admin-content > form:not(.d-inline),
.admin-layout .form-panel {
    padding: 20px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: rgba(255,255,255,.92);
    box-shadow: var(--app-shadow);
}
.admin-layout .content > form.w-50 { width: min(100%, 720px) !important; }
.form-label, label { color: #3f3a4d; font-size: 14px; font-weight: 750; }
.form-control, .form-select {
    min-height: 48px;
    padding: .72rem .9rem;
    color: var(--app-ink);
    border: 1px solid #ddd8e8;
    border-radius: 14px;
    background-color: var(--app-field);
    box-shadow: none !important;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.form-control::placeholder { color: #9b95a8; }
.form-control:hover, .form-select:hover { border-color: #c9c0dc; background-color: #fff; }
.form-control:focus, .form-select:focus {
    border-color: var(--app-primary);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(124,58,237,.11) !important;
}
textarea.form-control { min-height: 110px; resize: vertical; }
input[type="file"].form-control { padding: .38rem; background: #fff; }
input[type="file"]::file-selector-button {
    padding: .55rem .8rem;
    margin-inline-end: .75rem;
    color: var(--app-primary-dark);
    border: 0;
    border-radius: 10px;
    background: var(--app-primary-soft);
    font-weight: 750;
    cursor: pointer;
}
.form-text, small.text-muted { color: var(--app-muted) !important; }

/* Modern buttons */
.btn { min-height: 42px; padding: .58rem .95rem; border-radius: 12px; font-weight: 720; box-shadow: none; }
.btn-sm { min-height: 34px; padding: .36rem .65rem; border-radius: 10px; }
.btn-primary { border-color: var(--app-primary); background: linear-gradient(135deg, #8b5cf6, #6d28d9); box-shadow: 0 8px 18px rgba(109,40,217,.18); }
.btn-primary:hover, .btn-primary:focus { border-color: var(--app-primary-dark); background: linear-gradient(135deg, #7c3aed, #5b21b6); transform: translateY(-1px); }
.btn-success { border-color: var(--app-success); background: linear-gradient(135deg, #20c997, #0d9b75); }
.btn-danger { border-color: var(--app-danger); background: linear-gradient(135deg, #fb7185, #e11d48); }
.btn-warning { border-color: #f6b93b; background: #ffc95c; }
.btn-secondary { border-color: var(--app-secondary); background: linear-gradient(135deg, #7c6b91, #574666); }
.btn-dark { border-color: #2e2142; background: linear-gradient(135deg, #44345d, #241934); }
.btn-light { color: #5f536b; border-color: #e7e0ed; background: #f8f5fa; }
.btn-info { color: #fff; border-color: #0891b2; background: linear-gradient(135deg, #22b8cf, #087f9c); }
.btn-outline-primary { color: var(--app-primary); border-color: #bca7ed; }
.btn-outline-primary:hover { border-color: var(--app-primary); background: var(--app-primary); }
.btn-outline-success { color: var(--app-excel); border-color: #80c8a1; }
.btn-outline-success:hover { color: #fff; border-color: var(--app-excel); background: var(--app-excel); }
.btn-outline-dark { color: #44345d; border-color: #aa9db8; }
.btn-outline-info { color: #087f9c; border-color: #8ad7e4; }
.bg-primary { background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important; }
.bg-secondary { background: linear-gradient(135deg, #7c6b91, #574666) !important; }
.bg-success { background: linear-gradient(135deg, #20c997, #0d9b75) !important; }
.bg-danger { background: linear-gradient(135deg, #fb7185, #e11d48) !important; }
.bg-warning { background: linear-gradient(135deg, #ffd36e, #f3b32b) !important; }
.text-primary { color: var(--app-primary) !important; }
.text-success { color: #0b8d68 !important; }
.text-danger { color: #d7264d !important; }
.modal-content { overflow: hidden; border: 1px solid var(--app-border); border-radius: 20px; box-shadow: 0 24px 70px rgba(35,22,59,.22); }
.modal-header, .modal-footer { border-color: var(--app-border); background: #fbf9fd; }

/* Modern tables */
.table-responsive,
.dataTables_wrapper {
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: #fff;
    box-shadow: var(--app-shadow);
    scrollbar-width: thin;
    scrollbar-color: #b8a7dc #f2eff8;
}
.table-responsive::-webkit-scrollbar, .dataTables_wrapper::-webkit-scrollbar { height: 8px; }
.table-responsive::-webkit-scrollbar-track, .dataTables_wrapper::-webkit-scrollbar-track { background: #f2eff8; }
.table-responsive::-webkit-scrollbar-thumb, .dataTables_wrapper::-webkit-scrollbar-thumb { border-radius: 99px; background: #b8a7dc; }
.table {
    margin-bottom: 0;
    color: var(--app-ink);
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
}
.table > :not(caption) > * > * { padding: 15px 14px; border-width: 0 0 1px; border-color: #eeeaf4; vertical-align: middle; }
.table thead th,
.table-dark th,
.table .table-dark th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: #4b2c76 !important;
    background: linear-gradient(180deg, #f7f2ff, #f2ecfb) !important;
    border-bottom: 1px solid #ddd0f1 !important;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .02em;
    white-space: nowrap;
}
.table tbody tr:nth-child(even) > * { background-color: #fcfbfe; }
.table tbody tr:hover > * { background-color: #f7f2ff; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table-bordered > :not(caption) > * { border-width: 0; }
.table-bordered > :not(caption) > * > * { border-inline-width: 0; }
.table img.rounded-circle { border: 2px solid #e6ddf5; box-shadow: 0 4px 12px rgba(65,42,102,.12); }
.dataTables_wrapper { padding: 16px; }
.dataTables_wrapper table { margin-top: 14px !important; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { min-height: 40px; border: 1px solid #ddd8e8; border-radius: 10px; background: var(--app-field); }

/* Keep native select arrows on the left throughout the RTL interface. */
select:not([multiple]) {
    padding-right: .9rem !important;
    padding-left: 2.6rem !important;
    direction: rtl;
    text-align: right;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236a4a92' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: left .9rem center !important;
    background-size: 16px 12px !important;
}
select:not([multiple]) option { direction: rtl; text-align: right; }

.dataTables_wrapper .dataTables_info { padding: 14px 4px 4px !important; color: var(--app-muted); }
.dataTables_wrapper .dataTables_paginate { padding-top: 10px !important; }
.dataTables_wrapper > .row:first-child {
    align-items: center;
    margin: 0 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eeeaf4;
}
.dataTables_wrapper > .row:last-child { align-items: center; margin: 12px 0 0; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.dataTables_wrapper .dataTables_filter { text-align: left !important; }
.dataTables_wrapper .dataTables_filter input { width: min(230px, 60vw); margin: 0 !important; }
.app-data-search-label { display: inline-flex; gap: 6px; align-items: center; color: #554b60; font-weight: 750; white-space: nowrap; }
.app-data-search-label img { width: 19px; height: 19px; padding: 3px; border-radius: 6px; background: var(--app-primary-soft); object-fit: contain; opacity: .78; }
.table .btn { white-space: nowrap; }

/* Expense requests table */
.expense-filter-form { align-items: end; }
.filter-actions { display: flex; justify-content: flex-start; gap: 10px; flex-wrap: wrap; }
.filter-actions .btn,
.filter-actions .app-excel-button,
.filter-actions .app-search-button { min-width: 150px; }
#expensesTable_wrapper { max-width: 100%; overflow: visible; }
#expensesTable {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
}
#expensesTable th, #expensesTable td {
    padding: 12px 7px;
    overflow-wrap: anywhere;
    white-space: normal;
    font-size: 14px;
    text-align: center;
}
#expensesTable th:nth-child(1) { width: 4%; }
#expensesTable th:nth-child(2) { width: 8%; }
#expensesTable th:nth-child(3) { width: 9%; }
#expensesTable th:nth-child(4) { width: 8%; }
#expensesTable th:nth-child(5) { width: 9%; }
#expensesTable th:nth-child(6) { width: 14%; }
#expensesTable th:nth-child(7) { width: 12%; }
#expensesTable th:nth-child(8) { width: 9%; }
#expensesTable th:nth-child(9) { width: 15%; }
#expensesTable th:nth-child(10) { width: 12%; }
.expense-amount-cell { color: #3f2868; font-weight: 850; }
.expense-description-cell { line-height: 1.55; }
.expense-date-cell { color: var(--app-muted); direction: ltr; font-size: 13px !important; }
.expense-decision-form {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
}
.expense-decision-button { display: grid; width: 43px; height: 43px; flex: 0 0 43px; padding: 7px; place-items: center; border: 1px solid #e3ddea; border-radius: 13px; background: #fff; box-shadow: 0 6px 15px rgba(50,31,82,.08); cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.expense-decision-button img { display: block; width: 27px; height: 27px; object-fit: contain; }
.expense-decision-button--accept { border-color: #b9e5c0; background: #f0fbf2; }
.expense-decision-button--reject { border-color: #f0bbc6; background: #fff1f4; }
.expense-decision-button--reject img { width: 24px; height: 24px; }
.expense-decision-button:hover { transform: translateY(-2px) scale(1.03); }
.expense-decision-button--accept:hover { border-color: #4caf50; box-shadow: 0 9px 20px rgba(76,175,80,.2); }
.expense-decision-button--reject:hover { border-color: #e64261; box-shadow: 0 9px 20px rgba(230,66,97,.18); }
.expense-decision-button--accept.is-current { border-color: #4caf50; box-shadow: 0 0 0 3px rgba(76,175,80,.16), 0 8px 18px rgba(76,175,80,.16); }
.expense-decision-button--reject.is-current { border-color: #e64261; box-shadow: 0 0 0 3px rgba(230,66,97,.14), 0 8px 18px rgba(230,66,97,.14); }
.expense-thumbnails { display: flex; justify-content: center; gap: 5px; flex-wrap: wrap; min-width: 0; }
.expense-thumbnail-link { display: block; width: 38px; height: 38px; overflow: hidden; border: 2px solid #fff; border-radius: 10px; box-shadow: 0 4px 13px rgba(55,40,95,.14); }
.expense-thumbnail { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.expense-thumbnail-link:hover .expense-thumbnail { transform: scale(1.08); }
.no-image-placeholder { display: inline-flex; padding: 7px 10px; color: #81788f; border: 1px dashed #d7cde6; border-radius: 10px; background: #faf8fd; font-size: 12px; white-space: nowrap; }
.badge { padding: .5em .7em; border-radius: 999px; font-weight: 700; }
.alert { border: 1px solid rgba(124,58,237,.12); border-radius: 15px; box-shadow: 0 8px 18px rgba(55,40,95,.05); }
.pagination .page-link { margin: 0 3px; color: var(--app-primary); border: 1px solid #ede8f5; border-radius: 10px !important; background: #fff; }
.pagination .active .page-link { background: var(--app-primary); color: #fff; border-color: var(--app-primary); }
.section-card { background: #fff; }
.empty-state { padding: 36px 20px; color: var(--app-muted); text-align: center; }

/* Admin expense types actions */
.admin-expense-types-page .expense-types-table th:last-child,
.admin-expense-types-page .expense-types-table td:last-child {
    width: 112px;
    min-width: 112px;
    text-align: center;
}
.admin-table-actions {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 4px;
    border: 1px solid #ebe4f2;
    border-radius: 14px;
    background: #faf8fd;
}
.expense-action-form { display: inline-flex; margin: 0; padding: 0 !important; background: transparent !important; box-shadow: none !important; }
.admin-icon-action {
    display: inline-grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    overflow: hidden;
    color: #fff;
    border: 0;
    border-radius: 11px;
    box-shadow: 0 7px 15px rgba(61,38,92,.14);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.admin-icon-action--edit { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.admin-icon-action--delete { background: linear-gradient(135deg, #fb5a75, #e11d48); }
.admin-icon-action img { width: 19px; height: 19px; object-fit: contain; filter: brightness(0) invert(1); }
.admin-icon-action--delete img { width: 18px; height: 18px; }
.admin-icon-action:hover { transform: translateY(-2px); box-shadow: 0 10px 19px rgba(61,38,92,.22); filter: saturate(1.08); }
.admin-icon-action:focus-visible { outline: 3px solid rgba(124,58,237,.25); outline-offset: 2px; }
.admin-icon-action--delete:focus-visible { outline-color: rgba(225,29,72,.25); }
.app-save-button {
    display: inline-flex;
    width: auto;
    min-width: 92px;
    height: 42px;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    color: #fff;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    box-shadow: 0 8px 17px rgba(109,40,217,.22);
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.app-save-button img { width: 20px; height: 20px; object-fit: contain; filter: brightness(0) invert(1); }
.app-save-button span { line-height: 1; }
.app-save-button:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 11px 21px rgba(109,40,217,.3); filter: saturate(1.08); }
.app-save-button:focus-visible { outline: 3px solid rgba(124,58,237,.25); outline-offset: 2px; }
.app-save-button:disabled { opacity: .65; cursor: wait; transform: none; }
.modal-footer .app-save-button { margin-inline-end: auto; }
.app-excel-button {
    display: inline-flex;
    min-height: 44px;
    gap: 9px;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    color: #fff;
    border: 1px solid #1b8954;
    border-radius: 12px;
    background: linear-gradient(135deg, #269860, #147746);
    box-shadow: 0 8px 18px rgba(20,119,70,.2);
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}
.app-excel-button img { width: 25px; height: 25px; padding: 3px; border-radius: 7px; background: #fff; object-fit: contain; }
.app-excel-button:hover { color: #fff; background: linear-gradient(135deg, #218d58, #10673c); transform: translateY(-2px); box-shadow: 0 11px 22px rgba(20,119,70,.28); }
.app-search-button {
    display: inline-flex;
    min-height: 44px;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    color: #fff;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    box-shadow: 0 8px 18px rgba(109,40,217,.2);
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
}
.app-search-button img { width: 19px; height: 19px; object-fit: contain; filter: brightness(0) invert(1); }
.app-search-button:hover { color: #fff; background: linear-gradient(135deg, #7c3aed, #5b21b6); transform: translateY(-2px); box-shadow: 0 11px 22px rgba(109,40,217,.28); }
.app-add-button {
    display: inline-flex;
    min-height: 44px;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    color: #fff;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    box-shadow: 0 8px 18px rgba(109,40,217,.2);
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.app-add-button--sm { min-height: 38px; padding: 7px 11px; border-radius: 10px; font-size: 11px; }
.app-add-button img { width: 19px; height: 19px; object-fit: contain; filter: brightness(0) invert(1); }
.app-add-button--sm img { width: 16px; height: 16px; }
.app-add-button:hover { color: #fff; background: linear-gradient(135deg, #7c3aed, #5b21b6); transform: translateY(-2px); box-shadow: 0 11px 22px rgba(109,40,217,.28); }
.app-add-section-header { display: flex; gap: 8px; align-items: center; }
.app-add-section-header img { width: 20px; height: 20px; object-fit: contain; filter: brightness(0) invert(1); }
.app-search-field { position: relative; min-width: 0; }
.app-search-field-icon { position: absolute; top: 50%; right: 13px; z-index: 2; width: 19px; height: 19px; object-fit: contain; opacity: .58; transform: translateY(-50%); pointer-events: none; }
.app-search-field .form-control { padding-right: 42px; }
.app-icon-action {
    display: inline-grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 11px;
    box-shadow: 0 7px 15px rgba(61,38,92,.14);
    text-decoration: none;
}
.app-icon-action--edit { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.app-icon-action--delete { background: linear-gradient(135deg, #fb5a75, #e11d48); }
.app-icon-action--disable { background: linear-gradient(135deg, #ffb84d, #e87913); }
.app-icon-action img { width: 19px; height: 19px; object-fit: contain; filter: brightness(0) invert(1); }
.app-icon-action:hover { transform: translateY(-2px); box-shadow: 0 10px 19px rgba(61,38,92,.22); }
.app-edit-button { color: #fff !important; background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important; box-shadow: 0 7px 15px rgba(109,40,217,.18); }
.app-edit-button img { width: 15px; height: 15px; object-fit: contain; filter: brightness(0) invert(1); }
.app-edit-button:hover { color: #fff !important; transform: translateY(-2px); }

@media (max-width: 575.98px) {
    .admin-expense-types-page .expense-types-table th:last-child,
    .admin-expense-types-page .expense-types-table td:last-child { width: 96px; min-width: 96px; }
    .admin-table-actions { gap: 6px; padding: 3px; border-radius: 12px; }
    .admin-icon-action { width: 34px; height: 34px; border-radius: 10px; }
    .admin-icon-action img { width: 17px; height: 17px; }
    .app-save-button { width: auto; min-width: 84px; height: 40px; padding-inline: 13px; border-radius: 11px; }
    .app-save-button img { width: 18px; height: 18px; }
    .app-excel-button { min-height: 40px; padding: 7px 12px; }
    .app-excel-button img { width: 22px; height: 22px; }
    .app-icon-action { width: 34px; height: 34px; border-radius: 10px; }
}

/* Reports */
.report-summary-cards .stat-card .card-body { align-items: center; text-align: center; }
.report-filter { padding: 18px; margin-bottom: 22px; background: #fff; }
.report-panel { height: 100%; padding: 22px; background: #fff; }
.report-panel h5 { margin-bottom: 18px; font-weight: 800; }
.report-chart { position: relative; min-height: 300px; }
.trend-chart { display: flex; align-items: center; min-height: 300px; overflow-x: auto; }
.trend-chart svg { width: 100%; min-width: 620px; height: auto; }
.trend-grid { stroke: #e8ecf4; stroke-width: 1; }
.trend-line { fill: none; stroke: var(--app-primary); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.trend-point { fill: var(--app-accent); stroke: #fff; stroke-width: 3; }
.trend-label, .trend-axis-value { fill: #788399; font-size: 12px; }
.trend-value { fill: #283553; font-size: 12px; font-weight: 800; }
.report-list { display: grid; gap: 13px; }
.report-list-item { display: grid; grid-template-columns: minmax(110px,1fr) 2fr auto; gap: 12px; align-items: center; }
.report-list-label { overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.report-bar { height: 9px; overflow: hidden; border-radius: 99px; background: #edf0f6; }
.report-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--app-primary), var(--app-accent)); }
.report-list-value { color: var(--app-muted); font-size: 13px; font-weight: 700; }

/* Employee experience */
.employee-app { min-height: 100vh; padding-bottom: 92px !important; background: radial-gradient(circle at 10% 0%, rgba(124,58,237,.07), transparent 24rem), #f7f7fc !important; }
.employee-topbar {
    position: sticky;
    top: 12px;
    z-index: 1030;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 16px;
    align-items: center;
    width: min(calc(100% - 24px), 940px);
    min-height: 78px;
    margin: 12px auto 22px;
    padding: 12px 16px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 22px;
    background: linear-gradient(135deg, #32135f, #6d28d9 58%, #0891b2);
    box-shadow: 0 16px 38px rgba(76,29,149,.24);
}
.employee-topbar__profile { display: flex; min-width: 0; gap: 11px; align-items: center; }
.employee-topbar__avatar {
    display: grid;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    place-items: center;
    object-fit: cover;
    overflow: hidden;
    color: #4c1d95;
    border: 2px solid rgba(255,255,255,.9);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(20,8,45,.2);
    font-size: 22px;
    font-weight: 900;
}
.employee-topbar__identity { display: grid; min-width: 0; line-height: 1.25; }
.employee-topbar__identity strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.employee-topbar__welcome { margin-bottom: 4px; color: rgba(255,255,255,.7); font-size: 12px; }
.employee-topbar__balance {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 8px 13px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 15px;
    background: rgba(255,255,255,.11);
    backdrop-filter: blur(9px);
}
.employee-topbar__balance > i { color: #fde68a; font-size: 18px; }
.employee-topbar__balance span { display: grid; line-height: 1.25; }
.employee-topbar__balance small { color: rgba(255,255,255,.7); font-size: 10px; }
.employee-topbar__balance strong { direction: ltr; font-size: 15px; }
.employee-topbar__logout {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 13px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    background: rgba(255,255,255,.1);
    text-decoration: none;
    transition: transform .2s ease, background .2s ease;
}
.employee-topbar__logout:hover { color: #fff; background: rgba(255,255,255,.2); transform: translateY(-2px); }
.employee-bottom-nav {
    position: fixed;
    right: 50%;
    bottom: 12px;
    z-index: 1040;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: min(calc(100% - 24px), 720px);
    padding: 8px;
    border: 1px solid rgba(104,71,150,.13);
    border-radius: 22px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 16px 42px rgba(39,24,70,.16);
    backdrop-filter: blur(18px);
    transform: translateX(50%);
}
.employee-bottom-nav a {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 54px;
    gap: 5px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #766d82;
    border-radius: 15px;
    text-align: center;
    text-decoration: none;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}
.employee-bottom-nav a:hover { color: var(--app-primary); background: #f7f2ff; transform: translateY(-2px); }
.employee-bottom-nav a.active { color: #fff; background: linear-gradient(135deg, #7c3aed, #5b21b6); box-shadow: 0 8px 18px rgba(109,40,217,.23); }
.employee-bottom-nav i { font-size: 19px; }
.employee-bottom-nav__custom-icon { width: 19px; height: 19px; object-fit: contain; opacity: .7; }
.employee-bottom-nav a.active .employee-bottom-nav__custom-icon { opacity: 1; filter: brightness(0) invert(1); }
.employee-bottom-nav span { overflow: hidden; max-width: 100%; font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.employee-profile-fallback {
    display: grid;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    place-items: center;
    color: #fff;
    border: 4px solid #eee7fb;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #0891b2);
    font-size: 38px;
    font-weight: 900;
}
.employee-dashboard { padding-bottom: 18px; }
.employee-dashboard__intro {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.employee-dashboard__eyebrow { color: var(--app-primary); font-size: 12px; font-weight: 850; }
.employee-dashboard__intro h1 { margin: 3px 0 4px; color: #251637; font-size: clamp(24px, 4vw, 34px); font-weight: 900; }
.employee-dashboard__intro p { margin: 0; color: var(--app-muted); }
.employee-dashboard__add {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 17px;
    color: #fff;
    border-radius: 15px;
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    box-shadow: 0 10px 22px rgba(109,40,217,.22);
    font-weight: 800;
    text-decoration: none;
}
.employee-dashboard__add:hover { color: #fff; transform: translateY(-2px); }
.employee-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.employee-summary-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-width: 0;
    overflow: hidden;
    padding: 18px;
    border: 1px solid rgba(73,49,111,.08);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(50,31,82,.07);
}
.employee-summary-card::after { position: absolute; bottom: -28px; left: -22px; width: 82px; height: 82px; content: ''; border-radius: 50%; background: currentColor; opacity: .06; }
.employee-summary-card__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: currentColor; font-size: 18px; }
.employee-summary-card__icon i { color: #fff; }
.employee-summary-card > div { display: grid; min-width: 0; }
.employee-summary-card > div > span { color: #665b72; font-size: 12px; font-weight: 750; }
.employee-summary-card strong { overflow: hidden; margin: 4px 0 2px; color: #251637; direction: ltr; font-size: clamp(17px, 2.2vw, 23px); font-weight: 900; text-align: right; text-overflow: ellipsis; }
.employee-summary-card small { color: #9a91a3; font-size: 10px; }
.employee-summary-card--approved { color: #10a778; }
.employee-summary-card--pending { color: #e49a0a; }
.employee-summary-card--rejected { color: #e64261; }
.employee-summary-card--requests { color: #7c3aed; }
.employee-recent-panel { padding: 20px; border: 1px solid rgba(73,49,111,.08); border-radius: 22px; background: rgba(255,255,255,.88); box-shadow: 0 12px 32px rgba(50,31,82,.07); }
.employee-recent-panel__header { display: flex; gap: 15px; align-items: center; justify-content: space-between; padding: 0 2px 16px; border-bottom: 1px solid #eee9f4; }
.employee-recent-panel__header span { color: var(--app-primary); font-size: 11px; font-weight: 800; }
.employee-recent-panel__header h2 { margin: 2px 0 0; color: #251637; font-size: 19px; font-weight: 900; }
.employee-recent-panel__header > a { display: inline-flex; gap: 6px; align-items: center; color: var(--app-primary); font-size: 12px; font-weight: 800; text-decoration: none; }
.employee-recent-list { display: grid; }
.employee-recent-expense { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 15px 2px; border-bottom: 1px solid #f0ecf5; }
.employee-recent-expense:last-child { border-bottom: 0; }
.employee-recent-expense__icon { display: grid; width: 44px; height: 44px; place-items: center; color: #7c3aed; border-radius: 14px; background: #f1eafe; font-size: 18px; }
.employee-recent-expense__content { min-width: 0; }
.employee-recent-expense__title { display: flex; gap: 7px; align-items: center; min-width: 0; }
.employee-recent-expense__title strong { overflow: hidden; color: #30223d; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.employee-recent-expense__title span { flex: 0 0 auto; color: #857990; font-size: 11px; }
.employee-recent-expense__content p { overflow: hidden; margin: 4px 0; color: #746a7d; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.employee-recent-expense__content time { display: inline-flex; gap: 5px; align-items: center; color: #a097a8; direction: ltr; font-size: 10px; }
.employee-recent-expense__meta { display: grid; justify-items: end; gap: 5px; }
.employee-recent-expense__meta > strong { color: #251637; direction: ltr; font-size: 15px; font-weight: 900; }
.employee-recent-expense__meta > a { color: var(--app-primary); font-size: 10px; font-weight: 800; text-decoration: none; }
.employee-status { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 99px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.employee-status--approved { color: #087357; background: #d9f8ed; }
.employee-status--pending { color: #8a5600; background: #fff3cf; }
.employee-status--rejected { color: #b51f3a; background: #ffe1e7; }
.employee-dashboard-empty { display: grid; justify-items: center; padding: 42px 20px 30px; text-align: center; }
.employee-dashboard-empty > span { display: grid; width: 64px; height: 64px; margin-bottom: 12px; place-items: center; color: var(--app-primary); border-radius: 20px; background: var(--app-primary-soft); font-size: 26px; }
.employee-dashboard-empty h3 { margin-bottom: 6px; color: #30223d; font-size: 18px; font-weight: 900; }
.employee-dashboard-empty p { margin-bottom: 16px; color: var(--app-muted); font-size: 13px; }
.employee-create-expense { max-width: 940px !important; padding-bottom: 22px; }
.employee-page-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-bottom: 18px; }
.employee-page-heading__icon { display: grid; width: 54px; height: 54px; place-items: center; color: #fff; border-radius: 17px; background: linear-gradient(135deg, #7c3aed, #0891b2); box-shadow: 0 10px 24px rgba(109,40,217,.22); font-size: 22px; }
.employee-page-heading > div:nth-child(2) { min-width: 0; }
.employee-page-heading > div:nth-child(2) > span { color: var(--app-primary); font-size: 11px; font-weight: 850; }
.employee-page-heading h1 { margin: 2px 0 3px; color: #251637; font-size: clamp(23px, 4vw, 32px); font-weight: 900; }
.employee-page-heading p { margin: 0; color: var(--app-muted); font-size: 13px; }
.employee-page-heading > a { display: inline-flex; gap: 6px; align-items: center; color: var(--app-primary); font-size: 12px; font-weight: 850; text-decoration: none; }
.employee-page-heading > a .employee-add-icon { width: 17px; height: 17px; object-fit: contain; opacity: .7; }
.employee-form-message { max-width: 820px; margin: 0 auto 14px; }
.employee-expense-form { display: grid; max-width: 820px; gap: 14px; margin: 0 auto; }
.employee-form-section { padding: 22px; border: 1px solid rgba(73,49,111,.09); border-radius: 22px; background: rgba(255,255,255,.92); box-shadow: 0 10px 30px rgba(50,31,82,.07); }
.employee-form-section > header { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 18px; }
.employee-form-section > header > span { display: grid; flex: 0 0 35px; width: 35px; height: 35px; place-items: center; color: #fff; border-radius: 11px; background: linear-gradient(135deg, #7c3aed, #5b21b6); font-size: 13px; font-weight: 900; }
.employee-form-section > header h2 { margin: 0 0 3px; color: #30223d; font-size: 17px; font-weight: 900; }
.employee-form-section > header p { margin: 0; color: #8a8192; font-size: 11px; }
.employee-form-section--single { padding: 25px; }
.employee-form-section--single > .employee-form-section__title { padding-bottom: 18px; border-bottom: 1px solid #eee9f4; }
.employee-form-section--single > .employee-form-section__title > .employee-form-section__title-icon { display: grid; flex: 0 0 43px; width: 43px; height: 43px; place-items: center; color: #fff; border-radius: 13px; background: linear-gradient(135deg, #7c3aed, #0891b2); font-size: 17px; }
.employee-form-section--single > .employee-form-section__title > .employee-form-section__title-icon + div h2 { font-size: 19px; }
.employee-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.employee-field { position: relative; min-width: 0; }
.employee-field--amount { grid-column: 1 / -1; }
.employee-field--invoice-type { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; }
.employee-field--invoice-type legend { margin-bottom: 7px; color: #4a3b57; font-size: 12px; font-weight: 800; }
.employee-field--invoice-type legend span { color: #e64261; }
.employee-invoice-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.employee-invoice-types > label { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 72px; padding: 12px; border: 1px solid #e3ddea; border-radius: 15px; background: #fbfafe; cursor: pointer; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.employee-invoice-types > label:has(input:checked) { border-color: #8d5edc; background: #f6f0ff; box-shadow: 0 0 0 3px rgba(124,58,237,.08); }
.employee-invoice-types input { position: absolute; opacity: 0; pointer-events: none; }
.employee-invoice-types__icon { display: grid; width: 39px; height: 39px; place-items: center; color: var(--app-primary); border-radius: 12px; background: #ede4fc; }
.employee-invoice-types label > span:nth-of-type(2) { display: grid; min-width: 0; }
.employee-invoice-types strong { color: #44344f; font-size: 12px; }
.employee-invoice-types small { color: #958b9d; font-size: 9px; }
.employee-invoice-types__check { color: #bdb4c5; font-size: 17px; }
.employee-invoice-types input:checked ~ .employee-invoice-types__check { color: var(--app-primary); }
.employee-field > label:first-child { display: block; margin-bottom: 7px; color: #4a3b57; font-size: 12px; font-weight: 800; }
.employee-field > label:first-child > span { color: #e64261; }
.employee-field > label:first-child small { color: #978d9e; font-size: 10px; font-weight: 600; }
.employee-expense-form .form-control, .employee-expense-form .form-select { min-height: 48px; border-color: #e3ddea; border-radius: 14px; background-color: #fbfafe; }
.employee-expense-form textarea.form-control { min-height: 110px; padding-bottom: 26px; resize: vertical; }
.employee-expense-form .form-control:focus, .employee-expense-form .form-select:focus { border-color: #9b6ee8; background: #fff; box-shadow: 0 0 0 4px rgba(124,58,237,.1); }
.employee-amount-input { position: relative; }
.employee-amount-input > i { position: absolute; top: 50%; right: 15px; z-index: 2; color: #9a83ba; transform: translateY(-50%); }
.employee-amount-input .form-control { padding-right: 43px; direction: ltr; text-align: right; font-size: 17px; font-weight: 850; }
.employee-upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.employee-form-divider { display: flex; align-items: center; margin: 23px 0 16px; color: #6a5977; font-size: 12px; font-weight: 850; }
.employee-form-divider::before, .employee-form-divider::after { height: 1px; content: ''; background: #eee9f4; }
.employee-form-divider::before { width: 16px; margin-left: 9px; }
.employee-form-divider::after { flex: 1; margin-right: 9px; }
.employee-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.employee-upload-box { display: grid !important; min-height: 145px; margin: 0 !important; padding: 18px; place-items: center; align-content: center; color: #6d3cb2 !important; border: 2px dashed #cbb7e7; border-radius: 17px; background: #faf7ff; text-align: center; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.employee-upload-box:hover, .employee-file-input:focus + .employee-image-preview { border-color: var(--app-primary); background: #f5efff; }
.employee-upload-box > i { margin-bottom: 9px; font-size: 27px; }
.employee-upload-box > strong { font-size: 13px; }
.employee-upload-box > small { margin-top: 4px; color: #94879e; font-size: 9px; }
.employee-upload-box--secondary { color: #087b91 !important; border-color: #acdce5; background: #f4fcfd; }
.employee-image-preview { display: grid; gap: 8px; margin-top: 9px; }
.employee-image-preview--multiple { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.employee-image-preview > div { display: flex; min-width: 0; gap: 8px; align-items: center; padding: 7px; border: 1px solid #e7e0ef; border-radius: 12px; background: #fff; }
.employee-image-preview img { flex: 0 0 42px; width: 42px; height: 42px; object-fit: cover; border-radius: 9px; }
.employee-image-preview span { overflow: hidden; color: #756b7e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.employee-character-count { position: absolute; bottom: 9px; left: 12px; color: #a39aa9; direction: ltr; font-size: 9px; }
.employee-expense-form__footer { display: flex; gap: 15px; align-items: center; justify-content: space-between; margin-top: 22px; padding: 16px 0 0; border-top: 1px solid #eee9f4; }
.employee-expense-form__footer p { display: inline-flex; gap: 7px; align-items: center; margin: 0; color: #756b7e; font-size: 11px; }
.employee-expense-form__footer p i { color: #10a778; }
.employee-expense-form__footer .btn { display: inline-flex; min-height: 47px; gap: 8px; align-items: center; justify-content: center; padding: 10px 20px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #7c3aed, #5b21b6); font-weight: 850; }
.employee-expenses-page { max-width: 940px !important; padding-bottom: 22px; }
.employee-expenses-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 15px; }
.employee-expenses-summary article { display: flex; min-width: 0; gap: 11px; align-items: center; padding: 14px; border: 1px solid rgba(73,49,111,.08); border-radius: 17px; background: #fff; box-shadow: 0 8px 24px rgba(50,31,82,.06); }
.employee-expenses-summary article > span { display: grid; flex: 0 0 39px; width: 39px; height: 39px; place-items: center; color: #fff; border-radius: 12px; }
.employee-expenses-summary .pending { background: #e49a0a; }
.employee-expenses-summary .rejected { background: #e64261; }
.employee-expenses-summary .total { background: #7c3aed; }
.employee-expenses-summary article > div { display: grid; min-width: 0; }
.employee-expenses-summary small { color: #887d91; font-size: 10px; }
.employee-expenses-summary strong { overflow: hidden; color: #30223d; direction: ltr; font-size: 17px; font-weight: 900; text-align: right; text-overflow: ellipsis; }
.employee-expenses-filter { display: grid; grid-template-columns: minmax(190px, 1fr) auto auto auto; gap: 10px; align-items: center; margin-bottom: 16px; padding: 12px; border: 1px solid rgba(73,49,111,.08); border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(50,31,82,.05); }
.employee-expenses-filter__search { position: relative; }
.employee-expenses-filter__search .app-search-field-icon { position: absolute; top: 50%; right: 13px; }
.employee-expenses-filter__search input { width: 100%; min-height: 42px; padding: 8px 39px 8px 12px; border: 1px solid #e4deeb; border-radius: 13px; outline: none; background: #fbfafe; font-size: 12px; }
.employee-expenses-filter__search input:focus { border-color: #9b6ee8; box-shadow: 0 0 0 4px rgba(124,58,237,.08); }
.employee-expenses-filter__states { display: flex; gap: 4px; padding: 4px; border-radius: 13px; background: #f5f1fa; }
.employee-expenses-filter__states a { padding: 7px 10px; color: #7c7085; border-radius: 10px; font-size: 10px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.employee-expenses-filter__states a.active { color: #fff; background: var(--app-primary); box-shadow: 0 5px 12px rgba(109,40,217,.18); }
.employee-expenses-filter .btn { min-height: 42px; padding: 8px 17px; border: 0; border-radius: 12px; background: var(--app-primary); font-size: 11px; font-weight: 800; }
.employee-expenses-filter__reset { display: grid; width: 39px; height: 39px; place-items: center; color: #e64261; border-radius: 11px; background: #fff0f3; text-decoration: none; }
.employee-expenses-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.employee-expense-item { display: grid; align-content: start; min-width: 0; overflow: hidden; padding: 16px; border: 1px solid rgba(73,49,111,.09); border-radius: 20px; background: #fff; box-shadow: 0 10px 28px rgba(50,31,82,.07); }
.employee-expense-item > header { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.employee-expense-item__identity { display: flex; min-width: 0; gap: 10px; align-items: center; }
.employee-expense-item__identity > img, .employee-expense-item__identity > span { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; object-fit: cover; color: var(--app-primary); border-radius: 14px; background: #f1e9fe; font-size: 18px; }
.employee-expense-item__identity > div { min-width: 0; }
.employee-expense-item h2 { overflow: hidden; margin: 0 0 3px; color: #30223d; font-size: 14px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.employee-expense-item__identity p { overflow: hidden; margin: 0; color: #8a7f92; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.employee-expense-item__meta { display: flex; gap: 7px; flex-wrap: wrap; margin: 13px 0 10px; }
.employee-expense-item__meta span, .employee-expense-item__meta time { display: inline-flex; gap: 5px; align-items: center; padding: 5px 8px; color: #796d83; border-radius: 9px; background: #f7f4fa; direction: rtl; font-size: 9px; }
.employee-expense-item__description { display: -webkit-box; overflow: hidden; min-height: 39px; margin: 0 0 13px; color: #6f6378; font-size: 11px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.employee-expense-item > footer { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid #eee9f4; }
.employee-expense-item > footer > div { display: grid; }
.employee-expense-item > footer small { color: #968b9e; font-size: 9px; }
.employee-expense-item > footer strong { color: #30223d; direction: ltr; font-size: 17px; font-weight: 900; }
.employee-expense-item > footer a { display: inline-flex; gap: 6px; align-items: center; padding: 8px 11px; color: var(--app-primary); border-radius: 11px; background: var(--app-primary-soft); font-size: 10px; font-weight: 850; text-decoration: none; }
.employee-expenses-empty { display: grid; justify-items: center; padding: 48px 20px; border: 1px solid rgba(73,49,111,.08); border-radius: 21px; background: #fff; text-align: center; box-shadow: 0 10px 28px rgba(50,31,82,.06); }
.employee-expenses-empty > span { display: grid; width: 62px; height: 62px; margin-bottom: 12px; place-items: center; color: var(--app-primary); border-radius: 19px; background: var(--app-primary-soft); font-size: 24px; }
.employee-expenses-empty h2 { margin-bottom: 5px; color: #30223d; font-size: 18px; font-weight: 900; }
.employee-expenses-empty p { margin-bottom: 15px; color: var(--app-muted); font-size: 12px; }
.employee-tracking-page { max-width: 940px !important; padding-bottom: 22px; }
.employee-tracking-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 15px; }
.employee-tracking-summary article { display: flex; min-width: 0; gap: 10px; align-items: center; padding: 13px; border: 1px solid rgba(73,49,111,.08); border-radius: 17px; background: #fff; box-shadow: 0 8px 23px rgba(50,31,82,.06); }
.employee-tracking-summary article > span { display: grid; flex: 0 0 37px; width: 37px; height: 37px; place-items: center; color: #fff; border-radius: 12px; }
.employee-tracking-summary .all { background: #7c3aed; }
.employee-tracking-summary .pending { background: #e49a0a; }
.employee-tracking-summary .approved { background: #10a778; }
.employee-tracking-summary .rejected { background: #e64261; }
.employee-tracking-summary article > div { display: grid; min-width: 0; }
.employee-tracking-summary small { color: #887d91; font-size: 9px; }
.employee-tracking-summary strong { color: #30223d; font-size: 17px; font-weight: 900; }
.employee-tracking-list { display: grid; gap: 14px; }
.employee-tracking-item { position: relative; overflow: hidden; padding: 19px; border: 1px solid rgba(73,49,111,.09); border-radius: 21px; background: #fff; box-shadow: 0 10px 29px rgba(50,31,82,.07); }
.employee-tracking-item::before { position: absolute; top: 0; right: 0; width: 4px; height: 100%; content: ''; background: #e49a0a; }
.employee-tracking-item--approved::before { background: #10a778; }
.employee-tracking-item--rejected::before { background: #e64261; }
.employee-tracking-item > header { display: flex; gap: 15px; align-items: center; justify-content: space-between; }
.employee-tracking-item__title { display: flex; min-width: 0; gap: 11px; align-items: center; }
.employee-tracking-item__title > span { display: grid; flex: 0 0 47px; width: 47px; height: 47px; place-items: center; color: var(--app-primary); border-radius: 14px; background: var(--app-primary-soft); font-size: 18px; }
.employee-tracking-item__title > div { min-width: 0; }
.employee-tracking-item__title small { color: #a096a7; font-size: 9px; }
.employee-tracking-item__title h2 { overflow: hidden; margin: 2px 0; color: #30223d; font-size: 15px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.employee-tracking-item__title p { margin: 0; color: #887c90; font-size: 10px; }
.employee-tracking-item__amount { display: grid; flex: 0 0 auto; justify-items: end; }
.employee-tracking-item__amount small { color: #968b9d; font-size: 9px; }
.employee-tracking-item__amount strong { color: #30223d; direction: ltr; font-size: 19px; font-weight: 900; }
.employee-tracking-item__details { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin: 13px 0; }
.employee-tracking-item__details > span:not(.employee-status), .employee-tracking-item__details time { display: inline-flex; gap: 5px; align-items: center; padding: 5px 8px; color: #786d81; border-radius: 9px; background: #f7f4fa; direction: rtl; font-size: 9px; }
.employee-tracking-item__description { margin: 0 0 14px; padding: 10px 12px; color: #6f6378; border-radius: 11px; background: #faf8fc; font-size: 11px; line-height: 1.7; }
.employee-request-progress { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 15px; padding: 18px 0 8px; list-style: none; }
.employee-request-progress::before { position: absolute; top: 35px; right: 16.66%; left: 16.66%; height: 3px; content: ''; border-radius: 99px; background: #e8e2ed; }
.employee-request-progress::after { position: absolute; top: 35px; right: 16.66%; width: 33.33%; height: 3px; content: ''; border-radius: 99px; background: #e49a0a; }
.employee-request-progress--approved::after { width: 66.66%; background: #10a778; }
.employee-request-progress--rejected::after { width: 66.66%; background: #e64261; }
.employee-request-progress li { position: relative; z-index: 1; display: grid; justify-items: center; min-width: 0; text-align: center; }
.employee-request-progress li > span { display: grid; width: 36px; height: 36px; margin-bottom: 7px; place-items: center; color: #a79dad; border: 3px solid #fff; border-radius: 50%; background: #e8e2ed; box-shadow: 0 0 0 1px #e5deeb; font-size: 11px; }
.employee-request-progress li.complete > span { color: #fff; background: #7c3aed; }
.employee-request-progress li.current > span { color: #fff; background: #e49a0a; box-shadow: 0 0 0 4px #fff3cf; }
.employee-request-progress li.approved > span { background: #10a778; }
.employee-request-progress li.rejected > span { background: #e64261; }
.employee-request-progress li > div { display: grid; min-width: 0; }
.employee-request-progress strong { color: #4a3c54; font-size: 10px; }
.employee-request-progress small { color: #9b91a2; font-size: 8px; }
.employee-tracking-item > footer { display: flex; gap: 8px; justify-content: flex-end; padding-top: 12px; border-top: 1px solid #eee9f4; }
.employee-tracking-item > footer a { display: inline-flex; gap: 6px; align-items: center; padding: 8px 11px; color: var(--app-primary); border-radius: 10px; background: var(--app-primary-soft); font-size: 10px; font-weight: 800; text-decoration: none; }
.employee-tracking-item > footer .employee-tracking-item__retry { color: #b51f3a; background: #ffe8ed; }
.employee-profile-page { max-width: 940px !important; padding-bottom: 22px; }
.employee-profile-message { display: flex; max-width: 900px; gap: 8px; align-items: center; margin: 0 auto 15px; }
.employee-profile-layout { display: grid; grid-template-columns: minmax(250px, .75fr) minmax(0, 1.45fr); gap: 16px; max-width: 900px; margin: 0 auto; }
.employee-profile-card, .employee-security-card { overflow: hidden; border: 1px solid rgba(73,49,111,.09); border-radius: 22px; background: #fff; box-shadow: 0 10px 30px rgba(50,31,82,.07); }
.employee-profile-card { position: relative; padding: 0 18px 18px; text-align: center; }
.employee-profile-card__cover { height: 94px; margin: 0 -18px; background: radial-gradient(circle at 22% 20%, rgba(255,255,255,.28), transparent 30%), linear-gradient(135deg, #4c1d95, #7c3aed 60%, #0891b2); }
.employee-profile-card__avatar-wrap { position: relative; width: 112px; height: 112px; margin: -56px auto 10px; }
.employee-profile-card__avatar { display: grid; width: 112px; height: 112px; place-items: center; object-fit: cover; color: #fff; border: 5px solid #fff; border-radius: 30px; background: linear-gradient(135deg, #7c3aed, #0891b2); box-shadow: 0 10px 24px rgba(50,31,82,.2); font-size: 38px; font-weight: 900; }
.employee-profile-card__camera { position: absolute; right: -5px; bottom: -3px; display: grid; width: 36px; height: 36px; margin: 0; place-items: center; color: #fff; border: 3px solid #fff; border-radius: 12px; background: var(--app-primary); box-shadow: 0 5px 13px rgba(70,38,120,.25); cursor: pointer; }
.employee-profile-card__identity h2 { margin: 0 0 5px; color: #30223d; font-size: 20px; font-weight: 900; }
.employee-profile-card__identity > span { display: inline-flex; gap: 5px; align-items: center; padding: 5px 9px; color: #087357; border-radius: 99px; background: #d9f8ed; font-size: 9px; font-weight: 800; }
.employee-profile-card__identity > span.disabled { color: #b51f3a; background: #ffe1e7; }
.employee-profile-card__identity > span i { font-size: 6px; }
.employee-profile-card__identity p { margin: 6px 0 12px; color: #8d8295; font-size: 11px; }
.employee-profile-card__upload-note { display: flex; gap: 6px; align-items: center; justify-content: center; min-height: 38px; margin-bottom: 13px; padding: 8px; color: #7f7288; border: 1px dashed #d9cde6; border-radius: 11px; background: #faf8fc; font-size: 9px; }
.employee-profile-card__upload-note.selected { color: #087357; border-color: #a9e8d5; background: #effbf7; }
.employee-profile-card__details { display: grid; gap: 8px; margin: 0; }
.employee-profile-card__details > div { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border-radius: 10px; background: #f8f5fa; }
.employee-profile-card__details dt { display: inline-flex; gap: 6px; align-items: center; color: #83768c; font-size: 9px; font-weight: 700; }
.employee-profile-card__details dd { margin: 0; color: #44364f; direction: ltr; font-size: 10px; font-weight: 850; }
.employee-security-card { padding: 22px; }
.employee-security-card > header { display: flex; gap: 11px; align-items: center; margin-bottom: 16px; }
.employee-security-card > header > span { display: grid; flex: 0 0 43px; width: 43px; height: 43px; place-items: center; color: #fff; border-radius: 13px; background: linear-gradient(135deg, #7c3aed, #5b21b6); font-size: 17px; }
.employee-security-card > header h2 { margin: 0 0 3px; color: #30223d; font-size: 18px; font-weight: 900; }
.employee-security-card > header p { margin: 0; color: #8d8295; font-size: 10px; }
.employee-security-card__notice { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 16px; padding: 10px 12px; color: #6b577c; border-radius: 11px; background: #f5efff; font-size: 10px; line-height: 1.6; }
.employee-security-card__notice i { margin-top: 3px; color: var(--app-primary); }
.employee-password-field { margin-bottom: 13px; }
.employee-password-field > label { display: block; margin-bottom: 6px; color: #4d3e57; font-size: 11px; font-weight: 800; }
.employee-password-field > div { position: relative; }
.employee-password-field > div > i { position: absolute; top: 50%; right: 14px; z-index: 2; color: #9b8da5; transform: translateY(-50%); }
.employee-password-field .form-control { min-height: 48px; padding-right: 41px; padding-left: 43px; border-color: #e3ddea; border-radius: 14px; background: #fbfafe; }
.employee-password-field .form-control:focus { border-color: #9b6ee8; background: #fff; box-shadow: 0 0 0 4px rgba(124,58,237,.09); }
.employee-password-toggle { position: absolute; top: 50%; left: 8px; display: grid; width: 34px; height: 34px; place-items: center; color: #81758a; border: 0; border-radius: 9px; background: transparent; transform: translateY(-50%); }
.employee-password-field > small { display: block; min-height: 16px; margin-top: 4px; font-size: 9px; }
.employee-password-field > small.valid { color: #087357; }
.employee-password-field > small.invalid { color: #b51f3a; }
.employee-password-rules { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.employee-password-rules span { display: inline-flex; gap: 5px; align-items: center; padding: 5px 8px; color: #918698; border-radius: 9px; background: #f7f4f9; font-size: 8px; }
.employee-password-rules span i { font-size: 5px; }
.employee-password-rules span.valid { color: #087357; background: #e6f9f2; }
.employee-security-card > footer { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid #eee9f4; }
.employee-security-card > footer p { display: inline-flex; gap: 6px; align-items: center; margin: 0; color: #8a7f92; font-size: 9px; }
.employee-security-card > footer .btn { display: inline-flex; min-height: 45px; gap: 7px; align-items: center; justify-content: center; padding: 9px 17px; border: 0; border-radius: 13px; background: linear-gradient(135deg, #7c3aed, #5b21b6); font-size: 11px; font-weight: 850; }
.employee-edit-page { max-width: 940px !important; padding-bottom: 22px; }
.employee-edit-message { max-width: 820px; margin: 0 auto 14px; }
.employee-edit-status { display: flex; max-width: 820px; gap: 11px; align-items: center; margin: 0 auto 14px; padding: 11px 13px; border: 1px solid #f2dda9; border-radius: 14px; background: #fff9e9; }
.employee-edit-status--approved { border-color: #bcebdc; background: #effbf7; }
.employee-edit-status--rejected { border-color: #f2c5cf; background: #fff2f5; }
.employee-edit-status p { margin: 0; color: #74677d; font-size: 10px; }
.employee-edit-form { max-width: 820px; }
.employee-edit-images { display: grid; grid-template-columns: minmax(220px, .85fr) minmax(0, 1.15fr); gap: 15px; }
.employee-main-receipt { position: relative; display: grid; min-height: 180px; overflow: hidden; place-items: center; border: 1px dashed #cfbfdf; border-radius: 17px; background: #faf8fc; }
.employee-main-receipt > img { width: 100%; height: 210px; object-fit: contain; background: #f3eff6; }
.employee-main-receipt > span { display: grid; gap: 7px; justify-items: center; color: #95899d; font-size: 10px; }
.employee-main-receipt > span i { font-size: 25px; }
.employee-main-receipt > label { position: absolute; right: 10px; bottom: 10px; display: inline-flex; gap: 6px; align-items: center; padding: 8px 11px; color: #fff; border-radius: 10px; background: rgba(76,29,149,.9); box-shadow: 0 5px 13px rgba(50,31,82,.2); font-size: 9px; font-weight: 800; cursor: pointer; backdrop-filter: blur(8px); }
.employee-additional-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-height: 112px; }
.employee-additional-gallery > div { position: relative; overflow: hidden; aspect-ratio: 1; border: 1px solid #e7dfed; border-radius: 13px; background: #f7f3f9; }
.employee-additional-gallery img { width: 100%; height: 100%; object-fit: cover; }
.employee-additional-gallery button { position: absolute; top: 5px; left: 5px; display: grid; width: 29px; height: 29px; padding: 0; place-items: center; color: #fff; border: 2px solid #fff; border-radius: 9px; background: #e64261; font-size: 10px; }
.employee-additional-gallery button img { width: 14px; height: 14px; object-fit: contain; filter: brightness(0) invert(1); }
.employee-gallery-empty { display: grid; grid-column: 1 / -1; gap: 7px; min-height: 110px; place-items: center; align-content: center; color: #95899d; border: 1px dashed #d9cfe3; border-radius: 14px; background: #faf8fc; font-size: 10px; }
.employee-gallery-empty i { font-size: 23px; }
.employee-add-images-button { display: inline-flex !important; width: fit-content; gap: 6px; align-items: center; margin-top: 9px !important; padding: 8px 11px; color: var(--app-primary) !important; border-radius: 10px; background: var(--app-primary-soft); font-size: 9px !important; cursor: pointer; }
.employee-add-images-button img { width: 15px; height: 15px; object-fit: contain; opacity: .7; }
.employee-edit-cancel { display: inline-flex; min-height: 43px; align-items: center; padding: 9px 14px; color: #796d82; border-radius: 12px; background: #f5f1f7; font-size: 10px; font-weight: 800; text-decoration: none; }
.employee-edit-cancel:hover { color: var(--app-primary); }
.employee-app > .container { max-width: 940px; }
.employee-app .form-control,
.employee-app .form-select { width: 100%; }

@media (max-width: 575.98px) {
    .employee-topbar { top: 6px; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; min-height: 70px; margin-top: 6px; padding: 9px 10px; border-radius: 18px; }
    .employee-topbar__avatar { flex-basis: 44px; width: 44px; height: 44px; border-radius: 13px; font-size: 18px; }
    .employee-topbar__identity strong { max-width: 92px; font-size: 14px; }
    .employee-topbar__balance { padding: 7px 9px; }
    .employee-topbar__balance > i, .employee-topbar__balance small { display: none; }
    .employee-topbar__balance strong { font-size: 13px; }
    .employee-topbar__logout { width: 40px; min-height: 40px; padding: 0; }
    .employee-topbar__logout span { display: none; }
    .employee-bottom-nav { bottom: 7px; width: calc(100% - 14px); padding: 6px; border-radius: 18px; }
    .employee-bottom-nav a { min-height: 51px; padding: 4px 2px; border-radius: 13px; }
    .employee-bottom-nav i { font-size: 18px; }
    .employee-bottom-nav span { font-size: 9px; }
    .employee-dashboard { padding-right: 12px; padding-left: 12px; }
    .employee-dashboard__intro { align-items: flex-end; margin-bottom: 14px; }
    .employee-dashboard__intro p { max-width: 210px; font-size: 12px; }
    .employee-dashboard__add { width: 45px; min-height: 45px; padding: 0; border-radius: 14px; }
    .employee-dashboard__add span { display: none; }
    .employee-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .employee-summary-card { grid-template-columns: 1fr; gap: 9px; padding: 14px; }
    .employee-summary-card__icon { width: 36px; height: 36px; border-radius: 11px; font-size: 15px; }
    .employee-summary-card strong { font-size: 18px; }
    .employee-recent-panel { padding: 14px; border-radius: 18px; }
    .employee-recent-panel__header h2 { font-size: 16px; }
    .employee-recent-expense { grid-template-columns: auto minmax(0, 1fr); padding: 13px 0; }
    .employee-recent-expense__icon { width: 38px; height: 38px; border-radius: 12px; font-size: 15px; }
    .employee-recent-expense__meta { grid-column: 2; grid-template-columns: auto 1fr auto; width: 100%; align-items: center; justify-items: start; }
    .employee-recent-expense__meta > strong { justify-self: center; }
    .employee-recent-expense__meta > a { justify-self: end; }
    .employee-page-heading { grid-template-columns: auto minmax(0, 1fr); }
    .employee-page-heading__icon { width: 46px; height: 46px; border-radius: 14px; font-size: 18px; }
    .employee-page-heading p { font-size: 11px; }
    .employee-page-heading > a { grid-column: 2; }
    .employee-form-section { padding: 17px 14px; border-radius: 18px; }
    .employee-form-grid, .employee-upload-grid { grid-template-columns: 1fr; }
    .employee-field--amount { grid-column: auto; }
    .employee-field--invoice-type { grid-column: auto; }
    .employee-invoice-types { grid-template-columns: 1fr; }
    .employee-upload-box { min-height: 126px; }
    .employee-image-preview--multiple { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .employee-expense-form__footer { align-items: stretch; flex-direction: column; padding: 14px; }
    .employee-expense-form__footer p { justify-content: center; text-align: center; }
    .employee-expense-form__footer .btn,
    .employee-expense-form__footer .app-save-button { width: 100%; }
    .employee-expenses-summary { gap: 8px; }
    .employee-expenses-summary article { gap: 7px; padding: 10px 8px; border-radius: 14px; }
    .employee-expenses-summary article > span { flex-basis: 32px; width: 32px; height: 32px; border-radius: 10px; font-size: 12px; }
    .employee-expenses-summary small { font-size: 8px; }
    .employee-expenses-summary strong { font-size: 14px; }
    .employee-expenses-filter { grid-template-columns: 1fr auto; }
    .employee-expenses-filter__search { grid-column: 1 / -1; }
    .employee-expenses-filter__states { overflow-x: auto; }
    .employee-expenses-grid { grid-template-columns: 1fr; }
    .employee-expense-item { border-radius: 17px; }
    .employee-tracking-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .employee-tracking-summary article { padding: 10px; border-radius: 14px; }
    .employee-tracking-summary article > span { flex-basis: 32px; width: 32px; height: 32px; border-radius: 10px; font-size: 12px; }
    .employee-tracking-item { padding: 16px 13px; border-radius: 18px; }
    .employee-tracking-item__title > span { flex-basis: 40px; width: 40px; height: 40px; border-radius: 12px; font-size: 15px; }
    .employee-tracking-item__amount strong { font-size: 16px; }
    .employee-request-progress { margin-inline: -5px; }
    .employee-request-progress strong { font-size: 9px; }
    .employee-request-progress small { padding-inline: 4px; font-size: 7px; }
    .employee-tracking-item > footer { flex-wrap: wrap; }
    .employee-profile-layout { grid-template-columns: 1fr; }
    .employee-profile-card__cover { height: 82px; }
    .employee-profile-card__avatar-wrap { margin-top: -48px; }
    .employee-security-card { padding: 17px 14px; border-radius: 18px; }
    .employee-security-card > footer { align-items: stretch; flex-direction: column; }
    .employee-security-card > footer p { justify-content: center; }
    .employee-security-card > footer .btn,
    .employee-security-card > footer .app-save-button { width: 100%; }
    .employee-edit-status { align-items: flex-start; flex-direction: column; }
    .employee-edit-images { grid-template-columns: 1fr; }
    .employee-main-receipt > img { height: 190px; }
    .employee-additional-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .employee-edit-form .employee-expense-form__footer { align-items: stretch; }
    .employee-edit-cancel { justify-content: center; }
}

/* Switch the dense expense table to readable cards on tablets and narrow laptops. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    #expensesTable_wrapper { overflow: visible !important; padding: 12px; border: 0; background: transparent; box-shadow: none; }
    #expensesTable_wrapper .dataTables_scroll,
    #expensesTable_wrapper .dataTables_scrollBody { overflow: visible !important; }
    #expensesTable { display: block; width: 100% !important; min-width: 0 !important; background: transparent; }
    #expensesTable thead { display: none; }
    #expensesTable tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; }
    #expensesTable tbody tr {
        display: block;
        width: 100%;
        overflow: hidden;
        border: 1px solid var(--app-border);
        border-radius: 17px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(55,40,95,.07);
    }
    #expensesTable tbody td,
    #expensesTable tbody tr:nth-child(even) td,
    #expensesTable tbody tr:hover td {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        width: 100% !important;
        min-height: 45px;
        padding: 10px 12px;
        text-align: right;
        background: #fff;
        border-bottom: 1px solid #f0edf5;
    }
    #expensesTable tbody td:last-child { border-bottom: 0; }
    #expensesTable tbody td::before {
        content: attr(data-label);
        color: #6a4a92;
        font-size: 12px;
        font-weight: 850;
    }
    #expensesTable .expense-decision-form { width: min(100%, 310px); }
    #expensesTable .expense-thumbnails { justify-content: flex-start; }
    #expensesTable .expense-date-cell { direction: rtl; text-align: right; }
}

@media (max-width: 991.98px) {
    .admin-sidebar,
    .admin-sidebar-collapsed .admin-sidebar {
        width: var(--app-sidebar);
        padding: 24px 18px;
        transform: translateX(110%);
        transition: transform .25s ease;
    }
    .admin-menu-toggle,
    .admin-sidebar-collapsed .admin-menu-toggle { right: 14px; display: grid; }
    .admin-sidebar-collapse { display: none; }
    .admin-sidebar-collapsed .admin-brand,
    .admin-sidebar-collapsed .admin-user,
    .admin-sidebar-collapsed .admin-sidebar .nav { opacity: 1; visibility: visible; pointer-events: auto; }
    .admin-sidebar-collapsed .admin-sidebar .nav { position: static; gap: 5px; }
    .admin-sidebar-collapsed .admin-sidebar .nav-link { width: auto; height: auto; min-height: 0; justify-content: flex-start; gap: 11px; padding: 11px 13px; margin: 0; }
    .admin-sidebar-collapsed .admin-sidebar .nav-link span { display: inline; }
    .admin-sidebar-collapsed .admin-sidebar .nav-icon { width: 24px; height: 24px; flex-basis: 24px; }
    .admin-sidebar-collapsed .admin-sidebar .logout-link { margin-top: 10px; border-radius: 0 0 12px 12px; }
    .admin-nav-open .admin-sidebar { transform: translateX(0); }
    .admin-nav-open .admin-overlay { display: block; }
    .admin-layout .content, .admin-layout .admin-content { margin-right: 0; padding: 76px 18px 24px !important; }
}

@media (max-width: 767.98px) {
    .login-page .login-card { padding: 28px 22px; }
    .admin-layout .row > [class*="col-"] { margin-bottom: 12px; }
    .admin-layout .d-flex { flex-wrap: wrap; }
    .admin-layout .table { min-width: 720px; }
    .admin-layout .table-responsive, .admin-layout .dataTables_wrapper { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
    .admin-layout .content > form:not(.d-inline), .admin-layout .admin-content > form:not(.d-inline) { padding: 16px; }
    .admin-layout .content > form .btn, .admin-layout .admin-content > form .btn { width: 100%; }
    .admin-layout .dataTables_wrapper .row { min-width: 0; }
    .admin-layout .dataTables_wrapper .dataTables_length,
    .admin-layout .dataTables_wrapper .dataTables_filter { margin-bottom: 10px; text-align: right !important; }
    .dataTables_wrapper .dataTables_length label,
    .dataTables_wrapper .dataTables_filter label { display: flex; width: 100%; justify-content: space-between; }
    .dataTables_wrapper .dataTables_filter input { width: min(250px, 68vw); }
    .filter-actions { display: grid; grid-template-columns: 1fr; }
    .filter-actions .btn,
    .filter-actions .app-excel-button,
    .filter-actions .app-search-button { width: 100%; min-width: 0; }
    #expensesTable_wrapper { overflow: visible !important; padding: 12px; border: 0; background: transparent; box-shadow: none; }
    #expensesTable_wrapper .dataTables_scroll,
    #expensesTable_wrapper .dataTables_scrollBody { overflow: visible !important; }
    #expensesTable { display: block; width: 100% !important; min-width: 0 !important; background: transparent; }
    #expensesTable thead { display: none; }
    #expensesTable tbody { display: grid; gap: 14px; width: 100%; }
    #expensesTable tbody tr {
        display: block;
        width: 100%;
        overflow: hidden;
        border: 1px solid var(--app-border);
        border-radius: 17px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(55,40,95,.07);
    }
    #expensesTable tbody td,
    #expensesTable tbody tr:nth-child(even) td,
    #expensesTable tbody tr:hover td {
        display: grid;
        grid-template-columns: 105px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        width: 100% !important;
        min-height: 48px;
        padding: 11px 13px;
        text-align: right;
        background: #fff;
        border-bottom: 1px solid #f0edf5;
    }
    #expensesTable tbody td:last-child { border-bottom: 0; }
    #expensesTable tbody td::before {
        content: attr(data-label);
        color: #6a4a92;
        font-size: 12px;
        font-weight: 850;
    }
    #expensesTable .expense-decision-form { width: min(100%, 310px); }
    #expensesTable .expense-thumbnails { justify-content: flex-start; }
    #expensesTable .expense-thumbnail-link { width: 46px; height: 46px; }
    #expensesTable .expense-date-cell { direction: rtl; text-align: right; }
    .report-list-item { grid-template-columns: minmax(90px, 1fr) 1.6fr; }
    .report-list-value { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .admin-layout .content, .admin-layout .admin-content { padding-inline: 12px !important; }
    .login-page { padding: 16px; }
}

/* Simple employee workspace */
.employee-app.admin-layout { padding-bottom: 0 !important; }
.employee-app .employee-content { max-width: none !important; margin-left: 0; }
.employee-sidebar-balance {
    display: flex;
    gap: 11px;
    align-items: center;
    min-height: 70px;
    margin-bottom: 16px;
    padding: 12px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    background: rgba(255,255,255,.07);
    transition: opacity .16s ease, visibility .16s ease;
}
.employee-sidebar-balance > img { width: 34px; height: 34px; object-fit: contain; }
.employee-sidebar-balance > div { display: grid; min-width: 0; line-height: 1.35; }
.employee-sidebar-balance small { color: #cfc5ea; font-size: 10px; }
.employee-sidebar-balance strong { overflow: hidden; direction: ltr; font-size: 15px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.employee-sidebar-balance strong span { font-size: 9px; }
.employee-sidebar .employee-add-nav-icon { filter: brightness(0) invert(1) drop-shadow(0 2px 5px rgba(0,0,0,.18)); }
.admin-sidebar-collapsed .employee-sidebar-balance { opacity: 0; visibility: hidden; pointer-events: none; }
.employee-bottom-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 520px; }
.employee-simple-home { width: min(100%, 760px); margin: 0 auto; }
.employee-simple-home__welcome { margin-bottom: 16px; }
.employee-simple-home__welcome span { color: #7b7084; font-size: 13px; font-weight: 700; }
.employee-simple-home__welcome h1 { margin: 3px 0 0; color: #251637; font-size: clamp(26px, 5vw, 38px); font-weight: 900; }
.employee-wallet-card {
    display: flex;
    min-height: 190px;
    align-items: center;
    justify-content: space-between;
    padding: clamp(24px, 5vw, 42px);
    color: #fff;
    border-radius: 28px;
    background: linear-gradient(135deg, #32135f, #6d28d9 62%, #0891b2);
    box-shadow: 0 20px 44px rgba(76,29,149,.22);
}
.employee-wallet-card > div { display: grid; gap: 8px; }
.employee-wallet-card small { color: rgba(255,255,255,.78); font-size: 14px; font-weight: 700; }
.employee-wallet-card strong { direction: ltr; font-size: clamp(32px, 8vw, 52px); font-weight: 900; letter-spacing: -.02em; }
.employee-wallet-card strong span { font-size: .38em; font-weight: 800; }
.employee-wallet-card > i { display: grid; width: 76px; height: 76px; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 24px; background: rgba(255,255,255,.12); font-size: 32px; }
.employee-simple-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.employee-simple-action {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    min-height: 92px;
    padding: 17px;
    color: #30223d;
    border: 1px solid rgba(73,49,111,.1);
    border-radius: 21px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(50,31,82,.07);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.employee-simple-action:hover { color: #30223d; box-shadow: 0 15px 34px rgba(50,31,82,.12); transform: translateY(-2px); }
.employee-simple-action > img,
.employee-simple-action > i:first-child { display: grid; width: 48px; height: 48px; padding: 13px; place-items: center; object-fit: contain; color: #6d28d9; border-radius: 15px; background: #f1eafe; font-size: 20px; }
.employee-simple-action > span { display: grid; min-width: 0; gap: 3px; }
.employee-simple-action strong { font-size: 15px; font-weight: 900; }
.employee-simple-action small { color: #8a7f92; font-size: 11px; }
.employee-simple-action > i:last-child { color: #9d91a6; font-size: 13px; }
.employee-simple-action--primary { color: #fff; border: 0; background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.employee-simple-action--primary:hover { color: #fff; }
.employee-simple-action--primary > img { filter: brightness(0) invert(1); background: rgba(255,255,255,.14); }
.employee-simple-action--primary small,
.employee-simple-action--primary > i:last-child { color: rgba(255,255,255,.76); }
.employee-upload-grid--single { grid-template-columns: 1fr; }
.employee-upload-grid--single .employee-upload-box { min-height: 125px; }
.employee-simple-page-title { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.employee-simple-page-title h1 { margin: 0 0 5px; color: #251637; font-size: clamp(24px, 5vw, 34px); font-weight: 900; }
.employee-simple-page-title p { margin: 0; color: #817589; font-size: 12px; }
.employee-history-add { display: inline-flex; flex: 0 0 auto; gap: 8px; align-items: center; min-height: 44px; padding: 10px 15px; color: #fff; border-radius: 14px; background: #6d28d9; font-size: 12px; font-weight: 850; text-decoration: none; box-shadow: 0 8px 19px rgba(109,40,217,.2); }
.employee-history-add:hover { color: #fff; }
.employee-history-add img { width: 19px; height: 19px; object-fit: contain; filter: brightness(0) invert(1); }
.employee-simple-expense-list { display: grid; gap: 11px; }
.employee-simple-expense { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 15px; align-items: center; padding: 17px; border: 1px solid rgba(73,49,111,.09); border-radius: 19px; background: #fff; box-shadow: 0 8px 22px rgba(50,31,82,.055); }
.employee-simple-expense__main { display: flex; min-width: 0; gap: 12px; align-items: center; }
.employee-simple-expense__icon { display: grid; flex: 0 0 46px; width: 46px; height: 46px; place-items: center; color: #6d28d9; border-radius: 14px; background: #f1eafe; }
.employee-simple-expense__main > div { min-width: 0; }
.employee-simple-expense h2 { overflow: hidden; margin: 0 0 2px; color: #30223d; font-size: 14px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.employee-simple-expense__main p { margin: 0 0 3px; color: #82768b; font-size: 11px; }
.employee-simple-expense time { color: #a097a8; direction: ltr; font-size: 10px; }
.employee-simple-expense__amount { display: grid; justify-items: end; gap: 6px; }
.employee-simple-expense__amount strong { color: #251637; direction: ltr; font-size: 17px; font-weight: 900; }
.employee-simple-expense__amount strong span { font-size: 10px; }
.employee-simple-expense__details { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; justify-content: space-between; padding-top: 11px; border-top: 1px solid #f0ecf4; }
.employee-simple-expense__details p { margin: 0; color: #716678; font-size: 11px; }
.employee-simple-expense__details a { flex: 0 0 auto; color: #6d28d9; font-size: 11px; font-weight: 800; text-decoration: none; }
.employee-create-expense .employee-expense-form { max-width: 620px; }
.employee-simple-form-card { padding: clamp(20px, 4vw, 30px); border: 1px solid rgba(73,49,111,.09); border-radius: 24px; background: #fff; box-shadow: 0 14px 36px rgba(50,31,82,.08); }
.employee-simple-form-card > header { margin-bottom: 22px; }
.employee-simple-form-card > header h1 { margin: 0 0 5px; color: #251637; font-size: 25px; font-weight: 900; }
.employee-simple-form-card > header p { margin: 0; color: #82768b; font-size: 12px; }
.employee-simple-form-fields { display: grid; gap: 15px; }
.employee-simple-form-card .employee-field > label:first-child { margin-bottom: 7px; color: #4d4057; font-size: 12px; font-weight: 800; }
.employee-simple-form-card .form-control,
.employee-simple-form-card .form-select { min-height: 50px; padding-inline: 14px; border: 1px solid #e1dbe8; border-radius: 13px; background-color: #fbfafe; font-size: 13px; }
.employee-simple-form-card textarea.form-control { min-height: 88px; padding-top: 12px; resize: vertical; }
.employee-simple-form-card .form-control:focus,
.employee-simple-form-card .form-select:focus { border-color: #8b5cf6; background-color: #fff; box-shadow: 0 0 0 4px rgba(124,58,237,.09); }
.employee-simple-amount { direction: ltr; text-align: right; font-size: 18px !important; font-weight: 850; }
.employee-simple-upload { display: flex !important; gap: 12px; align-items: center; min-height: 72px; margin: 0 !important; padding: 12px 14px; color: #4d4057 !important; border: 1px dashed #bda9da; border-radius: 14px; background: #faf7ff; cursor: pointer; }
.employee-simple-upload > i { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; color: #6d28d9; border-radius: 12px; background: #eee5fc; font-size: 17px; }
.employee-simple-upload > span { display: grid; gap: 2px; }
.employee-simple-upload strong { font-size: 12px; }
.employee-simple-upload small { color: #8e8297; font-size: 9px; font-weight: 500; }
.employee-simple-form-note { display: flex; gap: 8px; align-items: center; margin: 18px 0 12px; padding: 10px 12px; color: #665778; border-radius: 11px; background: #f7f4fa; font-size: 11px; }
.employee-simple-form-note i { color: #7c3aed; }
.employee-simple-submit { display: inline-flex; width: 100%; min-height: 50px; gap: 8px; align-items: center; justify-content: center; border: 0; border-radius: 14px; background: linear-gradient(135deg, #7c3aed, #5b21b6); font-size: 13px; font-weight: 850; box-shadow: 0 9px 20px rgba(109,40,217,.2); }
.employee-simple-submit:hover,
.employee-simple-submit:focus { background: linear-gradient(135deg, #6d28d9, #4c1d95); }
.employee-submit-feedback {
    position: fixed;
    top: 22px;
    left: 22px;
    z-index: 1080;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    width: min(430px, calc(100% - 32px));
    padding: 15px;
    color: #174936;
    border: 1px solid #a7e7cc;
    border-radius: 17px;
    background: #effcf6;
    box-shadow: 0 18px 45px rgba(30,70,54,.18);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.employee-submit-feedback > i { color: #10a778; font-size: 25px; }
.employee-submit-feedback > div { display: grid; gap: 2px; }
.employee-submit-feedback strong { font-size: 13px; font-weight: 900; }
.employee-submit-feedback span { color: #4d6f61; font-size: 11px; line-height: 1.6; }
.employee-submit-feedback > button { display: grid; width: 30px; height: 30px; padding: 0; place-items: center; color: #527465; border: 0; border-radius: 9px; background: rgba(16,167,120,.09); font-size: 20px; line-height: 1; }
.employee-submit-feedback--warning { color: #76500b; border-color: #f3d48e; background: #fff9e9; }
.employee-submit-feedback--warning > i { color: #e49a0a; }
.employee-submit-feedback--warning span { color: #806b3f; }
.employee-submit-feedback--danger { color: #8f2136; border-color: #f4b5c1; background: #fff2f5; }
.employee-submit-feedback--danger > i { color: #e64261; }
.employee-submit-feedback--danger span { color: #8a5661; }
.employee-submit-feedback.is-hidden { opacity: 0; visibility: hidden; transform: translateY(-12px); }

@media (max-width: 575.98px) {
    .employee-wallet-card { min-height: 155px; padding: 23px 20px; border-radius: 23px; }
    .employee-wallet-card > i { width: 58px; height: 58px; border-radius: 18px; font-size: 24px; }
    .employee-simple-actions { grid-template-columns: 1fr; }
    .employee-simple-page-title { align-items: flex-start; }
    .employee-history-add { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
    .employee-history-add span { display: none; }
    .employee-simple-expense { padding: 14px; }
    .employee-simple-expense__icon { flex-basis: 40px; width: 40px; height: 40px; }
    .employee-simple-expense__amount strong { font-size: 15px; }
    .employee-simple-expense__details { align-items: flex-start; flex-direction: column; }
    .employee-simple-form-card { padding: 18px 15px; border-radius: 19px; }
    .employee-simple-form-card > header h1 { font-size: 22px; }
    .employee-submit-feedback { top: 12px; left: 50%; transform: translateX(-50%); }
    .employee-submit-feedback.is-hidden { transform: translate(-50%, -12px); }
}

@media (max-width: 991.98px) {
    .admin-sidebar-collapsed .employee-sidebar-balance { opacity: 1; visibility: visible; pointer-events: auto; }
    .employee-app .employee-content { margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}