/* ════════════════════════════════════════════════
   Cash Application v3 — Design System
   Primary: #1E3A8A  Secondary: #3B82F6
   Background: #F8FAFC  Text: #111827
   ════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --primary:       #1E3A8A;
  --primary-hover: #1e40af;
  --primary-light: #EFF6FF;
  --primary-muted: rgba(30,58,138,0.08);
  --primary-border:rgba(30,58,138,0.2);

  --secondary:       #3B82F6;
  --secondary-hover: #2563EB;
  --secondary-light: #DBEAFE;
  --secondary-muted: rgba(59,130,246,0.1);

  --bg:       #F8FAFC;
  --bg-card:  #FFFFFF;
  --bg-hover: #F1F5F9;
  --bg-nav:   #1E3A8A;
  --bg-nav-hover: rgba(255,255,255,0.1);
  --bg-nav-active:#2563EB;

  --text:        #111827;
  --text-2:      #374151;
  --text-3:      #6B7280;
  --text-4:      #9CA3AF;
  --text-nav:    rgba(255,255,255,0.8);
  --text-nav-active: #FFFFFF;

  --border:      #E2E8F0;
  --border-md:   #CBD5E1;
  --border-strong:#94A3B8;

  --green:       #059669;
  --green-bg:    #ECFDF5;
  --green-border:#A7F3D0;
  --green-text:  #065F46;

  --yellow:      #D97706;
  --yellow-bg:   #FFFBEB;
  --yellow-border:#FDE68A;
  --yellow-text: #92400E;

  --red:         #DC2626;
  --red-bg:      #FEF2F2;
  --red-border:  #FECACA;
  --red-text:    #991B1B;

  --purple:      #7C3AED;
  --purple-bg:   #F5F3FF;
  --purple-border:#DDD6FE;
  --purple-text: #4C1D95;

  --r-sm: 4px;  --r-md: 8px;  --r-lg: 12px;  --r-xl: 16px;  --r-2xl: 20px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);

  --nav-w:     240px;
  --header-h:  60px;
  --font:      'Inter', system-ui, sans-serif;
  --mono:      'JetBrains Mono', 'Fira Code', monospace;
  --transition:0.15s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border-md);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}

/* ── LAYOUT ── */
.shell{display:flex;min-height:100vh}

