@howssatoshi/quantumcss 1.8.0 → 1.10.1

package/src/styles/quantum-components.css

@@ -1,12 +1,3 @@
-/*!
- * QuantumCSS Core
- * Layer: Components (Brand Neutral)
- * 
- * RULES:
- * 1. Components MUST ONLY use semantic tokens.
- * 2. NO hardcoded colors, beziers, or brand tokens.
- * 3. Layout and structural logic only.
- */
 
 .group:hover .group-hover\:opacity-100 { opacity: 1; }
 .group:hover .group-hover\:scale-110 { transform: scale(1.1); }
@@ -21,7 +12,7 @@
   padding: var(--q-space-2) var(--q-space-4);
   border-radius: var(--q-radius-md);
   font-weight: 500;
-  transition: all var(--q-duration-fast) var(--q-ease-in-out);
+  transition: all var(--q-duration-150) var(--q-ease-in-out);
   cursor: pointer;
   border: 1px solid transparent;
   text-decoration: none;
@@ -46,20 +37,20 @@
 }
 
 .btn-secondary {
-  background-color: var(--q-color-surface-elevated);
-  color: var(--q-color-text) !important;
+  background-color: rgb(255 255 255 / 8%);
+  color: #ffffff !important;
   border: 0;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
 }
 
 .btn-secondary:hover {
-  background-color: color-mix(in srgb, var(--q-color-surface-elevated), white 5%);
+  background-color: rgb(255 255 255 / 10%);
 }
 
 html[data-theme="light"] .btn-secondary {
-  background-color: var(--q-color-surface-elevated);
-  color: var(--q-color-text) !important;
+  background-color: rgb(0 0 0 / 3%);
+  color: #1e293b !important;
   border: 0;
 }
 
