/* Final shared mobile/layout hardening. Keep this after module styles so it wins. */
@media (min-width: 769px) {
  .sidebar.collapsed {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable;
  }
  .sidebar.collapsed .nav-section,
  .sidebar.collapsed .sb-company,
  .sidebar.collapsed .sb-user,
  .sidebar.collapsed .sb-role,
  .sidebar.collapsed #sb-role-changer,
  .sidebar.collapsed #pwa-install-btn,
  .sidebar.collapsed .nav-item span {
    display: none !important;
  }
  .sidebar.collapsed .nav-item {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    min-height: 42px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
  .sidebar.collapsed .nav-item i {
    flex: 0 0 22px !important;
    width: 22px !important;
    margin: 0 !important;
    text-align: center !important;
  }
}

@media (max-width: 768px) {
  html, body, #app, .layout, .main, .page {
    max-width: 100vw !important;
  }
  .main {
    overflow-x: hidden !important;
    touch-action: pan-y !important;
  }
  .page {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .sidebar {
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }
  .card, .panel, .section-card, .metric, .metric-card,
  .dash-card, .module-card, .form3panel {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .form3row, .form3row3, .grid2, .grid3, .grid4,
  .page [style*="grid-template-columns:1fr 1fr"],
  .page [style*="grid-template-columns: 1fr 1fr"],
  .page [style*="grid-template-columns:repeat(2"],
  .page [style*="grid-template-columns: repeat(2"],
  .page [style*="grid-template-columns:repeat(3"],
  .page [style*="grid-template-columns: repeat(3"],
  .page [style*="grid-template-columns:repeat(4"],
  .page [style*="grid-template-columns: repeat(4"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  .form3group, .form3group > *, input, select, textarea {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  input, select, textarea {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
  textarea {
    white-space: pre-wrap !important;
  }
  .btn, button {
    min-height: 42px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .page-header > div, .card-title, .card-title > div,
  .page [style*="display:flex"], .page [style*="display: flex"] {
    min-width: 0 !important;
  }
  .table-wrap, .table-scroll, .data-table-wrap,
  .page [style*="overflow-x:auto"], .page [style*="overflow-x: auto"],
  .page [style*="overflow:auto"], .page [style*="overflow: auto"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
  }
  table, .data-table, .insp-tbl {
    min-width: 720px !important;
    width: max-content !important;
    max-width: none !important;
  }
  th, .data-table th {
    white-space: nowrap !important;
    vertical-align: middle !important;
  }
  td, .data-table td {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    vertical-align: top !important;
  }
  .module-tabs, .tabs, .tab-row, .mtg-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .module-tabs > *, .tabs > *, .tab-row > *, .mtg-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  .toast {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: none !important;
  }
}
@media (max-width: 480px) {
  table, .data-table, .insp-tbl {
    min-width: 660px !important;
  }
  .metrics, .module-metrics, .kpi-cards, .dashboard-grid {
    grid-template-columns: 1fr !important;
  }
}
/* Field-first mobile shell. Desktop retains its existing dashboards. */
#mobile-field-dialog{width:min(540px,calc(100vw - 24px));max-height:85dvh;border:0;border-radius:18px;padding:18px;color:#17324c;background:#fff;overflow:auto}
#mobile-field-dialog::backdrop{background:#102b4677}
#mobile-field-dialog header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
#mobile-field-dialog h2{font-size:20px;margin:0}
#mobile-field-dialog button{min-height:44px;border:1px solid #d8e4e1;border-radius:10px;padding:10px;background:#f5faf8;color:#17324c}
#mobile-field-dialog label{display:grid;gap:6px}#mobile-field-dialog input{min-height:44px;font-size:16px;width:100%;box-sizing:border-box}
#mf-qr-video{width:100%;max-height:260px;background:#132d29;border-radius:12px}
.mf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mf-tile{min-height:58px;border:1px solid #d8e4e1;border-radius:12px;background:#fff;color:#17324c;padding:12px;text-align:left;font:600 14px/1.4 system-ui;overflow-wrap:anywhere}
.mf-tile:focus-visible{outline:3px solid #087b64;outline-offset:2px}.mf-note{font-size:12px;color:#526a80;line-height:1.5}.mf-warning{font-size:13px;padding:10px;background:#fff6dd;color:#76551a;border-radius:8px}
@media(max-width:768px){
 #mobile-bottom3nav .mf-report{background:#087b64!important;color:#fff!important;border-radius:16px;transform:translateY(-6px);box-shadow:0 3px 10px #087b6430}
 #mobile-bottom3nav [hidden]{display:none!important}
 #page-dashboard>.mf-home{display:block!important;margin:0;padding:0 0 18px}
 #page-dashboard:has(>.mf-home)>:not(.mf-home){display:none!important}
 .mf-hero{background:linear-gradient(120deg,#075e54,#138a78);color:white;border-radius:16px;padding:18px;margin:0 0 18px}
 .mf-hero h2{font:700 23px/1.25 system-ui;margin:8px 0 16px}.mf-hero small,.mf-hero p{font-size:12px}
 .mf-hero label{display:grid;gap:6px;font-size:12px}.mf-hero select{min-height:44px;background:#fff;color:#17324c;border-radius:8px;width:100%;font-size:16px;padding:8px}
 .mf-home h3{font-size:17px;margin:18px 0 10px}.mf-section-heading{display:flex;align-items:center;justify-content:space-between}.mf-section-heading .mf-tile{min-height:40px;padding:8px}
 .mf-action{padding:14px;border:1px solid #d8e4e1;border-left:4px solid #e6a13b;border-radius:10px;margin:10px 0;background:#fff}.mf-action p{font-size:12px;color:#526a80}
 #mobile-modules-grid .mf-module-heading{grid-column:1/-1;font-size:14px;margin:16px 4px 4px;color:#087b64}
 #mobile-field-dialog .mf-grid{margin:12px 0}
}
/* Compact phone controls; keep touch targets large without oversized artwork. */
@media (max-width: 768px) {
  html, body, #app .main, #app .page, #app .page.active {
    touch-action: auto !important;
  }
  #app .main { overflow-x: clip !important; }
  #app .page { font-size: 13px; line-height: 1.4; }
  #app .page .page-title, #app .page h1 { font-size: 20px !important; line-height: 1.25 !important; }
  #app .page .card { padding: 12px !important; border-radius: 12px !important; }
  #app .page .auris-module-header { padding: 12px !important; gap: 10px !important; }
  #app .page .auris-module-mark { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; }
  #app .page .auris-module-mark i { font-size: 20px; }
  #app .page .auris-module-breadcrumb { margin-bottom: 4px; flex-wrap: wrap; }
  #app .page .auris-module-meta { display: none; }
  #app .page .auris-module-title-row { gap: 8px; }
  #app .page .auris-module-subtitle { font-size: 12px; line-height: 1.4; }
  #app .page .auris-module-viewbar { touch-action: auto !important; }
  #app .page .auris-module-viewbar .auris-module-view { flex-basis: 125px; padding: 8px; }
  #app .page .auris-module-view-copy strong { font-size: 12px; }
  #app .page .auris-module-view-copy small { display: none; }
  #page-actions .auris-map-s-f17e623d95 { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
  #page-actions .auris-map-s-f17e623d95 .card { margin: 0 !important; min-height: 74px !important; overflow-wrap: anywhere; }
  #page-actions .auris-map-s-f17e623d95 .card::before, #page-actions .auris-map-s-f17e623d95 .card::after { display: none !important; }
  #page-actions [id^="map-m3"] { font-size: 24px !important; line-height: 1.2 !important; }
  #page-actions .auris-map-s-4422804ebb { font-size: 11px !important; white-space: normal !important; }
  #mobile-bottom3nav { min-height: 60px !important; padding: 4px 6px calc(4px + env(safe-area-inset-bottom,0px)) !important; }
  #mobile-bottom3nav .mob-nav-btn { min-height: 48px !important; gap: 3px !important; padding: 4px !important; }
  #mobile-bottom3nav .mob-nav-btn span { font-size: 10px !important; line-height: 1.2; }
  #mobile-bottom3nav .mob-nav-btn i, #mobile-bottom3nav .mob-nav-btn i::before { width: 22px !important; height: 22px !important; min-width: 22px !important; font-size: 22px !important; }
  #mobile-bottom3nav .mf-report { transform: none; border-radius: 10px; }
  #mobile-modules-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 6px !important; padding: 10px !important; align-content: start; }
  #mobile-modules-grid .mf-module-heading { grid-column: 1/-1 !important; font-size: 12px !important; margin: 10px 2px 3px !important; }
  #mobile-modules-grid .mob-module-btn { flex-direction: row !important; justify-content: flex-start !important; min-height: 48px !important; gap: 8px !important; padding: 8px !important; }
  #mobile-modules-grid .mob-module-icon-shell { width: 24px !important; height: 24px !important; flex: 0 0 24px; }
  #mobile-modules-grid .mob-module-icon-shell i, #mobile-modules-grid .mob-module-icon-shell i::before { width: 24px !important; height: 24px !important; min-width: 24px !important; font-size: 24px !important; }
  #mobile-modules-grid .mob-module-label { font-size: 12px !important; text-align: left; }
  #mobile-modules-panel > :first-child { padding: 10px 14px !important; }
  .mf-hero { padding: 14px; margin-bottom: 12px; }
  .mf-hero h2 { font-size: 20px; margin: 6px 0 12px; }
  .mf-home h3 { font-size: 15px; margin: 14px 0 8px; }
  .mf-grid { gap: 8px; }
  #app .mf-tile { font-size: 13px !important; min-height: 48px !important; padding: 10px; }
  #mobile-field-dialog { box-sizing: border-box; margin: auto; padding: 14px; max-height: calc(100dvh - 24px); font: 13px/1.45 system-ui; touch-action: auto; overscroll-behavior: contain; }
  #mobile-field-dialog h2 { font-size: 18px; }
  #mobile-field-dialog button { font-size: 13px; overflow-wrap: anywhere; }
  #app .ai-panel { pointer-events: none; }
  #app .ai-window.open { pointer-events: auto; }
  #app .ai-toggle { pointer-events: auto; width: 44px !important; height: 44px !important; min-height: 44px !important; box-shadow: 0 2px 8px #17324c22 !important; }
}
@media(max-width:768px){
 .page .mf-form-excluded{display:none!important}
 .mf-active-form{scroll-margin-top:64px;max-width:100%;min-width:0}
 .mf-form-company{font-size:13px;font-weight:600;padding:10px 12px;border-radius:8px;background:#e7f5ef;color:#075e54;margin:0 0 10px}
 .mf-active-form :is(.form3row,.form3row3,.grid2,.grid3){display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
 .mf-active-form :is(input,select,textarea){max-width:100%;box-sizing:border-box}
 .mf-active-form .card{padding:12px!important}
}
@media(max-width:768px){
 .mf-active-form div{min-width:0;box-sizing:border-box}
 .mf-active-form > div:not(.card){grid-template-columns:minmax(0,1fr)!important}
 .mf-active-form #audit-type-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .mf-active-form div:has(>table){max-width:100%;overflow-x:auto;touch-action:auto}
}

/* Scale whole sprites without changing their atlas coordinates. */
@media(max-width:768px){
 #mobile-bottom3nav .mob-nav-btn i.auris-module-icon,
 #mobile-modules-grid .mob-module-icon-shell i.auris-module-icon{width:34px!important;height:34px!important;min-width:34px!important;flex-basis:34px!important;font-size:0!important;zoom:.7}
}
#mobile-company-context{display:none}
@media(max-width:768px){
 #mobile-company-context:not([hidden]){display:flex;position:fixed;top:calc(52px + env(safe-area-inset-top,0px));left:0;right:0;height:54px;z-index:199;align-items:center;gap:10px;padding:5px 12px;background:#fff;border-bottom:1px solid #d8e4e1}
 #mobile-company-context label{font-size:12px;font-weight:700;color:#075e54;flex-shrink:0}
 #mobile-company-select{flex:1;width:0;min-width:0;height:42px;padding:6px 10px;border:1px solid #b7cec6;border-radius:8px;background:#fff;color:#17324c;font-size:16px}
 #app:has(#mobile-company-context:not([hidden])) .main{top:calc(106px + env(safe-area-inset-top,0px))!important}
}