/* ========================================================================== */
/* Business OS Application Shell                                             */
/* Shell, sidebar, navigation, header layout, and mobile-control defaults.   */
/* Shared component and responsive rules intentionally live elsewhere.       */
/* ========================================================================== */

.sidebar-nav a{
    display:flex;
    align-items:center;
    gap:12px;
}
.sidebar-collapse-btn{position:absolute;inset-block-start:10px;inset-inline-end:8px;z-index:2;display:inline-grid;width:32px;height:32px;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:9px;background:rgba(255,255,255,.09);color:inherit;cursor:pointer}
.sidebar-collapse-btn:hover{background:rgba(255,255,255,.17)}

.sidebar-nav a i{
    width:20px;
    text-align:center;
    font-size:15px;
    color:rgba(255,255,255,.75);
    transition:.2s;
}

.sidebar-nav a:hover i{
    color:#fff;
}

.sidebar-nav a.active{
    background:rgba(255,255,255,.16);
    color:#fff;
    font-weight:600;
    box-shadow:inset 3px 0 0 rgba(255,255,255,.95);
}

.sidebar-nav a.active,
.sidebar-nav a.active i{
    color:#fff;
}

/* ===============================
   Dashboard Layout
================================ */


.dashboard-wrapper {
    display: flex;
    min-height: 100vh;
}

/* ===============================
   Sidebar
================================ */

.sidebar {

    width: 280px;

background: linear-gradient(180deg, var(--primary-dark) 0%, var(--primary-color) 45%, var(--primary-hover) 100%);

    color: #ffffff;

    padding: 24px;

    flex-shrink: 0;

    position: relative;

    border-right: 1px solid rgba(255,255,255,.06);

    box-shadow:
        8px 0 35px rgba(0,0,0,.18);

    overflow: hidden;
}

.sidebar::before {

    content: '';

    position: absolute;

    top: -120px;
    left: -120px;

    width: 250px;
    height: 250px;

    background:
        radial-gradient(
            var(--primary-soft),
            transparent 70%
        );

    pointer-events: none;
}

.sidebar-logo {
    margin-bottom: 35px;
}

.sidebar-logo {

    position: relative;

    padding-bottom: 22px;

    margin-bottom: 25px;
}

.sidebar-logo::after {

    content: '';

    position: absolute;

    bottom: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--primary-border),
            transparent
        );
}

.sidebar-logo strong {
    display: block;
    font-size: 22px;
    font-weight: 700;
}

.sidebar-logo span {
    font-size: 13px;
    color: #2cb65e;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-nav a {
    padding: 12px 14px;
    border-radius: 10px;
    color: #e5e7eb;
    transition: 0.2s;
}

.sidebar-nav a:hover {
    background: rgba(255,255,255,0.08);
}

/* ===============================
   Main Area
================================ */

.dashboard-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dashboard-content {
    padding: 4px 30px 30px;
}

/* ===============================
   Notification Badge
=============================== */

.nav-link-with-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 21px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: #fbbf24;
    color: #422006;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.notification-badge {
    width: 22px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ef4444;
    color: #ffffff;

    border-radius: 50%;

    font-size: 11px;
    font-weight: 700;

    flex-shrink: 0;
}

/* ===============================
   Mobile
================================ */



.sidebar-logo img {
    display: block;
    max-width: 150px;
    max-height: 54px;
    margin-bottom: 12px;
    object-fit: contain;
}

.sidebar-compact .sidebar {
    width: 210px;
    padding-left: 16px;
    padding-right: 16px;
}

.sidebar-compact .sidebar-logo strong {
    font-size: 18px;
}

.sidebar-overlay {

    display: none;

}


