/**
 * Modern Theme Enhancements v2.0.0 - SAFE VERSION
 * Last Updated: 2025-12-29
 *
 * STRATEGY: Only add visual enhancements (colors, shadows, border-radius)
 * DO NOT override layout properties (width, height, display, position, margin, padding)
 */

/* =========================================
   CSS VARIABLES
   ========================================= */

:root {
  /* Gradients */
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --accent-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.15);

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;

  /* Transitions */
  --transition: 0.3s ease;
}

/* Dark Theme */
body.dark-theme {
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.5);
}


/* =========================================
   CARDS - ONLY ADD SHADOWS & RADIUS
   ========================================= */

/* Add shadow to manga cards - DON'T touch sizing */
article.item {
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition);
}

article.item:hover {
  box-shadow: var(--shadow-hover);
}

/* Rounded corners for images - DON'T change aspect ratio */
article.item .image {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
}

/* Smooth image transitions - DON'T add transforms that break layout */
article.item .image img {
  transition: opacity var(--transition);
}


/* =========================================
   BUTTONS - ONLY ADD GRADIENTS
   ========================================= */

.btn-primary {
  background: var(--primary-gradient) !important;
  border: none !important;
}

.btn-success {
  background: var(--success-gradient) !important;
  border: none !important;
}

.btn-warning {
  background: var(--accent-gradient) !important;
  border: none !important;
}

.btn-danger {
  background: var(--secondary-gradient) !important;
  border: none !important;
}

.btn {
  transition: all var(--transition);
}


/* =========================================
   MODULES - ONLY ADD SHADOWS & RADIUS
   ========================================= */

.Module {
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
}


/* =========================================
   SIDEBAR - ADD GRADIENTS FOR RANKINGS
   ========================================= */

.txt-rank.pos1 {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
  color: white !important;
  border-radius: 50%;
}

.txt-rank.pos2 {
  background: linear-gradient(135deg, #C0C0C0 0%, #A0A0A0 100%) !important;
  color: white !important;
  border-radius: 50%;
}

.txt-rank.pos3 {
  background: linear-gradient(135deg, #CD7F32 0%, #8B4513 100%) !important;
  color: white !important;
  border-radius: 50%;
}


/* =========================================
   PAGINATION - GRADIENT FOR ACTIVE
   ========================================= */

.pagination > li.active > a,
.pagination > li.active > span {
  background: var(--primary-gradient) !important;
  border-color: transparent !important;
}


/* =========================================
   TABS - GRADIENT FOR ACTIVE
   ========================================= */

.nav-tabs > li.active > a {
  background: var(--primary-gradient) !important;
  color: white !important;
  border-color: transparent !important;
}

.tab-nav li a.active {
  background: var(--primary-gradient) !important;
  color: white !important;
}