/* ASA mobile usability overrides — 2026-09-17 */
@media (max-width: 760px) {
  html, body, #root { width: 100%; min-width: 0; overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; padding-bottom: env(safe-area-inset-bottom); }
  button, input, select, textarea { font-size: 16px; }

  .app-shell { display: block; min-height: 100dvh; }
  .sidebar {
    inset: auto 0 0 0;
    width: 100%;
    height: calc(64px + env(safe-area-inset-bottom));
    padding: 6px 8px env(safe-area-inset-bottom);
    border: 0;
    border-top: 1px solid #ded8d4;
    box-shadow: 0 -8px 24px #20151514;
    background: #fff;
    display: flex;
    align-items: stretch;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #a71929 #eee;
  }
  .sidebar::-webkit-scrollbar { height: 3px; }
  .sidebar::-webkit-scrollbar-thumb { background: #a71929; border-radius: 4px; }
  .sidebar .brand, .sidebar .nav-group, .sidebar .sidebar-user { display: none; }
  .sidebar nav {
    display: contents;
  }
  .sidebar > a[href="/materials.html"] {
    display: flex !important;
    flex: 0 0 68px;
    height: 52px;
    margin: 0 !important;
    padding: 5px 4px !important;
    align-items: center;
    justify-content: center;
    border-radius: 9px !important;
    font-size: 10px !important;
    line-height: 1.15;
    text-align: center;
  }
  .sidebar nav button,
  .sidebar nav button:not(.nav-active) {
    flex: 0 0 68px;
    height: 52px;
    padding: 5px 4px;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    font-size: 9px;
    line-height: 1.05;
    text-align: center;
  }
  .sidebar nav button > span { width: auto; font-size: 17px; line-height: 1; }
  .sidebar nav button em { display: none; }

  .workspace {
    width: 100%;
    margin-left: 0;
    padding: 16px 12px calc(82px + env(safe-area-inset-bottom));
  }
  .topbar { align-items: flex-start; gap: 12px; margin-bottom: 16px; }
  .topbar h1 { font-size: 25px; line-height: 1.15; }
  .topbar p { line-height: 1.5; }
  .top-actions { width: 100%; display: flex; gap: 8px; flex-wrap: wrap; }
  .top-actions .primary-button { flex: 1 1 auto; min-height: 44px; }

  .hero-grid { gap: 12px; }
  .focus-card { padding: 20px; border-radius: 14px; }
  .focus-card h2 { font-size: 22px; }
  .focus-card button { min-height: 44px; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric-grid article { min-width: 0; padding: 14px 12px; }
  .metric-grid strong { font-size: 24px; }

  .table-card { border-radius: 12px; overflow: hidden; }
  .table-heading { padding: 16px 14px 12px; gap: 12px; }
  .table-heading h2 { font-size: 17px; }
  .table-tools {
    width: 100%;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: none;
  }
  .table-tools::-webkit-scrollbar { display: none; }
  .table-tools label { flex: 0 0 150px; width: 150px; min-width: 150px; height: 42px; }
  .table-tools label:first-child { flex-basis: 220px; width: 220px; }
  .table-tools .level-filter, .table-tools .type-filter { min-width: 150px; }
  .table-tools input, .table-tools select { font-size: 14px; }
  .tabs { gap: 20px; padding: 0 14px; scroll-snap-type: x proximity; }
  .tabs button { min-height: 44px; padding: 12px 0; scroll-snap-align: start; }
  .table-wrap {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap table { min-width: 760px; font-size: 11px; }
  .table-wrap th, .table-wrap td { padding: 12px 10px; }
  .table-wrap th:first-child, .table-wrap td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 7px 0 12px -12px #0008;
  }
  .table-wrap th:first-child { z-index: 3; background: #fbfcfc; }
  .customer-cell > span { width: 36px; height: 36px; flex: 0 0 36px; }

  .overlay, .warranty-overlay { align-items: stretch; }
  .drawer, .warranty-drawer {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .drawer-head { padding: 18px 52px 16px 16px; gap: 11px; }
  .profile-avatar { width: 46px; height: 46px; border-radius: 12px; }
  .drawer-head h2 { font-size: 20px; overflow-wrap: anywhere; }
  .drawer-head p { overflow-wrap: anywhere; }
  .close { top: 13px; right: 12px; width: 38px !important; height: 38px !important; }
  .action-row {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 10px 12px;
    gap: 7px;
    overflow-x: auto;
    box-shadow: 0 5px 14px #0000000d;
  }
  .action-row button, .form-actions button, .import-box button { min-height: 44px; height: 44px; }
  .action-row .delete-danger { margin-left: 0; }
  .drawer-section { margin: 10px; padding: 15px; border-radius: 11px; }
  .detail-grid, .edit-row, .form-grid { grid-template-columns: 1fr; gap: 12px; }
  .detail-grid strong { font-size: 13px; overflow-wrap: anywhere; }
  .edit-row select, .form-grid input, .form-grid select { height: 44px; font-size: 16px; }
  .section-title { align-items: flex-start; gap: 10px; }
  .research-actions, .timeline-actions { flex-wrap: wrap; justify-content: flex-end; }
  .research-card > p, .research-risk { font-size: 12px; }
  .timeline article { grid-template-columns: 27px minmax(0,1fr); }
  .mail-meta { gap: 8px; flex-wrap: wrap; }
  .timeline h4 { overflow-wrap: anywhere; }
  .timeline p { -webkit-line-clamp: 5; font-size: 11px; }
  .drawer-section textarea { min-height: 120px; font-size: 16px; }

  .modal { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; border-radius: 12px; }
  .modal > header { position: sticky; top: 0; z-index: 2; background: #fff; padding: 17px 52px 17px 17px; }
  .form-grid { padding: 16px; }
  .form-actions { position: sticky; bottom: 0; padding-top: 10px; background: #fff; }
  .form-actions button { flex: 1; }
  .import-box { padding: 28px 18px; }
  .toast { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); text-align: center; }

  .warranty-top { margin-bottom: 16px; }
  .warranty-top h1 { font-size: 25px; }
  .warranty-primary { width: 100%; min-height: 44px; }
  .warranty-metrics { grid-template-columns: 1fr 1fr; gap: 9px; }
  .warranty-metric { padding: 14px 12px; }
  .warranty-metric strong { font-size: 24px; }
  .warranty-card-head { padding: 16px 14px; }
  .warranty-search { height: 44px; }
  .warranty-table { min-width: 720px; }
  .warranty-modal { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .warranty-modal > header, .warranty-drawer > header { padding: 16px; }
  .warranty-form-body { padding: 10px; }
  .form-section { padding: 14px; }
  .warranty-form-grid, .device-row, .warranty-device-cards article { grid-template-columns: 1fr; }
  .warranty-form-grid input, .warranty-form-grid select, .device-row input, .device-heading input, .warranty-notes textarea { font-size: 16px; min-height: 44px; }
  .warranty-modal > footer { position: sticky; bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .warranty-modal > footer button { flex: 1; min-height: 44px; }
  .warranty-summary { margin: 10px; gap: 12px; align-items: flex-start; }
  .warranty-device-cards { padding: 0 10px; }
  .warranty-device-cards article { gap: 12px; }
  .qr-box { width: 140px; }

  .login-screen { min-height: 100dvh; padding: 14px; }
  .login-card { padding: 26px 20px; border-radius: 15px; }
  .login-card h1 { font-size: 25px; }
  .login-card label:not(.remember) input, .login-card > button { min-height: 46px; font-size: 16px; }
}

@media (max-width: 380px) {
  .workspace { padding-left: 9px; padding-right: 9px; }
  .metric-grid, .warranty-metrics { grid-template-columns: 1fr; }
  .sidebar nav button, .sidebar nav button:not(.nav-active) { flex-basis: 62px; }
  .drawer-section { margin-left: 7px; margin-right: 7px; }
}