/* Virtuaal Theme — abi.virtuaal.com frontend CSS
   Ekstraheeritud head_common.twig <style id="virtuaal-theme">-blokist (audit #5 Stage A).
   Serveeritakse same-origin: resources/assets/frontend/css/virtuaal-theme.css (asset_rev cache-bust).
   @font-face viitab relatiivselt ../fonts/rubik-latin-vf.woff2. */
/* Self-hosted Rubik VF (latin subset, wght 300-900, font-display:swap) — väline same-origin .woff2 (cacheable, ei base64-inline'i iga laadimisega).
   Allikas: Rubik v31 latin-subset. GDPR: kylastaja IP ei leki kolmandale osapoolele. */
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;src:url('../fonts/rubik-latin-vf.woff2') format('woff2');}
:root {
    /* Virtuaal Brand Colors */
    --primary-green: #00c05f;
    --primary-green-dark: #00a854;
    --primary-green-hover: #00974b;

    /* Base Palette (Light Mode Default) */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-700: #374151;
    --gray-900: #111827;

    /* State Colors */
    --success-bg: #e8f5e9;
    --success-text: #2e7d32;
    --warning-bg: #fff3e0;
    --warning-text: #e65100;
    --info-bg: #e3f2fd;
    --info-text: #1565c0;
    --critical-bg: #fef2f2;
    --critical-border: #ef4444;

    /* Typography & Structural Override */
    --font-family-base: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bg-body: var(--gray-100);
    --text-main: var(--gray-900);
}

/* Global overrides */
body {
    font-family: var(--font-family-base) !important;
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
}

/* --- VIRTUAAL TYPOGRAPHY NUCLEAR OVERRIDE --- */
/* Tuumapomm: Seome reeglid html klassidega, et alistada SupportPali CSS spetsiifilisus */
html:not(.sp-theme-dark) body a,
html:not(.sp-theme-dark) body h1,
html:not(.sp-theme-dark) body h2,
html:not(.sp-theme-dark) body h3,
html:not(.sp-theme-dark) body h4,
html:not(.sp-theme-dark) body h5,
html:not(.sp-theme-dark) body h6,
html:not(.sp-theme-dark) body .sp-title,
html:not(.sp-theme-dark) body .sp-text-primary,
html.sp-theme-dark body a,
html.sp-theme-dark body h1,
html.sp-theme-dark body h2,
html.sp-theme-dark body h3,
html.sp-theme-dark body h4,
html.sp-theme-dark body .sp-title,
html.sp-theme-dark body .sp-text-primary {
    color: var(--text-main) !important;
    text-decoration: none !important;
}

/* v1.2.3: pealkirjad Rubik'isse — SP-core seab h1-h6 otse Inter'ile, body-override (rida 75) ei kata neid (oma font-family võidab päritu). Sama tõestatud spetsiifilisus kui värvi-reegel ülal. */
html:not(.sp-theme-dark) body h1, html:not(.sp-theme-dark) body h2, html:not(.sp-theme-dark) body h3,
html:not(.sp-theme-dark) body h4, html:not(.sp-theme-dark) body h5, html:not(.sp-theme-dark) body h6,
html:not(.sp-theme-dark) body .sp-title,
html.sp-theme-dark body h1, html.sp-theme-dark body h2, html.sp-theme-dark body h3,
html.sp-theme-dark body h4, html.sp-theme-dark body h5, html.sp-theme-dark body h6,
html.sp-theme-dark body .sp-title {
    font-family: var(--font-family-base) !important;
}

/* Lingi hover efekt AINULT roheliseks */
html:not(.sp-theme-dark) body a:hover,
html.sp-theme-dark body a:hover {
    color: var(--primary-green) !important;
}

/* Ikoonid (nii linkide sees kui väljas) hoiavad rohelist aktsenti */
html:not(.sp-theme-dark) body a i,
html:not(.sp-theme-dark) body a svg,
html.sp-theme-dark body a i,
html.sp-theme-dark body a svg,
html:not(.sp-theme-dark) body .sp-icon,
html.sp-theme-dark body .sp-icon {
    color: var(--primary-green) !important;
    opacity: 0.85;
}

/* Nuppude kaitsmine SupportPali 'sm' klasside eest */
.virtuaal-btn-primary {
    display: inline-flex !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    background: var(--primary-green) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px 0 rgba(0, 192, 95, 0.3) !important;
    margin-top: 16px !important;
}

