/* ── Local fonts ──────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'DejaVu Sans';
  src: url('/static/fonts/DejaVuSans.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DejaVu Sans';
  src: url('/static/fonts/DejaVuSans-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DejaVu Sans';
  src: url('/static/fonts/DejaVuSans-Oblique.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'DejaVu Sans';
  src: url('/static/fonts/DejaVuSans-BoldOblique.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'DejaVu Sans Mono';
  src: url('/static/fonts/DejaVuSansMono.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DejaVu Sans Mono';
  src: url('/static/fonts/DejaVuSansMono-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── CSS theme variables ─────────────────────────────────────────────────────
   All colors are stored as RGB triplets so Tailwind opacity modifiers work:
   bg-surface/50 → background: rgb(var(--surface) / 0.5)
────────────────────────────────────────────────────────────────────────────── */

/* Brand constants (same in both themes) */
:root {
  --primary:        156 23 39;   /* #9C1727 — Пригощайся red */
  --primary-hover:  176 30 48;   /* slightly lighter red */
  --gold:           205 160 83;  /* #CDA053 — brand gold */
  --gold-muted:     160 125 58;  /* darker gold */
  --destructive:    220 38 38;
}

/* ── Dark theme (default) ──────────────────────────────────────────────────── */
html, html.dark {
  color-scheme: dark;
  --bg:             28  18  13;   /* warm dark brown */
  --surface:        40  26  20;   /* dark chocolate */
  --surface-2:      52  33  25;   /* medium dark */
  --surface-3:      64  40  30;   /* lightest dark surface */
  /* Borders: soft, barely-there — was too prominent against dark bg */
  --border:         38  24  16;
  --border-subtle:  30  18  12;
  /* Text: muted/subtle significantly lightened — was unreadable dark-brown */
  --text:          242 232 228;   /* #f2e8e4 — warm cream, keep */
  --text-muted:    180 148 134;   /* was 155 122 110 — now clearly legible */
  --text-subtle:   130  98  84;   /* was 90 62 53 — was nearly invisible */
  --input-bg:       34  21  15;
  --ring: 0 0 0 2px rgba(156, 23, 39, 0.35);
  /* Floating panels */
  --popup-bg:     74  47  35;
  --popup-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), inset 0 0.5px 0 rgba(255,255,255,0.06);
  /* Checkbox border: softer, less obtrusive */
  --cb-border:    70  44  32;
  --cb-bg:        34  21  15;
}

/* ── Light theme ───────────────────────────────────────────────────────────── */
html.light {
  color-scheme: light;
  --bg:            250 248 245;   /* #faf8f5 — warm parchment */
  --surface:       255 255 255;   /* #ffffff */
  --surface-2:     245 237 232;   /* #f5ede8 — warm cream */
  --surface-3:     237 224 217;   /* #ede0d9 */
  --border:        224 206 198;   /* #e0cec6 */
  --border-subtle: 237 221 215;   /* #edddd7 */
  --text:           26  15  12;   /* #1a0f0c — dark chocolate */
  --text-muted:    122  90  82;   /* #7a5a52 */
  --text-subtle:   184 152 144;   /* #b89890 */
  --input-bg:      255 255 255;
  --ring: 0 0 0 2px rgba(156, 23, 39, 0.25);
  /* Floating panels */
  --popup-bg:     255 255 255;
  --popup-shadow: 0 4px 28px rgba(0, 0, 0, 0.13), 0 0 0 1px rgba(0,0,0,0.06);
  /* Checkbox */
  --cb-border:    170 130 110;  /* clearly visible on white */
  --cb-bg:        255 255 255;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
  background-color: rgb(var(--bg));
  color: rgb(var(--text));
  font-family: 'DejaVu Sans', 'Helvetica Neue', Arial, ui-sans-serif, sans-serif;
  transition: background-color 0.25s ease, color 0.2s ease;
}

/* Raleway reserved for headings and brand wordmark */
.font-heading {
  font-family: 'Raleway', ui-sans-serif, system-ui, sans-serif;
}

/* ── Floating panel (dropdown / modal) ──────────────────────────────────────
   Overrides bg-surface-* and shadow-* to provide a clearly distinct surface.
   styles.css loads after Tailwind CDN so the cascade works in our favour.     */
.popup-panel {
  background: rgb(var(--popup-bg));
  box-shadow: var(--popup-shadow);
}

/* ── Search field (desktop) ──────────────────────────────────────────────── */
.search-field {
  border: 2px solid rgb(75 47 33);
  transition: border-color 0.15s, box-shadow 0.15s;
}
html.light .search-field { border-color: rgb(185 155 140); }
.search-field:focus {
  border-color: rgb(var(--primary));
  box-shadow: 0 0 0 3px rgb(var(--primary) / 0.15);
  outline: none;
}