/* SIDEBAR NAV */
.nav{
  width:var(--nav-w);background:var(--bg-nav);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;height:100vh;z-index:100;
  overflow-y:auto;box-shadow:2px 0 8px rgba(0,0,0,0.12);
}
.nav-brand{padding:20px 16px 16px;border-bottom:1px solid rgba(255,255,255,0.1)}
.nav-logo{
  width:36px;height:36px;background:var(--secondary);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:10px;
}
.nav-name{font-size:14px;font-weight:700;color:#fff;letter-spacing:0.01em}
.nav-ver{font-size:11px;color:rgba(255,255,255,0.5);margin-top:1px}
.nav-section{padding:8px 0}
.nav-section-label{font-size:10px;font-weight:600;color:rgba(255,255,255,0.4);letter-spacing:0.1em;text-transform:uppercase;padding:6px 16px 4px}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 16px;color:var(--text-nav);
  text-decoration:none;font-size:13px;font-weight:400;
  transition:var(--transition);border:none;background:none;width:100%;text-align:left;cursor:pointer;
  border-left:3px solid transparent;
}
.nav-item:hover{background:var(--bg-nav-hover);color:#fff}
.nav-item.active{background:var(--bg-nav-active);color:#fff;border-left-color:rgba(255,255,255,0.6);font-weight:500}
.nav-item-icon{font-size:15px;flex-shrink:0;width:20px;text-align:center}
.nav-badge{margin-left:auto;background:rgba(255,255,255,0.15);color:#fff;font-size:10px;padding:1px 7px;border-radius:10px;font-weight:600}
.nav-footer{margin-top:auto;padding:14px 16px;border-top:1px solid rgba(255,255,255,0.1)}
.nav-user{display:flex;align-items:center;gap:9px}
.nav-avatar{width:30px;height:30px;border-radius:50%;background:var(--secondary);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#fff;flex-shrink:0}
.nav-user-name{font-size:12px;font-weight:500;color:#fff}
.nav-user-role{font-size:10px;color:rgba(255,255,255,0.5)}
.nav-logout{margin-left:auto;background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.4);font-size:16px;padding:2px;transition:var(--transition)}
.nav-logout:hover{color:#fff}

/* MAIN CONTENT */
.main{margin-left:var(--nav-w);flex:1;display:flex;flex-direction:column;min-height:100vh}
.page-header{padding:20px 28px;border-bottom:1px solid var(--border);background:var(--bg-card);box-shadow:var(--shadow-sm)}
.page-header-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.page-title{font-size:20px;font-weight:700;color:var(--primary);margin-bottom:2px}
.page-subtitle{font-size:12px;color:var(--text-3)}
.content{padding:24px 28px;flex:1}

/* ── CARDS ── */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.card-header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg-card)}
.card-title{font-size:14px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
.card-subtitle{font-size:11px;color:var(--text-3);margin-top:1px}
.card-body{padding:18px}

/* ── STAT CARDS ── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.stat-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:16px;position:relative;box-shadow:var(--shadow-sm);
}
.stat-card-accent{position:absolute;top:0;left:0;right:0;height:3px;background:var(--secondary);border-radius:var(--r-lg) var(--r-lg) 0 0}
.stat-card.green .stat-card-accent{background:var(--green)}
.stat-card.yellow .stat-card-accent{background:var(--yellow)}
.stat-card.red .stat-card-accent{background:var(--red)}
.stat-card.purple .stat-card-accent{background:var(--purple)}
.stat-label{font-size:11px;color:var(--text-3);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.05em;font-weight:500}
.stat-value{font-size:28px;font-weight:700;color:var(--primary);line-height:1}
.stat-value.green{color:var(--green)}
.stat-value.red{color:var(--red)}
.stat-value.yellow{color:var(--yellow)}
.stat-sub{font-size:11px;color:var(--text-4);margin-top:5px}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;font-size:13px;font-weight:500;border-radius:var(--r-md);border:1px solid var(--border-md);background:var(--bg-card);color:var(--text);cursor:pointer;transition:var(--transition);text-decoration:none;white-space:nowrap;font-family:var(--font)}
.btn:hover{background:var(--bg-hover);border-color:var(--border-strong)}
.btn:active{transform:scale(0.98)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn-secondary{background:var(--secondary);border-color:var(--secondary);color:#fff}
.btn-secondary:hover{background:var(--secondary-hover);border-color:var(--secondary-hover)}
.btn-success{background:var(--green-bg);border-color:var(--green-border);color:var(--green-text)}
.btn-danger{background:var(--red-bg);border-color:var(--red-border);color:var(--red-text)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-lg{padding:11px 24px;font-size:14px;font-weight:600}
.btn-full{width:100%;justify-content:center}

/* ── FORMS ── */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:5px}
.form-label .req{color:var(--red)}
.form-control{width:100%;padding:9px 12px;background:var(--bg-card);border:1px solid var(--border-md);border-radius:var(--r-md);color:var(--text);font-size:13px;font-family:var(--font);transition:var(--transition);outline:none}
.form-control:focus{border-color:var(--secondary);box-shadow:0 0 0 3px var(--secondary-muted)}
.form-control::placeholder{color:var(--text-4)}
.form-hint{font-size:11px;color:var(--text-3);margin-top:4px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-section{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.form-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.form-section-title{font-size:12px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid var(--primary-light)}

/* Toggle */
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
.toggle-row:last-child{border-bottom:none}
.toggle-label{font-size:13px;font-weight:500;color:var(--text)}
.toggle-desc{font-size:11px;color:var(--text-3);margin-top:2px}
.toggle{position:relative;width:38px;height:22px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--border-md);border-radius:11px;cursor:pointer;transition:var(--transition)}
.toggle-slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:var(--transition);box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.toggle input:checked+.toggle-slider{background:var(--secondary)}
.toggle input:checked+.toggle-slider::before{transform:translateX(16px)}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600}
.badge-green{background:var(--green-bg);color:var(--green-text);border:1px solid var(--green-border)}
.badge-yellow{background:var(--yellow-bg);color:var(--yellow-text);border:1px solid var(--yellow-border)}
.badge-red{background:var(--red-bg);color:var(--red-text);border:1px solid var(--red-border)}
.badge-blue{background:var(--secondary-light);color:var(--primary);border:1px solid var(--secondary-light)}
.badge-purple{background:var(--purple-bg);color:var(--purple-text);border:1px solid var(--purple-border)}
.badge-gray{background:var(--bg-hover);color:var(--text-3);border:1px solid var(--border)}

/* ── TABLES ── */
.table-wrap{overflow-x:auto;border-radius:0 0 var(--r-lg) var(--r-lg)}
table{width:100%;border-collapse:collapse}
thead tr{background:var(--bg);border-bottom:2px solid var(--border)}
th{padding:10px 14px;text-align:left;font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap}
td{padding:12px 14px;font-size:13px;color:var(--text);border-bottom:1px solid var(--border)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--bg)}
.td-mono{font-family:var(--mono);font-size:12px;color:var(--text-2)}
.td-name{font-weight:600;color:var(--text)}
td .sub{font-size:11px;color:var(--text-3);margin-top:2px;font-weight:400}

/* ── UPLOAD ZONES ── */
.upload-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.upload-zone{
  border:2px dashed var(--border-md);border-radius:var(--r-xl);
  padding:20px 16px;background:var(--bg);cursor:pointer;transition:var(--transition);
  min-height:140px;display:flex;flex-direction:column;gap:6px;position:relative;
}
.upload-zone:hover{border-color:var(--secondary);background:var(--secondary-muted)}
.upload-zone.drag{border-color:var(--secondary);background:var(--secondary-muted);transform:scale(1.01)}
.upload-zone.has-files{border-color:var(--green);border-style:solid;background:var(--green-bg)}
.upload-zone.error{border-color:var(--red);background:var(--red-bg)}
.upload-zone input[type="file"]{display:none}
.uz-step{font-size:11px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:0.07em}
.uz-icon{font-size:24px}
.uz-title{font-size:13px;font-weight:700;color:var(--text)}
.uz-hint{font-size:11px;color:var(--text-3)}
.uz-file{font-size:11px;color:var(--green-text);display:flex;align-items:center;gap:5px;padding:1px 0}

/* ── PIPELINE / WORKFLOW STEPS ── */
.pipeline-wrap{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-card);box-shadow:var(--shadow-sm)}
.pipeline-step{
  display:flex;align-items:flex-start;gap:14px;padding:14px 18px;
  border-bottom:1px solid var(--border);transition:background var(--transition);
}
.pipeline-step:last-child{border-bottom:none}
.pipeline-step.RUNNING{background:#EFF6FF}
.pipeline-step.COMPLETED{background:#F0FDF4}
.pipeline-step.FAILED{background:#FEF2F2}
.ps-ind{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;flex-shrink:0;
  background:var(--bg);border:2px solid var(--border-md);color:var(--text-3);
}
.ps-ind.RUNNING{background:var(--secondary-light);border-color:var(--secondary);color:var(--primary);animation:pulse 1.5s infinite}
.ps-ind.COMPLETED{background:var(--green-bg);border-color:var(--green);color:var(--green)}
.ps-ind.FAILED{background:var(--red-bg);border-color:var(--red);color:var(--red)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,0.3)}50%{box-shadow:0 0 0 8px transparent}}
.ps-body{flex:1;min-width:0}
.ps-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px}
.ps-detail{font-size:11px;color:var(--text-3);font-family:var(--mono);word-break:break-all;margin-top:2px}
.ps-time{font-size:11px;color:var(--text-4);flex-shrink:0;margin-top:2px}
.ps-expand-btn{font-size:11px;color:var(--secondary);cursor:pointer;background:none;border:none;padding:2px 0;margin-top:4px;text-decoration:underline}

/* Workflow detail (expandable) */
.ps-detail-box{
  margin-top:10px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-md);padding:12px;display:none;
}
.ps-detail-box.open{display:block}
.ps-io-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ps-io-label{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:4px}
.ps-io-val{font-size:11px;font-family:var(--mono);color:var(--text-2);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px;white-space:pre-wrap;word-break:break-all;max-height:160px;overflow-y:auto}
.ps-error-box{background:var(--red-bg);border:1px solid var(--red-border);border-radius:var(--r-sm);padding:8px;font-size:11px;font-family:var(--mono);color:var(--red-text);margin-top:6px;white-space:pre-wrap}