/* CTA Buttons - Force white text against legacy overrides */
html:not(.sp-theme-dark) body a.virtuaal-btn-primary,
html:not(.sp-theme-dark) body button.virtuaal-btn-primary,
html.sp-theme-dark body a.virtuaal-btn-primary,
html.sp-theme-dark body button.virtuaal-btn-primary {
    color: #ffffff !important;
}

/* =========================================
   VIRTUAAL.COM COMPONENTS
   ========================================= */

/* Cards */
.virtuaal-card {
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 12px;
    padding: 25px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
@media (hover: hover) {
    .virtuaal-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.1);
        border-color: var(--primary-green);
    }
}

/* Buttons */
.virtuaal-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-size: 16px;
    font-family: var(--font-family-base);
    font-weight: 600;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--primary-green);
    color: #ffffff !important;
    border: none;
    box-shadow: 0 4px 14px 0 rgba(0, 192, 95, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    margin-top: 16px;
}
@media (hover: hover) {
    .virtuaal-btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 192, 95, 0.4);
        background: var(--primary-green-hover);
    }
}

/* Tags */
.virtuaal-tag {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    background: var(--success-bg);
    color: var(--success-text);
}
.virtuaal-tag.warning {
    background: var(--warning-bg);
    color: var(--warning-text);
}
.virtuaal-tag.info {
    background: var(--info-bg);
    color: var(--info-text);
}

/* --- VIRTUAAL FORMS & CODE BLOCKS --- */
/* Sisendväljad tagasi nähtavaks (eemaldab "plangu" tunde) */
input[type="text"], input[type="email"], input[type="password"], textarea, select {
    background-color: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    color: var(--text-main) !important;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus, select:focus {
    border-color: var(--primary-green) !important;
    box-shadow: 0 0 0 3px rgba(0, 192, 95, 0.15) !important;
    outline: none !important;
}
/* Footer keelevalik: globaalne select-padding (12px) lõikab kompaktses footeris teksti (6.0 = natiivne <select>) */
select[name="language"] {
    padding: 6px 10px !important;
    line-height: 1.4 !important;
    height: auto !important;
}

/* --- VIRTUAAL A11y: Focus-Visible kõigile interaktiivsetele elementidele (WCAG 2.4.7) --- */
a:focus-visible,
button:focus-visible,
.virtuaal-card:focus-visible,
.virtuaal-btn-primary:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--primary-green) !important;
    outline-offset: 2px !important;
}

/* Dark mode: sisendväljade taust */
html.sp-theme-dark input[type="text"],
html.sp-theme-dark input[type="email"],
html.sp-theme-dark input[type="password"],
html.sp-theme-dark textarea,
html.sp-theme-dark select {
    background-color: var(--gray-100) !important;
}

/* 2. KOODIKASTID (Veel tumedamaks) */
/* Et nad eristuksid var(--gray-100) taustast */
pre, code, .sp-code-block {
    background-color: #e5e7eb !important; /* Tailwind gray-200 */
    border: 1px solid #d1d5db !important; /* Tailwind gray-300 */
    color: var(--gray-900) !important;
    border-radius: 8px !important;
}
pre { padding: 16px !important; overflow-x: auto; }

