/*
 * Identidade visual global do Portal TUF.
 * Direção: clareza inspirada no macOS Big Sur, com identidade vermelha,
 * superfícies quase opacas e movimento reduzido.
 */
:root {
  color-scheme: dark;

  --bg: #1c1c1e;
  --bg-primary: #1c1c1e;
  --sidebar: rgba(28, 28, 30, .97);
  --sidebar-hover: rgba(255, 255, 255, .065);
  --surface: #242426;
  --surface2: #2c2c2e;
  --surface-glass: rgba(44, 44, 46, .97);
  --border: rgba(255, 255, 255, .085);
  --border2: rgba(255, 255, 255, .055);
  --text: #f5f5f7;
  --text2: #aeaeb2;
  --text3: #8e8e93;

  --accent: #ff453a;
  --accent-dark: #df332b;
  --accent-light: rgba(255, 69, 58, .13);
  --accent-border: rgba(255, 69, 58, .30);
  --accent-glow: rgba(255, 69, 58, .14);
  --urban-signal: #ff453a;

  /* Azul fica reservado a séries/status informativos, não ao accent da marca. */
  --blue: #007aff;
  --blue-light: rgba(0, 122, 255, .14);
  --blue-border: rgba(0, 122, 255, .32);
  --blue-glow: rgba(0, 122, 255, .18);

  --green: #30d158;
  --green-light: rgba(48, 209, 88, .14);
  --amber: #ffd60a;
  --amber-light: rgba(255, 214, 10, .14);
  --amber-border: rgba(255, 214, 10, .34);
  --danger: #ff453a;
  --danger-light: rgba(255, 69, 58, .14);

  --radius: 20px;
  --radius-sm: 14px;
  --radius-control: 12px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI Variable", "Segoe UI", sans-serif;
  --motion-standard: cubic-bezier(.2, .7, .2, 1);
  --motion-fast: 120ms;
  --shadow-card: 0 4px 14px rgba(0, 0, 0, .09);
  --shadow-float: 0 12px 28px rgba(0, 0, 0, .22);
  --glass-blur: none;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f5f7;
  --bg-primary: #f5f5f7;
  --sidebar: rgba(248, 248, 250, .97);
  --sidebar-hover: rgba(28, 28, 30, .055);
  --surface: #ffffff;
  --surface2: #f0f0f5;
  --surface-glass: rgba(255, 255, 255, .97);
  --border: rgba(28, 28, 30, .09);
  --border2: rgba(28, 28, 30, .055);
  --text: #1c1c1e;
  --text2: #5c5c60;
  --text3: #77777c;

  --accent: #c62828;
  --accent-dark: #a61f1f;
  --accent-light: rgba(198, 40, 40, .09);
  --accent-border: rgba(198, 40, 40, .24);
  --accent-glow: rgba(198, 40, 40, .11);
  --urban-signal: #c62828;

  --blue: #007aff;
  --blue-light: rgba(0, 122, 255, .10);
  --blue-border: rgba(0, 122, 255, .27);
  --blue-glow: rgba(0, 122, 255, .14);

  --green: #248a3d;
  --green-light: rgba(36, 138, 61, .10);
  --amber: #a96000;
  --amber-light: rgba(169, 96, 0, .10);
  --amber-border: rgba(169, 96, 0, .24);
  --danger: #d70015;
  --danger-light: rgba(215, 0, 21, .09);

  --shadow-card: 0 4px 14px rgba(28, 28, 30, .055);
  --shadow-float: 0 12px 28px rgba(28, 28, 30, .14);
}

/* Preferência antiga de cor ou tema sazonal não substitui a identidade TUF. */
html[data-theme] body.tema-admin[class]:not([class*="campanha-"]) {
  --accent: #ff453a;
  --accent-dark: #df332b;
  --accent-light: rgba(255, 69, 58, .13);
  --accent-border: rgba(255, 69, 58, .30);
  --accent-glow: rgba(255, 69, 58, .14);
  --urban-signal: #ff453a;
}

