/* --- PAGE STYLES --- */
    .date-cell {
        display: flex;
        flex-direction: column;
    }

    .date-cell .date {
        font-weight: 600;
        color: var(--text-main);
        font-size: 14px;
    }

    .date-cell .time {
        color: var(--text-muted);
        font-size: 12px;
        margin-top: 2px;
    }

    .fixture-cell {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .team-name {
        font-weight: 700;
        color: var(--text-main);
        font-size: 14px;
    }

    .vs-badge {
        background: #f1f5f9;
        color: var(--text-muted);
        font-size: 11px;
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 700;
    }

    /* --- STATUS BADGES & ANIMATION --- */
    .status-badge {
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        display: inline-block;
        letter-spacing: 0.8px;
        color: #ffffff !important;
        border: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* 1. UPCOMING / SCHEDULED (Solid Slate Grey) */
    .status-badge.upcoming {
        background: #64748b;
    }

    /* 2. LIVE (Solid Red + Pulse) */
    .status-badge.live {
        background: #ef4444;
        box-shadow: 0 0 0 rgba(239, 68, 68, 0.4);
        animation: pulse-red 2s infinite;
    }

    /* 3. FINISHED (Solid Green) */
    .status-badge.finished {
        background: #10b981;
    }

    @keyframes pulse-red {
        0% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
        }

        70% {
            transform: scale(1);
            box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
        }

        100% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
        }
    }

    /* Action Buttons */
    .btn-score-action {
        background: #10b981;
        color: white;
        border: none;
        padding: 6px 14px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        transition: 0.2s;
        box-shadow: 0 2px 5px rgba(16, 185, 129, 0.2);
    }

    .btn-score-action:hover {
        background: #059669;
        transform: translateY(-1px);
    }

    .action-cell {
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        justify-content: flex-end;
    }

    .menu-btn {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        border: 1px solid transparent;
        background: transparent;
        color: #94a3b8;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.2s;
        font-size: 18px;
    }

    .menu-btn:hover {
        background: #f1f5f9;
        color: var(--primary-color);
    }

    /* --- FIXED DROPDOWN STYLE --- */
    .dropdown-menu {
        display: none;
        position: fixed;
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        width: 200px;
        z-index: 9999;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        padding: 6px;
    }

    .dropdown-menu.show {
        display: block;
        animation: fadeIn 0.15s ease-out;
    }

    .dropdown-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        color: #334155;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        transition: 0.1s;
        cursor: pointer;
        border-radius: 8px;
    }

    .dropdown-item i {
        font-size: 16px;
        color: #94a3b8;
    }

    .dropdown-item:hover {
        background: #f8fafc;
        color: var(--primary-color);
    }

    .dropdown-item:hover i {
        color: var(--primary-color);
    }

    .dropdown-item.delete {
        color: #ef4444;
        margin-top: 4px;
    }

    .dropdown-item.delete i {
        color: #ef4444;
    }

    .dropdown-item.delete:hover {
        background: #fef2f2;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Centered Modal */
    .centered-modal {
        text-align: center !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .skeleton {
        background: #e2e8f0;
        border-radius: 4px;
        position: relative;
        overflow: hidden;
    }

    .skeleton::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
        transform: translateX(-100%);
        animation: shimmer 1.5s infinite;
    }

    @keyframes shimmer {
        100% {
            transform: translateX(100%);
        }
    }

    /* =========================================
       📱 FIXTURE META (Mobile-only info line)
       ========================================= */
    .fixture-meta {
        display: none;
        /* Hidden on desktop - separate columns show this info */
    }

    .meta-tag {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 600;
        color: #64748b;
        background: #f1f5f9;
        padding: 3px 8px;
        border-radius: 6px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .meta-tag i {
        font-size: 12px;
        color: #94a3b8;
    }

    .meta-date {
        display: none;
        /* Shown only on mobile */
    }

    .meta-status {
        display: none;
        /* Hidden on desktop — shown in meta row on mobile */
    }

    /* --- DESKTOP COLORFUL CARDS OVERRIDE --- */
    .custom-table {
        border-collapse: separate !important;
        border-spacing: 0 10px !important;
    }

    .custom-table thead th {
        background: transparent !important;
        border: none !important;
        color: #64748b !important;
    }

    .custom-table tbody tr {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        box-shadow: 0 8px 20px rgba(118, 75, 162, 0.25);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .custom-table tbody tr:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 12px 25px rgba(118, 75, 162, 0.4) !important;
    }

    .custom-table tbody td {
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
    }

    .custom-table tbody td:first-child {
        border-top-left-radius: 14px;
        border-bottom-left-radius: 14px;
    }
    .custom-table tbody td:last-child {
        border-top-right-radius: 14px;
        border-bottom-right-radius: 14px;
    }

    .team-name { color: #ffffff !important; }
    .date-cell .date { color: #ffffff !important; }
    .date-cell .time { color: rgba(255,255,255,0.8) !important; }

    .vs-badge {
        background: #facc15 !important;
        color: #0f172a !important;
        border: none !important;
        box-shadow: 0 2px 5px rgba(250, 204, 21, 0.3) !important;
    }

    .status-badge.upcoming {
        background: #3b82f6 !important;
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3) !important;
    }
    .status-badge.live {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: none !important;
    }
    .status-badge.finished {
        background: #10b981 !important;
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3) !important;
    }

    /* Desktop Buttons */
    .btn-score-action {
        background: #10b981 !important;
        color: #ffffff !important;
        border: none !important;
    }
    .btn-score-action:hover { background: #059669 !important; }

    .menu-btn {
        background: #ffffff !important;
        color: #667eea !important;
        border: none !important;
    }
    .menu-btn:hover { background: #f8fafc !important; }

    /* =========================================
       📱 MOBILE RESPONSIVE — CARD LAYOUT
       ========================================= */
    @media screen and (max-width: 768px) {

        /* === HEADER FIX === */
        .top-header {
            height: auto !important;
            min-height: 56px;
            padding: 12px 15px !important;
            flex-wrap: wrap;
            gap: 10px;
        }

        .header-left {
            width: 100%;
            gap: 10px !important;
        }

        .dashboard-title {
            font-size: 16px !important;
        }

        .header-right {
            width: 100%;
            gap: 8px !important;
            justify-content: stretch;
        }

        .filter-wrapper {
            flex: 1;
            min-width: 0 !important;
            height: 36px;
            padding: 0 10px;
        }

        .filter-select {
            font-size: 13px;
        }

        .header-right .btn {
            font-size: 12px;
            padding: 6px 12px !important;
            white-space: nowrap;
            flex-shrink: 0;
        }

        /* Remove table horizontal scroll */
        .table-responsive {
            overflow-x: visible !important;
        }

        .custom-table {
            min-width: 0 !important;
            width: 100% !important;
            border-collapse: separate;
            border-spacing: 0 10px;
        }

        /* Hide table header */
        .custom-table thead {
            display: none;
        }

        /* Hide desktop-only columns */
        .custom-table td.mobile-hide {
            display: none !important;
        }

        /* Each TR becomes a card */
        .custom-table tbody tr {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 14px;
            padding: 14px 16px;
            gap: 0;
            box-shadow: 0 8px 20px rgba(118, 75, 162, 0.25);
            transition: box-shadow 0.2s;
            margin-bottom: 5px;
        }

        /* Fix for mobile stacking context bug with fixed dropdowns */
        .custom-table tbody tr:hover {
            transform: none !important;
            box-shadow: 0 8px 20px rgba(118, 75, 162, 0.25) !important;
        }

        /* All TDs reset */
        .custom-table tbody td {
            display: block;
            padding: 0 !important;
            border: none !important;
            background: transparent !important;
        }

        /* --- FIXTURE CELL (Team Names + Meta) --- */
        .custom-table tbody td:nth-child(2) {
            flex: 1 1 100%;
            max-width: 100%;
            width: 100%;
            order: 1;
        }

        .fixture-cell {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            flex-wrap: nowrap;
            width: 100%;
        }

        .fixture-cell .team-name {
            flex: 1;
            font-size: 14px;
            font-weight: 800;
            color: #ffffff;
            white-space: normal;
            word-break: break-word;
            line-height: 1.3;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .fixture-cell .team-name:first-child {
            text-align: right;
            padding-right: 10px;
        }

        .fixture-cell .team-name:last-child {
            text-align: left;
            padding-left: 10px;
        }

        .fixture-cell .vs-badge {
            font-size: 10px;
            padding: 3px 8px;
            background: #facc15;
            color: #0f172a;
            border: none;
            border-radius: 5px;
            font-weight: 800;
            letter-spacing: 0.5px;
            flex-shrink: 0;
            box-shadow: 0 2px 5px rgba(250, 204, 21, 0.3);
        }

        /* Show fixture meta on mobile — meta + status in same row */
        .fixture-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 10px;
            align-items: center;
        }

        .meta-date {
            display: inline-flex;
        }

        .meta-tag {
            background: rgba(255, 255, 255, 0.2);
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(4px);
        }

        .meta-tag i {
            color: #ffffff;
        }

        .meta-status {
            display: inline-flex !important;
            align-items: center;
            padding: 3px 8px !important;
            border-radius: 6px !important;
            font-size: 11px !important;
            font-weight: 600 !important;
            letter-spacing: 0.3px !important;
            text-transform: uppercase;
        }

        /* --- STATUS BADGE — inline in meta row --- */
        .custom-table tbody td:nth-child(5) {
            order: 2;
            display: none !important;
            /* Hide separate status td */
        }

        /* Slightly smaller badges on mobile */
        .status-badge {
            padding: 5px 12px;
            font-size: 10px;
        }

        /* --- ACTIONS CELL --- */
        .custom-table tbody td:nth-child(6) {
            flex: 1 1 100%;
            max-width: 100%;
            width: 100%;
            order: 3;
            margin-top: 10px;
            padding-top: 10px !important;
            border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
        }

        .action-cell {
            display: flex;
            align-items: stretch;
            justify-content: flex-start !important;
            gap: 10px;
            width: 100%;
        }

        .btn-score-action {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 16px;
            height: 42px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 700;
            background: #10b981;
            color: #ffffff;
            border: none;
        }

        .menu-btn {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ffffff;
            color: #667eea;
            border: none;
            font-size: 20px;
            padding: 0;
        }

        .btn-score-action:hover {
            background: #059669;
            color: #ffffff;
        }
        .menu-btn:hover {
            background: #f8fafc;
            color: #4f46e5;
        }

        /* Card wrapper padding */
        .card {
            padding: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            border: none !important;
        }
    }

    /* Small phones */
    @media screen and (max-width: 400px) {
        .fixture-cell .team-name {
            font-size: 14px;
        }

        .meta-tag {
            font-size: 10px;
            padding: 2px 6px;
        }

        .btn-score-action {
            font-size: 13px;
            padding: 9px 12px;
        }
    }

    /* =========================================
       ✨ REFACTORED UTILITY CLASSES (No Inline Styles)
       ========================================= */

    /* Header */
    .dashboard-title {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: var(--text-main);
    }

    /* Empty State */
    .empty-state-container {
        padding: 60px;
        text-align: center;
        color: #94a3b8;
        display: none;
    }

    .empty-state-icon {
        font-size: 32px;
        opacity: 0.5;
        margin-bottom: 10px;
        display: block;
    }

    /* Modal Styles */
    .modal-content-compact {
        max-width: 400px;
        padding: 25px;
    }

    .modal-heading {
        margin-top: 0;
        color: #1e293b;
    }

    .form-group-mb-15 {
        margin-bottom: 15px;
    }

    .form-group-mb-20 {
        margin-bottom: 20px;
    }

    .color-label {
        font-weight: 600;
        color: #64748b;
        display: block;
        margin-bottom: 5px;
    }

    .color-picker-wrapper {
        display: flex;
        align-items: center;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 5px;
    }

    .color-picker-input {
        width: 100%;
        height: 40px;
        border: none;
        cursor: pointer;
        background: transparent;
    }

    .modal-actions-group {
        display: flex;
        gap: 10px;
    }

    .btn-flex {
        flex: 1;
    }

    /* Skeleton Loading Classes */
    .sk-date {
        height: 15px;
        width: 80px;
    }

    .sk-fixture {
        height: 20px;
        width: 150px;
    }

    .sk-badge {
        height: 20px;
        width: 60px;
        border-radius: 12px;
    }

    .sk-tourney {
        height: 15px;
        width: 120px;
    }

    .sk-action {
        height: 32px;
        width: 100px;
        display: inline-block;
    }

    /* frontend/assets/css/scoring/scoring-dashboard.css */

    /* --- UPDATED FILTER DROPDOWN STYLES --- */
    .filter-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 8px;

        /* ✨ FIX 1: Width badhaya taake tang na lage */
        min-width: 180px;
        height: 40px;
        /* Thoda height bhi badhaya */

        padding: 0 15px;
        /* Side se space */
        gap: 10px;
        /* ✨ FIX 2: Icon aur Text ke beech faasla (Juda hova text fix) */

        transition: all 0.2s ease;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .filter-wrapper:hover {
        border-color: #cbd5e1;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        transform: translateY(-1px);
    }

    .filter-icon {
        color: #64748b;
        font-size: 18px;
        /* Icon thoda bada kiya */
        flex-shrink: 0;
        /* Icon koapni jagah par fix rakha */
    }

    .filter-select {
        border: none;
        background: transparent;
        font-size: 14px;
        font-weight: 600;
        color: #334155;
        outline: none;
        cursor: pointer;
        width: 100%;
        height: 100%;

        /* ✨ FIX: Left side se gap diya */
        padding-left: 8px;

        -webkit-appearance: none;
        appearance: none;
    }

    /* ✨ NEW: Dropdown khulne par Options mein bhi gap aaye */
    .filter-select option {
        padding: 15px;
        /* Upar/Neeche space */
        background: white;
        /* Safed background */
        color: #334155;
        /* Dark Text */
        font-weight: 500;
    }

    /* Dropdown Arrow */
    .filter-wrapper::after {
        content: '\ea4e';
        /* Remix Icon Arrow Down */
        font-family: 'remixicon';
        position: absolute;
        right: 15px;
        font-size: 16px;
        color: #94a3b8;
        pointer-events: none;
    }

    /* Mobile Responsive Fix */
    @media (max-width: 768px) {
        .filter-wrapper {
            min-width: 140px;
            /* Mobile par thoda chota par readable */
            padding: 0 10px;
        }
    }

    /* =========================================
   🏏 3-DOTS DROPDOWN MENU STYLING
   ========================================= */
    .dropdown {
        position: relative;
        display: inline-block;
    }

    .menu-btn {
        background: none;
        border: none;
        font-size: 20px;
        color: #64748b;
        cursor: pointer;
        padding: 6px 10px;
        border-radius: 6px;
        transition: all 0.2s ease;
    }

    .menu-btn:hover {
        background: #f1f5f9;
        color: #0f172a;
    }

    .dropdown-menu {
        display: none;
        position: absolute;
        background-color: #ffffff;
        min-width: 190px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        z-index: 9999;
        padding: 8px 0;
        overflow: hidden;
    }

    .dropdown-menu.show {
        display: flex;
        flex-direction: column;
        /* Sab options ko upar se neeche set karega */
    }

    .dropdown-menu a {
        display: flex;
        align-items: center;
        gap: 10px;
        /* Icon aur text ke beech ka gap */
        color: #334155;
        padding: 10px 16px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s ease;
        width: 100%;
    }

    .dropdown-menu a:hover {
        background-color: #f8fafc;
        color: #004bff;
        /* Hover karne par blue ho jayega */
    }

    /* Delete button ke liye special red design */
    .dropdown-menu a.text-danger {
        color: #ef4444 !important;
    }

    .dropdown-menu a.text-danger:hover {
        background-color: #fef2f2;
    }

    .dropdown-divider {
        height: 1px;
        background-color: #e2e8f0;
        margin: 4px 0;
        width: 100%;
    }

    /* =========================================
   🛠️ MODAL & FORM ENHANCEMENTS (Synced w/ Matches)
   ========================================= */
    .modal-content-md {
        max-width: 550px;
    }

    .modal-header-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .modal-title {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #1e293b;
    }

    .modal-close-btn {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #94a3b8;
    }

    .form-group-mb {
        margin-bottom: 15px;
    }

    .form-label {
        font-size: 13px;
        font-weight: 600;
        color: #64748b;
        display: block;
        margin-bottom: 5px;
    }

    .team-input-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .logo-upload-circle {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        overflow: hidden;
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
    }

    .logo-preview {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .logo-icon {
        color: #94a3b8;
        font-size: 20px;
    }

    .grid-2-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        margin-bottom: 15px;
    }

    .btn-full-width {
        width: 100%;
        padding: 12px;
        height: auto;
    }

    .cropper-container {
        height: 300px;
        background: #333;
        margin-bottom: 15px;
        border-radius: 8px;
        overflow: hidden;
    }

    .cropper-img {
        max-width: 100%;
    }

    .vs-separator {
        text-align: center;
        margin: 10px 0;
        font-size: 12px;
        font-weight: 800;
        color: #cbd5e1;
        position: relative;
    }

    .vs-separator::before,
    .vs-separator::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 40%;
        height: 1px;
        background: #e2e8f0;
    }

    .vs-separator::before {
        left: 0;
    }

    .vs-separator::after {
        right: 0;
    }

    .color-picker-sm {
        width: 34px !important;
        height: 34px !important;
        border-radius: 8px !important;
        border: 2px solid #e2e8f0 !important;
        cursor: pointer;
        overflow: hidden;
    }