From 2c2d1456d4d08d9992d1d037b60b19a4ae1d507d Mon Sep 17 00:00:00 2001
From: Andrea Fiorencis <me@andrestork.moe>
Date: Tue, 21 Apr 2026 09:26:38 +0200
Subject: [PATCH] Aggiunta design responsive (by Perona)

---
 src/assets/style.css | 464 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 463 insertions(+), 1 deletion(-)

diff --git a/src/assets/style.css b/src/assets/style.css
index 823f33c..cd5862d 100644
--- a/src/assets/style.css
+++ b/src/assets/style.css
@@ -1,5 +1,103 @@
-body{
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 16px;
+}
+
+body {
     font-family: Arial, Helvetica, sans-serif;
+    line-height: 1.6;
+}
+
+/* Header responsive */
+header {
+    display: flex !important;
+    justify-content: space-between !important;
+    align-items: center !important;
+    padding: 10px !important;
+    background-color: #f2f2f2 !important;
+    border-bottom: 1px solid #ddd !important;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+header #logo {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+}
+
+header #logo img {
+    height: 32px;
+    width: auto;
+}
+
+header > div:last-child {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+header button, header a button {
+    padding: 8px 12px;
+    font-size: 14px;
+    white-space: nowrap;
+}
+
+header span {
+    font-size: 14px;
+}
+
+@media (max-width: 768px) {
+    header {
+        flex-direction: column;
+        align-items: stretch !important;
+        justify-content: center !important;
+        padding: 10px 10px !important;
+    }
+    
+    header #logo {
+        margin-bottom: 8px;
+    }
+    
+    header > div:last-child {
+        justify-content: stretch;
+    }
+    
+    header button, header a button {
+        padding: 8px 10px;
+        font-size: 12px;
+        flex: 1;
+        min-width: 0;
+    }
+    
+    header span {
+        font-size: 12px;
+        width: 100%;
+        text-align: center;
+        margin-top: 8px;
+    }
+}
+
+@media (max-width: 480px) {
+    header {
+        padding: 8px !important;
+    }
+    
+    header button, header a button {
+        padding: 6px 8px;
+        font-size: 11px;
+    }
+    
+    header span {
+        font-size: 11px;
+    }
 }
 .products-grid {
     display: grid;
@@ -7,6 +105,22 @@ body{
     gap: 20px;
     padding: 20px;
 }
+
+@media (max-width: 768px) {
+    .products-grid {
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        gap: 15px;
+        padding: 15px;
+    }
+}
+
+@media (max-width: 480px) {
+    .products-grid {
+        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        gap: 10px;
+        padding: 10px;
+    }
+}
 .product-card {
     border: 1px solid #ddd;
     border-radius: 8px;
@@ -599,3 +713,351 @@ form button:hover {
 .btn-reset:hover {
     background-color: #138496;
 }
+
+/* ============================================
+   MEDIA QUERIES RESPONSIVE - Tablet
+   ============================================ */
+
+@media (max-width: 768px) {
+    .products-grid {
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        gap: 15px;
+        padding: 15px;
+    }
+    
+    .product-card {
+        padding: 12px;
+    }
+    
+    .product-card h3 {
+        font-size: 16px;
+    }
+    
+    .product-card button {
+        padding: 6px 12px;
+        font-size: 13px;
+        width: 100%;
+    }
+    
+    .cart-table {
+        font-size: 12px;
+    }
+    
+    .cart-table th, .cart-table td {
+        padding: 8px;
+    }
+    
+    .cart-table button {
+        padding: 4px 8px;
+        font-size: 11px;
+    }
+    
+    .product-table {
+        font-size: 12px;
+    }
+    
+    .product-table th, .product-table td {
+        padding: 8px;
+    }
+    
+    .cart-container {
+        padding: 15px;
+        margin: 15px auto;
+    }
+    
+    form {
+        padding: 15px;
+        margin: 30px auto;
+        width: 95%;
+    }
+    
+    form h2 {
+        font-size: 20px;
+        margin-bottom: 15px;
+    }
+    
+    .admin-stats-grid {
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    }
+    
+    .admin-stat-card h2 {
+        font-size: 28px;
+    }
+    
+    .admin-table {
+        font-size: 12px;
+    }
+    
+    .admin-table th, .admin-table td {
+        padding: 8px;
+    }
+    
+    .order-card {
+        padding: 15px;
+    }
+    
+    .order-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+}
+
+/* ============================================
+   MEDIA QUERIES RESPONSIVE - Mobile
+   ============================================ */
+
+@media (max-width: 480px) {
+    html {
+        font-size: 14px;
+    }
+    
+    .products-grid {
+        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+        gap: 10px;
+        padding: 10px;
+    }
+    
+    .product-card {
+        padding: 10px;
+    }
+    
+    .product-card h3 {
+        font-size: 14px;
+        margin: 8px 0;
+    }
+    
+    .product-card p {
+        font-size: 12px;
+    }
+    
+    .product-card button {
+        padding: 6px 10px;
+        font-size: 12px;
+        width: 100%;
+    }
+    
+    .cart-table {
+        font-size: 11px;
+    }
+    
+    .cart-table th, .cart-table td {
+        padding: 6px;
+        word-break: break-word;
+    }
+    
+    .cart-table button {
+        padding: 3px 6px;
+        font-size: 10px;
+        width: 100%;
+    }
+    
+    .product-table {
+        font-size: 11px;
+    }
+    
+    .product-table th, .product-table td {
+        padding: 6px;
+        word-break: break-word;
+    }
+    
+    .cart-container {
+        max-width: 100%;
+        padding: 10px;
+        margin: 10px auto;
+    }
+    
+    .cart-container h1 {
+        font-size: 18px;
+    }
+    
+    .clear-cart-btn, .checkout-btn {
+        padding: 8px 12px;
+        font-size: 12px;
+        margin-left: 0;
+        margin-right: 5px;
+        width: 48%;
+        display: inline-block;
+    }
+    
+    .cart-summary {
+        font-size: 14px;
+    }
+    
+    form {
+        max-width: 95%;
+        margin: 20px auto;
+        padding: 12px;
+        width: 95%;
+    }
+    
+    form h2 {
+        font-size: 18px;
+        margin-bottom: 12px;
+    }
+    
+    form label {
+        font-size: 13px;
+        margin-bottom: 4px;
+    }
+    
+    form input[type=\"text\"],
+    form input[type=\"password\"],
+    form input[type=\"email\"],
+    form button {
+        font-size: 14px;
+        padding: 8px;
+        margin-bottom: 10px;
+    }
+    
+    .product-detail {
+        max-width: 95%;
+        margin: 10px auto;
+        padding: 12px;
+    }
+    
+    .product-detail h2 {
+        font-size: 16px;
+        margin-bottom: 10px;
+    }
+    
+    .add-product-panel {
+        padding: 12px;
+        margin-bottom: 15px;
+    }
+    
+    .add-product-panel h2 {
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+    
+    .admin-stats-grid {
+        grid-template-columns: 1fr;
+        gap: 12px;
+    }
+    
+    .admin-stat-card {
+        padding: 15px;
+    }
+    
+    .admin-stat-card h2 {
+        font-size: 28px;
+        margin-bottom: 8px;
+    }
+    
+    .admin-stat-card p {
+        font-size: 12px;
+    }
+    
+    .admin-table {
+        font-size: 11px;
+    }
+    
+    .admin-table th, .admin-table td {
+        padding: 6px;
+        word-break: break-word;
+    }
+    
+    .btn-delete, .btn-reset {
+        padding: 4px 8px;
+        font-size: 10px;
+    }
+    
+    .order-card {
+        padding: 12px;
+    }
+    
+    .order-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+        margin-bottom: 10px;
+    }
+    
+    .order-header h3 {
+        font-size: 14px;
+    }
+    
+    .order-status {
+        padding: 4px 8px;
+        font-size: 10px;
+    }
+    
+    .order-details p {
+        font-size: 12px;
+        margin: 3px 0;
+    }
+    
+    .account-layout {
+        gap: 15px;
+        margin: 15px auto;
+        padding: 0 10px;
+    }
+    
+    .my-sidebar, .my-container {
+        flex: 1 1 100%;
+        padding: 15px;
+    }
+    
+    .my-container h1 {
+        font-size: 16px;
+        margin-bottom: 10px;
+    }
+    
+    .my-container p {
+        font-size: 12px;
+        margin-bottom: 8px;
+    }
+    
+    .empty-cart {
+        padding: 25px;
+        font-size: 14px;
+    }
+}
+
+/* Header buttons styling */
+header a button,
+header button {
+    margin-left: 0 !important;
+    margin-right: 5px !important;
+    padding: 8px 12px !important;
+    background-color: #007bff !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 4px !important;
+    cursor: pointer !important;
+    transition: background-color 0.3s ease;
+}
+
+header a[href*="logout"] button,
+header a:has(button[style*="#dc3545"]) button {
+    background-color: #dc3545 !important;
+}
+
+header a[href*="login"] button,
+header a:has(button[style*="#28a745"]) button {
+    background-color: #28a745 !important;
+}
+
+header button:hover {
+    opacity: 0.9;
+}
+
+/* Responsive nav adjustments */
+@media (max-width: 768px) {
+    header a button,
+    header button {
+        margin-right: 3px !important;
+        padding: 6px 10px !important;
+        font-size: 12px !important;
+    }
+}
+
+@media (max-width: 480px) {
+    header a button,
+    header button {
+        margin-right: 3px !important;
+        padding: 6px 8px !important;
+        font-size: 11px !important;
+    }
+}