/* ============================================================
   SCI OPERATIONS — Apple-Inspired Design System
   Clean, confident, surgical. Inspired by macOS / apple.com.
   SF Pro Display → mapped to system-ui for native feel.
   Accent: #C00000 (SCI red)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Design Tokens ───────────────────────────────────────── */
:root {
  /* Brand */
  --red:          #C00000;
  --red-dark:     #960000;
  --red-light:    rgba(192,0,0,.10);
  --red-bg:       rgba(192,0,0,.07);

  /* Text */
  --text:         #1D1D1F;
  --text-2:       #3D3D3F;
  --muted:        #6E6E73;
  --faint:        #8E8E93;

  /* Surfaces */
  --bg:           #F5F5F7;
  --white:        #FFFFFF;
  --surface:      rgba(255,255,255,.72);
  --surface-2:    rgba(255,255,255,.56);
  --border:       rgba(0,0,0,.08);
  --border-strong:rgba(0,0,0,.14);

  /* Status */
  --green:        #1A7F4B;
  --green-bg:     rgba(26,127,75,.09);
  --blue:         #0071E3;
  --blue-bg:      rgba(0,113,227,.09);
  --amber:        #B45309;
  --amber-bg:     rgba(180,83,9,.09);

  /* Elevation */
  --shadow-xs:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:    0 4px 16px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
  --shadow-md:    0 12px 40px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.04);
  --shadow-lg:    0 24px 60px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.05);

  /* Shape */
  --r-xs: 6px;
  --r-sm: 10px;
  --r:    14px;
  --r-md: 18px;
  --r-lg: 22px;
  --r-xl: 28px;

  /* Layout */
  --page-pad: clamp(20px, 3vw, 48px);
  --card-pad: clamp(24px, 2.5vw, 40px);
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { min-height: 100%; overflow-x: hidden; }

body {
  min-height: 100vh;
  overflow-x: hidden;
  font-family: -apple-system, "SF Pro Text", "Inter", BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(192,0,0,.055) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(0,0,0,.03) 0%, transparent 40%),
    linear-gradient(180deg, #FAFAFA 0%, #F2F2F5 100%);
  background-attachment: fixed;
}

button, input, select, textarea {
  font: inherit;
  max-width: 100%;
}
button { appearance: none; cursor: pointer; }
p { margin: 0; }

/* ── App Shell ───────────────────────────────────────────── */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Header ──────────────────────────────────────────────── */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  height: 60px;
  padding: 0 var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

.sci-logo {
  height: 52px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

/* Nav */
.app-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.app-nav a {
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: background .2s, color .2s;
}

.app-nav a:hover {
  color: var(--text);
  background: rgba(0,0,0,.05);
}

.app-nav a.active {
  color: var(--text);
  font-weight: 600;
  background: rgba(0,0,0,.06);
}

/* Signed-in indicator */
.signed-in {
  display: none;
  min-width: 120px;
  text-align: right;
}

.signed-in strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.signed-in span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 1px;
}


.hidden,
[hidden] {
  display: none !important;
}

/* ── Role Bar ─────────────────────────────────────────────── */
.role-bar {
  display: none;
  position: sticky;
  top: 60px;
  z-index: 90;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px var(--page-pad);
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}

.role-bar.active { display: flex; }

.role-bar > span {
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-right: 4px;
}

.role-btn {
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.01em;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
}

.role-btn:hover {
  background: rgba(0,0,0,.05);
  color: var(--text);
  border-color: var(--border-strong);
}

.role-btn.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(192,0,0,.28);
}

#roleBarSignOutBtn { margin-left: auto; }

/* ── Main ────────────────────────────────────────────────── */
main {
  flex: 1;
  position: relative;
}

/* ── Screens ─────────────────────────────────────────────── */
.screen {
  display: none;
  padding: var(--page-pad);
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

.screen.active { display: block; }

/* ── Footer ──────────────────────────────────────────────── */
.app-footer {
  padding: 14px var(--page-pad);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  color: var(--faint);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.005em;
}

/* ── Typography ──────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: -apple-system, "SF Pro Display", "Inter", BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text);
}

h1 { font-size: clamp(28px, 4vw, 48px); font-weight: 700; }
h2 { font-size: clamp(18px, 2vw, 24px); }
h3 { font-size: 16px; font-weight: 600; }

/* ── Welcome / Sign-in Screen ────────────────────────────── */
.welcome {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 440px);
  gap: 48px;
  align-items: start;
  padding-top: 32px;
}

.intro p {
  max-width: 520px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -.01em;
}

.preview-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 36px;
}

.mini-card {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow .2s, transform .2s;
}

.mini-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.mini-card strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}

.mini-card span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* Sign-in Panel */
.panel {
  background: var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: visible;
}

.recent-panel {
  background: var(--surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: visible;
}

.panel > h2,
.panel > .section-heading,
.recent-panel > h2,
.panel > .panel-head {
  display: flex;
  align-items: center;
  padding: 20px var(--card-pad);
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  min-height: 0;
  line-height: 1.3;
  overflow: visible;
  background: transparent;
}

.panel > p,
.panel > .form {
  padding: var(--card-pad);
}

.panel > .status-line,
.panel > .role-note,
.panel > .job-log-controls,
.panel > .job-log-search-bar,
.panel > .job-log-quick-picks,
.panel > .subsection,
.panel > .table-wrap,
.panel > .pdf-toolbar,
.panel > .pdf-preview,
.panel > .workload-frame-wrap,
.panel > .task-list {
  margin: 24px var(--card-pad);
}

.panel > p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Form Elements ───────────────────────────────────────── */
.form,
.task-list,
.form-map,
.badge-scan,
.capability-tool {
  display: grid;
  gap: 16px;
}

.panel > .capability-tool { padding: var(--card-pad); }
.capability-tool > .section-heading { align-items: flex-start; gap: 14px; }
.capability-tool > .section-heading .btn { flex: 0 0 auto; }

label {
  display: grid;
  gap: 7px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
  overflow: visible;
  white-space: normal;
  line-height: 1.4;
}

.field-help {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

.access-options legend,
.section-heading.compact,
.review-grid span,
.pdf-preview span,
.signature-box > span,
.admin-section-label {
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .065em;
  text-transform: uppercase;
  overflow: visible;
  white-space: normal;
  line-height: 1.4;
  padding: 3px 3px 0;
}

input, select, textarea {
  width: 100%;
  min-height: 44px;
  height: auto;
  padding: 11px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  outline: none;
  background: rgba(255,255,255,.92);
  color: var(--text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  transition: border-color .18s, box-shadow .18s;
}

textarea {
  min-height: 96px;
  resize: vertical;
  text-transform: none;
}

textarea.large-textarea { min-height: 140px; }

input:focus, select:focus, textarea:focus {
  border-color: rgba(192,0,0,.5);
  box-shadow: 0 0 0 4px rgba(192,0,0,.10);
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  height: auto;
  padding: 9px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: rgba(255,255,255,.86);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  word-break: normal;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s, transform .15s;
}

.btn:hover {
  background: rgba(255,255,255,.96);
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
}

.btn:active { transform: translateY(0); }

.btn.primary {
  background: linear-gradient(180deg, #D40000 0%, #A80000 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 16px rgba(192,0,0,.30);
}

.btn.primary:hover {
  background: linear-gradient(180deg, #E00000 0%, #B40000 100%);
  box-shadow: 0 6px 20px rgba(192,0,0,.38);
  color: #fff;
}

.btn.sm {
  min-height: 30px;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: var(--r-sm);
}

.btn.danger {
  border-color: rgba(220,53,69,.25);
  background: rgba(255,245,245,.9);
  color: #B42318;
}

.btn.danger:hover {
  border-color: #B42318;
  background: rgba(255,240,240,.95);
  color: #B42318;
}

.wide-button { width: 100%; }

/* ── Status Lines ────────────────────────────────────────── */
.role-note,
.status-line {
  padding: 13px 16px;
  margin: 8px 0;
  border: 1px solid rgba(192,0,0,.18);
  border-radius: var(--r);
  background: rgba(192,0,0,.06);
  color: #8B0000;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  overflow: visible;
}

.status-line.success {
  background: var(--green-bg);
  border-color: rgba(26,127,75,.18);
  color: var(--green);
}

.status-line.info {
  background: var(--blue-bg);
  border-color: rgba(0,113,227,.18);
  color: #0860C7;
}

.status-line.warning {
  background: var(--amber-bg);
  border-color: rgba(180,83,9,.18);
  color: var(--amber);
}

/* ── Pills & Badges ──────────────────────────────────────── */
.pill,
.job-log-priority-badge,
.job-log-status-pill,
.fit {
  display: inline-block;
  white-space: nowrap;
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--red-bg);
  color: var(--red);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.4;
  text-transform: uppercase;
}

.pill.green, .job-log-status-pill, .fit.ok {
  background: var(--green-bg);
  color: var(--green);
}

.pill.blue, .fit.warn {
  background: var(--blue-bg);
  color: var(--blue);
}

.pill.orange, .fit.bad {
  background: var(--amber-bg);
  color: var(--amber);
}

.pill.gray {
  background: rgba(0,0,0,.06);
  color: var(--muted);
}

/* ── Access Options (Fieldsets) ──────────────────────────── */
.access-options {
  display: grid;
  gap: 10px 18px;
  margin: 0;
  padding: 20px 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: rgba(255,255,255,.7);
  position: relative;
  margin-top: 8px;
  overflow: visible;
}

.access-options legend {
  float: none;
  display: inline-block;
  padding: 0 8px;
  margin: 0 0 8px;
  background: transparent;
  border: 0;
}

.access-options label,
.inline-options label,
.internal-email-options label,
.option-card-grid label,
.checkbox-line {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 28px !important;
  padding: 4px 0 !important;
  line-height: 1.35 !important;
  letter-spacing: .03em !important;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
}

.access-options input[type="checkbox"],
.access-options input[type="radio"] {
  flex: 0 0 16px;
  width: 16px;
  min-height: 16px !important;
  height: 16px;
  padding: 0 !important;
  accent-color: var(--red);
}

/* ── Workspace ───────────────────────────────────────────── */
.workspace {
  display: grid;
  gap: 32px;
}

.workspace.tool-active { gap: 24px; }

.workspace.tool-active .work-area {
  order: 2;
  grid-template-columns: 1fr;
}

.workspace.tool-active .recent-panel { display: none; }
.workspace.tool-active .tools-grid { order: 3; }

.workspace.sidebar-layout {
  grid-template-columns: 264px minmax(0, 1fr);
  align-items: start;
}

.workspace.sidebar-layout .work-top { grid-column: 1 / -1; }

.workspace.sidebar-layout .tools-grid {
  position: sticky;
  top: 80px;
  order: initial;
  display: block;
  min-width: 0;
}

.workspace.sidebar-layout .work-area {
  order: initial;
  display: block;
  min-width: 0;
}

.workspace.sidebar-layout .recent-panel { display: none; }

/* ── Sidebar Navigation ──────────────────────────────────── */
.workflow-sidebar {
  display: grid;
  gap: 24px;
  padding: 18px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.workflow-sidebar-section { display: grid; gap: 6px; }

.workflow-sidebar-heading {
  color: var(--faint);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 10px;
  margin-bottom: 2px;
}

.workflow-sidebar-list { display: grid; gap: 3px; }

.workflow-sidebar-item {
  width: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background .18s, border-color .18s, box-shadow .18s;
}

.workflow-sidebar-item:hover,
.workflow-sidebar-item:focus-visible {
  background: rgba(255,255,255,.88);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
  outline: none;
}

.workflow-sidebar-item.is-active {
  background: rgba(192,0,0,.07);
  border-color: rgba(192,0,0,.15);
}

.workflow-sidebar-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.05);
  border-radius: var(--r-sm);
  color: var(--muted);
  flex-shrink: 0;
}

.workflow-sidebar-item.accent .workflow-sidebar-icon,
.workflow-sidebar-item.is-active .workflow-sidebar-icon {
  background: var(--red-bg);
  color: var(--red);
}

.workflow-sidebar-icon svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workflow-sidebar-copy { min-width: 0; }

.workflow-sidebar-label {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workflow-sidebar-description {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.workflow-sidebar-item:hover .workflow-sidebar-label,
.workflow-sidebar-item.is-active .workflow-sidebar-label {
  color: var(--red);
}

.workflow-sidebar-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--red-bg);
  color: var(--red);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
}

/* ── Work Top Header ─────────────────────────────────────── */
.work-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0;
}

.work-top h1 {
  font-size: clamp(22px, 3vw, 38px);
  letter-spacing: -.03em;
}

.work-top p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
}

.work-top > .btn { align-self: end; }

.role-switcher { width: 240px; }

/* ── Tools Grid ──────────────────────────────────────────── */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.tool-card {
  min-height: 120px;
  display: grid;
  align-content: space-between;
  gap: 16px;
  padding: 24px;
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: box-shadow .2s, transform .2s, background .2s;
}

.tool-card:hover {
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.tool-card h2 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.tool-card p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.tool-card .btn { justify-self: start; min-width: 80px; }

.tool-card.job-card {
  min-height: 172px;
  align-content: start;
}

.tools-grid:has(.cnc-schedule-card) { grid-template-columns: 1fr; }

/* ── CNC Jobs ────────────────────────────────────────────── */
.cnc-jobs-list { display: grid; gap: 14px; margin-top: 16px; }
.cnc-schedule-card { min-height: auto; cursor: pointer; }

.cnc-card-top,
.section-heading,
.approval-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cnc-card-top strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.job-meta {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

.job-meta strong {
  display: block;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.005em;
}

.operation-select, .cnc-age, .sales-form, .nor-print-copy, .packing-print-copy { margin-top: 12px; }
.cnc-age { text-align: center; font-size: 13px; color: var(--muted); }
.cnc-job-action { margin-top: 12px; }

.cnc-selected-job,
.cnc-op-card,
.cnc-photo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.cnc-selected-job, .cnc-ops-list, .cnc-photo-list { margin-top: 12px; }

.cnc-op-large { align-items: stretch; padding: 16px 18px; }
.cnc-op-large .btn { min-width: 148px; }
.cnc-selected-job { background: rgba(0,0,0,.03); }
.cnc-selected-job, .cnc-op-card div { min-width: 0; }

.cnc-selected-job strong,
.cnc-op-card strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.cnc-selected-job span,
.cnc-op-card span,
.cnc-photo-row span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.cnc-ops-list, .cnc-photo-list { display: grid; gap: 8px; }

.cnc-time-entry-panel {
  padding: 18px;
  background: var(--red-bg);
  border: 1.5px solid rgba(192,0,0,.25);
  border-radius: var(--r-md);
}

.cnc-time-entry-panel label { color: var(--text); }

.cnc-time-entry-panel input {
  min-height: 48px;
  border-color: rgba(192,0,0,.4);
  background: rgba(255,255,255,.92);
  font-size: 16px;
  font-weight: 500;
}

.cnc-time-summary-row { align-items: flex-start; }
.cnc-time-summary-row .btn { flex: 0 0 auto; }

.cnc-photo-row img {
  width: 54px;
  height: 40px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
}

/* ── Work Area ───────────────────────────────────────────── */
.work-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.traveler-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: 14px;
}

.traveler-layout textarea { min-height: 180px; }
.distribution-product-status { grid-column: 1 / -1; }

.gasket-drawing {
  min-height: 360px;
  display: grid;
  place-items: center;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.6);
  overflow: hidden;
}

.gasket-drawing svg {
  width: min(100%, 520px);
  height: min(52vw, 320px);
  color: var(--text);
  overflow: visible;
}

/* ── Stuffing Box Calculator ─────────────────────────────── */
.stuffing-pressure-panel { gap: 14px; }

.stuffing-example-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.stuffing-example-card > div,
.stuffing-result-card {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: rgba(255,255,255,.8);
  padding: 14px;
}

.stuffing-example-card span,
.stuffing-result-card span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
}

.stuffing-example-card strong {
  display: block;
  margin-top: 4px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}

.stuffing-result-card {
  display: grid;
  gap: 6px;
  background: var(--red-bg);
}

.stuffing-result-card strong {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--red);
}

.stuffing-result-card p { margin: 0; color: var(--muted); }

/* ── Territory Map ───────────────────────────────────────── */
.territory-map-panel { gap: 14px; }

.territory-map-image {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.8);
}

/* ── Time Clock ──────────────────────────────────────────── */
.badge-scan { gap: 14px; }
.badge-scan input { font-size: 18px; font-weight: 500; }

.time {
  font-family: -apple-system, "SF Pro Display", BlinkMacSystemFont, sans-serif;
  font-size: 52px;
  font-weight: 200;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--text);
}

.stat {
  padding: 20px 24px;
  background: rgba(255,255,255,.80);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: box-shadow .2s;
}

.stat:hover { box-shadow: var(--shadow-xs); }

.stat .label {
  display: block;
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.stat .value {
  display: block;
  color: var(--text);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
}

.time-hero-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  background: rgba(255,255,255,.80);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.time-hero-action { text-align: center; flex: 0 0 auto; }
.time-hero-card .btn { min-width: 130px; }

/* ── Sections & Forms ────────────────────────────────────── */
.subsection {
  display: grid;
  gap: 18px;
  padding: var(--card-pad);
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.5);
  overflow: visible;
}

.form-section {
  display: grid;
  gap: 20px;
  padding: var(--card-pad);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: visible;
}

.form-section h3,
.subsection h3,
.form h3 {
  display: block;
  width: 100%;
  min-height: 24px;
  margin: 2px 0 8px;
  padding: 6px 0 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
  overflow: visible;
  white-space: normal;
  border-bottom: 1px solid var(--border);
}

.time-grid,
.badge-row,
.two-buttons,
.approval-actions,
.pdf-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.review-grid, .capability-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.inline-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inline-options legend { grid-column: 1 / -1; }

.internal-email-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.internal-email-options legend,
.internal-email-extra { grid-column: 1 / -1; }

.internal-email-options label span {
  color: var(--muted);
  font-size: 12px;
}

.internal-email-extra {
  display: grid !important;
  align-items: stretch !important;
  gap: 6px !important;
}

/* ── Task Rows ───────────────────────────────────────────── */
.task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255,255,255,.68);
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: background .18s;
}

.task-row:hover { background: rgba(255,255,255,.88); }

.task-row strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.task-row span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

/* ── Packing Lines ───────────────────────────────────────── */
.packing-lines { display: grid; gap: 8px; }

.packing-line {
  display: grid;
  grid-template-columns: 34px 120px minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.packing-line > span {
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: rgba(0,0,0,.04);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.distribution-items { display: grid; gap: 10px; }

.distribution-item-row {
  display: grid;
  grid-template-columns: 34px minmax(140px, .9fr) 90px minmax(220px, 1.6fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.distribution-item-row > span {
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: rgba(0,0,0,.04);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

/* ── Tables ──────────────────────────────────────────────── */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
  border-radius: var(--r-md);
  overflow: hidden;
}

.packing-slip-table,
.capability-table,
.job-log-table,
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.packing-slip-table th, .packing-slip-table td,
.capability-table th, .capability-table td,
.job-log-table th, .job-log-table td,
.data-table th, .data-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
  line-height: 1.45;
}

.packing-slip-table th,
.capability-table th,
.job-log-table th,
.data-table th {
  background: rgba(0,0,0,.03);
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.packing-slip-table td,
.capability-table td,
.job-log-table td,
.data-table td {
  color: var(--text);
  font-weight: 400;
  overflow-wrap: anywhere;
}

.packing-slip-table tr:hover,
.capability-table tr:hover,
.job-log-table tr:hover,
.data-table tbody tr:hover td {
  background: rgba(192,0,0,.04);
}

.packing-slip-table tr:last-child td,
.capability-table tr:last-child td,
.job-log-table tr:last-child td,
.data-table tr:last-child td { border-bottom: 0; }

.packing-slip-table th:first-child,
.packing-slip-table td:first-child { width: 90px; }

/* ── Signature ───────────────────────────────────────────── */
.signature-box {
  display: grid;
  gap: 8px;
  position: relative;
  isolation: isolate;
}

.signature-pad {
  width: 100%;
  min-height: 118px;
  height: 118px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.95);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: crosshair;
  display: block;
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

.signature-pad-compact { min-height: 74px; height: 74px; }

body.signature-drawing,
body.signature-drawing * { overscroll-behavior: contain; }

.signature-pad:focus, .signature-pad.is-signing {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(192,0,0,.10);
  outline: none;
}

#packingSignaturePreview, #packInlineSignaturePreview,
#norSignaturePreview, #norInlineSignaturePreview,
#coatInlineSignaturePreview {
  display: grid;
  place-items: start;
  width: 100%;
  min-height: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.signature-image { max-width: 100%; max-height: 104px; }
.signature-empty { font-size: 13px; color: var(--muted); }

#norInlineSignaturePreview,
#coatInlineSignaturePreview,
#packInlineSignaturePreview { min-height: 56px; height: 56px; }

/* ── Approval Cards ──────────────────────────────────────── */
.approval-card {
  display: grid;
  gap: 16px;
  padding: 22px;
  background: rgba(255,255,255,.80);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  transition: box-shadow .2s;
  overflow: visible;
}

.approval-card:hover { box-shadow: var(--shadow-sm); }

.approval-card header { padding: 0; border: 0; background: transparent; }

.approval-card h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.approval-card p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.pdf-toolbar .status-line,
.approval-actions .view-timeoff-pdf { grid-column: 1 / -1; }

/* ── Section Headings ────────────────────────────────────── */
.section-heading p { margin-top: 6px; line-height: 1.55; }
.section-heading.compact { align-items: center; }

/* ── Form Maps ───────────────────────────────────────────── */
.form-map ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.form-map li { margin: 6px 0; }

/* ── Capability Tool ─────────────────────────────────────── */
.capability-tabs {
  display: flex;
  gap: 6px;
  width: fit-content;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  box-shadow: var(--shadow-xs);
}

.capability-tabs .btn {
  min-width: 120px;
  border-radius: 999px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.capability-tabs .btn.primary,
.capability-tabs .btn.active {
  background: var(--red);
  color: #fff;
  box-shadow: 0 6px 16px rgba(192,0,0,.25);
}

.capability-screen { display: none; }
.capability-screen.active { display: block; }

.capability-layout {
  display: grid;
  grid-template-columns: minmax(360px, .82fr) minmax(560px, 1.18fr);
  gap: 20px;
  align-items: start;
}

.capability-inputs,
.capability-results,
.capability-route {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow-sm);
  overflow: visible;
}

.capability-inputs .form,
.capability-results { gap: 14px; }

.capability-image {
  min-height: 190px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: rgba(0,0,0,.03);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.capability-image img { display: none; max-width: 100%; max-height: 320px; }

.capability-checks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  padding: 14px;
  border-radius: var(--r-md);
  background: rgba(0,0,0,.03);
}

.capability-checks label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  line-height: 1.3;
  overflow-wrap: anywhere;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.7);
  border: 1px solid var(--border);
}

.capability-checks input { margin-top: 1px; }

.capability-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 14px;
  align-items: start;
}

.capability-results h3,
.capability-route h3 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
}

.capability-brain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.capability-brain-card {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow-xs);
}

.capability-brain-card.span-2 { grid-column: 1 / -1; }

.capability-brain-card h3,
.capability-results h3,
.capability-route h3 {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.capability-brain-list { display: grid; gap: 8px; }

.capability-brain-list > div,
.capability-step {
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: rgba(255,255,255,.86);
  color: var(--text-2);
  line-height: 1.4;
  box-shadow: var(--shadow-xs);
}

.capability-step {
  padding: 13px 16px;
  border-left: 3px solid var(--red);
  color: var(--muted);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.capability-step + .capability-step { border-top: 1px solid var(--border); }

.capability-ocr {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: rgba(0,0,0,.03);
}

.capability-result-pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.capability-result-pill.good { background: rgba(26,127,75,.10); color: var(--green); }
.capability-result-pill.possible { background: rgba(180,83,9,.10); color: var(--amber); }
.capability-result-pill.review { background: var(--red-bg); color: var(--red); }

.capability-tool input,
.capability-tool select,
.capability-tool textarea {
  border-radius: var(--r) !important;
}

.capability-small-note {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.capability-machine-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow-xs);
  margin: 12px 0;
}

/* ── Job Log Controls ────────────────────────────────────── */
.job-log-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.job-log-search-bar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.job-log-quick-picks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: rgba(0,0,0,.03);
}

.job-log-quick-picks span {
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.job-log-quick-picks .btn {
  width: auto;
  min-height: 30px;
  padding: 5px 12px;
}

.job-log-table { min-width: 980px; }

.job-log-table td strong {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.job-log-priority-badge,
.job-log-status-pill { margin-bottom: 4px; }

.job-log-actions { display: grid; gap: 8px; }
.job-log-table td:last-child { width: 150px; }

/* ── Admin Job Log Table ─────────────────────────────────── */
.admin-job-log-table { min-width: 910px; }

.admin-job-log-table textarea {
  min-height: 56px;
  font-size: 13px;
}

.admin-job-log-table .job-log-select-cell { width: 140px; }

.admin-job-log-table input[type="checkbox"] {
  width: 16px;
  min-height: 16px !important;
  height: 16px;
  padding: 0 !important;
}

.admin-job-log-table td:last-child { width: 110px; }

/* ── Manual Override Panel ───────────────────────────────── */
.manual-override-panel {
  padding: 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.7);
}

/* ── PDF Preview ─────────────────────────────────────────── */
.pdf-preview {
  background: rgba(255,255,255,.90);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--card-pad);
  overflow: visible;
}

