:root {
    --primary-blue: #0d6efd;
    --primary-color: #001C55;
    --primary-color-dark: #001644;
    --primary-dark-hover: #00143b;
    --primary-color-light: #1a3366;
    --primary-light-hover: #334977;
    --primary-very-light: #667799;
    --secondary-gray: rgba(255, 255, 255, 0.1);
    --secondary-gray-hover: rgba(255, 255, 255, 0.2);
    --background-dark: #1a1d20;
    --background-light: #343a40;
    --border-dark: 1px solid rgba(255,255,255,0.2);
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    color: white;
}

.bg-primary-light {
    background-color: var(--primary-color-light) !important;
}
.form-group{
    padding-bottom: 1rem;
}

/* Custom table styling */
.table-striped thead {
    background-color: #2f3a62;
    color: white;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #415089;
    color: white;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: #2f3a62;
    color: white;
}


.card-dashboard {
    color: white;
    background-color: var(--primary-color-light);
    border-radius: 15px;
    border-radius: 15px;
    border: 0px;
    padding: 2px;
    overflow: hidden;
}

.card-dashboard-header {
    color: white;
    background-color: var(--primary-color-light);
    overflow: visible;
}

.card-dashboard-body {
    background-color: var(--primary-color-light);
    overflow-y: auto;
    height: 30vh;
}

.card-info {
    color: white;
    background-color: var(--primary-color-light);
    border-radius: 15px;
    height: auto;
    border-radius: 15px;
    border: 0px;
    padding: 2px;
    overflow: hidden;
}

.card-info-header {
    color: white;
    background-color: var(--primary-color-light);
}

.card-info-body {
    background-color: var(--primary-color-light);
}

.card-container {
    display: flex;
    align-items: stretch; /* This makes all flex items (cards) have the same height */
}

.card {
    flex: 1; /* This makes the card take equal space */
    margin: 10px;
}
/* Model Popup's */
.modal-content {
    background-color: #202f64;
    border-radius: 10px;
}

.modal-content .btn-close {
    background-color: white;
}
/* Read Only Input Box Styles */
.readonly-input {
    background-color: #f8f9fa;
    color: #495057;
    border: 1px solid #ced4da;
    cursor: not-allowed;
}



.readonly-input:focus {
    border-color: #80bdff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.25);
}

/* ====== Backgrounds ====== */

.bg-dark {
    background-color: #212529;
}
/*Sports Weekly Calendar Styles*/
.calendar {
    font-family: Arial, sans-serif;
    color: black;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f1f1f1;
    color: black;
}

.week-range {
    font-size: 18px;
    font-weight: bold;
    color: black;
}

.navigation button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: black;
}

