/* ============================================================
   GUDANG.CSS — Gudang Experience Layer (V1.28.0)

   Authorized by: Doc 2 (Product Experience Blueprint) · Doc 4 Art.V (UI
   Discipline). Scoped entirely under `.gud-root`, exactly like
   engineering.css/petty-cash.css/overtime.css scope under their own
   `-root` class, so nothing here can leak into or be leaked into by the
   rest of the platform.

   VISUAL CONSISTENCY (Experience brief, explicit requirement): the token
   block below is copied from engineering.css's `.eng-root` set verbatim,
   not reinvented — same accent, same neutrals, same shadow/radius scale.
   Gudang is the newest full module after Engineering; it should read as
   Engineering's sibling, not a new product. Component recipes (card,
   button, pill, modal, drawer, table, empty-state, entry animation) are
   likewise ported from engineering.css's proven shapes. Only what Gudang
   genuinely needs and nothing else exists here (Doc 4 Art.VI — no
   premature abstraction): the Spotlight overlay, Goods In/Out line-item
   rows, and quiet-intelligence sentence cards are new because nothing
   like them exists anywhere else in the app yet.
   ============================================================ */

/* ── Tokens (scoped) — verbatim copy of .eng-root's palette ───────────── */
.gud-root {
  /* Product redesign (v1.31.24.0): Gudang no longer carries its own palette or
     fonts — every canonical token (canvas, surfaces, borders, text, status
     colours, fonts) is INHERITED from platform.css so this module renders in
     the same design language as the rest of the product. Only the module's
     own token NAMES remain, as aliases. See docs/DESIGN-SYSTEM.md §2. */
  --rail:var(--surface);
  --border-faint:color-mix(in srgb, var(--border) 60%, transparent);
  --text-dim:var(--muted); --text-faint:var(--faint); --text-ghost:color-mix(in srgb, var(--faint) 60%, transparent);
  --accent-2:color-mix(in srgb, var(--accent) 88%, white); --accent-weak:var(--accent-subtle); --accent-line:color-mix(in srgb, var(--accent) 22%, transparent);
  --crit:var(--danger); --crit-weak:var(--danger-bg);
  --c-green:var(--ok); --c-blue:var(--info); --c-amber:var(--warn);
  --c-green-weak:var(--ok-bg); --c-blue-weak:var(--info-bg); --c-amber-weak:var(--warn-bg);
  --gud-max:1180px;
  color:var(--text); font-family:var(--font-sans);
  background:transparent; /* inherits the platform canvas — never reads as a separate white panel */
  min-height:100%;
  color-scheme:light; /* native form-control chrome (focus rings, scrollbars) stays light-appropriate */
}
:root[data-theme="dark"] .gud-root {
  --accent-line:color-mix(in srgb, var(--accent) 32%, transparent);
  color-scheme:dark; /* dark-audit: was unset, so every unstyled <button>'s
    native UA text color stayed light-mode-appropriate even in dark mode —
    this is the same root cause as the three explicit fixes below, applied
    as a systemic baseline for any control this file doesn't style directly. */
}

.gud-root *,.gud-root *::before,.gud-root *::after{box-sizing:border-box;}
.gud-ic{display:inline-block;vertical-align:middle;flex-shrink:0;}
.gud-content{
  max-width:var(--workspace-max-width);
  margin-left:0;margin-right:0;
  padding:var(--workspace-pad-top) var(--workspace-pad-inline) var(--workspace-pad-bottom);
}
.gud-muted{color:var(--text-faint);font-size:13px;}
.gud-mt{margin-top:16px;}
.gud-mb{margin-bottom:16px;}

/* ── page + section headers ───────────────────────────────────────────── */
.gud-page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;}
.gud-page-crumb{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px;}
.gud-page-title{font-family:var(--font-display);font-weight:600;font-size:var(--type-display-lg);letter-spacing:-.015em;margin:0;}
.gud-page-lede{font-size:14px;color:var(--text-dim);margin:10px 0 0;max-width:720px;line-height:1.55;}
.gud-page-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.gud-sec-head{display:flex;align-items:flex-end;gap:12px;margin-bottom:16px;}
.gud-sec-tag{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-fg);}
.gud-sec-title{font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-.02em;margin-top:3px;}
.gud-level{margin-top:36px;}

/* ── grids + cards ────────────────────────────────────────────────────── */
.gud-grid{display:grid;gap:16px;}
.gud-grid.-2{grid-template-columns:1fr 1fr;} .gud-grid.-3{grid-template-columns:repeat(3,1fr);}
.gud-stack{display:flex;flex-direction:column;gap:16px;}
/* v1.29.9 (Part G — Responsive Audit): min-width:0 — .gud-card is placed
   as a grid item inside .gud-grid.-2/-3 in several screens (Dashboard,
   Intelligence). A grid item's default min-width is `auto`, which floors
   it at its CONTENT's min-content size, not its track's — a long
   unbreakable value (a long item name, a mono "N unit" figure) could
   force the whole card wider than its column, pushing the PAGE itself
   into horizontal scroll on mobile even though every descendant (e.g.
   .gud-toplist-name) already correctly declares its own min-width:0/
   overflow:hidden. Confirmed via a real 375px render with a long item
   name: without this line the card measured 46px wider than the
   viewport; with it, zero horizontal overflow. A no-op everywhere
   .gud-card is NOT a flex/grid item (e.g. Analytics' standalone cards). */
.gud-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm);min-width:0;}
.gud-card.-pad{padding:24px;}
.gud-card[data-act]{cursor:pointer;transition:box-shadow .15s,transform .15s,border-color .15s;}
.gud-card[data-act]:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);border-color:var(--border-strong);}
.gud-card-head{margin-bottom:14px;} .gud-card-h-title{font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:-.01em;}
.gud-card-h-sub{font-size:12px;color:var(--text-faint);margin-top:2px;}

/* ── buttons ──────────────────────────────────────────────────────────── */
.gud-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);font-family:var(--font-sans);font-weight:700;font-size:13px;cursor:pointer;transition:background .12s,border-color .12s,filter .12s,transform .12s;white-space:nowrap;}
/* v1.29.9 (Part F/C — Accessibility + Visual Consistency): .gud-btn is the
   single most-reused interactive class in Gudang (every Save/Cancel/
   "Lihat Semua"/toolbar action) and had NO custom focus treatment at all
   — a keyboard user tabbing through fell back to the browser's own
   default ring, which doesn't match this button's own rounded corners
   and reads as visually inconsistent with every other control here that
   already gets the app's accent-colored ring (.gud-catalog-card,
   .gud-toplist-row, .gud-qa-tile, .gud-insight-card, .gud-home-search).
   Same outline recipe as all of those — one shared convention, not a
   new one. */
.gud-btn:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px;}
.gud-btn:hover{background:var(--surface-2);border-color:var(--border-strong);color:var(--text);}
.gud-btn.-primary{background:linear-gradient(180deg,var(--accent-2),var(--accent));color:#fff;border:none;box-shadow:0 6px 16px -10px var(--accent);}
.gud-btn.-primary:hover{filter:brightness(1.05);transform:translateY(-1px);}
.gud-btn.-primary:disabled{opacity:.45;cursor:not-allowed;filter:none;transform:none;}
.gud-btn.-ghost{background:transparent;border-color:var(--border);}
.gud-btn.-sm{height:32px;padding:0 12px;font-size:12px;border-radius:9px;}
.gud-btn.-big{height:52px;font-size:14.5px;border-radius:13px;flex:1;min-width:150px;}
.gud-btn.-danger{background:var(--crit);color:#fff;border:none;}
.gud-btn.-danger:hover{filter:brightness(1.08);}
.gud-btn.-danger:disabled{opacity:.5;cursor:not-allowed;filter:none;}
.gud-btn.-danger-ghost{background:transparent;border-color:var(--crit-weak);color:var(--crit);}
.gud-btn.-danger-ghost:hover{background:var(--crit-weak);border-color:var(--crit);color:var(--crit);}
.gud-icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);display:grid;place-items:center;cursor:pointer;flex:none;}
.gud-icon-btn:hover{color:var(--text);background:var(--surface-2);}
.gud-icon-btn:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px;}
.gud-icon-btn.-lg{width:56px;height:56px;border-radius:16px;box-shadow:var(--shadow-sm);transition:box-shadow .15s,border-color .15s;}
.gud-icon-btn.-lg:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong);color:var(--accent-fg);}

