/* ═══════════════════════════════════════════════════════
   ISP — Integration Suite for Payments
   Design token replication of isp-complete.html
═══════════════════════════════════════════════════════ */

/* ── Design Tokens ───────────────────────────────────────── */
:root {
  --p:       #0081A7;
  --s:       #00AFB9;
  --bg:      #FDFCDC;
  --w:       #FED9B7;
  --d:       #F07167;

  --p-dark:  #006485;
  --p-light: #E6F4F8;
  --p-mid:   rgba(0,129,167,0.12);
  --p-soft:  rgba(0,129,167,0.06);
  --s-light: rgba(0,175,185,0.12);
  --d-light: rgba(240,113,103,0.10);
  --w-light: rgba(254,217,183,0.5);

  --t1: #0A2530;
  --t2: rgba(10,37,48,0.60);
  --t3: rgba(10,37,48,0.38);
  --t4: rgba(10,37,48,0.20);

  --surface:  #FFFFFF;
  --surface2: #F7F6E8;
  --border:   rgba(0,129,167,0.13);
  --border2:  rgba(0,129,167,0.22);

  --r2: 4px; --r3: 6px; --r4: 8px; --r6: 10px;
  --r8: 14px; --r12: 20px; --r16: 24px;

  --sh1: 0 1px 3px rgba(0,129,167,0.08);
  --sh2: 0 3px 12px rgba(0,129,167,0.10),0 1px 3px rgba(0,129,167,0.06);
  --sh3: 0 8px 28px rgba(0,129,167,0.13),0 2px 6px rgba(0,129,167,0.07);

  --sb-bg:     #0a3447;
  --sb-hover:  rgba(255,255,255,0.08);
  --sb-active: rgba(0,175,185,0.18);
  --sb-border: rgba(255,255,255,0.10);
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height:100%; overflow:hidden; font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; line-height:1.5; background:var(--bg); color:var(--t1); }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:var(--surface2, #f0f0f0); }
::-webkit-scrollbar-thumb { background:rgba(0,129,167,0.35); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:rgba(0,129,167,0.55); }

/* ── App Shell ───────────────────────────────────────────── */
.isp-app { display:flex; height:100vh; overflow:hidden; }

/* ── Sidebar ─────────────────────────────────────────────── */
.isp-sb {
  width:236px; flex-shrink:0;
  background:var(--sb-bg);
  display:flex; flex-direction:column;
  overflow:hidden; position:relative; z-index:20;
  border-right:1px solid var(--sb-border);
}
.isp-sb::before {
  content:''; position:absolute; bottom:-80px; right:-80px;
  width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,175,185,.16) 0%,transparent 65%);
  pointer-events:none;
}
.isp-sb-banner { padding:10px 18px 8px; display:flex; align-items:center; background:#FDFCDC; border-bottom:1px solid var(--sb-border); }
.isp-sb-banner-img { width:100%; max-width:130px; height:auto; object-fit:contain; opacity:1; }
.isp-sb-logo { border-bottom:1px solid var(--sb-border); position:relative; z-index:1; }
.isp-sb-logo-row { display:flex; align-items:center; gap:10px; }
.isp-sb-mark {
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,var(--s),#a8f0f4);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,175,185,.35);
}
.isp-sb-mark span { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:13px; color:var(--sb-bg); letter-spacing:-.5px; }
.isp-sb-name { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:14px; color:#fff; line-height:1.15; }
.isp-sb-sub  { font-size:9px; color:rgba(255,255,255,.45); letter-spacing:.1em; text-transform:uppercase; margin-top:1px; }
.isp-sb-sec  { padding:16px 18px 4px; font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.38); font-family:'JetBrains Mono',monospace; position:relative; z-index:1; }
.isp-sb-item {
  display:flex; align-items:center; gap:9px;
  padding:8px 18px; cursor:pointer;
  color:rgba(255,255,255,.62); font-size:12.5px; font-weight:400;
  transition:all .15s; position:relative; z-index:1; user-select:none;
  text-decoration:none;
}
.isp-sb-item:hover { background:var(--sb-hover); color:rgba(255,255,255,.92); }
.isp-sb-item.active {
  background:var(--sb-active); color:#fff; font-weight:600;
}
.isp-sb-item.active::before {
  content:''; position:absolute; left:0; top:5px; bottom:5px;
  width:3px; background:var(--s); border-radius:0 3px 3px 0;
}
.isp-sb-ico { width:16px; height:16px; display:flex; align-items:center; justify-content:center; opacity:.75; flex-shrink:0; color:inherit; }
.isp-sb-ico svg { fill:currentColor; width:14px; height:14px; }
.isp-sb-item.active .isp-sb-ico { opacity:1; }
.isp-sb-pill {
  margin-left:auto; padding:2px 8px;
  background:var(--d); color:#fff;
  font-size:10px; font-weight:700; border-radius:20px;
  font-family:'JetBrains Mono',monospace;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; line-height:1;
  flex-shrink:0;
}
.isp-sb-foot { margin-top:auto; padding:12px 18px; border-top:1px solid var(--sb-border); position:relative; z-index:1; }
.isp-sb-user { display:flex; align-items:center; gap:9px; }
.isp-sb-user-click { cursor:pointer; padding:6px 8px; margin:-6px -8px; border-radius:var(--r4); transition:background .15s; }
.isp-sb-user-click:hover { background:rgba(255,255,255,.08); }
.isp-sb-avatar {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--w),var(--d));
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff;
}
.isp-sb-uname { font-size:12px; font-weight:600; color:rgba(255,255,255,.85); }
.isp-sb-urole { font-size:10px; color:rgba(255,255,255,.45); margin-top:1px; }
.isp-sb-engine {
  margin-top:9px; padding:6px 10px;
  background:rgba(0,175,185,.12); border-radius:var(--r3);
  display:flex; align-items:center; gap:7px;
  font-size:10px; color:var(--s); font-family:'JetBrains Mono',monospace; font-weight:500;
}
.isp-pulse {
  width:7px; height:7px; border-radius:50%; background:var(--s); flex-shrink:0;
  animation:isp-pulse 2.2s infinite;
}
@keyframes isp-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(0,175,185,.5); }
  50%      { box-shadow:0 0 0 4px rgba(0,175,185,.1); }
}

/* ── Main ────────────────────────────────────────────────── */
.isp-main { flex:1; display:flex; flex-direction:column; overflow:hidden; }

