/* Phase 1: compact Settings / Users / Maps mobile experience. */
@media (max-width: 760px) {
  /* Settings becomes a compact control surface rather than stacked desktop cards. */
  .system-settings-page { padding: 0 10px 10px !important; }
  .system-settings-page > h3 { margin: 10px 2px 7px !important; font-size: 21px !important; letter-spacing: -.02em; }
  .system-settings-tabs { display: none !important; }
  .system-settings-mobile-tabs {
    position: sticky;
    top: 56px;
    z-index: 18;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0 0 8px !important;
    padding: 7px 8px !important;
    border: 1px solid var(--occ-mobile-line);
    border-radius: 11px;
    background: rgba(255,255,255,.97);
    box-shadow: var(--occ-mobile-shadow);
  }
  .system-settings-mobile-tabs > span { font-size: 10px !important; font-weight: 750; color: var(--occ-mobile-muted); text-transform: uppercase; letter-spacing: .04em; }
  .system-settings-mobile-tabs select { min-height: 36px !important; padding: 6px 9px !important; font-size: 13px !important; font-weight: 700; }
  .system-settings-workspace { min-width: 0; }
  .system-settings-workspace fieldset,
  .system-settings-form > fieldset {
    margin: 0 0 8px !important;
    padding: 9px !important;
    border: 1px solid var(--occ-mobile-line) !important;
    border-radius: 12px !important;
    background: #fff;
    box-shadow: var(--occ-mobile-shadow);
  }
  .system-settings-workspace legend,
  .system-settings-form legend { padding: 0 4px !important; font-size: 14px !important; font-weight: 800; color: var(--occ-mobile-text); }
  .system-settings-workspace .muted,
  .system-settings-form .muted { font-size: 10px !important; line-height: 1.3 !important; }
  .system-settings-workspace .ai-banner,
  .system-settings-form .ai-banner { margin: 6px 0 !important; padding: 7px 8px !important; border-radius: 9px !important; font-size: 10px !important; line-height: 1.3 !important; }
  .system-settings-workspace .feature-toggle,
  .system-settings-form .feature-toggle { margin: 6px 0 !important; padding: 8px 9px !important; min-height: 50px !important; border-radius: 10px !important; }
  .system-settings-workspace .feature-toggle strong,
  .system-settings-form .feature-toggle strong { font-size: 12px !important; }
  .system-settings-workspace .feature-toggle span,
  .system-settings-form .feature-toggle span { font-size: 9.5px !important; line-height: 1.25 !important; }
  .system-settings-workspace .settings-grid,
  .system-settings-form .settings-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 6px !important; }
  .system-settings-workspace .settings-grid > label,
  .system-settings-form .settings-grid > label,
  .system-settings-workspace .settings-grid > div,
  .system-settings-form .settings-grid > div {
    margin: 0 !important;
    padding: 7px 8px !important;
    border: 1px solid #e7edf0;
    border-radius: 9px;
    background: #fbfcfd;
    font-size: 10px !important;
  }
  .system-settings-workspace input,
  .system-settings-workspace select,
  .system-settings-workspace textarea,
  .system-settings-form input,
  .system-settings-form select,
  .system-settings-form textarea { min-height: 38px !important; padding: 7px 9px !important; font-size: 13px !important; }
  .system-settings-workspace .form-inline,
  .system-settings-form .form-inline { gap: 6px !important; margin-top: 7px !important; }
  .system-settings-workspace .form-inline button,
  .system-settings-form .form-inline button { min-height: 36px !important; padding: 6px 9px !important; font-size: 11px !important; }

  /* AI policy is useful reference material, but it should not dominate the settings screen. */
  .ai-provider-status-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .ai-detection-policy { margin: 7px 0 !important; padding: 0 !important; border: 1px solid var(--occ-mobile-line) !important; border-radius: 10px !important; overflow: hidden; }
  .ai-detection-policy-heading { padding: 8px 9px !important; }
  .ai-detection-policy-heading h4 { margin: 0 !important; font-size: 12px !important; }
  .ai-detection-policy-heading p { margin: 2px 0 0 !important; font-size: 9px !important; line-height: 1.25 !important; }
  .ai-detection-policy-heading > span { font-size: 9px !important; padding: 3px 5px !important; }
  .ai-detection-list { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1px !important; background: #e8eef2; }
  .ai-detection-list article { padding: 7px !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; }
  .ai-detection-list article strong { font-size: 10px !important; }
  .ai-detection-list article span { font-size: 8.5px !important; line-height: 1.25 !important; }
  .ai-detection-policy > .muted { margin: 0 !important; padding: 7px 9px !important; }

  /* Users: rows show identity + state first; low-value telemetry remains available on desktop. */
  .settings-users-workspace { min-width: 0; }
  .settings-users-workspace .filter-bar { margin-left: 0 !important; margin-right: 0 !important; }
  .settings-heading-actions { display: flex !important; gap: 5px !important; }
  .settings-heading-actions button { min-height: 34px !important; padding: 6px 8px !important; font-size: 10px !important; }
  table.settings-user-table,
  .settings-user-table tbody { display: block !important; width: 100%; }
  .settings-user-table thead { display: none !important; }
  .settings-user-table { margin: 0 !important; border: 0 !important; background: transparent !important; }
  .settings-user-table tr {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 8px;
    margin: 0 0 6px !important;
    padding: 9px 10px !important;
    border: 1px solid var(--occ-mobile-line) !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: var(--occ-mobile-shadow);
  }
  .settings-user-table tr.settings-user-disabled { opacity: .66; }
  .settings-user-table td { display: block !important; padding: 0 !important; border: 0 !important; min-width: 0; }
  .settings-user-table td::before { display: none !important; content: none !important; }
  .settings-user-table td[data-label="User"] { grid-column: 1; grid-row: 1; }
  .settings-user-table td[data-label="User"] strong { font-size: 14px !important; }
  .settings-user-table td[data-label="Contact"] { grid-column: 1; grid-row: 2; display: flex !important; flex-direction: column; }
  .settings-user-table td[data-label="Contact"] span { font-size: 10px !important; color: var(--occ-mobile-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .settings-user-table td[data-label="Contact"] small { display: none !important; }
  .settings-user-table td[data-label="Role"] { grid-column: 2; grid-row: 1; align-self: center; font-size: 9px !important; font-weight: 800; text-transform: uppercase; color: var(--occ-mobile-muted); }
  .settings-user-table td[data-label="Capabilities"] { grid-column: 1; grid-row: 3; font-size: 10px !important; color: #526773; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .settings-user-table td[data-label="Last login"] { display: none !important; }
  .settings-user-table td[data-label="Account setup"] { grid-column: 1; grid-row: 4; display: flex !important; align-items: baseline; gap: 5px; }
  .settings-user-table td[data-label="Account setup"] strong { font-size: 9.5px !important; }
  .settings-user-table td[data-label="Account setup"] small { font-size: 8.5px !important; color: var(--occ-mobile-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .settings-user-table td[data-label="Status"] { grid-column: 2; grid-row: 2; justify-self: end; }
  .settings-user-table .user-status-badge { font-size: 8.5px !important; padding: 2px 5px !important; }
  .settings-user-table td[data-label="Actions"] { grid-column: 2; grid-row: 3 / span 2; align-self: end; justify-self: end; }
  .settings-user-table .mobile-card-actions { display: flex !important; flex-direction: column; align-items: stretch; gap: 3px !important; }
  .settings-user-table .mobile-card-actions button { min-height: 27px !important; padding: 4px 6px !important; font-size: 9px !important; white-space: nowrap; }
  .sso-foundation { margin: 8px 0 0 !important; border-radius: 10px !important; }
  .sso-foundation summary { min-height: 38px !important; padding: 7px 9px !important; font-size: 10px !important; }
  .sso-foundation p { padding: 0 9px 9px !important; font-size: 9px !important; line-height: 1.3 !important; }

  /* User editor: capability relationships read as chips, not giant option cards. */
  .capability-picker { margin: 0 !important; padding: 8px !important; border: 1px solid var(--occ-mobile-line) !important; border-radius: 10px !important; }
  .capability-picker legend { font-size: 11px !important; font-weight: 800; }
  .assignment-selected { margin: 0 0 6px !important; padding: 7px !important; border-radius: 9px !important; background: #f7f9fb !important; }
  .assignment-selected-heading { margin-bottom: 5px !important; }
  .assignment-selected-heading strong,
  .assignment-selected-heading span { font-size: 9px !important; }
  .assignment-selected-chips { display: flex !important; flex-wrap: wrap; gap: 4px !important; }
  .assignment-selected-chips button { min-height: 27px !important; max-width: 100%; padding: 4px 7px !important; border-radius: 999px !important; font-size: 9px !important; }
  .assignment-selected-chips button span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .assignment-picker { display: grid !important; grid-template-columns: 1fr !important; gap: 3px !important; max-height: 230px; overflow: auto; }
  .assignment-row { min-height: 38px !important; padding: 5px 6px 5px 8px !important; border-radius: 8px !important; }
  .assignment-row > span { min-width: 0; font-size: 10px !important; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .assignment-row > button { min-height: 27px !important; padding: 4px 6px !important; font-size: 8.5px !important; white-space: nowrap; }

  /* Maps: compact list plus relationship editor with selected chips above searchable rows. */
  table.settings-map-table,
  .settings-map-table tbody { display: block !important; width: 100%; }
  .settings-map-table thead { display: none !important; }
  .settings-map-table { margin: 0 !important; border: 0 !important; }
  .settings-map-table tr {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) repeat(3, auto);
    gap: 3px 8px;
    margin: 0 0 6px !important;
    padding: 9px 10px !important;
    border: 1px solid var(--occ-mobile-line) !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: var(--occ-mobile-shadow);
  }
  .settings-map-table td { display: block !important; padding: 0 !important; border: 0 !important; }
  .settings-map-table td::before { display: none !important; content: none !important; }
  .settings-map-table td[data-label="Map"] { grid-column: 1; grid-row: 1; }
  .settings-map-table td[data-label="Map"] strong { font-size: 14px !important; }
  .settings-map-table td[data-label="Groups"],
  .settings-map-table td[data-label="Sites"],
  .settings-map-table td[data-label="Drivers"] { grid-row: 2; font-size: 9px !important; color: var(--occ-mobile-muted); }
  .settings-map-table td[data-label="Groups"]::after { content: ' groups'; }
  .settings-map-table td[data-label="Sites"]::after { content: ' sites'; }
  .settings-map-table td[data-label="Drivers"]::after { content: ' drivers'; }
  .settings-map-table td[data-label="Status"] { grid-column: 2 / span 2; grid-row: 1; justify-self: end; font-size: 9px !important; font-weight: 800; color: var(--occ-mobile-good); }
  .settings-map-table td[data-label="Actions"] { grid-column: 4; grid-row: 1 / span 2; justify-self: end; align-self: center; }
  .settings-map-table .mobile-card-actions { display: flex !important; flex-direction: column; gap: 3px !important; }
  .settings-map-table .mobile-card-actions button { min-height: 27px !important; padding: 4px 6px !important; font-size: 9px !important; }

  .map-edit-form { gap: 7px !important; }
  .map-edit-form > label:first-child { padding: 0 1px; }
  .group-assignment-section { margin: 0 !important; padding: 0 !important; border: 1px solid var(--occ-mobile-line) !important; border-radius: 11px !important; overflow: hidden; background: #fff; }
  .group-assignment-section > header { padding: 8px !important; background: #fbfcfd; border-bottom: 1px solid #edf1f3; }
  .group-assignment-heading { align-items: flex-start !important; gap: 8px !important; }
  .group-assignment-heading h4 { margin: 0 !important; font-size: 12px !important; }
  .group-assignment-heading p { margin: 1px 0 0 !important; font-size: 9px !important; line-height: 1.25 !important; }
  .group-assignment-heading > span { flex: 0 0 auto; font-size: 9px !important; padding: 3px 5px !important; border-radius: 999px; background: #eef6fc; color: var(--occ-mobile-blue); font-weight: 800; }
  .group-assignment-tools { display: grid !important; grid-template-columns: minmax(0,1fr) auto; gap: 5px !important; margin-top: 6px !important; }
  .group-assignment-tools label > span { display: none !important; }
  .group-assignment-tools input { min-height: 34px !important; padding: 6px 8px !important; font-size: 12px !important; }
  .group-assignment-tools button { min-height: 34px !important; padding: 5px 8px !important; font-size: 9px !important; }
  .group-assignment-section > .assignment-selected { margin: 7px 7px 4px !important; }
  .group-assignment-section > .assignment-picker { margin: 0 7px 7px !important; max-height: 200px; }
  .map-edit-form .modal-actions,
  .map-edit-form .ui-modal-actions { position: sticky; bottom: 0; z-index: 3; padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important; background: #fff; }
}