/* ── pills / tags ─────────────────────────────────────────────────────── */
/* .gud-chip was used (movement-history/stock-opname filter chips, and the
   Phase 10 itemType/add-location chips) as if styled, but no rule ever
   existed for it — this is why chips rendered as unstyled default buttons.
   Mirrors .eng-chip/.eng-chips verbatim (same data-on="true" toggle idiom). */
.gud-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.gud-chip{border:1px solid var(--border);background:var(--surface);color:var(--text-dim);font-family:var(--font-sans);font-weight:600;font-size:12.5px;padding:7px 13px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background-color .12s,border-color .12s,color .12s;}
.gud-chip:hover{border-color:var(--border-strong);color:var(--text);}
.gud-chip[data-on="true"]{background:var(--accent-weak);border-color:var(--accent-line);color:var(--accent-fg);}

.gud-pill{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.01em;white-space:nowrap;}
.gud-pill[data-pill="ok"]{background:var(--c-green-weak);color:var(--c-green);}
.gud-pill[data-pill="warn"]{background:var(--c-amber-weak);color:var(--c-amber);}
.gud-pill[data-pill="crit"]{background:var(--crit-weak);color:var(--crit);}
.gud-pill[data-pill="neutral"]{background:var(--surface-2);color:var(--text-faint);}
.gud-pill[data-pill="info"]{background:var(--c-blue-weak);color:var(--c-blue);}

/* ── inputs ───────────────────────────────────────────────────────────── */
.gud-field{display:flex;flex-direction:column;gap:6px;} .gud-field>span{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);}
.gud-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.gud-req{color:var(--accent-fg);}
.gud-input{width:100%;height:40px;border-radius:11px;border:1px solid var(--border);background:var(--surface-2);padding:0 13px;font-family:var(--font-sans);font-size:13.5px;color:var(--text);}
.gud-input:focus{outline:2px solid var(--accent-line);outline-offset:1px;}
.gud-textarea{height:68px;padding:9px 13px;resize:vertical;}
@media (max-width:600px){ .gud-input{font-size:16px;} } /* iOS zoom guard */
/* de-emphasized secondary control (Add Item's Consumable/Asset toggle,
   Phase 10.1 Part 3 — "Dicatat sebagai," a rare/technical decision, not the
   primary flow) — smaller, quieter, visually separated by a hairline. */
.gud-field-secondary{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:4px;padding-top:14px;border-top:1px solid var(--border-faint);}
.gud-field-secondary-label{font-size:11px;font-weight:600;color:var(--text-faint);}
/* Phase 10.2: Consumable/Asset changed from a chip-button pair to a native
   radio pair (Doc's own mockup: "○ Consumable  ○ Asset") — same interaction
   the app already uses for Overtime's alias picker (platform.css
   .v2-alias-radio-row), just under the gud- namespace and the same tokens. */
.gud-radio-row{display:flex;align-items:center;gap:14px;}
.gud-radio{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--text-dim);cursor:pointer;}
.gud-radio input[type="radio"]{flex:none;accent-color:var(--accent);}
/* Edit Item (Phase 10.3): itemType is immutable once set — the SAME radio
   pair renders disabled rather than becoming a different read-only widget,
   so the field looks identical to Add Item at a glance, just inert. */
.gud-radio:has(input:disabled){cursor:default;color:var(--text-faint);}

/* ── Photo field — drag & drop / browse / paste (Phase 10.3, Add/Edit Item) ──
   One dropzone, two states: empty (dashed invite) and filled (preview +
   Ganti/Hapus). The real <input type="file"> stays in the DOM (for the
   native picker) but is visually hidden — the styled zone around it is
   what the user actually sees and clicks, same "native control, styled
   wrapper" approach as every <select> already used for Location/Category. */
.gud-photo-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;padding:16px;border-radius:14px;border:1.5px dashed var(--border-strong);background:var(--surface-2);cursor:pointer;text-align:center;transition:border-color .12s,background .12s;}
.gud-photo-drop:hover,.gud-photo-drop:focus-visible{border-color:var(--accent-line);background:var(--accent-weak);outline:none;}
.gud-photo-drop.-filled{padding:10px;cursor:default;}
.gud-photo-drop-ic{color:var(--text-faint);}
.gud-photo-drop-t{font-size:12px;color:var(--text-faint);max-width:280px;line-height:1.5;}
.gud-photo-preview{display:block;width:100%;height:140px;border-radius:10px;object-fit:contain;background:var(--surface-2);}
.gud-photo-drop-actions{display:flex;gap:14px;margin-top:2px;}

/* v1.29.5 (Warehouse Upload Experience) — the upload-in-progress / error
   overlay, shared verbatim by the Add/Edit Item dialog (positioned over
   .gud-photo-preview, which already has a fixed height) and the Home
   catalog card / Item Detail drawer image slots (positioned over the
   whole square, added further below since those two need
   position:relative added). One dark scrim + ring/label, or one error
   card + Retry/Cancel — never both at once (renderSessionOverlay always
   returns exactly one shape). */
.gud-photo-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(20,17,16,.55);border-radius:10px;color:#fff;text-align:center;padding:10px;}
.gud-photo-overlay-label{font-size:11px;font-weight:700;letter-spacing:.02em;}
.gud-photo-overlay.-error{background:var(--surface);color:var(--text);border:1px solid var(--crit-weak);gap:8px;}
.gud-photo-overlay-msg{font-size:11.5px;font-weight:600;color:var(--crit);max-width:220px;line-height:1.4;}
.gud-photo-overlay-actions{display:flex;gap:8px;}
.gud-progress-ring circle:last-child{transition:stroke-dashoffset .2s ease;}
@media (prefers-reduced-motion:no-preference){
  /* Indeterminate state (pct unknown, "preparing…") — a slow, gentle spin
     reads as "still working," not stalled; real percentage progress
     (a known stroke-dashoffset) is never animated this way. */
  .gud-photo-overlay:not(.-error) .gud-progress-ring{animation:gudRingSpin 1.1s linear infinite;}
}
@keyframes gudRingSpin{to{transform:rotate(360deg);}}
/* Drop-zone "animated border" (Phase 1) — a gentle pulse on the accent
   ring itself, shared by both the catalog card and drawer drop targets
   (see each element's own -dragover rule for the base box-shadow). */
@keyframes gudDropPulse{0%,100%{box-shadow:0 0 0 2px var(--accent);}50%{box-shadow:0 0 0 4px var(--accent-line);}}
.gud-photo-file-input{position:absolute;inset:0;opacity:0;pointer-events:none;}
.gud-link-btn.-danger{color:var(--crit);}

/* ── keyboard hint chips (Doc 2 §12: shown in context, not a cheat sheet) ── */
.gud-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:5px;border:1px solid var(--border-strong);border-bottom-width:2px;background:var(--surface-2);color:var(--text-dim);font-family:var(--font-mono);font-size:10.5px;font-weight:600;}
.gud-kbd-row{display:inline-flex;align-items:center;gap:4px;}
.gud-hint{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-faint);font-weight:600;}

/* ── empty state (ported verbatim from .eng-empty) ───────────────────── */
.gud-empty{padding:56px 24px;text-align:center;border:1px dashed var(--border-strong);border-radius:16px;display:flex;flex-direction:column;align-items:center;}
.gud-empty-ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--surface-2);color:var(--text-faint);margin-bottom:16px;}
.gud-empty-t{font-family:var(--font-display);font-weight:600;font-size:16px;} .gud-empty-h{font-size:13px;color:var(--text-faint);margin-top:6px;max-width:360px;line-height:1.5;}
.gud-empty-cta{margin-top:18px;}

