/* ==========================================================================
   DESKTOP.CSS — Hey, Teacher! Sistema de Gestão
   Estilos para telas médias e grandes (≥ 768px)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SIDEBAR — sempre visível no desktop
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  .sidebar {
    transform: translateX(0) !important;
  }

  .sidebar-close {
    display: none !important;
  }

  .sidebar-overlay {
    display: none !important;
  }

  .main-wrapper {
    margin-left: var(--sidebar-width);
  }

  .sidebar-toggle {
    display: none;
  }

}

/* --------------------------------------------------------------------------
   2. TOPBAR
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  .topbar {
    padding: 0 32px;
  }

  .topbar-title h2 {
    font-size: 1.25rem;
  }

  .topbar-actions {
    margin-right: 12px;
  }

  .topbar-title {
    margin-left: 12px;
  }
}

/* --------------------------------------------------------------------------
   3. PAGE CONTENT
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  .page-content {
    padding: 28px 32px;
    gap: 28px;
  }

}

@media (min-width: 1280px) {

  .page-content {
    padding: 32px 40px;
  }

}

/* --------------------------------------------------------------------------
   4. LOGIN PAGE
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {

  .login-card {
    padding: 44px 48px;
  }

}

/* --------------------------------------------------------------------------
   5. STATS GRID — layouts por breakpoint
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (min-width: 1024px) {

  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .stats-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .stats-grid--finance {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }

  /* Grid unificado de finanças: primeira coluna mais larga (card grande) */
  .finance-summary-section {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }

}

/* --------------------------------------------------------------------------
   6. CARDS GRID
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {

  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (min-width: 1024px) {

  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cards-grid--classes {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (min-width: 1280px) {

  .cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .cards-grid--classes {
    grid-template-columns: repeat(3, 1fr);
  }

}

/* --------------------------------------------------------------------------
   7. FORM ROWS — manter em linha no desktop
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {

  .form-row--2 {
    grid-template-columns: 1fr 1fr;
  }

  .form-row--3 {
    grid-template-columns: 1fr 1fr 1fr;
  }

}

/* --------------------------------------------------------------------------
   8. TOOLBAR
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  .toolbar {
    flex-wrap: nowrap;
  }

  .toolbar .search-wrapper {
    max-width: 320px;
  }

}

/* --------------------------------------------------------------------------
   8b. TOOLBAR ALINHADA AO STATS-GRID (4 colunas fixas) — frequência
   -------------------------------------------------------------------------- */

/* ≥1024px: espelha repeat(4, 1fr) do stats-grid.
   Os 4 filhos (search / datas / selects / botão) caem naturalmente em 1 coluna cada.
   O 5º filho (results-count) fica na linha de baixo, à direita. */
