/* Dietary Hub - Clean Override */

/* Make family-grid stack vertically */
#family-grid,
.family-grid {
    display: block !important;
}

.dietary-hub {
    grid-column: 1 / -1 !important;
    display: block !important;
    width: 100% !important;
    background: linear-gradient(135deg, #FFF9F5 0%, #FFF5ED 100%) !important;
    border: 1px solid #FFE0CC !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin-bottom: 12px !important;
}

.dietary-hub-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
}

.dietary-hub-header h3 {
    font-size: 14px !important;
    margin: 0 !important;
}

.dietary-hub-subtitle {
    font-size: 11px !important;
    color: #888 !important;
}

.dietary-hub-content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

.dietary-section {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
}

.dietary-section-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: #888 !important;
}

.dietary-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

.dietary-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
}

.dietary-chip.allergy {
    background: #FFE5E5 !important;
    color: #D32F2F !important;
}

.dietary-chip.preference {
    background: #FFF8E1 !important;
    color: #F57C00 !important;
}

.dietary-chip-members {
    font-size: 10px !important;
    opacity: 0.8 !important;
}

.dietary-hub-empty {
    text-align: center !important;
    padding: 4px !important;
}

.dietary-hub-empty p {
    margin: 0 !important;
    font-size: 13px !important;
}

/* Family member grid below */
.family-members-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 10px !important;
}

.family-card {
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
}

.family-avatar {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    margin-bottom: 6px !important;
}

.family-avatar-img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    margin-bottom: 6px !important;
}

.family-name {
    font-size: 13px !important;
    margin-bottom: 2px !important;
}

/* Add Member Card */
.add-member-card {
    border: 2px dashed #ccc !important;
    background: transparent !important;
    box-shadow: none !important;
}

.add-member-card:hover {
    border-color: var(--primary) !important;
    background: #FFF9F5 !important;
}

.add-member-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #eee !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    color: #888 !important;
    margin-bottom: 6px !important;
}

.add-member-card:hover .add-member-icon {
    background: var(--primary) !important;
    color: white !important;
}

/* Add Member Modal */
.add-member-modal {
    max-width: 320px !important;
}

.add-member-modal .modal-header {
    background: var(--primary) !important;
    color: white !important;
    padding: 1rem !important;
    border-radius: 20px 20px 0 0 !important;
}

.add-member-modal .modal-header h2 {
    font-size: 1.1rem !important;
    margin: 0 !important;
}

.add-member-input {
    width: 100% !important;
    padding: 12px !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 16px !important;
}

.add-member-input:focus {
    outline: none !important;
    border-color: var(--primary) !important;
}

.add-member-modal .modal-footer {
    display: flex !important;
    gap: 10px !important;
    padding: 1rem !important;
}

.add-member-modal .btn-secondary {
    flex: 1 !important;
    padding: 10px !important;
    border: 1px solid #ddd !important;
    background: white !important;
    border-radius: 20px !important;
    cursor: pointer !important;
}

.add-member-modal .btn-primary {
    flex: 1 !important;
    padding: 10px !important;
    background: var(--primary) !important;
    color: white !important;
    border: none !important;
    border-radius: 20px !important;
    cursor: pointer !important;
}

/* Mobile Modal Fixes */
@media (max-width: 480px) {
    .modal-overlay {
        padding: 0 !important;
        align-items: flex-end !important;
    }
    
    .modal {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 85vh !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
    }
    
    .member-profile-modal,
    .add-member-modal {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .modal-body {
        max-height: 60vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .dietary-picker {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .dietary-option {
        padding: 8px 4px !important;
    }
    
    .dietary-option-icon {
        font-size: 20px !important;
    }
    
    .dietary-option-label {
        font-size: 10px !important;
    }
}

/* Custom "Other" input */
.custom-dietary-section {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid #eee !important;
}

.custom-dietary-section h4 {
    font-size: 14px !important;
    margin: 0 0 8px 0 !important;
    color: #666 !important;
}

.custom-dietary-input-row {
    display: flex !important;
    gap: 8px !important;
}

.custom-dietary-input {
    flex: 1 !important;
    padding: 10px 12px !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 14px !important;
}

.custom-dietary-input:focus {
    outline: none !important;
    border-color: var(--primary) !important;
}

.custom-dietary-btn {
    padding: 10px 16px !important;
    background: var(--primary) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
}

.custom-dietary-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 10px !important;
}

.custom-dietary-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    background: #f0f0f0 !important;
    border-radius: 12px !important;
    font-size: 12px !important;
}

.custom-dietary-tag .remove-tag {
    cursor: pointer !important;
    color: #999 !important;
    font-weight: bold !important;
}

.custom-dietary-tag .remove-tag:hover {
    color: #D32F2F !important;
}