/*
 * Top Team Now — panel theme.
 *
 * A plain stylesheet layered on top of Filament's compiled CSS (loaded from a
 * HEAD_END render hook, no Tailwind/Vite build — prod has no node toolchain).
 * Three parts:
 *   1. Design tokens (--ttn-*) — every hand-rolled page/widget reads these
 *      instead of hard-coded hex values, so light/dark and a club's own brand
 *      colour (Filament's --primary-* ramp) flow through one place.
 *   2. Shared building blocks (.ttn-card, .ttn-badge, .ttn-bar, .ttn-ring …)
 *      used by the <x-ttn.*> Blade components.
 *   3. Refinements to Filament's own chrome (sidebar, topbar, sections,
 *      tables, stats, login) and motion.
 */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */

:root {
    --ttn-radius-xs: .375rem;
    --ttn-radius-sm: .5rem;
    --ttn-radius: .875rem;
    --ttn-radius-lg: 1.25rem;
    --ttn-radius-pill: 999px;

    --ttn-bg: var(--gray-50);
    --ttn-surface: #fff;
    --ttn-surface-2: color-mix(in oklab, var(--gray-50) 70%, #fff);
    --ttn-fill: var(--gray-100);
    --ttn-fill-strong: var(--gray-200);
    --ttn-border: color-mix(in oklab, var(--gray-950) 8%, transparent);
    --ttn-border-strong: color-mix(in oklab, var(--gray-950) 14%, transparent);
    --ttn-grid: color-mix(in oklab, var(--gray-950) 6%, transparent);

    --ttn-text: var(--gray-950);
    --ttn-text-2: var(--gray-700);
    --ttn-muted: var(--gray-500);
    --ttn-faint: var(--gray-400);

    --ttn-accent: var(--primary-600);
    --ttn-accent-strong: var(--primary-700);
    --ttn-accent-soft: color-mix(in oklab, var(--primary-500) 12%, transparent);
    --ttn-accent-ink: var(--primary-700);

    --ttn-ok: #16a34a;
    --ttn-ok-soft: color-mix(in oklab, #16a34a 13%, transparent);
    --ttn-ok-ink: #15803d;
    --ttn-warn: #d97706;
    --ttn-warn-soft: color-mix(in oklab, #f59e0b 16%, transparent);
    --ttn-warn-ink: #b45309;
    --ttn-bad: #dc2626;
    --ttn-bad-soft: color-mix(in oklab, #ef4444 13%, transparent);
    --ttn-bad-ink: #b91c1c;
    --ttn-info: #0891b2;
    --ttn-info-soft: color-mix(in oklab, #06b6d4 13%, transparent);
    --ttn-info-ink: #0e7490;

    /* Chart palette — series 1 follows the club brand, the rest are fixed,
       chosen to stay distinct from each other in both themes. */
    --ttn-chart-1: var(--primary-500);
    --ttn-chart-2: #f59e0b;
    --ttn-chart-3: #8b5cf6;
    --ttn-chart-4: #10b981;
    --ttn-chart-5: #ef4444;
    --ttn-chart-6: #06b6d4;

    --ttn-shadow-xs: 0 1px 2px rgb(15 23 42 / .05);
    --ttn-shadow-sm: 0 1px 2px rgb(15 23 42 / .04), 0 2px 6px -1px rgb(15 23 42 / .05);
    --ttn-shadow: 0 1px 3px rgb(15 23 42 / .05), 0 8px 24px -8px rgb(15 23 42 / .12);
    --ttn-shadow-lg: 0 2px 6px rgb(15 23 42 / .06), 0 24px 48px -16px rgb(15 23 42 / .22);

    --ttn-ease: cubic-bezier(.2, .8, .2, 1);
    --ttn-ease-spring: cubic-bezier(.34, 1.4, .64, 1);
    --ttn-dur-fast: .14s;
    --ttn-dur: .22s;
    --ttn-dur-slow: .6s;
}

.dark {
    --ttn-bg: var(--gray-950);
    --ttn-surface: color-mix(in oklab, var(--gray-900) 82%, var(--gray-950));
    --ttn-surface-2: color-mix(in oklab, var(--gray-900) 55%, var(--gray-950));
    --ttn-fill: color-mix(in oklab, #fff 6%, transparent);
    --ttn-fill-strong: color-mix(in oklab, #fff 11%, transparent);
    --ttn-border: color-mix(in oklab, #fff 8%, transparent);
    --ttn-border-strong: color-mix(in oklab, #fff 14%, transparent);
    --ttn-grid: color-mix(in oklab, #fff 6%, transparent);

    --ttn-text: var(--gray-50);
    --ttn-text-2: var(--gray-300);
    --ttn-muted: var(--gray-400);
    --ttn-faint: var(--gray-500);

    --ttn-accent: var(--primary-400);
    --ttn-accent-strong: var(--primary-300);
    --ttn-accent-soft: color-mix(in oklab, var(--primary-400) 16%, transparent);
    --ttn-accent-ink: var(--primary-300);

    --ttn-ok: #22c55e;
    --ttn-ok-soft: color-mix(in oklab, #22c55e 16%, transparent);
    --ttn-ok-ink: #86efac;
    --ttn-warn: #f59e0b;
    --ttn-warn-soft: color-mix(in oklab, #f59e0b 17%, transparent);
    --ttn-warn-ink: #fcd34d;
    --ttn-bad: #f87171;
    --ttn-bad-soft: color-mix(in oklab, #ef4444 18%, transparent);
    --ttn-bad-ink: #fca5a5;
    --ttn-info: #22d3ee;
    --ttn-info-soft: color-mix(in oklab, #06b6d4 18%, transparent);
    --ttn-info-ink: #67e8f9;

    --ttn-chart-1: var(--primary-400);
    --ttn-chart-2: #fbbf24;
    --ttn-chart-3: #a78bfa;
    --ttn-chart-4: #34d399;
    --ttn-chart-5: #f87171;
    --ttn-chart-6: #22d3ee;

    --ttn-shadow-xs: 0 1px 2px rgb(0 0 0 / .3);
    --ttn-shadow-sm: 0 1px 2px rgb(0 0 0 / .3);
    --ttn-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -8px rgb(0 0 0 / .5);
    --ttn-shadow-lg: 0 2px 6px rgb(0 0 0 / .35), 0 24px 48px -16px rgb(0 0 0 / .6);
}

/* ── 2. Building blocks ────────────────────────────────────────────────── */

.ttn-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: 1.1rem 1.25rem;
    background: var(--ttn-surface);
    border: 1px solid var(--ttn-border);
    border-radius: var(--ttn-radius);
    box-shadow: var(--ttn-shadow-sm);
    color: var(--ttn-text-2);
    transition: box-shadow var(--ttn-dur) var(--ttn-ease), transform var(--ttn-dur) var(--ttn-ease), border-color var(--ttn-dur) var(--ttn-ease);
}
.ttn-card--flush { padding: 0; gap: 0; overflow: hidden; }
.ttn-card--muted { background: var(--ttn-surface-2); box-shadow: none; }
.ttn-card--link:hover, a.ttn-card:hover { transform: translateY(-2px); box-shadow: var(--ttn-shadow); border-color: var(--ttn-border-strong); }

/* A tone is a slim accent along the card's left edge, drawn inside the
   rounded corner so it never fights the radius. */
.ttn-card[data-tone]::before {
    content: '';
    position: absolute;
    inset: .9rem auto .9rem 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ttn-tone, var(--ttn-faint));
}
[data-tone="ok"] { --ttn-tone: var(--ttn-accent); --ttn-tone-soft: var(--ttn-accent-soft); --ttn-tone-ink: var(--ttn-accent-ink); }
[data-tone="good"] { --ttn-tone: var(--ttn-ok); --ttn-tone-soft: var(--ttn-ok-soft); --ttn-tone-ink: var(--ttn-ok-ink); }
[data-tone="warn"] { --ttn-tone: var(--ttn-warn); --ttn-tone-soft: var(--ttn-warn-soft); --ttn-tone-ink: var(--ttn-warn-ink); }
[data-tone="bad"] { --ttn-tone: var(--ttn-bad); --ttn-tone-soft: var(--ttn-bad-soft); --ttn-tone-ink: var(--ttn-bad-ink); }
[data-tone="info"] { --ttn-tone: var(--ttn-info); --ttn-tone-soft: var(--ttn-info-soft); --ttn-tone-ink: var(--ttn-info-ink); }
[data-tone="neutral"] { --ttn-tone: var(--ttn-faint); --ttn-tone-soft: var(--ttn-fill); --ttn-tone-ink: var(--ttn-text-2); }

.ttn-card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ttn-kicker {
    margin: 0;
    font-size: .7rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ttn-muted);
}
.ttn-title { margin: 0; font-size: 1rem; font-weight: 650; color: var(--ttn-text); letter-spacing: -.01em; }
.ttn-muted { margin: 0; font-size: .8rem; color: var(--ttn-muted); }
.ttn-faint { color: var(--ttn-faint); }
.ttn-strong { color: var(--ttn-text); font-weight: 600; }
.ttn-num { font-variant-numeric: tabular-nums; }

.ttn-link { font-size: .78rem; font-weight: 550; color: var(--ttn-accent); text-decoration: none; display: inline-flex; align-items: center; gap: .2rem; }
.ttn-link:hover { color: var(--ttn-accent-strong); }
.ttn-link::after { content: '→'; transition: transform var(--ttn-dur-fast) var(--ttn-ease); }
.ttn-link:hover::after { transform: translateX(2px); }
.ttn-link--plain::after { content: none; }

/* Big figures in a row */
.ttn-figs { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.ttn-fig { display: flex; flex-direction: column; gap: .1rem; }
.ttn-fig strong { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--ttn-text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ttn-fig span { font-size: .72rem; color: var(--ttn-muted); }
.ttn-fig[data-tone] strong { color: var(--ttn-tone-ink); }

/* Compact list with a status dot and a right-aligned meta */
.ttn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ttn-list > li { display: flex; align-items: center; gap: .55rem; padding: .42rem 0; font-size: .84rem; color: var(--ttn-text-2); border-top: 1px solid var(--ttn-grid); min-width: 0; }
.ttn-list > li:first-child { border-top: 0; }
.ttn-list > li > em { margin-left: auto; font-style: normal; font-size: .72rem; color: var(--ttn-faint); white-space: nowrap; padding-left: .5rem; }
.ttn-list a { color: inherit; text-decoration: none; }
.ttn-list a:hover { color: var(--ttn-accent); }

.ttn-dot { width: .5rem; height: .5rem; border-radius: var(--ttn-radius-pill); flex: none; background: var(--ttn-tone, var(--ttn-faint)); }
.ttn-dot[data-tone] { box-shadow: 0 0 0 3px var(--ttn-tone-soft); }

/* Badges */
.ttn-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .12rem .55rem;
    border-radius: var(--ttn-radius-pill);
    font-size: .7rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
    background: var(--ttn-tone-soft, var(--ttn-fill));
    color: var(--ttn-tone-ink, var(--ttn-text-2));
}
.ttn-badge--square { border-radius: var(--ttn-radius-xs); }

/* Progress bar — the fill animates in from zero on first paint */
.ttn-bar { height: .5rem; border-radius: var(--ttn-radius-pill); background: var(--ttn-fill); overflow: hidden; }
.ttn-bar > span {
    display: block; height: 100%;
    border-radius: inherit;
    background: var(--ttn-tone, var(--ttn-accent));
    transform-origin: left center;
    animation: ttn-grow-x var(--ttn-dur-slow) var(--ttn-ease) both;
    transition: width var(--ttn-dur-slow) var(--ttn-ease);
}
.ttn-bar--lg { height: .7rem; }

/* Progress ring (conic) — --p is 0..100 */
@property --ttn-p { syntax: '<number>'; inherits: false; initial-value: 0; }
.ttn-ring {
    --size: 5.5rem;
    --ttn-p: var(--p, 0);
    position: relative;
    flex: none;
    width: var(--size); height: var(--size);
    border-radius: 50%;
    background:
        radial-gradient(closest-side, var(--ttn-ring-bg, var(--ttn-surface)) calc(100% - 9px), transparent calc(100% - 8px)),
        conic-gradient(var(--ttn-tone, var(--ttn-accent)) calc(var(--ttn-p) * 1%), var(--ttn-fill) 0);
    display: grid; place-items: center;
    animation: ttn-ring-in 1s var(--ttn-ease) both;
}
.ttn-ring > div { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.ttn-ring strong { font-size: 1.25rem; font-weight: 750; color: var(--ttn-text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ttn-ring span { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ttn-muted); }

/* Empty / all-clear state */
.ttn-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
    padding: 1.4rem 1rem; text-align: center;
    color: var(--ttn-muted); font-size: .84rem;
}
.ttn-empty-icon {
    width: 2.5rem; height: 2.5rem; border-radius: var(--ttn-radius-pill);
    display: grid; place-items: center;
    background: var(--ttn-tone-soft, var(--ttn-fill)); color: var(--ttn-tone-ink, var(--ttn-muted));
}
.ttn-empty-icon svg { width: 1.25rem; height: 1.25rem; }
.ttn-empty--inline { flex-direction: row; justify-content: flex-start; padding: .2rem 0; text-align: left; }
.ttn-empty--inline .ttn-empty-icon { width: 1.6rem; height: 1.6rem; }
.ttn-empty--inline .ttn-empty-icon svg { width: 1rem; height: 1rem; }

/* Avatars / crests */
.ttn-avatar {
    --size: 2rem;
    width: var(--size); height: var(--size); flex: none;
    border-radius: var(--ttn-radius-pill);
    display: inline-grid; place-items: center; overflow: hidden;
    font-size: calc(var(--size) * .36); font-weight: 700; letter-spacing: .02em;
    color: #fff;
    background: var(--ttn-avatar-bg, var(--ttn-accent));
    box-shadow: 0 0 0 2px var(--ttn-surface);
}
.ttn-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ttn-crest { border-radius: 30% 30% 46% 46% / 26% 26% 60% 60%; }

/* Native form controls on hand-built pages (selects in page toolbars) */
.ttn-select {
    font: inherit; font-size: .8rem;
    padding: .4rem 2rem .4rem .7rem;
    border: 1px solid var(--ttn-border-strong);
    border-radius: var(--ttn-radius-sm);
    background-color: var(--ttn-surface);
    color: var(--ttn-text);
    box-shadow: var(--ttn-shadow-xs);
    transition: border-color var(--ttn-dur-fast), box-shadow var(--ttn-dur-fast);
}
.ttn-select:focus { outline: none; border-color: var(--ttn-accent); box-shadow: 0 0 0 3px var(--ttn-accent-soft); }

/* Segmented control */
.ttn-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--ttn-radius-sm); background: var(--ttn-fill); }
.ttn-seg > * {
    padding: .32rem .8rem; border: 0; border-radius: calc(var(--ttn-radius-sm) - 2px);
    font: inherit; font-size: .78rem; font-weight: 550; color: var(--ttn-muted);
    background: transparent; cursor: pointer; text-decoration: none;
    transition: background var(--ttn-dur-fast), color var(--ttn-dur-fast), box-shadow var(--ttn-dur-fast);
}
.ttn-seg > *:hover { color: var(--ttn-text); }
.ttn-seg > [aria-pressed="true"], .ttn-seg > .is-active { background: var(--ttn-surface); color: var(--ttn-text); box-shadow: var(--ttn-shadow-xs); }

/* Skeleton shimmer (Livewire placeholders, lazy widgets) */
.ttn-skeleton {
    border-radius: var(--ttn-radius-sm);
    background: linear-gradient(90deg, var(--ttn-fill) 25%, var(--ttn-fill-strong) 37%, var(--ttn-fill) 63%);
    background-size: 400% 100%;
    animation: ttn-shimmer 1.4s ease infinite;
}

/* Grid helpers */
.ttn-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.ttn-span-all { grid-column: 1 / -1; }
.ttn-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* People chips (avatar + name + badge) */
.ttn-people { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.ttn-person-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .2rem .55rem .2rem .2rem;
    border-radius: var(--ttn-radius-pill);
    background: var(--ttn-surface-2); border: 1px solid var(--ttn-border);
    font-size: .8rem; font-weight: 550; color: var(--ttn-text);
}
.ttn-person-chip .ttn-avatar { box-shadow: none; }

/* ── Dashboard hero: the next match ──────────────────────────────────── */

.ttn-hero {
    gap: 1.1rem;
    padding: 1.35rem 1.5rem 1.4rem;
    background:
        radial-gradient(42rem 16rem at 100% 0%, color-mix(in oklab, var(--primary-400) 14%, transparent), transparent 70%),
        radial-gradient(30rem 14rem at 0% 100%, color-mix(in oklab, var(--primary-600) 7%, transparent), transparent 70%),
        var(--ttn-surface);
    overflow: hidden;
}
.ttn-hero-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1.5rem; }
.ttn-hero-meta { display: flex; flex-direction: column; gap: .2rem; }
.ttn-hero-when { font-size: .88rem; color: var(--ttn-text-2); }
.ttn-hero-when::first-letter { text-transform: uppercase; }
.ttn-hero-countdown { display: flex; gap: .4rem; }
.ttn-hero-countdown > div {
    min-width: 3.4rem; padding: .4rem .5rem .35rem;
    display: flex; flex-direction: column; align-items: center;
    border-radius: var(--ttn-radius-sm);
    background: var(--ttn-surface); border: 1px solid var(--ttn-border); box-shadow: var(--ttn-shadow-xs);
}
.ttn-hero-countdown strong { font-size: 1.35rem; font-weight: 750; line-height: 1.1; color: var(--ttn-text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ttn-hero-countdown span { font-size: .6rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ttn-muted); }

.ttn-hero-match {
    display: grid; align-items: center; gap: 1rem 1.5rem;
    grid-template-columns: 1fr auto 1fr auto;
    padding: .4rem 0;
}
.ttn-hero-team { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.ttn-hero-team > span:last-child { font-size: 1.3rem; font-weight: 750; letter-spacing: -.02em; color: var(--ttn-text); line-height: 1.15; }
.ttn-hero-team--right { flex-direction: row-reverse; text-align: right; }
.ttn-hero-vs { display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.ttn-hero-vs-badge {
    display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
    border-radius: 50%;
    font-size: .78rem; font-weight: 800; letter-spacing: .04em;
    color: var(--ttn-accent-ink); background: var(--ttn-accent-soft);
    text-decoration: none;
    transition: transform var(--ttn-dur) var(--ttn-ease-spring);
}
a.ttn-hero-vs-badge:hover { transform: scale(1.08); }
.ttn-hero-ready {
    display: flex; align-items: center; gap: .9rem;
    padding-left: 1.5rem; border-left: 1px solid var(--ttn-border);
}
.ttn-hero-ready .ttn-ring { --ttn-ring-bg: var(--ttn-surface); }
.ttn-hero-ready .ttn-muted { max-width: 9rem; line-height: 1.45; }

.ttn-hero-form { display: flex; align-items: center; gap: .35rem; }
.ttn-hero-form .ttn-kicker { margin-right: .4rem; }
.ttn-form-chip {
    width: 1.55rem; height: 1.55rem; display: grid; place-items: center;
    border-radius: var(--ttn-radius-xs);
    font-size: .7rem; font-weight: 750; color: #fff;
    background: var(--ttn-faint);
    cursor: default;
}
.ttn-form-chip[data-r="1"] { background: var(--ttn-ok); }
.ttn-form-chip[data-r="0"] { background: var(--ttn-warn); }
.ttn-form-chip[data-r="-1"] { background: var(--ttn-bad); }

.ttn-hero-cols {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
    padding-top: 1rem; border-top: 1px solid var(--ttn-border);
}
.ttn-hero-cols .ttn-kicker { margin-bottom: .45rem; }

/* Onboarding checklist */
.ttn-ob { background: linear-gradient(135deg, var(--ttn-accent-soft), transparent 55%), var(--ttn-surface); }
.ttn-ob-sub { margin-top: -.4rem; }
.ttn-ob-dismiss {
    flex: none; font: inherit; font-size: .74rem; font-weight: 550;
    padding: .3rem .7rem; border-radius: var(--ttn-radius-pill);
    border: 1px solid var(--ttn-border-strong); background: var(--ttn-surface); color: var(--ttn-muted);
    cursor: pointer; transition: background var(--ttn-dur-fast), color var(--ttn-dur-fast);
}
.ttn-ob-dismiss:hover { background: var(--ttn-fill); color: var(--ttn-text); }
.ttn-ob-progress { display: flex; align-items: center; gap: .7rem; }
.ttn-ob-progress .ttn-bar { flex: 1; }
.ttn-ob-progress span { font-size: .75rem; }
.ttn-ob-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.ttn-ob-steps li { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; border-top: 1px solid var(--ttn-grid); }
.ttn-ob-steps li:first-child { border-top: 0; }
.ttn-ob-check {
    flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
    display: grid; place-items: center;
    border: 1.5px solid var(--ttn-border-strong); color: #fff;
    counter-increment: step;
    transition: background var(--ttn-dur) var(--ttn-ease-spring), transform var(--ttn-dur) var(--ttn-ease-spring);
}
.ttn-ob-steps li:not(.is-done) .ttn-ob-check::before { content: counter(step); font-size: .68rem; font-weight: 700; color: var(--ttn-muted); }
.ttn-ob-check svg { width: .9rem; height: .9rem; }
.is-done .ttn-ob-check { background: var(--ttn-accent); border-color: var(--ttn-accent); }
.ttn-ob-body { flex: 1; min-width: 0; }
.ttn-ob-title { margin: 0; font-size: .87rem; font-weight: 600; color: var(--ttn-text); }
.is-done .ttn-ob-title { color: var(--ttn-faint); font-weight: 500; text-decoration: line-through; }

/* Discipline overview */
.ttn-disc-h { margin: 0 0 .3rem; font-size: .8rem; font-weight: 650; color: var(--ttn-text-2); }
.ttn-list > li.ttn-disc-row { flex-wrap: wrap; gap: .45rem; }

/* Feed (page + dashboard highlights) */
.ttn-feed-pin { display: inline-block; width: .85rem; height: .85rem; margin-right: .15rem; vertical-align: -1px; color: var(--ttn-warn); }
.ttn-feed { display: flex; flex-direction: column; gap: .9rem; max-width: 52rem; }
.ttn-feed-post { gap: .65rem; padding-left: 1.4rem; }
.ttn-feed-head { display: flex; align-items: flex-start; gap: .75rem; }
.ttn-feed-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.ttn-feed-actions { display: flex; gap: .25rem; flex-shrink: 0; }
.ttn-feed-actions button {
    font: inherit; font-size: .74rem; font-weight: 550; color: var(--ttn-muted);
    background: none; border: 0; cursor: pointer;
    padding: .25rem .5rem; border-radius: var(--ttn-radius-xs);
    transition: background var(--ttn-dur-fast), color var(--ttn-dur-fast);
}
.ttn-feed-actions button:hover { background: var(--ttn-fill); color: var(--ttn-text); }
.ttn-feed-body { font-size: .9rem; line-height: 1.6; white-space: pre-wrap; color: var(--ttn-text-2); padding-left: 3rem; }
.ttn-feed-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding-left: 3rem; }
.ttn-feed-eye { display: inline-block; width: .9rem; height: .9rem; vertical-align: -2px; }
@media (max-width: 40rem) { .ttn-feed-body, .ttn-feed-meta { padding-left: 0; } }

/* Club overview */
.ttn-co-match { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; }
.ttn-co-match-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.ttn-co-fixture { font-size: 1.2rem; text-decoration: none; }
a.ttn-co-fixture:hover { color: var(--ttn-accent); }
.ttn-co-bar { margin-top: .35rem; max-width: 34rem; }
.ttn-co-count {
    flex: none; min-width: 4.5rem; padding: .55rem .7rem;
    display: flex; flex-direction: column; align-items: center;
    border-radius: var(--ttn-radius); background: var(--ttn-tone-soft, var(--ttn-fill));
}
.ttn-co-count strong { font-size: 1.75rem; font-weight: 750; line-height: 1; color: var(--ttn-tone-ink, var(--ttn-text)); font-variant-numeric: tabular-nums; }
.ttn-co-count span { margin-top: .2rem; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ttn-muted); }
.ttn-co-lic { display: flex; align-items: center; gap: 1rem; }
.ttn-co-lic > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ttn-co-lic .ttn-ring strong { font-size: 1rem; }

@media (max-width: 64rem) {
    .ttn-hero-match { grid-template-columns: 1fr auto 1fr; }
    .ttn-hero-ready { grid-column: 1 / -1; padding-left: 0; border-left: 0; padding-top: .9rem; border-top: 1px solid var(--ttn-border); }
}
@media (max-width: 40rem) {
    .ttn-hero { padding: 1.1rem 1.1rem 1.2rem; }
    .ttn-hero-match { gap: .75rem; }
    .ttn-hero-team { flex-direction: column; text-align: center; gap: .45rem; }
    .ttn-hero-team--right { flex-direction: column; text-align: center; }
    .ttn-hero-team > span:last-child { font-size: .95rem; }
    .ttn-hero-cols { grid-template-columns: 1fr; gap: 1rem; }
}

/* ── 3. Filament chrome ────────────────────────────────────────────────── */

body.fi-body { background: var(--ttn-bg); -webkit-font-smoothing: antialiased; }

/* Topbar: frosted glass over the scrolling content */
.fi-topbar-ctn { position: sticky; top: 0; z-index: 30; }
.fi-topbar {
    background-color: color-mix(in oklab, var(--ttn-surface) 78%, transparent) !important;
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    box-shadow: none !important;
    border-bottom: 1px solid var(--ttn-border);
}

/* Sidebar */
.fi-sidebar.fi-main-sidebar { border-right: 1px solid var(--ttn-border); }
@media (min-width: 64rem) {
    .fi-sidebar.fi-main-sidebar { background-color: transparent; }
}
.fi-sidebar-item-btn {
    border-radius: var(--ttn-radius-sm) !important;
    transition: background-color var(--ttn-dur-fast) var(--ttn-ease), color var(--ttn-dur-fast);
}
.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn { background-color: transparent; }
.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover { background-color: var(--ttn-fill); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--ttn-accent-soft) !important;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ttn-accent) 18%, transparent);
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-icon { color: var(--ttn-accent-ink) !important; font-weight: 600; }
.fi-sidebar-group-label {
    font-size: .68rem !important; font-weight: 650 !important;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--ttn-faint) !important;
}

/* Page header */
.fi-header-heading { letter-spacing: -.025em; font-weight: 750; }
.fi-header-subheading { color: var(--ttn-muted); }

/* Sections, table containers, stats: one surface language */
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-wi-chart .fi-section {
    border-radius: var(--ttn-radius) !important;
    box-shadow: var(--ttn-shadow-sm) !important;
    --tw-ring-color: var(--ttn-border) !important;
}
.dark .fi-section:not(.fi-section-not-contained):not(.fi-aside),
.dark .fi-ta-ctn,
.dark .fi-wi-stats-overview-stat { background-color: var(--ttn-surface); }

.fi-wi-stats-overview-stat { transition: transform var(--ttn-dur) var(--ttn-ease), box-shadow var(--ttn-dur) var(--ttn-ease); }
.fi-wi-stats-overview-stat:hover { transform: translateY(-2px); box-shadow: var(--ttn-shadow) !important; }
.fi-wi-stats-overview-stat-value { letter-spacing: -.025em; font-variant-numeric: tabular-nums; }

/* Tables: a touch more air, softer header */
.fi-ta-header-cell { font-size: .74rem !important; text-transform: uppercase; letter-spacing: .05em; color: var(--ttn-muted) !important; }
.fi-ta-row { transition: background-color var(--ttn-dur-fast); }

/* Buttons & inputs: gentle press + focus feedback */
.fi-btn { transition: transform var(--ttn-dur-fast) var(--ttn-ease), background-color var(--ttn-dur-fast), box-shadow var(--ttn-dur-fast); }
.fi-btn:active { transform: translateY(1px) scale(.985); }
.fi-input-wrp { border-radius: var(--ttn-radius-sm) !important; transition: box-shadow var(--ttn-dur-fast); }

/* Dropdowns & modals: rounder, floating */
.fi-dropdown-panel { border-radius: var(--ttn-radius) !important; box-shadow: var(--ttn-shadow-lg) !important; }
.fi-modal-window { border-radius: var(--ttn-radius-lg) !important; }

/* Global search → command palette look (the field + results panel) */
@media (min-width: 64rem) { .fi-global-search-field .fi-input-wrp { min-width: 15rem; } }
/* No keyboard shortcut to advertise on a touch screen. */
@media (hover: none), (max-width: 40rem) { .fi-global-search-field .fi-input-wrp-suffix { display: none; } }
.fi-global-search-results-ctn {
    border-radius: var(--ttn-radius) !important;
    box-shadow: var(--ttn-shadow-lg) !important;
    overflow: hidden;
}
.fi-global-search-field .fi-input-wrp-suffix { padding-inline-end: .5rem; }
.ttn-kbd,
.fi-global-search-field .fi-input-wrp-label {
    display: inline-flex; align-items: center; gap: 1px;
    padding: .05rem .38rem;
    border: 1px solid var(--ttn-border-strong); border-bottom-width: 2px;
    border-radius: var(--ttn-radius-xs);
    font: 600 .66rem/1.3 ui-sans-serif, system-ui, sans-serif;
    color: var(--ttn-muted); background: var(--ttn-surface);
    white-space: nowrap;
}

/* Loading states: Filament's lazy-section placeholder becomes a shimmer
   skeleton, and a table that is re-querying dims softly instead of popping. */
.fi-loading-section {
    min-height: 7rem;
    border-radius: var(--ttn-radius) !important;
    background: linear-gradient(90deg, var(--ttn-fill) 25%, var(--ttn-fill-strong) 37%, var(--ttn-fill) 63%) !important;
    background-size: 400% 100% !important;
    animation: ttn-shimmer 1.4s ease infinite;
    box-shadow: none !important;
}
.fi-loading-section > * { visibility: hidden; }
.fi-ta-content { transition: opacity var(--ttn-dur) var(--ttn-ease); }
.fi-ta-ctn[aria-busy="true"] .fi-ta-content,
.fi-ta-table-loading-ctn ~ .fi-ta-content { opacity: .55; }

/* Avatars/crests in table cells */
.ttn-cell-avatar { display: flex; align-items: center; padding: .35rem 0 .35rem .75rem; }

/* Livewire navigate progress bar → brand colour, slimmer */
#nprogress .bar { background: var(--ttn-accent) !important; height: 2.5px !important; }
#nprogress .peg { box-shadow: 0 0 10px var(--ttn-accent), 0 0 5px var(--ttn-accent) !important; }

/* ── Login / simple pages: split screen ──────────────────────────────── */

.fi-simple-layout { position: relative; isolation: isolate; }
.fi-simple-layout::before {
    content: '';
    position: fixed; inset: 0; z-index: -1;
    background:
        radial-gradient(60rem 40rem at 110% -10%, color-mix(in oklab, var(--primary-400) 28%, transparent), transparent 60%),
        radial-gradient(50rem 36rem at -10% 110%, color-mix(in oklab, var(--primary-600) 22%, transparent), transparent 60%),
        var(--ttn-bg);
}
.fi-simple-main {
    border-radius: var(--ttn-radius-lg) !important;
    box-shadow: var(--ttn-shadow-lg) !important;
    --tw-ring-color: var(--ttn-border) !important;
}
.ttn-auth-aside { display: none; }
@media (min-width: 64rem) {
    .fi-simple-layout:has(.ttn-auth-aside) .fi-simple-main-ctn { padding-left: min(46vw, 40rem); }
    .ttn-auth-aside {
        position: fixed; inset: 0 auto 0 0; width: min(46vw, 40rem);
        display: flex; flex-direction: column; justify-content: space-between;
        padding: 3rem 3.25rem;
        color: #fff;
        background:
            radial-gradient(36rem 28rem at 15% 10%, color-mix(in oklab, var(--primary-300) 55%, transparent), transparent 60%),
            radial-gradient(30rem 30rem at 95% 100%, color-mix(in oklab, var(--primary-900) 80%, transparent), transparent 60%),
            linear-gradient(160deg, var(--primary-600), var(--primary-800));
        overflow: hidden;
    }
    .ttn-auth-aside::after {
        /* a faint pitch outline as texture */
        content: '';
        position: absolute; right: -6rem; bottom: -6rem; width: 26rem; height: 26rem;
        border: 2px solid rgb(255 255 255 / .12); border-radius: 50%;
        box-shadow: 0 0 0 4rem rgb(255 255 255 / .03);
    }
    .ttn-auth-brand { display: flex; align-items: center; gap: .7rem; font-weight: 700; font-size: 1.1rem; }
    .ttn-auth-brand img { height: 2.3rem; width: auto; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .25)); }
    .ttn-auth-pitch h2 { margin: 0 0 .9rem; font-size: 2.1rem; line-height: 1.12; font-weight: 750; letter-spacing: -.03em; max-width: 26rem; }
    .ttn-auth-pitch p { margin: 0; max-width: 25rem; color: rgb(255 255 255 / .82); font-size: 1rem; line-height: 1.55; }
    .ttn-auth-points { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
    .ttn-auth-points li { display: flex; align-items: center; gap: .6rem; font-size: .92rem; color: rgb(255 255 255 / .9); }
    .ttn-auth-points li::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgb(255 255 255 / .18); flex: none; }
    .ttn-auth-foot { font-size: .78rem; color: rgb(255 255 255 / .6); }
}

/* ── Mobile bottom tab bar (installed PWA + small screens) ───────────── */

.ttn-tabbar { display: none; }
@media (max-width: 63.98rem) {
    .ttn-tabbar {
        position: fixed; z-index: 35; left: .75rem; right: .75rem;
        bottom: calc(.6rem + env(safe-area-inset-bottom));
        display: grid; grid-template-columns: repeat(var(--n, 5), 1fr);
        padding: .3rem;
        border-radius: 1.1rem;
        background: color-mix(in oklab, var(--ttn-surface) 82%, transparent);
        -webkit-backdrop-filter: saturate(1.6) blur(16px);
        backdrop-filter: saturate(1.6) blur(16px);
        border: 1px solid var(--ttn-border);
        box-shadow: var(--ttn-shadow-lg);
    }
    .ttn-tabbar a {
        position: relative;
        display: flex; flex-direction: column; align-items: center; gap: .12rem;
        padding: .42rem .2rem .36rem;
        border-radius: .8rem;
        font-size: .62rem; font-weight: 600; color: var(--ttn-muted); text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: color var(--ttn-dur-fast), background-color var(--ttn-dur-fast);
    }
    .ttn-tabbar a svg { width: 1.35rem; height: 1.35rem; }
    .ttn-tabbar a.is-active { color: var(--ttn-accent-ink); background: var(--ttn-accent-soft); }
    .ttn-tabbar a .ttn-tab-badge {
        position: absolute; top: .15rem; left: calc(50% + .35rem);
        min-width: 1rem; height: 1rem; padding: 0 .25rem;
        border-radius: 999px; background: var(--ttn-bad); color: #fff;
        font-size: .58rem; line-height: 1rem; text-align: center;
    }
    /* keep the last rows of a page clear of the floating bar */
    .fi-main { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)) !important; }
}

/* ── Motion ────────────────────────────────────────────────────────────── */

@keyframes ttn-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ttn-ring-in { from { --ttn-p: 0; } }
@keyframes ttn-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
@keyframes ttn-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ttn-fade { from { opacity: 0; } to { opacity: 1; } }

/* Page entrance — on first load and after every SPA navigation (the class is
   re-applied by ttn.js on livewire:navigated): the header settles first, the
   content follows a beat later. Fill-mode ends on `transform: none`, so no
   lingering containing block traps sticky/fixed descendants. */
.ttn-enter .fi-page-header-main-ctn { animation: ttn-rise .32s var(--ttn-ease) both; }
.ttn-enter .fi-page-content { animation: ttn-rise .42s var(--ttn-ease) .05s both; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-delay: 0s !important;
        transition-duration: .001ms !important;
    }
}

@media print {
    .ttn-tabbar, .fi-topbar-ctn, .fi-sidebar { display: none !important; }
}