/* ==============================================
   RESPONSIVIDADE - Melhorias para dispositivos móveis
   ============================================== */

/* --- LOGIN MOBILE: fundo com imagem + card flutuante --- */
@media (max-width: 991.98px) {
  /* Aplica a imagem da empresa como fundo de toda a página */
  .page-header.min-vh-100 {
    background-image:
      linear-gradient(
        to bottom,
        rgba(var(--primary-color-login), 0.55),
        rgba(var(--primary-color-login), 0.75)
      ),
      var(--logo-login-url);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
  }

  /* Card do formulário: efeito vidro */
  #bloco-login .card-plain {
    background: rgba(255, 255, 255, 0.93) !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
    padding: 0.5rem 0.75rem !important;
  }

  /* Sombra no texto do cabeçalho mobile */
  #login-mobile-header h3,
  #login-mobile-header p {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  }

  /* Centraliza tudo verticalmente */
  .page-header .container > .row {
    min-height: 100vh;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
}

/* --- 1. Sidebar: backdrop escuro ao abrir no mobile --- */
@media (max-width: 1199.98px) {
  /* Backdrop cobre o conteúdo por trás do sidenav */
  body.g-sidenav-pinned::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 998;
  }

  /* Sidenav sempre acima do backdrop para os itens serem clicáveis */
  #sidenav-main {
    z-index: 1050 !important;
  }
}

/* --- 2. Toast: ajustar para caber na tela pequena --- */
@media (max-width: 576px) {
  #wrapper-toast {
    width: 100%;
    padding: 8px;
    top: 0;
    left: 0;
    right: 0;
  }
  #toast {
    width: 100%;
    transform: translate(110vw);
  }
}

/* --- 3. Gráficos: remover largura fixa no mobile --- */
@media (max-width: 767.98px) {
  #chart-pie {
    width: 100% !important;
    height: 300px !important;
  }
  #chart-main {
    height: 300px !important;
  }
}

/* --- DASHBOARD: grid 2x2 com altura igual em todos os 4 cards --- */
@media (max-width: 1199.98px) {
  /* CSS Grid força todas as células com a mesma altura (grid-auto-rows: 1fr) */
  #dashboard-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 1rem;
  }
  /* Reseta o col bootstrap para não interferir no grid */
  #dashboard-cards > [class*="col"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Card ocupa toda a célula do grid */
  #dashboard-cards .card {
    height: 100%;
  }
}

@media (max-width: 575.98px) {
  #dashboard-cards .card-body {
    padding: 0.75rem !important;
  }
  #dashboard-cards .numbers p {
    font-size: 0.7rem;
  }
  #dashboard-cards .numbers h5 {
    font-size: 1rem;
  }
  #dashboard-cards .icon.icon-shape {
    width: 36px;
    height: 36px;
  }
}

/* --- DASHBOARD: tabela "Últimas vendas" sem gap, sem paginação, sem scroll horizontal --- */
@media (max-width: 767.98px) {
  /* Remove o espaço entre os cards e a tabela */
  #dashboard-sales-row {
    margin-top: 0.5rem !important;
  }

  /* Esconde paginação e scroll horizontal só desta tabela */
  #dashboard-sales-table_wrapper .dataTables_paginate,
  #dashboard-sales-table_wrapper .dataTables_info {
    display: none !important;
  }
  #dashboard-sales-table_wrapper .table-responsive {
    overflow-x: hidden !important;
  }
}