/* ── scrim + drawer + modal (System B, ported from .eng-scrim/.eng-drawer/.eng-modal-box) ── */
.gud-scrim{position:fixed;inset:0;background:var(--scrim);z-index:420;display:flex;justify-content:flex-end;opacity:0;pointer-events:none;transition:opacity .2s;}
.gud-scrim.-open{opacity:1;pointer-events:auto;} .gud-scrim.-center{justify-content:center;align-items:center;}
/* Design System Program Phase 10 (Canonical Drawer Migration): every
   centered Gudang modal (Add/Edit Item, Add Asset Unit, Bulk Operations,
   the delete-confirm dialog) can be opened while the Item/Asset Detail
   drawer is open behind it — that drawer now renders through the
   canonical shell (js/components/drawer.js), whose own z-index
   (--drawer-z-panel: 10001, platform.css) sits far above this file's
   pre-existing z-index:420. Without this, a centered modal opened from
   inside the migrated drawer would render UNDER it — unreachable. Scoped
   to .-center only: the search-overlay and filter-sheet scrims use their
   own distinct classes (gud-spotlight-scrim / gud-filter-sheet-scrim) and
   are unaffected. */
.gud-scrim.-center{z-index:10050;}
/* Design System Program Phase 10 (Canonical Drawer Migration): the shell
   rules that used to live here (.gud-drawer/.gud-drawer-head/-head-txt/
   -title/-body/-foot, plus the .gud-scrim.-open .gud-drawer transform and
   the ≤760px width override further below) are gone — that shell is now
   js/components/drawer.js's job. .gud-drawer-badges stays: the Item/Asset
   Detail badge/back-link now renders as the first block of the canonical
   drawer's body instead of a shell-header slot (see gudang-item-detail.js's
   Phase 10 comment), and reuses this exact class for identical styling.
   .gud-drawer-sub was already unused before this migration (dead code
   pre-dating Phase 10, left as-is — not this phase's to clean up). */
.gud-drawer-badges{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.gud-drawer-sub{display:flex;align-items:center;gap:8px;margin-top:8px;color:var(--text-faint);font-size:12.5px;font-weight:600;}
.gud-sec{margin-top:26px;} .gud-sec:first-child{margin-top:0;}
.gud-sec-danger{border-top:1px solid var(--border-faint);padding-top:18px;}
.gud-sec-t{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-ghost);font-weight:700;margin-bottom:12px;}
.gud-sec-t-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;} .gud-sec-t-row .gud-sec-t{margin-bottom:0;}
.gud-kv{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--border-faint);font-size:13px;}
.gud-kv:first-of-type{border-top:none;} .gud-kv-k{color:var(--text-faint);} .gud-kv-v{color:var(--text);font-weight:600;}
.gud-mono{font-family:var(--font-mono);font-weight:600;font-size:12px;}

/* Item Detail's photo (Phase 10.3) — "the central page," Image first.
   Adaptive Image Frame (v1.28.11, rebalanced in v1.28.12): a padded,
   neutral-bg frame so the whole product is always visible —
   object-fit:contain, never cover, never cropped. v1.28.11 shipped a
   full-width frame that first shrank in height (240px -> 180px) to stop
   dominating the metadata below, but at full drawer width (~431px) it
   still read as a wide banner, not a preview. v1.28.12 reframed the fix
   around the CONTAINER, not the image: the frame is no longer full-width
   — a small, centered, SQUARE tile (~230px, margin:0 auto), the rest of
   the drawer's width left as deliberate surrounding whitespace, closer to
   a Finder/Files preview than a hero banner. Larger on desktop, compact
   on mobile via the media query below, not a second component. */
.gud-detail-img{position:relative;width:230px;max-width:100%;aspect-ratio:1/1;margin:0 auto;padding:26px;box-sizing:border-box;border-radius:14px;overflow:hidden;background:var(--surface-2);display:grid;place-items:center;}
.gud-detail-img img{width:100%;height:100%;object-fit:contain;}
.gud-detail-img.-placeholder{color:var(--text-faint);}
@media (max-width:480px){ .gud-detail-img{width:200px;padding:22px;} }
/* v1.29.5 (Upload Experience, Phase 1) — drop-zone highlight (animated
   border) while a file is being dragged over the drawer's own image;
   .-uploading swaps the padding for edge-to-edge so .gud-photo-overlay's
   inset:0 lines up with the visible square, not the padded content box. */
.gud-detail-img.-dragover{box-shadow:0 0 0 2px var(--accent);}
@media (prefers-reduced-motion:no-preference){
  .gud-detail-img.-dragover{animation:gudDropPulse 1s ease-in-out infinite;}
}
.gud-detail-img.-uploading{padding:0;}

.gud-modal-box{width:520px;max-width:94vw;max-height:90vh;display:flex;flex-direction:column;background:var(--surface);border-radius:20px;box-shadow:var(--shadow-lg);border:1px solid var(--border);padding:22px 24px;}
.gud-modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;flex:0 0 auto;}
.gud-modal-kicker{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint);margin-bottom:4px;}
.gud-modal-title{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:-.022em;margin:0;}
.gud-modal-body{display:flex;flex-direction:column;gap:12px;overflow-y:auto;flex:1 1 auto;min-height:0;padding-right:2px;}
.gud-modal-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--border-faint);flex-wrap:wrap;gap:12px;flex:0 0 auto;}
.gud-modal-hint{font-size:12px;color:var(--text-faint);display:inline-flex;align-items:center;gap:7px;} .gud-modal-actions{display:flex;gap:10px;}

/* v1.29.4 (Warehouse Bulk Operations Framework) — same .gud-modal-box
   shell every other Gudang modal already uses (Visual Design: "no new
   design language"), just wider (the per-item quantity list and the
   fail-detail groups both need more breathing room than a 520px form). */
.gud-modal-box.-bulk{width:600px;}
.gud-bulk-qty-input{width:84px;flex:none;text-align:right;}
.gud-bulk-export-formats{display:flex;gap:10px;flex-wrap:wrap;}

.gud-bulk-edit-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--border-faint);}
.gud-bulk-edit-row:last-child{border-bottom:none;}
.gud-bulk-edit-row .gud-input{flex:1;min-width:160px;}
.gud-check-row{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-dim);cursor:pointer;flex:none;}
.gud-check-row input[type="checkbox"]{accent-color:var(--accent);width:16px;height:16px;}

.gud-bulk-confirm-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--border-faint);}
.gud-bulk-confirm-op{font-family:var(--font-display);font-weight:600;font-size:17px;}
.gud-bulk-confirm-count{font-family:var(--font-mono);font-weight:700;font-size:14px;color:var(--accent-fg);}
.gud-bulk-change-list{margin:0;padding-left:18px;font-size:13px;color:var(--text-dim);display:flex;flex-direction:column;gap:4px;}
.gud-bulk-impact{margin-top:12px;padding:11px 14px;border-radius:11px;font-size:12.5px;font-weight:600;background:var(--surface-2);color:var(--text-dim);}
.gud-bulk-impact[data-tone="danger"]{background:var(--crit-weak);color:var(--crit);}

.gud-bulk-progress-label{font-size:13px;font-weight:700;color:var(--text-dim);text-align:center;}
.gud-bulk-progress-bar{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden;}
.gud-bulk-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width .15s ease;}
.gud-bulk-progress-count{font-family:var(--font-mono);font-size:12.5px;color:var(--text-faint);text-align:center;}

.gud-bulk-summary-head{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0;}
.gud-bulk-summary-stats{display:flex;justify-content:center;gap:28px;padding:8px 0 4px;}
.gud-bulk-stat{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;font-weight:600;color:var(--text-faint);}
.gud-bulk-stat-n{font-family:var(--font-mono);font-size:20px;font-weight:600;color:var(--text);}
.gud-bulk-stat-n[data-tone="ok"]{color:var(--c-green);} .gud-bulk-stat-n[data-tone="crit"]{color:var(--crit);}
.gud-bulk-fail-list{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto;}
.gud-bulk-fail-group{padding:10px 12px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border-faint);}
.gud-bulk-fail-reason{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:8px;}
.gud-bulk-fail-items{font-size:11.5px;color:var(--text-faint);margin-top:3px;}

