/* Basic styles */
body {
    font-family: Arial, sans-serif;
    padding: 0;
    margin: 0px;
}

.table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: block;
/*    padding: 5px; */
    padding-bottom: 30px;
}

table.practice-order-table {
    width: 100%;
    border-collapse: collapse;
    margin: 5px 0;
    table-layout: auto; /* Allow columns to adjust naturally */
    font-size: 12px; /* Slightly increase font size for better readability */
}

.header-row {
    background-color: #ff6300; /* Header background color */
    color: black; /* Header text color */
    text-align: center; /* Center text */
    font-weight: bold;
    height: 35px;
    width: 100%; /* Full width */
}

.current-race {
    color: red;
    font-weight: bold;
}

.next-race {
    color: green;
    font-weight: bold;
}


.title-cell {
    font-size: 24px; /* Title font size */
    padding: 10px; /* Padding around the title */
        width: 100%; /* Full width */
}

.logo-row {
    height: 20px; /* Height for the logo row */
    text-align: center; /* Center text */
    width: 100%; /* Full width */
}

.logo-cell {
    width: 20px; /* Width for the logo cell */
    text-align: center; /* Center logo */
    font-weight: bold;
    font-size: 18px;
    
}

.responsive-logo {
    max-width: 20%; /* Scale logo */
    height: auto; /* Maintain aspect ratio */
}

.event-name {
    font-size: 24px; /* Adjust the font size */
    color: black; /* Text color */
    text-align: center; /* Center align the text */
    font-weight: bold; /* Make text bold if needed */
}

.table-header-row {
    background-color: #ff6300; /* Header row background color */
    text-align: center; /* Center logo */
    width: 100%; /* Full width */
    height: 35px;
    border: 2px solid black;
}

.results-header-row {
    background-color: #ff6300; /* Header background color */
    color: black; /* Header text color */
    text-align: center; /* Center text */
    font-weight: bold;
    height: 35px;

}

#profile-section {
    padding-bottom: 80px;
}

/* Base layout */
#emxLinkedRidersList { margin:.25rem 0 0 0; padding:0; list-style:none; }

.emx-rider-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;                 /* allow wrapping on small screens */
}

/* Columns */
.emx-col-active  { width:120px; display:flex; align-items:center; gap:.35rem; white-space:nowrap; }
.emx-col-include { width:100px; display:flex; align-items:center; gap:.35rem; white-space:nowrap; }
.emx-col-rider   { flex:1 1 auto; min-width:0; }
.emx-col-actions { display:flex; gap:.5rem; justify-content:flex-end; white-space:nowrap; }

/* Buttons (slightly tighter on small screens) */
.emx-col-actions .emx-btn { padding:.35rem .6rem; }

/* "Select all" bar wrap on small screens */
#emxMultiSelectBar { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }

/* ---------- Mobile-first responsive rules ---------- */
@media (max-width: 640px) {
  /* Put Active + Include on the first line, rider name on its own line */
  .emx-col-active   { width:auto; order:1; }
  .emx-col-include  { width:auto; order:2; }
  .emx-col-rider    { flex-basis:100%; order:3; }   /* full width line */
  .emx-col-actions  { order:4; margin-left:auto; }  /* stays at end */

  /* Slightly smaller text to avoid wrapping too early */
  .emx-col-rider { font-size: .98rem; }
  .emx-col-actions .emx-btn { padding:.3rem .55rem; font-size:.95rem; }
}

/* Optional: very narrow screens */
@media (max-width: 380px) {
  .emx-col-actions { width:100%; justify-content:flex-start; gap:.4rem; }
}



@keyframes pulseHighlight {
  0%   { background-color: #ff2d2d; }  /* Live red */
  50%  { background-color: #ff9999; } /* Soft red */
  100% { background-color: #ff2d2d; }
}

.active-race-row.highlighted-race {
  animation: pulseHighlight 1.2s ease-in-out infinite;
  font-weight: bold;
  color: white !important;
  transition: background-color 0.3s ease;
}

.active-race-row {
    animation: pulseHighlight 1.2s ease-in-out infinite;
  font-weight: bold;
  color: white !important;
  transition: background-color 0.3s ease;
}

.table-header-cell {
    padding: 0px; /* Padding for header cells */
    text-align: center; /* Center align the text in header cells */
    width: auto; /* Full width */
}

/* Adjust cell widths */
.table-header-cell:first-child, /* Practice Group */
.table-header-cell:nth-child(2) { /* Class */
    width: auto; /* Adjust width of these columns */
}

.table-header-cell:last-child { /* # Riders */
    width: auto; /* Adjust width of this column */
    text-align: center; /* Center logo */
}

.table-cell {
    padding: 8px;
    text-align: center;
    border: 1px solid #ddd;
    width: auto; /* Allow table to scale based on content */
}

/* Footer Row */
.footer-row {
    background-color: #f2f2f2; /* Light grey background for the footer */
    text-align: center; /* Center align text */
    font-weight: bold; /* Make text bold */
    padding: 1px; /* Add padding for spacing */
    font-size: 1rem; /* Adjust font size for the footer */
}

.footer-logo {
    max-width: 80px; /* Adjust logo size for the footer */
    height: auto; /* Maintain aspect ratio */
}

.powered-by {
    font-size: 0.9rem; /* Slightly smaller font for the powered by text */
}

.camera-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }
        iframe {
            width: 640px;
            height: 480px;
        }
        
.practice-order-table th,
.practice-order-table td {
    padding: 4px 3px;
    text-align: center;
    white-space: nowrap;
}

.practice-order-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 10px;
}

.practice-order-table .header-row .title-cell {
    font-size: 1.5em;
    padding: 6px;
}
   
.table-headerdate-cell {
    min-width: 10px;
    width: 15px;
    padding: 2px 3px;
    font-size: 12px;
    white-space: nowrap;
}        

/* Responsive Design */
@media screen and (max-width: 720px) {
    table.practice-order-table {
        font-size: 10px; /* Smaller font size on small screens */
        
    }
    
    .table-header-cell, .table-cell {
        padding: 4px; /* Less padding on smaller screens */
    }

    .title-cell {
        font-size: 10px; /* Smaller title font size */
    }

    .responsive-logo {
        max-width: 80px; /* Smaller logo on small screens */
    }
}