/* DoorForce Technician — Capacitor native shell
   Layout overflow + safe-area only. No redesign. */

:root {
  --df-safe-top: env(safe-area-inset-top, 0px);
  --df-safe-right: env(safe-area-inset-right, 0px);
  --df-safe-bottom: env(safe-area-inset-bottom, 0px);
  --df-safe-left: env(safe-area-inset-left, 0px);
  --df-nav-height: 64px;
  --df-page-pad-x: 16px;
}

/* ---------- Global width containment (native only) ---------- */
html.df-native,
body.df-native {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-sizing: border-box;
}

/* Safe-area on body edges ONLY via dedicated shells — avoid body padding + 100vw children. */
body.df-native {
  padding: 0 !important;
  margin: 0 !important;
}

html.df-native *,
html.df-native *::before,
html.df-native *::after {
  box-sizing: border-box;
}

body.df-native .app-container,
body.df-native #main-app,
body.df-native .main-content,
body.df-native .content-body,
body.df-native .tab-panel,
body.df-native .page-shell,
body.df-native .df-time-page,
body.df-native .df-jobs-shell,
body.df-native .df-tech-home,
body.df-native .df-more-shell,
body.df-native .card,
body.df-native .panel,
body.df-native .df-modal-card,
body.df-native .modal-content,
body.df-native form,
body.df-native section {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Kill the classic 100vw overflow when any parent has padding */
body.df-native .app-container {
  width: 100% !important;
  max-width: 100% !important;
  height: 100dvh;
  min-height: 100dvh;
  overflow-x: hidden !important;
  overflow-y: hidden;
  display: flex !important;
  flex-direction: column !important;
}

body.df-native .main-content {
  flex: 1 1 auto;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: var(--df-safe-top);
  padding-bottom: 0;
}

/* Phone native: sidebar is overlay only — never reserves horizontal space */
body.df-native .sidebar {
  position: fixed !important;
  left: -100% !important;
  top: 0;
  bottom: 0;
  width: min(280px, 86vw) !important;
  max-width: 86vw !important;
  z-index: 1200 !important;
  padding-top: var(--df-safe-top);
  padding-bottom: var(--df-safe-bottom);
  padding-left: var(--df-safe-left);
  transition: left 0.22s ease;
}

body.df-native .sidebar.mobile-open {
  left: 0 !important;
}

/* ---------- Top header ---------- */
body.df-native .top-navbar {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 56px;
  padding: 10px max(12px, var(--df-safe-right)) 10px max(12px, var(--df-safe-left)) !important;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
  overflow: hidden;
}

body.df-native .page-title-section {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

body.df-native .df-header-logo {
  flex: 0 0 auto;
  width: 32px;
  height: auto;
  max-height: 28px;
  object-fit: contain;
  background: transparent;
  border: none;
  display: block;
}

body.df-native .df-tech-login-logo,
html.df-native .df-tech-login-logo {
  width: min(132px, 34vw);
  max-width: 160px;
  height: auto;
  object-fit: contain;
}

body.df-native .page-title-section h1,
body.df-native #page-title {
  font-size: clamp(1.05rem, 5.2vw, 1.35rem) !important;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding-right: 4px;
}

body.df-native .top-nav-actions {
  flex: 0 0 auto;
  gap: 6px;
  max-width: 48%;
  flex-wrap: wrap;
  justify-content: flex-end;
}

body.df-native .portal-switcher {
  display: none !important; /* preview switcher not needed on native tech phones */
}

/* ---------- Main content padding ---------- */
body.df-native .content-body {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 12px var(--df-page-pad-x) calc(var(--df-nav-height) + var(--df-safe-bottom) + 20px) !important;
  overflow-x: hidden !important;
}

@media (max-width: 360px) {
  body.df-native {
    --df-page-pad-x: 12px;
  }
}

/* ---------- Bottom navigation ---------- */
body.df-native .df-tech-bottom-nav {
  display: grid !important;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  z-index: 1000;
  padding: 6px max(4px, var(--df-safe-right)) calc(6px + var(--df-safe-bottom)) max(4px, var(--df-safe-left)) !important;
  overflow: hidden;
}

body.df-native .df-tech-bottom-nav button {
  min-width: 0;
  min-height: 48px;
  padding: 6px 2px;
  font-size: clamp(0.58rem, 2.6vw, 0.68rem);
  overflow: hidden;
}

body.df-native .df-tech-bottom-nav button span {
  font-size: 1.1rem;
}

/* ---------- Touch targets ---------- */
body.df-native .btn,
body.df-native .df-hero-btn,
body.df-native .df-more-link,
body.df-native .df-tech-home-tile,
body.df-native .df-mini-btn {
  min-height: 44px;
}

body.df-native .df-mini-btn {
  min-height: 52px;
  width: 100%;
  justify-content: center;
  text-align: center;
  font-size: clamp(17px, 4.5vw, 22px);
  padding: 12px 14px;
}

body.df-native .input-field,
body.df-native select.input-field,
body.df-native textarea.input-field {
  min-height: 44px;
  font-size: 16px;
  max-width: 100%;
}

body.df-native .nav-link:hover,
body.df-native .btn:hover {
  filter: none;
}

/* ---------- Tables: scroll inside wrapper only ---------- */
body.df-native .table-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.df-native .table-wrapper table {
  min-width: 520px;
}

/* ---------- GPS pill ---------- */
.df-native-gps-indicator {
  position: fixed;
  top: calc(10px + var(--df-safe-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 11000;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(10, 35, 66, 0.92);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
  max-width: min(90%, 360px);
  text-align: center;
  box-sizing: border-box;
}

.df-native-gps-indicator[hidden] {
  display: none !important;
}

body.df-native .df-ss-toast-host {
  bottom: calc(var(--df-nav-height) + var(--df-safe-bottom) + 12px);
  left: 12px;
  right: 12px;
  width: auto;
  max-width: 100%;
}

/* =========================================================
   PAYROLL / CLOCK IN-OUT PAGE
   ========================================================= */
body.df-native #panel-time-tracking,
body.df-native .df-time-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 14px;
}

body.df-native #panel-time-tracking .df-dispatch-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 16px;
  gap: 14px;
  border-radius: 18px;
  overflow: hidden;
}

body.df-native #panel-time-tracking .df-dispatch-toolbar > div {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.df-native #panel-time-tracking .df-dispatch-toolbar h2 {
  font-size: clamp(22px, 6vw, 32px) !important;
  line-height: 1.15;
  margin: 6px 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

body.df-native #panel-time-tracking .df-dispatch-toolbar .df-eyebrow {
  font-size: 0.72rem;
}

