/* ===== ACE PADEL THEME — Global ===== */
:root {
    /* Brand */
    --padel-blue: #0d6efd;
    --padel-green: #39b54a;
    --padel-ink: #0b1220;
    --padel-muted: #6c757d;
    /* Surface */
    --padel-bg: #f7f9fc;
    --padel-border: rgba(13,110,253,0.12);
    /* Tokens UI */
    --tag-bg: #f8f9fb;
    --tag-fg: #344054;
    --tag-ok-bg: #f0fff5;
    --tag-ok-fg: #167c4b;
    --tag-ok-border: rgba(25,135,84,.3);
    --tag-ko-bg: #fff5f5;
    --tag-ko-fg: #b02a37;
    --tag-ko-border: rgba(220,53,69,.3);
    /* Chips */
    --chip-bg: #f6f9ff;
    --chip-fg: var(--padel-blue);
    --chip-border: rgba(13,110,253,.25);
    --chip-bg-active: #e9f2ff;
    --chip-border-active: var(--padel-blue);
    /* Buttons */
    --btn-radius: 10px;
    --btn-shadow: 0 1px 1px rgba(0,0,0,.05);
}

html, body {
    background: var(--padel-bg);
}

/* ====== Navbar (gradient) ====== */
.navbar-padel {
    background: linear-gradient(135deg, var(--padel-blue) 0%, var(--padel-green) 100%);
}

    .navbar-padel.navbar-dark .navbar-brand,
    .navbar-padel.navbar-dark .nav-link,
    .navbar-padel.navbar-dark .navbar-toggler {
        color: #fff !important;
    }

        .navbar-padel.navbar-dark .nav-link:hover,
        .navbar-padel.navbar-dark .nav-link.active {
            color: #fff !important;
            opacity: .9;
        }
    /* Toggler visibile sul gradiente */
    .navbar-padel.navbar-dark .navbar-toggler {
        border-color: rgba(255,255,255,.55);
    }

/* Brand badge (AcePadel tag) */
.brand-badge {
    font-weight: 700;
    letter-spacing: .3px;
    padding: .25rem .55rem;
    border-radius: .5rem;
    background: rgba(255,255,255,.15);
}

/* ===== Header branding (fix logo gigante) ===== */
.navbar-brand .brand-logo,
.brand-logo {
    height: 32px; /* dimensione standard header */
    width: auto;
    display: block;
    object-fit: contain;
}

@media (min-width: 992px) {
    .navbar-brand .brand-logo,
    .brand-logo {
        height: 36px; /* leggermente più grande su desktop */
    }
}

/* (opzionale) tipografia del blocco titolo/sottotitolo del brand */
.brand-title {
    font-weight: 700;
    line-height: 1.1;
}

.brand-sub {
    font-size: .8rem;
    opacity: .9;
}

/* ====== Cards ====== */
.card-padel {
    border: 1px solid var(--padel-border);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
    background: #fff;
}

/* ====== Section title ====== */
.form-section-title {
    font-weight: 700;
    color: var(--padel-blue);
    border-left: 4px solid var(--padel-green);
    padding-left: 10px;
    margin-top: 12px;
}

/* ====== Hero (gradient) ====== */
.padel-hero {
    background: linear-gradient(135deg, var(--padel-blue) 0%, var(--padel-green) 100%);
    color: #fff;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(13,110,253,.25);
}

    .padel-hero .badge {
        background: rgba(255,255,255,.2);
        font-weight: 600;
    }

/* ====== Tables ====== */
.table thead th {
    border-bottom: 2px solid var(--padel-border);
}

.table-hover tbody tr:hover {
    background: #f2f7ff;
}

.table thead th.nowrap, .nowrap {
    white-space: nowrap;
}

/* ====== Search bar wrapper ====== */
.search-wrap {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

/* ====== Tag “pill” ====== */
.tag {
    border: 1px solid rgba(0,0,0,.08);
    background: var(--tag-bg);
    color: var(--tag-fg);
    padding: .25rem .5rem;
    border-radius: 8px;
    display: inline-block;
    margin: 2px 4px 0 0;
    font-size: .85rem;
}

    .tag.ok {
        border-color: var(--tag-ok-border);
        background: var(--tag-ok-bg);
        color: var(--tag-ok-fg);
    }

    .tag.ko {
        border-color: var(--tag-ko-border);
        background: var(--tag-ko-bg);
        color: var(--tag-ko-fg);
    }

/* Varianti badge facoltative */
.badge-level {
    background: rgba(13,110,253,.1);
    color: var(--padel-blue);
}

.badge-mano {
    background: rgba(57,181,74,.1);
    color: var(--padel-green);
}

.badge-pos {
    background: rgba(11,18,32,.06);
    color: var(--padel-ink);
}

/* ====== Chips (filtri) ====== */
.chip {
    border: 1px solid var(--chip-border);
    background: var(--chip-bg);
    color: var(--chip-fg);
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
}

    .chip.active {
        background: var(--chip-bg-active);
        border-color: var(--chip-border-active);
    }

/* ====== Week grid (solo se usi la griglia fasce orarie custom) ====== */
#weekGrid {
    display: grid;
    grid-template-columns: 80px repeat(7, 1fr);
    gap: 8px;
}

