/* Potastock 3.9.65 - one Apple-flavoured design system for every page.
   Both shells load this file: the new Jinja shell (html[data-potastock-shell])
   and the legacy built-in pages, whose own <style> block is stripped server-side.
   Frosted islands float on a tinted ground; navigation is one drawer everywhere. */

:root {
  color-scheme: light;
  --ui-ground: #eef0f5;
  --ui-ground-tint-a: rgba(23, 105, 86, .10);
  --ui-ground-tint-b: rgba(72, 118, 214, .09);
  --ui-glass: rgba(255, 255, 255, .72);
  --ui-glass-strong: rgba(255, 255, 255, .86);
  --ui-hairline: rgba(16, 30, 48, .10);
  --ui-hairline-soft: rgba(16, 30, 48, .06);
  --ui-rim: rgba(255, 255, 255, .68);
  --ui-text: #111b28;
  --ui-muted: #5f6e81;
  --ui-faint: #8b98a8;
  --ui-accent: #14705b;
  --ui-accent-ink: #0d5342;
  --ui-accent-soft: rgba(20, 112, 91, .12);
  --ui-danger: #b32d3f;
  --ui-danger-soft: rgba(179, 45, 63, .11);
  --ui-warn: #9a6212;
  --ui-warn-soft: rgba(203, 140, 30, .16);
  --ui-ok: #1a7f4b;
  --ui-ok-soft: rgba(26, 127, 75, .13);
  --ui-shadow: 0 1px 2px rgba(16, 30, 48, .05), 0 12px 34px rgba(16, 30, 48, .07);
  --ui-shadow-lift: 0 2px 6px rgba(16, 30, 48, .07), 0 24px 60px rgba(16, 30, 48, .13);
  --ui-radius: 18px;
  --ui-radius-sm: 11px;
  --ui-blur: saturate(180%) blur(22px);
  --ui-ease: cubic-bezier(.32, .72, 0, 1);
  --ui-bell: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/><path d='M13.7 21a2 2 0 0 1-3.4 0'/></svg>") center / contain no-repeat;
  --ui-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Legacy token names kept so older rules keep resolving. */
  --stock-bg: var(--ui-ground); --stock-card: var(--ui-glass); --stock-text: var(--ui-text);
  --stock-muted: var(--ui-muted); --stock-line: var(--ui-hairline); --stock-primary: var(--ui-accent);
  --stock-soft: var(--ui-accent-soft); --stock-field: var(--ui-glass-strong);
}

body.dark-mode, body.dark {
  color-scheme: dark;
  --ui-ground: #0b1016;
  --ui-ground-tint-a: rgba(45, 190, 155, .12);
  --ui-ground-tint-b: rgba(74, 128, 224, .12);
  --ui-glass: rgba(30, 40, 52, .68);
  --ui-glass-strong: rgba(36, 47, 61, .84);
  --ui-hairline: rgba(255, 255, 255, .12);
  --ui-hairline-soft: rgba(255, 255, 255, .07);
  --ui-rim: rgba(255, 255, 255, .10);
  --ui-text: #e9eef6;
  --ui-muted: #a3b1c2;
  --ui-faint: #7d8b9c;
  --ui-accent: #43d6ac;
  --ui-accent-ink: #8ff0d1;
  --ui-accent-soft: rgba(67, 214, 172, .16);
  --ui-danger: #ff8091;
  --ui-danger-soft: rgba(255, 128, 145, .15);
  --ui-warn: #f0c070;
  --ui-warn-soft: rgba(240, 192, 112, .15);
  --ui-ok: #5cd99a;
  --ui-ok-soft: rgba(92, 217, 154, .15);
  --ui-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 40px rgba(0, 0, 0, .42);
  --ui-shadow-lift: 0 2px 8px rgba(0, 0, 0, .4), 0 28px 70px rgba(0, 0, 0, .55);
}