.gud-sel-bar-divider{width:1px;align-self:stretch;background:var(--border-strong);margin:0 2px;}
@media (max-width:760px){
  .gud-sel-bar-actions{flex-wrap:wrap;}
  .gud-sel-bar-divider{display:none;}
}

/* ── table ────────────────────────────────────────────────────────────── */
.gud-table-wrap{overflow-x:auto;} .gud-table{width:100%;border-collapse:collapse;min-width:560px;}
.gud-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:700;padding:8px 12px;border-bottom:1px solid var(--border);}
.gud-table td{padding:13px 12px;border-bottom:1px solid var(--border-faint);font-size:13px;}
.gud-table tbody tr[data-act]{cursor:pointer;} .gud-table tbody tr[data-act]:hover{background:var(--hover);}
.gud-table .-right{text-align:right;} .gud-table .-mono{font-family:var(--font-mono);}

/* ── entry animation (ported verbatim from .eng-content) ───────────────
   Scoped to .-enter (added only when st.screen actually changes, see
   gudang-center.js#render) rather than every .gud-content, which
   previously replayed the fade-up on every single keystroke re-render
   (host.innerHTML replaces this element every render — Phase 10.1 UAT:
   "menu flickers on every character typed"). */
@media (prefers-reduced-motion:no-preference){.gud-content.-enter{animation:gudFadeUp .4s cubic-bezier(.2,.7,.2,1) both;}}
@keyframes gudFadeUp{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}

/* list/row stagger (ported from Analytics' anFadeUp nth-child recipe) */
@media (prefers-reduced-motion:no-preference){
  .gud-stagger>*{animation:gudFadeUp .4s cubic-bezier(.2,.7,.2,1) both;}
  .gud-stagger>*:nth-child(1){animation-delay:.02s;} .gud-stagger>*:nth-child(2){animation-delay:.05s;}
  .gud-stagger>*:nth-child(3){animation-delay:.08s;} .gud-stagger>*:nth-child(4){animation-delay:.11s;}
  .gud-stagger>*:nth-child(5){animation-delay:.14s;} .gud-stagger>*:nth-child(n+6){animation-delay:.17s;}
}

/* ── Home (Doc 2 §04) — Phase 10.2 Catalog Experience Redesign ──────────
   UAT: "feels like an administration system... should feel like looking at
   a warehouse, not software." Search (hero) -> Filter chips -> Catalog grid
   -> Floating Actions replaces Search + 3 big cards + Low Stock list +
   Recent Activity list. Every card recipe below is new (nothing like a
   dense product-catalog grid existed anywhere in the app yet — Doc 4
   Art.VI's "only what Gudang genuinely needs" applies here the same way it
   already did for the Spotlight/line-item rows), but every SPACING/RADIUS/
   SHADOW/COLOR value is the same token set as every other card in this
   file — not a new design language, just a new arrangement of it. */
.gud-home{display:flex;flex-direction:column;gap:20px;padding-top:8px;}
.gud-home-search{display:flex;align-items:center;gap:12px;width:100%;height:56px;padding:0 18px;border-radius:16px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-sm);cursor:text;transition:border-color .12s,box-shadow .12s;font-family:var(--font-sans);text-align:left;}
.gud-home-search:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);}
.gud-home-search:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px;}
.gud-home-search-ph{flex:1;color:var(--text-faint);font-size:15px;font-weight:500;}
.gud-home-search-kbd{flex:none;}

/* v1.29.3 (Warehouse Selection Engine, Phase 3/7) — Selection Mode toolbar,
   replaces the search+filter row above while anything is selected.
   position:sticky (not this file's usual position:fixed .gud-scrim/.gud-
   toast/.gud-fab-row pattern — those are viewport overlays; this is a
   sub-toolbar of the normally-scrolling page) tucked just beneath
   .v2-topbar's own sticky top:0/height (platform.css: 56px + safe-area),
   confirmed the same technique already works for that element. */
.gud-sel-bar{position:sticky;top:calc(56px + env(safe-area-inset-top,0px));z-index:45;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:14px;border:1px solid var(--accent-line);background:var(--accent-weak);box-shadow:var(--shadow-sm);}
.gud-sel-bar-count{font-family:var(--font-sans);font-weight:700;font-size:13.5px;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.gud-sel-bar-count strong{font-family:var(--font-mono);color:var(--accent-fg);}
.gud-sel-bar-hidden{font-weight:600;font-size:11.5px;color:var(--text-faint);}
.gud-sel-bar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.gud-sel-bar-esc{margin-left:4px;}
@media (max-width:760px){
  .gud-sel-bar{flex-wrap:wrap;}
  .gud-sel-bar-esc{display:none;} /* Doc 2 §13: no keyboard hints on mobile — same rule already applied to .gud-home-search-kbd */
}

/* Location/Category — a native <select> styled to sit in the same chip
   row as All/Consumable/Asset/Low Stock without becoming an unbounded
   chip-per-value list (Kategori/Lokasi are freeform, open-ended — Phase
   10.1) or an "ERP panel." Native, not a custom dropdown — same reasoning
   as gudang-catalog.js's freeformField() datalist choice. */
.gud-chip-select{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);font-family:var(--font-sans);font-weight:600;font-size:12.5px;cursor:pointer;}

/* Catalog grid — dense, product-first (Doc 2 §04 mental model: Tokopedia/
   Apple Store BROWSING, never their branding/visuals — see Part "Tokopedia
   is only a mental model"). auto-fill lets it resolve to 3-6 columns on
   desktop, 2-3 on tablet, 1 on narrow mobile, purely from available width —
   no separate breakpoint rules needed for the column count itself. */
.gud-catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;}
.gud-catalog-card{position:relative;display:flex;flex-direction:column;gap:3px;padding:12px 13px;border-radius:13px;border:1px solid var(--border-faint);background:var(--surface);cursor:pointer;transition:border-color .12s,box-shadow .12s;}
.gud-catalog-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);}
.gud-catalog-card:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px;}
/* v1.29.5 (Upload Experience, Phase 1) — drop-zone highlight (animated
   border) while a file is being dragged over this card. */
.gud-catalog-card.-dragover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-line);}
@media (prefers-reduced-motion:no-preference){
  .gud-catalog-card.-dragover{animation:gudDropPulse 1s ease-in-out infinite;}
}
/* Product image (Phase 10.3) — bleeds to the card's own edges via negative
   margins matching .gud-catalog-card's padding (12px/13px), so it reads as
   one continuous photo tile rather than an inset thumbnail. Adaptive Image
   Frame (v1.28.11): a fixed SQUARE (not a 4:3 band) with internal padding
   and a neutral background, so tall/wide products (spray bottles, office
   chairs, keyboards) are never cropped — object-fit:contain does the
   scaling, this frame just guarantees the same shape and breathing room
   every time, regardless of the grid's responsive column width. */
