/* =====================================================================
   KänsloCheck och EnergiCheck – färger som följer sajtens teman
   css/ks-kanslor.css

   Används av emotioncheck.php, emotioncheckmenu.php,
   emotioncheckhistory.php och energycheck.php. Laddas efter
   css/style.css.

   js/ks-tema.js sätter data-theme på <html>: rymd (standard), hav, jul,
   ljus – och korallrevet, som är ljus + data-variant="korall".

   Sidorna var byggda för mörk botten med hårdkodade färger. I de ljusa
   temana blev korten svarta med mörk text och rubrikerna nästan
   osynliga. Nu går alla färger via variablerna nedan.
   ===================================================================== */

main {
    --ec-text:          rgba(255,255,255,.92);
    --ec-text-2:        rgba(255,255,255,.62);
    --ec-text-3:        rgba(255,255,255,.42);
    --ec-yta:           rgba(255,255,255,.05);
    --ec-yta-hover:     rgba(255,255,255,.10);
    --ec-kant:          rgba(255,255,255,.12);
    --ec-kort:          #111;
    --ec-kort-2:        #1a1a1a;
    --ec-falt:          #222;
    --ec-falt-text:     #fff;
    --ec-spar:          #333;
    --ec-spar-2:        #555;
    --ec-gron:          #22c55e;
    --ec-knapp:         #15803d;
    --ec-knapp-hover:   #16a34a;
    --ec-knapp-av:      #333;
    --ec-knapp-av-text: #9a9a9a;
    --ec-glod:          rgba(255,255,255,.22);
    --ec-skugga:        rgba(0,0,0,.4);
    --ec-ovald:         .5;        /* hur blekt ett ovalt känslokort är */
    --ec-diagram-text:  rgba(255,255,255,.85);
    --ec-diagram-rutor: rgba(255,255,255,.12);
}
[data-theme="hav"] main {
    --ec-kort:     #0a3346;
    --ec-kort-2:   #0d3d52;
    --ec-falt:     #0d4257;
    --ec-spar:     #1d6a83;
    --ec-spar-2:   #3b86a0;
    --ec-knapp-av: #1d4f63;
    --ec-knapp-av-text: #93b3bf;
    --ec-diagram-rutor: rgba(147,179,191,.22);
}
[data-theme="jul"] main {
    --ec-kort:     #2a0b0e;
    --ec-kort-2:   #361014;
    --ec-falt:     #3d1418;
    --ec-spar:     #5c2228;
    --ec-spar-2:   #7a3138;
    --ec-knapp-av: #4a1a1f;
}
[data-theme="ljus"] main {
    --ec-text:          #1e2b36;
    --ec-text-2:        #3e4c58;
    --ec-text-3:        #5b6874;
    --ec-yta:           rgba(255,255,255,.75);
    --ec-yta-hover:     #ffffff;
    --ec-kant:          rgba(30,43,54,.16);
    --ec-kort:          #ffffff;
    --ec-kort-2:        #f4f6f8;
    --ec-falt:          #ffffff;
    --ec-falt-text:     #1e2b36;
    --ec-spar:          #d5dde4;
    --ec-spar-2:        #94a3b8;
    --ec-gron:          #15803d;   /* ljusgrönt mot vitt är för svagt */
    --ec-knapp-av:      #d5dde4;
    --ec-knapp-av-text: #5b6874;
    --ec-glod:          rgba(30,43,54,.18);
    --ec-skugga:        rgba(30,43,54,.16);
    --ec-ovald:         .62;
    --ec-diagram-text:  #3e4c58;
    --ec-diagram-rutor: rgba(30,43,54,.12);
}
/* Korallrevet: korten blir frostat glas som resten av sajten. */
html[data-variant="korall"] main, html[data-variant="klassrum"] main {
    --ec-yta:    rgba(255,255,255,.6);
    --ec-kort:   rgba(255,255,255,.9);
    --ec-kort-2: rgba(255,255,255,.75);
}

/* ── Känslans/nivåns egen färg ───────────────────────────────────────
   Sätt style="--emo:#facc15" på elementet och klassen ec-emo, så får
   texten den färgen i mörka teman och en mörkare variant i ljusa –
   gult och limegrönt går annars inte att läsa mot vitt. */
main .ec-emo { color: var(--emo, inherit); }
[data-theme="ljus"] main .ec-emo { color: color-mix(in srgb, var(--emo, #1e2b36) 62%, #000); }

/* Samma sak för känslokorten, där både namn och siffra ärver. */
main .emotion-card, main .emotion-btn { --emo-text: var(--emo, var(--ec-text)); }
[data-theme="ljus"] main .emotion-card,
[data-theme="ljus"] main .emotion-btn { --emo-text: color-mix(in srgb, var(--emo, #1e2b36) 62%, #000); }

/* ── Vänsterpanelen (gemensam för alla fyra sidorna) ── */
main .ec-app-title     { color: var(--ec-gron); }
main .ec-app-subtitle  { color: var(--ec-text-3); }
main .ec-nav-link {
    background: var(--ec-yta);
    border-color: var(--ec-kant);
    color: var(--ec-text-2);
}
main .ec-nav-link:hover  { background: var(--ec-yta-hover); color: var(--ec-text); }
main .ec-nav-link.active { border-color: var(--ec-gron); color: var(--ec-gron); }

/* ── Fält ── */
main select::placeholder,
main textarea::placeholder { color: var(--ec-text-3); }
main select option { background: var(--ec-falt); color: var(--ec-falt-text); }

/* Tom-lägen ("Inga check-ins ännu") */
main .ec-tom { color: var(--ec-text-3); text-align: center; padding: 16px; }

/* ── Knappar ─────────────────────────────────────────────────────────
   style.css gör i hav och ljust tema alla knappar i <main> likadana
   (blå respektive ljusgrå). Här bär färgen betydelse: grönt = spara,
   rött = radera, markerad flik ska synas. Därför !important – sajtens
   regel är så specifik att inget annat räcker. */
main .save-btn,
main .start-btn {
    background: var(--ec-knapp) !important;
    color: #fff !important;
    border-color: transparent !important;
}
main .save-btn:hover,
main .start-btn:hover { background: var(--ec-knapp-hover) !important; }
main .save-btn:disabled,
main .start-btn:disabled {
    background: var(--ec-knapp-av) !important;
    color: var(--ec-knapp-av-text) !important;
}
main .clear-btn { background: #dc2626 !important; color: #fff !important; border-color: transparent !important; }
main .clear-btn:hover { background: #b91c1c !important; }
main .clear-btn.energy-clear { background: #b45309 !important; }
main .clear-btn.energy-clear:hover { background: #92400e !important; }

main .tab-btn {
    background: var(--ec-kort-2) !important;
    color: var(--ec-text) !important;
    border: 1px solid var(--ec-kant) !important;
}
main .tab-btn:hover { background: var(--ec-yta-hover) !important; }
main .tab-btn.active {
    background: var(--ec-knapp) !important;
    color: #fff !important;
    border-color: transparent !important;
}
main .tab-btn.energy-tab.active { background: #facc15 !important; color: #1a1a1a !important; }

/* Reglaget för uppläsning och högtalarknapparna ska inte bli rutor. */
main .ec-toggle-track { background: var(--ec-spar-2) !important; border: none !important; }
main .ec-toggle-track.on { background: #15803d !important; }
main .tts-btn,
main .emotion-tts-btn { background: none !important; border: none !important; color: var(--ec-text) !important; }
main .emotion-tts-btn:hover,
main .emotion-tts-btn.playing { background: var(--ec-yta-hover) !important; }