New Responsive design

public/css/invoices.css

@@ -40,7 +40,6 @@ fieldset legend {
     border-radius: 10px;
 }
 
-
 .invoice-list-table {
     width: 90%;
     margin: 20px auto;
@@ -59,7 +58,93 @@ fieldset legend {
     border-right: 1px solid #c3c4c7;
 }
 
-
 .invoice-list-table tr:first-child td {
     background: linear-gradient(to bottom, #fff, #f6f7f7);
 }
+
+/* ═══════════════════════════════════════════
+   RESPONSIVE – TABLET (640px – 1023px)
+═══════════════════════════════════════════ */
+@media (max-width: 1023px) {
+    .invoice-main-flexbox {
+        flex-wrap: wrap;
+        gap: 15px;
+        padding: 15px;
+    }
+
+    .invoice-type-layer {
+        flex: 1 1 calc(50% - 15px);
+        min-width: 180px;
+        min-height: 150px;
+    }
+
+    fieldset {
+        margin: 10px 10px;
+        padding: 12px 20px;
+    }
+
+    .invoice-list-table {
+        width: 100%;
+        font-size: 0.9rem;
+    }
+}
+
+/* ═══════════════════════════════════════════
+   RESPONSIVE – SMARTPHONE (< 640px)
+═══════════════════════════════════════════ */
+@media (max-width: 639px) {
+    .invoice-main-flexbox {
+        flex-direction: column;
+        padding: 10px;
+        gap: 10px;
+    }
+
+    .invoice-type-layer {
+        flex: 1 1 100%;
+        min-height: 100px;
+        font-size: 0.9rem;
+        padding: 12px;
+    }
+
+    fieldset {
+        margin: 8px 4px;
+        padding: 10px 12px;
+    }
+
+    fieldset legend {
+        padding: 6px 12px;
+        font-size: 0.9rem;
+    }
+
+    .invoice-list-table {
+        width: 100%;
+        font-size: 0.82rem;
+    }
+
+    .invoice-list-table tr {
+        display: block;
+        margin-bottom: 10px;
+        border: 1px solid #c3c4c7;
+        border-radius: 6px;
+        padding: 6px;
+    }
+
+    .invoice-list-table td {
+        display: block;
+        width: 100% !important;
+        border: none !important;
+        padding: 4px 6px;
+    }
+
+    .invoice-list-table tr:first-child td {
+        background: linear-gradient(to bottom, #fff, #f6f7f7);
+        border-bottom: 1px solid #ddd !important;
+        font-weight: bold;
+    }
+
+    .invoice-list-table input[type="button"],
+    .invoice-list-table .button {
+        width: 100%;
+        margin-top: 6px;
+    }
+}