// =============================================================================
// MATRIX THEME
// =============================================================================
// A futuristic neon theme inspired by matrix aesthetics
// Features: Neon green/cyan accents, dark backgrounds, high contrast

// Light Mode Colors (inverted - lighter background with neon accents)
$matrix-light: (
  // Primary brand colors
  'primary': #00FF88,
  'primary-hover': #00CC6A,
  'primary-light': #E6FFF2,
  'secondary': #00D4FF,

  // Status colors - vibrant neon variants
  'success': #39FF14,
  'warning': #FFE600,
  'danger': #FF3366,
  'info': #00D4FF,

  // Backgrounds
  'bg-body': #F0F5F3,
  'bg-card': #FFFFFF,
  'bg-secondary': #E8F0EC,
  'bg-muted': #DDE8E2,
  'bg-input': #FFFFFF,

  // Text colors
  'text-primary': #1A2F23,
  'text-secondary': #2D4A3A,
  'text-muted': #6B8F7A,
  'text-heading': #0D1F15,

  // Borders
  'border-color': #C5D9CE,
  'border-light': #E0EDE5,

  // Shadows - tinted with primary
  'shadow-sm': 0 2px 4px rgba(0, 255, 136, 0.08),
  'shadow-md': 0 4px 12px rgba(0, 255, 136, 0.12),
  'shadow-lg': 0 8px 24px rgba(0, 255, 136, 0.16),

  // Navigation - dark sidebar
  'nav-bg': #0D1117,
  'nav-text': #7EE2A8,
  'nav-active': #00FF88,

  // Links
  'link-color': #00CC6A,
  'link-hover': #00FF88,

  // Label/Badge variants
  'label-success-bg': #D4FFE6,
  'label-success-color': #00994D,
  'label-warning-bg': #FFF9D4,
  'label-warning-color': #997A00,
  'label-danger-bg': #FFD4E0,
  'label-danger-color': #CC0033,
  'label-info-bg': #D4F5FF,
  'label-info-color': #0099BB,
  'label-primary-bg': #D4FFE8,
  'label-primary-color': #00995C,
  'label-secondary-bg': #D4F0FF,
  'label-secondary-color': #0099BB,
  'label-dark-bg': #E0E8E3,
  'label-dark-color': #1A2F23,
  'label-light-bg': #F5FAF7,
  'label-light-color': #2D4A3A
);

// Dark Mode Colors (the true matrix experience)
$matrix-dark: (
  // Primary brand colors - glowing neon
  'primary': #00FF88,
  'primary-hover': #33FFA3,
  'primary-light': #0D2818,
  'secondary': #00D4FF,

  // Status colors - vivid neon
  'success': #39FF14,
  'warning': #FFE600,
  'danger': #FF3366,
  'info': #00D4FF,

  // Backgrounds - deep dark with subtle green tint
  'bg-body': #0A0F0D,
  'bg-card': #111A15,
  'bg-secondary': #162419,
  'bg-muted': #1C2E22,
  'bg-input': #0D1711,

  // Text colors - high contrast
  'text-primary': #E8F5EC,
  'text-secondary': #B8D4C2,
  'text-muted': #6B8F7A,
  'text-heading': #FFFFFF,

  // Borders - subtle glow effect
  'border-color': #1F3D2A,
  'border-light': #162419,

  // Shadows - neon glow
  'shadow-sm': 0 2px 8px rgba(0, 255, 136, 0.15),
  'shadow-md': 0 4px 16px rgba(0, 255, 136, 0.2),
  'shadow-lg': 0 8px 32px rgba(0, 255, 136, 0.25),

  // Navigation
  'nav-bg': #050807,
  'nav-text': #7EE2A8,
  'nav-active': #00FF88,

  // Links - glowing
  'link-color': #00FF88,
  'link-hover': #66FFBB,

  // Label/Badge variants - neon on dark
  'label-success-bg': #0D2810,
  'label-success-color': #39FF14,
  'label-warning-bg': #28250D,
  'label-warning-color': #FFE600,
  'label-danger-bg': #280D18,
  'label-danger-color': #FF3366,
  'label-info-bg': #0D2328,
  'label-info-color': #00D4FF,
  'label-primary-bg': #0D2818,
  'label-primary-color': #00FF88,
  'label-secondary-bg': #0D2328,
  'label-secondary-color': #00D4FF,
  'label-dark-bg': #1C2E22,
  'label-dark-color': #E8F5EC,
  'label-light-bg': #162419,
  'label-light-color': #B8D4C2
);

