/* Lisa Jaya Admin Hub: comfortable reading, 6 October 2026. */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { line-height: 1.55; }
#root { font-size: 16px; line-height: 1.55; }
#root .text-xs, #root .text-sm { font-size: 16px; line-height: 1.5; }
#root [class~="text-[8px]"], #root [class~="text-[9px]"],
#root [class~="text-[10px]"] { font-size: 13px; line-height: 1.5; }
#root [class~="text-[11px]"], #root [class~="text-[12px]"] { font-size: 14px; line-height: 1.5; }
#root .text-lg { font-size: 22px; line-height: 1.4; }
#root .text-xl { font-size: 26px; line-height: 1.35; }
#root .text-2xl { font-size: 30px; line-height: 1.3; }
#root .text-3xl { font-size: 34px; line-height: 1.25; }
#root main h2 { font-size: clamp(24px, 2vw, 30px); line-height: 1.3; }
#root main h3[class] { font-size: 20px; line-height: 1.4; }
#root main p { line-height: 1.65; }
#root main :where(button,input,select,textarea),
#root header button { font-size: 16px; line-height: 1.4; }
#root :where(button,input,select) { min-height: 44px; }
#root :where(input[type="checkbox"],input[type="radio"]) { min-height: auto; }
#root :where(input,select,textarea) { font-size: 16px; }
#root :where(button,a,input,select,textarea):focus-visible {
  outline: 3px solid #6366f1; outline-offset: 3px;
}
#root button svg { flex-shrink: 0; }
#root aside[class~="w-64"] { width: 296px; }
#root aside nav { padding: 16px 12px; }
#root aside nav button { min-height: 48px; gap: 10px; padding: 12px; text-align: left; }
#root aside nav button > div { min-width: 0; }
#root aside nav button .truncate { overflow: visible; white-space: normal; text-overflow: clip; }
#root aside nav button svg { width: 20px; height: 20px; }
#root aside nav button span.truncate { font-size: 16px; line-height: 1.4; }
#root aside .text-slate-400 { color: #cbd5e1; }
#root aside .text-slate-500 { color: #94a3b8; }
#root aside h1 { font-size: 18px; }
#root aside[class~="w-20"] nav { padding-inline: 10px; }
#root aside[class~="w-20"] nav button { justify-content: center; padding-inline: 8px; }
#root #sidebar-api-status { line-height: 1.6; }
#root header { height: auto; min-height: 76px; padding-block: 12px; gap: 16px; }
#root header > div:first-child { flex: 1; min-width: 0; }
#root header > div:last-child { flex-shrink: 0; }
#root header [aria-label="Pilih gudang yang ingin dilihat"] { gap: 8px; padding-block: 2px; }
#root header [aria-label="Pilih gudang yang ingin dilihat"] button { padding: 10px 12px; }
#root #header-user-role-dropdown .truncate { max-width: 180px; }
#root #role-workspace-banner { padding: 20px; }
#root #role-workspace-banner button { padding: 10px 14px; }
#root #role-workspace-banner > div:first-child { flex-wrap: wrap; }
#root #role-workspace-banner > div:first-child > div:first-child { flex-shrink: 0; }
#root #role-workspace-banner .overflow-x-auto { flex: 0 1 auto; flex-wrap: wrap; overflow: visible; gap: 8px; }
#root #role-workspace-banner .overflow-x-auto > span { white-space: nowrap; }
#root #role-workspace-banner .line-clamp-1 { display: block; overflow: visible; -webkit-line-clamp: unset; }
#root #role-workspace-banner .grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); }
#root #role-workspace-banner .flex-1 { min-width: 0; }
#root main { scrollbar-gutter: stable; padding-bottom: 140px; }
#root main > div:first-child { flex-wrap: wrap; gap: 8px 16px; }
#root #dashboard-container > section:first-child > div > div { flex-wrap: wrap; }
#root #dashboard-container > .grid > * { min-width: 0; }
#root #dashboard-container > .grid > div > .break-words { font-size: clamp(24px, 1.85vw, 30px); font-variant-numeric: tabular-nums; }
#root #dashboard-container [class~="text-[11px]"] { letter-spacing: .025em; }
#root #dashboard-container .grid .flex.justify-between { flex-wrap: wrap; }
#root :where(td,th) { padding: 12px 14px; font-size: 16px; line-height: 1.5; }
#root main .text-slate-400 { color: #64748b; }
#root main .text-slate-500 { color: #475569; }
#root header .text-slate-400 { color: #64748b; }
#root main :is(.bg-slate-900,.bg-slate-950,[class~="from-slate-950"]) .text-slate-400 { color: #cbd5e1; }
#root main :is(.bg-slate-900,.bg-slate-950,[class~="from-slate-950"]) .text-slate-500 { color: #94a3b8; }
html.dark #root main .text-slate-400, html.dark #root header .text-slate-400 { color: #cbd5e1; }
html.dark #root main .text-slate-500 { color: #94a3b8; }
@media (min-width: 1024px) {
  #root #role-workspace-banner .overflow-x-auto { flex: 1 1 620px; }
}
@media (min-width: 1024px) and (max-width: 1699px) {
  #root #header-user-role-dropdown [class~="md:flex"] { display: none; }
  #root #dashboard-container > .grid[class~="xl:grid-cols-4"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #root #dashboard-container > .grid[class~="xl:grid-cols-2"] { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 1023px) {
  #root main { padding: 20px 16px 140px; }
  #root #role-workspace-banner { padding: 16px; }
  #root #role-workspace-banner > div { flex-wrap: wrap; }
}
@media (max-width: 639px) {
  #root header { flex-wrap: wrap; gap: 10px; padding: 12px; }
  #root header > div:first-child { flex-basis: 100%; }
  #root header > div:last-child { margin-left: auto; }
  #root header [aria-label="Pilih gudang yang ingin dilihat"] { flex: 1; }
  #root header [aria-label="Pilih gudang yang ingin dilihat"] button > .sm\:hidden { display: none; }
  #root header [aria-label="Pilih gudang yang ingin dilihat"] button > .sm\:inline { display: inline; }
  #root main { padding-inline: 12px; }
  #root main h2 { font-size: 24px; }
  #root #dashboard-container > section:first-child > div > div { align-items: flex-start; }
  #root #dashboard-container > section:first-child > button { align-self: flex-start; }
  #root #role-workspace-banner [class~="text-[10px]"] { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  #root *, #root *::before, #root *::after { animation: none !important; transition: none !important; }
}
/* Keep connection settings inside the viewport with its own scroll area. */
#root .fixed.inset-0.z-50.grid.place-items-center:has(> .max-w-2xl) {
  z-index: 110;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
