/* =========================================================
   Vendor Portal — Dark Glassmorphism Theme
   (design based on prom_new_products_analyzer)
   ========================================================= */

/* Inter font loaded via <link> in HTML for faster parallel loading */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

:root {
  color-scheme: dark;  /* нативні контроли — date/time-picker, checkbox, radio, <select> dropdown, скролбари — у темній схемі. Світлі теми (l1/l2/olivel) повертають light у design-lab.css. */
  --bg-primary:    #0a0f1d;  /* deeper navy — matches Claude Design reference */
  --bg-secondary:  #1e293b;
  --bg-tertiary:   #334155;
  --primary:       #10b981;
  --primary-dark:  #059669;
  --primary-light: #34d399;
  --accent:        #06b6d4;
  --secondary:     #06b6d4;
  --danger:        #ef4444;
  --warning:       #f59e0b;
  --info:          #3b82f6;
  --violet:        #8b5cf6;
  --success:       #10b981;

  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-tertiary:  #64748b;

  --glass:         rgba(255,255,255,0.08);
  --glass-hover:   rgba(255,255,255,0.12);
  --surface:       rgba(255,255,255,0.05);
  --border:        rgba(255,255,255,0.1);
  --border-light:  rgba(255,255,255,0.15);

  /* Chat bubbles (F8): вхідні (Bagspace) = нейтральна поверхня, вихідні (свої) = тінт --primary.
     Світлі/олива теми перекривають у design-lab.css. */
  --bubble-in:     rgba(255,255,255,0.05);
  --bubble-out:    rgba(16,185,129,0.16);

  --shadow-sm:   0 2px 4px rgba(0,0,0,0.1);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.15);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.2);
  --shadow-glow: 0 0 40px rgba(16,185,129,0.3);
  --transition:  0.3s cubic-bezier(0.4,0,0.2,1);

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
}

html { font-size: 14px; scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Ambient glow background — emerald + indigo radials, як у Claude Design ref.
   Дуже тонкі, щоб не конкурували зі вмістом сторінки. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(52,211,153,0.06) 0%, transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(99,102,241,0.04) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* ── Scrollbar (р.48: мінімалістичні + зникають після скролу) ─────────────
   Іван 2026-07-26: «скроллбарів купа, зробити мінімальними і щоб пропадали
   через секунду». Доріжка прозора (смуги більше не малюються постійно),
   повзунок ниткою 5px. Firefox — scrollbar-width/color; WebKit — ::-webkit-*.
   JS (app.js, _initScrollFade) вішає .is-scrolling на елемент під час скролу
   і знімає через 900 мс → у спокої повзунок повністю прозорий. */
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; transition: background .25s ease; }
/* Показуємо лише під час скролу або наведення на сам контейнер */
.is-scrolling { scrollbar-color: rgba(148,163,184,.32) transparent; }
.is-scrolling::-webkit-scrollbar-thumb { background: rgba(148,163,184,.32); }
:hover > ::-webkit-scrollbar-thumb { background: rgba(148,163,184,.18); }
::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.55) !important; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer; border: none; transition: var(--transition);
  white-space: nowrap; text-decoration: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; box-shadow: 0 4px 12px rgba(16,185,129,0.3);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(16,185,129,0.4); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-secondary {
  background: var(--glass); border: 1px solid var(--border); color: var(--text-primary);
}
.btn-secondary:hover { background: var(--glass-hover); border-color: var(--border-light); }

.btn-ghost {
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--glass); color: var(--text-primary); }

.btn-danger {
  background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); color: #fca5a5;
}
.btn-danger:hover { background: rgba(239,68,68,0.25); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* ── Header ─────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 100;
  height: 60px;
  background: rgba(15,23,42,0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px;
}

.header-title {
  display: flex; align-items: center;
  flex-shrink: 0;
}

.header-stats {
  display: flex; gap: 8px; align-items: center; flex: 1;
}

.stat-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--radius-sm);
  background: var(--glass); border: 1px solid var(--border);
  font-size: 12px; font-weight: 500;
  transition: var(--transition); white-space: nowrap;
}
.stat-chip .chip-label { color: var(--text-secondary); }
.stat-chip .chip-val { color: var(--text-primary); font-weight: 700; }
.stat-chip.chip-vendor .chip-val { color: var(--primary-light); }

/* Header balance chip — баланс вендора, видний з будь-якої сторінки.
   Кешується (5 хв frontend / 2 хв backend), hover показує детальний breakdown. */
.header-balance-chip {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 11px; border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-left-width: 3px;        /* ← тоновий індикатор збоку */
    border-left-color: rgba(148,163,184,0.4);
    font-size: 12px; white-space: nowrap; cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    margin-right: 8px;
}
.header-balance-chip:hover {
    background: rgba(255,255,255,0.06);
    transform: translateY(-1px);
}
.header-balance-chip .hbc-icon {
    font-size: 12px; color: var(--text-tertiary);
}
.header-balance-chip .hbc-label {
    color: var(--text-tertiary); font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px;
}
.header-balance-chip .hbc-value {
    font-family: 'JetBrains Mono', monospace; font-weight: 700;
    font-variant-numeric: tabular-nums; letter-spacing: 0;
    font-size: 13.5px;
}

/* Tone variants */
.header-balance-chip.positive {
    border-left-color: #34d399;
    box-shadow: -3px 0 12px -3px rgba(52,211,153,0.25);  /* subtle glow */
}
.header-balance-chip.positive .hbc-value { color: #34d399; }
.header-balance-chip.positive .hbc-icon  { color: rgba(52,211,153,0.85); }

.header-balance-chip.negative {
    border-left-color: #fda4af;
    box-shadow: -3px 0 12px -3px rgba(244,63,94,0.2);
}
.header-balance-chip.negative .hbc-value { color: #fda4af; }
.header-balance-chip.negative .hbc-icon  { color: rgba(253,164,175,0.85); }

.header-balance-chip.zero .hbc-value     { color: var(--text-secondary); }

/* Tooltip — breakdown на hover */
.hbc-tooltip {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 260px;
    background: #0b1220;
    border: 1px solid rgba(148,163,184,0.2);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 24px 48px -8px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.4);
    opacity: 0; transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s;
    pointer-events: none;
    z-index: 1000;
    font-family: 'Inter', sans-serif;
}
.header-balance-chip:hover .hbc-tooltip {
    opacity: 1; transform: translateY(0);
    pointer-events: auto;
}
.hbc-tt-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; padding: 4px 0; font-size: 12px;
}
.hbc-tt-k { color: var(--text-tertiary); font-weight: 500; }
.hbc-tt-v {
    font-family: 'JetBrains Mono', monospace; font-weight: 500;
    color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.hbc-tt-sep {
    height: 1px; margin: 4px 0;
    background: rgba(255,255,255,0.06);
}
.hbc-tt-row.hbc-tt-total .hbc-tt-k { color: var(--text-secondary); font-weight: 600; }
.hbc-tt-row.hbc-tt-total .hbc-tt-v { font-weight: 700; font-size: 13.5px; }
.header-balance-chip.positive .hbc-tt-row.hbc-tt-total .hbc-tt-v { color: #34d399; }
.header-balance-chip.negative .hbc-tt-row.hbc-tt-total .hbc-tt-v { color: #fda4af; }
.hbc-tt-hint {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed rgba(255,255,255,0.06);
    font-size: 11px; color: var(--text-tertiary);
    text-align: center;
}
.stat-chip.chip-pending .chip-val { color: var(--warning); }
.stat-chip.chip-delivered .chip-val { color: var(--primary); }
.stat-chip.chip-info .chip-val { color: var(--accent); }

/* ── User menu in header ─────────────────────────────────── */
.user-menu {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); object-fit: cover;
}
.user-name {
  font-size: 13px; color: var(--text-secondary);
  white-space: nowrap; max-width: 180px;
  overflow: hidden; text-overflow: ellipsis;
}

/* ── Admin banner ────────────────────────────────────────── */
.admin-banner {
  background: rgba(16,185,129,0.06);
  border-bottom: 1px solid rgba(16,185,129,0.18);
  backdrop-filter: blur(8px);
  padding: 10px 24px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.admin-badge {
  padding: 3px 10px; border-radius: var(--radius-sm);
  background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3);
  font-size: 11px; font-weight: 700; color: var(--primary-light);
  text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}
.admin-status-text {
  font-size: 13px; color: var(--text-secondary);
  flex: 1;
}
.admin-status-text strong { color: var(--primary-light); }

/* ── Filter / search bar ─────────────────────────────────── */
.filter-bar {
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  padding: 10px 16px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  position: relative; z-index: 1;
  border-radius: var(--radius);
}

.filter-input {
  padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text-primary);
  font-size: 13px; font-family: inherit;
  transition: var(--transition); outline: none;
  min-width: 260px;
}
.filter-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}
.filter-input::placeholder { color: var(--text-tertiary); }

/* ── Filter badge ────────────────────────────────────────── */
.filter-badge {
  background: var(--primary); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 1px 5px; border-radius: 8px;
  margin-left: 4px; min-width: 16px;
  text-align: center; display: inline-block;
}

/* ── Filter chips ────────────────────────────────────────── */
.filter-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px; padding: 0 2px;
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--glass); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 3px 10px; font-size: 11px; color: var(--text-secondary);
  cursor: default; white-space: nowrap;
}
.filter-chip-remove {
  cursor: pointer; opacity: 0.6; font-size: 13px;
  line-height: 1; margin-left: 2px; color: var(--text-secondary);
}
.filter-chip-remove:hover { opacity: 1; color: var(--danger, #ef4444); }
.filter-chips-reset {
  font-size: 11px; color: var(--primary); cursor: pointer;
  align-self: center; padding: 3px 6px; white-space: nowrap;
}
.filter-chips-reset:hover { text-decoration: underline; }

/* ── Filter panel (slide-out right) ──────────────────────── */
.filter-panel-overlay {
  position: fixed; inset: 0; z-index: 199;
  background: rgba(0,0,0,0.4); backdrop-filter: blur(2px);
}
.filter-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 400px; max-width: 100vw; z-index: 200;
  background: var(--bg-primary);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -4px 0 24px rgba(0,0,0,0.3);
}
.filter-panel.open { transform: translateX(0); }
.filter-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.filter-panel-title {
  font-size: 16px; font-weight: 600; color: var(--text-primary);
}
.filter-panel-close {
  background: none; border: none; color: var(--text-secondary);
  font-size: 24px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.filter-panel-close:hover { color: var(--text-primary); }
.filter-panel-body {
  flex: 1; overflow-y: auto; padding: 12px 20px;
}
.filter-panel-footer {
  display: flex; gap: 8px; padding: 12px 20px;
  border-top: 1px solid var(--border); flex-shrink: 0;
  justify-content: flex-end;
}
.filter-panel-footer .btn { min-width: 100px; }

/* ── Filter group (accordion) ────────────────────────────── */
.filter-group { margin-bottom: 4px; }
.filter-group-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 8px; cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
  border-radius: 2px 0 0 2px;
  transition: background 0.2s, border-color 0.2s;
  min-height: 44px; box-sizing: border-box;
}
.filter-group-header:hover { color: var(--primary); }
.filter-group.open > .filter-group-header {
  border-left-color: var(--primary);
  background: rgba(16,185,129,0.04);
}
.filter-group.open > .filter-group-header .filter-group-title {
  color: var(--primary-light);
}
.filter-group-title {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  display: flex; align-items: center; gap: 6px; flex: 1;
  transition: color 0.2s;
}
.filter-group-chevron {
  font-size: 11px; color: var(--text-tertiary);
  transition: transform 0.2s;
}
.filter-group.open .filter-group-chevron { transform: rotate(90deg); color: var(--primary); }
.filter-group-count {
  font-size: 10px; color: var(--primary); font-weight: 700;
  background: rgba(16,185,129,0.15); border-radius: 8px;
  padding: 1px 6px; margin-left: 4px;
}
.filter-group-body {
  padding: 10px 0; display: none;
}
.filter-group.open .filter-group-body { display: block; }
.filter-group-reset {
  font-size: 12px; color: var(--text-tertiary); cursor: pointer;
  padding: 2px 4px; border-radius: 4px;
  flex-shrink: 0;
}
.filter-group-reset:hover { color: var(--primary); background: rgba(16,185,129,0.1); }

/* ── Filter controls ─────────────────────────────────────── */
.filter-label {
  font-size: 11px; color: var(--text-secondary);
  margin-bottom: 4px; display: block;
}
.filter-row { margin-bottom: 10px; }

/* Text input */
/* Filter input styles (switchable: underline / ghost / pill) */
.filter-text-input {
  width: 100%; padding: 7px 10px;
  color: var(--text-primary); font-size: 12px; font-family: inherit;
  outline: none; transition: var(--transition);
  box-sizing: border-box;
}
/* Style A: underline (default) — dashed to distinguish from accordion dividers */
.input-style-underline .filter-text-input,
.input-style-underline .filter-price-input {
  border: none; border-bottom: 1px dashed rgba(255,255,255,0.15);
  border-radius: 0; background: transparent; padding: 8px 2px;
}
.input-style-underline .filter-text-input:focus,
.input-style-underline .filter-price-input:focus {
  border-bottom-style: solid; border-bottom-color: var(--primary); box-shadow: none;
}
/* Style B: ghost (dashed border) */
.input-style-ghost .filter-text-input,
.input-style-ghost .filter-price-input {
  border: 1px dashed rgba(255,255,255,0.12); border-radius: var(--radius-sm);
  background: transparent; padding: 7px 10px;
}
.input-style-ghost .filter-text-input:focus,
.input-style-ghost .filter-price-input:focus {
  border-color: var(--primary); border-style: solid; box-shadow: none;
}
/* Style C: pill (subtle bg, project radius) */
.input-style-pill .filter-text-input,
.input-style-pill .filter-price-input {
  border: none; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.05); padding: 8px 12px;
}
.input-style-pill .filter-text-input:focus,
.input-style-pill .filter-price-input:focus {
  background: rgba(255,255,255,0.08); box-shadow: 0 0 0 1px rgba(16,185,129,0.25);
}
/* Fallback for unstyled */
.filter-text-input:focus { border-color: var(--primary); }

/* Grouped status filter */
.filter-status-grouped { display: flex; flex-direction: column; gap: 2px; }
.sf-group-header {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 6px; cursor: pointer;
    transition: background 0.15s;
}
.sf-group-header:hover { background: var(--glass-hover); }
.sf-group-header.sf-active { background: rgba(255,255,255,0.06); }
.sf-group-header.sf-partial { background: rgba(255,255,255,0.03); }
/* Custom checkbox */
.sf-check {
    width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0;
    border: 1.5px solid rgba(255,255,255,0.2); position: relative;
    transition: all 0.15s;
}
.sf-check.sf-checked {
    background: var(--primary); border-color: var(--primary);
}
.sf-check.sf-checked::after {
    content: ''; position: absolute; top: 1px; left: 4px;
    width: 4px; height: 7px; border: solid #fff; border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.sf-check.sf-indeterminate {
    border-color: var(--primary);
}
.sf-check.sf-indeterminate::after {
    content: ''; position: absolute; top: 5px; left: 2px; right: 2px;
    height: 1.5px; background: var(--primary); border-radius: 1px;
}
.sf-group-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.sf-group-label { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; }
.sf-group-header.sf-active .sf-group-label { color: var(--primary-light); }
.sf-expand-arrow {
    font-size: 10px; color: var(--text-dim); transition: transform 0.2s;
}
.sf-expand-arrow.sf-expanded { transform: rotate(180deg); }
.sf-group-count {
    font-size: 11px; color: var(--text-tertiary); background: var(--surface);
    padding: 2px 8px; border-radius: 10px; min-width: 28px; text-align: center;
}
.sf-sub-list { padding-left: 16px; display: flex; flex-direction: column; gap: 1px; }
.sf-sub-item {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px; border-radius: 5px; cursor: pointer;
    font-size: 12px; color: var(--text-secondary); transition: background 0.15s;
}
.sf-sub-item:hover { background: var(--glass-hover); }
.sf-sub-item.sf-active { color: var(--text-primary); }
.sf-sub-name { flex: 1; }
.sf-sub-count { font-size: 11px; color: var(--text-dim); }
.sf-more-btn {
    background: none; border: none; color: var(--text-tertiary); font-size: 11px;
    cursor: pointer; padding: 4px 10px; transition: color 0.2s;
}
.sf-more-btn:hover { color: var(--text-secondary); }

/* Multi-select: searchable dropdown with chips */
.filter-multiselect-wrap { position: relative; }
.filter-ms-search {
  width: 100%; padding: 6px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-primary); font-size: 12px; font-family: inherit;
  outline: none; box-sizing: border-box; margin-bottom: 8px;
  transition: var(--transition);
}
.filter-ms-search:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(16,185,129,0.12);
}
.filter-ms-search::placeholder { color: var(--text-tertiary); }

/* Selected chips */
.filter-ms-chips {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px;
}
.filter-ms-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 10px;
  background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.25);
  color: var(--primary-light); font-size: 11px; font-weight: 500;
  cursor: default; white-space: nowrap;
  animation: chipIn 0.15s ease-out;
}
@keyframes chipIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.filter-ms-chip-x {
  cursor: pointer; font-size: 13px; line-height: 1;
  opacity: 0.6; margin-left: 2px; transition: opacity 0.15s;
}
.filter-ms-chip-x:hover { opacity: 1; }

/* Options list */
.filter-ms-list {
  max-height: 200px; overflow-y: auto;
}
.filter-ms-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 12px; color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}
.filter-ms-option:hover {
  background: var(--glass-hover); color: var(--text-primary);
}
.filter-ms-option-name { flex: 1; }
.filter-ms-option-badge {
  font-size: 10px; font-weight: 600; color: var(--text-tertiary);
  background: rgba(148,163,184,0.1); border-radius: 8px;
  padding: 1px 6px; min-width: 18px; text-align: center;
  flex-shrink: 0; margin-left: 8px;
}
.filter-ms-empty {
  padding: 12px 8px; font-size: 11px; color: var(--text-tertiary);
  text-align: center;
}

/* Segmented control */
.filter-segmented {
  display: flex; gap: 4px; padding: 2px;
  background: rgba(148,163,184,0.08); border-radius: 10px;
}
.filter-segmented-btn {
  flex: 1; padding: 5px 8px; font-size: 11px; text-align: center;
  background: transparent; border: none; color: var(--text-tertiary);
  cursor: pointer; transition: var(--transition);
  border-radius: 8px; font-weight: 500;
}
.filter-segmented-btn:hover { color: var(--text-primary); background: rgba(148,163,184,0.1); }
.filter-segmented-btn.active {
  background: var(--primary); color: #fff; font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Date card grouping */
.filter-date-card {
  border: 1px dashed rgba(255,255,255,0.1); border-radius: var(--radius);
  padding: 10px 12px; margin-bottom: 8px;
  background: transparent; transition: border-color 0.2s, background 0.2s;
}
.filter-date-card.has-value {
  border-style: solid; border-color: rgba(16,185,129,0.3);
  background: rgba(16,185,129,0.03);
}
.filter-date-card-label {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  margin-bottom: 8px; letter-spacing: 0.02em;
}

/* Date range */
.filter-date-range {
  display: flex; gap: 6px; align-items: center;
}
.filter-date-input {
  flex: 1; padding: 6px 8px; border-radius: var(--radius-sm);
  border: none; border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary); font-size: 11px; font-family: inherit;
  outline: none; box-sizing: border-box;
  transition: border-color 0.2s;
}
.filter-date-input:focus {
  border-bottom-color: var(--primary);
}
.filter-date-sep { color: var(--text-tertiary); font-size: 11px; }
.filter-date-presets {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px;
}
.filter-date-preset {
  padding: 3px 8px; font-size: 10px; border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.12); background: transparent;
  color: var(--text-secondary); cursor: pointer;
  transition: var(--transition);
}
.filter-date-preset:hover { border-color: var(--primary); color: var(--primary); }
.filter-date-preset.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Price range inputs */
.filter-price-range {
  display: flex; gap: 6px; align-items: center; overflow: hidden;
}
.filter-price-input {
  flex: 1; padding: 7px 10px; min-width: 0;
  color: var(--text-primary); font-size: 12px; font-family: inherit;
  outline: none; box-sizing: border-box; transition: var(--transition);
  /* Base style matches underline by default — overridden by input-style-* classes */
  border: none; border-bottom: 1px solid rgba(255,255,255,0.12);
  border-radius: 0; background: transparent;
}
.filter-price-input:focus {
  border-bottom-color: var(--primary);
}

/* ── Product codes in order card ─────────────────────────── */
.product-codes {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2px;
  min-height: 18px;
  opacity: 0; transition: opacity 0.2s;
}
.product-row:hover .product-codes { opacity: 1; }
.product-code-item {
  font-size: 11px; color: var(--text-tertiary);
  cursor: default; display: inline-flex; align-items: center; gap: 3px;
  transition: var(--transition);
}
.product-code-label { opacity: 0.7; }
.product-code-value { font-weight: 500; }
/* Іконки біля коду — лише ДІЇ (пошук, каталог постачальника); копіює клік по самому коду (.cp) */
.product-code-search, .product-code-catalog {
  opacity: 0; font-size: 10px; transition: opacity 0.15s;
  cursor: pointer; padding: 1px 2px;
}
.product-code-search:hover, .product-code-catalog:hover { color: var(--primary); }
.product-code-item:hover .product-code-search,
.product-code-item:hover .product-code-catalog { opacity: 1; }

/* ── Filter panel responsive ─────────────────────────────── */
@media (max-width: 768px) {
  .filter-panel { width: 100vw; }
  .filter-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
}

/* ── Main content area ───────────────────────────────────── */
/* ── App layout (sidebar + content) ─────────────────────── */
/* dvh поверх vh (для старих браузерів лишається vh): на мобільних 100vh — це
   висота БЕЗ згорнутої адресної панелі, тобто більша за видиму область. Через це
   під сторінкою замовлення лишалось пів екрана порожнечі, яку можна прогорнути
   (скарга Івана 2026-07-29). dvh рахує реально видиме. */
.app-layout {
  display: flex;
  height: calc(100vh - 60px);
  height: calc(100dvh - 60px);
  position: relative;
}
.app-layout.with-admin-banner {
  height: calc(100vh - 60px - 44px);
  height: calc(100dvh - 60px - 44px);
}

/* ── Sidebar ────────────────────────────────────────────── */
.sidebar {
  width: 260px;
  flex-shrink: 0;
  background: rgba(15, 23, 42, 0.95);
  border-right: 1px solid var(--border);
  /* Скрол — на навігації, не на всьому сайдбарі (2026-07-28). Було overflow-y:auto
     тут: на низькому вікні їхало ВСЕ разом, і бренд із назвою компанії зникали під
     верхнім краєм (у скарзі — «назва постачальника не влазить», рядок обрізало
     навпіл). Тепер шапка й нижній блок з балансом стоять, а меню гортається саме. */
  overflow: hidden;
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.sidebar-nav { padding: 8px 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* .sidebar-experiment (тимчасовий блок «Стиль трекінгу НП» унизу сайдбара)
   видалено 2026-07-26 разом із перемикачем layout'ів — канон обрано. */

.nav-group {}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 20px;
  cursor: pointer;
  text-decoration: none;   /* пункти меню — <a> заради середнього кліку (2026-07-29) */
  transition: background 0.15s, color 0.15s;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  user-select: none;
  border-right: 3px solid transparent;
}
.nav-item:hover {
  background: var(--glass-hover);
  color: var(--text-primary);
}
.nav-item.active {
  color: var(--primary-light);
  background: rgba(16,185,129,0.08);
  border-right-color: var(--primary);
}
.nav-item--child {
  padding-left: 50px;
  font-size: 12px;
}
.nav-icon {
  width: 20px;
  text-align: center;
  font-size: 14px;
  opacity: 0.7;
  flex-shrink: 0;
}
.nav-item.active .nav-icon,
.nav-item:hover .nav-icon { opacity: 1; }

.nav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-badge {
  margin-left: auto;
  background: rgba(148,163,184,0.12);
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.nav-item.active .nav-badge,
.nav-item:hover .nav-badge {
  background: rgba(16,185,129,0.15);
  color: var(--primary-light);
}
.nav-badge:empty { display: none; }

.nav-arrow {
  font-size: 10px;
  opacity: 0.4;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.nav-group.open > .nav-item .nav-arrow { transform: rotate(180deg); }

.nav-children {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.nav-group.open > .nav-children {
  max-height: 500px;
}
/* Alert dot on collapsed group header */
.nav-group.has-alert:not(.open) > .nav-item .nav-label::after {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--danger); margin-left: 6px; vertical-align: middle;
  animation: pulse-warn 2s infinite;
}
/* Alert dot on child item when group is open */
.nav-item--child.has-child-alert .nav-label::after {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--danger); margin-left: 6px; vertical-align: middle;
  animation: pulse-warn 2s infinite;
}

.nav-separator {
  height: 1px;
  background: var(--border);
  margin: 6px 16px;
}

/* Hamburger (hidden on desktop) */
.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  flex-shrink: 0;
}
.sidebar-toggle:hover { background: var(--glass-hover); color: var(--text-primary); }

/* Sidebar overlay (mobile) */
.sidebar-overlay { display: none; }

/* ── Main content ───────────────────────────────────────── */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 24px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative; z-index: 1;
}
.main-content > * {
  max-width: 1100px;
  width: 100%;
}

/* ── Stub page ──────────────────────────────────────────── */
.stub-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: var(--text-tertiary);
  gap: 12px;
}
.stub-icon { font-size: 48px; opacity: 0.3; }
.stub-title { font-size: 18px; font-weight: 600; color: var(--text-secondary); }
.stub-text { font-size: 13px; }

/* ── Section title ───────────────────────────────────────── */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.section-title {
  font-size: 16px; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 10px;
}
.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  min-width: 40px;
}
.section-count {
  font-size: 12px; color: var(--text-tertiary); margin-left: 6px;
}

/* ── Vendor not assigned warning ─────────────────────────── */
.vendor-warning {
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.2);
  border-radius: var(--radius);
  padding: 24px 28px;
  display: flex; align-items: flex-start; gap: 16px;
  backdrop-filter: blur(10px);
}
.vendor-warning-icon {
  font-size: 28px; flex-shrink: 0; margin-top: 2px;
}
.vendor-warning-title {
  font-size: 15px; font-weight: 600; color: var(--warning); margin-bottom: 6px;
}
.vendor-warning-text {
  font-size: 13px; color: var(--text-secondary); line-height: 1.6;
}

/* Admin injected innerHTML for admin placeholder (app.js sets h3+p directly) */
#vendor-status h3 {
  font-size: 15px; font-weight: 600; color: var(--primary-light); margin-bottom: 8px;
}
#vendor-status p {
  font-size: 13px; color: var(--text-secondary);
}

/* Admin placeholder (select vendor prompt) */
.admin-placeholder {
  background: rgba(16,185,129,0.04);
  border: 1px solid rgba(16,185,129,0.15);
  border-radius: var(--radius);
  padding: 40px; text-align: center;
}
.admin-placeholder-icon { font-size: 36px; margin-bottom: 12px; }
.admin-placeholder h3 {
  font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px;
}
.admin-placeholder p { font-size: 13px; color: var(--text-secondary); }

/* ── Loading state ───────────────────────────────────────── */
.loading-state {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 60px 20px;
}
.spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(16,185,129,0.15);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-label {
  font-size: 13px; color: var(--text-secondary);
}

/* ── Empty state ─────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 60px 20px; color: var(--text-tertiary);
}
.empty-state .empty-icon { font-size: 40px; margin-bottom: 12px; }
.empty-state p { font-size: 14px; }
.empty-reset-filters {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px; padding: 8px 16px; border-radius: 20px;
  background: transparent; border: 1px dashed rgba(255,255,255,0.15);
  color: var(--text-tertiary); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 0.3s;
}
.empty-reset-filters:hover {
  color: var(--text-primary); border-color: rgba(255,255,255,0.3);
}

/* ── Skeleton loading ───────────────────────────────────── */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton-card {
  background: rgba(30, 41, 59, 0.75);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.skeleton-line {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(148,163,184,0.06) 0%, rgba(148,163,184,0.12) 50%, rgba(148,163,184,0.06) 100%);
  background-size: 400px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w40 { width: 40%; }
.skeleton-line.w80 { width: 80%; }
.skeleton-line.w30 { width: 30%; }
.skeleton-line.thick { height: 20px; }
.nav-badge--loading {
  min-width: 28px; padding: 2px 6px;
  background: rgba(148,163,184,0.08);
  background-image: linear-gradient(90deg, rgba(148,163,184,0.06) 0%, rgba(148,163,184,0.15) 50%, rgba(148,163,184,0.06) 100%);
  background-size: 400px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  color: transparent;
}
.nav-badge--loading .badge-dot { display: none; }
.skeleton-row {
  display: flex; gap: 12px; align-items: center;
}
.skeleton-avatar {
  width: 96px; height: 96px; min-width: 96px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(148,163,184,0.06) 0%, rgba(148,163,184,0.12) 50%, rgba(148,163,184,0.06) 100%);
  background-size: 400px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* Order detail skeleton */
.od-skeleton {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.od-skeleton-card {
  background: rgba(30, 41, 59, 0.75);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px 28px;
  min-height: 340px;
}
.od-skeleton-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.od-skeleton-row--between {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.od-skeleton-body {
  display: flex;
  gap: 0;
  margin-top: 16px;
}
.od-skeleton-product-area {
  flex: 1;
  padding-right: 24px;
}
.od-skeleton-product {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.od-skeleton-img {
  width: 100px;
  height: 100px;
  min-width: 100px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(148,163,184,0.06) 0%, rgba(148,163,184,0.12) 50%, rgba(148,163,184,0.06) 100%);
  background-size: 400px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
.od-skeleton-client {
  width: 280px;
  min-width: 280px;
  border-left: 1px solid var(--border);
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Product detail skeleton */
.pd-skeleton-main {
  display: flex;
  gap: 24px;
  background: rgba(30, 41, 59, 0.75);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
}
.pd-skeleton-gallery {
  width: 320px;
  min-width: 320px;
}
.pd-skeleton-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Orders list skeleton */
.ol-skeleton-card {
  background: rgba(30, 41, 59, 0.75);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px 28px;
  display: flex;
  gap: 0;
  min-height: 340px;
}
.ol-skeleton-left {
  flex: 1;
  padding-right: 20px;
}
.ol-skeleton-right {
  width: 240px;
  min-width: 240px;
  border-left: 1px solid var(--border);
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ol-skeleton-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.ol-skeleton-product {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.ol-skeleton-img {
  width: 96px;
  height: 96px;
  min-width: 96px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(148,163,184,0.06) 0%, rgba(148,163,184,0.12) 50%, rgba(148,163,184,0.06) 100%);
  background-size: 400px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* ── Order cards ─────────────────────────────────────────── */
.orders-list {
  display: flex; flex-direction: column; gap: 12px;
}

.order-card {
  background: rgba(30, 41, 59, 0.75);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: visible;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}
.order-card:has(.status-dropdown.open) {
  z-index: 100;
}
.order-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
}
/* Status-colored hover border (always active, regardless of marker style) */
.order-card.order-new:hover        { border-color: rgba(148,163,184,0.4); box-shadow: 0 0 16px rgba(148,163,184,0.08); }
.order-card.order-processing:hover  { border-color: rgba(245,158,11,0.45); box-shadow: 0 0 16px rgba(245,158,11,0.1); }
.order-card.order-shipping:hover    { border-color: rgba(6,182,212,0.45); box-shadow: 0 0 16px rgba(6,182,212,0.1); }
.order-card.order-completed:hover   { border-color: rgba(16,185,129,0.4); box-shadow: 0 0 16px rgba(16,185,129,0.1); }
.order-card.order-failed:hover      { border-color: rgba(239,68,68,0.45); box-shadow: 0 0 16px rgba(239,68,68,0.1); }
.order-card.order-paid:hover        { border-color: rgba(139,92,246,0.45); box-shadow: 0 0 16px rgba(139,92,246,0.1); }

/* ── Order card marker styles (switchable) ─────────────── */
/* Colors: new=cyan, processing=amber, shipping=blue, completed=green, failed=red */

/* Style A: border-left (same opacity as top) */
.order-marker-border .order-card.order-new        { border-left: 2px solid rgba(148,163,184,0.35); }
.order-marker-border .order-card.order-processing  { border-left: 2px solid rgba(245,158,11,0.35); }
.order-marker-border .order-card.order-shipping    { border-left: 2px solid rgba(6,182,212,0.35); }
.order-marker-border .order-card.order-completed   { border-left: 2px solid rgba(16,185,129,0.35); }
.order-marker-border .order-card.order-failed      { border-left: 2px solid rgba(239,68,68,0.35); }
.order-marker-border .order-card.order-paid        { border-left: 2px solid rgba(139,92,246,0.35); }

/* Style B: left gradient (layered over card bg) */
.order-marker-gradient .order-card.order-new        { background: linear-gradient(90deg, rgba(148,163,184,0.08) 0%, transparent 20%), rgba(30,41,59,0.75); }
.order-marker-gradient .order-card.order-processing  { background: linear-gradient(90deg, rgba(245,158,11,0.08) 0%, transparent 20%), rgba(30,41,59,0.75); }
.order-marker-gradient .order-card.order-shipping    { background: linear-gradient(90deg, rgba(6,182,212,0.06) 0%, transparent 20%), rgba(30,41,59,0.75); }
.order-marker-gradient .order-card.order-completed   { background: linear-gradient(90deg, rgba(16,185,129,0.07) 0%, transparent 20%), rgba(30,41,59,0.75); }
.order-marker-gradient .order-card.order-failed      { background: linear-gradient(90deg, rgba(239,68,68,0.10) 0%, transparent 20%), rgba(30,41,59,0.75); }
.order-marker-gradient .order-card.order-paid        { background: linear-gradient(90deg, rgba(139,92,246,0.08) 0%, transparent 20%), rgba(30,41,59,0.75); }

/* Style C: top accent line */
.order-marker-top .order-card.order-new        { border-top: 2px solid rgba(148,163,184,0.35); }
.order-marker-top .order-card.order-processing  { border-top: 2px solid rgba(245,158,11,0.35); }
.order-marker-top .order-card.order-shipping    { border-top: 2px solid rgba(6,182,212,0.35); }
.order-marker-top .order-card.order-completed   { border-top: 2px solid rgba(16,185,129,0.35); }
.order-marker-top .order-card.order-failed      { border-top: 2px solid rgba(239,68,68,0.35); }
.order-marker-top .order-card.order-paid        { border-top: 2px solid rgba(139,92,246,0.35); }

/* Style D: corner triangle (top-left, near order number) */
.order-marker-corner .order-card { overflow: hidden; position: relative; }
.order-marker-corner .order-card:has(.status-dropdown.open) { overflow: visible; }
.order-marker-corner .order-card:has(.status-dropdown.open)::before { display: none; }
.order-marker-corner .order-card::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 0; height: 0;
    border-style: solid; border-width: 20px 20px 0 0;
    border-color: transparent; pointer-events: none;
}
.order-marker-corner .order-card.order-new::before        { border-top-color: rgba(148,163,184,0.4); }
.order-marker-corner .order-card.order-processing::before  { border-top-color: rgba(245,158,11,0.5); }
.order-marker-corner .order-card.order-shipping::before    { border-top-color: rgba(6,182,212,0.5); }
.order-marker-corner .order-card.order-completed::before   { border-top-color: rgba(16,185,129,0.4); }
.order-marker-corner .order-card.order-failed::before      { border-top-color: rgba(239,68,68,0.5); }
.order-marker-corner .order-card.order-paid::before        { border-top-color: rgba(139,92,246,0.5); }

/* ── Order header (new design) ──────────────────────────── */
.order-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px 18px 12px;
  position: relative;
  gap: 12px;
}
.order-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 10%, var(--border) 90%, transparent);
}
.order-header-left {
  display: flex; flex-direction: column; gap: 2px;
}
.order-id-row {
  display: flex; align-items: center;
}
.order-id {
  font-size: 18px; font-weight: 700; color: var(--text-primary);
  user-select: none;
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
/* Номер — копіюється кліком (.cp). Перехід у замовлення — окрема явна кнопка
   (Іван 15.09: «клик по номеру часто неожиданно делает переход»). */
.order-open-btn {
  display: inline-flex; align-items: center; margin-left: 8px;
  font-size: 13px; color: var(--text-tertiary); text-decoration: none;
  opacity: 0.45; transition: opacity 0.15s, color 0.15s;
}
.order-id-row:hover .order-open-btn { opacity: 0.85; }
.order-open-btn:hover { opacity: 1; color: var(--primary-light); }
/* чат з покупцем у застосунку «Клієнти» (web+promchat://order/<id>) — лише кабінети дропшиперів */
.order-chat-app-btn {
  display: inline-flex; align-items: center; margin-left: 6px;
  font-size: 13px; color: var(--text-tertiary); text-decoration: none;
  opacity: 0.45; transition: opacity 0.15s, color 0.15s;
}
.order-id-row:hover .order-chat-app-btn { opacity: 0.85; }
.order-chat-app-btn:hover { opacity: 1; color: var(--primary-light); }
.multi-vendor-icon {
  display: inline-flex; align-items: center; align-self: center;
  margin-left: 6px;
  font-size: 14px;
  line-height: 1;
  color: var(--text-tertiary);
  cursor: help;
}
.order-date {
  font-size: 12px; color: var(--text-tertiary);
}
.order-date .relative-time {
  color: var(--text-secondary);
}

/* ── Status badge + dropdown ─────────────────────────────── */
.status-wrapper {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.order-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 600; white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}
.order-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.order-status::after {
  content: '▾'; font-size: 9px; margin-left: 2px; opacity: 0.6;
}
.order-status:hover { filter: brightness(1.15); }

.order-status.pending {
  background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.25); color: #fbbf24;
}
.order-status.pending::before { background: #fbbf24; animation: pulse-warn 2s infinite; }
@keyframes pulse-warn {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}
.order-status.received, .order-status.status-active {
  background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.25); color: #fbbf24;
}
.order-status.received::before, .order-status.status-active::before { background: #f59e0b; }
.order-status.delivered, .order-status.status-completed {
  background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.25); color: var(--primary-light);
}
.order-status.delivered::before, .order-status.status-completed::before { background: var(--primary); }
.order-status.canceled, .order-status.status-canceled {
  background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.25); color: #fca5a5;
}
.order-status.canceled::before, .order-status.status-canceled::before { background: var(--danger); }
.order-status.paid {
  background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.25); color: #c4b5fd;
}
.order-status.paid::before { background: var(--violet); }
.order-status.draft,
.order-status.unread,
.order-status.read,
.order-status.status-new {
  background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary);
}
.order-status.draft::before,
.order-status.unread::before,
.order-status.read::before,
.order-status.status-new::before { background: var(--warning); animation: pulse-warn 2s infinite; }
.order-status.status-shipping {
  background: rgba(6,182,212,0.12); border: 1px solid rgba(6,182,212,0.25); color: #67e8f9;
}
.order-status.status-shipping::before { background: var(--accent); }
.order-status.status-waiting {
  background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.25); color: #fbbf24;
}
.order-status.status-waiting::before { background: #f59e0b; }

/* Status loading state */
.order-status.status-loading {
  pointer-events: none;
  position: relative;
  animation: status-pulse 1.2s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.order-status.status-loading .status-text {
  opacity: 0;
  transition: opacity 0.2s;
}
.order-status.status-loading::before {
  display: none;
}
.order-status.status-loading::after {
  content: '' !important;
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: status-spin 0.55s linear infinite;
  margin: 0;
  opacity: 0.9;
}
@keyframes status-spin {
  to { transform: rotate(360deg); }
}

/* Status success flash */
.order-status.status-just-changed {
  animation: status-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes status-pop {
  0%   { transform: scale(0.85); opacity: 0.5; box-shadow: 0 0 0 0 rgba(16,185,129,0.6); }
  50%  { transform: scale(1.08); box-shadow: 0 0 16px 6px rgba(16,185,129,0.25); }
  100% { transform: scale(1);    opacity: 1;   box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* Status error shake */
.order-status.status-error {
  animation: status-shake 0.4s ease-in-out;
}
@keyframes status-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-3px); }
  40%      { transform: translateX(3px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}

/* Status dropdown */
.status-dropdown {
  display: none;
  position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  min-width: 240px; max-height: 360px;
  overflow-y: auto;
  z-index: 200;
  padding: 4px;
}
.status-dropdown.open { display: block; }
.status-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 6px;
  font-size: 12px; color: var(--text-primary);
  cursor: pointer; transition: background 0.15s;
  border: none; background: none; width: 100%;
  font-family: inherit; text-align: left;
}
.status-dropdown-item:hover { background: var(--glass-hover); }
.status-dropdown-item::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); flex-shrink: 0; /* green = forward progress */
}
.status-dropdown-divider {
  height: 1px; background: var(--border); margin: 4px 8px;
}
.status-dropdown-label {
  font-size: 10px; font-weight: 600; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 6px 12px 2px;
}
.status-dropdown-item.cancel-item { color: #fca5a5; }
.status-dropdown-item.cancel-item::before { background: var(--danger); }
/* Тон крапки = event-група цільового статусу (як у пілюль статусів):
   робота — amber, доставка — cyan, виконано — emerald, скасування — rose */
.status-dropdown-item.tone-work::before { background: var(--warning); }
.status-dropdown-item.tone-ship::before { background: var(--accent); }
.status-dropdown-item.tone-done::before { background: var(--primary); }
.status-dropdown-item.tone-fail::before { background: var(--danger); }
.sdd-filter {
  width: 70px; padding: 0; margin-left: 6px;
  font-size: 10px; font-family: inherit; font-weight: 400;
  background: none; color: var(--text-secondary);
  border: none; outline: none;
  text-transform: none; letter-spacing: normal;
  vertical-align: baseline;
}
.sdd-filter::placeholder { color: var(--text-tertiary); opacity: 0.5; }

/* Sync warning */
.sync-warning {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--warning);
  cursor: help;
}

/* Client canceled on Prom but our status is still active */
.order-client-canceled {
  border: 1.5px dashed rgba(239,68,68,0.35) !important;
}
.client-canceled-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; color: #fca5a5;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.25);
  padding: 2px 8px; border-radius: 10px;
  white-space: nowrap;
}

/* ── Two-column order body ───────────────────────────────── */
.order-body {
  display: grid;
  grid-template-columns: 1fr 360px;
}
/* min-width:0 — інакше колонки грід-контейнера не стискаються нижче свого вмісту
   (дефолт min-width:auto), і на вузькому вікні картка лізе за власні межі: адреса
   відділення та назва товару виїжджають за правий край (скарга Івана 2026-07-29). */
.order-body-left {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.order-body-right {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
}
/* Довгі адреси НП («смт. Андріївка (Харківська обл., Ізюмський р-н. …)») і назви
   товарів переносимо будь-де, а не тільки по пробілах. */
.order-body-left, .order-body-right { overflow-wrap: anywhere; }
.order-body-right::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border) 15%, var(--border) 85%, transparent);
  pointer-events: none;
}
.order-body-right > * + * {
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* Override sections inside right column */
.order-body-right .client-section {
  padding: 12px 16px;
  border-bottom: none;
}
.order-body-right .delivery-section {
  padding: 12px 16px;
  border-bottom: none;
}
.order-body-right .client-notes {
  padding: 10px 16px;
  border-bottom: none;
}

.order-total-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  position: relative;
}
.order-total-row::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--border) 60%, transparent);
}
.order-total-label {
  font-size: 13px;
  color: var(--text-secondary);
}
.order-total-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-light);
}

.payment-section {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Client section ──────────────────────────────────────── */
.client-section {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.client-name-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.client-name {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
}
/* Копіюване значення в картці (Іван 15.09, одне правило для всього): курсор «copy»
   і зелена підсвітка при наведенні — це і є підказка; клік копіює, поп-ап біля
   курсора (.pop-tip). БЕЗ padding/margin: у flex-рядку з overflow-wrap:anywhere
   «padding 2px + margin -2px» дає ширину на долі пікселя меншу за вміст — на DPR 1
   (Windows) останнє слово не влазить і ПІБ ламається по словах. Підсвітка —
   box-shadow, він у розкладці не бере участі. */
.cp {
  cursor: copy; border-radius: 4px;
  transition: background .12s, box-shadow .12s, color .12s;
}
.cp:hover {
  background: rgba(16,185,129,.18);
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
  color: var(--primary-light);
}
/* Поп-ап біля курсора: «„Олена“ скопійовано» — над точкою кліку, зникає сам */
.pop-tip {
  position: fixed; z-index: 10010;
  background: rgba(16,185,129,0.94); color: #fff;
  font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.25); box-shadow: 0 6px 20px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease;
  pointer-events: none; white-space: nowrap;
}
.pop-tip.show { opacity: 1; transform: translateY(0); }
.pop-tip.err { background: rgba(239,68,68,0.94); }
.client-edit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--text-tertiary); cursor: pointer;
  opacity: 0; transform: translateX(-4px);
  transition: opacity .15s, transform .15s, color .15s, background .15s, border-color .15s;
  font-size: 11px;
}
.client-section:hover .client-edit-btn { opacity: 0.7; transform: translateX(0); }
.client-edit-btn:hover {
  opacity: 1 !important;
  color: var(--primary);
  background: rgba(99,102,241,.08);
  border-color: rgba(99,102,241,.25);
}
.client-edit-panel {
  display: flex; flex-direction: column; gap: 10px;
  padding: 4px 0 8px;
}
.client-edit-fields {
  display: flex; flex-direction: column; gap: 4px;
}
.client-edit-fields input {
  width: 100%; padding: 6px 0;
  background: transparent;
  border: none; border-bottom: 2px dotted rgba(255,255,255,.12);
  border-radius: 0;
  color: var(--text-primary); font-size: 14px; font-family: inherit;
  outline: none; transition: border-color .2s;
  box-sizing: border-box;
}
.client-edit-fields input:hover { border-bottom-color: rgba(255,255,255,.25); }
.client-edit-fields input:focus {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: rgba(16, 185, 129, 0.5);
}
.client-edit-fields input::placeholder {
  color: var(--text-tertiary);
  font-size: 12px;
  transition: opacity .2s;
}
.client-edit-fields input:focus::placeholder { opacity: 0.5; }
.client-edit-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 4px;
}
.client-section.editing .client-view { display: none; }
.client-section.editing .client-edit-panel { display: flex !important; }
.client-phone-row {
  display: flex; align-items: center; gap: 8px;
}

/* ── Product rows ────────────────────────────────────────── */
.products-section {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.product-list {
  display: flex; flex-direction: column; gap: 8px;
}
.product-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
  border: 1px solid transparent;
  transition: var(--transition);
}
.product-row:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--border);
}

.product-image {
  width: 96px; height: 96px; border-radius: 6px;
  object-fit: cover; background: var(--bg-secondary);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.product-image-placeholder {
  width: 96px; height: 96px; border-radius: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); font-size: 24px;
  flex-shrink: 0;
}

/* Product photo → hover preview button (order items) */
.product-image-wrap { position: relative; width: 96px; height: 96px; flex-shrink: 0; }
.product-preview-btn {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5); color: #fff; border: none; border-radius: 6px;
  cursor: pointer; opacity: 0; transition: opacity .15s ease; font-size: 17px; padding: 0;
}
.product-image-wrap:hover .product-preview-btn { opacity: 1; }

/* Product quick-preview modal */
.product-preview-overlay {
  position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); padding: 20px;
}
.product-preview-card {
  position: relative; background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 14px; width: 100%; max-width: 960px; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  max-height: 88vh; display: flex; flex-direction: column;
}
.ppv-actions-top { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; gap: 4px; }
.product-preview-open, .product-preview-close {
  width: 32px; height: 32px; border-radius: 8px; border: none; cursor: pointer; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-tertiary);
}
.product-preview-close:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.product-preview-open { color: var(--primary-light); }
.product-preview-open:hover { background: rgba(16,185,129,0.14); }
.product-preview-loading { padding: 48px; text-align: center; color: var(--text-tertiary); font-size: 22px; }
.ppv-scroll { padding: 22px; overflow-y: auto; flex: 1; }
.ppv-top { display: flex; gap: 20px; padding-right: 64px; }
.ppv-gallery { width: 200px; flex-shrink: 0; }
.ppv-img {
  width: 200px; height: 200px; border-radius: 10px; background: #fff;
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: var(--text-tertiary); font-size: 30px;
}
.ppv-img img { width: 100%; height: 100%; object-fit: contain; }
.ppv-thumbs { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ppv-thumb {
  width: 44px; height: 44px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border);
  cursor: pointer; opacity: 0.65; transition: opacity .15s, border-color .15s;
}
.ppv-thumb.active, .ppv-thumb:hover { opacity: 1; border-color: var(--primary); }
.ppv-main { flex: 1; min-width: 0; }
.ppv-name { font-size: 17px; font-weight: 700; color: var(--text-primary); line-height: 1.35; }
.ppv-name-uk { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.ppv-price { font-size: 20px; font-weight: 700; color: var(--primary-light); margin: 10px 0 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ppv-oldprice { font-size: 13px; color: var(--text-tertiary); text-decoration: line-through; font-weight: 400; }
.ppv-rows { display: flex; flex-direction: column; gap: 6px; }
.ppv-row { display: flex; gap: 10px; font-size: 13px; }
.ppv-k { color: var(--text-tertiary); min-width: 92px; flex-shrink: 0; }
.ppv-v { color: var(--text-secondary); }
.ppv-section { margin-top: 18px; }
.ppv-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ppv-section-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.ppv-toggles { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ppv-bg-toggle, .ppv-lang-toggle { display: inline-flex; gap: 2px; background: rgba(255,255,255,.05); border-radius: 8px; padding: 2px; }
.ppv-bg { padding: 4px 9px; border: none; border-radius: 6px; background: transparent; color: var(--text-tertiary); font-size: 12px; cursor: pointer; }
.ppv-bg.active { background: rgba(16,185,129,.18); color: var(--primary); }
.ppv-lang { padding: 3px 11px; border: none; border-radius: 6px; background: transparent; color: var(--text-tertiary); font-size: 12px; font-weight: 700; cursor: pointer; }
.ppv-lang.active { background: rgba(16,185,129,.18); color: var(--primary); }
.ppv-disclaimer { margin-top: 14px; font-size: 11.5px; color: var(--text-tertiary); font-style: italic; }

.product-info {
  flex: 1; min-width: 0;
}
.product-name {
  font-size: 13px; color: var(--text-primary);
  line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.product-factory-code {
  font-size: 11px; color: var(--text-tertiary);
  opacity: 0; transition: opacity 0.15s;
}
.order-card:hover .product-factory-code {
  opacity: 1;
}
.product-unit-price {
  font-size: 11px; color: var(--text-tertiary); margin-top: 2px;
}

.product-total-price {
  font-size: 12px; color: var(--primary-light);
  margin-top: 2px; white-space: nowrap;
}

.product-actions-stub {
  display: flex; gap: 4px; opacity: 0;
  transition: opacity 0.15s;
}
.product-row:hover .product-actions-stub { opacity: 0.5; }
.product-actions-stub:hover { opacity: 1 !important; }
.product-action-btn {
  padding: 2px 6px; border-radius: 4px;
  font-size: 10px; color: var(--text-tertiary);
  background: none; border: 1px solid var(--border);
  cursor: pointer; transition: var(--transition);
  font-family: inherit;
}
.product-action-btn:hover {
  color: var(--text-secondary);
  border-color: var(--border-light);
  background: var(--glass);
}

/* Payment & total row */
.payment-total-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--border);
}
.payment-info {
  font-size: 12px; color: var(--text-secondary);
  display: flex; align-items: center; gap: 8px;
}
.paid-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: var(--radius-sm);
  background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.25);
  font-size: 10px; font-weight: 700; color: var(--primary-light);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.not-paid-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--radius-sm);
  background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2);
  font-size: 10px; font-weight: 600; color: #fbbf24;
  letter-spacing: 0.03em;
}
.order-total {
  font-size: 16px; font-weight: 700; color: var(--primary-light);
  white-space: nowrap;
}

/* ── Delivery section ────────────────────────────────────── */
.delivery-section {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.delivery-carrier {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.delivery-carrier-icon {
  color: var(--accent); font-size: 14px;
  display: flex; align-items: center;
}
.carrier-icon-svg {
  width: 20px; height: 20px;
  opacity: 0.5;
}
/* Delivery promo badge */
.delivery-promo-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: rgba(251,191,36,0.18);
  color: var(--warning);
  border: 1px solid rgba(251,191,36,0.35);
  cursor: help;
  white-space: nowrap;
  transition: var(--transition);
}
/* Активоване промо: ГАБАРИТИ й регістр — від базового промо-бейджа
   (як у янтарної pending-версії), від «ОПЛАЧЕНО» — ЛИШЕ КОЛЬОРИ
   (рішення Івана, р.21: «от ОПЛАЧЕНО нужны только цвета») */
.delivery-promo-badge.promo-applied {
  background: rgba(16,185,129,0.12);
  border-color: rgba(16,185,129,0.25);
  color: var(--primary-light);
}
/* Custom promo tooltip */
/* ⚠ Усі попапи, що додаються в body: position: FIXED, не absolute.
   Скролиться в застосунку .main-content, а НЕ вікно — тому absolute-попап,
   який не вміщається під якорем, розтягував САМ документ, у вікна з'являвся
   скролбар і вся сторінка стрибала вліво (Іван 2026-07-30: «карточка двигается
   по ширине» при ховері рейтингу). Fixed не бере участі у висоті документа —
   скролбар вікна не з'являється ніколи. window.scrollY у формулах позицій
   завжди 0, тож координати не змінились. */
.promo-badge-tooltip {
  position: fixed;
  z-index: 1000000;
  max-width: 380px;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-secondary);
  pointer-events: none;
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.delivery-address-text {
  font-size: 12px; color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.5;
}
.dd-history-icon {
  display: inline-block;
  cursor: pointer;
  color: var(--warning);
  font-size: 11px;
  margin-left: 5px;
  opacity: 0.7;
  transition: opacity 0.15s, color 0.15s;
}
.dd-history-icon:hover { opacity: 1; color: var(--primary-light); }
.dd-hist-icon { display: inline-flex; vertical-align: middle; margin-right: 3px; }
.dd-hist-icon img { width: 14px; height: 14px; object-fit: contain; }
.dd-hist-icon i { font-size: 12px; }
.dd-hist-source { font-size: 10px; color: var(--text-tertiary); opacity: 0.6; }
.ttn-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px;
}
/* Компактний варіант — × відразу після номера, тісніші зазори.
   "Додано в Prom" — одним рядком тексту; якщо разом з ТТН і іконками не вміщається,
   весь блок prom-status переноситься на наступний рядок завдяки flex-wrap на .ttn-row.
   Мета: умістити все в один рядок навіть на вузьких картках (~370-400px). */
.ttn-row--compact {
  gap: 4px;
  min-height: 26px;
}
.ttn-row--compact .ttn-prom-status {
  margin-left: auto;
  padding-left: 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* Flat icon button (для деталей ТТН) — без обводки, тільки колір.
   Розмір 24px — більший за стандартні 22px, узгоджений з .ttn-del-btn
   (теж 22 → 24 в компактному режимі через override нижче). */
.ttn-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  background: transparent; border: none;
  color: var(--text-tertiary); cursor: pointer;
  font-size: 14px; opacity: 0.55;
  transition: opacity 0.15s, color 0.15s;
}
.ttn-icon-btn:hover { opacity: 1; color: var(--primary); }
/* В компактному режимі — × такого ж розміру як .ttn-icon-btn (24px) */
.ttn-row--compact .ttn-del-btn {
  width: 24px; height: 24px; font-size: 14px;
}
/* Іконок у рядку ТТН стало чотири (×, 📍, маршрут, 📄) — на типовій ширині
   колонки «Додано в Prom» перестало вміщатись і переносилось. Тіснимо іконки
   до 20px і прибираємо їхні власні лівi відступи (gap рядка вже дає 4px). */
.ttn-row--compact .ttn-icon-btn,
.ttn-row--compact .ttn-del-btn { width: 20px; height: 20px; }
.ttn-row--compact .ttn-track-link { margin-left: 0; }
.ttn-row--compact .up-history-icon { margin-left: 0; }
.ttn-label {
  font-size: 11px; font-weight: 600; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.ttn-value {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  letter-spacing: 0.02em;
  position: relative;
}
/* пунктир і підпис «Натисніть, щоб скопіювати» зняті: підказка й клік — від .cp */
.ttn-track-link {
  color: var(--text-tertiary); font-size: 13px;
  margin-left: 6px; transition: color 0.2s;
  text-decoration: none;
}
.ttn-track-link:hover { color: var(--primary); }
.ttn-prom-status {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; color: var(--primary-light);
  margin-left: auto;
}
.ttn-prom-status.error { color: #fca5a5; cursor: help; }
.ttn-prom-status.warn { color: #fbbf24; cursor: help; }
.ttn-prom-status[title] { cursor: help; }

.ttn-del-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--text-tertiary); cursor: pointer;
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.15s, transform 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
  font-size: 12px;
}
.ttn-row:hover .ttn-del-btn { opacity: 0.7; transform: translateX(0); }
.ttn-del-btn:hover {
  opacity: 1 !important;
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.25);
}

/* TTN input (when no TTN exists) */
.ttn-input-row {
  display: flex; align-items: center; gap: 8px;
}
.ttn-input {
  padding: 6px 0 4px 0;
  border: none;
  border-bottom: 1px dotted rgba(255,255,255,0.12);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary); font-size: 13px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-weight: 500;
  letter-spacing: 0.03em;
  outline: none; width: 180px;
  transition: border-color 0.3s;
}
.ttn-input:focus {
  border-bottom-color: var(--warning);
}
.ttn-input::placeholder { color: var(--text-dim); opacity: 0.5; }
.ttn-save-btn {
  padding: 5px 12px; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 600;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.3s;
  font-family: inherit;
  letter-spacing: 0.02em;
}
/* Inactive = nothing entered or not valid yet — hidden */
.ttn-save-btn--inactive {
  opacity: 0;
  pointer-events: none;
  width: 0; padding: 0; border: none; overflow: hidden;
}
/* Ready = valid TTN entered, NOT YET SAVED — make it scream */
.ttn-save-btn--ready {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  opacity: 1;
  animation: ttn-pulse 2s ease-in-out infinite;
}
.ttn-save-btn--ready:hover {
  background: var(--accent);
  border-color: var(--accent);
}
/* Pulse the whole row when valid but unsaved */
.ttn-input-row:has(.ttn-save-btn--ready) .ttn-input {
  border-bottom-color: var(--primary);
  animation: ttn-text-pulse 2s ease-in-out infinite;
}
@keyframes ttn-text-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.ttn-create-np-btn { white-space: nowrap; font-size: 11px !important; padding: 3px 8px !important; transition: opacity .25s, width .25s, padding .25s; }
/* Ввели номер руками → кнопка зайва: згортаємо так само, як неактивну «Зберегти»
   (Іван 2026-07-26 — інакше вона просто від'їжджала вбік і смикала рядок). */
.ttn-create-np-btn--collapsed {
  opacity: 0; pointer-events: none;
  width: 0; padding: 0 !important; border: none !important;
  margin: 0; overflow: hidden;
}
.mark-paid-btn { background:none; border:1px dashed rgba(16,185,129,.3); color:var(--primary); font-size:12px; padding:2px 8px; border-radius:6px; cursor:pointer; font-family:inherit; transition:all .2s; }
.mark-paid-btn:hover { background:rgba(16,185,129,.1); border-style:solid; }
.ttn-details-btn { opacity:.5; transition:opacity .2s; }
.ttn-details-btn:hover { opacity:1; color:var(--primary) !important; }
@keyframes ttn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
  50% { box-shadow: 0 0 0 4px rgba(16,185,129,0.15); }
}
.ttn-save-btn:disabled { opacity: 0.3; cursor: not-allowed; animation: none; }

/* Animated checkmark after TTN saved */
.ttn-save-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  animation: check-fade 2.5s ease forwards;
}
.ttn-save-check svg { width: 22px; height: 22px; }
.ttn-save-check .check-circle {
  fill: none; stroke: var(--primary); stroke-width: 2;
  stroke-dasharray: 64; stroke-dashoffset: 64;
  animation: check-circle-draw 0.4s 0.1s ease forwards;
}
.ttn-save-check .check-tick {
  fill: none; stroke: var(--primary); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 16; stroke-dashoffset: 16;
  animation: check-tick-draw 0.3s 0.45s ease forwards;
}
@keyframes check-circle-draw { to { stroke-dashoffset: 0; } }
@keyframes check-tick-draw { to { stroke-dashoffset: 0; } }
@keyframes check-fade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Floating TTN input (Material-style) ───────────────── */
.ttn-floating {
  gap: 10px;
}
.ttn-floating-group {
  position: relative;
  flex: 1;
  min-width: 0;
}
.ttn-floating-input {
  width: 100%;
  padding: 12px 0 6px 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: 0.03em;
  outline: none;
  transition: all 0.3s ease;
}
.ttn-floating-input::placeholder {
  color: transparent;
}
.ttn-floating-label {
  position: absolute;
  top: 12px;
  left: 0;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: left top;
  opacity: 0.6;
}
.ttn-floating-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  border-bottom: 1px dotted rgba(255,255,255,0.1);
  transition: all 0.3s ease;
}
/* Float up on focus or has value */
.ttn-floating-input:focus ~ .ttn-floating-label,
.ttn-floating-input:not(:placeholder-shown) ~ .ttn-floating-label {
  transform: translateY(-16px) scale(0.8);
  color: var(--text-tertiary);
  opacity: 1;
}
.ttn-floating-input:focus ~ .ttn-floating-underline {
  border-bottom-color: var(--accent);
  border-bottom-style: solid;
  opacity: 0.5;
}

/* ── Carrier tracking info (NP + UkrPoshta) ────────────── */
.carrier-tracking-info {
  margin-top: 6px;
  padding: 0 0 2px 10px;
  border-left: 2px solid var(--text-tertiary);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.carrier-tracking-info:empty { display: none; }

.ttn-key-name {
  margin-top: 2px;
  padding-left: 10px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-tertiary);
}
/* Цветовые коды вертикальной черты по статусу.
   Семантика: amber = "увага потрібна" (посилка на відділенні, клієнт не забирає);
              cyan = "процес йде" (в дорозі, переміщується). */
.carrier-tracking-info.np-status-new       { border-left-color: var(--text-tertiary); }  /* сірий — створено */
.carrier-tracking-info.np-status-created   { border-left-color: var(--text-tertiary); }
.carrier-tracking-info.np-status-transit   { border-left-color: var(--accent); }         /* cyan — в дорозі */
.carrier-tracking-info.np-status-waiting   { border-left-color: var(--warning); }        /* amber — на відділенні, чекає клієнта */
.carrier-tracking-info.np-status-arrived   { border-left-color: var(--warning); }        /* amber — також "на відділенні" */
.carrier-tracking-info.np-status-received  { border-left-color: var(--primary); }        /* зелений — отримано */
.carrier-tracking-info.np-status-problem   { border-left-color: #fca5a5; }               /* rose — повернення/проблема */
.carrier-tracking-info.np-status-returned  { border-left-color: #fca5a5; }
.np-tracking-status {
  color: var(--text-secondary);
  font-weight: 500;
}
.np-tracking-time {
  color: var(--text-tertiary);
  font-weight: 400;
}
.np-tracking-detail {
  color: var(--text-secondary);
  display: block;
}
/* Дедлайн зберігання / автоповернення / вилучення з поштомату (_npDeadlineLine).
   Колір — за tier (близькість до дедлайну), категорія дає лише іконку та
   акцентний відтінок для urgent/critical (зберігання=амбер, автоповернення=фіолет).
   До 3 днів — нейтрально-сірий чіп; від 1 дня — м'який; завтра/сьогодні — urgent;
   прострочено — critical. */
.np-deadline {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 6px;
  font-size: 12px; margin-top: 4px;
  background: var(--surface); color: var(--text-secondary);
}
.np-deadline i { font-size: 11px; opacity: 0.75; }
.np-deadline--muted   { /* default — нічого не додаємо */ }
.np-deadline--soft    { color: var(--text-primary); background: var(--glass); }
.np-deadline--urgent.np-deadline--storage,
.np-deadline--urgent.np-deadline--postomat   { background: rgba(245, 158, 11, 0.12); color: #fcd34d; }
.np-deadline--urgent.np-deadline--return     { background: rgba(139, 92, 246, 0.12); color: #c4b5fd; }
.np-deadline--critical.np-deadline--storage,
.np-deadline--critical.np-deadline--postomat { background: rgba(239, 68, 68, 0.15); color: #fca5a5; font-weight: 600; }
.np-deadline--critical.np-deadline--return   { background: rgba(139, 92, 246, 0.2);  color: #c4b5fd; font-weight: 600; }
/* Промо-режим редактора доставки: банер «лише адреса» + маркер залоченої служби */
.de-promo-note {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; margin-bottom: 10px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: var(--text-secondary);
  font-size: 11.5px; line-height: 1.45;
}
.de-promo-note i { color: var(--primary); margin-top: 2px; flex: 0 0 auto; }
.de-svc-locked-hint {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.de-svc-locked-hint i { font-size: 9px; }

.np-tracking-money {
  color: var(--text-secondary);
  display: block;
}
.np-money-conflict {
  color: #fca5a5;
  font-weight: 600;
  display: block;
}
.np-money-conflict i {
  margin-right: 4px;
  font-size: 10px;
}
/* Клікабельний конфлікт «замовлення вже оплачено!» → діалог вирішення */
.np-cod-resolve { cursor: pointer; }
.np-cod-resolve .np-cod-resolve-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: .8;
  margin-left: 2px;
}
.np-cod-resolve:hover .np-cod-resolve-link { opacity: 1; }
/* Зворотний бік: їде без наложки, оплату не відмічено (деталі — у tooltip) */
.np-nocod-warn { cursor: help; }
/* Підказка в панелі зміни оплати: стан оплати живе на бейджі «Оплачено» */
.pe-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-tertiary);
}
.pe-hint i { margin-right: 4px; opacity: .7; }
.np-tracking-warning {
  color: #fca5a5;
  display: block;
}
.np-tracking-loading {
  color: var(--text-tertiary);
  font-style: italic;
  animation: npPulse 1.5s ease-in-out infinite;
}
/* Резервуємо місце під трекінг, поки він летить окремим запитом (Іван 2026-07-26:
   картка підростала на ~35px, коли приїжджали рядки статусу, і вся стрічка під
   нею стрибала). 2 рядки (11px × 1.6) — медіана: статус + один деталь-рядок. */
.carrier-tracking-info.np-tracking-pending { min-height: 35px; }
@keyframes npPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.np-tracking-error {
  color: var(--text-tertiary);
  font-style: italic;
}

/* ── Action-oriented tracking (ADR 2026-05 TTN chain tracking) ──────────────
   Загальні токени urgency. Канон-layout — mini-timeline (ex-C, вибір Івана
   2026-07-26); варіанти A/B/D та їхні стилі видалені разом із перемикачем. */
.np-urgency-none   { --np-action-color: var(--primary); }       /* зелений — done */
.np-urgency-info   { --np-action-color: var(--accent); }        /* cyan — info */
.np-urgency-warn   { --np-action-color: var(--warning); }       /* amber — увага */
.np-urgency-urgent { --np-action-color: #fca5a5; }              /* rose — терміново */

/* Action-row базові стилі.
   Розмір шрифту наслідується від .carrier-tracking-info (11px) — щоб action
   виглядав єдиним з рештою картки, не випирав. Виділення робимо через
   font-weight + колір urgency, не через size. */
.np-action-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: inherit;
  line-height: 1.4;
  color: var(--np-action-color, var(--text-secondary));
}
.np-action-row .np-action-label {
  font-size: inherit;
  font-weight: 600;
  flex: 1 1 auto;
}
.np-action-row .np-action-icon i,
.np-action-row > i {
  font-size: inherit;
}
.np-action-row.np-urgency-urgent .np-action-label { font-weight: 700; }

/* Канон-layout — mini-timeline стрілочки */
.np-chain-mini {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--np-action-color, var(--text-secondary));
}
.np-chain-mini-text { letter-spacing: 0.01em; }
.np-chain-mini-check {
  margin-left: 6px;
  color: var(--primary);
  font-weight: 700;
}

/* Chain expand button — text-link style, без пілюлі/обводки.
   Принципово не схоже на іконкову кнопку, щоб око одразу читало як "посилання на деталі". */
.np-chain-expand-btn {
  margin-top: 4px;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 11px;
  color: var(--text-tertiary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
}
.np-chain-expand-btn:hover {
  color: var(--primary-light);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.np-chain-expand-btn i { font-size: 9px; transition: transform 0.15s; }
.np-chain-expand-btn[aria-expanded="true"] i { transform: rotate(180deg); }

.np-chain-timeline {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.025);
  border-radius: 4px;
  font-size: 11px;
}
.np-chain-step {
  display: grid;
  grid-template-columns: 16px 90px 1fr auto;
  gap: 6px;
  align-items: baseline;
  padding: 2px 0;
  color: var(--text-secondary);
}
.np-chain-step--root { color: var(--text-tertiary); }
.np-chain-step--received { color: var(--primary); }
.np-chain-marker { color: var(--text-tertiary); font-weight: 700; }
.np-chain-step--received .np-chain-marker { color: var(--primary); }
.np-chain-relation { font-weight: 600; }
.np-chain-status { color: var(--text-secondary); }
.np-chain-date { color: var(--text-tertiary); font-size: 10px; }

/* UkrPoshta history tooltip icon */
.up-history-icon {
  display: inline-block;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 11px;
  margin-left: 4px;
  transition: color 0.15s;
}
.up-history-icon:hover { color: var(--primary); }

/* UkrPoshta history popup (click-based) */
.up-history-tooltip {
  position: fixed;   /* див. коментар біля .promo-badge-tooltip — інакше стрибає сторінка */
  z-index: 1000000;
  max-width: 360px;
  min-width: 260px;
  max-height: 70vh;
  /* Скрол — усередині .up-history-timeline, а не тут: скролбар на самому
     контейнері зафарбовував заокруглені праві кути (Іван 2026-07-30). */
  overflow: hidden;
  padding: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.up-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-secondary);
  z-index: 1;
}
.up-history-title {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-primary);
}
.up-history-close {
  cursor: pointer;
  font-size: 18px;
  color: var(--text-tertiary);
  line-height: 1;
  padding: 0 2px;
  transition: color 0.15s;
}
.up-history-close:hover { color: var(--text-primary); }
.up-history-timeline {
  padding: 12px 14px;
  max-height: calc(70vh - 42px);   /* 42px ≈ шапка попапа */
  overflow-y: auto;
}
.up-history-timeline { position: relative; }
.up-history-step {
  display: flex;
  gap: 10px;
  padding-bottom: 12px;
  position: relative;
}
.up-history-step:last-child { padding-bottom: 0; }
.up-history-step::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}
.up-history-step:last-child::before { display: none; }
.up-history-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
  margin-top: 3px;
  position: relative;
  z-index: 1;
}
.up-history-step:last-child .up-history-dot {
  background: var(--primary);
  box-shadow: 0 0 6px rgba(234,179,8,0.4);
}
.up-history-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.up-history-event {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
}
.up-history-meta {
  font-size: 11px;
  color: var(--text-tertiary);
}
.up-history-date {
  font-size: 10px;
  color: var(--text-tertiary);
}
.up-history-loading, .up-history-empty {
  color: var(--text-tertiary);
  font-style: italic;
  text-align: center;
  padding: 8px;
}

/* НП «Рух посилки»: та сама розмітка, що UP-історія, але семантика крапок інша —
   кольором лише ПОТОЧНИЙ крок (now), майбутні — порожні й пригашені. Жовту
   крапку last-child з UP-стилю глушимо: останній елемент тут — майбутній
   пункт призначення, а не поточна подія. */
.np-move-tl .up-history-step:last-child .up-history-dot {
  background: var(--border);
  box-shadow: none;
}
.np-move-tl .np-move--now .up-history-dot,
.np-move-tl .np-move--now:last-child .up-history-dot {
  background: var(--primary);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.45);
}
.np-move-tl .np-move--now .up-history-event { color: var(--primary-light); }
.np-move-tl .np-move--future .up-history-dot,
.np-move-tl .np-move--future:last-child .up-history-dot {
  background: transparent;
  border: 1.5px solid var(--border);
}
.np-move-tl .np-move--future .up-history-event {
  color: var(--text-tertiary);
  font-weight: 400;
}

/* Швидкість відправки (hover-only, аналог buyout-rating-row) */
/* Швидкість відправки — РІВНО дзеркало підказки «натисніть, щоб скопіювати»: той самий
   9px / muted / БЕЗ обводки, але НАД номером ТТН (підказка копіювання — під ним).
   Елемент переноситься у .ttn-value скриптом `_relocateSpeed`; тут позиціонуємо
   left:0; bottom:100% (mirror до copy-hint left:0; top:100%) + скидаємо mono-шрифт
   .ttn-value на Inter. Виринає при наведенні на картку / блок доставки. Іван 2026-06-23. */
.shipping-speed-row {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 1px;
  font-size: 9px;
  font-weight: 400;
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: normal;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.order-card:hover .shipping-speed-row,
.delivery-view:hover .shipping-speed-row {
  opacity: 1;
}
.shipping-speed-row i {
  margin-right: 3px;
  font-size: 9px;
}
/* Швидкість відправки. Іконка + префікс «Відправлено за» завжди muted —
   це статистика. Сам термін («2д 2г») фарбуємо лише якщо повільно (>48г),
   щоб око ловило проблемні відправки, а нормальні розчинялись у фоні.
   Іван 2026-06-19. */
.shipping-speed-row,
.shipping-speed-row > i { color: var(--text-tertiary); }
.shipping-speed-value { color: var(--text-tertiary); }
.shipping-speed-value.shipping-speed-slow { color: rgba(252, 165, 165, 0.85); font-weight: 500; }
.shipping-speed-fast, .shipping-speed-medium { /* legacy class hooks — no color */ }

/* ── Client notes ────────────────────────────────────────── */
.client-notes {
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--text-secondary);
  font-style: italic;
  display: flex; align-items: flex-start; gap: 6px;
}
.client-notes-icon {
  color: var(--warning); font-size: 13px; flex-shrink: 0; margin-top: 1px;
}

/* ── Legacy info grid (keep for backward compat) ─────────── */
.order-info {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.info-item {}
.info-label {
  font-size: 11px; font-weight: 600; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px;
  cursor: default; user-select: none;
}
.info-value {
  font-size: 13px; color: var(--text-primary);
}

/* ── Legacy Order items (keep) ────────────────────────────── */
.order-items {
  padding: 14px 18px;
}
.order-items h4 {
  font-size: 11px; font-weight: 600; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 10px;
  cursor: default; user-select: none;
}
.item-list { display: flex; flex-direction: column; gap: 6px; }
.item-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
  transition: var(--transition);
}
.item-row:hover { background: var(--glass); }
.item-name { flex: 1; color: var(--text-primary); }
.item-quantity {
  padding: 2px 8px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  white-space: nowrap;
}
.item-price {
  font-weight: 700; color: var(--primary-light);
  white-space: nowrap;
}

/* ── Vendor selection modal ──────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 8000;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}

.modal-box {
  background: var(--bg-secondary);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  width: min(520px, 95vw);
  max-height: 80vh;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.modal-title {
  font-size: 16px; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-close {
  background: none; border: none; color: var(--text-secondary);
  cursor: pointer; font-size: 18px; padding: 2px 6px; border-radius: 4px;
  transition: var(--transition);
}
.modal-close:hover { color: var(--text-primary); background: var(--glass-hover); }

/* Тема для «голих» полів усередині модалок. Інпути в порталі стилізуються
   по-контекстно (.np-field / .intg-body / ...), тож модалка, що не має цього
   контексту, отримувала білий дефолт браузера. :where() тримає специфічність
   мінімальною (0,0,1) — правило лише підхоплює нестилізовані поля й НІКОЛИ не
   перебиває осмислену стилізацію (клас/inline завжди виграє). checkbox/radio/
   range/color/file свідомо не входять — їм повна-ширина-тёмна-рамка не потрібна. */
:where(.modal-box) input:where([type="text"], [type="email"], [type="tel"], [type="number"], [type="password"], [type="search"], [type="url"], :not([type])),
:where(.modal-box) textarea,
:where(.modal-box) select {
  background: rgba(0,0,0,.22);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .2s;
}
:where(.modal-box) input:where([type="text"], [type="email"], [type="tel"], [type="number"], [type="password"], [type="search"], [type="url"], :not([type])):focus,
:where(.modal-box) textarea:focus,
:where(.modal-box) select:focus {
  border-color: var(--primary);
  outline: none;
}
:where(.modal-box) input::placeholder,
:where(.modal-box) textarea::placeholder {
  color: var(--text-secondary);
  opacity: .5;
}

/* .form-control — використовується лише в SalesDrive-налаштуваннях (3 інпути:
   домен, API-ключ, webhook-URL), але клас ніде не був визначений у CSS →
   білий дефолт браузера на тёмній сторінці. Тёмний бейслайн. */
.form-control {
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .2s;
}
.form-control:focus { border-color: var(--primary); outline: none; }
.form-control::placeholder { color: var(--text-secondary); opacity: .5; }
.form-control[readonly] { color: var(--text-secondary); cursor: default; }

/* Нативні чекбокси/радіо — зелений акцент замість браузерного синього.
   Для кастомних appearance:none чекбоксів властивість ігнорується (безпечно). */
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

.vendor-list {
  overflow-y: auto; max-height: 50vh;
  display: flex; flex-direction: column; gap: 4px;
  padding: 2px 0;
}
.vendor-item {
  padding: 10px 14px; border-radius: var(--radius-sm);
  cursor: pointer; transition: var(--transition);
  border: 1px solid transparent;
}
.vendor-item:hover {
  background: var(--glass-hover);
  border-color: var(--border);
  transform: translateY(-1px);   /* не translateX: у двоколонковій сітці зсув вправо наїжджає на сусіда */
}
.vendor-item h4 {
  font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px;
}
.vendor-item p {
  font-size: 11px; color: var(--text-tertiary);
}
/* Групи у вікні вибору вендора: дроп-кабінети — першими */
.vendor-group { display: flex; flex-direction: column; gap: 4px; }
.vendor-group + .vendor-group { margin-top: 10px; }
.vendor-group-title {
  position: sticky; top: 0; z-index: 1;
  padding: 6px 14px 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-tertiary); background: #0f172a;
}
.vendor-group-count { margin-left: 6px; opacity: .7; font-weight: 600; }
.vendor-group-attn { margin-left: 10px; color: #fcd34d; font-weight: 600; text-transform: none; letter-spacing: 0; }
.vendor-item.is-current { border-color: rgba(16,185,129,.45); background: rgba(16,185,129,.07); }

/* Вікно вибору вендора — крупніше і з бейджами «потребує уваги» (Іван 15.09):
   ~2× ширше за решту модалок (правило локальне, .modal-box інших не чіпаємо),
   групи у дві колонки, рядок = назва/ID ліворуч + клікабельні бейджі праворуч. */
#vendor-modal .modal-box { width: min(1040px, 95vw); max-height: 90vh; }
#vendor-modal .vendor-list { max-height: calc(90vh - 200px); }
.vendor-tools {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12px; color: var(--text-secondary); min-height: 20px;
}
.vendor-tools b { color: var(--text-primary); font-weight: 600; }
.vendor-tools a { color: var(--primary-light); text-decoration: none; }
.vendor-tools a:hover { text-decoration: underline; }
.vendor-tools-sort { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#vendor-modal .vendor-tools select {
  width: auto; padding: 4px 8px; font-size: 12px; border-radius: 6px;
}
#vendor-modal .vendor-group {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px;
}
#vendor-modal .vendor-group-title { grid-column: 1 / -1; }
#vendor-modal .vendor-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0;
}
.vendor-item-main { min-width: 0; }
#vendor-modal .vendor-item h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vendor-item.is-attention { border-color: rgba(245,158,11,.22); }
.vendor-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex-shrink: 0; }
.vendor-badge {
  font-size: 10px; font-weight: 700; line-height: 1.5; padding: 2px 7px; white-space: nowrap;
  border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer;
  transition: filter .15s, border-color .15s;
}
.vendor-badge:hover { filter: brightness(1.25); border-color: currentColor; }
/* Колір — лише за терміновістю (conventions): нові = треба прийняти зараз;
   відмова/зберігання = гроші капають; відгук = вікно виправлення 30 днів. */
.vendor-badge--new { background: rgba(239,68,68,.16); color: #fca5a5; }
.vendor-badge--np  { background: rgba(245,158,11,.16); color: #fcd34d; }
.vendor-badge--rev { background: rgba(244,114,182,.16); color: #f9a8d4; }
.vendor-badge--loading {
  width: 36px; height: 14px; padding: 0; cursor: default;
  background: rgba(148,163,184,.12); animation: vendor-badge-pulse 1.2s ease-in-out infinite;
}
@keyframes vendor-badge-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
@media (max-width: 768px) {
  #vendor-modal .vendor-group { grid-template-columns: 1fr; }
  .vendor-tools { flex-wrap: wrap; }
}

/* ── Toast notifications ─────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex; flex-direction: column-reverse; gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 10px 18px;
  font-size: 13px; color: var(--text-primary);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: auto;
  display: flex; align-items: center; gap: 8px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { border-color: rgba(16,185,129,0.4); color: var(--primary-light); }
.toast.error   { border-color: rgba(239,68,68,0.4); color: #fca5a5; }
.toast.info    { border-color: rgba(6,182,212,0.4); color: #67e8f9; }

/* ── Item composition editing (Phase 3) ────────────────── */

/* Product actions row (under product info) */
.product-actions {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px;
  opacity: 0;
  transition: opacity 0.15s;
}
.product-row:hover .product-actions { opacity: 1; }
.product-actions.editing { opacity: 1; }

/* Quantity control */
.quantity-control {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; background: var(--surface);
}
.quantity-control button {
  width: 26px; height: 26px;
  border: none; background: none;
  color: var(--text-secondary);
  cursor: pointer; font-size: 14px; font-weight: 600;
  font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.quantity-control button:hover:not(:disabled) {
  background: var(--glass-hover); color: var(--text-primary);
}
.quantity-control button:disabled {
  opacity: 0.3; cursor: not-allowed;
}
.quantity-control .qty-value {
  width: 36px; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 3px 0;
  background: none;
}
.quantity-control .qty-value.changed {
  color: var(--primary-light);
}

/* Small action buttons */
.btn-item-action {
  padding: 3px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 500;
  background: none; border: 1px solid var(--border);
  color: var(--text-tertiary);
  cursor: pointer; font-family: inherit;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-item-action:hover:not(:disabled) {
  color: var(--text-secondary);
  border-color: var(--border-light);
  background: var(--glass);
}
.btn-item-action.danger {
  color: rgba(252, 165, 165, 0.6);
  border-color: rgba(239, 68, 68, 0.15);
}
.btn-item-action.danger:hover:not(:disabled) {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
}
.btn-item-action:disabled {
  opacity: 0.3; cursor: not-allowed;
}

/* Price preview (old → new) */
.price-preview {
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
}
.price-old {
  text-decoration: line-through;
  opacity: 0.5;
  font-size: 13px;
  color: var(--text-tertiary);
}
.price-arrow {
  font-size: 11px;
  color: var(--text-tertiary);
}
.price-new {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary-light);
}

/* Confirm/cancel row for pending changes */
.confirm-actions {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px;
}
.btn-confirm-save {
  padding: 4px 12px; border-radius: 5px;
  font-size: 11px; font-weight: 600;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; border: none; cursor: pointer;
  font-family: inherit; transition: var(--transition);
}
.btn-confirm-save:hover { box-shadow: 0 2px 8px rgba(16,185,129,0.3); }
.btn-confirm-save:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-confirm-cancel {
  padding: 4px 10px; border-radius: 5px;
  font-size: 11px; font-weight: 500;
  background: none; border: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer;
  font-family: inherit; transition: var(--transition);
}
.btn-confirm-cancel:hover { background: var(--glass); color: var(--text-primary); }

/* Deleted item (status 102) */
.product-row.item-deleted {
  opacity: 0.35;
  pointer-events: none;
}
.product-row.item-deleted .product-name {
  text-decoration: line-through;
}
.product-row.item-deleted .product-total-price {
  text-decoration: line-through;
  color: var(--text-tertiary);
}

/* Replace modal */
.replace-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}
.replace-modal-overlay.open {
  display: flex;
}
.replace-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  width: min(560px, 95vw);
  max-height: 80vh;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.replace-modal-header {
  display: flex; align-items: center; justify-content: space-between;
}
.replace-modal-title {
  font-size: 15px; font-weight: 700; color: var(--text-primary);
}
.replace-modal-close {
  background: none; border: none; color: var(--text-secondary);
  cursor: pointer; font-size: 18px; padding: 2px 6px; border-radius: 4px;
  transition: var(--transition);
}
.replace-modal-close:hover { color: var(--text-primary); background: var(--glass-hover); }

.replace-search-input {
  padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-primary); font-size: 13px; font-family: inherit;
  outline: none; width: 100%;
  transition: var(--transition);
}
.replace-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}
.replace-search-input::placeholder { color: var(--text-tertiary); }

.replace-results {
  overflow-y: auto; max-height: 35vh;
  display: flex; flex-direction: column; gap: 4px;
}
.replace-result-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  cursor: pointer; transition: var(--transition);
  border: 1px solid transparent;
}
.replace-result-item:hover {
  background: var(--glass-hover);
  border-color: var(--border);
}
.replace-result-item.selected {
  background: rgba(16,185,129,0.08);
  border-color: rgba(16,185,129,0.3);
}
.replace-result-img {
  width: 40px; height: 40px; border-radius: 4px;
  object-fit: cover; background: var(--bg-primary);
  border: 1px solid var(--border); flex-shrink: 0;
}
.replace-result-info { flex: 1; min-width: 0; }
.replace-result-name {
  font-size: 12px; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.replace-result-meta {
  font-size: 11px; color: var(--text-tertiary);
}
.replace-result-price-line {
  color: var(--primary-light); font-weight: 600;
}

.replace-preview {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px; color: var(--text-secondary);
  display: flex; flex-direction: column; gap: 6px;
}
.replace-preview-row {
  display: flex; align-items: center; justify-content: space-between;
}
.replace-qty-control {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; background: var(--bg-secondary);
}
.replace-qty-control button {
  width: 28px; height: 28px;
  border: none; background: none;
  color: var(--text-secondary); cursor: pointer;
  font-size: 14px; font-weight: 600; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.replace-qty-control button:hover { background: var(--glass-hover); color: var(--text-primary); }
.replace-qty-control .qty-input {
  width: 40px; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  background: none; padding: 4px 0; outline: none;
  font-family: inherit;
}

.replace-modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding-top: 8px; border-top: 1px solid var(--border);
}

/* ── Status confirm modal (cancel variants) ─────────────── */
.sc-modal { width: min(460px, 92vw); gap: 16px; }
.sc-main {
  font-size: 13px; color: var(--text-secondary); line-height: 1.5;
}
.sc-main strong { color: var(--text-primary); }
.sc-hint {
  font-size: 13px; color: var(--text-secondary); line-height: 1.55;
}
.sc-contact-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.sc-phone {
  font-size: 17px; font-weight: 600; color: var(--text-primary);
  letter-spacing: 0.3px;
}
.sc-msg-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.sc-msg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  border: none; cursor: pointer;
  font-size: 12px; font-weight: 600;
  color: #fff; font-family: inherit;
  transition: transform 80ms ease, filter 120ms ease;
}
.sc-msg-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.sc-msg-btn i { font-size: 14px; }
.sc-msg-viber    { background: rgba(115,96,242,0.85);  box-shadow: 0 2px 6px rgba(115,96,242,0.3); }
.sc-msg-telegram { background: rgba(44,165,224,0.85);  box-shadow: 0 2px 6px rgba(44,165,224,0.3); }
.sc-msg-whatsapp { background: rgba(37,211,102,0.85);  box-shadow: 0 2px 6px rgba(37,211,102,0.3); }
/* Prom-чат — біла пілюля з логотипом, як .btn-chat на картці */
.sc-msg-promchat { background: #fff; color: #1f2430; box-shadow: 0 2px 6px rgba(0,0,0,0.28); }
.sc-msg-promchat img { width: 15px; height: 15px; object-fit: contain; }

.sc-prom-warning {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px;
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.35);
  border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--text-primary); line-height: 1.5;
}
.sc-prom-warning i { color: #f59e0b; font-size: 15px; margin-top: 2px; flex-shrink: 0; }
.sc-prom-warning strong { color: #fbbf24; }

.sc-btn-primary { background: #f59e0b; color: #000; font-weight: 600; }
.sc-btn-primary:hover { background: #fbbf24; }
.sc-btn-danger  { background: #ef4444; color: #fff; font-weight: 600; }
.sc-btn-danger:hover  { background: #dc2626; }

/* ── TTN validation warnings ─────────────────────────────── */
.ttn-warnings-body { max-height: 60vh; overflow-y: auto; }
.ttn-warning-item { padding: 10px 0; }
.ttn-warning-item + .ttn-warning-item { border-top: 1px solid var(--border); }
.ttn-warning-title { font-weight: 600; margin-bottom: 4px; font-size: 13px; }
.ttn-warning-title i { margin-right: 6px; }
.ttn-warning-message { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.severity-info .ttn-warning-title { color: var(--accent); }
.severity-warning .ttn-warning-title { color: #f59e0b; }

/* Address comparison */
.addr-compare { margin-top: 6px; font-size: 12px; }
.addr-row { margin: 4px 0; }
.addr-label { color: var(--text-tertiary); margin-right: 6px; }
.addr-old { color: var(--text-secondary); text-decoration: line-through; opacity: 0.7; }
.addr-new { color: var(--text-primary); }
.addr-detail { margin: 2px 0 2px 12px; }
.addr-mismatch .addr-label { color: #fca5a5; }

/* ── Login page ──────────────────────────────────────────── */
.login-page {
  min-height: 100dvh;   /* dvh, а не vh: на мобільних vh не враховує панель браузера */
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: #050810;
  position: relative; overflow: hidden;
  isolation: isolate;
}
/* Запасне тло під WebGL-канвасом. Рідинна анімація (login-fluid.js) мовчки
   вимикається, коли WebGL недоступний — а це не екзотика: вимкнене апаратне
   прискорення, GPU у блоклисті драйверів, resistFingerprinting у Firefox.
   Через це «розводи» в одних браузерах були, в інших ні (Іван 2026-07-29), і
   сторінка ставала плоскою заливкою. Тепер градієнт живе завжди, а канвас лягає
   зверху. Дешево: композитинг без перерахунку макета. */
.login-page::before {
  content: '';
  position: absolute; inset: -25%;
  z-index: 0;
  background:
    radial-gradient(38% 45% at 22% 28%, rgba(16,185,129,.16), transparent 70%),
    radial-gradient(34% 40% at 78% 24%, rgba(6,182,212,.13), transparent 70%),
    radial-gradient(45% 50% at 58% 82%, rgba(99,102,241,.12), transparent 70%);
  filter: blur(40px);
  animation: loginAurora 26s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes loginAurora {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .login-page::before { animation: none; }
}

/* Підказка про вбудований браузер застосунку */
.login-inapp {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.30);
}
.login-inapp-title { font-size: 13px; font-weight: 700; color: var(--warning); margin-bottom: 6px; }
.login-inapp-text { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.login-inapp-btn {
  margin-top: 10px; padding: 6px 12px;
  background: none; border: 1px solid rgba(245,158,11,.4); border-radius: 8px;
  color: var(--warning); font-size: 12px; font-family: inherit; cursor: pointer;
}
.login-inapp-url {
  margin-top: 10px; padding: 8px 10px; border-radius: 8px;
  background: rgba(0,0,0,.25); font-size: 11px; word-break: break-all;
  color: var(--text-secondary); user-select: all;
}

/* WebGL fluid canvas — full viewport, behind everything */
.login-fluid {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 0;
  background: transparent;
  pointer-events: none;
}

/* ── Login card ───────────────────────────────────────────── */
.login-card {
  width: 100%; max-width: 420px;
  background: rgba(10, 15, 29, 0.68);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative; z-index: 3;
}

.login-logo {
  padding: 32px 36px 28px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
/* Header brand logo — F09 Sora Extrabold lockup from Bagspace Design System.
   BAGSPACE. on top, MARKETPLACE caption with thin rules on either side.
   Compact-22 specimen: 22px wordmark + 7px caption. */
.bs-logo {
  display: inline-flex; flex-direction: column; align-items: center;
  line-height: 0.86; user-select: none;
}
.bs-logo__row {
  display: flex; align-items: baseline; line-height: 1;
  font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800; font-size: 22px; letter-spacing: -0.045em;
}
.bs-logo__bag   { color: var(--text-primary); }
.bs-logo__space { color: var(--primary-light); }
.bs-logo__caption {
  margin-top: 3px; align-self: stretch;
  display: flex; align-items: center; gap: 8px;
  font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600; font-size: 7px; letter-spacing: 0.42em;
  color: var(--text-tertiary); text-transform: uppercase;
}
.bs-logo__caption::before,
.bs-logo__caption::after {
  content: ''; flex: 1; height: 1px; background: var(--border); min-width: 10px;
}
/* Header · 34px specimen — used on login card. */
.bs-logo--lg { margin: 0 auto 10px; }
.bs-logo--lg .bs-logo__row     { font-size: 34px; }
.bs-logo--lg .bs-logo__caption { font-size: 9px; margin-top: 5px; gap: 10px; }

.login-logo-subtitle {
  margin-top: 12px;
  font-size: 13px; color: var(--text-secondary);
}

.login-body {
  padding: 32px 36px;
  display: flex; flex-direction: column; gap: 20px;
}

.login-welcome h2 {
  font-size: 17px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px;
}
.login-welcome p {
  font-size: 13px; color: var(--text-secondary); line-height: 1.6;
}

/* ── Google button (scoped to login page) ─────────────────── */
.login-page .google-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 14px 22px;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.16) 0%,
      rgba(255,255,255,0.06) 50%,
      rgba(255,255,255,0.12) 100%);
  color: #fff; font-size: 14px; font-weight: 600; font-family: inherit;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 10px 32px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.18);
  transition:
    transform 0.25s cubic-bezier(0.4,0,0.2,1),
    box-shadow 0.25s cubic-bezier(0.4,0,0.2,1),
    border-color 0.25s ease;
}
.login-page .google-btn .google-btn-content {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 12px;
}
.login-page .google-btn .google-btn-shine {
  position: absolute; top: 0; left: -120%;
  width: 70%; height: 100%;
  background: linear-gradient(110deg,
    transparent 20%,
    rgba(255,255,255,0.55) 50%,
    transparent 80%);
  filter: blur(6px);
  z-index: 1;
  pointer-events: none;
  animation: loginBtnShine 3.8s ease-in-out infinite;
}
@keyframes loginBtnShine {
  0%   { left: -120%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}
.login-page .google-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.36);
  box-shadow:
    0 18px 48px rgba(0,0,0,0.50),
    0 0 0 4px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.36),
    inset 0 -1px 0 rgba(0,0,0,0.18);
}
.login-page .google-btn:active {
  transform: translateY(0) scale(0.99);
}
.login-page .google-btn:disabled {
  opacity: 0.55; cursor: not-allowed; transform: none;
  box-shadow: 0 6px 16px rgba(0,0,0,0.30);
}
.login-page .google-btn:disabled .google-btn-shine { animation: none; opacity: 0; }
.login-page .google-btn svg { flex-shrink: 0; }

.login-error {
  padding: 12px 16px; border-radius: var(--radius-sm);
  background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.32);
  color: #fca5a5; font-size: 13px; line-height: 1.5;
}

.login-loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--text-secondary); font-size: 13px;
}
.login-spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(16,185,129,0.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  flex-shrink: 0;
}

.login-footer {
  padding: 16px 36px;
  border-top: 1px solid var(--border);
  text-align: center;
  position: relative; z-index: 3;
}
.login-footer p {
  font-size: 12px; color: var(--text-tertiary);
}
.login-footer a {
  color: var(--primary-light); text-decoration: none;
}
.login-footer a:hover { text-decoration: underline; }

/* Honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .login-page .google-btn .google-btn-shine { animation: none !important; }
}

/* ── Вузький екран: нижня панель балансу ──────────────────
   Панель `position:fixed` з flex-wrap:nowrap. На телефоні JS робить її на всю
   ширину вікна, але вміст (лічильники + кнопки) у рядок не влазить — і кнопка
   «Замовити розрахунок» опинялась ЗА краєм панелі, дотягнутись до неї було
   неможливо взагалі (скарга Івана 2026-07-29). Дозволяємо переноси й віддаємо
   кнопкам власний рядок на всю ширину. */
@media (max-width: 768px) {
  #balance-section .balance-selection-bar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
  }
  #balance-section .balance-selection-bar .balance-selection-info { flex: 1 1 100%; font-size: 13px; }
  #balance-section .balance-selection-bar .balance-selection-actions { flex: 1 1 100%; display: flex; gap: 8px; }
  #balance-section .balance-selection-bar .balance-selection-actions > * { flex: 1 1 auto; justify-content: center; }
}

/* ── Вузький екран: шапка картки у два ряди ───────────────
   Статус має white-space:nowrap і не стискається, тож довга назва («Передано в
   службу доставки» — 201px із 382 доступних) видавлювала ліву колонку: дата
   ламалась на 2-3 рядки, а сам статус вилазив за межі картки. Дозволяємо шапці
   переносити статус на власний рядок, дату тримаємо в один. */
@media (max-width: 560px) {
  .order-header { flex-wrap: wrap; }
  .order-header-left { min-width: 0; flex: 1 1 auto; }
  .status-wrapper { flex: 0 1 auto; min-width: 0; }
  .order-date { white-space: nowrap; }
}

/* ── Responsive ──────────────────────────────────────────── */
/* 1050, а не 900: до 768px сайдбар — шухляда й контент отримує все вікно, а вище
   він забирає 260px. Тобто на вікні 900-1050px під картку лишалось ~590px, які
   ділились на 1fr + 360px — праву колонку тиснуло до нечитабельного. Перемикаємось
   на один стовпчик раніше, ще до того як стане тісно. */
@media (max-width: 1050px) {
  .order-body { grid-template-columns: 1fr; }
  .order-body-left { border-bottom: 1px solid var(--border); }
  .order-body-right::before { display: none; }
}
@media (max-width: 768px) {
  .user-name { display: none; }
  /* Баланс, ім'я і «Вийти» живуть у сайдбарі — на мобільному вони дублювались у
     шапці й розпирали її (скарга Івана 2026-07-29). Шухляда відкривається
     гамбургером, тож нічого не втрачається. */
  #header-balance-chip, #logout-btn, .user-avatar { display: none !important; }
  .header { padding: 0 16px; gap: 10px; }
  .header-stats { gap: 6px; }
  .stat-chip { padding: 3px 8px; font-size: 11px; }
  .main-content { padding: 16px 12px; }
  .filter-bar { padding: 8px 12px; }
  .filter-input { min-width: 160px; }
  .order-info { grid-template-columns: 1fr 1fr; }
  .modal-box { padding: 20px 18px; }
  .admin-banner { gap: 8px; padding: 8px 16px; }
  .login-card { max-width: 100%; }
  .login-logo, .login-body { padding: 24px 20px; }
  .login-footer { padding: 16px 20px; }

  /* Sidebar mobile */
  .sidebar-toggle { display: flex; }
  .sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    width: 260px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 200;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    top: 60px;
    background: rgba(0,0,0,0.5);
    z-index: 150;
    display: none;
  }
  .sidebar-overlay.open { display: block; }
}
@media (max-width: 480px) {
  .header-stats .stat-chip.chip-vendor { display: none; }
  .order-info { grid-template-columns: 1fr; }
  .item-row { flex-wrap: wrap; }
}

/* ── Phone hover actions — deck spread animation ──────── */
.phone-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: default;
  user-select: none;
}

.phone-text {
  color: var(--text-primary);
  white-space: nowrap;
}
/* підказка й курсор — від .cp (клік копіює +380…) */

/* ── Buyout rating row (Green API) ───────────────── */
.buyout-rating-row {
  height: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s;
  cursor: default;
  overflow: hidden;
}
.order-card:hover .buyout-rating-row.has-data,
#order-detail-content .buyout-rating-row.has-data {
  opacity: 1;
}
.buyout-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.buyout-good {
  background: rgba(16, 185, 129, 0.18);
  color: #10b981;
}
.buyout-mid {
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
}
.buyout-bad {
  background: rgba(239, 68, 68, 0.18);
  color: #ef4444;
}
/* лише Prom, без річної активності: не оцінка, а лічильник — нейтральний сірий */
.buyout-none {
  background: rgba(148, 163, 184, 0.16);
  color: var(--text-secondary);
}
/* прапорець Prom «ненадійний покупець» біля ПІБ; наведення — той самий тултіп рейтингу */
.client-warn {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  color: rgba(239, 68, 68, 0.55);   /* приглушений: сигнал, не сирена (Іван 15.09) */
  font-size: 12px;
  cursor: help;
}
.client-warn:hover { color: var(--danger); }
.buyout-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.buyout-meta i {
  font-size: 10px;
}
.buyout-meta .fa-thumbs-up { color: var(--primary); }
.buyout-meta .fa-thumbs-down { color: var(--danger); }
.buyout-feedback-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.08);
  color: rgba(239, 68, 68, 0.65);
  font-weight: 500;
}

/* ── Copy tooltip ────────────────────────────────── */
.copy-tooltip {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(16,185,129,0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.copy-tooltip-value {
  font-size: 10px;
  opacity: 0.8;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  letter-spacing: 0.02em;
}

.phone-actions {
  display: flex;
  gap: 4px;
  pointer-events: none;
}

/* Pure CSS :hover — JS-клас більше не потрібен */
.phone-wrapper:hover .phone-actions {
  pointer-events: all;
}

/*
 * Кнопки: прозорі й складені в стопку за замовчуванням.
 * Вихід (mouseleave): всі колапсують разом за 60ms.
 */
.action-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #fff;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 60ms ease-in, transform 60ms ease-in;
}

/* Стартові позиції: всі "складені" під першою кнопкою */
.action-btn:nth-child(1) { transform: translateX(0); }
.action-btn:nth-child(2) { transform: translateX(-26px); }
.action-btn:nth-child(3) { transform: translateX(-52px); }
.action-btn:nth-child(4) { transform: translateX(-78px); }
.action-btn:nth-child(5) { transform: translateX(-104px); }
.action-btn:nth-child(6) { transform: translateX(-130px); }

/* Hover: стопка "розлітається", вхід — 80ms зі стагером */
.phone-wrapper:hover .action-btn {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 80ms ease-out, transform 80ms ease-out;
}

/* Стагер — 15ms між картами */
.phone-wrapper:hover .action-btn:nth-child(1) { transition-delay:  0ms; }
.phone-wrapper:hover .action-btn:nth-child(2) { transition-delay: 15ms; }
.phone-wrapper:hover .action-btn:nth-child(3) { transition-delay: 30ms; }
.phone-wrapper:hover .action-btn:nth-child(4) { transition-delay: 45ms; }
.phone-wrapper:hover .action-btn:nth-child(5) { transition-delay: 60ms; }
.phone-wrapper:hover .action-btn:nth-child(6) { transition-delay: 75ms; }

/* Scale при наведенні на конкретну кнопку */
.phone-wrapper:hover .action-btn:hover {
  transform: scale(1.15);
  transition: transform 80ms ease;
  transition-delay: 0ms;
}

.btn-call     { background: rgba(16,185,129,0.80);  box-shadow: 0 2px 6px rgba(16,185,129,0.25); }
.btn-viber    { background: rgba(115,96,242,0.80);  box-shadow: 0 2px 6px rgba(115,96,242,0.25); }
.btn-telegram { background: rgba(44,165,224,0.80);  box-shadow: 0 2px 6px rgba(44,165,224,0.25); }
.btn-whatsapp { background: rgba(37,211,102,0.80);  box-shadow: 0 2px 6px rgba(37,211,102,0.25); }
.btn-search-client { background: rgba(148,163,184,0.60); box-shadow: 0 2px 6px rgba(148,163,184,0.2); position: relative; }
.btn-chat     { background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.28); }
.btn-chat img { width: 17px; height: 17px; object-fit: contain; }
.client-orders-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: var(--primary, #10b981); color: #04130c;
  font-size: 9px; font-weight: 800; line-height: 15px; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

/* ── Pagination ─────────────────────────────────── */
#pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding: 4px 0;
}

.pagination-info {
    color: var(--text-secondary);
    font-size: 13px;
}

.pagination-controls {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.page-btn:hover:not(:disabled):not(.active) {
    background: rgba(16,185,129,0.12);
    border-color: rgba(16,185,129,0.35);
    color: var(--text-primary);
}

.page-btn.active {
    background: rgba(16,185,129,0.18);
    border-color: rgba(16,185,129,0.55);
    color: #10b981;
    font-weight: 600;
    cursor: default;
}

.page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.page-dots {
    color: var(--text-secondary);
    font-size: 13px;
    padding: 0 2px;
    line-height: 32px;
}

/* ── Order Detail Page ──────────────────────────────────── */

.order-detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.order-detail-header .section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
}
.btn-back:hover {
    color: var(--text-primary);
    border-color: var(--primary);
    background: rgba(16, 185, 129, 0.05);
}

#order-detail-content .order-card {
    max-width: none;
}

/* ═══════════════════════════════════════════════════════
   PRODUCTS CATALOG
   ═══════════════════════════════════════════════════════ */

/* ── Products table ──────────────────────────────────── */
.products-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 4px;
}
.products-table thead th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    padding: 6px 12px;
    text-align: left;
    white-space: nowrap;
    user-select: none;
}
.products-table thead th:first-child { padding-left: 14px; }

.products-table tbody tr {
    background: rgba(30,41,59,0.75);
    backdrop-filter: blur(16px);
    cursor: pointer;
    transition: box-shadow 0.2s ease, background 0.2s ease;
}
.products-table tbody tr:hover {
    background: rgba(30,41,59,0.95);
    box-shadow: 0 0 24px rgba(16,185,129,0.10);
}
.products-table tbody td {
    padding: 10px 12px;
    font-size: 13px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.products-table tbody td:first-child {
    border-left: 1px solid var(--border);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    padding-left: 14px;
}
.products-table tbody td:last-child {
    border-right: 1px solid var(--border);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Thumbnail in table */
.product-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.product-thumb-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 18px;
}

/* Product name in table */
.product-table-name {
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.4;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.product-table-name a {
    color: inherit;
    text-decoration: none;
}
.product-table-name a:hover {
    color: var(--primary-light);
}
.product-table-code {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

/* Status badge */
.product-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.product-status-badge.active {
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.25);
    color: var(--primary-light);
}
.product-status-badge.inactive {
    background: rgba(100,116,139,0.12);
    border: 1px solid rgba(100,116,139,0.25);
    color: var(--text-tertiary);
}

/* Price in table */
.product-table-price {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}
.product-table-commission {
    font-size: 11px;
    color: var(--text-tertiary);
}
.product-table-date {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ── Product Detail Page ─────────────────────────────── */
.product-detail-layout {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 28px;
    margin-top: 16px;
}
.product-gallery {
    position: sticky;
    top: 20px;
    align-self: start;
}
.product-gallery-main {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.product-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.product-gallery-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.product-gallery-thumbs img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: opacity 0.15s, border-color 0.15s;
}
.product-gallery-thumbs img:hover {
    opacity: 0.85;
}
.product-gallery-thumbs img.active {
    border-color: var(--primary);
    opacity: 1;
}
.product-gallery-no-image {
    font-size: 64px;
    color: var(--text-tertiary);
    opacity: 0.3;
}

/* Info section */
.product-detail-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.product-detail-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
}
.product-detail-title-uk {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.product-info-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    font-size: 13px;
}
.product-info-label {
    color: var(--text-tertiary);
    font-weight: 500;
    white-space: nowrap;
}
.product-info-value {
    color: var(--text-primary);
    word-break: break-word;
}
.product-info-link {
    color: var(--text-primary); text-decoration: none; cursor: pointer;
    transition: color 0.2s;
}
.product-info-link i { font-size: 10px; color: var(--text-tertiary); margin-left: 4px; transition: color 0.2s; }
.product-info-link:hover { color: var(--primary); }
.product-info-link:hover i { color: var(--primary); }

.product-detail-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-light);
}
.product-detail-oldprice {
    font-size: 16px;
    color: var(--text-tertiary);
    text-decoration: line-through;
    margin-left: 10px;
}

/* Disclaimer */
.product-disclaimer {
    background: rgba(234,179,8,0.08);
    border: 1px solid rgba(234,179,8,0.25);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    color: #fbbf24;
    font-size: 13px;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.product-disclaimer i {
    margin-top: 2px;
    flex-shrink: 0;
}

/* Source info block */
.product-source-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 13px;
}
.product-source-block .source-label {
    color: var(--text-tertiary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

/* Params table */
.product-params-section {
    margin-top: 8px;
}
.product-params-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.product-params-table {
    width: 100%;
    border-collapse: collapse;
}
.product-params-table tr {
    transition: background 0.12s ease;
}
.product-params-table tr:hover {
    background: rgba(255,255,255,0.04);
}
.product-params-table td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.product-params-table td:first-child {
    color: var(--text-tertiary);
    font-weight: 500;
    width: 200px;
    white-space: nowrap;
}
.product-params-table td:last-child {
    color: var(--text-primary);
}
.product-params-table tr:last-child td {
    border-bottom: none;
}

/* Link button */
.btn-product-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    font-family: inherit;
}
.btn-product-link:hover {
    color: var(--primary-light);
    border-color: rgba(16,185,129,0.4);
    background: rgba(16,185,129,0.05);
}

/* ── Vendor Files page ───────────────────────────────── */
.files-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.file-card {
    background: rgba(30,41,59,0.75);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    transition: box-shadow 0.2s ease;
}
.file-card:hover {
    box-shadow: 0 0 20px rgba(16,185,129,0.08);
}
.file-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.file-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.file-card-active-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 600;
}
.file-card-active-badge.active {
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.25);
    color: var(--primary-light);
}
.file-card-active-badge.inactive {
    background: rgba(100,116,139,0.12);
    border: 1px solid rgba(100,116,139,0.25);
    color: var(--text-tertiary);
}
.file-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.file-card-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}
.file-card-url {
    word-break: break-all;
    font-size: 12px;
    color: var(--text-tertiary);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    background: var(--surface);
    padding: 6px 10px;
    border-radius: 4px;
    margin-top: 6px;
}

/* Category clickable link in table */
.product-table-category {
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s;
    border-bottom: 1px dotted transparent;
}
.product-table-category:hover {
    color: var(--primary-light);
    border-bottom-color: var(--primary-light);
}

/* Products pagination — reuse #pagination styles */
#products-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding: 4px 0;
}

/* ── Lightbox (fullscreen image viewer) ──────────────── */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.92);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.lightbox-overlay.open {
    opacity: 1;
}
.lightbox-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(0,0,0,0.5);
    flex-shrink: 0;
    z-index: 1;
}
.lightbox-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lightbox-counter {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.lightbox-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.lightbox-close:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}
.lightbox-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    min-height: 0;
}
.lightbox-img-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100% - 120px);
    max-height: 100%;
    padding: 20px 0;
}
.lightbox-img {
    max-width: 100%;
    max-height: calc(100vh - 100px);
    object-fit: contain;
    border-radius: 4px;
    user-select: none;
    -webkit-user-drag: none;
}
.lightbox-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.4);
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    z-index: 2;
}
.lightbox-nav:hover {
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.05);
}
.lightbox-prev {
    left: 0;
    border-radius: 0 8px 8px 0;
}
.lightbox-next {
    right: 0;
    border-radius: 8px 0 0 8px;
}

/* ── Responsive for products ──────────────────────────── */
@media (max-width: 900px) {
    .product-detail-layout {
        grid-template-columns: 1fr;
    }
    .product-gallery {
        position: static;
    }
    .product-gallery-main {
        max-width: 400px;
    }
}
@media (max-width: 768px) {
    .products-table thead { display: none; }
    /* Явна сітка «фото · решта» замість flex-wrap. Було: комірки переносились як
       вийде, тож наявність і дата стрибали з рядка в рядок залежно від довжини
       назви — картки «танцювали» (Іван 2026-07-29). Тепер позиція кожної комірки
       фіксована, і фото можна дати нормальний розмір: місця на телефоні вдосталь. */
    .products-table tbody tr {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        align-items: start;
        column-gap: 12px;
        row-gap: 3px;
        padding: 12px 14px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        margin-bottom: 6px;
    }
    .products-table tbody td {
        border: none;
        padding: 0;
        grid-column: 2;          /* усе, крім фото, — у праву колонку, по рядку на комірку */
        min-width: 0;
    }
    /* ⚠️ border/radius/padding треба гасити САМЕ на :first-child і :last-child:
       базові правила там специфічніші за загальне `td`, тож лишався border-left
       (та сама «зайва рамка») і padding-left:14px, який зсував фото праворуч —
       воно вилазило з 96px-колонки й наповзало на назву (регресія 2026-07-29). */
    .products-table tbody td:first-child {
        grid-column: 1;
        grid-row: 1 / span 4;    /* фото тримає ліву колонку на висоту картки */
        align-self: start;
        border: none;
        border-radius: 0;
        padding: 0;
    }
    .products-table tbody td:last-child { border: none; border-radius: 0; padding: 0; }
    /* Наявність і дата — в один рядок: разом вони короткі, а окремо марно їдять висоту */
    .products-table tbody td:nth-child(5) { grid-row: 4; align-self: center; }
    .products-table tbody td:nth-child(6) { grid-row: 4; grid-column: 2; justify-self: end; align-self: center; }
    .products-table tbody .product-thumb,
    .products-table tbody .product-thumb-placeholder {
        width: 96px; height: 96px; border-radius: 10px;
    }
    .product-table-name { max-width: none; }
    .product-info-grid { grid-template-columns: 1fr; }
    .product-params-table td:first-child { width: auto; }
}

/* ── Profile settings ────────────────────────────────────── */
.profile-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 28px;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.profile-photo-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.profile-photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--glass-border);
}
.profile-photo-hint {
    font-size: 12px;
    color: var(--text-dim);
}
.profile-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.profile-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--text-dim);
    font-weight: 500;
}
.profile-input {
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}
.profile-input:focus {
    border-color: var(--accent);
}
.profile-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Delivery & Payment Settings ──────────────────────────── */
.ds-loading, .ds-error {
  color: var(--text-secondary); padding: 40px; text-align: center; font-size: 14px;
}
.ds-grid {
  display: flex; flex-direction: column; gap: 10px; max-width: 720px;
}
.ds-card {
  background: rgba(15,23,42,0.95); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  transition: border-color 0.25s, box-shadow 0.25s;
  position: relative;
}
.ds-card.ds-active {
  border-color: rgba(16,185,129,0.3);
  background: rgba(15,23,42,0.97);
}
.ds-card:has(.ds-city-dropdown[style*="block"]) {
  z-index: 50;
}
/* Header */
.ds-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; cursor: default;
}
.ds-logo {
  width: 24px; height: 24px; object-fit: contain; flex-shrink: 0;
  opacity: 0.55; filter: grayscale(0.3);
  transition: opacity 0.2s;
}
.ds-card.ds-active .ds-logo { opacity: 0.75; filter: grayscale(0); }
.ds-logo-placeholder {
  width: 26px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); font-size: 16px;
}
.ds-name { font-size: 15px; font-weight: 600; color: var(--text-primary); flex: 1; }
.ds-saving { color: var(--accent); font-size: 11px; opacity: 0.8; }
/* Toggle switch */
.ds-switch {
  position: relative; width: 40px; height: 22px; flex-shrink: 0;
}
.ds-switch input { opacity: 0; width: 0; height: 0; }
.ds-switch-track {
  position: absolute; inset: 0; border-radius: 11px; cursor: pointer;
  background: rgba(255,255,255,0.08); border: 1px solid var(--glass-border);
  transition: background 0.2s, border-color 0.2s;
}
.ds-switch-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-tertiary);
  transition: transform 0.2s, background 0.2s;
}
.ds-switch input:checked + .ds-switch-track {
  background: rgba(16,185,129,0.25); border-color: rgba(16,185,129,0.4);
}
.ds-switch input:checked + .ds-switch-track::after {
  transform: translateX(18px); background: var(--primary);
}
/* Body (payments) */
.ds-body {
  padding: 0 18px 16px 58px; /* 28 logo + 12 gap + 18 pad */
}
.ds-divider {
  height: 1px; background: var(--glass-border); margin: 0 18px;
}
.ds-payment-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  flex-wrap: wrap;
}
.ds-pay-toggle {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  width: 190px; flex-shrink: 0; font-size: 13px; color: rgba(148,163,184,0.35);
  transition: color 0.2s;
}
.ds-pay-toggle.ds-pay-on { color: var(--text-primary); }
.ds-pay-switch {
  position: relative; width: 32px; height: 17px; flex-shrink: 0;
}
.ds-pay-switch input { opacity: 0; width: 0; height: 0; }
.ds-pay-switch-track {
  position: absolute; inset: 0; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,0.08); border: none;
  transition: background 0.2s;
}
.ds-pay-switch-track::after {
  content: ''; position: absolute; top: 2.5px; left: 2.5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: transform 0.2s, background 0.2s;
}
.ds-pay-switch input:checked + .ds-pay-switch-track {
  background: rgba(16,185,129,0.15);
}
.ds-pay-switch input:checked + .ds-pay-switch-track::after {
  transform: translateX(15px); background: rgba(16,185,129,0.7);
}
.ds-payment-row.ds-pay-locked { opacity: 0.5; cursor: not-allowed; }
.ds-payment-row.ds-pay-locked .ds-pay-switch { pointer-events: none; }
.ds-pay-fields {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ds-field-sm {
  display: flex; align-items: center; gap: 3px;
  font-size: 11px; color: var(--text-tertiary);
}
.ds-input-sm {
  width: 60px; padding: 2px 0; font-size: 12px;
  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.12);
  border-radius: 0; color: var(--text-primary); outline: none;
  transition: border-color 0.2s;
  text-align: center;
}
.ds-input-sm:focus { border-bottom-color: var(--accent); }
.ds-input-comment {
  padding: 2px 0; font-size: 12px; flex: 1; min-width: 80px; max-width: 220px;
  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.12);
  border-radius: 0; color: var(--text-primary); outline: none;
  transition: border-color 0.2s;
}
.ds-input-comment:focus { border-bottom-color: var(--accent); }
.ds-input-comment::placeholder, .ds-input-sm::placeholder { color: var(--text-tertiary); }

/* City blocks (pickup/courier) */
.ds-city-block {
  background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
}
.ds-city-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.ds-city-name {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap;
}
.ds-city-name i { color: var(--primary); margin-right: 3px; font-size: 12px; }
.ds-city-comment { flex: 1; }
.ds-city-remove {
  background: none; border: none; color: var(--text-tertiary);
  font-size: 16px; cursor: pointer; padding: 2px 4px; line-height: 1;
  border-radius: 4px; transition: color 0.15s, background 0.15s;
}
.ds-city-remove:hover { color: var(--danger); background: rgba(239,68,68,0.1); }
.ds-city-payments { padding-left: 2px; }
.ds-add-city { padding-top: 4px; position: relative; z-index: 10; }
.ds-city-search-wrap { position: relative; max-width: 300px; }
.ds-city-search {
  width: 100%; padding: 4px 0; font-size: 13px;
  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.15);
  border-radius: 0; color: var(--text-primary); outline: none;
  transition: border-color 0.2s;
}
.ds-city-search:focus { border-color: var(--accent); }
.ds-city-search::placeholder { color: var(--text-tertiary); }
.ds-city-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 9999;
  background: var(--bg-secondary); border: 1px solid var(--border-light);
  border-radius: 8px; margin-top: 4px; max-height: 220px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.ds-city-item {
  padding: 8px 12px; font-size: 13px; color: var(--text-secondary);
  cursor: pointer; transition: background 0.1s;
}
.ds-city-item:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
.ds-city-empty { cursor: default; color: var(--text-tertiary); font-style: italic; }

/* ── Delivery Editor (in order card) ─────────────────────── */
.de-edit-btn {
  background: none; border: none; color: var(--text-tertiary);
  cursor: pointer; padding: 2px 6px; font-size: 11px;
  border-radius: 4px; transition: color 0.15s, background 0.15s, opacity 0.15s;
  margin-left: 6px; vertical-align: middle;
  opacity: 0;
}
.order-card:hover .de-edit-btn { opacity: 1; }
.de-edit-btn:hover { color: var(--primary-light); background: rgba(255,255,255,0.06); }
.de-edit-btn--locked { opacity: 0.4; cursor: not-allowed; }
.order-card:hover .de-edit-btn--locked { opacity: 0.5; }
.de-edit-btn--locked:hover { color: var(--text-tertiary); background: none; }
.de-panel {
  padding: 8px 0;
}
.order-card.de-editing {
  z-index: 50; position: relative; overflow: visible !important;
  border-radius: var(--radius) !important;
}
.order-card.de-editing::before { display: none; }
.de-section, .de-city-section, .de-wh-section, .de-pay-section {
  margin-bottom: 10px;
}
.de-label {
  font-size: 11px; color: var(--text-tertiary); margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.de-services {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.de-svc-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; font-size: 12px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; color: var(--text-secondary);
  cursor: pointer; transition: all 0.15s;
}
.de-svc-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.de-svc-btn.active {
  background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.4);
  color: var(--primary-light);
}
.de-svc-icon { width: 16px; height: 16px; object-fit: contain; }
.de-selected-svc {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--primary-light);
}
.de-selected-svc .de-svc-icon { width: 16px; height: 16px; }
.de-change-svc-btn {
  background: none; border: none; color: var(--text-tertiary);
  font-size: 11px; cursor: pointer; padding: 2px 6px;
  transition: color 0.15s;
}
.de-change-svc-btn:hover { color: var(--text-primary); }
.de-pickup-cities {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.de-city-wrap { position: relative; }
.de-city-input {
  width: 100%; padding: 5px 0; font-size: 13px;
  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.15);
  color: var(--text-primary); outline: none;
}
.de-city-input:focus { border-bottom-color: var(--accent); }
.de-city-input::placeholder { color: var(--text-tertiary); }
.de-wh-filter, .de-da-region-input { text-transform: capitalize; }
.de-city-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 9999;
  background: var(--bg-secondary); border: 1px solid var(--border-light);
  border-radius: 8px; margin-top: 4px; max-height: 200px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.de-wh-filter {
  width: 100%; padding: 4px 0; font-size: 12px; margin-bottom: 4px;
  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.1);
  color: var(--text-primary); outline: none;
}
.de-wh-filter:focus { border-bottom-color: var(--accent); }
.de-wh-filter::placeholder { color: var(--text-tertiary); }
.de-wh-list {
  max-height: 180px; overflow-y: auto;
}
.de-wh-item {
  padding: 6px 8px; font-size: 12px; color: var(--text-secondary);
  cursor: pointer; border-radius: 6px; transition: background 0.1s;
}
.de-wh-item:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
.de-wh-item.selected {
  background: rgba(16,185,129,0.12); color: var(--primary-light);
}
.de-payments {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.de-pay-btn {
  padding: 4px 10px; font-size: 12px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; color: var(--text-secondary);
  cursor: pointer; transition: all 0.15s;
}
.de-pay-btn:hover { background: rgba(255,255,255,0.08); }
.de-pay-btn.active {
  background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.4);
  color: var(--primary-light);
}
.de-actions {
  display: flex; gap: 8px; margin-top: 8px;
}
.de-save-btn {
  padding: 6px 16px; font-size: 12px; font-weight: 600;
  background: var(--primary); border: none; border-radius: 8px;
  color: var(--bg-primary); cursor: pointer; transition: filter 0.15s;
}
.de-save-btn:hover { filter: brightness(1.15); }
.de-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.de-cancel-btn {
  padding: 6px 12px; font-size: 12px;
  background: none; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; color: var(--text-tertiary); cursor: pointer;
  transition: color 0.15s;
}
.de-cancel-btn:hover { color: var(--text-primary); }
/* width/flex-basis 100%: у вузькій колонці деталей панель інакше втискалась
   поруч із бейджами і виглядала поламано (Іван 2026-07-08) */
.pe-panel { margin-top: 8px; width: 100%; flex-basis: 100%; }
.pe-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.de-da-region-input::placeholder { color: var(--text-tertiary); }
.de-selected-city-row {
  display: flex; align-items: center; gap: 6px;
}
.de-da-address {
  width: 100%; padding: 5px 0; font-size: 13px;
  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.15);
  color: var(--text-primary); outline: none;
}
.de-da-address:focus { border-bottom-color: var(--accent); }
.de-da-address::placeholder { color: var(--text-tertiary); }

/* ── Mode row (warehouse / courier toggle) ── */
.de-mode-row {
  display: flex; gap: 4px; margin-bottom: 10px;
  background: rgba(255,255,255,0.03); border-radius: 8px; padding: 3px;
}
.de-mode-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 5px 10px; font-size: 12px;
  background: none; border: none; border-radius: 6px;
  color: var(--text-tertiary); cursor: pointer; transition: all 0.15s;
}
.de-mode-btn:hover { color: var(--text-secondary); }
.de-mode-btn.active {
  background: rgba(139,92,246,0.15); color: #a78bfa;
  font-weight: 600;
}

/* ── NP type filter ── */
.de-np-filter-panel {
  display: flex; gap: 10px; margin-bottom: 8px; padding: 4px 0;
}
.de-np-filter-item {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--text-secondary); cursor: pointer;
  user-select: none;
}
.de-np-filter-item input[type="checkbox"] {
  accent-color: var(--primary); width: 13px; height: 13px;
}

/* ── Warehouse header row (filter + map button) ── */
.de-wh-header-row {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.de-wh-header-row .de-wh-filter { flex: 1; margin-bottom: 0; }
.de-map-btn {
  background: none; border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-tertiary); padding: 3px 8px; border-radius: 6px;
  cursor: pointer; font-size: 12px; transition: all 0.15s; flex-shrink: 0;
}
.de-map-btn:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.04); }

/* ── Warehouse distance badge ── */
.de-wh-dist {
  float: right; font-size: 10px; color: var(--text-tertiary);
  margin-left: 8px; opacity: 0.7;
}
/* Від чого рахуємо відстань (поточна точка замовлення або орієнтир) + перемикач сортування */
.de-wh-origin {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 11px; color: var(--text-tertiary); margin: 2px 0 6px;
}
.de-wh-origin b {
  color: var(--text-secondary); font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.de-wh-sort-btn {
  margin-left: auto; flex-shrink: 0; background: none; border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-tertiary); padding: 2px 7px; border-radius: 6px; cursor: pointer;
  font-size: 11px; white-space: nowrap; transition: all 0.15s;
}
.de-wh-sort-btn:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.04); }
.de-wh-current {
  margin-left: 6px; font-size: 10px; padding: 1px 6px; border-radius: 8px;
  background: rgba(16,185,129,0.15); color: var(--primary-light); white-space: nowrap;
}

/* ── Courier fields ── */
.de-courier-section { margin-bottom: 10px; }
.de-street-input {
  width: 100%; padding: 5px 0; font-size: 13px;
  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.15);
  color: var(--text-primary); outline: none; text-transform: none;
}
.de-street-input:focus { border-bottom-color: var(--accent); }
.de-street-input::placeholder { color: var(--text-tertiary); }
.de-courier-fields {
  display: flex; gap: 10px; margin-top: 8px;
}
.de-courier-field { flex: 1; }
.de-courier-field .de-city-input { text-transform: none; }

/* ── Street dropdown ── */
.de-street-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 9999;
  background: var(--bg-secondary); border: 1px solid var(--border-light);
  border-radius: 8px; margin-top: 4px; max-height: 200px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.de-street-item {
  padding: 6px 10px; font-size: 12px; color: var(--text-secondary);
  cursor: pointer; transition: background 0.1s;
}
.de-street-item:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }

/* ── City dropdown divider (EVO vs Google Places) ── */
.de-city-divider {
  padding: 4px 10px; font-size: 10px; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.5px; border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 2px;
}
.de-places-item { }

/* ── Map modal (reused from order page) ── */
.map-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
}
.map-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
}
.map-modal-content {
  position: relative;
  width: min(1100px, 92vw); height: min(720px, 88vh);
  background: var(--bg-secondary); border: 1px solid var(--border-light);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.map-modal-header {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
}
.map-modal-title {
  font-size: 14px; color: var(--text-secondary); font-weight: 500; flex-shrink: 0;
}
.map-carrier-filter {
  display: flex; flex-wrap: wrap; gap: 6px; flex: 1;
}
.map-carrier-filter .map-carrier-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
  color: var(--text-tertiary); font-size: 12px; cursor: pointer; transition: all 0.15s;
}
.map-carrier-filter .map-carrier-btn img { width: 14px; height: 14px; }
.map-cat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: -2px; }
.map-carrier-filter .map-carrier-btn.active {
  background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.35); color: #3b82f6;
}
.map-search-input {
  flex-shrink: 0; width: 180px; padding: 5px 10px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; color: var(--text-primary); font-size: 12px;
  outline: none; transition: border-color 0.15s;
}
.map-search-input:focus { border-color: rgba(59,130,246,0.5); }
.map-search-input::placeholder { color: var(--text-tertiary); }
.map-modal-close {
  background: none; border: none; color: var(--text-tertiary);
  font-size: 18px; cursor: pointer; padding: 4px 10px; transition: color 0.15s;
}
.map-modal-close:hover { color: var(--text-primary); }
.map-canvas { flex: 1; background: #1a2332; }
.map-canvas .leaflet-popup-content-wrapper {
  background: var(--bg-secondary); color: var(--text-primary);
  border: 1px solid var(--border-light); border-radius: 8px;
}
.map-canvas .leaflet-popup-tip { background: var(--bg-secondary); }
.map-canvas .leaflet-popup-content { font-size: 12px; line-height: 1.5; margin: 10px 12px; }
.map-canvas .leaflet-popup-content b { color: var(--accent); }
.map-canvas .map-popup-btn {
  margin-top: 6px; padding: 6px 12px;
  background: var(--primary); border: none; border-radius: 6px;
  color: white; font-size: 12px; cursor: pointer; width: 100%;
}
.map-canvas .map-popup-btn:hover { filter: brightness(1.1); }
.map-pin { background: none !important; border: none !important; }

/* ── Chat ─────────────────────────────────────────────────── */
.order-chat {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    margin-top: 16px;
    overflow: hidden;
}
.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--glass-border);
}
.chat-header-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.chat-header-badge {
    font-size: 12px;
    color: var(--accent);
    font-weight: 500;
}
.chat-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
}
.chat-status-dot--connected { background: var(--success); }
.chat-status-dot--reconnecting { background: var(--warning); }
.chat-messages {
    max-height: 400px;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Локальні правила скроллбара стрічки прибрано — діє глобальний тонкий+зникаючий
   (див. «Scrollbar (р.48)» вгорі файлу). Інакше вони перебивали fade. */

/* р.48: сторінка замовлення — плита ФІКСОВАНОЇ висоти (Іван 2026-07-26:
   «щоб розтягувалось на всю сторінку з таким самим відступом знизу, як зверху,
   і розмір був прогнозований — неважливо, скільки повідомлень»).
   `.main-content` уже flex-column із padding 24px → віддаємо йому всю вільну
   висоту через flex:1, а всередині ланцюжок min-height:0, щоб стрічка могла
   скорочуватись і скролитись сама (без цього flex-діти не стискаються).
   ⚠️ Стрічці ПОТРІБЕН власний скрол: `.order-chat` має overflow:hidden (радіус
   16px, р.45) — без нього контент просто обрізало б (регресія 2026-07-26). */
/* Проміжна ланка: .main-content → #order-detail-section → #order-detail-content.
   Без flex тут ланцюжок рветься і плита не тягнеться (Іван 2026-07-26).
   JS показує секцію як display:flex (див. handleRoute, case 'order-detail'). */
/* ⚠️ Нижня межа чату (2026-07-28). Плита тягнеться на висоту вікна, але БЕЗ мінімуму
   вона з'їдала чат: картка не стискається (flex:0 0 auto), тож на низькому вікні
   стрічці лишались крихти. Заміряно на стенді (viewport 620): чат 92px і жодної
   події видно, а при високій картці — 1px. Сторінка при цьому НЕ скролилась
   (#order-detail-section стискався замість переповнення), тобто дотягнутись до
   чату було нічим. Скарга Івана: fullhd + висока панель задач = чатом не
   користуватись.

   Лікується парою:
   1. секція не стискається нижче вмісту (flex-shrink:0) → дефіцит висоти йде в
      скрол .main-content, а не в стиснення чату;
   2. чат має min-height, але flex-basis:0 — базис нуль критичний: із basis:auto
      у мін-контент секції потрапила б уся стрічка повідомлень, і сторінка росла б
      на кожне повідомлення замість власного скролу стрічки (перевірено на 80
      повідомленнях: сторінка +228px = рівно дефіцит, стрічка скролиться сама). */
#order-detail-section {
    flex: 1 0 auto; min-height: 0;
    flex-direction: column;
}
#order-detail-content {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
}
#order-detail-content > .order-card { flex: 0 0 auto; }
#order-detail-content > .order-chat,
#order-detail-content .order-chat {
    flex: 1 1 0; min-height: var(--order-chat-min, 320px);
    display: flex; flex-direction: column;
}
#order-detail-content .order-chat .chat-messages {
    flex: 1; min-height: 0;
    max-height: none; overflow-y: auto;
}
/* Скелетон тримає ТУ САМУ геометрію, що й завантажена сторінка (Іван 2026-07-26:
   «декілька варіантів skeleton load, які все одно дають стрибки»). Ланцюжок flex
   треба довести до самого композера: без цього фейкова строка вводу висіла
   посеред плити (натуральна висота скелетона ≈ 400px) і при появі контенту
   стрибала на ~400px вниз. Тепер вона стоїть РІВНО там, де стане справжня. */
#order-detail-loading { flex: 1 0 auto; min-height: 0; display: flex; flex-direction: column; }
#order-detail-loading .od-skeleton { flex: 1; min-height: 0; }
#order-detail-loading .od-skeleton-card { flex: 0 0 auto; }
/* Мінімум чату повторено й тут — інакше на низькому вікні скелетон малює крихітну
   стрічку, а завантажений чат стрибає на свої 320px (та сама «геометрія 1-в-1»). */
#order-detail-loading .order-chat {
    flex: 1 1 0; min-height: var(--order-chat-min, 320px);
    display: flex; flex-direction: column;
}
#order-detail-loading .order-chat .chat-messages {
    flex: 1; min-height: 0;
    max-height: none; overflow: hidden;     /* скелетон не скролять */
}
#order-detail-loading .chat-input-wrap { flex: 0 0 auto; }
.chat-load-more {
    text-align: center;
    padding: 0 0 8px;
}
.chat-load-more-btn {
    background: none;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-dim);
    font-size: 12px;
    padding: 6px 16px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.2s, color 0.2s;
}
.chat-load-more-btn:hover { border-color: var(--accent); color: var(--text-primary); }
/* ── F2: анатомія репліки — .chat-msg.msg-row(.in|.out) → .bubble ── */
.chat-msg.msg-row { display: flex; max-width: 100%; flex-direction: row; }
.msg-row.in  { justify-content: flex-start; }
.msg-row.out { justify-content: flex-end; }
.bubble {
    position: relative;
    max-width: 82%;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 14px;
    background: var(--bubble-in);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.msg-row.in  .bubble { border-bottom-left-radius: 4px; }        /* хвіст пузиря = асиметричний радіус */
.msg-row.out .bubble { border-bottom-right-radius: 4px; background: var(--bubble-out); }
.bubble.pending { opacity: 0.72; }
.bubble.failed  { outline: 1px solid var(--danger); outline-offset: 0; }

.msg-author {
    font-size: 11px; font-weight: 600; color: var(--text-secondary);
    display: flex; align-items: center; gap: 5px; line-height: 1.2;
}
.msg-row.out .msg-author { color: var(--primary); }
.chat-msg--admin .msg-author { color: var(--info); }
.msg-author-ico { font-size: 10px; opacity: 0.85; }
.msg-body {
    font-size: 13px; line-height: 1.45; color: var(--text-primary);
    word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap;
}
.msg-meta {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--text-tertiary);
    justify-content: flex-end;
}
/* р.46: час праворуч у ВСІХ бабблах (вхідні мали flex-start — різнобій) */
.msg-row.in .msg-meta { justify-content: flex-end; }
.msg-time { white-space: nowrap; }
.msg-status { display: inline-flex; align-items: center; font-size: 11px; }
.msg-status .fa-check { color: var(--text-tertiary); opacity: 0.85; }
.msg-status .fa-clock { color: var(--text-tertiary); opacity: 0.7; }
/* р.46: ✓✓ приглушені (рішення Івана — «не таким ярким») */
.msg-status.read { color: var(--accent); opacity: 0.6; }
.msg-status.read .fa-check-double { color: var(--accent); }
.msg-status.failed, .msg-status .fa-exclamation-triangle { color: var(--danger); }

/* Hidden message (admin sees, vendor_user does not) */
.chat-msg--hidden { opacity: 0.45; }
.chat-msg--hidden .bubble { border-style: dashed; background: transparent; }

/* Плавна підсвітка нового вхідного повідомлення (паритет з мобілкою). М'який
   зелений wash плитки: тримається ~2.5с і згасає. Красить саму .bubble. */
@keyframes chat-msg-glow {
    0%, 58% { box-shadow: 0 0 0 9999px rgba(16,185,129,0) inset; background-color: var(--bubble-in); }
    0%      { box-shadow: 0 0 0 9999px rgba(16,185,129,0.16) inset; }
    58%     { box-shadow: 0 0 0 9999px rgba(16,185,129,0.16) inset; }
    100%    { box-shadow: 0 0 0 9999px rgba(16,185,129,0) inset; background-color: var(--bubble-in); }
}
.chat-msg--glow .bubble { animation: chat-msg-glow 4s ease-out both; }
.chat-msg-hidden-label {
    font-size: 10px;
    color: var(--text-tertiary);
    background: rgba(127,127,127,0.14);
    padding: 1px 6px;
    border-radius: 6px;
}
.chat-msg-hide-btn {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 11px;
    padding: 0 4px;
    opacity: 0;
    transition: opacity 0.15s;
}
.chat-msg:hover .chat-msg-hide-btn { opacity: 0.6; }
.chat-msg-hide-btn:hover { opacity: 1 !important; color: var(--warning); }

/* ── F2: денні сепаратори ── */
.chat-date-sep { display: flex; justify-content: center; margin: 2px 0; }
.chat-date-sep-label {
    font-size: 11px; color: var(--text-tertiary);
    background: var(--surface); border: 1px solid var(--border);
    padding: 2px 12px; border-radius: 10px;
}

/* ── р.48: події в стрічці заказу ────────────────────────────────
   НЕ пузир: тиха службова стрічка. Токени (не хардкоди) — тема тече.
   Вирівняна по центру, щоб не читалась як чиясь репліка. */
.chat-event {
    display: flex; align-items: flex-start; gap: 8px;
    max-width: 86%; margin: 3px auto;
    padding: 6px 12px; border-radius: 10px;
    background: rgba(148,163,184,0.07);
    border: 1px solid var(--glass-border);
    font-size: 12px; line-height: 1.45;
}
.chat-event-ico { flex: 0 0 auto; margin-top: 2px; font-size: 11px; color: var(--text-tertiary); }
.chat-event-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.chat-event-text { color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; }
.chat-event-meta { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.chat-event-actor { font-size: 11px; color: var(--text-tertiary); font-weight: 500; }
.chat-event-time { font-size: 11px; color: var(--text-tertiary); opacity: .8; }
/* «авто» — службова позначка, НЕ акцент (Іван р.48: не треба загострювати на
   ній увагу). Той самий приглушений тон, що й час; без фону і без капсу. */
.chat-event-auto {
    font-size: 11px; font-weight: 400;
    color: var(--text-tertiary); opacity: .75;
}

/* Перемикач стрічки: Обидва / Повідомлення / Події.
   Живе НАД стрічкою, бо шапку чату канон «Єдина картка» ховає. */
/* Перемикач НЕ їсть вертикаль (Іван р.48: «щоб стільки місця не займало»):
   рядок нульової висоти, сам сегмент плаває в правому верхньому куті стрічки.
   Стрічка отримує невеликий padding-top, щоб перше повідомлення не залазило під
   нього; напівпрозорий фон + blur — якщо контент усе ж пройде під сегментом. */
.chat-feed-bar { position: relative; height: 0; padding: 0; }
/* Ліворуч і приглушено (Іван р.48: права сторона перевантажена, перемикач не має
   відволікати). Проявляється на hover/focus — хто шукає, той знайде. */
.chat-feed-seg {
    position: absolute; left: 14px; top: 2px; z-index: 3;
    background: transparent;
    opacity: .38;
    transition: opacity .18s ease;
}
.chat-feed-seg:hover,
.chat-feed-seg:focus-within { opacity: 1; background: rgba(148,163,184,0.08); }
/* Переїхав у рядок підсумку сторінки замовлення (Іван р.48) — там він у потоці,
   ліворуч від «Всього», і не тікає при скролі стрічки. */
.order-total-row--with-feed { display: flex; align-items: center; gap: 10px; }
.order-total-row--with-feed .order-total-label { margin-left: auto; }
.chat-feed-seg--inline { position: static; }
/* Іконки без підписів (рішення Івана р.48) — як тулбар списку замовлень р.47.
   Сенс несуть tooltip/aria-label; квадратна кнопка, іконка по центру. */
.chat-feed-seg .filter-segmented-btn {
    flex: 0 0 auto; position: relative;
    padding: 0; width: 24px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
}
/* Резерв під плаваючий сегмент — лише поки він у стрічці (месенджер).
   На сторінці замовлення він переїжджає в рядок «Всього» → резерв не потрібен. */
.order-chat:not(.order-chat--feed-moved) .chat-messages { padding-top: 26px; }
.chat-feed-dot {
    position: absolute; top: 2px; right: 2px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--primary-light);
    box-shadow: 0 0 0 2px var(--surface);   /* відбивка від сусідньої іконки */
}
.chat-feed-btn.active .chat-feed-dot { background: #fff; }
/* Фільтрація режимом (data-feed на .order-chat) */
.order-chat[data-feed="messages"] .chat-event { display: none; }
.order-chat[data-feed="events"] .chat-msg:not(.chat-event) { display: none; }
.order-chat[data-feed="events"] .chat-date-sep + .chat-date-sep { display: none; }

/* ── F5: вкладення у стрічці ── */
.chat-att { margin: 2px 0; }
.chat-att-img {
    display: block; max-width: 220px; max-height: 220px;
    border-radius: 10px; cursor: zoom-in; object-fit: cover;
}
/* Сітка мініатюр — від ДВОХ фото. Чотири вертикальні знімки клієнта займають
   один рядок ~100px замість ~900px стовпчиком, і текст звернення лишається
   на екрані (Іван 2026-08-11, замовлення 419818139). */
.chat-att-grid { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0; }
.chat-att-grid .chat-att { margin: 0; }
.chat-att-grid .chat-att-img {
    width: 96px; height: 96px; max-width: none; max-height: none;
    border-radius: 8px; transition: transform 0.12s ease, filter 0.12s ease;
}
.chat-att-grid .chat-att-img:hover { transform: scale(1.04); filter: brightness(1.1); }
/* Аудіо-плеєр голосового у чаті — контейнерний суб-блок (вигляд з supplier-чату:
   перемотка ±5с / play / смуга / «час / тривалість» / швидкість). */
.chat-audio {
    display: flex; align-items: center; gap: 6px;
    min-width: 240px; max-width: 100%; padding: 5px 8px; border-radius: 9px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
}
.msg-row.out .chat-audio { background: rgba(4,19,12,0.10); border-color: rgba(4,19,12,0.18); }
.chat-audio audio { display: none; }
.chat-audio-btn {
    flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 6px;
    color: inherit; opacity: 0.7; font-size: 12px; cursor: pointer;
    transition: var(--transition);
}
.chat-audio-btn:hover { background: rgba(255,255,255,0.10); opacity: 1; }
.msg-row.out .chat-audio-btn:hover { background: rgba(4,19,12,0.12); }
.chat-audio-play { opacity: 1; color: var(--primary-light); font-size: 14px; }
/* out: раніше було #04130c (майже чорне) — під яскраво-зелений бабл. Канон-бабл
   тепер тёмний (сталь) → іконка зникала. Наслідуємо базовий var(--primary-light):
   він яскравий у тёмних темах і тёмний у світлих (l2/olivel переозначують його) —
   контраст правильний на обох баблах. */
.chat-audio-bar {
    flex: 1 1 auto; height: 5px; min-width: 56px; overflow: hidden;
    background: rgba(255,255,255,0.16); border-radius: 3px; cursor: pointer;
}
.msg-row.out .chat-audio-bar { background: rgba(4,19,12,0.18); }
.chat-audio-fill { height: 100%; width: 0; background: var(--primary-light); border-radius: 3px; }
.chat-audio-time {
    flex: 0 0 auto; font-family: 'JetBrains Mono', monospace; font-size: 11px;
    font-variant-numeric: tabular-nums; opacity: 0.8; white-space: nowrap;
}
.chat-audio-speed {
    width: auto; height: 22px; padding: 0 6px; opacity: 0.85;
    font-size: 11px; font-weight: 600;
    border: 1px solid rgba(255,255,255,0.22); border-radius: 6px;
}
.msg-row.out .chat-audio-speed { border-color: rgba(4,19,12,0.28); }
.chat-att-file {
    display: inline-flex; align-items: center; gap: 10px;
    max-width: 260px; padding: 8px 10px; text-decoration: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    color: var(--text-primary);
}
.chat-att-file:hover { border-color: var(--border-light); }
.chat-att-file-ic { font-size: 20px; color: var(--text-secondary); flex-shrink: 0; }
.chat-att-file.cft-pdf   .chat-att-file-ic { color: #e2574c; }
.chat-att-file.cft-word  .chat-att-file-ic { color: #2b7cd3; }
.chat-att-file.cft-excel .chat-att-file-ic { color: #1f9d55; }
.chat-att-file.cft-zip   .chat-att-file-ic { color: #d9a441; }
.chat-att-file-b { display: flex; flex-direction: column; min-width: 0; }
.chat-att-file-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-att-file-sub { font-size: 10px; color: var(--text-tertiary); }
.chat-att-file-dl { margin-left: auto; color: var(--text-tertiary); }

/* ── F5: лайтбокс ── */
.chat-lightbox {
    position: fixed; inset: 0; z-index: 100001;
    display: flex; align-items: center; justify-content: center;
    /* Щільніше за колишні 0.82 + розмиття: крізь напівпрозоре тло просвічував
       інтерфейс і заважав розглядати знімок (Іван 2026-08-11). */
    background: rgba(0,0,0,0.92); backdrop-filter: blur(10px); padding: 24px;
    opacity: 0; transition: opacity 0.16s ease;
}
.chat-lightbox.open { opacity: 1; }
.chat-lightbox-stage { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.chat-lightbox img {
    max-width: 92vw; max-height: 88vh; border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    transform-origin: center center; will-change: transform;
    transition: transform 0.14s ease, opacity 0.14s ease;
}
.chat-lightbox img.zoomed { cursor: grab; transition: none; }   /* під час зуму — без лагу */
.chat-lightbox img.zoomed:active { cursor: grabbing; }
/* В'їзд нового кадру з боку перемикання */
.chat-lightbox img.in-l { transform: translateX(-28px); opacity: 0; transition: none; }
.chat-lightbox img.in-r { transform: translateX(28px); opacity: 0; transition: none; }

/* Кнопки гортання пристиковані до КРАЮ ЕКРАНА, а не до фото: ширина знімка
   залежить від пропорцій, і на його межі кнопки стрибали б при кожному
   перемиканні (Іван 2026-08-11). */
.chat-lightbox-nav {
    position: fixed; top: 50%; transform: translateY(-50%);
    width: 52px; height: 84px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
    color: #fff; font-size: 22px; cursor: pointer; z-index: 1;
    transition: background 0.12s ease;
}
.chat-lightbox-nav.prev { left: 0; border-left: none; border-radius: 0 12px 12px 0; }
.chat-lightbox-nav.next { right: 0; border-right: none; border-radius: 12px 0 0 12px; }
.chat-lightbox-nav:hover { background: rgba(255,255,255,0.16); }
.chat-lightbox-count {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    padding: 5px 12px; border-radius: 999px; font: 600 12px/1 var(--font-mono, monospace);
    letter-spacing: 0.06em; color: #fff;
    background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.14);
}
.chat-lightbox-ctl { position: fixed; top: 16px; right: 16px; display: flex; gap: 8px; z-index: 1; }
.chat-lightbox-btn {
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); border-radius: 10px;
    color: #fff; cursor: pointer; font-size: 15px; text-decoration: none;
}
.chat-lightbox-btn:hover { background: rgba(255,255,255,0.2); }

/* ── F5: превью-чіп вкладення до відправки ── */
/* превью-чіп живе в рядку тумблера (р.41); display:flex перебив би hidden-атрибут */
.chat-attach-preview { display: flex; min-width: 0; }
.chat-attach-preview[hidden] { display: none !important; }
.chat-attach-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 8px 6px 6px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 10px;
}
.chat-attach-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; cursor: zoom-in; }
.chat-attach-chip-ic { font-size: 16px; color: var(--text-secondary); margin-left: 4px; }
.chat-attach-chip-name { font-size: 12px; color: var(--text-primary); max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-attach-chip-x { background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 13px; padding: 0 4px; }
.chat-attach-chip-x:hover { color: var(--danger); }

/* ── F4/р.39: режим «Клієнту» — send лишається КРУГОМ, але бурштиновим.
   Гігантський лейбл-варіант знято (кнопка «дика» + вилазила за панель).
   Селектор через .order-chat--customer: (0,2,0) б'є базовий .chat-send-btn
   нижче по файлу (сам модифікатор-клас — (0,1,0), програвав каскадом). ── */
.chat-send-label { display: none !important; }
.order-chat--customer .chat-send-btn { background: var(--warning); color: #241203; }
.order-chat--customer .chat-send-btn:hover { filter: brightness(1.08); }

/* Read receipt tooltip */
.chat-read-tooltip {
    position: absolute;
    z-index: 1000000;
    min-width: 180px;
    max-width: 320px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0,0,0,0.55);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
    pointer-events: none;
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.read-tooltip-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}
.read-tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 2px 0;
}
.read-tooltip-name {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}
.read-tooltip-time {
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
}
/* ── Композер (р.39): [скрепка] [пігулка: textarea + мікрофон] [send-круг].
   Мікрофон УСЕРЕДИНІ пігулки праворуч, скрепка зліва поза нею (патерн
   клієнт-чату «Клієнти»), send — круглий акцентний. flex-end тримає
   кнопки внизу, коли textarea росте. ── */
.chat-input-wrap {
    position: relative;               /* якір для абсолютних нащадків — кнопка більше не тікає */
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.chat-pill {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: flex-end;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    border-radius: 20px;
    transition: border-color 0.2s, background 0.2s;
}
.chat-pill:focus-within { border-color: var(--border-light); background: rgba(0,0,0,0.3); }
.order-chat--customer .chat-pill { border-color: rgba(245,158,11,0.45); }
.chat-textarea {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none;
    padding: 10px 6px 10px 14px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    resize: none;
    outline: none;
    min-height: 40px;
    max-height: 120px;
    line-height: 1.4;
    box-sizing: border-box;
    scrollbar-width: none;
}
.chat-textarea::-webkit-scrollbar { width: 0; }
.chat-textarea::placeholder {
    color: var(--text-tertiary);
    opacity: 0.75;
}
/* Мікрофон — усередині пігулки праворуч */
.chat-voice-btn {
    flex-shrink: 0; height: 32px; min-width: 32px; padding: 0 8px;
    margin: 4px 5px 4px 0;
    background: none; border: none; border-radius: 999px;
    color: var(--text-tertiary); display: flex; align-items: center; gap: 6px;
    justify-content: center; cursor: pointer; font-size: 14px;
    transition: color 0.2s, background 0.2s;
}
.chat-voice-btn:hover { color: var(--text-primary); background: rgba(127,127,127,0.12); }
.chat-voice-btn.recording {
    color: #fff; background: var(--danger);
    animation: ttn-pulse 1s infinite;
}
.chat-voice-btn.processing { opacity: 0.5; pointer-events: none; }
.chat-voice-time { font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.chat-voice-btn:not(.recording) .chat-voice-time { display: none; }

/* Send — круглий, акцентний; НІКОЛИ не absolute */
.chat-send-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: #06130c;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    box-shadow: 0 3px 10px -3px rgba(0,0,0,0.4);
    transition: filter 0.15s, transform 0.15s;
}
.chat-send-btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
/* нема що слати → сіра і нежива (р.40) */
.chat-send-btn:disabled { opacity: 0.35; filter: grayscale(0.7); cursor: not-allowed; box-shadow: none; }

/* Empty state */
.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    color: var(--text-dim);
    opacity: 0.4;
}
.chat-empty i {
    font-size: 28px;
}
.chat-empty span {
    font-size: 12px;
}

/* Skeleton loading */
.chat-skeleton {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 0;
}
.chat-skeleton-msg {
    display: flex;
}
.chat-skeleton-msg--left { justify-content: flex-start; }
.chat-skeleton-msg--right { justify-content: flex-end; }
.chat-skeleton-bubble {
    width: 55%;
    height: 32px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    animation: shimmer 1.5s infinite;
}
.chat-skeleton-bubble--short {
    width: 35%;
}

/* Unread badge on order card */
.order-unread-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(0, 209, 178, 0.15);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    margin-left: 12px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s;
}
.order-unread-badge:hover {
    background: rgba(0, 209, 178, 0.3);
}
.order-unread-badge i {
    font-size: 11px;
}

/* =========================================================
   Messenger Section (Stage 2 — inbox-агрегатор)
   F6: токени --glass/--border/--surface/--bubble-*; @media 900px = одна панель.
   ========================================================= */
#messenger-section { max-width: 1100px; }
.msgr {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 16px;
    /* р.39: точна геометрія замість магії 150px — 60px шапка + 24+24 паддінги
       .main-content; мертвої смуги під композером більше нема. (У headerless-
       темах шапки нема — design-lab.css звужує до 48px.) */
    height: calc(100vh - 108px);
    min-height: 460px;
}
.msgr-list {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-width: 0;
}
.msgr-list-head { padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
/* Stage 3: шапка списку — заголовок + мьют-тумблер звуку в один рядок */
.msgr-list-head-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.msgr-sound-toggle {
    flex-shrink: 0;
    width: 30px; height: 30px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: var(--radius-sm);
    background: transparent; color: var(--text-secondary);
    cursor: pointer; font-size: 14px; transition: background 0.15s, color 0.15s;
}
.msgr-sound-toggle:hover { background: var(--glass-hover); color: var(--text-primary); }
.msgr-sound-toggle--off { color: var(--text-tertiary); }
.msgr-head-actions { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* Stage 3: діагностична панель «Сповіщення» (жива перевірка push-стека) */
.ndiag-rows { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: 52vh; }
.ndiag-row { display: flex; gap: 10px; align-items: flex-start;
    padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--glass); }
.ndiag-ic { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 11px; }
.ndiag-ic--pending { color: var(--text-tertiary); }
.ndiag-ic--ok   { color: #34d399; background: rgba(52,211,153,0.12); }
.ndiag-ic--fail { color: #f87171; background: rgba(248,113,113,0.12); }
.ndiag-ic--warn { color: #fbbf24; background: rgba(251,191,36,0.12); }
.ndiag-ic--info { color: #22d3ee; background: rgba(34,211,238,0.12); }
.ndiag-main { min-width: 0; flex: 1; }
.ndiag-label { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.ndiag-detail { font-size: 11.5px; color: var(--text-secondary); line-height: 1.4;
    margin-top: 2px; word-break: break-word; white-space: pre-wrap; }
.ndiag-hints { font-size: 11.5px; color: var(--text-secondary); line-height: 1.45;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--glass); }
.ndiag-hints b { color: var(--text-primary); }
.ndiag-foot { display: flex; gap: 8px; justify-content: flex-end; }
/* Stage 3: м'який банер увімкнення пушів (permission==='default') */
.msgr-push-banner {
    margin-top: 10px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--glass);
    display: flex; flex-direction: column; gap: 8px;
}
.msgr-push-banner-text { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; }
.msgr-push-banner-actions { display: flex; gap: 8px; }
/* Stage 3.5: Telegram-блок у панелі сповіщень + промо-лінк у пуш-банері */
.ndiag-tg { display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--glass); }
.ndiag-tg-title { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.ndiag-tg-ok { font-size: 12.5px; font-weight: 600; color: var(--primary-light); }
.msgr-push-banner-tg { align-self: flex-start; padding: 0; background: none; border: none;
    cursor: pointer; font-size: 12px; color: var(--accent); text-decoration: underline; }
.msgr-push-banner-tg:hover { color: var(--primary-light); }
/* ── Налаштування сповіщень: матриця подій × каналів ──────────
   Усе на токенах → світлі теми (l1/l2/olivel) перекривають каскадом;
   таблиця нічого не хардкодить у темне. */
.nset-card {
    background: var(--glass); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px;
}
/* Одна матриця: table впритул до країв, кути скруглює контейнер (overflow: hidden) */
.nset-card--table { padding: 0; overflow: hidden; }
.nset-intro { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 4px 2px 14px; }
.nset-intro--tg { margin-bottom: 8px; }
.nset-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: inherit; }
.nset-table { border-collapse: collapse; width: 100%; min-width: 420px; }
.nset-table th, .nset-table td { padding: 9px 8px; border-bottom: 1px solid var(--border); text-align: center; }
.nset-table thead th { border-bottom: 1px solid var(--border-light); }
.nset-table tbody tr:last-child td { border-bottom: none; }
.nset-th-event, .nset-td-event {
    text-align: left; position: sticky; left: 0; z-index: 1;
    background: var(--bg-secondary); border-right: 1px solid var(--border);
}
/* Порожній лівий-верхній кут: та сама sticky-заливка, але без рамок → «скруглений» контейнером */
.nset-th-corner { border-right-color: transparent; }
.nset-td-event {
    font-size: 13px; color: var(--text-primary); line-height: 1.35;
    min-width: 190px; max-width: 280px; padding-right: 14px;
}
.nset-table thead th.nset-th-ch { min-width: 68px; vertical-align: bottom; padding-top: 12px; }
.nset-ch-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.nset-ch-sub { display: block; margin-top: 2px; font-size: 9.5px; font-weight: 500;
    color: var(--text-tertiary); line-height: 1.2; }
.nset-soon {
    display: inline-block; margin-top: 3px; padding: 1px 6px; font-size: 9.5px;
    font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
    color: var(--text-tertiary); background: var(--surface);
    border: 1px solid var(--border); border-radius: 999px;
}
.nset-na { color: var(--text-tertiary); font-size: 13px; user-select: none; }
/* Рядок-секція групи всередині єдиної матриці (замість окремих карток) */
.nset-group-cell { text-align: left; background: var(--bg-secondary);
    border-bottom: 1px solid var(--border); padding: 0 !important; }
.nset-group-cell > span {
    position: sticky; left: 0; display: inline-block; padding: 13px 12px 6px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-tertiary);
}
/* Ховер рядка події — суцільна заливка на токенах (видно і на світлих темах, sticky не протікає) */
.nset-ev-row:hover > td { background: var(--bg-tertiary); }
/* Чіп-статус Telegram у шапці стовпця */
.nset-tg-chip-host { margin-top: 6px; display: flex; justify-content: center; }
.nset-tg-chip {
    display: inline-block; max-width: 100%; font-size: 10.5px; font-weight: 600; line-height: 1.4;
    padding: 2px 9px; border-radius: 999px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary);
}
button.nset-tg-chip { cursor: pointer; transition: background .15s, border-color .15s, opacity .15s; }
button.nset-tg-chip:disabled { opacity: .6; cursor: default; }
.nset-tg-chip--off { color: var(--text-tertiary); cursor: help; }
.nset-tg-chip--loading { color: var(--text-tertiary); }
.nset-tg-chip--link { color: #fff; background: var(--primary); border-color: var(--primary); }
.nset-tg-chip--link:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); }
.nset-tg-chip--ok { color: var(--primary-light); border-color: var(--primary); background: var(--surface); }
.nset-tg-chip--ok:hover:not(:disabled) { background: var(--glass-hover); }
/* Заблокований тумблер (Telegram до привʼязки) */
.nset-sw--locked { opacity: .4; }
.nset-sw--locked input { cursor: not-allowed; }

/* ── Модалка привʼязки Telegram ──────────────────────────
   Живе окремо від .modal-overlay: у того display керують інші екрани, а тут
   потрібен свій незалежний перемикач .open, який ніхто не зачепить. */
.tglink-overlay {
    display: none; position: fixed; inset: 0; z-index: 8600;
    background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
    align-items: center; justify-content: center; padding: 16px;
}
.tglink-overlay.open { display: flex; }
.tglink-box {
    background: var(--bg-secondary); border: 1px solid var(--border-light);
    border-radius: var(--radius-lg); padding: 22px 24px;
    width: min(460px, 100%); display: flex; flex-direction: column; gap: 12px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.tglink-head { display: flex; align-items: center; justify-content: space-between; }
.tglink-title { font-size: 15px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.tglink-close {
    background: none; border: none; color: var(--text-secondary);
    cursor: pointer; font-size: 20px; line-height: 1; padding: 2px 6px;
    border-radius: 4px; transition: var(--transition);
}
.tglink-close:hover { color: var(--text-primary); background: var(--glass-hover); }
.tglink-status { font-size: 13px; color: var(--text-secondary); }
.tglink-status--ok  { color: var(--primary-light); font-weight: 600; }
.tglink-status--err { color: var(--danger, #e5484d); }
.tglink-open {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 14px; border-radius: var(--radius-sm);
    background: var(--primary); color: #fff; font-weight: 600; font-size: 14px;
    text-decoration: none; transition: background .15s;
}
.tglink-open:hover { background: var(--primary-dark); color: #fff; }
.tglink-or { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.tglink-url-row { display: flex; gap: 8px; }
.tglink-url {
    flex: 1; min-width: 0; font-size: 12px; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-tertiary); color: var(--text-secondary);
}
.tglink-copy, .tglink-retry {
    padding: 8px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text-primary); white-space: nowrap;
    transition: background .15s;
}
.tglink-copy:hover, .tglink-retry:hover { background: var(--glass-hover); }
.tglink-hint { font-size: 12px; line-height: 1.5; color: var(--text-tertiary); }

/* Тумблер на токенах — off-стан і кнопка читаються і на світлому, і на темному */
.nset-sw { position: relative; display: inline-flex; width: 38px; height: 20px; }
.nset-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.nset-sw-tr {
    position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
    background: var(--bg-tertiary); border: 1px solid var(--border-light);
    transition: background .18s, border-color .18s;
}
.nset-sw-tr::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
    border-radius: 50%; background: var(--text-tertiary);
    transition: transform .18s, background .18s;
}
.nset-sw input:checked + .nset-sw-tr { background: var(--primary); border-color: var(--primary); }
.nset-sw input:checked + .nset-sw-tr::after { transform: translateX(18px); background: #fff; }
.nset-sw input:focus-visible + .nset-sw-tr { outline: 2px solid var(--primary); outline-offset: 2px; }
.nset-error { color: var(--danger); padding: 16px 2px; font-size: 14px; }
.nset-skel {
    height: 180px; border-radius: var(--radius);
    background: var(--glass); border: 1px solid var(--border);
    animation: nset-pulse 1.2s ease-in-out infinite;
}
@keyframes nset-pulse { 0%,100% { opacity: .35; } 50% { opacity: .6; } }
@media (max-width: 640px) {
    .nset-card { padding: 14px; }
    .nset-card--table { padding: 0; }   /* матриця лишається впритул до країв */
    .nset-td-event { min-width: 150px; max-width: 200px; font-size: 12.5px; }
}
/* Stage 3: клікабельний тост нового повідомлення */
.toast--chat { cursor: pointer; max-width: 340px; }
.toast-chat-title { font-weight: 600; margin-bottom: 2px; }
.toast-chat-body { font-size: 12.5px; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgr-search { position: relative; margin-top: 10px; }
.msgr-search i {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text-tertiary); font-size: 12px; pointer-events: none;
}
.msgr-search-input {
    width: 100%; box-sizing: border-box;
    padding: 8px 12px 8px 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px; font-family: inherit; outline: none;
    transition: border-color 0.2s;
}
.msgr-search-input:focus { border-color: var(--accent); }
.msgr-rooms { flex: 1; overflow-y: auto; }
.msgr-rooms::-webkit-scrollbar { width: 4px; }
.msgr-rooms::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.msgr-room {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.msgr-room:hover { background: var(--glass); }
.msgr-room--active { background: var(--glass-hover); }
.msgr-room--sk { cursor: default; pointer-events: none; }
.msgr-room-avatar {
    /* Кругла мініатюра товару — рішення Івана 2026-07-20 (М2, веб+мобілка) */
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    background: var(--glass); color: var(--text-secondary);
    font-weight: 700; font-size: 16px;
}
.msgr-room-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msgr-room-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.msgr-room-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.msgr-room-name {
    font-size: 13px; font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.msgr-room-time { font-size: 11px; color: var(--text-tertiary); flex-shrink: 0; }
.msgr-room-sub { display: flex; align-items: center; gap: 6px; }
.msgr-room-order { font-size: 11px; color: var(--text-tertiary); flex-shrink: 0; }
.msgr-room-preview {
    font-size: 12px; color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.msgr-preview-prefix { color: var(--text-tertiary); }
.msgr-room--unread .msgr-room-preview { color: var(--text-primary); font-weight: 600; }
.msgr-room--unread .msgr-preview-prefix { color: var(--text-secondary); }
.msgr-room-dot {
    width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary);
}
.msgr-pill {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 600; color: var(--text-secondary);
    padding: 1px 7px; border-radius: 10px; background: var(--glass);
    white-space: nowrap; flex-shrink: 0;
}
.msgr-pill-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* Права панель — тред */
.msgr-thread {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex; flex-direction: column; min-width: 0;
}
.msgr-thread-empty {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px; color: var(--text-tertiary); text-align: center; padding: 20px;
}
.msgr-thread-empty .empty-icon { font-size: 40px; opacity: 0.4; }
.msgr-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 48px 24px; text-align: center; color: var(--text-tertiary);
}
.msgr-empty .empty-icon { font-size: 34px; opacity: 0.4; margin-bottom: 4px; }
.msgr-empty p { font-size: 13px; color: var(--text-secondary); }
.msgr-empty-sub { font-size: 12px; color: var(--text-tertiary); }

.msgr-thread-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.msgr-thread-head {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.msgr-back {
    display: none;
    background: var(--glass); border: 1px solid var(--border);
    color: var(--text-secondary); border-radius: var(--radius-sm);
    width: 32px; height: 32px; flex-shrink: 0; cursor: pointer;
    align-items: center; justify-content: center; font-size: 13px;
}
.msgr-back:hover { background: var(--glass-hover); color: var(--text-primary); }
.msgr-thread-avatar {
    /* Кругла мініатюра товару — рішення Івана 2026-07-20 (М2, веб+мобілка) */
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--glass); color: var(--text-secondary); font-weight: 700;
}
.msgr-thread-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msgr-thread-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msgr-thread-row1 { display: flex; align-items: center; gap: 8px; }
.msgr-thread-order { font-size: 14px; font-weight: 700; color: var(--text-primary); text-decoration: none; }
.msgr-thread-order:hover { color: var(--accent); }
.msgr-thread-client {
    font-size: 12px; color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msgr-thread-product {
    font-size: 11px; color: var(--text-tertiary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Переиспользуемый тред (renderChatBlock) заповнює панель, а не карткою. */
.msgr-thread-body { flex: 1; min-height: 0; display: flex; }
.msgr-thread-body .order-chat {
    margin-top: 0; border: none; border-radius: 0; background: transparent;
    flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%;
}
.msgr-thread-body .order-chat .chat-header { display: none; }   /* дублює шапку треду */
.msgr-thread-body .order-chat .chat-messages { max-height: none; flex: 1; }

@media (max-width: 900px) {
    .msgr {
        grid-template-columns: 1fr;
        height: calc(100vh - 120px);
    }
    .msgr-thread { display: none; }               /* за замовчуванням — список */
    .msgr--thread-open .msgr-list { display: none; }
    .msgr--thread-open .msgr-thread { display: flex; }
    .msgr-back { display: inline-flex; }
}

/* =========================================================
   Reviews Section
   ========================================================= */

/* Summary: avg rating + distribution bars */
.reviews-summary {
    display: flex;
    gap: 32px;
    padding: 20px 24px;
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    align-items: center;
}
/* Metrics bar: 3 cards in a row */
.reviews-metrics-bar {
    display: flex;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.reviews-metric-card {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    background: var(--surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.reviews-metric-card.reviews-metric-alert {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.06);
}
.reviews-metric-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}
.reviews-metric-alert .reviews-metric-value {
    color: var(--danger);
}
.reviews-metric-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 6px;
}
.reviews-metric-detail {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-top: 3px;
    font-family: monospace;
}
.reviews-bars-section {
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.prom-rating-green  { color: var(--success); }
.prom-rating-yellow { color: var(--warning); }
.prom-rating-red    { color: var(--danger); }
.reviews-total-count {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 6px;
    text-align: right;
}
.rating-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rating-bar-label {
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 32px;
    text-align: right;
}
.rating-bar-track {
    flex: 1;
    height: 8px;
    background: var(--surface);
    border-radius: 4px;
    overflow: hidden;
}
.rating-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}
.rating-bar-fill-5 { background: #22c55e; }
.rating-bar-fill-4 { background: #84cc16; }
.rating-bar-fill-3 { background: var(--warning); }
.rating-bar-fill-2 { background: #f97316; }
.rating-bar-fill-1 { background: var(--danger); }
.rating-bar-count {
    font-size: 12px;
    color: var(--text-tertiary);
    min-width: 36px;
    text-align: right;
}

/* Problem profile */
/* Reviews filters */
.reviews-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.reviews-filter-group {
    display: flex;
    gap: 4px;
    background: var(--glass);
    border-radius: var(--radius-sm);
    padding: 3px;
    border: 1px solid var(--border);
}
.reviews-filter-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all var(--transition);
    white-space: nowrap;
}
.reviews-filter-btn:hover {
    color: var(--text-primary);
    background: var(--glass-hover);
}
.reviews-filter-btn.active {
    background: var(--primary);
    color: #fff;
}
.reviews-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}
.reviews-filter-checkbox input {
    accent-color: var(--primary);
}
.reviews-tag-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background var(--transition);
}
.reviews-tag-filter-badge:hover {
    background: rgba(239, 68, 68, 0.25);
}

/* Review cards */
.review-card {
    padding: 16px 20px;
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 10px;
    transition: border-color var(--transition);
}
.review-card:hover {
    border-color: var(--border-light);
}
/* ── Review marker styles (switchable) ── */

/* Style A: border-left (same opacity as top) */
.review-marker-border .review-card.review-negative { border-left: 2px solid rgba(239,68,68,0.35); }
.review-marker-border .review-card.review-neutral  { border-left: 2px solid rgba(245,158,11,0.35); }
.review-marker-border .review-card.review-positive  { border-left: 2px solid rgba(16,185,129,0.35); }

/* Style B: left gradient fade into card (layered over glass) */
.review-marker-gradient .review-card.review-negative { background: linear-gradient(90deg, rgba(239,68,68,0.10) 0%, transparent 20%), var(--glass); }
.review-marker-gradient .review-card.review-neutral  { background: linear-gradient(90deg, rgba(245,158,11,0.08) 0%, transparent 20%), var(--glass); }
.review-marker-gradient .review-card.review-positive  { background: linear-gradient(90deg, rgba(16,185,129,0.07) 0%, transparent 20%), var(--glass); }

/* Style C: top accent line */
.review-marker-top .review-card.review-negative { border-top: 2px solid rgba(239,68,68,0.35); }
.review-marker-top .review-card.review-neutral  { border-top: 2px solid rgba(245,158,11,0.35); }
.review-marker-top .review-card.review-positive  { border-top: 2px solid rgba(16,185,129,0.35); }

/* Style D: corner triangle */
.review-marker-corner .review-card { overflow: hidden; position: relative; }
.review-marker-corner .review-card::after {
    content: ''; position: absolute; top: 0; right: 0;
    width: 0; height: 0;
    border-style: solid; border-width: 0 20px 20px 0;
    border-color: transparent; pointer-events: none;
}
.review-marker-corner .review-card.review-negative::after { border-right-color: var(--danger); }
.review-marker-corner .review-card.review-neutral::after  { border-right-color: var(--warning); }
.review-marker-corner .review-card.review-positive::after  { border-right-color: var(--success); }

/* Style E: no markers, stars only */
/* (no rules needed — stars already colored) */

/* ── Marker style switcher ── */
.marker-switcher {
    display: inline-flex; gap: 2px; padding: 2px;
    background: transparent; border-radius: 8px;
    margin-left: auto; opacity: 0.2; transition: opacity 0.3s;
}
.marker-switcher:hover { opacity: 1; background: rgba(255,255,255,0.04); }
#input-style-switcher { opacity: 1; margin: 0 auto; }
.marker-switcher-btn {
    padding: 5px 10px; border: none; border-radius: 6px;
    background: transparent; color: var(--text-tertiary);
    font-size: 11px; cursor: pointer; transition: all 0.2s;
    white-space: nowrap;
}
.marker-switcher-btn:hover { color: var(--text-secondary); }
.marker-switcher-btn.active {
    background: rgba(255,255,255,0.08); color: var(--text-primary);
}

.review-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.review-rating-stars {
    font-size: 16px;
    letter-spacing: 1px;
}
.review-rating-stars.positive { color: var(--success); }
.review-rating-stars.neutral { color: var(--warning); }
.review-rating-stars.negative { color: var(--danger); }
.review-meta {
    display: flex;
    gap: 8px;
    align-items: center;
}
.review-author {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}
.review-date {
    font-size: 12px;
    color: var(--text-tertiary);
}
.review-date .relative-time {
    color: var(--text-secondary);
}

/* Review products */
.review-products {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.review-product {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 12px;
    transition: background 0.2s, border-color 0.2s;
    max-width: 320px;
}
.review-product:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
    color: var(--text-primary);
}
.review-product-img {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}
.review-product-img--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    color: var(--text-dim);
    font-size: 12px;
}
.review-product-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Order review chip (у шапці картки, праворуч від номера) ──
   Видно завжди — місце в шапці вільне, картку не розтягує.
   Клік → попап з деталями відгуку (Іван 2026-07-22). */
.order-review-slot {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
}
/* Плейн: без фону/обводки — просто зірки на картці (Іван 2026-07-22) */
.order-review-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 4px;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    opacity: 0.75;
    transition: filter 0.15s, opacity 0.15s;
}
.order-review-chip:hover { filter: brightness(1.3); opacity: 1; }
.order-review-chip-ico { font-size: 10px; color: var(--text-tertiary); }
.order-review-chip-resolved { color: var(--success); }
.order-review-chip-days {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--warning);
    white-space: nowrap;
}
.order-review-chip-days.urgent { color: var(--danger); }
/* Вузькі екрани (PWA): чип переноситься під номер, а не тисне його */
@media (max-width: 640px) {
    .order-id-row { flex-wrap: wrap; row-gap: 4px; }
}

.order-review-stars {
    font-size: 17px;
    letter-spacing: 0.5px;
    line-height: 1;
}
.order-review-stars.positive { color: var(--success); }
.order-review-stars.neutral { color: var(--warning); }
.order-review-stars.negative { color: var(--danger); }

/* ── Review popover ── */
/* Картка з відкритим попапом — над сусідніми (кожна картка = stacking
   context через backdrop-filter; те саме правило, що для status-dropdown) */
.order-card:has(.order-review-pop) { z-index: 100; }
.order-review-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 400px;
    max-width: min(400px, calc(100vw - 32px));
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    z-index: 250;
    padding: 14px 16px;
    text-align: left;
    font-size: 13px;
    cursor: default;
}
.order-review-pop.align-right { left: auto; right: 0; }
.order-review-pop-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.order-review-pop-stars { font-size: 16px; letter-spacing: 1px; }
.order-review-pop-stars.positive { color: var(--success); }
.order-review-pop-stars.neutral { color: var(--warning); }
.order-review-pop-stars.negative { color: var(--danger); }
.order-review-author {
    color: var(--text-secondary);
    font-weight: 600;
}
.order-review-pop-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--text-tertiary);
    font-size: 11.5px;
    margin-bottom: 8px;
}
.order-review-pop-status { margin-bottom: 8px; }
.order-review-text {
    color: var(--text-secondary);
    line-height: 1.45;
    max-height: 180px;
    overflow-y: auto;
}
.order-review-no-text { color: var(--text-tertiary); font-style: italic; }
.order-review-pop-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin: 10px 0 4px;
}
.order-review-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.order-review-tag {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}
.order-review-pop-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.order-review-pop-photo {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--border-light);
    transition: border-color 0.15s;
}
.order-review-pop-photo:hover { border-color: var(--text-tertiary); }
.order-review-pop-actions {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
}
.order-review-copy-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    background: rgba(239,68,68,0.12);
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,0.3);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.15s;
}
.order-review-copy-link:hover { background: rgba(239,68,68,0.2); }
.order-review-pop-hint {
    margin-top: 7px;
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.4;
}
.order-review-pop-all {
    margin-top: 10px;
    background: none;
    border: none;
    padding: 0;
    color: var(--text-tertiary);
    font-size: 11.5px;
    cursor: pointer;
    transition: color 0.15s;
}
.order-review-pop-all:hover { color: var(--text-primary); }
.review-order-link {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-decoration: none;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    letter-spacing: 0.02em;
    transition: color 0.2s;
}
.review-order-link:hover {
    color: var(--text-primary);
}

.review-comment {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 8px;
}
.review-no-text {
    color: var(--text-tertiary);
    font-style: italic;
}

.review-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.review-classification-tag {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    cursor: pointer;
    transition: background var(--transition);
}
.review-classification-tag:hover {
    background: rgba(239, 68, 68, 0.25);
}

.review-images {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.review-image-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 1px solid var(--border);
    transition: transform var(--transition), border-color var(--transition);
}
.review-image-thumb:hover {
    transform: scale(1.05);
    border-color: var(--accent);
}

.review-resolved {
    margin-top: 8px;
    font-size: 12px;
    color: var(--success);
    display: flex;
    align-items: center;
    gap: 4px;
}

.error-state {
    text-align: center;
    padding: 40px;
    color: var(--danger);
    font-size: 14px;
}

/* Review edit button + tooltip */
.review-edit-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.12);
    color: var(--warning);
    cursor: pointer;
    font-size: 10px;
    transition: background var(--transition), color var(--transition);
    flex-shrink: 0;
}
.review-edit-btn:hover {
    background: rgba(245, 158, 11, 0.25);
    color: #fbbf24;
}
.review-edit-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    right: -8px;
    width: 280px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
    z-index: 100;
    pointer-events: none;
}
.review-edit-tooltip strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 4px;
}
.review-edit-btn:hover .review-edit-tooltip {
    display: block;
}
/* Inside review cards (larger) */
.review-header .review-edit-btn {
    width: 26px;
    height: 26px;
    font-size: 11px;
}
.review-header .review-edit-tooltip {
    right: auto;
    left: -8px;
}
.review-edit-days-left {
    display: block;
    margin-top: 6px;
    color: var(--text-tertiary);
    font-size: 11px;
}
.review-edit-urgent {
    display: block;
    margin-top: 6px;
    color: var(--danger);
    font-size: 11px;
    font-weight: 500;
}
.review-edit-urgent i {
    margin-right: 3px;
}

/* Review status badges */
.review-status-badge {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
}
.resolution-deleted_by_customer,
.resolution-deleted_by_moderator {
    background: rgba(100, 116, 139, 0.15);
    color: var(--text-secondary);
}
.resolution-edited_to_positive {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success);
}
.resolution-banned_customer {
    background: rgba(245, 158, 11, 0.12);
    color: var(--warning);
}
.resolution-deleted_as_fake,
.resolution-neutral {
    background: rgba(100, 116, 139, 0.1);
    color: var(--text-tertiary);
}
/* Review list section separators */
.reviews-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
}
.reviews-section-label i { font-size: 11px; }
.reviews-section-count {
    font-size: 11px;
    background: rgba(255,255,255,0.06);
    padding: 1px 8px;
    border-radius: 10px;
}
.reviews-section-actionable { color: var(--success); }
.reviews-section-rest { color: var(--text-tertiary); }
.reviews-section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    margin: 12px 0;
}

.review-actionable-badge {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.12);
    color: var(--success);
    white-space: nowrap;
}
.review-actionable-badge i {
    margin-right: 3px;
}
.review-edited-note {
    font-size: 11px;
    color: var(--text-tertiary);
    white-space: nowrap;
}
.review-edited-note i {
    margin-right: 2px;
    font-size: 10px;
}

/* Card variants */
.review-card.review-actionable {
    border-left-color: var(--success);
    background: rgba(16, 185, 129, 0.03);
}
.review-card.review-resolved-card {
    opacity: 0.7;
}
.review-card.review-not-counted {
    opacity: 0.55;
}

/* Danger badge in sidebar */
.nav-badge--danger {
    background: var(--danger) !important;
    color: #fff !important;
}

/* =========================================================
   Diagnostics Section
   ========================================================= */
.diag-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.diag-summary-card {
    flex: 1;
    min-width: 120px;
    text-align: center;
    padding: 16px 12px;
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.diag-summary-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}
.diag-summary-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 6px;
}
.diag-summary-detail {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-top: 3px;
}

.diag-category {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 14px;
}
.diag-category-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.diag-category-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.diag-category-info {
    flex: 1;
    min-width: 0;
}
.diag-category-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.diag-category-stats {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
}
.diag-category-cta {
    font-size: 12px;
    color: var(--primary);
    margin-top: 6px;
    padding: 0;
    opacity: 0.8;
}
.diag-category-cta i {
    margin-right: 5px;
    font-size: 11px;
}
.diag-tag-pct {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-left: 2px;
    opacity: 0.7;
}

.diag-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.diag-tag {
    font-size: 12px;
    padding: 4px 6px 4px 10px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.diag-tag:hover {
    background: rgba(239, 68, 68, 0.18);
}
.diag-tag.active {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fecaca;
}
.diag-tag-count {
    font-weight: 600;
    color: var(--text-secondary);
}
.diag-tag-pct {
    font-size: 10px;
    color: var(--text-tertiary);
    opacity: 0.5;
}

.diag-recommendation {
    font-size: 13px;
    color: var(--text-tertiary);
    line-height: 1.6;
    padding: 4px 0;
}
.diag-recommendation i {
    color: var(--warning);
    margin-right: 6px;
    font-size: 12px;
}
.diag-recommendation i {
    color: var(--warning);
    margin-right: 6px;
}

.diag-examples-btn {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 13px;
    padding: 8px 0;
    margin-top: 8px;
    transition: color var(--transition);
}
.diag-examples-btn:hover {
    color: var(--primary-light);
}

.diag-examples {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
}
.diag-example {
    padding: 12px 16px;
    position: relative;
}
.diag-example + .diag-example::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    border-top: 1px dashed rgba(255,255,255,0.12);
}
.diag-example-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.diag-example-stars {
    color: var(--text-tertiary);
    font-size: 11px;
}
.diag-example-author {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}
.diag-example-date {
    font-size: 11px;
    color: var(--text-tertiary);
}
.diag-example-order {
    font-size: 11px;
    color: var(--text-tertiary);
    text-decoration: none;
    margin-left: auto;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.diag-example-order:hover {
    opacity: 1;
    color: var(--accent);
}
.diag-example-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Variant 2: gradient fade from center */
.diag-category:nth-child(2) .diag-example + .diag-example::before {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 30%, rgba(255,255,255,0.15) 70%, transparent 100%);
}

/* Variant 3: solid thin line, shorter */
.diag-category:nth-child(3) .diag-example + .diag-example::before {
    border: none;
    height: 1px;
    left: 10%;
    right: 10%;
    background: rgba(255,255,255,0.08);
}

/* Responsive */
@media (max-width: 640px) {
    .diag-summary {
        flex-direction: column;
    }
    .diag-category-header {
        flex-wrap: wrap;
    }
    .reviews-summary {
        flex-direction: column;
        gap: 16px;
    }
    .reviews-metrics-bar {
        flex-direction: column;
    }
    .review-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .review-order-link {
        margin-left: 0;
    }
}

/* ══════════════════════════════════════════════════════════════
   Nova Poshta Settings & TTN Modal
   ══════════════════════════════════════════════════════════════ */

/* NP Settings Page */
.np-back-link { color: var(--text-secondary); margin-right: 12px; text-decoration: none; transition: color .2s; }
.np-back-link:hover { color: var(--primary); }

.np-section { background: rgba(30,41,59,0.75); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.np-section-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.np-section-title i { color: var(--primary); font-size: 14px; }
.np-empty { color: var(--text-tertiary); font-size: 14px; padding: 16px 0; font-style: italic; }

/* API Key Cards */
.np-keys-list { display: flex; flex-direction: column; gap: 10px; }
.np-key-item { display: flex; align-items: stretch; padding: 14px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border); cursor: pointer; transition: all 0.25s; background: var(--surface); }
.np-key-item:hover { border-color: var(--border-light); box-shadow: 0 0 12px rgba(0,0,0,0.15); }
.np-key-item.np-key-active { border-color: rgba(16,185,129,0.35); background: linear-gradient(90deg, rgba(16,185,129,0.06) 0%, transparent 40%); }
.np-key-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.np-key-name { font-weight: 600; font-size: 15px; color: var(--text-primary); }
.np-key-mask { font-family: 'Courier New', monospace; font-size: 12px; color: var(--text-tertiary); letter-spacing: 0.5px; }
.np-key-acc { font-size: 13px; color: var(--text-secondary); }
.np-key-actions { display: flex; gap: 14px; align-items: center; margin-left: 16px; flex-shrink: 0; }
.np-key-star { color: var(--text-tertiary); cursor: pointer; font-size: 15px; transition: color .2s; }
.np-key-star.active { color: #fbbf24; cursor: default; }
.np-key-star:not(.active):hover { color: #fbbf24; }
.np-key-refresh { color: var(--text-tertiary); cursor: pointer; font-size: 14px; transition: color .2s; }
.np-key-refresh:hover { color: var(--primary); }
.np-key-delete { color: var(--text-tertiary); cursor: pointer; font-size: 14px; transition: color .2s; }
.np-key-delete:hover { color: var(--danger); }

/* Service Badges on Keys */
.np-key-svcs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.np-svc { font-size: 11px; padding: 2px 8px; border-radius: 10px; display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.04); color: var(--text-tertiary); border: 1px solid rgba(255,255,255,.05); }
.np-svc-on { background: rgba(16,185,129,.08); color: var(--primary); border-color: rgba(16,185,129,.15); }

/* Sender Address Cards */
.np-addr-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); margin-bottom: 8px; background: var(--surface); transition: border-color .2s; }
.np-addr-item:hover { border-color: var(--border-light); }
.np-addr-icon { color: var(--primary); font-size: 15px; flex-shrink: 0; }
.np-addr-desc { flex: 1; font-size: 14px; color: var(--text-primary); }
.np-addr-default { font-size: 11px; color: var(--primary); background: rgba(16,185,129,.1); padding: 2px 10px; border-radius: 10px; font-weight: 500; }
.np-addr-star { color: var(--text-tertiary); cursor: pointer; font-size: 13px; transition: color .2s; }
.np-addr-star:hover { color: #fbbf24; }
.np-addr-del { color: var(--text-tertiary); cursor: pointer; font-size: 13px; transition: color .2s; }
.np-addr-del:hover { color: var(--danger); }

/* NP Settings Form — compact labeled grid */
.np-defaults-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.np-field { display: flex; flex-direction: column; gap: 6px; }
.np-field-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px; }
.np-field select, .np-field input[type="text"] {
    background: rgba(0,0,0,.2); border: 1px solid var(--border); color: var(--text-primary);
    padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; width: 100%; box-sizing: border-box;
    transition: border-color .2s; cursor: pointer;
}
.np-field select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.np-field select:focus, .np-field input[type="text"]:focus { border-color: var(--primary); outline: none; }
.np-field select option { background: var(--bg-secondary); color: var(--text-primary); padding: 8px; }
.np-field-toggle { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.np-field-toggle-label { font-size: 14px; color: var(--text-primary); display: block; }
.np-field-toggle-hint { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; line-height: 1.5; max-width: 620px; }

/* Address Modal */
.np-addr-modal-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.np-addr-type-row { display: flex; gap: 8px; }
.np-addr-type-btn { flex: 1; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all .2s; }
.np-addr-type-btn:hover { border-color: var(--border-light); }
.np-addr-type-btn.active { border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.08); color: var(--primary); }
.np-addr-field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.np-addr-field label { font-size: 12px; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px; }
.np-addr-field input, .np-addr-field select {
    background: rgba(0,0,0,.2); border: 1px solid var(--border); color: var(--text-primary);
    padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; width: 100%; box-sizing: border-box;
    transition: border-color .2s;
}
.np-addr-field input:focus, .np-addr-field select:focus { border-color: var(--primary); outline: none; }
.np-addr-field input::placeholder { color: var(--text-tertiary); }

/* Search results dropdown */
/* Warehouse scrollable list */
.np-wh-list { max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 6px; background: rgba(0,0,0,.15); }
.np-wh-list:empty { display: none; }
.np-wh-item { padding: 9px 14px; font-size: 13px; color: var(--text-primary); cursor: pointer; border-bottom: 1px solid var(--border); transition: background .15s; }
.np-wh-item:last-child { border-bottom: none; }
.np-wh-item:hover { background: rgba(16,185,129,.06); }
.np-wh-item.selected { background: rgba(16,185,129,.12); color: var(--primary); font-weight: 500; }

.np-search-results { position: absolute; top: 100%; left: 0; right: 0; max-height: 220px; overflow-y: auto; border-radius: var(--radius-sm); background: var(--bg-secondary); border: 1px solid var(--border-light); box-shadow: var(--shadow-lg); z-index: 100; margin-top: 4px; }
.np-search-item { padding: 10px 14px; cursor: pointer; font-size: 14px; color: var(--text-primary); border-bottom: 1px solid var(--border); transition: background .15s; }
.np-search-item:last-child { border-bottom: none; }
.np-search-item:hover { background: rgba(16,185,129,.08); }

/* Courier address fields row */
.np-addr-courier-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }

/* Form-wide styles (shared) */
.np-form-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.np-form-row span { font-size: 14px; color: var(--text-secondary); white-space: nowrap; }

.ds-gear { color: var(--color-text-secondary); font-size: 14px; margin-left: auto; margin-right: 8px; text-decoration: none; }
.ds-gear:hover { color: var(--color-primary); }

/* Templates page */
.tpl-vars { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:12px 16px; margin-bottom:20px; font-size:12px; color:var(--text-tertiary); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tpl-vars span { margin-right:4px; }
/* Змінні клікабельні (копіюються в буфер) — cursor:pointer і реакція на hover
   тут не косметика, а єдиний натяк, що по них взагалі можна клікнути. */
.tpl-vars code { background:rgba(16,185,129,.08); color:var(--primary); padding:3px 8px; border-radius:6px; font-size:12px; font-family:inherit; cursor:pointer; border:1px solid rgba(16,185,129,.12); transition:background .15s, border-color .15s, transform .1s; user-select:none; }
.tpl-vars code:hover { background:rgba(16,185,129,.16); border-color:rgba(16,185,129,.35); }
.tpl-vars code:active { transform:scale(.94); }
/* Спалах підтвердження: видно САМЕ ту змінну, яку скопійовано — тост цього не каже */
.tpl-vars code.copied { background:rgba(16,185,129,.32); border-color:var(--primary); color:#fff; }
/* align-items:start — картки по висоті свого вмісту. Зі stretch (дефолт) коротша
   картка тягнулась до сусідки й під текстом зяяла порожнеча. */
.tpl-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; align-items:start; }
.tpl-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:18px; display:flex; flex-direction:column; }
.tpl-card-full { grid-column:1/-1; }
.tpl-header { font-size:14px; font-weight:600; margin-bottom:10px; display:flex; align-items:center; gap:8px; color:#f8fafc; }
.tpl-header i { color:#06b6d4; font-size:15px; }
.tpl-header .btn { margin-left:auto; }
/* ⚠️ flex:1 тут БУЛО і ламало кутик розтягування: у flex-колонці висоту такого
   елемента диктує контейнер, а `height`, який ставить resize, просто ігнорується —
   користувач тягне, нічого не рухається (скарга Івана 2026-07-29). Тепер висотою
   керує сам textarea: JS підганяє її під текст при відкритті, далі — руками. */
.tpl-textarea { width:100%; background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.06); color:var(--text-primary); padding:12px; border-radius:8px; font-size:14px; font-family:inherit; resize:vertical; box-sizing:border-box; line-height:1.6; flex:0 0 auto; min-height:160px; transition:border-color .2s; outline:none; }
.tpl-textarea:focus { border-color:rgba(6,182,212,.3); }
.tpl-actions { display:flex; gap:8px; margin-top:10px; }
/* Заголовок групи шаблонів: «Ручні повідомлення покупцю» vs «Після створення накладної» */
.tpl-group-title { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-tertiary); margin:22px 0 10px; }
.tpl-group-title:first-of-type { margin-top:0; }
.tpl-hint { font-size:12px; line-height:1.5; color:var(--text-tertiary); margin-bottom:10px; }
.tpl-toggle { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--text-secondary); margin-bottom:10px; cursor:pointer; user-select:none; }
.tpl-toggle input { accent-color:var(--primary); width:16px; height:16px; cursor:pointer; }
.tpl-textarea:disabled { opacity:.5; cursor:not-allowed; }
@media(max-width:768px) { .tpl-grid { grid-template-columns:1fr; } }

.intg-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.intg-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.intg-icon { font-size: 28px; color: var(--color-primary); margin-top: 2px; }
.intg-name { font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.intg-desc { font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }
.intg-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,.06); color: var(--color-text-secondary); font-weight: 400; vertical-align: middle; white-space: nowrap; }
.intg-badge-ok { background: rgba(0,255,135,.12); color: var(--color-primary); }
.intg-badge-err { background: rgba(220,53,69,.18); color: var(--color-error, #ff6b81); }
.intg-badge-warn { background: rgba(255,193,7,.14); color: var(--color-warning, #ffc107); }
.intg-balance { margin-left: auto; font-size: 14px; color: var(--color-primary); font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.intg-body { border-top: 1px solid var(--glass-border); padding-top: 16px; }
.intg-body .np-form-row { margin-bottom: 4px; }
.intg-body .np-form-row span { min-width: 80px; }
.intg-body input[type="text"] { background: rgba(0,0,0,.25); border: 1px solid var(--glass-border); color: var(--color-text); padding: 10px 14px; border-radius: 8px; font-size: 14px; font-family: monospace; width: 100%; box-sizing: border-box; transition: border-color .2s; }
.intg-body input[type="text"]:focus { border-color: var(--color-primary); outline: none; }
.intg-body input[type="text"]::placeholder { color: var(--color-text-secondary); opacity: .5; font-family: inherit; }

/* Integrations v2 — card grid */
.intg-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.intg-card2 { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:14px; transition:border-color .25s; }
.intg-card2:hover { border-color:rgba(255,255,255,.1); }
.intg-card2-head { display:flex; gap:14px; align-items:flex-start; }
.intg-card2-icon { font-size:28px; color:#06b6d4; flex-shrink:0; margin-top:2px; }
.intg-card2-info { flex:1; min-width:0; }
.intg-card2-name { font-weight:600; font-size:16px; color:#f8fafc; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.intg-card2-desc { font-size:13px; color:#94a3b8; margin-top:3px; }
.intg-card2-balance { font-size:14px; color:var(--primary); font-weight:600; margin-top:6px; display:flex; align-items:center; gap:6px; }
.intg-card2-key { display:flex; align-items:center; gap:8px; padding:8px 12px; background:rgba(0,0,0,.15); border-radius:8px; }
/* white-space:nowrap + min-width:0 — без них ellipsis не працює взагалі: замаскований
   ключ це один нерозривний токен, він не переносився й просто вилазив за картку, тягнучи
   за собою горизонтальний скрол сторінки (скарга Івана 2026-07-29, мобільний). */
.intg-card2-masked { font-family:'Courier New',monospace; font-size:13px; color:#94a3b8; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Іконка інтеграції картинкою (Нова Пошта) — у ту саму коробку, що й шрифтова */
.intg-card2-icon--img { width:28px; height:28px; object-fit:contain; }
.intg-card2-setup { display:flex; gap:8px; align-items:center; }
.intg-card2-input { flex:1; background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.08); color:var(--text-primary); padding:10px 14px; border-radius:8px; font-size:14px; font-family:monospace; outline:none; transition:border-color .2s; }
.intg-card2-input:focus { border-color:rgba(6,182,212,.3); }
.intg-card2-input::placeholder { color:#64748b; font-family:inherit; }
.intg-card2-hint { font-size:12px; color:#64748b; }
.intg-card2-hint a { color:#06b6d4; text-decoration:none; }
.intg-card2-hint a:hover { text-decoration:underline; }
@media(max-width:768px) { .intg-grid { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════════
   TTN Modal v3 — ported from make_ttn_v2 + order.css
   ══════════════════════════════════════════════════════════════ */
#ttn-modal { z-index: 1050; }
.ttn-modal-content {
    background: radial-gradient(ellipse at 15% 10%, rgba(99,102,241,0.12) 0%, transparent 55%), radial-gradient(ellipse at 85% 5%, rgba(139,92,246,0.08) 0%, transparent 50%), radial-gradient(ellipse at 50% 95%, rgba(6,182,212,0.08) 0%, transparent 55%), #0f172a; border: 1px solid rgba(255,255,255,.1); border-radius: 20px;
    width: 95%; max-width: 920px; max-height: 92vh; overflow-y: auto;
    display: flex; flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.6);
}
.ttn-modal-header {
    display: flex; align-items: center; padding: 16px 28px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    position: sticky; top: 0; background: #0f172a; z-index: 2; border-radius: 20px 20px 0 0;
}
.ttn-modal-title { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ttn-header-key { margin-left:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:var(--text-primary); padding:6px 28px 6px 10px; border-radius:8px; font-size:13px; font-family:inherit; outline:none; cursor:pointer; -webkit-appearance:none; -moz-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%2364748b'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; transition:border-color .2s; max-width:200px; }
.ttn-header-key:focus { border-color:rgba(99,102,241,.4); }
.ttn-header-key option { background:#1e293b; }
.ttn-header-key-label {
    margin-left: 14px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px;
    color: var(--text-secondary); font-size: 12.5px; font-weight: 500;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 999px;
    max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    letter-spacing: 0.1px;
}
.ttn-header-key-label::before {
    content: "\f084";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-size: 10px;
    color: rgba(129, 140, 248, 0.85);
}
.ttn-header-gear { color:var(--text-tertiary); font-size:14px; transition:color .2s; margin-left:4px; }
.ttn-header-gear:hover { color:var(--primary); text-decoration:none; }
.ttn-modal-order { margin-left:auto; margin-right:16px; color:var(--text-secondary); font-size:14px; font-weight:500; }
.ttn-modal-ttn { position:absolute; left:50%; transform:translateX(-50%); font-family:'JetBrains Mono','Courier New',monospace; font-weight:700; font-size:18px; color:var(--primary); letter-spacing:1.5px; cursor:pointer; padding:4px 12px; border-radius:6px; transition:background .2s; }
.ttn-modal-ttn:hover { background:rgba(16,185,129,.1); }
.ttn-modal-body { padding: 28px; }

/* Form */
.ttn-form { display: flex; flex-direction: column; }

/* Section titles — make_ttn_v2 h3 style */
.ttn-h3 {
    font-size: 15px; font-weight: 600; color: var(--text-primary);
    margin: 20px 0 14px; display: flex; align-items: center; gap: 8px;
}
.ttn-h3 i { color: var(--primary); font-size: 14px; }
.ttn-h3:first-child { margin-top: 8px; }

/* Fading section divider */
.ttn-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); margin: 2px 0 12px; }

/* Grid layouts */
.ttn-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ttn-g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.ttn-g4 { display: grid; grid-template-columns: 170px 1fr 1fr 1fr; gap: 16px; }

/* Field — underline input (from order.css .field + .field-input) */
.ttn-f { position: relative; margin-bottom: 14px; }
.ttn-f-label {
    display: block; font-size: 12px; color: var(--text-tertiary);
    margin-bottom: 4px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
}
.ttn-f-label .req { color: #ef4444; }
.ttn-f-input {
    width: 100%; padding: 8px 0; border: none; border-bottom: 2px dotted rgba(255,255,255,.12);
    border-radius: 0; font-size: 16px; background: transparent; color: var(--text-primary);
    transition: border-color .3s; outline: none; font-family: inherit; box-sizing: border-box;
}
.ttn-f-input:hover { border-bottom-color: rgba(255,255,255,.25); }
.ttn-f-input:focus { border-bottom-style: solid; border-bottom-color: #6366f1; }
.ttn-f-input::placeholder { color: transparent; }
.ttn-f-input:read-only { color: var(--text-secondary); }
.ttn-f-input:disabled { color: var(--text-tertiary); border-bottom-color: rgba(255,255,255,.05); }

.ttn-date-wrap { max-width: 340px; margin-left: auto; margin-right: auto; text-align: center; }
.ttn-date-wrap .ttn-f-input {
    width: auto; max-width: 140px; display: block; margin: 0 auto; text-align: center;
}
.ttn-date-presets {
    display: flex; gap: 6px; margin-top: 8px; justify-content: center;
}
.ttn-date-preset {
    flex: 0 0 auto; padding: 4px 10px;
    font-size: 11px; font-weight: 500; font-family: inherit;
    color: var(--text-tertiary);
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.ttn-date-preset:hover {
    background: rgba(99,102,241,.1);
    border-color: rgba(99,102,241,.35);
    color: var(--text-secondary);
}
.ttn-date-preset.active {
    background: rgba(99,102,241,.18);
    border-color: rgba(99,102,241,.55);
    color: #a5b4fc;
}

/* Select — underline with arrow */
.ttn-f-select {
    width: 100%; padding: 8px 20px 8px 0; border: none; border-bottom: 2px dotted rgba(255,255,255,.12);
    border-radius: 0; font-size: 16px; background: transparent; color: var(--text-primary);
    transition: border-color .3s; outline: none; font-family: inherit; cursor: pointer;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%2364748b'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0 center;
}
.ttn-f-select:focus { border-bottom-style: solid; border-bottom-color: #6366f1; }
.ttn-f-select option { background: #1e293b; color: var(--text-primary); }

/* Key selector — boxed (from make_ttn_v2 .api-key-display) */
.ttn-key-box {
    padding: 12px 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px; font-size: 15px; color: var(--text-primary); cursor: pointer;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%2364748b'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; padding-right: 36px;
    width: 100%; font-family: inherit; outline: none; transition: all .2s;
    backdrop-filter: blur(10px);
}
.ttn-key-box:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
.ttn-key-box option { background: #1e293b; }

/* Cargo type pills (from make_ttn_v2 .cargo-radio-option) */
.ttn-cargo-types { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ttn-cargo-pill {
    display: flex; align-items: center; gap: 6px; padding: 10px 18px;
    border: 1px solid rgba(255,255,255,.1); border-radius: 12px; cursor: pointer;
    transition: all .3s; background: rgba(255,255,255,.04); color: var(--text-secondary);
    font-size: 14px; backdrop-filter: blur(10px);
}
.ttn-cargo-pill:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); }
.ttn-cargo-pill:has(input:checked) {
    border-color: #6366f1; background: rgba(99,102,241,.15); color: #a5b4fc;
    box-shadow: 0 4px 12px rgba(99,102,241,.2);
}
.ttn-cargo-pill input { display: none; }
.ttn-cargo-pill i { font-size: 13px; }

/* Cargo top row: pills left, description right */
.ttn-cargo-top { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 16px; }
.ttn-cargo-left { flex: 0 0 auto; }
.ttn-cargo-right { flex: 1; }

/* Price + Payment row (from make_ttn_v2 .price-and-payment-row) */
.ttn-price-payment {
    display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
    padding: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px; margin-bottom: 16px;
}
.ttn-price-col { flex: 0 0 auto; }
.ttn-payment-col { flex: 1; display: flex; flex-direction: column; gap: 12px; }

/* Payment radio pills (from make_ttn_v2 .payment-radio-option) */
.ttn-radio-group { display: flex; gap: 6px; flex-wrap: wrap; }
.ttn-radio-pill {
    display: flex; align-items: center; padding: 7px 14px; border-radius: 8px;
    cursor: pointer; transition: all .25s; background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08); color: var(--text-secondary); font-size: 13px;
}
.ttn-radio-pill:hover { border-color: rgba(255,255,255,.15); }
.ttn-radio-pill:has(input:checked) { background: #6366f1; color: #fff; border-color: #6366f1; }
.ttn-radio-pill input { display: none; }
.ttn-radio-label { font-size: 12px; color: var(--text-tertiary); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }

/* COD toggle (from make_ttn_v2 .modern-toggle-label) */
.ttn-toggle-label {
    display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px; cursor: pointer; transition: all .3s; font-size: 14px; color: var(--text-secondary);
}
.ttn-toggle-label:has(input:checked) { background: rgba(99,102,241,.1); border-color: rgba(99,102,241,.3); color: #a5b4fc; }
.ttn-toggle-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.ttn-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.ttn-toggle-slider {
    position: absolute; inset: 0; border-radius: 11px; background: rgba(255,255,255,.1);
    transition: all .3s; cursor: pointer;
}
.ttn-toggle-slider::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--text-tertiary); transition: all .3s;
}
.ttn-toggle-switch input:checked + .ttn-toggle-slider { background: rgba(99,102,241,.3); }
.ttn-toggle-switch input:checked + .ttn-toggle-slider::after { transform: translateX(18px); background: #818cf8; }

/* Price display */
.ttn-price-wrap { display: flex; align-items: baseline; gap: 6px; }
.ttn-price-input {
    width: 100px; padding: 4px 0; border: none; border-bottom: 2px solid rgba(255,255,255,.1);
    background: transparent; color: var(--text-primary); font-size: 22px; font-weight: 700;
    outline: none; font-family: inherit; transition: border-color .2s;
}
.ttn-price-input:focus { border-bottom-color: #6366f1; }
.ttn-currency { color: var(--text-tertiary); font-size: 18px; font-weight: 600; }
/* Попередження про страховий мінімум: постачальник має бачити цифру, яка реально
   піде в накладну, ДО створення — інакше підняття до 500 виглядає як підміна. */
.ttn-min-cost-hint {
    margin-top: 8px; max-width: 320px; font-size: 12px; line-height: 1.45;
    color: var(--text-tertiary); display: flex; gap: 6px; align-items: flex-start;
}
.ttn-min-cost-hint i { margin-top: 2px; color: #10b981; }
.ttn-min-cost-hint b { color: var(--text-primary); font-weight: 700; }

/* COD info badges */
.ttn-cod-info { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }

/* Delivery type tabs (from make_ttn_v2 .delivery-types) */
.ttn-del-types {
    display: flex; gap: 4px; background: rgba(255,255,255,.04); border-radius: 12px;
    padding: 4px; border: 1px solid rgba(255,255,255,.06); margin: 12px 0 14px;
}
.ttn-del-opt {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 14px; border-radius: 8px; cursor: pointer; transition: all .25s;
    font-size: 13px; color: var(--text-secondary); border: none; background: transparent;
    font-family: inherit;
}
.ttn-del-opt:hover { color: var(--text-primary); background: rgba(255,255,255,.04); }
.ttn-del-opt.active { background: #6366f1; color: #fff; box-shadow: 0 2px 8px rgba(99,102,241,.3); }
.ttn-del-opt i { font-size: 12px; }

/* Weight/seats row */
.ttn-cargo-params { display: flex; gap: 16px; margin-bottom: 8px; }
.ttn-cargo-params .ttn-f { flex: 1; }

/* Glass-card sections inside modal */
.ttn-card {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px; padding: 22px 24px; margin-bottom: 16px;
}

/* Seat items (from make_ttn_v2 .seat-item-compact) */
.ttn-seats { margin-top: 8px; }
.ttn-seat {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px; margin-bottom: 8px; border-left: 3px solid rgba(255,255,255,.08);
    transition: border-color .2s;
}
.ttn-seat:hover { border-left-color: #6366f1; }
.ttn-seat-num { font-weight: 700; color: #6366f1; font-size: 14px; min-width: 22px; }
.ttn-seat-lbl { font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .03em; }
.ttn-seat-unit { font-size: 12px; color: var(--text-tertiary); }
.ttn-seat-x { font-size: 13px; color: var(--text-tertiary); }
.ttn-seat-input-sm { width: 42px !important; }
.ttn-seat-input {
    width: 60px; padding: 5px 4px; border: none; border-bottom: 1.5px solid rgba(255,255,255,.1);
    background: transparent; color: var(--text-primary); font-size: 14px; font-family: inherit;
    outline: none; text-align: center; transition: border-color .2s;
}
.ttn-seat-input:focus { border-bottom-color: #6366f1; }
.ttn-seat-dim { display: flex; align-items: center; gap: 3px; color: var(--text-tertiary); font-size: 13px; }
.ttn-seat-dim .ttn-seat-input { width: 42px; }
.ttn-seat-vol { font-size: 12px; color: #06b6d4; font-weight: 500; min-width: 70px; }
.ttn-seat-vol.warn { color: #f59e0b; }
.ttn-seat-rm { background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 14px; padding: 4px; transition: color .2s; margin-left: auto; }
.ttn-seat-rm:hover { color: #ef4444; }
.ttn-add-seat {
    display: flex; align-items: center; gap: 6px; padding: 6px 12px; margin-top: 4px;
    background: none; border: 1px dashed rgba(255,255,255,.1); border-radius: 8px;
    color: var(--text-tertiary); font-size: 13px; cursor: pointer; font-family: inherit;
    transition: all .2s;
}
.ttn-add-seat:hover { border-color: rgba(255,255,255,.2); color: var(--text-secondary); }

/* Documents weight selector */
.ttn-doc-weight { display: flex; gap: 6px; }
.ttn-doc-weight-opt {
    padding: 6px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px;
    background: rgba(255,255,255,.04); color: var(--text-secondary); font-size: 14px;
    cursor: pointer; transition: all .2s; font-family: inherit;
}
.ttn-doc-weight-opt:hover { border-color: rgba(255,255,255,.15); }
.ttn-doc-weight-opt.active { background: rgba(99,102,241,.15); border-color: #6366f1; color: #a5b4fc; }
.ttn-doc-weight-opt input { display: none; }

/* AI button */
.ttn-ai-btn {
    background: none; border: 1px solid rgba(255,255,255,.08); color: var(--text-tertiary);
    width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
    transition: all .2s; flex-shrink: 0;
}
.ttn-ai-btn:hover { color: #818cf8; border-color: rgba(99,102,241,.3); background: rgba(99,102,241,.06); }

/* Cost block */
.ttn-cost-block {
    background: rgba(16,185,129,.04); border: 1px solid rgba(16,185,129,.12);
    border-radius: 12px; padding: 14px 20px; font-size: 14px;
    display: flex; gap: 24px; flex-wrap: wrap; margin-top: 12px;
}
.ttn-cost-block b { color: var(--primary); font-weight: 600; }

/* Submit button (from order.css .btn-submit) */
.ttn-submit {
    width: 100%; padding: 14px; font-size: 16px; font-weight: 700;
    background: var(--primary); border: none; border-radius: 14px; color: #fff;
    cursor: pointer; font-family: inherit; transition: all .3s;
    box-shadow: 0 4px 12px rgba(16,185,129,.25); margin-top: 16px;
    position: relative; overflow: hidden;
}
.ttn-submit::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    transition: left .5s;
}
.ttn-submit:hover::before { left: 100%; }
.ttn-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,185,129,.35); }
.ttn-submit:disabled { opacity: .4; cursor: not-allowed; }

/* Редактор доставки: чіп ваги поштомата (у відділень вага вже в назві) */
.de-wh-kg { margin-left: 6px; font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }

/* Ліміти точки НП: підпис під адресою, підсвітка місця понад ліміт, блок причин */
.ttn-wh-limits { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; line-height: 1.4; }
.ttn-wh-limits.bad { color: var(--danger); }
.ttn-wh-limits.warn { color: var(--warning); }
.ttn-seat.over-limit .ttn-seat-input { border-color: var(--danger); color: var(--danger); }
.ttn-limits-problems {
    margin: 12px 0; padding: 10px 12px; font-size: 13px;
    border: 1px solid rgba(239, 68, 68, .4); border-radius: 10px; background: rgba(239, 68, 68, .08);
}
.ttn-limits-title { font-weight: 700; color: var(--danger); margin-bottom: 4px; }
.ttn-limits-problems ul { margin: 0 0 8px 18px; padding: 0; }
.ttn-limits-problems li { margin: 2px 0; }

/* Success */
/* Result page (after TTN creation) */
.ttn-result-wrap { animation: ttnFadeIn .4s ease-out; }
@keyframes ttnFadeIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }

/* Info grid 2x2 */
.ttn-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.ttn-info-card { background:rgba(255,255,255,.06); border:none; border-radius:12px; padding:14px 16px; backdrop-filter:blur(16px); transition:all .3s ease; }
.ttn-info-card:hover { background:rgba(255,255,255,.08); }
.ttn-info-card h4 { font-size:.95rem; font-weight:600; color:#f8fafc; margin-bottom:8px; display:flex; align-items:center; gap:8px; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:6px; }
.ttn-info-card h4 i { font-size:14px; }
.ttn-info-row { display:flex; justify-content:space-between; align-items:flex-start; padding:4px 6px; margin:0 -6px; font-size:.9rem; gap:4px; flex-wrap:wrap; border-radius:4px; transition:background .15s; }
.ttn-info-row:hover { background:rgba(255,255,255,.03); }
.ttn-info-row .lbl { font-weight:400; color:#94a3b8; flex-shrink:0; min-width:120px; }
.ttn-info-row .val { font-weight:600; color:#f8fafc; text-align:right; flex:1; }
.ttn-info-row.total-row { border-top:1px solid rgba(255,255,255,.1); padding-top:16px; margin-top:8px; }
.ttn-info-row.total-row .val { font-size:1.3rem; color:var(--primary); font-weight:700; }
/* Числа (дати, суми) — моноширинний JB Mono + tabular, як усюди в застосунку.
   Текстові значення (адреса, ПІБ) виключаємо через .ttn-val-text. */
.ttn-result-wrap .ttn-info-row .val { font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; }
.ttn-result-wrap .ttn-info-row .val.ttn-val-text { font-family:inherit; font-variant-numeric:normal; }
/* Бейджі (КОНТРОЛЬ ОПЛАТИ / ОПЛАЧЕНО / БЕЗКОШТОВНО) — це ТЕКСТ, не цифри:
   повертаємо Inter (успадковували моно від .val) */
.ttn-result-wrap .ttn-info-row .val .ttn-pay-badge { font-family:'Inter',system-ui,sans-serif; font-variant-numeric:normal; }

/* Payment badges */
.ttn-pay-badge { display:inline-flex; align-items:center; gap:4px; font-size:.75rem; padding:4px 10px; border-radius:6px; font-weight:600; margin-right:8px; text-transform:uppercase; letter-spacing:.5px; }
.ttn-pay-badge i { font-size:.85rem; }
.ttn-pay-badge.paid { background:rgba(34,197,94,.15); border:1px solid rgba(34,197,94,.3); color:#22c55e; }
.ttn-pay-badge.cod { background:rgba(245,158,11,.15); border:1px solid rgba(245,158,11,.3); color:#f59e0b; }
.ttn-pay-badge.free { background:rgba(16,185,129,.15); border:1px solid rgba(16,185,129,.3); color:#10b981; }
.ttn-pay-badge.nocod { background:rgba(255,193,7,.1); border:1px solid rgba(255,193,7,.3); color:#f59e0b; font-size:.9rem; padding:12px 16px; margin-top:16px; display:flex; gap:8px; border-radius:12px; }

/* Print cards */
.ttn-print-cards { display:flex; gap:8px; }
.ttn-print-card { flex:1; background:#1e293b; border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:12px 8px; text-align:center; cursor:pointer; transition:all .3s ease; position:relative; min-width:0; }
.ttn-print-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.1); }
.ttn-print-card:hover .ttn-print-actions { display:flex; }
.ttn-print-actions { display:none; position:absolute; top:8px; right:8px; gap:4px; background:rgba(0,0,0,.85); border-radius:8px; padding:4px; z-index:2; backdrop-filter:blur(8px); }
.ttn-print-action { width:28px; height:28px; border:none; background:transparent; color:#fff; border-radius:4px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; transition:all .2s ease; }
.ttn-print-action:hover { background:rgba(255,255,255,.2); transform:scale(1.1); }
.ttn-print-card .print-icon { font-size:1.5rem; color:#06b6d4; margin-bottom:6px; display:flex; align-items:center; justify-content:center; width:32px; height:24px; position:relative; margin:0 auto 6px; }
.ttn-print-card i { font-size:1.5rem; color:#06b6d4; }
.ttn-print-card span { display:block; font-size:.9rem; font-weight:600; color:#f8fafc; }
.ttn-print-card .double-icon { position:relative; display:flex; align-items:center; justify-content:center; width:32px; height:24px; margin:0 auto 6px; padding-right:4px; }
.ttn-print-card .double-icon i:first-child { position:absolute; top:-3px; right:0; z-index:1; opacity:.8; font-size:1.2rem; }
.ttn-print-card .double-icon i:last-child { position:relative; z-index:2; font-size:1.2rem; }

/* Messages section */
/* Message grid — 2 columns side by side */
.ttn-msg-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.ttn-msg-header { display:flex; align-items:center; gap:6px; margin-bottom:8px; font-size:.9rem; color:#f8fafc; font-weight:600; }
.ttn-msg-text { width:100%; background:rgba(0,0,0,.15); border:1px solid rgba(255,255,255,.06); color:var(--text-primary); padding:12px; border-radius:8px; font-size:14px; font-family:inherit; resize:vertical; min-height:120px; outline:none; box-sizing:border-box; line-height:1.5; }
.ttn-msg-text:focus { border-color:rgba(6,182,212,.3); }
.ttn-msg-counter { font-size:11px; color:var(--text-tertiary); margin-left:auto; font-weight:400; font-style:italic; opacity:0.7; }
.ttn-msg-actions { display:flex; gap:6px; margin-top:8px; }

/* Clickable phone */
.clickable-phone { cursor:pointer; position:relative; }
.clickable-phone:hover { color:var(--accent); }
.clickable-phone::before { content:'\f0c5'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:10px; margin-right:4px; opacity:0; transition:opacity .2s; }
.clickable-phone:hover::before { opacity:0.7; }
.clickable-phone::after { content:'Клікніть для копіювання'; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.85); color:#fff; font-size:11px; padding:4px 10px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s; margin-bottom:6px; }
.clickable-phone:hover::after { opacity:1; }

/* Contact buttons */
.ttn-contact-btns { display:flex; gap:6px; margin-top:8px; }
.ttn-contact-btn { width:36px; height:36px; border-radius:8px; border:1px solid rgba(255,255,255,.08); background:var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.ttn-contact-btn:hover { border-color:rgba(6,182,212,.3); transform:translateY(-2px); }
.ttn-contact-btn img { width:18px; height:18px; }

/* Button: outline variant */
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text-secondary); }
.btn-outline:hover { background:var(--glass); color:var(--text-primary); border-color:var(--border-light); }
.btn-success { background:rgba(16,185,129,.15); border:1px solid rgba(16,185,129,.3); color:#34d399; }
.btn-success:hover { background:rgba(16,185,129,.25); }

/* Flash animation for "скопійовано" confirmation on copy buttons */
.btn-copied {
    background: rgba(16,185,129,.18) !important;
    border-color: rgba(16,185,129,.5) !important;
    color: #34d399 !important;
    transition: background .2s, border-color .2s, color .2s;
}

/* Result action buttons */
.ttn-result-actions { display:flex; gap:12px; justify-content:center; padding-top:16px; border-top:1px solid rgba(255,255,255,.06); flex-wrap:wrap; }

@media (max-width: 768px) {
    .ttn-modal-content { width: 100%; max-height: 100vh; max-height: 100dvh; border-radius: 0; }
    .ttn-g2, .ttn-g3, .ttn-g4 { grid-template-columns: 1fr; }
    .ttn-cargo-top { flex-direction: column; }
    .ttn-price-payment { flex-direction: column; }

    /* ── Модалка накладної на телефоні (Іван 2026-07-29) ──
       Було два незалежних лиха. Перше: номер ТТН у шапці — position:absolute із
       центруванням, тобто поза потоком; на вузькому екрані він лягав просто
       поверх «Замовлення №…». Друге: мобільний блок схлопував лише .ttn-g2/g3/g4,
       а сітки .ttn-info-grid (Доставка/Вартість/Отримувач/Друк) і .ttn-msg-grid
       (SMS/Месенджери) лишались двоколонковими — по ~180px на колонку, звідки
       й «не влазить». Блоків тут багато й вони самодостатні, тож на телефоні
       просто ставимо їх один під одним. */
    .ttn-modal-header { flex-wrap: wrap; gap: 8px 10px; padding: 12px 16px; border-radius: 0; }
    .ttn-modal-ttn {
        position: static; transform: none;
        font-size: 15px; letter-spacing: .5px; padding: 2px 6px;
    }
    .ttn-modal-order { margin-left: 0; margin-right: 0; font-size: 12.5px; }
    .ttn-modal-header .modal-close { margin-left: auto; }
    .ttn-modal-body { padding: 16px 14px; }
    .ttn-info-grid, .ttn-msg-grid { grid-template-columns: 1fr; }
    /* У повній ширині картки підпис уже не тисне значення, але на 360px
       фіксовані 120px усе одно ламали рядок навпіл. */
    .ttn-info-row .lbl { min-width: 0; }
    .ttn-info-row .val { word-break: break-word; }
}

/* ==================================================================
   BALANCE PAGE
   ================================================================== */

.balance-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.balance-header-actions { display: flex; gap: 12px; align-items: center; }
.balance-requests-link, .balance-settings-link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 10px;
    background: var(--glass); border: 1px solid rgba(255,255,255,.08);
    color: var(--text-secondary); text-decoration: none; font-size: 14px;
    transition: all .2s;
}
.balance-requests-link:hover, .balance-settings-link:hover {
    background: rgba(6,182,212,.1); border-color: rgba(6,182,212,.3);
    color: var(--accent);
}
.balance-badge {
    background: var(--primary); color: #fff; border-radius: 10px;
    padding: 2px 8px; font-size: 12px; font-weight: 600;
}
.balance-back {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text-secondary); text-decoration: none; margin-right: 8px;
    padding: 4px 8px; border-radius: 8px; transition: all .2s;
}
.balance-back:hover { background: var(--glass); color: var(--text-primary); }

/* 4 metrics */
.balance-summary {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; margin-bottom: 24px;
}
.balance-metric {
    background: var(--glass); backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
    padding: 16px 18px;
}
.balance-metric-total {
    background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(6,182,212,.08));
    border-color: rgba(16,185,129,.3);
}
.balance-metric-label {
    color: var(--text-secondary); font-size: 13px; margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
}
.balance-metric-value {
    font-size: 22px; font-weight: 700; color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.balance-metric-total .balance-metric-value { color: #34d399; }
.balance-metric-value.negative { color: #f87171; }
.balance-help {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 50%;
    background: rgba(255,255,255,.08); color: var(--text-secondary);
    font-size: 10px; cursor: help;
}

/* Toolbar: tabs + filters */
.balance-toolbar {
    display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
    margin-bottom: 16px;
}
.balance-tabs {
    display: flex; gap: 4px; background: var(--glass);
    border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 4px;
}
.balance-tab {
    background: transparent; border: none; padding: 8px 16px;
    color: var(--text-secondary); border-radius: 8px; cursor: pointer;
    font-size: 14px; transition: all .2s;
}
.balance-tab:hover { color: var(--text-primary); }
.balance-tab.active { background: var(--accent); color: #0f172a; font-weight: 600; }
.balance-filter-row {
    display: flex; gap: 16px; align-items: center; flex: 1; flex-wrap: wrap;
}
.balance-checkbox {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text-secondary); font-size: 14px; cursor: pointer;
}
.balance-search-wrap {
    position: relative; flex: 1; min-width: 240px;
}
#balance-search-input {
    width: 100%; padding: 10px 36px 10px 12px; background: var(--glass);
    border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
    color: var(--text-primary); font-size: 14px;
}
#balance-search-input:focus { outline: none; border-color: rgba(6,182,212,.5); }
#balance-search-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.08); color: var(--text-secondary); cursor: pointer;
}

/* Selection bar */
.balance-selection-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 12px 16px; margin-bottom: 16px; flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(6,182,212,.08), rgba(16,185,129,.08));
    border: 1px solid rgba(6,182,212,.3); border-radius: 12px;
}
.balance-selection-info { color: var(--text-primary); font-size: 14px; }
.balance-selection-actions { display: flex; gap: 8px; }

/* Orders table */
.balance-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: var(--glass); backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.08); border-radius: 16px; overflow: hidden;
}
.balance-table thead th {
    background: rgba(255,255,255,.03); padding: 12px; font-size: 12px;
    text-transform: uppercase; letter-spacing: .5px;
    color: var(--text-secondary); text-align: left; font-weight: 600;
}
.balance-table tbody tr { transition: background .15s; }
.balance-table tbody tr.balance-group-row { border-top: 1px solid rgba(255,255,255,.04); }
.balance-table tbody tr.balance-group-row:hover { background: rgba(255,255,255,.02); }
.balance-table tbody tr.balance-sub-row {
    background: rgba(0,0,0,.15); border-left: 3px solid var(--accent);
    font-size: 13px; color: var(--text-secondary);
}
.balance-table td { padding: 10px 12px; }
.balance-table th.col-checkbox, .balance-table td.col-checkbox { width: 36px; text-align: center; padding-left: 8px; padding-right: 8px; }
.balance-table th.col-status-icon, .balance-table td.col-status-icon { width: 40px; text-align: center; padding-left: 4px; padding-right: 12px; }
.balance-table .col-prom { min-width: 140px; }
.balance-table .col-ttn { min-width: 160px; font-family: 'Courier New', monospace; font-size: 13px; }
.balance-table .col-price, .balance-table .col-commission { text-align: right; font-variant-numeric: tabular-nums; }

/* TTN inline status icon */
.ttn-cell-wrap {
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
}
.ttn-status-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    font-size: 10px; font-weight: 700; flex-shrink: 0;
    cursor: help; font-family: sans-serif;
}
.ttn-status-icon.ttn-ok { background: rgba(255,255,255,.06); color: var(--text-secondary); }
.ttn-status-icon.ttn-warn { background: rgba(245,158,11,.2); color: #fbbf24; }
.ttn-status-icon.ttn-err { background: rgba(239,68,68,.2); color: #f87171; }

/* Warning icon in status col — always centered */
.balance-table td.col-status-icon .balance-warning-icon { margin: 0; }
.balance-table tr.not-eligible { opacity: .55; }
.balance-table tr.row-cancelled { opacity: .45; color: var(--text-secondary); }
.balance-table tr.row-zero-comm { background: rgba(239,68,68,.08); }
.balance-prom-link {
    color: var(--accent); text-decoration: none; font-weight: 600;
}
.balance-prom-link:hover { text-decoration: underline; }
.balance-expand-btn, .balance-expand-placeholder {
    display: inline-block; width: 20px; text-align: center;
    margin-right: 4px; vertical-align: middle;
}
.balance-expand-btn {
    background: none; border: none; color: var(--text-secondary);
    cursor: pointer; padding: 0;
    transition: transform .15s;
}
.balance-expand-btn.open { transform: rotate(90deg); }
.balance-expand-placeholder { pointer-events: none; }
.balance-warning-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; margin-left: 6px;
    cursor: help; border-radius: 50%; font-size: 12px;
}
.balance-warning-icon.eligible-yes { background: rgba(16,185,129,.15); color: #34d399; }
.balance-warning-icon.not-eligible { background: rgba(245,158,11,.15); color: #fbbf24; }
.balance-warning-icon.row-cancelled-icon { background: rgba(148,163,184,.15); color: #94a3b8; }
.balance-warning-icon.row-zero-comm-icon { background: rgba(239,68,68,.15); color: #f87171; }
.balance-warning-icon.in-request-icon { background: rgba(59,130,246,.15); color: #60a5fa; }
.balance-mixed-chip {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    background: rgba(245,158,11,.15); color: #fbbf24;
    font-size: 11px; font-weight: 600; cursor: help;
}

.balance-reasons-popup {
    position: absolute; z-index: 1000; background: #1e293b;
    border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
    padding: 12px 14px; font-size: 13px; color: var(--text-primary);
    max-width: 360px; box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.balance-reasons-popup ul { margin: 0; padding-left: 18px; }
.balance-reasons-popup li { margin-bottom: 4px; }
.balance-reasons-popup a { color: var(--accent); }

/* ── Balance redesign (Phase 3 legacy — superseded by #balance-section block) ── */

/* Tab counts — бульбашка праворуч від назви */
.balance-tab {
    display: inline-flex; align-items: center; gap: 8px;
}
.balance-tab .balance-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px;
    background: rgba(255,255,255,.08); color: var(--text-secondary);
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
    line-height: 1;
}
.balance-tab.active .balance-tab-count {
    background: rgba(15,23,42,.2); color: #0f172a;
}

/* Status chip row (під табами, тільки для 'unsettled') */
.balance-chips-row {
    display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
    margin-bottom: 14px;
}
.balance-chips {
    display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap;
    padding: 4px; background: var(--glass);
    border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
}
.balance-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border: 1px solid transparent; border-radius: 8px;
    background: transparent; color: var(--text-secondary);
    font-size: 13px; cursor: pointer; transition: all .15s;
}
.balance-chip:hover {
    background: rgba(255,255,255,.04); color: var(--text-primary);
}
.balance-chip.active {
    background: rgba(6,182,212,.12);
    border-color: rgba(6,182,212,.35);
    color: var(--text-primary);
}
.balance-chip-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    flex-shrink: 0;
}
.balance-chip-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; padding: 0 6px; height: 18px; border-radius: 9px;
    background: rgba(255,255,255,.06); color: var(--text-secondary);
    font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.balance-chip-count-subtle {
    background: transparent; margin-left: 6px;
    color: var(--text-tertiary, #64748b); font-weight: 500;
}
.balance-chips-sep {
    width: 1px; height: 18px; background: rgba(255,255,255,.08);
    margin: 0 4px;
}

/* Status dot (в колонці "Статус") */
.status-with-dot {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: help; border-bottom: 1px dashed transparent;
}
.status-with-dot:hover { border-bottom-color: rgba(255,255,255,.18); }
.status-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    flex-shrink: 0;
}
.status-dot-info { background: var(--info, #3b82f6); }
.status-dot-warn { background: var(--warning, #f59e0b); }
.status-dot-ok   { background: var(--primary, #10b981); }
.status-dot-bad  { background: var(--danger, #ef4444); }

/* Колонка "%" (комісія в відсотках) */
.balance-table th.col-pct, .balance-table td.col-pct {
    width: 52px; text-align: right; font-variant-numeric: tabular-nums;
    color: var(--text-tertiary, #64748b); font-size: 12px;
}

/* Колонка "ОПЛАТА" */
.balance-table th.col-payment, .balance-table td.col-payment { min-width: 180px; }
.pay-cell { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.pay-main { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.pay-main.pay-mixed { color: #fbbf24; font-style: italic; }
.pay-sub {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--text-secondary);
}
.pay-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    flex-shrink: 0;
}
.pay-ok  .pay-dot { background: var(--primary, #10b981); }
.pay-ok  { color: var(--primary, #10b981); }
.pay-warn .pay-dot { background: var(--warning, #f59e0b); }
.pay-warn { color: #fbbf24; }
.pay-bad .pay-dot { background: var(--danger, #ef4444); }
.pay-bad { color: #f87171; }
.pay-muted .pay-dot { background: var(--text-tertiary, #64748b); }
.pay-muted { color: var(--text-tertiary, #64748b); }

/* Дрібні корекції колонки ТТН */
.ttn-cell-wrap.ttn-none {
    color: var(--text-tertiary, #64748b); font-style: italic; font-family: inherit;
}
.ttn-status-icon.ttn-ok {
    /* Було: сірий. Тепер зелений ✓ — TTN додано в Пром успішно. */
    background: rgba(16,185,129,.15); color: #34d399;
}
.ttn-status-icon.ttn-err {
    /* Яскравіше: червоний ✕ — ТТН є, але в Пром не додано = гроші під ризиком */
    background: rgba(239,68,68,.25); color: #ef4444;
    box-shadow: 0 0 0 1px rgba(239,68,68,.35);
}
.ttn-status-icon.ttn-pending {
    background: rgba(255,255,255,.06); color: var(--text-tertiary, #64748b);
    font-size: 8px;
}

.balance-loading {
    text-align: center; padding: 40px; color: var(--text-secondary);
    background: var(--glass); border-radius: 16px;
}
.balance-empty {
    text-align: center; padding: 60px 20px; color: var(--text-secondary);
    background: var(--glass); border-radius: 16px;
}
.balance-empty i { font-size: 48px; margin-bottom: 12px; opacity: .4; }

.balance-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 20px; gap: 16px;
}
#balance-pagination { display: flex; gap: 6px; align-items: center; }
.balance-page-btn {
    background: var(--glass); border: 1px solid rgba(255,255,255,.08);
    color: var(--text-primary); padding: 6px 12px; border-radius: 8px;
    cursor: pointer; font-size: 13px; transition: all .2s;
}
.balance-page-btn:hover { background: rgba(6,182,212,.1); border-color: rgba(6,182,212,.3); }
.balance-page-btn.active { background: var(--accent); color: #0f172a; font-weight: 600; }
.balance-page-btn:disabled { opacity: .4; cursor: not-allowed; }

.balance-submit-body { gap: 12px; overflow-y: auto; }
.balance-submit-summary {
    padding: 12px 16px; margin: 0 0 16px; background: rgba(6,182,212,.06);
    border: 1px solid rgba(6,182,212,.2); border-radius: 10px;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
    color: var(--text-primary);
}
.balance-submit-form { display: flex; flex-direction: column; gap: 12px; }
.balance-submit-hint { font-size: 12px; color: var(--text-secondary); padding-top: 4px; }
.balance-submit-hint a { color: var(--accent); }

.balance-requests-list { display: flex; flex-direction: column; gap: 12px; }
.balance-request-card {
    display: grid; grid-template-columns: auto 1fr auto auto; gap: 16px;
    align-items: center; padding: 16px 20px;
    background: var(--glass); border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px; cursor: pointer; transition: all .2s;
    text-decoration: none; color: var(--text-primary);
}
.balance-request-card:hover { border-color: rgba(6,182,212,.3); transform: translateY(-1px); }
.balance-request-status {
    padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .3px;
}
.status-pending    { background: rgba(245,158,11,.15); color: #fbbf24; }
.status-processing { background: rgba(59,130,246,.15); color: #60a5fa; }
.status-completed  { background: rgba(16,185,129,.15); color: #34d399; }
.status-rejected   { background: rgba(239,68,68,.15); color: #f87171; }
.status-cancelled  { background: rgba(148,163,184,.15); color: #94a3b8; }
.balance-request-meta { color: var(--text-secondary); font-size: 13px; }
.balance-request-amount { font-size: 16px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.balance-request-detail-card {
    background: var(--glass); border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px; padding: 20px; margin-bottom: 16px;
}
.balance-request-detail-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px;
}
.balance-detail-field { color: var(--text-secondary); font-size: 13px; }
.balance-detail-field strong { display: block; color: var(--text-primary); font-size: 15px; margin-top: 2px; font-weight: 600; }
.balance-diff { color: #fbbf24; font-weight: 600; margin-left: 6px; }

@media (max-width: 768px) {
    .balance-summary { grid-template-columns: repeat(2, 1fr); }
    .balance-footer { flex-direction: column; align-items: stretch; }
    .balance-request-card { grid-template-columns: 1fr 1fr; }
    .balance-table { display: block; overflow-x: auto; }
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* Balance page — EXACT 1:1 port of Claude Design reference.                    */
/* Source: bagspace-design-system/project/preview/balance-page.html             */
/*                                                                              */
/* Правило: усе тут scope'оване на #balance-section. Токени --bp-* локальні —   */
/* не зачіпають палітру решти додатку.                                          */
/* ═══════════════════════════════════════════════════════════════════════════ */

#balance-section {
    /* Local tokens — ідентичні до референса */
    --bp-bg:           #0a0f1d;
    --bp-panel:        #121a2e;
    --bp-panel-2:      #0f1526;
    --bp-line:         rgba(255,255,255,0.06);
    --bp-line-strong:  rgba(255,255,255,0.10);
    --bp-text-1:       #f1f5f9;
    --bp-text-2:       #cbd5e1;
    --bp-text-3:       #94a3b8;
    --bp-text-4:       #64748b;
    --bp-emerald:      #34d399;
    --bp-emerald-deep: #10b981;
    --bp-amber:        #fbbf24;
    --bp-cyan:         #67e8f9;
    --bp-rose:         #fda4af;
    --bp-rose-deep:    #f43f5e;
    --bp-slate:        #94a3b8;

    position: relative;
    color: var(--bp-text-2);
    font-family: 'Inter', system-ui, sans-serif;
    font-feature-settings: 'cv11','ss01','ss03';
    -webkit-font-smoothing: antialiased;
    padding-bottom: 120px;  /* запас під sticky-bar */
}

/* ── Page header ── */
#balance-section .balance-header {
    display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
}
#balance-section .balance-header-title {
    display: flex; align-items: center; gap: 14px; flex: 0 0 auto;
}
/* Override глобального .section-title { display: flex; ::after } що робить
   заголовок flex-контейнером з підкреслювальною лінією. Тут нам це не треба. */
#balance-section .balance-header-title .section-title { display: block; }
#balance-section .balance-header-title .section-title::after { display: none; }
#balance-section .balance-header-title .breadcrumb {
    font-size: 12px; color: var(--bp-text-3); font-weight: 500;
    display: inline-flex; align-items: center; gap: 8px;
    text-transform: none; letter-spacing: 0;
}
#balance-section .balance-header-title .breadcrumb::after {
    content: '\f054';  /* fa-chevron-right */
    font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: 10px; opacity: 0.5;
}
#balance-section .balance-header-title .section-title {
    margin: 0; font-weight: 700; font-size: 22px; letter-spacing: -0.015em;
    color: var(--bp-text-1);
}
#balance-section .balance-header-actions { margin-left: auto; display: flex; gap: 8px; }
#balance-section .balance-header-actions a,
#balance-section .balance-header-actions button {
    padding: 8px 13px; font-size: 12.5px; font-weight: 500;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--bp-line-strong);
    color: var(--bp-text-2); border-radius: 8px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    transition: all 0.15s; text-decoration: none; font-family: inherit;
}
#balance-section .balance-header-actions a:hover,
#balance-section .balance-header-actions button:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.15);
    color: var(--bp-text-1);
}
#balance-section .balance-header-actions i { font-size: 11px; color: var(--bp-text-3); }

/* ── Balance metric cards ── */
#balance-section .balance-summary {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px;
}
#balance-section .balance-metric {
    padding: 16px 18px; border-radius: 12px;
    background: linear-gradient(180deg, var(--bp-panel) 0%, var(--bp-panel-2) 100%);
    border: 1px solid var(--bp-line); position: relative;
    backdrop-filter: none;
}
#balance-section .balance-metric-label {
    font-size: 11px; color: var(--bp-text-3); font-weight: 500;
    display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
    text-transform: none; letter-spacing: 0.005em;
}
#balance-section .balance-help {
    width: 13px; height: 13px; border-radius: 50%;
    background: rgba(255,255,255,0.05);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 8px; color: var(--bp-text-3); cursor: help;
}
#balance-section .balance-metric-value {
    font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 19px;
    letter-spacing: -0.015em; line-height: 1.1;
    color: var(--bp-text-1); font-variant-numeric: tabular-nums;
}
#balance-section .balance-metric-total {
    border-color: rgba(52,211,153,0.28);
    background: linear-gradient(180deg, rgba(52,211,153,0.04) 0%, rgba(16,185,129,0.02) 100%);
}
#balance-section .balance-metric-total .balance-metric-label { color: rgba(52,211,153,0.75); }
#balance-section .balance-metric-total .balance-metric-value { color: var(--bp-emerald); }
#balance-section .balance-metric-total .balance-metric-value.negative { color: var(--bp-rose); }

/* ── Tabs row ── */
#balance-section .balance-toolbar {
    display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
    flex-wrap: wrap;
}
#balance-section .balance-tabs {
    display: inline-flex; padding: 3px; border-radius: 10px;
    background: rgba(10,14,26,0.7);
    border: 1px solid var(--bp-line-strong);
    gap: 2px;
}
#balance-section .balance-tab {
    padding: 8px 14px; font-size: 12.5px; font-weight: 500;
    background: transparent; border: none; color: var(--bp-text-3);
    border-radius: 7px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    transition: color 0.15s, background 0.15s;
    letter-spacing: -0.005em;
    font-family: inherit;
}
#balance-section .balance-tab:hover:not(.active) {
    color: var(--bp-text-1); background: rgba(255,255,255,0.03);
}
#balance-section .balance-tab i { font-size: 10.5px; }
#balance-section .balance-tab .balance-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 10.5px;
    padding: 1px 6px; border-radius: 4px; min-width: 22px;
    background: rgba(255,255,255,0.05); color: var(--bp-text-3);
    height: auto; font-variant-numeric: tabular-nums;
}
/* Active tab — кольор-кодовані gradients (точно з референса) */
#balance-section .balance-tab.active[data-balance-view="unsettled"] {
    color: #3a2a05;
    background: linear-gradient(180deg, #fcd34d, #f59e0b);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 3px 8px -2px rgba(245,158,11,0.35);
    font-weight: 500;
}
#balance-section .balance-tab.active[data-balance-view="unsettled"] .balance-tab-count { background: rgba(0,0,0,0.18); color: #3a2a05; }
#balance-section .balance-tab.active[data-balance-view="unsettled"] i { color: #3a2a05; }

#balance-section .balance-tab.active[data-balance-view="eligible"] {
    color: #0a2015;
    background: linear-gradient(180deg, var(--bp-emerald), var(--bp-emerald-deep));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 3px 8px -2px rgba(16,185,129,0.35);
    font-weight: 500;
}
#balance-section .balance-tab.active[data-balance-view="eligible"] .balance-tab-count { background: rgba(0,0,0,0.2); color: #0a2015; }
#balance-section .balance-tab.active[data-balance-view="eligible"] i { color: #0a2015; }

#balance-section .balance-tab.active[data-balance-view="settled"] {
    color: #0f172a;
    background: linear-gradient(180deg, #cbd5e1, #94a3b8);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 3px 8px -2px rgba(148,163,184,0.35);
    font-weight: 500;
}
#balance-section .balance-tab.active[data-balance-view="settled"] .balance-tab-count { background: rgba(0,0,0,0.18); color: #0f172a; }
#balance-section .balance-tab.active[data-balance-view="settled"] i { color: #0f172a; }

/* Date-range period filter */
#balance-section .balance-date-wrap {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: auto;
    padding: 0 10px;
    background: rgba(10,14,26,0.7);
    border: 1px solid var(--bp-line-strong); border-radius: 8px;
}
#balance-section .balance-date-wrap > i {
    color: var(--bp-text-3); font-size: 11px;
}
#balance-section .balance-date-wrap input[type="date"] {
    background: transparent; border: none; outline: none;
    color: var(--bp-text-1); font-family: inherit; font-size: 12.5px;
    padding: 8px 0; width: 118px;
    color-scheme: dark;   /* нативний календар у темній темі */
}
#balance-section .balance-date-wrap input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer; opacity: .55;
}
#balance-section .balance-date-wrap input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
#balance-section .balance-date-wrap:focus-within {
    border-color: rgba(52,211,153,0.35);
    box-shadow: 0 0 0 3px rgba(52,211,153,0.1);
}
#balance-section .balance-date-sep { color: var(--bp-text-3); font-size: 12px; }
#balance-section #balance-date-clear {
    width: 22px; height: 22px; border-radius: 50%; border: none;
    background: rgba(255,255,255,0.08); color: var(--bp-text-3); cursor: pointer;
    font-size: 12px; flex-shrink: 0;
}
#balance-section #balance-date-clear:hover { background: rgba(255,255,255,0.14); color: var(--bp-text-1); }

/* Search */
#balance-section .balance-search-wrap {
    position: relative; flex: 1; min-width: 240px; max-width: 420px;
}
#balance-section .balance-search-wrap::before {
    content: '\f002'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--bp-text-3); font-size: 11px; pointer-events: none;
}
#balance-section #balance-search-input {
    width: 100%; padding: 8px 12px 8px 32px; font-size: 12.5px;
    background: rgba(10,14,26,0.7);
    border: 1px solid var(--bp-line-strong); border-radius: 8px;
    color: var(--bp-text-1); font-family: inherit;
}
#balance-section #balance-search-input::placeholder { color: var(--bp-text-3); }
#balance-section #balance-search-input:focus {
    outline: none; border-color: rgba(52,211,153,0.35);
    box-shadow: 0 0 0 3px rgba(52,211,153,0.1);
}
#balance-section #balance-search-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; border-radius: 50%; border: none;
    background: rgba(255,255,255,0.08); color: var(--bp-text-3); cursor: pointer;
    font-size: 12px;
}

/* ── Filter chip row ── */
#balance-section .balance-chips-row {
    display: flex; gap: 6px; margin-bottom: 10px;
    flex-wrap: wrap; align-items: center;
}
#balance-section .balance-chips {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 4px 4px 10px;
    background: rgba(10,14,26,0.5);
    border: 1px solid var(--bp-line);
    border-radius: 999px;
}
#balance-section .balance-chip-group-label {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--bp-text-3); font-weight: 600;
}
#balance-section .balance-chip {
    padding: 5px 11px; font-size: 11.5px; font-weight: 500;
    background: transparent; border: none; color: var(--bp-text-3);
    border-radius: 999px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
#balance-section .balance-chip:hover {
    color: var(--bp-text-1); background: rgba(255,255,255,0.04);
}
#balance-section .balance-chip.active {
    background: rgba(255,255,255,0.06); color: var(--bp-text-1);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}
/* Active chip — color-coded по status-group */
#balance-section .balance-chip.active[data-status-group="in_work"] {
    background: rgba(251,191,36,0.14); color: #fde68a;
    box-shadow: inset 0 0 0 1px rgba(251,191,36,0.3);
}
#balance-section .balance-chip.active[data-status-group="in_work"] .balance-chip-count { color: #fde68a; }
#balance-section .balance-chip.active[data-status-group="shipping"] {
    background: rgba(96,165,250,0.14); color: #93c5fd;
    box-shadow: inset 0 0 0 1px rgba(96,165,250,0.3);
}
#balance-section .balance-chip.active[data-status-group="shipping"] .balance-chip-count { color: #93c5fd; }
#balance-section .balance-chip.active[data-status-group="completed"] {
    background: rgba(52,211,153,0.14); color: var(--bp-emerald);
    box-shadow: inset 0 0 0 1px rgba(52,211,153,0.3);
}
#balance-section .balance-chip.active[data-status-group="completed"] .balance-chip-count { color: var(--bp-emerald); }

#balance-section .balance-chip-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    flex-shrink: 0;
}
#balance-section .balance-chip-count {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    opacity: 0.7; font-variant-numeric: tabular-nums;
    background: transparent; padding: 0; height: auto;
    min-width: 0; border-radius: 0; color: inherit;
}
#balance-section .balance-chip-count-subtle {
    color: var(--bp-text-4); font-weight: 500; margin-left: 4px;
}

/* "Скасовані" chip-checkbox */
#balance-section .balance-cancelled-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 10px; border-radius: 7px;
    font-size: 12px; color: var(--bp-text-3); cursor: pointer;
    user-select: none;
}
#balance-section .balance-cancelled-chip:hover {
    background: rgba(255,255,255,0.03); color: var(--bp-text-2);
}
#balance-section .balance-cancelled-chip input { display: none; }
#balance-section .balance-cancelled-box {
    width: 14px; height: 14px; border-radius: 3px;
    border: 1.5px solid rgba(255,255,255,0.18);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
#balance-section .balance-cancelled-box i { font-size: 7px; color: #fff; opacity: 0; }
#balance-section .balance-cancelled-chip input:checked ~ .balance-cancelled-box {
    background: var(--bp-amber); border-color: var(--bp-amber);
}
#balance-section .balance-cancelled-chip input:checked ~ .balance-cancelled-box i { opacity: 1; }
#balance-section .balance-cancelled-chip input:checked ~ span:not(.balance-cancelled-box) {
    color: var(--bp-amber);
}

/* "Скинути" */
#balance-section .balance-reset-btn {
    margin-left: auto; font-size: 11.5px; font-weight: 500;
    color: var(--bp-text-3); background: transparent; border: none;
    cursor: pointer; padding: 5px 8px;
    font-family: inherit;
}
#balance-section .balance-reset-btn:hover { color: var(--bp-rose); }

/* ── Table ── */
/* Wrapper отримує border + radius + clip; таблиця всередині — без власних
   меж і фону. Це гарантує що кути обрізаються чисто (overflow: hidden на
   wrapper'і не впливає на popover'и — вони fixed-positioned). */
#balance-section #balance-orders-table {
    background: linear-gradient(180deg, rgba(18,25,42,0.92), rgba(12,18,32,0.92));
    border: 1px solid var(--bp-line); border-radius: 12px;
    overflow: hidden;
}
#balance-section .balance-table {
    background: transparent;
    border: none;
    border-radius: 0;
    width: 100%;
    backdrop-filter: none;
    font-size: 12.5px;
    border-collapse: collapse;
}
#balance-section .balance-table thead th {
    padding: 11px 10px; font-size: 10px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--bp-text-3); font-weight: 600;
    text-align: left; background: rgba(255,255,255,0.015);
    border-bottom: 1px solid var(--bp-line);
    white-space: nowrap;
}
#balance-section .balance-table thead th.col-price,
#balance-section .balance-table thead th.col-commission,
#balance-section .balance-table thead th.col-pct { text-align: right; }
#balance-section .balance-table thead th.col-checkbox,
#balance-section .balance-table thead th.col-status-icon { text-align: center; }
#balance-section .balance-table tbody td {
    padding: 11px 10px; border-bottom: 1px solid rgba(255,255,255,0.035);
    vertical-align: middle; position: relative;
}
#balance-section .balance-table tbody tr:last-child td { border-bottom: none; }
#balance-section .balance-table tbody tr.balance-group-row { position: relative; }
#balance-section .balance-table tbody tr.balance-group-row:hover td { background: rgba(255,255,255,0.02); }
#balance-section .balance-table tbody tr.balance-group-row:has(.balance-group-checkbox:checked) td,
#balance-section .balance-table tbody tr.balance-group-row.selected td {
    background: rgba(52,211,153,0.045);
}
#balance-section .balance-table tr.balance-sub-row td {
    background: rgba(255,255,255,0.015) !important;
    border-bottom: 1px solid rgba(255,255,255,0.025);
    color: var(--bp-text-3); font-size: 11.5px;
    padding-left: 40px;
}
#balance-section .balance-table tr.not-eligible td { opacity: 0.78; }
#balance-section .balance-table tr.not-eligible:hover td { opacity: 0.95; }
#balance-section .balance-table tr.row-cancelled td { opacity: 0.55; color: var(--bp-text-3); }
#balance-section .balance-table tr.row-zero-comm td { background: transparent; color: var(--bp-rose); }

/* Column widths (відповідність референсу) */
#balance-section .balance-table .col-checkbox { width: 34px; text-align: center; }
#balance-section .balance-table .col-prom { width: 118px; }
#balance-section .balance-table .col-ttn { width: 170px; }
#balance-section .balance-table .col-price { width: 74px; text-align: right; }
#balance-section .balance-table .col-commission { width: 82px; text-align: right; }
#balance-section .balance-table .col-pct { width: 42px; text-align: right; }
#balance-section .balance-table .col-payment { width: auto; }
#balance-section .balance-table .col-status-icon { width: 30px; text-align: center; }

/* "· N тов." — лічильник після номера для multi-sub замовлень */
#balance-section .prom-items-cnt {
    opacity: 0.6; font-size: 12px;
    font-family: 'Inter', sans-serif;
    color: var(--bp-text-3);
}

/* Hover-ціль для popover'а — на td.col-prom і td.status. cursor: help
   єдиний по всій клітинці, щоб не миготіло коли курсор перетинає
   chevron-button / link / counter-span. */
#balance-section .balance-table td[data-pop-order],
#balance-section .balance-table td[data-pop-hist] {
    cursor: help;
}
/* Chevron і прямий лінк всередині — свій cursor (pointer для clickable) */
#balance-section .balance-table td[data-pop-order] .balance-expand-btn,
#balance-section .balance-table td[data-pop-order] .balance-prom-link {
    cursor: pointer;
}

/* Order ID (референс: звичайний білий, на hover — emerald з dashed underline) */
#balance-section .balance-prom-link {
    font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 12.5px;
    color: var(--bp-text-1); text-decoration: none;
    border-bottom: 1px dashed transparent; padding-bottom: 1px;
    letter-spacing: 0; font-variant-numeric: tabular-nums;
    cursor: pointer;
}
#balance-section .balance-prom-link:hover {
    color: var(--bp-emerald); border-bottom-color: rgba(52,211,153,0.35);
    text-decoration: none;
}
#balance-section .balance-sub-row .balance-prom-link {
    font-size: 11.5px; color: var(--bp-text-3); font-weight: 400;
}
#balance-section .balance-sub-row .balance-prom-link:hover {
    color: var(--bp-text-2); border-bottom-color: transparent;
}

/* Numeric values — wrapped в окремі span'и щоб гарантовано перебити
   глобальні td color-rules. Сума біла weight 500, комісія slate-400
   weight 400 — помітна різниця як у референсі.
   !important бо global "color: var(--text-primary)" на `.balance-table tbody td`
   має ту ж specificity що й scoped, і виграє за порядком в певних cases. */
#balance-section .balance-table .num-val {
    font-family: 'JetBrains Mono', monospace; font-weight: 500;
    color: var(--bp-text-1) !important;
    font-variant-numeric: tabular-nums;
}
#balance-section .balance-table .fee-val {
    font-family: 'JetBrains Mono', monospace; font-weight: 400;
    color: var(--bp-text-3) !important;        /* slate-400 — чітко сіріше за суму */
    font-variant-numeric: tabular-nums;
}
#balance-section .balance-table .pct-val {
    font-family: 'JetBrains Mono', monospace; font-weight: 400;
    color: var(--bp-text-4) !important;        /* slate-500 — найтемніший */
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}
#balance-section .balance-table .date-cell {
    font-family: 'JetBrains Mono', monospace;
    color: var(--bp-text-2) !important;
    font-size: 12px;
    font-variant-numeric: tabular-nums; letter-spacing: 0;
}

/* Expand chevron (multi-item parent) */
#balance-section .balance-expand-btn {
    width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--bp-text-3); cursor: pointer;
    transition: transform 0.15s, color 0.15s;
    font-size: 10px; margin-right: 4px;
    background: none; border: none; padding: 0;
    vertical-align: middle;
}
#balance-section .balance-expand-btn:hover { color: var(--bp-emerald); }
#balance-section .balance-expand-btn.open { transform: rotate(90deg); color: var(--bp-emerald); }
#balance-section .balance-expand-placeholder {
    display: inline-block; width: 14px; margin-right: 4px;
}

/* ── Status column ── */
#balance-section .status-with-dot {
    display: inline-flex; align-items: flex-start; gap: 6px;
    font-size: 12px; font-weight: 500; line-height: 1.3;
    cursor: help; border-bottom: 1px dashed transparent; padding-bottom: 1px;
}
#balance-section .status-with-dot:hover { border-bottom-color: rgba(255,255,255,0.18); }
#balance-section .status-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    flex: 0 0 auto; margin-top: 4px;
}
#balance-section .status-tone-wait    { color: var(--bp-amber); }
#balance-section .status-tone-wait .status-dot { background: var(--bp-amber); }
#balance-section .status-tone-transit { color: var(--bp-cyan); }
#balance-section .status-tone-transit .status-dot {
    background: var(--bp-cyan);
    box-shadow: 0 0 6px var(--bp-cyan);
    animation: bp-pulse 1.8s ease-in-out infinite;
}
#balance-section .status-tone-done    { color: var(--bp-emerald); }
#balance-section .status-tone-done .status-dot { background: var(--bp-emerald); }
#balance-section .status-tone-ret     { color: var(--bp-rose); }
#balance-section .status-tone-ret .status-dot { background: var(--bp-rose); }
@keyframes bp-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ── TTN cell: dot left + number + check right (референс) ── */
#balance-section .ttn-wrap {
    display: inline-flex; align-items: center; gap: 8px;
}
#balance-section .ttn-num {
    font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
    color: var(--bp-text-1); font-variant-numeric: tabular-nums;
    letter-spacing: 0; white-space: nowrap;
    border-bottom: 1px dashed transparent; padding-bottom: 1px;
    cursor: pointer;
}
#balance-section .ttn-num:hover { color: var(--bp-cyan); border-bottom-color: rgba(103,232,249,0.35); }
#balance-section .ttn-empty {
    color: var(--bp-text-4); font-size: 11.5px; font-style: italic;
    font-family: 'Inter', sans-serif;
}
#balance-section .prom-mark {
    display: inline-flex; align-items: center; gap: 3px; cursor: help;
}
#balance-section .prom-mark .dot { width: 5px; height: 5px; border-radius: 50%; }
#balance-section .prom-mark .check { font-size: 10px; }
#balance-section .prom-mark.in .dot {
    background: var(--bp-emerald);
    box-shadow: 0 0 5px rgba(52,211,153,0.5);
}
#balance-section .prom-mark.in .check { color: var(--bp-emerald); }
#balance-section .prom-mark.out .dot { background: var(--bp-amber); }
#balance-section .prom-mark.out .check { color: var(--bp-text-4); opacity: 0.4; }
#balance-section .prom-mark.warn .dot { background: var(--bp-amber); }
#balance-section .prom-mark.warn .check { color: var(--bp-amber); }
/* err — реальна помилка додавання, яскраво-червоний (не fade) */
#balance-section .prom-mark.err .check {
    color: var(--bp-rose-deep, #f43f5e);
    font-size: 13px;
    text-shadow: 0 0 6px rgba(244,63,94,0.4);
}

/* Stage-dot ліворуч ТТН — стадія посилки в перевізника
   (з np_ttn_info; для УП fallback на event_id). Зміщення на один step
   від кольорів колонки СТАТУС: тут "в дорозі" — cyan, "отримано" — emerald. */
#balance-section .ttn-stage-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.3s;  /* плавне оновлення коли prefetch добіжить */
}
#balance-section .ttn-stage-dot.pkg-grey    { background: var(--bp-text-4); }     /* створено / видалено */
#balance-section .ttn-stage-dot.pkg-cyan    { background: var(--bp-cyan); box-shadow: 0 0 5px rgba(103,232,249,0.4); }  /* в дорозі */
#balance-section .ttn-stage-dot.pkg-amber   { background: var(--bp-amber); box-shadow: 0 0 5px rgba(251,191,36,0.45); } /* на відділенні — чекає клієнта */
#balance-section .ttn-stage-dot.pkg-emerald { background: var(--bp-emerald); box-shadow: 0 0 5px rgba(52,211,153,0.5); }  /* отримано */
#balance-section .ttn-stage-dot.pkg-rose    { background: var(--bp-rose); }      /* повернення */

/* ── Payment cell ── */
#balance-section .pay-cell { display: flex; flex-direction: column; gap: 2px; font-size: 12px; min-width: 0; }
#balance-section .pay-main {
    color: var(--bp-text-2); line-height: 1.2; font-weight: 500;
}
#balance-section .pay-main.pay-mixed { color: var(--bp-amber); font-style: italic; }
#balance-section .pay-cat-unknown .pay-main { color: var(--bp-text-3); }
#balance-section .pay-sub {
    font-size: 10.5px; color: var(--bp-text-4); font-weight: 400;
    display: inline-flex; align-items: center; gap: 5px;
}
#balance-section .pay-sub .pay-dot {
    width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex: 0 0 auto;
}
#balance-section .pay-ok  { color: var(--bp-emerald); }
#balance-section .pay-warn { color: var(--bp-amber); }
#balance-section .pay-bad  { color: var(--bp-rose); }
#balance-section .pay-muted { color: var(--bp-text-4); font-style: italic; }
#balance-section .pay-muted .pay-dot { display: none; }  /* для s-neutral — без крапки */

/* ── Checkbox (custom, референс .chk) ── */
#balance-section input[type="checkbox"].balance-group-checkbox {
    width: 16px; height: 16px; border-radius: 4px;
    border: 1.5px solid rgba(255,255,255,0.18);
    appearance: none; -webkit-appearance: none; cursor: pointer;
    background: transparent; position: relative;
    transition: all 0.15s;
}
#balance-section input[type="checkbox"].balance-group-checkbox:checked {
    background: linear-gradient(135deg, var(--bp-emerald), var(--bp-emerald-deep));
    border-color: var(--bp-emerald);
    box-shadow: 0 0 0 3px rgba(52,211,153,0.1);
}
#balance-section input[type="checkbox"].balance-group-checkbox:checked::after {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 8px;
}

/* Header select-all checkbox */
#balance-section .balance-select-all-cb {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 4px;
    border: 1.5px solid rgba(255,255,255,0.18);
    background: transparent; cursor: pointer; transition: all 0.15s;
    position: relative;
}
#balance-section .balance-select-all-cb i {
    font-size: 8px; color: #fff; opacity: 0;
}
#balance-section .balance-select-all-cb.on {
    background: linear-gradient(135deg, var(--bp-emerald), var(--bp-emerald-deep));
    border-color: var(--bp-emerald);
    box-shadow: 0 0 0 3px rgba(52,211,153,0.1);
}
#balance-section .balance-select-all-cb.on i { opacity: 1; }
#balance-section .balance-select-all-cb.ind {
    background: rgba(52,211,153,0.45); border-color: var(--bp-emerald);
}
#balance-section .balance-select-all-cb.ind::after {
    content: ''; width: 8px; height: 2px; background: #fff; border-radius: 1px; position: absolute;
}

/* ── Warning triangle (not-eligible) — через FA icon, без тексту ⚠ ──
   Перекриваємо глобальний .balance-warning-icon з background+border-radius
   що робив трикутник в кружечку та зсував його від чекбокса (margin-left: 6px) */
#balance-section .balance-warning-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; cursor: help;
    font-size: 0;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0;
}
#balance-section .balance-warning-icon.not-eligible::before {
    content: '\f071';  /* fa-triangle-exclamation */
    font-family: 'Font Awesome 6 Free'; font-weight: 900;
    color: var(--bp-amber); font-size: 13px;
}
#balance-section .balance-warning-icon.eligible-yes::before {
    content: '\f00c';  /* fa-check */
    font-family: 'Font Awesome 6 Free'; font-weight: 900;
    color: var(--bp-emerald); font-size: 12px;
}

/* ── Sticky payout bar ──
   Position/width задаються JS-ом (pinBarToTable) — бар прив'язується до
   ширини таблиці мінус 8px (4px з кожного боку) щоб ховатись її межами.
   CSS лише задає висоту/фон/тінь. */
#balance-section .balance-selection-bar {
    position: fixed; bottom: 20px; z-index: 200;
    /* left/width з JS */
    background: linear-gradient(180deg, rgba(20,30,50,0.97), rgba(14,20,34,0.97));
    border: 1px solid rgba(52,211,153,0.32);
    border-radius: 14px; padding: 12px 18px;
    display: flex; align-items: center; gap: 16px;
    box-shadow: 0 0 0 1px rgba(52,211,153,0.05), 0 24px 48px -12px rgba(0,0,0,0.6);
    backdrop-filter: blur(12px);
    transition: opacity 0.2s;
    margin: 0;
    flex-wrap: nowrap;
    box-sizing: border-box;
}
/* Directional appearance — from_vendor (постачальник нам) — нейтральний slate,
   без emerald-акценту. Не "alert", не "success" — простий стан "потрібна оплата нам". */
#balance-section .balance-selection-bar.dir-from {
    border-color: rgba(148,163,184,0.32);
    box-shadow: 0 0 0 1px rgba(148,163,184,0.05), 0 24px 48px -12px rgba(0,0,0,0.6);
}
#balance-section .balance-selection-bar.dir-from #balance-request-submit {
    background: linear-gradient(180deg, #94a3b8, #64748b 55%, #475569);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 6px 14px -2px rgba(100,116,139,0.4);
}
#balance-section .balance-selection-bar.dir-from .balance-selection-info .selbar-metric .v.em {
    color: var(--bp-text-1);  /* білий, не emerald */
}
#balance-section .balance-selection-info {
    color: var(--bp-text-1); font-size: 13px; flex: 1;
    display: flex; align-items: center; gap: 0;
}
#balance-section .balance-selection-info .selbar-count {
    font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 15px;
    color: var(--bp-text-1); font-variant-numeric: tabular-nums;
}
#balance-section .balance-selection-info .selbar-count .selbar-of {
    color: var(--bp-text-3); font-weight: 400; margin: 0 2px;
}
#balance-section .balance-selection-info .selbar-label {
    font-family: 'Inter', sans-serif; color: var(--bp-text-3);
    font-weight: 400; margin-left: 10px; font-size: 11.5px;
    white-space: nowrap;
}
#balance-section .balance-selection-info .selbar-metrics {
    display: inline-flex; gap: 20px; margin-left: 16px;
    padding-left: 16px; border-left: 1px solid var(--bp-line);
}
#balance-section .balance-selection-info .selbar-metric {
    display: inline-flex; flex-direction: column; gap: 2px;
}
#balance-section .balance-selection-info .selbar-metric .k {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--bp-text-3); font-weight: 600;
}
#balance-section .balance-selection-info .selbar-metric .v {
    font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 13.5px;
    color: var(--bp-text-1); font-variant-numeric: tabular-nums;
}
#balance-section .balance-selection-info .selbar-metric .v.em { color: var(--bp-emerald); }
#balance-section .balance-selection-actions {
    display: flex; gap: 8px; align-items: center;
}
#balance-section #balance-clear-selection {
    padding: 7px 13px; font-size: 12.5px; font-weight: 500;
    background: transparent; border: 1px solid var(--bp-line-strong);
    color: var(--bp-text-3); border-radius: 8px;
    font-family: inherit; cursor: pointer;
}
#balance-section #balance-clear-selection:hover {
    color: var(--bp-rose); border-color: rgba(244,63,94,0.25);
    background: transparent;
}
/* Primary CTA — точно як у референсі (без overkill glow) */
#balance-section #balance-request-submit {
    padding: 10px 18px; font-size: 13px; font-weight: 600;
    color: #fff; border: none; border-radius: 9px;
    background: linear-gradient(180deg, var(--bp-emerald), var(--bp-emerald-deep) 55%, #0a9e74);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 6px 14px -2px rgba(16,185,129,0.4);
    display: inline-flex; align-items: center; gap: 8px;
    letter-spacing: -0.005em; font-family: inherit;
    cursor: pointer; transition: transform 0.15s;
}
#balance-section #balance-request-submit:hover { transform: translateY(-1px); }
#balance-section #balance-request-submit i { color: #fff; }

/* Empty state */
#balance-section .balance-empty {
    text-align: center; padding: 48px 20px; color: var(--bp-text-3);
    background: linear-gradient(180deg, rgba(18,25,42,0.6), rgba(12,18,32,0.6));
    border: 1px solid var(--bp-line); border-radius: 12px;
}
#balance-section .balance-empty i { font-size: 32px; opacity: 0.3; margin-bottom: 12px; }

/* Mobile */
@media (max-width: 768px) {
    #balance-section { padding-bottom: 100px; }
    #balance-section .balance-selection-info .selbar-metrics { display: none; }
}


/* ════════ Hover popovers (Phase 4) ════════
   Глобальний #balance-pop-layer (на body) — показує одну з двох карток:
   - .balance-pop-order — міні-картка замовлення (товари + суми + причини)
   - .balance-pop-hist  — таймлайн історії статусів
   Дані: prefetch після рендера таблиці (POST /orders/details), історія
   lazy на перший hover. Позиціонування fixed, auto-flip above/below. */

#balance-pop-layer {
    position: fixed; inset: 0; z-index: 100000;
    pointer-events: none;
}
.balance-pop {
    position: absolute; width: 380px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    background: #0b1220;
    border: 1px solid rgba(148,163,184,0.2);
    border-radius: 14px;
    box-shadow: 0 28px 60px -10px rgba(0,0,0,0.9), 0 0 0 1px rgba(0,0,0,0.45);
    padding: 18px 20px;
    opacity: 0; transform: translateY(4px);
    transition: opacity 0.12s, transform 0.12s;
    /* pointer-events: auto завжди — інакше коли popover з'являється під cursor,
       browser НЕ робить hit-test на нього, popover не отримує mouseenter, і
       після того як cursor "зачепиться" за нього — нема способу зупинити hide. */
    pointer-events: auto;
    font-family: 'Inter', sans-serif;
    color: #cbd5e1;
    box-sizing: border-box;
}
.balance-pop.vis { opacity: 1; transform: translateY(0); }

.balance-pop .ph {
    display: flex; align-items: flex-start; gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 10px;
}
.balance-pop .ph .ttl {
    font-family: 'JetBrains Mono', monospace; font-weight: 600;
    font-size: 14px; color: #f1f5f9;
}
.balance-pop .ph .sub {
    font-size: 12.5px; color: #94a3b8; margin-top: 3px;
    font-family: 'Inter', sans-serif;
}
.balance-pop .ph .badge { margin-left: auto; }
.balance-pop-stat {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; padding: 3px 8px; border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}
.balance-pop-stat .status-dot { margin: 0; }
.balance-pop-stat.status-tone-wait { color: #fbbf24; border-color: rgba(251,191,36,0.25); }
.balance-pop-stat.status-tone-transit { color: #67e8f9; border-color: rgba(103,232,249,0.25); }
.balance-pop-stat.status-tone-done { color: #34d399; border-color: rgba(52,211,153,0.25); }
.balance-pop-stat.status-tone-done .status-dot { background: #34d399; }
.balance-pop-stat.status-tone-ret { color: #fda4af; border-color: rgba(244,63,94,0.25); }

/* Goods list */
.balance-pop .pop-goods {
    display: flex; flex-direction: column; gap: 11px;
}
.balance-pop .pop-goods .g {
    display: flex; align-items: center; gap: 12px; font-size: 13px;
}
.balance-pop .pop-goods .g .thumb {
    width: 40px; height: 40px; border-radius: 7px;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border: 1px solid rgba(255,255,255,0.06);
    display: inline-flex; align-items: center; justify-content: center;
    color: #94a3b8; font-size: 13px; flex: 0 0 auto;
    overflow: hidden;
}
.balance-pop .pop-goods .g .thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.balance-pop .pop-goods .g .nm {
    flex: 1; color: #cbd5e1; line-height: 1.35; font-size: 13px;
    overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.balance-pop .pop-goods .g .nm .meta {
    font-size: 11.5px; color: #64748b; margin-top: 3px;
    font-family: 'JetBrains Mono', monospace;
}
.balance-pop .pop-goods .g .prc {
    font-family: 'JetBrains Mono', monospace; font-weight: 500;
    color: #cbd5e1; font-size: 12.5px; white-space: nowrap;
}
.balance-pop .pop-goods .g-loading {
    color: #94a3b8; font-size: 11.5px; padding: 8px 0; text-align: center;
    font-style: italic;
}

/* Meta rows */
.balance-pop .pop-meta {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; flex-direction: column; gap: 8px;
}
.balance-pop .pop-meta .mrow {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; font-size: 13px; min-height: 22px;
}
.balance-pop .pop-meta .mrow .k {
    color: #94a3b8; font-size: 11.5px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.balance-pop .pop-meta .mrow .v {
    color: #cbd5e1; font-weight: 400; text-align: right;
    font-family: 'Inter', sans-serif; font-size: 13px;
}
.balance-pop .pop-meta .mrow .v.strong {
    font-family: 'JetBrains Mono', monospace; font-weight: 700;
    font-size: 15px; color: #f1f5f9;
}
.balance-pop .pop-meta .mrow .v.mono {
    font-family: 'JetBrains Mono', monospace; font-size: 12.5px;
    font-variant-numeric: tabular-nums; color: #cbd5e1;
}
/* TTN з іконкою перевізника (в Order popover meta-row) */
.balance-pop .ttn-with-carrier {
    display: inline-flex; align-items: center; gap: 6px;
}
.balance-pop .pop-meta .mrow .v .na {
    color: #64748b; font-style: italic;
    font-family: 'Inter', sans-serif; font-size: 11px;
}
.balance-pop .pop-meta .mrow.split {
    margin-top: 4px; padding-top: 8px;
    border-top: 1px dashed rgba(255,255,255,0.06);
}

/* Reasons block (для not-eligible) */
.balance-pop-reasons {
    margin-top: 12px; padding: 10px 12px; border-radius: 8px;
    background: rgba(251,191,36,0.06);
    border: 1px solid rgba(251,191,36,0.22);
}
.balance-pop-reasons .rh {
    font-size: 10.5px; text-transform: uppercase;
    letter-spacing: 0.07em; color: #fbbf24; font-weight: 700;
    margin-bottom: 6px;
}
.balance-pop-reasons .rh i { font-size: 10px; margin-right: 5px; }
.balance-pop-reasons ul {
    margin: 0; padding-left: 16px; color: #cbd5e1;
    font-size: 11.5px; line-height: 1.5;
}
.balance-pop-reasons li { margin-bottom: 3px; }

/* TTN popover — той же base але вужче (нема списку товарів) */
.balance-pop.balance-pop-ttn { width: 360px; }
.balance-pop-ttn .ttn-pop-carrier-row {
    margin-top: 6px;
    display: inline-flex; gap: 7px; align-items: center;
}
.balance-pop-ttn .ttn-pop-carrier-icon {
    width: 16px; height: 16px; border-radius: 3px;
    object-fit: contain; flex: 0 0 auto;
}
.balance-pop-ttn .ttn-pop-carrier {
    font-family: 'Inter', sans-serif;
    color: #cbd5e1; font-size: 12px; font-weight: 500;
}
.balance-pop-ttn .ago {
    font-family: 'Inter', sans-serif; font-size: 10.5px;
    color: #64748b; font-weight: 400;
    margin-left: 4px; font-variant-numeric: normal;
}
/* "Поточний стан" — кольорова крапка + текст */
.balance-pop-ttn .ttn-pop-state {
    display: inline-flex; align-items: center; gap: 6px;
    text-align: right;
}
.balance-pop-ttn .ttn-pop-state .ttn-stage-dot {
    flex: 0 0 auto; transition: none;
}

/* "У Пром" warn/error rows + текст помилки під ними */
.balance-pop-ttn .ttn-pop-prom-issue.warn .v {
    color: #fbbf24; display: inline-flex; align-items: center; gap: 5px;
}
.balance-pop-ttn .ttn-pop-prom-issue.err .v {
    color: #fda4af; display: inline-flex; align-items: center; gap: 5px;
}
.balance-pop-ttn .ttn-pop-prom-issue i { font-size: 11px; }
.balance-pop-ttn .ttn-pop-prom-error {
    margin-top: 6px; padding: 8px 10px; border-radius: 7px;
    background: rgba(244,63,94,0.08);
    border: 1px solid rgba(244,63,94,0.2);
    font-size: 11.5px; color: #fda4af; line-height: 1.5;
    font-family: 'Inter', sans-serif;
}
.balance-pop-ttn .ttn-pop-prom-issue.warn ~ .ttn-pop-prom-error {
    background: rgba(251,191,36,0.08);
    border-color: rgba(251,191,36,0.2);
    color: #fde68a;
}

/* Order popover — оновлений carrier icon (SVG, не літерний бейдж) */
.balance-pop .carrier-svg-icon {
    width: 14px; height: 14px; border-radius: 3px;
    object-fit: contain; flex: 0 0 auto;
}

/* Status history popover */
.balance-pop.balance-pop-hist { width: 290px; }
.balance-pop-hist .tl {
    position: relative; padding-left: 18px;
    display: flex; flex-direction: column; gap: 10px; margin-top: 4px;
}
.balance-pop-hist .tl::before {
    content:''; position: absolute;
    left: 5px; top: 6px; bottom: 6px;
    width: 1.5px; background: rgba(148,163,184,0.22);
}
.balance-pop-hist .ev {
    position: relative; display: flex; flex-direction: column; gap: 2px;
    font-size: 11.5px;
}
.balance-pop-hist .ev::before {
    content:''; position: absolute;
    left: -18px; top: 4px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #1e293b; border: 2px solid rgba(148,163,184,0.3);
}
.balance-pop-hist .ev.cur::before {
    background: #34d399; border-color: #34d399;
    box-shadow: 0 0 0 3px rgba(52,211,153,0.2);
}
.balance-pop-hist .ev.tone-wait::before { background: #fbbf24; border-color: #fbbf24; }
.balance-pop-hist .ev.tone-transit::before { background: #67e8f9; border-color: #67e8f9; }
.balance-pop-hist .ev.tone-done::before { background: #34d399; border-color: #34d399; }
.balance-pop-hist .ev.tone-ret::before { background: #fda4af; border-color: #fda4af; }
/* Синтетичний "Створено" — нейтральний slate, без яскравого fill */
.balance-pop-hist .ev.tone-init::before { background: #1e293b; border-color: #64748b; }
.balance-pop-hist .ev .ttl {
    color: #f1f5f9; font-weight: 500; line-height: 1.3;
    font-family: 'Inter', sans-serif; font-size: 11.5px;
}
.balance-pop-hist .ev:not(.cur) .ttl { color: #94a3b8; }
.balance-pop-hist .ev .when {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    color: #94a3b8; white-space: nowrap;
    font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.balance-pop-hist .ev .hist-ago {
    font-family: 'Inter', sans-serif; font-size: 9.5px;
    color: #64748b; font-weight: 400;
    margin-left: 8px; font-variant-numeric: normal;
    letter-spacing: 0;
}

.balance-pop .pop-loading {
    color: #94a3b8; font-size: 11.5px; padding: 16px;
    text-align: center; font-style: italic;
}


/* ════════ Balance-page "submit request" modal (redesigned) ════════ */

.bp-modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(5,8,16,0.78);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.bp-modal {
    --bp-emerald: #34d399;
    --bp-emerald-deep: #10b981;
    --bp-amber: #fbbf24;
    --bp-rose: #fda4af;
    --bp-text-1: #f1f5f9;
    --bp-text-2: #cbd5e1;
    --bp-text-3: #94a3b8;
    --bp-text-4: #64748b;
    --bp-line: rgba(255,255,255,0.06);
    --bp-line-strong: rgba(255,255,255,0.10);

    width: 100%; max-width: 620px; max-height: calc(100vh - 40px);
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, rgba(22,30,48,0.99), rgba(14,20,34,0.99));
    border: 1px solid var(--bp-line-strong);
    border-radius: 16px; overflow: hidden; position: relative;
    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(52,211,153,0.08);
    color: var(--bp-text-2);
    font-family: 'Inter', sans-serif;
}
.bp-modal-head {
    padding: 22px 26px 18px; border-bottom: 1px solid var(--bp-line);
    position: relative; flex: 0 0 auto;
}
.bp-modal-head::before {
    content:''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 10%, rgba(52,211,153,0.5) 50%, transparent 90%);
}
.bp-modal-head h2 {
    margin: 0 0 5px; font-weight: 700; font-size: 19px;
    color: var(--bp-text-1); letter-spacing: -0.015em; line-height: 1.2;
}
.bp-modal-sub {
    font-size: 12.5px; color: var(--bp-text-2); line-height: 1.5; margin: 0;
    padding-right: 36px;
}
.bp-modal-x {
    position: absolute; top: 18px; right: 18px; width: 30px; height: 30px;
    border-radius: 50%; background: rgba(255,255,255,0.04);
    border: 1px solid var(--bp-line-strong); color: var(--bp-text-2);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s; font-size: 12px;
}
.bp-modal-x:hover {
    background: rgba(244,63,94,0.12); color: var(--bp-rose);
    border-color: rgba(244,63,94,0.25);
}
.bp-modal-body { padding: 20px 26px; overflow-y: auto; flex: 1 1 auto; }

/* Payout hero — big number */
.bp-payout-hero {
    margin-bottom: 18px; padding: 16px 18px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(52,211,153,0.1) 0%, rgba(16,185,129,0.04) 55%, rgba(52,211,153,0.12) 100%);
    border: 1px solid rgba(52,211,153,0.25); position: relative; overflow: hidden;
}
.bp-payout-hero::before {
    content:''; position: absolute; top: -20px; right: -40px;
    width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle, rgba(52,211,153,0.18), transparent 65%);
    pointer-events: none;
}
.bp-payout-hero-k {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--bp-emerald); font-weight: 700; margin-bottom: 6px;
    position: relative;
}
.bp-payout-hero-v {
    font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 32px;
    color: var(--bp-emerald); letter-spacing: -0.02em; line-height: 1;
    position: relative; font-variant-numeric: tabular-nums;
    text-shadow: 0 0 20px rgba(52,211,153,0.35);
}
.bp-payout-hero-v .cur {
    font-family: 'Inter', sans-serif; font-weight: 500; font-size: 15px;
    opacity: 0.85; margin-left: 4px;
}
.bp-payout-hero-hint {
    margin-top: 8px; font-size: 11.5px; color: var(--bp-text-2);
    display: inline-flex; align-items: center; gap: 6px; position: relative;
}
.bp-payout-hero-hint i { color: var(--bp-emerald); font-size: 10px; }
.bp-payout-hero.negative {
    background: linear-gradient(135deg, rgba(244,63,94,0.08) 0%, rgba(190,18,60,0.02) 55%, rgba(244,63,94,0.08) 100%);
    border-color: rgba(244,63,94,0.25);
}
.bp-payout-hero.negative::before { background: radial-gradient(circle, rgba(244,63,94,0.14), transparent 65%); }
.bp-payout-hero.negative .bp-payout-hero-k,
.bp-payout-hero.negative .bp-payout-hero-v { color: var(--bp-rose); text-shadow: none; }
.bp-payout-hero.negative .bp-payout-hero-hint i { color: var(--bp-rose); }

/* "reverse" — постачальник платить нам. Нейтральний slate, без alarm-кольорів. */
.bp-payout-hero.reverse {
    background: linear-gradient(135deg, rgba(148,163,184,0.08) 0%, rgba(100,116,139,0.02) 55%, rgba(148,163,184,0.08) 100%);
    border-color: rgba(148,163,184,0.25);
}
.bp-payout-hero.reverse::before { background: radial-gradient(circle, rgba(148,163,184,0.14), transparent 65%); }
.bp-payout-hero.reverse .bp-payout-hero-k { color: var(--bp-text-3); }
.bp-payout-hero.reverse .bp-payout-hero-v { color: var(--bp-text-1); text-shadow: none; }
.bp-payout-hero.reverse .bp-payout-hero-hint i { color: var(--bp-text-3); }

/* Info-блок "як проходитиме розрахунок" для from_vendor випадку */
.bp-from-vendor-info {
    display: flex; gap: 12px; align-items: flex-start;
    margin-bottom: 18px; padding: 13px 14px; border-radius: 10px;
    background: rgba(96,165,250,0.06);
    border: 1px solid rgba(96,165,250,0.22);
}
.bp-from-vendor-info .bp-fv-icon {
    flex: 0 0 auto; color: #93c5fd; font-size: 16px; padding-top: 2px;
}
.bp-from-vendor-info .bp-fv-tx {
    font-size: 12.5px; color: var(--bp-text-2); line-height: 1.55;
}
.bp-from-vendor-info .bp-fv-tx strong {
    color: var(--bp-text-1); font-weight: 600; display: block; margin-bottom: 3px;
}

/* Breakdown (3 колонки) */
.bp-breakdown {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 18px;
}
.bp-brk {
    padding: 12px 14px; border-radius: 10px;
    background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05);
}
.bp-brk-k {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--bp-text-3); font-weight: 600; margin-bottom: 6px;
}
.bp-brk-v {
    font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 15px;
    color: var(--bp-text-1); font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
}
.bp-brk-v .u {
    font-family: 'Inter'; font-weight: 500; font-size: 11px;
    color: var(--bp-text-3); margin-left: 2px;
}
.bp-brk-sub { margin-top: 3px; font-size: 10.5px; color: var(--bp-text-3); }

/* Agreement checkbox */
.bp-agree {
    display: flex; gap: 12px; align-items: flex-start;
    margin-bottom: 18px; padding: 13px 14px; border-radius: 10px;
    background: rgba(251,191,36,0.06); border: 1px solid rgba(251,191,36,0.22);
    cursor: pointer; transition: all 0.15s; user-select: none;
}
.bp-agree:hover { background: rgba(251,191,36,0.08); }
.bp-agree input { display: none; }
.bp-agree-chk {
    width: 18px; height: 18px; border-radius: 5px;
    border: 1.5px solid rgba(251,191,36,0.6);
    flex: 0 0 auto; margin-top: 1px; transition: all 0.15s;
    display: inline-flex; align-items: center; justify-content: center;
}
.bp-agree-chk i { font-size: 9px; opacity: 0; color: #fff; }
.bp-agree input:checked ~ .bp-agree-chk {
    background: linear-gradient(135deg, var(--bp-emerald), var(--bp-emerald-deep));
    border-color: var(--bp-emerald);
}
.bp-agree input:checked ~ .bp-agree-chk i { opacity: 1; }
.bp-agree input:checked ~ .bp-agree-tx strong { color: var(--bp-emerald); }
.bp-agree.on { background: rgba(52,211,153,0.06); border-color: rgba(52,211,153,0.3); }
.bp-agree-tx {
    font-size: 12.5px; color: var(--bp-text-2); line-height: 1.5;
}
.bp-agree-tx strong {
    color: var(--bp-text-1); font-weight: 600;
}

/* Divider label */
.bp-divider {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--bp-text-3); font-weight: 700;
    margin: 4px 0 10px; padding-bottom: 6px;
    border-bottom: 1px solid var(--bp-line);
}

/* Form */
.bp-form { display: flex; flex-direction: column; gap: 12px; }
.bp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bp-field { display: flex; flex-direction: column; gap: 5px; }
.bp-field-k {
    font-size: 11px; color: var(--bp-text-3); font-weight: 500;
    letter-spacing: 0.01em;
}
.bp-field input,
.bp-field textarea {
    font-family: 'Inter', sans-serif; font-size: 13px;
    padding: 9px 12px; background: rgba(10,14,26,0.7);
    border: 1px solid var(--bp-line-strong); border-radius: 8px;
    color: var(--bp-text-1); width: 100%; box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.bp-field input:focus,
.bp-field textarea:focus {
    outline: none; border-color: rgba(52,211,153,0.4);
    box-shadow: 0 0 0 3px rgba(52,211,153,0.1);
}
.bp-field textarea { resize: vertical; min-height: 52px; font-family: inherit; }

/* Segmented IBAN/Картка */
.bp-seg-row {
    display: flex; align-items: center; gap: 14px;
}
.bp-seg-label {
    font-size: 11px; color: var(--bp-text-3); font-weight: 500;
}
.bp-seg {
    display: inline-flex; padding: 3px; border-radius: 10px;
    background: rgba(10,14,26,0.7); border: 1px solid var(--bp-line-strong);
    gap: 2px;
}
.bp-seg-btn {
    padding: 6px 14px; font-size: 12.5px; font-weight: 500;
    background: transparent; border: none; color: var(--bp-text-3);
    border-radius: 7px; cursor: pointer; transition: all 0.15s;
    font-family: inherit;
}
.bp-seg-btn:hover:not(.active) { color: var(--bp-text-1); background: rgba(255,255,255,0.03); }
.bp-seg-btn.active {
    background: linear-gradient(180deg, var(--bp-emerald), var(--bp-emerald-deep));
    color: #0a2015; font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 3px 8px -2px rgba(16,185,129,0.35);
}

/* Footer */
.bp-modal-foot {
    padding: 14px 26px 18px; border-top: 1px solid var(--bp-line);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    flex: 0 0 auto;
}
.bp-modal-foot-hint {
    font-size: 11.5px; color: var(--bp-text-3); flex: 1; min-width: 200px;
}
.bp-modal-foot-hint a { color: var(--bp-emerald); text-decoration: none; }
.bp-modal-foot-hint a:hover { text-decoration: underline; }
.bp-modal-foot-actions {
    display: flex; gap: 8px; align-items: center;
    margin-left: auto;
}
.bp-modal-btn-ghost {
    padding: 8px 16px; font-size: 12.5px; font-weight: 500;
    background: transparent; border: 1px solid var(--bp-line-strong);
    color: var(--bp-text-2); border-radius: 8px; cursor: pointer;
    font-family: inherit;
}
.bp-modal-btn-ghost:hover {
    background: rgba(255,255,255,0.06); color: var(--bp-text-1);
}
.bp-modal-btn-primary {
    padding: 10px 20px; font-size: 13px; font-weight: 600;
    color: #fff; border: none; border-radius: 8px; cursor: pointer;
    background: linear-gradient(180deg, var(--bp-emerald), var(--bp-emerald-deep) 55%, #0a9e74);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 6px 14px -2px rgba(16,185,129,0.4);
    display: inline-flex; align-items: center; gap: 8px; letter-spacing: -0.005em;
    font-family: inherit; transition: transform 0.15s, opacity 0.15s;
}
.bp-modal-btn-primary i { color: #fff; }
.bp-modal-btn-primary:hover:not(:disabled) { transform: translateY(-1px); }
.bp-modal-btn-primary:disabled {
    opacity: 0.45; cursor: not-allowed;
}

@media (max-width: 640px) {
    .bp-modal-foot { flex-direction: column; align-items: stretch; }
    .bp-modal-foot-actions { justify-content: flex-end; }
    .bp-form-row { grid-template-columns: 1fr; }
    .bp-breakdown { grid-template-columns: 1fr; }
}

/* ═══ Діалог експорту балансу (bx-*) ════════════════════════════════════════ */

.bp-modal-narrow { max-width: 540px; }

/* Обсяг: усе за фільтром / лише виділені */
.bx-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.bx-radio {
    display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
    padding: 10px 12px; border-radius: 10px;
    background: rgba(10,14,26,0.5); border: 1px solid var(--bp-line-strong);
    transition: border-color 0.15s, background 0.15s;
}
.bx-radio:hover { border-color: rgba(52,211,153,0.28); }
.bx-radio input { accent-color: var(--bp-emerald); margin-top: 2px; flex: 0 0 auto; }
.bx-radio:has(input:checked) {
    border-color: rgba(52,211,153,0.45); background: rgba(52,211,153,0.07);
}
/* Нічого не виділено — радіо неактивне, але видиме: інакше незрозуміло,
   чому опція зникла (Іван свідомо клацав галки й чекав ефекту) */
.bx-radio.is-off { opacity: 0.45; cursor: not-allowed; }
.bx-radio.is-off:hover { border-color: var(--bp-line-strong); }
.bx-radio-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bx-radio-t { font-size: 13px; color: var(--bp-text-1); font-weight: 500; }
.bx-radio-s { font-size: 11px; color: var(--bp-text-3); }

/* Період */
.bx-dates { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 16px; }
.bx-dates .bp-field { flex: 1 1 0; min-width: 0; }
.bx-dates input[type="date"] { color-scheme: dark; }
.bx-dates-clear {
    flex: 0 0 auto; padding: 9px 12px; font-size: 12px; font-family: inherit;
    background: transparent; border: 1px solid var(--bp-line-strong);
    color: var(--bp-text-3); border-radius: 8px; cursor: pointer;
    transition: all 0.15s;
}
.bx-dates-clear:hover { color: var(--bp-text-1); border-color: rgba(255,255,255,0.2); }

/* Колонки */
.bx-col-actions { float: right; display: inline-flex; gap: 6px; }
.bx-col-actions button {
    font-family: inherit; font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    background: none; border: none; color: var(--bp-text-4);
    cursor: pointer; padding: 0; transition: color 0.15s;
}
.bx-col-actions button:hover { color: var(--bp-emerald); }
.bx-cols {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px;
}
.bx-col {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 5px 6px; border-radius: 6px; font-size: 12.5px;
    color: var(--bp-text-2); transition: background 0.12s;
}
.bx-col:hover { background: rgba(255,255,255,0.03); }
.bx-col input { accent-color: var(--bp-emerald); flex: 0 0 auto; }
.bx-col input:checked ~ span { color: var(--bp-text-1); }

@media (max-width: 640px) {
    .bx-scope, .bx-cols { grid-template-columns: 1fr; }
    .bx-dates { flex-wrap: wrap; }
}

/* ═══ Prom-чат «Написати клієнту» (Producer B) ══════════════════════════════ */

/* #1 result-вікно: ряд каналів у messenger-боксі */
.ttn-msg-actions--channels { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ttn-ch-btn {
    height: 32px; min-width: 34px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--glass-border); border-radius: 8px;
    background: var(--glass-bg, rgba(255,255,255,0.03));
    color: var(--text-secondary); cursor: pointer; font-size: 13px; font-family: inherit;
    transition: border-color .15s, background .15s, color .15s;
}
.ttn-ch-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.ttn-ch-btn img { width: 17px; height: 17px; display: block; }
.ttn-prom-send-btn { font-weight: 500; }
.ttn-prom-send-btn .prom-logo { width: 16px; height: 16px; }
.ttn-prom-send-btn:disabled { opacity: .55; cursor: default; }
.prom-chat-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; padding: 4px 10px; border-radius: 8px;
}
.prom-chat-status--sent { color: var(--primary, #10b981); background: rgba(16,185,129,0.12); }
.prom-chat-status--error { color: var(--danger, #ef4444); background: rgba(239,68,68,0.12); }
/* #3 тред: перемикач адресата (р.39 сегмент-пігулка; р.40 — спільний рядок
   із жовтою підказкою; р.41 — тумблер СПРАВА, чіп вкладення в тому ж рядку
   зліва → шапка над textarea більше не росте при прикріпленні файла) */
.chat-aud-row {
    display: flex; align-items: center; gap: 12px;
    margin: 0 16px;
    /* р.44: рядок ЗГОРНУТИЙ за замовчуванням (мобільна логіка) — розгортається
       при фокусі композера / тексті / вкладенні / режимі «Клієнту» */
    max-height: 0; min-height: 0; opacity: 0; overflow: hidden;
    pointer-events: none;
    transition: max-height 0.18s ease, opacity 0.18s ease, margin 0.18s ease;
}
.chat-aud-row--show {
    max-height: 62px; min-height: 34px;   /* ≥ висоти чіпа — поява вкладення не рухає рядок */
    opacity: 1; margin: 8px 16px 0;
    pointer-events: auto;
}
/* нема ні тумблера, ні чіпа — рядок зайвий (чати без customer-каналу) */
.chat-aud-row:not(:has(.chat-audience-toggle)):not(:has(.chat-attach-chip)) { display: none; }
.chat-top-spacer { flex: 1 1 auto; }
.chat-audience-toggle {
    display: inline-flex; padding: 3px;
    background: rgba(127,127,127,0.08);
    border: 1px solid var(--border);
    border-radius: 999px; flex-shrink: 0; gap: 2px;
}
.chat-aud-btn {
    padding: 4px 13px; background: none; border: none; border-radius: 999px;
    color: var(--text-tertiary);
    font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s, color .15s;
}
.chat-aud-btn:hover { color: var(--text-secondary); }
.chat-aud-btn--active { color: var(--text-primary); background: var(--glass-hover, rgba(255,255,255,0.09)); box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.chat-aud-btn[data-mode="customer"].chat-aud-btn--active { color: var(--warning); background: rgba(245,158,11,0.15); }
/* Скрепка — кругла ghost-кнопка зліва від пігулки */
.chat-attach-btn {
    flex-shrink: 0;
    background: none; border: none; border-radius: 50%;
    color: var(--text-secondary); cursor: pointer;
    width: 40px; height: 40px; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.2s, background 0.2s;
}
.chat-attach-btn:hover { color: var(--primary); background: rgba(127,127,127,0.12); }
.chat-attach-btn--has { color: var(--warning); }
/* хінт живе В РЯДКУ тумблера (не під композером — не рухає layout).
   Ellipsis — на внутрішньому span: text-overflow не працює на flex-контейнері
   (текст = анонімний flex-item, трикрапка не малюється). */
.chat-cust-hint {
    font-size: 11px; color: var(--warning);
    display: inline-flex; align-items: center; gap: 6px;
    flex: 0 1 auto; min-width: 0; overflow: hidden;
}
.chat-cust-hint .chat-cust-hint-t {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* #3 тред: репліка «Клієнту» — янтарний акцент поверх спільної анатомії .bubble.
   Р.39: селектор .chat-msg--customer.out — (0,3,0) і ПІЗНІШЕ за .msg-row.out .bubble
   (той теж (0,3,0) і красив фон у var(--bubble-out), з'їдаючи бурштин); заодно
   бабл-осі лаби (--bubble-out) більше не перефарбовують репліки «Клієнту». */
.chat-msg-cust-label { color: var(--warning) !important; justify-content: flex-end; }
.chat-msg--customer.out .bubble {
    background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.30);
    border-bottom-right-radius: 4px;
}
.chat-msg-cust-status { display: inline-flex; align-items: center; gap: 4px; }
.chat-msg-cust-status--sent { color: var(--primary, #10b981); }
.chat-msg-cust-status--failed { color: var(--danger, #ef4444); }
/* р.40: драбина прочитання клієнтом */
.chat-msg-cust-status--read { color: var(--primary, #10b981); font-weight: 600; }
.chat-msg-cust-status--seen { color: var(--text-secondary); }
/* «Не прочитано» — приглушено, а не зеленим: це стан «клієнт ще не побачив»,
   а не успіх. Зелена галочка тут раніше читалась як «все гаразд». */
.chat-msg-cust-status--unread { color: var(--text-tertiary); }

/* Спільний composer (#2 меню телефону, #3 режим «Клієнту») */
.cc-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center; z-index: 100000; padding: 16px;
}
.cc-modal {
    /* НЕ --surface: то стеклянна плівка rgba(...,0.05) — крізь неї просвічує модалка під низом */
    width: 100%; max-width: 460px; background: var(--bg-secondary, #16181d);
    border: 1px solid var(--glass-border); border-radius: 14px; padding: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.cc-head { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.cc-head span { display: inline-flex; align-items: center; gap: 8px; }
.cc-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 16px; }
.cc-close:hover { color: var(--text-primary); }
.cc-sub { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
/* Плашка контексту замовлення: фото + назва товару + клієнт */
.cc-order-strip {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; margin-bottom: 12px;
    background: var(--glass-bg, rgba(255,255,255,0.03));
    border: 1px solid var(--glass-border); border-radius: 10px;
}
.cc-strip-thumb {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px; overflow: hidden;
    background: var(--surface, rgba(255,255,255,0.05));
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim); font-size: 16px;
}
.cc-strip-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cc-strip-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cc-strip-name {
    font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cc-strip-more { font-weight: 400; color: var(--text-secondary); white-space: nowrap; }
.cc-strip-client { font-size: 12px; color: var(--text-secondary); }
.cc-strip-client i { font-size: 11px; margin-right: 2px; color: var(--text-dim); }
.cc-text {
    width: 100%; background: var(--glass-bg, rgba(255,255,255,0.03));
    border: 1px solid var(--glass-border); border-radius: 10px; color: var(--text-primary);
    font-family: inherit; font-size: 14px; padding: 10px 12px; resize: vertical; box-sizing: border-box;
}
.cc-text:focus { outline: none; border-color: var(--warning); }
.cc-attach-chip { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.cc-attach-chip img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; }
.cc-attach-clear { background: none; border: none; color: var(--text-dim); cursor: pointer; }
.cc-attach-clear:hover { color: var(--danger); }
.cc-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.cc-photo {
    width: 38px; height: 38px; border: 1px solid var(--glass-border); border-radius: 10px;
    background: none; color: var(--text-secondary); cursor: pointer; font-size: 16px;
}
.cc-photo:hover { border-color: var(--warning); color: var(--warning); }
.cc-spacer { flex: 1; }

/* #1 result: телефон отримувача — чистий формат, іконка дзвінка справа, м'який фон */
.ttn-phone-val { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; }
.ttn-phone-num { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: 0.5px; }
.ttn-phone-val .ttn-contact-btns { margin-top: 0; }
.ttn-contact-btn--soft {
    width: 30px; height: 30px;
    background: transparent;
    border: none;
    color: var(--accent);
    text-decoration: none;
}
.ttn-contact-btn--soft:hover { background: var(--glass-bg, rgba(255,255,255,0.06)); color: var(--text-primary); transform: none; }
.ttn-contact-btn--soft i { font-size: 15px; }

/* ── Месенджер-тост (правий нижній кут, виїжджає справа; Іван 2026-07-19) ── */
#chat-toast-stack {
  position: fixed; right: 18px; bottom: 18px; z-index: 100001;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  pointer-events: none;
}
.chat-toast {
  display: flex; align-items: flex-start; gap: 10px;
  width: 330px; max-width: calc(100vw - 36px);
  padding: 12px 14px; border-radius: 14px; cursor: pointer;
  background: var(--bg-secondary); border: 1px solid var(--border-light);
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
  pointer-events: auto;
  transform: translateX(120%); opacity: 0;
  transition: transform .28s cubic-bezier(.2,.8,.25,1), opacity .28s;
}
.chat-toast--in { transform: translateX(0); opacity: 1; }
.chat-toast-avatar {
  width: 40px; height: 40px; border-radius: 10px; overflow: hidden; flex: 0 0 auto;
  background: var(--surface); display: flex; align-items: center; justify-content: center;
}
.chat-toast-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-toast-avatar--fb i { color: var(--primary-light); font-size: 16px; }
.chat-toast-col { flex: 1; min-width: 0; }
.chat-toast-title {
  font-size: 12.5px; font-weight: 700; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-toast-body {
  margin-top: 2px; font-size: 12px; color: var(--text-secondary); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chat-toast-x {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: var(--text-tertiary); font-size: 15px; line-height: 1; padding: 0 2px;
}
.chat-toast-x:hover { color: var(--text-primary); }
.chat-toast { width: 356px; }
.chat-toast-avatar { width: 46px; height: 46px; }
.chat-toast-sub {
  margin-top: 3px; font-size: 11px; color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Налаштування → Оформлення: пікер тем (р.38) ─────────────
   Картки рендерить theme.js (#theme-grid); кольори превʼю — інлайн
   з THEMES[].preview. Стилі на токенах → адаптуються до будь-якої теми. */
.appearance-card { max-width: 980px; }
.appearance-hint {
  font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; line-height: 1.45;
}
.theme-lab-note {
  display: none; margin-bottom: 14px; padding: 9px 12px; border-radius: 9px;
  font-size: 12.5px; color: var(--warning, #fbbf24);
  background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.25);
}
.theme-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px;
}
.theme-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 1px solid var(--border); border-radius: 13px;
  padding: 9px 9px 11px; font-family: inherit; color: var(--text-primary);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.theme-card:hover { border-color: var(--border-light); transform: translateY(-1px); }
.theme-card.on {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 1px var(--primary-light), 0 8px 22px -8px rgba(0,0,0,.35);
}
.theme-thumb {
  display: flex; height: 88px; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(127,127,127,.25);
}
.theme-thumb .tt-side {
  width: 27%; display: flex; flex-direction: column; gap: 5px; padding: 8px 6px;
}
.theme-thumb .tt-nav { height: 5px; border-radius: 3px; opacity: .9; }
.theme-thumb .tt-nav.dim { opacity: .28; }
.theme-thumb .tt-main {
  flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 8px;
}
.theme-thumb .tt-tile {
  flex: 1; border-radius: 5px; padding: 5px 6px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 6px;
}
.theme-thumb .tt-line { height: 4px; border-radius: 2px; flex: 0 0 55%; opacity: .55; }
.theme-thumb .tt-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.theme-name {
  display: flex; align-items: center; gap: 7px;
  margin-top: 9px; font-size: 13.5px; font-weight: 700;
}
.theme-check {
  display: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--primary); color: #06130c; font-size: 9px;
  align-items: center; justify-content: center; flex: 0 0 auto;
}
.theme-card.on .theme-check { display: inline-flex; }
.theme-desc { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-tertiary); }

/* ── ПКМ-меню повідомлення (р.39; движок — донор prom-chat) ─────────── */
.ctx-menu {
    position: fixed; z-index: 100050; min-width: 200px; max-width: 360px;
    padding: 5px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.ctx-menu-item, .ctx-menu-info {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 7px;
    font-size: 13px; color: var(--text-primary); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.ctx-menu-item { cursor: pointer; }
.ctx-menu-item:hover { background: var(--glass-hover, rgba(255,255,255,0.07)); }
/* інфо-рядки ПЕРЕНОСЯТЬСЯ (р.40: «через N хв» обрізалось у повноекранному чаті) */
.ctx-menu-info {
    padding: 6px 12px; font-size: 12px; color: var(--text-secondary); cursor: default;
    white-space: normal; overflow: visible; text-overflow: clip;
    align-items: flex-start; line-height: 1.45;
}
.ctx-menu-info i { margin-top: 2px; }
.ctx-menu i { width: 15px; text-align: center; color: var(--text-tertiary); flex-shrink: 0; }

/* ── VU-стрічка запису (р.40; р.42 — мобільний патерн VoiceBar):
   [смітник][бари][таймер] у пігулці; мік схований, send = зелена галочка ── */
.chat-voice-vu {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; gap: 10px;
    padding: 0 12px 0 5px; min-height: 40px;
}
.chat-voice-vu-bars {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; gap: 2px; overflow: hidden;
}
.chat-voice-vu-bar {
    flex: 0 0 auto; width: 3px; height: 2px; border-radius: 2px;
    background: var(--primary);
    opacity: 0.85;
    transition: height 0.06s linear;
}
.chat-voice-cancel {
    flex: 0 0 auto; width: 32px; height: 32px;
    border: none; border-radius: 50%; background: none;
    color: var(--danger); cursor: pointer; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.chat-voice-cancel:hover { background: rgba(239,68,68,0.12); }
.chat-voice-rec-time {
    flex: 0 0 auto; font-family: 'JetBrains Mono', monospace;
    font-size: 12px; color: var(--text-secondary);
}
/* під час запису мік схований — його роль виконує зелена галочка send */
.order-chat.chat-recording .chat-voice-btn { display: none; }

/* ── Модалка «Написати покупцю»: історія + лінк на повний тред (р.40) ── */
.cc-history {
    margin: 10px 0 2px; padding: 8px 10px;
    background: rgba(127,127,127,0.06);
    border: 1px solid var(--border);
    border-radius: 10px;
    max-height: 130px; overflow-y: auto;
}
.cc-history-title { font-size: 10.5px; font-weight: 700; color: var(--text-tertiary); letter-spacing: .03em; margin-bottom: 5px; }
.cc-history-row {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 12px; padding: 2px 0; min-width: 0;
}
.cc-history-time { flex: 0 0 auto; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); }
.cc-history-body { flex: 1 1 auto; min-width: 0; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-history-row i { flex: 0 0 auto; font-size: 10px; color: var(--text-tertiary); }
.cc-history-row i.cc-hist-read { color: var(--primary, #10b981); }
.cc-history-row i.cc-hist-fail { color: var(--danger, #ef4444); }
.cc-full-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-secondary); text-decoration: none;
    padding: 6px 10px; border-radius: 8px;
}
.cc-full-link:hover { color: var(--text-primary); background: rgba(127,127,127,0.1); }

/* ── Р.40: модалка «Написати покупцю» виросла (strip + історія) —
   на низьких вьюпортах (ландшафт телефона) без цього верх обрізався
   без жодного скролу ── */
.cc-overlay { overflow-y: auto; }
.cc-modal { max-height: calc(100dvh - 32px); overflow-y: auto; }

/* ── Р.41: чіп вкладення в рядку тумблера — стискається, не розпирає ── */
.chat-attach-chip { min-width: 0; }
/* флеш чіпа замість тоста «Голосове доповнено» (тост перекривав текст диктовки) */
.chat-attach-chip--flash { animation: chat-chip-flash 1.4s ease; }
@keyframes chat-chip-flash {
    0%, 55% { box-shadow: 0 0 0 2px var(--warning); }
    100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

/* фото-чіп у рядку тумблера — компактна мініатюра, рядок не росте (р.41-ревью) */
.chat-aud-row .chat-attach-chip { max-height: 30px; overflow: hidden; align-items: center; }
.chat-aud-row .chat-attach-thumb { width: 26px; height: 26px; border-radius: 6px; }

/* ── Прекчек перед створенням ТТН: рекап + прогноз НП (Іван 2026-07-22) ── */
.ttn-pc-overlay { position: fixed; inset: 0; z-index: 10050; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; padding: 20px; }
.ttn-pc-card { width: 470px; max-width: 100%; max-height: 90vh; overflow-y: auto; background: var(--bg-secondary, #1e293b); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 18px 20px; box-shadow: 0 18px 60px rgba(0,0,0,0.5); }
.ttn-pc-head { font-size: 15px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ttn-pc-head i { color: var(--primary-light); }
.ttn-pc-grid { display: flex; flex-direction: column; gap: 7px; background: rgba(255,255,255,0.04); border-radius: 10px; padding: 12px 14px; }
.ttn-pc-row { display: flex; gap: 12px; font-size: 13px; line-height: 1.45; padding: 3px 8px; margin: 0 -8px; border-radius: 7px; transition: background 0.12s; }
.ttn-pc-row:hover { background: rgba(255,255,255,0.06); }
.ttn-pc-row span { flex: 0 0 112px; color: var(--text-tertiary); }
.ttn-pc-row b { color: var(--text-primary); font-weight: 600; user-select: text; }
.ttn-pc-forecast { margin-top: 12px; background: rgba(6,182,212,0.08); border: 1px solid rgba(6,182,212,0.3); border-radius: 10px; padding: 12px 14px; color: var(--text-secondary); font-size: 13px; }
.ttn-pc-fc-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: var(--accent, #06b6d4); margin-bottom: 6px; }
.ttn-pc-fc-cost { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 700; color: var(--text-primary); }
.ttn-pc-fc-cost span { font-family: inherit; font-size: 12px; color: var(--text-secondary); font-weight: 500; margin-left: 6px; }
.ttn-pc-fc-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
/* Розбивка прогнозу: доставка / комісія за переказ / разом до оплати клієнтом */
.ttn-pc-fc-row { display: flex; align-items: baseline; gap: 8px; font-size: 13px; padding: 2px 6px; margin: 0 -6px; border-radius: 6px; transition: background 0.12s; }
.ttn-pc-fc-row:hover { background: rgba(255,255,255,0.05); }
.ttn-pc-fc-row span { flex: 0 0 132px; color: var(--text-tertiary); }
.ttn-pc-fc-row b { color: var(--text-primary); font-family: 'JetBrains Mono', monospace; font-weight: 700; user-select: text; }
.ttn-pc-fc-row i { font-style: normal; font-size: 11px; color: var(--text-tertiary); }
.ttn-pc-fc-total { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(6,182,212,0.25); font-size: 13.5px; }
.ttn-pc-fc-total span { flex: 0 0 132px; color: var(--text-secondary); font-weight: 600; }
.ttn-pc-fc-total b { font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 700; color: var(--primary-light); user-select: text; }
.ttn-pc-fc-total--zero span { flex: none; }
.ttn-pc-fc-total--zero b { font-size: 12px; color: var(--primary-light); background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3); border-radius: 999px; padding: 1px 9px; font-family: inherit; }
.ttn-pc-fc-date { margin-top: 8px; font-size: 13px; color: var(--text-primary); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.ttn-pc-fc-date i { color: var(--accent, #06b6d4); }
.ttn-pc-eta { font-size: 11px; font-weight: 700; color: #67e8f9; background: rgba(103,232,249,0.12); border: 1px solid rgba(103,232,249,0.3); border-radius: 999px; padding: 1px 8px; }
.ttn-pc-fc-err { color: var(--warning, #f59e0b); font-size: 12.5px; }
.ttn-pc-actions { display: flex; gap: 10px; margin-top: 14px; }
.ttn-pc-back { flex: 1; height: 44px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: var(--text-secondary); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ttn-pc-back:hover { background: rgba(255,255,255,0.1); }
.ttn-pc-create { flex: 1.5; height: 44px; border-radius: 10px; background: var(--primary-light, #34d399); border: none; color: #04130c; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; }
.ttn-pc-create:hover { filter: brightness(1.06); }

/* ── Р.47: шапка списку замовлень — мінімалістичний тулбар ─────────────
   Заголовок ліворуч, іконки праворуч без підписів; пошук розгортається;
   маркери — попап за шестернею. Все на токенах — теми успадковуються. */
.page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 12px;
}
.page-head .section-title { margin-bottom: 0; }
.page-head-actions { display: flex; align-items: center; gap: 6px; }
.ph-btn {
    position: relative;
    width: 36px; height: 36px;
    background: none; border: none; border-radius: 9px;
    color: var(--text-secondary); cursor: pointer; font-size: 15px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.ph-btn:hover { color: var(--text-primary); background: rgba(127,127,127,0.12); }
/* display НЕ задаємо — ним володіє JS (updateFilterBadge: none/inline-block);
   р.47-фікс: !important-база показувала зелений «0» без жодного фільтра */
.ph-btn .filter-badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 15px; height: 15px; padding: 0 4px;
    border-radius: 8px; font-size: 9.5px; font-weight: 700;
    line-height: 15px; text-align: center;
    background: var(--primary); color: #06130c;
}
.ph-gear-wrap { position: relative; }
.marker-popover {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 500;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.45);
    white-space: nowrap;
}
.marker-popover-title {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
    color: var(--text-tertiary); margin-bottom: 8px;
}
.orders-search-row { margin-bottom: 12px; }
.orders-search-row .filter-input { width: 100%; min-width: 0; }

/* р.47: рядок «Назад до замовлень / Замовлення #» — функціонально пустий */
.order-detail-header { display: none; }

/* р.48: компактна стрілка «назад» ЛІВОРУЧ від номера всередині картки
   (Іван 2026-07-26). Повертає туди, звідки прийшли; ціль — у tooltip.
   Тиха, як і решта службових контролів; проявляється на hover. */
.order-back-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; margin-right: 8px; flex: 0 0 auto;
    background: transparent; border: 1px solid var(--border);
    border-radius: 8px; color: var(--text-tertiary);
    font-size: 12px; cursor: pointer; opacity: .55;
    transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
.order-back-btn:hover {
    opacity: 1; color: var(--text-primary); border-color: var(--primary);
    background: rgba(16, 185, 129, 0.06);
}
/* Та сама стрілка в заголовку розділу (напр. Інтеграції → Sales Drive).
   .section-title уже flex із gap:10 — власний margin кнопки тут зайвий. */
.section-title .order-back-btn { margin-right: 0; }

/* ═══════════════════════════════════════════════════════════════
   ЦЕНТР СПОВІЩЕНЬ (р.49) — дзвіночок у рядку з логотипом сайдбара
   ═══════════════════════════════════════════════════════════════ */
.sb-bell {
    margin-left: auto;                    /* притиснутий до правого краю рядка */
    position: relative;
    width: 30px; height: 30px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent; border-radius: 9px;
    color: var(--text-tertiary); font-size: 14px; cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.sb-bell:hover { color: var(--text-primary); background: rgba(148,163,184,.08); border-color: var(--border); }
.sb-bell.is-open { color: var(--primary-light); border-color: var(--primary); background: rgba(16,185,129,.08); }
.sb-bell-badge {
    position: absolute; top: -3px; right: -3px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: #ef4444; color: #fff;
    font-size: 9px; font-weight: 800; line-height: 16px; text-align: center;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}
/* Коротке гойдання при появі нового — помітно, але не миготить нескінченно */
.sb-bell.has-new i { animation: bell-nudge 1.4s ease 1; }
@keyframes bell-nudge {
    0%, 60%, 100% { transform: rotate(0); }
    10% { transform: rotate(-13deg); } 20% { transform: rotate(11deg); }
    30% { transform: rotate(-7deg); }  40% { transform: rotate(5deg); }
}

/* Панель. Живе в body (position:fixed), а не всередині сайдбара: сайдбар
   вузький (260px) і має overflow — панель у ньому обрізало б. */
.notif-panel {
    position: fixed; left: 14px; top: 58px; z-index: 100040;
    width: 380px; max-width: calc(100vw - 28px);
    max-height: min(70vh, 620px);
    display: flex; flex-direction: column;
    /* ті самі токени, що в ПКМ-меню (.ctx-menu) — щоб поповер виглядав
       однаково в усіх п'яти темах, а не «майже так само» */
    background: var(--bg-secondary);
    border: 1px solid var(--border-light); border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0,0,0,.5);
    overflow: hidden;
}
.notif-panel[hidden] { display: none; }
.notif-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}
.notif-head-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.notif-readall {
    margin-left: auto; padding: 3px 9px; border-radius: 7px;
    background: transparent; border: 1px solid var(--border);
    color: var(--text-tertiary); font-size: 11px; font-family: inherit; cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.notif-readall:hover { color: var(--text-primary); border-color: var(--primary); }
.notif-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 0 8px; }

.notif-sec {
    padding: 8px 14px 4px;
    font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-tertiary); opacity: .7;
}
.notif-row {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 8px 14px; cursor: pointer;
    border-left: 2px solid transparent;
    transition: background .12s ease;
}
.notif-row:hover { background: rgba(148,163,184,.06); }
.notif-row--unread { border-left-color: var(--primary); background: rgba(16,185,129,.04); }
.notif-row--todo { border-left-color: var(--warning); }
.notif-ico {
    width: 22px; flex: 0 0 22px; text-align: center;
    color: var(--text-tertiary); font-size: 12px; padding-top: 2px;
}
.notif-ico--todo { color: var(--warning); }
.notif-mid { flex: 1 1 auto; min-width: 0; }
.notif-title {
    font-size: 12.5px; color: var(--text-secondary); line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.notif-row--unread .notif-title { color: var(--text-primary); font-weight: 600; }
.notif-body-text {
    margin-top: 2px; font-size: 11.5px; color: var(--text-tertiary); line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.notif-meta { margin-top: 3px; font-size: 10.5px; color: var(--text-dim); }
.notif-order { font-family: 'JetBrains Mono', 'Consolas', monospace; }
.notif-more {
    display: block; width: calc(100% - 28px); margin: 8px 14px 2px;
    padding: 6px 0; border-radius: 8px;
    background: transparent; border: 1px dashed var(--border);
    color: var(--text-tertiary); font-size: 11px; font-family: inherit; cursor: pointer;
}
.notif-more:hover { color: var(--text-primary); border-color: var(--primary); }
.notif-loading, .notif-empty {
    padding: 26px 14px; text-align: center;
    color: var(--text-dim); font-size: 12px;
}
.notif-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.notif-empty i { font-size: 20px; opacity: .5; }

/* Мобільний: шапка повертається (див. design-lab.css фолбек), дзвіночок з
   сайдбара недоступний — панель показуємо на всю ширину під шапкою. */
@media (max-width: 768px) {
    .notif-panel { left: 8px; right: 8px; top: 62px; width: auto; }
}