:root {
  --edr2-bg: #ffffff;
  --edr2-text: #333333;
  --edr2-border: #e0e0e0;
  --edr2-subtle: #f9f9f9;
  --edr2-accent: #0073aa;
  --edr2-accent-hover: #005177;
  --edr2-app-th-bg: #f5f5f5;
  --edr2-app-note-bg: #fffbe6;
  --edr2-notice-bg: #f0f8ff;
  --edr2-notice-border: #0073aa;
  --edr2-board-plan-bg: #ffffff;
  --edr2-board-plan-border: #cccccc;
  --edr2-svg-board-bg: #eeeeee;
  --edr2-svg-text: #000000;
  --edr2-svg-label-bg: rgba(255, 255, 255, 0.8);
  --edr2-svg-grain: #999999;
  --edr2-error: #d32f2f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --edr2-bg: #1e1e1e;
    --edr2-text: #e0e0e0;
    --edr2-border: #333333;
    --edr2-subtle: #2d2d2d;
    --edr2-accent: #4f94d4;
    --edr2-accent-hover: #72aee6;
    --edr2-app-th-bg: #2d2d2d;
    --edr2-app-note-bg: #3a3a3a;
    --edr2-notice-bg: #202c36;
    --edr2-notice-border: #4f94d4;
    --edr2-board-plan-bg: #252525;
    --edr2-board-plan-border: #444444;
    --edr2-svg-board-bg: #333333;
    --edr2-svg-text: #ffffff;
    --edr2-svg-label-bg: rgba(30, 30, 30, 0.8);
    --edr2-svg-grain: #666666;
  }
}

.edr2-cto-app {
  max-width: 1000px;
  margin: 0 auto;
  color-scheme: light dark;
}

/* ── UI Toggles (Staff Only) ── */
.edr2-cto-mode-switch {
  display: flex !important;
  justify-content: flex-end !important;
  margin-bottom: 25px !important;
  background: var(--edr2-subtle);
  padding: 10px;
  border-radius: 6px;
  gap: 15px !important;
}

.edr2-cto-mode-switch .button.active {
  background: var(--edr2-accent);
  color: #fff;
  border-color: var(--edr2-accent);
}

/* ── Page Layout ── */
.wo-page {
  background-color: var(--edr2-bg) !important;
  color: var(--edr2-text) !important;
  padding: 30px;
  margin-bottom: 40px !important;
  border: 1px solid var(--edr2-border);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  display: block;
}

.wo-page.hidden {
  display: none !important;
}

/* Hide workorder specific pages in customer mode */
.edr2-mode-customer .wo-page[id$="-4"],
.edr2-mode-customer .wo-page[id$="-5"],
.edr2-mode-customer .wo-page[id$="-6"],
.edr2-mode-customer .wo-page-header,
.edr2-mode-customer .wo-job-badge,
.edr2-mode-customer .wo-check-col,
.edr2-mode-customer #edr2-cut-list .wo-check-col {
  display: none !important;
}

.wo-page-header {
  border-bottom: 2px solid var(--edr2-text);
  margin-bottom: 25px;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  padding-bottom: 12px;
  gap: 15px !important;
  flex-wrap: wrap !important;
}

.wo-page-header h1 {
  margin: 0;
  font-size: 1.6em;
  color: var(--edr2-text);
}

.wo-payment-status-tag--muted {
  font-size: 12px;
  margin-top: 5px;
  color: #666;
}

.wo-approved-note { margin-top: 5px; }

.wo-header-actions { text-align: right; }

