/* 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: #f7effa;
  --ui-ground-tint-a: rgba(245, 121, 8, .18);
  --ui-ground-tint-b: rgba(100, 38, 129, .17);
  --ui-glass: rgba(255, 248, 240, .78);
  --ui-glass-strong: rgba(255, 250, 244, .91);
  --ui-hairline: rgba(75, 22, 103, .14);
  --ui-hairline-soft: rgba(75, 22, 103, .08);
  --ui-rim: rgba(255, 255, 255, .76);
  --ui-text: #2d1838;
  --ui-muted: #715d78;
  --ui-faint: #9a849f;
  --ui-accent: #642681;
  --ui-accent-ink: #4b1667;
  --ui-accent-soft: rgba(100, 38, 129, .13);
  --ui-orange: #f57908;
  --ui-orange-deep: #df4e08;
  --ui-orange-soft: rgba(245, 121, 8, .14);
  --ui-danger: #b32d3f;
  --ui-danger-soft: rgba(179, 45, 63, .11);
  --ui-warn: #c75608;
  --ui-warn-soft: rgba(245, 121, 8, .16);
  --ui-ok: #1a7f4b;
  --ui-ok-soft: rgba(26, 127, 75, .13);
  --ui-shadow: 0 1px 2px rgba(75, 22, 103, .05), 0 12px 34px rgba(75, 22, 103, .09);
  --ui-shadow-lift: 0 2px 6px rgba(75, 22, 103, .08), 0 24px 60px rgba(106, 38, 128, .16);
  --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: #160b1d;
  --ui-ground-tint-a: rgba(245, 121, 8, .14);
  --ui-ground-tint-b: rgba(133, 55, 168, .22);
  --ui-glass: rgba(43, 22, 52, .74);
  --ui-glass-strong: rgba(52, 26, 62, .9);
  --ui-hairline: rgba(255, 255, 255, .12);
  --ui-hairline-soft: rgba(255, 255, 255, .07);
  --ui-rim: rgba(255, 255, 255, .10);
  --ui-text: #fff4e8;
  --ui-muted: #d4bdcf;
  --ui-faint: #a78da8;
  --ui-accent: #c989ee;
  --ui-accent-ink: #f0ccff;
  --ui-accent-soft: rgba(201, 137, 238, .17);
  --ui-orange: #ff9a28;
  --ui-orange-deep: #ff6a00;
  --ui-orange-soft: rgba(255, 154, 40, .17);
  --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);
}

/* Light mode scrollbars: a restrained XCrepes purple thumb on a pale-purple
   track, including the page viewport, scrollable tables, and drawers. */
html:not(:has(body.dark-mode)):not(:has(body.dark)),
body:not(.dark-mode):not(.dark),
body:not(.dark-mode):not(.dark) * {
  scrollbar-color: var(--ui-accent) rgba(100, 38, 129, .07);
  scrollbar-width: thin;
}
html:not(:has(body.dark-mode)):not(:has(body.dark))::-webkit-scrollbar,
body:not(.dark-mode):not(.dark)::-webkit-scrollbar,
body:not(.dark-mode):not(.dark) *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html:not(:has(body.dark-mode)):not(:has(body.dark))::-webkit-scrollbar-track,
body:not(.dark-mode):not(.dark)::-webkit-scrollbar-track,
body:not(.dark-mode):not(.dark) *::-webkit-scrollbar-track {
  background: rgba(100, 38, 129, .07) !important;
  border-radius: 999px;
}
html:not(:has(body.dark-mode)):not(:has(body.dark))::-webkit-scrollbar-thumb,
body:not(.dark-mode):not(.dark)::-webkit-scrollbar-thumb,
body:not(.dark-mode):not(.dark) *::-webkit-scrollbar-thumb {
  min-height: 34px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, #8b3bb0, var(--ui-accent)) padding-box !important;
}
html:not(:has(body.dark-mode)):not(:has(body.dark))::-webkit-scrollbar-thumb:hover,
body:not(.dark-mode):not(.dark)::-webkit-scrollbar-thumb:hover,
body:not(.dark-mode):not(.dark) *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #a855ca, #742993) padding-box !important;
}

/* Dark mode scrollbars: keep the track quiet and use the XCrepes orange
   only for the draggable thumb, including scrollable tables and drawers. */