/* ── AppBar ──────────────────────────────────────────────── */
.isp-appbar {
  height:52px; flex-shrink:0;
  background:var(--p);
  display:flex; align-items:center; padding:0 20px; gap:12px;
  box-shadow:0 2px 12px rgba(0,129,167,.35); z-index:15;
}
.isp-ab-bc { display:flex; align-items:center; gap:6px; font-size:12px; color:rgba(255,255,255,.75); }
.isp-ab-mark   { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:22px; padding:0 6px; border-radius:5px; background:var(--s); margin-right:8px; flex-shrink:0; }
.isp-ab-mark span { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:10px; color:#fff; letter-spacing:.3px; }
.isp-ab-home   { color:rgba(255,255,255,.70); font-weight:500; }
.isp-ab-sep    { color:rgba(255,255,255,.35); font-size:11px; }
.isp-ab-active { color:#fff !important; font-weight:700; font-size:13px; }
.isp-ab-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.isp-ab-status {
  display:flex; align-items:center; gap:6px;
  font-size:10.5px; color:rgba(255,255,255,.8);
  font-family:'JetBrains Mono',monospace;
  background:rgba(255,255,255,.1); padding:4px 10px; border-radius:20px;
}
.isp-ab-pulse { width:6px; height:6px; border-radius:50%; background:#a8f5f5; animation:isp-pulse 2s infinite; }
.isp-appbar-btn { color:#fff !important; border-color:rgba(255,255,255,.45) !important; background:rgba(255,255,255,.18) !important; font-weight:600 !important; }
.isp-appbar-btn:hover { background:rgba(255,255,255,.28) !important; border-color:rgba(255,255,255,.7) !important; }
.isp-ab-entity-logo { height:28px; max-width:160px; object-fit:contain; }

/* ── Content ─────────────────────────────────────────────── */
.isp-content { flex:1; overflow:hidden; display:flex; flex-direction:column; }

/* ── Page Header ─────────────────────────────────────────── */
.isp-ph {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:16px 18px 0; flex-shrink:0;
  box-shadow:var(--sh1);
}
.isp-ph-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px; }
.isp-ph-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:22px; font-weight:700; color:var(--t1); }
.isp-ph-sub   { font-size:11.5px; color:var(--t2); margin-top:2px; }
.isp-ph-acts  { display:flex; align-items:flex-end; gap:8px; flex-shrink:0; padding-top:2px; }

/* TabStrip override */
.isp-tabstrip { margin-bottom:-1px; }
.isp-tabstrip .k-tabstrip-items-wrapper { border-bottom:none; }
.isp-tabstrip .k-item.k-active .k-link { color:var(--p); border-bottom:2px solid var(--p); }
.isp-tabstrip > .k-content,
.isp-tabstrip > .k-tabstrip-content { display:none !important; }

/* ── Dashboard Body ──────────────────────────────────────── */
.isp-dash-body {
  flex:1; overflow:auto; padding:12px 18px 14px;
  display:flex; flex-direction:column; gap:12px;
}

/* ── Stat Row ────────────────────────────────────────────── */
.isp-stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; flex-shrink:0; }

.isp-stat-card {
  background:var(--surface); border-radius:var(--r8);
  border:1.5px solid var(--border);
  padding:14px 16px; position:relative; overflow:hidden;
  cursor:pointer; transition:all .18s;
  box-shadow:var(--sh1);
  display:flex; flex-direction:column; gap:2px;
}
.isp-stat-card:hover { transform:translateY(-2px); box-shadow:var(--sh3); }
.isp-stat-card.cp:hover { border-color:var(--p); }
.isp-stat-card.cs:hover { border-color:var(--s); }
.isp-stat-card.cw:hover { border-color:var(--w); }
.isp-stat-card.cd:hover { border-color:var(--d); }
.isp-sc-ico  { font-size:18px; margin-bottom:4px; }
.isp-sc-lbl  { font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); font-family:'JetBrains Mono',monospace; }
.isp-sc-val  { font-family:'Plus Jakarta Sans',sans-serif; font-size:28px; font-weight:700; color:var(--t1); margin:2px 0; }
.isp-sc-trend { font-size:10.5px; color:var(--t2); }
.isp-sc-trend.trend-up { color:#1a7a3c; }
.isp-sc-trend.trend-dn { color:var(--d); }
.trend-up { color:#1a7a3c; }
.trend-dn  { color:var(--d); }
.isp-sc-nav {
  font-size:9px; font-family:'JetBrains Mono',monospace;
  color:var(--p); margin-top:auto; padding-top:6px;
  opacity:0; transition:opacity .15s;
}
.isp-stat-card:hover .isp-sc-nav { opacity:1; }

/* ── Charts ──────────────────────────────────────────────── */
.isp-chart-row { display:flex; gap:12px; flex-shrink:0; }
.isp-chart-card {
  background:var(--surface); border-radius:var(--r8);
  border:1.5px solid var(--border); padding:14px 16px;
  box-shadow:var(--sh1);
}
.isp-chart-hdr  { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.isp-chart-ttl  { font-size:12px; font-weight:700; color:var(--t1); }
.isp-legend     { display:flex; gap:10px; }
.isp-leg-i      { display:flex; align-items:center; gap:5px; font-size:10px; color:var(--t2); }
.isp-leg-d      { width:8px; height:8px; border-radius:2px; }

/* ── Grid Card ───────────────────────────────────────────── */
.isp-gc {
  background:var(--surface); border-radius:var(--r8);
  border:1.5px solid var(--border); overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--sh1);
}
.isp-gc > .k-grid { flex:1; min-height:0; overflow:hidden; }
.isp-gc-bar {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; border-bottom:1px solid var(--border);
  background:var(--surface2); flex-shrink:0;
}
.isp-gc-title { font-size:12px; font-weight:700; color:var(--t1); }
.isp-gc-acts  { margin-left:auto; display:flex; gap:6px; align-items:center; }
.dash-grid    { flex:1; min-height:0; }

/* ── Split Panels ────────────────────────────────────────── */
.isp-split {
  flex:1; overflow:hidden; display:flex; gap:0;
  padding:12px 18px 14px; gap:12px;
}
/* Splitter-hosted version (replaces isp-split) */
.isp-split-host {
  flex:1; overflow:hidden; display:flex; flex-direction:column;
  padding:0;
}
.isp-sp-l {
  height:100%; display:flex; flex-direction:column;
  background:var(--surface);
  overflow:hidden;
  border-right: 1.5px solid var(--border);
}
.isp-sp-r {
  height:100%; display:flex; flex-direction:column;
  background:var(--surface);
  overflow:hidden;
}

/* ── File List Items ─────────────────────────────────────── */
.isp-file-list { flex:1; overflow-y:auto; padding:4px 0; }
.isp-fi {
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; cursor:pointer; transition:background .12s;
  border-bottom:1px solid var(--border);
}
.isp-fi:hover { background:var(--p-soft); }
.isp-fi.sel   { background:var(--p-mid); border-left:3px solid var(--p); }
.isp-fi-thumb {
  width:34px; height:34px; border-radius:var(--r4); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:16px;
  background:var(--surface2); border:1px solid var(--border);
}
.isp-fi-thumb.sepa  { background:#E6F4F8; }
.isp-fi-thumb.bulk  { background:#FFF3E0; }
.isp-fi-thumb.swift { background:#F3F0FF; }
.isp-fi-info { flex:1; min-width:0; overflow:hidden; }
.isp-fi-name { font-size:11.5px; font-weight:600; color:var(--t1); font-family:'JetBrains Mono',monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.isp-fi-meta { font-size:10px; color:var(--t2); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.isp-fi-r    { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; max-width:80px; }
.isp-fi-size { font-size:10px; color:var(--t3); font-family:'JetBrains Mono',monospace; white-space:nowrap; }

/* ── File Detail Header ──────────────────────────────────── */
.isp-dh {
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--border);
  background:var(--surface2); flex-shrink:0;
}
.isp-dh-ico  { font-size:28px; flex-shrink:0; padding-top:2px; }
.isp-dh-name { font-size:13px; font-weight:700; color:var(--t1); font-family:'JetBrains Mono',monospace; }
.isp-dh-meta { display:flex; gap:10px; font-size:10.5px; color:var(--t2); margin-top:3px; flex-wrap:wrap; }
.isp-dh-acts { margin-left:auto; display:flex; gap:6px; flex-shrink:0; }
.isp-dh-lbl  { font-size:9.5px; font-weight:600; text-transform:uppercase; color:var(--t3); letter-spacing:.3px; margin-right:3px; }
.isp-dh-lbl::after { content:":"; }
.isp-dh-sep  { color:var(--border); font-size:13px; margin:0 2px; user-select:none; }

/* ── Stat Strip ──────────────────────────────────────────── */
.isp-ss   { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-bottom:1px solid var(--border); flex-shrink:0; }
.isp-sc   { padding:10px 14px; border-right:1px solid var(--border); }
.isp-sc:last-child { border-right:none; }
.isp-sc.cp { background:var(--p-soft); }
.isp-sc.cs { background:var(--s-light); }
.isp-sc.cw { background:var(--w-light); }
.isp-sc.cd { background:var(--d-light); }
.isp-sc-l  { font-size:8.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); }
.isp-sc-v  { font-family:'Plus Jakarta Sans',sans-serif; font-size:20px; font-weight:700; color:var(--t1); }
.isp-sc-s  { font-size:9.5px; color:var(--t2); margin-top:1px; }

/* ── Sub-grid ────────────────────────────────────────────── */
.isp-sub-tbl { padding:10px 14px; background:var(--surface2); }
.isp-sub-hdr { font-size:11px; font-weight:600; color:var(--t1); margin-bottom:8px; }
.isp-grid-sub .k-grid { border-radius:var(--r3); }

/* ── Engine Body ─────────────────────────────────────────── */
.isp-engine-body {
  flex:1; overflow:hidden; padding:12px 18px 14px;
  display:flex; flex-direction:column; gap:12px;
}

/* ── Empty State ─────────────────────────────────────────── */
.isp-empty {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  text-align:center; padding:40px;
}
.isp-empty-ico { font-size:40px; opacity:.35; }
.isp-empty-t   { font-size:14px; font-weight:600; color:var(--t2); }
.isp-empty-b   { font-size:12px; color:var(--t3); max-width:300px; }

/* ── Status Badges ───────────────────────────────────────── */
.isp-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:20px;
  font-size:10px; font-weight:700; letter-spacing:.02em;
  font-family:'JetBrains Mono',monospace;
}
.ba-proc { background:#dcf5e7; color:#1a7a3c; border:1px solid #b2e0c3; }
.ba-rej  { background:#fde8e6; color:#c0392b; border:1px solid #f5c6c2; }
.ba-pend { background:#fff3cd; color:#856404; border:1px solid #ffd974; }
.ba-bulk { background:#e3f2fd; color:#1565c0; border:1px solid #90caf9; }
.ba-deb  { background:#f3e5f5; color:#6a1b9a; border:1px solid #ce93d8; }
.ba-fail { background:#fde8e6; color:#922; border:1px solid #e0a9a5; }
.ba-instrm { background:#e8eaf6; color:#283593; border:1px solid #9fa8da; }

.isp-error-code { color:#c0392b; cursor:help; display:flex; flex-direction:column; gap:2px; }
.isp-error-desc { font-size:10px; font-weight:400; color:var(--t2); font-style:italic; }

/* ── Mandate Status Pills ────────────────────────────────── */
.mndt-status-pills { display:flex; flex-wrap:wrap; gap:6px; }
.mndt-status-pill { display:flex; align-items:center; gap:6px; padding:4px 10px; background:var(--surface); border:1px solid var(--border); border-radius:20px; cursor:pointer; font-size:11.5px; font-weight:600; color:var(--t2); transition:all .15s; }
.mndt-status-pill:hover { border-color:var(--border2); background:var(--surface2); }
.mndt-status-pill--on { border-color:var(--p); background:var(--p-mid); color:var(--p); }

/* ── Mandate Edit Form ──────────────────────────────────── */
.isp-fieldset { border:1px solid var(--border); border-radius:var(--r4); padding:12px 14px; margin-bottom:12px; }
.isp-fieldset legend { font-size:11px; font-weight:700; color:var(--t2); text-transform:uppercase; letter-spacing:.3px; padding:0 6px; }
.isp-form-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.isp-form-row > .k-input,
.isp-form-row > .k-picker,
.isp-form-row > .k-dropdownlist { flex:1; min-width:0; }
.isp-form-lbl { font-size:11.5px; font-weight:600; color:var(--t2); width:140px; flex-shrink:0; }
.isp-req::after { content:" *"; color:#c0392b; font-weight:700; }
.isp-toggle-grp { display:flex; gap:0; border:1px solid var(--border); border-radius:var(--r4); overflow:hidden; }
.isp-toggle-btn { padding:5px 12px; font-size:11px; font-weight:600; color:var(--t2); background:var(--surface); border:none; border-right:1px solid var(--border); cursor:pointer; transition:all .15s; white-space:nowrap; }
.isp-toggle-btn:last-child { border-right:none; }
.isp-toggle-btn:hover { background:var(--surface2); }
.isp-toggle-btn.active { background:var(--p); color:#fff; }
.mndt-status-n { font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700; }

/* ── Type Chip ───────────────────────────────────────────── */
.isp-type-chip {
  display:inline-block; padding:2px 7px; border-radius:var(--r3);
  background:var(--p-mid); color:var(--p);
  font-size:10px; font-weight:700; font-family:'JetBrains Mono',monospace;
}

/* ── Amount display ──────────────────────────────────────── */
.isp-amt { display:flex; align-items:center; gap:3px; font-weight:600; }
.isp-ccy { font-size:9px; font-weight:700; color:var(--t3); font-family:'JetBrains Mono',monospace; }

/* ── Mono ────────────────────────────────────────────────── */
.isp-mono { font-family:'JetBrains Mono',monospace; }

/* ── Drawer / Window content ─────────────────────────────── */
.isp-dr-body { padding:6px 6px 0; display:flex; flex-direction:column; gap:12px; overflow-y:auto; height:100%; box-sizing:border-box; }
.isp-ds      { border:1.5px solid var(--border); border-radius:var(--r6);}
.isp-ds-h    { padding:7px 12px; background:var(--surface2); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); border-bottom:1px solid var(--border); }
.isp-ds-r    { display:flex; align-items:flex-start; justify-content:space-between; padding:7px 12px; border-bottom:1px solid var(--border); gap:10px; min-width:0; }
.isp-ds-r:last-child { border-bottom:none; }
.isp-ds-k    { font-size:11px; color:var(--t2); min-width:110px; flex-shrink:0; }
.isp-ds-v    { font-size:11.5px; font-weight:600; color:var(--t1); text-align:right; word-break:break-all; min-width:0; }
.isp-ds-wrap { white-space:normal; word-break:break-all; font-size:10px !important; line-height:1.4; max-width:240px; }
.isp-ds-big  { font-family:'Plus Jakarta Sans',sans-serif; font-size:18px; font-weight:700; color:var(--t1); }

/* ── Filter Banner ───────────────────────────────────────── */
.isp-filter-banner {
  display:flex; align-items:center; gap:10px;
  padding:7px 18px; flex-shrink:0;
  background:var(--p-light); border-bottom:1px solid var(--p-mid);
  font-size:11.5px; color:var(--p); font-weight:500;
}
.isp-filter-clear { margin-left:auto; }

/* ── Telerik Grid ISP override ───────────────────────────── */
.isp-grid .k-grid-header { background:var(--surface2) !important; }
.isp-grid .k-grid-header th { font-size:11px !important; font-weight:700 !important; color:var(--t2) !important; letter-spacing:.04em; text-transform:uppercase; font-family:'JetBrains Mono',monospace; }
.isp-grid .k-grid-content tr:hover > td { background:var(--p-soft) !important; }
.isp-grid .k-grid-content tr.k-selected > td { background:var(--p-mid) !important; }
.isp-grid .k-grid-pager { background:var(--surface2) !important; border-top:1px solid var(--border) !important; }
.isp-grid .k-grid-toolbar { background:var(--surface2) !important; border-bottom:1px solid var(--border) !important; }
.isp-grid td { font-size:12px !important; padding:7px 12px !important; border-bottom:1px solid var(--border) !important; }
.isp-grid .k-filter-row td { background:var(--surface) !important; }
.isp-grid .k-group-header td { background:var(--p-light) !important; font-weight:700 !important; font-size:11px !important; }

/* Telerik Button – primary: use ISP teal */
.k-button-solid-primary { background:var(--p) !important; border-color:var(--p) !important; }
.k-button-solid-primary:hover { background:var(--p-dark) !important; }

/* Telerik Tabs */
.k-tabstrip .k-item.k-active .k-link { color:var(--p) !important; border-bottom-color:var(--p) !important; }
.k-tabstrip .k-link:hover { color:var(--p) !important; }

/* ── Config page ─────────────────────────────────────────── */
.isp-config-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:900px; }
.isp-config-card { padding:16px 18px; }
.isp-ch-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0; border-bottom:1px solid var(--border);
}
.isp-ch-row:last-child { border-bottom:none; }
.isp-ch-name { font-size:12px; font-weight:600; }

/* ── Progress bar thin ───────────────────────────────────── */
.k-progressbar { height:6px !important; border-radius:3px !important; }
.k-progressbar .k-selected { background:var(--s) !important; }

/* ── Switch ──────────────────────────────────────────────── */
.k-switch-on .k-switch-thumb-wrap { background:var(--p) !important; }
.k-switch-on .k-switch-track { background:var(--p-mid) !important; border-color:var(--p) !important; }

/* ── Spacer in toolbar ───────────────────────────────────── */
.k-toolbar-spacer { flex:1; }

/* ── Page Error Boundary ─────────────────────────────────── */
.isp-err-boundary {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px;
  flex: 1; padding: 48px 32px; text-align: center;
  background: var(--surface); margin: 16px;
  border-radius: var(--r8); border: 1.5px solid #f5c6c2;
  box-shadow: var(--sh2);
}
.isp-err-icon  { font-size: 40px; }
.isp-err-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 20px; font-weight: 700; color: var(--d); }
.isp-err-msg   { font-size: 13px; color: var(--t2); max-width: 560px; line-height: 1.6;
                  background: var(--d-light); border: 1px solid #f5c6c2;
                  border-radius: var(--r4); padding: 10px 16px; font-family: 'JetBrains Mono', monospace; }
.isp-err-stack { font-size: 10.5px; color: var(--t2); background: #1e1e1e; color: #d4d4d4;
                  border-radius: var(--r4); padding: 14px 18px; text-align: left;
                  max-width: 720px; width: 100%; overflow-x: auto; line-height: 1.6;
                  font-family: 'JetBrains Mono', monospace; white-space: pre-wrap; }
.isp-err-actions { display: flex; gap: 10px; }
.isp-err-btn   { display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px;
                  border-radius: var(--r4); font-size: 12.5px; font-weight: 600;
                  cursor: pointer; border: 1.5px solid; transition: all .15s; font-family: inherit; }
.isp-err-btn-p { background: var(--p); color: #fff; border-color: var(--p); }
.isp-err-btn-p:hover { background: var(--p-dark); border-color: var(--p-dark); }
.isp-err-btn-g { background: var(--surface); color: var(--t1); border-color: var(--border2); }
.isp-err-btn-g:hover { background: var(--surface2); }

/* ── Period Banner (Dashboard tabs) ─────────────────────────── */
.isp-period-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  margin: 0;
  background: rgba(var(--p-rgb, 0,129,167), .06);
  border-left: 3px solid var(--p);
  border-radius: var(--r2);
  font-size: 11.5px;
}
.isp-period-label {
  font-weight: 700;
  color: var(--p);
  font-size: 12px;
}
.isp-period-range {
  color: var(--t2);
  font-size: 11px;
}

/* ── Detail TabStrip (shared by Files, Exceptions, Mandates) ── */
.exc-tabs { flex:1; overflow:hidden; display:flex; flex-direction:column; }
.exc-tabs .k-tabstrip-content { flex:1; overflow:hidden; }
.exc-tab-scroll { height:100%; overflow-y:auto; padding:16px 20px; }

/* ── XML Viewer ──────────────────────────────────────────────── */
.isp-xml-viewer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.6;
  color: #2d3748;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  padding: 0;
}

/* ── Reference Section in detail panels ─────────────────────── */
.isp-ds-ref {
  border: 1.5px dashed rgba(var(--p-rgb, 0,129,167), .35) !important;
  background: rgba(var(--p-rgb, 0,129,167), .04);
  border-radius: var(--r2);
}
.isp-ds-ref .isp-ds-h {
  color: var(--p) !important;
}


/* ── Count Chips (inline badge replacement) ──────────────── */
.isp-count-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  background: var(--border);
  color: var(--t2);
  letter-spacing: .02em;
  white-space: nowrap;
}
.isp-count-chip-info {
  background: rgba(0,129,167,.12);
  color: var(--p);
}


/* ── Engine pages (full-height splitter layout) ──────────── */

/*
 * TelerikSplitter requires a concrete pixel height on its parent — it will not
 * size itself from flex:1 alone. The wrapper height is set as a CSS var driven
 * from @code so it responds to window resize. Fallback: calc(100vh - 140px).
 */
.isp-engine-split-wrapper {
  height: var(--engine-h, calc(100vh - 140px));
  min-height: 300px;
  overflow: hidden;
  display: block;       /* block, not flex — splitter manages its own layout */
}

/* Splitter fills wrapper exactly */
.isp-engine-split-wrapper > .k-splitter {
  width:  100% !important;
  height: 100% !important;
}

/* Every k-pane produced by TelerikSplitter must propagate height */
.isp-engine-split-wrapper .k-pane {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* isp-gc card inside a pane: fill it completely */
.isp-engine-split-wrapper .k-pane > .isp-gc {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Loading state */
.isp-engine-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--engine-h, calc(100vh - 140px));
  min-height: 200px;
}

/* ── Inner tabstrip inside a splitter pane ───────────────── */
/*
 * TelerikTabStrip renders as:
 *   .k-tabstrip
 *     .k-tabstrip-items-wrapper   ← tab bar (fixed height)
 *     .k-tabstrip-content         ← active panel (must fill rest)
 *       <child content>
 */
.isp-tabstrip-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.isp-tabstrip-inner .k-tabstrip-items-wrapper {
  flex-shrink: 0;
}

.isp-tabstrip-inner .k-tabstrip-content {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  /* make children able to fill this panel */
  display: flex;
  flex-direction: column;
}

/* isp-gc directly inside a tab content panel */
.isp-tabstrip-inner .k-tabstrip-content > .isp-gc {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/*
 * Nested horizontal TelerikSplitter inside the Parts & Correlations tab.
 * It also needs a concrete height — we use 100% since the parent
 * .k-tabstrip-content is now a flex column that stretches.
 */
.isp-tabstrip-inner .k-tabstrip-content > .k-splitter {
  flex: 1 1 0;
  min-height: 0;
  width:  100% !important;
  height: 100% !important;
}

/* isp-gc inside panes of the nested splitter */
.isp-tabstrip-inner .k-splitter .k-pane > .isp-gc {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Selected-row indicator badge in grid toolbar ──────────── */
.isp-gc-sel-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 4px;
  background: var(--surface2);
  border-radius: var(--r6);
  border: 1px solid var(--border);
  max-width: 340px;
  overflow: hidden;
}

/* ── Sidebar navigation tree ─────────────────────────────── */

/* Scrollable nav region between logo and footer */
.isp-sb-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 8px;
  position: relative;
  z-index: 1;
}
.isp-sb-nav::-webkit-scrollbar { width: 3px; }
.isp-sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }

.isp-sb-nav-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}

/* ── Level-0 group header (clickable section title) ─────── */
.isp-nav-group {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 18px 4px;
  cursor: pointer;
  user-select: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  font-family: 'JetBrains Mono', monospace;
  transition: color .15s;
  position: relative;
}
.isp-nav-group:hover {
  color: rgba(255,255,255,.72);
  background: var(--sb-hover);
}
.isp-nav-group-active {
  color: rgba(0,175,185,.75) !important;
}
.isp-nav-group-ico {
  font-size: 11px;
  opacity: .65;
  flex-shrink: 0;
}
.isp-nav-group-txt {
  flex: 1;
}

/* ── Chevron indicator ───────────────────────────────────── */
.isp-nav-chevron {
  font-size: 13px;
  color: rgba(255,255,255,.35);
  transition: transform .18s, color .18s;
  display: inline-block;
  line-height: 1;
  transform: rotate(0deg);
}
.isp-nav-chevron.open {
  transform: rotate(90deg);
  color: rgba(255,255,255,.6);
}

/* ── Children container (L1) ────────────────────────────── */
.isp-nav-children {
  /* subtle left-border indent */
  border-left: 1px solid rgba(255,255,255,.06);
  margin-left: 26px;
}

/* ── Grandchildren container (L2) ───────────────────────── */
.isp-nav-grandchildren {
  border-left: 1px solid rgba(255,255,255,.07);
  margin-left: 26px;
}

/* ── L1 items ───────────────────────────────────────────── */
.isp-nav-l1 {
  font-size: 12px !important;
  padding: 7px 16px !important;
  color: rgba(255,255,255,.78) !important;
}
.isp-nav-l1:hover {
  color: rgba(255,255,255,.95) !important;
}
.isp-nav-l1.active {
  color: #fff !important;
  background: var(--sb-active) !important;
  font-weight: 600 !important;
}
/* L1 that is an expandable group (has children) */
.isp-nav-expandable {
  cursor: pointer;
}
.isp-nav-l1-active {
  color: rgba(255,255,255,.82) !important;
}
.isp-nav-label {
  flex: 1;
}

/* ── L2 items ───────────────────────────────────────────── */
.isp-nav-l2 {
  font-size: 11.5px !important;
  padding: 6px 14px !important;
  color: rgba(255,255,255,.82) !important;
  gap: 8px !important;
}
.isp-nav-l2:hover {
  color: #fff !important;
}
.isp-nav-l2.active {
  color: #fff !important;
  background: var(--sb-active) !important;
  font-weight: 600 !important;
}
.isp-nav-l2-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--s);
  flex-shrink: 0;
  margin-left: 2px;
  opacity: .85;
  box-shadow: 0 0 4px rgba(0,175,185,.5);
}
.isp-nav-l2.active .isp-nav-l2-dot {
  background: var(--s);
  opacity: 1;
  box-shadow: 0 0 6px var(--s);
}

/* ── L0 direct link (root leaf, no children) ────────────── */
.isp-nav-l0 {
  font-size: 12.5px;
}

/* ── Queue filter banner ─────────────────────────────────── */
.isp-queue-banner {
  background: linear-gradient(90deg, rgba(0,129,167,.06), rgba(0,175,185,.04));
  border-left: 3px solid var(--s);
}
.isp-queue-clause {
  font-size: 10px;
  color: var(--t3);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 1px 6px;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Sidebar logo as NavLink ────────────────────────── */
.isp-sb-logo-link {
  display: block;
  text-decoration: none;
  padding: 0;
  border-bottom: 1px solid var(--sb-border);
  position: relative;
  z-index: 1;
  transition: background .15s;
}
.isp-sb-logo-link *,
.isp-sb-logo-link:hover *,
.isp-sb-logo-link:visited * {
  text-decoration: none;
}
.isp-sb-logo-link:hover {
  background: var(--sb-hover);
}
/* Override NavLink active style — logo should never show the left-bar active state */
.isp-sb-logo-link.active,
.isp-sb-logo-link:focus {
  background: transparent;
  outline: none;
}
.isp-sb-logo-link.active::before { display: none; }

/* ══════════════════════════════════════════════════════════
   Annual Volume Page
══════════════════════════════════════════════════════════ */

.av-body { gap: 10px; }

/* KPI row — 4 cards, slightly taller */
.av-kpi-row .isp-stat-card { cursor: default; }
.av-kpi-row .isp-stat-card:hover { transform: none; }
.av-peak-val { font-size: 18px !important; padding-top: 4px; }

/* Charts row */
.av-chart-row { align-items: stretch; }

/* Detail row: country panel + grid side by side */
.av-detail-row {
  display: flex;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Country panel */
.av-country-panel {
  width: 200px;
  flex-shrink: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Country filter pills */
.av-pill-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.av-pill {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  color: var(--t2);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.av-pill:hover { border-color: var(--p); color: var(--p); }
.av-pill-active {
  background: var(--p);
  border-color: var(--p);
  color: #fff;
}

/* Sparkline bars */
.av-spark-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.av-spark-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--t1);
  width: 32px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.av-spark-val {
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--t3);
  width: 38px;
  text-align: right;
  flex-shrink: 0;
}
.av-spark-bar-wrap {
  flex: 1;
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.av-spark-bar {
  height: 100%;
  background: var(--p);
  border-radius: 3px;
  transition: width .3s ease;
}

/* In/Out ratio bar inside grid */
.av-ratio-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--border);
  gap: 1px;
}
.av-ratio-in  { background: var(--p); height: 100%; transition: width .2s; }
.av-ratio-out { background: var(--s); height: 100%; transition: width .2s; }

/* ══════════════════════════════════════════════════════════
   Daily Overview Pages  (.isp-do-*)
══════════════════════════════════════════════════════════ */

.isp-do-body {
  flex: 1; overflow: auto;
  padding: 12px 18px 14px;
  display: flex; flex-direction: column; gap: 10px;
}

/* Date-range toolbar */
.isp-do-toolbar {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r8); padding: 10px 14px;
  box-shadow: var(--sh1); flex-shrink: 0;
}
.isp-do-toolbar-sep {
  width: 1px; height: 20px; background: var(--border2); margin: 0 2px;
}
.isp-do-toolbar-label {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--t3);
  font-family: 'JetBrains Mono', monospace;
}

/* KPI strip */
.isp-do-kpi-row {
  display: flex; gap: 10px; flex-shrink: 0;
}
.isp-do-kpi {
  flex: 1; background: var(--surface); border-radius: var(--r8);
  border: 1.5px solid var(--border); padding: 12px 14px;
  box-shadow: var(--sh1); display: flex; flex-direction: column; gap: 2px;
}
.isp-do-kpi-lbl {
  font-size: 9px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--t3);
  font-family: 'JetBrains Mono', monospace;
}
.isp-do-kpi-val {
  font-size: 22px; font-weight: 700; color: var(--t1);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.isp-do-kpi-sub { font-size: 10.5px; color: var(--t2); }
.isp-do-kpi.cp { border-left: 3px solid var(--p); }
.isp-do-kpi.cs { border-left: 3px solid var(--s); }
.isp-do-kpi.cw { border-left: 3px solid var(--w); }
.isp-do-kpi.cd { border-left: 3px solid var(--d); }

/* Section wrappers */
.isp-do-section {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}

/* Inline section label inside isp-gc-bar */
.isp-do-section-tag {
  font-size: 9px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--t3);
  font-family: 'JetBrains Mono', monospace;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r2); padding: 2px 7px;
}

/* Type badge inside grid cells */
.isp-do-type {
  display: inline-block; padding: 1px 7px;
  border-radius: 20px; font-size: 10px; font-weight: 600;
  background: var(--p-light); color: var(--p);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}

/* Amount cell — mono right-aligned */
.isp-do-amt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; color: var(--t1); text-align: right;
}