/* Taastame artiklite plokkide vertikaalse asetuse */
ul.sp-article-list > li,
.sp-search-results > div {
    display: block !important;
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

/* Meta-andmed artikli all (inline, WCAG AA kontrastiga) */
ul.sp-article-list > li > ul > li,
.sp-article-details li {
    display: inline-block !important;
    color: var(--gray-700) !important;
    font-size: 13px !important;
}

/* Üldnimekirja eraldajad */
ul.sp-list > li {
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 20px;
    margin-bottom: 20px;
}
ul.sp-list > li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* --- VIRTUAAL ARTICLE META (Nimekirjades) --- */

/* B. Jäta ikoonid (kaust, tag) alles, aga tee nad neutraalseks */
ul.sp-article-list i,
ul.sp-article-list svg,
.sp-article-details i,
.sp-article-details svg {
    color: var(--gray-400) !important;
    margin-right: 6px !important;
    display: inline-block !important; /* Jõusta nähtavus */
}

/* C. Kustuta varasemad middot reeglid */
ul.sp-article-list li:after,
.sp-article-details li:after {
    content: none !important;
}

/* Lingid meta sees tumehalliks, hover-il roheliseks */
ul.sp-article-list > li > ul > li a,
.sp-article-details li a {
    color: var(--gray-500) !important;
}
ul.sp-article-list > li > ul > li a:hover,
.sp-article-details li a:hover {
    color: var(--primary-green) !important;
}

/* --- VIRTUAAL SOCIAL SHARE Nuclear Override --- */
/* Sihib ka parent <li> elemente */
ul.sp-social-share-buttons li,
.sp-article-view ul.sp-social-icons li {
    display: inline-block !important;
    margin-right: 8px !important;
}
ul.sp-social-share-buttons li a,
.sp-article-view ul.sp-social-icons li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background-color: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
}
ul.sp-social-share-buttons li a svg,
.sp-article-view ul.sp-social-icons li a svg,
ul.sp-social-share-buttons li a i,
.sp-article-view ul.sp-social-icons li a i {
    fill: var(--gray-500) !important;
    color: var(--gray-500) !important;
    font-size: 16px !important;
    width: 16px !important;
}
@media (hover: hover) {
    ul.sp-social-share-buttons li a:hover {
        background-color: var(--primary-green) !important;
        border-color: var(--primary-green) !important;
    }
    ul.sp-social-share-buttons li a:hover svg,
    ul.sp-social-share-buttons li a:hover i {
        fill: #ffffff !important;
        color: #ffffff !important;
    }
}

/* --- VIRTUAAL KUUPÄEVA PEITMINE (CSS lollikindel backup) --- */
/* Peidab kuupäeva/kellaaja IGAL pool, ka siis kui Twig hideDate ei jõua */
.sp-article-details li:has(.fa-calendar-day),
.sp-article-details li:has([class*="fa-clock"]) {
    display: none !important;
}

/* --- VIRTUAAL HERO 2026 (Clean Glassmorphism) --- */
.virtuaal-hero {
    position: relative;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 50%, #004d26 100%) !important;
    overflow: hidden;
    min-height: 120px; /* Turvaline minimaalkõrgus, et hero ei kollapseeruks */
    padding-top: 80px; /* Ruum fikseeritud päise jaoks */
    margin-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
/* Hero otsinguväli glassmorphism */
.virtuaal-hero-input {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 12px !important;
    padding: 16px 24px !important;
    font-size: 17px !important;
    color: #ffffff !important;
    width: 100% !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}
.virtuaal-hero-input::placeholder {
    color: rgba(255, 255, 255, 0.65) !important;
}
.virtuaal-hero-input:focus {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    outline: none !important;
}

/* --- VIRTUAAL 2026: Light Mode Hero Kontrast --- */
/* Pealkiri lumivalgeks rohelisel taustal */
html:not(.sp-theme-dark) body .sp-search-container h2 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Otsingukast puhtaks valgeks pill-kujulisena */
html:not(.sp-theme-dark) body .sp-search-container input[type="search"] {
    background-color: #ffffff !important;
    color: var(--gray-900) !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    border-radius: 9999px !important;
}

/* Fookusefekt - õrn valge kuma */
html:not(.sp-theme-dark) body .sp-search-container input[type="search"]:focus {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4), 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    outline: none !important;
}

/* Placeholder tekst neutraalseks halliks */
html:not(.sp-theme-dark) body .sp-search-container input[type="search"]::placeholder {
    color: var(--gray-400) !important;
}

/* =========================================
   VIRTUAAL 2026 DASHBOARD — 5-KAARDI NAVIGATSIOON
   ========================================= */

/* Dashboard Grid: 6-kaardi responsiivne 3×2 asetus */
.virtuaal-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 8px;
}
@media (min-width: 640px) {
    .virtuaal-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }
}
@media (min-width: 1024px) {
    .virtuaal-dashboard-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

/* Navigatsioonikaart */
.virtuaal-nav-card {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px 28px !important;
    text-decoration: none !important;
    position: relative;
}
.virtuaal-nav-card:hover {
    border-color: var(--primary-green) !important;
}

/* Ikooni ring */
.virtuaal-nav-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 192, 95, 0.1) 0%, rgba(0, 192, 95, 0.05) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.virtuaal-nav-card:hover .virtuaal-nav-icon {
    background: linear-gradient(135deg, rgba(0, 192, 95, 0.2) 0%, rgba(0, 192, 95, 0.1) 100%);
    transform: scale(1.08);
}
/* .virtuaal-nav-icon i — stiil defineeritud allpool "VIRTUAAL 2026 SaaS" sektsioonis */

