/* Import documents — v37 jobs dashboard (feature 045, replaces the v28 inline wizard).
   Global stylesheet (NOT a scoped .razor.css: badge markup is emitted from a C# RenderFragment
   builder, which scoped CSS cannot reach). Every rule is namespaced under .import-page so the
   imp-* system never leaks to other screens.

   Rules are copied from the v37 reference (specs/045-v37-ui-parity/reference/import-screen.css)
   with three adaptations, each marked "app:" below —
   1. the batch kebab is replaced by an inline "Retry failed" button (it held a single action);
   2. the drop-zone hosts an invisible native file input (click-to-browse + OS drag-drop);
   3. small app-only states: modal error note, uploading label, done panel.
   The reference's bulk-bar/keyhint hiding rule is intentionally absent (decision D3: prototype
   scaffolding not replicated). The @keyframes are reconstructed — the reference extract names
   imppulse/impshim/impblink but does not include their bodies. */

/* ── page head ─────────────────────────────────────────────────────────────
   App-standard left-aligned header: the global .page-header (layout.css) column becomes a row so
   the title + subtitle sit left and the primary CTA sits right on the same line. */
.import-page .imp-pagehead{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.import-page .imp-pagehead>div{min-width:0;max-width:100%}
.import-page .imp-pagehead .page-subtitle{overflow-wrap:anywhere}
.import-page .imp-new-btn{flex-shrink:0}
.import-page .imp-new-btn svg{width:16px;height:16px}

/* ── status strip ────────────────────────────────────────────────────────── */
.import-page .imp-status{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:13px 18px;background:var(--color-white);border:1px solid var(--color-border);border-radius:12px;margin-bottom:26px;font-size:13.5px;color:var(--color-service-grey)}
.import-page .imp-status-item{display:flex;align-items:baseline;gap:6px}
.import-page .imp-status-n{font-family:var(--font-heading);font-weight:500;color:var(--color-navy);font-size:17px}
.import-page .imp-status-n.warn{color:var(--color-warning)}
.import-page .imp-status-dot{width:4px;height:4px;border-radius:50%;background:var(--color-border);align-self:center}
.import-page .imp-status-item.link{cursor:pointer;transition:color .15s}
.import-page .imp-status-item.link.warn:hover{color:var(--color-warning)}
.import-page .imp-status-quiet{color:var(--color-text-secondary)}

/* ── zones ───────────────────────────────────────────────────────────────── */
.import-page .imp-zone{margin-bottom:30px}
.import-page .imp-zone-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.import-page .imp-section-label{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--color-service-grey);margin:0 0 12px 2px}
.import-page .imp-zone-head .imp-section-label{margin-bottom:0}
.import-page .imp-tools{display:flex;align-items:center;gap:10px}

/* ── active-import job card ──────────────────────────────────────────────── */
.import-page .imp-job{background:var(--color-white);border:1px solid var(--color-border);border-left:3px solid var(--color-blue);border-radius:12px;padding:18px 20px 16px;margin-bottom:14px}
.import-page .imp-job-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.import-page .imp-job-id{display:flex;gap:12px;align-items:center}
.import-page .imp-job-name{font-size:15px;font-weight:500;color:var(--color-navy);font-family:var(--font-heading)}
.import-page .imp-job-meta{font-size:12.5px;color:var(--color-service-grey);margin-top:2px}
.import-page .imp-live-dot{width:10px;height:10px;border-radius:50%;background:var(--color-blue);flex-shrink:0;animation:imppulse 1.8s infinite}
.import-page .imp-progress{height:7px;background:var(--color-border-light);border-radius:9999px;overflow:hidden;margin:15px 0 10px}
.import-page .imp-progress-fill{height:100%;background:var(--color-blue);border-radius:9999px;transition:width .6s ease;position:relative;overflow:hidden}
.import-page .imp-progress-fill.running::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-100%);animation:impshim 1.5s infinite}
.import-page .imp-job-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12.5px}
.import-page .imp-job-phase{color:var(--color-navy)}
.import-page .imp-job-phase b{font-weight:500}
.import-page .imp-job-count{color:var(--color-service-grey);white-space:nowrap}
.import-page .imp-mini{width:100%;margin-top:14px;border-top:1px solid var(--color-border-light)}
.import-page .imp-mini td{padding:8px 4px;font-size:12.5px;border-bottom:1px solid var(--color-border-light);vertical-align:middle}
.import-page .imp-mini tr:last-child td{border-bottom:none}
.import-page .imp-mini-ref{font-family:ui-monospace,'JetBrains Mono',monospace;color:var(--color-navy);width:110px;white-space:nowrap}
.import-page .imp-mini-title{color:var(--color-text-primary)}
.import-page .imp-mini-status{width:130px;text-align:right}