.wg-head {
    font-weight: 600;
    text-align: center;
}

.wg-hour {
    font-size: .85rem;
    color: #6c757d;
    text-align: right;
    padding-right: 6px;
}

.wg-slot {
    border: 1px dashed rgba(13,110,253,.25);
    background: #f6f9ff;
    border-radius: 6px;
    cursor: pointer;
    height: 26px;
}

    .wg-slot.active {
        background: #e9f2ff;
        border-color: #0d6efd;
    }

/* =========================================================
   NEW — Global Buttons used across the app
   ========================================================= */

/* Base CTA (chiara su sfondo scuro o hero) */
.btn-cta {
    background: #fff;
    color: var(--padel-ink);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: var(--btn-radius);
    padding: .35rem .7rem;
    line-height: 1.1;
    box-shadow: var(--btn-shadow);
}

    .btn-cta:hover {
        filter: brightness(.98);
        color: var(--padel-ink);
    }

/* “Ghost” per navbar/hero (bordi e trasparenze leggere) */
.btn-ghost {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff;
    border-radius: var(--btn-radius);
    padding: .35rem .6rem;
    line-height: 1.1;
}

    .btn-ghost:hover {
        background: rgba(255,255,255,.18);
        color: #fff;
    }

/* Variante padel (primaria) coerente col brand */
.btn-padel {
    background: var(--padel-blue);
    border-color: var(--padel-blue);
    color: #fff;
    border-radius: var(--btn-radius);
    box-shadow: var(--btn-shadow);
}

    .btn-padel:hover {
        filter: brightness(.95);
        color: #fff;
    }

/* Dimensione compatta coerente (override Bootstrap) */
.btn-sm {
    padding: .25rem .5rem;
    border-radius: var(--btn-radius);
}

/* Icone inline consistenti */
.btn-icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    margin-right: .25rem;
}

    .btn-icon svg {
        display: block;
    }

/* Pulsante solo icona (quadrato) */
.btn-icon-only {
    padding: .35rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .btn-icon-only .btn-icon {
        margin-right: 0;
    }

/* Varianti soft (opzionali) per elenchi, toolbar leggere */
.btn-soft {
    background: #ffffff;
    color: var(--padel-ink);
    border: 1px solid var(--padel-border);
    border-radius: var(--btn-radius);
}

    .btn-soft:hover {
        background: #f8f9fb;
    }

/* Input settimana coerente (riusabile) */
.week-input {
    width: 16ch;
    min-width: 12ch;
}

/* Toolbar compatta generica (puoi usarla in qualsiasi pagina) */
.toolbar-compact {
    display: flex;
    gap: .5rem;
    align-items: center;
}

    .toolbar-compact .form-control {
        height: calc(1.5em + .5rem + 2px);
        padding: .25rem .5rem;
    }

/* ===== Footer ===== */
/* Footer: dimensioni loghi + link Improve come blocco */
.footer-logo {
    height: 22px;
    width: auto;
    display: block;
}

.improve-logo {
    height: 20px;
    width: auto;
    display: block;
}

/* il link "Improve" come unità cliccabile compatta (immagine + testo) */
.improve-link {
    text-decoration: none;
    color: inherit;
}

    .improve-link:hover {
        text-decoration: underline; /* piace ai motori e all’utente */
    }

/* Footer sempre in flusso (nel caso qualche regola altrove provi a forzarlo) */
footer.footer {
    position: static;
    z-index: auto;
}

.btn-viewtoggle {
    background: linear-gradient(90deg, #0d6efd 0%, #3b82f6 100%);
    color: #fff !important;
    border: none;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(13,110,253,0.3);
    transition: all .15s ease-in-out;
}

    .btn-viewtoggle:hover {
        background: linear-gradient(90deg, #3b82f6 0%, #0d6efd 100%);
        box-shadow: 0 3px 8px rgba(13,110,253,0.4);
        transform: translateY(-1px);
    }