@import url("pills.css");
/* ============================================================
   Datamart — Průvodce filter-panel controls (builder panels)
   The per-tab filter UI of the Průvodce: fields, option pills,
   segmented controls, range inputs, the Bonita rating ladder,
   tag chips, nested sub-fields, name typeahead, profession picker.
   Ported 1:1 from globals.css. Pairs with _ds/wizard.js + _ds/segment-data.js.
   Load AFTER segment-screen.css (it owns .sgb-panel / .adr / .cz-map).
   ============================================================ */

/* Inputs + typeahead share a readable column width (not the full panel). */
.sgb-panel .sgb-input, .sgb-panel .sgb-ac { max-width: 460px; }

/* fields */
.sgb-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.sgb-flabel { display: inline-flex; align-items: center; gap: var(--sp-2); font: var(--label); color: var(--fg-secondary); }
.sgb-flabel .ti { font-size: var(--ico-xs); color: var(--fg-muted); }
.sgb-hint { font: var(--hint); color: var(--fg-muted); }
.sgb-eval { align-self: center; font: 600 12px var(--font-mono); color: var(--accent-ink); white-space: nowrap; }
.sgb-input { width: 100%; height: 32px; padding: 0 var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
             background: var(--surface-100); color: var(--fg); font: 500 13px var(--font-sans); outline: none; }
[data-theme="dark"] .sgb-input { background: var(--surface-50); }
.sgb-input::placeholder { color: var(--fg-muted); }
.sgb-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.sgb-input:disabled { opacity: 0.5; cursor: not-allowed; }
.sgb-inrow { display: flex; gap: var(--sp-3); align-items: flex-end; }
.sgb-inrow > .sgb-field { flex: 1; }
.sgb-inrow > .sgb-input { flex: 1; min-width: 0; }
.sgb-inrow > .sgb-opt { height: 32px; flex: none; }

/* option pills (multi-select) */
.sgb-opts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sgb-opt { display: inline-flex; align-items: center; gap: var(--sp-2); height: 28px; padding: 0 var(--sp-3); border-radius: var(--radius-pill);
           border: 1px solid var(--border-strong); background: var(--surface-100); font: 600 12px var(--font-sans); color: var(--ink-700); cursor: pointer; }
[data-theme="dark"] .sgb-opt { background: var(--surface-50); }
.sgb-opt:hover { background: var(--hover-surface); }
.sgb-opt .ti { font-size: var(--ico-xs); }
.sgb-opt.on { background: var(--accent); border-color: var(--accent-press); color: var(--fg-on-accent); }
.sgb-opt.on:hover { background: var(--accent-press); }
.sgb-opt.on .ti { color: var(--fg-on-accent); }

