/* Perlička CRM — vzhľad podľa Raynetu (Dominik 3. 11. 2026: „vychytávky Raynetu = aj vyzerať rovnako“).
   Farby odčítané zo snímky Raynetu: menu #0791ae → #014857, zelená #40b100, pozadie #f3f5f7, text #2b2f33.
   Písmo ako Raynet: Plus Jakarta Sans (menu, nadpisy) + Roboto (text). Magenta Perličky len v logu. */
:root {
  --rn-menu-1: #0aa3c2; --rn-menu-2: #0791ae; --rn-menu-3: #027084; --rn-menu-4: #014857; --rn-menu-hladat: #00809a;
  --rn-zelena: #40b100; --rn-zelena-h: #379a00; --rn-zelena-panel: #60b102;
  --rn-tyrkys: #0791ae; --rn-tyrkys-sv: #e3f4f8; --rn-modra: #2b91ba; --rn-modra-sv: #e6f3f9;
  --rn-oranzova: #f29a1f; --rn-oranzova-sv: #fef3e2; --rn-cervena: #e5533d; --rn-cervena-sv: #fdecea;
  --rn-fialova: #8a63d2; --rn-fialova-sv: #f1ecfb;
  --text: #2b2f33; --tlm: #8b94a3; --ram: #e3e7ea; --ram-sv: #eef1f3; --pozadie: #f3f5f7; --biela: #fff;
  --pk: #ce3178;
  --menu: 248px; --hore: 64px;
  --r-panel: 8px; --r-prvok: 6px; --tien: 0 1px 3px rgba(20, 46, 71, .08), 0 1px 2px rgba(20, 46, 71, .04);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text);
  background: var(--pozadie); }
