/* ============================================================
   CRM shell — three-region layout (header / filter bar / body-split).
   Colours, spacing and type scale come from theme.css custom properties;
   this file only lays things out. See docs/design/CRM.dc.html for the
   reference layout this mirrors (lines 51-338).

   Content for #status-chips / #country-chips / #cat-chips (Task 6),
   #list rows (Task 5), #map-frame internals (Task 7, its own map.html)
   and #panel contents (Task 8) is intentionally NOT styled here — those
   tasks own their own rules. This file only makes the three regions
   exist, sized and positioned correctly.
   ============================================================ */

.app-shell {
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  overflow: hidden;
}

/* ---- header ---- */

.app-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
  height: 46px;
  flex: 0 0 auto;
  background: var(--pane);
  border-bottom: 1px solid var(--line);
}

.brand-wrap { display: flex; align-items: baseline; gap: 8px; flex: 0 0 auto; }
.brand { font-size: 13px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }

.search-wrap { position: relative; flex: 1 1 auto; max-width: 420px; }
.search-input {
  width: 100%; height: 28px; padding: 0 10px 0 28px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--pane2); font-size: 13px; outline: none;
}
.search-icon { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--fg3); pointer-events: none; }

.header-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.caption { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg3); white-space: nowrap; }

.session-info { margin-left: 12px; font-size: 12px; color: var(--fg2); white-space: nowrap; }

/* segmented control — reused for the theme switcher and the sort tabs */
.seg-control { display: flex; gap: 2px; padding: 2px; background: var(--pane2); border: 1px solid var(--line); border-radius: 6px; }
.tab-btn {
  height: 24px; padding: 0 10px; border: none; border-radius: 5px;
  font-size: 12px; cursor: pointer; background: transparent; color: var(--fg3); font-weight: 400;
}
.tab-btn.active { background: var(--pane); color: var(--fg); font-weight: 600; box-shadow: 0 1px 2px oklch(0 0 0 / .12); }

/* ---- filter bar ---- */

.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 7px 12px; background: var(--pane); border-bottom: 1px solid var(--line);
}
.chip-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filter-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }

/* ---- filter chips (Task 6) ----
   One shared .chip look for status/country/category buttons; .chip-dot is
   only used by status chips (country/category render label+count only —
   docs/design/CRM.dc.html's own template omits a dot span for those). */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 9px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--pane2); color: var(--fg2);
  font-size: 12px; font-weight: 400; cursor: pointer; white-space: nowrap;
}
.chip.active {
  border-color: var(--accent); background: var(--accent-bg);
  color: var(--fg); font-weight: 600;
}
.chip-dot { width: 7px; height: 7px; border-radius: 9px; flex: 0 0 auto; }
.chip-count { font-family: var(--mono); font-size: 11px; color: var(--fg3); }

.more-filters { position: relative; flex: 0 0 auto; }
.more-toggle::after { content: "\00a0\25BE"; }  /* nbsp + ▾, decorative only */
/* Active-filter badge inside #more-toggle. Mobile-only: on desktop every
   filter group is on screen, so a count of them would be noise. The mobile
   block re-declares this as inline-flex. */
.filter-count { display: none; }

.more-popover {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 40;
  width: 260px; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; background: var(--pane); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow);
}
/* Same fix as .side-panel[hidden] above (Task 4): the class rule's
   display:flex beats the UA [hidden] rule at equal specificity by cascade
   order alone, so without this the popover renders (and is click-hittable)
   even while closed — found while browser-verifying Task 7 with a narrow
   viewport, where the always-present box happened to sit on top of
   #clear-filters and silently ate the click. */
.more-popover[hidden] { display: none; }
.region-select {
  width: 100%; height: 28px; padding: 0 6px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--pane2);
}
.checkbox-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--fg2); cursor: pointer;
}
.checkbox-row input { accent-color: var(--accent); }

.clear-btn {
  margin-left: auto; height: 26px; padding: 0 8px;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--fg3); font-size: 12px; cursor: pointer;
}

/* ---- body split: list | map | panel ---- */

.body-split { flex: 1 1 auto; display: flex; min-height: 0; position: relative; }

.list-pane {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--pane); border-right: 1px solid var(--line);
  flex: 0 0 46%;
}
.sort-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--pane);
}
.result-count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--fg3); }
.list-scroll { flex: 1 1 auto; overflow-y: auto; }

