/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* --- EuroClassic design tokens (brand/tokens.css from the React demo) --- */
:root {
  --ec-blue-dark: #0d2540;
  --ec-blue: #143b64;
  --ec-blue-light: #1d5591;
  --ec-blue-lighter: #79a0c9;
  --ec-blue-lightest: #cce5fe;

  --ec-gold: #b89962;
  --ec-gold-dark: #634614;

  --ec-white: #ffffff;
  --ec-neutral-lightest: #eeeeee;
  --ec-neutral-lighter: #cccccc;
  --ec-neutral-light: #aaaaaa;
  --ec-neutral: #666666;
  --ec-neutral-dark: #444444;

  --ec-success: #027a48;
  --ec-success-light: #ecfdf3;
  --ec-error: #b42318;
  --ec-error-light: #fef3f2;
  --ec-warning: #b54708;
  --ec-warning-light: #fffaeb;

  --ec-radius-btn: 13px;
  --ec-radius-card: 20px;
  --ec-radius-input: 8px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body.ec {
  display: flex;
  flex-direction: column;
  height: 100%;
  height: 100dvh;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ec-blue-dark);
  background: var(--ec-neutral-lightest);
  -webkit-font-smoothing: antialiased;
}

/* --- App shell --- */
.shell {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.shell-sidebar {
  display: flex;
  flex-direction: column;
  width: 240px;
  flex-shrink: 0;
  background: var(--ec-blue-dark);
  color: var(--ec-white);
}

.shell-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: 64px;
  padding: 0 1.25rem;
  border-bottom: 1px solid rgba(121, 160, 201, 0.25);
  background: var(--ec-white);
}

.shell-logo-link {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.25rem 0.4rem;
  min-width: 0;
  text-decoration: none;
}

/* The official EUROCLASSIC wordmark (268x30 viewBox, grey + dark-blue "OC"). */
.shell-logo-mark {
  display: block;
  height: 19px;
  width: auto;
  max-width: 100%;
}

.shell-logo-sub {
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--ec-gold-dark);
}

/* A customer's own logo beside the mark (same height); a wide one wraps onto
   its own line under the mark instead of squashing it. */
.shell-logo-customer {
  display: block;
  height: 19px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left bottom;
}

/* Logo on the customer page and the edit form. */
.customer-logo-preview {
  display: block;
  max-height: 48px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.customer-logo-current {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ec-neutral-lighter);
  border-radius: 6px;
}

.shell-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.shell-nav-group {
  margin-top: 1rem;
  padding: 0 0.75rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ec-blue-lighter);
  opacity: 0.7;
  border-top: 1px solid rgba(121, 160, 201, 0.2);
  padding-top: 0.75rem;
}

.shell-nav-group:first-child {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.shell-nav-link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--ec-radius-btn);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ec-blue-lighter);
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}

.shell-nav-link:hover {
  background: var(--ec-blue);
  color: var(--ec-white);
}

.shell-nav-link.is-active {
  background: var(--ec-blue);
  color: var(--ec-white);
}

.shell-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.shell-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--ec-neutral-lightest);
  background: var(--ec-white);
}

.shell-topbar-title {
  font-size: 0.875rem;
  color: var(--ec-neutral);
}

.shell-topbar-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.shell-user {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ec-blue-dark);
}

.role-switcher {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--ec-neutral-lighter);
  border-radius: var(--ec-radius-btn);
}

.role-switcher-btn {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ec-neutral-dark);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.role-switcher-btn:hover {
  background: var(--ec-neutral-lightest);
}

.role-switcher-btn.is-active {
  background: var(--ec-blue-dark);
  color: var(--ec-white);
}

.shell-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

/* --- Home dashboard --- */
.dashboard-card {
  display: block;
  background: var(--ec-white);
  border: 1px solid var(--ec-neutral-lightest);
  border-radius: var(--ec-radius-card);
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.dashboard-card:hover {
  border-color: var(--ec-blue-lighter);
  box-shadow: 0 2px 10px rgba(13, 37, 64, 0.08);
}

.dashboard-card-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ec-neutral-dark);
}

.dashboard-card-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ec-blue-dark);
  line-height: 1.1;
  margin-top: 0.25rem;
}

