/* Ayukki v20 — Sidebar grouping & Settings. UI-only update. */
:root{--nav-maroon:#810D0D;--nav-text:#6d5b56;--nav-line:#f0e3df}
.app>aside{
  width:268px;min-width:268px;height:100vh;
  display:flex;flex-direction:column;align-items:stretch;
  padding:20px 13px 18px;
  overflow:hidden;isolation:isolate;
  background:linear-gradient(165deg,#fff 4%,#fffdfa 100%);
  border-right:1px solid var(--nav-line);
}
.app>aside .brand{
  padding:4px 8px 22px;gap:11px;flex:0 0 auto;
  border-bottom:1px solid #f5ece8;
  margin-bottom:12px;
}
.app>aside .brand-logo{width:60px;height:60px;border-radius:17px;flex:0 0 60px}
.app>aside .brand-word{font-size:14px;font-weight:700;line-height:1.4;letter-spacing:-.035em}
.app>aside .subtitle{font-size:8.7px;font-weight:600;line-height:1.5;letter-spacing:.12em;margin-top:5px}
.app>aside .menus{
  display:flex;flex:1;flex-direction:column;gap:17px;
  min-height:0;overflow-y:auto;overflow-x:hidden;
  padding:6px 4px 12px 0;
  scrollbar-width:thin;scrollbar-color:#e5cfc9 transparent;
}
.app>aside .nav-group{display:block;min-width:0;flex-shrink:0}
.app>aside .nav-group-title{
  padding:0 13px 8px;
  text-transform:uppercase;
  font-size:10px;font-weight:700;letter-spacing:.13em;
  color:#a18b82;line-height:1.5;
}
.app>aside .nav-group-items{display:grid;gap:3px}
.app>aside .nav{
  display:flex;align-items:center;gap:11px;min-height:40px;
  padding:10px 12px;margin:0;border-radius:12px;
  color:var(--nav-text);background:transparent;
  border:1px solid transparent;
  font-size:11.8px;line-height:1.4;font-weight:500;
  text-align:left;transition:background .17s ease,border-color .17s ease,color .17s ease;
  cursor:pointer;white-space:normal;
}
.app>aside .nav .ico{width:20px;height:20px;flex:0 0 20px;display:grid;place-items:center}
.app>aside .nav-svg{width:18px;height:18px;display:block}
.app>aside .nav-label{min-width:0;flex:1}
.app>aside .nav:hover{color:var(--nav-maroon);background:#fff2ee}
.app>aside .nav.active{
  color:var(--nav-maroon);font-weight:700;
  background:linear-gradient(100deg,#f8e6df 0%,#fff5f1 100%);
  border-color:#f1d2c9;box-shadow:inset 3px 0 0 #9c1b1b;
}
.app>aside .nav:focus-visible{outline:2px solid #b44747;outline-offset:2px}
.app>aside .nav-group-settings{border-top:1px solid #f0e3df;padding-top:11px;margin-top:1px}
.app>aside .sidefoot{
  position:static;flex:0 0 auto;
  padding:13px 10px 0;margin-top:6px;
  border-top:1px solid #f5ece8;
  font-size:9px;font-weight:500;line-height:1.55;
  color:#ac9791;letter-spacing:.045em;
}
/* Judul Dashboard hanya tampil ketika halaman Dashboard aktif.
   Heading tiap section tetap berdiri sendiri di halaman lainnya. */
main:has(#dashboard.hide)>.topbar>div:first-child>.section-h1,
main:has(#dashboard.hide)>.topbar>div:first-child>.lead{display:none}
main:has(#dashboard.hide)>.topbar{margin-bottom:14px}
/* Settings page (keeps existing database / backend unchanged). */
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.settings-card{padding:23px;min-width:0;background:linear-gradient(165deg,#fff,#fffaf8)}
.settings-card-wide{grid-column:1/-1}
.settings-card .settings-visual{font-size:20px;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#fff0e9,#fff);border:1px solid #f1ded6;margin-bottom:14px}
.settings-card h2{margin-bottom:10px}
.settings-card p{font-size:12px;line-height:1.8;margin:0 0 17px}
.settings-card code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;background:#f7ece9;border-radius:5px;padding:2px 5px;font-size:11px}
.settings-info-item{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px;padding:11px 0;border-top:1px solid #f2e7e2}
.settings-info-item span{color:#8f7771}.settings-info-item strong{font-weight:600;text-align:right}
.settings-card .settings-help{font-size:11px;color:#a07754;margin:11px 0 0}
.settings-note{font-size:12px;border:1px solid #efd9c5;border-radius:13px;background:#fff8ef;padding:13px 14px;color:#885a39;line-height:1.7}
@media(max-width:1000px){.app>aside{width:240px;min-width:240px}}
@media(max-width:860px){
  .app>aside{
    width:100%;min-width:0;height:auto;position:relative;
    padding:12px 12px 10px;overflow:visible;
    border-right:0;border-bottom:1px solid var(--nav-line);
  }
  .app>aside .brand{padding:4px 3px 11px;margin:0 0 8px;border-bottom:0}
  .app>aside .brand-logo{width:48px;height:48px;flex-basis:48px;border-radius:14px}
  .app>aside .brand-word{font-size:13px}
  .app>aside .subtitle{font-size:8px;margin-top:2px}
  .app>aside .menus{
    display:flex;flex-direction:row;gap:12px;align-items:stretch;
    overflow-x:auto;overflow-y:hidden;flex:0 0 auto;
    padding:5px 0 11px;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
    overscroll-behavior-x:contain;
  }
  .app>aside .nav-group{flex:0 0 auto;min-width:165px;scroll-snap-align:start}
  .app>aside .nav-group:nth-child(2){width:330px}
  .app>aside .nav-group:nth-child(3){width:198px}
  .app>aside .nav-group:nth-child(4){width:185px}
  .app>aside .nav-group-title{padding:0 5px 7px;font-size:9px}
  .app>aside .nav-group-items{display:grid;grid-template-columns:1fr;gap:3px}
  .app>aside .nav-group:nth-child(2) .nav-group-items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app>aside .nav{font-size:10.7px;padding:10px 9px;min-height:41px;gap:6px}
  .app>aside .nav .ico{width:18px;flex-basis:18px}
  .app>aside .nav-svg{width:16px;height:16px}
  .app>aside .nav-group-settings{padding-top:20px;margin:0;border:0}
  .app>aside .sidefoot{display:none}
  .settings-grid{grid-template-columns:1fr}
  .settings-card-wide{grid-column:auto}
}
@media(max-width:480px){
  .settings-card{padding:18px}
  .settings-info-item{align-items:flex-start;flex-direction:column;gap:4px}
  .settings-info-item strong{text-align:left}
}
@media(prefers-reduced-motion:reduce){.app>aside .nav{transition:none}}