/* Passing Drills — Clean Attacking Style (refined) */

/* ---------- THEME TOKENS ---------- */
:root{
    /* Brand */
    --primary:#2b6cb0;
    --primary-dark:#2c5282;
    --secondary:#38a169;
    --warning:#dd6b20;
    --danger:#c53030;
  
    /* UI */
    --text-primary:#2d3748;
    --text-secondary:#4a5568;
    --gray:#4a5568;
    --dark:#1f2937;
    --light:#f8fafc;
    --bg:#ffffff;
    --light-gray:#e5e7eb;
    --border-color:#e2e8f0;
  
    /* Radii & shadows */
    --radius:12px;
    --shadow-sm:0 2px 4px rgba(0,0,0,.05);
    --shadow-md:0 4px 12px rgba(0,0,0,.1);
    --shadow-lg:0 10px 25px rgba(0,0,0,.12);
  
    /* Motion */
    --transition:all .25s cubic-bezier(.4,0,.2,1);
  }
  
  /* ---------- PAGE SHELL ---------- */
  .passing-page{background:var(--light);color:var(--text-primary)}
  .container{max-width:1200px;margin:0 auto;padding:24px 16px;box-sizing:border-box}
  
  .main-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
  .main-header h1{margin:0;font-size:clamp(1.4rem,2.2vw,2rem);font-weight:800;color:var(--text-primary)}
  
  /* Top category nav */
  .category-nav{display:flex;gap:8px;flex-wrap:wrap}
  .category-nav a{
    display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
    background:#fff;border:1px solid var(--border-color);color:var(--text-primary);
    text-decoration:none;font-weight:600;transition:var(--transition);
  }
  .category-nav a:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
  .category-nav a:focus-visible{outline:2px solid #94c0ff;outline-offset:2px}
  .category-nav a.active{background:var(--primary);color:#fff;border-color:var(--primary)}
  
  /* ---------- FILTERS ---------- */
  .filters-container{
    background:#fff;border:1px solid var(--border-color);border-radius:10px;
    padding:16px;margin:10px 0 22px;box-shadow:var(--shadow-sm);
    display:grid;gap:16px;grid-template-columns:1fr;align-items:end;
  }
  .filter-group h3{margin:0 0 8px;font-size:1rem;color:var(--text-primary)}
  
  .drill-categories,.difficulty-filters{display:flex;flex-wrap:wrap;gap:8px}
  .category-btn,.difficulty-btn{
    padding:8px 14px;border:1px solid var(--border-color);background:#fff;border-radius:999px;
    cursor:pointer;font-size:.9rem;font-weight:600;color:var(--text-secondary);transition:var(--transition)
  }
  .category-btn:hover,.difficulty-btn:hover{background:#f7fafc}
  .category-btn:focus-visible,.difficulty-btn:focus-visible{outline:2px solid #94c0ff;outline-offset:2px}
  .category-btn.active,.difficulty-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
  
  .difficulty-dot{width:10px;height:10px;border-radius:50%}
  .difficulty-dot.low{background:#4CAF50}
  .difficulty-dot.medium{background:#FF9800}
  
  /* Sort button icon */
  #sort-rating-btn .sort-icon{font-size:1rem}
  
  /* ---------- SECTION WRAPPERS ---------- */
  .drills-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
    gap:24px;
    margin-top:16px;
    padding: 0 4px;
  }

  .drills-container{
    background:#fff;
    border:1px solid var(--border-color);
    border-radius:12px;
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.05),
      0 2px 8px rgba(0, 0, 0, 0.03);
    padding:16px;
    margin:0 0 24px;
  }
  .drills-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:16px;
    margin-top:12px;
    padding: 0 2px;
  }
  
  /* ---------- DRILL CARD ---------- */
  .drill-card{
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border: 1px solid #e9ecef;
  }

  .drill-card[data-difficulty="medium"] {
    border-top-color: #FF9800;
  }

  .drill-card[data-difficulty="high"] {
    border-top-color: #F44336;
  }

  .drill-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  }
  
  .drill-header{
    padding: 20px 20px 10px;
  }

  .drill-title{
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    cursor: pointer;
    transition: color 0.2s ease;
    padding-right: 60px;
    line-height: 1.4;
  }

  .drill-title:hover { color: #2b6cb0; }
  
  .badge{
    display:inline-block;padding:4px 10px;border-radius:12px;font-size:.75rem;font-weight:700;
    text-transform:capitalize;color:var(--text-secondary);background:#f1f5f9;border:1px solid var(--border-color);
  }
  
  .difficulty-badge{
    position:absolute;top:12px;right:12px;padding:4px 10px;border-radius:999px;
    font-size:.7rem;font-weight:800;color:#fff;letter-spacing:.5px;text-transform:uppercase;
    box-shadow:0 2px 4px rgba(0,0,0,.1);
  }
  .difficulty-low{background:#38a169}
  .difficulty-medium{background:#dd6b20}
  .difficulty-high{background:#c53030}
  
  .drill-content { display: flex; flex-direction: column; }

  /* Visual section (auto width in vertical layout) */
  .drill-visual{ width: 100%; display: flex; flex-direction: column; }

  .drill-svg-container {
    padding: 20px;
    background: #f8fafc;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #edf2f7;
  }

  /* Important: JS applies class 'drill-svg-animation' to the SVG */
  .drill-svg-animation { max-width: 100%; height: auto !important; background: #fff; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); display:block; }

  .drill-info { padding: 0 20px 10px; }

  .drill-objective { margin: 0; color: #4a5568; line-height: 1.6; }

  .drill-category {
    font-size: 0.8rem;
    color: #666;
    text-transform: capitalize;
    margin: 0;
    font-weight: 600;
  }

  .drill-actions {
    padding: 8px 12px;
    background: #fff;
    display: flex;
    justify-content: center;
    border-top: 1px solid #edf2f7;
  }
  
  /* Start animation button style (compact) */
  .details-btn, .animate-btn, .start-animation-btn{
    background: #2b6cb0;
    color: #fff;
    border: none;
    padding: 3px 10px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(43,108,176,0.2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  /* Stronger scoping to ensure compact height inside passing cards */
  .passing-page .drill-actions .details-btn,
  .passing-page .drill-actions .animate-btn,
  .passing-page .drill-actions .start-animation-btn{
    height: 26px;
    min-height: 26px;
    padding: 2px 8px !important;
    font-size: 0.75rem !important;
    line-height: 1 !important;
    border-radius: 14px !important;
  }
  .passing-page .drill-actions .details-btn svg,
  .passing-page .drill-actions .animate-btn svg,
  .passing-page .drill-actions .start-animation-btn svg{
    width: 12px !important;
    height: 12px !important;
  }
  .passing-page .drill-actions button span {
    line-height: 1;
  }

  /* Ensure any SVG inside drill-card buttons on Passing page stays compact (override global svg height) */
  .passing-page .drill-card button svg{
    width: 12px !important;
    height: 12px !important;
    min-height: 0 !important;
    max-height: none !important;
    display: inline-block;
    vertical-align: middle;
  }

  .details-btn:hover, .animate-btn:hover, .start-animation-btn:hover{ background:#2c5282; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(43,108,176,0.3); }
  .details-btn:active, .animate-btn:active, .start-animation-btn:active{ transform: translateY(0); box-shadow: 0 2px 4px rgba(43,108,176,0.2); }

  .animate-btn svg, .details-btn svg { width:12px; height:12px; }

  /* Show button labels */
  .drill-actions button span { display: inline; }

  .animate-btn[data-playing="true"] {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
  }
  
  /* Category color chips (optional) */
  .category-short-passing{background:#e3f2fd;color:#1565c0}
  .category-combination{background:#e8f5e9;color:#2e7d32}
  .category-possession{background:#fff3e0;color:#e65100}
  .category-long-passing{background:#f3e5f5;color:#6a1b9a}
  
  /* ---------- MODAL (uses .modal + .show) ---------- */
  .modal{
    display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.7);
    padding:20px;box-sizing:border-box;overflow-y:auto;opacity:0;visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
  }
  .modal.show{display:block;opacity:1;visibility:visible}
  .modal-content{
    background:#fff;border-radius:12px;box-shadow:var(--shadow-lg);
    max-width:900px;width:min(900px,95%);margin:32px auto;
    transform:translateY(16px);animation:modalFadeIn .25s ease forwards;
    max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;
  }
  .modal-header{
    padding:18px 20px;border-bottom:1px solid var(--border-color);
    display:flex;align-items:center;justify-content:space-between;gap:12px;
  }
  .modal-title{margin:0;font-size:1.35rem;color:var(--text-primary)}
  .close-modal{
    background:none;border:none;width:40px;height:40px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    font-size:24px;color:var(--text-secondary);transition:var(--transition)
  }
  .close-modal:hover{color:var(--primary);background:rgba(0,0,0,.06);transform:rotate(90deg)}
  .close-modal:focus-visible{outline:2px solid #94c0ff;outline-offset:2px}
  .modal-body{
    padding:20px;flex:1;overflow-y:auto;
  }
  
  /* Drill details inside modal */
  #drill-details{padding:28px 22px;max-width:800px;margin:0 auto}
  #drill-details h2{margin:0 0 12px;color:#1565C0;font-size:1.75rem;line-height:1.25}
  #drill-details .drill-meta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
  .pill{display:inline-block;padding:6px 12px;border-radius:14px;font-size:.85rem;font-weight:700;background:#e3f2fd;color:#1565c0}
  #drill-details h3{color:#2d3748;margin:24px 0 12px;font-size:1.2rem;border-bottom:1px solid #e2e8f0;padding-bottom:8px}
  #drill-details p{margin:0 0 12px;line-height:1.6;color:#4a5568}
  #drill-details ul,#drill-details ol{padding-left:24px;margin:8px 0 18px}
  #drill-details ul li{margin-bottom:8px;position:relative;padding-left:6px;color:#4a5568}
  #drill-details ul li::before{content:"•";color:#1565C0;font-weight:700;position:absolute;left:-14px}
  #drill-details ol{counter-reset:item}
  #drill-details ol li{margin-bottom:10px;counter-increment:item;position:relative;padding-left:24px;color:#4a5568}
  #drill-details ol li::before{content:counter(item) ".";position:absolute;left:0;font-weight:700;color:#1565C0}
  
  /* Optional preview block */
  .drill-animation-preview{padding:18px;background:#f8f9fa;border-bottom:1px solid #e9ecef;text-align:center;margin-bottom:16px}
  .svg-container{background:#fff;padding:16px;border-radius:8px;box-shadow:var(--shadow-sm);margin:0 auto;max-width:600px}
  
  /* ---------- ANIMATIONS ---------- */
  @keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
  @keyframes modalFadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
  
  /* Stagger cards */
  .drill-card:nth-child(1){animation-delay:.08s}
  .drill-card:nth-child(2){animation-delay:.16s}
  .drill-card:nth-child(3){animation-delay:.24s}
  .drill-card:nth-child(4){animation-delay:.32s}
  .drill-card:nth-child(5){animation-delay:.40s}
  .drill-card:nth-child(6){animation-delay:.48s}
  
  /* ---------- RESPONSIVE ---------- */
  @media (max-width:1024px){
    .filters-container{grid-template-columns:1fr 1fr}
  }
  @media (max-width:768px){
    .main-header{flex-direction:column;align-items:flex-start}
    .filters-container{grid-template-columns:1fr}
  }
  @media (max-width:480px){
    .container{padding:16px 10px}
    .category-nav a{padding:6px 12px}
  }
  
  /* ---------- MODAL ---------- */
  .modal{
    display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.7);
    padding:20px;box-sizing:border-box;overflow-y:auto;opacity:0;visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
  }
  .modal.show{display:block;opacity:1;visibility:visible}
  .modal-content{
    background:#fff;border-radius:12px;box-shadow:var(--shadow-lg);
    max-width:900px;width:min(900px,95%);margin:32px auto;
    transform:translateY(16px);animation:modalFadeIn .25s ease forwards;
    max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;
  }
  .modal-header{
    padding:18px 20px;border-bottom:1px solid var(--border-color);
    display:flex;align-items:center;justify-content:space-between;gap:12px;
  }
  .modal-title{margin:0;font-size:1.35rem;color:var(--text-primary)}
  .close-modal{
    background:none;border:none;width:40px;height:40px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    font-size:24px;color:var(--text-secondary);transition:var(--transition)
  }
  .close-modal:hover{color:var(--primary);background:rgba(0,0,0,.06);transform:rotate(90deg)}
  .close-modal:focus-visible{outline:2px solid #94c0ff;outline-offset:2px}
  .modal-body{
    padding:20px;flex:1;overflow-y:auto;
  }
  
  /* Drill details inside modal */
  #drill-details{padding:28px 22px;max-width:800px;margin:0 auto}
  #drill-details h2{margin:0 0 12px;color:#1565C0;font-size:1.75rem;line-height:1.25}
  #drill-details .drill-meta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
  .pill{display:inline-block;padding:6px 12px;border-radius:14px;font-size:.85rem;font-weight:700;background:#e3f2fd;color:#1565c0}
  #drill-details h3{color:#2d3748;margin:24px 0 12px;font-size:1.2rem;border-bottom:1px solid #e2e8f0;padding-bottom:8px}
  #drill-details p{margin:0 0 12px;line-height:1.6;color:#4a5568}
  #drill-details ul,#drill-details ol{padding-left:24px;margin:8px 0 18px}
  #drill-details ul li{margin-bottom:8px;position:relative;padding-left:6px;color:#4a5568}
  #drill-details ul li::before{content:"•";color:#1565C0;font-weight:700;position:absolute;left:-14px}
  #drill-details ol{counter-reset:item}
  #drill-details ol li{margin-bottom:10px;counter-increment:item;position:relative;padding-left:24px;color:#4a5568}
  #drill-details ol li::before{content:counter(item) ".";position:absolute;left:0;font-weight:700;color:#1565C0}
  
  /* Optional preview block */
  .drill-animation-preview{padding:18px;background:#f8f9fa;border-bottom:1px solid #e9ecef;text-align:center;margin-bottom:16px}
  .svg-container{background:#fff;padding:16px;border-radius:8px;box-shadow:var(--shadow-sm);margin:0 auto;max-width:600px}
  
  /* Modal animation section */
  .modal-animation{
    background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:20px;
    text-align:center;margin-bottom:24px;
  }
  .drill-details{margin-bottom:24px}
  .drill-section{margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid #e9ecef}
  .drill-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
  .drill-section h3{margin:0 0 12px;font-size:1.2rem;font-weight:700;color:#2d3748}
  .drill-section p{margin:0;line-height:1.6;color:#4a5568}
  .drill-section ul,.drill-section ol{margin:0;padding-left:24px;line-height:1.6;color:#4a5568}
  .drill-section ul li,.drill-section ol li{margin-bottom:8px}
  .drill-section ul li::before{content:"•";color:#1565C0;font-weight:700;margin-right:8px}
  .drill-section ol{counter-reset:item}
  .drill-section ol li{counter-increment:item}
  .drill-section ol li::before{content:counter(item) ".";color:#1565C0;font-weight:700;margin-right:8px}

  /* Animation container in modal */
  .animation-container{text-align:center}
  .animation-container .modal-svg-container{margin-bottom:16px}
  
  /* Modal sections container */
  .modal-sections{display:grid;gap:24px}
  .modal-section h3{margin:0 0 12px;font-size:1.2rem;font-weight:700;color:#2d3748}
  .modal-section p{margin:0;line-height:1.6;color:#4a5568}
  .modal-section ul,.modal-section ol{
    margin:0;padding-left:24px;line-height:1.6;color:#4a5568
  }
  .modal-section ul li,.modal-section ol li{margin-bottom:8px}
  .modal-section ul li::before{content:"•";color:#1565C0;font-weight:700;margin-right:8px}
  .modal-section ol{counter-reset:item}
  .modal-section ol li{counter-increment:item}
  .modal-section ol li::before{content:counter(item) ".";color:#1565C0;font-weight:700;margin-right:8px}
  
  /* AI Coach Assistant */
  .coach-assistant{
    margin-top:32px;padding-top:24px;border-top:1px solid #e9ecef;
  }
  .coach-assistant h3{
    margin:0 0 16px;font-size:1.1rem;font-weight:700;color:#2d3748;
  }
  #coach-assistant-mount{
    min-height:100px;background:#f8f9fa;border-radius:8px;padding:16px;
    border:1px solid #e9ecef;
  }