.gud-catalog-card-img{position:relative;margin:-12px -13px 6px;aspect-ratio:1/1;padding:16px;box-sizing:border-box;border-radius:13px 13px 0 0;overflow:hidden;background:var(--surface-2);display:grid;place-items:center;}
.gud-catalog-card-img img{width:100%;height:100%;object-fit:contain;}
.gud-catalog-card-img.-placeholder{color:var(--text-faint);}
.gud-catalog-card-img.-uploading{padding:0;}
.gud-catalog-card-name{font-size:13px;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.gud-catalog-card-meta{font-size:11px;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gud-catalog-card-stock{font-family:var(--font-mono);font-size:12.5px;font-weight:700;color:var(--text-dim);margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.gud-catalog-card-qi{font-size:11px;color:var(--accent-fg);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Quick actions: hover-revealed on desktop (Doc 2 §13's existing "chevron
   for secondary, primary stays one tap" idiom, applied here as "the card
   itself IS the primary tap — Open Detail"); always visible (no :hover) on
   touch, since there is no hover to reveal them — Part "Card Interaction".
   NOT position:absolute over the card corner: this card has no thumbnail,
   so an overlay sits directly on top of the (up to 2-line) name text —
   confirmed visually (a hovered/touched card read as "Glue Stick K[icons]",
   the name partly hidden behind the reveal). Expanding a real, reserved row
   in normal flow avoids covering anything, at the cost of a few px of
   height change on reveal — an acceptable trade for never hiding the name
   staff are trying to read. */
.gud-catalog-card-quick{display:flex;gap:3px;justify-content:flex-end;max-height:0;opacity:0;margin-top:0;overflow:hidden;transition:max-height .15s,opacity .12s,margin-top .15s;}
.gud-catalog-card:hover .gud-catalog-card-quick{max-height:26px;opacity:1;margin-top:6px;}
.gud-catalog-quick-btn{width:22px;height:22px;border-radius:7px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-faint);display:grid;place-items:center;}
.gud-catalog-quick-btn:hover{color:var(--accent-fg);border-color:var(--accent-line);background:var(--accent-weak);}
.gud-catalog-quick-btn:focus-visible{outline:2px solid var(--accent-line);outline-offset:1px;}
.gud-catalog-more{display:flex;justify-content:center;margin-top:14px;}

/* V1 Shuttlecock module (requirement §1/§3/§9) — a prioritised section at
   the top of the catalog. Reuses the existing catalog grid/card/spacing;
   only the section tag, a light count, and a divider are new. .gud-sec-tag
   (accent, mono, tracked) already exists — no new colour is introduced. */
.gud-catalog-shuttle{display:block;}
.gud-catalog-shuttle-head{display:flex;align-items:baseline;gap:10px;margin-top:16px;}
.gud-catalog-shuttle-count{font-size:11px;color:var(--text-faint);font-weight:600;}
.gud-catalog-shuttle-divider{height:1px;background:var(--border-faint);margin:18px 0 2px;}
/* Card marker: a hairline accent edge, nothing louder (requirement §9 —
   "boleh sedikit berbeda, jangan terlalu colorful"). The inline
   .gud-pill[data-pill="info"] "Shuttlecock" tag carries the label itself. */
.gud-catalog-card.-shuttle{border-left:2px solid var(--accent-line);}
.gud-catalog-card.-shuttle[data-selected="true"]{border-left-color:var(--accent);}

/* v1.29.3 (Warehouse Selection Engine) — per-card checkbox overlay.
   Hidden until hover (desktop, Phase 8) OR until any item is selected
   (Phase 1/8: "after entering selection, checkboxes remain visible" — and
   mobile has no :hover at all, so the [data-sel-active] rule is what makes
   long-press-then-tap-others work there). .gud-catalog-card already has
   position:relative, so this needs no structural change to the card. */
.gud-sel-checkbox{position:absolute;top:8px;left:8px;z-index:2;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--border-strong);background:var(--surface);color:#fff;display:grid;place-items:center;opacity:0;cursor:pointer;transition:opacity .12s,background .12s,border-color .12s;}
.gud-catalog-card:hover .gud-sel-checkbox,
.gud-catalog-card[data-selected="true"] .gud-sel-checkbox,
.gud-catalog-grid[data-sel-active="true"] .gud-sel-checkbox{opacity:1;}
.gud-sel-checkbox[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);}
.gud-sel-checkbox:focus-visible{opacity:1;outline:2px solid var(--accent-line);outline-offset:2px;}
/* Selection state must be visually obvious on the card itself (Phase 1),
   not only on its checkbox. */
.gud-catalog-card[data-selected="true"]{border-color:var(--accent);background:var(--accent-weak);}

/* Floating Actions (Part "Home Quick Actions" — Goods Out/In/Add Item
   demoted from primary equal-weight tiles to small, secondary, always-
   reachable buttons). Fixed to the viewport, not .gud-home's own flow, so
   it never competes with or scrolls away from the catalog beneath it. */
.gud-fab-row{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:60;}
.gud-fab{width:46px;height:46px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);box-shadow:var(--shadow-lg);display:grid;place-items:center;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;}
.gud-fab:hover{transform:translateY(-2px);border-color:var(--border-strong);color:var(--text);}
.gud-fab.-primary{width:54px;height:54px;background:linear-gradient(180deg,var(--accent-2),var(--accent));color:#fff;border:none;}
.gud-fab.-primary:hover{filter:brightness(1.05);}

/* Hotfix: bottom:24px alone put the row's lower buttons underneath the
   mobile .bottom-nav (fixed, 56px+safe-area tall, z-index 99 vs this row's
   60) — same clearance approach as the global .fab-add (style.css), reusing
   the app's one shared bottom-clearance token instead of a new offset.
   767px matches style.css's own bottom-nav breakpoint exactly (gudang.css
   otherwise uses 760px elsewhere in this file — intentional mismatch here). */
@media (max-width:767px){
  .gud-fab-row{bottom:var(--mobile-safe-bottom);}
}

@media (max-width:760px){
  .gud-home-search-kbd{display:none;} /* Doc 2 §13: no keyboard hints on mobile — same rule already applied to .gud-spotlight-foot */
  .gud-catalog-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
  .gud-catalog-card-quick{max-height:26px;opacity:1;margin-top:6px;} /* no hover on touch — permanently expanded, Part "Mobile" */
}

/* ── Universal Search — anchored results dropdown (Doc 2 §05/§12, Doc 3 Ch.08)
   Phase 10.1 redesign: the query no longer has its own duplicate input box —
   it IS the shared topbar #v2SearchInput every other module already uses
   (Ctrl+K focuses that field directly; gudang-center.js#render only ever
   positions this dropdown under it via an inline style computed from its
   real getBoundingClientRect()). Previously this rendered as a second,
   separately-focused input inside a full-screen dimming scrim that (via a
   pre-existing CSS bug — .gud-spotlight-scrim never overrode the base
   .gud-scrim's justify-content:flex-end) always appeared pinned to the top
   RIGHT corner of the screen, overlapping page content. ── */
.gud-spotlight-scrim{background:transparent;} /* invisible click-outside-to-close catcher only, no dimming */
.gud-spotlight{position:fixed;max-width:92vw;max-height:50vh;display:flex;flex-direction:column;background:var(--surface);border-radius:14px;box-shadow:var(--shadow-lg);border:1px solid var(--border);overflow:hidden;}
.gud-spotlight-hint{padding:20px;text-align:center;color:var(--text-faint);font-size:13px;display:flex;align-items:center;justify-content:center;gap:8px;}
.gud-spotlight-hint.-column{flex-direction:column;gap:10px;}
.gud-spotlight-hint.-column>div{display:flex;align-items:center;gap:8px;}
.gud-spotlight-results{overflow-y:auto;padding:8px;flex:1;min-height:0;}
.gud-spotlight-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;cursor:pointer;}
.gud-spotlight-row:hover,.gud-spotlight-row.-focused{background:var(--hover);}
.gud-spotlight-row.-focused{background:var(--accent-weak);}
.gud-spotlight-row-ic{width:30px;height:30px;border-radius:9px;background:var(--surface-2);color:var(--text-faint);display:grid;place-items:center;flex:none;}
.gud-spotlight-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.gud-spotlight-row-label{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gud-spotlight-row-domain{font-size:11px;color:var(--text-faint);font-weight:600;}
.gud-spotlight-row-hint{font-size:12px;color:var(--accent-fg);font-weight:600;white-space:nowrap;flex:none;}
.gud-spotlight-row-actions{display:flex;gap:6px;flex:none;}
.gud-spotlight-chip{font-size:11px;font-weight:700;padding:5px 10px;border-radius:8px;background:var(--surface-2);color:var(--text-dim);border:1px solid transparent;}
.gud-spotlight-chip.-focused{background:var(--accent);color:#fff;}
.gud-spotlight-chip.-dormant{opacity:.45;}
.gud-spotlight-chevron{display:none;width:28px;height:28px;flex:none;border:none;background:transparent;color:var(--text-faint);border-radius:8px;align-items:center;justify-content:center;transition:transform .15s;}
.gud-spotlight-row.-revealed .gud-spotlight-chevron{transform:rotate(90deg);color:var(--accent-fg);}
.gud-spotlight-foot{display:flex;align-items:center;gap:16px;padding:10px 16px;border-top:1px solid var(--border-faint);flex:none;background:var(--surface-2);}
@media (max-width:760px){
  .gud-spotlight-foot{display:none;} /* Doc 2 §13: no keyboard hints on mobile — nothing depends on hover/keys */
  .gud-spotlight-row-actions{display:none;} /* hidden until the chevron reveals them (Doc 2 §05: "one tap primary action... chevron for secondary") */
  .gud-spotlight-row{flex-wrap:wrap;}
  .gud-spotlight-row.-revealed .gud-spotlight-row-actions{display:flex;flex-basis:100%;margin-top:8px;padding-left:42px;}
  .gud-spotlight-chevron{display:flex;} /* only meaningful affordance shown once there IS more than one action */
}

/* ── Search Highlight (v1.29.0 Feature 4) — subtle, follows the existing
   accent language rather than a jarring yellow-highlighter default <mark>. */
.gud-search-highlight{background:var(--accent-weak);color:var(--accent-fg);border-radius:3px;padding:0 1px;font-weight:600;}

/* ── Recent Searches (v1.29.0 Feature 6) — same list-row rhythm as the
   results list above, so switching between "recent" and "results" inside
   the identical dropdown/sheet never feels like two different components. */
.gud-recent-searches{padding:8px;}
.gud-recent-searches-head{display:flex;align-items:center;justify-content:space-between;padding:6px 4px 8px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-ghost);}
.gud-recent-search-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 8px;border:none;background:transparent;border-radius:11px;cursor:pointer;font-family:var(--font-sans);text-align:left;color:var(--text);}
.gud-recent-search-row:hover{background:var(--hover);}
.gud-recent-search-label{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── Mobile Search Sheet (v1.29.0 Feature 9) — the shared topbar field is
   CSS-hidden below 1280px (platform.css), so this full-screen, Gudang-owned
   sheet is the ONLY working search entry point at those widths. Reuses the
   exact same results/recent/empty-state markup as the desktop dropdown
   (gudang-search-overlay.js#searchDropdownBody) — only this chrome differs. */
.gud-mobile-search-sheet{position:fixed;inset:0;z-index:420;background:var(--surface);display:flex;flex-direction:column;animation:gudMobileSearchIn .18s cubic-bezier(.2,.7,.2,1);}
@keyframes gudMobileSearchIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.gud-mobile-search-head{display:flex;align-items:center;gap:10px;flex:none;padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top));border-bottom:1px solid var(--border-faint);}
.gud-mobile-search-ic{flex:none;color:var(--text-faint);display:flex;}
.gud-mobile-search-input{flex:1;min-width:0;height:40px;border:none;background:transparent;font-family:var(--font-sans);font-size:16px;color:var(--text);} /* 16px: prevents iOS Safari's auto-zoom-on-focus */
/* v1.29.9 (Part F — Accessibility): was a bare outline:none with no
   replacement — this field auto-focuses the instant the mobile search
   sheet opens (only one text field in view, so a sighted keyboard user
   never has to "find" it by Tab), but a keyboard user tabbing BACK to it
   after the results list still needs a visible cue. box-shadow (not
   border/outline) so the borderless, full-width header-row look — the
   deliberate design here — never shifts by a pixel when focused. */
.gud-mobile-search-input:focus{outline:none;box-shadow:inset 0 -2px 0 0 var(--accent-line);}
.gud-mobile-search-input::placeholder{color:var(--text-faint);}
.gud-mobile-search-body{flex:1;min-height:0;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom);}
.gud-mobile-search-body .gud-spotlight-results{padding:8px 8px 16px;}
.gud-mobile-search-body .gud-spotlight-row-actions{display:flex;} /* full-screen sheet has room — no chevron-reveal needed like the cramped dropdown */
.gud-mobile-search-body .gud-spotlight-chevron{display:none;}

/* ── Smart Filtering (v1.29.1) — inline bar (desktop/tablet) ────────────
   Feature 11 (Responsive Experience): the inline bar below stays the
   desktop/tablet presentation unchanged in spirit from v1.28.0's original
   2-select bar, just two more selects in the same row. Below the mobile
   breakpoint it's replaced entirely by the trigger + bottom sheet further
   down — "same capability, different presentation," never two different
   sets of controls to keep in sync. */
.gud-filterbar{display:flex;flex-direction:column;gap:8px;}

/* Feature 2 (removable chips + Clear All) + Feature 9 (result count). */
.gud-filter-summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.gud-filter-count{font-size:12.5px;font-weight:700;color:var(--text-faint);white-space:nowrap;}
.gud-filter-chips-active{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.gud-chip-active{display:inline-flex;align-items:center;gap:5px;background:var(--accent-weak);border:1px solid var(--accent-line);color:var(--accent-fg);font-size:12px;font-weight:700;padding:5px 6px 5px 11px;border-radius:999px;}
.gud-chip-remove{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;border:none;background:transparent;color:var(--accent-fg);cursor:pointer;flex:none;}
.gud-chip-remove:hover{background:rgba(0,0,0,.08);}
:root[data-theme="dark"] .gud-chip-remove:hover{background:rgba(255,255,255,.14);}
.gud-filter-clear-all{background:none;border:none;color:var(--text-faint);font-family:var(--font-sans);font-weight:700;font-size:12px;cursor:pointer;padding:4px 2px;text-decoration:underline;text-underline-offset:2px;}
.gud-filter-clear-all:hover{color:var(--crit);}

/* Feature 11 (mobile) — trigger, CSS-visible only below the breakpoint
   where the inline bar above is hidden (see the media query below). */
.gud-filter-trigger{display:none;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);font-family:var(--font-sans);font-weight:700;font-size:13px;cursor:pointer;width:100%;justify-content:center;}
.gud-filter-trigger-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:600;}

