@tailwind base;
@tailwind components;
@tailwind utilities;

/* Prevent CLS from font loading */
html {
  font-display: optional;
}

/* Shimmer animation for loading states */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* Marquee animation — seamless infinite loop (RTL-aware) */
@keyframes marquee-x {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
.animate-marquee {
  animation: marquee-x 35s linear infinite;
  will-change: transform;
}
.animate-marquee:hover { animation-play-state: paused; }

/* Floating blob animation */
@keyframes floaty {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  50% { transform: translateY(-12px) translateX(8px); }
}
.animate-floaty { animation: floaty 6s ease-in-out infinite; }

/* Soft glow pulse */
@keyframes glow-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.08); }
}
.animate-glow-pulse { animation: glow-pulse 4s ease-in-out infinite; }

/* CSS containment for layout stability */
.contain-layout {
  contain: layout style paint;
}

/* =========================================================
   ELETIMAD DASHBOARD SHELL — theme-aware
   In LIGHT mode (default): inherits the institutional light
   tokens from :root, only adds dashboard-specific surface
   styling (font, subtle background).
   In DARK mode (html.dark): activates the Midnight Indigo
   palette preserved from the original Cosmic Nexus design.
   ========================================================= */
.cosmic-shell {
  color: hsl(var(--foreground));
  font-family: 'DM Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  position: relative;
  background: hsl(var(--background));
  min-height: 100vh;
}

/* DARK MODE — original Midnight Indigo palette restored only when html.dark is active */
html.dark .cosmic-shell {
  --background: 230 35% 6%;
  --foreground: 220 30% 92%;

  --card: 232 38% 10%;
  --card-foreground: 220 30% 94%;

  --popover: 232 40% 9%;
  --popover-foreground: 220 30% 94%;

  --primary: 245 75% 62%;
  --primary-foreground: 0 0% 100%;

  --secondary: 232 30% 14%;
  --secondary-foreground: 220 30% 92%;

  --muted: 232 25% 14%;
  --muted-foreground: 225 18% 65%;

  --accent: 245 60% 22%;
  --accent-foreground: 245 90% 88%;

  --destructive: 0 70% 55%;
  --destructive-foreground: 0 0% 100%;

  --success: 160 70% 48%;
  --success-foreground: 0 0% 100%;

  --warning: 38 92% 58%;
  --warning-foreground: 230 35% 6%;

  --border: 235 30% 18%;
  --input: 235 30% 18%;
  --ring: 245 75% 62%;

  --sidebar-background: 230 38% 7%;
  --sidebar-foreground: 220 30% 92%;
  --sidebar-primary: 245 75% 62%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 232 30% 14%;
  --sidebar-accent-foreground: 245 90% 88%;
  --sidebar-border: 235 30% 18%;
  --sidebar-ring: 245 75% 62%;

  --brand-accent: 245 75% 62%;
  --brand-ink: 220 30% 96%;
  --brand-mint: 160 70% 50%;

  --eco-mint: 160 70% 50%;
  --eco-mint-foreground: 0 0% 100%;
  --eco-pending: 38 92% 58%;
  --eco-loss: 0 70% 60%;
  --eco-profit: 160 70% 45%;

  --gradient-primary: linear-gradient(180deg, hsl(235 40% 14%), hsl(232 38% 9%));
  --gradient-subtle: linear-gradient(180deg, hsl(230 38% 8%), hsl(230 35% 6%));
  --gradient-card: linear-gradient(180deg, hsl(232 38% 11%), hsl(232 38% 9%));

  --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.35);
  --shadow-card: 0 1px 3px hsl(0 0% 0% / 0.45), 0 1px 2px hsl(0 0% 0% / 0.3);
  --shadow-elegant: 0 18px 60px -20px hsl(245 80% 30% / 0.6), 0 2px 6px -1px hsl(0 0% 0% / 0.4);
  --shadow-glow: 0 0 0 4px hsl(245 75% 62% / 0.18);

  background: radial-gradient(1200px 600px at 85% -10%, hsl(245 80% 28% / 0.35), transparent 60%),
              radial-gradient(900px 500px at 10% 110%, hsl(265 70% 30% / 0.28), transparent 65%),
              hsl(var(--background));
}

