/*
  Rozhranie je tiché, obsah je hlasný.

  Škrupina appky je zámerne neutrálna — takmer biela, jedna tmavá farba textu,
  jemné linky. Farby a logo patria VÝHRADNE náhľadu príspevku, ktorý nesie
  identitu klienta. Keby bola škrupina navy a zlatá ako HCA, náhľad by sa
  v nej stratil a pri piatich klientoch by sa to nedalo použiť vôbec.
*/

:root{
  --papier:#fbfbfa;
  --biela:#fff;
  --text:#1a1a1a;
  --text-tichy:#6b6b6b;
  --linka:#e6e4df;
  --linka-svetla:#f0eeea;

  --ok:#2f7d4f;          /* schválené */
  --ok-svetla:#eaf4ee;
  --vratene:#b8791c;     /* vrátené */
  --vratene-svetla:#fdf3e3;
  --caka:#9a978f;        /* čaká */

  --r:14px;
  --tien:0 1px 2px rgba(26,26,26,.05), 0 6px 20px rgba(26,26,26,.06);
  --sirka:560px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--papier);color:var(--text);
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:96px;
}
a{color:inherit;}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;}

.obal{max-width:var(--sirka);margin:0 auto;padding:0 20px;}

/* ---------- hlavička ---------- */
.hlava{
  position:sticky;top:0;z-index:20;background:rgba(251,251,250,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linka-svetla);
}
.hlava .obal{display:flex;align-items:center;justify-content:space-between;height:60px;}
.znacka{font-weight:700;letter-spacing:-.2px;}
.znacka span{color:var(--text-tichy);font-weight:500;}
.odhlasit{font-size:14px;color:var(--text-tichy);padding:8px;}

/* pruh postupu — klient stále vidí, koľko zostáva */
.postup{height:3px;background:var(--linka-svetla);}
.postup i{display:block;height:100%;background:var(--ok);transition:width .35s ease;}
.postup-text{
  font-size:13px;color:var(--text-tichy);padding:10px 0 0;
  display:flex;justify-content:space-between;align-items:center;
}

/* ---------- karta príspevku ---------- */
.karta{
  background:var(--biela);border-radius:var(--r);box-shadow:var(--tien);
  margin:16px 0;overflow:hidden;position:relative;
  transition:opacity .2s ease, transform .2s ease;
}
.karta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--caka);}
.karta[data-stav="schvaleny"]::before,
.karta[data-stav="naplanovany"]::before,
.karta[data-stav="publikovany"]::before{background:var(--ok);}
.karta[data-stav="vrateny"]::before{background:var(--vratene);}
.karta.hotova{opacity:.5;}

.karta-hlava{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 18px 0 20px;font-size:13px;color:var(--text-tichy);
}
.karta-hlava .datum{font-weight:600;color:var(--text);}
.stitok{
  font-size:12px;padding:2px 8px;border-radius:999px;
  background:var(--linka-svetla);color:var(--text-tichy);
}
.stav-slovo{margin-left:auto;font-weight:600;}
.stav-schvaleny{color:var(--ok);}
.stav-vrateny{color:var(--vratene);}

