/* /creditor-portal */
* { box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f4f6f8;
    color: #1c2126;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    font-size: 15px;
}
a { color: #1f4e9c; }

/* ---- topbar ---- */
.cp-topbar {
    background: #16325c;
    color: #fff;
    padding: 0 20px;
}
.cp-topbar-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    flex-wrap: wrap;
}
.cp-brand {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .2px;
    color: #fff;
    text-decoration: none;
    padding: 8px 0;
}
.cp-brand span { font-weight: 400; opacity: .72; }
.cp-topbar-right { font-size: 13px; opacity: .9; display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.cp-topbar-right a { color: #cfe0f7; text-decoration: none; }
.cp-topbar-right a:hover { text-decoration: underline; }
.cp-admin .cp-topbar { background: #4a2c14; }

/* ---- layout ---- */
.cp-wrap { max-width: 1180px; margin: 0 auto; padding: 24px 20px 60px; }
.cp-wrap-narrow { max-width: 760px; }
.cp-card {
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    padding: 22px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    margin-bottom: 20px;
}
.cp-card > h2:first-child, .cp-card > h1:first-child { margin-top: 0; }
.cp-login { max-width: 420px; margin: 60px auto; }

h1 { font-size: 23px; margin: 0 0 6px; letter-spacing: -.2px; }
h2 { font-size: 17px; margin: 26px 0 12px; }
h3 { font-size: 14px; margin: 20px 0 8px; text-transform: uppercase; letter-spacing: .5px; color: #667; }

.cp-pagehead {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.cp-crumbs { font-size: 13px; color: #667; margin-bottom: 10px; }
.cp-crumbs a { text-decoration: none; }
.cp-crumbs a:hover { text-decoration: underline; }
.cp-muted { color: #6b7480; font-size: 13px; }
.cp-sub { color: #5c6570; font-size: 14px; margin: 0; }
hr.cp-sep { border: 0; border-top: 1px solid #e8eaed; margin: 22px 0; }

/* ---- forms ---- */
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: #3c4552; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=tel], input[type=number], input[type=file], textarea, select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #c5cad1;
    border-radius: 5px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
    color: #1c2126;
}
input:focus, textarea:focus, select:focus {
    outline: 0;
    border-color: #1f4e9c;
    box-shadow: 0 0 0 3px rgba(31,78,156,.12);
}
textarea { min-height: 90px; resize: vertical; }
.cp-field { margin-bottom: 15px; }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.cp-grid-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0 16px; }
@media (max-width: 620px) { .cp-grid-3 { grid-template-columns: 1fr; } }
.cp-radio-row { display: flex; gap: 20px; margin-bottom: 6px; }
.cp-radio-row label { font-weight: 500; display: flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; }
.cp-radio-row input { width: auto; }
.cp-hint { font-size: 12px; color: #7a838f; margin-top: 4px; }

button, .cp-btn {
    background: #1f4e9c;
    color: #fff;
    border: 0;
    border-radius: 5px;
    padding: 9px 18px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    line-height: 1.4;
}
button:hover, .cp-btn:hover { background: #163d7d; }
.cp-btn-secondary { background: #fff; color: #3c4552; border: 1px solid #c5cad1; }
.cp-btn-secondary:hover { background: #f4f6f8; color: #1c2126; }
.cp-btn-danger { background: #b3261e; }
.cp-btn-danger:hover { background: #8e1e18; }
.cp-btn-sm { padding: 5px 11px; font-size: 13px; }
.cp-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
form.cp-inline { display: inline; }

/* ---- alerts ---- */
.cp-error, .cp-success, .cp-note {
    padding: 10px 13px;
    border-radius: 5px;
    margin-bottom: 16px;
    font-size: 14px;
}
.cp-error   { background: #fdecea; color: #8a1c14; border: 1px solid #f5c2bd; }
.cp-success { background: #e8f5ee; color: #18632e; border: 1px solid #b9dfc6; }
.cp-note    { background: #eef3fb; color: #24456f; border: 1px solid #cbdcf3; }

/* ---- tables ---- */
.cp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cp-table th, .cp-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #eceef1;
    vertical-align: middle;
}
.cp-table th {
    background: #f8f9fa;
    font-weight: 600;
    font-size: 12px;
    color: #5c6570;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}
.cp-table tbody tr:hover td { background: #fafbfc; }
.cp-table td a { font-weight: 600; text-decoration: none; }
.cp-table td a:hover { text-decoration: underline; }
.cp-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-nowrap { white-space: nowrap; }
.cp-table-scroll { overflow-x: auto; margin: 0 -24px; padding: 0 24px; }
.cp-empty { color: #7a838f; padding: 26px 0; font-size: 14px; text-align: center; }

/* ---- pills ---- */
.cp-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.cp-pill-new    { background: #fff3cd; color: #7a5b00; }
.cp-pill-active { background: #e3edfb; color: #1c4a8a; }
.cp-pill-good   { background: #e2f3e8; color: #17632e; }
.cp-pill-muted  { background: #eceef1; color: #5c6570; }
.cp-pill-off    { background: #f8d7da; color: #842029; }
.cp-badge {
    display: inline-block;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 10px;
    background: #eceef1;
    color: #5c6570;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

/* ---- filters ---- */
.cp-filters {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.cp-filters .cp-field { margin-bottom: 0; }
.cp-filters input[type=text], .cp-filters select { min-width: 180px; width: auto; }

/* ---- stats ---- */
.cp-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.cp-stat {
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    padding: 14px 18px;
    min-width: 140px;
    flex: 1 1 140px;
}
.cp-stat .cp-stat-n { font-size: 24px; font-weight: 700; letter-spacing: -.5px; }
.cp-stat .cp-stat-l { font-size: 12px; color: #6b7480; text-transform: uppercase; letter-spacing: .5px; }

/* ---- detail list ---- */
.cp-dl { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; font-size: 14px; margin: 0; }
.cp-dl dt { color: #6b7480; font-size: 13px; }
.cp-dl dd { margin: 0; }
@media (max-width: 560px) { .cp-dl { grid-template-columns: 1fr; gap: 2px 0; } .cp-dl dd { margin-bottom: 10px; } }

/* ---- messages ---- */
.cp-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.cp-msg {
    border: 1px solid #e1e4e8;
    border-left: 3px solid #1f4e9c;
    border-radius: 6px;
    padding: 11px 14px;
    background: #fff;
}
.cp-msg-creditor { border-left-color: #6b7480; background: #fafbfc; }
.cp-msg-internal { border-left-color: #c98a20; background: #fffaf0; }
.cp-msg-head {
    font-size: 12px;
    color: #6b7480;
    margin-bottom: 5px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.cp-msg-who { font-weight: 700; color: #3c4552; }
.cp-msg-body { white-space: pre-wrap; font-size: 14px; }
.cp-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 3px;
    background: #eceef1;
    color: #5c6570;
}
.cp-tag-internal { background: #f5e2bd; color: #7a5b00; }

/* ---- files ---- */
.cp-filelist { list-style: none; margin: 0; padding: 0; }
.cp-filelist li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #eceef1;
    font-size: 14px;
    flex-wrap: wrap;
}
.cp-filelist li:last-child { border-bottom: 0; }
.cp-filelist .cp-fname { flex: 1 1 240px; font-weight: 600; text-decoration: none; word-break: break-word; }
.cp-filelist .cp-fmeta { color: #7a838f; font-size: 12px; white-space: nowrap; }

#cp-dropzone {
    display: block;
    border: 2px dashed #c5cad1;
    border-radius: 8px;
    padding: 26px 20px;
    text-align: center;
    cursor: pointer;
    background: #fafbfc;
    color: #3c4552;
    font-size: 14px;
    transition: border-color .15s, background-color .15s;
}
#cp-dropzone:hover, #cp-dropzone.cp-drag { border-color: #1f4e9c; background: #f0f5fd; }
#cp-filenames { margin-top: 10px; font-size: 13px; color: #3c4552; }

/* ---- status timeline ---- */
.cp-history { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.cp-history li { padding: 6px 0; border-bottom: 1px solid #f0f1f3; color: #5c6570; }
.cp-history li:last-child { border-bottom: 0; }
.cp-history strong { color: #1c2126; }

/* ---- case management ---- */
.cp-pill-over { background: #f8d7da; color: #842029; }

.cp-progress {
    height: 8px;
    background: #e8eaed;
    border-radius: 4px;
    overflow: hidden;
    margin: 8px 0 4px;
}
.cp-progress span { display: block; height: 100%; background: #1f4e9c; border-radius: 4px; }

.cp-stagelist { list-style: none; margin: 0; padding: 0; }
.cp-stagelist li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f1f3;
    font-size: 14px;
}
.cp-stagelist li:last-child { border-bottom: 0; }
.cp-stagelist input[type=checkbox] { width: auto; margin: 0; flex: none; }
.cp-stagelist .cp-stage-label { flex: 1 1 auto; }
.cp-stagelist .cp-done .cp-stage-label { color: #6b7480; }
.cp-stagelist .cp-stage-when { font-size: 12px; color: #7a838f; white-space: nowrap; }
.cp-stage-map { font-size: 11px; color: #7a838f; white-space: nowrap; }

.cp-tick { color: #17632e; font-weight: 700; }
.cp-untick { color: #c5cad1; }

/* module cards sit in a two-column grid on wide screens */
.cp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
@media (max-width: 900px) { .cp-cols { grid-template-columns: 1fr; } }

.cp-money-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.cp-money-cell { border-left: 3px solid #e1e4e8; padding-left: 12px; }
.cp-money-cell .cp-money-n { font-size: 19px; font-weight: 700; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.cp-money-cell .cp-money-l { font-size: 11px; color: #6b7480; text-transform: uppercase; letter-spacing: .5px; }
.cp-money-in  { border-left-color: #1f4e9c; }
.cp-money-fee { border-left-color: #c98a20; }
.cp-money-net { border-left-color: #17632e; }
.cp-money-due { border-left-color: #b3261e; }

.cp-subrow { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.cp-subrow .cp-field { margin-bottom: 0; flex: 1 1 130px; }
.cp-subrow .cp-field-narrow { flex: 0 0 120px; }
.cp-subrow button { flex: none; }

.cp-checkline { display: flex; align-items: center; gap: 7px; font-weight: 500; font-size: 13px; margin: 0; }
.cp-checkline input { width: auto; }

.cp-list { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.cp-list li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid #f0f1f3;
    flex-wrap: wrap;
}
.cp-list li:last-child { border-bottom: 0; }
.cp-list .cp-list-main { flex: 1 1 220px; }
.cp-list .cp-list-meta { font-size: 12px; color: #7a838f; white-space: nowrap; }
.cp-list .cp-done-text { color: #7a838f; text-decoration: line-through; }
.cp-list-notes { font-size: 13px; color: #5c6570; white-space: pre-wrap; margin-top: 3px; }

.cp-topbar-right { flex-wrap: wrap; row-gap: 4px; }

/* ---- import wizard steps ---- */
.cp-steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.cp-step {
    font-size: 12px;
    font-weight: 600;
    color: #7a838f;
    background: #eceef1;
    padding: 5px 13px;
    border-radius: 13px;
    white-space: nowrap;
}
.cp-step-on { background: #1f4e9c; color: #fff; }
.cp-admin .cp-step-on { background: #4a2c14; }
button[disabled] { opacity: .5; cursor: not-allowed; }