/* Light theme (default) */
:root {
    --primary-color: #0088cc;
    --primary-light: #0d6efd;
    --primary-dark: #0056b3;
    
    --bg-primary: #f8f9fa;
    --bg-secondary: #e9ecef;
    --bg-tertiary: #dee2e6;
    
    --text-primary: #212529;
    --text-secondary: #495057;
    --text-select-gradient: linear-gradient(to right, #0d6efd, #3d8bfd) 1;
    --border-gradient: linear-gradient(to right, #0d6efd, #3d8bfd) 1;

    /* Results specific */
    --sport-bg: #e9ecef;
    --sport-tab-hover: #ced4da;
    --sport-tab-active: #0088cc;
    --sport-tab-active-text: #ffffff;
    
    --summary-stat-bg: #ffffff;
    --summary-label: #6c757d;
    
    --feature-card-bg: #ffffff;
    --feature-card-shadow: rgba(0, 0, 0, 0.1);
    --feature-title: #0088cc;
    
    --cta-gradient: linear-gradient(90deg, #0088cc, #0d6efd);
    --cta-text: #ffffff;
    --cta-shadow: rgba(13, 110, 253, 0.3);
    
    --event-bg: #ffffff;
    --event-header-bg: #e9ecef;
    --event-header-hover: #dee2e6;
    --event-header-title: #0088cc;
    --event-border: #dee2e6;
    
    --table-header-bg: #e2e6ea;
    --table-row-hover: #f8f9fa;
    --table-border: #dee2e6;
}

/* Dark theme */
[data-theme="dark"] {
    --primary-color: #00dbfd;
    --primary-light: #3d8bfd;
    --primary-dark: #0a58ca;
    
    --bg-primary: #212121;
    --bg-secondary: #121212;
    --bg-tertiary: #0c0c0c;
    
    --text-primary: #f8f9fa;
    --text-secondary: #adb5bd;
    --text-select-gradient: linear-gradient(to right, #0000ff, #00ffff) 1;
    --border-gradient: linear-gradient(to right, #0000ff, #00ffff) 1;

    /* Results specific */
    --sport-bg: #1a1a1a;
    --sport-tab-hover: #333;
    --sport-tab-active: #00c8ff;
    --sport-tab-active-text: #000;
    
    --summary-stat-bg: #1a1a1a;
    --summary-label: #aaa;
    
    --feature-card-bg: #1a1a1a;
    --feature-card-shadow: rgba(0, 0, 0, 0.3);
    --feature-title: #00c8ff;
    
    --cta-gradient: linear-gradient(90deg, #00c8ff, #00e1ff);
    --cta-text: #000;
    --cta-shadow: rgba(0, 200, 255, 0.5);
    
    --event-bg: #1a1a1a;
    --event-header-bg: #292929;
    --event-header-hover: #333;
    --event-header-title: #00c8ff;
    --event-border: #333;
    
    --table-header-bg: #222;
    --table-row-hover: #222;
    --table-border: #333;
}

/* Apply monospace font to all text elements */
body, h1, h2, h3, h4, h5, h6, p, span, div, table, th, td, a, button, input {
    font-family: monospace, serif !important;
}

/* Specifically target event stats to ensure they use monospace */
.event-stat,
.event-stat span,
.event-roi,
.profit-positive,
.profit-negative,
.dropdown-arrow {
    font-family: monospace, serif !important;
}


/* Force content to be wider */
.content-section {
    width: 95% !important;
    max-width: 87.5rem !important;  /* 1400px */
    margin: 0 auto !important;
}

/* Force table container to be wide with horizontal scroll */
.event-container {
    width: 100% !important;
    overflow-x: auto !important;
    background-color: var(--bg-secondary);
}

/* Make tables wide */
.bets-table {
    width: 100% !important;
    min-width: 1000px !important;
}

.bets-table th {
    font-size: 16px !important;
}

/* Prevent text wrapping in cells */
.bets-table th,
.bets-table td {
    white-space: nowrap !important;
}

/* Sport filter navigation styling */
.sport-filter {
    display: flex;
    background-color: var(--sport-bg);
    border-radius: 0.5rem;          /* 8px */
    overflow: hidden;
    margin-bottom: 1.25rem;         /* 20px */
}

.sport-tab {
    padding: 0.75rem 1.5rem;        /* 12px 24px */
    color: var(--text-primary);
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    flex: 1;
    transition: background-color 0.2s ease;
}

.sport-tab:hover {
    background-color: var(--sport-tab-hover);
}

.sport-tab.active {
    background-color: var(--sport-tab-active);
    color: var(--sport-tab-active-text);
}

.sport-tab.all {
    background-color: var(--sport-bg);
}

.sport-tab.all.active {
    background-color: var(--sport-tab-active);
}

.sport-tab.afl {
    background-color: var(--sport-bg);
}

.sport-tab.afl.active {
    background-color: var(--sport-tab-active);
}

.sport-tab.nrl {
    background-color: var(--sport-bg);
}

.sport-tab.nrl.active {
    background-color: var(--sport-tab-active);
}

.chart-container {
    display: flex;
    justify-content: center;
    margin: 30px auto;
    width: 100%;
    max-width: 1000px; /* Adjust as needed */
  }
  
/* The iframe itself */
.chart-container iframe {
border: none;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: 4px;
}

/* Results summary styling */
.results-summary {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.938rem;                  /* 15px */
    margin: 1.563rem 0;             /* 25px 0 */
}

.summary-stat {
    background-color: var(--summary-stat-bg);
    border-radius: 0.5rem;          /* 8px */
    padding: 0.938rem 1.25rem;      /* 15px 20px */
    flex: 1;
    min-width: 9.375rem;            /* 150px */
    text-align: center;
}

.summary-value {
    font-size: 1.5rem;              /* 24px */
    font-weight: bold;
    margin: 0.313rem 0;             /* 5px 0 */
}

.summary-label {
    color: var(--summary-label);
    font-size: 0.875rem;            /* 14px */
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.feature-card {
    background-color: var(--feature-card-bg);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px var(--feature-card-shadow);
}

.feature-card h3 {
    color: var(--feature-title);
    margin-bottom: 10px;
}

.cta-button {
    display: inline-block;
    background: var(--cta-gradient);
    color: var(--cta-text);
    font-weight: bold;
    padding: 12px 25px;
    border-radius: 4px;
    text-decoration: none;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.cta-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px var(--cta-shadow);
}

/* Styles for the event containers and tables */
.event-container {
    background-color: var(--event-bg);
    border-radius: 8px;
    overflow-x: auto; /* Add horizontal scrolling for small screens */
    overflow-y: scroll;
    margin-top: 1.25rem;            /* 20px */
    margin-bottom: 0.938rem;        /* 15px */
    color: var(--text-primary);
    width: 100%; /* Take full width */
}

.event-header {
    background-color: var(--event-header-bg);
    padding: 0.938rem 1.25rem;      /* 15px 20px */
    border-bottom: 0.063rem solid var(--event-border);  /* 1px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.event-header:hover {
    background-color: var(--event-header-hover);
}

.event-header h3 {
    margin: 0;
    color: var(--event-header-title);
    font-size: 1.125rem;            /* 18px */
}

.event-stats {
    display: flex;
    align-items: center;
    font-family: monospace, serif !important;
    gap: 0.938rem;                  /* 15px */
}

.event-stat {
    color: var(--text-primary);
    font-size: 0.875rem;            /* 14px */
    font-family: monospace, serif !important;
}

.event-roi {
    font-weight: bold;
}


.dropdown-arrow {
    color: var(--event-header-title);
    transition: transform 0.3s ease;
}

.event-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    width: 100%;
}

.bets-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

.bets-table th {
    white-space: nowrap;
    background-color: var(--table-header-bg);
    color: var(--text-primary);
    text-align: left;
    padding: 0.75rem 0.938rem;      /* 12px 15px */
    font-weight: normal;
    font-size: 0.688rem;            /* 11px */
}

.bets-table td {
    white-space: nowrap;
    padding: 0.75rem 0.938rem;      /* 12px 15px */
    border-bottom: 1px solid var(--table-border);
    color: var(--text-primary);
}

/* Specific width adjustments for columns */
.bets-table th:nth-child(1), 
.bets-table td:nth-child(1) { /* Date */
    width: 8%;
}

.bets-table th:nth-child(2), 
.bets-table td:nth-child(2) { /* Match */
    width: 20%;
}

.bets-table th:nth-child(3), 
.bets-table td:nth-child(3) { /* Type */
    width: 10%;
}

.bets-table th:nth-child(4), 
.bets-table td:nth-child(4) { /* Stake */
    width: 6%;
}

.bets-table th:nth-child(5), 
.bets-table td:nth-child(5) { /* Odds */
    width: 6%;
}

.bets-table th:nth-child(6), 
.bets-table td:nth-child(6) { /* Betting Line */
    width: 10%;
}

.bets-table th:nth-child(7), 
.bets-table td:nth-child(7) { /* Closing Line */
    width: 10%;
}

.bets-table th:nth-child(8), 
.bets-table td:nth-child(8) { /* CLV */
    width: 6%;
}

.bets-table th:nth-child(9), 
.bets-table td:nth-child(9) { /* Result */
    width: 8%;
}

.bets-table th:nth-child(10), 
.bets-table td:nth-child(10) { /* Profit */
    width: 8%;
}

.bets-table tr:hover {
    background-color: var(--table-row-hover);
}

.empty-bets {
    padding: 30px;
    text-align: center;
    color: var(--text-primary);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 0.625rem;                /* 10px */
    height: 0.625rem;               /* 10px */
}

::-webkit-scrollbar-thumb {
    border-radius: 0.313rem;        /* 5px */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sport-tab {
        padding: 0.625rem 0.938rem;  /* 10px 15px */
        font-size: 0.875rem;         /* 14px */
    }
    
    .summary-stat {
        min-width: 100%;
        margin-bottom: 0.625rem;     /* 10px */
    }
    
    .event-header {
        padding: 0.75rem 1rem;       /* 12px 16px */
    }
}

/* Tablet specific adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .content-section {
        max-width: 60rem !important; /* 960px */
    }
    
    .summary-stat {
        min-width: 7.5rem;          /* 120px */
    }
}