body { font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; margin: 0px; padding: 0px; }
h2, h3 { width: 100%; display: block; margin: 0; padding: 0; color: #1434a4; }
h2 { font-size: 1.1em; margin-bottom: 0.25em; }
h3 { font-weight: normal; font-size: 1em; color: #555; }
#loading { padding: 1em; text-align: center; font-size: 1.2em; color: darkblue; background-color: lightyellow; border: 2px solid orange; margin: 1em; }
form { display: flex; flex-wrap: wrap; gap: 0.25em; padding: 0.5em; background-color: #1434a4; border-bottom: 3px solid #0a1a52; }
form.v5 { background-color: #8b0000; border-bottom-color: #5a0000; }
form select { background-color: white; }
body .container { overflow-x: hidden; position: relative; }
#content { padding: 0.75em; }
a, a:visited, a:hover, a:active { color: inherit; } /* No anchor color changes */
a.secret-link { text-decoration:none; }

/* Event header styling */
.event-header {
    background: #f8f8f8;
    border: 3px solid #999;
    border-radius: 6px;
    padding: 0.75em;
    margin-bottom: 1em;
}
.event-header h2 { margin-bottom: 0.25em; }
.event-header h3 { margin-bottom: 0; }
.event-status { display: inline-block; padding: 0.2em 0.5em; border-radius: 4px; font-size: 0.9em; }
.event-status.in-progress { background: #ffd700; color: #333; font-weight: bold; }
.event-status.completed { background: #4a4; color: white; }

/* Grade section header */
.grade-header {
    background: #1434a4;
    color: white;
    padding: 0.5em 0.75em;
    border-radius: 6px 6px 0 0;
    border: 1px solid #1434a4;
    border-bottom: none;
    margin-top: 1em;
    margin-bottom: 0;
    font-weight: bold;
}
.grade-header a { color: white; }
.grade-header.v5 { background: #8b0000; border-color: #8b0000; }
.v5 h2 { color: #8b0000; }

.table { width: 100%; border-collapse: collapse; border: 1px solid #999; border-top: none; overflow: hidden; }
.table .row { width: 100%; }
.table tr.tableHeader { height: 2em; background-color: #1434a4; color: white; font-weight: bold; border-bottom: 1px solid #999; }
.v5 .table tr.tableHeader { background-color: #8b0000; }
.table tr.tableHeader .cell { vertical-align: middle; }
.table .tableHeader .cell { border: 0px; border-bottom: 1px solid #999; }
.table .cell { border: 1px solid #ccc; padding: 0.2em; vertical-align: top; }
.table .row .delta .negative { color:red; }
.table .row .delta .positive { color:darkgreen }

.table .teamHeader { font-weight: bold; background-color: #e8f0ff; border-top: 2px solid #1434a4; }
.v5 .table .teamHeader { background-color: #ffe8e8; border-top-color: #8b0000; }
.table .teamHeader .c5 { border: none; padding: 0; width: 0; }
.table .teamHeader.focused { background-color: #fffacd; }
.table .teamHeader.pending { background-color: #f0f0f0; }
.table .label { width: 100%; }
.table .label .mobile-rank { display: none; } /* Hidden on desktop */
.table .label .teamOrg, .table .label .teamRegion { font-size: 70%; font-weight: normal; }
.table .label .teamRegion { color: #666; }
.table .label .teamworkScores { display: block; margin-left: 0.5em; }
.table .label summary { cursor: pointer; }
.table .world,
.table .tries,
.table .score,
.table .delta { text-align: right; min-width: 3.5em; padding-right:0.25em; font-weight:normal; }
.table .world { color: #7bb6de; overflow: hidden; }
.table .world .region-rank,
.table .world .world-rank { white-space: nowrap; }
.table .number { width: 2em; text-align: left; }
.table .attention { background-color: #ffe0e0; }
.table .notes { text-align: center; min-width: 8em; background-color: #f0f0f0; border-left: 2px solid #1434a4; }
.table tr.tableHeader .notes { background-color: transparent; border-left-color: rgba(255,255,255,0.3); }
.table .top30 { background-color: #c8e6c8; }
.table .teamwork { padding-bottom: 10px; }
.table .teamwork .dq { color: darkred; background-color: yellow; font-weight: bold; }
.table .teamwork .drop .dq { color: grey; background-color: lightgrey; }
.table .notes:has(.qualifying) { background-color: #4a4; color: white; }
.table .notes:has(.ranking),
.table .notes:has(.eliminated) { background-color: #888; color: white; }
.table .eliminated { color: #c44; }
.table .ranking { color: #1434a4; }
.table .notes .icon { display: none; }
.table .notes .text { display: block; font-size: 0.85em; }

/* OVERVIEW table */
.overview {width:100%; border:1px solid #999; border-collapse:collapse; border-radius: 0 0 6px 6px; overflow: hidden;}
.overview a {text-decoration:none;}
.overview tr.majorHeader {font-size:130%; font-weight:bold;}
.overview tr.majorHeader, .overview tr.minorHeader {text-align:center;background-color:#1434a4; color:white;}
.v5 .overview tr.majorHeader, .v5 .overview tr.minorHeader {background-color:#8b0000;}
.overview tr.majorHeader .cell {padding:0.5em;}
.overview tr.majorHeader .c1 {width:40%;}
.overview tr.majorHeader .c2 {width:30%;}
.overview tr.majorHeader .c3 {width:30%;}
.overview td {border:1px solid #ccc;}
.overview .cell {padding:0.25em; text-align:center;}
.overview .data td.c2, .overview .data td.c6, .overview .data td.c10 {text-align:left;}
.overview td.top30 {background-color:#afe1af;}
.overview td.top30.focused {background-color:#ecffdc;}
.overview td.focused {background-color: yellow;}
.overview td.isExcellenceQualified {font-weight:bold;color:blue;}
.overview td.isExcellenceAwarded {background-color:lightpink;}
.overview td.isExcellenceAwarded.teamName:after {content: ' 🏆';}
.overview .majorHeader td {border-right:1px solid #999;}
.overview td.c1 {border-left:1px solid #999;}
.overview td.c4, .overview td.c8, .overview td.c12 {border-right:1px solid #999;}

select { font-size:large; padding: 5px; background-color: lightyellow; margin-bottom: 0.25em; }
#et { min-width: 4em; }
#sku { width: 50%; }
#sort { width: 22%; }
.grade { width: 10%; display: inline; }
select.focused { width: 10%; }
select.focused li[selected='selected'] {background-color:yellow ;}
.wide { display: inline; }
.thin { display: none; }

ul.awards { margin: 5px; font-weight: normal; color: indianred; list-style-type: '🏆'; padding-left: 0.75em; font-weight: bold; }
ul.awards li { padding-left: 10px; }

footer { margin: 10px; margin-left: 20px; margin-bottom: 50px; font-size: 70%; color: darkblue; border-top: 1px solid; padding-top: 12px; }

/* Modal overlay for TeamPage */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 5vh;
    overflow-y: auto;
}
.modal-content {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    background-color: #1434a4;
    color: white;
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
}
.modal-header-v5 {
    background-color: #8b0000;
}
.modal-header h2 {
    margin: 0;
    color: white;
    font-size: 1.2em;
}
.modal-header a {
    color: white;
}
.modal-close, .modal-back {
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    padding: 0 0.5em;
    text-decoration: none;
}
.modal-close:hover, .modal-back:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}
.modal-back {
    margin-right: 0.5em;
}
.modal-body {
    padding: 1em;
    overflow-y: auto;
    flex: 1;
}
.modal-body > h3 {
    margin: 0;
    padding: 0;
}
#teamModalContent {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;  /* Important for flex child scrolling */
}
/* Match table - responsive grid layout */
.match-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
}
.match-row {
    display: table-row;
}
.match-row:nth-child(even) {
    background-color: #f9f9f9;
}
.match-row.pending {
    background-color: #f5f5f5;
    color: #888;
}
.match-row.played {
    background-color: #f0fff0;
}
.match-header {
    background-color: #e8e8e8;
    font-weight: bold;
    font-size: 0.85em;
    color: #555;
}
.match-cell {
    display: table-cell;
    padding: 0.5em 0.4em;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: middle;
}
.time-col {
    width: 5.5em;
    white-space: nowrap;
}
.match-col {
    width: 3.5em;
    text-align: center;
    font-weight: bold;
}
.score-col {
    width: 3.5em;
    text-align: center;
}
.partner-col {
    /* Takes remaining space */
}
.rank-col {
    width: 3.5em;
    text-align: center;
    color: #666;
}
.gap-col {
    width: 3em;
    text-align: right;
    color: #999;
}
.actual-time {
    color: #080;
    font-size: 0.85em;
}
.not-played {
    color: #aaa;
}
.match-table .dq {
    color: red;
    font-weight: bold;
}
.partner-rank {
    color: #666;
}
.partner-name {
    color: #888;
}
.vs-opponents {
    color: #999;
}
.win {
    color: darkgreen;
}
.loss {
    color: darkred;
}
.gap-hours {
    color: darkred;
    font-weight: bold;
}
.modal-footer {
    padding: 1em;
    background-color: #f5f5f5;
    border-radius: 0 0 8px 8px;
    font-size: 0.8em;
    color: #666;
}

/* Team stats grid */
.team-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5em;
    margin-bottom: 1em;
}
.stat-box {
    padding: 0.75em;
    border-radius: 4px;
    border: 1px solid #999;
}
.stat-secondary {
    font-size: 0.85em;
    color: #555;
    margin-top: 0.2em;
}
.stat-teamwork {
    background: #f0f8ff;
}
.stat-qual {
    background: #fff0f0;
}
.stat-skills {
    background: #fff8f0;
}

/* VEX Via style match cards */
.via-match-list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.via-match-card {
    border: 1px solid #999;
    border-radius: 6px;
    overflow: hidden;
    background: white;
}
.via-match-card.pending {
    opacity: 0.7;
}
.via-match-card.played {
    border-color: #999;
}
.via-match-card .match-info {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.4em 0.6em;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    font-size: 0.9em;
}
.via-match-card .match-num {
    font-weight: bold;
    min-width: 3em;
}
.via-match-card .field {
    color: #666;
    font-size: 0.9em;
}
.via-match-card .match-times {
    margin-left: auto;
    display: flex;
    gap: 0.5em;
    align-items: center;
    color: #666;
}
.via-match-card .match-times .time {
    font-weight: 500;
}
.via-match-card .match-times .actual-time {
    color: #080;
    font-size: 0.85em;
}
.via-match-card .match-times .gap {
    font-size: 0.85em;
    color: #999;
}
.via-match-card .alliance {
    display: flex;
    align-items: center;
    padding: 0.5em 0.6em;
    gap: 0.5em;
}
.via-match-card .red-alliance {
    background: #ffe8e8;
    border-bottom: 1px solid #fcc;
}
.via-match-card .blue-alliance {
    background: #e8e8ff;
}
.via-match-card .teams {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    gap: 0.5em;
}
/* V5 two-column layout for alliance teams */
.via-match-card .team-col {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.via-match-card .teams a {
    text-decoration: underline;
    font-weight: bold;
}
.via-match-card .teams a.my-team {
    /* "My team" uses alliance color for text */
}
.via-match-card .teams .my-team-red {
    color: #c00;
}
.via-match-card .teams .my-team-blue {
    color: #00c;
}
.via-match-card .team-info {
    display: inline;
}
.via-match-card .team-number {
    font-weight: bold;
}
.via-match-card .team-name {
    color: #555;
    font-size: 0.9em;
    margin-right: 0.5em;
}
.region-rank {
	color: #e79984;
}
.world-rank {
    color: #7bb6de;
}
.via-match-card .team-rank {
    font-size: 0.85em;
}
.via-match-card .score {
    font-weight: bold;
    font-size: 1.1em;
    min-width: 2.5em;
    text-align: right;
}
.via-match-card .score.win {
    color: #080;
}

@media only screen and (min-width: 1000px) { /* Desktop? */
    #topNav { position:fixed; width: 100%; top: 0px; z-index: 100; }
    body .container { padding-top: 3.7em; }
    #content { margin-left: 1em; margin-right: 1em; }
}

@media only screen and (max-width: 980px) { /* iPhone 12 Pro width = 980px */
/* @media (hover: none) { */
    /* custom css for devices where the primary input mechanism cannot hover 
    at all or cannot conveniently hover */
body { font-size: 2em;}
body .container { margin: 0px; }
/* Remove event-header box styling on mobile */
.event-header { background: none; border: none; border-radius: 0; padding: 0; margin-bottom: 0.5em; }
form {border-bottom: 5px solid darkgrey; min-width: 100%; }
table { min-width: 100%; }
.suffix { display:none; }
select { font-size:1.5em; padding: 5px; background-color: lightyellow; }
#et { min-width: 4em; }
#sku { width: 50%; }
/* Mobile table improvements */
.table { table-layout: fixed; } /* Fixed layout for consistent columns */
/* Hide c1 column entirely on mobile */
.table .c1 { display: none; }
/* Show mobile-rank in label and indent team details */
.table .label .mobile-rank { display: inline; font-size: 1.1em; margin-right: 0.3em; }
.table .label .team-details { display: block; margin-left: 1.5em; }
.table .label { overflow-x: hidden; }
.table .c2 { width: auto; } /* Let label expand */
.grade-header { border-radius: 0 0 0 0; margin-top: 0px;}
.table .tries,
.table .score { text-align: right; min-width: 2.5em; padding-right: 0.2em; font-size: 0.9em; }
/* Reduce region and world rank font size and fix overflow */
.table .teamHeader .world { font-size: 0.85em; width: 3em; max-width: 3em; overflow: hidden; }
.table .c6.world { width: 3em; max-width: 3em; }
/* Allow line breaks in QUAL scores on mobile only */
.table .score { max-width: 4em; word-break: break-all; }
.table tr.teamHeader { border-top-width: 0.2em; }
.table .teamHeader .label { font-size: 0.95em; }
.table .label .teamOrg { display: block; }
.table .label .teamRegion { display: block; font-size: 0.8em; }
.table .notes { min-width: 1.8em; width: 1.8em; padding: 0.1em; }
.table .notes .icon { display: block; }
.table .notes .text { display: none; }
/* Condense skills rows */
.table .driverSkills .label,
.table .programmingSkills .label,
.table .robotSkills .label,
.table .teamwork .label,
.table .qualRanking .label { font-size: 0.85em; }
/* Indent awards list on mobile to match team-details */
ul.awards { margin: 2px 0 2px 1.5em; padding-left: 1.2em; font-size: 0.75em; list-style-position: outside; }
ul.awards li { padding-left: 0.2em; }
/* Reorder form elements on mobile: Focus dropdown becomes 2nd */
#et { order: 1; }
#sku { order: 3; width: 95%; }
#sort { order: 4; width: 65%; display: inline; }
#gradeWide { order: 5; }
#gradeThin { order: 6; }
#focusTeamNumbers { order: 2; }
.grade { width: 28.5%; }
select.focused { width: 35%; }
.wide { display: none; }
.thin { display: inline; }

/* Match table mobile adjustments */
.match-table { font-size: 0.85em; }
.match-cell { padding: 0.4em 0.25em; }
.time-col { width: 4.5em; }
.rank-col { width: 3em; }
.gap-col { width: 2.5em; }
.partner-name { display: none; } /* Hide partner name on mobile to save space */
.modal-footer { display: none; } /* Hide event name footer on mobile */

/* Full-screen modal on mobile */
.modal-backdrop {
    padding-top: 0;
    align-items: stretch;
}
.modal-content {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
}
.modal-header {
    border-radius: 0;
    padding: 0.5em;
}
.modal-body {
    padding: 0.5em;
}
.modal-body > h3 {
    margin: 0;
    padding: 0;
}
#teamModalContent {
    height: 100%;
}

/* Team stats mobile - stack vertically */
.team-stats-grid { grid-template-columns: 1fr; }

/* VEX Via match cards mobile adjustments */
.via-match-card .match-info { font-size: 0.85em; padding: 0.3em 0.5em; }
.via-match-card .alliance { padding: 0.4em 0.5em; font-size: 0.9em; }
.via-match-card .match-times .gap { font-size: 0.85em; } /* Smaller gap text on mobile */
/* Stack V5 alliance teams vertically on mobile */
.via-match-card .teams { flex-direction: column; gap: 0.2em; }
/* Mobile: reorder team info (number + rank on line 1, name on line 2) */
.via-match-card .team-info { display: flex; flex-wrap: wrap; align-items: baseline; }
.via-match-card .team-number { order: 1; margin-right: 0.3em; }
.via-match-card .team-rank { order: 2; }
.via-match-card .team-name { order: 3; width: 100%; font-size: 0.8em; margin-top: 0.1em; }

/* Event page mobile adjustments */
#content { padding: 0; }
.event-header { padding: 0.25em 0.25em 0 0.25em; }
.event-header h2 { font-size: 1em; }
.event-header h3 { font-size: 0.85em; }
.event-status { margin-top: 0.3em; }
.grade-header { padding: 0.4em 0.5em; font-size: 0.9em; }
}

/* Landscape mode on mobile - reduce padding/margin, respect notch */
@media only screen and (max-width: 980px) and (orientation: landscape) {
html, body { margin: 0; padding: 0; }
body { font-size: 1.5em; } /* Smaller than portrait 2em */
body .container { margin: 0; padding: 0; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
#content { padding: 0.5em; margin: 0; }
.event-header { padding: 0.25em; margin: 0 0 0.5em 0; }
form { padding: 0.5em calc(0.5em + env(safe-area-inset-right)) 0.5em calc(0.5em + env(safe-area-inset-left)); margin: 0; }
.grade-header { margin: 0; padding: 0.4em calc(0.5em + env(safe-area-inset-right)) 0.4em calc(0.5em + env(safe-area-inset-left)); border-radius: 0; border: none; }
.table { border: none; }
}