@import url(https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap);
/* ===== PREMIUM SOFT WARM GRADIENT BACKGROUND ===== */
.premium-background {
  background: linear-gradient(135deg, #FAF8F5 0%, #F5F1E8 25%, #F0EBE0 50%, #E8E4DA 75%, #FAF8F5 100%);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  min-height: 100vh;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== PREMIUM GLASSMORPHISM CARDS ===== */
.premium-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  box-shadow:
    0 4px 24px -1px rgba(0, 0, 0, 0.05),
    0 8px 16px -4px rgba(0, 0, 0, 0.03),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 8px 32px -2px rgba(0, 0, 0, 0.08),
    0 12px 24px -6px rgba(0, 0, 0, 0.05),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

/* ===== SOFT SHADOWS ===== */
.soft-shadow-sm {
  box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.04), 0 1px 6px -1px rgba(0, 0, 0, 0.02);
}

.soft-shadow-md {
  box-shadow: 0 4px 20px -3px rgba(0, 0, 0, 0.06), 0 2px 10px -2px rgba(0, 0, 0, 0.04);
}

.soft-shadow-lg {
  box-shadow: 0 8px 28px -4px rgba(0, 0, 0, 0.08), 0 4px 14px -3px rgba(0, 0, 0, 0.06);
}

.soft-shadow-xl {
  box-shadow: 0 12px 36px -6px rgba(0, 0, 0, 0.10), 0 6px 18px -4px rgba(0, 0, 0, 0.08);
}

/* ===== PREMIUM GRADIENT CARDS ===== */
.premium-gradient-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow:
    0 4px 24px -2px rgba(0, 0, 0, 0.08),
    0 8px 16px -4px rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-gradient-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
  transform: skewX(-20deg);
  opacity: 0.5;
}

.premium-gradient-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 12px 40px -4px rgba(0, 0, 0, 0.12),
    0 16px 24px -6px rgba(0, 0, 0, 0.08);
}

/* ===== PREMIUM TYPGRAPHY ===== */
.premium-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.premium-subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  letter-spacing: -0.01em;
}

.premium-number {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-feature-settings: 'tnum' on, 'lnum' on;
  letter-spacing: -0.03em;
}

.premium-label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===== PREMIUM STATS CARDS ===== */
.premium-stat-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 20px -3px rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.1);
}

