@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ===== PALETA DE CORES NDV ===== */
:root {
  --ndv-black: #171717;  /* CORREÇÃO: Cor mais clara para dar leveza */
  --ndv-orange: #F8A173;
  --ndv-book-orange: #fa9f6c;  /* Cor laranja para ícone de livro */
  --ndv-light-gray: #D4D4D4;
  --ndv-medium-gray: #ABABAB;
  --ndv-dark-gray: #313131;
  --ndv-success: #28a745;
  --ndv-warning: #ffc107;
  --ndv-danger: #dc3545;
}

/* ===== FLATPICKR DARK THEME ===== */
.flatpickr-calendar {
  background: var(--ndv-dark-gray) !important;
  border: 1px solid #444 !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

.flatpickr-months {
  background: var(--ndv-dark-gray) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  background: var(--ndv-dark-gray) !important;
  color: var(--ndv-light-gray) !important;
}

.flatpickr-day {
  color: var(--ndv-light-gray) !important;
}

.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: #444 !important;
  border-color: #444 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--ndv-orange) !important;
  border-color: var(--ndv-orange) !important;
  color: #000 !important;
}

.flatpickr-day.inRange {
  background: rgba(248, 161, 115, 0.3) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.flatpickr-weekday {
  color: var(--ndv-medium-gray) !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: var(--ndv-light-gray) !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--ndv-orange) !important;
}

/* Input do Flatpickr - IDÊNTICO aos dropdowns */
#flatpickr-date-range-escalas {
  background-color: #2c2c2c !important;  /* Mesmo background dos dropdowns */
  border: 1px solid #495057 !important;  /* Mesma borda dos dropdowns */
  border-radius: 0.375rem !important;
  color: #ffffff !important;  /* Mesma cor de texto dos dropdowns */
  font-size: 12px !important;  /* Mesmo tamanho de fonte dos dropdowns */
  font-weight: 400 !important;
  line-height: 1.5 !important;
  padding: 8px 10px !important;  /* Mesmo padding dos dropdowns */
  height: 38px !important;  /* Mesma altura dos dropdowns */
  min-height: 38px !important;
}

#flatpickr-date-range-escalas:hover {
  border-color: var(--ndv-orange) !important;  /* Mesmo hover dos dropdowns */
}

#flatpickr-date-range-escalas:focus {
  background-color: #2c2c2c !important;
  border-color: var(--ndv-orange) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(248, 161, 115, 0.25) !important;
  outline: 0 !important;
}

#flatpickr-date-range-escalas::placeholder {
  color: #6c757d !important;
  opacity: 1 !important;
}

/* Mobile: reduzir fonte igual aos dropdowns */
@media (max-width: 576px) {
  #flatpickr-date-range-escalas {
    font-size: 11px !important;
  }
}

/* XS: ainda menor */
@media (max-width: 420px) {
  #flatpickr-date-range-escalas {
    font-size: 10px !important;
  }
}

/* ===== CLASSES DE COR CUSTOMIZADAS ===== */
.text-book-orange {
  color: var(--ndv-book-orange) !important;
}

/* ===== BACKGROUND GERAL ===== */
body {
  background-color: var(--ndv-black) !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--ndv-light-gray) !important;
}

/* ===== CONTAINER PRINCIPAL ===== */
.main-container {
  background-color: var(--ndv-black);
  min-height: 100vh;
}

/* ===== SIDEBAR ===== */
.sidebar {
  background-color: var(--ndv-dark-gray) !important;
  min-height: 100vh;
  height: 100vh;
  position: sticky;
  top: 0;
  padding: 0;
  overflow-y: auto;
}

