/* Qi Importer (v1) — styled to match Qi 6.2.
   Calibrated against the Qi 6.2 — Libraries Tasmania screenshot and
   the 2026-05 importer mockup:
     · dark top header with brand + step nav + email + power button
     · darker secondary bar with breadcrumb + Cancel/Continue
     · white card with REQUIRED pills, warning + tip alerts
     · in-card action footer (Go back · Cancel · Continue)
     · full-width page footer (db host · theme toggle · user guide · ©) */

:root {
    /* Backgrounds */
    --qi-bg:        #ffffff;
    --qi-canvas:    #f7f7f8;
    --qi-subheader: #efefef;
    --qi-subbar-bg: #2a2a2a;
    --qi-subbar-text: #d5d6da;
    --qi-card-foot: #f4f4f6;

    /* Header */
    --qi-header-bg:    #1a1a1a;
    --qi-header-text:  #ffffff;
    --qi-header-muted: #a8a8a8;
    --qi-header-hover: #2a2a2a;
    --qi-header-active: #2f2f2f;
    --qi-power-width:   56px;

    /* Brand red (Qi logo + create-new + power) */
    --qi-red:    #e44d28;
    --qi-red-dk: #c1331a;

    /* Text */
    --qi-text:        #1f2937;
    --qi-text-strong: #111827;
    --qi-muted:       #6b7280;

    /* Borders */
    --qi-border:       #d8dde3;
    --qi-border-soft:  #e8ebef;
    --qi-border-input: #c5cbd3;

    /* Status colours */
    --qi-good:     #16a34a;
    --qi-good-bg:  #dcf3e2;
    --qi-warn:     #b8730a;
    --qi-warn-bg:  #fbecd1;
    --qi-bad:      #b32424;
    --qi-bad-bg:   #fbe1e1;
    --qi-grey:     #67665f;

    /* Action buttons */
    --qi-save:        #f0a500;
    --qi-save-dk:     #cf8a00;
    --qi-approve:     #16a34a;
    --qi-approve-dk:  #128a3e;

    /* Tip box (lavender, used for "Tip:" hints) */
    --qi-tip-bg:      #efe7f8;
    --qi-tip-text:    #5b21b6;
    --qi-tip-border:  #d8c5f0;

    --qi-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --qi-radius: 4px;
    --badge-radius: 10px;
    --qi-fs:     14px;
}

