/* ============================================ */
/* CORREÇÕES PARA MOBILE E TABLETS */
/* ============================================ */

/* Mobile - até 991px (tablets e smartphones) */
@media (max-width: 991px) {
  /* Prevenir scroll quando menu mobile está aberto */
  body.aside-open {
    overflow: hidden !important;
  }

  /* Remover margin-left do wrapper em mobile */
  body.aside-enabled .wrapper,
  body.aside-fixed .wrapper,
  body.aside-collapsed .wrapper,
  .wrapper#kt_wrapper,
  #kt_wrapper {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
  }

  /* Aside em mobile deve ser overlay/drawer */
  body #kt_aside,
  body #kt_aside.aside,
  body #kt_aside.aside-modern,
  body.aside-enabled #kt_aside,
  #kt_aside[data-kt-drawer="true"] {
    position: fixed !important;
    left: -280px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    height: 100vh !important;
    z-index: 1005 !important;
    transition: left 0.3s ease !important;
    background-color: var(--aside-bg-color, #002A35) !important;
    overflow-y: auto !important;
  }

  /* Forçar aside a não ser minimizado em mobile */
  body[data-kt-aside-minimize='on'] #kt_aside {
    width: 280px !important;
    min-width: 280px !important;
  }

  /* Aside em dark mode */
  html[data-bs-theme='dark'] body #kt_aside,
  html[data-bs-theme='dark'] body #kt_aside.aside,
  html[data-bs-theme='dark'] body.aside-enabled #kt_aside {
    background-color: var(--aside-bg-color, #002A35) !important;
  }

  /* Quando aside está aberto em mobile */
  body[data-kt-aside-minimize='off'] #kt_aside,
  body.aside-open #kt_aside,
  #kt_aside.drawer-on {
    left: 0 !important;
    transform: translateX(0) !important;
  }

  /* Ajustes de tamanho dos itens do menu em mobile */
  #kt_aside .menu-item {
    margin: 0 !important;
  }

  #kt_aside .menu-link {
    padding: 0.75rem 1.25rem !important;
    font-size: 1rem !important;
    min-height: 48px !important;
  }

  #kt_aside .menu-icon {
    width: 2rem !important;
    margin-right: 0.75rem !important;
  }

  #kt_aside .menu-icon i,
  #kt_aside .menu-icon svg {
    font-size: 1.5rem !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
  }

  #kt_aside .menu-title {
    font-size: 1rem !important;
    font-weight: 500 !important;
  }

  /* Logo do aside em mobile */
  #kt_aside .aside-logo {
    padding: 1.25rem !important;
    min-height: 60px !important;
  }

  #kt_aside .aside-logo img {
    max-height: 35px !important;
  }

  /* Submenus em mobile - devem abrir inline, não overlay */
  #kt_aside .menu-sub {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 2.5rem !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  #kt_aside .menu-sub .menu-item {
    width: 100% !important;
  }

  #kt_aside .menu-sub .menu-link {
    padding: 0.65rem 1.25rem !important;
    font-size: 0.95rem !important;
  }

  /* Ajustar aside-modern-item para layout em coluna */
  #kt_aside .aside-modern-item {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* Link principal não deve ter z-index alto */
  #kt_aside .aside-modern-link {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
  }

  /* Forçar aside-modern-submenu a ser inline em mobile */
  #kt_aside .aside-modern-submenu {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    padding: 0.5rem 0 0.5rem 1rem !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    z-index: 2 !important;
  }

  #kt_aside .aside-modern-item:not(.show) .aside-modern-submenu {
    display: none !important;
  }

  #kt_aside .aside-modern-subitem {
    width: 100% !important;
    padding: 0 !important;
    margin: 0.25rem 0 !important;
  }

  #kt_aside .aside-modern-sublink {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
    display: flex !important;
  }

  /* Cores para textos inativos no mobile - Light Mode */
  #kt_aside .aside-modern-title {
    color: #3f4254 !important;
  }

  #kt_aside .aside-modern-subtitle {
    color: #5e6278 !important;
  }

  #kt_aside .aside-modern-icon i {
    color: #5e6278 !important;
  }

  /* Ícone ativo no light mode - branco para melhor contraste */
  #kt_aside .aside-modern-item.show .aside-modern-icon i,
  #kt_aside .aside-modern-item.active .aside-modern-icon i {
    color: #ffffff !important;
  }

  /* Cores para textos inativos no mobile - Dark Mode */
  html[data-bs-theme='dark'] #kt_aside .aside-modern-title {
    color: #b5b5c3 !important;
  }

  html[data-bs-theme='dark'] #kt_aside .aside-modern-subtitle {
    color: #92929f !important;
  }

  html[data-bs-theme='dark'] #kt_aside .aside-modern-icon i {
    color: #92929f !important;
  }

  /* Ícone ativo no dark mode - branco para melhor contraste */
  html[data-bs-theme='dark'] body #kt_aside .aside-modern-item.show .aside-modern-icon i,
  html[data-bs-theme='dark'] body #kt_aside .aside-modern-item.active .aside-modern-icon i,
  html[data-bs-theme='dark'] body #kt_aside .aside-modern-item.show > .aside-modern-link .aside-modern-icon i,
  html[data-bs-theme='dark'] body #kt_aside .aside-modern-item.active > .aside-modern-link .aside-modern-icon i {
    color: #ffffff !important;
  }

  /* Remover background azul forte do ícone ativo no dark mode */
  html[data-bs-theme='dark'] #kt_aside .aside-modern-item.show > .aside-modern-link .aside-modern-icon,
  html[data-bs-theme='dark'] #kt_aside .aside-modern-item.active > .aside-modern-link .aside-modern-icon,
  html[data-bs-theme='dark'] #kt_aside .aside-modern-item.here > .aside-modern-link .aside-modern-icon {
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Sobrescrever regra do aside-expandable.css no dark mode */
  html[data-bs-theme='dark'] #kt_aside .aside-modern-item.active > .aside-modern-link .aside-modern-icon i,
  html[data-bs-theme='dark'] #kt_aside .aside-modern-item.show > .aside-modern-link .aside-modern-icon i,
  html[data-bs-theme='dark'] #kt_aside .aside-modern-item.here > .aside-modern-link .aside-modern-icon i {
    color: #ffffff !important;
  }

  /* Overlay escuro quando menu mobile está aberto */
  body.aside-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1004;
    animation: fadeIn 0.3s ease;
  }

  /* Fechar menu ao clicar no overlay */
  body.aside-open::before {
    cursor: pointer;
  }

  /* Animação do overlay */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Header em mobile - largura total */
  #kt_header {
    width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
    position: fixed !important;
    top: 0 !important;
    z-index: 1000 !important;
    background-color: var(--bs-body-bg, #fff) !important;
    box-shadow: none !important;
  }

  /* Header em dark mode */
  html[data-bs-theme='dark'] #kt_header {
    background-color: var(--bs-body-bg, #1e1e2d) !important;
  }

  /* Ajustar margin do wrapper para compensar header fixo */
  .wrapper#kt_wrapper {
    margin-top: 60px !important;
    padding-top: 0 !important;
  }

  /* Content sem margin adicional */
  #kt_content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Card header (área de busca) não deve ser sticky em mobile */
  .card-header {
    position: relative !important;
    z-index: 1 !important;
  }

  /* Garantir que cards não tenham posicionamento sticky em mobile */
  .card.card-flush {
    position: relative !important;
  }

  /* Toolbar adaptado para mobile - compacto */
  #kt_toolbar,
  .toolbar,
  #kt_toolbar::before,
  #kt_toolbar::after,
  .toolbar::before,
  .toolbar::after {
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
    height: auto !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: 1px solid var(--bs-border-color, #e4e6ef) !important;
    display: block !important;
  }

  /* Toolbar fixo - ajustar top para 60px */
  .header-tablet-and-mobile-fixed.toolbar-tablet-and-mobile-fixed .toolbar {
    top: 60px !important;
  }

  html[data-bs-theme='dark'] #kt_toolbar,
  html[data-bs-theme='dark'] .toolbar {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border-bottom-color: var(--bs-border-color, #2b2b40) !important;
  }

  /* Container com fundo branco - compacto */
  #kt_toolbar_container,
  #kt_toolbar_container::before,
  #kt_toolbar_container::after {
    padding: 0.35rem 1rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    display: flex !important;
    min-height: auto !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
  }

  html[data-bs-theme='dark'] #kt_toolbar_container,
  html[data-bs-theme='dark'] #kt_toolbar_container::before,
  html[data-bs-theme='dark'] #kt_toolbar_container::after {
    background: var(--bs-body-bg, #1e1e2d) !important;
    background-color: var(--bs-body-bg, #1e1e2d) !important;
    background-image: none !important;
  }

  /* Page title - REMOVER TODOS OS BACKGROUNDS */
  .page-title,
  .page-title::before,
  .page-title::after {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    background-size: 0 !important;
    background-position: 0 0 !important;
  }

  /* Page title em mobile - ocultar título, mostrar apenas breadcrumb */
  .page-title {
    margin-bottom: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    display: flex !important;
  }

  /* Sobrescrever mb-5 do Bootstrap em mobile */
  .page-title.mb-5 {
    margin-bottom: 0 !important;
  }

  /* Ocultar título H1 em mobile */
  .page-title h1 {
    display: none !important;
  }

  /* Breadcrumbs em mobile - compacto e discreto */
  .breadcrumb {
    font-size: 0.8rem !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    background-color: transparent !important;
    line-height: 1.2 !important;
  }

  .breadcrumb-item {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
  }

  /* Separadores verticais ocultos em mobile */
  .page-title .h-20px.border-start {
    display: none !important;
  }

  /* Description oculta em mobile */
  .page-title small {
    display: none !important;
  }

  /* Bullet do breadcrumb menor */
  .breadcrumb .bullet {
    width: 3px !important;
    height: 3px !important;
  }

  /* Garantir que breadcrumb apareça */
  .breadcrumb {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  .breadcrumb-item {
    display: inline-block !important;
  }

  /* Botão de toggle do menu mobile */
  .aside-toggle-btn,
  [data-kt-menu-trigger='click'] {
    display: inline-flex !important;
  }

  /* Page content com largura total e sem espaço extra */
  .page,
  #kt_content_container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 1rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Card sem margin-top excessivo */
  .card {
    margin-top: 0.5rem !important;
  }

  /* Garantir que tabelas sejam scrolláveis em mobile */
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Cards com padding reduzido em mobile */
  .card {
    margin-bottom: 1rem;
  }

  .card-body {
    padding: 1rem;
  }

  /* Formulários em modal - melhor visualização mobile */
  .modal-body {
    padding: 1rem;
  }

  /* Botões em mobile - melhor espaçamento */
  .btn-group {
    flex-wrap: wrap;
  }
}

/* Tablets em modo retrato - 768px a 991px */
@media (min-width: 768px) and (max-width: 991px) {
  .wrapper#kt_wrapper {
    padding: 0 1rem;
  }
}

/* Smartphones - até 767px */
@media (max-width: 767px) {
  /* Padding reduzido em telas pequenas */
  .wrapper#kt_wrapper {
    padding: 0 0.5rem;
  }

  /* Header com altura ajustada */
  #kt_header {
    min-height: 60px !important;
  }

  /* Toolbar com botões empilhados */
  [data-kt-user-table-toolbar='base'],
  [data-kt-departamento-table-toolbar='base'] {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Filtros e botões ocupando largura total */
  .form-select,
  .btn {
    width: 100% !important;
    margin-bottom: 0.5rem;
  }

  /* Search input com largura total */
  input[data-kt-user-table-filter='search'],
  input[data-kt-departamento-table-filter='search'] {
    width: 100% !important;
  }

  /* Paginação mais compacta */
  .pagination {
    font-size: 0.875rem;
  }

  /* Modal fullscreen em mobile */
  .modal-dialog {
    margin: 0;
    max-width: 100%;
  }

  .modal-content {
    min-height: 100vh;
    border-radius: 0;
  }
}

/* Extra small devices - até 575px */
@media (max-width: 575px) {
  /* Header user menu compacto */
  .header-user-menu {
    font-size: 0.875rem;
  }

  /* Cards sem sombra em telas muito pequenas */
  .card {
    box-shadow: none;
    border: 1px solid var(--bs-border-color);
  }

  /* Tabelas com fonte menor */
  .table {
    font-size: 0.875rem;
  }

  .table th,
  .table td {
    padding: 0.5rem;
  }
}

/* Landscape em smartphones */
@media (max-width: 991px) and (orientation: landscape) {
  /* Reduzir altura do header em landscape */
  #kt_header {
    min-height: 50px !important;
  }

  /* Modal com scroll em landscape */
  .modal-body {
    max-height: 60vh;
    overflow-y: auto;
  }
}

/* ============================================ */
/* DESKTOP - CONTAINER FULL WIDTH */
/* ============================================ */

@media (min-width: 992px) {
  /* Container ocupa toda largura no desktop */
  #kt_content_container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}