/* ==== APP LAYOUT ==== */
    .app{
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      display:flex;
      gap: 4px;       
      padding: 0;
      overflow: hidden;
    }

    /* ==== SIDEBAR ==== */
    .sidebar{
      width: var(--sidebar-width); 
      flex: 0 0 var(--sidebar-width);
      background:var(--sidebar-bg);
      border-right:1px solid var(--border);
      border-radius: 0;
      box-shadow: none;
      
      padding: 18px;
      height: 100vh;
      height: 100dvh; 
      position: relative; 
      
      /* PENTING: Visible agar tombol chevron bisa 'keluar' dari sidebar */
      overflow: visible; 
      
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 50;
      display: flex;
      flex-direction: column;
    }

    /* Collapsed Logic */
    .sidebar.collapsed {
        width: var(--sidebar-width-mini);
        flex: 0 0 var(--sidebar-width-mini);
        padding: 18px 10px;
    }

    /* Hide text when collapsed */
    .sidebar.collapsed .brand span:not(.material-icons),
    .sidebar.collapsed .version-badge,
    .sidebar.collapsed .searchbox input,
    .sidebar.collapsed .nav-title,
    .sidebar.collapsed .nav-text {
        display: none;
        opacity: 0;
    }

    /* Centering items when collapsed */
    .sidebar.collapsed .brand { justify-content: center; margin-bottom: 24px; }
    .sidebar.collapsed .searchbox {
        justify-content: center; border-color: transparent; background: transparent;
        padding: 0; margin-bottom: 24px;
    }
    .sidebar.collapsed .searchbox .material-icons { font-size: 24px; color: var(--text-muted); }
    .sidebar.collapsed .nav a { justify-content: center; padding: 12px 0; }
    .sidebar.collapsed .nav a .material-icons { margin: 0; font-size: 24px; }
    .sidebar.collapsed .divider { margin: 12px 0; }

    /* ==== TOGGLE BUTTON (CHEVRON) ==== */
    .sidebar-toggle-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -14px;             /* Offset keluar agar terlihat jelas */
        width: 28px;
        height: 28px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        /* Shadow agar tombol kontras dengan background konten */
        box-shadow: 2px 1px 6px rgba(0,0,0,0.1); 
        z-index: 100;
        color: var(--text-muted);
        transition: background 0.2s, color 0.2s, transform 0.2s;
    }
    .sidebar-toggle-btn:hover { 
        background: var(--primary); 
        color: #fff; 
        transform: translateY(-50%) scale(1.1);
    }
    @media (max-width: 900px){ .sidebar-toggle-btn { display: none; } }

    /* ==== SIDEBAR CONTENT STYLE ==== */
    .brand{
      display:flex; align-items:center; gap:12px; margin-bottom:14px;
      font-weight:700; letter-spacing:.3px;
      white-space: nowrap; overflow: hidden; flex-shrink: 0;
    }
    .brand .material-icons{ color: var(--accent); flex-shrink: 0; }
    .version-badge{
      font: 600 11px/1 Poppins, sans-serif;
      color:#fff; background:var(--accent);
      padding:4px 8px; border-radius:999px; margin-left:auto;
    }
    .searchbox{
      display:flex; align-items:center; gap:8px;
      border:1px solid var(--border); border-radius:12px; background:#f9fafb;
      padding:8px 10px; margin:10px 0 16px; flex-shrink: 0;
    }
    .searchbox input{ width:100%; border:none; outline:none; background:transparent; font:500 13px Poppins; }
    
    .nav-group{ 
        margin-top:8px; 
        flex: 1; 
        /* Scroll handle di dalam grup nav, bukan seluruh sidebar */
        overflow-y: auto; 
        overflow-x: hidden; 
        scrollbar-width: none; 
    }
    .nav-group::-webkit-scrollbar { display: none; }

    .nav-title{
      font: 700 12px/1 Poppins, sans-serif; color: var(--text-muted);
      text-transform: uppercase; letter-spacing:.12em; margin: 14px 10px 8px;
      white-space: nowrap;
    }
    .nav{ display:flex; flex-direction:column; gap:6px; }
    .nav a{
      display:flex; align-items:center; gap:12px;
      padding:10px 12px; border-radius:12px; border:1px solid transparent;
      transition: all .18s ease;
      white-space: nowrap; overflow: hidden;
      color: var(--text-muted);
    }
    .nav a .material-icons{ font-size:20px; color:inherit; flex-shrink: 0; }
    .nav a:hover{ background: var(--nav-hover-bg); color: var(--text); }
    .nav a.active, .nav a[aria-current="page"]{
      background: var(--nav-active-bg); color: var(--nav-active-text);
    }

    .divider{ height:1px; background:var(--border); margin:16px 0; flex-shrink: 0; }

    /* ==== MAIN & CONTENT ==== */
    .main{
      flex:1; min-width:0; 
      display:flex; flex-direction:column; 
      gap:0; 
      height: 100vh;
      height: 100dvh;
      background: var(--bg);
    }

    /* Desktop: Sembunyikan Topbar agar konten naik penuh ke atas */
    .topbar{
      display: none; 
      flex-shrink: 0;
      align-items:center; gap:8px; 
      background: #fff;
    }

    .menu-toggle{
      display:none; border:none; background:transparent;
      padding:8px; border-radius:8px; cursor:pointer; color: var(--text-muted);
    }
    .menu-toggle:hover { background: rgba(0,0,0,0.05); }

    .content{
      flex: 1; 
      background:var(--card); 
      border: none; border-radius: 0; box-shadow: none; 
      padding:20px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain; 
    }

    /* ==== OVERLAY (Mobile) ==== */
    .overlay{
      position:fixed; inset:0; 
      background: transparent; 
      opacity:0; pointer-events:none; transition:.25s ease; z-index: 40;
    }
    .overlay.show{ opacity:1; pointer-events:auto; }

    /* ==== RESPONSIVE (Mobile/Tablet < 900px) ==== */
    @media (max-width: 900px){
      /* Kembalikan Topbar untuk Hamburger Menu */
      .topbar {
        display: flex;
        padding: 8px 16px;
        border-bottom: 1px solid var(--border);
        min-height: 50px;
      }

      .sidebar{
        position:fixed; top:0; left:0; bottom:0;
        border-right: none; border-radius:0; 
        box-shadow: 4px 0 12px rgba(0,0,0,0.1);
        width: 86vw; max-width: 320px;
        transform: translateX(-100%);
        z-index: 120;
        overflow: hidden; /* Mobile drawer tetap hidden overflow */
      }
      .sidebar.open{ transform: translateX(0); }
      .menu-toggle{ display:inline-flex; }
      .sidebar.collapsed { width: 86vw; flex: 0 0 auto; } 
    }

/* ==== Topbar page title ==== */
.topbar-page-title{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
  line-height:1.15;
}
.topbar-page-title .topbar-page-kicker{
  font:600 10px/1.1 Poppins, system-ui, sans-serif;
  color:var(--text-muted);
  letter-spacing:.04em;
}
.topbar-page-title strong{
  display:block;
  max-width:calc(100vw - 96px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
  font:700 15px/1.2 Poppins, system-ui, sans-serif;
}

/* Tampilkan topbar di semua halaman agar judul halaman selalu terlihat */
.topbar{
  display:flex;
  padding:8px 20px;
  border-bottom:1px solid var(--border);
  min-height:50px;
}
@media (max-width: 900px){
  .topbar{ padding:8px 16px; }
}