/* ============================================================================
 * ELAB UI Kit — design system v0.1
 *
 * Disainikeel:
 *   - Brand-roheline #4a9f04 (peamine action / accent)
 *   - Pehme valge taust, ümarad nurgad (8/12/16px), kerged shadow'd
 *   - Modern thin scrollbar, soft fade/scale animatsioonid
 *   - A11y-fookus: 3px brand-roheline ring (rgba 0.12)
 *   - BeTheme override: !important kus tarvis (button:hover, input margin)
 *
 * Failistruktuur:
 *   1. Design tokens (CSS muutujad)
 *   2. Reset / base
 *   3. Tüpograafia
 *   4. Nupud
 *   5. Lingid
 *   6. Vormid (input, textarea, select, checkbox, radio, toggle, file)
 *   7. Listid (content + widget)
 *   8. Kaardid (entity + generic)
 *   9. Badges + sildid
 *   10. Modal
 *   11. Akordion
 *   12. Toast
 *   13. Spinner / states
 *   14. Tabel
 *   15. Helpers (utility classes)
 *
 * Kõik elemendid on prefiksitud `.elab-*` namespace'iga, et vältida konflikte.
 * Kit on isoleeritud: võib ümbritseda parent-elementi `.elab-ui` klassiga,
 * et kõik tokens ja stiilid kehtiks AINULT selle sees.
 * ============================================================================ */


/* ─── 1. Design tokens ──────────────────────────────────────── */

.elab-ui,
:root {
    /* Brand */
    --elab-green:           #4a9f04;        /* Peamine action / avg-rating */
    --elab-green-hover:     #3d8403;        /* Hover-toon */
    --elab-green-dark:      #3d8403;        /* Sama hex kui --elab-green-hover, alias mitte-hover kontekstideks */
    --elab-green-darker:    #2d5f02;
    --elab-green-soft:      #f0f9e8;
    --elab-green-soft2:     #f8fcf3;

    /* --elab-green-deep tokenid eemaldatud 2026-05-18 (kasutuses ainult otsingunuppudel,
     * asendatud --elab-dark-blue'ga). Säilitatud aliasena puhtaks deprecateimiseks —
     * kõik uued kasutuskohad peavad kasutama --elab-dark-blue. */
    --elab-green-deep:      #002a38;        /* DEPRECATED — kasuta --elab-dark-blue */
    --elab-green-deep-dark: #001e29;        /* DEPRECATED */
    --elab-green-deep-soft: #e8f0f3;        /* DEPRECATED */

    --elab-blue:            #009ce2;        /* Link + user-rating */
    --elab-blue-hover:      #0086c2;
    --elab-text-link:       #00698c;        /* Tekstilink (tumedam sinine); hover → --elab-blue */
    /* Õrn-sinine taust + border (mängukava/kalender accent-pinnad). Lisatud
     * 2026-06-08 — mirror warning/danger soft+border mustrit. NB: kogu saidi
     * sinise-tonaalsus tasub kunagi UI-Kitis üle vaadata/ühtlustada. */
    --elab-blue-soft:       #e8f6fd;
    --elab-blue-border:     #b7e3f7;

    /* Tume sinine — PAGE HEADER topbar + otsingunupud (asendab vana --elab-green-deep) */
    --elab-dark-blue:       #002a38;
    --elab-dark-blue-hover: #001e29;

    /* Page header taust ja border — kasutatakse ka liikmete alamlehtede header'is */
    --elab-page-header-bg:     #EDF1F3;
    --elab-page-header-border: #DAE1E5;

    --elab-warning:         #c97e0c;
    --elab-warning-soft:    #fff8e6;
    --elab-warning-border:  #fde68a;

    --elab-danger:          #b32424;
    --elab-danger-soft:     #fde8e8;

    --elab-info:            #2271b1;
    --elab-info-soft:       #f0f7ff;

    /* Dark/inverse palette — lavastuse header + esilehe items_focus dark variant */
    --elab-dark:            #002a38;
    --elab-dark-bw:         #151515;
    --elab-light-blue:      #4db4ea;        /* Heledam sinine — kasutusel ainult tumedal taustal (.elab-hdr credits/bar) */

    /* Text */
    --elab-text:            #1a1a1a;
    --elab-text-secondary:  #4b5563;
    --elab-text-muted:      #6b7280;
    --elab-text-soft:       #9ca3af;
    --elab-text-inverse:    #ffffff;

    /* Backgrounds */
    --elab-bg:              #ffffff;
    --elab-bg-soft:         #f1f3f4;
    --elab-bg-soft2:        #f5f5f5;
    --elab-bg-soft3:        #f6f7f8;
    --elab-bg-hover:        #f9fafb;
    --elab-bg-elevated:     #ffffff;

    /* Borders */
    --elab-border:          #e5e7eb;
    --elab-border-soft:     #f0f0f0;
    --elab-border-strong:   #d1d5db;

    /* Shadows */
    --elab-shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.06);
    --elab-shadow-md:       0 4px 12px rgba(0, 0, 0, 0.08);
    --elab-shadow-lg:       0 10px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    --elab-shadow-focus:    0 0 0 3px rgba(74, 159, 4, 0.18);
    --elab-shadow-focus-soft: 0 0 0 3px rgba(74, 159, 4, 0.12);

    /* Radii */
    --elab-radius-xs:       4px;
    --elab-radius-sm:       6px;
    --elab-radius-md:       8px;
    --elab-radius-lg:       12px;
    --elab-radius-xl:       16px;
    --elab-radius-full:     999px;

    /* Spacing scale */
    --elab-space-1:         4px;
    --elab-space-2:         8px;
    --elab-space-3:         12px;
    --elab-space-4:         16px;
    --elab-space-5:         20px;
    --elab-space-6:         24px;
    --elab-space-8:         32px;
    --elab-space-10:        40px;
    --elab-space-12:        48px;

    /* Font sizes */
    --elab-fs-2xs:          9px;
    --elab-fs-xsm:          10px;
    --elab-fs-xs:           11px;
    --elab-fs-sm:           12px;
    --elab-fs-base:         14px;
    --elab-fs-md:           15px;
    --elab-fs-lg:           17px;
    --elab-fs-xl:           20px;
    --elab-fs-2xl:          24px;
    --elab-fs-3xl:          30px;
    --elab-fs-4xl:          36px;

    /* Font weights */
    --elab-fw-normal:       400;
    --elab-fw-medium:       500;
    --elab-fw-semibold:     600;
    --elab-fw-bold:         700;

    /* Line heights */
    --elab-lh-tight:        1.25;
    --elab-lh-snug:         1.4;
    --elab-lh-normal:       1.5;
    --elab-lh-relaxed:      1.65;

    /* Font families
     * Teema (BeTheme) laadib Google Fontsist:
     *   - Plus Jakarta Sans  → body, lead, menu, H5/H6, blockquote
     *   - Fraunces           → page title, H1–H4, decorative numbers
     * Fallback: süsteemi-sans-stack (kui Google Fonts ei lae)
     */
    --elab-font-body:       "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --elab-font-display:    "Fraunces", Georgia, "Times New Roman", serif;
    --elab-font-mono:       ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    /* Backwards-compat alias (vanas koodis kasutusel `--elab-font`) */
    --elab-font:            var(--elab-font-body);

    /* Transitions */
    --elab-trans-fast:      0.12s ease;
    --elab-trans-base:      0.18s ease;
    --elab-trans-slow:      0.24s cubic-bezier(0.16, 1, 0.3, 1);
    --elab-trans-bounce:    0.28s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Z-index scale */
    --elab-z-dropdown:      100;
    --elab-z-sticky:        500;
    --elab-z-modal-bg:      900;
    --elab-z-modal:         1000;
    --elab-z-toast:         1200;
}


/* ─── 2. Reset / base ───────────────────────────────────────── */

.elab-ui {
    font-family: var(--elab-font-body);
    color: var(--elab-text);
    line-height: var(--elab-lh-normal);
    box-sizing: border-box;
}

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


/* ─── 3. Tüpograafia ────────────────────────────────────────── */

.elab-h1, .elab-h2, .elab-h3, .elab-h4, .elab-h5, .elab-h6 {
    margin: 0 0 var(--elab-space-3);
    line-height: var(--elab-lh-tight);
    color: var(--elab-text);
}

/*
 * Big headings — Fraunces (decorative serif) — H1–H4 + page title.
 * `font-optical-sizing: auto` aktiveerib Fraunces'i variable-font'i SOFT axis'e
 * (suurem fontisuurus → suurem optical-size → tihedamad seriifid).
 */
