@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-emerald: #10b981;
  --color-teal: #14b8a6;
  --color-amber: #f59e0b;
}

:root {
  --radius: 0.75rem;
  --background: oklch(0.99 0.002 155);
  --foreground: oklch(0.17 0.01 260);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.17 0.01 260);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.17 0.01 260);
  --primary: oklch(0.55 0.17 155);
  --primary-foreground: oklch(0.98 0.005 155);
  --secondary: oklch(0.96 0.01 155);
  --secondary-foreground: oklch(0.25 0.02 260);
  --muted: oklch(0.96 0.005 155);
  --muted-foreground: oklch(0.55 0.02 260);
  --accent: oklch(0.96 0.01 155);
  --accent-foreground: oklch(0.25 0.02 260);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.93 0.005 155);
  --input: oklch(0.93 0.005 155);
  --ring: oklch(0.55 0.17 155);
  --chart-1: oklch(0.55 0.17 155);
  --chart-2: oklch(0.53 0.14 175);
  --chart-3: oklch(0.72 0.19 85);
  --chart-4: oklch(0.60 0.18 50);
  --chart-5: oklch(0.65 0.22 330);
  --sidebar: oklch(0.97 0.01 155);
  --sidebar-foreground: oklch(0.17 0.01 260);
  --sidebar-primary: oklch(0.55 0.17 155);
  --sidebar-primary-foreground: oklch(0.98 0.005 155);
  --sidebar-accent: oklch(0.94 0.02 155);
  --sidebar-accent-foreground: oklch(0.25 0.02 260);
  --sidebar-border: oklch(0.93 0.005 155);
  --sidebar-ring: oklch(0.55 0.17 155);
}

.dark {
  --background: oklch(0.13 0.01 260);
  --foreground: oklch(0.98 0.005 155);
  --card: oklch(0.18 0.015 260);
  --card-foreground: oklch(0.98 0.005 155);
  --popover: oklch(0.18 0.015 260);
  --popover-foreground: oklch(0.98 0.005 155);
  --primary: oklch(0.65 0.17 155);
  --primary-foreground: oklch(0.15 0.01 260);
  --secondary: oklch(0.24 0.02 260);
  --secondary-foreground: oklch(0.98 0.005 155);
  --muted: oklch(0.24 0.02 260);
  --muted-foreground: oklch(0.65 0.02 260);
  --accent: oklch(0.24 0.02 260);
  --accent-foreground: oklch(0.98 0.005 155);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.65 0.17 155);
  --chart-1: oklch(0.65 0.17 155);
  --chart-2: oklch(0.63 0.14 175);
  --chart-3: oklch(0.77 0.19 85);
  --chart-4: oklch(0.72 0.22 50);
  --chart-5: oklch(0.70 0.22 330);
  --sidebar: oklch(0.18 0.015 260);
  --sidebar-foreground: oklch(0.98 0.005 155);
  --sidebar-primary: oklch(0.65 0.17 155);
  --sidebar-primary-foreground: oklch(0.15 0.01 260);
  --sidebar-accent: oklch(0.24 0.02 260);
  --sidebar-accent-foreground: oklch(0.98 0.005 155);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.65 0.17 155);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Custom scrollbar styling */