.pdf-preview header strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.pdf-preview footer { color: var(--muted); font-size: 13px; }
.pdf-preview p { color: var(--muted); font-size: 14px; }

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

.pdf-approvals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pdf-note {
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: rgba(0,0,0,.03);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ── Option Card Grid ────────────────────────────────────── */
.option-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  padding: 20px 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: rgba(255,255,255,.5);
  position: relative;
  margin-top: 8px;
  overflow: visible;
}

.option-card-grid legend { grid-column: 1 / -1; }

.option-card-grid label {
  min-height: 44px;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: rgba(255,255,255,.72);
  overflow-wrap: anywhere;
  transition: background .18s, border-color .18s;
}

.option-card-grid label:hover {
  background: rgba(255,255,255,.94);
  border-color: var(--border-strong);
}

.compact-option-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

.service-form .form-section,
.worksheet-print { background: rgba(255,255,255,.9); }

.service-table { min-width: 680px; }
.service-table input { width: 100%; min-width: 120px; }

.pm-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.pm-check-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: rgba(255,255,255,.72);
}

.pm-print-section small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

/* ── Capability Mode ─────────────────────────────────────── */
.work-area.capability-mode { grid-template-columns: 1fr; }
.work-area.capability-mode .recent-panel { display: none; }
.recent-panel { display: block; }

/* ── Spiral Form ─────────────────────────────────────────── */
.spiral-form .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px 0;
}

/* ── CNC Time Entry Panel (alt) ──────────────────────────── */
.cnc-time-entry-panel { /* duplicate, already defined above */ }

.cnc-time-table select,
.cnc-time-table input { min-width: 120px; }

.cnc-time-table .cnc-row-notes { min-width: 180px; }

.cnc-time-totals > div {
  background: rgba(0,0,0,.04);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
}

/* ── Admin Command List ──────────────────────────────────── */
.admin-command-section { display: grid; gap: 8px; }

.admin-command-section-label {
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.admin-command-list { display: grid; gap: 8px; }

.tool-command {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: rgba(255,255,255,.80);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .18s;
}

.tool-command:hover {
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.tool-command-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.05);
  border-radius: var(--r-sm);
  color: var(--muted);
}

.tool-command.accent .tool-command-icon {
  background: var(--red-bg);
  color: var(--red);
}

.tool-command-icon svg,
.tool-command-arrow svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool-command-copy { min-width: 0; }

.tool-command-copy strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: color .18s;
}

.tool-command:hover .tool-command-copy strong { color: var(--red); }

.tool-command-copy span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.tool-command-badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--red-bg);
  color: var(--red);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tool-command-spacer { min-width: 1px; }

.tool-command-arrow {
  color: var(--muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .18s, transform .18s, color .18s;
}

.tool-command:hover .tool-command-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--red);
}

/* ── Admin Access Shell ──────────────────────────────────── */
.admin-access-shell {
  display: grid;
  grid-template-columns: minmax(300px, .95fr) minmax(420px, 1.05fr);
  min-height: 520px;
  align-items: start;
}

.admin-access-list,
.admin-access-editor {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: var(--card-pad);
  min-width: 0;
  overflow: visible;
}

.admin-access-list {
  border-right: 1px solid var(--border);
  background: rgba(255,255,255,.6);
}

.employee-list {
  max-height: 560px;
  overflow: auto;
  padding-right: 4px;
}

body[data-workspace-role="admin"] #employeeList .approval-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 14px;
  padding: 18px;
}

body[data-workspace-role="admin"] #employeeList .approval-card header { grid-column: 1 / -1; }
body[data-workspace-role="admin"] #employeeList .approval-card h3 { font-size: 16px; }

body[data-workspace-role="admin"] #employeeList .approval-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

body[data-workspace-role="admin"] #employeeList .approval-card .edit-employee {
  grid-column: 1 / -1;
  min-height: 32px;
}

.admin-employee-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0 !important;
}

.admin-form-wide,
.admin-employee-form .access-options { grid-column: 1 / -1; }

.admin-save-button {
  justify-self: start;
  align-self: end;
  width: auto;
  min-width: 160px;
  max-width: 220px;
}

body[data-workspace-role="admin"] .admin-employee-form .access-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-workspace-role="admin"] .admin-employee-form .access-options legend {
  grid-column: 1 / -1;
}

/* ── Admin Workspace Overrides ───────────────────────────── */
body[data-workspace-role="admin"] .screen { padding-top: var(--page-pad); }
body[data-workspace-role="admin"] .workspace { gap: 32px; }
body[data-workspace-role="admin"] .work-top { align-items: flex-start; margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
body[data-workspace-role="admin"] .work-top h1 { font-size: clamp(22px, 3vw, 38px); }
body[data-workspace-role="admin"] .work-top p { max-width: 620px; }
body[data-workspace-role="admin"] .role-switcher { width: 260px; }
body[data-workspace-role="admin"] .tools-grid { grid-template-columns: 1fr; gap: 16px; }

/* ── Misc Components ─────────────────────────────────────── */
.red { color: var(--red); }

.is-live .demo-only { display: none !important; }

.sr-only {
  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;
}

.workload-frame-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  min-height: 480px;
}

/* ── Capability Mode Styles ──────────────────────────────── */
.work-area.capability-mode {
  background: transparent;
}

.panel > .capability-tool {
  padding: var(--card-pad);
  border: 0;
  background: transparent;
}

/* ── Badge / Employee ID ─────────────────────────────────── */
.badge-pin-area { display: grid; gap: 14px; }

/* ── Fieldsets ───────────────────────────────────────────── */
fieldset,
.inline-options,
.internal-email-options {
  position: relative;
  margin-top: 8px;
  padding: 22px 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: rgba(255,255,255,.5);
  overflow: visible;
}

fieldset legend,
.inline-options legend,
.internal-email-options legend {
  float: none;
  display: inline-block;
  width: auto;
  max-width: calc(100% - 16px);
  padding: 0 8px;
  margin: 0 0 8px;
  background: transparent;
  border: 0;
}

/* ── CNC Review ──────────────────────────────────────────── */
.cnc-review-sheet, .cnc-time-sheet {
  display: grid;
  gap: 14px;
}

/* ── Workload Frame ──────────────────────────────────────── */
.workload-frame-wrap { height: calc(100vh - 220px); }

