/*
 * Design tokens and component classes lifted from the Orienteering Fantasy website
 * mockup (orienteering-fantasy-website-mockups.html — "Clean Minimal" theme), scoped
 * down to what this staff-facing app actually uses: page chrome (header/
 * footer), buttons, and the login card. The mockup's player-facing pieces
 * (squad builder, starters, relay, leaderboard) aren't ported — manage's own
 * admin CRUD screens will need their own components as they're built, but
 * should reuse these same tokens for visual consistency with the mockup.
 */
:root {
    --ink: #111827; --ink-soft: #374151; --muted: #6B7280; --muted-2: #9CA3AF;
    --bg: #F8F9FB; --card: #FFFFFF; --border: #E5E7EB; --border-soft: #F0F1F3;
    --accent: #0D9488; --accent-dark: #0F766E; --accent-soft: #E6F6F4;
    --gold: #B45309; --gold-soft: #FEF3E2;
    --danger: #DC2626; --danger-soft: #FEECEC;
    --success: #15803D; --success-soft: #EAF7EE;
    --radius: 14px; --radius-sm: 8px;
    --shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}

a { color: inherit; text-decoration: none; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 28px 24px 80px; }

/* ---------- buttons ---------- */
.btn {
    font-family: inherit; font-size: 12px; font-weight: 700; border-radius: 8px;
    padding: 7px 12px; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-outline { background: #fff; border-color: var(--border); color: var(--ink-soft); }
.btn-outline:hover { border-color: var(--muted-2); }
.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 11.5px; }
.btn-lg { padding: 11px 22px; font-size: 13.5px; border-radius: 10px; }

/* ---------- flash messages ---------- */
.flash { border-radius: var(--radius-sm); padding: 11px 16px; font-size: 13px; font-weight: 600; margin-bottom: 20px; }
.flash-success { background: var(--success-soft); color: var(--success); border: 1px solid #BFE6CB; }
.flash-danger { background: var(--danger-soft); color: var(--danger); border: 1px solid #F8CACA; }

/* ---------- status badges ---------- */
/* Round's "Market" badge (admin/round/index.html.twig) is computed from
   marketClosesAt vs. now at render time — NOT the persisted Round.status
   column, which nothing in the app keeps in sync with the actual deadline
   (see the entity's docblock). This is the one place that reflects what
   engine's RoundAccessResolver/RoundRepository actually enforce. */
.status-badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-sm); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.status-badge-open { background: var(--success-soft); color: var(--success); }
.status-badge-closed { background: var(--danger-soft); color: var(--danger); }

/* ---------- admin CRUD: page header, cards, tables, forms ---------- */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 16px; }
.page-header h1 { font-size: 24px; margin: 0 0 4px; letter-spacing: -.02em; }
.page-header p { margin: 0; color: var(--muted); font-size: 14px; }

.card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px 18px; box-shadow: var(--shadow);
}

table.admin-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
table.admin-table thead th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2);
    padding: 12px 14px; background: var(--bg); border-bottom: 1px solid var(--border);
}
table.admin-table tbody td { padding: 12px 14px; font-size: 13px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
table.admin-table tbody tr:last-child td { border-bottom: none; }
table.admin-table .row-actions { display: flex; gap: 8px; justify-content: flex-end; }
table.admin-table .empty-row td { color: var(--muted); text-align: center; padding: 24px; }

.subsection { margin-top: 32px; }
.subsection h2 { font-size: 16px; margin: 0 0 12px; letter-spacing: -.01em; }
.read-only-note { color: var(--muted); font-size: 12.5px; margin: -8px 0 20px; }
.read-only-note code, table.admin-table code { background: var(--border-soft); border-radius: 4px; padding: 1px 5px; font-size: .92em; }

table.admin-table td .muted { color: var(--muted-2); font-size: 12px; margin-left: 4px; }

.form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); max-width: 560px; }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
.form-row input[type=text], .form-row input[type=date], .form-row input[type=number],
.form-row input[type=datetime-local], .form-row select {
    display: block; width: 100%; border: 1px solid var(--border); border-radius: 8px;
    padding: 9px 11px; font-size: 13px; font-family: inherit;
}
.form-row .form-error { color: var(--danger); font-size: 11.5px; margin-top: 4px; font-weight: 600; }
.form-row .form-help { color: var(--muted); font-size: 11.5px; margin: 6px 0 0; }
.form-check { display: flex; align-items: center; gap: 8px; }
.form-check label { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.form-actions { display: flex; gap: 10px; margin-top: 22px; }

.form-row.autocomplete { position: relative; }
.autocomplete-results {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 10; margin: 4px 0 0; padding: 4px;
    list-style: none; background: #fff; border: 1px solid var(--border); border-radius: 8px;
    box-shadow: var(--shadow); max-height: 220px; overflow-y: auto;
}
.autocomplete-results li { padding: 8px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.autocomplete-results li:hover { background: var(--accent-soft); }

/* ---------- header ---------- */
.site-topbar { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.site-topbar-inner {
    max-width: 1200px; margin: 0 auto; display: flex; align-items: center;
    justify-content: space-between; padding: 14px 24px;
}
.logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
.logo-mark {
    width: 26px; height: 26px; border-radius: 7px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark)); display: inline-block;
}
.logo-tag {
    font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); background: var(--border-soft); padding: 3px 8px; border-radius: 6px; margin-left: 2px;
}
.site-nav { display: flex; gap: 28px; font-size: 14px; font-weight: 600; color: var(--muted); }
.site-nav a.active { color: var(--ink); }
.site-user { display: flex; align-items: center; gap: 14px; }
.avatar {
    width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}

/* ---------- footer ---------- */
footer.app-footer {
    max-width: 1200px; margin: 40px auto 0; padding: 20px 24px; border-top: 1px solid var(--border);
    color: var(--muted-2); font-size: 12px; display: flex; justify-content: space-between;
}

/* ---------- login ---------- */
.login-section { max-width: 1200px; margin: 0 auto; padding: 70px 24px; display: flex; justify-content: center; }
.login-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 32px; width: 100%; max-width: 380px;
}
.login-card h2 { font-size: 19px; margin: 0 0 4px; }
.login-card .muted { color: var(--muted); font-size: 12.5px; margin: 0 0 20px; }
.login-card .form-error {
    background: var(--danger-soft); color: var(--danger); font-size: 12.5px; font-weight: 600;
    border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 16px;
}
.login-card label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 14px; }
.login-card input {
    display: block; width: 100%; margin-top: 6px; border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 12px; font-size: 13px; font-family: inherit;
}
.small { font-size: 12px; margin-top: 16px; text-align: center; color: var(--muted); }