/* Valikuvurr — stiilid (DISAIN.md tokenid) */

:root {
    --vv-accent: #00d1b2;
    --vv-accent-hover: #00b89c;
    --vv-accent-contrast: #001f1a; /* valge #00d1b2-l andis 1.95:1 */
    --vv-accent-soft: rgba(0, 209, 178, 0.10);
    --vv-accent-soft-2: rgba(0, 209, 178, 0.16);
    --vv-accent-text: #00947e;
    --vv-shadow-1: 0 1px 2px rgba(17,17,26,.06), 0 4px 12px rgba(17,17,26,.08);
    --vv-shadow-2: 0 2px 4px rgba(17,17,26,.08), 0 12px 24px rgba(17,17,26,.12);
    --vv-dur-fast: 150ms;
    --vv-dur-base: 250ms;
    --vv-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="dark"] {
    --vv-accent: #3bd6bd;
    --vv-accent-hover: #5ddfc9;
    --vv-accent-contrast: #0c2a24;
    --vv-accent-soft: rgba(59, 214, 189, 0.14);
    --vv-accent-soft-2: rgba(59, 214, 189, 0.22);
    --vv-accent-text: #3bd6bd;
    --vv-shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.35);
    --vv-shadow-2: 0 2px 4px rgba(0,0,0,.35), 0 12px 24px rgba(0,0,0,.45);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --vv-accent: #3bd6bd;
        --vv-accent-hover: #5ddfc9;
        --vv-accent-contrast: #0c2a24;
        --vv-accent-soft: rgba(59, 214, 189, 0.14);
        --vv-accent-soft-2: rgba(59, 214, 189, 0.22);
        --vv-accent-text: #3bd6bd;
        --vv-shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.35);
        --vv-shadow-2: 0 2px 4px rgba(0,0,0,.35), 0 12px 24px rgba(0,0,0,.45);
    }
}

/* Digiaed (lasteaedade sait): aktsent saidi rohelises (#19804b, vt site_theme_style()).
   html[data-site] tuleb head.php-st. Spetsiifilisus on teadlikult kõrgem kui ülal
   ([data-theme]), et sait võidaks mõlemas teemas; tumedas sama loogika mis türkiisil:
   hele aktsent + tume tekst. */
html[data-site="digiaed"] {
    --vv-accent: #19804b;
    --vv-accent-hover: #156b3f;
    --vv-accent-contrast: #fff;
    --vv-accent-soft: rgba(25, 128, 75, 0.10);
    --vv-accent-soft-2: rgba(25, 128, 75, 0.16);
    --vv-accent-text: #19804b;
}
html[data-site="digiaed"][data-theme="dark"] {
    --vv-accent: #4ade80;
    --vv-accent-hover: #6ee7a0;
    --vv-accent-contrast: #052e16;
    --vv-accent-soft: rgba(74, 222, 128, 0.14);
    --vv-accent-soft-2: rgba(74, 222, 128, 0.22);
    --vv-accent-text: #4ade80;
}
@media (prefers-color-scheme: dark) {
    html[data-site="digiaed"]:not([data-theme="light"]) {
        --vv-accent: #4ade80;
        --vv-accent-hover: #6ee7a0;
        --vv-accent-contrast: #052e16;
        --vv-accent-soft: rgba(74, 222, 128, 0.14);
        --vv-accent-soft-2: rgba(74, 222, 128, 0.22);
        --vv-accent-text: #4ade80;
    }
}

/* ============================================================
   Paneelid (vasak "Valikud" + parem "Vurr")
   ============================================================ */

/* Kompaktne sektsioon — kogu vaade peab FHD ekraanile kerimata ära mahtuma.
   !important, sest globaalne css/style.css seab .section paddingu !important'iga */
.vv-section { padding: 20px 16px 16px !important; }
@media (max-width: 768px) {
    .vv-section { padding: 16px 12px 12px !important; }
}
/* Kasuta ekraani laiust ära — Bulma konteineri kitsas max-laius maha
   (!important, sest Bulma .container:not(...) selektor on spetsiifilisem) */
.vv-section > .container { max-width: 1600px !important; }

.vv-panel {
    position: relative;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #ededed);
    border-radius: 16px;
    box-shadow: var(--vv-shadow-1);
    padding: 20px;
    height: 100%;
}
@media (max-width: 480px) {
    .vv-panel { padding: 16px; }
}

