@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body {
    margin: 0;
    background: #f5f7fb;
    color: #1f2937;
    font-family: Inter,Segoe UI,Arial,sans-serif
}


.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    margin: 4px 8px 28px
}

.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #2563eb;
    display: grid;
    place-items: center;
    font-weight: 800
}

.brand small {
    display: block;
    color: #94a3b8;
    font-size: 9px;
    letter-spacing: 1.5px
}

.menu-title {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #64748b;
    margin: 20px 10px 8px
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #cbd5e1;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 8px;
    margin: 3px 0;
    font-size: 14px
}

    .menu-item:hover, .menu-item.active {
        background: #1e293b;
        color: #fff
    }



.topbar {
    height: 64px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 16px
}

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e5e7eb;
    display: grid;
    place-items: center;
    font-weight: 700
}

.page-body {
    padding: 28px
}

.page-title {
    font-size: 25px;
    font-weight: 700;
    margin: 0
}

.panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px
}

    .panel-head h5 {
        margin: 0;
        font-weight: 700
    }

.toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 18px
}

    .toolbar .form-control {
        max-width: 360px
    }

    .toolbar .form-select {
        max-width: 190px
    }

.table th {
    font-size: 12px;
    color: #64748b;
    font-weight: 600
}

.table td {
    font-size: 13px
}

.emp-name {
    font-weight: 650
}

.section-title {
    font-weight: 700;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 12px;
    margin-bottom: 18px
}


.brand div:not(.brand-mark), .menu-title, .menu-item {
    font-size: 0
}

    .menu-item i {
        font-size: 18px
    }



.toolbar {
    flex-wrap: wrap
}

.login-body {
    background: #111827;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-family: Inter,Segoe UI,Arial,sans-serif
}

.login-wrapper {
    width: 100%;
    max-width: 400px;
    padding: 20px
}

.login-card {
    background: #fff;
    border-radius: 14px;
    padding: 34px;
    box-shadow: 0 20px 50px rgba(0,0,0,.3)
}

    .login-card .brand {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #111827
    }

.d-none-empty:empty {
    display: none
}

.user-menu {
    position: relative
}

.user-menu-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 4px 6px;
    border-radius: 8px;
    cursor: pointer
}

    .user-menu-toggle:hover {
        background: #f3f4f6
    }

    .user-menu-toggle span:not(.avatar) {
        font-size: 14px;
        color: #1f2937;
        font-weight: 600
    }

    .user-menu-toggle .bi-chevron-down {
        font-size: 11px;
        color: #9ca3af
    }

.avatar-img {
    object-fit: cover
}

.user-menu-dropdown {
    min-width: 210px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    padding: 6px;
    margin-top: 8px
}

    .user-menu-dropdown .dropdown-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-radius: 7px;
        font-size: 14px;
        color: #374151
    }

        .user-menu-dropdown .dropdown-item i {
            font-size: 16px;
            color: #2563eb;
            width: 18px;
            text-align: center
        }

        .user-menu-dropdown .dropdown-item:hover {
            background: #eef2ff;
            color: #1f2937
        }

    .user-menu-dropdown form {
        margin: 0
    }

.profile-photo-lg {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e5e7eb
}

.profile-photo-placeholder {
    display: grid;
    place-items: center;
    background: #e5e7eb;
    color: #4b5563;
    font-size: 32px;
    font-weight: 700
}


.employee-page {
    font-size: 13px;
}

.page-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 2px;
    color: #263238;
}

.page-subtitle {
    font-size: 12px;
    color: #7b8794;
}

.employee-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #edf0f2;
}

    .section-header i {
        font-size: 17px;
        color: #4f46e5;
    }

    .section-header h6 {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: #374151;
    }

.form-label {
    font-size: 12px;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 4px;
}

.form-control, .form-select {
    height: 34px;
    min-height: 34px;
    padding: 5px 9px;
    font-size: 12px;
    border-radius: 5px;
    border: 1px solid #d9dee5;
    box-shadow: none !important;
}

    .form-control:focus, .form-select:focus {
        border-color: #6366f1;
        box-shadow: 0 0 0 2px rgba(99,102,241,.08) !important;
    }

.form-text {
    font-size: 10px;
    margin-top: 3px;
    color: #9ca3af;
}

.text-danger {
    font-size: 11px;
}

.compact-row {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 10px;
}

.form-switch {
    padding-top: 4px;
}

    .form-switch .form-check-input {
        width: 34px;
        height: 18px;
        margin-top: 0;
        cursor: pointer;
    }

    .form-switch .form-check-label {
        font-size: 12px;
        margin-left: 4px;
        cursor: pointer;
        color: #374151;
    }

.uan-box {
    transition: all .2s ease;
}

.action-area {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid #edf0f2;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.btn-compact {
    height: 34px;
    padding: 5px 14px;
    font-size: 12px;
    border-radius: 5px;
}

.back-btn {
    height: 32px;
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 5px;
}

.employee-page {
    font-size: 13px;
}

.page-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 2px;
    color: #263238;
}

.page-subtitle {
    font-size: 12px;
    color: #7b8794;
}

.employee-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #edf0f2;
}

    .section-header i {
        font-size: 17px;
        color: #4f46e5;
    }

    .section-header h6 {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: #374151;
    }

.form-label {
    font-size: 12px;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 4px;
}

.form-control, .form-select {
    height: 34px;
    min-height: 34px;
    padding: 5px 9px;
    font-size: 12px;
    border-radius: 5px;
    border: 1px solid #d9dee5;
    box-shadow: none !important;
}

    .form-control:focus, .form-select:focus {
        border-color: #6366f1;
        box-shadow: 0 0 0 2px rgba(99,102,241,.08) !important;
    }

.form-text {
    font-size: 10px;
    margin-top: 3px;
    color: #9ca3af;
}

.text-danger {
    font-size: 11px;
}

.compact-row {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 10px;
}

.form-switch {
    padding-top: 4px;
}

    .form-switch .form-check-input {
        width: 34px;
        height: 18px;
        margin-top: 0;
        cursor: pointer;
    }

    .form-switch .form-check-label {
        font-size: 12px;
        margin-left: 4px;
        cursor: pointer;
        color: #374151;
    }

.uan-box {
    transition: all .2s ease;
}

.action-area {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid #edf0f2;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.btn-compact {
    height: 34px;
    padding: 5px 14px;
    font-size: 12px;
    border-radius: 5px;
}

.back-btn {
    height: 32px;
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 5px;
}

.employee-page {
    padding: 5px 0 25px;
}

.page-header {
    margin-bottom: 24px;
}

.page-title {
    font-size: 25px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 5px;
}

.page-subtitle {
    color: #6b7280;
    font-size: 14px;
}

.add-employee-btn {
    border-radius: 8px;
    padding: 9px 17px;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}


/* ==============================
                   MAIN PANEL
                   ============================== */

.employee-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    overflow: hidden;
}


/* ==============================
                   FILTER AREA
                   ============================== */

.filter-section {
    padding: 18px 20px;
    background: #ffffff;
    border-bottom: 1px solid #eef0f3;
}

.filter-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-wrapper {
    position: relative;
    flex: 1;
}

    .search-wrapper i {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
        font-size: 16px;
    }

.search-input {
    height: 42px;
    padding-left: 39px;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: none !important;
}

    .search-input:focus {
        border-color: #86b7fe;
    }

.filter-select {
    width: 190px;
    height: 42px;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    font-size: 14px;
    color: #374151;
    box-shadow: none !important;
}

    .filter-select:focus {
        border-color: #86b7fe;
    }

.clear-btn {
    height: 42px;
    border-radius: 8px;
    padding: 0 15px;
    font-size: 14px;
    white-space: nowrap;
}


/* ==============================
                   TABLE HEADER
                   ============================== */

.employee-table {
    margin-bottom: 0;
}

    .employee-table thead th {
        background: #f8fafc;
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .35px;
        padding: 14px 20px;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .employee-table tbody td {
        padding: 15px 20px;
        border-bottom: 1px solid #f0f2f5;
        vertical-align: middle;
        font-size: 14px;
        color: #374151;
    }

    .employee-table tbody tr:last-child td {
        border-bottom: none;
    }

    .employee-table tbody tr {
        transition: background .15s ease;
    }

        .employee-table tbody tr:hover {
            background: #f8fafc;
        }


/* ==============================
                   EMPLOYEE
                   ============================== */

.employee-info {
    display: flex;
    align-items: center;
    gap: 11px;
}

.employee-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: #eef2ff;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.emp-name {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 2px;
}

.emp-email {
    color: #8a94a6;
    font-size: 12px;
}

.employee-code {
    font-weight: 600;
    color: #475569;
}


/* ==============================
                   STATUS
                   ============================== */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: #ecfdf3;
    color: #15803d;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}


/* ==============================
                   ACTION
                   ============================== */

.edit-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #64748b;
    border-radius: 7px;
    transition: all .15s ease;
}

    .edit-btn:hover {
        background: #f1f5f9;
        color: #2563eb;
        border-color: #dbeafe;
    }


/* ==============================
                   FOOTER
                   ============================== */

.employee-footer {
    padding: 13px 20px;
    border-top: 1px solid #eef0f3;
    background: #fafbfc;
}

.employee-count {
    color: #64748b;
    font-size: 13px;
}


/* ==============================
                   NO RESULT
                   ============================== */

.no-result {
    padding: 45px 20px !important;
    text-align: center;
    color: #94a3b8 !important;
}

    .no-result i {
        font-size: 30px;
        display: block;
        margin-bottom: 8px;
    }


/* Page Title */
.page-title {
    font-size: 21px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}

.page-subtitle {
    color: #6b7280;
    font-size: 12px;
}


/* Add Employee Button */
.add-employee-btn {
    border-radius: 7px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
}


/* Filter */
.search-input {
    height: 38px;
    padding-left: 36px;
    border-radius: 7px;
    font-size: 12px;
}

.filter-select {
    width: 180px;
    height: 38px;
    border-radius: 7px;
    font-size: 12px;
}

.clear-btn1 {
    height: 38px;
    border-radius: 7px;
    padding: 0 13px;
    font-size: 12px;
    padding-top: 9px;
}


/* Table Header */
.employee-table thead th {
    background: #f8fafc;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 11px 16px;
}


/* Table Body */
.employee-table tbody td {
    padding: 11px 16px;
    font-size: 12px;
}


/* Employee */
.employee-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    font-size: 11px;
}

.emp-name {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 1px;
}

.emp-email {
    font-size: 10px;
}


/* Employee Code */
.employee-code {
    font-size: 12px;
}


/* Status */
.status-badge {
    padding: 4px 8px;
    border-radius: 18px;
    font-size: 10px;
    gap: 5px;
}

.status-dot {
    width: 5px;
    height: 5px;
}


/* Edit Button */
.edit-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 12px;
}


/* Footer */
.employee-footer {
    padding: 10px 16px;
}

.employee-count {
    font-size: 11px;
}


/* ==============================
                   RESPONSIVE
                   ============================== */

@media (max-width: 900px) {

    .filter-wrapper {
        flex-wrap: wrap;
    }

    .search-wrapper {
        flex: 100%;
    }

    .filter-select {
        flex: 1;
        width: auto;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: #f4f7fb;
    color: #172033;
}

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    background: radial-gradient(circle at 10% 10%, rgba(37, 99, 235, .08), transparent 30%), radial-gradient(circle at 90% 90%, rgba(14, 165, 233, .08), transparent 30%), #f5f7fb;
}

.login-container {
    width: 100%;
    max-width: 760px;
    min-height: 420px;
    display: grid;
    grid-template-columns: 48% 52%;
    background: #ffffff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .12);
}

.brand-panel {
    position: relative;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient(145deg, #f2c368 0%, #164e9b 55%, #2563eb 100%);
}

    .brand-panel::before {
        content: "";
        position: absolute;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background: rgba(255,255,255,.06);
        top: -90px;
        right: -90px;
    }

    .brand-panel::after {
        content: "";
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: rgba(255,255,255,.05);
        bottom: -95px;
        left: -90px;
    }

.brand-content,
.brand-bottom {
    position: relative;
    z-index: 2;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-box {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.2);
    font-size: 19px;
    font-weight: 800;
}

.logo-name {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .5px;
    line-height: 1.1;
}

.logo-subtitle {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    letter-spacing: 2px;
    opacity: .7;
    font-weight: 600;
}

.welcome-content {
    max-width: 390px;
}

    .welcome-content .badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 11px;
        border-radius: 30px;
        font-size: 10px;
        font-weight: 600;
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.16);
    }

    .welcome-content h1 {
        margin: 20px 0 12px;
        font-size: 35px;
        line-height: 1.18;
        font-weight: 800;
        letter-spacing: -.8px;
    }

    .welcome-content p {
        margin: 0;
        color: rgba(255,255,255,.72);
        font-size: 13px;
        line-height: 1.8;
    }

