/* ═══════════════════════════════════════════════════════════════════════
   30-utilities.css — UTILITY CLASSES (fine-grained, atomic)
   ═══════════════════════════════════════════════════════════════════════
   Use sparingly. Prefer component classes (20-components.css) for semantic
   meaning; use utilities only when a component needs one-off fine-tune.

   Rule of thumb: if you use the same 3-5 utility combo repeatedly, create
   a new component class instead (more maintainable).

   Organization:
     Spacing (padding/margin/gap)   — responsive 4-pt grid
     Display / flex / grid           — layout primitives
     Width / height                  — sizing
     Opacity                         — transparency
     Shadow                          — elevation
     Radius                          — corners (mirrors component radius)
     Position / overflow             — containment
     Cursor / pointer-events         — interaction
   ═══════════════════════════════════════════════════════════════════════ */

/* NOTE (18 May 2026): utilities are intentionally UNLAYERED so atomic classes
   like .p-3 / .mt-3 (specificity 0,0,1,0) beat the universal `* { padding:0;
   margin:0 }` reset in 60-dashboard-base.css. The previous `@layer utilities
   { ... }` wrapping caused all layered utilities to lose the unlayered-vs-
   layered cascade and resolved to 0px on plain divs (UX overhaul find, Agent 6). */

/* ─── Emoji font (31 May 2026 audit) — colour-emoji font so flag glyphs
   (e.g. 🇮🇳) render as a flag, not letter-pairs; replaces an inline
   style="font-family:…" that perf_lint flagged in stock_central. ─── */
.g24-emoji { font-family: 'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji','Twemoji Mozilla',sans-serif; }

/* ─── Spacing: Padding ─────────────────────────────────────────────── */
.p-0 { padding: var(--space-0); } .p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); } .p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); } .p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); } .p-8 { padding: var(--space-8); }

/* x/y axis padding */
.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }

/* Single-side padding */
.pt-0{padding-top:0} .pt-1{padding-top:var(--space-1)} .pt-2{padding-top:var(--space-2)} .pt-3{padding-top:var(--space-3)} .pt-4{padding-top:var(--space-4)} .pt-5{padding-top:var(--space-5)} .pt-6{padding-top:var(--space-6)}
.pr-0{padding-right:0} .pr-1{padding-right:var(--space-1)} .pr-2{padding-right:var(--space-2)} .pr-3{padding-right:var(--space-3)} .pr-4{padding-right:var(--space-4)}
.pb-0{padding-bottom:0} .pb-1{padding-bottom:var(--space-1)} .pb-2{padding-bottom:var(--space-2)} .pb-3{padding-bottom:var(--space-3)} .pb-4{padding-bottom:var(--space-4)} .pb-5{padding-bottom:var(--space-5)} .pb-6{padding-bottom:var(--space-6)}
.pl-0{padding-left:0} .pl-1{padding-left:var(--space-1)} .pl-2{padding-left:var(--space-2)} .pl-3{padding-left:var(--space-3)} .pl-4{padding-left:var(--space-4)}

/* ─── Spacing: Margin ──────────────────────────────────────────────── */
.m-0{margin:0} .m-1{margin:var(--space-1)} .m-2{margin:var(--space-2)} .m-3{margin:var(--space-3)} .m-4{margin:var(--space-4)} .m-5{margin:var(--space-5)} .m-6{margin:var(--space-6)} .m-auto{margin:auto}

.mx-0{margin-left:0;margin-right:0} .mx-auto{margin-left:auto;margin-right:auto}
.mx-1{margin-left:var(--space-1);margin-right:var(--space-1)} .mx-2{margin-left:var(--space-2);margin-right:var(--space-2)} .mx-3{margin-left:var(--space-3);margin-right:var(--space-3)} .mx-4{margin-left:var(--space-4);margin-right:var(--space-4)}

.my-0{margin-top:0;margin-bottom:0}
.my-1{margin-top:var(--space-1);margin-bottom:var(--space-1)} .my-2{margin-top:var(--space-2);margin-bottom:var(--space-2)} .my-3{margin-top:var(--space-3);margin-bottom:var(--space-3)} .my-4{margin-top:var(--space-4);margin-bottom:var(--space-4)} .my-5{margin-top:var(--space-5);margin-bottom:var(--space-5)}

