/**
 * GhostTrap Admin Core CSS Foundation
 * FILE: assets/css/ghosttrap-admin-core.css
 * 
 * Provides comprehensive design system foundation, modern components, and utility
 * classes for GhostTrap spam protection admin interface with WordPress-aligned
 * styling and professional user experience.
 * 
 * @package GhostTrap
 * @subpackage Admin/Assets
 * @since 1.0.0
 */

/* =============================================================================
   Design System Foundation
   ============================================================================= */

:root {
  /* GhostTrap Brand Colors (WordPress-aligned) */
  --ghosttrap-primary: #2271b1;
  --ghosttrap-success: #00a32a;
  --ghosttrap-warning: #dba617;
  --ghosttrap-error: #d63638;
  --ghosttrap-info: #0066cc;

  /* Protection Status System */
  --ghosttrap-active: var(--ghosttrap-success);
  --ghosttrap-blocked: var(--ghosttrap-error);
  --ghosttrap-inactive: #8c8f94;
  --ghosttrap-unknown: #999;
  --ghosttrap-highlight: #c8e6ff;

  /* Spam Detection Colors */
  --ghosttrap-detection-high: var(--ghosttrap-success);
  --ghosttrap-detection-medium: var(--ghosttrap-warning);
  --ghosttrap-detection-low: var(--ghosttrap-error);

  /* Spacing System */
  --ghosttrap-space-xs: 4px;
  --ghosttrap-space-sm: 8px;
  --ghosttrap-space-md: 16px;
  --ghosttrap-space-lg: 24px;
  --ghosttrap-space-xl: 32px;

  /* Typography */
  --ghosttrap-font-small: 11px;
  --ghosttrap-font-normal: 13px;
  --ghosttrap-font-medium: 14px;
  --ghosttrap-font-large: 16px;

  /* Border Radius */
  --ghosttrap-radius-sm: 3px;
  --ghosttrap-radius-md: 6px;
  --ghosttrap-radius-lg: 8px;

  /* Animation Timing */
  --ghosttrap-transition-fast: 0.2s ease;
  --ghosttrap-transition-standard: 0.3s ease;

  /* Admin Background Colors */
  --ghosttrap-bg-light: #f9f9f9;
  --ghosttrap-bg-white: #fff;
  --ghosttrap-border-light: #dcdcde;
}

/* =============================================================================
   Base Component Classes
   ============================================================================= */

