/*
  Site TTODOBOM — UI refresh 2026-10
  Camada visual aditiva: preserva HTML, ordem, dimensões e comportamentos.
  Escopo: páginas de produção fora de temp/ e gestaoprojetosidi/.
*/
:root {
  --color-bg: #f3f7fa;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-text: #123047;
  --color-text-muted: #587087;
  --color-border: #d4e0ea;
  --color-border-strong: #b7cad9;
  --color-primary: #0b5f8a;
  --color-primary-hover: #084b70;
  --color-primary-active: #063a57;
  --color-primary-soft: #e7f2f8;
  --color-info: #0b5f8a;
  --color-info-soft: #e7f2f8;
  --color-info-on-soft: #084b70;
  --color-success: #08705d;
  --color-success-soft: #e6f5f0;
  --color-success-on-soft: #075b4c;
  --color-warning: #a85d00;
  --color-warning-soft: #fff3df;
  --color-warning-on-soft: #7d4300;
  --color-danger: #b42338;
  --color-danger-soft: #fff0f2;
  --color-danger-on-soft: #8c1b2a;
  --color-neutral-soft: #edf3f7;
  --color-neutral-on-soft: #415b70;
  --site-action-primary: #0b5f8a;
  --site-action-primary-hover: #084b70;
  --site-action-primary-active: #063a57;
  --site-action-primary-text: #ffffff;
  --site-action-secondary-bg: #ffffff;
  --site-action-secondary-text: #1c4059;
  --site-action-border: #b7cad9;
  --site-action-focus: rgb(11 95 138 / 34%);
  --focus-ring: 3px solid rgb(11 95 138 / 46%);
  --focus-ring-offset: 2px;
  --focus-ring-halo: 0 0 0 4px rgb(11 95 138 / 13%);
}

html { background: var(--color-bg); }
body,
.body-padrao {
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* Shared surfaces: clearer white layers, restrained depth, unchanged geometry. */
.card-padrao,
.card,
.stats-padrao .stat,
.ui-dialog,
.modal-content,
.dialog-content,
details,
fieldset {
  border-color: var(--color-border);
  background-color: var(--color-surface);
}

.card-padrao,
.card,
.stats-padrao .stat {
  box-shadow: 0 8px 22px rgb(18 48 71 / 7%);
}

/* Typography and low-emphasis content remain readable on clean neutrals. */
.titulo-padrao h1,
.titulo-padrao h2,
h1, h2, h3, h4, h5, h6,
.stat-value { color: var(--color-text); }
.titulo-padrao p.small,
.text-muted,
.kpi-label,
.stats-padrao .stat-label,
label,
small { color: var(--color-text-muted); }

/* Navigation, tabs and action areas: deep blue reserved for selected/primary state. */
.tabs-padrao .tab-button,
.view-tab,
.chip,
.toolbar-direita button {
  border-color: var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-primary);
}
.tabs-padrao .tab-button:hover:not(.tab-active),
.view-tab:hover:not([aria-selected="true"]),
.chip:hover:not([aria-pressed="true"]),
.toolbar-direita button:hover {
  border-color: var(--color-border-strong);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-active);
}
.tabs-padrao .tab-button.tab-active,
.view-tab[aria-selected="true"],
.chip[aria-pressed="true"],
.toolbar-direita a {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: #fff;
}
.tabs-padrao .tab-button.tab-active:hover,
.view-tab[aria-selected="true"]:hover,
.toolbar-direita a:hover {
  border-color: var(--color-primary-hover);
  background-color: var(--color-primary-hover);
  color: #fff;
}
.nav { border-color: var(--color-border); }
.nav-link { color: var(--color-text-muted); }
.nav-link:hover,
.nav-link[aria-current="page"] { color: var(--color-primary); }

/* Inputs and filters: white surface with deliberate focus, no structural change. */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border-color: var(--color-border-strong);
  background-color: #fff;
  color: var(--color-text);
}
input::placeholder,
textarea::placeholder { color: #7890a4; }
input:hover,
select:hover,
textarea:hover { border-color: #91adbf; }
input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  box-shadow: var(--focus-ring-halo);
}

/* Data grids: less grey wash, clearer hierarchy. */
.tabela-padrao,
table { border-color: var(--color-border); }
.tabela-padrao th,
.tabela-padrao td,
table th,
table td { border-color: var(--color-border); }
.tabela-padrao thead,
table thead { background-color: #eaf2f7; color: var(--color-text); }
.tabela-padrao tfoot td { background-color: #f6f9fb; }
tbody tr:hover { background-color: #f3f8fb; }

/* Semantic status colors remain distinct and more legible. */
.positivo,
.success,
.sucesso { color: var(--color-success) !important; }
.negativo,
.error,
.erro { color: var(--color-danger) !important; }
.warning,
.aviso { color: var(--color-warning) !important; }

/* Buttons already mapped by site-buttons.css inherit the new tokens above. */
.btn-primary,
a.btn-primary,
button.primary,
.botao-acao.primario,
button.botao-acao.primario,
.botao-acao.sucesso,
button.botao-acao.sucesso,
button.botao[type="submit"] {
  box-shadow: 0 4px 10px rgb(11 95 138 / 16%);
}
.btn-primary:hover,
a.btn-primary:hover,
button.primary:hover,
.botao-acao.primario:hover,
button.botao-acao.primario:hover,
.botao-acao.sucesso:hover,
button.botao-acao.sucesso:hover,
button.botao[type="submit"]:hover {
  box-shadow: 0 6px 14px rgb(11 95 138 / 23%);
}

/* Feedback, badges and mobile navigation carry the same system accents. */
.badge--info,
.feedback__item--loading { background-color: var(--color-info-soft); color: var(--color-info-on-soft); }
.badge--success,
.feedback__item--success { background-color: var(--color-success-soft); color: var(--color-success-on-soft); }
.badge--warning,
.feedback__item--warning { background-color: var(--color-warning-soft); color: var(--color-warning-on-soft); }
.badge--danger,
.feedback__item--error { background-color: var(--color-danger-soft); color: var(--color-danger-on-soft); }
.mobile-bottom-nav,
.mobile-bottom-nav__bar { border-color: var(--color-border); background-color: rgb(255 255 255 / 97%); }
.mobile-bottom-nav__item.is-active,
.mobile-bottom-nav__link[aria-current="page"] { color: var(--color-primary); background-color: var(--color-primary-soft); }
.mobile-bottom-nav__link[aria-current="page"] .mobile-bottom-nav__icon { background-color: var(--color-primary); color: #fff; }

/* System pages use these compact elements but retain their existing layout. */
.pill,
.chip,
.status-pill { border-color: var(--color-border-strong); background-color: #fff; color: var(--color-text-muted); }
.pill-dot { background-color: var(--color-primary); box-shadow: 0 0 0 4px rgb(11 95 138 / 16%); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
