/**
 * Responsive — mobile first, optimisé tablette & desktop
 */

:root {
    --app-max-width: 1280px;
    --nav-width-desktop: 220px;
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
}

html {
    scroll-behavior: smooth;
}

/* ——— Login : mobile ——— */
@media (max-width: 767px) {
    body.login-page {
        align-items: stretch;
        justify-content: flex-start;
        padding-top: max(20px, env(safe-area-inset-top, 0px));
        padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    }

    body.login-page .login-container {
        max-width: 100%;
        flex: 1 0 auto;
        justify-content: center;
        padding: 8px 0 16px;
    }

    body.login-page .login-header {
        margin-bottom: 28px;
    }

    body.login-page .logo-placeholder {
        font-size: 1.55rem;
        margin-bottom: 18px;
    }

    body.login-page .logo-sub {
        font-size: 1.85rem;
    }

    body.login-page h2 {
        font-size: 1.25rem;
    }

    body.login-page .login-form {
        gap: 16px;
    }

    body.login-page .login-footer {
        margin-top: 24px;
        gap: 12px;
    }

    body.login-page .btn-login {
        min-height: 48px;
    }
}

@media (max-width: 380px) {
    body.login-page .logo-placeholder {
        font-size: 1.35rem;
    }

    body.login-page .logo-sub {
        font-size: 1.6rem;
    }

    body.login-page .input-wrapper input {
        padding-left: 42px;
        padding-right: 40px;
    }
}

/* ——— Login : tablette / desktop ——— */
@media (min-width: 768px) {
    body.login-page {
        padding: 40px;
    }

    body.login-page .login-container {
        max-width: 440px;
        padding: 48px 40px;
        background: rgba(28, 38, 56, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 24px;
        backdrop-filter: blur(12px);
    }

    body.login-page .btn-login:hover {
        filter: brightness(1.08);
        transform: translateY(-1px);
    }
}

/* ——— Dashboard : tablette (nav bas, contenu centré) ——— */
@media (min-width: 768px) and (max-width: 1023px) {
    body.dashboard-app {
        padding-bottom: 88px;
    }

    body.dashboard-app .main-header,
    body.dashboard-app .content-wrapper {
        max-width: var(--app-max-width);
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px;
        box-sizing: border-box;
    }
}

/* ——— Dashboard : shell desktop (nav latérale + grille, sans chevauchement) ——— */
@media (min-width: 1024px) {
    body.dashboard-app {
        display: grid;
        grid-template-columns: var(--nav-width-desktop) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "sidebar header"
            "sidebar main";
        padding-bottom: 0;
        padding-left: 0;
        min-height: 100vh;
        min-height: 100dvh;
    }

    body.dashboard-app.compact-chrome {
        grid-template-rows: 1fr;
        grid-template-areas:
            "sidebar main";
    }

    body.dashboard-app .bottom-nav {
        grid-area: sidebar;
        position: sticky;
        top: 0;
        align-self: start;
        left: auto;
        bottom: auto;
        width: 100%;
        max-width: var(--nav-width-desktop);
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 24px 16px;
        gap: 4px;
        border-top: none;
        border-right: 1px solid rgba(255, 255, 255, 0.06);
        z-index: 100;
    }

    body.dashboard-app .main-header {
        grid-area: header;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 28px 32px 20px;
        box-sizing: border-box;
    }

    body.dashboard-app .content-wrapper {
        grid-area: main;
        width: 100%;
        max-width: none;
        margin: 0;
        min-width: 0;
        box-sizing: border-box;
    }

    body.dashboard-app .view-section {
        max-width: var(--app-max-width);
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding: 20px 32px 40px;
        box-sizing: border-box;
    }

    body.dashboard-app .nav-item {
        flex-direction: row;
        justify-content: flex-start;
        padding: 14px 18px;
        border-radius: 12px;
        gap: 14px;
        flex: 0 0 auto;
    }

    body.dashboard-app .nav-item span {
        font-size: 14px;
    }

    body.dashboard-app .nav-item:hover {
        background: rgba(255, 255, 255, 0.04);
    }

    body.dashboard-app .nav-item.active {
        background: rgba(255, 106, 0, 0.12);
    }

    body.dashboard-app .home-stats-row {
        grid-template-columns: repeat(4, 1fr);
        justify-content: stretch;
        gap: 14px;
        width: 100%;
        max-width: none;
    }

    body.dashboard-app .home-stats-row .stats-card,
    body.dashboard-app .home-stats-row button.stats-card {
        aspect-ratio: auto;
        max-width: none;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 24px 28px;
        border-radius: 20px;
    }

    body.dashboard-app .home-stats-row .stats-progress,
    body.dashboard-app .home-stats-row .stats-icon-wrap {
        align-self: center;
        margin-top: 0;
    }

    body.dashboard-app .home-stats-row .stats-main h2 {
        font-size: 46px;
        margin-bottom: 5px;
    }

    body.dashboard-app .home-stats-row .stats-main p {
        font-size: 14px;
    }

    body.dashboard-app .home-stats-row .stats-card-hint {
        font-size: 11px;
    }

    body.dashboard-app .home-stats-row .circular-progress {
        width: 64px;
        height: 64px;
        border-width: 4px;
    }

    body.dashboard-app .home-stats-row .circular-progress span {
        font-size: 14px;
    }

    body.dashboard-app .home-stats-row .stats-icon-wrap {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }

    body.dashboard-app .stats-card {
        padding: 32px 36px;
    }

    body.dashboard-app .stats-main h2 {
        font-size: 56px;
    }

    body.dashboard-app .set-row:hover {
        border-color: rgba(255, 106, 0, 0.25);
        transform: translateX(4px);
    }

    body.dashboard-app .deck-card:hover {
        border-color: rgba(255, 106, 0, 0.2);
    }

    body.dashboard-app .menu-item:hover {
        background: #243044;
    }

    body.dashboard-app .deck-fab {
        right: 32px;
        bottom: 32px;
    }

    /* Modales / overlays : pleine zone contenu (à droite de la sidebar) */
    body.dashboard-app .modal-overlay,
    body.dashboard-app .deck-dialog-overlay {
        left: var(--nav-width-desktop);
        width: calc(100% - var(--nav-width-desktop));
    }
}

/* ——— Grilles dashboard ——— */
@media (min-width: 600px) {
    .cards-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }

    #deckCardsGridContainer {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .catalog-cards-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .deck-empty-message {
        grid-column: 1 / -1;
    }
}

