/* Qala Machine Health — phone / field layer (loaded after the main stylesheet). */
:root { --qmh-amber: #f59e0b; --qmh-ink: #0f172a; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }
#root { min-height: 100dvh; }

/* ---------- boot splash (shown until React mounts) ---------- */
.qmh-boot { min-height: 100dvh; display: grid; place-items: center; background: var(--qmh-ink); color: #e2e8f0; font: 600 14px/1.4 system-ui, sans-serif; text-align: center; }
.qmh-boot img { width: 72px; height: 72px; border-radius: 18px; margin: 0 auto 14px; display: block; }
.qmh-boot small { display: block; opacity: .6; font-weight: 400; margin-top: 4px; }

/* ---------- bottom navigation + More sheet ---------- */
.qm-bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; background: hsl(var(--card)); border-top: 1px solid hsl(var(--border));
  padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 16px rgb(15 23 42 / .06); }
.qm-tab { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; padding: 6px 2px;
  font-size: 11px; font-weight: 500; color: hsl(var(--muted-foreground)); background: none; border: 0; position: relative; }
.qm-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-tab.qm-on { color: hsl(var(--foreground)); font-weight: 700; }
.qm-tab.qm-on::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--qmh-amber); }
.qm-tab:active { background: hsl(var(--muted)); }
.qm-sheet-bg { position: fixed; inset: 0; z-index: 40; background: rgb(15 23 42 / .45); animation: qmh-fade .15s ease-out; }
.qm-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: hsl(var(--card)); border-radius: 20px 20px 0 0;
  padding: 8px 14px calc(78px + env(safe-area-inset-bottom)); max-height: 80dvh; overflow-y: auto; animation: qmh-up .18s ease-out; }
