/* kudlik.sk - klientsky portal
   Styl pribuzny kudlik.business (font Inter, karty, ciste tabulky),
   akcentova farba bledozelena namiesto modrej. */

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Regular.woff') format('woff');
    font-weight: 400;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Medium.woff') format('woff');
    font-weight: 500;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Bold.woff') format('woff');
    font-weight: 700;
}

:root {
    --zelena: #2f9e63;
    --zelena-tmava: #22794b;
    --zelena-bleda: #e6f4ec;
    --text: #1f2d28;
    --text-tlmeny: #64766e;
    --okraj: #dde8e2;
    --pozadie: #f4f8f6;
    --biela: #ffffff;
    --cervena: #c0392b;
    --cervena-bleda: #fdecea;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Inter', Arial, sans-serif;
    color: var(--text);
    background: var(--pozadie);
    font-size: 15px;
    line-height: 1.6;
}

.obsah {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

a { color: var(--zelena-tmava); }

h1 { font-size: 26px; margin: 18px 0 10px; }
h2 { font-size: 19px; margin: 4px 0 12px; }
h3 { font-size: 16px; margin: 18px 0 8px; }

/* Hlavicka */
.hlavicka {
    background: var(--biela);
    border-bottom: 1px solid var(--okraj);
}
.hlavicka-vnutro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    max-width: none; /* hlavicka vyuziva celu sirku okna - logo vlavo, texty az pri pravom okraji */
    padding: 0 28px;
}
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.logo img {
    height: 40px;
    width: auto;
    display: block;
}
.menu {
    display: flex;
    align-items: center;
    gap: 16px;
}
.menu a {
    text-decoration: none;
    font-weight: 500;
}
.menu-meno { color: var(--text-tlmeny); }

/* Rozbalovacie menu Moj ucet (vpravo hore) */
.ucet-menu { position: relative; }
.ucet-menu summary { list-style: none; cursor: pointer; }
.ucet-menu summary::-webkit-details-marker { display: none; }
.ucet-menu-obsah {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 180px;
    background: var(--biela);
    border: 1px solid var(--okraj);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    padding: 8px 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
}
.ucet-menu-obsah > span { padding: 4px 14px 8px; border-bottom: 1px solid var(--okraj); }
.ucet-menu-obsah a, .odkaz-tlacidlo {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    color: var(--text);
    text-decoration: none;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}
.ucet-menu-obsah a:hover, .odkaz-tlacidlo:hover { background: var(--zelena-bleda); }
.hlavicka-moto {
    flex: 1;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    padding: 0 16px;
}
.hlavicka-moto span { color: var(--zelena-tmava); }
.hlavicka-slogan {
    text-align: right;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-tlmeny);
}
@media (max-width: 700px) {
    .hlavicka-moto, .hlavicka-slogan { display: none; } /* na mobile sa nevojdu */
    .hlavicka-vnutro { padding: 0 12px; min-height: 52px; }
    .logo img { height: 30px; }
    .menu-meno { display: none; } /* meno je na nastenke, v hlavicke staci Odhlasit */
    .menu { gap: 8px; }
}

/* Horne karty uctu (vzor kudlik.business .ucet-karty, zelena paleta) */
.ucet-karty-obal {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--pozadie);
    padding-top: 10px;
}
.ucet-karty {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    overflow-x: auto;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 8px 8px 0 8px;
    background: #dfeae4;
    border-radius: 10px 10px 0 0;
    border-bottom: 2px solid var(--biela);
    scrollbar-width: thin;
}
.ucet-karta { flex: 0 0 auto; margin: 0; }
.ucet-karta a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: #d0e0d7;
    border: 1px solid #c2d6cb;
    border-bottom: none;
    border-radius: 9px 9px 0 0;
    color: #4a5a52;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
}
.ucet-karta a:hover {
    background: #eef6f1;
    color: var(--text);
}
.ucet-karta.active a {
    background: var(--biela);
    color: var(--zelena-tmava);
    font-weight: 700;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.06);
}
.ucet-karta svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    opacity: 0.6;
}
.ucet-karta.active svg { opacity: 1; }

