/* =========================================================
   PDO v2 — COMPONENTES GLOBAIS sobre o Tabler
   (PLANO_PDO_V2.md §10.3/§10.4/§10.6 — Etapa 3, V2-FE-002)

   Contrato global: tipografia/números, rótulos, status, chips funcionais,
   KPI, cabeçalho de página e estruturas operacionais opt-in.

   Regras permanentes (2ª rodada de revisão do Kevin, Etapa 3):
   - sem CSS inline; modais sempre centralizados;
   - chips só para leitura rápida (nunca como padrão default de exibição —
     status usa ponto + rótulo; chip é exceção, não regra);
   - O.S. e códigos de estoque nunca quebram linha (o restante do texto pode);
   - valores monetários em formato contábil: símbolo à esquerda, número
     tabular à direita (padrão Excel "Contábil"), nunca só texto solto;
   - tabelas não usam botão de texto repetido por linha (poluição visual) —
     ação primária vira linha inteira clicável (stretched-link) ou ícone SVG
     numa coluna de ações; nunca as duas coisas competindo;
   - gráficos não usam formas circulares tipo pizza/rosca (não são
     ferramenta de storytelling de dados) — preferir barra ou linha.
   ========================================================= */

/* ── Tipografia base ── */
body {
    font-family: var(--font-ui);
    font-optical-sizing: auto;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Rótulo institucional (overline) — títulos de seção, labels de KPI */
.pdo-label {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--app-text-3);
}

/* ── Contrato de algarismos tabulares (§10.3 do plano) ──
   Números comparáveis: mesma largura de dígito, alinhados à direita.
   Em códigos com letras (O.S., PW), o tabular vale para os dígitos. */
.pdo-number,
.pdo-kpi__value,
.table .is-numeric {
    font-variant-numeric: tabular-nums lining-nums;
    text-align: right;
}

/* Códigos com letras (O.S., PW, timestamps): dígitos tabulares, letras
   proporcionais, sem forçar alinhamento — sem fonte especial (§10.3).
   Nunca quebram em múltiplas linhas — o resto do texto pode. */
.pdo-code {
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
}

/* ── Valor contábil — símbolo à esquerda, número tabular à direita
   (padrão Excel "Contábil"). Uso típico: célula de tabela com valor. ── */
.pdo-currency {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}

.pdo-currency__symbol {
    color: var(--app-text-3);
    font-size: .8125rem;
}

.pdo-currency__value {
    font-variant-numeric: tabular-nums lining-nums;
    text-align: right;
}

/* ── Status = ponto + rótulo (nunca chip decorativo) ── */
.pdo-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--app-text-2);
    white-space: nowrap;
}

.pdo-status__dot {
    flex: none;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--pdo-status-color, var(--app-text-3));
}

.pdo-status--success { --pdo-status-color: var(--accent-success); }
.pdo-status--info    { --pdo-status-color: var(--accent-info); }
.pdo-status--warning { --pdo-status-color: var(--accent-warning); }
.pdo-status--yellow  { --pdo-status-color: var(--accent-yellow); }
.pdo-status--danger  { --pdo-status-color: var(--accent-danger); }
.pdo-status--accent  { --pdo-status-color: var(--app-accent); }

/* Áreas como código funcional: reutilizam o ponto de status */
.pdo-status--estoque  { --pdo-status-color: var(--area-estoque); }
.pdo-status--fiscal   { --pdo-status-color: var(--area-fiscal); }
.pdo-status--montagem { --pdo-status-color: var(--area-montagem); }
.pdo-status--pcp      { --pdo-status-color: var(--area-pcp); }
.pdo-status--insumos  { --pdo-status-color: var(--area-insumos); }
.pdo-status--maquinas { --pdo-status-color: var(--area-maquinas); }
.pdo-status--projetos { --pdo-status-color: var(--area-projetos); }
.pdo-status--usinagem  { --pdo-status-color: var(--area-usinagem); }
.pdo-status--laboratorio { --pdo-status-color: var(--area-laboratorio); }
.pdo-status--sac       { --pdo-status-color: var(--area-sac); }

