/* ==========================================================================
   FantaTotocalcio — design system
   Look & feel ispirato alla schedina cartacea del Totocalcio: carta crema,
   verde/rosso come colori di marca, bordi tratteggiati, bordo "perforato".
   ========================================================================== */

:root {
    --ft-green: #0b5e34;
    --ft-green-dark: #073d22;
    --ft-green-light: #e6f1ea;
    --ft-red: #d6241a;
    --ft-red-dark: #a71a12;
    --ft-cream: #fdf6e6;
    --ft-cream-dark: #f4e9cf;
    --ft-paper: #fffdf8;
    --ft-ink: #23301f;
    --ft-line: #c9b98f;

    --ft-radius: 18px;
    --ft-radius-sm: 10px;
}

body {
    background-color: var(--ft-cream);
    color: var(--ft-ink);
    font-family: "Jost", "Segoe UI", system-ui, sans-serif;
}

.ft-display {
    font-family: "Passion One", "Jost", sans-serif;
    letter-spacing: 0.02em;
}

/* ---- Navbar --------------------------------------------------------- */
.ft-navbar {
    background: linear-gradient(180deg, var(--ft-green) 0%, var(--ft-green-dark) 100%);
    border-bottom: 4px solid var(--ft-red);
}
.ft-navbar .navbar-brand,
.ft-navbar .nav-link {
    color: #fff !important;
}
.ft-navbar .nav-link:hover {
    color: var(--ft-cream) !important;
}
.ft-logo {
    height: 34px;
    width: auto;
    display: block;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
.ft-logo-badge {
    background: var(--ft-cream);
    border-radius: 10px;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
}

/* ---- Ticket card ------------------------------------------------------ */
.ft-ticket {
    background: var(--ft-paper);
    border: 2px dashed var(--ft-line);
    border-radius: var(--ft-radius);
    position: relative;
    box-shadow: 0 2px 10px rgba(11, 94, 52, 0.08);
    overflow: hidden;
}

.ft-ticket-header {
    background: var(--ft-green);
    color: #fff;
    border-radius: calc(var(--ft-radius) - 6px) calc(var(--ft-radius) - 6px) 0 0;
    padding: .6rem 1rem;
    font-family: "Passion One", "Jost", sans-serif;
    font-size: 1.15rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ft-ticket-header.ft-red { background: var(--ft-red); }

/* Perforated edge: riga di forellini sopra/sotto una sezione */
.ft-perforation {
    height: 14px;
    background-image: radial-gradient(circle, var(--ft-cream) 5px, transparent 5.5px);
    background-size: 20px 20px;
    background-position: 0 -3px;
    background-repeat: repeat-x;
    border-top: 2px dashed var(--ft-line);
}

/* ---- Numbered fixture row (stile "1 2 3 ..." della schedina) --------- */
.ft-row-number {
    background: var(--ft-green);
    color: #fff;
    font-family: "Passion One", "Jost", sans-serif;
    font-weight: 700;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* ---- Pallini 1 / X / 2 stile totocalcio -------------------------------- */
.ft-pick-group {
    display: flex;
    gap: .5rem;
}
.ft-pick {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--ft-green);
    color: var(--ft-green);
    background: #fff;
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease, transform .08s ease;
    flex-shrink: 0;
}
.ft-pick:hover { background: var(--ft-green-light); }
.ft-pick:active { transform: scale(0.94); }
.ft-pick.selected {
    background: var(--ft-green);
    color: #fff;
    box-shadow: 0 0 0 3px var(--ft-green-light);
}
.ft-pick.ft-pick-sm {
    width: auto;
    min-width: 60px;
    height: 38px;
    padding: 0 1rem;
    border-radius: 19px;
    font-size: .85rem;
    flex: 0 0 auto;
}
.ft-pick.ft-pick-red { border-color: var(--ft-red); color: var(--ft-red); }
.ft-pick.ft-pick-red:hover { background: #fdecea; }
.ft-pick.ft-pick-red.selected { background: var(--ft-red); color: #fff; box-shadow: 0 0 0 3px #fdecea; }

/* ---- Buttons ----------------------------------------------------------- */
.btn-ft-green {
    background: var(--ft-green);
    border-color: var(--ft-green);
    color: #fff;
    font-weight: 700;
}
.btn-ft-green:hover, .btn-ft-green:focus {
    background: var(--ft-green-dark);
    border-color: var(--ft-green-dark);
    color: #fff;
}
.btn-ft-green:disabled {
    background: #9fb9a9;
    border-color: #9fb9a9;
}
.btn-ft-outline-green {
    background: transparent;
    border: 2px solid var(--ft-green);
    color: var(--ft-green);
    font-weight: 600;
}
.btn-ft-outline-green:hover {
    background: var(--ft-green-light);
    color: var(--ft-green-dark);
}
.btn-ft-red {
    background: var(--ft-red);
    border-color: var(--ft-red);
    color: #fff;
    font-weight: 700;
}
.btn-ft-red:hover { background: var(--ft-red-dark); border-color: var(--ft-red-dark); color: #fff; }

/* ---- Badges -------------------------------------------------------- */
.badge-ft-green { background: var(--ft-green) !important; }
.badge-ft-red { background: var(--ft-red) !important; }
.badge-ft-cream { background: var(--ft-cream-dark) !important; color: var(--ft-ink) !important; }

/* ---- Righe alternate stile Totocalcio -------------------------------- */
.ft-table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg: var(--ft-cream);
    --bs-table-accent-bg: var(--ft-cream);
    background-color: var(--ft-cream);
}
.ft-table-striped > tbody > tr:nth-of-type(even) > * {
    --bs-table-bg: var(--ft-paper);
    --bs-table-accent-bg: var(--ft-paper);
    background-color: var(--ft-paper);
}
.ft-table-striped > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--ft-green-light);
    background-color: var(--ft-green-light);
}

/* Stesso trattamento per liste di "righe" costruite con card/div anziche' <table> */
.ft-rows > * {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
}
.ft-rows > *:first-child { border-radius: var(--ft-radius) var(--ft-radius) 0 0; border-top: 2px dashed var(--ft-line); }
.ft-rows > *:last-child { border-radius: 0 0 var(--ft-radius) var(--ft-radius); }
.ft-rows { border: 2px dashed var(--ft-line); border-radius: var(--ft-radius); overflow: hidden; }
.ft-rows > *:nth-child(odd) { background-color: var(--ft-cream); }
.ft-rows > *:nth-child(even) { background-color: var(--ft-paper); }

/* ---- Utility -------------------------------------------------------- */
.ft-link { color: var(--ft-green); font-weight: 600; text-decoration: none; }
.ft-link:hover { color: var(--ft-green-dark); text-decoration: underline; }

.ft-brand-title {
    font-family: "Passion One", "Jost", sans-serif;
    color: var(--ft-green);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ft-page {
    min-height: 100vh;
}

.ft-footer-note {
    color: #8a8067;
    font-size: .75rem;
    text-align: center;
}