.dashboard-card-note {
  font-size: 0.75rem;
  color: var(--ec-neutral);
  margin-top: 0.25rem;
}

.dashboard-card-alert {
  border-color: var(--ec-error);
}

.dashboard-card-alert .dashboard-card-value {
  color: var(--ec-error);
}

/* --- Placeholder / index pages --- */
.placeholder {
  max-width: 48rem;
}

.placeholder-title {
  font-size: 2rem;
  font-weight: 600;
  color: var(--ec-blue-dark);
  margin: 0 0 0.75rem;
}

.placeholder-text {
  font-size: 0.875rem;
  color: var(--ec-neutral);
  margin: 0 0 0.5rem;
}

/* --- Shared primitives (also resets the `hidden` attribute so it always wins) --- */
[hidden] {
  display: none !important;
}

.text-right { text-align: right; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mb-0 { margin-bottom: 0; }
.break-all { word-break: break-all; overflow-wrap: anywhere; }
.mb-4 { margin-bottom: 1rem; }
.w-full { width: 100%; }
.w-28 { width: 7rem; }
.w-20 { width: 5rem; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.items-end { align-items: flex-end; }
.items-start { align-items: flex-start; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* Money / number values must never wrap (the HU space thousands separator makes
   "10 311 129 Ft" break at every space in a narrow cell). */
.nowrap { white-space: nowrap; }
.money { white-space: nowrap; font-variant-numeric: tabular-nums; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.muted { color: var(--ec-neutral); }
.warning { color: var(--ec-warning); }

/* --- Price-list editor: one form per row, so rows are a grid, not a table --- */
.price-rows { display: flex; flex-direction: column; }
.price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--ec-neutral-lightest);
}
.price-row-form, .price-row-head {
  display: grid;
  grid-template-columns: 7rem 5rem 6rem 6.5rem 7rem minmax(8rem, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}
.price-row-head { padding: 0.25rem 0; border-bottom: 2px solid var(--ec-neutral-lighter); }
.price-row-errors { grid-column: 1 / -1; padding: 0.375rem 0.5rem; margin-bottom: 0.25rem; }
.price-row-new { border-bottom: 0; }

/* --- Order-form stock warning (data-line-warning) --- */
.stock-warning {
  color: var(--ec-warning);
  font-size: 0.75rem;
  font-weight: 600;
}

/* --- Page heading --- */
.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ec-blue-dark);
  margin: 0 0 0.25rem;
}

.page-subtitle {
  font-size: 0.875rem;
  color: var(--ec-neutral);
  margin: 0;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  border-radius: var(--ec-radius-btn);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  line-height: 1.2;
}

.btn-primary {
  background: var(--ec-blue-dark);
  color: var(--ec-white);
}
.btn-primary:hover { background: var(--ec-blue); }

.btn-outline {
  background: transparent;
  color: var(--ec-neutral-dark);
  border-color: var(--ec-blue-dark);
  color: var(--ec-blue-dark);
}
.btn-outline:hover { background: var(--ec-neutral-lightest); }

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
}

.btn-icon {
  border: 0;
  background: transparent;
  color: var(--ec-neutral);
  cursor: pointer;
  font-size: 0.875rem;
}
.btn-icon:hover { color: var(--ec-error); }

/* --- Forms --- */
.input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ec-neutral-lighter);
  border-radius: var(--ec-radius-input);
  font-size: 0.875rem;
  color: var(--ec-blue-dark);
  background: #fff;
}
.input:focus { border-color: var(--ec-blue-light); outline: none; }
.input-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
/* Compact table variant (Purchasing): tighter cells so a few open-PO columns
   still fit without horizontal scroll. */
.table-compact th, .table-compact td { padding: 0.5rem; }
.table-compact th { line-height: 1.2; }
.purchasing-table .purchasing-sku .mono { white-space: nowrap; }
.purchasing-table .purchasing-summary { display: block; line-height: 1.3; }
.purchasing-table .purchasing-summary .warning-dot { height: 1rem; width: 1rem; font-size: 0.625rem; vertical-align: text-bottom; }
/* The container-usage summary stays pinned while the (long) SKU table scrolls
   beneath it; .shell-content is the scroll container. */