/* ── Chip funcional (categoria/tipo) — receita única do sistema ── */
.pdo-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .125rem .5rem;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--pdo-chip-color, var(--app-text-2));
    background: color-mix(in srgb, var(--pdo-chip-color, var(--app-text-3)) 13%, transparent);
    white-space: nowrap;
}

.pdo-chip--accent   { --pdo-chip-color: var(--app-accent); }
.pdo-chip--success  { --pdo-chip-color: var(--accent-success); }
.pdo-chip--info     { --pdo-chip-color: var(--accent-info); }
.pdo-chip--warning  { --pdo-chip-color: var(--accent-warning); }
.pdo-chip--yellow   { --pdo-chip-color: var(--accent-yellow); }
.pdo-chip--danger   { --pdo-chip-color: var(--accent-danger); }

/* ── Linha de tabela clicável (§10.4) — alternativa ao botão de texto
   repetido por linha. Usa .stretched-link nativo do Tabler/Bootstrap: um
   <a> real (focável, sem JS) esticado sobre a linha inteira. O link em si
   fica com a cor do texto normal; a linha sinaliza clicabilidade no hover. */
.pdo-row-link {
    color: inherit;
    text-decoration: none;
}

.pdo-row-link:hover,
.pdo-row-link:focus-visible {
    color: inherit;
}

.table tr:has(.stretched-link) {
    position: relative;
    cursor: pointer;
}

.table tr:has(.stretched-link):hover {
    background: var(--app-surface-2);
}

/* ── KPI institucional ── */
.pdo-kpi {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: .875rem 1rem;
    box-shadow: var(--app-shadow-sm);
}

.pdo-kpi__value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--app-text);
    text-align: left;
}

.pdo-kpi__hint {
    font-size: .8125rem;
    color: var(--app-text-3);
}

/* ── Cabeçalho de card canônico ── */
.pdo-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pdo-card-header__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    border: 1px solid var(--app-border);
    background: var(--w-06);
    color: var(--app-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pdo-card-header__icon svg {
    width: 20px;
    height: 20px;
}

.pdo-card-header__title-wrap {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    flex: 1 1 auto;
}

.pdo-card-header__title {
    margin: 0;
    font-size: clamp(1.02rem, 1rem + 0.18vw, 1.16rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: var(--app-text);
}

.pdo-card-header__subtitle {
    margin: 0;
    color: var(--app-text-2);
    font-size: .86rem;
    line-height: 1.35;
}

/* ── Card de navegação de módulo ──
   O link é o único controle interativo. O card não usa `onclick`, não contém
   links aninhados e recebe cor por variáveis do módulo consumidor. */
.pdo-nav-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: var(--app-radius);
}

.pdo-nav-card-link:hover,
.pdo-nav-card-link:focus,
.pdo-nav-card-link:active {
    color: inherit;
    text-decoration: none;
}

.pdo-nav-card-link:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}

.pdo-nav-card {
    --pdo-nav-card-stripe: var(--app-accent);
    --pdo-nav-card-accent: var(--app-accent);
    position: relative;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--app-border);
    transition: transform .18s ease;
}

.pdo-nav-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    border-radius: var(--radius-pill);
    background: var(--pdo-nav-card-stripe);
    opacity: .95;
}

.pdo-nav-card-link:hover .pdo-nav-card,
.pdo-nav-card-link:focus-visible .pdo-nav-card {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--pdo-nav-card-accent) 45%, var(--app-border));
    box-shadow: var(--app-shadow-md);
}

/* ── Cabeçalho de página canônico ──
   O nome `.pdo-hero` foi preservado porque já é o contrato compartilhado
   entre os módulos. Visualmente ele não é um hero promocional: é um
   cabeçalho compacto, sem superfície própria, seguido imediatamente pelo
   conteúdo operacional. Não criar uma segunda família de cabeçalhos. */
.pdo-hero {
    border-bottom: 1px solid var(--app-border);
    padding: 0 0 .75rem;
    margin-bottom: 1rem;
}

.pdo-hero__title {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 .15rem;
    color: var(--app-text);
    line-height: 1.25;
}

