/* Championnat de l'Est J/22 — style commun (tables reprises de la mise en page Voile Gaspé).
   Les couleurs/polices viennent des JETONS (:root) définis dans ../courses/nav.css,
   chargée par toutes les pages — un thème du site s'applique donc aussi ici.
   Les styles de la barre de navigation vivent dans nav.css (plus de doublon local). */

body {
    font-family: var(--font-body, Arial, sans-serif);
    font-size: 13px;
    color: var(--c-text, #333);
    margin: 0;
    background: var(--c-bg, #fff);
}

.page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 12px 40px;
}

/* 16px minimum sur tous les champs : évite le zoom automatique d'iOS Safari au focus */
input[type=text], input[type=number], input[type=email], input[type=tel],
input[type=password], input[type=date], input[type=time], select, textarea {
    font-size: 16px;
}

/* Paire étiquette+champ des formulaires en ligne : passe à la ligne d'un bloc */
.fld {
    display: inline-block;
    white-space: nowrap;
    margin: 3px 8px 3px 0;
}

.show-sm { display: none; }             /* libellés courts, affichés seulement sur téléphone */

/* ---- En-tête de régate ---- */
.regatta-header {
    text-align: center;
    margin: 18px 0 8px;
    position: relative;
    min-height: 60px;
}
.regatta-header h1 { margin: 0 0 4px; font-size: 24px; font-family: var(--font-heading, inherit); }
.regatta-header .sub { color: var(--c-text-2, #666); font-size: 14px; margin: 2px 0; }
.burgeeLeft  { position: absolute; left: 0;  top: 0; max-width: 60px; max-height: 60px; }
.burgeeRight { position: absolute; right: 0; top: 0; max-width: 60px; max-height: 60px; }

h2 { text-align: center; font-size: 18px; margin: 24px 0 6px; font-family: var(--font-heading, inherit); }
h3 { text-align: center; font-size: 15px; margin: 18px 0 4px; font-family: var(--font-heading, inherit); }
.centerline { text-align: center; color: #555; margin: 2px 0; }
.status-final   { color: #06660e; font-weight: bold; }
.status-pending { color: #a35b00; font-weight: bold; }

/* ---- Tables (style repris de J22r.htm) ---- */
.tablewrap { overflow-x: auto; margin: 10px 0; }
table.res {
    font-family: var(--font-table, Arial, sans-serif);
    color: var(--c-tbl-text, #666);
    font-size: 12px;
    text-shadow: 1px 1px 0 #fff;
    background: var(--c-tbl-frame, #eaebec);
    border: 1px solid #ccc;
    border-radius: var(--r-s, 3px);
    box-shadow: 0 1px 2px var(--c-tbl-shadow, #d1d1d1);
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
table.res th {
    border-top: 1px solid var(--c-tbl-cell, #fafafa);
    border-bottom: 1px solid var(--c-tbl-border, #e0e0e0);
    background: var(--c-tbl-head, #ededed);
    padding: 8px 6px;
    white-space: nowrap;
}
table.res td {
    padding: 8px 6px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid var(--c-tbl-border, #e0e0e0);
    border-left: 1px solid var(--c-tbl-border, #e0e0e0);
    background: var(--c-tbl-cell, #fafafa);
    text-align: center;
    white-space: nowrap;
}
table.res td:first-child { border-left: 0; }
table.res tr:nth-child(even) td { background: var(--c-tbl-zebra, #f6f6f6); }
table.res td.left, table.res th.left { text-align: left; padding-left: 10px; white-space: normal; }

/* Podium : identité des résultats — IDENTIQUE dans tous les thèmes */
td.firstPlace  { background: gold   !important; color: #000; text-shadow: none; font-weight: bold; }
td.secondPlace { background: skyblue!important; color: #000; text-shadow: none; font-weight: bold; }
td.thirdPlace  { background: orange !important; color: #000; text-shadow: none; font-weight: bold; }

.score { line-height: 1.1; display: block; }
.excludedScore { color: #AA4444; text-decoration: line-through; line-height: 1.1; display: block; }
.codeTag { font-size: 10px; color: var(--c-accent-text, #a00); display: block; }

/* ---- Formulaires ---- */
.formbox {
    max-width: 560px;
    margin: 14px auto;
    background: var(--c-bg-form, #f7f7f7);
    border: 1px solid var(--c-border, #ddd);
    border-radius: var(--r-m, 4px);
    padding: 16px 20px;
}
.formbox label { display: block; font-weight: bold; margin: 12px 0 3px; }
.formbox .req::after { content: " *"; color: var(--c-accent-text, #a00); }
.formbox input[type=text], .formbox input[type=email], .formbox input[type=tel],
.formbox input[type=password], .formbox input[type=date], .formbox input[type=time],
.formbox input[type=number], .formbox select, .formbox textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px;
    font-size: 16px;
    border: 1px solid var(--c-border-input, #bbb);
    border-radius: var(--r-s, 3px);
}
.btn {
    display: inline-block;
    background: var(--c-primary, #2c5f8a);
    color: #fff;
    border: 0;
    border-radius: var(--r-s, 3px);
    padding: 10px 22px;
    font-size: 15px;
    font-family: var(--font-body, inherit);
    cursor: pointer;
    margin-top: 14px;
    text-decoration: none;
    text-shadow: none; /* annule l'ombre blanche héritée des tables */
}
.btn:hover { background: var(--c-primary-dark, #234b6d); }
.btn:disabled { background: #b8c2cc; color: #f3f5f7; cursor: default; }
.btn.small { padding: 5px 10px; font-size: 12px; margin: 0; }
.btn.danger { background: var(--c-danger, #8a2c2c); }
.btn.gray { background: #777; }

.msg-ok  { background: #e2f4e2; border: 1px solid #9c9; padding: 10px 14px; border-radius: var(--r-s, 3px); margin: 12px auto; max-width: 560px; text-align: center; }
.msg-err { background: #f8e2e2; border: 1px solid #c99; padding: 10px 14px; border-radius: var(--r-s, 3px); margin: 12px auto; max-width: 560px; text-align: center; }

/* ---- Page d'accueil : avis, horaire, météo, marées ---- */
.notice-box {
    max-width: 700px;
    margin: 8px auto;
    background: var(--c-note-bg, #fdf7e3);
    border: 1px solid var(--c-note-border, #e5d9a8);
    border-radius: var(--r-m, 4px);
    padding: 10px 14px;
    font-size: 14px;
}
.notice-date { color: var(--c-note-text, #997d2e); font-size: 11px; font-weight: bold; margin-bottom: 3px; }

/* Cartes journée : horaire + météo + marées */
.day-grid {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    max-width: 980px;
    margin: 12px auto 0;
}
.day-card {
    flex: 1 1 280px;
    max-width: 330px;
    background: var(--c-bg, #fff);
    border: 1px solid var(--c-border-card, #d5dee8);
    border-radius: var(--r-l, 6px);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.day-sec-grow { flex: 1 1 auto; } /* l'horaire s'étire : météo et marées restent au bas */
.day-head {
    background: var(--c-primary, #2c5f8a);
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 8px 6px;
    font-size: 14.5px;
    text-transform: capitalize;
    font-family: var(--font-ui, Montserrat, Arial, sans-serif);
}
.day-sec { padding: 8px 12px 10px; border-top: 1px solid var(--c-hairline, #edf1f5); }
.day-sec:first-of-type { border-top: 0; }
.day-sec-title {
    font-size: 10.5px;
    font-weight: bold;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8fa4b8;
    margin-bottom: 4px;
}
.sched-item { padding: 2px 0; font-size: 13px; line-height: 1.35; }
.sched-time {
    display: inline-block;
    min-width: 70px;
    font-weight: bold;
    color: var(--c-primary, #2c5f8a);
    vertical-align: top;
}
.wx-line { font-size: 13.5px; padding: 2px 0; }
.wx-temp { font-size: 19px; font-weight: bold; }
.wx-line small, .tide-line small { color: #888; }
.wx-line.unavail { color: var(--c-text-3, #999); font-style: italic; font-size: 12.5px; }
.tide-line { font-size: 13.5px; padding: 2px 0; }
.srcnote { color: var(--c-text-3, #999); font-size: 11px; line-height: 1.5; margin-top: 14px; }

.footer { margin-top: 34px; text-align: center; color: var(--c-text-3, #999); font-size: 11px; }
.footer a { color: var(--c-text-3, #999); }

/* ---- Admin : saisie des arrivées ---- */
.race-admin-box { border: 1px solid var(--c-border, #ddd); border-radius: var(--r-m, 4px); padding: 10px 14px; margin: 14px 0; background: var(--c-bg-box, #fbfbfb); }
.inline-form { display: inline; }
.tapline { margin: 8px 0; }
.tapline button {
    font-size: 15px; padding: 8px 12px; margin: 3px;
    border: 1px solid var(--c-primary, #2c5f8a); background: var(--c-bg, #fff); color: var(--c-primary, #2c5f8a);
    border-radius: var(--r-s, 3px); cursor: pointer;
}
.tapline button.tapped { background: var(--c-primary, #2c5f8a); color: #fff; }
.tapline button.coded { opacity: .45; text-decoration: line-through; }

/* Liste des arrivées : rangées interactives */
table.arrivals tr[data-eid] { cursor: pointer; }
table.arrivals tr.scored td { background: #e2eef8; }
table.arrivals tr.scored .pos-cell input { font-weight: bold; }
table.arrivals tr.coded-row td { background: var(--c-bg-hover, #f1f1f1); color: var(--c-text-3, #999); }
table.arrivals tr.coded-row td.left { text-decoration: line-through; }
table.arrivals tr.zone-start td { border-top: 2px solid var(--c-border-strong, #9fb2c4); }
table.arrivals tr:not(.scored) .nudges { visibility: hidden; }

/* Flèches de réordonnancement (saisie des arrivées) */
.pos-cell { white-space: nowrap; }
.nudges { display: inline-flex; flex-direction: column; vertical-align: middle; margin-left: 4px; gap: 2px; }
.pos-nudge {
    border: 1px solid var(--c-border-strong, #b9c6d2);
    background: #f2f6fa;
    color: var(--c-primary, #2c5f8a);
    border-radius: var(--r-s, 3px);
    font-size: 11px;
    line-height: 1;
    padding: 4px 7px;
    cursor: pointer;
}
.pos-nudge:active { background: var(--c-primary, #2c5f8a); color: #fff; }

@media (max-width: 600px) {
    .burgeeLeft, .burgeeRight { max-width: 40px; max-height: 40px; }
    .regatta-header { padding: 0 46px; }
    .regatta-header h1 { font-size: 18px; }
    .hide-sm { display: none; } /* colonnes secondaires masquées sur téléphone */
    .show-sm { display: inline; }

    /* Tables plus compactes */
    table.res th, table.res td { padding: 6px 3px; }

    /* Champs à taille fixe : jamais plus larges que l'écran */
    input, select, textarea { max-width: 100%; box-sizing: border-box; }
}