.qm-grab { width: 40px; height: 4px; border-radius: 4px; background: hsl(var(--border)); margin: 4px auto 12px; }
.qm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qm-gi { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px; min-height: 76px; border-radius: 14px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--background)); font-size: 12px; font-weight: 600; color: hsl(var(--foreground)); text-align: center; }
.qm-gi.qm-on { border-color: var(--qmh-amber); background: #fffbeb; }
.qm-gi:active { transform: scale(.97); }
@keyframes qmh-up { from { transform: translateY(24px); opacity: .6 } to { transform: none; opacity: 1 } }
@keyframes qmh-fade { from { opacity: 0 } to { opacity: 1 } }

/* sandbox banner: short text on phones */
.qm-short { display: none; }
@media (max-width: 639px) { .qm-long { display: none; } .qm-short { display: inline; } }

/* ---------- PWA chrome (install / update / backup nudges) ---------- */
.qmh-toast { position: fixed; left: 12px; right: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 35; display: flex; gap: 10px; align-items: center;
  background: var(--qmh-ink); color: #f8fafc; border-radius: 14px; padding: 10px 12px; font: 13px/1.35 system-ui, sans-serif; box-shadow: 0 8px 24px rgb(0 0 0 / .25); }
.qmh-toast p { margin: 0; flex: 1; }
.qmh-toast button { border: 0; border-radius: 10px; padding: 9px 12px; font-weight: 700; font-size: 13px; min-height: 40px; }
.qmh-toast .qmh-go { background: var(--qmh-amber); color: var(--qmh-ink); }
.qmh-toast .qmh-x { background: transparent; color: #94a3b8; padding: 9px 6px; }
@media (min-width: 768px) { .qmh-toast { left: auto; right: 20px; bottom: 20px; max-width: 420px; } }

/* ---------- phone layout fixes ---------- */
@media (max-width: 767px) {
  main { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  /* card/grid children could not shrink -> page wider than the phone (History, Spares, Settings, Reports) */
  main [data-slot="card"], main [data-slot="card-content"], main [data-slot="card-header"], main .grid > *, main [data-slot="tabs"], main [data-slot="tabs-content"] { min-width: 0; max-width: 100%; }
  main [data-slot="table-container"] { -webkit-overflow-scrolling: touch; }
  /* headers with a title + action buttons: wrap instead of squashing the title to one word per line */
  main .flex.justify-between { flex-wrap: wrap; row-gap: .4rem; }
  main h2 { min-width: 0; }
  /* tab strips scroll sideways instead of overflowing the page */
  main [data-slot="tabs-list"] { max-width: 100%; width: auto; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; height: auto; min-height: 2.5rem; }
  main [data-slot="tabs-list"]::-webkit-scrollbar { display: none; }
  main [data-slot="tabs-trigger"] { flex: 0 0 auto; }
  main .flex.gap-1:has(> button), main .flex.gap-2:has(> button) { flex-wrap: wrap; }
  main img { max-width: 100%; height: auto; }
  main pre, main code { white-space: pre-wrap; word-break: break-word; }
}

/* ---------- touch ergonomics (gloved / dusty hands) ---------- */
@media (pointer: coarse) {
  /* iOS zooms the page on focus when input text is under 16px */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select { font-size: 16px !important; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, [role="combobox"] { min-height: 42px; }
  main button, [role="combobox"], [data-slot="tabs-trigger"] { min-height: 38px; }
  main button[data-slot="checkbox"], main [role="checkbox"] { min-height: 0; width: 22px; height: 22px; }
  main [role="switch"] { min-height: 0; }
  [role="option"] { min-height: 44px; }
  input[type="file"] { font-size: 14px; padding: 6px 0; }
  input[type="file"]::file-selector-button { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid hsl(var(--border)); background: hsl(var(--secondary)); font-weight: 600; margin-right: 10px; }
  input[type="date"], input[type="time"], input[type="datetime-local"] { min-width: 0; }
}

/* never let the page scroll sideways on a phone */
@media (max-width: 767px) { html, body { overflow-x: hidden; } }

/* badges with long notes wrap instead of pushing the page wider */
@media (max-width: 767px) {
  main [data-slot="badge"] { white-space: normal; max-width: 100%; height: auto; text-align: left; line-height: 1.3; }
}

/* tablets/desktop keep the original side navigation */
@media (min-width: 768px) { .qm-bnav, .qm-sheet-bg { display: none !important; } }

/* =================== cloud layer: sign-in gate, me sheet, users & access =================== */
html.qa-gated body { overflow: hidden; }
.qa-gate { position: fixed; inset: 0; z-index: 100; background: var(--qmh-ink); display: grid; place-items: center; padding: 20px; overflow-y: auto; }
.qa-card { width: 100%; max-width: 380px; background: #fff; border-radius: 18px; padding: 24px 20px; display: flex; flex-direction: column; gap: 10px; font: 15px/1.4 system-ui, sans-serif; color: #0f172a; }
.qa-card h1 { margin: 0; font-size: 20px; text-align: center; }
.qa-logo { width: 64px; height: 64px; border-radius: 16px; margin: 0 auto; }
.qa-sub { margin: 0 0 6px; color: #475569; text-align: center; font-size: 14px; }
.qa-form { display: flex; flex-direction: column; gap: 10px; }
.qa-card input, .qa-form input, .qa-form select, .qa-tri { width: 100%; min-height: 46px; border: 1px solid #cbd5e1; border-radius: 10px; padding: 10px 12px; font-size: 16px; background: #fff; color: #0f172a; }
.qa-btn { min-height: 46px; border: 0; border-radius: 12px; background: var(--qmh-ink); color: #fff; font-weight: 700; font-size: 15px; padding: 0 16px; }
.qa-btn:disabled { opacity: .6; }
.qa-btn2 { background: hsl(var(--secondary)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); }
.qa-sm { min-height: 38px; font-size: 13px; padding: 0 12px; }
.qa-link { background: none; border: 0; color: #2563eb; font-size: 14px; padding: 8px; min-height: 40px; }
.qa-danger { color: #dc2626; }
.qa-err { color: #b91c1c; font-size: 13px; min-height: 1em; white-space: pre-line; }
.qa-toasts { position: fixed; left: 12px; right: 12px; top: calc(10px + env(safe-area-inset-top)); z-index: 120; display: flex; flex-direction: column; gap: 8px; pointer-events: none; align-items: center; }
.qa-toast { max-width: 520px; background: var(--qmh-ink); color: #f8fafc; border-radius: 12px; padding: 10px 14px; font: 14px/1.35 system-ui, sans-serif; box-shadow: 0 8px 24px rgb(0 0 0 / .25); transition: opacity .3s; }
.qa-toast.qa-warn { background: #92400e; } .qa-toast.qa-out { opacity: 0; }
.qa-sheet-bg { position: fixed; inset: 0; z-index: 90; background: rgb(15 23 42 / .45); display: flex; align-items: flex-end; justify-content: center; }
.qa-sheet { width: 100%; max-width: 520px; background: hsl(var(--card)); border-radius: 20px 20px 0 0; padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.qa-grab { width: 40px; height: 4px; border-radius: 4px; background: hsl(var(--border)); margin: 4px auto 6px; }
.qa-me-name { font-weight: 800; font-size: 18px; } .qa-me-sub, .qa-me-status { color: hsl(var(--muted-foreground)); font-size: 13px; }
.qa-cred { background: hsl(var(--muted)); border-radius: 10px; padding: 12px; font-size: 14px; white-space: pre-wrap; }
.qmh-me { border: 1px solid hsl(var(--border)); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; background: hsl(var(--background)); max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 32px; }
/* users & access page */
.qa-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 14px 0 8px; }
.qa-head h2, .qa-head h3 { margin: 0; } h2 + .qa-muted { margin-top: 0; }
.qa-muted { color: hsl(var(--muted-foreground)); font-size: 13px; }
.qa-panel { border: 1px solid hsl(var(--border)); border-radius: 14px; padding: 14px; background: hsl(var(--card)); margin: 10px 0; }
.qa-panel h3, .qa-panel h4 { margin: 4px 0 8px; } .qa-panel h4 { margin-top: 14px; font-size: 14px; }
.qa-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qa-list { display: flex; flex-direction: column; gap: 6px; }
.qa-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; border: 1px solid hsl(var(--border)); border-radius: 12px; padding: 12px; background: hsl(var(--card)); min-height: 56px; width: 100%; }
.qa-item-main { display: flex; flex-direction: column; min-width: 0; } .qa-item-main span { overflow: hidden; text-overflow: ellipsis; }
.qa-pill { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.qa-pill-ok { background: #dcfce7; color: #166534; } .qa-pill-off { background: #fee2e2; color: #991b1b; } .qa-pill-master { background: #fef3c7; color: #92400e; }
.qa-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.qa-check { flex-direction: row !important; align-items: center; gap: 10px !important; font-weight: 500 !important; }
.qa-check input { width: 22px; height: 22px; min-height: 0; flex: none; }
.qa-perm { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid hsl(var(--border)); font-size: 14px; }
.qa-perm .qa-tri { width: auto; min-width: 150px; min-height: 40px; font-size: 14px; }
.qa-back { background: none; border: 0; color: #2563eb; font-size: 14px; padding: 6px 0; min-height: 40px; }

/* v3.1 History page utilities not present in the compiled Tailwind build */
.bg-slate-800{background-color:#1e293b}.border-slate-800{border-color:#1e293b}.border-slate-700{border-color:#334155}.text-slate-800{color:#1e293b}
.border-gray-300{border-color:#d1d5db}.bg-red-50{background-color:#fef2f2}.bg-rose-700{background-color:#be123c}.border-emerald-600{border-color:#059669}
.border-red-400{border-color:#f87171}.cursor-help{cursor:help}.leading-4{line-height:1rem}.max-h-\[40rem\]{max-height:40rem}.text-blue-700{color:#1d4ed8}
@media (min-width:640px){.sm\:inline{display:inline}}
.qmh-chip{min-height:36px}.qmh-more{min-height:36px;display:block}