/* ==========================================================================
   UNO — camada de estilo sobre o Huly (v0.7.426)
   Injetado pelo nginx (sub_filter), no fim do <head>. Nao altera o app.
   Marca: obsidian/conteudo/calendario-web-t3.html (#0b0b0d / #ff7a1a / #ffb061)

   DUAS PEGADINHAS (as duas confirmadas na pratica, medindo no app):
   1) as cores de botao NAO estao em :root, estao num seletor `*`
      (packages/theme/styles/_colors.scss @v0.7.426). Como `*` casa com todo
      elemento, declaracao direta vence heranca -> `:root {...}` NAO funciona.
   2) `* {...}` tambem NAO funciona: o Huly nao serve arquivo .css, ele injeta
      <style> via JS em runtime, DEPOIS do nosso <link>. Empate de
      especificidade -> quem vem por ultimo ganha, e e o Huly.
      Solucao: `html *` tem especificidade (0,0,1) contra (0,0,0) do `*`,
      entao vence independente da ordem de carga.
   Ja as --theme-* vivem em .theme-dark/.theme-light no <html> e herdam normal.

   Se um update renomear classe, o pior caso e o estilo parar de aplicar
   (app volta ao visual original). Nao quebra funcionalidade.
   ========================================================================== */

/* --- 1. MARCA: azul #205DC2 do Huly -> laranja UNO ----------------------- */
/* precisa ser `html *`, nao `:root` nem `*` (ver cabecalho) */
html * {
  --primary-button-default: #ff7a1a;
  --primary-button-hovered: #ffb061;
  --primary-button-pressed: #e86a0f;
  --primary-button-focused: #ff7a1a;
  --primary-button-outline: rgba(255, 122, 26, .45);
  --theme-toggle-on-bg-color: #ff7a1a;
  --global-accent-BackgroundColor: #ff7a1a;
  --global-focus-BorderColor: #ff7a1a;
}

/* --theme-* herdam do <html>: sobrescreve por tema */
html.theme-dark {
  --theme-link-color: #ff9c4d;
}
html.theme-light {
  --theme-link-color: #d1620c; /* laranja escurecido: contraste AA em fundo claro */
}

