/* Volat cockpit — spoločný vzhľad klubu Smart Network pre VŠETKY obrazovky (worklist, karta,
   akcie, SMS, hlásenia). Poradie v @layout: bootstrap → cockpit.css (štruktúra) → sn/tokens.css
   (identita, 1:1 kópia zo skillu sn-vizual) → sn/app.css (tento súbor) → sms.css (len SMS).
   Farby sú tokeny, nové nevymýšľať. Svetlé odtiene (--ok/--info/--bad/--warn) = text v brandovej
   farbe nad navy/sklom, AA ≥ 4,5 : 1 (zmerané nad najsvetlejším sklom #2A3359).
   Kde sa identita bije s použiteľnosťou, vyhráva použiteľnosť — miesta sú označené „UX:". */

:root {
	/* cockpit.css tokeny → SN tmavá identita */
	--bg: var(--ink);
	--card: rgba(255, 255, 255, .11);
	--text: var(--txt);
	--muted: #B6C0DC;           /* sn-vizual pasca: #97A3C6 nad sklom nespĺňa AA */
	--text2: var(--muted);
	--tint: var(--blue);
	--accent: var(--blue);
	--radius: var(--r-md);
	--shadow: 0 8px 32px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .12);
	--ok: #7BE3A6; --info: #8FD3F5; --bad: #FF9DB8; --warn: #FFD978;
	/* UX: zelená „Volať" je o odtieň tmavšia než brand #039E49 — biely text na #039E49 má 3,5 : 1 */
	--call: #02873E; --call-dark: #027A38;
	--ease: cubic-bezier(.2, .8, .2, 1);
	/* Bootstrap (data-bs-theme="dark") → tokeny */
	--bs-body-bg: var(--ink);
	--bs-body-color: var(--txt);
	--bs-body-font-family: var(--font);
	--bs-border-color: var(--line);
	--bs-secondary-color: var(--muted);
	--bs-link-color: var(--info); --bs-link-color-rgb: 143, 211, 245;
	--bs-link-hover-color: #fff; --bs-link-hover-color-rgb: 255, 255, 255;
	--bs-code-color: var(--bad);
	--bs-success-rgb: 123, 227, 166; --bs-danger-rgb: 255, 157, 184; --bs-warning-rgb: 255, 217, 120;
	color-scheme: dark;
}
html { color-scheme: dark; overflow-x: clip; }
body { background: var(--ink); color: var(--txt); font-family: var(--font); font-size: 16px; line-height: 1.5; }
.ambient__net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .4; pointer-events: none; }
/* UX: orby stoja (blur 60 px v pohybe žerie GPU na iPhone), živá sieť len na desktope (@layout, $mobil) */
.ambient .orb { animation: none !important; }
/* UX: na telefóne karty bez backdrop-filter — orby sú už rozmazané, sklo vyzerá rovnako
   a dlhá karta kontaktu sa pri scrollovaní neprekresľuje (iPhone). Hlavička blur drží. */
