/* desktop-shell.css: navegação e moldura do app web em tela grande.
 * Tudo aqui fica dentro de @media (min-width: 1024px) e é escopado em
 * body.rackfy-app-experience:not(.platform-native). Abaixo de 1024px, e nos
 * apps nativos (inclusive iPad), nada muda. Home fica em desktop-home.css.
 * Única regra fora da media query: o trail começa escondido. */

/* Medidas compartilhadas com desktop-home.css. Header, main e footer usam a
 * mesma caixa para que logo, títulos e conteúdo comecem na mesma linha. */
:root {
    --rk-desk-max: 1280px;
    --rk-desk-gutter: 32px;
    --rk-desk-header-h: 72px;
    --rk-desk-brand: #e0f338;
}

/* Caminho de volta (inserido por JS no topo do main). */
.rk-desk-trail { display: none; }

@media (min-width: 1024px) {
    /* ---- Caixa compartilhada: header, main e footer ---- */
    body.rackfy-app-experience:not(.platform-native) > header > div,
    body.rackfy-app-experience:not(.platform-native) > main,
    body.rackfy-app-experience:not(.platform-native) > footer > div {
        width: min(100% - 2 * var(--rk-desk-gutter), var(--rk-desk-max));
        max-width: none;
        margin-inline: auto;
        padding-inline: 0;
    }

    /* ---- Header: logo | destinos | ações ---- */
    body.rackfy-app-experience:not(.platform-native) > header > div {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        column-gap: 24px;
        min-height: var(--rk-desk-header-h);
        padding-block: 0;
    }
    body.rackfy-app-experience:not(.platform-native) #header-back-btn { display: none; }
    body.rackfy-app-experience:not(.platform-native) #header-logo-wrap { grid-column: 1; grid-row: 1; justify-self: start; }

    /* O nav vira só um agrupador: suas duas zonas entram direto na grade do header. */
    body.rackfy-app-experience:not(.platform-native) #main-nav:has(> .rk-desk-destinations) { display: contents; }

    body.rackfy-app-experience:not(.platform-native) .rk-desk-destinations {
        grid-column: 2;
        grid-row: 1;
        align-self: stretch;
        display: flex;
        align-items: stretch;
        gap: 4px;
    }
    body.rackfy-app-experience:not(.platform-native) .rk-desk-actions {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Destinos: 15px/500, ativo com régua de 2px colada à borda inferior do header.
     * !important só onde styles.css já usa !important (html.dark #main-nav button). */
    body.rackfy-app-experience:not(.platform-native) #main-nav .rk-desktop-destination {
        position: relative;
        display: inline-flex;
        align-items: center;
        min-height: 0;
        padding: 0 16px;
        border-radius: 0;
        background: none;
        font-size: 15px;
        font-weight: 500;
        line-height: 1;
        color: var(--color-text-secondary) !important;
        text-shadow: none;
        transition: color 150ms ease;
    }
    body.rackfy-app-experience:not(.platform-native) #main-nav .rk-desktop-destination:hover,
    body.rackfy-app-experience:not(.platform-native) #main-nav .rk-desktop-destination.is-active {
        background: none;
        color: var(--color-text-primary) !important;
        text-shadow: none;
    }
    body.rackfy-app-experience:not(.platform-native) #main-nav .rk-desktop-destination.is-active::after {
        content: '';
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: -1px;
        height: 2px;
        background: var(--rk-desk-brand);
    }
    body.rackfy-app-experience:not(.platform-native) #main-nav .rk-desktop-destination:focus-visible,
    body.rackfy-app-experience:not(.platform-native) #main-nav :is(#notification-btn, #user-dropdown-toggle):focus-visible,
    body.rackfy-app-experience:not(.platform-native) #user-dropdown :is(a, button):focus-visible,
    body.rackfy-app-experience:not(.platform-native) #home-logo:focus-visible {
        outline: 2px solid var(--rk-desk-brand);
        outline-offset: 3px;
    }
    body.rackfy-app-experience:not(.platform-native) #home-logo:focus-visible { border-radius: 8px; }
    /* Clique em texto do menu não mostra anel no contêiner. */
    body.rackfy-app-experience:not(.platform-native) #user-dropdown:focus { outline: none; }
    body.rackfy-app-experience:not(.platform-native) #main-nav .rk-desktop-destination:focus-visible {
        outline-offset: -8px;
        border-radius: 10px;
    }

    /* Sino e avatar: sem a cor indigo legada, hover neutro. */
    body.rackfy-app-experience:not(.platform-native) #main-nav #notification-btn {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        color: var(--color-text-secondary) !important;
        transition: color 150ms ease, background-color 150ms ease;
    }
    body.rackfy-app-experience:not(.platform-native) #main-nav #notification-btn:hover {
        background-color: rgba(246, 248, 245, 0.06);
        color: var(--color-text-primary) !important;
        text-shadow: none;
    }
    body.rackfy-app-experience:not(.platform-native) #main-nav #user-dropdown-toggle { border-radius: 9999px; padding: 0; }
    body.rackfy-app-experience:not(.platform-native) .rk-desk-avatar-initial {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 9999px;
        border: 1px solid var(--color-border-strong, var(--color-border));
        background: var(--color-bg-tertiary, #111a17);
        color: var(--color-text-primary);
        font-size: 16px;
        font-weight: 600;
        line-height: 1;
    }

    /* ---- Menu da conta ---- */
    body.rackfy-app-experience:not(.platform-native) #user-dropdown {
        top: calc(100% + 20px);
        margin-top: 0;
        width: 248px;
        padding: 6px;
        border-radius: 12px;
        /* !important para vencer html.dark #user-dropdown (styles.css): superfície #0b1110,
         * hairline e uma sombra curta (o menu flutua sobre o conteúdo). */
        background-color: var(--color-bg-secondary) !important;
        border: 1px solid var(--color-border) !important;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35) !important;
    }
    body.rackfy-app-experience:not(.platform-native) #user-dropdown > div:first-child {
        margin-bottom: 6px;
        padding: 12px;
        border: 0;
        border-radius: 8px;
    }
    body.rackfy-app-experience:not(.platform-native) #user-dropdown :is(a, button) { font-size: 14px; }
    body.rackfy-app-experience:not(.platform-native) #user-dropdown a {
        display: flex;
        align-items: center;
        min-height: 40px;
        padding: 0 12px;
        border-radius: 8px;
        font-weight: 500;
    }
    /* !important: styles.css força cor e fundo lime nos itens do menu. */
    body.rackfy-app-experience:not(.platform-native) #user-dropdown a:hover {
        background-color: rgba(246, 248, 245, 0.06) !important;
        color: var(--color-text-primary) !important;
    }
    /* Painel de alertas: preso ao canto da caixa, logo abaixo do header (!important
     * porque styles.css posiciona com !important). */
    body.rackfy-app-experience:not(.platform-native) #notification-panel {
        top: calc(var(--rk-desk-header-h) + 8px) !important;
        right: max(var(--rk-desk-gutter), calc((100% - var(--rk-desk-max)) / 2)) !important;
        border-radius: 12px;
    }

    /* ---- Main e footer na caixa ----
     * Cada tela interna tem um wrapper centrado com largura própria (max-w-4xl a 7xl):
     * ele passa a começar na borda esquerda da caixa, a mesma do logo e do trail. */
    body.rackfy-app-experience:not(.platform-native) > main > :is(#finder-section, #setup-lab-section, #schedule-section, #ball-guide-section) > div {
        margin-inline: 0;
        padding-inline: 0;
    }
    /* Agenda na caixa inteira: o calendário ganha a largura da tela. O cabeçalho,
     * centrado no miolo, é alinhado à esquerda mais abaixo, como Descubra e Setup Lab. */
    body.rackfy-app-experience:not(.platform-native) > main > #schedule-section > div { max-width: none; }
    /* Descubra: o subtítulo tinha mx-auto e ficava recuado em relação ao título. */
    body.rackfy-app-experience:not(.platform-native) #finder-subtitle { margin-inline: 0; }
    body.rackfy-app-experience:not(.platform-native) > footer > div { text-align: left; }
    body.rackfy-app-experience:not(.platform-native) > footer nav { justify-content: flex-start; }

    /* ---- Caminho de volta ---- */
    body.rackfy-app-experience:not(.platform-native) .rk-desk-trail:not([hidden]) { display: block; margin-bottom: 24px; }
    body.rackfy-app-experience:not(.platform-native) .rk-desk-trail ol {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 14px;
        color: var(--color-text-secondary);
    }
    body.rackfy-app-experience:not(.platform-native) .rk-desk-trail li + li::before {
        content: '\203A';
        margin-inline: 8px;
        color: var(--color-text-muted, #69766f);
    }
    body.rackfy-app-experience:not(.platform-native) .rk-desk-trail button {
        min-height: 32px;
        padding: 0 6px;
        margin-inline: -6px;
        border-radius: 6px;
        color: var(--color-text-secondary);
        transition: color 150ms ease;
    }
    body.rackfy-app-experience:not(.platform-native) .rk-desk-trail button:hover { color: var(--color-text-primary); text-decoration: underline; text-underline-offset: 4px; }
    body.rackfy-app-experience:not(.platform-native) .rk-desk-trail button:focus-visible { outline: 2px solid var(--rk-desk-brand); outline-offset: 3px; }
    body.rackfy-app-experience:not(.platform-native) .rk-desk-trail [aria-current] { color: var(--color-text-primary); font-weight: 500; }

    /* ---- Hubs: título nas colunas 1-4, ferramentas nas colunas 5-12 ---- */
    body.rackfy-app-experience:not(.platform-native) .rk-hub {
        max-width: none;
        margin: 0;
        padding: 16px 0 48px;
    }
    body.rackfy-app-experience:not(.platform-native) .rk-hub:not(.hidden) {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--rk-desk-gutter);
        align-items: start;
    }
    body.rackfy-app-experience:not(.platform-native) .rk-hub > * { grid-column: 1 / -1; }
    body.rackfy-app-experience:not(.platform-native) .rk-hub > header {
        grid-column: 1 / span 4;
        grid-row: 1;
        margin: 0;
        position: sticky;
        top: calc(var(--rk-desk-header-h) + var(--rk-desk-gutter));
    }
    body.rackfy-app-experience:not(.platform-native) .rk-hub h1 {
        font-size: 2.441rem;
        line-height: 1.1;
        letter-spacing: -0.03em;
        text-wrap: balance;
    }
    body.rackfy-app-experience:not(.platform-native) .rk-hub > header p {
        max-width: 30ch;
        margin-top: 16px;
        font-size: 16px;
        text-wrap: pretty;
    }
    body.rackfy-app-experience:not(.platform-native) .rk-hub > .rk-tool-list {
        grid-column: 5 / -1;
        grid-row: 1;
        max-width: none;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--rk-desk-gutter);
        border-top: 0;
        border-bottom: 1px solid var(--color-border);
    }
    body.rackfy-app-experience:not(.platform-native) .rk-hub .rk-tool-row {
        min-height: 96px;
        padding: 22px 8px;
        border-top: 1px solid var(--color-border);
        border-bottom: 0;
    }
    body.rackfy-app-experience:not(.platform-native) .rk-hub .rk-tool-row:hover { background: rgba(246, 248, 245, 0.05); }
    body.rackfy-app-experience:not(.platform-native) .rk-hub .rk-tool-row:hover > [data-rk-icon]:last-child { color: var(--color-text-primary); }
    body.rackfy-app-experience:not(.platform-native) .rk-hub .rk-tool-row:focus-visible {
        outline: 2px solid var(--rk-desk-brand);
        outline-offset: -3px;
    }
    body.rackfy-app-experience:not(.platform-native) .rk-hub .rk-row-copy small { font-size: 14px; }
}

