/* =====================================================================
   Mindmap – temafärger
   css/mindmap-theme.css

   Allt som mindmap.php och mindmapmenu.php färgar läser sina färger
   från --mm-*-variablerna här. De bygger på sidans egna variabler
   (--color-bg-*, --color-text-*, --gradient-*) i css/style.css och
   följer därför temat (rymd, hav, ljus, jul) direkt, även om temat byts
   medan sidan är öppen.

   Laddas efter css/style.css.
   ===================================================================== */

/* ── Rymd (standard) ── */
:root {
    --mm-gold:        #ffd700;
    --mm-line:        #ffd700;                       /* kopplingslinjer på canvas */
    --mm-accent:      #667eea;                       /* listrader, markeringar */

    --mm-text:        var(--color-text-primary);
    --mm-text-soft:   var(--color-text-secondary);

    --mm-surface:       color-mix(in srgb, var(--color-bg-secondary) 96%, transparent);
    --mm-surface-solid: var(--color-bg-secondary);
    --mm-modal-bg:      linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
    --mm-backdrop:      var(--color-overlay);
    --mm-shadow:        var(--shadow-md);
    --mm-input-bg:      color-mix(in srgb, var(--color-bg-primary) 55%, transparent);

    --mm-border:          color-mix(in srgb, var(--mm-gold) 35%, transparent);
    --mm-hairline:        color-mix(in srgb, var(--mm-text) 14%, transparent);
    --mm-hairline-strong: color-mix(in srgb, var(--mm-text) 32%, transparent);
    --mm-chip:            color-mix(in srgb, var(--mm-text) 10%, transparent);
    --mm-chip-hover:      color-mix(in srgb, var(--mm-text) 20%, transparent);
    --mm-chip-soft:       color-mix(in srgb, var(--mm-text) 5%, transparent);

    --mm-btn-bg:      var(--gradient-purple);
    --mm-btn-text:    #fff;
    --mm-danger:      linear-gradient(135deg, #f14668 0%, #d63651 100%);

    /* Noder: hela noden har en och samma färg, texten ligger direkt på den */
    --mm-node-bg:     linear-gradient(135deg, rgba(102,126,234,.95) 0%, rgba(118,75,162,.95) 100%);
    --mm-node-text:   #fff;
    --mm-node-border: color-mix(in srgb, var(--mm-gold) 50%, transparent);
    --mm-central-bg:  linear-gradient(135deg, rgba(255,215,0,.95) 0%, rgba(255,237,78,.95) 100%);
    --mm-central-text:#1a1500;
}

/* ── Hav ── */
[data-theme="hav"] {
    --mm-accent:    #2aa3c2;
    --mm-btn-bg:    linear-gradient(135deg, #2aa3c2 0%, #14708f 100%);
    --mm-node-bg:   linear-gradient(135deg, rgba(34,156,186,.95) 0%, rgba(17,104,134,.95) 100%);
}

/* ── Ljus ──
   Vit bakgrund: guldet mörkas ner, annars försvinner linjer och rubriker. */
[data-theme="ljus"] {
    --mm-gold:      #8a5d22;
    --mm-line:      #8a5d22;
    --mm-surface:   color-mix(in srgb, var(--color-bg-secondary) 98%, transparent);
    --mm-modal-bg:  linear-gradient(135deg, #ffffff 0%, var(--color-bg-secondary) 100%);
    --mm-input-bg:  #ffffff;
    --mm-node-bg:   linear-gradient(135deg, rgba(78,102,214,.97) 0%, rgba(104,72,170,.97) 100%);
    --mm-node-border: color-mix(in srgb, #ffffff 55%, transparent);
    --mm-central-bg:  linear-gradient(135deg, #f6cf3a 0%, #f9e27a 100%);
}

/* ── Korallrev: det ljusa temat (ovan) gäller, men linjerna är havsblå ── */
html[data-variant="korall"], html[data-variant="klassrum"] {
    --mm-line:      #0b5a78;
    --mm-surface:   color-mix(in srgb, #ffffff 82%, transparent);
}

/* ── Jul ── */
[data-theme="jul"] {
    --mm-accent:    #3f9a63;
    --mm-btn-bg:    linear-gradient(135deg, #3a8f5c 0%, #206140 100%);
    --mm-node-bg:   linear-gradient(135deg, rgba(52,134,86,.95) 0%, rgba(30,92,57,.95) 100%);
    --mm-danger:    linear-gradient(135deg, #e5483c 0%, #a9261d 100%);
}

/* ═══ Dialoger (båda sidorna) ═══ */
.mm-modal-overlay {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; justify-content: center; align-items: center;
    background: var(--mm-backdrop);
    backdrop-filter: blur(5px);
}
.mm-modal {
    position: relative;
    width: 90%; max-width: 500px; max-height: 80vh; overflow-y: auto;
    padding: 30px; border-radius: 15px;
    background: var(--mm-modal-bg);
    color: var(--mm-text);
    border: 2px solid var(--mm-border);
    box-shadow: var(--mm-shadow);
}
.mm-modal-icon  { text-align: center; font-size: 3rem; margin-bottom: 15px; }
.mm-modal-title {
    margin: 0 0 20px; text-align: center;
    color: var(--mm-gold); font-family: 'Orbitron', sans-serif;
}
.mm-modal-message {
    margin-bottom: 25px; text-align: center; line-height: 1.6;
    color: var(--mm-text); white-space: pre-line;
}
.mm-modal .mm-modal-input {
    width: 100%; box-sizing: border-box; margin-top: 10px; padding: 12px;
    border: 2px solid var(--mm-border); border-radius: 8px;
    background: var(--mm-input-bg); color: var(--mm-text);
    font-family: 'Orbitron', sans-serif; font-size: 1rem;
}
.mm-modal .mm-modal-input:focus { outline: 2px solid var(--mm-gold); outline-offset: 1px; border-color: var(--mm-gold); }
.mm-modal-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.mm-modal-btn {
    padding: 12px 30px; border: none; border-radius: 8px; cursor: pointer;
    font-family: 'Orbitron', sans-serif; font-size: 1rem;
    background: var(--mm-btn-bg); color: var(--mm-btn-text);
    transition: transform .2s ease, box-shadow .2s ease;
}
.mm-modal-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.mm-modal-btn--danger { background: var(--mm-danger); color: #fff; }
.mm-modal-btn--cancel {
    background: transparent; color: var(--mm-text);
    border: 2px solid var(--mm-hairline-strong);
}
.mm-modal-btn:focus-visible { outline: 3px solid var(--mm-gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .mm-modal-btn { transition: none; }
}