/* Feature 11 (mobile) — bottom sheet, the genuinely NEW presentation
   (approved direction: extend the inline bar for desktop/tablet, build a
   real bottom sheet only for mobile, where no closeable filter panel
   concept existed before). Reuses .gud-scrim's existing click-outside/
   dimming mechanism, only overriding where the panel docks (bottom, not
   .gud-scrim's default right-aligned drawer position). */
.gud-filter-sheet-scrim{align-items:flex-end;}
.gud-filter-sheet{width:100%;max-height:80vh;background:var(--surface);border-radius:18px 18px 0 0;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;transform:translateY(16px);opacity:0;transition:transform .2s cubic-bezier(.2,.7,.2,1),opacity .2s;}
.gud-scrim.-open .gud-filter-sheet{transform:none;opacity:1;}
.gud-filter-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border-faint);flex:none;}
.gud-filter-sheet-title{font-family:var(--font-display);font-weight:600;font-size:16px;}
.gud-filter-sheet-body{flex:1;min-height:0;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px;padding-bottom:max(16px,env(safe-area-inset-bottom));}
.gud-filter-sheet-body .gud-chip-select{flex:1;min-width:130px;}
.gud-filter-sheet-foot{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--border-faint);flex:none;padding-bottom:max(14px,env(safe-area-inset-bottom));}
.gud-filter-sheet-foot .gud-btn{flex:1;}

@media (max-width:760px){
  .gud-filterbar{display:none;}
  .gud-filter-trigger{display:flex;}
}

/* ── Goods Out / Goods In flow (Doc 2 §06/§07) ──────────────────────────── */
.gud-flow{max-width:640px;}
.gud-flow-dept{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text-dim);}
.gud-link-btn{background:none;border:none;color:var(--accent-fg);font-weight:700;font-size:12.5px;cursor:pointer;font-family:var(--font-sans);display:inline-flex;align-items:center;gap:4px;padding:2px;}
.gud-picker-list{display:flex;flex-direction:column;max-height:260px;overflow-y:auto;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);}
.gud-picker-row{display:block;width:100%;text-align:left;padding:11px 14px;background:transparent;border:none;border-bottom:1px solid var(--border-faint);cursor:pointer;font-family:var(--font-sans);font-size:13.5px;color:var(--text);}
.gud-picker-row:last-child{border-bottom:none;} .gud-picker-row:hover{background:var(--surface);}
.gud-reason-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;}
/* dark-audit: same missing-color bug as .gud-quick-tile above — this is the
   exact one reported ("tombol Purchase/Return/dll. tidak kelihatan di dark
   mode"). Text is a direct child of the button, so the fix goes here. */
