/**
 * NSM TikTok Plugin - Dark Theme Override
 * 
 * Override light theme của plugin nsm-id-tiktok để tương thích với nsm-idol-live-theme
 * Chuyển toàn bộ giao diện CTV sang dark/neon theme
 * 
 * @package NSM_Idol_Live_Theme
 * @since 1.0.0
 */

/* ==========================================================================
   GLOBAL OVERRIDES - Dark Background
   ========================================================================== */

/* Override light backgrounds */
body[class*="nsm-tiktok"] .wrap,
body[class*="nsm-tiktok"] #wpbody-content .wrap {
  background: transparent !important;
  color: var(--text-primary) !important;
}

body[class*="nsm-tiktok"] #wpcontent {
  background: var(--bg-dark) !important;
}

/* Override soft surface variables to dark */
body[class*="nsm-tiktok"] {
  --nsm-soft-surface: var(--bg-dark-secondary) !important;
  --nsm-soft-surface-alt: var(--bg-dark-rgba-60) !important;
  --nsm-soft-border: var(--neon-pink) !important;
  --nsm-soft-shadow: var(--shadow-card) !important;
  --nsm-soft-heading: var(--text-primary) !important;
  --nsm-status-warm-text: var(--neon-yellow) !important;
  --nsm-status-emerald-text: var(--neon-green) !important;
}

/* ==========================================================================
   CARDS - Dark with Neon Borders
   ========================================================================== */

body[class*="nsm-tiktok"] .card,
body[class*="nsm-tiktok"] .notice,
body[class*="nsm-tiktok"] .widefat {
  background: var(--bg-dark-secondary) !important;
  border: 1px solid var(--neon-pink-rgba-20) !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: blur(10px) !important;
  color: var(--text-secondary) !important;
}

body[class*="nsm-tiktok"] .card:hover {
  border-color: var(--neon-pink) !important;
  box-shadow: var(--glow-pink), var(--shadow-card) !important;
}

/* Card headers */
body[class*="nsm-tiktok"] .card h2,
body[class*="nsm-tiktok"] .card h3 {
  background: var(--bg-dark-tertiary) !important;
  color: var(--text-primary) !important;
  border-bottom: 2px solid var(--neon-pink-rgba-30) !important;
  text-shadow: 0 0 10px var(--neon-pink-rgba-30) !important;
}

/* ==========================================================================
   WELCOME SECTION - Neon Style
   ========================================================================== */

body[class*="nsm-tiktok"] .nsm-welcome-section {
  background: var(--bg-dark-secondary) !important;
  border: 1px solid var(--neon-pink-rgba-20) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  backdrop-filter: blur(10px) !important;
}

body[class*="nsm-tiktok"] .nsm-welcome-section h2 {
  color: var(--neon-pink) !important;
  text-shadow: var(--glow-pink) !important;
  margin-bottom: 12px !important;
}

body[class*="nsm-tiktok"] .nsm-welcome-section p {
  color: var(--text-secondary) !important;
}

/* Notice boxes */
body[class*="nsm-tiktok"] .nsm-welcome-section p.notice {
  background: var(--neon-aqua-rgba-10) !important;
  border-left: 4px solid var(--neon-aqua) !important;
  color: var(--text-primary) !important;
}

/* ==========================================================================
   STAT CARDS - Neon Glow Effect
   ========================================================================== */

body[class*="nsm-tiktok"] .nsm-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

body[class*="nsm-tiktok"] .nsm-stat-card {
  background: var(--bg-dark-secondary) !important;
  border: 1px solid var(--neon-pink-rgba-20) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px !important;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all var(--transition-base) !important;
  backdrop-filter: blur(10px) !important;
}

body[class*="nsm-tiktok"] .nsm-stat-card:hover {
  transform: translateY(-5px) !important;
  border-color: var(--neon-pink) !important;
  box-shadow: var(--glow-pink), var(--shadow-card) !important;
}

body[class*="nsm-tiktok"] .nsm-stat-icon {
  font-size: 2.5rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--neon-pink-rgba-10) !important;
  border: 2px solid var(--neon-pink) !important;
  border-radius: 50% !important;
  box-shadow: var(--glow-pink) !important;
}

body[class*="nsm-tiktok"] .nsm-stat-content h3 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--neon-pink) !important;
  text-shadow: var(--glow-pink) !important;
  margin: 0 !important;
  line-height: 1 !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

