/**
 * File: /HeroX/assets/css/character-attack-icon-picker.css
 *
 * Purpose:
 * - Unified card layout for attacks AND skills (.unified-card)
 * - Background image right-side fade, large rounded icon
 * - Detail popup overlay (shared by attacks, skills, timeline)
 * - Icon picker grid styling
 *
 * Dependencies:
 * - character-attacks-ui.js
 * - section_attacks.php, section_timeline.php
 *
 * Load Order: 8
 * Version: 3.0 — Unified card + detail popup
 */

/* ============================================================================
   ICON GRID (Add/Edit Forms)
   ============================================================================ */
.icon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(48px,1fr)); gap:.5rem; max-height:280px; overflow-y:auto; padding:.75rem; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.1); border-radius:.5rem; }
.icon-grid-item { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:1.5rem; background:rgba(255,255,255,.05); border:2px solid rgba(255,255,255,.1); border-radius:.5rem; cursor:pointer; transition:all .2s ease; }
.icon-grid-item:hover { background:rgba(93,214,201,.15); border-color:rgba(93,214,201,.4); transform:scale(1.05); }
.icon-grid-item.selected { background:rgba(93,214,201,.25); border-color:rgba(93,214,201,.6); box-shadow:0 0 0 3px rgba(93,214,201,.2); }
.icon-grid-empty { grid-column:1/-1; padding:2rem; text-align:center; color:rgba(255,255,255,.3); }
.icon-grid::-webkit-scrollbar { width:8px; }
.icon-grid::-webkit-scrollbar-track { background:rgba(255,255,255,.05); border-radius:4px; }
.icon-grid::-webkit-scrollbar-thumb { background:rgba(93,214,201,.3); border-radius:4px; }

/* ============================================================================
   ICON PREVIEW (Add Form)
   ============================================================================ */
.attack-icon-preview, .skill-icon-preview { background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.15)!important; transition:all .3s ease; }
.attack-icon-preview:hover, .skill-icon-preview:hover { background:rgba(255,255,255,.05); border-color:rgba(93,214,201,.3)!important; }

/* ============================================================================
   UNIFIED CARD — Used for attacks AND skills
   ============================================================================ */
.unified-card { position:relative; overflow:hidden; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); border-radius:.75rem; padding:0; transition:all .3s ease; min-height:80px; cursor:pointer; }
.unified-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(93,214,201,.05),rgba(255,211,107,.05)); opacity:0; transition:opacity .3s ease; pointer-events:none; z-index:1; }
.unified-card:hover { border-color:rgba(93,214,201,.3); box-shadow:0 4px 16px rgba(93,214,201,.2); }
.unified-card:hover::before { opacity:1; }

/* Expand hint (desktop) */
.unified-card::after { content:'\f065'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; top:.5rem; right:.5rem; z-index:3; width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:.65rem; background:rgba(0,0,0,.4); color:rgba(255,255,255,.3); border-radius:50%; opacity:0; transition:opacity .2s ease; pointer-events:none; }
.unified-card:hover::after { opacity:1; }

/* Background Image (right side, fading left) */
.unified-card-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 40%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.unified-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(33,37,41,1) 0%, rgba(33,37,41,0.6) 40%, transparent 80%);
  pointer-events: none;
}
.unified-card:hover .unified-card-bg { opacity: 0.85; }

/* Card Body */
.unified-card-body { position:relative; z-index:2; display:flex; align-items:center; gap:.75rem; padding:1rem; }

/* Large Icon */
.unified-card-icon-lg { flex-shrink:0; width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:16px; background:rgba(0,0,0,.4); border:2px solid rgba(255,255,255,.15); backdrop-filter:blur(4px); overflow:hidden; transition:all .3s ease; }
.unified-card:hover .unified-card-icon-lg { border-color:rgba(93,214,201,.4); box-shadow:0 0 12px rgba(93,214,201,.25); transform:scale(1.05); }
.unified-card-icon-lg i { font-size:2rem; filter:drop-shadow(0 0 6px currentColor); }
.unified-icon-lg-img { width:100%; height:100%; object-fit:cover; border-radius:14px; }

/* Card Info */
.unified-card-info { flex:1; min-width:0; }
.unified-card-name { font-weight:600; font-size:1.05rem; color:rgba(255,255,255,.95); text-shadow:0 1px 4px rgba(0,0,0,.5); }
.unified-card-meta { display:flex; gap:.75rem; margin-top:.25rem; font-size:.85rem; color:rgba(255,255,255,.7); text-shadow:0 1px 3px rgba(0,0,0,.4); }
.unified-card-desc { font-size:.8rem; color:rgba(255,255,255,.55); margin-top:.35rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; text-shadow:0 1px 2px rgba(0,0,0,.3); }

/* ============================================================================
   DETAIL POPUP OVERLAY — Shared by attacks, skills, timeline
   ============================================================================ */
.attack-detail-overlay { position:fixed; inset:0; z-index:1040; display:none; align-items:center; justify-content:center; padding:1rem; }
.attack-detail-overlay.active { display:flex; }
.attack-detail-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(6px); animation:atkDetailFadeIn .2s ease; }

