/*
 * millend.css — rogain.ee oldcms visual refresh (2026)
 * Author: Sten Millend
 *
 * Loaded LAST by cms/template.php so it wins via cascade. Scoped to
 * content + form elements; Anton's chrome (header/menu/sidebar/footer)
 * is untouched so the standalone pages on rogain.ee still render as
 * before. In iframe context (embedded from taok.millend.eu), iframe.css
 * hides the chrome and this file owns the whole view.
 *
 * Rollback: delete the <link> tag in cms/template.php that loads this
 * file. Nothing else to undo.
 */

@import url('acss-tokens.css');

/* ---------- Layout reset: undo Anton's float+absolute-left tricks.
   iframe.css already hides header/sidebar/footer unconditionally, so the
   wrap/page layout is effectively one-column everywhere — we just need to
   stop the leftover positioning painting a green stripe and clipping content. */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--white);
    min-height: 100%;
}

body {
    font-family: var(--font-text);
    color: var(--text-color);
}

.wrap,
.wrap-sidebar,
.page {
    float: none;
    position: static;
    left: auto;
    right: auto;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    background: transparent;
    clear: both;
}

.wrap {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Kill the old .content centering from iframe.css so content left-aligns.
   Horizontal padding lives on .wrap exclusively — no double-padding. */
.content {
    margin: 0;
    padding-inline: 0;
    text-align: left;
}

/* ---------- Base, scoped to .content so chrome is unaffected ---------- */

.content {
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    font-family: var(--font-text);
    font-size: var(--text-m);
    line-height: var(--lh-relaxed);
    color: var(--text-color);
    text-align: left;
    text-wrap: pretty;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.content *,
.content *::before,
.content *::after { box-sizing: border-box; }

.content p { margin: 0 0 var(--space-s); }
.content p:last-child { margin-bottom: 0; }

.content h2 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--primary);
    margin: var(--space-l) 0 var(--space-s);
    text-align: left;
}

.content h2:first-child { margin-top: 0; }

.content h3 {
    font-family: var(--font-heading);
    font-size: var(--text-l);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--primary-dark);
    margin: var(--space-m) 0 var(--space-xs);
}

.content a {
    color: var(--text-link);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

.content a:hover,
.content a:focus-visible {
    color: var(--text-link-hover);
    text-decoration-thickness: 2px;
}

.content strong { font-weight: 700; color: var(--primary-ultra-dark); }

/* ---------- Forms: inputs, selects, buttons ---------- */

.content input[type="text"],
.content input[type="email"],
.content input[type="number"],
.content input[type="date"],
.content select {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-size: var(--text-m);
    line-height: 1.4;
    color: var(--text-color);
    background-color: var(--surface-card);
    border: var(--border-width) solid var(--border-color-strong);
    border-radius: var(--border-radius-s);
    padding: 0.9rem 1.2rem;
    width: 100%;
    min-height: 4.4rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.content select {
    background-image: linear-gradient(45deg, transparent 50%, var(--base) 50%),
                      linear-gradient(135deg, var(--base) 50%, transparent 50%);
    background-position: calc(100% - 1.7rem) 50%, calc(100% - 1.2rem) 50%;
    background-size: 0.5rem 0.5rem, 0.5rem 0.5rem;
    background-repeat: no-repeat;
    padding-right: 3.2rem;
    cursor: pointer;
}

.content input[type="text"]:hover,
.content input[type="email"]:hover,
.content select:hover {
    border-color: var(--primary-semi-light);
}

.content input[type="text"]:focus,
.content input[type="email"]:focus,
.content input[type="number"]:focus,
.content input[type="date"]:focus,
.content select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

.content input[type="text"]:disabled,
.content input[type="email"]:disabled {
    background-color: var(--neutral-ultra-light);
    color: var(--text-muted);
    cursor: not-allowed;
}

.content input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 2.2rem;
    height: 2.2rem;
    border: 2px solid var(--border-color-strong);
    border-radius: var(--border-radius-s);
    background-color: var(--surface-card);
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.content input[type="checkbox"]:hover {
    border-color: var(--primary);
}

.content input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--primary);
}

