/**
 * File: C:\xampp\htdocs\charapp\assets\css\character.css
 * 
 * Purpose:
 * - Character sheet styling (general layout)
 * - Section-specific styles (except attacks/skills)
 * - Character cards and overview components
 * 
 * Dependencies:
 * - app.css (base variables)
 * 
 * Load Order: 2
 * 
 * Note:
 * - Attack and Skill card styles moved to combat-skills.css
 */

/* =========================
   Character Sheet Layout
   ========================= */
.character-sheet {
  max-width: 980px;
  margin: 0 auto;
  padding-bottom: calc(var(--tabbarH, 72px) + var(--safeB, 0) + 1rem);
}

/* =========================
   Section Visibility
   ========================= */
.character-sheet section {
  display: none;
}

.character-sheet section.active {
  display: block;
}

/* =========================
   Character Header
   ========================= */
.character-header {
  background: 
    linear-gradient(135deg, rgba(93,214,201,0.08), rgba(77,163,255,0.08)),
    rgba(255,255,255,0.02);
  border: 1px solid rgba(93,214,201,0.2);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}

.character-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at top left,
    rgba(93,214,201,0.1),
    transparent 60%
  );
  opacity: 0.5;
}

.character-header .character-name {
  font-size: 1.75rem;
  font-weight: 700;
  color: #5dd6c9;
  text-shadow: 0 2px 8px rgba(93,214,201,0.4);
  position: relative;
  z-index: 1;
}

.character-header .character-meta {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.7);
}

/* =========================
   Character Image
   ========================= */
.character-image {
  aspect-ratio: 3/2;
  border-radius: 1rem;
  overflow: hidden;
  border: 2px solid rgba(93,214,201,0.2);
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.3),
    0 0 20px rgba(93,214,201,0.1);
  transition: all 0.3s ease;
}

.character-image:hover {
  border-color: rgba(93,214,201,0.4);
  box-shadow: 
    0 6px 16px rgba(0,0,0,0.4),
    0 0 30px rgba(93,214,201,0.2);
  transform: translateY(-2px);
}

.character-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   Progress Bars (RPG Theme)
   ========================= */
.progress {
  height: 1.5rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.5rem;
  overflow: hidden;
  position: relative;
}

.progress::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.1),
    transparent
  );
  animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.progress-bar {
  background: linear-gradient(
    90deg,
    rgba(93,214,201,0.8),
    rgba(93,214,201,1)
  );
  box-shadow: 
    0 0 10px rgba(93,214,201,0.5),
    inset 0 1px 1px rgba(255,255,255,0.2);
  transition: width 0.6s ease;
}

/* =========================
   Stat Badges
   ========================= */
.stat-badge {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  text-align: center;
  transition: all 0.3s ease;
}

.stat-badge:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(93,214,201,0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(93,214,201,0.2);
}

.stat-badge .stat-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-badge .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #5dd6c9;
  text-shadow: 0 2px 4px rgba(93,214,201,0.3);
}

/* =========================
   Equipment Slots
   ========================= */
.equipment-slot {
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: 0.75rem;
  padding: 1rem;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.equipment-slot.filled {
  background: 
    linear-gradient(135deg, rgba(93,214,201,0.08), rgba(77,163,255,0.08)),
    rgba(255,255,255,0.05);
  border: 1px solid rgba(93,214,201,0.2);
}

.equipment-slot:hover {
  border-color: rgba(93,214,201,0.4);
  background: rgba(255,255,255,0.05);
}

.equipment-slot .slot-icon {
  font-size: 2rem;
  color: rgba(255,255,255,0.3);
}

.equipment-slot.filled .slot-icon {
  color: #5dd6c9;
}

/* =========================
   Inventory Grid
   ========================= */
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.5rem;
}

.inventory-item {
  aspect-ratio: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.inventory-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(255,211,107,0.1),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.inventory-item:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,211,107,0.3);
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(255,211,107,0.2);
}

.inventory-item:hover::before {
  opacity: 1;
}

.inventory-item .item-icon {
  font-size: 1.5rem;
  color: #FFD36B;
  position: relative;
  z-index: 1;
}

.inventory-item .item-count {
  position: absolute;
  bottom: 0.25rem;
  right: 0.25rem;
  background: rgba(0,0,0,0.7);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.3rem;
  border-radius: 0.25rem;
  z-index: 2;
}

/* =========================
   Notes/Journal
   ========================= */
.notes-editor {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.75rem;
  padding: 1rem;
  min-height: 200px;
  color: rgba(255,255,255,0.9);
  font-family: 'Courier New', monospace;
  line-height: 1.6;
}

.notes-editor:focus {
  background: rgba(255,255,255,0.05);
  border-color: rgba(93,214,201,0.3);
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(93,214,201,0.15);
}

/* =========================
   Responsive Design
   ========================= */
@media (max-width: 768px) {
  .character-header {
    padding: 1rem;
  }
  
  .character-header .character-name {
    font-size: 1.5rem;
  }
  
  .stat-badge .stat-value {
    font-size: 1.25rem;
  }
}

@media (max-width: 576px) {
  .character-sheet {
    padding-bottom: calc(var(--tabbarH, 72px) + var(--safeB, 0) + 0.5rem);
  }
  
  .character-header {
    padding: 0.75rem;
  }
  
  .character-header .character-name {
    font-size: 1.25rem;
  }
  
  .inventory-grid {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  }
}