/**
 * Marine Hub Mini App — Stage 1 App Shell (#377)
 * Header, diagnostic, bottom nav, page gutters, sticky integration.
 * Loads after design-system.css. Does not redesign screen content (Stages 2–3).
 */

/* —— Page shell —— */
body.mj-app {
  font-family: var(--mh-font);
  background: var(--mh-surface-page);
  color: var(--mh-text);
}

.app-shell {
  background: var(--mh-surface-page);
  max-width: 720px;
  margin-inline: auto;
}

.app-main {
  padding: var(--mh-space-3) var(--mh-page-gutter) var(--main-scroll-pad);
}

@media (min-width: 720px) {
  .app-shell {
    box-shadow: var(--mh-elev-med);
  }

  .app-main {
    padding-top: var(--mh-space-4);
  }
}

/* —— Global header —— */
.mh-header {
  padding: calc(8px + var(--safe-top)) var(--mh-page-gutter) 10px;
  background: var(--mh-surface-nav);
  border-bottom: 1px solid var(--mh-border-subtle);
  box-shadow: none;
}

.mh-header-row {
  gap: var(--mh-space-3);
}

.mh-brand {
  gap: 10px;
}

.mh-logo {
  width: 40px;
  height: 40px;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--mh-accent) 28%, transparent);
}

.mh-title {
  font-size: 1.12rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--mh-text);
}

html[data-theme="dark"] .mh-title {
  color: var(--mh-text);
}

.mh-subtitle {
  margin-top: 1px;
  font-size: var(--mh-type-caption);
  font-weight: 500;
  color: var(--mh-text-muted);
}

.mh-product-status {
  max-width: 7.5rem;
  padding: 4px 8px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--mh-accent);
  background: color-mix(in srgb, var(--mh-accent) 10%, var(--mh-surface));
  border: 1px solid color-mix(in srgb, var(--mh-accent) 22%, transparent);
}

/* Screen titles use shared type scale (no competing oversized marketing headers) */
.mj-screen-title,
.mh-page-header__title {
  font-size: var(--mh-type-screen);
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--mh-text);
}

.mj-screen-sub,
.mh-page-header__subtitle {
  font-size: var(--mh-type-meta);
  color: var(--mh-text-muted);
}

.mj-screen-head {
  margin-bottom: var(--mh-space-4);
}

/* —— Auth diagnostic (TEST-only, compact utility) —— */
.miniapp-auth-diag {
  margin: 0 var(--mh-page-gutter) var(--mh-space-2);
  padding: 4px 8px;
  max-height: 2.4em;
  overflow: hidden;
  font-size: 0.58rem;
  line-height: 1.25;
  font-weight: 500;
  color: var(--mh-text-muted);
  background: var(--mh-surface-diag);
  border: 1px solid var(--mh-border-subtle);
  border-radius: var(--mh-radius-sm);
  opacity: 0.72;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.miniapp-auth-diag[data-diag-state="ok"] {
  opacity: 0.55;
  color: var(--mh-text-muted);
  border-color: var(--mh-border-subtle);
}

.miniapp-auth-diag[data-diag-state="warn"] {
  opacity: 0.92;
  color: var(--mh-warning);
  background: color-mix(in srgb, var(--mh-warning) 10%, var(--mh-surface));
  border-color: color-mix(in srgb, var(--mh-warning) 28%, transparent);
  max-height: 3.2em;
  white-space: normal;
}

.miniapp-auth-diag[data-diag-state="error"] {
  opacity: 1;
  color: var(--mh-danger);
  background: color-mix(in srgb, var(--mh-danger) 10%, var(--mh-surface));
  border-color: color-mix(in srgb, var(--mh-danger) 30%, transparent);
  max-height: 4.2em;
  white-space: normal;
  overflow: auto;
}

html[data-theme="dark"] .miniapp-auth-diag {
  opacity: 0.7;
}

html[data-theme="dark"] .miniapp-auth-diag[data-diag-state="ok"] {
  opacity: 0.5;
}

/* —— Bottom navigation —— */
.bottom-nav {
  background: var(--mh-surface-nav);
  border-top: 1px solid var(--mh-border-subtle);
  box-shadow: var(--mh-elev-sticky);
  min-height: calc(var(--nav-height) + var(--safe-bottom));
  padding: 4px 2px var(--safe-bottom);
}

.bottom-nav-item {
  gap: 3px;
  min-height: calc(var(--nav-height) - 4px);
  padding: 4px 2px 6px;
  color: var(--mh-nav-inactive);
  border-radius: var(--mh-radius-sm);
}

.bottom-nav-item.is-active {
  color: var(--mh-nav-active);
  font-weight: 700;
  background: transparent;
}

.bottom-nav-item.is-active::after {
  width: 16px;
  height: 2px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--mh-accent);
}