.content input[type="checkbox"]:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.content input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.4rem 1.4rem;
}

.content input[type="submit"],
.content button {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-family: var(--font-heading);
    font-size: var(--text-m);
    font-weight: 700;
    line-height: 1;
    color: var(--white);
    background-color: var(--primary);
    border: var(--border-width) solid var(--primary);
    border-radius: var(--border-radius);
    padding: 1.4rem 2.6rem;
    min-height: 4.4rem;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0.02em;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: var(--shadow-xs);
}

.content input[type="submit"]:hover,
.content button:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: var(--shadow-sm);
}

.content input[type="submit"]:active,
.content button:active {
    transform: translateY(1px);
    box-shadow: none;
}

.content input[type="submit"]:focus-visible,
.content button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), var(--shadow-sm);
}

/* Ghost button for back/secondary (none in current reg.php but future-proof) */
.content .btn-ghost,
.content input[type="submit"].btn-ghost {
    background-color: transparent;
    color: var(--primary);
    border-color: var(--primary-light);
}

.content .btn-ghost:hover {
    background-color: var(--primary-ultra-light);
    border-color: var(--primary);
}

/* Narrow/constrained inputs used by reg.php */
.content input.si {
    font-family: ui-monospace, 'SF Mono', Consolas, 'Liberation Mono', monospace;
    text-align: right;
    letter-spacing: 0.02em;
    width: 10ch;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.8rem;
}

.content input.sirent {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

/* Keep .si input + rent checkbox on the same line inside the members table cell (desktop only).
   Also set explicit column widths for the reg members table so Sugu (select) fits "Naine"/"Mees"
   without truncation and Sünniaeg doesn't hog more space than the date needs. */
@media (min-width: 768px) {
    .content table.mbrs tbody td:has(> input.si) {
        white-space: nowrap;
        text-align: center;
    }

    /* Fixed layout so our explicit column widths are honored (auto layout treats them as suggestions) */
    .content form#form_reg > table.mbrs:not(.tm) { table-layout: fixed; }

    .content form#form_reg > table.mbrs:not(.tm) th:nth-child(1),
    .content form#form_reg > table.mbrs:not(.tm) td:nth-child(1) { width: 20rem; }    /* Eesnimed */
    .content form#form_reg > table.mbrs:not(.tm) th:nth-child(2),
    .content form#form_reg > table.mbrs:not(.tm) td:nth-child(2) { width: 20rem; }    /* Perekonnanimi */
    .content form#form_reg > table.mbrs:not(.tm) th:nth-child(3),
    .content form#form_reg > table.mbrs:not(.tm) td:nth-child(3) { width: 8rem; }   /* Sugu */
    .content form#form_reg > table.mbrs:not(.tm) th:nth-child(4),
    .content form#form_reg > table.mbrs:not(.tm) td:nth-child(4) { width: 14rem; }   /* Sünniaeg */
    .content form#form_reg > table.mbrs:not(.tm) th:nth-child(5),
    .content form#form_reg > table.mbrs:not(.tm) td:nth-child(5) { width: 7rem; }    /* Pensionär (checkbox only) */
    .content form#form_reg > table.mbrs:not(.tm) th:nth-child(6),
    .content form#form_reg > table.mbrs:not(.tm) td:nth-child(6) { width: 24rem; }   /* SI-pulk / rent */

    /* Date input fills its cell so the full "dd.mm.yyyy" is always visible */
    .content input.datepick { width: 100%; }

    /* Select dropdown: reduce right padding since arrow is compact */
    .content select { padding-right: 2.6rem; }
}

.content input.invchs,
.content input.invcfl { max-width: 12ch; margin: 0 auto; display: block; }

.content input.invccp { max-width: 14ch; margin: 0 auto; display: block; }

.content input.tmname { font-size: var(--text-l); font-weight: 600; }

.content input.hide { visibility: hidden; }
.content input.show { visibility: visible; }

/* ---------- Tables (shared base) ---------- */

.content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--surface-card);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    margin: 0 0 var(--space-m);
}

