/* ============================================================================
   Base: reset, typography, focus, direction-neutral primitives.
   All spacing uses logical properties so RTL is native, never mirrored.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  min-height: 100dvh;
  font-feature-settings: "cv05" 1, "ss01" 1;
}

::selection { background: var(--color-selection); }

img, video, canvas { display: block; max-width: 100%; }
/*
 * Icons sit inside sentences as often as they sit inside buttons. As blocks they
 * break the line they were meant to annotate; inline-block keeps them on it, and
 * a flex or grid parent blockifies them anyway, so button rows are unaffected.
 */
svg { display: inline-block; vertical-align: middle; max-width: 100%; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: none; padding: 0; }
button:disabled { cursor: not-allowed; }

a {
  color: var(--color-accent-text);
  font-weight: var(--weight-medium);
  text-decoration: none;
  text-underline-offset: 2px;
}
a:hover { color: var(--color-accent); text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
h4, h5, h6 { font-size: var(--text-base); }

p { text-wrap: pretty; }

ul, ol { padding-inline-start: 0; list-style: none; }

hr {
  border: none;
  border-block-start: 1px solid var(--color-border);
  margin-block: var(--space-4);
}

code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; }

kbd {
  display: inline-flex;
  align-items: center;
  min-width: 1.5em;
  justify-content: center;
  padding: 1px var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-block-end-width: 2px;
  border-radius: var(--radius-xs);
  background: var(--color-surface-sunken);
  font-size: var(--text-2xs);
  color: var(--color-text-secondary);
}

/* ── focus: always visible, never removed ───────────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 1px;
  border-radius: var(--radius-sm);
}
/* Controls that already own a border get a ring instead of an outline so the
   focus indicator follows the control's own radius rather than a rectangle. */
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible,
.btn:focus-visible,
.nav-item:focus-visible,
.filter-chip:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ── skip link ──────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--space-4);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
}
.skip-link:focus { inset-block-start: var(--space-4); }

/* ── screen-reader utilities ────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── numeric content: tabular in both directions ────────────────────────── */
.num,
td.num,
th.num,
.metric-value,
.money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/*
 * Numbers, SKUs and Latin identifiers embedded in Hebrew/Arabic text must keep
 * their own direction or "12.5%" renders as "%12.5". `bdi` + isolation does this
 * without hard-coding a direction on the container.
 */
.ltr-embed,
bdi.num {
  unicode-bidi: isolate;
  direction: ltr;
}

.dir-auto { unicode-bidi: plaintext; }

/* ── shared text helpers ────────────────────────────────────────────────── */
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-positive { color: var(--color-positive); }
.text-negative { color: var(--color-negative); }
.text-warning { color: var(--color-warning); }
.text-2xs { font-size: var(--text-2xs); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }
.text-medium { font-weight: var(--weight-medium); }
.text-semibold { font-weight: var(--weight-semibold); }
/*
 * Small section eyebrow. Sentence case with a little weight reads calmer than
 * uppercase tracking at this size, and it is what the reference system uses for
 * every list label — so this class keeps its name and loses the shouting.
 */
.text-caps {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  color: var(--color-text-tertiary);
}
/* A label above a value, not a shout: the size and colour carry the demotion. */
.text-uppercase {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  color: var(--color-text-tertiary);
}
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }
/* Logical alignment so the same class works in both writing directions. */
.text-end { text-align: end; }
.text-start { text-align: start; }
.text-center { text-align: center; }

/* ── layout helpers ─────────────────────────────────────────────────────── */
.stack { display: flex; flex-direction: column; }
.stack-1 { gap: var(--space-1); }
.stack-2 { gap: var(--space-2); }
.stack-3 { gap: var(--space-3); }
.stack-4 { gap: var(--space-4); }
.stack-5 { gap: var(--space-5); }
.stack-6 { gap: var(--space-6); }
.stack-8 { gap: var(--space-8); }
.row { display: flex; align-items: center; }
.row-2 { gap: var(--space-2); }
.row-3 { gap: var(--space-3); }
.row-4 { gap: var(--space-4); }
.row-6 { gap: var(--space-6); }
.row-wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.push-end { margin-inline-start: auto; }
.hidden { display: none !important; }

.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid-6 { gap: var(--space-6); }
.grid-8 { gap: var(--space-8); }

/* ── print ──────────────────────────────────────────────────────────────── */
/*
 * The print layout renders on paper and on screen (a preview before printing),
 * so it needs a page of its own rather than the shell's frame.
 */
.print-body {
  background: #fff;
  color: var(--color-text);
  padding: var(--space-8);
  max-width: 900px;
  margin-inline: auto;
}
@media print { .print-body { padding: 0; max-width: none; } }

@media print {
  :root { --color-canvas: #fff; --color-surface: #fff; --color-backdrop: #fff; }
  .app-sidebar, .app-topbar, .app-context, .mobile-nav, .no-print, .toast-region { display: none !important; }
  .app-frame, .app-shell { background: #fff !important; margin: 0 !important; border-radius: 0 !important; }
  .app-main { padding: 0 !important; }
  body { background: #fff; font-size: 11pt; }
  .card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  table { break-inside: auto; }
  tr { break-inside: avoid; break-after: auto; }
  thead { display: table-header-group; }
}