/* Kaardi pealkiri */
.virtuaal-nav-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    color: var(--gray-900) !important;
}

/* Kaardi kirjeldus */
.virtuaal-nav-desc {
    font-size: 13px;
    color: var(--gray-500) !important;
    margin: 0 !important;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Väline lingi badge */
.virtuaal-external-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-400) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.virtuaal-external-badge i {
    font-size: 11px !important;
    color: var(--gray-400) !important;
}
.virtuaal-nav-card:hover .virtuaal-external-badge {
    color: var(--primary-green) !important;
}
.virtuaal-nav-card:hover .virtuaal-external-badge i {
    color: var(--primary-green) !important;
}

/* --- Ühendatud piletikaart (combined card) --- */
.virtuaal-nav-card--combined {
    padding: 0 !important;
}
.virtuaal-nav-card-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none !important;
    color: inherit !important;
    padding: 32px 24px 16px !important;
}
.virtuaal-nav-sublink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-200);
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-green) !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
    width: calc(100% - 48px);
    justify-content: center;
}
.virtuaal-nav-sublink:hover {
    color: var(--primary-green-hover) !important;
    text-decoration: none !important;
}
.virtuaal-nav-sublink i {
    font-size: 12px;
    color: var(--primary-green) !important;
}
html.sp-theme-dark body .virtuaal-nav-sublink {
    border-top-color: #2a2a2a !important;
    color: #00d669 !important;
}
html.sp-theme-dark body .virtuaal-nav-sublink:hover {
    color: #00e876 !important;
}
html.sp-theme-dark body .virtuaal-nav-sublink i {
    color: #00d669 !important;
}

/* Dark Mode: Navigatsioonikaardid — neutraalsed tumedad toonid */
html.sp-theme-dark body .virtuaal-nav-card {
    background-color: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.4) !important;
}
html.sp-theme-dark body .virtuaal-nav-card h3,
html.sp-theme-dark body .virtuaal-nav-card .sp-title,
html.sp-theme-dark body .virtuaal-nav-card .virtuaal-nav-title {
    color: #f5f5f5 !important;
}
html.sp-theme-dark body .virtuaal-nav-card p,
html.sp-theme-dark body .virtuaal-nav-card .sp-description,
html.sp-theme-dark body .virtuaal-nav-card .virtuaal-nav-desc {
    color: #888888 !important;
}
html.sp-theme-dark body .virtuaal-nav-icon {
    background: linear-gradient(135deg, rgba(0, 214, 105, 0.15) 0%, rgba(0, 214, 105, 0.05) 100%);
}

/* --- VANA DASHBOARD LEGACY (eemaldatud, aga jätame tagavara) --- */

/* 3. CTA NUPU "ÕHK" */
.virtuaal-btn-primary {
    margin-bottom: 24px !important;
}

/* 4. SEOTUD ARTIKLID — Helper Box (2026 High-Tech) */
.virtuaal-related-box {
    margin-top: 32px !important;
    background: var(--gray-50) !important;
    border: 1px solid var(--gray-200) !important;
    border-left: 4px solid var(--primary-green) !important;
    border-radius: 12px !important;
    padding: 24px 28px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}
