:root {
  --backend-nav-width: 224px;
  --backend-topbar-height: 72px;
}

/* Django pages use the prototype shell and keep backend-only layouts scoped. */
.add-job-backend-main,
.aj-backend-form { display: contents; }
.people-bottom a { color: #c5d0d3; text-decoration: none; text-align: center; }
.people-bottom a > span:last-child { display: block; margin-top: 4px; font-size: var(--text-sm); }
.main-nav .nav-link[aria-disabled="true"] { opacity: .55; cursor: default; }
.aj-type-pill:disabled { opacity: .56; cursor: default; }
.aj-type-pill:disabled:hover { border-color: var(--c-border); background: var(--c-surface); }
.identifier-delete-field { display: none; }
.aj-identifiers { margin-top: var(--sp-5); }
.aj-identifiers .aj-id-mark-row { grid-template-columns: minmax(180px,260px) minmax(220px,460px) var(--touch-target) 1fr; }
.aj-identifiers .aj-id-mark-input-wrap { position: relative; }
.aj-identifiers .aj-id-mark-check { display: none; }
.aj-stock-status--success { color: var(--c-success); border-color: color-mix(in srgb, var(--c-success) 30%, var(--c-border)); background: var(--c-success-tint); }
.aj-stock-status--danger { color: var(--c-danger); border-color: color-mix(in srgb, var(--c-danger) 30%, var(--c-border)); background: var(--c-error-tint); }
.aj-photo-drop input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.aj-photo-drop small { color: var(--c-muted); }
.photo-preview { margin-top: var(--sp-4); display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
.aj-photo-preview-item { min-width: 0; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; background: var(--c-surface); }
.aj-photo-preview-item img { width: 100%; aspect-ratio: 1; display: block; object-fit: contain; background: var(--c-subtle); }
.aj-photo-preview-item img:not([src]) { display: none; }
.aj-photo-preview-placeholder { width: 100%; aspect-ratio: 1; display: grid; place-items: center; color: var(--c-placeholder); background: var(--c-subtle); font-size: 42px; }
.aj-photo-preview-item figcaption { min-height: 65px; padding: var(--sp-3); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); color: var(--c-muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.aj-photo-preview-item figcaption strong, .aj-photo-preview-item figcaption small { display: block; }
.aj-photo-preview-item figcaption strong { color: var(--c-dark); font-weight: 500; }
.aj-photo-preview-item figcaption small { margin-top: 2px; color: var(--c-muted); }
.aj-photo-preview-remove, .aj-photo-file-error button { width: 38px; height: 38px; display: inline-grid; place-items: center; color: var(--c-danger); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); cursor: pointer; }
.aj-photo-preview-remove .material-symbols-outlined, .aj-photo-file-error button .material-symbols-outlined { font-size: 20px; }
.aj-photo-file-error { min-height: 58px; padding: var(--sp-3); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); color: var(--c-danger); background: var(--c-error-tint); border: 1px solid color-mix(in srgb, var(--c-danger) 25%, var(--c-border)); border-radius: var(--r-md); font-size: var(--text-sm); }
.aj-photo-drop.is-dragover { border-color: var(--c-orange); background: var(--c-orange-tint); }
.errorlist { margin: var(--sp-2) 0; padding: 0; list-style: none; color: var(--c-danger); font-size: var(--text-xs); }
.aj-delivery-address, .aj-assessment-assignee { margin-top: var(--sp-4); max-width: 720px; }
.aj-address-preview { margin-top: var(--sp-3); padding: var(--sp-3); color: var(--c-text-mid); background: var(--c-subtle); border: 1px solid var(--c-border-light); border-radius: var(--r-md); }
.aj-address-manual-btn { margin-top: var(--sp-3); }
.label-mt { margin-top: var(--sp-4); }

@media (max-width: 700px) {
  .aj-identifiers .aj-id-mark-row { grid-template-columns: 1fr var(--touch-target); }
  .aj-identifiers .aj-id-mark-row > .aj-select,
  .aj-identifiers .aj-id-mark-input-wrap { grid-column: 1 / -1; }
}

.backend-body { min-width: 320px; background: var(--c-page); color: var(--c-dark); }
.backend-shell { min-height: 100vh; display: grid; grid-template-columns: var(--backend-nav-width) minmax(0, 1fr); }
.backend-nav { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--c-dark-2); color: var(--c-nav-text); z-index: 20; }
.backend-brand { height: 92px; padding: 18px 22px; display: flex; align-items: center; background: var(--c-dark); }
.backend-brand img { display: block; width: 100%; max-height: 55px; object-fit: contain; object-position: left center; }
.backend-nav-links { padding: 18px 12px; display: grid; gap: 4px; }
.backend-nav-links a { min-height: 45px; padding: 12px 14px; border-radius: 6px; text-decoration: none; display: flex; align-items: center; color: var(--c-nav-text); }
.backend-nav-links a:hover, .backend-nav-links a:focus-visible { background: rgba(255,255,255,.08); }
.backend-nav-links a.is-active { background: var(--c-dark); color: var(--c-surface); box-shadow: inset 3px 0 0 var(--c-orange); }
.backend-nav-foot { margin-top: auto; padding: 18px 24px 24px; display: grid; gap: 6px; border-top: 1px solid rgba(255,255,255,.12); }
.backend-nav-foot span { font-size: var(--text-sm); color: var(--c-nav-text-dim); }
.nav-logout { border: 0; padding: 0; background: transparent; color: var(--c-surface); cursor: pointer; text-align: left; }
.backend-workspace { min-width: 0; }
.backend-topbar { min-height: var(--backend-topbar-height); padding: 12px clamp(20px, 3vw, 42px); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--c-surface); border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 10; }
.backend-topbar h1 { font-size: var(--text-xl); font-weight: 500; line-height: 1.15; }
.topbar-kicker, .eyebrow { margin: 0 0 3px; color: var(--c-muted); font-size: var(--text-xs); line-height: 1.3; }
.topbar-user { text-align: right; display: grid; }
.topbar-user span { font-weight: 500; }
.topbar-user small { color: var(--c-muted); }
.mobile-nav-toggle { display: none; }
.backend-main { width: 100%; max-width: 1500px; margin: 0 auto; padding: 28px clamp(20px, 3vw, 42px) 56px; }

