/* Dark Mode — scanfacture.fr
   12-color system: bg-primary/card/hover, text-primary/secondary/muted,
   border, green, red, amber, link, link-hover
   Selector: [data-theme="dark"] + !important overrides */

/* ═══ 1. CSS Variables ═══ */
[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-card: #1e293b;
    --bg-hover: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border: #334155;
    --green: #4ade80;
    --red: #f87171;
    --amber: #fbbf24;
    --link: #60a5fa;
    --link-hover: #93c5fd;
    color-scheme: dark;
}

/* ═══ 2. Body / Global ═══ */
[data-theme="dark"] body {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .radial-grid {
    background-color: #0f172a !important;
    background-image: radial-gradient(#1e293b 1px, transparent 1px) !important;
}

/* ═══ 3. Background overrides ═══ */
[data-theme="dark"] .bg-white {
    background-color: #1e293b !important;
}

[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-gray-50 {
    background-color: #0f172a !important;
}

[data-theme="dark"] .bg-slate-100,
[data-theme="dark"] .bg-gray-100 {
    background-color: #1e293b !important;
}

[data-theme="dark"] .bg-slate-200,
[data-theme="dark"] .bg-gray-200 {
    background-color: #334155 !important;
}

[data-theme="dark"] .bg-white.rounded-3xl,
[data-theme="dark"] .bg-white.rounded-2xl,
[data-theme="dark"] .bg-white.rounded-xl,
[data-theme="dark"] .bg-white.rounded-lg {
    background-color: #1e293b !important;
}

/* ═══ 4. Text color overrides (3 tiers) ═══ */
[data-theme="dark"] .text-slate-900,
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-gray-800 {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-slate-600,
[data-theme="dark"] .text-gray-600 {
    color: #94a3b8 !important;
}

[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-slate-400,
[data-theme="dark"] .text-gray-400,
[data-theme="dark"] .text-slate-300 {
    color: #64748b !important;
}

/* ═══ 5. Border overrides (all → #334155) ═══ */
[data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-slate-100,
[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-slate-300,
[data-theme="dark"] .border-gray-300 {
    border-color: #334155 !important;
}

[data-theme="dark"] .divide-slate-200 > * + * {
    border-color: #334155 !important;
}

[data-theme="dark"] .ring-slate-200 {
    --tw-ring-color: #334155 !important;
}

/* ═══ 6. Tables ═══ */
[data-theme="dark"] table th {
    background-color: #334155 !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}

[data-theme="dark"] table td {
    border-color: #334155 !important;
}

[data-theme="dark"] table tbody tr:hover {
    background-color: #334155 !important;
}

/* ═══ 7. Form controls ═══ */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #64748b !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2) !important;
}

/* ═══ 8. Shadows ═══ */
[data-theme="dark"] .shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .shadow-md,
[data-theme="dark"] .shadow {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .shadow-lg {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .shadow-xl {
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.5) !important;
}

/* ═══ 9. Navigation ═══ */
[data-theme="dark"] nav.bg-white,
[data-theme="dark"] nav .bg-white {
    background-color: #1e293b !important;
}

[data-theme="dark"] nav .dropdown-panel {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

[data-theme="dark"] nav .dropdown-panel a:hover {
    background-color: #334155 !important;
}

[data-theme="dark"] nav .hover\:bg-gray-100:hover,
[data-theme="dark"] nav .hover\:bg-gray-50:hover {
    background-color: #334155 !important;
}

[data-theme="dark"] #nav-mobile {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* ═══ 10. Footer ═══ */
[data-theme="dark"] footer {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* ═══ 11. Status colors — green ═══ */
[data-theme="dark"] .bg-emerald-50,
[data-theme="dark"] .bg-green-50 {
    background-color: rgba(74, 222, 128, 0.1) !important;
}

[data-theme="dark"] .bg-emerald-50\/50 {
    background-color: rgba(74, 222, 128, 0.05) !important;
}

[data-theme="dark"] .bg-emerald-100 {
    background-color: rgba(74, 222, 128, 0.1) !important;
}

[data-theme="dark"] .hover\:bg-emerald-50:hover {
    background-color: rgba(74, 222, 128, 0.1) !important;
}

[data-theme="dark"] .text-emerald-900,
[data-theme="dark"] .text-emerald-800,
[data-theme="dark"] .text-green-800,
[data-theme="dark"] .text-emerald-700,
[data-theme="dark"] .text-green-700,
[data-theme="dark"] .text-emerald-600,
[data-theme="dark"] .text-green-600 {
    color: #4ade80 !important;
}

[data-theme="dark"] .border-emerald-200,
[data-theme="dark"] .border-green-200,
[data-theme="dark"] .border-emerald-100 {
    border-color: #334155 !important;
}

[data-theme="dark"] .border-emerald-700 {
    border-color: #334155 !important;
}

/* ═══ 11b. Status colors — red ═══ */
[data-theme="dark"] .bg-red-50 {
    background-color: rgba(248, 113, 113, 0.1) !important;
}

[data-theme="dark"] .bg-red-100 {
    background-color: rgba(248, 113, 113, 0.1) !important;
}

[data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-red-800 {
    color: #f87171 !important;
}

[data-theme="dark"] .border-red-200 {
    border-color: rgba(248, 113, 113, 0.3) !important;
}

/* ═══ 11c. Status colors — amber ═══ */
[data-theme="dark"] .bg-amber-50 {
    background-color: rgba(251, 191, 36, 0.1) !important;
}

[data-theme="dark"] .bg-amber-100 {
    background-color: rgba(251, 191, 36, 0.1) !important;
}

[data-theme="dark"] .text-amber-800,
[data-theme="dark"] .text-amber-900,
[data-theme="dark"] .text-amber-700,
[data-theme="dark"] .text-amber-600 {
    color: #fbbf24 !important;
}

[data-theme="dark"] .border-amber-200,
[data-theme="dark"] .border-amber-500 {
    border-color: rgba(251, 191, 36, 0.4) !important;
}

/* ═══ 11d. Info / blue ═══ */
[data-theme="dark"] .bg-blue-50 {
    background-color: rgba(96, 165, 250, 0.1) !important;
}

[data-theme="dark"] .bg-blue-50\/50 {
    background-color: rgba(96, 165, 250, 0.05) !important;
}

[data-theme="dark"] .bg-blue-100 {
    background-color: rgba(96, 165, 250, 0.1) !important;
}

[data-theme="dark"] .text-blue-900,
[data-theme="dark"] .text-blue-800,
[data-theme="dark"] .text-blue-700 {
    color: #93c5fd !important;
}

[data-theme="dark"] .text-blue-600 {
    color: #60a5fa !important;
}

[data-theme="dark"] .text-blue-400 {
    color: #60a5fa !important;
}

[data-theme="dark"] .border-blue-500,
[data-theme="dark"] .border-blue-300 {
    border-color: #334155 !important;
}

[data-theme="dark"] .border-blue-200,
[data-theme="dark"] .border-blue-100 {
    border-color: #334155 !important;
}

/* ═══ 11e. Purple ═══ */
[data-theme="dark"] .bg-purple-50 {
    background-color: rgba(168, 85, 247, 0.1) !important;
}

[data-theme="dark"] .bg-purple-50\/50 {
    background-color: rgba(168, 85, 247, 0.05) !important;
}

[data-theme="dark"] .bg-purple-100 {
    background-color: rgba(168, 85, 247, 0.1) !important;
}

[data-theme="dark"] .text-purple-800,
[data-theme="dark"] .text-purple-700,
[data-theme="dark"] .text-purple-600 {
    color: #c4b5fd !important;
}

[data-theme="dark"] .text-purple-400 {
    color: #a78bfa !important;
}

[data-theme="dark"] .border-purple-200 {
    border-color: #334155 !important;
}

[data-theme="dark"] .hover\:bg-purple-100:hover {
    background-color: rgba(168, 85, 247, 0.1) !important;
}

/* ═══ 11f. Indigo ═══ */
[data-theme="dark"] .bg-indigo-100,
[data-theme="dark"] .bg-indigo-50 {
    background-color: rgba(129, 140, 248, 0.1) !important;
}

[data-theme="dark"] .text-indigo-600 {
    color: #818cf8 !important;
}

[data-theme="dark"] .border-indigo-100 {
    border-color: #334155 !important;
}

/* ═══ 11g. Cyan ═══ */
[data-theme="dark"] .bg-cyan-50 {
    background-color: rgba(6, 182, 212, 0.1) !important;
}

/* ═══ 12. Links ═══ */
[data-theme="dark"] a:not([class*="bg-"]):not([class*="text-white"]):not(.tool-button) {
    color: #60a5fa;
}

[data-theme="dark"] a:not([class*="bg-"]):not([class*="text-white"]):not(.tool-button):hover {
    color: #93c5fd;
}

/* ═══ 13. Buttons ═══ */
[data-theme="dark"] .bg-white.border.border-slate-300,
[data-theme="dark"] .bg-white.border-slate-300 {
    background-color: #334155 !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .hover\:bg-slate-50:hover,
[data-theme="dark"] .hover\:bg-gray-50:hover {
    background-color: #334155 !important;
}

[data-theme="dark"] .hover\:bg-blue-50:hover {
    background-color: rgba(96, 165, 250, 0.1) !important;
}

[data-theme="dark"] .hover\:bg-green-50:hover {
    background-color: rgba(74, 222, 128, 0.1) !important;
}

[data-theme="dark"] .hover\:bg-red-50:hover {
    background-color: rgba(248, 113, 113, 0.1) !important;
}

[data-theme="dark"] .hover\:bg-purple-50:hover {
    background-color: rgba(168, 85, 247, 0.1) !important;
}

[data-theme="dark"] .hover\:bg-emerald-100:hover {
    background-color: rgba(74, 222, 128, 0.1) !important;
}

[data-theme="dark"] .hover\:bg-blue-100:hover {
    background-color: rgba(96, 165, 250, 0.1) !important;
}

/* ═══ 14. Landing page custom classes ═══ */
[data-theme="dark"] .hero-pattern {
    background-image: radial-gradient(#334155 1px, transparent 1px) !important;
}

[data-theme="dark"] .bg-background-light {
    background-color: #0f172a !important;
}

[data-theme="dark"] .bg-background-subtle {
    background-color: #1e293b !important;
}

[data-theme="dark"] .bg-background-dark {
    background-color: #0f172a !important;
}

[data-theme="dark"] .text-text-primary {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .text-text-secondary {
    color: #94a3b8 !important;
}

[data-theme="dark"] .text-border-light {
    color: #334155 !important;
}

[data-theme="dark"] .border-border-light {
    border-color: #334155 !important;
}

[data-theme="dark"] .ring-gray-200 {
    --tw-ring-color: #334155 !important;
}

[data-theme="dark"] .ring-black\/5 {
    --tw-ring-color: rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .bg-gradient-to-r.from-amber-50 {
    background: rgba(251, 191, 36, 0.1) !important;
}

[data-theme="dark"] .bg-gradient-to-b.from-slate-50,
[data-theme="dark"] .bg-gradient-to-b.from-gray-50 {
    background: #0f172a !important;
}

[data-theme="dark"] .bg-gradient-to-br.from-blue-50 {
    background: rgba(96, 165, 250, 0.1) !important;
}

[data-theme="dark"] .bg-gradient-to-br.from-emerald-50 {
    background: rgba(74, 222, 128, 0.1) !important;
}

[data-theme="dark"] .bg-gradient-to-br.from-purple-50 {
    background: rgba(168, 85, 247, 0.1) !important;
}

/* ═══ 15. Opacity variant backgrounds ═══ */
[data-theme="dark"] .bg-slate-50\/50 {
    background-color: rgba(30, 41, 59, 0.5) !important;
}

[data-theme="dark"] .bg-slate-200\/50 {
    background-color: rgba(51, 65, 85, 0.5) !important;
}

/* ═══ 15b. Facture page — custom inline styles ═══ */
[data-theme="dark"] .input-field {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .input-field:focus {
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.4) !important;
    border-color: transparent !important;
}

[data-theme="dark"] .section-emetteur {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.08) 0%, rgba(96, 165, 250, 0.04) 100%) !important;
    border-color: #334155 !important;
    box-shadow: none !important;
}

[data-theme="dark"] .section-emetteur:hover {
    border-color: #60a5fa !important;
}

[data-theme="dark"] .section-emetteur .section-icon {
    color: #60a5fa !important;
    background: rgba(96, 165, 250, 0.1) !important;
}

[data-theme="dark"] .section-emetteur .section-title {
    color: #93c5fd !important;
}

[data-theme="dark"] .section-client {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.08) 0%, rgba(74, 222, 128, 0.04) 100%) !important;
    border-color: #334155 !important;
    box-shadow: none !important;
}

[data-theme="dark"] .section-client:hover {
    border-color: #4ade80 !important;
}

[data-theme="dark"] .section-client .section-icon {
    color: #4ade80 !important;
    background: rgba(74, 222, 128, 0.1) !important;
}

[data-theme="dark"] .section-client .section-title {
    color: #4ade80 !important;
}

[data-theme="dark"] .verified-badge {
    background: rgba(74, 222, 128, 0.1) !important;
    color: #4ade80 !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .input-verified {
    background: linear-gradient(to right, rgba(74, 222, 128, 0.05), #0f172a) !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .ai-search-wrapper.siren-detected input {
    border-color: #334155 !important;
}

/* ═══ 15c. Theme toggle visibility ═══ */
[data-theme="dark"] #theme-toggle {
    color: #f1f5f9 !important;
}

[data-theme="dark"] #theme-toggle:hover {
    background-color: #334155 !important;
    color: #fbbf24 !important;
}

/* ═══ 16. Smooth transitions ═══ */
body,
.bg-white,
.bg-slate-50,
.bg-gray-50,
nav,
footer,
input, select, textarea,
.dropdown-panel {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ═══ 16. Scrollbar ═══ */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0f172a;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* ═══ 17. Tool pages (tools.css variables) ═══ */
[data-theme="dark"] {
    --tool-bg: #0f172a;
    --tool-card: #1e293b;
    --tool-border: #334155;
    --tool-text: #f1f5f9;
    --tool-muted: #94a3b8;
    --tool-primary: #60a5fa;
    --tool-primary-dark: #3b82f6;
}

[data-theme="dark"] .tool-page {
    background: #0f172a !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .tool-widget {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .tool-index-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .tool-index-card p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .tool-index-card:hover {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .tool-seo {
    background: rgba(30, 41, 59, 0.9) !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .tool-seo h2 {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .tool-seo p,
[data-theme="dark"] .tool-seo li {
    color: #94a3b8 !important;
}

[data-theme="dark"] .tool-seo details {
    background: #0f172a !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .tool-seo summary {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .tool-badge {
    background: rgba(96, 165, 250, 0.15) !important;
    color: #93c5fd !important;
}

[data-theme="dark"] .tool-upload-zone {
    border-color: #334155 !important;
    background: linear-gradient(140deg, rgba(96, 165, 250, 0.08), rgba(74, 222, 128, 0.05)) !important;
}

[data-theme="dark"] .tool-field input,
[data-theme="dark"] .tool-field select,
[data-theme="dark"] .tool-field textarea {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .tool-file-item {
    background: #0f172a !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .tool-button.secondary {
    background: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .tool-icon-btn {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .tool-result {
    background: rgba(74, 222, 128, 0.08) !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .tool-result h3 {
    color: #4ade80 !important;
}

[data-theme="dark"] .tool-result p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .tool-progress-wrap {
    background: #0f172a !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .tool-links a {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .tool-links a:hover {
    background: #334155 !important;
}

[data-theme="dark"] .tool-error {
    background: rgba(248, 113, 113, 0.1) !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
    color: #f87171 !important;
}

[data-theme="dark"] .tool-price-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .tool-price-card ul {
    color: #94a3b8 !important;
}

[data-theme="dark"] .tool-preview-box { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .tool-rotate-btn { background: #1e293b; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .tool-rotate-btn:hover { border-color: #60a5fa; background: #1e3a5f; }
[data-theme="dark"] .tool-rotate-btn.active { border-color: #3b82f6; background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .tool-position-grid { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .tool-position-cell { background: #0f172a; border-color: #334155; color: #64748b; }
[data-theme="dark"] .tool-position-cell:hover { background: #1e3a5f; border-color: #60a5fa; }
[data-theme="dark"] .tool-position-cell.active { background: #3b82f6; border-color: #3b82f6; color: #fff; }
[data-theme="dark"] .tool-compress-pill { background: #1e293b; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .tool-compress-pill:hover { border-color: #60a5fa; background: #1e3a5f; }
[data-theme="dark"] .tool-compress-pill.active { border-color: #3b82f6; background: #3b82f6; color: #fff; }
[data-theme="dark"] .tool-compress-hint { color: #94a3b8; }
[data-theme="dark"] .tool-page-thumb { border-color: #334155; }
[data-theme="dark"] .tool-page-thumb:hover { border-color: #60a5fa; }
[data-theme="dark"] .tool-page-thumb.selected { border-color: #3b82f6; box-shadow: 0 0 0 2px #1e3a5f; }
[data-theme="dark"] .tool-file-size-display { color: #94a3b8; }
[data-theme="dark"] .tool-file-size-display strong { color: #e2e8f0; }
[data-theme="dark"] .tool-page-count { color: #94a3b8; }
[data-theme="dark"] .tool-redact-row { border-color: #1e293b; color: #e2e8f0; }
[data-theme="dark"] .tool-redact-row:hover { background: #3b1414; }
[data-theme="dark"] .tool-redact-row.selected { background: #3b1414; }
[data-theme="dark"] .tool-redact-check { border-color: #475569; }

/* Tool buttons — force white text + accessible contrast in dark mode */
[data-theme="dark"] .tool-button.primary {
    background: #2563eb !important;
    color: #fff !important;
}
[data-theme="dark"] .tool-button.primary:hover {
    background: #1d4ed8 !important;
}
[data-theme="dark"] a.tool-button.primary {
    color: #fff !important;
}
[data-theme="dark"] .tool-button.link { color: #60a5fa !important; }

/* Workspace right panel + redact panel */
[data-theme="dark"] .tool-workspace-right,
[data-theme="dark"] .redact-panel {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* Interactive PDF viewer */
[data-theme="dark"] .pdf-viewer-container { background: #0f172a; }
[data-theme="dark"] .pdf-viewer-canvas { box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
[data-theme="dark"] .pdf-viewer-nav button { background: #334155; color: #e2e8f0; border-color: #475569; }
[data-theme="dark"] .pdf-viewer-nav button:hover:not(:disabled) { background: #475569; }
[data-theme="dark"] .pdf-viewer-nav span { color: #94a3b8; }
[data-theme="dark"] .pdf-text-layer > span:hover { background: rgba(96,165,250,0.2); }
[data-theme="dark"] .pdf-text-layer > span.pdf-text-selected { background: rgba(239,68,68,0.4); }

/* ═══ 18. Section nav (enterprise detail) ═══ */
[data-theme="dark"] .section-nav{background:#1e293b!important;border-color:#334155!important}
[data-theme="dark"] .section-nav a{color:#64748b}
[data-theme="dark"] .section-nav a:hover{color:#f1f5f9}
[data-theme="dark"] .section-nav a.active{color:#60a5fa;border-bottom-color:#60a5fa}

/* ═══ 19. Theme toggle icon visibility ═══ */
#icon-sun, #icon-moon {
    transition: opacity 0.15s ease;
}