.purchasing-summary-card {
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
/* New-SKU form: parsed-attribute preview grid + parser warnings. */
.sku-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.75rem 1.5rem;
  margin: 0;
}
.sku-preview-grid dt { margin: 0; }
.sku-preview-grid dd { margin: 0; font-weight: 600; }
.sku-preview-warnings { padding-left: 1.25rem; color: var(--ec-warning); font-size: 0.875rem; }
/* Open-PO headers keep their real case (the uppercase th style widens names and dates). */
.purchasing-table .purchasing-po-head { max-width: 7.5rem; text-transform: none; font-size: 0.75rem; }
.purchasing-table .purchasing-po-head a { overflow-wrap: break-word; }
.purchasing-table .purchasing-po-head .nowrap { white-space: nowrap; }
.purchasing-table .purchasing-po-head .btn-icon { padding: 0; white-space: nowrap; font-size: 0.75rem; }

.purchasing-table tr[hidden], .purchasing-table tbody[hidden] { display: none; }
.purchasing-filters .input { width: auto; }

/* Purchasing: inline per-SKU cost box. A base-priced cell shows the base as a
   dimmed placeholder; a failed save outlines the box. */
.cost-cell { display: inline-flex; align-items: center; gap: 0.25rem; }
.cost-cell[data-source="base"] .cost-cell-input::placeholder { color: var(--ec-neutral); opacity: 1; }
.cost-cell[data-source="error"] .cost-cell-input { border-color: var(--ec-danger, #c0392b); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Inline category picker (invoice index/detail): chip + auto-saving select. */
.category-select { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }

.field-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ec-neutral);
}

.filter-label {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ec-neutral);
}

.filters-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 640px) { .filters-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .filters-grid { grid-template-columns: 1fr 1fr 1fr 1fr auto; } }
.filters-grid .input { width: 100%; }

/* --- Cards --- */
.card {
  background: #fff;
  border: 1px solid var(--ec-neutral-lightest);
  border-radius: var(--ec-radius-card);
  padding: 1.25rem;
}

.card-title {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ec-blue-dark);
}

/* --- Layout --- */
.grid-2-1 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 1024px) { .grid-2-1 { grid-template-columns: 2fr 1fr; align-items: start; } }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* Sales territories on the user form: one checkbox per country, markets first. */
.territory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.25rem 0.75rem;
  max-height: 14rem;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 0.375rem;
  font-size: 0.875rem;
}
.territory-option { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.territory-option-market { font-weight: 600; }

/* --- Tables --- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Grid columns must not grow past the viewport to fit a wide table: the
   .table-wrap inside scrolls instead. */
.grid-2-1 > *, .grid-2 > *, .grid-cards > * { min-width: 0; }
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ec-blue-dark);
  border-bottom: 1px solid var(--ec-neutral-lightest);
}
.table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ec-neutral-lightest);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tfoot td { padding-top: 0.75rem; }
.th-sortable { color: var(--ec-blue-dark); text-decoration: none; }
.th-sortable:hover { color: var(--ec-blue-light); }
.table tbody tr.clickable { cursor: pointer; }
.table tbody tr.clickable:hover { background: rgba(204, 229, 254, 0.55); }

/* --- Collapsible inventory/purchasing groups --- */
.group-header { cursor: pointer; user-select: none; }
.group-header td { background: var(--ec-neutral-lightest); border-bottom: 1px solid var(--ec-neutral-lighter); }
.group-header:hover td { background: rgba(204, 229, 254, 0.7); }
.collapse-arrow {
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 150ms ease;
}
tbody.collapse-group.is-collapsed .collapse-arrow { transform: rotate(-90deg); }
tbody.collapse-group.is-collapsed .group-row { display: none; }

