/* kulambogan LGU Portal — Rebrand V1 — May 2026 — Agent: SIDEBAR-NAV */
/* =====================================================================
   Reusable sidebar component stylesheet.
   Extracted from lalamdrrmo/pages/home.php — token & rule parity kept.
   Scope: .sidebar / .sb-* / .sb-backdrop and the .shell flex container.
   ===================================================================== */

:root{
    /* kulambogan brand tokens (mirror of home.php :root) */
    --mgs-navy-900:#0A1733; --mgs-navy-800:#0B1F4D; --mgs-navy-700:#122A66;
    --mgs-navy-600:#1E4A9E; --mgs-blue-500:#3E73D6;
    --mgs-gold-500:#D9A441; --mgs-gold-400:#E6B85C; --mgs-gold-600:#C98F2A;
    --mgs-text-on-dark:#E8EEF7; --mgs-text-muted:#9FB0CC;
    --mgs-border-on-dark:rgba(255,255,255,.08); --mgs-glass:rgba(255,255,255,.05);
    --mgs-radius-sm:8px; --mgs-radius-md:12px; --mgs-radius-lg:16px; --mgs-radius-pill:999px;
    --mgs-font-head:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
    --mgs-grad-rail:linear-gradient(180deg,#0B1F4D 0%,#0A1733 100%);
    --mgs-grad-gold:linear-gradient(135deg,#E6B85C 0%,#C98F2A 100%);
    --mgs-grad-active:linear-gradient(135deg,#1E4A9E 0%,#3E73D6 100%);
    --sb-w:240px; --tb-h:52px; --m-ui:180ms; --m-med:240ms;
    --ease:cubic-bezier(.2,.8,.2,1);
}

/* ===== SHELL (flex container the host page wraps sidebar + main in) ===== */
.shell{display:flex;min-height:calc(100vh - var(--tb-h))}

/* ===== SIDEBAR ===== */
.sidebar{
    width:var(--sb-w);flex-shrink:0;background:var(--mgs-grad-rail);
    border-right:1px solid var(--mgs-border-on-dark);display:flex;flex-direction:column;
    position:sticky;top:var(--tb-h);height:calc(100vh - var(--tb-h));
    transition:transform var(--m-med) var(--ease)
}
.sb-brand{
    display:flex;align-items:center;gap:.65rem;padding:1rem .9rem;
    border-bottom:1px solid var(--mgs-border-on-dark)
}
.sb-seal{
    width:40px;height:40px;border-radius:50%;background:#fff;padding:2px;flex-shrink:0;
    box-shadow:0 2px 8px rgba(0,0,0,.35)
}
.sb-brand-tx b{display:block;font-family:var(--mgs-font-head);font-size:.92rem;color:#fff;line-height:1.15}
.sb-brand-tx span{display:block;font-size:.68rem;color:var(--mgs-text-muted);letter-spacing:.04em}

.sb-nav{flex:1;overflow-y:auto;padding:.75rem .6rem;display:flex;flex-direction:column;gap:.15rem}
.sb-link{
    display:flex;align-items:center;gap:.8rem;padding:.7rem .75rem;
    border-radius:var(--mgs-radius-sm);color:var(--mgs-text-muted);
    font-size:.86rem;font-weight:500;position:relative;
    min-height:44px;transition:background var(--m-ui),color var(--m-ui)
}
.sb-link i{width:20px;text-align:center;font-size:.95rem;flex-shrink:0}
.sb-link:hover{background:rgba(255,255,255,.04);color:var(--mgs-text-on-dark)}
.sb-link.active{
    background:var(--mgs-grad-active);color:#fff;font-weight:700;
    box-shadow:0 4px 14px rgba(30,74,158,.45)
}
.sb-link.active::before{
    content:"";position:absolute;left:-.6rem;top:50%;transform:translateY(-50%);
    width:3px;height:60%;background:var(--mgs-gold-400);border-radius:0 3px 3px 0
}
.sb-link .badge{
    margin-left:auto;background:var(--mgs-grad-gold);color:#1a1205;font-size:.66rem;
    font-weight:800;min-width:20px;height:20px;display:flex;align-items:center;
    justify-content:center;padding:0 .35rem;border-radius:var(--mgs-radius-pill)
}
.sb-link .label{white-space:nowrap;overflow:hidden}

.sb-user{
    display:flex;align-items:center;gap:.65rem;padding:.85rem .9rem;
    border-top:1px solid var(--mgs-border-on-dark)
}
.sb-avatar{
    width:38px;height:38px;border-radius:50%;background:var(--mgs-grad-active);
    display:flex;align-items:center;justify-content:center;color:#fff;
    font-weight:700;font-size:.9rem;flex-shrink:0;position:relative
}
.sb-avatar::after{
    content:"";position:absolute;right:0;bottom:0;width:9px;height:9px;border-radius:50%;
    background:#34d399;border:2px solid var(--mgs-navy-800)
}
.sb-user-tx{flex:1;min-width:0}
.sb-user-tx b{
    display:block;font-size:.82rem;color:#fff;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis
}
.sb-user-tx span{display:block;font-size:.7rem;color:var(--mgs-blue-500)}
.sb-user button{
    background:none;border:none;color:var(--mgs-text-muted);cursor:pointer;
    font-size:.85rem;padding:.3rem;min-width:44px;min-height:44px;
    display:flex;align-items:center;justify-content:center
}

/* Backdrop for the mobile slide-in drawer */
.sb-backdrop{
    display:none;position:fixed;inset:0;background:rgba(4,8,20,.6);z-index:79;
    backdrop-filter:blur(2px);opacity:0;transition:opacity var(--m-med)
}
.sb-backdrop.show{display:block;opacity:1}

/* Focus ring (kept consistent with home.php global rule) */
.sidebar :focus-visible,
.sb-backdrop:focus-visible{
    outline:2px solid var(--mgs-gold-400);outline-offset:2px;border-radius:4px
}

/* ===== RESPONSIVE: ≤1024px icon rail ===== */
@media (max-width:1024px){
    :root{--sb-w:72px}
    .sb-brand-tx,
    .sb-link .label,
    .sb-link .badge,
    .sb-user-tx,
    .sb-user button{display:none}
    .sb-brand{justify-content:center;padding:1rem .4rem}
    .sb-link{justify-content:center;padding:.7rem}
    .sb-user{justify-content:center;padding:.85rem .4rem}
}

/* ===== RESPONSIVE: ≤768px slide-in drawer ===== */
@media (max-width:768px){
    :root{--sb-w:248px}
    .sidebar{
        position:fixed;top:0;left:0;height:100vh;z-index:80;
        transform:translateX(-100%)
    }
    .sidebar.open{transform:translateX(0);box-shadow:0 0 60px rgba(0,0,0,.6)}
    /* Restore full labels inside the open drawer */
    .sb-brand-tx,
    .sb-link .label,
    .sb-link .badge,
    .sb-user-tx,
    .sb-user button{display:block}
    .sb-user button{display:flex}
    .sb-brand{justify-content:flex-start;padding:1rem .9rem}
    .sb-link{justify-content:flex-start;padding:.7rem .75rem}
    .sb-user{justify-content:flex-start;padding:.85rem .9rem}
}

/* ===== Reduced-motion guard ===== */
@media (prefers-reduced-motion:reduce){
    .sidebar,
    .sb-link,
    .sb-backdrop,
    .sidebar *,
    .sidebar *::before,
    .sidebar *::after{
        animation:none!important;transition:none!important
    }
}