/* Balbalan Football Academy - Clean & Light Modern Styling */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Teko:wght@600;700&display=swap');

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: #f8fafc;
    color: #0f172a;
    overflow-x: hidden;
}

.font-jersey {
    font-family: 'Teko', sans-serif;
    letter-spacing: 0.04em;
}

/* Card Hover Elevation */
.player-card {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .player-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 24px -6px rgba(15, 23, 42, 0.08), 0 4px 8px -4px rgba(15, 23, 42, 0.03);
        border-color: #10b981;
    }
}

/* Position Badges - Crisp on Light */
.badge-kiper {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}
.badge-bek {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}
.badge-gelandang {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.badge-sayap {
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid #ddd6fe;
}
.badge-penyerang {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
/* Futsal Specific Badges */
.badge-anchor {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
}
.badge-flank {
    background: #f3e8ff;
    color: #7e22ce;
    border: 1px solid #e9d5ff;
}
.badge-pivot {
    background: #ffedd5;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

/* Hide scrollbar for clean horizontal swipe on mobile */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Smooth mobile scroll */
.scroll-touch {
    -webkit-overflow-scrolling: touch;
}

/* Custom Scrollbar for desktop */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ==============================================================
   TACTICAL SOCCER PITCH BOARD STYLING
   ============================================================== */
.soccer-pitch {
    background: #059669;
    background-image: 
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.04) 0px,
            rgba(255, 255, 255, 0.04) 44px,
            transparent 44px,
            transparent 88px
        );
    position: relative;
    border-radius: 24px;
    box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.2), 0 10px 25px -5px rgba(5, 150, 105, 0.2);
    border: 3px solid #ffffff;
    overflow: hidden;
}

.pitch-touchline {
    position: absolute;
    inset: 12px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    pointer-events: none;
}

.pitch-halfway-line {
    position: absolute;
    top: 50%;
    left: 12px;
    right: 12px;
    height: 2px;
    background: rgba(255, 255, 255, 0.8);
    transform: translateY(-50%);
    pointer-events: none;
}

.pitch-center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.pitch-center-spot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.pitch-penalty-box-top {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 65px;
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-top: none;
    pointer-events: none;
}

.pitch-penalty-box-bottom {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 65px;
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-bottom: none;
    pointer-events: none;
}

.pitch-player-token {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease;
    cursor: pointer;
}
.pitch-player-token:hover {
    transform: translateY(-4px) scale(1.05);
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
}

/* ==============================================================
   TACTICAL FUTSAL COURT BOARD STYLING (INDOOR BLUE / PARQUET)
   ============================================================== */
.futsal-court {
    background: #0284c7;
    background-image: 
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.04) 0px,
            rgba(255, 255, 255, 0.04) 40px,
            transparent 40px,
            transparent 80px
        );
    position: relative;
    border-radius: 24px;
    box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.25), 0 10px 25px -5px rgba(2, 132, 199, 0.25);
    border: 3px solid #ffffff;
    overflow: hidden;
}

.futsal-touchline {
    position: absolute;
    inset: 12px;
    border: 2px solid rgba(255, 255, 255, 0.65);
    border-radius: 12px;
    pointer-events: none;
}

.futsal-halfway-line {
    position: absolute;
    top: 50%;
    left: 12px;
    right: 12px;
    height: 2px;
    background: rgba(255, 255, 255, 0.65);
    transform: translateY(-50%);
    pointer-events: none;
}

.futsal-center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    border: 2px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.futsal-penalty-d-top {
    position: absolute;
    top: 12px;
    left: 50%;
    width: 150px;
    height: 70px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.65);
    border-left: 2px solid rgba(255, 255, 255, 0.65);
    border-right: 2px solid rgba(255, 255, 255, 0.65);
    border-bottom-left-radius: 75px;
    border-bottom-right-radius: 75px;
    transform: translateX(-50%);
    pointer-events: none;
}

.futsal-penalty-d-bottom {
    position: absolute;
    bottom: 12px;
    left: 50%;
    width: 150px;
    height: 70px;
    border-top: 2px solid rgba(255, 255, 255, 0.65);
    border-left: 2px solid rgba(255, 255, 255, 0.65);
    border-right: 2px solid rgba(255, 255, 255, 0.65);
    border-top-left-radius: 75px;
    border-top-right-radius: 75px;
    transform: translateX(-50%);
    pointer-events: none;
}

/* ==============================================================
   PRINT STYLING RULES (ID CARD & BIODATA ROSTER PER KU)
   ============================================================== */
#print-single-card-area,
#print-roster-area,
#print-album-area {
    display: none;
}

@media print {
    @page {
        margin: 12mm;
        size: auto;
    }

    body {
        background: #ffffff !important;
        color: #000000 !important;
        padding: 0 !important;
        margin: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Sembunyikan seluruh tampilan UI web biasa */
    nav,
    header,
    footer,
    main,
    .modal-overlay,
    .no-print {
        display: none !important;
    }

    /* 1. CETAK ID CARD PEMAIN TUNGGAL */
    body.print-mode-single-card #print-single-card-area {
        display: block !important;
        position: relative !important;
        margin: 30px auto !important;
        width: 100% !important;
        max-width: 480px !important;
        page-break-inside: avoid !important;
    }

    .id-card-print-box {
        border: 2px dashed #64748b !important;
        padding: 16px !important;
        border-radius: 20px !important;
        background: #ffffff !important;
    }

    /* 2. CETAK LEMBAR BIODATA ROSTER KELOMPOK UMUR */
    body.print-mode-roster #print-roster-area {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .print-table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin-top: 12px !important;
    }
    .print-table th,
    .print-table td {
        border: 1px solid #cbd5e1 !important;
        padding: 6px 8px !important;
        font-size: 11px !important;
        color: #0f172a !important;
    }
    .print-table th {
        background-color: #f1f5f9 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        font-size: 10px !important;
    }
    /* 3. CETAK BUKU ALBUM PEMAIN TURNAMEN (A4 FORMAT) */
    body.print-mode-album #print-album-area {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .album-print-page {
        width: 100% !important;
        max-width: 210mm !important;
        min-height: 297mm !important;
        margin: 0 auto !important;
        padding: 12mm 16mm !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        page-break-after: always !important;
        page-break-inside: avoid !important;
    }

    .album-print-page:last-child {
        page-break-after: auto !important;
    }

    .album-player-item {
        page-break-inside: avoid !important;
    }
}

/* ======================================================== */
/* MODAL BACKGROUND SCROLL LOCK & TOUCH CHAINING FIX       */
/* ======================================================== */
html.overflow-hidden,
body.overflow-hidden {
    overflow: hidden !important;
    height: 100% !important;
    overscroll-behavior: none !important;
}

.modal-backdrop {
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
}

.modal-body-scroll {
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
}