.elab-h1, .elab-h2, .elab-h3, .elab-h4 {
    font-family: var(--elab-font-display);
    font-weight: var(--elab-fw-semibold);
    font-optical-sizing: auto;
    letter-spacing: -0.015em;
}

.elab-h1 { font-size: var(--elab-fs-4xl); font-weight: var(--elab-fw-bold); letter-spacing: -0.025em; line-height: 1.1; }
.elab-h2 { font-size: var(--elab-fs-3xl); line-height: 1.15; }
.elab-h3 { font-size: var(--elab-fs-2xl); line-height: 1.2; }
.elab-h4 { font-size: var(--elab-fs-xl); }

/* Small headings — Plus Jakarta Sans (sans-serif, kompaktsem)  */
.elab-h5, .elab-h6 {
    font-family: var(--elab-font-body);
    letter-spacing: -0.005em;
}

.elab-h5 { font-size: var(--elab-fs-lg); font-weight: var(--elab-fw-semibold); }
.elab-h6 {
    font-size: var(--elab-fs-sm);
    font-weight: var(--elab-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--elab-text-muted);
}

/*
 * Page title — eraldi utility-klass artikli/lehe peamise pealkirja jaoks.
 * Suurem kui H1 (Fraunces variable-font'iga + extra optical-size).
 */
.elab-page-title {
    font-family: var(--elab-font-display);
    font-size: clamp(34px, 5.4vw, 56px);
    font-weight: var(--elab-fw-bold);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--elab-text);
    margin: 0 0 var(--elab-space-4);
    font-optical-sizing: auto;
    /* Fraunces SOFT axis (-100..100): pisut "soft", et hoia loetavus keskel */
    font-variation-settings: 'SOFT' 25;
}

/*
 * Decorative numbers — Fraunces, suuremad kuvatavad arvud (Counter, Quick Fact,
 * Chart, Single Product Price). Tabular-nums hoiab veerud joonduses.
 */
.elab-display-number {
    font-family: var(--elab-font-display);
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: var(--elab-fw-bold);
    letter-spacing: -0.02em;
    color: var(--elab-text);
    line-height: 1;
    font-optical-sizing: auto;
}

.elab-display-number--lg { font-size: 56px; }
.elab-display-number--md { font-size: 42px; }
.elab-display-number--sm { font-size: 28px; }

/*
 * Body paragraphs + lead — Plus Jakarta Sans
 */
.elab-p {
    margin: 0 0 var(--elab-space-4);
    font-family: var(--elab-font-body);
    font-size: var(--elab-fs-base);
    line-height: var(--elab-lh-relaxed);
    color: var(--elab-text);
}

.elab-lead,
.elab-big {
    font-family: var(--elab-font-body);
    font-size: var(--elab-fs-lg);
    line-height: var(--elab-lh-relaxed);
    color: var(--elab-text-secondary);
    font-weight: var(--elab-fw-normal);
}

.elab-small {
    font-size: var(--elab-fs-sm);
    color: var(--elab-text-muted);
}

.elab-muted   { color: var(--elab-text-muted); }
.elab-soft    { color: var(--elab-text-soft); }
.elab-mono    { font-family: var(--elab-font-mono); font-size: 0.92em; }

.elab-kbd {
    display: inline-block;
    padding: 1px 6px;
    background: var(--elab-bg-soft2);
    border: 1px solid var(--elab-border);
    border-bottom-width: 2px;
    border-radius: var(--elab-radius-xs);
    font-family: var(--elab-font-mono);
    font-size: 11px;
    color: var(--elab-text);
    line-height: 1.4;
}

.elab-code {
    padding: 1px 6px;
    background: var(--elab-bg-soft2);
    border-radius: var(--elab-radius-xs);
    font-family: var(--elab-font-mono);
    font-size: 0.9em;
    color: var(--elab-green-darker);
}

.elab-blockquote {
    margin: 0 0 var(--elab-space-4);
    padding: var(--elab-space-3) var(--elab-space-4);
    border-left: 3px solid var(--elab-green);
    background: var(--elab-green-soft2);
    border-radius: 0 var(--elab-radius-sm) var(--elab-radius-sm) 0;
    color: var(--elab-text-secondary);
    font-family: var(--elab-font-body);
    font-style: italic;
    line-height: var(--elab-lh-relaxed);
}


/* ─── 4. Nupud ──────────────────────────────────────────────── */

.elab-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--elab-space-2);
    padding: 9px 16px;
    border-radius: var(--elab-radius-md);
    border: 1.5px solid transparent;
    background: transparent;
    color: var(--elab-text);
    font-family: var(--elab-font);
    font-size: var(--elab-fs-base);
    font-weight: var(--elab-fw-semibold);
    line-height: 1.3;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--elab-trans-base);
    -webkit-appearance: none;
}

.elab-btn:focus-visible {
    outline: none;
    box-shadow: var(--elab-shadow-focus-soft);
}

.elab-btn:disabled,
.elab-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.elab-btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* Variants */
.elab-btn--primary {
    background: var(--elab-green);
    color: var(--elab-text-inverse);
    border-color: var(--elab-green);
}

/* BeTheme override — `button:hover { color: <grey> }` peavad olema sundjõuga ümber */
.elab-btn--primary,
button.elab-btn--primary {
    color: var(--elab-text-inverse) !important;
}

.elab-btn--primary:hover,
.elab-btn--primary:focus,
button.elab-btn--primary:hover,
button.elab-btn--primary:focus {
    background: var(--elab-green-dark) !important;
    border-color: var(--elab-green-dark) !important;
    color: var(--elab-text-inverse) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 159, 4, 0.25);
}

.elab-btn--secondary {
    background: var(--elab-bg);
    color: var(--elab-text);
    border-color: var(--elab-border-strong);
}

/* Hover = visuaalselt sama (ei tumeda raami ega sinist teksti). BeTheme
 * a:hover/button:hover värvimuutused sundjõuga maha (vrd --primary muster). */
.elab-btn--secondary:hover,
.elab-btn--secondary:focus,
a.elab-btn--secondary:hover,
a.elab-btn--secondary:focus,
button.elab-btn--secondary:hover,
button.elab-btn--secondary:focus {
    background: var(--elab-bg);
    border-color: var(--elab-border-strong);
    color: var(--elab-text) !important;
}

.elab-btn--ghost {
    background: transparent;
    color: var(--elab-text-muted);
    border-color: var(--elab-border);
}

.elab-btn--ghost:hover,
.elab-btn--ghost:focus {
    background: var(--elab-bg-soft2);
    border-color: var(--elab-border-strong);
    color: var(--elab-text);
}

.elab-btn--danger {
    background: var(--elab-bg);
    color: var(--elab-danger);
    border-color: #fde2e2;
}

.elab-btn--danger:hover,
.elab-btn--danger:focus {
    background: var(--elab-danger-soft);
    border-color: #f5c2c2;
    color: var(--elab-danger);
}

