dolphincss 1.0.5 → 1.0.6

package/MainCss/sideNave.css

@@ -1,7 +1,8 @@
 /* ============================
-   🌊 DolphinCSS Admin Side Navigation - UPDATED
+   🌊 DolphinCSS Admin Side Navigation - MOBILE FIXED
    ✅ Fixed Text Colors
    ✅ Enhanced Mobile Responsive
+   ✅ Fixed Mobile Collapse Behavior
    ============================ */
 
 .admin-nav {
@@ -47,7 +48,7 @@
 .admin-nav-title {
   font-size: var(--text-lg);
   font-weight: var(--font-weight-bold);
-  color: var(--color-text); /* FIXED: Text color variable */
+  color: var(--color-text);
   white-space: nowrap;
   overflow: hidden;
 }
@@ -67,7 +68,7 @@
   align-items: center;
   gap: calc(var(--spacing) * 3);
   padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
-  color: var(--color-text-muted); /* FIXED: Text color variable */
+  color: var(--color-text-muted);
   text-decoration: none;
   transition: all var(--motion-speed) var(--motion-ease);
   position: relative;
@@ -78,13 +79,13 @@
 
 .admin-nav-item:hover {
   background-color: var(--color-primary);
-  color: var(--color-text); /* FIXED: Text color variable */
+  color: var(--color-text);
   transform: translateX(calc(var(--spacing) * 1));
 }
 
 .admin-nav-item.active {
   background-color: var(--color-primary);
-  color: var(--color-text); /* FIXED: Text color variable */
+  color: var(--color-text);
   font-weight: var(--font-weight-semibold);
 }
 
@@ -115,7 +116,7 @@
   overflow: hidden;
   font-size: var(--text-sm);
   transition: all var(--motion-speed) var(--motion-ease);
-  color: inherit; /* FIXED: Inherit parent color */
+  color: inherit;
 }
 
 /* User Section - TEXT COLOR FIXED */
@@ -135,7 +136,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-text); /* FIXED: Text color variable */
+  color: var(--color-text);
   font-weight: var(--font-weight-bold);
   flex-shrink: 0;
 }
