/* TV Coiote Play — Atalhos do Painel e ajustes de interface
 * Release: 2026.09.20-atalhos.3
 * ATENCAO: esta e a FONTE. plugin/build-atalhos.ps1 copia este arquivo para o Web/ do plugin.
 *
 * Tres coisas, todas pedidas pelo dono:
 *   1. esconder do MENU do Painel as entradas que ele nao quer ver la (Reports e Playback Reporting; os plugins
 *      continuam inteiros na aba Plugins - quem marca a entrada e o tvc-atalhos.js);
 *   2. arrumar a ficha quando a JANELA e estreita no computador;
 *   3. Audiolivros com o mesmo sumico do menu de ordenacao que a TV Coiote Noticias ja tem.
 *
 * Mora neste plugin (e nao no tema) porque o tema vive dentro da imagem do contêiner e se perde a cada imagem
 * nova; o plugin fica no disco da VM e sobrevive.
 */

/* 1) entradas marcadas pelo tvc-atalhos.js somem do menu do Painel */
a.tvca-fora,
a.tvca-fora + .listItem-separator {
  display: none !important;
}

/* 2) FICHA EM JANELA ESTREITA (computador). Dono: "no mobile, o poster fica em cima, o titulo embaixo, e os botoes
   embaixo dele - mas no computador, quando vc espreme o navegador esse ajuste nao ocorre".

   Medido numa copia fiel da pagina (HTML real do pacote do jellyfin-web + CSS nativo + tema), janela de 500 px,
   html.layout-desktop:
     .detailImageContainer (capa larga) -> 500x0  : altura ZERO, porque o cartao dentro dela tem float: left
     .card                              -> 125x188: flutuando, cai por cima do texto e dos botoes
     .detailRibbon                      -> display: flex
     .infoWrapper                       -> width 0: como item de flex sem base, COLAPSA (o titulo some)
     .mainDetailButtons                 -> 507 px numa tela de 500: estoura a largura

   Por isso: tirar o float, virar a faixa em bloco e deixar os botoes quebrarem linha. Tudo preso a
   html:not(.layout-mobile) - no celular de verdade quem aparece e a OUTRA capa (.hide-desktop), que nao e tocada. */
@media (max-width: 800px) {
  html:not(.layout-mobile) #itemDetailPage .detailPagePrimaryContainer > .detailImageContainer {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0.6rem auto 0.9rem !important;
  }

  html:not(.layout-mobile) #itemDetailPage .detailPagePrimaryContainer > .detailImageContainer > * {
    float: none !important;
    position: relative !important;
    inset: auto !important;
    width: clamp(150px, 46vw, 210px) !important;
    max-width: 210px !important;
    max-height: none !important;
    margin: 0 auto !important;
    filter: none !important;
  }

  /* o banner vazio (40vh) e o recuo negativo da faixa existem para o desenho largo; numa janela estreita eles so
     empurram tudo para baixo e fazem o texto subir por cima da capa (medido: faixa comecava 101 px antes do fim
     dela). No celular o tema ja esconde o banner - aqui fica igual. */
  html:not(.layout-mobile) #itemDetailPage #itemBackdrop {
    display: none !important;
  }

  /* a faixa vira bloco e fica com a MARGEM LATERAL da plataforma (o recuo antigo reservava ~300 px para a capa
     flutuante; zerar de vez colava o titulo na borda - dono, foto de 2026-09-20 02:50) */
  html:not(.layout-mobile) #itemDetailPage .detailRibbon {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding-left: var(--coiote-page-gutter, 3.3%) !important;
    padding-right: var(--coiote-page-gutter, 3.3%) !important;
  }

  html:not(.layout-mobile) #itemDetailPage .detailRibbon > .infoWrapper,
  html:not(.layout-mobile) #itemDetailPage .detailRibbon > .mainDetailButtons {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* titulo, dados e botoes centralizados sobre a capa - o mesmo que o Jellyfin ja faz no celular. Dono:
     "a questao e que o titulo nao centraliza nesse meio termo em cima dos botoes", "faca isso sem gambiarra".
     Nao e invencao minha: e a regra NATIVA do jellyfin-web (main.jellyfin.css), que vale so com a classe
     .layout-mobile no <html>:
       .layout-mobile .itemName, .layout-mobile .itemMiscInfo, .layout-mobile .mainDetailButtons
         { align-items: center; justify-content: center; text-align: center; }
     Aqui ela vale para a janela estreita do computador, onde o <html> e .layout-desktop. Presa dentro de
     #itemDetailPage: nao encosta no menu superior nem em nenhuma outra pagina, e nao precisa de !important
     (o seletor ja e mais especifico que o nativo). A sinopse e a tabela de detalhes NAO entram, como no
     celular: elas continuam alinhadas a esquerda. */
  html:not(.layout-mobile) #itemDetailPage :is(.itemName, .itemMiscInfo, .mainDetailButtons) {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* isto sim e meu: numa janela estreita os botoes precisam poder quebrar linha (o alinhamento vem da regra
     nativa copiada acima) */
  html:not(.layout-mobile) #itemDetailPage .mainDetailButtons {
    flex-wrap: wrap !important;
  }

  /* a sinopse e a tabela de detalhes tambem. Dono: "NAO TA CERTA, OLHA A CENTRALIZACAO DA SINOPSE, OLHA O TITULO
     ENCOSTADO NA ESQUERDA". Medido na pagina de verdade (janela de 780 px, html.layout-desktop):
       .nameContainer / .mainDetailButtons -> x=25  (a margem da plataforma, ja arrumada acima)
       .overview / .detailSection          -> x=253 (228 px a mais - e dai a sinopse "centralizada")
     O recuo vem de uma regra NATIVA do jellyfin-web: [dir=ltr] .detailPagePrimaryContent { padding-left: 32.45vw }.
     Esses 32,45vw sao o vao reservado para a capa flutuante do desenho largo; aqui a capa ja subiu para o topo e
     o vao so desalinha. Trocando pelo gutter da plataforma, os quatro blocos ficam na mesma linha de partida
     (medido depois: titulo, botoes, sinopse e detalhes todos em x=25, sem a capa encostar no texto). */
  html:not(.layout-mobile) #itemDetailPage .detailPagePrimaryContent {
    padding-left: var(--coiote-page-gutter, 3.3%) !important;
  }
}