.wo-approval-actions { margin-top: 10px; }
.wo-approve-btn { background: #2e7d32; border-color: #2e7d32; margin-right: 5px; }
.wo-hold-btn { background: #ffa000; color: #fff; border-color: #ffa000; margin-right: 5px; }
.wo-reject-btn { background: #d32f2f; color: #fff; border-color: #d32f2f; }

.wo-page-gated { opacity: 0.5; }

.wo-job-badge {
  background: var(--edr2-text);
  color: var(--edr2-bg);
  padding: 5px 15px;
  font-weight: 700;
  border-radius: 3px;
}

/* ── Status Badges ── */
/* Handled by shared.css */

/* ── Sections ── */
.edr2-cto-section {
  margin-bottom: 35px !important;
}

.edr2-cto-section h3 {
  font-size: 1.2em;
  margin-bottom: 15px !important;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--edr2-border);
  color: var(--edr2-text);
}

/* ── Preference Row ── */
.edr2-cto-preference-row {
  display: flex !important;
  gap: 28px !important;
  align-items: flex-start !important;
  margin-bottom: 20px !important;
}

.edr2-cto-preference-row .edr2-cto-section {
  margin-bottom: 0 !important;
  flex: 1 1 0;
}

.cto-opts-col .edr2-cto-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  line-height: 1.35;
}

/* ── Table & Inputs ── */
.edr2-cto-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px !important;
  table-layout: fixed; /* lock columns to header widths */
  word-wrap: break-word;
}

.edr2-cto-table th {
  background: var(--edr2-app-th-bg);
  text-align: left;
  padding: 10px 12px;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--edr2-text);
  border-bottom: 2px solid var(--edr2-border);
  white-space: nowrap;
}

.edr2-cto-table td {
  padding: 8px 6px;
  vertical-align: middle;
}

#edr2-cto-app input[type="text"],
#edr2-cto-app input[type="number"],
#edr2-cto-app input[type="tel"],
#edr2-cto-app input[type="email"],
#edr2-cto-app select,
#edr2-cto-app textarea {
  padding: 8px 10px;
  border: 1px solid var(--edr2-border);
  border-radius: 4px;
  font-size: 0.95em;
  box-sizing: border-box;
  background-color: var(--edr2-bg) !important;
  color: var(--edr2-text) !important;
  color-scheme: light dark;
  height: auto !important;
  line-height: normal;
}

#edr2-cto-app option {
  background-color: var(--edr2-bg);
  color: var(--edr2-text);
}

.edr2-cto-table input[type="text"],
.edr2-cto-table input[type="number"],
.edr2-cto-table select {
  width: 100%;
}

.edr2-cto-app input::placeholder {
  color: var(--edr2-text);
  opacity: 0.5;
}

.edr2-cto-field-error {
  border-color: var(--edr2-error) !important;
  box-shadow: 0 0 0 1px var(--edr2-error) inset;
}

/* Column Widths */
#edr2-cut-list th:nth-child(1) { width: 50px; }  /* No. */
#edr2-cut-list th:nth-child(2) { width: auto; }  /* Part Name */
#edr2-cut-list th:nth-child(3) { width: 230px; } /* Material */
#edr2-cut-list th:nth-child(4) { width: 115px; } /* Length (mm) */
#edr2-cut-list th:nth-child(5) { width: 115px; } /* Width (mm) */
#edr2-cut-list th:nth-child(6) { width: 130px; text-align: center; } /* Allow Rotation */
#edr2-cut-list th:nth-child(7) { width: 92px; }  /* Qty */
#edr2-cut-list th:nth-child(8) { width: 44px; }  /* Remove */

.edr2-cto-table input[name="part_qty"] {
  min-width: 82px;
  text-align: center;
}

#wo-production-cutlist th:nth-child(1),
#wo-recut-checklist th:nth-child(1) { width: 140px; }
#wo-production-cutlist th:nth-child(2),
#wo-recut-checklist th:nth-child(2) { width: auto; }
#wo-production-cutlist th:nth-child(3),
#wo-recut-checklist th:nth-child(3) { width: 140px; }

.wo-check-col { width: 60px; text-align: center; }
.wo-col-cut,
.wo-col-verified { width: 80px; text-align: center; }
.wo-col-action { width: 100px; text-align: center; }
.wo-center-cell { text-align: center; }
.wo-grain-cell { text-align: center; }
.wo-grain-cell input[type="checkbox"] { display: block; margin: 0 auto; }
.wo-grain-cell.edr2-rotation-na input[type="checkbox"] {
  opacity: 0.5;
}


