/* SMS brána (sms.lu8ino.sk) – vlastný vzhľad: tlmená bridlicová sivá + petrolejový akcent,
   svetlá aj tmavá téma podľa systému, systémové písma, mobilné rozloženie. Bez CDN. */

:root {
    --pozadie: #f3f5f7;
    --plocha: #ffffff;
    --plocha-2: #eef1f4;
    --text: #18212b;
    --tlmene: #5c6977;
    --okraj: #d9dfe6;
    --akcent: #0e7c74;
    --akcent-hover: #0a655f;
    --akcent-text: #ffffff;
    --akcent-jemny: #e1f2f0;
    --odoslana: #0e7c74;
    --odoslana-text: #ffffff;
    --prijata: #e7ecf1;
    --prijata-text: #18212b;
    --chyba: #c0362c;
    --chyba-jemne: #fbe9e7;
    --ok: #1d7f3e;
    --ok-jemne: #e5f4ea;
    --varovanie: #a8650b;
    --tien: 0 1px 2px rgb(16 24 32 / 6%), 0 2px 8px rgb(16 24 32 / 5%);
    --zaoblenie: 12px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --pozadie: #0e1318;
        --plocha: #161d24;
        --plocha-2: #1d262f;
        --text: #e4eaf0;
        --tlmene: #95a3b1;
        --okraj: #2a3541;
        --akcent: #2fb2a6;
        --akcent-hover: #4cc6bb;
        --akcent-text: #06201d;
        --akcent-jemny: #12312e;
        --odoslana: #17665f;
        --odoslana-text: #eefaf8;
        --prijata: #222c36;
        --prijata-text: #e4eaf0;
        --chyba: #ff7b6e;
        --chyba-jemne: #3a1d1a;
        --ok: #5fd08a;
        --ok-jemne: #16301f;
        --varovanie: #f0b357;
        --tien: 0 1px 2px rgb(0 0 0 / 40%);
        color-scheme: dark;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--pozadie);
    color: var(--text);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}

a { color: var(--akcent); }
a:hover { color: var(--akcent-hover); }
h1 { font-size: 1.5rem; margin: 0 0 .75rem; line-height: 1.25; }
h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
h3 { font-size: 1rem; margin: 0 0 .35rem; }
code { font-size: .9em; background: var(--plocha-2); padding: .1em .35em; border-radius: 4px; overflow-wrap: anywhere; }
[hidden] { display: none !important; }

