/**
 * Document and roster upload styles, for the upload components the team
 * check-in portal mounts (players/roster_upload_react).
 * Uses CSS variables from style.css
 *
 * SIZING: the root font-size is 10px site-wide and `body` is 1.6rem, so 1rem =
 * 10px and 1.6rem is normal body text. Divide the pixel size you want by ten.
 * Half this file was originally written against the browser default of 16px —
 * `0.875rem` meant 14px and rendered at 8.75px, which is how the header, the
 * preview table and the upload history ended up microscopic. Everything here is
 * now calibrated to the 10px root: 1.6rem body, 1.4–1.5rem secondary text,
 * 1.2rem for pills and timestamps. Nothing here should go below 1.2rem:
 * parents and coaches read it on phones.
 */

/* Cards */
.roster-card {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.roster-card h2 {
    margin: 0 0 0.5rem 0;
    font-size: 2.2rem;
    color: var(--charcoal, #3d4554);
}

/* Text styles */
.roster-muted {
    color: #6b7280;
    font-size: 1.5rem;
}

/* Buttons */
.roster-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: 1.6rem;
    font-weight: 500;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.roster-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.roster-btn-primary {
    background-color: var(--cinnamon-satin, #c7687f);
    color: white;
}

.roster-btn-primary:hover:not(:disabled) {
    background-color: #b5576d;
}

.roster-btn-secondary {
    background-color: #f3f4f6;
    color: var(--charcoal, #3d4554);
    border: 1px solid #e5e7eb;
}

.roster-btn-secondary:hover:not(:disabled) {
    background-color: #e5e7eb;
}

.roster-btn-danger-outline {
    background: transparent;
    color: #dc2626;
    border: 1px solid #dc2626;
}

.roster-btn-danger-outline:hover:not(:disabled) {
    background-color: #fef2f2;
}

/* Actions row */
.roster-actions {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

/* Loading state */
.roster-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--cinnamon-satin, #c7687f);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Success icon */
.roster-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    background-color: #dcfce7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.2rem;
    color: #16a34a;
}

/* File upload */
.roster-sample-link {
    margin: 1rem 0;
}

.roster-sample-link a {
    color: var(--cinnamon-satin, #c7687f);
    text-decoration: none;
}

.roster-sample-link a:hover {
    text-decoration: underline;
}

.roster-dropzone {
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    padding: 3rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.roster-dropzone:hover {
    border-color: var(--cinnamon-satin, #c7687f);
    background-color: #fdf2f4;
}

.roster-dropzone.dragging {
    border-color: var(--cinnamon-satin, #c7687f);
    background-color: #fdf2f4;
}

.roster-dropzone.has-file {
    border-style: solid;
    background-color: #f9fafb;
}

.roster-dropzone-icon {
    font-size: 4.8rem;
    margin-bottom: 0.5rem;
}

.roster-dropzone-content p {
    margin: 0.25rem 0;
}

.roster-file-types {
    font-size: 1.2rem;
    color: #9ca3af;
    margin-top: 0.5rem !important;
}

.roster-file-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.roster-file-icon {
    font-size: 3.2rem;
}

.roster-file-name {
    font-weight: 500;
}

.roster-file-remove {
    background: #f3f4f6;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
}

.roster-file-remove:hover {
    background: #e5e7eb;
}

/* Preview table */
.roster-preview-table-container {
    overflow-x: auto;
    margin: 1.5rem 0;
}

.roster-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.4rem;
}

.roster-preview-table th,
.roster-preview-table td {
    padding: 0.625rem 0.875rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.roster-preview-table th {
    background-color: #f9fafb;
    font-weight: 600;
    color: #374151;
}

.roster-preview-table tr:hover {
    background-color: #f9fafb;
}

.roster-status {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 1.2rem;
    font-weight: 500;
}

.roster-status-new {
    background-color: #dcfce7;
    color: #16a34a;
}

.roster-status-update {
    background-color: #dbeafe;
    color: #2563eb;
}

/* Warnings */
.roster-warnings {
    margin: 1rem 0;
    padding: 0.75rem;
    background-color: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 6px;
}

.roster-warning {
    margin: 0.25rem 0;
    color: #92400e;
    font-size: 1.4rem;
}

/* Date format confirmation */
.roster-date-options {
    margin: 1.5rem 0;
}

.roster-date-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    background: #f9fafb;
    border-radius: 6px;
    cursor: pointer;
}

.roster-date-option:hover {
    background: #f3f4f6;
}

.roster-date-option input {
    margin: 0;
}

/* Conflicts */
.roster-conflict-list {
    margin: 1.5rem 0;
}

.roster-conflict-item {
    padding: 1rem;
    margin: 0.75rem 0;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}

.roster-conflict-item.resolved {
    background: #f0fdf4;
    border-color: #86efac;
}

.roster-conflict-question {
    margin-bottom: 0.75rem;
}

.roster-conflict-question p {
    margin: 0;
    font-weight: 500;
}

.roster-conflict-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.roster-conflict-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: white;
    border-radius: 4px;
    cursor: pointer;
}

.roster-conflict-option:hover {
    background: #f3f4f6;
}

.roster-conflict-option input {
    margin: 0;
}

/* Success card */
.roster-success {
    text-align: center;
    max-width: 500px;
    margin: 3rem auto;
}

.roster-success-message {
    font-size: 1.6rem;
    color: #374151;
}

/* Upload history */
.roster-history-list {
    margin-top: 1rem;
}

.roster-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    margin: 0.5rem 0;
    background: #f9fafb;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.roster-history-section {
    margin: 2rem 0 0;
    font-size: 1.6rem;
}

.roster-history-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* "Received" beside a document not yet reviewed: says plainly that it arrived. */
.roster-history-received {
    color: #065f46;
    font-size: 1.4rem;
    font-weight: 600;
}

.roster-history-info .roster-doc-files {
    margin: 0.5rem 0;
}

.roster-history-item.reverted {
    opacity: 0.6;
}

.roster-history-team {
    font-weight: 500;
}

.roster-history-file {
    font-size: 1.4rem;
    color: #6b7280;
}

.roster-history-date {
    font-size: 1.2rem;
    color: #9ca3af;
}

.roster-history-stats {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.25rem;
    font-size: 1.2rem;
}

.roster-stat-added {
    color: #16a34a;
}

.roster-stat-updated {
    color: #2563eb;
}

.roster-reverted-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: #f3f4f6;
    border-radius: 4px;
    font-size: 1.2rem;
    color: #6b7280;
}

/* Roster limit error */
.roster-limit-error {
    text-align: center;
}

.roster-error-list {
    margin: 1.5rem 0;
    padding: 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
}

.roster-error-item {
    margin: 0.5rem 0;
    color: #dc2626;
}

/* Responsive */
@media (max-width: 640px) {
    .roster-card {
        padding: 1.25rem;
    }

    .roster-actions {
        flex-direction: column;
    }

    .roster-history-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* ===== Document upload view (waivers, player cards, ...) ===== */
.roster-documents { max-width: 720px; margin: 0 auto; padding: 8px 8px 48px; }
.roster-documents > h2 { margin: 0 0 6px; font-size: 2.4rem; color: var(--charcoal, #3d4554); }

/* "Not the right team? Pick a different team" — directly under the heading it
   qualifies, so a rep who landed on the wrong team sees the way out before
   uploading anything into it. */
.roster-doc-teamswitch {
    margin: 0 0 14px;
    color: #6b7280;
    font-size: 1.5rem;
}

/* Short "how to use this page" intro under the heading. */
.roster-doc-intro {
    margin: 0 0 20px;
    color: #6b7280;
    font-size: 1.6rem;
    line-height: 1.5;
}

/* One white card per required document type. */
.roster-doc-type {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
/* An accepted document's card, folded to one line (issue #548): the header and
   a link to open it again. */
.roster-doc-type-folded { padding: 12px 20px; }
.roster-doc-type-folded .roster-doc-type-head { margin-bottom: 6px; }
.roster-doc-fold { display: block; margin: -8px 0 12px; }
.roster-doc-type-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
}
.roster-doc-type h3 { margin: 0; font-size: 1.9rem; color: var(--charcoal, #3d4554); }
.roster-doc-hint { color: #9ca3af; font-weight: 400; font-size: 1.4rem; }

/* At-a-glance status pill in each card header: "✓ On file" vs "Needed". */
.roster-doc-badge {
    font-size: 1.3rem; font-weight: 600; padding: 4px 11px;
    border-radius: 999px; white-space: nowrap;
}
.roster-doc-badge-done { background: #ecfdf5; color: #065f46; }
.roster-doc-badge-todo { background: #fff7ed; color: #9a3412; }
/* Neutral "Not required" — neither done nor outstanding (waived player cards,
   the optional guest roster). */
.roster-doc-badge-na { background: #eef1f4; color: #475569; }

/* Condition line above a card's file picker ("only required if your roster does
   not have player photos") — it qualifies whether to upload at all, so it sits
   between the header and the picker rather than in the footer note. */
.roster-doc-condition {
    color: #6b7280;
    font-size: 1.5rem;
    margin: -6px 0 12px;
}

/* Drop target + "Choose files". The native input is hidden rather than restyled:
   its own "No file chosen" text contradicts the pending-file tray below it, and
   a dropped file can't be written back into it anyway. */
.roster-doc-drop {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    border: 2px dashed #cbd5e1; border-radius: 8px;
    padding: 14px 16px; background: #f9fafb; cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
/* Dragging over: the whole card lights up, so the target is unmistakable while
   a file is hovering and the cursor is nowhere near the button. */
.roster-doc-drop-over {
    border-color: var(--cinnamon-satin, #c7687f);
    background: #fdf2f4;
}
.roster-doc-drop-off { opacity: 0.6; }
.roster-doc-file-input { display: none; }
.roster-doc-drop-hint { color: #6b7280; font-size: 1.4rem; }

/* Files chosen but not yet sent. */
.roster-doc-pending { list-style: none; padding: 0; margin: 12px 0 0; display: flex;
    flex-wrap: wrap; gap: 8px; }
.roster-doc-pending-item {
    display: inline-flex; align-items: center; gap: 8px;
    background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 999px;
    padding: 6px 8px 6px 14px; font-size: 1.4rem; color: #3730a3;
    max-width: 100%;
}
.roster-doc-pending-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-doc-pending-remove {
    background: #c7d2fe; border: none; border-radius: 50%;
    width: 20px; height: 20px; line-height: 1; flex: 0 0 auto;
    color: #312e81; cursor: pointer; font-size: 1.4rem;
}
.roster-doc-pending-remove:hover { background: #a5b4fc; }

/* The Upload button row. */
.roster-doc-upload { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    margin-top: 12px; }

/* "Upload successful" under a box's Upload button once files land, with the
   Done button beside it (2026-09-25 feedback: nothing said plainly that an
   upload had worked). Same green as the coverage "ok" notice. */
.roster-doc-sent {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-top: 12px; padding: 12px 16px;
    background-color: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px;
    color: #065f46; font-size: 1.6rem;
}
/* What the host page adds inside the confirmation (issue #573): the team
   check-in portal's "come back for the status" line and its email opt-in. */
.roster-doc-sent__next {
    margin-top: 8px;
}
/* "We recognize this as the same document previously submitted..." (#577):
   informational, so it keeps the notice's own color rather than a warning's. */
.roster-doc-sent__dup {
    margin-top: 6px;
}
/* "Replace your earlier upload, or add to it?" asked under the Upload button
   when the box already holds this person's uploads (Loi, 2026-09-27). Amber,
   as a question waiting on them, not an error. */
.roster-doc-ask {
    margin-top: 12px; padding: 12px 16px;
    background-color: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
    color: #78350f; font-size: 1.5rem;
}
.roster-doc-ask p { margin: 0 0 8px; }
.roster-doc-ask__hint { color: #92400e; font-size: 1.4rem; }
.roster-doc-ask__warn { font-weight: 600; }
.roster-doc-ask__remember { display: flex; align-items: center; gap: 6px;
    margin: 4px 0 10px; font-size: 1.4rem; }
.roster-doc-ask__buttons { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* The label over the submitter's own files in a box. */
.roster-doc-subs-head {
    margin: 16px 0 0; font-size: 1.4rem; font-weight: 600;
    color: var(--charcoal, #3d4554); text-transform: uppercase; letter-spacing: 0.04em;
}
/* "Finished uploading for <team>? Done" at the foot of the boxes. */
.roster-doc-done {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 12px; flex-wrap: wrap; margin-top: 20px;
    font-size: 1.5rem; color: #6b7280;
}

/* "Have guest players? Add their roster here too" — on the roster card, since
   the separate guest upload section is gone. */
.roster-doc-guestnote { color: #6b7280; font-size: 1.4rem; margin: 12px 0 0; }

/* The list of files this submitter has uploaded for the type. */
.roster-doc-submissions { list-style: none; padding: 0; margin: 14px 0 0; }
.roster-doc-submission {
    border-top: 1px solid #eef0f2; padding: 12px 0 4px;
    display: flex; flex-direction: column; gap: 10px;
}
.roster-doc-submission:first-child { border-top: none; }
.roster-doc-files { display: flex; flex-wrap: wrap; gap: 8px; }
.roster-doc-file {
    display: inline-flex; align-items: center; gap: 6px;
    background: #f3f4f6; border: 1px solid #d7d9dd; border-radius: 999px;
    padding: 6px 12px; cursor: pointer; font-size: 1.5rem; color: var(--charcoal, #3d4554);
}
.roster-doc-file:hover { background: #e9ebef; }
.roster-doc-complete {
    display: flex; align-items: center; gap: 8px;
    font-size: 1.5rem; color: var(--charcoal, #3d4554); cursor: pointer;
}
.roster-doc-complete input { width: 16px; height: 16px; cursor: pointer; }
.roster-doc-delete {
    align-self: flex-start; background: none; border: none;
    color: #b3261e; cursor: pointer; text-decoration: underline;
    padding: 0; font-size: 1.4rem;
}
.roster-doc-delete:hover { color: #8c1d18; }
/* Stands where Delete was once a reviewer has approved the document (#533). */
.roster-doc-accepted {
    align-self: flex-start; color: #065f46; font-size: 1.4rem; font-weight: 600;
}
.roster-doc-none { color: #9ca3af; font-size: 1.5rem; margin: 12px 0 0; }

.roster-doc-spreadsheet-link { color: #6b7280; font-size: 1.5rem; margin: 12px 0 0; }

/* Inline link-styled button (no chrome) in the brand accent color. */
.roster-btn-link {
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--cinnamon-satin, #c7687f);
    cursor: pointer;
}

.roster-btn-link:hover { text-decoration: underline; }

/* The "Guest" tick inside a waiting file's pill, and the same word on a sent
   file that carries it (issue #536). Deliberately quiet: small, muted, no
   fill, because leaving it unticked is always fine. */
.roster-doc-guest-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 1.2rem; color: #6b7280; cursor: pointer; flex: 0 0 auto;
}
.roster-doc-guest-tag input { margin: 0; }
.roster-doc-guest-mark {
    align-self: center; font-size: 1.2rem; color: #6b7280;
    border: 1px solid #d1d5db; border-radius: 999px; padding: 1px 8px;
}

/* Data-residency block notice: shown when an event is tied to Europe and the
   EU storage path is not provisioned yet, so document uploads are refused.
   (features/documents/utils/storage_region.py) */
.roster-doc-blocked {
    margin: 0 0 16px;
    padding: 14px 16px;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #b91c1c;
}
.roster-doc-blocked strong { display: block; margin-bottom: 4px; font-size: 1.7rem; }
.roster-doc-blocked p { margin: 0; font-size: 1.5rem; color: #7f1d1d; }

/* Non-disclosing document-coverage notice: tells a submitter how many of THEIR
   OWN players / which documents are already on file. Counts only — it never
   reveals another submitter's player data. */
.roster-doc-coverage {
    margin: 0 0 16px;
    padding: 13px 16px;
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #1e40af;
    font-size: 1.6rem;
}
.roster-doc-coverage-ok {
    background-color: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}
/* The headline "all documents are in good order" banner: for a fully-submitted
   team this is the single most important thing on the page, so it reads large
   and bold rather than at the small per-player summary size. */
.roster-doc-allgood {
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.45;
    padding: 18px 20px;
}
/* Shown under a category that has no native-site upload but is already on file
   from another channel (GotSport). Reads as a quiet positive, not a warning. */
.roster-doc-onfile {
    color: #065f46;
    font-size: 1.5rem;
    margin: 12px 0 0;
}