:root {
  --bg: #f4f6f8;
  --card: #ffffff;
  --text: #172033;
  --muted: #64748b;
  --line: #d7dee8;
  --primary: #14213d;
  --primary-text: #ffffff;
  --secondary: #e9eef5;
  --secondary-text: #172033;
  --danger: #b42318;
  --danger-text: #ffffff;
  --success: #137333;
  --warning: #9a6700;
  --info: #1d4ed8;
  --shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

body.dark {
  --bg: #0b1220;
  --card: #111a2b;
  --text: #f4f7fb;
  --muted: #a7b1c2;
  --line: #2d3a50;
  --primary: #dce6f5;
  --primary-text: #0d1728;
  --secondary: #1c2a40;
  --secondary-text: #f4f7fb;
  --danger: #ef4444;
  --danger-text: #ffffff;
  --success: #4ade80;
  --warning: #fbbf24;
  --info: #60a5fa;
  --shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

body { padding-bottom: 82px; }

button, input, textarea { font: inherit; }
button { touch-action: manipulation; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: calc(16px + env(safe-area-inset-top)) 16px 14px;
  color: var(--primary-text);
  background: var(--primary);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
}

.topbar h1 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
}

.topbar-subtitle {
  margin: 4px 0 0;
  font-size: .9rem;
  opacity: .8;
}

.app-shell {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: 16px;
}

.card {
  margin-bottom: 16px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.status-card { border-width: 2px; }

.warning-card {
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning), transparent 92%);
}

.warning-card p { margin-bottom: 0; }

.status-heading,
.section-heading,
.form-actions,
.log-toolbar,
.gps-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-heading { margin-bottom: 14px; }
.section-heading.compact { margin-bottom: 8px; }

.section-heading h2,
.section-heading h3,
.status-heading h2,
.help-card h2,
.gps-panel h3 {
  margin: 3px 0 0;
}

.eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.muted {
  margin: 5px 0 0;
  color: var(--muted);
}

.pill {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--secondary);
  color: var(--secondary-text);
  font-weight: 900;
  font-size: .82rem;
}

.pill.ready {
  color: var(--success);
  background: color-mix(in srgb, var(--success), transparent 88%);
}

.pill.active {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning), transparent 86%);
}

.active-details { margin-top: 14px; }

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

.detail {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card), var(--bg) 35%);
}

.detail span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: .78rem;
}

.detail strong {
  display: block;
  overflow-wrap: anywhere;
}

.active-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.active-trip-photo-panel {
  margin-top: 16px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--card), var(--bg) 30%);
}

.active-trip-edit-panel {
  margin-top: 16px;
  padding: 13px;
  border: 2px solid var(--info);
  border-radius: 13px;
  background: color-mix(in srgb, var(--info), transparent 95%);
}

.active-trip-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.active-trip-edit-grid .full {
  grid-column: 1 / -1;
}

.active-trip-photo-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.active-trip-photo-heading span:first-child {
  color: var(--muted);
  font-size: .78rem;
}

.active-trip-photo-heading h3 {
  margin: 3px 0 0;
}

.active-trip-photo-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.active-trip-photo-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.active-trip-photo-preview {
  min-height: 105px;
  padding: 0;
  overflow: hidden;
  color: var(--muted);
  background: color-mix(in srgb, var(--card), var(--bg) 45%);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.active-trip-photo-preview img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 105px;
  object-fit: cover;
}