@@ -110,13 +101,18 @@ html[data-theme="light"] .btn-secondary {
 
 /* Card Component */
 .card {
-  background-color: var(--q-color-surface);
-  color: var(--q-color-text);
-  border: 1px solid var(--q-color-border);
+  background-color: var(--q-card-bg);
+  color: var(--q-text-primary);
+  border: 1px solid var(--q-card-border);
   border-radius: var(--q-radius-lg);
   box-shadow: var(--q-shadow-md);
   overflow: hidden;
-  transition: all var(--q-duration-base) var(--q-ease-in-out);
+  transition: all var(--q-duration-200) var(--q-ease-in-out);
+}
+
+html[data-theme="light"] .card {
+  background-color: var(--q-light-card-bg, white);
+  color: var(--q-light-text, #1e293b);
 }
 
 .card:hover {
@@ -124,9 +120,28 @@ html[data-theme="light"] .btn-secondary {
   transform: translateY(-2px);
 }
 
+.card-premium {
+  background: var(--q-color-surface);
+  border: 1px solid var(--q-color-border);
+  border-radius: var(--q-radius-2xl);
+  padding: 2.5rem;
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  color: var(--q-color-text);
+  box-shadow: var(--q-card-shadow);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.card-premium:hover {
+  transform: translateY(-8px) scale(1.02);
+  background-color: color-mix(in srgb, var(--q-color-surface), white 5%);
+  box-shadow: 0 30px 60px -12px rgb(0 0 0 / 50%);
+  border-color: var(--q-color-starlight-blue);
+}
+
 .card-header {
   padding: var(--q-space-6);
-  border-bottom: 1px solid var(--q-color-border);
+  border-bottom: 1px solid var(--q-glass-border);
 }
 
 .card-body {
@@ -135,9 +150,14 @@ html[data-theme="light"] .btn-secondary {
 
 .card-footer {
   padding: var(--q-space-6);
-  border-top: 1px solid var(--q-color-border);
-  background-color: var(--q-color-bg-muted);
-  color: var(--q-color-text-muted);
+  border-top: 1px solid var(--q-glass-border);
+  background-color: var(--q-glass-bg);
+  color: var(--q-text-secondary);
+}
+
+html[data-theme="light"] .card-footer {
+  background-color: #f9fafb;
+  color: #1e293b;
 }
 
 /* Input Component */
@@ -145,12 +165,17 @@ html[data-theme="light"] .btn-secondary {
   display: block;
   width: 100%;
   padding: var(--q-space-2) var(--q-space-3);
-  border: 1px solid var(--q-color-border);
+  border: 1px solid #d1d5db;
   border-radius: var(--q-radius-md);
-  background-color: var(--q-color-surface);
-  color: var(--q-color-text);
+  background-color: white;
+  color: #1e293b;
   font-size: 1rem;
-  transition: all var(--q-duration-fast) var(--q-ease-in-out);
+  transition: all var(--q-duration-150) var(--q-ease-in-out);
+}
+
+html[data-theme="light"] .input {
+  background-color: white;
+  color: #1e293b;
 }
 
 textarea.input {
@@ -160,7 +185,7 @@ textarea.input {
 .input:focus {
   outline: none;
   border-color: var(--q-color-primary);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-color-primary) 30%, transparent);
+  box-shadow: 0 0 0 3px var(--q-color-primary);
 }
 
 /* Date & Time Input Specifics */
@@ -189,18 +214,23 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 }
 
 .input:disabled {
-  background-color: var(--q-color-bg-muted);
-  color: var(--q-color-text-muted);
+  background-color: #f3f4f6;
+  color: #6b7280;
   cursor: not-allowed;
 }
 
+html[data-theme="light"] .input:disabled {
+  background-color: #f3f4f6;
+  color: #6b7280;
+}
+
 .input-error {
-  border-color: var(--q-color-danger);
+  border-color: var(--q-color-error);
 }
 
 .input-error:focus {
-  border-color: var(--q-color-danger);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-color-danger) 30%, transparent);
+  border-color: var(--q-color-error);
+  box-shadow: 0 0 0 3px var(--q-color-error);
 }
 
 /* Badge Component */
@@ -219,33 +249,64 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 }
 
 .badge-primary {
-  background-color: var(--q-color-info-soft);
-  color: var(--q-color-info);
-  border-color: color-mix(in srgb, var(--q-color-info) 30%, transparent);
+  background-color: rgb(0 212 255 / 15%);
+  color: #00d4ff;
+  border-color: rgb(0 212 255 / 30%);
 }
 
 .badge-secondary {
-  background-color: var(--q-color-surface-elevated);
-  color: var(--q-color-text-muted);
-  border-color: var(--q-color-border);
+  background-color: rgb(255 255 255 / 5%);
+  color: rgb(255 255 255 / 80%);
+  border-color: rgb(255 255 255 / 10%);
 }
 
 .badge-success {
-  background-color: var(--q-color-success-soft);
-  color: var(--q-color-success);
-  border-color: color-mix(in srgb, var(--q-color-success) 30%, transparent);
+  background-color: rgb(16 185 129 / 15%);
+  color: #10b981;
+  border-color: rgb(16 185 129 / 30%);
 }
 
 .badge-warning {
-  background-color: var(--q-color-warning-soft);
-  color: var(--q-color-warning);
-  border-color: color-mix(in srgb, var(--q-color-warning) 30%, transparent);
+  background-color: rgb(245 158 11 / 15%);
+  color: #f59e0b;
+  border-color: rgb(245 158 11 / 30%);
 }
 
 .badge-error {
-  background-color: var(--q-color-danger-soft);
-  color: var(--q-color-danger);
-  border-color: color-mix(in srgb, var(--q-color-danger) 30%, transparent);
+  background-color: rgb(239 68 68 / 15%);
+  color: #ef4444;
+  border-color: rgb(239 68 68 / 30%);
+}
+
+/* Light Mode Overrides for Badges */
+html[data-theme="light"] .badge-primary {
+  background-color: rgb(59 130 246 / 10%);
+  color: #2563eb;
+  border-color: rgb(59 130 246 / 20%);
+}
+
+html[data-theme="light"] .badge-secondary {
+  background-color: rgb(0 0 0 / 5%);
+  color: #475569;
+  border-color: rgb(0 0 0 / 10%);
+}
+
+html[data-theme="light"] .badge-success {
+  background-color: rgb(16 185 129 / 10%);
+  color: #059669;
+  border-color: rgb(16 185 129 / 20%);
+}
+
+html[data-theme="light"] .badge-warning {
+  background-color: rgb(245 158 11 / 10%);
+  color: #d97706;
+  border-color: rgb(245 158 11 / 20%);
+}
+
+html[data-theme="light"] .badge-error {
+  background-color: rgb(239 68 68 / 10%);
+  color: #dc2626;
+  border-color: rgb(239 68 68 / 20%);
 }
 
 /* Alert Component */
@@ -256,34 +317,40 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 }
 
 .alert-success {
-  background-color: var(--q-color-success-soft);
-  border-color: color-mix(in srgb, var(--q-color-success) 20%, transparent);
-  color: var(--q-color-success);
+  background-color: #d1fae5;
+  border-color: #6ee7b7;
+  color: #065f46;
 }
 
 .alert-warning {
-  background-color: var(--q-color-warning-soft);
-  border-color: color-mix(in srgb, var(--q-color-warning) 20%, transparent);
-  color: var(--q-color-warning);
+  background-color: #fed7aa;
+  border-color: #fbbf24;
+  color: #92400e;
 }
 
 .alert-error {
-  background-color: var(--q-color-danger-soft);
-  border-color: color-mix(in srgb, var(--q-color-danger) 20%, transparent);
-  color: var(--q-color-danger);
+  background-color: #fee2e2;
+  border-color: #f87171;
+  color: #991b1b;
 }
 
 .alert-info {
-  background-color: var(--q-color-info-soft);
-  border-color: color-mix(in srgb, var(--q-color-info) 20%, transparent);
-  color: var(--q-color-info);
+  background-color: rgb(59 130 246 / 15%);
+  border-color: rgb(59 130 246 / 30%);
+  color: #60a5fa;
+}
+
+html[data-theme="light"] .alert-info {
+  background-color: rgb(59 130 246 / 10%);
+  border-color: rgb(59 130 246 / 20%);
+  color: #1e40af;
 }
 
 /* Modal Component */
 .modal-overlay {
   position: fixed;
   inset: 0;
-  background-color: color-mix(in srgb, var(--q-color-bg) 50%, transparent);
+  background-color: rgb(0 0 0 / 50%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -291,8 +358,8 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 }
 
 .modal-content {
-  background-color: var(--q-color-surface);
-  color: var(--q-color-text);
+  background-color: white;
+  color: #1e293b;
   border-radius: var(--q-radius-lg);
   box-shadow: var(--q-shadow-2xl);
   max-width: 90vw;
@@ -300,12 +367,17 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   overflow-y: auto;
 }
 
+html[data-theme="light"] .modal-content {
+  background-color: white;
+  color: #1e293b;
+}
+
 /* Loading Spinner */
 .spinner {
   display: inline-block;
-  width: 1.5rem;
-  height: 1.5rem;
-  border: 2px solid var(--q-color-border);
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 4px solid color-mix(in srgb, var(--q-color-text), transparent 85%);
   border-top-color: var(--q-color-primary);
   border-radius: 50%;
   animation: spin 1s linear infinite;
@@ -318,12 +390,12 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 /* Skeleton Loading */
 .skeleton {
   background: linear-gradient(90deg, 
-    var(--q-color-bg-muted) 25%, 
-    color-mix(in srgb, var(--q-color-bg-muted), white 5%) 50%, 
-    var(--q-color-bg-muted) 75%
+    var(--q-skeleton-bg) 25%, 
+    var(--q-skeleton-shimmer) 50%, 
+    var(--q-skeleton-bg) 75%
   );
   background-size: 200% 100%;
-  animation: shimmer 2s infinite;
+  animation: shimmer 2s infinite linear;
   border-radius: var(--q-radius-md);
 }
 
@@ -332,6 +404,15 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   100% { background-position: -200% 0; }
 }
 
+html[data-theme="light"] .skeleton {
+  background: linear-gradient(90deg, 
+    var(--q-skeleton-bg) 25%, 
+    var(--q-skeleton-shimmer) 50%, 
+    var(--q-skeleton-bg) 75%
+  );
+}
+
+
 /* Tooltip Component */
 .tooltip {
   position: relative;
@@ -342,15 +423,15 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
-  background-color: var(--q-color-bg-muted);
-  color: var(--q-color-text);
+  background-color: #1f2937;
+  color: white;
   padding: var(--q-space-1) var(--q-space-2);
   border-radius: var(--q-radius-md);
   font-size: 0.875rem;
   white-space: nowrap;
   opacity: 0;
   visibility: hidden;
-  transition: all var(--q-duration-fast) var(--q-ease-in-out);
+  transition: all var(--q-duration-150) var(--q-ease-in-out);
   z-index: 10;
   margin-bottom: var(--q-space-1);
 }
@@ -370,9 +451,9 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   position: absolute;
   top: 100%;
   left: 0;
-  background-color: var(--q-color-surface);
-  color: var(--q-color-text);
-  border: 1px solid var(--q-color-border);
+  background-color: white;
+  color: #1e293b;
+  border: 1px solid #e5e7eb;
   border-radius: var(--q-radius-md);
   box-shadow: var(--q-shadow-lg);
   min-width: 200px;
@@ -380,7 +461,12 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   opacity: 0;
   visibility: hidden;
   transform: translateY(-10px);
-  transition: all var(--q-duration-fast) var(--q-ease-in-out);
+  transition: all var(--q-duration-150) var(--q-ease-in-out);
+}
+
+html[data-theme="light"] .dropdown-content {
+  background-color: white;
+  color: #1e293b;
 }
 
 .dropdown.active .dropdown-content {
@@ -397,13 +483,22 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   background: none;
   border: none;
   cursor: pointer;
-  color: var(--q-color-text);
-  transition: background-color var(--q-duration-fast) var(--q-ease-in-out);
+  color: #1e293b;
+  transition: background-color var(--q-duration-150) var(--q-ease-in-out);
 }
 
 .dropdown-item:hover {
-  background-color: var(--q-color-bg-muted);
-  color: var(--q-color-text);
+  background-color: #f3f4f6;
+  color: #1e293b;
+}
+
+html[data-theme="light"] .dropdown-item {
+  color: #1e293b;
+}
+
+html[data-theme="light"] .dropdown-item:hover {
+  background-color: #f3f4f6;
+  color: #1e293b;
 }
 
 /* Accordion Component */
@@ -417,28 +512,48 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 .accordion-header {
   padding: var(--q-space-3) var(--q-space-4);
   font-weight: 600;
-  background-color: var(--q-color-surface-elevated);
-  border-bottom: 1px solid var(--q-color-border);
-  color: var(--q-color-text);
+  background-color: rgb(255 255 255 / 5%);
+  border-bottom: 1px solid rgb(255 255 255 / 10%);
+  color: var(--q-text-primary);
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  transition: background-color var(--q-duration-fast) var(--q-ease-in-out);
+  transition: background-color var(--q-duration-150) var(--q-ease-in-out);
 }
 
 .accordion-header:hover {
-  background-color: color-mix(in srgb, var(--q-color-surface-elevated), white 5%);
-  color: var(--q-color-text);
+  background-color: rgb(255 255 255 / 8%);
+  color: var(--q-text-primary);
 }
 
 .accordion-content {
   padding: 0 var(--q-space-4);
-  background-color: var(--q-color-surface);
-  color: var(--q-color-text);
+  background-color: var(--q-card-bg);
+  color: var(--q-text-primary);
   max-height: 0;
   overflow: hidden;
-  transition: max-height var(--q-duration-slow) var(--q-ease-in-out), padding var(--q-duration-slow) var(--q-ease-in-out);
+  transition: max-height var(--q-duration-300) var(--q-ease-in-out), padding var(--q-duration-300) var(--q-ease-in-out);
+}
+
+html[data-theme="light"] .accordion-header {
+  background-color: #f8fafc;
+  border-bottom-color: #e2e8f0;
+  color: var(--q-light-text);
+}
+
+html[data-theme="light"] .accordion-header:hover {
+  background-color: #f1f5f9;
+}
+
+html[data-theme="light"] .accordion-header:hover {
+  background-color: color-mix(in srgb, var(--q-color-primary), transparent 92%);
+  color: var(--q-light-text);
+}
+
+html[data-theme="light"] .accordion-content {
+  background-color: var(--q-light-card-bg);
+  color: var(--q-light-text);
 }
 
 .accordion-item.active .accordion-content {
@@ -451,13 +566,13 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 }
 
 .accordion-icon {
-  transition: transform var(--q-duration-slow) var(--q-ease-in-out);
+  transition: transform var(--q-duration-300) var(--q-ease-in-out);
 }
 
 /* Tab Component */
 .tab-list {
   display: flex;
-  border-bottom: 1px solid var(--q-color-border);
+  border-bottom: 1px solid rgb(255 255 255 / 10%);
 }
 
 .tab-button {
@@ -466,17 +581,35 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   border: none;
   cursor: pointer;
   border-bottom: 2px solid transparent;
-  color: var(--q-color-text-muted);
+  color: var(--q-text-secondary);
   font-weight: 500;
-  transition: all var(--q-duration-fast) var(--q-ease-in-out);
+  transition: all var(--q-duration-150) var(--q-ease-in-out);
 }
 
 .tab-button:hover {
-  background-color: var(--q-color-surface-elevated);
-  color: var(--q-color-text);
+  background-color: rgb(255 255 255 / 5%);
+  color: var(--q-text-primary);
 }
 
 .tab-button.active {
+  border-bottom-color: var(--q-color-starlight-blue);
+  color: var(--q-color-starlight-blue);
+}
+
+html[data-theme="light"] .tab-list {
+  border-bottom-color: #e2e8f0;
+}
+
+html[data-theme="light"] .tab-button {
+  color: #64748b;
+}
+
+html[data-theme="light"] .tab-button:hover {
+  background-color: #f1f5f9;
+  color: #0f172a;
+}
+
+html[data-theme="light"] .tab-button.active {
   border-bottom-color: var(--q-color-primary);
   color: var(--q-color-primary);
 }
@@ -497,14 +630,14 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 .progress {
   width: 100%;
   height: 0.5rem;
-  background-color: var(--q-color-border);
+  background-color: #e5e7eb;
   border-radius: var(--q-radius-full);
   overflow: hidden;
 }
 
 .progress-bar {
   height: 100%;
-  transition: width var(--q-duration-slow) var(--q-ease-in-out);
+  transition: width var(--q-duration-300) var(--q-ease-in-out);
 }
 
 /* Toggle Switch */
@@ -525,8 +658,8 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   position: absolute;
   cursor: pointer;
   inset: 0;
-  background-color: var(--q-color-text-muted);
-  transition: background-color var(--q-duration-fast) var(--q-ease-in-out);
+  background-color: #cbd5e1;
+  transition: background-color var(--q-duration-150) var(--q-ease-in-out);
   border-radius: var(--q-radius-full);
 }
 