@@ -148,7 +149,7 @@
 .admin-nav-user-name {
   font-size: var(--text-sm);
   font-weight: var(--font-weight-semibold);
-  color: var(--color-text); /* FIXED: Text color variable */
+  color: var(--color-text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -156,15 +157,15 @@
 
 .admin-nav-user-role {
   font-size: var(--text-xs);
-  color: var(--color-text-muted); /* FIXED: Text color variable */
+  color: var(--color-text-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-/* Collapse State */
+/* ===== DESKTOP COLLAPSE STATE ===== */
 .admin-nav.collapsed {
-  width: calc(var(--spacing) * 16);
+  width: 80px; /* Icons only */
 }
 
 .admin-nav.collapsed .admin-nav-title,
@@ -198,7 +199,7 @@
   padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
   border-radius: var(--radius-md);
   font-size: var(--text-sm);
-  color: var(--color-text); /* FIXED: Text color variable */
+  color: var(--color-text);
   white-space: nowrap;
   z-index: 1000;
   box-shadow: var(--tw-shadow);
@@ -220,7 +221,7 @@
   justify-content: center;
   cursor: pointer;
   transition: all var(--motion-speed) var(--motion-ease);
-  color: var(--color-text); /* FIXED: Text color variable */
+  color: var(--color-text);
   z-index: 1001;
 }
 
@@ -230,46 +231,53 @@
   transform: scale(1.1);
 }
 
-/* ===== MOBILE RESPONSIVE ENHANCEMENTS ===== */
+/* ===== MOBILE RESPONSIVE - FIXED ===== */
 @media (max-width: 768px) {
+  /* Mobile nav - always icons only and hidden by default */
   .admin-nav {
     position: fixed;
     top: 0;
     left: 0;
     height: 100vh;
-    transform: translateX(-100%);
+    width: 80px; /* Mobile ma always icons only */
+    transform: translateX(-100%); /* Start ma hidden */
     transition: transform 0.3s var(--motion-ease);
-    width: 280px;
     box-shadow: 0 0 20px var(--color-shadow);
+    z-index: 1000;
   }
   
+  /* Mobile open state */
   .admin-nav.mobile-open {
-    transform: translateX(0);
+    transform: translateX(0); /* Slide in */
   }
-  
-  .admin-nav-overlay {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--color-shadow);
-    z-index: 999;
-    backdrop-filter: blur(4px);
+
+  /* Mobile ma always collapsed style - force icons only */
+  .admin-nav .admin-nav-title,
+  .admin-nav .admin-nav-text,
+  .admin-nav .admin-nav-user-info {
+    display: none !important; /* Force hide text on mobile */
   }
-  
-  .admin-nav-overlay.mobile-open {
-    display: block;
+
+  .admin-nav .admin-nav-item {
+    justify-content: center;
+    padding: calc(var(--spacing) * 3) !important;
+    margin: 0 calc(var(--spacing) * 1) !important;
+  }
+
+  .admin-nav .admin-nav-brand {
+    justify-content: center;
+    gap: 0;
+  }
+
+  .admin-nav .admin-nav-user {
+    justify-content: center;
+    padding: calc(var(--spacing) * 2);
   }
 
   /* Mobile Header */
   .admin-nav-header {
     padding: calc(var(--spacing) * 3);
-  }
-
-  .admin-nav-title {
-    font-size: var(--text-base);
+    justify-content: center;
   }
 
   /* Mobile Menu Items */
@@ -277,64 +285,113 @@
     padding: calc(var(--spacing) * 1) 0;
   }
 
-  .admin-nav-item {
-    padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);
-    margin: 0 calc(var(--spacing) * 1.5);
-  }
-
-  /* Mobile User Section */
+  /* Mobile User Section - Center avatar only */
   .admin-nav-user {
-    padding: calc(var(--spacing) * 3);
+    padding: calc(var(--spacing) * 2);
     flex-direction: column;
-    text-align: center;
-    gap: calc(var(--spacing) * 2);
+    align-items: center;
+    gap: calc(var(--spacing) * 1);
   }
 
   .admin-nav-avatar {
-    width: calc(var(--spacing) * 8);
-    height: calc(var(--spacing) * 8);
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+    font-size: var(--text-xs);
   }
 
-  /* Mobile Toggle Button */
+  /* Hide desktop toggle on mobile */
   .admin-nav-toggle {
-    display: none; /* Hide desktop toggle on mobile */
+    display: none;
+  }
+
+  /* Mobile Menu Trigger Button (Add in main content) */
+  .mobile-menu-trigger {
+    display: block;
+    position: fixed;
+    top: calc(var(--spacing) * 2);
+    left: calc(var(--spacing) * 2);
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+    border-radius: 50%;
+    background: var(--color-primary);
+    color: white;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 999;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    font-size: var(--text-lg);
   }
 
-  /* Mobile Close Button */
+  /* Mobile Close Button inside nav */
   .admin-nav-close {
     position: absolute;
-    top: calc(var(--spacing) * 3);
-    right: calc(var(--spacing) * 3);
+    top: calc(var(--spacing) * 2);
+    right: calc(var(--spacing) * 2);
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
-    border-radius: 3.40282e38px;
-    background-color: var(--color-surface);
-    border: 1px solid var(--color-border);
+    border-radius: 50%;
+    background: var(--color-danger);
+    color: white;
+    border: none;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    color: var(--color-text);
     z-index: 1002;
+    font-size: var(--text-sm);
   }
 
-  .admin-nav-close:hover {
-    background-color: var(--color-danger);
-    color: var(--color-text);
+  /* Overlay for mobile */
+  .admin-nav-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0,0,0,0.5);
+    backdrop-filter: blur(4px);
+    z-index: 998;
+  }
+  
+  .admin-nav-overlay.mobile-open {
+    display: block;
+  }
+
+  /* Adjust main content for mobile */
+  .admin-main-content {
+    margin-left: 0 !important;
+    padding-left: calc(var(--spacing) * 2);
+    padding-right: calc(var(--spacing) * 2);
   }
 }
 
-/* Desktop specific */
+/* Desktop specific - Hide mobile elements */
 @media (min-width: 769px) {
-  .admin-nav-close {
+  .mobile-menu-trigger,
+  .admin-nav-close,
+  .admin-nav-overlay {
     display: none;
   }
+  
+  /* Desktop ma proper spacing */
+  .admin-main-content {
+    margin-left: 280px;
+    transition: margin-left var(--motion-speed) var(--motion-ease);
+  }
+  
+  .admin-nav.collapsed ~ .admin-main-content {
+    margin-left: 80px;
+  }
 }
 
 /* Small mobile devices */
 @media (max-width: 480px) {
   .admin-nav {
-    width: 100vw;
+    width: 70px; /* Even more compact on very small screens */
   }
   
   .admin-nav-header {
@@ -342,6 +399,19 @@
   }
   
   .admin-nav-item {
-    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2);
+    padding: calc(var(--spacing) * 2) !important;
+  }
+  
+  .mobile-menu-trigger {
+    width: calc(var(--spacing) * 7);
+    height: calc(var(--spacing) * 7);
+    top: calc(var(--spacing) * 1);
+    left: calc(var(--spacing) * 1);
   }
 }
