/* FantaInfinity premium UI — shared visual layer loaded after legacy styles. */
:root {
    --fi-night: #07111f;
    --fi-navy: #0d1b2d;
    --fi-navy-soft: #14263a;
    --fi-forest: #0b4947;
    --fi-pitch: #0f9f7a;
    --fi-grass: #16b88a;
    --fi-lime: #72dfb8;
    --fi-chalk: #f7f5ee;
    --fi-card: #fbfaf6;
    --fi-ink: #152233;
    --fi-muted: #6c7888;
    --fi-line: #dce3e7;
    --fi-yellow: #dfb95e;
    --fi-red: #dc5d67;
    --fi-shadow: 0 22px 60px rgba(2, 10, 22, 0.24);
    --fi-radius: 24px;
    --page: var(--fi-night);
    --panel: rgba(251, 250, 246, 0.98);
    --panel-dark: rgba(8, 21, 36, 0.94);
    --line: var(--fi-line);
    --text: var(--fi-ink);
    --muted: var(--fi-muted);
    --white: var(--fi-chalk);
    --grass: var(--fi-grass);
    --grass-dark: var(--fi-forest);
    --mint: var(--fi-lime);
    --gold: var(--fi-yellow);
    --danger: var(--fi-red);
    --shadow: var(--fi-shadow);
    --accent: var(--fi-lime);
    --accent-dark: var(--fi-pitch);
}

html {
    color-scheme: dark;
    background: var(--fi-night) !important;
}

body {
    color: var(--fi-ink);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 15px;
    letter-spacing: -0.01em;
    background:
        radial-gradient(circle at 85% -8%, rgba(28, 186, 151, 0.18), transparent 34rem),
        radial-gradient(circle at -10% 38%, rgba(223, 185, 94, 0.09), transparent 28rem),
        linear-gradient(145deg, rgba(5, 13, 25, 0.985), rgba(9, 25, 39, 0.97)),
        url('/img/sfondo_dashboard.png') center / cover fixed no-repeat !important;
}

body::before {
    opacity: 0.08 !important;
    background-size: 96px 96px !important;
}

a,
button,
input,
select,
textarea {
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease,
                box-shadow 160ms ease, transform 160ms ease;
}

.page,
body > .container,
body > main.container,
body > .page-container,
body > .section {
    width: min(1720px, calc(100% - clamp(28px, 5vw, 92px))) !important;
}

.page {
    padding-top: 22px !important;
}

.topbar,
.dashboard-header,
.csv-topbar,
.page-header {
    min-height: 68px;
    padding: 9px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 19px;
    background: rgba(8, 21, 36, 0.76);
    box-shadow: 0 14px 34px rgba(1, 8, 18, 0.22);
    backdrop-filter: blur(18px);
}

.brand img,
.dashboard-brand img {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 15px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32) !important;
}

.brand strong,
.dashboard-brand strong {
    color: var(--fi-chalk) !important;
    letter-spacing: -0.025em;
}

h1,
h2,
h3,
h4,
.brand strong {
    font-weight: 800 !important;
    text-wrap: balance;
}

.hero,
.dashboard-hero,
.csv-hero {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 30px !important;
    color: var(--fi-chalk) !important;
    background:
        radial-gradient(circle at 82% 14%, rgba(114, 223, 184, 0.19), transparent 24rem),
        linear-gradient(115deg, rgba(7, 17, 31, 0.97), rgba(9, 65, 66, 0.84)),
        url('/img/campo-da-calcio.png') center / cover no-repeat !important;
    box-shadow: 0 28px 76px rgba(0, 0, 0, 0.32) !important;
}

.hero h1,
.dashboard-hero h1,
.csv-hero h1 {
    color: var(--fi-chalk) !important;
    letter-spacing: -0.045em !important;
}

.eyebrow,
.hero-kicker,
.csv-kicker,
.kicker,
.panel-title > span,
.section-heading > div > span {
    color: var(--fi-lime) !important;
    letter-spacing: 0.13em !important;
}

.club-card,
.hero-scorecard,
.csv-hero-card,
.wallet-card,
.hero-card {
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 21px !important;
    background: rgba(8, 21, 36, 0.72) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(16px);
}

.hero-scorecard i,
.csv-hero-card i {
    color: var(--fi-yellow) !important;
}

.dashboard-panel,
.csv-panel,
.table-panel,
.next-match,
.admin-box,
.role-section,
.stat-card,
.metric,
.card,
.panel,
.content-card,
body > .container {
    border: 1px solid rgba(21, 49, 67, 0.1) !important;
    border-radius: var(--fi-radius) !important;
    background: var(--fi-card) !important;
    box-shadow: 0 18px 48px rgba(1, 9, 20, 0.18) !important;
}

.dashboard-metric,
.stat,
.stat-card,
.metric {
    border: 1px solid rgba(21, 49, 67, 0.1) !important;
    border-radius: 19px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.98), rgba(244,246,243,0.98)) !important;
    box-shadow: 0 13px 32px rgba(1, 9, 20, 0.13) !important;
}

