/* ============================================================
   FROS BILENDING UI SYSTEM
   ============================================================ */

:root {
    --bl-navy: #0f2f6b;
    --bl-blue: #2449b8;
    --bl-blue-hover: #1d3f9f;

    --bl-bg: #f5f7fb;
    --bl-card: #ffffff;

    --bl-text: #0f172a;
    --bl-muted: #64748b;

    --bl-border: #dbe3ef;
    --bl-border-soft: #e8edf4;

    --bl-success-bg: #dcfce7;
    --bl-success-text: #166534;

    --bl-warning-bg: #fef3c7;
    --bl-warning-text: #92400e;

    --bl-danger-bg: #fee2e2;
    --bl-danger-text: #991b1b;

    --bl-info-bg: #dbeafe;
    --bl-info-text: #1d4ed8;

    --bl-neutral-bg: #e2e8f0;
    --bl-neutral-text: #334155;

    --bl-radius: 14px;
    --bl-shadow:
        0 8px 24px rgba(15, 23, 42, 0.05);
}


/* ============================================================
   PAGE
   ============================================================ */

.bilending-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 18px 52px;
}

.bilending-page-header {
    margin-bottom: 24px;
}

.bilending-page-title {
    margin: 0 0 7px;
    color: var(--bl-navy);
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
}

.bilending-page-subtitle {
    margin: 0;
    color: var(--bl-muted);
    font-size: 15px;
    line-height: 1.5;
}


/* ============================================================
   CARDS
   ============================================================ */

.bl-card {
    background: var(--bl-card);
    border: 1px solid var(--bl-border);
    border-radius: var(--bl-radius);
    box-shadow: var(--bl-shadow);
    padding: 22px;
    margin-bottom: 22px;
}

.bl-card h1,
.bl-card h2,
.bl-card h3 {
    color: var(--bl-navy);
    margin-top: 0;
}

.bl-section-title {
    margin: 0 0 16px;
    color: var(--bl-navy);
    font-size: 22px;
    font-weight: 800;
}


/* ============================================================
   METRICS
   ============================================================ */

.bl-metric-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
}

.bl-metric {
    background: #f8fafc;
    border: 1px solid var(--bl-border);
    border-radius: 12px;
    padding: 15px;
    min-height: 82px;
}

