/*
 * sheet.css — Motor único dos modais mobile do tipo "bottom sheet".
 *
 * Este arquivo define O ÚNICO visual de sheet do projeto. Nenhuma página deve
 * redeclarar raio, altura, cor de fundo ou tamanho da pill: se um sheet precisa
 * de algo diferente, é um modificador aqui, não CSS solto na blade.
 *
 * Comportamento por breakpoint:
 *   desktop (>768px) — modal centralizado clássico, com o X no header;
 *   mobile  (≤768px) — folha subindo do rodapé, arrastável, sem X (a pill e o
 *                      arraste substituem o botão).
 *
 * CORES: sempre var(--c-*), que vem do .env via partials/theme.blade.php.
 * Escrever #292d2e cru aqui quebra a troca de tema — o theme-overrides.css só
 * reescreve classes Tailwind, não CSS bruto.
 *
 * Marcação mínima:
 *   <div class="sheet" id="x" data-sheet hidden>
 *     <div class="sheet-backdrop" data-sheet-close></div>
 *     <div class="sheet-panel" role="dialog" aria-modal="true">
 *       <div class="sheet-grip"></div>
 *       <div class="sheet-head">
 *         <h2 class="sheet-title">Título</h2>
 *         <button class="sheet-close" data-sheet-close>…</button>
 *       </div>
 *       <div class="sheet-body">…</div>
 *       <div class="sheet-foot">…</div>
 *     </div>
 *   </div>
 */

:root {
    --sheet-radius:        20px;
    --sheet-radius-desk:   16px;
    --sheet-max-w:         480px;
    --sheet-max-h:         88dvh;
    --sheet-max-h-desk:    90vh;

    --sheet-bg:            var(--c-surface, #292d2e);
    --sheet-bg-raised:     var(--c-surface-2, #323738);
    --sheet-hairline:      rgba(255, 255, 255, .07);
    --sheet-grip-color:    #4a5354;
    --sheet-text:          #ffffff;
    --sheet-text-dim:      #a0a5b5;

    --sheet-backdrop:      rgba(0, 0, 0, .72);
    --sheet-blur:          4px;

    /* O easing é o mesmo de todo sheet nativo: sai rápido, assenta devagar. */
    --sheet-ease:          cubic-bezier(.32, .72, 0, 1);
    --sheet-dur-in:        .34s;
    --sheet-dur-out:       .26s;

    --sheet-z:             9990;
}

/* ---------------------------------------------------------------------------
   Overlay
   --------------------------------------------------------------------------- */
.sheet {
    position: fixed;
    inset: 0;
    z-index: var(--sheet-z);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.sheet[hidden] { display: none; }

.sheet-backdrop {
    position: absolute;
    inset: 0;
    background: var(--sheet-backdrop);
    -webkit-backdrop-filter: blur(var(--sheet-blur));
    backdrop-filter: blur(var(--sheet-blur));
    opacity: 0;
    transition: opacity var(--sheet-dur-in) ease;
}

.sheet.is-visible .sheet-backdrop { opacity: 1; }

/* ---------------------------------------------------------------------------
   Painel
   --------------------------------------------------------------------------- */
.sheet-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--sheet-max-w);
    max-height: var(--sheet-max-h-desk);
    background: var(--sheet-bg);
    border-radius: var(--sheet-radius-desk);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
    overflow: hidden;
    /* No desktop o painel entra com um fade+scale curto; no mobile o transform
       é reservado para o arraste, então a regra é sobrescrita lá embaixo. */
    opacity: 0;
    transform: scale(.97);
    transition: opacity .18s ease, transform .18s ease;
}

.sheet.is-visible .sheet-panel {
    opacity: 1;
    transform: scale(1);
}

/* ---------------------------------------------------------------------------
   Pill de arraste — só existe no mobile
   --------------------------------------------------------------------------- */
.sheet-grip {
    display: none;
    flex-shrink: 0;
    padding: 10px 0 2px;
    /* Sem isto o browser tenta rolar a página no lugar de arrastar a folha. */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: grab;
}

.sheet-grip::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    margin: 0 auto;
    border-radius: 999px;
    background: var(--sheet-grip-color);
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */
.sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sheet-hairline);
    background: var(--sheet-bg-raised);
}

.sheet-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--sheet-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Header com o título centrado: use junto de .sheet-head. O espaçador do lado
   esquerdo mantém a simetria sem posicionamento absoluto. */
.sheet-head--center .sheet-title { flex: 1; text-align: center; }
.sheet-head--center .sheet-spacer { width: 30px; flex-shrink: 0; }

