/* CertChain — Utilitários responsivos compartilhados
 *
 * Carregue antes do CSS específico da página:
 *   <link rel="stylesheet" href="../shared/css/responsive.css"/>
 *
 * Padrões cobertos:
 *
 * 1. .cc-table-card — tabelas com 5+ colunas viram cards verticais em
 *    <640px. Cada <td> precisa de `data-label="..."` pra mostrar o
 *    rótulo da coluna. <td data-mobile-hide="1"> esconde a célula em
 *    mobile (use pra colunas secundárias como IDs longos).
 *
 *    <table class="w-full cc-table-card">
 *      <thead><tr><th>Nome</th><th>Status</th></tr></thead>
 *      <tbody>
 *        <tr>
 *          <td data-label="Nome">Foo</td>
 *          <td data-label="Status">OK</td>
 *        </tr>
 *      </tbody>
 *    </table>
 *
 * 2. .cc-tabs-compact — barra de tabs (.tab-btn) que comprime padding
 *    e font-size em <480px pra caber 4–5 tabs em 320px sem quebrar
 *    em duas linhas.
 *
 *    <nav class="cc-tabs-compact ...">
 *      <button class="tab-btn">...</button>
 *    </nav>
 *
 * 3. Helpers de truncate/min-width-zero documentados inline.
 */

/* ── 1. Tabelas → cards em mobile ────────────────────────── */
@media (max-width: 639px) {
  .cc-table-card thead { display: none; }
  .cc-table-card tbody,
  .cc-table-card tr,
  .cc-table-card td { display: block; width: 100%; }
  .cc-table-card tr {
    border: 1px solid #334155;
    border-radius: .5rem;
    margin-bottom: .6rem;
    padding: .55rem .75rem;
  }
  .cc-table-card tr[data-row-hidden="1"] { display: none; }
  .cc-table-card td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    padding: .2rem 0;
    font-size: .8125rem;
    border: none;
  }
  .cc-table-card td::before {
    content: attr(data-label);
    color: #94a3b8;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-shrink: 0;
  }
  .cc-table-card td:empty,
  .cc-table-card td[data-mobile-hide="1"] { display: none; }
  .cc-table-card td > * { text-align: right; min-width: 0; }
}

/* ── 2. Tabs compactas em telas pequenas ─────────────────── */
@media (max-width: 479px) {
  .cc-tabs-compact .tab-btn {
    padding: .5rem .55rem;
    font-size: .7rem;
    flex: 1 1 auto;
    justify-content: center;
    gap: .3rem;
  }
  .cc-tabs-compact .tab-btn .tab-num {
    width: 1rem;
    height: 1rem;
    font-size: .6rem;
  }
}

/* ── 3. Stickiness — header sticky com top:0 padrão ──────── */
.cc-sticky-top { position: sticky; top: 0; z-index: 30; }

/* ── 4. Min-width-zero defense-in-depth ──────────────────── */
/* Flex children que devem permitir truncate. Adicione `cc-min-w-0`
 * no container quando filhos com truncate não estão respeitando o
 * espaço disponível (default flex children têm min-width: auto). */
.cc-min-w-0 { min-width: 0; }
.cc-min-w-0 > * { min-width: 0; }

/* ── 5. iOS zoom-on-focus fix ────────────────────────────── */
/* iOS Safari força zoom da página quando um input focado tem
 * font-size < 16px. Isso quebra UX em qualquer mobile.
 *
 * Páginas têm `<style>` inline com regras tipo `.input-dark { font-size: 16px }`
 * MAS o Tailwind CDN é carregado depois, e classes utilitárias como
 * `.text-sm` (14px) ou `.text-xs` (12px) ganham a cascata e quebram o
 * fix. Aqui aplicamos `!important` nas classes de input do projeto pra
 * garantir mínimo 16px independente de qualquer Tailwind class.
 *
 * Cobertura: .input-dark / .inp / .input usadas no projeto. Inclui
 * input + textarea + select. Não cobre [type=checkbox]/[type=radio]
 * (não recebem font, e querem ser pequenos). */
input.input-dark,
textarea.input-dark,
select.input-dark,
input.inp,
textarea.inp,
select.inp,
input.input,
textarea.input,
select.input {
  font-size: 16px !important;
}

/* ────────────────────────────────────────────────────────────────
 * Back arrow — usado em headers de páginas pra voltar pra origem.
 * Tinha font padrão (12-14px) que ficava perdido no header. Agora
 * maior + área de clique melhor + leve animação no hover.
 * Aplicado a anchors/buttons com class="cc-back-arrow".
 * ──────────────────────────────────────────────────────────────── */
.cc-back-arrow {
  font-size: 1.125rem !important;     /* ~18px */
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  gap: .35rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0 .5rem;
  border-radius: .5rem;
  color: #c4b5fd !important;          /* lilás (violet-300) pra variar dos títulos */
  transition: color .15s ease, background-color .15s ease, transform .15s ease;
  text-decoration: none;
}
.cc-back-arrow:hover {
  color: #ddd6fe !important;          /* violet-200 */
  background: rgba(167, 139, 250, .1);
  transform: translateX(-2px);
}
/* Quando o back-arrow tem texto associado (ex: '← Voltar'), o texto fica
   menor que o arrow pra manter hierarquia visual. */
.cc-back-arrow > span,
.cc-back-arrow > [data-i18n] {
  font-size: .75rem; /* 12px */
}