/* ---------- ground ---------- */
html { min-height: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  font: 15px/1.55 var(--ui-font);
  color: var(--ui-text);
  background: var(--ui-ground);
  background-image:
    radial-gradient(1100px 620px at 12% -8%, var(--ui-ground-tint-a), transparent 62%),
    radial-gradient(980px 560px at 92% 4%, var(--ui-ground-tint-b), transparent 58%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
a { color: var(--ui-accent-ink); }

/* ---------- frosted header ----------
   Scoped away from .stock-navigation: the drawer is also a <nav> directly
   inside <body>, and these header rules were giving it align-items:center
   and justify-content:space-between, which stretched the gaps between menu
   items to fill the panel and made them differ with screen height. */
.stock-header, body > nav:not(.stock-navigation) {
  position: sticky; top: 0; z-index: 900;
  display: flex; align-items: center; gap: 16px;
  padding: 12px clamp(14px, 3vw, 34px);
  background: var(--ui-glass-strong);
  -webkit-backdrop-filter: var(--ui-blur); backdrop-filter: var(--ui-blur);
  border-bottom: 1px solid var(--ui-hairline-soft);
  flex-shrink: 0;
}
body > nav:not(.stock-navigation) { justify-content: space-between; }
body > nav:not(.stock-navigation) > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
body > nav:not(.stock-navigation) > div:first-child > span { font-size: 16px; font-weight: 640; letter-spacing: -.3px; }
body > nav:not(.stock-navigation) .nav-icons { gap: 12px; }
body > nav:not(.stock-navigation) .notif-bell { font-size: 18px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ui-text); font-size: 19px; font-weight: 640; letter-spacing: -.4px; text-decoration: none; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--ui-accent-soft); color: var(--ui-accent); }
.workspace-context { display: flex; flex-direction: column; padding-left: 16px; margin-left: 2px; border-left: 1px solid var(--ui-hairline); font-size: 12.5px; min-width: 0; }
.workspace-context strong { font-size: 13.5px; font-weight: 620; overflow-wrap: anywhere; }
.workspace-context span { color: var(--ui-muted); }
.stock-header > #theme { margin-left: auto; }
.stock-header .nav-icons { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.stock-header .notif-container, .notif-container { position: relative; cursor: pointer; display: grid; place-items: center; }
.notif-bell { font-size: 18px; line-height: 1; }
.notif-badge {
  position: absolute; top: -3px; right: -5px; display: none;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  font-size: 10px; font-weight: 720; line-height: 17px; text-align: center;
}
.notif-dropdown {
  display: none; position: absolute; right: 0; top: 46px; z-index: 1200;
  width: min(330px, 86vw); max-height: 420px; overflow-y: auto; padding: 8px 0;
}
.notif-header { padding: 4px 14px 10px; font-size: 12.5px; }
.notif-item { padding: 9px 14px; font-size: 12.5px; line-height: 1.45; }
.notif-item strong { display: block; margin-bottom: 2px; font-weight: 640; }
.notif-item > div { color: var(--ui-muted) !important; font-size: 12px; }
.notif-item.habis strong, .notif-item.overdue strong { color: var(--ui-danger); }
.notif-item.menipis strong, .notif-item.warning strong { color: var(--ui-warn); }
.empty-notif { padding: 14px; text-align: center; font-size: 12.5px; color: var(--ui-muted); }

.icon-button, body > nav:not(.stock-navigation) .icon-btn, body > nav:not(.stock-navigation) #open-nav-btn, body > nav:not(.stock-navigation) #dark-mode-toggle, body > nav:not(.stock-navigation) #refresh-btn {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--ui-hairline); border-radius: 11px;
  background: var(--ui-glass); color: var(--ui-accent);
  font-size: 17px; line-height: 1; cursor: pointer;
  flex-shrink: 0; transition: background .16s, transform .16s var(--ui-ease);
}
.icon-button:hover, body > nav:not(.stock-navigation) .icon-btn:hover, body > nav:not(.stock-navigation) #open-nav-btn:hover, body > nav:not(.stock-navigation) #dark-mode-toggle:hover { background: var(--ui-accent-soft); }
.icon-button:active { transform: scale(.94); }
/* Match the brand mark so every header control reads at a glance in both themes.
   The generic "body.dark-mode button" rule below is more specific than a lone
   .icon-button, so these need the descendant form to win it back. */