.content thead tr {
    background-color: var(--primary);
    background-image: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white);
}

.content thead th {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xs);
    color: var(--white);
    text-align: center;
    padding: 1.2rem 1rem;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.content thead th.oap { font-size: var(--text-xs); }

.content tbody td {
    padding: 1.4rem 1.2rem;
    border: none;
    border-top: var(--border-width) solid var(--border-color);
    text-align: center;
    vertical-align: middle;
    color: var(--text-color);
}

.content thead th {
    border: none;
}

.content tbody tr:first-child td { border-top: none; }

.content tbody tr:nth-child(even) { background-color: var(--neutral-ultra-light); }

.content tbody td.nm,
.content tbody td.teamname,
.content tbody td.names,
.content tbody td.category { text-align: left; }

/* ---------- Registration flow (reg.php) ---------- */

/* Top-level team table (.tm) = single row with name/durations/email/invoice */
.content table.tm thead tr {
    background-image: linear-gradient(180deg, var(--base) 0%, var(--base-dark) 100%);
}

.content table.mbrs { table-layout: auto; }

.content .tm td.email { font-size: var(--text-s); word-break: break-word; }

/* Hide rows for not-yet-revealed team members */
.content tr.anonmbr { display: none; }
.content tr.okrow { display: table-row; }

/* Invoice block: shown only when checkbox is checked (class .invc on wrapper) */
.content div.invc { display: block; margin-top: var(--space-m); }
.content div.noinvc { display: none; }

.content .invc h2 {
    margin-top: 0;
    padding: var(--space-s) var(--space-m);
    background-color: var(--primary-ultra-light);
    border-left: 4px solid var(--primary);
    border-radius: var(--border-radius-s);
    color: var(--primary-dark);
    text-align: left;
    font-size: var(--text-l);
}

.content .invc p { text-align: center; color: var(--text-muted); }

/* Spacer divs between invoice sub-tables */
.content .invc > div:not(.invc) { height: var(--space-s); }

/* Button row */
.content table.btns {
    border: none;
    box-shadow: none;
    background: transparent;
    margin-top: var(--space-m);
}

.content table.btns tbody tr,
.content table.btns tbody tr:nth-child(even) { background-color: transparent; }

.content table.btns td {
    border: none;
    padding: 0;
}

.content table.btns td.btnfirst,
.content table.btns td.btnback,
.content table.btns td.btnlast {
    padding: var(--space-s) 0;
}

.content table.btns td.btnfirst,
.content table.btns td.btnlast { text-align: right; }
.content table.btns td.btnback { text-align: left; }

.content table.btns input[type="submit"] { min-width: 18rem; }

/* ---------- Summary page emphasis ---------- */

.content td.tmname {
    font-size: var(--text-l);
    font-weight: 700;
    color: var(--primary);
}

.content td.cats {
    font-weight: 700;
    color: var(--base-dark);
}