/* ===== PREMIUM BUTTONS ===== */
.premium-btn-primary {
  background: linear-gradient(135deg, #10b77f 0%, #0a8f63 100%);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 4px 16px -3px rgba(16, 183, 127, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px -4px rgba(16, 183, 127, 0.4);
}

.premium-btn-outline {
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  color: #0a8f63;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-btn-outline:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(16, 183, 127, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px -3px rgba(0, 0, 0, 0.08);
}

/* ===== PREMIUM ICONS ===== */
.premium-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.premium-icon-container:hover {
  transform: scale(1.05);
}

/* ===== TREND INDICATORS ===== */
.trend-positive {
  color: #10B981;
  background: rgba(16, 185, 129, 0.1);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.trend-negative {
  color: #EF4444;
  background: rgba(239, 68, 68, 0.1);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* ===== PREMIUM PANELS ===== */
.premium-panel {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 2px 16px -2px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.premium-panel:hover {
  box-shadow: 0 4px 24px -3px rgba(0, 0, 0, 0.08);
}

/* ===== SOFT GRADIENT OVERLAYS ===== */
.soft-gradient-overlay {
  position: relative;
}

.soft-gradient-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(250, 248, 245, 0.5) 0%, rgba(245, 241, 232, 0.5) 100%);
  pointer-events: none;
}

/* ===== PREMIUM ANIMATIONS ===== */
.premium-fade-in {
  animation: premiumFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

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

.premium-slide-up {
  animation: premiumSlideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
  transform: translateY(30px);
}

@keyframes premiumSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== RESPONSIVE PREMIUM STYLES ===== */
@media (max-width: 768px) {
  .premium-card {
    border-radius: 16px;
    padding: 1rem;
  }

  .premium-stat-card {
    padding: 1.25rem;
    border-radius: 14px;
  }

  .premium-btn-primary,
  .premium-btn-outline {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
  }

  .premium-icon-container {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
}

@media (max-width: 480px) {
  .premium-card {
    border-radius: 14px;
    padding: 0.875rem;
  }

  .premium-stat-card {
    padding: 1rem;
    border-radius: 12px;
  }
}

/* ===== PREMIUM DIVIDERS ===== */
.premium-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.08) 20%,
    rgba(0, 0, 0, 0.08) 80%,
    transparent 100%
  );
}

/* ===== PREMIUM BADGES ===== */
.premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.premium-badge-success {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.premium-badge-warning {
  background: rgba(245, 158, 11, 0.12);
  color: #D97706;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.premium-badge-danger {
  background: rgba(239, 68, 68, 0.12);
  color: #DC2626;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.premium-badge-info {
  background: rgba(59, 130, 246, 0.12);
  color: #2563EB;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

/* ===== PREMIUM PROGRESS BAR ===== */
.premium-progress {
  height: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.premium-progress-bar {
  height: 100%;
  border-radius: 10px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(90deg, #10b77f 0%, #14d992 100%);
  box-shadow: 0 2px 8px -2px rgba(16, 183, 127, 0.4);
}

/* ===== PREMIUM LOADING STATE ===== */
.premium-skeleton {
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.08) 50%,
    rgba(0, 0, 0, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: premiumSkeleton 1.5s ease-in-out infinite;
  border-radius: 8px;
}

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

/**
 * Theme Transition Styles
 * 
 * Provides smooth transitions between light and dark modes.
 * Include this file after your main CSS for smooth theme switching.
 */

/* ==========================================================================
   FOUC Prevention (Flash of Unstyled Content)
   ========================================================================== */

/* Hide content until theme is ready */
html {
  visibility: hidden;
}

/* Show content once theme is loaded */
html.theme-loaded {
  visibility: visible;
}

/* Prevent transitions during initial load */
html:not(.theme-loaded) *,
html:not(.theme-loaded) *::before,
html:not(.theme-loaded) *::after {
  transition: none !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}

/* ==========================================================================
   Smooth Theme Transitions
   ========================================================================== */

/* Enable smooth transitions for theme changes */
html.theme-transitions-enabled,
html.theme-transitions-enabled * {
  transition-property: background-color, border-color, color, fill, stroke, 
                       opacity, box-shadow, transform;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
}

/* Specific elements that should transition smoothly */
html.theme-transitions-enabled body {
  transition: background-color 300ms ease, color 300ms ease;
}

html.theme-transitions-enabled .card,
html.theme-transitions-enabled [class*="card-"],
html.theme-transitions-enabled .bg-card {
  transition: background-color 250ms ease, border-color 250ms ease, 
              box-shadow 250ms ease;
}

html.theme-transitions-enabled button,
html.theme-transitions-enabled [role="button"],
html.theme-transitions-enabled .btn {
  transition: background-color 200ms ease, color 200ms ease, 
              border-color 200ms ease, transform 150ms ease;
}

html.theme-transitions-enabled input,
html.theme-transitions-enabled textarea,
html.theme-transitions-enabled select {
  transition: background-color 200ms ease, border-color 200ms ease, 
              color 200ms ease, box-shadow 200ms ease;
}

/* ==========================================================================
   Disable Transitions for Motion-Sensitive Elements
   ========================================================================== */

/* Never transition these elements during theme changes */
.no-theme-transition,
.no-theme-transition *,
.animate-spin,
.animate-pulse,
.animate-bounce,
.animate-ping,
.animate-pulse-glow,
.animate-shimmer,
.skeleton,
.skeleton-text,
.skeleton-circle,
[data-loading="true"],
[data-loading="true"] * {
  transition: none !important;
}

/* Keep animation for spinner elements */
.animate-spin {
  animation: spin 1s linear infinite !important;
}

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

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html.theme-transitions-enabled,
  html.theme-transitions-enabled * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   Meta Theme Color Updates
   ========================================================================== */

/* The meta theme-color is updated via JavaScript, but we can provide
   a fallback for browsers that support it in CSS */

/* Note: meta theme-color can't be set via CSS, this is just documentation */
/* Use JavaScript to update: 
   document.querySelector('meta[name="theme-color"]').content = '#0f172a';
*/

/* ==========================================================================
   Theme Toggle Animation
   ========================================================================== */

.theme-toggle-icon {
  transition: transform 300ms ease, opacity 300ms ease;
}

.theme-toggle:hover .theme-toggle-icon {
  transform: rotate(15deg) scale(1.1);
}

.theme-toggle:active .theme-toggle-icon {
  transform: rotate(30deg) scale(0.95);
}

/* Sun icon animation */
.sun-icon {
  transform-origin: center;
}

.dark .sun-icon {
  transform: rotate(90deg) scale(0);
  opacity: 0;
}

/* Moon icon animation */
.moon-icon {
  transform-origin: center;
  transform: rotate(-90deg) scale(0);
  opacity: 0;
  position: absolute;
}

.dark .moon-icon {
  transform: rotate(0) scale(1);
  opacity: 1;
  position: relative;
}

/* ==========================================================================
   Glassmorphism Dark Mode Transitions
   ========================================================================== */

.glassmorphism,
.glassmorphism-enhanced,
.glassmorphism-dark,
.glassmorphism-mobile,
.nav-glassmorphism,
.card-glassmorphism,
.glassmorphism-float {
  transition: background-color 300ms ease, 
              border-color 300ms ease,
              box-shadow 300ms ease, 
              -webkit-backdrop-filter 300ms ease;
  transition: background-color 300ms ease, 
              backdrop-filter 300ms ease,
              border-color 300ms ease,
              box-shadow 300ms ease;
  transition: background-color 300ms ease, 
              backdrop-filter 300ms ease,
              border-color 300ms ease,
              box-shadow 300ms ease, 
              -webkit-backdrop-filter 300ms ease;
}

/* ==========================================================================
   Image Transition Handling
   ========================================================================== */

/* Smooth opacity transition for theme-aware images */
.theme-aware-image {
  transition: opacity 300ms ease, filter 300ms ease;
}

/* Dark mode image adjustments */
.dark .theme-aware-image:not(.no-dark-adjust) {
  opacity: 0.9;
}

.dark .theme-aware-image.hero-image {
  filter: brightness(0.85) contrast(1.05);
}

/* ==========================================================================
   Chart & Data Visualization Transitions
   ========================================================================== */

.chart-container,
[data-chart] {
  transition: background-color 300ms ease;
}

.chart-container svg,
[data-chart] svg {
  transition: background-color 300ms ease;
}

/* ==========================================================================
   Modal & Overlay Transitions
   ========================================================================== */

.modal-overlay,
.dialog-overlay,
[role="dialog"]::backdrop {
  transition: background-color 300ms ease, opacity 300ms ease;
}

.dark .modal-overlay,
.dark .dialog-overlay {
  background-color: hsl(0 0% 0% / 0.7);
}

/* ==========================================================================
   Scrollbar Theme Transitions
   ========================================================================== */

::-webkit-scrollbar {
  -webkit-transition: background-color 200ms ease, width 200ms ease;
  transition: background-color 200ms ease, width 200ms ease;
}

::-webkit-scrollbar-track {
  -webkit-transition: background-color 200ms ease;
  transition: background-color 200ms ease;
}

::-webkit-scrollbar-thumb {
  -webkit-transition: background-color 200ms ease, border-color 200ms ease;
  transition: background-color 200ms ease, border-color 200ms ease;
}

/* Firefox */
* {
  scrollbar-color: hsl(var(--border)) hsl(var(--background));
  transition: scrollbar-color 200ms ease;
}

/**
 * Print Styles for Dark Mode
 * 
 * Ensures documents print correctly even when dark mode is active.
 * Include this file for proper print handling.
 */

@media print {
  /* ==========================================================================
     Force Light Mode Colors for Printing
     ========================================================================== */
  
  html.dark,
  html.dark body {
    background: white !important;
    color: black !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  /* ==========================================================================
     Reset All Backgrounds and Colors
     ========================================================================== */
  
  html.dark *,
  html.dark *::before,
  html.dark *::after {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: inherit !important;
    border-color: #ccc !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  /* ==========================================================================
     Typography
     ========================================================================== */
  
  html.dark body {
    font-size: 12pt;
    line-height: 1.5;
  }
  
  html.dark h1,
  html.dark h2,
  html.dark h3,
  html.dark h4,
  html.dark h5,
  html.dark h6 {
    color: black !important;
    margin-top: 1em;
    margin-bottom: 0.5em;
    page-break-after: avoid;
  }
  
  html.dark h1 { font-size: 24pt; }
  html.dark h2 { font-size: 20pt; }
  html.dark h3 { font-size: 16pt; }
  html.dark h4 { font-size: 14pt; }
  
  html.dark p,
  html.dark span,
  html.dark div,
  html.dark li,
  html.dark td,
  html.dark th {
    color: black !important;
    orphans: 3;
    widows: 3;
  }
  
  /* ==========================================================================
     Links
     ========================================================================== */
  
  html.dark a {
    color: #0066cc !important;
    text-decoration: underline;
  }
  
  html.dark a:visited {
    color: #660099 !important;
  }
  
  html.dark a[href]::after {
    content: " (" attr(href) ")";
    font-size: 90%;
    color: #666;
  }
  
  /* Don't show URL for internal links */
  html.dark a[href^="#"]::after,
  html.dark a[href^="javascript:"]::after {
    content: "";
  }
  
  /* ==========================================================================
     Tables
     ========================================================================== */
  
  html.dark table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
  }
  
  html.dark table,
  html.dark th,
  html.dark td {
    border: 1px solid #999 !important;
  }
  
  html.dark th,
  html.dark td {
    padding: 8px;
    text-align: left;
  }
  
  html.dark th {
    background-color: #f0f0f0 !important;
    font-weight: bold;
  }
  
  html.dark thead {
    display: table-header-group;
  }
  
  html.dark tr {
    page-break-inside: avoid;
  }
  
  /* ==========================================================================
     Images
     ========================================================================== */
  
  html.dark img {
    max-width: 100% !important;
    height: auto !important;
    filter: none !important;
    opacity: 1 !important;
    page-break-inside: avoid;
  }
  
  /* Ensure dark mode images are visible */
  html.dark img[src*="logo"],
  html.dark img[src*="icon"] {
    filter: none !important;
  }
  
  /* ==========================================================================
     Forms (usually hidden in print, but styled just in case)
     ========================================================================== */
  
  html.dark input,
  html.dark textarea,
  html.dark select {
    border: 1px solid #ccc !important;
    background: white !important;
    color: black !important;
  }
  
  /* ==========================================================================
     Cards & Containers
     ========================================================================== */
  
  html.dark .card,
  html.dark [class*="card"],
  html.dark .bg-card,
  html.dark .bg-popover,
  html.dark .bg-secondary,
  html.dark .bg-muted {
    background: white !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
  
  /* ==========================================================================
     Hide Non-Print Elements
     ========================================================================== */
  
  html.dark .no-print,
  html.dark .theme-toggle,
  html.dark .dark-only,
  html.dark nav,
  html.dark .nav,
  html.dark .navigation,
  html.dark .sidebar,
  html.dark .mobile-nav,
  html.dark .fab,
  html.dark .floating-action-button,
  html.dark [data-testid="trial-banner"],
  html.dark .trial-banner,
  html.dark button:not(.print-button),
  html.dark .btn:not(.print-button),
  html.dark [role="button"]:not(.print-button) {
    display: none !important;
  }
  
  /* ==========================================================================
     Show Print-Only Elements
     ========================================================================== */
  
  html.dark .print-only {
    display: block !important;
  }
  
  html.dark .print-only-inline {
    display: inline !important;
  }
  
  html.dark .print-header {
    display: block !important;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #333;
  }
  
  html.dark .print-footer {
    display: block !important;
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #ccc;
    font-size: 10pt;
    color: #666 !important;
  }
  
  /* ==========================================================================
     Layout Adjustments
     ========================================================================== */
  
  html.dark .container,
  html.dark .container-fluid {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  html.dark .row {
    display: block !important;
  }
  
  html.dark [class*="col-"] {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
  }
  
  /* ==========================================================================
     Invoice-Specific Styles
     ========================================================================== */
  
  html.dark .invoice-paper {
    background: white !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    padding: 40px !important;
    max-width: 210mm; /* A4 width */
    margin: 0 auto !important;
  }
  
  html.dark .invoice-header {
    border-bottom: 2px solid #333 !important;
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
  }
  
  html.dark .invoice-table {
    width: 100% !important;
    margin: 20px 0 !important;
  }
  
  html.dark .invoice-table th {
    background-color: #f0f0f0 !important;
    color: black !important;
    font-weight: bold !important;
    border-bottom: 2px solid #333 !important;
  }
  
  html.dark .invoice-table td {
    border-bottom: 1px solid #ccc !important;
  }
  
  /* ==========================================================================
     Status Badges for Print
     ========================================================================== */
  
  html.dark .badge,
  html.dark [class*="badge-"],
  html.dark .status-success,
  html.dark .status-warning,
  html.dark .status-error,
  html.dark .status-info,
  html.dark .status-neutral {
    background: transparent !important;
    border: 1px solid #666 !important;
    color: black !important;
    padding: 2px 6px !important;
    font-size: 10pt !important;
  }
  
  html.dark .status-success::before { content: "✓ "; }
  html.dark .status-warning::before { content: "⚠ "; }
  html.dark .status-error::before { content: "✗ "; }
  
  /* ==========================================================================
     Code & Preformatted Text
     ========================================================================== */
  
  html.dark code,
  html.dark pre {
    background-color: #f5f5f5 !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
    font-family: 'Courier New', Courier, monospace !important;
  }
  
  html.dark pre {
    padding: 10px !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
  }
  
  /* ==========================================================================
     Page Break Controls
     ========================================================================== */
  
  html.dark .page-break {
    page-break-before: always;
  }
  
  html.dark .page-break-after {
    page-break-after: always;
  }
  
  html.dark .no-page-break {
    page-break-inside: avoid;
  }
  
  /* ==========================================================================
     Glassmorphism Reset
     ========================================================================== */
  
  html.dark .glassmorphism,
  html.dark .glassmorphism-enhanced,
  html.dark .glassmorphism-dark,
  html.dark .nav-glassmorphism,
  html.dark .card-glassmorphism,
  html.dark .glassmorphism-float {
    background: white !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
}

/* ==========================================================================
   Print Preview Button Styles (Optional)
   ========================================================================== */

.print-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.print-button:hover {
  opacity: 0.9;
}

.print-button:active {
  transform: translateY(1px);
}

@media print {
  .print-button {
    display: none !important;
  }
}

/**
 * Breadcrumb System Styles
 * 
 * CSS animations and responsive styles for the breadcrumb navigation system.
 */

/* ============================================
   ANIMATION KEYFRAMES
   ============================================ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================
   ANIMATION UTILITY CLASSES
   ============================================ */

.animate-in {
  animation-fill-mode: both;
}

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

.slide-in-from-top-2 {
  animation: slideInFromTop 0.15s ease-out;
}

.duration-150 {
  animation-duration: 150ms;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (max-width: 639px) {
  .breadcrumb-desktop {
    display: none !important;
  }
  
  .breadcrumb-mobile {
    display: flex !important;
  }
}

@media (min-width: 640px) {
  .breadcrumb-desktop {
    display: flex !important;
  }
  
  .breadcrumb-mobile {
    display: none !important;
  }
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .animate-in,
  .fade-in,
  .slide-in-from-top-2 {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .breadcrumb-nav {
    display: none;
  }
}