/* Vasak paneel: loomulik kõrgus — ei veni parema veeru (vurri) kõrguseks,
   nii ei muuda valikute sektsioon vurri ilmumisel kõrgust */
.vv-panel--form {
    height: auto;
}

.vv-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 12px;
}

.vv-panel-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary, #363636);
    margin: 0;
}

/* ============================================================
   Valikute paneeli minimeerimine vasakusse serva (ainult desktop)
   ============================================================ */

.vv-head-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.vv-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted, #7a7a7a);
    cursor: pointer;
    transition: background-color var(--vv-dur-fast) var(--vv-ease),
                color var(--vv-dur-fast) var(--vv-ease);
}
@media (hover: hover) {
    .vv-collapse-btn:hover {
        background: var(--bg-hover, #f2f2f2);
        color: var(--text-primary, #363636);
    }
}
.vv-collapse-btn:focus-visible {
    outline: 3px solid var(--vv-accent);
    outline-offset: 2px;
}

/* Kitsas serva-riba, mis kuvatakse minimeeritud olekus */
.vv-rail {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 48px;
    height: 100%;
    min-height: 260px;
    padding: 12px 0;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #ededed);
    border-radius: 12px;
    box-shadow: var(--vv-shadow-1);
    color: var(--text-secondary, #4a4a4a);
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color var(--vv-dur-fast) var(--vv-ease);
}
@media (hover: hover) {
    .vv-rail:hover { background: var(--bg-hover, #f2f2f2); }
}
.vv-rail:focus-visible {
    outline: 3px solid var(--vv-accent);
    outline-offset: 2px;
}
.vv-rail-label {
    writing-mode: vertical-rl;
    letter-spacing: 0.04em;
}

/* Minimeeritud olek: vasak veerg kitsaks ribaks, ratta veerg täidab ülejäänu */
@media (min-width: 1024px) {
    .vv-collapsed > .column.is-4 { flex: none; width: auto; }
    .vv-collapsed > .column.is-8 { flex: 1 1 0; width: auto; }
    .vv-collapsed .vv-panel--form { display: none; }
    .vv-collapsed .vv-rail { display: inline-flex; }
}
/* Kitsal ekraanil (veerud üksteise all) pole minimeerimisel mõtet */
@media (max-width: 1023px) {
    .vv-collapse-btn { display: none; }
}

/* Valikute loenduse pill */
.vv-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--vv-accent-soft-2);
    color: var(--vv-accent-text);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Sisendala */
.vv-textarea {
    border-radius: 12px;
    box-shadow: none;
}

/* Ikoon-tööriistanuppude rida (puhasta / tühjenda / salvesta) */
.vv-tools {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.vv-tools .button {
    border-radius: 8px;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
}

/* Suur primaarne CTA (Loo vurr) */
.vv-cta {
    width: 100%;
    margin-top: 12px;
    height: 3.25em;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1.05rem;
    background-color: var(--vv-accent);
    border-color: transparent;
    color: var(--vv-accent-contrast);
    transition: background-color var(--vv-dur-fast) var(--vv-ease),
                box-shadow var(--vv-dur-fast) var(--vv-ease);
}
.vv-cta:hover, .vv-cta:focus {
    background-color: var(--vv-accent-hover);
    color: var(--vv-accent-contrast);
}
/* Bulma .button[disabled] lähtestaks täite lehe taustaks → aktsenditekst kaoks (smoke_test_button_accent_specificity) */
.button.vv-cta[disabled] { background-color: var(--vv-accent); border-color: transparent; }
.vv-cta:focus-visible {
    outline: 3px solid var(--vv-accent);
    outline-offset: 2px;
}

/* ============================================================
   Segmenteeritud stiilivalik (Ratas | Trummel | Neon | Radar | Purk)
   ============================================================ */

.vv-seg {
    display: inline-flex;
    align-items: stretch;
    background: var(--bg-secondary, #f5f5f5);
    border: 1px solid var(--border-light, #ededed);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
    max-width: 100%;
    overflow-x: auto;
}
.vv-seg .style-btn {
    border: 0;
    background: transparent;
    color: var(--text-secondary, #4a4a4a);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 12px;
    min-height: 2.2rem;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--vv-dur-fast) var(--vv-ease),
                color var(--vv-dur-fast) var(--vv-ease);
}
@media (hover: hover) {
    .vv-seg .style-btn:not(.is-active):hover {
        background: var(--bg-hover, #ececec);
        color: var(--text-primary, #363636);
    }
}
.vv-seg .style-btn.is-active {
    background: var(--vv-accent);
    color: var(--vv-accent-contrast);
}
.vv-seg .style-btn:focus-visible {
    outline: 3px solid var(--vv-accent);
    outline-offset: 2px;
}
@media (max-width: 480px) {
    .vv-seg .style-btn { padding: 8px 8px; font-size: 0.8rem; }
}

/* ============================================================
   Tegevusnupud ratta all
   ============================================================ */

.vv-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}
.vv-actions .button {
    border-radius: 8px;
    font-size: 0.9rem;
}
.vv-actions .vv-spin {
    background-color: var(--vv-accent);
    border-color: transparent;
    color: var(--vv-accent-contrast);
    font-weight: 600;
    padding-left: 1.4em;
    padding-right: 1.4em;
}
.vv-actions .vv-spin:hover, .vv-actions .vv-spin:focus {
    background-color: var(--vv-accent-hover);
    color: var(--vv-accent-contrast);
}
.vv-actions .vv-spin:focus-visible,
.vv-toolbar .vv-spin:focus-visible {
    outline: 3px solid var(--vv-accent);
    outline-offset: 2px;
}

/* ============================================================
   Lüliti-pillid (Kiire vurr / Eemalda valitu / Heli / Ajalugu)
   ============================================================ */

/* Lülitid 2-veerulise võrguna — ühtlaselt joondatud, mitte hajali */
.vv-toggles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.vv-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    border-radius: 999px;
    background: var(--bg-secondary, #f0f0f0);
    border: 1px solid transparent;
    color: var(--text-secondary, #4a4a4a);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    min-height: 2.4rem;
    transition: background-color var(--vv-dur-fast) var(--vv-ease),
                color var(--vv-dur-fast) var(--vv-ease);
}
.vv-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.vv-switch-knob {
    position: relative;
    flex: none;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: var(--border-color, #cfcfcf);
    transition: background-color var(--vv-dur-fast) var(--vv-ease);
}
.vv-switch-knob::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: transform var(--vv-dur-fast) var(--vv-ease);
}
.vv-switch:has(input:checked) {
    background: var(--vv-accent-soft-2);
    color: var(--vv-accent-text);
    font-weight: 600;
}
.vv-switch input:checked ~ .vv-switch-knob {
    background: var(--vv-accent);
}
.vv-switch input:checked ~ .vv-switch-knob::before {
    transform: translateX(14px);
}
.vv-switch input:focus-visible ~ .vv-switch-knob {
    outline: 3px solid var(--vv-accent);
    outline-offset: 2px;
}

/* ============================================================
   Ajalugu (kiibid)
   ============================================================ */

.vv-history {
    margin-top: 12px;
}
/* Ratta ala (tühi olek + canvas + tegevusnupud + ajalugu) — külgajaloo ankur.
   Paneeli päis (pealkiri + stiilivalik) jääb sellest väljapoole ega nihku. */
.vv-stage-area { position: relative; }

/* Laial ekraanil ajalugu ratta KÕRVALE: ratta ala saab paremale riba jagu paddingut
   (ratas tsentreerub ülejäänud alas) ja ajalugu on absoluutne — kõrgus ei muutu */
@media (min-width: 1216px) {
    .vv-has-history .vv-stage-area { padding-right: 216px; }
    .vv-has-history .vv-history {
        position: absolute;
        top: 0;
        right: 0;
        width: 180px;
        max-height: 100%;
        overflow-y: auto;
        margin-top: 0;
    }
    .vv-has-history .vv-history-chips {
        flex-direction: column;
        align-items: stretch;
    }
    .vv-has-history .vv-chip { justify-content: center; }
}
.vv-history-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--text-secondary, #4a4a4a);
    font-weight: 600;
    font-size: 0.9rem;
}
.vv-history-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
/* Täisekraanis (vurr.php) laiemal ekraanil ajalugu ratta kõrvale —
   absoluutne, ei nihuta tööriistariba ega ratast */
@media (min-width: 900px) {
    .vv-fullscreen { position: relative; }
    .vv-fullscreen .vv-history {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 180px;
        max-height: calc(100% - 32px);
        overflow-y: auto;
        margin-top: 0;
    }
    .vv-fullscreen .vv-history .vv-history-chips {
        flex-direction: column;
        align-items: stretch;
    }
    .vv-fullscreen .vv-chip { justify-content: center; }
}
.vv-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--vv-accent-soft-2);
    color: var(--vv-accent-text);
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Täisekraani vaade (vurr.php)
   ============================================================ */

.vv-fullscreen {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    background-color: var(--bg-primary, #f5f5f5);
    color: var(--text-primary, inherit);
}
.vv-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 12px;
}
.vv-dock {
    flex: none;
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.vv-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #ededed);
    border-radius: 16px;
    box-shadow: var(--vv-shadow-1);
    padding: 12px 16px;
    max-width: 100%;
}
.vv-toolbar .button { border-radius: 8px; }
.vv-toolbar .vv-spin {
    background-color: var(--vv-accent);
    border-color: transparent;
    color: var(--vv-accent-contrast);
    font-weight: 600;
}
.vv-toolbar .vv-spin:hover, .vv-toolbar .vv-spin:focus {
    background-color: var(--vv-accent-hover);
    color: var(--vv-accent-contrast);
}
.vv-toolbar-sep {
    align-self: stretch;
    width: 1px;
    background: var(--border-light, #ededed);
    margin: 2px 2px;
}
@media (max-width: 700px) {
    .vv-toolbar-sep { display: none; }
}

/* Ikoon-lülitid tööriistaribal (Kiire / Eemalda valitu / Heli / Ajalugu) */
.vv-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text-muted, #7a7a7a);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    min-height: 2.4rem;
    transition: background-color var(--vv-dur-fast) var(--vv-ease),
                color var(--vv-dur-fast) var(--vv-ease);
}
@media (hover: hover) {
    .vv-check:hover { background: var(--bg-hover, #f2f2f2); }
}
.vv-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.vv-check:has(input:checked) {
    color: var(--vv-accent-text);
    font-weight: 600;
}
.vv-check:has(input:focus-visible) {
    outline: 3px solid var(--vv-accent);
    outline-offset: 2px;
}

/* ============================================================
   Tühi olek (enne vurri loomist)
   ============================================================ */

.vv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    border: 1.5px dashed var(--border-light, #dbdbdb);
    border-radius: 12px;
    color: var(--text-muted, #7a7a7a);
    text-align: center;
}
.vv-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--vv-accent-soft);
    color: var(--vv-accent);
    font-size: 24px;
}

/* Klikitav ratas — klikk canvasel vurritab (sama mis nupp "Vurrita") */
#spinnerCanvas { cursor: pointer; }

/* Ekraanilugejale nähtav, visuaalselt peidetud (aria-live tulemus) */
.vv-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Madal/skaleeritud ekraan — pigista vahed kokku, et ratas saaks ruumi.
   NB: peab olema komponendireeglitest hiljem, muidu kaotab kaskaadis. */
@media (min-width: 769px) and (max-height: 800px) {
    .vv-section { padding: 12px 24px 12px !important; }
    .vv-panel { padding: 16px; }
    .vv-panel-head { margin-bottom: 8px; }
    .vv-actions, .vv-toggles, .vv-history { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .vv-seg .style-btn,
    .vv-switch,
    .vv-switch-knob,
    .vv-switch-knob::before,
    .vv-check,
    .vv-cta { transition: none; }
}

/* ============================================================
   Oma kaardipakid: nupurida rippmenüü all + paki redaktor
   ============================================================ */

/* Rippmenüü ja paki ikooninupud ühel real */
.vv-valik-rida { display: flex; align-items: stretch; gap: 8px; }
.vv-valik-rida > .select { flex: 1 1 auto; min-width: 0; }
.vv-valik-rida > .select select { width: 100%; }

.vv-paki-tools { display: flex; flex: none; gap: 8px; }
.vv-paki-tools .button {
    border-radius: 8px;
    width: 2.5em;
    height: 100%;
    padding: 0;
}
/* display:flex / inline-flex võidaks vaikimisi [hidden] reegli — sunni peitmine peale */
.vv-paki-tools[hidden], .vv-paki-tools .button[hidden] { display: none !important; }