From ad85d83d72feda6e754787b1e12d6e6ac4e4df7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Wed, 29 Apr 2026 06:36:48 +0300
Subject: [PATCH] feat: implement custom Citrus design system with refined
 sidebar, header, and card styles

---
 .../views/admin/inc/citrus-design.blade.php   | 456 ++++++------------
 1 file changed, 156 insertions(+), 300 deletions(-)

diff --git a/resources/views/admin/inc/citrus-design.blade.php b/resources/views/admin/inc/citrus-design.blade.php
index 3268253..0760d4c 100644
--- a/resources/views/admin/inc/citrus-design.blade.php
+++ b/resources/views/admin/inc/citrus-design.blade.php
@@ -1,373 +1,229 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 
 <style>
+/* Global Reset and Font */
 :root {
-    --sidebar-bg: #0b132b;
-    --sidebar-hover: rgba(255, 255, 255, 0.08);
-    --sidebar-active: #3b82f6;
-    --sidebar-text: rgba(255, 255, 255, 0.7);
-    --header-bg: #ffffff;
-    --body-bg: #f4f7fe;
-    --card-bg: #ffffff;
-    --primary: #3b82f6;
-    --text-main: #1e293b;
-    --text-muted: #64748b;
-    --border-color: #e2e8f0;
+    --citrus-primary: #3b82f6;
+    --citrus-dark: #0f172a;
+    --citrus-sidebar: #1e293b;
+    --citrus-body: #f1f5f9;
+    --citrus-border: #e2e8f0;
 }
 
-body {
-    background-color: var(--body-bg) !important;
+body, #page-container {
+    background-color: var(--citrus-body) !important;
     font-family: 'Inter', sans-serif !important;
-    color: var(--text-main);
 }
 
-#page-container {
-    background-color: var(--body-bg) !important;
-}
-
-/* Sidebar Overrides */
+/* --- SIDEBAR REFACTOR --- */
 #sidebar {
-    background-color: var(--sidebar-bg) !important;
-    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1) !important;
+    background-color: var(--citrus-sidebar) !important;
+    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.05) !important;
 }
 
 .sidebar-content {
-    background-color: var(--sidebar-bg) !important;
+    background-color: var(--citrus-sidebar) !important;
 }
 
-#sidebar .content-side-user {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
-    padding: 30px 20px !important;
-    text-align: left !important;
+/* User Area & Logo */
+.content-side-user {
+    padding: 15px !important;
+    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
 }
 
-#sidebar .content-side-user .img-link img {
-    border-radius: 12px !important;
-    width: 48px !important;
-    height: 48px !important;
-    margin-bottom: 15px;
+.sidebar-mini-hidden-b .img-link img {
+    width: 100px !important;
+    height: auto !important;
+    filter: brightness(0) invert(1) !important;
+    margin-bottom: 10px !important;
 }
 
-#sidebar .content-side-user .badge {
-    border-radius: 6px !important;
-    padding: 4px 8px !important;
-    font-size: 10px !important;
+.sidebar-mini-hidden-b .badge {
+    margin: 1px !important;
+    padding: 3px 6px !important;
+    font-size: 9px !important;
+    border-radius: 4px !important;
     text-transform: uppercase;
 }
 
-#sidebar .nav-main {
-    padding: 10px 15px !important;
-}
-
-#sidebar .nav-main li {
-    margin-bottom: 4px;
-}
-
-#sidebar .nav-main li a {
-    border-radius: 10px !important;
-    padding: 12px 15px !important;
-    color: var(--sidebar-text) !important;
-    font-weight: 500 !important;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-}
-
-#sidebar .nav-main li a i,
-#sidebar .nav-main li a img {
-    margin-right: 12px !important;
-    opacity: 0.8;
-}
-
-#sidebar .nav-main li a:hover {
-    background-color: var(--sidebar-hover) !important;
-    color: #fff !important;
-}
-
-#sidebar .nav-main li a.active,
-#sidebar .nav-main li.open > a {
-    background-color: var(--sidebar-active) !important;
-    color: #fff !important;
-    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
-}
-
-#sidebar .nav-main li a.active i,
-#sidebar .nav-main li a.active img {
-    opacity: 1;
-}
-
-#sidebar .nav-main-heading {
-    padding: 20px 15px 10px !important;
-    color: rgba(255, 255, 255, 0.3) !important;
-    font-size: 11px !important;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-}
-
 #search-module {
-    background: rgba(255, 255, 255, 0.05) !important;
-    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    margin: 10px 15px !important;
+    background: rgba(255,255,255,0.03) !important;
+    border: 1px solid rgba(255,255,255,0.1) !important;
     color: #fff !important;