.sheet-close {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: var(--c-background, #232626);
    color: var(--sheet-text-dim);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.sheet-close:hover {
    background: var(--sheet-grip-color);
    color: var(--sheet-text);
}

/* ---------------------------------------------------------------------------
   Corpo e rodapé
   --------------------------------------------------------------------------- */
.sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Impede que o scroll do sheet "vaze" para a página atrás dele. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px 18px;
}

.sheet-body::-webkit-scrollbar { width: 4px; }
.sheet-body::-webkit-scrollbar-track { background: transparent; }
.sheet-body::-webkit-scrollbar-thumb { background: #3a3d45; border-radius: 4px; }
.sheet-body::-webkit-scrollbar-thumb:hover { background: #55585f; }

.sheet-foot {
    flex-shrink: 0;
    padding: 12px 18px;
    border-top: 1px solid var(--sheet-hairline);
    background: var(--sheet-bg);
}

/* Botão padrão de rodapé — a ação principal do sheet. */
.sheet-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 11px;
    background: var(--c-primary, #f12a4a);
    color: var(--c-on-primary, #fff);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s ease;
}

.sheet-btn:hover:not(:disabled) { filter: brightness(1.08); }

.sheet-btn:disabled {
    background: #3b3d42;
    color: #8f95a3;
    cursor: not-allowed;
}

/* Ação em andamento: continua desabilitado, mas o cursor diz "aguarde", não
   "não pode". */
.sheet-btn.is-busy:disabled { cursor: wait; }

.sheet-btn--quiet {
    background: var(--sheet-bg-raised);
    color: var(--sheet-text);
}

.sheet-btn--quiet:hover:not(:disabled) { background: var(--sheet-grip-color); }

/* Ação concluída ("✓ Creditado"). Verde é o único lugar onde a folha foge do
   primary do tema, porque aqui a cor significa resultado, não marca. */
.sheet-btn--ok,
.sheet-btn--ok:disabled {
    background: #22c55e;
    color: #052e12;
    cursor: default;
}

/* ---------------------------------------------------------------------------
   MOBILE — a folha propriamente dita
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {

    .sheet {
        align-items: flex-end;
        padding: 0;
    }

    .sheet-panel {
        max-width: 100%;
        max-height: var(--sheet-max-h);
        border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
        box-shadow: 0 -14px 44px rgba(0, 0, 0, .6);

        /* Aqui o transform é a posição da folha, não um efeito de entrada. */
        opacity: 1;
        transform: translate3d(0, 100%, 0);
        transition: transform var(--sheet-dur-in) var(--sheet-ease);

        /* O rodapé encosta na barra de gestos do aparelho sem o inset. */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .sheet.is-visible .sheet-panel { transform: translate3d(0, 0, 0); }

    /* Enquanto o dedo está na tela o painel segue o toque: qualquer transição
       aqui vira lag. O JS devolve a transição no touchend. */
    .sheet.is-dragging .sheet-panel { transition: none; }
    .sheet.is-dragging .sheet-backdrop { transition: none; }

    .sheet-grip { display: block; }

    /* A pill e o arraste substituem o X. Deixar os dois é ruído. */
    .sheet-close { display: none; }

    /* Header sem cor diferenciada: no mobile a folha é uma superfície só.
       E sem o X sobra só o título — centrado sob uma pill centrada é o
       alinhamento natural. */
    .sheet-head {
        background: transparent;
        padding: 4px 18px 12px;
        justify-content: center;
    }

    /* O spacer TEM de sumir junto com o botão: ele existe só para
       contrabalançar a largura do X, e sozinho empurrava o título para a
       direita pela largura que o botão ocuparia. */
    .sheet-spacer { display: none; }

    .sheet-title {
        flex: 1;
        min-width: 0;
        text-align: center;
    }

    /* O header inteiro é área de arraste. */
    .sheet-head,
    .sheet-grip { touch-action: none; }

    .sheet-foot {
        padding-bottom: 12px;
    }

    /* Folha alta: para conteúdo que sempre ocupa a tela (chat, histórico,
       listas longas). Sem isto o painel encolhe junto com o conteúdo. */
    .sheet--tall .sheet-panel { height: var(--sheet-max-h); }

    /* Folha curta: confirmações e escolhas rápidas. */
    .sheet--compact .sheet-panel { max-height: 60dvh; }
}

/* ---------------------------------------------------------------------------
   Variante "embedded" — modais dos jogos
   ---------------------------------------------------------------------------
   No desktop estes não cobrem a janela: ficam ancorados à área visual do jogo
   (o wrapper de 1284px), senão um modal de histórico apareceria centrado na
   tela enquanto o jogo está encostado num canto. No mobile são folhas normais,
   e por isso ficam fixed de novo.
   --------------------------------------------------------------------------- */
@media (min-width: 769px) {
    .sheet--embedded { position: absolute; }
}

/* ---------------------------------------------------------------------------
   Acessibilidade
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sheet-panel,
    .sheet-backdrop {
        transition-duration: .01ms !important;
    }
}

/* Trava de scroll do fundo. O JS cuida do top/scrollY; a classe existe para
   que outras folhas de estilo tenham um gancho. */
body.sheet-lock {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}