@media (hover: hover) {
    .virtuaal-related-box:hover {
        box-shadow: 0 6px 20px rgba(0, 192, 95, 0.1) !important;
        border-left-color: var(--primary-green-dark) !important;
    }
}
.virtuaal-related-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--gray-200) !important;
}
.virtuaal-related-header i {
    color: var(--primary-green) !important;
    font-size: 20px !important;
    opacity: 0.9;
}
.virtuaal-related-header h4 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--gray-900) !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Artiklite nimekiri kastis */
.virtuaal-related-box ul {
    margin: 0 !important;
    padding: 0 0 0 8px !important;
    list-style: none !important;
}
.virtuaal-related-box ul li {
    padding: 8px 12px !important;
    border-radius: 6px !important;
    transition: background-color 0.2s ease !important;
}
.virtuaal-related-box ul li:hover {
    background-color: var(--gray-100) !important;
}
.virtuaal-related-box ul li::before {
    content: '→' !important;
    color: var(--primary-green) !important;
    font-weight: 600 !important;
    margin-right: 10px !important;
}
.virtuaal-related-box ul li a {
    color: var(--gray-700) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
.virtuaal-related-box ul li a:hover {
    color: var(--primary-green) !important;
}

/* =========================================
   VIRTUAAL TICKET VIEW — 2026 SaaS Redesign
   ========================================= */

/* Ticket Sidebar — virtuaal-card stiiliga */
.sp-sidebar-box {
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
.sp-sidebar-box h2 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--gray-200) !important;
}
/* Sidebar detailide read — rohkem whitespace */
.sp-ticket-details .sp-form-row {
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--gray-100) !important;
}
.sp-ticket-details .sp-form-row:last-child {
    border-bottom: none !important;
}
.sp-ticket-details label {
    font-size: 13px !important;
    color: var(--gray-500) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* Sõnumite konteiner — rohkem hingamisruumi */
.sp-messages-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* Üksik sõnum — virtuaal-card stiil */
.sp-message {
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    transition: box-shadow 0.2s ease !important;
}
.sp-message:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
/* Sõnumi päis (nimi + aeg) */
.sp-message-header {
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--gray-100) !important;
}
/* Manuste sektsioon sõnumi sees */
.sp-message .sp-attachments {
    margin-top: 16px !important;
    padding: 16px !important;
    background: var(--gray-50) !important;
    border-radius: 8px !important;
    border: 1px solid var(--gray-200) !important;
}

/* Vastamise vorm — puhas kaart */
.add-reply {
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

/* Piletite nimekiri (grid) — puhtad read */
.sp-filter-results {
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

/* =========================================
   VIRTUAAL 2026 — FORM SYSTEM
   ========================================= */

/* Vormikaart */
.virtuaal-form-card {
    padding: 0 !important;
    overflow: hidden;
}

/* Vormi päis ikooniga */
.virtuaal-form-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 32px 20px;
    border-bottom: 1px solid var(--gray-200);
}
.virtuaal-form-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 192, 95, 0.12) 0%, rgba(0, 192, 95, 0.04) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.virtuaal-form-header-icon i {
    font-size: 20px !important;
    color: var(--primary-green) !important;
}
.virtuaal-form-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.virtuaal-form-subtitle {
    font-size: 14px;
    color: var(--gray-500) !important;
    margin: 4px 0 0 0 !important;
}

/* Vormi keha */
.virtuaal-form-body {
    padding: 28px 32px;
}

/* Vormi read — rohkem whitespace */
.virtuaal-form-row {
    margin-bottom: 20px !important;
}
.virtuaal-form-row:last-child {
    margin-bottom: 0 !important;
}
.virtuaal-form-row label {
    font-weight: 600 !important;
    font-size: 14px;
    color: var(--gray-700) !important;
    margin-bottom: 6px !important;
    display: block;
}

/* Vormi vihjed */
.virtuaal-form-hint {
    font-size: 13px;
    color: var(--gray-400) !important;
    margin-top: 6px;
}

/* Vormi nupud */
.virtuaal-form-actions {
    padding: 20px 32px 28px;
    border-top: 1px solid var(--gray-100);
}
.virtuaal-form-actions .virtuaal-btn-primary {
    margin-top: 0 !important;
}

/* Piletivormi metaandmete horisontaalne rida (Osakond + Prioriteet + CC) */
.virtuaal-form-meta-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.virtuaal-form-meta-row > .virtuaal-form-row {
    flex: 1 1 200px;
    min-width: 0;
}
@media (max-width: 639px) {
    .virtuaal-form-meta-row {
        flex-direction: column;
        gap: 0;
    }
}

/* Captcha piirkond */
.virtuaal-form-captcha {
    padding: 20px 32px;
    border-top: 1px solid var(--gray-100);
}

/* Osakonna badge (step3 metaandmetes) */
.virtuaal-dept-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
}
.virtuaal-dept-badge i {
    color: var(--primary-green) !important;
    font-size: 14px !important;
}

