/* Mobile cards view for tables (Safari-friendly, no horizontal scrolling) */
@media (max-width: 720px){
  html, body{ max-width:100%; overflow-x:hidden; }

  /* Neutralize any previous "stacked table" hacks */
  .table{ display:table !important; width:100% !important; table-layout:auto !important; }
  .table thead{ display:table-header-group !important; }
  .table tbody{ display:table-row-group !important; }
  .table tr{ display:table-row !important; }
  .table th, .table td{ display:table-cell !important; white-space:normal !important; }
  .table td:before, .table th:before{ content:none !important; }
  
  /* When JS cardifies a table, hide the original table/container (override rules above) */
  .table[data-mCardified="1"],
  .table[data-mCardHost="1"],
  .table-scroll[data-mCardHost="1"]{ display:none !important; }


  /* Hide scrollbars inside cards (we'll cardify in JS) */
  .table-scroll{ overflow-x:hidden !important; }

  /* Cards generated by JS */
  .m-table{ display:flex; flex-direction:column; gap:12px; }
  .m-row{
    background: var(--card, #fff);
    border:1px solid rgba(15,23,42,.08);
    border-radius:16px;
    padding:12px 12px 10px;
    box-shadow: 0 8px 24px rgba(15,23,42,.06);
  }
  .m-row + .m-row{ margin-top:0; }

  .m-row .m-title{
    font-weight:800;
    font-size:14px;
    line-height:1.2;
    margin:0 0 8px 0;
    overflow-wrap:anywhere;
  }

  .m-fields{ display:flex; flex-direction:column; gap:6px; }
  .m-field{
    display:grid;
    grid-template-columns: minmax(92px, 120px) minmax(0, 1fr);
    column-gap:12px;
    align-items:start;
    padding:6px 0;
    border-top:1px solid rgba(15,23,42,.06);
  }
  .m-field:first-child{ border-top:none; padding-top:0; }
  .m-label{
    color: rgba(15,23,42,.62);
    font-size:12px;
    line-height:1.2;
  }
  .m-value{
    font-size:13px;
    line-height:1.3;
    overflow-wrap:anywhere;
    min-width:0;
  }

  /* Make long badges/buttons fit */
  .pill, .badge{ max-width:100%; }
  /* Actions in cardified tables must wrap cleanly */
  .m-value .table-actions{ flex-wrap:wrap; gap:8px; }
  .m-value .table-actions .btn{ max-width:100%; }

  .pill{ white-space:normal; }

  /* Forms: stack rows on mobile */
  form .row{ flex-direction:column !important; align-items:stretch !important; }
  form .row > *{ width:100% !important; min-width:0 !important; }
  input[type="text"], input[type="tel"], input[type="password"], select, textarea, input[type="file"]{ width:100% !important; max-width:100% !important; box-sizing:border-box; }

  /* iOS: prevent focus-zoom on form fields (Safari zooms when font-size < 16px) */
  input[type="text"], input[type="tel"], input[type="password"], input[type="number"], input[type="email"], input[type="search"], select, textarea{
    font-size:16px !important;
  }
}

/* --- KeyBox hotfix: keep switch compact on mobile (PWA/app) --- */
@media (max-width: 820px){
  /* mobile_cards forces form rows to column + width:100%. That breaks the .switch slider. */
  form .row > label.switch,
  form .row > .switch{
    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;
    flex:0 0 46px !important;
  }
  form .row > label.switch .slider,
  form .row > .switch .slider{
    width:46px !important;
  }
  /* Keep the status badge compact when placed right after a switch */
  form .row > label.switch + .badge{
    width:auto !important;
    display:inline-flex !important;
    align-items:center !important;
  }

  /* Optional: if a row is meant to keep switch + badge inline, mark it as .switchrow in HTML (safe even if missing). */
  form .row.switchrow{
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
  }
  form .row.switchrow > *{ width:auto !important; }
}