/*!
 * Dashboard due tables — what is owed, what falls due today, what is late.
 *
 * Presentation only. Which rows appear is decided in HomeController from the
 * application's own term-payment rule; nothing here changes a figure.
 *
 * The three panels look alike on purpose — they are the same kind of list read
 * three ways — and only the overdue one is allowed to raise its voice, with a
 * red rule along the top. If everything shouted, nothing would.
 */

.due-panel {
    background: #fff;
    border: 1px solid #E8E4EF;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(27, 24, 50, .05);
    overflow: hidden;
}

/* The one panel that is allowed to be loud */
.due-panel--late {
    border-color: #F3C9C9;
    box-shadow: 0 1px 2px rgba(185, 28, 28, .07);
}
.due-panel--late::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(to right, #DC2626, #F87171);
}

/* ---- Heading ----------------------------------------------------- */
.due-panel__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid #F1EEF7;
}

.due-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
}
.due-panel__icon svg { width: 21px; height: 21px; }

.due-panel__icon--today { background: #EEF4FF; color: #3B63C7; }
.due-panel__icon--late  { background: #FEF0F0; color: #DC2626; }
.due-panel__icon--list  { background: #F5EFFE; color: #7C3AED; }

.due-panel__title { min-width: 0; }
.due-panel__title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1B1230;
    line-height: 1.3;
}
.due-panel__title p {
    /* The subtitle says what the list means, so the reader never has to guess
       whether "due" here counts today or not. */
    margin: 3px 0 0;
    font-size: 12.5px;
    color: #6B6484;
    line-height: 1.4;
}

.due-panel__body { padding: 6px 18px 14px; }

/* ---- Table ------------------------------------------------------- */
.due-table {
    margin: 0 !important;
    width: 100% !important;
}
.due-table > thead > tr > th {
    border-top: 0 !important;
    border-bottom: 1.5px solid #E8E4EF !important;
    padding: 10px 10px !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6B6484;
    white-space: nowrap;
}
.due-table > tbody > tr > td {
    border-top: 1px solid #F1EEF7 !important;
    padding: 11px 10px !important;
    font-size: 13.5px;
    color: #1B1230;
    vertical-align: middle !important;
}
.due-table > tbody > tr:hover > td { background: #FBFAFE; }

/* Money and dates line up digit under digit, which is how a column of
   figures is actually read. */
.due-table .display_currency,
.due-table .due-days {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ---- Status pill ------------------------------------------------- */
.due-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}
/* Still within its term — open, not a problem yet. 5.9:1 on its ground. */
.due-pill--open { background: #FFF7E6; color: #8A5B12; }
/* Past its term. 5.9:1, so the words carry the meaning as well as the colour. */
.due-pill--late { background: #FEF0F0; color: #B91C1C; }

.due-days {
    display: inline-block;
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 7px;
    background: #FEF0F0;
    color: #B91C1C;
    font-size: 12.5px;
    text-align: center;
}

/* ---- DataTables furniture ---------------------------------------- */
.due-table__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0 12px;
}
.due-table__top .dataTables_filter { margin: 0; }
.due-table__top .dataTables_filter label {
    margin: 0;
    font-size: 0;   /* the stock "Search:" label; the field speaks for itself */
}
.due-table__top .dataTables_filter input {
    width: 260px;
    max-width: 100%;
    height: 34px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #D9DEE7;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #0F172A;
}
.due-table__top .dataTables_filter input:focus {
    outline: none;
    border-color: #7C3AED;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .14);
}
.due-table__top .dataTables_length label {
    margin: 0;
    font-size: 12.5px;
    color: #6B6484;
}

.due-table__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 10px;
}
.due-table__foot .dataTables_info {
    padding: 0;
    font-size: 12.5px;
    color: #6B6484;
}
.due-table__foot .dataTables_paginate { margin: 0; }

/* Empty state: a sentence, not a bare empty table */
.due-table > tbody > tr > td.dataTables_empty {
    padding: 26px 10px !important;
    text-align: center;
    font-size: 13px;
    color: #6B6484;
}

@media (max-width: 575px) {
    .due-panel__head { padding: 14px 14px 10px; }
    .due-panel__body { padding: 4px 12px 12px; }
    .due-table__top .dataTables_filter input { width: 100%; }
    .due-table__top .dataTables_filter { width: 100%; order: -1; }
}

/* ------------------------------------------------------------------
   "Processing…"
   ------------------------------------------------------------------
   DataTables places this absolutely and expects its wrapper to be the
   positioned ancestor. The wrapper is static by default, so the label
   escaped upward and floated over the stat cards while a table loaded.
   Anchoring it here keeps it inside the panel it belongs to.
   ------------------------------------------------------------------ */
.due-panel .dataTables_wrapper {
    position: relative;
}

.due-panel .dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: auto;
    margin: 0;
    padding: 7px 16px;
    transform: translate(-50%, -50%);
    border: 1px solid #E8E4EF;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 14px -4px rgba(27, 24, 50, .18);
    font-size: 12.5px;
    font-weight: 600;
    color: #4A3B63;
    white-space: nowrap;
}