.day {
    flex: 1 1 auto; /* Allows cards to shrink or grow equally */
    min-width: 100px; /* Set a minimum width to prevent them from becoming too small */
    margin: 0 5px; /* Space between the cards */
    box-sizing: border-box;
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #fafafa;
    color: black;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.day:hover {
    background-color: lightgray; /* Darker blue when hovered */
    transform: scale(1.05); /* Slightly increase the size on hover */
}
.day-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.day-name {
    font-weight: bold;
    font-size: 16px;
}

.day-date {
    margin-top: 5px;
    font-size: 14px;
    font-weight: bold;
}

.game-count {
    margin-top: 5px;
    font-size: 14px;
    font-weight: bold;
}
.no-games {
    color: darkgray;
}
.day-no-games {
    color: darkgray;
    background-color: grey;
    cursor: not-allowed;
}
.day-no-games:hover {
    color: darkgray;
    background-color: grey;
    cursor: not-allowed;
    transform: none;
}
.has-games {
    color: black;
}
.selected-day {
    background-color: var(--background-light);
    color: white;
    transform: scale(1.1);
    z-index: 1;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
.selected-day:hover {
    background-color: var(--background-light);
    color: white;
    transform: scale(1.1);
    z-index: 1;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
.selected-day .game-count {
    color: #ffffff;
}
/*calendar-body is the date cards*/
.calendar-body {
    display: flex;
    flex-wrap: nowrap; /* Prevents wrapping */
    justify-content: space-between;
    padding: 10px;
    color: black;
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent wrapping of child content */
    scrollbar-width: auto; /* Hide scrollbar for Firefox */
}

.calendar-body::-webkit-scrollbar {
    display: auto; /* Hide scrollbar for Chrome, Safari, and Edge */
}

.calendar-body::-webkit-scrollbar-thumb {
    background-color: #6c757d; /* Color of the thumb (scroll handle) */
    border-radius: 10px; /* Round edges for thumb */
}

/*game-list is the table containing the events*/
.games-list {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #fafafa;
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent wrapping of child content */
    scrollbar-width: auto;
}

.games-list::-webkit-scrollbar {
    display: auto;
}

.games-list::-webkit-scrollbar-thumb {
    background-color: #6c757d;
    border-radius: 10px;
}
.event {
    margin-bottom: 10px;
    color: black;
}
.select-box {
    background-color: white
}

.game-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 0.25rem;
}

.game-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}


.game-actions {
    text-align: right;
    flex-shrink: 0;
}


    .rounded-btn.past-event {
        background: #6c757d;
    }

        .rounded-btn.past-event:hover {
            background: #5a6268;
        }
.games-container {
    max-height: 500px;
    overflow-y: auto;
}

.game-item {
    background: var(--background-light);
    border: 1px solid #495057;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
}

    .game-item:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        transform: translateY(-1px);
        border-color: #6c757d;
    }

.game-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.game-matchup {
    font-weight: 600;
    font-size: 1.1rem;
    color: #f8f9fa;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.team-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 2px;
}
.game-time-cell,
.game-matchup-cell {
    white-space: nowrap; /* keeps text on a single line */
}

.game-time {
    background-color: var(--background-dark);
    border: 2px solid black;
    color: white; /* High contrast */
    font-weight: 600;
    font-size: 1rem;
    padding: 0.25rem 0.6rem;
    border-radius: 0.375rem;
    white-space: nowrap;
    display: inline-block;
    min-width: 64px;
    text-align: center;
}

.game-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-sport {
    background: #1e3a5f;
    color: #66b3ff;
    border: 1px solid #2d5aa0;
}

.badge-gender {
    background: #3d1a78;
    color: #c8a2c8;
    border: 1px solid #6f42c1;
}

.badge-league {
    background: #1e4620;
    color: #75dd75;
    border: 1px solid #198754;
}