.gud-reason-tile{padding:16px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-family:var(--font-sans);font-weight:700;font-size:13.5px;cursor:pointer;text-align:center;transition:border-color .12s,background .12s;}
.gud-reason-tile:hover{border-color:var(--accent-line);background:var(--accent-weak);color:var(--accent-fg);}
.gud-flow-selected{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.gud-flow-selected-name{font-size:15px;font-weight:600;font-family:var(--font-display);}
.gud-qty-row{display:flex;align-items:center;gap:10px;}
.gud-qty-input{text-align:center;max-width:100px;}
.gud-opt{font-weight:600;text-transform:none;letter-spacing:0;color:var(--text-faint);font-style:normal;opacity:.8;}
.gud-line-list{display:flex;flex-direction:column;gap:8px;}
.gud-line-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border-faint);}
.gud-line-name{flex:1;min-width:0;font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gud-line-price{font-size:12px;color:var(--text-faint);font-family:var(--font-mono);}
.gud-line-qty{font-family:var(--font-mono);font-weight:700;color:var(--crit);font-size:13px;}
.gud-line-qty.-in{color:var(--c-green);}
.gud-flow-error{padding:12px 14px;border-radius:11px;background:var(--crit-weak);color:var(--crit);font-size:13px;font-weight:600;}
.gud-flow-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.gud-flow-success{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 24px;gap:4px;}

/* ── Movement History timeline (Doc 2 §09) — Phase 10.2 ─────────────────
   Was a flat border-top list (the "table feeling" UAT flagged); each entry
   is now its own bordered card grouped under a day label (GitHub Activity /
   Apple Wallet mental model) — same fields, same data, denser visual
   separation instead of hairlines. */
.gud-timeline-group{margin-top:22px;} .gud-timeline-group:first-child{margin-top:0;}
.gud-timeline-label{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-ghost);font-weight:700;margin-bottom:8px;}
.gud-timeline-rows{display:flex;flex-direction:column;gap:6px;}
.gud-hist-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;border:1px solid var(--border-faint);background:var(--surface);}
.gud-hist-row[role="button"]{cursor:pointer;}
.gud-hist-row:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px;}
.gud-hist-row[data-act]{cursor:pointer;transition:border-color .12s,box-shadow .12s;}
.gud-hist-row[data-act]:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);}
.gud-hist-ic{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;}
.gud-hist-ic[data-tone="ok"]{background:var(--c-green-weak);color:var(--c-green);}
.gud-hist-ic[data-tone="crit"]{background:var(--crit-weak);color:var(--crit);}
/* v1.29.7: toneForActivity() (gudang-activities.js) also returns "neutral"
   (Item Created, and every dormant/future type) — this rule was missing for
   both the existing v1.29.6 per-item Timeline and the new Dashboard's
   Recent Activity card, which reuses these exact classes verbatim; added
   here rather than left unstyled. */
.gud-hist-ic[data-tone="neutral"]{background:var(--surface-2);color:var(--text-faint);}
.gud-hist-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.gud-hist-title{font-size:13.5px;font-weight:700;}
.gud-hist-qty{font-family:var(--font-mono);}
.gud-hist-qty[data-sign="plus"]{color:var(--c-green);} .gud-hist-qty[data-sign="minus"]{color:var(--crit);}
.gud-hist-sub{font-size:12px;color:var(--text-faint);}
.gud-hist-time{font-family:var(--font-mono);font-size:11.5px;color:var(--text-faint);white-space:nowrap;flex:none;}

/* v1.29.6 (Warehouse Activity Timeline) — the Item Detail drawer's own
   expandable rows. .gud-hist-row/-ic/-main/-title/-sub/-time above are
   reused VERBATIM on the <summary> (which is what actually needs the
   flex layout); .gud-timeline-row is just the <details> wrapper, kept
   deliberately bare (block, no flex) so <summary> and the detail panel
   stack normally instead of competing for the same flex row. Native
   <details>/<summary> — zero new JS for expand/collapse, keyboard
   accessible for free (Tab focuses the summary, Enter/Space toggles it),
   same precedent as js/app.js's own v2-audit-tech-details disclosure. */
.gud-timeline-row-summary{cursor:pointer;list-style:none;}
.gud-timeline-row-summary::-webkit-details-marker{display:none;}
.gud-timeline-row-summary::marker{content:'';}
.gud-timeline-chevron{flex:none;color:var(--text-faint);transition:transform .15s ease;}
.gud-timeline-row[open] .gud-timeline-chevron{transform:rotate(180deg);}
.gud-timeline-detail{margin-top:6px;padding:4px 12px 2px 54px;} /* 54px aligns under .gud-hist-main, past the 30px icon + gap */
.gud-timeline-detail .gud-kv{padding:7px 0;font-size:12.5px;}
.gud-timeline-search{max-width:280px;}
.gud-hist-search{max-width:280px;}

/* ── Stock Opname — category-grouped card catalog (Doc 2 §10) ───────────
   UAT: "seperti katalog dong agar mudah dilihat dan dipahami" — was a
   single flat row list, replaced with a grouped grid of cards. Not
   .gud-stagger'd on purpose: searching re-renders this grid on every
   keystroke, and Phase 10.1 already had to fix an identical full-screen
   flicker caused by an animation replaying on every render().

   Phase 10.2: "staff may count hundreds of items — scrolling efficiency
   matters more than decoration" — tightened padding/gap/min-width so more
   cards fit per screen. System Quantity itself stays fetched only on open
   (getExpectedQuantity, one read per item the user actually opens) rather
   than prefetched for every visible card — prefetching Expected for
   potentially hundreds of items at once is exactly the unbounded N+1 this
   session has repeatedly kept bounded elsewhere (see gudang-home.js's own
   PAGE_SIZE-capped catalog fetch); the density fix here is visual only. */
.gud-cat-group{margin-top:20px;} .gud-cat-group:first-child{margin-top:0;}
.gud-cat-group-t{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-ghost);font-weight:700;margin-bottom:8px;}
.gud-cat-group-count{font-family:var(--font-mono);color:var(--text-faint);font-weight:600;}
.gud-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:8px;}
/* dark-audit: the not-yet-counted state renders this as a <button> (the
   counting/done states are <div>s, unaffected) — same missing-color bug,
   caught here before any UAT report since this card shipped last release. */
.gud-cat-card{display:flex;flex-direction:column;gap:6px;padding:10px 11px;border-radius:12px;border:1px solid var(--border-faint);background:var(--surface);color:var(--text);text-align:left;font-family:var(--font-sans);cursor:pointer;transition:border-color .12s,box-shadow .12s;}
.gud-cat-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);}
.gud-cat-card.-counting{border-color:var(--accent-line);box-shadow:var(--shadow-md);cursor:default;}
.gud-cat-card.-done{border-color:var(--c-green);background:var(--c-green-weak);cursor:default;}
.gud-cat-card-top{display:flex;align-items:flex-start;gap:7px;}
.gud-cat-card-ic{width:22px;height:22px;border-radius:7px;background:var(--surface-2);color:var(--text-faint);display:grid;place-items:center;flex:none;}
.gud-cat-card-ic[data-tone="c-green"]{background:var(--c-green-weak);color:var(--c-green);}
.gud-cat-card-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
/* 2-line clamp, not single-line nowrap: this screen's whole job is telling
   similarly-named items apart while counting (e.g. two ink colors of the
   same printer cartridge) — a single truncated line risks exactly that
   misidentification, so density here stops short of cutting the name. */