#root .fixed.inset-0.z-50.grid.place-items-center > .max-w-2xl {
  min-height: 0;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  overflow-wrap: anywhere;
}
#root .fixed.inset-0.z-50.grid.place-items-center > .max-w-2xl > div:first-child {
  position: sticky;
  top: -24px;
  z-index: 2;
  margin-top: -24px;
  padding-top: 24px;
  background: inherit;
}
#root .fixed.inset-0.z-50.grid.place-items-center > .max-w-2xl > div:first-child > div {
  min-width: 0;
}
#root .fixed.inset-0.z-50.grid.place-items-center > .max-w-2xl button[aria-label="Tutup"] {
  flex-shrink: 0;
  min-width: 44px;
}
#root .fixed.inset-0.z-50.grid.place-items-center > .max-w-2xl button { overflow-wrap: normal; }
#root .fixed.inset-0.z-50.grid.place-items-center > .max-w-2xl [class~="sm:flex-row"] > button { flex-shrink: 0; }
#root .fixed.inset-0.z-50.grid.place-items-center > .max-w-2xl [class~="sm:flex-row"] > div { min-width: 0; }
@media (max-width: 639px) {
  #root .fixed.inset-0.z-50.grid.place-items-center > .max-w-2xl { padding: 16px; border-radius: 20px; }
  #root .fixed.inset-0.z-50.grid.place-items-center > .max-w-2xl > div:first-child {
    top: -16px; margin-top: -16px; padding-top: 16px;
  }
  #root .fixed.inset-0.z-50.grid.place-items-center > .max-w-2xl h2 { font-size: 22px; }
  #root .fixed.inset-0.z-50.grid.place-items-center > .max-w-2xl > div:first-child .text-xs { font-size: 13px; }
  #root .fixed.inset-0.z-50.grid.place-items-center > .max-w-2xl > div:first-child p { font-size: 14px; line-height: 1.5; }
}
/* Mobile settings access and a drawer that fits the usable screen height. */
#root #btn-mobile-connection-settings { min-height: 44px; white-space: nowrap; }
#root #btn-mobile-menu, #root #btn-theme-toggle,
#root #header-user-role-dropdown { min-width: 44px; }
@media (max-width: 1023px) {
  #root > div.flex.h-screen,
  #root > div.flex.h-screen > div.flex-1 { height: 100vh; height: 100dvh; }
  #root header { flex-wrap: wrap; }
  #root #mobile-navigation-drawer { z-index: 110; height: 100vh; height: 100dvh; overflow: hidden; }
  #root #mobile-navigation-drawer > .relative { height: 100%; min-height: 0; }
  #root #mobile-navigation-drawer aside {
    width: min(296px,calc(100vw - 48px));
    height: 100%; min-height: 0; overflow: hidden;
  }
  #root #mobile-navigation-drawer aside > div { flex-shrink: 0; }
  #root #mobile-navigation-drawer nav {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 639px) {
  #root header > div:last-child { width: 100%; gap: 8px; }
  #root #btn-mobile-connection-settings { margin-right: auto; padding-inline: 10px; gap: 6px; }
  #root #mobile-navigation-drawer aside > div:first-child { padding: 16px; }
  #root #mobile-navigation-drawer aside > div:last-child { padding: 12px; }
}