/**
 * NSM Idol Live Theme - Plugins Integration Layer
 * 
 * Purpose: Đảm bảo tất cả plugin NSM tương thích với theme mới
 * Migration: agencyio/agencyup → nsm-idol-live-theme
 * 
 * @package NSM_Idol_Live_Theme
 * @since 1.0.0
 */

/* ==========================================================================
   CSS VARIABLES MAPPING - Agencyio → NSM Idol Live Theme
   ========================================================================== */

/**
 * Plugins hiện tại sử dụng biến --nsm-* từ agencyio theme.
 * Theme mới sử dụng biến --neon-* và --bg-dark.
 * Layer này map lại các biến để plugins hoạt động với theme mới.
 */

:root {
  /* ===== COLOR MAPPING ===== */

  /* ===== COLOR MAPPING ===== */

  /* Primary Accent Colors - Map từ agencyio sang neon theme */
  --nsm-accent: var(--neon-pink);
  --nsm-accent-secondary: var(--neon-pink);
  --nsm-accent-tertiary: var(--neon-purple);
  --nsm-accent-quaternary: var(--neon-aqua);
  --nsm-accent-success: var(--neon-green);
  --nsm-accent-warning: var(--neon-yellow);
  --nsm-accent-danger: #FF3B30;
  /* Specific red, not directly mapped to a neon color */

  /* RGB Values for rgba() usage */
  --nsm-accent-rgb: 255, 47, 212;
  --nsm-accent-secondary-rgb: 224, 0, 90;
  /* Darker pink, keep as is for now */
  --nsm-accent-tertiary-rgb: 176, 38, 255;
  --nsm-accent-quaternary-rgb: 0, 255, 255;
  --nsm-accent-success-rgb: 57, 255, 20;
  --nsm-accent-warning-rgb: 255, 214, 0;
  --nsm-accent-danger-rgb: 255, 59, 48;

  /* Background Colors - Map sang dark theme */
  --nsm-bg-primary: var(--bg-dark-secondary);
  --nsm-bg-secondary: var(--bg-dark-tertiary);
  --nsm-bg-dark: var(--bg-dark);
  --nsm-bg-darker: #050007;
  /* Keep as is for now */

  /* Surface Colors - For cards and panels */
  --nsm-surface: var(--bg-dark-secondary);
  /* Using theme's dark secondary background */
  --nsm-surface-secondary: var(--bg-dark-tertiary);
  /* Using theme's dark tertiary background */
  --nsm-surface-tertiary: rgba(45, 27, 78, 0.6);
  /* Keep as is for now */

  /* Text Colors - Light text for dark backgrounds */
  --nsm-text-primary: var(--text-primary);
  --nsm-text-secondary: var(--text-secondary);
  --nsm-text-muted: var(--text-muted);
  --nsm-text-light: var(--text-primary);
  --nsm-text-inverse: var(--bg-dark);
  --nsm-text-accent: var(--neon-pink);

  /* Gradient Backgrounds */
  --nsm-gradient-primary: var(--gradient-primary);
  --nsm-gradient-secondary: var(--gradient-secondary);
  --nsm-gradient-dark: var(--bg-gradient);

  /* Border & Shadows */
  --nsm-border: rgba(255, 47, 212, 0.2);
  --nsm-border-light: rgba(255, 47, 212, 0.1);
  --nsm-border-accent: rgba(255, 47, 212, 0.4);

  /* Shadows with neon glow */
  --nsm-shadow-sm: var(--shadow-card);
  /* Using theme's shadow variable */
  --nsm-shadow-md: var(--shadow-card);
  /* Using theme's shadow variable */
  --nsm-shadow-lg: var(--shadow-card);
  /* Using theme's shadow variable */
  --nsm-shadow-xl: var(--shadow-card);
  /* Using theme's shadow variable */
  --nsm-shadow-glow: var(--glow-pink);

  /* Border Radius - Keep same as agencyio */
  --nsm-radius-sm: var(--radius-sm);
  --nsm-radius-md: var(--radius-md);
  --nsm-radius-lg: var(--radius-lg);
  --nsm-radius-xl: var(--radius-xl);
  --nsm-radius-2xl: var(--radius-xl);
  /* Mapping to theme's largest radius */
  --nsm-radius-full: var(--radius-full);

  /* Transitions */
  --nsm-transition-fast: var(--transition-fast);
  --nsm-transition-base: var(--transition-base);
  --nsm-transition-slow: var(--transition-slow);

  /* Typography - Map to theme fonts */
  --nsm-font-primary: 'Inter', sans-serif;
  --nsm-font-heading: 'Poppins', sans-serif;

  /* Form Elements */
  --nsm-input-bg: var(--bg-dark-rgba-60);
  --nsm-input-border: var(--neon-pink-rgba-20);
  --nsm-input-focus: var(--neon-pink);
}

/* ==========================================================================
   PLUGIN SURFACES - Dark Theme Adaptation
   ========================================================================== */