.content td.fee {
    text-align: right;
    padding-right: var(--space-s);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.content th.fee {
    text-align: right;
    padding-right: var(--space-s);
}

.content td.rent { font-style: italic; color: var(--text-muted); }

/* Footnote */
.content p.ftnote,
.content td p.ftnote {
    font-size: var(--text-s);
    color: var(--text-muted);
    font-style: italic;
    text-align: left;
    margin: 0 0 var(--space-xs);
}

/* ---------- Error and hint lists ---------- */

.content h2.err {
    color: var(--danger-dark);
    background-color: var(--danger-ultra-light);
    border-left: 4px solid var(--danger);
    padding: var(--space-s) var(--space-m);
    border-radius: var(--border-radius-s);
    text-align: left;
    margin-top: 0;
}

.content ul.err,
.content ul.hint {
    list-style: none;
    padding: var(--space-s) var(--space-m);
    margin: 0 0 var(--space-m);
    border-radius: var(--border-radius-s);
    border: 1px solid transparent;
    font-style: normal;
}

.content ul.err {
    background-color: var(--danger-ultra-light);
    border-color: var(--danger-light);
    color: var(--danger-dark);
}

.content ul.hint {
    background-color: var(--warning-ultra-light);
    border-color: var(--warning-light);
    color: var(--warning-dark);
}

.content ul.err li,
.content ul.hint li {
    position: relative;
    padding: 0.6rem 0 0.6rem 3rem;
    text-align: left;
    line-height: var(--lh-normal);
}

.content ul.err li::before,
.content ul.hint li::before {
    position: absolute;
    left: 0;
    top: 0.4rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: var(--border-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-s);
    font-family: var(--font-heading);
    content: '!';
}

.content ul.err li::before {
    background-color: var(--danger);
    color: var(--white);
}

.content ul.hint li::before {
    background-color: var(--warning);
    color: var(--warning-dark);
    content: 'i';
    font-style: italic;
}

/* Also tint inline .err / .hint usages (e.g. if used on <p>) */
.content .err { color: var(--danger); }
.content .hint { color: var(--warning-dark); }

/* ---------- Teams list (teams.php) ---------- */

.content table.teams { font-size: var(--text-s); }

.content table.teams thead tr {
    background-image: linear-gradient(180deg, var(--base) 0%, var(--base-dark) 100%);
}

.content table.teams th.id { width: 5rem; }
.content table.teams th.si { width: 10rem; }
.content table.teams th.agesex { width: 8rem; }
.content table.teams th.paid { width: 8rem; }

.content table.teams td.id {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.content table.teams td.teamname {
    font-weight: 700;
    color: var(--primary);
}

.content table.teams td.category {
    font-weight: 600;
    color: var(--base-dark);
    font-size: var(--text-xs);
    letter-spacing: 0.03em;
}

.content table.teams td.si {
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    color: var(--text-muted);
}

.content table.teams td.paid {
    color: var(--success);
    font-weight: 700;
}

/* Stripe by team pairs: teams with rowspan make nth-child hard; accept alt rows */

/* ---------- Filter bar (teams.php) ---------- */

.content table.filter {
    background: var(--surface-inset);
    border: var(--border-width) solid var(--border-color);
    box-shadow: none;
    margin-bottom: var(--space-m);
}

.content table.filter td {
    padding: var(--space-s);
    text-align: left;
    background: transparent;
    border: none;
}

.content table.filter tbody tr:nth-child(even) { background: transparent; }

.content table.filter select { width: auto; min-width: 16rem; }

.content table.filter input[type="submit"] { margin-left: var(--space-xs); }

/* ---------- Stats (stats.php) ---------- */

.content table.stats { font-size: var(--text-s); }

.content table.stats td.category {
    font-weight: 700;
    color: var(--base-dark);
    text-align: left;
    letter-spacing: 0.02em;
}

.content table.stats tbody tr:first-child td {
    background-color: var(--primary-ultra-light);
    color: var(--primary-dark);
    font-weight: 700;
    font-size: var(--text-m);
}

.content table.stats tbody td { font-variant-numeric: tabular-nums; }

/* Also handle the ancient tabular class used elsewhere */
.content table.tabular thead tr {
    background-image: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.content table.tabular th.lede-cell,
.content table.tabular td.lede-cell { text-align: left; }

/* ---------- Datepicker popup ---------- */

#dp {
    background-color: var(--surface-card);
    border: var(--border-width) solid var(--border-color-strong);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2xs);
    width: 24rem;
    z-index: 1000;
}

#dpnavbar {
    background-color: transparent;
    margin-bottom: var(--space-2xs);
    border-radius: var(--border-radius-s) var(--border-radius-s) 0 0;
    overflow: hidden;
}

#dpnavbar th {
    font-family: var(--font-heading);
    font-size: var(--text-s);
    font-weight: 700;
    color: var(--primary);
    padding: 0.6rem;
    line-height: 1;
}

#dpnavbar select {
    background-color: var(--surface-card);
    color: var(--primary-dark);
    font-family: var(--font-text);
    font-weight: 600;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-s);
    padding: 0.2rem 0.4rem;
    min-height: auto;
    width: auto;
}

