/* ══════════════════════════════════════════════════════════════════════
   SISTEM TATA TERTIB SEKOLAH — style.css v3 (mobile-friendly)
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. VARIABLES ──────────────────────────────────────────────────── */
:root {
  --sw:         256px;
  --sw-mini:     64px;
  --th:          56px;
  --c-primary:  #1e3a5f;
  --c-hover:    #2554a0;
  --c-accent:   #f0b429;
  --c-bg:       #f1f5f9;
  --c-white:    #ffffff;
  --c-border:   #e2e8f0;
  --c-text:     #1e293b;
  --c-muted:    #64748b;
  --c-success:  #16a34a;
  --c-danger:   #dc2626;
  --c-warning:  #d97706;
  --c-info:     #2563eb;
  --sb-bg:      #1e3a5f;
  --sb-text:    rgba(255,255,255,.78);
  --sb-hover:   rgba(255,255,255,.08);
  --sb-active:  rgba(255,255,255,.14);
  --sb-line:    rgba(255,255,255,.10);
  --rad:        8px;
  --rad-lg:     12px;
  --ease:       .2s ease;
  --shadow-sm:  0 1px 4px rgba(0,0,0,.07);
  --shadow:     0 4px 20px rgba(0,0,0,.10);
}

/* ── 2. RESET ──────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
body {
  margin:0; padding:0;
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:14px; color:var(--c-text);
  background:var(--c-bg); line-height:1.6;
  padding-bottom:72px;
}
ul { list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5,h6 { margin:0; }
a { text-decoration:none; color:var(--c-hover); }
a:hover { color:var(--c-primary); }

/* ══════════════════════════════════════════════════════════════════════
   3. SIDEBAR
   ══════════════════════════════════════════════════════════════════════ */
.sidebar {
  position:fixed; top:0; left:0;
  width:var(--sw); height:100vh;
  background:var(--sb-bg);
  display:flex; flex-direction:column;
  z-index:1040; overflow:hidden;
  transition:width var(--ease), transform var(--ease);
}