/* ── idle / empty state ──────────────────────────────────────────────────── */
.import-page .imp-idle{display:flex;align-items:center;gap:10px;background:var(--color-white);border:1px solid var(--color-border);border-radius:12px;padding:16px 18px;font-size:13.5px;color:var(--color-service-grey)}
.import-page .imp-idle svg{width:18px;height:18px;color:var(--color-success);flex-shrink:0}

/* ── badges ──────────────────────────────────────────────────────────────── */
.import-page .imp-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:9999px;white-space:nowrap}
.import-page .imp-badge svg{width:12px;height:12px}
.import-page .imp-badge.extracted,.import-page .imp-badge.completed{background:var(--color-success-tint);color:var(--color-success)}
.import-page .imp-badge.processing,.import-page .imp-badge.running{background:var(--color-info-tint);color:var(--color-info)}
.import-page .imp-badge.queued{background:var(--color-surface);color:var(--color-service-grey)}
.import-page .imp-badge.errors{background:var(--color-warning-tint);color:var(--color-warning)}
.import-page .imp-badge.failed{background:var(--color-error-tint);color:var(--color-error)}
.import-page .imp-dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.import-page .imp-badge.processing .imp-dot,.import-page .imp-badge.running .imp-dot{animation:impblink 1.1s infinite}

/* ── history table ───────────────────────────────────────────────────────── */
.import-page .imp-htable{overflow:visible}
.import-page .imp-htable tbody tr td{background:var(--color-white)}
.import-page .imp-htable tbody tr:not(.imp-brow):hover td{background:rgba(162,189,189,.10)}
.import-page .imp-htable .mono{font-family:ui-monospace,'JetBrains Mono',monospace;font-size:12.5px;color:var(--color-navy);white-space:nowrap}
.import-page .imp-title{color:var(--color-navy)}
.import-page .imp-ext{color:var(--color-service-grey);font-size:13px;white-space:nowrap}
.import-page .imp-empty{text-align:center;color:var(--color-service-grey);padding:26px!important;background:var(--color-white)}
.import-page .imp-fail-note{display:inline-flex;align-items:center;gap:5px;color:var(--color-error);font-size:12.5px}
.import-page .imp-fail-note svg{width:13px;height:13px;flex-shrink:0}

/* batch rows */
.import-page .imp-brow td{padding:0!important;background:#EEF4F4}
.import-page .imp-brow-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 16px}
.import-page .imp-brow-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.import-page .imp-brow-label{font-weight:500;color:var(--color-navy);font-size:13.5px}
.import-page .imp-brow-sub{font-size:12.5px;color:var(--color-service-grey)}
.import-page .imp-brow-right{display:flex;align-items:center;gap:10px}
.import-page .imp-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:5px 10px;border-radius:8px;cursor:pointer;background:var(--color-warning-tint);color:var(--color-warning);transition:filter .15s}
.import-page .imp-chip svg{width:13px;height:13px}
.import-page .imp-chip.warn:hover{filter:brightness(.96)}
/* app: single batch action rendered inline (the v37 kebab held only "Retry failed") */
.import-page .imp-retry{font-size:12px;font-weight:500;color:var(--color-navy);background:transparent;border:1px solid var(--color-control-border);border-radius:7px;padding:5px 10px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .15s}
.import-page .imp-retry:hover{background:var(--color-surface)}
.import-page .imp-retry:disabled{color:var(--color-text-secondary);cursor:default;background:transparent}