/* --- Badges --- */
.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid rgba(13, 37, 64, 0.1);
}
.badge-warning { background: var(--ec-warning-light); color: var(--ec-warning); }
.badge-neutral { background: var(--ec-blue-lightest); color: var(--ec-blue-dark); }
.badge-placed { background: var(--ec-blue-lightest); color: var(--ec-blue-light); }
.badge-accepted { background: var(--ec-blue-lightest); color: var(--ec-blue); }
.badge-shipped { background: rgba(184, 153, 98, 0.2); color: var(--ec-gold-dark); }
.badge-delivered { background: var(--ec-success); color: #fff; }
.badge-invoiced { background: var(--ec-neutral-lightest); color: var(--ec-blue-dark); }
.badge-paid { background: var(--ec-success-light); color: var(--ec-success); }
.badge-rejected { background: var(--ec-error-light); color: var(--ec-error); }

/* Overdue invoice rows get a light-red tint so they're scannable at a glance. */
tr.row-overdue td { background: var(--ec-error-light); }

/* Native file inputs ("Choose File") styled to match the app's buttons. */
input[type="file"]::file-selector-button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--ec-neutral-lighter);
  border-radius: var(--ec-radius-btn);
  background: var(--ec-white);
  color: var(--ec-blue-dark);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  background: var(--ec-neutral-lightest);
}

/* Zero-stock inventory rows are muted so the red "0" stands out. */
tr.row-zero td {
  background: var(--ec-neutral-lightest);
}

/* Sticky Apply/Cancel bar for the (130-row) inventory import preview. */
.sticky-import-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  margin-bottom: 1rem;
}

/* A negative cash-flow balance lifts a red card so the alarm can't be missed. */
.balance-negative {
  border: 1px solid var(--ec-error);
  background: var(--ec-error-light);
}

/* --- Notes / alerts --- */
.note {
  background: var(--ec-blue-lightest);
  color: var(--ec-blue-dark);
  padding: 0.5rem 0.625rem;
  border-radius: var(--ec-radius-input);
  font-size: 0.75rem;
}
.note-success {
  background: var(--ec-success-light);
  color: var(--ec-success);
  padding: 0.5rem 0.625rem;
  border-radius: var(--ec-radius-input);
  font-size: 0.75rem;
}
.error-box {
  background: var(--ec-error-light);
  color: var(--ec-error);
  padding: 0.75rem 1rem;
  border-radius: var(--ec-radius-input);
  font-size: 0.875rem;
}
.error-box ul { margin: 0; padding-left: 1.25rem; }

/* --- Timeline --- */
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.timeline-step { display: flex; align-items: center; gap: 0.75rem; color: var(--ec-blue-dark); }
.dot { height: 0.75rem; width: 0.75rem; border-radius: 999px; flex-shrink: 0; }
.dot-done { background: var(--ec-success); }
.dot-current { background: var(--ec-blue); }
.dot-pending { background: var(--ec-neutral-lighter); }

/* --- Definition lists --- */
.kv { margin: 0; }
.kv div { font-size: 0.875rem; }
.kv dt { color: var(--ec-neutral); }
.kv dd { color: var(--ec-blue-dark); margin: 0; }
.kv .muted dd, .kv dd.muted { color: var(--ec-neutral-dark); }
.summary-total { border-top: 1px solid var(--ec-neutral-lightest); padding-top: 0.5rem; }

.dl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.875rem;
}
@media (min-width: 640px) { .dl-grid { grid-template-columns: 1fr 1fr; } }
.dl-grid dt { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--ec-neutral); }
.dl-grid dd { margin: 0; color: var(--ec-blue-dark); }

/* --- Switch --- */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  width: 2.75rem;
  flex-shrink: 0;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: var(--ec-neutral-lighter);
  padding: 0;
  transition: background 150ms ease;
}
.switch[aria-checked="true"] { background: var(--ec-blue); }
.switch-knob {
  display: inline-block;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 999px;
  background: #fff;
  transform: translateX(0.125rem);
  transition: transform 150ms ease;
}
.switch[aria-checked="true"] .switch-knob { transform: translateX(1.375rem); }

/* --- SKU search results --- */
.sku-results {
  border: 1px solid var(--ec-neutral-lighter);
  border-radius: var(--ec-radius-card);
  max-height: 20rem;
  overflow-y: auto;
}
.sku-results-empty { margin: 0; padding: 0.5rem 0.75rem; }
.sku-results-list { list-style: none; margin: 0; padding: 0; }
.sku-result {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--ec-neutral-lightest);
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.sku-result:hover, .sku-result.is-active { background: rgba(204, 229, 254, 0.5); }
.sku-result-stock { white-space: nowrap; }
.sku-result:last-child { border-bottom: 0; }
.sku-result-main { min-width: 0; display: block; }
.sku-result-main .mono { display: block; color: var(--ec-blue-dark); }
.sku-result-main .text-xs { display: block; }

