@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&display=swap');

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --brand       : #11599c;
    --brand-dark  : #0d4578;
    --brand-xlight: #e8f2fb;
    --brand-mid   : #4a90c8;
    --nav-h       : 58px;
    --sb-w        : 290x;
    --radius-sm   : 6px;
    --radius-md   : 9px;
    --radius-lg   : 12px;
    --border      : rgba(0, 0, 0, 0.07);
    --text-1      : #1a1d23;
    --text-2      : #6b7280;
    --text-3      : #9ca3af;
    --hover-bg    : rgba(17, 89, 156, 0.07);
    --active-bg   : #e8f2fb;
    --active-text : #0C447C;
    --trans       : 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-sm   : 0 1px 4px rgba(0, 0, 0, 0.08);
    --shadow-md   : 0 4px 18px rgba(0, 0, 0, 0.12);
    --shadow-lg   : 0 8px 32px rgba(0, 0, 0, 0.16);
}

body {
    font-family: 'DM Sans', system-ui, sans-serif;
    /* padding-top: var(--nav-h); */
}

.navbar-top {
    /* position     : fixed; */
    top          : 0;
    left         : 0;
    right        : 0;
    height       : var(--nav-h);
    background   : var(--brand);
    z-index      : 900;
    box-shadow   : 0 2px 12px rgba(13, 69, 120, 0.30);
    padding: 0px 50px 0px 50px;
    border-radius: 0;
}

.container_nav {
    width          : 100%;
    height         : 100%;
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding: 0 5px;
}

.navbar-brand-top {
    display    : flex;
    align-items: center;
    gap        : 14px;
    position   : static !important;
    top        : unset !important;
    transform  : none !important;
}

#hamburgerIcon {
    width      : 22px;
    height     : 22px;
    cursor     : pointer;
    filter     : brightness(0) invert(1);
    opacity    : 0.88;
    transition : opacity var(--trans), transform var(--trans);
    flex-shrink: 0;
}

#hamburgerIcon:hover {
    opacity  : 1;
    transform: scale(1.08);
}


.navbar-menu {
    display    : flex;
    align-items: center;
    position   : static;
    right      : unset;
    top        : unset;
}

.navbar-menu form {
    margin: 0;
}

.profile-button {
    position  : relative;
    display   : inline-block;
    margin-top: 0;
}

.profile-info {
    display      : flex;
    align-items  : center;
    gap          : 8px;
    padding      : 4px 12px 4px 4px;
    background   : rgba(255, 255, 255, 0.13);
    border       : 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 28px;
    cursor       : pointer;
    transition   : background var(--trans), border-color var(--trans);
}

.profile-info:hover {
    background  : rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.32);
}

.profile.e-icon {
    display    : flex;
    align-items: center;
}

.profileid {
    width        : 30px;
    height       : 30px;
    border-radius: 50%;
    object-fit   : cover;
    border       : 2px solid rgba(255, 255, 255, 0.50);
    display      : block;
    cursor       : pointer;
}

.profile-name {
    display    : flex;
    align-items: center;
    gap        : 7px;
    font-size  : 13px;
    font-weight: 500;
    color      : #fff;
    white-space: nowrap;
}

.profile-name .fa-caret-down {
    font-size : 11px;
    opacity   : 0.75;
    cursor    : pointer;
    transition: transform var(--trans);
}

.profile-button:hover .fa-caret-down {
    transform: rotate(180deg);
}

.profile-dropdown {
    display      : none;
    position     : absolute;
    top          : calc(100% + 8px);
    right        : 0;
    min-width    : 172px;
    background   : #fff;
    border       : 0.5px solid rgba(0, 0, 0, 0.10);
    border-radius: var(--radius-md);
    box-shadow   : var(--shadow-md);
    overflow     : hidden;
    z-index      : 1000;
    animation    : dropFade 0.16s ease;
}

