@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;
}
@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%;
  }
}

@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);
  }
}