/* Cakajuce akcie na nastenke */
.cakajuce { border-left: 4px solid var(--zelena); }
.cakajuca-akcia {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--okraj);
}
.cakajuca-akcia:last-child { border-bottom: none; }
.cakajuca-akcia .tlacidlo { flex: 0 0 auto; white-space: nowrap; }

/* Dlazdice na admin nastenke */
.dlazdice {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.dlazdica { text-align: center; margin: 0; }
.dlazdica-cislo {
    font-size: 32px;
    font-weight: 700;
    color: var(--zelena-tmava);
}

/* Navrhy rieseni */
.navrh-obsah { line-height: 1.7; }
.navrh-obsah h2 { margin-top: 20px; }
.navrh-obsah pre {
    background: #f4f7f5;
    border: 1px solid var(--okraj);
    border-radius: 8px;
    padding: 12px;
    overflow-x: auto;
}
.navrh-obsah code {
    background: #f4f7f5;
    padding: 1px 5px;
    border-radius: 4px;
}
.pripomienka {
    border-left: 3px solid var(--zelena);
    padding: 6px 12px;
    margin: 10px 0;
    background: #fafcfb;
}
.stitok-pripomienkovany { background: #fff3d6; color: #8a6d1a; }
.stitok-schvaleny { background: var(--zelena-bleda); color: var(--zelena-tmava); }
.stitok-nahradeny { background: #e8e8e8; color: #555; }
.stitok-nova { background: #fff3d6; color: #8a6d1a; }
.stitok-v_rieseni { background: #e0ecff; color: #2c5aa0; }
.stitok-uzavreta { background: #e8e8e8; color: #555; }

/* Casova os */
.casova-os { margin: 6px 0 14px; }
.os-zaznam {
    display: flex;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--okraj);
}
.os-zaznam:last-child { border-bottom: none; }
.os-datum {
    flex: 0 0 90px;
    color: var(--text-tlmeny);
    font-size: 13px;
    padding-top: 2px;
}

/* Nahlady testovacich verzii */
.nahlad-riadok {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--okraj);
}
.nahlad-riadok:last-child { border-bottom: none; }

.ico-riadok { display: flex; gap: 8px; }
.ico-riadok input { flex: 1; }
.ico-riadok .tlacidlo { white-space: nowrap; }

.telefon-form { display: flex; align-items: center; gap: 6px; }
.telefon-form label { margin: 0; }
.telefon-pole { max-width: 160px; padding: 5px 9px; }

.zaskrtavacie {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
}
.zaskrtavacie input { width: auto; }

/* Dokumenty a podpis */
.pdf-ramec {
    width: 100%;
    height: 70vh;
    border: 1px solid var(--okraj);
    border-radius: 8px;
    background: #fff;
}
.podpis-canvas {
    display: block;
    width: 100%;
    max-width: 560px;
    height: 160px;
    border: 2px dashed var(--okraj);
    border-radius: 8px;
    background: #fff;
    touch-action: none;
    cursor: crosshair;
    margin-bottom: 8px;
}
.kod-pole {
    max-width: 160px;
    font-size: 22px;
    letter-spacing: 8px;
    text-align: center;
}
.hash-bunka { word-break: break-all; font-size: 12px; }
.stitok-bez_podpisu { background: #e8e8e8; color: #555; }
.stitok-na_podpis { background: #fff3d6; color: #8a6d1a; }
.stitok-podpisany { background: var(--zelena-bleda); color: var(--zelena-tmava); }
.stitok-neuhradena { background: #fff3d6; color: #8a6d1a; }
.stitok-na_potvrdenie { background: #fff3d6; color: #8a6d1a; }
.stitok-potvrdena { background: var(--zelena-bleda); color: var(--zelena-tmava); }
.stitok-zrusena { background: var(--cervena-bleda); color: var(--cervena); }
.stitok-uhradena { background: var(--zelena-bleda); color: var(--zelena-tmava); }

/* Nahlad e-mailu v logu */
.email-nahlad {
    border: 1px dashed var(--okraj);
    border-radius: 8px;
    padding: 14px;
    background: #fafcfb;
    overflow-x: auto;
}

/* Karty */
.karta {
    background: var(--biela);
    border: 1px solid var(--okraj);
    border-radius: 10px;
    padding: 20px;
    margin: 16px 0;
}
.karty-mriezka {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.karta-odkaz {
    display: block;
    text-decoration: none;
    color: var(--text);
}
.karta-odkaz:hover { border-color: var(--zelena); }
.karta-odkaz h3 { margin-top: 0; }

/* Formulare */
label {
    display: block;
    font-weight: 500;
    margin: 10px 0 4px;
}
input[type=text], input[type=email], input[type=password], textarea, select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--okraj);
    border-radius: 7px;
    font: inherit;
    background: var(--biela);
}
textarea { resize: vertical; } /* len na vysku - do sirky by rozbijal layout */

/* Prepinac zobrazenia hesla (ikonka oka, prida heslo.js) */
.heslo-obal {
    position: relative;
    display: block;
}
.heslo-obal input {
    padding-right: 42px;
}
.heslo-prepinac {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    border: none;
    background: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-tlmeny);
    line-height: 0;
}
.heslo-prepinac:hover { color: var(--zelena-tmava); }
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--zelena-bleda);
    border-color: var(--zelena);
}
.mriezka-formular {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0 16px;
}
.pole-cele { grid-column: 1 / -1; }
.formular-tlacidla {
    grid-column: 1 / -1;
    margin-top: 14px;
}
.inline-form { display: inline; }

/* Tlacidla */
.tlacidlo {
    display: inline-block;
    border: none;
    border-radius: 7px;
    padding: 9px 18px;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}
.tlacidlo-plne {
    background: var(--zelena);
    color: var(--biela);
}
.tlacidlo-plne:hover { background: var(--zelena-tmava); }
.tlacidlo-tiche {
    background: var(--zelena-bleda);
    color: var(--zelena-tmava);
    padding: 6px 12px;
}
.tlacidlo-tiche:hover { background: #d3ecdd; }

/* Tabulky */
.tabulka {
    width: 100%;
    border-collapse: collapse;
    background: var(--biela);
    border: 1px solid var(--okraj);
    border-radius: 10px;
    overflow: hidden;
}
.tabulka th, .tabulka td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--okraj);
}
.tabulka th {
    background: var(--zelena-bleda);
    font-weight: 500;
}
.tabulka tr:last-child td { border-bottom: none; }

/* Zoradenie a filtre v hlavicke tabulky */
.th-sort {
    color: inherit;
    text-decoration: none;
    white-space: nowrap; /* nazov stlpca a sipka zoradenia vzdy na jednom riadku */
}
.th-sort:hover { color: var(--zelena-tmava); }
.filter-riadok th {
    background: #f2f7f4;
    padding: 6px 8px;
}
.filter-pole {
    width: 100%;
    min-width: 90px;
    padding: 5px 8px;
    font-size: 13px;
}
.filter-tlacidla-bunka { white-space: nowrap; }
.filter-zrusit {
    display: inline-block;
    padding: 2px 8px;
    font-size: 16px;
    color: var(--cervena);
    text-decoration: none;
}
@media (max-width: 700px) {
    /* na mobile sa tabulka posuva horizontalne vo vlastnom ramci,
       stranka samotna nikdy nepretecie */
    .tabulka {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Stitky stavov */
.stitok {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    background: var(--zelena-bleda);
    color: var(--zelena-tmava);
    vertical-align: middle;
}
.stitok-pozvany, .stitok-novy { background: #fff3d6; color: #8a6d1a; }
.stitok-kontakt { background: #e0ecff; color: #2c5aa0; }

/* Mazacie tlacidla + bunky s viacerymi akciami */
.tlacidlo-zmazat {
    background: var(--cervena-bleda);
    color: var(--cervena);
    padding: 6px 12px;
}
.tlacidlo-zmazat:hover { background: #f6d3ce; }
.bunka-akcie { white-space: nowrap; }
.bunka-akcie .inline-form { margin-left: 4px; }
.zmazat-blok { display: block; margin-top: 10px; }
.stitok-zablokovany, .stitok-pozastaveny { background: var(--cervena-bleda); color: var(--cervena); }
.stitok-dokonceny { background: #e8e8e8; color: #555; }

/* Spravy (flash) */
.sprava {
    margin: 16px 0;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--zelena-bleda);
    color: var(--zelena-tmava);
    border: 1px solid #c6e6d3;
}
.sprava-chyba {
    background: var(--cervena-bleda);
    color: var(--cervena);
    border-color: #f2c4be;
}
.sprava-varovanie {
    background: #fff3d6;
    color: #8a6d1a;
    border-color: #f0e0a8;
}

/* Sprievodca flow - karta "Co dalej" na projekte */
.sprievodca { border-left: 4px solid var(--zelena); }
.sprievodca-klient { border-left-color: #d8b74a; }
.sprievodca-ziadny { border-left-color: #c9d3ce; }
.sprievodca h2 { margin-top: 0; }

/* Login stranka */
.login-obal {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}
.login-karta {
    width: 100%;
    max-width: 400px;
}
.login-karta h1 { margin-top: 0; }
.login-karta .tlacidlo { width: 100%; margin-top: 16px; }

/* Dotazniky */
.dotaznik-otazka { margin-bottom: 18px; }
.dotaznik-otazka input[type=text], .dotaznik-otazka textarea, .dotaznik-otazka select {
    max-width: 640px;
}
.dotaznik-odpoved {
    background: var(--biela);
    border: 1px solid var(--okraj);
    border-radius: 7px;
    padding: 9px 12px;
    max-width: 640px;
}
.dotaznik-tlacidla { display: flex; gap: 10px; }
.viacvyber { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.povinne { color: var(--cervena); }
.stitok-koncept { background: #eee; color: #666; }
.stitok-zverejneny { background: #fff3d6; color: #8a6d1a; }
.stitok-odoslany { background: var(--zelena-bleda); color: var(--zelena-tmava); }

.podtext { color: var(--text-tlmeny); }
.podtext-maly { color: var(--text-tlmeny); font-size: 13px; margin-top: 18px; }

/* Pravne dokumenty (citatelna sirka, vzdusnejsie) */
.pravny-dokument { max-width: 760px; line-height: 1.7; }
.pravny-dokument h2 { margin-top: 24px; font-size: 17px; }
.pravny-dokument ul { padding-left: 20px; }
.pravny-dokument li { margin-bottom: 6px; }

/* Cookie lista (informacny oznam dole) */
.cookie-lista {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: var(--text);
    color: #fff;
    padding: 14px 20px;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
}
.cookie-lista-obsah {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
    line-height: 1.5;
}
.cookie-lista a { color: #cdeeda; }
.cookie-lista .tlacidlo { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 600px) {
    .cookie-lista-obsah { flex-direction: column; align-items: stretch; text-align: center; }
}

/* Verejna landing page */
.hero {
    text-align: center;
    padding: 44px 0 28px;
}
.hero-logo {
    width: 100%;
    max-width: 420px;
    height: auto;
    margin-bottom: 18px;
}
.hero-text {
    max-width: 560px;
    margin: 0 auto 20px;
    font-size: 17px;
    color: var(--text-tlmeny);
}
.hero .tlacidlo { margin: 4px 6px; }
section { margin: 34px 0; }
section h2 { font-size: 22px; }
.kroky .karta { position: relative; padding-top: 30px; }
.krok-cislo {
    position: absolute;
    top: 14px;
    left: 20px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--zelena);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hp-pole { position: absolute; left: -9999px; top: -9999px; } /* honeypot mimo obrazovky */

/* Paticka */
.paticka {
    margin-top: 40px;
    padding: 18px 0;
    border-top: 1px solid var(--okraj);
    color: var(--text-tlmeny);
    font-size: 13px;
    background: var(--biela);
}