/* ============== Buttons ============== */
/* --- Core --- */
.btn-secondary {
    background-color: var(--secondary-gray);
    color: white;
}
.btn-secondary:hover {
    background-color: var(--secondary-gray-hover) !important;
}
.btn-primary-light {
    background: var(--primary-light-hover);
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: none;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.btn-primary-light:hover {
    background: var(--primary-very-light);
    transform: translateY(-1px);
    text-decoration: none;
}
.btn-primary-dark {
    background: var(--primary-color-dark);
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: none;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.btn-primary-dark:hover {
    background: var(--primary-dark-hover);
    transform: translateY(-1px);
    text-decoration: none;
}
.btn-danger {
    border-radius: 6px;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: none;
    letter-spacing: 0.02em;
    text-decoration: none;
    background-color: #D3212D;
    border-color: #D3212D;
}
    .btn-danger:hover {
        transform: translateY(-1px);
        text-decoration: none;
        background-color: rgba(255,122,122, 1)
    }
.btn-rivur {
    border-radius: 6px;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: none;
    letter-spacing: 0.02em;
    text-decoration: none;
    background-color: #387093;
    border-color: #387093;
}

    .btn-rivur:hover {
        transform: translateY(-1px);
        text-decoration: none;
        background-color: #08223b;
    }

.btn-border-dark {
    background-color: var(--secondary-gray);
    color: #f8f9fa;
    border: var(--border-dark);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
}

    .btn-border-dark:hover {
        background-color: rgba(255,255,255,0.2);
        color: #f8f9fa;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
.rounded-btn {
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

    .rounded-btn:hover {
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    }
.watch-live-btn {
    background-color: var(--primary-blue);
}
    .watch-live-btn:hover {
        background-color: cornflowerblue;
    }
/* --- Show More Toggle Button --- */
.show-more-btn {
    background: var(--background-dark);
    border: var(--border-dark);
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-weight: 400;
    padding: 0.875rem 2.5rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    width: stretch;
    max-width: none;
}

    .show-more-btn:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.25);
        color: white;
        transform: translateY(-1px);
    }

    .show-more-btn:focus {
        outline: none;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.3);
    }

    /* Animated loading state */
    .show-more-btn.loading {
        pointer-events: none;
        opacity: 0.7;
    }

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
/* ============== Grouped Nav Tab Styles ============== */
.nav-tabs-dark {
    display: flex;
    background: #1a1a1a;
    border: 1px solid #404040;
    border-radius: 8px;
    padding: 4px;
    gap: 0;
    margin-bottom: 1rem;
}

    .nav-tabs-dark .nav-item {
        flex: 1;
        margin: 0;
    }

        .nav-tabs-dark .nav-item .nav-link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 12px 16px;
            background: transparent;
            border: none;
            border-radius: 6px;
            color: #888888;
            font-size: 0.9rem;
            font-weight: 500;
            text-decoration: none;
            transition: all 0.2s ease;
            cursor: pointer;
            margin: 0;
            width: 100%;
            text-align: center;
            white-space: nowrap;
        }

            .nav-tabs-dark .nav-item .nav-link:hover {
                background: #2d2d2d;
                color: #ffffff;
            }

            .nav-tabs-dark .nav-item .nav-link:focus {
                outline: none;
                box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.3);
            }

            .nav-tabs-dark .nav-item .nav-link.active,
            .nav-tabs-dark .nav-item .nav-link[aria-selected="true"] {
                background: #4285f4;
                color: #ffffff;
                box-shadow: 0 2px 4px rgba(66, 133, 244, 0.3);
            }

                .nav-tabs-dark .nav-item .nav-link.active:hover,
                .nav-tabs-dark .nav-item .nav-link[aria-selected="true"]:hover {
                    background: #3367d6;
                }

            .nav-tabs-dark .nav-item .nav-link i {
                font-size: 0.9rem;
                transition: transform 0.2s ease;
            }

/* ============== Alternative Compact Style ============== */
    .nav-tabs-dark.nav-tabs-compact {
        background: #2d2d2d;
        border: 1px solid #404040;
        border-radius: 6px;
        padding: 2px;
        display: inline-flex;
        gap: 0;
    }

        .nav-tabs-dark.nav-tabs-compact .nav-item {
            margin: 0;
        }

            .nav-tabs-dark.nav-tabs-compact .nav-item .nav-link {
                padding: 8px 12px;
                border-radius: 4px;
                font-size: 0.85rem;
                min-width: auto;
            }
/* ========================== Calendar ========================== */
/* --- Header / Nav --- */
.calendar-date-title {
    font-size: 1.5rem;
    font-weight: 550;
    text-align: center;
    color: #f8f9fa;
}

.calendar-nav-btn {
    background: var(--secondary-gray);
    border: var(--border-dark);
    color: #f8f9fa;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

    .calendar-nav-btn:hover {
        background: rgba(255,255,255,0.2);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }

    .calendar-nav-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        transform: none;
    }


.dark-container {
    background: var(--background-dark);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border: 1px solid #2d3439;
}

.calendar-header {
    position: relative; /* required for absolute center positioning */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
    background-color: #212529;
    color: #f8f9fa;
    border-bottom: 1px solid #495057;
    text-transform: uppercase;
}