/* ── wizard modal ────────────────────────────────────────────────────────── */
.import-page .imp-modal-overlay{position:fixed;inset:0;background:rgba(0,4,50,.5);display:none;align-items:center;justify-content:center;z-index:400;padding:24px}
.import-page .imp-modal-overlay.show{display:flex}
.import-page .imp-modal{background:var(--color-white);border-radius:16px;width:100%;max-width:640px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg)}
.import-page .imp-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px 16px}
.import-page .imp-modal-title{font-size:19px;font-weight:500;font-family:var(--font-heading);color:var(--color-navy)}
.import-page .imp-modal-sub{font-size:13px;color:var(--color-service-grey);margin-top:3px}
.import-page .imp-modal-x{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--color-service-grey);flex-shrink:0;border:none;background:transparent;cursor:pointer}
.import-page .imp-modal-x:hover{background:var(--color-surface);color:var(--color-navy)}
.import-page .imp-modal-x:disabled{color:var(--color-text-secondary);cursor:default;background:transparent}
.import-page .imp-modal-x svg{width:18px;height:18px}
.import-page .imp-modal-steps{display:flex;align-items:center;padding:0 24px 18px}
.import-page .imp-wstep{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--color-service-grey)}
.import-page .imp-wstep.active,.import-page .imp-wstep.done{color:var(--color-navy)}
.import-page .imp-wstep-n{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--color-control-border);display:flex;align-items:center;justify-content:center;font-size:12px}
.import-page .imp-wstep.active .imp-wstep-n{border-color:var(--color-navy);background:var(--color-ice-blue);color:var(--color-navy)}
.import-page .imp-wstep.done .imp-wstep-n{border-color:var(--color-success);background:var(--color-success);color:var(--color-white)}
.import-page .imp-wstep-n svg{width:13px;height:13px}
.import-page .imp-wstep-line{flex:1;height:2px;background:var(--color-border-light);margin:0 12px}
.import-page .imp-wstep-line.done{background:var(--color-success)}
.import-page .imp-modal-body{padding:4px 24px 8px;overflow-y:auto}
.import-page .imp-modal-foot{display:flex;align-items:center;gap:12px;padding:16px 24px 20px;border-top:1px solid var(--color-border-light);margin-top:8px}
.import-page .imp-foot-sp{flex:1}
.import-page .imp-modal-foot .btn svg{width:16px;height:16px}

