/* Credit Facilities — reuses app.css primitives (.gcc-panel, .gcc-toolbar,
   .gcc-btn, .gcc-input/.gcc-date/.gcc-select, .gcc-table, .gcc-search,
   .empty-state, .center-loading, .modal-box) and cheques.css's
   .gcc-modal-head/.gcc-modal-body/.gcc-modal-close for the two right-slide
   sheets. This file only adds the module-specific bits: the six summary
   indicator cards (same visual language as .stat-card/.dash-card), the
   bank-row limit cells with their utilization bars, the expiry status
   badges, the collapsible terms cell, the 10-slot document upload grid, and
   the inline facility line-item editor. */

/* ---------- Summary indicator cards ---------- */
.cf-stats {
  display: grid;
  /* Exactly 6 equal columns spanning the full row -- auto-fit's minmax
     could pick a narrower per-card width than the container actually had
     room for, leaving a gap at the right edge and truncating AED values. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 16px 4px;
  position: relative;
}
.cf-stat-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 12px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cf-stat-card:hover { box-shadow: var(--shadow-lg, 0 8px 18px rgba(15,23,42,0.06)); transform: translateY(-1px); }
.cf-stat-card.cf-alert { border-color: var(--warning-500, #f59e0b); background: var(--warning-50, #fffbeb); }
.cf-stat-card.cf-danger { border-color: var(--danger-500, #f43f5e); background: var(--danger-50, #fef2f2); }
.cf-stat-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; font-size: 16px;
}
.cf-stat-icon.primary { background: var(--info-50, #eff6ff); color: var(--primary, #6366f1); }
.cf-stat-icon.success { background: var(--success-50, #ecfdf5); color: var(--success-600, #059669); }
.cf-stat-icon.warning { background: var(--warning-50, #fffbeb); color: var(--warning-600, #d97706); }
.cf-stat-icon.danger { background: var(--danger-50, #fef2f2); color: var(--danger-600, #e11d48); }
.cf-stat-body { min-width: 0; }
.cf-stat-label { font-size: 10.5px; font-weight: 700; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: 0.03em; }
.cf-stat-value { font-size: 1.05rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-stat-value.text-primary { color: var(--primary, #6366f1); }
.cf-stat-value.text-success { color: var(--success-600, #059669); }
.cf-stat-value.text-warning { color: var(--warning-600, #d97706); }
.cf-stat-value.text-danger { color: var(--danger-600, #e11d48); }
.cf-stat-sub { font-size: 11px; color: var(--text-muted, #64748b); }
.cf-util-track {
  grid-column: 1 / -1;
  height: 4px; border-radius: 2px;
  background: var(--gray-200, #e5e7eb);
  overflow: hidden;
  margin-bottom: 4px;
}
.cf-util-track .cf-util-fill { background: var(--warning-500, #f59e0b); }

/* ---------- Bank rows ---------- */
/* Logo above name, matching the reference's own .bank-logo (max 120x50,
   object-fit: contain) rather than a small 34px icon beside the name. */
.cf-row { cursor: pointer; }
/* More breathing room between records than the base .gcc-table's 7px —
   scoped to this table's own rows only, not a global density change. */
.cf-row > td { padding-top: 80px; padding-bottom: 80px; }
.cf-bank-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cf-bank-logo-wrap { height: 42px; max-width: 130px; display: flex; align-items: center; }
.cf-bank-logo { max-height: 42px; max-width: 130px; object-fit: contain; }
.cf-bank-logo-fallback {
  width: 42px; height: 42px; border-radius: 8px;
  align-items: center; justify-content: center;
  background: var(--gray-100, #f1f5f9); color: var(--text-faint, #94a3b8); font-size: 18px;
}
.cf-bank-info { min-width: 0; }
.cf-cell-primary { font-weight: 600; color: var(--primary, #6366f1); display: flex; align-items: center; gap: 6px; }
.cf-edit-icon { color: var(--text-faint, #94a3b8); font-size: 11px; opacity: 0; transition: opacity 0.12s ease; }
.cf-row:hover .cf-edit-icon { opacity: 1; }
.cf-cell-secondary { font-size: 11.5px; color: var(--text-muted, #64748b); }
.cf-rm-name { font-weight: 600; }
.cf-rm-contact { font-size: 11px; color: var(--text-muted, #64748b); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.cf-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.cf-amount-cell { cursor: pointer; text-align: right; }
.cf-amount-cell:hover { background: var(--gray-50, #f8fafc); }
.cf-cell-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.cf-cell-amount-sub { font-size: 11px; color: var(--text-muted, #64748b); }
.cf-util-bar {
  height: 4px; border-radius: 2px; margin-top: 4px;
  background: var(--gray-200, #e5e7eb); overflow: hidden;
}
.cf-util-fill { height: 100%; background: var(--success-500, #10b981); border-radius: 2px; transition: width 0.3s ease; }
.cf-util-fill.warning { background: var(--warning-500, #f59e0b); }
.cf-util-fill.danger { background: var(--danger-500, #f43f5e); }

.cf-badge {
  display: inline-block; margin-top: 3px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 2px 8px; border-radius: 999px;
}
.cf-badge-active { background: var(--success-50, #ecfdf5); color: var(--success-700, #047857); }
.cf-badge-expiring { background: var(--warning-50, #fffbeb); color: var(--warning-600, #d97706); }
.cf-badge-expired { background: var(--danger-50, #fef2f2); color: var(--danger-600, #e11d48); }

/* Terms cell — collapsed to 3 lines with a Show more toggle. */
.cf-terms-cell { font-size: 12px; line-height: 1.5; max-width: 320px; }
.cf-term-highlight { font-weight: 700; color: var(--primary, #6366f1); }
.cf-more { display: none; }
.cf-toggle-more {
  border: none; background: none; padding: 0; cursor: pointer;
  color: var(--primary, #6366f1); font-size: 11.5px; font-weight: 600;
}
.cf-toggle-more:hover { text-decoration: underline; }

/* ---------- Add/Edit Bank modal ---------- */
.cf-req { color: var(--danger-600, #e11d48); }
/* flex-shrink:0 is load-bearing: .cf-form-section has overflow:hidden (just
   to clip the header band's rounded corners), and without this, a flex
   column ancestor (.gcc-modal-body) would shrink each section below its
   own content height *before* its overflow-y:auto ever kicks in -- clipping
   the bottom half of every input inside instead of just scrolling. */
/* No margin-bottom here -- .gcc-modal-body (shared, cheques.css) already
   applies gap:12px between its flex children; adding a margin on top of
   that gap was double-spacing every section. */
.cf-form-section { border: 1px solid var(--border, #e5e7eb); border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.cf-form-section-head {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px; font-size: 12px; font-weight: 700;
  color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--gray-50, #f8fafc); border-bottom: 1px solid var(--border, #e5e7eb);
}
.cf-form-section-body { padding: 10px 12px; }
.cf-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.cf-form-grid:last-child { margin-bottom: 0; }
.cf-grid-4 { grid-template-columns: repeat(4, 1fr); }
.cf-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cf-field > label { font-size: 10.5px; font-weight: 650; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: 0.03em; }
.cf-num { text-align: right; }

/* 10-slot document upload grid — fixed 3 columns regardless of modal
   width, per explicit request. */
.cf-docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cf-doc-card {
  border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
  background: var(--surface-2, #f8fafc);
}
.cf-doc-label {
  font-size: 11px; font-weight: 650; color: var(--text-muted, #64748b);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Taller than before (74px -> 130px) so a real PDF/image preview is
   actually legible, not just a generic icon. */
.cf-doc-thumb {
  height: 130px; border-radius: 8px; overflow: hidden;
  background: #fff; border: 1px dashed var(--border, #e5e7eb);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.cf-doc-thumb img.cf-doc-image { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Live mini-preview for PDFs (no thumbnail-generation endpoint exists yet
   -- same iframe-at-small-size approach already used by the standalone
   preview pane below and by the reference's own document cards). Pointer
   events are disabled so the tiny embedded viewer can't be scrolled/
   interacted with by accident; a real "View" still opens the full pane. */
.cf-doc-thumb iframe.cf-doc-pdf-preview {
  width: 100%; height: 100%; border: 0; pointer-events: none;
}
.cf-doc-placeholder, .cf-doc-doc {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--text-faint, #94a3b8); font-size: 10.5px; text-align: center; padding: 0 6px;
}
.cf-doc-placeholder i, .cf-doc-doc i { font-size: 22px; }
.cf-doc-placeholder span, .cf-doc-doc span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-doc-placeholder.hidden, .cf-doc-doc.hidden { display: none; }
/* A document is on record but its file no longer exists on disk (confirmed
   via HEAD check in openBankModal()) -- distinct red styling instead of
   looking like a normal, previewable PDF. */
.cf-doc-thumb-missing { border-color: var(--danger-300, #fca5a5); background: var(--danger-50, #fef2f2); }
.cf-doc-thumb-missing .cf-doc-doc { color: var(--danger-600, #e11d48); }
.cf-doc-actions { display: flex; gap: 4px; }
.cf-doc-actions .gcc-btn { flex: 1; justify-content: center; font-size: 11px; padding: 3px 6px; }
.cf-doc-upload { cursor: pointer; }
.cf-doc-remove { color: var(--danger-600, #e11d48); }
.cf-doc-remove:hover { border-color: var(--danger-500, #f43f5e); color: var(--danger-600, #e11d48); }
.cf-doc-remove.hidden { display: none; }

/* Foot layout comes from cheques.css's .gcc-modal-foot; the spacer pushes
   the Cancel/Save pair right and the Delete button left. */
.cf-foot-spacer { flex: 1; }
.gcc-btn.danger { color: var(--danger-600, #e11d48); }
.gcc-btn.danger:hover { border-color: var(--danger-500, #f43f5e); color: var(--danger-600, #e11d48); background: var(--danger-50, #fef2f2); }

/* Document preview pane — extends the Edit/Add Credit Facility modal to
   the left (same pattern as reference/modules/creditfacilities' own
   .doc-preview-pane, ported onto this app's .modal-box), rather than a
   second, separately-stacked modal on top of the active one. Hidden
   (0-width) by default; .modal-box.cf-bank-modal switches to a row layout
   so the pane and the form column sit side by side, and .has-preview
   reveals the pane and widens the whole box to make room for it. */
.modal-box.cf-bank-modal { flex-direction: row; }
.modal-box.cf-bank-modal.has-preview {
  width: min(1940px, 100vw);
}
.cf-doc-form-col { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
/* Unlike every other module's modal (cheques.js etc.), this one wraps
   .gcc-modal-body/.gcc-modal-foot in a real <form> so file uploads can use
   FormData — but a plain <form> isn't a flex participant, so without this
   rule .gcc-modal-body's flex:1/overflow-y:auto never actually applied:
   the form just grew to its full content height and got clipped by
   .modal-box's overflow:hidden, cutting off the Save/Cancel footer with no
   scrollbar anywhere. Making the form itself a flex column passes the
   flex context through to its children. */
.cf-doc-form-col form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cf-doc-preview-pane {
  width: 0; flex-shrink: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.modal-box.cf-bank-modal.has-preview .cf-doc-preview-pane {
  width: min(840px, 65vw);
  border-right: 1px solid var(--border, #e5e7eb);
}
.cf-preview-body { padding: 0; display: flex; flex: 1; min-height: 0; }
.cf-preview-body iframe, .cf-preview-body img { flex: 1; width: 100%; border: 0; object-fit: contain; }

/* Email-this-document panel — only shown for an already-saved document
   (see openDocPreviewPane()); subject is always the document's own title,
   body uses the same professional template as Cheques (src/lib/docMail.js
   + mailTemplate.js), sent via the existing Graph API sender. */
.cf-doc-email-panel {
  flex-shrink: 0; display: flex; flex-direction: column; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--border, #e5e7eb);
  background: var(--surface-2, #f8fafc);
}
.cf-doc-email-row { display: flex; align-items: center; gap: 8px; }
.cf-doc-email-row label {
  width: 32px; flex-shrink: 0; font-size: 11px; font-weight: 650;
  color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: 0.03em;
}
.cf-doc-email-row .gcc-input { flex: 1; }
#cfDocEmailSend { align-self: flex-end; }

/* ---------- Facilities line-item modal ---------- */
.cf-fac-toolbar { padding: 10px 16px 4px; display: flex; justify-content: flex-end; }
/* Terms is free-form business text and the one column that could otherwise
   grow the table past the modal's width -- capped consistently in both
   read (max-width) and edit (textarea width:100% of that same cell) modes
   so the row never needs a horizontal scrollbar to reach the Actions
   column. table-layout:fixed makes the cap actually binding (an auto-layout
   table would otherwise widen the column to fit the textarea's own
   intrinsic size regardless of max-width). */
.cf-fac-table { table-layout: fixed; }
.cf-fac-table th:nth-child(6), .cf-fac-table td:nth-child(6) { width: 220px; max-width: 220px; }
.cf-fac-terms { font-size: 11.5px; white-space: pre-line; overflow-wrap: break-word; }
.cf-sep-cell { border: none !important; padding: 0 8px !important; }
.cf-fac-total td { font-weight: 750; background: var(--gray-50, #f8fafc); }
.cf-fac-editing td { background: var(--info-50, #eff6ff); }
.cf-fac-editing .gcc-input, .cf-fac-editing .gcc-select { padding: 3px 6px; font-size: 12px; width: 100%; box-sizing: border-box; }
.cf-fac-editing textarea { resize: vertical; min-height: 30px; }
/* Sticky right as a safety net regardless of column-width math above --
   the Save/Cancel (or Edit/Delete) buttons stay reachable even if some
   other column's content is unexpectedly wide. */
.cf-fac-actions-col {
  position: sticky; right: 0; background-color: inherit; z-index: 1;
  box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.12);
}
thead .cf-fac-actions-col { z-index: 3; background-color: var(--surface-2); }