/* Osakonna valik (step2) — Grid */
.virtuaal-department-grid {
    padding: 24px 32px 32px;
    display: grid;
    gap: 16px;
}
.virtuaal-department-card {
    display: flex !important;
    flex-direction: column;
    padding: 20px 24px !important;
    position: relative;
}
.virtuaal-dept-name {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
}
.virtuaal-dept-desc {
    font-size: 14px;
    color: var(--gray-500) !important;
    margin: 0 !important;
    line-height: 1.5;
}
.virtuaal-dept-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    transition: all 0.2s ease;
}
.virtuaal-dept-arrow i {
    color: var(--gray-300) !important;
    font-size: 14px !important;
}
.virtuaal-department-card:hover .virtuaal-dept-arrow i {
    color: var(--primary-green) !important;
    transform: translateX(4px);
}

/* Tühi olek */
.virtuaal-form-empty {
    color: var(--gray-400);
    text-align: center;
    padding: 32px;
    font-style: italic;
}

/* Dark Mode: Vormid — neutraalsed toonid */
html.sp-theme-dark body .virtuaal-form-header {
    border-color: #2a2a2a !important;
}
html.sp-theme-dark body .virtuaal-form-actions,
html.sp-theme-dark body .virtuaal-form-captcha {
    border-color: #2a2a2a !important;
}
html.sp-theme-dark body .virtuaal-dept-badge {
    background: #1a1a1a;
    border-color: #2a2a2a;
}
html.sp-theme-dark body .virtuaal-department-card {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
}

/* Legacy: Pileti vormi sektsioonid */
.sp-form-row {
    margin-bottom: 4px !important;
}
.sp-form-row label {
    font-weight: 600 !important;
}

/* Prindi nupp — kaardistiil */
.sp-print-ticket .sp-button {
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 8px !important;
    color: var(--gray-700) !important;
    transition: all 0.2s ease !important;
}
@media (hover: hover) {
    .sp-print-ticket .sp-button:hover {
        border-color: var(--primary-green) !important;
        color: var(--primary-green) !important;
    }
}

/* =========================================
   DARK MODE — KÕIGE LÕPUS (ülekirjutab base-reeglid)
   ========================================= */

/* Dark Mode: muutujate ümberpööramine — neutraalne tume (mitte sinaka alatooniga) */
html.sp-theme-dark {
    --gray-50: #121212;
    --gray-100: #1a1a1a;
    --gray-200: #2a2a2a;
    --gray-400: #888888;
    --gray-500: #b0b0b0;
    --gray-700: #d4d4d4;
    --gray-900: #f5f5f5;
    --bg-body: var(--gray-50);
    --text-main: var(--gray-900);
    --primary-green: #00d669;
}

/* Dark Mode: kõvakodeeritud ülekirjutused — neutraalsed tumedad toonid */
html.sp-theme-dark body .virtuaal-card,
html.sp-theme-dark body ul.sp-article-list > li,
html.sp-theme-dark body .sp-search-results > div,
html.sp-theme-dark body .sp-article-view > h3 + ul {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
}
html.sp-theme-dark body pre,
html.sp-theme-dark body code,
html.sp-theme-dark body .sp-code-block {
    background-color: #121212 !important;
    border-color: #2a2a2a !important;
    color: #d4d4d4 !important;
}
html.sp-theme-dark body ul.sp-social-share-buttons li a,
html.sp-theme-dark body .sp-article-view ul.sp-social-icons li a {
    background-color: #2a2a2a !important;
    border-color: #3a3a3a !important;
}
html.sp-theme-dark body ul.sp-social-share-buttons li a svg,
html.sp-theme-dark body .sp-article-view ul.sp-social-icons li a svg,
html.sp-theme-dark body ul.sp-social-share-buttons li a i,
html.sp-theme-dark body .sp-article-view ul.sp-social-icons li a i {
    fill: #888888 !important;
    color: #888888 !important;
}