.features {
    display: flex;
    gap: 10px;
    margin-top: 28px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    font-size: 10px;
    color: rgba(255,255,255,.82);
}

    .feature-item i {
        font-size: 13px;
    }

.brand-bottom {
    font-size: 10px;
    color: rgba(255,255,255,.5);
}

.login-panel {
    padding: 55px 65px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-header {
    margin-bottom: 28px;
}

    .login-header h2 {
        margin: 0 0 7px;
        font-size: 24px;
        font-weight: 700;
        color: #172033;
    }

    .login-header p {
        margin: 0;
        font-size: 12px;
        color: #7b8494;
    }

.form-label {
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 600;
    color: #374151;
}

.input-wrapper {
    position: relative;
}

    .input-wrapper > i {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        color: #9aa3b2;
        font-size: 15px;
        z-index: 2;
    }

.form-control {
    height: 43px;
    border-radius: 9px;
    border: 1px solid #dce1e8;
    padding-left: 12px;
    padding-right: 40px;
    font-size: 12px;
    color: #172033;
    box-shadow: none;
    transition: all .2s ease;
}

.form-control1 {
    height: 43px;
    border-radius: 9px;
    border: 1px solid #dce1e8;
    padding-left: 40px;
    padding-right: 64px;
    font-size: 12px;
    color: #172033;
    box-shadow: none;
    transition: all .2s ease;
}

.form-control:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .09);
}

.password-toggle {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    padding: 0;
    background: transparent;
    color: #929baa;
    cursor: pointer;
    z-index: 3;
}

    .password-toggle:hover {
        color: #2563eb;
    }

.form-check {
    margin-top: 17px;
}

.form-check-input {
    width: 15px;
    height: 15px;
    margin-top: 1px;
    cursor: pointer;
}

.form-check-label {
    margin-left: 3px;
    font-size: 11px;
    color: #687386;
    cursor: pointer;
}

.login-btn {
    height: 43px;
    margin-top: 22px;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 7px 18px rgba(37, 99, 235, .22);
    transition: all .2s ease;
}

    .login-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(37, 99, 235, .28);
    }

    .login-btn i {
        margin-left: 5px;
        font-size: 13px;
    }

.security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 23px;
    font-size: 9px;
    color: #9aa3b2;
}

    .security-note i {
        font-size: 11px;
        color: #22a06b;
    }

.validation-summary-errors {
    margin-bottom: 18px;
}

.alert {
    font-size: 11px;
    padding: 9px 12px;
    border-radius: 8px;
}

.text-danger {
    font-size: 10px;
    margin-top: 4px;
    display: block;
}

@media (max-width: 850px) {

    .login-container {
        grid-template-columns: 1fr;
        max-width: 470px;
    }

    .brand-panel {
        min-height: 280px;
        padding: 30px;
    }

    .welcome-content {
        margin-top: 35px;
    }

        .welcome-content h1 {
            font-size: 27px;
        }

    .features {
        display: none;
    }

    .brand-bottom {
        display: none;
    }

    .login-panel {
        padding: 40px 35px;
    }
}

@media (max-width: 480px) {

    .login-page {
        padding: 12px;
    }

    .login-container {
        border-radius: 16px;
    }

    .brand-panel {
        padding: 25px;
    }

    .login-panel {
        padding: 35px 25px;
    }
}

.attendance-body {
    padding: 20px;
}

.attendance-summary {
    display: flex;
    align-items: center;
    gap: 24px;
}

.attendance-circle {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: conic-gradient( #2563eb 0deg 321deg, #e9eef5 321deg 360deg );
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.attendance-circle-inner {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.attendance-percent {
    font-size: 19px;
    font-weight: 700;
    color: #172033;
}

.attendance-small {
    font-size: 8px;
    color: #9aa3b2;
}

.attendance-list {
    flex: 1;
}

.attendance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed #edf0f4;
}

    .attendance-row:last-child {
        border-bottom: 0;
    }

.attendance-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    color: #667085;
}

.attendance-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.dot-present {
    background: #10b981;
}

.dot-leave {
    background: #f59e0b;
}

.dot-absent {
    background: #ef4444;
}

.attendance-value {
    font-size: 10px;
    font-weight: 650;
    color: #344054;
}

.chart-area {
    padding: 20px;
}

.chart-container {
    height: 210px;
    display: flex;
    align-items: flex-end;
    gap: 18px;
    padding: 15px 8px 5px;
    border-bottom: 1px solid #edf0f4;
    background: repeating-linear-gradient( to bottom, transparent, transparent 41px, #f1f3f7 42px );
}

.chart-column {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.chart-bar {
    width: 28px;
    max-width: 70%;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient( to top, #2563eb, #60a5fa );
    transition: height .4s ease;
    position: relative;
}

    .chart-bar:hover {
        opacity: .85;
    }

.chart-labels {
    display: flex;
    gap: 18px;
    padding: 9px 8px 0;
}

.chart-label {
    flex: 1;
    text-align: center;
    font-size: 9px;
    color: #9aa3b2;
}

.quick-actions {
    padding: 16px;
}

.quick-action {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px;
    margin-bottom: 8px;
    border: 1px solid #edf0f4;
    border-radius: 9px;
    text-decoration: none;
    transition: all .2s ease;
    background: #fff;
}

    .quick-action:last-child {
        margin-bottom: 0;
    }

    .quick-action:hover {
        background: #f8faff;
        border-color: #dbe7ff;
        transform: translateX(2px);
    }

.quick-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eff5ff;
    color: #2563eb;
    font-size: 14px;
}

.quick-text {
    flex: 1;
}

.quick-title {
    font-size: 10px;
    font-weight: 600;
    color: #344054;
}

.quick-description {
    margin-top: 2px;
    font-size: 8px;
    color: #9aa3b2;
}

.quick-arrow {
    color: #b0b7c3;
    font-size: 11px;
}

.activity-list {
    padding: 8px 19px 15px;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid #f0f2f5;
}

    .activity-item:last-child {
        border-bottom: 0;
    }

.activity-icon {
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1f5ff;
    color: #2563eb;
    font-size: 12px;
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
}

.activity-title {
    font-size: 9px;
    font-weight: 600;
    color: #475467;
}

.activity-time {
    margin-top: 3px;
    font-size: 8px;
    color: #a0a8b5;
}

@media (max-width: 767px) {

    .dashboard-header {
        align-items: flex-start;
    }

    .date-badge {
        display: none;
    }

    .dashboard-title {
        font-size: 20px;
    }

    .attendance-summary {
        gap: 15px;
    }

    .attendance-circle {
        width: 90px;
        height: 90px;
    }

    .attendance-circle-inner {
        width: 68px;
        height: 68px;
    }

    .attendance-percent {
        font-size: 16px;
    }

    .chart-container {
        gap: 8px;
    }

    .chart-labels {
        gap: 8px;
    }
}

:root {
    --sidebar-width: 248px;
    --sidebar-collapsed: 72px;
    --topbar-height: 64px;
    --page-bg: #f6f8fc;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

.app-shell {
    width: 100%;
    min-height: 100vh;
}

.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    transition: margin-left .25s ease;
    min-width: 0;
}

body.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed);
}

body.sidebar-collapsed .main-content {
    margin-left: var(--sidebar-collapsed);
}

.page-body .row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

    .page-body .row > * {
        min-width: 0;
    }

.stat-card,
.panel,
.dashboard-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

img {
    max-width: 100%;
}

@media (max-width: 991px) {

    .sidebar {
        width: 248px;
        transform: translateX(-100%);
        box-shadow: 10px 0 30px rgba(0, 0, 0, .08);
    }

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

    body.sidebar-collapsed .main-content {
        margin-left: 0;
        width: 100%;
    }

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

    .page-body {
        width: 100%;
        padding: 16px;
        overflow-x: hidden;
    }
}

@media (max-width: 576px) {

    .page-body {
        padding: 12px;
    }

    .topbar {
        padding-left: 12px;
        padding-right: 12px;
    }
}

:root {
    --primary: #2563eb;
    --primary-light: #eff5ff;
    --sidebar-width: 248px;
    --sidebar-collapsed: 72px;
    --topbar-height: 64px;
    --page-bg: #f6f8fc;
    --text-dark: #172033;
    --text: #344054;
    --text-muted: #8a94a6;
    --border: #e7ebf0;
    --sidebar-bg: #ffffff;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    background: var(--page-bg);
    color: var(--text);
}

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

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: #fff;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 1200;
    transition: width .25s ease, transform .25s ease;
    overflow: hidden;
}

.brand {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    transition: .25s ease;
}

.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 135deg, #2563eb, #4f46e5 );
    color: white;
    font-size: 17px;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 5px 12px rgba(37, 99, 235, .20);
}

.brand-info {
    min-width: 0;
    white-space: nowrap;
    transition: opacity .15s ease, visibility .15s ease;
}

    .brand-info strong {
        display: block;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .4px;
        color: var(--text-dark);
    }

    .brand-info small {
        display: block;
        margin-top: 1px;
        font-size: 8px;
        letter-spacing: 1.2px;
        color: var(--text-muted);
    }

.sidebar-content {
    flex: 1;
    padding: 13px 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

    .sidebar-content::-webkit-scrollbar {
        width: 4px;
    }

    .sidebar-content::-webkit-scrollbar-thumb {
        background: #dfe4ec;
        border-radius: 10px;
    }

.menu-title {
    margin: 14px 9px 6px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #a0a8b7;
    white-space: nowrap;
    transition: opacity .15s ease, visibility .15s ease;
}

.menu-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 40px;
    padding: 8px 11px;
    margin: 2px 0;
    border-radius: 8px;
    color: #667085;
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
}

    .menu-item i {
        width: 18px;
        min-width: 18px;
        text-align: center;
        font-size: 15px;
    }

    .menu-item span {
        transition: opacity .15s ease, visibility .15s ease;
    }

    .menu-item:hover {
        background: #f5f8fd;
        color: var(--primary);
    }

    .menu-item.active {
        background: var(--primary-light);
        color: var(--primary);
        font-weight: 600;
    }

        .menu-item.active::before {
            content: "";
            position: absolute;
            left: 0;
            top: 8px;
            bottom: 8px;
            width: 3px;
            border-radius: 0 4px 4px 0;
            background: var(--primary);
        }

.sidebar-footer {
    padding: 10px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.collapse-btn {
    width: 100%;
    height: 38px;
    border: 0;
    background: #f7f9fc;
    color: #667085;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s ease;
}

    .collapse-btn:hover {
        background: #eff5ff;
        color: var(--primary);
    }

    .collapse-btn i {
        font-size: 15px;
    }

.main-content {
    min-height: 100vh;
    margin-left: var(--sidebar-width);
    transition: margin-left .25s ease;
}

.topbar {
    position: sticky;
    top: 0;
    height: var(--topbar-height);
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    z-index: 1000;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-toggle {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667085;
    cursor: pointer;
    transition: .2s ease;
}

    .sidebar-toggle:hover {
        background: var(--primary-light);
        color: var(--primary);
        border-color: #d8e4ff;
    }

.breadcrumb-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dark);
}

    .breadcrumb-text span {
        color: #98a2b3;
        font-weight: 400;
    }

.top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-menu-toggle {
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-dark);
    font-size: 11px;
    font-weight: 600;
    padding: 4px;
    cursor: pointer;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf1ff;
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    overflow: hidden;
}

.avatar-img {
    object-fit: cover;
}

.user-menu-dropdown {
    border: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(16,24,40,.10);
    border-radius: 10px;
    padding: 6px;
    min-width: 190px;
}

    .user-menu-dropdown .dropdown-item {
        font-size: 10px;
        padding: 8px 10px;
        border-radius: 6px;
    }

        .user-menu-dropdown .dropdown-item i {
            width: 20px;
            color: #667085;
        }

.page-body {
    min-height: calc(100vh - var(--topbar-height));
    padding: 24px;
    background: var(--page-bg);
}

body.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed);
}

body.sidebar-collapsed .main-content {
    margin-left: var(--sidebar-collapsed);
}

body.sidebar-collapsed .brand {
    justify-content: center;
    padding: 0;
}

body.sidebar-collapsed .brand-info {
    opacity: 0;
    visibility: hidden;
    width: 0;
}

body.sidebar-collapsed .menu-title {
    opacity: 0;
    visibility: hidden;
    height: 8px;
    margin-top: 7px;
    margin-bottom: 7px;
}

