/* ════════════════════════════════════════════════════════════════
   sidebar.css — Sidebar layout + navigation component styles
   Project: Ebtkr Internal System
════════════════════════════════════════════════════════════════ */

/* ── Layout: sidebar presence shifts main content ──────────────── */
.auth-layout .container {
    width: auto;
    margin: 0;
    padding: 1rem 1.1rem 1.6rem;
    margin-right: var(--sidebar-width);
}

.auth-layout.sidebar-collapsed .container {
    margin-right: 0;
}

.auth-layout.sidebar-collapsed .app-sidebar {
    transform: translateX(100%);
}

/* ── Overlay (mobile) ──────────────────────────────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(3, 16, 31, .48);
    z-index: 49;
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: none;
}

/* ── Sidebar shell ─────────────────────────────────────────────── */
.app-sidebar {
    position: fixed;
    z-index: 50;
    top: 0;
    right: 0;
    width: var(--sidebar-width);
    height: 100vh;
    border-left: 1px solid #d6e6f5;
    background: linear-gradient(180deg, #f6fbff, #eef4fb);
    box-shadow: -10px 0 28px rgba(7, 39, 74, .12);
    transform: translateX(0);
    transition: transform var(--transition);
    overflow: hidden;
}

.app-sidebar-inner {
    height: 100%;
    overflow-y: auto;
    padding: 1rem .75rem 1.1rem;
}

/* ── Sidebar head ──────────────────────────────────────────────── */
.sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
    padding: .2rem .35rem .65rem;
    border-bottom: 1px solid #dce8f4;
}

.sidebar-title {
    margin: 0;
    font-size: 1rem;
    color: #173251;
}

.sidebar-subtitle {
    margin: 0;
    color: #65809d;
    font-size: .78rem;
}

.sidebar-close {
    display: none;
    border: 0;
    background: transparent;
    color: #335b80;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 9px;
}

/* ════════════════════════════════════════════════════════════════
   Sidebar Navigation Components (sb-*)
════════════════════════════════════════════════════════════════ */

/* ── Icons ── */
.sb-ic {
    flex-shrink: 0;
    opacity: .78;
    stroke-width: 2.15;
    transition: opacity 150ms, transform 150ms;
    vertical-align: middle;
}

.sb-link:hover .sb-ic,
.sb-toggle:hover .sb-ic,
.sb-sub:hover .sb-ic {
    transform: translateX(-1px);
}

/* ── Inner separator ── */
.sb-sep {
    height: 1px;
    margin: .55rem .4rem .45rem;
    background: linear-gradient(to left, transparent, #c8daf0 40%, #c8daf0 60%, transparent);
}

/* ── Direct link (no dropdown) ── */
.sb-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .6rem .75rem;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 700;
    color: #1b4268;
    text-decoration: none;
    transition: background 150ms, color 150ms, transform 150ms;
}

.sb-link:hover {
    background: #e6f2ff;
    color: #0c3f6b;
    transform: translateX(-2px);
}

.sb-link:hover .sb-ic,
.sb-link.is-active .sb-ic { opacity: 1; }

