/* FABIM Controle — components: botões, campos, cartões, tabelas, badges, modais. */
@layer components {
  /* ---- Texto utilitário ---- */
  .eyebrow {
    margin-bottom: 0;
    color: var(--app-bronze);
    font-size: var(--fs-1);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
  }

  .muted { color: var(--muted); }

  /* Esconde visualmente mantendo acessivel a leitores de tela (ex.: cabecalho
     de coluna so-checkbox na Lista mestra de pranchas). */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

  .error {
    min-height: 18px;
    margin-bottom: 0;
    font-size: var(--fs-3);
  }

  /* VAZIO nao ocupa lugar. O `min-height: 20px` existia para a mensagem nao
     empurrar o layout ao surgir, mas dentro do `.view-actions` (que tem
     flex-wrap) o paragrafo vazio ganhava uma LINHA inteira e esticava a faixa
     de acoes de 48px para 67px -- 19px desperdicados em cada uma das 17 telas
     que tem um. O preco aceito: quando a mensagem aparece, a faixa cresce.
     Ela e transitoria; o desperdicio era permanente. */
  .status-message:empty { display: none; }

  .status-message {
    min-height: 20px;
    margin-bottom: 0;
    color: var(--app-bronze);
    font-size: var(--fs-2);
    font-weight: var(--fw-medium);
    text-align: right;
  }

  .status-message.error,
  .error { color: #f5a9a9; }

  /* Tema claro: o rosa acima cai para ~1,9:1 sobre branco (WCAG pede 4,5:1)
     e a mensagem de erro -- inclusive a do login -- vira sussurro. O token
     danger claro (#d64550) tambem nao passa (~4,3:1 no branco, ~4,0:1 no
     canvas); este e o mesmo vermelho ~15% mais escuro, >=5:1 nos dois
     fundos. (auditoria 14/08/2026) */
  html.light .status-message.error,
  html.light .error { color: #b63b44; }

  .empty-state { margin: 16px 0 0; color: var(--muted); }

  /* ---- Botões ---- */
  .button-secondary,
  .table-action,
  .filter-actions button:not(:first-child) {
    border-color: var(--app-line-strong);
    background: linear-gradient(145deg, rgba(91, 157, 255, 0.08), rgba(154, 167, 176, 0.03));
    color: var(--app-bronze);
    box-shadow: none;
  }

  .button-secondary:hover,
  .table-action:hover,
  .filter-actions button:not(:first-child):hover {
    border-color: var(--app-bronze);
    background: rgba(91, 157, 255, 0.12);
    color: var(--fabim-text);
  }

  .button-secondary { min-height: 32px; padding: 5px 10px; }

  html.light .button-secondary,
  html.light .table-action { color: #55636f; }

  .table-action {
    min-height: 29px;
    margin-right: 4px;
    padding: 4px 8px;
    font-size: var(--fs-1);
    white-space: nowrap;
  }

  .table-action:last-child { margin-right: 0; }

  .table-action.danger { border-color: rgba(216, 92, 92, 0.38); color: #e8b8b8; }
  .table-action.danger:hover { background: rgba(216, 92, 92, 0.12); color: #ffd1d1; }

  .icon-button,
  .theme-btn,
  .alerts-button {
    position: relative;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border: 1px solid var(--fabim-line);
    border-radius: var(--r-1);
    background: transparent;
    color: var(--fabim-muted);
    box-shadow: none;
  }

  .icon-button:hover,
  .theme-btn:hover,
  .alerts-button:hover {
    border-color: var(--fabim-line-strong);
    background: var(--fabim-surface-soft);
    color: var(--fabim-text);
    transform: translateY(-1px);
  }

  .icon-button svg,
  .theme-btn svg,
  .alerts-button svg { width: 18px; height: 18px; }

  html.light .icon-button,
  html.light .theme-btn,
  html.light .alerts-button {
    border-color: var(--fabim-line);
    background: rgba(255, 255, 255, 0.72);
    color: #55636f;
  }

  /* ---- Superfícies glass (cartões, painéis, filtros, menus) ---- */
  .entry-form,
  .entries-panel,
  .request-card,
  .consultation-filters,
  .service-order-filters,
  .first-access-notice,
  .login-form,
  .alerts-panel,
  .status-menu {
    border: 1px solid var(--border-glass);
    border-radius: var(--r-2);
    background: var(--surface-glass);
    -webkit-backdrop-filter: blur(var(--blur-1));
    backdrop-filter: blur(var(--blur-1));
    box-shadow: var(--shadow-glass-soft);
  }

  .alerts-panel,
  .status-menu,
  .login-form {
    background: var(--surface-glass-strong);
    box-shadow: var(--shadow-glass);
  }

  .entry-form,
  .entries-panel { position: relative; overflow: hidden; }

  .entry-form { display: grid; gap: var(--sp-4); padding: 22px; }
  .entries-panel { min-width: 0; padding: var(--sp-4); }

  .login-form::before,
  .entry-form::before,
  .entries-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--app-bronze), var(--app-muted), transparent);
    opacity: 0.7;
  }

  .entry-form textarea { resize: vertical; }

  /* Campo que vem da OS e nao se digita aqui (Editar entrega, 18/08/2026).
     Precisa PARECER travado: campo com aparencia de editavel que recusa o
     teclado faz o usuario achar que a tela travou. Cor propria em vez de so
     opacidade -- opacidade sobre fundo escuro apaga o texto ate ficar ilegivel.
     `select:disabled` tem de vir junto: <select> nao aceita readOnly, entao a
     fase e trancada por `disabled`. */
  .entry-form .campo-trancado,
  .manager-drawer-body .campo-trancado,
  .entry-form select.campo-trancado:disabled,
  .manager-drawer-body select.campo-trancado:disabled {
    background: color-mix(in srgb, var(--app-muted) 12%, transparent);
    border-style: dashed;
    cursor: not-allowed;
    /* A COR do texto nao e mexida de proposito. Apagar o texto para dizer
       "travado" e o caminho curto que quebra num dos temas: no claro o cinza
       escolhido para o escuro fica lavado sobre fundo claro. O recado vem do
       fundo, da borda tracejada e do cursor -- e o dado continua legivel, que e
       o motivo de ele estar na tela. */
    -webkit-text-fill-color: currentColor;  /* Safari apaga o texto do disabled */
    opacity: 1;
  }

  /* Travado nao e lista (21/08/2026, Fabio: "se o tipo de emissão é travado
     não deve aparecer como list (...) todos trancados devem aparecer como
     fixo sem list"): o <select> trancado perde a seta -- ela prometia um menu
     que nao abre. Vale para todo select desabilitado do formulario. */
  .entry-form select.campo-trancado:disabled,
  .manager-drawer-body select.campo-trancado:disabled,
  .entry-form select:disabled,
  .manager-drawer-body select:disabled {
    appearance: none;
    -webkit-appearance: none;
  }

  /* ---- Cabeçalhos de painel e filtros ---- */
  .form-title-row,
  .table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
  }

  .form-title-row {
    min-height: 34px;
    margin: -2px 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--fabim-line);
  }

  .table-header {
    min-height: 48px;
    align-items: end;
    margin: 0 0 14px;
    padding: 0;
  }

  .table-header h2,
  .form-title-row h2 {
    color: var(--fabim-text);
    font-size: var(--fs-4);
    font-weight: var(--fw-medium);
  }

  .filters {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, 180px);
    align-items: end;
    gap: var(--sp-2);
  }

  .filters label { min-width: 135px; width: 150px; font-size: var(--fs-1); }
  .filters input,
  .filters select { min-height: 36px; }

  .filter-actions {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  /* ---- Tabelas ---- */
  .table-wrap,
  .consultation-table-wrap {
    overflow: auto;
    border: 1px solid var(--border-glass);
    border-radius: var(--r-1);
    background: var(--surface-glass);
    -webkit-backdrop-filter: blur(var(--blur-1));
    backdrop-filter: blur(var(--blur-1));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
  }

  /* Padrao unico de todas as tabelas: mostra no maximo ~12 linhas
     (cabecalho 42px + 12 x 46px) e so entao rola na vertical; scrollbar-gutter
     reserva a barra para nao reaparecer rolagem horizontal. min() com a viewport
     garante que o container nunca ultrapasse a tela. */
  .table-wrap,
  .consultation-table-wrap { max-height: min(calc(42px + 46px * 12), calc(100vh - 190px)); scrollbar-gutter: stable; }
  .consultation-table-wrap { padding: 0; }

  table {
    min-width: 850px;
    table-layout: fixed;
    color: var(--fabim-text);
    font-size: var(--fs-1);
  }

  th,
  td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--fabim-line);
    text-align: left;
    vertical-align: middle;
  }

  thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    height: 42px;
    padding: 9px 11px;
    border-bottom: 1px solid var(--fabim-line-strong);
    background: var(--sticky-head);
    color: var(--thead-text);
    font-size: var(--fs-1);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    white-space: nowrap;
  }

  /* Traco curto e centralizado entre cabecalhos (sem cara de grade Excel). */
  thead th:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 40%;
    background: var(--fabim-line-strong);
    opacity: 0.55;
  }

  tbody td {
    height: 46px;
    padding: 8px 11px;
    overflow: hidden;
    color: var(--fabim-text);
    font-size: var(--fs-1);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  td:nth-child(3),
  td:nth-child(4) { min-width: 180px; }

  tbody tr:nth-child(odd) td { background: var(--zebra-glass); }
  tbody tr:nth-child(even) td { background: transparent; }
  tbody tr:hover td { background: var(--hover-glass); }
  tr:last-child td { border-bottom: 0; }

  /* Coluna fixa à direita: fundo praticamente opaco para o conteúdo não vazar. */
  th:last-child,
  td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    width: 150px;
    min-width: 150px;
    overflow: visible;
  }

  thead th:last-child { z-index: 5; background: var(--sticky-head); }

  td:last-child {
    border-left: 1px solid var(--fabim-line);
    background: var(--sticky-col);
    box-shadow: -10px 0 20px rgba(0, 0, 0, 0.08);
  }

  tbody tr:nth-child(odd) td:last-child { background: var(--sticky-col-odd); }
  tbody tr:nth-child(even) td:last-child { background: var(--sticky-col); }
  tbody tr:hover td:last-child { background: var(--sticky-col-hover); }

  /* Colunas de ações que se ajustam ao conteúdo */
  .hours-table th:last-child,
  .hours-table td:last-child,
  .deliveries-table th:last-child,
  .deliveries-table td:last-child,
  .users-table th:last-child,
  .users-table td:last-child {
    width: 1%;
    min-width: max-content;
    white-space: nowrap;
  }

  /* REGRA CRÍTICA — coluna AÇÕES de OS/Revisões: "Abrir" + PDF (+ Excel)
   * sempre inteiros, sem corte. */
  .service-orders-table th:last-child,
  .service-orders-table td:last-child,
  .revisions-table th:last-child,
  .revisions-table td:last-child {
    position: sticky;
    right: 0;
    z-index: 5;
    width: 300px;
    min-width: 300px;
    padding-inline: var(--sp-2);
    border-left: 1px solid var(--fabim-line-strong);
    white-space: nowrap;
  }

  .service-orders-table td:last-child,
  .revisions-table td:last-child { min-width: max-content; }

  .service-orders-table th:last-child,
  .revisions-table th:last-child { z-index: 7; }

  .table-actions button + button { margin-left: 6px; }
  .table-actions .service-order-open svg { width: 14px; height: 14px; }

  .truncate-cell {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  td button,
  .status-button {
    min-height: 30px;
    padding: 4px 8px;
    font-size: var(--fs-1);
  }

  /* ---- Redimensionamento de colunas ---- */
  .column-resizer {
    position: absolute;
    top: 0;
    right: -4px;
    z-index: 8;
    width: 9px;
  }
  /* A ultima alca fica DENTRO da tabela: com right negativo ela vazava
     alguns pixels e fazia a rolagem horizontal aparecer/sumir. */
  .resizable-table th:nth-last-child(2) .column-resizer {
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
  }

  .column-resizer::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 4px;
    bottom: 8px;
    width: 1px;
    background: var(--fabim-line-strong);
    opacity: 0;
    transition: opacity 120ms ease;
  }

  th:hover > .column-resizer::after,
  .column-resizer:focus-visible::after,
  .column-resizer:active::after { opacity: 1; }

  .column-resizer:hover::after,
  .is-resizing-column .column-resizer::after {
    background: var(--app-bronze);
  }

  body.is-resizing-column {
    cursor: col-resize;
    user-select: none;
  }

  body.is-resizing-column * { cursor: col-resize !important; }

  /* ---- Badges de status ---- */
  .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 108px;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid var(--app-muted);
    border-radius: var(--r-1);
    background: rgba(255, 255, 255, 0.025);
    color: var(--fabim-text);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
    font-size: var(--fs-1);
    font-weight: var(--fw-strong);
  }

  .status-button { background: transparent; cursor: pointer; }
  .status-button:hover { background: var(--hover-glass); }

  .status-icon {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: var(--r-full);
    line-height: 1;
  }

  .status-icon svg { width: 16px; height: 16px; }

  .status-badge.approved { border-color: #55b878; color: #bdf3cf; }
  .status-badge.approved .status-icon { background: #55b878; color: #10263b; }

  .status-badge.complete {
    border-color: rgba(61, 220, 151, 0.55);
    background: rgba(61, 220, 151, 0.1);
    color: var(--fabim-success);
  }

  .status-badge.pending {
    border-color: rgba(242, 169, 59, 0.6);
    background: rgba(242, 169, 59, 0.1);
    color: var(--fabim-warning);
  }

  .status-badge.rejected {
    border-color: rgba(255, 100, 124, 0.58);
    background: rgba(255, 100, 124, 0.1);
    color: var(--fabim-danger);
  }

  .status-menu {
    position: fixed;
    z-index: 80;
    display: grid;
    gap: 6px;
    min-width: 132px;
    padding: var(--sp-2);
  }

  .status-menu button {
    min-height: 30px;
    padding: 5px 9px;
    justify-content: flex-start;
    border-color: transparent;
    background: var(--fabim-surface-soft);
    color: var(--fabim-text);
    box-shadow: none;
    text-align: left;
  }

  .status-menu button:hover { background: var(--hover-glass); color: var(--fabim-text); }

  /* ---- Avatares: pastilha 3D sutil ----
   * A cor da pessoa continua vindo de people.js (fonte única), agora como
   * custom property --avatar-color no style inline; o CSS compõe o relevo:
   * gradiente na própria cor, brilho interno no topo, borda translúcida clara
   * e sombra externa curta. Sem cor (fallback), a pastilha fica bronze. */
  .account-avatar,
  .settings-avatar,
  .recipient-avatar,
  .request-avatar {
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--r-full);
    background:
      linear-gradient(175deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 52%, rgba(0, 0, 0, 0.1)),
      var(--avatar-color, rgba(91, 157, 255, 0.35));
    color: var(--fabim-bronze-strong);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 2px 4px rgba(0, 0, 0, 0.35);
    font-weight: var(--fw-strong);
  }

  .account-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    font-size: var(--fs-1);
    font-weight: var(--fw-bold);
  }

  .recipient-avatar,
  .request-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    font-size: var(--fs-1);
  }

  .settings-avatar {
    width: 48px;
    height: 48px;
    box-shadow: none;
  }

  html.light .request-avatar,
  html.light .recipient-avatar { color: #55636f; }

  /* ---- Fichas de pessoas ---- */
  .person-token,
  .recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    border: 1px solid var(--fabim-line);
    border-radius: var(--r-1);
    background: var(--fabim-surface-soft);
    color: var(--app-text-soft);
    box-shadow: none;
    font-size: var(--fs-2);
    font-weight: var(--fw-bold);
  }

  .person-token { padding: 4px 10px 4px 5px; cursor: grab; }
  .person-token:hover { border-color: var(--app-bronze); background: rgba(91, 157, 255, 0.08); }

  .recipient-chip { padding: 4px 5px; }

  .recipient-chip button {
    width: 22px;
    min-height: 22px;
    padding: 0;
    border-color: transparent;
    border-radius: var(--r-full);
    background: transparent;
    box-shadow: none;
    color: var(--app-bronze);
  }

  .recipient-chip button:hover { background: rgba(91, 157, 255, 0.16); color: var(--fabim-text); }

  /* ---- Diálogos ---- */
  dialog {
    width: min(760px, calc(100vw - 28px));
    max-height: calc(100vh - 32px);
    padding: 0;
    overflow: auto;
    border: 1px solid var(--border-glass);
    border-radius: var(--r-2);
    background: var(--surface-glass-strong);
    -webkit-backdrop-filter: blur(var(--blur-1));
    backdrop-filter: blur(var(--blur-1));
    box-shadow: 0 32px 90px rgba(4, 10, 18, 0.48);
  }

  dialog::backdrop {
    background: rgba(5, 12, 20, 0.7);
    backdrop-filter: blur(4px);
  }

  html.light dialog::backdrop { background: rgba(21, 34, 50, 0.38); }

  dialog .entry-form {
    padding: 22px;
    border: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
}