.page-intro, .record-heading { margin-bottom: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page-intro h2, .record-heading h2 { font-size: 27px; font-weight: 500; line-height: 1.2; }
.page-intro p:last-child, .record-heading p { margin-top: 7px; color: var(--c-muted); max-width: 760px; }
.back-link, .text-link { color: var(--c-orange-dark); text-decoration: none; font-weight: 500; }
.back-link { display: inline-block; margin-bottom: 10px; font-size: var(--text-sm); }
.back-link::before { content: "← "; }

.app-card { margin-bottom: 20px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 8px; box-shadow: var(--shadow-card); overflow: hidden; }
.card-head { min-height: 66px; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--c-border-light); }
.card-head h2 { font-size: var(--text-lg); font-weight: 500; }
.card-head p:not(.eyebrow) { color: var(--c-muted); font-size: var(--text-sm); }
.card-head--toolbar { flex-wrap: wrap; }
.form-card { overflow: visible; }

.metric-grid { margin-bottom: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metric-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.metric-card { min-height: 124px; padding: 17px 18px; display: grid; align-content: center; gap: 4px; color: var(--c-dark); text-decoration: none; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 8px; }
a.metric-card:hover { border-color: var(--c-orange); }
.metric-card span { color: var(--c-muted); font-size: var(--text-sm); }
.metric-card strong { color: var(--c-orange); font-size: 30px; font-weight: 500; line-height: 1; }
.metric-card small { color: var(--c-text-mid); }

.workflow-strip { margin-bottom: 20px; padding: 12px 16px; display: flex; gap: 6px; overflow-x: auto; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 8px; }
.workflow-strip span { min-height: 32px; padding: 6px 11px; border-radius: 5px; color: var(--c-muted); white-space: nowrap; font-size: var(--text-sm); }
.workflow-strip span.is-current { background: var(--c-orange-tint); color: var(--c-orange-dark); font-weight: 500; }
.record-form { display: grid; }
.form-grid { padding: 20px; display: grid; gap: 20px; }
.form-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field-span-2 { grid-column: span 2; }
.field-span-all { grid-column: 1 / -1; }
.field-group { min-width: 0; display: grid; align-content: start; gap: 7px; }
.field-group > label, .field-group legend, .stack-form label { color: var(--c-text-mid); font-size: var(--text-sm); font-weight: 500; }
.field-group input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), .field-group select, .field-group textarea, .search-form input, .stack-form input { width: 100%; min-height: 44px; padding: 10px 13px; color: var(--c-dark); background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: 6px; }
.field-group textarea { min-height: 92px; resize: vertical; line-height: 1.45; }
.field-group input::placeholder, .field-group textarea::placeholder { color: var(--c-placeholder); }
.choice-group { border: 0; }
.choice-group ul { min-height: 44px; list-style: none; display: flex; align-items: center; gap: 16px; }
.choice-group li label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.choice-group input { width: 18px; height: 18px; accent-color: var(--c-orange); }
.unit-input { position: relative; }
.unit-input input { padding-right: 45px !important; }
.unit-input span { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--c-muted); font-size: var(--text-sm); pointer-events: none; }
.file-drop { min-height: 90px; padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; border: 1px dashed var(--c-border-strong); border-radius: 6px; cursor: pointer; background: var(--c-subtle); }
.file-drop:hover { border-color: var(--c-orange); background: var(--c-orange-tint); }
.file-drop strong { color: var(--c-dark); font-weight: 500; }
.file-drop span { color: var(--c-muted); font-size: var(--text-sm); }
.file-drop input { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.form-actions { margin-top: 2px; display: flex; justify-content: flex-end; gap: 10px; }
.form-actions--split { justify-content: space-between; }
.form-actions > div { display: flex; gap: 10px; }

.queue-summary { margin-bottom: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 8px; overflow: hidden; }
.queue-summary a { padding: 14px 18px; display: flex; align-items: baseline; gap: 10px; text-decoration: none; border-right: 1px solid var(--c-border-light); }
.queue-summary a:last-child { border-right: 0; }
.queue-summary a.is-active { box-shadow: inset 0 -3px 0 var(--c-orange); background: var(--c-orange-tint); }
.queue-summary strong { color: var(--c-orange); font-size: var(--text-xl); font-weight: 500; }
.queue-summary span { color: var(--c-text-mid); }
.search-form { display: flex; gap: 8px; }
.search-form input { min-width: min(330px, 55vw); }

.table-wrap { width: 100%; overflow-x: auto; }
.app-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.app-table th { padding: 12px 14px; color: var(--c-dark); text-align: left; font-weight: 500; background: var(--c-subtle); border-right: 1px solid var(--c-border-light); border-bottom: 1px solid var(--c-border); white-space: normal; }
.app-table th:last-child, .app-table td:last-child { border-right: 0; }
.app-table td { padding: 13px 14px; border-right: 1px solid var(--c-border-light); border-bottom: 1px solid var(--c-border-light); vertical-align: middle; }
.app-table tbody tr:nth-child(even) { background: var(--c-table-stripe); }
.app-table tbody tr:last-child td { border-bottom: 0; }
.app-table--clickable tbody tr { cursor: pointer; }
.app-table--clickable tbody tr:hover { background: var(--c-orange-tint); }
.app-table .num { text-align: center; font-variant-numeric: tabular-nums; }
.empty-cell { padding: 34px !important; text-align: center; color: var(--c-muted); }
.status-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 8px; border-radius: 5px; background: var(--c-subtle-2); color: var(--c-text-mid); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }
.status-pill--ready_for_quotation, .status-pill--valid, .status-pill--imported, .status-pill--complete { color: var(--c-success); background: var(--c-success-tint); }
.status-pill--awaiting_information, .status-pill--warning, .status-pill--review_required { color: var(--c-warning-tint-text); background: var(--c-warning-tint); }
.status-pill--error, .status-pill--failed { color: var(--c-danger); background: var(--c-error-tint); }
.status-pill--duplicate { color: var(--c-info); background: color-mix(in srgb, var(--c-info) 10%, white); }
.row-message { max-width: 260px; margin-top: 5px; display: block; color: var(--c-muted); white-space: normal; }
.table-footnote { padding: 11px 16px; color: var(--c-muted); font-size: var(--text-sm); border-top: 1px solid var(--c-border-light); }