.elab-btn--link {
    background: transparent;
    color: var(--elab-green-dark);
    border-color: transparent;
    padding: 0;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.elab-btn--link:hover,
.elab-btn--link:focus {
    color: var(--elab-green-darker);
    text-decoration-thickness: 2px;
    transform: none;
}

/* Sizes */
.elab-btn--sm { padding: 6px 12px; font-size: var(--elab-fs-sm); border-radius: var(--elab-radius-sm); }
.elab-btn--sm svg { width: 14px; height: 14px; }

.elab-btn--lg { padding: 12px 22px; font-size: var(--elab-fs-md); }
.elab-btn--lg svg { width: 18px; height: 18px; }

.elab-btn--block { width: 100%; justify-content: center; }

.elab-btn--icon {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
}

.elab-btn--icon.elab-btn--sm { width: 28px; height: 28px; }

/* --- Action-modid (lavastuse / inimese action-rida) -----------
 * Kasutusel: lavastuse header'is + production card'is + tulevikus mujal.
 * Värvi-semantika: clap = roheline (peamine), list = sinine (nimekirja-rolli),
 * seen = neutraalne raamiga, is-on olekus roheline.
 */

.elab-btn--clap          { background: var(--elab-green); border-color: var(--elab-green); color: #fff; }
.elab-btn--clap:hover    { background: var(--elab-green-hover); border-color: var(--elab-green-hover); color: #fff; }

.elab-btn--list          { background: var(--elab-blue); border-color: var(--elab-blue); color: #fff; }
.elab-btn--list:hover    { background: var(--elab-blue-hover); border-color: var(--elab-blue-hover); color: #fff; }

.elab-btn--seen          { background: transparent; border-color: var(--elab-border); color: var(--elab-text-secondary); }
.elab-btn--seen:hover    { color: var(--elab-text); border-color: var(--elab-border-strong); }
.elab-btn--seen.is-on    { background: var(--elab-green); border-color: var(--elab-green); color: #fff; }
.elab-btn--seen.is-on:hover { background: var(--elab-green-hover); border-color: var(--elab-green-hover); color: #fff; }

/* `--favorite` (lemmik — inimese/teatri header'is) — sama muster kui `--seen`. */
.elab-btn--favorite          { background: transparent; border-color: var(--elab-border); color: var(--elab-text-secondary); }
.elab-btn--favorite:hover    { color: var(--elab-text); border-color: var(--elab-border-strong); }
.elab-btn--favorite.is-on    { background: var(--elab-green); border-color: var(--elab-green); color: #fff; }
.elab-btn--favorite.is-on:hover { background: var(--elab-green-hover); border-color: var(--elab-green-hover); color: #fff; }

/* `--thanks` (ütle aitäh — inimese header'is) — sama muster kui `--clap` (alati roheline). */
.elab-btn--thanks        { background: var(--elab-green); border-color: var(--elab-green); color: #fff; }
.elab-btn--thanks:hover  { background: var(--elab-green-hover); border-color: var(--elab-green-hover); color: #fff; }

/* Tumedale taustale (lavastuse/inimese header) — `--seen` ja `--favorite` neutraalne stiil tumedaks.
 * Clap, list, thanks jäävad samaks (juba küllaltki kontrastsed). */
.elab-btn--seen.elab-btn--on-dark         { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.7); }
.elab-btn--seen.elab-btn--on-dark:hover   { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.elab-btn--seen.elab-btn--on-dark.is-on   { background: var(--elab-green); border-color: var(--elab-green); color: #fff; }

.elab-btn--favorite.elab-btn--on-dark         { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.7); }
.elab-btn--favorite.elab-btn--on-dark:hover   { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.elab-btn--favorite.elab-btn--on-dark.is-on   { background: var(--elab-green); border-color: var(--elab-green); color: #fff; }


/* ─── 5. Lingid ─────────────────────────────────────────────── */

.elab-link {
    color: var(--elab-text-link, #00698c);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--elab-trans-fast);
}

.elab-link:hover {
    color: var(--elab-blue, #009ce2);
    text-decoration-thickness: 2px;
}

.elab-link--muted {
    color: var(--elab-text-muted);
    text-decoration-color: rgba(107, 114, 128, 0.4);
}

.elab-link--muted:hover { color: var(--elab-text); }

.elab-link--unstyled {
    color: inherit;
    text-decoration: none;
}

/* Icon-link: ikoon + tekst, ühel real, korrektse joonduse ja vahega.
   Kasutus: <a class="elab-icon-link"><svg.../> Tekst</a>
   Aktiivne (nt vaate-valik): lisa `is-active` / `--active`. */
.elab-icon-link {
    display: inline-flex;
    align-items: center;
    gap: var(--elab-space-2);
    line-height: 1;
    font-size: var(--elab-fs-sm);
    font-weight: var(--elab-fw-medium);
    color: var(--elab-text-secondary);
    text-decoration: none;
    transition: color var(--elab-trans-fast);
}

.elab-icon-link > svg,
.elab-icon-link .elab-icon-link__icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.elab-icon-link:hover { color: var(--elab-green-dark); }

.elab-icon-link--active,
.elab-icon-link.is-active {
    color: var(--elab-green-dark);
    font-weight: var(--elab-fw-semibold);
}

.elab-icon-link--active:hover,
.elab-icon-link.is-active:hover { color: var(--elab-green-darker); }

/* Muted variant (nt sekundaarne tegevuslink) */
.elab-icon-link--muted { color: var(--elab-text-muted); }
.elab-icon-link--muted:hover { color: var(--elab-text); }

.elab-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--elab-space-2);
    align-items: center;
    list-style: none;
    margin: 0 0 var(--elab-space-4);
    padding: 0;
    font-size: var(--elab-fs-sm);
    color: var(--elab-text-muted);
}

.elab-breadcrumb li:not(:last-child)::after {
    content: '›';
    margin-left: var(--elab-space-2);
    color: var(--elab-text-soft);
}

.elab-breadcrumb a { color: var(--elab-text-muted); text-decoration: none; }
.elab-breadcrumb a:hover { color: var(--elab-green-dark); }
.elab-breadcrumb li:last-child { color: var(--elab-text); font-weight: var(--elab-fw-medium); }


/* ─── 6. Vormid ─────────────────────────────────────────────── */

.elab-form-row {
    display: flex;
    flex-direction: column;
    gap: var(--elab-space-1);
    margin-bottom: var(--elab-space-4);
}

.elab-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--elab-space-4);
}

@media (max-width: 600px) {
    .elab-form-grid { grid-template-columns: 1fr; }
}

.elab-label {
    display: block;
    font-size: var(--elab-fs-sm);
    font-weight: var(--elab-fw-semibold);
    color: var(--elab-text);
    margin-bottom: var(--elab-space-1);
    letter-spacing: 0.02em;
}

.elab-required { color: var(--elab-green-dark); font-weight: var(--elab-fw-bold); margin-left: 2px; }

.elab-help {
    font-size: var(--elab-fs-sm);
    color: var(--elab-text-muted);
    margin-top: var(--elab-space-1);
    line-height: var(--elab-lh-snug);
}

.elab-input,
.elab-textarea,
.elab-select,
.elab-ui input.elab-input,
.elab-ui textarea.elab-textarea,
.elab-ui select.elab-select {
    width: 100%;
    padding: 10px 12px !important;
    border: 1.5px solid var(--elab-border) !important;
    border-radius: var(--elab-radius-md) !important;
    font-family: var(--elab-font) !important;
    font-size: var(--elab-fs-base) !important;
    line-height: var(--elab-lh-snug) !important;
    color: var(--elab-text) !important;
    background: var(--elab-bg) !important;
    transition: border-color var(--elab-trans-fast), box-shadow var(--elab-trans-fast);
    -webkit-appearance: none;
    box-shadow: none !important;
    margin: 0 !important;
    height: auto !important;
}

.elab-textarea {
    resize: vertical;
    min-height: 72px;
}

/*
 * 0.21.x — select'i ikoon: solid kolmnurk + chevron kombo, hover'imisel värvub
 * brand-rohelisseks. URL-encoded SVG (kõik # → %23, < → %3C, jne) — hoiab CSS-i
 * iseseisvana (mitte eraldi pildi-fail).
 */
.elab-select {
    /* Down-arrow kolmnurk (10×6 px, --elab-text-muted #6b7280) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M5 6L0 0h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 10px 6px !important;
    padding-right: 36px !important;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* Hover/focus — kolmnurk värvub brand-rohelisseks */
.elab-select:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%234a9f04' d='M5 6L0 0h10z'/%3E%3C/svg%3E") !important;
}

.elab-input:focus,
.elab-textarea:focus,
.elab-select:focus,
.elab-ui input.elab-input:focus,
.elab-ui textarea.elab-textarea:focus,
.elab-ui select.elab-select:focus {
    border-color: var(--elab-green) !important;
    box-shadow: var(--elab-shadow-focus-soft) !important;
    outline: none !important;
}

.elab-input--error {
    border-color: var(--elab-danger) !important;
}

.elab-input--error:focus {
    box-shadow: 0 0 0 3px rgba(179, 36, 36, 0.12) !important;
}

/* Pretty checkbox */
.elab-checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--elab-space-2);
    cursor: pointer;
    user-select: none;
}

.elab-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.elab-checkbox__box {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--elab-border-strong);
    border-radius: var(--elab-radius-xs);
    background: var(--elab-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--elab-trans-fast);
    margin-top: 2px;
}

.elab-checkbox__box::after {
    content: '';
    width: 10px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) scale(0);
    transform-origin: center;
    transition: transform var(--elab-trans-bounce);
    margin-bottom: 2px;
}

.elab-checkbox input[type="checkbox"]:checked ~ .elab-checkbox__box {
    background: var(--elab-green);
    border-color: var(--elab-green);
}

.elab-checkbox input[type="checkbox"]:checked ~ .elab-checkbox__box::after {
    transform: rotate(-45deg) scale(1);
}

.elab-checkbox input[type="checkbox"]:focus-visible ~ .elab-checkbox__box {
    box-shadow: var(--elab-shadow-focus-soft);
}

/* Pretty radio */
.elab-radio {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--elab-space-2);
    cursor: pointer;
    user-select: none;
}

.elab-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.elab-radio__dot {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--elab-border-strong);
    border-radius: 50%;
    background: var(--elab-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--elab-trans-fast);
    margin-top: 2px;
}

.elab-radio__dot::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--elab-green);
    transform: scale(0);
    transition: transform var(--elab-trans-bounce);
}

.elab-radio input[type="radio"]:checked ~ .elab-radio__dot {
    border-color: var(--elab-green);
}

.elab-radio input[type="radio"]:checked ~ .elab-radio__dot::after {
    transform: scale(1);
}

/* Toggle switch */
.elab-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--elab-space-3);
    cursor: pointer;
    user-select: none;
}

.elab-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.elab-toggle__track {
    flex: 0 0 auto;
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--elab-border-strong);
    border-radius: var(--elab-radius-full);
    transition: background var(--elab-trans-base);
}