/* ── MATCH VISUALIZER MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(17,24,39,0.6);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);width:100%;max-width:1100px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-xl);transform:translateY(20px);transition:transform .2s}
.modal-overlay.open .modal{transform:translateY(0)}
.modal-header{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg-card);z-index:1;box-shadow:var(--shadow-sm)}
.modal-title{font-size:16px;font-weight:700;color:var(--primary)}
.modal-close{width:30px;height:30px;border-radius:50%;background:var(--bg-hover);border:1px solid var(--border);color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;transition:var(--transition)}
.modal-close:hover{background:var(--red-bg);color:var(--red);border-color:var(--red-border)}
.modal-body{padding:22px}

/* Three-panel visualizer */
.viz-panels{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:20px}
.viz-panel{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.viz-panel-header{padding:10px 14px;background:var(--primary);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.viz-panel-icon{font-size:14px}
.viz-panel-title{font-size:12px;font-weight:600;color:#fff}
.viz-field{padding:10px 14px;border-bottom:1px solid var(--border)}
.viz-field:last-child{border-bottom:none}
.viz-field-label{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:0.05em;font-weight:600;margin-bottom:2px}
.viz-field-value{font-size:12px;font-family:var(--mono);color:var(--text);word-break:break-all}
.viz-field.match{background:#F0FDF4}
.viz-field.mismatch{background:#FFFBEB}
.viz-field.missing{background:#FEF2F2;opacity:.8}
.viz-field-value.match{color:var(--green)}
.viz-field-value.mismatch{color:var(--yellow)}
.viz-field-value.missing{color:var(--red)}

/* Diff table */
.diff-table{width:100%;border-collapse:collapse;font-size:12px}
.diff-table th{padding:8px 12px;background:var(--bg);border:1px solid var(--border);font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:0.05em}
.diff-table td{padding:9px 12px;border:1px solid var(--border);font-family:var(--mono);font-size:12px}
.diff-table tr.match td:first-child{border-left:3px solid var(--green)}
.diff-table tr.mismatch td:first-child{border-left:3px solid var(--yellow)}
.diff-table tr.missing td:first-child{border-left:3px solid var(--red)}
.diff-ok{color:var(--green)}
.diff-warn{color:var(--yellow)}
.diff-bad{color:var(--red)}
.diff-delta{font-size:11px;color:var(--yellow)}

/* ── WORKFLOW & AUDIT PAGE ── */

/* Tabs */
.wf-tabs{display:flex;gap:0;border-bottom:2px solid var(--border)}
.wf-tab{padding:9px 20px;font-size:13px;font-weight:600;color:var(--text-3);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;transition:color .15s,border-color .15s}
.wf-tab:hover:not(.active){color:var(--text)}
.wf-tab.active{color:var(--primary);border-bottom-color:var(--primary)}

/* Layout */
.wf-grid{display:grid;grid-template-columns:330px 1fr;gap:20px;align-items:start}
.wf-section-label{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px}
.wf-filter-label{font-size:12px;color:var(--text-3);font-weight:500}

/* Run list */
.wf-run-list{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);max-height:calc(100vh - 240px);overflow-y:auto}
.wf-run-item{padding:13px 15px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
.wf-run-item:hover{background:var(--bg-hover)}
.wf-run-item.active{background:var(--primary-light);border-left:3px solid var(--primary)}
.wf-run-item:last-child{border-bottom:none}
.wf-run-item-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.wf-run-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.wf-run-title{font-size:12px;font-weight:600;color:var(--text);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-run-rel{font-size:10px;color:var(--text-4);flex-shrink:0}
.wf-run-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--text-3)}
.wf-run-id{font-family:var(--mono);font-size:10px;color:var(--text-4)}
.wf-run-error{font-size:10px;color:var(--red);margin-top:4px}

/* Steps panel shell */
.wf-steps-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}

/* Run header inside panel */
.wf-run-header{padding:16px 18px;border-bottom:1px solid var(--border);background:var(--bg);display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wf-run-header-meta{display:flex;gap:20px;flex-wrap:wrap}
.wf-run-header-item{}
.wf-meta-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-4);margin-bottom:2px}
.wf-meta-value{font-size:12px;color:var(--text);font-weight:500}
.wf-meta-value.mono{font-family:var(--mono);font-size:11px}
.wf-run-header-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;flex-shrink:0}

/* File strip */
.wf-file-strip{padding:10px 18px;border-bottom:1px solid var(--border);background:var(--bg);display:flex;gap:20px;flex-wrap:wrap}
.wf-file-item{display:flex;align-items:baseline;gap:6px}
.wf-file-item-emails{align-items:flex-start;flex:1 1 100%}
.wf-file-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-4);white-space:nowrap}
.wf-file-value{font-size:11px;color:var(--text-2);font-family:var(--mono)}
.wf-emails-list{display:flex;flex-wrap:wrap;gap:4px 12px;flex:1}
.wf-email-item{display:inline-flex;align-items:baseline;gap:4px;padding:2px 8px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-sm)}
.wf-email-num{color:var(--text-4);font-weight:700}

/* Collapsible "Emails (N)" block — used in the file strip and the run-summary block of the Full Logs modal. */
.wf-emails-collapsible{display:flex;flex-direction:column;width:100%;min-width:0}
.wf-emails-toggle{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;background:transparent;border:1px solid var(--border);border-radius:var(--r-sm,6px);cursor:pointer;font-size:11px;color:var(--text);font-family:inherit;align-self:flex-start;transition:background .12s,border-color .12s}
.wf-emails-toggle:hover{background:var(--bg-card);border-color:var(--border-md)}
.wf-emails-toggle:focus-visible{outline:2px solid var(--secondary);outline-offset:2px}
.wf-emails-toggle-chevron{font-size:10px;color:var(--text-3);transition:transform .15s ease;display:inline-block;line-height:1}
.wf-emails-collapsible.open .wf-emails-toggle-chevron{transform:rotate(90deg)}
.wf-emails-toggle-label{font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.wf-emails-toggle-hint{font-size:10px;color:var(--text-4);font-style:italic}
.wf-emails-content{display:none;margin-top:8px;border:1px solid var(--border);border-radius:var(--r-sm,6px);background:var(--bg-card);overflow:hidden}
.wf-emails-collapsible.open .wf-emails-content{display:block}
.wf-emails-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;background:var(--bg);border-bottom:1px solid var(--border);font-size:11px;color:var(--text-3)}
.wf-emails-content-count{font-weight:600}
.wf-emails-ol{margin:0;padding:8px 10px 8px 32px;max-height:280px;overflow:auto;list-style:decimal;font-size:11px;line-height:1.7;color:var(--text-2)}
.wf-emails-li{word-break:break-all;font-family:var(--mono)}
.wf-emails-empty{font-size:11px;color:var(--text-4);font-style:italic}

/* Timeline */
.wf-timeline-header{padding:12px 18px;border-bottom:1px solid var(--border);background:var(--bg);font-size:12px;font-weight:700;color:var(--primary);display:flex;align-items:center;justify-content:space-between}
.wf-timeline-legend{display:flex;align-items:center;font-size:11px;font-weight:400;color:var(--text-3)}
.wf-legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}
.wf-timeline{padding:16px 18px;display:flex;flex-direction:column;gap:0}