/* Generic plugin surfaces */
.nsm-wrap,
.nsm-admin-container,
.nsm-dashboard,
.nsm-plugin-surface,
.nsm-card-surface,
.nsm-section-surface,
.wrap.nsm-wrap {
  background: var(--bg-dark-rgba-80);
  color: var(--text-secondary);
  border-radius: var(--nsm-radius-lg);
  box-shadow: var(--nsm-shadow-md);
  border: 1px solid var(--neon-pink-rgba-20);
  backdrop-filter: blur(10px);
  padding: 20px;
  margin-bottom: 20px;
}

/* Cards with neon glow effect */
.nsm-card,
.nsm-stat-card,
.nsm-video-card,
.nsm-metric-card,
.nsm-overview-card,
.nsm-widget-card {
  background: var(--bg-dark-rgba-80);
  border-radius: var(--nsm-radius-lg);
  border: 1px solid var(--neon-pink-rgba-20);
  box-shadow: var(--nsm-shadow-md);
  backdrop-filter: blur(10px);
  transition: all var(--nsm-transition-base);
}

.nsm-card:hover,
.nsm-stat-card:hover,
.nsm-video-card:hover,
.nsm-metric-card:hover,
.nsm-widget-card:hover {
  transform: translateY(-5px);
  border-color: var(--neon-pink);
  box-shadow: var(--glow-pink), var(--nsm-shadow-lg);
}

/* Grid layouts */
.nsm-grid,
.nsm-card-grid,
.nsm-stats-grid,
.nsm-section-grid,
.nsm-video-data-grid,
.nsm-dashboard-grid,
.nsm-flex-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ==========================================================================
   TYPOGRAPHY - Light text for dark theme
   ========================================================================== */

.nsm-wrap h1,
.nsm-wrap h2,
.nsm-wrap h3,
.nsm-wrap h4,
.nsm-wrap h5,
.nsm-wrap h6,
.nsm-headline,
.nsm-section-title {
  font-family: var(--nsm-font-heading);
  font-weight: 700;
  color: var(--text-primary, #FFFFFF);
  text-shadow: 0 0 10px rgba(255, 47, 212, 0.3);
}

.nsm-subtitle,
.nsm-muted,
.nsm-meta {
  color: var(--text-muted, #A0A0A0);
}

/* ==========================================================================
   BUTTONS - Neon style
   ========================================================================== */

.nsm-btn,
.button-nsm-primary,
.button.nsm-btn,
.nsm-action-buttons .button,
.nsm-btn-primary {
  background: var(--gradient-primary);
  border: none;
  color: var(--text-primary);
  border-radius: var(--radius-full);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  transition: all var(--nsm-transition-base);
  box-shadow: var(--glow-pink);
  cursor: pointer;
}

.nsm-btn:hover,
.button-nsm-primary:hover,
.button.nsm-btn:hover,
.nsm-action-buttons .button:hover,
.nsm-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px var(--neon-pink-rgba-80), 0 0 60px var(--neon-pink-rgba-50);
}

.nsm-btn-secondary,
.nsm-btn-neutral {
  background: var(--bg-dark-rgba-80);
  color: var(--text-primary);
  border: 1px solid var(--neon-pink-rgba-30);
}

.nsm-btn-secondary:hover,
.nsm-btn-neutral:hover {
  background: rgba(45, 27, 78, 0.8);
  border-color: var(--neon-pink);
}

/* ==========================================================================
   FORMS - Dark theme inputs
   ========================================================================== */

.nsm-input,
.nsm-select,
.nsm-textarea,
.nsm-form-control,
.nsm-ctv-search-input,
.nsm-filter-input,
.nsm-table input[type="text"],
.nsm-table input[type="number"],
.nsm-table select,
.nsm-table textarea {
  background: var(--bg-dark-rgba-60);
  border: 1px solid var(--neon-pink-rgba-20);
  border-radius: var(--nsm-radius-md);
  color: var(--text-primary);
  padding: 10px 14px;
  transition: all var(--nsm-transition-fast);
}

.nsm-input:focus,
.nsm-select:focus,
.nsm-textarea:focus,
.nsm-form-control:focus,
.nsm-table input[type="text"]:focus,
.nsm-table input[type="number"]:focus,
.nsm-table select:focus,
.nsm-table textarea:focus {
  border-color: var(--neon-pink);
  box-shadow: 0 0 0 3px var(--neon-pink-rgba-20), var(--glow-pink);
  outline: none;
  background: var(--bg-dark-rgba-80);
}

.nsm-input::placeholder,
.nsm-textarea::placeholder {
  color: var(--text-muted);
}

/* ==========================================================================
   TABLES - Dark theme styling
   ========================================================================== */

.nsm-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--nsm-radius-lg);
  box-shadow: var(--nsm-shadow-md);
  background: var(--bg-dark-rgba-80);
  backdrop-filter: blur(10px);
}

.nsm-table {
  width: 100%;
  border-collapse: collapse;
}