body.df-native #panel-time-tracking .df-dispatch-toolbar p {
  font-size: 16px;
  line-height: 1.45;
  max-width: 100% !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.df-native #panel-time-tracking .df-dispatch-actions {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
  justify-content: stretch;
}

body.df-native #panel-time-tracking .df-dispatch-actions .df-hero-btn,
body.df-native #panel-time-tracking .df-dispatch-actions .btn,
html[data-df-theme].df-native #panel-time-tracking .df-dispatch-actions .df-hero-btn {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 52px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: clamp(17px, 4.5vw, 22px) !important;
  padding: 12px 14px !important;
  white-space: normal !important;
  box-sizing: border-box !important;
}

/* Stat cards — one column on phones */
body.df-native #panel-time-tracking .df-oncall-summary-grid {
  grid-template-columns: 1fr !important;
  gap: 12px;
  width: 100%;
  max-width: 100%;
}

body.df-native #panel-time-tracking .df-oncall-summary-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 16px;
  border-radius: 16px;
}

body.df-native #panel-time-tracking .df-time-layout {
  grid-template-columns: 1fr !important;
  gap: 14px;
  width: 100%;
}

body.df-native #panel-time-tracking .df-time-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 16px;
  border-radius: 16px;
  overflow: hidden;
}

body.df-native #panel-time-tracking .df-time-tech-card {
  grid-template-columns: 46px 1fr !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 10px;
}