/* --- DATATABLES: colunas secundárias ocultas + ação sticky no mobile --- */
@media (max-width: 767.98px) {
  /* Oculta Data (4ª col) e Valor (5ª col) — menos críticas no mobile */
  .table th:nth-child(4),
  .table td:nth-child(4),
  .table th:nth-child(5),
  .table td:nth-child(5) {
    display: none;
  }

  /* Nome do cliente (2ª col): trunca com reticências para liberar espaço */
  .table td:nth-child(2) {
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Ação (última col) sempre visível — sticky à direita */
  .table-responsive {
    position: relative;
  }
  .table th:last-child,
  .table td:last-child {
    position: sticky;
    right: 0;
    background: #fff;
    box-shadow: -3px 0 6px rgba(0, 0, 0, 0.08);
    z-index: 1;
  }
}

/* --- 4. Colunas de formulários: empilhar no mobile ---
   col-1..col-6 sem prefixo de breakpoint são fixas em qualquer tela.
   Dentro de cards e modais, forçamos 100% no mobile.
*/
@media (max-width: 767.98px) {
  .card .container .row > [class*="col-"],
  .card .container .row > .col,
  .modal-body .row > [class*="col-"],
  .modal-body .row > .col {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding-right: 0.75rem !important;
  }
}

/* --- 5. Filtros: empilhar no mobile --- */
@media (max-width: 767.98px) {
  .filter-container {
    flex-direction: column;
  }
  .filter-col {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 0.5rem;
  }
  .btn-responsive {
    width: 100%;
  }
}

/* --- 6. Navbar: espaçamento e alinhamento no mobile --- */
@media (max-width: 1199.98px) {
  /* Flexbox com espaço bem distribuído entre hamburger, título e sair */
  .navbar-main .container-fluid {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    gap: 0.5rem;
  }

  /* Título/breadcrumb ocupa o espaço disponível no meio */
  .navbar-main .container-fluid > nav[aria-label="breadcrumb"] {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Garante que o collapse apareça inline (não empilhado) no mobile */
  .navbar-main .navbar-collapse {
    display: flex !important;
    flex: 0 0 auto;
    width: auto;
  }

  /* Remove margens extras do ms-auto que quebram o layout */
  .navbar-main .ms-md-auto {
    display: none;
  }
}

@media (max-width: 576px) {
  .navbar-main .container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .navbar-main .breadcrumb {
    font-size: 0.7rem;
  }
  .navbar-main h6 {
    font-size: 0.85rem;
  }
  /* Notificações: ícone menor no mobile */
  .navbar-main .nav-item.dropdown {
    padding-right: 0.25rem !important;
  }
}

/* --- SPINNER: overlay com blur no backdrop --- */
body:has(#spinner.show) .modal-backdrop {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#spinner.show {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#spinner .modal-dialog {
  margin: 0 auto !important;
  width: 180px !important;
  max-width: 180px !important;
}

/* --- 7. Tabelas: scroll suave no iOS --- */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* --- 8. Modal: ocupar tela toda no mobile --- */
@media (max-width: 576px) {
  .modal-dialog.modal-xl,
  .modal-dialog.modal-lg {
    margin: 0.5rem;
    max-width: calc(100vw - 1rem);
  }
}

/* --- EXTRATO: layout mobile simplificado --- */
@media (max-width: 767.98px) {
  /* Oculta tabelas e botão Pesquisar — no mobile só PDF/EXCEL */
  #statement-btn-pesquisar-wrap { display: none !important; }
  .statement-table-sale,
  .statement-table-outgoing,
  .statement-table-venda,
  .statement-table-boleto { display: none !important; }

  /* Filtros: empilhar verticalmente */
  #statement-filters {
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 1rem !important;
  }

  /* Modelo Extrato: largura total e select maior */
  #statement-filters > .col-2 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
  }
  #statement-filters > .col-2 #type-statement {
    width: 100% !important;
    font-size: 1rem;
    padding: 0.6rem 0.75rem;
    height: auto;
  }

  /* Campos de cada modelo: grid 2 colunas */
  #statement-filters .sale-model,
  #statement-filters .sale-outgoing,
  #statement-filters .sale-venda,
  #statement-filters .sale-boleto {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0 !important;
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0 !important;
  }
  #statement-filters .sale-model > [class*="col"],
  #statement-filters .sale-outgoing > [class*="col"],
  #statement-filters .sale-venda > [class*="col"],
  #statement-filters .sale-boleto > [class*="col"] {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Botões PDF/EXCEL: lado a lado, proeminentes */
  #statement-actions {
    justify-content: center !important;
    gap: 0.75rem;
    padding: 0.75rem 1rem !important;
    flex-wrap: nowrap;
  }
  #statement-actions > div {
    flex: 1;
    max-width: 160px;
    padding: 0 !important;
    margin-top: 0 !important;
  }
  #btn-pdf-statement,
  #btn-excel-statement {
    width: 100%;
    padding: 0.75rem 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-radius: 0.75rem;
  }

  /* Card header: título mais compacto */
  .card-header.modal-herader {
    padding: 0.75rem 1rem 0.5rem !important;
  }
}

