/* ======================================================================== * KX-PAY V2 dashboard · 06-components.css * ----------------------------------------------------------------------- * Badges, modals and the forms inside them * * Lifted verbatim from V1 dashboard.html lines 831-1076. * Load order matters — see the numeric prefix. * ======================================================================= */ /* --------------------------------------------------------------- BADGES */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; white-space: nowrap; } .badge.b-pending, .badge.b-pending_approval { background: #f1f5f9; color: #475569; } .badge.b-processing { background: #dbeafe; color: #1e40af; } /* "Transferred" = sent to provider, awaiting confirmation. Subtle teal / cyan so it's visually distinct from both "processing" (blue) and "success" (green). */ .badge.b-transferred { background: #cffafe; color: #0e7490; cursor: pointer; } .badge.b-transferred:hover { background: #a5f3fc; } .badge.b-transfer_success { background: #d1fae5; color: #065f46; } .badge.b-transfer_failed, .badge.b-rejected, .badge.b-reject_failed { background: #fee2e2; color: #991b1b; } /* mig 162: late-refund badge — distinct orange so it stands out from regular failures */ .badge.b-refunded { background: #fed7aa; color: #7c2d12; font-weight: 600; } .badge.b-approved { background: #a7f3d0; color: #064e3b; font-weight: 600; } .badge.b-approve_failed, .badge.b-manual_check { background: #fed7aa; color: #9a3412; } /* Bright orange + bold so the LEAK status (engine-approved-but-no-transfer) can never be mistaken for a green "✓ Success". */ .badge.b-approved_externally { background: #fb923c; color: white; font-weight: 700; } .badge.b-skipped, .badge.b-cancelled { background: #e2e8f0; color: #475569; } /* ---------------------------------------------------------------- MODAL */ #modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.6); display: flex; align-items: center; justify-content: center; z-index: 100; } .modal { background: white; border-radius: 12px; width: 640px; max-width: 95vw; max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; } .modal.wide { width: 1000px; } .modal.xwide { width: 1200px; } .modal-header { padding: 16px 20px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; /* mig 163 fix (20-Jun-2026): allow children to wrap so a long row of action buttons drops to its own line below the title instead of overlapping it. The 10px row-gap separates the wrapped rows. */ flex-wrap: wrap; gap: 10px; } .modal-header h3 { font-size: 16px; font-weight: 600; /* Don't let the title fight the close button for space */ flex: 1 1 auto; min-width: 0; } .modal-header .close { background: transparent; border: none; font-size: 22px; color: #64748b; cursor: pointer; padding: 0 4px; } .modal-header .close:hover { color: #0f172a; } .modal-body { padding: 16px 20px; overflow-y: auto; overflow-x: hidden; } .modal-section { margin-bottom: 16px; } .modal-section h4 { font-size: 11px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; } .kv-grid { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; font-size: 13px; } .kv-grid .k { color: #64748b; } .kv-grid .v { color: #0f172a; word-break: break-all; } .kv-grid .v.mono { font-family: ui-monospace, monospace; font-size: 12px; } /* ----------------------------------------------------------- FORMS in modals */ .form-group { margin-bottom: 12px; } .form-group label { display: block; font-size: 12px; color: #475569; margin-bottom: 4px; font-weight: 500; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; box-sizing: border-box; outline: none; font-family: inherit; font-size: 13px; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #f59e0b; } .form-group .hint { font-size: 11px; color: #94a3b8; margin-top: 2px; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #e2e8f0; } /* mig 178 (07-Jul-2026): KX-PAY Bank tab uses .modal-backdrop for popup overlays that are pre-declared in HTML (rather than injected via JS into #modal-overlay like other modals). Same visual pattern as #modal-overlay: fixed full-screen dim backdrop centering its content. .modal-body and .modal-footer are also declared here as light-weight sub-classes used only by the KX-PAY Bank modals. */ .modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.6); display: flex; align-items: center; justify-content: center; z-index: 100; } .modal-backdrop.hidden { display: none !important; } .modal-close { background: transparent; border: none; font-size: 22px; color: #64748b; cursor: pointer; padding: 0 4px; } .modal-close:hover { color: #0f172a; } .modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid #e2e8f0; } .modal-body label { display: block; font-size: 12px; color: #475569; margin-top: 8px; margin-bottom: 4px; font-weight: 500; } .modal-body input, .modal-body select, .modal-body textarea { border: 1px solid #cbd5e1; border-radius: 6px; box-sizing: border-box; outline: none; background: white; background-image: none; } .modal-body input:focus, .modal-body select:focus, .modal-body textarea:focus { border-color: #f59e0b; } /* Section header with right-side action button */ .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .section-header h2 { margin: 0; } /* Compact secondary table (used inside modal for ledger) */ .table-compact { width: 100%; border-collapse: collapse; font-size: 12px; } .table-compact th { padding: 6px 8px; font-size: 10px; } .table-compact td { padding: 5px 8px; font-size: 12px; white-space: nowrap; } /* Audit trails -- "Recent config changes" on Settings. Their middle column holds whole sentences ("automation_config saved (engine=nexus, mode=auto). Changes: bank rules: DANA: enabled false->true; ..."), and .table-compact sets white-space:nowrap on every cell. So those rows could not wrap and stretched the table straight past the edge of its 1100px card. Not fixed on .table-compact itself: ten other tables use it, several of them columns of numbers that read better unwrapped. table-layout:fixed pins the two narrow columns; the middle one takes whatever is left and wraps inside it. */ .table-audit { table-layout: fixed; width: 100%; } /* PERCENTAGES, not pixels, and no media query. The first attempt pinned 150px + 130px and shrank them under a max-width:768px query. That ties the layout to the VIEWPORT when what actually constrains the table is its CARD. Measured with the card at 360px on a 1280px viewport -- the query never fired, 280px of fixed columns ate a 318px table, and Change was left 38px wide: one character per line, rows over 900px tall. The same one-character-per-line failure as the Automation activity table. Percentages are relative to whatever the container turns out to be, so the proportions hold at any width without anything having to know why the container is narrow. */ .table-audit th:nth-child(1), .table-audit td:nth-child(1) { width: 22%; } .table-audit th:nth-child(3), .table-audit td:nth-child(3) { width: 16%; } .table-audit td { vertical-align: top; } /* All three wrap. On a wide card the timestamp never reaches its 22% and stays on one line anyway; on a narrow one it has to be allowed to wrap or it pushes its own column back out. */ .table-audit td { white-space: normal; /* anywhere, not break-word: one long unbroken token (a uuid, a url) is enough to force a fixed column open again. */ overflow-wrap: anywhere; line-height: 1.55; } /* Settings cards — widened so labels don't stack and the page uses the available horizontal space on modern widescreen monitors. Was 720px; bumped to 1100px so a "Provider DGFID name-check parallel slots" label fits on one line and the hint sits next to the input instead of below. */ .settings-card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 18px 20px; margin-bottom: 16px; max-width: 1100px; } .settings-card h3 { font-size: 15px; font-weight: 600; color: #0f172a; margin-bottom: 6px; } .settings-card p.hint { color: #64748b; font-size: 13px; margin-bottom: 14px; } /* A settings card whose explanatory paragraph has been removed leaves its heading 6px above the first control, because .settings-card h3 carries only that 6px and the paragraph was supplying the rest. The adjacent-sibling selector only matches when a hint does NOT follow the heading -- if one does, IT is the adjacent sibling, so the cards that still have one are untouched. */ .settings-card h3 + .settings-row, .settings-card h3 + .form-group, .settings-card h3 + div, .settings-card h3 + table { margin-top: 12px; } .settings-readonly-note { background: #fef3c7; color: #78350f; padding: 8px 12px; border-radius: 6px; font-size: 12px; margin-bottom: 12px; } .settings-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } /* Wider label column (was 200px) + flex-shrink:0 so the label never wraps when long text appears (e.g. "Provider DGFID name-check parallel slots"). The remaining space flows to the input + hint to the right. */ .settings-row label { flex: 0 0 280px; color: #475569; font-size: 13px; font-weight: 500; } .settings-row input { width: 160px; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 6px; outline: none; font-family: inherit; font-size: 13px; text-align: right; } .settings-row input:focus { border-color: #f59e0b; } .settings-row input:disabled { background: #f8fafc; color: #475569; border-color: #e2e8f0; } .settings-row .suffix { color: #64748b; font-size: 13px; } .save-btn-row { display: flex; gap: 8px; margin-top: 12px; } /* Provider cutoff pause card — checkbox + time inputs need their own sizing because the generic ".settings-row input" rule above forces a 160px right-aligned text box, which looks wrong for a checkbox / clock. */ #cutoff-card input[type="checkbox"] { width: 18px; height: 18px; padding: 0; margin: 0; accent-color: #f59e0b; cursor: pointer; } #cutoff-card input[type="time"] { width: 130px; text-align: left; } #cutoff-status { font-size: 13px; margin: 4px 0 0 0; padding: 8px 12px; border-radius: 6px; } #cutoff-status.on { background: #dcfce7; color: #166534; } #cutoff-status.off { background: #f1f5f9; color: #475569; } /* Maintenance mode card — checkbox + message box need their own sizing */ #maint-card input[type="checkbox"] { width: 18px; height: 18px; padding: 0; margin: 0; accent-color: #f59e0b; cursor: pointer; } #maint-card textarea { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; outline: none; font-family: inherit; font-size: 13px; resize: vertical; } #maint-card textarea:focus { border-color: #f59e0b; } #maint-card textarea:disabled { background: #f8fafc; color: #475569; border-color: #e2e8f0; } #maint-status { font-size: 13px; margin: 4px 0 0 0; padding: 8px 12px; border-radius: 6px; } #maint-status.on { background: #fee2e2; color: #991b1b; } #maint-status.off { background: #f1f5f9; color: #475569; } /* Product code cards (PDGFID + PDGFID Check-name) — shared input styling. */ #dapc-card .apc-input, #pdgfid-cn-card .apc-input { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px; outline: none; font-family: ui-monospace, monospace; font-size: 13px; min-width: 0; /* let the input shrink below its placeholder's natural width */ } #apc-card .apc-input:focus, #dapc-card .apc-input:focus, #pdgfid-cn-card .apc-input:focus { border-color: #f59e0b; } #apc-card .apc-input:disabled, #dapc-card .apc-input:disabled, #pdgfid-cn-card .apc-input:disabled { background: #f8fafc; color: #475569; } /* Check-name card table — same fixed layout as PDGFID transfer-product card */ #pdgfid-cn-card table { table-layout: fixed; width: 100%; } /* The PDGFID card has 6 columns — fixed layout + width:100% keeps the table inside the card and distributes the code columns evenly. */ #dapc-card table { table-layout: fixed; width: 100%; } /* "Active" radio sits to the left of each code input. Wrapped in a