/* GhostTrap Card Component */
.ghosttrap-card {
  background: var(--ghosttrap-bg-white);
  border: 1px solid var(--ghosttrap-border-light);
  border-radius: var(--ghosttrap-radius-md);
  padding: var(--ghosttrap-space-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow var(--ghosttrap-transition-fast);
  margin-bottom: var(--ghosttrap-space-md);
}

.ghosttrap-card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.ghosttrap-card h2 {
  margin-top: 0;
  border-bottom: 1px solid var(--ghosttrap-border-light);
  padding-bottom: var(--ghosttrap-space-sm);
  margin-bottom: var(--ghosttrap-space-md);
  color: #23282d;
  font-size: 1.3em;
}

/* Protection Status Indicator System */
.ghosttrap-status-indicator {
  font-weight: 600;
  font-size: var(--ghosttrap-font-medium);
  display: inline-flex;
  align-items: center;
  gap: var(--ghosttrap-space-xs);
}

.ghosttrap-status-indicator.ghosttrap-active {
  color: var(--ghosttrap-active);
}

.ghosttrap-status-indicator.ghosttrap-blocked {
  color: var(--ghosttrap-blocked);
}

.ghosttrap-status-indicator.ghosttrap-inactive {
  color: var(--ghosttrap-inactive);
}

/* Button Enhancements */
.ghosttrap-button-primary {
  background: var(--ghosttrap-primary);
  border-color: var(--ghosttrap-primary);
  color: white;
  font-weight: 500;
  transition: all var(--ghosttrap-transition-fast);
  border-radius: var(--ghosttrap-radius-sm);
}

.ghosttrap-button-primary:hover {
  background: #1e5a8a;
  border-color: #1e5a8a;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(34, 113, 177, 0.3);
  color: white;
}

/* =============================================================================
   Pure CSS Animated Toggle Switch
   ============================================================================= */

.ghosttrap-toggle-wrapper {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.ghosttrap-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.ghosttrap-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--ghosttrap-inactive);
  border-radius: 24px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.ghosttrap-toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.ghosttrap-toggle-input:checked+.ghosttrap-toggle-slider {
  background-color: var(--ghosttrap-primary);
  box-shadow: inset 0 1px 3px rgba(34, 113, 177, 0.2);
}

.ghosttrap-toggle-input:checked+.ghosttrap-toggle-slider:before {
  transform: translateX(26px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.ghosttrap-toggle-input:focus+.ghosttrap-toggle-slider {
  box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.3);
}

/* Hover effects for better interaction feedback */
.ghosttrap-toggle-wrapper:hover .ghosttrap-toggle-slider:before {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* =============================================================================
   Dashboard Hero Component
   ============================================================================= */

.ghosttrap-hero {
  background: linear-gradient(135deg, var(--ghosttrap-primary) 0%, #1e5a8a 100%);
  color: white;
  padding: var(--ghosttrap-space-sm) var(--ghosttrap-space-sm);
  border-radius: var(--ghosttrap-radius-lg);
  margin-bottom: var(--ghosttrap-space-lg);
  position: relative;
  overflow: hidden;
  min-height: 80px;
}

.ghosttrap-hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
}

.ghosttrap-hero-branding {
  display: flex;
  align-items: center;
  gap: var(--ghosttrap-space-md);
  width: 100%;
}

.ghosttrap-hero-logo {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.ghosttrap-hero-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ghosttrap-space-xs);
}

.ghosttrap-hero-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 2.0em;
  margin: 0;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  line-height: 1.2;
}

.ghosttrap-hero-subtitle {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 1.1em;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  line-height: 1.4;
}

/* =============================================================================
   Settings Page Components
   ============================================================================= */

.ghosttrap-settings-container {
  max-width: 800px;
}

.ghosttrap-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--ghosttrap-space-md);
  margin-bottom: var(--ghosttrap-space-lg);
}

.ghosttrap-setting-item {
  display: flex;
  align-items: flex-start;
  gap: var(--ghosttrap-space-md);
  padding: var(--ghosttrap-space-md) 0;
}

.ghosttrap-setting-content {
  flex: 1;
}

.ghosttrap-setting-label {
  font-weight: 600;
  font-size: var(--ghosttrap-font-medium);
  margin: 0 0 var(--ghosttrap-space-xs) 0;
  color: #23282d;
  cursor: pointer;
  display: block;
}

.ghosttrap-setting-description {
  color: #646970;
  font-size: var(--ghosttrap-font-small);
  line-height: 1.5;
  margin: 0;
}

/* Timing Threshold Special Styling */
.ghosttrap-timing-input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--ghosttrap-space-sm);
  margin: var(--ghosttrap-space-sm) 0;
}

.ghosttrap-timing-input {
  width: 80px;
  padding: var(--ghosttrap-space-xs) var(--ghosttrap-space-sm);
  border: 1px solid var(--ghosttrap-border-light);
  border-radius: var(--ghosttrap-radius-sm);
  font-size: var(--ghosttrap-font-normal);
}

.ghosttrap-timing-unit {
  color: #646970;
  font-weight: 500;
}

.ghosttrap-timing-recommendations {
  margin-top: var(--ghosttrap-space-sm);
  padding: var(--ghosttrap-space-sm);
  background: var(--ghosttrap-bg-light);
  border-radius: var(--ghosttrap-radius-sm);
  font-size: var(--ghosttrap-font-small);
}

.ghosttrap-timing-recommendations strong {
  color: var(--ghosttrap-primary);
}