+
+/* Ensure smooth transitions */
+.admin-nav,
+.admin-nav * {
+  transition: all var(--motion-speed) var(--motion-ease);
+}

package/MainCss/table.css

@@ -1,29 +1,154 @@
- /*===== Table System ===== */
- @layer components {
+/* ===== Table System - ACTUAL Tailwind Compatible ===== */
+@layer components {
   .table {
-    @apply w-full border-collapse transition-all duration-200 text-(--color-text);
+    @apply w-full border-collapse transition-all duration-200 bg-(--color-surface) rounded-xl shadow-md my-4;
   }
+  
   .table th, .table td {
-    @apply px-4 py-2 border border-(--color-border) text-left font-medium transition-all duration-200;
-  }
-  .table.filled th, .table.filled td { background-color: var(--color-surface); color: var(--color-text); }
-  .table.outlined th, .table.outlined td {
-    @apply border-2 border-(--color-border) bg-transparent text-(--color-text);
-  }
-  .table.primary.filled th, .table.primary.filled td { background-color: var(--color-primary); color: var(--color-text); border-color: var(--color-primary); }
-  .table.secondary.filled th, .table.secondary.filled td { background-color: var(--color-secondary); color: var(--color-text); border-color: var(--color-secondary); }
-  .table.success.filled th, .table.success.filled td { background-color: var(--color-success); color: var(--color-text); border-color: var(--color-success); }
-  .table.warning.filled th, .table.warning.filled td { background-color: var(--color-warning); color: var(--color-text); border-color: var(--color-warning); }
-  .table.danger.filled th, .table.danger.filled td { background-color: var(--color-danger); color: var(--color-text); border-color: var(--color-danger); }
-  .table.info.filled th, .table.info.filled td { background-color: var(--color-info); color: var(--color-text); border-color: var(--color-info); }
-  .table.striped tbody tr:nth-child(even) { background-color: color-mix(in oklch, var(--color-surface), 10% oklch(0% 0 0)); }
-  .table tbody tr:hover { opacity: 0.95; }
-  .table.filled.primary tbody tr:hover { background-color: color-mix(in oklch, var(--color-primary), 10% oklch(0% 0 0)); }
-  .table.filled.success tbody tr:hover { background-color: color-mix(in oklch, var(--color-success), 10% oklch(0% 0 0)); }
-  .table.filled.warning tbody tr:hover { background-color: color-mix(in oklch, var(--color-warning), 10% oklch(0% 0 0)); }
-  .table.filled.danger tbody tr:hover { background-color: color-mix(in oklch, var(--color-danger), 10% oklch(0% 0 0)); }
-  .table.filled.info tbody tr:hover { background-color: color-mix(in oklch, var(--color-info), 10% oklch(0% 0 0)); }
-  [data-theme="dark"] .table th, [data-theme="dark"] .table td { border-color: var(--color-border); color: var(--color-text); }
-  [data-theme="dark"] .table.filled th, [data-theme="dark"] .table.filled td { background-color: var(--color-surface); color: var(--color-text); }
-  .table-responsive { @apply overflow-x-auto w-full; }
- }
+    @apply px-4 py-3 text-left border-b border-(--color-border) transition-all duration-200;
+  }
+  
+  .table th {
+    @apply bg-(--color-primary) text-white font-semibold text-sm uppercase tracking-wide;
+  }
+  
+  .table td {
+    @apply bg-(--color-surface) text-(--color-text);
+  }
+
+  /* 🌊 Glass Wave Variant */
+  .table.glass-wave {
+    @apply bg-[color-mix(in_oklch,var(--color-surface),transparent_40%)] backdrop-blur-xl border border-[color-mix(in_oklch,var(--color-border),transparent_60%)];
+  }
+  
+  .table.glass-wave th {
+    @apply bg-[color-mix(in_oklch,var(--color-primary),transparent_20%)] backdrop-blur-lg;
+  }
+  
+  .table.glass-wave td {
+    @apply bg-[color-mix(in_oklch,var(--color-surface),transparent_30%)] border-b border-[color-mix(in_oklch,var(--color-border),transparent_50%)];
+  }
+
+  /* ✨ Neon Flow Variant */
+  .table.neon-flow {
+    @apply bg-[color-mix(in_oklch,var(--color-surface),black_10%)] border border-[color-mix(in_oklch,var(--color-primary),transparent_50%)] shadow-[0_0_20px_color-mix(in_oklch,var(--color-primary),transparent_80%)];
+  }
+  
+  .table.neon-flow th {
+    @apply bg-gradient-to-br from-[color-mix(in_oklch,var(--color-primary),transparent_30%)] to-[color-mix(in_oklch,var(--color-info),transparent_40%)] text-white;
+  }
+
+  /* 🌌 Holo Matrix Variant */
+  .table.holo-matrix {
+    background: radial-gradient(circle at 0% 0%, color-mix(in oklch, var(--color-primary), transparent 90%) 0%, transparent 50%), radial-gradient(circle at 100% 100%, color-mix(in oklch, var(--color-info), transparent 90%) 0%, transparent 50%), var(--color-surface);
+  }
+  
+  .table.holo-matrix th {
+    @apply bg-[color-mix(in_oklch,var(--color-surface),transparent_50%)] backdrop-blur-lg text-(--color-primary) border-b border-[color-mix(in_oklch,var(--color-primary),transparent_70%)];
+  }
+  
+  .table.holo-matrix td {
+    @apply bg-[color-mix(in_oklch,var(--color-surface),transparent_30%)] backdrop-blur-sm;
+  }
+
+  /* 🚀 Quantum Float Variant */
+  .table.quantum-float {
+    @apply shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)] border border-[color-mix(in_oklch,var(--color-border),transparent_50%)] transition-all duration-300;
+  }
+  
+  .table.quantum-float:hover {
+    @apply -translate-y-1 shadow-[0_35px_60px_-12px_rgba(0,0,0,0.3)] border-[color-mix(in_oklch,var(--color-primary),transparent_70%)];
+  }
+  
+  .table.quantum-float th {
+    @apply bg-gradient-to-br from-(--color-primary) to-[color-mix(in_oklch,var(--color-primary),var(--color-info)_30%)] text-white;
+  }
+
+  /* 🌊 Aqua Depth Variant */
+  .table.aqua-depth {
+    background: linear-gradient(160deg, color-mix(in oklch, var(--color-surface), transparent 10%), color-mix(in oklch, var(--color-info), transparent 95%), color-mix(in oklch, var(--color-surface), transparent 10%));
+    @apply border border-[color-mix(in_oklch,var(--color-info),transparent_60%)];
+  }
+  
+  .table.aqua-depth th {
+    @apply bg-[color-mix(in_oklch,var(--color-info),transparent_30%)] text-white border-b-2 border-[color-mix(in_oklch,var(--color-info),transparent_50%)];
+  }
+  
+  .table.aqua-depth td {
+    @apply bg-[color-mix(in_oklch,var(--color-surface),transparent_70%)] border-b border-[color-mix(in_oklch,var(--color-info),transparent_80%)];
+  }
+
+  /* 📱 Mobile Card Layout */
+  @media (max-width: 768px) {
+    .table.mobile-cards {
+      @apply block bg-transparent shadow-none border-none rounded-none;
+    }
+    
+    .table.mobile-cards thead {
+      @apply hidden;
+    }
+    
+    .table.mobile-cards tbody {
+      @apply flex flex-col gap-4;
+    }
+    
+    .table.mobile-cards tr {
+      @apply flex flex-col bg-(--color-surface) rounded-xl p-4 shadow-md border border-(--color-border);
+    }
+    
+    .table.mobile-cards td {
+      @apply flex justify-between items-center p-3 border-none border-b border-(--color-border) bg-transparent;
+    }
+    
+    .table.mobile-cards td:last-child {
+      @apply border-b-0;
+    }
+    
+    .table.mobile-cards td::before {
+      content: attr(data-label);
+      @apply font-semibold text-(--color-primary) text-sm uppercase tracking-wide min-w-20 mr-4;
+    }
+  }
+
+  /* 🎯 Responsive Container */
+  .table-responsive {
+    @apply overflow-x-auto w-full rounded-xl my-4;
+  }
+
+  /* ✨ Animations */
+  .motion-smooth {
+    animation: tableAppear 0.6s ease-out;
+  }
+
+  @keyframes tableAppear {
+    0% {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* 🎨 Color Variants */
+  .table.primary th { @apply bg-(--color-primary); }
+  .table.success th { @apply bg-(--color-success); }
+  .table.warning th { @apply bg-(--color-warning); }
+  .table.danger th { @apply bg-(--color-danger); }
+  .table.info th { @apply bg-(--color-info); }
+
+  /* 📏 Size Variants */
+  .table.sm th, .table.sm td { @apply px-3 py-2 text-xs; }
+  .table.md th, .table.md td { @apply px-4 py-3 text-sm; }
+  .table.lg th, .table.lg td { @apply px-5 py-4 text-base; }
+
+  /* 🎭 Interactive States */
+  .table tbody tr {
+    @apply transition-all duration-200;
+  }
+  
+  .table tbody tr:hover td {
+    @apply bg-[color-mix(in_oklch,var(--color-primary),transparent_95%)];
+  }
+}