:root {
  color-scheme: light;
  --navy: #0f172a;
  --navy-2: #1e293b;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-soft: #eff6ff;
  --gold: #f59e0b;
  --red: #b91c1c;
  --red-soft: #fef2f2;
  --green: #166534;
  --green-soft: #f0fdf4;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-500: #64748b;
  --gray-700: #334155;
  --white: #ffffff;
  --shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--gray-50); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  background: var(--gray-50);
  color: var(--navy);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.65; }

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px max(20px, calc((100vw - 1120px) / 2));
  background: var(--navy);
  color: var(--white);
}

.brand { display: flex; align-items: center; gap: 13px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-button.employee-active { border-color: #86efac; background: rgba(22, 101, 52, 0.35); color: #dcfce7; }
.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,0.1);
  color: #93c5fd;
}
.brand-mark svg { width: 34px; height: 34px; }
.brand h1 { margin: 0; font-size: clamp(1.05rem, 4vw, 1.35rem); }
.brand p { margin: 2px 0 0; color: #cbd5e1; font-size: 0.85rem; }

.tabs {
  display: flex;
  gap: 4px;
  padding: 8px max(16px, calc((100vw - 1120px) / 2));
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 5;
}
.tab {
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 10px 14px;
  color: var(--gray-500);
  font-weight: 700;
}
.tab.active { background: var(--blue-soft); color: var(--blue-dark); }
.count-pill {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: 5px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--gray-200);
  color: var(--gray-700);
  font-size: 0.75rem;
}
.tab.active .count-pill { background: #dbeafe; color: var(--blue-dark); }

main { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 60px; }
.view { display: none; }
.view.active { display: block; }

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.section-heading h2 { margin: 0; font-size: clamp(1.5rem, 5vw, 2rem); }
.eyebrow { margin: 0 0 4px; color: var(--blue-dark); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.status-badge, .order-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  padding: 6px 10px;
  font-size: 0.8rem;
  font-weight: 800;
}

.panel {
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid var(--gray-200);
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.panel-heading h3 { margin: 0; font-size: 1.08rem; }
.panel-heading p { margin: 4px 0 0; color: var(--gray-500); font-size: 0.9rem; }

.form-grid { display: grid; gap: 16px; }
.two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three-column { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.full-width { grid-column: 1 / -1; }

label > span, .label-row label { display: block; margin-bottom: 7px; font-size: 0.88rem; font-weight: 700; color: var(--gray-700); }
label b, .label-row b { color: var(--red); }
input, textarea, select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--gray-300);
  border-radius: 12px;
  background: var(--white);
  color: var(--navy);
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea { resize: vertical; line-height: 1.45; }
input:focus, textarea:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); }
input.invalid, textarea.invalid { border-color: var(--red); box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.1); }

.vin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; }
.vin-field input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.vin-actions { display: flex; gap: 8px; }
.field-message { min-height: 20px; margin: 8px 0 16px; color: var(--gray-500); font-size: 0.84rem; }
.field-message.success { color: var(--green); }
.field-message.error { color: var(--red); }

.primary-button, .secondary-button, .danger-button, .icon-button {
  min-height: 44px;
  border-radius: 11px;
  padding: 10px 15px;
  font-weight: 800;
}
.primary-button { border: 1px solid var(--blue); background: var(--blue); color: var(--white); }
.primary-button:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.secondary-button { border: 1px solid var(--gray-300); background: var(--white); color: var(--gray-700); }
.secondary-button:hover { background: var(--gray-100); }
.danger-button { border: 1px solid #fecaca; background: var(--red-soft); color: var(--red); }
.icon-button { border: 1px solid rgba(255,255,255,0.28); background: transparent; color: inherit; }
.large { min-width: 220px; min-height: 52px; }

.repair-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.choice-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 112px;
  padding: 16px;
  border: 1px solid var(--gray-300);
  border-radius: 14px;
  background: var(--white);
  transition: border-color 0.15s, background 0.15s;
}
.choice-card:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.choice-card input { width: 20px; min-height: 20px; margin: 2px 0 0; accent-color: var(--blue); }
.choice-copy { display: grid; gap: 5px; }
.choice-copy strong { color: var(--navy); }
.choice-copy small { color: var(--gray-500); line-height: 1.35; }
.other-repair { margin-top: 18px; }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.label-row span { color: var(--gray-500); font-size: 0.8rem; }

.photo-heading { align-items: center; }
.photo-count { color: var(--gray-500); font-size: 0.85rem; font-weight: 800; }
.upload-zone {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  border: 2px dashed var(--gray-300);
  border-radius: 16px;
  background: var(--gray-50);
  text-align: center;
  padding: 20px;
  cursor: pointer;
}
.upload-zone:hover { border-color: var(--blue); background: var(--blue-soft); }
.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload-zone small { color: var(--gray-500); }
.upload-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #dbeafe; color: var(--blue-dark); font-size: 1.5rem; }
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.photo-card { margin: 0; overflow: hidden; border: 1px solid var(--gray-200); border-radius: 14px; background: var(--white); }
.photo-card img { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; background: var(--gray-100); }
.photo-card figcaption { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px; }
.photo-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gray-500); font-size: 0.75rem; }
.remove-photo { border: 0; background: transparent; color: var(--red); font-size: 0.75rem; font-weight: 800; }

.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.alert { margin-bottom: 16px; border: 1px solid #fecaca; border-radius: 12px; background: var(--red-soft); color: var(--red); padding: 12px 14px; font-weight: 700; }

.orders-heading { align-items: end; }
.orders-toolbar { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 18px; }
.orders-list { display: grid; gap: 12px; }
.order-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  background: var(--white);
  padding: 18px;
  box-shadow: var(--shadow);
}
.order-card h3 { margin: 0; font-size: 1rem; }
.order-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 7px; color: var(--gray-500); font-size: 0.84rem; }
.order-number { color: var(--blue-dark); font-weight: 900; }
.order-card-actions { display: grid; justify-items: end; gap: 9px; }
.order-status select { min-height: 36px; border: 0; padding: 0 4px; background: transparent; color: inherit; font-weight: 800; }
.empty-state { text-align: center; padding: 70px 20px; border: 1px dashed var(--gray-300); border-radius: 16px; background: var(--white); }
.empty-state[hidden] { display: none; }
.empty-state h3 { margin: 10px 0 4px; }
.empty-state p { margin: 0; color: var(--gray-500); }
.empty-icon { font-size: 2rem; color: var(--gray-500); }

