/* ==========================================================================
   bron.css — bron.hops.ee kujundus
   Lõuend: plaadid 38 (logo) ja 39 (broneerimistabel).
   Juhend: BRON-KUJUNDUSJUHEND.md

   Laadi olemasoleva faili JÄREL:
       <link rel="stylesheet" href="/assets/style.css?v=9">
       <link rel="stylesheet" href="/assets/bron.css?v=1">

   Ta kasutab TÄPSELT olemasolevaid klassinimesid — .tp-lahter, .tp-hoivatud,
   .tp-minu, .suletud, .valitud, tr.tp-vaheaeg, td.tp-vahe jne. HTML-i ega
   PHP-d muuta ei ole vaja. Juhendi ptk 6 ütleb, millised vanad reeglid
   tasub hiljem style.css-ist välja visata, et kaks faili ei võitleks.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');


/* ==========================================================================
   1. MÄRGID
   ========================================================================== */

:root {
    /* Pinnad */
    --louend:      #F2F6F5;
    --pind:        #FFFFFF;
    --pind-2:      #F7FAFA;
    --sygav:       #0E2A2C;   /* tume riba, valikuriba */

    /* Kiri */
    --tint:        #14282C;
    --tint-2:      #4A5F62;
    --tint-3:      #7E9194;

    /* Jooned — tumedamad kui vaikimisi hall, et ruudustik loeks */
    --joon:        #DDE6E4;
    --joon-2:      #C3D0CE;

    /* Sinakasroheline */
    --aks:         #0E7488;
    --aks-t:       #E3F0F3;
    --aks-d:       #189BB4;   /* sama toon tumedal taustal */

    --hoia:        #B07A12;   --hoia-t: #FAF1DC;
    --viga:        #B4483C;

    /* Tabel */
    --tp-pais-w:   150px;     /* kapi veerg */
    --tp-tund-w:   124px;     /* tunni veerg */
    --tp-vahe-w:   34px;      /* vahetunni veerg */
    --tp-lahter-h: 78px;
    --tp-vahe-pind:#DFE8E8;   /* vahetunni pind — vt juhend 4.2 */

    --r-kast:      18px;
    --r-valja:     12px;
    --r-pill:      999px;
    --puude:       44px;

    --kiri: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body { font-family: var(--kiri); background: var(--louend); color: var(--tint); }


/* ==========================================================================
   2. BRONEERIMISTABEL — päevavaade (.tp)
   --------------------------------------------------------------------------
   Kolm asja, mis vanas tabelis loetavuse ära sõid:
     1. kapi nimi kordus igas lahtris (56 korda sama sõna),
     2. ainus muutuv number oli 11 px nurgas,
     3. iga lahter oli ühtemoodi tumedalt raamitud.
   Kõik kolm on siin ümber pööratud.
   ========================================================================== */

.tabel-ymbris { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tp {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: auto;
    font-family: var(--kiri);
}

.tp-col-pais { width: var(--tp-pais-w); }
.tp-col-tund { width: var(--tp-tund-w); }
.tp-col-vahe { width: var(--tp-vahe-w); }

/* --- päis --- */
.tp-nurk,
.tp-pais {
    background: var(--pind);
    border: 0;
    border-bottom: 2px solid var(--joon-2);   /* tugev joon päise alla */
    padding: 10px 12px;
    text-align: left;
    vertical-align: bottom;
}
.tp-nr  { font-size: 16px; font-weight: 600; color: var(--tint); line-height: 1; }
.tp-aeg { font-size: 11px; color: var(--tint-3); margin-top: 3px;
          font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- kapi rida --- */
.tp-rida {
    background: var(--pind);
    border: 0;
    border-bottom: 1px solid var(--joon);
    padding: 10px 14px 10px 0;
    text-align: left;
    vertical-align: top;
}
.tp-suur { font-size: 15px; font-weight: 600; color: var(--tint);
           white-space: nowrap; letter-spacing: -.01em; }
.tp-rida .tp-aeg { font-size: 11px; margin-top: 2px; }
.tp-rida a { color: inherit; text-decoration: none; }
.tp-rida a:hover { color: var(--aks); }


/* ==========================================================================
   3. LAHTER
   ========================================================================== */

.tp-lahter {
    position: relative;
    height: var(--tp-lahter-h);
    padding: 10px 12px;
    background: var(--pind);
    border: 1px solid var(--joon);
    vertical-align: top;
}

/* Vaba seadmete arv = lahtri sisu, mitte nurgamärkus */
.tp-vaba {
    display: block;
    font-size: 24px; font-weight: 600; line-height: 1;
    color: var(--tint); letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.tp-vaba span { font-size: 14px; font-weight: 500; color: var(--tint-3); }
.tp-vaba.vahe { color: var(--tint); }
.tp-vaba.tais { color: var(--tint-3); }

/* Kapi nimi on rea alguses juba kirjas — lahtris on ta müra.
   Kui PHP-st ka välja võtad, võib selle rea kustutada. */
.tp-paev .tp-kapp { display: none; }

/* Täituvuse riba lahtri all — hõivatus ühe pilguga, ilma lugemata.
   Laiuse annab PHP:  style="--tp-tais: 42%"   (vt juhend 4.1) */
.tp-lahter::before {
    content: "";
    position: absolute; left: 12px; right: 12px; bottom: 10px;
    height: 4px; border-radius: 2px;
    background: #E8EEEE;
}
.tp-lahter::after {
    content: "";
    position: absolute; left: 12px; bottom: 10px;
    width: calc((100% - 24px) * var(--tp-tais, 0));
    height: 4px; border-radius: 2px;
    background: var(--aks);
    transition: width .2s ease;
}

/* --- seisud --- */
.tp-lahter.valitav { cursor: pointer; }
.tp-lahter.valitav:hover { border-color: var(--joon-2); background: var(--pind-2); }

.tp-lahter.tp-hoivatud { background: var(--pind); }

.tp-lahter.tp-minu { background: var(--aks-t); border-color: #BFDDE4; }
.tp-lahter.tp-minu .tp-vaba { color: var(--aks); }
.tp-lahter.tp-minu::before { background: #CFE4E9; }

.tp-lahter.tp-yle { background: var(--hoia-t); border-color: #EBD9AE; }
.tp-lahter.tp-yle .tp-vaba { color: var(--hoia); }
.tp-lahter.tp-yle::after { background: var(--hoia); }

.tp-lahter.suletud { background: #F5F8F8; cursor: default; }
.tp-lahter.suletud .tp-vaba { color: #B7C4C4; }
.tp-lahter.suletud::after { background: #D5DEDE; }
.tp-lahter.suletud.tp-hoivatud,
.tp-lahter.suletud.tp-minu { background: #EEF3F3; }

/* Valitud — 2 px ääris ja linnuke, mitte taustavärvi vahetus.
   Nii on näha ka seda, mis seisus lahter enne oli. */
.tp-lahter.valitud {
    border: 2px solid var(--aks);
    padding: 9px 11px;                      /* ääris ei tohi sisu nihutada */
    box-shadow: 0 0 0 3px rgba(14,116,136,.12);
}
.tp-lahter.valitud::after { background: var(--aks); }

.tp-lahter.valitud > .tp-linnuke,
.tp-lahter.valitud::marker { display: none; }

/* Linnuke joonistatakse .tp-sisu külge, et ::before/::after jääks ribale */
.tp-lahter.valitud .tp-sisu::after {
    content: "";
    position: absolute; top: 7px; right: 8px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--aks);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center;
}
.tp-sisu { position: static; }

/* Broneeringu kirje lahtris (kes ja kui palju) */
.tp-kirje {
    display: block;
    font-size: 11px; color: var(--tint-3);
    margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp-kirje.minu { color: var(--aks); font-weight: 600; }

.tp-tyhi { color: var(--tint-3); font-size: 11px; }


/* ==========================================================================
   4. VAHETUNNI VEERUD
   --------------------------------------------------------------------------
   Vana #FAFAFA oli valge kõrval nähtamatu ja päev luges ühe ühtlase plokina.
   Nüüd on nad selgelt teine pind ja jagavad päeva blokkideks.
   Kui jääb nõrgaks: --tp-vahe-pind: #C9D6D6.
   ========================================================================== */

td.tp-vahe,
.tp-pais.tp-vahe {
    background: var(--tp-vahe-pind);
    border: 0;
    padding: 8px 0;
}

/* Kellaaeg püstkirjas — 34 px laiust jagub */
.tp-pais.tp-vahe .tp-nr {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: 0 auto;
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--tint-2); white-space: nowrap;
}
.tp-pais.tp-vahe .tp-aeg { display: none; }

/* Vaheaja rida (pikk söögivahetund üle terve rea) */
tr.tp-vaheaeg .tp-lahter:not(.tp-hoivatud):not(.tp-minu),
tr.tp-vaheaeg .tp-rida { background: var(--pind-2); }

/* Tänane päev nädalavaates */
tr.tp-tana .tp-rida { box-shadow: inset 3px 0 0 var(--aks); }


/* ==========================================================================
   5. LEGEND
   ========================================================================== */

.tp-legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
    margin-top: 16px;
    font-size: 12px; color: var(--tint-2);
}
.tp-legend i {
    position: relative;
    width: 22px; height: 18px; border-radius: 5px;
    border: 1px solid var(--joon); background: var(--pind);
    display: inline-block; margin-right: 8px; vertical-align: -4px;
}
.tp-legend i::after {
    content: ""; position: absolute; left: 3px; bottom: 3px; height: 3px;
    border-radius: 2px; background: var(--aks);
}
.tp-l-vaba::after      { width: 0; }
.tp-l-hoivatud::after  { width: 45%; }
.tp-l-minu             { background: var(--aks-t); border-color: #BFDDE4; }
.tp-l-minu::after      { width: 50%; }
.tp-l-moodas           { background: #F5F8F8; }
.tp-l-moodas::after    { width: 0; }

.abitekst { font-size: 12px; color: var(--tint-3); line-height: 1.55; }


/* ==========================================================================
   6. PÄEVARIBA JA VAATE VALIK
   ========================================================================== */

.bron-riba { margin-bottom: 16px; }
.bron-nav  { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.bron-nav > .nupp {
    min-height: var(--puude);
    border-radius: var(--r-valja);
    border: 1px solid var(--joon-2);
    background: var(--pind);
    color: var(--tint);
    font-family: var(--kiri); font-size: 14px;
    padding: 0 16px;
    display: inline-flex; align-items: center;
}
.bron-nav > .nupp:hover { border-color: var(--aks); color: var(--aks); }
.bron-periood { font-size: 18px; font-weight: 600; color: var(--tint); margin-left: 8px; }

.bron-kapp select {
    min-height: var(--puude); border-radius: var(--r-valja);
    border: 1px solid var(--joon-2); background: var(--pind);
    font-family: var(--kiri); font-size: 14px; padding: 0 14px; color: var(--tint);
}


/* ==========================================================================
   7. VALIKURIBA — ilmub, kui mõni tund on valitud
   ========================================================================== */

.bron-valik {
    position: sticky; bottom: 16px; z-index: 20;
    margin-top: 18px;
    border-radius: var(--r-kast);
    background: var(--sygav); color: #FFF;
    box-shadow: 0 12px 32px rgba(10,30,28,.24);
    animation: bron-tousu .2s ease;
}
@keyframes bron-tousu { from { transform: translateY(10px); opacity: 0; } }

.bron-valik-sisu {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 16px 22px;
}
.bron-valik-info { flex-grow: 1; min-width: 200px; font-size: 16px; font-weight: 500; }
.bron-valik-info small {
    display: block; font-size: 12px; font-weight: 400;
    color: rgba(255,255,255,.55); margin-top: 2px;
}
.bron-valik-nupud { display: flex; align-items: center; gap: 10px; }

.bron-valik .nupp {
    min-height: var(--puude); border-radius: var(--r-valja);
    padding: 0 20px; font-size: 14px; font-weight: 600;
    border: 0; background: rgba(255,255,255,.12); color: #FFF;
}
.bron-valik .nupp-esmane { background: var(--aks-d); color: #06282F; }
.bron-valik input[type="number"] {
    width: 82px; min-height: var(--puude);
    border-radius: var(--r-valja); border: 0;
    background: rgba(255,255,255,.10); color: #FFF;
    font-family: var(--kiri); font-size: 18px; font-weight: 600;
    text-align: center; font-variant-numeric: tabular-nums;
}


/* Riba jaoks ruum lahtri all, et mitme broneeringu korral tekst riba peale ei jookseks */
.tp-lahter { padding-bottom: 22px; }
.tp-lahter.valitud { padding-bottom: 21px; }

/* Tühistamise × broneeringu kirje järel */
.bron-x { border: 0; background: none; cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1; }
.bron-x:hover { color: var(--viga); }

/* Kuupäev: tekst + kalendriikoon; klõps avab kalendri (raam tuleb bron-ilme.css-ist) */
.bron-kuup { position: relative; cursor: pointer; }
.bron-kuup:hover { background: var(--pind-2); }
.bron-kuup-ikoon {
    width: 16px; height: 16px; flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237E9194' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") no-repeat center / 16px;
}
.bron-kuup input[type="date"] {
    position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
    opacity: 0; border: 0; padding: 0; pointer-events: none;
}

/* Nädalavaate kapivalik – kohe Täna nupu järel */
.bron-kapp select { width: auto; font-weight: 600; }

/* Rea päis (kapp / päev) ei kleebi vasaku servaga kokku */
.tp-rida { padding-left: 12px; }
.tp-nurk { padding-left: 12px; }

/* Tunni numbrid tagasihoidlikumaks */
.tp-nr { font-size: 14px; font-weight: 500; }
.tp-vaba { font-size: 19px; font-weight: 400; }
.tp-vaba span { font-size: 12px; font-weight: 400; }

/* Kogus − / + ja märkus valikuribal */
.bron-valik-info > span { display: block; }
.bron-kogus { display: flex; align-items: center; gap: 6px; }
.bron-valik .bron-kogus .nupp { min-width: var(--puude); padding: 0; font-size: 20px; line-height: 1; }
.bron-valik .bron-markus {
    flex: 1 1 200px; min-width: 180px; min-height: var(--puude);
    border-radius: var(--r-valja); border: 0; padding: 0 14px;
    background: rgba(255,255,255,.10); color: #FFF; font-family: var(--kiri); font-size: 14px;
}
.bron-valik .bron-markus::placeholder { color: rgba(255,255,255,.5); }


/* ==========================================================================
   8. NÄDALAVAADE (.bron-tabel) — sama keel, teine ruudustik
   ========================================================================== */

.bron-tabel { border-collapse: separate; border-spacing: 0; table-layout: fixed;
              font-family: var(--kiri); }
.bron-tabel th {
    background: var(--pind); border: 0; border-bottom: 2px solid var(--joon-2);
    padding: 10px 12px; text-align: left;
    font-size: 14px; font-weight: 600; color: var(--tint);
}
.bron-tabel th a { color: inherit; text-decoration: none; }
.bron-tabel th.tana { box-shadow: inset 0 -3px 0 var(--aks); }

.bron-tund-pais, .bron-tund {
    font-size: 12px; color: var(--tint-3); font-variant-numeric: tabular-nums;
}

.bron-lahter {
    position: relative; height: 64px; padding: 9px 11px;
    background: var(--pind); border: 1px solid var(--joon); vertical-align: top;
}
.bron-lahter.valitav { cursor: pointer; }
.bron-lahter.valitav:hover { border-color: var(--joon-2); background: var(--pind-2); }
.bron-lahter.valitud { border: 2px solid var(--aks); padding: 8px 10px;
                       box-shadow: 0 0 0 3px rgba(14,116,136,.12); }
.bron-lahter.suletud { background: #F5F8F8; cursor: default; }
.bron-lahter.vaheaeg,
.bron-tabel th.vaheaeg { background: var(--tp-vahe-pind); border: 0; }

.bron-vaba { font-size: 20px; font-weight: 600; color: var(--tint); line-height: 1;
             font-variant-numeric: tabular-nums; }
.bron-vaba span { font-size: 12px; font-weight: 500; color: var(--tint-3); }
.bron-vaba.tais { color: var(--tint-3); }
.suletud .bron-vaba { color: #B7C4C4; }

.bron-kirje { font-size: 11px; color: var(--tint-3); margin-top: 3px;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bron-kirje.minu { color: var(--aks); font-weight: 600; }
.bron-x { color: var(--tint-3); }


/* ==========================================================================
   9. KITSAS AKNAS
   --------------------------------------------------------------------------
   Tabel ei murdu — ta kerib külgsuunas. Kapi veerg jääb paigale, muidu ei tea
   kerides enam, mille peal ollakse.
   ========================================================================== */

@media (max-width: 1100px) {
    :root { --tp-tund-w: 104px; --tp-pais-w: 132px; }
    .tp-lahter { padding: 9px 10px; }
    .tp-vaba { font-size: 18px; }
}

@media (max-width: 760px) {
    :root { --tp-tund-w: 96px; --tp-vahe-w: 22px; --tp-lahter-h: 70px; }
    .tp-nurk, .tp-rida { position: sticky; left: 0; z-index: 2; }
    .tp-rida { box-shadow: 1px 0 0 var(--joon); }
    .tp-pais.tp-vahe .tp-nr { display: none; }
    .bron-periood { width: 100%; margin: 6px 0 0; }
    .bron-valik-sisu { padding: 14px 16px; }
}

@media (hover: none) {
    .tp-lahter.valitav:hover,
    .bron-lahter.valitav:hover { background: var(--pind); border-color: var(--joon); }
    .tp-lahter.valitav:active { background: var(--pind-2); }
}

@media (prefers-reduced-motion: reduce) {
    .bron-valik { animation: none; }
    .tp-lahter::after { transition: none; }
}

/* ==========================================================================
   10. LISAD – kappide järjekord, nädalavaate paneel
   ========================================================================== */
/* Kapi rea lohistamine (päevavaade) */
.tp-lohista {
    float: left; margin: 1px 8px 0 -4px; padding: 2px 3px;
    color: var(--tint-3); font-size: 16px; line-height: 1; cursor: grab;
    touch-action: none; user-select: none; border-radius: 4px;
}
.tp-lohista:hover { color: var(--aks); background: var(--aks-t); }
/* lohistatav rida: tuhmim, vasakul roheline triip */
tr.tp-lohistab > * { opacity: .45; }
tr.tp-lohistab > .tp-rida { opacity: 1; box-shadow: inset 4px 0 0 var(--aks); background: var(--aks-t); }
tr.tp-lohistab .tp-lohista { cursor: grabbing; color: var(--aks); }
/* sihtkoht: paks roheline joon rea kohal või all */
tr.tp-siht-enne > *   { box-shadow: inset 0 4px 0 var(--aks); }
tr.tp-siht-parast > * { box-shadow: inset 0 -4px 0 var(--aks); }
/* äsja paigutatud rida vilgatab korra */
tr.tp-paigutatud > .tp-rida { background: var(--aks-t); transition: background .8s ease; }
body.tp-lohistamine, body.tp-lohistamine * { cursor: grabbing !important; user-select: none; }

/* Nädalavaate kapivalik – ülemisel real noolte järel, suurem */
.bron-nav .bron-kapp { margin-left: 12px; }
.bron-nav .bron-kapp select {
    width: auto; min-height: var(--puude); padding: 0 34px 0 4px;
    font-size: 17px; font-weight: 600; color: var(--aks);
    border: 0; border-bottom: 2px solid var(--aks); border-radius: 0; background-color: transparent;
}
.bron-nav .bron-kapp select:focus { outline: none; border-bottom-color: var(--tint); }

/* Tööriistariba: vasakul kuupäev (+ kapp), paremal Päev / Nädal */
.bron-riba { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bron-vaade { display: flex; gap: 8px; margin-left: auto; }

/* Broneerimise leht: pealkirjata ja laiem */
main.ilma-pealkirjata { padding-top: 18px; }
main.wrap-lai { max-width: 1440px; }
:root { --tp-pais-w: 190px; }

/* Päeva- ja nädalatabel alati sama laiusega; kerimisriba ei nihuta lehte */
html { scrollbar-gutter: stable; overflow-y: scroll; }
.tp { width: 100%; }

/* Tööriistariba: Täna, kontekst ja legend (plaat 41) */
.bron-kontekst { font-size: 13px; color: var(--tint-2); white-space: nowrap; margin-left: 4px; }
.bron-legend { margin: 0 0 0 auto; gap: 14px; }
.bron-legend i { width: 18px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.bron-legend + .bron-vaade { margin-left: 8px; }
.bron-abi { margin-top: 14px; }
.bron-riba { flex-wrap: nowrap; }
.bron-nav { flex-wrap: nowrap; min-width: 0; }
@media (max-width: 1100px) { .bron-riba, .bron-nav { flex-wrap: wrap; } .bron-kontekst { white-space: normal; } }