.nsm-table th {
  background: var(--bg-dark-tertiary-rgba-80);
  color: var(--text-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 16px;
  border-bottom: 2px solid var(--neon-pink-rgba-30);
}

.nsm-table td {
  color: var(--text-secondary);
  padding: 12px 16px;
  border-bottom: 1px solid var(--neon-pink-rgba-10);
}

.nsm-table tbody tr:hover {
  background: var(--bg-dark-tertiary-rgba-50);
}

/* ==========================================================================
   STATUS BADGES - Neon style
   ========================================================================== */

.nsm-badge,
.nsm-status-pill,
.nsm-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: var(--neon-pink-rgba-15);
  color: var(--neon-pink);
  border: 1px solid var(--neon-pink-rgba-30);
}

.nsm-badge--success,
.nsm-status-success {
  background: var(--neon-green-rgba-15);
  color: var(--neon-green);
  border-color: var(--neon-green-rgba-30);
}

.nsm-badge--warning,
.nsm-status-warning {
  background: var(--neon-yellow-rgba-15);
  color: var(--neon-yellow);
  border-color: var(--neon-yellow-rgba-30);
}

.nsm-badge--danger,
.nsm-status-danger {
  background: var(--neon-red-rgba-15);
  color: var(--neon-red);
  border-color: var(--neon-red-rgba-30);
}

/* ==========================================================================
   WP ADMIN SPECIFIC - Dark theme for admin pages
   ========================================================================== */

/* Admin pages with NSM plugins */
body[class*="nsm-payroll"],
body[class*="nsm-tiktok"],
body[class*="toplevel_page_nsm"] {
  background: var(--bg-dark);
}

body[class*="nsm-payroll"] .wrap,
body[class*="nsm-tiktok"] .wrap,
body[class*="toplevel_page_nsm"] .wrap {
  background: transparent;
}

/* WP List Tables - Dark theme */
body[class*="nsm-payroll"] .wp-list-table,
body[class*="nsm-tiktok"] .wp-list-table,
body[class*="toplevel_page_nsm"] .wp-list-table {
  background: var(--bg-dark-rgba-80);
  border: 1px solid var(--neon-pink-rgba-20);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
}

body[class*="nsm-payroll"] .wp-list-table th,
body[class*="nsm-tiktok"] .wp-list-table th,
body[class*="toplevel_page_nsm"] .wp-list-table th {
  background: var(--bg-dark-tertiary-rgba-80);
  color: var(--text-primary);
  border-bottom: 2px solid var(--neon-pink-rgba-30);
}

body[class*="nsm-payroll"] .wp-list-table td,
body[class*="nsm-tiktok"] .wp-list-table td,
body[class*="toplevel_page_nsm"] .wp-list-table td {
  color: var(--text-secondary);
  border-bottom: 1px solid var(--neon-pink-rgba-10);
}

body[class*="nsm-payroll"] .wp-list-table tbody tr:hover,
body[class*="nsm-tiktok"] .wp-list-table tbody tr:hover,
body[class*="toplevel_page_nsm"] .wp-list-table tbody tr:hover {
  background: var(--bg-dark-tertiary-rgba-50);
}

/* ==========================================================================
   RESPONSIVE - Mobile optimization
   ========================================================================== */

@media (max-width: 768px) {

  .nsm-table,
  .nsm-table th,
  .nsm-table td {
    font-size: 0.875rem;
    padding: 10px 12px;
  }

  .nsm-action-buttons {
    flex-wrap: wrap;
    gap: 8px;
  }

  .nsm-action-buttons .button,
  .nsm-action-buttons .nsm-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 560px) {

  .nsm-grid,
  .nsm-card-grid,
  .nsm-stats-grid,
  .nsm-section-grid,
  .nsm-video-data-grid,
  .nsm-dashboard-grid,
  .nsm-flex-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.nsm-shadow-glow {
  box-shadow: var(--glow-pink);
}

.nsm-rounded-xl {
  border-radius: var(--radius-xl);
}

.nsm-rounded-full {
  border-radius: var(--radius-full);
}

.nsm-bg-gradient {
  background: var(--gradient-primary);
  color: var(--text-primary);
}

.nsm-text-accent {
  color: var(--neon-pink);
  text-shadow: var(--glow-pink);
}

.nsm-text-secondary {
  color: var(--text-secondary);
}

.nsm-text-muted {
  color: var(--text-muted);
}

.nsm-neon-text {
  color: var(--neon-pink);
  text-shadow: var(--glow-pink);
  animation: neon-flicker 3s infinite alternate;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes neon-flicker {

  0%,
  100% {
    text-shadow: 0 0 10px rgba(255, 47, 212, 0.8),
      0 0 20px rgba(255, 47, 212, 0.6),
      0 0 30px rgba(255, 47, 212, 0.4);
  }

  50% {
    text-shadow: 0 0 20px rgba(255, 47, 212, 1),
      0 0 40px rgba(255, 47, 212, 0.8),
      0 0 60px rgba(255, 47, 212, 0.6);
  }
}