/* ── Mobile search field (prominent, full-width row) ────────────────────── */
.mobile-search {
  width: 100%;
  background: rgb(var(--surface-2));
  /* 2px border, more visible than desktop pill */
  border: 2px solid rgb(var(--border));
  border-radius: 0.875rem;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  /* 16px prevents iOS auto-zoom on focus */
  font-size: 1rem;
  font-family: inherit;
  color: rgb(var(--text));
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mobile-search:focus {
  border-color: rgb(var(--primary));
  box-shadow: 0 0 0 3px rgb(var(--primary) / 0.18);
}
.mobile-search::placeholder { color: rgb(var(--text-subtle)); }

/* ── Mobile flat toolbar (tab-bar style) ────────────────────────────────── */
.mob-toolbar-sep {
  width: 1px; align-self: stretch; margin: 8px 0;
  background: rgb(var(--border));
  flex-shrink: 0;
}
/* Active filter state for flat bar (no pill background, just color) */
.filter-flat-on { color: rgb(var(--primary)); }

/* ── Header: always fully opaque, separated from page ───────────────────────
   The bg-surface utility may not render with full opacity in all CDN
   configurations, so we anchor the background explicitly here.               */
html.dark  header { background-color: rgb(40 26 20);  box-shadow: 0 4px 20px rgba(0,0,0,.45); border-bottom-color: rgb(42 27 18); }
html.light header { background-color: rgb(255 255 255); box-shadow: 0 2px 12px rgba(0,0,0,.08); border-bottom-color: rgb(200 175 165); }

/* ── Toolbar group: secondary controls pill ──────────────────────────────────
   Two groups: [Sort | Filter] and [Data | Settings], each in its own pill.   */
.toolbar-group {
  background: rgb(var(--surface-3));
  border: 1px solid rgb(var(--border));
  border-radius: 0.75rem;    /* rounded-xl */
  padding: 0.25rem;
}

/* Thin divider between buttons inside a group */
.toolbar-divider {
  width: 1px;
  height: 1.25rem;
  background: rgb(var(--border));
  margin: 0 0.125rem;
  flex-shrink: 0;
}

/* ── Brand primary-color button — robust alternative to Tailwind bg-prim ─────
   Tailwind CDN may not JIT-generate dynamic :class bindings for custom
   colors, so we anchor the brand red explicitly in CSS.                       */
.btn-prim {
  background: rgb(var(--primary));
  color: #fff;
  border: 1px solid transparent;
}
.btn-prim:hover:not(:disabled) { background: rgb(var(--primary-hover)); }

/* Active state used on filter button icon area to show "on" state */
.filter-btn-on {
  background: rgb(var(--primary));
  color: #fff;
}

/* Active count badge inside the toolbar group */
.filter-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1rem; height: 1rem; border-radius: 9999px; padding: 0 0.2rem;
  background: rgb(var(--primary));
  color: #fff;
  font-size: 0.6rem; font-weight: 700; line-height: 1;
}

/* ── Button press feedback ───────────────────────────────────────────────── */
header button:not(:disabled):active { transform: scale(0.92); }
.print-btn-active:not(:disabled):active { transform: scale(0.96); }

/* ── Checkbox component ──────────────────────────────────────────────────────
   Use class="cb-box" on the div; toggle class "is-checked" via Alpine.
   Custom CSS avoids Tailwind CDN scanning failures in :class bindings.        */
.cb-box {
  width: 1rem; height: 1rem;
  border-radius: 0.25rem;
  border: 2px solid rgb(var(--cb-border));
  background: rgb(var(--cb-bg));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.cb-box:hover {
  border-color: rgb(var(--primary));
  background: rgb(var(--primary) / 0.09);
}
.cb-box.is-checked {
  background: rgb(var(--primary));
  border-color: rgb(var(--primary));
  box-shadow: 0 0 0 3px rgb(var(--primary) / 0.25);
}
tbody tr:hover .cb-box:not(.is-checked) {
  border-color: rgb(var(--primary) / 0.55);
  background: rgb(var(--primary) / 0.07);
}

/* ── Print button: fixed-width on desktop so label changes don't shift layout */
.print-btn-fixed {
  width: 9rem;        /* 144px — fits "Оберіть товар" at text-xs */
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem; /* text-xs */
  white-space: nowrap;
  overflow: hidden;
}

/* ── Print button states ─────────────────────────────────────────────────────
   Switching between simple class names so Tailwind CDN scans them reliably.   */
.print-btn-active {
  background: rgb(var(--primary));
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 2px 12px rgb(var(--primary) / 0.4);
}
.print-btn-active:hover:not(:disabled) {
  background: rgb(var(--primary-hover));
  box-shadow: 0 4px 18px rgb(var(--primary) / 0.5);
}
.print-btn-active:disabled { opacity: 0.65; cursor: wait; }

.print-btn-idle {
  background: rgb(var(--surface-2));
  color: rgb(var(--text-muted));
  border: 1px solid rgb(var(--primary) / 0.35);
}

/* ── Form utilities ───────────────────────────────────────────────────────── */
.label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(var(--text-muted));
  margin-bottom: 0.3rem;
  letter-spacing: 0.01em;
}

