/**
 * Path: assets/css/templates/match/single-match.css
 * Corrected Premium 365Scores-style Frontend Match Sheet Stylesheet.
 * 
 * Aligned with Theme Colors:
 * Primary Blue: #0010a0 | Secondary Red: #dd0000 | White: #ffffff | Light Gray: #f6f7f9 | Gold Accent: #ffaa00
 * Strictly uses !important as dictated by Rule 9.
 *
 * @package NPLSportsPro
 */

/* =========================================================================
   1. FRONTEND SCOREBOARD CARD HEADER LAYOUT (Crisp Original Stadium Photo)
   ========================================================================= */

.nplsp-match-engine-layout {
    position: relative !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden !important;
    padding: 30px !important;
    box-sizing: border-box !important;
    margin-bottom: 25px !important;
    color: #ffffff !important;
    /* Removed all blur filters to keep the home team stadium original image 100% clean and clear */
    filter: none !important;
    backdrop-filter: none !important;
}

.engine-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    /* Soft, non-saturated transparent gray-blue cover (45% opacity) to reveal clean original stadium image details */
    background: linear-gradient(135deg, rgba(18, 22, 32, 0.45), rgba(0, 16, 160, 0.35)) !important;
    z-index: 1 !important;
}

.engine-content {
    position: relative !important;
    z-index: 2 !important;
}

/* Metadata Top Row - Restructured to completely prevent overlapping text */
.engine-meta-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
    font-size: 12px !important;
    color: #f1f5f9 !important;
    font-weight: 700 !important;
    flex-wrap: wrap !important; /* Wrapping protects against cross-collision of items */
    gap: 15px !important;
    width: 100% !important;
}

.engine-meta-text {
    flex-grow: 1 !important;
    text-align: left !important;
    margin-left: 10px !important;
}

.engine-date-time {
    text-align: right !important;
    white-space: nowrap !important;
}

.engine-league-badge {
    background: #ffaa00 !important; /* Gold Accent */
    color: #0010a0 !important; /* Primary Deep Blue text */
    padding: 4px 10px !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

/* Team Logos Row */
.engine-main-flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 15px !important;
}