.bl-metric-label {
    color: var(--bl-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .045em;
    margin-bottom: 6px;
}

.bl-metric-value {
    color: var(--bl-text);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
}

.bl-metric-note {
    margin-top: 4px;
    color: var(--bl-muted);
    font-size: 12px;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.bl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.bl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 15px;

    border-radius: 8px;
    border: 1px solid transparent;

    background: var(--bl-blue);
    color: white;

    font-size: 14px;
    font-weight: 700;
    text-decoration: none;

    cursor: pointer;
    transition:
        background .15s ease,
        border-color .15s ease,
        opacity .15s ease;
}

.bl-btn:hover {
    background: var(--bl-blue-hover);
    color: white;
}

.bl-btn-secondary {
    background: white;
    color: var(--bl-blue);
    border-color: var(--bl-blue);
}

.bl-btn-secondary:hover {
    background: #eff6ff;
    color: var(--bl-blue);
}

.bl-btn-success {
    background: #16803b;
}

.bl-btn-success:hover {
    background: #126b32;
}

.bl-btn-danger {
    background: #b91c1c;
}

.bl-btn-danger:hover {
    background: #991b1b;
}


/* ============================================================
   STATUS BADGES
   ============================================================ */

.bl-status {
    display: inline-block;
    border-radius: 999px;
    padding: 5px 10px;

    font-size: 11px;
    font-weight: 800;

    background: var(--bl-neutral-bg);
    color: var(--bl-neutral-text);
}

.bl-status-current,
.bl-status-active {
    background: var(--bl-info-bg);
    color: var(--bl-info-text);
}

.bl-status-completed,
.bl-status-closed,
.bl-status-paid,
.bl-status-released {
    background: var(--bl-success-bg);
    color: var(--bl-success-text);
}

.bl-status-pending,
.bl-status-partial,
.bl-status-partially-released {
    background: var(--bl-warning-bg);
    color: var(--bl-warning-text);
}

.bl-status-overdue,
.bl-status-grace,
.bl-status-default,
.bl-status-failed {
    background: var(--bl-danger-bg);
    color: var(--bl-danger-text);
}


/* ============================================================
   INFO / POSITION BOXES
   ============================================================ */

.bl-info-box {
    padding: 15px;
    margin-top: 16px;

    border-radius: 12px;
    border: 1px solid #bfdbfe;

    background: #eff6ff;
    color: var(--bl-text);
}

.bl-info-box strong {
    color: var(--bl-navy);
}

.bl-info-success {
    background: #ecfdf5;
    border-color: #86efac;
}

.bl-info-warning {
    background: #fffbeb;
    border-color: #fcd34d;
}

.bl-info-danger {
    background: #fff1f2;
    border-color: #fecdd3;
}


/* ============================================================
   TABLES
   ============================================================ */

.bl-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.bl-table {
    width: 100%;
    border-collapse: collapse;
}

.bl-table th {
    padding: 11px 10px;

    background: #f1f5f9;
    color: #334155;

    border-bottom: 1px solid #cbd5e1;

    text-align: left;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.bl-table td {
    padding: 11px 10px;

    border-bottom: 1px solid var(--bl-border-soft);

    color: var(--bl-text);
    font-size: 13px;

    vertical-align: top;
}

.bl-table tr:last-child td {
    border-bottom: none;
}

.bl-table-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   EMPTY STATE
   ============================================================ */

.bl-empty {
    padding: 30px 18px;
    text-align: center;
    color: var(--bl-muted);
}


/* ============================================================
   GRID HELPERS
   ============================================================ */

.bl-two-column {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.bl-three-column {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 18px;
}


/* ============================================================
   HOME / QUICK NAVIGATION
   ============================================================ */

.bl-role-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.bl-role-card {
    background: white;
    border: 1px solid var(--bl-border);
    border-radius: var(--bl-radius);
    padding: 22px;
    box-shadow: var(--bl-shadow);
}

.bl-role-card h2 {
    margin: 0 0 10px;
    color: var(--bl-text);
}

.bl-role-card p {
    color: #475569;
    min-height: 42px;
}

.bl-role-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bl-quick-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.bl-quick-card {
    display: flex;
    align-items: center;

    min-height: 48px;
    padding: 12px 14px;

    border: 1px solid var(--bl-border);
    border-radius: 10px;

    background: #f8fafc;
    color: var(--bl-text);

    text-decoration: none;
    font-weight: 700;
}

.bl-quick-card:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px) {

    .bl-role-grid,
    .bl-three-column {
        grid-template-columns: 1fr;
    }

    .bl-two-column {
        grid-template-columns: 1fr;
    }

    .bl-quick-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 600px) {

    .bilending-page {
        padding: 20px 12px 40px;
    }

    .bilending-page-title {
        font-size: 25px;
    }

    .bl-card {
        padding: 17px;
    }

    .bl-metric-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .bl-metric {
        padding: 12px;
    }

    .bl-metric-value {
        font-size: 16px;
    }

    .bl-quick-grid {
        grid-template-columns: 1fr;
    }

    .bl-btn {
        min-height: 42px;
    }
}

/* ============================================================
   LOAN TIMELINE
   ============================================================ */

.loan-timeline {
    position: relative;
    padding-left: 26px;
}

.loan-timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: #dbe3ef;
}

.timeline-item {
    position: relative;
    padding: 0 0 22px 18px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -25px;
    top: 5px;

    width: 14px;
    height: 14px;

    border-radius: 50%;
    border: 3px solid white;

    background: #64748b;

    box-shadow:
        0 0 0 2px #cbd5e1;
}

.timeline-dot-disbursed {
    background: #2449b8;
}

.timeline-dot-repayment {
    background: #16a34a;
}

.timeline-dot-current {
    background: #2563eb;
}

.timeline-dot-due_soon,
.timeline-dot-due_today {
    background: #d97706;
}

.timeline-dot-overdue,
.timeline-dot-grace,
.timeline-dot-default_candidate {
    background: #dc2626;
}

.timeline-dot-closed {
    background: #15803d;
}

.timeline-date {
    color: #64748b;
    font-size: 12px;
    margin-bottom: 3px;
}

.timeline-title {
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
}

.timeline-detail {
    margin-top: 4px;
    color: #475569;
    line-height: 1.45;
    font-size: 13px;
}

.timeline-dot-notification {
    background: #d97706;
}

.timeline-dot-overdue {
    background: #dc2626;
}

.timeline-dot-grace {
    background: #d97706;
}

.timeline-dot-default_candidate {
    background: #b91c1c;
}

.timeline-dot-default_confirmed {
    background: #7f1d1d;
}

.timeline-dot-cured {
    background: #16a34a;
}