/* Shared FantaInfinity visual system. Loaded after page-level styles. */
:root {
    --fi-night: #06150d;
    --fi-forest: #0b3d24;
    --fi-pitch: #168447;
    --fi-grass: #20a65a;
    --fi-lime: #8bd450;
    --fi-chalk: #f4f8f2;
    --fi-card: #ffffff;
    --fi-ink: #102319;
    --fi-muted: #65766d;
    --fi-line: #dce8df;
    --fi-yellow: #f5c842;
    --fi-red: #d94b4b;
    --fi-shadow: 0 18px 50px rgba(2, 24, 13, 0.18);
    --fi-radius: 18px;
    --page: var(--fi-night);
    --panel: rgba(255, 255, 255, 0.97);
    --panel-dark: rgba(6, 30, 18, 0.92);
    --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);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    background: var(--fi-night);
}

body {
    min-height: 100vh;
    color: var(--fi-ink);
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(32, 166, 90, 0.2), transparent 31rem),
        linear-gradient(145deg, rgba(4, 18, 10, 0.96), rgba(10, 55, 31, 0.9)),
        url('/img/sfondo_dashboard.png') center / cover fixed no-repeat !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.16;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(to bottom, black, transparent 75%);
}

.auth-page.login-page {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.52), rgba(4, 43, 23, 0.16), rgba(0, 0, 0, 0.55)),
        url('/img/sfondo-login-register3.png') center / cover fixed no-repeat !important;
}

.auth-page {
    --text: var(--fi-chalk);
    --muted: #d8e6dc;
    --panel-bg: rgba(5, 28, 16, 0.82);
    --panel-border: rgba(255, 255, 255, 0.24);
    color: var(--fi-chalk) !important;
}

.auth-page .brand h1,
.auth-page .brand p,
.auth-page label,
.auth-page .secondary-action {
    color: var(--fi-chalk) !important;
}

.auth-page .brand p {
    color: #d8e6dc !important;
}

.auth-page.register-page,
.auth-page.create-team-page {
    background:
        linear-gradient(145deg, rgba(3, 20, 11, 0.88), rgba(12, 76, 40, 0.62)),
        url('/img/sfondo_principale_login_registrazione.png') center / cover fixed no-repeat !important;
}

.page,
body > .container,
body > main.container,
body > .page-container {
    width: min(1680px, calc(100% - clamp(28px, 5vw, 96px))) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.page {
    padding-top: clamp(20px, 3vw, 38px) !important;
    padding-bottom: 56px !important;
}

body > .container {
    margin-top: clamp(28px, 5vw, 76px) !important;
    margin-bottom: 48px !important;
    padding: clamp(20px, 2.6vw, 42px) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: var(--fi-radius) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: var(--fi-shadow) !important;
}

body > .container > h1,
body > .container > h2,
body > .container > h3 {
    color: var(--fi-ink) !important;
}

body > .container > ul > li,
.team-list > li {
    color: var(--fi-chalk) !important;
    background: linear-gradient(135deg, var(--fi-pitch), var(--fi-forest)) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 10px 24px rgba(3, 35, 18, 0.18) !important;
}

body > .container > ul > li a,
.team-list > li a,
body > .container > ul > li span {
    color: var(--fi-chalk) !important;
}

body > .section {
    width: min(1680px, calc(100% - clamp(28px, 5vw, 96px))) !important;
    max-width: none !important;
}

.section-title {
    background: linear-gradient(135deg, var(--fi-pitch), var(--fi-forest)) !important;
}

.subsection-title,
.highlight {
    color: var(--fi-yellow) !important;
}

body > h1,
body > h2,
body > table,
body > ul {
    width: min(1680px, calc(100% - clamp(28px, 5vw, 96px)));
    margin-left: auto !important;
    margin-right: auto !important;
}

body > h1,
body > h2 {
    color: var(--fi-chalk) !important;
}

body > table {
    margin-bottom: 32px;
    background: var(--fi-card);
    border-radius: 14px;
    overflow: hidden;
}

body > ul {
    padding: 0;
    list-style: none;
}

body > ul > li {
    margin-bottom: 10px;
    padding: 14px 16px;
    color: var(--fi-ink);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--fi-line);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(4, 34, 18, 0.1);
}