@layer utilities {
  .scrollbar-education::-webkit-scrollbar {
    width: 6px;
  }
  .scrollbar-education::-webkit-scrollbar-track {
    background: transparent;
  }
  .scrollbar-education::-webkit-scrollbar-thumb {
    background: oklch(0.80 0.02 155);
    border-radius: 3px;
  }
  .scrollbar-education::-webkit-scrollbar-thumb:hover {
    background: oklch(0.65 0.17 155);
  }
  .dark .scrollbar-education::-webkit-scrollbar-thumb {
    background: oklch(0.35 0.02 260);
  }
  .dark .scrollbar-education::-webkit-scrollbar-thumb:hover {
    background: oklch(0.65 0.17 155);
  }

  /* Global scrollbar override */
  *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  *::-webkit-scrollbar-track {
    background: transparent;
  }
  *::-webkit-scrollbar-thumb {
    background: oklch(0.85 0.01 155);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  *::-webkit-scrollbar-thumb:hover {
    background: oklch(0.65 0.17 155);
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  .dark *::-webkit-scrollbar-thumb {
    background: oklch(0.30 0.015 260);
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  .dark *::-webkit-scrollbar-thumb:hover {
    background: oklch(0.50 0.10 155);
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  /* Dot grid background pattern */
  .bg-dots {
    background-image: radial-gradient(circle, oklch(0.80 0.02 155) 1px, transparent 1px);
    background-size: 24px 24px;
  }
  .dark .bg-dots {
    background-image: radial-gradient(circle, oklch(0.25 0.015 260) 1px, transparent 1px);
    background-size: 24px 24px;
  }

  /* Smooth transitions for all interactive elements */
  .interactive-transition {
    transition: all 0.2s ease-out;
  }

  /* Animated gradient background */
  .animated-gradient-bg {
    background: linear-gradient(135deg, oklch(0.97 0.01 155) 0%, oklch(0.99 0.002 155) 50%, oklch(0.97 0.01 175) 100%);
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
  }
  .dark .animated-gradient-bg {
    background: linear-gradient(135deg, oklch(0.15 0.01 260) 0%, oklch(0.13 0.01 260) 50%, oklch(0.15 0.01 155) 100%);
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
  }
  @keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  /* Pulse animation */
  @keyframes pulse-soft {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.85; }
  }
  .animate-pulse-soft {
    animation: pulse-soft 2s ease-in-out infinite;
  }

  /* Shimmer animation for progress bars */
  @keyframes shimmer-bar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
  }
  .animate-shimmer {
    animation: shimmer-bar 2.5s ease-in-out infinite;
  }

  /* Float animation for geometric shapes */
  @keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-15px) rotate(5deg); }
    66% { transform: translateY(10px) rotate(-3deg); }
  }
  @keyframes float-reverse {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(12px) rotate(-4deg); }
    66% { transform: translateY(-10px) rotate(6deg); }
  }
  @keyframes float-slow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(8deg); }
  }
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  .animate-float-reverse {
    animation: float-reverse 7s ease-in-out infinite;
  }
  .animate-float-slow {
    animation: float-slow 10s ease-in-out infinite;
  }

  /* Progress bar animation */
  @keyframes progress-fill {
    from { width: 0; }
  }
  .animate-progress-fill {
    animation: progress-fill 1s ease-out;
  }

  /* Print styles — full print stylesheet lives at end of file */
}

/* Focus ring for accessibility */
@layer base {
  *:focus-visible {
    outline: 2px solid oklch(0.55 0.17 155);
    outline-offset: 2px;
    border-radius: 4px;
  }
  *:focus:not(:focus-visible) {
    outline: none;
  }
  /* Make keyboard focus more visible on interactive controls */
  button:focus-visible,
  a:focus-visible,
  [role="button"]:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid oklch(0.55 0.17 155);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px oklch(0.55 0.17 155 / 0.18);
    transition: box-shadow 0.15s ease-out;
  }
  .dark button:focus-visible,
  .dark a:focus-visible,
  .dark [role="button"]:focus-visible,
  .dark input:focus-visible,
  .dark select:focus-visible,
  .dark textarea:focus-visible,
  .dark [tabindex]:focus-visible {
    outline: 2px solid oklch(0.65 0.17 155);
    box-shadow: 0 0 0 4px oklch(0.65 0.17 155 / 0.25);
  }
  html {
    scroll-behavior: smooth;
  }
}

/* ─── Styling polish utilities ─────────────────────────────────────────── */

