/* Vitamin D Sun Exposure Styles */

/* Sun icon visibility - make it visible in light mode */
.vitamin-d-sun-icon {
    filter: brightness(0) saturate(100%);
    opacity: 0.7;
    transition: opacity 0.2s;
}

.vitamin-d-sun-icon:hover {
    opacity: 1;
}

body.dark-mode .vitamin-d-sun-icon {
    filter: none;
    opacity: 0.8;
}

body.dark-mode .vitamin-d-sun-icon:hover {
    opacity: 1;
}

/* Modal base styles - CRITICAL for display */
#vitaminDSunModal,
#vitaminDSunListModal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    backdrop-filter: blur(5px);
}

#vitaminDSunModal.active,
#vitaminDSunListModal.active {
    display: flex !important;
}

/* Modal content with fixed header */
#vitaminDSunModal .modal-content,
#vitaminDSunListModal .modal-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#vitaminDSunModal .modal-header,
#vitaminDSunListModal .modal-header {
    flex-shrink: 0;
    position: relative;
}

#vitaminDSunModal .modal-body,
#vitaminDSunListModal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 20px 20px;
}

#vitaminDSunModal .close-btn,
#vitaminDSunListModal .close-btn {
    position: absolute;
    top: -6px;
    right: 0px;
    z-index: 1;
}

#vitaminDSunModal h2,
#vitaminDSunListModal h2 {
    margin: 0;
    padding-bottom: 16px;
}

/* Sun exposure entry cards */
.sun-exposure-entry {
    transition: all 0.2s ease;
}

.sun-exposure-entry:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Dark mode styles for sun exposure entries */
body.dark-mode .sun-exposure-entry {
    background: transparent !important;
}

body.dark-mode .sun-exposure-entry:hover {
    background: #32373f !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@keyframes vitaminDModalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Small text styling in vitamin D modals */
#vitaminDSunModal small,
#vitaminDSunListModal small {
    font-size: 0.85em;
    line-height: 1.4;
}

/* Dark mode for vitamin D modal inputs and elements */
body.dark-mode #vitaminDSunModal .modal-content,
body.dark-mode #vitaminDSunListModal .modal-content {
    background: #1e2228;
    color: #e3e3e3;
}

body.dark-mode #vitaminDSunModal input,
body.dark-mode #vitaminDSunModal select,
body.dark-mode #vitaminDSunListModal input,
body.dark-mode #vitaminDSunListModal select {
    background: transparent;
    color: #e3e3e3;
    border: 1px solid #3a3f47;
}

body.dark-mode #vitaminDSunModal input:focus,
body.dark-mode #vitaminDSunModal select:focus,
body.dark-mode #vitaminDSunListModal input:focus,
body.dark-mode #vitaminDSunListModal select:focus {
    border-color: #667eea;
    outline: none;
}

body.dark-mode #vitaminDSunModal h2,
body.dark-mode #vitaminDSunListModal h2 {
    color: #e3e3e3;
}

body.dark-mode #vitaminDSunModal label,
body.dark-mode #vitaminDSunListModal label {
    color: #b8b8b8;
}

/* Remove margin-top from labels in vitamin D sun modals to save space */
#vitaminDSunModal label,
#vitaminDSunListModal label {
    margin-top: 0 !important;
}

body.dark-mode #vitaminDSunModal small,
body.dark-mode #vitaminDSunListModal small {
    color: #8b949e;
}

/* Estimate box in dark mode */
body.dark-mode #vitaminDSunModal div[style*="background: var(--color-surface)"] {
    background: transparent !important;
}