.principale .container {
    width: 100% !important;
    max-width: none !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.card-header.bg-primary,
.card-header.bg-info,
.card-header.bg-success,
.bg-primary,
.bg-info,
.bg-success {
    color: var(--fi-chalk) !important;
    background: linear-gradient(135deg, var(--fi-pitch), var(--fi-forest)) !important;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4 {
    color: inherit !important;
}

.hero,
.panel,
.card,
.team-section,
.partite-container,
.section,
.table-wrapper,
.create-team-container,
.register-container {
    border-radius: var(--fi-radius) !important;
}

.panel,
.card,
.team-section,
.partite-container,
.table-wrapper {
    border-color: var(--fi-line) !important;
    box-shadow: 0 12px 34px rgba(4, 34, 18, 0.11) !important;
}

.topbar,
.page-header {
    min-height: 52px;
}

h1, h2, h3, h4 {
    letter-spacing: -0.02em;
}

h1 {
    text-wrap: balance;
}

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

button,
.btn,
.action-link,
.table-button,
input[type="submit"] {
    border-radius: 10px !important;
    font-weight: 800 !important;
}

button:hover,
.btn:hover,
.action-link:hover,
.table-button:hover,
input[type="submit"]:hover {
    transform: translateY(-1px);
}

.btn-primary,
.action-link,
.table-button,
button[type="submit"],
input[type="submit"] {
    border-color: transparent !important;
    color: #07180e !important;
    background: linear-gradient(135deg, var(--fi-lime), #b8e86d) !important;
    box-shadow: 0 8px 22px rgba(91, 164, 52, 0.24) !important;
}

.btn-danger,
.remove-button,
button.danger {
    color: #fff !important;
    background: var(--fi-red) !important;
}

.back-link,
.back-arrow,
.top-right-btn a,
a.back-button {
    color: var(--fi-chalk) !important;
    background: rgba(5, 30, 17, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
}

input,
select,
textarea,
.form-control,
.form-select {
    border: 1px solid #cbdace !important;
    border-radius: 10px !important;
    color: var(--fi-ink) !important;
    background: #fff !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--fi-grass) !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(32, 166, 90, 0.16) !important;
}

table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

thead th,
table th {
    color: var(--fi-chalk) !important;
    background: var(--fi-forest) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

tbody tr:nth-child(even) {
    background: #f2f8f3;
}

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

.table-wrapper,
.table-responsive {
    overflow-x: auto;
    scrollbar-color: var(--fi-pitch) #e5eee7;
}

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

.fan-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #0b4d2a;
    background: #e2f4d4;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.alert,
.error-message,
.success-message {
    border-radius: 12px !important;
}

.modal-content {
    border: 0 !important;
    border-radius: var(--fi-radius) !important;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.28) !important;
}

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

@media (max-width: 760px) {
    .page,
    body > .container,
    body > main.container,
    body > .page-container {
        width: calc(100% - 22px) !important;
    }

    body > .container {
        padding: 16px !important;
        margin-top: 16px !important;
    }

    .topbar,
    .page-header {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .topbar > *,
    .page-header > * {
        width: 100%;
    }

    .formation-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .formation-container .team-section {
        width: 100% !important;
    }

    h1 {
        font-size: clamp(1.8rem, 9vw, 2.5rem) !important;
    }
}

/* Navigazione persistente per telefono. */
.mobile-dock {
    display: none;
}

@media (max-width: 760px) {
    body {
        padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-dock {
        position: fixed;
        z-index: 1000;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        left: 10px;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        padding: 7px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        background: rgba(4, 25, 14, 0.94);
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.38);
        backdrop-filter: blur(18px);
    }

    .mobile-dock a {
        display: flex;
        min-width: 0;
        min-height: 54px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border-radius: 14px;
        color: rgba(244, 248, 242, 0.7) !important;
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
        text-decoration: none;
    }

    .mobile-dock a i {
        font-size: 18px;
    }

    .mobile-dock a.is-active {
        color: #07150d !important;
        background: linear-gradient(135deg, var(--fi-lime), #b7ec72);
        box-shadow: 0 8px 18px rgba(139, 212, 80, 0.24);
    }

    .mobile-dock a:active {
        transform: scale(0.96);
    }
}