/* --- Impersonation banner (admin "log in as") --- */
.impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 1.5rem;
  font-size: 0.875rem;
  background: var(--ec-warning-light);
  color: var(--ec-warning);
  border-bottom: 1px solid var(--ec-warning);
}
.impersonation-banner strong { font-weight: 600; }

/* --- Flash --- */
.flash {
  padding: 0.75rem 1rem;
  border-radius: var(--ec-radius-input);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1rem;
}
.flash-notice { background: var(--ec-success-light); color: var(--ec-success); }
.flash-alert { background: var(--ec-error-light); color: var(--ec-error); }

/* --- Danger button --- */
.btn-error {
  background: var(--ec-error);
  color: var(--ec-white);
}
.btn-error:hover { opacity: 0.9; }

/* --- Success button --- */
.btn-success {
  background: var(--ec-success);
  color: var(--ec-white);
}
.btn-success:hover { opacity: 0.9; }

.text-success { color: var(--ec-success); }

/* --- Tabs (invoices) --- */
.tab-btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ec-neutral-dark);
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}
.tab-btn:hover { background: var(--ec-neutral-lightest); }
.tab-btn.is-active { background: var(--ec-blue-dark); color: var(--ec-white); }

.link {
  color: var(--ec-blue-light);
  text-decoration: none;
  font-weight: 500;
}
.link:hover { text-decoration: underline; }

/* --- Category chip --- */
.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
}
.category-dot {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 999px;
}

.border-bottom { border-bottom: 1px solid var(--ec-neutral-lightest); }
.border-top { border-top: 1px solid var(--ec-neutral-lightest); }

details.manage-categories summary {
  list-style: none;
}
details.manage-categories summary::-webkit-details-marker {
  display: none;
}

/* --- Inventory --- */
.warning-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 999px;
  background: var(--ec-warning);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: help;
}
.text-danger { color: var(--ec-error); }

/* --- Purchasing --- */
.purchasing-progress {
  height: 0.75rem;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ec-neutral-lightest);
}
.purchasing-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: var(--ec-success);
  transition: width 150ms ease;
}
.purchasing-progress-bar.is-over { background: var(--ec-error); }

/* --- NAV sync progress (Settings → NAV integration) --- */
.nav-progress-track {
  height: 0.75rem;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ec-neutral-lightest);
}
.nav-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--ec-blue);
  transition: width 300ms ease;
}

.note-neutral {
  background: var(--ec-neutral-lightest);
  color: var(--ec-neutral-dark);
  padding: 0.5rem 0.625rem;
  border-radius: var(--ec-radius-input);
  font-size: 0.75rem;
}

/* MOST "Webes számlázás" identifier callout: the order number the clerk has
   to type (or paste) into MOST, shown big enough to read across windows. */
.azon-callout {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.azon-callout-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ec-blue-dark);
  background: var(--ec-white);
  border: 1px solid var(--ec-blue-dark);
  border-radius: var(--ec-radius-input);
  padding: 0.25rem 0.625rem;
  user-select: all;
}

/* --- Stock dot (incoming orders) --- */
.stock-dot {
  display: inline-block;
  height: 0.625rem;
  width: 0.625rem;
  border-radius: 999px;
  flex-shrink: 0;
}
.stock-dot.is-ok { background: var(--ec-success); }
.stock-dot.is-low { background: var(--ec-warning); }

/* --- Inline reject disclosure (incoming orders) --- */
details.reject summary {
  list-style: none;
}
details.reject summary::-webkit-details-marker {
  display: none;
}

/* --- Modal (shipping-request preview) --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.4);
}
.modal {
  width: 100%;
  max-width: 48rem;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--ec-white);
  border-radius: var(--ec-radius-card);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--ec-neutral-lightest);
}
.modal-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ec-blue-dark);
}
.modal-body {
  flex: 1;
  overflow: auto;
  padding: 1.25rem 1.5rem;
}
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--ec-neutral-lightest);
}

/* --- Email content blocks (shipping-request preview) --- */
.email-block {
  border: 1px solid var(--ec-neutral-lightest);
  border-radius: var(--ec-radius-card);
  background: rgba(238, 238, 238, 0.4);
  padding: 1rem;
  font-size: 0.875rem;
  color: var(--ec-blue-dark);
}
.email-block p {
  margin: 0.25rem 0;
}
.email-block-title {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ec-neutral);
}