/* --- VENDAS: ajustes mobile --- */
@media (max-width: 767.98px) {
  #sales-table-card .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #btn-create-sale {
    font-size: 0.75rem;
    padding: 0.4rem 0.5rem;
  }

  /* filter-col-4 também empilha no mobile */
  .filter-col-4 {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    margin-bottom: 0.5rem;
  }

  /* Oculta Telefone (col 3), Valor Total (col 5, regra genérica) e Data Hora (col 6) */
  #sale-table th:nth-child(3),
  #sale-table td:nth-child(3),
  #sale-table th:nth-child(6),
  #sale-table td:nth-child(6) {
    display: none;
  }

  /* Override: mantém Status (col 4) visível */
  #sale-table th:nth-child(4),
  #sale-table td:nth-child(4) {
    display: table-cell !important;
  }

  /* Nome Cliente (col 2): trunca mais curto para dar espaço ao Status */
  #sale-table td:nth-child(2) {
    max-width: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* --- AGENDA: ajustes mobile --- */
@media (max-width: 767.98px) {
  /* Header: título em cima, botões embaixo em linha */
  #appointments-calender .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #appointments-calender .card-header > div {
    display: flex;
    gap: 0.5rem;
    width: 100%;
  }
  #btn-new-appointment-mobile,
  #btn-export-schedule {
    flex: 1;
    font-size: 0.75rem;
    padding: 0.4rem 0.5rem;
    white-space: nowrap;
  }

  /* Body: empilha calendário e painel lateral */
  #appointments-calender .card-body {
    flex-direction: column !important;
    padding: 0.75rem !important;
  }

  /* Calendário: ocupa toda a largura */
  #appointments-calender .col-10 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Painel lateral: abaixo do calendário, altura limitada com scroll */
  #appointments-calender .col-2 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.75rem 0 0 0 !important;
    padding: 0.75rem !important;
    max-height: 220px;
    overflow-y: auto;
  }

  #side-appointments-container {
    height: auto !important;
  }

  /* listMonth: fonte mais legível */
  .fc-list-event-title {
    font-size: 0.85rem;
  }
  .fc-list-day-text,
  .fc-list-day-side-text {
    font-size: 0.8rem;
  }
}

/* --- MODAL SERVIÇOS DO CLIENTE: ajustes mobile --- */
@media (max-width: 767.98px) {
  /* Oculta Data Lançamento (col 2) para liberar espaço */
  #clients-service-table th:nth-child(2),
  #clients-service-table td:nth-child(2) {
    display: none;
  }

  /* Override: mantém Status (col 4) e Ação (col 5) visíveis */
  #clients-service-table th:nth-child(4),
  #clients-service-table td:nth-child(4),
  #clients-service-table th:nth-child(5),
  #clients-service-table td:nth-child(5) {
    display: table-cell !important;
  }
}