.calendar-navigation {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.calendar-header-buttons {
    display: flex;
    gap: 1rem;
}
/* When screen < 800px, stack Current Month below */
@media (max-width: 1200px) {
    .calendar-header {
        flex-direction: column;
        align-items: center;
    }

    .calendar-header-buttons {
        order: 2; /* force it below navigation */
        justify-content: center;
        width: 100%;
        margin-top: 0.5rem;
    }

    .calendar-navigation {
        position: static; /* no absolute centering */
        transform: none;
        order: 1;
    }
}
/* --- Date Containers --- */
.day-of-week {
    font-weight: 600;
    color: #adb5bd;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}
.day-of-week-container {
    background: var(--background-light);
    padding: 0.75rem;
    text-align: center;
    border: 1px solid #495057;
}

    .day-of-week-container:last-child {
        border-right: none;
    }
.today .day-of-week {
    color: var(--primary-blue);
}
.day-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 0.25rem;
}

.day-number {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    color: #f8f9fa;
}

.today .day-number {
    color: var(--primary-blue);
    font-weight: 700;
}

.other-month .day-number {
    color: #6c757d;
}

.selected .day-number {
    color: white;
}



.number-text-badge {
    color: white;
    background-color: var(--primary-blue);
    font-weight: 575;
    font-size: 0.7rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    white-space: nowrap;
    transform: none;
}
    .number-text-badge.no-games {
        background: #6c757d;
    }
.number-only-badge {
    color: white;
    background-color: var(--primary-blue);
    font-weight: 575;
    font-size: 0.7rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    display: inline-flex;
    padding: 0.15rem 0.55rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

/* ====== Input Controls ====== */
/* --- Wrappers --- */
.page-controls-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}
/* --- Search Bars --- */
.search-container {
    flex: 1;
    max-width: 400px;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 12px;
    font-size: 0.9rem;
    z-index: 2;
}

.search-input {
    width: 100%;
    padding: 12px 16px 12px 40px;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

    .search-input:focus {
        outline: none;
        border-color: #4285f4;
        box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
    }

    .search-input::placeholder {
        color: #888888;
    }

.clear-search-btn {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    z-index: 2;
}

    .clear-search-btn:hover {
        color: #ffffff;
        background: #404040;
    }
.search-input-dark .search-input {
    background: #2d2d2d;
    border: 1px solid #404040;
    color: #ffffff;
}
    .search-input-dark .search-icon{
        color: #888888;
    }
    .search-input-dark .clear-search-btn {
        color: #888888;
    }

/* --- Sort Select --- */
.sort-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sort-select {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .sort-select:focus {
        outline: none;
        border-color: #4285f4;
        box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
    }

    
.sort-select-dark .sort-select {
    background: #2d2d2d;
    border: 1px solid #404040;
    color: #ffffff;
}

.sort-select-dark .sort-select option {
    background: #2d2d2d;
    color: #ffffff;
}

/* ====== Tables ====== */
.page-table {
    width: 100%;
}
    /* ========================== Header Styles ========================== */
    .page-table thead {
        background: #2d2d2d;
        border-bottom: 1px solid #404040;
    }

        .page-table thead th {
            padding: 16px 20px !important;
            text-align: left;
            font-weight: 500;
            font-size: 0.875rem;
            color: #e0e0e0;
            border: none !important;
            margin: 0 !important;
            line-height: 1.2;
            vertical-align: middle;
        }

            .page-table thead th i {
                margin-right: 8px;
                font-size: 0.8rem;
                color: #4285f4;
            }
.page-table tbody {
    background: #1a1a1a;
}

    .page-table tbody tr {
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #1a1a1a;
        transition: background-color 0.2s ease;
    }

        .page-table tbody tr:hover {
            background: #242424 !important;
        }

        .page-table tbody tr:not(:last-child) {
            border-bottom: 1px solid #2a2a2a !important;
        }

    .page-table tbody td {
        padding: 20px !important;
        vertical-align: middle !important;
        border: none !important;
        margin: 0 !important;
        line-height: 1.2;
        background: inherit;
    }
    .page-table tbody tr.page-table-row {
        border-top: none !important;
        border-bottom: 1px solid #2a2a2a !important;
    }

        .page-table tbody tr.page-table-row:first-child {
            border-top: none !important;
        }

        .page-table tbody tr.page-table-row:last-of-type {
            border-bottom: none !important;
        }

    .page-table tbody tr.package-details-row {
        border-top: none !important;
        border-bottom: none !important;
    }



/* ====== Paragraph ====== */
/* --- Wrappers --- */
.icon-description-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
}
.description-subtitle-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* --- Text --- */
.description-bold {
    font-weight: 500;
    font-size: 1rem;
    color: #ffffff;
    line-height: 1.2;
}
.description-subtitle {
    font-size: 0.75rem;
    color: #888888;
}
.description-icon i {
    color: white;
    font-size: 1.1rem;
}
.section-header {
    font-size: 2.25rem;
    font-weight: 500;
    color: white;
    margin: 0 0 2rem 0;
    padding: 1.5rem 0 0 0;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

/* ====== Modals ====== */
.modal-dark .modal-content {
    background: #1a1a1a;
    border: 1px solid #404040;
    border-radius: 8px;
}

.modal-dark .modal-header {
    background: #2d2d2d;
    border-bottom: 1px solid #404040;
    padding: 1.5rem;
}

.modal-title-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.modal-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #4285f4;
    border-radius: 8px;
    flex-shrink: 0;
}

.modal-icon-image {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
}

.modal-dark .modal-title {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.modal-subtitle {
    color: #888888;
    font-size: 0.875rem;
    margin: 0;
}

.modal-dark .modal-body {
    background: #1a1a1a;
    padding: 2rem;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-section {
    margin-bottom: 2rem;
}

    .modal-section:last-child {
        margin-bottom: 0;
    }

.modal-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #333333;
}

    .modal-section-title i {
        color: #4285f4;
        font-size: 1.1rem;
    }

.modal-dark .modal-footer {
    background: #2d2d2d;
    border-top: 1px solid #404040;
    padding: 1rem 1.5rem;
}

.modal-dark .btn-secondary {
    background: #666666;
    border-color: #666666;
    color: white;
}

    .modal-dark .btn-secondary:hover {
        background: #555555;
        border-color: #555555;
    }

/* =========== Video Card =========== */
.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
    transition: all 0.3s ease;
}

    .results-grid.col {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: center;
    }

        .results-grid.col.filtering-out {
            opacity: 0;
            transform: scale(0.8);
            pointer-events: none;
        }

        .results-grid.col.filtering-in {
            opacity: 1;
            transform: scale(1);
        }

        .results-grid.col.hidden-card {
            display: none;
        }
.video-card {
    background: var(--background-dark);
    border: var(--border-dark);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}


    .video-card:has(.video-thumbnail:hover) {
        transform: translateY(-2px);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
        border-color: white;
    }
    .video-card:hover {
        border-color: white;
    }

.video-thumbnail {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    background: #f8f9fa;
}

    .video-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

.video-thumbnail:hover img {
    transform: scale(1.05);
}

.thumbnail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-thumbnail:hover .thumbnail-overlay {
    opacity: 1;
}

.thumbnail-overlay i {
    color: white;
    font-size: 3rem;
}

.video-card-content {
    padding: 1.5rem;
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.video-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-card-description {
    color: #ffffff;
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0 0 1rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    
}


.show-more-container {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    padding: 0;
}
.badge-nav-link-hover:hover {
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.1);
}

.badge-nav-link {
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 5px 20px;
    color: white !important;
    text-decoration: none;
}

    .badge-nav-link:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }
.badge-nav {
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 5px 20px;
    color: white !important;
}
.hover-underline {
    position: relative;
    color: #cfd8dc;
    text-decoration: none;
    padding-bottom: 2px; /* gives room for underline */
}

    .hover-underline::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0%;
        height: 2px;
        background-color: #4a90e2; /* brand accent color */
        transition: width 0.3s ease;
    }

    .hover-underline:hover::after {
        width: 100%;
    }

    /* =====================================ADMIN VIEW TEMP===============================================*/