/* --- Pagination (Orders index) --- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
}
.pagination-info {
  font-size: 0.875rem;
  color: var(--ec-neutral);
}

/* --- Price-list editor currency sections --- */
.price-list-section {
  padding-top: 1rem;
}
.price-list-section + .price-list-section {
  margin-top: 1rem;
  border-top: 1px solid var(--ec-neutral-lightest);
}
.price-list-unit {
  font-size: 0.75rem;
  color: var(--ec-neutral);
  width: 3.5rem;
  text-align: left;
}

/* --- Optional-field hint on forms --- */
.optional-hint {
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ec-neutral-light);
}

/* --- Grouped/Flat view toggle (inventory, purchasing) --- */
.view-toggle {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--ec-neutral-lighter);
  border-radius: var(--ec-radius-btn);
}
.view-toggle a {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ec-neutral-dark);
  text-decoration: none;
}
.view-toggle a + a { border-left: 1px solid var(--ec-neutral-lighter); }
.view-toggle a:hover:not(.is-active) { background: var(--ec-neutral-lightest); }
.view-toggle a.is-active { background: var(--ec-blue-dark); color: var(--ec-white); }

/* --- Profit P&L layout --- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) { .kpi-grid { grid-template-columns: 1fr; } }
.kpi-card { min-height: 7rem; }

/* Direct/indirect cost-type badges are solid so they read as a distinct class
   of label (not the pastel status pills used elsewhere). */