/* =============================================================================
   Statistics Display Components - Hero Banner Style Layout
   ============================================================================= */

.ghosttrap-stats-highlight {
  display: flex;
  align-items: center;
  gap: var(--ghosttrap-space-md);
  padding: var(--ghosttrap-space-sm);
  background: var(--ghosttrap-highlight);
  border-radius: var(--ghosttrap-radius-md);
  margin-bottom: var(--ghosttrap-space-lg);
}

.ghosttrap-stats-number {
  flex-shrink: 0;
  font-size: 3em;
  font-weight: 700;
  color: var(--ghosttrap-blocked);
  margin: 0;
  text-shadow: 0 1px 2px rgba(214, 54, 56, 0.1);
  line-height: 1;
  background-color: #ffffff;
  padding: var(--ghosttrap-space-xs);
  border-radius: var(--ghosttrap-space-xs);
}

.ghosttrap-stats-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ghosttrap-space-xs);
}

.ghosttrap-stats-label {
  font-size: var(--ghosttrap-font-large);
  color: #23282d;
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
}

.ghosttrap-stats-description {
  color: #646970;
  font-size: var(--ghosttrap-font-normal);
  margin: 0;
  line-height: 1.4;
}

/* =============================================================================
   Information Panels
   ============================================================================= */

.ghosttrap-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--ghosttrap-space-md);
}

.ghosttrap-feature-list {
  list-style: none;
  padding: 0;
  margin: var(--ghosttrap-space-md) 0;
}

.ghosttrap-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--ghosttrap-space-sm);
  padding: var(--ghosttrap-space-xs) 0;
  color: #646970;
  font-size: var(--ghosttrap-font-normal);
}

.ghosttrap-feature-list li:before {
  content: "✓";
  color: var(--ghosttrap-active);
  font-weight: bold;
  font-size: var(--ghosttrap-font-medium);
  flex-shrink: 0;
}

/* =============================================================================
   Tools Section
   ============================================================================= */

.ghosttrap-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--ghosttrap-space-md);
}

.ghosttrap-tool-item {
  padding: var(--ghosttrap-space-md);
  border: 1px solid var(--ghosttrap-border-light);
  border-radius: var(--ghosttrap-radius-md);
  text-align: center;
  transition: all var(--ghosttrap-transition-fast);
}

