/**
 * NeuroEvolution Bird - CSS Styles
 *
 * This file contains all the styling for the application.
 * It implements a Tailwind-like utility class system for
 * consistent, maintainable styling.
 *
 * Design Principles:
 * - Dark theme with accent colors
 * - Responsive layout
 * - Clean, modern aesthetic
 * - Educational focus with clear visual hierarchy
 */

/* Global styles */
body {
  font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Tailwind-like CSS classes implemented natively */
.min-h-screen {
  min-height: 100vh;
}

.bg-slate-900 {
  background-color: #0f172a;
}

.text-slate-100 {
  color: #f1f5f9;
}

.text-slate-400 {
  color: #94a3b8;
}

.text-slate-500 {
  color: #64748b;
}

.text-slate-300 {
  color: #cbd5e1;
}

.text-white {
  color: #ffffff;
}

.text-green-400 {
  color: #4ade80;
}

.text-cyan-400 {
  color: #22d3ee;
}

.text-yellow-400 {
  color: #facc15;
}

.text-purple-400 {
  color: #a855f7;
}

.bg-slate-800 {
  background-color: #1e293b;
}

.bg-slate-700 {
  background-color: #334155;
}

.bg-slate-600 {
  background-color: #475569;
}

.bg-green-600 {
  background-color: #166534;
}

.bg-green-500 {
  background-color: #22c55e;
}

.bg-yellow-600 {
  background-color: #ca8a04;
}

.bg-yellow-500 {
  background-color: #eab308;
}

.bg-red-600 {
  background-color: #dc2626;
}

.bg-red-500 {
  background-color: #ef4444;
}

.bg-cyan-500 {
  background-color: #06b6d4;
}

.bg-purple-600 {
  background-color: #7c3aed;
}

.bg-purple-500 {
  background-color: #8b5cf6;
}

.bg-orange-600 {
  background-color: #ea580c;
}

.bg-orange-500 {
  background-color: #f97316;
}

.hover\:bg-green-500:hover {
  background-color: #22c55e;
}

.hover\:bg-yellow-500:hover {
  background-color: #eab308;
}

.hover\:bg-red-500:hover {
  background-color: #ef4444;
}

.hover\:bg-cyan-500:hover {
  background-color: #06b6d4;
}

.hover\:bg-cyan-400:hover {
  background-color: #22d3ee;
}

.hover\:bg-purple-500:hover {
  background-color: #8b5cf6;
}

.hover\:bg-orange-500:hover {
  background-color: #f97316;
}

.hover\:bg-slate-600:hover {
  background-color: #475569;
}

.border {
  border-width: 1px;
  border-style: solid;
}

.border-slate-700 {
  border-color: #334155;
}

.border-4 {
  border-width: 4px;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded {
  border-radius: 0.25rem;
}

.p-4 {
  padding: 1rem;
}

.p-8 {
  padding: 2rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

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

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-2 {
  gap: 0.5rem;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.w-full {
  width: 100%;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-7xl {
  max-width: 80rem;
}

.max-w-\[800px\] {
  max-width: 800px;
}

.h-auto {
  height: auto;
}

.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}

.font-sans {
  font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-\[10px\] {
  font-size: 10px;
  line-height: 1rem;
}

.uppercase {
  text-transform: uppercase;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.grid {
  display: grid;
}

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

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

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

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

.lg\:col-span-2 {
  grid-column: span 2 / span 2;
}

.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.overflow-hidden {
  overflow: hidden;
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to));
}

.from-cyan-400 {
  --tw-gradient-from: #22d3ee;
}

.to-blue-500 {
  --tw-gradient-to: #3b82f6;
}

.bg-clip-text {
  background-clip: text;
}

.text-transparent {
  color: transparent;
}

.backdrop-blur {
  backdrop-filter: blur(8px);
}

.transition {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.leading-relaxed {
  line-height: 1.625;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.w-12 {
  width: 3rem;
}

.h-10 {
  height: 2.5rem;
}

.w-10 {
  width: 2.5rem;
}

.h-8 {
  height: 2rem;
}

/* Modal Utilities */
.fixed {
  position: fixed;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.z-50 {
  z-index: 50;
}

.bg-black {
  background-color: #000000;
}

.bg-opacity-80 {
  --tw-bg-opacity: 0.8;
  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
}

.bg-slate-900-50 {
  background-color: rgba(15, 23, 42, 0.5);
}

.bg-slate-800-50 {
  background-color: rgba(30, 41, 59, 0.5);
}

.max-h-screen {
  max-height: 100vh;
}

.max-h-90vh {
  max-height: 90vh;
}

.overflow-y-auto {
  overflow-y: auto;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.top-4 {
  top: 1rem;
}

.right-4 {
  right: 1rem;
}

.list-disc {
  list-style-type: disc;
}

.list-inside {
  list-style-position: inside;
}

.space-y-1 > * + * {
  margin-top: 0.25rem;
}

.space-y-4 > * + * {
  margin-top: 1rem;
}

.space-y-6 > * + * {
  margin-top: 1.5rem;
}

.hidden {
  display: none;
}

/* Responsive classes */
@media (min-width: 768px) {
  .md\:p-8 {
    padding: 2rem;
  }

  .md\:flex-row {
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }
}

/**
 * DESIGN SYSTEM EXPLANATION
 *
 * COLOR PALETTE:
 * - Primary: Slate (dark theme base)
 * - Accents: Cyan, Green, Yellow, Purple, Orange
 * - Semantic: Green (success), Yellow (warning), Red (danger)
 *
 * TYPOGRAPHY:
 * - Font: Ubuntu (clean, modern, open-source)
 * - Hierarchy: 3xl (title) → xl (section) → lg → base → sm → xs
 * - Weight: 400 (normal), 700 (bold), 800 (extra bold)
 *
 * LAYOUT:
 * - Responsive grid system
 * - Mobile-first approach
 * - Consistent spacing (gap-2, gap-4)
 * - Max-width containers for readability
 *
 * COMPONENTS:
 * - Cards with consistent padding and borders
 * - Interactive buttons with hover states
 * - Modal overlay for information
 * - Responsive controls that adapt to screen size
 *
 * The design creates an educational, professional interface
 * that makes complex AI concepts accessible and engaging.
 */

/* Button Styling - Remove Default Outlines */
button {
  border: none;
  outline: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

button:focus,
button:focus-visible {
  outline: none;
}

/* Disclaimer Modal Styling */
#disclaimer-modal {
  z-index: 100; /* Higher than other modals */
}

#disclaimer-modal > div {
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

#disclaimer-modal h2 {
  color: #f1f5f9;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
}

#disclaimer-modal h3 {
  color: #f1f5f9;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}

#disclaimer-modal .text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

#disclaimer-modal ul {
  list-style-type: disc;
  list-style-position: inside;
  padding-left: 1rem;
}

#disclaimer-modal li {
  margin-left: 0.5rem;
  margin-bottom: 0.25rem;
}

#disclaimer-modal section {
  margin-bottom: 1rem;
  padding: 1rem;
}

#disclaimer-modal .space-y-4 > * + * {
  margin-top: 1rem;
}

#disclaimer-modal .space-y-6 > * + * {
  margin-top: 1.5rem;
}

/* Button styling for disclaimer */
#btn-accept-disclaimer, #btn-reject-disclaimer {
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
  min-width: 120px;
}

#btn-accept-disclaimer {
  background-color: #166534;
}

