From 804f551972dffddcfe5548934884ad0f573958ff Mon Sep 17 00:00:00 2001
From: Supan Adit Pratama <email@supanadit.com>
Date: Thu, 27 Aug 2026 17:37:36 +0700
Subject: [PATCH] style: enterprise blocky design with 0px border-radius and
 IDR currency

---
 app/Core/Helpers.php         |   4 +-
 app/Views/orders/show.php    |   2 +-
 app/Views/sessions/index.php |   4 +-
 app/Views/sessions/show.php  |  12 +-
 public/assets/css/style.css  | 583 +++++++++++++++++------------------
 5 files changed, 294 insertions(+), 311 deletions(-)

diff --git a/app/Core/Helpers.php b/app/Core/Helpers.php
index 3593160..fae1e2c 100644
--- a/app/Core/Helpers.php
+++ b/app/Core/Helpers.php
@@ -14,6 +14,8 @@ if (!function_exists('e')) {
 if (!function_exists('money')) {
     function money(float|int|string $amount): string
     {
-        return '$' . number_format((float)$amount, 2);
+        // Indonesian Rupiah format: Rp 1.234.567
+        // No decimal places, use dot as thousands separator
+        return 'Rp ' . number_format((float)$amount, 0, ',', '.');
     }
 }
diff --git a/app/Views/orders/show.php b/app/Views/orders/show.php
index 56d5609..06283c5 100644
--- a/app/Views/orders/show.php
+++ b/app/Views/orders/show.php
@@ -99,7 +99,7 @@
         </div>
 
         <?php if (!empty($order['notes'])): ?>
-            <div style="margin-top: 2rem; padding: 1rem; background-color: #f8fafc; border-radius: var(--radius-sm); border-left: 3px solid var(--primary);">
+            <div style="margin-top: 2rem; padding: 1rem; background-color: #f8fafc; border-left: 3px solid var(--primary);">
                 <div style="font-weight: 600; font-size: 0.85rem; margin-bottom: 0.25rem;">Order Notes:</div>
                 <div style="font-size: 0.9rem; color: var(--text-muted);"><?= nl2br(e($order['notes'])) ?></div>
             </div>
diff --git a/app/Views/sessions/index.php b/app/Views/sessions/index.php
index c09c4f7..afe9896 100644
--- a/app/Views/sessions/index.php
+++ b/app/Views/sessions/index.php
@@ -49,11 +49,11 @@
                     <div style="font-size: 0.85rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.4rem;">
                         <span>👤 Hosted by:</span>
                         <strong><?= e($session['creator_name']) ?></strong>
-                        <span style="font-size: 0.75rem; background: #f1f5f9; padding: 0.1rem 0.35rem; border-radius: var(--radius-sm);">@<?= e($session['creator_username']) ?></span>
+                        <span style="font-size: 0.75rem; background: #f1f5f9; padding: 0.1rem 0.35rem; border: 1px solid var(--border-color); font-family: var(--font-mono);">@<?= e($session['creator_username']) ?></span>
                     </div>
 
                     <?php if (!empty($session['notes'])): ?>
-                        <div style="font-size: 0.825rem; color: #1e40af; background: #eff6ff; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); border-left: 3px solid #3b82f6;">
+                        <div style="font-size: 0.825rem; color: #1e40af; background: #eff6ff; padding: 0.5rem 0.75rem; border-left: 3px solid #2563eb; border: 1px solid #bfdbfe;">
                             📢 <?= e($session['notes']) ?>
                         </div>
                     <?php endif; ?>
diff --git a/app/Views/sessions/show.php b/app/Views/sessions/show.php
index 118b72d..87914e8 100644
--- a/app/Views/sessions/show.php
+++ b/app/Views/sessions/show.php
@@ -106,7 +106,7 @@
                             </label>
 
                             <?php if (empty($session['menus'])): ?>
-                                <div style="padding: 1.5rem; text-align: center; background: #f8fafc; border-radius: var(--radius-sm); border: 1px dashed var(--border-color);">
+                                <div style="padding: 1.5rem; text-align: center; background: #f8fafc; border: 1px dashed var(--border-color);">
                                     <p style="color: var(--text-muted); font-size: 0.9rem;">No menu listed yet for today.</p>
                                 </div>
                             <?php else: ?>
@@ -142,14 +142,14 @@
 
                         <!-- Selected Items Customizer (Quantity & Notes) -->
                         <template x-if="selectedItems.length > 0">
-                            <div style="margin-top: 1.25rem; background: #f8fafc; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 1rem;">
+                            <div style="margin-top: 1.25rem; background: #f8fafc; border: 1px solid var(--border-color); padding: 1rem;">
                                 <div style="font-weight: 600; font-size: 0.85rem; margin-bottom: 0.75rem; color: var(--text-main);">
                                     📝 Customize Quantities &amp; Requests:
                                 </div>
 
                                 <div style="display: flex; flex-direction: column; gap: 0.75rem;">
                                     <template x-for="(item, idx) in selectedItems" :key="idx">
-                                        <div style="display: flex; align-items: center; gap: 0.75rem; background: white; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--border-color); flex-wrap: wrap;">
+                                        <div style="display: flex; align-items: center; gap: 0.75rem; background: white; padding: 0.6rem 0.75rem; border: 1px solid var(--border-color); flex-wrap: wrap;">
                                             <input type="hidden" :name="`items[${idx}][session_menu_id]`" :value="item.id">
                                             <input type="hidden" :name="`items[${idx}][item_name]`" :value="item.name">
                                             
@@ -220,7 +220,7 @@
                                         <?= (int)$order['user_id'] === (int)$currentUser['id'] ? ' <span style="font-size: 0.75rem; color: var(--primary); font-weight: normal;">(You)</span>' : '' ?>
                                     </strong>
                                     <?php if (!empty($order['mattermost_username'])): ?>
-                                        <span style="font-size: 0.775rem; color: var(--text-muted); background: #f1f5f9; padding: 0.15rem 0.4rem; border-radius: var(--radius-sm);">@<?= e($order['mattermost_username']) ?></span>
+                                        <span style="font-size: 0.775rem; color: var(--text-muted); background: #f1f5f9; padding: 0.15rem 0.4rem; border: 1px solid var(--border-color);">@<?= e($order['mattermost_username']) ?></span>
                                     <?php endif; ?>
                                     <span style="font-size: 0.75rem; color: var(--text-muted); margin-left: auto;"><?= date('H:i', strtotime($order['created_at'])) ?></span>
                                 </div>
@@ -228,7 +228,7 @@
                                 <ul style="list-style: none; margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.35rem;">
                                     <?php foreach ($order['items'] as $item): ?>
                                         <li style="font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem;">
-                                            <span style="font-weight: 700; color: var(--primary); background: var(--primary-light); padding: 0.1rem 0.45rem; border-radius: var(--radius-sm); font-size: 0.8rem;"><?= e($item['quantity']) ?>x</span>
+                                            <span style="font-weight: 700; color: var(--primary); background: var(--primary-light); padding: 0.1rem 0.45rem; border: 1px solid var(--border-color); font-size: 0.8rem;"><?= e($item['quantity']) ?>x</span>
                                             <span><?= e($item['item_name']) ?></span>
                                             <?php if (!empty($item['notes'])): ?>
                                                 <em style="color: var(--text-muted); font-size: 0.8rem;">(<?= e($item['notes']) ?>)</em>
@@ -241,7 +241,7 @@
                                 </ul>
 
                                 <?php if (!empty($order['notes'])): ?>
-                                    <div style="margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-muted); background: #f8fafc; padding: 0.35rem 0.6rem; border-radius: var(--radius-sm);">
+                                    <div style="margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-muted); background: #f8fafc; padding: 0.35rem 0.6rem; border: 1px solid var(--border-color);">
                                         💬 Note: <?= e($order['notes']) ?>
                                     </div>
                                 <?php endif; ?>
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 8410e59..c2b11f5 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -1,128 +1,146 @@
 /* ==========================================================================
-   Order System - Pure Native CSS Design System
+   CanteenHub - Enterprise Blocky Design System (0px Border Radius)
    ========================================================================== */
 
 :root {
-    --primary: #4f46e5;
-    --primary-hover: #4338ca;
-    --primary-light: #eef2ff;
-    --secondary: #64748b;
-    --secondary-hover: #475569;
-    --success: #10b981;
-    --success-light: #ecfdf5;
-    --warning: #f59e0b;
-    --warning-light: #fffbeb;
-    --danger: #ef4444;
-    --danger-light: #fef2f2;
-    --info: #0ea5e9;
-    --info-light: #f0f9ff;
-    
-    --bg-main: #f8fafc;
-    --bg-card: #ffffff;
-    --bg-card-header: #f8fafc;
-    --text-main: #0f172a;
-    --text-muted: #64748b;
-    --text-light: #94a3b8;
-    
-    --border-color: #e2e8f0;
-    --border-focus: #818cf8;
-    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-    --radius-sm: 6px;
-    --radius-md: 10px;
-    --radius-lg: 14px;
-    --radius-full: 9999px;
+    --bg-main: #f1f5f9;
+    --bg-surface: #ffffff;
+    --bg-subtle: #f8fafc;
+    --bg-inset: #f1f5f9;
 
-    --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    --text-main: #0f172a;
+    --text-muted: #475569;
+    --text-light: #64748b;
+    --text-faint: #94a3b8;
+
+    --border-color: #cbd5e1;
+    --border-dark: #0f172a;
+    --border-focus: #2563eb;
+
+    --primary: #0f172a;
+    --primary-hover: #1e293b;
+    --primary-light: #e2e8f0;
+    --primary-contrast: #ffffff;
+
+    --accent-blue: #2563eb;
+    --accent-blue-hover: #1d4ed8;
+    --accent-blue-light: #eff6ff;
+
+    --status-open: #059669;
+    --status-open-bg: #ecfdf5;
+    --status-open-border: #a7f3d0;
+
+    --status-closed: #d97706;
+    --status-closed-bg: #fffbeb;
+    --status-closed-border: #fde68a;
+
+    --status-arrived: #0284c7;
+    --status-arrived-bg: #f0f9ff;
+    --status-arrived-border: #bae6fd;
+
+    --status-danger: #dc2626;
+    --status-danger-bg: #fef2f2;
+    --status-danger-border: #fecaca;
+
+    --shadow-flat: 2px 2px 0px rgba(15, 23, 42, 0.12);
+    --shadow-flat-lg: 4px 4px 0px rgba(15, 23, 42, 0.15);
+
+    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
+/* ---------------- Global Reset & 0px Radius Rule ---------------- */
 *, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
+    border-radius: 0 !important; /* Strict Enterprise Blocky Rule */
 }
 
 body {
-    font-family: var(--font-family);
+    font-family: var(--font-sans);
     background-color: var(--bg-main);
     color: var(--text-main);
-    line-height: 1.5;
+    line-height: 1.45;
     -webkit-font-smoothing: antialiased;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
 }
 
-/* ---------------- Navbar ---------------- */
+/* ---------------- Top Enterprise Navigation Bar ---------------- */
 .navbar {
-    background-color: #ffffff;
-    border-bottom: 1px solid var(--border-color);
-    box-shadow: var(--shadow-sm);
+    background-color: #0f172a;
+    border-bottom: 2px solid #334155;
+    color: #ffffff;
     position: sticky;
     top: 0;
     z-index: 50;
 }
 
 .navbar-container {
-    max-width: 1200px;
+    max-width: 1280px;
     margin: 0 auto;
     padding: 0 1.5rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    height: 4.25rem;
+    height: 4rem;
 }
 
 .navbar-brand {
     display: flex;
     align-items: center;
     gap: 0.75rem;
-    font-size: 1.25rem;
-    font-weight: 700;
-    color: var(--primary);
+    font-size: 1.15rem;
+    font-weight: 800;
+    color: #ffffff;
     text-decoration: none;
+    letter-spacing: -0.02em;
+    text-transform: uppercase;
 }
 
 .navbar-brand-icon {
-    width: 2rem;
-    height: 2rem;
-    background: linear-gradient(135deg, var(--primary), #818cf8);
+    width: 2.25rem;
+    height: 2.25rem;
+    background-color: #2563eb;
+    border: 1px solid #60a5fa;
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--radius-sm);
-    font-size: 1rem;
+    font-size: 1.1rem;
 }
 
 .nav-links {
     display: flex;
     list-style: none;
-    gap: 0.5rem;
+    gap: 0.25rem;
 }
 
 .nav-link {
     display: inline-flex;
     align-items: center;
-    padding: 0.5rem 0.85rem;
-    border-radius: var(--radius-sm);
-    font-size: 0.925rem;
-    font-weight: 500;
-    color: var(--text-muted);
+    padding: 0.6rem 0.9rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #94a3b8;
     text-decoration: none;
-    transition: all 0.15s ease;
+    border: 1px solid transparent;
+    transition: all 0.1s ease;
 }
 
 .nav-link:hover {
-    color: var(--primary);
-    background-color: var(--primary-light);
+    color: #ffffff;
+    background-color: #1e293b;
+    border-color: #334155;
 }
 
 .nav-link.active {
-    color: var(--primary);
-    background-color: var(--primary-light);
-    font-weight: 600;
+    color: #ffffff;
+    background-color: #1e293b;
+    border-color: #3b82f6;
+    border-bottom: 2px solid #3b82f6;
 }
 
 .nav-actions {
@@ -131,11 +149,11 @@ body {
     gap: 0.75rem;
 }
 
-/* ---------------- Container & Layout ---------------- */
+/* ---------------- Layout & Main Container ---------------- */
 .main-container {
-    max-width: 1200px;
+    max-width: 1280px;
     width: 100%;
-    margin: 2rem auto;
+    margin: 1.75rem auto;
     padding: 0 1.5rem;
     flex: 1;
 }
@@ -143,86 +161,87 @@ body {
 .page-header {
     display: flex;
     justify-content: space-between;
-    align-items: center;
-    margin-bottom: 2rem;
+    align-items: flex-start;
+    margin-bottom: 1.75rem;
     flex-wrap: wrap;
     gap: 1rem;
+    background: #ffffff;
+    border: 1px solid var(--border-color);
+    padding: 1.25rem 1.5rem;
+    box-shadow: var(--shadow-flat);
 }
 
 .page-title {
-    font-size: 1.75rem;
-    font-weight: 700;
+    font-size: 1.5rem;
+    font-weight: 800;
+    letter-spacing: -0.025em;
     color: var(--text-main);
 }
 
 .page-subtitle {
-    font-size: 0.95rem;
+    font-size: 0.875rem;
     color: var(--text-muted);
     margin-top: 0.25rem;
 }
 
-/* ---------------- Cards & Grid ---------------- */
+/* ---------------- Stat Cards Grid ---------------- */
 .grid-stats {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-    gap: 1.25rem;
-    margin-bottom: 2rem;
-}
-
-.stat-card {
-    background: var(--bg-card);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-md);
-    padding: 1.5rem;
-    box-shadow: var(--shadow-sm);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    transition: transform 0.15s ease, box-shadow 0.15s ease;
-}
-
-.stat-card:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-md);
-}
-
-.stat-label {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: var(--text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.025em;
-}
-
-.stat-value {
-    font-size: 1.75rem;
-    font-weight: 700;
-    color: var(--text-main);
-    margin-top: 0.25rem;
-}
-
-.stat-icon {
-    width: 3rem;
-    height: 3rem;
-    border-radius: var(--radius-md);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.35rem;
-}
-
-.card {
-    background: var(--bg-card);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-md);
-    box-shadow: var(--shadow-sm);
-    overflow: hidden;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1rem;
     margin-bottom: 1.5rem;
 }
 