.is-mobil .card, .is-mobil .sms-conv, .is-mobil .btn { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.is-mobil .card { background: rgba(255, 255, 255, .1); }

/* odkaz v texte: :where = nulová špecifickosť, .seg/.chip/.btn ho prebijú */
main :where(a:not(.btn, .chip, .sms-conv, .sms-who, .stretched-link, .callring, .park-toggle, .back, .fact, .btn-call, .clamp-more)) { color: var(--info); text-decoration: underline; text-underline-offset: 3px; }
main :where(a:not(.btn, .chip, .sms-conv, .sms-who, .stretched-link, .callring, .park-toggle, .back, .fact, .btn-call, .clamp-more)):hover { color: #fff; }
code { color: var(--bad); }
b, strong { font-weight: 700; }
.text2, .text-muted, .text-body-secondary { color: var(--muted) !important; }
.text-success { color: var(--ok) !important; }
.text-danger { color: var(--bad) !important; }
.text-warning { color: var(--warn) !important; }
.small, small { font-size: .875em; }

/* ---- hlavička: tmavé sklo, sticky (tokens.css by ju cez body > * prepol na relative) ---- */
body > .topbar {
	position: sticky; top: 0; z-index: 1020;
	padding-top: env(safe-area-inset-top, 0px);
	background: rgba(7, 14, 36, .78);
	-webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
	border-bottom: 1px solid var(--line);
}
.topbar .bar { max-width: var(--container); margin: 0 auto; padding: .5rem .75rem; display: flex; align-items: center; gap: .5rem; min-width: 0; }
.topbar .brand-logo { height: 26px; width: auto; margin-right: .5rem; flex: 0 0 auto; }
.topbar .who { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .search {
	background: rgba(255, 255, 255, .08); border: 1px solid var(--line); color: var(--txt);
	border-radius: 999px; padding: .5rem 1rem; font: 400 16px var(--font); min-height: 44px; width: 100%;   /* 16 px: iOS pri fokuse nezoomuje */
}
.topbar .search::placeholder { color: rgba(182, 192, 220, .8); }
.topbar .search:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(19, 154, 215, .28); background: rgba(255, 255, 255, .11); }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.sms-back svg, .sms-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

main.wrap { max-width: var(--container); margin: 0 auto; padding: 1rem .75rem 1.5rem; }

/* ---- nadpisy ---- */
.list-title { font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
h1, h2, h3, .h4, .h5, .h6 { color: var(--txt); }
h2.h6 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.fw-semibold { font-weight: 600 !important; }
.chev { stroke: var(--info); }
.back { color: var(--info); }

/* ---- chipy a segment ---- */
.chip {
	background: rgba(255, 255, 255, .07); border: 1px solid var(--line); color: var(--txt);
	font-weight: 600; min-height: 44px;
	transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.chip:hover { color: var(--txt); background: var(--surface-2); border-color: rgba(255, 255, 255, .28); }
.chip.active, .chip.active:hover { background: var(--txt); color: var(--ink); border-color: var(--txt); }
.chip .ico { width: 18px; height: 18px; }
.seg { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.seg a { border-radius: 999px; color: var(--muted); min-height: 44px; transition: background-color .25s var(--ease), color .25s var(--ease); }
.seg a:hover { color: var(--txt); }
.seg a.active { background: rgba(255, 255, 255, .16); color: var(--txt); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 14px rgba(0, 0, 0, .18); }
.seg .cnt { color: inherit; opacity: .8; }

/* ---- karty (glass z tokens.css; tokens .card nemá padding) ---- */
.card { margin-bottom: 1rem; color: var(--txt); border-radius: var(--r-md); }
.card-body { padding: 22px 24px; }
.card-body.p-0 { padding: 0; }
.card-header {
	background: transparent; border-bottom: 1px solid var(--line); color: var(--txt);
	font-size: 1rem; font-weight: 700; letter-spacing: -.005em; text-transform: none;
	padding: .8rem 1.1rem; border-radius: var(--r-md) var(--r-md) 0 0 !important;
}
.card-header.border-0 { border: 0; background: none; padding: .25rem .25rem .5rem; color: var(--muted); }
.card.border-danger { border-color: rgba(230, 49, 99, .7) !important; }

/* ---- tlačidlá: SN pilulka; primárne = dúha, ostatné = ghost sklo ---- */
.btn {
	--bs-btn-font-weight: 800; --bs-btn-border-width: 1px;
	font-family: var(--font); font-size: 15px; letter-spacing: .01em;
	padding: 10px 20px; border-radius: 999px; min-height: 44px; white-space: nowrap;
	border: 1px solid var(--bs-btn-border-color);   /* tokens.css .btn dáva border:0 */
	display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
	--bs-btn-color: var(--txt); --bs-btn-hover-color: var(--txt); --bs-btn-active-color: var(--txt);
	--bs-btn-bg: rgba(255, 255, 255, .12); --bs-btn-hover-bg: rgba(255, 255, 255, .18); --bs-btn-active-bg: rgba(255, 255, 255, .22);
	--bs-btn-border-color: rgba(255, 255, 255, .2); --bs-btn-hover-border-color: rgba(255, 255, 255, .32); --bs-btn-active-border-color: rgba(255, 255, 255, .32);
	--bs-btn-disabled-color: var(--txt); --bs-btn-disabled-bg: rgba(255, 255, 255, .08); --bs-btn-disabled-border-color: var(--line);
	--bs-btn-focus-box-shadow: none;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.btn-outline-primary, .btn-outline-secondary, .btn-light, .btn-outline-dark, .btn-outline-light {
	--bs-btn-color: var(--txt); --bs-btn-hover-color: var(--txt); --bs-btn-bg: rgba(255, 255, 255, .1); --bs-btn-hover-bg: rgba(255, 255, 255, .18);
	--bs-btn-border-color: rgba(255, 255, 255, .2); --bs-btn-hover-border-color: rgba(255, 255, 255, .32);
	--bs-btn-active-bg: rgba(255, 255, 255, .22); --bs-btn-active-color: var(--txt);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
/* vybraná voľba (filtre akcií, podtyp, termín) = biela pilulka ako aktívny chip */
.btn-dark { --bs-btn-color: var(--ink); --bs-btn-hover-color: var(--ink); --bs-btn-active-color: var(--ink); --bs-btn-bg: var(--txt); --bs-btn-hover-bg: #fff; --bs-btn-active-bg: #fff; --bs-btn-border-color: var(--txt); --bs-btn-hover-border-color: #fff; --bs-btn-active-border-color: #fff; }
.btn-primary {
	--bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
	--bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent;
	background: var(--rainbow-btn); background-size: 250% 100%; background-position: 0 0;
	background-origin: border-box; background-repeat: no-repeat;   /* inak sa pod 1px okrajom opakuje zelený koniec gradientu */
	box-shadow: 0 8px 30px rgba(230, 49, 99, .35);
}
/* sn-vizual: --rainbow-btn (scrim 14 %) + hover posun max 25 % = biely text ≥ 4,5 : 1 v každom bode */
.btn-primary:hover, .btn-primary:active { background: var(--rainbow-btn); background-size: 250% 100%; background-position: 25% 0; background-origin: border-box; background-repeat: no-repeat; box-shadow: 0 12px 40px rgba(230, 49, 99, .5); }
/* stavové tlačidlá: plné = vybrané (tónovaná výplň + plný okraj), outline = ponuka. Text ≥ 7 : 1. */
.btn-success { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-bg: #055d38; --bs-btn-hover-bg: #066b40; --bs-btn-active-bg: #066b40; --bs-btn-border-color: var(--green); --bs-btn-hover-border-color: #2fc070; --bs-btn-active-border-color: #2fc070; }
.btn-outline-success { --bs-btn-color: var(--ok); --bs-btn-hover-color: #fff; --bs-btn-border-color: rgba(3, 158, 73, .7); --bs-btn-hover-bg: rgba(3, 158, 73, .35); --bs-btn-hover-border-color: var(--green); --bs-btn-bg: rgba(3, 158, 73, .12); --bs-btn-active-bg: rgba(3, 158, 73, .45); --bs-btn-active-color: #fff; }
.btn-outline-danger { --bs-btn-color: var(--bad); --bs-btn-hover-color: #fff; --bs-btn-border-color: rgba(230, 49, 99, .7); --bs-btn-hover-bg: rgba(230, 49, 99, .35); --bs-btn-hover-border-color: var(--pink); --bs-btn-active-bg: rgba(230, 49, 99, .45); --bs-btn-active-color: #fff; --bs-btn-bg: rgba(230, 49, 99, .1); }
.btn-danger { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-bg: rgba(230, 49, 99, .42); --bs-btn-hover-bg: rgba(230, 49, 99, .58); --bs-btn-active-bg: rgba(230, 49, 99, .65); --bs-btn-border-color: var(--pink); --bs-btn-hover-border-color: var(--pink); --bs-btn-active-border-color: var(--pink); }
/* „Ve hře" a „Nedovolal" = žltá (CEO žltá z brandu), tmavý text 11,5 : 1 */
.btn-warning { --bs-btn-color: var(--ink); --bs-btn-hover-color: var(--ink); --bs-btn-active-color: var(--ink); --bs-btn-bg: var(--yellow); --bs-btn-hover-bg: #ffcd4d; --bs-btn-active-bg: #ffcd4d; --bs-btn-border-color: var(--yellow); --bs-btn-hover-border-color: #ffcd4d; --bs-btn-active-border-color: #ffcd4d; }
.btn-outline-warning { --bs-btn-color: var(--warn); --bs-btn-hover-color: var(--ink); --bs-btn-border-color: rgba(250, 192, 43, .65); --bs-btn-hover-bg: var(--yellow); --bs-btn-hover-border-color: var(--yellow); --bs-btn-bg: rgba(250, 192, 43, .1); --bs-btn-active-bg: var(--yellow); --bs-btn-active-color: var(--ink); --bs-btn-active-border-color: var(--yellow); }
.btn-link { --bs-btn-color: var(--info); --bs-btn-hover-color: #fff; --bs-btn-bg: transparent; --bs-btn-hover-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.btn-group > .btn, .btn-group-sm > .btn { border-radius: 999px !important; }
.btn-group { gap: .3rem; }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } }
.btn:active { transform: scale(.98); }
.btn[aria-disabled="true"] { opacity: .45; filter: grayscale(1); box-shadow: none; cursor: not-allowed; }

/* ---- formuláre (SN .fld) ---- */
.form-label, label.small.text2 { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.form-control, .form-select {
	background-color: rgba(255, 255, 255, .07); border: 1px solid var(--line); color: var(--txt);
	border-radius: var(--r-sm); font-family: var(--font); font-size: 16px !important; min-height: 46px;   /* pod 16 px iOS zoomuje */
}
.form-control-sm, .form-select-sm { min-height: 44px; padding: .45rem .75rem; }
.form-control::placeholder { color: rgba(182, 192, 220, .75); }
.form-control:focus, .form-select:focus { background-color: rgba(255, 255, 255, .1); border-color: var(--blue); color: var(--txt); box-shadow: 0 0 0 3px rgba(19, 154, 215, .28); }
.form-select option, select option { background: var(--ink-2); color: var(--txt); }
textarea.form-control { min-height: 88px; }
input[type=checkbox], .form-check-input { accent-color: var(--blue); }
.form-check-input { background-color: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .35); }
.form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- upozornenia: tónovaný okraj, text v svetlom odtieni ---- */
.alert { border-radius: var(--r-sm); border: 1px solid; color: var(--txt); }
.alert-warning { background: rgba(250, 192, 43, .12); border-color: rgba(250, 192, 43, .5); color: var(--warn); }
.alert-warning b, .alert-warning .text2 { color: #FFE7A8 !important; }
.alert-danger { background: rgba(230, 49, 99, .14); border-color: rgba(230, 49, 99, .55); color: #FFD3DF; }
.alert-primary, .alert-info { background: rgba(19, 154, 215, .14); border-color: rgba(19, 154, 215, .55); color: #D3EEFC; }
.alert a { color: #fff; }

/* ---- štítky: Bootstrap badge → brandová farba ako okraj + jemná výplň ---- */
.badge { font-weight: 700; border-radius: 999px; padding: .3em .65em; border: 1px solid transparent; vertical-align: middle; }
.badge.bg-primary { background: rgba(19, 154, 215, .18) !important; border-color: rgba(19, 154, 215, .55); color: var(--info); }
.badge.bg-success { background: rgba(3, 158, 73, .18) !important; border-color: rgba(3, 158, 73, .6); color: var(--ok); }
.badge.bg-danger { background: rgba(230, 49, 99, .18) !important; border-color: rgba(230, 49, 99, .6); color: var(--bad); }
.badge.bg-warning { background: rgba(250, 192, 43, .16) !important; border-color: rgba(250, 192, 43, .55); color: var(--warn) !important; }
.badge.bg-secondary, .badge.bg-light { background: rgba(255, 255, 255, .1) !important; border-color: var(--line) !important; color: var(--txt) !important; }

/* ---- potvrdenie o uložení (SN flash). Dole fixne: na dlhej karte ho volajúci inak nevidel. ---- */
.toast-msg {
	color: var(--txt); background: var(--ink-2); border: 1px solid rgba(3, 158, 73, .7); border-radius: var(--r-sm);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .45); margin-top: .4rem;
}
.toast-msg.t-danger, .toast-msg.t-error { border-color: rgba(230, 49, 99, .8); }
.toast-msg.t-warning { border-color: rgba(250, 192, 43, .7); }
body > .toast-bar, .toast-bar { position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }

/* ---- zoznam kontaktov (mobil) ---- */
.clist .item { border-bottom: 1px solid var(--line); padding: .7rem .8rem; }
.clist .item:active { background: var(--surface-2); }
.clist .fw-semibold { font-weight: 700 !important; font-size: 1.02rem; }
.parked { opacity: .5; }
a.park-toggle { color: var(--muted); }
a.park-toggle:hover { color: var(--txt); }
.avatar { color: #fff; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
/* zelené okrúhle tel: tlačidlo — jediná výrazná farba v riadku, aby sa netrafilo vedľa */
.callring { background: rgba(3, 158, 73, .22); color: var(--ok); border: 1px solid rgba(3, 158, 73, .6); width: 46px; height: 46px; }
.callring:hover { background: rgba(3, 158, 73, .38); color: #fff; }
.callring .ico { width: 21px; height: 21px; }

/* ---- desktopová tabuľka ---- */
.table-card { background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r-md); box-shadow: var(--shadow); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--txt); --bs-table-hover-bg: rgba(255, 255, 255, .07); --bs-table-hover-color: var(--txt); --bs-table-striped-bg: rgba(255, 255, 255, .035); --bs-table-striped-color: var(--txt); --bs-table-border-color: var(--line); }
.table-card thead th { background: rgba(255, 255, 255, .05); color: var(--muted); border-bottom: 1px solid var(--line); font-size: .78rem; letter-spacing: .02em; text-transform: none; }
.table-card tbody td { border-color: rgba(255, 255, 255, .07); }
.table-card tbody tr:last-child td { border-bottom: 0; }
.table a:not(.btn) { color: var(--info); }

/* ---- detail kontaktu ---- */
.hero-name { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.05; }
.btn-call {
	background: var(--call); color: #fff; border: 1px solid #2fc070; border-radius: 999px;
	font-weight: 800; font-size: 1.15rem; min-height: 56px;
	box-shadow: 0 10px 30px rgba(3, 158, 73, .35), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-call:hover, .btn-call:focus { background: var(--call-dark); color: #fff; }
.btn-call .ico { width: 22px; height: 22px; }
.fact { background: rgba(255, 255, 255, .08); border: 1px solid var(--line); color: var(--txt); min-height: 34px; }
a.fact { color: var(--info); }
a.fact.text-danger { color: var(--bad) !important; border-color: rgba(230, 49, 99, .45); }
.fact b { color: #fff; }
.edit-pencil { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -12px -8px -12px -4px; color: var(--info); vertical-align: middle; }
.edit-pencil .ico { width: 18px; height: 18px; }
.ai-body { line-height: 1.6; color: var(--txt); }
.ai-body b { color: #fff; }
.last-comm { background: rgba(19, 154, 215, .12); border-left: 3px solid var(--blue); color: var(--txt); }
.last-comm.none { background: rgba(255, 255, 255, .06); border-left-color: var(--line); color: var(--muted); }
.last-comm .small { color: var(--muted); }
.chan { color: #fff; }
.comm, .kv, .ev, .task { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.kv .k { color: var(--muted); font-size: .8rem; text-transform: none; letter-spacing: 0; font-weight: 700; }
.ev:nth-child(even) { background: rgba(255, 255, 255, .03); }
.ev-more { color: var(--muted); min-height: 44px; display: flex; align-items: center; }
.vehre-bar { border-bottom: 1px solid var(--line); }
.vehre-form, .hrom-body { background: rgba(250, 192, 43, .08); border-bottom: 1px solid rgba(250, 192, 43, .3); }
.hrom-body .chip { background: rgba(255, 255, 255, .07); border-color: var(--line); color: var(--txt); min-height: 44px; padding: .3rem .8rem; }
.hrom-body .chip:has(input:checked) { background: var(--txt); color: var(--ink); border-color: var(--txt); }
.when .d { opacity: .75; }
.clamp-more { color: var(--info); text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.past { opacity: .72; }
.typedot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: .45rem; vertical-align: middle; flex: 0 0 auto; }
details.brief summary::after { color: var(--muted); }
details.brief .brief-body { border-top-color: var(--line); }
.picker-pill { background: rgba(255, 255, 255, .08); border-color: var(--line); color: var(--txt); min-height: 44px; align-items: center; }
.picker:focus-within { outline: 2px solid var(--yellow); }

/* prázdny stav = čo ďalej, nie len „nič" */
.empty { padding: 1.4rem 1.2rem; border: 1px dashed rgba(255, 255, 255, .22); border-radius: var(--r-md); color: var(--muted); text-align: center; }
.empty b { color: var(--txt); }

/* ---- hlásenie problému (vzor klub sn-portal @app.latte + portal.css) ---- */
/* Základ = tlačidlo na konci stránky (telefón, tablet, dotykový notebook): plávajúce
   prekrývalo 📞 v riadku pri spodku pri každom scrolle (UX kontrola, tablet 1024×640).
   Plávajúce je len s myšou na širokom displeji, kde je vpravo od obsahu voľné miesto. */
.appfoot { max-width: var(--container); margin: 0 auto; padding: 0 .75rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; }
.bugfab {
	display: inline-flex; gap: .5rem; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
	font: 700 15px var(--font); color: #F4F6FF; background: rgba(20, 30, 66, .82);
	border: 1px solid rgba(255, 255, 255, .22);
	transition: transform .25s var(--ease), box-shadow .25s, border-color .25s, background .25s;
}
.bugfab:hover, .bugfab:focus-visible { border-color: rgba(255, 150, 110, .8); background: rgba(30, 42, 88, .92); }
.bugfab:active { transform: scale(.96); }
.bugfab__ico, .bugfab__ok { width: 22px; height: 22px; }
.bugfab__ok { display: none; color: #7CE3A6; }
.bugfab.is-done { border-color: rgba(124, 227, 166, .9); }
.bugfab.is-done .bugfab__ok { display: block; }
.bugfab.is-done .bugfab__ico { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1200px) {
	.appfoot { padding: 0; height: 0; }
	main.wrap { padding-bottom: 88px; }   /* posledný riadok zoznamu nikdy pod tlačidlom */
	.bugfab {
		position: fixed; right: 18px; z-index: 1030; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
		width: 48px; height: 48px; padding: 0; border-radius: 50%; display: grid; place-items: center;
		-webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
		box-shadow: 0 10px 28px rgba(0, 0, 0, .38);
	}
	.bugfab__txt { display: none; }
	.bugfab__ico, .bugfab__ok { grid-area: 1 / 1; }
	.bugfab:hover, .bugfab:focus-visible { transform: translateY(-3px) scale(1.06); }
	/* nad lepiacou lištou dávky SMS, nech neprekryje Uložiť/Schváliť */
	body:has(.sms-sticky) .bugfab { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

.bugbox { position: fixed; inset: 0; z-index: 1090; display: none; align-items: center; justify-content: center; padding: 16px; }
.bugbox.is-open { display: flex; }
.bugbox__back { position: absolute; inset: 0; background: rgba(4, 8, 22, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bugbox__box {
	position: relative; width: 460px; max-width: 100%; max-height: calc(100dvh - 32px); overflow: auto; padding: 28px 24px 24px;
	border-radius: var(--r-md); color: var(--txt);
	background: linear-gradient(180deg, rgba(30, 42, 88, .96), rgba(13, 23, 55, .98));
	border: 1px solid rgba(255, 255, 255, .2);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 40px 100px rgba(0, 0, 0, .6);
}
.bugbox__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--txt); font-size: 22px; line-height: 1; display: grid; place-items: center; }
.bugbox h2 { font-size: 1.45rem; font-weight: 900; letter-spacing: -.01em; margin: 0 48px 6px 0; }
.bugbox .lead2 { color: var(--muted); font-size: 15px; margin-bottom: 14px; }
.bugbox .lbl { display: block; font-size: 13.5px; font-weight: 700; color: var(--muted); margin: 14px 0 7px; }
.bugcats { display: flex; flex-wrap: wrap; gap: 8px; }
.bugcat {
	background: rgba(255, 255, 255, .06); border: 1px solid var(--line); color: var(--txt);
	border-radius: 999px; padding: 0 14px; min-height: 44px;
	font: 600 14px var(--font); cursor: pointer;
	transition: background .2s, border-color .2s, transform .2s;
}
.bugcat:hover { border-color: rgba(255, 255, 255, .3); }
.bugcat.is-on { color: #fff; border-color: transparent; background: var(--rainbow-btn); background-size: 250% 100%; }
.bugcat:active { transform: scale(.96); }
.bugshot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; margin-top: 12px; }
.bugshot__name { color: var(--muted); font-size: 13px; }
.bugbox__stav { color: var(--muted); font-size: 14px; }
.bugbox__stav.is-err { color: var(--bad); font-weight: 700; }

/* zoznam hlásení */
.bugrow { display: flex; gap: 1rem; align-items: flex-start; padding: .9rem 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.bugrow:last-child { border-bottom: 0; }
.bugrow.is-done { opacity: .55; }
.bugrow__msg { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- responzívne a pohyb na konci (sn-vizual pasca: inak ho prebijú neskoršie pravidlá) ---- */
@media (max-width: 900px) {
	.bugbox { align-items: flex-end; padding: 0; }
	.bugbox__box { width: 100%; border-radius: var(--r-md) var(--r-md) 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 575.98px) {
	.topbar .bar { padding: .45rem .6rem; gap: .4rem; }
	.topbar .chip { padding: .45rem .75rem; font-size: .9rem; }
	main.wrap { padding-top: .85rem; }
	.card-body { padding: 18px 16px; }
	.card-header { padding: .75rem 1rem; }
}
@media (max-width: 420px) {
	.topbar .chip { padding: .45rem .6rem; font-size: .88rem; }
	.sms-back { padding-left: .4rem !important; gap: .1rem; }
}
@media (max-width: 400px) {
	.topbar .btn { padding: 8px 13px; font-size: 14px; }
	.topbar .btn .ico { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.btn:hover, .btn:active, .bugfab:hover { transform: none; }
}
.table-card td.num { white-space: nowrap; }

/* ---- UX kontrola 10. 10. 2026 ---- */
/* vyhľadávanie: dlhý „nájdené ako <e-mail>" nesmie vytlačiť 📞 z riadku */
.badge.alias { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.clist .item > .min-w-0 { min-width: 0; }
.callring { flex-shrink: 0; }
/* „Načítať ďalších" pod zoznamom */
.more-wrap { display: flex; justify-content: center; margin: 1rem 0 .5rem; }
/* malé ciele na karte → 44 px */
.t44, a.fact, .clamp-more { display: inline-flex; align-items: center; min-height: 44px; }
.fact { min-height: 44px; }
.btn:has(> .ico:only-child) { min-width: 44px; padding-inline: 10px; }
.topbar a:has(> .brand-logo) { display: flex; align-items: center; min-height: 44px; }
/* dátum: ikona kalendára viditeľná na tmavom */
input[type=date]::-webkit-calendar-picker-indicator, input[type=datetime-local]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .85; cursor: pointer; }
/* neaktívna voľba prepínača ≥ 4,5 : 1 aj nad svetlejším sklom */
.seg a { color: #D3DAEE; }
/* vodorovne scrollujúce čipy: fade vpravo, kým je čo posúvať (cockpit.js prepína .has-more) */
.chips.has-more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
/* dlhý briefing na mobile zbalený */
.ai-body.is-folded { max-height: 13em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
/* hlavička karty: akcie po hovore spolu */
.acts { display: flex; gap: .5rem; flex: 0 0 auto; }
@media (max-width: 991.98px) {
	/* dva riadky: hore späť · meno · Ďalší, dole Nedovolal · Poznámka · Hotovo (vždy na očiach) */
	.topbar .bar:has(> .acts) { flex-wrap: wrap; row-gap: .45rem; }
	.topbar .bar:has(> .acts) > .who { flex: 1 1 0; }
	.topbar .bar:has(> .acts) > .flex-grow-1:not(form) { display: none; }
	.acts { order: 9; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.acts .btn { padding-inline: 8px; }
}