/*
  SOLUTECNOH WebPOS - Mobile responsiveness helpers
  Goal: prevent horizontal overflow and make common components (tables/forms/buttons) adapt on small screens
*/

/* Avoid accidental horizontal scroll caused by wide tables or fixed-width blocks */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Images and canvases should never overflow */
img, canvas, svg, video {
  max-width: 100%;
  height: auto;
}

/* Make ALL tables horizontally scrollable on small screens */
@media (max-width: 768px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Keep table headers readable */
  thead, tbody, tfoot {
    width: 100%;
  }

  /* Reduce padding to fit better */
  .content-wrapper .content-header,
  .content-wrapper .content {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  /* Cards and boxes should use full width */
  .card, .info-box {
    margin-bottom: .75rem;
  }

  /* Avoid button groups overflowing */
  .btn-group, .btn-toolbar {
    flex-wrap: wrap;
  }

  /* Inputs/selects should fit the screen */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    max-width: 100%;
  }

  /* If any element explicitly sets a min-width, allow wrapping */
  .table-responsive,
  .table-responsive * {
    word-break: break-word;
  }

  /* Promociones: botones de acciones alineados y sin desbordar */
  .promo-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
  }
  .promo-actions form {
    margin: 0;
  }

  /* Reporte de facturas: filtros en columna y tabla legible */
  .invoice-filters {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .invoice-filters > * {
    width: 100% !important;
  }
  .invoice-filters .form-control {
    width: 100% !important;
    min-width: 0 !important;
  }
  .invoice-filters .btn {
    width: 100%;
  }
  .table {
    font-size: 12px;
  }
  .table th,
  .table td {
    white-space: normal !important;
  }
}

/* AdminLTE sidebar overlap can create weird widths on mobile; keep wrapper stable */
@media (max-width: 768px) {
  .main-sidebar {
    position: fixed;
  }
  .content-wrapper {
    min-width: 0;
  }
}

