/* ===================================================================
   Kartix
   Používa to technik v dodávke, na telefóne, často v rukaviciach.
   Preto: veľké klikacie plochy, vysoký kontrast, žiadna dekorácia.
   Žiadne webfonty - v zlom signáli by sa načítavali pol minúty.
   =================================================================== */

:root {
    --ink:        #1a1d21;
    --ink-soft:   #5b6470;
    --page:       #eceef0;
    --surface:    #ffffff;
    --line:       #d3d7dc;
    --action:     #1f5f8b;
    --action-dark:#174a6d;
    --overdue:    #b4232a;
    --soon:       #a56a00;
    --done:       #1f6b46;

    --row-h:      3.25rem;
    --radius:     3px;
}

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

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--action); }

:focus-visible {
    outline: 3px solid var(--action);
    outline-offset: 2px;
}

/* --- Horná lišta -------------------------------------------------- */

.topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    min-height: 3.5rem;
    background: var(--ink);
    color: #fff;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: auto;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    text-decoration: none;
}

.brand img { display: block; }

/* --- Hamburger ---------------------------------------------------- */

.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 0.3125rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.625rem;
    background: none;
    border: 0;
    cursor: pointer;
}

.burger span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}

/* --- Sekcie ------------------------------------------------------- */

.topnav { display: flex; align-items: center; gap: 1.25rem; }

.topnav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: #aeb6c0;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 2px solid transparent;
}