.active-trip-photo-details {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.active-trip-photo-details strong {
  overflow-wrap: anywhere;
}

.active-trip-photo-details input {
  padding: 9px;
}

.active-trip-photo-empty {
  padding: 12px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 10px;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.button,
.icon-button,
.bottom-nav button {
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
}

.button {
  min-height: 46px;
  padding: 12px 15px;
}

.button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.button-large {
  min-height: 72px;
  font-size: 1.05rem;
}

.button-small {
  min-height: 36px;
  padding: 8px 11px;
  font-size: .84rem;
}

.button-primary {
  color: var(--primary-text);
  background: var(--primary);
}

.button-secondary {
  color: var(--secondary-text);
  background: var(--secondary);
}

.button-danger {
  color: var(--danger-text);
  background: var(--danger);
}

.button-sta {
  color: #111827;
  background: #fca311;
}

.button-danger-outline {
  color: var(--danger);
  background: transparent;
  border: 2px solid var(--danger);
}

.button-quiet {
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
}

.icon-button {
  width: 44px;
  height: 44px;
  color: var(--primary-text);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
}

form,
label {
  display: grid;
  gap: 8px;
}

form { gap: 15px; }

label { font-weight: 800; }

input,
textarea {
  width: 100%;
  padding: 13px;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}

input:focus,
textarea:focus {
  outline: 3px solid color-mix(in srgb, var(--primary), transparent 75%);
  border-color: var(--primary);
}

textarea { resize: vertical; }

small {
  color: var(--muted);
  font-weight: 500;
}

.under-checkbox {
  display: block;
  margin-top: -10px;
  padding-left: 30px;
}

.summary-box,
.miles-preview,
.comparison-box,
.empty-state,
.gps-panel,
.suggestion {
  padding: 13px;
  border-radius: 12px;
}

.summary-box {
  border: 1px dashed var(--line);
  background: color-mix(in srgb, var(--card), var(--bg) 45%);
}

.gps-panel {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card), var(--bg) 38%);
}

.gps-status {
  margin-top: 10px;
  color: var(--muted);
  font-size: .92rem;
}

.gps-status.good { color: var(--success); }
.gps-status.warn { color: var(--warning); }
.gps-status.bad { color: var(--danger); }

.suggestion {
  margin-top: 10px;
  color: var(--info);
  background: color-mix(in srgb, var(--info), transparent 91%);
}

.miles-preview {
  color: var(--success);
  background: color-mix(in srgb, var(--success), transparent 90%);
  font-weight: 900;
}

.comparison-box {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card), var(--bg) 40%);
}

.comparison-box.warning {
  color: var(--warning);
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning), transparent 92%);
}

.empty-state {
  margin: 12px 0;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
}

.log-toolbar { margin-bottom: 12px; }
.search-input { flex: 1 1 auto; }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

table {
  width: 100%;
  min-width: 1680px;
  border-collapse: collapse;
}

th,
td {
  padding: 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

th {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--card), var(--bg) 45%);
  font-size: .82rem;
}

tr:last-child td { border-bottom: 0; }

.map-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.map-links a {
  color: var(--info);
  font-weight: 800;
  text-decoration: none;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.checkbox-row input { width: auto; }

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

.vendor-location-form {
  display: grid;
  gap: 12px;
}

.vendor-locations-list {
  display: grid;
  gap: 9px;
  margin: 14px 0;
}

.vendor-location-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.vendor-location-row small {
  display: block;
  margin-top: 3px;
}

.settings-actions { margin-top: 16px; }

.wrap { flex-wrap: wrap; }

.privacy-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: .88rem;
}

.help-card code {
  display: block;
  margin-top: 9px;
  padding: 10px;
  overflow-wrap: anywhere;
  color: var(--text);
  background: color-mix(in srgb, var(--card), var(--bg) 40%);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: var(--card);
  border-top: 1px solid var(--line);
}

.bottom-nav button {
  min-height: 42px;
  padding: 8px 4px;
  color: var(--secondary-text);
  background: var(--secondary);
  font-size: .84rem;
}

.toast {
  position: fixed;
  right: 16px;
  bottom: 92px;
  left: 16px;
  z-index: 100;
  padding: 14px 16px;
  color: var(--primary-text);
  background: var(--primary);
  border-radius: 12px;
  box-shadow: var(--shadow);
  font-weight: 800;
}

.error-card {
  color: var(--danger);
  border-color: var(--danger);
}

.hidden { display: none !important; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 22px 0;
}