/* ── Responsive Breakpoints ──────────────────────────────── */
@media (max-width: 980px) {
  .workspace.sidebar-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
  }

  .workspace.sidebar-layout .tools-grid {
    position: sticky;
    top: 84px;
  }

  .workflow-sidebar-list { grid-template-columns: 1fr; }
  .traveler-layout { grid-template-columns: 1fr; }

  body[data-workspace-role="admin"] .tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-access-shell { grid-template-columns: 1fr; }

  .admin-access-list {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .capability-layout,
  .capability-brain-grid { grid-template-columns: 1fr; }

  .capability-tabs { width: 100%; }
  .capability-tabs .btn { flex: 1; }

  .admin-access-shell,
  .admin-employee-form,
  .time-grid,
  .badge-row,
  .review-grid,
  .capability-three { grid-template-columns: 1fr !important; }

  .panel > .form, .panel > .subsection, .panel > .sales-form, .panel > .task-list,
  .panel > .status-line, .panel > .role-note, .panel > .job-log-controls,
  .panel > .job-log-search-bar, .panel > .job-log-quick-picks,
  .panel > .table-wrap, .panel > .pdf-toolbar, .panel > .pdf-preview,
  .panel > .workload-frame-wrap, .panel > .capability-tool {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
}

@media (max-width: 880px) {
  .header-inner { min-height: 60px; gap: 8px 12px; }
  .header-inner > svg { max-width: 70vw; height: 48px !important; }
  .signed-in { min-width: auto; }

  .welcome,
  .work-top,
  .workflow-sidebar-list,
  .capability-layout,
  .capability-review,
  .job-log-controls { grid-template-columns: 1fr; }

  .job-log-search-bar { grid-template-columns: 1fr; }

  .work-top { display: grid; }
  .work-top > .btn, .role-switcher { width: 100%; }

  .time-hero-card { align-items: stretch; flex-direction: column; }
  .time-hero-action { justify-items: start; }

  .job-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .app-shell, .screen, .workspace, .work-area, .panel,
  .form-section, .sales-form, .traveler-layout,
  .capability-tool, .pdf-preview {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  input, select, textarea, button { min-width: 0; }

  .approval-actions, .two-buttons,
  .capability-tabs, .spiral-form .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .workflow-sidebar-list, .capability-tabs,
  .spiral-form .tabs, .role-bar {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .workflow-sidebar-item, .capability-tabs .btn,
  .spiral-form .tabs .btn, .role-btn { scroll-snap-align: start; }

  body { overflow-x: hidden; }

  .header-inner {
    height: auto;
    min-height: 60px;
    flex-wrap: wrap;
    padding: 10px 16px;
  }

  .sci-logo { max-width: 58vw; height: auto; }

  .app-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .app-nav a { flex: 0 0 auto; padding: 6px 12px; }

  .signed-in { max-width: 34vw; font-size: 11px; }

  .role-bar { position: static; top: auto; padding: 8px 16px; overflow-x: auto; }
  .role-bar span, .role-btn, #roleBarSignOutBtn { flex: 0 0 auto; }
  #roleBarSignOutBtn { margin-left: 0; }

  .screen { padding: 20px 16px 28px; }

  .workspace.sidebar-layout { grid-template-columns: 1fr; gap: 14px; }
  .workspace.sidebar-layout .tools-grid {
    position: relative;
    top: auto;
    z-index: 5;
    max-height: none;
    overflow: visible;
  }

  .workflow-sidebar {
    display: flex;
    max-width: 100%;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    padding: 10px;
    scroll-snap-type: x proximity;
  }

  .workflow-sidebar-section {
    min-width: max-content;
    display: flex;
    align-items: stretch;
    gap: 8px;
  }

  .workflow-sidebar-list {
    display: flex;
    grid-template-columns: none;
    gap: 6px;
  }

  .workflow-sidebar-heading {
    font-size: 9px;
    letter-spacing: .06em;
    align-self: center;
    max-width: 56px;
    line-height: 1.1;
  }

  .workflow-sidebar-item {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 6px;
    width: auto;
    min-width: 108px;
    max-width: 140px;
    min-height: 46px;
    padding: 8px;
    scroll-snap-align: start;
  }

  .workflow-sidebar-icon { width: 28px; height: 28px; }
  .workflow-sidebar-icon svg { width: 14px; height: 14px; }

  .workflow-sidebar-label {
    font-size: 11px;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .workflow-sidebar-description, .workflow-sidebar-badge { display: none; }

  .workspace.sidebar-layout .work-area,
  .panel, .form-section, .subsection, .form, .sales-form, label { min-width: 0; }

  input, select, textarea { max-width: 100%; }

  .tool-command { grid-template-columns: 36px minmax(0, 1fr) 20px; }
  .tool-command-badge, .tool-command-spacer { display: none; }

  .admin-employee-form,
  body[data-workspace-role="admin"] .admin-employee-form .access-options { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .panel > .status-line, .panel > .role-note, .panel > .job-log-controls,
  .panel > .job-log-search-bar, .panel > .job-log-quick-picks,
  .panel > .subsection, .panel > .table-wrap, .panel > .pdf-toolbar,
  .panel > .pdf-preview, .panel > .workload-frame-wrap, .panel > .task-list {
    margin: 16px !important;
  }

  .panel > p, .panel > .form, .panel > .capability-tool { padding: 16px; }

  .app-footer, .preview-strip, .two-buttons, .time-grid, .review-grid,
  .badge-row, .inline-options, .internal-email-options, .packing-line,
  .distribution-item-row, .capability-three, .capability-checks,
  .stuffing-example-card, .approval-actions, .pdf-toolbar,
  .pdf-grid, .pdf-preview header, .pdf-approvals { grid-template-columns: 1fr; }

  .app-footer { display: grid; justify-items: start; }

  .section-heading, .capability-tabs, .task-row { flex-direction: column; align-items: stretch; }

  .form-section, .subsection, .pdf-preview { padding: 16px; }

  .access-options, .internal-email-options, .inline-options { min-width: 0; }

  .access-options label, .internal-email-options label, .inline-options label,
  .signature-box, .pdf-note, .pdf-grid div, .pdf-approvals div {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .job-meta { grid-template-columns: 1fr; }

  .cnc-selected-job, .cnc-op-card, .cnc-photo-row, .cnc-time-summary-row {
    align-items: stretch;
    flex-direction: column;
  }

  .cnc-op-large .btn, .cnc-job-action, .tool-card .btn, .btn { width: 100%; }

  .table-wrap { margin-left: -1px; margin-right: -1px; }

  .packing-slip-table, .job-log-table, .data-table, .service-table { min-width: 680px; }

  .capability-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    font-size: 12px;
  }

  .capability-table th, .capability-table td {
    padding: 8px;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .capability-table .pill { display: inline-block; max-width: 100%; white-space: normal; line-height: 1.2; }
  .capability-table th:nth-child(1), .capability-table td:nth-child(1) { width: 34%; }
  .capability-table th:nth-child(2), .capability-table td:nth-child(2) { width: 28%; }
  .capability-table th:nth-child(3), .capability-table td:nth-child(3) { width: 38%; }

  .workload-frame-wrap { height: calc(100vh - 170px); min-height: 560px; }
  .capability-tabs .btn { width: 100%; }
  .time { font-size: 38px; }
  .stuffing-result-card strong { font-size: 32px; }
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  @page { margin: 0.45in; }

  body, .app-shell, main { background: #fff; }

  main::before, main::after, .app-header, .role-bar, .app-footer,
  .no-print, .tools-grid, .work-top, .recent-panel, .workflow-sidebar,
  .app-nav, .signed-in, #roleBarSignOutBtn, #signOutBtn, button,
  input[type="file"], .approval-actions, .pdf-toolbar { display: none !important; }

  main { overflow: visible; }
  .app-shell { display: block; }
  .screen { width: 100%; padding: 0; }
  .screen:not(.active) { display: none !important; }

  .workspace, .workspace.sidebar-layout, .work-area {
    display: block !important;
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .panel { border: 0; padding: 0; width: 100%; background: #fff !important; box-shadow: none !important; }
  .panel > h2 { display: none; }
  .panel > .pdf-preview { margin: 0; }

  .pdf-preview {
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    box-shadow: none;
    background: #fff !important;
  }

  .timeoff-pdf { max-width: none; }

  .timeoff-pdf header, .timeoff-pdf .pdf-grid, .timeoff-pdf .pdf-approvals,
  .timeoff-pdf .pdf-note, .timeoff-pdf footer, .form-section, .table-wrap,
  .gasket-preview-sheet { page-break-inside: avoid; break-inside: avoid; }

  input, textarea, select {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
  }

  textarea { min-height: auto !important; }
  .traveler-layout { display: block !important; }

  .status-line {
    border-color: #ccc !important;
    background: #fff !important;
    color: var(--text) !important;
  }
}

/* ============================================================
   SCI POLISH PASS — 2026-05-27
   Fixes: gradient depth, stat cards, status-line neutral state,
   checkbox sizing, search input underline, button proportions,
   table row spacing, form field overflow, Clock In/Out buttons.
   ============================================================ */

/* ── 1. Richer, darker background gradient ───────────────── */
body {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(192,0,0,.08) 0%, transparent 42%),
    radial-gradient(ellipse at 100% 0%, rgba(0,0,0,.06) 0%, transparent 38%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.05) 0%, transparent 55%),
    linear-gradient(175deg, #F0F0F3 0%, #E4E4EA 40%, #D8D8E2 100%) !important;
  background-attachment: fixed !important;
}

/* ── 2. Panels & cards get a slightly deeper surface ─────── */
.panel, .recent-panel {
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.05) !important;
}

.workflow-sidebar {
  background: rgba(255,255,255,.80) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.05) !important;
}

.tool-card, .approval-card, .mini-card {
  background: rgba(255,255,255,.78) !important;
}

.tool-card:hover, .approval-card:hover {
  background: rgba(255,255,255,.96) !important;
}

/* ── 3. Status line — neutral/default should NOT look red ── */
.status-line,
.role-note {
  background: rgba(0,0,0,.04) !important;
  border-color: rgba(0,0,0,.10) !important;
  color: var(--muted) !important;
}

/* Only colour when a modifier class is present */
.status-line.success {
  background: rgba(26,127,75,.09) !important;
  border-color: rgba(26,127,75,.20) !important;
  color: var(--green) !important;
}

.status-line.info {
  background: rgba(0,113,227,.08) !important;
  border-color: rgba(0,113,227,.18) !important;
  color: #0860C7 !important;
}

.status-line.warning {
  background: rgba(180,83,9,.09) !important;
  border-color: rgba(180,83,9,.20) !important;
  color: var(--amber) !important;
}

.status-line.error,
.role-note.error {
  background: rgba(192,0,0,.07) !important;
  border-color: rgba(192,0,0,.18) !important;
  color: #8B0000 !important;
}

/* ── 4. Stat cards — use neutral surface, not red ────────── */
.stat {
  background: rgba(255,255,255,.82) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-xs) !important;
}

.stat .value {
  color: var(--text) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -.03em !important;
}

.stat .label {
  color: var(--faint) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

/* ── 5. Clock In / Clock Out — hero action buttons ───────── */
.time-grid .btn,
.badge-scan ~ .time-grid .btn,
#clockInBtn, #clockOutBtn,
[id*="clockIn"], [id*="clockOut"] {
  min-height: 52px !important;
  border-radius: var(--r-md) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
}

/* ── 6. Time display — give it more visual weight ────────── */
.time {
  font-size: 56px !important;
  font-weight: 200 !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
  background: linear-gradient(135deg, var(--text) 0%, #555 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 7. Search inputs — remove rogue underlines ─────────── */
input[type="search"],
input[type="text"],
input[type="password"],
input[type="email"],
input {
  border-bottom: none !important;
  text-decoration: none !important;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

input:focus, select:focus, textarea:focus {
  border-color: rgba(192,0,0,.45) !important;
  box-shadow: 0 0 0 4px rgba(192,0,0,.09) !important;
  outline: none !important;
}

/* ── 8. Checkboxes — proper size, accent color ───────────── */
input[type="checkbox"],
input[type="radio"] {
  width: 17px !important;
  min-height: 17px !important;
  height: 17px !important;
  padding: 0 !important;
  border-radius: 5px !important;
  accent-color: var(--red) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

/* ── 9. Buttons — tighten proportions, cleaner hierarchy ─── */
.btn {
  padding: 9px 20px !important;
  min-height: 38px !important;
  border-radius: var(--r) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
}

.btn.primary {
  padding: 10px 22px !important;
  min-height: 42px !important;
  border-radius: var(--r-md) !important;
  font-size: 14px !important;
}

.btn.sm {
  min-height: 30px !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  border-radius: var(--r-sm) !important;
}

/* Action buttons in tables (Save, Edit, Delete) */
.job-log-actions .btn,
.admin-job-log-table .btn {
  min-height: 32px !important;
  padding: 5px 14px !important;
  font-size: 12px !important;
  width: 100% !important;
  border-radius: var(--r-sm) !important;
  margin-bottom: 4px !important;
}

/* ── 10. Table rows — more breathing room ────────────────── */
.packing-slip-table th, .packing-slip-table td,
.capability-table th,   .capability-table td,
.job-log-table th,      .job-log-table td,
.data-table th,         .data-table td,
.admin-job-log-table th, .admin-job-log-table td {
  padding: 13px 16px !important;
  vertical-align: middle !important;
}

/* ── 11. Form fields — prevent clipped placeholders ─────── */
input, select, textarea {
  overflow: visible !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

textarea {
  white-space: pre-wrap !important;
  overflow: auto !important;
}

select {
  padding-right: 32px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238E8E93' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* ── 12. Manual override panel — visual separation ───────── */
.manual-override-panel {
  padding: 20px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  background: rgba(255,255,255,.70) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: var(--shadow-xs) !important;
}

/* ── 13. Badge scan layout — tighten up ─────────────────── */
.badge-scan {
  gap: 12px !important;
}

.badge-scan input {
  font-size: 16px !important;
  font-weight: 500 !important;
  min-height: 52px !important;
  border-radius: var(--r-md) !important;
}

/* ── 14. CNC Review stat cards — should be neutral ───────── */
.cnc-time-totals > div {
  background: rgba(255,255,255,.78) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 16px 20px !important;
  box-shadow: var(--shadow-xs) !important;
}

/* ── 15. Quick picks bar — polish ───────────────────────── */
.job-log-quick-picks {
  background: rgba(255,255,255,.60) !important;
  border-color: var(--border) !important;
  border-radius: var(--r-md) !important;
  backdrop-filter: blur(10px) !important;
}

/* ── 16. Pill / badge — rounder ─────────────────────────── */
.pill,
.job-log-priority-badge,
.job-log-status-pill,
.fit {
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
}

/* Active/approved employee badge */
.pill.green,
.job-log-status-pill {
  background: rgba(26,127,75,.10) !important;
  color: var(--green) !important;
}

/* ── 17. Textarea in forms — comfortable height ─────────── */
.panel > .form textarea,
.sales-form textarea,
.form-section textarea,
.subsection textarea {
  min-height: 110px !important;
}

/* ── 18. Traveler paste area ─────────────────────────────── */
.traveler-layout textarea {
  min-height: 200px !important;
}

/* ── 19. Header — slightly more depth ────────────────────── */
.app-header {
  background: rgba(248,248,250,.88) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 4px 20px rgba(0,0,0,.06) !important;
}

.role-bar {
  background: rgba(244,244,247,.88) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05) !important;
}

/* ── 20. Workflow sidebar active item — cleaner highlight ── */
.workflow-sidebar-item.is-active {
  background: rgba(192,0,0,.08) !important;
  border-color: rgba(192,0,0,.18) !important;
  box-shadow: inset 3px 0 0 var(--red) !important;
}

.workflow-sidebar-item.is-active .workflow-sidebar-label {
  color: var(--red) !important;
  font-weight: 600 !important;
}

/* ── 21. Section panel headers — slightly deeper ─────────── */
.panel > h2,
.panel > .section-heading,
.recent-panel > h2,
.panel > .panel-head {
  background: rgba(0,0,0,.025) !important;
}

/* ── 22. Approval cards in employee list ─────────────────── */
body[data-workspace-role="admin"] #employeeList .approval-card {
  background: rgba(255,255,255,.82) !important;
  border-radius: var(--r-md) !important;
  transition: box-shadow .2s, transform .18s !important;
}

body[data-workspace-role="admin"] #employeeList .approval-card:hover {
  box-shadow: var(--shadow-sm) !important;
  transform: translateY(-1px) !important;
}

/* Final control polish: visible checks, wrapped option labels, readable buttons. */
input[type="checkbox"],
input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 18px !important;
  border: 1.5px solid rgba(0,0,0,.22) !important;
  border-radius: 5px !important;
  background: #fff !important;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.04) !important;
  cursor: pointer !important;
}

input[type="radio"] {
  border-radius: 999px !important;
}

input[type="checkbox"]::after {
  content: "";
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform .12s ease;
}

input[type="radio"]::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #fff;
  transform: scale(0);
  transition: transform .12s ease;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  border-color: var(--red) !important;
  background: var(--red) !important;
}

input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1);
}

input[type="radio"]:checked::after {
  transform: scale(1);
}

.option-card-grid,
.access-options,
.inline-options,
.internal-email-options {
  gap: 12px 18px !important;
}

.option-card-grid label,
.access-options label,
.inline-options label,
.internal-email-options label,
.checkbox-line {
  min-height: 48px !important;
  height: auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  min-width: 0 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

.option-card-grid label,
.access-options label,
.inline-options label {
  border-radius: 10px !important;
}

.option-card-grid label > span,
.access-options label > span,
.inline-options label > span,
.internal-email-options label > span,
.checkbox-line > span {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

.btn,
button,
button[type="button"],
button[type="submit"] {
  min-width: fit-content !important;
  max-width: 100% !important;
  height: auto !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

.admin-job-log-table .btn,
.job-log-actions .btn,
.approval-actions .btn,
.two-buttons .btn,
.time-grid .btn {
  min-height: 44px !important;
  padding-inline: 16px !important;
}

.remove-gms-row,
.remove-traveler-row,
.remove-cnc-time-row {
  min-width: 82px !important;
  padding: 10px 14px !important;
}

/* Responsive workspace polish: desktop/tablet left rails, phone-safe forms. */
@media (min-width: 641px) {
  .capability-tool {
    display: grid !important;
    grid-template-columns: 188px minmax(0, 1fr);
    gap: 16px 20px !important;
    align-items: start;
  }

  .capability-tool > .section-heading {
    grid-column: 1 / -1;
  }

  .capability-tool > .capability-tabs {
    grid-column: 1;
    grid-row: 2 / span 2;
    width: 100% !important;
    position: sticky;
    top: 92px;
    display: grid !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 18px !important;
  }

  .capability-tabs .btn {
    width: 100%;
    min-width: 0 !important;
    justify-content: flex-start;
    border-radius: 12px !important;
    text-align: left !important;
  }

  .capability-tool > .status-line,
  .capability-tool > .capability-screen {
    grid-column: 2;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .screen {
    padding-inline: 12px !important;
  }

  .work-top,
  .panel,
  .form-section,
  .subsection,
  .sales-form,
  .capability-inputs,
  .capability-results,
  .capability-route {
    border-radius: 16px !important;
  }

  .panel > .form,
  .panel > .subsection,
  .panel > .sales-form,
  .panel > .task-list,
  .panel > .status-line,
  .panel > .role-note,
  .panel > .table-wrap,
  .panel > .pdf-toolbar,
  .panel > .pdf-preview,
  .panel > .workload-frame-wrap,
  .panel > .capability-tool {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .time-grid,
  .badge-row,
  .review-grid,
  .capability-three {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .capability-tool {
    display: grid !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  .capability-tabs {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding: 6px !important;
    border-radius: 16px !important;
  }

  .capability-tabs .btn {
    flex: 1 0 132px !important;
    width: auto !important;
    min-width: 132px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .cnc-time-entry-panel .table-wrap {
    margin: 0 !important;
    overflow: visible !important;
  }

  .cnc-time-table {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    border-spacing: 0 !important;
    background: transparent !important;
  }

  .cnc-time-table thead {
    display: none !important;
  }

  .cnc-time-table tbody,
  .cnc-time-table tr,
  .cnc-time-table td {
    display: block !important;
    width: 100% !important;
  }

  .cnc-time-table tr {
    padding: 12px !important;
    margin-bottom: 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.82) !important;
    box-shadow: var(--shadow-xs) !important;
  }

  .cnc-time-table td {
    padding: 0 0 10px !important;
    border: 0 !important;
  }

  .cnc-time-table td:last-child {
    padding-bottom: 0 !important;
  }

  .cnc-time-table td::before {
    display: block;
    margin: 0 0 5px;
    color: var(--faint);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .cnc-time-table td:nth-child(1)::before { content: "Type"; }
  .cnc-time-table td:nth-child(2)::before { content: "Start Time"; }
  .cnc-time-table td:nth-child(3)::before { content: "Stop Time"; }
  .cnc-time-table td:nth-child(4)::before { content: "Duration"; }
  .cnc-time-table td:nth-child(5)::before { content: "Notes"; }

  .cnc-time-table input,
  .cnc-time-table select {
    width: 100% !important;
    min-height: 44px !important;
  }

  .cnc-time-totals {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .cnc-time-totals > div {
    min-height: 48px;
    padding: 12px 14px !important;
  }

  .cnc-time-totals span,
  .cnc-time-totals strong {
    display: block;
    overflow-wrap: anywhere;
  }
}

/* === SCI standard desktop capability and CNC bulk action polish === */
@media (min-width: 901px) {
  .panel > .capability-tool {
    width: min(1180px, calc(100vw - 72px));
    margin-inline: auto !important;
    padding: 28px !important;
  }

  .capability-tool {
    display: block !important;
  }

  .capability-tool > .section-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin-bottom: 18px !important;
  }

  .capability-tool > .capability-tabs {
    position: static !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
    grid-column: auto !important;
    grid-row: auto !important;
    border-radius: 18px !important;
  }

  .capability-tool > .capability-tabs .btn {
    width: auto !important;
    min-width: 150px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .capability-tool > .status-line {
    width: 100% !important;
    margin: 0 0 22px !important;
    grid-column: auto !important;
  }

  .capability-tool > .capability-screen {
    grid-column: auto !important;
  }

  .capability-layout {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(430px, .94fr) minmax(520px, 1.06fr) !important;
    gap: 24px !important;
    align-items: start !important;
  }

  .capability-inputs,
  .capability-results {
    width: 100%;
    max-width: none;
  }

  .capability-inputs .form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 16px;
  }

  .capability-inputs .form > label,
  .capability-inputs .form > .status-line,
  .capability-inputs .form > .capability-image,
  .capability-inputs .form > fieldset,
  .capability-inputs .form > .approval-actions,
  .capability-inputs .form > h3,
  .capability-inputs .form > input[type="file"],
  .capability-inputs .form > button,
  .capability-inputs .form > .capability-three {
    min-width: 0;
  }

  .capability-inputs .form > .status-line,
  .capability-inputs .form > .capability-image,
  .capability-inputs .form > fieldset,
  .capability-inputs .form > .approval-actions,
  .capability-inputs .form > h3,
  .capability-inputs .form > .capability-three {
    grid-column: 1 / -1;
  }

  .capability-three {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(120px, 1fr)) !important;
    gap: 14px !important;
  }

  .capability-brain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .capability-layout {
    grid-template-columns: 1fr !important;
  }
}

.cnc-bulk-actions .btn,
.cnc-job-card .btn {
  width: auto !important;
  min-width: 112px !important;
}

.cnc-job-card-header {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.cnc-job-select-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cnc-job-select-label input {
  width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 640px) {
  .cnc-job-card-header {
    grid-template-columns: 1fr auto;
  }
  .cnc-job-card-header .cnc-job-select-label {
    grid-column: 1 / -1;
  }
  .cnc-bulk-actions {
    width: 100%;
  }
  .cnc-bulk-actions .btn,
  .cnc-job-card .btn {
    width: 100% !important;
  }
}

/* Standard search row cleanup for CNC and Job Log screens */
.cnc-job-search-row {
  margin: 12px 0 14px;
  max-width: 720px;
}
.cnc-job-search-row label {
  display: grid;
  gap: 8px;
}
.admin-job-log-table tr[hidden],
.cnc-job-card[hidden] {
  display: none !important;
}
@media (max-width: 720px) {
  .cnc-job-search-row {
    max-width: none;
    width: 100%;
  }
}

/* Job Log action stability: one checkbox mark only, reliable compact action buttons. */
.admin-job-log-table input[type="checkbox"],
.job-log-table input[type="checkbox"] {
  background-image: none !important;
}
.admin-job-log-table input[type="checkbox"]:checked,
.job-log-table input[type="checkbox"]:checked {
  background-image: none !important;
}
.admin-job-log-table td:last-child {
  min-width: 140px;
}
.admin-job-log-table td:last-child .btn {
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}
.admin-job-log-table td span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}


/* Job Log Admin reliability patch: prevent duplicate native/custom checkbox marks and keep controls clickable. */
.admin-job-log-table input[type="checkbox"],
.job-log-table input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
}
.admin-job-log-table input[type="checkbox"]::before,
.admin-job-log-table input[type="checkbox"]::after,
.job-log-table input[type="checkbox"]::before,
.job-log-table input[type="checkbox"]::after {
  pointer-events: none !important;
}
.admin-job-log-table input[type="checkbox"]:checked::after,
.job-log-table input[type="checkbox"]:checked::after {
  content: "" !important;
}
.admin-job-log-table button,
.job-log-table button {
  pointer-events: auto !important;
}


/* Job Traveler layout repair: keep buttons compact and labor operations fully viewable. */
.job-traveler-panel {
  align-items: start !important;
}

.job-traveler-panel .form-section {
  min-width: 0 !important;
}

.traveler-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.traveler-actions .btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  max-height: 52px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
}

.traveler-actions #saveTraveler {
  grid-column: span 1 !important;
}

.traveler-ops-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.72) !important;
  padding: 0 !important;
}

.traveler-ops-wrap::after {
  content: "Scroll sideways to view all labor operation columns";
  display: block;
  padding: 8px 12px 10px;
  color: var(--faint);
  font-size: 12px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.02);
}

.traveler-ops-table {
  width: max-content !important;
  min-width: 1120px !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

.traveler-ops-table th,
.traveler-ops-table td {
  padding: 10px 8px !important;
  min-width: 96px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.traveler-ops-table th:nth-child(1),
.traveler-ops-table td:nth-child(1) { width: 76px !important; min-width: 76px !important; }
.traveler-ops-table th:nth-child(2),
.traveler-ops-table td:nth-child(2) { width: 86px !important; min-width: 86px !important; }
.traveler-ops-table th:nth-child(3),
.traveler-ops-table td:nth-child(3) { width: 150px !important; min-width: 150px !important; }
.traveler-ops-table th:nth-child(4),
.traveler-ops-table td:nth-child(4) { width: 170px !important; min-width: 170px !important; }
.traveler-ops-table th:nth-child(5),
.traveler-ops-table td:nth-child(5) { width: 120px !important; min-width: 120px !important; }
.traveler-ops-table th:nth-child(6),
.traveler-ops-table td:nth-child(6) { width: 110px !important; min-width: 110px !important; }
.traveler-ops-table th:nth-child(7),
.traveler-ops-table td:nth-child(7) { width: 120px !important; min-width: 120px !important; }
.traveler-ops-table th:nth-child(8),
.traveler-ops-table td:nth-child(8) { width: 120px !important; min-width: 120px !important; }
.traveler-ops-table th:nth-child(9),
.traveler-ops-table td:nth-child(9) { width: 120px !important; min-width: 120px !important; }
.traveler-ops-table th:nth-child(10),
.traveler-ops-table td:nth-child(10) { width: 112px !important; min-width: 112px !important; }

.traveler-ops-table input {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

.traveler-ops-table .remove-traveler-row {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
}

.traveler-add-row {
  width: 100% !important;
  min-height: 42px !important;
  margin-top: 10px !important;
  border-radius: 12px !important;
}

@media (min-width: 1100px) {
  .traveler-layout {
    grid-template-columns: minmax(360px, .85fr) minmax(680px, 1.35fr) !important;
    gap: 18px !important;
  }
}

@media (max-width: 900px) {
  .traveler-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .traveler-ops-table {
    min-width: 1060px !important;
  }
}

@media (max-width: 560px) {
  .traveler-actions {
    grid-template-columns: 1fr !important;
  }
  .traveler-actions .btn {
    max-height: none !important;
  }
  .traveler-ops-wrap {
    margin-inline: 0 !important;
  }
}


/* CNC Tool Finder */
.tool-finder-shell { display: flex; flex-direction: column; gap: 18px; }
.tool-finder-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); gap: 18px; align-items: start; }
.tool-search-card, .tool-edit-card { padding: 22px; border-radius: 24px; background: rgba(255,255,255,.94); border: 1px solid rgba(148,163,184,.28); box-shadow: 0 18px 45px rgba(15,23,42,.08); }
.tool-search-card h3, .tool-edit-card h3 { margin: 0 0 16px; }
.tool-finder-filters { align-items: end; }
.tool-finder-summary { display:flex; gap:10px; align-items:center; margin: 12px 0; color:#475569; }
.tool-finder-summary strong { color:#111827; font-size: 1.15rem; }
.tool-results-wrap { max-height: 58vh; overflow: auto; border-radius: 18px; border: 1px solid rgba(148,163,184,.25); background: white; }
.tool-results-table { min-width: 860px; }
.tool-results-table td small { display:block; color:#64748b; margin-top:3px; font-size:.78rem; }
.actions-cell { white-space: nowrap; display:flex; gap:8px; }
.btn.ghost.danger { color: #b91c1c; border-color: rgba(220,38,38,.25); background: rgba(254,242,242,.7); }
.button-row.compact { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.button-row.compact .btn { min-height: 42px; padding: 0 18px; width: auto; }
@media (max-width: 980px) { .tool-finder-grid { grid-template-columns: 1fr; } .tool-results-wrap { max-height: none; } }
@media (max-width: 720px) { .tool-search-card, .tool-edit-card { padding: 16px; border-radius: 20px; } .tool-results-table { min-width: 760px; } }


/* === 2026-05-28 iPad/desktop Machine Capability cleanup ===
   Keep the tool readable on iPad/tablet widths without changing the mobile layout. */
.capability-tool {
  width: min(100%, 1240px);
  margin-inline: auto;
}
.capability-tool .section-heading {
  width: 100%;
}
.capability-layout {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}
.capability-tool .time-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px 18px;
}
.capability-three {
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  gap: 16px 18px;
}
.capability-tool label,
.capability-tool .form label {
  min-width: 0;
}
.capability-tool input,
.capability-tool select,
.capability-tool textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.capability-tool input[type="file"] {
  min-height: 46px;
  padding: 10px 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.capability-image {
  width: 100%;
  min-width: 0;
}
.capability-results,
.capability-inputs {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.capability-brain-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.capability-brain-card.span-2 {
  grid-column: 1 / -1;
}

@media (min-width: 1181px) {
  .capability-layout {
    grid-template-columns: minmax(430px, 0.9fr) minmax(560px, 1.1fr);
    align-items: start;
  }
}

@media (max-width: 1180px) {
  .capability-tool {
    width: min(100%, 940px);
  }
  .capability-layout {
    grid-template-columns: 1fr !important;
    max-width: 860px;
    gap: 18px;
  }
  .capability-inputs,
  .capability-results,
  .capability-route {
    padding: 20px;
  }
  .capability-tabs {
    width: 100%;
    max-width: 440px;
  }
  .capability-tabs .btn {
    flex: 1 1 0;
  }
  .capability-three {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  }
  .capability-tool .time-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  }
  .capability-review {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .capability-tool {
    width: 100%;
  }
  .capability-tool .section-heading {
    gap: 12px;
  }
  .capability-inputs,
  .capability-results,
  .capability-route {
    padding: 16px;
    border-radius: 20px;
  }
  .capability-tool .time-grid,
  .capability-three,
  .capability-brain-grid,
  .capability-checks {
    grid-template-columns: 1fr !important;
  }
  .capability-tabs {
    max-width: none;
  }
  .capability-tabs .btn {
    min-width: 0;
  }
  .capability-image {
    min-height: 160px;
  }
}


/* === CNC Tool Finder edit/spacing cleanup === */
.panel > .tool-finder-shell {
  padding: clamp(20px, 2.4vw, 34px) !important;
  margin: 0 !important;
}
.tool-finder-shell {
  gap: clamp(18px, 2vw, 26px) !important;
}
.tool-finder-heading {
  padding: 0 0 8px !important;
  margin: 0 !important;
  border-bottom: 0 !important;
  align-items: flex-start !important;
}
.tool-finder-heading h2 {
  margin: 0 !important;
  font-size: clamp(28px, 2.7vw, 42px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
  text-transform: none !important;
  color: #111827 !important;
}
.tool-search-card,
.tool-edit-card {
  padding: clamp(22px, 2.4vw, 34px) !important;
}
.tool-search-card h3,
.tool-edit-card h3 {
  margin-bottom: 20px !important;
  line-height: 1.25 !important;
}
.tool-finder-filters,
.tool-edit-card .form-grid {
  gap: 18px !important;
}
.tool-finder-summary {
  margin: 18px 0 !important;
}
.tool-results-wrap {
  margin-top: 10px !important;
}
.tool-edit-card > label,
.tool-edit-card textarea {
  margin-top: 16px !important;
}
.tool-edit-card .button-row.compact {
  margin-top: 18px !important;
}
/* Hide non-critical green Supabase ready banners. Warning/error messages still show. */
.status-line.success {
  display: none !important;
}
@media (max-width: 720px) {
  .panel > .tool-finder-shell {
    padding: 18px !important;
  }
  .tool-search-card,
  .tool-edit-card {
    padding: 18px !important;
  }
}

/* iPad/tablet capability layout fix: keep the good phone layout, but stop the
   desktop side-rail from squeezing the Machine Capability screen on iPad. */
@media (min-width: 641px) and (max-width: 1199px) {
  .work-area.capability-mode .capability-tool,
  .capability-tool {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(14px, 2vw, 22px) !important;
  }

  .capability-tool > .section-heading,
  .capability-tool > .status-line,
  .capability-tool > .capability-tabs,
  .capability-tool > .capability-screen {
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: 0 !important;
  }

  .capability-tool > .capability-tabs {
    position: static !important;
    width: 100% !important;
    max-width: 420px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    margin: 14px 0 16px !important;
    padding: 6px !important;
    border-radius: 18px !important;
    overflow-x: auto !important;
  }

  .capability-tabs .btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 140px !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 14px !important;
  }

  .capability-layout,
  .capability-review,
  .capability-brain-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 16px !important;
  }

  .capability-inputs,
  .capability-results,
  .capability-route,
  .capability-machine-card,
  .capability-brain-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .capability-inputs,
  .capability-results,
  .capability-route {
    padding: clamp(16px, 2.4vw, 22px) !important;
  }

  .capability-inputs .form,
  .capability-tool .form,
  .capability-tool .form-grid,
  .capability-three {
    grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    gap: 14px 16px !important;
  }

  .capability-tool input,
  .capability-tool select,
  .capability-tool textarea,
  .capability-tool .status-line,
  .capability-image {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .capability-image {
    min-height: 210px !important;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .capability-inputs .form,
  .capability-tool .form,
  .capability-tool .form-grid,
  .capability-three {
    grid-template-columns: 1fr !important;
  }

  .capability-tool > .capability-tabs {
    max-width: 100% !important;
  }
}

/* Simple login screen: show only the employee sign-in container before authentication. */
body:not(.is-authenticated) .app-header,
body:not(.is-authenticated) .role-bar,
body:not(.is-authenticated) .app-footer {
  display: none !important;
}

body:not(.is-authenticated) main {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

body:not(.is-authenticated) #signupScreen.screen.active {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: none;
  min-height: calc(100vh - 48px);
  padding: 0;
}

.welcome.login-only {
  display: grid;
  grid-template-columns: minmax(280px, 440px);
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0;
}

.login-panel {
  width: min(100%, 440px);
  padding: 32px;
  border-radius: 28px;
  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.14);
}

.login-panel h2 {
  margin: 0 0 22px;
  text-align: center;
}

.login-panel .form {
  gap: 18px;
}

.login-panel .btn.primary {
  width: 100%;
  min-height: 48px;
}

.login-panel .status-line {
  text-align: center;
}

@media (max-width: 640px) {
  body:not(.is-authenticated) main {
    padding: 16px;
  }

  .login-panel {
    padding: 24px;
    border-radius: 24px;
  }
}

/* ============================================================
   MOBILE-FIRST APP SHELL — iPhone/iPad structure with SCI theme
   Desktop layout stays intact; this layer activates only on tablet/mobile.
   ============================================================ */
:root {
  --brand-primary: var(--red, #C00000);
  --brand-secondary: var(--red-dark, #990000);
  --brand-bg: var(--bg, #F5F5F7);
  --brand-surface: var(--white, #FFFFFF);
  --brand-surface-soft: rgba(255,255,255,.72);
  --brand-text: var(--text, #1D1D1F);
  --brand-muted: var(--muted, #6E6E73);
  --brand-border: var(--border, rgba(0,0,0,.08));
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-nav-height: 62px;
  --mobile-ease: cubic-bezier(.2,.8,.2,1);
}

.mobile-shell-bar,
.mobile-drawer-backdrop { display: none; }

@media (max-width: 1024px) {
  body.is-authenticated .app-header { display: none; }
  body.is-authenticated .mobile-shell-bar {
    position: sticky;
    top: 0;
    z-index: 1200;
    min-height: calc(var(--mobile-nav-height) + var(--mobile-safe-top));
    padding: calc(8px + var(--mobile-safe-top)) 12px 8px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    background: color-mix(in srgb, var(--brand-surface) 84%, transparent);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-bottom: 1px solid var(--brand-border);
  }
  body:not(.is-authenticated) .mobile-shell-bar { display: none; }
  .mobile-menu-btn,
  .mobile-signout-btn {
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid var(--brand-border);
    background: rgba(255,255,255,.78);
    color: var(--brand-text);
    box-shadow: var(--shadow-xs);
    touch-action: manipulation;
    transition: transform 180ms var(--mobile-ease), background 180ms var(--mobile-ease), box-shadow 180ms var(--mobile-ease);
  }
  .mobile-menu-btn:active,
  .mobile-signout-btn:active { transform: scale(.96) translate3d(0,0,0); }
  .mobile-menu-btn {
    width: 48px;
    display: grid;
    place-content: center;
    gap: 4px;
  }
  .mobile-menu-btn span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--brand-primary);
  }
  .mobile-title-wrap {
    min-width: 0;
    display: grid;
    gap: 1px;
    line-height: 1.12;
  }
  .mobile-title-wrap strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    letter-spacing: -.01em;
  }
  .mobile-title-wrap span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--brand-muted);
    font-size: 12px;
    font-weight: 600;
  }
  .mobile-signout-btn {
    padding: 0 13px;
    font-size: 12px;
    font-weight: 700;
  }
  .screen.active#workspaceScreen {
    padding-top: clamp(12px, 2.5vw, 22px);
    padding-bottom: calc(28px + var(--mobile-safe-bottom));
  }
  .workspace.sidebar-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .workspace.sidebar-layout .work-top {
    display: none;
  }
  body.is-authenticated .role-bar.active {
    position: sticky;
    top: calc(var(--mobile-nav-height) + var(--mobile-safe-top));
    z-index: 1150;
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    background: color-mix(in srgb, var(--brand-surface) 78%, transparent);
    backdrop-filter: saturate(170%) blur(18px);
    -webkit-backdrop-filter: saturate(170%) blur(18px);
    border-bottom: 1px solid var(--brand-border);
  }
  .role-bar span { flex: 0 0 auto; }
  .role-btn, #roleBarSignOutBtn { flex: 0 0 auto; scroll-snap-align: start; min-height: 38px; }

  .mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1240;
    background: rgba(0,0,0,.20);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms var(--mobile-ease);
  }
  body.mobile-menu-open .mobile-drawer-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
  .workspace.sidebar-layout .tools-grid {
    position: fixed !important;
    left: 0;
    top: 0 !important;
    bottom: 0;
    width: min(88vw, 380px) !important;
    max-width: 380px;
    min-width: 280px;
    z-index: 1250;
    padding: calc(var(--mobile-safe-top) + 74px) 14px calc(var(--mobile-safe-bottom) + 18px) !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: color-mix(in srgb, var(--brand-surface) 90%, transparent);
    backdrop-filter: saturate(180%) blur(28px);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    border-right: 1px solid var(--brand-border);
    box-shadow: 22px 0 70px rgba(0,0,0,.14);
    transform: translate3d(-108%,0,0);
    transition: transform 260ms var(--mobile-ease);
    will-change: transform;
  }
  body.mobile-menu-open .workspace.sidebar-layout .tools-grid {
    transform: translate3d(0,0,0);
  }
  .workspace.sidebar-layout .tools-grid::before {
    content: 'Menu';
    position: absolute;
    left: 22px;
    top: calc(var(--mobile-safe-top) + 22px);
    font-size: 18px;
    font-weight: 800;
    color: var(--brand-text);
  }
  .workflow-sidebar {
    display: grid !important;
    gap: 18px !important;
    width: 100%;
    padding: 0 !important;
    margin: 0;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  .workflow-sidebar-section,
  .workflow-sidebar-list {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .workflow-sidebar-heading {
    max-width: none !important;
    padding: 0 6px;
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: .08em;
  }
  .workflow-sidebar-item {
    width: 100% !important;
    max-width: none !important;
    min-height: 58px !important;
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    transform: translate3d(0,0,0);
  }
  .workflow-sidebar-description { display: block !important; }
  .workflow-sidebar-badge { display: inline-flex !important; }

  .work-area,
  .workspace.sidebar-layout .work-area {
    width: 100%;
    max-width: 100%;
    grid-template-columns: 1fr !important;
    margin: 0 !important;
  }
  .panel,
  .form-section,
  .subsection,
  .capability-panel,
  .capability-card {
    max-width: 100%;
    min-width: 0;
  }
  .capability-tool,
  .capability-layout,
  .capability-review,
  .capability-brain-grid,
  .capability-three {
    grid-template-columns: 1fr !important;
    max-width: 100%;
    min-width: 0;
  }
  .capability-tabs {
    display: flex !important;
    flex-direction: row !important;
    width: 100%;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .capability-tabs .btn {
    flex: 1 0 140px;
    scroll-snap-align: start;
  }
}

@media (max-width: 640px) {
  body.is-authenticated .mobile-shell-bar {
    grid-template-columns: 46px minmax(0,1fr) auto;
    padding-left: 10px;
    padding-right: 10px;
  }
  .mobile-signout-btn { padding: 0 10px; font-size: 11px; }
  .screen.active#workspaceScreen { padding-left: 10px; padding-right: 10px; }
  .panel, .form-section, .subsection { border-radius: 18px; }
  .workspace.sidebar-layout .tools-grid { width: min(92vw, 360px) !important; }
}

/* ============================================================
   MOBILE UX V2 — mobile card layouts for key workspaces
   Apple-style structure using SCI brand variables.
   Desktop remains unchanged above 1024px.
   ============================================================ */
@media (max-width: 1024px) {
  body.is-authenticated {
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-bg) 88%, white 12%), var(--brand-bg));
  }

  .screen.active#workspaceScreen {
    overflow-x: hidden;
  }

  .work-area > .panel,
  .work-area > .form-section,
  .work-area > .subsection,
  .panel-card,
  .capability-inputs,
  .capability-results,
  .capability-route,
  .tool-search-card,
  .tool-edit-card,
  .job-traveler-panel > .form-section {
    border-radius: 24px !important;
    border: 1px solid color-mix(in srgb, var(--brand-border) 70%, transparent) !important;
    background: color-mix(in srgb, var(--brand-surface) 94%, transparent) !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .07) !important;
  }

  .section-heading {
    padding: 4px 2px 14px !important;
    border: 0 !important;
    background: transparent !important;
  }

  .section-heading h2 {
    font-size: clamp(26px, 5.5vw, 38px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.04em !important;
    text-transform: none !important;
  }

  .section-heading p {
    max-width: 56ch;
    font-size: 15px !important;
    line-height: 1.45 !important;
    color: var(--brand-muted) !important;
  }

  .form-grid,
  .form-grid.two,
  .form-grid.three,
  .time-grid,
  .capability-tool .time-grid,
  .capability-three,
  .tool-finder-filters,
  .tool-edit-card .form-grid,
  .job-traveler-panel .time-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  label,
  fieldset legend {
    line-height: 1.2 !important;
  }

  input,
  select,
  textarea {
    min-height: 48px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
  }

  textarea {
    min-height: 110px !important;
  }

  .btn,
  button {
    min-height: 44px !important;
    border-radius: 999px !important;
    touch-action: manipulation;
  }

  /* Machine Capability mobile/tablet structure */
  .capability-tool {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .capability-tool > .section-heading {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: start !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
  }

  .capability-tool > .section-heading .btn,
  .capability-tool > .section-heading button {
    width: auto !important;
    min-width: 86px !important;
    padding-inline: 18px !important;
  }

  .capability-tool > .status-line.info {
    margin: 10px 0 14px !important;
    border-radius: 18px !important;
    font-size: 14px !important;
  }

  .capability-tool > .capability-tabs {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
    padding: 6px !important;
    margin: 0 0 14px !important;
    border-radius: 22px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    background: color-mix(in srgb, var(--brand-surface) 88%, transparent) !important;
  }

  .capability-tool > .capability-tabs .btn {
    flex: 1 0 152px !important;
    scroll-snap-align: start;
    justify-content: center !important;
  }

  .capability-layout,
  .capability-review,
  .capability-brain-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .capability-inputs,
  .capability-results,
  .capability-route {
    padding: 18px !important;
    overflow: hidden !important;
  }

  .capability-inputs .panel-card,
  .capability-results .panel-card {
    min-width: 0 !important;
  }

  .capability-image {
    min-height: 190px !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px !important;
  }

  .capability-machine-table,
  .capability-results table {
    min-width: 620px !important;
  }

  .capability-results .table-scroll,
  .capability-results .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Job Traveler mobile app structure */
  .traveler-layout,
  .job-traveler-panel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .job-traveler-panel > .form-section {
    padding: 18px !important;
    overflow: hidden !important;
  }

  .job-traveler-panel textarea#travelerPasteInput {
    min-height: 180px !important;
  }

  .traveler-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .traveler-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    white-space: normal !important;
  }

  .traveler-actions .btn.primary {
    grid-column: 1 / -1;
  }

  .traveler-ops-wrap {
    margin-top: 10px !important;
    border-radius: 18px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .traveler-ops-table {
    min-width: 1120px !important;
  }

  .traveler-add-row {
    margin-top: 12px !important;
  }

  /* CNC Tool Finder mobile cards */
  .panel > .tool-finder-shell {
    padding: 0 !important;
  }

  .tool-finder-shell {
    gap: 16px !important;
  }

  .tool-finder-heading h2 {
    font-size: clamp(28px, 7vw, 38px) !important;
  }

  .tool-finder-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .tool-search-card,
  .tool-edit-card {
    padding: 18px !important;
  }

  .tool-results-wrap {
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  .tool-results-table,
  .tool-results-table thead,
  .tool-results-table tbody,
  .tool-results-table tr,
  .tool-results-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .tool-results-table thead { display: none !important; }

  .tool-results-table tr {
    padding: 14px !important;
    margin: 0 0 12px !important;
    border: 1px solid rgba(148, 163, 184, .32) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05) !important;
  }

  .tool-results-table td {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 6px 0 !important;
    border: 0 !important;
    white-space: normal !important;
  }

  .tool-results-table td::before {
    content: attr(data-label);
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  .tool-results-table td.actions-cell {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    padding-top: 12px !important;
  }

  .tool-results-table td.actions-cell::before { display: none !important; }

  .tool-results-table .btn.sm {
    flex: 1 1 0;
    min-height: 42px !important;
  }
}

@media (max-width: 520px) {
  .capability-tool > .section-heading {
    grid-template-columns: 1fr !important;
  }

  .capability-tool > .section-heading .btn,
  .capability-tool > .section-heading button {
    width: 100% !important;
  }

  .traveler-actions {
    grid-template-columns: 1fr !important;
  }

  .tool-results-table td {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
}

/* ============================================================
   MOBILE UX V3 — data/detail screens
   Converts action-heavy tables into readable mobile cards while
   preserving desktop layouts above 1024px.
   ============================================================ */
@media (max-width: 1024px) {
  /* General mobile data-screen rhythm */
  .job-log-controls,
  .cnc-job-controls,
  .cnc-bulk-actions,
  .salesman-recent-controls,
  .notification-controls,
  .toolbar,
  .button-row,
  .form-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .job-log-controls label,
  .cnc-job-controls label,
  .salesman-recent-controls label,
  .toolbar label,
  .button-row label,
  .form-actions label {
    width: 100% !important;
    min-width: 0 !important;
  }

  .job-log-controls .btn,
  .cnc-job-controls .btn,
  .cnc-bulk-actions .btn,
  .salesman-recent-controls .btn,
  .toolbar .btn,
  .button-row .btn,
  .form-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  /* Sticky mobile filter bars: search stays reachable while scrolling */
  .job-log-controls,
  .cnc-job-controls,
  .operator-board-filter-section,
  .advisor-control-bar,
  .job-prep-controls,
  .employee-metrics-controls,
  .salesman-recent-controls,
  .capability-tabs,
  #sidePanel > .time-grid.no-print,
  .tool-finder-filters {
    position: sticky !important;
    top: calc(var(--mobile-nav-height, 62px) + var(--mobile-safe-top, 0px) + 4px) !important;
    z-index: 980 !important;
    padding: 12px !important;
    border-radius: 22px !important;
    background: color-mix(in srgb, var(--brand-surface, #fff) 88%, transparent) !important;
    backdrop-filter: saturate(175%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(175%) blur(20px) !important;
    border: 1px solid color-mix(in srgb, var(--brand-border, rgba(0,0,0,.1)) 82%, transparent) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08) !important;
  }

  /* Job Log Admin / Salesman Job Log as mobile cards */
  .admin-job-log-table,
  .job-log-table {
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
    min-width: 0 !important;
  }

  .admin-job-log-table thead,
  .job-log-table thead {
    display: none !important;
  }

  .admin-job-log-table tbody,
  .admin-job-log-table tr,
  .admin-job-log-table td,
  .job-log-table tbody,
  .job-log-table tr,
  .job-log-table td {
    display: block !important;
    width: 100% !important;
  }

  .admin-job-log-table tr,
  .job-log-table tr {
    padding: 14px !important;
    border-radius: 22px !important;
    background: color-mix(in srgb, var(--brand-surface, #fff) 96%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--brand-border, rgba(0,0,0,.1)) 80%, transparent) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .065) !important;
    overflow: hidden !important;
  }

  .admin-job-log-table td,
  .job-log-table td {
    padding: 10px 0 !important;
    border: 0 !important;
    min-width: 0 !important;
  }

  .admin-job-log-table td + td,
  .job-log-table td + td {
    border-top: 1px solid color-mix(in srgb, var(--brand-border, rgba(0,0,0,.1)) 60%, transparent) !important;
  }

  .admin-job-log-table td::before,
  .job-log-table td::before {
    display: block;
    margin-bottom: 5px;
    font: 700 11px/1.2 var(--font-condensed, inherit);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-muted, #666);
  }

  .admin-job-log-table td:nth-child(1)::before { content: 'Select'; }
  .admin-job-log-table td:nth-child(2)::before { content: 'Job / PO / Date'; }
  .admin-job-log-table td:nth-child(3)::before { content: 'Salesman'; }
  .admin-job-log-table td:nth-child(4)::before { content: 'Status'; }
  .admin-job-log-table td:nth-child(5)::before { content: 'Notes'; }
  .admin-job-log-table td:nth-child(6)::before { content: 'Actions'; }

  .job-log-table:not(.admin-job-log-table) td:nth-child(1)::before { content: 'Customer / Job'; }
  .job-log-table:not(.admin-job-log-table) td:nth-child(2)::before { content: 'Salesman'; }
  .job-log-table:not(.admin-job-log-table) td:nth-child(3)::before { content: 'Status'; }
  .job-log-table:not(.admin-job-log-table) td:nth-child(4)::before { content: 'Notes'; }
  .job-log-table:not(.admin-job-log-table) td:nth-child(5)::before { content: 'Actions'; }

  .admin-job-log-table td:last-child,
  .job-log-table td:last-child {
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: 1fr !important;
  }

  .admin-job-log-table td:last-child .btn,
  .job-log-table td:last-child .btn,
  .admin-job-log-table .admin-job-status,
  .admin-job-log-table .admin-job-notes,
  .job-log-table select,
  .job-log-table textarea {
    width: 100% !important;
    min-width: 0 !important;
  }

  .job-log-select-cell {
    width: 100% !important;
    text-align: left !important;
  }

  .job-log-select-cell input[type='checkbox'],
  .admin-job-log-select,
  #adminJobLogSelectAll {
    width: 22px !important;
    height: 22px !important;
    accent-color: var(--brand-primary, #C00000);
  }

  /* CNC active jobs / assigned jobs mobile readability */
  .cnc-jobs-list,
  .cnc-operator-groups,
  .cnc-selected-job,
  .operator-jobs-list,
  .job-prep-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .cnc-job-card,
  .cnc-schedule-card,
  .cnc-op-card,
  .shop-helper-row,
  .operator-job-card,
  .job-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 16px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .cnc-job-card header,
  .cnc-schedule-card header,
  .cnc-op-card header,
  .operator-job-card header,
  .job-card header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: start !important;
  }

  .cnc-job-card .btn,
  .cnc-schedule-card .btn,
  .cnc-op-card .btn,
  .operator-job-card .btn,
  .job-card .btn,
  .cnc-job-action .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .cnc-selected-job .time-grid,
  .cnc-selected-job .form-grid,
  .cnc-time-card .time-grid,
  .cnc-time-card .form-grid {
    grid-template-columns: 1fr !important;
  }

  .cnc-selected-job .table-wrap,
  .cnc-time-card .table-wrap,
  .time-card-table-wrap,
  .operator-time-card-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 18px !important;
  }

  .cnc-selected-job table,
  .cnc-time-card table,
  .time-card-table-wrap table,
  .operator-time-card-wrap table {
    min-width: 720px !important;
  }

  /* Time & Requests mobile shell */
  .time-clock-card,
  .time-request-card,
  .time-panel,
  .badge-clock-panel,
  .payroll-card,
  .request-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 16px !important;
    border-radius: 22px !important;
  }

  .time-clock-card .time-grid,
  .time-request-card .time-grid,
  .time-panel .time-grid,
  .badge-clock-panel .time-grid,
  .payroll-card .time-grid,
  .request-card .time-grid {
    grid-template-columns: 1fr !important;
  }

  .time-clock-card .btn,
  .time-request-card .btn,
  .time-panel .btn,
  .badge-clock-panel .btn,
  .payroll-card .btn,
  .request-card .btn {
    width: 100% !important;
  }

  /* Salesman recent form cards and action rows */
  .recent-list,
  .recent-forms-list,
  .salesman-recent-list,
  .saved-forms-list,
  .service-form-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .recent-card,
  .salesman-recent-card,
  .saved-form-card,
  .service-form-card,
  .notice-recent-card,
  .packing-slip-recent-card,
  .coating-cut-sheet-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 16px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .recent-card .btn,
  .salesman-recent-card .btn,
  .saved-form-card .btn,
  .service-form-card .btn,
  .notice-recent-card .btn,
  .packing-slip-recent-card .btn,
  .coating-cut-sheet-card .btn {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 6px !important;
  }

  /* Keep long admin and salesman tables usable without squeezing */
  .table-wrap,
  .responsive-table-wrap,
  .salesman-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 18px !important;
  }

  .table-wrap > table:not(.admin-job-log-table):not(.job-log-table),
  .responsive-table-wrap > table,
  .salesman-table-wrap > table {
    min-width: 680px !important;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .job-log-controls,
  .cnc-job-controls,
  .salesman-recent-controls,
  .toolbar,
  .button-row,
  .form-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .job-log-controls .btn.primary,
  .job-log-controls .btn.danger,
  .cnc-bulk-actions .btn.primary,
  .cnc-bulk-actions .btn.danger {
    grid-column: auto !important;
  }

  .admin-job-log-table td:last-child,
  .job-log-table td:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .job-log-controls,
  .cnc-job-controls,
  .tool-finder-filters {
    top: calc(var(--mobile-nav-height, 62px) + var(--mobile-safe-top, 0px) + 2px) !important;
    padding: 10px !important;
    border-radius: 18px !important;
  }

  .admin-job-log-table tr,
  .job-log-table tr,
  .cnc-job-card,
  .cnc-schedule-card,
  .cnc-op-card,
  .recent-card,
  .salesman-recent-card,
  .saved-form-card,
  .service-form-card {
    padding: 14px !important;
    border-radius: 18px !important;
  }
}

/* ============================================================
   MOBILE UX V4 — long form polish
   Notice of Receipt, Coatings Cut Sheet, Packing Slip, GMS Shafter,
   AWC worksheets and other service forms. Desktop remains unchanged.
   ============================================================ */
@media (max-width: 1024px) {
  /* Long form screens should feel like stacked app cards, not desktop sheets. */
  .service-form,
  .service-form-panel,
  .service-form-card,
  .salesman-form,
  .notice-form,
  .notice-of-receipt,
  .packing-slip-form,
  .coating-cut-sheet,
  .coatings-cut-sheet,
  .gms-form,
  .gms-shafter-form,
  .awc-form,
  .mechanical-seal-form,
  .worksheet-form,
  .checklist-form,
  .pdf-form,
  .form-card,
  fieldset {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-radius: 22px !important;
    overflow: visible !important;
  }

  .service-form,
  .salesman-form,
  .notice-form,
  .packing-slip-form,
  .coating-cut-sheet,
  .coatings-cut-sheet,
  .gms-form,
  .gms-shafter-form,
  .awc-form,
  .mechanical-seal-form,
  .worksheet-form,
  .checklist-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .service-form > *,
  .salesman-form > *,
  .notice-form > *,
  .packing-slip-form > *,
  .coating-cut-sheet > *,
  .coatings-cut-sheet > *,
  .gms-form > *,
  .gms-shafter-form > *,
  .awc-form > *,
  .mechanical-seal-form > *,
  .worksheet-form > *,
  .checklist-form > * {
    min-width: 0 !important;
  }

  .form-section,
  .subsection,
  .panel,
  fieldset,
  .section-card,
  .input-card,
  .signature-card,
  .approval-card,
  .review-card,
  .pdf-card {
    padding: 18px !important;
    margin-inline: 0 !important;
  }

  .form-section h2,
  .form-section h3,
  .form-section h4,
  .subsection h2,
  .subsection h3,
  .subsection h4,
  fieldset legend,
  .panel-title,
  .card-title {
    line-height: 1.14 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    text-wrap: balance;
  }

  .field,
  .form-field,
  label {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  label > span,
  .field-label,
  .form-label {
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  input[type='text'],
  input[type='number'],
  input[type='date'],
  input[type='time'],
  input[type='email'],
  input[type='tel'],
  input[type='search'],
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  input[type='file'] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Action bars on long forms stay reachable but do not cover form fields. */
  .form-actions,
  .service-form-actions,
  .notice-actions,
  .packing-slip-actions,
  .coating-actions,
  .coatings-actions,
  .gms-actions,
  .worksheet-actions,
  .pdf-actions {
    position: sticky !important;
    bottom: max(10px, var(--mobile-safe-bottom, 0px)) !important;
    z-index: 900 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px !important;
    margin-top: 12px !important;
    border-radius: 22px !important;
    background: color-mix(in srgb, var(--brand-surface, #fff) 90%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--brand-border, rgba(0,0,0,.1)) 85%, transparent) !important;
    backdrop-filter: saturate(170%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(170%) blur(20px) !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .10) !important;
    box-sizing: border-box !important;
  }

  .form-actions .btn,
  .service-form-actions .btn,
  .notice-actions .btn,
  .packing-slip-actions .btn,
  .coating-actions .btn,
  .coatings-actions .btn,
  .gms-actions .btn,
  .worksheet-actions .btn,
  .pdf-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  /* Signature areas should be easy to sign, but not oversized. */
  .signature-box,
  .signature-card,
  .signature-pad-wrap,
  .signature-pad-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .signature-pad,
  canvas.signature-pad {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 118px !important;
    height: 118px !important;
    border-radius: 18px !important;
    touch-action: none !important;
  }

  .signature-pad-compact,
  canvas.signature-pad-compact {
    min-height: 92px !important;
    height: 92px !important;
  }

  .signature-actions,
  .signature-controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }

  .signature-actions .btn,
  .signature-controls .btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Review/PDF previews are scrollable instead of squeezed. */
  .review-preview,
  .pdf-preview,
  .preview-panel,
  .traveler-preview,
  .labor-preview,
  .operations-preview,
  .line-items-preview,
  .measurement-table,
  .service-table,
  .checklist-table {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 18px !important;
  }

  .review-preview table,
  .pdf-preview table,
  .preview-panel table,
  .traveler-preview table,
  .labor-preview table,
  .operations-preview table,
  .line-items-preview table,
  .measurement-table table,
  .service-table table,
  .checklist-table table {
    min-width: 680px !important;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .form-actions,
  .service-form-actions,
  .notice-actions,
  .packing-slip-actions,
  .coating-actions,
  .coatings-actions,
  .gms-actions,
  .worksheet-actions,
  .pdf-actions,
  .signature-actions,
  .signature-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .form-section,
  .subsection,
  .panel,
  fieldset,
  .section-card,
  .input-card,
  .signature-card,
  .approval-card,
  .review-card,
  .pdf-card {
    padding: 15px !important;
    border-radius: 18px !important;
  }

  .signature-actions,
  .signature-controls {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   MOBILE/PWA FINAL QA V5
   Purpose: iPhone/iPad production polish without changing desktop.
   ========================================================= */
:root {
  --mobile-tap-size: 44px;
  --mobile-page-pad: clamp(14px, 4vw, 22px);
  --mobile-card-pad: clamp(16px, 4vw, 22px);
  --mobile-card-gap: 14px;
  --brand-primary: #C00000;
  --brand-secondary: #990000;
  --brand-bg: #f7f7f8;
  --brand-surface: #ffffff;
  --brand-surface-soft: #f4f4f5;
  --brand-text: #0a0a0a;
  --brand-muted: #555;
  --brand-border: #d7d7dc;
}

@media (hover: none), (pointer: coarse) {
  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
  }

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

  button,
  .btn,
  .role-btn,
  .tool-btn,
  .chip,
  .tab-btn,
  .mini-tab,
  .action-btn,
  .mobile-menu-btn,
  .mobile-signout-btn {
    min-height: var(--mobile-tap-size) !important;
    touch-action: manipulation;
  }

  input,
  select,
  textarea {
    min-height: var(--mobile-tap-size) !important;
  }
}

@media (max-width: 1024px) {
  body.mobile-menu-open {
    overflow: hidden !important;
    touch-action: none;
  }

  body.mobile-menu-open .workspace.sidebar-layout .tools-grid {
    touch-action: pan-y;
  }

  main,
  .workspace,
  .workspace-content,
  .tool-content,
  .screen.active {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .workspace-content,
  .tool-content {
    padding-left: var(--mobile-page-pad) !important;
    padding-right: var(--mobile-page-pad) !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  }

  .panel,
  .card,
  .section-card,
  .form-section,
  .subsection,
  .input-card,
  .review-card,
  .data-card,
  .recent-card,
  .job-card,
  .operation-card,
  .tool-card,
  fieldset {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  .form,
  .grid,
  .form-grid,
  .fields-grid,
  .input-grid,
  .capability-grid,
  .capability-form-grid,
  .traveler-grid,
  .tool-finder-grid,
  .job-grid,
  .request-grid {
    min-width: 0 !important;
  }

  .form-actions,
  .action-row,
  .button-row,
  .controls-row,
  .toolbar,
  .filters-row,
  .search-row {
    gap: 10px !important;
    align-items: stretch !important;
  }

  .form-actions > *,
  .action-row > *,
  .button-row > *,
  .controls-row > *,
  .toolbar > *,
  .filters-row > *,
  .search-row > * {
    min-width: 0 !important;
  }

  .table-wrap,
  .data-table-wrap,
  .responsive-table,
  .preview-table-wrap,
  .labor-preview,
  .operations-preview,
  .line-items-preview,
  .job-log-table-wrap,
  .time-card-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    scrollbar-width: thin;
  }

  table {
    border-collapse: separate;
    border-spacing: 0;
  }

  .table-wrap table,
  .data-table-wrap table,
  .responsive-table table,
  .preview-table-wrap table,
  .labor-preview table,
  .operations-preview table,
  .line-items-preview table,
  .job-log-table-wrap table,
  .time-card-table-wrap table {
    min-width: 720px;
  }

  .mobile-sticky-actions,
  .sticky-mobile-actions {
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 900px) {
  .form-grid,
  .fields-grid,
  .input-grid,
  .capability-form-grid,
  .traveler-grid,
  .tool-finder-grid,
  .job-grid,
  .request-grid {
    grid-template-columns: 1fr !important;
  }

  .two-col,
  .three-col,
  .four-col,
  .split-grid,
  .detail-grid,
  .capability-results-grid,
  .capability-layout,
  .traveler-layout,
  .tool-finder-layout {
    grid-template-columns: 1fr !important;
  }

  .mobile-shell-bar {
    box-shadow: 0 14px 34px rgba(0, 0, 0, .12) !important;
    backdrop-filter: saturate(180%) blur(18px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(18px) !important;
  }
}

@media (max-width: 640px) {
  .workspace-content,
  .tool-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .panel,
  .card,
  .section-card,
  .form-section,
  .subsection,
  .input-card,
  .review-card,
  .data-card,
  .recent-card,
  .job-card,
  .operation-card,
  .tool-card,
  fieldset {
    padding: var(--mobile-card-pad) !important;
  }

  .form-actions,
  .action-row,
  .button-row,
  .controls-row,
  .toolbar,
  .filters-row,
  .search-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .form-actions .btn,
  .action-row .btn,
  .button-row .btn,
  .controls-row .btn,
  .toolbar .btn,
  .filters-row .btn,
  .search-row .btn {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}


/* ============================================================
   MOBILE SHELL CONTROL FIX — reliable hamburger/sign-out taps
   ============================================================ */
@media (max-width: 1024px) {
  body.is-authenticated .mobile-shell-bar {
    position: sticky !important;
    z-index: 3000 !important;
    pointer-events: auto !important;
  }
  .mobile-shell-bar * {
    pointer-events: auto !important;
  }
  .mobile-menu-btn,
  .mobile-signout-btn {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(192, 0, 0, .14);
    user-select: none;
  }
  .mobile-menu-btn {
    position: relative;
    z-index: 3002 !important;
  }
  .mobile-signout-btn {
    position: relative;
    z-index: 3002 !important;
  }
  body.mobile-menu-open .mobile-drawer-backdrop {
    z-index: 2990 !important;
  }
  /* Do not depend on the sidebar-layout class for the mobile drawer. */
  body.is-authenticated #workspaceScreen.active #toolsGrid {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(88vw, 380px) !important;
    max-width: 380px !important;
    min-width: 280px !important;
    z-index: 2995 !important;
    padding: calc(var(--mobile-safe-top, 0px) + 74px) 14px calc(var(--mobile-safe-bottom, 0px) + 18px) !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: color-mix(in srgb, var(--brand-surface, #fff) 92%, transparent) !important;
    backdrop-filter: saturate(180%) blur(28px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(28px) !important;
    border-right: 1px solid var(--brand-border, rgba(0,0,0,.08)) !important;
    box-shadow: 22px 0 70px rgba(0,0,0,.14) !important;
    transform: translate3d(-108%, 0, 0) !important;
    transition: transform 260ms var(--mobile-ease, cubic-bezier(.2,.8,.2,1)) !important;
    will-change: transform !important;
  }
  body.mobile-menu-open #workspaceScreen.active #toolsGrid {
    transform: translate3d(0, 0, 0) !important;
  }
  body.is-authenticated #workspaceScreen.active #toolsGrid::before {
    content: 'Menu';
    position: absolute;
    left: 22px;
    top: calc(var(--mobile-safe-top, 0px) + 22px);
    font-size: 18px;
    font-weight: 800;
    color: var(--brand-text, #1D1D1F);
  }
}
@media (max-width: 640px) {
  body.is-authenticated #workspaceScreen.active #toolsGrid {
    width: min(92vw, 360px) !important;
  }
}

/* ============================================================
   MOBILE DRAWER ACCESS FLOW + CAPABILITY TABLE FIXES
   ============================================================ */
@media (max-width: 1024px) {
  /* Hide the old horizontal access-area strip on mobile. Access now lives inside the drawer. */
  body.is-authenticated .role-bar.active {
    display: none !important;
  }

  body.is-authenticated #workspaceScreen.active #toolsGrid::before {
    content: 'Workspaces';
  }

  .mobile-drawer-access {
    display: grid;
    gap: 12px;
    padding: 0 2px 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--brand-border, rgba(0,0,0,.08));
  }

  .mobile-drawer-kicker {
    padding: 0 6px;
    color: var(--brand-muted, #6e6e73);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .mobile-drawer-kicker.current-tools-label {
    margin-top: 4px;
  }

  .mobile-access-role-list {
    display: grid;
    gap: 8px;
  }

  .mobile-access-role {
    width: 100%;
    min-height: 54px;
    padding: 11px 12px;
    border: 1px solid var(--brand-border, rgba(0,0,0,.08));
    border-radius: 16px;
    background: rgba(255,255,255,.76);
    color: var(--brand-text, #1d1d1f);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    box-shadow: 0 8px 20px rgba(0,0,0,.04);
    -webkit-tap-highlight-color: rgba(192,0,0,.12);
  }

  .mobile-access-role span {
    font-size: 14px;
    font-weight: 800;
  }

  .mobile-access-role small {
    color: var(--brand-muted, #6e6e73);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }

  .mobile-access-role.is-active {
    border-color: rgba(192,0,0,.30);
    background: rgba(192,0,0,.08);
    color: var(--brand-primary, #C00000);
  }

  .mobile-access-role.is-active small {
    color: var(--brand-primary, #C00000);
  }

  .mobile-title-wrap strong,
  .mobile-title-wrap span {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  /* Machine Capability: table rows become readable cards instead of squeezed columns. */
  .capability-machine-card .table-wrap {
    overflow: visible !important;
    border-radius: 18px !important;
  }

  .capability-machine-card .capability-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
  }

  .capability-machine-card .capability-table thead {
    display: none !important;
  }

  .capability-machine-card .capability-table tbody,
  .capability-machine-card .capability-table tr,
  .capability-machine-card .capability-table td {
    display: block !important;
    width: 100% !important;
  }

  .capability-machine-card .capability-table tr {
    padding: 12px !important;
    border: 1px solid var(--brand-border, rgba(0,0,0,.08));
    border-radius: 16px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 8px 18px rgba(0,0,0,.04);
  }

  .capability-machine-card .capability-table td {
    padding: 7px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
    overflow: visible !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  .capability-machine-card .capability-table td:last-child {
    border-bottom: 0 !important;
  }

  .capability-machine-card .capability-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--brand-muted, #6e6e73);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
  }

  .capability-machine-card .capability-table td.fit {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    margin-top: 2px;
  }
}

/* ============================================================
   MOBILE FORMAT AUDIT + ABSENCE FORM POLISH
   Centers mobile cards, prevents sideways overflow, and keeps
   operation/job/data cards consistent without changing desktop.
   ============================================================ */
@media (max-width: 1024px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  #workspaceScreen,
  .workspace,
  .workspace-shell,
  .workspace-content,
  .workflow-panel,
  #sidePanel {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #sidePanel > .panel,
  #sidePanel > section,
  #sidePanel > .card,
  .sales-panel,
  .admin-panel,
  .time-panel,
  .tool-panel,
  .absence-notification-panel {
    width: min(100%, 680px) !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .card,
  .panel,
  .section-card,
  .form-section,
  .subsection,
  .recent-card,
  .data-card,
  .job-card,
  .operation-card,
  .cnc-job-card,
  .cnc-op-card,
  .operator-job-card,
  .tool-card,
  .absence-recent-card {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .job-log-table,
  .admin-job-log-table,
  .mobile-card-list,
  .task-list,
  .cnc-jobs-list,
  .cnc-operator-groups,
  .operator-jobs-list,
  .job-prep-list,
  .tool-results,
  .forms-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .job-card,
  .operation-card,
  .cnc-job-card,
  .cnc-op-card,
  .operator-job-card,
  .shop-helper-row,
  .tool-card,
  .recent-card,
  .absence-recent-card {
    padding: clamp(14px, 4vw, 20px) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  .job-card header,
  .operation-card header,
  .cnc-job-card header,
  .cnc-op-card header,
  .operator-job-card header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: start !important;
  }

  .approval-actions,
  .compact-actions,
  .form-actions,
  .action-row,
  .button-row,
  .toolbar,
  .controls-row {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .approval-actions .btn,
  .compact-actions .btn,
  .form-actions .btn,
  .action-row .btn,
  .button-row .btn,
  .toolbar .btn,
  .controls-row .btn,
  .job-card .btn,
  .operation-card .btn,
  .cnc-job-card .btn,
  .cnc-op-card .btn,
  .operator-job-card .btn {
    min-height: 44px !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .table-wrap,
  .data-table-wrap,
  .responsive-table,
  .preview-table-wrap,
  .labor-preview,
  .operations-preview,
  .line-items-preview,
  .job-log-table-wrap,
  .time-card-table-wrap,
  .table-scroll,
  .operation-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  .table-wrap table,
  .data-table-wrap table,
  .responsive-table table,
  .preview-table-wrap table,
  .labor-preview table,
  .operations-preview table,
  .line-items-preview table,
  .job-log-table-wrap table,
  .time-card-table-wrap table,
  .table-scroll table,
  .operation-table-wrap table {
    min-width: 680px;
  }

  input,
  select,
  textarea,
  .btn {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .absence-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important;
    gap: 14px !important;
  }

  .pdf-export-document.absence-pdf-document {
    background: #fff;
    color: #111827;
    padding: 36px;
    font-family: Arial, sans-serif;
    width: 8in;
    min-height: 10in;
  }

  .absence-pdf-document h1 {
    margin: 0 0 4px;
    font-size: 24px;
  }

  .absence-pdf-document .pdf-brand-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 2px solid #C00000;
    padding-bottom: 16px;
    margin-bottom: 24px;
  }

  .absence-pdf-document .pdf-detail-table {
    width: 100%;
    border-collapse: collapse;
  }

  .absence-pdf-document .pdf-detail-table th,
  .absence-pdf-document .pdf-detail-table td {
    border: 1px solid #d1d5db;
    padding: 12px;
    text-align: left;
    vertical-align: top;
  }

  .absence-pdf-document .pdf-detail-table th {
    width: 34%;
    background: #f9fafb;
    font-weight: 700;
  }

  .absence-pdf-document .pdf-footer {
    margin-top: 36px;
    font-size: 12px;
    color: #4b5563;
    text-align: center;
  }
}

@media (max-width: 640px) {
  #sidePanel > .panel,
  #sidePanel > section,
  #sidePanel > .card,
  .sales-panel,
  .admin-panel,
  .time-panel,
  .tool-panel,
  .absence-notification-panel {
    max-width: calc(100vw - 16px) !important;
  }

  .approval-actions,
  .compact-actions,
  .form-actions,
  .action-row,
  .button-row,
  .toolbar,
  .controls-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .approval-actions .btn,
  .compact-actions .btn,
  .form-actions .btn,
  .action-row .btn,
  .button-row .btn,
  .toolbar .btn,
  .controls-row .btn {
    width: 100% !important;
  }

  .job-log-table:not(.admin-job-log-table) tbody tr,
  .admin-job-log-table tbody tr {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Portrait-phone fix for CNC operation time rows.
   Landscape has enough width for the table; portrait should become stacked cards. */
@media (max-width: 520px) and (orientation: portrait) {
  .cnc-time-entry-panel {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .cnc-time-entry-panel .table-wrap,
  .cnc-time-entry-panel .time-card-table-wrap,
  .cnc-time-entry-panel .operator-time-card-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .cnc-time-entry-panel .cnc-time-table,
  .cnc-time-entry-panel .cnc-time-table thead,
  .cnc-time-entry-panel .cnc-time-table tbody,
  .cnc-time-entry-panel .cnc-time-table tr,
  .cnc-time-entry-panel .cnc-time-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cnc-time-entry-panel .cnc-time-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
  }

  .cnc-time-entry-panel .cnc-time-table thead {
    display: none !important;
  }

  .cnc-time-entry-panel .cnc-time-row {
    margin: 0 0 14px !important;
    padding: 14px !important;
    border: 1px solid var(--border, #D0D0D0) !important;
    border-radius: 18px !important;
    background: var(--surface, #fff) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
    overflow: hidden !important;
  }

  .cnc-time-entry-panel .cnc-time-table td {
    padding: 0 0 10px !important;
    border: 0 !important;
  }

  .cnc-time-entry-panel .cnc-time-table td:last-child {
    padding-bottom: 0 !important;
  }

  .cnc-time-entry-panel .cnc-time-table td::before {
    display: block;
    margin: 0 0 6px;
    color: var(--muted, #444);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  .cnc-time-entry-panel .cnc-time-table td:nth-child(1)::before { content: 'Type'; }
  .cnc-time-entry-panel .cnc-time-table td:nth-child(2)::before { content: 'Start Time'; }
  .cnc-time-entry-panel .cnc-time-table td:nth-child(3)::before { content: 'Stop time'; }
  .cnc-time-entry-panel .cnc-time-table td:nth-child(4)::before { content: 'Duration'; }
  .cnc-time-entry-panel .cnc-time-table td:nth-child(5)::before { content: 'Notes'; }

  .cnc-time-entry-panel .cnc-time-table input,
  .cnc-time-entry-panel .cnc-time-table select,
  .cnc-time-entry-panel .cnc-time-table textarea,
  .cnc-time-entry-panel .cnc-time-table .btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  .cnc-time-entry-panel .remove-cnc-time-row {
    justify-content: center !important;
  }

  .cnc-time-entry-panel .approval-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ============================================================
   FINAL SAFETY LAYOUT PATCH — 2026-05-28
   Fixes portrait phone CNC time rows and desktop Machine Capability
   overlap without changing data behavior or desktop navigation.
   ============================================================ */

/* Desktop/tablet capability: use 2 columns only when there is enough room. */
@media (min-width: 1260px) {
  .work-area.capability-mode,
  .work-area.capability-mode .panel,
  .panel > .capability-tool {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  .panel > .capability-tool,
  .capability-tool {
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .capability-layout {
    display: grid !important;
    grid-template-columns: minmax(560px, .95fr) minmax(560px, 1.05fr) !important;
    gap: 22px !important;
    align-items: start !important;
    max-width: 1240px !important;
    width: 100% !important;
  }

  .capability-inputs,
  .capability-results,
  .capability-route {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  .capability-inputs .form,
  .capability-tool .form,
  .capability-tool .form-grid,
  .capability-tool .time-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 18px !important;
    align-items: start !important;
  }

  .capability-three {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    grid-column: 1 / -1 !important;
  }
}

/* Medium desktops and iPads: stack capability columns before they squeeze. */
@media (min-width: 641px) and (max-width: 1259px) {
  .panel > .capability-tool,
  .capability-tool {
    width: min(100%, 860px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: clip !important;
  }

  .capability-layout,
  .capability-review,
  .capability-brain-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  .capability-inputs .form,
  .capability-tool .form,
  .capability-tool .form-grid,
  .capability-tool .time-grid,
  .capability-three {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 16px !important;
  }
}

@media (min-width: 641px) and (max-width: 820px) {
  .capability-inputs .form,
  .capability-tool .form,
  .capability-tool .form-grid,
  .capability-tool .time-grid,
  .capability-three {
    grid-template-columns: 1fr !important;
  }
}

/* Every capability control must stay inside its card. */
.capability-tool label,
.capability-tool .form label,
.capability-tool input,
.capability-tool select,
.capability-tool textarea,
.capability-tool .status-line,
.capability-tool .capability-image,
.capability-tool .capability-machine-card,
.capability-tool .capability-brain-card {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.capability-tool input,
.capability-tool select,
.capability-tool textarea {
  width: 100% !important;
}

/* Portrait phone CNC operation time cards: never use the wide table width. */
@media (max-width: 600px) and (orientation: portrait) {
  html,
  body,
  #workspaceScreen,
  .workspace,
  .workspace-content,
  .workflow-panel,
  .work-area,
  #sidePanel {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  #sidePanel,
  #sidePanel > .panel,
  #sidePanel > section,
  #sidePanel > .card,
  #sidePanel > form,
  #cncTimeForm,
  .cnc-time-entry-panel {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .cnc-time-entry-panel .table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .cnc-time-entry-panel table.cnc-time-table,
  .cnc-time-entry-panel .cnc-time-table,
  .cnc-time-entry-panel .cnc-time-table tbody,
  .cnc-time-entry-panel .cnc-time-table tr,
  .cnc-time-entry-panel .cnc-time-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    table-layout: auto !important;
  }

  .cnc-time-entry-panel .cnc-time-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
  }

  .cnc-time-entry-panel .cnc-time-table thead {
    display: none !important;
  }

  .cnc-time-entry-panel .cnc-time-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
    padding: 14px !important;
    border: 1px solid var(--border, #D0D0D0) !important;
    border-radius: 18px !important;
    background: var(--surface, #fff) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .06) !important;
    overflow: hidden !important;
  }

  .cnc-time-entry-panel .cnc-time-table td {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .cnc-time-entry-panel .cnc-time-table td::before {
    display: block !important;
    margin: 0 0 5px !important;
    color: var(--faint, #666) !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
  }

  .cnc-time-entry-panel .cnc-time-table td:nth-child(1)::before { content: 'Type' !important; }
  .cnc-time-entry-panel .cnc-time-table td:nth-child(2)::before { content: 'Start Time' !important; }
  .cnc-time-entry-panel .cnc-time-table td:nth-child(3)::before { content: 'Stop time' !important; }
  .cnc-time-entry-panel .cnc-time-table td:nth-child(4)::before { content: 'Duration' !important; }
  .cnc-time-entry-panel .cnc-time-table td:nth-child(5)::before { content: 'Notes' !important; }

  .cnc-time-entry-panel .cnc-time-table input,
  .cnc-time-entry-panel .cnc-time-table select,
  .cnc-time-entry-panel .cnc-time-table textarea,
  .cnc-time-entry-panel .cnc-time-table button,
  .cnc-time-entry-panel .cnc-time-table .btn {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 46px !important;
    box-sizing: border-box !important;
  }

  .cnc-time-entry-panel .approval-actions,
  #cncTimeForm > .approval-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   FINAL PORTRAIT PHONE OVERFLOW FIX
   CNC Operation Time Card rows must fit narrow portrait screens.
   This intentionally uses broad selectors because the same row pattern
   is rendered from tables on some screens and cards on others.
   ========================================================= */
@media screen and (max-width: 700px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  #app,
  #workspaceScreen,
  .screen,
  .screen.active,
  .workspace,
  .workspace-content,
  .tool-content,
  .workflow-panel,
  .work-area,
  #sidePanel,
  .panel,
  .form,
  .form-section,
  .subsection,
  .card,
  .section-card {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #cncTimeForm,
  #cncTimeForm .form-section,
  #cncTimeForm .cnc-time-entry-panel,
  .cnc-time-entry-panel,
  .time-card-table-wrap,
  .cnc-time-entry-panel .table-wrap {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Turn the CNC time table into stacked cards on portrait/narrow phones. */
  #cncTimeForm table.cnc-time-table,
  .cnc-time-entry-panel table.cnc-time-table,
  table.cnc-time-table,
  #cncTimeForm .cnc-time-table,
  .cnc-time-entry-panel .cnc-time-table,
  .cnc-time-table tbody,
  .cnc-time-table tr,
  .cnc-time-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    overflow: visible !important;
  }

  .cnc-time-table thead {
    display: none !important;
  }

  .cnc-time-table tbody {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .cnc-time-table tr.cnc-time-row,
  tr.cnc-time-row,
  .cnc-time-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid var(--brand-border, var(--border, #d7d7dc)) !important;
    border-radius: 18px !important;
    background: var(--brand-surface, var(--surface, #fff)) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06) !important;
    overflow: hidden !important;
  }

  .cnc-time-table tr.cnc-time-row td,
  tr.cnc-time-row td,
  .cnc-time-row td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  .cnc-time-table tr.cnc-time-row td::before,
  tr.cnc-time-row td::before {
    content: attr(data-label) !important;
    display: block !important;
    margin: 0 0 6px !important;
    color: var(--brand-muted, var(--faint, #666)) !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
  }

  .cnc-time-row input,
  .cnc-time-row select,
  .cnc-time-row textarea,
  .cnc-time-row button,
  .cnc-time-row .btn,
  #cncTimeForm input,
  #cncTimeForm select,
  #cncTimeForm textarea,
  #cncTimeForm button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cnc-time-row button,
  .cnc-time-row .btn,
  #cncTimeForm .approval-actions .btn {
    justify-content: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
  }

  #cncTimeForm .approval-actions,
  .cnc-time-entry-panel .approval-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
  }
}

/* Desktop/large-screen Machine Capability guard: no overlapping inputs. */
@media screen and (min-width: 701px) {
  .capability-tool,
  .capability-layout,
  .capability-inputs,
  .capability-results,
  .capability-review,
  .capability-brain-grid,
  .capability-three,
  .capability-tool .form,
  .capability-tool .form-grid,
  .capability-tool .time-grid {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .capability-tool input,
  .capability-tool select,
  .capability-tool textarea,
  .capability-tool label,
  .capability-tool .status-line {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .capability-tool input,
  .capability-tool select,
  .capability-tool textarea {
    width: 100% !important;
  }
}



/* =========================================================
   Targeted iPad/tablet Machine Capability formatting fix
   Keeps desktop and phone layouts intact while preventing
   feature/checklist labels from collapsing into skinny text.
   ========================================================= */
@media (min-width: 641px) and (max-width: 1180px) {
  .capability-tool,
  .capability-tool * {
    min-width: 0;
    box-sizing: border-box;
  }

  .capability-tool {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .capability-layout,
  .capability-review,
  .capability-brain-grid,
  .capability-three {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 18px !important;
  }

  .capability-inputs,
  .capability-results,
  .capability-route,
  .capability-brain-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .capability-tool .form,
  .capability-tool .form-grid,
  .capability-tool .time-grid,
  .capability-tool .grid-2,
  .capability-tool .grid-3 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    gap: 14px 18px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .capability-tool input,
  .capability-tool select,
  .capability-tool textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .capability-checks,
  .capability-tool .check-grid,
  .capability-tool .feature-grid,
  .capability-tool .checkbox-grid,
  .capability-tool .options-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    gap: 10px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .capability-checks label,
  .capability-tool .check-grid label,
  .capability-tool .feature-grid label,
  .capability-tool .checkbox-grid label,
  .capability-tool .options-grid label {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.35 !important;
  }

  .capability-checks input[type="checkbox"],
  .capability-tool .check-grid input[type="checkbox"],
  .capability-tool .feature-grid input[type="checkbox"],
  .capability-tool .checkbox-grid input[type="checkbox"],
  .capability-tool .options-grid input[type="checkbox"] {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
  }
}

@media (min-width: 641px) and (max-width: 820px) {
  .capability-tool .form,
  .capability-tool .form-grid,
  .capability-tool .time-grid,
  .capability-tool .grid-2,
  .capability-tool .grid-3,
  .capability-checks,
  .capability-tool .check-grid,
  .capability-tool .feature-grid,
  .capability-tool .checkbox-grid,
  .capability-tool .options-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   FINAL SAFE PATCH: Job Log visibility, iPad Capability, PDF glass polish
   Scoped overrides only: do not change app structure or desktop navigation.
   ========================================================= */

/* Liquid-glass action bars for every Save/Email PDF area */
.pdf-toolbar,
.job-log-pdf-card-actions,
.approval-actions.pdf-actions,
.pdf-actions,
.no-print .approval-actions {
  border: 1px solid rgba(192, 0, 0, 0.10) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.72)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08) !important;
  border-radius: 22px !important;
  padding: 12px !important;
  gap: 12px !important;
  align-items: center !important;
}

.pdf-toolbar .btn,
.job-log-pdf-card-actions .btn,
.pdf-actions .btn,
.no-print .approval-actions .btn {
  min-height: 44px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  white-space: normal !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.06) !important;
}

.pdf-toolbar .btn.primary,
.job-log-pdf-card-actions .btn.primary,
.pdf-actions .btn.primary,
.no-print .approval-actions .btn.primary {
  box-shadow: 0 14px 26px rgba(192,0,0,.18) !important;
}

.job-log-pdf-list {
  display: grid !important;
  gap: 18px !important;
  padding: clamp(14px, 2vw, 24px) !important;
}

.job-log-pdf-card {
  border: 1px solid rgba(15,23,42,.08) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.78)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
  box-shadow: 0 20px 48px rgba(15,23,42,.08) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
}

.job-log-pdf {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 18px !important;
  color: var(--text, #0a0a0a) !important;
}

.job-log-pdf-page {
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto 22px !important;
  padding: clamp(18px, 3vw, 34px) !important;
  border-radius: 26px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 18px 38px rgba(15,23,42,.08) !important;
  overflow: hidden !important;
  page-break-after: always;
}

.job-log-pdf-page header,
.job-log-pdf-summary {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 10px 14px !important;
  align-items: start !important;
}

.job-log-pdf-table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.job-log-pdf-table th,
.job-log-pdf-table td {
  padding: 8px 7px !important;
  vertical-align: top !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.job-log-pdf-table th:nth-child(1),
.job-log-pdf-table td:nth-child(1) { width: 20% !important; }
.job-log-pdf-table th:nth-child(2),
.job-log-pdf-table td:nth-child(2) { width: 24% !important; }
.job-log-pdf-table th:nth-child(3),
.job-log-pdf-table td:nth-child(3) { width: 10% !important; }
.job-log-pdf-table th:nth-child(4),
.job-log-pdf-table td:nth-child(4) { width: 8% !important; }
.job-log-pdf-table th:nth-child(5),
.job-log-pdf-table td:nth-child(5) { width: 18% !important; }
.job-log-pdf-table th:nth-child(6),
.job-log-pdf-table td:nth-child(6) { width: 20% !important; }

.job-log-pdf-table span {
  display: block !important;
  color: var(--muted, #666) !important;
  font-size: 9.5px !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
}

/* iPad/tablet Machine Capability fix without touching phone/desktop design */
@media (min-width: 700px) and (max-width: 1180px) {
  .work-area.capability-mode,
  .panel > .capability-tool,
  .capability-tool {
    width: min(100%, 920px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .capability-layout,
  .capability-review,
  .capability-brain-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .capability-inputs,
  .capability-results,
  .capability-route,
  .capability-machine-card,
  .capability-brain-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .capability-tool .form,
  .capability-tool .form-grid,
  .capability-tool .time-grid,
  .capability-three {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .capability-tool .form > label,
  .capability-tool .time-grid > label,
  .capability-three > label,
  .capability-tool input,
  .capability-tool select,
  .capability-tool textarea,
  .capability-tool .status-line,
  .capability-image {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .capability-checks,
  .capability-tool .check-grid,
  .capability-tool .feature-grid,
  .capability-tool .checkbox-grid,
  .capability-tool .options-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
    gap: 10px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
  }

  .capability-checks label,
  .capability-tool .check-grid label,
  .capability-tool .feature-grid label,
  .capability-tool .checkbox-grid label,
  .capability-tool .options-grid label {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
    text-orientation: mixed !important;
    writing-mode: horizontal-tb !important;
  }
}

@media (min-width: 700px) and (max-width: 820px) {
  .capability-tool .form,
  .capability-tool .form-grid,
  .capability-tool .time-grid,
  .capability-three,
  .capability-checks,
  .capability-tool .check-grid,
  .capability-tool .feature-grid,
  .capability-tool .checkbox-grid,
  .capability-tool .options-grid {
    grid-template-columns: 1fr !important;
  }
}

@media print {
  .pdf-toolbar,
  .job-log-pdf-card-actions,
  .no-print { display: none !important; }
  .job-log-pdf-page {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: .35in !important;
  }
}

/* ============================================================
   APPLE-STYLE MOBILE DRILL-DOWN DRAWER
   Top level: approved access areas. Second level: tools for that area.
   Desktop is untouched; this only affects mobile/tablet drawer behavior.
   ============================================================ */
.mobile-drawer-flow { display: none; }

@media (max-width: 1024px) {
  body.is-authenticated #workspaceScreen.active #toolsGrid {
    width: min(92vw, 410px) !important;
    max-width: 410px !important;
    padding: calc(var(--mobile-safe-top, 0px) + 68px) 14px calc(var(--mobile-safe-bottom, 0px) + 18px) !important;
    background:
      radial-gradient(circle at top left, color-mix(in srgb, var(--brand-primary, #C00000) 26%, transparent), transparent 34%),
      linear-gradient(150deg, rgba(18,18,22,.96), rgba(34,20,24,.94) 42%, rgba(12,12,15,.96)) !important;
    color: #fff !important;
    border-right: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 30px 0 90px rgba(0,0,0,.38) !important;
    backdrop-filter: saturate(190%) blur(34px) !important;
    -webkit-backdrop-filter: saturate(190%) blur(34px) !important;
  }

  body.is-authenticated #workspaceScreen.active #toolsGrid::before {
    content: 'Menu' !important;
    color: rgba(255,255,255,.96) !important;
    letter-spacing: -.02em;
  }

  body.is-authenticated #workspaceScreen.active #toolsGrid .workflow-sidebar,
  body.is-authenticated #workspaceScreen.active #toolsGrid .mobile-drawer-access {
    display: none !important;
  }

  .mobile-drawer-flow {
    display: block;
    position: relative;
    width: 100%;
    min-height: calc(100dvh - var(--mobile-safe-top, 0px) - var(--mobile-safe-bottom, 0px) - 100px);
    overflow: hidden;
    color: #fff;
  }

  .mobile-drawer-track {
    position: relative;
    width: 100%;
    min-height: inherit;
  }

  .mobile-drawer-pane {
    position: absolute;
    inset: 0;
    width: 100%;
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 18px;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(22%, 0, 0);
    transition:
      transform 320ms cubic-bezier(.22,.9,.22,1),
      opacity 220ms ease;
    will-change: transform, opacity;
  }

  .mobile-drawer-flow[data-view="areas"] .mobile-drawer-areas-pane,
  .mobile-drawer-pane.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }

  .mobile-drawer-flow[data-view="tools"] .mobile-drawer-areas-pane {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-18%, 0, 0);
  }

  .mobile-drawer-panel-title {
    display: grid;
    gap: 4px;
    padding: 0 6px 2px;
  }

  .mobile-drawer-panel-title span {
    color: rgba(255,255,255,.58);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .mobile-drawer-panel-title strong {
    color: #fff;
    font-size: clamp(25px, 7vw, 34px);
    line-height: 1;
    letter-spacing: -.05em;
    font-weight: 800;
  }

  .mobile-drill-list {
    display: grid;
    gap: 10px;
    width: 100%;
    min-width: 0;
  }

  .mobile-drill-row {
    width: 100%;
    min-width: 0;
    min-height: 58px;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 20px;
    background:
      linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
    color: #fff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 36px rgba(0,0,0,.18);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    transform: translate3d(0,0,0);
    transition: transform 160ms cubic-bezier(.2,.8,.2,1), background 160ms ease, border-color 160ms ease;
    -webkit-tap-highlight-color: rgba(192,0,0,.18);
  }



  /* Companion app switcher: make the Operations/CNC jump unmistakable. */
  .mobile-companion-row {
    min-height: 78px;
    padding: 15px 16px;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    border: 1px solid rgba(255,255,255,.42);
    background:
      radial-gradient(circle at 18% 12%, rgba(255,255,255,.26), transparent 34%),
      linear-gradient(135deg, #d80016 0%, #b40012 55%, #76000c 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.30),
      0 18px 44px rgba(192,0,0,.34),
      0 0 0 3px rgba(255,255,255,.06);
  }

  .mobile-companion-row::before {
    content: '↗';
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.30);
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
  }

  .mobile-companion-row .mobile-drill-copy strong {
    font-size: 20px;
    font-weight: 850;
    letter-spacing: -.035em;
  }

  .mobile-companion-row .mobile-drill-copy small {
    color: rgba(255,255,255,.88);
    font-size: 12px;
    font-weight: 650;
  }

  .mobile-companion-row .mobile-drill-chevron {
    color: #fff;
    font-weight: 500;
    text-shadow: 0 2px 10px rgba(0,0,0,.25);
  }

  .mobile-companion-row:active {
    transform: scale(.975) translate3d(0,0,0);
    border-color: rgba(255,255,255,.72);
    background: linear-gradient(135deg, #ef001b 0%, #c00000 58%, #83000d 100%);
  }

  .mobile-drill-row:active {
    transform: scale(.985) translate3d(0,0,0);
    border-color: color-mix(in srgb, var(--brand-primary, #C00000) 52%, rgba(255,255,255,.24));
    background: linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.09));
  }

  .mobile-drill-row.tool {
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }

  .mobile-drill-row .workflow-sidebar-icon {
    background: color-mix(in srgb, var(--brand-primary, #C00000) 84%, #fff 16%) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  .mobile-drill-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  .mobile-drill-copy strong {
    color: #fff;
    font-size: 18px;
    line-height: 1.12;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
  }

  .mobile-drill-copy small {
    color: rgba(255,255,255,.64);
    font-size: 12px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-drill-chevron {
    color: rgba(255,255,255,.58);
    font-size: 34px;
    line-height: 1;
    font-weight: 300;
  }

  .mobile-drawer-back {
    justify-self: start;
    min-height: 42px;
    padding: 0 12px 0 6px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255,255,255,.82);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    font-weight: 700;
    -webkit-tap-highlight-color: rgba(192,0,0,.18);
  }

  .mobile-drawer-back span {
    font-size: 31px;
    line-height: 1;
    margin-top: -2px;
  }

  .mobile-drawer-empty {
    padding: 14px;
    border-radius: 18px;
    color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
  }

  .mobile-drill-row .workflow-sidebar-badge {
    display: inline-flex !important;
    background: var(--brand-primary, #C00000) !important;
    color: #fff !important;
    border: 0 !important;
  }
}

/* ============================================================
   MOBILE DRILL-DOWN DRAWER RELIABILITY PATCH
   Keeps second-level tool lists scrollable and prevents hidden panes
   from catching taps. Desktop layout remains untouched.
   ============================================================ */
@media (max-width: 1024px) {
  body.is-authenticated #workspaceScreen.active #toolsGrid {
    overflow: hidden !important;
  }

  .mobile-drawer-flow,
  .mobile-drawer-track {
    height: calc(100dvh - var(--mobile-safe-top, 0px) - var(--mobile-safe-bottom, 0px) - 100px) !important;
    min-height: 0 !important;
  }

  .mobile-drawer-pane {
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: calc(var(--mobile-safe-bottom, 0px) + 26px) !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-drawer-pane:not(.is-active) {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .mobile-drawer-pane.is-active,
  .mobile-drawer-flow[data-view="areas"] .mobile-drawer-areas-pane {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .mobile-drill-list {
    padding-bottom: calc(var(--mobile-safe-bottom, 0px) + 28px) !important;
  }

  .mobile-drill-row {
    cursor: pointer;
    touch-action: manipulation;
  }

  .mobile-drill-row.tool {
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
  }

  .mobile-drill-row.tool .mobile-drill-copy small {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* Job Prep flexible action row */
.prep-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}
.prep-actions .btn {
  min-width: 92px;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .prep-actions {
    justify-content: stretch;
  }
  .prep-actions .btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }
}

/* Improved Job Prep drawer + notes workflow */
.shop-helper-row {
  display: block;
}
.job-prep-controls {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(180px, 260px);
  gap: 12px;
  margin: 14px 0;
}
.job-prep-controls label {
  font-weight: 700;
}
.job-prep-controls input,
.job-prep-controls select {
  margin-top: 6px;
}
.prep-aging-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.prep-aging-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg, #fff);
}
.prep-aging-card span,
.prep-aging-card small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}
.prep-aging-card strong {
  display: block;
  margin: 4px 0;
  font-size: 1.55rem;
  line-height: 1;
}
.prep-aging-card.danger { border-left: 4px solid #c00000; }
.prep-aging-card.warn { border-left: 4px solid #e88519; }
.prep-aging-card.watch { border-left: 4px solid #2761c7; }
.prep-aging-card.good { border-left: 4px solid #2a7a3e; }
.prep-operator-section {
  padding: 0;
  overflow: hidden;
}
.prep-operator-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 800;
}
.prep-operator-summary small {
  color: var(--muted);
  font-weight: 600;
}
.prep-operator-section .cnc-ops-list {
  padding: 0 16px 16px;
}
.prep-job-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
}
.prep-title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.prep-age-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}
.prep-age-badge.danger { background: #fde8e8; color: #a32d2d; }
.prep-age-badge.warn { background: #fff0e0; color: #854f0b; }
.prep-age-badge.watch { background: #eef5ff; color: #2761c7; }
.prep-age-badge.good { background: #e8f5e8; color: #1a5c1a; }
.prep-held {
  border-style: dashed;
  opacity: 0.88;
}
.prep-note-preview {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-style: normal;
}
.prep-drawer {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel-soft, rgba(0,0,0,0.03));
}
.prep-drawer-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.prep-drawer-head span,
.prep-drawer-grid span,
.prep-operation-list span {
  display: block;
  color: var(--muted);
  font-size: 0.86rem;
}
.prep-drawer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.prep-drawer-grid > div,
.prep-operation-list > div {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg, #fff);
}
.prep-operation-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.prep-notes-label {
  display: block;
  font-weight: 700;
}
.prep-notes {
  min-height: 110px;
  margin-top: 6px;
}
.prep-drawer-actions {
  justify-content: flex-end;
  margin-top: 10px;
}
@media (max-width: 900px) {
  .job-prep-controls,
  .prep-aging-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .prep-job-main {
    grid-template-columns: 1fr;
  }
  .prep-drawer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .job-prep-controls,
  .prep-aging-summary {
    grid-template-columns: 1fr;
  }
  .prep-operator-summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .prep-drawer-head {
    flex-direction: column;
  }
  .prep-drawer-grid {
    grid-template-columns: 1fr;
  }
}

/* iPad/tablet Clock In / Out cleanup */
.clock-face {
  display: grid;
  gap: 18px;
}

.scanner-box {
  display: grid;
  gap: 5px;
  line-height: 1.35;
}

.scanner-box strong,
.scanner-box span,
.scanner-box small {
  display: block;
}

.manual-override-panel {
  display: grid;
  gap: 12px;
}

@media (min-width: 700px) and (max-width: 1180px) {
  #sidePanel .clock-face {
    width: min(100%, 920px);
    margin-inline: auto;
    gap: 20px !important;
  }

  #sidePanel .clock-face .time {
    font-size: clamp(56px, 7vw, 76px) !important;
    line-height: 0.98 !important;
  }

  #sidePanel .badge-scan {
    gap: 16px !important;
  }

  #sidePanel .scanner-box {
    padding: 0 2px;
  }

  #sidePanel .scanner-box strong {
    font-size: 18px;
    line-height: 1.2;
  }

  #sidePanel .scanner-box span,
  #sidePanel .scanner-box small {
    font-size: 15px;
    line-height: 1.35;
  }

  #sidePanel .badge-row {
    grid-template-columns: minmax(0, 1fr) 150px !important;
    align-items: stretch;
  }

  #sidePanel .manual-override-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    padding: 18px !important;
  }

  #sidePanel .manual-override-panel label:last-of-type {
    grid-column: 1 / -1;
  }

  #sidePanel #approveManualOverrideBtn {
    width: auto !important;
    min-width: 180px;
    justify-self: start;
  }

  #sidePanel .two-buttons {
    grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    gap: 16px !important;
  }

  #sidePanel .time-clock-history {
    display: grid;
    gap: 12px;
  }
}

@media (max-width: 699px) {
  #sidePanel .badge-row,
  #sidePanel .two-buttons,
  #sidePanel .manual-override-panel {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   SCI Unified PDF Design System
   Applies the same clean Apple-style / Salesman PDF look to
   Notice of Receipt, Coatings Cut Sheet, Packing Slip,
   service worksheets, Gasket Template, GMS, ROI, Time Off,
   Declined Quote, Capability Quote, and other PDF previews.
   ========================================================= */
/* ============================================================
   SCI UNIFIED PDF DESIGN SYSTEM — Clean / Simple
   One consistent format for all 16 app-generated PDFs.
   Red top bar · plain white body · light meta strip · minimal tables
   ============================================================ */

.pdf-export-document {
  --pdf-red:    #C00000;
  --pdf-ink:    #101828;
  --pdf-muted:  #667085;
  --pdf-border: #e5e7eb;
  --pdf-soft:   #f9fafb;
  --pdf-alt:    #f3f4f6;
  width: min(100%, 8.5in) !important;
  max-width: 8.5in !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0.5px solid #e0e0e0 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  color: var(--pdf-ink) !important;
  font-family: -apple-system, 'SF Pro Text', BlinkMacSystemFont, 'Helvetica Neue', sans-serif !important;
  overflow: hidden !important;
}

/* Red top bar — replaces the heavy gradient header */
.pdf-export-document::before {
  content: '' !important;
  display: block !important;
  height: 5px !important;
  background: var(--pdf-red) !important;
  width: 100% !important;
}

/* Header row: company + doc type on left, doc# + date on right */
.pdf-export-document > header,
.pdf-preview.pdf-export-document > header,
.pdf-export-document .pdf-brand-row {
  position: static !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 12px !important;
  align-items: start !important;
  margin: 0 !important;
  padding: 20px 24px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pdf-border) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--pdf-ink) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Remove the decorative circle pseudo-element */
.pdf-export-document > header::after,
.pdf-preview.pdf-export-document > header::after,
.pdf-export-document .pdf-brand-row::after {
  content: none !important;
  display: none !important;
}

/* Company kicker — small red uppercase */
.pdf-export-document header strong,
.pdf-preview.pdf-export-document header strong,
.pdf-export-document .pdf-brand-row strong {
  display: block !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--pdf-red) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

/* Doc type heading */
.pdf-export-document > header h1,
.pdf-export-document > header h2,
.pdf-preview.pdf-export-document > header h1,
.pdf-preview.pdf-export-document > header h2 {
  margin: 0 !important;
  color: #101828 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

/* Sub-text in header (date, ref#) */
.pdf-export-document > header p,
.pdf-preview.pdf-export-document > header p {
  margin: 4px 0 0 !important;
  color: var(--pdf-muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  text-align: right !important;
}

.pdf-export-document h1,
.pdf-export-document h2,
.pdf-export-document h3 {
  letter-spacing: 0 !important;
  color: var(--pdf-ink) !important;
}

/* Meta grid — label/value cells below the header */
.pdf-export-document .pdf-grid,
.pdf-export-document .pdf-approvals {
  display: grid !important;
  gap: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--pdf-border) !important;
}

.pdf-export-document .pdf-grid > div,
.pdf-export-document .pdf-approvals > div,
.pdf-export-document .stat-card,
.pdf-export-document .quote-card,
.pdf-export-document .pdf-card {
  min-height: 0 !important;
  padding: 10px 24px !important;
  border: 0 !important;
  border-right: 1px solid var(--pdf-border) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.pdf-export-document .pdf-grid > div:last-child,
.pdf-export-document .pdf-approvals > div:last-child,
.pdf-export-document .stat-card:last-child,
.pdf-export-document .quote-card:last-child,
.pdf-export-document .pdf-card:last-child {
  border-right: 0 !important;
}

/* Span = label, strong = value */
.pdf-export-document span,
.pdf-preview.pdf-export-document span {
  display: block !important;
  color: #9ca3af !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  margin-bottom: 3px !important;
}

.pdf-export-document strong {
  display: block !important;
  color: var(--pdf-ink) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Note / remarks box */
.pdf-export-document .pdf-note {
  margin: 0 24px 0 !important;
  padding: 11px 14px !important;
  border: 0.5px solid var(--pdf-border) !important;
  border-radius: 0 !important;
  background: var(--pdf-soft) !important;
  color: #374151 !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
}

/* Table wrapper */
.pdf-export-document .table-wrap {
  margin: 16px 24px !important;
  border: 0.5px solid var(--pdf-border) !important;
  border-radius: 6px !important;
  background: #fff !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

/* Tables */
.pdf-export-document table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 12px !important;
}

.pdf-export-document table thead th {
  padding: 8px 10px !important;
  border: 0 !important;
  border-bottom: 0.5px solid var(--pdf-border) !important;
  background: var(--pdf-soft) !important;
  color: #6b7280 !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.pdf-export-document table tbody td {
  padding: 9px 10px !important;
  border-bottom: 0.5px solid var(--pdf-border) !important;
  color: var(--pdf-ink) !important;
  vertical-align: top !important;
}

.pdf-export-document table tbody tr:last-child td {
  border-bottom: 0 !important;
}

.pdf-export-document table tbody tr:nth-child(even) td {
  background: var(--pdf-alt) !important;
}

/* Signature boxes */
.pdf-export-document .signature-box {
  margin: 0 24px !important;
  padding: 10px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid #d1d5db !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Footer */
.pdf-export-document footer {
  margin: 16px 24px 0 !important;
  padding: 10px 0 14px !important;
  border-top: 0.5px solid var(--pdf-border) !important;
  color: #9ca3af !important;
  font-size: 11px !important;
  display: flex !important;
  justify-content: space-between !important;
}

/* Absence notification — keep its own header style, just clean it up */
.pdf-export-document.absence-pdf-document .pdf-brand-row,
.pdf-export-document.absence-pdf-document .absence-pdf-brand-row {
  margin-bottom: 0 !important;
  padding: 18px 24px !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--pdf-border) !important;
}

.pdf-export-document.absence-pdf-document .pdf-brand-row::after,
.pdf-export-document.absence-pdf-document .absence-pdf-brand-row::after {
  display: none !important;
  content: none !important;
}

.pdf-export-document.absence-pdf-document .pdf-brand-row h1,
.pdf-export-document.absence-pdf-document .absence-pdf-brand-row h1 {
  font-size: clamp(28px, 4vw, 40px) !important;
  line-height: 1.05 !important;
  color: #101828 !important;
}

.pdf-export-document.absence-pdf-document .pdf-brand-row p,
.pdf-export-document.absence-pdf-document .absence-pdf-brand-row p {
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: #667085 !important;
}

.pdf-export-document.absence-pdf-document .absence-pdf-footer {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px 20px !important;
  width: 100% !important;
  margin-top: 16px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  text-align: center !important;
}

/* Print overrides — strip card chrome for clean paper output */
@media print {
  body { background: #fff !important; }
  .pdf-export-document {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    overflow: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .pdf-export-document::before {
    height: 4px !important;
  }
  .pdf-export-document > header,
  .pdf-preview.pdf-export-document > header,
  .pdf-export-document .pdf-brand-row,
  .pdf-export-document .pdf-grid > div,
  .pdf-export-document .pdf-approvals > div,
  .pdf-export-document .pdf-note,
  .pdf-export-document .table-wrap,
  .pdf-export-document .signature-box {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
}

/* Android phone scroll rescue: keep normal one-finger page scrolling enabled. */
html,
body {
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-y: auto;
}

@media (max-width: 1024px) {
  body:not(.mobile-menu-open),
  body:not(.mobile-menu-open) .app-shell,
  body:not(.mobile-menu-open) main,
  body:not(.mobile-menu-open) #workspaceScreen,
  body:not(.mobile-menu-open) .screen.active,
  body:not(.mobile-menu-open) .workspace,
  body:not(.mobile-menu-open) .work-area,
  body:not(.mobile-menu-open) #sidePanel {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    touch-action: pan-y pinch-zoom !important;
    overscroll-behavior-y: auto !important;
  }

  body:not(.mobile-menu-open) .mobile-drawer-backdrop {
    display: none !important;
    pointer-events: none !important;
  }

  body.mobile-menu-open {
    overflow: hidden !important;
  }

  body.mobile-menu-open #workspaceScreen.active #toolsGrid,
  body.mobile-menu-open .mobile-drawer-pane.is-active {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
}

/* Keep mobile navigation available on every app screen. */
@media (max-width: 1024px) {
  body.is-authenticated .mobile-shell-bar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    z-index: 4000 !important;
  }

  body.is-authenticated #workspaceScreen.screen.active {
    padding-top: calc(var(--mobile-nav-height, 62px) + var(--mobile-safe-top, 0px) + 14px) !important;
  }

  body.is-authenticated .app-shell,
  body.is-authenticated main,
  body.is-authenticated #workspaceScreen {
    scroll-padding-top: calc(var(--mobile-nav-height, 62px) + var(--mobile-safe-top, 0px) + 16px) !important;
  }

  body.is-authenticated #workspaceScreen.active #toolsGrid {
    padding-top: calc(var(--mobile-safe-top, 0px) + 84px) !important;
  }
}

/* Android scroll hard fix: closed mobile drawer must not catch page touches. */
@media (max-width: 1024px) {
  html,
  body,
  .app-shell,
  main,
  #workspaceScreen,
  .screen.active {
    position: relative !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y pinch-zoom !important;
  }

  body.mobile-menu-open {
    overflow-y: auto !important;
    touch-action: pan-y pinch-zoom !important;
  }

  body.is-authenticated:not(.mobile-menu-open) #workspaceScreen.active #toolsGrid {
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(-112%, 0, 0) !important;
    overflow: hidden !important;
  }

  body.mobile-menu-open #workspaceScreen.active #toolsGrid {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.is-authenticated:not(.mobile-menu-open) .mobile-drawer-flow,
  body.is-authenticated:not(.mobile-menu-open) .mobile-drawer-track,
  body.is-authenticated:not(.mobile-menu-open) .mobile-drawer-pane,
  body.is-authenticated:not(.mobile-menu-open) .mobile-drawer-backdrop {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .work-area,
  .workspace.sidebar-layout .work-area,
  #sidePanel,
  .panel {
    overflow-y: visible !important;
    touch-action: pan-y pinch-zoom !important;
  }
}

/* Mobile drawer clarity fix: remove glass blur that makes text fuzzy on phones. */
@media (max-width: 1024px) {
  body.is-authenticated #workspaceScreen.active #toolsGrid {
    background: #211618 !important;
    background-image: none !important;
    background-clip: border-box !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    transform: translateX(-108%) !important;
    will-change: auto !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
  }

  body.mobile-menu-open #workspaceScreen.active #toolsGrid {
    transform: translateX(0) !important;
  }

  body.is-authenticated #workspaceScreen.active #toolsGrid::before,
  body.is-authenticated #workspaceScreen.active #toolsGrid::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .mobile-drawer-flow,
  .mobile-drawer-track {
    overflow: hidden !important;
    position: relative !important;
  }

  .mobile-drawer-flow {
    min-height: calc(100dvh - var(--mobile-safe-top, 0px) - var(--mobile-safe-bottom, 0px) - 100px) !important;
  }

  .mobile-drawer-track {
    min-height: inherit !important;
  }

  .mobile-drawer-backdrop,
  .mobile-shell-bar,
  .mobile-drill-row,
  .mobile-drill-row:active {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }

  .mobile-drill-row {
    background: #342a2c !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 18px rgba(0,0,0,.18) !important;
    transform: none !important;
    will-change: auto !important;
    color: #fff !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 3 !important;
    touch-action: manipulation !important;
    user-select: none !important;
  }

  .mobile-drill-row:active {
    transform: none !important;
    background: #3d3032 !important;
  }

  .mobile-drawer-pane {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    align-content: start !important;
    gap: 18px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(24%, 0, 0) !important;
    transition: transform 260ms cubic-bezier(.22,.9,.22,1), opacity 180ms ease !important;
    will-change: transform, opacity !important;
    z-index: 0 !important;
  }

  .mobile-drawer-pane:not(.is-active) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  .mobile-drawer-pane.is-active,
  .mobile-drawer-flow[data-view="areas"] .mobile-drawer-areas-pane {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
    z-index: 2 !important;
  }

  .mobile-drawer-flow[data-view="tools"] .mobile-drawer-areas-pane {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(-20%, 0, 0) !important;
    z-index: 0 !important;
  }

  .mobile-drawer-flow[data-view="areas"] .mobile-drawer-tools-pane {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(24%, 0, 0) !important;
    z-index: 0 !important;
  }

  .mobile-drawer-flow[data-view="tools"] .mobile-drawer-tools-pane:not(.is-active) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  .mobile-drawer-flow[data-view="tools"] .mobile-drawer-tools-pane.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
    z-index: 2 !important;
  }

  .mobile-drill-copy strong,
  .mobile-drill-copy small,
  .mobile-drawer-panel-title strong,
  .mobile-drawer-panel-title span {
    display: block !important;
    filter: none !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased;
  }

  .mobile-drill-copy strong,
  .mobile-drawer-panel-title strong {
    color: #fff !important;
    opacity: 1 !important;
  }

  .mobile-drill-copy small,
  .mobile-drawer-panel-title span {
    color: rgba(255,255,255,.72) !important;
    opacity: 1 !important;
  }

}

/* ============================================================
   MOBILE DRAWER TAP-SAFETY HOTFIX
   Removes the decorative mobile overlay that can sit on top of
   Access Area rows and makes only the active drawer pane tappable.
   ============================================================ */
@media (max-width: 1024px) {
  body.is-authenticated #workspaceScreen.active #toolsGrid,
  body.mobile-menu-open #workspaceScreen.active #toolsGrid {
    isolation: isolate !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    background: #211618 !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }

  body:not(.mobile-menu-open) #workspaceScreen.active #toolsGrid {
    pointer-events: none !important;
  }

  body.is-authenticated #workspaceScreen.active #toolsGrid::before,
  body.is-authenticated #workspaceScreen.active #toolsGrid::after,
  .mobile-drawer-flow::before,
  .mobile-drawer-flow::after,
  .mobile-drawer-track::before,
  .mobile-drawer-track::after,
  .mobile-drawer-pane::before,
  .mobile-drawer-pane::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.mobile-menu-open .mobile-drawer-backdrop {
    z-index: 2980 !important;
    pointer-events: auto !important;
  }

  body.mobile-menu-open #workspaceScreen.active #toolsGrid {
    z-index: 5000 !important;
  }

  .mobile-drawer-flow,
  .mobile-drawer-track {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    pointer-events: auto !important;
    touch-action: pan-y !important;
  }

  .mobile-drawer-pane {
    z-index: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  .mobile-drawer-pane.is-active,
  .mobile-drawer-flow[data-view="areas"] .mobile-drawer-areas-pane,
  .mobile-drawer-flow[data-view="tools"] .mobile-drawer-tools-pane.is-active {
    z-index: 5 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  .mobile-drawer-flow[data-view="tools"] .mobile-drawer-areas-pane,
  .mobile-drawer-flow[data-view="areas"] .mobile-drawer-tools-pane,
  .mobile-drawer-flow[data-view="tools"] .mobile-drawer-tools-pane:not(.is-active) {
    z-index: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  .mobile-drill-list,
  .mobile-drill-row,
  .mobile-drawer-back {
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
}

/* Mobile drawer v20: remove the full-screen backdrop from the mobile menu.
   The drawer closes from the hamburger/escape path; no invisible overlay can block row taps. */
@media (max-width: 1024px) {
  .mobile-drawer-backdrop,
  body.mobile-menu-open .mobile-drawer-backdrop,
  body:not(.mobile-menu-open) .mobile-drawer-backdrop {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    outline: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body.mobile-menu-open #workspaceScreen.active #toolsGrid {
    z-index: 5000 !important;
    pointer-events: auto !important;
  }

  body.mobile-menu-open #workspaceScreen.active #toolsGrid,
  body.mobile-menu-open #workspaceScreen.active #toolsGrid * {
    -webkit-tap-highlight-color: rgba(192, 0, 0, .16) !important;
  }

  body.mobile-menu-open #workspaceScreen.active #toolsGrid .mobile-drawer-flow,
  body.mobile-menu-open #workspaceScreen.active #toolsGrid .mobile-drawer-track,
  body.mobile-menu-open #workspaceScreen.active #toolsGrid .mobile-drawer-pane.is-active,
  body.mobile-menu-open #workspaceScreen.active #toolsGrid .mobile-drill-row {
    pointer-events: auto !important;
  }

  body.mobile-menu-open #workspaceScreen.active #toolsGrid .mobile-drill-row,
  body.mobile-menu-open #workspaceScreen.active #toolsGrid .mobile-drawer-back {
    touch-action: pan-y !important;
  }
}

/* CNC job board spacing/readability updates */
#sidePanel .cnc-job-card,
#sidePanel .cnc-schedule-card,
#sidePanel .cnc-in-progress-card {
  padding: 22px 24px !important;
  border-radius: 22px !important;
}

#sidePanel .cnc-schedule-card .cnc-card-top,
#sidePanel .cnc-job-card-header,
#sidePanel .cnc-in-progress-card header {
  padding: 0 !important;
  margin-bottom: 14px;
}

#sidePanel .cnc-schedule-card .job-meta {
  gap: 16px 28px;
  margin-top: 18px;
  padding-right: 10px;
}

#sidePanel .cnc-job-action,
#sidePanel .job-log-actions,
#sidePanel .approval-actions {
  gap: 12px !important;
  row-gap: 12px !important;
}

#sidePanel .cnc-job-action .btn,
#sidePanel .job-log-actions .btn {
  margin-right: 0 !important;
}

#sidePanel .active-cnc-job-search-row {
  margin: 14px 0 16px;
  max-width: 760px;
}

#sidePanel .active-cnc-jobs-list {
  gap: 16px !important;
}

@media (min-width: 1100px) {
  #sidePanel .cnc-schedule-card,
  #sidePanel .cnc-job-card,
  #sidePanel .cnc-in-progress-card {
    padding: 26px 30px !important;
  }
}

@media (max-width: 720px) {
  #sidePanel .cnc-job-card,
  #sidePanel .cnc-schedule-card,
  #sidePanel .cnc-in-progress-card {
    padding: 18px !important;
    border-radius: 24px !important;
  }

  #sidePanel .cnc-job-action,
  #sidePanel .job-log-actions,
  #sidePanel .approval-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #sidePanel .cnc-job-action .btn,
  #sidePanel .job-log-actions .btn,
  #sidePanel .approval-actions .btn {
    width: 100% !important;
  }

  #sidePanel .cnc-schedule-card .job-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 18px !important;
  }
}

/* ============================================================
   CNC nested card spacing alignment
   Keeps inner CNC cards from stretching edge-to-edge inside the
   larger glass container. Formula: inner width = 100% - 2*gutter.
   ============================================================ */
#sidePanel {
  --cnc-inner-gutter: clamp(18px, 2.35vw, 34px);
  --cnc-nested-gutter: clamp(12px, 1.45vw, 24px);
}

#sidePanel > .cnc-job-search-row,
#sidePanel > .cnc-jobs-list {
  width: auto !important;
  margin-left: var(--cnc-inner-gutter) !important;
  margin-right: var(--cnc-inner-gutter) !important;
}

#sidePanel > .cnc-job-search-row {
  margin-top: 18px !important;
  margin-bottom: 14px !important;
  max-width: min(760px, calc(100% - (var(--cnc-inner-gutter) * 2))) !important;
}

#sidePanel > .cnc-jobs-list {
  margin-top: 14px !important;
  margin-bottom: var(--cnc-inner-gutter) !important;
  gap: 16px !important;
}

#sidePanel > .subsection {
  margin-left: var(--cnc-inner-gutter) !important;
  margin-right: var(--cnc-inner-gutter) !important;
  padding: clamp(18px, 2vw, 28px) !important;
}

#sidePanel > .subsection > .task-list,
#sidePanel > .subsection > .active-cnc-job-search-row,
#sidePanel > .subsection > .status-line,
#sidePanel > .subsection > .cnc-bulk-actions {
  width: auto !important;
  margin-left: var(--cnc-nested-gutter) !important;
  margin-right: var(--cnc-nested-gutter) !important;
}

#sidePanel > .subsection > .task-list {
  gap: 16px !important;
}

#sidePanel .cnc-job-card,
#sidePanel .cnc-schedule-card,
#sidePanel .cnc-in-progress-card {
  box-sizing: border-box !important;
  width: 100% !important;
}

#sidePanel .cnc-job-action,
#sidePanel .job-log-actions,
#sidePanel .approval-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

@media (max-width: 720px) {
  #sidePanel {
    --cnc-inner-gutter: 14px;
    --cnc-nested-gutter: 0px;
  }

  #sidePanel > .subsection {
    padding: 16px !important;
  }

  #sidePanel > .cnc-job-search-row,
  #sidePanel > .cnc-jobs-list,
  #sidePanel > .subsection {
    margin-left: var(--cnc-inner-gutter) !important;
    margin-right: var(--cnc-inner-gutter) !important;
  }

  #sidePanel > .subsection > .task-list,
  #sidePanel > .subsection > .active-cnc-job-search-row,
  #sidePanel > .subsection > .status-line,
  #sidePanel > .subsection > .cnc-bulk-actions {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #sidePanel .cnc-job-action,
  #sidePanel .job-log-actions,
  #sidePanel .approval-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Persistent Time & Requests confirmation banner */
.time-clock-toast {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  transform: translateX(-50%);
  z-index: 9999;
  max-width: min(680px, calc(100vw - 32px));
  padding: 14px 20px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.94);
  color: #111;
  font-weight: 800;
  text-align: center;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: timeClockToastIn 180ms ease-out;
}

.time-clock-toast.success {
  border-color: rgba(22, 128, 75, 0.22);
  background: rgba(236, 253, 245, 0.96);
  color: #065f46;
}

.time-clock-toast.warning {
  border-color: rgba(192, 0, 0, 0.24);
  background: rgba(255, 241, 242, 0.96);
  color: #990000;
}

.time-clock-toast.info {
  border-color: rgba(0, 0, 0, 0.12);
}

.time-clock-toast.is-hiding {
  opacity: 0;
  transform: translate(-50%, -12px);
  transition: opacity 300ms ease, transform 300ms ease;
}

@keyframes timeClockToastIn {
  from { opacity: 0; transform: translate(-50%, -12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 700px) {
  .time-clock-toast {
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    border-radius: 22px;
    padding: 13px 16px;
    font-size: 15px;
  }
}


/* CNC time card: keep save controls directly under setup/run rows */
.cnc-time-save-actions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  gap: 14px;
}

.cnc-time-save-actions .btn {
  min-width: 160px;
}

.cnc-time-row-actions {
  margin-top: 14px;
  gap: 14px;
}

@media (max-width: 760px) {
  .cnc-time-save-actions,
  .cnc-time-row-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cnc-time-save-actions .btn,
  .cnc-time-row-actions .btn {
    width: 100%;
  }
}

/* CNC time card row-level save and in-progress details */
.cnc-time-row-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.cnc-time-row-buttons .btn {
  min-width: 105px;
}

.cnc-time-row-saved {
  box-shadow: inset 4px 0 0 #047857;
  background: rgba(236, 253, 245, 0.65);
}

.cnc-time-row-warning {
  box-shadow: inset 4px 0 0 #C00000;
  background: rgba(253, 240, 240, 0.75);
}

.cnc-in-progress-time-wrap {
  margin-top: 14px;
}

.cnc-in-progress-time-table {
  font-size: 0.92rem;
}

.cnc-in-progress-time-table th,
.cnc-in-progress-time-table td {
  padding: 8px 10px;
}

.gms-supply-table-wrap {
  max-height: 560px;
  overflow: auto;
}

.gms-supply-table th:nth-child(1),
.gms-supply-table td:nth-child(1) { min-width: 240px; }
.gms-supply-table th:nth-child(2),
.gms-supply-table td:nth-child(2) { min-width: 190px; }
.gms-supply-table th:nth-child(3),
.gms-supply-table td:nth-child(3) { width: 110px; }
.gms-supply-table input.gms-supply-qty {
  width: 100%;
  min-width: 80px;
  text-align: center;
  font-weight: 700;
}

.cnc-import-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.cnc-import-summary-grid .status-line {
  margin: 0;
  min-height: 78px;
}

.cnc-import-summary-grid strong {
  display: block;
  font-size: 1.45rem;
  line-height: 1.1;
}

.cnc-import-preview-table {
  margin-top: 12px;
}

@media (max-width: 760px) {
  .cnc-time-row-buttons {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .cnc-time-row-buttons .btn {
    width: 100%;
  }
  .cnc-in-progress-time-table {
    font-size: 0.88rem;
  }
  .gms-supply-table th:nth-child(1),
  .gms-supply-table td:nth-child(1),
  .gms-supply-table th:nth-child(2),
  .gms-supply-table td:nth-child(2) {
    min-width: 0;
  }
}

/* CNC Scheduling Advisor - Stage 1 */
.cnc-advisor-heading {
  align-items: flex-start;
  gap: 1rem;
}
.advisor-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.9rem;
  margin: 1rem 0;
}
.advisor-stat {
  background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(245,245,247,0.82));
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 1rem;
  box-shadow: 0 16px 34px rgba(0,0,0,0.06);
}
.advisor-stat span {
  display: block;
  color: var(--muted, #666);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.advisor-stat strong {
  display: block;
  color: var(--text, #0a0a0a);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.45rem, 2vw, 2rem);
  font-weight: 700;
  line-height: 1.05;
  margin-top: 0.3rem;
}
.advisor-stat small {
  display: block;
  color: var(--faint, #666);
  font-weight: 600;
  margin-top: 0.3rem;
}
.advisor-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
  padding: 0.4rem;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
}
.advisor-tab {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted, #444);
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.65rem 1rem;
  text-transform: uppercase;
}
.advisor-tab.active {
  background: linear-gradient(135deg, #111, #333);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.advisor-panel {
  display: none;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.07);
  margin: 1rem 0;
  padding: 1rem;
}
.advisor-panel.active {
  display: block;
}
.advisor-table th,
.advisor-table td {
  white-space: nowrap;
}
.advisor-assumptions-form {
  max-width: 860px;
}
@media (max-width: 760px) {
  .advisor-tabs {
    border-radius: 18px;
  }
  .advisor-tab {
    flex: 1 1 100%;
  }
  .advisor-panel {
    padding: 0.75rem;
  }
}

/* CNC Scheduling Advisor - Stage 2 */
.advisor-heading-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
}
.advisor-panel .compact-heading {
  margin-bottom: 0.85rem;
}
.advisor-table td small {
  color: var(--muted, #666);
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 0.15rem;
  white-space: normal;
}
.advisor-score-pill {
  background: rgba(192,0,0,0.1);
  border: 1px solid rgba(192,0,0,0.18);
  border-radius: 999px;
  color: var(--red, #c00000);
  display: inline-flex;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  min-width: 2.3rem;
  justify-content: center;
  padding: 0.18rem 0.55rem;
}
.advisor-row-warn td {
  background: rgba(255, 193, 7, 0.1);
}
.advisor-row-danger td {
  background: rgba(192, 0, 0, 0.08);
}
.cnc-advisor-print {
  background: #fff;
  color: #111;
  font-family: 'Barlow', Arial, sans-serif;
  padding: 24px;
  width: 820px;
}
.cnc-advisor-print .pdf-hero {
  background: linear-gradient(135deg, #111, #3a3a3a);
  border-radius: 24px;
  color: #fff;
  padding: 26px;
}
.cnc-advisor-print .pdf-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 34px;
  letter-spacing: 0.02em;
  margin: 0 0 4px;
}
.cnc-advisor-print .pdf-section {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  margin-top: 16px;
  padding: 16px;
}
.cnc-advisor-print table {
  border-collapse: collapse;
  width: 100%;
}
.cnc-advisor-print th,
.cnc-advisor-print td {
  border-bottom: 1px solid #e5e5e5;
  font-size: 12px;
  padding: 8px;
  text-align: left;
}
@media (max-width: 760px) {
  .advisor-heading-actions {
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
  }
  .advisor-heading-actions .btn,
  .advisor-heading-actions .pill {
    width: 100%;
  }
}

/* CNC Scheduling Advisor - Stage 3 */
.advisor-control-table input {
  min-width: 78px;
}
.advisor-control-table input[type="checkbox"] {
  min-width: auto;
  transform: scale(1.15);
}
.advisor-control-actions,
.advisor-plan-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.advisor-plan-list {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.75rem;
}
.advisor-plan-card {
  align-items: center;
  background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(245,245,247,0.86));
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(0,0,0,0.05);
  display: flex;
  gap: 0.85rem;
  justify-content: space-between;
  padding: 0.85rem 1rem;
}
.advisor-plan-card strong,
.advisor-plan-card small {
  display: block;
}
.advisor-plan-card small {
  color: var(--muted, #666);
  font-weight: 600;
  margin-top: 0.18rem;
}
@media (max-width: 760px) {
  .advisor-plan-card {
    align-items: stretch;
    flex-direction: column;
  }
  .advisor-control-actions,
  .advisor-plan-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
}

/* CNC Scheduling Advisor Stage 4 publish controls */
.advisor-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  justify-content: flex-end;
}
.advisor-panel-actions .btn {
  min-height: 36px;
}
.advisor-panel .status-line.info strong {
  color: var(--text, #0a0a0a);
}
@media (max-width: 720px) {
  .advisor-panel-actions {
    justify-content: stretch;
  }
  .advisor-panel-actions .btn {
    flex: 1 1 100%;
  }
}


/* CNC Scheduling Advisor Stage 5 shop review */
.advisor-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.8rem;
  margin: 0 0 1rem;
}
.advisor-health-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(245,245,247,0.86));
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(0,0,0,0.05);
  padding: 0.85rem 1rem;
}
.advisor-health-card span,
.advisor-health-card small {
  display: block;
}
.advisor-health-card span {
  color: var(--muted, #666);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.advisor-health-card strong {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.8rem;
  margin-top: 0.2rem;
}
.advisor-health-card small {
  color: var(--faint, #666);
  font-weight: 600;
  margin-top: 0.2rem;
}
.advisor-health-badge {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.58rem;
  text-transform: uppercase;
  white-space: nowrap;
}
.advisor-health-good {
  background: rgba(33, 128, 71, 0.12);
  border: 1px solid rgba(33, 128, 71, 0.22);
  color: #176238;
}
.advisor-health-warn {
  background: rgba(255, 193, 7, 0.16);
  border: 1px solid rgba(255, 193, 7, 0.32);
  color: #7a4c00;
}
.advisor-health-danger {
  background: rgba(192, 0, 0, 0.12);
  border: 1px solid rgba(192, 0, 0, 0.24);
  color: var(--red, #c00000);
}
.advisor-health-neutral {
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.1);
  color: var(--muted, #444);
}
.advisor-published-pdf-section h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  margin: 0 0 10px;
}

/* CNC Scheduling Advisor Stage 6 design + workload import */
.advisor-file-import {
  cursor: pointer;
  position: relative;
}
.advisor-operator-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 0 0 1rem;
}
.advisor-operator-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(247,247,249,0.9));
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.06);
  padding: 1rem;
}
.advisor-operator-card.warn {
  border-color: rgba(255,193,7,0.42);
  box-shadow: 0 14px 32px rgba(255,193,7,0.08);
}
.advisor-operator-card.danger {
  border-color: rgba(192,0,0,0.3);
  box-shadow: 0 14px 32px rgba(192,0,0,0.08);
}
.advisor-operator-card span,
.advisor-operator-card small {
  display: block;
}
.advisor-operator-card span {
  color: var(--muted, #444);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.advisor-operator-card strong {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2rem;
  line-height: 1;
  margin-top: 0.35rem;
}
.advisor-operator-card small {
  color: var(--faint, #666);
  font-weight: 600;
  margin-top: 0.35rem;
}
.advisor-progress {
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  height: 8px;
  margin-top: 0.8rem;
  overflow: hidden;
}
.advisor-progress i {
  background: linear-gradient(90deg, var(--red, #c00000), #111);
  border-radius: inherit;
  display: block;
  height: 100%;
  max-width: 100%;
}
.advisor-stat-grid .advisor-stat:first-child {
  background: linear-gradient(145deg, rgba(10,10,10,0.96), rgba(70,70,70,0.88));
  color: #fff;
}
.advisor-stat-grid .advisor-stat:first-child span,
.advisor-stat-grid .advisor-stat:first-child strong,
.advisor-stat-grid .advisor-stat:first-child small {
  color: #fff;
}
@media (max-width: 760px) {
  .advisor-operator-grid {
    grid-template-columns: 1fr;
  }
  .advisor-file-import {
    justify-content: center;
    width: 100%;
  }
}

/* CNC Scheduling Advisor Stage 7 - live reflow board and track status */
.advisor-schedule-board {
  display: grid;
  gap: 18px;
}

.advisor-day-board {
  border: 1px solid var(--border, #d0d0d0);
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.04);
}

.advisor-day-board > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border, #d0d0d0);
  background: rgba(255, 255, 255, 0.72);
}

.advisor-day-board h4 {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.advisor-day-board > header span {
  color: var(--muted, #444);
  font-weight: 700;
  font-size: 0.85rem;
}

.advisor-operator-lanes {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.advisor-operator-lane {
  border: 1px solid var(--border, #d0d0d0);
  border-radius: 18px;
  background: #fff;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.advisor-operator-lane > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.advisor-operator-lane > header strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}

.advisor-operator-lane > header span {
  color: var(--muted, #444);
  font-weight: 800;
}

.advisor-schedule-card {
  border: 1px solid var(--border, #d0d0d0);
  border-left: 6px solid #b8b8b8;
  border-radius: 16px;
  padding: 14px;
  background: #fff;
  display: grid;
  gap: 8px;
}

.advisor-schedule-card.advisor-track-good { border-left-color: #16803b; }
.advisor-schedule-card.advisor-track-warn { border-left-color: #c77b00; }
.advisor-schedule-card.advisor-track-danger { border-left-color: var(--red, #c00000); }
.advisor-schedule-card.advisor-track-neutral { border-left-color: #888; }

.advisor-schedule-card-top,
.advisor-schedule-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.advisor-schedule-card-top strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.03em;
}

.advisor-schedule-card-title {
  font-weight: 800;
}

.advisor-schedule-card-meta,
.advisor-schedule-card small {
  color: var(--muted, #444);
  font-size: 0.9rem;
}

.advisor-schedule-card-foot {
  color: var(--text, #0a0a0a);
  font-weight: 800;
}

.advisor-detail-table {
  margin-top: 18px;
  border: 1px solid var(--border, #d0d0d0);
  border-radius: 18px;
  padding: 14px 16px;
  background: #fff;
}

.advisor-detail-table summary {
  cursor: pointer;
  font-weight: 800;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.status-line.success {
  background: #effaf2;
  border-color: #9bd2aa;
  color: #0d5a29;
}

@media (min-width: 980px) {
  .advisor-operator-lanes {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

@media (max-width: 760px) {
  .advisor-day-board > header,
  .advisor-schedule-card-top,
  .advisor-schedule-card-foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .advisor-operator-lanes {
    padding: 12px;
  }
}

/* CNC Advisor Stage 8: real-data dashboard, weekly dropdowns, calendar lite */
.advisor-view-select {
  min-width: 220px;
  display: grid;
  gap: 6px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--faint, #666);
}

.advisor-view-select select {
  min-height: 44px;
  border-radius: 16px;
  padding: 0 14px;
}

.advisor-schedule-view { display: none; }
.advisor-schedule-view.active { display: block; }

.advisor-week-details {
  border: 1px solid var(--border, #d0d0d0);
  border-radius: 18px;
  background: #fff;
  margin: 0 0 14px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
}

.advisor-week-details summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid var(--border, #d0d0d0);
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.advisor-week-details summary::-webkit-details-marker { display: none; }
.advisor-week-details summary span { color: var(--muted, #444); font-family: 'Barlow', sans-serif; font-size: .9rem; text-transform: none; letter-spacing: 0; }

.advisor-calendar-lite {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.advisor-calendar-day {
  min-height: 168px;
  border: 1px solid var(--border, #d0d0d0);
  border-radius: 18px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
}

.advisor-calendar-day header {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border, #d0d0d0);
  padding-bottom: 6px;
}

.advisor-calendar-chip {
  border-radius: 14px;
  background: var(--red-bg, #fdf0f0);
  border: 1px solid rgba(192,0,0,.14);
  padding: 9px 10px;
  margin-bottom: 8px;
  font-size: .88rem;
}

.advisor-two-col {
  align-items: start;
}

.advisor-control-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.btn.sm {
  min-height: 34px;
  padding: 6px 10px;
  font-size: .85rem;
}

.active-cnc-job-search-row {
  grid-template-columns: minmax(260px, 1fr) minmax(190px, 260px);
}

.operator-board-details {
  border: 0;
}

.operator-board-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text, #0a0a0a);
  list-style: none;
  margin-bottom: 10px;
}

.operator-board-details > summary::-webkit-details-marker {
  display: none;
}

.operator-board-details > summary::after {
  content: "v";
  font-size: .85rem;
  color: var(--muted, #444);
}

.operator-board-details:not([open]) > summary::after {
  content: ">";
}

.operator-board-details > summary small {
  color: var(--muted, #444);
  font-size: .78rem;
  font-weight: 700;
}

.operator-board-section-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 12px;
}

.operator-board-section-actions .btn {
  width: auto;
  min-width: 132px;
}

.operator-board-section .table-wrap {
  overflow-x: auto;
}

.operator-board-section .packing-slip-table {
  min-width: 1120px;
}

.operator-board-section .packing-slip-table th,
.operator-board-section .packing-slip-table td {
  white-space: nowrap;
}

.operator-board-section .packing-slip-table th:nth-child(7),
.operator-board-section .packing-slip-table td:nth-child(7) {
  min-width: 190px;
  white-space: normal;
}

@media (max-width: 720px) {
  .operator-board-section-actions .btn {
    width: 100%;
  }
}

.operator-live-status {
  display: grid;
  gap: 3px;
  min-width: 140px;
}

.operator-live-status strong {
  font-size: .9rem;
  line-height: 1.25;
}

.operator-live-status small {
  color: var(--muted, #444);
  font-size: .78rem;
}

.cnc-review-job-details {
  border: 0;
}

.cnc-review-job-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.cnc-review-job-details > summary::-webkit-details-marker {
  display: none;
}

.cnc-review-job-details > summary::after {
  content: ">";
  color: var(--muted, #444);
  font-weight: 700;
}

.cnc-review-job-details[open] > summary {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, #d0d0d0);
}

.cnc-review-job-details[open] > summary::after {
  content: "v";
}

.cnc-review-card .task-list {
  gap: 12px;
}

.cnc-review-entry-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 16px 18px !important;
}

.cnc-review-entry-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.cnc-review-entry-main strong {
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: normal;
}

.cnc-review-entry-main span {
  margin-top: 0;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: normal;
}

.cnc-review-entry-actions {
  width: auto !important;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  min-width: 178px;
}

.cnc-review-entry-actions .btn {
  min-width: 96px;
  min-height: 44px;
  padding-inline: 14px;
  white-space: nowrap;
}

.cnc-review-entry-actions .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  min-height: 38px;
  margin: 0;
  padding: 7px 12px;
  line-height: 1;
}

@media (max-width: 760px) {
  .advisor-week-details summary,
  .advisor-heading-actions,
  .advisor-control-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .active-cnc-job-search-row {
    grid-template-columns: 1fr;
  }

  .cnc-review-entry-row {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .cnc-review-entry-actions {
    min-width: 0;
    width: 100% !important;
    justify-content: stretch !important;
  }

  .cnc-review-entry-actions .btn,
  .cnc-review-entry-actions .pill {
    flex: 1 1 0;
  }
}

/* CNC persistence + employee metrics archive update */
.employee-metrics-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  align-items: end;
  margin-bottom: 20px;
}
.employee-metrics-controls .inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 12px 16px;
  border: 1px solid var(--border, #D0D0D0);
  border-radius: 14px;
  background: var(--surface, #fff);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#sidePanel:has(.employee-metrics-controls) > .status-line {
  margin: 30px var(--card-pad) 24px;
  padding: 18px 22px;
  line-height: 1.65;
}

#sidePanel:has(.employee-metrics-controls) > .employee-metrics-controls {
  margin: 30px var(--card-pad) 32px;
  gap: 18px;
  padding: 18px 20px;
}

#sidePanel:has(.employee-metrics-controls) > .cnc-metrics-summary {
  margin: 0 var(--card-pad) 34px;
  gap: 18px;
}

#sidePanel:has(.employee-metrics-controls) > .subsection {
  margin: 0 var(--card-pad) 34px;
  padding: 28px 30px;
  gap: 22px;
}

#sidePanel:has(.employee-metrics-controls) > .subsection h3 {
  margin-bottom: 10px;
  padding-bottom: 12px;
  line-height: 1.45;
}

#sidePanel:has(.employee-metrics-controls) > .subsection .muted,
#sidePanel:has(.employee-metrics-controls) > .subsection p {
  margin-bottom: 14px;
  line-height: 1.65;
}

#sidePanel:has(.employee-metrics-controls) .data-table th,
#sidePanel:has(.employee-metrics-controls) .data-table td {
  padding: 16px 20px;
  line-height: 1.55;
}

#sidePanel:has(.employee-metrics-controls) .metric-card {
  padding: 22px 24px;
}

#sidePanel:has(.employee-metrics-controls) .metric-card strong {
  margin-top: 8px;
}

@media (max-width: 768px) {
  #sidePanel:has(.employee-metrics-controls) > .status-line,
  #sidePanel:has(.employee-metrics-controls) > .employee-metrics-controls,
  #sidePanel:has(.employee-metrics-controls) > .cnc-metrics-summary,
  #sidePanel:has(.employee-metrics-controls) > .subsection {
    margin-left: 16px;
    margin-right: 16px;
  }

  #sidePanel:has(.employee-metrics-controls) > .subsection {
    padding: 20px;
  }
}
.cnc-metrics-summary {
  margin-bottom: 18px;
}
.metric-card {
  border: 1px solid var(--border, #D0D0D0);
  background: #fff;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
}
.metric-card span {
  display: block;
  color: var(--muted, #444);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: .82rem;
}
.metric-card strong {
  display: block;
  margin-top: 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.65rem;
  color: var(--text, #0a0a0a);
}
.pill.success { background: #e8f5ee; color: #17683a; }
.pill.warning { background: #fff4df; color: #8a5600; }
.pill.danger { background: #ffe8e8; color: #990000; }
.approval-card .pill.warning { border-color: #f0b94d; }

/* Whole-job value helper text */
.form-note {
  margin: -0.35rem 0 0.75rem;
  color: var(--muted, #444);
  font-size: 0.9rem;
  line-height: 1.35;
}

/* CNC admin whole-job header cards */
.cnc-job-header-card .cnc-job-operation-details {
  margin: 12px 0;
  border: 1px solid var(--border, #d0d0d0);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  overflow: hidden;
}
.cnc-job-header-card .cnc-job-operation-details summary {
  cursor: pointer;
  padding: 10px 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cnc-job-header-card .cnc-job-operation-details[open] summary {
  border-bottom: 1px solid var(--border, #d0d0d0);
}
.cnc-job-operations-table th,
.cnc-job-operations-table td {
  white-space: nowrap;
}
.cnc-job-header-card .btn.small {
  padding: 6px 10px;
  font-size: .82rem;
}


/* CNC operation table usability: keep row edit controls visible and avoid setup/run clutter. */
.cnc-operation-table-scroll {
  width: 100%;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
}
.cnc-job-operations-table {
  min-width: 860px;
  table-layout: auto;
}
.cnc-job-operations-table th,
.cnc-job-operations-table td {
  vertical-align: middle;
}
.cnc-job-operations-table th:first-child,
.cnc-job-operations-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 8px 0 12px rgba(255,255,255,.92);
}
.cnc-job-operations-table thead th:first-child {
  background: #f4f4f4;
  z-index: 3;
}
.cnc-op-action-cell .btn.small {
  white-space: nowrap !important;
  min-width: 76px;
}
@media (max-width: 720px) {
  .cnc-job-operations-table {
    min-width: 760px;
  }
  .cnc-op-action-cell .btn.small {
    min-width: 68px;
    padding: 6px 8px;
  }
}

/* CNC Admin operation row action buttons */
.cnc-op-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 160px;
}
.cnc-job-operations-table th:first-child,
.cnc-job-operations-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface, #fff);
}
.cnc-job-operations-table thead th:first-child {
  z-index: 2;
}

/* Operator board and scheduling advisor spacing refresh */
.form-section {
  padding: var(--card-pad);
  margin-bottom: 20px;
}

.approval-card {
  padding: 22px;
  margin-bottom: 14px;
  border-radius: 14px;
}

.approval-card header {
  margin-bottom: 10px;
}

.approval-card p {
  margin: 6px 0;
  line-height: 1.5;
}

.packing-slip-table th,
.packing-slip-table td {
  padding: 14px 18px;
  line-height: 1.45;
}

.section-heading {
  margin-bottom: 20px;
}

.section-heading h2 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 4px;
}

.section-heading p {
  font-size: 13px;
  color: #888;
  margin: 6px 0 0;
  line-height: 1.55;
}

.operator-board-details > summary {
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  gap: 10px;
  display: flex;
  align-items: center;
}

.operator-board-details > summary small {
  color: #888;
  font-weight: 400;
  font-size: 12px;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e6f9ee;
  color: #1a7a3a;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid #a8e0bc;
  animation: live-pulse 2s ease-in-out infinite;
  margin-left: 8px;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.sa2-metric {
  padding: 14px 18px;
  border-radius: 12px;
  min-width: 120px;
}

.sa2-metric-label {
  font-size: 11px;
  margin-bottom: 4px;
}

.sa2-metric-value {
  font-size: 26px;
  line-height: 1.1;
}

.sa2-metric-sub {
  font-size: 11px;
  margin-top: 4px;
  line-height: 1.4;
}

#sa2-tab-rec,
#sa2-tab-weekly,
#sa2-tab-forecast,
#sa2-tab-monthly,
#sa2-tab-risk,
#sa2-tab-exceptions {
  padding: 20px 0;
}

.op-board-live-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}

.op-board-live-times {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.op-board-live-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.op-board-live-lbl {
  font-size: 10px;
  text-transform: uppercase;
  color: #aaa;
  letter-spacing: .4px;
  min-width: 58px;
}

.op-board-live-bar {
  height: 5px;
  background: #f0f0ec;
  border-radius: 999px;
  overflow: hidden;
}

.op-board-live-bar > div {
  height: 100%;
  border-radius: 999px;
  transition: width 1s linear;
}

@media (max-width: 768px) {
  .form-section {
    padding: 16px 16px;
  }

  .packing-slip-table th,
  .packing-slip-table td {
    padding: 10px 12px;
  }
}

/* Responsive consistency layer - keep Apple/SCI styling, normalize sizing across views */
:root {
  --sci-control-height: 44px;
  --sci-control-height-mobile: 48px;
  --sci-control-radius: 14px;
  --sci-card-pad-desktop: 22px;
  --sci-card-pad-tablet: 18px;
  --sci-card-pad-mobile: 16px;
}

#sidePanel,
#taskList,
.workspace,
.work-area,
.panel,
.form,
.form-section,
.approval-card,
.tool-card,
.job-card,
.cnc-job-card,
.cnc-schedule-card,
.cnc-in-progress-card,
.cnc-review-card,
.operator-job-card,
.capability-tool,
.capability-layout,
.capability-inputs,
.capability-results {
  min-width: 0;
}

#sidePanel *,
#taskList *,
.form-section *,
.approval-card *,
.tool-card *,
.job-card *,
.cnc-job-card *,
.cnc-schedule-card *,
.cnc-in-progress-card *,
.cnc-review-card *,
.operator-job-card *,
.capability-tool * {
  min-width: 0;
}

.btn,
button.btn,
button[type="button"].btn,
button[type="submit"].btn,
.approval-actions .btn,
.form-actions .btn,
.button-row .btn,
.two-buttons .btn,
.toolbar .btn,
.cnc-job-action .btn,
.cnc-time-row-buttons .btn {
  min-height: var(--sci-control-height);
  padding: 0 16px;
  border-radius: var(--sci-control-radius);
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.btn.sm,
.btn.small,
button.btn.sm,
button.btn.small {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 12px;
}

input,
select,
textarea {
  min-height: var(--sci-control-height);
  border-radius: var(--sci-control-radius);
}

textarea {
  min-height: 112px;
}

input[type="checkbox"],
input[type="radio"] {
  min-height: 0;
  flex: 0 0 auto;
}

.form-section,
.approval-card,
.tool-card,
.job-card,
.cnc-job-card,
.cnc-schedule-card,
.cnc-in-progress-card,
.cnc-review-card,
.operator-job-card,
.input-card,
.subsection {
  padding: var(--sci-card-pad-desktop);
  overflow: hidden;
}

.approval-card,
.tool-card,
.job-card,
.cnc-job-card,
.cnc-schedule-card,
.cnc-in-progress-card,
.cnc-review-card,
.operator-job-card {
  margin-bottom: 14px;
}

.job-meta,
.cnc-card-top,
.cnc-job-card-header,
.task-row,
.status-line,
.section-heading,
.review-grid,
.time-grid,
.approval-actions,
.cnc-job-action,
.op-board-live-cell {
  min-width: 0;
  overflow-wrap: anywhere;
}

.job-meta span,
.cnc-card-top > div,
.cnc-card-top h2,
.cnc-card-top strong,
.cnc-card-top p,
.cnc-job-card-header > div,
.task-row > div,
.status-line,
.section-heading h2,
.section-heading h3,
.section-heading p,
.approval-card p,
.tool-card p,
.operator-board-details > summary,
.op-board-live-row {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

.job-meta {
  gap: 10px;
}

.cnc-card-top {
  gap: 14px;
  align-items: flex-start;
}

.cnc-card-top .pill,
.cnc-job-card-header .pill,
.status-pill,
.workflow-sidebar-badge {
  flex: 0 0 auto;
}

.table-wrap,
.table-scroll,
.job-log-table-wrap,
.traveler-ops-wrap,
.tool-results-wrap,
.cnc-operation-table-scroll,
.cnc-time-entry-panel .table-wrap,
.capability-machine-card .table-wrap,
.capability-review .table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.table-wrap > table,
.table-scroll > table,
.job-log-table,
.admin-job-log-table,
.capability-table,
.data-table {
  max-width: none;
}

.job-log-table,
.admin-job-log-table {
  min-width: 760px;
}

.capability-checks {
  align-items: stretch;
}

.capability-checks label,
.access-options.capability-checks label {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.capability-checks input[type="checkbox"],
.access-options.capability-checks input[type="checkbox"] {
  margin: 2px 0 0;
  width: 18px;
  height: 18px;
}

body.mobile-menu-open .mobile-drawer-flow,
body.mobile-menu-open .mobile-drawer-track,
body.mobile-menu-open .mobile-drawer-pane.is-active {
  pointer-events: auto !important;
}

.mobile-drawer-pane {
  pointer-events: none;
  visibility: hidden;
}

.mobile-drawer-pane.is-active,
.mobile-drawer-flow[data-view="areas"] .mobile-drawer-areas-pane {
  pointer-events: auto;
  visibility: visible;
}

.mobile-drill-row,
.mobile-drawer-back {
  min-height: 48px;
  touch-action: manipulation;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.mobile-drill-row > *,
.mobile-drawer-back > * {
  pointer-events: none;
}

@media (max-width: 1024px) {
  .form-section,
  .approval-card,
  .tool-card,
  .job-card,
  .cnc-job-card,
  .cnc-schedule-card,
  .cnc-in-progress-card,
  .cnc-review-card,
  .operator-job-card,
  .input-card,
  .subsection {
    padding: var(--sci-card-pad-tablet);
  }

  .job-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capability-checks,
  .access-options.capability-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (max-width: 820px) {
  .capability-checks,
  .access-options.capability-checks {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  input,
  select,
  textarea,
  .btn,
  button.btn {
    min-height: var(--sci-control-height-mobile);
  }

  .form-section,
  .approval-card,
  .tool-card,
  .job-card,
  .cnc-job-card,
  .cnc-schedule-card,
  .cnc-in-progress-card,
  .cnc-review-card,
  .operator-job-card,
  .input-card,
  .subsection {
    padding: var(--sci-card-pad-mobile);
  }

  .approval-actions,
  .form-actions,
  .button-row,
  .two-buttons,
  .cnc-job-action,
  .cnc-time-row-actions,
  .cnc-time-save-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
  }

  .approval-actions .btn,
  .form-actions .btn,
  .button-row .btn,
  .two-buttons .btn,
  .cnc-job-action .btn,
  .cnc-time-row-actions .btn,
  .cnc-time-save-actions .btn {
    width: 100%;
  }

  .cnc-card-top,
  .cnc-job-card-header {
    display: grid;
    grid-template-columns: 1fr;
  }

  .job-meta {
    grid-template-columns: 1fr;
  }

  .job-log-table,
  .admin-job-log-table {
    min-width: 0;
  }

  .cnc-time-entry-panel .table-wrap {
    overflow-x: visible !important;
  }

  .cnc-time-entry-panel table.cnc-time-table,
  .cnc-time-entry-panel .cnc-time-table thead,
  .cnc-time-entry-panel .cnc-time-table tbody,
  .cnc-time-entry-panel .cnc-time-table tr,
  .cnc-time-entry-panel .cnc-time-table td {
    display: block;
    width: 100%;
  }

  .cnc-time-entry-panel .cnc-time-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .cnc-time-entry-panel .cnc-time-table tr.cnc-time-row {
    padding: 14px;
    margin: 0 0 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255,255,255,.86);
  }

  .cnc-time-entry-panel .cnc-time-table td {
    border: 0;
    padding: 8px 0;
  }

  .cnc-time-entry-panel .cnc-time-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .cnc-time-entry-panel .cnc-time-table td input,
  .cnc-time-entry-panel .cnc-time-table td select {
    width: 100%;
  }

  .cnc-time-row-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Universal expandable-card pattern for dense admin/review screens */
.sci-disclosure-card {
  min-width: 0;
}

.sci-disclosure-card > summary,
.employee-disclosure-summary,
.sci-disclosure-summary {
  list-style: none;
  cursor: pointer;
}

.sci-disclosure-card > summary::-webkit-details-marker,
.employee-disclosure-summary::-webkit-details-marker,
.sci-disclosure-summary::-webkit-details-marker {
  display: none;
}

.sci-disclosure-summary,
.employee-disclosure-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  width: 100%;
}

.sci-disclosure-summary {
  grid-template-columns: minmax(0, 1fr) auto;
}

.sci-disclosure-summary > span:first-child,
.employee-disclosure-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sci-disclosure-summary strong,
.employee-disclosure-name {
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
}

.sci-disclosure-caret {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .18s ease;
}

.sci-disclosure-card[open] .sci-disclosure-caret {
  transform: rotate(90deg);
}

.sci-disclosure-body,
.employee-disclosure-body {
  padding-top: 12px;
}

body[data-workspace-role="admin"] .admin-access-editor.sci-disclosure-card {
  display: block;
  padding: var(--card-pad);
  min-width: 0;
  overflow: visible;
}

body[data-workspace-role="admin"] .admin-access-editor .admin-section-label {
  display: block;
  margin-bottom: 4px;
}

body[data-workspace-role="admin"] #employeeList {
  display: grid;
  gap: 10px;
  align-content: start;
  grid-auto-rows: max-content;
}

body[data-workspace-role="admin"] #employeeList .employee-disclosure-card {
  display: block !important;
  position: relative !important;
  min-height: 56px !important;
  height: auto !important;
  padding: 0 14px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  isolation: isolate;
}

body[data-workspace-role="admin"] #employeeList .employee-disclosure-card.is-open {
  padding-bottom: 14px !important;
}

body[data-workspace-role="admin"] #employeeList .employee-disclosure-summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  min-height: 56px !important;
  padding: 0 !important;
  align-items: center !important;
  overflow: hidden !important;
  opacity: 1 !important;
  transform: none !important;
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left;
}

body[data-workspace-role="admin"] #employeeList .employee-disclosure-name {
  display: block !important;
  color: var(--ink) !important;
  line-height: 1.25 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body[data-workspace-role="admin"] #employeeList .employee-disclosure-summary .pill {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  opacity: 1 !important;
  visibility: visible !important;
}

body[data-workspace-role="admin"] #employeeList .employee-disclosure-body {
  display: block;
  position: static !important;
  border-top: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
  padding: 10px 0 0;
}

body[data-workspace-role="admin"] #employeeList .employee-disclosure-body[hidden] {
  display: none !important;
}

body[data-workspace-role="admin"] #employeeList .employee-disclosure-body p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

body[data-workspace-role="admin"] #employeeList .employee-disclosure-card .edit-employee {
  margin-top: 12px;
  width: 100%;
}

.sci-dense-disclosure-mode {
  display: grid;
  gap: 12px;
}

.sci-tool-disclosure {
  display: block;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.sci-tool-disclosure > .sci-disclosure-summary {
  padding: 16px 18px;
  min-height: 58px;
}

.sci-tool-disclosure > .sci-disclosure-summary strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.sci-tool-disclosure > .sci-disclosure-summary small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
}

.sci-tool-disclosure > .sci-disclosure-body {
  padding: 0 18px 18px;
  border-top: 1px solid rgba(0,0,0,.07);
}

.sci-tool-disclosure > .sci-disclosure-body > .form-section,
.sci-tool-disclosure > .sci-disclosure-body > .subsection,
.sci-tool-disclosure > .sci-disclosure-body > .approval-card,
.sci-tool-disclosure > .sci-disclosure-body > .tool-card,
.sci-tool-disclosure > .sci-disclosure-body > .job-card,
.sci-tool-disclosure > .sci-disclosure-body > .metric-card,
.sci-tool-disclosure > .sci-disclosure-body > .task-row {
  padding: 16px 0 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sci-tool-disclosure > .sci-disclosure-body > .form-section > .section-heading:first-child,
.sci-tool-disclosure > .sci-disclosure-body > .subsection > .section-heading:first-child,
.sci-tool-disclosure > .sci-disclosure-body > .approval-card > header:first-child,
.sci-tool-disclosure > .sci-disclosure-body > .tool-card > .section-heading:first-child,
.sci-tool-disclosure > .sci-disclosure-body > .job-card > .section-heading:first-child {
  display: none;
}

@media (max-width: 700px) {
  .sci-disclosure-summary,
  .employee-disclosure-summary {
    min-height: 52px;
  }

  body[data-workspace-role="admin"] #employeeList .employee-disclosure-card {
    padding-inline: 12px;
  }
}

@media (max-width: 899px) {
  .sci-dense-disclosure-mode {
    display: block;
  }
}

.cnc-time-entry-panel[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  .cnc-time-entry-panel .cnc-time-table td::before,
  .cnc-time-table tr.cnc-time-row td::before,
  tr.cnc-time-row td::before {
    content: attr(data-label) !important;
  }

  .cnc-time-entry-panel .cnc-time-table td:nth-child(1)::before { content: "Type" !important; }
  .cnc-time-entry-panel .cnc-time-table td:nth-child(2)::before { content: "Date" !important; }
  .cnc-time-entry-panel .cnc-time-table td:nth-child(3)::before { content: "Start Time" !important; }
  .cnc-time-entry-panel .cnc-time-table td:nth-child(4)::before { content: "Stop Time" !important; }
  .cnc-time-entry-panel .cnc-time-table td:nth-child(5)::before { content: "Duration" !important; }
  .cnc-time-entry-panel .cnc-time-table td:nth-child(6)::before { content: "Notes" !important; }
  .cnc-time-entry-panel .cnc-time-table td:nth-child(7)::before { content: "Action" !important; }
}

/* Job Log table action-column repair */
.admin-job-log-table,
.job-log-table {
  table-layout: fixed;
}

.admin-job-log-table td:last-child,
.job-log-table td:last-child {
  overflow: visible;
}

.admin-job-log-table td:last-child .btn,
.job-log-table td:last-child .btn,
.job-log-actions .btn {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.15;
}

@media (min-width: 701px) {
  .admin-job-log-table {
    min-width: 1120px !important;
  }

  .admin-job-log-table th.job-log-select-cell,
  .admin-job-log-table td.job-log-select-cell {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    text-align: center;
  }

  .admin-job-log-table th:nth-child(2),
  .admin-job-log-table td:nth-child(2) {
    width: auto;
  }

  .admin-job-log-table th:nth-child(3),
  .admin-job-log-table td:nth-child(3) {
    width: 120px;
  }

  .admin-job-log-table th:nth-child(4),
  .admin-job-log-table td:nth-child(4) {
    width: 210px;
  }

  .admin-job-log-table th:nth-child(5),
  .admin-job-log-table td:nth-child(5) {
    width: 245px;
  }

  .admin-job-log-table th:nth-child(6),
  .admin-job-log-table td:nth-child(6) {
    width: 154px !important;
    min-width: 154px !important;
    max-width: 154px !important;
  }

  .admin-job-log-table td:last-child,
  .job-log-table td:last-child {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 8px;
  }

  .admin-job-log-table td:last-child .btn,
  .job-log-table td:last-child .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px;
    padding: 9px 10px !important;
    margin: 0 !important;
    justify-content: center;
  }

  .admin-job-log-table .admin-job-status,
  .admin-job-log-table .admin-job-notes {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 700px) {
  .admin-job-log-table,
  .job-log-table {
    table-layout: auto;
  }

  .admin-job-log-table td:last-child,
  .job-log-table td:last-child,
  .job-log-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .admin-job-log-table td:last-child .btn,
  .job-log-table td:last-child .btn,
  .job-log-actions .btn {
    width: 100% !important;
    min-height: 44px;
  }
}

/* Custom material ordered styling */
.cnc-material-status-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  background: #f8f9fa !important;
  border: 1px solid #e9ecef !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  margin: 10px 0 !important;
  flex-wrap: wrap !important;
}
.cnc-material-status-row label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #495057 !important;
  margin: 0 !important;
}
.cnc-material-status-row input.cnc-material-lead-days {
  width: 60px !important;
  padding: 4px 8px !important;
  height: 28px !important;
  margin: 0 !important;
  border: 1px solid #ced4da !important;
  border-radius: 4px !important;
  font-size: 12px !important;
}
.cnc-material-status-row .btn.small {
  margin: 0 !important;
  padding: 5px 12px !important;
  font-size: 11px !important;
}

/* Job Log Admin desktop layout repair */
@media (min-width: 901px) {
  #sidePanel .admin-job-log-table {
    table-layout: fixed !important;
    min-width: 1160px !important;
    width: 100% !important;
  }

  #sidePanel .admin-job-log-col-select { width: 56px; }
  #sidePanel .admin-job-log-col-job { width: 34%; }
  #sidePanel .admin-job-log-col-salesman { width: 120px; }
  #sidePanel .admin-job-log-col-status { width: 210px; }
  #sidePanel .admin-job-log-col-notes { width: 245px; }
  #sidePanel .admin-job-log-col-action { width: 140px; }

  #sidePanel .admin-job-log-table th,
  #sidePanel .admin-job-log-table td {
    padding: 14px 16px !important;
    vertical-align: middle !important;
    overflow: hidden !important;
  }

  #sidePanel .admin-job-log-table th.job-log-select-cell,
  #sidePanel .admin-job-log-table td.job-log-select-cell {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    padding-left: 18px !important;
    padding-right: 10px !important;
  }

  #sidePanel .admin-job-log-table td:nth-child(2) {
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #sidePanel .admin-job-log-table .admin-job-status,
  #sidePanel .admin-job-log-table .admin-job-notes {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #sidePanel .admin-job-log-table .admin-job-notes {
    min-height: 60px !important;
    resize: vertical;
  }

  #sidePanel .admin-job-log-table td:last-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    overflow: hidden !important;
    align-content: start !important;
  }

  #sidePanel .admin-job-log-table td:last-child .btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 9px 8px !important;
    box-shadow: none !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }
}

/* Job Prep and Job Log Admin containment polish */
#sidePanel > .prep-aging-summary,
#sidePanel > .job-prep-controls,
#sidePanel > .job-prep-list {
  margin-left: clamp(18px, 3.25vw, 40px) !important;
  margin-right: clamp(18px, 3.25vw, 40px) !important;
}

#sidePanel > .status-line.info + .prep-aging-summary {
  margin-top: 24px !important;
}

#sidePanel .admin-job-log-table-wrap {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 clamp(12px, 2vw, 24px) 18px !important;
}

@media (min-width: 901px) {
  #sidePanel .admin-job-log-table-wrap .admin-job-log-table {
    min-width: 0 !important;
    width: 100% !important;
  }

  #sidePanel .admin-job-log-table-wrap .admin-job-log-col-select { width: 52px !important; }
  #sidePanel .admin-job-log-table-wrap .admin-job-log-col-salesman { width: 108px !important; }
  #sidePanel .admin-job-log-table-wrap .admin-job-log-col-status { width: 184px !important; }
  #sidePanel .admin-job-log-table-wrap .admin-job-log-col-notes { width: 220px !important; }
  #sidePanel .admin-job-log-table-wrap .admin-job-log-col-action { width: 118px !important; }

  #sidePanel .admin-job-log-table-wrap .admin-job-log-table th,
  #sidePanel .admin-job-log-table-wrap .admin-job-log-table td {
    padding: 14px 14px !important;
  }

  #sidePanel .admin-job-log-table-wrap .admin-job-log-table td:last-child {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #sidePanel .admin-job-log-table-wrap .admin-job-log-table td:last-child .btn {
    min-height: 40px !important;
    padding: 8px 6px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 700px) {
  #sidePanel > .prep-aging-summary,
  #sidePanel > .job-prep-controls,
  #sidePanel > .job-prep-list {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  #sidePanel .admin-job-log-table-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ============================================================
   MOBILE TIME CLOCK TAP + DRAWER ISOLATION FIX
   Keep a closed drawer/backdrop from intercepting Time & Requests taps.
   ============================================================ */
@media (max-width: 1024px) {
  body:not(.mobile-menu-open) .mobile-drawer-backdrop,
  body:not(.mobile-menu-open) .mobile-drawer-flow,
  body:not(.mobile-menu-open) .mobile-drawer-track,
  body:not(.mobile-menu-open) .mobile-drawer-pane {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body:not(.mobile-menu-open) #workspaceScreen.active #sidePanel,
  body:not(.mobile-menu-open) #workspaceScreen.active #sidePanel *,
  body:not(.mobile-menu-open) #clockInBtn,
  body:not(.mobile-menu-open) #clockOutBtn,
  body:not(.mobile-menu-open) #scanBadgeBtn {
    pointer-events: auto !important;
  }

  #clockInBtn,
  #clockOutBtn,
  #scanBadgeBtn {
    position: relative !important;
    z-index: 20 !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0.08);
  }

  .two-buttons {
    position: relative !important;
    z-index: 19 !important;
    isolation: isolate !important;
  }
}