.sb-link.is-active {
    background: linear-gradient(135deg, #0f4c81, #0a3a66);
    color: #fff;
    box-shadow: 0 6px 18px rgba(15, 76, 129, .28);
}

.sb-link.is-active .sb-ic { stroke: #fff; opacity: 1; }

/* ── Group (dropdown section) ── */
.sb-group {
    border-radius: 12px;
    margin-bottom: .25rem;
    overflow: hidden;
}

/* Toggle / summary */
.sb-toggle {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .6rem .75rem;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 700;
    color: #1b4268;
    cursor: pointer;
    list-style: none;
    transition: background 150ms, color 150ms;
    position: relative;
}

.sb-toggle::-webkit-details-marker { display: none; }
.sb-toggle:hover { background: #e6f2ff; color: #0c3f6b; }
.sb-toggle:hover .sb-ic { opacity: 1; }
.sb-toggle-label { flex: 1; }

/* Chevron arrow */
.sb-chevron {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    transition: transform 240ms ease;
    opacity: .55;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Open state */
.sb-group details[open] > .sb-toggle {
    background: rgba(15, 76, 129, .09);
    color: #0a3a66;
    border-radius: 10px 10px 0 0;
}

.sb-group details[open] > .sb-toggle .sb-ic   { opacity: 1; }
.sb-group details[open] > .sb-toggle .sb-chevron { transform: rotate(180deg); opacity: .8; }

/* Shaded background when open */
.sb-group details[open] {
    background: rgba(15, 76, 129, .045);
    border-radius: 12px;
    padding-bottom: .4rem;
}

/* ── Sub-items panel ── */
.sb-panel {
    margin: 0 .5rem 0 .35rem;
    padding: .2rem 0 .1rem .3rem;
    border-right: 3px solid #0f4c81;   /* visible vertical line */
    border-radius: 0 0 0 4px;
}

/* Sub-item link */
.sb-sub {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .48rem .65rem;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 600;
    color: #284d71;
    text-decoration: none;
    transition: background 140ms, color 140ms, transform 140ms;
    margin-bottom: .08rem;
}

.sb-sub:last-child { margin-bottom: 0; }

.sb-sub:hover {
    background: #deeeff;
    color: #0c3f6b;
    transform: translateX(-2px);
}

.sb-sub:hover .sb-ic { opacity: 1; }

.sb-sub.is-active {
    background: #d0e7ff;
    color: #0c3a6b;
    font-weight: 800;
}

.sb-sub.is-active .sb-ic { opacity: 1; }

/* ── Section divider ── */
.sb-divider {
    height: 1px;
    margin: .55rem .4rem;
    background: #d4e4f2;
    border: none;
}

/* ════════════════════════════════════════════════════════════════
   Dark Mode — Sidebar
════════════════════════════════════════════════════════════════ */
body.theme-dark .app-sidebar {
    background: linear-gradient(180deg, #121f31, #0f1a2a);
    border-left-color: #30435d;
    box-shadow: -10px 0 26px rgba(0, 0, 0, .35);
}

body.theme-dark .sidebar-head    { border-bottom-color: #2f435d; }
body.theme-dark .sidebar-title   { color: #cfe2fb; }
body.theme-dark .sidebar-subtitle { color: #a6bed8; }

body.theme-dark .sb-sep { background: linear-gradient(to left, transparent, #2c4260 40%, #2c4260 60%, transparent); }
body.theme-dark .sb-divider { background: #253550; }

body.theme-dark .sb-link            { color: #c8e0f8; }
body.theme-dark .sb-link:hover      { background: rgba(110, 160, 220, .15); color: #e4f0ff; }
body.theme-dark .sb-link.is-active  { background: linear-gradient(135deg, #1f5499, #143a6d); color: #fff; }

body.theme-dark .sb-toggle              { color: #c8e0f8; }
body.theme-dark .sb-toggle:hover        { background: rgba(110, 160, 220, .15); color: #e4f0ff; }

body.theme-dark .sb-group details[open] { background: rgba(50, 110, 200, .12); }
body.theme-dark .sb-group details[open] > .sb-toggle {
    background: rgba(50, 110, 200, .2);
    color: #d8edff;
}

body.theme-dark .sb-panel { border-right-color: #2e6bbf; }

body.theme-dark .sb-sub            { color: #9dc5e8; }
body.theme-dark .sb-sub:hover      { background: rgba(80, 140, 210, .2); color: #d5ecff; }
body.theme-dark .sb-sub.is-active  { background: rgba(80, 140, 210, .28); color: #e0f2ff; }

/* ════════════════════════════════════════════════════════════════
   Responsive — Mobile sidebar behaviour
════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .auth-layout .container {
        margin-right: 0;
    }

    .sidebar-overlay { display: block; }

    .app-sidebar { transform: translateX(100%); }

    .sidebar-close {
        display: inline-grid;
        place-items: center;
    }

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

    body.sidebar-open .sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }
}