@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Custom CSS for Justix design */
:root {
  --primary-blue: #1e2a5e;
  --secondary-blue: #2a3f7a;
  --accent-blue: #3b82f6;
  --success-green: #10b981;
  --warning-yellow: #f59e0b;
  --danger-red: #ef4444;
  --text-gray: #6b7280;
  --light-gray: #f3f4f6;
  --white: #ffffff;
}

body {
  font-family: 'Inter', sans-serif;
}

/* Custom gradient background */
.gradient-bg {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
}

/* Custom button styles */
.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200;
}

.btn-secondary {
  @apply bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 rounded-lg transition duration-200;
}

.btn-success {
  @apply bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200;
}

.btn-danger {
  @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200;
}

/* Card styles */
.card {
  @apply bg-white rounded-xl shadow-sm border border-gray-100;
}

.card-header {
  @apply px-6 py-4 border-b border-gray-100;
}

.card-body {
  @apply px-6 py-4;
}

/* Table styles */
.table-responsive {
  @apply overflow-x-auto;
}

.table {
  @apply w-full text-sm text-left text-gray-500 min-w-full;
}

.table th {
  @apply px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table td {
  @apply px-4 py-4;
}

/* CNJ column styling */
.table td.cnj-cell {
  @apply font-mono text-sm whitespace-nowrap;
  min-width: 200px;
}

/* Responsive table for detailed analysis */
.table-detailed {
  @apply min-w-full;
}

.table-detailed th,
.table-detailed td {
  @apply px-2 py-2 text-xs;
}

.table-detailed th:first-child,
.table-detailed td:first-child {
  @apply pl-4;
}

.table-detailed th:last-child,
.table-detailed td:last-child {
  @apply pr-4;
}

/* Responsive table behavior */
@media (max-width: 768px) {
  .table-detailed {
    font-size: 0.75rem; /* Make text smaller on mobile */
  }
  
  .table-detailed th,
  .table-detailed td {
    @apply px-1 py-1; /* Reduce padding on mobile */
  }
}

/* Text truncation utilities */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.max-w-20 {
  max-width: 5rem; /* 80px */
}

.max-w-24 {
  max-width: 6rem; /* 96px */
}

/* Tooltip styling for truncated text */
[title] {
  cursor: help;
}

/* Ensure table cells don't wrap */
.table-detailed td {
  white-space: nowrap;
}

.table-detailed td > div {
  overflow: hidden;
}

/* Status badges */
.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-success {
  @apply bg-green-100 text-green-800;
}

.badge-warning {
  @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
  @apply bg-red-100 text-red-800;
}

.badge-info {
  @apply bg-blue-100 text-blue-800;
}

/* Loading spinner */
.spinner {
  @apply animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600;
}

/* Custom focus styles */
.form-input:focus {
  @apply ring-2 ring-blue-500 border-blue-500 outline-none;
}

/* Metric cards */
.metric-card {
  @apply bg-white p-6 rounded-xl shadow-sm border border-gray-100 text-center;
}

.metric-value {
  @apply text-2xl font-bold text-gray-900;
}

.metric-label {
  @apply text-sm text-gray-500 mt-1;
}

/* Dashboard specific styles */
.dashboard-card {
  @apply bg-white rounded-xl shadow-lg border border-gray-100 transition-shadow hover:shadow-xl;
}

.chart-container {
  @apply w-full h-80 relative;
}

/* Map tooltip styles */
#map-tooltip {
  z-index: 1000;
}

/* Print styles for dashboard */
@media print {
  .btn-primary, .btn-secondary, .btn-success {
    display: none !important;
  }
  
  .dashboard-card {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #d1d5db !important;
  }
  
  .chart-container {
    height: 200px !important;
  }
}

/* Responsive chart containers */
@media (max-width: 768px) {
  .chart-container {
    height: 250px;
  }
}

/* Markdown content styles */
.markdown-content {
  @apply text-gray-800 leading-relaxed;
}

.markdown-content h1 {
  @apply text-2xl font-bold text-gray-900 mb-4 mt-6 first:mt-0;
}

.markdown-content h2 {
  @apply text-xl font-bold text-gray-900 mb-3 mt-5 first:mt-0;
}

.markdown-content h3 {
  @apply text-lg font-semibold text-gray-900 mb-2 mt-4 first:mt-0;
}

.markdown-content h4 {
  @apply text-base font-semibold text-gray-900 mb-2 mt-3 first:mt-0;
}

.markdown-content p {
  @apply mb-4 text-gray-700 leading-relaxed;
}

.markdown-content ul, .markdown-content ol {
  @apply mb-4 pl-6;
}

.markdown-content li {
  @apply mb-1 text-gray-700;
}

.markdown-content ul li {
  @apply list-disc;
}

.markdown-content ol li {
  @apply list-decimal;
}

.markdown-content strong {
  @apply font-semibold text-gray-900;
}

.markdown-content em {
  @apply italic;
}

.markdown-content code {
  @apply bg-gray-100 text-gray-800 px-1.5 py-0.5 rounded text-sm font-mono;
}

.markdown-content pre {
  @apply bg-gray-100 text-gray-800 p-3 rounded-md mb-4 overflow-x-auto;
}

.markdown-content pre code {
  @apply bg-transparent p-0;
}

.markdown-content blockquote {
  @apply border-l-4 border-blue-200 pl-4 italic text-gray-600 mb-4;
}

.markdown-content hr {
  @apply border-t border-gray-300 my-6;
}

.markdown-content a {
  @apply text-blue-600 hover:text-blue-800 underline;
}

.markdown-content table {
  @apply w-full border-collapse border border-gray-300 mb-4;
}

.markdown-content th {
  @apply border border-gray-300 bg-gray-50 px-3 py-2 text-left font-semibold;
}

.markdown-content td {
  @apply border border-gray-300 px-3 py-2;
}