/* ══════════════════════════════════════════════════════════
   Daily Overview Pages  (do-*)
══════════════════════════════════════════════════════════ */

.do-body { gap: 10px; }

/* KPI cards — no hover lift, purely informational */
.do-kpi-row .isp-stat-card { cursor: default; }
.do-kpi-row .isp-stat-card:hover { transform: none; box-shadow: var(--sh1); }

/* Date range strip below page header tabs */
.do-date-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 0;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.do-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--t1);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r4);
  padding: 3px 10px 3px 8px;
  font-family: 'JetBrains Mono', monospace;
}
.do-date-chip-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t3);
  padding-right: 2px;
}

/* Section grid cards — equal flex height */
.do-section {
  flex-shrink: 0;
}

/* Coloured left dot in section header bar */
.do-section-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   Daily Overview Pages (DailyOverview + DailyOverviewScl)
══════════════════════════════════════════════════════════ */

/* Body — tighter gap, full height column layout */
.do-body { gap: 10px; }

/* KPI cards: non-interactive on these pages */
.do-body .isp-stat-card { cursor: default; }
.do-body .isp-stat-card:hover { transform: none; box-shadow: var(--sh1); }

/* Compact value size for amounts that can be large */
.do-amt-val { font-size: 22px !important; }

/* Lower row: two grids side by side, equal width */
.do-lower-row {
  display: flex;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.do-lower-row .isp-gc { min-width: 0; }

/* Message-type filter badges shown in grid title bar */
.do-msg-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 8px;
}
.do-type-badge {
  font-size: 9px;
  padding: 2px 7px;
  background: var(--p-light);
  color: var(--p);
  border: 1px solid var(--border2);
  border-radius: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  white-space: nowrap;
}
.do-type-badge-s { font-size: 8.5px; padding: 1px 5px; }