.icon-button, .stock-header .notif-container { color: var(--ui-accent); }
body.dark-mode .icon-button, body.dark-mode .stock-header .notif-container { color: var(--ui-accent); }

/* The built-in pages rewrite the toggle's text to a sun or moon emoji on every
   click. Drawing the glyph from CSS makes the control immune to that. The
   shrunken original text still forms its own grid item, which pushed the glyph
   off centre, so the glyph is taken out of flow and fills the button instead. */
#theme, #dark-mode-toggle { position: relative; font-size: 0 !important; }
#theme::before, #dark-mode-toggle::before {
  content: "\25D0";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
}

/* One monochrome bell, tinted by currentColor like the other header icons,
   instead of the multicolour emoji the legacy markup ships. */
.notif-bell {
  display: block; width: 19px; height: 19px; font-size: 0 !important;
  background-color: currentColor;
  -webkit-mask: var(--ui-bell); mask: var(--ui-bell);
}

/* ---------- one drawer for every page ---------- */
.nav-scrim {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(10, 18, 28, .34);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ui-ease);
  border: 0; padding: 0; margin: 0;
}
.navigation-open .nav-scrim { opacity: 1; pointer-events: auto; }

html[data-potastock-shell] .stock-navigation {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 1500;
  width: min(288px, 84vw);
  display: flex; flex-direction: column; gap: 2px;
  padding: 74px 14px 20px;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--ui-glass-strong);
  -webkit-backdrop-filter: var(--ui-blur); backdrop-filter: var(--ui-blur);
  border-right: 1px solid var(--ui-hairline);
  box-shadow: var(--ui-shadow-lift);
  transform: translateX(-102%);
  transition: transform .34s var(--ui-ease);
}
html[data-potastock-shell] .navigation-open .stock-navigation { transform: none; }
/* One rhythm for both drawers. Spacing comes from the container gap alone, never
   from item margins, because each built-in page ships its own .sidebar a margin
   and line-height -- Opname's 3px/1.25 against everyone else's -- and those would
   otherwise give every page a slightly different row pitch. */
.stock-navigation a, .sidebar a {
  display: block; margin: 0 !important;
  padding: 10px 13px !important; border-radius: 10px; text-align: center;
  font-size: 14px !important; line-height: 1.45 !important;
  font-weight: 550; color: var(--ui-text); text-decoration: none;
  transition: background .14s;
}
.stock-navigation a:hover { background: var(--ui-hairline-soft); }
.stock-navigation a[aria-current="page"] { background: var(--ui-accent-soft); color: var(--ui-accent-ink); font-weight: 640; }
.nav-heading, .sidebar h3 {
  margin: 12px 0 4px !important; padding: 0 13px;
  font-size: 10.5px !important; line-height: 1.4; letter-spacing: 1.4px;
  text-transform: uppercase; font-weight: 720; color: var(--ui-faint) !important;
  text-align: center !important;
}
.nav-heading:first-child, .sidebar h3:first-of-type { margin-top: 0 !important; }
.nav-close { position: absolute; top: 16px; right: 14px; }

/* Legacy drawer, same skin and now the same mechanics. Its own script opens it by
   writing an inline width, but a width-collapsed box still occupies its padding
   and border -- 14 + 14 + 1 px of drawer left showing down the left edge. Pinning
   the width here makes those inline writes inert and slides the panel fully off
   screen instead; body.navigation-open is set by the script injected alongside. */
.sidebar {
  height: 100%; position: fixed; z-index: 1500; top: 0; left: 0;
  width: min(288px, 84vw) !important;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 2px;
  padding: 74px 14px 20px !important;
  background: var(--ui-glass-strong) !important;
  -webkit-backdrop-filter: var(--ui-blur); backdrop-filter: var(--ui-blur);
  border-right: 1px solid var(--ui-hairline);
  box-shadow: var(--ui-shadow-lift);
  transform: translateX(-102%);
}
.navigation-open .sidebar { transform: none; }