h1, h2, h3, legend, .rn-menu, .rn-zalozky, .tl, .nav-dole { font-family: "Plus Jakarta Sans", "Roboto", sans-serif; }
h1 { font-size: 28px; font-weight: 500; margin: 0 0 18px; color: var(--text); letter-spacing: -.01em; }
h2 { font-size: 17px; font-weight: 600; margin: 0 0 12px; color: var(--text); }
h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; color: var(--text); }
a { color: var(--rn-modra); text-decoration: none; }
a:hover { color: #1d7499; }
small, .tlm { color: var(--tlm); }
.skryte { display: none !important; }
.ik { width: 22px; height: 22px; flex: none; }

/* ---------- ľavé menu (Raynet) ---------- */
.rn-menu { position: fixed; inset: 0 auto 0 0; width: var(--menu); z-index: 30; color: #fff; display: flex; flex-direction: column;
  background: linear-gradient(170deg, var(--rn-menu-1) 0%, var(--rn-menu-2) 18%, var(--rn-menu-3) 55%, var(--rn-menu-4) 100%);
  padding: 18px 0 14px; transition: width .2s; }
.rn-logo { padding: 0 22px 18px; }
.rn-logo a, .rn-logo-mobil { display: flex; align-items: center; gap: 10px; color: #fff; font: 800 26px "Plus Jakarta Sans", sans-serif;
  letter-spacing: -.02em; }
.perla { width: 34px; height: 34px; border-radius: 9px; background: #fff; position: relative; flex: none; }
.perla::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd3e6, var(--pk) 70%); }
.rn-zbal { position: absolute; right: -15px; top: 52px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: #fff;
  color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.rn-zbal .ik { width: 16px; height: 16px; }
.rn-hladat { margin: 0 18px 22px; display: flex; align-items: center; gap: 8px; background: var(--rn-menu-hladat);
  border-radius: 999px; padding: 0 14px; height: 40px; }
.rn-hladat .ik { width: 18px; height: 18px; opacity: .9; }
.rn-hladat input { background: transparent; border: 0; color: #fff; font: 15px "Roboto", sans-serif; width: 100%; min-height: 0;
  padding: 0; outline: none; box-shadow: none; }
.rn-menu nav { display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
.rn-menu nav a { display: flex; align-items: center; gap: 16px; padding: 12px 26px; color: #fff; font-weight: 700; font-size: 16px;
  border-left: 4px solid transparent; }
.rn-menu nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.rn-menu nav a.akt { background: rgba(255,255,255,.14); border-left-color: #fff; }
.rn-novy { margin: 10px 0 0; position: relative; }
.rn-novy summary { list-style: none; display: flex; align-items: center; gap: 16px; padding: 12px 26px; color: #fff; font-weight: 700;
  font-size: 16px; cursor: pointer; }
.rn-novy summary::-webkit-details-marker { display: none; }
.rn-novy summary:hover { background: rgba(255,255,255,.08); }
.rn-novy-menu { position: absolute; left: 18px; bottom: 52px; width: 230px; background: #fff; border-radius: var(--r-panel);
  box-shadow: 0 8px 28px rgba(20,46,71,.25); padding: 6px; z-index: 40; }
.rn-novy-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-prvok); color: var(--text);
  font: 600 14px "Plus Jakarta Sans", sans-serif; }
.rn-novy-menu a:hover { background: var(--rn-tyrkys-sv); color: var(--rn-tyrkys); }
.rn-novy-menu .ik { width: 18px; height: 18px; color: var(--rn-tyrkys); }
/* zbalené menu — len ikony */
body.zbalene { --menu: 76px; }
body.zbalene .rn-menu nav a span, body.zbalene .rn-novy summary span, body.zbalene .rn-logo a span:last-child,
body.zbalene .rn-hladat input { display: none; }
body.zbalene .rn-menu nav a, body.zbalene .rn-novy summary { padding: 12px 0; justify-content: center; }
body.zbalene .rn-hladat { margin: 0 14px 22px; justify-content: center; padding: 0; }
body.zbalene .rn-logo { padding: 0 0 18px; display: flex; justify-content: center; }
body.zbalene .rn-zbal { transform: rotate(180deg); }

/* ---------- horná lišta: záložky otvorených záznamov, zvonček, používateľ ---------- */
.rn-hore { position: fixed; top: 0; right: 0; left: var(--menu); height: var(--hore); z-index: 25; background: #fff;
  border-bottom: 1px solid var(--ram); display: flex; align-items: stretch; padding: 0 16px 0 34px; transition: left .2s; }
.rn-logo-mobil { display: none; }
.rn-zalozky { display: flex; align-items: stretch; flex: 1; min-width: 0; overflow: hidden; }
.rn-zalozky > a, .rn-zalozky .zal { display: flex; align-items: center; gap: 8px; padding: 0 16px; color: #6b7684; font-weight: 600;
  font-size: 15px; border-bottom: 3px solid transparent; border-right: 1px solid var(--ram-sv); max-width: 220px; min-width: 0; }
.rn-zalozky .zal a { display: flex; align-items: center; gap: 8px; color: inherit; min-width: 0; }
.rn-zalozky span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rn-zalozky .ik { width: 20px; height: 20px; }
.rn-zalozky > a.akt, .rn-zalozky .zal.akt { color: var(--rn-tyrkys); border-bottom-color: var(--rn-tyrkys); }
.rn-zalozky .x { color: #aab3bf; padding: 2px; margin-left: 2px; }
.rn-zalozky .x .ik { width: 14px; height: 14px; }
.rn-zalozky .x:hover { color: var(--rn-cervena); }
.rn-zvoncek { position: relative; display: flex; align-items: center; padding: 0 16px; color: #6b7684; border-left: 1px solid var(--ram-sv); }
.rn-zvoncek b { position: absolute; top: 12px; right: 8px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--rn-cervena);
  color: #fff; font: 700 11px/20px "Roboto", sans-serif; text-align: center; padding: 0 5px; }
.rn-ja { position: relative; display: flex; align-items: stretch; border-left: 1px solid var(--ram-sv); }
.rn-ja summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 18px; cursor: pointer;
  color: var(--text); font-weight: 500; }
.rn-ja summary::-webkit-details-marker { display: none; }
.rn-ja summary .ik { width: 26px; height: 26px; padding: 3px; border: 1.5px solid #9aa3ad; border-radius: 50%; color: #6b7684; }
.rn-ja .sipka { color: #8b94a3; font-size: 12px; }
.rn-ja-menu { position: absolute; right: 0; top: calc(var(--hore) - 4px); width: 210px; background: #fff; border-radius: var(--r-panel);
  box-shadow: 0 8px 28px rgba(20,46,71,.2); padding: 6px; z-index: 40; }
.rn-ja-menu a, .rn-ja-menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-prvok);
  color: var(--text); font: 500 14px "Roboto", sans-serif; background: none; border: 0; cursor: pointer; text-align: left; }
.rn-ja-menu a:hover, .rn-ja-menu button:hover { background: var(--rn-tyrkys-sv); }
.rn-ja-menu .ik { width: 18px; height: 18px; color: var(--rn-tyrkys); }

.obsah { margin-left: var(--menu); padding: calc(var(--hore) + 26px) 32px 60px; max-width: calc(1320px + var(--menu)); transition: margin-left .2s; }
.nav-dole { display: none; }

/* ---------- mobil: horná lišta v tyrkysovej, dole navigácia ---------- */
@media (max-width: 900px) {
  body { font-size: 15px; }
  h1 { font-size: 22px; }
  .rn-menu { display: none; }
  .rn-hore { left: 0; height: 56px; padding: 0 6px 0 14px; padding-top: env(safe-area-inset-top);
    height: calc(56px + env(safe-area-inset-top)); border: 0; color: #fff;
    background: linear-gradient(100deg, var(--rn-menu-2), var(--rn-menu-3)); }
  .rn-logo-mobil { display: flex; font-size: 21px; margin-right: auto; }
  .rn-logo-mobil .perla { width: 28px; height: 28px; border-radius: 8px; }
  .rn-logo-mobil .perla::after { inset: 7px; }
  .rn-zalozky, .rn-ja .meno, .rn-ja .sipka { display: none; }
  .rn-zvoncek, .rn-ja { border: 0; color: #fff; }
  .rn-zvoncek b { top: 8px; }
  .rn-ja summary { padding: 0 8px; }
  .rn-ja summary .ik { border-color: rgba(255,255,255,.7); color: #fff; }
  .rn-ja-menu { top: 52px; }
  .obsah { margin-left: 0; padding: calc(56px + env(safe-area-inset-top) + 16px) 12px calc(90px + env(safe-area-inset-bottom)); }
  .nav-dole { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    background: #fff; border-top: 1px solid var(--ram); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .nav-dole a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: #8b94a3;
    padding: 4px 0; border-radius: var(--r-prvok); }
  .nav-dole .ik { width: 24px; height: 24px; }
  .nav-dole a.akt { color: var(--rn-tyrkys); }
}

/* ---------- nadpis stránky (Raynet: ikona v kruhu + názov + zelené tlačidlo) ---------- */
.rn-titul, .riadok-nadpis { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.rn-titul h1, .riadok-nadpis h1, .riadok-nadpis h2 { margin: 0; }
.riadok-nadpis { justify-content: space-between; }
.kruh { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #c9d0d8; display: grid; place-items: center; color: #6b7684;
  background: #fff; flex: none; }
.kruh .ik { width: 22px; height: 22px; }

/* ---------- panely (Raynet: biely panel, okrúhla farebná ikona, nadpis veľkými písmenami) ---------- */
.karta { background: var(--biela); border: 0; border-radius: var(--r-panel); padding: 22px 26px; box-shadow: var(--tien); margin-bottom: 20px; }
.karta > h2:first-child, .karta > h3:first-child { margin-top: 0; }
.panel-hlavicka { display: flex; align-items: center; gap: 14px; margin: -2px 0 16px; }
.panel-hlavicka h2 { margin: 0; font: 600 14px "Plus Jakarta Sans", sans-serif; text-transform: uppercase; letter-spacing: .03em; color: #3b4148; }
.panel-hlavicka h2 small { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 6px; }
.panel-hlavicka .vpravo { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.pk { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--rn-zelena-panel); flex: none; }
.pk .ik { width: 22px; height: 22px; }
.pk.tyrkys { background: #1ba5c4; } .pk.modra { background: var(--rn-modra); } .pk.oranzova { background: var(--rn-oranzova); }
.pk.cervena { background: var(--rn-cervena); } .pk.fialova { background: var(--rn-fialova); } .pk.siva { background: #8b94a3; }
.cip { display: inline-block; border: 1px solid var(--ram); border-radius: 999px; padding: 2px 10px; font-size: 12px; color: #6b7684; background: #fff; }
.karta.ruzova, .karta.modra, .karta.zelena, .karta.oranzova, .karta.fialova { background: #fff; }
.karta.modra { box-shadow: var(--tien), inset 4px 0 0 var(--rn-modra); }
.karta.zelena { box-shadow: var(--tien), inset 4px 0 0 var(--rn-zelena); }
.karta.oranzova { box-shadow: var(--tien), inset 4px 0 0 var(--rn-oranzova); }
.karta.fialova { box-shadow: var(--tien), inset 4px 0 0 var(--rn-fialova); }
@media (max-width: 900px) { .karta { padding: 16px; margin-bottom: 14px; } }
.mriezka { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.mriezka-2 { display: grid; gap: 20px; grid-template-columns: 2fr 1fr; align-items: start; }
.mriezka-volanie { display: grid; gap: 20px; grid-template-columns: 1fr 1.3fr; align-items: start; }
@media (max-width: 1100px) { .mriezka-2, .mriezka-volanie { grid-template-columns: 1fr; } }

/* prehľad aktivít — čísla v paneli */
.dlazdice { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.dlazdica { padding: 6px 18px; border-left: 1px solid var(--ram-sv); color: var(--text); }
.dlazdica:first-child { border-left: 0; padding-left: 0; }
.dlazdica .cislo { font: 600 30px/1.2 "Plus Jakarta Sans", sans-serif; color: var(--text); }
.dlazdica .popis { font-size: 13px; color: var(--tlm); }
.dlazdica.zelena .cislo { color: var(--rn-zelena); } .dlazdica.modra .cislo { color: var(--rn-modra); }
.dlazdica.oranzova .cislo { color: var(--rn-oranzova); } .dlazdica.cervena .cislo { color: var(--rn-cervena); }
.dlazdica.fialova .cislo { color: var(--rn-fialova); }
a.dlazdica:hover .popis { color: var(--rn-modra); }
@media (max-width: 600px) { .dlazdica { border-left: 0; padding: 8px 0; } }

/* stĺpcový graf ako „Vývoj predaja“ v Raynete */
.graf { display: flex; align-items: flex-end; gap: 10px; height: 200px; padding: 10px 4px 0; border-bottom: 1px solid var(--ram); }
.graf .st { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.graf .st span { font: 600 11px "Roboto", sans-serif; color: var(--rn-zelena-panel); writing-mode: vertical-rl; transform: rotate(180deg); }
.graf .st i { display: block; width: 10px; border-radius: 6px 6px 0 0; background: var(--rn-zelena-panel); min-height: 2px; }
.graf-osi { display: flex; gap: 10px; padding: 6px 4px 0; }
.graf-osi span { flex: 1; text-align: center; font-size: 11px; color: var(--tlm); transform: rotate(-35deg); transform-origin: top center; white-space: nowrap; }

/* ---------- tlačidlá (Raynet: zelené pilulky) ---------- */
.tl, button.tl { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px;
  background: var(--rn-zelena); color: #fff; padding: 10px 22px; font: 700 15px "Plus Jakarta Sans", sans-serif; cursor: pointer;
  min-height: 42px; text-align: center; }
.tl:hover { background: var(--rn-zelena-h); color: #fff; }
.tl .ik { width: 18px; height: 18px; }
.tl.pridat { background: var(--rn-zelena); }
.tl.svetle, .tl.obrys { background: #fff; color: var(--rn-tyrkys); box-shadow: inset 0 0 0 1.5px #b9dfe9; }
.tl.svetle:hover, .tl.obrys:hover { background: var(--rn-tyrkys-sv); color: var(--rn-tyrkys); }
.tl.siva { background: #eef1f3; color: var(--text); }
.tl.siva:hover { background: #e2e7eb; color: var(--text); }
.tl.cervene { background: #fff; color: var(--rn-cervena); box-shadow: inset 0 0 0 1.5px #f3b9b0; }
.tl.typ-telefonat, .tl.typ-stretnutie, .tl.typ-uloha, .tl.typ-udalost { background: #fff; color: var(--text); box-shadow: var(--tien);
  justify-content: flex-start; }
.tl.typ-telefonat:hover, .tl.typ-stretnutie:hover, .tl.typ-uloha:hover, .tl.typ-udalost:hover { background: #f8fafb; color: var(--text); }
.tl.typ-telefonat::before, .tl.typ-stretnutie::before, .tl.typ-uloha::before, .tl.typ-udalost::before { content: ""; width: 10px; height: 10px;
  border-radius: 50%; flex: none; }
.tl.typ-telefonat::before { background: var(--rn-modra); } .tl.typ-stretnutie::before { background: var(--rn-zelena); }
.tl.typ-uloha::before { background: var(--rn-oranzova); } .tl.typ-udalost::before { background: var(--rn-fialova); }
.tl.male { padding: 6px 15px; min-height: 34px; font-size: 13px; }
.tl.plne { width: 100%; }
.tlacidla { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- formuláre ---------- */
label { display: block; font-weight: 500; font-size: 13px; color: #59626d; margin: 0 0 4px; }
input, select, textarea { width: 100%; font: 15px "Roboto", sans-serif; color: var(--text); background: #fff; border: 1px solid #ccd3da;
  border-radius: var(--r-prvok); padding: 9px 12px; min-height: 40px; }
textarea { min-height: 92px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--rn-tyrkys); box-shadow: 0 0 0 3px rgba(7,145,174,.15); }
input[type=checkbox] { width: auto; min-height: 0; accent-color: var(--rn-zelena); }
input[type=color] { padding: 3px; }
.pole { margin-bottom: 14px; }
.polia { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
fieldset { border: 0; padding: 0; margin: 0 0 6px; }
legend { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.hlaska { border-radius: var(--r-prvok); padding: 12px 16px; margin-bottom: 16px; font-weight: 500; }
.hlaska.chyba { background: var(--rn-cervena-sv); color: #b3361f; }
.hlaska.ok { background: #e9f6df; color: #2f7d00; }
.hlaska.info { background: var(--rn-modra-sv); color: #1d6b8c; }

/* ---------- filtre (Raynet: modré oválne tlačidlo filtra) ---------- */
.hladanie { display: flex; gap: 10px; margin-bottom: 12px; }
.hladanie input { flex: 1; border-radius: 999px; padding-left: 18px; }
.hladanie .tl { background: var(--rn-modra); }
.hladanie .tl:hover { background: #237ba0; }
.filtre { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-bottom: 14px; }
.filtre select, .filtre input { min-height: 36px; padding: 6px 10px; font-size: 14px; }
details.viac-filtrov summary { cursor: pointer; color: var(--rn-modra); font-weight: 600; margin-bottom: 10px; list-style: none; }
details.viac-filtrov summary::-webkit-details-marker { display: none; }
.prepinac { display: flex; gap: 0; border-bottom: 1px solid var(--ram); margin: -6px 0 18px; overflow-x: auto; }
.prepinac a { padding: 10px 18px; color: #6b7684; font: 600 14px "Plus Jakarta Sans", sans-serif; border-bottom: 3px solid transparent;
  white-space: nowrap; }
.prepinac a.akt { color: var(--rn-tyrkys); border-bottom-color: var(--rn-tyrkys); }

/* ---------- zoznamy ---------- */
.zoznam { list-style: none; margin: 0; padding: 0; }
.polozka { display: flex; gap: 12px; align-items: flex-start; padding: 11px 10px; color: var(--text); border-top: 1px solid transparent; }
li + li > .polozka { border-top-color: var(--ram-sv); }
a.polozka:hover { background: #f6f9fa; color: var(--text); }
.polozka .hlavne { flex: 1; min-width: 0; }
.polozka .nazov, .polozka .pod { display: block; }
.polozka .nazov { font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.polozka .pod { font-size: 13px; color: var(--tlm); overflow-wrap: anywhere; }
.polozka .vpravo { text-align: right; font-size: 13px; white-space: nowrap; }
.ikona { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #8b94a3; color: #fff; flex: none; font-size: 16px; }
.ikona .ik { width: 18px; height: 18px; }
.ikona.typ-telefonat { background: var(--rn-modra); } .ikona.typ-stretnutie { background: var(--rn-zelena); }
.ikona.typ-uloha { background: var(--rn-oranzova); } .ikona.typ-udalost { background: var(--rn-fialova); }
@media (max-width: 900px) { .polozka { padding: 10px 2px; gap: 10px; } .ikona { width: 32px; height: 32px; } }
.den-nadpis { font: 600 13px "Plus Jakarta Sans", sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--rn-tyrkys); margin: 18px 0 4px; }
.den-nadpis:first-child { margin-top: 0; }
.prazdne { color: var(--tlm); padding: 10px 0; }
.strankovanie { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.pocet { color: var(--tlm); font-size: 13px; margin-bottom: 8px; }
.len-pc { display: block; }
.len-mobil { display: none; }
@media (max-width: 900px) { .len-pc { display: none; } .len-mobil { display: block; } }
table.zoznam-tab, table.tab { width: 100%; border-collapse: collapse; font-size: 14px; }
table.zoznam-tab th, table.tab th { text-align: left; color: #6b7684; font: 600 12px "Plus Jakarta Sans", sans-serif; text-transform: uppercase;
  letter-spacing: .03em; padding: 10px; border-bottom: 1px solid var(--ram); white-space: nowrap; background: #fafbfc; }
table.zoznam-tab td, table.tab td { padding: 10px; border-bottom: 1px solid var(--ram-sv); vertical-align: middle; }
table.zoznam-tab tr:hover td { background: #f6f9fa; }
table.zoznam-tab td.nazov a { font-weight: 500; color: var(--rn-modra); }
.tab-obal { overflow-x: auto; }

/* časová os */
.os { list-style: none; margin: 0; padding: 0; position: relative; }
.os::before { content: ""; position: absolute; left: 27px; top: 14px; bottom: 14px; width: 2px; background: var(--ram); }
.os > li { position: relative; }
.os > li > .polozka { border-top-color: transparent !important; }
.os .ikona { position: relative; z-index: 1; box-shadow: 0 0 0 4px #fff; }
@media (max-width: 900px) { .os::before { left: 17px; } }

/* štítky */
.stitok { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--rn-tyrkys-sv);
  color: var(--rn-tyrkys); white-space: nowrap; vertical-align: middle; }
.stitok.ok { background: #e9f6df; color: #3a8f00; } .stitok.varov { background: var(--rn-oranzova-sv); color: #b86d00; }
.stitok.chyba { background: var(--rn-cervena-sv); color: #c23b26; } .stitok.info { background: var(--rn-modra-sv); color: #1d7499; }
.stitok.fialovy { background: var(--rn-fialova-sv); color: #6a46b5; } .stitok.sivy { background: #eef1f3; color: #6b7684; }
.bodka { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--rn-tyrkys); margin-right: 4px; }

/* detail záznamu */
.hlavicka-karty { display: flex; gap: 16px; align-items: center; }
.hlavicka-karty .velka-ikona { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; flex: none;
  background: var(--rn-modra); color: #fff; }
.hlavicka-karty .velka-ikona.lead { background: #1ba5c4; }
.udaje { display: grid; grid-template-columns: 140px 1fr; gap: 7px 14px; margin: 0; }
.udaje dt { color: var(--tlm); font-size: 13px; }
.udaje dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 500px) { .udaje { grid-template-columns: 1fr; } .udaje dt { margin-top: 6px; } }
.akcie-velke { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 20px; }
.akcie-velke .tl { min-height: 48px; }
.poznamka-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* zápis výsledku */
.vysledky { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 10px 0; }
.vysledky label { margin: 0; }
.vysledky input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vysledky span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 46px; padding: 8px 10px;
  border-radius: var(--r-prvok); border: 1px solid #ccd3da; border-left-width: 4px; background: #fff; font-weight: 500; cursor: pointer;
  font-size: 14px; color: var(--text); }
.vysledky .v-ok span { border-left-color: var(--rn-zelena); } .vysledky .v-varov span { border-left-color: var(--rn-oranzova); }
.vysledky .v-chyba span { border-left-color: var(--rn-cervena); } .vysledky .v-info span { border-left-color: var(--rn-modra); }
.vysledky .v-sivy span { border-left-color: #aab3bf; }
.vysledky input:checked + span { color: #fff; background: var(--rn-modra); border-color: var(--rn-modra); }
.vysledky .v-ok input:checked + span { background: var(--rn-zelena); border-color: var(--rn-zelena); }
.vysledky .v-varov input:checked + span { background: var(--rn-oranzova); border-color: var(--rn-oranzova); }
.vysledky .v-chyba input:checked + span { background: var(--rn-cervena); border-color: var(--rn-cervena); }
.vysledky .v-sivy input:checked + span { background: #8b94a3; border-color: #8b94a3; }
.vysledky input:focus-visible + span { box-shadow: 0 0 0 3px rgba(7,145,174,.2); }
.vysledky span small { color: inherit; opacity: .55; }
label.volba { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-prvok); border: 1px solid #ccd3da;
  background: #fff; font-weight: 500; font-size: 14px; color: var(--text); cursor: pointer; margin: 0; }
label.volba input { width: auto; min-height: 0; accent-color: var(--rn-zelena); }

/* kalendár */
.tyzden { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; background: #fff; border-radius: var(--r-panel); box-shadow: var(--tien); overflow: hidden; }
.tyzden .den { padding: 10px; min-height: 160px; border-left: 1px solid var(--ram-sv); }
.tyzden .den:first-child { border-left: 0; }
.tyzden .den.dnes { background: #f2fafc; }
.tyzden .den h3 { font: 600 13px "Plus Jakarta Sans", sans-serif; text-transform: uppercase; color: #6b7684; margin-bottom: 8px; }
.tyzden .den.dnes h3 { color: var(--rn-tyrkys); }
.tyzden .ud { display: block; font-size: 13px; padding: 6px 8px; border-radius: 4px; margin-bottom: 6px; color: var(--text);
  background: var(--rn-tyrkys-sv); border-left: 4px solid var(--rn-tyrkys); overflow-wrap: anywhere; }
.tyzden .ud.typ-stretnutie { background: #eaf6e1; } .tyzden .ud.typ-telefonat { background: var(--rn-modra-sv); }
.tyzden .ud.typ-uloha { background: var(--rn-oranzova-sv); } .tyzden .ud.typ-udalost { background: var(--rn-fialova-sv); }
.tyzden .ud.hotova { opacity: .6; }
@media (max-width: 1000px) { .tyzden { grid-template-columns: 1fr; } .tyzden .den { min-height: 0; border-left: 0; border-top: 1px solid var(--ram-sv); } }

/* prihlásenie */
.prihlasenie { min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: linear-gradient(170deg, var(--rn-menu-1) 0%, var(--rn-menu-2) 25%, var(--rn-menu-3) 65%, var(--rn-menu-4) 100%); }
.prihlasenie .karta { width: 100%; max-width: 410px; padding: 34px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.prihlasenie .logo { display: flex; align-items: center; justify-content: center; gap: 10px; font: 800 24px "Plus Jakarta Sans", sans-serif;
  color: var(--rn-tyrkys); margin-bottom: 20px; }
.prihlasenie .logo .perla { background: var(--rn-tyrkys); }

/* offline front */
.fronta { position: fixed; left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 40; max-width: 520px;
  margin: 0 auto; background: #142e47; color: #fff; border-radius: var(--r-panel); padding: 12px 16px; font-weight: 500; font-size: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.fronta.ok { background: var(--rn-zelena); }
@media (min-width: 901px) { .fronta { bottom: 20px; left: calc(var(--menu) + 20px); } }

/* našepkávač */
.naseptavac { position: relative; }
.naseptavac ul { position: absolute; z-index: 25; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 6px; list-style: none; background: #fff;
  border: 1px solid var(--ram); border-radius: var(--r-panel); box-shadow: 0 8px 28px rgba(20,46,71,.15); max-height: 300px; overflow: auto; }
.naseptavac li { padding: 8px 10px; border-radius: var(--r-prvok); cursor: pointer; }
.naseptavac li:hover, .naseptavac li.akt { background: var(--rn-tyrkys-sv); }

/* volací režim */
.pocitadlo { min-width: 220px; }
.pocitadlo .velke { font: 600 28px "Plus Jakarta Sans", sans-serif; color: var(--rn-zelena); }
.pocitadlo .lista { height: 8px; border-radius: 999px; background: #e3e7ea; margin-top: 6px; overflow: hidden; }
.pocitadlo .lista span { display: block; height: 100%; background: var(--rn-zelena); border-radius: 999px; }

/* reporty */
table.trend .bar { display: inline-block; height: 10px; border-radius: 999px; background: var(--rn-modra); vertical-align: middle; min-width: 2px; }
table.trend .bar.ok { background: var(--rn-zelena-panel); }

/* mapa */
#mapa { height: 68vh; min-height: 420px; border-radius: var(--r-prvok); z-index: 1; }
.legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; padding: 10px 6px 2px; }
.legenda .bodka.kruh { width: 14px; height: 14px; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--rn-fialova); background: var(--rn-fialova); }
.legenda .bodka.mala { width: 7px; height: 7px; background: #bdb8ba; }

/* štýly starých šablón ostávajú funkčné */
.logo { display: flex; align-items: center; gap: 10px; }

/* ---------- kalendár: cudzie aktivity ako vyblokovaný čas ---------- */
.tyzden .ud.blok { background: repeating-linear-gradient(135deg, #f1f3f5 0 6px, #e7eaee 6px 12px); color: #6b7684; cursor: default; }
tr.zneplatnena td, tr.zneplatnena input { color: var(--tlm); }

/* ---------- Nastavenie (Raynet, snímky 18–24): biele ľavé menu, tyrkysové „← Späť“, dlaždice ---------- */
.ns-menu { position: fixed; inset: 0 auto 0 0; width: var(--menu); z-index: 30; background: #fff; border-right: 1px solid var(--ram);
  display: flex; flex-direction: column; overflow-y: auto; padding-bottom: 20px; }
.ns-logo { display: flex; align-items: center; gap: 12px; height: var(--hore); padding: 0 22px; border-bottom: 1px solid var(--ram);
  color: var(--rn-tyrkys); font: 600 19px/1.15 "Plus Jakarta Sans", sans-serif; flex: none; }
.ns-logo .perla { width: 30px; height: 30px; box-shadow: inset 0 0 0 1px var(--ram); }
.ns-menu nav { display: flex; flex-direction: column; padding: 14px 0; }
.ns-sekcia, .ns-menu nav a.ns-sekcia-odkaz { display: flex; align-items: center; gap: 10px; padding: 18px 26px 8px;
  font: 600 13px "Plus Jakarta Sans", sans-serif; color: #59626d; letter-spacing: .02em; }
.ns-sekcia .ik, .ns-sekcia-odkaz .ik { width: 20px; height: 20px; color: #6b7684; }
.ns-menu nav a { padding: 8px 26px 8px 58px; color: var(--text); font-size: 15px; border-right: 3px solid transparent; }
.ns-menu nav a:hover { background: #f5f8fa; color: var(--text); }
.ns-menu nav a.akt { background: var(--rn-tyrkys-sv); color: var(--rn-tyrkys); border-right-color: var(--rn-tyrkys); }
.ns-menu nav a.ns-sekcia-odkaz { padding: 12px 26px; margin-top: 14px; }
.ns-osoba { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 18px 6px; gap: 4px; }
.ns-osoba strong { font: 600 17px "Plus Jakarta Sans", sans-serif; margin-top: 8px; }
.ns-osoba small { color: var(--tlm); font-size: 14px; }
.ns-avatar { width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid #d5dbe1; display: grid; place-items: center;
  color: #8b94a3; background: #fff; flex: none; }
.ns-avatar .ik { width: 26px; height: 26px; }
.ns-avatar.velky { width: 82px; height: 82px; border: 2px solid var(--rn-tyrkys); color: var(--rn-tyrkys); }
.ns-avatar.velky .ik { width: 32px; height: 32px; }
.ns-hore { position: fixed; top: 0; right: 0; left: var(--menu); height: var(--hore); z-index: 25; background: #fff;
  border-bottom: 1px solid var(--ram); display: flex; align-items: center; padding: 0 52px; }
.ns-spat { display: inline-flex; align-items: center; gap: 8px; background: #1ba5c4; color: #fff; border-radius: 999px;
  padding: 8px 18px 8px 12px; font: 700 14px "Plus Jakarta Sans", sans-serif; }
.ns-spat:hover { background: var(--rn-tyrkys); color: #fff; }
.ns-spat .ik { width: 18px; height: 18px; }
.ns-obsah { padding-left: 52px; padding-right: 52px; max-width: calc(1260px + var(--menu)); }
.ns-nadpis { font-size: 36px; font-weight: 400; margin: 18px 0 26px; }
.ns-nadpis-riadok { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 4px; }
.ns-nadpis-riadok .ns-nadpis { margin-bottom: 8px; }
.ns-podnadpis { font-size: 19px; font-weight: 500; padding-bottom: 14px; border-bottom: 1px solid var(--ram); margin: 30px 0 22px; }
.ns-spat-text { display: inline-flex; align-items: center; gap: 6px; color: var(--rn-tyrkys); font: 700 13px "Plus Jakarta Sans", sans-serif;
  margin-top: 18px; }
.ns-spat-text .ik { width: 16px; height: 16px; }
.ns-dlazdice { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 265px)); gap: 22px 26px; }
.ns-dlazdice.siroke { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ns-stlpce { display: grid; grid-template-columns: repeat(3, minmax(220px, 265px)); gap: 0 26px; }
.ns-stlpce > div { display: flex; flex-direction: column; gap: 14px; }
.ns-skupina { color: var(--rn-tyrkys); font: 700 13px "Plus Jakarta Sans", sans-serif; margin: 0 0 4px 10px; }
.ns-dlazdica { display: flex; align-items: center; gap: 14px; min-height: 90px; padding: 0 34px; background: #fff; border-radius: 4px;
  box-shadow: var(--tien); color: #59626d; font: 600 16px "Plus Jakarta Sans", sans-serif; }
.ns-dlazdica:hover { box-shadow: 0 4px 14px rgba(20, 46, 71, .12); color: var(--text); }
.ns-dlazdica .ik { color: #8b94a3; }
.ns-dlazdica small { font: 400 13px "Roboto", sans-serif; color: var(--tlm); }
.ns-dlazdica.neaktivna { background: #f5f7f9; box-shadow: none; color: #9aa2ad; cursor: default; }
.ns-pohlad { display: inline-flex; border-radius: 999px; background: #eef3f6; padding: 3px; }
.ns-pohlad a { width: 44px; height: 36px; border-radius: 999px; display: grid; place-items: center; color: #8b94a3; }
.ns-pohlad a.akt { background: #1ba5c4; color: #fff; }
.ns-pohlad .ik { width: 18px; height: 18px; }
.ns-hladat { display: flex; align-items: center; gap: 8px; border: 1px solid var(--ram); border-radius: 999px; padding: 0 14px;
  background: #fff; width: 230px; height: 40px; }
.ns-hladat input { border: 0; padding: 0; min-height: 0; outline: none; box-shadow: none; }
.ns-hladat .ik { width: 18px; height: 18px; color: #8b94a3; }
.tl.ns-velke { margin: 0 0 30px 20px; letter-spacing: .01em; }
.ns-ucty { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); background: #fff; box-shadow: var(--tien); }
.ns-ucet { position: relative; overflow: hidden; border-right: 1px solid var(--ram-sv); border-bottom: 1px solid var(--ram-sv); }
.ns-ucet > a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 38px 14px 26px;
  color: var(--text); min-height: 260px; }
.ns-ucet > a:hover { background: #fafcfd; }
.ns-ucet strong { font: 600 16px "Plus Jakarta Sans", sans-serif; margin-top: 12px; }
.ns-ucet .tlm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.ns-ucet .ns-email { margin-top: auto; padding-top: 18px; color: #59626d; }
.ns-ucet.neaktivny > a { opacity: .55; }
.ns-ucet-x { position: absolute; right: 8px; top: 8px; z-index: 2; }
.ns-ucet-x button { border: 0; background: transparent; color: #aab2bc; cursor: pointer; padding: 4px; }
.ns-ucet-x button:hover { color: var(--rn-cervena); }
.ns-ucet-x .ik { width: 16px; height: 16px; }
.ns-stuha { position: absolute; left: -34px; top: 18px; transform: rotate(-45deg); background: #1ba5c4; color: #fff;
  font: 700 11px "Plus Jakarta Sans", sans-serif; letter-spacing: .06em; padding: 4px 40px; z-index: 1; }
.ns-formular, .ns-opravnenie { max-width: 990px; }
.ns-zakladne { display: grid; grid-template-columns: minmax(0, 390px) 160px; gap: 28px; align-items: start; }
.ns-foto { display: grid; place-items: center; min-height: 160px; border: 1px dashed var(--ram); border-radius: 4px; background: #fbfcfd; }
.polia.dve { grid-template-columns: 1fr 1fr; }
.ns-uzke { max-width: 520px; }
.ns-sekcia-nadpis { font: 600 13px "Plus Jakarta Sans", sans-serif; color: #59626d; letter-spacing: .03em; padding-bottom: 10px;
  border-bottom: 1px solid var(--ram); margin: 34px 0 16px; }
.ns-formular label, .ns-uzke label:not(.volba) { font-size: 12px; font-weight: 600; letter-spacing: .03em; }
.ns-volby { border: 0; padding: 0; margin: 0 0 16px; }
.ns-volby legend { font-size: 12px; font-weight: 600; letter-spacing: .03em; color: #59626d; margin-bottom: 6px; }
.ns-opravnenie label.volba, .ns-formular label.volba { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 400;
  letter-spacing: 0; color: var(--text); margin: 0; padding: 9px 0; border: 0; background: none; border-radius: 0; }
.ns-opravnenie label.volba input, .ns-formular label.volba input { width: 19px; height: 19px; accent-color: #1ba5c4; flex: none; }
.ns-rola-riadok { display: flex; align-items: center; gap: 70px; flex-wrap: wrap; }
.ns-rola-riadok select { width: 330px; }
.ns-vybrani { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); padding: 0 0 6px 32px; }
.ns-vybrani label.volba { font-size: 15px; padding: 5px 0; }
.ns-vnorene { padding-left: 32px; }
.ns-uroven { background: #fff; box-shadow: var(--tien); border-radius: 4px; padding: 26px 32px; margin: 10px 0 14px; font-size: 16px; }
.ns-pata { position: sticky; bottom: 0; background: var(--pozadie); padding: 16px 0; margin-top: 30px; border-top: 1px solid var(--ram); }
.ns-ulozit { margin-top: 30px; }
.ns-ciselniky { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.ns-typy { display: flex; flex-direction: column; background: #fff; box-shadow: var(--tien); border-radius: 4px; padding: 8px 0; }
.ns-typy a { padding: 10px 18px; color: var(--text); border-left: 3px solid transparent; }
.ns-typy a.akt { background: var(--rn-tyrkys-sv); color: var(--rn-tyrkys); border-left-color: var(--rn-tyrkys); font-weight: 500; }
.ns-napoveda { font-size: 13px; margin: -4px 0 14px; }
.ns-pridat { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.ns-pridat input { max-width: 320px; }
.ns-pridat select, .ns-riadok select { width: auto; }
.ns-riadok { display: flex; gap: 8px; align-items: center; }
.ns-riadok input { width: 210px; min-width: 0; }
.ns-riadok select { max-width: 150px; }
.ns-tab-ciselnik th, .ns-tab-ciselnik td { padding-left: 6px; padding-right: 6px; white-space: nowrap; }
.ns-tab-ciselnik td { vertical-align: middle; }
.ns-tab-ciselnik td.cislo { text-align: right; font-variant-numeric: tabular-nums; }
.ns-tahat { width: 28px; color: #aab2bc; cursor: grab; }
.ns-tahat .ik { width: 18px; height: 18px; }
.ns-tab-ciselnik tr.tahane { opacity: .4; }
.ns-tab-ciselnik tr.nad td { box-shadow: inset 0 2px 0 var(--rn-tyrkys); }
.ns-ludia { margin: 0; padding-left: 18px; }
.ns-ludia li { padding: 3px 0; }
.ns-detail-zmeny { max-width: 420px; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .ns-menu { position: static; width: auto; border-right: 0; border-bottom: 1px solid var(--ram); padding-bottom: 6px; }
  .ns-menu nav { flex-direction: row; flex-wrap: wrap; padding: 6px 10px; }
  .ns-menu nav a, .ns-menu nav a.ns-sekcia-odkaz { padding: 8px 12px; margin: 0; border-right: 0; border-radius: 999px; }
  .ns-sekcia { display: none; }
  .ns-osoba { flex-direction: row; padding: 12px 16px 0; text-align: left; }
  .ns-osoba .ns-avatar { width: 44px; height: 44px; }
  .ns-hore { position: static; padding: 10px 16px; height: auto; }
  .ns-obsah { margin-left: 0; padding: 8px 16px 40px; }
  .ns-nadpis { font-size: 26px; margin: 8px 0 16px; }
  .ns-stlpce, .ns-ciselniky, .ns-zakladne { grid-template-columns: minmax(0, 1fr); }
  .ns-editor { min-width: 0; }
  .ns-stlpce > div { margin-bottom: 18px; }
  .ns-dlazdice { grid-template-columns: 1fr; }
  .ns-dlazdica { min-height: 64px; padding: 0 20px; }
  .ns-hladat { width: 100%; }
  .tl.ns-velke { margin-left: 0; width: 100%; }
  .ns-rola-riadok { gap: 8px; }
  .ns-rola-riadok select { width: 100%; }
  .ns-riadok { flex-wrap: wrap; }
  .ns-tab-ciselnik { min-width: 720px; }
}
.ns-akcie-bunka { width: 44px; text-align: right; }
.ns-akcie { position: relative; display: inline-block; }
.ns-akcie summary { list-style: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: #6b7684; font-weight: 700; border: 1px solid var(--ram); background: #fff; }
.ns-akcie summary::-webkit-details-marker { display: none; }
.ns-akcie[open] summary { background: var(--rn-tyrkys-sv); color: var(--rn-tyrkys); }
.ns-akcie-menu { position: absolute; right: 0; top: 40px; z-index: 5; background: #fff; box-shadow: 0 6px 24px rgba(20, 46, 71, .18);
  border-radius: var(--r-panel); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 290px; text-align: left; }
.ns-akcie-menu .ns-riadok { flex-wrap: wrap; }
.ns-akcie-menu label { width: 100%; margin: 0; }
.ns-akcie-menu select { max-width: 190px; }
@media (min-width: 901px) { .ns-editor .tab-obal { overflow: visible; } }

/* ---------- záložky karty (Raynet: modrá podčiarknutá aktívna, snímka 07) ---------- */
.karta-zalozky { padding-top: 0; }
.zalozky-karty { display: flex; gap: 26px; overflow-x: auto; margin: 0 -26px 18px; padding: 0 26px; background: #f3f5f7;
  border-radius: var(--r-panel) var(--r-panel) 0 0; scrollbar-width: none; }
.zalozky-karty a { padding: 16px 0 13px; color: #5d6773; font: 600 15px "Plus Jakarta Sans", sans-serif; white-space: nowrap;
  border-bottom: 3px solid transparent; text-decoration: none; }
.zalozky-karty a:hover { color: var(--rn-tyrkys); }
.zalozky-karty a.akt { color: var(--rn-tyrkys); border-bottom-color: var(--rn-tyrkys); }
@media (max-width: 900px) { .zalozky-karty { margin: 0 -16px 14px; padding: 0 16px; gap: 20px; } }

/* ---------- vlastné polia (záložka „Vlastné pole“: skupina = svetlomodrý pás s nadpisom) ---------- */
.vp-skupina { max-width: 640px; margin-bottom: 22px; }
.vp-pas { margin: 0 0 6px; padding: 9px 12px; background: var(--rn-tyrkys-sv); border-top: 2px solid #8fd0df; color: var(--rn-tyrkys);
  font: 600 13px "Roboto", sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.vp-pas.sivy { background: #f0f2f4; border-top-color: #cfd5db; color: #6b7684; }
.vp-pas.oranzovy { background: var(--rn-oranzova-sv); border-top-color: #f5c784; color: #a8650a; }
.vp-riadok { display: grid; grid-template-columns: 200px 1fr; gap: 4px 16px; align-items: start; padding: 5px 12px; }
.vp-nazov { padding-top: 9px; color: #6b7684; font: 500 12px "Roboto", sans-serif; text-transform: uppercase; letter-spacing: .02em;
  line-height: 1.35; margin: 0; }
.vp-riadok.citanie .vp-nazov { padding-top: 2px; }
.vp-povinne { color: var(--rn-cervena); margin-left: 3px; }
.vp-napoveda { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #dfe4e8;
  color: #6b7684; font-size: 10px; cursor: help; text-transform: none; vertical-align: 1px; }
.vp-hodnota { min-width: 0; }
.vp-text { display: inline-block; padding: 1px 0; overflow-wrap: anywhere; }
.vp-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vp-form input:not([type=checkbox]), .vp-form select, .vp-form textarea { border-color: transparent; background: transparent;
  min-height: 36px; padding: 6px 8px; margin-left: -8px; box-shadow: none; }
.vp-form textarea { min-height: 36px; }
.vp-form:hover input:not([type=checkbox]), .vp-form:hover select, .vp-form:hover textarea { border-color: #ccd3da; background: #fff; }
.vp-form input:focus, .vp-form select:focus, .vp-form textarea:focus { border-color: var(--rn-tyrkys); background: #fff;
  box-shadow: 0 0 0 3px rgba(7,145,174,.15); }
.vp-form [aria-invalid=true] { border-color: var(--rn-cervena) !important; background: var(--rn-cervena-sv) !important; }
.vp-form.uklada { opacity: .65; }
.vp-vstup { display: flex; align-items: center; flex: 1; min-width: 0; }
.vp-vstup .jednotka { color: var(--tlm); margin-left: 4px; }
.vp-form select { flex: 1; }
.vp-otvorit { color: var(--rn-tyrkys); font-weight: 700; padding: 4px 6px; }
.vp-prepinac, .vp-viac label { display: inline-flex; align-items: center; gap: 6px; margin: 6px 14px 6px 0; cursor: pointer; font-size: 14px; }
.vp-viac { display: flex; flex-wrap: wrap; }
.vp-stav { font-size: 12px; }
.vp-stav:empty { display: none; }
.vp-stav.ok { color: #2f7d00; } .vp-stav.info { color: var(--tlm); }
.vp-stav.chyba, .vp-chyba { color: #b3361f; font-size: 13px; font-weight: 500; }
.vp-vratit { border: 0; background: none; color: var(--rn-tyrkys); font: 600 12px "Roboto", sans-serif; cursor: pointer; margin-left: 8px;
  padding: 2px 0; text-decoration: underline; }
.vp-pozn { font-size: 13px; }
.vp-formular { margin: 6px 0 16px; }
.vp-formular .vp-pas { margin-top: 10px; }
.vp-formular .pole small { display: block; margin-top: 4px; }
@media (max-width: 600px) {
  .vp-riadok { grid-template-columns: 1fr; padding: 6px 4px; }
  .vp-nazov, .vp-riadok.citanie .vp-nazov { padding-top: 4px; }
  .vp-form input:not([type=checkbox]), .vp-form select, .vp-form textarea { border-color: #e3e7ea; margin-left: 0; }
}

/* ---------- Nastavenie → typ záznamu → Nastavenie polí (v sekcii Nastavenie balíka A) ---------- */
table.polia-tab td { vertical-align: top; }
.ns-polia { max-width: 1180px; }
table.polia-tab td .tlm { font-size: 12px; }
table.polia-tab td.typ { min-width: 200px; }
table.polia-tab td .moz { display: block; max-width: 280px; }
table.polia-tab tr.neaktivne td { color: var(--tlm); }
table.polia-tab tr.neaktivne td:first-child { text-decoration: line-through; }
table.polia-tab td.akcie { white-space: nowrap; text-align: right; }
table.polia-tab td.akcie form { display: inline; }
table.polia-tab td.skupina-riadok { padding: 0; border: 0; }
table.polia-tab td.skupina-riadok .vp-pas { margin: 14px 0 0; }
.mini-tl { border: 1px solid var(--ram); background: #fff; border-radius: 6px; padding: 3px 8px; cursor: pointer; color: #5d6773; font-size: 13px; }
.mini-tl:hover { border-color: var(--rn-tyrkys); color: var(--rn-tyrkys); }
.prepinace { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 4px 0 14px; }
.prepinace label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.moznosti-tab td { padding: 4px 8px 4px 0; }
.moznosti-tab input[type=text], .moznosti-tab input[type=number] { min-height: 34px; padding: 4px 8px; }