#dpgrid {
    background-color: var(--surface-card);
    border: none;
}

#dpgrid th {
    background-color: var(--primary-ultra-light);
    color: var(--primary-dark);
    font-family: var(--font-text);
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 0.6rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#dpgrid td {
    font-family: var(--font-text);
    font-size: var(--text-s);
    padding: 0.7rem 0;
    border-radius: var(--border-radius-s);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

#dpgrid td:hover {
    background-color: var(--primary-ultra-light);
    color: var(--primary);
    font-weight: 700;
}

#dpgrid td.dpothermonth { color: var(--neutral-semi-light); }

#dpgrid td.dpweekend { color: var(--danger); }

#dpgrid td.dpeventday {
    border: 2px solid var(--primary);
    font-weight: 700;
}

#dpgrid td.dpselected {
    background-color: var(--primary);
    color: var(--white);
    font-weight: 700;
}

/* ---------- Iframe context: just vertical breathing room, no extra horizontal padding ---------- */

.wrap-sidebar > .page > .content {
    padding-inline: 0;
    padding-block: var(--space-m);
}

/* ---------- RESPONSIVE ---------- */

/* Tablet breakpoint: unfix the old 750px layout on rogain.ee standalone too */
@media (max-width: 899px) {
    /* Override Anton's fixed 750px/164px/583px positioning only in iframe.
       For standalone rogain.ee we leave it as-is — Sten's scope is the
       iframe flow. Leaving this rule deliberately empty as a marker. */
}

