/* MRMC.WEB V8.11.27.25 — phone-first sizing for installed PWAs and Android browser views.
   Keeps page zoom available; the initial layout fits the phone viewport. */
@media screen and (max-width: 720px) {
  html, body { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  /* Shared weekly PIN, device approval, and locked-access screens. */
  body:has(> .c) {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
  }
  body:has(> .c) > .c,
  body .c {
    box-sizing: border-box !important;
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: clamp(18px, 5vw, 26px) !important;
    overflow-wrap: anywhere;
  }
  body:has(> .c) h1 { font-size: clamp(23px, 6.4vw, 31px) !important; line-height: 1.16 !important; }
  body:has(> .c) .ey { font-size: 12px !important; letter-spacing: 1.2px !important; line-height: 1.4 !important; }
  body:has(> .c) .info,
  body:has(> .c) .err,
  body:has(> .c) .lock,
  body:has(> .c) .muted { font-size: 15px !important; line-height: 1.5 !important; overflow-wrap: anywhere; }
  body:has(> .c) label { font-size: 14px !important; }
  body:has(> .c) input,
  body:has(> .c) button,
  body:has(> .c) select { box-sizing: border-box !important; min-height: 50px !important; font-size: 16px !important; }
  body:has(> .c) input { width: 100% !important; }
  body:has(> .c) button { width: 100% !important; }
  /* MRMC Admin Authenticator: full-width phone canvas, readable controls, swipeable tabs. */
  body:has(#app) #app { box-sizing: border-box; width: 100%; max-width: 1280px; min-width: 0; margin: 0 auto; }
  #loginView.screen.center { box-sizing: border-box; width: 100%; min-width: 0; min-height: 100vh; min-height: 100svh; padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); }
  #loginView .auth-card { box-sizing: border-box; width: min(100%, 460px) !important; max-width: 460px !important; min-width: 0 !important; margin: auto !important; padding: clamp(18px, 5vw, 26px) !important; }
  #loginView h1 { font-size: clamp(25px, 7vw, 36px) !important; line-height: 1.12 !important; }
  #loginView .muted { font-size: 15px !important; line-height: 1.5 !important; }
  #loginView button, #loginView input, #dashView button, #dashView input, #dashView select, #dashView textarea { box-sizing: border-box; min-height: 46px; font-size: 16px !important; }
  #loginView .btn, #loginView form button { width: 100%; }
  #dashView { width: 100%; min-width: 0; }
  #dashView .app-head { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; padding: max(10px, env(safe-area-inset-top)) 12px 10px; }
  #dashView .head-brand { flex: 1 1 185px; min-width: 0; }
  #dashView .head-brand img { flex: 0 0 auto; max-width: 46px; max-height: 46px; }
  #dashView .head-brand b { font-size: clamp(14px, 4vw, 19px); }
  #dashView .head-brand small { display: block; max-width: 100%; font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
  #dashView .head-actions { display: grid; grid-template-columns: repeat(4, minmax(40px, 46px)); gap: 6px; margin-left: auto; }
  #dashView .head-actions .icon-btn { box-sizing: border-box; display: grid; place-items: center; width: 100%; min-width: 40px; min-height: 42px; padding: 5px; }
  #dashView .status-strip { box-sizing: border-box; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; width: 100%; padding: 9px 10px; }
  #dashView .status-strip > div { min-width: 0; padding: 9px 8px; }
  #dashView .status-strip span { font-size: 10px; }
  #dashView .status-strip b { font-size: 16px; overflow-wrap: anywhere; }
  #dashView .setup-card { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; width: calc(100% - 20px); margin: 10px auto; padding: 12px; }
  #dashView .setup-card button { width: 100%; white-space: normal; line-height: 1.3; }
  #dashView .tabs { box-sizing: border-box; display: flex; flex-wrap: nowrap; gap: 6px; width: 100%; max-width: 100%; padding: 8px 10px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  #dashView .tabs button { flex: 0 0 auto; min-width: 82px; min-height: 44px; padding: 9px 11px; font-size: 12px !important; white-space: nowrap; }
  #dashView .tab { box-sizing: border-box; width: 100%; min-width: 0; padding: 12px 12px max(20px, env(safe-area-inset-bottom)); }
  #dashView .section-title, #dashView .card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; min-width: 0; }
  #dashView .cards, #dashView .card, #dashView .notice, #dashView .history-summary { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  #dashView .card { padding: 13px; }
  #dashView .card h3 { font-size: 16px; line-height: 1.3; }
  #dashView .meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #dashView .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  #dashView .actions button { min-width: 0; padding: 9px 7px; white-space: normal; line-height: 1.25; }

  /* QC, Inventory, and Production app forms and data views. */
  .page, .wrap, main { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; }
  .page { margin-top: 10px !important; padding: 0 10px max(22px, env(safe-area-inset-bottom)) !important; }
  .panel, .card, .record, .alert { box-sizing: border-box; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .panel { padding: 14px !important; }
  .grid, .hard-grid, .checks, .kpis, .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .grid label, .hard-grid label, .panel label { min-width: 0; font-size: 14px; line-height: 1.35; }
  .panel input:not([type=checkbox]):not([type=radio]), .panel select, .panel textarea, .tools input, .tools select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 46px; font-size: 16px !important; }
  .panel button, .panel .btn, .tools button, .tools .btn, .primary { box-sizing: border-box; min-height: 46px; font-size: 15px !important; line-height: 1.25; white-space: normal; }
  .tools { box-sizing: border-box; display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; min-width: 0; padding: 10px !important; }
  .tools > * { min-width: 0 !important; max-width: 100%; }
  .wrap { padding: 10px !important; }
  .table-wrap, .table-scroll { display: block; width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .tbl, table { max-width: 100%; }
  .top nav { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
  .top nav a, .top nav button { flex: 1 1 30%; min-width: 82px; min-height: 44px; padding: 8px 9px; font-size: 12px; text-align: center; }
}
@media screen and (max-width: 720px) and (max-height: 700px) {
  body:has(> .c) { align-content: start !important; }
}
@media screen and (max-width: 380px) {
  #dashView .head-actions { grid-template-columns: repeat(4, minmax(36px, 42px)); gap: 4px; }
  #dashView .actions { grid-template-columns: minmax(0, 1fr); }
  .grid, .hard-grid, .checks, .kpis, .kpi-grid { grid-template-columns: minmax(0, 1fr) !important; }
}