/* ---- worklist rows (Task 5) ----
   Group wrapper itself is a bare, unclassed <div> — it needs no rule of
   its own (block-level default is correct), only .group-header inside it
   needs to be sticky against #list's scroll. */

.group-header {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  background: var(--pane2);
  border-top: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
}
.group-dot { width: 6px; height: 6px; border-radius: 8px; flex: 0 0 auto; }
.group-title {
  font-size: 11px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--fg2);
}
.group-count { font-family: var(--mono); font-size: 11px; color: var(--fg3); }
.group-hint {
  flex: 1 1 auto; font-size: 11px; color: var(--fg3); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.row {
  position: relative;
  display: flex; align-items: center;
  padding: 8px 12px 8px 14px;
  border-bottom: 1px solid var(--line2);
  cursor: pointer;
}
/* Selected via a list click or a map pin's 'select' message (Task 7) —
   state.selId in app.js. Task 8 keys #panel's contents off the same id. */
.row-selected { background: var(--accent-bg); }
.row-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.row-main { flex: 1 1 auto; min-width: 0; }
.row-top { display: flex; align-items: baseline; gap: 6px; }
.row-name {
  font-size: 13px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.row-cc { flex: 0 0 auto; font-family: var(--mono); font-size: 10px; color: var(--fg3); }
.row-sub {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
  color: var(--fg2); font-size: 11.5px; white-space: nowrap; overflow: hidden;
}
.row-place { overflow: hidden; text-overflow: ellipsis; }
.row-sep { color: var(--line); }
.row-tags { color: var(--fg3); overflow: hidden; text-overflow: ellipsis; }
.row-side {
  flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; gap: 3px; padding-left: 10px;
}
.row-phone { font-family: var(--mono); font-size: 12px; color: var(--fg); letter-spacing: -0.01em; }
.row-phone-empty {
  font-size: 11px; color: var(--fg3);
  border: 1px dashed var(--line); border-radius: 4px; padding: 0 5px;
}
.row-meta { font-size: 11px; color: var(--fg3); font-family: var(--mono); }

.list-empty, .list-end {
  padding: 18px 12px 60px; text-align: center; font-size: 11px; color: var(--fg3);
}

.map-pane { position: relative; overflow: hidden; min-width: 0; flex: 1 1 auto; }
.map-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--map); }

.side-panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(430px, 100%);
  display: flex; flex-direction: column;
  background: var(--pane); border-left: 1px solid var(--line);
  box-shadow: var(--shadow); z-index: 20;
}
/* Author rules beat the UA [hidden] rule at equal specificity by cascade
   order alone, so .side-panel{display:flex} above would win and the panel
   would show even while hidden — this pins [hidden] back on top. */
.side-panel[hidden] { display: none; }

/* ---- company panel (Task 8) ----
   docs/design/CRM.dc.html lines 169-268. Several pieces reuse existing
   primitives rather than duplicating near-identical rules: kind buttons
   reuse .seg-control/.tab-btn (header theme switcher, sort tabs); outcome
   buttons reuse .chip/.chip.active/.chip-dot; the status badge's dot
   reuses .group-dot (both are 6x6, radius 8); "Нов запис"/"История"
   headers reuse .caption. Only genuinely new shapes get a class here. */

.panel-header {
  flex: 0 0 auto; padding: 12px 14px 12px;
  border-bottom: 1px solid var(--line); background: var(--pane);
}
.panel-head-row { display: flex; align-items: flex-start; gap: 10px; }
.panel-head-main { flex: 1 1 auto; min-width: 0; }
.panel-status-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
/* Design's own statusBg/statusFg ternaries resolve to the same value on
   both branches (var(--pane2)/var(--fg) either way) — reproduced as the
   fixed values they actually evaluate to, not as a no-op conditional. */
.panel-status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: 5px; font-size: 11px; font-weight: 600;
  background: var(--pane2); color: var(--fg);
}
.panel-cc-region { font-family: var(--mono); font-size: 11px; color: var(--fg3); }
.panel-name {
  margin: 0; font-size: 17px; line-height: 1.25; font-weight: 650;
  letter-spacing: -0.01em; text-wrap: pretty; word-break: break-word;
}
.panel-addr { margin-top: 5px; font-size: 12px; color: var(--fg2); line-height: 1.45; }
.panel-close {
  flex: 0 0 auto; width: 26px; height: 26px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--pane2); color: var(--fg2); cursor: pointer; line-height: 1;
}