body[class*="nsm-tiktok"] .nsm-stat-content p {
  color: var(--text-secondary) !important;
  margin: 4px 0 0 0 !important;
  font-size: 0.875rem;
}

/* ==========================================================================
   STATUS BADGES - Neon Colors
   ========================================================================== */

/* Override all status colors to neon theme */
body[class*="nsm-tiktok"] .status-new,
body[class*="nsm-tiktok"] .care-status-select.status-new,
body[class*="nsm-tiktok"] .creator-status.status-new {
  background: var(--text-muted-rgba-15) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--text-muted-rgba-30) !important;
}

body[class*="nsm-tiktok"] .status-sent,
body[class*="nsm-tiktok"] .care-status-select.status-sent,
body[class*="nsm-tiktok"] .creator-status.status-sent {
  background: var(--neon-purple-rgba-15) !important;
  color: var(--neon-purple) !important;
  border: 1px solid var(--neon-purple-rgba-30) !important;
}

body[class*="nsm-tiktok"] .status-nurturing,
body[class*="nsm-tiktok"] .care-status-select.status-nurturing,
body[class*="nsm-tiktok"] .creator-status.status-nurturing {
  background: var(--neon-aqua-rgba-15) !important;
  color: var(--neon-aqua) !important;
  border: 1px solid var(--neon-aqua-rgba-30) !important;
}

body[class*="nsm-tiktok"] .status-potential,
body[class*="nsm-tiktok"] .care-status-select.status-potential,
body[class*="nsm-tiktok"] .creator-status.status-potential {
  background: var(--neon-yellow-rgba-15) !important;
  color: var(--neon-yellow) !important;
  border: 1px solid var(--neon-yellow-rgba-30) !important;
}

body[class*="nsm-tiktok"] .status-joined,
body[class*="nsm-tiktok"] .care-status-select.status-joined,
body[class*="nsm-tiktok"] .creator-status.status-joined {
  background: var(--neon-green-rgba-15) !important;
  color: var(--neon-green) !important;
  border: 1px solid var(--neon-green-rgba-30) !important;
}

body[class*="nsm-tiktok"] .status-rejected,
body[class*="nsm-tiktok"] .care-status-select.status-rejected,
body[class*="nsm-tiktok"] .creator-status.status-rejected {
  background: var(--neon-red-rgba-15) !important;
  color: var(--neon-red) !important;
  border: 1px solid var(--neon-red-rgba-30) !important;
}

body[class*="nsm-tiktok"] .status-notfit,
body[class*="nsm-tiktok"] .care-status-select.status-notfit,
body[class*="nsm-tiktok"] .creator-status.status-notfit {
  background: var(--text-muted-rgba-10) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--text-muted-rgba-20) !important;
}

body[class*="nsm-tiktok"] .status-notfound,
body[class*="nsm-tiktok"] .care-status-select.status-notfound,
body[class*="nsm-tiktok"] .creator-status.status-notfound {
  background: var(--neon-pink-rgba-15) !important;
  color: var(--neon-pink) !important;
  border: 1px solid var(--neon-pink-rgba-30) !important;
}

/* ==========================================================================
   STATUS OVERVIEW SECTION
   ========================================================================== */

body[class*="nsm-tiktok"] .nsm-status-overview {
  background: var(--bg-dark-rgba-80) !important;
  border: 1px solid var(--neon-pink-rgba-20) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  backdrop-filter: blur(10px) !important;
}

