/* ==========================================================================
   responsive-fix.css
   Global responsive & usability overrides for the Backoffice.
   Loaded AFTER app-style.css so these rules win. Additive and safe to
   remove. Most rules are scoped to tablet/phone widths, so the desktop
   layout is left untouched.
   ========================================================================== */

/* Never let the whole page scroll sideways because of one stray wide element */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Images/media always fit their container instead of pushing the layout wide */
.content-wrapper img,
.card img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   Tablet & phone  (<= 991px)
   ========================================================================== */
@media only screen and (max-width: 991px) {

  /* Slightly tighter, more readable text on small screens (helps Thai copy) */
  body {
    letter-spacing: .2px;
    font-size: 14px;
  }

  /* --- Tables ------------------------------------------------------------ */
  /* Neutralise fixed pixel widths that overflow / get clipped on phones.    */
  .content-wrapper table,
  .content-wrapper table[width] {
    width: 100% !important;
    max-width: 100% !important;
  }
  .content-wrapper td[width],
  .content-wrapper th[width] {
    width: auto !important;
  }

  /* Wrapped data tables already scroll; make UNWRAPPED tables scroll too    */
  /* (direct children of a card body) instead of being clipped.              */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }
  .card-body > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- Forms: bigger touch targets, never overflow ----------------------- */
  .form-control,
  .custom-select,
  select,
  textarea,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="date"] {
    max-width: 100%;
    min-height: 42px;
  }
  select,
  .form-control {
    margin-bottom: .4rem;
  }

  /* --- Buttons ----------------------------------------------------------- */
  .btn {
    min-height: 40px;
  }
  /* Primary/rounded block actions inside a card go full width for tapping   */
  .card-body .btn-block {
    width: 100%;
  }

  /* --- Spacing ----------------------------------------------------------- */
  .card {
    margin-bottom: 1rem;
  }
  .card .card-body {
    padding: 1rem;
  }
}

/* ==========================================================================
   Phone  (<= 575px)
   ========================================================================== */
@media only screen and (max-width: 575px) {

  /* Toolbar dropdowns (the sort / order-by rows) stack full width & readable */
  .content-wrapper .row select,
  .content-wrapper .form-group select {
    width: 100% !important;
    display: block;
  }

  /* The "Sort" / action button after a group of dropdowns spans full width   */
  .content-wrapper .row > .col-sm-12 > .btn,
  .content-wrapper .row > .col-lg-12 > .btn {
    width: 100%;
    margin-top: .5rem;
  }

  /* Headings don't wrap awkwardly */
  .page-title {
    font-size: 1.1rem;
  }

  /* Give the fixed topbar dropdown menus room and keep them on-screen */
  .dropdown-menu-right {
    right: 0;
    left: auto;
  }
}

/* ==========================================================================
   Standalone / legacy pages (no theme shell)
   Older utility pages (upload dialogs, list popups) hard-code pixel widths
   and load this file directly. Keep them usable on phones without having to
   touch their inline styles.
   ========================================================================== */
@media only screen and (max-width: 767px) {
  /* Tables with a hard-coded width="" attribute */
  table[width] {
    width: 100% !important;
    max-width: 100% !important;
  }
  td[width],
  th[width] {
    max-width: 100%;
  }
  /* Un-styled tables (bare legacy pages set width via inline <style>, and
     carry no CSS class — Bootstrap data tables use class="table" and are
     left untouched). Make them scroll horizontally instead of clipping. */
  table:not([class]) {
    display: block;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   Bilingual headings  (English main + Thai sub-label)
   Every page heading (.page-title) and the sidebar menu shows English as the
   main label with a smaller, muted Thai line underneath. Kept subtle so the
   layout stays clean and readable.
   ========================================================================== */
.page-title .page-subtitle {
  display: block;
  font-size: .8rem;
  font-weight: 400;
  color: #9aa0b3;
  letter-spacing: normal;
  margin-top: 2px;
}

/* Sidebar menu: keep icon + label vertically centred, Thai line underneath */
.sidebar-menu > li > a > i {
  vertical-align: middle;
}
.sidebar-menu > li > a > span {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.2;
}
.sidebar-menu > li > a .menu-th {
  display: block;
  font-size: .72rem;
  line-height: 1.15;
  opacity: .6;
  letter-spacing: normal;
  margin-top: 1px;
}

/* Card section headers: English (uppercase) main + Thai sub-line underneath */
.card-header .card-th {
  display: block;
  font-size: .72rem;
  font-weight: 400;
  text-transform: none;
  opacity: .7;
  letter-spacing: normal;
  margin-top: 2px;
}

/* Field labels: English main + Thai helper (added at runtime by
   bilingual-labels.js). Thai is smaller & muted, kept on the same line. */
.label-th {
  font-size: .78rem;
  font-weight: 400;
  color: #9aa0b3;
  letter-spacing: normal;
  margin-left: .25rem;
  white-space: nowrap;
}