/* ═══════════════════════════════════════════════════════════════
   ORBIO EKG widget — štýly (mirror RTG estetiky, teal akcent).
   Používa orbio-tokens.css premenné s fallbackmi. Dark + light téma.
   ═══════════════════════════════════════════════════════════════ */

.ecg-root { --ecg-accent:#00d4aa; --ecg-accent-rgb:0,212,170;
  display:flex; flex-direction:column; height:100%; min-height:0; color:var(--text,rgba(224,232,240,.92));
  font-family:Inter,-apple-system,system-ui,sans-serif; }

/* ── Header + tabs ── */
.ecg-head { display:flex; align-items:center; gap:12px; padding:14px 18px 0; flex-wrap:wrap; }
.ecg-title { font-size:18px; font-weight:800; letter-spacing:.2px; display:flex; align-items:center; gap:9px; }
.ecg-title .ecg-heart { color:var(--ecg-accent); }
.ecg-title-sub { font-size:11.5px; color:var(--text-dim,rgba(224,232,240,.5)); font-weight:500; }
.ecg-tabs { display:flex; gap:6px; padding:12px 18px 14px; border-bottom:1px solid rgba(255,255,255,.07); }
.ecg-tab { padding:7px 16px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; user-select:none;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); color:var(--text-dim,rgba(224,232,240,.55));
  transition:all .15s; display:inline-flex; align-items:center; gap:7px; }
.ecg-tab:hover { background:rgba(255,255,255,.06); color:var(--text,rgba(224,232,240,.92)); }
.ecg-tab.active { background:rgba(var(--ecg-accent-rgb),.13); color:var(--ecg-accent); border-color:rgba(var(--ecg-accent-rgb),.4); }
.ecg-body { flex:1; min-height:0; overflow:auto; padding:18px; }