body.df-native #panel-time-tracking .df-time-tech-actions {
  grid-column: 1 / -1;
  width: 100%;
}

body.df-native #panel-time-tracking .df-time-tech-info h3 {
  font-size: clamp(1rem, 4.5vw, 1.2rem);
  overflow-wrap: anywhere;
}

body.df-native #panel-time-tracking .df-time-tech-info span,
body.df-native #panel-time-tracking .df-time-tech-info small {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =========================================================
   Phones (< 600px): force single column everywhere important
   ========================================================= */
@media (max-width: 599px) {
  body.df-native .metrics-grid,
  body.df-native .df-v06-grid,
  body.df-native .df-smart-dispatch-grid,
  body.df-native .df-oncall-summary-grid,
  body.df-native .df-tech-admin-summary,
  body.df-native .df-tech-home-grid,
  body.df-native .df-more-grid,
  body.df-native .df-photo-grid,
  body.df-native .df-job-summary-grid,
  body.df-native .df-wo-grid,
  body.df-native .df-form-grid,
  body.df-native .df-time-layout,
  body.df-native .df-dispatch-scheduler-grid {
    grid-template-columns: 1fr !important;
  }

  body.df-native .df-dispatch-toolbar,
  body.df-native .df-dispatch-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }

  body.df-native .df-dispatch-toolbar h2 {
    font-size: clamp(22px, 6vw, 32px) !important;
  }

  body.df-native .df-hero-btn,
  body.df-native .btn.btn-primary,
  body.df-native .btn.btn-outline,
  body.df-native .df-guided-action-btn,
  body.df-native .df-complete-btn {
    width: 100%;
    max-width: 100%;
  }

  body.df-native .df-tech-primary-nav {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 8-inch tablets */
@media (min-width: 600px) and (max-width: 899px) {
  body.df-native .df-tech-home-grid,
  body.df-native .df-more-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  body.df-native #panel-time-tracking .df-oncall-summary-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* 10-inch tablets */
@media (min-width: 768px) and (max-width: 1366px) {
  body.df-native #panel-mobile .df-job-detail-grid,
  body.df-native .df-passport-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }

  body.df-native canvas[id*="signature"],
  body.df-native canvas.signature-pad,
  body.df-native .df-signature-canvas {
    width: 100% !important;
    max-width: 100%;
    min-height: 220px;
    touch-action: none;
  }

  body.df-native #panel-time-tracking .df-oncall-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Landscape phones */
@media (max-width: 900px) and (orientation: landscape) {
  body.df-native .content-body {
    padding-bottom: calc(var(--df-nav-height) + var(--df-safe-bottom) + 16px) !important;
  }

  body.df-native #panel-time-tracking .df-oncall-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Modals — safe area + fit screen */
body.df-native .df-modal-backdrop,
body.df-native .modal {
  padding: max(12px, var(--df-safe-top)) max(12px, var(--df-safe-right)) max(12px, var(--df-safe-bottom)) max(12px, var(--df-safe-left));
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}

body.df-native .df-modal-card,
body.df-native .modal-content {
  width: 100%;
  max-width: min(100%, 520px);
  margin: 0 auto;
}

/* Scanner controls */
body.df-native .df-scanner-controls .btn,
body.df-native .df-scanner-controls button {
  min-height: 48px;
  min-width: 48px;
  padding: 12px 16px;
}

/* Never allow desktop max-width shells to force horizontal scroll on native phones */
@media (max-width: 767px) {
  body.df-native #panel-mobile .content-body,
  body.df-native .df-job-workspace,
  body.df-native .content-body {
    max-width: 100% !important;
  }
}