/* Entre 1024 e 1199 as duas colunas ficariam estreitas demais: uma coluna de linhas. */
@media (min-width: 1024px) and (max-width: 1199px) {
    body.rackfy-app-experience:not(.platform-native) .rk-hub > .rk-tool-list { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    body.rackfy-app-experience:not(.platform-native) :is(#main-nav .rk-desktop-destination, #main-nav #notification-btn, .rk-desk-trail button) { transition: none; }

}

@media (min-width: 1024px) {
    /* !important vence a regra de live-coach.css que esconde o nav. */
    body.rackfy-app-experience:not(.platform-native).live-coach-open #main-nav:has(> .rk-desk-destinations) { display: contents !important; }
    body.rackfy-app-experience:not(.platform-native) #live-coach-section.lc-root { max-width: none; margin-inline: 0; }
    body.rackfy-app-experience:not(.platform-native) > main { min-height: calc(100vh - var(--rk-desk-header-h) - 64px - 128px); }
    body.rackfy-app-experience:not(.platform-native) > main > :is(#setup-lab-section, #finder-section) > div { max-width: none; }
    body.rackfy-app-experience:not(.platform-native) > main > :is(#about-us-section, #support-section, #privacy-section, #profile-section, #notifications-section) > div { margin-inline: 0; }
    body.rackfy-app-experience:not(.platform-native) :is(#setup-lab-section, #ball-guide-root) button[onclick="showForum()"] { display: none; }
    /* Dica de primeira visita: presa ao canto inferior direito da caixa, sem cobrir os
     * links do rodapé (alinhados à esquerda), na superfície do DESIGN.md. */
    body.rackfy-app-experience:not(.platform-native) .rackfy-contextual-tip {
        top: auto; bottom: 24px; left: auto;
        right: max(var(--rk-desk-gutter), calc((100% - var(--rk-desk-max)) / 2));
        transform: none;
        background: var(--color-bg-secondary);
        backdrop-filter: none;
    }
    body.rackfy-app-experience:not(.platform-native) #finder-section :is(#racket-finder-content, #shoe-finder-content, #compare-rackets-content, #string-finder-content, #ball-finder-content) { max-width: 56rem; }
    body.rackfy-app-experience:not(.platform-native) #schedule-section > div > .text-center { text-align: left; }
    body.rackfy-app-experience:not(.platform-native) #schedule-section > div > .text-center p { margin-inline: 0; }
    body.rackfy-app-experience:not(.platform-native) #schedule-tabs nav { justify-content: flex-start; }
    /* Notificações: o wrapper tinha px-3 (título 12px fora da linha do logo) e o estado
     * vazio ficava centrado numa coluna estreita; no desktop tudo começa na borda. */
    body.rackfy-app-experience:not(.platform-native) > main > #notifications-section > div { padding-inline: 0; }
    body.rackfy-app-experience:not(.platform-native) #notifications-page-list > p.text-center { text-align: left; padding-inline: 0; }
    /* Setup Lab: mesmo alinhamento das outras telas internas; o eyebrow repetia o selo. */
    body.rackfy-app-experience:not(.platform-native) #setup-lab-section > div > .rk-sec-head { text-align: left; }
    body.rackfy-app-experience:not(.platform-native) #setup-lab-section > div > .rk-sec-head p { margin-inline: 0; }
    body.rackfy-app-experience:not(.platform-native) #setup-lab-section > div > .rk-sec-head .rk-eyebrow { display: none; }
    body.rackfy-app-experience:not(.platform-native) #user-dropdown-toggle .rackfy-goat-badge { right: auto; left: 50%; transform: translateX(-50%); }
    body.rackfy-app-experience:not(.platform-native) #notification-panel { border-color: var(--color-border); background: var(--color-bg-secondary); }
    body.rackfy-app-experience:not(.platform-native) #notification-panel .rk-notif { background: var(--color-bg-tertiary); }
    body.rackfy-app-experience:not(.platform-native) #notification-panel .rk-notif-ico:is(.indigo, .sky) { background: rgba(224,243,56,.10); color: #b7d873; }
    /* Aviso de cookies (public/consent.js, estilos inline, por isso !important): no centro
     * ele cobria botões do Termo, do presente de boas-vindas e a dica do canto. No desktop
     * vira um cartão no canto inferior direito da caixa (como na landing), onde as telas
     * internas, alinhadas à esquerda, têm espaço livre, e fica abaixo dos modais (z >= 50). */
    body.rackfy-app-experience:not(.platform-native) #rackfy-consent-banner {
        left: auto !important;
        right: max(var(--rk-desk-gutter), calc((100% - var(--rk-desk-max)) / 2)) !important;
        bottom: 24px !important;
        margin: 0 !important;
        max-width: 420px !important;
        z-index: 49 !important;
        background: var(--color-bg-secondary) !important;
        border-color: #303c36 !important;
        color: #d5e0da !important;
    }
    /* Guia de primeiro acesso: o recuo vinha da tab bar, que não existe aqui; fica no canto
     * inferior direito da caixa. A dica contextual (mesmo canto) espera o guia fechar
     * (maybeShowContextualTour em src/app/script.js). */
    body.rackfy-app-experience:not(.platform-native) #rk-first-access-guide {
        right: max(var(--rk-desk-gutter), calc((100% - var(--rk-desk-max)) / 2));
        bottom: 24px;
    }
    /* Enquanto o aviso de cookies está aberto (~161px de altura com 420px de largura), guia e
     * dica ficam logo acima dele, no mesmo canto. */
    body.rackfy-app-experience:not(.platform-native):has(#rackfy-consent-banner) :is(#rk-first-access-guide, .rackfy-contextual-tip) {
        bottom: calc(24px + 161px + 16px);
    }
    body.rackfy-app-experience:not(.platform-native):has(#rackfy-consent-banner) #rk-first-access-guide {
        max-height: calc(100dvh - var(--rk-desk-header-h) - 24px - 201px);
    }
}

/* Tela Equipamento: cartão "Meu equipamento" e título "Ferramentas" na coluna das ferramentas (5-12). */
@media (min-width: 1024px) {
    body.rackfy-app-experience:not(.platform-native) #equipment-hub-section > header { grid-row: 1 / span 3; }
    body.rackfy-app-experience:not(.platform-native) #equipment-hub-section > .rk-eq-slot { grid-column: 5 / -1; grid-row: 1; margin-bottom: 0; }
    body.rackfy-app-experience:not(.platform-native) #equipment-hub-section > .rk-eq-tools-title { grid-column: 5 / -1; grid-row: 2; margin-top: 32px; }
    body.rackfy-app-experience:not(.platform-native) #equipment-hub-section > .rk-tool-list { grid-row: 3; }
}

/* Notícias do tênis: lista e matéria numa coluna de leitura centrada (a barra inferior do celular não existe aqui). */
@media (min-width: 1024px) {
    body.rackfy-app-experience:not(.platform-native) :is(#news-section, #news-article-section) {
        max-width: 760px; margin-inline: auto;
    }
    body.rackfy-app-experience:not(.platform-native) :is(#news-section, #news-article-section).rk-news-page {
        padding-bottom: 64px;
    }
}