.badge-direct { background: var(--ec-success); color: #fff; }
.badge-indirect { background: var(--ec-neutral-dark); color: #fff; }

/* Empty-state rows hold a fixed height so sparse periods don't collapse the
   card geometry. */
.empty-state {
  min-height: 4rem;
  display: flex;
  align-items: center;
  border-bottom: 0;
}

/* Chart legend swatch (Profit monthly chart). */
.chart-legend { display: flex; align-items: center; gap: 1rem; font-size: 0.75rem; color: var(--ec-neutral); }
.chart-legend-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.chart-swatch { display: inline-block; height: 0.625rem; width: 0.625rem; border-radius: 999px; }

/* --- Authentication (devise sessions) --- */
.auth-shell {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.auth-card {
  width: 100%;
  max-width: 24rem;
  background: var(--ec-white);
  border: 1px solid var(--ec-neutral-lightest);
  border-radius: var(--ec-radius-card);
  padding: 2rem;
  box-shadow: 0 2px 10px rgba(13, 37, 64, 0.08);
}

.auth-brand {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  justify-content: center;
}

.auth-subtitle {
  text-align: center;
  color: var(--ec-neutral);
  font-size: 0.875rem;
  margin: 0.25rem 0 1.5rem;
}

/* The Sign out button is a standalone role-switcher-btn (no switcher container
   around it now), so give it back a border to read as a button. */
.shell-signout {
  border: 1px solid var(--ec-neutral-lighter);
  border-radius: var(--ec-radius-btn);
}

/* Staging banner (docs/staging.md): unmistakable on every page of the test copy. */
.staging-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0.35rem 1rem;
  background: repeating-linear-gradient(135deg, #b45309 0 12px, #d97706 12px 24px);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.staging-banner {
  flex-shrink: 0;
}

/* ==========================================================================
   Responsive layout. Breakpoints: 640 (phone → tablet), 1024 (tablet →
   desktop: the sidebar becomes a fixed column), 1440 (large desktop).
   Everything above is the desktop design; the blocks below only adapt it.
   ========================================================================== */

/* Shell chrome that exists only below the desktop breakpoint. */
.shell-menu-btn,
.shell-topbar-brand,
.shell-drawer-close,
.shell-nav-footer,
.shell-backdrop,
.form-bar {
  display: none;
}

.shell-menu-btn {
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--ec-radius-btn);
  background: transparent;
  color: var(--ec-blue-dark);
  cursor: pointer;
}
.shell-menu-btn:hover { background: var(--ec-neutral-lightest); }
.shell-menu-btn:focus-visible { outline: 2px solid var(--ec-blue-light); outline-offset: 2px; }

/* Three-bar icon drawn in CSS (no icon font in the app). */
.shell-menu-icon,
.shell-menu-icon::before,
.shell-menu-icon::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.shell-menu-icon { position: relative; }
.shell-menu-icon::before,
.shell-menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
}
.shell-menu-icon::before { top: -6px; }
.shell-menu-icon::after { top: 6px; }

.shell-drawer-close {
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-right: -0.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--ec-radius-btn);
  background: transparent;
  color: var(--ec-neutral-dark);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.shell-drawer-close:hover { background: var(--ec-neutral-lightest); }

.shell-sidebar:focus { outline: none; }

@media (max-width: 1023px) {
  /* The sidebar becomes an off-canvas drawer over the content. It is
     positioned inside .shell (not the viewport) so it sits below the staging
     banner, and hidden with visibility so its links are neither focusable nor
     "visible" to assistive tech while closed. */
  .shell-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    width: min(300px, 85vw);
    transform: translateX(-100%);
    visibility: hidden;
    box-shadow: 0 0 40px rgba(13, 37, 64, 0.35);
    transition: transform 200ms ease, visibility 0s linear 200ms;
  }
  .shell.is-drawer-open .shell-sidebar {
    transform: none;
    visibility: visible;
    transition: transform 200ms ease;
  }
  .shell-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 55;
    background: rgba(13, 37, 64, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  .shell.is-drawer-open .shell-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  .shell-drawer-close { display: inline-flex; }
  .shell-nav-link { padding: 0.75rem; }

  /* Who is signed in moves from the top bar into the drawer's footer. */
  .shell-nav-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(121, 160, 201, 0.25);
  }
  .shell-nav-footer .shell-user {
    flex-basis: 100%;
    color: var(--ec-white);
    overflow-wrap: anywhere;
  }
  .shell-nav-footer .badge.muted {
    color: var(--ec-blue-lightest);
    border-color: rgba(121, 160, 201, 0.5);
  }
  .shell-nav-footer .shell-signout {
    min-height: 40px;
    color: var(--ec-white);
    border-color: rgba(121, 160, 201, 0.5);
  }
  .shell-nav-footer .shell-signout:hover { background: var(--ec-blue); }

  /* Top bar: menu button + brand, then the page. */
  .shell-topbar {
    justify-content: flex-start;
    gap: 0.5rem;
    min-height: 56px;
    padding: 0.375rem 0.75rem 0.375rem 0.375rem;
  }
  .shell-menu-btn { display: inline-flex; }
  .shell-topbar-brand { display: block; flex: 1; min-width: 0; }
  .shell-topbar-title,
  .shell-topbar-actions { display: none; }

  .shell-content { padding: 1rem; scroll-padding-bottom: 5.5rem; }
  .table th, .table td { padding: 0.625rem 0.75rem; }

  .impersonation-banner {
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
  }

  /* Sticky bottom bar (order form: total + submit; order page: main
     actions) so the primary action is reachable without scrolling a long
     single-column page. It is the last child of the content, so it sticks to
     the bottom edge of the scroll area. */
  .form-bar {
    position: sticky;
    bottom: -1rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 1rem -1rem -1rem;
    padding: 0.75rem 1rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    background: var(--ec-white);
    border-top: 1px solid var(--ec-neutral-lighter);
    box-shadow: 0 -4px 16px rgba(13, 37, 64, 0.1);
  }
  .form-bar .btn { flex: 1; }
  .form-bar-total { flex: 1; display: flex; flex-direction: column; min-width: 0; }
  .form-bar-total strong { white-space: nowrap; font-size: 1.125rem; }
  /* The form's own submit lives in the sticky bar on small screens. */
  .summary-submit { display: none; }
}

