/* ============================================================================
   mh-importexport.css - the Import and Export screens.
   Aug 12 2026, for the Import / Export / Template Engine.

   These are FULL PAGES, not overlays. The app's wizard chrome (.dzwiz) is scoped
   to #clWiz / #clMbr and is a modal box, so reusing it here would have meant
   either widening that scope - which changes two live wizards - or copying it,
   which is how two lookalike wizards drift apart. This is its own surface built
   from the same tokens, so it belongs to the design system without borrowing
   another screen's structure.

   HEIGHTS USE --mh-vh, NEVER BARE vh. The app runs at a global zoom and bare
   viewport units ignore it, which is how a panel ends up taller than the window
   it lives in.
   ============================================================================ */

.mh-app .mh-iewrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: min(calc(92 * var(--mh-vh)), 1000px);
    padding: 2px;
}

/* ---- header ------------------------------------------------------------- */
.mh-app .ie-head { display: flex; align-items: flex-start; gap: 16px; }
.mh-app .ie-head h1 { font-size: 24px; margin: 0; line-height: 1.2; }
.mh-app .ie-sub { margin: 4px 0 0; font-size: 13px; color: var(--mh-muted); max-width: 78ch; }

.mh-app .ie-back {
    display: inline-flex; align-items: center; gap: 7px;
    height: 36px; padding: 0 14px 0 10px;
    background: var(--mh-surface); border: 1px solid var(--mh-line); border-radius: 11px;
    color: var(--mh-ink); font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.mh-app .ie-back svg { width: 16px; height: 16px; }
.mh-app .ie-back:hover { border-color: rgba(40,60,80,.2); box-shadow: 0 10px 26px rgba(40,60,80,.12); }

/* ---- body: step rail + pane --------------------------------------------- */
.mh-app .ie-body { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 16px; min-height: 0; flex: 1; }

.mh-app .ie-rail {
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px; background: var(--mh-surface);
    border: 1px solid var(--mh-line); border-radius: 16px;
    align-self: start;
}
.mh-app .ie-step { display: flex; gap: 11px; align-items: flex-start; padding: 9px 10px; border-radius: 11px; }
.mh-app .ie-step.on { background: rgba(40,60,80,.06); }
.mh-app .ie-step.locked { opacity: .42; }
.mh-app .ie-stepn {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: #DFE4EA; color: var(--mh-ink);
    font-size: 12px; font-weight: 700;
}
.mh-app .ie-step.on .ie-stepn { background: var(--mh-ctrl-selected); color: #fff; }
.mh-app .ie-step.done .ie-stepn { background: var(--mh-ctrl-selected); color: #fff; }
.mh-app .ie-steptx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mh-app .ie-steptx b { font-size: 13px; font-weight: 650; }
.mh-app .ie-steptx i { font-size: 11.5px; font-style: normal; color: var(--mh-muted); line-height: 1.35; }
.mh-app .ie-railnote {
    margin-top: 8px; padding: 10px; border-radius: 11px;
    background: rgba(40,60,80,.05); font-size: 11.5px; line-height: 1.5; color: var(--mh-muted);
}

.mh-app .ie-pane {
    min-width: 0; min-height: 0; overflow: auto;
    padding: 20px 22px; background: var(--mh-surface);
    border: 1px solid var(--mh-line); border-radius: 16px;
    display: flex; flex-direction: column;
}
.mh-app .ie-h2 { font-size: 18px; margin: 0 0 6px; }
.mh-app .ie-h3 { font-size: 14px; margin: 22px 0 6px; }
.mh-app .ie-p { font-size: 13px; color: var(--mh-muted); margin: 0 0 14px; line-height: 1.55; max-width: 88ch; }

/* ---- step 1: the drop target -------------------------------------------- */
.mh-app .ie-drop {
    position: relative; display: grid; place-items: center; gap: 5px;
    padding: 34px 20px; border-radius: 16px; cursor: pointer;
    border: 2px dashed var(--mh-line); background: rgba(40,60,80,.03);
    color: var(--mh-muted); text-align: center;
    transition: background .15s, border-color .15s;
}
.mh-app .ie-drop:hover { background: rgba(40,60,80,.06); border-color: rgba(40,60,80,.28); }
.mh-app .ie-drop.busy { pointer-events: none; opacity: .6; }
.mh-app .ie-drop b { font-size: 14px; color: var(--mh-ink); }
.mh-app .ie-drop i { font-style: normal; font-size: 12px; }
/* The real input covers the label so the whole box is the hit target. */
.mh-app .ie-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.mh-app .ie-help {
    margin-top: 18px; padding: 13px 15px; border-radius: 12px;
    background: rgba(40,60,80,.04); border: 1px solid var(--mh-line);
}
.mh-app .ie-help b { font-size: 13px; }
.mh-app .ie-help p { margin: 5px 0 0; font-size: 12.5px; color: var(--mh-muted); line-height: 1.55; }

/* ---- messages ----------------------------------------------------------- */
.mh-app .ie-warn, .mh-app .ie-err, .mh-app .ie-note, .mh-app .ie-clean {
    margin: 12px 0; padding: 11px 14px; border-radius: 12px;
    font-size: 12.5px; line-height: 1.55; border: 1px solid;
}
.mh-app .ie-warn  { background: rgba(198,124,26,.09); border-color: rgba(198,124,26,.3); color: #7a4c07; }
.mh-app .ie-err   { background: rgba(176,42,42,.08);  border-color: rgba(176,42,42,.32); color: #8d1f1f; }
.mh-app .ie-note  { background: rgba(40,60,80,.05);   border-color: var(--mh-line);      color: var(--mh-muted); }
.mh-app .ie-clean { background: rgba(37,110,80,.08);  border-color: rgba(37,110,80,.28); color: #1d5a42; }
body.dark .mh-app .ie-warn  { color: #f0c07a; }
body.dark .mh-app .ie-err   { color: #f0a0a0; }
body.dark .mh-app .ie-clean { color: #8fd9b6; }

/* ---- options ------------------------------------------------------------ */
.mh-app .ie-optrow { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 14px; }
.mh-app .ie-opt { display: flex; flex-direction: column; gap: 4px; min-width: 240px; flex: 1 1 240px; }
.mh-app .ie-opt > span { font-size: 12px; font-weight: 650; }
.mh-app .ie-opt > i { font-size: 11.5px; font-style: normal; color: var(--mh-muted); line-height: 1.45; }
.mh-app .ie-opt input[type=text], .mh-app .ie-opt select, .mh-app .ie-colpick select, .mh-app .ie-resa select {
    height: 36px; padding: 0 10px;
    background: #DFE4EA; border: 1px solid rgba(40,60,80,.08);
    box-shadow: inset 0 1px 2px rgba(40,60,80,.10);
    border-radius: 11px; color: var(--mh-ink); font-size: 13px; width: 100%;
}
.mh-app .ie-opt input[type=text]:focus, .mh-app .ie-opt select:focus,
.mh-app .ie-colpick select:focus, .mh-app .ie-resa select:focus {
    background: #fff; border-color: var(--mh-ctrl-focus-border); box-shadow: var(--mh-ctrl-focus-ring); outline: none;
}
body.dark .mh-app .ie-opt input[type=text], body.dark .mh-app .ie-opt select,
body.dark .mh-app .ie-colpick select, body.dark .mh-app .ie-resa select {
    background: var(--mh-ctrl-fill); border-color: var(--mh-line); box-shadow: inset 0 1px 2px rgba(0,0,0,.22);
}

.mh-app .ie-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; cursor: pointer; }
.mh-app .ie-check input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--mh-ctrl-selected); }
.mh-app .ie-check.big { margin: 16px 0 6px; font-size: 13.5px; font-weight: 600; }
.mh-app .ie-idrow { display: flex; flex-direction: column; gap: 3px; margin: 0 0 16px; }
.mh-app .ie-idrow > i { font-size: 11.5px; font-style: normal; color: var(--mh-muted); padding-left: 25px; line-height: 1.45; }

/* ---- step 2: the columns ------------------------------------------------ */
.mh-app .ie-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.mh-app .ie-col {
    padding: 12px 13px; border-radius: 13px;
    border: 1px solid var(--mh-line); background: rgba(40,60,80,.02);
    display: flex; flex-direction: column; gap: 8px;
}
/* An undecided column is loud on purpose - it is the thing standing between the
   user and the next step, and a quiet one gets scrolled past. */
.mh-app .ie-col.unres { border-color: rgba(198,124,26,.45); background: rgba(198,124,26,.05); }
.mh-app .ie-colhead { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mh-app .ie-colhead b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-app .ie-colhead i {
    font-style: normal; font-size: 11.5px; color: var(--mh-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mh-app .ie-colhead i.ie-empty { opacity: .6; font-style: italic; }
.mh-app .ie-colpick { display: flex; flex-direction: column; gap: 5px; }
.mh-app .ie-basis { font-size: 11px; }
.mh-app .ie-basis.ok  { color: #1d5a42; }
.mh-app .ie-basis.ask { color: #7a4c07; font-weight: 600; }
body.dark .mh-app .ie-basis.ok { color: #8fd9b6; }
body.dark .mh-app .ie-basis.ask { color: #f0c07a; }

.mh-app .ie-sugg, .mh-app .ie-dateq { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mh-muted); }
.mh-app .ie-chip {
    padding: 4px 10px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--mh-line); background: var(--mh-surface);
    color: var(--mh-ink); font-size: 11.5px;
    transition: background .15s, border-color .15s;
}
.mh-app .ie-chip:hover { border-color: rgba(40,60,80,.3); background: #fff; }
.mh-app .ie-chip.on { background: var(--mh-ctrl-selected); border-color: transparent; color: #fff; }

/* ---- step 3: the questions ---------------------------------------------- */
.mh-app .ie-res {
    display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 14px; align-items: center;
    padding: 11px 13px; margin-bottom: 8px; border-radius: 12px;
    border: 1px solid rgba(198,124,26,.4); background: rgba(198,124,26,.05);
}
.mh-app .ie-res.done { border-color: var(--mh-line); background: rgba(40,60,80,.02); }
.mh-app .ie-resq { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mh-app .ie-resq b { font-size: 13.5px; }
.mh-app .ie-resq span { font-size: 11.5px; color: var(--mh-muted); }
.mh-app .ie-resq i { font-style: normal; font-weight: 600; }

/* ---- tables (review, search, history) ----------------------------------- */
.mh-app .ie-revwrap, .mh-app .ie-histwrap {
    flex: 1 1 auto; min-height: 120px; max-height: calc(52 * var(--mh-vh));
    overflow: auto; border: 1px solid var(--mh-line); border-radius: 13px;
}
.mh-app .ie-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mh-app .ie-table th {
    position: sticky; top: 0; z-index: 1;
    background: var(--mh-surface); text-align: left; font-weight: 650;
    padding: 9px 11px; border-bottom: 1px solid var(--mh-line); white-space: nowrap;
}
.mh-app .ie-table td { padding: 8px 11px; border-bottom: 1px solid rgba(40,60,80,.07); vertical-align: top; }
.mh-app .ie-table tbody tr:last-child td { border-bottom: none; }
.mh-app .ie-ell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-app .ie-none { text-align: center; color: var(--mh-muted); padding: 22px; }

/* A household row is visually the head of its block, so a 400-row review still
   reads as families rather than an undifferentiated list. */
.mh-app .ie-rev .ie-hhrow td { background: rgba(40,60,80,.05); font-weight: 600; }
.mh-app .ie-rev .ie-skipped td { opacity: .5; text-decoration: line-through; }
.mh-app .ie-rev .ie-skipped td:last-child { text-decoration: none; opacity: 1; }
.mh-app .ie-amb { color: #8d1f1f; font-weight: 650; }
body.dark .mh-app .ie-amb { color: #f0a0a0; }
.mh-app .ie-matchnote { display: block; font-style: normal; font-size: 11px; color: var(--mh-muted); font-weight: 400; }
.mh-app .ie-chosen td { background: rgba(37,110,80,.08); }

/* ---- the settled-columns list ------------------------------------------- */
.mh-app .ie-settledhead { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.mh-app .ie-settledhead .ie-h3 { margin: 0; }
.mh-app .ie-dim { color: var(--mh-muted); }
.mh-app select.ie-inline { height: 30px; padding: 0 8px; font-size: 12px; border-radius: 9px; max-width: 260px;
    background: #DFE4EA; border: 1px solid rgba(40,60,80,.08); color: var(--mh-ink); }
body.dark .mh-app select.ie-inline { background: var(--mh-ctrl-fill); border-color: var(--mh-line); }

/* ---- REVIEW AS FAMILIES --------------------------------------------------
   One family, one box - deliberately the same shape as the printed report, so
   the thing staff check on screen is the thing they will hold on paper.
   Grouping is the decision most likely to be wrong on an import and the least
   visible in a flat table, which is why it gets the strongest structure here. */
.mh-app .ie-fam {
    border: 1px solid var(--mh-line); border-radius: 13px;
    padding: 11px 13px; margin-bottom: 10px; background: var(--mh-surface);
}
.mh-app .ie-fam.off { opacity: .5; }
.mh-app .ie-famhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--mh-line); }
.mh-app .ie-famhead b { font-size: 14px; }
.mh-app .ie-fambadge { font-size: 11.5px; color: var(--mh-muted); }
.mh-app .ie-famcount { margin-left: auto; font-size: 11.5px; color: var(--mh-muted); }

/* Two-up, like the report - a family of six is three lines, not six. */
.mh-app .ie-fammembers { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 4px 18px; padding-top: 8px; }
.mh-app .ie-mem { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.mh-app .ie-mem.off .ie-memname b { text-decoration: line-through; opacity: .65; }
.mh-app .ie-mem.amb { background: rgba(176,42,42,.05); border-radius: 8px; padding: 5px 7px; }
.mh-app .ie-memname { min-width: 0; flex: 0 0 40%; display: flex; flex-direction: column; }
.mh-app .ie-memname b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-app .ie-memname i { font-style: normal; font-size: 10.5px; color: var(--mh-muted); }
.mh-app .ie-memland { flex: 1 1 auto; min-width: 0; font-size: 11.5px; color: var(--mh-muted); }
.mh-app .ie-mem .ie-mini { flex: 0 0 auto; }

.mh-app .ie-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 650; }
.mh-app .ie-pill.ok     { background: rgba(37,110,80,.14); color: #1d5a42; }
.mh-app .ie-pill.undone { background: rgba(176,42,42,.12); color: #8d1f1f; }
.mh-app .ie-pill.prep   { background: rgba(40,60,80,.1);   color: var(--mh-muted); }
.mh-app .ie-pill.muted  { background: rgba(40,60,80,.07);  color: var(--mh-muted); }

.mh-app .ie-selbar { display: flex; align-items: center; gap: 12px; margin: 10px 0; font-size: 12.5px; color: var(--mh-muted); }
.mh-app .ie-srch { margin: 4px 0 6px; }

/* ---- scope + format pickers --------------------------------------------- */
.mh-app .ie-scopepick, .mh-app .ie-fmts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 14px; }
.mh-app .ie-scope, .mh-app .ie-fmt {
    display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
    padding: 14px 15px; border-radius: 14px;
    border: 1px solid var(--mh-line); background: var(--mh-surface); color: var(--mh-ink);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.mh-app .ie-scope:hover, .mh-app .ie-fmt:hover { border-color: rgba(40,60,80,.26); box-shadow: 0 10px 26px rgba(40,60,80,.1); }
.mh-app .ie-scope.on, .mh-app .ie-fmt.on { border-color: var(--mh-ctrl-selected); box-shadow: 0 0 0 2px rgba(37,110,80,.16); }
.mh-app .ie-scope b, .mh-app .ie-fmt b { font-size: 14px; }
.mh-app .ie-scope i, .mh-app .ie-fmt i { font-style: normal; font-size: 12px; color: var(--mh-muted); line-height: 1.5; }

/* ---- final summary + PIN ------------------------------------------------ */
.mh-app .ie-final {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px;
    background: var(--mh-line); border: 1px solid var(--mh-line); border-radius: 13px; overflow: hidden;
    margin-bottom: 6px;
}
.mh-app .ie-finalrow { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--mh-surface); }
.mh-app .ie-finalrow span { font-size: 11.5px; color: var(--mh-muted); }
.mh-app .ie-finalrow b { font-size: 17px; }
.mh-app .ie-finalrow.hot b { color: #8d1f1f; }
body.dark .mh-app .ie-finalrow.hot b { color: #f0a0a0; }

.mh-app .ie-pin { display: flex; flex-direction: column; gap: 4px; margin: 14px 0; max-width: 340px; }
.mh-app .ie-pin.off { opacity: .45; pointer-events: none; }
.mh-app .ie-pin label { display: flex; flex-direction: column; gap: 4px; }
.mh-app .ie-pin span { font-size: 12px; font-weight: 650; }
.mh-app .ie-pin input {
    height: 40px; padding: 0 12px; letter-spacing: .3em; font-size: 15px;
    background: #DFE4EA; border: 1px solid rgba(40,60,80,.08);
    box-shadow: inset 0 1px 2px rgba(40,60,80,.10); border-radius: 11px; color: var(--mh-ink);
}
.mh-app .ie-pin input:focus { background: #fff; border-color: var(--mh-ctrl-focus-border); box-shadow: var(--mh-ctrl-focus-ring); outline: none; }
body.dark .mh-app .ie-pin input { background: var(--mh-ctrl-fill); border-color: var(--mh-line); box-shadow: inset 0 1px 2px rgba(0,0,0,.22); }
.mh-app .ie-pin i { font-style: normal; font-size: 11.5px; color: var(--mh-muted); line-height: 1.45; }

/* ---- footer buttons ----------------------------------------------------- */
.mh-app .ie-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--mh-line); }
.mh-app .ie-footmsg { flex: 1; font-size: 12.5px; color: #7a4c07; font-weight: 600; }
body.dark .mh-app .ie-footmsg { color: #f0c07a; }
.mh-app .ie-btn {
    height: 40px; padding: 0 20px; border-radius: 12px; cursor: pointer;
    background: var(--mh-ctrl-selected); border: 1px solid transparent; color: #fff;
    font-size: 13.5px; font-weight: 650;
    transition: filter .15s, box-shadow .15s;
}
.mh-app .ie-btn:hover:not(:disabled) { filter: brightness(1.06); box-shadow: 0 10px 26px rgba(37,110,80,.26); }
.mh-app .ie-btn:disabled { opacity: .45; cursor: not-allowed; }
.mh-app .ie-btn.ghost { background: var(--mh-surface); border-color: var(--mh-line); color: var(--mh-ink); }
.mh-app .ie-btn.ghost:hover:not(:disabled) { border-color: rgba(40,60,80,.26); box-shadow: 0 10px 26px rgba(40,60,80,.12); }
.mh-app .ie-btn.danger { background: #A3342F; }
.mh-app .ie-btn.danger:hover:not(:disabled) { box-shadow: 0 10px 26px rgba(163,52,47,.3); }

.mh-app .ie-mini {
    height: 28px; padding: 0 11px; border-radius: 9px; cursor: pointer;
    background: var(--mh-surface); border: 1px solid var(--mh-line); color: var(--mh-ink);
    font-size: 11.5px; font-weight: 600;
}
.mh-app .ie-mini:hover { border-color: rgba(40,60,80,.28); }
.mh-app .ie-mini.on { background: var(--mh-ctrl-selected); border-color: transparent; color: #fff; }
.mh-app .ie-mini.danger { color: #8d1f1f; border-color: rgba(176,42,42,.3); }

/* ---- done --------------------------------------------------------------- */
.mh-app .ie-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 34px 20px; }
.mh-app .ie-done svg { color: var(--mh-ctrl-selected); }
.mh-app .ie-done h2 { margin: 4px 0 0; font-size: 20px; }
.mh-app .ie-done .ie-foot { border-top: none; }

/* ---- undo confirmation --------------------------------------------------
   The backdrop does NOT close this. Undoing an import archives hundreds of
   records, and a stray click on the page behind should not be the thing that
   dismisses the question - so Cancel is always visible instead. */
.mh-app .ie-modalback { position: fixed; inset: 0; z-index: 900; background: rgba(20,28,36,.42); }
.mh-app .ie-modal {
    position: fixed; z-index: 901; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(520px, 92vw); padding: 22px 24px;
    background: var(--mh-surface); border: 1px solid var(--mh-line);
    border-radius: 18px; box-shadow: var(--mh-shadow);
}
.mh-app .ie-modal h3 { margin: 0 0 8px; font-size: 17px; }
.mh-app .ie-modal p { font-size: 13px; color: var(--mh-muted); line-height: 1.55; margin: 0 0 10px; }

/* ---- narrow ------------------------------------------------------------- */
@media (max-width: 900px) {
    .mh-app .ie-body { grid-template-columns: 1fr; }
    .mh-app .ie-rail { flex-direction: row; flex-wrap: wrap; }
    .mh-app .ie-res { grid-template-columns: 1fr; }
}