/* Off-screen panels stay out of the tab order; visibility flips only once the
   slide has finished so the closing animation is still visible. */
.sidebar, html[data-potastock-shell] .stock-navigation {
  visibility: hidden;
  transition: transform .34s var(--ui-ease), visibility 0s linear .34s;
}
.navigation-open .sidebar,
html[data-potastock-shell] .navigation-open .stock-navigation {
  visibility: visible;
  transition: transform .34s var(--ui-ease), visibility 0s;
}
.sidebar a { color: var(--ui-text) !important; white-space: nowrap; }
.sidebar a:hover { background: var(--ui-hairline-soft) !important; color: var(--ui-text) !important; }
.sidebar a[aria-current="page"] { background: var(--ui-accent-soft) !important; color: var(--ui-accent-ink) !important; font-weight: 640; }
.sidebar .closebtn {
  position: absolute; top: 14px; right: 14px; margin: 0 !important; padding: 0 !important;
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 11px; border: 1px solid var(--ui-hairline);
  background: var(--ui-glass); color: var(--ui-text) !important;
  font-size: 20px !important; line-height: 1; text-decoration: none;
}
.sidebar hr { border: 0; border-top: 1px solid var(--ui-hairline); margin: 10px 22px; }
.sidebar > div { color: var(--ui-faint) !important; font-size: 10.5px !important; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 720; padding: 12px 0 5px !important; text-align: center; }

/* ---------- page canvas ---------- */
#stock-main, body > #main-content, body > main {
  flex: 1 0 auto; width: 100%; max-width: 1320px;
  margin: 0 auto; padding: clamp(20px, 3vw, 34px) clamp(14px, 3vw, 34px) 46px;
  min-width: 0;
}
.auth-screen #stock-main { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.auth-screen #notice { width: 100%; max-width: 430px; }

h1 { margin: 0 0 8px; font-size: clamp(23px, 2.4vw, 29px); line-height: 1.2; letter-spacing: -.6px; font-weight: 680; }
h2 { margin: 0 0 16px; font-size: 18px; letter-spacing: -.25px; font-weight: 640; }
h3 { font-size: 15.5px; font-weight: 640; letter-spacing: -.15px; }
p { color: var(--ui-muted); margin: 0 0 16px; }
small, .muted { color: var(--ui-muted); }

/* ---------- islands ---------- */
.card, .panel, .auth-card, .modal-content, .warning-box, .notif-dropdown, .pill {
  background: var(--ui-glass);
  -webkit-backdrop-filter: var(--ui-blur); backdrop-filter: var(--ui-blur);
  border: 1px solid var(--ui-rim);
  box-shadow: var(--ui-shadow);
}
.card, .panel {
  margin: 0 0 20px; padding: clamp(18px, 2vw, 24px);
  border-radius: var(--ui-radius);
  border-top: 1px solid var(--ui-rim) !important;
}
.card:last-child, .panel:last-child { margin-bottom: 0; }
.auth-card { width: 100%; max-width: 430px; padding: 30px; border-radius: 22px; box-shadow: var(--ui-shadow-lift); }
.narrow { max-width: 470px; margin: 32px auto; }
.eyebrow { display: block; font-size: 10px; letter-spacing: 1.6px; font-weight: 720; color: var(--ui-accent); margin-bottom: 12px; text-transform: uppercase; }
.auth-heading h1 { font-size: 26px !important; }
.auth-heading p { font-size: 14px; line-height: 1.6; margin-bottom: 24px !important; }
.auth-form { display: grid; gap: 16px; }
.auth-bottom { display: flex; flex-direction: column; align-items: center; gap: 6px; border-top: 1px solid var(--ui-hairline); margin-top: 24px; padding-top: 20px; font-size: 13px; text-align: center; color: var(--ui-muted); }
.auth-bottom a, .registration-link { color: var(--ui-accent-ink); text-decoration: none; font-weight: 640; }
.auth-bottom a:hover { text-decoration: underline; }

