/*
 * R02/R03/R04 — styles for the shared component kit.
 *
 * Loaded after a portal's own stylesheet, so it can rely on the shared tokens
 * and on the portal's base type. Everything here is namespaced `k-` so it can
 * never collide with the three portals' existing class names, which were
 * written independently and do overlap with each other.
 *
 * No colour is declared literally. If you need one that is not a token, the
 * token file is where it goes — scripts/ops/check-design-tokens.js will fail
 * this file otherwise, which is deliberate.
 */

/* ── notice & tag (R02) ────────────────────────────────────────────────────
   UI.notice and UI.tag build these class names and the kit shipped neither rule,
   so all three portals restated them. HR and sales had already drifted (0.7rem
   against .68rem) and the grower portal had none at all — a UI.notice() there
   rendered as unstyled text, "bad" indistinguishable from "good". Room for them
   here is what the palette.css split bought.
   HR and sales' values are canonical, being the two with real call sites, plus
   sales' `white-space: nowrap` and var(--radius-sm) for the notice's 8px. */
.tag { display: inline-block; font-size: 0.7rem; letter-spacing: 0.05em;
  padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--hairline); color: var(--ink-muted); }
.tag.good { color: var(--good); border-color: var(--good); }
.tag.warn { color: var(--warn); border-color: var(--warn); }
.tag.bad { color: var(--bad); border-color: var(--bad); }

.notice { border: 1px solid var(--hairline); border-left: 3px solid var(--warn);
  background: var(--cream-muted); border-radius: var(--radius-sm);
  padding: 0.8rem 1rem; font-size: 0.85rem; margin-bottom: 1rem; }
.notice.good { border-left-color: var(--good); }
.notice.bad { border-left-color: var(--bad); }
.notice > :last-child { margin-bottom: 0; }

/* ── empty & loading states (R08 foundation) ──────────────────────────────── */
.k-empty {
  text-align: center; padding: var(--s-8) var(--s-4);
  color: var(--ink-muted); font-size: var(--step-small);
}
.k-empty strong { display: block; color: var(--ink); font-weight: var(--weight-ui); margin-bottom: var(--s-1); }
.k-skeleton { display: flex; flex-direction: column; gap: var(--s-2); }
.k-skeleton span {
  display: block; height: 1rem; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--cream-muted), var(--beige-alt), var(--cream-muted));
  background-size: 200% 100%;
  animation: k-shimmer 1.1s linear infinite;
}
@keyframes k-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .k-skeleton span { animation: none; }
}

/* ── data table (R04) ─────────────────────────────────────────────────────── */
.k-table-tools {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  align-items: center; margin-bottom: var(--s-3);
}
.k-table-tools input[type="search"] {
  flex: 1 1 12rem; min-width: 0; max-width: 22rem;
  font: inherit; font-size: var(--step-small); color: var(--ink);
  background: var(--cream-muted); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: var(--s-2) var(--s-3); min-height: var(--tap);
}
.k-count { font-size: var(--step-tiny); color: var(--ink-muted); margin-left: auto; }
/* The truncation warning. It is a --status-warn-ink border rather than a quiet
   caption on purpose: a table that is hiding rows should look like one. */
.k-count.k-capped { color: var(--status-warn-ink); }

.k-table-scroll { overflow-x: auto; }
th.k-sortable button {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: inherit; letter-spacing: inherit; text-transform: inherit;
  display: inline-flex; align-items: center; gap: var(--s-1);
}
th.k-sortable button:hover { color: var(--ink); }
th.k-sortable button::after { content: "↕"; opacity: 0.35; font-size: 0.9em; }
th[aria-sort="ascending"] button::after { content: "↑"; opacity: 1; }
th[aria-sort="descending"] button::after { content: "↓"; opacity: 1; }

.k-pager { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: var(--s-3); }
.k-pager .k-page-info { font-size: var(--step-tiny); color: var(--ink-muted); }
.k-pager button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Focus must always be visible — several portal rules remove outlines. */
.k-table-tools :focus-visible,
.k-pager :focus-visible,
th.k-sortable button:focus-visible {
  outline: 2px solid var(--sage-dark);
  outline-offset: 2px;
}