/* ── Buttons ── */
.ecg-btn { padding:9px 16px; border-radius:9px; font-size:13px; font-weight:600; cursor:pointer; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04); color:var(--text,rgba(224,232,240,.9)); transition:all .15s; display:inline-flex; align-items:center; gap:7px; }
.ecg-btn:hover { background:rgba(255,255,255,.08); }
.ecg-btn:disabled { opacity:.45; cursor:not-allowed; }
.ecg-btn-primary { background:linear-gradient(135deg,#00d4aa,#0099cc); border:none; color:#04201b; font-weight:700; }
.ecg-btn-primary:hover { filter:brightness(1.08); }
.ecg-btn-danger { color:#ff8a8a; border-color:rgba(239,68,68,.3); }
.ecg-btn-danger:hover { background:rgba(239,68,68,.12); }

/* ── List table ── */
.ecg-list-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:12px; flex-wrap:wrap; }
.ecg-list-table { width:100%; border-collapse:collapse; font-size:13px; }
.ecg-list-table thead th { text-align:left; padding:9px 10px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--text-muted,rgba(224,232,240,.45)); border-bottom:1px solid rgba(255,255,255,.09); position:sticky; top:0;
  background:var(--surface-1,rgba(20,26,34,.9)); backdrop-filter:blur(6px); }
.ecg-list-table tbody td { padding:11px 10px; border-bottom:1px solid rgba(255,255,255,.05); vertical-align:middle; }
.ecg-list-row { cursor:pointer; transition:background .12s; }
.ecg-list-row:hover { background:rgba(var(--ecg-accent-rgb),.06); }
.ecg-list-patient { font-weight:700; }
.ecg-list-sub { font-size:11px; color:var(--text-dim,rgba(224,232,240,.5)); }
.ecg-species-pill { display:inline-block; padding:2px 9px; border-radius:7px; font-size:10.5px; font-weight:700; text-transform:uppercase;
  background:rgba(var(--ecg-accent-rgb),.12); color:var(--ecg-accent); }

/* ── Status badges ── */
.ecg-status { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:8px; font-size:10.5px; font-weight:700; }
.ecg-status.uploaded { background:rgba(148,163,184,.15); color:#aab6c4; }
.ecg-status.analyzing { background:rgba(74,163,255,.15); color:#6db4ff; }
.ecg-status.done { background:rgba(52,211,153,.15); color:#46d39a; }
.ecg-status.failed { background:rgba(239,68,68,.15); color:#ff8a8a; }
.ecg-status .ecg-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.ecg-status.analyzing .ecg-dot { animation:ecg-pulse 1.2s ease-in-out infinite; }
@keyframes ecg-pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* ── New record: layout ── */
.ecg-new-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:start; }
@media (max-width:900px){ .ecg-new-grid { grid-template-columns:1fr; } }
.ecg-card { background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:16px; }
.ecg-section-h { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--ecg-accent); margin:0 0 12px; }

/* ── Form ── */
.ecg-row { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.ecg-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.ecg-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:12px; }
.ecg-label { font-size:11.5px; font-weight:600; color:var(--text-dim,rgba(224,232,240,.6)); }
.ecg-label .req { color:#ff8a8a; }
.ecg-input, .ecg-select, .ecg-textarea { width:100%; box-sizing:border-box; padding:9px 11px; border-radius:8px; font-size:13px; font-family:inherit;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:var(--text,rgba(224,232,240,.92)); transition:border-color .15s; }
.ecg-input:focus, .ecg-select:focus, .ecg-textarea:focus { outline:none; border-color:rgba(var(--ecg-accent-rgb),.55); }
.ecg-textarea { min-height:64px; resize:vertical; }
.ecg-hint { font-size:11px; color:var(--text-muted,rgba(224,232,240,.42)); margin-top:-6px; margin-bottom:12px; }

/* ── Dropzone ── */
.ecg-dropzone { border:2.5px dashed rgba(var(--ecg-accent-rgb),.45); border-radius:14px; min-height:200px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:24px; cursor:pointer; transition:all .15s; gap:8px;
  background:rgba(var(--ecg-accent-rgb),.025); }
.ecg-dropzone:hover { background:rgba(var(--ecg-accent-rgb),.05); }
.ecg-dropzone.drag-over { border-style:solid; background:rgba(var(--ecg-accent-rgb),.1); box-shadow:inset 0 0 30px rgba(var(--ecg-accent-rgb),.15); }
.ecg-dz-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 13px; border-radius:20px; font-size:10.5px; font-weight:800;
  letter-spacing:.6px; text-transform:uppercase; background:linear-gradient(135deg,#00d4aa,#0099cc); color:#04201b; }
.ecg-dz-title { font-size:15px; font-weight:700; }
.ecg-dz-sub { font-size:12px; color:var(--text-dim,rgba(224,232,240,.5)); }
.ecg-thumbs { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.ecg-thumb { position:relative; width:120px; border-radius:9px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:#000; }
.ecg-thumb img { width:100%; display:block; max-height:90px; object-fit:cover; }
.ecg-thumb-x { position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(0,0,0,.65); color:#fff; font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center; }
.ecg-thumb-cap { font-size:10px; padding:4px 6px; color:var(--text-dim,rgba(224,232,240,.55)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ecg-orient-hint { font-size:11.5px; color:var(--text-dim,rgba(224,232,240,.62)); margin:12px 0 7px; }
.ecg-thumb-imgwrap { width:100%; height:90px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#000; }
.ecg-thumb-imgwrap img { max-width:100%; max-height:88px; transition:transform .18s ease; }
.ecg-thumb-rot { display:flex; align-items:center; justify-content:center; gap:6px; padding:4px 0; background:rgba(0,0,0,.28); }
.ecg-thumb-rot button { width:24px; height:22px; border-radius:5px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:var(--text,#cde); cursor:pointer; font-size:13px; line-height:1; }
.ecg-thumb-rot button:hover { background:rgba(var(--ecg-accent-rgb),.22); }
.ecg-thumb-rot span { font-size:10px; color:var(--text-dim,rgba(224,232,240,.5)); min-width:30px; text-align:center; }

/* ── Detail / result ── */
.ecg-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.ecg-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media (max-width:980px){ .ecg-detail-grid { grid-template-columns:1fr; } }
.ecg-img-stack { display:flex; flex-direction:column; gap:10px; }
.ecg-img-stack img { width:100%; border-radius:10px; border:1px solid rgba(255,255,255,.1); background:#000; }
.ecg-step { background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.06); border-radius:11px; padding:14px; margin-bottom:12px; }
.ecg-step-h { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--ecg-accent); margin:0 0 9px;
  display:flex; align-items:center; gap:8px; }
.ecg-step-h .ecg-num { width:20px; height:20px; border-radius:50%; background:rgba(var(--ecg-accent-rgb),.16); color:var(--ecg-accent);
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; }
.ecg-kv { display:flex; gap:8px; font-size:12.5px; margin:3px 0; }
.ecg-kv .k { color:var(--text-dim,rgba(224,232,240,.55)); min-width:120px; }
.ecg-kv .v { color:var(--text,rgba(224,232,240,.92)); font-weight:600; }
.ecg-dx-big { font-size:16px; font-weight:800; color:#fff; margin:4px 0 2px; }
[data-theme="svetlo"] .ecg-dx-big { color:#0f172a; }

/* ── Measurement table ── */
.ecg-measure { width:100%; border-collapse:collapse; font-size:12.5px; margin-top:4px; }
.ecg-measure th { text-align:left; padding:6px 8px; font-size:10px; text-transform:uppercase; letter-spacing:.4px;
  color:var(--text-muted,rgba(224,232,240,.45)); border-bottom:1px solid rgba(255,255,255,.08); }
.ecg-measure td { padding:7px 8px; border-bottom:1px solid rgba(255,255,255,.05); }
.ecg-flag { display:inline-block; padding:1px 8px; border-radius:7px; font-size:10px; font-weight:700; text-transform:uppercase; }
.ecg-flag.normal { background:rgba(52,211,153,.14); color:#46d39a; }
.ecg-flag.borderline { background:rgba(251,191,36,.16); color:#f5c451; }
.ecg-flag.abnormal { background:rgba(239,68,68,.16); color:#ff8a8a; }
.ecg-flag.na { background:rgba(148,163,184,.14); color:#9fb0c0; }

/* ── DDx probability bars ── */
.ecg-ddx { margin:6px 0; }
.ecg-ddx-row { margin-bottom:9px; }
.ecg-ddx-top { display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:4px; }
.ecg-ddx-name { font-weight:600; }
.ecg-ddx-pct { font-weight:800; color:var(--ecg-accent); }
.ecg-ddx-track { height:7px; border-radius:4px; background:rgba(255,255,255,.07); overflow:hidden; }
.ecg-ddx-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,#00d4aa,#0099cc); }
.ecg-ddx-why { font-size:11.5px; color:var(--text-dim,rgba(224,232,240,.5)); margin-top:3px; }

/* ── Treatment ── */
.ecg-tx { display:flex; gap:10px; padding:10px 12px; border-radius:9px; background:rgba(255,255,255,.03); margin-bottom:8px;
  border-left:3px solid var(--ecg-accent); }
.ecg-tx-urg { font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; padding:2px 7px; border-radius:6px; height:fit-content; white-space:nowrap; }
.ecg-tx-urg.immediate { background:rgba(239,68,68,.18); color:#ff8a8a; }
.ecg-tx-urg.urgent { background:rgba(255,159,67,.18); color:#ffb066; }
.ecg-tx-urg.routine { background:rgba(74,163,255,.16); color:#6db4ff; }
.ecg-tx-urg.follow_up { background:rgba(148,163,184,.16); color:#9fb0c0; }
.ecg-tx-body { font-size:12.5px; }
.ecg-tx-why { font-size:11.5px; color:var(--text-dim,rgba(224,232,240,.5)); margin-top:2px; }

/* ── Misc ── */
.ecg-report-text { font-size:13px; line-height:1.6; color:var(--text,rgba(224,232,240,.88)); white-space:pre-wrap; }
.ecg-conf-bar { display:flex; align-items:center; gap:9px; font-size:12px; }
.ecg-conf-track { flex:1; height:7px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; max-width:160px; }
.ecg-conf-fill { height:100%; background:linear-gradient(90deg,#00d4aa,#0099cc); }
.ecg-banner { padding:10px 14px; border-radius:10px; font-size:12.5px; margin-bottom:14px; display:flex; gap:9px; align-items:center; }
.ecg-banner.warn { background:rgba(255,159,67,.12); border:1px solid rgba(255,159,67,.3); color:#ffc28a; }
.ecg-banner.err { background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3); color:#ff9d9d; }
.ecg-banner.info { background:rgba(74,163,255,.1); border:1px solid rgba(74,163,255,.25); color:#9ecbff; }
.ecg-empty { text-align:center; padding:50px 20px; color:var(--text-dim,rgba(224,232,240,.5)); }
.ecg-empty-icon { font-size:38px; margin-bottom:12px; opacity:.6; }
.ecg-spin { width:34px; height:34px; border:3px solid rgba(var(--ecg-accent-rgb),.2); border-top-color:var(--ecg-accent); border-radius:50%;
  animation:ecg-rot .8s linear infinite; margin:0 auto 14px; }
@keyframes ecg-rot { to { transform:rotate(360deg); } }
.ecg-disclaimer { font-size:11px; color:var(--text-muted,rgba(224,232,240,.4)); font-style:italic; margin-top:16px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.06); }

/* ── Light theme ── */
[data-theme="svetlo"] .ecg-root { --ecg-accent:#0e7490; --ecg-accent-rgb:14,116,144; color:#1e293b; }
[data-theme="svetlo"] .ecg-tab { background:rgba(0,40,80,.04); color:#475569; border-color:rgba(0,40,80,.1); }
[data-theme="svetlo"] .ecg-tab.active { background:rgba(14,116,144,.1); color:#0e7490; border-color:rgba(14,116,144,.35); }
[data-theme="svetlo"] .ecg-input, [data-theme="svetlo"] .ecg-select, [data-theme="svetlo"] .ecg-textarea { background:rgba(0,40,80,.04); color:#1e293b; border-color:rgba(0,40,80,.12); }
[data-theme="svetlo"] .ecg-card, [data-theme="svetlo"] .ecg-step { background:rgba(0,40,80,.025); border-color:rgba(0,40,80,.08); }
[data-theme="svetlo"] .ecg-list-table thead th { background:rgba(245,248,250,.95); color:#64748b; }
[data-theme="svetlo"] .ecg-btn { background:rgba(0,40,80,.05); color:#1e293b; border-color:rgba(0,40,80,.12); }
[data-theme="svetlo"] .ecg-btn-primary { color:#fff; }

/* ── minimalistické ikony + copy tlačidlo (per sekcia) ── */
.ecg-step-t { flex:1 1 auto; }
.ecg-ico-lbl { display:inline-flex; align-items:center; gap:6px; }
.ecg-copy { margin-left:auto; flex:0 0 auto; width:25px; height:25px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.13); border-radius:7px; background:transparent; color:var(--text-dim,rgba(224,232,240,.5)); cursor:pointer;
  opacity:.55; transition:opacity .15s, color .15s, background .15s, border-color .15s; }
.ecg-copy:hover { opacity:1; color:var(--ecg-accent); border-color:rgba(var(--ecg-accent-rgb),.5); background:rgba(var(--ecg-accent-rgb),.09); }
.ecg-copy.ok { opacity:1; color:var(--ecg-accent); border-color:var(--ecg-accent); background:rgba(var(--ecg-accent-rgb),.18); }
.ecg-copy svg { pointer-events:none; }
.ecg-btn svg, .ecg-banner svg { vertical-align:-3px; }
.ecg-empty-icon { color:var(--ecg-accent); opacity:.7; }
[data-theme="svetlo"] .ecg-copy { border-color:rgba(0,0,0,.14); color:rgba(30,41,59,.5); }