/* ---------- controls ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-group { margin-bottom: 14px; }
label { font-weight: 580; font-size: 13px; color: var(--ui-text); display: block; margin-bottom: 5px; }
.field label, .checks label { margin-bottom: 0; }
input, select, textarea, button { font-family: inherit; }
input, select, textarea {
  width: 100%; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--ui-hairline); border-radius: var(--ui-radius-sm);
  background: var(--ui-glass-strong); color: var(--ui-text);
  font-size: 14px; line-height: 1.5;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--ui-faint); }
:is(input, select, textarea):focus { outline: none; background: var(--ui-glass-strong); border-color: var(--ui-accent); box-shadow: 0 0 0 3.5px var(--ui-accent-soft); }
:is(a, button):focus-visible { outline: 2.5px solid var(--ui-accent); outline-offset: 3px; }
textarea { min-height: 78px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--ui-accent); }
.field small { font-size: 12px; line-height: 1.5; }

button, .button, input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  cursor: pointer; padding: 10px 16px; width: auto;
  border: 1px solid transparent; border-radius: var(--ui-radius-sm);
  background: var(--ui-accent); color: #fff;
  font-size: 14px; font-weight: 620; line-height: 1.45; text-decoration: none;
  transition: filter .15s, transform .15s var(--ui-ease);
}
body.dark-mode button, body.dark-mode .button, body.dark-mode input[type="submit"] { color: #07231c; }
button:hover, .button:hover { filter: brightness(1.06); }
button:active { transform: scale(.975); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.secondary { background: var(--ui-glass-strong) !important; border-color: var(--ui-hairline) !important; color: var(--ui-text) !important; }
.danger { background: var(--ui-danger) !important; color: #fff !important; }
.auth-submit { width: 100%; padding: 12px; margin-top: 2px; }
.actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 16px; }
/* Legacy pages set their own column ratio (a narrow form beside a wide table);
   keep it on desktop and only take over when it stops fitting. */
.grid-container { gap: 20px; align-items: start; }
/* Grid and flex items default to min-width:auto, so they refuse to shrink below
   their content. The wide tables inside carry min-width:720px, which pushed the
   whole column -- and with it the page -- past the viewport on a phone. Allowing
   the item to shrink hands the overflow back to the table's own scroller, which
   is where it belongs. */
.grid-container > *, .grid > *, .hero > * { min-width: 0; }
@media (max-width: 900px) { .grid-container { grid-template-columns: 1fr !important; } }
.checks { display: flex; flex-wrap: wrap; gap: 12px; }
.checks label { display: flex; align-items: center; gap: 7px; }
.password-field { position: relative; }
.password-field input { padding-right: 104px !important; }
.password-toggle { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); background: none !important; color: var(--ui-muted) !important; padding: 6px 8px; font-size: 12px; border: 0; box-shadow: none; }
.pill { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; border-radius: var(--ui-radius-sm); padding: 8px 11px; }
.pill button { font-size: 12px; padding: 5px 9px; }

/* ---------- tables ---------- */
.table-wrap { max-width: 100%; overflow-x: auto; margin-top: 16px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; background: transparent; }
th, td { text-align: left; padding: 11px 10px; border: 0; border-bottom: 1px solid var(--ui-hairline-soft); vertical-align: middle; color: var(--ui-text); }
th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 680; color: var(--ui-muted); background: transparent; white-space: nowrap; border-bottom: 1px solid var(--ui-hairline); }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--ui-hairline-soft); }
td input, td select { min-width: 112px; }
td button { padding: 6px 10px; margin: 2px; font-size: 12.5px; }
.item-select { min-width: 240px; }
.summary { color: var(--ui-muted); font-size: 13px; }

