/* Kharakapas AR Dashboard — minimal, practical */
:root {
  --brand: #1f4e78;
  --brand-light: #e8f1f8;
  --bg: #fafafa;
  --text: #222;
  --muted: #777;
  --border: #e5e5e5;
  --danger: #c0392b;
  --success: #27ae60;
  --warning: #f39c12;
}
* { box-sizing: border-box; }
body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; margin:0; color:var(--text); background:var(--bg); font-size: 14px; line-height: 1.5; }

/* nav */
.navbar { display:flex; justify-content:space-between; align-items:center;
  padding: 12px 24px; background: var(--brand); color:#fff; }
.navbar a { color:#fff; text-decoration:none; margin-right: 14px; }
.navbar .brand { font-weight:600; font-size: 16px; }
.nav-links a:hover { text-decoration: underline; }
.nav-right { display:flex; align-items:center; gap: 14px; font-size: 13px; }
.nav-right .user { opacity: .85; }
.btn-link { text-decoration: underline; cursor: pointer; }
.navbar .logout-btn { color:#fff; text-decoration: underline; font-size: 13px; margin-right: 0; }

/* container */
.container { max-width: 1400px; margin: 0 auto; padding: 20px 24px 80px; }
main h1 { margin: 10px 0 18px; font-size: 22px; font-weight: 600; }
main h2 { margin: 30px 0 10px; font-size: 16px; font-weight: 600; color:var(--brand); }

/* login */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background: var(--brand-light);}
.login-card { background:#fff; padding: 40px; border-radius: 8px; box-shadow:0 2px 20px rgba(0,0,0,.08); min-width: 340px; text-align:center; }
.login-card h1 { color: var(--brand); margin: 0 0 4px; font-size: 26px; }
.login-card .tag { color: var(--muted); margin: 0 0 22px; font-size: 13px; }
.btn { display:inline-block; padding: 10px 16px; border-radius: 4px; text-decoration:none;
  border: 1px solid var(--brand); color:var(--brand); background:#fff; cursor:pointer; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-block { display: block; width: 100%; }
.error { background:#fee; color:var(--danger); padding:8px 12px; border-radius:4px; margin-bottom:14px; font-size:13px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* KPI grid */
.kpi-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin: 18px 0; }
.kpi { background:#fff; border:1px solid var(--border); border-radius:6px; padding:16px; }
.kpi-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.kpi-value { font-size: 22px; font-weight: 600; color: var(--brand); }
.kpi-sub { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* Tables */
table.data { width:100%; border-collapse: collapse; background:#fff; font-size: 13px; }
table.data th, table.data td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align:left; }
table.data th { background: var(--brand-light); color: var(--brand); font-weight: 600; font-size: 12px; text-transform: uppercase; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tbody tr:hover { background: #f4f8fb; }
table.data tfoot th { background: #fff7e8; border-top: 2px solid var(--warning); }
.row-paid { background:#f4fcf6 !important; }
.row-overdue { background:#fdf2f2 !important; }

/* classification tags */
[class^="tag-"] { display:inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.tag-export { background:#fdecea; color:#c0392b; }
.tag-mbo { background:#e8f1f8; color:#1f4e78; }
.tag-marketplace { background:#e8f5e9; color:#27ae60; }
.tag-shopify-shopper { background:#f3e5f5; color:#7b1fa2; }
.tag-store-transfer { background:#fff3e0; color:#e67e22; }
.tag-gateway-suspense { background:#eceff1; color:#455a64; }
.tag-individual { background:#f5f5f5; color:#555; }
.tag-b2b { background:#e8f1f8; color:#1f4e78; }
.tag-other { background:#f5f5f5; color:#555; }

/* Filter bar */
.filter-bar { display:flex; gap:18px; align-items:center; padding:10px 14px; background:#fff; border:1px solid var(--border); border-radius:4px; margin-bottom:14px; }
.filter-bar label { font-size: 13px; color: var(--muted); }
.filter-bar select, .filter-bar input { margin-left:6px; padding:4px 6px; border:1px solid var(--border); border-radius: 3px; font-size: 13px; }

.back { text-decoration: none; color: var(--brand); font-size: 13px; }
.pull-right { float: right; font-size: 12px; }

/* Footer */
.footer { position: fixed; bottom: 0; left:0; right:0; background:#fff;
  border-top:1px solid var(--border); padding: 6px 24px; font-size: 11px; color: var(--muted);
  display:flex; justify-content: space-between; }

/* ── Launcher page — dark navy with white tiles ────────────────────────── */
body.launcher-body {
  background: #1e3a5f;
  color: #fff;
  min-height: 100vh;
}
body.launcher-body .navbar {
  background: #a8d0e6;
}
body.launcher-body .navbar .brand,
body.launcher-body .navbar a,
body.launcher-body .navbar .user {
  color: #0f2540;
}
body.launcher-body .navbar .nav-links { display: none; } /* simplified top-bar on launcher */
body.launcher-body .navbar .logout-btn {
  border: 1.5px solid #0f2540;
  padding: 6px 18px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
}
body.launcher-body .navbar .logout-btn:hover {
  background: #0f2540;
  color: #fff;
}

body.launcher-body .footer { background: #16304f; border-top-color: #2a4a6e; color: #a8b8cc; }

.launcher-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 28px 0 18px;
  flex-wrap: wrap;
}
.launcher-greeting {
  font-size: 20px;
  color: #e8eef5;
}
.launcher-greeting strong { color: #fff; }

.tool-search {
  background: #29476b;
  border: 1px solid #4a6890;
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  min-width: 280px;
  outline: none;
}
.tool-search::placeholder { color: #8aa5c4; }
.tool-search:focus { border-color: #a8d0e6; }

.launcher-section-label {
  font-size: 12px;
  letter-spacing: 1.5px;
  font-weight: 600;
  color: #a8c0dc;
  margin: 8px 0 16px;
}
.launcher-section-label .count { color: #7a96b5; font-weight: 500; }

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
  margin-top: 10px;
}

.tool-tile {
  background: #fff;
  color: #222;
  border-radius: 8px;
  padding: 22px 22px 18px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  min-height: 200px;
}
.tool-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.tool-tile-soon { cursor: not-allowed; opacity: 0.6; }
.tool-tile-soon:hover { transform: none; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }

.tool-tile-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 14px;
}
.tool-tile-icon {
  width: 44px; height: 44px;
  background: #d9eafc;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.tool-tile-star {
  color: #bbb;
  font-size: 18px;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}
.tool-tile-star:hover { color: #888; }
.tool-tile-star.filled { color: #f39c12; }

.tool-tile-title {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.tool-tile-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  flex: 1;
  margin-bottom: 14px;
}
.tool-tile-footer { margin-top: auto; }

.badge-live {
  display: inline-block;
  padding: 3px 12px;
  background: #e8f7ed;
  color: #1e7e34;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.badge-soon {
  display: inline-block;
  padding: 3px 12px;
  background: #fff3e0;
  color: #b26a00;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.no-results {
  text-align: center;
  padding: 60px 20px;
  color: #8aa5c4;
  font-size: 15px;
}

/* ── PO Upload / Review ────────────────────────────────── */
.upload-modes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: 20px;
}
@media (max-width: 900px) {
  .upload-modes { grid-template-columns: 1fr; }
}
.upload-mode {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 18px;
}
.upload-mode h2 { margin-top: 0; font-size: 18px; }
.upload-tile-batch { min-height: 180px; }

.po-upload-form { margin-top: 20px; }
.upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}
.upload-tile {
  display: block; cursor: pointer;
  background: #fff; border: 2px dashed var(--border); border-radius: 8px;
  padding: 28px 18px; text-align: center;
  transition: border-color .15s, background .15s;
}
.upload-tile:hover { border-color: var(--brand); background: var(--brand-light); }
.upload-tile.required { border-color: var(--brand); }
.upload-ico { font-size: 36px; margin-bottom: 8px; }
.upload-caption { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.upload-caption em { color: var(--brand); font-style: normal; font-weight: 500; }
.upload-tile input[type=file] {
  display: block; margin: 0 auto; font-size: 12px;
}
.upload-filename { margin-top: 6px; font-size: 12px; color: #555; font-style: italic; }
.email-text-fallback { margin: 18px 0; background:#fff; padding:14px; border:1px solid var(--border); border-radius:6px; }
.email-text-fallback summary { cursor: pointer; font-weight: 500; color: var(--brand); }
.email-text-fallback textarea {
  width: 100%; margin-top:10px; padding:8px; font-family:ui-monospace,monospace; font-size:12px;
  border:1px solid var(--border); border-radius:4px; resize:vertical;
}
.upload-actions { display: flex; gap: 14px; align-items: center; margin-top: 14px; }

/* Review table */
.review-header {
  display: flex; justify-content: space-between; align-items: flex-end; margin: 18px 0;
  flex-wrap: wrap; gap: 10px;
}
.stats-pill {
  background:#fff; padding:8px 16px; border:1px solid var(--border); border-radius:20px;
  font-size: 13px; font-weight: 500;
}
.stats-pill .red { color: var(--danger); font-weight: 700; }

.review-section { margin: 22px 0; }
.review-section h2 { margin: 0 0 12px; color: var(--brand); font-size: 16px; }
.review-section h3 { margin: 10px 0; font-size: 14px; color: #333; }

.review-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; }
.review-table th, .review-table td { padding: 7px 10px; border-bottom: 1px solid #f0f0f0; text-align: left; }
.review-table th { background: var(--brand-light); color: var(--brand); font-weight: 600; font-size: 11px; text-transform: uppercase; }
.review-table .f-label { font-weight: 500; color: #333; width: 180px; }
.review-table .f-source { color: #666; font-family: ui-monospace, monospace; font-size: 12px; width: 180px; }
.review-table .f-flag { width: 120px; text-align: right; }
.review-table input[type=text] {
  width: 100%; padding: 4px 6px; border: 1px solid var(--border); border-radius: 3px; font-size: 13px;
}
.review-table .input-resolve { background: #fff0f0; border-color: var(--danger); }

.row-agree td { background: #f4fcf6; }
.row-one_sided td, .row-det_only td, .row-llm_only td { background: #fffbe8; }
.row-disagree td { background: #fdf2f2; }
.row-both_null td { background: #fafafa; color: #999; }
.row-erp td { background: #f4f8fb; border-top: 2px solid var(--brand); }

.chip { display:inline-block; padding:1px 8px; border-radius:10px; font-size:10px; font-weight:600; text-transform: uppercase; }
.chip-agree     { background:#d4edda; color:#155724; }
.chip-one_sided, .chip-det_only, .chip-llm_only { background:#fff3cd; color:#856404; }
.chip-disagree  { background:#f8d7da; color:#721c24; }
.chip-both_null { background:#f0f0f0; color:#6c757d; }
.chip-uploaded, .chip-uploading { background:#e8f1f8; color: var(--brand); }
.chip-drafted   { background:#d4edda; color:#155724; }
.chip-reviewed  { background:#fff3cd; color:#856404; }
.chip-abandoned { background:#f8d7da; color:#721c24; }

.line-card { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 14px; margin-bottom: 14px; }

.review-actions {
  position: sticky; bottom: 0; background: #fff; padding: 14px;
  border-top: 2px solid var(--border); margin: 20px -24px 0;
  display: flex; gap: 14px; align-items: center;
}

.tag-aza    { background:#fde2d8; color:#c0392b; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; text-transform:uppercase;}
.tag-ogaan  { background:#e7d8ff; color:#5e35b1; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; text-transform:uppercase;}
.tag-nete   { background:#d8f0e3; color:#2e7d32; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; text-transform:uppercase;}
.tag-unknown{ background:#f0f0f0; color:#666; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; text-transform:uppercase;}

.error-box { padding:10px 14px; background:#fdecea; color:#c0392b; border-radius:4px; }

/* Drop-zone states for PO upload */
.upload-tile { position: relative; user-select: none; }
.upload-tile .upload-hint {
  font-size: 11px; color: #999; margin-bottom: 10px;
}
.upload-tile.drop-active {
  border-color: var(--brand);
  background: #e8f1f8;
  transform: scale(1.01);
}
.upload-tile.has-file {
  border-style: solid;
  border-color: #27ae60;
  background: #f4fcf6;
}
.upload-tile.has-file .upload-hint { display: none; }
.upload-tile.drop-reject {
  border-color: var(--danger);
  background: #fdecea;
  animation: shake 0.3s;
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ERP match banner + 3-col review */
.erp-banner {
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  padding: 14px 18px; margin-bottom: 12px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
}
.erp-banner-ok { border-left: 4px solid #27ae60; background: #f4fcf6; }
.erp-banner-miss { border-left: 4px solid #f39c12; background: #fff8e6; }
.erp-banner-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.erp-banner code { background: #fff; padding: 1px 6px; border-radius: 3px; font-size: 12px; }

.review-table-3col .f-erp { background:#fbfffe; border-left: 2px solid #d4edda; font-weight: 500; color: #155724; }
.chip-erp { background:#d4edda; color:#155724; }

/* Block banner + line-level block states */
.block-banner {
  background: #fdecea;
  border-left: 4px solid var(--danger);
  border-radius: 6px;
  padding: 14px 20px;
  margin: 16px 0;
  color: #8e2822;
}
.block-banner-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.block-banner-body { font-size: 13px; line-height: 1.5; }

.line-card.line-blocked {
  border: 2px solid var(--danger);
  background: #fffafa;
}
.line-card.line-blocked.line-ok-now {
  border-color: #27ae60;
  background: #f4fcf6;
}

.line-badge {
  display: inline-block; margin-left: 10px;
  padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; vertical-align: middle;
}
.line-badge-blocked { background: #fdecea; color: #c0392b; }
.line-badge-ready   { background: #d4edda; color: #155724; }
.line-badge-fuzzy   { background: #fff3cd; color: #856404; }

.fetch-erp-btn {
  margin-left: 8px; padding: 3px 10px; font-size: 12px; font-weight: 600;
  background: #fff; color: var(--brand); border: 1px solid var(--brand);
  border-radius: 4px; cursor: pointer; vertical-align: middle;
}
.fetch-erp-btn:hover { background: var(--brand); color: #fff; }

.fuzzy-warn {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  background: #fff3cd; color: #856404; border-radius: 3px;
  font-size: 11px; font-weight: 600;
}

.tax-template-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tax-template-select {
  padding: 6px 10px; font-size: 13px; min-width: 340px;
  border: 1px solid var(--border); border-radius: 4px; background: #fff;
}

.tax-bands { margin-top: 4px; line-height: 1.6; }
.tax-band {
  display: inline-block; padding: 1px 7px; margin-right: 3px;
  background: #eef4fb; color: #1b3a5a; border-radius: 3px;
  font-size: 11px; font-weight: 600;
}
.tax-band .muted { font-weight: 400; }

.warning-pill {
  display:inline-block; padding:1px 6px; border-radius:8px;
  background:#fff3cd; color:#856404; font-size:10px; font-weight:700; text-transform:uppercase;
}
.row-invalid-size td { background: #fff3cd !important; }
.row-invalid-size .f-source { color: #856404; font-weight: 500; }

/* Candidate pick button */
.pick-candidate {
  background: var(--brand); color: #fff; border: 0; border-radius: 3px;
  padding: 2px 8px; font-size: 11px; cursor: pointer; margin-right: 6px;
}
.pick-candidate:hover { background: #153e60; }
.erp-candidates-list { margin-top: 6px; }
.erp-candidates-list ul { margin: 6px 0 0 20px; padding: 0; font-size: 12px; }
.erp-candidates-list li { padding: 2px 0; }
.line-status-badge { transition: background .2s; }
.erp-item-status { padding: 4px 0; font-size: 12px; }
.erp-item-status code { background: #f0f0f0; padding: 1px 4px; border-radius: 3px; }

/* Required-field indicators */
.req-star { color: var(--danger); font-weight: 700; }
.input-required-empty {
  background: #fffaf0 !important;
  border: 2px solid var(--warning) !important;
  animation: pulse 1.4s infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(243,156,18,.4); }
  50%     { box-shadow: 0 0 0 4px rgba(243,156,18,.15); }
}
.chip-required { background:#fdecea; color:#c0392b; }
.row-missing-required td { background: #fffaf0 !important; }

/* PO vs ERP image comparison */
.image-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
  padding: 10px 12px;
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 10px 0 16px;
}
.image-compare .img-box {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 10px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.image-compare .img-label {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 8px; font-weight: 600;
}
.image-compare .img-gallery {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.image-compare .img-gallery img {
  max-height: 180px; max-width: 160px;
  border-radius: 3px;
  border: 1px solid #e0e0e0;
  object-fit: contain;
  background: #fafafa;
  transition: transform .15s;
}
.image-compare .img-gallery a:hover img {
  transform: scale(1.04);
  border-color: var(--brand);
}
.image-compare .img-empty {
  color: #aaa; font-style: italic; font-size: 12px;
  padding: 40px 0;
}
.image-compare .img-divider {
  font-size: 22px; color: #bbb; align-self: center;
}

/* ── Bank Voucher Builder ───────────────────────────────────────────── */
.pill { display:inline-block; padding: 2px 10px; border-radius: 10px;
        font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.pill-ok    { background:#e8f7ed; color:#1e7e34; }
.pill-new   { background:#e8f1f8; color:#1f4e78; }
.pill-warn  { background:#fff3e0; color:#b26a00; }
.pill-ready { background:#fff9c4; color:#8d6e00; }
.pill-muted { background:#eceff1; color:#455a64; }
.pill-err   { background:#fdecea; color:#c0392b; }

.banner-ok { background:#e8f7ed; color:#1e7e34; padding:10px 14px; border-radius:4px; margin: 12px 0; }
.banner-err { background:#fdecea; color:#c0392b; padding:10px 14px; border-radius:4px; margin: 12px 0; }

.upload-form { max-width:560px; margin: 20px 0; background:#fff; padding:24px; border-radius:8px; border:1px solid var(--border); }
.form-row { margin-bottom: 14px; }
.form-row label { display:block; font-size:13px; color:var(--muted); font-weight:500; }
.form-row input, .form-row select { margin-top:6px; padding:8px 10px; border:1px solid var(--border); border-radius:4px; width:100%; font-size:14px; }

.link-primary { color: var(--brand); font-weight: 600; text-decoration: none; white-space: nowrap; }
.link-primary:hover { text-decoration: underline; }

.cls-b2b_receipt, .cls-payu, .cls-razorpay, .cls-card_settlement, .cls-cashfree { color:#1f4e78; font-weight:500; }
.cls-salary, .cls-nach, .cls-vendor_payment, .cls-statutory { color:#b26a00; font-weight:500; }
.cls-other { color:#999; }

/* ── Bank upload drop-zone ──────────────────────────────────────────── */
.upload-form-v2 { max-width: 680px; margin: 20px 0; }
.bank-select-row select {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 4px;
  font-size: 14px; min-width: 280px; margin-top: 6px;
}

.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff;
  border: 2px dashed #b8cce4;
  border-radius: 12px;
  padding: 56px 24px 40px;
  margin-top: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.dropzone:hover {
  border-color: var(--brand);
  background: #fafcfe;
}
.dropzone.is-dragging {
  border-color: var(--brand);
  background: #e8f1f8;
  transform: scale(1.01);
}
.dropzone.has-file {
  border-color: #27ae60;
  background: #f4fcf6;
  border-style: solid;
}
.dropzone-icon {
  font-size: 56px;
  margin-bottom: 14px;
  opacity: 0.75;
}
.dropzone.is-dragging .dropzone-icon {
  transform: scale(1.1);
  opacity: 1;
}
.dropzone-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--brand);
  margin-bottom: 6px;
}
.dropzone-sub {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 10px;
}
.dropzone-sub .linklike {
  color: var(--brand);
  text-decoration: underline;
}
.dropzone-types {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.4px;
}
.dropzone-filename {
  margin-top: 14px;
  padding: 8px 14px;
  background: #e8f7ed;
  color: #1e7e34;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  max-width: 90%;
  word-break: break-all;
}
#upload-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.upload-help {
  margin-top: 24px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  background: #fafafa;
  padding: 14px 18px;
  border-radius: 6px;
  border-left: 3px solid var(--brand);
}
.upload-help ul { margin: 8px 0; padding-left: 20px; }
.upload-help code { background: #eef2f6; padding: 1px 5px; border-radius: 2px; font-size: 12px; }

/* ── Bank review form ───────────────────────────────────────────────── */
.bank-line-card {
  background: linear-gradient(to right, #f4f8fb, #ffffff);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 14px 0 20px;
}
.bank-line-row {
  display: grid; grid-template-columns: repeat(5, auto);
  gap: 40px;
  margin-bottom: 10px;
}
.bank-line-row > div label,
.bank-line-desc label,
.bank-line-meta label {
  display: block;
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px;
}
.bank-line-row > div > div {
  font-size: 15px; font-weight: 500;
}
.bank-amount { font-size: 17px !important; color: var(--brand); font-variant-numeric: tabular-nums; }
.flow-dr { background:#fdecea; color:#c0392b; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700; }
.flow-cr { background:#e8f7ed; color:#1e7e34; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700; }
.desc-text { font-family: Menlo, monospace; font-size: 12px; color: #333; background:#fff; padding: 6px 10px; border: 1px solid #eee; border-radius: 3px; word-break: break-all; }
.bank-line-meta { margin-top: 8px; font-size: 13px; }
.bank-line-meta label { display: inline-block; margin-right: 6px; }

.bank-form section { background:#fff; border:1px solid var(--border); border-radius: 6px; padding: 16px 20px; margin-bottom: 18px; }
.bank-form section h2 { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.form-grid label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 4px; }
.form-grid .col-span-2 { grid-column: span 2; }
.form-grid input, .form-grid select, .form-grid textarea {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px;
  font-size: 14px; color: var(--text);
}
.form-grid input:focus, .form-grid select:focus { outline: 2px solid rgba(31,78,120,.3); border-color: var(--brand); }

.typeahead {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-top: 2px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 10;
}
.typeahead:empty { display: none; }
.typeahead-item {
  padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}
.typeahead-item:hover { background: #f4f8fb; }
.typeahead-item:last-child { border-bottom: 0; }

.alloc-table input, .alloc-table select {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 3px; font-size: 13px; width: 100%;
}
.alloc-table input.num { text-align: right; font-variant-numeric: tabular-nums; }
.alloc-table tfoot td { border-top: 2px solid var(--border) !important; background:#fafafa; }
.btn-small {
  padding: 4px 8px; background: #fff; border: 1px solid var(--border);
  color: #c0392b; border-radius: 3px; cursor: pointer; font-size: 12px;
}
.btn-small:hover { background:#fdecea; }
.alloc-actions {
  display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap;
}
.alloc-actions .btn { padding: 6px 12px; font-size: 13px; }

.form-actions {
  padding: 14px 20px !important; background:#fafcfe !important;
}

/* Pill statuses */
.pill-new       { background:#e8f1f8; color:#1f4e78; }
.pill-classified{ background:#fff3e0; color:#b26a00; }
.pill-ready     { background:#fff9c4; color:#8d6e00; }
.pill-posted    { background:#e8f7ed; color:#1e7e34; }
.pill-error     { background:#fdecea; color:#c0392b; }
.pill-skipped   { background:#eceff1; color:#455a64; }

@media (max-width: 900px) {
  .bank-line-row { grid-template-columns: 1fr 1fr; gap: 14px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .col-span-2 { grid-column: span 1; }
}

/* Advice upload block in B2B allocation */
.advice-upload {
  background: linear-gradient(to right, #fff9e6, #fff);
  border: 1px dashed #e0b866;
  border-radius: 6px;
  padding: 12px 18px;
  margin-bottom: 14px;
}
.advice-upload-form { display:flex; flex-direction: column; gap: 4px; }
.advice-label { cursor: pointer; font-size: 14px; color:#8b6b1a; display:inline-block; }
.advice-label input[type="file"] {
  margin-left: 10px; font-size: 13px;
}

/* ── Bank preview (side-by-side) ───────────────────────────────────────── */
.preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 16px 0 20px;
}
.preview-pane {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 20px;
}
.preview-proposed { border-left: 4px solid var(--brand); }
.preview-existing { border-left: 4px solid #8d6e00; }
.preview-pane h2 { margin-top: 0; display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.preview-pane h3 { margin: 18px 0 8px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

.tag-proposed { background: #e8f1f8; color: #1f4e78; font-size: 10px; padding: 3px 8px; border-radius: 10px; font-weight: 700; letter-spacing: 0.5px; }
.tag-existing { background: #fff3e0; color: #8d6e00; font-size: 10px; padding: 3px 8px; border-radius: 10px; font-weight: 700; letter-spacing: 0.5px; }
.tag-missing  { background: #fdecea; color: #c0392b; font-size: 10px; padding: 3px 8px; border-radius: 10px; font-weight: 700; letter-spacing: 0.5px; }

.preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.preview-table th {
  width: 38%;
  text-align: left;
  vertical-align: top;
  padding: 6px 8px 6px 0;
  color: var(--muted);
  font-weight: 500;
  font-size: 12px;
  border-bottom: 1px solid #f0f0f0;
}
.preview-table td {
  padding: 6px 4px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: top;
  font-family: inherit;
}
.preview-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.preview-table td.pre { white-space: pre-wrap; font-size: 12px; color: #555; }
.preview-table code { background: #f5f5f5; padding: 1px 5px; border-radius: 2px; font-size: 12px; }

.validation-box {
  margin-top: 14px; padding: 10px 14px;
  background: #fafcfe; border-left: 3px solid var(--brand);
  font-size: 13px; border-radius: 4px;
}
.diff-ok  { color: #1e7e34; font-weight: 600; }
.diff-bad { color: #c0392b; font-weight: 600; }

.diff-table { font-size: 13px; }
.diff-table th { background: #fafafa; }

.preview-actions {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; background: #fafcfe;
  border: 1px solid var(--border); border-radius: 6px; margin-bottom: 20px;
}

.btn-preview { background: #fff3e0; color: #b26a00; border-color: #f0b500; }
.btn-preview:hover { background: #f0b500; color: #fff; }

@media (max-width: 1100px) {
  .preview-grid { grid-template-columns: 1fr; }
}

/* ── Reconciliation report button ──────────────────────────────────────── */
.btn-report {
  background: #1f4e78;
  color: #fff;
  border: 1px solid #1f4e78;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(31,78,120,0.25);
  transition: all 0.15s ease;
}
.btn-report:hover {
  background: #2c6094;
  box-shadow: 0 4px 12px rgba(31,78,120,0.35);
  transform: translateY(-1px);
}