/* ══════════════════════════════════════════════════════
   theme-components.css — InvoiceFlow Pro v3
   Cards, Panels, Forms, Tables, Totals, Preview Doc, ERP, DB
   Lines: 1096
   ══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   BODY / PANE LAYOUT + VIEW SYSTEM  (Priority 1)
   ══════════════════════════════════════════════════════ */

/* ── Base body wrapper ── */
.body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Form Pane ── */
.fpane {
  overflow-y: auto;
  padding: 16px 18px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: width .25s ease, flex .25s ease;
}

/* ── Preview Pane ── */
.ppane {
  background: white;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Fallback: if no view class set, default to split ── */
.body:not(.view-split):not(.view-form):not(.view-prev) .fpane {
  width: 55%;
  flex: none;
}

.body:not(.view-split):not(.view-form):not(.view-prev) .ppane {
  width: 45%;
  flex: none;
}

/* ── Legacy hide classes (keep for compat) ── */
.fpane.hide { display: none; }
.ppane.hide { display: none; }
.ppane.w-half { width: 48%; }
.ppane.w-full { width: 100%; }

/* ══ CARDS ══ */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  box-shadow: var(--sh);
  overflow: hidden;
  flex-shrink: 0;
  transition: box-shadow .2s;
}

.card:hover {
  box-shadow: var(--sh2);
}

.ch-t .ic {
  font-size: 14px;
}

/* Card badges */
.cb2 {
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 700;
  background: var(--pu-bg);
  color: var(--pu);
  text-transform: none;
  letter-spacing: 0;
}

.cb2.gr { background: var(--gr-bg); color: var(--gr); }
.cb2.bl { background: var(--bl-bg); color: var(--bl); }
.cb2.pu { background: var(--pu-bg); color: var(--pu); }
.cb2.te { background: var(--te-bg); color: var(--te); }
.cb2.am { background: var(--am-bg); color: var(--am); }

.cb-body {
  padding: 16px;
}

.cb-body.h {
  display: none;
}

/* ══ BANK DETAILS ══ */
.bank-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.bank-tab {
  padding: 5px 11px;
  border-radius: 7px;
  border: 1px solid var(--border2);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--s4);
  transition: all .15s;
}

.bank-tab.a {
  background: var(--pu-bg);
  border-color: var(--pu);
  color: var(--pu);
}

/* ══ PAYMENT GATEWAYS ══ */
.gw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 12px;
}

.gw-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
  background: var(--white);
}

.gw-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh2);
  border-color: var(--pu-lt);
}

.gw-card.sel {
  border-color: var(--pu);
  background: var(--pu-bg);
  box-shadow: 0 0 0 2px var(--pu-glow);
}

.gw-icon { font-size: 20px; margin-bottom: 5px; }
.gw-name { font-size: 10px; font-weight: 700; color: var(--s3); }
.gw-type { font-size: 9px; color: var(--muted); margin-top: 2px; }

/* ══ CURRENCY ══ */
.cur-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--mono);
  background: var(--am-bg);
  color: var(--am);
  border: 1px solid rgba(245, 158, 11, .2);
}

.fx-row {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 8px 11px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 11px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
}

.fx-val {
  font-family: var(--mono);
  font-weight: 600;
}

/* ══ ERP CONNECTORS ══ */
.erp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}

.erp-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
  background: var(--white);
  position: relative;
}

.erp-card:hover { transform: translateY(-2px); box-shadow: var(--sh2); }
.erp-card.conn { border-color: var(--gr); background: var(--gr-bg); }
.erp-card.sync { border-color: var(--in); background: var(--in-bg); }

.erp-logo { font-size: 22px; margin-bottom: 5px; }
.erp-name { font-size: 10px; font-weight: 700; color: var(--s3); }
.erp-status { font-size: 9px; color: var(--muted); margin-top: 2px; }

.erp-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}

.erp-dot.live { background: var(--gr); }

.erp-actions {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  justify-content: center;
}



/* == FL-ACTIONS + FA BUTTONS — Option A: pure text links == */
.fl-actions {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:7px;
  vertical-align:middle;
}
.fa {
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:0;
  border:none;
  background:none;
  border-radius:0;
  font-size:10px;
  font-weight:600;
  font-family:var(--font);
  cursor:pointer;
  transition:opacity .15s ease;
  line-height:1.4;
  text-decoration:none;
  letter-spacing:.1px;
}
.fa:hover {
  opacity:.65;
  text-decoration:underline;
  text-underline-offset:2px;
}
.fa.fa-bl {
  color:var(--pu);
}
.fa.fa-or {
  color:var(--am);
}
.fa.fa-gr {
  color:var(--gr);
}
.fa.fa-te {
  color:var(--te);
}
.fa.fa-sl {
  color:var(--s4);
}

/* ══════════════════════════════════════════════════════
   BUTTON SYSTEM — base + color variants + sizes
   ══════════════════════════════════════════════════════ */

/* Base */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: opacity .15s, transform .1s, box-shadow .15s;
  white-space: nowrap;
  line-height: 1.4;
  text-decoration: none;
}
.btn:hover  { opacity: .88; transform: translateY(-1px); }
.btn:active { opacity: 1;   transform: translateY(0);    }

/* Sizes */
.btn-xs { padding: 3px 8px;  font-size: 10px; border-radius: 5px; }
.btn-sm { padding: 5px 11px; font-size: 11px; border-radius: 6px; }
.btn-lg { padding: 9px 20px; font-size: 13px; border-radius: 9px; }

/* ── Color variants ── */

/* Orange — primary action */
.btn-or {
  background: var(--or, #f97316);
  color: #fff;
  box-shadow: 0 2px 8px rgba(249,115,22,.25);
}

/* Blue — secondary action */
.btn-bl {
  background: var(--bl, #3b82f6);
  color: #fff;
  box-shadow: 0 2px 8px rgba(59,130,246,.25);
}

/* Green — confirm / save */
.btn-gr {
  background: var(--gr, #16a34a);
  color: #fff;
  box-shadow: 0 2px 8px rgba(22,163,74,.22);
}

/* Teal — compliance / GST */
.btn-te {
  background: var(--te, #0d9488);
  color: #fff;
  box-shadow: 0 2px 8px rgba(13,148,136,.22);
}

/* Slate — cancel / neutral */
.btn-slate {
  background: #e2e8f0;
  color: #475569;
  border: 1px solid #cbd5e1;
}
.btn-slate:hover { background: #cbd5e1; opacity: 1; }

/* Red — danger / delete */
.btn-red {
  background: #ef4444;
  color: #fff;
  box-shadow: 0 2px 8px rgba(239,68,68,.22);
}

/* Ghost — outline only */
.btn-ghost {
  background: transparent;
  color: var(--primary, #7c3aed);
  border: 1.5px solid var(--primary, #7c3aed);
}
.btn-ghost:hover { background: var(--primary, #7c3aed); color: #fff; opacity: 1; }

/* Dark — topbar / header actions */
.btn-dark {
  background: var(--s6, #1e293b);
  color: #fff;
}