html[data-theme="light"] body.tema-admin[class]:not([class*="campanha-"]) {
  --accent: #c62828;
  --accent-dark: #a61f1f;
  --accent-light: rgba(198, 40, 40, .09);
  --accent-border: rgba(198, 40, 40, .24);
  --accent-glow: rgba(198, 40, 40, .11);
  --urban-signal: #c62828;
}

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

html[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}

body,
body :not(i):not(svg):not(code):not(pre):not(kbd):not(samp) {
  font-family: var(--font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  color: #fff;
  background: rgba(255, 69, 58, .72);
}

.main {
  background-color: var(--bg);
}

h1,
h2,
h3,
.topbar-title h1,
.card-title,
.modal-title {
  color: var(--text);
  font-weight: 650;
  letter-spacing: -.025em;
}

.topbar-title h1 {
  font-size: clamp(22px, 1.75vw, 27px);
  line-height: 1.14;
}

.topbar-title p {
  color: var(--text2);
  line-height: 1.45;
}

.topbar-actions {
  align-items: center;
}

/* Near-opaque chrome avoids repainting a blurred page behind fixed layers. */
.sidebar,
.topo-usuario {
  background: var(--sidebar);
  border-color: var(--border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .topo-usuario {
  background: var(--sidebar);
  border-color: var(--border);
  box-shadow: 0 8px 28px rgba(28, 28, 30, .055);
}

html[data-theme="light"] .topo-usuario {
  border-bottom-color: var(--border);
}

html[data-theme="light"] .sb-item.active {
  border-color: transparent;
  box-shadow: none;
}

.sb-section,
.sb-consulta-cabecalho {
  color: var(--text3);
  font-family: var(--font) !important;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
}

.sb-item {
  position: relative;
  border-radius: 12px;
  transition: color var(--motion-fast) var(--motion-standard),
    background-color var(--motion-fast) var(--motion-standard),
    transform var(--motion-fast) var(--motion-standard);
}

.sb-item:hover {
  color: var(--text);
  background: var(--sidebar-hover);
}

.sb-item.active {
  color: var(--accent);
  background: var(--accent-light);
  border-color: transparent;
  box-shadow: none;
}

.sb-item.active::before {
  background: var(--accent);
  box-shadow: none;
}

.sb-item .ico {
  border-radius: 10px;
}

.topo-menu,
.topo-tema,
.topo-sino,
.topo-perfil,
.topo-busca-input {
  border-radius: var(--radius-control);
}

.topo-busca-input {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--text);
}

.topo-marca-texto small {
  color: var(--text3);
  font-family: var(--font) !important;
  letter-spacing: .04em;
}

/* Layered surfaces use opaque fills instead of translucency and blur. */
.card,
.panel,
.chart-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  background-image: none;
  box-shadow: var(--shadow-card);
}

.card-title,
.modal-title {
  letter-spacing: -.02em;
}

.card-sub,
.section-label {
  color: var(--text2);
}

.table-wrap,
.atividades-tabela-wrap {
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: none;
}

html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .chart-card,
html[data-theme="light"] .table-wrap,
html[data-theme="light"] .atividades-tabela-wrap {
  border-color: var(--border);
  background-color: var(--surface);
  box-shadow: var(--shadow-card);
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .filter-select,
html[data-theme="light"] .search-input {
  border-color: var(--border);
  background-color: var(--surface);
  color: var(--text);
}

html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .btn-secondary {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text2);
}

table {
  font-variant-numeric: tabular-nums;
}

thead th,
.table thead th {
  background: color-mix(in srgb, var(--surface2) 74%, var(--surface));
  border-bottom: 1px solid var(--border);
  color: var(--text3);
  font-family: var(--font) !important;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .045em;
  text-transform: uppercase;
}

html[data-theme="light"] thead th,
html[data-theme="light"] .table thead th {
  background: color-mix(in srgb, var(--surface2) 74%, var(--surface));
  border-bottom-color: var(--border);
  color: var(--text3);
}

tbody tr {
  background-color: var(--surface);
}

tbody tr:hover {
  background-color: color-mix(in srgb, var(--surface2) 68%, var(--surface));
}

tbody td,
th {
  border-color: var(--border2);
}

/* Controls use the red brand focus and brief decelerating motion. */
.btn,
.btn-ghost,
.btn-primary,
.btn-secondary,
.filter-select,
.search-input,
.combo-input,
.field input,
.field select,
.field textarea,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border-radius: var(--radius-control);
  transition: color var(--motion-fast) var(--motion-standard),
    background-color var(--motion-fast) var(--motion-standard),
    border-color var(--motion-fast) var(--motion-standard),
    box-shadow var(--motion-fast) var(--motion-standard),
    transform var(--motion-fast) var(--motion-standard);
}

