:root{
  --bbn-primary:#0c7166;
  --bbn-accent:#ef6614;
  --bbn-radius:14px;
}

/* ===== Halaman login ===== */
body.login-page{
  min-height:100vh;
  margin:0;
  background:#0b1220;
  color:#e8eef7;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
#bg-particles{position:fixed;inset:0;z-index:0;}
.login-wrap{position:relative;z-index:1;width:100%;max-width:420px;padding:20px;}
.login-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--bbn-radius);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  padding:32px 28px;
}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:22px;}
.login-brand img{height:64px;width:auto;max-width:170px;object-fit:contain;}
.login-brand h1{font-size:19px;font-weight:700;margin:0;text-align:center;letter-spacing:.3px;}
.login-brand small{color:#9fb0c7;text-align:center;}
.login-card .form-label{font-size:13px;color:#c7d4e6;margin-bottom:6px;}
.login-card .form-control{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:#e8eef7;
}
.login-card .form-control:focus{
  background:rgba(255,255,255,.12);
  border-color:var(--bbn-accent);
  box-shadow:0 0 0 .2rem rgba(239,102,20,.2);
  color:#fff;
}
.login-card .form-control::placeholder{color:#7c8da3;}
.btn-login{
  background:var(--bbn-accent);
  border:none;color:#fff;font-weight:600;
  padding:10px;border-radius:10px;width:100%;
}
.btn-login:hover{background:#d95a10;color:#fff;}
.toggle-pass{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-left:none;color:#c7d4e6;
}
.toggle-pass:hover{color:#fff;background:rgba(255,255,255,.14);}
.login-footer{text-align:center;margin-top:18px;font-size:12px;color:#7c8da3;}

/* ===================== LAYOUT ADMIN ===================== */
:root{
  --sb-w:264px;
  --sb-w-collapsed:72px;
  --topbar-h:58px;
}

[data-bs-theme="light"]{
  --sb-bg:#0f1b2d;
  --sb-fg:#c8d4e4;
  --sb-fg-active:#fff;
  --sb-hover:rgba(255,255,255,.07);
  --sb-active:rgba(239,102,20,.16);
  --top-bg:#ffffff;
  --top-border:#e3e8ef;
  --page-bg:#f4f6fa;
}
[data-bs-theme="dark"]{
  --sb-bg:#0a1220;
  --sb-fg:#9fb0c7;
  --sb-fg-active:#fff;
  --sb-hover:rgba(255,255,255,.06);
  --sb-active:rgba(239,102,20,.20);
  --top-bg:#111a29;
  --top-border:#1e2a3d;
  --page-bg:#0d1522;
}

body.app-page{margin:0;background:var(--page-bg);min-height:100vh;}

.app{display:flex;min-height:100vh;}

/* ---- Sidebar ---- */
.sidebar{
  width:var(--sb-w);
  flex:0 0 var(--sb-w);
  background:var(--sb-bg);
  color:var(--sb-fg);
  display:flex;flex-direction:column;
  position:fixed;top:0;bottom:0;left:0;z-index:1040;
  transition:width .18s ease, transform .18s ease;
  overflow:hidden;
}
.sidebar .title{
  height:var(--topbar-h);
  display:flex;align-items:center;gap:10px;
  padding:0 18px;color:#fff;font-weight:600;font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.07);
  white-space:nowrap;
}
.sidebar .title i{color:var(--bbn-accent);}
.sidebar .nav-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 0 24px;}
.sidebar .nav-scroll::-webkit-scrollbar{width:6px;}
.sidebar .nav-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px;}

.sidebar ul{list-style:none;margin:0;padding:0;}
.sidebar a, .sidebar .menu-parent{
  display:flex;align-items:center;gap:11px;
  padding:9px 18px;
  color:var(--sb-fg);text-decoration:none;
  font-size:13.5px;line-height:1.3;
  background:none;border:none;width:100%;text-align:left;
  cursor:pointer;white-space:nowrap;
}
.sidebar a i, .sidebar .menu-parent i{width:18px;text-align:center;flex-shrink:0;font-size:14px;}
.sidebar a:hover, .sidebar .menu-parent:hover{background:var(--sb-hover);color:var(--sb-fg-active);}
.sidebar a.active{
  background:var(--sb-active);color:#fff;font-weight:600;
  box-shadow:inset 3px 0 0 var(--bbn-accent);
}
.sidebar .menu-parent .chevron{
  margin-left:auto;font-size:11px;transition:transform .18s ease;
}
.sidebar .nav-group > .submenu{
  max-height:0;overflow:hidden;transition:max-height .22s ease;
}
.sidebar .nav-group.open > .submenu{max-height:1500px;}
.sidebar .nav-group.open > .menu-parent .chevron{
  transform:rotate(90deg);color:var(--bbn-accent);
}
.sidebar .submenu a{padding-left:44px;font-size:13px;}
.sidebar .submenu .submenu a{padding-left:64px;}
.sidebar .submenu .menu-parent{padding-left:44px;font-size:13px;}

/* ---- Sidebar collapsed ---- */
.app.sidebar-collapsed .sidebar{width:var(--sb-w-collapsed);flex-basis:var(--sb-w-collapsed);}
.app.sidebar-collapsed .sidebar span,
.app.sidebar-collapsed .sidebar .chevron{display:none;}
.app.sidebar-collapsed .sidebar a,
.app.sidebar-collapsed .sidebar .menu-parent{justify-content:center;padding-left:0;padding-right:0;}
.app.sidebar-collapsed .sidebar .nav-group > .submenu{display:none !important;}
.app.sidebar-collapsed .main{margin-left:var(--sb-w-collapsed);}

/* ---- Main ---- */
.main{
  flex:1;margin-left:var(--sb-w);min-width:0;
  transition:margin-left .18s ease;
  display:flex;flex-direction:column;
}
.topbar{
  height:var(--topbar-h);
  background:var(--top-bg);
  border-bottom:1px solid var(--top-border);
  display:flex;align-items:center;gap:12px;
  padding:0 18px;position:sticky;top:0;z-index:1030;
}
.topbar .btn-burger{
  background:none;border:none;font-size:17px;color:inherit;padding:6px 9px;border-radius:8px;
}
.topbar .btn-burger:hover{background:rgba(128,128,128,.14);}
.topbar .comp{display:flex;align-items:center;gap:10px;min-width:0;}
.topbar .comp img{height:32px;width:auto;max-width:120px;object-fit:contain;}
.topbar .comp .nm{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar .spacer{flex:1;}
.avatar{
  width:34px;height:34px;border-radius:50%;
  background:var(--bbn-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;
}
.user-meta{font-size:12px;opacity:.75;}

.content{padding:20px;flex:1;}

.page-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:16px;
}
.page-head h1{font-size:20px;font-weight:700;margin:0;}
.page-head .sub{font-size:13px;opacity:.7;margin-top:2px;}

.card{border-radius:var(--bbn-radius);}

/* ---- Responsive ---- */
@media (max-width:991.98px){
  .sidebar{transform:translateX(-100%);}
  .app.sidebar-show .sidebar{transform:translateX(0);}
  .main{margin-left:0 !important;}
  .app.sidebar-collapsed .sidebar{width:var(--sb-w);flex-basis:var(--sb-w);}
  .app.sidebar-collapsed .sidebar span,
  .app.sidebar-collapsed .sidebar .chevron{display:inline;}
  .sidebar-backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1035;display:none;
  }
  .app.sidebar-show .sidebar-backdrop{display:block;}
}