@layer utilities {
  /* Subtle paper texture for main backgrounds */
  .bg-paper {
    background-color: oklch(0.99 0.002 155);
    background-image:
      radial-gradient(circle at 20% 10%, oklch(0.96 0.015 155 / 0.6) 0%, transparent 40%),
      radial-gradient(circle at 80% 80%, oklch(0.96 0.012 175 / 0.5) 0%, transparent 45%),
      url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.45 0 0 0 0 0.3 0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .dark .bg-paper {
    background-color: oklch(0.13 0.01 260);
    background-image:
      radial-gradient(circle at 20% 10%, oklch(0.18 0.02 155 / 0.35) 0%, transparent 40%),
      radial-gradient(circle at 80% 80%, oklch(0.18 0.02 175 / 0.3) 0%, transparent 45%),
      url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.85 0 0 0 0 0.7 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* Mesh gradient for hero / stats areas */
  .bg-mesh {
    background-color: oklch(0.99 0.002 155);
    background-image:
      radial-gradient(at 12% 18%, oklch(0.94 0.04 155 / 0.55) 0px, transparent 50%),
      radial-gradient(at 88% 22%, oklch(0.94 0.05 175 / 0.45) 0px, transparent 50%),
      radial-gradient(at 22% 88%, oklch(0.95 0.05 85 / 0.4) 0px, transparent 50%),
      radial-gradient(at 78% 78%, oklch(0.95 0.05 330 / 0.3) 0px, transparent 50%);
  }
  .dark .bg-mesh {
    background-color: oklch(0.13 0.01 260);
    background-image:
      radial-gradient(at 12% 18%, oklch(0.20 0.06 155 / 0.35) 0px, transparent 50%),
      radial-gradient(at 88% 22%, oklch(0.20 0.06 175 / 0.3) 0px, transparent 50%),
      radial-gradient(at 22% 88%, oklch(0.20 0.07 85 / 0.25) 0px, transparent 50%),
      radial-gradient(at 78% 78%, oklch(0.20 0.08 330 / 0.2) 0px, transparent 50%);
  }

  /* Shimmer skeleton loader */
  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  .shimmer {
    background: linear-gradient(
      90deg,
      oklch(0.92 0.005 155 / 0.4) 0%,
      oklch(0.88 0.01 155 / 0.7) 50%,
      oklch(0.92 0.005 155 / 0.4) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s linear infinite;
  }
  .dark .shimmer {
    background: linear-gradient(
      90deg,
      oklch(0.22 0.015 260 / 0.5) 0%,
      oklch(0.28 0.02 260 / 0.8) 50%,
      oklch(0.22 0.015 260 / 0.5) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s linear infinite;
  }

  /* Subtle inner ring for premium cards */
  .ring-inset-soft {
    box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.05), 0 1px 2px oklch(0 0 0 / 0.04);
  }
  .dark .ring-inset-soft {
    box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.04), 0 1px 2px oklch(0 0 0 / 0.2);
  }

  /* Document / paper preview look for reports */
  .paper-preview {
    background: white;
    background-image:
      linear-gradient(oklch(0.96 0.005 155 / 0.6) 1px, transparent 1px);
    background-size: 100% 28px;
    box-shadow:
      0 1px 0 oklch(0.85 0.005 155),
      0 4px 12px oklch(0 0 0 / 0.08),
      0 24px 60px oklch(0 0 0 / 0.06);
  }
  .dark .paper-preview {
    background: oklch(0.18 0.015 260);
    background-image:
      linear-gradient(oklch(0.22 0.015 260 / 0.6) 1px, transparent 1px);
    background-size: 100% 28px;
    box-shadow:
      0 1px 0 oklch(0 0 0 / 0.4),
      0 4px 12px oklch(0 0 0 / 0.4),
      0 24px 60px oklch(0 0 0 / 0.3);
  }

  /* Sticky header helper for tables */
  .sticky-header th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: oklch(0.96 0.005 155);
  }
  .dark .sticky-header th {
    background: oklch(0.20 0.015 260);
  }

  /* Sparkline path */
  .sparkline-path {
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }

  /* Lift on hover for cards */
  .lift-on-hover {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .lift-on-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -10px oklch(0.55 0.17 155 / 0.18);
  }

  /* Gradient text for highlights */
  .text-gradient-emerald {
    background: linear-gradient(90deg, oklch(0.55 0.17 155), oklch(0.55 0.14 175));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .text-gradient-amber {
    background: linear-gradient(90deg, oklch(0.72 0.19 85), oklch(0.60 0.18 50));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .text-gradient-violet {
    background: linear-gradient(90deg, oklch(0.60 0.20 320), oklch(0.65 0.22 280));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .text-gradient-rose {
    background: linear-gradient(90deg, oklch(0.65 0.22 15), oklch(0.62 0.20 350));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .text-gradient-teal {
    background: linear-gradient(90deg, oklch(0.55 0.14 175), oklch(0.60 0.16 195));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* Generic gradient text — direction aware */
  .gradient-text {
    background: linear-gradient(135deg, oklch(0.55 0.17 155) 0%, oklch(0.55 0.14 175) 50%, oklch(0.65 0.22 330) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .dark .gradient-text {
    background: linear-gradient(135deg, oklch(0.70 0.17 155) 0%, oklch(0.70 0.14 175) 50%, oklch(0.78 0.22 330) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* Frosted glass card — backdrop blur + translucent surface */
  .glass-card {
    background: oklch(1 0 0 / 0.7);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid oklch(1 0 0 / 0.4);
    box-shadow:
      0 4px 16px -4px oklch(0 0 0 / 0.08),
      inset 0 0 0 1px oklch(1 0 0 / 0.3);
  }
  .dark .glass-card {
    background: oklch(0.18 0.015 260 / 0.65);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid oklch(1 0 0 / 0.08);
    box-shadow:
      0 4px 16px -4px oklch(0 0 0 / 0.4),
      inset 0 0 0 1px oklch(1 0 0 / 0.05);
  }
  .glass-card-strong {
    background: oklch(1 0 0 / 0.85);
    backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    border: 1px solid oklch(1 0 0 / 0.5);
  }
  .dark .glass-card-strong {
    background: oklch(0.18 0.015 260 / 0.8);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid oklch(1 0 0 / 0.1);
  }

  /* Animated count-up number */
  @keyframes count-up {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-count-up {
    animation: count-up 0.5s ease-out;
  }

  /* Decorative dotted/grid background pattern for headers */
  .bg-pattern-dots {
    background-image: radial-gradient(circle, oklch(0.55 0.17 155 / 0.18) 1px, transparent 1px);
    background-size: 16px 16px;
  }
  .dark .bg-pattern-dots {
    background-image: radial-gradient(circle, oklch(0.65 0.17 155 / 0.18) 1px, transparent 1px);
    background-size: 16px 16px;
  }
  .bg-pattern-grid {
    background-image:
      linear-gradient(oklch(0.55 0.17 155 / 0.06) 1px, transparent 1px),
      linear-gradient(90deg, oklch(0.55 0.17 155 / 0.06) 1px, transparent 1px);
    background-size: 24px 24px;
  }
  .dark .bg-pattern-grid {
    background-image:
      linear-gradient(oklch(0.65 0.17 155 / 0.08) 1px, transparent 1px),
      linear-gradient(90deg, oklch(0.65 0.17 155 / 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
  }

  /* Soft glow utility for highlighted elements */
  .glow-emerald {
    box-shadow: 0 0 0 1px oklch(0.55 0.17 155 / 0.15), 0 8px 24px -6px oklch(0.55 0.17 155 / 0.35);
  }
  .dark .glow-emerald {
    box-shadow: 0 0 0 1px oklch(0.65 0.17 155 / 0.25), 0 8px 24px -6px oklch(0.65 0.17 155 / 0.45);
  }

  /* Subtle top-border accent for chart cards */
  .accent-top-emerald { border-top: 3px solid oklch(0.55 0.17 155); }
  .accent-top-teal { border-top: 3px solid oklch(0.55 0.14 175); }
  .accent-top-amber { border-top: 3px solid oklch(0.72 0.19 85); }
  .accent-top-violet { border-top: 3px solid oklch(0.60 0.20 320); }
  .accent-top-rose { border-top: 3px solid oklch(0.65 0.22 15); }

  /* Subtle entrance animation for staggered items */
  @keyframes enter-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-enter-fade {
    animation: enter-fade 0.35s ease-out backwards;
  }

  /* ─── Styling polish additions ──────────────────────────────────── */

  /* Smooth page transition animation (fadeIn for view changes) */
  @keyframes view-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-view-fade-in {
    animation: view-fade-in 0.3s ease-out;
  }

  /* Hover lift effect for cards */
  .card-hover-lift {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  }
  .card-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -6px oklch(0.55 0.17 155 / 0.15);
  }
  .dark .card-hover-lift:hover {
    box-shadow: 0 8px 24px -6px oklch(0.65 0.17 155 / 0.25);
  }

  /* Focus-within ring animation for inputs */
  .input-focus-ring {
    transition: box-shadow 0.2s ease-out;
  }
  .input-focus-ring:focus-within {
    box-shadow: 0 0 0 3px oklch(0.55 0.17 155 / 0.2);
  }
  .dark .input-focus-ring:focus-within {
    box-shadow: 0 0 0 3px oklch(0.65 0.17 155 / 0.3);
  }

  /* Tooltip animation (scale from 0.95 to 1) */
  @keyframes tooltip-enter {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }
  .animate-tooltip-enter {
    animation: tooltip-enter 0.15s ease-out;
  }
}

/* Print-specific styling — expands to all reports when printing */
@media print {
  .no-print { display: none !important; }
  .print-only { display: block !important; }
  body { background: white !important; color: black !important; }

  /* Hide sidebar, header, navigation */
  [data-sidebar], header, nav, .no-print { display: none !important; }

  /* Make main content full width */
  main, .print-area { width: 100% !important; margin: 0 !important; padding: 1rem !important; }

  /* Ensure cards have borders for print */
  .card, [class*="Card"] { border: 1px solid #e5e7eb !important; break-inside: avoid; }

  /* Ensure text is readable */
  body { color: #000 !important; background: #fff !important; }

  /* Page breaks */
  .page-break { page-break-before: always; }
  .print-break-before { page-break-before: always; }
  .print-avoid-break { page-break-inside: avoid; }

  .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl { box-shadow: none !important; }
  .paper-preview { box-shadow: none !important; }
  @page { margin: 18mm 16mm; }
  /* Better margins for print */
  .card-hover-lift:hover { transform: none !important; box-shadow: none !important; }
  /* Hide interactive elements */
  button, .no-print, [role="button"], nav, aside, footer, header,
  .sidebar, .sidebar-trigger, .breadcrumb { display: none !important; }
  /* Ensure readable text */
  .dark { background: white !important; color: black !important; }
  .dark * { color: inherit !important; background: transparent !important; }
  /* Prevent overflow */
  .overflow-y-auto, .max-h-96, .max-h-80, .max-h-72 { max-height: none !important; overflow: visible !important; }
}

/* ─── Tablet & Stylus Optimization ────────────────────────────────────── */

/* Minimum touch target size (44px as per Apple HIG and WCAG guidelines) */
@layer utilities {
  .min-touch {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Touch-friendly media queries for tablets (768px-1024px) */
@media (pointer: coarse) {
  /* Increase touch targets for all interactive elements */
  button,
  [role="button"],
  a,
  input[type="checkbox"],
  input[type="radio"],
  select,
  .tabs-trigger,
  [data-state] {
    min-height: 44px;
  }

  /* Stylus-friendly: larger focus rings to prevent accidental taps */
  *:focus-visible {
    outline-width: 3px;
    outline-offset: 4px;
  }

  /* More generous spacing between interactive elements */
  .sidebar-menu-item {
    margin-bottom: 2px;
  }

  /* Prevent text selection while using stylus on interactive elements */
  button, a, [role="button"] {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Slightly larger fonts for touch readability */
  input, select, textarea {
    font-size: 16px; /* Prevents iOS zoom on input focus */
  }
}

/* Stylus-specific improvements */
@media (pointer: fine) and (hover: none) {
  /* Stylus devices often lack hover — replace hover effects with active */
  *:hover {
    /* Remove hover-only styles that don't make sense without hover capability */
  }
  /* Larger active/focus states for stylus precision */
  *:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

/* ─── Smooth Scrollbar Styling (touch-friendly) ─────────────────────── */
@layer utilities {
  .scrollbar-touch::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  .scrollbar-touch::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px;
  }
  .scrollbar-touch::-webkit-scrollbar-thumb {
    background: oklch(0.80 0.02 155 / 0.5);
    border-radius: 5px;
    border: 3px solid transparent;
    background-clip: padding-box;
  }
  .scrollbar-touch::-webkit-scrollbar-thumb:hover {
    background: oklch(0.65 0.17 155 / 0.7);
    border: 3px solid transparent;
    background-clip: padding-box;
  }
  .dark .scrollbar-touch::-webkit-scrollbar-thumb {
    background: oklch(0.35 0.015 260 / 0.5);
    border: 3px solid transparent;
    background-clip: padding-box;
  }

  /* Stylus-friendly input styles — larger focus rings for precision tapping */
  .stylus-input:focus-visible {
    outline: 3px solid oklch(0.55 0.17 155);
    outline-offset: 4px;
    box-shadow: 0 0 0 6px oklch(0.55 0.17 155 / 0.15);
    border-radius: 8px;
    transition: box-shadow 0.2s ease-out, outline-offset 0.2s ease-out;
  }
  .dark .stylus-input:focus-visible {
    outline: 3px solid oklch(0.65 0.17 155);
    box-shadow: 0 0 0 6px oklch(0.65 0.17 155 / 0.2);
  }
}

/* ─── Better Print Styles ──────────────────────────────────────────────── */
@media print {
  /* Ensure emerald accent colors print as dark gray for readability */
  .text-emerald-600, .text-emerald-700, .text-teal-600, .text-teal-700 {
    color: #333 !important;
  }
  .bg-emerald-50, .bg-emerald-100, .bg-teal-50, .bg-teal-100,
  .bg-gradient-to-r,
  [class*="from-emerald"],
  [class*="from-teal"] {
    background: #f5f5f5 !important;
  }

  /* Remove animations for print */
  .animate-float, .animate-float-reverse, .animate-float-slow,
  .animate-pulse-soft, .animate-shimmer, .animate-progress-fill,
  .animate-view-fade-in, .animate-enter-fade, .animate-count-up {
    animation: none !important;
  }

  /* Force all cards to have visible borders */
  [class*="border-0"], [class*="border-l-3"] {
    border: 1px solid #ddd !important;
  }

  /* Remove shadows */
  .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl,
  [class*="shadow-"] {
    box-shadow: none !important;
  }
}