/* ============================================
   Theme switcher (header dropdown)
   ============================================ */
.theme-switcher { position: relative; display: flex; align-items: center; }
.theme-switcher .theme-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.theme-switcher .theme-btn:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--glow-primary);
}
.theme-switcher .theme-btn .theme-icon { font-size: 14px; }
.theme-switcher .theme-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    padding: 6px;
    min-width: 160px;
    z-index: 1000;
    display: none;
}
.theme-switcher.open .theme-menu { display: block; }
.theme-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    color: var(--text-primary);
    font-size: 13px;
    transition: background var(--transition-fast);
}
.theme-menu-item:hover { background: var(--bg-tertiary); }
.theme-menu-item.active { background: rgba(127,127,127,0.12); }
.theme-menu-item .swatch {
    width: 18px; height: 18px; border-radius: 50%;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}
.theme-menu-item[data-theme-id="dark"] .swatch    { background: linear-gradient(135deg,#1b2035,#5ab0d8); }
.theme-menu-item[data-theme-id="light"] .swatch   { background: linear-gradient(135deg,#eaeef8,#1560b0); }
.theme-menu-item[data-theme-id="playful"] .swatch { background: linear-gradient(135deg,#7c3aed,#06b6d4 50%,#f472b6); }
.theme-menu-item .check { margin-left: auto; opacity: 0; font-size: 12px; color: var(--accent-success); }
.theme-menu-item.active .check { opacity: 1; }


/* =====================================================================
   LIGHT THEME — modules use the light palette as well so module bodies
   match the page chrome (per Electronic Module Designs - lightColors).
   Skeleton uses a darker gray so it stands out on the light canvas.
   ===================================================================== */

[data-theme="light"] .module {
    background: var(--bg-module) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 6px 20px rgba(70, 80, 120, 0.15) !important;
}
[data-theme="light"] .module:hover {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 6px 22px rgba(21, 96, 176, 0.25) !important;
}
[data-theme="light"] .module-label {
    color: var(--module-label-color) !important;
    text-shadow: var(--module-label-shadow) !important;
}

[data-theme="light"] .skeleton-plastic {
    background: rgba(70, 80, 120, 0.55) !important;
    border: 1px solid rgba(50, 60, 90, 0.7) !important;
}
[data-theme="light"] .skeleton-cable {
    background: rgba(216, 120, 32, 0.55) !important;
    border: 1px solid rgba(176, 90, 16, 0.75) !important;
}

[data-theme="light"] .modal-content {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}
[data-theme="light"] .modal-header h3,
[data-theme="light"] .modal-body { color: var(--text-primary); }
[data-theme="light"] .modal-close { color: var(--text-primary); }


/* =====================================================================
   PLAYFUL / COLORFUL THEME — page stays light, modules become vivid
   gradient cards (palette inspired by Electronic Module Designs).
   Each category gets its own gradient; module label is white.
   ===================================================================== */

[data-theme="playful"] body { background: #f0f3ff; }

[data-theme="playful"] .skeleton-plastic {
    background: rgba(124, 58, 237, 0.20) !important;
    border: 1px solid rgba(124, 58, 237, 0.45) !important;
}
[data-theme="playful"] .skeleton-cable {
    background: rgba(244, 114, 182, 0.40) !important;
    border: 1px solid rgba(190, 24, 93, 0.7) !important;
}

[data-theme="playful"] .control-btn { border-radius: 999px; }
[data-theme="playful"] .logo-icon {
    background: linear-gradient(135deg, #7c3aed, #06b6d4 50%, #f472b6);
}

/* Module shell (playful) */
[data-theme="playful"] .module {
    background: linear-gradient(140deg, #6d28d9 0%, #8b5cf6 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18) !important;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
[data-theme="playful"] .module:hover {
    box-shadow: 0 10px 32px rgba(124, 58, 237, 0.45) !important;
}
[data-theme="playful"] .module-label {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* Per-category gradients (playful)
   Hue map adapted from Electronic Module Designs colorful palette:
     siggen  -> violet  (#6d28d9 -> #8b5cf6)
     and     -> cyan    (#0369a1 -> #06b6d4)
     sw2     -> amber   (#b45309 -> #f59e0b)
     duty    -> pink    (#be185d -> #f472b6)
*/
[data-theme="playful"] .module[data-category="logic-gates"] {
    background: linear-gradient(140deg, #0369a1 0%, #06b6d4 100%) !important;
}
[data-theme="playful"] .module[data-category="combinational"] {
    background: linear-gradient(140deg, #1d4ed8 0%, #3b82f6 100%) !important;
}
[data-theme="playful"] .module[data-category="sequential"] {
    background: linear-gradient(140deg, #b45309 0%, #f59e0b 100%) !important;
}
[data-theme="playful"] .module[data-category="flip-flops"] {
    background: linear-gradient(140deg, #047857 0%, #10b981 100%) !important;
}
[data-theme="playful"] .module[data-category="sources"] {
    background: linear-gradient(140deg, #6d28d9 0%, #8b5cf6 100%) !important;
}
[data-theme="playful"] .module[data-category="outputs"] {
    background: linear-gradient(140deg, #7e22ce 0%, #c084fc 100%) !important;
}
[data-theme="playful"] .module[data-category="motors"] {
    background: linear-gradient(140deg, #b91c1c 0%, #ef4444 100%) !important;
}
[data-theme="playful"] .module[data-category="drivers"] {
    background: linear-gradient(140deg, #be185d 0%, #f472b6 100%) !important;
}
[data-theme="playful"] .module[data-category="buttons-switches"] {
    background: linear-gradient(140deg, #0f766e 0%, #14b8a6 100%) !important;
}
[data-theme="playful"] .module[data-category="control"] {
    background: linear-gradient(140deg, #c2410c 0%, #fb923c 100%) !important;
}
[data-theme="playful"] .module[data-category="utility"] {
    background: linear-gradient(140deg, #475569 0%, #64748b 100%) !important;
}
[data-theme="playful"] .module[data-category="tutorial"] {
    background: linear-gradient(140deg, #ca8a04 0%, #facc15 100%) !important;
}

/* Modals on playful */
[data-theme="playful"] .modal-content {
    background: #ffffff;
    color: var(--text-primary);
    border-color: var(--border-color);
}
[data-theme="playful"] .modal-header h3,
[data-theme="playful"] .modal-body { color: var(--text-primary); }
[data-theme="playful"] .modal-close { color: var(--text-primary); }