Fix problemi header su mobile

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   techstore:
-    image: andrestork/techstore:dev
+    image: andrestork/techstore:latest
     ports:
       - 8069:80
     environment:

src/assets/style.css

@@ -1,5 +1,150 @@
-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: row;
+        align-items: center !important;
+        justify-content: space-between !important;
+        padding: 8px !important;
+        gap: 5px;
+    }
+    
+    header #logo {
+        margin-bottom: 0;
+        flex-shrink: 0;
+    }
+    
+    header > div:last-child {
+        display: flex;
+        flex-wrap: nowrap;
+        gap: 3px;
+        align-items: center;
+        justify-content: flex-end;
+        flex: 1;
+    }
+    
+    header button, header a button {
+        padding: 6px 8px;
+        font-size: 11px;
+        flex: 0 1 auto;
+        white-space: nowrap;
+    }
+    
+    header span {
+        font-size: 11px;
+        white-space: nowrap;
+        display: none;
+    }
+}
+
+@media (max-width: 480px) {
+    header {
+        padding: 6px !important;
+        gap: 3px;
+    }
+    
+    header #logo img {
+        height: 28px;
+    }
+    
+    header button, header a button {
+        padding: 5px 6px;
+        font-size: 10px;
+        margin-right: 2px !important;
+    }
+    
+    header span {
+        font-size: 10px;
+        display: none;
+    }
+    
+    .admin-table {
+        font-size: 10px;
+        display: block;
+        overflow-x: auto;
+        white-space: nowrap;
+    }
+    
+    .admin-table th, .admin-table td {
+        padding: 5px;
+        min-width: 60px;
+    }
+    
+    .product-table {
+        font-size: 10px;
+        display: block;
+        overflow-x: auto;
+    }
+    
+    .product-table th, .product-table td {
+        padding: 5px;
+        min-width: 70px;
+    }
+    
+    .cart-table {
+        font-size: 10px;
+        display: block;
+        overflow-x: auto;
+    }
+    
+    .cart-table th, .cart-table td {
+        padding: 5px;
+        min-width: 60px;
+    }
 }
 .products-grid {
     display: grid;
@@ -7,6 +152,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 +760,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;
+    }
+}