/* Minimal readable defaults — no framework, no build step.
   Normalized to the Phase 2 UI-SPEC scale: 4/8/16/24/32/48px spacing,
   16/14/20/24px type at weights 400/600, accent #2563eb, destructive #b91c1c,
   price-cue amber #b45309 (Phase 18, D-14 — the 4th global colour role). */
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 0;
  background: #fafafa;
  color: #222;
  font-size: 16px;
  line-height: 1.5;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px 32px;
}

/* Navigation: secondary surface, accent links, active = accent + 600. */
nav {
  display: flex;
  gap: 16px;
  background: #ffffff;
  border-bottom: 1px solid #d9d9d9;
  margin: 0 -16px 32px;
  padding: 8px 16px;
}

nav a {
  text-decoration: none;
}

nav a.active {
  font-weight: 600;
}

/* Server-mode indicator (SRV-01/02): the PostgreSQL-backed central server gets
   a visually distinct dark nav so it can never be mistaken for a local SQLite
   client — both render this same base.html otherwise. */
nav.server-mode {
  background: #1e293b;
  border-bottom-color: #0f172a;
}

nav.server-mode a {
  color: #e2e8f0;
}

nav.server-mode a.active {
  color: #ffffff;
}

/* Товары toolbar (Phase 24, D-01/D-04/D-05): always-visible two-group
   action toolbar reusing .form-actions/.button/.muted verbatim. */
.toolbar {
  display: flex;
  gap: 32px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.toolbar-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Mobile tab bar (Phase 24, D-09/MOB-01): persistent, top-docked 7-tab nav
   on every /m/* page. Sibling of {% block back %}, full viewport width. */
nav.mobile-tabbar {
  display: flex;
  background: #ffffff;
  border-bottom: 1px solid #d9d9d9;
  position: sticky;
  top: 0;
  z-index: 1;
}

nav.mobile-tabbar a {
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-align: center;
  padding: 4px;
}

nav.mobile-tabbar a.active {
  font-weight: 600;
  border-bottom: 3px solid #2563eb;
}

a {
  color: #2563eb;
}

/* Typography: 4 sizes, 2 weights. */
h1 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

label {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}

/* Inline form (home page correction form). */
form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

/* Single-column forms (product create/edit). */
form.stacked-form {
  display: block;
  max-width: 480px;
}

.field {
  margin-bottom: 16px;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

input {
  padding: 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 16px;
}

.stacked-form input {
  width: 100%;
  box-sizing: border-box;
}

input[type="number"] {
  width: 6rem;
}

/* Select controls match the input treatment (Phase 5, /history filters). */
select {
  padding: 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 16px;
  height: 36px;
  background: #ffffff;
}

/* History filter bar (Phase 5, D-14). */
.filter-bar {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  margin-bottom: 24px;
}

.filter-bar .field {
  margin-bottom: 0;
}

/* Period filter preset bar (Phase 6, D-01): reused by every period-based report. */
.preset-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

/* Shared pagination bar (Phase 14, LIST-01, D-01/D-03): reused by every list page. */
.pagination {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  flex-wrap: wrap;
}

.pagination .current-page {
  padding: 8px;
  background: #e8effd;
  font-size: 14px;
}

/* Per-column header-row filters (Phase 14, LIST-02, D-04). */
.filter-row th {
  background: #ffffff;
  padding: 8px;
}

.filter-row input,
.filter-row select {
  width: 100%;
  box-sizing: border-box;
}

/* Visible focus state — never outline:none without replacement. */
input:focus,
select:focus,
button:focus-visible,
a:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}

button,
a.button {
  display: inline-block;
  padding: 8px 16px;
  background: #2563eb;
  color: #ffffff;
  border: 1px solid #2563eb;
  border-radius: 4px;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}

button:hover,
a.button:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

button.secondary {
  background: #ffffff;
  color: #222;
  border: 1px solid #d9d9d9;
}

button.danger {
  background: #b91c1c;
  border-color: #b91c1c;
}

button:disabled {
  opacity: 0.6;
  cursor: wait;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  background: #ffffff;
}

th,
td {
  border: 1px solid #d9d9d9;
  padding: 8px 12px;
  text-align: left;
}

th {
  background: #f0f0f0;
  font-size: 14px;
  font-weight: 600;
}

/* Numeric cells: right-aligned, lining figures. */
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.muted {
  color: #6b7280;
}

.error {
  color: #b91c1c;
  font-size: 14px;
  margin: 4px 0 0;
}

.error-block {
  background: #fdecec;
  color: #b91c1c;
  padding: 8px 16px;
  border-radius: 4px;
  margin-bottom: 16px;
}

.empty-state {
  padding: 48px 0;
  text-align: center;
}

/* Search match highlight: accent-tinted background, text color unchanged. */
mark {
  background: #e8effd;
  color: inherit;
}

/* Sale basket (Phase 4): line inputs fill their table cell. */
.basket td input {
  width: 100%;
  box-sizing: border-box;
}

/* Selected-customer chip (Phase 4, D-05): secondary surface, no new color role. */
.customer-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 8px;
  font-size: 16px;
  font-weight: 400;
}

