/* ============================================================
   RevShare — Custom Styles
   Complements Tailwind CSS with custom utilities, animations, 
   and component-specific styles.
   ============================================================ */

/* ============================================================
   1. BASE & RESET
   ============================================================ */

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Global font override */
*,
*::before,
*::after {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Safe area padding for notched phones (iPhone X+) */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.pt-safe {
  padding-top: env(safe-area-inset-top, 0);
}

.px-safe {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* ============================================================
   2. CUSTOM SCROLLBAR
   ============================================================ */

/* Webkit scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 3px;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #f1f5f9;
}

/* ============================================================
   3. LAYOUT COMPONENTS
   ============================================================ */

/* Bottom navigation bar */
.bottom-nav {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.5rem);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid rgba(226, 232, 240, 0.8);
}

.bottom-nav-item {
  transition: all 0.2s ease;
  position: relative;
}

.bottom-nav-item.active {
  color: #3B82F6;
}

.bottom-nav-item.active::before {
  content: '';
  position: absolute;
  top: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: #3B82F6;
  border-radius: 0 0 3px 3px;
}

/* Sidebar */
.sidebar {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-link {
  transition: all 0.15s ease;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.sidebar-link:hover {
  background: rgba(59, 130, 246, 0.08);
  color: #3B82F6;
}

.sidebar-link.active {
  background: rgba(59, 130, 246, 0.12);
  color: #3B82F6;
  font-weight: 600;
}

.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #3B82F6;
  border-radius: 0 3px 3px 0;
}

/* Sidebar overlay (mobile) */
.sidebar-overlay {
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.3s ease;
}

/* ============================================================
   4. CARD COMPONENTS
   ============================================================ */

/* Base card hover effect */
.card-hover {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
              0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

.card-hover:active {
  transform: translateY(0);
}

/* KPI card gradient borders */
.kpi-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06),
              0 1px 2px rgba(0, 0, 0, 0.04);
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.kpi-card.blue::before {
  background: linear-gradient(90deg, #3B82F6, #60A5FA);
}

.kpi-card.green::before {
  background: linear-gradient(90deg, #10B981, #34D399);
}

.kpi-card.orange::before {
  background: linear-gradient(90deg, #F59E0B, #FBBF24);
}

.kpi-card.purple::before {
  background: linear-gradient(90deg, #6366F1, #818CF8);
}

.kpi-card.red::before {
  background: linear-gradient(90deg, #EF4444, #F87171);
}

.kpi-card.teal::before {
  background: linear-gradient(90deg, #14B8A6, #2DD4BF);
}

.kpi-card.pink::before {
  background: linear-gradient(90deg, #EC4899, #F472B6);
}

/* KPI value animation */
.kpi-value {
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}

/* Mobile table card style */
.mobile-card {
  border-left: 4px solid #3B82F6;
  border-radius: 12px;
  background: white;
  padding: 1rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}

.mobile-card:active {
  transform: scale(0.98);
}

.mobile-card.green {
  border-left-color: #10B981;
}

.mobile-card.orange {
  border-left-color: #F59E0B;
}

.mobile-card.red {
  border-left-color: #EF4444;
}

.mobile-card.purple {
  border-left-color: #6366F1;
}

/* ============================================================
   5. PROGRESS BARS
   ============================================================ */

.progress-bar {
  height: 6px;
  border-radius: 3px;
  background: #E2E8F0;
  overflow: hidden;
  position: relative;
}

.progress-bar .fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.progress-bar .fill.blue {
  background: linear-gradient(90deg, #3B82F6, #60A5FA);
}

.progress-bar .fill.green {
  background: linear-gradient(90deg, #10B981, #34D399);
}

.progress-bar .fill.orange {
  background: linear-gradient(90deg, #F59E0B, #FBBF24);
}

.progress-bar .fill.red {
  background: linear-gradient(90deg, #EF4444, #F87171);
}

.progress-bar .fill.purple {
  background: linear-gradient(90deg, #6366F1, #818CF8);
}

/* Animated shimmer on progress fill */
.progress-bar .fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: progressShimmer 2s infinite;
}

@keyframes progressShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ============================================================
   6. ANIMATIONS
   ============================================================ */

/* Pulse animation for notification badges */
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
}

.pulse-dot {
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Subtle breathing animation */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.breathe {
  animation: breathe 3s ease-in-out infinite;
}

/* Fade in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

/* Staggered fade in for lists */
.stagger-in > * {
  opacity: 0;
  animation: fadeIn 0.3s ease-out forwards;
}

.stagger-in > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-in > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-in > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-in > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-in > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-in > *:nth-child(6) { animation-delay: 0.3s; }
.stagger-in > *:nth-child(7) { animation-delay: 0.35s; }
.stagger-in > *:nth-child(8) { animation-delay: 0.4s; }

/* Slide in from right */
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.slide-in-right {
  animation: slideInRight 0.3s ease-out forwards;
}

/* Slide in from left */
@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.slide-in-left {
  animation: slideInLeft 0.3s ease-out forwards;
}

/* Scale in */
@keyframes scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.scale-in {
  animation: scaleIn 0.2s ease-out forwards;
}

/* Spin animation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 1s linear infinite;
}

/* Counter animation (for numbers) */
@keyframes countUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.count-up {
  animation: countUp 0.5s ease-out forwards;
}

/* ============================================================
   7. TOAST NOTIFICATIONS
   ============================================================ */

.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 320px;
  max-width: 420px;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: white;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12),
              0 2px 6px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: toastSlideIn 0.3s ease-out, toastFadeOut 0.3s ease-in 3.7s forwards;
  border-left: 4px solid #3B82F6;
}

.toast.success {
  border-left-color: #10B981;
}

.toast.error {
  border-left-color: #EF4444;
}

.toast.warning {
  border-left-color: #F59E0B;
}

.toast.info {
  border-left-color: #3B82F6;
}

@keyframes toastSlideIn {
  from {
    transform: translateX(100%) translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
}

@keyframes toastFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-20px); }
}

/* Flash message (page top banner style) */
.flash-message {
  animation: flashSlideIn 0.3s ease-out;
  transition: all 0.3s ease;
}

@keyframes flashSlideIn {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ============================================================
   8. FLOATING ACTION BUTTON (FAB)
   ============================================================ */

.fab {
  position: fixed;
  bottom: 5rem;
  right: 1rem;
  z-index: 40;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  font-size: 1.5rem;
}

.fab:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.5);
}

.fab:active {
  transform: translateY(0) scale(0.98);
}

@media (min-width: 1024px) {
  .fab {
    bottom: 2rem;
    right: 2rem;
  }
}

/* FAB speed dial (expandable actions) */
.fab-menu {
  position: fixed;
  bottom: 8rem;
  right: 1rem;
  z-index: 39;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
}

.fab-menu.open {
  opacity: 1;
  pointer-events: auto;
}

.fab-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
  color: #1E293B;
  font-size: 0.875rem;
  font-weight: 500;
}

.fab-menu-item:hover {
  transform: translateX(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

@media (min-width: 1024px) {
  .fab-menu {
    bottom: 5.5rem;
    right: 2rem;
  }
}

/* ============================================================
   9. PWA INSTALL BANNER
   ============================================================ */

.pwa-install-banner {
  background: linear-gradient(135deg, #3B82F6, #6366F1);
  color: white;
  padding: 12px 16px;
  border-radius: 16px;
  margin: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
  gap: 1rem;
  animation: fadeIn 0.5s ease-out;
}

.pwa-install-banner .btn-install {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 8px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

.pwa-install-banner .btn-install:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.02);
}

.pwa-install-banner .btn-dismiss {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 1.25rem;
  padding: 4px;
  line-height: 1;
  transition: color 0.2s ease;
}

.pwa-install-banner .btn-dismiss:hover {
  color: white;
}

/* ============================================================
   10. LOADING STATES
   ============================================================ */

/* Skeleton loading shimmer */
.skeleton {
  background: linear-gradient(
    90deg,
    #f1f5f9 25%,
    #e2e8f0 50%,
    #f1f5f9 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 1rem;
  margin-bottom: 0.5rem;
  border-radius: 4px;
}

.skeleton-text.short {
  width: 60%;
}

.skeleton-text.medium {
  width: 80%;
}

.skeleton-circle {
  border-radius: 50%;
}

/* Full-page loading spinner */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(248, 250, 252, 0.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #E2E8F0;
  border-top-color: #3B82F6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Inline spinner */
.spinner-sm {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}

/* ============================================================
   11. FORM ENHANCEMENTS
   ============================================================ */

/* Custom focus ring */
.input-focus:focus {
  outline: none;
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  transition: all 0.15s ease;
}

/* Floating label effect */
.floating-label-group {
  position: relative;
}

.floating-label-group input,
.floating-label-group select,
.floating-label-group textarea {
  padding-top: 1.25rem;
}

.floating-label-group label {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  font-size: 0.875rem;
  color: #94A3B8;
  pointer-events: none;
  transition: all 0.2s ease;
}

.floating-label-group input:focus ~ label,
.floating-label-group input:not(:placeholder-shown) ~ label,
.floating-label-group select:focus ~ label,
.floating-label-group textarea:focus ~ label {
  top: 0.5rem;
  transform: translateY(0);
  font-size: 0.7rem;
  color: #3B82F6;
  font-weight: 500;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #CBD5E1;
  border-radius: 24px;
  transition: all 0.3s ease;
}

.toggle-switch .slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.toggle-switch input:checked + .slider {
  background: #3B82F6;
}

.toggle-switch input:checked + .slider::before {
  transform: translateX(20px);
}

/* ============================================================
   12. TABLE ENHANCEMENTS
   ============================================================ */

/* Striped table rows */
.table-striped tbody tr:nth-child(even) {
  background: #F8FAFC;
}

/* Hoverable rows */
.table-hover tbody tr {
  transition: background 0.15s ease;
}

.table-hover tbody tr:hover {
  background: #F1F5F9;
}

/* Sticky table header */
.table-sticky thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
  box-shadow: 0 1px 0 #E2E8F0;
}

/* Responsive table wrapper */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}

/* ============================================================
   13. BADGE & TAG STYLES
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.badge-blue {
  background: #DBEAFE;
  color: #1D4ED8;
}

.badge-green {
  background: #D1FAE5;
  color: #065F46;
}

.badge-orange {
  background: #FEF3C7;
  color: #92400E;
}

.badge-red {
  background: #FEE2E2;
  color: #991B1B;
}

.badge-purple {
  background: #EDE9FE;
  color: #5B21B6;
}

.badge-gray {
  background: #F1F5F9;
  color: #475569;
}

/* ============================================================
   14. CHART CONTAINER
   ============================================================ */

.chart-container {
  position: relative;
  width: 100%;
  padding: 1rem;
}

.chart-container canvas {
  max-width: 100%;
}

/* ============================================================
   15. EMPTY STATE
   ============================================================ */

.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  color: #94A3B8;
}

.empty-state .icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.5rem;
}

.empty-state p {
  font-size: 0.875rem;
  max-width: 320px;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}

/* ============================================================
   16. MODAL & DIALOG
   ============================================================ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 50;
  animation: fadeIn 0.2s ease-out;
}

.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 51;
  background: white;
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  animation: scaleIn 0.2s ease-out;
}

/* ============================================================
   17. OFFLINE INDICATOR
   ============================================================ */

.offline-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, #EF4444, #DC2626);
  color: white;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  z-index: 9999;
  animation: flashSlideIn 0.3s ease-out;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

/* Online restored banner */
.online-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, #10B981, #059669);
  color: white;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  z-index: 9999;
  animation: flashSlideIn 0.3s ease-out, toastFadeOut 0.3s ease-in 2.7s forwards;
}

/* ============================================================
   18. AVATAR
   ============================================================ */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  flex-shrink: 0;
}

.avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
}

.avatar-md {
  width: 40px;
  height: 40px;
  font-size: 0.875rem;
}

.avatar-lg {
  width: 56px;
  height: 56px;
  font-size: 1.25rem;
}

/* ============================================================
   19. STAT TREND ARROWS
   ============================================================ */

.trend-up {
  color: #10B981;
}

.trend-down {
  color: #EF4444;
}

.trend-neutral {
  color: #94A3B8;
}

/* ============================================================
   20. PRINT STYLES
   ============================================================ */

@media print {
  .no-print,
  .bottom-nav,
  .sidebar,
  .sidebar-overlay,
  header,
  .fab,
  .fab-menu,
  .pwa-install-banner,
  .toast-container,
  .loading-overlay,
  .offline-indicator,
  .online-indicator,
  .modal-backdrop {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
    font-size: 12pt !important;
  }

  .print-break {
    page-break-before: always;
  }

  .print-no-break {
    page-break-inside: avoid;
  }

  /* Ensure all text is black for printing */
  * {
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666 !important;
  }

  .kpi-card::before {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  table {
    border-collapse: collapse !important;
  }

  table td,
  table th {
    border: 1px solid #ddd !important;
    padding: 8px !important;
  }
}

/* ============================================================
   21. RESPONSIVE UTILITIES
   ============================================================ */

/* Hide on mobile, show on desktop */
@media (max-width: 1023px) {
  .desktop-only {
    display: none !important;
  }
}

/* Hide on desktop, show on mobile */
@media (min-width: 1024px) {
  .mobile-only {
    display: none !important;
  }
}

/* ============================================================
   22. DARK MODE SUPPORT (Future)
   ============================================================ */

@media (prefers-color-scheme: dark) {
  /* Ready for dark mode when implemented */
  :root {
    --bg-primary: #0F172A;
    --bg-secondary: #1E293B;
    --bg-card: #1E293B;
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --border-color: #334155;
  }
}

/* ============================================================
   23. MISC UTILITIES
   ============================================================ */

/* Truncate text with ellipsis */
.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Glass morphism effect */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #3B82F6, #6366F1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Number font (tabular for aligned numbers) */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' on;
}

/* Currency display */
.currency {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Subtle border */
.border-subtle {
  border-color: rgba(226, 232, 240, 0.8);
}

/* Focus visible for keyboard navigation */
:focus-visible {
  outline: 2px solid #3B82F6;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Selection color */
::selection {
  background: rgba(59, 130, 246, 0.2);
  color: #1E293B;
}

/* Disable touch callout on interactive elements (iOS) */
.no-callout {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}