/* B21.38-F — the unified Excel import flow (ExcelImportFlow) and the screens' «استيراد Excel» dialog (ExcelImportButton).
   The data centre's own classes (.dc-*) stay in app.css; only what the shared flow adds lives here. */

.modal.xi-modal{width:1040px;max-width:96vw;max-height:92vh;overflow:auto;padding:var(--s4) var(--s5)}
.xi-modal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s2)}
.xi-modal-head h3{margin:0;display:flex;align-items:center;gap:8px}
.xi-desc{margin:0 0 var(--s3);font-size:var(--fs-sm)}
.xi-types{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s2)}
.xi-type{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-2);background:var(--surface);color:var(--ink-2);
  border-radius:999px;padding:5px 12px;font:inherit;font-weight:700;font-size:var(--fs-sm);cursor:pointer}
.xi-type.on{border-color:var(--accent);background:var(--accent-50);color:var(--accent-700)}

.xi-columns{max-height:260px;overflow:auto;border:1px solid var(--border);border-radius:var(--r);margin-top:var(--s2)}
.xi-columns .xi-wrap{white-space:normal;line-height:1.6}

.xi-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--border);margin:var(--s3) 0 var(--s2)}
.xi-tab{border:0;background:none;font:inherit;font-weight:700;color:var(--muted);padding:8px 12px;cursor:pointer;
  border-bottom:3px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:6px}
.xi-tab.on{color:var(--accent-700);border-bottom-color:var(--accent)}
.xi-rej-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s2)}

.btn.xi-accepted{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--ink)}
.btn.xi-accepted:hover:not(:disabled){filter:brightness(.97)}

/* the sticky action bar of the preview, inside the scrolling dialog: above the tables' sticky headings, with a top rule */
.xi-flow .dc-confirm-bar{z-index:6;background:var(--bg);border-top:1px solid var(--border);padding:var(--s2) 0 4px;margin-top:var(--s2)}
.xi-modal .xi-flow .dc-confirm-bar{background:var(--surface)}

.xi-confirm{border:1px solid var(--accent);border-radius:var(--r);background:var(--surface);padding:var(--s3) var(--s4);margin-top:var(--s2);box-shadow:var(--sh-2)}
.xi-confirm h3{margin:0 0 var(--s2);font-size:var(--fs-lg)}

@media (max-width:700px){
  .modal.xi-modal{padding:var(--s3)}
  .xi-modal-head h3{font-size:var(--fs-md, 16px)}
  .xi-flow .dc-confirm-bar{position:static;border-top:0}
  .dc-confirm-bar .btn{flex:1 1 auto}
}