@@ -538,7 +671,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   left: 0.125rem;
   bottom: 0.125rem;
   background-color: white;
-  transition: transform var(--q-duration-fast) var(--q-ease-in-out);
+  transition: transform var(--q-duration-150) var(--q-ease-in-out);
   border-radius: 50%;
 }
 
@@ -570,7 +703,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 }
 
 .animate-fade-in {
-  animation: fadeIn var(--q-duration-slow) var(--q-ease-in-out);
+  animation: fadeIn var(--q-duration-500) var(--q-ease-in-out);
 }
 
 @keyframes fadeIn {
@@ -579,16 +712,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 }
 
 .animate-slide-up {
-  animation: slideUp var(--q-duration-slow) var(--q-ease-out);
-}
-
-@keyframes slideUp {
-  from { transform: translateY(20px); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-}
-
-.animate-slide-up {
-  animation: slideUp var(--q-duration-slow) var(--q-ease-out);
+  animation: slideUp var(--q-duration-300) var(--q-ease-out);
 }
 
 @keyframes slideUp {
@@ -597,7 +721,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 }
 
 .animate-slide-down {
-  animation: slideDown var(--q-duration-slow) var(--q-ease-out);
+  animation: slideDown var(--q-duration-300) var(--q-ease-out);
 }
 
 @keyframes slideDown {
@@ -617,39 +741,59 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 }
 
 .table-wrapper::-webkit-scrollbar-track {
-  background: var(--q-color-bg-muted);
+  background: rgb(255 255 255 / 5%);
   border-radius: 4px;
 }
 
 .table-wrapper::-webkit-scrollbar-thumb {
-  background: var(--q-color-primary);
+  background: var(--q-color-starlight-blue, #3b82f6);
   border-radius: 4px;
 }
 
+html[data-theme="light"] .table-wrapper::-webkit-scrollbar-track {
+  background: rgb(0 0 0 / 5%);
+}
+
 .table {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.875rem;
   text-align: left;
-  color: var(--q-color-text);
+  color: var(--q-text-primary);
 }
 
 .table th {
   padding: var(--q-space-3) var(--q-space-4);
   font-weight: 600;
-  background-color: var(--q-color-surface-elevated);
-  border-bottom: 2px solid var(--q-color-border);
-  color: var(--q-color-text);
+  background-color: rgb(255 255 255 / 5%);
+  border-bottom: 2px solid rgb(255 255 255 / 10%);
+  color: var(--q-text-primary);
 }
 
 .table td {
   padding: var(--q-space-3) var(--q-space-4);
-  border-bottom: 1px solid var(--q-color-border);
-  color: var(--q-color-text-muted);
+  border-bottom: 1px solid rgb(255 255 255 / 10%);
+  color: var(--q-text-secondary);
 }
 
 .table tbody tr:hover {
-  background-color: var(--q-color-bg-muted);
+  background-color: rgb(255 255 255 / 3%);
+}
+
+/* Light Mode Table Styles */
+html[data-theme="light"] .table th {
+  background-color: #f8fafc;
+  border-bottom-color: #e2e8f0;
+  color: #0f172a;
+}
+
+html[data-theme="light"] .table td {
+  border-bottom-color: #e2e8f0;
+  color: #334155;
+}
+
+html[data-theme="light"] .table tbody tr:hover {
+  background-color: #f1f5f9;
 }
 
 /* Overflow Utility */
@@ -671,7 +815,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   display: grid;
   grid-template-columns: 260px minmax(0, 1fr);
   height: 100vh;
-  background: var(--q-color-bg);
+  background: var(--q-bg-primary, #08081a);
   overflow: hidden;
   max-width: 100vw;
 }
@@ -686,8 +830,8 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 
 /* Sidebar navigation container */
 .sidebar {
-  background: var(--q-color-surface);
-  border-right: 1px solid var(--q-color-border);
+  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 8, 26, 0.98) 100%);
+  border-right: 1px solid rgba(255, 255, 255, 0.08);
   padding: 1.5rem;
   display: flex;
   flex-direction: column;
@@ -708,8 +852,8 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   align-items: center;
   margin-bottom: 2rem;
   padding: 1rem 1.5rem;
-  background: var(--q-color-surface-elevated);
-  border: 1px solid var(--q-color-border);
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 1rem;
 }
 