+.stat-card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    padding: 1.25rem;
+    box-shadow: var(--shadow-flat);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-left: 4px solid var(--primary);
+}
+
+.stat-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.stat-value {
+    font-family: var(--font-mono);
+    font-size: 1.6rem;
+    font-weight: 800;
+    color: var(--text-main);
+    margin-top: 0.2rem;
+    letter-spacing: -0.02em;
+}
+
+.stat-icon {
+    width: 2.75rem;
+    height: 2.75rem;
+    border: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25rem;
+    background: var(--bg-subtle);
+}
+
+/* ---------------- Enterprise Blocky Cards ---------------- */
+.card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    box-shadow: var(--shadow-flat);
+    margin-bottom: 1.25rem;
+}
+
 .card-header {
-    padding: 1.25rem 1.5rem;
-    background-color: var(--bg-card-header);
+    padding: 1rem 1.25rem;
+    background-color: var(--bg-subtle);
     border-bottom: 1px solid var(--border-color);
     display: flex;
     justify-content: space-between;
@@ -230,22 +249,24 @@ body {
 }
 
 .card-title {
-    font-size: 1.125rem;
-    font-weight: 600;
+    font-size: 1rem;
+    font-weight: 800;
     color: var(--text-main);
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
 }
 
 .card-body {
-    padding: 1.5rem;
+    padding: 1.25rem;
 }
 
 .card-footer {
-    padding: 1rem 1.5rem;
-    background-color: var(--bg-card-header);
+    padding: 0.85rem 1.25rem;
+    background-color: var(--bg-subtle);
     border-top: 1px solid var(--border-color);
 }
 
-/* ---------------- Tables ---------------- */
+/* ---------------- Enterprise Tables ---------------- */
 .table-responsive {
     width: 100%;
     overflow-x: auto;
@@ -255,253 +276,252 @@ body {
     width: 100%;
     border-collapse: collapse;
     text-align: left;
-    font-size: 0.925rem;
+    font-size: 0.875rem;
 }
 
 .table th {
-    background-color: #f8fafc;
-    color: var(--text-muted);
-    font-weight: 600;
-    padding: 0.875rem 1.25rem;
-    border-bottom: 1px solid var(--border-color);
+    background-color: #0f172a;
+    color: #ffffff;
+    font-weight: 700;
+    padding: 0.75rem 1rem;
+    border: 1px solid #1e293b;
     text-transform: uppercase;
-    font-size: 0.75rem;
-    letter-spacing: 0.05em;
+    font-size: 0.725rem;
+    letter-spacing: 0.06em;
 }
 
 .table td {
-    padding: 1rem 1.25rem;
-    border-bottom: 1px solid var(--border-color);
+    padding: 0.85rem 1rem;
+    border: 1px solid var(--border-color);
     color: var(--text-main);
     vertical-align: middle;
 }
 
-.table tr:last-child td {
-    border-bottom: none;
-}
-
-.table tbody tr:hover {
+.table tbody tr:nth-child(even) {
     background-color: #f8fafc;
 }
 
-/* ---------------- Badges ---------------- */
+.table tbody tr:hover {
+    background-color: #e2e8f0;
+}
+
+/* ---------------- Enterprise Badges ---------------- */
 .badge {
     display: inline-flex;
     align-items: center;
-    gap: 0.35rem;
-    padding: 0.25rem 0.65rem;
-    border-radius: var(--radius-full);
-    font-size: 0.775rem;
-    font-weight: 600;
-    letter-spacing: 0.02em;
+    gap: 0.25rem;
+    padding: 0.25rem 0.55rem;
+    font-family: var(--font-mono);
+    font-size: 0.725rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    border: 1px solid transparent;
 }
 
-.badge-pending {
-    background-color: var(--warning-light);
-    color: #b45309;
+.badge-open, .badge-completed {
+    background-color: var(--status-open-bg);
+    color: var(--status-open);
+    border-color: var(--status-open-border);
 }
 
-.badge-processing {
-    background-color: var(--info-light);
-    color: #0369a1;
+.badge-closed, .badge-warning, .badge-pending {
+    background-color: var(--status-closed-bg);
+    color: var(--status-closed);
+    border-color: var(--status-closed-border);
 }
 
-.badge-completed {
-    background-color: var(--success-light);
-    color: #047857;
+.badge-arrived, .badge-processing {
+    background-color: var(--status-arrived-bg);
+    color: var(--status-arrived);
+    border-color: var(--status-arrived-border);
 }
 
-.badge-cancelled {
-    background-color: var(--danger-light);
-    color: #b91c1c;
+.badge-danger, .badge-cancelled {
+    background-color: var(--status-danger-bg);
+    color: var(--status-danger);
+    border-color: var(--status-danger-border);
 }
 
 .badge-neutral {
     background-color: #f1f5f9;
-    color: #475569;
+    color: #334155;
+    border-color: #cbd5e1;
 }
 
-/* ---------------- Buttons ---------------- */
+/* ---------------- Enterprise Buttons ---------------- */
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 0.5rem;
-    padding: 0.6rem 1.15rem;
-    font-size: 0.925rem;
-    font-weight: 500;
-    border-radius: var(--radius-sm);
+    gap: 0.4rem;
+    padding: 0.55rem 1rem;
+    font-size: 0.85rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
     border: 1px solid transparent;
     cursor: pointer;
     text-decoration: none;
-    transition: all 0.15s ease;
-    line-height: 1.25;
+    transition: all 0.1s ease;
+    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.15);
+}
+
+.btn:active {
+    transform: translate(1px, 1px);
+    box-shadow: none;
 }
 
 .btn-primary {
-    background-color: var(--primary);
-    color: white;
+    background-color: #0f172a;
+    border-color: #0f172a;
+    color: #ffffff;
 }
 
 .btn-primary:hover {
-    background-color: var(--primary-hover);
+    background-color: #1e293b;
+    border-color: #1e293b;
 }
 
 .btn-secondary {
-    background-color: white;
+    background-color: #ffffff;
     border-color: var(--border-color);
     color: var(--text-main);
 }
 
 .btn-secondary:hover {
     background-color: #f8fafc;
-    border-color: #cbd5e1;
-}
-
-.btn-danger {
-    background-color: var(--danger);
-    color: white;
-}
-
-.btn-danger:hover {
-    background-color: #dc2626;
+    border-color: var(--border-dark);
 }
 
 .btn-success {
-    background-color: var(--success);
-    color: white;
+    background-color: #059669;
+    border-color: #047857;
+    color: #ffffff;
 }
 
 .btn-success:hover {
-    background-color: #059669;
+    background-color: #047857;
+}
+
+.btn-danger {
+    background-color: #dc2626;
+    border-color: #b91c1c;
+    color: #ffffff;
+}
+
+.btn-danger:hover {
+    background-color: #b91c1c;
 }
 
 .btn-sm {
     padding: 0.35rem 0.65rem;
-    font-size: 0.825rem;
+    font-size: 0.775rem;
 }
 
-/* ---------------- Forms ---------------- */
+/* ---------------- Forms & Inputs ---------------- */
 .form-group {
-    margin-bottom: 1.25rem;
+    margin-bottom: 1.15rem;
 }
 
 .form-label {
     display: block;
-    font-size: 0.875rem;
-    font-weight: 600;
+    font-size: 0.775rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
     color: var(--text-main);
-    margin-bottom: 0.4rem;
+    margin-bottom: 0.35rem;
 }
 
 .form-control, .form-select, .form-textarea {
     width: 100%;
-    padding: 0.625rem 0.875rem;
+    padding: 0.55rem 0.75rem;
     border: 1px solid var(--border-color);
-    border-radius: var(--radius-sm);
-    font-size: 0.925rem;
+    font-size: 0.875rem;
     color: var(--text-main);
     background-color: #ffffff;
-    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+    font-family: inherit;
+    transition: border-color 0.1s ease;
 }
 
 .form-control:focus, .form-select:focus, .form-textarea:focus {
     outline: none;
-    border-color: var(--border-focus);
-    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
+    border-color: var(--border-dark);
+    box-shadow: 0 0 0 1px var(--border-dark);
 }
 
 .form-row {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 1rem;
-}
-
-.filter-bar {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    flex-wrap: wrap;
-    margin-bottom: 1.25rem;
+    gap: 0.75rem;
 }
 
 /* ---------------- Alerts / Toasts ---------------- */
 .alert {
-    padding: 1rem 1.25rem;
-    border-radius: var(--radius-sm);
-    margin-bottom: 1.5rem;
+    padding: 0.85rem 1.15rem;
+    border: 1px solid var(--border-color);
+    margin-bottom: 1.25rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    font-size: 0.925rem;
+    font-size: 0.875rem;
+    box-shadow: var(--shadow-flat);
 }
 
 .alert-success {
-    background-color: var(--success-light);
+    background-color: var(--status-open-bg);
     color: #065f46;
-    border: 1px solid #a7f3d0;
+    border-color: var(--status-open-border);
+    border-left: 4px solid #059669;
 }
 
 .alert-error {
-    background-color: var(--danger-light);
+    background-color: var(--status-danger-bg);
     color: #991b1b;
-    border: 1px solid #fecaca;
+    border-color: var(--status-danger-border);
+    border-left: 4px solid #dc2626;
 }
 
-/* ---------------- Invoice / Detail View ---------------- */
-.invoice-card {
+.alert-info {
+    background-color: var(--accent-blue-light);
+    color: #1e40af;
+    border-color: #bfdbfe;
+    border-left: 4px solid #2563eb;
+}
+
+/* ---------------- Multi-Select Interactive Menu Cards (Blocky) ---------------- */
+.menu-select-card {
     background: #ffffff;
     border: 1px solid var(--border-color);
-    border-radius: var(--radius-md);
-    padding: 2.5rem;
-    box-shadow: var(--shadow-sm);
-}
-
-.invoice-header {
+    padding: 0.75rem 0.9rem;
+    cursor: pointer;
+    transition: all 0.1s ease;
+    user-select: none;
     display: flex;
-    justify-content: space-between;
-    border-bottom: 2px solid var(--border-color);
-    padding-bottom: 1.5rem;
-    margin-bottom: 2rem;
+    flex-direction: column;
 }
 
-.invoice-meta {
-    text-align: right;
+.menu-select-card:hover {
+    border-color: var(--border-dark);
+    background-color: #f8fafc;
 }
 
-.order-summary-box {
-    background: #f8fafc;
-    border-radius: var(--radius-sm);
-    padding: 1.25rem;
-    margin-left: auto;
-    width: 320px;
-    max-width: 100%;
-}
-
-.summary-row {
-    display: flex;
-    justify-content: space-between;
-    padding: 0.4rem 0;
-    font-size: 0.925rem;
-}
-
-.summary-total {
-    font-size: 1.2rem;
-    font-weight: 700;
-    border-top: 1px solid var(--border-color);
-    padding-top: 0.75rem;
-    margin-top: 0.5rem;
-    color: var(--primary);
+.menu-select-card.is-selected {
+    border: 2px solid #0f172a;
+    background-color: #f1f5f9;
+    box-shadow: 2px 2px 0px #0f172a;
 }
 
 /* ---------------- Footer ---------------- */
 .footer {
     background-color: #ffffff;
     border-top: 1px solid var(--border-color);
-    padding: 1.5rem;
+    padding: 1.25rem;
     text-align: center;
-    font-size: 0.85rem;
-    color: var(--text-muted);
+    font-size: 0.8rem;
+    font-family: var(--font-mono);
+    color: var(--text-light);
     margin-top: auto;
 }
 
@@ -510,57 +530,18 @@ body {
     .navbar-container {
         flex-direction: column;
         height: auto;
-        padding: 1rem;
-        gap: 1rem;
+        padding: 0.75rem;
+        gap: 0.75rem;
     }
     
     .nav-links {
         width: 100%;
         justify-content: center;
+        flex-wrap: wrap;
     }
 
     .page-header {
         flex-direction: column;
         align-items: flex-start;
     }
-
-    .invoice-card {
-        padding: 1.25rem;
-    }
-
-    .invoice-header {
-        flex-direction: column;
-        gap: 1rem;
-    }
-
-    .invoice-meta {
-        text-align: left;
-    }
-
-    .order-summary-box {
-        width: 100%;
-    }
 }
-
-/* ---------------- Multi-Select Interactive Menu Cards ---------------- */
-.menu-select-card {
-    background: #ffffff;
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-sm);
-    padding: 0.65rem 0.85rem;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    user-select: none;
-}
-
-.menu-select-card:hover {
-    border-color: var(--primary);
-    background-color: #f8faff;
-}
-
-.menu-select-card.is-selected {
-    border-color: var(--primary);
-    background-color: var(--primary-light);
-    box-shadow: 0 0 0 1px var(--primary);
-}
-