.btn {
  min-height: 36px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.btn-primary {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}

.btn-primary:hover {
  background: var(--accent-dark);
  box-shadow: none;
  transform: none;
}

.btn-danger-text,
.page-status.is-error,
.toast-erro {
  color: var(--danger);
}

.badge-red,
.erro-box {
  background: var(--danger-light);
  color: var(--danger);
}

.toast-erro {
  border-left-color: var(--danger);
}

:is(input, select, textarea, button, a[href], [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
}

.search-input:focus,
.combo-input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.dropdown,
.sb-search-results,
.multiselect-panel,
.combo-lista,
.remanejamento-pessoa-opcoes,
.rh-pessoa-opcoes,
.cadastro-planilha-marcacao-popover {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-glass);
  box-shadow: var(--shadow-float);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="light"] .modal,
html[data-theme="light"] .dropdown,
html[data-theme="light"] .sb-search-results,
html[data-theme="light"] .multiselect-panel,
html[data-theme="light"] .combo-lista,
html[data-theme="light"] .remanejamento-pessoa-opcoes,
html[data-theme="light"] .rh-pessoa-opcoes,
html[data-theme="light"] .cadastro-planilha-marcacao-popover {
  border-color: var(--border);
  background: var(--surface-glass);
  box-shadow: var(--shadow-float);
}

.modal {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface-glass);
  box-shadow: var(--shadow-float);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.modal-header {
  border-bottom-color: var(--border2);
}

.modal-footer {
  border-top-color: var(--border2);
  background: color-mix(in srgb, var(--surface2) 88%, transparent);
}

/* Retira o antigo divisor vermelho/branco e o destaque sazonal do cabeçalho. */
.neon-line,
.neon-line.forte {
  display: none !important;
}

/* Opaque dialog surface; dim the page without an expensive backdrop blur. */
.overlay {
  background: rgba(8, 10, 14, .62);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.overlay > .modal {
  border-color: var(--border);
  border-radius: 22px;
  background: var(--surface-glass);
  box-shadow: var(--shadow-float);
}

.overlay > .modal > .modal-header {
  background: transparent;
  border-bottom-color: var(--border2);
}

.overlay > .modal > .modal-header::after {
  display: none;
}

.overlay > .modal > .modal-footer {
  background: color-mix(in srgb, var(--surface2) 88%, transparent);
}

html[data-theme="light"] .overlay > .modal > .modal-header {
  background: transparent;
}

@supports (corner-shape: squircle) {
  .card,
  .panel,
  .chart-card,
  .modal,
  .dropdown,
  .table-wrap {
    corner-shape: squircle;
  }
}

@media (hover: hover) and (pointer: fine) {
  .card-interativo:hover,
  .person-card:hover,
  .cliente-aparelhos-card:hover {
    border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
    box-shadow: var(--shadow-card);
  }
}

/* Interações pequenas respondem rápido sem sobrescrever animações de layout
   (como abrir/fechar modais), que precisam manter seus próprios tempos. */
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="safe"] :where(button, a, input, select, textarea, [role="button"], .sb-item) {
    transition-property: color, background-color, border-color, opacity, transform !important;
    transition-duration: 120ms !important;
    transition-timing-function: ease-out !important;
    animation-delay: 0s !important;
  }
}

html {
  scroll-behavior: auto;
}

.inventario-skeleton {
  animation: none !important;
  background: var(--surface2) !important;
  background-size: auto !important;
}

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