/* Reports-only responsive overrides
   Included conditionally for *report*.php pages via scripts/settings.php */

/* Baseline: make wide report tables usable */
.table-responsive,
.table-container,
.table-wrap,
.table-full-width,
.card-body.table-full-width {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Ensure tables don't squeeze columns too hard */
.table,
table.table,
table#general_stat_table,
table[id$="_table"] {
  width: 100%;
}

/* Prefer horizontal scroll over squeezing columns */
.table-container > table,
.table-wrap > table,
.table-responsive > table {
  min-width: max-content;
}

/* Mobile: prioritize readability + horizontal scroll for wide reports */
@media (max-width: 768px) {
  /* Index dashboard toolbar (date + view + export buttons) */
  .report-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  .report-toolbar > * + * {
    margin-top: 8px;
  }

  .report-toolbar__date {
    text-align: left !important;
  }

  .report-toolbar__actions {
    align-items: stretch !important;
  }

  .report-toolbar__actions .btn-group {
    width: 100%;
    display: flex;
  }

  .report-toolbar__actions .btn-group .btn {
    flex: 1 1 0;
  }

  .report-toolbar__actions .d-flex.flex-wrap {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    row-gap: 6px;
    column-gap: 6px;
  }

  .report-toolbar__actions .d-flex.flex-wrap > .btn,
  .report-toolbar__actions .d-flex.flex-wrap > a.btn {
    width: auto !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  /* Report heading shouldn't overpower on mobile */
  .report-heading {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  /* Reduce overall density in cards */
  .content .card .card-body,
  .content .card-body {
    padding: 10px 10px;
  }

  .content .card .card-header,
  .content .card-header {
    padding: 10px 10px;
  }

  /* Buttons/inputs stack nicely */
  .content .btn,
  .content .form-control {
    font-size: 14px;
  }

  .content .btn { padding: 6px 10px; }

  /* Tables: keep as scrollable blocks rather than overflowing viewport */
  .table-responsive {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
  }

  .table-container,
  .table-wrap {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
  }

  .table,
  table {
    font-size: 12px;
  }

  .table th,
  .table td,
  table th,
  table td {
    padding: 6px 8px !important;
    vertical-align: middle;
  }

  /* Sticky headers inside nested scroll containers can glitch on mobile */
  #general_stat_table thead th,
  #general_stat_table thead td,
  table thead th,
  table thead td {
    position: static !important;
    top: auto !important;
  }

  /* Avoid forced nowrap that makes some tables unreadable */
  .table td,
  table td {
    white-space: nowrap;
  }

  /* DataTables: keep controls usable on small screens */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: left !important;
    width: 100% !important;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    max-width: 420px;
    margin-left: 0 !important;
  }

  /* Give "action" columns room without breaking layout */
  .no-print,
  .pagination,
  .pagination ul {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Very small phones */
@media (max-width: 420px) {
  .content .card .card-title,
  .content .page-title {
    font-size: 18px !important;
  }

  .table,
  table {
    font-size: 11px;
  }
}