.sb-brand {
  display:flex; align-items:center; gap:11px;
  height:var(--th); padding:0 16px;
  border-bottom:1px solid var(--sb-line);
  flex-shrink:0; overflow:hidden;
}
.sb-logo {
  width:36px; height:36px; min-width:36px;
  background:var(--c-accent); border-radius:9px;
  display:flex; align-items:center; justify-content:center;
}
.sb-logo i { font-size:18px; color:var(--c-primary); line-height:1; }
.sb-appname {
  overflow:hidden;
  display:flex; flex-direction:column; gap:1px;
}
.sb-appname strong {
  display:block; font-size:14px; font-weight:700; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sb-appname small {
  display:block; font-size:10.5px; color:rgba(255,255,255,.48);
  white-space:nowrap;
}

.sb-usercard {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  border-bottom:1px solid var(--sb-line);
  flex-shrink:0; overflow:hidden;
}
.sb-ava {
  width:34px; height:34px; min-width:34px;
  border-radius:50%; overflow:hidden;
  background:var(--c-accent); color:var(--c-primary);
  font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.sb-ava img { width:100%; height:100%; object-fit:cover; }
.sb-uinfo { overflow:hidden; min-width:0; }
.sb-uname {
  font-size:13px; font-weight:600; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sb-urole {
  display:inline-block; margin-top:2px;
  font-size:10px; font-weight:600; padding:2px 8px; border-radius:20px;
}
.role-admin      { background:rgba(220,38,38,.28);  color:#fca5a5; }
.role-tatib      { background:rgba(234,88,12,.28);  color:#fdba74; }
.role-petugas    { background:rgba(202,138,4,.28);  color:#fde68a; }
.role-piket_kbm  { background:rgba(22,163,74,.28);  color:#86efac; }
.role-wali_kelas { background:rgba(37,99,235,.28);  color:#93c5fd; }
.role-siswa      { background:rgba(109,40,217,.28); color:#c4b5fd; }

.sb-scroll {
  flex:1; overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.15) transparent;
  padding:8px 0 12px;
  -webkit-overflow-scrolling:touch;
}
.sb-scroll::-webkit-scrollbar { width:4px; }
.sb-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18); border-radius:4px; }

.sb-section {
  padding:14px 18px 4px;
  font-size:10px; font-weight:700;
  letter-spacing:.9px; text-transform:uppercase;
  color:rgba(255,255,255,.32);
  white-space:nowrap; overflow:hidden;
  user-select:none;
  display:block;
}

.sb-item { display:block; }
.sb-item > a {
  display:flex; align-items:center; gap:10px;
  padding:9px 18px;
  color:var(--sb-text); font-size:13.5px;
  border-left:3px solid transparent;
  overflow:hidden; white-space:nowrap;
  transition:background var(--ease), color var(--ease);
  min-height:44px;
}
.sb-item > a:hover { background:var(--sb-hover); color:#fff; }
.sb-item.active > a {
  background:var(--sb-active); color:#fff;
  border-left-color:var(--c-accent); font-weight:600;
}

.sb-ico {
  width:18px; min-width:18px;
  font-size:16px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.sb-lbl { flex:1; overflow:hidden; text-overflow:ellipsis; }
.sb-cnt {
  font-size:10px; font-weight:700;
  min-width:18px; height:18px; padding:0 5px;
  background:var(--c-danger); color:#fff; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

.sb-footer {
  flex-shrink:0; padding:10px 12px;
  border-top:1px solid var(--sb-line);
}
.sb-logout {
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--rad);
  color:rgba(255,255,255,.6); font-size:13px;
  white-space:nowrap; overflow:hidden;
  transition:background var(--ease), color var(--ease);
  min-height:44px;
}
.sb-logout:hover { background:rgba(220,38,38,.2); color:#fca5a5; }
.sb-logout i { font-size:17px; min-width:18px; }

/* ══════════════════════════════════════════════════════════════════════
   SIDEBAR GROUP / SUBMENU
   ══════════════════════════════════════════════════════════════════════ */
.sb-group { display:block; }

.sb-group-toggle {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sb-text);
  cursor: pointer;
  user-select: none;
  border: none;
  background: none;
  box-sizing: border-box;
  border-left: 3px solid transparent;
  min-height: 44px;
  transition: background .18s, color .18s;
  white-space: nowrap;
  overflow: hidden;
}
.sb-group-toggle:hover {
  background: var(--sb-hover);
  color: #fff;
}
.sb-group-toggle.active {
  background: var(--sb-active);
  color: #fff;
  border-left-color: var(--c-accent);
  font-weight: 600;
}

.sb-chev {
  font-size: 11px;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform .25s ease;
  color: rgba(255,255,255,.4);
}
.sb-group.open .sb-chev {
  transform: rotate(-180deg);
}

.sb-submenu {
  display: none;
  flex-direction: column !important;
  width: 100%;
}
.sb-group.open .sb-submenu {
  display: flex;
  flex-direction: column !important;
}

.sb-submenu a {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 48px;
  font-size: 13px;
  color: rgba(255,255,255,.65) !important;
  text-decoration: none;
  min-height: 36px;
  position: relative;
  transition: background .18s, color .18s;
  width: 100%;
  box-sizing: border-box;
}
.sb-submenu a::before {
  content: '';
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transition: background .18s;
}
.sb-submenu a:hover {
  background: rgba(255,255,255,.08);
  color: #fff !important;
}
.sb-submenu a:hover::before { background: rgba(255,255,255,.6); }
.sb-submenu a.active {
  background: rgba(255,255,255,.13);
  color: #fff !important;
  font-weight: 500;
}
.sb-submenu a.active::before {
  background: #60a5fa;
  width: 5px; height: 5px;
}

.sb-sub-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  font-size: 13px;
  opacity: .7;
  flex-shrink: 0;
}
.sb-submenu a:hover .sb-sub-ico,
.sb-submenu a.active .sb-sub-ico { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════
   4. COLLAPSED SIDEBAR (desktop)
   ══════════════════════════════════════════════════════════════════════ */
body.sb-mini .sidebar   { width:var(--sw-mini); }
body.sb-mini .main-wrap { margin-left:var(--sw-mini); }
body.sb-mini .sb-brand  { justify-content:center; padding:0; }
body.sb-mini .sb-appname { display:none; }
body.sb-mini .sb-usercard { justify-content:center; padding:12px 0; }
body.sb-mini .sb-uinfo    { display:none; }
body.sb-mini .sb-section  { display:none; }
body.sb-mini .sb-item > a {
  justify-content:center; padding:10px 0;
  border-left-color:transparent;
}
body.sb-mini .sb-item.active > a { border-left-color:transparent; }
body.sb-mini .sb-lbl,
body.sb-mini .sb-cnt { display:none; }
body.sb-mini .sb-item > a[title]:hover::after {
  content:attr(title);
  position:absolute;
  left:calc(var(--sw-mini) + 8px); top:50%; transform:translateY(-50%);
  background:#1e293b; color:#fff;
  font-size:12px; font-weight:500;
  padding:5px 10px; border-radius:6px;
  white-space:nowrap; z-index:2000;
  pointer-events:none;
}
body.sb-mini .sb-item > a { position:relative; }
body.sb-mini .sb-footer  { padding:10px 0; display:flex; justify-content:center; }
body.sb-mini .sb-logout  { justify-content:center; padding:9px 0; width:100%; }
body.sb-mini .sb-logout span { display:none; }
body.sb-mini .sb-submenu { display:none !important; }
body.sb-mini .sb-group-toggle { justify-content:center; padding:10px 0; border-left-color:transparent; }
body.sb-mini .sb-chev { display:none; }

/* ══════════════════════════════════════════════════════════════════════
   5. MAIN WRAPPER
   ══════════════════════════════════════════════════════════════════════ */
.main-wrap {
  margin-left:var(--sw);
  display:flex; flex-direction:column; min-height:100vh;
  transition:margin-left var(--ease);
}

/* ─ Topbar ────────────────────────────────────────────────────────── */
.topbar {
  position:sticky; top:0; z-index:1030;
  height:var(--th);
  background:var(--c-white);
  border-bottom:1px solid var(--c-border);
  display:flex; align-items:center; gap:8px;
  padding:0 16px 0 14px;
  box-shadow:var(--shadow-sm);
  flex-shrink:0;
}
.tb-toggle {
  background:none; border:none; cursor:pointer;
  width:40px; height:40px; border-radius:var(--rad);
  display:flex; align-items:center; justify-content:center;
  color:var(--c-muted); font-size:22px;
  transition:background var(--ease), color var(--ease);
  flex-shrink:0;
}
.tb-toggle:hover { background:var(--c-bg); color:var(--c-primary); }
.tb-title {
  flex:1; font-size:15px; font-weight:600; color:var(--c-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tb-right { display:flex; align-items:center; gap:4px; }
.tb-btn {
  background:none; border:none; cursor:pointer;
  width:40px; height:40px; border-radius:var(--rad);
  display:flex; align-items:center; justify-content:center;
  color:var(--c-muted); font-size:18px; position:relative;
  transition:background var(--ease), color var(--ease);
}
.tb-btn:hover { background:var(--c-bg); color:var(--c-primary); }
.notif-dot {
  position:absolute; top:7px; right:7px;
  width:7px; height:7px;
  background:var(--c-danger); border-radius:50%;
  border:2px solid var(--c-white);
}
.tb-userBtn {
  background:none; border:none; cursor:pointer;
  display:flex; align-items:center; gap:6px;
  padding:5px 8px; border-radius:var(--rad);
  transition:background var(--ease);
  min-height:40px;
}
.tb-userBtn:hover { background:var(--c-bg); }
.tb-ava {
  width:32px; height:32px; border-radius:50%;
  background:var(--c-primary); color:#fff;
  font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0;
}
.tb-ava img { width:100%; height:100%; object-fit:cover; }
.tb-uname { font-size:13.5px; font-weight:500; color:var(--c-text); }

/* ─ Flash ─────────────────────────────────────────────────────────── */
.flash-wrap { padding:12px 16px 0; }
.flash {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 16px; border-radius:var(--rad); margin-bottom:8px;
  font-size:13.5px; animation:fIn .25s ease;
}
@keyframes fIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.flash-ok  { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.flash-err { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
.flash i   { margin-top:1px; flex-shrink:0; }
.flash span { flex:1; }
.flash-x {
  background:none; border:none; cursor:pointer;
  font-size:16px; line-height:1; color:inherit; opacity:.6; padding:0;
}
.flash-x:hover { opacity:1; }

/* ─ Page content ──────────────────────────────────────────────────── */
.page-body { padding:20px 24px; flex:1; }
.page-hdr  {
  display:flex; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; gap:10px; margin-bottom:20px;
}
.page-hdr-title { font-size:20px; font-weight:700; color:var(--c-text); }
.page-hdr-sub   { font-size:13px; color:var(--c-muted); margin-top:2px; }

.page-footer {
  padding:14px 24px; border-top:1px solid var(--c-border);
  font-size:12px; color:var(--c-muted); text-align:center;
}

/* ══════════════════════════════════════════════════════════════════════
   6. OVERLAY & MOBILE
   ══════════════════════════════════════════════════════════════════════ */
.sb-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.45); z-index:1039;
  cursor:pointer;
}

@media (max-width:768px) {
  .sidebar {
    transform:translateX(-100%);
    width:var(--sw) !important;
    box-shadow:none;
  }
  .sidebar.open {
    transform:translateX(0);
    box-shadow:var(--shadow);
  }
  .sb-overlay.show { display:block; }
  .main-wrap { margin-left:0 !important; }
  .page-body { padding:12px 14px; }
  .flash-wrap { padding:10px 14px 0; }
  .tb-uname { display:none; }
  .page-hdr { flex-direction:column; align-items:stretch; }
  .page-hdr > div:last-child { display:flex; flex-wrap:wrap; gap:6px; }
  .page-hdr .btn { flex:1; min-width:120px; justify-content:center; }
  .tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tbl { min-width:520px; }
  .stat-grid { grid-template-columns:repeat(2, 1fr) !important; gap:10px !important; }
  .stat-card { padding:14px; }
  .stat-val  { font-size:22px; }
  .card-body { padding:14px; }
  .card-header { padding:12px 14px; font-size:13px; }
  .form-row { flex-direction:column; }
  .form-row > * { width:100% !important; }
  .filter-bar .card-body { padding:12px; }
  .filter-bar .d-flex { flex-wrap:wrap; gap:8px !important; }
  .filter-bar .form-control,
  .filter-bar .form-select { width:100% !important; }
  .btn-sm { padding:7px 12px; font-size:12.5px; min-height:36px; }
  .tatib-floating-footer { padding:5px 5px 5px 10px; font-size:10px; bottom:10px; }
  .tf-divider, .tf-dev { display:none; }
  .tf-wa { padding:6px 10px; font-size:10px; }
  #notifPanel { width:calc(100vw - 24px) !important; right:12px !important; left:12px !important; }
}

@media (max-width:480px) {
  .stat-grid { grid-template-columns:repeat(2, 1fr) !important; }
  .stat-ico  { width:40px; height:40px; font-size:18px; }
  .tbl .hide-xs { display:none; }
  .kartu-grid { grid-template-columns:1fr !important; }
  .page-hdr-title { font-size:17px; }
  .dropdown-item { padding:10px 16px; font-size:13px; }
}

@media (min-width:769px) and (max-width:900px) {
  .sidebar { width:var(--sw-mini); }
  .main-wrap { margin-left:var(--sw-mini); }
  .sb-appname, .sb-uinfo, .sb-section { display:none; }
  .sb-brand, .sb-usercard { justify-content:center; padding:0; }
  .sb-item > a { justify-content:center; padding:10px 0; border-left-color:transparent; }
  .sb-lbl, .sb-cnt { display:none; }
  .sb-footer { padding:10px 0; display:flex; justify-content:center; }
  .sb-logout { justify-content:center; padding:9px 0; width:100%; }
  .sb-logout span { display:none; }
  .sb-submenu { display:none !important; }
  .sb-group-toggle { justify-content:center; padding:10px 0; }
  .sb-chev { display:none; }
  .page-body { padding:16px 20px; }
}

@media (min-width:769px) {
  body.sb-mini .sb-section { display:none; }
  body.sb-mini .sb-lbl     { display:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   7. CARDS
   ══════════════════════════════════════════════════════════════════════ */
.card {
  background:var(--c-white); border:1px solid var(--c-border);
  border-radius:var(--rad-lg); box-shadow:var(--shadow-sm);
}
.card-header {
  padding:15px 20px; border-bottom:1px solid var(--c-border);
  font-weight:600; font-size:14px; background:transparent;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px;
}
.card-body   { padding:20px; }
.card-footer { padding:13px 20px; border-top:1px solid var(--c-border); background:transparent; }

.stat-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:16px;
}
.stat-card {
  background:var(--c-white); border:1px solid var(--c-border);
  border-radius:var(--rad-lg); padding:20px;
  display:flex; align-items:center; gap:16px;
  transition:box-shadow var(--ease), transform var(--ease);
}
.stat-card:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.stat-ico {
  width:50px; height:50px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; flex-shrink:0;
}
.si-blue  { background:#eff6ff; color:var(--c-info); }
.si-green { background:#f0fdf4; color:var(--c-success); }
.si-red   { background:#fef2f2; color:var(--c-danger); }
.si-amber { background:#fffbeb; color:var(--c-warning); }
.stat-val { font-size:26px; font-weight:700; line-height:1; }
.stat-lbl { font-size:12px; color:var(--c-muted); margin-top:3px; }

/* ══════════════════════════════════════════════════════════════════════
   8. TABLE
   ══════════════════════════════════════════════════════════════════════ */
.tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl { width:100%; border-collapse:collapse; font-size:13.5px; }
.tbl th {
  padding:11px 14px; background:#f8fafc;
  font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.4px;
  color:var(--c-muted); border-bottom:2px solid var(--c-border); white-space:nowrap;
}
.tbl td { padding:12px 14px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.tbl tbody tr:last-child td { border-bottom:none; }
.tbl tbody tr:hover td { background:#f8fafc; }

.pill {
  display:inline-flex; align-items:center;
  padding:3px 10px; border-radius:20px;
  font-size:11.5px; font-weight:600; white-space:nowrap;
}
.pill-ringan  { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }
.pill-sedang  { background:#fff7ed; color:#c2410c; border:1px solid #fed7aa; }
.pill-berat   { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
.pill-aktif   { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.pill-lain    { background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; }

.poin-wrap { background:#f1f5f9; border-radius:20px; height:5px; width:72px; overflow:hidden; display:inline-block; vertical-align:middle; }
.poin-bar  { height:100%; border-radius:20px; transition:width .4s; }
.pb-ok  { background:var(--c-success); }
.pb-wrn { background:var(--c-warning); }
.pb-err { background:var(--c-danger); }

/* ══════════════════════════════════════════════════════════════════════
   9. FORMS & BUTTONS
   ══════════════════════════════════════════════════════════════════════ */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:13px; font-weight:600; color:var(--c-text); margin-bottom:6px; }
.req { color:var(--c-danger); margin-left:2px; }
.form-control, .form-select {
  display:block; width:100%;
  padding:10px 12px;
  color:var(--c-text);
  background:var(--c-white); border:1.5px solid var(--c-border);
  border-radius:var(--rad); outline:none;
  transition:border-color var(--ease), box-shadow var(--ease);
  font-size:16px;
}
.form-control:focus, .form-select:focus {
  border-color:var(--c-hover); box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.form-control::placeholder { color:var(--c-muted); }
textarea.form-control { resize:vertical; min-height:88px; font-size:14px; }
.tbl .form-control,
.tbl .form-select,
.card .form-label { font-size:13.5px; }

.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 18px; border-radius:var(--rad);
  font-size:13.5px; font-weight:500;
  border:none; cursor:pointer; text-decoration:none;
  transition:background var(--ease), transform var(--ease); white-space:nowrap;
  min-height:44px;
}
.btn:active { transform:scale(.98); }
.btn-primary   { background:var(--c-primary);   color:#fff; }
.btn-primary:hover { background:var(--c-hover); color:#fff; }
.btn-success   { background:var(--c-success); color:#fff; }
.btn-success:hover { background:#15803d; color:#fff; }
.btn-danger    { background:var(--c-danger);  color:#fff; }
.btn-danger:hover { background:#b91c1c; color:#fff; }
.btn-warning   { background:var(--c-warning); color:#fff; }
.btn-warning:hover { background:#b45309; color:#fff; }
.btn-secondary { background:#f1f5f9; color:var(--c-text); border:1px solid var(--c-border); }
.btn-secondary:hover { background:#e2e8f0; }
.btn-sm   { padding:6px 12px; font-size:12.5px; min-height:36px; }
.btn-icon { padding:6px; width:36px; height:36px; justify-content:center; min-height:unset; }

.search-wrap { position:relative; display:inline-flex; align-items:center; width:100%; }
.search-wrap > i { position:absolute; left:10px; font-size:15px; color:var(--c-muted); pointer-events:none; }
.search-wrap input { padding-left:34px; }

.pagi { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.pagi-btn {
  min-width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--c-border); border-radius:7px;
  font-size:13px; font-weight:500;
  background:var(--c-white); color:var(--c-text); text-decoration:none;
  transition:background var(--ease);
}
.pagi-btn:hover  { background:var(--c-bg); }
.pagi-btn.on     { background:var(--c-primary); color:#fff; border-color:var(--c-primary); }
.pagi-btn.off    { opacity:.4; pointer-events:none; }

/* ══════════════════════════════════════════════════════════════════════
   10. UTILS
   ══════════════════════════════════════════════════════════════════════ */
.av-img  { width:32px; height:32px; border-radius:50%; object-fit:cover; border:2px solid var(--c-border); flex-shrink:0; }
.av-init {
  width:32px; height:32px; border-radius:50%;
  background:var(--c-primary); color:#fff;
  font-size:12px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
.empty { text-align:center; padding:48px 20px; color:var(--c-muted); }
.empty i { font-size:44px; display:block; margin-bottom:12px; }
.fw-5 { font-weight:500; } .fw-6 { font-weight:600; } .fw-7 { font-weight:700; }
.tc-ok  { color:var(--c-success); } .tc-err { color:var(--c-danger); } .tc-wrn { color:var(--c-warning); }
.hide-xs { }

/* ══════════════════════════════════════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════════════════════════════════════ */
body.dark {
  --c-bg:     #0f172a;
  --c-white:  #1e293b;
  --c-border: #334155;
  --c-text:   #e2e8f0;
  --c-muted:  #94a3b8;
  --sb-bg:    #0f172a;
  --sb-line:  rgba(255,255,255,.07);
}
body.dark .topbar        { background:#1e293b; border-color:#334155; }
body.dark .card          { background:#1e293b; border-color:#334155; }
body.dark .tbl th        { background:#1e293b; color:#94a3b8; }
body.dark .tbl td        { border-color:#1e293b; }
body.dark .tbl tbody tr:hover td { background:#1e293b; }
body.dark .form-control,
body.dark .form-select   { background:#0f172a; border-color:#334155; color:#e2e8f0; }
body.dark .dropdown-menu { background:#1e293b; border-color:#334155; }
body.dark .dropdown-item { color:#e2e8f0; }
body.dark .dropdown-item:hover { background:#334155; }
body.dark .dropdown-divider { border-color:#334155; }
body.dark .btn-secondary { background:#334155; color:#e2e8f0; border-color:#475569; }
body.dark .btn-secondary:hover { background:#475569; }
body.dark .pagi-btn      { background:#1e293b; border-color:#334155; color:#e2e8f0; }
body.dark .stat-card     { background:#1e293b; border-color:#334155; }
body.dark .si-blue  { background:#1e3a5f; color:#93c5fd; }
body.dark .si-green { background:#14532d; color:#86efac; }
body.dark .si-red   { background:#7f1d1d; color:#fca5a5; }
body.dark .si-amber { background:#78350f; color:#fde68a; }
body.dark .page-footer   { border-color:#334155; }
body.dark .flash-ok  { background:#14532d; border-color:#166534; color:#86efac; }
body.dark .flash-err { background:#7f1d1d; border-color:#991b1b; color:#fca5a5; }
body.dark .tb-toggle:hover,
body.dark .tb-btn:hover,
body.dark .tb-userBtn:hover { background:#334155; }
body.dark .tatib-floating-footer { box-shadow:0 4px 24px rgba(0,0,0,.5); }
body.dark #notifPanel    { background:#1e293b !important; border-color:#334155 !important; }
body.dark .notif-item    { border-color:#334155 !important; }
body.dark .text-muted    { color:#94a3b8 !important; }
body.dark .text-dark     { color:#e2e8f0 !important; }
body.dark .fw-semibold, body.dark .fw-bold, body.dark .fw-600 { color:#e2e8f0; }
body.dark .table         { color:#e2e8f0; }
body.dark .table td, body.dark .table th { border-color:#334155; }
body.dark .table-light th, body.dark .table-light td { background:#1e293b !important; color:#94a3b8 !important; }
body.dark .table-hover tbody tr:hover td { background:#283548 !important; }
body.dark .badge.bg-success-subtle { background:#14532d !important; color:#86efac !important; }
body.dark .badge.bg-danger-subtle  { background:#7f1d1d !important; color:#fca5a5 !important; }
body.dark .badge.bg-warning        { background:#78350f !important; color:#fde68a !important; }
body.dark .badge.bg-secondary-subtle { background:#334155 !important; color:#e2e8f0 !important; }
body.dark .alert-warning { background:#78350f; border-color:#92400e; color:#fde68a; }
body.dark .alert-danger  { background:#7f1d1d; border-color:#991b1b; color:#fca5a5; }
body.dark .alert-info    { background:#1e3a5f; border-color:#1d4ed8; color:#93c5fd; }
body.dark .alert-success { background:#14532d; border-color:#166534; color:#86efac; }
body.dark .table a, body.dark .tbl a { color:#93c5fd; }
body.dark .table a:hover, body.dark .tbl a:hover { color:#bfdbfe; }
body.dark code { color:#c4b5fd; background:#1e1b4b; padding:1px 5px; border-radius:4px; border:1px solid #334155; }
body.dark .card-header { color:#e2e8f0; border-color:#334155; }
body.dark .card-footer { border-color:#334155; color:#94a3b8; }
body.dark .poin-wrap   { background:#334155; }
body.dark .empty       { color:#94a3b8; }
body.dark .pill        { border-color:#475569; }
body.dark .table-responsive { border-color:#334155; }

/* ══════════════════════════════════════════════════════════════════════
   TEMA TAMBAHAN
   ══════════════════════════════════════════════════════════════════════ */

/* ── OCEAN BLUE ── */
body.theme-ocean {
  --c-bg:      #0a1628; --c-white:   #0d1f3c; --c-border:  #1a3a5c;
  --c-text:    #cfe8ff; --c-muted:   #7fb3d3; --c-primary: #0e6eb8;
  --c-hover:   #1a8fd1; --sb-bg:     #061020; --sb-line:   rgba(255,255,255,.07);
}
body.theme-ocean .topbar        { background:#0d1f3c; border-color:#1a3a5c; }
body.theme-ocean .card          { background:#0d1f3c; border-color:#1a3a5c; }
body.theme-ocean .tbl th        { background:#0a1628; color:#7fb3d3; border-color:#1a3a5c; }
body.theme-ocean .tbl td        { border-color:#1a3a5c; }
body.theme-ocean .tbl tbody tr:hover td { background:#112240; }
body.theme-ocean .form-control, body.theme-ocean .form-select { background:#061020; border-color:#1a3a5c; color:#cfe8ff; }
body.theme-ocean .btn-secondary { background:#1a3a5c; color:#cfe8ff; border-color:#2a5a8c; }
body.theme-ocean .btn-secondary:hover { background:#2a5a8c; }
body.theme-ocean .stat-card     { background:#0d1f3c; border-color:#1a3a5c; }
body.theme-ocean .dropdown-menu { background:#0d1f3c; border-color:#1a3a5c; }
body.theme-ocean .dropdown-item { color:#cfe8ff; }
body.theme-ocean .dropdown-item:hover { background:#1a3a5c; }
body.theme-ocean .card-header   { color:#cfe8ff; border-color:#1a3a5c; }
body.theme-ocean .si-blue  { background:#0e3a6e; color:#93c5fd; }
body.theme-ocean .si-green { background:#0a3020; color:#86efac; }
body.theme-ocean .si-red   { background:#3f0f0f; color:#fca5a5; }
body.theme-ocean .si-amber { background:#3f2000; color:#fde68a; }
body.theme-ocean .flash-ok  { background:#0a3020; border-color:#166534; color:#86efac; }
body.theme-ocean .flash-err { background:#3f0f0f; border-color:#991b1b; color:#fca5a5; }
body.theme-ocean #notifPanel { background:#0d1f3c !important; border-color:#1a3a5c !important; }
body.theme-ocean .notif-item { border-color:#1a3a5c !important; }
body.theme-ocean .pagi-btn   { background:#0d1f3c; border-color:#1a3a5c; color:#cfe8ff; }
body.theme-ocean .page-footer { border-color:#1a3a5c; }
body.theme-ocean .table { color:#cfe8ff; }
body.theme-ocean .table td, body.theme-ocean .table th { border-color:#1a3a5c; }
body.theme-ocean .table-light th, body.theme-ocean .table-light td { background:#0a1628 !important; color:#7fb3d3 !important; }
body.theme-ocean .table-hover tbody tr:hover td { background:#112240 !important; }
body.theme-ocean .badge.bg-secondary-subtle { background:#1a3a5c !important; color:#cfe8ff !important; }
body.theme-ocean code { color:#93c5fd; background:#0a1f3f; padding:1px 5px; border-radius:4px; }
body.theme-ocean .tb-toggle:hover, body.theme-ocean .tb-btn:hover, body.theme-ocean .tb-userBtn:hover { background:#1a3a5c; }

/* ── FOREST GREEN ── */
body.theme-forest {
  --c-bg:      #0a1a0f; --c-white:   #0f2318; --c-border:  #1a3d26;
  --c-text:    #d4f0dc; --c-muted:   #6dab7e; --c-primary: #1a7a3a;
  --c-hover:   #22a34e; --sb-bg:     #061008; --sb-line:   rgba(255,255,255,.07);
}
body.theme-forest .topbar        { background:#0f2318; border-color:#1a3d26; }
body.theme-forest .card          { background:#0f2318; border-color:#1a3d26; }
body.theme-forest .tbl th        { background:#0a1a0f; color:#6dab7e; border-color:#1a3d26; }
body.theme-forest .tbl td        { border-color:#1a3d26; }
body.theme-forest .tbl tbody tr:hover td { background:#112818; }
body.theme-forest .form-control, body.theme-forest .form-select { background:#061008; border-color:#1a3d26; color:#d4f0dc; }
body.theme-forest .btn-secondary { background:#1a3d26; color:#d4f0dc; border-color:#2a5c3a; }
body.theme-forest .btn-secondary:hover { background:#2a5c3a; }
body.theme-forest .stat-card     { background:#0f2318; border-color:#1a3d26; }
body.theme-forest .dropdown-menu { background:#0f2318; border-color:#1a3d26; }
body.theme-forest .dropdown-item { color:#d4f0dc; }
body.theme-forest .dropdown-item:hover { background:#1a3d26; }
body.theme-forest .card-header   { color:#d4f0dc; border-color:#1a3d26; }
body.theme-forest .si-blue  { background:#0e2a4e; color:#93c5fd; }
body.theme-forest .si-green { background:#0a3020; color:#86efac; }
body.theme-forest .si-red   { background:#3f0f0f; color:#fca5a5; }
body.theme-forest .si-amber { background:#3f2800; color:#fde68a; }
body.theme-forest .flash-ok  { background:#0a3020; border-color:#166534; color:#86efac; }
body.theme-forest .flash-err { background:#3f0f0f; border-color:#991b1b; color:#fca5a5; }
body.theme-forest #notifPanel { background:#0f2318 !important; border-color:#1a3d26 !important; }
body.theme-forest .notif-item { border-color:#1a3d26 !important; }
body.theme-forest .pagi-btn   { background:#0f2318; border-color:#1a3d26; color:#d4f0dc; }
body.theme-forest .page-footer { border-color:#1a3d26; }
body.theme-forest .table { color:#d4f0dc; }
body.theme-forest .table td, body.theme-forest .table th { border-color:#1a3d26; }
body.theme-forest .table-light th, body.theme-forest .table-light td { background:#0a1a0f !important; color:#6dab7e !important; }
body.theme-forest .table-hover tbody tr:hover td { background:#112818 !important; }
body.theme-forest .badge.bg-secondary-subtle { background:#1a3d26 !important; color:#d4f0dc !important; }
body.theme-forest code { color:#86efac; background:#0a2010; padding:1px 5px; border-radius:4px; }
body.theme-forest .tb-toggle:hover, body.theme-forest .tb-btn:hover, body.theme-forest .tb-userBtn:hover { background:#1a3d26; }

/* ── SUNSET ── */
body.theme-sunset {
  --c-bg:      #1a0f0a; --c-white:   #2d1810; --c-border:  #4a2818;
  --c-text:    #ffe8d6; --c-muted:   #c4896a; --c-primary: #c2410c;
  --c-hover:   #ea580c; --sb-bg:     #100805; --sb-line:   rgba(255,255,255,.07);
}
body.theme-sunset .topbar        { background:#2d1810; border-color:#4a2818; }
body.theme-sunset .card          { background:#2d1810; border-color:#4a2818; }
body.theme-sunset .tbl th        { background:#1a0f0a; color:#c4896a; border-color:#4a2818; }
body.theme-sunset .tbl td        { border-color:#4a2818; }
body.theme-sunset .tbl tbody tr:hover td { background:#381c10; }
body.theme-sunset .form-control, body.theme-sunset .form-select { background:#100805; border-color:#4a2818; color:#ffe8d6; }
body.theme-sunset .btn-secondary { background:#4a2818; color:#ffe8d6; border-color:#6a3820; }
body.theme-sunset .btn-secondary:hover { background:#6a3820; }
body.theme-sunset .stat-card     { background:#2d1810; border-color:#4a2818; }
body.theme-sunset .dropdown-menu { background:#2d1810; border-color:#4a2818; }
body.theme-sunset .dropdown-item { color:#ffe8d6; }
body.theme-sunset .dropdown-item:hover { background:#4a2818; }
body.theme-sunset .card-header   { color:#ffe8d6; border-color:#4a2818; }
body.theme-sunset .si-blue  { background:#0e2a4e; color:#93c5fd; }
body.theme-sunset .si-green { background:#0a2a10; color:#86efac; }
body.theme-sunset .si-red   { background:#4a0f0f; color:#fca5a5; }
body.theme-sunset .si-amber { background:#4a2000; color:#fde68a; }
body.theme-sunset .flash-ok  { background:#0a2a10; border-color:#166534; color:#86efac; }
body.theme-sunset .flash-err { background:#4a0f0f; border-color:#991b1b; color:#fca5a5; }
body.theme-sunset #notifPanel { background:#2d1810 !important; border-color:#4a2818 !important; }
body.theme-sunset .notif-item { border-color:#4a2818 !important; }
body.theme-sunset .pagi-btn   { background:#2d1810; border-color:#4a2818; color:#ffe8d6; }
body.theme-sunset .page-footer { border-color:#4a2818; }
body.theme-sunset .table { color:#ffe8d6; }
body.theme-sunset .table td, body.theme-sunset .table th { border-color:#4a2818; }
body.theme-sunset .table-light th, body.theme-sunset .table-light td { background:#1a0f0a !important; color:#c4896a !important; }
body.theme-sunset .table-hover tbody tr:hover td { background:#381c10 !important; }
body.theme-sunset .badge.bg-secondary-subtle { background:#4a2818 !important; color:#ffe8d6 !important; }
body.theme-sunset code { color:#fdba74; background:#2a1008; padding:1px 5px; border-radius:4px; }
body.theme-sunset .tb-toggle:hover, body.theme-sunset .tb-btn:hover, body.theme-sunset .tb-userBtn:hover { background:#4a2818; }

/* ── PURPLE HAZE ── */
body.theme-purple {
  --c-bg:      #0f0a1a; --c-white:   #1a1030; --c-border:  #2e1f50;
  --c-text:    #e8d6ff; --c-muted:   #9b7ec8; --c-primary: #6d28d9;
  --c-hover:   #7c3aed; --sb-bg:     #08050f; --sb-line:   rgba(255,255,255,.07);
}
body.theme-purple .topbar        { background:#1a1030; border-color:#2e1f50; }
body.theme-purple .card          { background:#1a1030; border-color:#2e1f50; }
body.theme-purple .tbl th        { background:#0f0a1a; color:#9b7ec8; border-color:#2e1f50; }
body.theme-purple .tbl td        { border-color:#2e1f50; }
body.theme-purple .tbl tbody tr:hover td { background:#1f1440; }
body.theme-purple .form-control, body.theme-purple .form-select { background:#08050f; border-color:#2e1f50; color:#e8d6ff; }
body.theme-purple .btn-secondary { background:#2e1f50; color:#e8d6ff; border-color:#4a3070; }
body.theme-purple .btn-secondary:hover { background:#4a3070; }
body.theme-purple .stat-card     { background:#1a1030; border-color:#2e1f50; }
body.theme-purple .dropdown-menu { background:#1a1030; border-color:#2e1f50; }
body.theme-purple .dropdown-item { color:#e8d6ff; }
body.theme-purple .dropdown-item:hover { background:#2e1f50; }
body.theme-purple .card-header   { color:#e8d6ff; border-color:#2e1f50; }
body.theme-purple .si-blue  { background:#0e2a6e; color:#93c5fd; }
body.theme-purple .si-green { background:#0a2a18; color:#86efac; }
body.theme-purple .si-red   { background:#3f0f1f; color:#fca5a5; }
body.theme-purple .si-amber { background:#3f2a00; color:#fde68a; }
body.theme-purple .flash-ok  { background:#0a2a18; border-color:#166534; color:#86efac; }
body.theme-purple .flash-err { background:#3f0f0f; border-color:#991b1b; color:#fca5a5; }
body.theme-purple #notifPanel { background:#1a1030 !important; border-color:#2e1f50 !important; }
body.theme-purple .notif-item { border-color:#2e1f50 !important; }
body.theme-purple .pagi-btn   { background:#1a1030; border-color:#2e1f50; color:#e8d6ff; }
body.theme-purple .page-footer { border-color:#2e1f50; }
body.theme-purple .table { color:#e8d6ff; }
body.theme-purple .table td, body.theme-purple .table th { border-color:#2e1f50; }
body.theme-purple .table-light th, body.theme-purple .table-light td { background:#0f0a1a !important; color:#9b7ec8 !important; }
body.theme-purple .table-hover tbody tr:hover td { background:#1f1440 !important; }
body.theme-purple .badge.bg-secondary-subtle { background:#2e1f50 !important; color:#e8d6ff !important; }
body.theme-purple code { color:#c4b5fd; background:#1a0f30; padding:1px 5px; border-radius:4px; }
body.theme-purple .tb-toggle:hover, body.theme-purple .tb-btn:hover, body.theme-purple .tb-userBtn:hover { background:#2e1f50; }

/* ══════════════════════════════════════════════════════════════════════
   UNIVERSAL DARK THEMES
   ══════════════════════════════════════════════════════════════════════ */
body.dark, body.theme-ocean, body.theme-forest, body.theme-sunset, body.theme-purple {
  color: var(--c-text);
}
body.dark .card, body.theme-ocean .card, body.theme-forest .card, body.theme-sunset .card, body.theme-purple .card { color:var(--c-text); }
body.dark .tbl td, body.theme-ocean .tbl td, body.theme-forest .tbl td, body.theme-sunset .tbl td, body.theme-purple .tbl td { color:var(--c-text); }
body.dark .table td, body.theme-ocean .table td, body.theme-forest .table td, body.theme-sunset .table td, body.theme-purple .table td { color:var(--c-text); }
body.dark .card-header, body.theme-ocean .card-header, body.theme-forest .card-header, body.theme-sunset .card-header, body.theme-purple .card-header { color:var(--c-text); }
body.dark .form-label, body.theme-ocean .form-label, body.theme-forest .form-label, body.theme-sunset .form-label, body.theme-purple .form-label { color:var(--c-text); }
body.dark .fw-600, body.dark .fw-semibold, body.dark .fw-bold,
body.theme-ocean .fw-600, body.theme-ocean .fw-semibold, body.theme-ocean .fw-bold,
body.theme-forest .fw-600, body.theme-forest .fw-semibold, body.theme-forest .fw-bold,
body.theme-sunset .fw-600, body.theme-sunset .fw-semibold, body.theme-sunset .fw-bold,
body.theme-purple .fw-600, body.theme-purple .fw-semibold, body.theme-purple .fw-bold { color:var(--c-text); }
body.dark .text-muted, body.theme-ocean .text-muted, body.theme-forest .text-muted, body.theme-sunset .text-muted, body.theme-purple .text-muted { color:var(--c-muted) !important; }
body.dark .text-dark, body.theme-ocean .text-dark, body.theme-forest .text-dark, body.theme-sunset .text-dark, body.theme-purple .text-dark { color:var(--c-text) !important; }
body.dark code, body.theme-ocean code, body.theme-forest code, body.theme-sunset code, body.theme-purple code { border:1px solid var(--c-border); }
body.dark .form-control, body.theme-ocean .form-control, body.theme-forest .form-control, body.theme-sunset .form-control, body.theme-purple .form-control,
body.dark .form-select, body.theme-ocean .form-select, body.theme-forest .form-select, body.theme-sunset .form-select, body.theme-purple .form-select { color:var(--c-text); background:var(--c-bg); border-color:var(--c-border); }
body.dark .dropdown-menu, body.theme-ocean .dropdown-menu, body.theme-forest .dropdown-menu, body.theme-sunset .dropdown-menu, body.theme-purple .dropdown-menu { background:var(--c-white); border-color:var(--c-border); }
body.dark .dropdown-item, body.theme-ocean .dropdown-item, body.theme-forest .dropdown-item, body.theme-sunset .dropdown-item, body.theme-purple .dropdown-item { color:var(--c-text); }
body.dark .dropdown-item:hover, body.theme-ocean .dropdown-item:hover, body.theme-forest .dropdown-item:hover, body.theme-sunset .dropdown-item:hover, body.theme-purple .dropdown-item:hover { background:var(--c-border); }
body.dark .pagi-btn, body.theme-ocean .pagi-btn, body.theme-forest .pagi-btn, body.theme-sunset .pagi-btn, body.theme-purple .pagi-btn { background:var(--c-white); border-color:var(--c-border); color:var(--c-text); }
body.dark .page-footer, body.theme-ocean .page-footer, body.theme-forest .page-footer, body.theme-sunset .page-footer, body.theme-purple .page-footer { border-color:var(--c-border); color:var(--c-muted); }
body.dark .empty, body.theme-ocean .empty, body.theme-forest .empty, body.theme-sunset .empty, body.theme-purple .empty { color:var(--c-muted); }
body.dark #notifPanel, body.theme-ocean #notifPanel, body.theme-forest #notifPanel, body.theme-sunset #notifPanel, body.theme-purple #notifPanel { background:var(--c-white) !important; border-color:var(--c-border) !important; }
body.dark .notif-item, body.theme-ocean .notif-item, body.theme-forest .notif-item, body.theme-sunset .notif-item, body.theme-purple .notif-item { border-color:var(--c-border) !important; }
body.dark .tb-toggle:hover, body.dark .tb-btn:hover, body.dark .tb-userBtn:hover,
body.theme-ocean .tb-toggle:hover, body.theme-ocean .tb-btn:hover, body.theme-ocean .tb-userBtn:hover,
body.theme-forest .tb-toggle:hover, body.theme-forest .tb-btn:hover, body.theme-forest .tb-userBtn:hover,
body.theme-sunset .tb-toggle:hover, body.theme-sunset .tb-btn:hover, body.theme-sunset .tb-userBtn:hover,
body.theme-purple .tb-toggle:hover, body.theme-purple .tb-btn:hover, body.theme-purple .tb-userBtn:hover { background:var(--c-border); }
body.dark .stat-val, body.theme-ocean .stat-val, body.theme-forest .stat-val, body.theme-sunset .stat-val, body.theme-purple .stat-val { color:var(--c-text); }
body.dark .stat-lbl, body.theme-ocean .stat-lbl, body.theme-forest .stat-lbl, body.theme-sunset .stat-lbl, body.theme-purple .stat-lbl { color:var(--c-muted); }

/* Transisi halus */
body, .topbar, .card, .sidebar, .tbl th, .tbl td,
.form-control, .form-select, .dropdown-menu, .stat-card {
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}

/* ══════════════════════════════════════════════════════════════════════
   ALERT LISENSI
   ══════════════════════════════════════════════════════════════════════ */
.alert-lisensi {
  display:flex; align-items:center; gap:14px;
  padding:14px 20px; border-radius:10px; margin-bottom:20px;
  font-size:14px; transition:opacity .5s ease, transform .5s ease;
}
.alert-lisensi.warning { background-color:#fff8e1; border-left:5px solid #f59e0b; color:#92400e; }
.alert-lisensi.expired { background-color:#fef2f2; border-left:5px solid #ef4444; color:#991b1b; }
.alert-lisensi-icon { font-size:24px; }
.alert-lisensi.warning .alert-lisensi-icon { color:#f59e0b; }
.alert-lisensi.expired .alert-lisensi-icon { color:#ef4444; }
.alert-lisensi-text { display:flex; flex-direction:column; gap:2px; flex:1; }
.alert-lisensi-text strong { font-size:15px; font-weight:700; }
.alert-lisensi-close { background:none; border:none; font-size:20px; cursor:pointer; color:inherit; opacity:.6; padding:0 4px; line-height:1; margin-left:auto; }
.alert-lisensi-close:hover { opacity:1; }
.alert-lisensi.hide { opacity:0; transform:translateY(-10px); pointer-events:none; }

/* ══════════════════════════════════════════════════════════════════════
   SIDEBAR AUTO-COLLAPSE
   ══════════════════════════════════════════════════════════════════════ */
body.sb-auto .sidebar { width:var(--sw-mini); transition:width .25s cubic-bezier(.4,0,.2,1); }
body.sb-auto .main-wrap { margin-left:var(--sw-mini); transition:margin-left .25s ease; }
body.sb-auto .sidebar:hover { width:var(--sw); box-shadow:4px 0 24px rgba(0,0,0,.18); }

body.sb-auto .sidebar:not(:hover) .sb-appname,
body.sb-auto .sidebar:not(:hover) .sb-uinfo,
body.sb-auto .sidebar:not(:hover) .sb-section,
body.sb-auto .sidebar:not(:hover) .sb-lbl,
body.sb-auto .sidebar:not(:hover) .sb-cnt,
body.sb-auto .sidebar:not(:hover) .sb-logout span,
body.sb-auto .sidebar:not(:hover) .sb-chev { opacity:0; transition:opacity .1s ease; pointer-events:none; white-space:nowrap; overflow:hidden; }

body.sb-auto .sidebar:hover .sb-appname,
body.sb-auto .sidebar:hover .sb-uinfo,
body.sb-auto .sidebar:hover .sb-section,
body.sb-auto .sidebar:hover .sb-lbl,
body.sb-auto .sidebar:hover .sb-cnt,
body.sb-auto .sidebar:hover .sb-logout span,
body.sb-auto .sidebar:hover .sb-chev { opacity:1; transition:opacity .2s ease .1s; pointer-events:auto; }

body.sb-auto .sidebar:not(:hover) .sb-brand    { justify-content:center; padding:0; }
body.sb-auto .sidebar:not(:hover) .sb-usercard { justify-content:center; padding:12px 0; }
body.sb-auto .sidebar:not(:hover) .sb-item > a { justify-content:center; padding:10px 0; }
body.sb-auto .sidebar:not(:hover) .sb-group-toggle { justify-content:center; padding:10px 0; }
body.sb-auto .sidebar:not(:hover) .sb-footer   { padding:10px 0; display:flex; justify-content:center; }
body.sb-auto .sidebar:not(:hover) .sb-logout   { justify-content:center; padding:9px 0; width:100%; }
body.sb-auto .sidebar:not(:hover) .sb-submenu  { display:none !important; }

body.sb-auto .sidebar:hover .sb-brand    { justify-content:flex-start; padding:0 16px; }
body.sb-auto .sidebar:hover .sb-usercard { justify-content:flex-start; padding:12px 16px; }
body.sb-auto .sidebar:hover .sb-item > a { justify-content:flex-start; padding:9px 18px; }
body.sb-auto .sidebar:hover .sb-group-toggle { justify-content:flex-start; padding:9px 18px; }
body.sb-auto .sidebar:hover .sb-footer  { padding:10px 12px; display:block; }
body.sb-auto .sidebar:hover .sb-logout  { justify-content:flex-start; padding:9px 10px; width:auto; }

body.sb-auto .sidebar:not(:hover) .sb-item.active > a { background:var(--sb-active); border-left:3px solid var(--c-accent); }
body.sb-auto #tbToggle .bi::before { content:"\F4C1"; }

@media (max-width:768px) {
  body.sb-auto .sidebar       { width:var(--sw) !important; }
  body.sb-auto .main-wrap     { margin-left:0 !important; }
  body.sb-auto .sidebar:hover { box-shadow:none; }
}

.sidebar .sb-scroll .sb-submenu a {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 48px;
  font-size: 13px;
  color: rgba(255,255,255,.65) !important;
  text-decoration: none;
  min-height: 36px;
  position: relative;
}
.sb-submenu > a {
  display: flex !important;
}

.sb-group-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 18px !important;
  color: var(--sb-text) !important;
  min-height: 44px !important;
}
.sb-group-toggle .sb-ico,
.sb-group-toggle .sb-lbl {
  display: inline-flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ── FIX: sb-group-toggle selalu tampil ── */
@media (min-width:769px) and (max-width:1024px) {
  body:not(.sb-mini) .sb-group-toggle {
    justify-content: flex-start !important;
    padding: 9px 18px !important;
  }
  body:not(.sb-mini) .sb-group-toggle .sb-ico,
  body:not(.sb-mini) .sb-group-toggle .sb-lbl,
  body:not(.sb-mini) .sb-group-toggle .sb-chev {
    display: inline-flex !important;
    opacity: 1 !important;
  }
  /* Jangan override toggle: biarkan .open yang mengontrol */
  body:not(.sb-mini) .sb-group .sb-submenu {
    display: none;
  }
  body:not(.sb-mini) .sb-group.open .sb-submenu {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* FIX: sb-group-toggle display & color */
.sidebar .sb-scroll .sb-group-toggle {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--sb-text) !important;
  padding: 9px 18px !important;
  min-height: 44px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

.sidebar .sb-scroll .sb-group-toggle .sb-ico,
.sidebar .sb-scroll .sb-group-toggle .sb-lbl,
.sidebar .sb-scroll .sb-group-toggle .sb-chev {
  color: var(--sb-text) !important;
  opacity: 1 !important;
  display: inline-flex !important;
}