.elab-toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform var(--elab-trans-bounce);
}

.elab-toggle input[type="checkbox"]:checked ~ .elab-toggle__track {
    background: var(--elab-green);
}

.elab-toggle input[type="checkbox"]:checked ~ .elab-toggle__track .elab-toggle__thumb {
    transform: translateX(16px);
}

.elab-toggle input[type="checkbox"]:focus-visible ~ .elab-toggle__track {
    box-shadow: var(--elab-shadow-focus);
}


/* ─── 7. Listid ─────────────────────────────────────────────── */

.elab-list {
    list-style: none;
    margin: 0 0 var(--elab-space-4);
    padding: 0;
}

.elab-list--bulleted {
    list-style: disc;
    padding-left: var(--elab-space-5);
}

.elab-list--bulleted li {
    margin: 0 0 var(--elab-space-2);
    line-height: var(--elab-lh-relaxed);
}

.elab-list--ordered {
    list-style: decimal;
    padding-left: var(--elab-space-5);
}

.elab-list--ordered li {
    margin: 0 0 var(--elab-space-2);
    line-height: var(--elab-lh-relaxed);
}

/* Content list — divider'iga rida (lavastuste loend artikli sees) */
.elab-list--divided {
    border-top: 1px solid var(--elab-border-soft);
}

.elab-list--divided li {
    display: flex;
    align-items: center;
    gap: var(--elab-space-3);
    padding: var(--elab-space-3) 0;
    border-bottom: 1px solid var(--elab-border-soft);
}

.elab-list--divided .elab-list-item__title {
    flex: 1;
    font-size: var(--elab-fs-base);
    font-weight: var(--elab-fw-medium);
    color: var(--elab-text);
}

.elab-list--divided .elab-list-item__meta {
    color: var(--elab-text-muted);
    font-size: var(--elab-fs-sm);
}

/* Definition list — lihtne 2-veeruline grid (label + väärtus).
 * Kui vajad border-separated rikkalikumat versiooni (uppercase label,
 * mobile-collapse), vaata theme'i `.elab-cpt-meta` (elab-content.css).
 * See on tahtlikult eraldi: BeTheme-konteksti `!important`-resetid
 * ei mahu kit'i isolatsiooni. */
.elab-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--elab-space-2) var(--elab-space-4);
    margin: 0;
}

.elab-dl dt {
    color: var(--elab-text-muted);
    font-size: var(--elab-fs-sm);
    font-weight: var(--elab-fw-medium);
}

.elab-dl dd {
    margin: 0;
    color: var(--elab-text);
    font-size: var(--elab-fs-base);
}

/* Widget list — pisem, kompaktsem (sidebari jaoks) */
.elab-widget-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.elab-widget-list li {
    padding: var(--elab-space-2) 0;
    border-bottom: 1px solid var(--elab-border-soft);
    font-size: var(--elab-fs-sm);
    line-height: var(--elab-lh-snug);
}

.elab-widget-list li:last-child { border-bottom: none; }

.elab-widget-list a {
    color: var(--elab-text);
    text-decoration: none;
    display: flex;
}

.elab-widget-list a:hover { color: var(--elab-blue, #009ce2); }

.elab-widget-list .elab-widget-list__count {
    color: var(--elab-text-soft);
    font-variant-numeric: tabular-nums;
    font-size: var(--elab-fs-xs);
}


/* ─── 8. Kaardid ────────────────────────────────────────────── */

.elab-card {
    background: var(--elab-bg);
    border: 1px solid var(--elab-border);
    border-radius: var(--elab-radius-lg);
    padding: var(--elab-space-5);
    box-shadow: var(--elab-shadow-sm);
    transition: box-shadow var(--elab-trans-base);
}

.elab-card--elevated { box-shadow: var(--elab-shadow-md); }

.elab-card--hover:hover {
    box-shadow: var(--elab-shadow-md);
    border-color: var(--elab-border-strong);
}

.elab-card__title {
    margin: 0 0 var(--elab-space-2);
    font-size: var(--elab-fs-lg);
    font-weight: var(--elab-fw-semibold);
}

.elab-card__body { color: var(--elab-text-secondary); }

.elab-card__footer {
    margin-top: var(--elab-space-4);
    padding-top: var(--elab-space-3);
    border-top: 1px solid var(--elab-border-soft);
    display: flex;
    gap: var(--elab-space-2);
    justify-content: flex-end;
}

/* Entity-card — lavastus / inimene / teater (üldine vorm). */
.elab-entity-card {
    display: flex;
    gap: var(--elab-space-3);
    padding: var(--elab-space-3);
    background: var(--elab-bg);
    border: 1px solid var(--elab-border);
    border-radius: var(--elab-radius-md);
    transition: all var(--elab-trans-base);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}


.elab-entity-card__thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: var(--elab-radius-sm);
    object-fit: cover;
    background: var(--elab-bg-soft2);
}

.elab-entity-card__thumb--avatar {
    border-radius: 50%;
}

/* Logo-thumb — valge taust + sissepoole padding, kontain (mitte cover).
 * Kasutusel teater/tootja-kaartidel, kus logo asemel ei tahaks crop'i. */
.elab-entity-card__thumb--logo {
    background: var(--elab-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

.elab-entity-card__thumb--logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Tühja thumb'i placeholder — kui kaardile pole pilti antud,
 * neutraalne kast, et list ei "hüppaks" päisesse. */
.elab-entity-card__thumb:empty,
span.elab-entity-card__thumb {
    background: var(--elab-bg-soft2);
    border: 1px solid var(--elab-border-soft);
}

.elab-entity-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.elab-entity-card__title {
    display: block;
    font-size: var(--elab-fs-md);
    font-weight: var(--elab-fw-semibold);
    color: var(--elab-text);
    line-height: var(--elab-lh-tight);
    margin-bottom: 3px;
}

.elab-entity-card__meta {
    color: var(--elab-text-muted);
    font-size: var(--elab-fs-sm);
    line-height: var(--elab-lh-snug);
    display: flex;
    flex-wrap: wrap;
    gap: var(--elab-space-1);
}

.elab-entity-card__meta a {
    color: var(--elab-green-dark);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(74, 159, 4, 0.35);
    text-underline-offset: 2px;
}

.elab-entity-card__meta a:hover {
    color: var(--elab-green);
    text-decoration-color: var(--elab-green);
}

/* `--static` — kaart, mis pole link (nt avaldamata isiku kaart).
 * Eemaldab cursor + hover-efektid, et kasutaja ei oodaks navigatsiooni. */
.elab-entity-card--static {
    cursor: default;
}

.elab-entity-card--static:hover {
    transform: none;
    background: var(--elab-bg);
    border-color: var(--elab-border);
}


/* ─── 8.5 Domain primitiivid (lavastus / inimene / teater) ──── *
 *
 * Komponendid, mida kasutatakse CPT detail-vaadetes JA kaartides ühtemoodi.
 * Kasutuskohad: lavastuse single header, production card (Hinnangud, Nähtud,
 * Lemmikud, Nimekirjad), tulevikus inimese/teatri kaardid.
 *
 * Disainiprintsiip: VAIKEVÄÄRTUSED on heleda tausta jaoks (kaardid, content).
 * Tumeda tausta (lavastuse header) jaoks lisada `--on-dark` mod-klass.
 * Kontekst-CSS (elab-header.css, production-card.css) ei tohi neid primitiive
 * ümber-kujundada — ainult layout-grid'i ja paigutust lisada.
 * ───────────────────────────────────────────────────────────── */

/* --- Title row (pealkiri + rating samal real) ----------------- */

.elab-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--elab-space-4);
    flex-wrap: wrap;
}

.elab-title-row__main {
    flex: 1;
    min-width: 200px;
}

.elab-title-row__aside {
    flex-shrink: 0;
}

/* --- Meta-rida (info-tekst koos sinise lingiga) --------------- */

.elab-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--elab-text-muted);
    line-height: 1.4;
}