.detail-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.detail-summary > div { min-height: 86px; padding: 15px 18px; display: grid; align-content: center; gap: 5px; border-right: 1px solid var(--c-border-light); border-bottom: 1px solid var(--c-border-light); }
.detail-summary > div:nth-child(3n) { border-right: 0; }
.detail-summary > div:nth-last-child(-n+3) { border-bottom: 0; }
.detail-summary span { color: var(--c-muted); font-size: var(--text-sm); }
.detail-summary strong { font-weight: 500; }
.attachment-list { padding: 18px 20px; display: grid; gap: 8px; }
.attachment-list a { padding: 12px 14px; display: grid; gap: 3px; text-decoration: none; border: 1px solid var(--c-border); border-radius: 6px; }
.attachment-list a:hover { border-color: var(--c-orange); }
.attachment-list span { color: var(--c-muted); font-size: var(--text-sm); }

.instruction-note { margin: 0 0 20px; padding: 12px 15px; color: var(--c-text-mid); background: var(--c-subtle); border-left: 3px solid var(--c-border-strong); border-radius: 0 5px 5px 0; }
.instruction-note--inside { margin: 18px 20px 0; }
.message-stack { margin-bottom: 16px; display: grid; gap: 8px; }
.app-message { padding: 12px 14px; border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-surface); }
.app-message--success { color: var(--c-success); background: var(--c-success-tint); border-color: color-mix(in srgb, var(--c-success) 25%, white); }
.app-message--error { color: var(--c-danger); background: var(--c-error-tint); border-color: color-mix(in srgb, var(--c-danger) 25%, white); }
.app-message--info { color: var(--c-info); }
.import-form { padding: 20px; display: grid; grid-template-columns: minmax(180px, .7fr) minmax(300px, 2fr) auto; align-items: end; gap: 18px; }