@keyframes dropFade {
    from {
        opacity  : 0;
        transform: translateY(-5px);
    }

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

.profile-dropdown a {
    display        : flex;
    align-items    : center;
    gap            : 9px;
    padding        : 10px 15px;
    font-size      : 13.5px;
    font-weight    : 400;
    color          : var(--text-1);
    text-decoration: none;
    transition     : background var(--trans);
}

.profile-dropdown a:hover {
    background: var(--hover-bg);
}

.profile-dropdown a i {
    width     : 15px;
    font-size : 13px;
    color     : var(--brand);
    text-align: center;
}

#overlay {
    position       : fixed;
    inset          : 0;
    background     : rgba(15, 23, 42, 0.40);
    display        : none;
    z-index        : 950;
    backdrop-filter: blur(1.5px);
    animation      : fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.sidebar_sec {
    position      : fixed;
    top           : 0;
    left          : 0;
    bottom        : 0;
    width         : 0;
    overflow      : hidden;
    background    : #fff;
    z-index       : 1000;
    transition    : width 0.30s cubic-bezier(0.4, 0, 0.2, 1);
    display       : flex;
    flex-direction: column;
    box-shadow    : 4px 0 24px rgba(0, 0, 0, 0.13);
}

.sidebar_sec .logo {
    height         : var(--nav-h);
    min-height     : var(--nav-h);
    flex-shrink    : 0;
    display        : flex !important;
    align-items    : center !important;
    justify-content: flex-start !important;
    padding        : 0 50px 0 16px;
    background     : var(--brand);
    position       : static !important;
    transform      : none !important;
}

.sidebar_sec .logo img {
    height    : 26px;
    width     : auto;
    max-width : 155px;
    object-fit: contain;
}

.sidebar_sec .close-btn {
    position       : absolute;
    top            : 15px;
    right          : 13px;
    width          : 27px;
    height         : 27px;
    background     : rgba(255, 255, 255, 0.16);
    border-radius  : 50%;
    cursor         : pointer;
    display        : flex;
    align-items    : center;
    justify-content: center;
    transition     : background var(--trans);
    left           : unset;
    font-size      : unset;
    z-index        : 2;
}

.sidebar_sec .close-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

.sidebar_sec .close-btn::before,
.sidebar_sec .close-btn::after {
    content      : '';
    position     : absolute;
    width        : 13px;
    height       : 2px;
    background   : #fff;
    border-radius: 2px;
}

.sidebar_sec .close-btn::before {
    transform: rotate(45deg);
}

.sidebar_sec .close-btn::after {
    transform: rotate(-45deg);
}

.sidebar-user-card {
    margin       : 12px 10px 4px;
    padding      : 9px 12px;
    background   : var(--brand-xlight);
    border-radius: var(--radius-md);
    display      : flex;
    align-items  : center;
    gap          : 10px;
    cursor       : pointer;
    transition   : background var(--trans);
    flex-shrink  : 0;
    min-width    : calc(var(--sb-w) - 20px);
}

.sidebar-user-card:hover {
    background: #d4e9f7;
}

.suc-avatar {
    width          : 36px;
    height         : 36px;
    border-radius  : 50%;
    background     : var(--brand);
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 13px;
    font-weight    : 600;
    color          : #fff;
    flex-shrink    : 0;
    overflow       : hidden;
}

.suc-avatar img {
    width        : 100%;
    height       : 100%;
    object-fit   : cover;
    border-radius: 50%;
}

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

.suc-name {
    font-size    : 13px;
    font-weight  : 600;
    color        : #0C447C;
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}

.suc-code {
    font-size : 11px;
    color     : var(--brand-mid);
    margin-top: 1px;
}

.suc-arrow {
    color      : var(--brand-mid);
    font-size  : 12px;
    flex-shrink: 0;
}

/* Scroll area */
#menuContainer {
    flex           : 1;
    overflow-y     : auto;
    overflow-x     : hidden;
    padding        : 10px 0 24px;
    width          : var(--sb-w);
    font-family    : 'DM Sans', sans-serif;
    scrollbar-width: thin;
    scrollbar-color: rgba(17, 89, 156, 0.18) transparent;
}

#menuContainer::-webkit-scrollbar {
    width: 3px;
}

#menuContainer::-webkit-scrollbar-thumb {
    background   : rgba(17, 89, 156, 0.18);
    border-radius: 3px;
}
.sb-section-label {
    font-size     : 10px;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: 0.85px;
    color         : var(--text-3);
    padding       : 14px 20px 4px;
}

/* Divider */
.sb-divider {
    height    : 1px;
    background: var(--border);
    margin    : 8px 16px;
}

.menu-group {
    margin-bottom: 2px;
}