body.sidebar-collapsed .menu-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    gap: 0;
}

    body.sidebar-collapsed .menu-item span {
        opacity: 0;
        visibility: hidden;
        width: 0;
    }

    body.sidebar-collapsed .menu-item i {
        font-size: 16px;
    }

body.sidebar-collapsed .collapse-btn span {
    display: none;
}

body.sidebar-collapsed .collapse-btn i {
    transform: rotate(180deg);
}

body.sidebar-collapsed .menu-item:hover::after {
    content: attr(data-title);
    position: absolute;
    left: 64px;
    top: 50%;
    transform: translateY(-50%);
    background: #172033;
    color: #fff;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 5000;
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
    pointer-events: none;
}

@media (max-width: 991px) {

    .sidebar {
        width: var(--sidebar-width);
        transform: translateX(-100%);
        box-shadow: 10px 0 30px rgba(0,0,0,.08);
    }

    .main-content {
        margin-left: 0;
    }

    body.sidebar-mobile-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,.25);
        z-index: 1150;
    }

    body.sidebar-collapsed .sidebar {
        width: var(--sidebar-width);
        transform: translateX(-100%);
    }

    body.sidebar-collapsed .main-content {
        margin-left: 0;
    }

    body.sidebar-mobile-open.sidebar-collapsed .sidebar {
        transform: translateX(0);
    }

    body.sidebar-mobile-open .brand-info,
    body.sidebar-mobile-open .menu-title,
    body.sidebar-mobile-open .menu-item span {
        opacity: 1;
        visibility: visible;
        width: auto;
    }

    body.sidebar-mobile-open .menu-item {
        justify-content: flex-start;
        padding-left: 11px;
        padding-right: 11px;
        gap: 11px;
    }

    body.sidebar-mobile-open .brand {
        justify-content: flex-start;
        padding: 0 16px;
    }

    .page-body {
        padding: 16px;
    }

    .topbar {
        padding: 0 14px;
    }

    .user-name {
        display: none;
    }
}

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
}

body {
    background: #f5f7fb !important;
}

.app-shell {
    width: 100% !important;
    min-height: 100vh !important;
    position: relative !important;
}

.sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 248px !important;
    height: 100vh !important;
    margin: 0 !important;
    background: #ffffff !important;
    border-right: 1px solid #e5e7eb !important;
    z-index: 2000 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    transition: width 0.25s ease, transform 0.25s ease !important;
}

.main-content {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    margin-left: 248px !important;
    margin-right: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transition: margin-left 0.25s ease !important;
}

.topbar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 248px !important;
    width: auto !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    z-index: 1500 !important;
    transition: left 0.25s ease !important;
}

.page-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: calc(100vh - 64px) !important;
    margin: 0 !important;
    padding: 70px 24px 24px 24px !important;
    background: #f5f7fb !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

body.sidebar-collapsed .sidebar {
    width: 72px !important;
}

body.sidebar-collapsed .main-content {
    margin-left: 72px !important;
}

body.sidebar-collapsed .topbar {
    left: 72px !important;
}

body.sidebar-collapsed .brand {
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.sidebar-collapsed .brand-info {
    display: none !important;
}

body.sidebar-collapsed .menu-title {
    display: none !important;
}

body.sidebar-collapsed .menu-item {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 0 !important;
}

    body.sidebar-collapsed .menu-item span {
        display: none !important;
    }

    body.sidebar-collapsed .menu-item i {
        width: auto !important;
        font-size: 17px !important;
    }

body.sidebar-collapsed .menu-item {
    position: relative !important;
}

    body.sidebar-collapsed .menu-item:hover::after {
        content: attr(data-title);
        position: absolute;
        left: 62px;
        top: 50%;
        transform: translateY(-50%);
        background: #172033;
        color: #ffffff;
        padding: 7px 10px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 500;
        white-space: nowrap;
        z-index: 5000;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        pointer-events: none;
    }

.sidebar-footer {
    margin-top: auto !important;
}

.table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
}

@media (max-width: 991px) {

    .sidebar {
        width: 250px !important;
        transform: translateX(-100%) !important;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.10) !important;
    }

    body.sidebar-mobile-open .sidebar {
        transform: translateX(0) !important;
    }

    .main-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    .topbar {
        left: 0 !important;
        width: 100% !important;
        height: 64px !important;
    }

    .page-body {
        width: 100% !important;
        max-width: 100% !important;
        padding: 84px 16px 20px 16px !important;
    }

    body.sidebar-collapsed .sidebar {
        width: 250px !important;
        transform: translateX(-100%) !important;
    }

    body.sidebar-collapsed .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    body.sidebar-collapsed .topbar {
        left: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 767px) {

    .topbar {
        height: 60px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .page-body {
        padding: 78px 14px 18px 14px !important;
    }

    .dashboard-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .dashboard-title {
        font-size: 20px !important;
    }
}

@media (max-width: 575px) {

    .topbar {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .page-body {
        padding: 76px 12px 16px 12px !important;
    }
}

.global-loader {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: rgba(15, 23, 42, 0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    align-items: center;
    justify-content: center;
}

    .global-loader.active {
        display: flex;
    }

.global-loader-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    padding: 30px 40px;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.global-loader-gif {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

    .global-loader-gif.gif-missing {
        border-radius: 50%;
        border: 5px solid #e2e8f0;
        border-top-color: var(--primary, #2563eb);
        animation: global-loader-spin 0.7s linear infinite;
    }

@keyframes global-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

.global-loader-text {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.02em;
}

.personal-page {
    font-size: 13px;
}

.personal-header {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 12px;
}

    .personal-header h2 {
        font-size: 18px;
        font-weight: 600;
        margin: 0;
        color: #1f2937;
    }

.employee-info {
    margin-top: 3px;
    color: #6b7280;
    font-size: 12px;
}

.employee-code {
    color: #4f46e5;
    font-weight: 600;
}

.personal-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.personal-tabs-wrapper {
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    padding: 0 10px;
}

.personal-tabs {
    display: flex;
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 6px 0 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: thin;
}

    .personal-tabs .nav-item {
        flex: 0 0 auto;
    }

    .personal-tabs .nav-link {
        position: relative;
        display: flex;
        align-items: center;
        gap: 7px;
        border: 0 !important;
        border-radius: 7px 7px 0 0;
        padding: 9px 13px;
        color: #64748b;
        background: transparent;
        font-size: 12px;
        font-weight: 500;
        transition: all .2s ease;
        white-space: nowrap;
    }

        .personal-tabs .nav-link i {
            font-size: 14px;
        }

        .personal-tabs .nav-link:hover {
            color: #4f46e5;
            background: #eef2ff;
        }

        .personal-tabs .nav-link.active {
            color: #4f46e5;
            background: #fff;
            font-weight: 600;
        }

            .personal-tabs .nav-link.active::after {
                content: "";
                position: absolute;
                left: 12px;
                right: 12px;
                bottom: -1px;
                height: 2px;
                background: #4f46e5;
                border-radius: 3px 3px 0 0;
            }

.personal-tab-content {
    padding: 16px 18px 18px;
    min-height: 250px;
}

.personal-alert {
    font-size: 12px;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 7px;
}

    .personal-alert ul {
        padding-left: 18px;
    }

.personal-page .form-label {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px;
    color: #374151;
}

.personal-page .form-control,
.personal-page .form-select {
    font-size: 12px;
    min-height: 34px;
    padding: 6px 9px;
    border-radius: 6px;
}

.personal-page .btn {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 6px;
}

@media (max-width: 768px) {

    .personal-header {
        padding: 12px;
    }

        .personal-header h2 {
            font-size: 16px;
        }

    .personal-tabs-wrapper {
        padding: 0 5px;
    }

    .personal-tabs .nav-link {
        padding: 8px 10px;
        font-size: 11px;
    }

    .personal-tab-content {
        padding: 12px;
    }
}


.notification-bell {
    margin-right: 8px;
}

.notification-bell-toggle {
    position: relative;
    border: none;
    background: transparent;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #475569;
    cursor: pointer;
}

    .notification-bell-toggle:hover {
        background: #f1f5f9;
    }

.notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

.notification-dropdown {
    width: 340px;
    max-height: 420px;
    overflow-y: auto;
    padding: 0;
}

.notification-dropdown-header {
    padding: 12px 16px;
    font-weight: 700;
    border-bottom: 1px solid #e5e7eb;
}

.notification-item {
    padding: 10px 16px;
    border-bottom: 1px solid #f1f5f9;
}

    .notification-item.unread {
        background: #f8fafc;
    }

.notification-item-title {
    font-weight: 600;
    font-size: 13px;
}

.notification-item-message {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.notification-item-meta {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
}

.notification-dropdown-footer {
    padding: 10px 16px;
    text-align: center;
}

/* =========================================================
   REDESIGN — NAVIGATION SKIN + DASHBOARD (new visual system)
   White shell throughout (sidebar / topbar / page all #fff);
   identity carried by a single pine-green brand accent plus
   three quiet supporting colours used only on the dashboard.
========================================================= */

:root {
    --brand: #2F5D50;
    --brand-dark: #1F4038;
    --brand-tint: #EAF2EF;
    --ink: #1C1B18;
    --muted: #6B655C;
    --line: #E9E5DD;
    --amber: #92661F;
    --amber-tint: #FBF1E2;
    --denim: #3D5A80;
    --denim-tint: #EAF0F6;
    --rust: #A6503B;
    --rust-tint: #F7EBE7;
}

/* ---------- Shell: sidebar, topbar and page all match, in white ---------- */

body,
.page-body {
    background: #ffffff !important;
}

.sidebar {
    border-right: 1px solid var(--line) !important;
}

.topbar {
    background: #ffffff !important;
    border-bottom: 1px solid var(--line) !important;
}

/* ---------- Brand mark ---------- */

.brand {
    border-bottom: 1px solid var(--line);
}

.brand-mark {
    background: var(--brand) !important;
    color: #ffffff !important;
    box-shadow: none;
}

.brand-info strong {
    color: var(--ink);
}

.brand-info small {
    color: var(--muted);
    opacity: .85;
}

/* ---------- Sidebar menu ---------- */

.sidebar-content::-webkit-scrollbar-thumb {
    background: var(--line);
}

.menu-title {
    color: var(--muted);
    opacity: .8;
}

.menu-item {
    color: #514c45;
}

    .menu-item i {
        color: #9a948a;
    }

    .menu-item:hover,
    .menu-item.active {
        background: var(--brand-tint);
        color: var(--brand-dark);
    }

        .menu-item:hover i,
        .menu-item.active i {
            color: var(--brand-dark);
        }

        .menu-item.active::before {
            background: var(--brand) !important;
        }

body.sidebar-collapsed .menu-item:hover::after {
    background: var(--ink);
}

/* ---------- Sidebar footer / toggles ---------- */

.collapse-btn {
    background: #F7F6F3;
    color: var(--muted);
}

    .collapse-btn:hover {
        background: var(--brand-tint);
        color: var(--brand-dark);
    }

.sidebar-toggle:hover {
    background: var(--brand-tint) !important;
    color: var(--brand-dark) !important;
    border-color: var(--brand-tint) !important;
}

/* ---------- Topbar right side ---------- */

.breadcrumb-text span {
    color: var(--muted);
}

.avatar {
    background: var(--brand-tint);
    color: var(--brand-dark);
}

.notification-bell-toggle:hover {
    background: var(--brand-tint);
    color: var(--brand-dark);
}

.user-menu-toggle:hover {
    background: var(--brand-tint);
}

.user-menu-toggle span:not(.avatar) {
    color: var(--ink);
}

.user-menu-dropdown .dropdown-item i {
    color: var(--muted);
}

.user-menu-dropdown .dropdown-item:hover {
    background: var(--brand-tint);
    color: var(--brand-dark);
}

    .user-menu-dropdown .dropdown-item:hover i {
        color: var(--brand-dark);
    }

.notification-item.unread {
    background: var(--brand-tint);
}


/* =========================================================
   DASHBOARD
========================================================= */

.dsh-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: 14px;
    padding: 26px 28px;
    margin-bottom: 18px;
}

.dsh-hero-date {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 8px;
}

.dsh-hero-title {
    font-size: 27px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.4px;
    margin: 0 0 6px;
}

.dsh-hero-sub {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
}

.dsh-hero-holiday {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px 10px 10px;
    background: var(--brand-tint);
    border-radius: 12px;
    text-decoration: none;
    flex-shrink: 0;
}

.dsh-hero-holiday-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--brand);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.dsh-hero-holiday-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-dark);
}

.dsh-hero-holiday-value {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
}

.dsh-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.dsh-kpi-plum {
    border-top-color: #7C5295;
}

.dsh-kpi-plum .dsh-kpi-top i {
    color: #7C5295;
}

.dsh-kpi-teal {
    border-top-color: #2F7A72;
}

.dsh-kpi-teal .dsh-kpi-top i {
    color: #2F7A72;
}

.dsh-kpi {
    background: #ffffff;
    border: 1px solid var(--line);
    border-top-width: 3px;
    border-radius: 12px;
    padding: 18px 20px;
}

.dsh-kpi-pine {
    border-top-color: var(--brand);
}

.dsh-kpi-denim {
    border-top-color: var(--denim);
}

.dsh-kpi-amber {
    border-top-color: var(--amber);
}

.dsh-kpi-rust {
    border-top-color: var(--rust);
}

.dsh-kpi-top {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
}

    .dsh-kpi-top i {
        font-size: 14px;
    }

.dsh-kpi-pine .dsh-kpi-top i {
    color: var(--brand);
}

.dsh-kpi-denim .dsh-kpi-top i {
    color: var(--denim);
}

.dsh-kpi-amber .dsh-kpi-top i {
    color: var(--amber);
}

.dsh-kpi-rust .dsh-kpi-top i {
    color: var(--rust);
}

.dsh-kpi-value {
    font-size: 30px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.5px;
    line-height: 1;
}

.dsh-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    align-items: stretch;
}

.dsh-col-main {
    flex: 1.7;
    min-width: 0;
}

.dsh-col-side {
    flex: 1;
    min-width: 0;
}

.dsh-col-half {
    flex: 1;
    min-width: 0;
}

.dsh-panel {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px 22px;
    height: 100%;
    box-sizing: border-box;
}

.dsh-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.dsh-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.dsh-panel-sub {
    font-size: 12px;
    color: var(--muted);
    margin: 2px 0 0;
}

.dsh-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand) !important;
    text-decoration: none;
    white-space: nowrap;
}

    .dsh-link:hover {
        color: var(--brand-dark);
    }

