:root{
  --navy: #0A2A43;
  --navy-dark: #071C2E;
  --navy-light: #12405F;
  --accent: #E8791A;
  --accent-dark: #C5650F;
  --bg: #F4F6F8;
  --card: #FFFFFF;
  --border: #E2E6EA;
  --text: #1C2933;
  --text-muted: #6B7A85;
  --success: #1E8E5A;
  --warning: #D9A404;
  --danger: #C13B3B;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(10,42,67,0.08), 0 1px 2px rgba(10,42,67,0.06);
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; cursor:pointer; }

.topbar{
  background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; height:64px; position:sticky; top:0; z-index:50;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ width:36px; height:36px; border-radius:8px; background:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--navy-dark); font-size:18px; }
.brand-text h1{ font-size:16px; margin:0; font-weight:700; letter-spacing:.2px; }
.brand-text p{ font-size:11px; margin:0; color:#B9C9D6; }
.user-chip{ display:flex; align-items:center; gap:8px; font-size:13px; color:#DCE7EF; }
.user-avatar{ width:28px; height:28px; border-radius:50%; background:var(--navy-light); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }

.app{ display:flex; min-height:calc(100vh - 64px); }
.sidebar{ width:220px; background:#fff; border-right:1px solid var(--border); padding:20px 12px; flex-shrink:0; }
.nav-item{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:8px; font-size:14px; font-weight:600; color:var(--text-muted); margin-bottom:4px; }
.nav-item svg{ width:18px; height:18px; flex-shrink:0; }
.nav-item.active{ background:var(--navy); color:#fff; }
.nav-item:not(.active):hover{ background:var(--bg); color:var(--text); }

.main{ flex:1; padding:28px 32px; max-width:1280px; }
.page{ display:none; }
.page.active{ display:block; }

.page-header{ margin-bottom:24px; }
.page-header h2{ font-size:22px; margin:0 0 4px; font-weight:700; }
.page-header p{ margin:0; color:var(--text-muted); font-size:14px; }

.stat-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:28px; }
.stat-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); }
.stat-card .label{ font-size:12px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.stat-card .value{ font-size:30px; font-weight:800; margin-top:6px; color:var(--navy); }
.stat-card.due-soon .value{ color:var(--warning); }
.stat-card.past-due .value{ color:var(--danger); }
.stat-card.emergency{ border-color:#F0CACA; }
.stat-card.emergency .value{ color:#A61B1B; }

.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.card-header{ padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.card-header h3{ margin:0; font-size:15px; font-weight:700; }

table{ width:100%; border-collapse:collapse; font-size:13.5px; }
th{ text-align:left; padding:10px 16px; background:#F9FAFB; color:var(--text-muted); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--border); white-space:nowrap; cursor:pointer; user-select:none; }
th.sortable:hover{ color:var(--navy); }
td{ padding:12px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:last-child td{ border-bottom:none; }
tr.row-link:hover{ background:#F9FBFC; cursor:pointer; }

.badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:700; }
.badge.open{ background:#E9F3EE; color:var(--success); }
.badge.due-soon{ background:#FDF4DC; color:#946200; }
.badge.past-due{ background:#FBEAEA; color:var(--danger); }
.badge.completed{ background:#E3EEF7; color:#1D5A8C; }
.badge.referral{ background:#F1E9F7; color:#6B3FA0; }
.badge.cannot-repair{ background:#FBEAEA; color:#A61B1B; }
.badge.emergency{ background:#A61B1B; color:#fff; }
.badge-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
tr.row-emergency td:first-child{ box-shadow:inset 3px 0 0 #A61B1B; }

/* Workflow stage — separate concept from status (stage is manually moved by
   a teammate to track where the work stands; status is the DOT-facing
   outcome, either computed from due_date/stage or manually overridden). */
.stage-select, .status-select{
  border:1px solid var(--border); border-radius:20px; padding:4px 26px 4px 12px; font-size:12px;
  font-weight:700; font-family:inherit; cursor:pointer; appearance:none;
  background-repeat:no-repeat; background-position:right 10px center; background-size:10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A85' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.stage-select-sm, .status-select-sm{ font-size:11.5px; padding:3px 22px 3px 10px; }
.stage-select.stage-new{ background-color:#EEF1F3; color:var(--text-muted); border-color:#E2E6EA; }
.stage-select.stage-inprogress{ background-color:#FDF4DC; color:#946200; border-color:#F3D9B8; }
.stage-select.stage-completed{ background-color:#E9F3EE; color:var(--success); border-color:#CFE7DA; }
.stage-select:disabled, .status-select:disabled{ opacity:.6; cursor:wait; }
.status-select.open{ background-color:#E9F3EE; color:var(--success); border-color:#CFE7DA; }
.status-select.due-soon{ background-color:#FDF4DC; color:#946200; border-color:#F3D9B8; }
.status-select.past-due{ background-color:#FBEAEA; color:var(--danger); border-color:#F0CACA; }
.status-select.completed{ background-color:#E3EEF7; color:#1D5A8C; border-color:#C7DCEE; }
.status-select.referral{ background-color:#F1E9F7; color:#6B3FA0; border-color:#DDC9EC; }
.status-select.cannot-repair{ background-color:#FBEAEA; color:#A61B1B; border-color:#F0CACA; }

/* Viewer role (read-only account) — see Auth.checkStatus in app.js, which
   toggles this class on <body> based on /api/auth/status's role. This is a
   UX convenience only: it hides/locks the controls a viewer has no use for
   since every write endpoint rejects them anyway (server/middleware/auth.js
   requireWriteAccess) — never rely on this alone for actual enforcement. */
.role-viewer [data-admin-only]{ display:none !important; }
.role-viewer .stage-select, .role-viewer .status-select{
  pointer-events:none; background-image:none; padding-right:12px;
}

.btn{ display:inline-flex; align-items:center; gap:8px; justify-content:center; padding:10px 18px; border-radius:8px; font-size:14px; font-weight:700; border:none; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-dark); }
.btn-secondary{ background:#fff; color:var(--navy); border:1px solid var(--border); }
.btn-secondary:hover{ background:var(--bg); }
.btn-danger-outline{ background:#fff; color:var(--danger); border:1px solid #F0CACA; }
.btn-ghost{ background:transparent; color:var(--text-muted); border:1px solid transparent; padding:8px 12px; font-size:13px; }
.btn-sm{ padding:6px 12px; font-size:12.5px; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.dropzone{ border:2px dashed #C7D2DA; border-radius:16px; background:#fff; padding:56px 24px; text-align:center; }
.dropzone.drag{ border-color:var(--accent); background:#FFF6EC; }
.dropzone .icon-circle{ width:64px; height:64px; border-radius:50%; background:#EAF1F6; color:var(--navy); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.dropzone h3{ margin:0 0 6px; font-size:18px; }
.dropzone p{ margin:0 0 20px; color:var(--text-muted); font-size:14px; max-width:460px; margin-left:auto; margin-right:auto; }
.file-pill{ display:inline-flex; align-items:center; gap:10px; background:#F2F6F8; border:1px solid var(--border); border-radius:10px; padding:10px 14px; font-size:13.5px; margin-top:16px; }
input[type=file]{ display:none; }

.processing-box{ display:flex; align-items:center; gap:14px; padding:20px; background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.spinner{ width:22px; height:22px; border-radius:50%; border:3px solid #E2E6EA; border-top-color:var(--accent); animation:spin 0.9s linear infinite; flex-shrink:0; }
@keyframes spin{ to{ transform:rotate(360deg); } }

fieldset{ border:none; margin:0 0 28px; padding:0; }
legend{ font-size:13px; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px; padding:0; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field.full{ grid-column:1 / -1; }
.form-field label{ font-size:12.5px; font-weight:700; color:var(--text-muted); display:flex; align-items:center; gap:4px; }
.conf{ font-size:10.5px; font-weight:700; color:var(--success); background:#E9F3EE; padding:1px 7px; border-radius:10px; }
.conf.low, .conf.medium{ color:var(--warning); background:#FDF4DC; }
.conf.missing{ color:var(--text-muted); background:#EEF1F3; }
.form-field input, .form-field select, .form-field textarea{ border:1px solid var(--border); border-radius:8px; padding:10px 12px; font-size:14px; font-family:inherit; color:var(--text); background:#fff; }
.form-field input.field-error{ border-color:var(--danger); }
.field-error-msg{ color:var(--danger); font-size:12px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--navy-light); box-shadow:0 0 0 3px rgba(18,64,95,0.12); }
.form-field textarea{ resize:vertical; min-height:80px; }
.form-actions{ display:flex; gap:12px; padding-top:8px; border-top:1px solid var(--border); margin-top:8px; }

.toolbar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; align-items:center; }
.search-input{ flex:1; min-width:220px; display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border); border-radius:8px; padding:9px 14px; }
.search-input input{ border:none; outline:none; font-size:14px; width:100%; font-family:inherit; }
select.filter-select{ border:1px solid var(--border); border-radius:8px; padding:9px 12px; font-size:13.5px; background:#fff; color:var(--text); font-family:inherit; }

.modal-overlay{ position:fixed; inset:0; background:rgba(10,20,30,0.45); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-overlay.show{ display:flex; }
.modal{ background:#fff; border-radius:var(--radius); max-width:440px; width:100%; padding:26px; box-shadow:0 20px 60px rgba(0,0,0,0.25); }
.modal .icon-circle.warn{ background:#FBEAEA; color:var(--danger); width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.modal h3{ margin:0 0 8px; font-size:17px; }
.modal p{ margin:0 0 20px; color:var(--text-muted); font-size:14px; line-height:1.5; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; }

.detail-grid{ display:grid; grid-template-columns:2fr 1fr; gap:20px; align-items:start; }
.kv-list{ display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; padding:20px; }
.kv-list .kv .k{ font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); font-weight:700; margin-bottom:3px; }
.kv-list .kv .v{ font-size:14.5px; font-weight:600; white-space:pre-wrap; }
.kv-list .kv.full{ grid-column:1/-1; }
.pdf-preview{ height:180px; background:#EEF2F5; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--text-muted); font-size:13px; margin:20px; text-align:center; padding:0 16px; }

.notes-list{ max-height:340px; overflow-y:auto; }
.note-item{ padding:14px 20px; border-bottom:1px solid var(--border); }
.note-item:last-child{ border-bottom:none; }
.note-item-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:4px; }
.note-author{ font-weight:700; font-size:13px; color:var(--navy); }
.note-time{ font-size:11.5px; color:var(--text-muted); flex-shrink:0; }
.note-text{ font-size:13.5px; line-height:1.5; white-space:pre-wrap; }
.notes-form{ display:flex; flex-direction:column; gap:10px; padding:16px 20px 20px; border-top:1px solid var(--border); }
.notes-form input, .notes-form textarea{ border:1px solid var(--border); border-radius:8px; padding:9px 12px; font-size:13.5px; font-family:inherit; color:var(--text); }
.notes-form textarea{ resize:vertical; min-height:56px; }
.notes-form input:focus, .notes-form textarea:focus{ outline:none; border-color:var(--navy-light); box-shadow:0 0 0 3px rgba(18,64,95,0.12); }

.empty-state{ text-align:center; padding:60px 20px; color:var(--text-muted); }
.empty-state .icon-circle{ width:56px; height:56px; border-radius:50%; background:#EEF2F5; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; color:var(--navy); }

.toast{ position:fixed; bottom:24px; right:24px; background:var(--navy); color:#fff; padding:14px 18px; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.25); font-size:13.5px; z-index:200; max-width:360px; display:none; }
.toast.show{ display:block; }
.toast.error{ background:var(--danger); }
.toast.success{ background:var(--success); }

.banner-error{ background:#FBEAEA; color:var(--danger); border:1px solid #F0CACA; padding:12px 16px; border-radius:8px; font-size:13.5px; margin-bottom:16px; }
.banner-info{ background:#FFF6EC; color:#7A4D0E; border:1px solid #F3D9B8; padding:12px 16px; border-radius:8px; font-size:13.5px; margin-bottom:16px; }

/* ---------------- Recommended Action card (Work Order Detail) ---------------- */
.action-card{ border:1.5px solid var(--accent); background:linear-gradient(180deg, #FFF9F2 0%, #fff 90px); margin-top:20px; }
.action-card.urgent{ border-color:var(--danger); background:linear-gradient(180deg, #FDF2F2 0%, #fff 90px); }
.action-card .card-header{ background:#FFF1E0; border-bottom-color:#F3D9B8; }
.action-card.urgent .card-header{ background:#FBEAEA; border-bottom-color:#F0CACA; }
.action-card .card-header h3{ display:flex; align-items:center; gap:8px; color:var(--accent-dark); }
.action-card.urgent .card-header h3{ color:var(--danger); }
.action-card .card-header svg{ width:18px; height:18px; }
.action-source{ padding:16px 20px 0; font-size:12.5px; color:var(--text-muted); }
.action-source .quote{ background:var(--bg); border-left:3px solid var(--border); padding:10px 14px; border-radius:0 6px 6px 0; margin-top:8px; font-style:italic; color:var(--text); font-size:13.5px; }
.action-body{ padding:18px 20px 20px; }
.action-headline{ display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.action-code-pill{ display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:28px; padding:0 8px; border-radius:6px; background:var(--navy); color:#fff; font-weight:800; font-size:13px; font-family:ui-monospace,monospace; }
.action-headline .label{ font-size:15px; font-weight:700; }
.status-line{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:16px; padding:10px 14px; background:var(--bg); border-radius:8px; font-size:12.5px; }
.status-line .item{ display:flex; flex-direction:column; gap:2px; }
.status-line .item .l{ color:var(--text-muted); font-weight:700; text-transform:uppercase; font-size:10.5px; letter-spacing:.03em; }
.status-line .item .v{ font-weight:700; color:var(--text); }
.action-steps{ margin:0; padding:0; list-style:none; }
.action-steps li{ display:flex; gap:12px; padding:10px 0; border-top:1px solid var(--border); }
.action-steps li:first-child{ border-top:none; }
.step-num{ width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.action-card.urgent .step-num{ background:var(--danger); }
.step-text{ font-size:13.5px; line-height:1.5; }
.action-secondary{ margin-top:10px; padding:10px 14px; background:var(--bg); border-radius:8px; font-size:13px; color:var(--text); }
.action-footer{ padding:12px 20px; border-top:1px solid var(--border); background:#FAFBFC; font-size:12px; color:var(--text-muted); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.action-footer a{ color:var(--navy); font-weight:700; text-decoration:none; cursor:pointer; }
.source-note{ margin-top:10px; font-size:12px; color:var(--text-muted); }

/* ---------------- Field Update Guide page ---------------- */
.search-row{ padding:18px 20px; border-bottom:1px solid var(--border); display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.search-input{ flex:1; min-width:220px; }
.search-input input{ width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:8px; font-size:14px; outline:none; }
.search-input input:focus{ border-color:var(--accent); }
.chip-group{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{ padding:6px 14px; border-radius:20px; border:1px solid var(--border); font-size:12.5px; font-weight:700; color:var(--text-muted); cursor:pointer; background:#fff; }
.chip.active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.code-pill{ display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:26px; padding:0 6px; border-radius:6px; background:var(--navy); color:#fff; font-weight:800; font-size:12.5px; font-family:ui-monospace,monospace; }
.status-badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px; font-size:11.5px; font-weight:700; }
.status-badge.open, .status-badge.approved{ background:#E7F5EC; color:#1E7A42; }
.status-badge.referral{ background:#FFF1E0; color:var(--accent-dark); }
.status-badge.closed{ background:#EEF1F3; color:var(--text-muted); }
.status-badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.next-step.urgent{ color:var(--danger); font-weight:600; }
.urgent-flag{ display:inline-block; background:var(--danger); color:#fff; font-size:10px; font-weight:800; padding:2px 7px; border-radius:4px; margin-right:6px; letter-spacing:.03em; }
.group-label{ margin:28px 20px 10px; font-size:13px; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.04em; display:flex; align-items:center; gap:8px; }
.group-label .line{ flex:1; height:1px; background:var(--border); }
.new-badge-tag{ margin-left:auto; background:var(--accent); color:#fff; font-size:9.5px; font-weight:800; padding:2px 6px; border-radius:10px; letter-spacing:.03em; }

@media (max-width: 900px){
  .app{ flex-direction:column; }
  .sidebar{ width:100%; display:flex; gap:4px; padding:8px 12px; border-right:none; border-bottom:1px solid var(--border); overflow-x:auto; }
  .nav-item{ white-space:nowrap; margin-bottom:0; }
  .main{ padding:18px 16px; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .detail-grid{ grid-template-columns:1fr; }
  .kv-list{ grid-template-columns:1fr; }
  table thead{ display:none; }
  table, tbody, tr, td{ display:block; width:100%; }
  tr{ border-bottom:1px solid var(--border); padding:10px 4px; }
  td{ border-bottom:none; padding:4px 12px; display:flex; justify-content:space-between; gap:12px; text-align:right; }
  td::before{ content: attr(data-label); font-weight:700; color:var(--text-muted); font-size:11.5px; text-transform:uppercase; text-align:left; }
  .toolbar{ flex-direction:column; align-items:stretch; }
}

/* ---------------- Dark mode ---------------- */
/* Toggled via the moon/sun button in the top bar (ThemeToggle in app.js),
   which sets data-theme="dark" on <html> and remembers the choice in
   localStorage. Most of the app already reads colors from the CSS
   variables above, so overriding those here covers the bulk of it —
   the handful of places that hardcoded a color (mostly stray "#fff"
   backgrounds on inputs/cards that predate the variables) get their own
   override below so nothing's left with a jarring white box. */
[data-theme="dark"]{
  --navy: #1B3A54;
  --navy-dark: #0F2333;
  --navy-light: #2C5578;
  --bg: #12181D;
  --card: #1B2329;
  --border: #2E3944;
  --text: #E4E9ED;
  --text-muted: #8A98A3;
  --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
}
[data-theme="dark"] .sidebar,
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .dropzone,
[data-theme="dark"] .processing-box,
[data-theme="dark"] .search-input,
[data-theme="dark"] .search-input input,
[data-theme="dark"] .filter-select,
[data-theme="dark"] .modal,
[data-theme="dark"] .chip,
[data-theme="dark"] .form-field input,
[data-theme="dark"] .form-field select,
[data-theme="dark"] .form-field textarea,
[data-theme="dark"] .notes-form input,
[data-theme="dark"] .notes-form textarea{
  background:var(--card); color:var(--text);
}
[data-theme="dark"] .file-pill{ background:#222B32; }
[data-theme="dark"] th{ background:#20282E; }
[data-theme="dark"] .pdf-preview,
[data-theme="dark"] .empty-state .icon-circle,
[data-theme="dark"] .dropzone .icon-circle{ background:#222B32; }
[data-theme="dark"] .action-footer{ background:#20282E; }
/* var(--navy) reads fine as TEXT on the light theme, but the dark-mode
   navy above is tuned for use as a background (sidebar highlight, chip
   fills) — as text on a dark card it's nearly invisible. Everywhere navy
   is used as a foreground color instead of a background gets a lighter
   tint here instead. */
[data-theme="dark"] .stat-card .value,
[data-theme="dark"] th.sortable:hover,
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .dropzone .icon-circle,
[data-theme="dark"] legend,
[data-theme="dark"] .note-author,
[data-theme="dark"] .empty-state .icon-circle,
[data-theme="dark"] .action-footer a,
[data-theme="dark"] .group-label{ color:#7FB3D9; }
[data-theme="dark"] .action-card{ background:linear-gradient(180deg, #2A2418 0%, var(--card) 90px); }
[data-theme="dark"] .action-card.urgent{ background:linear-gradient(180deg, #2E1F1F 0%, var(--card) 90px); }
[data-theme="dark"] .action-card .card-header{ background:#3A2E17; border-bottom-color:#4A3A1D; }
[data-theme="dark"] .action-card.urgent .card-header{ background:#3A2020; border-bottom-color:#4A2626; }
/* Status/stage pills and badges keep their own light pastel backgrounds
   in both themes deliberately — that's what gives them their color
   coding, and they still read fine as small chips of color on a dark
   card. Not overridden here on purpose. */

/* Never let dark mode carry into a printed page — paper is always white
   regardless of what's on screen, so force the light variables back on
   for any print job no matter which theme is active. */
@media print{
  :root, [data-theme="dark"]{
    --navy: #0A2A43; --navy-dark: #071C2E; --navy-light: #12405F;
    --bg: #F4F6F8; --card: #FFFFFF; --border: #E2E6EA;
    --text: #1C2933; --text-muted: #6B7A85;
  }
  /* The dark-mode text-contrast fixes above (the lighter #7FB3D9 for navy
     text on a dark card) are hardcoded colors, not tied to the variables
     just reset above — without this they'd still show up light-on-white
     in a printout. Send them back to normal navy for print specifically. */
  [data-theme="dark"] .stat-card .value,
  [data-theme="dark"] th.sortable:hover,
  [data-theme="dark"] .btn-secondary,
  [data-theme="dark"] .dropzone .icon-circle,
  [data-theme="dark"] legend,
  [data-theme="dark"] .note-author,
  [data-theme="dark"] .empty-state .icon-circle,
  [data-theme="dark"] .action-footer a,
  [data-theme="dark"] .group-label{ color:var(--navy); }
}

/* Printing a work order (DetailPage.print() / the "Print Work Order"
   button) — show just the record and its notes: no nav, no buttons/forms,
   no PDF-preview card. Everything else on the page stays exactly as the
   user built it; this only changes what appears when the browser's print
   dialog is used. */
@media print{
  .topbar, .sidebar, .no-print{ display:none !important; }
  .app{ display:block; }
  .main{ padding:0; max-width:none; }
  .detail-grid{ grid-template-columns:1fr; }
  /* Cards can legitimately run longer than one printed page (a work order
     with many fields, or many notes) — DON'T force the whole card to avoid
     breaking, that just leaves huge blank gaps as the browser tries and
     fails to keep it on one page. Only avoid breaking *inside* a single
     field row or note, which are always small. */
  .card{ box-shadow:none; border:1px solid #ccc; }
  .card-header{ break-after:avoid; }
  .kv{ break-inside:avoid; }
  /* .notes-list scrolls in a fixed-height box on screen (long note
     history) — on paper there's no scrollbar, so that fixed height was
     silently clipping everything past it. Let it flow naturally instead. */
  .notes-list{ max-height:none; overflow:visible; }
  .notes-list .note-item{ break-inside:avoid; }
  body{ background:#fff; }
}

/* "Print PDF + Notes" (DetailPage.printPdfWithNotes() /
   DetailPage._printNotesOnly()) — the PDF itself prints as its own
   separate job (a hidden same-origin iframe printing itself, same as
   "Print Original PDF"), then this notes-only overlay is built, shown,
   and printed as a second job right after. Hidden at all other times,
   including in the normal on-screen view. */
#print-notes-only-overlay{ display:none; }
@media print{
  body.printing-notes-only .topbar,
  body.printing-notes-only .sidebar,
  body.printing-notes-only .main > .page{ display:none !important; }
  /* .app carries min-height:calc(100vh - 64px) normally — with its
     children hidden that still left a full screen's worth of blank space
     above the overlay, pushing the actual notes onto page 2. Collapse it
     back to nothing while this overlay is what's being printed. */
  body.printing-notes-only .app{ min-height:0 !important; }
  body.printing-notes-only #print-notes-only-overlay{ display:block !important; }
}