.dashboard-container {
    min-height: 100vh;
}

.dashboard-header {
    background: var(--primary-color-light);
    color: white;
    padding: 2rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.channel-card {
    background-color: transparent;
    padding: 0;
}

.channel-header {
    background: var(--primary-color-light);
    border-radius: 16px 16px 16px 16px;
    color: white;
    padding: 1.5rem;
    position: relative;
}

    .channel-header h3 {
        margin: 0;
        font-size: 1.5rem;
    }

.channel-link {
    color: #4fc3f7;
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

    .channel-link:hover {
        color: #81d4fa;
    }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.stat-card {
    background: var(--primary-color-light);
    padding: 1.25rem;
    border-radius: 16px;
    text-align: center;
    border: none;
}

.stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: white;
}

.stat-label {
    color: #888;
    font-size: 1rem;
    margin-top: 0.25rem;
}

.content-tabs {
}

.nav-tabs {
    border: none;
    padding: 0 1.5rem;
    padding-top: 1rem;
}

    .nav-tabs .nav-link {
        color: #f2f2f2;
        border: none;
        border-bottom: 3px solid transparent;
        padding: 0.75rem 1.25rem;
        margin-right: 0.5rem;
        transition: all 0.3s ease;
    }

        .nav-tabs .nav-link:hover {
            color: white;
            border-bottom-color: #e0e0e0;
        }

        .nav-tabs .nav-link.active {
            color: white;
            font-weight: 600;
            border-bottom-color: var(--primary-blue);
            background: transparent;
        }

.tab-content {
    padding: 1.5rem;
    background-color: transparent;
}

.stream-table {
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

    .stream-table table {
        margin-bottom: 0;
    }

    .stream-table th {
        background: #f8f9fa;
        font-weight: 600;
        color: #001C55;
        border-bottom: 2px solid #e0e0e0;
    }

.badge-live {
    background: #dc3545;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    animation: pulse 2s infinite;
}

@@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #999;
}

    .empty-state i {
        font-size: 3rem;
        color: #e0e0e0;
        margin-bottom: 1rem;
    }
.empty-state-container {
    background: var(--primary-color-light);
    border: 1px solid rgba(74, 158, 255, 0.1);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}



    /* Hover effect */
    .empty-state-container:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
        transition: all 0.3s ease;
    }
