body { font-family: Arial,sans-serif; margin:20px; padding:0; background-color:#000; color:gold; }
body.day { background:#fff; color:#000; }
body.night { background:#000; color:gold; }

h1.daynight-header { text-align:center; margin-bottom:10px; }
.footnote-link { text-align:center; margin-bottom:20px; }

.search-container { text-align:center; margin-bottom:5px; }
#searchInput { padding:10px; width:80%; max-width:400px; border:1px solid; border-radius:6px; background:inherit; color:inherit; }

.quick-filters { text-align:center; margin-bottom:10px; }
.quick-filters button { padding:6px 10px; font-size:14px; border-radius:5px; border:1px solid; background:inherit; color:inherit; margin:0 4px 4px 0; cursor:pointer; }
.quick-filters button:hover { opacity:0.8; }

.add-item-container, .bulk-actions { text-align:center; margin-bottom:10px; }
.add-item-container input { padding:8px; width:60%; max-width:300px; border-radius:6px; border:1px solid; background:inherit; color:inherit; }
.add-item-container button, .bulk-actions button { padding:8px 12px; border-radius:6px; border:1px solid; background:inherit; color:inherit; cursor:pointer; }
.add-item-container button:hover, .bulk-actions button:hover { opacity:0.8; }

.grocery-table { width:100%; border-collapse:collapse; margin-bottom:20px; }
.grocery-table td { padding:10px; color:inherit; }
.item-name { width:60%; font-weight:bold; }
.status-buttons { text-align:center; }
.status-btn { font-size:14px; padding:6px 10px; border-radius:6px; border:1px solid; background:inherit; color:inherit; margin:2px; cursor:pointer; }
.status-btn.active { font-weight:bold; }
tr.need { background-color: rgba(180,150,0,0.3); }
tr.received { background-color: rgba(0,180,0,0.3); }

#backToTopBtn { display:none; position:fixed; bottom:20px; right:20px; padding:10px 14px; border-radius:6px; border:1px solid; background:inherit; color:inherit; cursor:pointer; }
#backToTopBtn:hover { opacity:0.8; }

@media only screen and (max-width:768px){
    .grocery-table, .grocery-table tbody, .grocery-table tr, .grocery-table td { display:block; width:100%; }
    .grocery-table td { border:none; padding:6px 0; text-align:left; }
    .item-name { font-size:16px; margin-bottom:4px; }
    .status-btn { width:100%; min-height:44px; margin-top:6px; }
}

@media only screen and (max-width:480px){
    body { font-size:15px; }
    h1 { font-size:20px; }
    #searchInput { font-size:15px; }
    .footnote-link { font-size:13px; }
    #backToTopBtn { position:static; display:block; margin:15px auto; width:50%; text-align:center; }
}