@media (min-width: 900px) {
    .cards-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 16px;
    }

    #deckCardsGridContainer {
        grid-template-columns: repeat(5, 1fr) !important;
    }

    .catalog-cards-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 14px;
    }

    .missions-horizontal-row {
        max-width: 100%;
    }

    .deck-action-buttons {
        max-width: 480px;
    }
}

@media (min-width: 1200px) {
    .cards-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    #deckCardsGridContainer {
        grid-template-columns: repeat(6, 1fr) !important;
    }

    .catalog-cards-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* ——— Modales : tiroir mobile → fenêtre centrée desktop ——— */
@media (min-width: 768px) {
    .modal-overlay {
        align-items: center;
        justify-content: center;
        padding: 24px;
    }

    .modal-content {
        width: min(920px, 100%);
        max-width: 920px;
        height: auto;
        max-height: min(88vh, 900px);
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    }

    .modal-filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 16px;
    }

    .modal-filters .search-box-container:first-of-type {
        grid-column: 1 / -1;
    }

    .modal-filters .filter-group-row {
        grid-column: 1 / -1;
    }

    .modal-filters .search-box-container:last-of-type {
        grid-column: 1 / -1;
    }

    .catalog-card-clickable:hover {
        transform: scale(1.03);
    }
}

@media (min-width: 1024px) {
    .modal-content {
        max-width: 1000px;
    }

    .catalog-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
}

/* ——— Collection tracker ——— */
@media (min-width: 768px) {
    body:has(.edition-stats-banner) {
        padding: 24px 32px 48px;
    }

    body:has(.edition-stats-banner) header,
    body:has(.edition-stats-banner) .section-title,
    body:has(.edition-stats-banner) .edition-stats-banner,
    body:has(.edition-stats-banner) .grid-container {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }

    body:has(.edition-stats-banner) .edition-stats-banner {
        padding: 20px 28px;
    }
}

@media (min-width: 1024px) {
    body:has(.edition-stats-banner) .grid-container {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 18px;
    }

    body:has(.edition-stats-banner) .grid-container.missions-grid,
    body:has(.edition-stats-banner) #missions-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* ——— Interactions souris (desktop) ——— */
@media (hover: hover) and (pointer: fine) {
    .btn-login:active,
    .btn-create-deck:active,
    .btn-card-action:active,
    .catalog-card-clickable:active {
        transform: none;
    }

    .btn-create-deck:hover {
        background: var(--accent-orange);
        color: #fff;
    }

    .btn-card-action:hover {
        background: rgba(255, 106, 0, 0.2);
        border-color: var(--accent-orange);
    }

    .set-row:hover .set-arrow {
        color: var(--accent-orange);
    }
}

/* ——— Très petits écrans ——— */
@media (max-width: 380px) {
    .deck-action-buttons {
        flex-direction: column;
    }

    .section-header h3 {
        font-size: 16px;
    }

    body.dashboard-app h1 {
        font-size: 20px;
    }
}