.ghosttrap-tool-item:hover {
  border-color: var(--ghosttrap-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(34, 113, 177, 0.1);
}

.ghosttrap-tool-icon {
  font-size: 2em;
  margin-bottom: var(--ghosttrap-space-sm);
  color: var(--ghosttrap-primary);
}

/* =============================================================================
   Responsive Design
   ============================================================================= */

@media (max-width: 768px) {
  .ghosttrap-hero {
    padding: var(--ghosttrap-space-md) var(--ghosttrap-space-lg);
  }

  .ghosttrap-hero-branding {
    gap: var(--ghosttrap-space-sm);
  }

  .ghosttrap-hero-logo {
    width: 60px;
    height: 60px;
  }

  .ghosttrap-hero-title {
    font-size: 1.6em;
  }

  .ghosttrap-hero-subtitle {
    font-size: 1em;
  }

  .ghosttrap-settings-grid {
    grid-template-columns: 1fr;
  }

  .ghosttrap-stats-highlight {
    flex-direction: column;
    text-align: center;
    gap: var(--ghosttrap-space-sm);
  }

  .ghosttrap-stats-number {
    font-size: 2.5em;
  }
}

@media (max-width: 600px) {
  .ghosttrap-hero {
    padding: var(--ghosttrap-space-md);
    min-height: auto;
  }

  .ghosttrap-hero-branding {
    flex-direction: column;
    text-align: center;
    gap: var(--ghosttrap-space-sm);
  }

  .ghosttrap-hero-text {
    align-items: center;
  }

  .ghosttrap-tools-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   WordPress Admin Integration
   ============================================================================= */

/* Ensure proper integration with WordPress admin styles */
.ghosttrap-admin-wrapper {
  margin: 0 20px 0 0;
  max-width: 800px;
}

.ghosttrap-admin-wrapper .notice {
  margin: 5px 0 15px;
}

/* Override WordPress defaults where needed */
.ghosttrap-card .form-table th {
  padding-left: 0;
}

.ghosttrap-card .form-table td {
  padding-left: 0;
}


/* =============================================================================
   Card State Variants (for Review/Donation Cards)
   ============================================================================= */

.ghosttrap-card--success {
  border-left: 4px solid var(--ghosttrap-success);
  background: #f6ffed;
}

.ghosttrap-card--info {
  border-left: 4px solid var(--ghosttrap-primary);
  background: #f0f6fc;
}

/* =============================================================================
   Icon Utilities (for Dashicons spacing and coloring)
   ============================================================================= */

.ghosttrap-icon {
  margin-right: var(--ghosttrap-space-sm);
}

.ghosttrap-icon--success {
  color: var(--ghosttrap-success);
}

.ghosttrap-icon--primary {
  color: var(--ghosttrap-primary);
}

/* =============================================================================
   Button and Form Utilities
   ============================================================================= */

.ghosttrap-button-group {
  margin: 15px 0;
}

.ghosttrap-button-spaced {
  margin-right: 10px;
}

.ghosttrap-form-inline {
  display: inline;
}

/* =============================================================================
   Typography Utilities
   ============================================================================= */

.ghosttrap-text-small {
  font-size: var(--ghosttrap-font-small);
  color: #646970;
}

.ghosttrap-text-meta {
  margin: 8px 0 0 0;
  font-size: var(--ghosttrap-font-small);
  color: #646970;
}

.ghosttrap-text-attribution {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--ghosttrap-border-light);
  font-size: var(--ghosttrap-font-normal);
  color: #646970;
}

.ghosttrap-tool-description {
  margin-top: var(--ghosttrap-space-sm);
  font-size: var(--ghosttrap-font-small);
  color: #646970;
}

/* =============================================================================
   Additional Utility Classes for Remaining Inline Styles
   ============================================================================= */

.ghosttrap-card--info {
  border-left: 4px solid var(--ghosttrap-primary);
  background: #f0f6fc;
}

.ghosttrap-card--spaced {
  margin-top: 24px;
}

.ghosttrap-link-spaced {
  margin-left: var(--ghosttrap-space-sm);
}

.ghosttrap-link-primary {
  color: var(--ghosttrap-primary);
}

.ghosttrap-text-warning {
  color: var(--ghosttrap-error);
}

/* =============================================================================
   Minimal Additional Classes for ghosttrap-info.php
   ============================================================================= */

.ghosttrap-notice-flex {
  display: flex;
  align-items: center;
  padding: 5px 0;
}

.ghosttrap-notice-large {
  margin: 10px 0;
}

.ghosttrap-icon--large {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  flex-shrink: 0;
}

.ghosttrap-icon--medium {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* =============================================================================
   Complete Utility Classes for ghosttrap-info.php (Zero Inline Styles)
   ============================================================================= */

.ghosttrap-notice-badge {
  background: var(--ghosttrap-error);
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  margin-left: var(--ghosttrap-space-sm);
  font-size: 11px;
  font-weight: bold;
}

.ghosttrap-button-spaced-large {
  margin-left: 15px;
}

.ghosttrap-text-no-margin {
  margin: 0;
  font-size: var(--ghosttrap-font-medium);
}

.ghosttrap-text-meta-spaced {
  margin: 5px 0 0 0;
  font-size: var(--ghosttrap-font-normal);
  color: #646970;
}

.ghosttrap-icon--admin-bar {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 6px;
}

/* =============================================================================
   From ghosttrap-form.js
   ============================================================================= */

.ghosttrap-screen-options {
  padding: 8px 0;
}