.menu-group-title {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 9px 13px;
    margin         : 1px 10px;
    border-radius  : var(--radius-md);
    cursor         : pointer;
    user-select    : none;
    font-size      : 0;
    transition     : background var(--trans);
}

.menu-group-title:hover {
    background: #f5f7fa;
}

.menu-group-title.grp-open {
    background: var(--hover-bg);
}

.menu-group-title .menu {
    display    : flex;
    align-items: center;
    gap        : 10px;
    font-size  : 13.5px;
    font-weight: 600;
    color      : var(--text-1);
    transition : color var(--trans);
}

.menu-group-title.grp-open .menu {
    color: var(--brand);
}

.menu-group-title .menu svg {
    flex-shrink: 0;
    width      : 17px;
    height     : 17px;
}

/* Chevron */
.toggle-icon {
    display    : flex;
    align-items: center;
    color      : var(--text-3);
    font-size  : 11px;
    transition : transform var(--trans);
    flex-shrink: 0;
}

.menu-group-title.grp-open .toggle-icon {
    transform: rotate(180deg);
}

.menu-group:first-child .menu-group-title {
    cursor: default;
}

.menu-group:first-child .menu-group-title .menu {
    cursor: pointer;
}

.menu-list {
    list-style: none;
    padding   : 0 10px 2px 14px;
    margin    : 0;
}

.menu-list li {
    margin: 1px 0;
}

.menu-list a {
    display        : flex;
    align-items    : center;
    gap            : 9px;
    padding        : 7px 10px 7px 32px;
    border-radius  : var(--radius-sm);
    font-size      : 13px;
    font-weight    : 400;
    color          : var(--text-2);
    text-decoration: none;
    cursor         : pointer;
    position       : relative;
    transition     : background var(--trans), color var(--trans), padding-left var(--trans);
}

/* .menu-list a::before {
    content      : '';
    position     : absolute;
    left         : 16px;
    width        : 5px;
    height       : 5px;
    border-radius: 50%;
    background   : #d1d5db;
    transition   : background var(--trans), transform var(--trans);
    transform    : scale(0.8);
} */

.menu-list a:hover {
    background  : var(--hover-bg);
    color       : var(--brand);
    padding-left: 34px;
}

.menu-list a:hover::before {
    background: var(--brand-mid);
    transform : scale(1);
}

.menu-list a.active-link {
    background  : var(--active-bg);
    color       : var(--active-text);
    font-weight : 500;
    padding-left: 34px;
}

.menu-list a.active-link::before {
    background: var(--brand);
    transform : scale(1.1);
}

.menu-list .preview-image {
    width        : 18px;
    height       : 18px;
    object-fit   : contain;
    border-radius: 3px;
    flex-shrink  : 0;
}

/* Tooltip disabled */
.tooltip-disabled {
    position: relative;
    opacity : 0.48;
    cursor  : not-allowed !important;
}

.tooltip-disabled:hover {
    background  : transparent !important;
    color       : var(--text-2) !important;
    padding-left: 32px !important;
}

.tooltip-disabled::before {
    display: none !important;
}

.tooltip-text {
    visibility    : hidden;
    opacity       : 0;
    position      : absolute;
    left: 0;
    /* left          : calc(100% + 8px); */
    top           : 50%;
    transform     : translateY(-50%);
    background    : #1e293b;
    color         : #fff;
    font-size     : 11.5px;
    padding       : 5px 10px;
    border-radius : var(--radius-sm);
    white-space   : nowrap;
    z-index       : 2000;
    pointer-events: none;
    box-shadow    : var(--shadow-sm);
    transition    : opacity 0.15s ease;
}

.tooltip-text::before {
    content           : '';
    position          : absolute;
    right             : 100%;
    top               : 50%;
    transform         : translateY(-50%);
    border            : 5px solid transparent;
    border-right-color: #1e293b;
}

.tooltip-disabled:hover .tooltip-text {
    visibility: visible;
    opacity   : 1;
}
.sidebar-footer {
    flex-shrink: 0;
    padding    : 10px;
    border-top : 1px solid var(--border);
    min-width  : var(--sb-w);
}

.sidebar-logout {
    display        : flex;
    align-items    : center;
    gap            : 9px;
    padding        : 8px 12px;
    border-radius  : var(--radius-md);
    cursor         : pointer;
    color          : #b91c1c;
    font-size      : 13px;
    font-weight    : 500;
    text-decoration: none;
    transition     : background var(--trans);
}