.dsh-holiday-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dsh-holiday-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 6px;
    border-radius: 10px;
    transition: background .15s ease;
}

    .dsh-holiday-row:hover {
        background: #FAF9F7;
    }

a.dsh-holiday-row {
    text-decoration: none;
}

.dsh-holiday-date {
    width: 44px;
    flex-shrink: 0;
    text-align: center;
    background: var(--brand);
    color: #ffffff;
    border-radius: 9px;
    padding: 6px 0;
    display: flex;
    flex-direction: column;
}

.dsh-holiday-day {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
}

.dsh-holiday-mon {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: rgba(255,255,255,.65);
}

.dsh-holiday-info {
    flex: 1;
    min-width: 0;
}

.dsh-holiday-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}

.dsh-holiday-meta {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 1px;
}

.dsh-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.dsh-badge-public {
    background: var(--brand-tint);
    color: var(--brand-dark);
}

.dsh-badge-restricted {
    background: var(--amber-tint);
    color: var(--amber);
}

.dsh-badge-optional {
    background: var(--denim-tint);
    color: var(--denim);
}

.dsh-badge-festival {
    background: var(--rust-tint);
    color: var(--rust);
}

.dsh-badge-regularization {
    background: var(--denim-tint);
    color: var(--denim);
}

.dsh-badge-overtime {
    background: var(--amber-tint);
    color: var(--amber);
}

.dsh-badge-bonus {
    background: var(--brand-tint);
    color: var(--brand-dark);
}

.dsh-badge-arrear {
    background: var(--denim-tint);
    color: var(--denim);
}

.dsh-badge-loan {
    background: #f1e9f5;
    color: #7C5295;
}

.dsh-badge-success {
    background: var(--brand-tint);
    color: var(--brand-dark);
}

.dsh-badge-info {
    background: var(--denim-tint);
    color: var(--denim);
}

.dsh-badge-warning {
    background: var(--amber-tint);
    color: var(--amber);
}

.dsh-badge-error {
    background: var(--rust-tint);
    color: var(--rust);
}

.dsh-badge-high {
    background: var(--rust-tint);
    color: var(--rust);
}

.dsh-badge-medium {
    background: var(--amber-tint);
    color: var(--amber);
}

.dsh-badge-low {
    background: var(--denim-tint);
    color: var(--denim);
}

.dsh-badge-muted {
    background: #EEECE7;
    color: var(--muted);
}

/* Generic status vocabulary shared by Status fields across every module —
   class name is always the status value lower-cased with spaces removed. */
.dsh-badge-pending, .dsh-badge-sent, .dsh-badge-scheduled, .dsh-badge-onhold {
    background: var(--amber-tint);
    color: var(--amber);
}

.dsh-badge-approved, .dsh-badge-completed, .dsh-badge-joined, .dsh-badge-published,
.dsh-badge-accepted, .dsh-badge-active, .dsh-badge-allocated, .dsh-badge-present, .dsh-badge-paid {
    background: var(--brand-tint);
    color: var(--brand-dark);
}

.dsh-badge-rejected, .dsh-badge-cancelled, .dsh-badge-declined, .dsh-badge-absent,
.dsh-badge-noshow, .dsh-badge-overdue {
    background: var(--rust-tint);
    color: var(--rust);
}

.dsh-badge-inprogress, .dsh-badge-draft, .dsh-badge-returned, .dsh-badge-rescheduled, .dsh-badge-processed, .dsh-badge-ongoing {
    background: var(--denim-tint);
    color: var(--denim);
}

.dsh-badge-closed, .dsh-badge-withdrawn, .dsh-badge-locked {
    background: #EEECE7;
    color: var(--muted);
}

.dsh-holiday-countdown {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

.dsh-attendance-bar {
    display: flex;
    height: 8px;
    border-radius: 6px;
    overflow: hidden;
    background: #F1EFEA;
    margin-bottom: 16px;
}

.dsh-attendance-seg {
    height: 100%;
}

.dsh-attendance-list {
    display: flex;
    flex-direction: column;
}

.dsh-attendance-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 4px;
}

a.dsh-attendance-row {
    text-decoration: none;
    border-radius: 8px;
    transition: background .15s ease;
}

    a.dsh-attendance-row:hover {
        background: #FAF9F7;
    }

    .dsh-attendance-row + .dsh-attendance-row {
        border-top: 1px solid var(--line);
    }

.dsh-attendance-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dsh-attendance-label {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.dsh-attendance-count {
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
}

.dsh-dot-pine {
    background: var(--brand);
}

.dsh-dot-denim {
    background: var(--denim);
}

.dsh-dot-amber {
    background: var(--amber);
}

.dsh-dot-rust {
    background: var(--rust);
}

.dsh-dept-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dsh-dept-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dsh-dept-name {
    width: 110px;
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dsh-dept-bar-track {
    flex: 1;
    height: 8px;
    background: #F1EFEA;
    border-radius: 6px;
    overflow: hidden;
}

.dsh-dept-bar-fill {
    height: 100%;
    background: var(--brand);
    border-radius: 6px;
}

.dsh-dept-count {
    width: 26px;
    text-align: right;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
}

.dsh-people-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dsh-people-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 6px;
    border-radius: 10px;
    transition: background .15s ease;
}

    .dsh-people-row:hover {
        background: #FAF9F7;
    }

.dsh-avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-tint);
    color: var(--brand-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.dsh-people-text {
    flex: 1;
    min-width: 0;
}

.dsh-people-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dsh-people-meta {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dsh-people-event {
    text-align: right;
    flex-shrink: 0;
}

.dsh-people-event-type {
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

    .dsh-people-event-type.birthday {
        color: var(--rust);
    }

    .dsh-people-event-type.anniversary {
        color: var(--brand);
    }

    .dsh-people-event-type.joiner {
        color: #7C5295;
    }

    .dsh-people-event-type.leave {
        color: var(--denim);
    }

.dsh-people-event-when {
    font-size: 11px;
    color: var(--muted);
    margin-top: 1px;
    white-space: nowrap;
}

.dsh-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 34px 10px;
    color: var(--muted);
}

    .dsh-empty i {
        font-size: 24px;
        color: #D8D4CB;
    }

    .dsh-empty p {
        margin: 0;
        font-size: 13px;
    }

.dsh-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--brand);
    color: #ffffff !important;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 4px;
}

    .dsh-btn:hover {
        background: var(--brand-dark);
    }

@media (max-width: 1100px) {
    .dsh-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .dsh-row {
        flex-direction: column;
    }

    .dsh-col-main, .dsh-col-side {
        flex: 1 1 auto;
    }
}

@media (max-width: 560px) {
    .dsh-kpi-grid {
        grid-template-columns: 1fr;
    }

    .dsh-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .dsh-hero-holiday {
        width: 100%;
    }

    .dsh-dept-name {
        width: 78px;
    }
}


/* =========================================================
   APP SWITCHER — waffle-style module launcher in the topbar.
   Visible only to SuperAdmin / Admin / HR (canManageOrg).
   The four "Soon" tiles (Help Desk, Sales & Marketing, Nexus
   CRM, Nexus Repository) are placeholders for modules that
   don't exist in this project yet and show for
   SuperAdmin/Admin only (isAdmin).
========================================================= */

.app-switcher {
    margin-right: 4px;
}

.app-switcher-toggle {
    border: none;
    background: transparent;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--muted);
    cursor: pointer;
}

    .app-switcher-toggle:hover {
        background: var(--brand-tint);
        color: var(--brand-dark);
    }

.theme-toggle-btn {
    border: none;
    background: transparent;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--muted);
    cursor: pointer;
    margin-right: 4px;
    transition: background .15s ease, color .15s ease;
}

    .theme-toggle-btn:hover {
        background: var(--brand-tint);
        color: var(--brand-dark);
    }

.app-switcher-menu {
    width: 300px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(16,24,40,.10);
}

.app-switcher-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 6px 10px;
}

.app-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.app-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 4px;
    border-radius: 10px;
    text-decoration: none;
    text-align: center;
    position: relative;
}

a.app-tile:hover {
    background: var(--brand-tint);
}

.app-tile-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #ffffff;
    flex-shrink: 0;
}

.app-tile-icon-pine {
    background: var(--brand);
}

.app-tile-icon-denim {
    background: var(--denim);
}

.app-tile-icon-amber {
    background: var(--amber);
}

.app-tile-icon-rust {
    background: var(--rust);
}

.app-tile-icon-ink {
    background: var(--ink);
}

.app-tile-icon-teal {
    background: #2F7A72;
}

.app-tile-icon-olive {
    background: #5F7A3D;
}

.app-tile-icon-muted {
    background: #CBD5E1;
}

.app-tile-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
}

.app-tile-disabled {
    cursor: default;
    opacity: .55;
}

.app-tile-soon {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #EEF1F4;
    color: var(--muted);
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 1px 5px;
    border-radius: 6px;
}

@media (max-width: 420px) {
    .app-switcher-menu {
        width: 260px;
        padding: 10px;
    }

    .app-tile-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .app-tile-label {
        font-size: 10.5px;
    }
}

.module-section.d-none-module {
    display: none !important;
}

