/**
 * Checkmate Modern Polish Stylesheet
 * Upgrading from 7.5/10 to 8/10 visual design
 * 
 * Key Improvements:
 * 1. Visual depth (soft shadows, elevation)
 * 2. Modern color palette
 * 3. Smooth animations
 * 4. Better spacing
 */

/* ============================================================================
   1. VISUAL DEPTH - Soft Shadows & Elevation
   ============================================================================ */

/* Card elevation system (inspired by Material Design 3 & iOS) */
.card-elevated {
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.card-elevated:hover {
  box-shadow: 
    0 10px 15px rgba(0, 0, 0, 0.1),
    0 4px 6px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
  border-color: rgba(0, 0, 0, 0.08);
}

/* Higher elevation for modals and floating elements */
.elevation-high {
  box-shadow: 
    0 20px 25px rgba(0, 0, 0, 0.1),
    0 10px 10px rgba(0, 0, 0, 0.04);
}

/* Button elevation */
.btn-elevated {
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.15s ease;
}

.btn-elevated:hover {
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.btn-elevated:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ============================================================================
   2. MODERN COLOR PALETTE - Softer, More Sophisticated
   ============================================================================ */

/* Override TailwindCSS blues with modern indigo/slate */
:root {
  /* Primary colors - softer indigo instead of bright blue */
  --primary-50: #eef2ff;
  --primary-100: #e0e7ff;
  --primary-200: #c7d2fe;
  --primary-300: #a5b4fc;
  --primary-400: #818cf8;
  --primary-500: #6366f1;  /* Main primary color */
  --primary-600: #4f46e5;
  --primary-700: #4338ca;
  --primary-800: #3730a3;
  --primary-900: #312e81;
  
  /* Neutral colors - warmer grays */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  
  /* Success - softer green */
  --success-50: #f0fdf4;
  --success-100: #dcfce7;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #15803d;
  
  /* Warning - softer amber */
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  
  /* Error - softer red */
  --error-50: #fef2f2;
  --error-100: #fee2e2;
  --error-500: #ef4444;
  --error-600: #dc2626;
}

/* Apply modern colors to common elements */
.bg-primary {
  background-color: var(--primary-600) !important;
}

.bg-primary:hover {
  background-color: var(--primary-700) !important;
}

.text-primary {
  color: var(--primary-600) !important;
}

.border-primary {
  border-color: var(--primary-200) !important;
}

/* ============================================================================
   3. SMOOTH ANIMATIONS & TRANSITIONS
   ============================================================================ */

/* Smooth transitions for all interactive elements */
.transition-smooth {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fade in animation for new content */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* Shimmer loading skeleton */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--gray-200) 0%,
    var(--gray-100) 50%,
    var(--gray-200) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
  border-radius: 8px;
}

.skeleton-text {
  height: 1rem;
  margin-bottom: 0.5rem;
}

.skeleton-title {
  height: 1.5rem;
  width: 60%;
  margin-bottom: 1rem;
}

/* Pulse for loading states */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ============================================================================
   4. IMPROVED SPACING & TYPOGRAPHY
   ============================================================================ */

/* Larger, softer rounded corners */
.rounded-modern {
  border-radius: 12px;
}

.rounded-modern-lg {
  border-radius: 16px;
}

.rounded-modern-xl {
  border-radius: 20px;
}

/* Better button padding */
.btn-modern {
  padding: 0.625rem 1.25rem;
  border-radius: 10px;
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
}

/* Card padding */
.card-padding {
  padding: 1.5rem;
}

/* ============================================================================
   5. STATUS BADGES - Softer, Modern Style
   ============================================================================ */

.badge-modern {
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.025em;
}

.badge-success {
  background-color: var(--success-100);
  color: var(--success-700);
}

.badge-warning {
  background-color: var(--warning-100);
  color: var(--warning-700);
}

.badge-error {
  background-color: var(--error-100);
  color: var(--error-700);
}

.badge-primary {
  background-color: var(--primary-100);
  color: var(--primary-700);
}

.badge-neutral {
  background-color: var(--gray-100);
  color: var(--gray-700);
}

/* ============================================================================
   6. TABLE IMPROVEMENTS
   ============================================================================ */

.table-modern tbody tr {
  transition: background-color 0.15s ease;
}

.table-modern tbody tr:hover {
  background-color: var(--gray-50);
}

.table-modern th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--gray-600);
  padding: 1rem 1.5rem;
}