.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #001C55;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease;
}

    .action-btn:hover {
        background: #0056b3;
        color: white;
    }

.viewer-count {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 20px;
    font-size: 0.875rem;
}
/* Main table styles matching your dark theme */
.table-striped {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background: #1a1f3a;
    border-radius: 16px;
    overflow: hidden;
    margin: 0;
}

    .table-striped thead th:first-child {
        border-top-left-radius: 16px;
    }

    .table-striped thead th:last-child {
        border-top-right-radius: 16px;
    }

    .table-striped tbody tr:last-child td:first-child {
        border-bottom-left-radius: 16px;
    }

    .table-striped tbody tr:last-child td:last-child {
        border-bottom-right-radius: 16px;
    }
/* Table wrapper to ensure full width */
.table-responsive {
    padding: 0;
    margin: 0;
    overflow-x: auto;
}

/* Header with purple gradient matching your design */
.table-striped thead {
    background: var(--primary-color-light);
    width: 100%;
}

    .table-striped thead tr {
        background: transparent;
    }

    .table-striped thead th {
        padding: 16px 24px !important;
        text-align: left;
        font-weight: 600;
        font-size: 0.875rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #ffffff;
        border: none !important;
        background: transparent;
        white-space: nowrap;
    }

/* Table body styling */
.table-striped tbody {
    background: #1a1f3a;
}

    .table-striped tbody tr {
        background: #ffffff;
        border: none;
        transition: background-color 0.2s ease;
    }

        /* No striping - all rows white like your design */
        .table-striped tbody tr:nth-of-type(odd),
        .table-striped tbody tr:nth-of-type(even) {
            background-color: #ffffff;
        }

        .table-striped tbody tr:hover {
            background-color: #f8f9fa !important;
        }

        /* Row separators */
        .table-striped tbody tr:not(:last-child) td {
            border-bottom: 1px solid #e9ecef;
        }

    /* Cell styling */
    .table-striped tbody td {
        padding: 20px 24px !important;
        vertical-align: middle !important;
        border: none !important;
        color: #2c3e50;
        font-size: 0.925rem;
        background: inherit;
    }

        /* Stream name column */
        .table-striped tbody td:nth-child(1) {
            font-weight: 500;
            color: #1a1f3a;
        }

        /* View Stream link styling */
        .table-striped tbody td:nth-child(2) a {
            color: #4a9eff;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s ease;
        }

            .table-striped tbody td:nth-child(2) a:hover {
                color: #2e7dd2;
                text-decoration: underline;
            }