/* --- 2. TELA ESTREITA: abaixo de 640px. Desktop intacto. -----------------
   IMPORTANTE, custou retrabalho: o Huly tem DOIS layouts diferentes e a
   largura da janela NAO decide qual roda.
     a) navegador de desktop com janela estreita -> layout de desktop
        espremido: trilho vertical de icones + nav flutuante.
     b) CELULAR DE VERDADE -> #ui-root ganha .mobile-theme (via
        checkMobile() lendo o user-agent, packages/ui/src/utils.ts):
        sem trilho lateral, barra inferior, conteudo em largura cheia.
   Emular so a largura no navegador NAO ativa (b). Pra testar como o celular
   ve, tem que sobrescrever o user-agent (CDP Emulation.setUserAgentOverride).
   Medido no (b) real: so 3 de 38 alvos abaixo de 44px, sem overflow — ou
   seja, o layout nativo de celular ja e bem melhor que o (a).
   As regras 2.1-2.3 abaixo praticamente nao pegam em (b) (os elementos nem
   existem la); ficam por causa de (a), que e o que o time ve se abrir no
   navegador do PC com a janela estreita.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {

  /* 2.1 Espaco: mata o 2o trilho, afina o 1o. So existe no layout (a).
     Medido: conteudo 265px -> 338px (+27,5%), sem overflow.
     Quem prende e o min-width; a var --app-panel-width nao funciona. */
  #sidebar.sidebar-container.mini {
    display: none !important;
  }
  .antiPanel-application.vertical:not(#sidebar) {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
  }

  /* 2.2 Alvos de toque: minimo 44px (Apple HIG / 48dp Material).
     Medido: 50 de 53 abaixo disso; pior caso 16x8px. */
  .hulyNavItem-container {
    min-height: 44px !important;
  }
  .app.large,
  .app.medium,
  .app.small {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .antiButton.statusButton,
  .antiButton.square {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .hulyButton.extra-small.type-button-icon.iconOnly,
  .hulyButton.small.type-button-icon.iconOnly {
    min-width: 40px !important;
    min-height: 40px !important;
  }
  .updown-up,
  .updown-down {
    min-width: 32px !important;
    min-height: 24px !important;
  }

  /* 2.3 Chevrons de pasta: eram 12x12 (1/4 do minimo).
     padding cresce a area de toque sem inchar o icone. */
  .hulyNavItem-chevron {
    width: 28px !important;
    height: 28px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
  }
  .hulyNavGroup-header__chevron {
    width: 32px !important;
    height: 32px !important;
    padding: 6px !important;
    box-sizing: border-box !important;
  }

  /* 2.4 Cabecalho: vazava 38px pra fora da viewport de 390. */
  .hulyHeader-container.doubleRow {
    flex-wrap: wrap !important;
    height: auto !important;
  }
  .switcher-container.subtle {
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
  .hulyHeader-buttonsGroup.extra.overflow {
    flex-wrap: wrap !important;
  }

  /* 2.5 Menu (nav) aberto — navegador de janela estreita (SEM mobile-theme).
     Aqui existe o trilho de icones, entao o menu senta ao lado dele.
     ATENCAO, aprendido na dor: o nav e painel flutuante (.fly, position:fixed)
     com `left` fixo em 68px = largura ORIGINAL do trilho. Como encolhemos o
     trilho pra 52px (2.1), o left ficou defasado. E `width:100%` e armadilha:
     100% do PAI, mas posicionado em left:68 -> vazava 68px pra fora (medido).
     Casa o left com o trilho e deriva a largura de 100vw. O min-width nativo
     e 280px: zeramos pra nao estourar em tela estreita (320-52=268 < 280). */
  .antiPanel-navigator.fly {
    left: 52px !important;
    width: calc(100vw - 52px) !important;
    max-width: calc(100vw - 52px) !important;
    min-width: 0 !important;
  }

  /* 2.5b CELULAR DE VERDADE (#ui-root.mobile-theme, ligado por UA sniffing).
     Layout totalmente diferente: NAO ha trilho lateral, ha barra inferior.
     Logo o menu tem que ir de ponta a ponta — a regra 2.5 deixaria 52px
     de faixa morta a esquerda (medido: 334px em vez de 390px).
     Vem depois de 2.5 de proposito: mesma especificidade + ordem = esta ganha
     quando .mobile-theme existe. */
  #ui-root.mobile-theme .antiPanel-navigator.fly {
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* 2.5b-2 O QUE REALMENTE CONSERTOU O MENU: esconder no celular os subitens
     que so fazem sentido no desktop.
     Cada projeto oferece 4 subitens: Problemas, Componentes, Objetivos,
     Modelos. Ninguem gerencia Componentes/Objetivos/Modelos pelo celular —
     e planejamento, trabalho de tela grande. Com 5 projetos isso e 15 linhas
     inuteis de 24.
     Medido: 24 -> 9 itens, 1446px -> 786px, 47% -> 87% visivel.
     O seletor mira o HREF (a rota real), nao posicao (nth-child seria fragil).
     ATENCAO na estrutura: o item e um <button> DENTRO de um <a> — mirar o
     <a> pai, nao o .hulyNavItem-container (perdi uma tentativa nisso).
     TRADEOFF EXPLICITO: essas 3 telas ficam inacessiveis pelo celular. Quem
     precisar usa o desktop. Pra reverter, apaga este bloco. */
  #ui-root.mobile-theme .hulyNavGroup-content a[href$="/components"],
  #ui-root.mobile-theme .hulyNavGroup-content a[href$="/milestones"],
  #ui-root.mobile-theme .hulyNavGroup-content a[href$="/templates"] {
    display: none !important;
  }

  /* 2.5c Espaco vertical do menu no celular.
     Medido: o menu tem 706px, mas a area que ROLA tinha so 531px pra 1402px
     de conteudo (38% visivel). 175px iam pra "cromo": 68px de cabecalho +
     60px de rodape + 32px do subheader.
     - rodape ("Ajuda e Suporte" + versao): escondido. O atalho de ajuda (?)
       continua na barra inferior, entao nao se perde acesso.
     - cabecalho: 68 -> 44px (o titulo repete o app em que voce ja esta).
     Resultado medido: area de scroll 531 -> 616px (38% -> 44% visivel).
     O resto e estrutura do app: 3 projetos x 4 subitens = 12 linhas repetidas.
     Colapsar grupo por padrao seria estado do app, nao CSS. */
  #ui-root.mobile-theme .antiNav-footer,
  #ui-root.mobile-theme .antiNav-footer-line {
    display: none !important;
  }
  #ui-root.mobile-theme .hulyNavPanel-header {
    height: 44px !important;
    min-height: 44px !important;
  }

  /* 2.5d Recupera os 68px mortos embaixo (a barra de apps fica atras do menu
     e nao e clicavel enquanto ele esta aberto, entao era tela desperdicada).
     Medido: 43,9% -> 48,8% de densidade, +2 linhas.
     NAO usar `top:0; height:100dvh`: da 53,8% mas o conteudo passa por cima
     do botao de fechar e o menu fica sem saida (testado). */
  #ui-root.mobile-theme .antiPanel-navigator.fly {
    height: calc(100dvh - 70px) !important;
  }

  /* 2.5e Contraste dos titulos de grupo (= nomes dos projetos).
     Medido: rgb(123,135,158) sobre rgb(251,251,252) = 3,5:1 -> REPROVA
     o minimo AA de 4,5:1 da WCAG, justo no texto de navegacao.
     #5e687c mede 5,42:1 -> passa. */
  #ui-root.mobile-theme .hulyNavGroup-header__label {
    color: #5e687c !important;
  }

  /* 2.5f Alvos de toque que sobraram no menu (8 de 33 abaixo de 44px). */
  #ui-root.mobile-theme .hulyNavGroup-header__chevron {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  #ui-root.mobile-theme .hulyNavGroup-header {
    min-height: 44px !important;
  }
  #ui-root.mobile-theme .antiNav-subheader button {
    min-height: 44px !important;
  }

  /* 2.5g Feedback de toque: o app so tem :hover, que nao existe em touch.
     Sem isso, cada toque parece que "nao pegou" ate a tela trocar. */
  #ui-root.mobile-theme .hulyNavItem-container:active,
  #ui-root.mobile-theme .hulyNavGroup-header:active {
    background-color: rgba(0, 0, 0, .09) !important;
  }

  /* 2.5h BUG DO HULY: no app Escritorio (/love) o botao de menu aparece, mas
     esse app NAO TEM navigator. Resultado: toca no menu e a tela inteira
     congela atras de um `.cover` invisivel (390x844, rgba(0,0,0,0), z-index
     10, pointer-events auto) sem nenhuma pista visual. Pra quem nao e tecnico
     isso le como "o sistema quebrou".
     O :has() mira SO o caso sem navigator, preservando o fechar-tocando-fora
     nos apps que tem menu. Verificado: /love destrava, tracker mantem o
     fechar tocando fora. :has() e suportado desde Safari 15.4 / Chrome 105;
     em navegador antigo a regra e ignorada e volta ao comportamento atual. */
  #ui-root.mobile-theme:not(:has(.antiPanel-navigator)) .cover.shown {
    pointer-events: none !important;
  }

  /* 2.6 Rotulos do menu: 14px e apertado pra leitura no celular. */
  .hulyNavItem-label,
  .hulyNavGroup-header__label {
    font-size: 15px !important;
  }

  /* 2.7 iOS: input < 16px faz o Safari dar zoom sozinho ao focar. */
  input,
  textarea,
  select,
  .antiEditBox input {
    font-size: 16px !important;
  }

  /* 2.7 Remove o atraso de 300ms no toque. */
  button,
  a,
  .hulyNavItem-container,
  [role="button"] {
    touch-action: manipulation;
  }
}

/* --- 3. PWA instalado: respeita notch/ilha e barra de gestos ------------- */
@media (display-mode: standalone) {
  .antiPanel-application.vertical {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  .hulyHeader-container {
    padding-top: env(safe-area-inset-top) !important;
  }
}

/* --- 4. Acessibilidade: respeita quem pediu menos animacao --------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
