/* Modern application sidebar: neutral light/dark shell with a compact icon rail. */
:root {
    --sidebar-modern-shell: linear-gradient(180deg, var(--primary-dark) 0%, var(--primary-color) 45%, var(--primary-hover) 100%);
    --sidebar-modern-bg: rgba(255, 255, 255, .08);
    --sidebar-modern-surface: rgba(255, 255, 255, .15);
    --sidebar-modern-hover: rgba(255, 255, 255, .11);
    --sidebar-modern-border: rgba(255, 255, 255, .18);
    --sidebar-modern-text: #ffffff;
    --sidebar-modern-muted: rgba(255, 255, 255, .74);
    --sidebar-modern-line: rgba(255, 255, 255, .3);
    --sidebar-modern-shadow: 8px 0 35px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] {
    --sidebar-modern-shell: var(--ds-surface);
    --sidebar-modern-bg: #0c0d0f;
    --sidebar-modern-surface: #202124;
    --sidebar-modern-hover: #1b1c1f;
    --sidebar-modern-border: #2c2e32;
    --sidebar-modern-text: #f4f4f5;
    --sidebar-modern-muted: #a1a1aa;
    --sidebar-modern-line: #34363a;
    --sidebar-modern-shadow: 0 20px 48px rgba(0, 0, 0, .28);
}

