/* =====================================================================
   Stjärnhimmel – stil
   css/starrysky.css   (starryskymenu.php och starrysky.php)

   Följer temat via variablerna i css/style.css. Allt är avgränsat till
   .ss-* och .sky-* så att sidhuvud, sidopanel och footer inte påverkas.
   style.css färgar "main button" i ljust tema och hav; reglerna här har
   id i väljaren (#ss-vanster, #ss-app, #sky-app) och vinner därför.
   ===================================================================== */

.ss-tema {
    --ss-yta:   var(--color-bg-secondary, #111827);
    --ss-yta2:  var(--color-bg-tertiary, #1a2235);
    --ss-kant:  var(--color-border-subtle, #2a3550);
    --ss-kant2: var(--color-accent-border, #3b4a6b);
    --ss-text:  var(--color-text-primary, #e2e8f0);
    --ss-text2: var(--color-text-secondary, #94a3b8);
    --ss-mu:    var(--color-text-muted, #64748b);
    --ss-acc:   #6366f1;
    --ss-guld:  #fbbf24;
    --ss-ok:    #22c55e;
    --ss-fara:  #ef4444;
    --ss-skugga: 0 6px 20px rgba(0,0,0,.35);
    color: var(--ss-text);
    font-family: 'Exo 2', system-ui, sans-serif;
}
[data-theme="ljus"] .ss-tema {
    --ss-yta: #ffffff; --ss-yta2: #f4f6f9; --ss-kant: #e2e8f0; --ss-kant2: #cbd5e1;
    --ss-text: #1e293b; --ss-text2: #475569; --ss-mu: #64748b;
    --ss-acc: #4f46e5; --ss-guld: #b45309; --ss-ok: #15803d; --ss-fara: #dc2626;
    --ss-skugga: 0 6px 18px rgba(35,48,58,.12);
}
.ss-tema *, .ss-tema *::before, .ss-tema *::after { box-sizing: border-box; }

/* ── Knappar ────────────────────────────────────────────────────── */
#ss-vanster .ss-btn, #ss-app .ss-btn, #sky-app .ss-btn, .ss-dialog .ss-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 42px; padding: 8px 14px; border-radius: 10px; cursor: pointer;
    background: var(--ss-yta2); color: var(--ss-text); border: 1px solid var(--ss-kant2);
    font: 600 .95rem 'Exo 2', system-ui, sans-serif; line-height: 1.15; text-decoration: none;
    transform: none; box-shadow: none; transition: border-color .15s, filter .15s;
}
#ss-vanster .ss-btn:hover, #ss-app .ss-btn:hover, #sky-app .ss-btn:hover, .ss-dialog .ss-btn:hover { border-color: var(--ss-acc); }
#ss-vanster .ss-btn:focus-visible, #ss-app .ss-btn:focus-visible, #sky-app .ss-btn:focus-visible, .ss-dialog .ss-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ss-acc) 55%, transparent); outline-offset: 2px;
}
#ss-vanster .ss-btn.ss-primar, #ss-app .ss-btn.ss-primar, #sky-app .ss-btn.ss-primar, .ss-dialog .ss-btn.ss-primar {
    background: var(--ss-acc); border-color: var(--ss-acc); color: #fff;
}
#ss-app .ss-btn.ss-visa { background: #facc15; border-color: #facc15; color: #1c1917; font-size: 1.05rem; padding-inline: 20px; }
#ss-vanster .ss-btn.ss-ikon, #ss-app .ss-btn.ss-ikon { min-width: 42px; padding: 6px 8px; background: transparent; border-color: transparent; }
#ss-vanster .ss-btn.ss-ikon:hover, #ss-app .ss-btn.ss-ikon:hover { background: var(--ss-yta2); border-color: var(--ss-fara); }
#ss-vanster .ss-btn[disabled], #ss-app .ss-btn[disabled] { opacity: .5; cursor: not-allowed; }
.ss-knapprad { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.ss-falt { display: flex; flex-direction: column; gap: 6px; }
.ss-falt > span { font-weight: 600; color: var(--ss-text2); font-size: .9rem; }
.ss-falt small { color: var(--ss-mu); font-size: .8rem; }
.ss-tema input[type="text"], .ss-tema input[type="number"], .ss-tema input[type="date"], .ss-tema textarea {
    width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ss-kant2);
    background: var(--ss-yta2); color: var(--ss-text); font: 1rem 'Exo 2', system-ui, sans-serif;
}
.ss-tema input:focus, .ss-tema textarea:focus { outline: none; border-color: var(--ss-acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-acc) 25%, transparent); }
[data-theme="ljus"] .ss-tema input[type="date"] { color-scheme: light; }
.ss-tema input[type="date"] { color-scheme: dark; }

/* ═════════════════════════════════════════════════════════════════
   starryskymenu.php
   ═════════════════════════════════════════════════════════════════ */
#ss-vanster { display: flex; flex-direction: column; gap: 14px; width: 100%; }
#ss-vanster h2 { margin: 6px 0 0; font-family: 'Orbitron', sans-serif; font-size: 1rem; color: var(--ss-text); }
.ss-lista { display: flex; flex-direction: column; gap: 8px; }
.ss-himmelrad {
    display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 12px; cursor: pointer;
    background: var(--ss-yta2); border: 2px solid transparent; text-align: left;
}
.ss-himmelrad:hover { border-color: var(--ss-kant2); }
.ss-himmelrad:focus-visible { outline: 3px solid color-mix(in srgb, var(--ss-acc) 55%, transparent); outline-offset: 2px; }
.ss-himmelrad.ss-vald { border-color: var(--ss-acc); background: color-mix(in srgb, var(--ss-acc) 10%, var(--ss-yta2)); }
.ss-himmelrad .ss-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ss-himmelrad b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-himmelrad small { color: var(--ss-text2); font-size: .8rem; }
.ss-tom { color: var(--ss-text2); line-height: 1.5; margin: 6px 0; }
.ss-fil { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

#ss-app { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.ss-panel { background: var(--ss-yta); border: 1px solid var(--ss-kant); border-radius: 16px; padding: 16px 18px; box-shadow: var(--ss-skugga); min-width: 0; }
.ss-panel h2 { margin: 0 0 12px; font-family: 'Orbitron', sans-serif; font-size: clamp(1rem, 1.6vw, 1.25rem); color: var(--ss-text); }
.ss-ny { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 12px; align-items: start; }
.ss-ny .ss-btn { grid-column: 1 / -1; justify-self: start; }
.ss-huvud { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.ss-huvud .ss-falt { flex: 1 1 260px; }
.ss-namn { font-size: 1.15rem !important; font-weight: 700; }
.ss-status { color: var(--ss-mu); font-size: .85rem; min-height: 1.2em; }
.ss-verktyg { margin-top: 12px; }

#ss-meddelande:empty { display: none; }
.ss-medd { padding: 10px 14px; border-radius: 10px; font-weight: 600; border: 1px solid; }
.ss-medd.ok  { color: var(--ss-ok); border-color: var(--ss-ok); background: color-mix(in srgb, var(--ss-ok) 10%, transparent); }
.ss-medd.fel { color: var(--ss-fara); border-color: var(--ss-fara); background: color-mix(in srgb, var(--ss-fara) 10%, transparent); }

/* Förhandsvisning – dra stjärnorna här */
.ss-forhand {
    position: relative; width: 100%; aspect-ratio: 16 / 7; min-height: 180px; border-radius: 14px; overflow: hidden;
    background: radial-gradient(ellipse at 30% 20%, #1e2a5a 0%, #0b1030 55%, #05071a 100%);
    border: 1px solid var(--ss-kant2);
}
.ss-forhand .sky-stjarna { --s: clamp(26px, 3.2vw, 38px); }
.ss-forhand .sky-stjarna.ss-markerad svg { filter: drop-shadow(0 0 10px #fff); }
.ss-tips { color: var(--ss-mu); font-size: .82rem; margin: 8px 2px 0; }

/* Stjärnlistan. Texten får en egen rad i full bredd – tidigare låg den
   i en smal kolumn som krympte till nästan ingenting när mittytan var
   smal (sidopaneler, zoom), så det såg ut som att det inte gick att skriva. */
.ss-rader { display: flex; flex-direction: column; gap: 10px; }
.ss-rad {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(150px, 200px) 44px;
    grid-template-areas: "nr namn datum del" "nr text text text";
    gap: 8px 10px; align-items: start;
    padding: 12px; border-radius: 12px; background: var(--ss-yta2); border: 2px solid transparent;
}
.ss-rad.ss-markerad { border-color: var(--ss-acc); }
.ss-rad > .ss-nr { grid-area: nr; }
.ss-rad > .ss-f-namn { grid-area: namn; }
.ss-rad > .ss-f-datum { grid-area: datum; }
.ss-rad > .ss-f-text { grid-area: text; }
.ss-rad > .ss-ikon { grid-area: del; }
.ss-rad .ss-falt > span { font-size: .78rem; }
.ss-nr {
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #facc15; color: #1c1917; font-weight: 800; font-family: 'Orbitron', sans-serif; font-size: .9rem; margin-top: 20px;
}
.ss-rad.ss-oppnad .ss-nr { background: #cbd5e1; }
.ss-rad textarea { min-height: 64px; resize: vertical; line-height: 1.45; font-size: 1.05rem; }
.ss-rad .ss-ikon { margin-top: 20px; }
.ss-lage { font-size: .78rem; display: block; }
.ss-lage.last { color: var(--ss-fara); }
.ss-lage.oppen { color: var(--ss-ok); }

@media (max-width: 900px) {
    .ss-ny { grid-template-columns: 1fr 1fr; }
    .ss-ny .ss-falt:first-child { grid-column: 1 / -1; }
}
@container (max-width: 520px) {
    .ss-rad { grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-areas: "nr namn del" "nr datum datum" "text text text"; }
}
#ss-lista-panel { container-type: inline-size; }

/* ═════════════════════════════════════════════════════════════════
   Stjärnorna (båda sidorna)
   ═════════════════════════════════════════════════════════════════ */
.sky-stjarna {
    --s: clamp(38px, 5vw, 64px);
    position: absolute;
    left: min(calc(var(--x, 50) * 1%), calc(100% - var(--s)));
    top:  min(calc(var(--y, 50) * 1%), calc(100% - var(--s)));
    width: var(--s); height: var(--s); padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, .75));
    animation: sky-blink 3s ease-in-out infinite; animation-delay: var(--d, 0s);
    transition: transform .2s ease, filter .2s ease;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.sky-stjarna svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sky-stjarna .sky-fyll { fill: url(#skyGuld); stroke: #f59e0b; stroke-width: 2; }
.sky-stjarna:hover, .sky-stjarna:focus-visible { transform: scale(1.18); filter: drop-shadow(0 0 16px rgba(255, 215, 0, 1)); outline: none; }
.sky-stjarna:focus-visible svg { outline: 3px solid #fff; outline-offset: 4px; border-radius: 50%; }
.sky-etikett {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-top: 8%;
    font: 800 calc(var(--s) * .27) 'Orbitron', sans-serif; color: #3b2a00; pointer-events: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sky-stjarna.sky-oppnad .sky-fyll { fill: url(#skySilver); stroke: #94a3b8; }
.sky-stjarna.sky-oppnad { filter: drop-shadow(0 0 6px rgba(203, 213, 225, .6)); animation: none; opacity: .85; }
.sky-stjarna.sky-last .sky-etikett::after { content: '🔒'; position: absolute; right: -6%; top: -8%; font-size: calc(var(--s) * .32); }
.sky-stjarna.sky-drar { transform: scale(1.25); z-index: 5; animation: none; cursor: grabbing; }
/* style.css ger alla "main button" bakgrund och kant i ljust tema och hav.
   Stjärnorna är knappar men ska bara vara stjärnor. */
#sky-app .sky-stjarna, #ss-app .sky-stjarna,
#sky-app .sky-stjarna:hover, #ss-app .sky-stjarna:hover { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; min-height: 0; }
@keyframes sky-blink { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }

/* ═════════════════════════════════════════════════════════════════
   starrysky.php
   ═════════════════════════════════════════════════════════════════ */
#sky-app { position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; height: 100%; min-height: 60vh; }
.sky-topp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.sky-topp h1 { margin: 0; font-family: 'Orbitron', sans-serif; font-size: clamp(1.1rem, 2.2vw, 1.7rem); color: var(--ss-text); }
.sky-topp small { color: var(--ss-text2); font-size: .95rem; }
.sky-redigera {
    display: none; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 12px;
    border: 2px dashed var(--ss-guld); color: var(--ss-text); background: color-mix(in srgb, var(--ss-guld) 12%, transparent);
}
#sky-app.sky-redigeringslage .sky-redigera { display: flex; }
#sky-himmel .sky-stjarna { --s: clamp(44px, 5.5vw, 84px); }
#sky-himmel { position: relative; flex: 1; min-height: 55vh; width: 100%; }
#sky-app.sky-redigeringslage #sky-himmel { outline: 2px dashed color-mix(in srgb, var(--ss-guld) 60%, transparent); border-radius: 14px; }
#sky-app.sky-redigeringslage .sky-stjarna { animation: none; cursor: grab; }

/* Dialoger */
.ss-overlay {
    position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(2, 4, 20, .82);
}
.ss-overlay[hidden] { display: none; }
[data-theme="ljus"] .ss-overlay { background: rgba(226, 232, 240, .88); }
.ss-dialog {
    position: relative; width: min(94vw, 560px); max-height: 92vh; overflow-y: auto; padding: 22px;
    background: var(--ss-yta); color: var(--ss-text); border: 1px solid var(--ss-kant2); border-radius: 20px;
    box-shadow: 0 24px 70px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 14px;
}
.ss-dialog h2 { margin: 0; font-family: 'Orbitron', sans-serif; font-size: 1.2rem; color: var(--ss-text); }
.ss-dialog .ss-stang { position: absolute; top: 12px; right: 12px; width: 42px; min-height: 42px; padding: 0; }
.ss-dialog-knappar { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.ss-tvaspalt { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Öppnad stjärna */
.sky-oppen { width: min(94vw, 760px); align-items: center; text-align: center; padding-top: 18px; }
.sky-oppen-stjarna { width: clamp(110px, 22vmin, 180px); height: clamp(110px, 22vmin, 180px); animation: sky-in .55s cubic-bezier(.2, 1.4, .4, 1); filter: drop-shadow(0 0 22px rgba(255, 215, 0, .9)); }
.sky-oppen-stjarna svg { width: 100%; height: 100%; }
.sky-oppen-stjarna .sky-fyll { fill: url(#skyGuld); stroke: #f59e0b; stroke-width: 2; }
.sky-oppen-namn { font-family: 'Orbitron', sans-serif; font-size: clamp(1.1rem, 2.4vw, 1.6rem); color: var(--ss-guld); margin: 0; }
.sky-innehall {
    width: 100%; font-size: clamp(1.15rem, 2.6vw, 1.8rem); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
    padding: 14px 18px; border-radius: 14px; background: var(--ss-yta2); color: var(--ss-text);
    animation: sky-fram .5s .25s both;
}
.sky-innehall.sky-emoji { font-size: clamp(3.5rem, 12vmin, 7rem); line-height: 1.2; background: none; }
.sky-innehall.sky-tomt { color: var(--ss-mu); font-style: italic; font-size: 1.1rem; }
.sky-lastbox { color: var(--ss-text); font-size: 1.15rem; }
.sky-lastbox b { color: var(--ss-fara); }
@keyframes sky-in { from { transform: scale(.1) rotate(-160deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sky-fram { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
    .ss-tvaspalt { grid-template-columns: 1fr; }
    .sky-stjarna { --s: clamp(34px, 9vw, 52px); }
}
@media (prefers-reduced-motion: reduce) {
    .sky-stjarna, .sky-oppen-stjarna, .sky-innehall { animation: none !important; }
}

/* ── Helskärm (starrysky.php) ───────────────────────────────────────
   Bara #sky-app visas i helskärm (se $fullscreenelement i sidan), så
   sidhuvud, footer, sidopaneler och flytande ikoner syns inte. */
#sky-app:fullscreen { width: 100vw; height: 100vh; padding: 2vh 2.5vw; overflow: hidden;
    background: radial-gradient(ellipse at 30% 15%, #1b2356 0%, #0a0e2e 55%, #03040f 100%); }
#sky-app:-webkit-full-screen { width: 100vw; height: 100vh; padding: 2vh 2.5vw; overflow: hidden;
    background: radial-gradient(ellipse at 30% 15%, #1b2356 0%, #0a0e2e 55%, #03040f 100%); }
[data-theme="ljus"] #sky-app:fullscreen { background: linear-gradient(180deg, #eef2ff, #dbeafe); }
[data-theme="hav"]  #sky-app:fullscreen { background: radial-gradient(ellipse at 30% 15%, #0f4c6e 0%, #062a3d 60%, #021520 100%); }
#sky-app:fullscreen .sky-topp h1 { color: #fff; }
#sky-app:fullscreen .sky-topp small { color: #cbd5e1; }
[data-theme="ljus"] #sky-app:fullscreen .sky-topp h1 { color: #1e293b; }
[data-theme="ljus"] #sky-app:fullscreen .sky-topp small { color: #475569; }
#sky-app:fullscreen #sky-himmel .sky-stjarna { --s: clamp(48px, 6vw, 110px); }

.sky-lamna { display: none !important; }
#sky-app:fullscreen .sky-lamna, #sky-app:-webkit-full-screen .sky-lamna {
    display: inline-flex !important; position: absolute; bottom: 14px; right: 14px; z-index: 10;
    opacity: 0; pointer-events: none; transition: opacity .3s;
}
#sky-app.sky-visa-lamna .sky-lamna { opacity: .9 !important; pointer-events: auto !important; }

/* Reservläget när webbläsaren inte har helskärm (t.ex. iPhone):
   php/ks_helskarm.php sätter html.ks-fokus. Göm allt utom himlen. */
html.ks-fokus .left-container, html.ks-fokus .right-container, html.ks-fokus #ksav,
html.ks-fokus #ttfw-root, html.ks-fokus .ks-tts-slid, html.ks-fokus .sidebar, html.ks-fokus #sidebar { display: none !important; }