// Register the theme
$matrix-theme: (
  'light': $matrix-light,
  'dark': $matrix-dark
);

@include register-theme('matrix', $matrix-theme);

// =============================================================================
// MATRIX THEME STYLES
// =============================================================================

[data-skin="matrix"] {
  @include apply-theme-variables('matrix', 'light');

  // Body and base styles
  body {
    background-color: var(--theme-bg-body);
    color: var(--theme-text-primary);
  }

  // Cards with subtle glow
  .uk-card {
    background-color: var(--theme-bg-card);
    border: 1px solid var(--theme-border-color);
    box-shadow: var(--theme-shadow-sm);

    &:hover {
      box-shadow: var(--theme-shadow-md);
    }
  }

  .uk-card-title {
    color: var(--theme-text-heading);
  }

  // Buttons with neon effect
  .uk-button-primary {
    background-color: var(--theme-primary);
    color: #0D1117;
    font-weight: 600;

    &:hover {
      background-color: var(--theme-primary-hover);
      box-shadow: 0 0 12px rgba(0, 255, 136, 0.4);
    }
  }

  .uk-button-secondary {
    background-color: var(--theme-secondary);
    color: #0D1117;

    &:hover {
      box-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
    }
  }

  // Form elements
  .uk-input, .uk-select, .uk-textarea {
    background-color: var(--theme-bg-input);
    border-color: var(--theme-border-color);
    color: var(--theme-text-primary);

    &:focus {
      border-color: var(--theme-primary);
      box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
    }
  }

  // Navigation
  .uk-navbar-container {
    background-color: var(--theme-nav-bg);
  }

  // Tables
  .uk-table th {
    color: var(--theme-text-heading);
    border-bottom-color: var(--theme-border-color);
  }

  .uk-table td {
    border-bottom-color: var(--theme-border-light);
  }

  // Labels and badges
  .uk-label {
    font-weight: 600;
  }

  // Links with glow on hover
  a {
    color: var(--theme-link-color);

    &:hover {
      color: var(--theme-link-hover);
      text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
    }
  }

  // Headings
  h1, h2, h3, h4, h5, h6,
  .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 {
    color: var(--theme-text-heading);
  }

  // Alerts
  .uk-alert-success {
    background-color: var(--theme-label-success-bg);
    color: var(--theme-label-success-color);
  }

  .uk-alert-warning {
    background-color: var(--theme-label-warning-bg);
    color: var(--theme-label-warning-color);
  }

  .uk-alert-danger {
    background-color: var(--theme-label-danger-bg);
    color: var(--theme-label-danger-color);
  }
}