/* Row-count chips */
.isp-count-chip-warn {
  background: var(--d-light);
  color: var(--d);
  border-color: rgba(240,113,103,.25);
}

/* ══════════════════════════════════════════════════════════
   Message Flow Page
══════════════════════════════════════════════════════════ */

.mf-body { gap: 10px; }
.mf-body .isp-stat-card { cursor: default; }
.mf-body .isp-stat-card:hover { transform: none; box-shadow: var(--sh1); }

/* Main layout: charts left, filter panel right */
.mf-chart-layout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.mf-charts {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.mf-chart-card { flex-shrink: 0; }

/* Filter panel */
.mf-filter-panel {
  width: 220px;
  flex-shrink: 0;
  max-height: 470px;
  overflow-y: auto;
}

/* Checkbox rows */
.mf-check-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
}
.mf-select-all { margin-bottom: 2px; }
.mf-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0 8px;
}
.mf-check-lbl {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--t1);
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
.mf-check-all { font-weight: 700; font-size: 11.5px; }
.mf-type-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mf-type-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
}
.mf-type-cnt {
  font-size: 9.5px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--t3);
  flex-shrink: 0;
}

/* Mini bar behind each type row */
.mf-mini-bar-wrap {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  width: 100%;
  margin-top: 2px;
}
.mf-mini-bar-in {
  height: 100%;
  border-radius: 2px;
  opacity: .55;
  transition: width .3s ease;
}