@media (max-width: 760px) {
  .quick-actions { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .active-trip-photo-card { grid-template-columns: 1fr; }
  .active-trip-photo-heading { flex-direction: column; }
  .active-trip-edit-grid { grid-template-columns: 1fr; }
  .active-trip-edit-grid .full { grid-column: auto; }
  .coordinate-grid { grid-template-columns: 1fr; }
  .status-heading { align-items: flex-start; }
  .form-actions,
  .log-toolbar,
  .gps-panel-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .form-actions.wrap { flex-direction: row; }
}

@media print {
  .topbar, .quick-actions, .bottom-nav, .button, .help-card, #settingsSection, #secureWarning { display: none !important; }
  body { padding: 0; background: #fff; color: #000; }
  .card { box-shadow: none; border: 0; }
  #logSection { display: block !important; }
}


.coordinate-grid.two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sta-lock-note {
  padding: 13px;
  color: var(--text);
  background: color-mix(in srgb, var(--info), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--info), transparent 55%);
  border-radius: 12px;
  line-height: 1.45;
}

.private-master-panel {
  margin-bottom: 14px;
  padding: 14px;
  border: 2px solid var(--info);
  border-radius: 14px;
  background: color-mix(in srgb, var(--info), transparent 95%);
}

.private-master-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.private-master-heading h3 {
  margin: 3px 0 0;
}

.private-master-status {
  margin: 12px 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: var(--card);
}

.private-master-status.installed {
  color: var(--success);
  border-color: var(--success);
  background: color-mix(in srgb, var(--success), transparent 94%);
}

.private-master-status.warning {
  color: var(--warning);
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning), transparent 94%);
}

.private-master-status.error {
  color: var(--danger);
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger), transparent 94%);
}

.compact-note {
  margin-bottom: 0;
}


.sta-actions-cell {
  display: grid;
  gap: 6px;
  min-width: 105px;
}

@media (max-width: 760px) {
  .coordinate-grid.two-column { grid-template-columns: 1fr; }
}


.backup-card {
  border-width: 2px;
  border-color: var(--success);
}

.backup-card-required {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger), transparent 96%);
}

.backup-status-text {
  margin: 13px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--card), var(--bg) 35%);
}

.backup-status-line + .backup-status-line {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.backup-ready-panel {
  margin-top: 14px;
  padding: 16px;
  border: 2px solid var(--success);
  border-radius: 14px;
  background: color-mix(in srgb, var(--success), transparent 94%);
}

.backup-ready-panel h3 {
  margin: 4px 0 12px;
}

.backup-ready-summary {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}

.backup-ready-summary span {
  color: var(--muted);
}

.button-backup {
  color: #ffffff;
  background: #137333;
}

.pill.backup-required {
  color: #ffffff;
  background: var(--danger);
}

.backup-photo-notice {
  color: var(--muted);
  font-size: .92rem;
}

.required-backup-note {
  margin-bottom: 16px;
  padding: 13px;
  border-left: 4px solid var(--danger);
  border-radius: 10px;
  color: var(--text);
  background: color-mix(in srgb, var(--danger), transparent 94%);
}

@media (max-width: 760px) {
  .backup-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.trip-edit-panel {
  margin: 16px 0;
  padding: 14px;
  border: 2px solid var(--info);
  border-radius: 14px;
  background: color-mix(in srgb, var(--info), transparent 96%);
}

.trip-edit-photo-section {
  margin: 16px 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--card), var(--bg) 30%);
}

.trip-edit-photo-section .active-trip-photo-heading p {
  margin: 5px 0 0;
}

.trip-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.trip-photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.trip-photo-gallery article {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.trip-photo-gallery button {
  display: block;
  width: 100%;
  min-height: 150px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: color-mix(in srgb, var(--card), var(--bg) 40%);
}

.trip-photo-gallery img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.trip-photo-gallery .trip-photo-caption {
  display: grid;
  gap: 3px;
  padding: 10px;
}

.trip-photo-gallery small {
  color: var(--muted);
}

/* Workflow upgrades: repeatable loads, Concur queue, and weekly timesheets. */
.load-editor-list,
.workflow-entry-list,
.timesheet-day-list {
  display: grid;
  gap: 12px;
}

.load-editor,
.workflow-entry-card,
.timesheet-day,
.timesheet-entry {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card), var(--bg) 24%);
}

.load-editor-routine,
.workflow-entry-heading,
.workflow-settings-row,
.workflow-batch-bar,
.week-navigation,
.timesheet-day-heading {
  display: flex;
  align-items: end;
  gap: 10px;
}

.load-editor-routine > label,
.workflow-settings-row > label,
.workflow-batch-bar > label,
.week-navigation > label {
  flex: 1 1 180px;
}

.load-editor-routine .remove-load-btn { margin-bottom: 1px; }
.load-exception-details,
.prior-load-details,
.workflow-history-details,
.manual-time-entry,
.workflow-entry-card details,
.timesheet-entry details { margin-top: 10px; }