.gud-cat-card-name{font-size:12.5px;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.gud-cat-card-loc{display:flex;align-items:center;gap:4px;font-size:10.5px;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gud-cat-card-expected{font-size:11px;color:var(--text-faint);}
.gud-cat-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;}
.gud-opname-input{max-width:100%;flex:1;min-width:0;}
.gud-opname-diff{font-family:var(--font-mono);font-weight:700;font-size:13px;flex:none;}
.gud-opname-diff[data-sign="zero"]{color:var(--c-green);} .gud-opname-diff[data-sign="plus"]{color:var(--c-blue);} .gud-opname-diff[data-sign="minus"]{color:var(--crit);}
/* Variance-note requirement (Doc 2 §10 gap-fix): the "why" behind an
   adjustment movement, required only when counted != expected. */
.gud-opname-note-input{width:100%;margin-top:6px;font-size:11.5px;}
.gud-opname-note{display:flex;align-items:center;gap:4px;font-size:10.5px;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── Analytics (Doc 2 §11) ───────────────────────────────────────────────── */
.gud-toplist{display:flex;flex-direction:column;gap:2px;}
.gud-toplist-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--border-faint);}
.gud-toplist-row[role="button"]{cursor:pointer;}
.gud-toplist-row:focus-visible{outline:2px solid var(--accent-line);outline-offset:-2px;border-radius:8px;}
.gud-toplist-row:first-child{border-top:none;}
.gud-toplist-row[data-act]{cursor:pointer;margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:9px;}
.gud-toplist-row[data-act]:hover{background:var(--hover);}
.gud-toplist-rank{width:20px;height:20px;border-radius:6px;background:var(--surface-2);color:var(--text-faint);font-size:11px;font-weight:600;display:grid;place-items:center;flex:none;font-family:var(--font-mono);}
.gud-toplist-name{flex:1;min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gud-toplist-val{font-family:var(--font-mono);font-size:12.5px;color:var(--text-dim);font-weight:700;}
.gud-qi-list{display:flex;flex-direction:column;gap:2px;}
.gud-qi-sentence{display:flex;align-items:center;gap:8px;padding:11px 0;font-size:13.5px;color:var(--text);border-top:1px solid var(--border-faint);}
.gud-qi-sentence:first-child{border-top:none;}
.gud-qi-sentence strong{color:var(--accent-fg);}

/* ── Item Detail: asset unit list (Doc 2 §08) ───────────────────────────── */
.gud-asset-list{display:flex;flex-direction:column;gap:6px;}
.gud-asset-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border-faint);cursor:pointer;font-family:var(--font-sans);text-align:left;}
.gud-asset-row:hover{border-color:var(--border-strong);}
.gud-asset-identity{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text);}
.gud-action-row{display:flex;gap:10px;flex-wrap:wrap;}

/* ── Dashboard (v1.29.7) — Overview Cards, Warehouse Health, Quick Actions,
   Category/Location Distribution, Forecast Summary. Low Stock/Recent
   Activity reuse .gud-toplist/.gud-hist-row above verbatim, no new CSS
   needed for either. auto-fit/minmax throughout (not fixed breakpoints)
   so every grid here reflows naturally at any width — "no horizontal
   scrolling" (brief, Section Layout) without a per-viewport rule. ────── */
.gud-ov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;}
.gud-ov-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:var(--shadow-sm);}
.gud-ov-ic{width:30px;height:30px;border-radius:9px;background:var(--surface-2);color:var(--text-faint);display:grid;place-items:center;margin-bottom:10px;}
.gud-ov-ic[data-tone="warn"]{background:var(--c-amber-weak);color:var(--c-amber);}
.gud-ov-ic[data-tone="crit"]{background:var(--crit-weak);color:var(--crit);}
.gud-ov-val{font-family:var(--font-display);font-weight:600;font-size:24px;letter-spacing:-.02em;line-height:1.1;}
.gud-ov-title{font-size:12.5px;color:var(--text-faint);margin-top:4px;}
.gud-ov-cap{font-size:11px;color:var(--text-ghost);margin-top:2px;}

.gud-health-banner{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;border:1px solid var(--border);background:var(--surface);}
.gud-health-banner[data-tone="ok"]{background:var(--c-green-weak);border-color:transparent;}
.gud-health-banner[data-tone="warn"]{background:var(--c-amber-weak);border-color:transparent;}
.gud-health-banner[data-tone="crit"]{background:var(--crit-weak);border-color:transparent;}
.gud-health-ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--surface);}
.gud-health-banner[data-tone="ok"] .gud-health-ic{color:var(--c-green);}
.gud-health-banner[data-tone="warn"] .gud-health-ic{color:var(--c-amber);}
.gud-health-banner[data-tone="crit"] .gud-health-ic{color:var(--crit);}
.gud-health-title{font-family:var(--font-display);font-weight:600;font-size:15px;}
.gud-health-sub{font-size:12.5px;color:var(--text-dim);margin-top:2px;}

.gud-qa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:2px;}
.gud-qa-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 10px;border-radius:14px;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);cursor:pointer;font-family:var(--font-sans);font-size:12.5px;font-weight:600;transition:border-color .12s,box-shadow .12s,transform .12s;}
.gud-qa-tile:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-1px);color:var(--text);}
.gud-qa-tile:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px;}

.gud-dist-row{display:grid;grid-template-columns:104px 1fr auto;align-items:center;gap:10px;padding:7px 0;}
.gud-dist-label{font-size:12.5px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gud-dist-bar{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;}
.gud-dist-fill{height:100%;background:var(--accent);border-radius:99px;}
.gud-dist-val{font-family:var(--font-mono);font-size:11.5px;color:var(--text-faint);font-weight:700;text-align:right;min-width:22px;}

.gud-fc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:12px;margin-top:4px;}
.gud-fc-cell{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;}
.gud-fc-label{font-size:11.5px;color:var(--text-faint);}

@media (max-width:480px){ .gud-dist-row{grid-template-columns:88px 1fr auto;} }

/* ── Inventory Intelligence (v1.29.8) — Insight Cards + per-row Why/reason
   text. Reuses .gud-ov-, .gud-toplist-, .gud-card, .gud-fc-, .gud-dist-
   verbatim for every other element on this screen — these three rules are
   the ONLY new classes it needs.
   v1.29.9 root-cause fix: this comment previously listed those prefixes
   slash-separated with a trailing star on each one, immediately followed
   by the next slash — asterisk directly touching slash closes a CSS
   comment early, wherever it appears, even as plain prose. That silently
   corrupted the BASE .gud-insight-card{} rule's selector (merged with the
   leftover comment text up to the next real opening brace), so the parser
   dropped the whole rule — only the later :hover/:focus-visible variants
   survived. With no border/background/box-shadow ever applied, the
   browser fell back to its native button chrome (a chunky "2px outset"
   bevel), which is the "visible outline" that was actually being
   reported — not a shared-component or Dashboard-inheritance issue at
   all, confirmed via CDP's own matched-styles cascade before this fix.
   Rewritten here with comma separators specifically so this explanation
   itself can never reintroduce the same trap. ───────────────────────── */
.gud-insight-card{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:var(--shadow-sm);cursor:pointer;font-family:var(--font-sans);transition:border-color .12s,box-shadow .12s,transform .12s;}
.gud-insight-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-1px);}
.gud-insight-card:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px;}
/* Explainability (Section 11): the `reason` sentence rides directly under
   the item name inside the SAME .gud-toplist-name cell — a display:block
   child forces its own line even though the parent truncates its own
   direct text to one line (white-space:nowrap there governs inline text
   flow, not a nested block box), so a long item name still ellipsizes
   correctly while the reason always gets its own full line beneath it. */
.gud-intel-reason{display:block;font-size:11.5px;font-weight:500;color:var(--text-faint);white-space:normal;margin-top:1px;}
.gud-toplist-val[data-sign="plus"]{color:var(--c-green);}
.gud-toplist-val[data-sign="minus"]{color:var(--crit);}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .gud-grid.-2,.gud-grid.-3{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .gud-btn.-big{min-width:0;}
}