// Dark mode variant
[data-skin="matrix"][data-theme="dark"] {
  @include apply-theme-variables('matrix', 'dark');

  // Body
  body {
    background-color: var(--theme-bg-body);
    color: var(--theme-text-primary);
  }

  // Headings
  h1, h2, h3, h4, h5, h6,
  .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 {
    color: var(--theme-text-heading);
  }

  // Header
  header {
    background: var(--theme-bg-card) !important;
    border-bottom-color: var(--theme-border-color);
    box-shadow: 0 4px 24px rgba(0, 255, 136, 0.1);
  }

  // Cards
  .uk-card {
    background-color: var(--theme-bg-card);
    border-color: var(--theme-border-color);
    box-shadow: var(--theme-shadow-sm);

    &:hover {
      box-shadow: 0 0 24px rgba(0, 255, 136, 0.2);
    }
  }

  .uk-card-title {
    color: var(--theme-text-heading);
  }

  .uk-card-secondary {
    background-color: var(--theme-bg-secondary);
  }

  // Dropdowns
  .uk-dropdown {
    background-color: var(--theme-bg-card);
    border: 1px solid var(--theme-border-color);
    box-shadow: var(--theme-shadow-lg);
  }

  .uk-dropdown-nav > li > a {
    color: var(--theme-text-secondary);

    &:hover {
      color: var(--theme-primary);
    }
  }

  .uk-nav-header {
    color: var(--theme-text-muted);
  }

  .uk-nav-divider {
    border-top-color: var(--theme-border-color);
  }

  // Buttons with enhanced glow
  .uk-button-primary:hover {
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
  }

  .uk-button-secondary:hover {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.6);
  }

  .uk-button-default {
    background-color: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
    border-color: var(--theme-border-color);

    &:hover {
      background-color: var(--theme-bg-muted);
      border-color: var(--theme-primary);
    }
  }

  // Form elements
  .uk-input, .uk-select, .uk-textarea {
    background-color: var(--theme-bg-input);
    border-color: var(--theme-border-color);
    color: var(--theme-text-primary);

    &:focus {
      border-color: var(--theme-primary);
      box-shadow: 0 0 12px rgba(0, 255, 136, 0.5);
    }

    &::placeholder {
      color: var(--theme-text-muted);
    }
  }

  // Tables
  .uk-table th {
    color: var(--theme-text-heading);
    background-color: var(--theme-bg-secondary);
    border-bottom-color: var(--theme-border-color);
  }

  .uk-table td {
    color: var(--theme-text-primary);
    border-bottom-color: var(--theme-border-light);
  }

  .uk-table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--theme-bg-secondary);
  }

  .uk-table-hover tbody tr:hover {
    background-color: var(--theme-bg-muted);
  }

  // Links
  a {
    color: var(--theme-link-color);

    &:hover {
      color: var(--theme-link-hover);
      text-shadow: 0 0 12px rgba(0, 255, 136, 0.7);
    }
  }

  // Tabs
  .uk-tab > * > a {
    color: var(--theme-text-secondary);
    border-bottom-color: transparent;

    &:hover {
      color: var(--theme-primary);
      border-bottom-color: var(--theme-primary);
    }
  }

  .uk-tab > .uk-active > a {
    color: var(--theme-primary);
    border-bottom-color: var(--theme-primary);
  }

  // Badges and labels
  .uk-badge {
    background-color: var(--theme-primary);
    color: #0D1117;
  }

  // Alerts
  .uk-alert {
    background-color: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
  }

  .uk-alert-success {
    background-color: var(--theme-label-success-bg);
    color: var(--theme-label-success-color);
  }

  .uk-alert-warning {
    background-color: var(--theme-label-warning-bg);
    color: var(--theme-label-warning-color);
  }

  .uk-alert-danger {
    background-color: var(--theme-label-danger-bg);
    color: var(--theme-label-danger-color);
  }

  // Modals
  .uk-modal-dialog {
    background-color: var(--theme-bg-card);
    border: 1px solid var(--theme-border-color);
  }

  .uk-modal-header {
    background-color: var(--theme-bg-card);
    border-bottom-color: var(--theme-border-color);
  }

  .uk-modal-footer {
    background-color: var(--theme-bg-card);
    border-top-color: var(--theme-border-color);
  }

  .uk-modal-title {
    color: var(--theme-text-heading);
  }

  // Text utilities
  .uk-text-muted {
    color: var(--theme-text-muted) !important;
  }

  .uk-text-meta {
    color: var(--theme-text-muted);
  }

  // Horizontal rules
  hr, .uk-hr {
    border-top-color: var(--theme-border-color);
  }

  // Offcanvas
  .uk-offcanvas-bar {
    background-color: var(--theme-nav-bg);
  }

  // Sticky header
  [uk-sticky].uk-active {
    background-color: var(--theme-bg-card) !important;
  }
}