.load-photo-ids { min-height: 70px; }
.prior-load-history { display: grid; gap: 8px; margin-top: 10px; }
.prior-load-history article { padding: 10px; border-left: 3px solid var(--info); background: color-mix(in srgb, var(--info), transparent 95%); }
.prior-load-history article > div { display: flex; justify-content: space-between; gap: 10px; }
.prior-load-history p { margin: 6px 0 0; }
.inspection-load-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.inspection-load-summary span { padding: 7px 9px; border-radius: 9px; background: color-mix(in srgb, var(--info), transparent 93%); }

.workflow-subsection { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.workflow-settings-row,
.workflow-batch-bar,
.week-navigation { flex-wrap: wrap; margin: 12px 0; }
.workflow-select-all { display: flex; flex-direction: row; align-items: center; gap: 7px; }
.workflow-select-all input,
.concur-select { width: 20px; height: 20px; }
.workflow-entry-heading { align-items: flex-start; justify-content: space-between; }
.workflow-entry-heading > div:first-of-type { flex: 1; }
.workflow-entry-heading h4,
.timesheet-day-heading h4 { margin: 2px 0 4px; }
.workflow-entry-heading small { color: var(--muted); }
.workflow-estimate { display: block; margin-top: 8px; text-align: right; white-space: nowrap; }
.workflow-context-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 7px; margin-top: 10px; font-size: .9rem; }
.workflow-status-history { display: grid; gap: 4px; margin-top: 10px; padding: 9px; border-radius: 9px; background: color-mix(in srgb, var(--info), transparent 95%); }
.workflow-week-summary { display: flex; justify-content: space-between; gap: 10px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--info), transparent 95%); }
.workflow-warning { color: var(--warning); font-weight: 700; }
.workflow-complete { color: var(--success); font-weight: 700; }
.timesheet-day.incomplete { border-left: 4px solid var(--warning); }
.timesheet-day-heading { justify-content: space-between; margin-bottom: 9px; }
.timesheet-day-heading small { color: var(--muted); }
.timesheet-entry + .timesheet-entry { margin-top: 9px; }
.manual-time-entry { margin: 14px 0; padding: 12px; border: 1px solid var(--line); border-radius: 13px; }

@media (max-width: 760px) {
  .load-editor-routine,
  .workflow-entry-heading,
  .workflow-week-summary {
    align-items: stretch;
    flex-direction: column;
  }
  .load-editor-routine > label { width: 100%; }
  .workflow-estimate { text-align: left; }
  .workflow-batch-bar .button,
  .workflow-settings-row .button,
  .week-navigation .button { flex: 1 1 42%; }
}