/* ══════════════════════════════════════════════════════════
   Parameter Administration Page
══════════════════════════════════════════════════════════ */

.pm-body { gap: 10px; padding-bottom: 20px; }

/* Two-column layout: category sidebar + card area */
.pm-layout {
  display: flex;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Category sidebar ─────────────────────────────────── */
.pm-cat-panel {
  width: 190px;
  flex-shrink: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pm-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: var(--r4);
  cursor: pointer;
  transition: all .14s;
  gap: 6px;
}
.pm-cat-item:hover { background: var(--p-soft); }
.pm-cat-active {
  background: var(--p-mid) !important;
  border-left: 3px solid var(--p);
  padding-left: 7px;
}
.pm-cat-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--t1);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-cat-all .pm-cat-name { color: var(--p); }
.pm-cat-badge {
  font-size: 9.5px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--t3);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 6px;
  flex-shrink: 0;
}

/* ── Cards area ─────────────────────────────────────────── */
.pm-cards-area {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.pm-empty {
  color: var(--t3);
  font-size: 12px;
  padding: 24px;
  text-align: center;
}

/* Category group header */
.pm-group { display: flex; flex-direction: column; gap: 6px; }
.pm-group-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px 4px;
  border-bottom: 1.5px solid var(--border);
}
.pm-group-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t2);
  font-family: 'JetBrains Mono', monospace;
}

