/* Mobile visual system: field-ready, calm and consistent with the Web surface. */
body[data-app-surface="mobile"] {
  --taste-accent: #0b7285;
  --taste-accent-dark: #075a69;
  --taste-accent-soft: #eaf5f6;
  --taste-ink: #182a3d;
  --taste-muted: #5f7182;
  --taste-line: #dce5ec;
  --taste-page: #f3f6f8;
  --taste-focus: 0 0 0 3px rgb(11 114 133 / 22%);
  --primary-color: var(--taste-accent);
  --app-ink-strong: var(--taste-ink);
  --app-ink: #34495c;
  --app-ink-muted: var(--taste-muted);
  --mobile-panel-border: var(--taste-line);
  --mobile-panel-radius: 10px;
  --mobile-panel-shadow: 0 1px 2px rgb(20 44 64 / 4%);
  color: var(--taste-ink);
  background: var(--taste-page);
}

body[data-app-surface="mobile"] .mobile-header {
  color: #fff;
  background: var(--taste-accent-dark);
  box-shadow: none;
}

body[data-app-surface="mobile"] .mobile-header :is(strong, small, button, a) { color: #fff; }
body[data-app-surface="mobile"] .mobile-content {
  background: var(--taste-page);
  scrollbar-color: #b9c7d1 transparent;
}

body[data-app-surface="mobile"] :is(.mobile-section, .mobile-form-card, .mobile-profile-card, .mobile-field-actions, .mobile-task-section, .mobile-project-summary, .mobile-card-list > article, .mobile-domain-overview, .cg-card) {
  border-color: var(--taste-line);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgb(20 44 64 / 4%);
}

body[data-app-surface="mobile"] .mobile-content :is(h1, h2, h3, h4, legend) { color: var(--taste-ink); }
body[data-app-surface="mobile"] .mobile-content :is(p, small, dt, .mobile-page-intro p) { color: var(--taste-muted); }

/* One recognizable primary action; semantic status colors remain untouched. */
body[data-app-surface="mobile"] .mobile-content :is(.el-button--primary, .is-primary, button[class*="primary"]),
body[data-app-surface="mobile"] :is(.mobile-sticky-actions, .mobile-page-actionbar) :is(.el-button--primary, .is-primary) {
  border-color: var(--taste-accent);
  color: #fff;
  background: var(--taste-accent);
}
body[data-app-surface="mobile"] .mobile-content :is(.el-button--primary, .is-primary, button[class*="primary"]):active:not(:disabled) { background: var(--taste-accent-dark); }

body[data-app-surface="mobile"] .mobile-content :is(button, a, input, select, textarea, [role="button"]):focus-visible {
  outline: none;
  box-shadow: var(--taste-focus);
}
body[data-app-surface="mobile"] .mobile-content :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 44px !important;
  box-sizing: border-box;
  border-color: #bdcbd5;
  border-radius: 7px;
  color: var(--taste-ink);
  background: #fff;
}
body[data-app-surface="mobile"] .mobile-content :is(input, select, textarea)::placeholder { color: #657789; opacity: 1; }
body[data-app-surface="mobile"] .mobile-content :is(input, select, textarea):focus {
  border-color: var(--taste-accent);
  outline: none;
  box-shadow: var(--taste-focus);
}

body[data-app-surface="mobile"] .mobile-quick-grid > :is(a, button) {
  border-color: #e3eaef;
  background: #fff;
}
body[data-app-surface="mobile"] .mobile-quick-grid > :is(a, button) .ui-icon,
body[data-app-surface="mobile"] .mobile-quick-grid > a:nth-child(n) .ui-icon {
  border-color: #d8e9eb !important;
  color: var(--taste-accent) !important;
  background: var(--taste-accent-soft) !important;
  box-shadow: none !important;
}
body[data-app-surface="mobile"] .mobile-quick-grid > :is(a, button) .ui-icon {
  color: var(--taste-accent);
  background: var(--taste-accent-soft);
}
body[data-app-surface="mobile"] .mobile-quick-grid > :is(a, button):active { transform: scale(.98); }

body[data-app-surface="mobile"] :is(.mobile-sticky-actions, .mobile-page-actionbar) {
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  border-top-color: var(--taste-line);
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 -4px 16px rgb(20 44 64 / 6%);
}
body[data-app-surface="mobile"] :is(.mobile-sticky-actions, .mobile-page-actionbar) button { min-height: 44px; }
body[data-app-surface="mobile"] .mobile-app .mobile-page-actionbar button.el-button--primary,
body[data-app-surface="mobile"] .mobile-app .mobile-sticky-actions button.el-button--primary {
  border-color: var(--taste-accent) !important;
  color: #fff !important;
  background: var(--taste-accent) !important;
}
body[data-app-surface="mobile"] .mobile-content :is(button, .el-button, [role="button"]) { -webkit-tap-highlight-color: transparent; }
body[data-app-surface="mobile"] .mobile-content :is(button, .el-button):disabled { cursor: not-allowed; opacity: .56; }

@media (max-width: 360px) {
  body[data-app-surface="mobile"] .mobile-content { padding-inline: 10px; }
  body[data-app-surface="mobile"] :is(.mobile-section, .mobile-form-card, .mobile-field-actions, .mobile-task-section) { padding-inline: 12px; }
  body[data-app-surface="mobile"] :is(.mobile-sticky-actions, .mobile-page-actionbar) { gap: 8px; }
  body[data-app-surface="mobile"] :is(.mobile-sticky-actions, .mobile-page-actionbar) button { padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-app-surface="mobile"] *, body[data-app-surface="mobile"] *::before, body[data-app-surface="mobile"] *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

body[data-app-surface="mobile"] .mobile-safety-smart-capture {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #c8dce9;
  border-radius: 12px;
  background: #f3f9fc;
}
body[data-app-surface="mobile"] .mobile-safety-smart-capture > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
body[data-app-surface="mobile"] .mobile-safety-smart-capture > header b { color: #123a52; font-size: 14px; }
body[data-app-surface="mobile"] .mobile-safety-smart-capture > header small { font-size: 11px; text-align: right; }
body[data-app-surface="mobile"] .mobile-safety-capture-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body[data-app-surface="mobile"] .mobile-safety-capture-actions > :is(button,label) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  height: 45px;
  min-height: 45px;
  padding: 8px;
  border: 1px solid #bdd8e7;
  border-radius: 9px;
  color: #075b75;
  background: #fff;
  font-size: 12px;
  font-weight: 650;
  text-align: center;
  cursor: pointer;
}
body[data-app-surface="mobile"] .mobile-safety-capture-actions > :is(button,label):active { background: #e6f5fa; }
body[data-app-surface="mobile"] .mobile-safety-capture-actions .ui-icon { flex: 0 0 auto; }
body[data-app-surface="mobile"] .mobile-safety-capture-actions input[type="file"] { display: none !important; }
body[data-app-surface="mobile"] .mobile-safety-capture-actions .mobile-file-control { display: none !important; }
body[data-app-surface="mobile"] .mobile-safety-capture-actions label > span:last-child { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; white-space: nowrap; }
body[data-app-surface="mobile"] .mobile-safety-smart-capture > p { margin: 0; font-size: 11px; line-height: 1.5; }
body[data-app-surface="mobile"] .mobile-safety-photo-preview {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #d8e6ed;
  border-radius: 8px;
  background: #fff;
}
body[data-app-surface="mobile"] .mobile-safety-photo-preview img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
body[data-app-surface="mobile"] .mobile-safety-photo-preview figcaption { overflow: hidden; padding: 4px 6px; color: #466276; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
body[data-app-surface="mobile"] .mobile-demo-voice { display: grid; gap: 8px; color: #23495d; font-size: 13px; font-weight: 600; }
body[data-app-surface="mobile"] .mobile-demo-voice textarea { box-sizing: border-box; width: 100%; min-height: 96px; padding: 10px 12px; border: 1px solid #c8dce9; border-radius: 8px; color: #17364b; background: #fff; font: inherit; font-weight: 400; line-height: 1.5; resize: vertical; }
body[data-app-surface="mobile"] .mobile-inspection-source { display: grid; gap: 8px; }
body[data-app-surface="mobile"] .mobile-inspection-source p { margin: 0; font-size: 12px; }
body[data-app-surface="mobile"] .mobile-safety-candidate-fields { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid #e0e9ef; }
body[data-app-surface="mobile"] .mobile-safety-candidate-fields > b { color: #123a52; font-size: 14px; }
body[data-app-surface="mobile"] .mobile-safety-candidate-fields > p { margin: -4px 0 0; color: #607488; font-size: 11px; line-height: 1.5; }
body[data-app-surface="mobile"] .m-saf-case-photo { position: relative; cursor: pointer; }
body[data-app-surface="mobile"] .m-saf-case-photo input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
body[data-app-surface="mobile"] .m-saf-case-preview { margin-top: 8px; overflow: hidden; border: 1px solid #d8e6ed; border-radius: 8px; }
body[data-app-surface="mobile"] .m-saf-case-preview img { display: block; width: 100%; max-height: 180px; object-fit: cover; }