/* ---------- status, notices, overlays ---------- */
.message, .flash {
  margin: 0 0 18px; padding: 12px 14px; border-radius: var(--ui-radius-sm);
  background: var(--ui-accent-soft); color: var(--ui-accent-ink);
  border: 1px solid var(--ui-hairline); font-size: 13px; white-space: pre-wrap;
}
.message.error { background: var(--ui-danger-soft); color: var(--ui-danger); border-color: transparent; }
.message:empty, .flash:empty { display: none; }
.stok-aman, .stok-kritis, .stok-warning {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 640; border: 0;
}
.stok-aman { background: var(--ui-ok-soft); color: var(--ui-ok); }
.stok-kritis { background: var(--ui-danger-soft); color: var(--ui-danger); }
.stok-warning { background: var(--ui-warn-soft); color: var(--ui-warn); }
.warning-box { padding: 13px 15px; border-radius: var(--ui-radius-sm); background: var(--ui-warn-soft) !important; border-color: transparent !important; }
.warning-text { color: var(--ui-warn) !important; }
.modal { background: rgba(10, 18, 28, .38); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-content { border-radius: var(--ui-radius); padding: clamp(20px, 2.4vw, 28px); box-shadow: var(--ui-shadow-lift); border-top: 1px solid var(--ui-rim) !important; }
.toast-msg, .toast { border-radius: var(--ui-radius-sm) !important; background: var(--ui-glass-strong) !important; color: var(--ui-text) !important; border: 1px solid var(--ui-rim); box-shadow: var(--ui-shadow-lift); -webkit-backdrop-filter: var(--ui-blur); backdrop-filter: var(--ui-blur); }
.notif-dropdown { border-radius: var(--ui-radius); overflow: hidden; box-shadow: var(--ui-shadow-lift); }
.notif-header { border-bottom: 1px solid var(--ui-hairline) !important; color: var(--ui-text) !important; font-weight: 640; }
.notif-item { border-bottom: 1px solid var(--ui-hairline-soft) !important; }
.notif-item:hover { background: var(--ui-hairline-soft) !important; }
.notif-badge { background: var(--ui-danger) !important; color: #fff !important; }
.user-chip { color: var(--ui-muted) !important; font-size: 13px; font-weight: 550; }

/* ---------- legacy dark mode ----------
   The built-in pages ship their own body.dark-mode rules, which outrank plain
   element selectors. Same specificity, loaded later, so these win them back. */
body.dark-mode, body.dark-mode nav:not(.stock-navigation), body.dark-mode .panel, body.dark-mode table,
body.dark-mode .modal-content, body.dark-mode .notif-dropdown, body.dark-mode .toast-msg {
  background-color: transparent;
  color: var(--ui-text);
  border-color: var(--ui-hairline);
}
body.dark-mode { background: var(--ui-ground); }
body.dark-mode nav:not(.stock-navigation) { background: var(--ui-glass-strong); border-bottom: 1px solid var(--ui-hairline-soft); }
body.dark-mode .panel, body.dark-mode .modal-content, body.dark-mode .notif-dropdown, body.dark-mode .toast-msg { background: var(--ui-glass); border: 1px solid var(--ui-rim); box-shadow: var(--ui-shadow); }
body.dark-mode th { background: transparent; color: var(--ui-muted); border-color: var(--ui-hairline); }
body.dark-mode td { color: var(--ui-text); border-color: var(--ui-hairline-soft); }
body.dark-mode tbody tr:hover { background-color: var(--ui-hairline-soft); }
body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background: var(--ui-glass-strong); color: var(--ui-text); border-color: var(--ui-hairline); }
body.dark-mode .stok-aman { background: var(--ui-ok-soft); color: var(--ui-ok); border-color: transparent; }
body.dark-mode .stok-kritis { background: var(--ui-danger-soft); color: var(--ui-danger); border-color: transparent; }
body.dark-mode .stok-warning { background: var(--ui-warn-soft); color: var(--ui-warn); border-color: transparent; }
body.dark-mode .warning-box { background: var(--ui-warn-soft); border-color: transparent; }
body.dark-mode .warning-text { color: var(--ui-warn) !important; }
body.dark-mode .notif-header { color: var(--ui-text) !important; border-bottom-color: var(--ui-hairline) !important; }
body.dark-mode .notif-item { border-bottom-color: var(--ui-hairline-soft) !important; }
body.dark-mode .notif-item:hover { background-color: var(--ui-hairline-soft) !important; }
body.dark-mode nav:not(.stock-navigation) button, body.dark-mode nav:not(.stock-navigation) span, body.dark-mode nav:not(.stock-navigation) div { color: var(--ui-text) !important; }
body.dark-mode h2, body.dark-mode h3, body.dark-mode label { color: var(--ui-text) !important; }
body.dark-mode p { color: var(--ui-muted) !important; }

/* Audit of the built-in stylesheets found these painted navy or mid-grey on what
   is now a dark surface. Class selectors there, so a descendant selector wins. */
body.dark-mode .item-name, body.dark-mode .menu-nama, body.dark-mode .summary-total,
body.dark-mode .dynamic-title, body.dark-mode .badge-aksi, body.dark-mode .title,
body.dark-mode .hero-title, body.dark-mode strong, body.dark-mode b { color: var(--ui-text); }
body.dark-mode .item-price, body.dark-mode .sub, body.dark-mode .hero-subtitle,
body.dark-mode .muted, body.dark-mode small { color: var(--ui-muted); }
body.dark-mode .stok-in, body.dark-mode .laba-tinggi, body.dark-mode .menu-harga { color: var(--ui-ok); }
body.dark-mode .stok-out, body.dark-mode .laba-rendah, body.dark-mode .text-red,
body.dark-mode .btn-clear { color: var(--ui-danger); }
body.dark-mode .stok-transfer, body.dark-mode .btn-kategori { color: #7fb8ff; }
body.dark-mode .badge-aksi { background: var(--ui-hairline-soft); }
body.dark-mode .komposisi-box, body.dark-mode .komposisi-list {
  background: var(--ui-glass) !important; border-color: var(--ui-rim) !important; color: var(--ui-text);
}

/* ---------- footer ---------- */
#stock-footer {
  flex: 0 0 auto; margin-top: auto; position: static !important;
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px clamp(14px, 3vw, 34px);
  border-top: 1px solid var(--ui-hairline-soft);
  color: var(--ui-muted) !important; background: transparent;
  font: 12px/1.5 var(--ui-font);
}
#stock-footer .footer-version { margin-left: 5px; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .stock-header, body > nav:not(.stock-navigation) { gap: 10px; padding: 10px 14px; }
  .workspace-context { padding-left: 12px; font-size: 12px; }
  #stock-main, body > #main-content, body > main { padding: 18px 14px 32px; }
  .card, .panel { padding: 17px; border-radius: 15px; }
  .auth-card { padding: 24px 20px; border-radius: 18px; }
  #stock-footer { font-size: 11px; padding: 14px; flex-direction: column; gap: 4px; }
}