.module-hint {
    padding: 10px 14px;
    font-size: .8rem;
    color: var(--bs-secondary-color, #8a94a6);
}

/* =========================================================
                   MODULES (app-switcher) — popup design
                ========================================================== */
.app-switcher-toggle i {
    font-size: .95rem;
}

.app-switcher-menu {
    width: 320px;
    padding: 14px 12px;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 16px;
    box-shadow: 0 18px 40px -14px rgba(15, 23, 42, .22), 0 4px 12px rgba(15, 23, 42, .06);
}

@media (prefers-reduced-motion: no-preference) {
    .app-switcher-menu {
        animation: appSwitcherIn .15s ease-out;
    }
}

@keyframes appSwitcherIn {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.app-switcher-title {
    font-size: .78rem;
    font-weight: 600;
    color: #8a94a6;
    padding: 2px 8px 12px;
}

.app-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

    .app-tile-grid > .app-tile:last-child:nth-child(3n+1) {
        grid-column: 2;
    }

.app-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 12px 4px;
    border-radius: 12px;
    color: #374151;
    transition: background-color .15s ease;
}

    .app-tile:hover,
    .app-tile:focus-visible {
        background-color: #f4f5f7;
        color: #111827;
        text-decoration: none;
    }

    .app-tile:focus-visible {
        outline: 2px solid #8a94a6;
        outline-offset: 2px;
    }

.app-switcher-menu .app-tile-icon {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-switcher-menu .app-tile-label {
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.2;
}

/* One distinct tint per module, in the app's existing palette names */
.app-tile-icon-denim {
    background: #eaf0f8;
    color: #3e5c8a;
}

.app-tile-icon-amber {
    background: #fbf1df;
    color: #b8790c;
}

.app-tile-icon-plum {
    background: #f1e9f5;
    color: #7c5295;
}

.app-tile-icon-rust {
    background: #f8eae3;
    color: #b5502d;
}

.app-tile-icon-pine {
    background: #e7f1ea;
    color: #3b6e4f;
}

.app-tile-icon-ink {
    background: #eaebef;
    color: #333f52;
}

.app-tile-icon-teal {
    background: #e3f2f1;
    color: #2f7a72;
}

.app-tile-icon-olive {
    background: #eef2e3;
    color: #5f7a3d;
}

.app-tile-icon-muted {
    background: #eef0f2;
    color: #6b7280;
}

@media (max-width: 420px) {
    .app-switcher-menu {
        width: min(320px, 92vw);
    }

    .app-tile-grid {
        grid-template-columns: repeat(2, 1fr);
    }

        .app-tile-grid > .app-tile:last-child:nth-child(3n+1) {
            grid-column: auto;
        }
}


/* ==============================================================
   PAGINATION (shared control injected by table-pagination.js
   under every module's .table-responsive list table)
   ============================================================== */

.hrms-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #eef0f3;
    background: #ffffff;
}

.hrms-pagination-info {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
}

.hrms-pagination-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.hrms-page-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #374151;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all .15s ease;
}

    .hrms-page-btn:hover:not(:disabled) {
        border-color: #6366f1;
        color: #6366f1;
    }

    .hrms-page-btn.active {
        background: #6366f1;
        border-color: #6366f1;
        color: #ffffff;
    }

    .hrms-page-btn:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

.hrms-page-ellipsis {
    padding: 0 4px;
    color: #9ca3af;
    font-size: 12px;
}

.hrms-page-size {
    height: 30px;
    padding: 0 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px;
    color: #374151;
    background: #ffffff;
}

@media (max-width: 640px) {
    .hrms-pagination {
        justify-content: center;
        text-align: center;
    }
}


/* ==============================================================
   INPUT ALIGNMENT — every text input / select / textarea across
   the project starts flush left, regardless of field type.
   ============================================================== */

.form-control,
.form-select,
textarea,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="tel"],
input[type="search"] {
    text-align: left;
    direction: ltr;
}


/* =========================================================================
   DARK MODE
   Activated by [data-bs-theme="dark"] on <html> (same attribute Bootstrap
   5.3 uses for its own native dark-mode components — one toggle drives
   both). Toggled by #themeToggleBtn in _Layout.cshtml; preference saved
   in localStorage under "hrms-theme" and re-applied before first paint by
   the inline script at the top of <head>.

   Structure below mirrors the light-mode sections above: redefine the
   REDESIGN palette's CSS variables first (this alone re-colors most of
   the sidebar/topbar/dashboard/app-switcher, since those already read
   from var(--brand)/var(--ink)/var(--muted)/var(--line) etc.), then patch
   every remaining hardcoded-color rule found across the legacy list
   pages, forms, pagination, personal page, notifications, login page and
   the many inline <style> "status pill" blocks reused across modules.
========================================================================= */

[data-bs-theme="dark"] {
    /* ---- REDESIGN palette, inverted for dark surfaces ---- */
    --brand: #5FA692;
    --brand-dark: #85C7B4;
    --brand-tint: #17302A;
    --ink: #ECE8DE;
    --muted: #A69F8F;
    --line: #3A382E;
    --amber: #D9A65C;
    --amber-tint: #332711;
    --denim: #86AAD1;
    --denim-tint: #1A2732;
    --rust: #D68A72;
    --rust-tint: #33201A;

    /* ---- one-off accents introduced for the module dashboards ---- */
    --plum: #B48FC7;
    --plum-tint: #241D2B;
    --teal: #5FADA3;
    --teal-tint: #142622;
    --olive: #93B36C;
    --olive-tint: #22280F;

    /* ---- generic status palette used by inline wf-badge / role /
       notification style blocks scattered across the module views ---- */
    --st-green-bg: #11301F;   --st-green-text: #4ADE80;
    --st-amber-bg: #3A2C0C;   --st-amber-text: #FBBF24;
    --st-red-bg: #3A1717;     --st-red-text: #F87171;
    --st-slate-bg: #262B33;   --st-slate-text: #B7C0CD;
    --st-blue-bg: #16283F;    --st-blue-text: #7DACF7;
    --st-indigo-bg: #211E42;  --st-indigo-text: #ACB4FA;
    --st-cyan-bg: #0F2C38;    --st-cyan-text: #67CFF2;

    /* ---- legacy variables (pre-REDESIGN) still read by a handful of
       rules a later same-name rule didn't happen to re-declare, e.g.
       .breadcrumb-text's own color (only its child <span> was redone) ---- */
    --text-dark: #ECE8DE;
    --text: #DCD7C9;
    --text-muted: #A69F8F;
    --border: #3A382E;
    --primary: #6E9BF5;
    --primary-light: #16233D;
    --page-bg: #131210;

    color-scheme: dark;
}

/* ---------- Page shell: body / sidebar / topbar / cards ---------- */

[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .page-body {
    background: #131210 !important;
    color: var(--ink);
}

[data-bs-theme="dark"] .sidebar,
[data-bs-theme="dark"] .topbar {
    background: #1A1914 !important;
}

[data-bs-theme="dark"] .sidebar {
    border-right: 1px solid var(--line) !important;
}

[data-bs-theme="dark"] .topbar {
    border-bottom: 1px solid var(--line) !important;
}

[data-bs-theme="dark"] .brand {
    border-bottom: 1px solid var(--line);
}

[data-bs-theme="dark"] .menu-item {
    color: #C9C2B4;
}

[data-bs-theme="dark"] .menu-item i {
    color: #8B8676;
}

[data-bs-theme="dark"] .collapse-btn {
    background: #201F19;
    color: var(--muted);
}

[data-bs-theme="dark"] .sidebar-content::-webkit-scrollbar-thumb {
    background: var(--line);
}

[data-bs-theme="dark"] .breadcrumb-text {
    color: var(--ink);
}

[data-bs-theme="dark"] .global-loader-box {
    background: #201F19;
    color: var(--ink);
}

[data-bs-theme="dark"] .global-loader-text {
    color: var(--muted);
}

[data-bs-theme="dark"] .global-loader-gif.gif-missing {
    border-color: #3A382E;
    border-top-color: var(--brand);
}

/* ---------- Dashboards (dsh-*) — hardcoded exceptions only;           
   everything already on var(--brand)/var(--ink)/var(--muted)/var(--line)
   re-colors automatically from the variable block above ---------- */

[data-bs-theme="dark"] .dsh-hero,
[data-bs-theme="dark"] .dsh-panel,
[data-bs-theme="dark"] .dsh-kpi {
    background: #1C1B17;
}

[data-bs-theme="dark"] .dsh-people-row:hover,
[data-bs-theme="dark"] .dsh-holiday-row:hover {
    background: #242219;
}

[data-bs-theme="dark"] .dsh-empty i {
    color: #4A4738;
}

[data-bs-theme="dark"] .dsh-attendance-bar,
[data-bs-theme="dark"] .dsh-dept-bar-track {
    background: #2A2820;
}

[data-bs-theme="dark"] .dsh-kpi-plum,
[data-bs-theme="dark"] .app-tile-icon-plum {
    border-top-color: var(--plum);
}

    [data-bs-theme="dark"] .dsh-kpi-plum .dsh-kpi-top i {
        color: var(--plum);
    }

[data-bs-theme="dark"] .dsh-kpi-teal {
    border-top-color: var(--teal);
}

    [data-bs-theme="dark"] .dsh-kpi-teal .dsh-kpi-top i {
        color: var(--teal);
    }

[data-bs-theme="dark"] .dsh-people-event-type.joiner {
    color: var(--plum);
}

[data-bs-theme="dark"] .dsh-badge-muted,
[data-bs-theme="dark"] .dsh-badge-closed,
[data-bs-theme="dark"] .dsh-badge-withdrawn,
[data-bs-theme="dark"] .dsh-badge-locked {
    background: #2A2820;
    color: var(--muted);
}

[data-bs-theme="dark"] .dsh-badge-loan {
    background: var(--plum-tint);
    color: var(--plum);
}

/* ---------- App switcher popup ---------- */

[data-bs-theme="dark"] .app-switcher-menu {
    background: #201F19;
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .3);
}

[data-bs-theme="dark"] .app-tile {
    color: var(--ink);
}

[data-bs-theme="dark"] .app-tile:hover,
[data-bs-theme="dark"] .app-tile:focus-visible {
    background-color: #2A2820;
    color: #ffffff;
}

[data-bs-theme="dark"] .app-tile-soon {
    background: #2A2820;
    color: var(--muted);
}