/* 3) AUDIOLIVROS: mesmo sumico do botao/menu de ordenacao que a TV Coiote Noticias tem no tema (o tema cobre
   93a59b90, 4a8707f7 e 110176fc; aqui vai so aa55a3fc). O filtro continua inteiro - Audiolivros MANTEM Generos,
   que e a unica diferenca que o dono quer em relacao a Noticias. */
body:has(
    header a[href*="parentId=aa55a3fc03cd81a8cc80d37178496464"],
    a.MuiListItemButton-root.Mui-selected[href*="topParentId=aa55a3fc03cd81a8cc80d37178496464"],
    a.navMenuOption-selected[data-itemid="aa55a3fc03cd81a8cc80d37178496464"]
  )
  :is(button[title="Ordenar"], button:has(svg[data-testid="SortByAlphaIcon"]), #sort-popover) {
  display: none !important;
}

/* 4) AUDIOLIVROS, a diferenca de verdade: o botao "Pastas". Medido nas duas bibliotecas com a mesma janela (411 px):
     TV Coiote Noticias -> barra 411x64: chip "1-100 de 4.133" (104x32) e os controles (136x30) na MESMA linha
     Audiolivros        -> barra 411x84: botao "Pastas" (114x42) + chip, e os controles caindo para a linha de baixo
   O botao "Pastas" so existe onde a biblioteca tem subpastas; e ele que ocupa a primeira linha e empurra o contador.
   Escondendo ele, a barra de Audiolivros fica com o mesmo arranjo da Noticias (contador a direita, filtro e setas na
   mesma linha). O filtro continua inteiro: Audiolivros MANTEM Generos. */
body:has(
    header a[href*="parentId=aa55a3fc03cd81a8cc80d37178496464"],
    a.MuiListItemButton-root.Mui-selected[href*="topParentId=aa55a3fc03cd81a8cc80d37178496464"],
    a.navMenuOption-selected[data-itemid="aa55a3fc03cd81a8cc80d37178496464"]
  )
  :is(button[aria-controls="library-view-menu"], #library-view-menu) {
  display: none !important;
}

