/*
 * 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:         68vh;
    --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);
}

/* A borda branca fina que aparecia no topo de toda folha era o anel de foco do
   Chrome. O sheet.js põe tabindex="-1" no painel e foca ele ao abrir (para o
   Tab ficar preso na folha e para não abrir o teclado do celular num input); o
   anel padrão acompanha o border-radius e, sobre fundo escuro, sai branco. No
   mobile, com o resto do painel fora da tela, virava literalmente um traço no
   topo. Tirar daqui não custa acessibilidade: o painel não é um controle, é só
   o alvo do foco, e cada botão dentro dele mantém o próprio anel. */
.sheet-panel:focus,
.sheet-panel:focus-visible {
    outline: none;
}

/* ---------------------------------------------------------------------------
   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 com altura proporcional (metade da tela ou pouco acima)
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {

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

    .sheet-panel {
        max-width: 100%;
        height: auto;
        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: max(16px, env(safe-area-inset-bottom, 16px));
    }

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

    .sheet.is-dragging .sheet-panel { transition: none; }
    .sheet.is-dragging .sheet-backdrop { transition: none; }

    .sheet-grip { 
        display: block; 
        padding: 10px 0 6px;
        cursor: pointer;
    }

    /* A pill e o arraste substituem o X no mobile como no exemple-file */
    .sheet-close { 
        display: none !important; 
    }

    /* Header sem cor diferenciada: no mobile a folha é uma superfície só, sem a barra/navbar do desktop */
    .sheet-head {
        background: transparent !important;
        border-bottom: none !important;
        padding: 4px 18px 12px !important;
        justify-content: center !important;
    }

    .sheet-spacer { 
        display: none !important; 
    }

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

    .sheet-head,
    .sheet-grip { touch-action: pan-y; }

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

    /* Folha alta: até ~70vh */
    .sheet--tall .sheet-panel { max-height: 72vh; }

    /* Folha curta: ~50vh */
    .sheet--compact .sheet-panel { max-height: 52vh; }
}

/* ---------------------------------------------------------------------------
   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; }
}

/* ---------------------------------------------------------------------------
   Variante "anchored" — dropdown preso a um botão do navbar
   ---------------------------------------------------------------------------
   No mobile é bottom sheet como qualquer outra; a partir de 1024px vira um
   dropdown que nasce embaixo do ícone. Só a POSIÇÃO muda: abertura, fechamento,
   clique fora, Escape e trava de scroll continuam sendo do motor.

   As coordenadas vêm do anchor() em sheet.js, que mede o botão apontado por
   data-sheet-anchor. Largura própria via --sheet-anchor-w.
   --------------------------------------------------------------------------- */
@media (min-width: 769px) {
    .sheet--anchored {
        padding: 0;
        pointer-events: none;
    }

    /* Sem escurecer a página: um dropdown que apaga o site atrás dele mente
       sobre o próprio peso. O backdrop continua existindo para capturar o
       clique fora. */
    .sheet--anchored .sheet-backdrop {
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        pointer-events: auto;
    }

    .sheet--anchored .sheet-panel {
        position: absolute;
        top: var(--sheet-anchor-top, 64px);
        right: var(--sheet-anchor-right, 16px);
        width: var(--sheet-anchor-w, 400px);
        max-width: var(--sheet-anchor-w, 400px);
        max-height: min(560px, calc(100vh - var(--sheet-anchor-top, 64px) - 24px));
        border: 1px solid var(--sheet-hairline);
        transform-origin: top right;
        pointer-events: auto;
    }
}

/* ---------------------------------------------------------------------------
   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;
}

/* ---------------------------------------------------------------------------
   Painel de notificações (fiel ao exemple-files/partials/notifications-panel.blade.php)
   --------------------------------------------------------------------------- */
#notifications-panel { --sheet-anchor-w: 400px; }

/* Abas */
.nt-tabs {
    flex-shrink: 0;
    display: flex;
    gap: 4px;
    padding: 10px 14px 0;
}

.nt-tab {
    flex: 1;
    padding: 8px 6px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--sheet-text-dim, #a0a5b5);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.nt-tab:hover { color: #fff; }

.nt-tab.is-active {
    background: var(--sheet-bg-raised, #323738);
    color: #fff;
}

.nt-body { padding: 12px 14px; }

.nt-loading { display: flex; justify-content: center; padding: 40px 0; }
.nt-loading[hidden] { display: none; }

.nt-spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid var(--sheet-grip-color, #4a5354);
    border-top-color: var(--c-primary, #00E701);
    animation: nt-spin .7s linear infinite;
}

@keyframes nt-spin { to { transform: rotate(360deg); } }

/* Lista */
.nt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nt-list[hidden] { display: none; }

.nt-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 12px 11px 13px;
    border-radius: 12px;
    background: var(--sheet-bg-raised, #323738);
    transition: background .15s ease;
    cursor: pointer;
}

.nt-card:hover { background: #3a4142; }

.nt-card--unread {
    background: linear-gradient(rgba(var(--c-primary-rgb, 0, 231, 1), .06),
                                rgba(var(--c-primary-rgb, 0, 231, 1), .06)),
                var(--sheet-bg-raised, #323738);
}

.nt-card--unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    bottom: 11px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--c-primary, #00E701);
}

.nt-thumb {
    flex-shrink: 0;
    width: 62px;
    height: 47px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
    background: var(--sheet-bg, #292d2e);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.nt-content { min-width: 0; flex: 1; }

.nt-card-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}

.nt-cat {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sheet-text-dim, #a0a5b5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nt-date { font-size: 10.5px; color: var(--sheet-text-dim, #a0a5b5); flex-shrink: 0; }

.nt-title {
    margin: 0 0 2px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--sheet-text, #ffffff);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nt-text {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--sheet-text-dim, #a0a5b5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nt-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--c-primary, #00E701);
    text-decoration: none;
}

.nt-link:hover { filter: brightness(1.2); }

/* Vazio */
.nt-empty { text-align: center; padding: 34px 12px; }
.nt-empty[hidden] { display: none; }

.nt-empty-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    display: block;
    color: var(--sheet-grip-color, #4a5354);
}

.nt-empty-title {
    margin: 0 0 5px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sheet-text, #ffffff);
}

.nt-empty-text {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--sheet-text-dim, #a0a5b5);
}

/* Rodapé */
.nt-foot { text-align: center; padding: 12px 18px; }
.nt-foot[hidden] { display: none; }

.nt-readall {
    border: none;
    background: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--sheet-text-dim, #a0a5b5);
    cursor: pointer;
}

.nt-readall:hover { color: #fff; }

/* Badge no navbar */
.nav-action-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    background: var(--c-primary, #00E701);
    color: var(--c-on-primary, #000);
    box-shadow: 0 0 0 2px var(--sheet-bg, #292d2e);
}