html:has(body.dark-mode), html:has(body.dark) {
  --ui-orange: #ff9a28;
  --ui-orange-deep: #ff6a00;
}
html:has(body.dark-mode), html:has(body.dark),
body.dark-mode, body.dark,
body.dark-mode *, body.dark * {
  scrollbar-color: var(--ui-orange) rgba(255, 255, 255, .045);
  scrollbar-width: thin;
}
html:has(body.dark-mode)::-webkit-scrollbar,
html:has(body.dark)::-webkit-scrollbar,
body.dark-mode::-webkit-scrollbar,
body.dark::-webkit-scrollbar,
body.dark-mode *::-webkit-scrollbar,
body.dark *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html:has(body.dark-mode)::-webkit-scrollbar-track,
html:has(body.dark)::-webkit-scrollbar-track,
body.dark-mode::-webkit-scrollbar-track,
body.dark::-webkit-scrollbar-track,
body.dark-mode *::-webkit-scrollbar-track,
body.dark *::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .045) !important;
  border-radius: 999px;
}
html:has(body.dark-mode)::-webkit-scrollbar-thumb,
html:has(body.dark)::-webkit-scrollbar-thumb,
body.dark-mode::-webkit-scrollbar-thumb,
body.dark::-webkit-scrollbar-thumb,
body.dark-mode *::-webkit-scrollbar-thumb,
body.dark *::-webkit-scrollbar-thumb {
  min-height: 34px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffad3d, var(--ui-orange-deep)) padding-box !important;
}
html:has(body.dark-mode)::-webkit-scrollbar-thumb:hover,
html:has(body.dark)::-webkit-scrollbar-thumb:hover,
body.dark-mode::-webkit-scrollbar-thumb:hover,
body.dark::-webkit-scrollbar-thumb:hover,
body.dark-mode *::-webkit-scrollbar-thumb:hover,
body.dark *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffc16b, var(--ui-orange)) padding-box !important;
}

/* ---------- 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;
}
.stock-header::after, body > nav:not(.stock-navigation)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--ui-orange), var(--ui-accent) 54%, var(--ui-orange-deep));
  opacity: .78; pointer-events: none;
}
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); }
.brand-logo {
  display: block; width: 96px; height: 58px; object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(75, 22, 103, .16));
}
.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: linear-gradient(90deg, var(--ui-accent-soft), var(--ui-orange-soft));
  color: var(--ui-accent-ink); font-weight: 640;
  box-shadow: inset 3px 0 0 var(--ui-orange);
}
.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: linear-gradient(90deg, var(--ui-accent-soft), var(--ui-orange-soft)) !important;
  color: var(--ui-accent-ink) !important; font-weight: 640;
  box-shadow: inset 3px 0 0 var(--ui-orange);
}
.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;
  background-image: linear-gradient(90deg, var(--ui-orange), var(--ui-accent), var(--ui-orange-deep));
  background-repeat: no-repeat; background-size: 100% 3px; background-position: top;
}
.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);
  background-image: linear-gradient(150deg, var(--ui-orange-soft), transparent 34%, var(--ui-accent-soft));
}
.narrow { max-width: 470px; margin: 32px auto; }
.eyebrow { display: block; font-size: 10px; letter-spacing: 1.6px; font-weight: 720; color: var(--ui-orange-deep); margin-bottom: 12px; text-transform: uppercase; }
.auth-heading h1 { font-size: 26px !important; }
.auth-heading h1::after {
  content: ""; display: block; width: 64px; height: 3px; margin-top: 12px; border-radius: 99px;
  background: linear-gradient(90deg, var(--ui-orange), var(--ui-accent));
}
.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: linear-gradient(135deg, #7b319c, #52206e); color: #fff;
  box-shadow: 0 7px 18px rgba(100, 38, 129, .18);
  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: #fff; }
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-accent-soft) !important; border-color: var(--ui-hairline) !important; color: var(--ui-accent-ink) !important; box-shadow: none !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 POS controls used fixed blue and green paint. Fold them into the
   XCrepes palette without changing their checkout behaviour. */