/* ---- Reports: tabs/pills scrollable on mobile ---- */
@media (max-width: 991.98px) {
  /* Main Reports tabs (nav-tabs) */
  .card-header .nav.nav-tabs,
  .nav.nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .card-header .nav.nav-tabs .nav-item,
  .nav.nav-tabs .nav-item { float: none; }
  .card-header .nav.nav-tabs .nav-link,
  .nav.nav-tabs .nav-link { white-space: nowrap; }

  /* Sub-report pills */
  .nav.nav-pills {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding-bottom: .25rem;
  }
  .nav.nav-pills .nav-link { white-space: nowrap; }

  /* Report filter rows: stack and full width */
  .reports-filters .form-group,
  .reports-filters .form-row .form-group,
  .card-body form .form-row .form-group {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .card-body form .form-row .form-group.d-flex { align-items: stretch !important; }
  .card-body form .form-row .form-group.d-flex .btn { width: 100%; }

  /* Keep tables readable */
  .table-responsive { margin-bottom: .5rem; }
  .table.table-sm td, .table.table-sm th { padding: .30rem .40rem !important; }
}

/* ---- Mobile navbar: ensure right-side icons (like Config) remain visible ---- */
@media (max-width: 991.98px) {
  .main-header.navbar { flex-wrap: nowrap; }
  .main-header.navbar .navbar-nav { flex-direction: row; }
  .main-header.navbar .nav-link { padding: .45rem .55rem !important; }
  .main-header.navbar .navbar-nav.ml-auto { align-items: center; }
  .main-header.navbar .navbar-nav.ml-auto .nav-item { white-space: nowrap; }
  .main-sidebar { height: 100vh; overflow-y: auto; }
}

/* ---- Configuración (móvil): ordenar pestañas y formularios ---- */
@media (max-width: 991.98px) {

  /* Extra small phones */
@media (max-width: 575.98px) {
  .content-wrapper .card .nav.nav-pills.nav-fill .nav-link {
    font-size: 12px !important;
  }
}

.content-wrapper .card .nav.nav-pills.nav-fill .nav-link i{
    margin-right: 0 !important;            /* usamos gap */
    flex: 0 0 auto;
    line-height: 1 !important;
  }
  .content-wrapper .card .nav.nav-pills.nav-fill .nav-link .mr-1,
  .content-wrapper .card .nav.nav-pills.nav-fill .nav-link .me-1{
    margin-right: 0 !important;
  }
}

/* ---- Configuración (móvil): pestañas tipo "chips" (icono arriba + texto abajo) ---- */
@media (max-width: 991.98px) {

  /* Contenedor: permite 2 filas si hace falta */
  .content-wrapper .card .nav.nav-pills.nav-fill{
    flex-wrap: wrap !important;            /* <-- ya no forzamos una sola fila */
    overflow-x: visible !important;
    justify-content: flex-start !important;
    gap: .35rem .35rem;
    padding: .35rem !important;
  }

  .content-wrapper .card .nav.nav-pills.nav-fill .nav-item{
    flex: 0 0 auto !important;
  }

  .content-wrapper .card .nav.nav-pills.nav-fill .nav-link{
    display: inline-flex !important;
    flex-direction: column !important;      /* icono arriba */
    align-items: center !important;
    justify-content: center !important;
    gap: .2rem !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    line-height: 1.05 !important;
    font-size: 12px !important;
    padding: .45rem .5rem !important;
    min-width: 104px !important;
    max-width: 140px !important;
    border-radius: 12px !important;
  }

  .content-wrapper .card .nav.nav-pills.nav-fill .nav-link i{
    font-size: 14px !important;
    line-height: 1 !important;
  }
}

/* Extra small phones: más compacto */
@media (max-width: 575.98px) {
  .content-wrapper .card .nav.nav-pills.nav-fill .nav-link{
    min-width: 96px !important;
    font-size: 11px !important;
    padding: .42rem .45rem !important;
  }
  .content-wrapper .card .nav.nav-pills.nav-fill .nav-link i{
    font-size: 13px !important;
  }
}

/* ---- Configuración (móvil): alinear texto de pestañas ---- */
@media (max-width: 991.98px) {
  .content-wrapper .card .nav.nav-pills.nav-fill .nav-link{
    min-height: 62px !important;
  }
  .content-wrapper .card .nav.nav-pills.nav-fill .cfg-tab-label{
    display: block !important;
    margin-top: .12rem !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }
  .content-wrapper .card .nav.nav-pills.nav-fill .nav-link i{
    margin: 0 !important;
  }
}

/* ---- Configuración (móvil): alineación perfecta en chips (grid) ---- */
@media (max-width: 991.98px) {
  .content-wrapper .card .nav.nav-pills.nav-fill .nav-link{
    display: grid !important;
    grid-template-rows: 18px 2.2em !important;   /* icon row + label row */
    align-content: center !important;
    justify-items: center !important;
    align-items: center !important;
    text-align: center !important;
  }
  .content-wrapper .card .nav.nav-pills.nav-fill .nav-link i{
    display: block !important;
    margin: 0 !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    text-align: center !important;
  }
  .content-wrapper .card .nav.nav-pills.nav-fill .cfg-tab-label{
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    word-break: break-word !important;
  }
  /* If some label is still plain text, force it */
  .content-wrapper .card .nav.nav-pills.nav-fill .nav-link{
    white-space: normal !important;
  }
}

/* ---- Configuración (móvil): tablas (CAI/SAR, Bancos/QR, Usuarios, etc.) ---- */
@media (max-width: 991.98px) {

  /* Asegura scroll horizontal y evita que los encabezados se partan letra por letra */
  .content-wrapper .tab-pane .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .content-wrapper .tab-pane table { table-layout: auto !important; min-width: 820px; }
  .content-wrapper .tab-pane table th,
  .content-wrapper .tab-pane table td { white-space: nowrap !important; word-break: normal !important; }

  /* Columnas de acciones: compactar botones */
  .content-wrapper .tab-pane td:last-child,
  .content-wrapper .tab-pane th:last-child { min-width: 110px; }
  .content-wrapper .tab-pane td:last-child .btn,
  .content-wrapper .tab-pane td:last-child .btn-sm {
    padding: .2rem .35rem !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }
  .content-wrapper .tab-pane td:last-child .btn + .btn { margin-left: .25rem; }
}

/* ---- SAR/CAI (móvil): evitar encabezados letra-por-letra ---- */
@media (max-width: 991.98px) {
  .sar-table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .sar-cai-table { min-width: 920px !important; width: max-content !important; table-layout: auto !important; }
  .sar-cai-table th, .sar-cai-table td { white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; }
  /* Generic safeguard for any table-responsive inside content */
  .content-wrapper .table-responsive table { min-width: 920px !important; width: max-content !important; }
  .content-wrapper .table-responsive table th,
  .content-wrapper .table-responsive table td { white-space: nowrap !important; word-break: keep-all !important; }
}

/* ---- Reportes (móvil): tabs y filtros ordenados ---- */
@media (max-width: 991.98px) {

  /* Tabs (nav-tabs) en reportes: scroll horizontal */
  .content-wrapper .nav.nav-tabs,
  .content-wrapper .card-header .nav.nav-tabs,
  .content-wrapper .nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap !important;
  }
  .content-wrapper .nav.nav-tabs .nav-item,
  .content-wrapper .nav-tabs .nav-item { flex: 0 0 auto !important; }

  .content-wrapper .nav.nav-tabs .nav-link,
  .content-wrapper .nav-tabs .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem;
    padding: .5rem .75rem !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  .content-wrapper .nav.nav-tabs .nav-link i,
  .content-wrapper .nav-tabs .nav-link i {
    margin-right: 0 !important;
    line-height: 1 !important;
  }

  /* Controles de filtros: apilar y ancho completo */
  .content-wrapper .filters-row,
  .content-wrapper .report-filters,
  .content-wrapper form .form-row,
  .content-wrapper form .row {
    row-gap: .5rem;
  }
  .content-wrapper .report-filters .col,
  .content-wrapper .report-filters [class*="col-"],
  .content-wrapper form .form-row > [class*="col-"],
  .content-wrapper form .row > [class*="col-"]{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Inputs y botones en filtros */
  .content-wrapper .report-filters .form-control,
  .content-wrapper .report-filters .btn,
  .content-wrapper .report-filters .input-group {
    width: 100% !important;
  }
}

/* Extra small phones */
@media (max-width: 575.98px) {
  .content-wrapper .nav.nav-tabs .nav-link,
  .content-wrapper .nav-tabs .nav-link {
    font-size: 12px !important;
    padding: .45rem .6rem !important;
  }
}