.sidebar-logout:hover {
    background: #fef2f2;
}

.sidebar-logout i {
    font-size: 13px;
}

.profilesec {
    display        : none;
    position       : fixed;
    inset          : 0;
    z-index        : 1100;
    background     : rgba(15, 23, 42, 0.40);
    backdrop-filter: blur(2px);
    justify-content: flex-end;
}

.modal-profile {
    position  : relative;
    background: #fff;
    width     : 58%;
    max-width : 700px;
    height    : 100%;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation : slideRight 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideRight {
    from {
        transform: translateX(40px);
        opacity  : 0;
    }

    to {
        transform: translateX(0);
        opacity  : 1;
    }
}

.modal-profile .heading_sec {
    background     : var(--brand);
    padding        : 13px 20px;
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    position       : sticky;
    top            : 0;
    z-index        : 10;
    border-radius  : 0;
}

.modal-profile .heading_sec h4 {
    margin     : 0;
    padding    : 0;
    font-size  : 15.5px;
    font-weight: 700;
    color      : #fff;
    line-height: 1.3;
}

.closeprofile {
    width          : 27px;
    height         : 27px;
    background     : rgba(255, 255, 255, 0.18);
    border-radius  : 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 18px;
    color          : #fff;
    cursor         : pointer;
    float          : none;
    margin         : 0;
    transition     : background var(--trans);
    line-height    : 1;
    font-weight    : 400;
}

.closeprofile:hover {
    background: rgba(255, 255, 255, 0.30);
}

.modal-profile .welcome_sec {
    padding      : 13px 20px;
    background   : #fffbf0;
    border-bottom: 1px solid #ffe8a0;
    box-shadow   : none;
}

.modal-profile .welcome_sec h5 {
    font-size  : 13px;
    font-weight: 700;
    color      : var(--brand);
    padding    : 0;
    margin     : 0 0 5px;
    line-height: 1.4;
}

.modal-profile .welcome_sec p {
    font-size  : 11px;
    color      : #8b6e0a;
    padding    : 0;
    margin     : 0;
    line-height: 1.6;
}

.modal-profile .welcome_sec p span {
    font-weight: 700;
    font-size  : inherit;
    color      : #5c4500;
}

.modal-profile .profileinfo_sec {
    padding   : 16px 20px;
    margin    : 0;
    box-shadow: none;
}

.about_sec {
    margin-bottom: 16px;
    border       : 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow     : hidden;
}

.modal-profile .about_heading {
    background: var(--brand-xlight);
    padding   : 8px 15px;
}

.modal-profile .about_heading h5 {
    margin     : 0;
    font-size  : 13px;
    font-weight: 600;
    color      : var(--brand);
}

.about_sec hr {
    display: none;
}

.modal-profile .about_information {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    padding              : 0;
}

.modal-profile .about_information_first,
.modal-profile .about_information_second {
    padding: 12px 15px;
}

.modal-profile .about_information_first {
    border-right: 1px solid var(--border);
}

.about_information_second.pad {
    width: auto;
}

.modal-profile .about_information p {
    font-size     : 11.5px;
    font-weight   : 600;
    color         : var(--text-2);
    margin        : 0 0 8px;
    display       : flex;
    flex-direction: column;
    gap           : 2px;
}

.modal-profile .about_information p:last-child {
    margin-bottom: 0;
}

.modal-profile .about_information span {
    font-weight: 400;
    font-size  : 12px;
    color      : var(--text-1);
}

.no_data {
    padding   : 13px 15px;
    font-size : 13px;
    color     : var(--text-3);
    text-align: center;
}

.modalnav {
    display        : none;
    position       : fixed;
    inset          : 0;
    z-index        : 1200;
    background     : rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    align-items    : flex-start;
    justify-content: flex-end;
    padding-top    : 0;
}

.modal-contentnav {
    position     : absolute;
    top          : var(--nav-h);
    right        : 0;
    width        : 225px;
    background   : #fff;
    border-radius: 0 0 0 var(--radius-lg);
    box-shadow   : var(--shadow-lg);
    padding      : 20px 17px;
    animation    : dropFade 0.18s ease;
}

.modal-contentnav h2 {
    font-size  : 14px;
    font-weight: 700;
    color      : var(--brand);
    text-align : center;
    margin     : 0 0 15px;
}

.close-button {
    position   : absolute;
    top        : 10px;
    right      : 11px;
    font-size  : 22px;
    color      : var(--text-2);
    cursor     : pointer;
    line-height: 1;
    transition : color var(--trans);
}

.close-button:hover {
    color: var(--text-1);
}

.upload-container {
    display        : flex;
    justify-content: center;
    margin-bottom  : 14px;
}

.profile-placeholder {
    width              : 88px;
    height             : 88px;
    border-radius      : 50%;
    background         : var(--brand-xlight);
    border             : 3px solid var(--brand);
    display            : flex;
    align-items        : center;
    justify-content    : center;
    position           : relative;
    overflow           : visible;
    background-size    : cover;
    background-position: center;
}

.user-icon {
    color: var(--brand-mid);
}

.upload-icon {
    position       : absolute;
    bottom         : 0;
    right          : 0;
    width          : 25px;
    height         : 25px;
    background     : var(--brand);
    border-radius  : 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    border         : 2px solid #fff;
    cursor         : pointer;
    transition     : background var(--trans);
}

.upload-icon:hover {
    background: var(--brand-dark);
}

.upload-icon i {
    color    : #fff;
    font-size: 11px;
}

.modal-contentnav .buttons {
    display        : flex;
    justify-content: center;
    padding-top    : 13px;
}

.modal-contentnav .btn-action {
    width        : 100%;
    background   : var(--brand);
    color        : #fff;
    border       : none;
    border-radius: var(--radius-md);
    padding      : 8px 14px;
    font-family  : 'DM Sans', sans-serif;
    font-size    : 13px;
    font-weight  : 500;
    cursor       : pointer;
    transition   : background var(--trans);
}

.modal-contentnav .btn-action:hover {
    background: var(--brand-dark);
}

/* ── LOADER ─────────────────────────────────────────────── */
.loader-overlay {
    position       : fixed;
    inset          : 0;
    background     : rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(2px);
    display        : flex;
    align-items    : center;
    justify-content: center;
    z-index        : 9999;
}

.loader-overlay.hidden {
    display: none;
}

.loader {
    width           : 40px;
    height          : 40px;
    border          : 3px solid var(--brand-xlight);
    border-top-color: var(--brand);
    border-radius   : 50%;
    animation       : spin 0.8s linear infinite;
}

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

.alert {
    padding      : 11px 18px;
    border-radius: var(--radius-md);
    border       : 1px solid transparent;
    font-size    : 13.5px;
    margin-bottom: 14px;
    position     : relative;
}

.alert-success {
    color       : #14532d;
    background  : #f0fdf4;
    border-color: #bbf7d0;
}

.alert-error {
    color       : #7f1d1d;
    background  : #fef2f2;
    border-color: #fecaca;
}

.alert-dismissible .close {
    position   : absolute;
    top        : 9px;
    right      : 14px;
    background : none;
    border     : none;
    font-size  : 20px;
    cursor     : pointer;
    color      : inherit;
    line-height: 1;
}

/* ── BREADCRUMB ─────────────────────────────────────────── */
.home_sec {
    padding    : 13px 16px 6px;
    display    : flex;
    align-items: center;
    gap        : 4px;
}

.home_sec a {
    font-size      : 13px;
    color          : var(--brand);
    text-decoration: none;
    padding        : 0 3px;
}

.home_sec a:hover {
    text-decoration: underline;
}

.home_sec i {
    color    : var(--text-3);
    font-size: 10px;
}




.home_sec a {
    text-decoration: none;
    padding-left   : 3px;
    padding-right  : 3px;
    color          : #11599c;

    font-family: "Inter", sans-serif;
    font-style : normal;
    font-weight: 400;
    font-size  : 16px;
    line-height: 16px;
    text-align : left;
}

.home_sec {
    padding     : 18px 10px 10px 15px;
    padding-left: 18px;
    gap         : 10px !important;
}

.home_sec i {
    padding-right: 3px;
}

.pagination {
    display    : flex;
    gap        : 10px;
    align-items: center;

    a {
        font-weight: 500;
        font-size  : 14px;
        color      : #667085;
    }
}

.fa-greater-than {
    padding-left: 6px;
}