/* ── Inline Notes ── */
.edr2-name-cell {
  position: relative;
}

.edr2-row-note-wrap {
  margin-top: 4px;
}

.edr2-add-note-link {
  font-size: 11px;
  color: var(--edr2-text);
  opacity: 0.7;
  text-decoration: none;
  cursor: pointer;
}

.edr2-add-note-link:hover {
  text-decoration: underline;
  color: var(--edr2-accent);
  opacity: 1;
}

.edr2-cto-table input[name="part_notes"] {
  font-size: 0.85em !important;
  height: 28px !important;
  padding: 4px 8px !important;
  margin-top: 4px;
  border-style: dashed !important;
  background: var(--edr2-app-note-bg) !important;
}

/* ── Components ── */
.edr2-cto-actions,
.edr2-cto-cut-list-actions {
  display: flex !important;
  gap: 15px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.edr2-cto-csv-controls {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-left: auto;
}

.edr2-cto-link {
  color: var(--edr2-accent);
  text-decoration: underline;
  font-size: 13px;
  cursor: pointer;
}

.edr2-cto-link:hover {
  color: var(--edr2-accent-hover);
}

.edr2-link-sep {
  color: var(--edr2-border);
  font-size: 12px;
}

#edr2-cto-app .edr2-cto-select {
  padding: 10px 12px;
  border: 1px solid var(--edr2-border);
  border-radius: 4px;
  background-color: var(--edr2-bg) !important;
  color: var(--edr2-text) !important;
  cursor: pointer;
  height: auto !important;
  line-height: normal;
}