/* Todo template de página aplica `.pdo-hero__title` diretamente no seu
   único `<h1>`. Não combinar com `.h1` nem utilitários de margem. */
.pdo-hero__subtitle {
    margin: 0;
    color: var(--app-text-3);
    font-size: .8125rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pdo-hero__inner {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    align-items: flex-start;
    justify-content: space-between;
}

@media (min-width: 992px) {
    .pdo-hero__inner {
        flex-direction: row;
        align-items: center;
    }
}

.pdo-hero__actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
    flex: none;
}

/* Retorno de navegação entre páginas. Controles internos de modal,
   formulário e fluxo operacional não usam esta classe. */
.pdo-back-button {
    min-height: 30px;
    padding: .3rem .55rem;
    font-size: .72rem;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pdo-hero__crumbs {
    font-size: .75rem;
    color: var(--app-text-3);
    margin-bottom: .25rem;
}

.pdo-hero__crumbs a {
    color: var(--app-text-3);
}

.pdo-hero__crumbs a:hover {
    color: var(--app-text);
}

/* ── Estrutura operacional opt-in ──
   Estas classes não alteram nenhuma tela existente. Elas formam a receita
   das migrações graduais: topo fixo na área útil e scroll somente nos dados. */
.pdo-screen {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.pdo-screen > .pdo-hero,
.pdo-screen > .pdo-filter-bar {
    flex: none;
}

.pdo-filter-bar {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
    min-width: 0;
    margin-bottom: .75rem;
}

.pdo-filter-bar__main {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    flex: 1 1 18rem;
    flex-wrap: wrap;
    min-width: 0;
}

.pdo-filter-bar__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    flex: none;
    flex-wrap: wrap;
}

.pdo-data-region {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.pdo-data-scroll {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.pdo-table-compact {
    width: 100%;
    margin-bottom: 0;
    vertical-align: middle;
}

.pdo-table-compact > :not(caption) > * > * {
    padding: .4rem .5rem;
}

.pdo-table-compact > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--app-surface);
}

/* Utilitários estruturais para formulários operacionais. Mantêm os valores
   visuais já praticados e substituem apenas declarações estáticas inline. */
.pdo-section-label {
    letter-spacing: .04em;
}

.pdo-field-code {
    width: 120px;
    max-width: 100%;
}

.pdo-field-quantity {
    width: 80px;
    max-width: 100%;
}

.pdo-disclosure-summary {
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.pdo-surface-subtle {
    background: var(--app-surface-2);
}

.pdo-error-pre {
    white-space: pre;
}

/* Aplicar no `.modal-dialog` junto de `modal-dialog-centered`. Para conteúdo
   alto, acrescentar também `modal-dialog-scrollable`; o body recebe o scroll
   e cabeçalho/rodapé permanecem estáveis. */
.pdo-modal-form .modal-body {
    min-height: 0;
}

.pdo-modal-form .modal-header,
.pdo-modal-form .modal-footer {
    flex: none;
}

/* Alguns formulários mantêm o header fora do <form> e body/footer dentro.
   O form também precisa participar da coluna flex para o scroll permanecer
   somente no body quando a altura útil diminui por zoom ou meia tela. */
.pdo-modal-form .modal-content > form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

/* O Tabler mantém modal-lg/modal-xl em 500px até 991px e limita ambos a
   720px entre 992px e 1199px. Nesse intervalo, grids responsivos já mudaram
   para md/lg e acabam comprimindo campos como se o diálogo fosse largo.
   A largura abaixo acompanha o viewport (inclusive com zoom do navegador),
   preservando a margem lateral e os limites próprios de cada modal. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        --tblr-modal-width: calc(100vw - 3rem);
    }
}

@media (min-width: 992px) {
    .modal-dialog.modal-lg {
        --tblr-modal-width: min(900px, calc(100vw - 3rem));
    }

    .modal-dialog.modal-xl {
        --tblr-modal-width: min(1140px, calc(100vw - 3rem));
    }
}

.pdo-modal-form__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
}

.pdo-modal-form__field--full {
    grid-column: 1 / -1;
}

@media (min-width: 768px) {
    .pdo-modal-form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}