:root {
  --navy: #1E2761;
  --navy-deep: #151b45;
  --amber: #F5A623;
  --bg: #F7F8FC;
  --surface: #ffffff;
  --text: #1a1f36;
  --muted: #6b7280;
  --border: #e5e7ef;
  --danger: #d64545;
  --success: #2f9e64;
  --sidebar-w: 268px;
  --sidebar-w-collapsed: 72px;
  --header-h: 64px;
  --radius: 10px;
  --font: "Segoe UI", "Trebuchet MS", sans-serif;
  --z-header: 50;
  --z-sidebar: 40;
  --z-backdrop: 35;
  --z-modal: 200;   /* di atas header/sidebar/dropdown — hanya dialog di depan */
  --z-toast: 210;   /* notifikasi tetap di atas modal bila perlu */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; font-family: var(--font); color: var(--text); background: var(--bg); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns .22s ease;
}
.app-shell.sidebar-collapsed {
  grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}

/* ---- Sidebar ---- */
.sidebar {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding: 1rem 0.85rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: var(--z-sidebar);
  transition: width .22s ease, padding .22s ease;
  width: var(--sidebar-w);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0.55rem 1.1rem;
  min-height: 52px;
}
.sidebar-close {
  display: none;
  margin-left: auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.sidebar-close:hover { background: rgba(255,255,255,0.18); }
.sidebar-close-ico,
.sidebar-close-ico::before,
.sidebar-close-ico::after {
  display: block;
  width: 14px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  top: 50%;
}
.sidebar-close-ico { background: transparent; transform: translate(-50%, -50%); }
.sidebar-close-ico::before {
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}
.sidebar-close-ico::after {
  content: "";
  transform: translate(-50%, -50%) rotate(-45deg);
}
.brand-mark {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--amber); color: var(--navy); font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.brand-mark.lg { width: 52px; height: 52px; font-size: 1.4rem; }
.brand-text {
  font-size: 1.15rem; font-weight: 700; letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden;
  transition: opacity .15s ease, width .15s ease;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 0.2rem; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-width: 0;
  padding: 0.62rem 0.75rem;
  border-radius: 8px;
  color: rgba(255,255,255,0.92);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-weight: 650;
  transition: background .15s ease, color .15s ease;
}
.nav-item:hover { background: rgba(0, 0, 0, 0.18); color: #fff; }
.nav-item.active {
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 3px 0 0 rgba(0, 0, 0, 0.35);
}
.nav-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
}
.nav-icon::before,
.nav-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}
/* —— Ikon menu (CSS murni) —— */
.ico-dashboard::before {
  width: 12px; height: 12px;
  border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 2px;
  box-shadow: 5px 0 0 -0.5px rgba(255,255,255,0.95), 0 5px 0 -0.5px rgba(255,255,255,0.95), 5px 5px 0 -0.5px rgba(255,255,255,0.95);
  transform: translate(-2.5px, -2.5px);
}
.ico-chart::before {
  width: 3px; height: 8px; bottom: 7px; left: 7px;
  background: rgba(255,255,255,0.95); border-radius: 1px;
  box-shadow: 5px -3px 0 0 rgba(255,255,255,0.95), 10px -6px 0 0 rgba(255,255,255,0.95);
}
.ico-admin::before {
  width: 10px; height: 10px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 2px 2px 0 0; transform: translateY(-2px);
}
.ico-admin::after {
  width: 14px; height: 5px; bottom: 6px;
  border: 1.5px solid rgba(255,255,255,0.95); border-top: 0; border-radius: 0 0 2px 2px;
}
.ico-branch::before {
  width: 12px; height: 10px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 1px; transform: translateY(-1px);
}
.ico-branch::after {
  width: 4px; height: 4px; bottom: 5px;
  border-left: 1.5px solid rgba(255,255,255,0.95);
  border-right: 1.5px solid rgba(255,255,255,0.95);
}
.ico-user::before {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.95); transform: translateY(-4px);
}
.ico-user::after {
  width: 12px; height: 6px; bottom: 5px;
  border: 1.5px solid rgba(255,255,255,0.95); border-bottom: 0; border-radius: 6px 6px 0 0;
}
.ico-role::before {
  width: 12px; height: 13px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 2px 2px 6px 6px;
}
.ico-role::after {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,0.95); transform: translateY(2px);
}
.ico-master::before {
  width: 12px; height: 10px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 2px;
}
.ico-master::after {
  width: 8px; height: 1.5px; background: rgba(255,255,255,0.95);
  box-shadow: 0 3px 0 rgba(255,255,255,0.95);
}
.ico-product::before {
  width: 11px; height: 11px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 2px; transform: rotate(45deg) scale(0.85);
}
.ico-category::before {
  width: 11px; height: 8px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 1px; transform: translateY(2px);
}
.ico-category::after {
  width: 5px; height: 3px; top: 5px; left: 6px;
  border: 1.5px solid rgba(255,255,255,0.95); border-bottom: 0;
  border-radius: 1px 1px 0 0;
}
.ico-stock::before {
  width: 12px; height: 8px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 1px; transform: translateY(1px);
}
.ico-stock::after {
  width: 8px; height: 5px; top: 6px;
  border: 1.5px solid rgba(255,255,255,0.95); border-bottom: 0; border-radius: 1px 1px 0 0;
}
.ico-customer::before {
  width: 6px; height: 6px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.95); left: 7px; top: 6px;
}
.ico-customer::after {
  width: 6px; height: 6px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.95); right: 7px; bottom: 6px;
  box-shadow: -4px -4px 0 -1px rgba(255,255,255,0.5);
}
.ico-config::before {
  width: 12px; height: 12px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 50%;
}
.ico-config::after {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,0.95);
}
.ico-sales::before {
  width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 8px solid rgba(255,255,255,0.95); transform: translateY(-3px);
}
.ico-sales::after {
  width: 10px; height: 6px; bottom: 6px;
  border: 1.5px solid rgba(255,255,255,0.95); border-top: 0; border-radius: 0 0 2px 2px;
}
.ico-cart::before {
  width: 12px; height: 8px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 0 0 2px 2px; transform: translateY(1px);
}
.ico-cart::after {
  width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.95);
  bottom: 5px; left: 8px;
  box-shadow: 7px 0 0 rgba(255,255,255,0.95);
}
.ico-order::before {
  width: 10px; height: 12px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 1px;
}
.ico-order::after {
  width: 5px; height: 1.5px; background: rgba(255,255,255,0.95);
  box-shadow: 0 3px 0 rgba(255,255,255,0.95), 0 6px 0 rgba(255,255,255,0.95);
  transform: translateY(-1px);
}
.ico-finance::before {
  width: 12px; height: 12px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 50%;
}
.ico-finance::after {
  width: 5px; height: 5px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.95);
}
.ico-installment::before {
  width: 11px; height: 12px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 2px;
}
.ico-installment::after {
  width: 5px; height: 5px; top: 5px; right: 6px;
  border-right: 1.5px solid rgba(255,255,255,0.95);
  border-bottom: 1.5px solid rgba(255,255,255,0.95);
  transform: rotate(45deg);
}
.ico-payment::before {
  width: 13px; height: 9px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 2px;
}
.ico-payment::after {
  width: 13px; height: 2px; background: rgba(255,255,255,0.95);
  transform: translateY(-1px);
}
.ico-ledger::before {
  width: 12px; height: 12px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 2px; transform: rotate(-8deg);
}
.ico-ledger::after {
  width: 6px; height: 1.5px; background: rgba(255,255,255,0.95);
  box-shadow: 0 3px 0 rgba(255,255,255,0.95), 0 6px 0 rgba(255,255,255,0.95);
  transform: translateY(-1px);
}
.ico-settlement::before {
  width: 10px; height: 10px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 50%;
}
.ico-settlement::after {
  width: 4px; height: 7px; border-right: 1.5px solid rgba(255,255,255,0.95);
  border-bottom: 1.5px solid rgba(255,255,255,0.95);
  transform: rotate(40deg) translate(-1px, -1px);
}
.ico-receipt::before {
  width: 10px; height: 12px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 1px; border-bottom-style: dashed;
}
.ico-whatsapp::before {
  width: 12px; height: 12px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 50% 50% 50% 4px; transform: rotate(-20deg);
}
.ico-collection::before {
  width: 8px; height: 10px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 1px; left: 7px;
}
.ico-collection::after {
  width: 8px; height: 10px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 1px; right: 7px; transform: translateY(2px);
}
.ico-visit::before {
  width: 8px; height: 8px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg) translateY(-1px);
}
.ico-visit::after {
  width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.95);
  transform: translateY(-2px);
}
.ico-reminder::before {
  width: 10px; height: 10px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; transform: translateY(-1px);
}
.ico-reminder::after {
  width: 4px; height: 2px; bottom: 5px; background: rgba(255,255,255,0.95);
  border-radius: 1px;
}
.ico-exception::before {
  width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 12px solid rgba(255,255,255,0.95);
}
.ico-exception::after {
  width: 2px; height: 5px; background: var(--navy); top: 9px;
  box-shadow: 0 4px 0 0.5px var(--navy);
}
.ico-reschedule::before {
  width: 12px; height: 12px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 50%; border-top-color: transparent;
}
.ico-reschedule::after {
  width: 4px; height: 4px; border-top: 1.5px solid rgba(255,255,255,0.95);
  border-right: 1.5px solid rgba(255,255,255,0.95);
  top: 6px; right: 7px; transform: rotate(20deg);
}
.ico-repossession::before {
  width: 12px; height: 8px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 1px;
}
.ico-repossession::after {
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid rgba(255,255,255,0.95); bottom: 5px;
}
.ico-return::before {
  width: 10px; height: 8px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 1px; transform: translateY(1px);
}
.ico-return::after {
  width: 6px; height: 6px; border-left: 1.5px solid rgba(255,255,255,0.95);
  border-bottom: 1.5px solid rgba(255,255,255,0.95);
  transform: rotate(45deg) translate(-2px, -2px);
}
.ico-report::before {
  width: 11px; height: 12px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 1px;
}
.ico-report::after {
  width: 3px; height: 5px; background: rgba(255,255,255,0.95); bottom: 7px; left: 8px;
  box-shadow: 4px -2px 0 rgba(255,255,255,0.95), 8px 1px 0 rgba(255,255,255,0.95);
}
.ico-receivable::before {
  width: 12px; height: 9px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 2px;
}
.ico-receivable::after {
  width: 6px; height: 1.5px; background: rgba(255,255,255,0.95);
  box-shadow: 0 3px 0 rgba(255,255,255,0.95);
}
.ico-hr::before {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.95); transform: translateY(-4px);
}
.ico-hr::after {
  width: 13px; height: 6px; bottom: 5px;
  border: 1.5px solid rgba(255,255,255,0.95); border-bottom: 0; border-radius: 6px 6px 0 0;
  box-shadow: -4px -3px 0 -1.5px rgba(255,255,255,0.6);
}
.ico-attendance::before {
  width: 12px; height: 13px; border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 2px;
}
.ico-attendance::after {
  width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.95);
  transform: translateY(1px);
}
.ico-info::before {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.95);
}
.ico-info::after {
  content: "i";
  font-size: 0.65rem; font-weight: 800;
  color: rgba(255,255,255,0.95);
  position: absolute; inset: 0;
  display: grid; place-items: center;
}

.nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: inherit; }
.nav-parent { font-weight: 700; }
.nav-child { font-weight: 600; }
.nav-chevron {
  font-size: 0.7rem; opacity: 0.7;
  transition: transform .18s ease;
}
.nav-group.open > .nav-parent .nav-chevron { transform: rotate(90deg); }

.nav-children {
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.15rem 0 0.35rem 0.35rem;
  margin-left: 0.5rem;
  border-left: 1px solid rgba(255,255,255,0.12);
}
.nav-group.open > .nav-children { display: flex; }
.nav-child { padding: 0.55rem 0.35rem 0.55rem 0.5rem; font-size: 0.88rem; min-width: 0; }

.nav-subgroup { display: flex; flex-direction: column; width: 100%; }
.nav-subgroup.open > .nav-subparent .nav-chevron { transform: rotate(90deg); }
.nav-subchildren {
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.1rem 0 0.3rem 0.4rem;
  margin-left: 0.75rem;
  border-left: 1px dashed rgba(255,255,255,0.15);
}
.nav-subgroup.open > .nav-subchildren { display: flex; }
.nav-grandchild { padding: 0.45rem 0.35rem 0.45rem 0.5rem; font-size: 0.84rem; min-width: 0; opacity: 0.9; }
.nav-grandchild:hover, .nav-grandchild.active { opacity: 1; }