.mt-0{margin-top:0} .mt-1{margin-top:var(--space-1)} .mt-2{margin-top:var(--space-2)} .mt-3{margin-top:var(--space-3)} .mt-4{margin-top:var(--space-4)} .mt-5{margin-top:var(--space-5)} .mt-6{margin-top:var(--space-6)} .mt-auto{margin-top:auto}
.mr-0{margin-right:0} .mr-1{margin-right:var(--space-1)} .mr-2{margin-right:var(--space-2)} .mr-3{margin-right:var(--space-3)} .mr-4{margin-right:var(--space-4)} .mr-auto{margin-right:auto}
.mb-0{margin-bottom:0} .mb-1{margin-bottom:var(--space-1)} .mb-2{margin-bottom:var(--space-2)} .mb-3{margin-bottom:var(--space-3)} .mb-4{margin-bottom:var(--space-4)} .mb-5{margin-bottom:var(--space-5)} .mb-6{margin-bottom:var(--space-6)} .mb-auto{margin-bottom:auto}
.ml-0{margin-left:0} .ml-1{margin-left:var(--space-1)} .ml-2{margin-left:var(--space-2)} .ml-3{margin-left:var(--space-3)} .ml-4{margin-left:var(--space-4)} .ml-auto{margin-left:auto}

/* ─── Flex gap ─────────────────────────────────────────────────────── */
.gap-0{gap:0} .gap-1{gap:var(--space-1)} .gap-2{gap:var(--space-2)} .gap-3{gap:var(--space-3)} .gap-4{gap:var(--space-4)} .gap-5{gap:var(--space-5)} .gap-6{gap:var(--space-6)}