#btn-accept-disclaimer:hover {
  background-color: #15803d;
}

#btn-reject-disclaimer {
  background-color: #991b1b;
}

#btn-reject-disclaimer:hover {
  background-color: #7f1d1d;
}

/* Goodbye Screen Styling */
#goodbye-screen {
  z-index: 100; /* Higher than other modals */
}

#goodbye-screen > div {
  width: 90%;
  max-width: 500px;
}

#goodbye-screen h2 {
  color: #f1f5f9;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
}

#btn-goodbye-ok {
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
  background-color: #1e40af;
}

#btn-goodbye-ok:hover {
  background-color: #1e3a8a;
}

/* Scrollbar styling for better UX */
#disclaimer-modal > div::-webkit-scrollbar {
  width: 8px;
}

#disclaimer-modal > div::-webkit-scrollbar-track {
  background: #1e293b;
  border-radius: 4px;
}

#disclaimer-modal > div::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}

#disclaimer-modal > div::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Responsive adjustments for disclaimer modal */
@media (max-width: 768px) {
  #disclaimer-modal > div,
  #goodbye-screen > div {
    width: 95%;
    max-width: 95%;
  }

  #disclaimer-modal h2 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  #disclaimer-modal h3 {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  #disclaimer-modal .text-sm {
    font-size: 0.8rem;
    line-height: 1.1rem;
  }

  #disclaimer-modal li {
    font-size: 0.8rem;
    line-height: 1.1rem;
  }

  #disclaimer-modal section {
    padding: 0.75rem;
  }

  #btn-accept-disclaimer, #btn-reject-disclaimer {
    padding: 0.6rem 1.2rem;
    font-size: 0.75rem;
    width: 100%;
  }

  #disclaimer-modal .flex.sm\:flex-row {
    flex-direction: column;
  }

  #disclaimer-modal .gap-4 {
    gap: 0.75rem;
  }
}

