/* =====================================================================
   VocabStar – menysidan
   css/vocabstar-menu.css   (vocabstarmenu.php)

   Förut låg all stil i sidan, med fasta mörka färger, en egen svart
   bakgrund på body och en global nollställning (* {margin:0;padding:0})
   som även slog mot sidhuvud och sidopanel. Den gula accentfärgen
   (#e8ff47) syntes inte alls på vitt. Nu följer allt temat, och
   accenten har en mörkare variant i det ljusa temat.

   style.css färgar "main button" i ljust tema och hav – reglerna här
   har id i väljaren (#vm-meny, #vm-vanster, #vm-dialog) och vinner.
   ===================================================================== */

.vm-tema {
    --vm-yta:   var(--color-bg-secondary, #0f0f1a);
    --vm-yta2:  var(--color-bg-tertiary, #171726);
    --vm-kant:  var(--color-border-subtle, #252540);
    --vm-kant2: var(--color-accent-border, #353550);
    --vm-text:  var(--color-text-primary, #eeeef8);
    --vm-text2: var(--color-text-secondary, #a0a0b8);
    --vm-mu:    var(--color-text-muted, #888899);
    --vm-acc:   #e8ff47;          /* fyllning: knappar, markeringar */
    --vm-acc-t: #e8ff47;          /* accent som textfärg */
    --vm-pa-acc:#14140a;          /* text på accentfyllning */
    --vm-gron:  #47ffb4;
    --vm-rod:   #ff5b69;
    --vm-orange:#ffb347;
    --vm-lila:  #a78bfa;
    --vm-skugga: 0 6px 20px rgba(0,0,0,.35);
    color: var(--vm-text);
    font-family: 'Syne', 'Exo 2', system-ui, sans-serif;
}
[data-theme="ljus"] .vm-tema {
    --vm-yta: #ffffff; --vm-yta2: #f4f6f9; --vm-kant: #e2e8f0; --vm-kant2: #cbd5e1;
    --vm-text: #1e293b; --vm-text2: #475569; --vm-mu: #64748b;
    --vm-acc: #84cc16; --vm-acc-t: #3f6212; --vm-pa-acc: #1a2e05;
    --vm-gron: #15803d; --vm-rod: #b91c1c; --vm-orange: #b45309; --vm-lila: #6d28d9;
    --vm-skugga: 0 6px 18px rgba(35,48,58,.10);
}
.vm-tema *, .vm-tema *::before, .vm-tema *::after { box-sizing: border-box; }
.vm-tema :focus-visible { outline: 3px solid color-mix(in srgb, var(--vm-acc) 70%, transparent); outline-offset: 2px; }
.vm-tema [hidden], .vm-tema[hidden] { display: none !important; }
.vm-mono { font-family: 'Space Mono', ui-monospace, monospace; }

/* ── Knappar ─────────────────────────────────────────────────────── */
:is(#vm-meny, #vm-vanster, #vm-dialog) .vm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 7px 14px;
    border-radius: 10px; border: 1px solid var(--vm-kant2); background: var(--vm-yta2); color: var(--vm-text);
    font: 700 .88rem 'Syne', 'Exo 2', system-ui, sans-serif; cursor: pointer; text-decoration: none; box-shadow: none; transform: none;
}
:is(#vm-meny, #vm-vanster, #vm-dialog) .vm-btn:hover { border-color: var(--vm-acc-t); background: var(--vm-yta2); }
:is(#vm-meny, #vm-vanster, #vm-dialog) .vm-btn.vm-primar { background: var(--vm-acc); border-color: transparent; color: var(--vm-pa-acc); }
:is(#vm-meny, #vm-vanster, #vm-dialog) .vm-btn.vm-primar:hover { filter: brightness(1.06); }
:is(#vm-meny, #vm-vanster, #vm-dialog) .vm-btn.vm-fara { background: var(--vm-rod); border-color: transparent; color: #fff; }
:is(#vm-meny, #vm-vanster, #vm-dialog) .vm-btn:disabled { opacity: .5; cursor: default; }
:is(#vm-meny) .vm-btn.vm-liten { min-height: 32px; padding: 4px 10px; font-size: .8rem; border-radius: 8px; }
:is(#vm-meny) .vm-ikon {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0;
    border-radius: 8px; border: 1px solid var(--vm-kant2); background: var(--vm-yta); color: var(--vm-text);
    font-size: .95rem; cursor: pointer; text-decoration: none; box-shadow: none; transform: none;
}
#vm-meny .vm-ikon:hover { border-color: var(--vm-acc-t); background: var(--vm-yta); }
#vm-meny .vm-ikon.vm-fara:hover { border-color: var(--vm-rod); color: var(--vm-rod); }
#vm-meny .vm-ikon.vm-start { color: var(--vm-acc-t); border-color: color-mix(in srgb, var(--vm-acc-t) 45%, var(--vm-kant2)); }

/* ── Vänsterspalten ──────────────────────────────────────────────── */
#vm-vanster { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.vm-logo { display: flex; align-items: center; gap: 10px; font: 800 1.05rem 'Syne', sans-serif; letter-spacing: -.3px; color: var(--vm-text); }
.vm-logo em { color: var(--vm-acc-t); font-style: normal; }
.vm-under { font-size: .82rem; color: var(--vm-text2); margin: 0; }
.vm-piller { display: flex; gap: 6px; flex-wrap: wrap; }
.vm-piller span { background: var(--vm-yta); border: 1px solid var(--vm-kant); border-radius: 30px; padding: 4px 11px; font-size: .75rem; color: var(--vm-text2); }
.vm-piller b { color: var(--vm-acc-t); }

/* ── Paneler ─────────────────────────────────────────────────────── */
#vm-meny { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 780px; margin: 0 auto; }
.vm-panel { background: var(--vm-yta); border: 1px solid var(--vm-kant); border-radius: 16px; padding: 16px 18px; box-shadow: var(--vm-skugga); }
.vm-panel > h2, .vm-panel > summary {
    display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 800 1rem 'Syne', sans-serif; color: var(--vm-text);
}
.vm-nr {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    font: 700 .75rem 'Space Mono', monospace; border: 2px solid var(--vm-acc-t); color: var(--vm-acc-t);
    background: color-mix(in srgb, var(--vm-acc) 14%, transparent);
}
details.vm-panel > summary { cursor: pointer; list-style: none; margin: 0; }
details.vm-panel > summary::-webkit-details-marker { display: none; }
details.vm-panel > summary::after { content: '▾'; margin-left: auto; color: var(--vm-mu); transition: transform .2s; }
details.vm-panel[open] > summary { margin-bottom: 12px; }
details.vm-panel[open] > summary::after { transform: rotate(180deg); }
.vm-liten { font-size: .82rem; color: var(--vm-text2); margin: 6px 0 0; line-height: 1.45; }
.vm-etikett { display: block; font: 700 .68rem 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--vm-mu); margin-bottom: 5px; }

/* ── Fält ────────────────────────────────────────────────────────── */
.vm-tema .vm-falt, .vm-tema select.vm-falt {
    width: 100%; min-height: 40px; background: var(--vm-yta2); border: 1px solid var(--vm-kant2); color: var(--vm-text);
    font: 500 .92rem 'Syne', 'Exo 2', system-ui, sans-serif; padding: 8px 12px; border-radius: 10px; outline: none;
}
.vm-tema .vm-falt:focus { border-color: var(--vm-acc-t); }
.vm-tema textarea.vm-falt { min-height: 70px; resize: vertical; font: .78rem 'Space Mono', monospace; }

/* ── 1. Språk ────────────────────────────────────────────────────── */
.vm-sprak { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.vm-sprak > div { flex: 1; min-width: 140px; }
#vm-meny .vm-byt {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--vm-kant2); background: var(--vm-yta2);
    color: var(--vm-acc-t); font-size: 1.1rem; cursor: pointer; box-shadow: none; transition: transform .25s;
}
#vm-meny .vm-byt:hover { transform: rotate(180deg); border-color: var(--vm-acc-t); background: var(--vm-yta2); }

/* ── 2. Ordlistor ────────────────────────────────────────────────── */
.vm-listor { display: flex; flex-direction: column; gap: 6px; }
.vm-lista {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 12px; border-radius: 12px;
    border: 2px solid var(--vm-kant); background: var(--vm-yta2); cursor: pointer;
}
.vm-lista:hover { border-color: var(--vm-kant2); }
.vm-lista[aria-checked="true"] {
    border-color: var(--vm-acc-t); background: color-mix(in srgb, var(--vm-acc) 12%, var(--vm-yta2));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vm-acc) 22%, transparent);
}
.vm-lista-ikon { font-size: 1.15rem; }
.vm-lista-info { flex: 1; min-width: 0; }
.vm-lista-namn { font-weight: 800; font-size: .95rem; color: var(--vm-text); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; overflow-wrap: anywhere; }
.vm-lista[aria-checked="true"] .vm-lista-namn { color: var(--vm-acc-t); }
.vm-lista-meta { font: .72rem 'Space Mono', monospace; color: var(--vm-mu); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; }
.vm-lista-meta .vm-vantar { color: var(--vm-orange); }
.vm-lista-knappar { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.vm-bricka { font: .62rem 'Space Mono', monospace; border: 1px solid color-mix(in srgb, var(--vm-acc-t) 45%, transparent); color: var(--vm-acc-t); border-radius: 4px; padding: 1px 5px; }
.vm-tom { text-align: center; padding: 20px; color: var(--vm-mu); font-size: .9rem; }
.vm-tom span { font-size: 1.6rem; display: block; margin-bottom: 6px; }
.vm-ny { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.vm-ny .vm-falt { flex: 1; min-width: 180px; }

/* Redigeraren */
.vm-redigera { margin-top: 12px; border: 1px solid var(--vm-kant2); border-radius: 14px; padding: 14px; background: var(--vm-yta2); }
.vm-red-huvud { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.vm-red-huvud .vm-falt { flex: 1; min-width: 160px; font-weight: 700; }
.vm-kategorier { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
#vm-meny .vm-kat {
    background: var(--vm-yta); border: 1px solid var(--vm-kant2); color: var(--vm-text2); border-radius: 20px; padding: 3px 11px;
    font: .72rem 'Space Mono', monospace; cursor: pointer; box-shadow: none; min-height: 0;
}
#vm-meny .vm-kat:hover { border-color: var(--vm-acc-t); background: var(--vm-yta); }
#vm-meny .vm-kat[aria-pressed="true"] { border-color: var(--vm-acc-t); color: var(--vm-acc-t); background: color-mix(in srgb, var(--vm-acc) 12%, var(--vm-yta)); }
.vm-sokrad { display: flex; gap: 6px; }
.vm-sokrad .vm-falt { flex: 1; }
.vm-forslag { background: var(--vm-yta); border: 1px solid var(--vm-kant2); border-radius: 10px; max-height: 280px; overflow-y: auto; margin-top: 4px; }
#vm-meny .vm-forslag-rad {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; text-align: left; cursor: pointer;
    border: 0; border-bottom: 1px solid var(--vm-kant); background: transparent; color: var(--vm-text); font: .88rem 'Syne', sans-serif; box-shadow: none; border-radius: 0;
}
#vm-meny .vm-forslag-rad:last-child { border-bottom: 0; }
#vm-meny .vm-forslag-rad:hover, #vm-meny .vm-forslag-rad:focus-visible { background: var(--vm-yta2); }
#vm-meny .vm-forslag-rad.vm-flera { flex-direction: column; align-items: flex-start; cursor: default; }
.vm-forslag-rad img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }
.vm-forslag-rad small { display: block; font: .72rem 'Space Mono', monospace; color: var(--vm-text2); }
.vm-forslag-rad small.vm-fel { color: var(--vm-rod); }
.vm-forslag-rad small.vm-fon { color: var(--vm-mu); }
.vm-alternativ { display: flex; flex-wrap: wrap; gap: 5px; }
#vm-meny .vm-alt {
    border: 1px solid var(--vm-kant2); background: var(--vm-yta2); color: var(--vm-text); border-radius: 6px; padding: 3px 10px;
    font: 700 .8rem 'Syne', sans-serif; cursor: pointer; box-shadow: none; min-height: 0;
}
#vm-meny .vm-alt:hover { border-color: var(--vm-acc-t); color: var(--vm-acc-t); background: var(--vm-yta2); }
.vm-ord { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vm-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--vm-yta); border: 1px solid var(--vm-kant2); border-radius: 30px; padding: 3px 5px 3px 11px; font: .78rem 'Space Mono', monospace; color: var(--vm-text); }
.vm-chip.vm-lokal { border-color: color-mix(in srgb, var(--vm-orange) 55%, transparent); }
.vm-chip .vm-pil { color: var(--vm-mu); }
.vm-chip .vm-saknas { color: var(--vm-rod); }
#vm-meny .vm-chip button { border: 0; background: none; color: var(--vm-mu); font-size: .9rem; cursor: pointer; padding: 0 4px; min-height: 0; box-shadow: none; }
#vm-meny .vm-chip button:hover { color: var(--vm-rod); background: none; }
.vm-info { margin-top: 10px; padding: 8px 12px; border-radius: 10px; font-size: .8rem; color: var(--vm-orange); border: 1px solid color-mix(in srgb, var(--vm-orange) 40%, transparent); background: color-mix(in srgb, var(--vm-orange) 8%, transparent); }

/* ── 3. Spelläge ─────────────────────────────────────────────────── */
.vm-lagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
#vm-meny .vm-lage {
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px; border-radius: 12px; text-align: center;
    border: 2px solid var(--vm-kant); background: var(--vm-yta2); color: var(--vm-text); cursor: pointer; box-shadow: none; transform: none;
}
#vm-meny .vm-lage:hover { border-color: var(--vm-kant2); background: var(--vm-yta2); }
#vm-meny .vm-lage[aria-checked="true"] { border-color: var(--vm-acc-t); background: color-mix(in srgb, var(--vm-acc) 12%, var(--vm-yta2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vm-acc) 22%, transparent); }
.vm-lage .vm-lage-ikon { font-size: 1.6rem; }
.vm-lage b { font-size: .9rem; }
.vm-lage small { font: .7rem 'Space Mono', monospace; color: var(--vm-text2); }

/* ── 4. Inställningar ────────────────────────────────────────────── */
.vm-installning { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; }
.vm-installning + .vm-installning { border-top: 1px solid var(--vm-kant); }
.vm-installning b { display: block; color: var(--vm-text); font-size: .92rem; }
.vm-installning small { color: var(--vm-text2); font-size: .8rem; }
.vm-vippa { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.vm-vippa input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.vm-vippa span { position: absolute; inset: 0; background: var(--vm-yta2); border: 1px solid var(--vm-kant2); border-radius: 20px; transition: .25s; }
.vm-vippa span::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: var(--vm-mu); border-radius: 50%; transition: .25s; }
.vm-vippa input:checked + span { background: var(--vm-acc); border-color: var(--vm-acc); }
.vm-vippa input:checked + span::before { transform: translateX(20px); background: var(--vm-pa-acc); }
.vm-vippa input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--vm-acc) 70%, transparent); outline-offset: 2px; }

.vm-steg { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; color: var(--vm-text); line-height: 1.45; font-size: .92rem; }

/* ── Export/import ───────────────────────────────────────────────── */
.vm-ei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vm-ei > div { background: var(--vm-yta2); border: 1px solid var(--vm-kant); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.vm-ei h3 { margin: 0; font-size: .92rem; color: var(--vm-text); }
.vm-kod { font: .72rem 'Space Mono', monospace; color: var(--vm-acc-t); word-break: break-all; background: var(--vm-yta); border: 1px solid var(--vm-kant2); border-radius: 8px; padding: 7px 9px; cursor: pointer; max-height: 120px; overflow: auto; }
.vm-resultat { padding: 7px 10px; border-radius: 8px; font-size: .8rem; }
.vm-resultat.ok { color: var(--vm-gron); border: 1px solid color-mix(in srgb, var(--vm-gron) 40%, transparent); }
.vm-resultat.fel { color: var(--vm-rod); border: 1px solid color-mix(in srgb, var(--vm-rod) 40%, transparent); }

/* ── Dialog och toast ────────────────────────────────────────────── */
.vm-dialog-bg { position: fixed; inset: 0; background: rgba(8,8,16,.7); backdrop-filter: blur(4px); z-index: 900; display: flex; align-items: center; justify-content: center; padding: 20px; }
[data-theme="ljus"] .vm-dialog-bg { background: rgba(30,41,59,.35); }
.vm-dialog { background: var(--vm-yta); border: 1px solid var(--vm-kant2); border-radius: 16px; width: 100%; max-width: 400px; box-shadow: 0 24px 80px rgba(0,0,0,.45); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.vm-dialog-ikon { font-size: 1.8rem; }
.vm-dialog h3 { margin: 0; font-size: 1.05rem; color: var(--vm-text); }
.vm-dialog p { margin: 0; font-size: .88rem; color: var(--vm-text2); line-height: 1.5; }
.vm-dialog-fot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.vm-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 950; max-width: calc(100vw - 32px);
    background: var(--vm-yta); color: var(--vm-text); border: 1px solid var(--vm-kant2); border-radius: 30px; padding: 9px 20px; font-size: .85rem; box-shadow: var(--vm-skugga); }
.vm-toast.ok { border-color: var(--vm-gron); color: var(--vm-gron); }
.vm-toast.fel { border-color: var(--vm-rod); color: var(--vm-rod); }

@media (max-width: 600px) {
    .vm-ei { grid-template-columns: 1fr; }
    .vm-lista { flex-wrap: wrap; }
    .vm-lista-knappar { width: 100%; justify-content: flex-start; }
    .vm-lagen { grid-template-columns: 1fr 1fr; }
    .vm-installning { align-items: flex-start; }
}