/**
 * Alaska Fish Counts App - Centralized CSS Architecture
 * 
 * This file serves as the single entry point for all application styles.
 * It imports and organizes all CSS components in a logical, scalable structure.
 * 
 * CSS Architecture - BEST OF BOTH WORLDS:
 * 1. Tailwind CSS - Utility-first framework for rapid development
 * 2. Custom CSS - Brand variables, components, and custom functionality
 * 3. CSS Layers - Proper specificity control and integration
 * 
 * Author: Alaska Fish Count App Team
 * Version: 1.0.1 - Best of Both Worlds
 * Last Updated: 2025-08-12
 */

/* ===== TAILWIND CSS - LOADED VIA CDN ===== */
/* Tailwind CSS is loaded via CDN in HTML, so we don't need @tailwind directives here */

/* ===== CUSTOM CSS VARIABLES & BASE ===== */
@import url('./base/variables.css');
@import url('./base/reset.css');
@import url('./base/typography.css');
@import url('./base/animations.css');

/* ===== THEME LAYER ===== */
@import url('./themes/light-theme.css');
@import url('./themes/dark-theme.css');
@import url('./themes/field-theme.css');
@import url('./theme-field.css');

/* ===== COMPONENT LAYER ===== */
@import url('./components/buttons.css');
@import url('./components/cards.css');
@import url('./components/forms.css');
@import url('./components/navigation.css');
@import url('./components/tables.css');
@import url('./components/charts.css');
@import url('./components/modals.css');
@import url('./components/loading.css');
@import url('./components/dropdowns.css');
@import url('./components/pill-fonts.css');

/* ===== LAYOUT LAYER ===== */
@import url('./layout/header.css');
@import url('./layout/footer.css');
@import url('./layout/grid.css');
@import url('./layout/responsive.css');
@import url('./layout/content-spacing.css');

/* ===== PAGE-SPECIFIC LAYER ===== */
@import url('./pages/home.css');
@import url('./pages/locations.css');
@import url('./pages/live.css');
@import url('./pages/history.css');
@import url('./pages/map.css');
@import url('./pages/settings.css');

/* ===== UTILITY LAYER ===== */
@import url('./utilities/spacing.css');
@import url('./utilities/colors.css');
@import url('./utilities/effects.css');
@import url('./utilities/accessibility.css');
@import url('./utilities/field-neon.css');

/* ===== INTEGRATION LAYER - BEST OF BOTH WORLDS ===== */
@layer base {
  /* CSS Variables for theming - Default to Light Mode */
  :root {
    --bg: #ffffff;
    --card: #ffffff;
    --line: #e5e7eb;
    --text: #0f172a;
    --muted: #475569;
    --accent: #2563eb;
    --accent-light: #eff6ff;
    --accent-dark: #1d4ed8;
  }
  
  /* Light Mode Theme */
  .theme-light {
    --bg: #ffffff;
    --card: #ffffff;
    --line: #e5e7eb;
    --text: #0f172a;
    --muted: #475569;
    --accent: #2563eb;
    --accent-light: #eff6ff;
    --accent-dark: #1d4ed8;
  }
  
  /* Dark Mode Theme */
  .dark {
    --bg: #0b1020;
    --card: #0f162b;
    --line: #1e293b;
    --text: #dbeafe;
    --muted: #93a4b8;
    --accent: #38bdf8;
    --accent-light: #0c4a6e;
    --accent-dark: #075985;
  }
  
  /* Field Mode Theme (default) - Terminal/Console Style */
  .theme-field {
    /* Terminal Background Colors */
    --bg: #0B0F0A;
    --card: #0F1511;
    --line: #1E2A20;
    --text: #B7FF2C;
    --muted: #8CD44F;
    --accent: #B7FF2C;
    --accent-light: rgba(183, 255, 44, 0.1);
    --accent-dark: #9BFF0A;
    
    /* Terminal-specific variables for comprehensive styling */
    --bg-primary: #0B0F0A;
    --bg-secondary: #0F1511;
    --bg-tertiary: #1A1F1A;
    --bg-hover: #1E2A20;
    
    /* Terminal Text Colors */
    --text-primary: #B7FF2C;
    --text-secondary: #8CD44F;
    --text-tertiary: #6ABF3A;
    --text-inverse: #0B0F0A;
    --text-muted: #4A8A2E;
    --text-accent: #00FF88;
    
    /* Terminal Border Colors */
    --border-primary: #1E2A20;
    --border-secondary: #2A3A2A;
    --border-focus: #B7FF2C;
    
    /* Terminal Button Colors */
    --button-primary: #B7FF2C;
    --button-primary-hover: #9BFF0A;
    --button-primary-text: #0B0F0A;
    --button-secondary: #1E2A20;
    --button-secondary-hover: #2A3A2A;
    --button-secondary-text: #B7FF2C;
    
    /* Terminal Card Colors */
    --card-bg: #0F1511;
    --card-border: #1E2A20;
    --card-shadow: 0 4px 12px rgba(183, 255, 44, 0.1);
    --card-hover-shadow: 0 8px 24px rgba(183, 255, 44, 0.15);
    
    /* Terminal Table Colors */
    --table-bg: #0F1511;
    --table-border: #1E2A20;
    --table-header-bg: #1A1F1A;
    --table-row-hover: #1E2A20;
    --table-text: #B7FF2C;
    --table-header-text: #00FF88;
    
    /* Terminal Form Colors */
    --input-bg: #0F1511;
    --input-border: #1E2A20;
    --input-focus: #B7FF2C;
    --input-text: #B7FF2C;
    --input-placeholder: #4A8A2E;
    --input-disabled: #1A1F1A;
    
    /* Terminal Navigation Colors */
    --nav-bg: #0B0F0A;
    --nav-border: #1E2A20;
    --nav-text: #B7FF2C;
    --nav-hover: #1E2A20;
    --nav-active: #B7FF2C;
    --nav-active-text: #0B0F0A;
    --nav-dropdown: #0F1511;
    
    /* Terminal Status Colors */
    --status-online: #00FF88;
    --status-offline: #FF6B6B;
    --status-warning: #FFB347;
    --status-error: #FF6B6B;
    --status-info: #87CEEB;
    
    /* Terminal Shadow Colors */
    --shadow-sm: 0 1px 2px rgba(183, 255, 44, 0.05);
    --shadow-md: 0 4px 6px rgba(183, 255, 44, 0.1);
    --shadow-lg: 0 10px 15px rgba(183, 255, 44, 0.1);
    --shadow-xl: 0 20px 25px rgba(183, 255, 44, 0.15);
  }

  /* Override Tailwind base with our custom variables */
  html {
    scroll-behavior: smooth;
  }
  
  /* Global focus styles for accessibility */
  *:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  
  /* Ensure proper box-sizing */
  *, *::before, *::after {
    box-sizing: border-box;
  }
  
  /* Base body styles using our custom variables */
  body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family-base, system-ui, -apple-system, sans-serif);
    line-height: var(--line-height-base, 1.5);
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* Ensure images are responsive */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Ensure tables are responsive */
  table {
    width: 100%;
    border-collapse: collapse;
  }
}

