@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================================================
   TRENDSIC DYNAMICS - CONTACT IMPORT UPLOAD (CSV) - Signal design language
   Verbatim translation of docs/design/export/Contact Import Upload.dc.html into
   the real Durandal/Knockout ContactImportUpload module. Root class .cimp-root
   carries every design token as a CSS var; markup uses var(--x, fallback) so it
   degrades gracefully. Composed as a modal inside CRM (#modal_contact_upload).
   Reuses the EXISTING backend: POST v1/ContactImportUpload/{agentId} (CSV, one
   file, Dropzone) + app.trigger('contactList:update') on success.
   ============================================================================ */

.cimp-root {
    /* shared */
    --brand-50:#EEF1FE; --brand-100:#DDE3FD; --brand-200:#C2CCFB; --brand-400:#7B8FF3; --brand-500:#5E76EE;
    --brand-600:#4C63E6; --brand-700:#3D4FC9; --brand-800:#3340A0; --brand-900:#28297A;
    --brand-grad:linear-gradient(135deg,#5E76EE,#8A63E8);
    --success:#15A06B; --danger:#E04646; --warning:#EE8A2E; --gold:#D99B12; --purple:#8B5CF6; --info:#4C6EF5;
    --r-md:12px; --r-lg:16px;
    --e1:0 1px 2px rgba(20,25,55,.06); --e2:0 8px 28px rgba(20,25,55,.14);
    --ease:cubic-bezier(.2,.8,.2,1);

    /* light (default) */
    --bg:#F5F6FB; --surface:#FFFFFF; --surface-2:#FAFBFE; --border:#E5E8F2; --border-strong:#D2D7E6;
    --text:#1A1D2E; --text-2:#4A4F63; --muted:#767C92; --faint:#A2A7BC;
    --info-bg:#ECEFFB; --info-fg:#3D4FC9; --ok-bg:#E2F6EE; --ok-fg:#0E6B47;
    --warn-bg:#FCEEDD; --warn-fg:#B5651A; --gold-bg:#FBF1D6; --gold-fg:#8A6A0C;
    --bad-bg:#FCE7E7; --bad-fg:#B3262B; --bad-line:#F4D4D4;
    --pur-bg:#EFE9FD; --pur-fg:#6D45C9; --neutral-bg:#F1F2F6; --neutral-fg:#6B7080;

    font-family:'Plus Jakarta Sans',sans-serif;
    color:var(--text,#1A1D2E);
}

.cimp-root.dark {
    --bg:#0E1430; --surface:#161E3C; --surface-2:#1B2446; --border:#2A335C; --border-strong:#38436F;
    --text:#EEF1FB; --text-2:#B9C2E0; --muted:#8590B5; --faint:#6B7596;
    --info-bg:rgba(94,118,238,.16); --info-fg:#C2CCFB; --ok-bg:rgba(52,211,153,.15); --ok-fg:#5FE3B0;
    --warn-bg:rgba(238,138,46,.16); --warn-fg:#F0A961; --gold-bg:rgba(217,155,18,.16); --gold-fg:#F2C14E;
    --bad-bg:rgba(224,70,70,.16); --bad-fg:#F58A8A; --bad-line:rgba(224,70,70,.32);
    --pur-bg:rgba(139,92,246,.18); --pur-fg:#C3A8FB; --neutral-bg:rgba(255,255,255,.06); --neutral-fg:#8590B5;
}

.cimp-root *{box-sizing:border-box}

@keyframes ci-slide{from{transform:translateY(16px) scale(.98)}to{transform:translateY(0) scale(1)}}
@keyframes ci-spin{to{transform:rotate(360deg)}}
@keyframes ci-pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

.cimp-root .ci-act{transition:filter .14s,background .14s,border-color .14s,box-shadow .14s;cursor:pointer}
.cimp-root .ci-act:hover{filter:brightness(.98)}

/* ---- card shell ---------------------------------------------------------- */
.cimp-root .ci-card{
    width:540px;max-width:100%;background:var(--surface,#fff);
    border:1px solid var(--border,#E5E8F2);border-radius:var(--r-lg,16px);
    box-shadow:var(--e2,0 8px 28px rgba(20,25,55,.14));overflow:hidden;
    animation:ci-slide .24s cubic-bezier(.2,.8,.2,1);
}

/* ---- header -------------------------------------------------------------- */
.cimp-root .ci-head{display:flex;align-items:center;gap:11px;padding:17px 20px;border-bottom:1px solid var(--border,#E5E8F2)}
.cimp-root .ci-head-ico{width:32px;height:32px;border-radius:9px;background:var(--brand-50,#EEF1FE);color:var(--brand-600,#4C63E6);display:flex;align-items:center;justify-content:center;flex:none}
.cimp-root .ci-head-txt{flex:1;min-width:0}
.cimp-root .ci-title{font-size:16px;font-weight:800;color:var(--text,#1A1D2E)}
.cimp-root .ci-sub{font-size:12px;color:var(--muted,#767C92);margin-top:1px}
.cimp-root .ci-x{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--muted,#767C92);background:var(--surface-2,#FAFBFE);border:1px solid var(--border,#E5E8F2);font-size:15px;flex:none}

/* ---- body ---------------------------------------------------------------- */
.cimp-root .ci-body{padding:20px}
.cimp-root .ci-mono{font-family:'IBM Plex Mono',monospace;font-weight:600}
.cimp-root .ci-b{font-weight:700}

/* ---- idle dropzone (Dropzone target) ------------------------------------- */
.cimp-root .ci-dz{
    border:2px dashed var(--brand-200,#C2CCFB);background:var(--surface-2,#FAFBFE);
    border-radius:14px;transition:border-color .15s,background .15s;
    min-height:auto;padding:0;
}
.cimp-root .ci-dz.dz-drag-hover,
.cimp-root .ci-dz.dz-started.dz-drag-hover{border-color:var(--brand-500,#5E76EE);background:var(--brand-50,#EEF1FE)}
.cimp-root .ci-dz-inner{
    cursor:pointer;padding:38px 24px;display:flex;flex-direction:column;
    align-items:center;gap:12px;text-align:center;margin:0;
}
.cimp-root .ci-dz-ico{width:56px;height:56px;border-radius:16px;background:var(--brand-50,#EEF1FE);color:var(--brand-600,#4C63E6);display:flex;align-items:center;justify-content:center}
.cimp-root .ci-dz-title{font-size:15px;font-weight:800;color:var(--text,#1A1D2E)}
.cimp-root .ci-dz-hint{font-size:12.5px;color:var(--muted,#767C92);margin-top:4px}
.cimp-root .ci-choose{font:700 12.5px 'Plus Jakarta Sans';color:var(--brand-700,#3D4FC9);background:var(--brand-50,#EEF1FE);border:1px solid var(--brand-100,#DDE3FD);border-radius:10px;padding:9px 16px}
/* neutralize Dropzone's own preview/message chrome inside our styled zone */
.cimp-root .ci-dz .dz-preview,
.cimp-root .ci-dz .dz-default.dz-message{display:none}

/* ---- uploading ----------------------------------------------------------- */
.cimp-root .ci-uploading{border:1px solid var(--border,#E5E8F2);border-radius:14px;padding:18px 18px 20px}
.cimp-root .ci-file-row{display:flex;align-items:center;gap:13px}
.cimp-root .ci-file-ico{width:44px;height:44px;border-radius:11px;background:var(--brand-50,#EEF1FE);color:var(--brand-600,#4C63E6);display:flex;align-items:center;justify-content:center;flex:none}
.cimp-root .ci-file-meta{flex:1;min-width:0}
.cimp-root .ci-file-name{font-size:13.5px;font-weight:700;color:var(--text,#1A1D2E);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cimp-root .ci-file-size{font:500 11.5px 'IBM Plex Mono';color:var(--muted,#767C92);margin-top:2px}
.cimp-root .ci-spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--brand-100,#DDE3FD);border-top-color:var(--brand-600,#4C63E6);animation:ci-spin .7s linear infinite;flex:none}
.cimp-root .ci-bar{height:8px;border-radius:99px;background:var(--border,#E5E8F2);margin-top:14px;overflow:hidden}
.cimp-root .ci-bar-fill{display:block;height:100%;width:0;background:var(--brand-grad,linear-gradient(135deg,#5E76EE,#8A63E8));border-radius:99px;transition:width .2s}

/* ---- success ------------------------------------------------------------- */
.cimp-root .ci-success{border:1px solid var(--ok-bg,#E2F6EE);background:var(--ok-bg,#E2F6EE);border-radius:14px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center}
.cimp-root .ci-ok-ico{width:52px;height:52px;border-radius:15px;background:var(--surface,#fff);color:var(--ok-fg,#0E6B47);display:flex;align-items:center;justify-content:center;animation:ci-pop .3s cubic-bezier(.2,.8,.2,1)}
.cimp-root .ci-ok-title{font-size:15.5px;font-weight:800;color:var(--ok-fg,#0E6B47)}
.cimp-root .ci-ok-msg{font-size:13px;color:var(--text-2,#4A4F63)}
.cimp-root .ci-ok-count{font-weight:700}

/* ---- error --------------------------------------------------------------- */
.cimp-root .ci-error{border:1px solid var(--bad-line,#F4D4D4);background:var(--bad-bg,#FCE7E7);border-radius:14px;padding:18px;display:flex;align-items:flex-start;gap:12px}
.cimp-root .ci-err-ico{width:36px;height:36px;border-radius:10px;background:var(--surface,#fff);color:var(--bad-fg,#B3262B);display:flex;align-items:center;justify-content:center;flex:none;font-size:18px;font-weight:700}
.cimp-root .ci-err-txt{flex:1;min-width:0}
.cimp-root .ci-err-title{font-size:14px;font-weight:800;color:var(--bad-fg,#B3262B)}
.cimp-root .ci-err-msg{font-size:12.5px;color:var(--text-2,#4A4F63);margin-top:3px;line-height:1.5}

/* ---- template hint ------------------------------------------------------- */
.cimp-root .ci-hint-row{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;background:var(--surface-2,#FAFBFE);border:1px solid var(--border,#E5E8F2);border-radius:11px}
.cimp-root .ci-hint-ico{width:26px;height:26px;border-radius:8px;background:var(--info-bg,#ECEFFB);color:var(--info-fg,#3D4FC9);display:flex;align-items:center;justify-content:center;flex:none}
.cimp-root .ci-hint-txt{flex:1;min-width:0}
.cimp-root .ci-hint-title{font-size:12px;font-weight:700;color:var(--text,#1A1D2E)}
.cimp-root .ci-hint-cols{font:500 10.5px 'IBM Plex Mono';color:var(--muted,#767C92);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cimp-root .ci-tmpl{font:700 11.5px 'Plus Jakarta Sans';color:var(--brand-700,#3D4FC9);background:var(--surface,#fff);border:1px solid var(--brand-100,#DDE3FD);border-radius:8px;padding:6px 11px;white-space:nowrap}

/* ---- footer -------------------------------------------------------------- */
.cimp-root .ci-foot{display:flex;align-items:center;gap:10px;padding:15px 20px;border-top:1px solid var(--border,#E5E8F2);background:var(--surface-2,#FAFBFE)}
.cimp-root .ci-status{font:600 12px 'Plus Jakarta Sans';color:var(--muted,#767C92)}
.cimp-root .ci-foot-actions{margin-left:auto;display:flex;gap:10px}
.cimp-root .ci-btn-cancel{height:40px;padding:0 18px;font:700 13px 'Plus Jakarta Sans';color:var(--text-2,#4A4F63);background:var(--surface,#fff);border:1px solid var(--border-strong,#D2D7E6);border-radius:11px}
.cimp-root .ci-btn-primary{height:40px;padding:0 20px;font:700 13px 'Plus Jakarta Sans';color:#fff;background:var(--brand-600,#4C63E6);border:none;border-radius:11px;box-shadow:0 2px 8px rgba(76,99,230,.22)}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:600px){
    .cimp-root .ci-card{width:100%}
    .cimp-root .ci-body{padding:16px}
    .cimp-root .ci-dz-inner{padding:30px 16px}
    .cimp-root .ci-hint-row{flex-wrap:wrap}
    .cimp-root .ci-hint-txt{flex:1 1 100%;order:2}
    .cimp-root .ci-tmpl{order:3}
    .cimp-root .ci-foot{flex-wrap:wrap}
    .cimp-root .ci-foot-actions{width:100%;justify-content:flex-end}
}