/* =====================================================================
   PILARES V2 — EXPERIÊNCIA COMPLETA (FASE 2)
   ---------------------------------------------------------------------
   Escopo ESTRITO sob #pilares-view. A maior parte da estilização é feita
   por estilos inline nos componentes (fidelidade 1:1 ao design); este
   arquivo provê tokens, tipografia base, animações, responsividade e RTL.
   • Sem seletores de tag globais. Sem alterações em :root.
   • Não afeta Home nem outras rotas.
   ===================================================================== */

/* Tokens locais — aplicados ao wrapper das vistas E ao painel de fase
   (o painel é irmão fixo do wrapper, precisa herdar os tokens). */
#pilares-view .thp-pilares,
#pilares-view .thp-phase-panel,
#pilares-view .thp-phase-overlay {
  --thp-navy:  #0A141D;
  --thp-gold:  #E6B82E;
  --thp-mono:  'IBM Plex Mono', monospace;
  --thp-sans:  'Archivo', sans-serif;
  --thp-serif: 'Instrument Serif', serif;
}
body[dir="rtl"] #pilares-view .thp-pilares,
body[dir="rtl"] #pilares-view .thp-phase-panel { --thp-sans: 'Noto Sans Arabic', sans-serif; }

#pilares-view .thp-pilares {
  color: #E9ECEA;
  font-family: var(--thp-sans);
  background: var(--thp-navy);
  padding-bottom: 8px;
}
#pilares-view .thp-phase-panel { color: #E9ECEA; font-family: var(--thp-sans); }

/* =====================================================================
   LARGURA REAL DO MÓDULO — CAUSA DO CORTE EM ZOOM 100%
   ---------------------------------------------------------------------
   #pilares-view vive dentro de .main-content, que em rotas internas é
   limitada por estilo.css a `max-width:1180px; padding:44px 32px 100px`.
   Resultado medido: o módulo recebia apenas 1116px úteis em QUALQUER
   viewport (1280, 1440, 1920 — sempre 1116). A grade da listagem foi
   desenhada para ~1440px, então ATENÇÃO era cortada, AÇÃO saía da área
   e o fundo navy do módulo terminava em 1116px, expondo a lateral.

   Enquanto a rota /pilares está ativa (body.thp-pilares-mode, aplicada e
   removida por pilares.js), a coluna central passa a usar a largura real
   da página. A classe só existe nessa rota: Home e as demais páginas
   aprovadas continuam com o comportamento original de .main-content.
   ===================================================================== */
body.thp-pilares-mode {
  --thp-gutter: clamp(16px, 3vw, 44px);
}
body.thp-pilares-mode .main-content {
  max-width: none;
  padding-left: var(--thp-gutter);
  padding-right: var(--thp-gutter);
}
/* O fundo do módulo sangra até as bordas da página (sem faixa lateral de
   outra cor), enquanto o conteúdo permanece dentro da goteira simétrica. */
body.thp-pilares-mode #pilares-view .thp-pilares {
  max-width: none;   /* precisa vencer o max-width:100% de segurança abaixo */
  margin-left: calc(-1 * var(--thp-gutter));
  margin-right: calc(-1 * var(--thp-gutter));
  padding-left: var(--thp-gutter);
  padding-right: var(--thp-gutter);
}

/* Segurança de largura e box model em todo o módulo */
#pilares-view,
#pilares-view #thp-pilares-root,
#pilares-view .thp-pilares { box-sizing: border-box; max-width: 100%; }
#pilares-view .thp-pilares *,
#pilares-view .thp-phase-panel * { box-sizing: border-box; }
#pilares-view .thp-pilares img { max-width: 100%; }
#pilares-view .thp-pilares { overflow-x: clip; }

/* Wrapper único das seções — mede a largura real disponível e é o
   elemento consultado por containerWidth() em pilares.js. */
#pilares-view .thp-pilares .thp-wrap {
  position: relative;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
}

/* ── GRADE ÚNICA DA LISTAGEM ───────────────────────────────────────────
   Cabeçalho e linhas compartilham LITERALMENTE a mesma definição: a
   grade vive aqui, nunca em style inline, então não há como divergirem.
   Sem min-width — nenhuma coluna força a tabela fora da viewport.
   ──────────────────────────────────────────────────────────────────── */
#pilares-view .thp-grid-wide,
#pilares-view .thp-grid-mid { display: grid; align-items: center; width: 100%; }

/* Desktop realmente largo (área útil ≥ 1500px): nove colunas */
#pilares-view .thp-grid-wide {
  grid-template-columns:
    minmax(0, 2.3fr)  /* PILAR       */
    minmax(0, 1.2fr)  /* FASE ATUAL  */
    minmax(0, 1.05fr) /* STATUS      */
    minmax(0, 1.4fr)  /* MATURIDADE  */
    46px              /* OBJ.        */
    52px              /* METAS       */
    minmax(0, 0.95fr) /* ATUALIZADO  */
    minmax(0, 1.1fr)  /* ATENÇÃO     */
    128px;            /* AÇÃO        */
  gap: 0 14px;
  padding-left: 18px;
  padding-right: 18px;
}

