/* Water Intake Styles */

/* Water droplet icon visibility - make it visible in light mode */
.water-intake-icon {
    filter: brightness(0) saturate(100%);
    opacity: 0.7;
    transition: opacity 0.2s;
}

.water-intake-icon:hover {
    opacity: 1;
}

body.dark-mode .water-intake-icon {
    filter: none;
    opacity: 0.8;
}

body.dark-mode .water-intake-icon:hover {
    opacity: 1;
}

/* Modal base styles - CRITICAL for display */
#waterIntakeModal,
#waterIntakeListModal {
    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);
}

#waterIntakeModal.active,
#waterIntakeListModal.active {
    display: flex !important;
}

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

#waterIntakeModal .modal-header,
#waterIntakeListModal .modal-header {
    flex-shrink: 0;
    position: relative;
}

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

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

#waterIntakeModal h2,
#waterIntakeListModal h2 {
    margin: 0;
    padding-bottom: 16px;
}

/* Water intake entry cards */
.water-intake-entry {
    transition: all 0.2s ease;
}

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

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

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

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

/* Small text styling in water intake modals */
#waterIntakeModal small,
#waterIntakeListModal small {
    font-size: 0.85em;
    line-height: 1.4;
}

/* Dark mode for water intake modal inputs and elements */
body.dark-mode #waterIntakeModal .modal-content,
body.dark-mode #waterIntakeListModal .modal-content {
    background: #1e2228;
    color: #e3e3e3;
}

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

body.dark-mode #waterIntakeModal input:focus,
body.dark-mode #waterIntakeModal select:focus,
body.dark-mode #waterIntakeListModal input:focus,
body.dark-mode #waterIntakeListModal select:focus {
    border-color: #2196f3;
    outline: none;
}

body.dark-mode #waterIntakeModal h2,
body.dark-mode #waterIntakeListModal h2 {
    color: #e3e3e3;
}

body.dark-mode #waterIntakeModal label,
body.dark-mode #waterIntakeListModal label {
    color: #b8b8b8;
}

/* Remove margin-top from labels in water intake modals to save space */
#waterIntakeModal label,
#waterIntakeListModal label {
    margin-top: 0 !important;
}

body.dark-mode #waterIntakeModal small,
body.dark-mode #waterIntakeListModal small {
    color: #8b949e;
}

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