.elab-meta a       { color: var(--elab-blue); font-weight: var(--elab-fw-bold); text-decoration: none; }
.elab-meta a:hover { color: var(--elab-blue-hover); }
.elab-meta strong  { color: var(--elab-text); font-weight: var(--elab-fw-medium); }
.elab-meta .dot    { color: var(--elab-text-soft); }

.elab-meta--on-dark         { color: rgba(255, 255, 255, 0.7); }
.elab-meta--on-dark strong  { color: #fff; }
.elab-meta--on-dark .dot    { color: rgba(255, 255, 255, 0.5); }
/* Link-värv jääb sama (--elab-blue) — sinine töötab nii heledal kui tumedal taustal. */

/* --- Chip (žanr / silt — pill-stiilis ümmargune ääris) -------- */

.elab-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--elab-space-2);
}

.elab-chips > li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.elab-chips > li::before,
.elab-chips > li::marker {
    content: none;
}

/* BeTheme override booster — `.the_content_wrapper ul` ja `.the_content_wrapper ul li ul`
 * defineerivad ul/li list-stiili ja paddingi `(0,1,1)` ja `(0,1,2)` spetsifikatsiooniga,
 * mis võidab `.elab-chips`-i (0,1,0) ja `.elab-chips > li` (0,1,1). `#Wrapper`-ga
 * tõstame spetsifikatsuse `(1,1,1)` ja `(1,1,2)`-ks, et UI Kit reset võidaks. */
#Wrapper ul.elab-chips,
#Wrapper ol.elab-chips {
    list-style: none;
    margin: 0;
    padding: 0;
}

#Wrapper ul.elab-chips > li,
#Wrapper ol.elab-chips > li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.elab-chip {
    display: inline-flex;
    align-items: center;
    font-size: var(--elab-fs-sm);
    line-height: 1.2;
    padding: 5px 15px;
    border-radius: var(--elab-radius-full);
    border: 1px solid var(--elab-border);
    color: var(--elab-text-secondary);
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--elab-trans-fast), border-color var(--elab-trans-fast), color var(--elab-trans-fast);
}

.elab-chip:hover {
    background: var(--elab-bg-hover);
    border-color: var(--elab-border-strong);
    color: var(--elab-text);
}

.elab-chip--on-dark {
    border: 0;
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    font-weight: 600;
}

.elab-chip--on-dark:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* `.elab-primary-tag` — chip-ide rea ette tõstetud primary-tag link.
 * Inimese kaardil = Riik (taxonomy `sunnikoht`); lavastuse kaardil = liik
 * (taxonomy `lavastuse-liik`). Visuaalselt eristub chip-ist — sinine link,
 * ilma piirjooneta, suurema fondiga. */
.elab-primary-tag {
    display: inline-flex;
    align-items: center;
    font-size: var(--elab-fs-sm);
    font-weight: var(--elab-fw-semibold);
    line-height: 1.2;
    color: var(--elab-blue);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
    transition: color var(--elab-trans-fast);
}

.elab-primary-tag:hover,
.elab-primary-tag:focus-visible {
    color: var(--elab-blue-hover);
    text-decoration: underline;
}

.elab-primary-tag--on-dark {
    color: #fff;
}

.elab-primary-tag--on-dark:hover,
.elab-primary-tag--on-dark:focus-visible {
    color: rgba(255, 255, 255, 0.85);
}

/* --- Poster (CPT esikujundus — 2:3 portree) ------------------- */

.elab-poster {
    display: block;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: var(--elab-radius-md);
    background: var(--elab-bg-hover);
    flex-shrink: 0;
}

.elab-poster img {
    display: block;
    width: 100% !important;       /* BeTheme/mfn `img { max-width: 100% }` võib override'da — vajab !important */
    height: 100% !important;      /* sama — BeTheme jätab `height: auto`-le, mis murrab cover-fill'i */
    object-fit: cover;             /* mittetraditsioonilised aspect-ratiod = crop, mitte letterbox */
}

.elab-poster--sm  { width: 120px; }
.elab-poster--md  { width: 160px; }
.elab-poster--lg  { width: 200px; }
.elab-poster--xl  { width: 240px; }

/* Tumeda tausta variant — lavastuse header'i poster (dark sektsioonis).
 * Tausta/raamita — pilt täidab kogu poster-pinda, läbipaistev fallback. */
.elab-poster--on-dark {
    background: transparent;
    border: 0;
}

/* Tühi/puudu poster — placeholder esimese tähega või ikooniga. */
.elab-poster--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--elab-font-display);
    font-size: 64px;
    font-weight: var(--elab-fw-semibold);
    color: var(--elab-text-soft);
    background: var(--elab-bg-soft2);
}

.elab-poster--empty.elab-poster--on-dark {
    background: linear-gradient(135deg, #011921, #023040);
    color: rgba(255, 255, 255, 0.25);
}

/* --- Rating (avg / user — täht + number + label) -------------- */

.elab-rating-group {
    display: flex;
    gap: var(--elab-space-5);
    align-items: flex-start;
}

.elab-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    min-width: 70px;
    line-height: 1;
}

/* Button-vaade (klikitav "Hinda" CTA). Reset native button stiilid + hover-tõste.
 * NB: `background: none` ka :hover all (BeTheme/parent CSS lisab muidu hover-bg). */
button.elab-rating {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    transition: transform var(--elab-trans-base);
}

button.elab-rating:hover,
button.elab-rating:focus,
button.elab-rating:active {
    background: none;
    transform: translateY(-1px);
}

.elab-rating__label {
    font-size: var(--elab-fs-xs);
    font-weight: var(--elab-fw-medium);
    color: var(--elab-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 4px;
}

.elab-rating__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: var(--elab-font-display);
}

.elab-rating__star {
    flex-shrink: 0;
    align-self: center;
}

.elab-rating__num {
    font-family: var(--elab-font-display, "Fraunces", serif);
    font-weight: var(--elab-fw-semibold);
    color: var(--elab-text);
    line-height: 1;
}

.elab-rating__num-max {
    font-size: var(--elab-fs-sm);
    font-weight: var(--elab-fw-normal);
    color: var(--elab-text-muted);
}

.elab-rating__count {
    font-size: var(--elab-fs-xs);
    color: var(--elab-text-muted);
    margin-top: 3px;
}

.elab-rating__cta {
    font-size: var(--elab-fs-sm);
    color: var(--elab-text-muted);
    white-space: nowrap;
}

.elab-rating__cta:hover { color: var(--elab-text); }

/* Värv-modid: avg = roheline (saidi enda hinne), user = sinine (kasutaja oma) */
.elab-rating--avg  .elab-rating__star { color: var(--elab-green); }
.elab-rating--user .elab-rating__star { color: var(--elab-blue); }

/* Empty state — lavastus pole hinnanguid saanud / kasutaja pole hinnanud.
 * SVG renderdatakse stroke="currentColor" + fill="none" (vt template).
 * Värv jääb sama (--elab-green/--elab-blue), aga number/label tuhmim.
 * `__star--empty` direct-klass on vajalik state-swap (`.is-swappable`) jaoks,
 * kus SVG võib elada ka viewer-state'is samal nupul (`.is-empty` rooti klass
 * ei pruugi kehtida hover'is). */
.elab-rating.is-empty .elab-rating__num  { color: var(--elab-text-muted); }
.elab-rating--on-dark.is-empty .elab-rating__num  { color: rgba(255, 255, 255, 0.55); }
.elab-rating__star--empty { opacity: 0.55; }
.elab-rating--on-dark .elab-rating__star--empty { opacity: 0.6; }

/* Hover-swap — Hinnangud-alamlehe muster: vaadeldava hinne vaikimisi näha,
 * vaatleja enda hinne nähtaval hover'iga. Markup'is `.elab-rating__state`
 * wrapper'id default- ja viewer-state'i jaoks, `display: contents` säilitab
 * `.elab-rating` flex-layout'i (row + label flex children'itena). */
.elab-rating__state { display: contents; }

.elab-rating.is-swappable .elab-rating__state--viewer,
.elab-rating.is-swappable .elab-rating__label--viewer { display: none; }

.elab-rating.is-swappable:hover  .elab-rating__state--default,
.elab-rating.is-swappable:focus-visible .elab-rating__state--default,
.elab-rating.is-swappable:hover  .elab-rating__label--default,
.elab-rating.is-swappable:focus-visible .elab-rating__label--default { display: none; }