@media (min-width: 1024px) {

  .toolbar--stats-align {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: center;
    flex-wrap: unset;
  }

  /* Cancela o max-width do search-wrapper herdado do .toolbar genérico */
  .toolbar--stats-align .search-wrapper {
    max-width: none;
    flex: unset;
    width: 100%;
  }

  /* Datas: ocupa a coluna inteira — label + inputs fluem dentro do flex */
  .toolbar--stats-align .filter-group--dates {
    flex-wrap: wrap;
    width: 100%;
    gap: 6px;
  }

  .toolbar--stats-align .filter-group--dates .date-filter {
    flex: 1;
    min-width: 0;
  }

  .toolbar--stats-align .filter-group--dates .date-filter .form-input {
    width: 100%;
    min-width: 0;
  }

  /* Selects: cada um cresce para metade da coluna */
  .toolbar--stats-align .filter-group:not(.filter-group--dates) {
    width: 100%;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .toolbar--stats-align .filter-group:not(.filter-group--dates) .form-select {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  /* Botão "Limpar filtros": alinha à esquerda da coluna 4 */
  .toolbar--stats-align .btn {
    width: 100%;
    justify-content: center;
  }

  /* Results-count: segunda linha, alinhado à direita */
  .toolbar--stats-align .results-count {
    grid-column: 1 / -1;
    margin-left: auto;
  }

}

/* --------------------------------------------------------------------------
   8c. TOOLBAR ALINHADA AOS CARDS — espelha o cards-grid em cada breakpoint
   -------------------------------------------------------------------------- */

/* ≥640px: cards-grid = 2 colunas → search | filter-group */
@media (min-width: 640px) {

  .toolbar--cards-align {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    flex-wrap: unset;
  }

  /* Cancela o max-width que o .toolbar genérico impõe no search */
  .toolbar--cards-align .search-wrapper {
    max-width: none;
    flex: unset;
  }

  /* filter-group ocupa col 2: os dois selects ficam lado a lado dentro dele */
  .toolbar--cards-align .filter-group {
    flex-wrap: nowrap;
    width: 100%;
  }

  .toolbar--cards-align .filter-group .form-select {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  /* results-count desce para a segunda linha, alinhado à direita */
  .toolbar--cards-align .results-count {
    grid-column: 1 / -1;
    margin-left: auto;
  }

}

/* ≥1024px: cards-grid = 3 colunas → search | filter-group (span 2) */
@media (min-width: 1024px) {

  .toolbar--cards-align {
    grid-template-columns: repeat(3, 1fr);
  }

  .toolbar--cards-align .filter-group {
    grid-column: 2 / 4; /* ocupa colunas 2 e 3, cada select ≈ 1 card */
  }

}

/* ≥1280px: cards-grid = 4 colunas → search | filter-group (span 2) | vazio */
@media (min-width: 1280px) {

  .toolbar--cards-align {
    grid-template-columns: repeat(4, 1fr);
  }

  /* filter-group continua spanning 2 colunas (2 e 3), col 4 fica vazia */
  .toolbar--cards-align .filter-group {
    grid-column: 2 / 4;
  }

}

/* --------------------------------------------------------------------------
   9. PAYMENTS TOOLBAR — alinha com a grade de cards de pagamento
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  /* Espelha repeat(2, 1fr) do payment-cards-grid */
  .payments-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 12px;
  }

  .payment-filters      { grid-column: 1; }
  .table-view-toggle    { grid-column: 2; justify-self: end; }

}

@media (min-width: 1200px) {

  /* Espelha repeat(3, 1fr) do payment-cards-grid */
  .payments-toolbar {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .table-view-toggle { grid-column: 3; }

}

/* --------------------------------------------------------------------------
   10. INFO GRID (Student detail)
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {

  .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (min-width: 1024px) {

  .info-grid {
    grid-template-columns: repeat(3, 1fr);
  }

}

/* --------------------------------------------------------------------------
   11. MODAL — tamanhos no desktop
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  .modal-overlay {
    padding: 40px;
  }

  .modal {
    max-height: 88vh;
  }

  .modal--large {
    max-width: 820px;
  }

  .modal-overlay--large {
    padding-top: 60px;
    align-items: flex-start;
  }

}

/* --------------------------------------------------------------------------
   12. PAYMENT CARDS GRID & TOOLBAR
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  .payment-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (min-width: 1200px) {

  .payment-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }

}

/* --------------------------------------------------------------------------
   13. CALENDAR
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  .calendar-section .section-header {
    flex-wrap: nowrap;
  }

}

/* ≥1024px: section-header vira grid de 4 colunas, espelhando o stats-grid.
   O título ocupa colunas 1–3 e os botões ocupam a coluna 4 (= largura de
   um stat-card), alinhando visualmente com o card "Receita do Mês". */
@media (min-width: 1024px) {

  .calendar-section .section-header {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: center;
  }

  .calendar-section .section-title {
    grid-column: 1 / 4;
  }

  .calendar-section .calendar-view-controls {
    grid-column: 4;
    width: 100%;
  }

}

/* --------------------------------------------------------------------------
   14. TABS — espaçamento desktop
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  .tabs {
    padding: 0 32px;
  }

  .tab {
    padding: 16px 22px;
  }

}

/* --------------------------------------------------------------------------
   15. TABLE — mostrar todas as colunas no desktop
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  .data-table th,
  .data-table td {
    padding: 14px 20px;
  }

}

/* --------------------------------------------------------------------------
   16. TOPBAR — período selector e ações
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  .topbar-actions {
    gap: 12px;
  }

  .period-selector {
    padding: 5px 10px;
  }

  .period-label {
    min-width: 140px;
  }

}

/* --------------------------------------------------------------------------
   17. SIDEBAR — hover state e largura expandida
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  .sidebar:hover .nav-label {
    opacity: 1;
  }

}

/* --------------------------------------------------------------------------
   18. SCHEDULE ENTRY — grid em linha no desktop
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {

  .schedule-entry .form-row--3 {
    grid-template-columns: 1.5fr 1fr 1fr;
  }

}

/* --------------------------------------------------------------------------
   19. TOAST — posição desktop
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  .toast-container {
    bottom: 32px;
    right: 32px;
  }

  .toast {
    min-width: 280px;
  }

}

/* --------------------------------------------------------------------------
   20. FILTER GROUP — sem quebra no desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

  .toolbar--wrap {
    flex-wrap: nowrap;
  }

  .filter-group {
    flex-wrap: nowrap;
  }

  .filter-group--dates {
    flex-wrap: nowrap;
  }

}

/* --------------------------------------------------------------------------
   21. UPCOMING LIST — grid no desktop grande
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {

  .upcoming-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

}

/* --------------------------------------------------------------------------
   22. STAT CARD — layout interno ajustado
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {

  .stat-card {
    padding: 24px;
  }

  .stat-value {
    font-size: 1.75rem;
  }

}