@@ -728,11 +872,15 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   margin-bottom: 2rem;
 }
 
-/* Page actions container */
-.page-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
+/* Light mode overrides for layout */
+html[data-theme="light"] .sidebar {
+  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+  border-right-color: #e2e8f0;
+}
+
+html[data-theme="light"] .top-nav {
+  background: #ffffff;
+  border-color: #e2e8f0;
 }
 
 /* Responsive layout adjustments */
@@ -755,6 +903,9 @@ input[type="date"]::-webkit-calendar-picker-indicator {
     display: none;
   }
   
+  .main-content {
+  }
+  
   .page-header {
     flex-direction: column;
     align-items: flex-start;
@@ -778,7 +929,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.15em;
-  color: var(--q-color-text-muted);
+  color: var(--q-text-muted, #64748b);
   margin-bottom: 0.75rem;
   padding-left: 0.75rem;
 }
@@ -790,10 +941,10 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   gap: 0.875rem;
   padding: 0.75rem;
   border-radius: 0.625rem;
-  color: var(--q-color-text-muted);
+  color: var(--q-text-secondary, #94a3b8);
   font-size: 0.875rem;
   cursor: pointer;
-  transition: all var(--q-duration-base) var(--q-ease-in-out);
+  transition: all 0.2s ease;
   margin-bottom: 0.25rem;
   text-decoration: none;
   border: none;
@@ -803,13 +954,13 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 }
 
 .nav-item:hover {
-  background: var(--q-color-surface-elevated);
-  color: var(--q-color-text);
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--q-text-primary, #f1f5f9);
 }
 
 .nav-item.active {
-  background: color-mix(in srgb, var(--q-color-primary) 12%, transparent);
-  color: var(--q-color-primary);
+  background: rgba(0, 212, 255, 0.12);
+  color: var(--q-color-starlight, #00d4ff);
 }
 
 /* Constrain nav item icons - prevent oversized icons */
@@ -831,10 +982,14 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 }
 
 .sidebar::-webkit-scrollbar-thumb {
-  background: var(--q-color-border);
+  background: rgba(255, 255, 255, 0.1);
   border-radius: 2px;
 }
 
+html[data-theme="light"] .sidebar::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+}
+
 /* Navigation badge (count) */
 .nav-badge {
   margin-left: auto;
@@ -842,8 +997,18 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   font-weight: 600;
   padding: 0.125rem 0.5rem;
   border-radius: 9999px;
-  background: var(--q-color-danger-soft);
-  color: var(--q-color-danger);
+  background: rgba(239, 68, 68, 0.2);
+  color: #f87171;
+}
+
+/* Light mode overrides for navigation */
+html[data-theme="light"] .nav-item:hover {
+  background: #f1f5f9;
+  color: #0f172a;
+}
+
+html[data-theme="light"] .nav-section-title {
+  color: #64748b;
 }
 
 /* ============================================================================
@@ -861,15 +1026,15 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 
 /* Individual stat card */
 .stat-card {
-  background: var(--q-color-surface);
-  border: 1px solid var(--q-color-border);
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 1rem;
   padding: 1.5rem;
-  transition: all var(--q-duration-slow) var(--q-ease-in-out);
+  transition: all 0.3s ease;
 }
 
 .stat-card:hover {
-  background: var(--q-color-surface-elevated);
+  background: rgba(255, 255, 255, 0.05);
   transform: translateY(-2px);
 }
 