-    border-radius: 10px !important;
-    margin: 0 15px 20px !important;
-    width: calc(100% - 30px) !important;
+    border-radius: 6px !important;
+    height: 32px !important;
+    font-size: 12px !important;
 }
 
-#search-module::placeholder {
-    color: rgba(255, 255, 255, 0.3);
+/* Nav Main Items - TIGHTER LOOK */
+.nav-main {
+    padding: 0 8px !important;
 }
 
-/* Header Overrides */
-#page-header {
-    background-color: var(--header-bg) !important;
-    box-shadow: 0 1px 0 var(--border-color) !important;
-    height: 70px !important;
+.nav-main li {
+    margin: 0 !important;
 }
 
-.content-header {
-    padding: 0 30px !important;
+.nav-main li a {
+    padding: 6px 10px !important; /* Tight padding */
+    margin: 1px 0 !important;
+    border-radius: 6px !important;
+    color: rgba(255,255,255,0.6) !important;
+    font-weight: 500 !important;
+    font-size: 13px !important;
+    display: flex !important;
+    align-items: center !important;
+    transition: none !important; /* Remove animation for faster feel */
 }
 
-#page-header .btn-dual-secondary {
-    background-color: #f8fafc !important;
-    border: 1px solid #f1f5f9 !important;
-    color: var(--text-muted) !important;
-    border-radius: 10px !important;
-    width: 40px !important;
-    height: 40px !important;
+.nav-main li a i {
+    width: 20px !important;
+    margin-right: 10px !important;
+    font-size: 14px !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
 }
 
+.nav-main li a i img {
+    width: 16px !important;
+    height: auto !important;
+    filter: brightness(0) invert(1) opacity(0.5) !important;
+}
+
+.nav-main li a:hover {
+    background-color: rgba(255,255,255,0.05) !important;
+    color: #fff !important;
+}
+
+.nav-main li a:hover i img {
+    opacity: 1 !important;
+}
+
+.nav-main li a.active,
+.nav-main li.open > a.nav-submenu {
+    background-color: var(--citrus-primary) !important;
+    color: #fff !important;
+}
+
+.nav-main li a.active i img {
+    opacity: 1 !important;
+    filter: brightness(0) invert(1) !important;
+}
+
+/* Submenu Styling */
+.nav-main li ul {
+    padding-left: 30px !important;
+    background: transparent !important;
+}
+
+.nav-main li ul li a {
+    font-size: 12.5px !important;
+    padding: 4px 10px !important;
+}
+
+/* --- HEADER REFACTOR --- */
+#page-header {
+    background: #fff !important;
+    height: 50px !important; /* Even tighter header */
+    border-bottom: 1px solid var(--citrus-border) !important;
+    color: #334155 !important;
+}
+
+#page-header.bg-primary, 
+#page-header.bg-primary-dark,
+#page-header.bg-dark {
+    background: #fff !important;
+}
+
+.content-header {
+    height: 50px !important;
+    padding: 0 15px !important;
+}
+
+#page-header .btn-dual-secondary {
+    background: transparent !important;
+    border: none !important;
+    color: #64748b !important;
+    width: 32px !important;
+    height: 32px !important;
+    margin: 0 2px !important;
+}
+
 #page-header .btn-dual-secondary:hover {
-    background-color: #f1f5f9 !important;
-    color: var(--text-main) !important;
+    background: #f1f5f9 !important;
+    color: #0f172a !important;
 }
 
 #page-header #page-header-user-dropdown {
     width: auto !important;
-    padding: 0 15px !important;
+    padding: 0 10px !important;
+    font-size: 13px !important;
 }
 
+/* Hide the absolute mini-header */
 .mini-header {
     display: none !important;
 }
 
-/* Main Content Container */
+/* --- MAIN CONTAINER --- */
 .main-container {
     padding-top: 0 !important;
 }
 
 .content-ajax {
-    padding: 30px !important;
-    margin-top: 70px !important;
+    padding: 12px !important; /* Even tighter content padding */
+    margin-top: 50px !important; /* Override hardcoded 70px in master.blade.php */
 }
 
-/* Card/Block Refactor */
+/* Fix for page-header-fixed layout */
+#page-container.page-header-fixed .main-container {
+    padding-top: 0 !important;
+}
+
+.main-container {
+    background-color: var(--citrus-body) !important;
+}
+
+/* Block (Card) Design */
 .block {
-    background: var(--card-bg) !important;
-    border-radius: 20px !important;
-    border: none !important;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
-    margin-bottom: 30px;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.block:hover {
-    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04) !important;
+    background: #fff !important;
+    border-radius: 8px !important;
+    border: 1px solid var(--citrus-border) !important;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
+    margin-bottom: 15px !important;
 }
 
 .block-header {
-    padding: 25px 30px !important;
-    border-bottom: 1px solid #f8fafc !important;
-    background-color: transparent !important;
+    padding: 10px 15px !important;
+    border-bottom: 1px solid var(--citrus-border) !important;
 }
 
 .block-title {
-    font-size: 18px !important;
-    font-weight: 700 !important;
-    color: var(--text-main) !important;
+    font-size: 14px !important;
+    font-weight: 600 !important;
 }
 
 .block-content {
-    padding: 30px !important;
+    padding: 15px !important;
 }
 
