:root {
  --paper:     #F4F6F9;
  --surface:   #FFFFFF;
  --ink:       #182233;
  --ink-soft:  #57647A;
  --ink-faint: #8B96A8;
  --rule:      #DCE2EA;
  --rule-soft: #E9EDF2;
  --accent:    #2C4A7C;
  --accent-ink:#FFFFFF;
  --ok:        #1C7A55;
  --ok-bg:     #E5F5EC;
  --warn:      #A05A0C;
  --warn-bg:   #FCEFDD;
  --danger:    #B0301F;
  --danger-bg: #FBE7E4;
  --sidebar:   #101826;
  --sidebar-ink: #C9D3E2;
  --sidebar-ink-dim: #7C8AA3;
  --panel-tint: #EAF0FA;
  --panel-tint-border: #D3E0F3;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #0E1420;
    --surface:   #161F2E;
    --ink:       #E4E9F2;
    --ink-soft:  #A6B0C3;
    --ink-faint: #6B778D;
    --rule:      #29334A;
    --rule-soft: #202A3E;
    --accent:    #6E93D0;
    --accent-ink:#0E1420;
    --ok:        #4FBE8C;
    --ok-bg:     #113023;
    --warn:      #E0A24E;
    --warn-bg:   #33260E;
    --danger:    #E0796A;
    --danger-bg: #331714;
    --sidebar:   #0A0F19;
    --sidebar-ink: #C9D3E2;
    --sidebar-ink-dim: #5D6A82;
    --panel-tint: #16233A;
    --panel-tint-border: #223A5C;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI Variable Text", "Segoe UI", system-ui, "Noto Sans", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.mono { font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace; }

/* ---- top mega-menu nav ---- */

.topnav {
  background: var(--sidebar);
  color: var(--sidebar-ink);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.topnav-inner {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 0 24px;
  min-height: 52px;
}
.brand {
  display: flex;
  align-items: center;
  font-size: 14.5px;
  font-weight: 650;
  color: #fff;
  padding-right: 22px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  white-space: nowrap;
}
/* no wrap on desktop - a wrapped second line inside a fixed-height bar was
   overlapping the page content below it instead of pushing it down.
   overflow MUST stay visible (the default) - setting even overflow-x here
   implicitly computes overflow-y to auto too (CSS overflow rule), which
   turned every open .mega-panel into scrollable content of this element
   instead of an overlay, producing a spurious inner scrollbar. The nav items
   fit one line at any desktop width tested (1280px+); the mobile media
   query below covers the rest by wrapping instead of scrolling. */
.topnav-groups { display: flex; align-items: stretch; gap: 2px; flex: 1; flex-wrap: nowrap; }

/* .topnav-link is either an <a> (plain link) or a <button> (opens a
   .mega-panel) - reset the button-specific browser defaults (background,
   border) explicitly so it doesn't pick up the generic button{} rule below. */
.topnav-link {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--sidebar-ink);
  text-decoration: none;
  padding: 0 14px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
  user-select: none;
}
.topnav-link:hover { color: #fff; background: rgba(255,255,255,0.06); }
.nav-icon { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.85; }
.topnav-link.active { color: #fff; border-bottom-color: var(--accent); }
.megagroup.open > .topnav-link { color: #fff; background: rgba(255,255,255,0.08); }

/* .megagroup wraps the <button>+.mega-panel pair and is itself the flex item
   .topnav-groups stretches to full bar height - without display:flex here,
   that stretch stopped at .megagroup and the <button> inside sat at its own
   natural (shorter) height, top-aligned instead of centred like the plain
   <a> links beside it. */
.megagroup { position: relative; display: flex; align-items: stretch; }
.megagroup-user { margin-left: auto; flex-shrink: 0; }
/* JS toggles .open on .megagroup - see the script at the end of the body */
.mega-panel { display: none; }
.megagroup.open .mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.16);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 30;
}
/* same specificity as the .megagroup.open .mega-panel rule above (3 classes)
   so this reliably wins the left/right tug-of-war regardless of source order */
.megagroup.open .mega-panel.mega-panel-right { left: auto; right: 0; }
.mega-panel a {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 13.5px;
}
.mega-panel a:hover { background: var(--rule-soft); }
.mega-panel a.active { color: var(--accent); font-weight: 650; }
.mega-panel .nav-icon { color: var(--ink-faint); }
.mega-panel a.active .nav-icon { color: var(--accent); }

.content { padding: 28px 32px; max-width: 1800px; margin: 0 auto; }

/* ---- typography / layout ---- */

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
/* Montserrat (loaded in base.html) for headings only - body text/tables
   stay on the system stack, a display face on every cell would fight
   readability at table density. */
h1, h2, h3, .brand { font-family: "Montserrat", -apple-system, "Segoe UI", system-ui, sans-serif; }
h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
h2 { margin: 0 0 14px; font-size: 15px; font-weight: 650; }
/* Tertiary heading, below h2 - same uppercase-micro-label language as
   .kpi-label/thead th/.filter-caption rather than a smaller h2. */
h3 { margin: 20px 0 8px; font-size: 11.5px; font-weight: 650; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.muted { color: var(--ink-soft); }

/* Groups an h1 with a small control that belongs right next to the title
   (e.g. the channel enabled/disabled pill) - .page-head stays space-between,
   this wrapper is the "left side" so the pill sits flush against the name
   instead of drifting to the far right with the back-link. */
.page-head-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* On/off switch styled as a pill, for state that should read as a command
   ("this channel is live") rather than a form field - a plain checkbox in
   a settings grid buried it among unrelated inputs. A real border (not just
   a flat color fill) plus a miniature track+knob switch is what signals
   "this is a pressable control", not just a status label - a bare colored
   pill reads as a badge, not a button. Submits immediately (full page
   reload), so the knob doesn't animate mid-click - the position flip on
   reload is what shows the state changed. */
.pill-toggle-form { display: inline-flex; margin: 0; }
.pill-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; cursor: pointer;
  padding: 5px 14px 5px 6px; font-size: 12px; font-weight: 650;
  font-family: inherit; transition: filter .12s ease, box-shadow .12s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.pill-toggle:hover { filter: brightness(0.95); }
.pill-toggle:hover { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.pill-toggle:active { filter: brightness(0.9); }
.pill-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pill-toggle.is-on { background: var(--ok-bg); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.pill-toggle.is-off { background: var(--rule-soft); color: var(--ink-faint); border: 1px solid color-mix(in srgb, var(--ink-faint) 35%, transparent); }
.pill-toggle-track {
  position: relative; flex: none; width: 24px; height: 14px; border-radius: 999px;
  background: color-mix(in srgb, currentColor 32%, transparent);
}
.pill-toggle-knob {
  position: absolute; top: 2px; left: 2px; width: 10px; height: 10px;
  border-radius: 50%; background: currentColor;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.pill-toggle.is-on .pill-toggle-knob { left: 12px; }

/* A secondary navigational link ("Категории →", "Настройки →") that should
   read as a quiet control, not a hand-written <a> - no underline, a soft
   pill on hover instead. */
.link-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 600; color: var(--accent);
  text-decoration: none; padding: 4px 9px; border-radius: 999px;
  transition: background-color .12s ease;
}
.link-chip:hover { background: var(--rule-soft); text-decoration: none; }

/* ---- flash messages ---- */

.flashes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.flashes-standalone { max-width: 380px; margin: 24px auto 0; }
.flash { padding: 10px 14px; border-radius: 6px; font-size: 13.5px; }
.flash-success { background: var(--ok-bg); color: var(--ok); }
.flash-error { background: var(--danger-bg); color: var(--danger); }
.flash-info { background: var(--rule-soft); color: var(--ink-soft); }

/* ---- auth pages ---- */

.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 34px 32px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.auth-card h1 { margin: -8px 0 4px; }

/* ---- forms ---- */

label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-soft); }
input:not([type="checkbox"]):not([type="radio"]), select {
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}
/* Extra room on the right so option text doesn't run into the native
   dropdown arrow - the base 11px is enough for a text input's caret but
   not for a select's arrow glyph. */
select { padding-right: 30px; }
input[type="checkbox"], input[type="radio"] { width: 15px; height: 15px; accent-color: var(--accent); }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* .btn-primary is applied to both <button> and <a> - without an explicit
   text-decoration/display reset here, the <a> variant (e.g. "Импорт") picks
   up the browser's default link underline while a real <button> next to it
   (e.g. "+ Артикул") never had one, so the two read as different fonts. */
button, .btn-primary {
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
button:hover, .btn-primary:hover { filter: brightness(1.08); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

/* "creates a new thing" is a distinct action from everything else a button
   does here (save, approve, import) - green marks that at a glance, same
   idea as the reference screen's + Артикул / + Услуга buttons. Same weight/
   size/shape as .btn-primary above - only the colour differs. */
.btn-create {
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  background: var(--ok);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-create:hover { filter: brightness(1.08); }

.btn-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--accent);
  text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }

.form-narrow { max-width: 340px; display: flex; flex-direction: column; gap: 14px; }
.status-form { display: flex; gap: 8px; }

/* ---- cards / kpis ---- */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 20px 22px;
  margin-bottom: 20px;
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid transparent;
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}
/* a number worth acting on today gets a coloured edge, same idea as a
   severity stripe on a ticket - the eye should land here first, before
   reading any of the labels */
.kpi-warn { border-left-color: var(--warn); }
a.kpi { transition: border-color 0.12s, transform 0.12s; }
a.kpi:hover { border-color: var(--ink-faint); transform: translateY(-1px); }
a.kpi.kpi-warn:hover { border-left-color: var(--warn); }
.kpi-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }
.kpi-value { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-note { font-size: 12px; }
.kpi-note.ok { color: var(--ok); }
.kpi-note.warn { color: var(--warn); }

/* ---- tables ---- */

/* white card, deliberately distinct from the tinted .filter-panel above it -
   the boundary between "where you filter" and "what you're looking at" reads
   from the background colour alone, not just position on the page. */
.tw {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { padding: 11px 14px; text-align: left; border-top: 1px solid var(--rule-soft); }
thead th {
  border-top: none;
  border-bottom: 1px solid var(--rule);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  font-weight: 600;
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.num-negative { color: var(--danger); font-weight: 600; }
tbody tr:hover { background: var(--rule-soft); }
a { color: var(--accent); }

/* ---- pills ---- */

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}
.pill-ok, .pill-received { background: var(--ok-bg); color: var(--ok); }
.pill-off, .pill-cancelled { background: var(--rule-soft); color: var(--ink-faint); }
.pill-draft { background: var(--rule-soft); color: var(--ink-soft); }
.pill-sent, .pill-confirmed { background: var(--warn-bg); color: var(--warn); }
.pill-partial { background: var(--warn-bg); color: var(--warn); }
.pill-new { background: var(--rule-soft); color: var(--ink-soft); }
.pill-shipped, .pill-delivered { background: var(--ok-bg); color: var(--ok); }
.pill-returned, .pill-refunded { background: var(--danger-bg); color: var(--danger); }
.pill-failed, .pill-error { background: var(--danger-bg); color: var(--danger); }
.pill-running { background: var(--warn-bg); color: var(--warn); }
.pill-success { background: var(--ok-bg); color: var(--ok); }

/* ---- order readiness dot: green/black/red/grey traffic light -----------
   green = приключена (PO/waybill/финансов документ - всичко налично)
   black = активна (нещо все още липсва)
   red   = кредитирано (кредитно известие или възстановена)
   grey  = анулирана */
.action-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle; flex: none; }
.action-dot-green { background: var(--ok); }
.action-dot-black { background: var(--ink); }
.action-dot-red   { background: var(--danger); }
.action-dot-grey  { background: var(--ink-faint); }

/* ---- new widgets ---- */

.btn-group { display: flex; gap: 10px; }
.btn-group form { margin: 0; }

.notice-card {
  border-left: 3px solid var(--warn);
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.search-form { display: flex; align-items: center; gap: 10px; }
.search-form input { flex: 1; font-size: 15px; padding: 13px 16px; }
.search-form button { padding: 0 24px; font-size: 14px; flex-shrink: 0; }
.filter-toggles-inline { flex-shrink: 0; padding: 0; gap: 14px; }


/* five possible locales now (bg/en/ro/hu/el) instead of a fixed two, so this
   wraps to however many columns fit rather than a hardcoded 1fr 1fr */
.translation-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; align-items: start; }
.translation-col { display: flex; flex-direction: column; gap: 12px; }
.translation-head { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 13px; }
.translation-form textarea { font: inherit; padding: 9px 11px; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); color: var(--ink); resize: vertical; }
.translation-form > button { grid-column: 1 / -1; justify-self: start; }

/* A settings form as a tight grid instead of one field per line separated by
   <br><br> - label is already a flex column with its own gap (see the base
   label rule), so the grid only needs to place the label+input pairs, not
   also add manual line-break spacing on top of it. */
.settings-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px 28px; max-width: 1040px; align-items: start;
}
.settings-grid .settings-full { grid-column: 1 / -1; }
.settings-grid .settings-hint { margin: -10px 0 0; font-size: 11.5px; }
.settings-grid > button, .settings-grid .settings-submit { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
/* Reserves two lines for the label text so a field whose label happens to
   wrap doesn't push its input/select lower than its neighbors in the same
   row - without this, a 1-line label and a 2-line label in the same grid
   row line up at the top but their inputs land at different heights. */
.settings-label-text { display: block; min-height: 34px; line-height: 17px; }

/* which languages to even show a form for - filled (green outline) marks a
   language that already has a translation; active (solid) marks the ones
   currently expanded below. A language can be both. */
.locale-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.locale-pill {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.locale-pill:hover { border-color: var(--ink-faint); }
.locale-pill-filled { border-color: var(--ok); color: var(--ok); }
.locale-pill.locale-pill-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.inline-form { display: flex; gap: 6px; align-items: center; }
.inline-form select, .inline-form input[type="text"] { font-size: 12.5px; padding: 5px 7px; width: 220px; }
.inline-form button { padding: 6px 10px; font-size: 12.5px; }

/* ---- tabs (Артикули / Услуги / ...) ---- */

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 20px; }
/* .tab is used on <a>/<span> (page-to-page tabs, e.g. Артикули/Услуги) and
   on <button> (in-page JS-toggled tabs, e.g. the customer dossier) - reset
   the button-only defaults explicitly so both read identically. */
.tab {
  background: none;
  border: none;
  padding: 9px 16px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab-active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- advanced filters (catalog) ---- */

/* the tinted zone: everything you use to narrow the list down. The white
   .tw table below it is a different colour on purpose - see that rule. */
.filter-panel {
  background: var(--panel-tint);
  border: 1px solid var(--panel-tint-border);
  border-radius: 10px;
  padding: 18px 20px 16px;
  margin-bottom: 20px;
}
.filter-form { margin: 0; }

.filter-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 22px;
  padding: 14px 0 2px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
/* row, not the column default a bare <label> gets elsewhere in this file -
   without this the checkbox stacks above its own text instead of beside it */
.filter-check { display: flex; flex-direction: row; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.filter-check input { margin: 0; flex-shrink: 0; }
.filter-check-strong { margin-left: auto; color: var(--ink); font-weight: 600; }
.filter-caption { margin: 4px 0 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; }

.daterange { display: flex; align-items: center; gap: 4px; }
.daterange input { min-width: 118px; padding: 6px 8px !important; font-size: 12px !important; }

/* ---- table toolbar: pager + count + page-size + per-column search ----
   One row, page nav on the left and everything else on the right - matches
   the reference screen (PRIM.IO) where pagination, result count, page size
   and the search toggle all live together between the filters and the
   table, instead of splitting pagination off to the bottom of the page. */

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 2px 10px;
  font-size: 12.5px;
  flex-wrap: wrap;
}
.table-toolbar-pager { display: flex; align-items: center; gap: 10px; }
.pager-jump { display: flex; align-items: center; gap: 6px; margin: 0; }
.pager-jump input {
  width: 46px;
  padding: 4px 6px;
  text-align: center;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.table-toolbar-info { display: flex; align-items: center; gap: 16px; }

.pager-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 15px;
}
.pager-nav:hover { color: var(--ink); border-color: var(--ink-faint); }
.pager-nav-disabled { opacity: 0.35; pointer-events: none; }

.icon-btn {
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.icon-btn-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* No more standalone "i" info-buttons anywhere - the name/number itself is
   the link straight to its dossier (customer, supplier, order). */

/* the per-column search row rendered under the table headers */
.col-search-row td { padding: 6px 10px; background: var(--rule-soft); border-top: 1px solid var(--rule); }
.col-search-row input, .col-search-row select { width: 100%; padding: 6px 8px; font-size: 12px; }

.page-size-form label { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; }
.page-size-form select { padding: 4px 6px; font-size: 12.5px; }

/* ---- product detail: photo + kpis, specs, seo ---- */

.detail-top { display: flex; gap: 20px; align-items: stretch; margin-bottom: 4px; }
.detail-photo {
  width: 140px;
  height: 140px;
  flex-shrink: 0;
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.detail-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  font-size: 12px;
  text-align: center;
}
.detail-kpis { flex: 1; margin-bottom: 0; }

.seo-details { margin-top: 4px; }
.seo-details summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.seo-details label { margin-top: 8px; }

.variant-row-form { display: contents; }
.spec-input { width: 80px; font-size: 13px; padding: 5px 7px; }
.spec-input-num { width: 64px; }

.notice-list { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; }

details.card summary { cursor: pointer; list-style: none; }
details.card summary::-webkit-details-marker { display: none; }
details.card summary::before { content: "▸ "; color: var(--ink-faint); }
details.card[open] summary::before { content: "▾ "; }
details.card table, details.card .muted { margin-top: 14px; }

/* ---- order detail: sidebar list + main panel ---- */

.order-master-detail { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }

.order-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 6px;
}
.order-sidebar-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  font-size: 12px;
}
.order-sidebar-row:hover { background: var(--rule-soft); }
.order-sidebar-row-active { background: var(--accent); color: var(--accent-ink); }
.order-sidebar-row-active .order-sidebar-date,
.order-sidebar-row-active .order-sidebar-name { color: var(--accent-ink); opacity: 0.85; }
.order-sidebar-date, .order-sidebar-name { color: var(--ink-faint); font-size: 11.5px; }

.order-main { min-width: 0; }
.order-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.order-toolbar select { padding: 9px 11px; }

.order-totals { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-soft); font-size: 13.5px; }
.order-totals strong { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .translation-form { grid-template-columns: 1fr; }
  .detail-top { flex-direction: column; }
  .order-master-detail { grid-template-columns: 1fr; }
  .order-sidebar-list { max-height: 240px; }
}

@media (max-width: 720px) {
  .topnav-inner { flex-wrap: wrap; height: auto; padding: 8px 12px; }
  .topnav-groups { flex-wrap: wrap; }
  .content { padding: 20px; }
}

/* Feed export - category tree with checkboxes (erp/feed_export.py). One
   shared form for the whole tree, nothing saves until the sticky bar's
   button is clicked - a checkbox toggling per click with no save step was
   exactly what read as "no save button" to the user. */
.cat-tree { margin-top: 10px; padding-bottom: 64px; }
.tree-node { padding: 3px 0; }
.cat-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: 6px;
}
.cat-row:hover { background: var(--rule-soft); }
.cat-row .cat-label { font-size: 13px; }
.cat-row .cat-count { color: var(--ink-faint); font-size: 12px; }
.cat-row .cat-actions { margin-left: auto; font-size: 12px; display: flex; gap: 10px; }
.cat-row-whole {
  background: var(--rule-soft); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px;
}
.cat-row-whole .cat-label { font-size: 14px; }
.cat-children { margin-left: 22px; border-left: 1px solid var(--rule-soft); padding-left: 6px; }
details.cat-toggle summary {
  cursor: pointer; font-size: 12px; color: var(--ink-faint); padding: 2px 6px; list-style: none;
}
details.cat-toggle summary::-webkit-details-marker { display: none; }
details.cat-toggle summary::before { content: "▸ "; }
details.cat-toggle[open] > summary::before { content: "▾ "; }

/* Sticky save bar - the count updates live as checkboxes change, so
   "selected" and "saved" are visibly different states until Save is
   clicked (the "colleagues can't tell if it's done" complaint). */
.save-bar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: -64px; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 10px; box-shadow: 0 -4px 14px rgba(0,0,0,.08);
}
.save-bar #save-bar-count { font-size: 13px; color: var(--ink-soft); }
.save-bar-dirty { border-color: var(--accent); }
.save-bar-dirty #save-bar-count { color: var(--accent); font-weight: 600; }