body.dark-mode .modal-content{
    background: #1a222d !important;
    color: #e0f7ff;
    border-radius: 12px;
    box-shadow: 0 0 32px 8px #00ffffcc, 0 0 64px 16px #00ffff55, 0 2px 24px rgba(0, 255, 255, 0.18);
    transition: box-shadow 0.3s, background 0.3s;
    animation: breathing-shadow-idle 3s ease-in-out infinite;
}
/* Breathing hover effect */
body.dark-mode .modal-content:hover {
    animation: breathing-shadow-hover 3s ease-in-out infinite;
}

body.dark-mode .modal-content:focus-within {
    animation: breathing-shadow 2s ease-in-out infinite;
}

body.dark-mode #loadingModal .modal-content {
    box-shadow: none;
    background: transparent !important;
    color: transparent !important;
    border: none;
    pointer-events: none;
}

body.dark-mode #loadingModal .modal-content:hover,
body.dark-mode #loadingModal .modal-content:focus-within {
    box-shadow: none !important;
    background: transparent !important;
    animation: none !important;
}

body.dark-mode #loadingModal .modal-content>* {
    color: inherit !important;
    background: none !important;
    border: none !important;
    pointer-events: auto;
    opacity: 1 !important;
}

body.dark-mode .modal--no-glow,
body.dark-mode .modal--no-glow:hover,
body.dark-mode .modal--no-glow:focus-within {
    animation: none !important;
    box-shadow: none !important;
}

.modal--no-glow .modal-content--closing {
    animation: modalFadeOut 0.35s ease forwards !important;
}

@keyframes breathing-shadow {
    0% {
        box-shadow: 0 0 32px 8px #00ffffcc, 0 0 64px 16px #00ffff55, 0 2px 24px rgba(0, 255, 255, 0.18);
    }

    50% {
        box-shadow: 0 0 48px 16px #00ffffee, 0 0 80px 24px #00ffff77, 0 4px 32px rgba(0, 255, 255, 0.28);
    }

    100% {
        box-shadow: 0 0 32px 8px #00ffffcc, 0 0 64px 16px #00ffff55, 0 2px 24px rgba(0, 255, 255, 0.18);
    }
}

@keyframes breathing-shadow-hover {
    0% {
        box-shadow: 0 0 20px 4px #00ffff88, 0 0 40px 8px #00ffff33, 0 2px 12px rgba(0, 255, 255, 0.10);
    }
    50% {
        box-shadow: 0 0 28px 8px #00ffffaa, 0 0 56px 12px #00ffff44, 0 4px 18px rgba(0, 255, 255, 0.16);
    }
    100% {
        box-shadow: 0 0 20px 4px #00ffff88, 0 0 40px 8px #00ffff33, 0 2px 12px rgba(0, 255, 255, 0.10);
    }
}

@keyframes breathing-shadow-idle {
    0% {
        box-shadow: 0 0 16px 4px #00ffff77, 0 0 32px 8px #00ffff33, 0 1px 8px rgba(0, 255, 255, 0.08);
    }
    50% {
        box-shadow: 0 0 24px 8px #00ffff99, 0 0 48px 12px #00ffff44, 0 2px 12px rgba(0, 255, 255, 0.14);
    }
    100% {
        box-shadow: 0 0 16px 4px #00ffff77, 0 0 32px 8px #00ffff33, 0 1px 8px rgba(0, 255, 255, 0.08);
    }
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    background: #1a222d !important;
    color: #00ffff;
}

body.dark-mode .modal-body {
    background: none;
    color: #e0f7ff;
}

body.dark-mode .refresh-button {
    background: none;
    color: #00ffff;
}

body.dark-mode .refresh-button:hover {
    background: none;
    color: #fff;
}

body.dark-mode .invoice-item,
body.dark-mode .consultation-item {
    background: #232c3a;
    color: #e0f7ff;
    border: 1px solid #00ffff55;
    box-shadow: 0 0 12px #00ffff33;
}

body.dark-mode .invoice-item:hover,
body.dark-mode .consultation-item:hover {
    background: #1a222d;
    box-shadow: 0 0 24px #00ffff88;
}

body.dark-mode .loading-bar {
    background-color: #00ffff;
}

body.dark-mode .modal-content input,
body.dark-mode .modal-content textarea,
body.dark-mode .modal-content select {
    background: #232c3a;
    color: #e0f7ff;
    border: 1.5px solid #00ffff;
}

body.dark-mode .modal-content input:focus,
body.dark-mode .modal-content textarea:focus,
body.dark-mode .modal-content select:focus {
    border-color: #00ffff;
    box-shadow: 0 0 8px #00ffff88;
    background: #1a222d;
    color: #fff;
}

body.dark-mode .modal-title,
body.dark-mode .invoice-title {
    color: #00ffff;
    text-shadow: 0 0 8px #00ffff88;
}

/* Modal close button styled like .btn-close but with custom texture for dark mode */
body.dark-mode .modal-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: none;
    outline: none;
    /* Use white close icon by default in dark mode */
    background-image: url('../images/ui/closebtn-white.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    transition: opacity 0.2s, box-shadow 0.2s;
    content: '';
}

body.dark-mode .modal-close-button:hover,
body.dark-mode .modal-close-button:focus {
    opacity: 0.5;
}