.elab-rating.is-swappable:hover  .elab-rating__state--viewer,
.elab-rating.is-swappable:focus-visible .elab-rating__state--viewer { display: contents; }

.elab-rating.is-swappable:hover  .elab-rating__label--viewer,
.elab-rating.is-swappable:focus-visible .elab-rating__label--viewer { display: block; }

/* Suurus-modid (vaikimisi = "md") */
.elab-rating__star    { width: 18px; height: 18px; }
.elab-rating__num     { font-size: var(--elab-fs-xl); }

.elab-rating--lg .elab-rating__star { width: 22px; height: 22px; }
.elab-rating--lg .elab-rating__num  { font-size: 28px; }

.elab-rating--sm .elab-rating__star { width: 14px; height: 14px; margin: -1px 0 0 0; }
.elab-rating--sm .elab-rating__num  { font-size: var(--elab-fs-lg); }

/* Tumeda tausta variant */
.elab-rating--on-dark .elab-rating__label    { color: rgba(255, 255, 255, 0.7); }
.elab-rating--on-dark .elab-rating__num      { color: #fff; }
.elab-rating--on-dark .elab-rating__num-max  { color: rgba(255, 255, 255, 0.7); font-weight: 300; }
.elab-rating--on-dark .elab-rating__count    { color: rgba(255, 255, 255, 0.7); }
.elab-rating--on-dark .elab-rating__cta      { color: rgba(255, 255, 255, 0.7); }
.elab-rating--on-dark .elab-rating__cta:hover{ color: #fff; }


/* ─── 9. Badges + sildid ────────────────────────────────────── */

.elab-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--elab-radius-full);
    font-size: var(--elab-fs-xs);
    font-weight: var(--elab-fw-semibold);
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.elab-badge svg { width: 11px; height: 11px; }

.elab-badge--default  { background: var(--elab-bg-soft2); color: var(--elab-text-secondary); }
.elab-badge--success  { background: var(--elab-green-soft); color: var(--elab-green-darker); }
.elab-badge--info     { background: var(--elab-info-soft); color: var(--elab-info); }
.elab-badge--warning  { background: var(--elab-warning-soft); color: var(--elab-warning); }
.elab-badge--danger   { background: var(--elab-danger-soft); color: var(--elab-danger); }
.elab-badge--accent   { background: #fef3c7; color: #92400e; }     /* TOP-tag stiilis */

.elab-badge--dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* "Mängukavas" / "Laureaat" / "TOP" tüpiline kasutus */
.elab-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--elab-radius-full);
    font-size: var(--elab-fs-xs);
    font-weight: var(--elab-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.elab-tag--live   { background: var(--elab-green-soft); color: var(--elab-green-darker); }
.elab-tag--award  { background: #fef3c7; color: #92400e; }
.elab-tag--top    { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; }
.elab-tag--muted  { background: var(--elab-bg-soft, #f1f3f4); color: var(--elab-text-muted, #6b7280); }


/* ─── 10. Modal ─────────────────────────────────────────────── */

.elab-modal {
    position: fixed;
    inset: 0;
    z-index: var(--elab-z-modal);
    background: rgba(20, 24, 28, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--elab-space-5);
    animation: elab-overlay-in 0.2s ease-out;
}

@keyframes elab-overlay-in { from { opacity: 0; } to { opacity: 1; } }

.elab-modal[hidden] { display: none; }

.elab-modal.is-closing { animation: elab-overlay-out 0.18s ease-in forwards; }
@keyframes elab-overlay-out { to { opacity: 0; } }

.elab-modal__dialog {
    background: var(--elab-bg);
    width: 520px;
    max-width: 100%;
    max-height: calc(100vh - 40px);
    border-radius: var(--elab-radius-xl);
    box-shadow: var(--elab-shadow-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: elab-dialog-in var(--elab-trans-slow);
    outline: none;
}

@keyframes elab-dialog-in {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.elab-modal.is-closing .elab-modal__dialog { animation: elab-dialog-out 0.18s ease-in forwards; }
@keyframes elab-dialog-out { to { opacity: 0; transform: translateY(8px) scale(0.98); } }

.elab-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--elab-space-4);
    padding: var(--elab-space-5) var(--elab-space-6) var(--elab-space-4);
    border-bottom: 1px solid var(--elab-border-soft);
}

.elab-modal__title {
    margin: 0 0 4px;
    font-size: var(--elab-fs-lg);
    font-weight: var(--elab-fw-semibold);
    color: var(--elab-text);
    line-height: var(--elab-lh-tight);
}

.elab-modal__subtitle {
    margin: 0;
    font-size: var(--elab-fs-sm);
    color: var(--elab-text-muted);
    line-height: var(--elab-lh-snug);
}

.elab-modal__close {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: var(--elab-radius-md);
    background: transparent;
    color: var(--elab-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--elab-trans-fast);
}

.elab-modal__close svg { width: 16px; height: 16px; }
.elab-modal__close:hover, .elab-modal__close:focus {
    background: var(--elab-bg-soft2);
    color: var(--elab-text);
}

.elab-modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--elab-space-5) var(--elab-space-6);
    scrollbar-width: thin;
    scrollbar-color: #c5cad1 transparent;
}

.elab-modal__body::-webkit-scrollbar { width: 8px; }
.elab-modal__body::-webkit-scrollbar-track { background: transparent; }
.elab-modal__body::-webkit-scrollbar-thumb {
    background-color: #c5cad1;
    border-radius: 4px;
    border: 2px solid var(--elab-bg);
}

.elab-modal__footer {
    display: flex;
    gap: var(--elab-space-2);
    justify-content: flex-end;
    padding: var(--elab-space-4) var(--elab-space-6);
    border-top: 1px solid var(--elab-border-soft);
    background: var(--elab-bg);
}

@media (max-width: 600px) {
    .elab-modal { padding: 0; align-items: flex-end; }
    .elab-modal__dialog {
        width: 100%;
        max-height: 92vh;
        border-radius: var(--elab-radius-xl) var(--elab-radius-xl) 0 0;
        animation: elab-dialog-in-mobile var(--elab-trans-slow);
    }
    @keyframes elab-dialog-in-mobile {
        from { opacity: 0; transform: translateY(40px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}


/* ─── 11. Akordion ──────────────────────────────────────────── */

.elab-accordion__item {
    border-bottom: 1px solid var(--elab-border-soft);
}

.elab-accordion__item:first-child { border-top: 1px solid var(--elab-border-soft); }

.elab-accordion__header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--elab-space-3);
    padding: var(--elab-space-3) var(--elab-space-2);
    background: transparent;
    border: none;
    color: var(--elab-text);
    font-family: var(--elab-font);
    font-size: var(--elab-fs-base);
    font-weight: var(--elab-fw-medium);
    cursor: pointer;
    text-align: left;
    transition: background var(--elab-trans-fast);
}

.elab-accordion__header:hover { background: var(--elab-bg-hover); }

.elab-accordion__header-text { flex: 1; }

.elab-accordion__chevron {
    width: 16px;
    height: 16px;
    color: var(--elab-text-muted);
    transition: transform 0.2s ease;
}

.elab-accordion__item--open .elab-accordion__chevron { transform: rotate(180deg); }

.elab-accordion__body {
    padding: 0 var(--elab-space-2) var(--elab-space-4);
    color: var(--elab-text-secondary);
    line-height: var(--elab-lh-relaxed);
}

.elab-accordion__item:not(.elab-accordion__item--open) .elab-accordion__body {
    display: none;
}


/* ─── 12. Toast ─────────────────────────────────────────────── */

.elab-toast-region {
    position: fixed;
    bottom: var(--elab-space-5);
    right: var(--elab-space-5);
    z-index: var(--elab-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--elab-space-2);
    max-width: calc(100% - 40px);
    width: 360px;
    pointer-events: none;
}

.elab-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--elab-space-3);
    padding: var(--elab-space-3) var(--elab-space-4);
    border-radius: var(--elab-radius-md);
    background: #1a1a1a;
    color: #fff;
    font-size: var(--elab-fs-sm);
    line-height: var(--elab-lh-snug);
    box-shadow: var(--elab-shadow-md);
    animation: elab-toast-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes elab-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.elab-toast.is-leaving { animation: elab-toast-out 0.18s ease-in forwards; }
@keyframes elab-toast-out { to { opacity: 0; transform: translateX(20px); } }

.elab-toast--success { background: #064e3b; }
.elab-toast--error   { background: #7f1d1d; }
.elab-toast--info    { background: #1e3a5f; }
.elab-toast--warning { background: #78350f; }

.elab-toast__icon { flex: 0 0 auto; }
.elab-toast__icon svg { width: 18px; height: 18px; }
.elab-toast__body { flex: 1; }
.elab-toast__close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0;
    display: flex;
}
.elab-toast__close:hover { color: #fff; }
.elab-toast__close svg { width: 14px; height: 14px; }


/* ─── 13. Spinner / states ──────────────────────────────────── */

.elab-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--elab-border);
    border-top-color: var(--elab-green);
    border-radius: 50%;
    animation: elab-spin 0.7s linear infinite;
    display: inline-block;
}

.elab-spinner--sm { width: 14px; height: 14px; border-width: 2px; }
.elab-spinner--lg { width: 32px; height: 32px; border-width: 3px; }

@keyframes elab-spin { to { transform: rotate(360deg); } }

.elab-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--elab-space-2);
    padding: var(--elab-space-8) var(--elab-space-4);
    text-align: center;
    color: var(--elab-text-muted);
}

.elab-state__icon {
    width: 40px;
    height: 40px;
    color: var(--elab-text-soft);
}

.elab-state__title {
    margin: 0;
    font-size: var(--elab-fs-md);
    font-weight: var(--elab-fw-semibold);
    color: var(--elab-text);
}

.elab-state__hint {
    margin: 0;
    font-size: var(--elab-fs-sm);
    color: var(--elab-text-muted);
}

/* Variant `--inline`: kompaktne placeholder lehe sisu sees (mitte
 * tervet veergu täitev "empty"-state). Dashed border + soft taust.
 * Säilitab baasreegli column-layout — annab lihtsalt "kasti" raami. */
.elab-state--inline {
    padding: var(--elab-space-4);
    background: var(--elab-bg-soft);
    border: 1px dashed var(--elab-border);
    border-radius: var(--elab-radius-md);
}

.elab-state--inline .elab-state__hint { margin: 0; }


/* ─── 14. Tabel ─────────────────────────────────────────────── */

.elab-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--elab-fs-base);
}

.elab-table th,
.elab-table td {
    padding: var(--elab-space-3) var(--elab-space-3);
    text-align: left;
    border-bottom: 1px solid var(--elab-border-soft);
}

.elab-table th {
    font-size: var(--elab-fs-sm);
    font-weight: var(--elab-fw-semibold);
    color: var(--elab-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--elab-bg-soft);
}

.elab-table tr:hover td { background: var(--elab-bg-hover); }


/* ─── 15. Helpers ──────────────────────────────────────────── */

.elab-stack > * + * { margin-top: var(--elab-space-3); }
.elab-stack-lg > * + * { margin-top: var(--elab-space-5); }
.elab-stack-sm > * + * { margin-top: var(--elab-space-2); }

.elab-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--elab-space-2);
    align-items: center;
}