/* ---------- akcie ---------- */
.akcie{display:flex;gap:8px;padding:12px 18px 16px 20px;}
.tl{
  height:48px;border-radius:10px;font-weight:600;font-size:15px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:background .15s ease, opacity .15s ease;
}
.tl-hlavne{flex:1;background:var(--ok);color:#fff;}
.tl-hlavne:active{background:#276a43;}
.tl-tiche{
  padding:0 16px;background:var(--biela);color:var(--text-tichy);
  border:1px solid var(--linka);
}
.tl-tiche:active{background:var(--linka-svetla);}
.tl:disabled{opacity:.45;pointer-events:none;}

/* späťvzatie namiesto potvrdzovacieho dialógu */
.spat{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px 16px 20px;font-size:14px;color:var(--text-tichy);
}
.spat button{font-weight:600;color:var(--text);text-decoration:underline;}

/* ---------- editácia a poznámka ---------- */
.pole{
  width:100%;font:inherit;font-size:15px;line-height:1.6;color:var(--text);
  border:1px solid var(--linka);border-radius:10px;padding:14px;background:var(--biela);
  resize:vertical;min-height:140px;
}
.pole:focus{outline:2px solid #cfd8e6;outline-offset:1px;}
.pole-blok{padding:0 18px 16px 20px;}
.pole-blok .tl{margin-top:10px;}

/* ---------- prihlásenie ---------- */
.login{max-width:380px;margin:12vh auto;padding:0 24px;text-align:center;}
.login h1{font-size:26px;letter-spacing:-.5px;margin-bottom:8px;}
.login p{color:var(--text-tichy);font-size:15px;margin-bottom:26px;}
.login input{
  width:100%;height:52px;font:inherit;font-size:16px;text-align:center;
  border:1px solid var(--linka);border-radius:12px;background:var(--biela);margin-bottom:12px;
}
.login input:focus{outline:2px solid #cfd8e6;outline-offset:1px;}
.login .tl-hlavne{width:100%;background:var(--text);}
.login .kod{letter-spacing:.4em;font-weight:700;font-size:22px;}
.chyba{color:#b3261e;font-size:14px;margin-top:12px;min-height:20px;}

/* ---------- prázdne stavy ---------- */
.prazdno{
  text-align:center;color:var(--text-tichy);font-size:15px;
  padding:56px 24px;line-height:1.7;
}

/* ---------- zoznam balíkov ---------- */
.balik-r{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--biela);border-radius:var(--r);box-shadow:var(--tien);
  padding:18px 20px;margin:12px 0;width:100%;text-align:left;
}
.balik-r b{display:block;font-size:17px;letter-spacing:-.2px;}
.balik-r span{font-size:13px;color:var(--text-tichy);}
.balik-r .sipka{color:var(--text-tichy);font-size:20px;}

.nadpis-sekcie{font-size:22px;letter-spacing:-.4px;margin:26px 0 4px;}
.podnadpis{color:var(--text-tichy);font-size:14px;margin-bottom:6px;}

.spat-odkaz{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;color:var(--text-tichy);padding:16px 0 4px;
}

/* ---------- oznam ---------- */
.oznam{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--text);color:#fff;font-size:14px;
  padding:12px 18px;border-radius:10px;box-shadow:var(--tien);
  z-index:50;opacity:0;pointer-events:none;transition:opacity .2s ease;
  max-width:calc(100vw - 40px);
}
.oznam.vidno{opacity:1;}

@media (min-width:640px){
  .akcie{padding-bottom:18px;}
}

/* ---------- kalendár ---------- */
.k-prepinac{display:flex;gap:6px;background:var(--linka-svetla);border-radius:10px;padding:3px;margin:14px 0 6px;}
.k-prepinac button{flex:1;height:38px;border-radius:8px;font-size:14px;font-weight:600;color:var(--text-tichy);}
.k-prepinac button[aria-pressed="true"]{background:var(--biela);color:var(--text);box-shadow:var(--tien);}

.k-hlava{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:12px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--text-tichy);text-align:center;}
.k-mriezka{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:6px;}
.k-bunka{
  aspect-ratio:1;min-height:46px;border-radius:10px;background:var(--biela);
  border:1px solid var(--linka-svetla);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:border-color .15s ease, background .15s ease;
}
.k-bunka.k-prazdna{background:transparent;border-color:transparent;}
.k-bunka:disabled{background:transparent;border-color:transparent;color:#c9c6bf;cursor:default;}
.k-bunka.k-ma{border-color:var(--linka);}
.k-bunka.k-ma:active{background:var(--linka-svetla);}
.k-bunka.k-vybrany{border-color:var(--text);border-width:2px;}
.k-cislo{font-size:14px;font-weight:600;line-height:1;}
.k-bunka:disabled .k-cislo{font-weight:400;}
.k-bodky{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;min-height:8px;}
.k-bodka{width:7px;height:7px;border-radius:50%;display:inline-block;
  background:transparent;border:1.5px solid transparent;}
.k-legenda{display:flex;flex-wrap:wrap;gap:14px;margin:14px 0 4px;
  font-size:12px;color:var(--text-tichy);}
.k-legenda span{display:flex;align-items:center;gap:6px;}
.k-den-nadpis{font-size:17px;font-weight:700;margin:22px 0 2px;letter-spacing:-.2px;}

/* ---------- médiá na karte ---------- */
.m-lista{display:flex;gap:8px;flex-wrap:wrap;padding:10px 18px 0 20px;}
.m-tl{
  display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;
  border:1px solid var(--linka);border-radius:9px;background:var(--biela);
  font-size:13px;font-weight:600;color:var(--text-tichy);
}
.m-tl:active{background:var(--linka-svetla);}

/* ---------- identita klienta ----------
   Jediná farba z klientovej palety, použitá striedmo. Škrupina ostáva
   neutrálna — pozri komentár na začiatku súboru. */
.znacka{display:flex;align-items:center;gap:9px;}
.kl-logo{height:22px;width:auto;max-width:120px;object-fit:contain;display:block;}
.kl-bod{width:9px;height:9px;border-radius:50%;background:var(--kl-hlavna,var(--text));}
.k-bunka.k-vybrany{border-color:var(--kl-hlavna,var(--text));}
.k-den-nadpis{border-left:3px solid var(--kl-doplnok,var(--linka));padding-left:10px;}
.np-avatar{color:#fff;}