/* Batch picker (Phase 9): nested batch table under a form field / basket line. */
.batch-picker { margin: 8px 0 0; }                         /* sm gap instead of the default table margin-top */
.batch-picker tr.selected-batch td { background: #e8effd; } /* selection highlight — existing mark/search tint, NOT a new color */

/* Sales name->code search dropdown (Phase 12, D-09): click-to-select list
   rendered below the sales name input. Reuses the existing token scale and
   the existing mark/search tint (#e8effd) — no new color role. */
.name-search-list { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid #d9d9d9; background: #ffffff; }
.name-search-list li button { display: block; width: 100%; padding: 8px; text-align: left; }
.name-search-list li button:hover, .name-search-list li button:focus-visible { background: #e8effd; }

/* Price cue (PROD-06 / D-14): reference-deviation hint on ДЦ/ПЦ inputs.
   Border + tint only — colour alone fails WCAG 1.4.1 (Use of Color); no
   text/icon badge is rendered alongside the class toggle (price-cue.js
   only sets classList), so this cue is NOT WCAG 1.4.1 compliant as shipped.
   18-REVIEW WR-03: if compliance is required, add a visible text/icon cue
   driven by the same price-below/price-above class toggle.
   The blue fill is #eff6ff and deliberately NOT #e8effd — that tint is the
   established search-match/selection token (mark, .selected-batch,
   .name-search-list hover, .mobile-card.selected). #2563eb is the existing
   accent token, reused here — no new colour role for the border. */
.price-below { border-color: #b45309; background: #fef9e7; }
.price-above { border-color: #2563eb; background: #eff6ff; }

/* Text-link delete action (Phase 19, PROD-02): reuses the destructive token
   (#b91c1c) already named at button.danger above — no new color role. Keeps
   the browser's default underline (no text-decoration:none) so the link
   reads as interactive by shape, not color alone (WCAG 1.4.1). */
a.link-danger {
  color: #b91c1c;
}
a.link-danger:hover {
  color: #7f1414;
}

/* Mobile flow (Phase 11): home tile grid, wizard shell, batch/basket cards.
   All values reuse the existing token scale; the only new number is the
   44px touch-target minimum (spacing exception, see UI-SPEC). */
.mobile-shell { max-width: 480px; margin: 0 auto; padding: 16px; }
.mobile-back { display: inline-block; min-height: 44px; line-height: 44px; }
.mobile-step-indicator { font-size: 14px; color: #6b7280; margin: 0 0 16px; }

.mobile-tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mobile-tile {
  display: flex; align-items: center; justify-content: center;
  min-height: 88px; padding: 16px;
  background: #ffffff; border: 1px solid #d9d9d9; border-radius: 4px;
  font-size: 16px; font-weight: 600; text-decoration: none; color: #222;
  text-align: center;
}

.mobile-card {
  display: block; width: 100%; min-height: 44px;
  background: #ffffff; border: 1px solid #d9d9d9; border-radius: 4px;
  padding: 16px; margin-bottom: 24px; text-align: left;
}
.mobile-card.selected { background: #e8effd; }

/* 11-UAT.md Test 4 (Bug A): batch-selection cards render as
   <button class="mobile-card"> — the generic `button { color: #ffffff }`
   rule otherwise wins over `.mobile-card`'s white background, making card
   text (price/expiry/quantity/comment) invisible until hovered. Scoped to
   `button.mobile-card` ONLY — every other `.mobile-card` usage (div/label/a:
   history cards, receipts batch chooser, corrections mode picker, write-off
   reason rows, search results) already renders with its own correct color
   and must not be touched. */
button.mobile-card { color: #222; }
button.mobile-card:hover { background: #ffffff; border-color: #d9d9d9; }
button.mobile-card.selected:hover { background: #e8effd; }

.mobile-actions { display: flex; gap: 16px; margin-top: 24px; }
.mobile-actions button, .mobile-actions a.button { flex: 1; min-height: 44px; }

/* Dashboard metric tiles (Phase 17, D-04): gross/net-profit + stock-valuation
   tiles on /finance and /m/finance. Reuses ONLY existing token values —
   identical white surface/border/radius/padding to .mobile-tile /
   .customer-chip, and the same 16px gap as .mobile-tile-grid. No new
   color/size token introduced (UI-SPEC Q1). */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* WR-01 fix: the mobile shell (480px, see .mobile-shell above) is too narrow
   for 3 columns of tile-heading + bold money figure + caveat line(s) — mirrors
   .mobile-tile-grid's 2-column choice for the same viewport. */
.mobile-shell .metric-grid {
  grid-template-columns: 1fr 1fr;
}

.metric-tile {
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 16px;
}

.tile-label {
  font-weight: 600;
  margin: 0 0 8px;
}

/* Accessibility utility (Plan 05): keeps a native input focusable/keyboard-
   operable (e.g. the write-off reason radio inside a .mobile-card row) while
   visually hiding it — the wrapping label is the tap/visual target. Standard
   clip-rect technique, not a new design token. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Phase 21 (CUST-01..04): one repeatable contact row (contact_row.html)
   inside form.stacked-form. .stacked-form input { width: 100% } (above)
   would otherwise stretch the input to the container's full width and push
   the remove button out of the row, so flex:1 is required here. Reuses only
   the existing 8px (sm) spacing token — no new value introduced. */
.contact-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.contact-row input {
  flex: 1;
}