/* 4b) O POSTER DO RADAR NAO PISCA MAIS AO SAIR. Dono (2026-09-20): "na hora que sai do radar de noticias pra outra
   biblioteca, o poster dele pisca embaixo da tela, isso n pode acontecer".

   Medido na pagina de verdade: a biblioteca do radar tem UM item (o proprio aplicativo) e o cartao dele fica na
   lista, vivo, em y=48; por cima dele o cliente do radar abre #tvcPoliticoView, que e position: fixed com
   z-index 998 e cobre a tela. Enquanto o app esta montado ninguem ve o cartao - mas ele continua ali embaixo, e
   basta o app sair um instante antes de a pagina trocar para o poster aparecer.

   A correcao tira o cartao da lista da biblioteca, que e o unico lugar onde ele nao serve para nada (a pagina
   inteira e o app). O escopo e o proprio container da lista, que carrega o id da BIBLIOTECA em data-parentid
   (14a29cd3 = Radar de Noticias, 00172e3d = Futebol Radar) - medido no ar. Assim nao depende do id do item nem
   da pagina: na Home, na busca e em qualquer outra biblioteca os cartoes dos radares continuam iguais.

   Cuidado que custou uma publicacao: a lista que fica por baixo do app e a da pagina ANTIGA do Jellyfin (uma
   .page sem id), nao a #musicvideos do React - por isso o seletor nao pode se prender ao id da pagina. */
.itemsContainer[data-parentid="14a29cd3e5373e4af90b683d9d6d587d"] > .card,
.itemsContainer[data-parentid="00172e3d69e3f2e051c3687b2af502ab"] > .card {
  display: none !important;
}

/* 5) AUDIOLIVROS com a MESMA barra da TV Coiote Noticias. Dono: "e pra arrastar a merda do numero pra baixo e a
   bosta do filtro e setas pra esquerda", "o que custa achar a solucao que foi colocada na biblioteca tv coiote e
   aplicar".

   Achei: a solucao esta no TEMA (branding.css), num @media (max-width: 899px) que cobre a TV Coiote Noticias
   (93a59b90) e os Filmes Atuais (4a8707f7) - e SO essas duas. O que ela faz na segunda barra do cabecalho:
     .MuiToolbar-root:nth-of-type(2)                 -> flex-wrap: nowrap (contador e controles na MESMA linha)
     > .MuiBox-root   (o contador)                   -> order 2 e margin-left auto  -> desce para a linha e vai a direita
     > .MuiStack-root (filtro, grade, setas)         -> order 1 e justify-content: flex-start -> vai para a esquerda
   E o mesmo arranjo, palavra por palavra, so trocando o id da biblioteca por aa55a3fc (Audiolivros). Fica aqui e nao
   no tema porque o tema se perde a cada imagem nova do conteiner; o plugin fica no disco da VM.

   Conferido no DOM real das duas bibliotecas (o dono mandou as duas paginas): a estrutura e identica, muda so o
   conteudo (Audiolivros nao tem "Reproduzir Tudo" nem "Ordenar"). Por isso a mesma regra serve. */
@media (max-width: 899px) {
  body:has(header a[href*="parentId=aa55a3fc03cd81a8cc80d37178496464"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2),
  body:has(a.MuiListItemButton-root.Mui-selected[href*="topParentId=aa55a3fc03cd81a8cc80d37178496464"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2),
  body:has(a.navMenuOption-selected[data-itemid="aa55a3fc03cd81a8cc80d37178496464"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding-block: 8px !important;
  }

  body:has(header a[href*="parentId=aa55a3fc03cd81a8cc80d37178496464"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiBox-root,
  body:has(a.MuiListItemButton-root.Mui-selected[href*="topParentId=aa55a3fc03cd81a8cc80d37178496464"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiBox-root,
  body:has(a.navMenuOption-selected[data-itemid="aa55a3fc03cd81a8cc80d37178496464"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiBox-root {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin: 0 0 0 auto !important;
  }

  body:has(header a[href*="parentId=aa55a3fc03cd81a8cc80d37178496464"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiStack-root,
  body:has(a.MuiListItemButton-root.Mui-selected[href*="topParentId=aa55a3fc03cd81a8cc80d37178496464"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiStack-root,
  body:has(a.navMenuOption-selected[data-itemid="aa55a3fc03cd81a8cc80d37178496464"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiStack-root {
    order: 1 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin-block: 0 !important;
    justify-content: flex-start !important;
  }

  body:has(header a[href*="parentId=aa55a3fc03cd81a8cc80d37178496464"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiStack-root > .MuiBox-root,
  body:has(a.MuiListItemButton-root.Mui-selected[href*="topParentId=aa55a3fc03cd81a8cc80d37178496464"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiStack-root > .MuiBox-root,
  body:has(a.navMenuOption-selected[data-itemid="aa55a3fc03cd81a8cc80d37178496464"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiStack-root > .MuiBox-root {
    flex-grow: 0 !important;
  }
}