.elab-divider {
    height: 1px;
    background: var(--elab-border-soft);
    margin: var(--elab-space-4) 0;
    border: none;
}

.elab-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;
}

/* ─── 16. Tabid (sub-page navigatsioon) ────────────────────── */

/*
 * Sub-page tabs: kasutusel CPT detaililehtedel (lavastus, inimene, …).
 *
 * Toetab kahte HTML-struktuuri:
 *   (a) Flat — soovitatud:
 *       <nav class="elab-tabs">
 *           <a class="elab-tab is-active" href="…">Esileht</a>
 *           <a class="elab-tab" href="…">Sisu <span class="elab-tab__count">3</span></a>
 *       </nav>
 *
 *   (b) Legacy (WP-menu compat):
 *       <nav class="elab-tabs">
 *           <ul>
 *               <li class="current"><a class="elab-tab" href="…">Esileht</a></li>
 *           </ul>
 *       </nav>
 *
 * Aktiivset sakki saab märkida .is-active, .elab-tab--active või
 * parent <li> klassidega .current/.selected.
 */
.elab-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    list-style: none;
    margin: 0 0 var(--elab-space-4);
    padding: 0;
    border-bottom: 1px solid var(--elab-border);

    /* Horizontal touch-scroll, scrollbar peidetud (et 1px high-bar ei
     * tekitaks vertikaalset hüpet). Touch + drag-scroll töötavad ikka. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.elab-tabs::-webkit-scrollbar { display: none; }

/* Legacy compat: <ul> wrapper as flex container */
.elab-tabs > ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
}

.elab-tabs > ul > li {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.elab-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    margin-bottom: -1px;
    color: var(--elab-text-muted);
    font-family: var(--elab-font-body);
    font-size: 13px;
    font-weight: var(--elab-fw-normal);
    line-height: 1.3;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    transition: color var(--elab-trans-fast), border-color var(--elab-trans-fast);
    white-space: nowrap;
}

.elab-tab:hover,
.elab-tab:focus-visible {
    color: var(--elab-text);
    text-decoration: none;
    outline: none;
}

.elab-tab:focus-visible {
    box-shadow: var(--elab-shadow-focus-soft);
    border-radius: var(--elab-radius-sm) var(--elab-radius-sm) 0 0;
}

/* Aktiivne sakk — toetab kõiki kolme klassi-mustrit */
.elab-tab.is-active,
.elab-tab--active,
.elab-tabs > ul > li.current > .elab-tab,
.elab-tabs > ul > li.selected > .elab-tab {
    color: var(--elab-text);
    border-bottom-color: var(--elab-green);
    font-weight: var(--elab-fw-medium);
}

.elab-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 1px 7px;
    background: var(--elab-bg-soft2);
    color: var(--elab-text-muted);
    border-radius: var(--elab-radius-full);
    font-size: 11px;
    font-weight: var(--elab-fw-semibold);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.elab-tab.is-active .elab-tab__count,
.elab-tab--active .elab-tab__count,
.elab-tabs > ul > li.current .elab-tab__count,
.elab-tabs > ul > li.selected .elab-tab__count {
    background: var(--elab-green-soft);
    color: var(--elab-green-darker);
}

.elab-tab__icon,
.elab-tab svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

/* "Pull right" — eraldi paigutusega tab (nt "Muuda") */
.elab-tab.is-pull-right,
.elab-tabs > ul > li.is-pull-right {
    margin-left: auto;
}

@media (max-width: 600px) {
    .elab-tab { padding: 10px 12px; font-size: 12px; }
}


/* ─── 16b. Box — globaalne raamitud konteiner ───────────────── */

/*
 * `.elab-box` — taaskasutatav valge, raamitud, ümarnurkne konteiner. Kasuta
 * ükskõik kus, kus sisu vajab eraldatud "kaardi" raami (nt mängukava kuu-grupp,
 * listid, paneelid). Hoiab ainult raami — sisemine paddingu/jaotuse annab sisu.
 *
 * KONVENTSIOON (tulevikuks): kõik "box/kaardi" komponendid peaksid kasutama
 * `.elab-box`'i (üks tõe-allikas raamile) ja lisama AINULT komponendi-spetsiifilise
 * lisa-stiili teise klassiga, nt `class="elab-box elab-core-review"` /
 * `class="elab-box elab-review-form-wrap"`. ÄRA korda taust/raam/radius/vari
 * komponendi-CSS-is — kui vaja teisendada (nt tume CTA), override'i sihilikult
 * (vt `.elab-wcta`). Migreeri vanad eraldi-raamitud kastid sellele mustrile järk-järgult.
 */