.input {
  width: 100%;
  background-color: rgb(var(--input-bg));
  border: 1px solid rgb(var(--border));
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: rgb(var(--text));
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus {
  border-color: rgb(var(--primary));
  box-shadow: var(--ring);
}
.input::placeholder { color: rgb(var(--text-subtle)); }
select.input option { background-color: rgb(var(--surface-2)); color: rgb(var(--text)); }
textarea.input { resize: vertical; }

.section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgb(var(--text-subtle));
  border-top: 1px solid rgb(var(--border));
  padding-top: 0.5rem;
  margin-top: 0.25rem;
  grid-column: 1 / -1;
}

/* ── Table sort header ────────────────────────────────────────────────────── */
.th-sort { cursor: pointer; transition: background-color 0.1s; user-select: none; }
.th-sort:hover { background-color: rgb(var(--surface-3)); }

.sort-arrow { font-size: 0.65rem; line-height: 1; }
.sort-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1rem; height: 1rem; border-radius: 9999px;
  background: rgb(var(--primary)); color: #fff;
  font-size: 0.6rem; font-weight: 700; line-height: 1;
}

/* ── Filter input ─────────────────────────────────────────────────────────── */
.filter-input {
  width: 100%;
  background: rgb(var(--input-bg));
  border: 1px solid rgb(var(--border));
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-family: inherit;
  color: rgb(var(--text));
  outline: none;
  transition: border-color 0.15s;
}
.filter-input:focus { border-color: rgb(var(--primary)); }
.filter-input::placeholder { color: rgb(var(--text-subtle)); }

/* ── Form tabs ────────────────────────────────────────────────────────────── */
.form-tab {
  padding: 0.625rem 0;
  font-size: 0.8125rem; font-weight: 500;
  color: rgb(var(--text-muted));
  transition: color 0.15s;
  border-bottom: 2px solid transparent;
}
.form-tab:hover { color: rgb(var(--text)); }
.form-tab-active {
  padding: 0.625rem 0;
  font-size: 0.8125rem; font-weight: 600;
  color: rgb(var(--text));
  border-bottom: 2px solid rgb(var(--primary));
}

/* ── FAB ──────────────────────────────────────────────────────────────────── */
.fab {
  position: fixed;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  right: calc(1.5rem + env(safe-area-inset-right, 0px));
  z-index: 30;
  width: 3.5rem; height: 3.5rem; border-radius: 9999px;
  background: rgb(var(--primary));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgb(var(--primary) / 0.45);
  transition: transform 0.15s, background-color 0.15s;
}
.fab:hover { background: rgb(var(--primary-hover)); transform: scale(1.06); }
.fab:active { transform: scale(0.96); }

/* ── Print action bar ────────────────────────────────────────────────────────
   CSS-only animation avoids conflict with the translateX(-50%) positioning.
   Alpine x-show toggles display; we handle the visual transition via CSS.    */
.print-action-bar {
  position: fixed;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  left: 50%;
  /* base transform — Alpine must NOT override this with translate classes */
  transform: translateX(-50%) scale(0.9);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
/* Visible state — toggled by Alpine :class binding (not x-transition) */
.print-action-bar.bar-visible {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
}

.print-bar-btn {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  border-radius: 9999px;
  background: rgb(var(--primary));
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 28px rgb(var(--primary) / 0.5);
  transition: transform 0.12s, background 0.12s;
  border: none;
}
.print-bar-btn:hover:not(:disabled) { background: rgb(var(--primary-hover)); transform: scale(1.03); }
.print-bar-btn:active:not(:disabled) { transform: scale(0.97); }
.print-bar-btn:disabled { opacity: 0.65; cursor: wait; }

.print-cancel-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 9999px;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  color: rgb(var(--text-muted));
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transition: transform 0.12s, background 0.12s;
}
.print-cancel-btn:hover { background: rgb(var(--surface-3)); color: rgb(var(--text)); transform: scale(1.06); }
.print-cancel-btn:active { transform: scale(0.95); }

