/* OneModel UI - Main CSS for Tailwind v4 */

/* Import Tailwind base, components, and utilities */
@import "tailwindcss";

/* Custom properties for Tailwind v4 theming */
:root {
  /* Primary color scale */
  --color-primary: #00274d;
  --color-primary-50: #f0f8ff;
  --color-primary-100: #eaf5ff;
  --color-primary-200: #dce8f6;
  --color-primary-300: #c7d7e8;
  --color-primary-400: #a3bad2;
  --color-primary-500: #93abc5;
  --color-primary-600: #6f8ca9;
  --color-primary-700: #517190;
  --color-primary-800: #3e5f7f;
  --color-primary-900: #1e4366;
  --color-primary-950: #00274d;

  /* Grayscale color scale */
  --color-gray: #777a7f;
  --color-gray-50: #ffffff;
  --color-gray-100: #fbfbfb;
  --color-gray-200: #f5f5f5;
  --color-gray-300: #e2e4e7;
  --color-gray-400: #d5d8dc;
  --color-gray-500: #b6b8bc;
  --color-gray-600: #919397;
  --color-gray-700: #777a7f;
  --color-gray-800: #565a61;
  --color-gray-900: #3a3a3a;
  --color-gray-950: #25272d;

  /* Secondary color */
  --color-secondary: #ed8d13;

  /* Success color scale */
  --color-success: #10b981;
  --color-success-100: #d1fae5;
  --color-success-200: #a7f3d0;
  --color-success-300: #6ee7b7;
  --color-success-400: #34d399;
  --color-success-500: #10b981;
  --color-success-600: #059669;
  --color-success-700: #059669;

  /* Error color scale */
  --color-error: #f43f5e;
  --color-error-100: #ffe4e6;
  --color-error-200: #fecdd3;
  --color-error-300: #fda4af;
  --color-error-400: #fb7185;
  --color-error-500: #f43f5e;
  --color-error-600: #e11d48;

  /* Legacy OneModel colors (for backward compatibility) */
  --onemodel-blue: #3b82f6;
  --onemodel-dark: #1e40af;
  --onemodel-light: #eff6ff;
  --onemodel-accent: #10b981;
  --onemodel-warning: #f59e0b;
  --onemodel-danger: #ef4444;

  /* Design tokens */
  --border-radius: 0.5rem;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);

  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
}

/* Base styles */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Focus styles for accessibility */
*:focus {
  outline: 2px solid var(--onemodel-blue);
  outline-offset: 2px;
}

/* Additional responsive utilities */
.chart-container {
  position: relative;
  width: 100%;
  height: 400px;
}

.chart-container.chart-sm {
  height: 200px;
}

.chart-container.chart-lg {
  height: 500px;
}

.chart-container.chart-xl {
  height: 600px;
}

/* Map containers */
.map-container {
  position: relative;
  width: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  height: 500px;
}

.map-container.map-sm {
  height: 300px;
}

.map-container.map-lg {
  height: 700px;
}

/* Loading spinner */
.spinner {
  animation: spin 1s linear infinite;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--onemodel-blue);
}

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

/* Animation utilities */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

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

.animate-slide-down {
  animation: slideDown 0.3s ease-out;
}

.animate-slide-up {
  animation: slideUp 0.3s ease-out;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }

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

  body {
    background: white !important;
    color: black !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --onemodel-blue: #000080;
    --onemodel-dark: #000040;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .spinner {
    animation: none;
  }
}

/* Responsive breakpoints:
   sm: 640px
   md: 768px  
   lg: 1024px
   xl: 1280px
   2xl: 1536px
*/

/* Privacy Notice */
.privacy-notice {
  background-color: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: var(--border-radius);
  padding: 1rem;
  margin-top: 2rem;
  color: #9a3412;
  font-size: 0.875rem;
  line-height: 1.5;
}

.privacy-notice strong {
  color: #7c2d12;
}

/* Collapsible panel utilities */
.writing-mode-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}