/* Tuesday Football - Grassroots Club & Pitch design system
   Shared component classes. Pages use Tailwind utilities for layout and these for the pieces
   that repeat, so the look stays consistent. Colours mirror the Tailwind theme in App.razor. */

/* ===== BASE ===== */
html, body {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    background-color: #f8fafc;
    color: #0f172a;
}

h1, h2, h3, h4, h5, h6,
.font-display {
    font-family: 'Outfit', system-ui, sans-serif;
}

html {
    scroll-behavior: smooth;
}

::selection {
    background-color: rgba(34, 197, 94, 0.3);
}

*:focus-visible {
    outline: 2px solid #15803d;
    outline-offset: 2px;
}

/* Blazor's FocusOnNavigate moves focus to the page h1; don't draw a ring around headings */
h1:focus,
h1:focus-visible {
    outline: none;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.icon-fill {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* ===== LABELS ===== */
/* Space Grotesk caps, used for eyebrows, table headers and small metadata */
.label-caps {
    font-family: 'Space Grotesk', ui-monospace, monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.stat-value {
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 800;
    font-size: 2.25rem;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.page-title {
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #0f172a;
}

@media (min-width: 768px) {
    .page-title {
        font-size: 2.5rem;
    }
}

/* ===== CARDS ===== */
.card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1.75rem;
    box-shadow: 0 2px 4px -1px rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.02);
}

/* Nested row/slot inside a card */
.slot {
    background-color: #f1f5f9;
    border-radius: 1rem;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.75rem;
    padding: 0 1.25rem;
    border-radius: 9999px;
    font-family: 'Space Grotesk', ui-monospace, monospace;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

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

.btn .material-symbols-outlined {
    font-size: 1.125rem;
}

.btn-sm {
    height: 2.25rem;
    padding: 0 0.875rem;
    font-size: 0.75rem;
}

.btn-xs {
    height: 1.875rem;
    padding: 0 0.75rem;
    font-size: 0.6875rem;
}

.btn-lg {
    height: 3.5rem;
    padding: 0 1.75rem;
    font-size: 1rem;
}

.btn-primary {
    background-color: #15803d;
    color: #ffffff;
    box-shadow: 0 2px 6px -2px rgba(21, 128, 61, 0.35);
}

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

.btn-navy {
    background-color: #0f172a;
    color: #ffffff;
}

.btn-navy:hover:not(:disabled) {
    background-color: #1e293b;
}

.btn-outline {
    background-color: #ffffff;
    border: 1.5px solid #e2e8f0;
    color: #0f172a;
}

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

.btn-soft {
    background-color: #f1f5f9;
    color: #0f172a;
}

.btn-soft:hover:not(:disabled) {
    background-color: #e2e8f0;
}

.btn-danger {
    background-color: #ffe4e6;
    color: #e11d48;
}

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

.btn-gold {
    background-color: #fef3c7;
    color: #92400e;
}

.btn-gold:hover:not(:disabled) {
    background-color: #fde68a;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    color: #64748b;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-icon:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}

.btn-icon .material-symbols-outlined {
    font-size: 1.25rem;
}

.link {
    font-weight: 600;
    color: #15803d;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.link:hover {
    color: #166534;
}

/* ===== CHIPS ===== */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-family: 'Space Grotesk', ui-monospace, monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.chip .material-symbols-outlined {
    font-size: 0.875rem;
}

.chip-green { background-color: #dcfce7; color: #166534; }
.chip-gold { background-color: #fef3c7; color: #92400e; }
.chip-rose { background-color: #ffe4e6; color: #9f1239; }
.chip-blue { background-color: #dbeafe; color: #1e40af; }
.chip-slate { background-color: #f1f5f9; color: #475569; }
.chip-pitch { background-color: #15803d; color: #ffffff; }

/* Team bibs */
.chip-dark {
    background-color: #0f172a;
    color: #ffffff;
}

.chip-light {
    background-color: #ffffff;
    color: #0f172a;
    box-shadow: inset 0 0 0 1.5px #cbd5e1;
}

.dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

/* ===== FORMS ===== */
.field-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
}

.field {
    display: block;
    width: 100%;
    min-height: 3rem;
    padding: 0.625rem 1rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 1rem;
    background-color: #ffffff;
    color: #0f172a;
    font-size: 0.875rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field::placeholder {
    color: #94a3b8;
}

.field:focus {
    outline: none;
    border-color: #15803d;
    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.18);
}

textarea.field {
    min-height: 0;
    resize: none;
}

.field-sm {
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.75rem;
}

.field-hint {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: #64748b;
}

.validation-message,
.field-error {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #e11d48;
}

/* Toggle switch: <label class="switch"><input type="checkbox" /><span></span></label> */
.switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 2.75rem;
    height: 1.5rem;
    cursor: pointer;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch span {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background-color: #cbd5e1;
    transition: background-color 0.15s ease;
}

.switch span::after {
    content: "";
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 9999px;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
    transition: transform 0.15s ease;
}

.switch input:checked + span {
    background-color: #15803d;
}

.switch input:checked + span::after {
    transform: translateX(1.25rem);
}

.switch input:focus-visible + span {
    outline: 2px solid #15803d;
    outline-offset: 2px;
}

/* ===== SEGMENTED CONTROL ===== */
.segmented {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 9999px;
    background-color: #f1f5f9;
}

.segmented > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 2.25rem;
    padding: 0 1rem;
    border-radius: 9999px;
    font-family: 'Space Grotesk', ui-monospace, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.segmented > button:hover {
    color: #0f172a;
}

.segmented > button.active {
    background-color: #15803d;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

/* ===== TABLES ===== */
.tbl {
    width: 100%;
    text-align: left;
    font-size: 0.875rem;
    border-collapse: separate;
    border-spacing: 0;
}

.tbl thead th {
    padding: 0.75rem 1rem;
    background-color: #f1f5f9;
    font-family: 'Space Grotesk', ui-monospace, monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
}

.tbl thead th:first-child {
    border-radius: 1rem 0 0 1rem;
}

.tbl thead th:last-child {
    border-radius: 0 1rem 1rem 0;
}

.tbl tbody td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.tbl tbody tr:last-child td {
    border-bottom: none;
}

.tbl tbody tr {
    transition: background-color 0.15s ease;
}

.tbl tbody tr:hover {
    background-color: #f8fafc;
}

/* ===== ALERTS ===== */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    border: 1px solid transparent;
    border-radius: 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.alert .material-symbols-outlined {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.alert-success { background-color: #dcfce7; border-color: #bbf7d0; color: #166534; }
.alert-error { background-color: #ffe4e6; border-color: #fecdd3; color: #9f1239; }
.alert-warning { background-color: #fef3c7; border-color: #fde68a; color: #92400e; }
.alert-info { background-color: #dbeafe; border-color: #bfdbfe; color: #1e40af; }

/* ===== AVATARS ===== */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: #dcfce7;
    color: #166534;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
}

.avatar-sm {
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
}

/* ===== TEAMS ===== */
.team-dark {
    background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
    color: #ffffff;
}

.team-light {
    background-color: #ffffff;
    color: #0f172a;
    border: 1.5px solid #cbd5e1;
}

/* ===== PITCH TEXTURES ===== */
/* Faint dotted grid, like pitch-side boards */
.pitch-dots {
    background-image: radial-gradient(rgba(21, 128, 61, 0.22) 1px, transparent 1px);
    background-size: 16px 16px;
}

/* Mown-turf stripes on a green surface */
.turf {
    background-color: #15803d;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 50%, transparent 50%),
        radial-gradient(circle at 85% -20%, rgba(134, 239, 172, 0.35) 0%, transparent 55%);
    background-size: 64px 100%, 100% 100%;
    color: #ffffff;
}

/* Chalk touchline divider */
.chalk-divider {
    border-top: 1.5px dashed #e2e8f0;
}

/* Open roster slot */
.open-slot {
    border: 1.5px dashed #86efac;
    border-radius: 1rem;
    background-color: rgba(220, 252, 231, 0.35);
}

/* ===== MODALS ===== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(15, 23, 42, 0.6);
    animation: fadeIn 0.2s ease-out;
}

.modal-panel {
    width: 100%;
    max-width: 28rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background-color: #ffffff;
    border-radius: 1.75rem;
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
    animation: scaleIn 0.2s ease-out;
}

/* ===== NAV ===== */
.nav-pill {
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    padding: 0 0.875rem;
    border-radius: 9999px;
    font-family: 'Space Grotesk', ui-monospace, monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-pill:hover {
    color: #0f172a;
    background-color: #ffffff;
}

.nav-pill.active {
    background-color: #15803d;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

/* ===== SPINNERS ===== */
.spinner {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #dcfce7;
    border-top-color: #15803d;
    border-radius: 9999px;
    animation: spin 0.8s linear infinite;
}

.spinner-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: currentColor;
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f8fafc;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 5px;
    border: 2px solid #f8fafc;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}