@media (max-width: 639px) {
  body.ec { font-size: 15px; }

  /* Page headers ("Orders" + "New order" button) wrap instead of squeezing. */
  .shell-content > .flex.justify-between,
  .shell-content > .flex.justify-between > .flex {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .shell-content > .flex.justify-between > .text-right { text-align: left; }
  .page-title { font-size: 1.375rem; }
  .card { padding: 1rem; border-radius: 16px; }

  /* Touch targets: 44px controls, 16px inputs (iOS does not zoom at 16px). */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
  .input,
  select.input {
    min-height: 44px;
    font-size: 1rem;
  }
  .input-sm { min-height: 36px; font-size: 0.875rem; }
  .btn-icon { min-width: 36px; min-height: 36px; }
  .role-switcher-btn { min-height: 40px; }
  .filters-grid .flex .input { flex: 1; min-width: 0; }
  .filters-grid .btn { width: 100%; }
  .order-form .flex.gap-6 { flex-wrap: wrap; gap: 0.5rem 1.5rem; }
  .order-form .flex.gap-6 label { min-height: 40px; }
  .w-28 { width: 6.5rem; }

  .modal-footer { flex-wrap: wrap; }
  .modal-footer .btn { flex: 1; }
  .pagination { flex-wrap: wrap; justify-content: center; }
  .impersonation-banner .btn { width: 100%; }
  .staging-banner-detail { display: none; }

}


/* Stacked table rows. A wide table (orders, transfers, customers, order
   lines) turns into one card per row when its .table-wrap container is
   narrow, each cell labelled from its data-label; cells without a label
   render as plain blocks. Keyed on the container, not the viewport, so a
   table in a narrow grid column stacks too. The line editor (9 columns of
   inputs) stacks earlier than the read-only lists. */
.table-wrap { container-type: inline-size; }

@container (max-width: 40rem) {
  .table-stack thead { display: none; }
  .table-stack,
  .table-stack tbody,
  .table-stack tfoot,
  .table-stack tr,
  .table-stack td {
    display: block;
    width: 100%;
  }
  .table-stack tr {
    position: relative;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--ec-neutral-lightest);
  }
  .table-stack tbody tr:last-child { border-bottom: 0; }
  .table-stack td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.2rem 0;
    border: 0;
  }
  .table-stack td.text-right { text-align: right; }
  .table-stack td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ec-neutral);
  }
  .table-stack td.cell-primary {
    display: block;
    padding: 0 2.5rem 0.375rem 0;
    font-size: 1rem;
  }
  .table-stack td.cell-primary::before { display: none; }
  .table-stack td.cell-actions {
    position: absolute;
    top: 0.5rem;
    right: 0;
    width: auto;
    padding: 0;
  }
  .table-stack tr.row-empty td { display: block; }
  .table-stack tfoot tr { display: flex; justify-content: space-between; border-bottom: 0; }
  .table-stack tfoot td { width: auto; padding: 0; }
  .table-stack td > .flex { flex-wrap: wrap; justify-content: flex-end; }
}

@container (max-width: 48rem) {
  .line-table thead { display: none; }
  .line-table,
  .line-table tbody,
  .line-table tfoot,
  .line-table tr,
  .line-table td {
    display: block;
    width: 100%;
  }
  .line-table tr {
    position: relative;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--ec-neutral-lightest);
  }
  .line-table tbody tr:last-child { border-bottom: 0; }
  .line-table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.2rem 0;
    border: 0;
  }
  .line-table td.text-right { text-align: right; }
  .line-table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ec-neutral);
  }
  .line-table td.cell-primary {
    display: block;
    padding: 0 2.5rem 0.375rem 0;
    font-size: 1rem;
  }
  .line-table td.cell-primary::before { display: none; }
  .line-table td.cell-actions {
    position: absolute;
    top: 0.5rem;
    right: 0;
    width: auto;
    padding: 0;
  }
  .line-table tr.row-empty td { display: block; }
  .line-table tfoot tr { display: flex; justify-content: space-between; border-bottom: 0; }
  .line-table tfoot td { width: auto; padding: 0; }
  .line-table td > .flex { flex-wrap: wrap; justify-content: flex-end; }
}

@media (min-width: 1440px) {
  .shell-content { padding: 2rem; }
  .grid-2-1 { gap: 1.5rem; }
}

@media (min-width: 1680px) {
  /* Main column takes the extra width; the side column (summary, shipping &
     billing, actions) stays a readable 26rem. */
  .grid-2-1 { grid-template-columns: minmax(0, 1fr) 26rem; }
}

/* Card grid that adds columns as the width allows (settings hub). */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}