/* ------- dark theme ------- */
[data-theme="dark"] {
    --qi-bg:           #1c1d20;
    --qi-canvas:       #131418;
    --qi-subheader:    #23252a;
    --qi-subbar-bg:    #0e0f12;
    --qi-subbar-text:  #cbcdd2;
    --qi-card-foot:    #1f2126;
    --qi-header-bg:    #0e0f12;
    --qi-header-hover: #1f2126;
    --qi-header-active: #2a2c33;
    --qi-text:         #e5e7eb;
    --qi-text-strong:  #f3f4f6;
    --qi-muted:        #9ca3af;
    --qi-border:       #2a2d34;
    --qi-border-soft:  #1f2126;
    --qi-border-input: #3b3f48;
    --qi-good-bg:      #133b22;
    --qi-warn-bg:      #3a2c0d;
    --qi-bad-bg:       #3b1414;
    --qi-tip-bg:       #2c1f47;
    --qi-tip-text:     #c4b3ee;
    --qi-tip-border:   #4a3380;
}
[data-theme="dark"] body { color-scheme: dark; }
[data-theme="dark"] code  { background: #25272d; color: var(--qi-text); }
[data-theme="dark"] .qi-table tr:hover td { background: #1f2126; }
[data-theme="dark"] .qi-table thead th    { background: #1a1b1f; }
[data-theme="dark"] .qi-metric            { background: #1f2126; }
[data-theme="dark"] .qi-grid-row[data-status="error"],
[data-theme="dark"] .qi-grid-row[data-status="review"] { background: rgba(179,36,36,0.12); }
[data-theme="dark"] .qi-form input,
[data-theme="dark"] .qi-form select,
[data-theme="dark"] .qi-form textarea,
[data-theme="dark"] .qi-drill-form input,
[data-theme="dark"] .qi-drill-form select,
[data-theme="dark"] .qi-drill-form textarea { background: #16171a; color: var(--qi-text-strong); }
[data-theme="dark"] .qi-target-pickers select:disabled { background: #0e0f12; }
[data-theme="dark"] .qi-file input[type="file"] { background: #16171a; border-color: var(--qi-border-input); }
[data-theme="dark"] .qi-target-summary { background: #1a1b1f; }
[data-theme="dark"] .qi-raw-json { background: #16171a; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font: var(--qi-fs)/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
    color: var(--qi-text);
    background: var(--qi-canvas);
    min-height: 100vh;
    display: flex; flex-direction: column;
}
a { color: var(--qi-red); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font: 0.92em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #eef2f6; padding: 1px 5px; border-radius: 3px; }

/* Sticky site chrome — top bar + breadcrumb/actions stay visible while scrolling. */
.qi-chrome { width: 100%; flex-shrink: 0; }

/* ------- top header (dark bar) ------- */
.qi-header {
    display: flex; align-items: stretch;
    background: var(--qi-header-bg);
    color: var(--qi-header-text);
    height: 52px;
    border-bottom: 1px solid #000;
    position: sticky;
    top: 0;
    z-index: 201;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .qi-header {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.qi-brand {
    display: flex; align-items: center; gap: 10px; padding: 0 18px;
    border-right: 1px solid #000;
    color: inherit; text-decoration: none;
    cursor: pointer;
}
.qi-brand:hover { background: rgba(255,255,255,0.05); text-decoration: none; }
.qi-logo {
    display: block;
    width: 14px;
    height: auto;
    flex-shrink: 0;
}
.qi-product { font-weight: 600; font-size: 15px; }
.qi-edition {
    font-size: 10px; padding: 2px 6px; border-radius: 3px;
    background: var(--qi-red); color: #fff; letter-spacing: 0.04em;
    text-transform: uppercase; font-weight: 700;
}

/* Stepper: number badge + label, active = darker bg + orange badge */
.qi-stepper {
    display: flex; align-items: stretch; flex: 1;
    justify-content: center;
}
.qi-step {
    display: flex; align-items: center; gap: 8px; padding: 0 22px;
    color: var(--qi-header-muted); font-weight: 500; font-size: 13px;
    border-right: 1px solid rgba(255,255,255,0.06);
    transition: background 80ms;
}
.qi-step:first-child { border-left: 1px solid rgba(255,255,255,0.06); }
.qi-step:hover { background: var(--qi-header-hover); color: #fff; text-decoration: none; }
.qi-step.is-active { background: var(--qi-header-active); color: #fff; }
.qi-step.is-locked {
    cursor: not-allowed;
    opacity: 0.45;
    pointer-events: none;
}
.qi-step.is-locked:hover { background: transparent; color: inherit; }
.qi-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px;
    background: rgba(255,255,255,0.10); font-size: 11px; font-weight: 700;
    color: var(--qi-header-muted);
}
.qi-step.is-active .qi-step-num { background: var(--qi-red); color: #fff; }

/* Utility / Admin — Qi-style icon nav with vertical dividers */
.qi-header-nav {
    display: flex; align-items: stretch;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.qi-header-nav-item {
    display: flex; align-items: center;
    padding: 0 20px;
    color: var(--qi-header-muted); font-weight: 500; font-size: 13px;
    text-decoration: none;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 80ms, color 80ms;
    white-space: nowrap;
}
.qi-header-nav-item:hover {
    background: var(--qi-header-hover); color: #fff; text-decoration: none;
}
.qi-header-nav-item.is-active {
    background: var(--qi-header-active); color: #fff;
}

/* User cluster (right) */
.qi-user {
    display: flex; align-items: center; gap: 14px; padding: 0 0 0 16px;
}
.qi-user a { color: var(--qi-header-muted); font-size: 13px; }
.qi-user a:hover { color: #fff; text-decoration: none; }
.qi-user a.is-active { color: #fff; }
.qi-username { color: var(--qi-header-text); font-weight: 500; font-size: 13px; }
.qi-logout { display: inline-flex; align-items: stretch; height: 100%; margin: 0; }
.qi-power {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--qi-power-width); height: 100%; border: 0; background: var(--qi-red);
    color: #fff; cursor: pointer; padding: 0;
}
.qi-power:hover { background: var(--qi-red-dk); }
.qi-power svg { width: 18px; height: 18px; }

/* ------- secondary nav (sub-bar with breadcrumb + page actions) ------- */
.qi-subbar {
    display: flex; align-items: center;
    background: var(--qi-subbar-bg);
    color: var(--qi-subbar-text);
    border-bottom: 1px solid #000;
    /* Left pad matches the brand block; right pad reserves the power
       column so Save/Continue lines up with the header user cluster. */
    padding: 7px var(--qi-power-width) 7px 18px;
    min-height: 40px;
    box-sizing: border-box;
    gap: 18px;
    position: sticky;
    top: 52px;
    z-index: 200;
}
.qi-breadcrumb {
    display: flex; align-items: center; gap: 8px;
    flex: 1; min-width: 0;
    color: var(--qi-subbar-text); font-size: 13px;
}
.qi-breadcrumb a { color: var(--qi-subbar-text); }
.qi-breadcrumb a:hover { color: #fff; text-decoration: none; }
.qi-breadcrumb .qi-bc-sep { color: rgba(255,255,255,0.25); }
.qi-breadcrumb .qi-bc-current { color: #fff; font-weight: 500; }
.qi-breadcrumb .qi-bc-muted { color: var(--qi-subbar-text); font-weight: normal; }
.qi-bc-home {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 3px;
    color: var(--qi-subbar-text);
}
.qi-bc-home:hover { background: rgba(255,255,255,0.08); color: #fff; }
.qi-bc-home svg { width: 14px; height: 14px; }
.qi-subbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.qi-subbar-actions .qi-link-cancel {
    color: #fff; font-size: 13px; line-height: 1.25; padding: 5px 4px;
}
.qi-subbar-actions .qi-link-cancel:hover { color: #fff; text-decoration: underline; }
.qi-subbar-actions .qi-btn {
    padding: 5px 14px; font-size: 13px; line-height: 1.25;
    border-radius: 3px;
}

/* ------- main canvas ------- */
.qi-main {
    padding: 24px clamp(16px, 2.5vw, 40px);
    width: 100%;
    max-width: none;
    margin: 0;
    flex: 1;
    box-sizing: border-box;
}
.qi-card {
    background: var(--qi-bg);
    border: 1px solid var(--qi-border);
    border-radius: var(--qi-radius);
    box-shadow: var(--qi-shadow);
    padding: 28px 32px;
    margin-bottom: 20px;
}
.qi-card-narrow { max-width: 460px; margin: 56px auto; padding: 32px; }

/* Stacked card layout: body + a flush footer with its own light-gray
   background. Used by every step view so the Go back / Cancel /
   Continue bar lives on the card, not floating in the canvas. */
.qi-card-stack { padding: 0; overflow: hidden; }
.qi-card-stack > .qi-card-body { padding: 28px 32px; }
.qi-card-stack > .qi-card-footer-bar {
    background: var(--qi-card-foot);
    border-top: 1px solid var(--qi-border);
    padding: 14px 32px;
    display: flex; align-items: center; gap: 14px;
}
.qi-card-stack > .qi-card-footer-bar .qi-spacer { flex: 1; }
.qi-card-stack > .qi-card-footer-bar .qi-link-cancel { color: var(--qi-red); }

.qi-card h1 {
    margin: 0 0 6px; font-size: 22px; font-weight: 700;
    color: var(--qi-text-strong);
}
.qi-card h2 {
    margin: 28px 0 12px; font-size: 14px; font-weight: 600;
    color: var(--qi-text-strong); text-transform: uppercase; letter-spacing: 0.04em;
    border-bottom: 1px solid var(--qi-border-soft); padding-bottom: 8px;
}
.qi-card h3 {
    margin: 20px 0 8px; font-size: 13px; font-weight: 600;
    color: var(--qi-text-strong);
}
.qi-card-stack > .qi-card-body > h1:first-child,
.qi-card > h1:first-child { margin-top: 0; }
.qi-card-actions { display: flex; gap: 10px; margin-top: 20px; align-items: center; }
.qi-admin-save-bar {
    display: flex; justify-content: flex-end; align-items: center; gap: 10px;
}
.qi-admin-save-bar-bottom {
    margin-top: 28px; padding-top: 20px;
    border-top: 1px solid var(--qi-border-soft);
}
.qi-muted { color: var(--qi-muted); font-weight: normal; }

/* ------- forms (Qi-style: bold label above, input below) ------- */
.qi-form { display: grid; gap: 16px; }
.qi-form label {
    display: grid; gap: 6px; font-weight: 600;
    color: var(--qi-text-strong); font-size: 13px;
}
.qi-form label > span:first-child { display: flex; align-items: center; gap: 8px; }
.qi-form input[type="text"], .qi-form input[type="password"], .qi-form select,
.qi-form input[type="file"], .qi-form input[type="number"],
.qi-form textarea {
    border: 1px solid var(--qi-border-input);
    border-radius: var(--qi-radius);
    padding: 8px 10px;
    font: inherit; font-weight: normal;
    background: var(--qi-bg);
    color: var(--qi-text-strong);
    width: 100%;
}
.qi-form input:focus, .qi-form select:focus, .qi-form textarea:focus {
    outline: none; border-color: var(--qi-red);
    box-shadow: 0 0 0 2px rgba(226,63,35,0.15);
}
.qi-form textarea { min-height: 80px; resize: vertical; }

/* Required / error visual state on an individual input. */
.qi-form .qi-input-required,
.qi-form .qi-input-error {
    border-color: var(--qi-red);
    box-shadow: 0 0 0 1px rgba(226,63,35,0.20);
}

.qi-radio-group {
    border: 0; padding: 0; margin: 0;
    display: flex; gap: 18px; align-items: center;
}
.qi-radio-group legend { padding: 0; margin-right: 8px; font-weight: 600; }
.qi-radio-group label {
    flex-direction: row; align-items: center; gap: 6px;
    font-weight: 500;
}

.qi-grid-2 {
    display: grid; gap: 16px 24px;
    grid-template-columns: 1fr 1fr;
}

.qi-target-pickers select:disabled { background: #f4f5f7; color: var(--qi-muted); cursor: not-allowed; }
.qi-target-pickers .qi-target-node-off { opacity: 0.55; }

.qi-target-group {
    border: none;
    margin: 0 0 16px;
    padding: 0;
    min-width: 0;
}
.qi-target-group-legend {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 0;
    font: inherit;
}
.qi-target-group-legend .qi-label-with-help {
    font-weight: 600;
    color: var(--qi-text-strong);
}
.qi-required-one-of {
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 11px;
}

/* "Required" pill — sits at the right edge of the field label. */
.qi-required {
    background: var(--qi-red); color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    padding: 2px 8px; border-radius: 999px;
    text-transform: uppercase;
    margin-left: auto;
}

/* ------- buttons ------- */
.qi-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: var(--qi-radius);
    border: 1px solid var(--qi-border-input); background: #fff;
    color: var(--qi-text-strong); font: inherit; font-weight: 500;
    cursor: pointer; text-decoration: none;
}
.qi-btn:hover { background: #f4f4f4; text-decoration: none; }

/* Primary action = green (Continue, Save, Commit) */
.qi-btn-primary,
.qi-btn-save,
.qi-btn-approve {
    background: var(--qi-approve); color: #fff; border-color: var(--qi-approve-dk);
    font-weight: 600;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}
.qi-btn-primary:hover:not(:disabled):not(.qi-save-busy):not(.qi-save-ok),
.qi-btn-save:hover:not(:disabled):not(.qi-save-busy):not(.qi-save-ok),
.qi-btn-approve:hover:not(:disabled):not(.qi-save-busy):not(.qi-save-ok) {
    background: var(--qi-approve-dk); color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}
.qi-btn-primary:active:not(:disabled),
.qi-btn-save:active:not(:disabled),
.qi-btn-approve:active:not(:disabled) { transform: translateY(0); }
.qi-btn-primary:disabled,
.qi-btn-save:disabled,
.qi-btn-approve:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.qi-btn-primary.qi-save-busy,
.qi-btn-save.qi-save-busy,
.qi-btn-approve.qi-save-busy {
    opacity: 0.92;
    cursor: wait;
    background: var(--qi-approve-dk);
    transform: none;
    pointer-events: none;
}
.qi-save-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: qi-save-spin 0.65s linear infinite;
    flex-shrink: 0;
}
.qi-save-busy > svg { display: none; }
@keyframes qi-save-spin {
    to { transform: rotate(360deg); }
}
.qi-btn-primary.qi-save-ok,
.qi-btn-save.qi-save-ok,
.qi-btn-approve.qi-save-ok {
    background: #45b876;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(69, 184, 118, 0.55);
    transform: none;
}
.qi-subbar-actions .qi-btn-primary.qi-save-ok,
.qi-subbar-actions .qi-btn-approve.qi-save-ok {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45), 0 0 0 4px rgba(69, 184, 118, 0.55);
}

.qi-commit-progress {
    margin: 20px 0 8px;
    padding: 16px 18px;
    border: 1px solid var(--qi-border);
    border-radius: var(--qi-radius);
    background: #f8f8f8;
}
.qi-commit-progress-track {
    height: 8px;
    border-radius: 999px;
    background: #e2e2e2;
    overflow: hidden;
}
.qi-commit-progress-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--qi-approve);
    transition: width 0.25s ease;
}
.qi-commit-progress-text {
    margin: 12px 0 4px;
    font-weight: 600;
    color: var(--qi-text-strong);
}
.qi-commit-progress-counts { margin: 0; font-size: 13px; }

/* Amber save (legacy — kept for compatibility) */
.qi-btn-amber {
    background: var(--qi-save); color: #1a1a1a; border-color: var(--qi-save-dk);
    font-weight: 600;
}
.qi-btn-amber:hover { background: var(--qi-save-dk); color: #fff; }

/* Brand red action (Go back, Create new, destructive ops) */
.qi-btn-red {
    background: var(--qi-red); color: #fff; border-color: var(--qi-red-dk);
    font-weight: 600;
}
.qi-btn-red:hover { background: var(--qi-red-dk); color: #fff; }

.qi-btn-ghost {
    background: transparent; border-color: transparent;
    color: var(--qi-muted);
}
.qi-btn-ghost:hover { background: var(--qi-border-soft); color: var(--qi-text-strong); }

.qi-btn-small { padding: 4px 10px; font-size: 12px; }
.qi-disabled { pointer-events: none; opacity: 0.5; }

/* Cancel link (used in sub-bar and card footer) */
.qi-link-cancel {
    color: var(--qi-red); text-decoration: underline;
    text-underline-offset: 2px; font-weight: 500;
}
.qi-link-cancel:hover { color: var(--qi-red-dk); }

/* ------- flash + hint ------- */
.qi-flash {
    padding: 10px 14px; border-radius: var(--qi-radius);
    margin-bottom: 16px; font-weight: 500;
}
.qi-flash-error {
    background: var(--qi-bad-bg); color: var(--qi-bad);
    border: 1px solid #f3b6b6;
}
.qi-hint { color: var(--qi-muted); font-size: 12px; font-weight: normal; }

/* ------- alerts (warning + tip boxes inside cards) ------- */
.qi-alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px; border-radius: var(--qi-radius);
    font-size: 13px; line-height: 1.5;
    margin: 0 0 16px;
}
.qi-alert svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }
.qi-alert-warn {
    background: var(--qi-warn-bg); color: var(--qi-warn);
    border: 1px solid #f1d49a;
}
.qi-alert-tip {
    background: var(--qi-tip-bg); color: var(--qi-tip-text);
    border: 1px solid var(--qi-tip-border);
}
.qi-alert-info {
    background: #e6f0fa; color: #1e57aa;
    border: 1px solid #c3d8ee;
}
.qi-alert-body { flex: 1; min-width: 0; }
.qi-error-rows-lead { margin: 0; }
.qi-error-rows-detail { margin: 8px 0 0; }
.qi-error-rows-expand {
    margin: 6px 0 0;
}
.qi-error-rows-expand summary {
    cursor: pointer;
    color: var(--qi-primary);
    font-weight: 600;
    list-style: none;
}
.qi-error-rows-expand summary::-webkit-details-marker { display: none; }
.qi-error-rows-expand summary::before {
    content: '▸ ';
    display: inline-block;
    transition: transform 0.15s ease;
}
.qi-error-rows-expand[open] summary::before {
    transform: rotate(90deg);
}
.qi-error-rows-full {
    margin: 8px 0 0;
    max-height: 10em;
    overflow: auto;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid #f1d49a;
    border-radius: var(--qi-radius);
    font-size: 12px;
    line-height: 1.45;
    word-break: break-word;
}

/* ------- small reusables introduced with admin/users + templates ------- */
.qi-inline-form {
    display: inline-flex; align-items: center; gap: 8px; margin: 0;
}
.qi-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.qi-toggle input[type="checkbox"] { width: 16px; height: 16px; }
.qi-user-add-form { margin: 0 0 14px; }
.qi-user-add-form .qi-cluster-input { width: 280px; }

.qi-template-save {
    margin-top: 28px; padding-top: 24px;
    border-top: 1px solid var(--qi-border-soft);
}
.qi-template-save .qi-inline-form { margin-top: 8px; flex-wrap: wrap; }
.qi-template-list { margin-top: 24px; }
.qi-utility-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.qi-rename-form { flex-wrap: nowrap; }
.qi-rename-input {
    min-width: 160px;
    max-width: 220px;
}

.qi-template-pick select { min-width: 320px; }
.qi-template-pick .qi-hint { display: block; margin-top: 6px; }
.qi-template-empty { opacity: 0.65; cursor: not-allowed; }

/* ------- Step-2 searchable combobox (progressive enhancement
   over the server-rendered <select>) ------- */
/* Wraps the mapping <select> (enhanced as a combobox) plus the clear
   'x'. The combo flexes to fill; the 'x' sits to its right and resets
   the column back to "Skip this column". */
.qi-mapping-select-wrap { display: flex; align-items: center; gap: 6px; }
.qi-mapping-select-wrap .qi-combo { flex: 1 1 auto; min-width: 0; }
.qi-mapping-clear {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0;
    background: var(--qi-bg); color: var(--qi-muted);
    border: 1px solid var(--qi-border-input); border-radius: 6px;
    font-size: 18px; line-height: 1; cursor: pointer;
}
.qi-mapping-clear:hover { color: var(--qi-text); border-color: var(--qi-border); }
.qi-mapping-clear[hidden] { display: none; }

.qi-combo {
    position: relative; display: block; width: 100%;
}
.qi-combo-native {
    /* Keep the underlying <select> in the DOM (so the form still
       submits) but hide it visually. visibility:hidden + zero height
       keeps it focusable as a fallback if JS is off. */
    position: absolute; left: -10000px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}
.qi-combo-button {
    display: flex; align-items: center; gap: 8px;
    width: 100%; min-height: 32px; padding: 6px 10px;
    background: var(--qi-bg); color: var(--qi-text);
    border: 1px solid var(--qi-border-input); border-radius: 6px;
    text-align: left; cursor: pointer; font: inherit;
}
.qi-combo-button:hover { border-color: var(--qi-border); }
.qi-combo-value { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qi-combo-chevron { color: var(--qi-muted); font-size: 12px; flex: 0 0 auto; }
.qi-combo-popup {
    /* Initial styles only — actual position + max-height is computed
       in JS (positionPopup) so the popup can flip up when near the
       bottom of the viewport and shrink to fit whatever space is
       left. Position is set to `fixed` by JS on open. */
    position: fixed; z-index: 1000;
    width: 360px; max-width: 520px;
    background: var(--qi-bg); color: var(--qi-text);
    border: 1px solid var(--qi-border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.16);
    display: flex; flex-direction: column; overflow: hidden;
}
/* Setting any `display` value on an element overrides the browser's
   default `[hidden] { display: none }` rule, so we re-assert it.
   Without this every combobox popup renders open by default. */
.qi-combo-popup[hidden] { display: none; }
.qi-combo-search {
    margin: 8px; padding: 6px 10px;
    border: 1px solid var(--qi-border-input); border-radius: 6px;
    background: var(--qi-bg); color: var(--qi-text); font: inherit;
}
.qi-combo-search:focus { outline: 2px solid var(--qi-accent, #5d8cf0); outline-offset: 1px; }
.qi-combo-list {
    list-style: none; margin: 0 0 8px; padding: 0;
    max-height: 320px; overflow-y: auto;
}
.qi-combo-group {
    padding: 4px 12px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--qi-muted); background: var(--qi-canvas);
}
.qi-combo-item {
    padding: 6px 12px; cursor: pointer; font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qi-combo-item.qi-combo-active { background: var(--qi-canvas); }
.qi-combo-item.qi-combo-current { font-weight: 600; }
.qi-combo-empty { padding: 8px 12px; font-style: italic; }

/* ------- Step-3 drill-in source picker ------- */
.qi-source-picker { display: flex; flex-direction: column; gap: 6px; }
.qi-lookup-wrap {
    display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap;
    max-width: 100%;
}
.qi-lookup {
    display: flex; align-items: stretch; flex: 1 1 260px; min-width: 220px;
    border: 1px solid var(--qi-border-input); border-radius: 4px;
    background: var(--qi-bg); overflow: hidden;
}
.qi-lookup-prefix {
    display: flex; align-items: center; padding: 0 9px;
    color: var(--qi-muted); font-size: 15px; font-weight: 600;
    user-select: none; border-right: 1px solid var(--qi-border-soft);
    background: #f4f6f9;
}
.qi-lookup-input {
    flex: 1; min-width: 0; margin: 0 !important;
    border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; background: transparent !important;
    padding: 8px 10px !important;
}
.qi-lookup-input:focus { outline: none; }
.qi-lookup:focus-within { outline: 2px solid var(--qi-primary); outline-offset: -1px; }
.qi-lookup-value {
    flex: 1; min-width: 0; padding: 8px 10px; font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qi-lookup-toggle {
    display: flex; align-items: center; justify-content: center;
    border: 0; border-left: 1px solid var(--qi-border-soft);
    background: #f4f6f9; padding: 0 11px; cursor: pointer;
    color: var(--qi-muted); font-size: 11px; line-height: 1;
}
.qi-lookup-toggle:hover { background: #e8ebf0; color: var(--qi-text-strong); }
.qi-lookup-open {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; min-width: 36px; align-self: stretch;
    border: 1px solid var(--qi-border-input); border-radius: 4px;
    background: #f4f6f9; color: var(--qi-text-strong);
    text-decoration: none; font-size: 16px; line-height: 1;
}
.qi-lookup-open:hover { background: #e8ebf0; text-decoration: none; }
.qi-lookup-open-disabled { opacity: 0.35; pointer-events: none; cursor: default; }
.qi-lookup-resolved .qi-rel-clear-btn { align-self: stretch; }
.qi-picker-row    { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qi-picker-row select.qi-picker-select,
.qi-picker-row input.qi-picker-typeahead { flex: 1 1 240px; min-width: 220px; }
.qi-picker-unmatched {
    font-size: 12px; color: var(--qi-bad);
    background: var(--qi-bad-bg); border: 1px solid #e8b4b4;
    border-radius: 6px; padding: 4px 8px; display: inline-block; width: fit-content;
}
.qi-picker-suggestions {
    list-style: none; margin: 0; padding: 4px 0;
    background: var(--qi-bg); border: 1px solid var(--qi-border);
    border-radius: 6px; max-height: 240px; overflow: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.qi-picker-suggestions li {
    padding: 6px 10px; cursor: pointer;
}
.qi-picker-suggestions li:hover { background: var(--qi-canvas); }
.qi-picker-suggestions li[data-empty] { cursor: default; }
.qi-picker-create {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding: 6px 8px; background: var(--qi-canvas);
    border: 1px dashed var(--qi-border); border-radius: 6px;
}
.qi-picker-create[hidden] { display: none; }
.qi-picker-create-status { font-size: 12px; color: var(--qi-muted); }

/* ------- tables (Qi-style record list) ------- */
.qi-table {
    width: 100%; border-collapse: collapse; margin-top: 8px;
    background: var(--qi-bg);
}
.qi-table th, .qi-table td {
    padding: 10px 12px; border-bottom: 1px solid var(--qi-border-soft);
    text-align: left; vertical-align: top;
}
.qi-table thead th {
    background: #fafafb; font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--qi-muted);
    border-bottom: 1px solid var(--qi-border);
}
.qi-table tr:hover td { background: #fafbfc; }
.qi-table th.qi-col-checkbox,
.qi-table td.qi-col-checkbox {
    text-align: center;
    vertical-align: middle;
    min-width: 7.5rem;
    line-height: 1.35;
}
.qi-table thead th.qi-col-select-head {
    padding-top: 0;
    vertical-align: top;
    border-top: 0;
    font-weight: 400;
}
.qi-table thead tr:first-child th.qi-col-checkbox {
    padding-bottom: 4px;
    vertical-align: bottom;
    border-bottom: 0;
}
.qi-col-select-head input[type="checkbox"] { margin: 0; }
.qi-table td.qi-col-checkbox input[type="checkbox"] { margin: 0; }
/* Column header label + inline help icon */
.qi-col-head-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.qi-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ------- pills ------- */
.qi-pill {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
}
/* When the pill itself is a <button> — used by the Step-2 approve
   toggle. Strip the default button chrome but keep the pill shape. */
button.qi-pill {
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: inherit;
}
button.qi-pill:hover {
    filter: brightness(0.96);
}
button.qi-pill:focus-visible {
    outline: 2px solid var(--qi-primary);
    outline-offset: 2px;
}
.qi-pill-good, .qi-pill-ready { background: var(--qi-good-bg); color: var(--qi-good); }
.qi-pill-fuzzy, .qi-pill-warn, .qi-pill-review { background: var(--qi-warn-bg); color: var(--qi-warn); }
.qi-pill-bad, .qi-pill-error { background: var(--qi-bad-bg); color: var(--qi-bad); }
.qi-pill-skipped { background: #e5e7eb; color: #4b5563; }
.qi-readonly-block { max-width: 100%; }
.qi-readonly-override-btn {
    margin-top: 0.5rem;
    background: #fff;
    border-color: var(--qi-primary);
    color: var(--qi-primary);
    font-weight: 600;
}
.qi-readonly-override-btn:hover {
    background: rgba(46, 117, 182, 0.08);
    border-color: var(--qi-primary);
    color: var(--qi-primary);
}
.qi-readonly-hint {
    margin-top: 6px;
    margin-bottom: 0.5rem;
    max-width: none;
    line-height: 1.45;
}
.qi-pill-readonly { background: #e8ecf1; color: #4a5568; }
.qi-pill-embedded { background: rgba(100, 116, 139, 0.14); color: #475569; }
.qi-row-readonly td { background: rgba(100, 116, 139, 0.06); }
.qi-row-skipped td,
.qi-row-skipped th { background: rgba(100, 116, 139, 0.04); }
.qi-pill-indexed {
    background: var(--qi-good); color: #fff;
    padding: 4px 10px; font-size: 11px; font-weight: 600;
}

/* ------- mapping rows — status shown via pills, not row borders ------- */
.qi-row-id td { background: rgba(46,117,182,0.04); }
.qi-id-note { display: block; padding: 8px 12px; color: var(--qi-text-strong); font-size: 13px; line-height: 1.45; border-radius: 4px; background: rgba(46,117,182,0.08); }
.qi-id-note strong { color: var(--qi-primary); }
.qi-id-note em { font-style: italic; }
.qi-pill-id { background: rgba(46,117,182,0.12); color: var(--qi-primary); }

.qi-row-ctx td { background: #fbfbfc; }
.qi-row-ctx .qi-ctx-cell { padding-left: 24px; color: var(--qi-muted); }
.qi-row-ctx .qi-ctx-meta { font-size: 13px; }
.qi-pill-field { background: rgba(46,117,182,0.08); color: var(--qi-primary); }

/* Step 2 mapping table — fixed columns so behaviour select is not clipped */
.qi-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 8px;
}
.qi-mapping-table {
    table-layout: fixed;
    min-width: 960px;
}
.qi-match-against {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* hidden attribute would normally collapse the block, but display:flex
   above out-specifies it. Force hidden to win when the current field
   has no content-type target. */
.qi-match-against[hidden] { display: none; }
.qi-match-against-label {
    font-size: 12px;
    color: var(--qi-text-strong);
    font-weight: 500;
}
.qi-match-against-label .qi-muted {
    font-weight: 400;
    margin-left: 6px;
}
.qi-scalar-match-select {
    font-size: 13px;
    padding: 5px 8px;
}
.qi-mapping-table .qi-col-map-source  { width: 26%; min-width: 240px; }
.qi-mapping-table .qi-col-map-type    { width: 7rem; }
.qi-mapping-table .qi-col-map-target  { width: auto; }
.qi-mapping-table .qi-col-map-behaviour { width: 11.5rem; }
.qi-mapping-table .qi-col-map-status  { width: 9.5rem; }
/* Two columns mapped to the same Qi field — only one can be used, so
   flag both rows and block Continue (see duplicateFieldMappings in
   mapping.js). */
.qi-mapping-table tr.qi-mapping-dup > * {
    background: var(--qi-danger-bg, #fdecec);
    box-shadow: inset 2px 0 0 var(--qi-danger, #c0392b);
}
.qi-mapping-table th[scope="row"] {
    min-width: 240px;
    /* Long CSV header names used to be nowrap and overflowed the
       fixed-width source column, overlapping the Type pill next to
       it. Wrap instead. */
    white-space: normal;
    overflow-wrap: anywhere;
}
.qi-mapping-table th[scope="row"] code {
    white-space: normal;
    overflow-wrap: anywhere;
}
.qi-mapping-table .qi-ctx-cell {
    min-width: 240px;
}
.qi-mapping-table td.qi-mapping-behaviour-cell,
.qi-mapping-table td:last-child,
.qi-mapping-table td:nth-child(2) {
    vertical-align: middle;
}
.qi-mapping-table .qi-rel-behaviour-select {
    display: block;
    width: 100%;
    min-width: 10.5rem;
    max-width: none;
    box-sizing: border-box;
    font-size: 13px;
}
.qi-mapping-behaviour-empty { display: block; text-align: center; }
.qi-mapping-table .qi-combo { max-width: 100%; }
.qi-mapping-table .qi-combo-button { max-width: 100%; }

/* ------- Step 2: confirm auto-suggested matches ------- */
/* Status cell stacks the "Potential match" pill above its Confirm
   button; once confirmed (or mapped by hand) JS swaps in a single
   "Confirmed" pill and the wrapper is gone. */
.qi-status-confirm {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.qi-confirm-btn {
    padding: 3px 12px;
    background: var(--qi-primary);
    border-color: var(--qi-primary);
    color: #fff;
    font-weight: 600;
}
.qi-confirm-btn:hover {
    background: var(--qi-primary-strong, #245a8d);
    border-color: var(--qi-primary-strong, #245a8d);
    color: #fff;
}
/* Toolbar above the table: "N potential matches to review" + Confirm all */
.qi-confirm-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 4px 0 0;
}
.qi-confirm-toolbar[hidden] { display: none; }
.qi-confirm-toolbar-count {
    font-size: 13px;
    color: var(--qi-warn);
    font-weight: 600;
}
.qi-confirm-all-btn {
    background: #fff;
    border-color: var(--qi-primary);
    color: var(--qi-primary);
    font-weight: 600;
}
.qi-confirm-all-btn:hover {
    background: rgba(46, 117, 182, 0.08);
    border-color: var(--qi-primary);
    color: var(--qi-primary);
}

/* "Importing into …" summary on Step 2 */
.qi-target-summary {
    background: #f4f6fa; border: 1px solid var(--qi-border-soft);
    border-radius: var(--qi-radius); padding: 10px 14px;
    margin: 6px 0 14px; font-size: 13px;
}

/* ------- validation grid metrics ------- */
.qi-metrics { display: flex; gap: 12px; margin: 16px 0 20px; }
.qi-metric {
    background: var(--qi-bg); border: 1px solid var(--qi-border);
    border-radius: var(--qi-radius); padding: 12px 18px; min-width: 90px;
}
.qi-metric strong { font-size: 24px; display: block; font-weight: 700; }
.qi-metric span {
    font-size: 11px; color: var(--qi-muted); text-transform: uppercase;
    letter-spacing: 0.06em; font-weight: 600;
}
.qi-metric-good strong { color: var(--qi-good); }
.qi-metric-warn strong { color: var(--qi-warn); }
.qi-metric-bad  strong { color: var(--qi-bad); }
.qi-metric-muted strong { color: #6b7280; }
/* While Step 3 is still running its initial batched validation,
   the "ready" and "skipped" tiles will always read 0 — they only
   become meaningful after every row has been checked. Hide them
   until the grid appears so the user isn't staring at three
   permanently zero counters. "Errors" stays visible so any
   prefetch failures from Qi show up early. */
.qi-metrics-loading .qi-metric-good,
.qi-metrics-loading .qi-metric-muted {
    display: none;
}

.qi-toolbar {
    display: flex; gap: 18px; padding: 8px 0; align-items: center;
}
.qi-toolbar label { font-weight: normal; font-size: 13px; }

.qi-grid-row[data-status="error"]   { background: rgba(179,36,36,0.04); }
.qi-grid-row[data-status="error"],
.qi-grid-row[data-status="review"]  { background: rgba(179,36,36,0.04); }
.qi-grid-row[data-status="skipped"] {
    background: #eef0f3;
    color: var(--qi-muted);
}
.qi-grid-row[data-status="skipped"] .qi-pill-skipped {
    background: #9ca3af;
    color: #fff;
    font-weight: 600;
}
[data-theme="dark"] .qi-grid-row[data-status="skipped"] { background: rgba(255,255,255,0.04); }
.qi-cell-bad { background: var(--qi-bad-bg); }
.qi-issues { font-size: 12px; max-width: 360px; }
.qi-issue { padding: 3px 6px; border-radius: 3px; margin: 2px 0; }
.qi-issue-bad,
.qi-issue-warn { background: var(--qi-bad-bg); color: var(--qi-bad); }

/* ------- summary banner (Step 4) ------- */
.qi-summary-banner {
    display: flex; gap: 32px; padding: 16px 0; margin-bottom: 8px;
    border-bottom: 1px solid var(--qi-border-soft);
}
.qi-summary-banner > div {
    font-size: 11px; color: var(--qi-muted);
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.qi-summary-banner strong {
    display: block; font-size: 28px; color: var(--qi-text-strong);
    font-weight: 700;
}
.qi-summary-banner .qi-bad strong { color: var(--qi-bad); }

.qi-meta {
    display: grid; grid-template-columns: max-content 1fr;
    gap: 8px 18px; padding: 12px 0;
}
.qi-meta dt { color: var(--qi-muted); font-weight: 500; }
.qi-meta dd { margin: 0; }

/* ------- result tally (Step 5) ------- */
.qi-tally { display: flex; gap: 10px; margin: 16px 0; }
.qi-tally-chip {
    padding: 8px 14px; border-radius: 999px;
    font-weight: 600; font-size: 13px;
}
.qi-tally-good { background: var(--qi-good-bg); color: var(--qi-good); }
.qi-tally-warn { background: var(--qi-warn-bg); color: var(--qi-warn); }
.qi-tally-bad  { background: var(--qi-bad-bg);  color: var(--qi-bad); }
.qi-record-link { font-weight: 500; color: var(--qi-primary); text-decoration: none; }
.qi-record-link:hover { text-decoration: underline; }

/* ------- drill-in (Step 3 row detail) ------- */
.qi-drilldown::backdrop { background: var(--qi-canvas); }
.qi-drilldown[open] {
    border: 0; padding: 0; margin: 0;
    width: 100vw; height: 100vh;
    max-width: 100vw; max-height: 100vh;
    background: var(--qi-canvas);
}
.qi-drilldown article {
    display: flex; flex-direction: column;
    width: 100%; height: 100%;
    max-width: none; margin: 0;
    background: var(--qi-bg);
    overflow: hidden;
}
.qi-drilldown > article > section[data-bind="row-body"] {
    flex: 1; overflow-y: auto;
}

.qi-drill-toolbar {
    display: flex; align-items: center; gap: 8px; padding: 8px 18px;
    border-bottom: 1px solid var(--qi-border-soft); background: #fafbfc;
}
.qi-drill-toolbar .qi-spacer { flex: 1; }

/* Drill-in form — tightened layout so reviewing 20-30 fields per
   row doesn't require endless scrolling. Each field renders as a
   tidy card with a clear three-row rhythm:
     1. Label + metadata + status pill (single compact line)
     2. WAS → NOW diff (only when something actually changed)
     3. Editable input
   Status colour lives in a thin left border + matching pale fill,
   not in heavy padding.                                            */
/* ---------------------------------------------------------------
   Drill-in form, redesigned 2026-06-04.
   Each field is a label-left/input-right grid row, not a card.
   Validation rules show as small pills under the label.
   --------------------------------------------------------------- */
.qi-drill-form { padding: 8px 32px 16px; display: block; }
.qi-drill-field {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 12px 20px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid var(--qi-border-soft);
    background: transparent;
    border-radius: 0;
    border-left: 0;
}
.qi-drill-field:last-child { border-bottom: 0; }
/* Validation issues — soft red wash + left accent, no layout shift. */
.qi-drill-field.qi-cell-warn,
.qi-drill-field.qi-cell-bad {
    background: var(--qi-bad-bg);
    box-shadow: inset 3px 0 0 var(--qi-bad);
}
.qi-drill-label-col {
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.qi-drill-name {
    display: inline-flex; align-items: baseline; gap: 6px;
    font-weight: 600; font-size: 14px; color: var(--qi-text-strong);
    line-height: 1.3;
    white-space: nowrap;
}
.qi-drill-name small {
    font-weight: normal;
    font-size: 11px;
    color: var(--qi-muted);
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity 0.15s;
}
.qi-drill-field:hover .qi-drill-name small { opacity: 1; }
.qi-drill-input-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Validation rule pills — required, unique, max length, target type. */
.qi-rules { display: flex; flex-wrap: wrap; gap: 4px; }
.qi-rule {
    display: inline-flex; align-items: center;
    font-size: 10.5px; font-weight: 500;
    padding: 2px 7px;
    border-radius: 99px;
    line-height: 1.4;
}
.qi-rule-required { background: #fcebe7; color: #c8472b; }
.qi-rule-unique { background: #e7eefb; color: #1f4b9c; }
.qi-rule-format { background: #f0f1f3; color: #5f6469; }
.qi-rule-max { background: #f0f1f3; color: #5f6469; font-variant-numeric: tabular-nums; }
.qi-rule-target { background: #eaf2ec; color: #1f6f3a; }
[data-theme="dark"] .qi-rule-required { background: #4a1d1d; color: #f5b8b1; }
[data-theme="dark"] .qi-rule-unique { background: #1c2a4a; color: #b3c6ee; }
[data-theme="dark"] .qi-rule-format,
[data-theme="dark"] .qi-rule-max { background: #2a2c2f; color: #aab0b8; }
[data-theme="dark"] .qi-rule-target { background: #1d3a26; color: #b3d8c1; }

.qi-drill-form input[type="text"],
.qi-drill-form select,
.qi-drill-form textarea {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--qi-border-input);
    border-radius: var(--qi-radius); padding: 7px 10px;
    font: inherit; font-weight: normal; background: var(--qi-bg);
}
.qi-drill-form input:focus, .qi-drill-form select:focus, .qi-drill-form textarea:focus {
    outline: none; border-color: var(--qi-red);
    box-shadow: 0 0 0 2px rgba(226,63,35,0.15);
}
.qi-drill-field.qi-cell-bad input,
.qi-drill-field.qi-cell-bad select,
.qi-drill-field.qi-cell-bad textarea { border-color: #d8a0a0; }

.qi-drill-errors {
    margin: 0; padding: 12px 18px;
    background: var(--qi-bad-bg); color: var(--qi-bad);
    list-style: disc inside; font-size: 13px;
}
.qi-drill-errors li { padding: 2px 0; }
.qi-drill-warnings {
    margin: 0; padding: 12px 18px;
    background: var(--qi-bad-bg); color: var(--qi-bad);
    list-style: disc inside; font-size: 13px;
}
.qi-drill-warnings li { padding: 2px 0; }

.qi-drill-raw dt { color: var(--qi-muted); }
.qi-drill-raw dd { margin: 0 0 8px; }
.qi-raw-json { background: #f7f8fa; border: 1px solid var(--qi-border); border-radius: 4px; padding: 12px; font-size: 12px; line-height: 1.45; max-height: 60vh; overflow: auto; white-space: pre; }
.qi-debug-block { margin-top: 8px; font-size: 12px; }
.qi-debug-block summary { cursor: pointer; color: var(--qi-muted); }
.qi-cluster-input { width: 100%; padding: 5px 8px; font-size: 13px; border: 1px solid var(--qi-border-input); border-radius: 3px; }
.qi-cluster-input:focus { outline: 2px solid var(--qi-primary); outline-offset: -1px; }

.qi-grid-summary { table-layout: auto; }
.qi-grid-summary th, .qi-grid-summary td { white-space: nowrap; }
.qi-pill-mode-new    { background: #e0f0ff; color: #1e57aa; }
.qi-pill-mode-update { background: #fef3d6; color: #8a6614; }
.qi-pill-mode-update .qi-pill-id { font-weight: normal; opacity: 0.85; }
.qi-pill-changed     { background: var(--qi-warn-bg); color: var(--qi-warn); }
/* Field-state pills inside the drill-in — slightly darker fill so
   they don't disappear into the tinted row background. */
.qi-cell-warn .qi-pill-warn,
.qi-cell-bad  .qi-pill-bad,
.qi-drill-rels .qi-pill-warn,
.qi-rel-item-needs .qi-pill-warn { background: var(--qi-bad); color: #fff; }
.qi-issue-bad,
.qi-issue-warn { padding: 4px 8px; border-radius: 4px; font-size: 12px; }
.qi-issue-bad-mini,
.qi-issue-warn-mini { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 999px;
                       background: var(--qi-bad-bg); color: var(--qi-bad); font-weight: 700; font-size: 11px; margin-left: 4px; }

.qi-changes-only { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--qi-muted); }

/* "Just changed" — quiet blue accent, so the eye doesn't read it as
   another orange "needs review" row. Reviewers scan past these once
   they've confirmed the diff is what they expected. */
.qi-cell-changed {
    border-color: #cdd9ee;
    border-left-color: #4f7ed8;
    background: #f4f8ff;
}
[data-theme="dark"] .qi-cell-changed { background: #1c2536; border-left-color: #6a8fde; border-color: #2c3d5c; }
.qi-cell-changed .qi-pill-changed { background: #e5edfa; color: #2a4fa0; }
[data-theme="dark"] .qi-cell-changed .qi-pill-changed { background: #243559; color: #c3d4f5; }

/* Drill-in review summary — quick-jump banner at the top of the
   dialog listing fields with issues / warnings. */
.qi-drill-review-summary {
    margin: 8px 0 12px;
    padding: 8px 12px; border-radius: 6px;
    background: var(--qi-bad-bg); border: 1px solid #e8b4b4;
    color: var(--qi-bad);
    font-size: 13px; line-height: 1.5;
}
.qi-drill-review-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: normal;
    color: var(--qi-text);
}
.qi-drill-review-list {
    margin: 6px 0 0;
    padding-left: 1.25rem;
}
.qi-drill-row-issues {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: var(--qi-radius);
    background: var(--qi-bad-bg);
    border: 1px solid #e8b4b4;
    font-size: 13px;
}
.qi-drill-row-issue + .qi-drill-row-issue { margin-top: 8px; }
.qi-drill-row-issue ul { margin: 4px 0 0; padding-left: 1.25rem; }
.qi-drill-row-issue-lead {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--qi-text);
    font-weight: normal;
}
.qi-drill-row-issue-major ul { margin-top: 8px; }
.qi-drill-row-issue-actions {
    margin: 10px 0 0;
}
.qi-drill-csv-hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--qi-muted);
    line-height: 1.45;
}
.qi-summary-link { text-decoration: none; padding: 1px 6px; border-radius: 3px; font-weight: 600; }
.qi-summary-link-bad,
.qi-summary-link-warn { background: #fff; color: var(--qi-bad); border: 1px solid #e8b4b4; }
.qi-summary-link:hover { text-decoration: underline; }
/* Brief highlight when the user clicks a summary link, so the
   destination field flashes into view. Driven by a class toggle in
   validation-grid.js (rather than :target) so the URL hash stays
   clean across row navigation. */
.qi-drill-field.qi-flash-now,
.qi-rel-block.qi-flash-now {
    animation: qi-flash 1.4s ease-out 1;
}
@keyframes qi-flash {
    0%   { box-shadow: 0 0 0 4px rgba(179, 36, 36, 0.45); }
    100% { box-shadow: 0 0 0 0 rgba(179, 36, 36, 0); }
}
/* WAS → NOW diff strip. Tucked between the label and the input as a
   single line; light grey background instead of mustard yellow so the
   eye lands on the actual content, not on the badge. */
.qi-before-after {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    padding: 5px 9px; border-radius: 4px;
    background: #f4f5f7;
    border: 1px solid var(--qi-border-soft);
    font-size: 12px;
    margin: 0;
    line-height: 1.4;
}
.qi-before-after.qi-no-change {
    background: transparent; border: none; padding: 2px 0;
    color: var(--qi-muted);
}
.qi-before .qi-ba-value, .qi-after .qi-ba-value { font-weight: 600; color: var(--qi-text-strong); }
.qi-before { color: var(--qi-muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,0.3); }
.qi-arrow  { color: var(--qi-warn); font-weight: 700; font-size: 13px; }
.qi-ba-label {
    display: inline-block; padding: 0 5px; border-radius: 3px;
    background: rgba(0,0,0,0.06); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--qi-muted); margin-right: 3px;
    font-weight: 700;
}
.qi-drilldown header {
    display: flex; align-items: center;
    background: var(--qi-subbar-bg);
    color: var(--qi-subbar-text);
    border-bottom: 1px solid #000;
    padding: 7px 18px;
    min-height: 40px;
    box-sizing: border-box;
    gap: 18px;
    flex-shrink: 0;
}
.qi-drill-breadcrumb {
    flex: 1; min-width: 0;
}
.qi-drill-breadcrumb .qi-bc-current {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qi-drill-header-meta {
    display: flex; align-items: center;
    flex-shrink: 0;
}
.qi-drill-status {
    font-size: 12px; font-weight: 600; line-height: 1.25;
    padding: 3px 10px; border-radius: 3px;
    letter-spacing: 0.02em; text-transform: capitalize;
}
.qi-drill-status-ready  { background: rgba(46, 140, 90, 0.22); color: #8fd4a8; }
.qi-drill-status-error,
.qi-drill-status-review { background: var(--qi-bad-bg); color: var(--qi-bad); }
.qi-drill-status-error  { background: rgba(200, 60, 50, 0.22); color: #f0a0a0; }
.qi-drill-status-skipped { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55); }
.qi-drill-header-actions { gap: 12px; }
.qi-drill-record-nav {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px; color: var(--qi-subbar-text); white-space: nowrap;
}
.qi-drill-row-count { padding: 0 2px; }
.qi-drill-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0;
    border: 0; border-radius: 3px; background: transparent;
    color: var(--qi-subbar-text); font-size: 15px; line-height: 1;
    cursor: pointer;
}
.qi-drill-arrow:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: #fff; }
.qi-drill-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.qi-drill-header-actions .qi-link-cancel {
    color: #fff; font-size: 13px; line-height: 1.25; padding: 5px 4px;
    background: none; border: 0; cursor: pointer;
}
.qi-drill-header-actions .qi-link-cancel:hover { text-decoration: underline; }
.qi-drill-header-save {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px; font-size: 13px; line-height: 1.25;
    border-radius: 3px; white-space: nowrap;
}
.qi-drill-header-save svg { width: 14px; height: 14px; flex-shrink: 0; }
.qi-drill-header-save:hover:not(:disabled):not(.qi-save-busy):not(.qi-save-ok) {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.qi-drill-header-save.qi-save-ok {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45), 0 0 0 4px rgba(69, 184, 118, 0.55);
}
.qi-drill-header-save.qi-save-dirty {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 0 0 4px var(--qi-approve);
}
.qi-drill-footer .qi-drill-save.qi-save-dirty {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--qi-approve);
}
.qi-drill-footer {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 18px 24px; min-height: 40px; box-sizing: border-box;
    border-top: 1px solid var(--qi-border);
    background: #f0f0f0;
    margin: 0 -32px; padding-left: 32px; padding-right: 32px;
}
.qi-drill-footer .qi-spacer { flex: 1; }
.qi-drill-footer-actions {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.qi-drill-footer .qi-drill-record-nav {
    font-size: 13px; color: var(--qi-text-strong); white-space: nowrap;
}
.qi-drill-footer .qi-drill-arrow {
    color: var(--qi-muted);
}
.qi-drill-footer .qi-drill-arrow:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.06); color: var(--qi-text-strong);
}
.qi-drill-footer .qi-link-cancel {
    color: var(--qi-text-strong); font-size: 13px; line-height: 1.25;
    padding: 5px 4px; background: none; border: 0; cursor: pointer;
}
.qi-drill-footer .qi-link-cancel:hover { text-decoration: underline; }
.qi-drill-footer-save {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px; font-size: 13px; line-height: 1.25;
    border-radius: 3px; white-space: nowrap;
}
.qi-drill-footer-save svg { width: 14px; height: 14px; flex-shrink: 0; }
.qi-drill-footer-dirty {
    background: #fff8ed;
    border-top: 2px solid #e8c878;
}
.qi-drill-unsaved-note {
    font-size: 13px; font-weight: 600; color: #8a6614;
    padding: 0; border-radius: 0; background: transparent;
}
[data-theme="dark"] .qi-drill-footer-dirty {
    background: #2a2418;
    border-top-color: #6b5420;
}
[data-theme="dark"] .qi-drill-unsaved-note { color: #d4a843; }
.qi-drilldown section { padding: 0 32px; }
.qi-drill-form { padding: 20px 32px; }
.qi-drill-toolbar { padding: 10px 32px; }
.qi-drill-errors { margin: 0 -32px; padding: 12px 32px; }

.qi-drill-rels { padding: 8px 32px 24px; border-top: 1px solid var(--qi-border-soft); }
.qi-drill-rels h3 { margin: 16px 0 12px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--qi-text-strong); }
.qi-rel-block { border: 1px solid var(--qi-border); border-radius: 6px; margin-bottom: 10px; background: var(--qi-bg); }
.qi-rel-block summary {
    list-style: none; cursor: pointer; padding: 12px 16px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    border-radius: 6px;
}
.qi-rel-summary-preview {
    flex: 1 1 200px; min-width: 0; font-size: 13px; color: var(--qi-text-strong);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qi-rel-item-ctx { padding: 10px 12px; border: 1px solid var(--qi-border-soft); border-radius: 6px; background: #fafbfc; }
.qi-rel-ctx-fields { margin-top: 8px; display: grid; gap: 4px; }
.qi-rel-ctx-row { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.qi-rel-ctx-field { flex: 1; min-width: 0; }
.qi-rel-ctx-field .qi-source-picker,
.qi-rel-ctx-field .qi-lookup-shell,
.qi-rel-ctx-field input[type="text"],
.qi-rel-ctx-field select,
.qi-rel-ctx-field textarea { width: 100%; box-sizing: border-box; }
.qi-rel-ctx-row-warn { background: var(--qi-bad-bg); border-radius: 4px; padding: 4px 6px; margin: 2px 0; }
.qi-rel-item-ctx.qi-rel-item-needs { border-color: #e8b4b4; background: var(--qi-bad-bg); }
.qi-rel-ctx-label { min-width: 6em; color: var(--qi-muted); font-size: 12px; }
.qi-rel-ctx-value { flex: 1; min-width: 0; }
.qi-rel-block summary::-webkit-details-marker { display: none; }
.qi-rel-block[open] summary { background: var(--qi-subheader); border-bottom: 1px solid var(--qi-border); border-radius: 6px 6px 0 0; }
.qi-rel-badge { margin-left: auto; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.qi-rel-badge-good { background: var(--qi-good-bg); color: var(--qi-good); }
.qi-rel-badge-warn { background: var(--qi-bad-bg); color: var(--qi-bad); }
.qi-rel-body { padding: 14px 16px; }
.qi-rel-intro {
    margin: 0 0 12px; padding: 8px 12px; border-radius: 6px;
    font-size: 13px; line-height: 1.5;
    background: var(--qi-bad-bg); border: 1px solid rgba(179, 36, 36, 0.25);
    color: var(--qi-bad);
}
.qi-rel-intro-good {
    background: var(--qi-good-bg); border-color: rgba(46, 117, 82, 0.25); color: var(--qi-good);
}
.qi-rel-cell-summary {
    margin-bottom: 12px; padding: 10px 12px; border-radius: 6px;
    background: #f4f6f9; border: 1px solid var(--qi-border);
}
.qi-rel-cell-parts {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 6px 0 4px; font-size: 13px;
}
.qi-rel-cell-part {
    padding: 4px 10px; border-radius: 4px; background: var(--qi-bg);
    border: 1px solid var(--qi-border-input); font-family: var(--qi-mono, ui-monospace, monospace);
}
.qi-rel-cell-sep {
    color: var(--qi-muted); font-weight: 700; font-size: 12px; padding: 0 2px;
}
.qi-rel-cell-hint { margin: 0; font-size: 12px; color: var(--qi-muted); }
.qi-rel-cell-editor {
    margin-bottom: 14px; padding: 12px; border-radius: 6px;
    border: 1px solid var(--qi-border-input); background: #fafbfc;
}
.qi-rel-cell-edit-fold { margin-top: 12px; font-size: 13px; }
.qi-rel-cell-edit-fold summary { cursor: pointer; color: var(--qi-muted); padding: 4px 0; list-style: none; }
.qi-rel-cell-edit-fold summary::-webkit-details-marker { display: none; }
.qi-rel-cell-edit-fold[open] summary { margin-bottom: 8px; color: var(--qi-text-strong); }
.qi-rel-list-heading { display: block; margin: 4px 0 8px; }
.qi-rel-item-num {
    display: inline-block; margin-bottom: 4px; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; background: rgba(0, 0, 0, 0.06); color: var(--qi-muted);
}
.qi-rel-item-needs .qi-rel-item-num { background: var(--qi-bad); color: #fff; }
.qi-rel-items-list { display: flex; flex-direction: column; gap: 10px; }
.qi-rel-item {
    display: grid; gap: 10px; padding: 12px 14px;
    border: 1px solid var(--qi-border); border-radius: 6px; background: var(--qi-bg);
}
.qi-rel-item-needs { border-left: 4px solid var(--qi-bad); background: var(--qi-bad-bg); }
.qi-rel-item-ok    { border-left: 4px solid var(--qi-good); }
.qi-rel-step-label {
    display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--qi-muted); margin-bottom: 4px;
}
.qi-rel-csv-value {
    display: inline-block; padding: 4px 8px; border-radius: 4px;
    background: rgba(0, 0, 0, 0.04); font-size: 13px;
}
.qi-rel-from-block {
    margin-bottom: 14px; padding: 12px 14px; border-radius: 6px;
    border: 1px solid var(--qi-border); background: #f4f6f9;
}
.qi-rel-csv-edit-row {
    display: flex; align-items: flex-start; gap: 8px; margin-top: 4px;
}
.qi-rel-csv-input,
.qi-rel-csv-textarea {
    flex: 1; min-width: 0; padding: 8px 10px; font-size: 13px;
    font-family: var(--qi-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    border: 1px solid var(--qi-border-input); border-radius: 4px; background: var(--qi-bg);
}
.qi-rel-csv-input:focus,
.qi-rel-csv-textarea:focus { outline: 2px solid var(--qi-primary); outline-offset: -1px; }
.qi-rel-edit-hint {
    display: block; margin-top: 6px; font-size: 12px; color: var(--qi-muted);
}
.qi-rel-edit-hint code { padding: 1px 4px; background: rgba(0, 0, 0, 0.05); border-radius: 3px; }
.qi-rel-edit-status { display: block; margin-top: 4px; font-size: 12px; color: var(--qi-text-strong); }
.qi-rel-to .qi-source-picker { margin: 0; }

/* Combined (multi-field) relationship: editable fields + linked label */
.qi-rel-mf { padding: 4px 0; }
.qi-rel-mf-row {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
}
.qi-rel-mf-field { display: flex; flex-direction: column; gap: 4px; }
.qi-rel-mf-flabel { font-size: 12px; color: var(--qi-muted); }
.qi-rel-mf-input {
    width: 180px; padding: 6px 8px; font-size: 14px;
    border: 1px solid var(--qi-border-input); border-radius: 3px;
}
.qi-rel-mf-input:focus { outline: 2px solid var(--qi-primary); outline-offset: -1px; }
.qi-rel-mf-find { white-space: nowrap; }
.qi-rel-mf-result { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.qi-rel-mf-resultlabel { font-size: 12px; color: var(--qi-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.qi-rel-mf-linked .qi-lookup-value { font-weight: 600; }
.qi-rel-mf-none { color: var(--qi-muted); font-size: 13px; }
.qi-rel-mf.is-unmatched { border-left: 4px solid var(--qi-bad); background: var(--qi-bad-bg); padding: 10px 12px; border-radius: 4px; }
.qi-rel-mf.is-linked { border-left: 4px solid var(--qi-good, #3a8a4f); background: var(--qi-good-bg, #f0f8f1); padding: 10px 12px; border-radius: 4px; }
.qi-rel-advanced { margin-top: 14px; font-size: 13px; }
.qi-rel-advanced summary {
    cursor: pointer; color: var(--qi-muted); padding: 4px 0;
    list-style: none;
}
.qi-rel-advanced summary::-webkit-details-marker { display: none; }
.qi-rel-advanced[open] summary { margin-bottom: 8px; color: var(--qi-text-strong); }
.qi-rel-cell { font-size: 12px; }
.qi-rel-items { font-size: 13px; }
.qi-rel-row-bad td { background: rgba(179,36,36,0.05); }
.qi-rel-resolution { min-width: 240px; vertical-align: top; }
.qi-rel-resolved { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.qi-rel-clear-btn {
    border: none; background: transparent; color: var(--qi-muted);
    font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px;
    border-radius: 3px;
}
.qi-rel-clear-btn:hover { color: var(--qi-bad); background: var(--qi-bad-bg); }
.qi-rel-resolution .qi-source-picker { margin: 0; }
.qi-rel-resolution .qi-picker-row { flex-wrap: wrap; gap: 6px; }
.qi-rel-resolution .qi-picker-select { min-width: 180px; max-width: 100%; }
.qi-rel-edit { margin-bottom: 0; padding: 0; border: none; background: transparent; }
.qi-rel-edit-label { display: block; font-size: 12px; color: var(--qi-muted); margin-bottom: 6px; }
.qi-rel-edit-cell { width: 100%; padding: 8px 10px; font-family: var(--qi-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 13px; border: 1px solid var(--qi-border-input); border-radius: 4px; background: var(--qi-bg); resize: vertical; }
.qi-rel-edit-cell:focus { outline: 2px solid var(--qi-primary); outline-offset: -1px; }
.qi-rel-edit-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.qi-rel-edit-hint { font-size: 12px; color: var(--qi-muted); }
.qi-rel-edit-hint code { padding: 1px 4px; background: #eef0f3; border-radius: 3px; }
.qi-rel-edit-status { font-size: 12px; color: var(--qi-text-strong); }

/* ------- page footer ------- */
.qi-footer {
    display: flex; align-items: center; gap: 18px;
    padding: 12px 24px; color: var(--qi-muted); font-size: 12px;
    border-top: 1px solid var(--qi-border);
    background: var(--qi-bg);
}
.qi-footer .qi-foot-left { display: flex; align-items: center; gap: 6px; }
.qi-footer .qi-foot-mid { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.qi-footer .qi-foot-right { display: flex; align-items: center; gap: 8px; }
.qi-theme-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 0; color: var(--qi-red); cursor: pointer;
    font: inherit; padding: 0; font-size: 12px;
}
.qi-theme-toggle:hover { text-decoration: underline; }
.qi-theme-toggle svg { width: 14px; height: 14px; }
.qi-foot-link { color: var(--qi-red); }
.qi-foot-brand { color: var(--qi-text); font-weight: 500; }
.qi-foot-brand sup { font-size: 9px; }

/* ------- file input (Step 1 file picker) ------- */
.qi-file input[type="file"] {
    padding: 8px; background: #fafbfc;
    border: 1px dashed var(--qi-border-input);
}

/* ------- Qi-style inline help (circle ? + dark tooltip) ------- */
.qi-label-with-help {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.qi-help {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    line-height: 1;
}
.qi-help-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--qi-border-input);
    border-radius: 50%;
    background: var(--qi-bg);
    color: var(--qi-muted);
    cursor: help;
    flex: 0 0 18px;
}
.qi-help-trigger svg {
    width: 13px;
    height: 13px;
}
.qi-help-trigger:hover,
.qi-help-trigger:focus-visible,
.qi-help.is-open .qi-help-trigger {
    color: var(--qi-text-strong);
    border-color: var(--qi-muted);
    outline: none;
    box-shadow: 0 0 0 2px rgba(226, 63, 35, 0.15);
}
.qi-help .qi-help-tooltip {
    position: absolute;
    z-index: 1200;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    min-width: 200px;
    max-width: min(320px, 88vw);
    padding: 10px 12px;
    border-radius: 4px;
    background: #3a3a3a;
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    pointer-events: none;
}
.qi-help .qi-help-tooltip::after {
    content: '';
    position: absolute;
    left: var(--qi-arrow-left, 50%);
    top: 100%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #3a3a3a;
}
.qi-help .qi-help-tooltip.is-below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #3a3a3a;
}
.qi-help.qi-help-wide .qi-help-tooltip { max-width: min(440px, 92vw); }
.qi-help .qi-help-tooltip p { margin: 0 0 8px; }
.qi-help .qi-help-tooltip p:last-child { margin-bottom: 0; }
.qi-help .qi-help-tooltip[hidden] { display: none !important; }
.qi-help .qi-help-tooltip em,
.qi-help .qi-help-tooltip strong {
    color: inherit;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}
.qi-help .qi-help-tooltip em { font-style: italic; }
.qi-help .qi-help-tooltip code {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 1px 4px;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.92em;
    font-weight: 400;
}
.qi-help .qi-help-tooltip a { color: #fecaca; text-decoration: underline; }

/* Collapsible format guide (Step 1) */
.qi-help-guide {
    margin: 0 0 20px;
    border: 1px solid var(--qi-border);
    border-radius: var(--qi-radius);
    background: var(--qi-bg);
}
.qi-help-guide > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 600;
    color: var(--qi-text-strong);
    list-style: none;
}
.qi-help-guide > summary::-webkit-details-marker { display: none; }
.qi-help-guide > summary::before {
    content: '▸';
    display: inline-block;
    width: 14px;
    color: var(--qi-muted);
    transition: transform 0.15s ease;
}
.qi-help-guide[open] > summary::before { transform: rotate(90deg); }
.qi-help-guide-title { flex: 1; }
.qi-help-guide-body {
    padding: 0 16px 16px;
    border-top: 1px solid var(--qi-border-soft);
    font-size: 13px;
    line-height: 1.55;
}
.qi-help-guide-body section { margin-top: 16px; }
.qi-help-guide-body section:first-child { margin-top: 12px; }
.qi-help-guide-body h3 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--qi-text-strong);
}
.qi-help-guide-body ul,
.qi-help-guide-body p { margin: 0 0 8px; }
.qi-help-guide-body ul { padding-left: 1.25rem; }
.qi-help-guide-body li { margin-bottom: 4px; }
.qi-help-dl {
    margin: 0;
    display: grid;
    gap: 10px;
}
.qi-help-dl dt {
    font-weight: 600;
    color: var(--qi-text-strong);
}
.qi-help-dl dt code { font-size: 0.92em; }
.qi-help-dl dd {
    margin: 0;
    padding-left: 0;
    color: var(--qi-text);
}
.qi-help-guide-note {
    padding: 10px 12px;
    background: var(--qi-canvas);
    border: 1px solid var(--qi-border-soft);
    border-radius: var(--qi-radius);
    font-size: 12px;
}
.qi-step-intro {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--qi-text);
}
h2.qi-label-with-help {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.qi-meta dt.qi-label-with-help {
    display: flex;
    align-items: center;
    gap: 6px;
}
.qi-toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 16px;
}
.qi-metric > span:last-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.qi-card-actions .qi-label-with-help {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

[data-theme="dark"] .qi-help-trigger { background: #16171a; }
[data-theme="dark"] .qi-help .qi-help-tooltip {
    background: #e8eaed;
    color: #111827;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .qi-help .qi-help-tooltip::after { border-top-color: #e8eaed; }
[data-theme="dark"] .qi-help .qi-help-tooltip.is-below::after {
    border-top-color: transparent;
    border-bottom-color: #e8eaed;
}
[data-theme="dark"] .qi-help .qi-help-tooltip code {
    background: rgba(0, 0, 0, 0.08);
    color: #111827;
}
[data-theme="dark"] .qi-help .qi-help-tooltip a { color: #b91c1c; }
[data-theme="dark"] .qi-help-guide { background: #16171a; }
[data-theme="dark"] .qi-help-guide-note { background: #131418; }

/* ------- Qi export import-mode dialog (between Step 1 and 2) ------- */
.qi-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(17, 24, 39, 0.55);
}
.qi-modal-dialog {
    width: min(560px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
}
.qi-modal-dialog .qi-card { margin: 0; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); }
.qi-import-mode-list {
    margin: 0 0 20px;
    padding-left: 1.25em;
    color: var(--qi-text);
}
.qi-import-mode-list li + li { margin-top: 8px; }
.qi-import-mode-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.qi-import-mode-form { margin: 0; }

/* ------- Qi CMS-style login (matches Qi 6.x login — AKG reference) ------- */
body.qi-auth-page {
    background: #fff;
    color: #191919;
    min-height: 100vh;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
[data-theme="dark"] body.qi-auth-page {
    color-scheme: light;
    background: #fff;
    color: #191919;
}
body.qi-auth-page .qi-main,
body.qi-auth-page .qi-main-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 0;
    flex: 1;
    padding: 24px;
    box-sizing: border-box;
    min-height: 100vh;
    min-width: 0;
}
body.qi-auth-page .qi-login-shell {
    width: 33%;
    min-width: 500px;
    max-width: 560px;
    position: relative;
    z-index: 1;
}
body.qi-auth-page .qi-login-header {
    display: flex;
    align-items: center;
    height: 66px;
    padding: 0 21px;
    background: #fff;
    color: #191919;
    border-radius: 8px 8px 0 0;
}
body.qi-auth-page .qi-login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
body.qi-auth-page .qi-login-logo {
    display: block;
    width: 28px;
    height: 38px;
    flex-shrink: 0;
    color: var(--qi-red);
}
body.qi-auth-page .qi-login-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
body.qi-auth-page .qi-login-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: #5b6068;   /* quieter than the Importer badge so the badge dominates */
}
body.qi-auth-page .qi-login-eyebrow {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    line-height: 1.1;
    margin-left: auto;
    flex-direction: column;

    font-size: 10px;
}
body.qi-auth-page .qi-login-product-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 4px;
    background: var(--qi-grey);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
body.qi-auth-page .qi-login-product-tagline {
    font-size: 11px;
    color: #6b6f78;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
body.qi-auth-page .qi-login-body {
    background: #fff;
    border-radius: 0 0 8px 8px;
    padding: 0 21px 20px;
}
body.qi-auth-page .qi-login-error {
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid #fcada9;
    border-radius: 4px;
    background: #ffd2d2;
    color: #7f6464;
    font-size: 13px;
    line-height: 1.45;
}
body.qi-auth-page .qi-login-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
body.qi-auth-page .qi-login-field-label {
    display: flex;
    align-items: center;
    gap: 3px;
    margin: 10px 0 0;
    font-weight: 700;
    
    cursor: pointer;
}
body.qi-auth-page .qi-login-field-label:first-of-type {
    margin-top: 0;
}
body.qi-auth-page .qi-login-label-text {
    margin-right: auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--qi-text-strong);
}
body.qi-auth-page .qi-login-badge {
    display: inline-flex;
    align-items: center;
    background: #ea283f;
    border: 1px solid #ea283f;
    color: #fff;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.24px;
    padding: 0 7px;
    border-radius: var(--badge-radius);
    line-height: 14px;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}
body.qi-auth-page .qi-login-input-wrap {
    margin-top: 6px;
}
body.qi-auth-page .qi-login-input {
    display: block;
    width: 100%;
    height: 22px;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #ea283f;
    border-radius: 4px;
    padding: 0 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 400;
    
    line-height: 20px;
    color: #191919;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
}
body.qi-auth-page .qi-login-input:focus {
    outline: none;
    border-color: #ea283f;
    box-shadow: none;
}
body.qi-auth-page .qi-login-input:-webkit-autofill,
body.qi-auth-page .qi-login-input:-webkit-autofill:hover,
body.qi-auth-page .qi-login-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #191919;
    border: 1px solid #ea283f;
}
body.qi-auth-page .qi-login-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 30px;
}
body.qi-auth-page .qi-login-reset {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #191919;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    text-decoration: none;
}
body.qi-auth-page .qi-login-reset:hover {
    text-decoration: underline;
    color: #191919;
}
body.qi-auth-page .qi-login-reset svg {
    width: 12px;
    height: 7px;
    flex-shrink: 0;
}
body.qi-auth-page .qi-login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 29px;
    padding: 6px 16px;
    border: 1px solid #75b24a;
    border-radius: 4px;
    background: #75b24a;
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.qi-auth-page .qi-login-submit:hover {
    background: transparent;
    color: #75b24a;
}
body.qi-auth-page .qi-login-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(117, 178, 74, 0.45);
}

/* ------- responsive ------- */
@media (max-width: 920px) {
    .qi-step-label { display: none; }
    .qi-step { padding: 0 12px; }
    .qi-main { padding: 16px 12px; }
    body.qi-auth-page .qi-main,
    body.qi-auth-page .qi-main-auth { padding: 16px; }
    body.qi-auth-page .qi-login-shell {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
    .qi-card { padding: 20px 18px; }
    .qi-card-stack > .qi-card-body { padding: 20px 18px; }
    .qi-card-stack > .qi-card-footer-bar { padding: 12px 18px; }
    .qi-mapping-table { min-width: 720px; }
    .qi-mapping-table .qi-col-map-source { width: 34%; min-width: 180px; }
    .qi-mapping-table th[scope="row"],
    .qi-mapping-table .qi-ctx-cell { min-width: 180px; white-space: normal; }
    .qi-mapping-table th[scope="row"] code { white-space: normal; }
    .qi-mapping-table .qi-col-map-type { width: 5.5rem; }
    .qi-mapping-table .qi-col-map-behaviour { width: 9.5rem; }
    .qi-mapping-table .qi-col-map-status { width: 7.5rem; }
    .qi-grid-2 { grid-template-columns: 1fr; }
    .qi-footer { flex-wrap: wrap; gap: 8px 18px; padding: 10px 16px; }
    .qi-footer .qi-foot-mid { justify-content: flex-start; gap: 14px; }
    .qi-subbar { padding: 7px var(--qi-power-width) 7px 12px; }
    .qi-header-nav-item { padding: 0 14px; }
    .qi-username { display: none; }
}

#webGLApp {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
#toolbarContainer {
    display: none;
}