/**
 * app-shell.css — sidebar navigasi yang dipakai bersama update-db-pages & tks-buffer.
 * File ini disalin identik ke kedua project (2 project Cloudflare Pages terpisah,
 * tidak ada cara berbagi 1 file fisik lintas-project tanpa build step).
 * Ubah di satu tempat? Jangan lupa salin ke project satunya juga.
 */
:root {
    --shell-w: 208px;
    --shell-w-collapsed: 56px;
    --shell-bg: #1d479c;
    --shell-bg-strong: #163680;
    --shell-accent: #06b3e8;
}

#navSidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--shell-w); z-index: 200;
    background: var(--shell-bg); color: #fff;
    display: flex; flex-direction: column;
    transition: width .2s ease; overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body.shell-collapsed #navSidebar { width: var(--shell-w-collapsed); }

body.shell-active { padding-left: var(--shell-w); transition: padding-left .2s ease; }
body.shell-active.shell-collapsed { padding-left: var(--shell-w-collapsed); }

.shell-head {
    height: 52px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px;
    background: var(--shell-bg-strong); border-bottom: 1px solid rgba(255,255,255,.08);
}
.shell-head button {
    width: 28px; height: 28px; border-radius: 7px; border: 0; background: transparent;
    color: rgba(255,255,255,.6); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.shell-head button:hover { background: rgba(255,255,255,.1); color: #fff; }
.shell-head button svg { width: 17px; height: 17px; }
.shell-head span { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
body.shell-collapsed .shell-head span { display: none; }

.shell-nav { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden; }
.shell-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 9px; border-radius: 8px;
    font-size: 13px; font-weight: 600; color: rgba(255,255,255,.72); cursor: pointer;
    border: 0; background: transparent; width: 100%; text-align: left; font-family: inherit;
    white-space: nowrap; text-decoration: none;
}
.shell-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.shell-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.shell-item.active { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 3px 0 0 var(--shell-accent); }
body.shell-collapsed .shell-item span.shell-lbl { display: none; }

@media (max-width: 760px) {
    body.shell-active { padding-left: var(--shell-w-collapsed); }
    #navSidebar, body.shell-collapsed #navSidebar { width: var(--shell-w-collapsed); }
    .shell-head span, .shell-item span.shell-lbl { display: none; }
}