.scanner-dialog, .order-dialog, .employee-dialog {
  width: min(760px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  border: 0;
  border-radius: 20px;
  padding: 22px;
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 24px 80px rgba(15,23,42,.35);
}
dialog::backdrop { background: rgba(15, 23, 42, 0.7); }
.dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.dialog-header h2 { margin: 0; }
.dialog-header p:not(.eyebrow) { margin: 4px 0 0; color: var(--gray-500); }
.close-button { width: 42px; min-height: 42px; padding: 0; border-color: var(--gray-300); color: var(--navy); font-size: 1.6rem; line-height: 1; }
.scanner-frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 16px; background: #020617; }
.scanner-frame video { width: 100%; height: 100%; object-fit: cover; }
.scan-guide { position: absolute; inset: 28% 8%; border: 3px solid rgba(255,255,255,.88); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0,0,0,.22); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.dialog-actions.wrap { flex-wrap: wrap; }

.scanner-browser-line { font-size: .78rem; }
.scanner-camera-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.scanner-camera-actions button { flex: 1 1 150px; }
.scanner-primary-actions button { flex: 1 1 150px; }
@media (max-width: 600px) {
  .scanner-dialog { padding: 16px; }
  .scanner-camera-actions, .scanner-primary-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .scanner-camera-actions button, .scanner-primary-actions button { width: 100%; }
  .scanner-primary-actions #closeScannerBottomButton { grid-column: 1 / -1; }
}


.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.detail-card { border: 1px solid var(--gray-200); border-radius: 14px; padding: 14px; }
.detail-card.full { grid-column: 1 / -1; }
.detail-label { margin-bottom: 5px; color: var(--gray-500); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.detail-value { white-space: pre-wrap; overflow-wrap: anywhere; }
.detail-photos { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 8px; }
.detail-photos img { width: 100%; aspect-ratio: 4/3; border-radius: 10px; object-fit: cover; border: 1px solid var(--gray-200); }

@media (max-width: 800px) {
  .three-column, .repair-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .photo-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .vin-row { grid-template-columns: 1fr; }
  .vin-actions { justify-content: stretch; }
  .vin-actions button { flex: 1; }
}

@media (max-width: 600px) {
  .app-header { padding: 14px 16px; }
  .brand-mark { width: 42px; height: 42px; }
  .brand p { display: none; }
  main { width: min(100% - 24px, 1120px); padding-top: 20px; }
  .panel { padding: 17px; border-radius: 15px; }
  .two-column, .three-column, .repair-grid, .orders-toolbar, .detail-grid { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .order-card { grid-template-columns: 1fr; }
  .order-card-actions { justify-items: stretch; }
  .order-card-actions .secondary-button { width: 100%; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions button { width: 100%; }
  .large { min-width: 0; }
  .section-heading { align-items: flex-start; }
  .detail-card.full { grid-column: auto; }
  .detail-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  body > *:not(dialog[open]) { display: none !important; }
  dialog[open] { position: static; width: 100%; max-height: none; box-shadow: none; padding: 0; }
  dialog::backdrop, .dialog-actions, .close-button { display: none; }
}


/* Document and request workflow */
.workflow-section + .workflow-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--gray-200); }
.panel-heading.compact { margin-bottom: 12px; }
.panel-heading h4, .employee-panel-heading h4 { margin: 0; font-size: 1rem; }
.panel-heading.compact p { max-width: 720px; }
.document-upload-zone { min-height: 126px; }
.document-list, .detail-document-list { display: grid; gap: 9px; }
.document-row, .detail-document-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: var(--white);
}
.document-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .04em;
}
.document-copy { min-width: 0; display: grid; gap: 3px; }
.document-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.document-copy small { color: var(--gray-500); }
.document-actions { display: flex; align-items: center; gap: 8px; }
.document-link, .remove-document, .remove-detail-document {
  border: 0;
  background: transparent;
  color: var(--blue-dark);
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
}
.remove-document, .remove-detail-document { color: var(--red); padding: 6px; }
.request-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.request-card {
  width: 100%;
  min-height: 128px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 2px solid var(--gray-300);
  border-radius: 16px;
  background: var(--gray-100);
  color: var(--gray-500);
  padding: 16px;
  text-align: left;
  transition: border-color .15s, background .15s, color .15s, transform .15s;
}
.request-card:disabled { opacity: 1; cursor: not-allowed; }
.request-card.ready { border-color: var(--blue); background: var(--blue-soft); color: var(--navy); }
.request-card.ready:hover { transform: translateY(-1px); }
.request-card.requested { border-color: #16a34a; background: var(--green-soft); color: var(--navy); }
.request-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-500);
  font-weight: 900;
}
.request-card.ready .request-icon { background: #dbeafe; color: var(--blue-dark); }
.request-card.requested .request-icon { background: #dcfce7; color: var(--green); }
.request-copy { min-width: 0; display: grid; gap: 5px; }
.request-copy strong { color: inherit; font-size: 1rem; }
.request-copy small { color: inherit; opacity: .82; line-height: 1.35; }
.request-state { align-self: start; border-radius: 999px; background: var(--gray-200); color: var(--gray-700); padding: 5px 8px; font-size: .72rem; font-weight: 900; }
.request-card.ready .request-state { background: #dbeafe; color: var(--blue-dark); }
.request-card.requested .request-state { background: #dcfce7; color: var(--green); }
.employee-panel, .employee-detail-panel {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid #93c5fd;
  border-radius: 16px;
  background: var(--blue-soft);
}
.employee-detail-panel { margin-top: 0; }
.employee-panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.employee-badge { border-radius: 999px; background: var(--navy); color: var(--white); padding: 5px 9px; font-size: .72rem; font-weight: 900; }
.bypass-control {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #93c5fd;
  border-radius: 13px;
  background: var(--white);
}
.bypass-control input { width: 20px; min-height: 20px; margin: 2px 0 0; accent-color: var(--blue); }
.bypass-control span { display: grid; gap: 4px; }
.bypass-control strong { font-size: .92rem; }
.bypass-control small { color: var(--gray-500); line-height: 1.35; }
.compact-upload { min-height: 110px; }
.detail-request-grid { margin-top: 6px; }
.mini-badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mini-badge { border-radius: 999px; background: var(--blue-soft); color: var(--blue-dark); padding: 5px 8px; font-size: .72rem; font-weight: 900; }
.employee-dialog { width: min(520px, calc(100% - 24px)); }
.employee-dialog input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; }

@media (max-width: 800px) {
  .request-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .app-header { align-items: flex-start; }
  .header-actions { flex-direction: column; align-items: stretch; }
  .header-actions .icon-button { min-height: 38px; padding: 7px 10px; font-size: .78rem; }
  .document-row, .detail-document-row { grid-template-columns: auto minmax(0, 1fr); }
  .document-actions { grid-column: 1 / -1; justify-content: flex-end; border-top: 1px solid var(--gray-200); padding-top: 8px; }
  .request-card { grid-template-columns: auto minmax(0, 1fr); }
  .request-state { grid-column: 2; justify-self: start; }
}

@media print {
  .document-actions, .employee-detail-panel, .detail-request button { display: none !important; }
}

/* Customer Scrub document access */
.customer-scrub-section {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: var(--gray-50);
}
.customer-document-status {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--gray-200);
  color: var(--gray-600);
  padding: 6px 10px;
  font-size: .72rem;
  font-weight: 900;
}
.customer-document-status.available {
  background: var(--green-soft);
  color: var(--green);
}
.customer-document-empty {
  padding: 14px;
  border: 1px dashed var(--gray-300);
  border-radius: 12px;
  color: var(--gray-500);
  background: var(--white);
  font-size: .9rem;
}
.detail-helper {
  margin: -2px 0 10px;
  color: var(--gray-500);
  font-size: .82rem;
  line-height: 1.45;
}

/* Midwest Precision Theme */
:root {
  --navy: #171b20;
  --navy-2: #252c33;
  --blue: #c92a2a;
  --blue-dark: #991b1b;
  --blue-soft: #fff1f0;
  --gold: #f0a202;
  --red: #b42318;
  --red-soft: #fff1f0;
  --green: #18794e;
  --green-soft: #edf9f2;
  --gray-50: #f5f6f7;
  --gray-100: #eceff1;
  --gray-200: #d9dee3;
  --gray-300: #bcc4cc;
  --gray-500: #66717d;
  --gray-600: #505b66;
  --gray-700: #333d47;
  --white: #ffffff;
  --carbon: #101419;
  --steel: #46515c;
  --amber-soft: #fff7df;
  --shadow: 0 14px 34px rgba(19, 25, 31, 0.09);
}

html {
  background: #eef0f2;
}

body {
  background-color: #f3f4f5;
  background-image:
    linear-gradient(rgba(23, 27, 32, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 27, 32, 0.025) 1px, transparent 1px);
  background-size: 28px 28px;
}

.app-header {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(255,255,255,.035) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(135deg, #0f1317 0%, #252c33 58%, #151a1f 100%);
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 10px 26px rgba(16, 20, 25, .22);
}

.app-header::after {
  content: "";
  position: absolute;
  right: -65px;
  bottom: -110px;
  width: 260px;
  height: 260px;
  border: 2px solid rgba(255,255,255,.055);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255,255,255,.025), 0 0 0 56px rgba(255,255,255,.018);
  pointer-events: none;
}

.brand, .header-actions {
  position: relative;
  z-index: 1;
}

.brand-mark {
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(145deg, #303943, #161b20);
  color: #ffb21a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px rgba(0,0,0,.24);
}

.brand h1 {
  letter-spacing: .015em;
}

.brand p {
  color: #cfd5db;
  letter-spacing: .03em;
}

.icon-button {
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(8px);
}

.icon-button:hover {
  border-color: rgba(255,178,26,.75);
  background: rgba(255,178,26,.12);
}

.tabs {
  gap: 8px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom-color: #cfd5da;
  box-shadow: 0 5px 16px rgba(23,27,32,.06);
}

.tab {
  position: relative;
  border-radius: 9px;
  color: #5c6670;
}

.tab.active {
  background: var(--blue-soft);
  color: var(--blue-dark);
  box-shadow: inset 0 -3px 0 var(--blue);
}

.tab.active .count-pill,
.count-pill {
  background: #e2e6e9;
  color: #3c4650;
}

.tab.active .count-pill {
  background: #f8d8d5;
  color: var(--blue-dark);
}

.section-heading h2 {
  letter-spacing: -.025em;
}

.eyebrow {
  color: var(--blue-dark);
}

.status-badge,
.order-status {
  border: 1px solid #f3c7c4;
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.panel {
  position: relative;
  overflow: hidden;
  border-color: #d5dade;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--blue), var(--gold));
  opacity: .75;
}

.panel-heading h3,
.panel-heading h4,
.employee-panel-heading h4 {
  color: #1a2026;
  letter-spacing: -.01em;
}

input,
textarea,
select {
  border-color: #bfc6cc;
  background: #fcfcfd;
  color: #171b20;
}

input:hover,
textarea:hover,
select:hover {
  border-color: #8e98a2;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(201, 42, 42, .13);
  background: #ffffff;
}

.primary-button {
  border-color: var(--blue-dark);
  background: linear-gradient(180deg, #d83a34, #b91f25);
  color: #fff;
  box-shadow: 0 6px 14px rgba(153, 27, 27, .18), inset 0 1px 0 rgba(255,255,255,.2);
}

.primary-button:hover {
  border-color: #7f1717;
  background: linear-gradient(180deg, #bd2627, #941b1b);
}

.secondary-button {
  border-color: #b9c1c8;
  background: linear-gradient(180deg, #ffffff, #f0f2f4);
  color: #303943;
}

.secondary-button:hover {
  border-color: #89939d;
  background: #e9ecef;
}

.choice-card {
  border-color: #c6cdd3;
  background: linear-gradient(180deg, #ffffff, #fafbfb);
}

.choice-card:hover {
  border-color: #929ca5;
}

.choice-card:has(input:checked) {
  border-color: var(--blue);
  background: linear-gradient(135deg, #fff7f6, #fff1f0);
  box-shadow: inset 4px 0 0 var(--blue);
}

.choice-card input,
.bypass-control input {
  accent-color: var(--blue);
}

.upload-zone {
  border-color: #aeb7bf;
  background:
    linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)),
    repeating-linear-gradient(135deg, #e9ecef 0 10px, #f7f8f9 10px 20px);
}

.upload-zone:hover {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.upload-icon {
  border: 1px solid #f0c46c;
  background: var(--amber-soft);
  color: #9a6200;
}

.photo-card,
.document-row,
.detail-document-row,
.order-card,
.detail-card {
  border-color: #d2d8dd;
}

.document-icon {
  border: 1px solid #f0c9c5;
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.document-link,
.order-number {
  color: var(--blue-dark);
}

.request-card {
  border-color: #c2c9cf;
  background: #eceff1;
  color: #67727c;
}

.request-card.ready {
  border-color: var(--blue);
  background: linear-gradient(135deg, #fff8f7, #fff0ef);
  color: var(--navy);
  box-shadow: inset 4px 0 0 var(--blue);
}

.request-card.ready .request-icon,
.request-card.ready .request-state {
  background: #f8d8d5;
  color: var(--blue-dark);
}

.request-card.requested {
  border-color: #2a8c5f;
  background: var(--green-soft);
  box-shadow: inset 4px 0 0 #2a8c5f;
}

.employee-panel,
.employee-detail-panel {
  border-color: #e1b24e;
  background: linear-gradient(135deg, #fff9e9, #fff4d4);
}

.employee-badge {
  background: var(--carbon);
  color: #ffd477;
}

.bypass-control {
  border-color: #e4c375;
}

.customer-scrub-section {
  border-color: #cbd1d6;
  background: linear-gradient(180deg, #f7f8f9, #eef0f2);
}

.scanner-dialog,
.order-dialog,
.employee-dialog {
  border: 1px solid #69737d;
  background: #fbfbfc;
  box-shadow: 0 28px 90px rgba(10,14,18,.45);
}

dialog::backdrop {
  background: rgba(10, 13, 17, .78);
  backdrop-filter: blur(3px);
}

.scanner-frame {
  border: 2px solid #3c4650;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

.scan-guide {
  border-color: #ffbd35;
  box-shadow: 0 0 0 999px rgba(0,0,0,.30), 0 0 22px rgba(255,189,53,.25);
}

.empty-state {
  border-color: #bdc5cc;
  background: rgba(255,255,255,.86);
}

@media (max-width: 600px) {
  .app-header::after { opacity: .55; }
  .panel::before { width: 3px; }
}


/* Mobile compatibility: Android, iPhone, and iPad */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

body {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-tap-highlight-color: rgba(190, 43, 32, .16);
}

.app-header {
  padding-top: max(18px, env(safe-area-inset-top));
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

.tabs {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

main {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: max(60px, calc(32px + env(safe-area-inset-bottom)));
}

button,
input,
textarea,
select,
.document-link {
  touch-action: manipulation;
}

button,
.primary-button,
.secondary-button,
.danger-button,
.icon-button,
.tab,
.document-link {
  min-height: 44px;
}

input,
textarea,
select {
  font-size: 16px;
}

input[type="checkbox"] {
  min-height: 22px;
}

.visually-hidden-file {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.install-dialog {
  width: min(520px, calc(100% - 24px));
}

.install-steps {
  display: grid;
  gap: 14px;
  margin: 18px 0;
  padding: 0;
  list-style: none;
}

.install-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.install-step-number {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-weight: 900;
}

.install-note {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #e4c375;
  border-radius: 12px;
  background: var(--amber-soft);
  color: var(--gray-700);
  font-size: .9rem;
}

.dialog-fallback-open {
  position: fixed;
  inset: 12px;
  z-index: 100;
  display: block;
  margin: auto;
  max-height: calc(100% - 24px);
  overflow: auto;
}

@supports (-webkit-touch-callout: none) {
  dialog {
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .scanner-frame {
    min-height: 240px;
  }

  .photo-card img {
    -webkit-user-drag: none;
  }
}

@media (display-mode: standalone) {
  .app-header {
    padding-top: max(18px, calc(env(safe-area-inset-top) + 8px));
  }
}

@media (max-width: 600px) {
  .dialog-actions > button {
    flex: 1 1 100%;
  }

  .scanner-dialog,
  .order-dialog,
  .employee-dialog,
  .install-dialog {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 18px;
  }
}

/* First-access login gate */
body.auth-locked {
  overflow: hidden;
}

body.auth-locked > :not(#authGate):not(#contactUsDialog) {
  display: none !important;
}

body:not(.auth-locked) > #authGate {
  display: none !important;
}

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  min-height: 100dvh;
  overflow-y: auto;
  display: grid;
  place-items: center;
  padding:
    max(24px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 80% 15%, rgba(240, 162, 2, .13), transparent 28%),
    radial-gradient(circle at 15% 85%, rgba(201, 42, 42, .14), transparent 32%),
    linear-gradient(145deg, #0c1014, #252c33 56%, #101419);
}

.auth-card {
  width: min(560px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  background: #fbfbfc;
  box-shadow: 0 28px 90px rgba(0,0,0,.45);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 24px;
  border-bottom: 3px solid var(--gold);
  background:
    linear-gradient(115deg, rgba(255,255,255,.035) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(135deg, #0f1317, #252c33);
  color: var(--white);
}

.auth-brand-mark {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 17px;
  background: linear-gradient(145deg, #303943, #161b20);
  color: #ffb21a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px rgba(0,0,0,.24);
}

.auth-brand-mark svg {
  width: 42px;
  height: 42px;
}

.auth-brand h1 {
  margin: 0;
  font-size: clamp(1.35rem, 5vw, 1.75rem);
  letter-spacing: -.02em;
}

.auth-brand .eyebrow {
  color: #ffd477;
}

.auth-brand p:not(.eyebrow) {
  margin: 5px 0 0;
  color: #d4d9de;
  font-size: .9rem;
  line-height: 1.45;
}

.auth-panel {
  display: grid;
  gap: 15px;
  padding: 24px 24px 12px;
}

.auth-panel-heading h2 {
  margin: 0;
  color: #1a2026;
  font-size: 1.2rem;
}

.auth-panel-heading p {
  margin: 5px 0 0;
  color: var(--gray-500);
  font-size: .88rem;
  line-height: 1.45;
}

.auth-submit {
  width: 100%;
  min-height: 52px;
  margin-top: 2px;
}

.auth-message {
  min-height: 22px;
  margin: 2px 24px 0;
  color: var(--gray-500);
  font-size: .86rem;
  font-weight: 700;
}

.auth-message.error {
  color: var(--red);
}

.auth-message.success {
  color: var(--green);
}

.auth-security-note {
  margin: 10px 24px 24px;
  padding: 12px 14px;
  border: 1px solid #e4c375;
  border-radius: 12px;
  background: var(--amber-soft);
  color: var(--gray-700);
  font-size: .8rem;
  line-height: 1.45;
}

@media (max-width: 600px) {
  .auth-gate {
    place-items: start center;
    padding-top: max(14px, env(safe-area-inset-top));
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }

  .auth-card {
    border-radius: 18px;
  }

  .auth-brand {
    align-items: flex-start;
    padding: 20px;
  }

  .auth-brand-mark {
    flex-basis: 50px;
    width: 50px;
    height: 50px;
    border-radius: 14px;
  }

  .auth-brand-mark svg {
    width: 36px;
    height: 36px;
  }

  .auth-panel {
    padding: 20px 18px 10px;
  }

  .auth-message {
    margin-left: 18px;
    margin-right: 18px;
  }

  .auth-security-note {
    margin: 10px 18px 20px;
  }
}

@media print {
  #authGate,
  #logoutButton {
    display: none !important;
  }
}

.auth-panel[hidden] {
  display: none !important;
}

/* Multi-customer account management */
.header-session {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.organization-context {
  min-width: 190px;
}

.organization-context > span {
  margin-bottom: 4px;
  color: #d7dde2;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.organization-context select {
  min-height: 40px;
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: 7px 34px 7px 10px;
}

.organization-context select option {
  color: #171b20;
  background: #fff;
}

.session-identity {
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: rgba(0,0,0,.14);
  text-align: right;
}

.session-identity strong,
.session-identity span {
  display: block;
}

.session-identity strong {
  overflow: hidden;
  max-width: 220px;
  color: #fff;
  font-size: .84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-identity span {
  margin-top: 2px;
  color: #cfd5db;
  font-size: .7rem;
}

.scope-name {
  margin: 5px 0 0;
  color: var(--gray-500);
  font-size: .9rem;
}

.account-actions {
  justify-content: flex-end;
  margin-top: 18px;
}

.accounts-list {
  display: grid;
  gap: 10px;
}

.account-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px solid #d2d8dd;
  border-radius: 13px;
  background: #fff;
}

.account-card.account-disabled {
  background: #f1f2f3;
  opacity: .7;
}

.account-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #efc3c0;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-weight: 900;
}

.account-copy {
  min-width: 0;
}

.account-copy strong,
.account-copy span,
.account-copy small {
  display: block;
  overflow-wrap: anywhere;
}

.account-copy strong {
  color: #1a2026;
}

.account-copy span {
  margin-top: 2px;
  color: var(--gray-700);
  font-size: .88rem;
}

.account-copy small {
  margin-top: 3px;
  color: var(--gray-500);
  font-size: .78rem;
}

.compact-empty {
  padding: 22px;
}

.alert.success {
  border-color: #86c9a7;
  background: var(--green-soft);
  color: var(--green);
}

@media (max-width: 860px) {
  .app-header {
    align-items: flex-start;
  }

  .header-session {
    max-width: 54%;
    flex-wrap: wrap;
  }

  .organization-context {
    flex: 1 1 100%;
    min-width: 0;
  }

  .session-identity {
    flex: 1 1 180px;
  }
}

@media (max-width: 600px) {
  .app-header {
    flex-direction: column;
    align-items: stretch;
  }

  .header-session {
    max-width: none;
    justify-content: stretch;
  }

  .session-identity {
    order: -1;
    flex: 1 1 100%;
    text-align: left;
  }

  .session-identity strong {
    max-width: none;
  }

  .header-actions {
    flex: 1 1 100%;
    flex-direction: row;
  }

  .header-actions .icon-button {
    flex: 1;
  }

  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tab {
    flex: 0 0 auto;
  }

  .account-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .account-card > .secondary-button,
  .account-card > .mini-badge {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
  }
}

/* Customer access requests */
.auth-secondary-actions {
  display: flex;
  justify-content: center;
  margin-top: -2px;
}

.auth-link-button {
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--blue-dark);
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.auth-link-button:hover {
  color: var(--red);
}

.access-requests-list {
  display: grid;
  gap: 12px;
}

.access-request-card {
  padding: 15px;
  border: 1px solid #d2d8dd;
  border-radius: 14px;
  background: #fff;
}

.access-request-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

.access-request-message {
  margin: 13px 0 0;
  padding: 11px 13px;
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  background: var(--amber-soft);
  color: var(--gray-700);
  font-size: .88rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.access-request-actions {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto auto;
  align-items: end;
  gap: 10px;
  margin-top: 14px;
}

.access-request-actions label span {
  display: block;
  margin-bottom: 6px;
  color: var(--gray-700);
  font-size: .78rem;
  font-weight: 800;
}

@media (max-width: 600px) {
  .access-request-actions {
    grid-template-columns: 1fr;
  }

  .access-request-actions button {
    width: 100%;
  }
}


/* Expanded business access request */
.auth-request-panel {
  width: min(760px, 100%);
}

.auth-fieldset {
  margin: 0;
  padding: 16px;
  border: 1px solid #cfd6dc;
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
}

.auth-fieldset legend {
  padding: 0 8px;
  color: var(--gray-900);
  font-weight: 900;
}

.auth-request-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.auth-request-grid .full-span {
  grid-column: 1 / -1;
}

.auth-request-panel small {
  color: var(--gray-500);
  font-size: .76rem;
  font-weight: 700;
}

.multi-location-toggle {
  padding: 13px 14px;
  border: 1px solid #cfd6dc;
  border-radius: 12px;
  background: #fff;
}

.additional-locations {
  display: grid;
  gap: 12px;
}

.additional-locations-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.additional-locations-heading h3,
.additional-locations-heading p {
  margin: 0;
}

.additional-locations-heading p {
  margin-top: 4px;
  color: var(--gray-600);
  font-size: .84rem;
  line-height: 1.45;
}

.access-location-list {
  display: grid;
  gap: 12px;
}

.access-location-card {
  padding: 14px;
  border: 1px solid #cfd6dc;
  border-radius: 14px;
  background: #fff;
}

.access-location-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.access-location-card-heading div {
  display: grid;
  gap: 2px;
}

.access-location-card-heading span {
  color: var(--gray-600);
  font-size: .8rem;
}

.location-remove-button {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #d7b9b9;
  border-radius: 10px;
  background: #fff7f7;
  color: var(--red);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.access-request-business-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid #d9dee3;
  border-radius: 12px;
  background: var(--gray-50);
}

.access-request-business-details > div {
  display: grid;
  gap: 3px;
}

.access-request-business-details .full-detail {
  grid-column: 1 / -1;
}

.detail-label {
  color: var(--gray-600);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.access-request-locations-summary {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid #d9dee3;
  border-radius: 12px;
  background: #fff;
}

.access-request-locations-summary ul {
  display: grid;
  gap: 9px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}

.access-request-locations-summary li {
  display: grid;
  gap: 2px;
  padding-top: 9px;
  border-top: 1px solid #e2e6e9;
}

.access-request-locations-summary li:first-child {
  padding-top: 0;
  border-top: 0;
}

.access-request-locations-summary li span,
.access-request-locations-summary li small {
  color: var(--gray-600);
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .auth-request-grid,
  .access-request-business-details {
    grid-template-columns: 1fr;
  }

  .auth-request-grid .full-span,
  .access-request-business-details .full-detail {
    grid-column: auto;
  }

  .additional-locations-heading,
  .access-location-card-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .additional-locations-heading button,
  .location-remove-button {
    width: 100%;
  }
}

.auth-gate.request-mode .auth-card { width: min(820px, 100%); }
.additional-locations[hidden] { display: none !important; }

/* Address-based administrator routing */
.readonly-role {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid #cfd6dc;
  border-radius: 12px;
  background: var(--gray-50);
}

.readonly-role > span {
  color: var(--gray-700);
  font-size: .78rem;
  font-weight: 800;
}

.readonly-role > strong {
  color: var(--gray-900);
}

.existing-admin-redirect {
  display: grid;
  gap: 13px;
  padding: 16px;
  border: 1px solid #e0b75d;
  border-radius: 14px;
  background: var(--amber-soft);
}

.existing-admin-redirect[hidden] {
  display: none;
}

.existing-admin-redirect h3,
.existing-admin-redirect p {
  margin: 0;
}

.existing-admin-redirect > div:first-child > p:last-child {
  margin-top: 5px;
  color: var(--gray-700);
  font-size: .88rem;
  line-height: 1.5;
}

.existing-admin-redirect-list {
  display: grid;
  gap: 10px;
}

.existing-admin-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  padding: 13px;
  border: 1px solid #dfc98f;
  border-radius: 12px;
  background: #fff;
}

.existing-admin-card > div {
  display: grid;
  gap: 3px;
}

.existing-admin-contact {
  grid-column: 1 / -1;
}

.existing-admin-contact a {
  width: fit-content;
  color: var(--blue-dark);
  font-weight: 800;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.approval-role-note {
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: 48px;
  padding: 9px 11px;
  border: 1px solid #d9dee3;
  border-radius: 11px;
  background: var(--gray-50);
}

.approval-role-note small {
  color: var(--gray-600);
}

@media (max-width: 600px) {
  .existing-admin-card {
    grid-template-columns: 1fr;
  }

  .existing-admin-contact {
    grid-column: auto;
  }
}

/* Administrator replacement and Midwest account management */
.admin-replacement-option {
  display: grid;
  gap: 10px;
  padding: 15px;
  border: 1px solid #d9a95a;
  border-radius: 14px;
  background: #fff8e8;
}
.admin-replacement-option[hidden] { display: none; }
.admin-replacement-option > p { margin: 0; color: var(--gray-700); font-size: .88rem; line-height: 1.5; }
.replacement-warning { display: grid; gap: 3px; padding: 11px 13px; border-left: 4px solid var(--red); border-radius: 9px; background: #fff; }
.replacement-warning strong { color: var(--red-dark); }
.replacement-warning span { color: var(--gray-700); font-size: .84rem; line-height: 1.45; }
.admin-replacement-request { border-color: #d7a64f; background: #fffdf7; }
.replacement-admin-summary { margin-top: 12px; padding: 12px; border: 1px solid #ead7aa; border-radius: 11px; background: #fff8e8; }
.account-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.edit-admin-dialog { width: min(760px, calc(100% - 24px)); max-height: min(88vh, 900px); overflow: auto; }
.edit-admin-dialog input { font-family: inherit; letter-spacing: normal; }
.edit-admin-locations-section { margin-top: 18px; }
.edit-admin-locations-list { display: grid; gap: 12px; }
.admin-edit-location-card { display: grid; gap: 13px; padding: 14px; border: 1px solid #d2d8dd; border-radius: 13px; background: var(--gray-50); }
.admin-edit-location-heading { display: grid; gap: 2px; }
.admin-edit-location-heading span, .empty-admin-locations { color: var(--gray-600); font-size: .85rem; }
.empty-admin-locations { margin: 0; padding: 14px; border: 1px dashed #c4cbd1; border-radius: 12px; background: var(--gray-50); }
@media (max-width: 600px) {
  .account-card-actions { grid-column: 1 / -1; justify-content: stretch; }
  .account-card-actions > * { flex: 1 1 140px; text-align: center; }
  .edit-admin-dialog { width: calc(100% - 16px); }
}

/* Midwest Speedometer staff photo workflow */
.midwest-photo-panel {
  border-color: color-mix(in srgb, var(--accent, #a81f24) 32%, var(--gray-200));
}

.midwest-photo-panel .eyebrow {
  margin: 0 0 4px;
}

.midwest-photo-upload,
.midwest-detail-upload {
  background: linear-gradient(180deg, rgba(168, 31, 36, 0.055), rgba(168, 31, 36, 0.015));
}

.detail-photo-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: var(--white);
}

.detail-photo-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  background: var(--gray-100);
}

.detail-photo-card figcaption {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 9px;
}

.detail-photo-card figcaption span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.detail-photo-card figcaption strong,
.detail-photo-card figcaption small {
  overflow-wrap: anywhere;
}

.detail-photo-card figcaption small {
  color: var(--gray-600);
  font-size: 0.75rem;
}

.detail-photo-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
}

.photo-action-link,
.remove-detail-midwest-photo {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--blue-dark);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.photo-action-link:hover,
.photo-action-link:focus-visible {
  background: var(--blue-soft);
}

.remove-detail-midwest-photo {
  color: var(--danger, #a32128);
}

.remove-detail-midwest-photo:hover,
.remove-detail-midwest-photo:focus-visible {
  background: rgba(163, 33, 40, 0.08);
}

.midwest-photo-detail .detail-helper {
  margin-bottom: 12px;
}

.midwest-photo-detail .upload-zone {
  margin-bottom: 12px;
}

@media (max-width: 520px) {
  .detail-photo-card figcaption {
    align-items: stretch;
    flex-direction: column;
  }

  .detail-photo-actions {
    justify-content: flex-start;
  }
}


/* Calibration request completed-repair checklist */
.calibration-repair-dialog {
  width: min(820px, calc(100% - 24px));
  max-height: min(92vh, 980px);
  overflow: auto;
}

.calibration-repair-dialog input,
.calibration-repair-dialog textarea {
  font-family: inherit;
  letter-spacing: normal;
}

.calibration-guidance {
  display: grid;
  gap: 5px;
  margin: 0 0 16px;
  padding: 13px 14px;
  border: 1px solid #d5aa4c;
  border-radius: 13px;
  background: #fff8e6;
  color: #47340d;
}

.calibration-guidance span {
  color: #68551f;
  font-size: .9rem;
  line-height: 1.45;
}

.calibration-repair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.calibration-repair-option {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 100%;
  padding: 13px;
  border: 1px solid var(--gray-300);
  border-radius: 13px;
  background: #fff;
  cursor: pointer;
}

.calibration-repair-option:hover {
  border-color: #aa2a21;
  background: #fff8f7;
}

.calibration-repair-option:has(input:checked) {
  border-color: #a9271f;
  background: #fff0ee;
  box-shadow: inset 3px 0 0 #a9271f;
}

.calibration-repair-option input {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin: 2px 0 0;
  accent-color: #aa2a21;
}

.calibration-repair-option span {
  display: grid;
  gap: 3px;
}

.calibration-repair-option strong {
  line-height: 1.28;
}

.calibration-repair-option small {
  color: var(--gray-500);
  line-height: 1.38;
}

.calibration-other-wrap {
  margin-top: 14px;
}

.calibration-summary-list {
  display: grid;
  gap: 7px;
  margin: 9px 0 0;
  padding-left: 20px;
}

.calibration-summary-list li {
  padding-left: 2px;
  line-height: 1.45;
}

.calibration-request-detail {
  border-color: #d5aa4c;
  background: #fffaf0;
}

@media (max-width: 700px) {
  .calibration-repair-grid { grid-template-columns: 1fr; }
  .calibration-repair-dialog { width: calc(100% - 16px); padding: 17px; }
}

/* Employee-only Revv ADAS workspace */
.revv-view .section-heading {
  align-items: flex-start;
}

.revv-connection-badge {
  background: var(--amber-soft);
  color: #825400;
  border: 1px solid #e7bd61;
}

.revv-connection-panel::before {
  background: linear-gradient(180deg, var(--gold), var(--blue));
}

.revv-connection-grid,
.revv-vehicle-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.revv-connection-item,
.revv-summary-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 15px;
  border: 1px solid #d2d8dd;
  border-radius: 13px;
  background: linear-gradient(180deg, #ffffff, #f6f7f8);
}

.revv-connection-item span,
.revv-summary-card span {
  color: var(--gray-500);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.revv-connection-item strong,
.revv-summary-card strong {
  overflow-wrap: anywhere;
  color: #1a2026;
}

.revv-connection-item small {
  color: var(--gray-500);
  line-height: 1.4;
}

.revv-vehicle-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
}

.revv-summary-card:first-child {
  border-color: #e3bd68;
  background: linear-gradient(180deg, #fffdf7, #fff7df);
}

.revv-summary-card:first-child strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .04em;
}

.revv-handoff-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.revv-portal-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.revv-security-note {
  display: grid;
  gap: 4px;
  margin-top: 15px;
  padding: 13px 14px;
  border: 1px solid #e2b85a;
  border-radius: 12px;
  background: var(--amber-soft);
  color: #5e420c;
}

.revv-security-note span {
  font-size: .88rem;
  line-height: 1.45;
}

.revv-attachment-section {
  margin-top: 20px;
}

.revv-document-row .document-actions {
  flex-wrap: wrap;
}

.remove-revv-document {
  min-height: 36px;
  border: 1px solid #efb4b0;
  border-radius: 9px;
  background: #fff1f0;
  color: #991b1b;
  padding: 7px 10px;
  font-weight: 800;
}

.date-input-shell {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 1px solid #bfc6cc;
  border-radius: 12px;
  background: #fcfcfd;
  padding: 10px 12px;
}

.date-input-shell:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(201, 42, 42, .13);
  background: #fff;
}

.date-input-shell input[type="date"] {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

@media (max-width: 850px) {
  .revv-vehicle-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .revv-connection-grid,
  .revv-vehicle-summary {
    grid-template-columns: 1fr;
  }

  .revv-handoff-actions > * {
    width: 100%;
  }
}


/* Manual account creation, RO references, Midwest documents, and customer-savable notes */
.auth-manual-account-note {
  margin: 0.9rem 0 0;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  color: var(--gray-500);
  font-size: 0.92rem;
}
.work-order-reference-panel {
  border-left: 4px solid var(--accent);
}
.midwest-document-panel .document-list,
.midwest-document-detail .detail-document-list {
  margin-top: 1rem;
}
.customer-note-panel textarea,
.customer-note-detail textarea {
  width: 100%;
}
.detail-note-text {
  white-space: normal;
  line-height: 1.55;
}
.detail-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.85rem;
}
@media print {
  .detail-inline-actions,
  .midwest-detail-upload,
  .midwest-document-detail .upload-zone {
    display: none !important;
  }
}

/* All-in-one work-order summary PDF */
.summary-pdf-status {
  min-height: 1.25rem;
  margin: 0.75rem 0 0;
}

#downloadSummaryPdfButton[disabled] {
  cursor: not-allowed;
  opacity: 0.62;
}

#downloadSummaryPdfButton.is-building {
  cursor: progress;
  opacity: 0.72;
}

@media print {
  #downloadSummaryPdfButton,
  .summary-pdf-status {
    display: none !important;
  }
}


/* Android Chrome and installed-PWA refinements */
@media (display-mode: standalone) {
  .app-header {
    user-select: none;
  }

  body {
    min-height: 100dvh;
  }
}

@media (max-width: 720px) {
  .header-session,
  .header-actions {
    width: 100%;
  }

  .header-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .header-actions .icon-button {
    width: 100%;
  }
}

@supports (padding: max(0px)) {
  .employee-dialog,
  .order-dialog,
  .scanner-dialog {
    max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)));
  }
}
/* Navy, Grey & White Theme */
:root {
  --navy: #0b1f3a;
  --navy-2: #16324f;
  --blue: #1e4e79;
  --blue-dark: #0b2f55;
  --blue-soft: #eaf2f8;
  --gold: #94a3b8;
  --red: #b42318;
  --red-soft: #fff4f2;
  --green: #18794e;
  --green-soft: #edf9f2;
  --gray-50: #f7f9fb;
  --gray-100: #edf1f5;
  --gray-200: #dce3ea;
  --gray-300: #bdc8d3;
  --gray-500: #687787;
  --gray-600: #506070;
  --gray-700: #344454;
  --white: #ffffff;
  --carbon: #08182c;
  --steel: #718096;
  --amber-soft: #edf3f8;
  --accent: #1e4e79;
  --line: #d6dee7;
  --muted: #687787;
  --shadow: 0 14px 34px rgba(11, 31, 58, 0.10);
}

html { background: #edf1f5; }

body {
  background-color: #f7f9fb;
  background-image:
    linear-gradient(rgba(11, 31, 58, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 31, 58, 0.022) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--navy);
  -webkit-tap-highlight-color: rgba(30, 78, 121, 0.16);
}

.app-header {
  background:
    linear-gradient(115deg, rgba(255,255,255,.04) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(135deg, #08182c 0%, #0b1f3a 56%, #16324f 100%);
  border-bottom-color: #aeb9c5;
  box-shadow: 0 10px 26px rgba(8, 24, 44, .24);
}

.app-header::after {
  border-color: rgba(255,255,255,.07);
  box-shadow: 0 0 0 28px rgba(255,255,255,.035), 0 0 0 56px rgba(255,255,255,.024);
}

.brand-mark,
.auth-brand-mark {
  border-color: rgba(255,255,255,.24);
  background: linear-gradient(145deg, #244767, #0b1f3a);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 18px rgba(3,12,24,.28);
}

.brand p,
.session-identity span,
.auth-brand p:not(.eyebrow) { color: #d5dee7; }

.icon-button {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.07);
}

.icon-button:hover {
  border-color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.14);
}

.tabs {
  border-bottom-color: #c8d2dc;
  box-shadow: 0 5px 16px rgba(11,31,58,.07);
}

.tab { color: #617182; }
.tab.active {
  background: #eaf2f8;
  color: #0b2f55;
  box-shadow: inset 0 -3px 0 #1e4e79;
}
.count-pill,
.tab.active .count-pill { background: #dfe7ee; color: #344454; }
.tab.active .count-pill { background: #d5e4f0; color: #0b2f55; }

.eyebrow,
.document-link,
.order-number,
.auth-link-button { color: #0b2f55; }
.auth-link-button:hover { color: #1e4e79; }

.status-badge,
.order-status,
.mini-badge {
  border-color: #b8cad9;
  background: #eaf2f8;
  color: #0b2f55;
}

.panel,
.order-card,
.detail-card,
.photo-card,
.document-row,
.detail-document-row,
.account-card,
.access-request-card,
.revv-connection-item,
.revv-summary-card {
  border-color: #d6dee7;
  background-color: #ffffff;
  box-shadow: var(--shadow);
}

.panel::before,
.work-order-reference-panel {
  background: linear-gradient(180deg, #0b2f55, #8a9aaa);
  border-left-color: #1e4e79;
}

.panel-heading h3,
.panel-heading h4,
.employee-panel-heading h4,
.account-copy strong,
.revv-connection-item strong,
.revv-summary-card strong,
.auth-panel-heading h2 { color: #0b1f3a; }

input,
textarea,
select,
.date-input-shell {
  border-color: #b9c5d0;
  background: #ffffff;
  color: #0b1f3a;
}

input:hover,
textarea:hover,
select:hover { border-color: #8393a3; }

input:focus,
textarea:focus,
select:focus,
.date-input-shell:focus-within {
  border-color: #1e4e79;
  box-shadow: 0 0 0 4px rgba(30, 78, 121, .14);
  background: #ffffff;
}

.primary-button {
  border-color: #082b4d;
  background: linear-gradient(180deg, #245b88, #0b2f55);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(11,47,85,.22), inset 0 1px 0 rgba(255,255,255,.20);
}

.primary-button:hover {
  border-color: #061f38;
  background: linear-gradient(180deg, #1d4c75, #082b4d);
}

.secondary-button {
  border-color: #b9c5d0;
  background: linear-gradient(180deg, #ffffff, #edf1f5);
  color: #344454;
}
.secondary-button:hover { border-color: #8595a5; background: #e4eaf0; }

.choice-card {
  border-color: #c6d0da;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}
.choice-card:hover { border-color: #8797a6; }
.choice-card:has(input:checked) {
  border-color: #1e4e79;
  background: linear-gradient(135deg, #f5f9fc, #eaf2f8);
  box-shadow: inset 4px 0 0 #1e4e79;
}
.choice-card input,
.bypass-control input { accent-color: #1e4e79; }

.upload-zone {
  border-color: #aebac6;
  background:
    linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)),
    repeating-linear-gradient(135deg, #e5ebf1 0 10px, #f6f8fa 10px 20px);
}
.upload-zone:hover { border-color: #1e4e79; background: #eaf2f8; }
.upload-icon,
.document-icon,
.account-avatar {
  border-color: #bacbd9;
  background: #eaf2f8;
  color: #0b2f55;
}

.request-card { border-color: #c5cfd9; background: #e9eef3; color: #607080; }
.request-card.ready {
  border-color: #1e4e79;
  background: linear-gradient(135deg, #f6f9fc, #eaf2f8);
  color: #0b1f3a;
  box-shadow: inset 4px 0 0 #1e4e79;
}
.request-card.ready .request-icon,
.request-card.ready .request-state { background: #d5e4f0; color: #0b2f55; }

.employee-panel,
.employee-detail-panel,
.revv-security-note,
.install-note,
.auth-security-note,
.access-request-message,
.calibration-request-detail {
  border-color: #b8c7d5;
  background: linear-gradient(135deg, #f4f7fa, #e8eef4);
  color: #344454;
}

.employee-badge,
.revv-connection-badge {
  border: 1px solid #8fa4b7;
  background: #0b1f3a;
  color: #ffffff;
}

.bypass-control { border-color: #aebdca; }
.customer-scrub-section { border-color: #cbd5df; background: linear-gradient(180deg, #f8fafc, #edf1f5); }

.scanner-dialog,
.order-dialog,
.employee-dialog,
.install-dialog {
  border-color: #627487;
  background: #ffffff;
  box-shadow: 0 28px 90px rgba(8,24,44,.42);
}

dialog::backdrop { background: rgba(4, 15, 29, .78); }
.scanner-frame { border-color: #344d65; }
.scan-guide {
  border-color: #dce6ef;
  box-shadow: 0 0 0 999px rgba(0,0,0,.32), 0 0 22px rgba(220,230,239,.28);
}

.auth-gate {
  background:
    radial-gradient(circle at 80% 15%, rgba(148, 163, 184, .18), transparent 30%),
    radial-gradient(circle at 15% 85%, rgba(30, 78, 121, .22), transparent 34%),
    linear-gradient(145deg, #061426, #0b1f3a 56%, #16324f);
}

.auth-card {
  border-color: rgba(255,255,255,.18);
  background: #ffffff;
  box-shadow: 0 28px 90px rgba(2,12,24,.46);
}

.auth-brand {
  border-bottom-color: #9aa9b7;
  background:
    linear-gradient(115deg, rgba(255,255,255,.04) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(135deg, #08182c, #16324f);
}
.auth-brand .eyebrow { color: #dce6ef; }
.auth-manual-account-note { background: #edf2f6; color: #5d6d7d; }

.organization-context > span { color: #d7e0e8; }
.organization-context select {
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.10);
  color: #ffffff;
}
.organization-context select option { color: #0b1f3a; background: #ffffff; }
.session-identity { border-color: rgba(255,255,255,.18); background: rgba(2,12,24,.18); }

.revv-connection-panel::before { background: linear-gradient(180deg, #0b2f55, #8a9aaa); }
.revv-connection-badge { background: #eaf2f8; color: #0b2f55; }
.revv-summary-card:first-child {
  border-color: #b7c8d7;
  background: linear-gradient(180deg, #ffffff, #eaf2f8);
}
.revv-security-note { background: #eef3f7; color: #344454; }

.calibration-summary-list,
.calibration-repair-grid { accent-color: #1e4e79; }

.install-step-number { background: #0b2f55; color: #ffffff; }
.empty-state { border-color: #bdc8d3; background: rgba(255,255,255,.9); }

/* Retain clear semantic colors for destructive actions and success states. */
.danger-button,
.remove-photo,
.remove-revv-document { color: #a51f1f; }
.alert.success,
.request-card.requested,
.customer-document-status.available { color: var(--green); }


/* Calibration appointment scheduling */
.calibration-appointment-detail {
  border-color: var(--navy-200, #b8c8dc);
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
}

.appointment-summary {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--gray-200);
  border-left: 5px solid var(--navy-700, #173a63);
  border-radius: 14px;
  background: #ffffff;
}

.appointment-summary.cancelled {
  border-left-color: #6b7280;
  background: #f3f4f6;
}

.appointment-status-row,
.appointment-date-time,
.appointment-location,
.appointment-notes {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.appointment-date-time,
.appointment-location,
.appointment-notes {
  flex-direction: column;
  gap: 3px;
}

.appointment-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 800;
  color: #ffffff;
  background: var(--navy-700, #173a63);
}

.appointment-status.cancelled {
  background: #6b7280;
}

.appointment-editor {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
}

.appointment-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.appointment-form-grid label {
  display: grid;
  gap: 6px;
}

.appointment-location-field {
  grid-column: 1 / -1;
}

.appointment-editor input,
.appointment-editor textarea {
  width: 100%;
}

.appointment-badge {
  background: var(--navy-700, #173a63);
  color: #ffffff;
}

.appointment-badge.cancelled {
  background: #6b7280;
}

@media (max-width: 720px) {
  .appointment-form-grid {
    grid-template-columns: 1fr;
  }

  .appointment-location-field {
    grid-column: auto;
  }

  .appointment-status-row {
    flex-direction: column;
    gap: 6px;
  }
}


/* Owner contact button and dialog */
.auth-contact-button {
  width: 100%;
  margin-top: 12px;
}

.contact-us-dialog {
  width: min(560px, calc(100% - 24px));
}

.contact-owner-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin-top: 14px;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  background: var(--gray-100);
}

.contact-owner-card > div:last-child {
  display: grid;
  gap: 3px;
}

.contact-owner-card span {
  color: var(--gray-500);
  font-size: .9rem;
}

.contact-owner-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  background: var(--navy-900, #0b1f3a);
  color: #fff;
  font-weight: 800;
  letter-spacing: .04em;
}

.contact-link-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.contact-link {
  display: grid;
  gap: 4px;
  min-height: 118px;
  padding: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  background: #fff;
  color: var(--navy);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-link:hover,
.contact-link:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(21, 58, 104, .14);
}

.contact-link-label {
  color: var(--gray-500);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.contact-link small {
  color: var(--blue);
  font-weight: 700;
}

.contact-link.is-disabled {
  cursor: not-allowed;
  opacity: .58;
}

.owner-contact-settings input[readonly] {
  background: var(--gray-100);
  color: var(--gray-500);
}

@media (max-width: 560px) {
  .contact-link-list {
    grid-template-columns: 1fr;
  }
}


/* Mobile-service appointment requirements and universal password changes */
.appointment-requirements,.appointment-requirements-editor{padding:12px 14px;border:1px solid var(--navy-200,#b8c8dc);border-radius:12px;background:var(--navy-50,#eef4fb);color:var(--gray-800,#1f2937)}
.appointment-requirements-editor{display:grid;gap:4px}.appointment-requirements span,.appointment-requirements-editor span{line-height:1.5}.change-password-dialog{width:min(92vw,560px)}
@media(max-width:600px){.header-actions{flex-wrap:wrap}.header-actions .icon-button{flex:1 1 calc(50% - 8px)}}

/* Shop signature, password recovery, Google Calendar, and voided records */
.auth-forgot-button {
  align-self: center;
  margin-top: -0.25rem;
}

.shop-signature-panel {
  border-color: #aebccc;
}

.signature-canvas-wrap {
  margin-top: 0.5rem;
  border: 2px solid #8fa1b5;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

#shopSignatureCanvas {
  display: block;
  width: 100%;
  height: 180px;
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}

.signature-mobile,
.signature-desktop {
  margin-top: 0.75rem;
}

.saved-signature {
  display: grid;
  gap: 0.6rem;
}

.saved-signature img {
  width: min(100%, 520px);
  min-height: 120px;
  max-height: 220px;
  object-fit: contain;
  object-position: left center;
  padding: 0.75rem;
  border: 1px solid #bdc8d5;
  border-radius: 10px;
  background: #fff;
}

.saved-signature span,
.appointment-calendar-status span,
.appointment-calendar-status small,
.calendar-connection-card span {
  display: block;
  color: var(--muted-text);
  font-size: 0.9rem;
}

.typed-signature-display {
  display: inline-block;
  min-width: 260px;
  padding: 0.7rem 0.25rem 0.35rem;
  border-bottom: 2px solid #536b84;
  font-family: "Segoe Script", "Bradley Hand", cursive;
  font-size: 1.55rem;
  color: #0b1f3a;
}

.google-calendar-settings .status-badge.success {
  background: #e7eef7;
  color: #123a63;
  border-color: #8fa8c2;
}

.calendar-connection-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--soft-panel);
}

.calendar-connection-card > div:first-child {
  min-width: 0;
}

.appointment-calendar-status {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}

.appointment-calendar-status a {
  width: fit-content;
  color: var(--accent-color);
  font-weight: 700;
}

.order-card.voided {
  opacity: 0.78;
  border-style: dashed;
}

.voided-badge {
  background: #e5e7eb;
  border-color: #7b8794;
  color: #2f3b48;
  font-weight: 800;
}

.forgot-password-dialog {
  max-width: 520px;
}

@media (max-width: 640px) {
  .calendar-connection-card {
    align-items: stretch;
    flex-direction: column;
  }

  #shopSignatureCanvas {
    height: 190px;
  }
}

/* Cloud D1/R2 status and migration */
.cloud-migration-box{margin-top:16px;padding:16px;border:1px solid var(--line-color,#d8dde6);border-radius:12px;background:rgba(18,58,99,.06)}
.cloud-migration-box p{margin:8px 0 12px;line-height:1.5}
.cloud-storage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}
.cloud-storage-grid>div{border:1px solid var(--line-color,#d8dde6);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:5px}
.cloud-storage-grid span{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.cloud-storage-grid strong{overflow-wrap:anywhere}
@media(max-width:700px){.cloud-storage-grid{grid-template-columns:1fr}}


/* Safari camera, flashlight, and Shop signature upload gate */
.shop-signature-panel.is-locked {
  border-color: var(--gray-300);
  background: var(--gray-100);
  color: var(--gray-500);
}

.shop-signature-panel.is-locked .panel-heading h3,
.shop-signature-panel.is-locked label,
.shop-signature-panel.is-locked span {
  color: var(--gray-500);
}

.shop-signature-panel.is-locked .signature-canvas-wrap,
.shop-signature-panel.is-locked #shopSignatureCanvas,
.shop-signature-panel.is-locked #shopTypedSignature {
  border-color: var(--gray-300);
  background: #e5e9ed;
  color: var(--gray-500);
  cursor: not-allowed;
}

.signature-locked-notice,
.signature-waiting.is-locked {
  margin: 0.75rem 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  background: #e5e9ed;
  color: var(--gray-600);
  font-weight: 700;
}

.detail-signature-capture {
  display: grid;
  gap: 0.8rem;
}

#detailShopSignatureCanvas {
  display: block;
  width: 100%;
  height: 180px;
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}

#toggleVinTorchButton[aria-pressed="true"] {
  border-color: #d79a16;
  background: #fff4cc;
  color: #664400;
}


/* Accounts-only tab and Owner/Admin Connection / Status tab */
.account-profile-panel input[readonly],
.account-profile-panel input:disabled,
.owner-contact-settings input:disabled {
  background: var(--gray-100);
  color: var(--gray-500);
}

.account-card {
  grid-template-columns: auto minmax(0, 1fr) minmax(220px, auto);
}

.edit-account-contact-dialog {
  width: min(92vw, 620px);
}

#connection-status .panel {
  margin-bottom: 16px;
}

#connection-status .cloud-storage-panel .account-actions {
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .account-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .account-card-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }
  .account-card-actions > * {
    flex: 1 1 170px;
  }
}


/* Work-order layout: RO number now sits below Vehicle Information. */
.vehicle-ro-row {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

@media (max-width: 700px) {
  .vehicle-ro-row {
    grid-template-columns: 1fr;
  }
}


/* ADAS repair-selection availability */
.repair-selection-message {
  margin: 16px 0 0;
  padding: 13px 15px;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  background: var(--gray-100);
  color: var(--gray-700);
  font-weight: 700;
  line-height: 1.45;
}

.repair-selection-message.error {
  border-color: #d89a9a;
  background: #fff2f2;
  color: #9f1d1d;
}

.repair-selection-message.info {
  border-color: #9fb5c8;
  background: #edf5fb;
  color: #173d61;
}

.combined-repair-notes {
  padding: 14px;
  border: 1px solid #9fb5c8;
  border-radius: 10px;
  background: #f4f8fb;
}

.repair-notes-help {
  margin: 0 0 10px;
  color: var(--gray-600);
  font-size: 0.86rem;
  line-height: 1.45;
}


/* Guides popup */
.guides-dialog {
  width: min(820px, calc(100% - 24px));
}

.guide-card-grid {
  display: grid;
  gap: 14px;
}

.guide-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--gray-300);
  border-radius: 14px;
  background: var(--white);
}

.guide-card[hidden] {
  display: none;
}

.guide-card-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--navy);
  color: var(--white);
  font-size: 1.15rem;
  font-weight: 900;
}

.guide-card-copy h3 {
  margin: 0 0 5px;
  color: var(--navy);
}

.guide-card-copy p {
  margin: 0;
  color: var(--gray-500);
  line-height: 1.45;
}

.guide-open-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  text-decoration: none;
  white-space: nowrap;
}

.guide-access-message {
  margin-top: 14px;
}

@media (max-width: 720px) {
  .guide-card {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .guide-card-icon {
    width: 46px;
    height: 46px;
  }

  .guide-open-link {
    grid-column: 1 / -1;
    width: 100%;
  }
}


/* Stable inline Forgot Password recovery */
.auth-inline-recovery {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--gray-300);
  border-radius: 14px;
  background: var(--gray-100);
}

.auth-inline-recovery[hidden] {
  display: none;
}

.auth-inline-recovery-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.auth-inline-recovery-heading h3 {
  margin: 2px 0 4px;
  color: var(--navy);
}

.auth-inline-recovery-heading p:not(.eyebrow) {
  margin: 0;
  color: var(--gray-500);
  line-height: 1.45;
}

.auth-inline-recovery-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Universal account creation */
.account-creation-grid {
  align-items: start;
}

.account-business-details {
  padding: 15px;
  border: 1px solid var(--gray-300);
  border-radius: 14px;
  background: var(--gray-100);
}

.account-business-details-heading {
  margin-bottom: 12px;
}

.account-business-details-heading h4 {
  margin: 0 0 4px;
  color: var(--navy);
}

.account-business-details-heading p {
  margin: 0;
  color: var(--gray-500);
}

.readonly-field {
  background: var(--gray-200) !important;
  color: var(--gray-700);
  cursor: default;
}

.account-creation-grid label small {
  display: block;
  margin-top: 5px;
  color: var(--gray-500);
  line-height: 1.35;
}

@media (max-width: 560px) {
  .auth-inline-recovery-actions {
    flex-direction: column-reverse;
  }

  .auth-inline-recovery-actions button {
    width: 100%;
  }
}


/* Account form display correction — 20260726-account-form-display-fix-v1 */
.account-creation-grid > .full-span,
.account-creation-grid > .account-business-details-wide {
  grid-column: 1 / -1 !important;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.account-business-details-wide > .form-grid {
  width: 100%;
  min-width: 0;
}

.account-creation-grid > label,
.account-business-details-wide label {
  min-width: 0;
}

.account-creation-grid select,
.account-creation-grid input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 820px) {
  .account-business-details-wide > .two-column {
    grid-template-columns: 1fr;
  }
}


/* Direct Calibration scheduling email focus */
.calibration-appointment-detail.email-focus-highlight {
  outline: 4px solid rgba(18, 58, 99, 0.24);
  outline-offset: 4px;
  animation: appointmentEmailFocus 1.1s ease-in-out 2;
}

@keyframes appointmentEmailFocus {
  0%, 100% { box-shadow: 0 0 0 rgba(18, 58, 99, 0); }
  50% { box-shadow: 0 0 0 8px rgba(18, 58, 99, 0.12); }
}


/* Shop progressive work-order workflow — 20260726-step-workflow-complete-job-v1 */
.shop-step[hidden],
.shop-step-actions[hidden] {
  display: none !important;
}

.shop-step {
  animation: shopStepReveal 180ms ease-out;
}

@keyframes shopStepReveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.shop-scrub-combined-section {
  display: grid;
  gap: 16px;
}

.single-request-card-wrap .request-card {
  width: 100%;
}

.scrub-download-inside-request {
  margin-top: 4px;
  padding: 15px;
  border: 1px solid var(--gray-300);
  border-radius: 12px;
  background: var(--gray-100);
}

.request-calibration-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 2px solid var(--gray-300);
}

.midwest-repair-notes {
  border-color: #9fb5c8;
  background: #eef4f9;
}

.signature-completion-bypass {
  margin-top: 14px;
}

.shop-signature-detail .detail-signature-capture {
  margin-top: 14px;
}

.single-detail-request {
  grid-template-columns: 1fr;
  margin: 12px 0 16px;
}

.legacy-new-order-signature {
  display: none !important;
}


/* All Accounts searchable subtab — 20260726-all-accounts-search-v1 */
.accounts-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 6px;
  border: 1px solid var(--gray-300);
  border-radius: 14px;
  background: var(--gray-100);
}

.accounts-subtabs[hidden],
.account-subtab-pane[hidden] {
  display: none !important;
}

.accounts-subtab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.accounts-subtab:hover {
  background: var(--white);
  border-color: var(--gray-300);
}

.accounts-subtab.active {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 5px 14px rgba(11, 31, 58, 0.16);
}

.accounts-subtab-count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.78rem;
  line-height: 1;
}

.accounts-subtab:not(.active) .accounts-subtab-count {
  background: var(--gray-200);
}

.all-accounts-pane {
  display: grid;
  gap: 16px;
}

.all-accounts-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.all-accounts-search-label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.all-accounts-search-label > span {
  font-weight: 800;
  color: var(--navy);
}

.all-accounts-search-label input {
  width: 100%;
  box-sizing: border-box;
}

.all-account-card {
  align-items: start;
}

.all-account-copy {
  display: grid;
  gap: 3px;
}

.all-account-primary-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
}

.all-account-primary-line > strong {
  margin-right: 3px;
}

.all-account-copy small {
  color: var(--gray-600);
  line-height: 1.4;
}

.all-account-copy small strong {
  display: inline;
  color: var(--gray-700);
}

.all-account-primary-line .status-active {
  background: #e8f6ee;
  color: #17653a;
}

.all-account-primary-line .status-disabled {
  background: #f5e8e8;
  color: #8f2424;
}

@media (max-width: 700px) {
  .accounts-subtabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .accounts-subtab {
    width: 100%;
  }

  .all-accounts-search-row {
    grid-template-columns: 1fr;
  }

  .all-accounts-search-row button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .accounts-subtabs {
    grid-template-columns: 1fr;
  }
}


/* Scrub-request email and saved-work-order focus — 20260726-scrub-request-email-save-v1 */
.shop-scrub-workflow-detail.email-focus-highlight {
  outline: 4px solid rgba(18, 58, 99, 0.24);
  outline-offset: 4px;
  animation: scrubEmailFocus 1.1s ease-in-out 2;
}

@keyframes scrubEmailFocus {
  0%, 100% { box-shadow: 0 0 0 rgba(18, 58, 99, 0); }
  50% { box-shadow: 0 0 0 8px rgba(18, 58, 99, 0.12); }
}

.scrub-email-status-helper {
  margin: 12px 0;
}


/* Manual saved-work-order updates — 20260726-manual-work-order-update-v1 */
.manual-work-order-editor {
  display: grid;
  gap: 18px;
  border: 2px solid var(--navy);
  background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
}

.manual-editor-section {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-300);
}

.manual-editor-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.manual-editor-section h4 {
  margin: 0;
  color: var(--navy);
}

.manual-editor-grid > label,
.manual-editor-textarea {
  min-width: 0;
}

.manual-editor-grid input,
.manual-editor-grid select,
.manual-editor-grid textarea,
.manual-editor-textarea textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.manual-editor-textarea {
  display: grid;
  gap: 7px;
}

.manual-repair-options {
  margin-bottom: 0;
}

.manual-editor-footer {
  padding: 14px;
  border-radius: 10px;
  background: var(--gray-100);
}

.manual-work-order-save-status {
  margin: 10px 0 0;
}

#saveWorkOrderButton:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .manual-editor-grid {
    grid-template-columns: 1fr;
  }

  .manual-editor-grid .full-span {
    grid-column: auto;
  }
}


/* Auto-saving work-order status dropdown — 20260726-status-dropdown-autosave-v1 */
.work-order-status-detail {
  align-content: start;
}

.detail-status-update-label {
  display: grid;
  gap: 7px;
  margin-top: 5px;
}

.detail-status-update-label > span {
  font-weight: 800;
  color: var(--navy);
}

.detail-status-update-label select {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  font-weight: 800;
}

.detail-status-update-label select[aria-busy="true"] {
  cursor: wait;
  opacity: 0.72;
}

.detail-status-update-message {
  margin: 8px 0 0;
}

.order-status select[aria-busy="true"] {
  cursor: wait;
  opacity: 0.72;
}


/* In-app document viewer with Back buttons — 20260726-document-viewer-back-buttons-v1 */
body.document-viewer-open {
  overflow: hidden;
}

.document-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  background: #eef2f7;
}

.document-viewer-overlay[hidden] {
  display: none !important;
}

.document-viewer-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gray-300);
  background: var(--white);
  box-shadow: 0 3px 14px rgba(11, 31, 58, 0.1);
}

.document-viewer-title-wrap {
  min-width: 0;
}

.document-viewer-title-wrap .eyebrow {
  margin: 0 0 2px;
}

.document-viewer-title-wrap h2 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-viewer-type {
  margin: 3px 0 0;
  color: var(--gray-600);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-viewer-content {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  background: #dfe5ed;
}

.document-viewer-frame {
  width: 100%;
  height: 100%;
  min-height: 500px;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  background: var(--white);
}

.document-viewer-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 8px 28px rgba(11, 31, 58, 0.18);
}

.document-viewer-message,
.document-viewer-unsupported {
  max-width: 520px;
  padding: 24px;
  border: 1px solid var(--gray-300);
  border-radius: 12px;
  background: var(--white);
  text-align: center;
}

.document-viewer-unsupported h3 {
  margin-top: 0;
  color: var(--navy);
}

.document-viewer-footer {
  display: flex;
  justify-content: center;
  padding: 12px 18px;
  border-top: 1px solid var(--gray-300);
  background: var(--white);
}

.document-viewer-footer .primary-button {
  min-width: 180px;
}

@media (max-width: 720px) {
  .document-viewer-header {
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 10px;
  }

  .document-viewer-back-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .document-viewer-title-wrap {
    grid-column: 1;
  }

  .document-viewer-save-link {
    grid-column: 2;
  }

  .document-viewer-content {
    padding: 8px;
  }

  .document-viewer-frame {
    min-height: 420px;
    border-radius: 6px;
  }

  .document-viewer-footer {
    padding: 10px;
  }

  .document-viewer-footer .primary-button {
    width: 100%;
  }
}


/* All-work-orders scope for Midwest Speedometer — 20260726-all-work-orders-v1 */
.order-organization-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 7px 0 2px;
}

.organization-badge {
  background: #e8eef5;
  color: var(--navy);
  border: 1px solid #c3cfdd;
}

#ordersScopeName {
  font-weight: 700;
}


/* Live Gmail diagnostics — 20260726-email-delivery-repair-v1 */
.gmail-sender-diagnostics {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  background: var(--gray-100);
  font-size: 0.9rem;
}

.gmail-sender-diagnostics > div {
  display: grid;
  grid-template-columns: minmax(145px, auto) minmax(0, 1fr);
  gap: 10px;
}

.gmail-sender-diagnostics span {
  overflow-wrap: anywhere;
}

.gmail-sender-settings .status-badge.error {
  background: #f8e7e7;
  color: #8f2424;
}

@media (max-width: 560px) {
  .gmail-sender-diagnostics > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}


/* Signature capture visibility and focus — 20260726-signature-capture-fix-v1 */
#workOrderSignatureSection {
  scroll-margin-top: 18px;
}

#workOrderSignatureSection.signature-focus-highlight {
  outline: 4px solid rgba(18, 58, 99, 0.28);
  outline-offset: 4px;
  animation: signatureSectionFocus 1.05s ease-in-out 3;
}

@keyframes signatureSectionFocus {
  0%, 100% {
    box-shadow: 0 0 0 rgba(18, 58, 99, 0);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(18, 58, 99, 0.13);
  }
}

.detail-signature-capture {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.detail-signature-capture .signature-canvas-wrap {
  width: 100%;
  min-height: 190px;
}

#detailShopSignatureCanvas {
  display: block;
  width: 100%;
  min-height: 180px;
  border: 2px solid var(--navy);
  border-radius: 10px;
  background: #ffffff;
  touch-action: none;
  cursor: crosshair;
}

#detailShopTypedSignature {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  font-size: 1rem;
}

.signature-bypass-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 8px;
  color: var(--gray-600);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
}

.signature-bypass-divider::before,
.signature-bypass-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gray-300);
}

@media (max-width: 720px) {
  #detailShopSignatureCanvas {
    min-height: 220px;
  }

  .detail-signature-capture .detail-inline-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .detail-signature-capture .detail-inline-actions button {
    width: 100%;
  }
}


/* Full-page saved work order — 20260726-full-page-work-order-v1 */
.work-order-page {
  width: 100%;
}

.work-order-page-shell {
  display: grid;
  gap: 18px;
  width: 100%;
}

.work-order-page-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--gray-300);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.work-order-page-title {
  min-width: 0;
}

.work-order-page-title h2 {
  margin: 0;
  font-size: clamp(1.45rem, 4vw, 2rem);
  overflow-wrap: anywhere;
}

.work-order-page-title > p:last-child {
  margin: 7px 0 0;
  color: var(--gray-500);
  line-height: 1.5;
}

.work-order-back-button {
  white-space: nowrap;
}

.work-order-page-actions {
  position: sticky;
  top: 10px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--gray-300);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px rgba(11, 31, 58, 0.13);
  backdrop-filter: blur(8px);
}

.work-order-page-actions > button {
  flex: 0 1 auto;
}

.work-order-page-content {
  min-width: 0;
}

.work-order-page-content .detail-grid {
  align-items: start;
}

.final-work-order-signature {
  order: 9999;
  margin-top: 10px;
  border: 3px solid var(--navy);
  background: linear-gradient(180deg, #ffffff 0%, #f3f6fa 100%);
  box-shadow: 0 10px 30px rgba(11, 31, 58, 0.15);
}

.signature-final-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.signature-final-heading .detail-label {
  margin: 0;
  font-size: 1.15rem;
}

.work-order-page-footer {
  display: flex;
  justify-content: center;
  padding: 18px 0 4px;
  border-top: 1px solid var(--gray-300);
}

.work-order-bottom-back-button {
  min-width: min(100%, 260px);
}

@media (max-width: 760px) {
  .work-order-page-header {
    grid-template-columns: 1fr;
    padding: 15px;
  }

  .work-order-back-button {
    width: 100%;
  }

  .work-order-page-actions {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
  }

  .work-order-page-actions > button {
    width: 100%;
  }

  .signature-final-heading {
    display: grid;
  }

  .work-order-bottom-back-button {
    width: 100%;
  }
}

@media print {
  body > #appMain {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #appMain > .view {
    display: none !important;
  }

  #appMain > #orderDialog {
    display: block !important;
  }

  .app-header,
  .app-nav,
  .work-order-page-header,
  .work-order-page-actions,
  .work-order-page-footer,
  #manualWorkOrderSaveStatus,
  #summaryPdfStatus,
  .detail-inline-actions,
  .upload-zone,
  .employee-detail-panel {
    display: none !important;
  }

  .work-order-page-shell,
  .work-order-page-content,
  .detail-grid {
    display: block !important;
    width: 100% !important;
  }

  .detail-card {
    break-inside: avoid;
    margin-bottom: 12px;
    box-shadow: none !important;
  }
}


/* Mobile source choices and desktop drag/drop — 20260727-mobile-desktop-upload-v1 */
.enhanced-upload-zone {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 160px;
  padding: 22px;
  cursor: default;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.enhanced-upload-zone:focus-visible {
  outline: 3px solid rgba(18, 58, 99, 0.28);
  outline-offset: 3px;
}

.enhanced-upload-zone.drag-active {
  border-color: var(--navy);
  background: #e9f0f8;
  box-shadow: 0 0 0 5px rgba(18, 58, 99, 0.14);
  transform: translateY(-1px);
}

.desktop-drop-copy {
  color: var(--gray-600);
  font-size: 0.88rem;
  text-align: center;
}

.upload-source-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 4px;
}

.upload-source-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 0;
  cursor: pointer;
  text-align: center;
}

.mobile-upload-option {
  display: none;
}

.visually-hidden-file {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .enhanced-upload-zone {
    min-height: 0;
    padding: 17px 13px;
  }

  .desktop-drop-copy {
    display: none;
  }

  .upload-source-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .upload-source-button,
  .mobile-upload-option {
    display: flex;
    width: 100%;
    box-sizing: border-box;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .enhanced-upload-zone::after {
    content: "Drop files anywhere inside this box";
    color: var(--gray-500);
    font-size: 0.78rem;
  }
}


/* Immediate cloud synchronization and manual Refresh — 20260727-realtime-sync-refresh-v1 */
.app-sync-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.refresh-app-button {
  min-width: 92px;
}

.refresh-app-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.app-sync-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  max-width: 190px;
  padding: 3px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 0.72rem;
  line-height: 1.2;
  text-align: center;
}

.app-sync-status.success {
  border-color: #9fc8ae;
  background: #edf8f1;
  color: #1e6540;
}

.app-sync-status.error {
  border-color: #e1a7a7;
  background: #fff0f0;
  color: #8f2424;
}

@media (max-width: 760px) {
  .app-sync-control {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
  }

  .refresh-app-button {
    width: 100%;
  }

  .app-sync-status {
    max-width: none;
  }
}


/* Prominent Shop document downloads — 20260727-shop-download-notice-v1 */
.shop-download-callout {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 12px 0;
  padding: 14px 16px;
  border: 2px solid #15803d;
  border-radius: 13px;
  background: linear-gradient(135deg, #ecfdf3, #dcfce7);
  color: #14532d;
  box-shadow: 0 7px 20px rgba(21, 128, 61, 0.13);
}
.shop-download-callout[hidden] { display: none !important; }
.shop-download-callout-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #15803d;
  color: #ffffff;
  font-size: 1.55rem;
  font-weight: 900;
}
.shop-download-callout > span:last-child { display: grid; gap: 3px; }
.shop-download-callout strong { font-size: 1rem; }
.shop-download-callout small { color: #316b45; line-height: 1.4; }

.customer-scrub-section.download-ready {
  border: 3px solid #15803d;
  background: linear-gradient(180deg, #f0fdf4, #ffffff);
  box-shadow: 0 10px 26px rgba(21, 128, 61, 0.16);
}
.customer-scrub-section.download-ready .panel-heading h4 { color: #14532d; }
.customer-document-status.available {
  padding: 8px 13px;
  border: 1px solid #15803d;
  background: #15803d;
  color: #ffffff;
  font-size: 0.78rem;
  box-shadow: 0 4px 12px rgba(21, 128, 61, 0.18);
}

.shop-download-row {
  grid-template-columns: auto minmax(0, 1fr) minmax(220px, auto);
  padding: 15px;
  border: 2px solid #22c55e;
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 72%);
  box-shadow: 0 8px 22px rgba(21, 128, 61, 0.12);
}
.shop-download-row:hover { border-color: #15803d; }
.shop-download-icon {
  width: 48px;
  height: 48px;
  border: 1px solid #15803d;
  border-radius: 50%;
  background: #15803d;
  color: #ffffff;
  font-size: 1.3rem;
}
.shop-download-badge {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}
.shop-download-actions {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 7px;
  min-width: 220px;
}
.shop-download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 11px 17px;
  border: 2px solid #166534;
  border-radius: 10px;
  background: linear-gradient(180deg, #22c55e, #15803d);
  color: #ffffff !important;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 5px 14px rgba(21, 128, 61, 0.24);
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}
.shop-download-button:hover,
.shop-download-button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 8px 18px rgba(21, 128, 61, 0.3);
}
.shop-download-button span { font-size: 1.2rem; line-height: 1; }
.shop-open-document-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid #9fb2c5;
  border-radius: 9px;
  background: #ffffff;
  color: #0b2f55;
  text-decoration: none;
}
.prominent-document-download {
  white-space: nowrap;
  background: linear-gradient(180deg, #22c55e, #15803d) !important;
  border-color: #166534 !important;
  color: #ffffff !important;
  font-weight: 900;
  box-shadow: 0 5px 14px rgba(21, 128, 61, 0.24);
}
.saved-work-order-download-callout { margin-bottom: 14px; }

@media (max-width: 760px) {
  .shop-download-row { grid-template-columns: auto minmax(0, 1fr); }
  .shop-download-actions {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }
  .shop-download-button,
  .shop-open-document-link {
    width: 100%;
    box-sizing: border-box;
  }
  .shop-download-callout {
    align-items: flex-start;
    padding: 13px;
  }
  .document-viewer-save-link.prominent-document-download {
    width: auto;
    min-width: 0;
  }
}


/* Work-order quick actions, bypass, deletion, and business editor — 20260727-work-order-quick-actions-business-delete-v1 */
.order-card-downloads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.order-card-downloads button {
  min-height: 42px;
}

.order-card-downloads button:disabled,
.order-card-downloads button[aria-disabled="true"] {
  border-color: #c8cdd4;
  background: #e3e6ea;
  color: #858b94;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

.order-card-bypass {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #d99a23;
  border-radius: 10px;
  background: #fff8e8;
}

.order-card-bypass input {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 2px;
}

.order-card-bypass span {
  display: grid;
  gap: 2px;
}

.order-card-bypass small {
  color: #725415;
  line-height: 1.35;
}

.order-card-bypass.disabled {
  border-color: #c8cdd4;
  background: #f1f2f4;
  opacity: 0.7;
}

.delete-order-card,
.permanent-delete-button {
  border-color: #991b1b !important;
  background: #b91c1c !important;
  color: #ffffff !important;
}

.delete-order-card:hover,
.delete-order-card:focus-visible,
.permanent-delete-button:hover,
.permanent-delete-button:focus-visible {
  background: #991b1b !important;
}

.business-information-editor {
  border-top: 5px solid var(--navy);
}

.business-information-editor .panel-heading {
  align-items: flex-start;
}

@media (max-width: 760px) {
  .order-card-downloads {
    grid-template-columns: 1fr;
  }

  .order-card-downloads button,
  .delete-order-card {
    width: 100%;
  }
}


/* Updated guide badges - 20260727-updated-guides-v1 */
.guide-updated-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 7px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}


/* Green Work Order card download buttons — 20260727-green-work-order-downloads-v1 */
.order-card-downloads .order-card-download-button:not(:disabled):not([aria-disabled="true"]) {
  border: 2px solid #166534;
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 5px 14px rgba(21, 128, 61, 0.24);
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.order-card-downloads .order-card-download-button:not(:disabled):not([aria-disabled="true"]):hover,
.order-card-downloads .order-card-download-button:not(:disabled):not([aria-disabled="true"]):focus-visible {
  border-color: #14532d;
  background: linear-gradient(180deg, #16a34a 0%, #166534 100%);
  color: #ffffff;
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 8px 18px rgba(21, 128, 61, 0.32);
}

.order-card-downloads .order-card-download-button:not(:disabled):not([aria-disabled="true"]):active {
  transform: translateY(0);
  box-shadow: 0 3px 9px rgba(21, 128, 61, 0.22);
}

.order-card-downloads .order-card-download-button:disabled,
.order-card-downloads .order-card-download-button[aria-disabled="true"] {
  border: 2px solid #c8cdd4;
  background: #e3e6ea;
  color: #858b94;
  font-weight: 800;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}


/* Clickable work-order cards and Midwest Void Ticket — 20260727-clickable-cards-void-v1 */
.clickable-order-card {
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, background 150ms ease;
}

.clickable-order-card:hover {
  border-color: #2e5e8c;
  box-shadow: 0 10px 26px rgba(16, 42, 67, 0.16);
  transform: translateY(-1px);
}

.clickable-order-card:focus-visible {
  outline: 3px solid rgba(46, 94, 140, 0.38);
  outline-offset: 3px;
  border-color: #2e5e8c;
  box-shadow: 0 10px 26px rgba(16, 42, 67, 0.16);
}

.clickable-order-card:active {
  transform: translateY(0);
}

.clickable-order-card button,
.clickable-order-card a,
.clickable-order-card input,
.clickable-order-card select,
.clickable-order-card textarea,
.clickable-order-card label {
  cursor: auto;
}

.clickable-order-card button:not(:disabled),
.clickable-order-card a,
.clickable-order-card label:not(.disabled),
.clickable-order-card select:not(:disabled),
.clickable-order-card input:not(:disabled) {
  cursor: pointer;
}

.void-order-card {
  border-color: #b45309 !important;
  background: #d97706 !important;
  color: #ffffff !important;
  font-weight: 900;
}

.void-order-card:hover,
.void-order-card:focus-visible {
  border-color: #92400e !important;
  background: #b45309 !important;
  color: #ffffff !important;
}

@media (max-width: 760px) {
  .void-order-card {
    width: 100%;
  }
}


/* Per-section Midwest bypass controls — 20260727-per-section-bypass-v1 */
.section-bypass-wrap {
  display: grid;
  gap: 5px;
  margin: 11px 0 14px;
  padding: 11px 13px;
  border: 1px solid #d39a2f;
  border-radius: 10px;
  background: #fff9ea;
}

.section-bypass-wrap.active {
  border: 2px solid #b45309;
  background: linear-gradient(135deg, #fff7e6, #ffedd5);
  box-shadow: 0 5px 14px rgba(180, 83, 9, 0.13);
}

.section-bypass-wrap.shop-readonly {
  border-color: #15803d;
  background: linear-gradient(135deg, #ecfdf3, #dcfce7);
  color: #14532d;
}

.section-bypass-control {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  cursor: pointer;
}

.section-bypass-control input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: #b45309;
}

.section-bypass-wrap.shop-readonly input {
  accent-color: #15803d;
}

.section-bypass-control > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.section-bypass-control strong {
  color: #713f12;
  font-size: 0.9rem;
}

.section-bypass-wrap.shop-readonly strong {
  color: #14532d;
}

.section-bypass-control small {
  color: #78591b;
  line-height: 1.4;
}

.section-bypass-wrap.shop-readonly small {
  color: #316b45;
}

.section-bypass-message {
  margin: 0 0 0 30px;
}

.detail-card.section-bypassed {
  border-color: #d97706;
  box-shadow: inset 4px 0 0 #d97706;
}

.detail-card.section-bypassed .detail-label {
  color: #92400e;
}

@media (max-width: 760px) {
  .section-bypass-wrap {
    padding: 10px 11px;
  }

  .section-bypass-message {
    margin-left: 0;
  }
}


/* Clickable photo and document previews — 20260727-clickable-photo-document-previews-v1 */
.clickable-file-preview {
  cursor: pointer;
  position: relative;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, background 150ms ease;
}

.clickable-file-preview:hover {
  border-color: #2e5e8c !important;
  box-shadow: 0 8px 20px rgba(16, 42, 67, 0.16);
  transform: translateY(-1px);
}

.clickable-file-preview:focus-visible {
  outline: 3px solid rgba(46, 94, 140, 0.42);
  outline-offset: 3px;
  border-color: #2e5e8c !important;
  box-shadow: 0 8px 20px rgba(16, 42, 67, 0.16);
}

.clickable-file-preview:active {
  transform: translateY(0);
}

.file-preview-hint {
  display: block;
  color: #2e5e8c !important;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.25;
}

.photo-preview-image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

.photo-preview-image-wrap img {
  display: block;
  width: 100%;
}

.file-preview-overlay {
  position: absolute;
  right: 9px;
  bottom: 9px;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(8, 27, 51, 0.9);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.preview-file-button {
  border: 1px solid #2e5e8c !important;
  background: #eaf2f8 !important;
  color: #102a43 !important;
  font-weight: 900 !important;
}

.preview-file-button:hover,
.preview-file-button:focus-visible {
  border-color: #102a43 !important;
  background: #d8e8f4 !important;
  color: #081b33 !important;
}

.document-viewer-work-order-back {
  min-width: min(100%, 240px);
}

@media (max-width: 760px) {
  .preview-file-button {
    width: 100%;
  }

  .detail-photo-actions {
    width: 100%;
  }

  .file-preview-overlay {
    right: 7px;
    bottom: 7px;
  }
}


/* File deletion permissions and drag/drop repair — 20260728-file-delete-dragdrop-v1 */
.drop-zone-status {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #eaf2f8;
  color: #102a43;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.drop-zone-status.ready {
  border: 1px solid #2e5e8c;
  background: #eaf2f8;
  color: #102a43;
}

.drop-zone-status.uploading {
  border: 1px solid #a86a00;
  background: #fff7e6;
  color: #713f12;
}

.drop-zone-status.success {
  border: 1px solid #15803d;
  background: #ecfdf3;
  color: #14532d;
}

.drop-zone-status.error {
  border: 1px solid #b42318;
  background: #fff1f0;
  color: #7a271a;
}

.enhanced-upload-zone.drag-active {
  border-color: #15803d !important;
  background: #ecfdf3 !important;
  box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.15), 0 10px 24px rgba(21, 128, 61, 0.18);
}

.remove-detail-shop-photo,
.remove-detail-midwest-photo,
.remove-detail-shop-document,
.remove-detail-midwest-document,
.remove-detail-document {
  border-color: #991b1b !important;
  background: #b91c1c !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}

.remove-detail-shop-photo:hover,
.remove-detail-shop-photo:focus-visible,
.remove-detail-midwest-photo:hover,
.remove-detail-midwest-photo:focus-visible,
.remove-detail-shop-document:hover,
.remove-detail-shop-document:focus-visible,
.remove-detail-midwest-document:hover,
.remove-detail-midwest-document:focus-visible,
.remove-detail-document:hover,
.remove-detail-document:focus-visible {
  border-color: #7f1d1d !important;
  background: #991b1b !important;
  color: #ffffff !important;
}


/* Midwest Facility filter and Shop photo deletion — 20260728-shop-photo-delete-facility-filter-v1 */
.orders-toolbar .facility-filter-wrap {
  min-width: min(100%, 280px);
}

.facility-filter-wrap select {
  width: 100%;
}

@media (min-width: 900px) {
  .orders-toolbar:has(.facility-filter-wrap:not([hidden])) {
    grid-template-columns: minmax(260px, 1.5fr) minmax(180px, 0.7fr) minmax(260px, 1fr);
  }
}


/* Always-visible work-order attachment delete controls — 20260728-visible-file-delete-buttons-v1 */
.work-order-file-delete {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  min-height: 42px;
  padding: 9px 13px;
  border: 2px solid #7f1d1d !important;
  border-radius: 9px;
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%) !important;
  color: #ffffff !important;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900 !important;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: 0 4px 11px rgba(153, 27, 27, 0.24);
  position: relative;
  z-index: 2;
}

.work-order-file-delete:hover,
.work-order-file-delete:focus-visible {
  border-color: #450a0a !important;
  background: linear-gradient(180deg, #b91c1c 0%, #7f1d1d 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 7px 16px rgba(127, 29, 29, 0.32);
  transform: translateY(-1px);
}

.work-order-file-delete:disabled {
  border-color: #9ca3af !important;
  background: #d1d5db !important;
  color: #4b5563 !important;
  cursor: wait;
  box-shadow: none;
  transform: none;
}

.detail-document-row.has-visible-delete-control .document-actions,
.detail-photo-card.has-visible-delete-control .detail-photo-actions {
  overflow: visible !important;
}

.detail-document-row .document-actions {
  flex-wrap: wrap;
}

.shop-download-row .shop-download-actions .work-order-file-delete {
  width: 100%;
}

@media (max-width: 760px) {
  .work-order-file-delete {
    width: 100%;
    min-width: 0;
  }

  .detail-document-row .document-actions,
  .detail-photo-card .detail-photo-actions {
    width: 100%;
    justify-content: stretch;
  }
}

@media print {
  .work-order-file-delete {
    display: none !important;
  }
}


/* Reordered opened-work-order workflow — 20260728-reordered-work-order-layout-v1 */
.detail-grid[data-section-layout] .shop-photo-detail,
.detail-grid[data-section-layout] .shop-scrub-workflow-detail,
.detail-grid[data-section-layout] .shop-calibration-workflow-detail,
.detail-grid[data-section-layout] .midwest-photo-detail,
.detail-grid[data-section-layout] .customer-note-detail,
.detail-grid[data-section-layout] .shop-signature-detail {
  margin-top: 8px;
}

.detail-grid[data-section-layout] .shop-photo-detail {
  border-top: 3px solid #1e4e79;
}

.detail-grid[data-section-layout] .shop-scrub-workflow-detail {
  border-top: 3px solid #18794e;
}

.detail-grid[data-section-layout] .employee-detail-panel {
  border-top: 3px solid #b7791f;
}

.detail-grid[data-section-layout] .shop-calibration-workflow-detail {
  border-top: 3px solid #7c3aed;
}

.detail-grid[data-section-layout] .midwest-photo-detail {
  border-top: 3px solid #0b1f3a;
}

@media print {
  .detail-grid[data-section-layout] .detail-card {
    break-inside: avoid;
  }
}


/* Automatic work-order status tabs — 20260729-automatic-status-tabs-created-by-v1 */
.visually-hidden-status-filter {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.work-order-status-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 15px;
  padding: 4px 2px 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.work-order-status-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid #bdc8d3;
  border-radius: 999px;
  background: #ffffff;
  color: #344454;
  font-weight: 850;
  white-space: nowrap;
}

.work-order-status-tab:hover,
.work-order-status-tab:focus-visible {
  border-color: #1e4e79;
  background: #eaf2f8;
  color: #0b2f55;
}

.work-order-status-tab.active {
  border-color: #0b2f55;
  background: #0b1f3a;
  color: #ffffff;
  box-shadow: 0 5px 13px rgba(11, 31, 58, 0.2);
}

.status-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: #edf1f5;
  color: #344454;
  font-size: 0.75rem;
  font-weight: 900;
}

.work-order-status-tab.active .status-tab-count {
  background: #ffffff;
  color: #0b1f3a;
}

.automatic-status-toolbar {
  grid-template-columns: minmax(260px, 1.5fr) minmax(240px, 1fr);
}

.automatic-work-order-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 11px;
  font-weight: 900;
}

.automatic-status-detail-value {
  margin-bottom: 8px;
}

@media (max-width: 760px) {
  .work-order-status-tabs {
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 4px;
    padding-right: 4px;
  }

  .automatic-status-toolbar {
    grid-template-columns: 1fr;
  }
}

/* Programming work-order workflow */
.programming-work-order-panel {
  border: 1px solid #bfdbfe;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}
.programming-work-order-panel > .panel-heading {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-200);
}
.programming-work-order-panel h3 small,
.programming-work-order-panel h4 small,
#repairNeededStep h3 small {
  font-size: 0.72em;
  font-weight: 700;
  color: var(--gray-500);
}
.programming-section-block {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: var(--gray-50);
}
.programming-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.programming-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: var(--white);
  font-weight: 650;
}
.programming-choice input { flex: 0 0 auto; }
.programming-choice:has(input:checked) {
  border-color: #60a5fa;
  background: var(--blue-soft);
}
.programming-other-field,
.programming-note-field {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}
.programming-module-info-list {
  display: grid;
  gap: 14px;
}
.programming-module-card {
  padding: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: var(--white);
}
.programming-module-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.programming-module-card-heading strong { font-size: 1rem; }
.programming-conditional-card {
  border-color: #93c5fd;
  background: #f8fbff;
}
.programming-results-panel {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid #93c5fd;
  border-radius: 14px;
  background: #f8fbff;
}
.programming-results-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.programming-result-card {
  padding: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: var(--white);
}
.programming-internal-result-card {
  border-color: #cbd5e1;
  background: #f8fafc;
}
.programming-customer-result-card {
  border-color: #bfdbfe;
  background: #ffffff;
}
.programming-photo-card .photo-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.programming-detail-heading { margin-bottom: 14px; }
.programming-detail-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.programming-detail-summary-card,
.programming-detail-subsection {
  padding: 15px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: var(--gray-50);
}
.programming-detail-subsection { margin-top: 14px; }
.programming-detail-module-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.programming-detail-module-card {
  padding: 13px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: var(--white);
}
.programming-detail-module-card h4 { margin: 0 0 9px; }
.programming-detail-module-card div { margin-top: 5px; line-height: 1.45; }
.programming-transmission-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.programming-transmission-detail-grid > div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: var(--white);
}
.programming-customer-notes-detail { margin-top: 14px; }
.programming-detail-result-card + .programming-detail-result-card { margin-top: 14px; }

@media (max-width: 760px) {
  .programming-checkbox-grid,
  .programming-results-grid,
  .programming-detail-summary-grid,
  .programming-detail-module-list,
  .programming-transmission-detail-grid {
    grid-template-columns: 1fr;
  }
  .programming-section-block,
  .programming-results-panel,
  .programming-result-card { padding: 13px; }
}


/* Programming work-order responsive layout repair — 20260809-programming-responsive-layout-v2 */
.programming-work-order-panel,
.programming-section-block,
.programming-checkbox-grid,
.programming-choice {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.programming-checkbox-grid {
  width: 100%;
  align-items: stretch;
}

.programming-choice {
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

/* The global input rule gives every input width:100%. Checkboxes inside the
   Programming cards must have an explicit fixed size or their labels get
   pushed out of the card. */
.programming-choice > input[type="checkbox"] {
  display: block;
  flex: 0 0 22px !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 5px;
  box-sizing: border-box;
}

.programming-choice > span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  color: var(--navy);
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.programming-other-field,
.programming-note-field,
.programming-module-card,
.programming-module-card .form-grid,
.programming-conditional-card .form-grid {
  min-width: 0;
  max-width: 100%;
}

.programming-other-field input,
.programming-note-field textarea,
.programming-module-card input,
.programming-module-card select,
.programming-module-card textarea,
.programming-conditional-card input {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Keep the main application tabs usable on phones. Each tab keeps its natural
   width and the row scrolls horizontally rather than crushing/overlapping. */
.tabs {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

.tabs .tab {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .programming-checkbox-grid {
    grid-template-columns: 1fr;
  }

  .programming-work-order-panel > .panel-heading,
  .programming-section-block .panel-heading {
    min-width: 0;
  }

  .programming-work-order-panel h3,
  .programming-work-order-panel h4,
  .programming-work-order-panel p {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 600px) {
  .programming-work-order-panel {
    padding-left: 14px;
    padding-right: 14px;
  }

  .programming-section-block {
    margin-top: 14px;
    padding: 12px;
    border-radius: 12px;
  }

  .programming-choice {
    min-height: 58px;
    padding: 12px;
    gap: 12px;
  }

  .programming-choice > span {
    font-size: 0.95rem;
  }

  .programming-module-card {
    padding: 13px;
  }

  .programming-module-card-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .tabs {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }

  .tabs .tab {
    padding-left: 12px;
    padding-right: 12px;
  }
}


/* Customer/Shop public registration + optional RO — 20260809-customer-shop-self-registration-v1 */
.auth-self-register-button {
  width: 100%;
  margin-top: 10px;
  min-height: 46px;
  font-weight: 900;
}

.auth-manual-account-note strong {
  color: var(--navy);
}

#authRequestPanel .auth-submit {
  min-height: 48px;
}

@media (max-width: 680px) {
  .auth-request-grid {
    grid-template-columns: 1fr;
  }
  .auth-request-grid .full-span {
    grid-column: auto;
  }
}


/* Combined ADAS + Programming workflow */
.service-status-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.service-status-detail-grid > div { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid rgba(15,45,75,.15); border-radius: 10px; background: rgba(245,248,251,.78); }
.service-status-detail-grid > div > span { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #536779; }
.service-status-pill { display: inline-flex; align-items: center; justify-content: center; padding: 6px 9px; border-radius: 999px; background: #e8eef4; color: #0b1f3a; font-size: .78rem; font-weight: 800; line-height: 1.15; }
.service-status-mini-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.programming-request-review-detail { border-top: 3px solid #5b4b8a; }
.programming-results-work-order-detail { border-top: 3px solid #0b1f3a; }
.programming-request-state, .programming-review-summary { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; margin: 10px 0; border-radius: 10px; background: #f5f8fb; border: 1px solid rgba(15,45,75,.14); }
.programming-request-state.submitted { background: #eef8f1; border-color: rgba(24,121,78,.25); }
.programming-request-state span, .programming-review-summary span, .programming-review-summary small { color: #536779; }
.programming-midwest-review-editor { margin-top: 14px; padding: 14px; border-radius: 12px; background: #f8fafc; border: 1px solid rgba(15,45,75,.14); }
.programming-complete-state { display: inline-flex; align-items: center; padding: 8px 10px; border-radius: 8px; background: #eaf7ef; font-weight: 800; color: #17613d; }
.programming-badge { background: #eeeafd !important; color: #463673 !important; }
.orders-toolbar.automatic-status-toolbar { grid-template-columns: minmax(220px, 1.4fr) minmax(170px, .7fr) minmax(220px, 1fr); }
@media (max-width: 860px) { .orders-toolbar.automatic-status-toolbar { grid-template-columns: 1fr; } .service-status-mini-row { justify-content: flex-start; } }

/* Programming workflow sequencing — 20260809-programming-full-workflow-v2 */
#newOrderProgrammingResults.programming-results-after-request-only {
  display: none !important;
}


/* Customer / Shop self-registration — 20260809-shop-toggle-v2 */
.signup-account-type-card {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  margin: 0 0 16px;
  border: 1px solid rgba(123, 145, 179, 0.42);
  border-radius: 14px;
  background: rgba(10, 31, 58, 0.05);
}
.signup-account-type-summary {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.signup-account-type-card small {
  line-height: 1.45;
}
.signup-shop-toggle {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 15px;
  border: 2px solid #173f6b;
  border-radius: 12px;
  background: #eef5fc;
  color: #0b1f3a;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(11, 31, 58, 0.08);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.signup-shop-toggle:hover {
  background: #e4f0fb;
  border-color: #0b2e55;
  box-shadow: 0 5px 14px rgba(11, 31, 58, 0.13);
}
.signup-shop-toggle:focus-within {
  outline: 3px solid rgba(34, 104, 170, .22);
  outline-offset: 2px;
}
.signup-shop-toggle input {
  width: 25px !important;
  height: 25px;
  margin: 0;
  flex: 0 0 25px;
  accent-color: #0b3b70;
}
.signup-shop-toggle-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.signup-shop-toggle-copy strong {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .01em;
}
.signup-shop-toggle-copy small {
  color: #50657a;
  font-weight: 650;
}
.signup-shop-toggle:has(input:checked) {
  background: #0b2e55;
  border-color: #0b2e55;
  color: #fff;
  box-shadow: 0 5px 15px rgba(11, 46, 85, 0.2);
}
.signup-shop-toggle:has(input:checked) .signup-shop-toggle-copy small {
  color: #dbe9f7;
}
.shop-signup-fields[hidden] {
  display: none !important;
}
.customer-profile-address {
  margin-top: 4px;
  padding: 16px;
  border: 1px solid rgba(123, 145, 179, 0.35);
  border-radius: 12px;
  background: rgba(10, 31, 58, 0.035);
}
.customer-profile-address-heading {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}
.customer-profile-address-heading strong {
  font-size: 1rem;
}
.customer-profile-address-heading small {
  line-height: 1.45;
}

@media (max-width: 700px) {
  .signup-account-type-card {
    padding: 14px;
  }
  .signup-shop-toggle {
    padding: 14px;
  }
}


/* Authentication viewport-safe layout fix — 20260809-auth-layout-v1
   Keep short cards centered, but anchor tall login/registration cards to the
   top of the scrollable viewport so their headers can never be clipped. */
.auth-gate {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.auth-card {
  flex: 0 0 auto;
  max-width: 100%;
  margin-block: auto;
}

.auth-gate.request-mode .auth-card {
  margin-block: 0;
}

@media (max-height: 760px) {
  .auth-card {
    margin-block: 0;
  }
}

@media (max-width: 600px) {
  .auth-gate {
    align-items: flex-start;
    justify-content: center;
    padding-top: max(14px, env(safe-area-inset-top));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  .auth-card {
    margin-block: 0;
  }
}


/* Programming 9-section workflow — 2026-08-09 */
.programming-workflow-heading { align-items: flex-start; }
.programming-progress-strip {
  display: grid;
  grid-template-columns: repeat(9, minmax(92px, 1fr));
  gap: 8px;
  margin: 16px 0 20px;
  overflow-x: auto;
  padding: 3px 2px 10px;
}
.programming-progress-item {
  min-width: 92px;
  border: 1px solid var(--border, #d6dce5);
  border-radius: 12px;
  background: #f7f9fc;
  padding: 9px 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #516075;
}
.programming-progress-item b,
.programming-section-number {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #dfe6ef;
  color: #17324f;
  font-size: 13px;
  font-weight: 800;
}
.programming-progress-item small { font-size: 11px; font-weight: 700; line-height: 1.15; }
.programming-progress-item.complete { border-color: #96c8ad; background: #f0faf4; color: #1b5e3c; }
.programming-progress-item.complete b { background: #237a4b; color: #fff; }
.programming-progress-item.current { border-color: #123a63; box-shadow: 0 0 0 2px rgba(18,58,99,.10); background: #f0f5fb; color: #0b2d50; }
.programming-progress-item.current b { background: #123a63; color: #fff; }
.programming-progress-item.technician { border-style: dashed; }
.programming-workflow-section {
  border: 1px solid #d8dee8;
  border-radius: 14px;
  background: #fff;
  margin: 0 0 14px;
  overflow: clip;
}
.programming-workflow-section > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 15px 17px;
  background: linear-gradient(180deg, #fbfcfe, #f5f7fa);
  border-bottom: 1px solid transparent;
}
.programming-workflow-section[open] > summary { border-bottom-color: #e2e7ee; }
.programming-workflow-section > summary::-webkit-details-marker { display: none; }
.programming-workflow-section > summary::after { content: '›'; margin-left: auto; font-size: 24px; transform: rotate(90deg); transition: transform .15s ease; }
.programming-workflow-section[open] > summary::after { transform: rotate(-90deg); }
.programming-workflow-section > summary span:nth-child(2) { display: grid; gap: 3px; }
.programming-workflow-section > summary strong { font-size: 16px; }
.programming-workflow-section > summary small { color: #667085; font-size: 12px; }
.programming-workflow-body { padding: 16px; }
.programming-section-inner { margin: 0; border: 0; padding: 0; }
.programming-vehicle-state-grid { margin-bottom: 15px; }
.field-group-label { display: block; font-weight: 700; margin-bottom: 8px; }
.field-group-label small { font-weight: 500; color: #667085; }
.programming-warning-light-group { margin: 8px 0 15px; }
.compact-warning-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.programming-technician-stage-grid { display: grid; gap: 10px; margin: 14px 0; }
.programming-stage-preview {
  border: 1px dashed #b7c2d0;
  border-radius: 13px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
}
.programming-stage-preview > div { display: grid; gap: 3px; flex: 1; }
.programming-stage-preview strong { font-size: 14px; }
.programming-stage-preview small { color: #667085; line-height: 1.35; }
.programming-stage-preview.customer-stage { border-style: solid; background: #f5f8fc; }
.programming-workflow-progress-detail { background: #fbfcfe; }
.saved-programming-progress { margin-bottom: 0; }
.programming-state-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin: 10px 0;
}
.programming-state-detail-grid > div {
  border: 1px solid #e0e5ec;
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  background: #f8fafc;
}
.programming-state-detail-grid span { color: #667085; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.programming-state-detail-grid strong { color: #17233b; font-size: 14px; }
.programming-technician-detail { border-left: 4px solid #123a63; }
.programming-tech-editor { margin-top: 8px; }
.programming-check-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
  margin: 10px 0 14px;
}
.programming-check-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 9px;
  border: 1px solid #dce2ea;
  border-radius: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  min-height: 44px;
}
.programming-check-row input { width: 20px; height: 20px; flex: 0 0 auto; }
.programming-check-row span { font-weight: 650; }
.programming-check-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 10px 0 14px; }
.programming-check-summary span { display: flex; align-items: center; gap: 8px; border-radius: 9px; padding: 9px 11px; background: #f5f7fa; color: #667085; }
.programming-check-summary span.done { color: #1b5e3c; background: #f0faf4; }
.programming-check-summary b { width: 18px; }
.mini-badge.success { background: #e7f6ed; color: #1d6a43; border-color: #b7dfc8; }
@media (max-width: 900px) {
  .programming-progress-strip { grid-template-columns: repeat(9, 105px); }
  .programming-state-detail-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .compact-warning-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .programming-workflow-body { padding: 12px; }
  .programming-workflow-section > summary { padding: 13px; }
  .programming-state-detail-grid,
  .programming-check-editor-grid,
  .programming-check-summary,
  .compact-warning-grid { grid-template-columns: 1fr; }
  .programming-stage-preview { align-items: flex-start; }
  .programming-stage-preview .employee-badge { display: none; }
}


/* Programming draft/save and Midwest document camera controls */
.programming-draft-save-card {
  margin-top: 18px;
  padding: 18px;
  border: 2px solid rgba(18, 58, 99, 0.2);
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fa 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.programming-draft-save-card h4 {
  margin: 2px 0 6px;
}

.programming-draft-save-card p:last-child {
  margin-bottom: 0;
}

.programming-draft-save-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: min(100%, 245px);
}

.programming-draft-save-actions .field-message {
  margin: 0;
  text-align: center;
}

.camera-upload-button {
  font-weight: 800;
}

.programming-edit-draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
}

@media (max-width: 760px) {
  .programming-draft-save-card {
    flex-direction: column;
    align-items: stretch;
  }

  .programming-draft-save-actions,
  .programming-draft-save-actions .primary-button {
    width: 100%;
  }
}

/* Programming work-order mobile-first layout — 20260809-programming-mobile-v10 */
@media (max-width: 640px) {
  /* Use the phone width for the form instead of nesting several large desktop gutters. */
  .programming-work-order-panel {
    margin-left: -4px;
    margin-right: -4px;
    padding: 12px 8px 14px;
    border-radius: 14px;
    overflow: visible;
  }

  .programming-work-order-panel > .panel-heading {
    display: block;
    margin: 0 4px 12px;
    padding: 0 0 12px;
  }

  .programming-work-order-panel > .panel-heading h3 {
    font-size: 1.12rem;
    line-height: 1.25;
  }

  .programming-work-order-panel > .panel-heading p {
    font-size: .84rem;
    line-height: 1.4;
  }

  /* Replace the desktop horizontal scroller with a compact 3 x 3 phone grid. */
  .programming-progress-strip,
  .programming-progress-strip.saved-programming-progress {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    margin: 10px 0 14px;
    padding: 0;
    overflow: visible;
  }

  .programming-progress-item {
    min-width: 0;
    min-height: 48px;
    padding: 7px 6px;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
  }

  .programming-progress-item b,
  .programming-section-number {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  .programming-progress-item small {
    min-width: 0;
    font-size: 10px;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  /* Make each work-order section feel like one card, not cards inside cards. */
  .programming-workflow-section {
    margin-bottom: 10px;
    border-radius: 12px;
  }

  .programming-workflow-section > summary {
    min-height: 58px;
    padding: 10px;
    gap: 8px;
    align-items: center;
  }

  .programming-workflow-section > summary strong {
    font-size: 14px;
    line-height: 1.25;
  }

  .programming-workflow-section > summary small {
    font-size: 11px;
    line-height: 1.3;
  }

  .programming-workflow-section > summary::after {
    font-size: 21px;
  }

  .programming-workflow-body {
    padding: 10px 8px 12px;
  }

  .programming-workflow-body .form-grid,
  .programming-module-card .form-grid,
  .programming-conditional-card .form-grid {
    grid-template-columns: 1fr !important;
    gap: 11px;
  }

  .programming-section-block {
    margin-top: 10px;
    padding: 10px;
    border-radius: 11px;
  }

  .programming-section-inner {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .programming-checkbox-grid,
  .compact-warning-grid,
  .programming-type-grid {
    grid-template-columns: 1fr !important;
    gap: 7px;
  }

  .programming-choice {
    min-height: 52px;
    padding: 10px;
    gap: 10px;
    border-radius: 10px;
  }

  .programming-choice > input[type="checkbox"] {
    flex-basis: 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
  }

  .programming-choice > span {
    font-size: .93rem;
    line-height: 1.3;
  }

  .programming-work-order-panel label > span,
  .programming-work-order-panel .field-group-label {
    font-size: .86rem;
    line-height: 1.3;
  }

  /* 16px inputs prevent Safari from zooming the page when a field receives focus. */
  .programming-work-order-panel input:not([type="checkbox"]):not([type="radio"]),
  .programming-work-order-panel select,
  .programming-work-order-panel textarea {
    min-height: 50px;
    padding: 11px 12px;
    border-radius: 11px;
    font-size: 16px;
  }

  .programming-work-order-panel textarea {
    min-height: 104px;
  }

  .programming-warning-light-group {
    margin: 6px 0 12px;
  }

  .programming-module-info-list {
    gap: 10px;
  }

  .programming-module-card {
    padding: 10px;
    border-radius: 11px;
  }

  .programming-module-card-heading {
    margin-bottom: 10px;
  }

  .programming-conditional-card {
    padding: 11px;
  }

  .programming-stage-preview {
    min-width: 0;
    padding: 10px;
    gap: 9px;
    border-radius: 11px;
  }

  .programming-stage-preview strong {
    font-size: 13px;
  }

  .programming-stage-preview small {
    font-size: 11px;
    line-height: 1.3;
  }

  .programming-draft-save-card {
    margin-top: 12px;
    padding: 12px;
    gap: 10px;
    border-radius: 13px;
  }

  .programming-draft-save-card h4 {
    font-size: 1rem;
  }

  .programming-draft-save-card p {
    font-size: .82rem;
    line-height: 1.4;
  }

  .programming-draft-save-actions,
  .programming-draft-save-actions .primary-button,
  .programming-work-order-panel .large {
    min-width: 0;
    width: 100%;
  }

  .programming-draft-save-actions .primary-button {
    min-height: 54px;
    font-size: .96rem;
  }

  .programming-work-order-panel .programming-results-panel,
  .programming-work-order-panel .programming-result-card {
    padding: 10px;
    border-radius: 11px;
  }

  .programming-work-order-panel .panel-heading.compact,
  .programming-work-order-panel .employee-panel-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
  }

  .programming-work-order-panel .upload-zone {
    min-height: 132px;
    padding: 14px 10px;
    border-radius: 12px;
  }

  .programming-work-order-panel .upload-source-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  .programming-work-order-panel .upload-source-actions .secondary-button,
  .programming-work-order-panel .upload-source-actions label {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .programming-work-order-panel .form-actions,
  .programming-edit-draft-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .programming-work-order-panel .form-actions > *,
  .programming-edit-draft-actions > * {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .programming-work-order-panel {
    padding-left: 6px;
    padding-right: 6px;
  }

  .programming-progress-item {
    grid-template-columns: 22px minmax(0, 1fr);
    padding: 6px 4px;
  }

  .programming-progress-item b {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .programming-progress-item small {
    font-size: 9px;
  }

  .programming-workflow-section > summary small {
    display: none;
  }
}

/* Portal-ready dashboard, draft workflow, and mobile navigation */
.mobile-portal-nav{display:none;margin:10px 16px 0;gap:6px}.mobile-portal-nav span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.mobile-portal-nav select{width:100%;min-height:46px;font-size:16px}.dashboard-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.dashboard-stat-card{appearance:none;text-align:left;border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:18px;display:flex;flex-direction:column;gap:4px;cursor:pointer;color:inherit}.dashboard-stat-card:hover,.dashboard-stat-card:focus-visible{border-color:var(--navy);box-shadow:0 0 0 3px rgba(18,58,99,.1)}.dashboard-stat-card.action{border-left:5px solid #d99a23}.dashboard-stat-number{font-size:30px;line-height:1;font-weight:800;color:var(--navy)}.dashboard-stat-card small,.dashboard-empty{color:var(--muted)}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.dashboard-panel.full{grid-column:1/-1}.dashboard-list{display:grid;gap:8px}.dashboard-list-item,.dashboard-appointment-card,.dashboard-recent-card{width:100%;border:1px solid var(--border);border-radius:11px;background:var(--surface);padding:13px;text-align:left;color:inherit;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center}.dashboard-list-item span:first-child,.dashboard-appointment-card{display:flex;flex-direction:column;align-items:flex-start}.dashboard-list-item small,.dashboard-appointment-card small,.dashboard-appointment-card span,.dashboard-recent-card small,.dashboard-recent-card span{color:var(--muted)}.dashboard-action-label{font-size:12px;font-weight:800;color:#8a5a00;text-align:right}.dashboard-recent-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.dashboard-recent-card{display:flex;flex-direction:column;align-items:flex-start}.needs-action-tab.active,.needs-action-badge{border-color:#d99a23!important;background:#fff7e6!important;color:#7a4b00!important}.adas-draft-save-card,.detail-draft-edit-banner{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;border:1px solid #b8c6d8;background:#f4f7fb;border-radius:12px;padding:14px;margin-bottom:16px}.adas-draft-save-card div,.detail-draft-edit-banner span{display:flex;flex-direction:column;gap:4px}.adas-draft-save-card small,.detail-draft-edit-banner small{color:var(--muted)}.adas-draft-save-card .field-message{grid-column:1/-1;margin:0}@media(max-width:760px){.tabs{display:none}.mobile-portal-nav{display:flex;flex-direction:column}.dashboard-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.dashboard-grid{grid-template-columns:1fr}.dashboard-panel.full{grid-column:auto}.dashboard-recent-grid{grid-template-columns:1fr}.dashboard-list-item{align-items:flex-start;flex-direction:column}.dashboard-action-label{text-align:left}.adas-draft-save-card,.detail-draft-edit-banner{grid-template-columns:1fr}.adas-draft-save-card .secondary-button,.detail-draft-edit-banner .secondary-button{width:100%;min-height:46px}.dashboard-heading{align-items:flex-start}.dashboard-heading .primary-button{width:100%}}@media(max-width:380px){.dashboard-stat-grid{grid-template-columns:1fr}.dashboard-stat-card{padding:14px}}


/* Public login-page guides — 20260809-portal-ready-v13-login-guides */
.auth-public-guides {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(11, 31, 58, 0.14);
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fa 100%);
}
.auth-public-guides-heading h3 {
  margin: 2px 0 4px;
  color: var(--navy);
  font-size: 1.05rem;
}
.auth-public-guides-heading p:last-child {
  margin: 0;
  color: #5d6d7d;
  font-size: 0.9rem;
}
.auth-public-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.auth-public-guide-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 64px;
  padding: 11px 12px;
  border: 1px solid rgba(11, 31, 58, 0.16);
  border-radius: 13px;
  background: #fff;
  color: var(--navy);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(11, 31, 58, 0.06);
}
.auth-public-guide-link:hover,
.auth-public-guide-link:focus-visible {
  border-color: rgba(11, 31, 58, 0.38);
  box-shadow: 0 6px 16px rgba(11, 31, 58, 0.11);
  transform: translateY(-1px);
}
.auth-public-guide-icon {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  font-weight: 900;
}
.auth-public-guide-link > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.auth-public-guide-link strong {
  font-size: 0.92rem;
}
.auth-public-guide-link small {
  color: #607286;
  font-size: 0.76rem;
  line-height: 1.25;
}
.auth-public-guides-note {
  margin: 10px 0 0;
  color: #6b7b8d;
  font-size: 0.76rem;
  line-height: 1.35;
}
@media (max-width: 520px) {
  .auth-public-guides { padding: 14px; }
  .auth-public-guide-grid { grid-template-columns: 1fr; }
  .auth-public-guide-link { min-height: 58px; }
}


/* Programming estimate approval + scheduling workflow (v15) */
.success-button{border:1px solid #15803d;background:#15803d;color:#fff;border-radius:10px;padding:11px 16px;font:inherit;font-weight:800;cursor:pointer}.success-button:hover{background:#166534;border-color:#166534}.success-button:disabled{opacity:.55;cursor:not-allowed}.programming-estimate-detail,.programming-scheduling-detail{scroll-margin-top:110px}.programming-estimate-waiting{display:flex;flex-direction:column;gap:5px;padding:14px;border:1px dashed var(--border);border-radius:12px;background:var(--surface-soft,#f8fafc);margin:12px 0}.programming-estimate-waiting span{color:var(--muted)}.programming-estimate-upload,.programming-estimate-response-panel,.programming-void-review,.programming-estimate-decision{margin-top:14px;padding:14px;border:1px solid var(--border);border-radius:12px;background:#f8fafc}.programming-timeframe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 14px}.programming-timeframe-choice{position:relative;cursor:pointer}.programming-timeframe-choice input{position:absolute;opacity:0;pointer-events:none}.programming-timeframe-choice span{display:flex;align-items:center;justify-content:center;min-height:48px;border:2px solid #cbd5e1;border-radius:10px;background:#fff;font-weight:800}.programming-timeframe-choice input:checked+span{border-color:#15803d;background:#ecfdf3;color:#166534;box-shadow:0 0 0 3px rgba(21,128,61,.12)}.programming-estimate-actions{gap:10px}.programming-estimate-decision{display:flex;flex-direction:column;gap:5px}.programming-estimate-decision.confirmed{border-color:#86efac;background:#f0fdf4}.programming-estimate-decision.rejected{border-color:#fecaca;background:#fff1f2}.programming-estimate-decision.declined{border-color:#fde68a;background:#fffbeb}.programming-void-review{border-color:#fecaca;background:#fff7f7}.programming-void-review>div:first-child{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}.programming-requested-window{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;margin:12px 0;padding:14px;border-radius:12px;border:1px solid #86efac;background:#f0fdf4}.programming-requested-window span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#166534}.programming-requested-window strong{font-size:22px;color:#166534}.programming-requested-window small{grid-column:1/-1;color:var(--muted)}@media(max-width:700px){.programming-timeframe-grid{grid-template-columns:1fr}.programming-estimate-actions .success-button,.programming-estimate-actions .danger-button{width:100%;min-height:48px}.programming-requested-window{grid-template-columns:1fr}.programming-requested-window strong{font-size:20px}}

/* v17 ADAS appointment-request scheduling */
.calibration-timeframe-request{margin-top:18px;padding:16px;border:1px solid var(--border);border-radius:14px;background:#f8fafc}.calibration-timeframe-request .textarea-heading{align-items:center}.calibration-timeframe-request .programming-timeframe-grid{margin-bottom:0}

/* Programming six-stage work-order flow — v18 */
.programming-six-stage-progress {
  grid-template-columns: repeat(6, minmax(118px, 1fr));
  gap: 10px;
}
.programming-six-stage-progress .programming-progress-item {
  min-width: 118px;
  min-height: 64px;
  align-items: center;
}
.programming-progress-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.programming-progress-copy small {
  font-size: 12px;
  font-weight: 800;
  color: inherit;
}
.programming-progress-copy em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  color: #667085;
}
.programming-progress-item.complete .programming-progress-copy em { color: #2f6f4f; }
.programming-progress-item.current .programming-progress-copy em { color: #315777; }
.programming-progress-item.locked {
  opacity: .62;
  background: #f7f8fa;
}
.programming-progress-item.stopped {
  border-color: #f4a7a7;
  background: #fff2f2;
  color: #9f2525;
}
.programming-progress-item.stopped b {
  background: #b42318;
  color: #fff;
}
.programming-progress-item.stopped .programming-progress-copy em { color: #9f2525; }

.programming-flow-stage-card {
  scroll-margin-top: 110px;
  border-left: 4px solid #173d68;
}
.programming-flow-stage-card.stage-review { border-left-color: #446b95; }
.programming-stage-complete-note,
.programming-more-info-callout,
.programming-stop-callout {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  display: grid;
  gap: 7px;
}
.programming-stage-complete-note {
  border: 1px solid #9fd5b5;
  background: #f0faf4;
  color: #1b5e3c;
  font-weight: 800;
}
.programming-more-info-callout {
  border: 1px solid #f2c66d;
  background: #fff8e6;
  color: #6c4d0f;
}
.programming-stop-callout {
  border: 1px solid #efb0b0;
  background: #fff1f1;
  color: #8f1d1d;
}
.programming-more-info-callout > span,
.programming-stop-callout > span { line-height: 1.55; }
.programming-review-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.programming-review-action-grid button { min-height: 48px; }
.programming-review-more-info {
  border-color: #d89c28;
  background: #fff8e6;
  color: #805b12;
}
.programming-review-more-info:hover { background: #fff1c7; }
.programming-review-notes-grid { margin-top: 6px; }
.status-badge.success { background: #ecfdf3; border-color: #86efac; color: #166534; }
.status-badge.warning { background: #fff8e6; border-color: #f2c66d; color: #805b12; }
.status-badge.danger { background: #fff1f2; border-color: #fecaca; color: #9f1239; }
.status-badge.pending { background: #eff6ff; border-color: #bfdbfe; color: #1e4f80; }

@media (max-width: 760px) {
  .programming-six-stage-progress,
  .programming-progress-strip.programming-six-stage-progress,
  .programming-progress-strip.saved-programming-progress.programming-six-stage-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .programming-six-stage-progress .programming-progress-item {
    min-width: 0;
    min-height: 58px;
  }
  .programming-review-action-grid { grid-template-columns: 1fr; }
  .programming-review-action-grid button { width: 100%; }
}


/* Programming work-order page layout — v19 current-stage-first */
.detail-grid.programming-layout-v19 {
  grid-template-columns: 1fr;
  gap: 16px;
}
.programming-layout-v19 > * { min-width: 0; }
.programming-order-overview {
  display: grid;
  grid-template-columns: 1.1fr 1.5fr 1fr;
  gap: 12px;
}
.programming-order-overview .detail-card { margin: 0; min-width: 0; }
.programming-order-overview .vehicle-detail { grid-column: auto; }
.programming-layout-v19 .programming-workflow-progress-detail {
  order: 0;
  border: 2px solid #d7e2ee;
  background: linear-gradient(180deg,#fbfdff,#f6f9fc);
}
.programming-current-stage-shell,
.programming-completed-stages-shell,
.programming-files-communication-shell,
.combined-adas-workflow-shell {
  border: 1px solid #d8e1eb;
  border-radius: 18px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 5px 18px rgba(18,58,99,.055);
}
.programming-current-stage-shell {
  border: 2px solid #1b4e7d;
  box-shadow: 0 8px 24px rgba(18,58,99,.10);
}
.programming-current-stage-heading,
.programming-section-shell-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.programming-current-stage-heading h3,
.programming-section-shell-heading h3 { margin: 3px 0 2px; }
.programming-current-stage-heading p,
.programming-section-shell-heading p { margin: 0; }
.programming-current-stage-body,
.programming-completed-stages-list,
.programming-files-communication-grid,
.combined-adas-workflow-body { display: grid; gap: 12px; }
.programming-files-communication-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.programming-files-communication-grid > .detail-card { min-width: 0; }

.programming-stage-details {
  border: 1px solid #d9e2ec;
  border-radius: 15px;
  overflow: hidden;
  background: #fff;
}
.programming-stage-details > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  background: #f7f9fc;
  border-bottom: 1px solid transparent;
}
.programming-stage-details > summary::-webkit-details-marker { display:none; }
.programming-stage-details > summary::after {
  content: '›';
  margin-left: auto;
  font-size: 25px;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform .15s ease;
  color: #536779;
}
.programming-stage-details[open] > summary { border-bottom-color:#dfe6ee; background:#f2f7fc; }
.programming-stage-details[open] > summary::after { transform: rotate(-90deg); }
.programming-stage-summary-number {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #173d68;
  color: #fff;
  font-weight: 850;
}
.completed-programming-stage-details .programming-stage-summary-number { background:#1e7a4d; }
.programming-stage-summary-copy { display:grid; gap:2px; min-width:0; }
.programming-stage-summary-copy strong { font-size: 15px; color:#17233b; }
.programming-stage-summary-copy small { color:#667085; font-size:12px; }
.programming-stage-details-body { padding: 13px; display:grid; gap:12px; }
.programming-stage-details-body > .detail-card { margin:0; }
.current-programming-stage-details { border-color:#7ba5ce; box-shadow: inset 4px 0 0 #173d68; }
.needs-update-programming-stage-details { border-color:#e5b34d; box-shadow: inset 4px 0 0 #d4961e; }
.programming-completed-stages-shell .programming-stage-details:not([open]) { background:#fbfcfd; }

/* Request information reads as one package instead of unrelated page sections. */
.programming-stage-1-details .programming-vehicle-state-detail,
.programming-stage-1-details .programming-work-order-detail,
.programming-stage-1-details .repair-requested-detail,
.programming-stage-1-details .shop-photo-detail,
.programming-stage-1-details .shop-document-detail,
.programming-stage-1-details .programming-request-review-detail {
  border-radius: 12px;
  box-shadow: none;
}
.programming-stage-1-details .programming-request-review-detail { order: 20; }

/* Compact Midwest bypasses on Programming work orders. */
.programming-layout-v19 .section-bypass-wrap {
  display: block;
  margin: 8px 0 10px;
  padding: 6px 9px;
  border-radius: 8px;
  background: #fffaf0;
  box-shadow: none;
}
.programming-layout-v19 .section-bypass-control {
  align-items: center;
  gap: 8px;
}
.programming-layout-v19 .section-bypass-control input {
  width: 17px;
  height: 17px;
  margin: 0;
}
.programming-layout-v19 .section-bypass-control > span {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.programming-layout-v19 .section-bypass-control strong { font-size: 12px; }
.programming-layout-v19 .section-bypass-control small { font-size: 10px; line-height:1.2; opacity:.82; }
.programming-layout-v19 .section-bypass-message { margin: 2px 0 0 25px; font-size:10px; }

/* Existing stage cards no longer need giant outer emphasis when nested in a stage shell. */
.programming-stage-details-body .programming-flow-stage-card,
.programming-stage-details-body .programming-technician-detail {
  border-left-width: 2px;
}
.programming-stage-details-body .panel-heading.compact { margin-bottom: 8px; }

/* The intake form itself now presents the same six-stage flow. */
.programming-intake-progress { margin-top: 12px; }
.programming-intake-progress .programming-progress-item.locked { opacity:.55; }

@media (max-width: 980px) {
  .programming-order-overview { grid-template-columns: 1fr 1fr; }
  .programming-order-overview .work-order-status-detail { grid-column:1/-1; }
  .programming-files-communication-grid { grid-template-columns:1fr; }
}
@media (max-width: 680px) {
  .programming-order-overview { grid-template-columns: 1fr; }
  .programming-order-overview .work-order-status-detail { grid-column:auto; }
  .programming-current-stage-shell,
  .programming-completed-stages-shell,
  .programming-files-communication-shell,
  .combined-adas-workflow-shell { padding:12px; border-radius:14px; }
  .programming-current-stage-heading,
  .programming-section-shell-heading { display:grid; gap:8px; }
  .programming-stage-details > summary { padding:12px; }
  .programming-stage-details-body { padding:9px; }
  .programming-layout-v19 .section-bypass-control > span { display:grid; gap:1px; }
}
.programming-future-stage-note {
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid #d5e1ed;
  border-radius: 12px;
  background: #f6f9fc;
  display: grid;
  gap: 4px;
}
.programming-future-stage-note strong { color:#173d68; }
.programming-future-stage-note span { color:#667085; line-height:1.45; font-size:13px; }


/* Programming progress completed-stage navigation — v21 */
.programming-progress-jump {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.programming-progress-jump:hover {
  border-color: #4f9b70;
  background: #e7f6ed;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(27,94,60,.12);
}
.programming-progress-jump:focus-visible {
  outline: 3px solid rgba(35,122,75,.25);
  outline-offset: 2px;
}
.programming-progress-jump .programming-progress-copy::after {
  content: 'View section';
  display: block;
  margin-top: 2px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #237a4b;
}
.programming-stage-details { scroll-margin-top: 120px; }
.programming-stage-jump-highlight {
  animation: programmingStageJumpPulse 1.5s ease-out;
}
@keyframes programmingStageJumpPulse {
  0% { box-shadow: 0 0 0 4px rgba(35,122,75,.28), inset 4px 0 0 #237a4b; }
  100% { box-shadow: 0 0 0 0 rgba(35,122,75,0); }
}


/* v22 - Midwest staff-only Programming photos and documents */
.programming-staff-only-files {
  border-color: #94a3b8;
  background: #f8fafc;
}
.programming-staff-files-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 14px 0 18px;
}
.programming-staff-file-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
}
.programming-staff-file-panel h5 {
  margin: 0 0 4px;
  font-size: 1rem;
  color: var(--navy-900, #0b1f3a);
}
.programming-staff-file-panel .detail-photos,
.programming-staff-file-panel .detail-document-list {
  margin-top: 12px;
}
@media (max-width: 900px) {
  .programming-staff-files-grid { grid-template-columns: 1fr; }
}