.panel-phone-box {
  display: flex; align-items: center; gap: 12px; margin-top: 10px;
  padding: 9px 11px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--pane2);
}
.panel-phone-box-empty { border-style: dashed; background: transparent; }
.panel-phone-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.panel-phone-caption { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--fg3); }
.panel-phone-big {
  font-family: var(--mono); font-size: 19px; font-weight: 600;
  letter-spacing: -0.02em; user-select: all;
}
.panel-phone-big-empty { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--fg3); user-select: auto; }
.panel-phone-note { margin-left: auto; font-size: 11.5px; color: var(--fg2); text-align: right; max-width: 170px; line-height: 1.35; }

.panel-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.panel-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--pane2); font-size: 12px; color: var(--fg2);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.panel-link-kind { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg3); }

.panel-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.panel-tag {
  padding: 3px 8px; border-radius: 5px; font-size: 11.5px;
  background: var(--pane2); border: 1px solid var(--line); color: var(--fg2);
}

.panel-body { flex: 1 1 auto; overflow-y: auto; background: var(--bg); }

.panel-form { padding: 12px 14px; background: var(--pane); border-bottom: 1px solid var(--line); }
.panel-form-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.panel-form-shortcut { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--fg3); }
.panel-form-row1 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.panel-date-input {
  width: 100%; height: 30px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--pane2);
  font-family: var(--mono); font-size: 12px;
}
.panel-outcomes { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.panel-followup { margin-bottom: 8px; }
.panel-followup-label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--fg3); }
.panel-textarea {
  width: 100%; padding: 8px 9px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--pane2); font-size: 13px; line-height: 1.5; resize: vertical; outline: none;
}
.panel-form-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.panel-save-btn {
  height: 30px; padding: 0 14px; border: 1px solid transparent; border-radius: 6px;
  background: var(--accent); color: oklch(0.99 0 0); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.panel-save-btn:disabled { opacity: .6; cursor: default; }
.panel-form-hint { font-size: 11px; color: var(--fg3); line-height: 1.35; }
.panel-form-error { font-size: 11px; color: var(--due); line-height: 1.35; }

.panel-history { padding: 12px 14px 60px; }
.panel-history-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.panel-history-count { font-family: var(--mono); font-size: 11px; color: var(--fg3); }
.panel-history-note { margin-left: auto; font-size: 10.5px; color: var(--fg3); }
.panel-history-loading { font-size: 12.5px; color: var(--fg3); }
.panel-history-list { display: flex; flex-direction: column; gap: 8px; }
.panel-history-empty {
  padding: 14px; border: 1px dashed var(--line); border-radius: 8px;
  font-size: 12.5px; color: var(--fg2); line-height: 1.5;
}
.history-entry {
  padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--fg3);
  border-radius: 8px; background: var(--pane);
}
.history-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.history-kind {
  padding: 2px 7px; border-radius: 5px; font-size: 11px; font-weight: 600;
  background: var(--pane2); border: 1px solid var(--line); color: var(--fg2);
}
.history-outcome {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 5px; font-size: 11.5px; font-weight: 600;
  color: var(--fg); background: var(--pane2); border: 1px solid var(--line);
}
.history-when { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--fg2); }
.history-body { margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: var(--fg); white-space: pre-wrap; text-wrap: pretty; overflow-wrap: break-word; }
.history-meta { margin-top: 7px; display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--fg3); }
.history-sep { color: var(--line); }

/* ============================================================
   Auth pages (login.html) — unrelated to the CRM shell above.
   ============================================================ */

.login-page { display: grid; place-items: center; min-height: 100vh; margin: 0; }
#login-form { display: grid; gap: .75rem; width: min(22rem, 90vw); }
#login-form label { display: grid; gap: .25rem; font-size: .9rem; }
#login-form input { padding: .5rem; font-size: 1rem; }
#login-form button { padding: .6rem; font-size: 1rem; cursor: pointer; }
#error { color: #b00020; margin: 0; }