/* Individual step */
.wf-step{display:flex;gap:14px;position:relative}
.wf-step-last .wf-step-line{display:none}
.wf-step-left{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:34px}
.wf-step-circle{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;flex-shrink:0;letter-spacing:0;
}
.wf-step-circle.step-ok{background:var(--green);color:#fff}
.wf-step-circle.step-fail{background:var(--red);color:#fff}
.wf-step-circle.step-running{background:var(--secondary);color:#fff;animation:pulse 1.5s infinite}
.wf-step-circle.step-pending{background:var(--border-md);color:var(--text-3);border:2px solid var(--border)}
.wf-step-line{flex:1;width:2px;background:var(--border);min-height:16px;margin:4px 0}
.wf-step-right-col{flex:1;padding-bottom:16px;min-width:0}
.wf-step-last .wf-step-right-col{padding-bottom:0}

/* Step card inner (clickable header) */
.wf-step-card-inner{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;cursor:default;transition:border-color .15s}
.wf-step-card-inner[onclick]{cursor:pointer}
.wf-step-card-inner[onclick]:hover{border-color:var(--primary);background:var(--bg-hover)}
.wf-step-top{display:flex;align-items:flex-start;gap:10px}
.wf-step-info{flex:1;min-width:0}
.wf-step-name{font-size:13px;font-weight:600;color:var(--text);line-height:1.3}
.wf-step-detail{font-size:11px;color:var(--text-3);margin-top:3px;line-height:1.4}
.wf-step-err-line{font-size:11px;color:var(--red);margin-top:3px}
.wf-step-right-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.wf-step-dur{font-size:11px;font-weight:600;color:var(--primary);background:var(--primary-light);padding:2px 7px;border-radius:999px}
.wf-step-time{font-size:10px;color:var(--text-4);font-family:var(--mono)}
.wf-step-expand-icon{font-size:14px;font-weight:700;color:var(--text-3);cursor:pointer;width:20px;text-align:center}

/* Expandable meta panel */
.wf-step-meta-panel{display:none;background:var(--bg);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--r-md) var(--r-md);padding:14px;margin-top:-1px}
.wf-step-meta-panel.open{display:block}
.wf-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
.wf-meta-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.wf-kv{display:grid;grid-template-columns:max-content 1fr;gap:3px 10px;font-size:11px}
.wf-kv-key{color:var(--text-3);font-family:var(--mono);font-weight:600;padding:1px 0}
.wf-kv-val{color:var(--text-2);font-family:var(--mono);word-break:break-all;white-space:pre-wrap;padding:1px 0}
.wf-meta-empty{color:var(--text-4);font-size:11px}
.wf-error-box{background:var(--red-bg);border:1px solid var(--red-border);border-radius:var(--r-sm);padding:10px;font-family:var(--mono);font-size:11px;color:var(--red-text);white-space:pre-wrap;margin-top:8px}

/* Results section */
.wf-results-section{border-top:2px solid var(--border)}
.wf-results-header{padding:12px 18px;background:var(--bg);font-size:12px;font-weight:700;color:var(--primary);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--border)}
.wf-results-hint{font-size:11px;font-weight:500;color:var(--text-3);text-transform:none;letter-spacing:0;font-style:italic}

/* Synthesized "failed" cards (extraction errors / non-payment-advice files) */
.recon-card-failed{border-left:3px solid var(--purple)!important;background:var(--bg-card)}
.recon-failed-file{font-size:12px;color:var(--text);font-weight:500;flex:1;word-break:break-all}
.recon-failed-body{padding:10px 14px 12px;background:var(--purple-bg);border-top:1px solid var(--purple-border)}
.recon-failed-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--purple-text);margin-bottom:4px}
.recon-failed-reason{font-size:12px;color:var(--text);line-height:1.5;font-family:var(--mono);word-break:break-word}

/* Per-run bucket breakdown — sits inside Reconciliation Results, above the cards */
.run-buckets{padding:14px 18px;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-card) 100%);border-bottom:1px solid var(--border)}
.run-buckets-bar{display:flex;height:8px;border-radius:999px;overflow:hidden;background:var(--border);margin-bottom:14px;box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.run-buckets-bar-seg{height:100%;transition:width .25s ease}
.run-buckets-bar-seg.matched{background:var(--green)}
.run-buckets-bar-seg.amt{background:var(--yellow)}
.run-buckets-bar-seg.unmatched{background:var(--red)}
.run-buckets-bar-seg.failed{background:var(--purple)}
.run-buckets-bar-seg.extraction-failed{background:var(--purple)}
.run-buckets-bar-seg.not-advice{background:var(--text-4)}
.run-buckets-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.run-bucket{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 12px 11px;overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .1s;text-align:left;font-family:inherit;width:100%}
.run-bucket.interactive{cursor:pointer}
.run-bucket.interactive:hover{border-color:var(--border-md);box-shadow:0 2px 10px rgba(0,0,0,.07);transform:translateY(-1px)}
.run-bucket.interactive:active{transform:translateY(0)}
.run-bucket.interactive:focus-visible{outline:2px solid var(--secondary);outline-offset:2px}
.run-bucket.active{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-muted),0 2px 10px rgba(30,58,138,.10);background:var(--primary-light)}
.run-bucket.active.matched{border-color:var(--green);box-shadow:0 0 0 2px rgba(5,150,105,.15),0 2px 10px rgba(5,150,105,.10);background:var(--green-bg)}
.run-bucket.active.unmatched{border-color:var(--red);box-shadow:0 0 0 2px rgba(220,38,38,.15),0 2px 10px rgba(220,38,38,.10);background:var(--red-bg)}
.run-bucket.active.failed{border-color:var(--purple);box-shadow:0 0 0 2px rgba(124,58,237,.15),0 2px 10px rgba(124,58,237,.10);background:var(--purple-bg)}
.run-bucket.active.extraction-failed{border-color:var(--purple);box-shadow:0 0 0 2px rgba(124,58,237,.15),0 2px 10px rgba(124,58,237,.10);background:var(--purple-bg)}
.run-bucket.active.not-advice{border-color:var(--text-4);box-shadow:0 0 0 2px rgba(0,0,0,.08),0 2px 10px rgba(0,0,0,.06);background:var(--bg-card)}
.run-bucket.active.amt{border-color:var(--yellow);box-shadow:0 0 0 2px rgba(217,119,6,.15),0 2px 10px rgba(217,119,6,.10);background:var(--yellow-bg)}
.run-bucket::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--secondary);border-radius:var(--r-md) 0 0 var(--r-md)}
.run-bucket.processed::before{background:var(--secondary)}
.run-bucket.matched::before{background:var(--green)}
.run-bucket.unmatched::before{background:var(--red)}
.run-bucket.failed::before{background:var(--purple)}
.run-bucket.extraction-failed::before{background:var(--purple)}
.run-bucket.not-advice::before{background:var(--text-4)}
.run-bucket.amt::before{background:var(--yellow)}
.run-bucket-label{font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;line-height:1.3;min-height:26px;display:flex;align-items:flex-start}
.run-bucket-row{display:flex;align-items:baseline;gap:8px}
.run-bucket-value{font-size:24px;font-weight:700;color:var(--text);line-height:1;font-variant-numeric:tabular-nums}
.run-bucket.matched .run-bucket-value{color:var(--green)}
.run-bucket.unmatched .run-bucket-value{color:var(--red)}
.run-bucket.failed .run-bucket-value{color:var(--purple-text)}
.run-bucket.extraction-failed .run-bucket-value{color:var(--purple-text)}
.run-bucket.not-advice .run-bucket-value{color:var(--text-2)}
.run-bucket.amt .run-bucket-value{color:var(--yellow-text)}
.run-bucket-pct{font-size:11px;font-weight:600;color:var(--text-4);font-variant-numeric:tabular-nums}
.run-bucket-empty{font-size:12px;color:var(--text-4);text-align:center;padding:14px;font-style:italic}
@media (max-width:1280px){.run-buckets-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.run-buckets-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Row detail modal */
.wf-reason-box{background:var(--primary-light);border:1px solid var(--border-md);border-radius:var(--r-md);padding:12px 14px;margin-bottom:14px}
.wf-reason-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--primary);margin-bottom:5px}
.wf-reason-text{font-size:12px;color:var(--text);line-height:1.6}
.mt-12{margin-top:12px}