@layer components {
  /* Custom components that work WITH Tailwind */
  .btn-primary {
    /* Tailwind classes applied via HTML */
    background-color: var(--btn-primary-bg, #2563eb);
    color: var(--btn-primary-text, #ffffff);
  }
  
  .btn-secondary {
    /* Tailwind classes applied via HTML */
    background-color: var(--btn-secondary-bg, #4b5563);
    color: var(--btn-secondary-text, #ffffff);
  }
  
  /* Alaska-specific components */
  .alaska-card {
    /* Tailwind classes applied via HTML */
    background-color: var(--card-bg, #ffffff);
    border-color: var(--card-border, #e5e7eb);
  }
  
  .alaska-header {
    /* Tailwind classes applied via HTML */
    color: var(--heading-primary, #1f2937);
  }
}

@layer utilities {
  /* Custom utilities that extend Tailwind */
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  
  /* Alaska brand utilities */
  .alaska-blue {
    color: var(--alaska-blue, #1e40af);
  }
  
  .alaska-bg {
    background-color: var(--alaska-blue, #1e40af);
  }
  
  /* ===== TERMINAL MODE STYLING ===== */
  /* Field mode terminal appearance - works with Tailwind utilities */
  .theme-field {
    /* Global terminal appearance */
    background-color: var(--bg-primary);
    color: var(--text-primary);
    
    /* Terminal font styling */
    font-family: 'Courier New', 'Monaco', 'Menlo', 'Consolas', monospace;
    font-weight: 500;
    letter-spacing: 0.5px;
  }
  
  /* Terminal component overrides for Tailwind classes */
  .theme-field .bg-white,
  .theme-field .bg-gray-50,
  .theme-field .bg-gray-100,
  .theme-field .bg-gray-200,
  .theme-field .bg-gray-300,
  .theme-field .bg-gray-400,
  .theme-field .bg-gray-500,
  .theme-field .bg-gray-600,
  .theme-field .bg-gray-700,
  .theme-field .bg-gray-800,
  .theme-field .bg-gray-900 {
    background-color: var(--bg-secondary) !important;
  }
  
  .theme-field .text-gray-50,
  .theme-field .text-gray-100,
  .theme-field .text-gray-200,
  .theme-field .text-gray-300,
  .theme-field .text-gray-400,
  .theme-field .text-gray-500,
  .theme-field .text-gray-600,
  .theme-field .text-gray-700,
  .theme-field .text-gray-800,
  .theme-field .text-gray-900 {
    color: var(--text-primary) !important;
  }
  
  .theme-field .border-gray-200,
  .theme-field .border-gray-300,
  .theme-field .border-gray-400,
  .theme-field .border-gray-500,
  .theme-field .border-gray-600,
  .theme-field .border-gray-700,
  .theme-field .border-gray-800,
  .theme-field .border-gray-900 {
    border-color: var(--border-primary) !important;
  }
  
  /* Terminal button styling */
  .theme-field .btn-primary,
  .theme-field button[class*="bg-blue"],
  .theme-field button[class*="bg-green"] {
    background-color: var(--button-primary) !important;
    color: var(--button-primary-text) !important;
    border: 2px solid var(--button-primary) !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 2px 8px rgba(183, 255, 44, 0.3) !important;
  }
  
  .theme-field .btn-primary:hover,
  .theme-field button[class*="bg-blue"]:hover,
  .theme-field button[class*="bg-green"]:hover {
    background-color: var(--button-primary-hover) !important;
    box-shadow: 0 4px 12px rgba(183, 255, 44, 0.4) !important;
    transform: translateY(-1px) !important;
  }
  
  /* Terminal card styling */
  .theme-field .card,
  .theme-field [class*="bg-white"],
  .theme-field [class*="bg-gray"] {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: var(--card-shadow) !important;
    font-family: 'Courier New', monospace !important;
  }
  
  /* Terminal table styling */
  .theme-field table {
    background-color: var(--table-bg) !important;
    border: 1px solid var(--table-border) !important;
    font-family: 'Courier New', monospace !important;
  }
  
  .theme-field th {
    background-color: var(--table-header-bg) !important;
    color: var(--table-header-text) !important;
    border-bottom: 2px solid var(--text-primary) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
  }
  
  .theme-field td {
    color: var(--table-text) !important;
    border-bottom: 1px solid var(--border-primary) !important;
    font-family: 'Courier New', monospace !important;
  }
  
  /* Terminal form styling */
  .theme-field input,
  .theme-field select,
  .theme-field textarea {
    background-color: var(--input-bg) !important;
    border: 2px solid var(--input-border) !important;
    color: var(--input-text) !important;
    font-family: 'Courier New', monospace !important;
  }
  
  .theme-field input:focus,
  .theme-field select:focus,
  .theme-field textarea:focus {
    border-color: var(--input-focus) !important;
    box-shadow: 0 0 0 3px rgba(183, 255, 44, 0.2) !important;
    outline: none !important;
  }
  
  /* Terminal navigation styling */
  .theme-field header {
    background-color: var(--nav-bg) !important;
    border-bottom: 2px solid var(--text-primary) !important;
    box-shadow: 0 2px 8px rgba(183, 255, 44, 0.2) !important;
  }
  
  .theme-field .nav-dropdown {
    background-color: var(--nav-dropdown) !important;
    border: 1px solid var(--text-primary) !important;
    box-shadow: 0 8px 24px rgba(183, 255, 44, 0.2) !important;
  }
  
    /* Terminal scrollbar styling */
  .theme-field::-webkit-scrollbar {
    width: 12px;
  }
  
  .theme-field::-webkit-scrollbar-track {
    background: var(--bg-primary);
  }
  
  .theme-field::-webkit-scrollbar-thumb {
    background: var(--text-secondary);
    border-radius: 6px;
  }
  
  .theme-field::-webkit-scrollbar-thumb:hover {
    background: var(--text-primary);
  }
  
  /* ===== GLOBAL FIELD MODE UTILITIES ===== */
  /* Make field mode work with all Tailwind utilities */
  .theme-field .bg-white,
  .theme-field .bg-gray-50,
  .theme-field .bg-gray-100,
  .theme-field .bg-gray-200,
  .theme-field .bg-gray-300,
  .theme-field .bg-gray-400,
  .theme-field .bg-gray-500,
  .theme-field .bg-gray-600,
  .theme-field .bg-gray-700,
  .theme-field .bg-gray-800,
  .theme-field .bg-gray-900,
  .theme-field .bg-slate-50,
  .theme-field .bg-slate-100,
  .theme-field .bg-slate-200,
  .theme-field .bg-slate-300,
  .theme-field .bg-slate-400,
  .theme-field .bg-slate-500,
  .theme-field .bg-slate-600,
  .theme-field .bg-slate-700,
  .theme-field .bg-slate-800,
  .theme-field .bg-slate-900 {
    background-color: var(--bg-secondary) !important;
  }
  
  .theme-field .text-white,
  .theme-field .text-gray-50,
  .theme-field .text-gray-100,
  .theme-field .text-gray-200,
  .theme-field .text-gray-300,
  .theme-field .text-gray-400,
  .theme-field .text-gray-500,
  .theme-field .text-gray-600,
  .theme-field .text-gray-700,
  .theme-field .text-gray-800,
  .theme-field .text-gray-900,
  .theme-field .text-slate-50,
  .theme-field .text-slate-100,
  .theme-field .text-slate-200,
  .theme-field .text-slate-300,
  .theme-field .text-slate-400,
  .theme-field .text-slate-500,
  .theme-field .text-slate-600,
  .theme-field .text-slate-700,
  .theme-field .text-slate-800,
  .theme-field .text-slate-900 {
    color: var(--text-primary) !important;
  }
  
  .theme-field .border-white,
  .theme-field .border-gray-50,
  .theme-field .border-gray-100,
  .theme-field .border-gray-200,
  .theme-field .border-gray-300,
  .theme-field .border-gray-400,
  .theme-field .border-gray-500,
  .theme-field .border-gray-600,
  .theme-field .border-gray-700,
  .theme-field .border-gray-800,
  .theme-field .border-gray-900,
  .theme-field .border-slate-50,
  .theme-field .border-slate-100,
  .theme-field .border-slate-200,
  .theme-field .border-slate-300,
  .theme-field .border-slate-400,
  .theme-field .border-slate-500,
  .theme-field .border-slate-600,
  .theme-field .border-slate-700,
  .theme-field .border-slate-800,
  .theme-field .border-slate-900 {
    border-color: var(--border-primary) !important;
  }
  
  /* Field mode specific color overrides for common components */
  .theme-field .bg-blue-50,
  .theme-field .bg-blue-100,
  .theme-field .bg-blue-200 {
    background-color: var(--bg-tertiary) !important;
  }
  
  .theme-field .text-blue-600,
  .theme-field .text-blue-700,
  .theme-field .text-blue-800 {
    color: var(--text-accent) !important;
  }
  
  .theme-field .bg-green-50,
  .theme-field .bg-green-100,
  .theme-field .bg-green-200 {
    background-color: var(--bg-tertiary) !important;
  }
  
  .theme-field .text-green-600,
  .theme-field .text-green-700,
  .theme-field .text-green-800 {
    color: var(--text-success) !important;
  }
  
  .theme-field .bg-purple-50,
  .theme-field .bg-purple-100,
  .theme-field .bg-purple-200 {
    background-color: var(--bg-tertiary) !important;
  }
  
  .theme-field .text-purple-600,
  .theme-field .text-purple-700,
  .theme-field .text-purple-800 {
    color: var(--text-warning) !important;
  }
  
  .theme-field .bg-orange-50,
  .theme-field .bg-orange-100,
  .theme-field .bg-orange-200 {
    background-color: var(--bg-tertiary) !important;
  }
  
  .theme-field .text-orange-600,
  .theme-field .text-orange-700,
  .theme-field .text-orange-800 {
    color: var(--text-warning) !important;
  }
  
  /* Field mode gradient overrides */
  .theme-field .from-white,
  .theme-field .to-blue-50,
  .theme-field .from-slate-700,
  .theme-field .to-slate-800 {
    background: var(--bg-secondary) !important;
    background-image: none !important;
  }
  
  /* Field mode shadow overrides */
  .theme-field .shadow-md,
  .theme-field .shadow-lg {
    box-shadow: var(--card-shadow) !important;
  }
  
  /* Field mode hover states */
  .theme-field .hover\\:bg-gray-100:hover,
  .theme-field .hover\\:bg-slate-700:hover {
    background-color: var(--bg-hover) !important;
  }
  
  .theme-field .hover\\:text-gray-700:hover,
  .theme-field .hover\\:text-slate-300:hover {
    color: var(--text-accent) !important;
  }
  
  .theme-field .hover\\:border-gray-300:hover,
  .theme-field .hover\\:border-slate-600:hover {
    border-color: var(--text-primary) !important;
  }
      background-color: var(--alaska-bg, #f8fafc);
    }
}

/* ===== PRINT STYLES ===== */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a, a:visited {
    text-decoration: underline;
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
  }
}

/* Consistent header logo sizing */
.header-logo { height: 2rem; width: 7rem; object-fit: contain; }

/* ===== DEFAULT LIGHT MODE THEME ===== */
/* Apply Light Mode by default when no theme is selected */
html:not([class*="theme-"]) {
  background-color: var(--bg);
  color: var(--text);
}

html:not([class*="theme-"]) body {
  background-color: var(--bg);
  color: var(--text);
}

/* Force Light Mode as default only when no theme class is present */
html:not([class*="theme-"]) {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

html:not([class*="theme-"]) body {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* Ensure Light Mode works properly */
.theme-light {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

.theme-light body {
  background-color: #ffffff !important;
  color: #0f172a !important;
}