/* ===========================================================================
   Mobile — phones in portrait. Target device: iPhone 13 mini (375 x 812 CSS px),
   the narrowest phone still in wide use; everything here is fluid, so wider
   phones simply get more room.

   The desktop layout puts the list and map side by side and floats the company
   panel over the map's right-hand side. At 375px none of that fits: a 46% list
   pane is 172px, and a "min(430px, 100%)" panel covers the entire screen while
   still being styled as a side rail.

   So below the breakpoint the three regions stop sharing space and take turns:
   list OR map, chosen by .mobile-view-bar (which lives outside .body-split so
   it survives either pane being display:none), with the panel as a full-screen
   sheet above both. One thing on screen at a time is also simply how a phone
   app reads.

   Landscape is deliberately NOT special-cased: at 812x375 the side-by-side
   layout is the better fit and it already works.
   ========================================================================= */

/* Some Android browsers still lack env(); the fallbacks keep them sane. */
:root { --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); }

.mobile-view-bar { display: none; }

@media (max-width: 700px) {

  /* 100vh on iOS Safari measures the viewport WITHOUT the browser chrome, so a
     100vh shell is taller than the visible area and the bottom of the app sits
     under the toolbar. dvh tracks the chrome as it collapses; the 100vh line
     stays first as the fallback for anything that doesn't know dvh. */
  .app-shell { height: 100vh; height: 100dvh; font-size: 14px; }

  /* --- header: ONE row — search, theme swatches, sign-out --------------- */
  /* Two rows cost ~90px of an 812px screen. The brand goes (you know which
     app you are in; login.html carries the branding), the theme buttons
     shrink to colour swatches, and the user's own name goes — leaving the
     row to search, which is the control that actually needs the width. */
  .app-header {
    height: auto; flex-wrap: nowrap; gap: 8px;
    padding: 6px calc(10px + var(--safe-r)) 6px calc(10px + var(--safe-l));
    padding-top: calc(6px + env(safe-area-inset-top, 0px));   /* under the notch */
  }
  .brand-wrap { display: none; }
  /* Overrides the desktop max-width AND the old two-row `flex: 1 0 100%`. */
  .search-wrap { order: 0; flex: 1 1 auto; min-width: 0; max-width: none; }
  .search-input { height: 36px; font-size: 16px; }  /* 16px: iOS zooms on focus below this */
  .header-tools { gap: 6px; margin-left: 0; flex: 0 0 auto; }
  #theme-caption { display: none; }                  /* the swatches speak for themselves */

  /* Theme buttons as colour swatches. The label text stays in the DOM (and so
     in the accessibility tree) and is only taken off screen by font-size:0 —
     these buttons have no other accessible name.
     The three colours are LITERALS on purpose: a swatch shows the theme it
     switches TO, so var(--pane) — which is whatever theme is active right now
     — would paint all three the same. Values are theme.css's --pane for each
     of :root / [data-theme=paper] / [data-theme=console]; if a theme's paper
     colour changes there, change it here too. */
  .app-header .seg-control { gap: 3px; padding: 2px; }
  .app-header .tab-btn {
    width: 26px; height: 30px; padding: 0; font-size: 0;
    border: 1px solid var(--line);
  }
  .app-header #theme-grey    { background: oklch(1 0 0); }
  .app-header #theme-paper   { background: oklch(0.985 0.008 85); }
  .app-header #theme-console { background: oklch(0.235 0.014 255); }
  /* .tab-btn.active's own background would repaint the swatch, so the
     selected state is a ring instead. The id rules above outrank it. */
  .app-header .tab-btn.active { box-shadow: 0 0 0 2px var(--accent); }

  /* font-size:0 on the wrapper kills the " · " text node and #whoami; the
     link re-declares a size so "Изход" survives. Hiding #whoami alone would
     leave the separator dangling. */
  .session-info { margin-left: 0; font-size: 0; }
  .session-info #logout { font-size: 12px; }

  /* --- filters: status chips + a button that opens the rest as a sheet --
     The old layout put all four filter groups in one horizontal scroller.
     At 375px only the status chips are ever on screen, and with the
     scrollbar hidden there is nothing to suggest the other three exist —
     you cannot discover a filter you cannot see.
     So the bar keeps only the primary axis (status) and #more-toggle opens
     the whole bar as a bottom sheet. Same nodes in both states, no DOM
     moves: the only difference is which CSS branch is applied, keyed off
     data-sheet, which app.js sets in setMoreOpen(). Nothing above this
     breakpoint reads that attribute. */
  .filter-bar {
    flex-wrap: nowrap; overflow: visible; align-items: center;
    gap: 8px; padding: 8px calc(10px + var(--safe-r)) 8px calc(10px + var(--safe-l));
  }
  .filter-bar > * { flex: 0 0 auto; }
  .chip { height: 32px; padding: 0 12px; }          /* comfortable thumb target */

  /* Collapsed: everything except the status chips and the toggle lives in
     the sheet, so it is hidden here rather than scrolled past. */
  #status-label, #country-label, #cat-label, #rel-label,
  #country-chips, #cat-chips, #rel-chips,
  .filter-bar .filter-sep, #clear-filters { display: none; }

  /* The status chips are the scroller now, not the whole bar — the toggle
     must stay pinned rather than scroll away with them. The mask fades the
     right edge so it reads as scrollable without a scrollbar. */
  #status-chips {
    flex: 1 1 auto; min-width: 0; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  }
  #status-chips::-webkit-scrollbar { display: none; }

  .more-filters { flex: 0 0 auto; }
  .filter-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px; margin-left: 6px; padding: 0 4px;
    border-radius: 9px; background: var(--accent); color: oklch(0.99 0 0);
    font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  }
  .filter-count[hidden] { display: none; }

  /* --- filters, expanded: the bar IS the sheet ------------------------- */
  .filter-bar[data-sheet="open"] {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 70;
    flex-direction: column; align-items: stretch; gap: 9px;
    max-height: 80dvh; overflow-y: auto; overflow-x: hidden;
    border-top: 1px solid var(--line); border-radius: 14px 14px 0 0;
    box-shadow: var(--shadow);
    padding: 14px calc(14px + var(--safe-r))
             calc(14px + env(safe-area-inset-bottom, 0px)) calc(14px + var(--safe-l));
  }
  /* Backdrop. It belongs to .filter-bar, so a tap on it targets .filter-bar
     itself — which is neither #more-popover's subtree nor #more-toggle, so
     app.js's existing outside-click handler closes the sheet unchanged. */
  .filter-bar[data-sheet="open"]::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: oklch(0 0 0 / .35);
  }
  .filter-bar[data-sheet="open"] #status-label,
  .filter-bar[data-sheet="open"] #country-label,
  .filter-bar[data-sheet="open"] #cat-label,
  .filter-bar[data-sheet="open"] #rel-label { display: block; }
  .filter-bar[data-sheet="open"] #clear-filters { display: block; margin-left: 0; height: 34px; }
  .filter-bar[data-sheet="open"] #status-chips,
  .filter-bar[data-sheet="open"] #country-chips,
  .filter-bar[data-sheet="open"] #cat-chips,
  .filter-bar[data-sheet="open"] #rel-chips {
    display: flex; flex-wrap: wrap; overflow: visible;
    -webkit-mask-image: none; mask-image: none;
  }
  /* Inside the sheet the popover is just another section, not a floating
     layer anchored to a chip. */
  .filter-bar[data-sheet="open"] .more-popover {
    position: static; width: auto; max-width: none; padding: 0;
    border: none; box-shadow: none; background: transparent;
  }
  .filter-bar[data-sheet="open"] .more-toggle::after { content: "\00a0\25B4"; }

  /* Collapsed, the popover is anchored to a chip in a bar that no longer
     scrolls, but pinning it to the viewport still beats a 260px box hanging
     off a 375px screen. */
  .more-popover {
    position: fixed; left: 10px; right: 10px; top: auto; width: auto; max-width: none;
  }

  /* --- list / map toggle ------------------------------------------------ */
  .mobile-view-bar {
    display: flex; flex: 0 0 auto; justify-content: center;
    padding: 7px 10px; background: var(--pane); border-bottom: 1px solid var(--line);
  }
  .mobile-view-bar .seg-control { width: 100%; max-width: 320px; }
  .mobile-view-bar .tab-btn { flex: 1 1 0; height: 32px; font-size: 13px; }

  /* --- body: one pane at a time ---------------------------------------- */
  .body-split { flex-direction: column; }
  .list-pane { flex: 1 1 auto; border-right: none; }
  .map-pane  { flex: 1 1 auto; }
  .body-split[data-mobile-view="list"] .map-pane  { display: none; }
  .body-split[data-mobile-view="map"]  .list-pane { display: none; }

  .sort-bar {
    padding: 8px calc(10px + var(--safe-r)) 8px calc(10px + var(--safe-l));
    gap: 6px;
  }
  /* "РЕД / ORDER" costs ~70px of a 375px row and pushes "По регион" onto a
     second line. The three buttons name themselves. */
  #sort-label { display: none; }
  .sort-bar .seg-control { flex: 1 1 auto; min-width: 0; }
  .sort-bar .tab-btn { flex: 1 1 0; height: 32px; padding: 0 4px; white-space: nowrap; }
  .result-count { flex: 0 0 auto; }

  .row {
    padding: 11px calc(12px + var(--safe-r)) 11px calc(14px + var(--safe-l));
    min-height: 56px;                               /* comfortably tappable */
  }
  .row-name { font-size: 14px; }
  .row-phone { font-size: 13px; }
  /* Both halves of .row-sub shrink by default, so at 375px the city gets
     clipped first ("Koln, N…") while the tags keep their width. The city is
     what identifies the lead; the roles/categories tail is the expendable
     one, so pin the place and let the tags absorb the truncation. Capped so
     a long "city, region" can't push the tags off screen entirely. */
  .row-place { flex: 0 0 auto; max-width: 60%; }
  .row-side { max-width: 46%; }

  /* --- company panel: full-screen sheet --------------------------------- */
  /* fixed, not absolute: it must cover the header and filter bar too, so the
     panel is the whole screen rather than a rail floating over the map. */
  .side-panel {
    position: fixed; inset: 0; width: auto;
    border-left: none; z-index: 60;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .panel-header, .panel-form, .panel-history {
    padding-left: calc(14px + var(--safe-l)); padding-right: calc(14px + var(--safe-r));
  }
  .panel-close { width: 40px; height: 40px; }       /* the only way out — make it big */
  .panel-name { font-size: 19px; }
  .panel-phone-big { font-size: 22px; }
  .panel-phone-note { max-width: 120px; }
  .panel-form-row1 { grid-template-columns: 1fr; }  /* two 170px selects are too tight */
  .panel-date-input, .panel-textarea, .panel-save-btn { font-size: 16px; }
  .panel-date-input { height: 38px; }
  .panel-save-btn { height: 40px; padding: 0 18px; }
  .panel-outcomes .chip { height: 32px; }
  .panel-form .tab-btn { height: 34px; }            /* kind: call/email/meeting/note */
  .rel-btn { height: 36px; padding: 0 14px; font-size: 13px; }
  .rel-meta { margin-left: 0; flex: 1 0 100%; text-align: left; }
  /* Clear the home indicator, and keep the last history entry scrollable past it. */
  .panel-history { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .panel-form-shortcut { display: none; }           /* no Ctrl+Enter on a phone */
}

/* ---- relevance ---------------------------------------------------------
   A company marked irrelevant is filtered out of the default "Активни" view,
   so these styles are what you see in the "Нерелевантни" and "Всички" views:
   dimmed enough to scan past, legible enough to un-mark. */

.row-irrelevant { opacity: .55; }
.row-irrelevant .row-name { text-decoration: line-through; text-decoration-thickness: 1px; }
.row-irrelevant-tag {
  flex: 0 0 auto; margin-left: 6px; padding: 0 5px; border-radius: 4px;
  font-size: 10px; letter-spacing: .03em; color: var(--fg3);
  border: 1px solid var(--line); background: var(--pane2);
}

.panel-relevance {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--line);
}
.rel-btn {
  height: 28px; padding: 0 11px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--pane2); color: var(--fg2); font-size: 12px; cursor: pointer;
  font-family: inherit;
}
.rel-btn:hover { border-color: var(--fg3); color: var(--fg); }
.rel-btn-relevant.active {
  border-color: var(--interested, var(--accent)); color: var(--fg); font-weight: 600;
  background: var(--accent-bg);
}
.rel-btn-irrelevant.active {
  border-color: var(--closed, var(--fg3)); color: var(--fg); font-weight: 600;
  background: var(--pane2); text-decoration: line-through;
}
.rel-meta { margin-left: auto; font-size: 10.5px; color: var(--fg3); text-align: right; }