/* Extra small devices */
@media (max-width: 480px) {
  #disclaimer-modal h2 {
    font-size: 1.1rem;
    line-height: 1.5rem;
  }

  #disclaimer-modal h3 {
    font-size: 0.9rem;
    line-height: 1.25rem;
  }

  #disclaimer-modal .text-sm {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  #disclaimer-modal li {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  #disclaimer-modal .p-6,
  #disclaimer-modal .md\:p-8 {
    padding: 0.75rem;
  }

  #disclaimer-modal .space-y-6 > * + * {
    margin-top: 1rem;
  }
}

/* ========================================
   DESKTOP LAYOUT (default)
   ======================================== */
.main-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "canvas stats"
    "canvas network"
    "controls controls";
  gap: 1.5rem;
}

.section-stats {
  grid-area: stats;
}

.section-canvas {
  grid-area: canvas;
}

.section-network {
  grid-area: network;
}

.section-controls {
  grid-area: controls;
}

/* ========================================
   GLOBAL: Allow scrolling when content overflows
   ======================================== */
body.overflow-hidden {
  overflow-y: auto;
  overflow-x: hidden;
}

/* ========================================
   MOBILE RESPONSIVENESS (< 768px)
   ======================================== */
@media (max-width: 768px) {

  /* --- HEADER: Hide title, center buttons --- */
  .header-title {
    display: none;
  }

  .header-buttons {
    width: 100%;
    justify-content: center;
  }

  /* --- MAIN LAYOUT: Stack vertically with correct order --- */
  .main-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .section-stats {
    order: 1;
  }

  .section-canvas {
    order: 2;
  }

  .section-network {
    order: 3;
  }

  .section-controls {
    order: 4;
  }

  /* --- STATS: Compact cards --- */
  .stats-grid {
    gap: 0.5rem;
  }

  .stat-card {
    padding: 0.5rem 0.75rem;
  }

  .stat-card .text-xs {
    font-size: 0.65rem;
  }

  .stat-value {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }

  /* --- CANVAS: Full width --- */
  .section-canvas {
    width: 100%;
  }

  canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* --- CONTROLS: Stack and compact --- */
  .control-panel {
    padding: 0.75rem;
    flex-direction: column;
    gap: 0.75rem;
  }

  .control-row {
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    align-items: center;
  }

  .control-label {
    font-size: 0.75rem;
    text-align: center;
  }

  #speed-buttons,
  #pipe-speed-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }

  #speed-buttons button,
  #pipe-speed-buttons button {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
  }

  /* --- NETWORK VIS: Full width --- */
  .section-network {
    width: 100%;
  }

  #network-vis-container {
    width: 100%;
  }

  #network-vis-container canvas {
    max-width: 100% !important;
  }

  /* --- INFO MODAL: Full width on mobile --- */
  #info-modal > div {
    width: 95% !important;
    max-width: 95% !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  #info-modal .p-6 {
    padding: 1rem;
  }

  #info-modal h2 {
    font-size: 1.25rem;
  }

  #info-modal h3 {
    font-size: 1rem;
  }

  #info-modal p,
  #info-modal li {
    font-size: 0.875rem;
  }

  /* --- GENERAL: Reduce padding --- */
  .min-h-screen.p-4 {
    padding: 0.75rem;
  }

  header {
    margin-bottom: 0.75rem;
  }
}

/* ========================================
   TABLET LAYOUT (768px - 1024px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .main-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "stats"
      "canvas"
      "network"
      "controls";
  }

  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}