.dashboard-metric.market-credits {
    color: var(--fi-chalk) !important;
    background:
        radial-gradient(circle at 100% 0, rgba(223,185,94,0.24), transparent 8rem),
        linear-gradient(135deg, #0d2535, #0c5f59) !important;
}

.dashboard-metric.market-credits::after {
    background: rgba(223, 185, 94, 0.13) !important;
}

.quick-card,
.hub-tile,
.player-card,
.fan-player,
.match-card,
.home-match {
    border: 1px solid rgba(21, 49, 67, 0.1) !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, #ffffff, #f4f6f3) !important;
    box-shadow: 0 10px 26px rgba(2, 13, 26, 0.08) !important;
}

.quick-card:hover,
.hub-tile:hover,
.player-card:hover {
    border-color: rgba(15, 159, 122, 0.36) !important;
    box-shadow: 0 18px 38px rgba(2, 13, 26, 0.14) !important;
    transform: translateY(-3px);
}

.quick-icon,
.hub-icon,
.role-icon,
.fan-rank {
    color: var(--fi-chalk) !important;
    background: linear-gradient(145deg, var(--fi-pitch), #087064) !important;
    box-shadow: 0 10px 24px rgba(15, 159, 122, 0.22) !important;
}

.quick-card:nth-child(2n) .quick-icon,
.hub-tile:nth-child(2n) .hub-icon {
    color: #231b0c !important;
    background: linear-gradient(145deg, #ebca78, var(--fi-yellow)) !important;
    box-shadow: 0 10px 24px rgba(223, 185, 94, 0.24) !important;
}

.section-link,
.template-link {
    color: #087b66 !important;
}

.primary-action,
.action-link,
.button-link,
.table-button,
.primary-upload,
.inline-control button,
.confirm-row button,
button[type="submit"]:not(.logout-btn):not(.header-action):not(.remove-button) {
    border: 0 !important;
    border-radius: 13px !important;
    color: #061711 !important;
    background: linear-gradient(135deg, #72dfb8, #9be2a8) !important;
    box-shadow: 0 10px 24px rgba(19, 163, 123, 0.2) !important;
    font-weight: 800 !important;
}

.primary-action:hover,
.action-link:hover,
.button-link:hover,
.primary-upload:hover,
button[type="submit"]:not(.logout-btn):not(.header-action):not(.remove-button):hover {
    filter: brightness(1.03);
    transform: translateY(-1px);
}

.back-link,
.back-arrow,
.small-link,
.logout-btn,
.header-action {
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 13px !important;
    color: var(--fi-chalk) !important;
    background: rgba(10, 27, 44, 0.84) !important;
    box-shadow: none !important;
}

input,
select,
textarea,
.form-control,
.form-select {
    min-height: 45px;
    border: 1px solid #d5dee2 !important;
    border-radius: 13px !important;
    color: var(--fi-ink) !important;
    background: #ffffff !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--fi-pitch) !important;
    box-shadow: 0 0 0 4px rgba(15, 159, 122, 0.13) !important;
}

table {
    border-radius: 16px;
    overflow: hidden;
}

thead th,
table th {
    padding: 14px 12px !important;
    color: #dce9e6 !important;
    background: #10243a !important;
    font-size: 11px !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

tbody tr:nth-child(even) {
    background: #f4f6f3 !important;
}

tbody tr:hover {
    background: #e9f5f0 !important;
}

.status-chip.status-ready,
.fan-pill,
.status-pill.free {
    color: #08634e !important;
    background: #dff4eb !important;
}

.league-pill,
.role-pill,
.value-pill,
.status-chip,
.badge,
.money-pill {
    border-radius: 999px !important;
}

.match-highlight {
    border: 1px solid rgba(255,255,255,.1);
    background:
        radial-gradient(circle at 95% 0, rgba(223,185,94,.2), transparent 10rem),
        linear-gradient(135deg, #10243a, #0b5451) !important;
}

.file-drop {
    border-color: #a9c8c1 !important;
    background: #f1f7f4 !important;
}

.column-guide > div,
.fan-player {
    background: #eef4f2 !important;
}

.auth-page.login-page {
    background:
        linear-gradient(110deg, rgba(4, 11, 21, 0.74), rgba(5, 48, 47, 0.3), rgba(4, 11, 21, 0.82)),
        url('/img/sfondo-login-register3.png') center / cover fixed no-repeat !important;
}

.auth-page .login-card {
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 22px !important;
    background: rgba(7, 20, 34, 0.84) !important;
    box-shadow: 0 28px 80px rgba(0,0,0,.42) !important;
}

.mobile-dock {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(7, 17, 31, 0.95) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42) !important;
}

.mobile-dock a.is-active {
    color: #061711 !important;
    background: linear-gradient(145deg, #72dfb8, #c0e9a7) !important;
    box-shadow: 0 8px 20px rgba(15, 159, 122, 0.24) !important;
}

@media (min-width: 1500px) {
    .page,
    body > .container,
    body > main.container,
    body > .page-container {
        width: min(1780px, calc(100% - 112px)) !important;
    }
}

@media (max-width: 760px) {
    body {
        background:
            radial-gradient(circle at 90% 0, rgba(28,186,151,.15), transparent 22rem),
            linear-gradient(150deg, #06101e, #0a1d2b) !important;
    }

    .page,
    body > .container,
    body > main.container,
    body > .page-container,
    body > .section {
        width: calc(100% - 20px) !important;
    }

    .topbar,
    .dashboard-header,
    .csv-topbar,
    .page-header {
        min-height: 58px;
        padding: 7px 9px !important;
        border-radius: 16px;
    }

    .hero,
    .dashboard-hero,
    .csv-hero {
        border-radius: 24px !important;
    }

    .dashboard-panel,
    .csv-panel,
    .table-panel,
    .role-section,
    .panel,
    .card {
        border-radius: 20px !important;
    }

    .mobile-dock {
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        left: 8px !important;
        padding: 6px !important;
        border-radius: 19px !important;
    }

    .mobile-dock a {
        min-height: 55px !important;
        border-radius: 14px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}