/* ERP Satker 2.5: utilitas di header, navigasi ikon di kiri. */
html .topbar { grid-template-columns: minmax(200px,1fr) auto minmax(160px,1fr); }
html .top-actions { justify-self: end; }
html .topbar .floating-rail {
  position: relative; inset: auto; transform: none; display: flex;
  flex-direction: row; align-items: center; justify-content: center;
  width: fit-content; margin: 0 auto; gap: 7px; padding: 8px 13px;
  border-radius: 999px; background: #181d18; color: #fff; z-index: 30;
}
html .topbar .floating-rail button { width: 42px; height: 42px; border-radius: 50%; }
html .topbar .floating-rail button:hover,
html .topbar .floating-rail button:focus-visible { background: #ffffff24; }
html .topbar .floating-rail .rail-divider { height: 25px; width: 1px; margin: 0 6px; background: #ffffff2a; }
html .topbar .floating-rail button::after { left: 50%; top: calc(100% + 18px); transform: translateX(-50%); font-size: 13px; }
html .topbar .floating-rail button:is(:hover,:focus-visible)::after { transform: translateX(-50%); }
html .top-nav.module-rail {
  position: fixed; left: 18px; top: 50%; bottom: auto; right: auto;
  transform: translateY(-50%); display: flex; flex-direction: column;
  width: 72px; max-width: none; gap: 7px; padding: 16px 9px; margin: 0;
  border-radius: 999px; background: linear-gradient(160deg,#242820,#10150f);
  box-shadow: 0 15px 36px #15251b1a; z-index: 45; overflow: visible;
  --erp-nav-ink: #fff; --erp-nav-fill: #ffffff23; --erp-nav-selected-ink: #fff;
}
html[data-theme="dark"] .top-nav.module-rail { --erp-nav-ink: #fff; --erp-nav-fill: #ffffff29; --erp-nav-selected-ink: #fff; }
html .top-nav.module-rail > a {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 54px; width: 54px; height: 54px; padding: 0; border-radius: 50%; color: #fff;
}
html .top-nav.module-rail > a svg { width: 25px; height: 25px; stroke-width: 1.7; }
html .module-rail .erp-nav-indicator { border-radius: 50%; }
html .top-nav.module-rail > a:not(.erp-nav-selected):hover { background: #ffffff12; }
html .module-rail .rail-label {
  position: absolute; left: calc(100% + 25px); padding: 10px 15px;
  border-radius: 12px; background: #171d19; color: #fff;
  font-size: 14px; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateX(-5px); transition: opacity 150ms, transform 150ms;
}
html .module-rail a:is(:hover,:focus-visible) .rail-label { opacity: 1; transform: none; }
html .mobile-toggle { display: none; }
@media (min-width:1001px) { html .shell { width: calc(100% - 160px); max-width: 1800px; margin-left: 120px; margin-right: 40px; } }
@media (max-width:1000px) {
  html .topbar { grid-template-columns: 1fr auto; gap: 12px; }
  html .topbar .floating-rail { grid-row: 2; grid-column: 1 / -1; }
  html .top-actions { grid-row: 1; grid-column: 2; }
  html .top-nav.module-rail {
    top: auto; bottom: calc(10px + env(safe-area-inset-bottom)); left: 50%;
    transform: translateX(-50%); flex-direction: row; width: max-content;
    max-width: calc(100vw - 16px); gap: 1px; padding: 7px; border-radius: 999px;
  }
  html .top-nav.module-rail > a { flex: 0 0 38px; width: 38px; height: 42px; }
  html .top-nav.module-rail > a svg { width: 21px; height: 21px; }
  html .module-rail .rail-label { left: 50%; top: auto; bottom: calc(100% + 18px); transform: translateX(-50%); }
  html .module-rail a:is(:hover,:focus-visible) .rail-label { transform: translateX(-50%); }
  html .footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}
@media (max-height:650px) and (min-width:1001px) {
  html .top-nav.module-rail { gap: 3px; padding: 10px 9px; }
  html .top-nav.module-rail > a { flex-basis: 44px; height: 44px; }
}
@media (prefers-reduced-motion:reduce) { html .module-rail .rail-label { transition: none; } }
@media print { html .top-nav.module-rail, html .topbar .floating-rail { display:none !important; } html .shell { margin:0; width:100%; } }


/* 2.5.2: tombol ikon sage, panel membuka kanan dan menutup kiri. */
html .topbar .utility-disclosure { position: relative; justify-self: center; z-index: 60; }
html .utility-trigger {
  display: grid; place-items: center; width: 50px; height: 50px; padding: 0;
  border: 1px solid #bed4c7; border-radius: 50%; cursor: pointer;
  background: #e1eee6; color: #285b48; box-shadow: 0 5px 16px #315d4610;
  transition: background 180ms, transform 220ms;
}
html .utility-trigger svg { width: 23px; height: 23px; }
html .utility-trigger:hover, html .utility-trigger[aria-expanded="true"] { background: #cde3d5; }
html .utility-trigger[aria-expanded="true"] svg { transform: rotate(45deg); }
html .utility-trigger svg { transition: transform 240ms ease; }
html .utility-trigger:focus-visible { outline: 2px solid #4c9374; outline-offset: 4px; }
html .topbar .utility-disclosure > .floating-rail {
  position: absolute; left: calc(100% + 10px); top: 0; right: auto; bottom: auto;
  transform: translateX(-8px); margin: 0; display: flex; flex-wrap: nowrap;
  gap: 3px; padding: 4px 8px; border-radius: 999px;
  background: #e1eee6; color: #285b48; border: 1px solid #bed4c7;
  box-shadow: 0 8px 24px #315d4618; opacity: 0; clip-path: inset(0 100% 0 0 round 28px);
  pointer-events: none; transition: clip-path 240ms ease, opacity 180ms ease, transform 240ms ease;
  animation: none; z-index: 60;
}
html .topbar .utility-disclosure > .floating-rail[hidden] { display: none !important; }
html .topbar .utility-disclosure.is-open > .floating-rail {
  opacity: 1; transform: translateX(0); clip-path: inset(0 0 0 0 round 28px); pointer-events: auto;
}
html .topbar .utility-disclosure .floating-rail button { color: #285b48; background: transparent; }
html .topbar .utility-disclosure .floating-rail button:is(:hover,:focus-visible) { background: #bddac9; }
html .topbar .utility-disclosure .rail-divider { background: #9cbeaa; }
html[data-theme="dark"] .utility-trigger, html[data-theme="dark"] .topbar .utility-disclosure > .floating-rail {
  background: #294a43; color: #e2f2e9; border-color: #4a7565;
}
html[data-theme="dark"] .topbar .utility-disclosure .floating-rail button { color: #e2f2e9; }
html[data-theme="dark"] .topbar .utility-disclosure .floating-rail button:is(:hover,:focus-visible), html[data-theme="dark"] .utility-trigger:hover { background: #3c6557; }
@media (max-width:1100px) {
  html .topbar .utility-disclosure > .floating-rail { left: 0; top: calc(100% + 10px); }
}
@media (max-width:1000px) {
  html .topbar .utility-disclosure { grid-row: 2; grid-column: 1 / -1; justify-self: start; }
  html .topbar .utility-disclosure > .floating-rail { padding: 4px 6px; gap: 1px; }
  html .topbar .utility-disclosure .floating-rail button { width: 39px; height: 40px; }
}
html[data-motion="off"] .utility-disclosure *, html[data-motion="off"] .utility-trigger { transition: none !important; }
@media (prefers-reduced-motion:reduce) { html .utility-disclosure *, html .utility-trigger { transition:none !important; } }
@media print { html .utility-disclosure { display:none !important; } }

/* 2.5.3: utilitas bersama tombol akun, membuka ke kiri. */
html .topbar { grid-template-columns: minmax(0,1fr) auto; }
html .top-actions { position: relative; display: flex; align-items: center; gap: 10px; grid-column: 2; grid-row: 1; }
html .topbar .top-actions .utility-disclosure { position: relative; grid-row: auto; grid-column: auto; justify-self: auto; flex: 0 0 auto; }
html .topbar .utility-disclosure > .floating-rail {
  left: auto; right: calc(100% + 10px); top: 0;
  transform: translateX(8px); clip-path: inset(0 0 0 100% round 28px);
}
html .topbar .utility-disclosure.is-open > .floating-rail {
  transform: translateX(0); clip-path: inset(0 0 0 0 round 28px);
}
@media (max-width:1000px) {
  html .topbar { grid-template-columns: minmax(0,1fr) auto; gap: 10px; min-height: 80px; }
  html .topbar .brand { min-width: 0; gap: 8px; }
  html .topbar .brand strong { font-size: clamp(16px,4.5vw,23px); }
  html .topbar .brand small { font-size: 11px; }
  html .topbar .brand img { width: 32px; height: 38px; }
  html .top-actions { gap: 7px; }
  html .utility-trigger { width: 42px; height: 42px; }
  html .top-actions .button.small { padding: 10px 14px; font-size: 12px; }
  html .topbar .top-actions .utility-disclosure { position: static; }
  html .topbar .top-actions .utility-disclosure > .floating-rail {
    left: auto; right: 0; top: calc(100% + 10px); bottom: auto;
    width: max-content; max-width: calc(100vw - 32px); gap: 2px; padding: 5px 8px;
  }
  html .topbar .utility-disclosure .floating-rail button { width: 38px; height: 38px; flex: 0 0 38px; }
  html .topbar .utility-disclosure .rail-divider { margin: 0 3px; }
}
@media (max-width:359px) {
  html .topbar .brand small { font-size: 9px; }
  html .topbar .brand img { width: 26px; }
  html .top-actions { gap: 5px; }
  html .utility-trigger { width: 36px; height: 36px; }
  html .top-actions .button.small { padding: 9px 11px; }
}

/* 2.6: menu kapsul mengisi tengah header desktop. */
html .header-menu {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  width: max-content; max-width: 100%; padding: 5px; margin: 0 auto;
  background: #ffffffed; border: 1px solid #e7eee7; border-radius: 999px;
  box-shadow: 0 4px 20px #315d4605;
}
html .header-menu a {
  display: block; padding: 12px 16px; border-radius: 999px; white-space: nowrap;
  font-size: 13px; color: #27362c; text-decoration: none;
  transition: background 180ms, color 180ms, transform 180ms;
}
html .header-menu a:hover { background: #e6f0e8; }
html .header-menu a.active { background: #19231c; color: #fff; }
html .header-menu a:active { transform: scale(.97); }
html .header-menu a:focus-visible { outline: 2px solid #4c9374; outline-offset: 2px; }
html[data-theme="dark"] .header-menu { background: #23372c; border-color: #3c5345; }
html[data-theme="dark"] .header-menu a { color: #e5eee7; }
html[data-theme="dark"] .header-menu a:hover { background: #385441; }
html[data-theme="dark"] .header-menu a.active { background: #dcecdf; color: #183322; }
@media (min-width:1250px) {
  html .topbar { grid-template-columns: minmax(180px,1fr) auto minmax(140px,1fr); gap: 14px; }
  html .header-menu { grid-column: 2; grid-row: 1; }
  html .top-actions { grid-column: 3; grid-row: 1; }
}
@media (min-width:1001px) and (max-width:1249px) {
  html .header-menu { grid-row: 2; grid-column: 1 / -1; }
  html .header-menu a { padding: 10px 15px; }
}
/* Panel utilitas terbuka di bawah tombol akun agar tidak menutupi menu header. */
html .topbar .top-actions .utility-disclosure { position: static; }
html .topbar .top-actions .utility-disclosure > .floating-rail { top: calc(100% + 10px); left: auto; right: 0; }
@media (max-width:1000px) { html .header-menu { display: none; } }
html[data-motion="off"] .header-menu a { transition: none; }
@media (prefers-reduced-motion:reduce) { html .header-menu a { transition:none; } }
@media print { html .header-menu { display:none !important; } }