.cosmic-shell h1,
.cosmic-shell h2,
.cosmic-shell h3,
.cosmic-shell h4 {
  font-family: 'Space Grotesk', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* Glass panel utility used by the dashboard inner wrapper — light by default */
.cosmic-panel {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-card);
}
html.dark .cosmic-panel {
  background: linear-gradient(180deg, hsl(232 40% 12% / 0.85), hsl(232 38% 9% / 0.85));
  border: 1px solid hsl(235 30% 22% / 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px -28px hsl(245 80% 30% / 0.5);
}

/* Soft glow on focus rings inside the shell (dark only) */
html.dark .cosmic-shell :focus-visible {
  outline-color: hsl(245 75% 62%);
}

/* =========================================================
   Cosmic Shell — neutralize hardcoded light-theme classes
   in DARK mode only. In light mode the original tailwind
   utilities (bg-white, text-gray-*) render naturally.
   ========================================================= */
html.dark .cosmic-shell .bg-white,
html.dark .cosmic-shell .bg-gray-50,
html.dark .cosmic-shell .bg-gray-100,
html.dark .cosmic-shell .bg-slate-50,
html.dark .cosmic-shell .bg-slate-100 {
  background-color: hsl(var(--card)) !important;
  color: hsl(var(--card-foreground));
}
html.dark .cosmic-shell .bg-gray-200,
html.dark .cosmic-shell .bg-slate-200 {
  background-color: hsl(var(--secondary)) !important;
}
html.dark .cosmic-shell .text-black,
html.dark .cosmic-shell .text-gray-900,
html.dark .cosmic-shell .text-slate-900,
html.dark .cosmic-shell .text-gray-800,
html.dark .cosmic-shell .text-slate-800 {
  color: hsl(var(--foreground)) !important;
}
html.dark .cosmic-shell .text-gray-700,
html.dark .cosmic-shell .text-slate-700,
html.dark .cosmic-shell .text-gray-600,
html.dark .cosmic-shell .text-slate-600 {
  color: hsl(var(--foreground) / 0.85) !important;
}
html.dark .cosmic-shell .text-gray-500,
html.dark .cosmic-shell .text-slate-500,
html.dark .cosmic-shell .text-gray-400,
html.dark .cosmic-shell .text-slate-400 {
  color: hsl(var(--muted-foreground)) !important;
}
html.dark .cosmic-shell .border-gray-100,
html.dark .cosmic-shell .border-gray-200,
html.dark .cosmic-shell .border-slate-100,
html.dark .cosmic-shell .border-slate-200,
html.dark .cosmic-shell .border-gray-300,
html.dark .cosmic-shell .border-slate-300 {
  border-color: hsl(var(--border)) !important;
}

/* Cosmic Shell — table rows & badges contrast (dark only) */
html.dark .cosmic-shell table tbody tr:nth-child(even) {
  background-color: hsl(var(--card) / 0.4);
}
html.dark .cosmic-shell table tbody tr:hover {
  background-color: hsl(var(--accent) / 0.35) !important;
}
html.dark .cosmic-shell table thead {
  background-color: hsl(var(--secondary) / 0.6);
}
html.dark .cosmic-shell table th {
  color: hsl(var(--muted-foreground)) !important;
  font-weight: 600;
}
/* Remap hardcoded even:bg-gray-50 / odd:bg-white utilities inside shell (dark only) */
html.dark .cosmic-shell .even\:bg-gray-50:nth-child(even),
html.dark .cosmic-shell .even\:bg-slate-50:nth-child(even),
html.dark .cosmic-shell .odd\:bg-white:nth-child(odd) {
  background-color: hsl(var(--card) / 0.4) !important;
}
/* Badges — boost contrast on dark cosmic background (dark only) */
html.dark .cosmic-shell .badge,
html.dark .cosmic-shell [class*="bg-secondary"]:where(.inline-flex, .inline-block) {
  border: 1px solid hsl(var(--border));
}
/* Icon visibility — promote near-black icons to foreground token (dark only) */
html.dark .cosmic-shell svg[class*="text-black"],
html.dark .cosmic-shell svg[class*="text-gray-900"],
html.dark .cosmic-shell svg[class*="text-slate-900"] {
  color: hsl(var(--foreground)) !important;
}

/* =========================================================
   Typography unification (global)
   - Minimum readable font size in tables
   - Tabular numbers for any financial / numeric column
   - Normalize heading weights to semibold (600)
   ========================================================= */
table { font-size: 0.875rem; }
@media (max-width: 768px) { table { font-size: 0.8125rem; } }
table td, table th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
h1 { font-weight: 600; letter-spacing: -0.02em; }
h2 { font-weight: 600; letter-spacing: -0.015em; }
h3, h4 { font-weight: 600; letter-spacing: -0.01em; }

/* Tabular numbers automatically for any element that looks like a money value */
[class*="kpi-value"], [class*="text-2xl"][class*="font-bold"],
[class*="text-3xl"][class*="font-bold"], [class*="text-4xl"] {
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   Motion & shadow unification
   - Default transition for interactive elements
   - Subtle lift for any card-like surface on hover
   ========================================================= */
button, a, [role="button"], [data-state] {
  transition: var(--transition-smooth);
}
/* Card-like surfaces auto-receive a soft shadow when interactive */
.cursor-pointer.rounded-2xl, .cursor-pointer.rounded-xl,
a > .rounded-2xl, a > .rounded-xl,
button > .rounded-2xl, button > .rounded-xl {
  transition: var(--transition-smooth);
}
a:hover > .rounded-2xl, a:hover > .rounded-xl,
button:hover > .rounded-2xl, button:hover > .rounded-xl {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elegant);
}
/* Override stray transition-all to use our smooth easing */
.transition-all { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
@layer base {
  :root {
    /* Crisp Institutional - Light Mode (Stripe/Linear inspired) */
    --background: 210 20% 98%;
    --foreground: 215 28% 12%;

    --card: 0 0% 100%;
    --card-foreground: 215 28% 12%;

    --popover: 0 0% 100%;
    --popover-foreground: 215 28% 12%;

    /* Primary: Deep Trust Navy (#0A2540) */
    --primary: 215 73% 12%;
    --primary-foreground: 0 0% 100%;

    /* Secondary surfaces */
    --secondary: 210 20% 96%;
    --secondary-foreground: 215 28% 17%;

    --muted: 210 20% 96%;
    --muted-foreground: 215 16% 47%;

    /* Accent: Electric Blue tinted surface */
    --accent: 217 100% 96%;
    --accent-foreground: 217 100% 38%;

    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;

    --success: 160 84% 32%;
    --success-foreground: 0 0% 100%;

    --warning: 32 95% 44%;
    --warning-foreground: 0 0% 100%;

    /* Financial state tokens */
    --eco-mint: 160 84% 39%;
    --eco-mint-foreground: 0 0% 100%;
    --eco-pending: 38 92% 50%;
    --eco-loss: 0 72% 51%;
    --eco-profit: 160 84% 32%;

    /* Borders: Crisp hairlines */
    --border: 215 20% 90%;
    --input: 215 20% 90%;
    --ring: 217 100% 50%;

    /* Sharper radius for institutional look */
    --radius: 0.5rem;

    /* Sidebar - Clean white */
    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 215 28% 17%;
    --sidebar-primary: 217 100% 50%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 217 100% 96%;
    --sidebar-accent-foreground: 215 73% 12%;
    --sidebar-border: 215 20% 90%;
    --sidebar-ring: 217 100% 50%;

    /* Brand accent for highlights — Electric Blue */
    --brand-accent: 217 100% 50%;
    --brand-ink: 215 73% 12%;
    --brand-mint: 160 84% 39%;

    /* Refined gradients - subtle, not flashy */
    --gradient-primary: linear-gradient(180deg, hsl(222 47% 15%), hsl(222 47% 11%));
    --gradient-subtle: linear-gradient(180deg, hsl(210 20% 99%), hsl(210 20% 97%));
    --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(210 20% 99%));
    --gradient-success: linear-gradient(135deg, hsl(142 71% 35%), hsl(142 65% 42%));
    --gradient-warning: linear-gradient(135deg, hsl(32 95% 44%), hsl(28 95% 50%));

    /* Refined shadows - more subtle, more professional */
    --shadow-sm: 0 1px 2px 0 hsl(215 28% 12% / 0.04);
    --shadow-card: 0 1px 3px hsl(215 28% 12% / 0.04), 0 1px 2px hsl(215 28% 12% / 0.03);
    --shadow-elegant: 0 8px 24px -8px hsl(215 28% 12% / 0.12), 0 2px 4px -1px hsl(215 28% 12% / 0.06);
    --shadow-glow: 0 0 0 4px hsl(222 100% 45% / 0.1);

    --transition-smooth: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
  }

  .dark {
    /* Premium dark - sophisticated, not pure black */
    --background: 222 47% 6%;
    --foreground: 210 20% 96%;

    --card: 222 40% 10%;
    --card-foreground: 210 20% 96%;

    --popover: 222 40% 10%;
    --popover-foreground: 210 20% 96%;

    --primary: 0 0% 100%;
    --primary-foreground: 222 47% 11%;

    --secondary: 222 33% 14%;
    --secondary-foreground: 210 20% 96%;

    --muted: 222 33% 14%;
    --muted-foreground: 215 16% 65%;

    --accent: 222 47% 18%;
    --accent-foreground: 217 91% 80%;

    --destructive: 0 63% 45%;
    --destructive-foreground: 210 20% 98%;

    --success: 142 65% 45%;
    --success-foreground: 0 0% 100%;

    --warning: 38 92% 55%;
    --warning-foreground: 0 0% 0%;

    --border: 222 33% 16%;
    --input: 222 33% 16%;
    --ring: 217 91% 60%;

    --sidebar-background: 222 47% 8%;
    --sidebar-foreground: 210 20% 96%;
    --sidebar-primary: 217 91% 60%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 222 33% 14%;
    --sidebar-accent-foreground: 217 91% 80%;
    --sidebar-border: 222 33% 16%;
    --sidebar-ring: 217 91% 60%;

    --brand-accent: 217 91% 60%;
    --brand-ink: 0 0% 100%;

    /* Financial state tokens — dark mode parity */
    --eco-mint: 160 70% 50%;
    --eco-mint-foreground: 0 0% 100%;
    --eco-pending: 38 92% 60%;
    --eco-loss: 0 70% 60%;
    --eco-profit: 160 70% 45%;
    --brand-mint: 160 70% 50%;

    /* Gradients — adapted to dark surfaces */
    --gradient-primary: linear-gradient(180deg, hsl(222 47% 12%), hsl(222 47% 8%));
    --gradient-subtle: linear-gradient(180deg, hsl(222 47% 8%), hsl(222 47% 6%));
    --gradient-card: linear-gradient(180deg, hsl(222 40% 11%), hsl(222 40% 9%));
    --gradient-success: linear-gradient(135deg, hsl(142 65% 38%), hsl(142 65% 45%));
    --gradient-warning: linear-gradient(135deg, hsl(38 92% 50%), hsl(32 95% 55%));

    /* Shadows — slightly stronger for dark surfaces */
    --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.25);
    --shadow-card: 0 1px 3px hsl(0 0% 0% / 0.3), 0 1px 2px hsl(0 0% 0% / 0.2);
    --shadow-elegant: 0 8px 24px -8px hsl(0 0% 0% / 0.5), 0 2px 4px -1px hsl(0 0% 0% / 0.3);
    --shadow-glow: 0 0 0 4px hsl(217 91% 60% / 0.15);
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    overflow-x: clip;
    overflow-y: auto;
    max-width: 100vw;
    position: relative;
  }

  html {
    overflow-x: clip;
    max-width: 100vw;
  }

  /* Responsive tables */
  .table-container {
    @apply w-full overflow-x-auto;
  }

  /* Prevent any rogue horizontal overflow site-wide */
  #root {
    overflow-x: clip;
    max-width: 100vw;
    position: relative;
  }

  /* Auto-wrap any overflowing table in a horizontally scrollable container */
  .table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Global responsive safety net — force any grid to stack on very small screens
     so layouts written with grid-cols-2/3/4 still look correct on phones. */
  @media (max-width: 480px) {
    [class*="grid-cols-"]:not(.keep-cols-mobile):not(.stats-keep) {
      grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    /* Allow explicit 2-col stat grids on mobile */
    .grid-cols-2.stats-keep,
    .stats-keep.grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .grid-cols-3.keep-cols-mobile {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .grid-cols-4.keep-cols-mobile {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
  }

  @media (min-width: 481px) and (max-width: 767px) {
    [class*="grid-cols-3"]:not(.keep-cols-mobile),
    [class*="grid-cols-4"]:not(.keep-cols-mobile),
    [class*="grid-cols-5"]:not(.keep-cols-mobile),
    [class*="grid-cols-6"]:not(.keep-cols-mobile) {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

  /* Prevent fixed-width images/media from causing overflow */
  img, video, canvas, svg, iframe {
    max-width: 100%;
    height: auto;
  }

  /* Long words / URLs shouldn't force horizontal scroll */
  p, span, h1, h2, h3, h4, h5, h6, td, th, li, a, div {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  @media (max-width: 768px) {
    table {
      @apply text-sm;
    }
    
    th, td {
      @apply px-2 py-1.5;
    }
  }

  /* Responsive dialogs */
  @media (max-width: 640px) {
    [role="dialog"] {
      @apply max-w-[95vw];
    }
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* Print styles */
  @media print {
    @page {
      size: A4;
      margin: 1cm;
    }

    body {
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
    }

    .print\:hidden {
      display: none !important;
    }

    .print\:block {
      display: block !important;
    }

    .print\:break-inside-avoid {
      break-inside: avoid;
    }

    .print\:p-8 {
      padding: 2rem;
    }

    .print\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .print\:h-auto {
      height: auto !important;
    }

    .print\:mt-4 {
      margin-top: 1rem;
    }
  }
}

/* Leaflet map custom styles */
.leaflet-container {
  font-family: inherit;
  direction: rtl;
  z-index: 1;
}

.leaflet-popup-content-wrapper {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.leaflet-popup-content {
  margin: 0;
  min-width: 200px;
}

/* Custom marker animations */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.custom-location-marker,
.current-location-marker,
.temp-location-marker {
  animation: pulse 2s infinite;
}

/* Motorcycle marker - smooth rotation */
.motorcycle-marker {
  transition: transform 0.5s ease-out;
}

.motorcycle-marker img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Leaflet controls RTL fix */
.leaflet-control {
  direction: ltr;
}

.leaflet-bar {
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  border-radius: 4px;
}

/* Map container */
.leaflet-container a {
  color: #3b82f6;
}

.leaflet-touch .leaflet-bar {
  border: none;
}

/* Document preview styles for Word templates */
.document-content {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.document-content p {
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.document-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
  direction: rtl;
}

.document-content table td,
.document-content table th {
  border: 1px solid #000;
  padding: 8px;
  text-align: right;
}

.document-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em auto;
}

.document-content h1,
.document-content h2,
.document-content h3 {
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-weight: bold;
}

.document-content strong,
.document-content b {
  font-weight: bold;
}

.document-content em,
.document-content i {
  font-style: italic;
}

.document-content ul,
.document-content ol {
  margin: 0.5em 0;
  padding-right: 2em;
}

/* Preserve red text color for editable fields */
.document-content [style*="color: rgb(255, 0, 0)"],
.document-content [style*="color: red"],
.document-content [style*="color:#ff0000"],
.document-content [style*="color:#FF0000"] {
  color: #ef4444 !important;
  background-color: #fef2f2;
  padding: 2px 4px;
  border-bottom: 2px dashed #ef4444;
}

/* Fullscreen dialogs override for mobile */
@media (max-width: 640px) {
  .chat-fullscreen[role="dialog"] {
    max-width: 100vw !important;
    max-height: 100svh !important;
  }
}

/* Fullscreen chat layout helper */
.chat-fullscreen {
  contain: layout;
}
.chat-fullscreen > * {
  height: 100svh;
}

/* Safe area for iOS devices */
@supports (padding: max(0px)) {
  .safe-area-bottom {
    padding-bottom: max(env(safe-area-inset-bottom), 0.75rem);
  }
  
  .safe-area-top {
    padding-top: max(env(safe-area-inset-top), 0);
  }
}

/* Smooth message animations */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* Mobile-specific styles */
@media (max-width: 767px) {
  /* Hide desktop sidebar on mobile */
  .desktop-only {
    display: none !important;
  }
  
  /* Improve touch targets */
  button, a, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Better input styling on mobile */
  input, select, textarea {
    font-size: 16px !important; /* Prevent zoom on iOS */
  }
  
  /* Compact card padding on mobile */
  .mobile-compact .p-6 {
    padding: 0.75rem !important;
  }
  
  /* Mobile bottom nav spacing */
  .pb-mobile-nav {
    padding-bottom: 5rem;
  }
}

/* Desktop-specific styles */
@media (min-width: 768px) {
  .mobile-only {
    display: none !important;
  }
}

/* Touch feedback */
.touch-feedback {
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.touch-feedback:active {
  transform: scale(0.98);
  opacity: 0.8;
}

/* ====== Modern Design Utilities ====== */
@layer utilities {
  .gradient-primary {
    background: var(--gradient-primary);
  }
  .gradient-subtle {
    background: var(--gradient-subtle);
  }
  .gradient-card {
    background: var(--gradient-card);
  }
  .gradient-success {
    background: var(--gradient-success);
  }
  .gradient-warning {
    background: var(--gradient-warning);
  }
  .shadow-card {
    box-shadow: var(--shadow-card);
  }
  .shadow-elegant {
    box-shadow: var(--shadow-elegant);
  }
  .shadow-glow {
    box-shadow: var(--shadow-glow);
  }
  .transition-smooth {
    transition: var(--transition-smooth);
  }
  .transition-bounce {
    transition: var(--transition-bounce);
  }
  /* Glass-morphism */
  .glass {
    background: hsl(var(--card) / 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid hsl(var(--border) / 0.5);
  }
  /* Hover lift effect */
  .hover-lift {
    transition: var(--transition-smooth);
  }
  .hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-elegant);
  }
  /* Tabular numbers - critical for financial tables */
  .tabular-nums {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }
  /* Crisp institutional card */
  .card-crisp {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
  }
  /* KPI value - large, semibold, tight tracking */
  .kpi-value {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: hsl(var(--foreground));
    font-variant-numeric: tabular-nums;
  }
  /* Subtle scrollbar */
  .scrollbar-subtle::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .scrollbar-subtle::-webkit-scrollbar-track {
    background: transparent;
  }
  .scrollbar-subtle::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 4px;
  }
  .scrollbar-subtle::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / 0.5);
  }
}