.login-page { min-height: 100vh; background: var(--c-page); }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-panel { width: min(430px, 100%); padding: 34px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 8px; box-shadow: var(--shadow-card); }
.login-logo { width: 210px; height: 70px; object-fit: contain; object-position: left center; }
.login-copy { margin: 24px 0 20px; }
.login-copy h1 { font-size: 30px; font-weight: 500; }
.stack-form { display: grid; gap: 9px; }
.stack-form .btn { width: 100%; margin-top: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .import-form { grid-template-columns: 1fr 2fr; }
  .import-form .btn { grid-column: 2; justify-self: end; }
}

@media (max-width: 760px) {
  .backend-shell { display: block; }
  .backend-nav { position: fixed; inset: 0 auto 0 0; width: min(280px, 85vw); transform: translateX(-101%); transition: transform .2s ease; box-shadow: 5px 0 20px rgba(0,0,0,.18); }
  .backend-nav.is-open { transform: translateX(0); }
  .mobile-nav-toggle { min-height: 38px; padding: 7px 10px; display: inline-flex; border: 1px solid var(--c-border); border-radius: 5px; background: var(--c-surface); }
  .backend-topbar { gap: 12px; }
  .topbar-user { display: none; }
  .backend-main { padding-inline: 14px; }
  .page-intro, .record-heading { align-items: flex-start; flex-direction: column; }
  .metric-grid, .metric-grid--five, .queue-summary, .form-grid--four, .detail-summary, .import-form { grid-template-columns: 1fr; }
  .field-span-2, .field-span-all { grid-column: auto; }
  .queue-summary a { border-right: 0; border-bottom: 1px solid var(--c-border-light); }
  .detail-summary > div, .detail-summary > div:nth-child(3n), .detail-summary > div:nth-last-child(-n+3) { border-right: 0; border-bottom: 1px solid var(--c-border-light); }
  .detail-summary > div:last-child { border-bottom: 0; }
  .card-head--toolbar { align-items: stretch; flex-direction: column; }
  .search-form { width: 100%; }
  .search-form input { min-width: 0; }
  .form-actions, .form-actions--split { align-items: stretch; flex-direction: column-reverse; }
  .form-actions > div { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }
  .import-form .btn { grid-column: auto; justify-self: stretch; }
}