/* --- DESPESAS: ajustes mobile --- */
@media (max-width: 767.98px) {
  #expenses-table-card .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #btn-create-expense {
    font-size: 0.75rem;
    padding: 0.4rem 0.5rem;
  }

  /* Oculta Quantidade (col 3) e Origem (col 5, já ocultada pela regra genérica) */
  #expenses-table th:nth-child(3),
  #expenses-table td:nth-child(3) {
    display: none;
  }

  /* Override: mantém Preço (col 4) visível */
  #expenses-table th:nth-child(4),
  #expenses-table td:nth-child(4) {
    display: table-cell !important;
  }

  /* Descrição (col 2): trunca */
  #expenses-table td:nth-child(2) {
    max-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* --- PRODUTOS: ajustes mobile --- */
@media (max-width: 767.98px) {
  #products-table-card .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #btn-create-product {
    font-size: 0.75rem;
    padding: 0.4rem 0.5rem;
  }

  /* Oculta Data de entrega (col 2) — Tipo (col 4) e Preço (col 5) já ocultados pela regra genérica */
  #products-table th:nth-child(2),
  #products-table td:nth-child(2) {
    display: none;
  }

  /* Descrição (col 1): trunca */
  #products-table td:nth-child(1) {
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* --- PROFISSIONAIS: ajustes mobile --- */
@media (max-width: 767.98px) {
  #employees-table-card .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #btn-create-employee {
    font-size: 0.75rem;
    padding: 0.4rem 0.5rem;
  }

  /* Oculta CPF/CNPJ (col 2), E-mail (col 4) e Telefone (col 5) */
  #employee-table th:nth-child(2),
  #employee-table td:nth-child(2),
  #employee-table th:nth-child(4),
  #employee-table td:nth-child(4),
  #employee-table th:nth-child(5),
  #employee-table td:nth-child(5) {
    display: none;
  }

  /* Mantém Status (col 6) visível */
  #employee-table th:nth-child(6),
  #employee-table td:nth-child(6) {
    display: table-cell !important;
  }

  /* Nome (col 3): trunca */
  #employee-table td:nth-child(3) {
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* --- CLIENTES: ajustes mobile --- */
@media (max-width: 767.98px) {
  /* Header: título em cima, botão embaixo em linha */
  #clients-table-card .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #btn-create-client {
    font-size: 0.75rem;
    padding: 0.4rem 0.5rem;
  }

  /* Tabela clientes: oculta CPF/CNPJ (col 2), E-mail (col 4) e Telefone (col 5) */
  #clients-table th:nth-child(2),
  #clients-table td:nth-child(2),
  #clients-table th:nth-child(4),
  #clients-table td:nth-child(4),
  #clients-table th:nth-child(5),
  #clients-table td:nth-child(5) {
    display: none;
  }

  /* Mantém Status (col 6) visível — override da regra genérica */
  #clients-table th:nth-child(6),
  #clients-table td:nth-child(6) {
    display: table-cell !important;
  }

  /* Nome (col 3): trunca mais curto para dar espaço ao Status e Ações */
  #clients-table td:nth-child(3) {
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* --- USUÁRIOS: ajustes mobile --- */
@media (max-width: 767.98px) {
  /* Header: título em cima, botões embaixo em linha */
  #users-table-card .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #users-table-card .card-header > div {
    display: flex;
    gap: 0.5rem;
    width: 100%;
  }
  #btn-create-profiles,
  #btn-create-user {
    flex: 1;
    font-size: 0.75rem;
    padding: 0.4rem 0.5rem;
    white-space: nowrap;
  }

  /* Tabela usuários: oculta E-mail (col 3) e Nível (col 4) */
  #users-table th:nth-child(3),
  #users-table td:nth-child(3),
  #users-table th:nth-child(4),
  #users-table td:nth-child(4) {
    display: none;
  }

  /* Mantém Status (col 5) visível — override da regra genérica */
  #users-table th:nth-child(5),
  #users-table td:nth-child(5) {
    display: table-cell !important;
  }

  /* CPF/CNPJ (col 1): trunca para não quebrar layout */
  #users-table td:nth-child(1) {
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Login (col 2): também trunca */
  #users-table td:nth-child(2) {
    max-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}