/*
 * Padrão visual do HUB: escala de espaçamento, cantos, sombra e tipografia
 * usados pelos componentes em app/Views/components/. Complementa o
 * adminlte-overrides.css (que cuida só do mapeamento de cor de marca) —
 * este arquivo cuida de forma/proporção (o que fica igual em qualquer cor).
 */
:root {
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(11, 31, 59, .06);
  --shadow-md: 0 4px 16px rgba(11, 31, 59, .08);
}

.btn {
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.btn-lg {
  border-radius: var(--radius-md);
}
.btn-group-xs > .btn,
.btn-xs {
  padding: .25rem .4rem;
  font-size: .75rem;
  line-height: 1;
  border-radius: .2rem;
}

.card {
  border-radius: var(--radius-md);
  border: none;
  box-shadow: var(--shadow-sm);
}
.card.card-outline {
  border-top-width: 3px;
}
.card-header {
  border-top-left-radius: var(--radius-md) !important;
  border-top-right-radius: var(--radius-md) !important;
  background: transparent;
  border-bottom: 1px solid #e9ecef;
}
.card-title {
  font-weight: 600;
}

h1, .h1 { font-weight: 700; font-size: 1.75rem; letter-spacing: -.02em; }
h2, .h2 { font-weight: 700; font-size: 1.5rem; letter-spacing: -.01em; }
h3, .h3 { font-weight: 600; font-size: 1.25rem; }
h4, .h4 { font-weight: 600; font-size: 1.1rem; }
h5, .h5 { font-weight: 600; font-size: 1rem; }
h6, .h6 {
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .7;
}

.form-control, .custom-select {
  border-radius: var(--radius-sm);
}

.badge {
  border-radius: 999px;
  font-weight: 500;
  padding: .35em .75em;
}

.modal-content {
  border-radius: var(--radius-md);
  border: none;
}

/* ------------------------------------------------------------------
 * Padrão de listagem (extraído da tela Cadastros > Usuários) — usado
 * por components/_stat_chips, _alpha_filter, _table_open, _empty_state.
 * ------------------------------------------------------------------ */

/* Resumo clicável (chips com contagem) */
.hub-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.hub-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border: 1px solid #dee2e6; border-radius: 2rem; background: #fff; color: #495057; text-decoration: none !important; transition: all .15s; }
a.hub-chip:hover { border-color: var(--primary, #2F7EDB); color: var(--primary, #2F7EDB); }
.hub-chip-num { font-weight: 700; font-size: 1rem; }
.hub-chip-label { font-size: .85rem; }
.hub-chip-ok .hub-chip-num { color: #28a745; }
.hub-chip-off .hub-chip-num { color: #dc3545; }
.hub-chip.is-active, a.hub-chip.is-active:hover { background: var(--primary, #2F7EDB); border-color: var(--primary, #2F7EDB); color: #fff; }
.hub-chip.is-active .hub-chip-num { color: #fff; }
.hub-chip-sep { width: 1px; align-self: stretch; background: #dee2e6; margin: 0 .25rem; }

/* Filtro alfabético discreto */
.hub-alpha { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem; }
.hub-alpha a { min-width: 30px; padding: .15rem .45rem; text-align: center; border-radius: .25rem; color: #6c757d; font-size: .85rem; text-decoration: none !important; }
.hub-alpha a:hover { background: #e9ecef; color: #212529; }
.hub-alpha a.is-active { background: var(--primary, #2F7EDB); color: #fff; font-weight: 600; }

/* Tabela de listagem */
.table-hover > tbody > tr > td { vertical-align: middle; }
.table thead.thead-light th { border-bottom-width: 1px; }
tr.is-inactive td:not(:last-child) { opacity: .55; }

/* Título de seção dentro de formulários longos (components/_form_section) */
.hub-form-section { display: flex; align-items: center; font-weight: 600; font-size: .95rem; color: var(--primary, #2F7EDB); border-bottom: 1px solid #e9ecef; padding-bottom: .5rem; margin: 1.5rem 0 1rem; }
.hub-form-section:first-child { margin-top: 0; }

/* Abas de navegação entre visões de um módulo (components/_module_tabs) */
.hub-module-tabs { border-bottom: 1px solid #e9ecef; padding-bottom: .5rem; gap: .25rem; }
.hub-module-tabs .nav-link { border-radius: var(--radius-sm); padding: .4rem .9rem; font-weight: 600; font-size: .9rem; color: #495057; }
.hub-module-tabs .nav-link:hover:not(.active) { background: #e9ecef; color: #212529; }

/* Indicador de dashboard (components/_kpi_tile) */
.hub-kpi { display: flex; align-items: center; gap: .9rem; height: 100%; padding: .9rem 1rem; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border-left: 4px solid var(--kpi, #6c757d); color: inherit; text-decoration: none !important; transition: box-shadow .15s, transform .15s; }
.hub-kpi-link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); color: inherit; }
.hub-kpi-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; font-size: 1.2rem; color: var(--kpi, #6c757d); background: color-mix(in srgb, var(--kpi, #6c757d) 14%, #fff); }
.hub-kpi-body { display: flex; flex-direction: column; min-width: 0; }
.hub-kpi-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #6c757d; }
.hub-kpi-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: #212529; overflow-wrap: anywhere; }
.hub-kpi-hint { font-size: .78rem; color: #6c757d; }
.hub-kpi-primary { --kpi: var(--primary, #2F7EDB); }
.hub-kpi-success { --kpi: #28a745; }
.hub-kpi-warning { --kpi: #e0a800; }
.hub-kpi-danger { --kpi: #dc3545; }
.hub-kpi-info { --kpi: #17a2b8; }
.hub-kpi-secondary { --kpi: #6c757d; }

/* Cartões de navegação dos hubs (components/_nav_cards) */
.hub-nav-card { transition: box-shadow .15s, transform .15s; }
.hub-nav-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.hub-nav-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; font-size: 1.1rem; color: var(--kpi, #6c757d); background: color-mix(in srgb, var(--kpi, #6c757d) 14%, #fff); }