.btn-kategori {
  background: var(--ui-glass-strong) !important; color: var(--ui-accent-ink) !important;
  border-color: var(--ui-accent) !important; box-shadow: none !important;
}
.btn-kategori.active, .btn-kategori:hover {
  background: linear-gradient(135deg, #7b319c, #52206e) !important;
  color: #fff !important; border-color: transparent !important;
}
.btn-add-sm, .btn-add-sm:hover {
  background: linear-gradient(135deg, #7b319c, #52206e) !important;
  color: #fff !important; border-color: transparent !important;
  box-shadow: 0 5px 14px rgba(100, 38, 129, .2) !important;
}
.btn-checkout { background: linear-gradient(135deg, var(--ui-orange-deep), var(--ui-orange)) !important; color: #fff !important; }
.menu-card { background: var(--ui-glass-strong) !important; border-color: var(--ui-hairline) !important; }
.menu-card:hover { border-color: var(--ui-orange) !important; }
.menu-nama, .dynamic-title, .summary-total { color: var(--ui-text) !important; }
.menu-harga { color: var(--ui-orange-deep) !important; }
.grid-container > *, .cart-panel, .cart-summary, .cart-panel .form-group {
  min-width: 0;
}
.cart-panel {
  border-top-color: var(--ui-accent) !important;
  max-height: none !important;
  overflow: hidden;
}
.cart-items {
  flex: 0 1 auto !important;
  min-height: 84px;
  max-height: min(32vh, 300px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.cart-summary { flex: 0 0 auto; width: 100%; max-width: 100%; }
.cart-panel .btn-checkout, .cart-panel .btn-clear {
  display: flex; width: 100% !important; max-width: 100%; min-width: 0;
  box-sizing: border-box; white-space: normal; overflow-wrap: anywhere;
}
.production-mode-box {
  position: relative; overflow: hidden;
  border: 1px solid rgba(100, 38, 129, .26) !important;
  background: linear-gradient(135deg, rgba(100, 38, 129, .10), rgba(245, 121, 8, .10)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .66), 0 8px 20px rgba(100, 38, 129, .07);
}
.production-mode-box::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(180deg, var(--ui-accent), var(--ui-orange));
}
.production-mode-box label {
  color: var(--ui-accent-ink) !important; letter-spacing: .01em;
}
.production-mode-box small { color: var(--ui-muted) !important; }
.production-mode-box select {
  border-color: rgba(100, 38, 129, .24) !important;
  background: var(--ui-glass-strong) !important;
  color: var(--ui-text) !important;
}
body.dark-mode .cart-panel .production-mode-box {
  border-color: rgba(201, 137, 238, .42) !important;
  background: linear-gradient(135deg, rgba(123, 49, 156, .42), rgba(82, 32, 110, .48) 62%, rgba(245, 121, 8, .16)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 28px rgba(0, 0, 0, .18);
}
body.dark-mode .cart-panel .production-mode-box label { color: #f3d5ff !important; }
body.dark-mode .cart-panel .production-mode-box small { color: #dcc7d9 !important; }
body.dark-mode .cart-panel .production-mode-box select {
  border-color: rgba(201, 137, 238, .28) !important;
  background: rgba(53, 25, 64, .92) !important;
  color: #fff4e8 !important;
}
body.dark-mode .cart-panel .btn-checkout {
  background: linear-gradient(135deg, #ffb31f 0%, #f78b0b 58%, #ed6908 100%) !important;
  color: #4b1667 !important;
  border: 2px solid #7b319c !important;
  box-shadow: 0 8px 22px rgba(245, 121, 8, .22), 0 0 0 1px rgba(123, 49, 156, .12) !important;
}
body.dark-mode .cart-panel .btn-checkout:disabled {
  opacity: .84;
}

/* Stock Opname shipped with its own blue accent system. Keep semantic success,
   warning and danger colours, but make every decorative/interactive accent
   belong to the XCrepes purple-orange palette in both themes. */
html[data-potaportal-own-theme="stock-opname-v385"] {
  --blue: var(--ui-accent);
}
html[data-potaportal-own-theme="stock-opname-v385"] .tab.active,
html[data-potaportal-own-theme="stock-opname-v385"] .btn:not(.green):not(.orange):not(.red):not(.gray) {
  background: linear-gradient(135deg, #7b319c, #52206e) !important;
  border-color: var(--ui-orange) !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(100, 38, 129, .18);
}
html[data-potaportal-own-theme="stock-opname-v385"] .stat {
  background: linear-gradient(135deg, var(--ui-accent-soft), var(--ui-orange-soft)) !important;
  border-color: rgba(100, 38, 129, .22) !important;
}
html[data-potaportal-own-theme="stock-opname-v385"] .badge.approved,
html[data-potaportal-own-theme="stock-opname-v385"] .pill {
  background: var(--ui-accent-soft) !important;
  border: 1px solid rgba(100, 38, 129, .22) !important;
  color: var(--ui-accent-ink) !important;
}
html[data-potaportal-own-theme="stock-opname-v385"] .note:not(.warning) {
  background: linear-gradient(135deg, var(--ui-accent-soft), var(--ui-orange-soft)) !important;
  border-color: rgba(100, 38, 129, .22) !important;
}
html[data-potaportal-own-theme="stock-opname-v385"] :is(input, select, textarea):focus {
  border-color: var(--ui-accent) !important;
  box-shadow: 0 0 0 4px var(--ui-accent-soft) !important;
}
html[data-potaportal-own-theme="stock-opname-v385"] tr:hover td {
  background: var(--ui-accent-soft) !important;
}
html[data-potaportal-own-theme="stock-opname-v385"] .toast-msg {
  border-left-color: var(--ui-accent) !important;
}
html[data-potaportal-own-theme="stock-opname-v385"] body.dark-mode .stat {
  background: linear-gradient(135deg, rgba(123, 49, 156, .28), rgba(245, 121, 8, .13)) !important;
  border-color: rgba(201, 137, 238, .26) !important;
}
html[data-potaportal-own-theme="stock-opname-v385"] body.dark-mode .badge.approved,
html[data-potaportal-own-theme="stock-opname-v385"] body.dark-mode .pill {
  background: rgba(201, 137, 238, .16) !important;
  border-color: rgba(201, 137, 238, .28) !important;
  color: #f0ccff !important;
}
.dynamic-row { min-width: 0; }
.dynamic-row > * { min-width: 0; }
/* 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; }
.stock-database-page > #main-content {
  max-width: 1680px;
  padding-inline: clamp(12px, 2vw, 28px);
}
.stock-database-page .grid-container {
  grid-template-columns: minmax(260px, .68fr) minmax(0, 3.32fr);
}
.stock-database-page .panel { padding: clamp(16px, 1.7vw, 22px); }
.stock-toolbar { margin: 0 0 12px; }
.stock-toolbar > label { font-size: 12px; margin-bottom: 6px; }
.stock-search-row { display: flex; align-items: center; gap: 12px; }
.stock-search-row input { flex: 1 1 320px; }
.stock-result-count { flex: 0 0 auto; color: var(--ui-muted); font-size: 12.5px; white-space: nowrap; }
.stock-sort-button {
  width: 100%; padding: 4px 0; justify-content: flex-start; gap: 5px;
  border: 0; border-radius: 5px; background: transparent !important;
  color: inherit !important; font-size: inherit; font-weight: inherit;
  letter-spacing: inherit; text-transform: inherit; box-shadow: none;
}
.stock-sort-button:hover, .stock-sort-button.is-active { color: var(--ui-accent-ink) !important; filter: none; }
.stock-sort-indicator { min-width: 11px; font-size: 12px; }
.stock-empty-row { text-align: center; color: var(--ui-muted); padding: 28px 12px; }
.stock-action-message {
  margin-top: 10px; padding: 9px 11px; border-radius: var(--ui-radius-sm);
  background: var(--ui-ok-soft); color: var(--ui-ok); font-size: 13px; font-weight: 620;
}
.stock-action-message.is-error { background: var(--ui-danger-soft); color: var(--ui-danger); }
.stock-delete-confirm {
  position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center;
  padding: 18px; background: rgba(11, 15, 25, .48); backdrop-filter: blur(12px);
}
.stock-delete-confirm-card {
  width: min(430px, calc(100vw - 32px)); padding: 24px; border-radius: 20px;
  background: var(--ui-glass-strong); color: var(--ui-text); border: 1px solid var(--ui-rim);
  box-shadow: var(--ui-shadow-lift);
}
.stock-delete-confirm-card h2 { margin-bottom: 8px; }
.stock-delete-confirm-card p { line-height: 1.55; }
.stock-delete-confirm-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
/* 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: minmax(0, 1fr) !important; }
  .cart-panel { position: static !important; top: auto !important; }
  .cart-items { max-height: 280px !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-accent-ink); background: var(--ui-accent-soft); 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; }
.item-combobox { min-width: 300px; }
.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: var(--ui-accent-soft); color: var(--ui-accent-ink); 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; }
#stock-footer .apk-download-link, .app-download a { color: var(--ui-accent); font-weight: 650; }
.app-download {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ui-hairline-soft);
  display: grid; gap: 8px; text-align: center;
}
.app-download .button { width: 100%; justify-content: center; }
.app-download small { color: var(--ui-muted); line-height: 1.45; }

@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; }
  .brand-logo { width: 84px; height: 51px; }
  #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 { gap: 0; }
  .brand-logo { width: 72px; height: 44px; }
  .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; }
  .dynamic-row { flex-wrap: wrap; }
  .dynamic-row input, .dynamic-row select { flex: 1 1 110px !important; }
  .dynamic-row .btn-remove-row { flex: 0 0 auto; }
  #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; }
}