.shopping-list-modal { max-width: 800px; } .date-range-selector { display: flex; gap: 1rem; align-items: flex-end; margin-bottom: 1.5rem; padding: 1rem; background: #f5f5f5; border-radius: 6px; } .date-range-selector .form-group { flex: 1; margin-bottom: 0; } .btn-generate { padding: 0.75rem 1.5rem; background: #2e7d32; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; transition: background 0.2s; white-space: nowrap; } .btn-generate:hover { background: #27632a; } .shopping-list-info { text-align: center; padding: 1rem; background: #e8f5e9; border-radius: 6px; margin-bottom: 1.5rem; } .shopping-list-info p { margin: 0; color: #2d5016; } .shopping-list-items { border: 1px solid #e0e0e0; border-radius: 6px; max-height: 400px; overflow-y: auto; } .shopping-list-item { padding: 1rem; border-bottom: 1px solid #f0f0f0; } .shopping-list-item:last-child { border-bottom: none; } .checkbox-label { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; font-size: 1rem; } .checkbox-label input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; } .ingredient-name { flex: 1; font-weight: 600; color: #333; text-transform: capitalize; } .ingredient-amount { font-weight: 500; color: #2e7d32; white-space: nowrap; } .ingredient-recipes { margin-top: 0.5rem; padding-left: 2.5rem; font-size: 0.85rem; color: #666; font-style: italic; } .empty-state { text-align: center; padding: 3rem 1rem; color: #666; font-size: 1.1rem; } /* Print styles */ @media print { .modal-overlay { position: static; background: none; } .modal-content { box-shadow: none; max-height: none; max-width: none; } .modal-header, .modal-actions, .btn-close, .btn-generate { display: none; } .shopping-list-items { max-height: none; border: none; } .shopping-list-item { page-break-inside: avoid; } .checkbox-label input[type="checkbox"] { border: 1px solid #333; } } /* Responsive */ @media (max-width: 768px) { .date-range-selector { flex-direction: column; align-items: stretch; } .btn-generate { width: 100%; } .shopping-list-items { max-height: 300px; } .checkbox-label { flex-wrap: wrap; } .ingredient-amount { margin-left: auto; } }