/* Parameter card */
.pm-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r6);
  padding: 12px 14px;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: var(--sh1);
}
.pm-card:hover { border-color: var(--border2); box-shadow: var(--sh2); }
.pm-card-editing {
  border-color: var(--p) !important;
  box-shadow: 0 0 0 3px var(--p-mid), var(--sh2) !important;
}

/* Card header row */
.pm-card-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.pm-card-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
}
.pm-param-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t1);
}
.pm-code-badge {
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--p);
  background: var(--p-light);
  border: 1px solid rgba(0,129,167,.18);
  border-radius: var(--r2);
  padding: 1px 6px;
}
.pm-card-acts {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.pm-type-chip {
  font-size: 9px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--t3);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 2px 7px;
}
.pm-cust-chip {
  font-size: 9px;
  font-weight: 600;
  color: var(--s);
  background: var(--s-light);
  border: 1px solid rgba(0,175,185,.2);
  border-radius: var(--r2);
  padding: 2px 7px;
}

/* Description */
.pm-param-desc {
  font-size: 11px;
  color: var(--t2);
  margin-bottom: 8px;
  line-height: 1.55;
}

/* Value row */
.pm-value-row { margin-top: 6px; }
.pm-value-display {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--p-dark);
  background: var(--p-soft);
  border: 1px solid rgba(0,129,167,.15);
  border-radius: var(--r4);
  padding: 4px 12px;
  min-width: 60px;
}

/* Editor wrap */
.pm-editor-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pm-editor-acts {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Bool toggle */
.pm-bool-group {
  display: flex;
  gap: 6px;
}
.pm-bool-opt {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: var(--r4);
  border: 1.5px solid var(--border2);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .14s;
  color: var(--t2);
}
.pm-bool-opt:hover { border-color: var(--p); color: var(--p); }
.pm-bool-on  { background: rgba(26,122,60,.1);   border-color: #1a7a3c; color: #1a7a3c; }
.pm-bool-off { background: var(--d-light);        border-color: var(--d); color: var(--d); }
.pm-bool-ico { font-size: 12px; }
.pm-no-editor { font-size: 11px; color: var(--t3); font-style: italic; }

/* ══════════════════════════════════════════════════════════
   Bank Holidays Page
══════════════════════════════════════════════════════════ */

.bh-body { gap: 10px; padding-bottom: 20px; }

/* Calendar + table layout */
.bh-layout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}
.bh-months {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 340px;
  flex-shrink: 0;
  max-height: 620px;
  overflow-y: auto;
}
.bh-table-wrap {
  flex: 1;
  min-width: 0;
  height: 620px;
  overflow: hidden;
}

/* Month card */
.bh-month-card { padding: 12px 14px; }
.bh-month-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bh-month-name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--t1);
}

/* Day row inside month card */
.bh-day-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.bh-day-row:last-child { border-bottom: none; }
.bh-day-today { background: var(--p-soft); border-radius: var(--r4); padding: 6px 6px; }
.bh-day-past { opacity: .55; }
.bh-day-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 34px;
  flex-shrink: 0;
}
.bh-day-num {
  font-size: 15px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: var(--p);
  line-height: 1;
}
.bh-day-dow {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--t3);
  letter-spacing: .06em;
}
.bh-day-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.bh-day-desc {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--t1);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bh-country-chip {
  font-size: 9px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--t3);
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--r2);
  padding: 2px 7px;
  flex-shrink: 0;
  white-space: nowrap;
}
.bh-day-acts {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .15s;
}
.bh-day-row:hover .bh-day-acts { opacity: 1; }