/* Phone + narrow tablets / narrow iframes: stack complex tables as cards */
@media (max-width: 767px) {

    /* Edge-to-edge on mobile: no outer grey, no side padding.
       Cards keep their own internal padding so fields still breathe. */
    html, body { background: var(--white); }
    .wrap { padding: 0; }
    .wrap-sidebar > .page > .content { padding-block: 0; }

    /* Section headings get a banner look against the white body so they
       still read as section breaks once the surrounding grey is gone. */
    .content h2 {
        margin: 0;
        padding: var(--space-s) var(--space-m);
        background: var(--primary-ultra-light);
        border-left: 4px solid var(--primary);
        border-radius: 0;
        font-size: var(--text-l);
        color: var(--primary-dark);
    }
    .content h3 { font-size: var(--text-m); }

    /* Cards: flat, edge-to-edge, no border/radius/shadow so they blend with body */
    .content table.mbrs tr,
    .content table.mbrs tr:nth-child(even) {
        background: var(--white);
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: var(--space-m) var(--space-m);
        margin: 0;
    }
    /* Subtle separator between stacked cards */
    .content table.mbrs tr + tr {
        border-top: var(--border-width) solid var(--border-color);
    }

    .content { font-size: var(--text-m); }

    /* Turn every form table inside reg.php into a stacked card layout.
       Team info (.tm), invoice blocks, and members table all get the same
       treatment: hide thead, stack each tr as a card, each td as a row
       with a label (provided by language-scoped ::before content). */

    .content table.mbrs,
    .content table.mbrs thead,
    .content table.mbrs tbody {
        display: block;
        width: 100%;
    }

    /* tr becomes a flex-wrap row container so consecutive small cells (checkboxes)
       can pair up when there's space, and wrap when there isn't. */
    .content table.mbrs tr {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        width: 100%;
        gap: 0;
    }

    /* td defaults to full row (text inputs take their own line). */
    .content table.mbrs td {
        display: flex;
        flex: 1 1 100%;
        width: 100%;
    }

    /* Checkbox-only cells shrink to their content — adjacent ones sit side by side. */
    .content table.mbrs td:has(> input[type="checkbox"]:only-child) {
        flex: 0 1 auto;
        width: auto;
    }

    .content table.mbrs {
        border: none;
        background: transparent;
        box-shadow: none;
        margin: 0 0 var(--space-m);
    }

    .content table.mbrs thead { display: none; }

    .content table.mbrs tr {
        background: var(--surface-card);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-xs);
        padding: var(--space-s);
        margin-bottom: var(--space-s);
    }

    .content table.mbrs tr:nth-child(even) { background: var(--surface-card); }

    /* Default: label above, input below (stacked column). */
    .content table.mbrs td {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2xs);
        border: none;
        padding: var(--space-s) 0;
        text-align: left;
    }

    .content table.mbrs td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: var(--text-s);
        color: var(--base-dark);
    }

    /* Inputs fill the row width (high specificity beats old .tmname/.gname 95%/90% rules) */
    .content table.mbrs td > input.tmname,
    .content table.mbrs td > input.email,
    .content table.mbrs td > input.gname,
    .content table.mbrs td > input.sname,
    .content table.mbrs td > input.datepick,
    .content table.mbrs td > input.si,
    .content table.mbrs td > input.invcnm,
    .content table.mbrs td > input.invcst,
    .content table.mbrs td > input.invccc,
    .content table.mbrs td > input.invccv,
    .content table.mbrs td > input.invchs,
    .content table.mbrs td > input.invcfl,
    .content table.mbrs td > input.invcvl,
    .content table.mbrs td > input.invcpr,
    .content table.mbrs td > input.invccp,
    .content table.mbrs td > input.invctc,
    .content table.mbrs td > input.invctr,
    .content table.mbrs td > input[type="text"],
    .content table.mbrs td > input[type="email"],
    .content table.mbrs td > input[type="number"],
    .content table.mbrs td > select {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    /* Checkbox-only rows: label + checkbox side-by-side on one line */
    .content table.mbrs td:has(> input[type="checkbox"]:only-child) {
        flex-direction: row;
        align-items: center;
        gap: var(--space-s);
    }
    .content table.mbrs td > input[type="checkbox"] {
        margin: 0;
        align-self: flex-start;
    }

    .content table.mbrs tr > td:first-child { padding-top: 0; }
    .content table.mbrs tr > td:last-child { padding-bottom: 0; }

    /* Fallback labels when data-label attribute is absent (current HTML).
       Language-scoped via <html lang>. Estonian defaults; English overrides. */

    /* --- TEAM INFO (.tm): 5 tds → name | 4h | family | email | invoice --- */
    .content table.mbrs.tm tr > td:nth-child(1)::before { content: 'Võistkonna nimi'; }
    .content table.mbrs.tm tr > td:nth-child(2)::before { content: '4-tunnine rogain'; }
    .content table.mbrs.tm tr > td:nth-child(3)::before { content: 'Pere'; }
    .content table.mbrs.tm tr > td:nth-child(4)::before { content: 'E-posti aadress'; }
    .content table.mbrs.tm tr > td:nth-child(5)::before { content: 'Soovin arvet'; }

    /* --- MEMBERS table (no extra class, uses .mbrs only, 6 tds): gname | sname | sex | dob | oap | si --- */
    /* Apply only when NOT .tm and NOT within .invc */
    .content form#form_reg > table.mbrs:not(.tm) tr > td:nth-child(1)::before { content: 'Eesnimi'; }
    .content form#form_reg > table.mbrs:not(.tm) tr > td:nth-child(2)::before { content: 'Perekonnanimi'; }
    .content form#form_reg > table.mbrs:not(.tm) tr > td:nth-child(3)::before { content: 'Sugu'; }
    .content form#form_reg > table.mbrs:not(.tm) tr > td:nth-child(4)::before { content: 'Sünniaeg'; }
    .content form#form_reg > table.mbrs:not(.tm) tr > td:nth-child(5)::before { content: 'Pensionär'; }
    .content form#form_reg > table.mbrs:not(.tm) tr > td:nth-child(6)::before { content: 'SI-pulk'; }

    /* --- INVOICE sub-tables (3 tables in sequence) ---
       Table 1: invcnm | invccc | invccv  (name / comp code / VAT)
       Table 2: invcst | invchs | invcfl | invcvl | invcpr  (street / house / flat / village / parish)
       Table 3: invccp | invctc | invctr  (postal / town / country) */
    .content div.invc > table.mbrs:nth-of-type(1) tr > td:nth-child(1)::before { content: 'Nimi / Ettevõte'; }
    .content div.invc > table.mbrs:nth-of-type(1) tr > td:nth-child(2)::before { content: 'Reg. kood'; }
    .content div.invc > table.mbrs:nth-of-type(1) tr > td:nth-child(3)::before { content: 'KMKR nr'; }
    .content div.invc > table.mbrs:nth-of-type(2) tr > td:nth-child(1)::before { content: 'Tänav'; }
    .content div.invc > table.mbrs:nth-of-type(2) tr > td:nth-child(2)::before { content: 'Maja nr'; }
    .content div.invc > table.mbrs:nth-of-type(2) tr > td:nth-child(3)::before { content: 'Korter'; }
    .content div.invc > table.mbrs:nth-of-type(2) tr > td:nth-child(4)::before { content: 'Küla / Asula'; }
    .content div.invc > table.mbrs:nth-of-type(2) tr > td:nth-child(5)::before { content: 'Vald'; }
    .content div.invc > table.mbrs:nth-of-type(3) tr > td:nth-child(1)::before { content: 'Postiindeks'; }
    .content div.invc > table.mbrs:nth-of-type(3) tr > td:nth-child(2)::before { content: 'Linn / Maakond'; }
    .content div.invc > table.mbrs:nth-of-type(3) tr > td:nth-child(3)::before { content: 'Riik'; }

    /* English overrides */
    html[lang="en"] .content table.mbrs.tm tr > td:nth-child(1)::before { content: 'Team name'; }
    html[lang="en"] .content table.mbrs.tm tr > td:nth-child(2)::before { content: '4-hour rogaine'; }
    html[lang="en"] .content table.mbrs.tm tr > td:nth-child(3)::before { content: 'Family'; }
    html[lang="en"] .content table.mbrs.tm tr > td:nth-child(4)::before { content: 'Email address'; }
    html[lang="en"] .content table.mbrs.tm tr > td:nth-child(5)::before { content: 'Send me an invoice'; }

    html[lang="en"] .content form#form_reg > table.mbrs:not(.tm) tr > td:nth-child(1)::before { content: 'Given name'; }
    html[lang="en"] .content form#form_reg > table.mbrs:not(.tm) tr > td:nth-child(2)::before { content: 'Surname'; }
    html[lang="en"] .content form#form_reg > table.mbrs:not(.tm) tr > td:nth-child(3)::before { content: 'Sex'; }
    html[lang="en"] .content form#form_reg > table.mbrs:not(.tm) tr > td:nth-child(4)::before { content: 'Date of birth'; }
    html[lang="en"] .content form#form_reg > table.mbrs:not(.tm) tr > td:nth-child(5)::before { content: 'Retired / OAP'; }
    html[lang="en"] .content form#form_reg > table.mbrs:not(.tm) tr > td:nth-child(6)::before { content: 'SI stick'; }

    html[lang="en"] .content div.invc > table.mbrs:nth-of-type(1) tr > td:nth-child(1)::before { content: 'Name / Company'; }
    html[lang="en"] .content div.invc > table.mbrs:nth-of-type(1) tr > td:nth-child(2)::before { content: 'Registry code'; }
    html[lang="en"] .content div.invc > table.mbrs:nth-of-type(1) tr > td:nth-child(3)::before { content: 'VAT number'; }
    html[lang="en"] .content div.invc > table.mbrs:nth-of-type(2) tr > td:nth-child(1)::before { content: 'Street'; }
    html[lang="en"] .content div.invc > table.mbrs:nth-of-type(2) tr > td:nth-child(2)::before { content: 'House no.'; }
    html[lang="en"] .content div.invc > table.mbrs:nth-of-type(2) tr > td:nth-child(3)::before { content: 'Flat'; }
    html[lang="en"] .content div.invc > table.mbrs:nth-of-type(2) tr > td:nth-child(4)::before { content: 'Village'; }
    html[lang="en"] .content div.invc > table.mbrs:nth-of-type(2) tr > td:nth-child(5)::before { content: 'Parish'; }
    html[lang="en"] .content div.invc > table.mbrs:nth-of-type(3) tr > td:nth-child(1)::before { content: 'Postal code'; }
    html[lang="en"] .content div.invc > table.mbrs:nth-of-type(3) tr > td:nth-child(2)::before { content: 'Town / County'; }
    html[lang="en"] .content div.invc > table.mbrs:nth-of-type(3) tr > td:nth-child(3)::before { content: 'Country'; }

    /* Button row goes full-width stacked */
    .content table.btns,
    .content table.btns tbody,
    .content table.btns tr,
    .content table.btns td {
        display: block;
        width: 100%;
    }

    .content table.btns td.btnfirst,
    .content table.btns td.btnback,
    .content table.btns td.btnlast { text-align: center; padding: var(--space-xs) 0; }

    .content table.btns input[type="submit"] { width: 100%; min-width: 0; }

    /* Teams + stats tables: horizontal scroll preserves tabular shape */
    .content table.teams,
    .content table.stats,
    .content table.tabular {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .content table.teams thead,
    .content table.teams tbody,
    .content table.stats thead,
    .content table.stats tbody { display: table-header-group; }
    .content table.teams tbody,
    .content table.stats tbody { display: table-row-group; }

    /* Filter bar stacks naturally */
    .content table.filter,
    .content table.filter tbody,
    .content table.filter tr,
    .content table.filter td { display: block; width: 100%; }

    .content table.filter select { width: 100%; margin-bottom: var(--space-xs); }
    .content table.filter input[type="submit"] { width: 100%; margin-left: 0; }
}

/* ---------- Very small screens: tighten padding ---------- */
@media (max-width: 380px) {
    .content table.mbrs tr,
    .content table.mbrs tr:nth-child(even) { padding: var(--space-s) var(--space-s); }
    .content h2 { padding: var(--space-s) var(--space-s); }
}

/* ---------- Print ---------- */
@media print {
    .content table { box-shadow: none; border: 1px solid var(--neutral-dark); }
    .content input[type="submit"], .content .btns { display: none; }
}


/* === TÕNIS 2026-05-08 reg tweaks (B3) === */
/* Revert: delete from this marker to EOF. */

/* #16 — denser desktop form: less white area, tighter rows */
.content form#form_reg table.mbrs tbody td { padding: 0.7rem 0.9rem; }
.content form#form_reg table.mbrs thead th { padding: 0.7rem 0.8rem; }
.content form#form_reg h2 { margin: var(--space-m) 0 var(--space-2xs); }
.content form#form_reg table.mbrs { margin-bottom: var(--space-s); }
.content form#form_reg .ftnote { margin-top: 0; margin-bottom: var(--space-s); }

/* #21 — Rent label sits next to its checkbox in the SI-pulk cell */
.content .rentlbl {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-left: 0.5rem;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
}

@media (max-width: 767px) {
    /* #19 — Sünniaeg (td4) + Pensionär (td5) on one row */
    .content form#form_reg > table.mbrs:not(.tm) tr > td:nth-child(4) { flex: 1 1 60%; }
    .content form#form_reg > table.mbrs:not(.tm) tr > td:nth-child(5) {
        flex: 1 1 30%;
        flex-direction: row;
        align-items: center;
        gap: var(--space-s);
    }
    /* #20 — SI-pulk input + Rent label/checkbox inline within td6 */
    .content form#form_reg > table.mbrs:not(.tm) tr > td:nth-child(6) {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2xs) var(--space-s);
    }
    .content form#form_reg > table.mbrs:not(.tm) tr > td:nth-child(6)::before { flex: 1 1 100%; }
    .content form#form_reg > table.mbrs:not(.tm) tr > td:nth-child(6) > input.si { flex: 1 1 8ch; width: auto; }
    .content form#form_reg > table.mbrs:not(.tm) tr > td:nth-child(6) > input.sirent,
    .content form#form_reg > table.mbrs:not(.tm) tr > td:nth-child(6) > .rentlbl { flex: 0 0 auto; }
}