/* step 1 — drop zone + file list */
.import-page .imp-drop{position:relative;border:2px dashed var(--color-control-border);border-radius:12px;padding:34px 20px;text-align:center;cursor:pointer;transition:border-color .18s,background .18s;background:#FAFCFC}
.import-page .imp-drop:hover,.import-page .imp-drop.drag{border-color:var(--color-blue);background:#F1F7F7}
.import-page .imp-drop>svg{width:30px;height:30px;color:var(--color-blue);margin-bottom:8px}
.import-page .imp-drop-label{font-size:14px;color:var(--color-navy);font-weight:500}
.import-page .imp-drop-label .lnk{color:var(--color-text-link);text-decoration:underline}
.import-page .imp-drop-label .lnk:hover{color:var(--color-text-link-hover)}
.import-page .imp-drop-sub{font-size:12px;color:var(--color-service-grey);margin-top:4px}
/* app: invisible native file input across the whole zone — clicking anywhere opens the picker,
   and dropping files onto it uses the browser's built-in input drag-drop (no JS interop). */
.import-page .imp-drop-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.import-page .imp-files-head{display:flex;align-items:center;justify-content:space-between;margin:16px 0 8px;font-size:12.5px;font-weight:500;color:var(--color-navy)}
.import-page .imp-clear{font-size:12px;color:var(--color-service-grey);border:none;background:transparent;cursor:pointer;font-family:inherit}
.import-page .imp-clear:hover{color:var(--color-error)}
.import-page .imp-files{display:flex;flex-direction:column;gap:8px;padding-bottom:6px}
.import-page .imp-file{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--color-border-light);border-radius:10px}
.import-page .imp-file>svg{width:20px;height:20px;color:var(--color-blue);flex-shrink:0}
.import-page .imp-file-info{flex:1;min-width:0}
.import-page .imp-file-name{font-size:13.5px;color:var(--color-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.import-page .imp-file-meta{font-size:12px;color:var(--color-service-grey);margin-top:1px}
.import-page .imp-file-ref{font-family:ui-monospace,'JetBrains Mono',monospace;color:var(--color-text-secondary)}
.import-page .imp-file-ref.muted{color:var(--color-text-secondary)}
.import-page .imp-file-x{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--color-service-grey);flex-shrink:0;border:none;background:transparent;cursor:pointer}
.import-page .imp-file-x:hover{background:var(--color-error-tint);color:var(--color-error)}
.import-page .imp-file-x svg{width:15px;height:15px}

/* step 2 — review & run */
.import-page .imp-review-sum{display:flex;align-items:center;gap:16px;background:#F1F7F7;border-radius:12px;padding:16px 18px;margin:6px 0 16px}
.import-page .imp-review-n{width:44px;height:44px;border-radius:10px;background:var(--color-navy);color:var(--color-white);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:500;font-family:var(--font-heading);flex-shrink:0}
.import-page .imp-review-t{font-size:14.5px;font-weight:500;color:var(--color-navy)}
.import-page .imp-review-s{font-size:12.5px;color:var(--color-service-grey);margin-top:2px}
.import-page .imp-review-list{display:flex;flex-direction:column;gap:2px;margin-bottom:18px;max-height:150px;overflow-y:auto}
.import-page .imp-review-row{display:flex;align-items:center;gap:12px;padding:7px 4px;border-bottom:1px solid var(--color-border-light);font-size:13px}
.import-page .imp-review-row .mono{font-family:ui-monospace,'JetBrains Mono',monospace;font-size:12px;color:var(--color-text-secondary);width:96px;white-space:nowrap}
.import-page .imp-review-title{flex:1;color:var(--color-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.import-page .imp-review-size{color:var(--color-service-grey);font-size:12px;white-space:nowrap}
.import-page .imp-note{display:flex;flex-direction:column;gap:12px;background:var(--color-info-tint);border-radius:12px;padding:16px 18px;margin-bottom:6px}
.import-page .imp-note-row{display:flex;gap:11px;font-size:13px;color:var(--color-text-primary);line-height:1.5}
.import-page .imp-note-row svg{width:17px;height:17px;color:var(--color-blue);flex-shrink:0;margin-top:2px}
.import-page .imp-note-row b{font-weight:600;color:var(--color-navy)}
.import-page .imp-note-row a{color:var(--color-text-link);text-decoration:underline;cursor:pointer}
.import-page .imp-note-row a:hover{color:var(--color-text-link-hover)}

/* app: per-file upload states + modal-level error (503 intake, non-PDF skips) */
.import-page .imp-uploading{color:var(--color-info)}
.import-page .imp-wiz-error{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--color-error-tint);color:var(--color-error);font-size:13px;line-height:1.45}
.import-page .imp-wiz-error svg{width:15px;height:15px;flex-shrink:0;margin-top:1px}

/* app: done panel (jobs queued confirmation) */
.import-page .imp-done{text-align:center;padding:26px 12px 18px}
.import-page .imp-done-ic{width:56px;height:56px;border-radius:50%;background:var(--color-success);color:var(--color-white);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.import-page .imp-done-ic svg{width:26px;height:26px}
.import-page .imp-done h2{font-size:19px;font-weight:500;font-family:var(--font-heading);color:var(--color-navy);margin-bottom:8px}
.import-page .imp-done p{font-size:13.5px;color:var(--color-service-grey);line-height:1.55;max-width:420px;margin:0 auto}

/* ── animation keyframes (reconstructed; reference names them but omits bodies) ── */
@keyframes imppulse{0%{box-shadow:0 0 0 0 rgba(75,118,150,.45)}70%{box-shadow:0 0 0 7px rgba(75,118,150,0)}100%{box-shadow:0 0 0 0 rgba(75,118,150,0)}}
@keyframes impshim{100%{transform:translateX(100%)}}
@keyframes impblink{0%,100%{opacity:1}50%{opacity:.3}}