.active-jobs-management-card { border: 1px solid var(--line); padding: 0; box-shadow: none; }
#activeJobsSection { scroll-margin-top: 96px; }
.aj-management-toolbar {
  display: grid; grid-template-columns: minmax(200px, 1fr) minmax(135px, 170px) minmax(170px, 225px) auto;
  align-items: end; gap: 9px; margin: 12px 0 8px; padding: 12px;
  border: 1px solid var(--line); border-radius: 13px;
  background: color-mix(in srgb, var(--card), var(--bg) 30%);
}
.aj-management-toolbar label { min-width: 0; margin: 0; font-size: .83rem; font-weight: 700; }
.aj-management-toolbar input, .aj-management-toolbar select { width: 100%; margin-top: 5px; min-height: 42px; }
.aj-management-toolbar button { min-height: 42px; white-space: nowrap; }
.aj-management-results { margin: 10px 2px; font-size: .84rem; color: var(--muted); font-weight: 700; }
.aj-record-list { display: grid; gap: 9px; }
.aj-record-card { border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: var(--card); }
.aj-record-main { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(300px, 1.35fr) auto; gap: 14px; padding: 13px; align-items: center; }
.aj-record-heading { min-width: 0; }
.aj-record-number { display: inline-block; font-size: .88rem; font-weight: 900; color: var(--text); }
.aj-record-state { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 8px; font-size: .71rem; font-weight: 800; background: color-mix(in srgb, var(--success), transparent 89%); color: var(--success); }
.aj-record-state.closed { background: color-mix(in srgb, var(--muted), transparent 87%); color: var(--muted); }
.aj-record-heading h3 { margin: 6px 0 3px; font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
.aj-record-heading p { margin: 0; font-size: .83rem; color: var(--muted); overflow-wrap: anywhere; }
.aj-record-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 12px; min-width: 0; }
.aj-record-summary span { min-width: 0; overflow-wrap: anywhere; }
.aj-record-summary small { display: block; font-size: .69rem; color: var(--muted); margin-bottom: 3px; font-weight: 700; }
.aj-record-summary strong { font-size: .81rem; font-weight: 800; }
.aj-record-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.aj-record-actions button { min-width: 100px; }
.aj-record-edit-panel { border: 1px solid var(--info); border-radius: 12px; padding: 14px; margin-bottom: 15px; background: var(--card); }
.aj-record-edit-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.aj-record-edit-heading h4 { margin: 0; font-size: 1rem; }
.aj-record-edit-heading span { color: var(--muted); font-weight: 800; }
.aj-record-edit-panel .muted { margin: 0 0 12px; }
.aj-record-edit-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.aj-record-edit-grid label { min-width: 0; margin: 0; font-size: .85rem; font-weight: 700; }
.aj-record-edit-grid input, .aj-record-edit-grid select, .aj-record-edit-grid textarea { width: 100%; min-height: 43px; margin-top: 5px; }
.aj-record-edit-grid textarea { resize: vertical; }
.aj-record-edit-wide { grid-column: 1 / -1; }
.aj-record-edit-buttons { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.aj-record-edit-warning { padding: 10px; border-left: 3px solid var(--warning); background: color-mix(in srgb, var(--warning), transparent 91%); border-radius: 6px; font-size: .87rem; }
.aj-identifier-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 12px; }
.aj-identifier-actions small { font-size: .78rem; color: var(--muted); }
@media (max-width: 599px) {
  .aj-record-actions { justify-content: stretch; }
  .aj-record-actions button, .aj-record-edit-buttons button { flex: 1 1 auto; }
  .aj-record-edit-grid { grid-template-columns: 1fr; }
  .aj-record-edit-wide { grid-column: 1; }
}
.aj-record-details { padding: 12px 13px 14px; border-top: 1px dashed var(--line); background: color-mix(in srgb, var(--card), var(--bg) 24%); }
.aj-record-detail-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.aj-record-detail { padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); min-width: 0; overflow-wrap: anywhere; }
.aj-record-detail.full { grid-column: 1 / -1; }
.aj-record-detail span { display: block; font-size: .70rem; color: var(--muted); text-transform: uppercase; font-weight: 800; margin-bottom: 4px; }
.aj-record-detail strong, .aj-record-detail div { font-size: .85rem; white-space: pre-wrap; }
.aj-record-profile-settings { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.aj-record-profile-settings label { min-width: 0; margin: 0; }
.aj-record-profile-settings select { width: 100%; }
.aj-record-history { margin-top: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
.aj-record-history summary { cursor: pointer; font-weight: 750; }
.aj-record-history p { margin: 10px 0 0; font-size: .82rem; overflow-wrap: anywhere; }
.aj-record-history small { display: block; color: var(--muted); margin-top: 2px; }
.aj-management-actions { margin-top: 14px; }
@media (min-width: 901px) { .aj-management-toolbar { position: sticky; top: 84px; z-index: 15; } }
@media (max-width: 900px) {
  .aj-management-toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .aj-management-toolbar label:first-child { grid-column: 1 / -1; }
  .aj-record-main { grid-template-columns: 1fr; gap: 10px; }
  .aj-record-actions button { min-width: 0; }
  .aj-record-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 599px) {
  .bottom-nav { gap: 4px; padding-left: 6px; padding-right: 6px; }
  .bottom-nav button { font-size: .74rem; min-width: 0; }
  .aj-management-toolbar { grid-template-columns: 1fr; }
  .aj-management-toolbar label:first-child { grid-column: 1; }
  .aj-record-summary { grid-template-columns: 1fr 1fr; }
  .aj-record-detail-grid, .aj-record-profile-settings { grid-template-columns: 1fr; }
  .aj-management-actions .button { flex: 1 1 auto; }
}
.active-jobs-import-review,
.active-jobs-management-details { margin-top: 14px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--info), transparent 97%); }
.active-jobs-management-details > summary { cursor: pointer; font-weight: 800; }
.active-jobs-review-counts { display: grid; grid-template-columns: repeat(5, minmax(90px, 1fr)); gap: 7px; margin: 10px 0; }
.active-jobs-review-counts span { padding: 9px; border-radius: 9px; text-align: center; background: var(--card); border: 1px solid var(--line); }
.active-jobs-review-list { display: grid; gap: 8px; max-height: 430px; overflow: auto; }
.active-jobs-review-item { display: grid; gap: 3px; padding: 10px; border-left: 5px solid var(--line); border-radius: 9px; background: var(--card); }
.active-jobs-review-item > span { font-size: .76rem; font-weight: 900; letter-spacing: .07em; }
.active-jobs-review-item p { margin: 3px 0 0; color: var(--warning); }
.active-jobs-review-item label { margin-top: 7px; }
.active-jobs-warning { border-color: var(--warning) !important; }
.active-jobs-review-item .active-jobs-warning-text { color: var(--muted); }
/* Inspectors need project identity at the top of every review, without nested scrolling. */
#activeJobsReviewPanel .active-jobs-review-list { max-height: none; overflow: visible; margin-top: 12px; gap: 12px; }
#activeJobsReviewPanel .aj-review-card { display: block; border: 1px solid var(--line); border-left: 4px solid var(--info); padding: 13px; }
.aj-review-identity { display: grid; gap: 7px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.aj-review-aj { width: fit-content; font-size: .8rem; font-weight: 850; color: var(--info); }
.aj-review-identity h4 { margin: 0; font-size: 1.04rem; line-height: 1.35; overflow-wrap: anywhere; }
.aj-review-identity-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 16px; }
.aj-review-identity-grid span { min-width: 0; overflow-wrap: anywhere; }
.aj-review-identity-grid small { display: block; margin-bottom: 2px; color: var(--muted); font-size: .73rem; }
.aj-review-identity-grid strong { font-size: .88rem; }
.aj-review-source { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 5px 10px; padding: 10px 0; color: var(--muted); font-size: .82rem; }
.aj-review-source strong { color: var(--text); }
.aj-review-source small { flex-basis: 100%; }
.aj-review-comparison { display: grid; gap: 9px; }
.aj-review-comparison .aj-review-field { display: grid; gap: 5px; margin: 0; font-weight: 500; min-width: 0; }
.aj-review-field > strong { font-size: .9rem; color: var(--text); }
.aj-review-field .aj-review-current { font-size: .79rem; color: var(--muted); overflow-wrap: anywhere; }
.aj-review-field .aj-review-suggestion { font-size: .79rem; color: var(--info); overflow-wrap: anywhere; }
.aj-review-field input, .aj-review-field textarea { width: 100%; margin-top: 2px; min-height: 42px; }
.aj-review-field textarea { resize: vertical; }
#activeJobsReviewPanel .aj-review-footnote { margin: 10px 0; font-size: .78rem; color: var(--muted); }
.aj-review-auto { font-size: .78rem; color: var(--muted); padding: 9px 0; border-top: 1px solid var(--line); }
#activeJobsReviewPanel .aj-review-warning { color: var(--warning); font-size: .87rem; margin: 9px 0; }
@media (min-width: 900px) { .aj-review-comparison { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 560px) {
  .aj-review-identity-grid { grid-template-columns: 1fr 1fr; }
  .aj-review-identity h4 { font-size: .95rem; }
  #activeJobsReviewPanel .aj-review-card { padding: 10px; }
}
.active-jobs-new { border-color: var(--success) !important; }
.active-jobs-updated { border-color: var(--info) !important; }
.active-jobs-closed { border-color: var(--muted) !important; }
.active-jobs-no-change { opacity: .76; }
.active-jobs-conflict { border-color: var(--warning) !important; background: color-mix(in srgb, var(--warning), transparent 93%) !important; }
.facility-profile-form { margin-top: 12px; }
.facility-profile-list,
.active-job-default-list,
.active-jobs-import-history { display: grid; gap: 8px; margin-top: 12px; }
.facility-profile-list article,
.active-job-default-list article,
.active-jobs-import-history article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.facility-profile-list small,
.active-job-default-list small,
.active-jobs-import-history small { display: block; margin-top: 3px; color: var(--muted); }
.active-job-default-list label { min-width: min(310px, 100%); }
.active-job-profile-links { display: grid; gap: 8px; min-width: min(360px, 100%); }
.active-job-profile-links select[multiple] { min-height: 76px; }
.active-jobs-empty { padding: 12px; color: var(--muted); text-align: center; }
.active-job-no-match { padding: 14px; border: 2px solid var(--warning); border-radius: 12px; background: color-mix(in srgb, var(--warning), transparent 93%); }
.active-job-no-match .eyebrow { color: var(--warning); }
.pending-job-assignment,
.facility-visit-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 9px; margin-top: 10px; }
.pending-job-assignment select { flex: 1 1 260px; }
.facility-visit-controls label { flex: 1 1 260px; margin: 0; }
.facility-visit-controls small { flex-basis: 100%; color: var(--muted); }