.dashboard-wrapper { background: var(--ds-surface-page, #f7f8fa); }

.sidebar,
html[data-theme="dark"] .sidebar,
.sidebar.global-admin-sidebar,
html[data-theme="dark"] .sidebar.global-admin-sidebar {
    width: 280px;
    margin: 0;
    color: var(--sidebar-modern-text);
    background: var(--sidebar-modern-shell);
    border: 0;
    border-inline-end: 1px solid rgba(255,255,255,.06);
    border-radius: 0;
    box-shadow: var(--sidebar-modern-shadow);
}

.sidebar::before,
html[data-theme="dark"] .sidebar::before { display: none; }

.sidebar-logo,
.global-sidebar-brand {
    min-height: auto;
    margin: 0;
    padding: 22px 20px 17px;
}

.sidebar-logo::after,
html[data-theme="dark"] .sidebar-logo::after {
    background: linear-gradient(90deg, transparent, var(--primary-border), transparent);
}

.sidebar-logo strong,
.global-sidebar-brand strong,
html[data-theme="dark"] .global-sidebar-brand strong { color: var(--sidebar-modern-text); }

.sidebar-logo span,
.global-sidebar-brand span,
html[data-theme="dark"] .sidebar-logo span,
html[data-theme="dark"] .global-sidebar-brand span { color: var(--sidebar-modern-muted); }

.sidebar-logo img { max-width: 132px; max-height: 42px; margin-bottom: 7px; }

.sidebar-collapse-btn {
    inset-block-start: 10px;
    inset-inline-end: 8px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(255,255,255,.09);
}

.sidebar-quick-search {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin: 0 0 13px;
    padding: 0 10px;
    color: var(--sidebar-modern-muted);
    background: var(--sidebar-modern-bg);
    border: 1px solid var(--sidebar-modern-border);
    border-radius: 10px;
    width: 100%;
    text-align: start;
    cursor: pointer;
    font: inherit;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.sidebar-quick-search:hover,
.sidebar-quick-search:focus-visible {
    border-color: color-mix(in srgb, var(--primary-color) 55%, var(--sidebar-modern-border));
    background: var(--sidebar-modern-hover);
}

.sidebar-quick-search:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 13%, transparent);
}

.sidebar-quick-search > span {
    min-width: 0;
    color: var(--sidebar-modern-text);
    font-size: 12px;
}

.sidebar-quick-search kbd { padding: 2px 6px; border: 1px solid var(--sidebar-modern-border); border-radius: 6px; color: var(--sidebar-modern-muted); background: var(--sidebar-modern-surface); font: 10px/1.4 inherit; }

.sidebar-nav,
.global-sidebar-scroll {
    color: var(--sidebar-modern-text);
    scrollbar-color: var(--sidebar-modern-border) transparent;
}

.global-sidebar-scroll {
    margin-inline-end: 0;
    padding: 12px;
    overflow-x: hidden;
}

.global-admin-sidebar .sidebar-quick-search {
    display: none;
}
.sidebar-nav {
    gap: 4px;
    max-height: calc(100vh - 154px);
    overflow-x: hidden;
    overflow-y: auto;
}

.sidebar-nav a,
.sidebar-nav-dropdown > summary,
.global-sidebar-dashboard,
.global-sidebar-module > summary,
html[data-theme="dark"] .sidebar-nav a,
html[data-theme="dark"] .global-sidebar-dashboard,
html[data-theme="dark"] .global-sidebar-module > summary {
    min-height: 42px;
    padding: 0 12px;
    color: var(--sidebar-modern-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: none;
}

.sidebar-nav a:hover,
.sidebar-nav-dropdown > summary:hover,
.global-sidebar-dashboard:hover,
.global-sidebar-module > summary:hover,
html[data-theme="dark"] .sidebar-nav a:hover,
html[data-theme="dark"] .global-sidebar-dashboard:hover,
html[data-theme="dark"] .global-sidebar-module > summary:hover {
    color: var(--sidebar-modern-text);
    background: var(--sidebar-modern-hover);
}

/* Employee navigation follows the same interaction language as the Resources
   folder tree: a soft surface, green accent, and slight directional motion. */
body.employee-shell .sidebar-nav a:hover,
body.employee-shell .sidebar-nav a:focus-visible {
    color: var(--primary-color);
    background: var(--ds-surface-hover);
    transform: translateX(2px);
}

html[dir="rtl"] body.employee-shell .sidebar-nav a:hover,
html[dir="rtl"] body.employee-shell .sidebar-nav a:focus-visible {
    transform: translateX(-2px);
}

.sidebar-nav a.active,
.sidebar-nav-dropdown.is-active > summary,
.global-sidebar-dashboard.active,
.global-sidebar-module.is-current-module > summary,
html[data-theme="dark"] .sidebar-nav a.active,
html[data-theme="dark"] .global-sidebar-dashboard.active,
html[data-theme="dark"] .global-sidebar-module.is-current-module > summary {
    color: var(--sidebar-modern-text);
    background: var(--sidebar-modern-surface);
    border-color: var(--sidebar-modern-border);
    box-shadow: none;
    font-weight: 700;
}

.sidebar-nav a i,
.global-sidebar-dashboard > i,
.global-sidebar-module-main > i,
html[data-theme="dark"] .global-sidebar-dashboard > i,
html[data-theme="dark"] .global-sidebar-module-main > i {
    color: currentColor;
}

.global-sidebar-label {
    margin: 16px 9px 7px;
    padding: 0;
    color: var(--sidebar-modern-muted);
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 9px;
    letter-spacing: .13em;
}

.global-sidebar-label::after { background: var(--sidebar-modern-line); }
.global-sidebar-chevron { color: var(--sidebar-modern-muted); }

.global-sidebar-children,
.sidebar-nav-dropdown-menu { position: relative; gap: 2px; padding-inline-start: 35px; }
.global-sidebar-children::before,
.sidebar-nav-dropdown-menu::before {
    position: absolute;
    inset-block-start: 0;
    inset-block-end: 19px;
    inset-inline-start: 18px;
    width: 1px;
    background: var(--sidebar-modern-line);
    content: "";
}
.global-sidebar-children::after { display: none; }

.global-sidebar-children a,
html[data-theme="dark"] .global-sidebar-children a,
.sidebar-nav-dropdown-menu a {
    position: relative;
    padding: 8px 10px;
    color: var(--sidebar-modern-muted);
    background: transparent;
    border-radius: 8px;
}

.global-sidebar-children a::after,
.sidebar-nav-dropdown-menu a::after {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: -17px;
    display: block;
    width: 17px;
    height: 9px;
    border-block-end: 1px solid var(--sidebar-modern-line);
    border-inline-start: 1px solid var(--sidebar-modern-line);
    border-end-start-radius: 7px;
    content: "";
    transform: translateY(-8px);
}

.global-sidebar-children a:last-child::after { display: block; }

.global-sidebar-children a:first-child::after,
.sidebar-nav-dropdown-menu a:first-child::after { height: 13px; transform: translateY(-12px); }

.global-sidebar-children a:hover,
.global-sidebar-children a.active,
.sidebar-nav-dropdown-menu a:hover,
.sidebar-nav-dropdown-menu a.active,
html[data-theme="dark"] .global-sidebar-children a:hover,
html[data-theme="dark"] .global-sidebar-children a.active {
    color: var(--sidebar-modern-text);
    background: var(--sidebar-modern-surface);
    box-shadow: none;
}

.global-sidebar-children a.active::before { background: var(--primary-color); box-shadow: none; }
.global-sidebar-children .global-sidebar-standalone-child { margin-inline-start: -25px; color: var(--sidebar-modern-muted); background: transparent; border-color: transparent; }
.global-sidebar-children .global-sidebar-standalone-child > i { color: currentColor; }
.global-sidebar-children .global-sidebar-standalone-child:hover,
.global-sidebar-children .global-sidebar-standalone-child.active { color: var(--sidebar-modern-text); background: var(--sidebar-modern-surface); border-color: var(--sidebar-modern-border); }

/* Keep the global sidebar's dropdown connector consistent with the main navigation. */
.global-sidebar-children {
    gap: 2px;
    margin: 3px 0 7px;
    padding-inline-start: 40px;
}

.global-sidebar-children::before {
    inset-block: 15px;
    inset-inline-start: 20px;
    background: rgba(255,255,255,.28);
}

.global-sidebar-children::after {
    display: block;
    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);
}

.global-sidebar-children a,
html[data-theme="dark"] .global-sidebar-children a {
    padding: 8px 10px;
    color: rgba(255,255,255,.78);
    background: transparent;
    border-radius: 8px;
}

.global-sidebar-children a::after {
    display: none;
}

.global-sidebar-children a:last-child::after {
    display: block;
    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);
    transform: translateY(-50%);
}

