/* ============ design tokens ============ */
:root {
    --bg: #f4f6fa;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --border: #e3e8ef;
    --text: #1e293b;
    --text-soft: #64748b;
    --text-mute: #94a3b8;
    --primary: #3a8ae8;
    --primary-soft: #eaf3fe;
    --primary-strong: #2569c6;
    --success: #1aa86b;
    --warn: #d98a1a;
    --danger: #d04b4b;
    --danger-soft: #fdecec;
    --warn-soft: #fdf4e2;
    --radius: 14px;
    --radius-sm: 8px;
    --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.18);
    --font: "Inter", "Segoe UI", "Avenir Next", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    color-scheme: light;
}

/* ============ dark theme ============ */
html[data-theme="dark"] {
    --bg: #0e1420;
    --surface: #182030;
    --surface-2: #131a27;
    --border: #28324a;
    --text: #e8eef8;
    --text-soft: #a3b2c9;
    --text-mute: #6f7f99;
    --primary: #4f9bf2;
    --primary-soft: #15294a;
    --primary-strong: #7fb6ff;
    --success: #2bbd7e;
    --warn: #e3ab3e;
    --danger: #e76d6d;
    --danger-soft: #3a1f24;
    --warn-soft: #382c14;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

/* Smooth transition of the theme and interactive states */
body, .panel, .sidebar, .topbar, .card, .stat-card, .btn,
.branch-link, .nav-link, input, select, textarea, table, th, td {
    transition: background-color .25s ease, color .2s ease,
                border-color .2s ease, box-shadow .2s ease;
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============ shell ============ */
.app-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}

.sidebar {
    background: linear-gradient(180deg, #2f7fe0 0%, #1f5cba 100%);
    color: #eaf1fc;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;          /* scroll if there are more items than the screen height */
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.35) transparent;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
/* so the «Платформа» (Platform) block always stays at the bottom but doesn't "stick" on scroll */
.sidebar .nav { flex: 1 0 auto; }

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.brand-mark {
    width: 38px; height: 38px;
    background: #ffffff;
    border-radius: 10px;
    display: grid; place-items: center;
    font-weight: 700; font-size: 14px; letter-spacing: .02em;
    color: var(--primary-strong);
    box-shadow: 0 4px 14px rgba(15,40,90,0.25);
}
.brand-title { font-weight: 700; font-size: 16px; color: #fff; }
.brand-sub { font-size: 11px; color: #d2e2f7; }

.nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    color: #e8effb;
    border-radius: 10px;
    font-size: 14px;
    transition: background .15s, color .15s;
}
.nav-link:hover { background: rgba(255,255,255,0.14); text-decoration: none; color: #fff; }
.nav-link.is-active { background: #ffffff; color: var(--primary-strong); font-weight: 600; box-shadow: 0 4px 14px rgba(15,40,90,0.25); }
.nav-link.is-active .nav-icon { opacity: 1; }
.nav-icon { width: 22px; display: inline-block; text-align: center; opacity: .85; }

/* Red badge with a count — e.g. the number of batches about to expire */
.nav-badge {
    margin-left: auto;
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 11px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(208, 75, 75, 0.4);
}

.scanner-hint {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px;
    font-size: 12px;
    color: #cbd5e1;
}
.scanner-hint-title { font-weight: 600; color: #fff; margin-bottom: 6px; }

.sidebar-credit {
    font-size: 10px;
    color: rgba(203, 213, 225, 0.55);
    text-align: center;
    letter-spacing: .03em;
    padding-top: 4px;
}
.sidebar-version {
    font-size: 9px;
    color: rgba(203, 213, 225, 0.40);
    margin-top: 2px;
}
kbd {
    display: inline-block;
    padding: 1px 6px;
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
    font-family: "SF Mono", "Menlo", monospace;
    font-size: 11px;
}

/* ============ main ============ */
.main {
    display: flex; flex-direction: column;
    min-width: 0;
}
.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 5px 24px;          /* thinner (Roman 2026-10-01: "make the top one… a bit narrower vertically"), was 10 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
/* ⚠️ The top bar was PUSHING THE PAGE WIDER on laptops (Roman 2026-09-22):
   in a 1024 window it needed 833px while only 736 were free — and the whole
   page shifted sideways on every page of the app. Cause: neither half of
   the bar could shrink (without min-width:0 flex won't let an element get
   narrower than its content), and the compact view only kicked in at
   720px. Now the page title shrinks with an ellipsis — a safeguard for
   any length — and the secondary items on the right drop off in steps below. */
.topbar-left { min-width: 0; flex: 1 1 auto; }
.topbar-left > div { min-width: 0; }
.topbar-title, .topbar-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-title { font-size: 18px; font-weight: 700; line-height: 1.2; }
.topbar-sub { font-size: 12px; color: var(--text-soft); margin-top: 0; line-height: 1.25; }
.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    flex: 0 0 auto;
}
.now-clock {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
}
/* Steps for narrow windows. Order — from the least needed:
   the «Онлайн» (Online) label (the avatars already say it) → the presence avatars
   themselves → the clock (the operating system shows it) → name and role (the person
   knows who they are anyway). The «🔑 Пароль» (Password) and «Вийти» (Log out) buttons
   and the theme toggle stay at ANY width. The mobile block ≤720px hides the same
   things — here intermediate steps were simply added.
   ⚠️ Presence is not hidden entirely until 1120px — instead there are fewer
   avatars (`_presenceCap` in app.js: 6 · 4 · 2), and "+N" is recalculated,
   so the number stays honest. Six avatars are ~240px, exactly what
   was eating the page title on a 1366 laptop.
   ⚠️ The selectors are deliberately TWO-CLASS: `.presence{display:flex}` is defined
   LOWER in this file, so a plain `.presence` here would silently lose the
   cascade (the same trap that clipped the pedigree). */
/* ⚠️ Presence, name and buttons no longer live in the bar — they are in the popup
   under the avatar, and there is enough room there at any width. The clock remains:
   we still hide it on narrow screens, because the system itself shows the time. */
@media (max-width: 1400px) { .topbar-right .now-clock { display: none; } }
/* 940–720px: the bar is almost mobile — the title is smaller, so it has to be
   shortened less often. The subtitle STAYS: in the herd branch it carries
   the page title («Картка тварини» (Animal card)), and it doesn't eat width —
   both lines shorten themselves, each separately. */
@media (max-width: 940px) { .topbar-title { font-size: 17px; } }
.content { padding: 14px 16px 22px; }

/* ============ stats ============ */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
/* without min-width:0 a grid item doesn't shrink — long amounts spilled over the edge */
.stat-grid > * { min-width: 0; }
.stat-grid.compact { margin-bottom: 10px; }
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow);
}
.stat-card.primary { background: linear-gradient(135deg, #2f7ad9 0%, #1f5fb0 100%); color: #fff; border: none; }
.stat-card.warn { background: linear-gradient(135deg, #f4b860 0%, #d98a1a 100%); color: #fff; border: none; }
.stat-card.danger { background: linear-gradient(135deg, #ee7474 0%, #c33b3b 100%); color: #fff; border: none; }
.stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
/* The number size adapts to the card width: «5 714 748,00» no longer
   overlaps the neighbouring tile on narrow screens. */
.stat-value {
    font-size: clamp(19px, 1.9vw, 28px);
    font-weight: 700;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.stat-label { min-height: 26px; }

/* ---- economics: chart on KPI hover ---- */
#ecoKpi .stat-card { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
#ecoKpi .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.eco-chart {
    margin-top: 6px;
    padding: 14px 18px 16px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    animation: ecoChartIn .16s ease;
}
.eco-chart-title { font-size: 12px; font-weight: 600; color: var(--text-soft); margin-bottom: 10px; }
@keyframes ecoChartIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- «База даних» (Database) page ---- */
.panel-text {
    margin: 12px 20px 0;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.55;
}
.tpl-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 20px 20px;
}
.import-result {
    margin: 4px 20px 20px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.5;
}
.import-result.ok  { background: #e1f4ec; color: #176b4a; }
.import-result.err { background: var(--danger-soft); color: var(--danger); }
.import-errors { margin-top: 8px; }
.import-errors ul { margin: 6px 0 0; padding-left: 20px; }
.danger-zone .panel-head h2 { color: var(--danger); }
.backups-section { margin: 8px 20px 20px; }
.backups-title {
    font-size: 11px; font-weight: 600; color: var(--text-soft);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}
.backups-list {
    font-size: 13px; max-height: 220px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 8px 12px; background: var(--surface-2);
    font-variant-numeric: tabular-nums;
}
.backups-list .empty { color: var(--text-mute); }
.backup-item { padding: 3px 0; line-height: 1.5; }
.backup-item a { color: var(--primary); text-decoration: none; }
.backup-item a:hover { text-decoration: underline; }

/* compact action rows on the «База даних» (Database) page */
.db-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 20px 18px;
}
.db-row-gap { flex: 1 1 24px; min-width: 0; }
.db-row .db-file {
    flex: 1 1 200px;
    min-width: 0;
    font-size: 13px;
}
.db-row .btn { white-space: nowrap; }

.backups-details { margin: 0 20px 20px; font-size: 13px; }
.backups-details summary {
    cursor: pointer;
    padding: 6px 12px;
    color: var(--text-soft);
    user-select: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.backups-details summary:hover { color: var(--text); }
.backups-details[open] summary { margin-bottom: 8px; }

/* ---- login and setup pages ---- */
.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 20px;
    font-family: var(--font);
}
.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 30px;
}
.auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}
.auth-title { font-size: 20px; font-weight: 700; margin: 0 0 14px; }
.auth-hint {
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 16px;
}
.auth-error {
    background: var(--danger-soft);
    color: var(--danger);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    font-size: 13px;
}
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-submit { margin-top: 8px; }
.user-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -4px 0 0;
}
.user-chip {
    font: inherit;
    font-size: 12px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 999px;
    cursor: pointer;
    color: var(--text-soft);
}
.user-chip:hover {
    background: var(--primary-soft);
    color: var(--primary-strong);
    border-color: var(--primary-soft);
}
.online-now {
    color: var(--success);
    font-weight: 600;
    font-size: 13px;
}

/* ---- topbar: everything about yourself under one avatar ----
   Roman 2026-09-25: "make this part just a button in the top right
   corner — you click and it pops up". The bar keeps only the avatar with
   initials; name, who is online, password, share, install, theme and
   log out — in the popup below it. */
.ubox { position: relative; }
.ubox-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px; border: 1px solid transparent; border-radius: 999px;
    background: none; cursor: pointer; line-height: 1;
}
.ubox-btn:hover, .ubox-btn[aria-expanded="true"] {
    border-color: var(--border-strong); background: var(--surface-2);
}
.ubox-av {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--primary); color: #fff;
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
    box-shadow: 0 0 0 2px var(--surface);
}
.ubox-av.lg { width: 38px; height: 38px; font-size: 14px; }
/* how many other people are on the farm right now — visible without opening */
.ubox-n {
    min-width: 16px; height: 16px; padding: 0 4px; margin-right: 2px;
    border-radius: 999px; background: var(--success, #1aa86b); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.ubox-n[hidden] { display: none; }
.ubox-pop {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 200;
    width: 268px; padding: 12px; background: var(--surface);
    border: 1px solid var(--border-strong); border-radius: 12px;
    box-shadow: var(--shadow-lg, 0 12px 36px rgba(0, 0, 0, .18));
}
.ubox-pop[hidden] { display: none !important; }
.ubox-head { display: flex; align-items: center; gap: 10px; }
.ubox-who { display: flex; flex-direction: column; min-width: 0; }
.ubox-who b { font-size: 13.5px; color: var(--text); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.ubox-who i { font-style: normal; font-size: 10px; color: var(--text-soft);
    text-transform: uppercase; letter-spacing: .05em; }
.ubox-pop .presence { flex-wrap: wrap; margin: 10px 0 0; }
.ubox-pop .presence:empty { display: none; }
/* ⚠️ The «Онлайн» (Online) label is hidden on narrow screens by the rule below — but that is
   about the BAR, where space was short. In the popup, without it a lone avatar would remain
   that nobody would read. The two-class selector is stronger — it overrides. */
.ubox-pop .presence-label { display: inline; }
/* license status in the user menu: status dot, name on the left, state on the right */
.ubox-lic { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 7px 10px;
    border-radius: 9px; background: var(--surface-2); color: var(--text); text-decoration: none;
    font-size: 13px; }
.ubox-lic::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
    background: #1aa86b; }
.ubox-lic.is-warn::before { background: #d08700; }
.ubox-lic.is-bad::before { background: #c2333a; }
.ubox-lic.is-bad .ubox-lic-v { color: #c2333a; }
html[data-theme="dark"] .ubox-lic.is-bad .ubox-lic-v { color: #f08a8e; }
.ubox-lic-k { color: var(--text-soft); }
.ubox-lic-v { margin-left: auto; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
a.ubox-lic[href]:hover { background: var(--primary-soft); }
.ubox-acts { display: flex; flex-direction: column; gap: 2px;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.ubox-a {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 7px 9px; border: 0; border-radius: 8px; background: none;
    color: var(--text); font: inherit; font-size: 13px; text-align: left;
    text-decoration: none; cursor: pointer;
}
.ubox-a:hover { background: var(--surface-2); }
.ubox-out { color: var(--danger, #b3372f); }
/* link to the farm — to send to someone via Viber or Telegram */
.ubox-share { margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--border); }
.ubox-share[hidden] { display: none !important; }
.ubox-url { width: 100%; height: 30px; padding: 0 8px; box-sizing: border-box;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface-2); color: var(--text-soft); font-size: 12px; }
/* messengers — just icons in their own colours: they are recognized by eye,
   labels are unnecessary here (Roman 2026-09-25) */
.ubox-srow { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ubox-i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: 0 0 auto; padding: 0;
    border: 1px solid var(--border); border-radius: 50%;
    background: var(--surface); color: var(--text-soft); cursor: pointer;
    transition: transform .1s, border-color .1s, color .1s, background .1s;
}
.ubox-i svg { width: 19px; height: 19px; }
.ubox-i:hover { transform: translateY(-1px); }
.ubox-i[hidden] { display: none; }
/* at rest — its own brand colour, on hover also an outline of the same colour */
.ubox-i.is-tg { color: #29a9eb; } .ubox-i.is-tg:hover { border-color: #29a9eb; }
.ubox-i.is-viber { color: #7360f2; } .ubox-i.is-viber:hover { border-color: #7360f2; }
.ubox-i.is-wa { color: #25d366; } .ubox-i.is-wa:hover { border-color: #25d366; }
.ubox-i.is-copy:hover, .ubox-i.is-sys:hover { border-color: var(--primary);
    color: var(--primary); }
/* a divider separates the messengers from the service actions */
.ubox-isep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }
.ubox-shint { margin: 8px 0 0; font-size: 11.5px; color: var(--text-mute);
    line-height: 1.35; }

/* ============ panels ============ */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 14px;
}
.panel-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    gap: 12px;
    flex-wrap: wrap;
}
/* ⚠️ THE HEADER REPEATS THE PANEL CORNER (Roman 2026-09-22, screenshot with an arrow at the
   corner: "the corner didn't change"). Normally the panel itself clips the corner via
   overflow:hidden, but panels with dropdowns must be overflow:visible (otherwise the menu
   gets clipped) — and the tinted header background painted over the rounding, so the corner
   became square. Minus 1 px — the panel border width, so the arc fits exactly into it. */
.panel > .panel-head:first-child {
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.panel-head h2 { font-size: 15px; font-weight: 600; margin: 0; }
.head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Filter panel in one row (moves log) */
.head-actions.filters-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
.head-actions.filters-row .inline-label,
.head-actions.filters-row .btn { flex: 0 0 auto; white-space: nowrap; }
.head-actions.filters-row #reasonFilter { max-width: 190px; }

/* Compact header: search + buttons in one row */
.head-actions-row {
    flex: 1;
    flex-wrap: nowrap;
}
.head-actions-row .search-input {
    flex: 1;
    min-width: 160px;
}
.head-actions-row .btn { white-space: nowrap; }

.two-col {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
@media (max-width: 1180px) {
    .two-col { grid-template-columns: 1fr; }
}

/* Receipt page: form and log — both full width */
.receive-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.receive-layout .panel { margin-bottom: 0; width: 100%; }

/* Sale page: item entry on the left, the sales slip on the right */
.sale-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 20px;
    align-items: start;
}
.sale-layout .panel { margin-bottom: 0; }
@media (max-width: 1100px) {
    .sale-layout { grid-template-columns: 1fr; }
}

/* ============ tables ============ */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.table th, .table td {
    padding: 6px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table thead th {
    background: var(--surface-2);
    color: var(--text-soft);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .03em;
}
.table tbody tr:hover { background: #f9fbff; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .empty { text-align: center; color: var(--text-mute); padding: 14px; }
.update-box { margin: 8px 14px 4px; padding-top: 10px; border-top: 1px solid var(--border); }
.update-banner {
    background: #e1f4ec; color: #176b4a; border: 1px solid #b9e3d2;
    border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 10px;
}
.update-banner a { color: #176b4a; text-decoration: underline; }

/* ── Minimalist «Версія та оновлення» (Version and update) panel ── */
.ver-body { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.ver-headline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ver-app { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: .01em; }
.ver-meta { font-size: 12px; color: var(--text-soft); }
.ver-update-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ver-flex { flex: 1 1 auto; }
.ana-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ana-toggle input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.ver-source {
    flex: 1 1 auto; min-width: 0;
    font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface-2); color: var(--text);
}
.ver-source:focus { border-color: var(--primary); outline: none; background: var(--surface); }
.btn-sm { padding: 6px 10px; font-size: 12px; }
.ver-status:empty { display: none; }
.ver-status { font-size: 12px; color: var(--text-soft); }
.ver-hint { font-size: 11px; color: var(--text-mute); }
.ver-history { font-size: 12px; }
.ver-history summary { cursor: pointer; color: var(--text-soft); list-style: none; }
.ver-history summary::-webkit-details-marker { display: none; }
.ver-history summary::before { content: "▸ "; }
.ver-history[open] summary::before { content: "▾ "; }
.ver-history .backup-item { padding: 4px 0; }

/* ── Compact view of the «База даних» (Database) page ── */
.db-compact .panel { margin-bottom: 6px; }
/* collapsible panels */
.collapsible-head { cursor: pointer; user-select: none; }
.collapse-chevron { color: var(--text-soft); font-size: 12px; transition: transform .15s ease; margin-left: auto; }
.panel.is-collapsed .collapse-chevron { transform: rotate(-90deg); }
.db-compact .panel.is-collapsed > :not(.panel-head) { display: none; }
.db-compact .panel.is-collapsed .panel-head { border-bottom: none; }
.db-compact .panel-head { padding: 8px 14px; }
.db-compact .panel-head h2 { font-size: 14px; }
.db-compact .panel-text { margin: 8px 14px 0; font-size: 12px; line-height: 1.45; }
.db-compact .db-row { gap: 8px; padding: 8px 14px 12px; }
.db-compact .btn { padding: 5px 11px; font-size: 12px; }
.db-compact .db-file { font-size: 12px; }
.db-compact .version-grid { gap: 16px; padding: 8px 14px 2px; }
.db-compact .version-cell .version-value { font-size: 15px; }
.db-compact .backup-dir-box { margin: 8px 14px 4px; padding-top: 8px; }
.db-compact .backups-details { margin: 0 14px 12px; font-size: 12px; }
.db-compact #backupDirHint { font-size: 11px; }

.version-grid { display: flex; flex-wrap: wrap; gap: 22px; padding: 12px 20px 4px; }
.version-cell .version-value { font-size: 18px; font-weight: 700; color: var(--text); margin-top: 2px; }
.backup-dir-box { margin: 14px 0 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.backup-dir-box .field-label { display: block; margin-bottom: 6px; font-size: 12px; color: var(--text-soft); }
/* Path field — the full row (wide), buttons wrap below it.
   Two-class specificity — to override .search-input (max-width:320px). */
.backup-dir-row { flex-wrap: wrap; }
.backup-dir-row .backup-dir-input {
    flex: 1 1 100%; width: 100%; min-width: 0; max-width: none;
    font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.backup-dir-row .btn { flex: 0 0 auto; white-space: nowrap; }
.table tfoot td { font-weight: 600; background: var(--surface-2); }

/* sortable headers */
.sortable-th {
    position: relative;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.sortable-th:hover { background: #eef2f7; color: var(--text); }
.sortable-th .sort-ind {
    display: inline-block;
    width: 12px;
    text-align: center;
    color: var(--text-mute);
    font-size: 10px;
    margin-left: 2px;
}
.sortable-th.sort-asc  { color: var(--primary-strong); background: var(--primary-soft); }
.sortable-th.sort-desc { color: var(--primary-strong); background: var(--primary-soft); }
.sortable-th.sort-asc  .sort-ind::after { content: '▲'; color: var(--primary); }
.sortable-th.sort-desc .sort-ind::after { content: '▼'; color: var(--primary); }

/* filter bar */
.filters-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 20px;
    background: #fbfcfe;
    border-bottom: 1px solid var(--border);
}
.filters-bar .inline-label select {
    min-width: 130px;
}
.filter-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
}

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.badge.in { background: #e1f4ec; color: var(--success); }
.badge.out { background: var(--primary-soft); color: var(--primary-strong); }
.badge.wo { background: var(--warn-soft); color: var(--warn); }
.badge.ret { background: #fff3e0; color: #b25e00; }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.ok { background: #e1f4ec; color: var(--success); }

/* ============ forms ============ */
.form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 20px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: span 2; }
.form > .full { grid-column: span 2; }

/* Stacked form variant — each section takes the full panel width,
   with its own inner grid inside each section. */
.form.stacked {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.form.stacked > * { width: 100%; }
.form.stacked .actions { justify-content: flex-end; }

/* toggle checkbox (e.g. «друкувати чек» (print slip)) */
.check-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    user-select: none;
}
.check-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
    margin: 0;
    flex: none;
}
.field-label { font-size: 11px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], input[type="email"], input[type="password"], select {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    font: inherit;
    color: var(--text);
    background: var(--surface);
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
input[type="time"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
input:focus, select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(47,122,217,0.18);
}
.scan-input {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 14px 16px;
    background: #f5f9ff;
    border: 2px dashed #b8d4f3;
}
.scan-input:focus { background: #fff; border-style: solid; }

/* Highlighting of unfilled required fields */
input.input-error,
.input-error input {
    border-color: var(--danger) !important;
    background: var(--danger-soft);
    box-shadow: 0 0 0 3px rgba(208, 75, 75, 0.16);
}

/* Near expiry (≤30 days) — yellow warning.
   Expired batches are highlighted red via .input-error. */
input.input-warn,
.input-warn input {
    border-color: var(--warn) !important;
    background: var(--warn-soft);
    box-shadow: 0 0 0 3px rgba(217, 138, 26, 0.16);
}

/* «Схеми» (Schemes) page — compact, small font, even spacing */
.form-hint { font-size: 12px; margin: 8px 2px 0; }
.plan-when { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-mute); }
.plan-sel { padding: 4px 8px; font: inherit; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.schemes-page .table-compact th,
.schemes-page .table-compact td { font-size: 12px; }
/* Denser rows in the schemes table (smaller vertical padding) */
#schemesTable td, #schemesTable th { padding-top: 2px; padding-bottom: 2px; }
#schemesTable .btn-icon { padding-top: 2px; padding-bottom: 2px; }
#orderTable .row-urgent td { background: var(--danger-soft); }
#orderTable .row-need td { background: rgba(26, 168, 107, .15); }
.order-tools { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; }
.order-tools #orderSearch {
    flex: 1; min-width: 160px; padding: 6px 10px; font: inherit; font-size: 13px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
#toggleUnused.is-active { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }

/* «№» column + drag-and-drop of scheme rows */
.seq-col { width: 1%; white-space: nowrap; color: var(--text-mute); }
#schemesTable tbody tr[data-id] { cursor: default; }
#schemesTable .drag-handle {
    cursor: grab; color: var(--text-mute); margin-right: 6px;
    user-select: none; letter-spacing: -1px;
}
#schemesTable .drag-handle:active { cursor: grabbing; }
#schemesTable tr.dragging { opacity: .55; background: var(--surface-2); }

.modal-wide { max-width: min(1080px, 94vw); width: 94vw; }
.btn-sm { padding: 3px 10px; font-size: 12px; }

.scheme-lines { margin: 4px 0 6px; }
.scheme-lines th, .scheme-lines td { font-size: 12px; padding: 4px 6px; vertical-align: middle; }
.scheme-lines select,
.scheme-lines input {
    width: 100%;
    padding: 4px 6px;
    font: inherit;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.scheme-lines .ln-dose,
.scheme-lines .ln-times { text-align: right; }
.scheme-lines .ln-unit { white-space: nowrap; }

.need-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.need-block { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; }
.need-block-title { font-weight: 600; font-size: 12px; margin-bottom: 4px; }
.need-block .table-compact td { font-size: 12px; padding: 3px 4px; }

/* Herd management — groups × months grid */
.herd-page .head-actions { gap: 10px; align-items: center; }
.year-nav { display: inline-flex; align-items: center; gap: 6px; }
.year-label { font-weight: 600; min-width: 48px; text-align: center; }
.herd-grid th, .herd-grid td { font-size: 12px; padding: 4px 6px; vertical-align: middle; }
.herd-grid .herd-group-col { min-width: 150px; }
.herd-grid input {
    width: 100%;
    padding: 4px 6px;
    font: inherit;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.herd-grid .hd-month { width: 54px; text-align: right; }
.herd-grid td.num { text-align: right; }
.herd-grid tfoot td { border-top: 2px solid var(--border); padding-top: 7px; }


.actions {
    display: flex; gap: 10px; justify-content: flex-end;
}
.actions.full { grid-column: span 2; }
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, transform .05s, border-color .15s;
}
.btn:hover { background: #ebf0f7; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-strong); }
.btn-ghost { background: transparent; border-color: var(--border); }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-success:hover { background: #158a57; }
.btn-icon {
    padding: 6px 8px;
    background: transparent;
    color: var(--text-soft);
}
.btn-icon:hover { background: var(--surface-2); color: var(--text); }

.search-input { min-width: 220px; max-width: 320px; flex: 0 1 auto; }
.search-narrow { min-width: 160px; max-width: 220px; }

/* Column picker: a button with a dropdown checkbox menu */
.col-picker { position: relative; display: inline-block; }
.col-picker-btn { white-space: nowrap; }
.col-picker-menu {
    /* Menu — position: fixed, so it isn't clipped by the panel's overflow:hidden.
       The top/left coordinates are set in JS on the fly. */
    position: fixed;
    z-index: 1000;
    min-width: 220px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 10px 12px;
}
.col-picker-title {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-bottom: 8px;
    font-weight: 600;
    letter-spacing: .04em;
}
.col-picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}
.col-picker-item input { accent-color: var(--primary); width: 16px; height: 16px; }
.col-picker-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.col-picker-actions .btn { padding: 4px 10px; font-size: 12px; }
.inline-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--text-soft);
}
.inline-label select, .inline-label input { width: auto; }

/* ============ form sections (receive) ============ */
.form-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px 14px;
    background: var(--surface-2);
}
.form-section-title {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--primary-strong);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.form-section-title .hint {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-mute);
    font-size: 11px;
}
.form-section-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.form-section-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.form-section-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 980px) {
    .form-section-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .form-section-grid,
    .form-section-grid.four { grid-template-columns: 1fr; }
}

/* Two form-sections side by side in the receipt form («Партія» (Batch) | «Закупка» (Purchase)) */
.form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}
@media (max-width: 1100px) {
    .form-row-2col { grid-template-columns: 1fr; }
}

/* Receipt: 2-column layout.
   Left — a compact «Пошук препарату» (Drug search) block (sticky, stays in view
   while the right column scrolls). Right — a vertical stack of all the receipt
   entry forms: Invoice, Batch, Purchase, Sale, Note, Submit. */
.receive-2col {
    display: flex;
    gap: 0;
    align-items: flex-start;
}
.receive-2col > .receive-search-col {
    flex: 0 0 var(--recv-left, 42%);
    position: sticky;
    top: 0;
    min-width: 0;
}
.receive-2col > .receive-fields-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
@media (max-width: 1100px) {
    .receive-2col { flex-direction: column; }
    .receive-2col > .receive-search-col { flex: none; width: 100%; position: static; }
    .receive-2col > .col-splitter { display: none; }
}

/* In the stacked form remove the double padding of the outer label fields */
.form.stacked > .field {
    padding: 0;
}

/* ===== Compact variant of the receipt form =====
   Squeezes the vertical padding in all invoice sections so the whole form
   fits without extra scrolling. Applies only to the panel with the class
   .form-panel — other forms keep their usual size. */
.form-panel .form.stacked     { padding: 14px; gap: 9px; }
.form-panel .form-section     { padding: 9px 12px 10px; }
.form-panel .form-section-title { margin-bottom: 6px; }
.form-panel .form-section-grid { gap: 9px; }
.form-panel .field            { gap: 3px; }
.form-panel .field-label      { font-size: 10px; }
.form-panel input[type="text"],
.form-panel input[type="number"],
.form-panel input[type="date"],
.form-panel input[type="search"],
.form-panel select            { padding: 6px 10px; }
.form-panel .scan-input       { padding: 9px 14px; font-size: 15px; }
.form-panel .vat-summary      { margin-top: 6px; padding: 5px 10px; font-size: 11px; }
.form-panel .margin-hint .hint-value { padding: 6px 10px; }
.form-panel .product-preview  { padding: 8px 12px; }
.form-panel .actions          { margin-top: 2px; }
.form-panel .panel-head       { padding: 10px 14px; }
input[readonly] {
    background: #eef2f7 !important;
    color: var(--text-soft);
    cursor: not-allowed;
}
.vat-summary {
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--primary-soft);
    color: var(--primary-strong);
    border-radius: var(--radius-sm);
    font-size: 12px;
}
.vat-summary strong { font-size: 13px; }

/* «без ПДВ» (no VAT) mode — hide the VAT fields, grid from 4 → 2 columns */
.form-section[data-vat="without"] .vat-only { display: none !important; }
.form-section[data-vat="without"] .form-section-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vat-toggle .seg-btn { font-size: 11px; padding: 4px 12px; }
.margin-hint .hint-value {
    padding: 9px 12px;
    background: #eef2f7;
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: var(--success);
    font-variant-numeric: tabular-nums;
}
.margin-hint .hint-value.negative { color: var(--danger); }

/* ============ smart autocomplete ============ */
.autocomplete-wrap { position: relative; }
.autocomplete-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    max-height: 300px;
    overflow-y: auto;
}
.autocomplete-item {
    padding: 9px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover,
.autocomplete-item.is-active { background: var(--primary-soft); }

/* Feeding: the entry panel doesn't clip the dropdown (so it can be taller) */
.panel-add.of-visible { overflow: visible; }
/* Feeding: the feed list is taller (2.5×) and denser vertically */
.autocomplete-list.ac-dense { max-height: 750px; }
.autocomplete-list.ac-dense .autocomplete-item { padding: 3px 14px; }
.autocomplete-list.ac-dense .autocomplete-item .ac-name { font-size: 14px; line-height: 1.15; }
.autocomplete-list.ac-dense .autocomplete-item .ac-meta { margin-top: 0; line-height: 1.1; }
.autocomplete-list.ac-dense .autocomplete-item .ac-stock small { margin-top: -1px; }
.autocomplete-item .ac-name { font-weight: 600; font-size: 13px; }
.autocomplete-item .ac-meta {
    font-size: 11px;
    color: var(--text-soft);
    margin-top: 2px;
}
.autocomplete-item mark {
    background: #fde9a8;
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}
.autocomplete-item .ac-stock {
    flex-shrink: 0;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.autocomplete-item .ac-stock.low { color: var(--danger); }
.autocomplete-item .ac-stock small {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-mute);
    text-transform: uppercase;
}
.autocomplete-empty {
    padding: 12px 14px;
    color: var(--text-mute);
    font-style: italic;
    font-size: 12px;
}

/* ============ product preview ============ */
.product-preview {
    grid-column: span 2;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    min-height: 76px;
    display: flex; align-items: center; gap: 18px;
}
.preview-empty { color: var(--text-mute); font-style: italic; }
.preview-name { font-weight: 700; font-size: 16px; }
.preview-meta { color: var(--text-soft); font-size: 12px; margin-top: 4px; }
.preview-stock {
    margin-left: auto;
    text-align: right;
}
.preview-stock-value { font-size: 22px; font-weight: 700; color: var(--primary); }
.preview-stock-label { font-size: 11px; color: var(--text-soft); text-transform: uppercase; }
.preview-stock.low .preview-stock-value { color: var(--danger); }

/* ============ sale page layout ============ */
.sale-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 20px;
    padding: 20px;
    align-items: start;
}
.sale-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
@media (max-width: 1100px) {
    .sale-layout { grid-template-columns: 1fr; }
}

/* ============ expandable batches in stock ============ */
.batch-toggle {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 10px;
    color: var(--text-soft);
    width: 18px;
    padding: 2px;
    margin-right: 4px;
    border-radius: 4px;
    vertical-align: middle;
}
.batch-toggle:hover { background: var(--primary-soft); color: var(--primary); }
.batch-detail > td { padding: 0 !important; background: #f6f8fb; }
.batch-box { padding: 10px 16px 14px 40px; }
.batch-box-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--primary-strong);
    font-weight: 700;
    margin-bottom: 8px;
}
/* «Вирівняти залишок» (Align balance) — on the left, right after the block title: on the right it
   would slide off the edge of a wide table together with the actions column */
.batch-align {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    white-space: nowrap;
}
.batch-box-foot { margin-top: 8px; display: flex; }
.batch-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.batch-table th {
    text-align: left;
    color: var(--text-mute);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    padding: 4px 8px;
}
.batch-table th.num, .batch-table td.num { text-align: right; }
.batch-table td {
    padding: 6px 8px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.batch-empty { color: var(--text-mute); font-style: italic; font-size: 12px; }
.batch-exp-edit {
    padding: 3px 6px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: inherit;
}

/* column width resizing — an invisible handle on the right edge of the header.
   Highlighted only on hover, so as not to distract the eye with an extra grid.
   The container (th) must be positioned; makeColumnsResizable in app.js guarantees this. */
.col-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 5;
    background: transparent;
    transition: background .12s;
}
.col-resizer:hover {
    background: linear-gradient(to right,
        transparent 0,
        transparent 2px,
        rgba(47, 122, 217, 0.55) 2px,
        rgba(47, 122, 217, 0.55) 6px,
        transparent 6px,
        transparent 100%);
}

/* ============ sales slip ============ */
.cart-input {
    width: 92px;
    padding: 5px 8px;
    font-size: 13px;
    text-align: right;
}
tr.cart-over { background: var(--danger-soft); }
tr.cart-over .cart-input.cart-qty {
    border-color: var(--danger);
    color: var(--danger);
    font-weight: 600;
}
.cart-stock-note {
    font-size: 11px;
    color: var(--text-mute);
}
.cart-stock-note.over { color: var(--danger); font-weight: 600; }

/* ============ segmented ============ */
.segmented {
    display: inline-flex;
    background: var(--surface-2);
    border-radius: 999px;
    padding: 3px;
    border: 1px solid var(--border);
}
.seg-btn {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    color: var(--text-soft);
}
.seg-btn.is-active { background: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(47,122,217,0.3); }

/* ============ modal ============ */
.modal {
    position: fixed; inset: 0;
    z-index: 100;
    display: grid; place-items: center;
}
.modal[hidden] { display: none; }
/* buttons must also truly disappear under [hidden] (display: inline-flex overrides it) */
.btn[hidden] { display: none; }
.modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
}
.modal-card {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: min(560px, 92vw);
    max-height: 90vh;
    overflow: auto;
}
.modal-card h2 {
    padding: 20px 20px 0;
    margin: 0;
    font-size: 18px;
}
.modal-card.modal-wide { width: min(1080px, 94vw); max-width: min(1080px, 94vw); }

/* ---- barcode generation in the «Новий товар» (New product) modal ---- */
.input-with-btn { display: flex; gap: 8px; }
.input-with-btn input { flex: 1; min-width: 0; }
.input-with-btn .btn { white-space: nowrap; }
.field-hint { font-size: 11px; color: var(--text-mute); }
.barcode-label-box {
    gap: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}
.barcode-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.barcode-label svg { max-width: 100%; height: auto; }
.bc-label-name {
    font-size: 13px;
    font-weight: 700;
    color: #000000;
    text-align: center;
    word-break: break-word;
}

.edit-product-line {
    margin: 14px 20px 0;
    padding: 10px 14px;
    background: var(--primary-soft);
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 15px;
    color: var(--primary-strong);
}
.edit-warning {
    margin: 10px 20px 0;
    padding: 8px 14px;
    background: var(--warn-soft);
    color: var(--warn);
    border-radius: var(--radius-sm);
    font-size: 12px;
}

/* ============ toast ============ */
.toast-root {
    position: fixed;
    bottom: 24px; right: 24px;
    display: flex; flex-direction: column; gap: 10px;
    z-index: 1200;
}
.toast {
    background: #1e293b;
    color: #fff;
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    font-size: 13px;
    min-width: 240px;
    max-width: 360px;
    animation: toast-in .25s ease;
}
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
.toast.warn { background: var(--warn); }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============ misc ============ */
/* Action buttons container — always inside the <td>, not on the <td> itself,
   otherwise display:inline-flex breaks the table layout. */
.row-actions {
    display: inline-flex;
    gap: 4px;
    white-space: nowrap;
}
.table td.col-actions { white-space: nowrap; width: 1%; }
.btn-icon-danger:hover { background: var(--danger-soft); color: var(--danger); }

/* Horizontal scrolling for wide tables — protection against clipping */
.table-scroll { overflow-x: auto; }

/* Compact table — smaller padding so more columns fit */
.table-compact th,
.table-compact td { padding: 4px 10px; }
.table .nowrap { white-space: nowrap; }
.text-mute { color: var(--text-mute); }
.text-danger { color: var(--danger); }
.text-warn { color: var(--warn); }
.text-success { color: var(--success); }

/* Reference-list row: dropdown + «+» button (issue to a block/recipient) */
.ref-row { display: flex; gap: 6px; align-items: stretch; }
.ref-row .ref-select { flex: 1; min-width: 0; }
.ref-row .btn-icon { flex: 0 0 auto; width: 38px; }

/* Issue: block/recipient in the list rows; the columns are hidden in write-off mode */
/* Block/responsible-person selects — text on the LEFT. Without this, the text-align:right
   inherited from .cart-input breaks the native <select> in Windows Chrome
   (the text and the dropdown drift to the right). */
#cartTable .cart-block, #cartTable .cart-recipient {
    min-width: 130px; width: 100%; text-align: left;
}
/* Just in case — never right-align any select with the cart-input class */
select.cart-input { text-align: left; }
#cartTable.hide-issue .issue-col { display: none; }

/* «Довідники» (Reference lists) page */
.catalogs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.ref-add { display: flex; gap: 8px; margin-bottom: 12px; }
.ref-add .ref-add-input { flex: 1; min-width: 0; }
.ref-add .btn { flex: 0 0 auto; }
.ref-list { list-style: none; margin: 0; padding: 0; }
.ref-list .empty { color: var(--text-mute); padding: 8px 0; }
.ref-item { display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.ref-item:last-child { border-bottom: none; }
.ref-item-name { overflow: hidden; text-overflow: ellipsis; }
.ref-item-noname { color: var(--text-muted, #9aa1a9); font-style: italic; }
.block-none-hint { margin: 4px 10px 8px; font-size: 12px; color: var(--text-muted, #7a828c); }
.block-none-actions { padding: 0 10px 8px; }

/* VAT rate field next to the toggle (appears only in «З ПДВ» (With VAT) mode) */
.vat-controls { display: inline-flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
.vat-controls input.vat-pct-input {
    width: 56px;
    flex: 0 0 auto;
    text-align: center;
    border-radius: 999px;
    padding: 6px 8px;
    font-size: 11px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}
.vat-controls input.vat-pct-input:focus {
    border-color: var(--primary);
    outline: none;
}

/* Sliding divider between the left and right issue panels */
.sale-layout {
    display: flex;
    gap: 0;
    align-items: flex-start;
    padding: 0;
}
.sale-layout > .panel { margin-bottom: 0; min-width: 0; }
.sale-layout > .panel:first-child { flex: 0 0 var(--sale-left, 44%); }
.sale-layout > .panel:last-child  { flex: 1 1 0; }
.col-splitter {
    flex: 0 0 18px;
    align-self: stretch;
    cursor: col-resize;
    position: relative;
}
.col-splitter::before {
    content: "";
    position: absolute; top: 0; bottom: 0; left: 50%;
    width: 2px; transform: translateX(-50%);
    background: var(--border);
    border-radius: 2px;
    transition: background .15s, width .15s;
}
.col-splitter:hover::before,
.col-splitter.dragging::before { background: var(--primary); width: 4px; }
@media (max-width: 1100px) {
    .sale-layout { flex-direction: column; }
    .sale-layout > .panel:first-child { flex: none; width: 100%; }
    .col-splitter { display: none; }
}

/* ============ Platform: production branch switcher ============ */
.branch-switcher {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 10px; margin: 4px 8px 6px;
    border-radius: var(--radius-sm, 8px);
    background: var(--surface-2);
}
.branch-link {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: 8px;
    color: var(--text-soft); text-decoration: none;
    font-size: 13px; line-height: 1.1;
}
/* Indicator of an available update on the «База даних» (Database) item */
.update-badge {
    margin-left: auto;
    background: #28c76f; color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: .02em;
    padding: 2px 7px; border-radius: 999px; white-space: nowrap;
    animation: updatePulse 1.8s ease-in-out infinite;
}
@keyframes updatePulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(40,199,111,0.55); }
    50%     { box-shadow: 0 0 0 6px rgba(40,199,111,0); }
}
/* Highlighting of the «База даних» (Database) row when an update is available */
.branch-link.has-update {
    background: rgba(40,199,111,0.12);
    box-shadow: inset 3px 0 0 #28c76f;
    animation: rowGlow 1.8s ease-in-out infinite;
}
.branch-link.has-update.is-active { animation: none; }
@keyframes rowGlow { 0%,100% { background: rgba(40,199,111,0.12); } 50% { background: rgba(40,199,111,0.22); } }
.branch-link:hover { background: rgba(0,0,0,0.04); color: var(--text); }
.branch-link.is-active { background: var(--primary); color: #fff; font-weight: 600; }
.branch-link .branch-icon { font-size: 16px; width: 20px; text-align: center; }
.branch-link .branch-label { flex: 1; }
.branch-link .branch-tag {
    font-size: 9px; text-transform: uppercase; letter-spacing: .04em;
    padding: 1px 6px; border-radius: 999px;
    background: var(--surface); color: var(--text-mute);
}
.branch-link.is-active .branch-tag { background: rgba(255,255,255,0.25); color: #fff; }
.nav-soon-note { padding: 8px 14px; font-size: 12px; color: var(--text-mute); }

/* Hub: branch tiles */
.branch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.branch-card {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 18px; border: 1px solid var(--border);
    border-radius: var(--radius-sm, 10px); background: var(--surface);
    text-decoration: none; color: inherit;
    transition: box-shadow .15s, transform .15s, border-color .15s;
}
.branch-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--primary); }
.branch-card.is-soon { opacity: .85; }
.branch-card-icon { font-size: 30px; line-height: 1; }
.branch-card-title { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.branch-card-desc { color: var(--text-mute); font-size: 13px; margin-top: 4px; }

/* Branch placeholder */
.branch-placeholder { padding: 24px; }
.branch-placeholder .plan-list { margin: 10px 0 0; padding-left: 20px; line-height: 1.8; }

/* Platform block (Users) above the branches */
.admin-switcher { margin-top: 0; }
.switcher-title {
    font-size: 9px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-mute); padding: 2px 10px 4px;
}
/* Per-block permission checkboxes in the user card */
.blocks-check-list {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 200px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: var(--radius-sm, 8px);
    padding: 10px 12px; background: var(--surface-2);
}
.blocks-check-list label { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
.blocks-check-list .empty { color: var(--text-mute); font-size: 12px; }
.blocks-check-hint { font-size: 11px; color: var(--text-soft); margin-top: 4px; }

/* Compact view of the «Довідники» (Reference lists) page */
.catalogs-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.catalogs-grid .panel { margin-bottom: 0; }
.catalogs-grid .panel-head { padding: 9px 14px; }
.catalogs-grid .panel-head h2 { font-size: 14px; }
.catalogs-grid .ref-add { padding: 12px 14px 8px; gap: 6px; margin-bottom: 0; }
.catalogs-grid .ref-add .ref-add-input { padding: 7px 10px; font-size: 13px; }
.catalogs-grid .ref-add .btn { padding: 7px 12px; font-size: 13px; }
.catalogs-grid .ref-list { padding: 0 8px 8px; }
.catalogs-grid .ref-item { padding: 5px 8px; font-size: 13px; }
.catalogs-grid .ref-item .btn-icon { padding: 3px 6px; }

/* Compact header/filters of the «Склад» (Stock) page */
.products-compact .panel-head { padding: 9px 16px; }
.products-compact .panel-head h2 { font-size: 14px; }
.products-compact .filters-bar { padding: 8px 16px; gap: 10px; }
.products-compact .filters-bar .inline-label { font-size: 13px; }
.products-compact .filters-bar .inline-label select { min-width: 108px; padding: 5px 8px; font-size: 13px; }
.products-compact .head-actions .btn,
.products-compact .filters-bar .btn { padding: 6px 12px; font-size: 13px; }
.products-compact .search-input { padding: 7px 11px; font-size: 13px; }

/* ===== Sidebar collapsing ===== */
.topbar-left { display: flex; align-items: center; gap: 12px; }

/* License status banner */
.lic-banner { padding: 9px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 13px; line-height: 1.4; }
.lic-banner a { font-weight: 600; text-decoration: underline; margin-left: 6px; }
.lic-banner.danger { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(195,59,59,.3); }
.lic-banner.danger a { color: var(--danger); }
.lic-banner.warn { background: #fff4e0; color: #9a6a00; border: 1px solid #f0d8a8; }
.lic-banner.warn a { color: #9a6a00; }
.lic-banner.info { background: #eef4ff; color: #2f5fb0; border: 1px solid #cfe0ff; }
.lic-banner.info a { color: #2f5fb0; }

/* Online presence in the topbar */
.presence { display: flex; align-items: center; gap: 4px; margin-right: 6px; }
.presence-label { font-size: 11px; color: var(--text-soft); text-transform: uppercase;
    letter-spacing: .04em; margin-right: 4px; }
.presence-dot {
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #28c76f;  /* green ring = online */
    cursor: default; user-select: none;
}
.presence-dot.is-me { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }
.presence-more { font-size: 11px; color: var(--text-soft); font-weight: 600; padding: 0 4px; }
@media (max-width: 640px) { .presence-label { display: none; } }

.sidebar-toggle {
    width: 36px; height: 36px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 9px;
    font-size: 16px; line-height: 1;
    cursor: pointer; color: var(--text-soft);
    flex: 0 0 auto;
}
.sidebar-toggle:hover { background: var(--primary-soft); color: var(--primary-strong); }
/* "Back / forward" arrows and page reload in the header */
.topnav { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.topnav-b {
    width: 30px; height: 30px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); background: var(--surface-2);
    border-radius: 8px; cursor: pointer; color: var(--text-soft);
}
.topnav-b svg { width: 15px; height: 15px; }
.topnav-b:hover { background: var(--primary-soft); color: var(--primary-strong); }
.topnav-b:disabled { opacity: .4; cursor: default; }
@media (max-width: 760px) { .topnav [data-go="fwd"] { display: none; } }
/* TRAIL (Roman 2026-10-01): the last 10 places as a thin row under the header — earliest on the left, «ви тут» (you are here) on the right,
   arrows between them. If it doesn't fit, the row scrolls sideways (on the phone too) and opens at the newest. */
.trail { display: flex; align-items: center; gap: 2px; padding: 5px 16px; overflow-x: auto; scrollbar-width: none;
    background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 90; }
.trail::-webkit-scrollbar { display: none; }
.trail[hidden] { display: none; }
.trail-t { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 5px; height: 20px; max-width: 190px;
    padding: 0 8px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2);
    color: var(--text); text-decoration: none; line-height: 18px; font-size: 11.5px; white-space: nowrap; }
.trail-t i { font-style: normal; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-mute); flex: 0 0 auto; }
.trail-t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.trail-ic { flex: 0 0 auto; font-size: 11px; line-height: 1; }
.trail-t:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-strong); text-decoration: none; }
.trail-t:hover i { color: var(--primary-strong); }
.trail-t:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* where you are now — the last one on the right, in the branch colour, not clickable */
.trail-t.is-cur { background: var(--primary); border-color: var(--primary); color: #fff; cursor: default; }
.trail-t.is-cur i { color: rgba(255,255,255,.8); }
.trail-a { flex: 0 0 auto; width: 14px; height: 14px; color: var(--text-mute); }
@media (max-width: 720px) { .trail { padding: 4px 10px; } }

/* Collapsed state: a narrow panel with icons only */
.app-shell.is-collapsed { grid-template-columns: 66px 1fr; }
.app-shell.is-collapsed .sidebar { padding: 18px 8px; gap: 14px; }
.app-shell.is-collapsed .brand { justify-content: center; gap: 0; }
.app-shell.is-collapsed .brand > div:last-child,
.app-shell.is-collapsed .branch-label,
.app-shell.is-collapsed .branch-tag,
.app-shell.is-collapsed .switcher-title,
.app-shell.is-collapsed .scanner-hint,
.app-shell.is-collapsed .sidebar-credit,
.app-shell.is-collapsed .nav-soon-note { display: none; }
.app-shell.is-collapsed .branch-switcher { padding: 6px 4px; margin: 0; }
.app-shell.is-collapsed .branch-link { justify-content: center; padding: 8px 0; }
.app-shell.is-collapsed .branch-icon { width: auto; }
/* nav: keep only the icon (the text is a bare node, hidden via font-size) */
.app-shell.is-collapsed .nav-link { justify-content: center; font-size: 0; padding: 10px 0; gap: 0; }
.app-shell.is-collapsed .nav-icon { font-size: 16px; width: auto; }
.app-shell.is-collapsed .nav-badge { display: none; }

/* ===== Vertical collapsing of the branch picker ===== */
.switcher-head {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; border: none; background: transparent; cursor: pointer;
    padding: 4px 8px 6px; margin: 0;
    font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-mute);
}
.switcher-head:hover { color: var(--text-soft); }
.switcher-chev { transition: transform .15s; font-size: 10px; }
.branch-switcher.collapsed .switcher-chev { transform: rotate(-90deg); }
/* In the collapsed state keep only the active branch */
.branch-switcher.collapsed .branch-link:not(.is-active) { display: none; }
/* In the narrow (horizontally collapsed) panel hide the title */
.app-shell.is-collapsed .switcher-head { display: none; }

/* Column width handle inside the invoice */
.inv-detail-table th { position: relative; overflow: hidden; }
.dcol-resizer {
    position: absolute; top: 0; right: 0;
    width: 7px; height: 100%;
    cursor: col-resize; user-select: none; z-index: 5;
    background: transparent; transition: background .12s;
}
.dcol-resizer:hover { background: var(--primary); }
.inv-detail-table td { overflow: hidden; text-overflow: ellipsis; }

/* Dragging items inside the invoice */
.inv-pos { cursor: default; }
.inv-pos .pos-grip { cursor: grab; color: var(--text-mute); margin-right: 4px; user-select: none; }
.inv-pos.dragging { opacity: .5; }
.inv-pos.drag-over td { box-shadow: inset 0 2px 0 var(--primary); }

/* Invoice line input fields — full cell width */
#invoiceTable .cart-input { width: 100%; box-sizing: border-box; }
#invoiceTable td { vertical-align: middle; }

/* Invoice header — a compact row */
.invoice-head {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
    padding: 6px 14px 4px;
}
.invoice-head .field { flex: 1; min-width: 150px; margin: 0; }
.invoice-head .field-label { font-size: 10px; }
.invoice-head input { padding: 7px 10px; font-size: 13px; }

/* Hiding the VAT columns in «Без ПДВ» (No VAT) mode */
#invoiceTable.no-vat .vatcol { display: none; }

/* Brand on the login/first-run page — dark text on a light background */
.auth-brand .brand-title { color: var(--text); }
.auth-brand .brand-sub { color: var(--text-mute); }

/* Editing an operation: for a write-off hide the block/recipient columns */
#editSaleTable.hide-dest .es-dest { display: none; }

/* Padding for modal bodies whose content isn't wrapped in .form */
.modal-card .modal-pad { padding: 14px 20px 20px; }

/* Branches unavailable under the license — grey (desaturated), with a lock mark */
.branch-card.is-locked { filter: grayscale(100%); opacity: .7; }
.branch-card.is-locked .branch-card-icon,
.branch-card.is-locked .branch-card-title,
.branch-card.is-locked .branch-card-desc { color: var(--text-mute); }
.branch-card.is-locked:hover { opacity: .85; }
.branch-link.is-locked { filter: grayscale(100%); opacity: .7; }
.branch-link.is-locked .branch-icon,
.branch-link.is-locked .branch-label { color: var(--text-mute); }
.branch-link.is-locked:hover { opacity: .9; }

/* ============ Theme toggle ============ */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-soft);
    width: 36px; height: 36px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--primary);
    transform: translateY(-1px);
}
.theme-toggle:active { transform: translateY(0); }

/* ============ Premium micro-animations ============ */
.btn { transition: transform .12s ease, box-shadow .18s ease,
                   background-color .18s ease, border-color .18s ease, color .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { box-shadow: 0 2px 8px -2px var(--primary); }
.btn-primary:hover { box-shadow: 0 6px 16px -4px var(--primary); }

.panel, .card, .stat-card {
    transition: transform .18s ease, box-shadow .22s ease,
                background-color .25s ease, border-color .2s ease;
}
.stat-card:hover, .card.is-hoverable:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Neat focus rings */
.btn:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .theme-toggle:focus-visible, a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Soft content appearance */
@keyframes farmFadeUp { from { opacity: 0; transform: translateY(6px); }
                        to   { opacity: 1; transform: translateY(0); } }
/* ⚠️ `backwards`, not `both`: after appearing, NO transform is left on the panel —
   otherwise it becomes a "frame" for position:fixed, and dropdown menus («⚙ Колонки» (Columns))
   opened shifted sideways, past the window edge (2026-10-05) */
.content > .panel, .content > .stat-grid, .content > .card,
.content > .branch-grid { animation: farmFadeUp .35s ease backwards; }
@media (prefers-reduced-motion: reduce) {
    .content > * { animation: none !important; }
}

/* =================================================================
   MOBILE VIEW (phone ≤ 720px): compact, the menu is a drawer
   ================================================================= */
.nav-backdrop { display: none; }
@media (max-width: 720px) {
    .app-shell { grid-template-columns: 1fr; }

    /* side menu — a slide-out drawer on the left */
    .sidebar {
        position: fixed; top: 0; left: 0; height: 100vh; width: 264px;
        z-index: 200; transform: translateX(-100%);
        transition: transform .25s ease; box-shadow: 0 0 40px rgba(0,0,0,.45);
    }
    body.nav-open .sidebar { transform: translateX(0); }
    .nav-backdrop {
        display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45);
        z-index: 150; opacity: 0; pointer-events: none; transition: opacity .25s ease;
    }
    body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

    /* compact and "sticky" topbar */
    .topbar { padding: 8px 12px; position: sticky; top: 0; z-index: 100; }
    .topbar-title { font-size: 17px; }
    .topbar-sub { display: none; }
    .topbar-right { gap: 8px; }
    .now-clock { display: none; }
    /* ⚠️ We NO LONGER HIDE «Встановити» (Install) on the phone: previously the button ate
       the bar, now it's in the menu — and it's precisely from a phone that the app gets installed */
    .ubox-pop { width: min(300px, calc(100vw - 24px)); }
    .sidebar-toggle { font-size: 22px; }

    /* denser content */
    .content { padding: 10px 10px 18px; }
    .panel { margin-bottom: 12px; border-radius: 12px; }
    .panel-head { padding: 11px 13px; }
    .panel-head h2 { font-size: 15px; }

    /* grids — single column */
    .stat-grid, .two-col { grid-template-columns: 1fr; }

    /* wide tables — horizontal scrolling */
    .content table.table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* finger-friendlier fields and buttons */
    input, select, textarea { font-size: 16px; }   /* 16px — so iOS doesn't zoom */
    .btn { padding: 9px 14px; }
}

/* ===================== Camera scanner overlay ===================== */
.camscan-overlay { position: fixed; inset: 0; z-index: 500; background: #000;
    display: flex; flex-direction: column; }
.camscan-top { display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; color: #fff; }
.camscan-title { font-size: 14px; opacity: .9; }
.camscan-close { background: rgba(255,255,255,.16); color: #fff; border: 0;
    padding: 9px 16px; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; }
.camscan-stage { position: relative; flex: 1; overflow: hidden; }
.camscan-video { width: 100%; height: 100%; object-fit: cover; }
.camscan-frame { position: absolute; inset: 16% 12%; border: 3px solid rgba(255,255,255,.92);
    border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); pointer-events: none; }
.camscan-laser { position: absolute; left: 6%; right: 6%; height: 2px; background: #4f9bf2;
    box-shadow: 0 0 10px 2px #4f9bf2; animation: camscanLaser 2s ease-in-out infinite; }
@keyframes camscanLaser { 0%,100% { top: 6%; } 50% { top: 92%; } }
.camscan-status { color: #cfe0f5; font-size: 13px; text-align: center; padding: 12px; min-height: 18px; }
.camscan-frame.flash { border-color: #2bbd7e; box-shadow: 0 0 0 100vmax rgba(0,0,0,.25), 0 0 24px 6px #2bbd7e; }

/* ===== Receipt form on the phone ===== */
@media (max-width: 720px) {
    .invoice-head { padding: 8px 10px; gap: 8px; }
    .invoice-head .field { flex: 1 1 calc(50% - 8px); min-width: 0; }
    .invoice-head .field[style] { flex: 1 1 100% !important; }  /* wide fields — full width */
    .invoice-head input { font-size: 16px; }                    /* no zoom on iOS */
    .head-actions { width: 100%; }
    .head-actions .btn { flex: 1; }
    .invoice-foot { flex-wrap: wrap; gap: 8px; }
    .invoice-foot .btn { flex: 1 1 auto; }
    #invoiceTable input { font-size: 15px; }
}

/* ===== More compact tables: Stock, Expiry, Recent receipts/operations ===== */
#productsTable, #expiryTable, #recentInTable, #recentSalesTable { font-size: 12px; }
#productsTable th, #productsTable td,
#expiryTable th, #expiryTable td,
#recentInTable th, #recentInTable td,
#recentSalesTable th, #recentSalesTable td {
    padding-top: 3px;
    padding-bottom: 3px;
    line-height: 1.25;
}
#productsTable thead th, #expiryTable thead th,
#recentInTable thead th, #recentSalesTable thead th { font-size: 10px; }

/* ===== Smaller vertical padding: Issue and Receipt tables ===== */
#cartTable th, #cartTable td,
#invoiceTable th, #invoiceTable td {
    padding-top: 3px;
    padding-bottom: 3px;
}
#cartTable td input, #invoiceTable td input { padding-top: 4px; padding-bottom: 4px; }

/* ===== Issue: different tones for the «Додати позицію» (Add item) and «До видачі» (To issue) panels ===== */
.panel-add  { background: #eef4fd; }   /* bluish — item entry */
.panel-cart { background: #edf8f1; }   /* greenish — the to-issue list */
.panel-add  .panel-head { background: #e3edfb; }
.panel-cart .panel-head { background: #e0f3e8; }
html[data-theme="dark"] .panel-add  { background: #15233a; }
html[data-theme="dark"] .panel-cart { background: #15291e; }
html[data-theme="dark"] .panel-add  .panel-head { background: #1a2c46; }
html[data-theme="dark"] .panel-cart .panel-head { background: #1a3326; }

/* ===== Settings: compact branch list ===== */
.branch-toggle-list { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 12px; }
.branch-toggle-list .check-toggle {
    display: flex; align-items: center; gap: 9px;
    font-size: 13px; color: var(--text);
    padding: 5px 8px; border-radius: 8px; margin: 0; cursor: pointer;
}
.branch-toggle-list .check-toggle:hover { background: var(--surface-2); }
.branch-toggle-list .check-toggle input[type="checkbox"] {
    width: 15px; height: 15px; margin: 0; flex: 0 0 auto;
    accent-color: var(--primary); cursor: pointer;
}
.branch-toggle-list .check-toggle span { line-height: 1.2; }

/* ===== Settings page: clean "airy" look + expandable blocks ===== */
.settings-airy { max-width: 600px; }

/* Card — thin light border, rounded corners; the title inside, clickable */
.settings-airy .panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
    margin: 0 0 10px;
    max-width: none;
}
.settings-airy .panel-head {
    background: transparent; border: none;
    padding: 10px 14px; gap: 8px; flex-wrap: nowrap;
    cursor: pointer; user-select: none;
}
.settings-airy .panel-head h2 {
    font-size: 13px; font-weight: 500; color: var(--text-soft); letter-spacing: .01em;
    flex: 1;
}
.settings-airy .sec-ico {
    width: 16px; height: 16px; flex: 0 0 auto;
    color: #9fc3ef; stroke-width: 1.7;
}
.settings-airy .sec-chev {
    width: 16px; height: 16px; flex: 0 0 auto;
    color: var(--text-mute); transition: transform .18s ease;
}
.settings-airy .panel.is-collapsed .sec-chev { transform: rotate(-90deg); }

/* Card body */
.settings-airy .form.stacked {
    background: transparent; border: none; box-shadow: none;
    border-radius: 0;
    padding: 0 14px 12px !important;
    gap: 8px;
}
.settings-airy .panel.is-collapsed .form.stacked { display: none; }
.settings-airy .form.stacked > .text-mute:first-child { margin-top: 0; }

/* Toggle rows — dense, with a soft hover, light checkmark */
.settings-airy .check-toggle {
    padding: 2px 8px; border-radius: 7px; margin: 0;
    gap: 10px; font-size: 13px; color: var(--text); cursor: pointer;
    transition: background .12s ease;
}
.settings-airy .check-toggle:hover { background: var(--surface-2); }
.settings-airy .check-toggle input[type="checkbox"] {
    width: 15px; height: 15px; margin: 0; flex: 0 0 auto; accent-color: #7fb5f0;
}
.settings-airy .branch-toggle-list { gap: 0; margin: 0; }
.settings-airy .branch-toggle-list .check-toggle { padding: 2px 8px; accent-color: #7fb5f0; }
.settings-airy .branch-toggle-list .check-toggle input[type="checkbox"] { accent-color: #7fb5f0; }

/* Grouped sections inside a card — a divider on top instead of a box border */
.settings-airy .form-section {
    border: none; background: transparent;
    border-top: 1px solid var(--border);
    border-radius: 0; padding: 12px 0 0; margin-top: 4px;
}
.settings-airy .form-section-title {
    color: var(--text-mute); font-weight: 600; margin-bottom: 6px;
}

/* Input fields */
.settings-airy .field-label { color: var(--text-soft); }
.settings-airy .form-section-grid { gap: 12px; }

/* Action buttons — light blue scheme */
.settings-airy .actions {
    display: flex; align-items: center; gap: 10px;
    margin-top: 4px; padding-top: 10px;
    border-top: 1px solid var(--border);
}
.settings-airy .btn { font-size: 13px; padding: 6px 16px; }
.settings-airy .btn-primary {
    background: #eaf3fe; color: #2569c6; border: 1px solid #cfe3fb; box-shadow: none;
}
.settings-airy .btn-primary:hover { background: #dceafb; box-shadow: none; }
.settings-airy .btn-ghost {
    background: var(--surface); color: var(--text-soft); border: 1px solid var(--border);
}
html[data-theme="dark"] .settings-airy .btn-primary {
    background: #15294a; color: #7fb6ff; border-color: #28324a;
}
html[data-theme="dark"] .settings-airy .btn-primary:hover { background: #1a325c; }
html[data-theme="dark"] .settings-airy .sec-ico { color: #4f7bb5; }

@media (max-width: 720px) {
    .settings-airy .form.stacked { padding: 0 12px 12px !important; }
}

/* ===== Compound feed production ===== */

/* Production document header — one row, like in the invoice:
   compound feed, date, output and totals. The composition collapses with a button on the left. */
.doc-head {
    display: flex;
    align-items: flex-end;
    /* One row without wrapping: the note always stays on the right and doesn't
       drop down. On narrow screens the row scrolls horizontally
       instead of breaking. */
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px 16px;
    padding: 14px 20px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.doc-f { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.doc-cap {
    font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-soft); font-weight: 600; white-space: nowrap;
}
.doc-head input, .doc-head select {
    padding: 5px 9px; font-size: 13px;
}
/* Width limits for each header field: the user can drag the slider,
   but the field won't shrink to unreadable nor stretch to half the screen.
   min-/max-width are stronger than an inline width, so the limits apply both after
   dragging and when the row is shrunk automatically. */
.doc-f-kk    { min-width: 130px; max-width: 240px; }
.doc-f-date  { min-width: 128px; max-width: 170px; }
.doc-f-qty   { min-width: 100px; max-width: 160px; }
.doc-f-price { min-width: 88px;  max-width: 150px; }
.doc-f-sum   { min-width: 130px; max-width: 210px; }

.doc-f-kk select { font-weight: 700; }
.doc-head input[type="date"] { width: 100%; }
.doc-f-qty input { width: 100%; text-align: right; }
/* Note — the last one, pressed to the right edge. Takes the free space,
   but not without limit: from 140 to 380 px. */
.doc-f-note {
    flex: 1 1 180px;
    min-width: 140px;
    max-width: 380px;
    margin-left: auto;
}
.doc-f-note input { width: 100%; min-width: 0; }

/* Computed totals are not input fields, so align them to the bottom edge */
.doc-val b {
    font-size: 15px; font-variant-numeric: tabular-nums;
    padding: 5px 0; white-space: nowrap;
}
.doc-val-main b { font-size: 17px; color: var(--primary-strong); }

/* Composition collapse button */
.doc-toggle {
    align-self: center;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-soft); cursor: pointer;
    width: 26px; height: 26px; border-radius: var(--radius-sm);
    font-size: 11px; line-height: 1;
    transition: transform .15s ease;
}
.doc-toggle:hover { color: var(--text); }
.doc-toggle.is-collapsed { transform: rotate(-90deg); }

@media (max-width: 720px) {
    .doc-head { padding: 12px 14px; gap: 10px 12px; }
}

/* Document number on the right of the panel header */
.prod-doc {
    font-size: 12px;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
}

.prod-hint {
    margin: 0;
    padding: 0 20px 14px;
    font-size: 12px;
    color: var(--text-soft);
    line-height: 1.5;
}

/* Components table — the same rhythm as in the expanded recipe composition
   («Склад на заміс» (Composition per mix)): smaller font and dense rows so the whole mix
   is visible without scrolling. */
.prod-table { font-size: 12px; }
/* The cells contain an input field (22px vs 17px for plain text), so the
   vertical padding is smaller — so that the resulting row height matches
   the reference table «Склад на заміс» (Composition per mix). */
.prod-table th { padding: 6px 8px; }
.prod-table td { padding: 4px 8px; }
.prod-table .prod-c-act { width: 40px; }
.prod-table td .c-qty {
    width: 92px;
    text-align: right;
    padding: 2px 7px;
    font-size: 12px;
}
.prod-table .btn-icon { padding: 2px 6px; }
/* Red — when more is needed than there is in stock */
.prod-table .is-short { color: var(--danger); font-weight: 600; }
.prod-table tfoot td { font-weight: 600; background: var(--surface-2); }
.prod-table tfoot .prod-total td {
    font-size: 14px;
    color: var(--primary-strong);
    border-bottom: none;
}

.prod-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}
.prod-spacer { flex: 1 1 auto; }

@media (max-width: 720px) {
    .prod-form { padding: 16px 14px 12px; gap: 12px; }
    .prod-hint { padding: 0 14px 12px; }
    .prod-actions { padding: 12px 14px; flex-wrap: wrap; }
    .prod-form .field,
    .prod-f-note { flex: 1 1 100%; }
    .prod-form input[type="date"],
    .prod-form input[type="number"],
    .prod-f-kk select { width: 100%; }
}

/* Recipe reference list: header row + structure expansion */
.rec-c-tog { width: 42px; }
.rec-row { cursor: default; }
.rec-row td { padding-top: 8px; padding-bottom: 8px; }

/* Compound feed recipe editor.
   The window is a fixed-height column: the header and buttons don't move, while the
   component list takes the rest of the space and scrolls. Equally convenient with
   four components and with twenty. */
.rec-modal {
    width: min(560px, 94vw);
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    overflow: hidden;                 /* only the list scrolls */
}
.rec-modal > h2 { padding: 18px 20px 0; flex: none; }
.rec-body {
    display: flex;
    flex-direction: column;
    min-height: 0;                    /* without this flex won't let the list shrink */
    padding: 14px 20px 18px;
    gap: 12px;
}

.rec-head { display: flex; flex-wrap: wrap; gap: 12px; }
.rec-f-name { flex: 1 1 190px; }
.rec-f-sample { flex: 1 1 160px; }
.rec-f-note { flex: 1 1 100%; }
.rec-head input, .rec-head select { width: 100%; }
/* [hidden] on its own doesn't work on .field — display:flex overrides it */
.rec-head .field[hidden] { display: none; }

.rec-modal .prod-hint { padding: 0; font-size: 12px; }

.rec-edit-wrap {
    flex: 1 1 auto;
    min-height: 120px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.rec-edit-table { font-size: 13px; }
.rec-edit-table th, .rec-edit-table td { padding: 3px 12px; }
.rec-edit-table thead th { position: sticky; top: 0; z-index: 1; }
.rec-edit-table .r-qty {
    width: 88px; text-align: right;
    padding: 3px 8px; font-size: 13px;
}
.rec-edit-table .r-share { color: var(--text-soft); }
/* drag handle of a recipe component */
.rec-edit-table .rec-c-grip { width: 22px; padding-left: 8px; padding-right: 0; }
.rec-edit-table .r-grip { cursor: grab; color: var(--text-mute); font-size: 15px; line-height: 1;
    user-select: none; padding: 2px 3px; border-radius: 4px; }
.rec-edit-table .r-grip:hover { color: var(--text); background: var(--surface-2); }
.rec-edit-table tr.dragging { opacity: .45; }
.rec-edit-table tr.dragging td { background: var(--primary-soft, #eef4fd); }
.rec-edit-table .rec-c-del { width: 36px; text-align: center; }
.rec-edit-table tfoot td {
    font-weight: 600; background: var(--surface-2);
    position: sticky; bottom: 0;
    border-top: 1px solid var(--border);
}

.rec-modal-actions {
    flex: none;
    display: flex; align-items: center; gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
@media (max-width: 620px) {
    .rec-body { padding: 12px 14px 16px; }
    .rec-head .field { flex: 1 1 100%; }
    .rec-modal-actions { flex-wrap: wrap; }
}

/* Compound feed production accuracy */
.acc-ok   { color: var(--success); font-weight: 600; }
.acc-warn { color: var(--warn); font-weight: 600; }
.acc-bad  { color: var(--danger); font-weight: 600; }

/* Actions on a production batch — keep the buttons in one row */
.prod-row-act { white-space: nowrap; }
.prod-row-act .btn-icon { padding: 4px 6px; }
.prod-row-act .p-del:hover { color: var(--danger); }



/* New mix panel — a green tint, so the working document immediately
   stands out from the reference panels below. The green matches
   --success, only heavily whitened. */
.panel-prod { border-color: #bfe3d2; }
.panel-prod > .panel-head {
    background: #e8f5ef;
    border-bottom-color: #bfe3d2;
}
.panel-prod > .panel-head h2 { color: #14764c; }
.panel-prod .doc-head {
    background: #f2faf6;
    border-bottom-color: #d8ede3;
}
.panel-prod .doc-val-main b { color: #14764c; }
.panel-prod .prod-actions {
    background: #f2faf6;
    border-top-color: #d8ede3;
}
.panel-prod .prod-table tfoot td { background: #f2faf6; }

/* Column width handle — a bit more visible in these tables */
.prod-table th, #recipesTable th { user-select: none; }

/* Field width handle in the document header row. The fields have smaller
   padding than table cells, so the handle is made a bit narrower. */
.field-resizer { width: 6px; right: -8px; }
.doc-head { position: relative; }

/* KK production: tables sized to content, not the full window width; columns
   are dragged with the mouse. Same as on the Milk production pages. */
#prodTable, #recipesTable, #prodLogTbl { width: auto; }
.prod-tblwrap { overflow-x: auto; }
#prodLogTbl th { position: relative; user-select: none; white-space: nowrap; }

/* Profeed import modal */
.pf-modal { width: min(760px, 94vw); display: flex; flex-direction: column;
            max-height: 88vh; overflow: hidden; }
.pf-modal > h2 { padding: 18px 20px 0; flex: none; }
.pf-body { display: flex; flex-direction: column; min-height: 0;
           padding: 14px 20px 0; gap: 10px; }
.pf-dir-row { display: flex; gap: 8px; }
.pf-dir-row input { flex: 1 1 auto; }
.pf-modal .prod-hint { padding: 0; }
.pf-list-wrap { flex: 1 1 auto; min-height: 120px; overflow-y: auto;
                border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pf-table { width: 100%; font-size: 13px; }
.pf-table th, .pf-table td { padding: 5px 10px; }
.pf-table thead th { position: sticky; top: 0; z-index: 1; }
.pf-c-chk { width: 34px; text-align: center; }
.pf-modal .rec-modal-actions { padding: 12px 20px; }
.pf-status { font-size: 12px; color: var(--text-soft); }

/* Profeed import button — green, matching the production panel */
.btn-profeed { background: #14764c; border-color: #14764c; }
.btn-profeed:hover { background: #0f5c3b; border-color: #0f5c3b; }

/* «Останні операції» (Recent operations) (issue) and «Останні надходження» (Recent receipts) (receipt):
   smaller font and NO wrapping — each operation on one row.
   Over-long values are cut with an ellipsis, column widths can be dragged. */
#recentSalesTable, #recentInTable { font-size: 11.5px; }
#recentSalesTable th, #recentSalesTable td,
#recentInTable th, #recentInTable td {
    padding: 3px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* Profeed mixes in the «Останні виробництва» (Recent productions) log — grey "draft"
   rows: pulled in but not yet posted. They can be posted with a button. */
/* «Останні виробництва» (Recent productions) header — everything in one row: status, folder field, button.
   The field shrinks and truncates a long path instead of wrapping. */
.pf-head { flex-wrap: nowrap; min-width: 0; }
.pf-head .pf-dir-inp {
    flex: 1 1 auto; min-width: 120px; max-width: 340px;
    text-overflow: ellipsis;
}
.pf-head .pf-status { flex: 0 0 auto; white-space: nowrap; }
.pf-head .btn { flex: 0 0 auto; white-space: nowrap; }
/* «Останні виробництва» (Recent productions) filter panel — like in receipts */
.rcp-filterbar { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 12px;
    border-bottom: 1px solid var(--border); }
.rcp-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.rcp-presets .btn.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.rcp-fields { display: flex; gap: 12px; row-gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.rcp-f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-soft); }
.rcp-f > span { padding-left: 2px; }
.rcp-f input { font-size: 13px; height: 34px; }
.rcp-f input[type="date"] { min-width: 140px; }
.rcp-f-grow { flex: 1; min-width: 220px; }
.rcp-f-grow input { width: 100%; }

/* Profeed reports link modal */
.pf-dir-modal { max-width: 540px; }
/* .modal-card has padding only in h2 — we align the rest ourselves */
.pf-dir-modal > p,
.pf-dir-modal > .pf-dir-field,
.pf-dir-modal > .pf-pick-btn,
.pf-dir-modal > .modal-actions { margin-left: 20px; margin-right: 20px; }
.pf-dir-modal > p { margin-top: 6px; }
.pf-dir-field { display: flex; flex-direction: column; gap: 5px; margin-top: 14px; margin-bottom: 8px; }
.pf-dir-inp-full { width: 100%; box-sizing: border-box; font-size: 13px;
    padding: 9px 11px; border-radius: 8px; border: 1px solid var(--border); }
.pf-dir-inp-full:focus { outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft); }
.pf-pick-btn { align-self: flex-start; }
.pf-dir-modal > .modal-actions { margin-top: 18px; margin-bottom: 20px;
    display: flex; gap: 8px; justify-content: flex-end; }
/* grey background and row text — until posted */
.pf-row td { color: var(--text-soft); background: #fafbfc; }
.pf-row strong { color: var(--text); }
.pf-badge { display: inline-block; font-size: 11px; color: var(--text-soft);
    background: #eef0f3; border: 1px solid #d9dde3; border-radius: 4px; padding: 1px 6px; }
.pf-detail > td { background: #fafbfc; }
.pf-c-act { width: 110px; text-align: right; }
.pf-edit-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
                color: var(--primary-strong); font-weight: 700; margin-bottom: 6px; }
.pf-edit-tbl .pf-comp { width: 100px; text-align: right; padding: 3px 7px; font-size: 12px; }
.pf-edit-tbl tfoot td { font-weight: 600; }
/* The actual value in a posted mix is a real field, and it must LOOK like a field.
   The first version was transparent (so the table stayed a report) — Roman
   simply didn't see it: "I don't see the field for editing the actual value". */
.batch-table .prod-fact {
    width: 88px; text-align: right; padding: 3px 8px; font-size: 12px;
    border: 1px solid #cfe0f5; border-radius: 6px; background: #e8f1fc;
    font-variant-numeric: tabular-nums; color: inherit; font-family: inherit;
}
.batch-table .prod-fact:hover { border-color: var(--primary); }
.batch-table .prod-fact:focus {
    border-color: var(--primary); background: var(--surface, #fff);
    outline: none; box-shadow: 0 0 0 2px rgba(29, 78, 216, .10);
}
.batch-table .prod-fact:disabled { opacity: .5; }
.batch-box-title .bb-hint { text-transform: none; letter-spacing: 0;
    font-weight: 500; color: var(--text-mute); }
html[data-theme="dark"] .batch-table .prod-fact {
    background: #16223c; border-color: #2b3b5c;
}

/* Dragging a wide table with the mouse ("hand") */
.table-scroll.can-pan, .prod-tblwrap.can-pan { cursor: grab; }
.table-scroll.is-grabbing, .prod-tblwrap.is-grabbing { cursor: grabbing; user-select: none; }

/* Hide the horizontal scrollbars (like on macOS) — scroll by mouse
   dragging or Shift+wheel. The top scrollbar isn't shown. */
.top-scrollbar { display: none !important; }
.table-scroll::-webkit-scrollbar,
.prod-tblwrap::-webkit-scrollbar { width: 0; height: 0; }
.table-scroll, .prod-tblwrap { scrollbar-width: none; -ms-overflow-style: none; }


/* Update prompt (admin, any page) */
.upd-ask { position:fixed; right:18px; bottom:18px; z-index:9000; max-width:min(380px,92vw); }
.upd-ask-card { background:var(--surface); border:1px solid var(--border);
    border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.18); padding:14px 16px; }
.upd-ask-h { font-weight:600; margin-bottom:4px; }
.upd-ask-n { font-size:12.5px; color:var(--text-soft); margin-bottom:8px;
    max-height:120px; overflow:auto; }
.upd-ask-s { font-size:12.5px; color:var(--text-soft); min-height:16px; margin-bottom:8px; }
.upd-ask-b { display:flex; gap:8px; justify-content:flex-end; }

/* «Кілька чисел» (Several numbers): a disallowed digit (5 with limits 1–4) or a repeat — the field flashes */
input.multi-bad { animation: multiBad .45s ease; }
@keyframes multiBad {
    0%, 100% { box-shadow: none; }
    30% { box-shadow: 0 0 0 3px rgba(229, 72, 77, .45); border-color: #e5484d; }
}
@media (prefers-reduced-motion: reduce) {
    input.multi-bad { animation: none; outline: 2px solid #e5484d; }
}

/* Instant tooltip instead of the browser one from `title` (see the end of app.js) */
/* Glass, like the settings windows (Roman 2026-09-30: "make the style of popup tooltips and close
   buttons transparent"): a semi-transparent background blurring what's behind — the text is readable, the page is visible. */
.qtip { position: fixed; z-index: 10000; max-width: 360px; padding: 5px 9px;
    background: color-mix(in srgb, var(--surface) 38%, transparent); color: var(--text);
    border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); border-radius: 8px;
    -webkit-backdrop-filter: blur(6px) saturate(1.5); backdrop-filter: blur(6px) saturate(1.5);
    font-size: 12px; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14); pointer-events: none; }
.qtip[hidden] { display: none !important; }
html[data-theme="dark"] .qtip { background: color-mix(in srgb, var(--surface-2) 45%, transparent);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .4); }

/* ===== LOADING PROGRESS BAR (Roman 2026-09-29: "we need a loading progress bar") =====
   .loadbar — the real percentage (width of <i> = the fraction); .loadbar.is-ind — while there is no percentage yet
   (a segment runs). Colours come from the branch theme (--primary), so the herd and the dark theme each get their own. */
.loadbar { padding: 18px 16px 16px; max-width: 560px; }
.loadbar-track { height: 8px; border-radius: 999px; overflow: hidden;
    background: color-mix(in srgb, var(--primary, #2f5fb0) 14%, transparent); }
.loadbar-track > i { display: block; height: 100%; border-radius: inherit; min-width: 6%;
    background: var(--primary, #2f5fb0); transition: width .45s ease; }
.loadbar.is-ind .loadbar-track > i { width: 35% !important; animation: loadbarRun 1.3s ease-in-out infinite; }
@keyframes loadbarRun { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
.loadbar-cap { display: flex; align-items: baseline; gap: 10px; margin-top: 8px;
    font-size: 13px; color: var(--text-soft, #5b7083); }
.loadbar-cap > span { flex: 1 1 auto; min-width: 0; }
.loadbar-cap > b { font-variant-numeric: tabular-nums; color: var(--text, inherit); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
    .loadbar.is-ind .loadbar-track > i { animation: none; transform: none; }
    .loadbar-track > i { transition: none; }
}

/* right-click context menu (herd, calendar) — glass, like the other popups (2.40.158) */
.wl-ctx { position:fixed; z-index:120; display:flex; flex-direction:column; min-width:170px; padding:4px;
    border:1px solid var(--border); border-radius:10px;
    background:color-mix(in srgb, var(--surface) 38%, transparent);
    backdrop-filter:blur(6px) saturate(1.5); -webkit-backdrop-filter:blur(6px) saturate(1.5);
    box-shadow:0 8px 24px rgba(0,0,0,.14); }
.wl-ctx button { padding:6px 10px; border:0; border-radius:6px; background:none; font:inherit; font-size:12.5px;
    color:var(--text); text-align:left; cursor:pointer; }
.wl-ctx button:hover, .wl-ctx button:focus-visible { background:color-mix(in srgb, var(--primary) 12%, transparent); outline:none; }
.wl-ctx .wl-ctx-sep { display:block; height:1px; margin:3px 6px; background:var(--border); }
.wl-ctx button.is-del { color:#c2333a; }
.wl-ctx button.is-del:hover { background:color-mix(in srgb, #e5484d 12%, transparent); }
.wl-ctx-in { padding:6px; min-width:260px; }
.wl-ctx-in input { width:100%; height:28px; box-sizing:border-box; padding:0 8px; font:inherit; font-size:13px; color:var(--text);
    background:var(--surface); border:1px solid var(--primary); border-radius:6px; }
.wl-ctx-in input:focus { outline:none; }
html[data-theme="dark"] .wl-ctx { background:color-mix(in srgb, var(--surface-2) 45%, transparent); }


/* ============ Pharmacy / Materials: icons without labels and the Stock panel (2026-10-05) ============ */
.btn.btn-ico { display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; flex: 0 0 auto; }
.btn.btn-ico svg { display: block; }
.col-picker .btn.btn-ico.col-picker-btn { width: 34px; }

.products-compact .pr-head { display: flex; align-items: center; justify-content: flex-start;
    gap: 12px; flex-wrap: wrap; padding: 10px 16px; }
.products-compact .pr-head h2 { margin: 0; white-space: nowrap; }
.pr-count { font-weight: 500; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.pr-tools { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.products-compact .pr-search { flex: 1 1 200px; min-width: 160px; max-width: 340px; height: 34px; }
.pr-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pr-filters select {
    width: auto; flex: 0 0 auto; height: 34px; padding: 0 28px 0 10px; font-size: 13px; max-width: 200px;
    border-radius: 8px; text-overflow: ellipsis; color: var(--text-soft);
}
.pr-filters select.is-on {
    color: var(--primary-strong); font-weight: 600;
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
    background-color: var(--primary-soft);
}
.pr-icons { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.pr-reset { color: var(--text-soft); }
.pr-reset[hidden] { display: none; }
#prColsSlot:empty { display: none; }
#prColsSlot { display: contents; }

/* product name — on one line, the batches arrow beside it rather than above the name */
.products-compact #productsTable > tbody > tr:not(.batch-detail) > td:first-child {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.products-compact #productsTable > thead th:first-child { min-width: 230px; }

/* dark theme: the filter strip is no longer white */
html[data-theme="dark"] .filters-bar { background: var(--surface-2); }

/* Stock on the phone: the title with icons — first row, search full width, filters two per row */
@media (max-width: 720px) {
    .products-compact .pr-head { gap: 10px; }
    .products-compact .pr-tools { order: 3; flex: 1 1 100%; }
    .products-compact .pr-search { flex: 1 1 100%; max-width: none; }
    .pr-filters { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .pr-filters select { max-width: none; width: 100%; }
    .pr-reset { grid-column: 1 / -1; width: 100% !important; }
}
/* headers with icons: on the phone the icons stay to the right of the title, not on a separate row */
@media (max-width: 720px) {
    .products-compact .pr-icons, .sch-panel .panel-head .head-actions,
    .dsh-panel .panel-head .head-actions { width: auto; margin-left: auto; flex-wrap: nowrap; }
}
/* Excel icon — one look everywhere */
/* smaller and without a frame (Roman 2026-10-13: "make the Excel icons a bit smaller and without a frame") */
html .btn.btn-xlsx, html .cl-xlsx { width: 26px; height: 26px; min-width: 0; border-color: transparent; background: transparent; box-shadow: none; }
html .btn.btn-xlsx svg, html .cl-xlsx svg { width: 15px; height: 15px; }
html .btn.btn-xlsx:hover, html .cl-xlsx:hover { border-color: transparent; background: color-mix(in srgb, #1d7a45 10%, transparent); }
.btn.btn-xlsx:disabled { opacity: .5; }
/* the icon isn't shrunk by the inner padding of other button rules (.rep-actions .btn etc.) */
html .btn.btn-ico { padding: 0; }
.btn.btn-ico svg { flex: 0 0 auto; }
.xlsx-bar { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.panel-head .btn-xlsx { flex: 0 0 auto; }
@media print { .btn-xlsx, .xlsx-bar, .cl-xlsx { display: none !important; } }

/* ===== GLASS FOR ALL POPUP LISTS AND TOOLTIPS (Roman 2026-10-08: "popup lists and tooltips
   must be glass with a transparent effect"). The same glass as in .qtip and .wl-ctx: a semi-transparent
   background with blur and a thin border. One rule for all pages; !important — because some of these windows
   are defined in the pages' <style>, which come after app.css. A new popup list — add it here. ===== */
.ubox-pop, .col-picker-menu, .autocomplete-list, .eb-ctx, .ev-hint::after, .eb-ac, .eb-colbox,
.hsearch-list, .hroll, .hf-pop, .fx-tip, .fxe-sug, .vyd .aclist, .vyd .mp-pop, .ts-cols-menu, .mv-addmenu,
.mv-tip, .fm-colmenu, .hsale .aclist.lg-sug, .ac-milk-tip, .ac-det-menu, .pp-fx-sug, .lg-sug, .hgs-list,
.aw-sug, .ov-pal, .ov-tip, .hx-pop, .pry .ed-aclist, .hs-crtip, .pv-tip, .ch-tip, .objsw-pop {
    background: color-mix(in srgb, var(--surface, #fff) 38%, transparent) !important;
    -webkit-backdrop-filter: blur(6px) saturate(1.5) !important;
    backdrop-filter: blur(6px) saturate(1.5) !important;
    border-color: color-mix(in srgb, var(--border) 75%, transparent) !important;
}
html[data-theme="dark"] :is(.ubox-pop, .col-picker-menu, .autocomplete-list, .eb-ctx, .eb-ac, .eb-colbox,
.hsearch-list, .hroll, .hf-pop, .fx-tip, .fxe-sug, .vyd .aclist, .vyd .mp-pop, .ts-cols-menu, .mv-addmenu,
.mv-tip, .fm-colmenu, .hsale .aclist.lg-sug, .ac-milk-tip, .ac-det-menu, .pp-fx-sug, .lg-sug, .hgs-list,
.aw-sug, .ov-pal, .ov-tip, .hx-pop, .pry .ed-aclist, .hs-crtip, .pv-tip, .ch-tip, .objsw-pop),
html[data-theme="dark"] .ev-hint::after {
    background: color-mix(in srgb, var(--surface-2) 45%, transparent) !important;
}

/* ===== Object switcher in the top bar (2.40.545): the client's farms are separate objects ===== */
.objsw { position: relative; flex: 0 0 auto; }
.objsw-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text);
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; max-width: 240px; }
.objsw-btn:hover { border-color: var(--primary); }
.objsw-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.objsw-btn svg { flex: 0 0 auto; color: var(--text-mute); }
.objsw-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.objsw-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 200; min-width: 240px; padding: 6px;
    border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.14);
    display: flex; flex-direction: column; gap: 2px; }
.objsw-pop[hidden] { display: none; }
.objsw-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-mute); padding: 4px 8px 6px; }
.objsw-i { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: 8px;
    color: var(--text); text-decoration: none; }
.objsw-i b { font-size: 13.5px; font-weight: 600; }
.objsw-i i { font-style: normal; font-size: 11.5px; color: var(--text-mute); }
a.objsw-i:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.objsw-i.is-cur { box-shadow: inset 3px 0 0 var(--primary); }
@media (max-width: 640px) { .objsw-btn { max-width: 140px; } }