-/* Table Design (from Image 2) */
-.table {
-    width: 100% !important;
-    border-collapse: separate !important;
-    border-spacing: 0 !important;
+/* Table Design */
+.table td, .table th {
+    padding: 10px 15px !important;
+    font-size: 13px !important;
 }
 
-.table thead th {
-    background-color: #f8fafc !important;
-    border: none !important;
-    color: var(--text-muted) !important;
-    font-weight: 600 !important;
-    font-size: 12px !important;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    padding: 15px 20px !important;
-}
-
-.table thead th:first-child { border-radius: 10px 0 0 10px; }
-.table thead th:last-child { border-radius: 0 10px 10px 0; }
-
-.table tbody td {
-    padding: 18px 20px !important;
-    border-bottom: 1px solid #f8fafc !important;
-    vertical-align: middle !important;
-    color: var(--text-main) !important;
-}
-
-.table tbody tr:last-child td {
-    border-bottom: none !important;
-}
-
-/* Button & UI Element Refinement */
-.btn {
-    border-radius: 10px !important;
-    font-weight: 600 !important;
-    padding: 10px 20px !important;
-    transition: all 0.2s ease;
-}
-
-.btn-primary {
-    background-color: var(--primary) !important;
-    border-color: var(--primary) !important;
-    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
-}
-
-.btn-primary:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 6px 15px rgba(59, 130, 246, 0.3) !important;
-}
-
-.form-control {
-    border-radius: 12px !important;
-    border: 1px solid var(--border-color) !important;
-    padding: 12px 18px !important;
-    background-color: #fff !important;
-}
-
-.form-control:focus {
-    border-color: var(--primary) !important;
-    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
-}
-
-/* Breadcrumbs Styling */
-.breadcrumb {
-    padding: 0 !important;
-    margin-bottom: 25px !important;
-    background: transparent !important;
-}
-
-.breadcrumb-item {
-    font-size: 13px;
-    font-weight: 500;
-}
-
-.breadcrumb-item a {
-    color: var(--text-muted) !important;
-}
-
-.breadcrumb-item.active {
-    color: var(--text-main) !important;
-}
-
-/* Scrollbar for Sidebar */
-.sidebar-content::-webkit-scrollbar {
-    width: 4px;
-}
-
-.sidebar-content::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.sidebar-content::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
-}
-
-/* Fix for Sidebar user info area */
-.sidebar-mini-hidden-b {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.sidebar-mini-hidden-b .badge {
-    margin: 5px 0 !important;
-}
-
-.sidebar-mini-hidden-b .img-fluid {
-    filter: brightness(0) invert(1);
-    max-height: 35px;
-}
-
-/* Mini Sidebar Support */
-.sidebar-mini #sidebar {
-    width: 60px !important;
-}
-
-.sidebar-mini #sidebar .nav-main-heading {
-    display: none !important;
-}
-
-.sidebar-mini #sidebar .nav-main li a span {
-    display: none !important;
-}
-
-.sidebar-mini #sidebar .nav-main li a {
-    justify-content: center !important;
-    padding: 12px 0 !important;
-}
-
-.sidebar-mini #sidebar .nav-main li a i,
-.sidebar-mini #sidebar .nav-main li a img {
-    margin-right: 0 !important;
-}
-
-/* Responsive Fixes */
-@media (max-width: 991.98px) {
-    .content-header {
-        padding: 0 15px !important;
-    }
-    
-    .content-ajax {
-        padding: 15px !important;
-    }
-    
-    #sidebar {
-        transform: translateX(-100%);
-    }
-    
-    .sidebar-o #sidebar {
-        transform: translateX(0);
-    }
-}
-
-/* Animations */
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-.content-ajax {
-    animation: fadeIn 0.4s ease-out;
-}
-
-/* Hide Footer Status for cleaner look */
+/* Footer Tweak */
 #page-footer {
-    background: transparent !important;
-    border-top: 1px solid var(--border-color) !important;
-    color: var(--text-muted) !important;
-    position: relative !important;
-    text-align: center !important;
-    padding: 20px !important;
+    padding: 10px !important;
+    font-size: 11px !important;
+    background: #fff !important;
+    border-top: 1px solid var(--citrus-border) !important;
+    color: #94a3b8 !important;
 }
+
 </style>