.edr2-cto-beta-banner {
  background: var(--edr2-notice-bg);
  border: 1px solid var(--edr2-notice-border);
  border-left: 4px solid var(--edr2-notice-border);
  padding: 12px 20px;
  margin-bottom: 25px;
  border-radius: 4px;
  color: var(--edr2-text);
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.edr2-cto-beta-badge {
  background: var(--edr2-accent);
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  letter-spacing: 0.5px;
  font-weight: bold;
  text-transform: uppercase;
}

.edr2-cto-notice {
  background: var(--edr2-notice-bg);
  border-left: 4px solid var(--edr2-notice-border);
  padding: 15px 20px;
  margin: 20px 0 !important;
  border-radius: 0 4px 4px 0;
  color: var(--edr2-text);
}

/* ── Allow Rotation ── */
.edr2-grain-icon { margin-left: 8px; cursor: help; font-size: 1.2em; }

/* ── Visual Plans ── */

.edr2-cto-board-plan {
  margin-bottom: 30px !important;
  padding: 20px;
  background: var(--edr2-board-plan-bg);
  border: 1px solid var(--edr2-board-plan-border);
  border-radius: 8px;
  color: var(--edr2-text);
}

.edr2-svg-board {
  fill: var(--edr2-svg-board-bg) !important;
  transition: fill 0.3s ease;
}

.edr2-svg-label {
  fill: var(--edr2-svg-text) !important;
  font-weight: 700;
  pointer-events: none;
  transition: fill 0.3s ease;
}

.edr2-svg-label-bg {
  fill: var(--edr2-svg-label-bg) !important;
}

.edr2-svg-grain-line {
  stroke: var(--edr2-svg-grain) !important;
}

.edr2-svg-arrow {
  stroke: var(--edr2-svg-text) !important;
}

/* ── Staff Features ── */
.wo-checklist-item { padding: 15px; border-bottom: 1px solid var(--edr2-border); font-size: 1.1em; color: var(--edr2-text); }
.wo-checklist-item input { margin-right: 15px; transform: scale(1.4); }
.wo-signature-block { background: var(--edr2-subtle); padding: 25px; border-radius: 6px; margin-top: 20px !important; color: var(--edr2-text); }

.wo-handover-grid, .edr2-wo-customer-grid { 
  display: grid !important; 
  grid-template-columns: 1fr 1fr 1fr; 
  gap: 25px !important; 
  margin-top: 15px !important;
}

/* ── Print Styles ── */
@media print {
  .no-print { display: none !important; }
  .wo-page { border: none !important; box-shadow: none !important; page-break-after: always !important; background: #fff !important; color: #000 !important; }
}

/* Responsive */
@media (max-width: 768px) {
  .wo-handover-grid, .edr2-wo-customer-grid { grid-template-columns: 1fr !important; gap: 15px !important; }
  .edr2-cto-preference-row { flex-direction: column !important; gap: 15px !important; }
  
  .wo-page { padding: 20px; margin-bottom: 30px !important; }

  /* Table to Card Transformation */
  #edr2-cut-list, #edr2-cut-list thead, #edr2-cut-list tbody, #edr2-cut-list th, #edr2-cut-list td, #edr2-cut-list tr {
    display: block !important;
  }
  #edr2-cut-list thead tr { position: absolute; top: -9999px; left: -9999px; }
  #edr2-cut-list tr { border: 1px solid var(--edr2-border); margin-bottom: 20px !important; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }

  #edr2-cut-list td {
    border: none;
    border-bottom: 1px solid var(--edr2-border);
    padding: 15px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  #edr2-cut-list td:before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--edr2-text);
    font-size: 0.75em;
    text-transform: uppercase;
    display: block;
    opacity: 0.7;
  }

  /* Special handling for Remove button cell */
  #edr2-cut-list td:last-child { border-bottom: none; align-items: center !important; background: var(--edr2-subtle); }
  #edr2-cut-list td:last-child:before { display: none; }

  .edr2-cto-remove-row {
    width: 100% !important;
    background-color: var(--edr2-error);
    color: #fff;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .edr2-cto-remove-row:after { content: "Remove Part"; font-size: 14px; font-weight: 600; }

  .edr2-cto-actions, .edr2-cto-cut-list-actions { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  .edr2-cto-actions button, .edr2-cto-cut-list-actions button { width: 100% !important; margin: 0 !important; }
}

/* ── Work Order Handover & Audit ── */
.wo-start-action, .wo-complete-action {
  text-align: center;
  margin-top: 30px;
}

.wo-audit-container {
  margin-top: 20px;
}
.wo-audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.wo-audit-table th {
  background: var(--edr2-app-th-bg);
  padding: 10px;
  text-align: left;
  border-bottom: 2px solid var(--edr2-border);
}
.wo-audit-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--edr2-border);
  vertical-align: top;
}
.wo-audit-table tr:last-child td {
  border-bottom: none;
}

/* ── Recut/Void Styling ── */
.wo-piece-void {
  opacity: 0.5;
  background: var(--edr2-subtle) !important;
}
.wo-piece-void .piece-name {
  text-decoration: line-through;
  color: var(--edr2-text);
  opacity: 0.5;
}
.wo-piece-void input[type="checkbox"] {
  cursor: not-allowed;
}

/* ── Modal ── */
.edr2-modal {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center; justify-content: center;
  z-index: 10000;
}
.edr2-modal.edr2-hidden { display: none !important; }

.edr2-modal-content {
  background: var(--edr2-bg);
  color: var(--edr2-text);
  padding: 25px;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.edr2-map-list {
  max-height: 300px;
  overflow-y: auto;
  margin: 15px 0;
  border: 1px solid var(--edr2-border);
  padding: 10px;
  border-radius: 4px;
}

.edr2-map-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--edr2-subtle);
}
.edr2-map-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.edr2-map-label { font-weight: 600; flex: 1; margin-right: 15px; }
.edr2-map-select { flex: 1; max-width: 200px; }
.edr2-map-grain {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  font-size: 0.9em;
}
.edr2-map-row--no-grain .edr2-map-grain {
  opacity: 0.5;
}

.edr2-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}