.topnav a:hover { color: #fff; }

.topnav a.is-current {
    color: #fff;
    border-bottom-color: #fff;
}

.topnav-sep {
    width: 1px;
    height: 1.5rem;
    background: #3a4048;
}

.topnav-user { flex-direction: column; align-items: flex-end; line-height: 1.2; }

.topnav-company {
    font-size: 0.75rem;
    font-weight: 400;
    color: #79828c;
}

/* --- Záložky ------------------------------------------------------ */

.tabbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.tabbar-inner {
    display: flex;
    gap: 0.25rem;
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 1rem;
    /* Na úzkom displeji sa záložky posúvajú prstom, nezalamujú sa. */
    overflow-x: auto;
    scrollbar-width: none;
}

.tabbar-inner::-webkit-scrollbar { display: none; }

.tabbar a {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 3rem;
    padding: 0 0.875rem;
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}

.tabbar a:hover { color: var(--ink); background: #f5f7f8; }

.tabbar a.is-current {
    color: var(--action);
    border-bottom-color: var(--action);
}

/* --- Mobil -------------------------------------------------------- */

@media (max-width: 46rem) {
    .has-js .burger { display: flex; }

    .has-js .topnav {
        display: none;
        position: absolute;
        top: 3.5rem;
        left: 0;
        right: 0;
        z-index: 20;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem 1rem 1rem;
        background: var(--ink);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    }

    .has-js .topnav.is-open { display: flex; }

    .topnav a {
        min-height: 3rem;
        border-bottom: 1px solid #2b3138;
    }

    .topnav a.is-current { border-bottom-color: #fff; }

    .topnav-sep { display: none; }
    .topnav-user { align-items: flex-start; border-bottom: 0; }

    .topbar { position: relative; }
}

/* --- Stránka ----------------------------------------------------- */

.page {
    max-width: 64rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

.page--narrow { max-width: 26rem; padding-top: 3rem; }

h1 {
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0 0 0.25rem;
}

.lede { color: var(--ink-soft); margin: 0 0 1.5rem; }

/* --- Karta ------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
}

/* --- Zoznam zariadení na kontrolu -------------------------------- */

.duelist {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.duelist li + li { border-top: 1px solid var(--line); }

.duelist a {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--row-h);
    padding: 0.75rem 1rem;
    color: inherit;
    text-decoration: none;
}

.duelist a:hover { background: #f5f7f8; }

/* POZOR: .due-main a .due-when sú <span>, teda inline. Bez display:block
   na nich a na ich deťoch neplatí overflow ani text-overflow a dlhé
   výrobné čísla sa na mobile prelínajú s dátumom. */
.due-main {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

.due-who,
.due-what {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.due-who { font-weight: 600; }

.due-what {
    color: var(--ink-soft);
    font-size: 0.875rem;
}

/* Termín nesie informáciu farbou aj slovom, nikdy len farbou. */
.due-when {
    display: block;
    flex: 0 0 auto;
    max-width: 42%;
    text-align: right;
    font-size: 0.9375rem;
    line-height: 1.3;
}

.due-when b { display: block; }
.is-overdue .due-when { color: var(--overdue); }
.is-soon    .due-when { color: var(--soon); }

/* --- Formuláre --------------------------------------------------- */

label {
    display: block;
    margin: 1rem 0 0.25rem;
    font-weight: 600;
    font-size: 0.9375rem;
}

input[type=text],
input[type=email],
input[type=password],
input[type=date],
input[type=tel],
input[type=number],
select,
textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.625rem;
    font: inherit;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

input:focus, select:focus, textarea:focus { border-color: var(--action); }

textarea { min-height: 6rem; resize: vertical; }

.hint { color: var(--ink-soft); font-size: 0.875rem; margin: 0.25rem 0 0; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.5rem 1.25rem;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--action);
    border: 1px solid var(--action-dark);
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
}

.btn:hover { background: var(--action-dark); }

.btn--block { display: flex; width: 100%; margin-top: 1.5rem; }

.btn--quiet {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line);
}

.btn--quiet:hover { background: #f5f7f8; }

/* --- Flash a prázdne stavy --------------------------------------- */

.flash {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--done);
    background: var(--surface);
    border-radius: var(--radius);
}

.flash--err { border-left-color: var(--overdue); }

.empty {
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.empty p { color: var(--ink-soft); max-width: 34rem; margin: 0 auto 1.25rem; }

/* --- Číslo na prehľade ------------------------------------------- */

.tally { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.tally div { line-height: 1.2; }
.tally b { display: block; font-size: 2.25rem; letter-spacing: -0.02em; }
.tally span { color: var(--ink-soft); font-size: 0.9375rem; }
.tally .t-overdue b { color: var(--overdue); }

@media (max-width: 30rem) {
    .topnav { gap: 1rem; }
    .topuser span { display: none; }
    .tally { gap: 1.75rem; }
    .tally b { font-size: 1.875rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* --- Značka ------------------------------------------------------ */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.brand img { display: block; }

/* Značka nad prihlasovacím a registračným formulárom */
.brand-lockup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin-bottom: 2rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
    text-decoration: none;
}

/* --- Zoznam s odškrtávaním --------------------------------------- */

.checklist { list-style: none; margin: 0; padding: 0; }

.checklist label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    padding: 0.5rem 0;
    min-height: 2.75rem;
    font-weight: 400;
    cursor: pointer;
}

.checklist input[type=checkbox] {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    accent-color: var(--action);
}

/* --- Zoznam na úzkych displejoch --------------------------------- */

@media (max-width: 34rem) {
    /* Pod 34rem sa dátum nezmestí vedľa mena, tak ide pod neho. */
    .duelist a,
    .duelist > li > span {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
    }

    .due-when {
        max-width: none;
        text-align: left;
    }

    .due-when b { display: inline; }

    /* Dátum a stav vedľa seba v jednom riadku, nie pod sebou. */
    .due-when::before { content: ''; }
}

/* --- Zoznam údajov (režim čítania) -------------------------------- */

.facts {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: 0.5rem 1.25rem;
    margin: 0;
}

.facts dt {
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

.facts dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

@media (max-width: 34rem) {
    .facts {
        grid-template-columns: 1fr;
        gap: 0 0;
    }

    .facts dt { margin-top: 0.75rem; }
    .facts dt:first-child { margin-top: 0; }
}

/* --- Štítok pri názve -------------------------------------------- */

.tag {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0.0625rem 0.4375rem;
    font-size: 0.75rem;
    font-weight: 600;
    vertical-align: 0.08em;
    color: var(--ink-soft);
    background: #e6e9ec;
    border-radius: 2px;
    white-space: nowrap;
}

h1 .tag { font-size: 0.8125rem; }

/* --- Riadok zoznamu bez odkazu ----------------------------------- */

.duelist .row {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--row-h);
    padding: 0.75rem 1rem;
}

.trash-actions { display: flex; gap: 0.5rem; flex: 0 0 auto; }
.trash-actions form { margin: 0; }
.trash-actions .btn { min-height: 2.25rem; padding: 0.25rem 0.75rem; }

/* --- Panel nad zoznamom ------------------------------------------ */

.toolbar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.toolbar input[type=text] { flex: 1 1 14rem; }
.toolbar select { flex: 0 1 11rem; }

/* --- Abecedné členenie ------------------------------------------- */

.alphabet {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
}

.alphabet a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
}

.alphabet a:hover { background: #f5f7f8; }

h2.letter {
    margin: 1.75rem 0 0.5rem;
    padding-bottom: 0.25rem;
    font-size: 1rem;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line);
}

h2.letter:first-of-type { margin-top: 0; }

/* --- Pracovný zoznam požiadaviek --------------------------------- */

h2.section {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 2.5rem 0 0.75rem;
    font-size: 1.125rem;
}

h2.section:first-of-type { margin-top: 1.5rem; }

.count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    font-size: 0.8125rem;
    color: #fff;
    background: var(--action);
    border-radius: 999px;
}

.count--warn  { background: var(--overdue); }
.count--quiet { color: var(--ink-soft); background: #e6e9ec; }

.worklist {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.worklist li {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.875rem 1rem;
}

.worklist li + li { border-top: 1px solid var(--line); }

/* Riadok, ktorý si pýta pozornosť, má farebný pruh vľavo. */
.worklist li.is-overdue { box-shadow: inset 3px 0 0 var(--overdue); }

.work-main { flex: 1 1 16rem; min-width: 0; }
.work-main b { display: block; }

.work-sub {
    display: block;
    color: var(--ink-soft);
    font-size: 0.875rem;
}

.work-note {
    display: block;
    margin-top: 0.375rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.875rem;
    background: #f5f7f8;
    border-radius: var(--radius);
}

.work-actions {
    display: flex;
    gap: 0.5rem;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.work-actions form { margin: 0; }
.work-actions .btn { min-height: 2.5rem; padding: 0.375rem 0.875rem; }

.worklist--quiet li { color: var(--ink-soft); }
.worklist--quiet b { color: var(--ink); font-weight: 600; }

/* --- Pracovný čas ------------------------------------------------ */

.hours { width: 100%; border-collapse: collapse; }
.hours td { padding: 0.25rem 0.375rem 0.25rem 0; vertical-align: middle; }
.hours-day { width: 45%; }
.hours-day label { margin: 0; display: flex; align-items: center; gap: 0.5rem;
                   font-weight: 400; cursor: pointer; }
.hours-day input[type=checkbox] { width: 1.25rem; height: 1.25rem;
                                  accent-color: var(--action); }
.hours-dash { color: var(--ink-soft); padding: 0 0.25rem; }
.hours input[type=time] { min-width: 6.5rem; }

/* --- Verejná stránka pre zákazníka -------------------------------- */

.page--public { max-width: 34rem; padding-top: 2.5rem; }

.slotdays { display: flex; flex-direction: column; gap: 0.5rem; }

.slotday {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
}

.slotday-head { display: flex; gap: 0.5rem; align-items: baseline; }
.slotday-head b { font-size: 1rem; }
.slotday-head span { color: var(--ink-soft); font-size: 0.9375rem; }

.slotday-parts { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }

.slot {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    margin: 0;
    padding: 0.5rem 0.875rem;
    min-height: 2.75rem;
    font-weight: 500;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
}

.slot input { accent-color: var(--action); width: 1.125rem; height: 1.125rem; }
.slot:hover { background: #f5f7f8; }

.slot.is-picked {
    border-color: var(--action);
    box-shadow: inset 0 0 0 1px var(--action);
}

.publicfoot {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

.poweredby {
    margin-top: 2rem;
    color: var(--ink-soft);
    font-size: 0.8125rem;
    text-align: center;
}

/* --- Výber z navrhnutých termínov -------------------------------- */

.offerform { margin-top: 0.75rem; }

.offeropts {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.offeropts .slot { padding: 0.4375rem 0.75rem; min-height: 2.5rem; font-size: 0.9375rem; }

/* --- Stav termínu na verejnej stránke ----------------------------- */

.statebox { border-left: 4px solid var(--line); }
.statebox--ok   { border-left-color: var(--done); }
.statebox--wait { border-left-color: var(--soon); }

.statebox-when {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
}

.statebox-sub { margin: 0.375rem 0 0; color: var(--ink-soft); }

.optionlist { margin: 0.5rem 0 0; padding-left: 1.125rem; }
.optionlist li { margin-bottom: 0.25rem; }

.confirmrow { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.confirmrow form { margin: 0; }

.btn--go { background: var(--done); border-color: #175436; }
.btn--go:hover { background: #175436; }

.pickcount { margin: 0 0 0.75rem; color: var(--ink-soft); font-size: 0.9375rem; }
.pickcount b { color: var(--ink); }

.slot.is-off { opacity: 0.45; cursor: not-allowed; }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* --- Výber termínu obsluhou --------------------------------------- */

.offerlabel {
    margin: 0.875rem 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.offeropts .slot {
    align-items: flex-start;
    padding: 0.5rem 0.75rem;
    min-height: 2.75rem;
    font-size: 0.9375rem;
    line-height: 1.35;
}

.offeropts .slot span { display: block; color: var(--ink-soft); font-size: 0.8125rem; }
.offeropts .slot b { display: block; color: var(--ink); font-size: 0.9375rem; }
.offeropts .slot input { margin-top: 0.1875rem; }

.slot--other { border-style: dashed; }

.offercustom {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.offercustom input[type=date] { flex: 0 1 11rem; }
.offercustom select { flex: 0 1 9rem; }

/* --- Dohodnutý termín -------------------------------------------- */

/* Zelená znamená vybavené. Farba je doplnok, nie jediný nosič
   informácie - vedľa dátumu je vždy aj slovo. */
.is-booked .due-when { color: var(--done); }

.duelist li.is-booked { box-shadow: inset 3px 0 0 var(--done); }
.duelist li.is-booked a { background: #f2f8f4; }
.duelist li.is-booked a:hover { background: #e8f2ec; }

.worklist li.is-agreed { box-shadow: inset 3px 0 0 var(--done); }

.tally .t-booked b { color: var(--done); }

/* --- Rozbaľovacie zrušenie termínu -------------------------------- */

.canceldrop { margin-top: 0.625rem; }

.canceldrop summary {
    display: inline-block;
    padding: 0.25rem 0;
    color: var(--overdue);
    font-size: 0.875rem;
    cursor: pointer;
}

.cancelform {
    margin-top: 0.5rem;
    padding: 0.875rem;
    background: #f5f7f8;
    border-radius: var(--radius);
    max-width: 32rem;
}

.cancelform label { margin-top: 0.5rem; font-size: 0.875rem; }
.cancelform textarea { min-height: 3.5rem; }

/* --- Akcia priamo v riadku zoznamu -------------------------------- */

/* Tlačidlo nesmie byť vnútri <a>, preto je riadok flex kontajner
   a odkaz aj tlačidlo sú v ňom vedľa seba. */
.duelist li { display: flex; align-items: stretch; }
.duelist li > a { flex: 1 1 auto; min-width: 0; }

.rowaction {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0;
    padding-right: 0.75rem;
}

.rowaction .btn { min-height: 2.25rem; padding: 0.25rem 0.75rem; font-size: 0.875rem; }

.rowaction--none {
    padding-right: 1rem;
    color: var(--ink-soft);
    font-size: 0.8125rem;
}

@media (max-width: 34rem) {
    .duelist li { flex-wrap: wrap; }
    .rowaction { width: 100%; padding: 0 1rem 0.75rem; }
    .rowaction .btn { width: 100%; }
}

/* --- Kalendár ----------------------------------------------------- */

.calhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.calhead h1 { margin: 0; }

.calnav { display: flex; gap: 0.375rem; }
.calnav .btn { min-height: 2.5rem; padding: 0.375rem 0.875rem; }

.callegend {
    display: flex;
    gap: 0.375rem 1rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    color: var(--ink-soft);
    font-size: 0.875rem;
}

/* Každá položka legendy drží bodku aj text pokope, nech sa
   pri zalomení neoddelia. */
.callegend > span { display: inline-flex; align-items: center; white-space: nowrap; }

.dot {
    display: inline-block;
    width: 0.6875rem;
    height: 0.6875rem;
    margin-right: 0.3125rem;
    border-radius: 2px;
    flex: 0 0 auto;
}

.dot--ok    { background: var(--done); }
.dot--wait  { background: var(--soon); }
.dot--idea  { background: #c8912f; opacity: 0.55; }
.dot--done  { background: #aab2ba; }
.dot--block { background: repeating-linear-gradient(45deg,
              #b9bfc6, #b9bfc6 2px, #e6e9ec 2px, #e6e9ec 5px); }

.calgrid {
    display: grid;
    /* minmax(0,1fr) je dôležité: bez neho dlhé meno rozšíri stĺpec
       a mriežka sa rozsype. */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.calname {
    padding: 0.5rem 0.25rem;
    background: #f5f7f8;
    color: var(--ink-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
}

.calday {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    min-height: 5.5rem;
    padding: 0.375rem;
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
}

.calday:hover { background: #f5f7f8; }

.calnum { font-weight: 600; font-size: 0.9375rem; }

.calday.is-outside { background: #fafbfb; }
.calday.is-outside .calnum { color: #aab2ba; }
.calday.is-off { background: #f1f3f5; }
.calday.is-off:hover { background: #e9ecef; }
.calday.is-past .calnum { color: var(--ink-soft); font-weight: 400; }

.calday.is-blocked {
    background: repeating-linear-gradient(45deg,
        #eceef0, #eceef0 4px, #f7f8f9 4px, #f7f8f9 9px);
}

.calday.is-today .calnum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: #fff;
    background: var(--ink);
    border-radius: 999px;
}

.calday.is-selected { box-shadow: inset 0 0 0 2px var(--action); }

.calappt {
    display: block;
    max-width: 100%;
    padding: 0.125rem 0.25rem;
    font-size: 0.75rem;
    line-height: 1.25;
    border-radius: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calappt--ok   { background: #dff0e6; color: #14512f; }
.calappt--wait { background: #fbeecd; color: #6b4500; }
.calappt--idea { background: #fdf5e3; color: #6b4500; border: 1px dashed #d8b978; }
.calappt--done { background: #e6e9ec; color: var(--ink-soft); }

.calmore, .calnote { font-size: 0.6875rem; color: var(--ink-soft); }
.calnote { font-style: italic; }

/* Bodky sa používajú len na úzkom displeji. */
.caldots { display: none; gap: 0.1875rem; flex-wrap: wrap; margin-top: auto; }
.caldots .dot { width: 0.5rem; height: 0.5rem; margin: 0; }

@media (max-width: 46rem) {
    /* Mená sa do bunky nezmestia, tak sa skryjú a zostanú bodky.
       Podrobnosti sú v zozname pod kalendárom a po klepnutí na deň. */
    .calappt, .calmore, .calnote { display: none; }
    .caldots { display: flex; }

    .calday { min-height: 3.25rem; padding: 0.25rem; gap: 0.25rem; }
    .calnum { font-size: 0.8125rem; }
    .calday.is-today .calnum { width: 1.375rem; height: 1.375rem; }
    .calname { padding: 0.375rem 0.125rem; font-size: 0.75rem; }
}

/* --- Akcia priamo v riadku zoznamu -------------------------------- */

/* Tlačidlo nesmie byť vnútri <a>, preto je riadok flex kontajner
   a odkaz aj tlačidlo sú v ňom vedľa seba. */
.duelist li { display: flex; align-items: stretch; }
.duelist li > a { flex: 1 1 auto; min-width: 0; }

.rowaction {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0;
    padding-right: 0.75rem;
}

.rowaction .btn { min-height: 2.25rem; padding: 0.25rem 0.75rem; font-size: 0.875rem; }

.rowaction--none {
    padding-right: 1rem;
    color: var(--ink-soft);
    font-size: 0.8125rem;
}

@media (max-width: 34rem) {
    .duelist li { flex-wrap: wrap; }
    .rowaction { width: 100%; padding: 0 1rem 0.75rem; }
    .rowaction .btn { width: 100%; }
}

/* --- Kalendár ----------------------------------------------------- */

.calhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.calhead h1 { margin: 0; }

.calnav { display: flex; gap: 0.375rem; }
.calnav .btn { min-height: 2.5rem; padding: 0.375rem 0.875rem; }

.callegend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 1rem;
    color: var(--ink-soft);
    font-size: 0.875rem;
}

.dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.25rem;
    border-radius: 2px;
    vertical-align: -0.0625rem;
}

.dot--ok    { background: var(--done); }
.dot--wait  { background: var(--soon); }
.dot--block { background: repeating-linear-gradient(45deg,
              #b9bfc6, #b9bfc6 2px, #e6e9ec 2px, #e6e9ec 5px); }
.dot--off   { background: #dfe3e7; }

.calgrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.calname {
    padding: 0.5rem 0.375rem;
    background: #f5f7f8;
    color: var(--ink-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
}

.calday {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-height: 5.5rem;
    padding: 0.375rem;
    background: var(--surface);
    color: inherit;
    text-decoration: none;
}

.calday:hover { background: #f5f7f8; }

.calnum { font-weight: 600; font-size: 0.9375rem; }

.calday.is-outside { background: #fafbfb; }
.calday.is-outside .calnum { color: #aab2ba; }

.calday.is-off { background: #f1f3f5; }
.calday.is-off:hover { background: #e9ecef; }

.calday.is-past .calnum { color: var(--ink-soft); font-weight: 400; }

.calday.is-blocked {
    background: repeating-linear-gradient(45deg,
        #eceef0, #eceef0 4px, #f7f8f9 4px, #f7f8f9 9px);
}

.calday.is-today .calnum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: #fff;
    background: var(--ink);
    border-radius: 999px;
}

.calday.is-selected { box-shadow: inset 0 0 0 2px var(--action); }

.calappt {
    display: block;
    padding: 0.125rem 0.25rem;
    font-size: 0.75rem;
    line-height: 1.25;
    border-radius: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calappt--ok   { background: #dff0e6; color: #14512f; }
.calappt--wait { background: #fbeecd; color: #6b4500; }
.calappt--done { background: #e6e9ec; color: var(--ink-soft); }

.calmore, .calnote, .calfree {
    font-size: 0.6875rem;
    color: var(--ink-soft);
}

.calnote { font-style: italic; }
.calfree { margin-top: auto; color: #9aa3ab; }

@media (max-width: 40rem) {
    .calday { min-height: 4.25rem; padding: 0.25rem; }
    .calnum { font-size: 0.8125rem; }
    .calappt { font-size: 0.6875rem; padding: 0.0625rem 0.1875rem; }
    .calfree { display: none; }
    .calnote { display: none; }
}

/* --- Pracovný zoznam na úzkom displeji ---------------------------- */

@media (max-width: 46rem) {
    /* Tlačidlá pretekali von z karty, lebo work-main si držal
       16rem minimálnej šírky a tlačidlá sa nemali kam zalomiť. */
    .worklist li { flex-direction: column; align-items: stretch; gap: 0.75rem; }

    .work-main { flex: 1 1 auto; min-width: 0; }

    .work-actions { width: 100%; }
    .work-actions form { flex: 1 1 8rem; }
    .work-actions .btn { width: 100%; justify-content: center; }

    .offeropts { flex-direction: column; align-items: stretch; }
    .offeropts .slot { width: 100%; }
    .offercustom input[type=date],
    .offercustom select { flex: 1 1 100%; }
}

/* --- Vybavené v kalendári ----------------------------------------- */

/* Vybavené je modré, nie zelené. Zelená znamená "dohodnuté a čaká",
   modrá "hotovo" - inak by sa tie dva stavy pliesli. */
.dot--done { background: #2f6f9e; }

.calappt--done {
    background: #dde9f2;
    color: #17456b;
    text-decoration: none;
}

.calappt--done::before { content: '✓ '; }

/* --- Časová os histórie ------------------------------------------- */

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.tl {
    display: flex;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    box-shadow: inset 3px 0 0 transparent;
}

.tl + .tl { border-top: 1px solid var(--line); }

.tl--ok   { box-shadow: inset 3px 0 0 var(--done); }
.tl--bad  { box-shadow: inset 3px 0 0 var(--overdue); }
.tl--wait { box-shadow: inset 3px 0 0 var(--soon); }

.tl-time {
    flex: 0 0 auto;
    width: 3rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    font-size: 0.9375rem;
}

.tl-body { flex: 1 1 auto; min-width: 0; }
.tl-what { display: block; }

.tl-meta {
    display: block;
    margin-top: 0.125rem;
    color: var(--ink-soft);
    font-size: 0.875rem;
}

.pager {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

@media (max-width: 34rem) {
    .tl { flex-direction: column; gap: 0.125rem; }
    .tl-time { width: auto; font-size: 0.8125rem; }
}

/* --- Výber termínu po telefonáte ---------------------------------- */

.dot--free { background: #cfe4d6; box-shadow: inset 0 0 0 1px var(--done); }

.calday.is-free { background: #f4faf6; }
.calday.is-free:hover { background: #e9f4ed; }

.calfree { margin-top: auto; font-size: 0.6875rem; color: #2b7a4f; }

/* Možnosť, ktorá sa do dňa nezmestí, sa dá zvoliť, ale je utlmená -
   obsluha sa občas potrebuje dohodnúť aj mimo pravidiel. */
.slot--tight { opacity: 0.7; border-style: dashed; }

@media (max-width: 46rem) {
    .calfree { display: none; }
}

/* --- Administrátorská časť ---------------------------------------- */

/* Iná farba lišty, nech je na prvý pohľad jasné, že toto nie je
   firemná aplikácia, ale správa celého systému. */
.topbar--admin { background: #3b2f4a; }

.adminbadge {
    margin-left: 0.375rem;
    padding: 0.0625rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #3b2f4a;
    background: #d9cfe6;
    border-radius: 2px;
}

.adminbody .tabbar a.is-current { color: #6b4f8a; border-bottom-color: #6b4f8a; }

/* --- Tabuľky ------------------------------------------------------ */

.tablewrap {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.datatable { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }

.datatable th {
    padding: 0.625rem 0.75rem;
    text-align: left;
    font-size: 0.8125rem;
    color: var(--ink-soft);
    white-space: nowrap;
    background: #f5f7f8;
    border-bottom: 1px solid var(--line);
}

.datatable td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.datatable tr:last-child td { border-bottom: 0; }
.datatable .num { text-align: right; font-variant-numeric: tabular-nums; }
.datatable .sub { display: block; color: var(--ink-soft); font-size: 0.8125rem; }
.datatable .is-stale { color: var(--overdue); }
.datatable tr.is-fail td { color: var(--overdue); }
.datatable tr.is-muted td { color: var(--ink-soft); }

/* --- Pruhy namiesto grafu ----------------------------------------- */

.bar {
    display: block;
    height: 0.5rem;
    background: #e6e9ec;
    border-radius: 999px;
    overflow: hidden;
}

.bar > span {
    display: block;
    height: 100%;
    background: #6b4f8a;
    border-radius: 999px;
}

.mono { font-variant-numeric: tabular-nums; font-size: 0.875rem; }

.btn.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* --- Hviezdičky ---------------------------------------------------- */

.stars { color: #c8912f; letter-spacing: 0.05em; white-space: nowrap; }

.starpick { display: flex; flex-direction: column; gap: 0.375rem; }

.staropt {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    padding: 0.625rem 0.875rem;
    min-height: 3rem;
    font-weight: 400;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
}

.staropt:hover { background: #f5f7f8; }
.staropt input { width: 1.25rem; height: 1.25rem; accent-color: var(--action); }
.staropt .stars { font-size: 1.125rem; }
.starlabel { color: var(--ink-soft); font-size: 0.9375rem; }

.staropt:has(input:checked) {
    border-color: var(--action);
    box-shadow: inset 0 0 0 1px var(--action);
}

/* --- Fotka technika ------------------------------------------------ */

.techphoto {
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border-radius: 50%;
    background: #e6e9ec;
}

.techphoto--lg { width: 6rem; height: 6rem; }

/* --- Adresa vizitky ------------------------------------------------ */

.slugrow { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.slugrow span { color: var(--ink-soft); font-size: 0.9375rem; white-space: nowrap; }
.slugrow input { flex: 1 1 10rem; }

/* ===================================================================
   VEREJNÁ VIZITKA FIRMY
   Iná typografia než aplikácia: toto čítajú zákazníci firmy, nie
   technici. Väčšie písmo, viac vzduchu, menej ovládacích prvkov.
   =================================================================== */

.vizitka { max-width: 46rem; margin: 0 auto; }

.vz-hero { text-align: center; padding: 1rem 0 2rem; }

.vz-logo {
    display: block;
    max-width: 180px;
    max-height: 72px;
    margin: 0 auto 1.25rem;
}

.vz-hero h1 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
}

.vz-sub {
    max-width: 34rem;
    margin: 0 auto 1.25rem;
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.vz-rating { margin: 0 0 1.5rem; font-size: 1.0625rem; }
.vz-rating .stars { font-size: 1.25rem; }
.vz-ratingcount { color: var(--ink-soft); font-size: 0.9375rem; }

.vz-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.vz-actions .btn { min-height: 3rem; padding: 0.625rem 1.5rem; font-size: 1rem; }

.vz-heroimg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 22rem;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: 2.5rem;
}

.vz-section { margin-bottom: 3rem; }

.vz-section > h2 {
    font-size: 1.5rem;
    letter-spacing: -0.015em;
    margin: 0 0 1.25rem;
}

.vz-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

.vz-split > img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.vz-text { font-size: 1.0625rem; line-height: 1.65; }
.vz-text p { margin: 0 0 1rem; }
.vz-text p:last-child { margin-bottom: 0; }

@media (min-width: 44rem) {
    .vz-split { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* --- Tím ----------------------------------------------------------- */

.vz-team {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 1.5rem 1rem;
    margin: 0;
    padding: 0;
}

.vz-team li { text-align: center; }

.vz-team img {
    width: 6rem;
    height: 6rem;
    margin: 0 auto 0.625rem;
    object-fit: cover;
    border-radius: 50%;
    background: #e6e9ec;
}

.vz-team b { display: block; }
.vz-team span { display: block; color: var(--ink-soft); font-size: 0.875rem; }
.vz-team a { display: block; font-size: 0.9375rem; margin-top: 0.125rem; }

/* --- Hodnotenia ---------------------------------------------------- */

.vz-reviews { list-style: none; margin: 0; padding: 0; }

.vz-reviews li {
    padding: 1.25rem;
    margin-bottom: 0.875rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.vz-revhead {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    flex-wrap: wrap;
    margin: 0 0 0.625rem;
}

.vz-revhead .stars { font-size: 1.0625rem; }
.vz-revwho { font-weight: 600; }
.vz-revdate { color: var(--ink-soft); font-size: 0.875rem; margin-left: auto; }

.vz-pros, .vz-cons { margin: 0 0 0.5rem; line-height: 1.6; }
.vz-pros::before { content: '+ '; color: var(--done); font-weight: 700; }
.vz-cons::before { content: '− '; color: var(--overdue); font-weight: 700; }
.vz-cons { color: var(--ink-soft); }

.vz-reply {
    margin: 0.75rem 0 0;
    padding: 0.75rem;
    background: #f5f7f8;
    border-radius: var(--radius);
    font-size: 0.9375rem;
}

.vz-form { background: var(--surface); border: 1px solid var(--line);
           border-radius: var(--radius); padding: 1.25rem; }

.page--card { max-width: 52rem; padding-top: 2rem; }

/* --- Výber polohy na mape ----------------------------------------- */

.pickmap {
    height: 18rem;
    margin-top: 0.375rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}