body.mj-app .bottom-nav-item.is-active::after {
  width: 16px;
  height: 2px;
  background: var(--mh-accent);
}

.bottom-nav-svg {
  width: 1.35rem;
  height: 1.35rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bottom-nav-item.is-active .bottom-nav-svg {
  stroke-width: 2;
}

.bottom-nav-label {
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.bottom-nav-item.is-active .bottom-nav-label {
  color: var(--mh-accent);
  font-weight: 750;
}

/* —— Shared sticky action surfaces (existing markup hooks) —— */
.job-detail-actions,
.ref-rc-detail__sticky.sticky-action-bar,
.mh-sticky-bar {
  background: var(--mh-surface-sticky) !important;
  border-top: 1px solid var(--mh-border-subtle) !important;
  box-shadow: var(--mh-elev-sticky);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Soften common nested-card borders for Stage 1 shell coherence (not full screen redesign) */
.jobs-filters,
.mj-search-block.jobs-filters,
.mj-alert-section,
.mj-career-card,
.mj-application-card {
  border-color: var(--mh-border-subtle);
  box-shadow: var(--mh-elev-low);
  border-radius: var(--mh-radius-lg);
}

.job-card-v2.job-offer-card,
body.mj-app .job-card-v2.job-offer-card {
  border-color: var(--mh-border-subtle);
  box-shadow: var(--mh-elev-low);
  border-radius: var(--mh-radius-lg);
}

/* Map a few legacy CTAs onto button hierarchy without rewriting screens */
.btn-demo-cta,
.btn-account-upgrade,
.btn-demo-sheet-primary {
  min-height: var(--mh-control-h);
  border-radius: var(--mh-radius-md);
  font-size: var(--mh-type-button);
  font-weight: 700;
}

.btn-load-more,
.mj-career-card__action {
  min-height: var(--mh-control-h-sm);
  border-radius: var(--mh-radius-md);
}

/* Inputs/selects in existing forms — shared affordance */
.mj-screen input[type="text"],
.mj-screen input[type="search"],
.mj-screen input[type="email"],
.mj-screen select,
.mj-screen textarea,
.jobs-filters input,
.jobs-filters select,
.mj-alert-section input,
.mj-alert-section select,
.mj-alert-section textarea {
  min-height: var(--mh-control-h-sm);
  border-radius: var(--mh-radius-md);
  border: 1px solid var(--mh-border-standard);
  background: var(--mh-surface-interactive);
  color: var(--mh-input-text);
}

.mj-screen input:focus,
.mj-screen select:focus,
.mj-screen textarea:focus,
.jobs-filters input:focus,
.jobs-filters select:focus {
  outline: none;
  border-color: var(--mh-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mh-focus) 20%, transparent);
}

/* Reduce card-in-card pressure on filter/alert slabs */
.mj-alert-draft-grid {
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .mh-header,
html[data-theme="dark"] .bottom-nav {
  background: var(--mh-surface-nav);
  border-color: var(--mh-border-subtle);
}

html[data-theme="dark"] .mh-product-status {
  color: var(--jobs-primary-light, #7eb8ef);
  background: color-mix(in srgb, var(--mh-accent) 16%, var(--mh-surface));
}