.attack-detail-panel { position:relative; z-index:1; width:100%; max-width:420px; max-height:85vh; overflow-y:auto; background:rgba(30,30,40,.95); border:1px solid rgba(93,214,201,.3); border-radius:1rem; box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 40px rgba(93,214,201,.1); animation:atkDetailSlideIn .25s ease; }
.attack-detail-close { position:absolute; top:.75rem; right:.75rem; z-index:10; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.7); width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s ease; }
.attack-detail-close:hover { background:rgba(220,53,69,.5); color:#fff; }

.attack-detail-image-wrap { position:relative; width:100%; min-height:60px; overflow:hidden; border-radius:1rem 1rem 0 0; }
.attack-detail-image-wrap.has-image { min-height:200px; }
.attack-detail-img { width:100%; height:auto; max-height:280px; object-fit:cover; display:block; }
.attack-detail-image-wrap::after { content:''; position:absolute; left:0; right:0; bottom:0; height:60px; background:linear-gradient(to top,rgba(30,30,40,.95),transparent); pointer-events:none; }

.attack-detail-content { padding:1.25rem; position:relative; }
.attack-detail-icon { width:72px; height:72px; border-radius:18px; background:rgba(0,0,0,.5); border:2px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; margin-top:-48px; margin-bottom:.75rem; position:relative; z-index:5; box-shadow:0 4px 16px rgba(0,0,0,.4); overflow:hidden; }
.attack-detail-icon i { font-size:2.5rem; filter:drop-shadow(0 0 8px currentColor); }
.attack-detail-icon img { width:100%; height:100%; object-fit:cover; border-radius:16px; }
.attack-detail-name { font-size:1.35rem; font-weight:700; color:rgba(255,255,255,.95); margin-bottom:.5rem; }
.attack-detail-stats { display:flex; gap:.75rem; margin-bottom:.75rem; flex-wrap:wrap; }
.attack-detail-stat { display:flex; align-items:center; gap:.4rem; padding:.35rem .75rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:.5rem; font-size:.9rem; color:rgba(255,255,255,.85); }
.attack-detail-stat i { font-size:.85rem; opacity:.7; }
.attack-detail-notes { font-size:.9rem; color:rgba(255,255,255,.65); line-height:1.6; white-space:pre-line; }
.attack-detail-content.no-icon .attack-detail-icon { display:none!important; }
.attack-detail-content.no-icon .attack-detail-name { margin-top:0; }
.attack-detail-actions { display:flex; flex-wrap:wrap; gap:.5rem; }

@keyframes atkDetailFadeIn { from{opacity:0} to{opacity:1} }
@keyframes atkDetailSlideIn { from{opacity:0;transform:translateY(20px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }

/* ============================================================================
   FORM ENHANCEMENTS (#attacks scope)
   ============================================================================ */
#attacks .form-control, #attacks .form-select { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.9); transition:all .3s ease; }
#attacks .form-control:focus, #attacks .form-select:focus { background:rgba(255,255,255,.08); border-color:rgba(93,214,201,.4); box-shadow:0 0 0 .2rem rgba(93,214,201,.15); color:rgba(255,255,255,1); }
#attacks .form-control::placeholder { color:rgba(255,255,255,.3); }
#attacks .btn-group .btn-outline-secondary { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.7); }
#attacks .btn-group .btn-check:checked+.btn-outline-secondary { background:rgba(93,214,201,.25); border-color:rgba(93,214,201,.5); color:rgba(255,255,255,1); }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width:768px) {
  .icon-grid { grid-template-columns:repeat(auto-fill,minmax(42px,1fr)); gap:.4rem; max-height:220px; }
  .icon-grid-item { font-size:1.25rem; }
  .unified-card-icon-lg { width:52px; height:52px; border-radius:14px; }
  .unified-card-icon-lg i { font-size:1.6rem; }
  .unified-card-bg { left:50%; opacity:.4; }
  .attack-detail-panel { max-width:100%; max-height:90vh; border-radius:1rem 1rem 0 0; }
  .attack-detail-icon { width:60px; height:60px; border-radius:14px; margin-top:-36px; }
  .attack-detail-icon i { font-size:2rem; }
}
@media (max-width:576px) {
  .icon-grid { grid-template-columns:repeat(auto-fill,minmax(40px,1fr)); gap:.3rem; max-height:200px; }
  .unified-card-icon-lg { width:48px; height:48px; border-radius:12px; }
  .unified-card-icon-lg i { font-size:1.4rem; }
  .unified-card-body { padding:.75rem; gap:.6rem; }
  .unified-card-name { font-size:.95rem; }
  .unified-card-desc { max-width:140px; }
}

/* ============================================================================
   DARK MODE
   ============================================================================ */
[data-bs-theme="dark"] .icon-grid { background:rgba(0,0,0,.3); border-color:rgba(255,255,255,.15); }
[data-bs-theme="dark"] .unified-card { background:rgba(0,0,0,.2); border-color:rgba(255,255,255,.15); }
[data-bs-theme="dark"] .unified-card:hover { background:rgba(0,0,0,.3); }
[data-bs-theme="dark"] .unified-card-bg::after { background:linear-gradient(to right,rgba(33,37,41,1) 0%,rgba(33,37,41,0.6) 40%,transparent 80%); }
[data-bs-theme="light"] .unified-card-bg::after { background:linear-gradient(to right,rgba(255,255,255,1) 0%,rgba(255,255,255,0.6) 40%,transparent 80%); }

/* ============================================================================
   PRINT
   ============================================================================ */
@media print {
  .icon-grid, #attackAddForm, #skillAddForm, .attack-detail-overlay { display:none!important; }
  .unified-card { background:white!important; border:1px solid #dee2e6!important; box-shadow:none!important; page-break-inside:avoid; }
  .unified-card::before, .unified-card::after, .unified-card-bg { display:none!important; }
  .unified-card-icon-lg { background:#f8f9fa!important; border-color:#dee2e6!important; backdrop-filter:none!important; }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */
@media (prefers-reduced-motion:reduce) {
  .icon-grid-item, .unified-card, .unified-card-bg, .unified-card-icon-lg, .attack-detail-backdrop, .attack-detail-panel { transition:none!important; animation:none!important; }
}
.icon-grid-item:focus, .unified-card:focus-within { outline:2px solid rgba(93,214,201,.6); outline-offset:2px; }