/* Final mobile layer: preserve record identity, controls and the site's theme. */
.mobile-scroll-hint { display: none; }
@media (max-width: 620px) {
  #appView .page, #appView .page > *, #appView .main-shell { min-width: 0; max-width: 100%; }
  #appView .main-shell { grid-template-columns: minmax(0, 1fr); }
  #appView .topbar, #appView .page-container { min-width: 0; max-width: 100%; }
  #appView .topbar-actions { min-width: 0; flex-wrap: wrap; }
  #appView .quota-display { max-width: 100%; min-width: 0; }
  #appView .page-container { padding-inline: 10px; }
  #appView .page .page-toolbar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  #appView .page .page-toolbar > div:first-child { flex: 1 1 100%; min-width: 0; }
  #appView .page .page-toolbar.layout-title-repeated > div:first-child > h3 { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  #appView .page .page-toolbar :is(.button, .icon-button, input:not([type="checkbox"]), select, summary),
  #appView .page .filter-bar :is(button, input:not([type="checkbox"]), select),
  #appView .page .toolbar-controls :is(button, input:not([type="checkbox"]), select) { min-height: 44px; }
  #appView .page .toolbar-controls { min-width: 0; max-width: 100%; flex-wrap: wrap; }
  #appView .page .toolbar-controls > :is(input, select, button, details) { min-width: 0; max-width: 100%; }
  #appView .page .toolbar-controls > :is(button, details) { white-space: normal; }
  #appView .page .toolbar-controls > input[type="search"],
  #appView .page .toolbar-controls > .search-input { flex-basis: 100%; width: 100%; }
  #appView #page-cnc-devices .cnc-device-toolbar .toolbar-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #appView #page-cnc-devices .cnc-device-toolbar .toolbar-controls > .button { width: 100%; min-width: 0; }
  #appView #page-cnc-devices .cnc-device-toolbar .toolbar-icon-button { width: 44px; justify-self: end; }
  #appView #page-accounts .page-toolbar { display: flex; gap: 10px; }
  #appView #page-accounts .page-toolbar > .button { flex: 1 1 140px; min-height: 44px; padding: 9px; white-space: normal; }
  #appView #page-accounts.business-layout .business-account-filters { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; order: 3; }
  #appView #page-accounts .business-account-filters .field { min-width: 0; width: 100%; }
  #appView #page-accounts .business-account-filters select { width: 100%; min-width: 0; min-height: 44px; }

  /* First/action-column desktop stickiness is inappropriate for phone records. */
  #appView .page .table-scroll :is(th, td) { position: static !important; inset: auto !important; }
  #appView .page .mobile-records-scroll { overflow: visible !important; max-height: none !important; width: 100%; scrollbar-gutter: auto; padding: 8px; }
  #appView .page table.mobile-records { display: block; width: 100% !important; min-width: 0 !important; max-width: 100%; border: 0; border-collapse: separate; }
  #appView .page table.mobile-records > colgroup { display: none; }
  #appView .page table.mobile-records > thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
  #appView .page table.mobile-records > tbody { display: block; width: 100%; }
  #appView .page table.mobile-records [hidden] { display: none !important; }
  #appView .page table.mobile-records > tbody > tr { display: flex; flex-direction: column; width: 100%; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-solid, var(--surface)); }
  #appView .page table.mobile-records > tbody > tr:last-child { margin-bottom: 0; }
  #appView .page table.mobile-records > tbody > tr > td {
    display: grid !important; grid-template-columns: minmax(76px, .7fr) minmax(0, 1.3fr); gap: 3px 10px;
    align-items: start; width: auto !important; min-width: 0 !important; max-width: none !important;
    padding: 7px 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
    white-space: normal !important; overflow-wrap: anywhere; word-break: normal; text-align: left;
    color: var(--ink); font-size: 13px; line-height: 1.55;
  }
  #appView .page table.mobile-records > tbody > tr > td::before { content: attr(data-mobile-label); grid-column: 1; grid-row: 1; color: var(--muted); font-size: 12px; line-height: 1.55; font-weight: 500; overflow-wrap: anywhere; }
  #appView .page table.mobile-records > tbody > tr > td > * { grid-column: 2; min-width: 0; max-width: 100%; }
  #appView .page table.mobile-records > tbody > tr > td.mobile-record-identity:not([hidden]) { display: block !important; order: -2; padding: 2px 0 12px !important; margin-bottom: 4px; border-bottom: 1px solid var(--line) !important; }
  #appView .page table.mobile-records > tbody > tr > td.mobile-record-identity::before { display: none; }
  #appView .page table.mobile-records .mobile-record-identity strong { display: block; max-width: 100%; white-space: normal; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
  #appView .page table.mobile-records .mobile-record-identity small { display: block; margin-top: 3px; }
  #appView #page-accounts table.mobile-records .account-remark-cell { order: -1; }
  #appView .page table.mobile-records > tbody > tr > td.actions-column:not([hidden]) { display: flex !important; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 12px !important; margin-top: 4px; border-top: 1px solid var(--line) !important; }
  #appView .page table.mobile-records > tbody > tr > td.actions-column::before { flex-basis: 100%; }
  #appView .page table.mobile-records .actions-column :is(button, a) { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 1 1 115px; width: auto; min-width: 44px; min-height: 44px; height: auto; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--ink); white-space: normal; line-height: 1.4; text-align: center; }
  #appView .page table.mobile-records .actions-column .danger { color: var(--danger); }
  #appView .page table.mobile-records [data-mobile-action-label]::after { content: attr(data-mobile-action-label); position: static; inset: auto; opacity: 1; background: none; border-radius: 0; font-size: 12px; font-family: inherit; }
  #appView .page table.mobile-records .actions-column svg { flex: 0 0 18px; width: 18px; height: 18px; }
  #appView .page table.mobile-records td > .badge { justify-self: start; }
  #appView #page-cnc-devices .mobile-records .table-action-group { width: 100%; flex-wrap: wrap; }
  #appView #page-cnc-devices .mobile-records .table-action-group .table-action { flex: 1 1 110px; width: auto; min-height: 44px; height: auto; padding: 9px; }
  #appView .page table.mobile-records > tbody > tr > td.mobile-record-empty:not([hidden]) { display: block !important; padding-block: 18px !important; text-align: center; }
  #appView .page table.mobile-records td.mobile-record-empty::before { display: none; }
  #appView #page-accounts .account-permission-cell, #appView #page-accounts .account-space-cell { min-width: 0; max-width: none; }
  #appView #page-accounts .account-permission-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  #appView #page-accounts .permission-tags { display: flex; flex-wrap: wrap; gap: 4px; }
  #appView #page-accounts .permission-tags span { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  #appView #page-cnc-devices .mobile-records .cnc-device-identity strong { max-width: 100%; }
  #appView .page .mobile-local-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  #appView .page .mobile-scroll-hint { display: block; flex: 0 0 auto; margin: 5px 0; padding: 5px 8px; color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
  #appView #page-cnc-ladder .cnc-ladder-section-tabs { display: flex; flex-wrap: wrap; }
  #appView #page-cnc-ladder .cnc-ladder-section-tabs button { flex: 1 1 90px; min-width: 0; white-space: normal; min-height: 44px; }
  #appView #page-cnc-ladder .cnc-ladder-projectbar { flex-wrap: wrap; }
  #appView #page-cnc-ladder .cnc-ladder-project-identity { min-width: 0; max-width: 100%; }
  #appView #page-cnc-ladder .cnc-ladder-project-details { max-width: 100%; }
  #appView #page-cnc-ladder .cnc-ladder-advanced-details > summary { flex-wrap: wrap; white-space: normal; overflow-wrap: anywhere; }

  /* Forms retain every field and action; narrow screens use one input column. */
  body > :is(.dialog-backdrop, .dialog-overlay) { padding: 8px; }
  body > :is(.dialog-backdrop, .dialog-overlay) > :is(.dialog, .dialog-card),
  dialog.ladder-workbench-dialog { width: calc(100vw - 16px); min-width: 0; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-x: hidden; }
  body :is(.dialog, .dialog-card) :is(.form-grid, .dialog-field-grid, .three-column, .firmware-form-grid) { grid-template-columns: minmax(0, 1fr); }
  body :is(.dialog, .dialog-card) :is(.field, .dialog-body, .permission-category, .permission-select-item) { min-width: 0; max-width: 100%; }
  body :is(.dialog, .dialog-card) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { min-width: 0; max-width: 100%; min-height: 44px; font-size: 16px; }
  body :is(.dialog, .dialog-card) .dialog-header { gap: 10px; }
  body :is(.dialog, .dialog-card) .dialog-header > div { min-width: 0; }
  body :is(.dialog, .dialog-card) .dialog-header :is(h3, p) { overflow-wrap: anywhere; }
  body :is(.dialog, .dialog-card) :is(.dialog-close, .icon-button, .button) { min-height: 44px; min-width: 44px; }
  body :is(.dialog, .dialog-card) .dialog-actions { flex-wrap: wrap; gap: 8px; }
  body :is(.dialog, .dialog-card) .dialog-actions > button { flex: 1 1 110px; white-space: normal; }
  body :is(.dialog, .dialog-card) .permission-category-header { flex-wrap: wrap; gap: 8px; }
  body :is(.dialog, .dialog-card) .permission-category-items { grid-template-columns: minmax(0, 1fr); }
  body :is(.dialog, .dialog-card) .permission-select-item { flex-wrap: wrap; }
  body :is(.dialog, .dialog-card) .permission-select-item > select { flex: 1 1 100%; width: 100%; }
  #appView .business-disclosure-content, #appView .pdl-more-filters { max-width: 100%; }
  #appView .business-disclosure > summary { min-height: 44px; white-space: normal; }
  #appView .page :is(.filter-bar, .visitor-filter-controls, .cnc-device-filterbar) input,
  #appView .page :is(.filter-bar, .visitor-filter-controls, .cnc-device-filterbar) select { min-width: 0; max-width: 100%; }
}