/* Desktop collapsed: icon rail */
.app-shell.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); padding-left: 0.55rem; padding-right: 0.55rem; }
.app-shell.sidebar-collapsed .brand-text,
.app-shell.sidebar-collapsed .nav-label,
.app-shell.sidebar-collapsed .nav-chevron { display: none; }
.app-shell.sidebar-collapsed .nav-item { justify-content: center; padding: 0.65rem 0.4rem; }
.app-shell.sidebar-collapsed .nav-children {
  margin-left: 0;
  border-left: 0;
  padding-left: 0;
}
.app-shell.sidebar-collapsed .nav-group.open > .nav-children { display: flex; }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 45, 0.45);
  z-index: var(--z-backdrop);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.sidebar-backdrop[hidden] { display: none !important; }

/* ---- Main / Header ---- */
.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0 1.1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}
.sidebar-toggle-slot {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sidebar-toggle {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: calc(var(--z-header) + 1);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.sidebar-toggle:hover { background: rgba(30,39,97,0.06); }
.toggle-bars,
.toggle-bars::before,
.toggle-bars::after {
  display: block;
  width: 18px; height: 2px;
  background: var(--navy);
  border-radius: 2px;
  position: relative;
  transition: transform .18s ease, opacity .18s ease, background .18s ease;
}
.toggle-bars::before,
.toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.toggle-bars::before { top: -6px; }
.toggle-bars::after { top: 6px; }

.header-titles { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 0.15rem; }
.page-title { margin: 0; font-size: 1.15rem; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumbs { font-size: 0.75rem; color: var(--muted); display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.crumb-sep { opacity: 0.5; }

.header-user { display: flex; align-items: center; margin-left: auto; }
.user-menu { position: relative; }
.user-menu-trigger {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.3rem 0.45rem 0.3rem 0.3rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.user-menu-trigger:hover,
.user-menu.open .user-menu-trigger {
  background: rgba(30,39,97,0.04);
  border-color: var(--border);
}
.user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(145deg, var(--navy), #2f3a8a);
  color: #fff; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9rem; flex-shrink: 0;
}
.user-avatar.sm { width: 40px; height: 40px; font-size: 0.95rem; }
.user-meta {
  display: flex; flex-direction: column; align-items: flex-start;
  font-size: 0.82rem; line-height: 1.2; text-align: left;
}
.user-meta strong { color: var(--text); font-weight: 650; }
.user-meta span { color: var(--muted); }
.user-caret {
  width: 0; height: 0; margin-right: 0.25rem;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--muted);
  transition: transform .15s ease;
}
.user-menu.open .user-caret { transform: rotate(180deg); }

.user-dropdown {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  width: min(280px, calc(100vw - 1.5rem));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(20, 28, 70, 0.14);
  padding: 0.45rem;
  z-index: calc(var(--z-header) + 5);
  animation: dropdownIn .14s ease;
}
.user-dropdown[hidden] { display: none !important; }
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.user-dropdown-head {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 0.65rem;
}
.user-dropdown-id { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.user-dropdown-id strong {
  font-size: 0.92rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-dropdown-id span { font-size: 0.78rem; color: var(--muted); }
.user-dropdown-divider {
  height: 1px; background: var(--border); margin: 0.25rem 0.35rem;
}
.user-dropdown-item {
  width: 100%;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0.75rem;
  border: 0; border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-size: 0.9rem;
}
.user-dropdown-item:hover { background: rgba(30,39,97,0.05); }
.user-dropdown-item.danger { color: var(--danger); }
.user-dropdown-item.danger:hover { background: rgba(214,69,69,0.08); }
.udi-ico {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(30,39,97,0.07);
  position: relative; flex-shrink: 0;
}
.udi-ico::before {
  content: "";
  position: absolute; inset: 0;
  margin: auto;
}
.udi-profile::before {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--navy);
  box-shadow: 0 7px 0 -2px var(--navy);
  top: -2px;
}
.udi-help::before {
  content: "?";
  display: grid; place-items: center;
  font-weight: 800; font-size: 0.85rem; color: var(--navy);
}
.udi-info::before {
  content: "i";
  display: grid; place-items: center;
  font-weight: 800; font-size: 0.85rem; color: var(--navy);
  font-family: serif;
}
.udi-logout {
  background: rgba(214,69,69,0.1);
}
.udi-logout::before {
  width: 12px; height: 2px; background: var(--danger);
  box-shadow: 6px -3px 0 -0.5px var(--danger), 6px 3px 0 -0.5px var(--danger);
  transform: translateX(-1px);
}

.app-content {
  padding: 1.25rem;
  /* Ruang content: form/detail terpusat secara natural di dalam area ini */
  display: block;
}

.app-footer {
  margin-top: auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.login-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 20%, rgba(245,166,35,0.22), transparent 35%),
    linear-gradient(135deg, #eef1fb 0%, var(--bg) 45%, #e8ecf8 100%);
  display: grid; place-items: center;
}
.login-wrap { width: min(420px, 92vw); }
.login-card {
  background: var(--surface); border-radius: 16px; padding: 2rem;
  box-shadow: 0 18px 40px rgba(30,39,97,0.12); border: 1px solid var(--border);
}
.login-brand { text-align: center; margin-bottom: 1.5rem; }
.login-brand h1 { margin: 0.75rem 0 0.25rem; color: var(--navy); }
.login-brand p { margin: 0; color: var(--muted); }

/* ---- Captcha Component ---- */
.captcha-group {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}
.captcha-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--text);
}
.captcha-row {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}
.captcha-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  width: 130px;
  flex-shrink: 0;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}
.captcha-preview svg {
  display: block;
  width: 130px;
  height: 42px;
}
.captcha-loading {
  font-size: 0.75rem;
  color: var(--muted);
}
.captcha-refresh-btn {
  height: 42px;
  width: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius);
}
.captcha-refresh-btn svg {
  transition: transform 0.3s ease;
}
.captcha-refresh-btn.spinning svg {
  transform: rotate(360deg);
}
.captcha-input {
  height: 42px !important;
  text-transform: uppercase !important;
  font-family: 'Courier New', Courier, monospace !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  font-size: 1.05rem !important;
  text-align: center !important;
  flex: 1;
  min-width: 0;
}

/* ---- Mobile ---- */
@media (max-width: 860px) {
  :root {
    --sidebar-mobile-w: min(280px, 86vw);
    --z-sidebar: 60; /* di atas header agar drawer menutupi header penuh */
  }
  .app-shell,
  .app-shell.sidebar-collapsed {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-mobile-w);
    height: 100vh;
    height: 100dvh;
    transform: translateX(-105%);
    transition: transform .22s ease;
    box-shadow: 8px 0 30px rgba(0,0,0,0.18);
    z-index: var(--z-sidebar);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-backdrop:not([hidden]) {
    display: block;
    z-index: calc(var(--z-sidebar) - 1);
  }

  /* Tombol tutup ada di dalam sidebar; hamburger header hanya untuk membuka */
  .sidebar-close { display: inline-flex; align-items: center; justify-content: center; }
  body.mobile-nav-open .sidebar-toggle-slot { visibility: hidden; }

  .user-meta { display: none; }
  .user-caret { display: none; }

  .app-shell.sidebar-collapsed .brand-text,
  .app-shell.sidebar-collapsed .nav-label,
  .app-shell.sidebar-collapsed .nav-chevron { display: unset; }
  .app-shell.sidebar-collapsed .nav-item { justify-content: flex-start; padding: 0.62rem 0.75rem; }
}

@media (min-width: 861px) {
  .sidebar-backdrop { display: none !important; }
  .sidebar-close { display: none !important; }
}

/* ---- Form pegawai / fieldset ---- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem 1rem;
}
fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem 1rem;
  margin: 0 0 1rem;
}
fieldset legend {
  padding: 0 0.35rem;
  font-weight: 600;
  font-size: 0.92rem;
}
.hint {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0.5rem 0;
}
.checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.35rem;
}
.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
}
.detail-dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
}
.detail-dl dt { color: var(--muted); margin: 0; }
.detail-dl dd { margin: 0; }

/* Detail modal (mis. pegawai) — section + grid label/value */
.detail-sections {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.detail-section + .detail-section {
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.detail-section-title {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
}
.detail-dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.45rem 1rem;
}
.detail-item {
  display: grid;
  grid-template-columns: minmax(6.5rem, 38%) 1fr;
  gap: 0.25rem 0.65rem;
  font-size: 0.9rem;
  align-items: start;
}
.detail-label {
  color: var(--muted);
  line-height: 1.35;
}
.detail-value {
  margin: 0;
  line-height: 1.35;
  word-break: break-word;
}
.detail-list {
  margin: 0.35rem 0 0;
  padding-left: 1.15rem;
  line-height: 1.5;
}
.detail-notes {
  margin: 0;
  white-space: pre-wrap;
  font-size: 0.9rem;
  line-height: 1.45;
}
.modal.wide .modal-body {
  max-height: min(72vh, 680px);
}

/* ---- Pagination AJAX ---- */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}
.pager-info { color: var(--muted); }
.pager-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.pager-page {
  min-width: 5.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
}
.pager-btn { min-width: 2.2rem; padding: 0.3rem 0.45rem; }
.pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager-size {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.pager-limit {
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font: inherit;
}