body[class*="nsm-tiktok"] .nsm-status-overview h3 {
  color: var(--text-primary, #FFFFFF) !important;
  margin-bottom: 16px !important;
  text-shadow: 0 0 10px var(--neon-pink-rgba-30) !important;
}

body[class*="nsm-tiktok"] .nsm-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

body[class*="nsm-tiktok"] .nsm-status-item {
  padding: 12px;
  background: var(--bg-dark-rgba-60);
  border: 1px solid var(--neon-pink-rgba-10);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all var(--transition-fast);
}

body[class*="nsm-tiktok"] .nsm-status-item:hover {
  border-color: var(--neon-pink, #FF2FD4);
  transform: translateY(-2px);
}

body[class*="nsm-tiktok"] .nsm-status-badge {
  padding: 4px 10px !important;
  border-radius: var(--radius-full) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body[class*="nsm-tiktok"] .nsm-status-count {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--neon-pink, #FF2FD4);
  text-shadow: var(--glow-pink);
}

/* ==========================================================================
   TABLES - Dark Theme
   ========================================================================== */

body[class*="nsm-tiktok"] .wp-list-table {
  background: var(--bg-dark-secondary) !important;
  border: 1px solid var(--neon-pink-rgba-20) !important;
  border-radius: var(--radius-lg) !important;
  backdrop-filter: blur(10px) !important;
}

body[class*="nsm-tiktok"] .wp-list-table thead th {
  background: var(--bg-dark-tertiary) !important;
  color: var(--text-primary) !important;
  border-bottom: 2px solid var(--neon-pink-rgba-30) !important;
  text-shadow: 0 0 10px var(--neon-pink-rgba-20) !important;
}

body[class*="nsm-tiktok"] .wp-list-table tbody tr {
  background: transparent !important;
  border-bottom: 1px solid var(--neon-pink-rgba-10) !important;
}

body[class*="nsm-tiktok"] .wp-list-table tbody tr:hover {
  background: var(--bg-dark-tertiary-rgba-50) !important;
  box-shadow: inset 0 0 20px var(--neon-pink-rgba-10) !important;
}

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

body[class*="nsm-tiktok"] .wp-list-table tbody td strong {
  color: var(--text-primary) !important;
}

/* ==========================================================================
   BUTTONS - Neon Style
   ========================================================================== */

body[class*="nsm-tiktok"] .button,
body[class*="nsm-tiktok"] .button-secondary {
  background: var(--bg-dark-secondary) !important;
  border: 1px solid rgba(255, 47, 212, 0.3) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-full) !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  transition: all var(--transition-base) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

body[class*="nsm-tiktok"] .button:hover,
body[class*="nsm-tiktok"] .button-secondary:hover {
  background: var(--bg-dark-tertiary) !important;
  border-color: var(--neon-pink) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--glow-pink), 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

body[class*="nsm-tiktok"] .button-primary {
  background: var(--gradient-primary) !important;
  border: none !important;
  color: var(--text-primary) !important;
  box-shadow: var(--glow-pink) !important;
}

body[class*="nsm-tiktok"] .button-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 30px rgba(255, 47, 212, 0.8), 0 0 60px rgba(255, 47, 212, 0.5) !important;
}

/* ==========================================================================
   FORMS - Dark Inputs
   ========================================================================== */

body[class*="nsm-tiktok"] input[type="text"],
body[class*="nsm-tiktok"] input[type="email"],
body[class*="nsm-tiktok"] input[type="search"],
body[class*="nsm-tiktok"] input[type="number"],
body[class*="nsm-tiktok"] textarea,
body[class*="nsm-tiktok"] select {
  background: rgba(11, 0, 20, 0.6) !important;
  border: 1px solid rgba(255, 47, 212, 0.2) !important;
  color: var(--text-primary, #FFFFFF) !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 14px !important;
  transition: all var(--transition-fast) !important;
}

body[class*="nsm-tiktok"] input::placeholder,
body[class*="nsm-tiktok"] textarea::placeholder {
  color: var(--text-muted, #A0A0A0) !important;
}

body[class*="nsm-tiktok"] input:focus,
body[class*="nsm-tiktok"] textarea:focus,
body[class*="nsm-tiktok"] select:focus {
  border-color: var(--neon-pink, #FF2FD4) !important;
  box-shadow: 0 0 0 3px rgba(255, 47, 212, 0.2), var(--glow-pink) !important;
  outline: none !important;
  background: rgba(11, 0, 20, 0.8) !important;
}

/* ==========================================================================
   NAVIGATION TABS - Neon Style
   ========================================================================== */

body[class*="nsm-tiktok"] .nav-tab-wrapper {
  border-bottom: 2px solid var(--neon-pink-rgba-20) !important;
  background: transparent !important;
}

body[class*="nsm-tiktok"] .nav-tab {
  background: var(--bg-dark-rgba-60) !important;
  border: 1px solid var(--neon-pink-rgba-20) !important;
  color: var(--text-secondary, #E0E0E0) !important;
  transition: all var(--transition-fast) !important;
}

body[class*="nsm-tiktok"] .nav-tab:hover {
  background: var(--bg-dark-tertiary-rgba-80) !important;
  color: var(--text-primary, #FFFFFF) !important;
  border-color: var(--neon-pink, #FF2FD4) !important;
}

body[class*="nsm-tiktok"] .nav-tab-active {
  background: var(--bg-dark-rgba-80) !important;
  border-color: var(--neon-pink, #FF2FD4) !important;
  color: var(--neon-pink, #FF2FD4) !important;
  box-shadow: var(--glow-pink) !important;
  text-shadow: 0 0 10px var(--neon-pink-rgba-50) !important;
}

/* ==========================================================================
   RECENT ACTIVITY SECTION
   ========================================================================== */

body[class*="nsm-tiktok"] .nsm-recent-activity {
  background: var(--bg-dark-rgba-80) !important;
  border: 1px solid var(--neon-pink-rgba-20) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px !important;
  backdrop-filter: blur(10px) !important;
}

body[class*="nsm-tiktok"] .nsm-recent-activity h3 {
  color: var(--text-primary, #FFFFFF) !important;
  margin-bottom: 16px !important;
  text-shadow: 0 0 10px var(--neon-pink-rgba-30) !important;
}

body[class*="nsm-tiktok"] .nsm-activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body[class*="nsm-tiktok"] .nsm-activity-item {
  padding: 12px;
  background: var(--bg-dark-rgba-60);
  border: 1px solid var(--neon-pink-rgba-10);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all var(--transition-fast);
}

body[class*="nsm-tiktok"] .nsm-activity-item:hover {
  border-color: var(--neon-pink, #FF2FD4);
  transform: translateX(5px);
  box-shadow: 0 0 20px var(--neon-pink-rgba-20);
}

body[class*="nsm-tiktok"] .nsm-activity-item strong {
  color: var(--neon-aqua, #00FFFF) !important;
}

body[class*="nsm-tiktok"] .nsm-activity-item small {
  color: var(--text-muted, #A0A0A0) !important;
}

/* ==========================================================================
   ROLE BADGES
   ========================================================================== */

body[class*="nsm-tiktok"] .nsm-ctv-role-info,
body[class*="nsm-tiktok"] [style*="display: flex"][style*="align-items: center"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body[class*="nsm-tiktok"] .nsm-badge,
body[class*="nsm-tiktok"] [style*="background: #7c3aed"] {
  background: var(--gradient-primary) !important;
  color: var(--text-primary, #FFFFFF) !important;
  padding: 6px 12px !important;
  border-radius: var(--radius-full) !important;
  font-weight: 600 !important;
  box-shadow: var(--glow-pink) !important;
  border: none !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  body[class*="nsm-tiktok"] .nsm-stats-grid {
    grid-template-columns: 1fr;
  }
  
  body[class*="nsm-tiktok"] .nsm-status-grid {
    grid-template-columns: 1fr;
  }
  
  body[class*="nsm-tiktok"] .wp-list-table {
    font-size: 0.875rem;
  }
}

/* ==========================================================================
   MISC OVERRIDES
   ========================================================================== */

/* Override any remaining light backgrounds */
body[class*="nsm-tiktok"] .postbox,
body[class*="nsm-tiktok"] .stuffbox {
  background: var(--bg-dark-rgba-80) !important;
  border: 1px solid var(--neon-pink-rgba-20) !important;
  color: var(--text-secondary, #E0E0E0) !important;
}

body[class*="nsm-tiktok"] .postbox h2,
body[class*="nsm-tiktok"] .postbox h3 {
  background: var(--bg-dark-tertiary-rgba-80) !important;
  color: var(--text-primary, #FFFFFF) !important;
  border-bottom: 2px solid var(--neon-pink-rgba-30) !important;
}

/* Links */
body[class*="nsm-tiktok"] a {
  color: var(--neon-aqua, #00FFFF) !important;
  transition: all var(--transition-fast);
}

body[class*="nsm-tiktok"] a:hover {
  color: var(--neon-pink, #FF2FD4) !important;
  text-shadow: 0 0 10px rgba(255, 47, 212, 0.5) !important;
}

/* Headings */
body[class*="nsm-tiktok"] h1,
body[class*="nsm-tiktok"] h2,
body[class*="nsm-tiktok"] h3,
body[class*="nsm-tiktok"] h4 {
  color: var(--text-primary, #FFFFFF) !important;
}

/* Paragraphs */
body[class*="nsm-tiktok"] p {
  color: var(--text-secondary, #E0E0E0) !important;
}

/* Labels */
body[class*="nsm-tiktok"] label {
  color: var(--text-secondary, #E0E0E0) !important;
  font-weight: 500 !important;
}

/* Description text */
body[class*="nsm-tiktok"] .description {
  color: var(--text-muted, #A0A0A0) !important;
}