/* Mobile layout fixes for Thrifty Tots portal */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

img,
svg,
canvas,
video {
  max-width: 100%;
  height: auto;
}

.container,
.container-fluid,
.row,
.panel-card,
.card,
.accordion,
.accordion-item,
.accordion-body {
  max-width: 100%;
}

.panel-card,
.card,
.accordion-body {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Prevent Bootstrap rows from visually overflowing on small screens */
.row {
  margin-left: 0;
  margin-right: 0;
}

[class*="col-"] {
  min-width: 0;
}

/* Forms */
input,
select,
textarea,
.form-control,
.form-select {
  max-width: 100%;
  min-width: 0;
}

.input-group {
  flex-wrap: wrap;
}

.input-group > .form-control,
.input-group > .form-select {
  min-width: 0;
}

/* Buttons */
.btn {
  white-space: normal;
}

.btn-group,
.btn-toolbar {
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* Tables */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  max-width: 100%;
}

td,
th {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Long URLs, emails, codes, item names */
a,
code,
pre,
.badge,
.text-muted,
.small {
  overflow-wrap: anywhere;
}

/* Consignor accordion header buttons */
.accordion-header .d-flex {
  min-width: 0;
  width: 100%;
}

.accordion-header .accordion-button {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Mobile-specific tightening */
@media (max-width: 767.98px) {
  body {
    font-size: 0.95rem;
  }

  .container,
  .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .panel-card,
  .card,
  .accordion-body {
    padding: 0.85rem !important;
  }

  h1,
  .h1 {
    font-size: 1.65rem;
  }

  h2,
  .h2 {
    font-size: 1.45rem;
  }

  h3,
  .h3 {
    font-size: 1.25rem;
  }

  h4,
  .h4 {
    font-size: 1.15rem;
  }

  .d-flex {
    flex-wrap: wrap;
  }

  .gap-2 {
    gap: 0.45rem !important;
  }

  .btn {
    width: auto;
    max-width: 100%;
    margin-bottom: 0.25rem;
  }

  .btn.w-100 {
    width: 100% !important;
  }

  .accordion-button {
    padding: 0.75rem;
    font-size: 0.95rem;
  }

  .accordion-header .d-flex {
    align-items: stretch !important;
  }

  .accordion-header .accordion-button {
    flex-basis: 100%;
  }

  .accordion-header .btn {
    margin-left: 0.75rem;
    margin-bottom: 0.5rem;
  }

  form.border,
  div.border {
    padding: 0.75rem !important;
  }

  .table th,
  .table td {
    font-size: 0.88rem;
    padding: 0.45rem;
  }

  .navbar .container-fluid,
  .navbar .container {
    flex-wrap: wrap;
  }
}

/* Very small phones */
@media (max-width: 420px) {
  .container,
  .container-fluid {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }

  .panel-card,
  .card,
  .accordion-body {
    padding: 0.65rem !important;
  }

  .btn,
  .form-control,
  .form-select {
    font-size: 0.92rem;
  }

  .small {
    font-size: 0.82rem;
  }
}

/* Stronger mobile fixes for dense admin dashboard tables */

@media (max-width: 767.98px) {
  /*
    Let wide operational/admin tables scroll horizontally instead of squeezing
    each column until words break letter-by-letter.
  */
  .panel-card:has(table),
  .card:has(table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    width: max-content;
    min-width: 680px;
    table-layout: auto;
  }

  table th,
  table td {
    white-space: nowrap;
    word-break: normal !important;
    overflow-wrap: normal !important;
    vertical-align: middle;
  }

  table th {
    font-size: 0.82rem;
    line-height: 1.15;
  }

  table td {
    font-size: 0.86rem;
    line-height: 1.25;
  }

  /*
    Keep the first column readable while scrolling.
    This helps event names remain understandable.
  */
  table th:first-child,
  table td:first-child {
    white-space: normal;
    min-width: 150px;
    max-width: 180px;
  }

  /*
    Admin dashboard cards should not clip the table;
    they should allow side-scrolling inside the card.
  */
  .panel-card {
    overflow-x: auto;
  }
}

/* Ultra-small phones */
@media (max-width: 420px) {
  table {
    min-width: 720px;
  }

  table th:first-child,
  table td:first-child {
    min-width: 145px;
  }
}