/* Dialog form */
.bh-form { display: flex; flex-direction: column; gap: 14px; }
.bh-field { display: flex; flex-direction: column; gap: 5px; }
.bh-label { font-size: 11.5px; font-weight: 700; color: var(--t2); }
.bh-meta-row { display: flex; flex-direction: column; gap: 5px; padding: 8px; background: var(--surface2); border-radius: var(--r4); }
.bh-meta { display: flex; gap: 8px; align-items: center; }
.bh-meta-lbl { font-size: 10px; font-weight: 700; color: var(--t3); width: 70px; }
.bh-meta-val { font-size: 11px; color: var(--t2); font-family: 'JetBrains Mono', monospace; }
.bh-error { font-size: 11.5px; color: var(--d); font-weight: 600; padding: 6px 10px; background: var(--d-light); border-radius: var(--r4); }


/* ══════════════════════════════════════════════════════════
   Shared — ph helpers (used across config pages)
══════════════════════════════════════════════════════════ */
.isp-ph-sep  { font-size:11px; color:var(--t3); margin:0 4px; }
.isp-ph-lbl  { font-size:11.5px; font-weight:600; color:var(--t1); cursor:pointer; }

/* ══════════════════════════════════════════════════════════
   Internal Mappings  &  Service Lifecycle — shared tokens
══════════════════════════════════════════════════════════ */

.im-body       { gap:10px; padding-bottom:20px; }
.im-grid-card  { flex:1; overflow:hidden; }
.slc-body      { gap:10px; padding-bottom:20px; }
.slc-grid-card { flex:1; overflow:hidden; }

/* Active indicator dot */
.im-dot      { display:inline-block; width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.im-dot-on   { background:#1a7a3c; box-shadow:0 0 5px rgba(26,122,60,.45); }
.im-dot-off  { background:var(--t3); opacity:.45; }

/* Type / level badge */
.im-type-badge {
  font-size:9.5px; font-weight:800; font-family:'JetBrains Mono',monospace;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--p-dark); background:var(--p-light);
  border:1px solid rgba(0,129,167,.22);
  border-radius:var(--r2); padding:2px 7px;
  white-space:nowrap;
}

/* Schema badges */
.im-schema-col    { display:flex; flex-direction:column; gap:3px; }
.im-schema-pair   { display:flex; flex-direction:column; gap:4px; }
.im-schema-row    { display:flex; align-items:center; gap:4px; flex-wrap:nowrap; }
.im-schema-lbl    {
  font-size:8.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--t3); width:22px; flex-shrink:0;
}
.im-schema-badge {
  font-size:10px; font-weight:700; font-family:'JetBrains Mono',monospace;
  color:var(--p-dark); background:var(--p-light);
  border:1px solid rgba(0,129,167,.22);
  border-radius:var(--r2); padding:2px 6px;
  white-space:nowrap;
}
.im-schema-ref-badge {
  font-size:9.5px; font-weight:600; font-family:'JetBrains Mono',monospace;
  color:var(--s); background:var(--s-light);
  border:1px solid rgba(0,175,185,.22);
  border-radius:var(--r2); padding:2px 6px;
  white-space:nowrap;
}
/* "Set To" target schema extracted from description */
.im-schema-to-badge {
  font-size:10px; font-weight:700; font-family:'JetBrains Mono',monospace;
  color:#7b4f00; background:rgba(254,217,183,.55);
  border:1px solid rgba(240,113,103,.25);
  border-radius:var(--r2); padding:2px 6px;
  white-space:nowrap;
}

/* Channel cell: service name + chips */
.im-channel-cell { display:flex; flex-direction:column; gap:5px; }
.im-svc-name     { font-size:11.5px; font-weight:700; color:var(--t1); line-height:1.3; }
.im-svc-dim      { color:var(--t3); font-weight:400; }
.im-chips-row    { display:flex; gap:4px; flex-wrap:wrap; }
.im-chips-wrap   { flex-wrap:wrap; }

/* Channel chips */
.im-chip {
  font-size:9px; font-weight:700; font-family:'JetBrains Mono',monospace;
  border-radius:var(--r2); padding:2px 6px; border:1px solid; white-space:nowrap;
}
.im-chip-dir  { color:var(--p-dark);  background:var(--p-soft);             border-color:rgba(0,129,167,.25); }
.im-chip-src  { color:#7b4f00;        background:rgba(254,217,183,.45);      border-color:rgba(240,113,103,.25); }
.im-chip-dst  { color:#1a5c2e;        background:rgba(0,175,185,.12);        border-color:rgba(0,175,185,.28); }

/* Arrow between From → To */
.im-arrow { font-size:15px; color:var(--p); font-weight:700; }

/* Description text */
.im-desc { font-size:11px; color:var(--t2); line-height:1.5; }

/* ── Service Lifecycle — specific ─────────────────────── */

/* Order + Level stacked */
.slc-ordlvl { display:flex; flex-direction:column; gap:4px; }

.slc-order-badge {
  font-size:10px; font-weight:800; font-family:'JetBrains Mono',monospace;
  color:var(--t3); background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:var(--r2); padding:2px 6px;
  white-space:nowrap; width:fit-content;
}

/* State cell */
.slc-state-cell { display:flex; flex-direction:column; gap:4px; }
.slc-svc { font-size:11.5px; font-weight:700; color:var(--t1); line-height:1.3; }

/* State pill — all ServiceState values */
.slc-state-pill {
  font-size:9.5px; font-weight:700; font-family:'JetBrains Mono',monospace;
  border-radius:var(--r2); padding:2px 8px;
  display:inline-block; width:fit-content; white-space:nowrap;
  border:1px solid transparent;
}
/* Ok / Ok2 → green */
.slc-pill-ok          { color:#1a6b35; background:#d4f0df; border-color:rgba(26,107,53,.22); }
/* Failed / Failed2 → red */
.slc-pill-fail        { color:#b71c1c; background:#fde8e8; border-color:rgba(183,28,28,.22); }
/* Disapproved / Disapproved2 → deep orange */
.slc-pill-disapproved { color:#b85c00; background:#fde9d4; border-color:rgba(184,92,0,.22); }
/* Late → amber */
.slc-pill-late        { color:#8a6200; background:#fff3cd; border-color:rgba(138,98,0,.22); }
/* Skipped → grey-blue */
.slc-pill-skipped     { color:#455a64; background:#eceff1; border-color:rgba(69,90,100,.22); }
/* Release → teal/cyan */
.slc-pill-release     { color:var(--s); background:var(--s-light); border-color:rgba(0,175,185,.22); }
/* Pending → blue-grey */
.slc-pill-pending     { color:#1565c0; background:#e3f0ff; border-color:rgba(21,101,192,.22); }
/* Check → purple */
.slc-pill-check       { color:#6a1b9a; background:#f3e5f5; border-color:rgba(106,27,154,.22); }
/* fallback */
.slc-pill-neutral     { color:var(--t2); background:var(--surface2); border-color:var(--border2); }

/* Msgs badge */
.slc-msgs-badge {
  font-size:10px; font-weight:700; font-family:'JetBrains Mono',monospace;
  color:var(--p-dark); background:var(--p-soft);
  border:1px solid rgba(0,129,167,.18);
  border-radius:var(--r2); padding:2px 7px;
}
.slc-msgs-zero { font-size:11px; color:var(--t3); }


/* ══════════════════════════════════════════════════════════
   Transactions Received Page
══════════════════════════════════════════════════════════ */

.tr-body { gap: 10px; flex: 1; }
.tr-grid-card { flex: 1; min-height: 400px; overflow: hidden; }
.tr-guid {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--t3);
}

/* ══════════════════════════════════════════════════════════
   Full-height content (no page scroll — grid fills remaining)
══════════════════════════════════════════════════════════ */
.isp-content-fixed {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 12px;
}

/* chips-col: vertical stack instead of wrap */
.im-chips-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ══════════════════════════════════════════════════════════
   Bulking Engine  &  Debulking Engine — shared layout
══════════════════════════════════════════════════════════ */

.eng-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
  gap: 0;
}

/* ── Left list panel ─────────────────────────────────── */
.eng-list {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 6px;
  box-sizing: border-box;
}

/* Aggregation / job card */
.eng-card {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r6);
  padding: 11px 13px;
  cursor: pointer;
  transition: border-color .14s, box-shadow .14s, background .14s;
  box-shadow: var(--sh1);
}
.eng-card:hover {
  border-color: var(--border2);
  box-shadow: var(--sh2);
  background: var(--p-soft);
}
.eng-card-sel {
  border-color: var(--p) !important;
  background: var(--p-mid) !important;
  box-shadow: 0 0 0 2px var(--p-mid), var(--sh1) !important;
}

.eng-card-hdr {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}
.eng-card-num {
  font-size: 10px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: var(--t3);
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--r2);
  padding: 2px 6px;
}
.eng-card-ns {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t1);
  line-height: 1.35;
  word-break: break-all;
  overflow-wrap: anywhere;
  min-width: 0;
  margin-bottom: 3px;
}
.eng-card-desc {
  font-size: 10.5px;
  color: var(--t2);
  line-height: 1.45;
  margin-bottom: 5px;
}
.eng-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.eng-meta-chip {
  font-size: 9.5px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--t2);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 1px 6px;
  white-space: nowrap;
}

/* ── Right detail panel ──────────────────────────────── */
.eng-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
}

.eng-detail-hdr {
  padding: 14px 18px 10px;
  border-bottom: 1.5px solid var(--border);
  flex-shrink: 0;
}
.eng-detail-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.eng-detail-ns {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--t1);
}
.eng-detail-desc {
  font-size: 11.5px;
  color: var(--t2);
  line-height: 1.5;
  margin-bottom: 6px;
}
.eng-detail-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Schedules grid ──────────────────────────────────── */
.eng-sched-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  padding: 14px;
  overflow-y: auto;
}
.eng-sched-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r6);
  padding: 12px 14px;
  box-shadow: var(--sh1);
}
.eng-sched-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 8px;
}
.eng-sched-row {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
  align-items: flex-start;
}
.eng-sched-lbl {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--t3);
  width: 42px;
  flex-shrink: 0;
  padding-top: 1px;
}
.eng-sched-val {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--t1);
  font-weight: 600;
}
.eng-sched-audit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 9.5px;
  color: var(--t3);
}