/* Screen-reader-only, for the aria-live region that announces table changes. */
.k-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── R05 — accessibility baseline ─────────────────────────────────────────
   Applies to all three portals, because kit.css is loaded by all three.

   The rule that motivates this block: several portal stylesheets set
   `outline: none` on :focus (the grower portal's .org-filter, for one), which
   removes the only cue a keyboard user has about where they are. :focus-visible
   is the right hook — it fires for keyboard focus and stays out of the way for
   a mouse click. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--sage-dark);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Tab strips are a tablist: one tab stop for the whole strip, arrows to move
   between tabs. Without the roving tabindex a keyboard user has to press Tab
   once per tab to get past the navigation. */
[role="tablist"] [role="tab"][aria-selected="false"] { }

/* A panel that receives focus programmatically on tab change must not then
   show a focus ring as though the user had tabbed to it. */
[role="tabpanel"]:focus { outline: none; }
[role="tabpanel"]:focus-visible { outline: 2px solid var(--sage-dark); outline-offset: 4px; }

/* Skip link — the first tab stop on every portal, hidden until focused. */
.k-skip {
  position: absolute; left: var(--s-2); top: -3rem; z-index: 70;
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: var(--s-2) var(--s-4); font-size: var(--step-small);
  transition: top 120ms ease-out;
}
.k-skip:focus { top: var(--s-2); }
@media (prefers-reduced-motion: reduce) { .k-skip { transition: none; } }

/* ── R07 — reduced motion, globally ───────────────────────────────────────
   The kit already disables its own toast, skeleton and backdrop animations
   under prefers-reduced-motion. This extends the courtesy to whatever the
   portals animate themselves, which is the point of the media query: a user who
   has asked the OS for less movement should not have to ask each application. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── R06 — responsive tables, tap targets and density ─────────────────────── */

/* Density. `comfortable` is the default; `compact` fits roughly a third more
   rows on screen, which is what the inventory and audit views actually want.
   Set on <html> so it applies to every table at once and survives a re-render. */
:root {
  --row-pad-y: 0.5rem;
  --row-pad-x: 0.6rem;
  --row-font: 0.86rem;
}
:root[data-density="compact"] {
  --row-pad-y: 0.22rem;
  --row-pad-x: 0.45rem;
  --row-font: 0.8rem;
}
.k-table table { font-size: var(--row-font); }
.k-table th, .k-table td { padding: var(--row-pad-y) var(--row-pad-x); }

.k-density { display: inline-flex; gap: 0; border: 1px solid var(--hairline); border-radius: 999px; overflow: hidden; }
.k-density button {
  font: inherit; font-size: var(--step-tiny); line-height: 1;
  background: none; border: 0; cursor: pointer; color: var(--ink-muted);
  padding: 0.4rem 0.7rem; min-height: 28px;
}
.k-density button[aria-pressed="true"] { background: var(--tint-sage); color: var(--ink); }

/* WCAG 2.2 AA (2.5.8) asks for a 24px minimum target. The column-sort buttons
   R04 introduced measured 18px, and the review/chip buttons 29px — fine for a
   mouse, poor for a thumb. On a COARSE pointer they go to the portals' own 44px
   standard; on a mouse 24px is enough and keeps dense tables dense. */
.k-table th.k-sortable button { min-height: 24px; padding: 0.15rem 0; }
@media (pointer: coarse) {
  .k-table th.k-sortable button { min-height: 44px; }
  .k-density button { min-height: 44px; }
}

/* Card stack.
   Below this width a wide table cannot be read without scrolling sideways —
   the HR document register measured 747px inside a 375px viewport. Each row
   becomes a card and each cell carries its column name, so the data is read
   top-to-bottom instead of dragged left to right.
   `data-label` is emitted by UI.dataTable; without it a cell simply shows its
   value, which is still better than a 747px scroll. */
@media (max-width: 40rem) {
  .k-table.k-stack table,
  .k-table.k-stack thead,
  .k-table.k-stack tbody,
  .k-table.k-stack tr,
  .k-table.k-stack td { display: block; width: auto; }
  .k-table.k-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .k-table.k-stack tr {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    background: var(--cream);
    padding: var(--s-2) var(--s-3);
    margin-bottom: var(--s-2);
  }
  .k-table.k-stack td { border: 0; padding: 0.3rem 0; display: flex; gap: var(--s-3); align-items: baseline; }
  .k-table.k-stack td::before {
    content: attr(data-label);
    flex: 0 0 8.5rem;
    font-size: var(--step-tiny);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .k-table.k-stack td:empty { display: none; }
  .k-table.k-stack td.num { justify-content: flex-start; text-align: left; }
  .k-table-scroll { overflow-x: visible; }
}