/* ---------- Hlavička a menu ---------- */
.hlavicka {
    background: var(--plocha);
    border-bottom: 1px solid var(--okraj);
    position: sticky;
    top: 0;
    z-index: 10;
}
.hlavicka-vnutro {
    max-width: 980px;
    margin: 0 auto;
    padding: .5rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.logo {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}
.logo svg, .prihlasenie-logo svg { width: 26px; height: 26px; fill: var(--akcent); }
.menu { display: flex; gap: .25rem; flex: 1; overflow-x: auto; }
.menu a {
    color: var(--tlmene);
    text-decoration: none;
    padding: .4rem .7rem;
    border-radius: 8px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.menu a:hover { background: var(--plocha-2); color: var(--text); }
.menu a.aktivna { background: var(--akcent-jemny); color: var(--akcent); font-weight: 600; }
.odhlasenie { margin: 0; }

.odznak {
    display: inline-block;
    min-width: 1.35rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--akcent);
    color: var(--akcent-text);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.35rem;
    text-align: center;
}

/* ---------- Obsah a pätička ---------- */
.obsah { width: 100%; max-width: 980px; margin: 0 auto; padding: 1.25rem 1rem 2rem; flex: 1; }
.obsah-uzky { max-width: 440px; padding-top: 10vh; }
.paticka {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 1rem;
    color: var(--tlmene);
    font-size: .85rem;
    border-top: 1px solid var(--okraj);
}

.karta {
    background: var(--plocha);
    border: 1px solid var(--okraj);
    border-radius: var(--zaoblenie);
    box-shadow: var(--tien);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}
.karta.uzka { max-width: 520px; }
.stred { text-align: center; margin-inline: auto; }
.oddiel { border-top: 1px solid var(--okraj); margin-top: 1rem; padding-top: 1rem; }
.tlmene { color: var(--tlmene); }
.prazdne { color: var(--tlmene); text-align: center; padding: 2rem 1rem; }
.spat { margin: 0 0 .75rem; }
.spat a, a.spat { text-decoration: none; }

.nadpis-riadok {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
}
.nadpis-riadok h1 { margin: 0; }

.hlaska { padding: .65rem .9rem; border-radius: 8px; margin: 0 0 1rem; }
.hlaska:empty, .hlaska.validation-summary-valid { display: none; }
.hlaska ul { margin: 0; padding-left: 1.1rem; }
.hlaska.ok { background: var(--ok-jemne); color: var(--ok); }
.hlaska.chyba { background: var(--chyba-jemne); color: var(--chyba); }

/* ---------- Stav mobilu ---------- */
.stav-mobilu {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .875rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: var(--plocha-2);
    color: var(--tlmene);
    text-decoration: none;
}
.stav-mobilu::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.stav-mobilu.online { color: var(--ok); background: var(--ok-jemne); }
.stav-mobilu.offline { color: var(--varovanie); }
.stav-mobilu.vypnuty { color: var(--chyba); background: var(--chyba-jemne); }

/* ---------- Formuláre a tlačidlá ---------- */
.formular { display: flex; flex-direction: column; gap: .35rem; }
.formular label { font-weight: 600; font-size: .9rem; margin-top: .4rem; }
.formular > button, .formular .tlacidla { margin-top: .75rem; align-self: flex-start; }
input, textarea, select {
    font: inherit;
    color: var(--text);
    background: var(--plocha);
    border: 1px solid var(--okraj);
    border-radius: 8px;
    padding: .55rem .7rem;
    width: 100%;
    min-width: 0;
}
textarea { resize: vertical; min-height: 2.75rem; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--akcent); outline-offset: 0; border-color: var(--akcent); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--akcent); }
input[type="file"] { padding: .4rem; }
input.kratke { max-width: 7rem; }
.zaskrtavatko { display: flex; align-items: center; gap: .5rem; font-weight: 400 !important; }
.chyba-pola { color: var(--chyba); font-size: .85rem; }
.chyba-pola:empty { display: none; }
.dva-stlpce { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.dva-stlpce > div { display: flex; flex-direction: column; gap: .35rem; }
.riadok-formular { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.riadok-formular input[type="file"] { flex: 1; min-width: 12rem; }
.tlacidla { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tlacidla form { margin: 0; }

.tlacidlo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    font: inherit;
    font-weight: 600;
    font-size: .925rem;
    padding: .5rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--okraj);
    background: var(--plocha);
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.tlacidlo:hover { background: var(--plocha-2); color: var(--text); }
.tlacidlo.hlavne { background: var(--akcent); border-color: var(--akcent); color: var(--akcent-text); }
.tlacidlo.hlavne:hover { background: var(--akcent-hover); border-color: var(--akcent-hover); }
.tlacidlo.tiche { background: transparent; }
.tlacidlo.nebezpecne { background: transparent; color: var(--chyba); border-color: transparent; }
.tlacidlo.nebezpecne:hover { background: var(--chyba-jemne); }
.tlacidlo.male { padding: .25rem .6rem; font-size: .85rem; }
.tlacidlo.siroke { width: 100%; }
.tlacidlo:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Prihlásenie ---------- */
.prihlasenie { text-align: center; }
.prihlasenie .formular { text-align: left; margin-top: 1rem; }
.prihlasenie-logo svg { width: 44px; height: 44px; }
.chyba-kod { font-size: 3rem; font-weight: 800; color: var(--akcent); margin: 0; }

/* ---------- Nová správa, hľadanie, filtre ---------- */
.nova-sprava summary { list-style: none; cursor: pointer; }
.nova-sprava summary::-webkit-details-marker { display: none; }
.nova-sprava[open] summary { margin-bottom: .5rem; }
.nova-sprava[open] summary .tlacidlo { background: transparent; color: var(--akcent); border-color: transparent; padding-left: 0; }
.nova-sprava:not([open]) { background: none; border: 0; box-shadow: none; padding: 0; }

.odoslanie-riadok { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
.odoslanie-riadok .pocitadlo { flex: 1; color: var(--tlmene); font-size: .85rem; }
.pocitadlo.vela { color: var(--varovanie); }
.sim-vyber { display: flex; align-items: center; gap: .4rem; font-size: .875rem; color: var(--tlmene); margin: 0 !important; font-weight: 400 !important; }
.sim-vyber select { width: auto; padding: .35rem .5rem; }

.hladanie { display: flex; gap: .5rem; margin-bottom: .75rem; }
.filtre { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .75rem; }
.filtre a {
    padding: .25rem .75rem;
    border-radius: 999px;
    border: 1px solid var(--okraj);
    color: var(--tlmene);
    text-decoration: none;
    font-size: .875rem;
}
.filtre a.aktivny { background: var(--akcent); border-color: var(--akcent); color: var(--akcent-text); }

.stitok-sim {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    padding: 0 .4rem;
    border-radius: 4px;
    background: var(--akcent-jemny);
    color: var(--akcent);
    margin-right: .3rem;
    vertical-align: 1px;
}

/* ---------- Zoznam konverzácií a kontaktov ---------- */
.konverzacie, .kontakty {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    background: var(--plocha);
    border: 1px solid var(--okraj);
    border-radius: var(--zaoblenie);
    overflow: hidden;
}
.konverzacie li + li, .kontakty li + li { border-top: 1px solid var(--okraj); }
.konverzacie a {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .75rem 1rem;
    color: var(--text);
    text-decoration: none;
}
.konverzacie a:hover { background: var(--plocha-2); color: var(--text); }
.avatar {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--akcent-jemny);
    color: var(--akcent);
    font-weight: 700;
}
.konverzacia-telo, .kontakt-telo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.konverzacia-hlavicka { display: flex; justify-content: space-between; gap: .5rem; }
.konverzacia-hlavicka strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konverzacia-hlavicka time { color: var(--tlmene); font-size: .8rem; flex: none; }
.konverzacia-text { color: var(--tlmene); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neprecitana strong, .neprecitana .konverzacia-text { color: var(--text); font-weight: 700; }
.kontakty li { display: flex; align-items: center; gap: .8rem; padding: .6rem 1rem; }
.kontakty .akcie { display: flex; gap: .25rem; }
.kontakt-telo .tlmene { font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Konverzácia ---------- */
.konverzacia-hlavicka-stranky { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.konverzacia-hlavicka-stranky .spat { font-size: 1.4rem; line-height: 1; }
.konverzacia-nazov { flex: 1; min-width: 10rem; }
.konverzacia-nazov h1 { margin: 0; font-size: 1.3rem; }
.konverzacia-hlavicka-stranky .akcie { display: flex; gap: .25rem; align-items: center; }
.konverzacia-hlavicka-stranky form { margin: 0; }

.vlakno { display: flex; flex-direction: column; gap: .4rem; padding-bottom: 1rem; }
.den { align-self: center; color: var(--tlmene); font-size: .8rem; margin: .75rem 0 .25rem; }
.bublina {
    max-width: min(78%, 34rem);
    padding: .5rem .8rem .35rem;
    border-radius: 16px;
    overflow-wrap: anywhere;
}
.bublina.prijata { align-self: flex-start; background: var(--prijata); color: var(--prijata-text); border-bottom-left-radius: 4px; }
.bublina.odoslana { align-self: flex-end; background: var(--odoslana); color: var(--odoslana-text); border-bottom-right-radius: 4px; }
.bublina.zlyhala { opacity: .85; outline: 2px solid var(--chyba); }
.bublina-text { margin: 0; white-space: pre-wrap; }
.bublina footer { display: flex; justify-content: flex-end; align-items: center; gap: .35rem; font-size: .72rem; opacity: .8; margin-top: .15rem; }
.bublina.odoslana .stitok-sim { background: rgb(255 255 255 / 18%); color: inherit; }
.stav.dorucena { font-weight: 700; }
.stav.chyba { color: #fff; background: var(--chyba); border-radius: 50%; width: 1rem; height: 1rem; display: inline-grid; place-items: center; font-weight: 700; }
.bublina-chyba { margin: .25rem 0 0; font-size: .8rem; font-weight: 600; }

.odpoved {
    position: sticky;
    bottom: 0;
    background: var(--plocha);
    border: 1px solid var(--okraj);
    border-radius: var(--zaoblenie);
    box-shadow: var(--tien);
    padding: .75rem;
}
.odpoved .hlaska { margin-bottom: .5rem; }

/* ---------- Nastavenia ---------- */
.navod { margin: 0 0 1rem; background: var(--plocha-2); border-radius: 8px; padding: .6rem .9rem; }
.navod summary { cursor: pointer; font-weight: 600; }
.navod ol { margin: .5rem 0 0; padding-left: 1.3rem; }
.navod li { margin-bottom: .35rem; }
.kopirovat { user-select: all; }
.tabulka { width: 100%; border-collapse: collapse; font-size: .925rem; }
.tabulka th { text-align: left; color: var(--tlmene); font-weight: 600; font-size: .8rem; padding: .4rem .5rem; border-bottom: 1px solid var(--okraj); }
.tabulka td { padding: .45rem .5rem; border-bottom: 1px solid var(--okraj); vertical-align: middle; }
.tabulka tr:last-child td { border-bottom: 0; }
.tabulka .cislo { text-align: right; }
.tabulka form { margin: 0; }
.karta > .tabulka, .karta .formular > .tabulka { display: block; overflow-x: auto; }

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
    .hlavicka-vnutro { flex-wrap: wrap; gap: .25rem .5rem; padding: .4rem .75rem; }
    .menu { order: 3; flex-basis: 100%; }
    .odhlasenie { margin-left: auto; }
    .obsah { padding: 1rem .75rem 1.5rem; }
    .karta { padding: .9rem 1rem; }
    .dva-stlpce { grid-template-columns: 1fr; }
    .konverzacie, .kontakty { border-radius: 0; margin-inline: -.75rem; border-inline: 0; }
    .bublina { max-width: 88%; }
    .odpoved { border-radius: 0; margin-inline: -.75rem; border-inline: 0; }
    .kontakty .akcie .tlacidlo { padding-inline: .5rem; }
}