/* Show Details button styling to match your blue buttons */
.table-striped .btn-show-details,
.table-striped .btn-primary {
    background: #4a9eff;
    color: white !important;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: none;
    letter-spacing: 0.02em;
    text-decoration: none;
}

    .table-striped .btn-show-details:hover,
    .table-striped .btn-primary:hover {
        background: #2e7dd2;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(74, 158, 255, 0.3);
        text-decoration: none;
    }

.stream-table {
    background: transparent;
    padding: 0;
    margin: 0;
}

/* Remove any padding from parent containers */
.tab-content .stream-table {
    margin: -1.5rem;
    margin-top: 0;
}

/* Ensure the table takes full width of its container */
.tab-pane .stream-table {
    width: calc(100% + 3rem);
    margin-left: -1.5rem;
    margin-right: -1.5rem;
}

/* Fix for the header to span full width */
.table-striped thead th:first-child {
    padding-left: 24px !important;
}

.table-striped thead th:last-child {
    padding-right: 24px !important;
}
.table-striped .btn-primary {
    background-color: var(--primary-color-light) !important;
    border-color: var(--primary-color-light) !important;
}

    .table-striped .btn-primary:hover {
        background-color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .table-striped .btn-primary:active,
    .table-striped .btn-primary:focus {
        background-color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
    }
.actions-separator {
    color: #7f8c8d;
    margin: 0 4px;
}
/* Better approach - keep table cell display intact */
.table-striped td.flex-horizontal,
.table-responsive td.flex-horizontal {
    /* Remove display: flex from the td itself */
    white-space: nowrap !important;
    min-width: max-content;
    text-align: center;
}

    /* Apply flex to a wrapper div inside the td */
    .table-striped td.flex-horizontal .flex-wrapper,
    .table-responsive td.flex-horizontal .flex-wrapper {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: nowrap;
        justify-content: center;
    }

/* Or simpler approach without changing display */
.table-striped td.inline-horizontal,
.table-responsive td.inline-horizontal {
    white-space: nowrap !important;
    text-align: left; /* or center/right as needed */
}

    .table-striped td.inline-horizontal > *,
    .table-responsive td.inline-horizontal > * {
        display: inline-block;
        margin-right: 0.5rem;
        vertical-align: middle;
    }

        .table-striped td.inline-horizontal > *:last-child {
            margin-right: 0;
        }
/* --- Table that fits nicely inside a card body --- */
.dashboard-table {
    width: 100%;
    border-collapse: separate; /* keeps radius + separators clean */
    border-spacing: 0;
    margin: 0;
    background: transparent;
    border-radius: 12px; /* round the table block itself */
    overflow: hidden; /* clip header/last row to the radius */
}

    /* Header aligns with body padding, no extra inset */
    .dashboard-table thead {
        background: rgba(255,255,255,.05); /* light contrast on dark card */
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

        .dashboard-table thead th {
            padding: 14px 18px;
            text-align: left;
            font-weight: 700;
            font-size: .9rem;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: #fff;
            border-bottom: 1px solid rgba(255,255,255,.08);
            white-space: nowrap;
        }

            .dashboard-table thead th:first-child {
                border-top-left-radius: 12px;
            }

            .dashboard-table thead th:last-child {
                border-top-right-radius: 12px;
            }

    /* Body rows: subtle contrast + clean separators */
    .dashboard-table tbody {
        background: transparent;
    }

        .dashboard-table tbody tr {
            background: rgba(255,255,255,.05); /* light contrast on dark card */
            transition: background-color .12s ease;
        }

            .dashboard-table tbody tr + tr td {
                border-top: 1px solid rgba(255,255,255,.08);
            }

            .dashboard-table tbody tr:hover {
                background: rgba(255,255,255,.09);
            }

    /* Cells */
    .dashboard-table td {
        padding: 16px 18px;
        vertical-align: middle;
        border: 0;
        color: #dbe8ff;
        font-size: .95rem;
    }

        .dashboard-table td.emphasis {
            color: #fff;
            font-weight: 600;
        }

        .dashboard-table td.time {
            text-align: right;
            white-space: nowrap;
        }

    /* Round the very last row corners so the block looks finished */
    .dashboard-table tbody tr:last-child td:first-child {
        border-bottom-left-radius: 12px;
    }

    .dashboard-table tbody tr:last-child td:last-child {
        border-bottom-right-radius: 12px;
    }

    /* Empty-state row */
    .dashboard-table .empty-row td {
        color: #9fb3d9;
        font-weight: 600;
    }

    /* Optional compact density */
    .dashboard-table.compact th,
    .dashboard-table.compact td {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .dashboard-table .btn-primary {
        background-color: var(--primary-color-light) !important;
        border-color: var(--primary-color-light) !important;
        color: white !important;
        text-decoration: none;
    }

        .dashboard-table .btn-primary:hover {
            background-color: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            text-decoration: none;
        }

        .dashboard-table .btn-primary:active,
        .dashboard-table .btn-primary:focus {
            background-color: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
            box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
            text-decoration: none;
        }
/*================= backl to current ======================= */

.list-group-primary-light {
    background-color: var(--primary-color-light);
    border-radius: 16px;
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.list-group-primary-light .list-group-item {
    background-color: var(--primary-color-light);
}
    .list-group-primary-light .list-group-item .list-group-item-action {
        border-radius: 10px;
        background-color: #1a3366;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
/* Generic circular icon button */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.14);
    background: transparent;
    color: #dbe8ff; /* base icon color on dark bg */
    text-decoration: none;
    transition: background .15s ease,border-color .15s ease,transform .08s ease;
}

/* Danger variant */
.icon-btn-danger {
    color: #D3212D; /* light red */
    border-color: #D3212D;
}

    .icon-btn-danger:hover {
        background: rgba(255,122,122,.12);
        border-color: rgba(255,122,122,.9);
        transform: translateY(-1px);
    }

    .icon-btn-danger:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(255,122,122,.25);
    }

    .icon-btn-danger:active {
        transform: translateY(0);
    }
    .icon-btn-danger i {
        color: rgba(255,122,122, 0.9);
    }
    /* Red-themed tooltip (Bootstrap 5) */
    .tooltip-danger .tooltip-inner {
        background: rgba(220,53,69,.95); /* or var(--bs-danger) if you prefer */
        color: #fff;
    }

.tooltip-danger .tooltip-arrow::before {
    border-top-color: rgba(220,53,69,.95); /* top placement */
}

.tooltip-info .tooltip-inner {
    background: var(--primary-color-dark);
    color: #fff;
}

.tooltip-info .tooltip-arrow::before {
    border-top-color: var(--primary-color-dark); /* top placement */
}

.list-view-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}