feat: implement custom Citrus design system with refined sidebar, header, and card styles

resources/views/admin/inc/citrus-design.blade.php

@@ -30,8 +30,6 @@
         margin-left: 10px !important
     }
 
-
-
     .sidebar-content {
         background-color: var(--citrus-sidebar) !important;
     }
@@ -93,12 +91,11 @@
     .nav-main li a {
         display: flex !important;
         align-items: center !important;
-        padding: 5px 12px !important;
-        /* Reduced from 10px */
+        padding: 7px 12px !important;
         border-radius: 8px !important;
         color: rgba(255, 255, 255, 0.6) !important;
         font-weight: 500 !important;
-        font-size: 13px !important;
+        font-size: 15px !important;
         transition: none !important;
     }
 
@@ -122,7 +119,6 @@
         width: 20px !important;
         height: 20px !important;
         margin-right: 0px !important;
-        /* Tightened gap */
         font-size: 14px !important;
         color: inherit !important;
         flex-shrink: 0 !important;
@@ -183,7 +179,6 @@
     #page-header {
         background: #fff !important;
         height: 50px !important;
-        /* Reduced from 70px */
         border-bottom: 1px solid var(--citrus-border) !important;
     }
 
@@ -235,7 +230,7 @@
     .content-header-section {
         display: flex !important;
         align-items: center !important;
-        gap: 8px !important; /* Added gap between buttons */
+        gap: 8px !important;
     }
 
 
@@ -246,32 +241,117 @@
 
     .content-ajax {
         padding: 0px !important;
-        /* Reduced from 25px */
         margin-top: 50px !important;
-        /* Match header height */
     }
 
     /* Block/Card Styling Tighter */
     .block {
-        background: #fff !important;
+        background: #fff;
         border-radius: 12px !important;
         border: 1px solid var(--citrus-border) !important;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
         margin-bottom: 15px !important;
+        overflow: hidden;
+        transition: all 0.25s ease;
+    }
+
+    .block:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05) !important;
     }
 
     .block-header {
-        padding: 10px 15px !important;
-        border-bottom: 1px solid #f8fafc !important;
+        padding: 12px 16px !important;
+        border-bottom: 1px solid #f1f5f9 !important;
+        background-color: transparent !important;
     }
 
     .block-title {
         font-size: 14px !important;
         font-weight: 600 !important;
+        color: #334155 !important;
     }
 
     .block-content {
-        padding: 15px !important;
+        padding: 16px;
+    }
+
+    /* Fix for image blocks on dashboard */
+    .block.bg-image .block-content {
+        background-color: rgba(0, 0, 0, 0.1);
+    }
+
+    .block-sticky-options {
+        position: relative;
+    }
+
+    .block-options {
+        z-index: 2;
+    }
+
+    /* Ensure text in image blocks is legible */
+    .bg-black-op,
+    .bg-primary-dark-op,
+    .bg-primary-op {
+        backdrop-filter: blur(2px);
+    }
+
+    .bg-black-op,
+    .bg-primary-dark-op,
+    .bg-primary-op {
+        backdrop-filter: blur(4px);
+    }
+
+    /* --- DASHBOARD SPECIFIC REFINEMENTS --- */
+
+    .bg-gd-dusk {
+        background: linear-gradient(135deg, #2c3e50 0%, #000000 100%) !important;
+    }
+
+    .bg-gd-primary {
+        background: linear-gradient(135deg, #1e3b69 0%, #1a233a 100%) !important;
+    }
+
+    .bg-gd-sea {
+        background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important;
+    }
+
+    .bg-gd-lake {
+        background: linear-gradient(135deg, #485563 0%, #29323c 100%) !important;
+    }
+
+    .bg-gd-emerald {
+        background: linear-gradient(135deg, #059669 0%, #064e3b 100%) !important;
+    }
+
+    .bg-gd-corporate {
+        background: linear-gradient(135deg, #475569 0%, #1e293b 100%) !important;
+    }
+
+    .block.bg-image {
+        background-size: cover !important;
+        background-position: center !important;
+    }
+
+    .block.bg-image:hover .block-content {
+        background-color: rgba(0, 0, 0, 0.4) !important;
+    }
+
+    .ribbon-box {
+        font-weight: 700 !important;
+        font-size: 11px !important;
+        padding: 4px 10px !important;
+        border-radius: 4px !important;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        margin: 10px;
+    }
+
+    .bg-primary-dark {
+        background-color: #fff !important;
+    }
+
+    .border-black-op-b {
+        border-bottom: 1px solid #f1f5f9 !important;
     }
 
     /* Override hardcoded styles */