/* ─── Display ──────────────────────────────────────────────────────── */
.block        { display: block; }
.inline       { display: inline; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.hidden       { display: none; }

/* Flex */
.flex-row        { flex-direction: row; }
.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.flex-nowrap     { flex-wrap: nowrap; }
.flex-1          { flex: 1 1 0; min-width: 0; }
.flex-2          { flex: 2 1 0; min-width: 0; }
.flex-3          { flex: 3 1 0; min-width: 0; }
.flex-auto       { flex: 1 1 auto; }
.flex-initial    { flex: 0 1 auto; }
.flex-none       { flex: none; }
.flex-grow       { flex-grow: 1; }
.flex-shrink-0   { flex-shrink: 0; }

.items-start     { align-items: flex-start; }
.items-center    { align-items: center; }
.items-end       { align-items: flex-end; }
.items-stretch   { align-items: stretch; }
.items-baseline  { align-items: baseline; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

/* Grid (simple presets) */
.grid-cols-1    { grid-template-columns: 1fr; }
.grid-cols-2    { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3    { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4    { grid-template-columns: repeat(4, 1fr); }
.grid-cols-auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ─── Width / Height ───────────────────────────────────────────────── */
.w-auto    { width: auto; }
.w-full    { width: 100%; }
.w-screen  { width: 100vw; }
.w-fit     { width: fit-content; }
.w-6       { width: 1.5rem; }
.w-28      { width: 7rem; }
.min-w-16  { min-width: 4rem; }

.max-w-sm  { max-width: var(--container-sm); }
.max-w-md  { max-width: var(--container-md); }
.max-w-lg  { max-width: var(--container-lg); }
.max-w-xl  { max-width: var(--container-xl); }
.max-w-full{ max-width: 100%; }

/* Centered, narrow content container — premium "reading column" layout.
   Centers a focused page (KPI band + table + cards) instead of going edge-to-
   edge full-bleed. Desktop: capped width + generous side gutters; mobile: full
   width with thumb-friendly gutters. Added 31 May 2026 (B12 Fee Optimizer).
   Width can be tuned per page with `--g24-page-container-max`. */
.g24-page-container {
  --g24-page-container-max: 920px;
  width: 100%;
  max-width: var(--g24-page-container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 768px) {
  .g24-page-container { padding-inline: var(--space-10); }
}

.min-w-0   { min-width: 0; }

.h-auto    { height: auto; }
.h-full    { height: 100%; }
.h-screen  { height: 100vh; }
.h-fit     { height: fit-content; }

.min-h-0     { min-height: 0; }
.min-h-screen{ min-height: 100vh; }

/* ─── Opacity ──────────────────────────────────────────────────────── */
.opacity-0   { opacity: var(--opacity-0); }
.opacity-10  { opacity: var(--opacity-10); }
.opacity-20  { opacity: var(--opacity-20); }
.opacity-30  { opacity: var(--opacity-30); }
.opacity-40  { opacity: var(--opacity-40); }
.opacity-50  { opacity: var(--opacity-50); }
.opacity-60  { opacity: var(--opacity-60); }
.opacity-70  { opacity: var(--opacity-70); }
.opacity-80  { opacity: var(--opacity-80); }
.opacity-90  { opacity: var(--opacity-90); }
.opacity-100 { opacity: var(--opacity-100); }

/* ─── Shadow ───────────────────────────────────────────────────────── */
.shadow-none { box-shadow: var(--shadow-none); }
.shadow-xs   { box-shadow: var(--shadow-xs); }
.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }
.shadow-xl   { box-shadow: var(--shadow-xl); }
.shadow-2xl  { box-shadow: var(--shadow-2xl); }
.shadow-inner{ box-shadow: var(--shadow-inner); }

/* ─── Position ─────────────────────────────────────────────────────── */
.static    { position: static; }
.relative  { position: relative; }
.absolute  { position: absolute; }
.fixed     { position: fixed; }
.sticky    { position: sticky; }
.inset-0   { inset: 0; }
.top-0     { top: 0; }
.right-0   { right: 0; }
.bottom-0  { bottom: 0; }
.left-0    { left: 0; }

/* ─── Overflow ─────────────────────────────────────────────────────── */
.overflow-auto     { overflow: auto; }
.overflow-hidden   { overflow: hidden; }
.overflow-x-auto   { overflow-x: auto; }
.overflow-y-auto   { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }

/* ─── Cursor / pointer ─────────────────────────────────────────────── */
.cursor-pointer      { cursor: pointer; }
.cursor-not-allowed  { cursor: not-allowed; }
.cursor-text         { cursor: text; }
.cursor-wait         { cursor: wait; }
.cursor-help         { cursor: help; }
.cursor-grab         { cursor: grab; }
.cursor-default      { cursor: default; }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ─── Select / user-select ─────────────────────────────────────────── */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all  { user-select: all; }

/* ─── Z-index (mirrors token tiers) ────────────────────────────────── */
.z-base     { z-index: var(--z-base); }
.z-dropdown { z-index: var(--z-dropdown); }
.z-sticky   { z-index: var(--z-sticky); }
.z-modal    { z-index: var(--z-modal); }
.z-popover  { z-index: var(--z-popover); }
.z-tooltip  { z-index: var(--z-tooltip); }
.z-toast    { z-index: var(--z-toast); }

/* ─── Text tone — replaces `el.style.color = ...` in JS ──────────────
   Universal text-color helpers driven by theme tokens. Add the class,
   not an inline style. Pairs cleanly with font-weight / spacing utils. */
.is-tone-success { color: var(--tone-success-fg); }
.is-tone-warn    { color: var(--tone-warn-fg); }
.is-tone-danger  { color: var(--tone-danger-fg); }
.is-tone-info    { color: var(--brand-accent); }
.is-tone-muted   { color: var(--color-text-muted); }

/* ─── Form grid ────────────────────────────────────────────────────
   Canonical form layout — label left, control right; stacks on mobile.
   Added 17 May 2026 UX-Responsive Wave A. Use INSTEAD of raw
   <div class="form-row"> when blueprint migration begins. */
.g24-form-grid {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: var(--space-3, 12px) var(--space-4, 16px);
  align-items: center;
}
.g24-form-grid > label { font-weight: var(--weight-medium, 500); }
@media (max-width: 640px) {
  .g24-form-grid { grid-template-columns: 1fr; gap: var(--space-2, 8px); }
}

/* ── Global scrollbar — theme-aware ────────────────────────────────────────
   Firefox: scrollbar-width + scrollbar-color
   Chrome/Edge/Safari: ::-webkit-scrollbar-* pseudo-elements
   All values use design-system tokens → auto light/dark.
   Added 12 May 2026.
────────────────────────────────────────────────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-default) transparent;
}

::-webkit-scrollbar {
    width : 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background   : transparent;
    border-radius: var(--radius-pill, 999px);
}
::-webkit-scrollbar-thumb {
    background   : var(--color-border-default);
    border-radius: var(--radius-pill, 999px);
    border       : 1px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background   : var(--color-text-muted);
    background-clip: content-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* ── Keyboard shortcut hint (kbd element + .kbd-hint label) ────────────
   Added 17 May 2026 (Universal CSS sweep — promoted from .lc-kbd-hint).
   Inline keyboard-shortcut affordance for power-user features (e.g. "/" focus).
   USE: <span class="kbd-hint">Press <kbd>/</kbd> to search</span>
────────────────────────────────────────────────────────────────────────── */
.kbd-hint {
  margin-left: 6px;
  font-size: var(--text-2xs-half);
  color: var(--text-muted);
  font-weight: var(--weight-regular, 400);
  text-transform: none;
  letter-spacing: 0;
}

kbd,
.kbd-hint kbd {
  display: inline-block;
  padding: 0 4px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 0.85em;
  color: var(--text);
}

@media (max-width: 768px) {
  /* Touch users don't need keyboard hints */
  .kbd-hint { display: none; }
}

/* ─── Wave 13 (18 May 2026) — promoted from fba.js inline-style sweep ──
   Add new utilities here only when 3+ blueprints will need them.
   None of these classes carry hex colour — all tokens.
────────────────────────────────────────────────────────────────────────── */

/* Tiny + extra-small font sizes (already had .text-xs etc) */
.text-2xs        { font-size: var(--text-2xs); }

/* Line-heights */
.leading-tight   { line-height: 1.3; }
.leading-snug    { line-height: 1.5; }

/* Half-opacity row dim — alias of .is-dimmed but state-agnostic */
.opacity-half    { opacity: 0.5; }

/* Generic row toolbar — replaces `display:flex;justify-content:space-between;align-items:center` */
.row-spaced      { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row-inline      { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* 40×40 thumbnail wrapper / fallback for product images */
.thumb-40 {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid var(--card-border, var(--color-border-default, #e5e7eb));
  object-fit: contain;
}
.thumb-40-fallback {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid var(--card-border, var(--color-border-default, #e5e7eb));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* Monospace inline code-like spans without <code> overhead */
.mono-xs         { font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, monospace); font-size: var(--text-xs); }
.mono-sm         { font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, monospace); font-size: var(--text-sm); }

/* Width helpers for input-in-keyword-tags pattern */
.w-input-sm      { width: 110px; }
.w-input-md      { width: 200px; }
.w-input-lg      { width: 220px; }

/* Max-height (small + medium) — scroll-pane sizing */
.max-h-180       { max-height: 180px; }
.max-h-200       { max-height: 200px; }

/* Min-height — reserve a single line so dynamic text changes don't jump */
.min-h-4         { min-height: 16px; }
.min-h-6         { min-height: 24px; }

/* Borderless border-collapse table (for compact list tables in IIFEs) */
.table-collapse  { border-collapse: collapse; }

/* Fixed-width column helpers for dense tables */
.col-w-50   { width: 52px; }
.col-w-80   { width: 80px; }
.col-w-100  { width: 100px; }
.col-w-110  { width: 110px; }
.col-w-120  { width: 120px; }

/* Tight cell padding pairs */
.cell-pad-tight  { padding: 6px 8px; }
.cell-pad-medium { padding: 6px 10px; }

/* Dense-row table row — bottom hairline, no extra background */
.dense-row {
  border-bottom: 1px solid var(--card-border, var(--color-border-default, #e5e7eb));
}

/* ─── Accessibility (Wave 13-A, 18 May 2026) ──────────────────────────
   Screen-reader-only text — visually hidden but exposed to AT.
   Use for icon-only buttons where aria-label is not preferred, OR
   for invisible context (e.g. "Loading…" status regions).
   ─────────────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip-link — keyboard-only "Skip to main content" link, hidden until focused.
   Sits at the very top of <body>; jumps to #main landmark.
   See base.html (Wave 13-A) and 30-utilities.css. */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: 10000;
  padding: 8px 14px;
  background: var(--color-surface-raised, #fff);
  color: var(--color-text-primary, #111);
  border: 2px solid var(--color-brand, #2563eb);
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: top 120ms ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 8px;
  outline: 2px solid var(--color-brand, #2563eb);
  outline-offset: 2px;
}

/* Universal focus-ring fallback. Add `.focus-ring` to anything that lacks
   a component-level :focus-visible style. Browsers that respect
   :focus-visible only show the ring during keyboard navigation. */
.focus-ring:focus-visible {
  outline: 2px solid var(--color-brand, #2563eb);
  outline-offset: 2px;
  border-radius: 4px;
}