/* ── Parts + Correlations layout ─────────────────────── */
.eng-parts-layout {
  display: flex;
  height: 100%;
  overflow: hidden;
}
.eng-parts-list {
  width: 250px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1.5px solid var(--border);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eng-part-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r4);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.eng-part-card:hover { border-color: var(--border2); background: var(--p-soft); }
.eng-part-sel        { border-color: var(--p) !important; background: var(--p-mid) !important; }
.eng-part-hdr        { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.eng-part-suffix     { font-size: 10.5px; font-family: 'JetBrains Mono', monospace; color: var(--p-dark); }

.eng-corr-panel {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}
.eng-corr-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eng-corr-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r4);
}
.eng-corr-info   { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.eng-corr-prop   { font-size: 11.5px; font-weight: 700; color: var(--t1); }
.eng-corr-chips  { display: flex; gap: 4px; flex-wrap: wrap; }
.eng-corr-sql    { font-size: 10px; font-family: 'JetBrains Mono', monospace; color: var(--t2); margin-top: 2px; word-break: break-all; }

/* ── Steps list (Debulking) ──────────────────────────── */
.eng-steps-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}
.eng-step-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r4);
  padding: 11px 14px;
  box-shadow: var(--sh1);
}
.eng-step-hdr  { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.eng-step-name { font-size: 12px; font-weight: 700; color: var(--t1); flex: 1; }
.eng-step-cmd  {
  font-size: 10.5px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--t2);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 6px 10px;
  word-break: break-all;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* ── History list (Debulking) ────────────────────────── */
.eng-hist-table {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
}
.eng-hist-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--r4);
  border: 1px solid var(--border);
  background: var(--surface);
}
.eng-hist-left  { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; flex-shrink: 0; width: 110px; }
.eng-hist-badge { font-size: 9px !important; }
.eng-hist-time  { font-size: 9.5px; font-family: 'JetBrains Mono', monospace; color: var(--t3); line-height: 1.4; }
.eng-hist-mid   { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.eng-hist-msg   { font-size: 10.5px; color: var(--t2); line-height: 1.45; }
.eng-hist-right { flex-shrink: 0; }

/* TabStrip inside detail panel fills remaining height */
.eng-detail .k-tabstrip { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.eng-detail .k-tabstrip-content { flex: 1; overflow: auto; }

/* ── Engine tabstrip: fill remaining height, content scrollable ── */
.eng-tabstrip { flex:1; display:flex; flex-direction:column; overflow:hidden; min-height:0; }
.eng-tabstrip > .k-tabstrip-items-wrapper { flex-shrink:0; }
.eng-tabstrip > .k-content { flex:1; overflow:auto !important; }

/* ── eng-layout fills viewport below page header ────────────── */
.eng-layout { flex:1; overflow:hidden; }

/* Splitter pane inner content must fill height */
.k-pane > .eng-list,
.k-pane > .eng-detail { height:100%; }

/* eng-detail fills its pane */
.eng-detail { height:100%; display:flex; flex-direction:column; overflow:hidden; }

/* ══════════════════════════════════════════════════════════════
   Bank Directory Plus — detail panel
══════════════════════════════════════════════════════════════ */
.bdp-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  align-content: start;
}
.bdp-section {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--r6);
  padding: 10px 12px 8px;
}
.bdp-section-hdr {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--p);
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border2);
}
.bdp-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 2px 0;
}
.bdp-row-empty { opacity: .45; }
.bdp-lbl {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--t3);
  min-width: 90px;
  flex-shrink: 0;
}
.bdp-val {
  font-size: 11px;
  color: var(--t1);
  font-family: 'JetBrains Mono', monospace;
  word-break: break-all;
}

/* ══════════════════════════════════════════════════════════════
   Advanced Search page
══════════════════════════════════════════════════════════════ */

/* Search form card */
.as-form-card {
  flex-shrink: 0;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r8);
  padding: 14px 18px 12px;
  margin: 0 18px 10px;
  box-shadow: var(--sh1);
}
.as-form-section-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--p);
  margin-bottom: 6px;
}
.as-form-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.as-field { display: flex; flex-direction: column; gap: 3px; }
.as-field-spacer { visibility: hidden; }
.as-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--t2);
  letter-spacing: .02em;
}
.as-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.as-searching-lbl { font-size: 11.5px; color: var(--t2); }
.as-error-msg     { font-size: 11.5px; color: var(--d); font-weight: 600; }
.as-limit-warn    { font-size: 11px; color: var(--w); font-weight: 600; margin-left: 8px; }

/* Results area fills remaining space */
.as-results-area {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  margin: 0 18px 14px;
}

/* Detail actions strip below header */
.as-detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}