@media (max-width: 760px) {
  .active-jobs-review-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facility-profile-list article,
  .active-job-default-list article,
  .active-jobs-import-history article { align-items: stretch; flex-direction: column; }
  .pending-job-assignment .button,
  .facility-visit-controls .button { width: 100%; }
}

/* Compact administrative queues: keep actions accessible without tall cards. */
#workflowQueuesSection .workflow-entry-list,
#workflowQueuesSection .timesheet-day-list { gap: 6px; }
#workflowQueuesSection .workflow-entry-card,
#workflowQueuesSection .timesheet-entry { padding: 8px 10px; border-radius: 9px; }
#workflowQueuesSection .timesheet-day { padding: 9px 11px; border-radius: 11px; }
#workflowQueuesSection .workflow-compact-heading { align-items: center; gap: 8px; }
#workflowQueuesSection .workflow-compact-primary { min-width: 0; flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 9px; }
#workflowQueuesSection .workflow-compact-primary > strong { font-size: .88rem; font-weight: 850; overflow-wrap: anywhere; }
#workflowQueuesSection .workflow-compact-primary > span { font-size: .81rem; overflow-wrap: anywhere; }
#workflowQueuesSection .workflow-compact-primary > small { flex-basis: 100%; font-size: .73rem; color: var(--muted); }
#workflowQueuesSection .workflow-compact-total { flex: 0 0 auto; display: grid; justify-items: end; gap: 2px; }
#workflowQueuesSection .workflow-compact-total strong { font-size: .90rem; white-space: nowrap; }
#workflowQueuesSection .workflow-compact-total small { font-size: .70rem; color: var(--muted); white-space: nowrap; }
#workflowQueuesSection .workflow-compact-context { display: flex; flex-wrap: wrap; gap: 3px 12px; margin: 5px 0 0; font-size: .73rem; color: var(--muted); line-height: 1.3; }
#workflowQueuesSection .workflow-compact-context b { color: var(--text); font-weight: 750; }
#workflowQueuesSection .workflow-entry-card > details,
#workflowQueuesSection .timesheet-entry > details { margin-top: 5px; }
#workflowQueuesSection .workflow-entry-card > details > summary,
#workflowQueuesSection .timesheet-entry > details > summary { cursor: pointer; font-size: .76rem; font-weight: 700; color: var(--info); width: fit-content; padding: 2px 0; }
#workflowQueuesSection .timesheet-day-heading { align-items: center; gap: 8px; margin-bottom: 5px; }
#workflowQueuesSection .timesheet-day-heading h4 { font-size: .85rem; margin: 0; }
#workflowQueuesSection .timesheet-day-heading small { font-size: .71rem; }
#workflowQueuesSection .timesheet-day-heading > strong { font-size: .86rem; white-space: nowrap; }
#workflowQueuesSection .timesheet-entry + .timesheet-entry { margin-top: 5px; }
#workflowQueuesSection .workflow-context-grid { margin-top: 7px; }
#workflowQueuesSection .workflow-status-history { margin-top: 7px; }
@media (max-width: 600px) {
  #workflowQueuesSection .workflow-compact-heading { align-items: flex-start; }
  #workflowQueuesSection .workflow-compact-primary { display: block; }
  #workflowQueuesSection .workflow-compact-primary > span,
  #workflowQueuesSection .workflow-compact-primary > small { display: block; margin-top: 2px; }
  #workflowQueuesSection .workflow-compact-total { margin-left: 5px; }
  #workflowQueuesSection .timesheet-day { padding: 8px; }
}