/**
 * Technician shell polish — aligns field app with Office df-ux-v2 system.
 * CSS only. No workflow changes.
 */

html.df-ux-v2[data-df-app="technician"],
html.df-ux-v2 body[data-df-app="technician"] {
  --df-navy: #0a2342;
  --df-navy-soft: #0f4c81;
  --df-red: #bf0a30;
  --df-surface: #ffffff;
  --df-surface-soft: #f4f6f9;
  --df-border: #e2e8f0;
  --df-control-h: 44px;
}

/* Primary nav: cleaner field toolbar */
html.df-ux-v2 .df-tech-primary-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  background: var(--df-surface);
  border: 1px solid var(--df-border);
  border-radius: 12px;
  margin: 0 0 16px;
}

html.df-ux-v2 .df-tech-primary-nav button {
  min-height: 40px !important;
  border-radius: 10px !important;
  border: 1px solid var(--df-border) !important;
  background: #fff !important;
  color: var(--df-navy) !important;
  font-weight: 650 !important;
  font-size: 0.82rem !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
}

html.df-ux-v2 .df-tech-primary-nav button.active,
html.df-ux-v2 .df-tech-primary-nav button[aria-current="page"] {
  background: var(--df-navy) !important;
  border-color: var(--df-navy) !important;
  color: #fff !important;
}

/* Bottom nav */
html.df-ux-v2 .df-tech-bottom-nav {
  background: var(--df-navy) !important;
  border-top: 0 !important;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
}

html.df-ux-v2 .df-tech-bottom-nav button {
  border-radius: 10px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

html.df-ux-v2 .df-tech-bottom-nav button.active {
  background: rgba(191, 10, 48, 0.28) !important;
  color: #fff !important;
}

/* Job cards / home */
html.df-ux-v2 .df-job-card,
html.df-ux-v2 .df-tech-work-card,
html.df-ux-v2 .df-wo-card {
  border: 1px solid var(--df-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
  padding: 14px 16px !important;
}

html.df-ux-v2 .df-jobs-list-header,
html.df-ux-v2 .df-tech-home-group h2,
html.df-ux-v2 .page-header h1 {
  color: var(--df-navy) !important;
}

html.df-ux-v2 .df-guided-action-btn,
html.df-ux-v2 #btn-step-start-drive,
html.df-ux-v2 #btn-step-arrive-start,
html.df-ux-v2 .df-complete-btn {
  min-height: 48px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}

/* Hide demo / clutter chrome already gated in design-system; reinforce */
html.df-ux-v2 .df-tech-command-card,
html.df-ux-v2 .df-tech-demo-grid,
html.df-ux-v2 .df-executive-hero,
html.df-ux-v2 .df-teron-fab,
html.df-ux-v2 .df-jarvis-fab,
html.df-ux-v2 #teron-fab,
html.df-ux-v2 #df-academy-help-btn,
html.df-ux-v2 .df-ac-help-btn,
html.df-ux-v2 .portal-switcher,
html.df-ux-v2 #df-theme-picker {
  display: none !important;
}

/* One messages entry: bottom/primary nav owns it; hide duplicate header chip when present */
html.df-ux-v2 #df-header-messages-btn {
  display: none !important;
}

/* Content spacing */
html.df-ux-v2 .content-body,
html.df-ux-v2 .df-tech-main,
html.df-ux-v2 main {
  padding: 16px !important;
  max-width: 1100px;
  margin: 0;
}

html.df-ux-v2 #page-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--df-navy) !important;
}

html.df-ux-v2 .df-more-shell {
  max-width: 720px;
}

html.df-ux-v2 .df-more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

html.df-ux-v2 .df-more-link {
  min-height: 48px;
  border-radius: 12px !important;
  border: 1px solid var(--df-border) !important;
  background: #fff !important;
  color: var(--df-navy) !important;
  font-weight: 650 !important;
  text-align: left;
  padding: 12px 14px !important;
}

html.df-ux-v2 .df-sticky-primary {
  border-top: 1px solid var(--df-border) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(6px);
}

/* Desktop/tablet: sidebar is the single nav — hide duplicate primary + bottom bars */
@media (min-width: 900px) {
  html.df-ux-v2 .content-body,
  html.df-ux-v2 .df-tech-main,
  html.df-ux-v2 main {
    padding: 24px !important;
    max-width: 1100px;
  }

  html.df-ux-v2 .df-tech-bottom-nav,
  html.df-ux-v2 .df-tech-primary-nav {
    display: none !important;
  }
}

/* Phone: bottom nav only — no triple nav */
@media (max-width: 899px) {
  html.df-ux-v2 .df-tech-primary-nav {
    display: none !important;
  }

  html.df-ux-v2 .content-body,
  html.df-ux-v2 .df-tech-main,
  html.df-ux-v2 main {
    padding: 12px 12px 88px !important;
  }

  html.df-ux-v2 .df-tech-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* Tablet landscape: denser primary nav, keep bottom nav off */
@media (min-width: 760px) and (max-width: 1099px) {
  html.df-ux-v2 .df-tech-primary-nav {
    gap: 6px;
    padding: 8px 10px;
  }

  html.df-ux-v2 .df-tech-primary-nav button {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.78rem !important;
  }
}

.df-live-error { border: 1px solid #b91c1c; background: #fef2f2; color: #7f1d1d; padding: 0.85rem 1rem; border-radius: 8px; margin: 0.75rem 0; }
#df-live-sync-chip { font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.55rem; border-radius: 999px; background: #e2e8f0; }