.print-preview-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 9999px;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--gold) / 0.35);
  color: rgb(var(--gold) / 0.55);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transition: transform 0.12s, color 0.12s, border-color 0.12s;
}
.print-preview-btn:hover {
  color: rgb(var(--gold));
  border-color: rgb(var(--gold) / 0.6);
  transform: scale(1.06);
}
.print-preview-btn:active { transform: scale(0.95); }
.print-preview-btn.is-active {
  background: rgb(var(--gold));
  border-color: rgb(var(--gold));
  color: #ffffff;
  box-shadow: 0 4px 20px rgb(var(--gold) / 0.45);
  transition: transform 0.12s;
}
.print-preview-btn.is-active:hover { transform: scale(1.06); }
.print-preview-btn.is-active:active { transform: scale(0.95); }

/* ── Mobile product card — 4-line layout with responsive clamp() sizes ───── */
.mobile-card-name {
  font-weight: 600;
  /* shrinks on narrow screens, never below 12px */
  font-size: clamp(12px, 3.7vw, 14px);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(var(--text));
}
.mobile-card-weight {
  font-weight: 700;
  font-size: clamp(11px, 3.3vw, 13px);
  white-space: nowrap;
  color: rgb(var(--text-muted));
  margin-top: 0.1rem;
}
.mobile-card-type {
  /* Slightly smaller base + horizontal compression via scaleX
     so type "Цукерки глазуровані..." fits without truncation.
     width: 119% compensates in layout space; scaleX(0.84) compresses visually.
     Parent col-name has overflow:hidden so nothing escapes the cell.          */
  font-size: clamp(9.5px, 2.7vw, 11px);
  color: rgb(var(--text-subtle));
  margin-top: 0.15rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  transform: scaleX(0.84);
  transform-origin: left center;
  width: 119%;
  letter-spacing: -0.01em;
}
.mobile-card-meta {
  font-size: clamp(9px, 2.5vw, 11px);
  color: rgb(var(--text-subtle));
  margin-top: 0.1rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.8;
}

/* ── Mobile table: fixed layout, no horizontal scroll ───────────────────── */
@media (max-width: 639px) {
  .product-table { table-layout: fixed; width: 100%; }
  /* Fixed-width side columns — must be explicit for table-layout: fixed */
  .product-table .col-cb   { width: 2.375rem; }  /* 38px — checkbox */
  .product-table .col-edit { width: 2.625rem; }  /* 42px — edit button */
  /* col-name takes remaining width; clip content that overflows */
  .product-table td.col-name { overflow: hidden; }
  /* Vertical alignment for all cells */
  .product-table td { vertical-align: middle; }
}

/* ── Chips / tags ─────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: rgb(var(--surface-3)); border: 1px solid rgb(var(--border));
  border-radius: 9999px; padding: 0.2rem 0.625rem;
  font-size: 0.75rem; color: rgb(var(--text));
}
.chip-remove { color: rgb(var(--text-muted)); font-size: 0.875rem; line-height: 1; transition: color 0.1s; }
.chip-remove:hover { color: rgb(var(--destructive)); }

/* ── Dropdown menu items ──────────────────────────────────────────────────── */
.menu-item {
  width: 100%; display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 1rem; font-size: 0.875rem; text-align: left;
  color: rgb(var(--text)); transition: background-color 0.1s;
}
.menu-item:hover { background: rgb(var(--surface-3)); }

/* ── Theme toggle switch (mobile settings sheet) ─────────────────────────── */
.theme-toggle {
  position: relative; display: flex; align-items: center;
  width: 3rem; height: 1.75rem; border-radius: 9999px;
  background: rgb(var(--surface-3));
  border: 1.5px solid rgb(var(--border));
  transition: background 0.25s, border-color 0.25s;
  cursor: pointer; flex-shrink: 0;
}
.theme-toggle-on {
  background: rgb(var(--gold));
  border-color: rgb(var(--gold));
}
.theme-toggle-knob {
  position: absolute; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.theme-toggle-on .theme-toggle-knob { transform: translateX(20px); }

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--border)); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--text-subtle)); }

/* ── Filter drawer ────────────────────────────────────────────────────────── */
.filter-drawer {
  background: rgb(var(--popup-bg));
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.35);
}
html.light .filter-drawer {
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}

/* "Готово" button in the filter drawer footer */
.filter-drawer-confirm {
  flex: 1;
  padding: 0.625rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  background: rgb(var(--primary));
  color: #fff;
  border: none;
  transition: background 0.15s;
}
.filter-drawer-confirm:hover { background: rgb(var(--primary-hover)); }

/* Section title inside the filter drawer */
.filter-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(var(--text-subtle));
}

/* Checkbox + label row in filter drawer */
.filter-check-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 1.75rem;
}

/* Safe area bottom spacing for sort sheet */
.pb-safe {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

/* ── Misc ─────────────────────────────────────────────────────────────────── */
.line-clamp-3 {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; overflow: hidden;
}