@@ -893,42 +1058,42 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 
 /* Icon color variants */
 .stat-icon-blue {
-  background: var(--q-color-info-soft);
-  color: var(--q-color-info);
+  background: rgba(59, 130, 246, 0.15);
+  color: #60a5fa;
 }
 
 .stat-icon-green {
-  background: var(--q-color-success-soft);
-  color: var(--q-color-success);
+  background: rgba(16, 185, 129, 0.15);
+  color: #34d399;
 }
 
 .stat-icon-orange {
-  background: var(--q-color-warning-soft);
-  color: var(--q-color-warning);
+  background: rgba(249, 115, 22, 0.15);
+  color: #fb923c;
 }
 
 .stat-icon-purple {
-  background: color-mix(in srgb, var(--q-color-primary) 15%, transparent);
-  color: var(--q-color-primary);
+  background: rgba(139, 92, 246, 0.15);
+  color: #a78bfa;
 }
 
 .stat-icon-red {
-  background: var(--q-color-danger-soft);
-  color: var(--q-color-danger);
+  background: rgba(239, 68, 68, 0.15);
+  color: #f87171;
 }
 
 /* Stat value display */
 .stat-value {
   font-size: 1.875rem;
   font-weight: 700;
-  color: var(--q-color-text);
+  color: var(--q-text-primary, #f1f5f9);
   margin-bottom: 0.25rem;
 }
 
 /* Stat label */
 .stat-label {
   font-size: 0.875rem;
-  color: var(--q-color-text-muted);
+  color: var(--q-text-muted, #64748b);
 }
 
 /* Trend indicator */
@@ -943,13 +1108,56 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 }
 
 .stat-trend-up {
-  background: var(--q-color-success-soft);
-  color: var(--q-color-success);
+  background: rgba(16, 185, 129, 0.15);
+  color: #34d399;
 }
 
 .stat-trend-down {
-  background: var(--q-color-danger-soft);
-  color: var(--q-color-danger);
+  background: rgba(239, 68, 68, 0.15);
+  color: #f87171;
+}
+
+/* Light mode overrides for stat cards */
+html[data-theme="light"] .stat-card {
+  background: #ffffff;
+  border-color: #e2e8f0;
+}
+
+html[data-theme="light"] .stat-card:hover {
+  background: #f8fafc;
+}
+
+html[data-theme="light"] .stat-icon-blue {
+  background: rgba(59, 130, 246, 0.1);
+}
+
+html[data-theme="light"] .stat-icon-green {
+  background: rgba(16, 185, 129, 0.1);
+}
+
+html[data-theme="light"] .stat-icon-orange {
+  background: rgba(249, 115, 22, 0.1);
+}
+
+html[data-theme="light"] .stat-icon-purple {
+  background: rgba(139, 92, 246, 0.1);
+}
+
+html[data-theme="light"] .stat-icon-red {
+  background: rgba(239, 68, 68, 0.1);
+}
+
+/* Responsive stats grid */
+@media (max-width: 1280px) {
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 /* ============================================================================
@@ -962,20 +1170,20 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   width: 40px;
   height: 40px;
   border-radius: 0.625rem;
-  background: var(--q-color-surface);
-  border: 1px solid var(--q-color-border);
-  color: var(--q-color-text-muted);
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: var(--q-text-secondary, #94a3b8);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: all var(--q-duration-base) var(--q-ease-in-out);
+  transition: all 0.2s ease;
   position: relative;
 }
 
 .icon-btn:hover {
-  background: var(--q-color-surface-elevated);
-  color: var(--q-color-text);
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--q-text-primary, #f1f5f9);
 }
 
 /* Circular icon button */
@@ -1008,26 +1216,40 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   width: 32px;
   height: 32px;
   border-radius: 0.5rem;
-  background: var(--q-color-surface);
-  border: 1px solid var(--q-color-border);
-  color: var(--q-color-text-muted);
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: var(--q-text-muted, #64748b);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: all var(--q-duration-base) var(--q-ease-in-out);
+  transition: all 0.2s ease;
 }
 
 .action-btn:hover {
-  background: var(--q-color-surface-elevated);
-  color: var(--q-color-text);
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--q-text-primary, #f1f5f9);
 }
 
 /* Delete action button */
 .action-btn-delete:hover {
-  background: var(--q-color-danger-soft);
-  color: var(--q-color-danger);
-  border-color: color-mix(in srgb, var(--q-color-danger) 30%, transparent);
+  background: rgba(239, 68, 68, 0.15);
+  color: #f87171;
+  border-color: rgba(239, 68, 68, 0.3);
+}
+
+/* Light mode overrides for icon buttons */
+html[data-theme="light"] .icon-btn,
+html[data-theme="light"] .action-btn {
+  background: #f1f5f9;
+  border-color: #e2e8f0;
+  color: #64748b;
+}
+
+html[data-theme="light"] .icon-btn:hover,
+html[data-theme="light"] .action-btn:hover {
+  background: #e2e8f0;
+  color: #0f172a;
 }
 
 /* ============================================================================
@@ -1039,7 +1261,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 .theme-toggle-wrapper {
   margin-top: auto;
   padding-top: 1.5rem;
-  border-top: 1px solid var(--q-color-border);
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 /* Theme toggle button */
@@ -1050,18 +1272,18 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   justify-content: center;
   gap: 0.5rem;
   padding: 0.75rem;
-  background: var(--q-color-surface);
-  border: 1px solid var(--q-color-border);
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 0.625rem;
-  color: var(--q-color-text-muted);
+  color: var(--q-text-secondary, #94a3b8);
   font-size: 0.875rem;
   cursor: pointer;
-  transition: all var(--q-duration-base) var(--q-ease-in-out);
+  transition: all 0.2s ease;
 }
 
 .theme-btn:hover {
-  background: var(--q-color-surface-elevated);
-  color: var(--q-color-text);
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--q-text-primary, #f1f5f9);
 }
 
 /* Sun/moon icon visibility */
@@ -1077,6 +1299,17 @@ html[data-theme="light"] .moon-icon {
   display: none;
 }
 
+/* Light mode overrides for theme toggle */
+html[data-theme="light"] .theme-btn {
+  background: #f1f5f9;
+  border-color: #e2e8f0;
+  color: #475569;
+}
+
+html[data-theme="light"] .theme-toggle-wrapper {
+  border-top-color: #e2e8f0;
+}
+
 /* ============================================================================
    AVATARS
    User avatars with initials and images
@@ -1087,13 +1320,13 @@ html[data-theme="light"] .moon-icon {
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background: var(--q-gradient-primary);
+  background: linear-gradient(135deg, #3b82f6, var(--q-color-starlight, #00d4ff));
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   font-size: 0.875rem;
-  color: var(--q-color-text-inverse);
+  color: white;
   position: relative;
   flex-shrink: 0;
   overflow: hidden;
@@ -1144,13 +1377,22 @@ html[data-theme="light"] .moon-icon {
 
 .user-name {
   font-weight: 600;
-  color: var(--q-color-text);
+  color: var(--q-text-primary, #f1f5f9);
   margin-bottom: 0.125rem;
 }
 
 .user-email {
   font-size: 0.75rem;
-  color: var(--q-color-text-muted);
+  color: var(--q-text-muted, #64748b);
+}
+
+/* Light mode overrides for user info */
+html[data-theme="light"] .user-name {
+  color: #0f172a;
+}
+
+html[data-theme="light"] .user-email {
+  color: #64748b;
 }
 
 /* ============================================================================
@@ -1178,30 +1420,30 @@ html[data-theme="light"] .moon-icon {
 
 /* Status variants */
 .status-active {
-  background: var(--q-color-success-soft);
-  color: var(--q-color-success);
+  background: rgba(16, 185, 129, 0.15);
+  color: #34d399;
 }
 
 .status-active::before {
-  background: var(--q-color-success);
+  background: #34d399;
 }
 
 .status-pending {
-  background: var(--q-color-warning-soft);
-  color: var(--q-color-warning);
+  background: rgba(245, 158, 11, 0.15);
+  color: #fbbf24;
 }
 
 .status-pending::before {
-  background: var(--q-color-warning);
+  background: #fbbf24;
 }
 
 .status-inactive {
-  background: var(--q-color-danger-soft);
-  color: var(--q-color-danger);
+  background: rgba(239, 68, 68, 0.15);
+  color: #f87171;
 }
 
 .status-inactive::before {
-  background: var(--q-color-danger);
+  background: #f87171;
 }
 
 /* Role badge */
@@ -1211,19 +1453,18 @@ html[data-theme="light"] .moon-icon {
   border-radius: 0.375rem;
   font-size: 0.75rem;
   font-weight: 500;
-  background: var(--q-color-surface);
-  color: var(--q-color-text-muted);
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--q-text-secondary, #94a3b8);
 }
 
 .role-admin {
-  background: color-mix(in srgb, var(--q-color-primary) 15%, transparent);
-  color: var(--q-color-primary);
+  background: rgba(0, 212, 255, 0.15);
+  color: var(--q-color-starlight, #00d4ff);
 }
 
 .role-moderator {
-  background: color-mix(in srgb, var(--q-color-primary) 15%, transparent);
-  color: var(--q-color-primary);
-  opacity: 0.8;
+  background: rgba(139, 92, 246, 0.15);
+  color: #a78bfa;
 }
 
 /* Count badge */
@@ -1234,11 +1475,11 @@ html[data-theme="light"] .moon-icon {
   min-width: 20px;
   height: 20px;
   padding: 0 6px;
-  background: var(--q-gradient-primary);
+  background: linear-gradient(135deg, var(--q-color-starlight, #00d4ff), #3b82f6);
   border-radius: 10px;
   font-size: 0.6875rem;
   font-weight: 700;
-  color: var(--q-color-text-inverse);
+  color: white;
 }
 
 /* Label/tag */
@@ -1253,60 +1494,70 @@ html[data-theme="light"] .moon-icon {
 }
 
 .label-work {
-  background: var(--q-color-info-soft);
-  color: var(--q-color-info);
+  background: rgba(59, 130, 246, 0.2);
+  color: #60a5fa;
 }
 
 .label-personal {
-  background: var(--q-color-success-soft);
-  color: var(--q-color-success);
+  background: rgba(16, 185, 129, 0.2);
+  color: #34d399;
 }
 
 .label-important {
-  background: var(--q-color-danger-soft);
-  color: var(--q-color-danger);
+  background: rgba(239, 68, 68, 0.2);
+  color: #f87171;
 }
 
-/* ============================================================================
-   SEARCH INPUTS
-   Search boxes with integrated icons
-   ============================================================================ */
+/* Light mode overrides for badges */
+html[data-theme="light"] .status-active {
+  background: rgba(16, 185, 129, 0.1);
+  color: #059669;
+}
 
-/* Search container */
-.search-box {
-  position: relative;
+html[data-theme="light"] .status-pending {
+  background: rgba(245, 158, 11, 0.1);
+  color: #d97706;
 }
 
-/* Search input */
-.search-input {
-  width: 280px;
-  padding: 0.625rem 1rem 0.625rem 2.5rem;
-  background: var(--q-color-surface);
-  border: 1px solid var(--q-color-border);
-  border-radius: 0.625rem;
-  color: var(--q-color-text);
-  font-size: 0.875rem;
-  transition: all var(--q-duration-base) var(--q-ease-in-out);
+html[data-theme="light"] .status-inactive {
+  background: rgba(239, 68, 68, 0.1);
+  color: #dc2626;
 }
 
-.search-input:focus {
-  outline: none;
-  border-color: color-mix(in srgb, var(--q-color-primary) 50%, transparent);
-  background: var(--q-color-surface-elevated);
+html[data-theme="light"] .role-badge {
+  background: #f1f5f9;
+  color: #475569;
 }
 
-.search-input::placeholder {
-  color: var(--q-color-text-muted);
+html[data-theme="light"] .role-admin {
+  background: rgba(0, 212, 255, 0.1);
+  color: #0284c7;
 }
 
-/* Search icon */
-.search-icon {
-  position: absolute;
-  left: 0.875rem;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--q-color-text-muted);
-  pointer-events: none;
+html[data-theme="light"] .label-work {
+  background: rgba(59, 130, 246, 0.1);
+  color: #2563eb;
+}
+
+html[data-theme="light"] .label-personal {
+  background: rgba(16, 185, 129, 0.1);
+  color: #059669;
+}
+
+html[data-theme="light"] .label-important {
+  background: rgba(239, 68, 68, 0.1);
+  color: #dc2626;
+}
+
+/* ============================================================================
+   SEARCH INPUTS
+   Search boxes with integrated icons
+   ============================================================================ */
+
+/* Search input base handled in starlight.css */
+
+.search-input::placeholder {
+  color: var(--q-text-muted, #64748b);
 }
 
 /* Full-width search input */
@@ -1317,10 +1568,10 @@ html[data-theme="light"] .moon-icon {
 /* Filter select (for table filters) */
 .filter-select {
   padding: 0.5rem 2rem 0.5rem 0.75rem;
-  background: var(--q-color-surface);
-  border: 1px solid var(--q-color-border);
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 0.5rem;
-  color: var(--q-color-text-muted);
+  color: var(--q-text-secondary, #94a3b8);
   font-size: 0.875rem;
   cursor: pointer;
   appearance: none;
@@ -1328,11 +1579,20 @@ html[data-theme="light"] .moon-icon {
   background-position: right 0.5rem center;
   background-repeat: no-repeat;
   background-size: 1.25rem;
+  transition: all 0.2s ease;
 }
 
 .filter-select:focus {
   outline: none;
-  border-color: color-mix(in srgb, var(--q-color-primary) 50%, transparent);
+  box-shadow: 0 0 0 2px var(--q-color-starlight-deep), 0 0 0 4px var(--q-color-starlight-blue);
+  border-color: var(--q-color-starlight-blue);
+}
+
+/* Light mode overrides for search */
+html[data-theme="light"] .filter-select {
+  background: #f1f5f9;
+  border-color: #e2e8f0;
+  color: #0f172a;
 }
 
 /* ============================================================================
@@ -1347,24 +1607,24 @@ html[data-theme="light"] .moon-icon {
   right: 2px;
   width: 10px;
   height: 10px;
-  background: var(--q-color-success);
+  background: #10b981;
   border-radius: 50%;
-  border: 2px solid var(--q-color-bg);
+  border: 2px solid var(--q-bg-primary, #08081a);
 }
 
 /* Away status indicator */
 .away-indicator {
-  background: var(--q-color-warning);
+  background: #f59e0b;
 }
 
 /* Busy status indicator */
 .busy-indicator {
-  background: var(--q-color-danger);
+  background: #ef4444;
 }
 
 /* Offline status indicator */
 .offline-indicator {
-  background: var(--q-color-text-muted);
+  background: #64748b;
 }
 
 /* Notification dot */
@@ -1374,9 +1634,9 @@ html[data-theme="light"] .moon-icon {
   right: 8px;
   width: 8px;
   height: 8px;
-  background: var(--q-color-danger);
+  background: #ef4444;
   border-radius: 50%;
-  border: 2px solid var(--q-color-bg);
+  border: 2px solid var(--q-bg-primary, #08081a);
 }
 
 /* Notification badge with number */
@@ -1387,7 +1647,7 @@ html[data-theme="light"] .moon-icon {
   min-width: 18px;
   height: 18px;
   padding: 0 5px;
-  background: var(--q-color-danger);
+  background: #ef4444;
   border-radius: 9px;
   font-size: 0.6875rem;
   font-weight: 700;
@@ -1395,7 +1655,14 @@ html[data-theme="light"] .moon-icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 2px solid var(--q-color-bg);
+  border: 2px solid var(--q-bg-primary, #08081a);
+}
+
+/* Light mode overrides for indicators */
+html[data-theme="light"] .online-indicator,
+html[data-theme="light"] .notification-dot,
+html[data-theme="light"] .notification-badge {
+  border-color: #ffffff;
 }
 
 /* ============================================================================
@@ -1413,29 +1680,47 @@ html[data-theme="light"] .moon-icon {
   height: 36px;
   padding: 0 0.75rem;
   border-radius: 0.5rem;
-  background: var(--q-color-surface);
-  border: 1px solid var(--q-color-border);
-  color: var(--q-color-text-muted);
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: var(--q-text-secondary, #94a3b8);
   font-size: 0.875rem;
   cursor: pointer;
-  transition: all var(--q-duration-base) var(--q-ease-in-out);
+  transition: all 0.2s ease;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .page-btn:hover {
-  background: var(--q-color-surface-elevated);
-  color: var(--q-color-text);
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--q-text-primary, #f1f5f9);
 }
 
 .page-btn.active {
-  background: color-mix(in srgb, var(--q-color-primary) 15%, transparent);
-  border-color: color-mix(in srgb, var(--q-color-primary) 30%, transparent);
-  color: var(--q-color-primary);
+  background: rgba(0, 212, 255, 0.15);
+  border-color: rgba(0, 212, 255, 0.3);
+  color: var(--q-color-starlight, #00d4ff);
 }
 
 .page-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
+}
+
+/* Light mode overrides for pagination */
+html[data-theme="light"] .page-btn {
+  background: #f1f5f9;
+  border-color: #e2e8f0;
+  color: #64748b;
+}
+
+html[data-theme="light"] .page-btn:hover {
+  background: #e2e8f0;
+  color: #0f172a;
+}
+
+html[data-theme="light"] .page-btn.active {
+  background: rgba(59, 130, 246, 0.1);
+  border-color: rgba(59, 130, 246, 0.3);
+  color: #2563eb;
 }