diff --git a/assets/css/custom.css b/assets/css/custom.css index 8e59ccc..3c3c68b 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1,13 +1,32 @@ :root { - --sidebar-width: 250px; + --sidebar-width: 260px; + --primary-color: #4f46e5; + --primary-hover: #4338ca; + --surface-color: #ffffff; + --bg-color: #f8fafc; + --text-main: #0f172a; + --text-muted: #64748b; + --border-color: #e2e8f0; + --radius-sm: 0.5rem; + --radius-md: 0.75rem; + --radius-lg: 1rem; + --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); } + body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background-color: #f4f6f9; + font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: var(--bg-color); + color: var(--text-main); + -webkit-font-smoothing: antialiased; } + #wrapper { overflow-x: hidden; } + +/* Sidebar */ #sidebar-wrapper { min-height: 100vh; height: 100vh; @@ -23,41 +42,75 @@ body { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) transparent; - background: #343a40; /* Dark theme sidebar */ + background: #1e293b; } + [dir="rtl"] #sidebar-wrapper { margin-left: 0; margin-right: calc(-1 * var(--sidebar-width)); left: auto; right: 0; } + #sidebar-wrapper::-webkit-scrollbar { - width: 10px; + width: 6px; } #sidebar-wrapper::-webkit-scrollbar-track { - background: rgba(255, 255, 255, 0.06); + background: transparent; } #sidebar-wrapper::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.28); - border-radius: 999px; - border: 2px solid rgba(52, 58, 64, 0.9); + background: rgba(255, 255, 255, 0.2); + border-radius: 10px; } #sidebar-wrapper::-webkit-scrollbar-thumb:hover { - background: rgba(255, 255, 255, 0.42); + background: rgba(255, 255, 255, 0.3); } -#sidebar-navigation { - padding-bottom: 1rem !important; + +.sidebar-heading { + padding: 1.5rem 1.25rem; + font-size: 1.25rem; + color: #fff; + background: rgba(0,0,0,0.1); + border-bottom: 1px solid rgba(255,255,255,0.05); } + +.list-group-item { + border: none; + padding: 0.85rem 1.25rem; + background-color: transparent; + color: #cbd5e1; + font-weight: 500; + transition: all 0.2s; + margin: 0.2rem 0.75rem; + border-radius: var(--radius-sm); +} +.list-group-item:hover, .list-group-item.active { + background-color: rgba(255, 255, 255, 0.1); + color: #fff; +} +.list-group-item i { + margin-right: 12px; + width: 20px; + text-align: center; + font-size: 1.1em; +} +[dir="rtl"] .list-group-item i { + margin-right: 0; + margin-left: 12px; +} + #wrapper.toggled #sidebar-wrapper { margin-left: 0; } [dir="rtl"] #wrapper.toggled #sidebar-wrapper { margin-right: 0; } + #page-content-wrapper { min-width: 100vw; transition: margin .25s ease-out; } + @media (min-width: 768px) { #sidebar-wrapper { margin-left: 0; @@ -88,64 +141,188 @@ body { } } -.sidebar-heading { - padding: 1rem 1.25rem; - font-size: 1.25rem; - color: #fff; - background: #212529; -} -.list-group-item { - border: none; - padding: 0.85rem 1.25rem; - background-color: transparent; - color: #c2c7d0; - font-weight: 500; -} -.list-group-item:hover, .list-group-item.active { - background-color: rgba(255, 255, 255, 0.1); - color: #fff; -} -.list-group-item i { - margin-right: 10px; - width: 20px; - text-align: center; -} -[dir="rtl"] .list-group-item i { - margin-right: 0; - margin-left: 10px; -} - +/* Navbar */ .top-navbar { - background-color: #fff; - box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); + background-color: var(--surface-color); + box-shadow: var(--shadow-sm); + border-bottom: 1px solid var(--border-color); } -.card { - box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2); - margin-bottom: 1rem; - border: 0; - border-radius: 0.25rem; +/* Cards & Surface */ +.surface-card, .card { + background: var(--surface-color); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); + margin-bottom: 1.5rem; + transition: box-shadow 0.2s; + +} +.surface-card:hover, .card:hover { + box-shadow: var(--shadow-md); +} +.surface-card.p-0, .card.p-0 { + padding: 0; } .card-header { background-color: transparent; - border-bottom: 1px solid rgba(0,0,0,.125); + border-bottom: 1px solid var(--border-color); font-weight: 600; + padding: 1.25rem 1.5rem; +} +.card-body, .surface-card-body { + } +/* Typography & Headers */ +h1, h2, h3, h4, h5, h6 { + font-weight: 600; + color: var(--text-main); +} +h1 { font-size: 1.75rem; } +h2 { font-size: 1.5rem; } + +/* Tables (Grids / Lists) */ +.table { + width: 100%; + margin-bottom: 0; + color: var(--text-main); + vertical-align: middle; +} .table th { font-weight: 600; - color: #495057; - background-color: #f8f9fa; + color: var(--text-muted); + background-color: #f8fafc; + border-bottom: 1px solid var(--border-color); + text-transform: uppercase; + font-size: 0.8rem; + letter-spacing: 0.05em; + padding: 1rem 1.25rem; + white-space: nowrap; +} +.table td { + padding: 1rem 1.25rem; + border-bottom: 1px solid var(--border-color); + vertical-align: middle; +} +.table-hover tbody tr:hover { + background-color: #f1f5f9; +} +.table-responsive { + border-radius: var(--radius-lg); + border: 1px solid var(--border-color); + overflow: hidden; + background: var(--surface-color); + box-shadow: var(--shadow-sm); + margin-bottom: 1.5rem; +} +.table-responsive .table { + margin-bottom: 0; +} +.table-responsive .table th { + border-top: none; } -/* Modal styles */ +/* Forms & Inputs */ +.form-control, .form-select { + border: 1px solid var(--border-color); + border-radius: var(--radius-md); + padding: 0.6rem 1rem; + font-size: 0.95rem; + transition: all 0.2s; + background-color: #f8fafc; +} +.form-control:focus, .form-select:focus { + background-color: #fff; + border-color: var(--primary-color); + box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.2); +} +.form-label { + font-weight: 500; + font-size: 0.9rem; + color: var(--text-muted); + margin-bottom: 0.4rem; +} +.input-group-text { + background-color: #f8fafc; + border-color: var(--border-color); + color: var(--text-muted); +} + +/* Buttons */ +.btn { + border-radius: var(--radius-md); + padding: 0.6rem 1.25rem; + font-weight: 500; + transition: all 0.2s; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} +.btn-primary { + background-color: var(--primary-color); + border-color: var(--primary-color); +} +.btn-primary:hover { + background-color: var(--primary-hover); + border-color: var(--primary-hover); +} +.btn-sm { + padding: 0.4rem 0.8rem; + font-size: 0.875rem; +} + +/* Modals */ +.modal-content { + border-radius: var(--radius-lg); + border: none; + box-shadow: var(--shadow-lg); +} .modal-header { - background-color: #f8f9fa; - border-bottom: 1px solid #dee2e6; + background-color: var(--surface-color); + border-bottom: 1px solid var(--border-color); + padding: 1.25rem 1.5rem; + position: relative; +} +.modal-body { + } .modal-footer { - border-top: 1px solid #dee2e6; - background-color: #f8f9fa; + border-top: 1px solid var(--border-color); + background-color: #f8fafc; + padding: 1.25rem 1.5rem; + border-bottom-left-radius: var(--radius-lg); + border-bottom-right-radius: var(--radius-lg); +} +.modal-header .btn-close { + margin: 0; + position: absolute; + top: 1.25rem; +} +[dir="rtl"] .modal-header .btn-close { + left: 1.5rem; + right: auto; +} +[dir="ltr"] .modal-header .btn-close { + right: 1.5rem; + left: auto; +} + +/* Helpers */ +.glassmorphism { + background: rgba(255, 255, 255, 0.7); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.3); +} +.filter-shell { + background: var(--surface-color); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + + margin-bottom: 1.5rem; + box-shadow: var(--shadow-sm); } body.auth-body { @@ -153,42 +330,14 @@ body.auth-body { align-items: center; justify-content: center; min-height: 100vh; - background-color: #e9ecef; -} - -/* Sidebar Sub-menu */ -[data-bs-toggle="collapse"][aria-expanded="true"] .toggle-icon { - transform: rotate(180deg); -} -/* Fix for btn-close in modal-header */ -.modal-header { - position: relative; -} -.modal-header .btn-close { - margin: 0; - position: absolute; - top: 1rem; -} -[dir="rtl"] .modal-header .btn-close { - left: 1rem; -} -[dir="ltr"] .modal-header .btn-close { - right: 1rem; + background-color: #f1f5f9; } /* Fix form-select arrow position in RTL mode */ [dir="rtl"] .form-select { background-position: left 0.75rem center; - padding-right: 0.75rem; - padding-left: 2.25rem; -} -[dir="rtl"] .form-select-sm { - padding-right: 0.5rem; - padding-left: 2rem; -} -[dir="rtl"] .form-select-lg { padding-right: 1rem; - padding-left: 3rem; + padding-left: 2.25rem; } /* Print specific styles */ @@ -206,21 +355,38 @@ body.auth-body { font-size: 11pt; background-color: #fff; } - .table { - font-size: 10pt; - margin-bottom: 1rem; + .surface-card, .card { + box-shadow: none !important; + border: none !important; + margin-bottom: 0 !important; + padding: 0 !important; + } + .table-responsive { + border: none !important; + box-shadow: none !important; } .table th, .table td { padding: 0.3rem; } - .fs-5 { - font-size: 1rem !important; - } - h2 { - font-size: 1.5rem; - } - .surface-card { - box-shadow: none !important; - border: none !important; - } +} +details summary { list-style: none; cursor: pointer; } +details summary::-webkit-details-marker { display: none; } + + +.eid-advanced-panel { + border-top: 1px dashed var(--border-color); + margin-top: 0.85rem; + padding-top: 0.85rem; +} + + +.card .table-responsive, .surface-card .table-responsive { + box-shadow: none; border: none; border-radius: 0; + margin-bottom: 0; +} + +.surface-card { padding: 1.5rem; } + +.table-sm th, .table-sm td { + padding: 0.5rem 0.75rem !important; } diff --git a/categories.php b/categories.php index 5add71d..b03789b 100644 --- a/categories.php +++ b/categories.php @@ -54,7 +54,7 @@ $items = $queryStmt->fetchAll(); require __DIR__ . '/includes/header.php'; ?> -
+

@@ -73,16 +73,16 @@ require __DIR__ . '/includes/header.php';
-
-
- - +
+
+
+ - - - - - + + + + + diff --git a/customers.php b/customers.php index c488862..8034137 100644 --- a/customers.php +++ b/customers.php @@ -70,7 +70,7 @@ $items = $queryStmt->fetchAll(); require __DIR__ . '/includes/header.php'; ?> -
+

@@ -89,17 +89,17 @@ require __DIR__ . '/includes/header.php';
-
-
-
IDID
- +
+
+
+ - - - - - - + + + + + + diff --git a/eid_orders.php b/eid_orders.php index 2784f8a..eb8eab0 100644 --- a/eid_orders.php +++ b/eid_orders.php @@ -32,7 +32,7 @@ if (!in_array($dir, ['asc', 'desc'], true)) { $dir = 'asc'; } $page = max(1, (int) ($_GET['p'] ?? 1)); -$limit = 15; +$limit = 50; $offset = ($page - 1) * $limit; $allowedBranches = $user && $user['role'] !== 'owner' ? get_user_branches($user) : []; $deliveryOptions = eid_delivery_status_options(); @@ -196,125 +196,20 @@ $sortIcon = static function (string $column) use ($sort, $dir): string { require __DIR__ . '/includes/header.php'; ?> -
+

- - - - + +
- -
+ +
> @@ -324,7 +219,7 @@ require __DIR__ . '/includes/header.php';
- @@ -332,7 +227,7 @@ require __DIR__ . '/includes/header.php';
- @@ -342,17 +237,16 @@ require __DIR__ . '/includes/header.php';
-
-
-
+
+
- +
-
+
- $branchLabel): ?> @@ -360,52 +254,53 @@ require __DIR__ . '/includes/header.php';
-
+
- $label): ?>
-
+
-
- - +
+ + +
-
- - +
+ +
-
-
-
-
-
+
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
@@ -420,58 +315,58 @@ require __DIR__ . '/includes/header.php';
-
-
- - - -
+
+ + + +
-
IDID
+
+ @@ -480,22 +375,22 @@ require __DIR__ . '/includes/header.php'; - - @@ -511,7 +406,6 @@ require __DIR__ . '/includes/header.php';
- + - + - + - + - + - + - +
-
+
+
- + - + +
- 1): ?>