/* Perlička CRM — magenta značky na hlavné prvky, typy aktivít a výsledky vo vlastných farbách (rozloženie podľa Raynetu),
   Montserrat + Nunito, oblé hrany 26 / 15 px */
:root {
  --pk: #ce3178; --pk-h: #b8256a; --blok: #fef5fa; --svetle: #f9e8f1;
  --modra: #2f6fdb; --modra-sv: #e9f0fd;
  --zelena: #1d9a70; --zelena-sv: #e2f5ed;
  --oranzova: #d9820b; --oranzova-sv: #fdf1de;
  --fialova: #7a5ad8; --fialova-sv: #efeafb;
  --cervena: #d64545; --cervena-sv: #fbe8e8;
  --tyrkys: #16a3b8; --tyrkys-sv: #e3f6f9;
  --text: #3f3d3f; --tlm: #8b878b; --ram: #e7e3e7; --ram-sv: #f0edf0; --biela: #fff; --pozadie: #f4f3f6;
  --r-blok: 26px; --r-prvok: 15px; --tien: 0 4px 18px rgba(40, 30, 50, .06);
  --menu: 232px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text);
  background: var(--pozadie); }
h1, h2, h3 { font-family: "Montserrat", system-ui, sans-serif; font-weight: 500; color: #2f2d30; line-height: 1.25; }
h1 { font-size: 26px; margin: 4px 0 16px; }
h2 { font-size: 20px; margin: 0 0 12px; }
h3 { font-size: 17px; margin: 0 0 8px; }
a { color: var(--modra); text-decoration: none; }
a:hover { color: #1f55b5; }
small, .tlm { color: var(--tlm); }
.skryte { display: none !important; }

/* ---------- rozloženie: ľavé menu ako Raynet ---------- */
.bocne-menu { position: fixed; inset: 0 auto 0 0; width: var(--menu); background: #2b2730; color: #e9e5ec; z-index: 30;
  display: flex; flex-direction: column; padding: 16px 12px; overflow-y: auto; }
.bocne-menu .logo { color: #fff; margin: 2px 6px 18px; }
.bocne-menu nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.bocne-menu nav a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; color: #d9d4dd;
  font-weight: 600; font-size: 15px; }
.bocne-menu nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.bocne-menu nav a.akt { background: rgba(255, 255, 255, .13); color: #fff; }
.bocne-menu .bod { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.bocne-menu .skupina { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #8f8796; margin: 14px 12px 4px; }
.ja-dole { display: flex; align-items: center; gap: 8px; padding: 12px 6px 0; border-top: 1px solid rgba(255,255,255,.08); }
.ja-dole .meno { color: #e9e5ec; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--pk); color: #fff !important; display: grid;
  place-items: center; font-weight: 800; flex: none; }
.logo { display: flex; align-items: center; gap: 10px; font-family: "Montserrat", sans-serif; font-weight: 500;
  font-size: 18px; color: var(--pk); white-space: nowrap; }
.logo .perla { width: 30px; height: 30px; border-radius: 50%; background: var(--pk); position: relative; flex: none; }
.logo .perla::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.hlavicka { display: none; }
.obsah { margin-left: var(--menu); max-width: 1240px; padding: 22px 24px 60px; }
.nav-dole { display: none; }

@media (max-width: 900px) {
  body { font-size: 15px; }
  h1 { font-size: 22px; }
  .bocne-menu { display: none; }
  .hlavicka { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; background: var(--biela);
    border-bottom: 1px solid var(--ram); padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); }
  .hlavicka .ja { margin-left: auto; }
  .obsah { margin-left: 0; padding: 14px 12px calc(96px + 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: var(--biela); 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: var(--tlm); padding: 4px 0; border-radius: var(--r-prvok); }
  .nav-dole a svg { width: 24px; height: 24px; }
  .nav-dole a:nth-child(1).akt { color: var(--pk); background: var(--blok); }
  .nav-dole a:nth-child(2).akt { color: var(--tyrkys); background: var(--tyrkys-sv); }
  .nav-dole a:nth-child(3).akt { color: var(--modra); background: var(--modra-sv); }
  .nav-dole a:nth-child(4).akt { color: var(--zelena); background: var(--zelena-sv); }
  .nav-dole a:nth-child(5).akt { color: var(--oranzova); background: var(--oranzova-sv); }
}

/* ---------- karty ---------- */
.karta { background: var(--biela); border: 1px solid var(--ram); border-radius: var(--r-blok); padding: 22px 24px;
  box-shadow: var(--tien); margin-bottom: 16px; }
.karta > h2:first-child, .karta > h3:first-child { margin-top: 0; }
.karta.ruzova { background: var(--blok); border-color: #f6d3e4; }
.karta.modra { background: var(--modra-sv); border-color: #cfdcf7; }
.karta.zelena { background: var(--zelena-sv); border-color: #c6e9da; }
.karta.oranzova { background: var(--oranzova-sv); border-color: #f5ddb4; }
.karta.fialova { background: var(--fialova-sv); border-color: #dcd3f5; }
@media (max-width: 900px) { .karta { border-radius: 20px; padding: 16px; } }
.mriezka { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.mriezka-2 { display: grid; gap: 16px; grid-template-columns: 2fr 1fr; align-items: start; }
.mriezka-volanie { display: grid; gap: 16px; grid-template-columns: 1fr 1.3fr; align-items: start; }
@media (max-width: 1050px) { .mriezka-2, .mriezka-volanie { grid-template-columns: 1fr; } }
.riadok-nadpis { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; }
.riadok-nadpis h1, .riadok-nadpis h2 { margin: 0; }

/* ---------- prehľad aktivít (nástenka) ---------- */
.dlazdice { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 16px; }
.dlazdica { border-radius: var(--r-prvok); padding: 14px 16px; background: #fff; border: 1px solid var(--ram);
  border-left: 5px solid var(--modra); color: var(--text); }
.dlazdica .cislo { font-family: "Montserrat", sans-serif; font-size: 28px; line-height: 1.1; }
.dlazdica .popis { font-size: 13px; color: var(--tlm); font-weight: 700; }
.dlazdica.zelena { border-left-color: var(--zelena); } .dlazdica.zelena .cislo { color: var(--zelena); }
.dlazdica.oranzova { border-left-color: var(--oranzova); } .dlazdica.oranzova .cislo { color: var(--oranzova); }
.dlazdica.cervena { border-left-color: var(--cervena); } .dlazdica.cervena .cislo { color: var(--cervena); }
.dlazdica.modra .cislo { color: var(--modra); }
.dlazdica.fialova { border-left-color: var(--fialova); } .dlazdica.fialova .cislo { color: var(--fialova); }
a.dlazdica:hover { box-shadow: var(--tien); color: var(--text); }

/* ---------- tlačidlá ---------- */
.tl, button.tl { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0;
  border-radius: 999px; background: var(--pk); color: #fff; padding: 11px 20px; font: 700 15px "Nunito", sans-serif;
  cursor: pointer; min-height: 44px; text-align: center; }
.tl:hover { background: var(--pk-h); color: #fff; }
.tl.pridat { background: var(--zelena); }               /* zelené plusko ako v Raynete */
.tl.pridat:hover { background: #16835e; }
.tl.svetle { background: var(--svetle); color: var(--pk); }
.tl.svetle:hover { background: #f4d7e6; color: var(--pk); }
.tl.obrys { background: transparent; color: var(--pk); border: 1.5px solid var(--pk); }
.tl.siva { background: #ece9ec; color: var(--text); }
.tl.siva:hover { background: #e1dde1; color: var(--text); }
.tl.cervene { background: var(--cervena-sv); color: var(--cervena); }
.tl.typ-telefonat { background: var(--modra-sv); color: var(--modra); }
.tl.typ-stretnutie { background: var(--zelena-sv); color: var(--zelena); }
.tl.typ-uloha { background: var(--oranzova-sv); color: #b46a05; }
.tl.typ-udalost { background: var(--fialova-sv); color: var(--fialova); }
.tl.typ-telefonat:hover, .tl.typ-stretnutie:hover, .tl.typ-uloha:hover, .tl.typ-udalost:hover { filter: brightness(.96); }
.tl.male { padding: 6px 14px; min-height: 34px; font-size: 14px; }
.tl.plne { width: 100%; }
.tlacidla { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- formuláre ---------- */
label { display: block; font-weight: 700; font-size: 14px; margin: 0 0 4px; }
input, select, textarea { width: 100%; font: 16px "Nunito", sans-serif; color: var(--text); background: #fff;
  border: 1.5px solid var(--ram); border-radius: var(--r-prvok); padding: 10px 13px; min-height: 44px; }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--modra); box-shadow: 0 0 0 3px var(--modra-sv); }
input[type=checkbox] { width: auto; min-height: 0; accent-color: var(--zelena); }
input[type=color] { padding: 4px; }
.pole { margin-bottom: 14px; }
.polia { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
fieldset { border: 0; padding: 0; margin: 0 0 6px; }
legend { font-family: "Montserrat", sans-serif; font-size: 16px; color: #2f2d30; margin-bottom: 10px; }
.hlaska { border-radius: var(--r-prvok); padding: 12px 16px; margin-bottom: 14px; font-weight: 600; }
.hlaska.chyba { background: var(--cervena-sv); color: var(--cervena); }
.hlaska.ok { background: var(--zelena-sv); color: var(--zelena); }
.hlaska.info { background: var(--modra-sv); color: #1f55b5; border: 1px solid #cfdcf7; }

/* ---------- filtre a vyhľadávanie (modré oválne tlačidlo filtra ako v Raynete) ---------- */
.hladanie { display: flex; gap: 8px; margin-bottom: 12px; }
.hladanie input { flex: 1; border-radius: 999px; padding-left: 18px; }
.hladanie .tl { background: var(--modra); }
.hladanie .tl:hover { background: #2358b8; }
.filtre { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-bottom: 14px; }
.filtre select, .filtre input { min-height: 40px; padding: 7px 11px; font-size: 14px; }
details.viac-filtrov summary { cursor: pointer; color: var(--modra); font-weight: 700; margin-bottom: 10px; list-style: none; }
details.viac-filtrov summary::-webkit-details-marker { display: none; }

/* ---------- zoznamy ---------- */
.zoznam { list-style: none; margin: 0; padding: 0; }
.polozka { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-prvok);
  border: 1px solid transparent; color: var(--text); }
li + li > .polozka { border-top-color: var(--ram-sv); }
a.polozka:hover { background: #f7f6f9; color: var(--text); border-radius: var(--r-prvok); }
.polozka .hlavne { flex: 1; min-width: 0; }
.polozka .nazov, .polozka .pod { display: block; }
.polozka .nazov { font-weight: 700; color: #2f2d30; overflow-wrap: anywhere; }
.polozka .pod { font-size: 14px; color: var(--tlm); overflow-wrap: anywhere; }
.polozka .vpravo { text-align: right; font-size: 14px; white-space: nowrap; }
.ikona { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #f0edf0;
  flex: none; font-size: 18px; }
.ikona.typ-telefonat { background: var(--modra-sv); }
.ikona.typ-stretnutie { background: var(--zelena-sv); }
.ikona.typ-uloha { background: var(--oranzova-sv); }
.ikona.typ-udalost { background: var(--fialova-sv); }
@media (max-width: 900px) { .polozka { padding: 10px 4px; gap: 10px; } .ikona { width: 32px; height: 32px; font-size: 15px; } }
.den-nadpis { font-family: "Montserrat", sans-serif; font-size: 15px; color: var(--modra); margin: 18px 0 6px; }
.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: 14px; margin-bottom: 8px; }

/* zoznam ako tabuľka na počítači (Raynet), karty na mobile */
.len-pc { display: block; }
.len-mobil { display: none; }
@media (max-width: 900px) { .len-pc { display: none; } .len-mobil { display: block; } }
table.zoznam-tab { width: 100%; border-collapse: collapse; font-size: 14px; }
table.zoznam-tab th { text-align: left; color: var(--tlm); font-weight: 700; font-size: 13px; padding: 8px 10px;
  border-bottom: 2px solid var(--ram); white-space: nowrap; }
table.zoznam-tab td { padding: 9px 10px; border-bottom: 1px solid var(--ram-sv); vertical-align: middle; }
table.zoznam-tab tr:hover td { background: #f7f6f9; }
table.zoznam-tab td.nazov a { font-weight: 700; color: #2f2d30; }
table.zoznam-tab td.nazov a:hover { color: var(--modra); }

/* ---------- časová os na karte (Raynet: Časová osa) ---------- */
.os { list-style: none; margin: 0; padding: 0; position: relative; }
.os::before { content: ""; position: absolute; left: 32px; 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: 19px; } }

/* ---------- štítky ---------- */
.stitok { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--svetle); color: var(--pk); white-space: nowrap; vertical-align: middle; }
.stitok.ok { background: var(--zelena-sv); color: var(--zelena); }
.stitok.varov { background: var(--oranzova-sv); color: #b46a05; }
.stitok.chyba { background: var(--cervena-sv); color: var(--cervena); }
.stitok.info { background: var(--modra-sv); color: var(--modra); }
.stitok.fialovy { background: var(--fialova-sv); color: var(--fialova); }
.stitok.sivy { background: #efedef; color: #807b80; }
.bodka { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--pk); margin-right: 4px; }

/* ---------- detail ---------- */
.hlavicka-karty { display: flex; gap: 16px; align-items: center; }
.hlavicka-karty .velka-ikona { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center;
  font-size: 26px; flex: none; background: var(--modra-sv); }
.hlavicka-karty .velka-ikona.lead { background: var(--tyrkys-sv); }
.udaje { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; margin: 0; }
.udaje dt { color: var(--tlm); font-size: 14px; }
.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(130px, 1fr)); gap: 8px; margin: 12px 0 16px; }
.akcie-velke .tl { min-height: 52px; }
.poznamka-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- zápis výsledku: farba podľa významu ---------- */
.vysledky { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(140px, 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: 48px;
  padding: 8px 10px; border-radius: var(--r-prvok); border: 1.5px solid var(--ram); border-left-width: 5px; background: #fff;
  font-weight: 700; cursor: pointer; font-size: 14px; }
.vysledky .v-ok span { border-left-color: var(--zelena); }
.vysledky .v-varov span { border-left-color: var(--oranzova); }
.vysledky .v-chyba span { border-left-color: var(--cervena); }
.vysledky .v-info span { border-left-color: var(--modra); }
.vysledky .v-sivy span { border-left-color: #b8b3b8; }
.vysledky input:checked + span { color: #fff; background: var(--modra); border-color: var(--modra); }
.vysledky .v-ok input:checked + span { background: var(--zelena); border-color: var(--zelena); }
.vysledky .v-varov input:checked + span { background: var(--oranzova); border-color: var(--oranzova); }
.vysledky .v-chyba input:checked + span { background: var(--cervena); border-color: var(--cervena); }
.vysledky .v-sivy input:checked + span { background: #807b80; border-color: #807b80; }
.vysledky input:focus-visible + span { box-shadow: 0 0 0 3px var(--modra-sv); }
.vysledky span small { color: inherit; opacity: .55; }
label.volba { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-prvok);
  border: 1.5px solid var(--ram); background: #fff; font-weight: 700; cursor: pointer; margin: 0; }
label.volba input { width: auto; min-height: 0; accent-color: var(--zelena); }

/* ---------- kalendár ---------- */
.tyzden { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.tyzden .den { background: #fff; border: 1px solid var(--ram); border-radius: var(--r-prvok); padding: 10px; min-height: 140px; }
.tyzden .den.dnes { border-color: var(--modra); box-shadow: 0 0 0 2px var(--modra-sv); }
.tyzden .den h3 { font-size: 14px; margin-bottom: 6px; }
.tyzden .ud { display: block; font-size: 13px; padding: 6px 8px; border-radius: 10px; background: #f4f3f6;
  margin-bottom: 6px; color: var(--text); border-left: 4px solid var(--pk); overflow-wrap: anywhere; }
.tyzden .ud.typ-stretnutie { background: var(--zelena-sv); }
.tyzden .ud.typ-telefonat { background: var(--modra-sv); }
.tyzden .ud.typ-uloha { background: var(--oranzova-sv); }
.tyzden .ud.typ-udalost { background: var(--fialova-sv); }
.tyzden .ud.hotova { opacity: .6; }
@media (max-width: 1000px) { .tyzden { grid-template-columns: 1fr; } .tyzden .den { min-height: 0; } }

/* ---------- prihlásenie ---------- */
.prihlasenie { min-height: 100vh; display: grid; place-items: center; padding: 20px; background:
  radial-gradient(circle at 15% 10%, #e3ecfb 0, transparent 40%), radial-gradient(circle at 90% 90%, #fbe3ef 0, transparent 40%),
  radial-gradient(circle at 85% 15%, #e2f5ed 0, transparent 35%), var(--pozadie); }
.prihlasenie .karta { width: 100%; max-width: 400px; padding: 32px; }
.prihlasenie .logo { justify-content: center; font-size: 22px; margin-bottom: 18px; }

/* ---------- 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: #2b2730; color: #fff; border-radius: var(--r-prvok); padding: 12px 16px;
  font-weight: 700; font-size: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.2); }
.fronta.ok { background: var(--zelena); }
@media (min-width: 901px) { .fronta { bottom: 20px; left: calc(var(--menu) + 12px); } }

/* ---------- 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-prvok); box-shadow: var(--tien);
  max-height: 300px; overflow: auto; }
.naseptavac li { padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.naseptavac li:hover, .naseptavac li.akt { background: var(--modra-sv); }

table.tab { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tab th, table.tab td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ram-sv); vertical-align: top; }
table.tab th { color: var(--tlm); font-weight: 700; }
.tab-obal { overflow-x: auto; }

/* ---------- volací režim ---------- */
.pocitadlo { min-width: 220px; }
.pocitadlo .velke { font-family: "Montserrat", sans-serif; font-size: 28px; color: var(--zelena); }
.pocitadlo .lista { height: 8px; border-radius: 999px; background: #e3e0e4; margin-top: 6px; overflow: hidden; }
.pocitadlo .lista span { display: block; height: 100%; background: linear-gradient(90deg, var(--modra), var(--zelena)); border-radius: 999px; }

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

/* ---------- 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(--fialova); background: var(--fialova); }
.legenda .bodka.mala { width: 7px; height: 7px; background: #bdb8ba; }