/* ========================================
   COMMERCIFY TRANSLUCENT COLORS - OPTIMISÉ PERFORMANCE
   Version ultra-légère sans kill CPU/GPU/RAM/IO
   ======================================== */

:root {
    --translucent-menu-color: transparent;
    --translucent-menu-color-strong: transparent;
    --translucent-interface-color: transparent;
    --translucent-interface-color-strong: transparent;
}

/* ========================================
   MENU - Couleurs solides uniquement (pas de blend-mode)
   ======================================== */

[class*="translucent-menu-color-"] .nk-sidebar,
[class*="translucent-menu-color-"] .nk-sidebar-menu,
[class*="translucent-menu-color-"] .nk-menu {
    background-color: var(--menu-bg-color);
}

.translucent-menu-color-red { --menu-bg-color: #fecaca; --menu-border: #fca5a5; --menu-hover: #fda4af; }
.translucent-menu-color-blue { --menu-bg-color: #bfdbfe; --menu-border: #93c5fd; --menu-hover: #93c5fd; }
.translucent-menu-color-black { --menu-bg-color: #6b7280; --menu-border: #94a3b8; --menu-hover: #94a3b8; }
.translucent-menu-color-green { --menu-bg-color: #bbf7d0; --menu-border: #86efac; --menu-hover: #86efac; }
.translucent-menu-color-purple { --menu-bg-color: #ddd6fe; --menu-border: #c4b5fd; --menu-hover: #c4b5fd; }
.translucent-menu-color-orange { --menu-bg-color: #fed7aa; --menu-border: #fdba74; --menu-hover: #fdba74; }
.translucent-menu-color-yellow { --menu-bg-color: #fef08a; --menu-border: #fde047; --menu-hover: #fde047; }
.translucent-menu-color-pink { --menu-bg-color: #fbcfe8; --menu-border: #f9a8d4; --menu-hover: #f9a8d4; }

[class*="translucent-menu-color-"] .nk-menu-link,
[class*="translucent-menu-color-"] .nk-menu-item,
[class*="translucent-menu-color-"] .nk-menu-badge {
    border-color: var(--menu-border);
}

[class*="translucent-menu-color-"] .nk-menu-sub,
[class*="translucent-menu-color-"] .nk-menu-link:hover {
    background-color: var(--menu-hover);
}

/* ========================================
   MENU - Ajustements Dark Mode
   ======================================== */

.dark-mode.translucent-menu-color-red { --menu-bg-color: #b91c1c; --menu-border: #ef4444; --menu-hover: #dc2626; }
.dark-mode.translucent-menu-color-blue { --menu-bg-color: #1d4ed8; --menu-border: #60a5fa; --menu-hover: #2563eb; }
.dark-mode.translucent-menu-color-black { --menu-bg-color: #1f2937; --menu-border: #64748b; --menu-hover: #334155; }
.dark-mode.translucent-menu-color-green { --menu-bg-color: #15803d; --menu-border: #4ade80; --menu-hover: #16a34a; }
.dark-mode.translucent-menu-color-purple { --menu-bg-color: #6d28d9; --menu-border: #c4b5fd; --menu-hover: #7c3aed; }
.dark-mode.translucent-menu-color-orange { --menu-bg-color: #c2410c; --menu-border: #fb923c; --menu-hover: #ea580c; }
.dark-mode.translucent-menu-color-yellow { --menu-bg-color: #a16207; --menu-border: #fde047; --menu-hover: #ca8a04; }
.dark-mode.translucent-menu-color-pink { --menu-bg-color: #be185d; --menu-border: #f9a8d4; --menu-hover: #db2777; }

/* ========================================
   INTERFACE - Couleurs solides uniquement (pas de blend-mode)
   ======================================== */

[class*="translucent-interface-color-"] .nk-body,
[class*="translucent-interface-color-"] .nk-content,
[class*="translucent-interface-color-"] .nk-main {
    background-color: var(--interface-bg-color);
}

.translucent-interface-color-red { --interface-bg-color: rgba(220, 38, 38, 0.08); --interface-border: rgba(220, 38, 38, 0.12); --interface-overlay: rgba(220, 38, 38, 0.05); }
.translucent-interface-color-blue { --interface-bg-color: rgba(37, 99, 235, 0.08); --interface-border: rgba(37, 99, 235, 0.12); --interface-overlay: rgba(37, 99, 235, 0.05); }
.translucent-interface-color-black { --interface-bg-color: rgba(0, 0, 0, 0.08); --interface-border: rgba(0, 0, 0, 0.12); --interface-overlay: rgba(0, 0, 0, 0.05); }
.translucent-interface-color-green { --interface-bg-color: rgba(34, 197, 94, 0.08); --interface-border: rgba(34, 197, 94, 0.12); --interface-overlay: rgba(34, 197, 94, 0.05); }
.translucent-interface-color-purple { --interface-bg-color: rgba(168, 85, 247, 0.08); --interface-border: rgba(168, 85, 247, 0.12); --interface-overlay: rgba(168, 85, 247, 0.05); }
.translucent-interface-color-orange { --interface-bg-color: rgba(249, 115, 22, 0.08); --interface-border: rgba(249, 115, 22, 0.12); --interface-overlay: rgba(249, 115, 22, 0.05); }
.translucent-interface-color-yellow { --interface-bg-color: rgba(234, 179, 8, 0.08); --interface-border: rgba(234, 179, 8, 0.12); --interface-overlay: rgba(234, 179, 8, 0.05); }
.translucent-interface-color-pink { --interface-bg-color: rgba(236, 72, 153, 0.08); --interface-border: rgba(236, 72, 153, 0.12); --interface-overlay: rgba(236, 72, 153, 0.05); }

[class*="translucent-interface-color-"] .card,
[class*="translucent-interface-color-"] .modal-content {
    background-color: var(--interface-overlay);
    border-color: var(--interface-border);
}

[class*="translucent-interface-color-"] .btn,
[class*="translucent-interface-color-"] .form-control,
[class*="translucent-interface-color-"] .border {
    border-color: var(--interface-border);
}

[class*="translucent-interface-color-"] .overlay,
[class*="translucent-interface-color-"] .backdrop,
[class*="translucent-interface-color-"] .dropdown-menu {
    background-color: var(--interface-overlay);
}

/* ========================================
   INTERFACE - Ajustements Dark Mode (opacité augmentée)
   ======================================== */

.dark-mode.translucent-interface-color-red { --interface-bg-color: rgba(220, 38, 38, 0.12); --interface-border: rgba(220, 38, 38, 0.18); --interface-overlay: rgba(220, 38, 38, 0.08); }
.dark-mode.translucent-interface-color-blue { --interface-bg-color: rgba(37, 99, 235, 0.12); --interface-border: rgba(37, 99, 235, 0.18); --interface-overlay: rgba(37, 99, 235, 0.08); }
.dark-mode.translucent-interface-color-black { --interface-bg-color: rgba(0, 0, 0, 0.12); --interface-border: rgba(0, 0, 0, 0.18); --interface-overlay: rgba(0, 0, 0, 0.08); }
.dark-mode.translucent-interface-color-green { --interface-bg-color: rgba(34, 197, 94, 0.12); --interface-border: rgba(34, 197, 94, 0.18); --interface-overlay: rgba(34, 197, 94, 0.08); }
.dark-mode.translucent-interface-color-purple { --interface-bg-color: rgba(168, 85, 247, 0.12); --interface-border: rgba(168, 85, 247, 0.18); --interface-overlay: rgba(168, 85, 247, 0.08); }
.dark-mode.translucent-interface-color-orange { --interface-bg-color: rgba(249, 115, 22, 0.12); --interface-border: rgba(249, 115, 22, 0.18); --interface-overlay: rgba(249, 115, 22, 0.08); }
.dark-mode.translucent-interface-color-yellow { --interface-bg-color: rgba(234, 179, 8, 0.12); --interface-border: rgba(234, 179, 8, 0.18); --interface-overlay: rgba(234, 179, 8, 0.08); }
.dark-mode.translucent-interface-color-pink { --interface-bg-color: rgba(236, 72, 153, 0.12); --interface-border: rgba(236, 72, 153, 0.18); --interface-overlay: rgba(236, 72, 153, 0.08); }

/* ========================================
   MENU DASLITE - Boutons jour/nuit et install
   ======================================== */

.menu-dark-mode-btn,
.menu-install-btn {
    background-color: #000000 !important;
    border: none !important;
    color: #ffffff !important;
}

.menu-dark-mode-btn span,
.menu-dark-mode-btn svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

.menu-dark-mode-btn svg path {
    stroke: #ffffff !important;
    fill: #ffffff !important;
}

/* Permettre aux couleurs définies dans le SVG de la disquette de s'afficher */
.menu-install-btn svg {
    color: #ffffff !important;
}

.menu-install-btn svg path {
    /* Ne pas forcer fill/stroke pour permettre les couleurs définies dans le SVG */
}