.engine-logo-col {
    width: 80px !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
    padding: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.engine-logo-col img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* Live clock display pill */
.engine-center-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.engine-status-pill {
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    padding: 6px 18px !important;
    border-radius: 30px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

.engine-status-pill.live-pill {
    background: #dd0000 !important; /* Secondary Vibrant Red for LIVE status */
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(221, 0, 0, 0.5) !important;
    border-color: #dd0000 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.engine-status-pill.live-pill .pulse-dot {
    width: 6px !important;
    height: 6px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    animation: nplspLivePulse 1.2s infinite !important;
}

@keyframes nplspLivePulse {
    0% { transform: scale(0.9); opacity: 0.3; }
    50% { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.3; }
}

.engine-status-pill .clock-display {
    font-family: monospace !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

/* Team Names & Scoreblock Layout */
.engine-score-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
}

.engine-team-name {
    flex: 1 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}

.engine-team-name.left-align {
    text-align: right !important;
    padding-right: 25px !important;
}

.engine-team-name.right-align {
    text-align: left !important;
    padding-left: 25px !important;
}

.engine-score-block {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.score-digit {
    background: #ffffff !important;
    color: #0010a0 !important; /* Deep Blue text */
    font-size: 32px !important;
    font-weight: 800 !important;
    width: 55px !important;
    height: 55px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-family: monospace !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

.status-mid-label {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

.status-mid-label.live {
    color: #ffaa00 !important; /* Glow gold on live status mid-labels */
    animation: nplspLiveFlicker 1.5s infinite !important;
}

@keyframes nplspLiveFlicker {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

.engine-footer-bar {
    text-align: center !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    color: #ffaa00 !important;
}

/* =========================================================================
   2. FRONTEND TABS NAVIGATION LAYOUT
   ========================================================================= */

.nplsp-match-tabs-nav {
    display: flex !important;
    background: #f6f7f9 !important; /* Fourth Color (Light Gray) base */
    padding: 6px !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    gap: 6px !important;
    border: 1px solid #e2e8f0 !important;
    overflow-x: auto !important;
}

.nplsp-match-tabs-nav::-webkit-scrollbar {
    display: none !important;
}

.nplsp-match-tabs-nav .nplsp-tab-trigger {
    flex: 1 !important;
    min-width: 100px !important;
    background: transparent !important;
    border: none !important;
    color: #64748b !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 10px 15px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
}

.nplsp-match-tabs-nav .nplsp-tab-trigger:hover {
    background: rgba(0, 16, 160, 0.05) !important;
    color: #0010a0 !important;
}

.nplsp-match-tabs-nav .nplsp-tab-trigger.active {
    background: #0010a0 !important; /* Deep Blue Active Background */
    color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(0, 16, 160, 0.15) !important;
}

/* =========================================================================
   3. FRONTEND TABS CONTENT CARDS
   ========================================================================= */

.nplsp-summary-container {
    background: #ffffff !important; /* Pure White Card Base */
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 25px !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important;
}

.nplsp-section-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0010a0 !important; /* Primary Blue titles */
    text-transform: uppercase !important;
    margin: 0 0 18px 0 !important;
    border-bottom: 2px solid #f6f7f9 !important;
    padding-bottom: 8px !important;
    letter-spacing: 0.5px !important;
}

/* Match Momentum Visualiser */
.nplsp-365-momentum-section {
    margin-bottom: 30px !important;
}

.nplsp-momentum-bar-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
}

.momentum-team-label-left, .momentum-team-label-right {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    width: 100px !important;
}

.momentum-team-label-right {
    text-align: right !important;
}

.nplsp-momentum-bar-container {
    flex: 1 !important;
    height: 10px !important;
    background: #f6f7f9 !important;
    border-radius: 5px !important;
    display: flex !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
}

.nplsp-momentum-bar-fill-home {
    background: #0010a0 !important; /* Home dominates in Primary Blue */
    height: 100% !important;
    transition: width 0.3s ease !important;
}

.nplsp-momentum-bar-fill-away {
    background: #dd0000 !important; /* Away dominates in Secondary Red */
    height: 100% !important;
    transition: width 0.3s ease !important;
}

.nplsp-momentum-bar-center-node {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    width: 2px !important;
    height: 100% !important;
    background: #cbd5e1 !important;
    transform: translateX(-50%) !important;
}

/* =========================================================================
   4. DYNAMIC STATS ROW GRAPH PANEL
   ========================================================================= */

.nplsp-365-live-stats-wrapper {
    margin-bottom: 30px !important;
}

.nplsp-365-stats-table {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.nplsp-365-stat-row {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px 18px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.01) !important;
}

.stat-entry-controls-bar-frontend {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 8px !important;
}

.stat-value-left, .stat-value-right {
    font-size: 14px !important;
    font-weight: 800 !important;
}

.stat-value-left { color: #0010a0 !important; }
.stat-value-right { color: #dd0000 !important; }

.stat-row-label-frontend {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
}

.stat-ratio-progress-bar-container {
    height: 6px !important;
    background: #f6f7f9 !important;
    border-radius: 3px !important;
    display: flex !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
}

.stat-progress-bar-home {
    background: #0010a0 !important;
    height: 100% !important;
}

.stat-progress-bar-away {
    background: #dd0000 !important;
    height: 100% !important;
}

/* =========================================================================
   5. READONLY PENALTY SHOOTOUT PANEL
   ========================================================================= */

.nplsp-penalties-shootout-wrapper {
    margin-bottom: 30px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 15px !important;
}

.shootout-teams-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.shootout-team-row {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.shootout-team-label-mini {
    width: 130px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748b !important;
}

.shootout-checks-row {
    display: flex !important;
    gap: 8px !important;
}

.shootout-dot-clicker-readonly {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: bold !important;
}

.shootout-dot-clicker-readonly.state-empty {
    background: #f6f7f9 !important;
    border: 1px solid #e2e8f0 !important;
}

.shootout-dot-clicker-readonly.state-tick {
    background: #0010a0 !important;
    color: #ffffff !important;
}

.shootout-dot-clicker-readonly.state-cross {
    background: #dd0000 !important;
    color: #ffffff !important;
}

/* =========================================================================
   6. MATCH VENUE CARDS & TIMELINE
   ========================================================================= */

.nplsp-summary-cards-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    margin-bottom: 30px !important;
}

.nplsp-info-card {
    flex: 1 1 calc(25% - 15px) !important;
    background: #f6f7f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-sizing: border-box !important;
}

.nplsp-info-card .nplsp-card-icon {
    font-size: 20px !important;
    color: #0010a0 !important;
}

.nplsp-info-card .nplsp-card-content {
    display: flex !important;
    flex-direction: column !important;
}

.nplsp-info-card .nplsp-label {
    font-size: 10px !important;
    text-transform: uppercase !important;
    color: #64748b !important;
    font-weight: 800 !important;
}

.nplsp-info-card .nplsp-value {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

/* Timeline Style */
.nplsp-timeline-wrapper {
    margin-bottom: 15px !important;
}

.nplsp-timeline {
    position: relative !important;
    padding-left: 30px !important;
}

.nplsp-timeline::before {
    content: '' !important;
    position: absolute !important;
    left: 8px !important;
    top: 0 !important;
    height: 100% !important;
    width: 2px !important;
    background: #e2e8f0 !important;
}

.nplsp-timeline-item {
    position: relative !important;
    margin-bottom: 15px !important;
    display: flex !important;
    align-items: center !important;
}

.nplsp-timeline-minute {
    position: absolute !important;
    left: -30px !important;
    width: 25px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #0010a0 !important;
    text-align: right !important;
}

.added-time-small {
    font-size: 9px !important;
    color: #dd0000 !important;
}

.nplsp-timeline-content {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
}

.event-icon-circle {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
}

.event-icon-circle.type-goal { background: rgba(0, 16, 160, 0.1) !important; border: 1px solid #0010a0 !important; }
.event-icon-circle.type-yellow { background: rgba(255, 176, 0, 0.15) !important; border: 1px solid #ffaa00 !important; }
.event-icon-circle.type-red { background: rgba(221, 0, 0, 0.1) !important; border: 1px solid #dd0000 !important; }
.event-icon-circle.type-sub { background: rgba(48, 176, 199, 0.1) !important; border: 1px solid #30b0c7 !important; }

.event-details-wrap {
    display: flex !important;
    flex-direction: column !important;
}

.nplsp-event-player {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.nplsp-event-sub-detail {
    font-size: 10px !important;
    color: #64748b !important;
}

/* =========================================================================
   7. 7-DEVICE RESPONSIVE BREAKPOINTS (Rule 6 & Rule 9 Compliance)
   ========================================================================= */

@media only screen and (max-width: 1024px) {
    .nplsp-info-card {
        flex: 1 1 calc(50% - 15px) !important;
    }
}

@media only screen and (max-width: 768px) {
    .nplsp-match-engine-layout {
        padding: 15px !important;
    }
    .engine-team-name {
        font-size: 14px !important;
    }
    .score-digit {
        width: 42px !important;
        height: 42px !important;
        font-size: 24px !important;
    }
    .nplsp-momentum-bar-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .momentum-team-label-right {
        text-align: left !important;
    }
}

@media only screen and (max-width: 480px) {
    .engine-logo-col {
        width: 50px !important;
        height: 50px !important;
    }
    .engine-team-name {
        font-size: 12px !important;
    }
    .score-digit {
        width: 32px !important;
        height: 32px !important;
        font-size: 18px !important;
    }
    .nplsp-info-card {
        flex: 1 1 100% !important;
    }
}

@media only screen and (max-width: 320px) {
    .engine-team-name {
        font-size: 10px !important;
    }
    .score-digit {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }
}