/* Result pills */
.result-pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em}
.pill-ok{background:var(--green-bg);color:var(--green-text)}
.pill-no{background:var(--red-bg);color:var(--red-text)}

/* Audit log */
.audit-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.audit-auth{background:var(--secondary-light);color:var(--primary)}
.audit-runs{background:var(--green-bg);color:var(--green-text)}
.audit-config{background:#fef9c3;color:#854d0e}
.audit-rules{background:var(--primary-light);color:var(--primary)}
.audit-users{background:var(--red-bg);color:var(--red-text)}
.audit-other{background:var(--border);color:var(--text-3)}

/* ── LOGIN (legacy classes still referenced by some flows) ── */
.login-error{background:var(--red-bg);border:1px solid var(--red-border);border-radius:var(--r-md);padding:10px 14px;font-size:12px;color:var(--red-text);margin-bottom:14px;display:none}

/* ════════════════════════════════════════════════
   AUTH SHELL (login / signup) — two-column product layout
   ════════════════════════════════════════════════ */
.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(380px,1.05fr) 1fr;background:var(--bg-card)}
@media(max-width:960px){.auth-shell{grid-template-columns:1fr}.auth-brand-panel{display:none}}

/* Left panel — branded gradient */
.auth-brand-panel{background:linear-gradient(160deg,#0B1F49 0%,#1E3A8A 55%,#2563EB 100%);color:#fff;padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-brand-panel::after{content:"";position:absolute;right:-100px;bottom:-100px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 70%);pointer-events:none}
.auth-brand-mark{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.auth-brand-name{font-size:22px;font-weight:700;letter-spacing:-.01em;color:#fff;line-height:1}
.auth-brand-tag{font-size:11px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-top:18px}
.auth-brand-title{font-size:34px;font-weight:700;line-height:1.15;letter-spacing:-.025em;margin-top:14px;color:#fff}
.auth-brand-sub{font-size:14px;color:rgba(255,255,255,.80);max-width:440px;line-height:1.6;margin-top:14px}
.auth-brand-points{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-direction:column;gap:10px}
.auth-brand-points li{font-size:13px;color:rgba(255,255,255,.88);display:flex;align-items:center;gap:10px}
.auth-brand-tick{display:inline-flex;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;align-items:center;justify-content:center;font-size:11px;font-weight:700;border:1px solid rgba(255,255,255,.28)}
.auth-brand-foot{font-size:11px;color:rgba(255,255,255,.55);position:relative;z-index:1}

/* Brand logo block — defaults to primary blue background. Admin-controlled
   via /api/config/branding (bg_color, text_color, padding, radius, dimensions).
   When a logo image is uploaded, an <img> replaces the text inside the same
   wrapper. Inline styles set by renderBrandLogo() override these defaults. */
.brand-logo{display:inline-flex;align-items:center;justify-content:center;gap:0;background:var(--primary);color:#fff;border-radius:var(--r-md);font-weight:700;letter-spacing:.01em;line-height:1;padding:6px 12px;font-family:var(--font);box-shadow:0 1px 2px rgba(0,0,0,.12);overflow:hidden}
.brand-logo-text{color:inherit}
.brand-logo-sm{font-size:13px;padding:5px 9px}
.brand-logo-md{font-size:18px;padding:8px 14px;align-self:flex-start}
.nav-brand-logo{display:inline-block;margin-bottom:8px}

/* Right panel — form */
.auth-form-panel{background:var(--bg-card);display:flex;align-items:center;justify-content:center;padding:48px 32px}
.auth-form-inner{width:100%;max-width:400px}
.auth-form-header{margin-bottom:24px}
.auth-form-title{font-size:24px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.auth-form-sub{font-size:13px;color:var(--text-3);margin-top:4px;line-height:1.55}
.auth-error{background:var(--red-bg);border:1px solid var(--red-border);border-radius:var(--r-md);padding:10px 14px;font-size:12px;color:var(--red-text);margin-bottom:14px;display:none;line-height:1.5}
.auth-success{background:var(--green-bg);border:1px solid var(--green-border);border-radius:var(--r-md);padding:12px 14px;font-size:12px;color:var(--green-text);margin-bottom:14px;display:none;line-height:1.55}
.form-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.auth-pw-wrap{position:relative}
.auth-pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:1px solid var(--border);border-radius:var(--r-sm);padding:3px 9px;font-size:11px;color:var(--text-3);cursor:pointer;font-family:inherit}
.auth-pw-toggle:hover{background:var(--bg);color:var(--text-2)}
.auth-pw-meter{height:4px;background:var(--border);border-radius:2px;margin-top:6px;overflow:hidden}
.auth-pw-meter-bar{height:100%;width:0;transition:width .25s ease,background .25s ease;background:var(--red)}
.auth-link{color:var(--secondary);text-decoration:none;font-weight:500}
.auth-link:hover{text-decoration:underline}
.auth-link-muted{color:var(--text-3);font-size:11px;font-weight:500}
.auth-divider{display:flex;align-items:center;gap:10px;margin:18px 0 14px;color:var(--text-4);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.auth-sso-list{display:flex;flex-direction:column;gap:8px}
.auth-sso-btn{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--border-md);border-radius:var(--r-md);background:#fff;color:var(--text);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s,box-shadow .12s;line-height:1.2;text-align:left;width:100%}
.auth-sso-btn:hover:not(:disabled){background:var(--bg);border-color:var(--text-3);box-shadow:0 1px 4px rgba(0,0,0,.06)}
.auth-sso-btn:active:not(:disabled){transform:translateY(.5px)}
.auth-sso-btn:disabled{opacity:.55;cursor:not-allowed}
.auth-sso-btn .auth-sso-label{flex:1}
.auth-sso-icon{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;flex-shrink:0}
.auth-sso-icon svg{display:block}
/* Per-brand hover tints — subtle bottom border accent that matches each brand */
.auth-sso-btn.auth-sso-google:hover    {border-color:#4285F4}
.auth-sso-btn.auth-sso-microsoft:hover {border-color:#00A4EF}
.auth-sso-btn.auth-sso-apple:hover     {border-color:#000}
.auth-sso-btn.auth-sso-okta:hover      {border-color:#007DC1}
.auth-sso-btn.auth-sso-saml:hover      {border-color:var(--primary)}
.auth-sso-btn.auth-sso-github:hover    {border-color:#181717}
.auth-sso-btn.auth-sso-linkedin:hover  {border-color:#0A66C2}
.auth-sso-btn.auth-sso-slack:hover     {border-color:#E01E5A}
.auth-sso-btn.auth-sso-auth0:hover     {border-color:#EB5424}
.auth-sso-btn.auth-sso-directory:hover {border-color:var(--purple)}
.auth-form-foot{margin-top:24px;padding-top:16px;border-top:1px solid var(--border);text-align:center;font-size:13px;color:var(--text-3)}

/* Form helpers used in modals + auth */
.form-input{width:100%;padding:9px 12px;border:1px solid var(--border-md);border-radius:var(--r-md);font-size:13px;background:var(--bg-card);color:var(--text);font-family:inherit;transition:border-color .12s,box-shadow .12s}
.form-input:focus{outline:none;border-color:var(--secondary);box-shadow:0 0 0 3px var(--secondary-muted)}
.form-input:disabled{background:var(--bg);cursor:not-allowed;opacity:.7}
.form-hint{font-size:11px;color:var(--text-4);margin-top:5px;line-height:1.45}
.form-checkbox{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);cursor:pointer;user-select:none}
.form-checkbox input{width:16px;height:16px;cursor:pointer}

/* ── ADMIN CONSOLE ── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--primary);padding:20px}
.login-card{background:var(--bg-card);border-radius:var(--r-2xl);padding:40px;width:100%;max-width:400px;box-shadow:var(--shadow-xl)}
.login-footer{margin-top:20px;text-align:center;font-size:11px;color:var(--text-4)}

/* ── ADMIN CONSOLE ── */
.admin-layout{display:grid;grid-template-columns:220px 1fr;gap:0;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.settings-nav{background:var(--bg);border-right:1px solid var(--border)}
.settings-nav-hdr{padding:14px 16px;font-size:10px;font-weight:700;color:var(--text-4);text-transform:uppercase;letter-spacing:0.08em;border-bottom:1px solid var(--border)}
.settings-nav-item{display:flex;align-items:center;gap:9px;padding:10px 16px;font-size:13px;color:var(--text-2);cursor:pointer;transition:var(--transition);border-left:3px solid transparent;background:none;border-top:none;border-right:none;border-bottom:none;width:100%;text-align:left}
.settings-nav-item:hover{background:var(--bg-hover);color:var(--text)}
.settings-nav-item.active{color:var(--primary);border-left-color:var(--primary);background:var(--primary-light);font-weight:600}
.settings-content{background:var(--bg-card)}

/* ── TOAST ── */
.toast-container{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 16px;min-width:280px;max-width:380px;display:flex;align-items:flex-start;gap:10px;box-shadow:var(--shadow-md);animation:slideIn .2s ease}
.toast.success{border-left:3px solid var(--green)}
.toast.error{border-left:3px solid var(--red)}
.toast.warning{border-left:3px solid var(--yellow)}
.toast-icon{font-size:16px;flex-shrink:0;margin-top:1px}
.toast-title{font-size:13px;font-weight:600;color:var(--text)}
.toast-msg{font-size:12px;color:var(--text-3);margin-top:2px}
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}

/* ── MISC ── */
.action-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.action-bar-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.action-bar-right{display:flex;gap:8px}
.section-title{font-size:13px;font-weight:700;color:var(--primary);margin-bottom:14px;display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:2px solid var(--primary-light)}
.divider{height:1px;background:var(--border);margin:16px 0}
.empty-state{padding:48px 24px;text-align:center}
.empty-state-icon{font-size:40px;margin-bottom:12px;opacity:.6}
.empty-state-title{font-size:15px;font-weight:600;color:var(--text-3);margin-bottom:6px}
.empty-state-sub{font-size:12px;color:var(--text-4)}
.key-value-grid{display:grid;grid-template-columns:max-content 1fr;gap:5px 14px;font-size:12px}
.kv-key{color:var(--text-3);font-weight:500}
.kv-val{color:var(--text);font-family:var(--mono)}
.hidden{display:none!important}
.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}.mb-24{margin-bottom:24px}
.text-green{color:var(--green)}.text-red{color:var(--red)}.text-yellow{color:var(--yellow)}.text-primary{color:var(--primary)}
.text-mono{font-family:var(--mono)}.text-sm{font-size:12px}.text-xs{font-size:11px}
.conf-bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-top:4px}
.conf-fill{height:100%;border-radius:3px}

/* Confidence ring */
.ring-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
.ring-label{position:absolute;font-size:14px;font-weight:700;color:var(--primary)}

@media(max-width:900px){:root{--nav-w:0}.nav{display:none}.main{margin-left:0}.upload-grid{grid-template-columns:1fr}.viz-panels{grid-template-columns:1fr}.admin-layout{grid-template-columns:1fr}.wf-grid{grid-template-columns:1fr}.wf-meta-grid{grid-template-columns:1fr}.wf-run-header{flex-direction:column}.wf-run-header-actions{width:100%}}

/* ── Range slider ── */
input[type=range].form-control{
  padding:0;height:auto;background:transparent;border:none;box-shadow:none;
  -webkit-appearance:none;appearance:none;cursor:pointer;
}
input[type=range].form-control:focus{box-shadow:none;border-color:transparent}
input[type=range].form-control::-webkit-slider-runnable-track{
  height:6px;background:var(--border-md);border-radius:3px;
}
input[type=range].form-control::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;
  background:var(--secondary);border-radius:50%;margin-top:-6px;
  box-shadow:0 1px 4px rgba(0,0,0,0.2);
}
input[type=range].form-control::-moz-range-thumb{
  width:18px;height:18px;background:var(--secondary);
  border-radius:50%;border:none;box-shadow:0 1px 4px rgba(0,0,0,0.2);
}
select.form-control{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  padding-right:30px;-webkit-appearance:none;appearance:none;
}

/* ══════════════════════════════════════════
   Reconciliation Result Cards
   ══════════════════════════════════════════ */

.recon-section-hdr{
  display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.04em;
  margin:12px 0 8px;
}
.recon-sec-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* Card wrapper */
.recon-card{
  border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--bg-card);margin-bottom:10px;
  cursor:pointer;transition:box-shadow .15s, border-color .15s;overflow:hidden;
}
.recon-card:hover{box-shadow:0 2px 12px rgba(0,0,0,.09);border-color:var(--border-md)}
.recon-card-miss{border-left:3px solid var(--red)}
.recon-card:not(.recon-card-miss){border-left:3px solid var(--green)}

/* Card header */
.recon-card-hdr{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 14px;border-bottom:1px solid var(--border);
  background:var(--bg);
}
.recon-utr-lbl{font-family:var(--mono);font-size:11px;color:var(--text-3);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recon-cust-lbl{font-size:12px;font-weight:500;color:var(--text-2)}
.recon-conf-lbl{font-size:11px;font-weight:600;margin-left:auto}
.conf-hi{color:var(--green)} .conf-mid{color:var(--yellow)} .conf-lo{color:var(--red)}
.recon-diff-lbl{font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px}
.diff-ok{background:var(--green-bg);color:var(--green-text)} .diff-err{background:var(--red-bg);color:var(--red)}

/* Three-panel body */
.recon-card-body{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0}
.recon-panel{padding:12px 14px;border-right:1px solid var(--border)}
.recon-panel:last-child{border-right:none}
.recon-p-missing{background:var(--bg)}
.recon-panel-lbl{
  font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-4);margin-bottom:8px;
}
.recon-p-email .recon-panel-lbl{color:var(--secondary)}
.recon-p-bank  .recon-panel-lbl{color:var(--green)}
.recon-p-sap   .recon-panel-lbl{color:#7C3AED}

/* key-value rows inside card panels */
.recon-kv2{display:flex;gap:4px;align-items:flex-start;margin-bottom:4px;line-height:1.4}
.recon-kv2 .rk{
  font-size:10px;color:var(--text-4);font-weight:500;
  min-width:72px;flex-shrink:0;padding-top:1px;
}
.recon-kv2 .rv{font-size:11px;color:var(--text-2);word-break:break-all}
.recon-kv2 .rv.mono{font-family:var(--mono);font-size:10px}

/* "not found" placeholder */
.recon-miss-box{padding:16px 0;text-align:center}
.recon-miss-title{font-size:11px;font-weight:600;color:var(--text-3)}
.recon-miss-reason{font-size:10px;color:var(--text-4);margin-top:4px;word-break:break-word}

/* Modal three-panel grid */
.recon-modal-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:4px}
.recon-modal-panel{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:14px}

/* "Additional Content" panel — shown in row-detail modal for failed / unmatched / mismatch rows. */
.wf-extra-content{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.wf-extra-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:var(--bg-card);border-bottom:1px solid var(--border)}
.wf-extra-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.wf-extra-body{margin:0;padding:14px 16px;font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--text);white-space:pre-wrap;word-break:break-word;max-height:360px;overflow:auto;background:var(--bg)}
.wf-extra-empty{padding:14px 16px;font-size:12px;color:var(--text-4);font-style:italic}
.recon-card-failed{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.recon-card-failed:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.06)}

/* Error Details panel — shown inside row-detail modal for kind='failed' rows. */
.wf-error-details{background:var(--bg);border:1px solid var(--red-border,var(--border));border-radius:var(--r-md);overflow:hidden}
.wf-error-details .wf-extra-header{background:var(--red-bg);border-bottom:1px solid var(--red-border,var(--border))}
.wf-error-details-body{padding:14px 16px}
.wf-error-hint{padding:10px 12px;margin-bottom:12px;background:var(--yellow-bg,#fff8e1);border:1px solid var(--yellow-border,#f0d36a);border-radius:var(--r-sm,6px);font-size:12px;line-height:1.55;color:var(--text)}
.wf-error-hint strong{color:var(--red-text,#9b1d1d)}
.wf-error-stack-label{margin-top:12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:5px}
.wf-error-stack{margin:0;padding:10px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-sm,6px);font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--text-2);white-space:pre-wrap;word-break:break-word;max-height:220px;overflow:auto}
.wf-error-empty{margin-top:10px;padding:8px 10px;font-size:11px;color:var(--text-4);font-style:italic;background:var(--bg-card);border-radius:var(--r-sm,6px)}

@media(max-width:900px){
  .recon-card-body{grid-template-columns:1fr}
  .recon-panel{border-right:none;border-bottom:1px solid var(--border)}
  .recon-panel:last-child{border-bottom:none}
  .recon-modal-grid{grid-template-columns:1fr}
}

/* ════════════════════════════════════════════════
   DASHBOARD (dashboard.html)
   ════════════════════════════════════════════════ */
.dash-hero{padding:32px 36px 24px;background:linear-gradient(135deg,#1E3A8A 0%,#2563EB 60%,#3B82F6 100%);color:#fff;position:relative;overflow:hidden}
.dash-hero::after{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 70%);pointer-events:none}
.dash-hero-row{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;position:relative;z-index:1}
.dash-hero-text{flex:1 1 360px}
.dash-hero-eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:6px}
.dash-hero-title{font-size:30px;font-weight:700;line-height:1.15;color:#fff;letter-spacing:-.02em;margin-bottom:8px}
.dash-hero-sub{font-size:14px;color:rgba(255,255,255,.85);max-width:640px;line-height:1.55}
.dash-hero-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.dash-hero-actions .btn{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(4px)}
.dash-hero-actions .btn:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.42)}
.dash-hero-actions .btn-primary{background:#fff;color:var(--primary);border-color:#fff}
.dash-hero-actions .btn-primary:hover{background:rgba(255,255,255,.92);color:var(--primary-hover)}

/* KPI strip sits inside the hero, below the title row */
.kpi-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:24px;position:relative;z-index:1}
.kpi-card{background:rgba(255,255,255,.96);color:var(--text);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--shadow-md);border:1px solid rgba(255,255,255,.6);position:relative;overflow:hidden}
.kpi-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--secondary);border-radius:var(--r-lg) 0 0 var(--r-lg)}
.kpi-card.kpi-accent-green::before{background:var(--green)}
.kpi-card.kpi-accent-yellow::before{background:var(--yellow)}
.kpi-card.kpi-skeleton{height:90px;background:rgba(255,255,255,.6);border-radius:var(--r-lg)}
.kpi-label{font-size:11px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.kpi-value{font-size:30px;font-weight:700;color:var(--text);line-height:1;font-variant-numeric:tabular-nums}
.kpi-value-sm{font-size:18px;font-weight:600;color:var(--text);line-height:1.2}
.kpi-foot{font-size:11px;color:var(--text-4);margin-top:6px}
@media(max-width:1100px){.kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.kpi-strip{grid-template-columns:1fr}.dash-hero{padding:24px 20px 18px}.dash-hero-title{font-size:24px}}

/* Section header inside content */
.dash-section-hdr{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:28px 0 18px;padding:0 4px}
.dash-section-title{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.dash-section-sub{font-size:12px;color:var(--text-3);margin-top:4px;line-height:1.5}
.dash-filter-bar{display:flex;gap:6px;flex-wrap:wrap}

/* Run summary cards */
.dash-runs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:1100px){.dash-runs-grid{grid-template-columns:1fr}}
.run-summary-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .15s ease,border-color .15s ease}
.run-summary-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-md)}
.run-summary-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg)}
.run-summary-head-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.run-summary-rel{font-size:12px;color:var(--text-2);font-weight:500}
.run-summary-by{font-size:11px;color:var(--text-3)}
.run-summary-head-right{display:flex;align-items:center;gap:10px}
.run-summary-id{font-size:10px;color:var(--text-4);background:var(--bg-card);padding:2px 6px;border-radius:var(--r-sm);border:1px solid var(--border)}

/* Two big tiles */
.run-summary-tiles{display:grid;grid-template-columns:1fr 1.4fr;gap:1px;background:var(--border)}
.rs-tile{background:var(--bg-card);padding:18px 20px;border:none;text-align:left;font-family:inherit;width:100%;cursor:default;display:flex;flex-direction:column;justify-content:center;min-height:120px;transition:background .15s,transform .1s}
.rs-tile-success{cursor:pointer;background:linear-gradient(135deg,var(--primary-light) 0%,#fff 100%);position:relative}
.rs-tile-success:hover{background:linear-gradient(135deg,var(--secondary-light) 0%,#fff 100%)}
.rs-tile-success:focus-visible{outline:2px solid var(--secondary);outline-offset:-3px}
.rs-tile-label{font-size:11px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
.rs-tile-value{font-size:34px;font-weight:700;color:var(--text);line-height:1;font-variant-numeric:tabular-nums}
.rs-tile-success.success-hi  .rs-tile-value{color:var(--green)}
.rs-tile-success.success-mid .rs-tile-value{color:var(--yellow-text)}
.rs-tile-success.success-lo  .rs-tile-value{color:var(--red)}
.rs-tile-foot{font-size:11px;color:var(--text-3);margin-top:8px;line-height:1.4}
.rs-tile-chevron{font-size:12px;color:var(--text-3);transition:transform .2s ease}
.run-summary-card.open .rs-tile-chevron{transform:rotate(180deg)}

/* Detail panel — hidden by default, expanded on click */
.run-summary-detail{display:none;padding:14px 16px;border-top:1px solid var(--border);background:var(--bg)}
.run-summary-card.open .run-summary-detail{display:block}
.rs-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:680px){.rs-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rs-detail-tile{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px;position:relative;overflow:hidden}
.rs-detail-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--secondary)}
.rs-detail-tile.matched::before{background:var(--green)}
.rs-detail-tile.unmatched::before{background:var(--red)}
.rs-detail-tile.extr::before{background:var(--purple)}
.rs-detail-tile.na::before{background:var(--text-4)}
.rs-detail-tile.amt::before{background:var(--yellow)}
.rs-detail-label{font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.rs-detail-row{display:flex;align-items:baseline;gap:6px}
.rs-detail-value{font-size:20px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.rs-detail-tile.matched   .rs-detail-value{color:var(--green)}
.rs-detail-tile.unmatched .rs-detail-value{color:var(--red)}
.rs-detail-tile.extr      .rs-detail-value{color:var(--purple-text)}
.rs-detail-tile.na        .rs-detail-value{color:var(--text-2)}
.rs-detail-tile.amt       .rs-detail-value{color:var(--yellow-text)}
.rs-detail-pct{font-size:11px;font-weight:600;color:var(--text-4);font-variant-numeric:tabular-nums}

/* ════════════════════════════════════════════════
   CONNECTIONS (connections.html)
   ════════════════════════════════════════════════ */
.conn-tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:18px;padding:0 4px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin}
.conn-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:transparent;border:none;border-bottom:2px solid transparent;font-size:13px;font-weight:600;color:var(--text-3);cursor:pointer;font-family:inherit;transition:color .12s,border-color .12s}
.conn-tab:hover{color:var(--text-2)}
.conn-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.conn-tab-icon{font-size:14px}
.conn-tab-count{font-size:11px;color:var(--text-3);background:var(--bg);padding:2px 8px;border-radius:999px;min-width:22px;text-align:center;border:1px solid var(--border)}
.conn-tab.active .conn-tab-count{color:var(--primary);background:var(--primary-light);border-color:var(--primary-border)}

.conn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.conn-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,border-color .15s}
.conn-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-md)}
.conn-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--bg) 0%,var(--bg-card) 100%)}
.conn-card-head-left{display:flex;align-items:center;gap:12px}
.conn-card-icon{font-size:24px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--primary-light);border-radius:var(--r-md);border:1px solid var(--primary-border)}
.conn-card-name{font-size:14px;font-weight:600;color:var(--text);line-height:1.3}
.conn-card-type{font-size:11px;color:var(--text-3);margin-top:2px}
.conn-status-pill{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:999px;white-space:nowrap}
.conn-status-pill.pill-ok{background:var(--green-bg);color:var(--green-text);border:1px solid var(--green-border)}
.conn-status-pill.pill-no{background:var(--red-bg);color:var(--red-text);border:1px solid var(--red-border)}
.conn-status-pill.pill-grey{background:var(--bg);color:var(--text-3);border:1px solid var(--border-md)}
.conn-card-body{padding:12px 16px;flex:1}
.conn-meta-row{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;border-bottom:1px dashed var(--border)}
.conn-meta-row:last-child{border-bottom:none}
.conn-meta-key{color:var(--text-3);font-weight:500}
.conn-meta-val{color:var(--text);font-weight:500}
.conn-test-msg{margin-top:10px;padding:8px 10px;font-size:11px;line-height:1.5;color:var(--text-2);background:var(--bg);border-radius:var(--r-sm);border:1px solid var(--border)}
.conn-test-msg.is-error{background:var(--red-bg);color:var(--red-text);border-color:var(--red-border)}
.conn-card-actions{display:flex;gap:6px;padding:10px 14px;border-top:1px solid var(--border);background:var(--bg);flex-wrap:wrap}

/* Modal form styling */
.conn-form-row{margin-bottom:14px}
.conn-target-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:6px}
.conn-target-opt{cursor:pointer;display:block}
.conn-target-opt input{position:absolute;opacity:0;pointer-events:none}
.conn-target-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--r-md);transition:border-color .12s,background .12s;background:var(--bg-card)}
.conn-target-icon{font-size:22px}
.conn-target-sub{color:var(--text-3);font-size:10px;font-family:var(--mono)}
.conn-target-opt input:checked + .conn-target-card{border-color:var(--primary);background:var(--primary-light);box-shadow:0 0 0 2px var(--primary-muted)}
.conn-target-opt input:disabled + .conn-target-card{opacity:.55;cursor:not-allowed}
.conn-divider{display:flex;align-items:center;gap:10px;margin:18px 0 12px;color:var(--text-3);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.conn-divider::before,.conn-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.conn-dynamic-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.conn-field{display:flex;flex-direction:column;gap:5px}
.conn-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}