/* Global header shell */
/* Global Header */
.global-header{
    height:70px;
    background:var(--ds-surface);
    border-bottom:1px solid var(--ds-border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 25px;
    margin-bottom:15px;
}

/* ===============================
   Header Left
================================ */

.header-left{
    display:flex;
    align-items:center;
    gap:18px;
}

.header-divider{
    width:1px;
    height:28px;
    background:#e5e7eb;
}

.header-page-title{
    margin:0;
    font-size:20px;
    font-weight:700;
    color:var(--ds-text);
}

/* ===============================
   Header Right
================================ */

.header-right{
    display:flex;
    align-items:center;
    gap:15px;
}

/* Medium screens: retain a comfortable sidebar without crowding the workspace. */
@media (min-width: 992px) and (max-width: 1449px) {
    .sidebar {
        width: 250px;
    }
}

/* Global administration sidebar */
.global-admin-sidebar{padding:0;display:flex;flex-direction:column;overflow:hidden}.global-sidebar-brand{flex:0 0 auto;margin:0;padding:22px 20px 17px}.global-sidebar-brand strong{font-size:20px}.global-sidebar-scroll{flex:1;min-height:0;padding:12px;overflow-y:auto;overscroll-behavior:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.24) transparent}.global-sidebar-scroll::-webkit-scrollbar{width:7px}.global-sidebar-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.24);border-radius:999px}.global-sidebar-label{margin:16px 9px 7px;color:rgba(255,255,255,.62);font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.global-sidebar-label:first-child{margin-top:4px}.global-sidebar-dashboard,.global-sidebar-module>summary{display:flex;min-height:42px;align-items:center;justify-content:space-between;gap:10px;padding:0 11px;border-radius:10px;color:#f8fafc;text-decoration:none;cursor:pointer;transition:background .18s ease,color .18s ease}.global-sidebar-dashboard:hover,.global-sidebar-module>summary:hover{background:rgba(255,255,255,.1);color:#fff}.global-sidebar-dashboard{justify-content:flex-start;margin-bottom:3px;gap:11px;font-size:13px;font-weight:650}.global-sidebar-dashboard>i,.global-sidebar-module-main>i{width:20px;flex:0 0 20px;color:rgba(255,255,255,.78);font-size:15px;text-align:center}.global-sidebar-dashboard.active{background:rgba(255,255,255,.15);box-shadow:inset 3px 0 0 var(--primary-color);font-weight:700}.global-sidebar-module{margin:3px 0}.global-sidebar-module>summary{list-style:none}.global-sidebar-module>summary::-webkit-details-marker{display:none}.global-sidebar-module-main{display:flex;min-width:0;align-items:center;gap:11px}.global-sidebar-module-main>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:650}.global-sidebar-chevron{color:rgba(255,255,255,.65);font-size:12px;transition:transform .18s ease}.global-sidebar-module[open] .global-sidebar-chevron{transform:rotate(90deg)}.global-sidebar-module.is-current-module>summary{background:rgba(255,255,255,.1)}.global-sidebar-module.is-current-module>summary .global-sidebar-module-main>i{color:#a7f3d0}.global-sidebar-children{position:relative;display:grid;gap:2px;margin:3px 0 7px;padding-inline-start:40px;padding-inline-end:0}.global-sidebar-children::before{position:absolute;inset-block:15px;inset-inline-start:20px;width:1px;background:rgba(255,255,255,.28);content:""}.global-sidebar-children::after{position:absolute;inset-block-start:12px;inset-inline-start:17px;width:7px;height:7px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:#007c55;box-shadow:0 0 0 3px rgba(0,124,85,.22);content:""}.global-sidebar-children a{position:relative;display:block;overflow:hidden;padding:8px 10px;border-radius:8px;color:rgba(255,255,255,.78);font-size:12px;line-height:1.3;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.global-sidebar-children a:last-child{overflow:visible}.global-sidebar-children a:last-child::after{position:absolute;inset-block-start:50%;inset-inline-start:-23px;width:7px;height:7px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:#007c55;box-shadow:0 0 0 3px rgba(0,124,85,.22);content:"";transform:translateY(-50%)}.global-sidebar-children a:hover{background:rgba(255,255,255,.09);color:#fff}.global-sidebar-children a.active{color:#fff;background:rgba(16,185,129,.28);box-shadow:inset 2px 0 0 #a7f3d0;font-weight:700}.global-sidebar-admin-group{margin-top:2px}.sidebar-compact .global-sidebar-brand{padding-left:16px;padding-right:16px}.sidebar-compact .global-sidebar-scroll{padding-left:8px;padding-right:8px}@media(max-width:768px){.global-admin-sidebar .global-sidebar-scroll{padding-bottom:28px}.global-sidebar-brand{padding-top:20px}}
.global-sidebar-settings-link{margin-top:3px}
.global-sidebar-children:has(> .global-sidebar-standalone-child)::before{inset-block-start:61px}.global-sidebar-children:has(> .global-sidebar-standalone-child)::after{inset-block-start:58px}.global-sidebar-children .global-sidebar-standalone-child{display:flex;align-items:center;gap:9px;margin:0 0 8px -28px;padding:9px 10px;border:1px solid rgba(167,243,208,.22);background:rgba(16,185,129,.09);color:#d1fae5}.global-sidebar-children .global-sidebar-standalone-child>i{width:18px;flex:0 0 18px;color:#6ee7b7;text-align:center}.global-sidebar-children .global-sidebar-standalone-child::after{display:none}.global-sidebar-children .global-sidebar-standalone-child:hover{background:rgba(16,185,129,.18);border-color:rgba(167,243,208,.4)}.global-sidebar-children .global-sidebar-standalone-child.active{background:rgba(16,185,129,.28);border-color:rgba(167,243,208,.45)}html[dir="rtl"] .global-sidebar-children .global-sidebar-standalone-child{margin-right:-28px;margin-left:0}

/* Active sidebar page indicator. */
.global-sidebar-children a.active {
    position: relative;
    padding-inline-end: 24px;
}
.global-sidebar-children a.active::before {
    position: absolute;
    inset-inline-start: auto;
    inset-inline-end: 10px;
    inset-block-start: 50%;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: #a7f3d0;
    box-shadow: 0 0 0 3px rgba(167,243,208,.12);
    content: '';
    transform: translateY(-50%);
}
/* Sidebar group labels. */
.global-sidebar-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 18px 5px 8px;
    padding: 6px 8px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,0));
    color: rgba(255,255,255,.82);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;
}
.global-sidebar-label::after {
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, rgba(255,255,255,.24), transparent);
    content: '';
}
.global-sidebar-label:first-child { margin-top: 4px; }
/* Desktop sidebar collapse: compact icon rail with accessible native tooltips. */
.sidebar,
.sidebar-logo,
.sidebar-nav a,
.global-sidebar-dashboard,
.global-sidebar-module > summary,
.global-sidebar-children {
    transition: width .2s ease, padding .2s ease, margin .2s ease, background .18s ease;
}.sidebar-collapse-btn{position: absolute;inset-block-start: 10px;inset-inline-end: 8px;z-index: 2;width: 32px;place-items: center}
body.sidebar-is-collapsed .sidebar { width: 76px; padding-inline: 10px; }
body.sidebar-is-collapsed .sidebar-logo { min-height: 40px; margin-bottom: 18px; padding-bottom: 0; }
body.sidebar-is-collapsed .sidebar-logo::after,
body.sidebar-is-collapsed .sidebar-logo > img,
body.sidebar-is-collapsed .sidebar-logo > strong,
body.sidebar-is-collapsed .sidebar-logo > span,
body.sidebar-is-collapsed .sidebar-nav-label,
body.sidebar-is-collapsed .notification-badge,
body.sidebar-is-collapsed .nav-new-badge,
body.sidebar-is-collapsed .global-sidebar-brand > strong,
body.sidebar-is-collapsed .global-sidebar-brand > span,
body.sidebar-is-collapsed .global-sidebar-label,
body.sidebar-is-collapsed .global-sidebar-dashboard > span,
body.sidebar-is-collapsed .global-sidebar-module-main > span,
body.sidebar-is-collapsed .global-sidebar-chevron,
body.sidebar-is-collapsed .global-sidebar-children { display: none; }
body.sidebar-is-collapsed .sidebar-nav { gap: 9px; }
body.sidebar-is-collapsed .sidebar-nav a { justify-content: center; padding: 12px 8px; }
body.sidebar-is-collapsed .sidebar-nav a > span { display: inline-flex; justify-content: center; }
body.sidebar-is-collapsed .sidebar-nav a i { margin: 0; }
body.sidebar-is-collapsed .global-sidebar-brand { min-height: 56px; margin: 0; padding: 12px 10px; }
body.sidebar-is-collapsed .global-sidebar-scroll { padding-inline: 8px; }
body.sidebar-is-collapsed .global-sidebar-dashboard,
body.sidebar-is-collapsed .global-sidebar-module > summary { justify-content: center; padding-inline: 8px; }
body.sidebar-is-collapsed .global-sidebar-module { margin-block: 7px; }

