:root { --app-banner-height: 52px; }

body { font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; margin: 0px; padding: 0px; }

.app-banner { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--app-banner-height); box-sizing: border-box; padding: 0.5em 0.9em; background: #14181f; color: #fff; }
.app-banner.iq { background-color: #1434a4; }
.app-banner.v5 { background-color: #8b0000; }
.app-banner-brand { display: flex; align-items: center; color: #fff; text-decoration: none; }
.app-banner-logo { height: 28px; width: auto; max-width: 55vw; display: block; }
.app-banner-hamburger { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 34px; height: 34px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; cursor: pointer; padding: 0; }
.app-banner-hamburger:hover { background: rgba(255,255,255,0.2); }
.app-banner-hamburger span { display: block; width: 18px; height: 2px; margin: 0 auto; background: #fff; border-radius: 1px; }
.app-banner-menu { display: none; position: absolute; top: 100%; right: 0.9em; margin-top: 0.35em; background: #fff; color: #222; border: 1px solid #ccc; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); min-width: 220px; z-index: 1100; padding: 0.35em 0; font-size: 0.9em; }
.app-banner-menu a { display: block; padding: 0.4em 0.9em; text-decoration: none; color: #222; white-space: nowrap; }
.app-banner-menu a:hover { background: #f0f0f0; }
.app-banner-menu a.active { font-weight: bold; background: #eef1fb; }
.app-banner-menu-divider { padding: 0.5em 0.9em 0.2em; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.04em; color: #888; border-top: 1px solid #eee; margin-top: 0.2em; }
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 { position: fixed; top: 0.75em; left: 50%; transform: translateX(-50%); z-index: 1000; padding: 0.6em 1.25em; text-align: center; font-size: 1.1em; color: darkblue; background-color: lightyellow; border: 2px solid orange; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.25); max-width: 90vw; }
form { display: flex; flex-wrap: wrap; gap: 0.25em; padding: 0.5em; background-color: #1434a4; border-bottom: 3px solid #0a1a52; align-items: center; }
form.v5 { background-color: #8b0000; border-bottom-color: #5a0000; }
#worlds-teams { background-color: white; }
.back-button { margin-left: auto; margin-right: 1em; background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.4); border-radius: 4px; padding: 4px 10px; font-size: 0.9em; cursor: pointer; white-space: nowrap; }
.back-button:hover { background: rgba(255,255,255,0.28); }
.worlds-nav-button { margin-left: auto; margin-right: 1em; background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.4); border-radius: 4px; padding: 4px 10px; font-size: 0.9em; cursor: pointer; white-space: nowrap; }
.worlds-nav-button:hover { background: rgba(255,255,255,0.28); }


.historical-season-banner { background: #664d03; color: #fff8e1; text-align: center; font-weight: bold; font-size: 0.95em; padding: 0.5em 1em; letter-spacing: 0.02em; }
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 {
    position: relative;
    background: #f8f8f8;
    border: 3px solid #999;
    border-radius: 6px;
    padding: 0.75em;
    margin-bottom: 1em;
}
.event-header h2 { margin-bottom: 0.25em; padding-right: 2em; }
.event-header h3 { margin-bottom: 0; }
.favorite-star {
    position: absolute;
    top: 0.5em;
    right: 0.6em;
    background: none;
    border: none;
    font-size: 1.4em;
    line-height: 1;
    cursor: pointer;
    color: #ccc;
    padding: 0.1em;
}
.favorite-star:hover { color: #d4af37; }
.favorite-star.active { color: #f0b400; }
.favorite-star:disabled { cursor: wait; opacity: 0.6; }
.event-location { color: #666; font-size: 0.95em; }
.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; }
.progress-bar { display: inline-block; width: 60px; height: 8px; background: rgba(0,0,0,0.15); border-radius: 4px; margin-left: 6px; vertical-align: middle; }
.progress-fill { display: block; height: 100%; background: #333; border-radius: 4px; transition: width 0.3s; }

/* Division tabs (multi-division events like U.S. Open, Worlds) */
.division-tabs { display: flex; gap: 0.4em; margin-bottom: 1em; flex-wrap: wrap; }
.division-tabs a { padding: 0.3em 0.8em; border: 1px solid #999; border-radius: 4px; text-decoration: none; background: #f0f0f0; color: #333; font-size: 0.9em; }
.division-tabs a:hover { background: #ddd; }
.division-tabs a.active { background: #333; color: #fff; border-color: #333; font-weight: bold; }
.v5-event .division-tabs a.active { background: #7b0000; border-color: #7b0000; }

/* 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: #fff2af; }
.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 .meetsExcellenceCutoff { background-color: #c8e6c8; }
.div-rank { font-size: 0.75em; color: #666; margin-left: 0.2em; }
.team-division-label { font-size: 0.85em; font-weight: bold; color: #555; margin-bottom: 0.4em; padding: 0.2em 0.5em; background: #f0f0f0; border-radius: 3px; display: block; }
.overview.world-view .meetsExcellenceCutoff { background-color: #f4e4a8; } /* Muted yellow for world views */
.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.meetsExcellenceCutoff {background-color:#afe1af;}
.overview td.meetsExcellenceCutoff.focused {background-color:#ecffdc;}
.overview td.focused {background-color: yellow;}
.overview td.isExcellenceQualified {font-weight:bold;color:blue;}
.overview td.isExcellenceAwarded {background-color:lightpink;}
/* Trophy/medal emoji now handled in Python code */
/* .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;}
.overview-note {font-size:85%; color:#666; margin:0.5em 0; font-style:italic;}

select { font-size:large; padding: 5px; background-color: lightyellow; margin-bottom: 0.25em; }
#grade { min-width: 9em; }
.thin { display: none; }
.wide { display: inline; }
#sku { width: 50%; }
#sort { width: 22%; }
#focus { width: 10%; min-width: 9em; font-size: large; padding: 5px; margin-bottom: 0.25em; box-sizing: border-box; }

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;
}

/* Loading spinner for modal */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4em 2em;
    gap: 1.5em;
}
.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e0e0e0;
    border-top-color: #1434a4;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.loading-text {
    color: #666;
    font-size: 1.1em;
    font-weight: 500;
}
.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;
}

/* Season Awards section in Team Details modal */
.season-awards {
    margin: 1em 0;
    padding: 0.75em;
    background-color: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 6px;
}
.season-awards h4 {
    margin: 0 0 0.5em 0;
    font-size: 0.95em;
    color: #92400e;
}
.awards-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.awards-list li {
    padding: 0.25em 0;
    font-size: 0.9em;
}
.awards-list li:before {
    content: "🏆 ";
}
.award-title {
    font-weight: 500;
}
.award-event {
    color: #666;
    font-size: 0.85em;
    font-style: italic;
}

/* Skills History section in Team Details modal */
.skills-history {
    margin: 1em 0;
    padding: 0.75em;
    background-color: #f0f9ff;
    border: 1px solid #7dd3fc;
    border-radius: 6px;
}
.skills-history h4 {
    margin: 0 0 0.5em 0;
    font-size: 0.95em;
    color: #075985;
}
.skills-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}
.skills-table thead {
    background-color: #e0f2fe;
}
.skills-table th {
    padding: 0.4em 0.5em;
    font-weight: 600;
    color: #075985;
    border-bottom: 2px solid #7dd3fc;
}
.skills-table th.left-align {
    text-align: left;
}
.skills-table th.right-align {
    text-align: right;
}
.skills-table td {
    padding: 0.4em 0.5em;
    border-bottom: 1px solid #e0f2fe;
}
.skills-table td.left-align {
    text-align: left;
}
.skills-table td.right-align {
    text-align: right;
}
.skills-table tr:last-child td {
    border-bottom: none;
}
.skills-event {
    font-weight: 500;
}
.skills-score {
    font-weight: 500;
    color: #075985;
}
.attempts {
    font-size: 0.75em;
    color: #666;
    font-weight: normal;
}
.skills-delta-col {
    font-weight: 500;
}
.skills-delta {
    font-size: 0.9em;
    white-space: nowrap;
}
.skills-delta.positive {
    color: #16a34a;
}
.skills-delta.negative {
    color: #dc2626;
}

#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;
}
.excellence-target {
    color: #856404;
    font-weight: 500;
}

/* VEX Via style match cards */
.via-match-list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.match-type-divider {
    font-weight: bold;
    font-size: 1.1em;
    color: #333;
    padding: 1em 0.5em 0.5em;
    margin-top: 0.5em;
    border-top: 2px solid #ddd;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.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-profile {
    display: block;
    font-size: 0.8em;
    color: #888;
    margin-top: 0.15em;
}
.via-match-card .team-number {
    font-weight: bold;
}
.via-match-card .team-name {
    font-weight: bold;
    color: #555;
    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;
}

/* Now Playing indicator between matches */
.now-playing-indicator {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.4em 0.6em;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    font-size: 0.9em;
    margin: 0.4em 0;
}
.now-playing-indicator .now-label {
    font-weight: bold;
    min-width: 3em;
    color: #856404;
}
.now-playing-indicator .now-details {
    margin-left: auto;
    color: #664d03;
}

@media only screen and (min-width: 1000px) { /* Desktop? */
    /* App banner is also fixed at the very top (see .app-banner rule below), so
       #topNav must sit below it, not at top:0 — otherwise the fixed topNav bar
       covers the banner completely. */
    .app-banner { position: fixed; width: 100%; top: 0; left: 0; z-index: 101; }
    #topNav { position:fixed; width: 100%; top: var(--app-banner-height); z-index: 100; }
    body .container { padding-top: calc(var(--app-banner-height) + 3.7em); }
    #content { margin-left: 1em; margin-right: 1em; }
    html { scroll-padding-top: calc(var(--app-banner-height) + 4em); }
}

@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; }
.app-banner-logo { height: 42px; } /* +50% over the 28px desktop size */
/* 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; }
.thin { display: inline; }
.wide { display: none; }
select { font-size:1.5em; padding: 5px; background-color: lightyellow; }
#grade { min-width: 9em; }
#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 */
#grade { order: 1; }
#sku { order: 2; width: 95%; }
#sort { order: 3; width: 65%; display: inline; }
#focus { order: 4; width: 35%; font-size: 1.5em; padding: 5px; box-sizing: border-box; }
.worlds-nav-button { order: 5; }

/* Overview table horizontal scroll on mobile */
.overview-scroll-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.overview { min-width: 600px; } /* Force minimum width to enable scrolling */

/* 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; }
.via-match-card .team-profile { order: 4; width: 100%; }

/* 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; }
}

/* ── Worlds page ─────────────────────────────────────────────────────────── */
.worlds-content { padding: 0.75em 1em; }
.worlds-title { margin: 0.25em 0 1em; font-size: 1.3em; }

.worlds-stale-season-banner {
    margin: 0 0 1.25em;
    padding: 0.75em 1em;
    background: #fff3cd;
    color: #664d03;
    border: 1px solid #ffe69c;
    border-radius: 6px;
    font-size: 0.95em;
}

.worlds-section { margin-bottom: 2.5em; }
.worlds-section h3 {
    font-size: 1.05em;
    margin: 0 0 0;
    padding: 0.45em 0.75em;
    background: #1434a4;
    color: white;
    border-radius: 6px 6px 0 0;
    display: flex;
    align-items: center;
    gap: 0.75em;
}
.worlds-section.v5 h3 { background: #8b0000; }

.worlds-event-date { font-weight: normal; font-size: 0.9em; color: rgba(255,255,255,0.75); }
.worlds-status { font-size: 0.75em; font-weight: bold; padding: 0.15em 0.5em; border-radius: 4px; margin-left: 0.5em; vertical-align: middle; }
.worlds-status.closed { background: rgba(255,255,255,0.2); color: rgba(255,255,255,0.85); }

.worlds-none { color: #888; font-style: italic; margin: 0.5em 0.75em; }

.worlds-progress-wrap {
    position: relative;
    flex: 1 1 20em;
    max-width: 35em;
    min-width: 8em;
    height: 1.4em;
    background: darkgreen;
    border-radius: 3px;
    overflow: hidden;
    margin-left: auto;
}
.worlds-progress-bar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background: rgba(5, 170, 50, 1);
    transition: width 0.3s ease;
}
.worlds-progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    letter-spacing: 0.03em;
}

.worlds-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.worlds-table { border-collapse: collapse; width: 100%; font-size: 0.9em; table-layout: fixed; border: 1px solid #bbb; border-top: none; border-radius: 0 0 6px 6px; overflow: hidden; }
.worlds-table th, .worlds-table td { padding: 0.35em 0.6em; border-bottom: 1px solid #e8e8e8; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.worlds-table th { background: #e8eeff; color: #1434a4; font-weight: bold; border-bottom: 1px solid #bbb; }
.worlds-section.v5 .worlds-table th { background: #ffe8e8; color: #8b0000; }
.worlds-table th.sortable { cursor: pointer; user-select: none; }
.worlds-table th.sortable:hover { filter: brightness(0.95); }
.worlds-table th.sort-asc::after { content: ' ▲'; font-size: 0.75em; }
.worlds-table th.sort-desc::after { content: ' ▼'; font-size: 0.75em; }
.worlds-table tbody tr:nth-child(even) td { background: #e8ecf8; }
.worlds-section.v5 .worlds-table tbody tr:nth-child(even) td { background: #f8eaea; }
.worlds-table tbody tr:hover td { background: #e8eeff; }
.worlds-section.v5 .worlds-table tbody tr:hover td { background: #ffe8e8; }
.worlds-table th.right-align, .worlds-table td.right-align { text-align: right; }
.worlds-table th:nth-child(1),  .worlds-table td:nth-child(1)  { width: 2.5em; }   /* # */
.worlds-table th:nth-child(2),  .worlds-table td:nth-child(2)  { width: 4em; }     /* 📍 Rank */
.worlds-table th:nth-child(3),  .worlds-table td:nth-child(3)  { width: 4.5em; }   /* 🌐 Rank */
.worlds-table th:nth-child(4),  .worlds-table td:nth-child(4)  { width: 5.5em; }   /* Team */
.worlds-table th:nth-child(5),  .worlds-table td:nth-child(5)  { width: 11%; }     /* Name */
.worlds-table th:nth-child(6),  .worlds-table td:nth-child(6)  { width: 14%; }     /* Organization */
.worlds-table th:nth-child(7),  .worlds-table td:nth-child(7)  { width: 7em; }     /* City */
.worlds-table th:nth-child(8),  .worlds-table td:nth-child(8)  { width: 5em; }     /* Robot */
.worlds-table th:nth-child(9),  .worlds-table td:nth-child(9)  { width: 4em; }     /* Driver */
.worlds-table th:nth-child(10), .worlds-table td:nth-child(10) { width: 4em; }     /* Auton */
.worlds-table th:nth-child(11), .worlds-table td:nth-child(11) { width: 11%; }     /* Qualification */
.worlds-table th:nth-child(12), .worlds-table td:nth-child(12) { width: 13%; }     /* Event */
.worlds-table th:nth-child(13), .worlds-table td:nth-child(13) { width: 5.5em; }   /* Origin */
.worlds-table th:nth-child(14), .worlds-table td:nth-child(14) { width: 7em; }     /* Registered */
.worlds-table th:nth-child(15), .worlds-table td:nth-child(15) { width: 7em; }     /* Awards */
.col-resize-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 5px; cursor: col-resize; z-index: 1; }
.col-resize-handle:hover, .col-resize-handle:active { background: rgba(0,0,0,0.15); }
.worlds-table .team-number { }
.worlds-table .team-awards { }
.regions-table { width: auto; min-width: 52em; }
.regions-table th:nth-child(1), .regions-table td:nth-child(1) { width: 2.5em; }
.regions-table th:nth-child(2), .regions-table td:nth-child(2) { width: 16em; }
.regions-table th:nth-child(3), .regions-table td:nth-child(3) { width: 5em; }
.regions-table th:nth-child(4), .regions-table td:nth-child(4) { width: 6em; }
.regions-table th:nth-child(5), .regions-table td:nth-child(5) { width: 5em; }
.regions-table th:nth-child(6), .regions-table td:nth-child(6) { width: 6em; }
.regions-table th:nth-child(7), .regions-table td:nth-child(7) { width: 5.5em; }
.regions-table th:nth-child(8), .regions-table td:nth-child(8) { width: 10em; }
.region-over { color: #c00; font-weight: 600; }
.region-change { color: #080; font-weight: 700; }
.regions-totals-row th { font-weight: 700; border-top: 1px solid #bbb; font-size: 0.95em; }
.regions-totals-row .region-progress-bar { background: rgba(5, 170, 50, 1); }
.region-progress-cell { vertical-align: middle; padding-top: 0.3em; padding-bottom: 0.3em; }
.region-progress-wrap {
    display: block;
    height: 0.7em;
    background: #ddd;
    border-radius: 3px;
    overflow: hidden;
}
.region-progress-bar {
    display: block;
    height: 100%;
    background: #1434a4;
    border-radius: 3px;
}
.worlds-section.v5 .region-progress-bar { background: #8b0000; }
.worlds-table .first-seen { color: #555; }
.worlds-table .first-seen.not-registered { color: #aaa; font-style: italic; }
.worlds-table .qual-method { color: #444; white-space: nowrap; }
.worlds-table tbody tr.focused td { background: #fffacd !important; }
.worlds-table tbody tr.focused:hover td { background: #fff099 !important; }

.worlds-qualified { color: #1434a4; font-weight: 500; }
.worlds-section.v5 .worlds-qualified { color: #8b0000; }
.region-skills-table { width: auto; min-width: 48em; }
.region-skills-table th:nth-child(1), .region-skills-table td:nth-child(1) { width: 2.5em; }
.region-skills-table th:nth-child(2), .region-skills-table td:nth-child(2) { width: 16em; }
.region-skills-table th:nth-child(3), .region-skills-table td:nth-child(3) { width: 5.5em; }
.region-skills-table th:nth-child(4), .region-skills-table td:nth-child(4) { width: 10em; }
.region-skills-table th:nth-child(5), .region-skills-table td:nth-child(5) { width: 10em; }
.region-skills-table th:nth-child(6), .region-skills-table td:nth-child(6) { width: 10em; }
.worlds-table tbody tr.norcal-region td { background: #fffacd !important; font-weight: 600; }
.worlds-table tbody tr.norcal-region:hover td { background: #fff099 !important; }

@media only screen and (max-width: 980px) {
/* Worlds page mobile adjustments */
body .container { overflow-x: hidden; }
.worlds-content { padding: 0; }
.worlds-section { margin-bottom: 1.5em; }
.worlds-table-wrap { margin: 0; padding: 0; }
.worlds-table { font-size: 1.1em; table-layout: auto; width: auto; min-width: 100%; }
.worlds-table th, .worlds-table td { padding: 0.3em 0.4em; white-space: nowrap; width: auto !important; }
#grade, #worlds-teams, #focus { font-size: 1.3em; }
.back-button { margin-left: 0; margin-right: 0.5em; font-size: 1.1em; }
.worlds-nav-button { margin-left: 0; margin-right: 0.5em; font-size: 1.1em; }
}