@howssatoshi/quantumcss 1.10.1 → 1.11.1

package/src/styles/quantum-components.css

@@ -38,7 +38,7 @@
 
 .btn-secondary {
   background-color: rgb(255 255 255 / 8%);
-  color: #ffffff !important;
+  color: var(--q-text-primary) !important;
   border: 0;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
@@ -117,7 +117,6 @@ html[data-theme="light"] .card {
 
 .card:hover {
   box-shadow: var(--q-shadow-lg);
-  transform: translateY(-2px);
 }
 
 .card-premium {
@@ -234,7 +233,12 @@ html[data-theme="light"] .input:disabled {
 }
 
 /* Badge Component */
-.badge {
+.badge,
+.badge-primary,
+.badge-secondary,
+.badge-success,
+.badge-warning,
+.badge-error {
   display: inline-flex;
   align-items: center;
   padding: 0.25rem 0.75rem;
@@ -410,6 +414,8 @@ html[data-theme="light"] .skeleton {
     var(--q-skeleton-shimmer) 50%, 
     var(--q-skeleton-bg) 75%
   );
+  background-size: 200% 100%;
+  animation: shimmer 2s infinite linear;
 }
 
 
@@ -488,7 +494,7 @@ html[data-theme="light"] .dropdown-content {
 }
 
 .dropdown-item:hover {
-  background-color: #f3f4f6;
+  background-color: var(--q-color-primary);
   color: #1e293b;
 }
 
@@ -497,10 +503,324 @@ html[data-theme="light"] .dropdown-item {
 }
 
 html[data-theme="light"] .dropdown-item:hover {
-  background-color: #f3f4f6;
+  background-color: var(--q-color-starlight-blue);
   color: #1e293b;
 }
 
+/* ============================================================================
+   MENU COMPONENT
+   Navigation and user menus
+   ============================================================================ */
+
+/* Base menu */
+.menu {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Horizontal menu */
+.menu-horizontal {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--q-space-2);
+}
+
+/* Menu item */
+.menu-item {
+  position: relative;
+}
+
+.menu-link {
+  display: flex;
+  align-items: center;
+  gap: var(--q-space-2);
+  padding: var(--q-space-2) var(--q-space-3);
+  color: var(--q-text-secondary);
+  text-decoration: none;
+  font-weight: 500;
+  border-radius: var(--q-radius-md);
+  transition: all var(--q-duration-150) var(--q-ease-in-out);
+  cursor: pointer;
+}
+
+.menu-link:hover {
+  color: var(--q-text-primary);
+  background-color: var(--q-glass-bg);
+}
+
+.menu-link.active {
+  color: var(--q-color-primary);
+  background-color: color-mix(in srgb, var(--q-color-primary), transparent 90%);
+}
+
+/* Menu icon */
+.menu-icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+/* Menu badge */
+.menu-badge {
+  margin-left: auto;
+  padding: 2px 8px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  background-color: var(--q-color-primary);
+  color: white;
+  border-radius: 9999px;
+}
+
+/* Dropdown menu */
+.menu-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 200px;
+  background-color: var(--q-card-bg);
+  border: 1px solid var(--q-card-border);
+  border-radius: var(--q-radius-lg);
+  box-shadow: var(--q-shadow-lg);
+  padding: var(--q-space-2);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-8px);
+  transition: all var(--q-duration-150) var(--q-ease-in-out);
+  z-index: 50;
+}
+
+.menu-item:hover .menu-dropdown,
+.menu-item.active .menu-dropdown {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.menu-dropdown .menu-link {
+  padding: var(--q-space-2) var(--q-space-3);
+  border-radius: var(--q-radius-md);
+}
+
+.menu-dropdown .menu-link:hover {
+  background-color: var(--q-glass-bg);
+}
+
+/* Mobile menu */
+.menu-mobile {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--q-bg-primary);
+  padding: var(--q-space-6);
+  z-index: 100;
+  transform: translateX(-100%);
+  transition: transform var(--q-duration-300) var(--q-ease-in-out);
+}
+
+.menu-mobile.open {
+  transform: translateX(0);
+}
+
+.menu-mobile .menu {
+  gap: var(--q-space-2);
+}
+
+.menu-mobile .menu-link {
+  padding: var(--q-space-4);
+  font-size: 1.125rem;
+}
+
+/* Menu divider */
+.menu-divider {
+  height: 1px;
+  background-color: var(--q-glass-border);
+  margin: var(--q-space-2) 0;
+}
+
+/* User menu */
+.user-menu {
+  display: flex;
+  align-items: center;
+  gap: var(--q-space-3);
+}
+
+/* Light mode */
+html[data-theme="light"] .menu-link:hover {
+  background-color: #f1f5f9;
+}
+
+html[data-theme="light"] .menu-link.active {
+  background-color: #eff6ff;
+}
+
+html[data-theme="light"] .menu-dropdown {
+  background-color: white;
+  border-color: #e2e8f0;
+}
+
+html[data-theme="light"] .menu-divider {
+  background-color: #e2e8f0;
+}
+
+/* ============================================================================
+   TOAST COMPONENT
+   Notification toasts
+   ============================================================================ */
+
+/* Toast container */
+.toast-container {
+  position: fixed;
+  bottom: var(--q-space-6);
+  right: var(--q-space-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--q-space-3);
+  z-index: 1000;
+  max-width: 400px;
+}
+
+.toast-container-top-right {
+  top: var(--q-space-6);
+  bottom: auto;
+}
+
+.toast-container-top-left {
+  top: var(--q-space-6);
+  left: var(--q-space-6);
+  right: auto;
+}
+
+.toast-container-bottom-left {
+  bottom: var(--q-space-6);
+  left: var(--q-space-6);
+  right: auto;
+}
+
+/* Toast */
+.toast {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--q-space-3);
+  padding: var(--q-space-4);
+  background-color: var(--q-card-bg);
+  border: 1px solid var(--q-card-border);
+  border-radius: var(--q-radius-lg);
+  box-shadow: var(--q-shadow-lg);
+  color: var(--q-text-primary);
+  animation: toast-slide-in 0.3s var(--q-ease-out);
+}
+
+@keyframes toast-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.toast.removing {
+  animation: toast-slide-out 0.3s var(--q-ease-in) forwards;
+}
+
+@keyframes toast-slide-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+/* Toast icon */
+.toast-icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+.toast-success .toast-icon {
+  color: #10b981;
+}
+
+.toast-error .toast-icon {
+  color: #ef4444;
+}
+
+.toast-warning .toast-icon {
+  color: #f59e0b;
+}
+
+.toast-info .toast-icon {
+  color: #3b82f6;
+}
+
+/* Toast content */
+.toast-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.toast-title {
+  font-weight: 600;
+  font-size: 0.875rem;
+  margin-bottom: 2px;
+}
+
+.toast-message {
+  font-size: 0.875rem;
+  color: var(--q-text-secondary);
+  line-height: 1.4;
+}
+
+/* Toast close button */
+.toast-close {
+  padding: 4px;
+  background: none;
+  border: none;
+  color: var(--q-text-muted);
+  cursor: pointer;
+  border-radius: var(--q-radius-sm);
+  transition: all var(--q-duration-150) var(--q-ease-in-out);
+}
+
+.toast-close:hover {
+  color: var(--q-text-primary);
+  background-color: var(--q-glass-bg);
+}
+
+/* Toast variants */
+.toast-success {
+  border-left: 3px solid #10b981;
+}
+
+.toast-error {
+  border-left: 3px solid #ef4444;
+}
+
+.toast-warning {
+  border-left: 3px solid #f59e0b;
+}
+
+.toast-info {
+  border-left: 3px solid #3b82f6;
+}
+
+/* Light mode */
+html[data-theme="light"] .toast {
+  background-color: white;
+  border-color: #e2e8f0;
+}
+
 /* Accordion Component */
 .accordion-item {
   border: 1px solid var(--q-card-border);
@@ -587,7 +907,8 @@ html[data-theme="light"] .accordion-content {
 }
 
 .tab-button:hover {
-  background-color: rgb(255 255 255 / 5%);
+  background-color: color-mix(in srgb,var(--q-color-starlight),transparent 85%);
+  border-radius: 7px;
   color: var(--q-text-primary);
 }
 
@@ -640,66 +961,411 @@ html[data-theme="light"] .tab-button.active {
   transition: width var(--q-duration-300) var(--q-ease-in-out);
 }
 
-/* Toggle Switch */
-.toggle {
-  position: relative;
-  display: inline-block;
-  width: 3rem;
-  height: 1.5rem;
-}
-
-.toggle-input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
+/* ============================================================================
+   CHIP COMPONENT
+   ============================================================================ */
 
-.toggle-slider {
-  position: absolute;
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--q-space-2);
+  padding: 0.6rem 1.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
+  border-radius: 9999px;
+  background-color: var(--q-card-bg);
+  border: 1px solid var(--q-card-border);
+  color: var(--q-text-secondary);
+  transition: all 0.2s;
   cursor: pointer;
-  inset: 0;
-  background-color: #cbd5e1;
-  transition: background-color var(--q-duration-150) var(--q-ease-in-out);
-  border-radius: var(--q-radius-full);
 }
 
-.toggle-slider::before {
-  position: absolute;
-  content: "";
-  height: 1.25rem;
-  width: 1.25rem;
-  left: 0.125rem;
-  bottom: 0.125rem;
-  background-color: white;
-  transition: transform var(--q-duration-150) var(--q-ease-in-out);
-  border-radius: 50%;
+.chip:hover {
+  background-color: rgba(0, 212, 255, 0.1);
+  border-color: rgba(0, 212, 255, 0.3);
+  color: var(--q-color-starlight-blue);
 }
 
-.toggle-input:checked + .toggle-slider {
-  background-color: var(--q-color-primary);
+.chip.active {
+  background-color: rgba(0, 212, 255, 0.1);
+  border-color: rgba(0, 212, 255, 0.3);
+  color: var(--q-color-starlight-blue);
 }
 
-.toggle-input:checked + .toggle-slider::before {
-  transform: translateX(1.5rem);
+/* Chip variants */
+.chip-primary {
+  background-color: rgba(0, 212, 255, 0.1);
+  border-color: rgba(0, 212, 255, 0.3);
+  color: var(--q-color-starlight-blue);
 }
 
-/* Animation Utilities */
-.animate-pulse {
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+.chip-primary:hover,
+.chip-primary.active {
+  background-color: var(--q-color-starlight-blue);
+  color: white;
 }
 
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
+.chip-success {
+  background-color: rgba(16, 185, 129, 0.1);
+  border-color: #10b981;
+  color: #10b981;
 }
 
-.animate-bounce {
-  animation: bounce 1s infinite;
+.chip-success:hover,
+.chip-success.active {
+  background-color: #10b981;
+  color: white;
 }
 
-@keyframes bounce {
-  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
-  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+.chip-warning {
+  background-color: rgba(245, 158, 11, 0.1);
+  border-color: #f59e0b;
+  color: #f59e0b;
+}
+
+.chip-warning:hover,
+.chip-warning.active {
+  background-color: #f59e0b;
+  color: white;
+}
+
+.chip-error {
+  background-color: rgba(239, 68, 68, 0.1);
+  border-color: #ef4444;
+  color: #ef4444;
+}
+
+.chip-error:hover,
+.chip-error.active {
+  background-color: #ef4444;
+  color: white;
+}
+
+/* Chip with icon */
+.chip-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+/* Chip close button */
+.chip-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  background: none;
+  border: none;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  border-radius: 50%;
+  transition: all var(--q-duration-150) var(--q-ease-in-out);
+}
+
+.chip-close:hover {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Chip sizes */
+.chip-sm {
+  padding: 2px var(--q-space-2);
+  font-size: 0.75rem;
+}
+
+.chip-lg {
+  padding: var(--q-space-2) var(--q-space-4);
+  font-size: 1rem;
+}
+
+/* Light mode */
+html[data-theme="light"] .chip {
+  background-color: #f1f5f9;
+  border-color: #e2e8f0;
+  color: #1e293b;
+}
+
+html[data-theme="light"] .chip:hover {
+  background-color: #e2e8f0;
+}
+
+/* ============================================================================
+   DATE PICKER COMPONENT
+   ============================================================================ */
+
+.date-picker {
+  display: inline-block;
+  position: relative;
+}
+
+/* Date picker input */
+.date-picker-input {
+  padding: var(--q-space-2) var(--q-space-3);
+  padding-right: var(--q-space-10);
+  background-color: var(--q-glass-bg);
+  border: 1px solid var(--q-glass-border);
+  border-radius: var(--q-radius-md);
+  color: var(--q-text-primary);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all var(--q-duration-150) var(--q-ease-in-out);
+  min-width: 160px;
+}
+
+.date-picker-input:focus {
+  outline: none;
+  border-color: var(--q-color-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-color-primary), transparent 30%);
+}
+
+.date-picker-input::placeholder {
+  color: var(--q-text-muted);
+}
+
+/* Date picker dropdown/calendar */
+.date-picker-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: var(--q-space-2);
+  background-color: var(--q-card-bg);
+  border: 1px solid var(--q-card-border);
+  border-radius: var(--q-radius-lg);
+  box-shadow: var(--q-shadow-lg);
+  padding: var(--q-space-4);
+  z-index: 50;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-8px);
+  transition: all var(--q-duration-150) var(--q-ease-in-out);
+  min-width: 280px;
+}
+
+.date-picker.active .date-picker-dropdown {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+/* Date picker header */
+.date-picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--q-space-3);
+}
+
+.date-picker-title {
+  font-weight: 600;
+  color: var(--q-text-primary);
+}
+
+.date-picker-nav {
+  display: flex;
+  gap: var(--q-space-1);
+}
+
+.date-picker-nav-btn {
+  padding: var(--q-space-1);
+  background: none;
+  border: none;
+  color: var(--q-text-muted);
+  cursor: pointer;
+  border-radius: var(--q-radius-sm);
+  transition: all var(--q-duration-150) var(--q-ease-in-out);
+}
+
+.date-picker-nav-btn:hover {
+  color: var(--q-text-primary);
+  background-color: var(--q-glass-bg);
+}
+
+/* Date picker grid */
+.date-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+/* Day labels */
+.date-picker-weekday {
+  text-align: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--q-text-muted);
+  padding: var(--q-space-2);
+  text-transform: uppercase;
+}
+
+/* Day */
+.date-picker-day {
+  text-align: center;
+  padding: var(--q-space-2);
+  font-size: 0.875rem;
+  color: var(--q-text-secondary);
+  cursor: pointer;
+  border-radius: var(--q-radius-md);
+  transition: all var(--q-duration-150) var(--q-ease-in-out);
+}
+
+.date-picker-day:hover {
+  background-color: var(--q-glass-bg);
+  color: var(--q-text-primary);
+}
+
+.date-picker-day.selected {
+  background-color: var(--q-color-primary);
+  color: white;
+}
+
+.date-picker-day.today {
+  font-weight: 600;
+  color: var(--q-color-primary);
+}
+
+.date-picker-day.disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.date-picker-day.disabled:hover {
+  background: none;
+  color: var(--q-text-secondary);
+}
+
+.date-picker-day.other-month {
+  color: var(--q-text-muted);
+  opacity: 0.5;
+}
+
+/* Date picker footer */
+.date-picker-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--q-space-2);
+  margin-top: var(--q-space-3);
+  padding-top: var(--q-space-3);
+  border-top: 1px solid var(--q-glass-border);
+}
+
+/* Range date picker */
+.date-picker-range .date-picker-day.in-range {
+  background-color: color-mix(in srgb, var(--q-color-primary), transparent 20%);
+}
+
+.date-picker-range .date-picker-day.start-range,
+.date-picker-range .date-picker-day.end-range {
+  background-color: var(--q-color-primary);
+  color: white;
+}
+
+/* Time picker */
+.time-picker {
+  display: flex;
+  align-items: center;
+  gap: var(--q-space-2);
+}
+
+.time-picker-input {
+  width: 60px;
+  padding: var(--q-space-2);
+  text-align: center;
+  background-color: var(--q-glass-bg);
+  border: 1px solid var(--q-glass-border);
+  border-radius: var(--q-radius-md);
+  color: var(--q-text-primary);
+  font-size: 0.875rem;
+}
+
+.time-picker-separator {
+  font-weight: 600;
+  color: var(--q-text-muted);
+}
+
+/* Light mode */
+html[data-theme="light"] .date-picker-input {
+  background-color: white;
+  border-color: #e2e8f0;
+}
+
+html[data-theme="light"] .date-picker-dropdown {
+  background-color: white;
+  border-color: #e2e8f0;
+}
+
+html[data-theme="light"] .date-picker-day:hover {
+  background-color: #f1f5f9;
+}
+
+html[data-theme="light"] .time-picker-input {
+  background-color: white;
+  border-color: #e2e8f0;
+}
+
+/* Toggle Switch */
+.toggle {
+  position: relative;
+  display: inline-block;
+  width: 3rem;
+  height: 1.5rem;
+}
+
+.toggle-input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  background-color: #cbd5e1;
+  transition: background-color var(--q-duration-150) var(--q-ease-in-out);
+  border-radius: var(--q-radius-full);
+}
+
+.toggle-slider::before {
+  position: absolute;
+  content: "";
+  height: 1.25rem;
+  width: 1.25rem;
+  left: 0.125rem;
+  bottom: 0.125rem;
+  background-color: white;
+  transition: transform var(--q-duration-150) var(--q-ease-in-out);
+  border-radius: 50%;
+}
+
+.toggle-input:checked + .toggle-slider {
+  background-color: var(--q-color-primary);
+}
+
+.toggle-input:checked + .toggle-slider::before {
+  transform: translateX(1.5rem);
+}
+
+/* Animation Utilities */
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.animate-bounce {
+  animation: bounce 1s infinite;
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
+  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
 }
 
 .animate-fade-in {
@@ -796,6 +1462,296 @@ html[data-theme="light"] .table tbody tr:hover {
   background-color: #f1f5f9;
 }
 
+/* Premium Table Component */
+.table-premium-container {
+  background: var(--q-card-bg);
+  border: 1px solid var(--q-card-border);
+  border-radius: var(--q-radius-xl);
+  overflow: hidden;
+  box-shadow: var(--q-shadow-md);
+}
+
+.table-premium-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--q-space-5) var(--q-space-6);
+  border-bottom: 1px solid var(--q-card-border);
+  background: rgba(255, 255, 255, 0.01);
+}
+
+.table-premium-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--q-text-primary);
+}
+
+.table-premium-filters {
+  display: flex;
+  gap: var(--q-space-3);
+}
+
+.table-premium {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table-premium th {
+  text-align: left;
+  padding: var(--q-space-4) var(--q-space-6);
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--q-text-muted);
+  border-bottom: 1px solid var(--q-card-border);
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.table-premium td {
+  padding: var(--q-space-4) var(--q-space-6);
+  font-size: 0.875rem;
+  color: var(--q-text-secondary);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.table-premium tbody tr:hover td {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.table-premium tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.table-premium-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--q-space-4) var(--q-space-6);
+  border-top: 1px solid var(--q-card-border);
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.table-premium-info {
+  font-size: 0.875rem;
+  color: var(--q-text-muted);
+}
+
+/* Light Mode Overrides for Premium Table */
+html[data-theme="light"] .table-premium-container {
+  background: var(--q-light-card-bg);
+  border-color: var(--q-light-card-border);
+}
+
+html[data-theme="light"] .table-premium-header {
+  background: #fcfcfd;
+  border-bottom-color: var(--q-light-card-border);
+}
+
+html[data-theme="light"] .table-premium th {
+  background: #f8fafc;
+  border-bottom-color: var(--q-light-card-border);
+  color: #64748b;
+}
+
+html[data-theme="light"] .table-premium td {
+  border-bottom-color: #f1f5f9;
+  color: #334155;
+}
+
+html[data-theme="light"] .table-premium tbody tr:hover td {
+  background: #f8fafc;
+}
+
+html[data-theme="light"] .table-premium-footer {
+  background: #f8fafc;
+  border-top-color: var(--q-light-card-border);
+}
+
+/* ============================================================================
+   LIST COMPONENT
+   ============================================================================ */
+
+/* Base list container */
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--q-space-1);
+}
+
+/* Scrollable list container */
+.list-scroll {
+  display: flex;
+  flex-direction: column;
+  gap: var(--q-space-1);
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  max-height: 400px;
+  padding: var(--q-space-2);
+}
+
+.list-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+
+.list-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.list-scroll::-webkit-scrollbar-thumb {
+  background: var(--q-color-secondary);
+  border-radius: 3px;
+  opacity: 0.5;
+}
+
+.list-scroll::-webkit-scrollbar-thumb:hover {
+  background: var(--q-color-primary);
+}
+
+/* List item */
+.list-item {
+  display: flex;
+  align-items: center;
+  gap: var(--q-space-3);
+  padding: var(--q-space-3) var(--q-space-4);
+  border-radius: var(--q-radius-md);
+  cursor: pointer;
+  transition: all var(--q-duration-150) var(--q-ease-in-out);
+  color: var(--q-text-primary);
+}
+
+.list-item:hover {
+  background-color: var(--q-glass-bg);
+}
+
+.list-item.active {
+  background-color: color-mix(in srgb, var(--q-color-primary), transparent 90%);
+  color: var(--q-color-primary);
+}
+
+/* List item with avatar */
+.list-item-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+/* List item content */
+.list-item-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.list-item-title {
+  font-size: var(--q-space-4);
+  font-weight: 500;
+  color: var(--q-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.list-item-subtitle {
+  font-size: var(--q-space-3);
+  color: var(--q-text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.list-item-meta {
+  font-size: var(--q-space-3);
+  color: var(--q-text-muted);
+  flex-shrink: 0;
+}
+
+/* List item with icon */
+.list-item-icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  color: var(--q-text-muted);
+}
+
+.list-item:hover .list-item-icon {
+  color: var(--q-text-primary);
+}
+
+/* List header */
+.list-header {
+  display: flex;
+  align-items: center;
+  gap: var(--q-space-3);
+  padding: var(--q-space-2) var(--q-space-4);
+  font-size: var(--q-space-3);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--q-text-muted);
+  border-bottom: 1px solid var(--q-glass-border);
+}
+
+/* List divider */
+.list-divider {
+  height: 1px;
+  background-color: var(--q-glass-border);
+  margin: var(--q-space-2) 0;
+}
+
+/* List actions */
+.list-item-actions {
+  display: flex;
+  gap: var(--q-space-2);
+  opacity: 0;
+  transition: opacity var(--q-duration-150) var(--q-ease-in-out);
+}
+
+.list-item:hover .list-item-actions {
+  opacity: 1;
+}
+
+/* Unread list item */
+.list-item-unread .list-item-title,
+.list-item-unread .list-item-subtitle {
+  font-weight: 600;
+  color: var(--q-text-primary);
+}
+
+/* Compact list */
+.list-compact .list-item {
+  padding: var(--q-space-2) var(--q-space-3);
+}
+
+/* List with borders */
+.list-bordered {
+  border: 1px solid var(--q-glass-border);
+  border-radius: var(--q-radius-lg);
+  padding: var(--q-space-2);
+}
+
+/* Grid list (for cards/media items) */
+.list-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: var(--q-space-4);
+  padding: var(--q-space-4);
+}
+
+/* Light mode overrides */
+html[data-theme="light"] .list-item:hover {
+  background-color: #f1f5f9;
+}
+
+html[data-theme="light"] .list-item.active {
+  background-color: #eff6ff;
+}
+
+html[data-theme="light"] .list-divider {
+  background-color: #e2e8f0;
+}
+
 /* Overflow Utility */
 .overflow-x-auto {
   overflow-x: auto;
@@ -815,7 +1771,7 @@ html[data-theme="light"] .table tbody tr:hover {
   display: grid;
   grid-template-columns: 260px minmax(0, 1fr);
   height: 100vh;
-  background: var(--q-bg-primary, #08081a);
+  background: var(--q-bg-primary);
   overflow: hidden;
   max-width: 100vw;
 }
@@ -845,25 +1801,31 @@ html[data-theme="light"] .table tbody tr:hover {
   overflow-x: hidden;
 }
 
-/* Top navigation bar */
+/* Top Header Bar */
 .top-nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 2rem;
   padding: 1rem 1.5rem;
   background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 1rem;
+  margin-bottom: 2rem;
 }
 
-/* Top navigation actions container */
 .top-nav-actions {
   display: flex;
   align-items: center;
   gap: 0.75rem;
 }
 
+html[data-theme="light"] .top-nav {
+  background: var(--q-light-card-bg, #ffffff);
+  border-color: var(--q-light-card-border, #e2e8f0);
+}
+
 /* Page header with actions */
 .page-header {
   display: flex;
@@ -872,15 +1834,34 @@ html[data-theme="light"] .table tbody tr:hover {
   margin-bottom: 2rem;
 }
 
-/* Light mode overrides for layout */
-html[data-theme="light"] .sidebar {
-  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
-  border-right-color: #e2e8f0;
+.page-title {
+  font-size: 1.875rem;
+  font-weight: 700;
+  color: var(--q-text-primary, #f1f5f9);
+  margin: 0 0 0.25rem 0;
+  line-height: 1.2;
 }
 
-html[data-theme="light"] .top-nav {
-  background: #ffffff;
-  border-color: #e2e8f0;
+.page-subtitle {
+  font-size: 0.875rem;
+  color: var(--q-text-muted, #64748b);
+  margin: 0;
+}
+
+.page-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+html[data-theme="light"] .page-title {
+  color: #0f172a;
+}
+
+/* Light mode overrides for layout */
+html[data-theme="light"] .sidebar {
+  background: linear-gradient(180deg, var(--q-light-card-bg) 0%, var(--q-light-bg) 100%);
+  border-right-color: var(--q-light-card-border);
 }
 
 /* Responsive layout adjustments */
@@ -913,6 +1894,61 @@ html[data-theme="light"] .top-nav {
   }
 }
 
+/* ============================================================================
+   BREADCRUMBS
+   Navigation trails for complex applications
+   ============================================================================ */
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: var(--q-space-2, 0.5rem);
+  font-size: 0.875rem;
+  color: var(--q-text-muted, #64748b);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
+  gap: var(--q-space-2, 0.5rem);
+}
+
+.breadcrumb-link {
+  color: var(--q-text-secondary, #94a3b8);
+  text-decoration: none;
+  transition: color var(--q-duration-150, 0.2s);
+}
+
+.breadcrumb-link:hover {
+  color: var(--q-color-primary, #00d4ff);
+}
+
+.breadcrumb-separator {
+  color: var(--q-text-muted, #64748b);
+  opacity: 0.6;
+}
+
+.breadcrumb-current {
+  color: var(--q-text-primary, #f1f5f9);
+  font-weight: 500;
+}
+
+/* Light mode overrides for breadcrumbs */
+html[data-theme="light"] .breadcrumb-link {
+  color: #64748b;
+}
+
+html[data-theme="light"] .breadcrumb-link:hover {
+  color: #2563eb;
+}
+
+html[data-theme="light"] .breadcrumb-current {
+  color: #0f172a;
+}
+
 /* ============================================================================
    NAVIGATION PATTERNS
    Sidebar navigation items and sections
@@ -951,6 +1987,7 @@ html[data-theme="light"] .top-nav {
   background: transparent;
   width: 100%;
   text-align: left;
+  position: relative;
 }
 
 .nav-item:hover {
@@ -963,13 +2000,23 @@ html[data-theme="light"] .top-nav {
   color: var(--q-color-starlight, #00d4ff);
 }
 
-/* Constrain nav item icons - prevent oversized icons */
-.nav-item svg {
+.nav-item.active::before {
+  content: '';
+  position: absolute;
+  left: -1.5rem; /* Align with sidebar edge */
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 20px;
+  background: var(--q-color-starlight, #00d4ff);
+  border-radius: 0 2px 2px 0;
+}
+
+/* Constrain nav item icons */
+.nav-item i, .nav-item .q-icon, .nav-item svg {
   width: 1.125rem;
   height: 1.125rem;
-  max-width: 1.125rem;
-  max-height: 1.125rem;
-  flex-shrink: 0;
+  font-size: 1.125rem;
 }
 
 /* Sidebar scrollbar styling to prevent layout shift */
@@ -1011,6 +2058,88 @@ html[data-theme="light"] .nav-section-title {
   color: #64748b;
 }
 
+/* ============================================================================
+   QUICK ACTIONS
+   Prominent action cards for dashboard navigation
+   ============================================================================ */
+
+.quick-action-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+}
+
+.quick-action-card {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 1rem;
+  padding: 1.5rem;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.quick-action-card:hover {
+  background: rgba(255, 255, 255, 0.05);
+  transform: translateY(-4px);
+  border-color: var(--q-color-primary, #00d4ff);
+  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.5);
+}
+
+.quick-action-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--q-color-primary, #00d4ff);
+  transition: all 0.3s ease;
+}
+
+.quick-action-icon i, .quick-action-icon .q-icon, .quick-action-icon svg {
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: 1.75rem;
+}
+
+.quick-action-card:hover .quick-action-icon {
+  background: var(--q-color-primary, #00d4ff);
+  color: white;
+  transform: scale(1.1);
+}
+
+.quick-action-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--q-text-primary, #f1f5f9);
+}
+
+.quick-action-desc {
+  font-size: 0.8125rem;
+  color: var(--q-text-muted, #64748b);
+  line-height: 1.4;
+}
+
+/* Light mode overrides for quick actions */
+html[data-theme="light"] .quick-action-card {
+  background: #ffffff;
+  border-color: #e2e8f0;
+}
+
+html[data-theme="light"] .quick-action-card:hover {
+  background: #f8fafc;
+}
+
+html[data-theme="light"] .quick-action-icon {
+  background: #f1f5f9;
+}
+
 /* ============================================================================
    STAT CARDS
    Dashboard metric cards with icons and values
@@ -1019,7 +2148,7 @@ html[data-theme="light"] .nav-section-title {
 /* Stats grid layout */
 .stats-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 1.5rem;
   margin-bottom: 2rem;
 }
@@ -1056,6 +2185,12 @@ html[data-theme="light"] .nav-section-title {
   justify-content: center;
 }
 
+.stat-icon i, .stat-icon .q-icon, .stat-icon svg {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 1.5rem;
+}
+
 /* Icon color variants */
 .stat-icon-blue {
   background: rgba(59, 130, 246, 0.15);
@@ -1107,6 +2242,12 @@ html[data-theme="light"] .nav-section-title {
   border-radius: 0.375rem;
 }
 
+.stat-trend i, .stat-trend .q-icon, .stat-trend svg {
+  width: 0.75rem;
+  height: 0.75rem;
+  font-size: 0.75rem;
+}
+
 .stat-trend-up {
   background: rgba(16, 185, 129, 0.15);
   color: #34d399;
@@ -1117,10 +2258,77 @@ html[data-theme="light"] .nav-section-title {
   color: #f87171;
 }
 
+/* ============================================================================
+   ACTIVITY FEED
+   Timeline of recent events and updates
+   ============================================================================ */
+
+.activity-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.activity-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1rem 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.activity-item:last-child {
+  border-bottom: none;
+}
+
+.activity-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.activity-icon i, .activity-icon .q-icon, .activity-icon svg {
+  width: 1rem;
+  height: 1rem;
+  font-size: 1rem;
+}
+
+.activity-content {
+  flex: 1;
+}
+
+.activity-text {
+  font-size: 0.875rem;
+  color: var(--q-text-primary, #f1f5f9);
+  margin-bottom: 0.25rem;
+}
+
+.activity-text span {
+  color: var(--q-color-starlight, #00d4ff);
+  font-weight: 500;
+}
+
+.activity-time {
+  font-size: 0.75rem;
+  color: var(--q-text-muted, #64748b);
+}
+
+/* Light mode overrides for activity feed */
+html[data-theme="light"] .activity-item {
+  border-bottom-color: #f1f5f9;
+}
+
+html[data-theme="light"] .activity-text {
+  color: #0f172a;
+}
+
 /* Light mode overrides for stat cards */
 html[data-theme="light"] .stat-card {
-  background: #ffffff;
-  border-color: #e2e8f0;
+  background: var(--q-light-card-bg);
+  border-color: var(--q-light-card-border);
 }
 
 html[data-theme="light"] .stat-card:hover {
@@ -1147,19 +2355,6 @@ 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;
-  }
-}
-
 /* ============================================================================
    ICON BUTTONS
    Square and circular icon buttons
@@ -1181,6 +2376,12 @@ html[data-theme="light"] .stat-icon-red {
   position: relative;
 }
 
+.icon-btn i, .icon-btn .q-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  font-size: 1.25rem;
+}
+
 .icon-btn:hover {
   background: rgba(255, 255, 255, 0.08);
   color: var(--q-text-primary, #f1f5f9);
@@ -1198,6 +2399,12 @@ html[data-theme="light"] .stat-icon-red {
   border-radius: 0.5rem;
 }
 
+.icon-btn-sm i, .icon-btn-sm .q-icon {
+  width: 1rem;
+  height: 1rem;
+  font-size: 1rem;
+}
+
 /* Large icon button */
 .icon-btn-lg {
   width: 48px;
@@ -1205,6 +2412,12 @@ html[data-theme="light"] .stat-icon-red {
   border-radius: 0.75rem;
 }
 
+.icon-btn-lg i, .icon-btn-lg .q-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 1.5rem;
+}
+
 /* Action buttons container */
 .action-buttons {
   display: flex;
@@ -1226,11 +2439,24 @@ html[data-theme="light"] .stat-icon-red {
   transition: all 0.2s ease;
 }
 
+.action-btn i, .action-btn .q-icon {
+  width: 1rem;
+  height: 1rem;
+  font-size: 1rem;
+}
+
 .action-btn:hover {
   background: rgba(255, 255, 255, 0.08);
   color: var(--q-text-primary, #f1f5f9);
 }
 
+/* ICON SIZING UTILITIES */
+.icon-xs { width: 0.75rem !important; height: 0.75rem !important; font-size: 0.75rem !important; }
+.icon-sm { width: 1rem !important; height: 1rem !important; font-size: 1rem !important; }
+.icon-md { width: 1.25rem !important; height: 1.25rem !important; font-size: 1.25rem !important; }
+.icon-lg { width: 1.5rem !important; height: 1.5rem !important; font-size: 1.5rem !important; }
+.icon-xl { width: 2rem !important; height: 2rem !important; font-size: 2rem !important; }
+
 /* Delete action button */
 .action-btn-delete:hover {
   background: rgba(239, 68, 68, 0.15);
@@ -1287,18 +2513,6 @@ html[data-theme="light"] .action-btn:hover {
 }
 
 /* Sun/moon icon visibility */
-.sun-icon {
-  display: none;
-}
-
-html[data-theme="light"] .sun-icon {
-  display: inline;
-}
-
-html[data-theme="light"] .moon-icon {
-  display: none;
-}
-
 /* Light mode overrides for theme toggle */
 html[data-theme="light"] .theme-btn {
   background: #f1f5f9;
@@ -1404,52 +2618,46 @@ html[data-theme="light"] .user-email {
 .status-badge {
   display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
-  padding: 0.375rem 0.875rem;
-  border-radius: 9999px;
+  justify-content: center;
+  padding: 0.3rem 0.75rem;
+  border-radius: 0.375rem;
   font-size: 0.75rem;
   font-weight: 500;
 }
 
-.status-badge::before {
-  content: '';
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-}
-
 /* Status variants */
 .status-active {
-  background: rgba(16, 185, 129, 0.15);
+  background: rgba(52, 211, 153, 0.12);
   color: #34d399;
 }
 
-.status-active::before {
-  background: #34d399;
-}
-
 .status-pending {
-  background: rgba(245, 158, 11, 0.15);
+  background: rgba(251, 191, 36, 0.12);
   color: #fbbf24;
 }
 
-.status-pending::before {
-  background: #fbbf24;
-}
-
 .status-inactive {
-  background: rgba(239, 68, 68, 0.15);
+  background: rgba(248, 113, 113, 0.12);
   color: #f87171;
 }
 
-.status-inactive::before {
-  background: #f87171;
+/* Simplified status for tables */
+.status-cell {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
+.status-active-dot { background-color: #34d399; }
+.status-pending-dot { background-color: #fbbf24; }
+.status-inactive-dot { background-color: #f87171; }
+
 /* Role badge */
 .role-badge {
   display: inline-flex;
-  padding: 0.25rem 0.75rem;
+  align-items: center;
+  justify-content: center;
+  padding: 0.3rem 0.75rem;
   border-radius: 0.375rem;
   font-size: 0.75rem;
   font-weight: 500;
@@ -1486,7 +2694,8 @@ html[data-theme="light"] .user-email {
 .label {
   display: inline-flex;
   align-items: center;
-  padding: 0.25rem 0.75rem;
+  justify-content: center;
+  padding: 0.3rem 0.75rem;
   border-radius: 9999px;
   font-size: 0.75rem;
   font-weight: 500;
@@ -1510,17 +2719,17 @@ html[data-theme="light"] .user-email {
 
 /* Light mode overrides for badges */
 html[data-theme="light"] .status-active {
-  background: rgba(16, 185, 129, 0.1);
+  background: rgba(5, 150, 105, 0.1);
   color: #059669;
 }
 
 html[data-theme="light"] .status-pending {
-  background: rgba(245, 158, 11, 0.1);
+  background: rgba(217, 119, 6, 0.1);
   color: #d97706;
 }
 
 html[data-theme="light"] .status-inactive {
-  background: rgba(239, 68, 68, 0.1);
+  background: rgba(220, 38, 38, 0.1);
   color: #dc2626;
 }
 
@@ -1609,22 +2818,64 @@ html[data-theme="light"] .filter-select {
   height: 10px;
   background: #10b981;
   border-radius: 50%;
-  border: 2px solid var(--q-bg-primary, #08081a);
+  border: 2px solid var(--q-bg-primary);
+}
+
+/* Away status indicator */
+.away-indicator {
+  background: #f59e0b;
+}
+
+/* Busy status indicator */
+.busy-indicator {
+  background: #ef4444;
+}
+
+/* Offline status indicator */
+.offline-indicator {
+  background: #64748b;
+}
+
+/* Generic dot component */
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+  flex-shrink: 0;
+  background-color: var(--q-text-muted, #64748b);
+}
+
+.blue-dot { background-color: #3b82f6; box-shadow: 0 0 10px rgba(59, 130, 246, 0.4); }
+.green-dot { background-color: #10b981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); }
+.red-dot { background-color: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.4); }
+
+/* Status dot variants */
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+  background: var(--q-text-muted, #64748b);
 }
 
-/* Away status indicator */
-.away-indicator {
-  background: #f59e0b;
+.status-dot-online { 
+  background-color: #10b981; 
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
 }
 
-/* Busy status indicator */
-.busy-indicator {
-  background: #ef4444;
+.status-dot-offline { 
+  background-color: #64748b; 
 }
 
-/* Offline status indicator */
-.offline-indicator {
-  background: #64748b;
+.status-dot-away { 
+  background-color: #f59e0b; 
+  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
+}
+
+.status-dot-busy { 
+  background-color: #ef4444; 
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
 }
 
 /* Notification dot */
@@ -1636,7 +2887,7 @@ html[data-theme="light"] .filter-select {
   height: 8px;
   background: #ef4444;
   border-radius: 50%;
-  border: 2px solid var(--q-bg-primary, #08081a);
+  border: 2px solid var(--q-bg-primary);
 }
 
 /* Notification badge with number */
@@ -1655,14 +2906,14 @@ html[data-theme="light"] .filter-select {
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 2px solid var(--q-bg-primary, #08081a);
+  border: 2px solid var(--q-bg-primary);
 }
 
 /* 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;
+  border-color: var(--q-light-card-bg);
 }
 
 /* ============================================================================
@@ -1723,4 +2974,499 @@ html[data-theme="light"] .page-btn.active {
   background: rgba(59, 130, 246, 0.1);
   border-color: rgba(59, 130, 246, 0.3);
   color: #2563eb;
-}
+}
+/* ==========================================================================
+   STARLIGHT BRANDED COMPONENTS 
+   (Migrated from email-client.css)
+   ========================================================================== */
+
+/* User / Avatar Components */
+user-cell { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; }
+user-avatar { 
+    width: 2.5rem; height: 2.5rem; border-radius: 50%; 
+    background: var(--q-color-border-strong, #1e293b); color: #f1f5f9;
+    display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; 
+}
+user-avatar.sm { width: 2.25rem; height: 2.25rem; font-size: 0.875rem; }
+user-avatar.lg { width: 3rem; height: 3rem; font-size: 1.125rem; }
+html[data-theme="light"] user-avatar { background: #e2e8f0; color: #64748b; }
+
+user-info { display: flex; flex-direction: column; min-width: 0; }
+user-name { font-size: 0.875rem; font-weight: 600; }
+user-email { font-size: 0.75rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+html[data-theme="light"] user-name { color: #0f172a; }
+
+/* Branded Labels */
+email-label { padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 600; }
+email-label.work { background: rgba(59, 130, 246, 0.1); color: #60a5fa; }
+email-label.personal { background: rgba(34, 197, 94, 0.1); color: #4ade80; }
+email-label.important { background: rgba(239, 68, 68, 0.1); color: #f87171; }
+
+/* Branded Attachment Cards */
+attachment-card {
+    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.05); cursor: pointer; transition: background 0.2s ease; min-width: 240px;
+}
+attachment-card:hover { background: rgba(255, 255, 255, 0.1); }
+html[data-theme="light"] attachment-card { background: #ffffff; border: 1px solid #e2e8f0; }
+
+file-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; }
+file-icon.pdf { background-color: rgba(239, 68, 68, 0.2); color: #f87171; }
+file-icon.excel { background-color: rgba(34, 197, 94, 0.2); color: #4ade80; }
+
+file-info { display: flex; flex-direction: column; }
+file-name { font-size: 0.875rem; font-weight: 500; }
+file-size { font-size: 0.75rem; color: #64748b; }
+
+/* ============================================================================
+   CSS-ONLY HORIZONTAL NAVIGATION
+   Glassmorphic header with dropdown and mobile drawer
+   ============================================================================ */
+
+/* Mobile toggle checkbox - hidden but functional */
+.nav-toggle { display: none; }
+
+/* Nav Header */
+.nav-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  padding: 0 2rem;
+  gap: 2rem;
+  background: rgba(15, 23, 42, 0.8);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+html[data-theme="light"] .nav-header {
+  background: rgba(255, 255, 255, 0.9);
+  border-bottom-color: rgba(0, 0, 0, 0.08);
+}
+
+/* Brand */
+.nav-brand {
+  font-size: 1.5rem;
+  font-weight: 800;
+  text-decoration: none;
+  letter-spacing: -.03em;
+  color: var(--q-text-primary, #f1f5f9);
+}
+
+/* Logo */
+.nav-logo {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: .6rem;
+  text-decoration: none;
+  font-weight: 700;
+  font-size: 1.1rem;
+  letter-spacing: -.02em;
+  color: var(--q-text-primary, #f1f5f9);
+}
+
+html[data-theme="light"] .nav-logo {
+  color: var(--q-light-text, #1e293b);
+}
+
+/* Starlight logo mark - circular gradient icon */
+.nav-logo-mark,
+.nav-logo > i {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.nav-logo-mark {
+  background: linear-gradient(135deg, var(--q-color-starlight-peach), var(--q-color-starlight-blue));
+}
+
+.nav-logo > i {
+  background: linear-gradient(135deg, var(--q-color-starlight-peach), var(--q-color-starlight-blue));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+html[data-theme="light"] .nav-logo > i {
+  background: linear-gradient(135deg, var(--q-color-starlight-blue), var(--q-color-starlight-peach));
+}
+
+html[data-theme="light"] .nav-logo-mark {
+  background: linear-gradient(135deg, var(--q-color-starlight-blue), var(--q-color-starlight-peach));
+}
+
+html[data-theme="light"] .nav-logo > i {
+  background: linear-gradient(135deg, var(--q-color-starlight-blue), var(--q-color-starlight-peach));
+}
+
+/* Desktop nav links */
+.nav-links {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: .25rem;
+}
+
+.nav-links > a,
+.nav-dropdown summary {
+  display: flex;
+  align-items: center;
+  gap: .35rem;
+  padding: .45rem .85rem;
+  border-radius: .625rem;
+  font-size: .875rem;
+  font-weight: 600;
+  letter-spacing: .01em;
+  color: var(--q-text-secondary, rgba(255,255,255,0.6));
+  text-decoration: none;
+  cursor: pointer;
+  transition: color .15s, background .15s;
+  white-space: nowrap;
+  list-style: none;
+  user-select: none;
+}
+
+.nav-links > a:hover,
+.nav-dropdown summary:hover {
+  color: var(--q-text-primary, #f1f5f9);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+html[data-theme="light"] .nav-links > a:hover,
+html[data-theme="light"] .nav-dropdown summary:hover {
+  color: var(--q-light-text, #1e293b);
+  background: rgba(0, 0, 0, 0.05);
+}
+
+html[data-theme="light"] .nav-links > a,
+html[data-theme="light"] .nav-dropdown summary {
+  color: var(--q-text-muted, #64748b);
+}
+
+html[data-theme="light"] .nav-links > a:hover,
+html[data-theme="light"] .nav-dropdown summary:hover {
+  color: var(--q-light-text, #1e293b);
+  background: rgba(0, 0, 0, 0.05);
+}
+
+/* Dropdown chevron */
+.nav-dropdown summary::after {
+  content: '';
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5l4 4 4-4' stroke='%23676a7c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
+  transition: transform .2s;
+  flex-shrink: 0;
+}
+
+.nav-dropdown[open] > summary::after {
+  transform: rotate(180deg);
+}
+
+.nav-dropdown[open] > summary {
+  color: var(--q-text-primary, #f1f5f9);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+html[data-theme="light"] .nav-dropdown[open] > summary {
+  color: var(--q-light-text, #1e293b);
+}
+
+/* Hide native marker */
+.nav-dropdown summary::-webkit-details-marker,
+.nav-dropdown summary::marker { display: none; }
+
+/* Dropdown container */
+.nav-dropdown {
+  position: relative;
+}
+
+/* Dropdown panel */
+.nav-dropdown-panel {
+  position: absolute;
+  top: calc(100% + .5rem);
+  left: 0;
+  min-width: 180px;
+  isolation: isolate;
+  background-color: rgb(15,15,25);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: .625rem;
+  padding: .4rem;
+  display: flex;
+  flex-direction: column;
+  gap: .15rem;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
+  animation: dropIn .18s ease;
+  z-index: 50;
+}
+
+html[data-theme="light"] .nav-dropdown-panel {
+  background: rgba(255, 255, 255, 0.98);
+  border-color: rgba(0, 0, 0, 0.08);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+@keyframes dropIn {
+  from { opacity: 0; transform: translateY(-6px) scale(.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.nav-dropdown-panel a {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  padding: .5rem .75rem;
+  border-radius: 7px;
+  font-size: .85rem;
+  font-weight: 500;
+  color: var(--q-text-secondary, rgba(255,255,255,0.6));
+  text-decoration: none;
+  transition: color .12s, background .12s;
+}
+
+html[data-theme="light"] .nav-dropdown-panel a {
+  color: var(--q-text-muted, #64748b);
+}
+
+.nav-dropdown-panel a:hover {
+  color: var(--q-text-primary, #f1f5f9);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+html[data-theme="light"] .nav-dropdown-panel a:hover {
+  color: var(--q-light-text, #1e293b);
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.nav-dropdown-panel a::before {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  flex-shrink: 0;
+  transition: background .12s;
+}
+
+html[data-theme="light"] .nav-dropdown-panel a::before {
+  background: rgba(0, 0, 0, 0.15);
+}
+
+.nav-dropdown-panel a:hover::before {
+  background: var(--q-color-starlight-blue);
+}
+
+/* Profile avatar */
+.nav-profile {
+  flex-shrink: 0;
+  margin-left: auto;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, var(--q-color-starlight-blue), var(--q-color-starlight-peach));
+  text-decoration: none;
+  font-weight: 700;
+  font-size: .8rem;
+  color: var(--q-color-starlight-deep, #0f172a);
+}
+
+html[data-theme="light"] .nav-profile {
+  background: linear-gradient(135deg, var(--q-color-starlight-peach), var(--q-color-starlight-blue));
+  color: var(--q-light-text, #1e293b);
+}
+
+/* Hamburger button */
+.nav-hamburger {
+  display: none;
+  cursor: pointer;
+  width: 38px;
+  height: 38px;
+  border-radius: .625rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background-color: hsla(0,0%,100%,.05);
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+html[data-theme="light"] .nav-hamburger {
+  background: rgba(255, 255, 255, 0.9);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+.nav-hamburger:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+html[data-theme="light"] .nav-hamburger:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+/* Hamburger icon */
+.nav-hamburger-icon {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.nav-hamburger-icon span {
+  display: block;
+  width: 18px;
+  height: 1.5px;
+  background: var(--q-text-muted, rgba(255,255,255,0.5));
+  border-radius: 2px;
+  transition: transform .2s, opacity .2s, background .15s;
+}
+
+html[data-theme="light"] .nav-hamburger-icon span {
+  background: var(--q-text-muted, #64748b);
+}
+
+.nav-hamburger:hover .nav-hamburger-icon span {
+  background: var(--q-text-primary, #f1f5f9);
+}
+
+html[data-theme="light"] .nav-hamburger:hover .nav-hamburger-icon span {
+  background: var(--q-light-text, #1e293b);
+}
+
+/* Animate hamburger to X when checked */
+.nav-toggle:checked ~ .nav-header .nav-hamburger-icon span:nth-child(1) {
+  transform: translateY(5.5px) rotate(45deg);
+}
+
+.nav-toggle:checked ~ .nav-header .nav-hamburger-icon span:nth-child(2) {
+  opacity: 0;
+}
+
+.nav-toggle:checked ~ .nav-header .nav-hamburger-icon span:nth-child(3) {
+  transform: translateY(-5.5px) rotate(-45deg);
+}
+
+/* Mobile drawer */
+.nav-drawer {
+  display: none;
+  position: sticky;
+  top: 64px;
+  z-index: 99;
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height .3s ease;
+  background-color: hsla(0,0%,100%,.05);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+html[data-theme="light"] .nav-drawer {
+  background: rgba(255, 255, 255, 0.98);
+  border-bottom-color: rgba(0, 0, 0, 0.08);
+}
+
+.nav-toggle:checked ~ .nav-drawer {
+  max-height: 400px;
+}
+
+.nav-drawer-inner {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: .25rem;
+}
+
+.nav-drawer-inner a {
+  display: block;
+  padding: .65rem .85rem;
+  border-radius: .625rem;
+  font-size: .9rem;
+  font-weight: 600;
+  color: var(--q-text-secondary, rgba(255,255,255,0.6));
+  text-decoration: none;
+  transition: color .12s, background .12s;
+}
+
+html[data-theme="light"] .nav-drawer-inner a {
+  color: var(--q-text-muted, #64748b);
+}
+
+.nav-drawer-inner a:hover {
+  color: var(--q-text-primary, #f1f5f9);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+html[data-theme="light"] .nav-drawer-inner a:hover {
+  color: var(--q-light-text, #1e293b);
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.nav-drawer-section-label {
+  font-size: .7rem;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+  color: var(--q-text-muted, rgba(255,255,255,0.4));
+  padding: .4rem .85rem .2rem;
+}
+
+/* Mobile responsive */
+@media (max-width: 640px) {
+  .nav-header .nav-links,
+  .nav-header .nav-profile {
+    display: none;
+  }
+
+  .nav-hamburger {
+    display: flex;
+    margin-left: 0;
+  }
+
+  .nav-drawer {
+    display: block;
+  }
+
+  .nav-header {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .nav-logo,
+  .nav-brand {
+    order: 2;
+  }
+
+  .nav-hamburger {
+    order: 1;
+  }
+
+  .theme-toggle,
+  .nav-header > .flex.items-center {
+    order: 3;
+    margin-left: auto;
+  }
+
+  .nav-header > .flex.items-center {
+    flex-direction: row !important;
+  }
+  
+  .nav-header > .flex.items-center .theme-toggle {
+    order: 1;
+  }
+  
+  .nav-header > .flex.items-center > .btn-starlight {
+    order: 2;
+  }
+}