@media (max-width: 768px) {
    body.sidebar-is-collapsed .sidebar { width: 100%; padding-inline: 24px; }
    body.sidebar-is-collapsed .sidebar-logo { min-height: 0; margin-bottom: 25px; padding-bottom: 22px; }
    body.sidebar-is-collapsed .sidebar-logo::after,
    body.sidebar-is-collapsed .sidebar-logo > img,
    body.sidebar-is-collapsed .sidebar-logo > strong,
    body.sidebar-is-collapsed .sidebar-logo > span,
    body.sidebar-is-collapsed .sidebar-nav-label,
    body.sidebar-is-collapsed .global-sidebar-brand > strong,
    body.sidebar-is-collapsed .global-sidebar-brand > span,
    body.sidebar-is-collapsed .global-sidebar-label { display: initial; }
    body.sidebar-is-collapsed .global-sidebar-children { display: grid; }
    body.sidebar-is-collapsed .sidebar-nav a,
    body.sidebar-is-collapsed .global-sidebar-dashboard,
    body.sidebar-is-collapsed .global-sidebar-module > summary { justify-content: flex-start; }
}

/* Keep sidebar icons comfortably separated from their labels. */
.sidebar-nav a > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sidebar-nav a > span:first-child > i { flex: 0 0 20px; }
/* Nested employee navigation keeps resource links inside the existing sidebar. */
.sidebar-nav-dropdown > summary {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 15px;
    border-radius: 9px;
    color: inherit;
    cursor: pointer;
    list-style: none;
}
.sidebar-nav-dropdown > summary::-webkit-details-marker { display: none; }
.sidebar-nav-dropdown > summary > span:first-child,
.sidebar-nav-dropdown-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sidebar-nav-dropdown-state {
    margin-inline-start: auto;
}
.sidebar-nav-dropdown > summary > span:first-child > i { flex: 0 0 20px; }
.sidebar-nav-dropdown > summary:hover,
.sidebar-nav-dropdown.is-active > summary { background: rgba(255,255,255,.12); }
.sidebar-nav-dropdown-chevron {
    font-size: 11px;
    transition: transform .18s ease;
}
.sidebar-nav-dropdown[open] .sidebar-nav-dropdown-chevron { transform: rotate(90deg); }
.sidebar-nav-dropdown-menu {
    display: grid;
    gap: 4px;
    padding-block: 5px 2px;
    padding-inline-start: 28px;
}
.sidebar-nav-dropdown-menu a { padding-block: 9px; }
.sidebar-nav-dropdown-menu a.active { background: rgba(255,255,255,.16); }

body.sidebar-is-collapsed .sidebar-nav-dropdown > summary {
    justify-content: center;
    padding-inline: 8px;
}
body.sidebar-is-collapsed .sidebar-nav-dropdown-state,
body.sidebar-is-collapsed .sidebar-nav-dropdown-menu { display: none; }

@media (max-width: 768px) {
    body.sidebar-is-collapsed .sidebar-nav-dropdown > summary { justify-content: space-between; }
    body.sidebar-is-collapsed .sidebar-nav-dropdown-state { display: inline-flex; }
    body.sidebar-is-collapsed .sidebar-nav-dropdown[open] .sidebar-nav-dropdown-menu { display: grid; }
}