/* EDI Integration Studio — industrial enterprise theme */
:root {
    --navy-900: #0f1b2d;
    --navy-800: #16263d;
    --navy-700: #1f3350;
    --navy-500: #3b5b84;
    --steel-100: #f3f5f8;
    --steel-200: #e6eaf0;
    --steel-400: #a9b4c2;
    --steel-600: #5d6b7e;
    --accent: #2f7dd1;
    --sidebar-w: 248px;
    --topbar-h: 58px;
    --bs-body-font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --bs-body-bg: var(--steel-100);
    --bs-primary: #2f7dd1;
    --bs-primary-rgb: 47, 125, 209;
    --bs-link-color: #2468b3;
    --bs-link-color-rgb: 36, 104, 179;
}
body { background: var(--steel-100); color: #1d2733; font-size: .92rem; }

.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
    width: var(--sidebar-w); background: var(--navy-900); color: #cfd8e3;
    position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; z-index: 1030;
    transition: transform .2s ease;
}
.brand { display: flex; align-items: center; gap: .65rem; padding: 1rem 1.1rem; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.06); }
.brand-mark { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), #1b4f8a); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.05rem; flex-shrink: 0; }
.brand-text strong { display: block; font-size: .9rem; line-height: 1.1; }
.brand-text small { color: var(--steel-400); font-size: .72rem; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: .5rem 0; }
.sidebar-nav .nav-item {
    display: flex; align-items: center; gap: .7rem; padding: .5rem 1.1rem; color: #b8c4d3;
    text-decoration: none; font-size: .86rem; border-left: 3px solid transparent;
}
.sidebar-nav .nav-item i { font-size: 1rem; width: 1.1rem; text-align: center; }
.sidebar-nav .nav-item:hover { background: var(--navy-800); color: #fff; }
.sidebar-nav .nav-item.active { background: var(--navy-700); color: #fff; border-left-color: var(--accent); }
.sidebar-footer { padding: .7rem 1.1rem; color: var(--steel-600); border-top: 1px solid rgba(255,255,255,.06); }

.app-main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
    height: var(--topbar-h); background: #fff; border-bottom: 1px solid var(--steel-200);
    display: flex; align-items: center; padding: 0 1.25rem; position: sticky; top: 0; z-index: 1020;
}
.topbar-search { position: relative; width: min(460px, 60vw); }
.topbar-search i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--steel-400); }
.topbar-search input { padding-left: 2.1rem; background: var(--steel-100); border-color: transparent; }
.topbar-search input:focus { background: #fff; }
.btn-icon { border: 0; background: transparent; color: var(--steel-600); font-size: 1.15rem; padding: .3rem .55rem; }
.notif-count { position: absolute; top: 0; right: 0; font-size: .6rem; }
.notif-menu { width: 320px; }
.btn-user { border: 0; background: transparent; display: flex; align-items: center; gap: .5rem; color: #1d2733; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--navy-700); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .8rem; }

.app-content { padding: 1.25rem 1.5rem 3rem; }
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.page-header h1 { font-size: 1.35rem; font-weight: 600; margin: 0; }
.page-header .subtitle { color: var(--steel-600); font-size: .85rem; }

.card { border: 1px solid var(--steel-200); border-radius: 10px; box-shadow: 0 1px 2px rgba(16,27,45,.04); }
.card-header { background: #fff; border-bottom: 1px solid var(--steel-200); font-weight: 600; font-size: .9rem; }
.stat-card .stat-label { color: var(--steel-600); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.stat-card .stat-icon { width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.tone-blue { background: #e8f1fb; color: #2468b3; }
.tone-green { background: #e6f4ec; color: #237a4b; }
.tone-red { background: #fbeaea; color: #b42d2d; }
.tone-amber { background: #fdf3e1; color: #a1660b; }
.tone-slate { background: #edf0f4; color: #4a5768; }

.table { --bs-table-bg: transparent; font-size: .86rem; }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--steel-600); font-weight: 600; background: #f8f9fb; border-bottom-width: 1px; white-space: nowrap; }
.table td { vertical-align: middle; }
.table-card .table { margin-bottom: 0; }
.status-badge { font-weight: 500; font-size: .72rem; }
.mono, code.x12 { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--steel-600); }
.empty-state i { font-size: 2rem; display: block; margin-bottom: .5rem; color: var(--steel-400); }
.help-tip { cursor: help; font-size: .8rem; }
.form-label { font-weight: 500; font-size: .84rem; margin-bottom: .25rem; }
.form-text { font-size: .76rem; }
.nav-tabs .nav-link { font-size: .86rem; color: var(--steel-600); }
.nav-tabs .nav-link.active { font-weight: 600; color: #1d2733; }
.kv dt { color: var(--steel-600); font-weight: 500; font-size: .8rem; }
.kv dd { margin-bottom: .6rem; }
.sample-flag { background: #fff4d6; color: #7a5300; border: 1px solid #f1d58a; font-size: .7rem; padding: .1rem .4rem; border-radius: 4px; font-weight: 600; }
pre.preview { background: #0f1b2d; color: #d6e2f0; padding: 1rem; border-radius: 8px; max-height: 520px; overflow: auto; font-size: .8rem; white-space: pre-wrap; word-break: break-all; }
.dropzone { border: 2px dashed var(--steel-400); border-radius: 10px; padding: 1.5rem; text-align: center; color: var(--steel-600); background: #fafbfc; cursor: pointer; transition: all .15s; }
.dropzone.dragover { border-color: var(--accent); background: #eef5fd; color: var(--accent); }
.wizard-steps { display: flex; gap: .5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.wizard-steps .step { flex: 1; min-width: 120px; padding: .55rem .75rem; border-radius: 8px; background: #fff; border: 1px solid var(--steel-200); font-size: .8rem; color: var(--steel-600); }
.wizard-steps .step.active { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.wizard-steps .step.done { background: #e6f4ec; color: #237a4b; border-color: #bfe3cd; }

.guest-body { background: radial-gradient(circle at 20% 0%, #1f3350, #0f1b2d 60%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.guest-wrap { width: 100%; max-width: 420px; }
.guest-wrap.wide { max-width: 760px; }
.guest-brand { display: flex; align-items: center; gap: .75rem; color: #fff; margin-bottom: 1.25rem; justify-content: center; }
.guest-brand strong { display: block; }
.guest-brand small { color: var(--steel-400); }
.guest-card { border: 0; border-radius: 12px; }

@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); }
    .app-sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.4); }
    .app-main { margin-left: 0; }
    .app-content { padding: 1rem; }
}

/* ---------- Visual Mapping Studio ---------- */
.studio { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.5rem; }
.studio-col { background: #fff; border: 1px solid var(--steel-200); border-radius: 10px; display: flex; flex-direction: column; min-height: 0; position: relative; z-index: 2; }
.studio-col-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .75rem; border-bottom: 1px solid var(--steel-200); font-weight: 600; font-size: .85rem; }
.studio-col-head input { max-width: 170px; }
.studio-scroll { overflow: auto; height: 62vh; padding: .35rem; }
.studio-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.studio-lines path { fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: .55; }
.studio-lines path.sel { stroke-width: 2.6; opacity: 1; }
.tree-loop > summary, .tree-seg > summary { list-style: none; cursor: pointer; padding: .2rem .35rem; border-radius: 6px; font-size: .82rem; }
.tree-loop > summary::-webkit-details-marker, .tree-seg > summary::-webkit-details-marker { display: none; }
.tree-loop > summary::before, .tree-seg > summary::before { content: '▸'; display: inline-block; width: 1em; color: var(--steel-400); transition: transform .1s; }
.tree-loop[open] > summary::before, .tree-seg[open] > summary::before { transform: rotate(90deg); }
.tree-loop > summary { font-weight: 600; color: var(--navy-700); }
.tree-children { margin-left: .9rem; border-left: 1px dashed var(--steel-200); padding-left: .3rem; }
.src-item, .tgt-item { display: flex; align-items: center; gap: .4rem; padding: .25rem .45rem; border-radius: 6px; font-size: .8rem; cursor: pointer; border: 1px solid transparent; user-select: none; }
.src-item:hover, .tgt-item:hover { background: var(--steel-100); }
.src-item.armed { background: #e8f1fb; border-color: var(--accent); }
.src-item .code, .tgt-item .code { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 600; font-size: .78rem; min-width: 3.4rem; }
.src-item .meta, .tgt-item .meta { margin-left: auto; color: var(--steel-600); font-size: .7rem; white-space: nowrap; }
.src-item.mapped .code { color: #237a4b; }
.req-m { color: #b42d2d; font-weight: 700; }
.tgt-item { border-color: var(--steel-200); margin-bottom: .3rem; background: #fff; }
.tgt-item.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(47,125,209,.15); }
.tgt-item.unmapped .src-summary { color: #a1660b; }
.tgt-item.dragover, .drop-new.dragover { background: #eef5fd; border-color: var(--accent); }
.src-summary { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .72rem; color: var(--steel-600); }
.tgt-actions { margin-left: auto; display: flex; gap: .15rem; opacity: .4; }
.tgt-item:hover .tgt-actions, .tgt-item.selected .tgt-actions { opacity: 1; }
.tgt-actions button { border: 0; background: transparent; padding: 0 .2rem; color: var(--steel-600); }
.drop-new { border: 1px dashed var(--steel-400); border-radius: 6px; padding: .5rem; text-align: center; font-size: .78rem; color: var(--steel-600); margin-top: .4rem; }
.seg-block { border: 1px solid var(--steel-200); border-radius: 8px; margin-bottom: .45rem; }
.seg-block > .seg-head { display: flex; align-items: center; gap: .4rem; padding: .3rem .5rem; background: #f8f9fb; border-bottom: 1px solid var(--steel-200); border-radius: 8px 8px 0 0; font-size: .8rem; cursor: pointer; }
.seg-block.selected > .seg-head { background: #e8f1fb; }
.seg-block .tgt-item { margin: .2rem .3rem; }
.props-section { border-top: 1px solid var(--steel-200); padding: .6rem 0 .3rem; margin-top: .4rem; }
.props-section > .ttl { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--steel-600); font-weight: 600; margin-bottom: .35rem; }
.rule-row, .cond-row { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; background: var(--steel-100); border-radius: 6px; padding: .3rem; margin-bottom: .3rem; }
.rule-row .form-control, .rule-row .form-select, .cond-row .form-control, .cond-row .form-select { font-size: .76rem; padding: .15rem .35rem; height: auto; width: auto; flex: 1 1 80px; min-width: 60px; }
.rule-row .op-label { font-weight: 600; font-size: .76rem; min-width: 70px; }
.info-grid { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; font-size: .76rem; }
.info-grid dt { color: var(--steel-600); font-weight: 500; }
@media (max-width: 1199.98px) { .studio { grid-template-columns: 1fr; gap: .75rem; } .studio-lines { display: none; } .studio-scroll { height: 45vh; } }
.chat-msg { white-space: pre-wrap; padding: .55rem .75rem; border-radius: 10px; margin-bottom: .5rem; font-size: .86rem; max-width: 92%; }
.chat-user { background: #e8f1fb; margin-left: auto; }
.chat-ai { background: var(--steel-100); border: 1px solid var(--steel-200); }
.ai-note { background: #f6f0ff; border: 1px solid #ddd0f7; border-radius: 8px; padding: .45rem .6rem; font-size: .76rem; margin-bottom: .5rem; }