.elab-box {
    background: #fff;
    border: 1px solid var(--elab-border, #e5e7eb);
    border-radius: var(--elab-radius-md, 8px);
    box-shadow: var(--elab-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
    overflow: hidden;
}


/* ─── 17. Section header (h3 + count badge) ─────────────────── */

/*
 * Sektsiooni-blokk: pealkiri (Fraunces, --elab-fs-xl) + valikuline count-badge.
 * Variant `--sm` annab kompaktse uppercase-mute pealkirja (väikse alalõike).
 *
 * Markup:
 *   <section class="elab-section">
 *       <h3 class="elab-section__title">
 *           Pealkiri <span class="elab-section__count">12</span>
 *       </h3>
 *       ... sisu ...
 *   </section>
 */
.elab-section {
    margin: 0 0 var(--elab-space-8);   /* 32px → matches `--elab-space-8` */
}

.elab-section:last-child { margin-bottom: 0; }

.elab-section__title {
    display: flex;
    align-items: center;
    gap: var(--elab-space-2);
    margin: 0 0 var(--elab-space-3);
    font-family: var(--elab-font-display);
    font-weight: var(--elab-fw-medium);
    font-size: var(--elab-fs-2xl);
    line-height: 1.2;
    color: var(--elab-text);
    letter-spacing: -0.015em;
}

/* Alapealkirja roheline ikoon (SVG) */
.elab-section__title svg {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    color: var(--elab-green);
}

.elab-section__title--sm {
    font-family: var(--elab-font-body);
    font-size: var(--elab-fs-xs);
    font-weight: var(--elab-fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--elab-text-muted);
    margin-bottom: var(--elab-space-3);
}

.elab-section__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: #e4e7e9;
    color: var(--elab-text-muted);
    border-radius: var(--elab-radius-full);
    font-family: var(--elab-font-body);
    font-size: 12px;
    font-weight: var(--elab-fw-semibold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/*
 * `.elab-section__head` — pealkirja-riba: pealkiri (+ ikoon) vasakul, action-link
 * paremal ("Vaata lisaks", "Kõik uudised", "Veel nimekirju" jne).
 *
 * Markup:
 *   <header class="elab-section__head">
 *       <h2 class="elab-section__title">
 *           <i class="bb-icon-newspaper" aria-hidden="true"></i>
 *           Artiklid:
 *       </h2>
 *       <a class="elab-section__action" href="/uudised/">Kõik uudised</a>
 *   </header>
 */
.elab-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--elab-space-4);
    margin: 0 0 var(--elab-space-4);
    padding-bottom: var(--elab-space-2);
    border-bottom: 1px solid var(--elab-border);
    flex-wrap: wrap;
}

.elab-section__head .elab-section__title {
    margin: 0;   /* head'i margin-bottom katab */
}

.elab-section__action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    color: var(--elab-green-dark);
    font-size: var(--elab-fs-sm);
    font-weight: var(--elab-fw-medium);
    text-decoration: none;
    white-space: nowrap;
    transition: gap 0.16s ease, color var(--elab-trans-fast);
}

.elab-section__action:hover,
.elab-section__action:focus {
    gap: 9px;
    color: var(--elab-green-darker);
    text-decoration: none;
}

/* el-icon ikoonid (asendavad vanu inline-SVG-sid) — sektsiooni-pealkirjas
   roheline + pealkirja-suuruses; section__action's pärib lingi värvi. */
.elab-section__title > i[class^="el-icon-"],
.elab-section__title > i[class*=" el-icon-"] {
    font-size: 0.9em;
    color: var(--elab-green);
    flex: 0 0 auto;
}
.elab-section__action > i[class^="el-icon-"],
.elab-section__action > i[class*=" el-icon-"] {
    font-size: 1.05em;
    line-height: 1;
}
/* Rating-tärni el-icon variant (nt elab-vk-feat__foot) — font-icon suurus;
   värv pärineb .elab-rating--avg/--user reeglist. */
i.elab-rating__star { font-size: 14px; line-height: 1; }


/* ─── 18. Pagination (lehe-numbrid 1, 2, 3 …) ───────────────── */

/*
 * Numerline pagination. Iga lüli on `.elab-pagination__link`.
 * Aktiivne leht: lisa `.is-active` (pointer-events off, brand-värv).
 * "Disabled" (esimene/viimane prev/next): lisa `.is-disabled`.
 *
 * Markup:
 *   <nav class="elab-pagination" aria-label="Lehekülgede navi">
 *       <a class="elab-pagination__link" href="?p=1">«</a>
 *       <a class="elab-pagination__link is-active" href="?p=2">2</a>
 *       <a class="elab-pagination__link" href="?p=3">3</a>
 *       <a class="elab-pagination__link" href="?p=3">»</a>
 *   </nav>
 */
.elab-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: var(--elab-space-3) 0 0;
}

.elab-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--elab-border);
    border-radius: var(--elab-radius-sm);
    color: var(--elab-text-secondary);
    font-size: var(--elab-fs-sm);
    font-weight: var(--elab-fw-semibold);
    text-decoration: none;
    background: var(--elab-bg);
    transition: background var(--elab-trans-fast),
                color var(--elab-trans-fast),
                border-color var(--elab-trans-fast);
}

.elab-pagination__link:hover {
    background: var(--elab-bg-soft2);
    color: var(--elab-text);
}

.elab-pagination__link.is-active {
    background: var(--elab-green);
    border-color: var(--elab-green);
    color: var(--elab-text-inverse);
    pointer-events: none;
}

.elab-pagination__link.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}


/* Global body-modal-open lukk (kasutab elab-ui.js) */
html.elab-modal-open,
body.elab-modal-open { overflow: hidden !important; }


/* ─── 14. Tooltip ───────────────────────────────────────────────
 *
 * CSS-only tooltip — kuvatakse pseudo-elemendina `[data-tooltip]` peal hover/focus.
 * Stiil: tume `--elab-text-secondary` taust, valge tekst, suunakolmnurk.
 * Suunad: vaikimisi top; `data-tooltip-placement="bottom|left|right"` muudab.
 *
 * Markup:
 *   <button data-tooltip="Olen näinud" data-tooltip-placement="top">…</button>
 *
 * NB: kasutab `position: relative` parent'il. Vajadusel parent'i CSS-i lisada.
 * Z-index sub-modal (modal 1000+, tooltip 50) — tooltip ei tohi modali peale tulla.
 */

[data-tooltip] {
    position: relative;
    /* BeTheme `be.css` seab `button { overflow: hidden }`, mis lõikab tooltipi
     * (`::after` pseudo-elemendina väljapool nuppu) ära. Attribute-selektor
     * (specificity 0,1,0) võidab `button` element-selektorit (0,0,1). */
    overflow: visible;
}

[data-tooltip]::after,
[data-tooltip]::before {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 50;
    /* `display: block` tagab pseudo-elementi renderdamise — kaardil flex-parent
     * võib `display: inline` defaulti tõttu varjata `::after` content'i. */
    display: block;
}

/* Tooltip bubble */
[data-tooltip]::after {
    content: attr(data-tooltip);
    background: var(--elab-text-secondary);
    color: #fff;
    font-family: var(--elab-font-body);
    font-size: var(--elab-fs-xs);
    font-weight: var(--elab-fw-medium);
    line-height: 1.4;
    padding: 5px 9px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    max-width: 240px;
}

/* Arrow */
[data-tooltip]::before {
    content: '';
    width: 0;
    height: 0;
    border: 5px solid transparent;
}

/* Default placement = top */
[data-tooltip]::after {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, 4px);
}

[data-tooltip]::before {
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translate(-50%, 4px);
    border-top-color: var(--elab-text-secondary);
    border-bottom: 0;
}

/* Placement: bottom */
[data-tooltip][data-tooltip-placement="bottom"]::after {
    top: calc(100% + 8px);
    bottom: auto;
    transform: translate(-50%, -4px);
}

[data-tooltip][data-tooltip-placement="bottom"]::before {
    top: calc(100% + 3px);
    bottom: auto;
    transform: translate(-50%, -4px);
    border-bottom-color: var(--elab-text-secondary);
    border-top: 0;
}

/* Placement: left */
[data-tooltip][data-tooltip-placement="left"]::after {
    right: calc(100% + 8px);
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translate(4px, -50%);
}

[data-tooltip][data-tooltip-placement="left"]::before {
    right: calc(100% + 3px);
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translate(4px, -50%);
    border-left-color: var(--elab-text-secondary);
    border-right: 0;
}

/* Placement: right */
[data-tooltip][data-tooltip-placement="right"]::after {
    left: calc(100% + 8px);
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translate(-4px, -50%);
}

[data-tooltip][data-tooltip-placement="right"]::before {
    left: calc(100% + 3px);
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translate(-4px, -50%);
    border-right-color: var(--elab-text-secondary);
    border-left: 0;
}

/* Hover/focus näitamine */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before {
    opacity: 1;
    transform: translate(-50%, 0);
}

[data-tooltip][data-tooltip-placement="left"]:hover::after,
[data-tooltip][data-tooltip-placement="left"]:hover::before,
[data-tooltip][data-tooltip-placement="left"]:focus-visible::after,
[data-tooltip][data-tooltip-placement="left"]:focus-visible::before,
[data-tooltip][data-tooltip-placement="right"]:hover::after,
[data-tooltip][data-tooltip-placement="right"]:hover::before,
[data-tooltip][data-tooltip-placement="right"]:focus-visible::after,
[data-tooltip][data-tooltip-placement="right"]:focus-visible::before {
    transform: translate(0, -50%);
}

/* Hinnangu AVG-blokk klikitav lingina (→ lavastuse /hinnangud/) */
.elab-rating--link { cursor: pointer; color: inherit; text-decoration: none; }
.elab-rating--link:hover .elab-rating__count,
.elab-rating--link:hover .elab-rating__label { text-decoration: underline; }