.table-modern td {
  padding: 1rem 1.5rem;
}

/* ============================================================================
   7. FORM INPUTS - Modern, Clean Style
   ============================================================================ */

.input-modern {
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  padding: 0.625rem 1rem;
  transition: all 0.15s ease;
  background-color: white;
}

.input-modern:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.input-modern:hover {
  border-color: var(--gray-300);
}

/* ============================================================================
   8. TOOLTIP STYLES
   ============================================================================ */

.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}

.tooltip .tooltip-text {
  visibility: hidden;
  width: 240px;
  background-color: var(--gray-900);
  color: white;
  text-align: left;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  position: absolute;
  z-index: 1000;
  bottom: 125%;
  left: 50%;
  margin-left: -120px;
  opacity: 0;
  transition: opacity 0.2s ease;
  font-size: 0.875rem;
  line-height: 1.5;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--gray-900) transparent transparent transparent;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* ============================================================================
   9. EMPTY STATES - Better Visual Hierarchy
   ============================================================================ */

.empty-state {
  padding: 3rem 2rem;
  text-align: center;
  background-color: var(--gray-50);
  border-radius: 12px;
  border: 2px dashed var(--gray-200);
}

.empty-state-icon {
  font-size: 3rem;
  color: var(--gray-300);
  margin-bottom: 1rem;
}

.empty-state-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 0.5rem;
}

.empty-state-text {
  font-size: 0.9375rem;
  color: var(--gray-500);
  margin-bottom: 1.5rem;
}

/* ============================================================================
   10. NOTIFICATION TOAST - Modern Style
   ============================================================================ */

#notification {
  box-shadow: 
    0 20px 25px rgba(0, 0, 0, 0.1),
    0 10px 10px rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

/* ============================================================================
   11. METRIC CARDS - Enhanced Visual Appeal
   ============================================================================ */

.metric-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.metric-card:hover {
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.metric-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.metric-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.metric-trend {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

.metric-trend-up {
  color: var(--success-600);
}

.metric-trend-down {
  color: var(--error-600);
}

/* ============================================================================
   12. MODAL IMPROVEMENTS
   ============================================================================ */

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.modal-content {
  border-radius: 16px;
  box-shadow: 
    0 20px 25px rgba(0, 0, 0, 0.15),
    0 10px 10px rgba(0, 0, 0, 0.08);
}

/* ============================================================================
   13. HELPER CLASSES
   ============================================================================ */

/* Glassmorphism effect */
.glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Gradient backgrounds */
.gradient-primary {
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
}

.gradient-success {
  background: linear-gradient(135deg, var(--success-600) 0%, var(--success-700) 100%);
}

/* Text gradients */
.text-gradient {
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-800) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Focus ring - accessible and modern */
.focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-100);
  border-color: var(--primary-500);
}

/* Divider with softer style */
.divider-soft {
  border-color: var(--gray-100);
}

/* ============================================================================
   ADMIN CONFIGURATION TAB STYLES
   ============================================================================ */

.config-tab {
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  color: #6B7280;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.config-tab:hover {
  color: #374151;
  background-color: #F9FAFB;
}

.config-tab.active {
  color: #1F2937;
  border-bottom-color: #3B82F6;
  background-color: white;
  font-weight: 600;
}

.config-tab i {
  opacity: 0.7;
}

.config-tab.active i {
  opacity: 1;
}