.global-sidebar-children a:hover,
.global-sidebar-children a.active,
html[data-theme="dark"] .global-sidebar-children a:hover,
html[data-theme="dark"] .global-sidebar-children a.active {
    color: #fff;
    background: rgba(255,255,255,.09);
    box-shadow: none;
}

.global-sidebar-children a.active,
html[data-theme="dark"] body.employee-shell .sidebar-nav a.active,
html[data-theme="dark"] body.employee-shell .sidebar-nav-dropdown-menu a.active {
    color: #fff;
    background: rgba(16,185,129,.28);
    box-shadow: inset 2px 0 0 #a7f3d0;
}

body.sidebar-is-collapsed .sidebar,
body.sidebar-is-collapsed .sidebar.global-admin-sidebar { width: 76px; padding-inline: 10px; }
body.sidebar-is-collapsed .sidebar-logo,
body.sidebar-is-collapsed .global-sidebar-brand { min-height: 52px; margin-bottom: 10px; padding: 6px; }
body.sidebar-is-collapsed .sidebar-quick-search { grid-template-columns: 1fr; justify-items: center; padding: 0; }
body.sidebar-is-collapsed .sidebar-quick-search > span,
body.sidebar-is-collapsed .sidebar-quick-search kbd { display: none; }
body.sidebar-is-collapsed .global-sidebar-scroll { margin-inline-end: 0; padding-inline: 0; }
body.sidebar-is-collapsed .global-sidebar-dashboard,
body.sidebar-is-collapsed .global-sidebar-module > summary,
body.sidebar-is-collapsed .sidebar-nav a,
body.sidebar-is-collapsed .sidebar-nav-dropdown > summary { padding-inline: 8px; }

.sidebar [hidden] { display: none !important; }

@media (max-width: 991px) {
    .sidebar,
    html[data-theme="dark"] .sidebar,
    .sidebar.global-admin-sidebar,
    html[data-theme="dark"] .sidebar.global-admin-sidebar,
    body.sidebar-is-collapsed .sidebar,
    body.sidebar-is-collapsed .sidebar.global-admin-sidebar {
        position: fixed;
        top: 0;
        inset-inline-start: -290px;
        inset-inline-end: auto;
        width: min(290px, calc(100vw - 44px));
        height: 100dvh;
        margin: 0;
        padding: 18px;
        border-block: 0;
        border-inline-start: 0;
        border-radius: 0 20px 20px 0;
    }
    html[dir="rtl"] .sidebar,
    html[dir="rtl"] .sidebar.global-admin-sidebar { border-radius: 20px 0 0 20px; }
    body.sidebar-is-collapsed .sidebar-quick-search { grid-template-columns: 18px minmax(0, 1fr) auto; justify-items: stretch; padding: 0 10px; }
    body.sidebar-is-collapsed .sidebar-quick-search > span,
    body.sidebar-is-collapsed .sidebar-quick-search kbd { display: initial; }
    .sidebar-collapse-btn { display: none; }
}

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