/* Portrait phones. The header runs out of room first: hamburger, mark, wordmark,
   warehouse, user, bell and theme do not fit across ~380px, and the wordmark is
   the one piece the carton mark already says. The built-in pages also lay form
   fields out in a non-wrapping flex row, which halves each field instead. */
@media (max-width: 560px) {
  .brand span:last-child { display: none; }
  .brand { gap: 0; }
  .stock-header, body > nav:not(.stock-navigation) { gap: 8px; padding: 9px 12px; }
  .workspace-context { padding-left: 10px; font-size: 11.5px; }
  .workspace-context strong { font-size: 12.5px; }
  .stock-header .nav-icons { gap: 6px; }
  .form-row { flex-wrap: wrap; }
  .form-row .form-group { flex: 1 1 100%; min-width: 0; }
  #stock-main, body > #main-content, body > main { padding: 16px 12px 28px; }
  .card, .panel { padding: 15px; border-radius: 14px; }
  h1 { font-size: 21px; }
  .notif-dropdown { width: min(320px, 90vw); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .stock-header, body > nav:not(.stock-navigation), .stock-navigation, .sidebar, .nav-scrim, #stock-footer, .no-print, button { display: none !important; }
  body, #stock-main, #main-content, .card, .panel { display: block !important; background: #fff !important; color: #000 !important; min-height: 0 !important; box-shadow: none !important; backdrop-filter: none !important; border: 1px solid #ddd !important; }
  #stock-main, #main-content { padding: 0; max-width: none; }
  .table-wrap { overflow: visible !important; }
}