/* segmented (single-select) */
.sgb-seg { display: inline-flex; align-self: flex-start; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.sgb-seg button { display: inline-flex; align-items: center; gap: var(--sp-2); height: 30px; padding: 0 var(--sp-4); border: 0; border-left: 1px solid var(--border); background: var(--surface-100);
                  font: 600 12px var(--font-sans); color: var(--ink-700); cursor: pointer; }
.sgb-seg button .ti { font-size: var(--ico-sm); }
[data-theme="dark"] .sgb-seg button { background: var(--surface-50); }
.sgb-seg button:first-child { border-left: 0; }
.sgb-seg button:hover:not(.on) { background: var(--hover-surface); }
.sgb-seg button.on { background: var(--accent); color: var(--fg-on-accent); }

/* Bonita rating ladder — clickable tag toggles: tinted outline → lift on hover → solid when active */
.sgb-grade { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-width: 40px; height: 30px; padding: 0 var(--sp-4); --gc: var(--bonita-grey); --gi: var(--bonita-grey-ink);
             border: 1.5px solid color-mix(in srgb, var(--gc) 32%, transparent); border-radius: var(--radius-md);
             background: color-mix(in srgb, var(--gc) 24%, #fff); color: color-mix(in srgb, var(--gc) 44%, #14100a); font: 600 12px var(--font-display); cursor: pointer;
             transition: transform 0.1s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease; }
.sgb-grade.on { padding: 0 var(--sp-3) 0 var(--sp-4); }
.sgb-grade .ti { font-size: var(--ico-xs); opacity: 0.85; }
.sgb-grade.green { --gc: var(--bonita-green); --gi: var(--bonita-green-ink); }
.sgb-grade.lime  { --gc: var(--bonita-lime);  --gi: var(--bonita-lime-ink); }
.sgb-grade.amber { --gc: var(--bonita-amber); --gi: var(--bonita-amber-ink); }
.sgb-grade.rose  { --gc: var(--bonita-rose);  --gi: var(--bonita-rose-ink); }
.sgb-grade.grey  { --gc: var(--bonita-grey);  --gi: var(--bonita-grey-ink); }
.sgb-grade:hover { border-color: var(--gc); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.sgb-grade.on { background: var(--gc); border-color: var(--gc); color: var(--gi); }

/* Bonita — selectable rating bands with the explanation tied to each band (hover bubble) */
.sgb-scale-intro { margin: 0; max-width: 680px; font: 400 13px/1.55 var(--font-sans); color: var(--fg-secondary); }
.sgb-scale-intro strong { color: var(--fg); font-weight: 600; }
.sgb-scale-list { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 720px; }
.sgb-band { position: relative; display: flex; align-items: center; width: max-content; padding: 3px 0; }
.sgb-band-grades { flex: none; display: flex; flex-wrap: nowrap; gap: var(--sp-2); }
.sgb-band-txt { position: absolute; left: calc(100% + 14px); top: 50%; z-index: 40; width: max-content; max-width: 268px;
                display: flex; flex-direction: column; gap: 3px; padding: var(--sp-3) var(--sp-4);
                background: var(--surface-100); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
                opacity: 0; visibility: hidden; transform: translateY(-50%) translateX(-5px); pointer-events: none;
                transition: opacity 0.13s ease, transform 0.13s ease, visibility 0.13s; }
.sgb-band:hover .sgb-band-txt { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
.sgb-band-txt::after { content: ""; position: absolute; right: 100%; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; margin-right: -4.5px;
                       background: var(--surface-100); border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: rotate(45deg); }
.sgb-band-txt .t { font: var(--h3); color: var(--fg); letter-spacing: -0.01em; }
.sgb-band-txt .d { font: 400 12px/1.45 var(--font-sans); color: var(--fg-secondary); }

/* nested sub-field (e.g. business size revealed under "Podnikatel") */
.sgb-sub { padding-left: var(--sp-4); border-left: 2px solid var(--accent-tint); }

/* inline checkbox refinement (e.g. "jen ověřená čísla") */
.sgb-check { display: inline-flex; align-items: center; gap: var(--sp-3); align-self: flex-start; font: 500 12px var(--font-sans); color: var(--fg-secondary); cursor: pointer; user-select: none; }
.sgb-check input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex: none; }

/* tags: removable chips + add input */
.sgb-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-0); }
/* tag chip = DS .pill purple (_ds/pills.css) s odebratelným × */
.sgb-tag { padding-right: 3px; }

/* clear link (map selection / sub-section) */
.sgb-clear { padding: 0 var(--sp-2); border: 0; background: transparent; font: 600 12px var(--font-sans); color: var(--accent); cursor: pointer; }
.sgb-clear:hover { text-decoration: underline; }

/* country select (static) + "v okolí" select inside the address combo */
.adr-stat { position: relative; display: flex; align-items: center; height: 38px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
            background: var(--surface-100); min-width: 180px; }
[data-theme="dark"] .adr-stat { background: var(--surface-50); }
.adr-stat select { appearance: none; -webkit-appearance: none; width: 100%; height: 100%; border: 0; outline: none; background: transparent;
                   padding: 0 30px 0 var(--sp-4); font: 500 13px var(--font-sans); color: var(--fg); cursor: pointer; }
.adr-stat .chev { position: absolute; right: 9px; pointer-events: none; color: var(--fg-muted); font-size: 14px; }
.adr-stat:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
/* "v okolí" radius select inside the address combo (functional dropdown) */
.adr-okoli { padding: 0; gap: 0; }
.adr-okoli select { appearance: none; -webkit-appearance: none; border: 0; outline: none; background: transparent; height: 100%; padding: 0 30px; font: 500 13px var(--font-sans); color: var(--fg); cursor: pointer; }
.adr-okoli.empty select { color: var(--fg-muted); }
.adr-okoli .pin { position: absolute; left: 9px; pointer-events: none; color: var(--fg-secondary); font-size: 15px; }
.adr-okoli .chev { position: absolute; right: 8px; pointer-events: none; color: var(--fg-muted); font-size: 14px; }

/* name / company typeahead (Konkrétní osoba / firma) — reuses .ac-pop */
.sgb-ac { position: relative; display: block; }
.sgb-ac .sgb-input { width: 100%; }
.sgb-ac-input { padding-left: 32px; }
.sgb-ac-lead { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; color: var(--fg-secondary); pointer-events: none; }
.sgb-ac-lead .ti { font-size: var(--ico-sm); }
.sgb-ac-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; margin: 0; padding: var(--sp-2); list-style: none; max-width: 460px;
              background: var(--surface-100); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); max-height: 280px; overflow-y: auto; }
.sgb-ac-pop .ac-opt { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); cursor: pointer; font: 500 13px var(--font-sans); color: var(--fg); }
.sgb-ac-pop .ac-opt .ti { font-size: var(--ico-sm); color: var(--fg-muted); flex: none; }
.sgb-ac-pop .ac-opt.active { background: var(--hover-surface); }
.sgb-ac-hl { background: transparent; color: var(--accent); font-weight: 600; }

/* profession picker (fulltext search + tag chips + popular) */
.prof { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 460px; }
.prof-search { position: relative; }
.prof-lead { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; color: var(--fg-secondary); pointer-events: none; }
.prof-lead .ti { font-size: var(--ico-sm); }
.prof-input { padding-left: 32px; }
.prof-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; margin: 0; padding: var(--sp-2); list-style: none;
            background: var(--surface-100); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); max-height: 280px; overflow-y: auto; }
.prof-opt { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); cursor: pointer; font: 500 13px var(--font-sans); color: var(--fg); }
.prof-opt .ti { font-size: var(--ico-sm); color: var(--fg-muted); flex: none; }
.prof-opt.active { background: var(--hover-surface); }
.prof-popular { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.prof-popular .lbl { font: 500 11px var(--font-sans); color: var(--fg-muted); margin-right: var(--sp-0); }