[data-bs-theme="dark"] .app-tile-icon-denim { background: var(--denim-tint); color: var(--denim); }
[data-bs-theme="dark"] .app-tile-icon-amber { background: var(--amber-tint); color: var(--amber); }
[data-bs-theme="dark"] .app-tile-icon-rust { background: var(--rust-tint); color: var(--rust); }
[data-bs-theme="dark"] .app-tile-icon-pine { background: var(--brand-tint); color: var(--brand); }
[data-bs-theme="dark"] .app-tile-icon-teal { background: var(--teal-tint); color: var(--teal); }
[data-bs-theme="dark"] .app-tile-icon-olive { background: var(--olive-tint); color: var(--olive); }
[data-bs-theme="dark"] .app-tile-icon-ink { background: #2A2820; color: var(--ink); }
[data-bs-theme="dark"] .app-tile-icon-muted { background: #2A2820; color: var(--muted); }

/* ---------- Notification bell + user menu dropdowns ---------- */

[data-bs-theme="dark"] .notification-badge {
    box-shadow: 0 0 0 2px #1A1914;
}

[data-bs-theme="dark"] .notification-dropdown-header,
[data-bs-theme="dark"] .notification-item {
    border-color: var(--line);
}

[data-bs-theme="dark"] .notification-item-message {
    color: var(--muted);
}

[data-bs-theme="dark"] .notification-item-meta {
    color: #7A755F;
}

[data-bs-theme="dark"] .user-menu-dropdown {
    border-color: var(--line);
}

    [data-bs-theme="dark"] .user-menu-dropdown .dropdown-item {
        color: var(--ink);
    }

[data-bs-theme="dark"] .user-menu-toggle span:not(.avatar) {
    color: var(--ink);
}

/* ---------- Generic containers used by every module's Create/Edit
   forms (.panel) and the main dashboard's old aliases ---------- */

[data-bs-theme="dark"] .panel,
[data-bs-theme="dark"] .dashboard-card,
[data-bs-theme="dark"] .stat-card {
    background: #1C1B17;
    border-color: var(--line);
}

[data-bs-theme="dark"] .page-title {
    color: var(--ink);
}

[data-bs-theme="dark"] .page-subtitle,
[data-bs-theme="dark"] .section-title {
    color: var(--muted);
}

[data-bs-theme="dark"] .section-title,
[data-bs-theme="dark"] .section-header,
[data-bs-theme="dark"] .action-area {
    border-color: var(--line);
}

[data-bs-theme="dark"] .section-header h6 {
    color: var(--ink);
}

/* ---------- List pages: panel, filter bar, table, status, actions ---------- */

[data-bs-theme="dark"] .employee-panel {
    background: #1C1B17;
    border-color: var(--line);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

[data-bs-theme="dark"] .filter-section {
    background: #1C1B17;
    border-color: var(--line);
}

[data-bs-theme="dark"] .search-wrapper i,
[data-bs-theme="dark"] .input-wrapper > i {
    color: var(--muted);
}

[data-bs-theme="dark"] .search-input,
[data-bs-theme="dark"] .filter-select,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-control1 {
    background-color: #201F19;
    border-color: #3A382E;
    color: var(--ink);
}

[data-bs-theme="dark"] .filter-select {
    color: var(--ink);
}

[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] .search-input::placeholder {
    color: #6E6A5B;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .search-input:focus,
[data-bs-theme="dark"] .filter-select:focus {
    background-color: #201F19;
    color: var(--ink);
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(95, 166, 146, .18) !important;
}

[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .form-switch .form-check-label,
[data-bs-theme="dark"] .form-check-label {
    color: #C9C2B4;
}

[data-bs-theme="dark"] .form-text {
    color: var(--muted);
}

[data-bs-theme="dark"] .employee-table thead th {
    background: #201F19;
    color: var(--muted);
    border-color: var(--line);
}

[data-bs-theme="dark"] .employee-table tbody td {
    color: #DCD7C9;
    border-color: var(--line);
}

[data-bs-theme="dark"] .employee-table tbody tr:hover {
    background: #201F19;
}

[data-bs-theme="dark"] .employee-avatar {
    background: var(--denim-tint);
    color: var(--denim);
}

[data-bs-theme="dark"] .emp-name,
[data-bs-theme="dark"] .page-title {
    color: var(--ink);
}

[data-bs-theme="dark"] .emp-email,
[data-bs-theme="dark"] .employee-count,
[data-bs-theme="dark"] .no-result {
    color: var(--muted);
}

[data-bs-theme="dark"] .employee-code {
    color: #B7C0CD;
}

[data-bs-theme="dark"] .status-badge {
    background: var(--st-green-bg);
    color: var(--st-green-text);
}

[data-bs-theme="dark"] .edit-btn {
    background: #201F19;
    border-color: var(--line);
    color: var(--muted);
}

    [data-bs-theme="dark"] .edit-btn:hover {
        background: var(--denim-tint);
        color: var(--denim);
        border-color: var(--denim);
    }

[data-bs-theme="dark"] .employee-footer {
    background: #1A1914;
    border-color: var(--line);
}


/* ---------- Pagination (every module's list table) ---------- */

[data-bs-theme="dark"] .hrms-pagination {
    background: #1C1B17;
    border-color: var(--line);
}

[data-bs-theme="dark"] .hrms-pagination-info,
[data-bs-theme="dark"] .hrms-page-ellipsis {
    color: var(--muted);
}

[data-bs-theme="dark"] .hrms-page-btn,
[data-bs-theme="dark"] .hrms-page-size {
    background: #201F19;
    border-color: var(--line);
    color: #DCD7C9;
}

    [data-bs-theme="dark"] .hrms-page-btn:hover:not(:disabled) {
        border-color: var(--denim);
        color: var(--denim);
    }

    [data-bs-theme="dark"] .hrms-page-btn.active {
        background: #6366f1;
        border-color: #6366f1;
        color: #ffffff;
    }

/* ---------- Personal Information page ---------- */

[data-bs-theme="dark"] .personal-header,
[data-bs-theme="dark"] .personal-panel {
    background: #1C1B17;
    border-color: var(--line);
}

[data-bs-theme="dark"] .personal-header h2 {
    color: var(--ink);
}

[data-bs-theme="dark"] .personal-page .employee-info {
    color: var(--muted);
}

[data-bs-theme="dark"] .personal-tabs-wrapper {
    background: #201F19;
    border-color: var(--line);
}

[data-bs-theme="dark"] .personal-tabs .nav-link {
    color: var(--muted);
}

    [data-bs-theme="dark"] .personal-tabs .nav-link:hover {
        color: var(--brand);
        background: var(--brand-tint);
    }

    [data-bs-theme="dark"] .personal-tabs .nav-link.active {
        color: var(--brand);
        background: #1C1B17;
    }

        [data-bs-theme="dark"] .personal-tabs .nav-link.active::after {
            background: var(--brand);
        }

[data-bs-theme="dark"] .personal-page .form-label {
    color: #C9C2B4;
}


/* ---------- Status pill system reused across ~58 module views'
   inline <style> blocks (.wf-badge, .role-badge, .notif-*, .method-badge,
   .type-badge, .locked-badge, .pending-pill, .custom-role-badge,
   .system-role-badge). Every page only loads its own inline block, so
   these selectors only ever match whichever page is on screen — grouped
   here by which of the 7 recurring colour families each status maps to. ---------- */

/* Green — positive / completed / paid / verified */
[data-bs-theme="dark"] .wf-achieved,
[data-bs-theme="dark"] .wf-active,
[data-bs-theme="dark"] .wf-allocated,
[data-bs-theme="dark"] .wf-approved,
[data-bs-theme="dark"] .wf-completed,
[data-bs-theme="dark"] .wf-deducted,
[data-bs-theme="dark"] .wf-earning,
[data-bs-theme="dark"] .wf-joined,
[data-bs-theme="dark"] .wf-paid,
[data-bs-theme="dark"] .wf-public,
[data-bs-theme="dark"] .wf-verified,
[data-bs-theme="dark"] .notif-success {
    background: var(--st-green-bg) !important;
    color: var(--st-green-text) !important;
}

/* Amber — pending / in-progress / restricted / scheduled */
[data-bs-theme="dark"] .wf-pending,
[data-bs-theme="dark"] .wf-inprogress,
[data-bs-theme="dark"] .wf-ongoing,
[data-bs-theme="dark"] .wf-processed,
[data-bs-theme="dark"] .wf-restricted,
[data-bs-theme="dark"] .wf-selfassessment,
[data-bs-theme="dark"] .wf-scheduled,
[data-bs-theme="dark"] .pending-pill,
[data-bs-theme="dark"] .notif-warning {
    background: var(--st-amber-bg) !important;
    color: var(--st-amber-text) !important;
}

/* Red — rejected / cancelled / failed / locked */
[data-bs-theme="dark"] .wf-cancelled,
[data-bs-theme="dark"] .wf-deduction,
[data-bs-theme="dark"] .wf-failed,
[data-bs-theme="dark"] .wf-missed,
[data-bs-theme="dark"] .wf-rejected,
[data-bs-theme="dark"] .locked-badge,
[data-bs-theme="dark"] .role-admin,
[data-bs-theme="dark"] .system-role-badge,
[data-bs-theme="dark"] .notif-error {
    background: var(--st-red-bg) !important;
    color: var(--st-red-text) !important;
}

/* Slate — neutral / closed / draft / not started */
[data-bs-theme="dark"] .wf-closed,
[data-bs-theme="dark"] .wf-draft,
[data-bs-theme="dark"] .wf-notstarted,
[data-bs-theme="dark"] .wf-waived,
[data-bs-theme="dark"] .type-badge,
[data-bs-theme="dark"] .role-employee {
    background: var(--st-slate-bg) !important;
    color: var(--st-slate-text) !important;
}

/* Blue — informational / manager review / on track */
[data-bs-theme="dark"] .wf-managerreview,
[data-bs-theme="dark"] .wf-ontrack,
[data-bs-theme="dark"] .role-hr,
[data-bs-theme="dark"] .custom-role-badge,
[data-bs-theme="dark"] .notif-info {
    background: var(--st-blue-bg) !important;
    color: var(--st-blue-text) !important;
}

/* Indigo — on hold / deferred / optional / returned / HR review */
[data-bs-theme="dark"] .wf-deferred,
[data-bs-theme="dark"] .wf-hrreview,
[data-bs-theme="dark"] .wf-onhold,
[data-bs-theme="dark"] .wf-optional,
[data-bs-theme="dark"] .wf-returned,
[data-bs-theme="dark"] .method-badge {
    background: var(--st-indigo-bg) !important;
    color: var(--st-indigo-text) !important;
}

/* Cyan — reimbursed */
[data-bs-theme="dark"] .wf-reimbursed {
    background: var(--st-cyan-bg) !important;
    color: var(--st-cyan-text) !important;
}

/* .audit-details-box is already a deliberately dark code/JSON preview
   (bg #0f172a) in light mode too, so it needs no dark-mode change. */


/* ---------- Login page ---------- */

.login-theme-toggle {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #9aa3b2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

    .login-theme-toggle:hover {
        background: #f1f5f9;
        color: #2563eb;
    }

[data-bs-theme="dark"] .login-page {
    background: #131210;
}

[data-bs-theme="dark"] .login-container {
    background: #1C1B17;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

[data-bs-theme="dark"] .login-theme-toggle {
    color: #A69F8F;
}

    [data-bs-theme="dark"] .login-theme-toggle:hover {
        background: #26241E;
        color: #ECE8DE;
    }

[data-bs-theme="dark"] .login-header h2 {
    color: #ECE8DE;
}

[data-bs-theme="dark"] .login-header p,
[data-bs-theme="dark"] .form-check-label,
[data-bs-theme="dark"] .security-note {
    color: #A69F8F;
}

[data-bs-theme="dark"] .login-panel .form-label {
    color: #C9C2B4;
}

[data-bs-theme="dark"] .login-panel .form-control,
[data-bs-theme="dark"] .login-panel .form-control1 {
    background-color: #201F19;
    border-color: #3A382E;
    color: #ECE8DE;
}

[data-bs-theme="dark"] .input-wrapper > i,
[data-bs-theme="dark"] .password-toggle {
    color: #7A755F;
}

[data-bs-theme="dark"] .password-toggle:hover {
    color: var(--brand, #5FA692);
}


/* ---------- Scrollbar + misc polish ---------- */

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: #1A1914;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3A382E;
    border-radius: 6px;
}

    [data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
        background: #4A4738;
    }

[data-bs-theme="dark"] ::selection {
    background: var(--brand-tint);
    color: var(--ink);
}

[data-bs-theme="dark"] .table-responsive {
    scrollbar-color: #3A382E #1A1914;
}


/* ============================================================
   REPORTS MODULE (Controllers/ReportsController.cs, Views/Reports/*)
   ------------------------------------------------------------
   New "slate" tile colour for the app-switcher tile (every other
   named colour is already used by an existing module), plus the
   summary-stat strip and hub-card grid shared by every report screen.
   All backgrounds/text lean on the existing theme variables so dark
   mode Just Works, except the two spots noted below that mirror
   .employee-panel's hardcoded dark background for consistency.
   ============================================================ */
.app-tile-icon-slate {
    background: #eef1f5;
    color: #475569;
}

[data-bs-theme="dark"] .app-tile-icon-slate {
    background: #262b33;
    color: #9FB0C7;
}

.report-summary-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.report-summary-card {
    flex: 1 1 160px;
    background: var(--brand-tint);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
}

.report-summary-label {
    font-size: 11px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

.report-summary-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
}

.report-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}

a.report-hub-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--line, #e9e5dd);
    background: #fff;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
}

a.report-hub-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    transform: translateY(-1px);
    text-decoration: none;
}

[data-bs-theme="dark"] a.report-hub-card {
    background: #1C1B17;
}

.report-hub-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    background: var(--brand-tint);
    color: var(--brand);
}

.report-hub-title {
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
}

.report-hub-desc {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.4;
}

/* ============================================================
   Status pill (wf-badge) DEFAULTS for the Reports module.
   ------------------------------------------------------------
   Until now .wf-badge and its colour variants only ever existed
   inside ~58 individual views' own inline <style> blocks (see the
   comment above the dark-mode pill block further up this file) —
   there was no global light-mode definition to fall back on.
   Views/Reports/*.cshtml are the first screens that need the full
   set of status colours without repeating the block 10 times, so
   the shared shape + all 7 colour families are defined here once.
   A page-local <style> block with the same class name (as every
   existing view already has) still wins, since it always comes
   later in the document — this changes nothing for those pages.
   ============================================================ */
.wf-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* Green */
.wf-achieved, .wf-active, .wf-allocated, .wf-approved, .wf-completed,
.wf-deducted, .wf-earning, .wf-joined, .wf-paid, .wf-public, .wf-verified {
    background: #ecfdf3; color: #15803d;
}

/* Amber */
.wf-pending, .wf-inprogress, .wf-ongoing, .wf-processed, .wf-restricted,
.wf-selfassessment, .wf-scheduled {
    background: #fef3c7; color: #b45309;
}

/* Red */
.wf-cancelled, .wf-deduction, .wf-failed, .wf-missed, .wf-rejected {
    background: #fee2e2; color: #b91c1c;
}

/* Slate */
.wf-closed, .wf-draft, .wf-notstarted, .wf-waived {
    background: #f1f5f9; color: #475569;
}

/* Blue */
.wf-managerreview, .wf-ontrack {
    background: #dbeafe; color: #1d4ed8;
}

/* Indigo */
.wf-deferred, .wf-hrreview, .wf-onhold, .wf-optional, .wf-returned {
    background: #e0e7ff; color: #4338ca;
}

/* Cyan */
.wf-reimbursed {
    background: #e0f2fe; color: #0369a1;
}

.form-label.required::after {
    content: " *";
    color: red;
    font-weight: bold;
}

/* =====================================================================
   ADYCORE BLUE THEME  (final override layer — keep this block last)
   Colors taken from the AdyCore logo: navy #0B1F4B, royal blue #1E5FD8,
   sky/cyan #12B5F5. Also: compact font sizes, new filter bar design,
   coloured dashboard background.
===================================================================== */

:root {
    --brand: #1E5FD8;
    --brand-dark: #0F2A66;
    --brand-tint: #E8F0FE;
    --brand-sky: #12B5F5;
    --brand-navy: #0B1F4B;
    --primary: #1E5FD8;
    --primary-light: #E8F0FE;
    --ink: #0F1B33;
    --text-dark: #0F1B33;
    --text: #33425E;
    --muted: #5F6F8A;
    --text-muted: #5F6F8A;
    --line: #E1E8F3;
    --border: #E1E8F3;
    --denim: #2B6CB0;
    --denim-tint: #E6F0FA;
    --page-bg: #F3F7FD;
    --bs-primary: #1E5FD8;
    --bs-primary-rgb: 30, 95, 216;
    --bs-link-color: #1E5FD8;
}

/* ---------- Compact typography ---------- */
html { font-size: 14px; }

body {
    font-size: 13px;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: var(--text);
}

.page-title { font-size: 19px !important; font-weight: 700; color: var(--ink); }
.page-subtitle { font-size: 12px !important; color: var(--muted); }
.section-title { font-size: 11.5px !important; letter-spacing: .6px; }
.section-header h6, .panel-head h5, .panel h5 { font-size: 14px !important; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.35rem; } h3 { font-size: 1.15rem; }
h4 { font-size: 1.05rem; } h5 { font-size: .98rem; } h6 { font-size: .9rem; }

.menu-item { font-size: 12.5px !important; padding: 8px 12px !important; }
.menu-title { font-size: 9.5px !important; }
.brand-info strong { font-size: 15px !important; }
.brand-info small { font-size: 8.5px !important; }
.breadcrumb-text { font-size: 12.5px !important; }

.form-label { font-size: 12px !important; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.form-control, .form-select, .form-control1 {
    font-size: 12.5px !important;
    min-height: 34px;
    padding-top: 6px; padding-bottom: 6px;
    border-color: #D5DEEC;
    border-radius: 8px;
}
.form-text { font-size: 11px !important; }
.form-control:focus, .form-select:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(30, 95, 216, .12) !important;
}

.btn { font-size: 12.5px !important; padding: 6px 14px; border-radius: 8px; font-weight: 600; }
.btn-sm { font-size: 11.5px !important; padding: 4px 10px; }
.btn-primary, .add-employee-btn {
    background: linear-gradient(135deg, #1E5FD8 0%, #12A0F0 100%) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(30, 95, 216, .22);
}
.btn-primary:hover, .add-employee-btn:hover {
    background: linear-gradient(135deg, #174FB8 0%, #0E8FDB 100%) !important;
    color: #fff !important;
}
.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-outline-secondary, .btn-light { border-color: #D5DEEC; color: var(--text); background: #fff; }
.btn-outline-secondary:hover, .btn-light:hover { background: var(--brand-tint); border-color: var(--brand-tint); color: var(--brand-dark); }
a { color: var(--brand); }

.table th, .employee-table thead th {
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: #F2F6FD !important;
    color: #4B5C7A !important;
    padding: 10px 14px !important;
}
.table td, .employee-table tbody td { font-size: 12.5px !important; padding: 9px 14px !important; }
.employee-table tbody tr:hover { background: #F6F9FF; }
.emp-name { font-size: 13px !important; }
.emp-email, .employee-code, .employee-count { font-size: 11.5px !important; }
.alert { font-size: 12.5px; padding: 9px 14px; border-radius: 10px; }

/* ---------- Brand / logo ---------- */
.brand-mark {
    background: transparent !important;
    box-shadow: none !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 0 !important;
    padding: 0;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-info strong { color: var(--brand-navy); font-weight: 800; letter-spacing: .3px; }
.brand-info small { color: var(--brand); font-weight: 600; opacity: 1; }
[data-bs-theme="dark"] .brand-info strong { color: #fff; }
[data-bs-theme="dark"] .brand-info small { color: #5BB8FF; }

/* ---------- Sidebar / topbar ---------- */
.sidebar { background: #fff !important; }
.menu-item i { color: #7F8FAD; font-size: 15px; }
.menu-item:hover, .menu-item.active {
    background: linear-gradient(90deg, #E3EDFF 0%, #F1F7FF 100%) !important;
    color: var(--brand-dark) !important;
}
.menu-item:hover i, .menu-item.active i { color: var(--brand) !important; }
.menu-item.active { font-weight: 600; }
.menu-item.active::before { background: linear-gradient(180deg, #1E5FD8, #12B5F5) !important; }
.topbar { background: rgba(255,255,255,.92) !important; backdrop-filter: blur(6px); }
.avatar { background: var(--brand-tint); color: var(--brand-dark); }

/* ---------- Page background ---------- */
body, .page-body { background: var(--page-bg) !important; }
.page-body {
    background:
        radial-gradient(900px 380px at 100% 0%, rgba(18, 181, 245, .10), transparent 65%),
        radial-gradient(800px 360px at 0% 0%, rgba(30, 95, 216, .08), transparent 60%),
        #F3F7FD !important;
}
[data-bs-theme="dark"] body, [data-bs-theme="dark"] .page-body { background: #0E1626 !important; }
[data-bs-theme="dark"] .sidebar, [data-bs-theme="dark"] .topbar { background: #131D31 !important; }

/* ---------- Cards / panels ---------- */
.panel, .employee-panel, .dsh-panel, .dsh-kpi, .dashboard-card, .stat-card {
    border-color: var(--line) !important;
    box-shadow: 0 2px 10px rgba(15, 42, 102, .05);
}
.panel, .employee-panel { border-radius: 14px; background: #fff; }
.page-header { margin-bottom: 14px; }
.section-header { border-color: var(--line) !important; }

/* ---------- FILTER BAR (new design) ---------- */
.filter-section {
    padding: 12px 16px !important;
    background: linear-gradient(180deg, #F7FAFF 0%, #EFF5FF 100%) !important;
    border-bottom: 1px solid var(--line) !important;
}
.filter-wrapper { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.search-wrapper { position: relative; flex: 1 1 260px; min-width: 220px; }
.search-wrapper i {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--brand); font-size: 13px; pointer-events: none;
}
.search-input {
    height: 36px !important;
    padding-left: 34px !important;
    font-size: 12.5px !important;
    border: 1px solid #D0DBEE !important;
    border-radius: 10px !important;
    background: #fff !important;
}
.filter-select {
    width: 170px !important;
    height: 36px !important;
    font-size: 12.5px !important;
    border: 1px solid #D0DBEE !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    color: var(--text) !important;
}
.search-input:focus, .filter-select:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(30, 95, 216, .12) !important;
}
.clear-btn, .clear-btn1 {
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 12.5px !important;
    border-radius: 10px !important;
    display: inline-flex; align-items: center; justify-content: center;
    white-space: nowrap;
}
.filter-section .btn-outline-secondary { background: #fff; }
[data-bs-theme="dark"] .filter-section { background: #16223A !important; border-color: #263552 !important; }
[data-bs-theme="dark"] .search-input, [data-bs-theme="dark"] .filter-select { background: #0F1A2E !important; border-color: #2B3A58 !important; color: #E6ECF8 !important; }

/* ---------- DASHBOARD ---------- */
.dsh-hero {
    background: linear-gradient(120deg, #0B1F4B 0%, #1E5FD8 62%, #12B5F5 120%) !important;
    border: 0 !important;
    border-radius: 16px !important;
    padding: 22px 26px !important;
    box-shadow: 0 10px 28px rgba(30, 95, 216, .25);
    position: relative;
    overflow: hidden;
}
.dsh-hero::after {
    content: ""; position: absolute; right: -60px; top: -80px;
    width: 240px; height: 240px; border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}
.dsh-hero > * { position: relative; z-index: 1; }
.dsh-hero-date { color: rgba(255, 255, 255, .78) !important; font-size: 12px !important; }
.dsh-hero-title { color: #fff !important; font-size: 22px !important; }
.dsh-hero-sub { color: rgba(255, 255, 255, .85) !important; font-size: 12.5px !important; }
.dsh-hero-holiday { background: rgba(255, 255, 255, .14) !important; border: 1px solid rgba(255, 255, 255, .25) !important; }
.dsh-hero-holiday-icon { background: rgba(255, 255, 255, .22) !important; color: #fff !important; }
.dsh-hero-holiday-label { color: rgba(255, 255, 255, .8) !important; font-size: 11px !important; }
.dsh-hero-holiday-value { color: #fff !important; font-size: 14px !important; }

.dsh-kpi { background: #fff !important; border-radius: 14px !important; }
.dsh-kpi-value { font-size: 24px !important; color: var(--ink); }
.dsh-kpi-pine { border-top-color: #1E5FD8 !important; }
.dsh-kpi-denim { border-top-color: #12B5F5 !important; }
.dsh-kpi-pine .dsh-kpi-top i { color: #1E5FD8 !important; }
.dsh-kpi-denim .dsh-kpi-top i { color: #12B5F5 !important; }
.dsh-panel { background: #fff !important; border-radius: 14px !important; }
.dsh-panel-title { font-size: 14px !important; color: var(--ink); }
.dsh-panel-sub { font-size: 11.5px !important; }
.dsh-attendance-bar, .dsh-dept-bar-track { background: #E6EEFB !important; }
.dsh-dept-bar-fill { background: linear-gradient(90deg, #1E5FD8, #12B5F5) !important; }
[data-bs-theme="dark"] .dsh-panel, [data-bs-theme="dark"] .dsh-kpi, [data-bs-theme="dark"] .panel,
[data-bs-theme="dark"] .employee-panel { background: #16223A !important; border-color: #263552 !important; }

/* ---------- Login page ---------- */
.brand-panel { background: linear-gradient(145deg, #0B1F4B 0%, #1E5FD8 60%, #12B5F5 110%) !important; }
.logo-box {
    width: 52px !important; height: 52px !important;
    background: #fff !important; border: 0 !important;
    border-radius: 14px !important; padding: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.logo-box img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-name { font-size: 17px !important; }
.login-panel .btn-primary, .login-btn { background: linear-gradient(135deg, #1E5FD8, #12A0F0) !important; border: 0 !important; }
.password-toggle:hover { color: var(--brand) !important; }

/* ---------- Pagination ---------- */
.page-link { font-size: 12px; color: var(--brand); }
.page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- Status badges / misc ---------- */
.status-badge, .wf-badge { font-size: 11px !important; padding: 3px 9px !important; }
.edit-btn:hover { background: var(--brand-tint) !important; color: var(--brand) !important; border-color: var(--brand) !important; }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

@media (max-width: 768px) {
    .filter-select, .search-wrapper { width: 100% !important; flex: 1 1 100%; }
}


/* =====================================================================
   FINAL UI POLISH  (keep this block LAST in the file)
   1) Compact page sizing across the whole project
   2) Uniform filter bar — every control & button same height, one line,
      vertically centred, action buttons always at the right end
   3) 3D gradient-border cards on every dashboard
===================================================================== */

/* ---------- 1) COMPACT PAGE SIZE ---------- */
html { font-size: 13px; }
body { font-size: 12.5px; }

:root { --topbar-height: 54px; --ctl-h: 32px; }

.topbar { height: 54px !important; padding: 0 18px !important; }
.brand { height: 54px; }
.page-body { padding: 66px 18px 18px 18px !important; }

.page-header { margin-bottom: 12px !important; }
.page-title { font-size: 17px !important; margin-bottom: 1px !important; }
.page-subtitle { font-size: 11.5px !important; }
.add-employee-btn { padding: 0 14px !important; height: var(--ctl-h); display: inline-flex !important; align-items: center; font-size: 12px !important; }

.menu-item { font-size: 12px !important; min-height: 35px !important; padding: 7px 12px !important; }
.menu-item i { font-size: 14px !important; }

.panel { padding: 16px !important; border-radius: 12px !important; }
.employee-panel { border-radius: 12px !important; }
.personal-header { padding: 12px 16px !important; }
.personal-tab-content { padding: 14px 16px !important; }

/* Form controls: one consistent height (the old login-page rule leaked a
   43px height + 40px right padding onto every .form-control in the app) */
.form-control, .form-select {
    height: var(--ctl-h) !important;
    min-height: var(--ctl-h) !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    border-radius: 7px !important;
}
.form-select { padding-right: 30px !important; background-position: right 9px center !important; }
textarea.form-control, select[multiple].form-select, select[size].form-select { height: auto !important; }
.form-control[type="file"] { padding: 0 !important; line-height: calc(var(--ctl-h) - 2px); }
.form-control[type="file"]::file-selector-button { height: 100%; padding: 0 12px; }
.form-control[type="color"] { padding: 3px !important; }
.form-label { font-size: 11.5px !important; margin-bottom: 3px !important; }
.input-group > .btn, .input-group-text { height: var(--ctl-h); font-size: 12px; }

.btn { font-size: 12px !important; padding: 5px 12px; border-radius: 7px; }
.btn-sm { font-size: 11px !important; padding: 3px 9px; }
.btn-compact, .back-btn { height: var(--ctl-h) !important; }
.action-area { margin-top: 14px !important; padding-top: 10px !important; }

.table th, .employee-table thead th { font-size: 10.5px !important; padding: 8px 12px !important; }
.table td, .employee-table tbody td { font-size: 12px !important; padding: 7px 12px !important; }
.employee-avatar { width: 30px !important; height: 30px !important; min-width: 30px !important; font-size: 11px !important; }
.emp-name { font-size: 12px !important; }
.emp-email, .employee-code, .employee-count { font-size: 11px !important; }
.edit-btn { width: 28px !important; height: 28px !important; }
.employee-footer, .hrms-pagination { padding: 8px 14px !important; }
.hrms-page-btn, .hrms-page-size { height: 28px; min-width: 28px; font-size: 11.5px; }
.status-badge, .wf-badge { font-size: 10.5px !important; padding: 3px 8px !important; }
.alert { font-size: 12px !important; padding: 8px 12px !important; }

/* ---------- 2) FILTER BAR — same layout on every page ---------- */
.filter-section {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px !important;
    margin: 0 !important;
}
/* direct children of the bar (a .filter-wrapper, a bootstrap .row, or
   an extra <form> such as Biometric's "Process punches") share one line */
.filter-section > .filter-wrapper { flex: 1 1 auto; min-width: 0; }
.filter-section > .row { flex: 1 1 100%; margin-top: 0; }
.filter-section > form:not(.filter-wrapper) { flex: 0 0 auto; margin: 0; }

.filter-wrapper {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}
.filter-wrapper > * { margin-top: 0 !important; margin-bottom: 0 !important; }

/* every input / select / button inside the bar = identical height */
.filter-section .form-control,
.filter-section .form-control1,
.filter-section .form-select,
.filter-section .search-input,
.filter-section .filter-select {
    height: var(--ctl-h) !important;
    min-height: var(--ctl-h) !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    margin: 0 !important;
}
.filter-section .search-input { padding-left: 32px !important; padding-right: 10px !important; }
.filter-section .filter-select { width: 170px !important; }
.filter-section input[type="date"] { width: 150px !important; max-width: 150px !important; }
.filter-section input[type="number"] { width: 110px !important; max-width: 110px !important; }
.filter-section .search-wrapper { flex: 1 1 240px; min-width: 200px; max-width: 420px; }
.filter-section .search-wrapper i { font-size: 12.5px; left: 11px; }

.filter-section .btn,
.filter-section .clear-btn,
.filter-section .clear-btn1 {
    height: var(--ctl-h) !important;
    min-height: var(--ctl-h) !important;
    padding: 0 13px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 12px !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    white-space: nowrap;
    margin: 0 !important;
}

/* inline labels ("From", "To", "Date") sit on the same centre line */
.filter-wrapper > .form-label {
    margin: 0 !important;
    font-size: 11.5px !important;
    font-weight: 600;
    white-space: nowrap;
    line-height: var(--ctl-h);
}

/* action buttons always land at the right end of the bar */
.filter-wrapper > :not(.btn):not(input[type="hidden"]) + .btn,
.filter-wrapper > :not(.btn):not(input[type="hidden"]) + button.btn {
    margin-left: auto !important;
}
.filter-section > .filter-wrapper:has(> .search-wrapper) .search-wrapper + .btn,
.filter-section > .filter-wrapper:has(> .search-wrapper) .search-wrapper ~ select + .btn { margin-left: auto !important; }

/* label-above filter rows (Reports, Audit Log) */
.filter-section .row { --bs-gutter-x: 10px; --bs-gutter-y: 8px; align-items: flex-end !important; }
.filter-section .row .form-label { margin-bottom: 3px !important; line-height: 1.2; }
.filter-section .row input[type="date"] { width: 100% !important; max-width: none !important; }
.filter-section .row .btn { width: 100%; min-width: 74px; }

/* when a filter bar sits right above a table, no extra gap */
.filter-section + .table-responsive { margin-top: 0 !important; }

[data-bs-theme="dark"] .filter-section .form-control,
[data-bs-theme="dark"] .filter-section .form-select { background-color: #0F1A2E !important; border-color: #2B3A58 !important; color: #E6ECF8 !important; }

@media (max-width: 768px) {
    .filter-section .filter-select,
    .filter-section .search-wrapper { width: 100% !important; max-width: none; flex: 1 1 100%; }
    .filter-wrapper > :not(.btn) + .btn { margin-left: 0 !important; }
}

/* ---------- 3) DASHBOARD — compact sizing ---------- */
.dsh-hero { padding: 16px 20px !important; margin-bottom: 14px !important; border-radius: 14px !important; }
.dsh-hero-date { font-size: 11px !important; margin-bottom: 4px !important; }
.dsh-hero-title { font-size: 19px !important; margin-bottom: 3px !important; }
.dsh-hero-sub { font-size: 12px !important; }
.dsh-hero-holiday { padding: 8px 14px 8px 8px !important; }
.dsh-hero-holiday-icon { width: 32px !important; height: 32px !important; font-size: 14px !important; }
.dsh-hero-holiday-value { font-size: 13px !important; }

.dsh-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 14px !important; margin-bottom: 16px !important; }
.dsh-kpi { padding: 13px 15px 14px !important; }
.dsh-kpi-top { font-size: 11.5px !important; margin-bottom: 8px !important; }
.dsh-kpi-top i { font-size: 13px !important; }
.dsh-kpi-value { font-size: 22px !important; }
.dsh-row { gap: 14px !important; margin-bottom: 14px !important; }
.dsh-panel { padding: 15px 16px !important; }
.dsh-panel-head { margin-bottom: 10px !important; }
.dsh-panel-title { font-size: 13.5px !important; }
.dsh-panel-sub { font-size: 11px !important; }
.dsh-people-row, .dsh-holiday-row { padding: 7px 6px !important; }
.dsh-avatar-circle { width: 32px !important; height: 32px !important; font-size: 12px !important; }
.dsh-people-name, .dsh-holiday-name { font-size: 12.5px !important; }
.dsh-people-meta, .dsh-holiday-meta { font-size: 11px !important; }
.dsh-attendance-row { padding: 8px 4px !important; }
.dsh-attendance-label { font-size: 12px !important; }
.dsh-attendance-count { font-size: 14px !important; }
.dsh-empty { padding: 24px 10px !important; }

/* ---------- 3) DASHBOARD — 3D gradient-border cards ----------
   Technique: transparent border + two backgrounds (card fill clipped to
   padding-box, colour gradient clipped to border-box) gives a gradient
   border; a solid offset shadow in a darker shade adds the raised 3D
   "edge", an inset highlight adds the bevel, and a soft drop shadow
   lifts it off the page.                                              */
.dsh-kpi, .dsh-panel, .report-summary-card, a.report-hub-card {
    --c1: #4F8BFF; --c2: #12B5F5; --edge: #1E4FB0; --glow: 30, 95, 216;
    --fill: #ffffff;
    position: relative;
    border: 2px solid transparent !important;
    border-radius: 14px !important;
    background:
        linear-gradient(180deg, var(--fill) 0%, var(--fill) 100%) padding-box,
        linear-gradient(135deg, var(--c1) 0%, var(--c2) 55%, var(--edge) 100%) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        inset 0 -3px 6px rgba(var(--glow), .06),
        0 4px 0 -1px var(--edge),
        0 10px 18px -6px rgba(var(--glow), .35),
        0 2px 4px rgba(15, 23, 42, .06) !important;
    transition: transform .18s ease, box-shadow .18s ease;
    overflow: visible !important;
}
.dsh-kpi:hover, .report-summary-card:hover, a.report-hub-card:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        inset 0 -3px 6px rgba(var(--glow), .08),
        0 6px 0 -1px var(--edge),
        0 16px 26px -8px rgba(var(--glow), .45),
        0 2px 4px rgba(15, 23, 42, .06) !important;
}
.dsh-kpi { --fill: #ffffff; margin-bottom: 4px; }
.dsh-kpi-grid { padding-bottom: 4px; }

/* soft top sheen on KPI cards for extra depth */
.dsh-kpi::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 46%;
    border-radius: 12px 12px 40% 40% / 12px 12px 14px 14px;
    background: linear-gradient(180deg, rgba(var(--glow), .07), rgba(var(--glow), 0));
    pointer-events: none;
}
.dsh-kpi > * { position: relative; }

/* per-colour KPI variants */
.dsh-kpi-pine  { --c1: #6FA0FF; --c2: #1E5FD8; --edge: #133E98; --glow: 30, 95, 216; }
.dsh-kpi-denim { --c1: #7FD8FF; --c2: #12B5F5; --edge: #0A7FB5; --glow: 18, 181, 245; }
.dsh-kpi-amber { --c1: #FFD27A; --c2: #F0A020; --edge: #A86A0C; --glow: 240, 160, 32; }
.dsh-kpi-rust  { --c1: #FF9F8A; --c2: #E0533A; --edge: #9C3220; --glow: 224, 83, 58; }
.dsh-kpi-plum  { --c1: #D2A8F0; --c2: #8E55C2; --edge: #5E3088; --glow: 142, 85, 194; }
.dsh-kpi-teal  { --c1: #7FE0CF; --c2: #1FA390; --edge: #11695D; --glow: 31, 163, 144; }

.dsh-kpi-pine  .dsh-kpi-top i { color: #1E5FD8 !important; }
.dsh-kpi-denim .dsh-kpi-top i { color: #0A9AD8 !important; }
.dsh-kpi-amber .dsh-kpi-top i { color: #C9820F !important; }
.dsh-kpi-rust  .dsh-kpi-top i { color: #D0442B !important; }
.dsh-kpi-plum  .dsh-kpi-top i { color: #8E55C2 !important; }
.dsh-kpi-teal  .dsh-kpi-top i { color: #1A9483 !important; }

/* panels: calmer blue 3D frame */
.dsh-panel {
    --c1: #C9DCFF; --c2: #8DB8FF; --edge: #6C9BEA; --glow: 30, 95, 216;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        0 3px 0 -1px var(--edge),
        0 10px 20px -10px rgba(var(--glow), .30),
        0 1px 3px rgba(15, 23, 42, .05) !important;
}
.report-summary-card { --fill: #F5F9FF; padding: 11px 13px !important; }
.report-summary-value { font-size: 18px !important; }
a.report-hub-card { padding: 14px !important; }

/* dark mode: same 3D frame on the dark card fill */
[data-bs-theme="dark"] .dsh-kpi,
[data-bs-theme="dark"] .dsh-panel,
[data-bs-theme="dark"] .report-summary-card,
[data-bs-theme="dark"] a.report-hub-card {
    --fill: #16223A;
    background:
        linear-gradient(180deg, var(--fill), var(--fill)) padding-box,
        linear-gradient(135deg, var(--c1) 0%, var(--c2) 55%, var(--edge) 100%) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 4px 0 -1px var(--edge),
        0 12px 22px -8px rgba(0, 0, 0, .6) !important;
}
[data-bs-theme="dark"] .dsh-panel { --c1: #2D4A7C; --c2: #3B6BC2; --edge: #1E3560; }

@media (max-width: 991px) {
    .topbar { height: 54px !important; }
    .page-body { padding: 66px 14px 16px 14px !important; }
}
@media (max-width: 575px) {
    .page-body { padding: 64px 10px 14px 10px !important; }
}

/* KPI value always sits on the same baseline, even when a label wraps */
.dsh-kpi { display: flex; flex-direction: column; justify-content: space-between; }

/* Dark mode: the ADYCORE :root palette above is declared later than the
   dark palette with equal specificity, so it was overriding the dark text
   colours (dark-blue text on dark cards). Re-assert the dark values. */
html[data-bs-theme="dark"] {
    --ink: #E6ECF8; --text-dark: #E6ECF8; --text: #C9D3E6;
    --muted: #93A1BC; --text-muted: #93A1BC;
    --line: #263552; --border: #263552;
    --brand-tint: #1A2B4A; --primary-light: #1A2B4A; --brand-dark: #9CC3FF;
}
[data-bs-theme="dark"] .menu-item:hover,
[data-bs-theme="dark"] .menu-item.active { background: linear-gradient(90deg, #1E3360 0%, #172645 100%) !important; color: #E6ECF8 !important; }
[data-bs-theme="dark"] .report-summary-card { --fill: #16223A; }