/* Dark Mode: Selfservice sektsioonid — läbipaistvad */
html.sp-theme-dark body .sp-dashboard-section[id^="sp-selfservice-"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Dark Mode: Hero — rahustatud tume taust (roheline gradient VÄLJA) */
html.sp-theme-dark body .sp-search-container,
html.sp-theme-dark body .virtuaal-hero-section {
    background: #121212 !important;
    box-shadow: none !important;
    border-bottom: 1px solid #2a2a2a !important;
    border-radius: 0 0 24px 24px !important;
}
html.sp-theme-dark .virtuaal-hero {
    background: #121212 !important;
    border-bottom: 1px solid #2a2a2a !important;
}

/* Dark Mode: Hero otsingukast — pill-kujuline helendav element */
html.sp-theme-dark body .sp-search-container input[type="search"],
html.sp-theme-dark body .sp-search-container input[type="text"] {
    background-color: #1a1a1a !important;
    border: 1px solid #00c05f !important;
    border-radius: 9999px !important;
    box-shadow: 0 0 20px rgba(0, 192, 95, 0.15) !important;
    color: #ffffff !important;
}
html.sp-theme-dark body .sp-search-container input[type="search"]:focus,
html.sp-theme-dark body .sp-search-container input[type="text"]:focus {
    box-shadow: 0 0 30px rgba(0, 192, 95, 0.3) !important;
    border-color: #00e070 !important;
}
html.sp-theme-dark .virtuaal-hero-input {
    background: #1a1a1a !important;
    border: 1px solid #00c05f !important;
    border-radius: 9999px !important;
    box-shadow: 0 0 20px rgba(0, 192, 95, 0.15) !important;
    color: #ffffff !important;
}

/* Dark Mode: Hero pealkiri */
html.sp-theme-dark body .sp-search-container h2 {
    color: #f5f5f5 !important;
}

/* Dark Mode: Hero koodiplokid loetavaks */
html.sp-theme-dark body .sp-search-container pre,
html.sp-theme-dark body .sp-search-container code {
    background-color: #1a1a1a !important;
    color: #d4d4d4 !important;
    border-color: #2a2a2a !important;
}

/* Dark Mode: Sisendväljad — neutraalne tume taust */
html.sp-theme-dark input[type="text"],
html.sp-theme-dark input[type="email"],
html.sp-theme-dark input[type="password"],
html.sp-theme-dark textarea,
html.sp-theme-dark select {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
    color: #f5f5f5 !important;
}

/* Dark Mode: Ticket View — neutraalsed toonid */
html.sp-theme-dark body .sp-sidebar-box,
html.sp-theme-dark body .sp-message,
html.sp-theme-dark body .add-reply,
html.sp-theme-dark body .sp-filter-results,
html.sp-theme-dark body a.sp-department {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
}
html.sp-theme-dark body .sp-message .sp-attachments {
    background-color: #121212 !important;
    border-color: #2a2a2a !important;
}
html.sp-theme-dark body .sp-print-ticket .sp-button {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
    color: #d4d4d4 !important;
}

/* --- VIRTUAAL 2026 SaaS: Avalehe PEAMINE ikoon (ainult .virtuaal-nav-icon sees) --- */
/* Un-scoped (oli html.sp-theme-light/dark, ei matchinud 6.0 sp-theme-system). FA7 `<i>` muutus
   display:block 58px → ületäitis 56px konteineri (FA5 oli inline-block). Fix: flex-täida konteiner. */
.virtuaal-nav-icon i {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-dark)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;  /* dark-režiim pärib rohelise text-fill'i → glyph roheline rohelisel; sunni valge */
    fill: #ffffff !important;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0,192,95,0.3);
    margin-bottom: 0;
    font-size: 24px !important;
    line-height: 1 !important;
}

/* --- VIRTUAAL 2026: Sõnumikasti domineeriv suurus (TinyMCE / textarea) --- */
.tox-tinymce {
    min-height: 400px !important;
    border-radius: 8px !important;
    border-color: var(--gray-200) !important;
}
.tox-tinymce:focus-within {
    border-color: var(--primary-green) !important;
    box-shadow: 0 0 0 3px rgba(0, 192, 95, 0.15) !important;
}
textarea.redactor-box,
textarea[name="text"],
.sp-editor-container textarea,
.redactor-editor,
.redactor-box {
    min-height: 400px !important;
}
/* Dark Mode: TinyMCE — neutraalsed toonid */
html.sp-theme-dark .tox-tinymce {
    border-color: #2a2a2a !important;
}
html.sp-theme-dark .tox .tox-edit-area__iframe {
    background-color: #1a1a1a !important;
}
html.sp-theme-dark .tox .tox-toolbar,
html.sp-theme-dark .tox .tox-toolbar__primary,
html.sp-theme-dark .tox .tox-toolbar__overflow,
html.sp-theme-dark .tox .tox-statusbar {
    background-color: #121212 !important;
    border-color: #2a2a2a !important;
}
html.sp-theme-dark .tox .tox-tbtn svg {
    fill: #b0b0b0 !important;
}

