/*
 * TPL Credit Control - styles.
 *
 * Single design-token block at the top; every colour below references a
 * token (no raw hex past this block). The accent chains to the shared TPL
 * accent when present, falling back to the TPL orange, so this module reads
 * as part of the same suite as tpl_commercial while staying native to RISE.
 */

:root {
    --tplcc-accent:        var(--tpl-accent, #FF7707);
    --tplcc-ink:           #33383e;
    --tplcc-muted:         #8a949e;
    --tplcc-line:          #e4e8ec;
    --tplcc-surface:       #ffffff;
    --tplcc-well:          #f6f8fa;
    --tplcc-good:          #2ab57d;
    --tplcc-good-bg:       #e7f7f0;
    --tplcc-watch:         #f7b924;
    --tplcc-watch-bg:      #fdf3da;
    --tplcc-danger:        #e02020;
    --tplcc-danger-bg:     #fbe7e7;
    --tplcc-info:          #4a7dff;
    --tplcc-info-bg:       #e8effe;
    --tplcc-stage0:        #8a949e;
    --tplcc-stage1:        #4a7dff;
    --tplcc-stage2:        #4a7dff;
    --tplcc-stage3:        #f7b924;
    --tplcc-stage4:        #f7931e;
    --tplcc-stage5:        #e02020;
}

/* --- Area shell + native tab strip ------------------------------------- */
.tpl-cc-area .tpl-cc-tabs-wrap {
    margin-bottom: 0;
}
.tpl-cc-tabs .nav-link .tpl-cc-tab-badge {
    margin-left: 6px;
    font-size: 11px;
    vertical-align: middle;
}
.tpl-cc-well {
    background: var(--tplcc-well);
    padding: 16px;
    border-radius: 0 0 4px 4px;
}

/* --- Account reference code chip --------------------------------------- */
.tpl-cc-code {
    display: inline-block;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--tplcc-accent);
    background: var(--tplcc-well);
    border: 1px solid var(--tplcc-line);
    border-radius: 3px;
    padding: 1px 7px;
}

/* --- Tables ------------------------------------------------------------ */
.tpl-cc-table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--tplcc-muted);
    border-bottom: 1px solid var(--tplcc-line);
}
.tpl-cc-table td {
    vertical-align: middle;
}

/* --- Snapshot label/value (header + client tab) ------------------------ */
.tpl-cc-snap-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--tplcc-muted);
    margin-bottom: 2px;
}
.tpl-cc-snap-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--tplcc-ink);
}
.tpl-cc-header-figs {
    margin-top: 10px;
}
.tpl-cc-contact-card {
    background: var(--tplcc-well);
    border: 1px solid var(--tplcc-line);
    border-radius: 4px;
    padding: 10px 12px;
}

/* --- Overview cards (row 1) -------------------------------------------- */
.tpl-cc-cards {
    margin-bottom: 4px;
}
.tpl-cc-card,
.tpl-cc-band {
    border: 1px solid var(--tplcc-line);
    margin-bottom: 16px;
}
.tpl-cc-card-icon {
    color: var(--tplcc-accent);
    margin-bottom: 6px;
}
.tpl-cc-card-label,
.tpl-cc-band-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--tplcc-muted);
}
.tpl-cc-card-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--tplcc-ink);
    margin-top: 2px;
}
.tpl-cc-card-trend {
    font-size: 12px;
    margin-top: 4px;
}
.tpl-cc-trend-up   { color: var(--tplcc-danger); }
.tpl-cc-trend-down { color: var(--tplcc-good); }

/* --- Overview bands (row 2) -------------------------------------------- */
.tpl-cc-band-amount {
    font-size: 16px;
    font-weight: 600;
    color: var(--tplcc-ink);
    margin-top: 2px;
}
.tpl-cc-band-count {
    font-size: 12px;
    color: var(--tplcc-muted);
}

/* --- Stage badges ------------------------------------------------------ */
.badge.tpl-cc-stage-0 { background: var(--tplcc-stage0); color: #fff; }
.badge.tpl-cc-stage-1 { background: var(--tplcc-stage1); color: #fff; }
.badge.tpl-cc-stage-2 { background: var(--tplcc-stage2); color: #fff; }
.badge.tpl-cc-stage-3 { background: var(--tplcc-stage3); color: #fff; }
.badge.tpl-cc-stage-4 { background: var(--tplcc-stage4); color: #fff; }
.badge.tpl-cc-stage-5 { background: var(--tplcc-stage5); color: #fff; }

/* --- Priority badges --------------------------------------------------- */
.badge.tpl-cc-priority-critical { background: var(--tplcc-danger); color: #fff; }
.badge.tpl-cc-priority-high     { background: var(--tplcc-watch);  color: #fff; }
.badge.tpl-cc-priority-medium   { background: var(--tplcc-muted);  color: #fff; }

/* --- KPI strip --------------------------------------------------------- */
.tpl-cc-kpi-strip {
    margin-bottom: 4px;
}
.tpl-cc-kpi {
    background: var(--tplcc-surface);
    border: 1px solid var(--tplcc-line);
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.tpl-cc-kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--tplcc-muted);
}
.tpl-cc-kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--tplcc-ink);
}
.tpl-cc-kpi-value small {
    font-size: 12px;
    font-weight: 400;
    color: var(--tplcc-muted);
}

/* --- Activity / chase feed --------------------------------------------- */
.tpl-cc-feed {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tpl-cc-feed li {
    padding: 8px 0;
    border-bottom: 1px solid var(--tplcc-line);
    font-size: 13px;
}
.tpl-cc-feed li:last-child {
    border-bottom: 0;
}
.tpl-cc-feed-time {
    font-size: 11px;
    margin-top: 2px;
}

/* --- Insights ---------------------------------------------------------- */
.tpl-cc-insight {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 13px;
}
.tpl-cc-insight-warn   { background: var(--tplcc-watch-bg);  color: var(--tplcc-ink); }
.tpl-cc-insight-danger { background: var(--tplcc-danger-bg); color: var(--tplcc-ink); }
.tpl-cc-insight-info   { background: var(--tplcc-info-bg);   color: var(--tplcc-ink); }

/* --- Toolbar + inline forms (account) ---------------------------------- */
.tpl-cc-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tpl-cc-inline-form {
    border-top: 1px solid var(--tplcc-line);
    background: var(--tplcc-well);
}
.tpl-cc-subform {
    border-top: 1px dashed var(--tplcc-line);
}
.tpl-cc-inline-action {
    display: inline-block;
    margin: 0;
}

/* --- Snoozed worklist rows --------------------------------------------- */
.tpl-cc-snoozed-row {
    opacity: .55;
}

/* --- Dashboard widget -------------------------------------------------- */
.tpl-cc-widget .tpl-cc-widget-cell {
    padding: 8px 4px;
}
.tpl-cc-widget-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--tplcc-muted);
}
.tpl-cc-widget-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--tplcc-ink);
}

/* --- Client-profile tab snapshot --------------------------------------- */
.tpl-cc-client-tab .tpl-cc-snap-value {
    font-size: 16px;
}