.sidebar .nav-pills .nav-link {
  color: var(--ndv-light-gray) !important;
  border-radius: 8px;
  margin: 2px 8px;
  padding: 8px 16px;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.sidebar .nav-pills .nav-link:hover {
  background-color: var(--ndv-orange) !important;
  color: var(--ndv-black) !important;
  transform: translateX(4px);
}

.sidebar .nav-pills .nav-link.active {
  background-color: var(--ndv-orange) !important;
  color: var(--ndv-black) !important;
  font-weight: 600;
}

/* ===== LOGO E TÍTULO ===== */
.logo-container {
  padding: 20px 20px;
  text-align: left;
  border-bottom: 1px solid var(--ndv-medium-gray);
  margin-bottom: 15px;
}

.logo-title {
  color: var(--ndv-orange) !important;
  font-weight: 700;
  font-size: 1.8rem;
  margin: 0;
}

.logo-subtitle {
  color: var(--ndv-light-gray) !important;
  font-weight: 400;
  font-size: 0.9rem;
  margin: 5px 0 0 0;
}

/* ===== CARDS ===== */
.card {
  background-color: var(--ndv-dark-gray) !important;
  border: none !important;  /* CORREÇÃO: Sem borda fixa */
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;  /* CORREÇÃO: Sombra sutil */
  transition: all 0.3s ease;
}

.card:hover {
  border: 1px solid var(--ndv-orange) !important;  /* CORREÇÃO: Borda laranja só no hover */
  box-shadow: 0 4px 20px rgba(248, 161, 115, 0.2) !important;
}

.card-body {
  color: var(--ndv-light-gray) !important;
}

.card-title {
  color: var(--ndv-orange) !important;
  font-weight: 600;
}

/* ===== BOTÕES ===== */
.btn-primary {
  background-color: var(--ndv-orange) !important;
  border-color: var(--ndv-orange) !important;
  color: var(--ndv-black) !important;
  font-weight: 500;
}

.btn-primary:hover {
  background-color: #e6926a !important;
  border-color: #e6926a !important;
  color: var(--ndv-black) !important;
}

.btn-outline-primary {
  border-color: var(--ndv-orange) !important;
  color: var(--ndv-orange) !important;
}

.btn-outline-primary:hover {
  background-color: var(--ndv-orange) !important;
  color: var(--ndv-black) !important;
}

.btn-secondary {
  background-color: var(--ndv-medium-gray) !important;
  border-color: var(--ndv-medium-gray) !important;
  color: var(--ndv-black) !important;
}

/* ===== INPUTS E FORMS ===== */
.form-control {
  background-color: var(--ndv-black) !important;
  border-color: var(--ndv-medium-gray) !important;
  color: var(--ndv-light-gray) !important;
}

.form-control:focus {
  background-color: var(--ndv-black) !important;
  border-color: var(--ndv-orange) !important;
  color: var(--ndv-light-gray) !important;
  box-shadow: 0 0 0 0.2rem rgba(248, 161, 115, 0.25) !important;
}

.form-control::placeholder {
  color: var(--ndv-medium-gray) !important;
}

/* ===== DROPDOWNS DARK THEME ===== */
/* Aplicar tema dark aos dropdowns Dash Core Components */

/* Controle principal do dropdown */
.Select-control {
  background-color: #2c2c2c !important;
  border: 1px solid #495057 !important;
  color: #ffffff !important;
}

.Select-control:hover {
  border-color: var(--ndv-orange) !important;
}

.Select-control.is-focused {
  border-color: var(--ndv-orange) !important;
  box-shadow: 0 0 0 0.2rem rgba(248, 161, 115, 0.25) !important;
}

/* Menu do dropdown */
.Select-menu-outer {
  background-color: #2c2c2c !important;
  border: 1px solid #495057 !important;
}

.Select-menu {
  background-color: #2c2c2c !important;
}

/* Opções do dropdown */
.Select-option {
  background-color: #2c2c2c !important;
  color: #ffffff !important;
}

/* Hover e focus LARANJA NDV - seletores mais específicos */
.Select-option:hover,
.Select-option.is-focused,
div[class*="option"]:hover,
div[class*="option"]:focus {
  background-color: var(--ndv-orange) !important;
  color: var(--ndv-black) !important;
}

.Select-option.is-selected,
div[class*="option"][aria-selected="true"] {
  background-color: var(--ndv-orange) !important;
  color: var(--ndv-black) !important;
  font-weight: 600 !important;
}

/* Placeholder e valor selecionado - CORRIGIDO */
.Select-placeholder {
  color: #6c757d !important;
}

.Select-value,
.Select-value-label,
.Select-single-value {
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* Seletores modernos para React-Select */
div[class*="singleValue"] {
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* ===== CORREÇÃO: TEXTO DIGITADO NO CAMPO DE BUSCA DO DROPDOWN ===== */
/* Quando o usuário digita para filtrar opções, o texto deve ser branco */
.Select-input,
.Select-input input,
div[class*="Input"],
div[class*="Input"] input {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* Seta do dropdown */
.Select-arrow {
  border-color: #ffffff transparent transparent !important;
}

/* ===== REACT-SELECT MODERNO - SELETORES ADICIONAIS ===== */
/* Para versões mais recentes do React-Select */

/* Container principal */
div[class*="control"] {
  background-color: #2c2c2c !important;
  border-color: #495057 !important;
}

div[class*="control"]:hover {
  border-color: var(--ndv-orange) !important;
}

div[class*="control"][class*="focused"] {
  border-color: var(--ndv-orange) !important;
  box-shadow: 0 0 0 0.2rem rgba(248, 161, 115, 0.25) !important;
}

/* Menu dropdown */
div[class*="menu"] {
  background-color: #2c2c2c !important;
  border: 1px solid #495057 !important;
}

/* Indicadores (seta) */
div[class*="indicatorSeparator"] {
  background-color: #495057 !important;
}

div[class*="dropdownIndicator"] {
  color: #ffffff !important;
}

/* ===== CORREÇÃO ESPAÇO VAZIO TABELA ===== */
/* Remove espaço entre cabeçalho e dados da tabela */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
  border-spacing: 0 !important;
  border-collapse: collapse !important;
  width: 100% !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table thead th {
  padding: 12px !important;
  margin: 0 !important;
  border-bottom: none !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table tbody td {
  padding: 12px !important;
  margin: 0 !important;
  border-top: none !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

/* Tabelas responsivas: contêiner com overflowX para forçar scroll horizontal quando necessário */
.dash-table-container {
  overflow-x: auto !important;
}


/* Remove qualquer espaço extra */
.dash-table-container .dash-spreadsheet-container {
  padding: 0 !important;
  margin: 0 !important;
}

.dash-table-container {
  padding: 0 !important;
  margin: 0 !important;
}



/* ===== TABELAS ===== */
.table-dark {
  background-color: var(--ndv-dark-gray) !important;
  color: var(--ndv-light-gray) !important;
}

.table-dark th {
  background-color: var(--ndv-black) !important;
  border: none !important;  /* CORREÇÃO: Sem borda fixa */
  color: var(--ndv-orange) !important;
}

.table-dark td {
  border: none !important;  /* CORREÇÃO: Sem borda fixa */
}


/* ===== TABELA COMPACTA (fonte menor) ===== */
.table-compact { font-size: 0.80rem !important; }
@media (max-width: 576px) { .table-compact { font-size: 0.75rem !important; } }


/* Cabeçalho das tabelas Bootstrap com fundo laranja NDV e texto de alto contraste */
.table-head-orange thead th {
  background-color: #fa9f6c !important;
  color: #000000 !important;
  border: none !important;
}
.table-head-orange thead th .btn { color: #000000 !important; }
.table-head-orange thead th .btn:hover { opacity: 0.9; }
/* Botão de cabeçalho sem herdar cor inline para manter contraste no tema */
.table-head-orange thead th .table-header-btn { color: #000 !important; padding: 0; }
.table-head-orange thead th .table-header-btn .fas { font-size: 0.8em; }

/* Mobile: reduzir ainda mais fonte da tabela para caber sem scroll */
@media (max-width: 576px) {
  .table-compact { font-size: 0.70rem !important; }
  .table-compact td, .table-compact th { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; }
}
/* XS: encolher cabeçalhos numericos e permitir quebra de Aluno */
@media (max-width: 420px) {
  /* Evitar sobreposição: permitir quebra e reservar largura mínima para a coluna de Nome */
  .table-compact .col-aluno { min-width: 160px !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; }
  .table-compact .col-num { width: 1%; white-space: nowrap; }
}



/* ===== INDICADORES DE STATUS ===== */
.status-presente {
  color: var(--ndv-success) !important;
}

.status-ausente {
  color: var(--ndv-danger) !important;
}

.status-nao-conforme {
  color: var(--ndv-warning) !important;
}

/* ===== CORES DE FREQUÊNCIA/ADERÊNCIA ===== */
.frequencia-excelente {
  background-color: #d1f2eb !important;
  color: #155724 !important;
  border: 1px solid #c3e6cb !important;
}

.frequencia-boa {
  background-color: #fef9e7 !important;
  color: #856404 !important;
  border: 1px solid #faeaa3 !important;
}

.frequencia-critica {
  background-color: #f8d7da !important;
  color: #721c24 !important;
  border: 1px solid #f5c6cb !important;
}

.badge-presente {
  background-color: var(--ndv-success) !important;
}

.badge-ausente {
  background-color: var(--ndv-danger) !important;
}

.badge-nao-conforme {
  background-color: var(--ndv-warning) !important;
  color: var(--ndv-black) !important;
}

/* ===== ANIMAÇÕES ===== */
@keyframes pulse-orange {
  0% { box-shadow: 0 0 0 0 rgba(248, 161, 115, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(248, 161, 115, 0); }
  100% { box-shadow: 0 0 0 0 rgba(248, 161, 115, 0); }
}

.pulse-orange {
  animation: pulse-orange 2s infinite;
}

/* ===== NAVBAR / OFFCANVAS MOBILE ===== */
/* Esconde navbar do mobile em md+ */
@media (min-width: 768px) {
  .d-md-none { display: none !important; }
}

/* Ajustes do Offcanvas e botões */
#offcanvas-sidebar .btn { width: 100%; }
#offcanvas-sidebar .nav-link { padding: 10px 14px; }
#offcanvas-sidebar .logo-container { padding: 12px 16px; }

/* Ajustes para garantir tocabilidade */
@media (max-width: 576px) {
  .btn { min-height: 40px; }
  .sidebar .nav-pills .nav-link { font-size: 0.95rem; }
}
/* ===== FIX: z-index de overlays (Offcanvas acima de dropdowns) ===== */
#offcanvas-sidebar { z-index: 1045 !important; }  /* Bootstrap 5 padrão */
.offcanvas-backdrop { z-index: 1040 !important; }  /* Bootstrap 5 padrão */
/* Menus do react-select/dcc.Dropdown */
.Select-menu-outer {
  z-index: 1000 !important;          /* Bootstrap: dropdowns ~1000; abaixo de Offcanvas/Modal */
  max-height: 56vh !important;       /* limita altura do menu */
  overflow-y: auto !important;       /* habilita scroll */
  margin-top: 6px !important;        /* separa do campo */
  box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important; /* sombra para legibilidade */
}
/* Seletores modernos (react-select v2+) */
div[class*="menu"],
div[class*="menuList"],
div[class*="MenuList"],
div[class*="Menu"] {
  z-index: 1000 !important;          /* Bootstrap dropdown level */
  max-height: 56vh !important;
  overflow-y: auto !important;
  margin-top: 6px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important;
}
/* Evita clipping: containers de filtros não devem cortar o menu
   Escopo reduzido apenas para contêineres de filtros (evita "vazamentos" gerais) */
.frequencia-geral-filters, .evc-filters, .filters-container {
  overflow: visible !important;
}

/* Padrão global: controles de dropdown não elevam z-index; menus atuam como overlay */
.dash-dropdown,
.Select,
.Select-control,
div[class*="control"] {
  position: relative !important;
  z-index: auto !important;
}
.dash-dropdown { overflow: visible !important; }



/* Garante que as opções não “vazem” para fora do container pai */
.Select-menu, div[class*="menuList"] {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important; /* rolagem suave no iOS */
}





/* ===== RESPONSIVIDADE ===== */
@media (max-width: 768px) {
  .sidebar {
    position: relative;
    min-height: auto;
  }

  .logo-title {
    font-size: 1.4rem;
  }

  .card {
    margin-bottom: 15px;
  }
}

/* ===== TEXTOS GERAIS ===== */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  color: var(--ndv-light-gray) !important;
  font-weight: 600;
}

.text-orange {
  color: var(--ndv-orange) !important;
}

.text-muted {
  color: var(--ndv-medium-gray) !important;
}

/* ===== ALINHAMENTO SIDEBAR - TUDO À ESQUERDA ===== */
.sidebar * {
  text-align: left !important;
}

.sidebar .nav-link {
  text-align: left !important;
  justify-content: flex-start !important;
}

.sidebar .text-muted {
  text-align: left !important;
}

/* ===== LOADING SPINNER ===== */
.spinner-border-orange {
  border-color: var(--ndv-orange);
  border-right-color: transparent;
}

/* ===== PÁGINA FREQUÊNCIA GERAL - ESPAÇAMENTOS E CORES ===== */

/* Container dos filtros com margens adequadas */
.frequencia-geral-filters {
  margin: 20px 0 30px 0 !important;
  padding: 25px !important;
  background-color: var(--ndv-dark-gray) !important;
  border-radius: 8px !important;
  border: none !important;  /* CORREÇÃO: Removida borda fixa */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;  /* CORREÇÃO: Sombra sutil */
  transition: all 0.3s ease !important;
}

.frequencia-geral-filters:hover {
  border: 1px solid var(--ndv-orange) !important;  /* CORREÇÃO: Borda laranja no hover */
  box-shadow: 0 4px 20px rgba(248, 161, 115, 0.2) !important;
}

/* ===== LIMPEZA - REMOVIDAS DEFINIÇÕES DUPLICADAS ===== */

/* ===== TABELA - TEMA DARK NATIVO ===== */
/* Remover cabeçalho duplo "filter data..." */
.dash-table-container .dash-filter {
  display: none !important;
}

/* ===== REMOÇÃO COMPLETA DE BORDAS E LINHAS DE GRADE ===== */
/* Remove todas as bordas das células da tabela */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table th,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table td {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* Remove bordas da tabela inteira */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
  border: none !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Remove linha fantasma do segundo cabeçalho */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dash-header {
  border: none !important;
}

/* ===== REMOÇÃO DA LINHA VAZIA APÓS CABEÇALHO ===== */
/* Remove filtros nativos que criam linha vazia */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dash-filter-row {
  display: none !important;
}

/* Remove elementos de filtro que aparecem como linha vazia */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr.dash-filter {
  display: none !important;
}

/* Remove qualquer linha vazia entre cabeçalho e dados */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner thead tr:not(:first-child) {
  display: none !important;
}

/* Remove linha de filtro específica */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dash-spreadsheet-inner-container .dash-filter {
  display: none !important;
}

/* Remove qualquer borda residual */
.dash-table-container {
  border: none !important;
}

.dash-table-container .dash-spreadsheet-container {
  border: none !important;
}

/* ===== LIMPEZA TOTAL DE ELEMENTOS INDESEJADOS ===== */
/* Remove qualquer elemento que possa criar linhas vazias */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dash-spreadsheet-inner-container .dash-filter-row,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dash-spreadsheet-inner-container .dash-filter,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dash-spreadsheet-inner-container tr[data-dash-row="filter"],
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dash-spreadsheet-inner-container .dash-cell.dash-cell-filter {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove separadores e linhas de divisão */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table tbody tr:first-child td {
  border-top: none !important;
}

/* Garante que não há espaçamento entre cabeçalho e primeira linha de dados */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table thead th {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 12px !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table tbody tr:first-child td {
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 12px !important;
}

/* ===== PADRONIZAÇÃO GLOBAL - CARDS DE RESUMO ===== */
/* Cards de estatísticas padronizados para todas as escolas */
.stats-card {
  background-color: var(--ndv-dark-gray) !important;
  border: none !important;  /* CORREÇÃO: Sem borda fixa */
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;  /* CORREÇÃO: Sombra sutil */
  transition: all 0.3s ease;
  height: 100% !important;
  min-height: 120px !important;
}

.stats-card:hover {
  border: 1px solid var(--ndv-orange) !important;  /* CORREÇÃO: Borda laranja só no hover */
  box-shadow: 0 4px 20px rgba(248, 161, 115, 0.2) !important;
}

.stats-card .card-body {
  padding: 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.stats-card h3 {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
  line-height: 1 !important;
}

.stats-card h6 {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.2 !important;
}

.stats-card p {
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  margin-bottom: 0 !important;
  color: var(--ndv-medium-gray) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* ===== CORES PADRONIZADAS PARA ESTATÍSTICAS ===== */
.text-success {
  color: var(--ndv-success) !important;
}

.text-danger {
  color: var(--ndv-danger) !important;
}

.text-warning {
  color: var(--ndv-warning) !important;
}

.text-info {
  color: #17a2b8 !important;
}

.text-primary {
  color: var(--ndv-orange) !important;
}

/* ===== BOTÕES PADRONIZADOS ===== */
/* Todos os botões primários devem usar a cor laranja NDV */
.btn-primary,
button[class*="btn-primary"],
.dash-button[class*="primary"] {
  background-color: var(--ndv-orange) !important;
  border-color: var(--ndv-orange) !important;
  color: var(--ndv-black) !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  padding: 0.5rem 1rem !important;
  transition: all 0.3s ease !important;
}

.btn-primary:hover,
button[class*="btn-primary"]:hover,
.dash-button[class*="primary"]:hover {
  background-color: #e6926a !important;
  border-color: #e6926a !important;
  color: var(--ndv-black) !important;
  box-shadow: 0 4px 12px rgba(248, 161, 115, 0.3) !important;
}

/* Botão secundário padronizado */
.btn-secondary {
  background-color: var(--ndv-medium-gray) !important;
  border-color: var(--ndv-medium-gray) !important;
  color: var(--ndv-black) !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
}

.btn-secondary:hover {
  background-color: var(--ndv-light-gray) !important;
  border-color: var(--ndv-light-gray) !important;
  color: var(--ndv-black) !important;
}

/* ===== BOTÕES DE APROVAÇÃO/REJEIÇÃO ===== */
/* Aplicar apenas em contextos específicos para não afetar outros botões */
/* Botão de aprovar - verde sólido (apenas em tabelas e modais de aprovação) */
table .btn-success,
#modal-confirmacao-aprovacao .btn-success,
button[id*="btn-aprovar"],
button[id*="btn-confirmar-aprovacao"] {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
  color: #ffffff !important;
  font-weight: 500 !important;
}

table .btn-success:hover,
#modal-confirmacao-aprovacao .btn-success:hover,
button[id*="btn-aprovar"]:hover,
button[id*="btn-confirmar-aprovacao"]:hover {
  background-color: #218838 !important;
  border-color: #1e7e34 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3) !important;
}

/* Botão de rejeitar - vermelho sólido (apenas em tabelas e modais de aprovação) */
table .btn-danger,
#modal-confirmacao-aprovacao .btn-danger,
button[id*="btn-rejeitar"] {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #ffffff !important;
  font-weight: 500 !important;
}

table .btn-danger:hover,
#modal-confirmacao-aprovacao .btn-danger:hover,
button[id*="btn-rejeitar"]:hover {
  background-color: #c82333 !important;
  border-color: #bd2130 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3) !important;
}

/* ===== CABEÇALHOS PADRONIZADOS ===== */
/* Cabeçalho laranja para páginas gerais */
.page-header {
  color: var(--ndv-orange) !important;
  font-weight: 700 !important;
  margin-bottom: 2rem !important;
  border-bottom: 1px solid var(--ndv-orange) !important;
  padding-bottom: 0.5rem !important;
}

/* Cabeçalho branco para escolas - NOVA CLASSE */
.page-header-white {
  color: white !important;
  font-weight: 700 !important;
  margin-bottom: 2rem !important;
  border-bottom: 1px solid white !important;
  padding-bottom: 0.5rem !important;
}


/* XS: reduzir paddings e fontes */
@media (max-width: 576px) {
  .school-container { padding-left: 12px !important; padding-right: 12px !important; }
  .card .card-body { padding: 12px !important; }
  .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table thead th { padding: 8px !important; font-size: 12px !important; }
  .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table tbody td { padding: 8px !important; font-size: 13px !important; }
  .form-label { font-size: 0.9rem !important; }
  .page-header-white { font-size: 1.4rem !important; }
}


/* ===== TABELA RESPONSIVA (mobile: cards sem scroll) ===== */
@media (max-width: 575.98px) {
  /* Ajustes visuais para cards da versão mobile da tabela */
  .card .card-body .row { margin-left: 0 !important; margin-right: 0 !important; }
  .card .card-body .row > [class^="col"] { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Tabelas responsivas padrão Bootstrap — sem transformação empilhada */
/* Use sempre .table-responsive ao redor da .table para scroll horizontal em telas pequenas */


/* Container com margens adequadas - UX/UI */
.school-container {
  padding-top: 24px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-bottom: 20px !important;
}

.card-header {
  background-color: var(--ndv-black) !important;
  border-bottom: 1px solid var(--ndv-medium-gray) !important;
  color: var(--ndv-orange) !important;
  font-weight: 600 !important;
}

/* ===== RESPONSIVIDADE PARA CARDS ===== */
@media (max-width: 768px) {
  .stats-card h3, .stats-card h4, .stats-card .h4 {
    font-size: 1.6rem !important;
  }

  .stats-card .card-body {
    padding: 0.9rem !important;
    min-height: 88px !important;
  }
}

/* XS extra tight for side-by-side on small phones */
@media (max-width: 420px) {
  .stats-card .card-body { padding: 0.75rem !important; }
  .stats-card h3, .stats-card h4, .stats-card .h4 { font-size: 1.4rem !important; }
}

/* ===== EVC: ajustes dos cards de resumo ===== */
.evc-stats .card-body { padding: 16px !important; }
.evc-stats h2 { font-size: 32px !important; line-height: 1 !important; }
.evc-stats .stat-label {
  font-size: 11px !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}
@media (max-width: 575.98px) {
  .evc-stats h2 { font-size: 28px !important; }
  .evc-stats .stat-label { font-size: 10px !important; }
}

/* ===== UTILITÁRIOS E COMPACTAÇÃO GLOBAL DE CARDS DE RESUMO ===== */
/* Força não quebrar linha quando desejado */
.nowrap { white-space: nowrap !important; }

/* Versão compacta para manter tudo lado a lado em telas pequenas */
.compact-stats h2 { font-size: 28px !important; line-height: 1 !important; }
.compact-stats .stat-label { font-size: 10px !important; }
/* XS muito estreito: suprimir texto para caber lado a lado */
@media (max-width: 420px) {
  .compact-stats .label-short { display: inline !important; }
  .compact-stats .label-full { display: none !important; }
}
@media (min-width: 421px) {
  .compact-stats .label-short { display: none !important; }
  .compact-stats .label-full { display: inline !important; }
}

/* ===== GLOBAL LABEL SHORT/FULL (para cabeçalhos de tabela e afins) ===== */
@media (max-width: 420px) {
  .label-short { display: inline !important; }
  .label-full { display: none !important; }
}
@media (min-width: 421px) {
  .label-short { display: none !important; }
  .label-full { display: inline !important; }
}

.compact-stats .status-text { font-size: 14px !important; white-space: nowrap !important; }
@media (max-width: 575.98px) {
  .compact-stats h2 { font-size: 20px !important; }
  .compact-stats .status-text { font-size: 12px !important; }
}

/* ===== DROPDOWN: FONTE REDUZIDA PARA NOMES LONGOS (OPÇÃO AGRESSIVA) ===== */
/* Controle do dropdown (campo selecionado) */
.Select-control,
.Select-value,
.Select-value-label,
.Select-single-value,
div[class*="singleValue"],
div[class*="control"] {
  font-size: 12px !important;  /* Padrão: ~16px → 12px (-25%) */
}

/* Menu do dropdown (opções) */
.Select-option,
.Select-menu,
div[class*="option"],
div[class*="menu"] {
  font-size: 12px !important;  /* Padrão: ~16px → 12px (-25%) */
}

/* Placeholder */
.Select-placeholder {
  font-size: 12px !important;
}

/* Mobile: reduzir ainda mais */
@media (max-width: 576px) {
  .Select-control,
  .Select-value,
  .Select-value-label,
  .Select-single-value,
  .Select-option,
  .Select-placeholder,
  div[class*="singleValue"],
  div[class*="option"],
  div[class*="control"] {
    font-size: 11px !important;  /* Mobile: 12px → 11px */
  }
}

/* XS: ainda menor para telas muito pequenas */
@media (max-width: 420px) {
  .Select-control,
  .Select-value,
  .Select-value-label,
  .Select-single-value,
  .Select-option,
  .Select-placeholder,
  div[class*="singleValue"],
  div[class*="option"],
  div[class*="control"] {
    font-size: 10px !important;  /* XS: 11px → 10px */
  }
}

/* ===== HOME - RESPONSIVIDADE MOBILE ===== */
/* Cards principais - layout compacto mobile (2x2 grid) */
@media (max-width: 767.98px) {
  /* Cards principais - layout vertical compacto */
  #total-alunos-home,
  #total-escolas-home,
  #total-presencas-home,
  #freq-media-home {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }

  /* Labels dos cards principais - reduzir */
  .card-body .small {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
  }

  /* Reduzir padding dos cards principais no mobile */
  .card-body.py-3 {
    padding: 0.75rem !important;
  }
}

@media (max-width: 575.98px) {
  /* Cards de escolas - ajustar estatísticas */
  .card-body h3 {
    font-size: 1.3rem !important;
  }

  /* Gráficos - reduzir altura no mobile */
  .js-plotly-plot {
    min-height: 250px !important;
  }

  /* Próximas aulas - ajustar layout */
  #proximas-aulas-home .row > div[class*="col-"] {
    flex: 0 0 auto !important;
  }

  /* Títulos de seção */
  h4 {
    font-size: 1.1rem !important;
  }

  /* Card headers */
  .card-header h5 {
    font-size: 1rem !important;
  }
}

/* Ajuste para telas muito pequenas (< 360px) */
@media (max-width: 359.98px) {
  /* Cards principais - ainda mais compactos */
  #total-alunos-home,
  #total-escolas-home,
  #total-presencas-home,
  #freq-media-home {
    font-size: 1.2rem !important;
  }

  .card-body .small {
    font-size: 0.65rem !important;
  }

  .card-body.py-3 {
    padding: 0.5rem !important;
  }

  /* Cards de escolas */
  .card-body h3 {
    font-size: 1.1rem !important;
  }
}