/* Desktop padrão / intermediário (960px ≤ área útil < 1500px): sete
   colunas — OBJ. e METAS agrupadas, ATUALIZADO sai da grade (vira
   metadado da primeira coluna + tooltip da linha). */
#pilares-view .thp-grid-mid {
  grid-template-columns:
    minmax(0, 2.2fr)  /* PILAR + atualização */
    minmax(0, 1.15fr) /* FASE ATUAL    */
    minmax(0, 1fr)    /* STATUS        */
    minmax(0, 1.3fr)  /* MATURIDADE    */
    minmax(0, 0.9fr)  /* OBJ. · METAS  */
    minmax(0, 1.05fr) /* ATENÇÃO       */
    116px;            /* AÇÃO          */
  gap: 0 10px;
  padding-left: 14px;
  padding-right: 14px;
}

/* Nenhuma célula transborda; a AÇÃO nunca é comprimida a zero. */
#pilares-view .thp-grid-wide > *,
#pilares-view .thp-grid-mid > * { min-width: 0; }
#pilares-view .thp-cta { white-space: nowrap; }

/* Nome do pilar completo em até duas linhas, sem reticências no meio
   da palavra e sem reduzir a tipografia a tamanho ilegível. */
#pilares-view .thp-cellname {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Cabeçalho da listagem — mesma grade, dentro da barra sticky */
#pilares-view .thp-listhead {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(233, 236, 234, .08);
  font-family: var(--thp-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: #7C8B96;
}
#pilares-view .thp-listhead > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A barra de filtros respeita a mesma largura interna da tabela e pode
   quebrar em uma segunda linha sem empurrar a listagem. */
#pilares-view .thp-filterbar { width: 100%; max-width: 100%; }
#pilares-view .thp-filterbar .thp-search { max-width: 100%; }

/* Animação do estado "processando" da Samora */
@keyframes thp-pulse { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }

/* Foco visível para elementos navegáveis */
#pilares-view .thp-nav:focus-visible,
#pilares-view .thp-tab:focus-visible,
#pilares-view [role="button"]:focus-visible,
#pilares-view .thp-pilares button:focus-visible,
#pilares-view .thp-phase-panel button:focus-visible {
  outline: 2px solid var(--thp-gold); outline-offset: 2px;
}

/* Hover das linhas/cards navegáveis (sutil) */
#pilares-view .thp-nav { transition: background .2s ease; }
#pilares-view .thp-nav:hover { background: rgba(233, 236, 234, 0.04) !important; }

/* Painel de gestão da fase — área de rolagem interna */
#pilares-view .thp-panel-scroll { -webkit-overflow-scrolling: touch; }

/* RTL: painel entra pela esquerda */
body[dir="rtl"] #pilares-view .thp-phase-panel {
  right: auto; left: 0;
  border-left: none; border-right: 1px solid rgba(230, 184, 46, .35);
  box-shadow: 40px 0 90px rgba(0, 0, 0, .55);
}

/* ── Mobile (< 960px) ─────────────────────────────────────────────── */
@media (max-width: 959px) {
  /* Painel ocupa a tela inteira. Ancorado à ESQUERDA de propósito: em 375px
     o app tem um transbordo horizontal próprio (topbar-right, lang-switch,
     grid-bg — fora deste módulo), que alarga o bloco de contenção do
     position:fixed. Com `right:0` o painel era empurrado ~79px para fora da
     tela. `left:0 + 100vw` fixa o painel na viewport real, sem depender de
     nenhuma correção fora do escopo de Pilares. */
  #pilares-view .thp-phase-panel,
  #pilares-view .thp-phase-overlay { left: 0; right: auto; width: 100vw; max-width: 100vw; }
  #pilares-view .thp-phase-panel { border-left: none; }
  body[dir="rtl"] #pilares-view .thp-phase-panel { border-right: none; }
  /* Barra de filtros não gruda embaixo do header em telas curtas */
  #pilares-view .thp-filterbar { position: static !important; }
  /* Cabeçalho do painel quebra em duas linhas: o botão de fechar e o status
     não podem ser empurrados para fora da tela. */
  #pilares-view .thp-panel-head { flex-wrap: wrap; }
  #pilares-view .thp-panel-head > * { min-width: 0; max-width: 100%; }
}

/* ── Movimento reduzido ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #pilares-view .thp-nav { transition: none; }
  #pilares-view .thp-pilares *,
  #pilares-view .thp-phase-panel * { animation: none !important; }
}