/* --- VIRTUAAL 2026: Hero konteiner — elegantne vertikaalne ruum --- */
.sp-search-container {
    padding-top: 100px !important; /* Ruum fikseeritud päise jaoks */
}
.virtuaal-hero-section {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%) !important;
    border-radius: 0 0 24px 24px !important;
    box-shadow: 0 10px 30px rgba(0,192,95,0.2) !important;
    padding: 60px 24px !important;
}
.virtuaal-hero-heading {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 2rem !important;
    margin-bottom: 1.5rem !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
.virtuaal-hero-form {
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* --- VIRTUAAL 2026: Hero otsinguväli — pill-kujuline, elegantne --- */
.virtuaal-hero-search,
.sp-search-container input[type="search"],
.sp-search-container input[type="text"] {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 9999px !important;
    padding: 16px 28px !important;
    font-size: 17px !important;
    color: #ffffff !important;
    width: 100% !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
}
.virtuaal-hero-search:focus,
.sp-search-container input[type="search"]:focus,
.sp-search-container input[type="text"]:focus {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2), 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    outline: none !important;
}
.virtuaal-hero-search::placeholder,
.sp-search-container input[type="search"]::placeholder,
.sp-search-container input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* --- VIRTUAAL 2026: Vormi joondus (Create Ticket) --- */
.virtuaal-form-meta-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 2fr !important;
    gap: 24px !important;
    align-items: start !important;
}
@media (max-width: 768px) {
    .virtuaal-form-meta-row {
        grid-template-columns: 1fr !important;
    }
}

/* --- VIRTUAAL 2026: Dark Mode päise taust --- */
html.sp-theme-dark header,
html.sp-theme-dark .sp-header,
html.sp-theme-dark .virtuaal-header {
    background-color: #121212 !important;
    border-bottom: 1px solid #2a2a2a !important;
}

/* --- VIRTUAAL 2026: Dark Mode koodiplokkide loetavus --- */
html.sp-theme-dark body .sp-code-block,
html.sp-theme-dark body .sp-code-block *,
html.sp-theme-dark body pre code,
html.sp-theme-dark body pre code *,
html.sp-theme-dark body .sp-code,
html.sp-theme-dark body .sp-code * {
    color: #e5e7eb !important;
    background-color: #1a1a1a !important;
    text-shadow: none !important;
}

/* --- VIRTUAAL 2026 (v1.2.1): artikli vertikaalne rütm --- */
/* Pildid/figure'id ei tohi olla päiste ega teksti vastas (Tailwind preflight nullib figure margini). */
.sp-article figure { margin-block: 1.5rem; }
.sp-article img { margin-block: 1rem; }
.sp-article figure img { margin-block: 0; }
.sp-article h2,
.sp-article h3,
.sp-article h4 { margin-top: 1.5rem; }
.sp-article > :first-child { margin-top: 0; }
/* --- VIRTUAAL 2026 (v1.4.2): lõikude/loendite rütm --- */
/* Tailwind preflight nullib p/ul/ol margini → lõigud kleepusid kokku ("tihe sein"). */
.sp-article p { margin-block: 0 1rem; line-height: 1.7; }
.sp-article ul,
.sp-article ol { margin-block: 0 1rem; }
.sp-article li { margin-block: 0.35rem; }
.sp-article li > p { margin-block: 0; }
.sp-article > :last-child { margin-bottom: 0; }

/* --- VIRTUAAL (SP 6.0 TW4-migratsioon): utilityd mida 6.0 main.css ei kompileeri --- */
/* 6.0 main.css = fikseeritud pre-build (JIT ei skanni teemat) → SP ise neid ei kasuta, seega puuduvad. */
/* Teisendus-tööriist jätab tundmatud TW3-vormi (sp-…); siin sihime just neid leftover-klasse. */
.sp-mx-4 { margin-inline: 1rem; }                               /* TW spacing-4 = 1rem */
.sp-text-gray-500 { color: var(--gray-500); }                   /* 6.0-s ainult gray-400/600; var = dark-mode-teadlik */
.hover\:sp-text-primary-green:hover { color: var(--primary-green); }  /* bränd #00c05f (säilitab 5.7 utility-käitumise) */
.sp-rounded-se { border-start-end-radius: 0.25rem; }            /* TW3 default-radius; 6.0-s rounded-se puudub */
.sp-transition {                                                /* 5.7 TW-default transition utility (identne) */
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}