/*
 * bridge.css - Compatibilita JS + Tema custom DaisyUI
 * NON RIMUOVERE - necessario per il funzionamento dell'app
 */

/* === TEMA CUSTOM fantareporter - Sportivo Dark === */
[data-theme="fantareporter"] {
    color-scheme: dark;
    /* primary: emerald #10b981 */
    --p: 69.6% 0.17 162.48;
    --pc: 14.3% 0.04 163.7;
    /* secondary: teal #14b8a6 */
    --s: 70.4% 0.14 180.72;
    --sc: 14.3% 0.04 180.72;
    /* accent: lime #84cc16 */
    --a: 77.2% 0.19 120.76;
    --ac: 14.3% 0.04 120.76;
    /* neutral: slate-800 #1e293b */
    --n: 23.2% 0.03 264.05;
    --nc: 89.4% 0.01 264.05;
    /* base: slate-900/950 */
    --b1: 16.9% 0.026 264.05;
    --b2: 13.9% 0.02 264.05;
    --b3: 11.4% 0.017 264.05;
    --bc: 93% 0.01 264.05;
    /* info: sky #0ea5e9 */
    --in: 64.5% 0.18 230.2;
    --inc: 100% 0 0;
    /* success: emerald */
    --su: 69.6% 0.17 162.48;
    --suc: 100% 0 0;
    /* warning: amber #f59e0b */
    --wa: 76.9% 0.17 75.83;
    --wac: 14.3% 0.04 75.83;
    /* error: rose #f43f5e */
    --er: 62.8% 0.26 12.16;
    --erc: 100% 0 0;
    --rounded-box: 1rem;
    --rounded-btn: 0.75rem;
    --rounded-badge: 1.9rem;
    --animation-btn: 0.25s;
    --animation-input: .2s;
    --btn-focus-scale: 0.95;
    --border-btn: 0px;
    --tab-border: 1px;
    --tab-radius: 0.75rem;
}

/* === GRADIENT UTILITIES === */
.gradient-header {
    background: linear-gradient(135deg, #059669 0%, #0d9488 50%, #0891b2 100%);
}
.gradient-card {
    background: linear-gradient(135deg, rgba(16,185,129,0.1) 0%, rgba(20,184,166,0.05) 100%);
    border: 1px solid rgba(16,185,129,0.2);
}
.gradient-accent {
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.glow-primary {
    box-shadow: 0 0 20px rgba(16,185,129,0.15);
}

/* === SEZIONI DASHBOARD (toggle via JS .active) === */
.section { display: none; }
.section.active { display: block; }

/* === MODAL (toggle via JS .active) === */
.modal-fr,
.modal {
    display: none !important;
    position: fixed;
    inset: 0;
    z-index: 50;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.5);
    padding: 1rem;
}
.modal-fr.active,
.modal.active { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
.modal.modal-right.active {
    justify-content: flex-end;
}

/* === LOADING OVERLAY === */
.loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
    align-items: center;
    justify-content: center;
    background: rgba(15,23,42,.85);
}
.loading-overlay.active { display: flex; }

/* === CONFIRM MODAL === */
.confirm-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 55;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.5);
}
.confirm-modal.active { display: flex; }

/* === TAB CONTENT (admin, league) === */
.tab-content { display: none; }
.tab-content.active { display: block; }

/* === TABS PANELS (league_details) === */
.tabs__panel { display: none; }
.tabs__panel.active { display: block; }
.tabs__item.active { background: rgba(16,185,129,0.15); color: #10b981; font-weight: 600; border-radius: 0.5rem; }

/* === MODAL BACKDROP (admin) === */
.modal-backdrop { display: none; position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center; background: rgba(0,0,0,.5); }
.modal-backdrop.active { display: flex; }

/* === BOTTOM NAV MENU POPUP === */
.bottom-nav-menu {
    display: none;
    position: fixed;
    bottom: 4rem;
    right: 0.5rem;
    z-index: 51;
    background: #1e293b;
    border: 1px solid rgba(16,185,129,0.2);
    border-radius: 0.75rem;
    box-shadow: 0 -4px 20px rgba(0,0,0,.4);
    overflow: hidden;
    min-width: 200px;
}
.bottom-nav-menu.active { display: block; }
.bottom-nav-menu__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    width: 100%;
    border: none;
    background: none;
    font-size: 0.9rem;
    cursor: pointer;
    color: #e2e8f0;
    text-decoration: none;
    transition: background 0.15s;
}
.bottom-nav-menu__item:hover { background: rgba(16,185,129,0.1); }
.bottom-nav-menu__item--danger { color: #f43f5e; }

/* === AUTH TABS (login/register) === */
.auth-tab-content { display: none; }
.auth-tab-content.active { display: block; }

/* === HIDDEN utility === */
/* NO !important - permette override da Tailwind responsive (md:flex, sm:inline) */
.hidden { display: none; }

/* === AUTH LOADING === */
.auth-loading { display: none; text-align: center; padding: 0.5rem; }
.auth-loading.active { display: block; }

/* === PASSWORD STRENGTH === */
.auth-password-strength { font-size: 0.8rem; margin-top: 0.25rem; font-weight: 500; }
.auth-password-strength--weak { color: #f43f5e; }
.auth-password-strength--medium { color: #f59e0b; }
.auth-password-strength--strong { color: #10b981; }

/* === PWA INSTALL BANNER === */
.pwa-install-banner {
    position: fixed;
    bottom: 4.5rem;
    left: 0.5rem;
    right: 0.5rem;
    background: #292524;
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 52;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
@media (min-width: 768px) {
    .pwa-install-banner {
        bottom: 1rem;
        left: auto;
        right: 1rem;
        max-width: 400px;
    }
}
.pwa-install-banner__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.85rem;
}
.pwa-install-banner__btn {
    background: #10b981;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.pwa-install-banner__dismiss {
    background: none;
    border: none;
    color: rgba(255,255,255,.6);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem;
}

/* === ARTICLE TAB (league_details) === */
.article-tab-content { display: none; }
.article-tab-content.active { display: block; }

/* === MOBILE PADDING BOTTOM (per btm-nav) === */
@media (max-width: 767px) {
    main { padding-bottom: 4rem; }
}