/* ===================================================================
   SafeHouse FMS — finance-pages.css
   Place in: SafeHouse/wwwroot/css/finance-pages.css
   Add to _Layout.cshtml: <link href="css/finance-pages.css" rel="stylesheet" />
   
   CSS uses the same variables as FinanceDashboard:
   var(--accent), var(--text-primary), var(--text-secondary),
   var(--border), var(--surface-secondary), var(--danger)
   
   Classes mirror what FinanceDashboard already uses:
   page-hdr, page-title, page-subtitle, kpi-row, kpi-card, kpi-label,
   kpi-value, kpi-delta, data-table-wrap, data-table, btn, btn-primary,
   filter-select  — those are already in ModuleLayout global CSS.
   
   This file only adds what's UNIQUE to transaction pages.
   =================================================================== */

/* ── Right filter panel ─────────────────────────────────── */
/*
   IMPORTANT: The <RightPanel> slot in ModuleLayout renders its content
   as a direct flex child of .page-content. For it to have a fixed width
   (matching .right-panel from app.css = var(--panel-width) = 264px),
   the outermost element in <RightPanel> MUST be a .right-panel div,
   OR the .rp-filter-panel itself must behave like one.
   
   These rules make .rp-filter-panel act as the right-panel container
   so no extra wrapper div is needed in each page.
*/
.rp-filter-panel {
    width: var(--panel-width);   /* 264px — matches .right-panel in app.css */
    flex-shrink: 0;
    background: var(--surface);
    border-left: 0.5px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 14px 16px;
}

.rfp-section    { margin-bottom: 14px; }

.rfp-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-secondary);
    margin-bottom: 7px;
    display: block;
}

.rfp-search {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-secondary);
    border: 0.5px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    transition: border-color .15s;
}
.rfp-search:focus-within { border-color: var(--accent); }
.rfp-search svg { flex-shrink: 0; opacity: .45; }
.rfp-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 12px;
    color: var(--text-primary);
    width: 100%;
}

.rfp-chips     { display: flex; flex-wrap: wrap; gap: 4px; }
.rfp-chip {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 99px;
    border: 0.5px solid var(--border);
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all .1s;
    white-space: nowrap;
    line-height: 1.5;
}
.rfp-chip:hover { border-color: var(--accent); color: var(--accent); }
.rfp-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.rfp-select {
    width: 100%;
    font-size: 12px;
    padding: 6px 10px;
    border: 0.5px solid var(--border);
    border-radius: 6px;
    background: var(--surface-secondary);
    color: var(--text-primary);
    outline: none;
    cursor: pointer;
}
.rfp-select:focus { border-color: var(--accent); }

.rfp-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    padding: 2px 0;
}

.rfp-clear {
    width: 100%;
    font-size: 11px;
    font-weight: 600;
    padding: 5px;
    border-radius: 6px;
    border: 0.5px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    margin-top: -6px;
    transition: all .1s;
}
.rfp-clear:hover { background: var(--surface-secondary); color: var(--text-primary); }

.rfp-divider { height: 0.5px; background: var(--border); margin: 12px 0; }

.rfp-stat {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 4px 0;
    border-bottom: 0.5px solid var(--border);
    color: var(--text-secondary);
}
.rfp-stat:last-child { border-bottom: none; }
.rfp-stat strong     { color: var(--text-primary); }
.rfp-stat.warn  strong { color: #B86A0F; }
.rfp-stat.danger strong { color: var(--danger, #A32D2D); }
.rfp-stat.ok    strong { color: #3B6D11; }

.rfp-action {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 6px;
    border: 0.5px solid var(--border);
    background: var(--surface-secondary);
    color: var(--text-primary);
    cursor: pointer;
    margin-bottom: 5px;
    transition: background .1s;
}
.rfp-action:hover { border-color: var(--accent); }

.rfp-info {
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    background: var(--surface-secondary);
    border: 0.5px solid var(--border);
    border-radius: 6px;
    padding: 9px 11px;
}

/* ── Status pills ───────────────────────────────────────── */
.fin-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.fin-status--draft           { background: #F1EFE8; color: #5F5E5A; }
.fin-status--issued          { background: #E6F1FB; color: #185FA5; }
.fin-status--partiallypaid   { background: #FAEEDA; color: #854F0B; }
.fin-status--paid            { background: #EAF3DE; color: #3B6D11; }
.fin-status--overdue         { background: #FCEBEB; color: #A32D2D; }
.fin-status--cancelled       { background: #F1EFE8; color: #888780; }
.fin-status--voided          { background: #F1EFE8; color: #888780; }
.fin-status--pending         { background: #FAEEDA; color: #854F0B; }
.fin-status--approved        { background: #EAF3DE; color: #3B6D11; }
.fin-status--submitted       { background: #E6F1FB; color: #185FA5; }
.fin-status--underreview     { background: #EEEDFE; color: #534AB7; }
.fin-status--rejected        { background: #FCEBEB; color: #A32D2D; }
.fin-status--processed       { background: #EAF3DE; color: #3B6D11; }
.fin-status--pendingapproval { background: #FAEEDA; color: #854F0B; }
.fin-status--partiallyapplied{ background: #FAEEDA; color: #854F0B; }
.fin-status--applied         { background: #EAF3DE; color: #3B6D11; }
.fin-status--remitted        { background: #EAF3DE; color: #3B6D11; }

/* ── Row action micro-buttons ───────────────────────────── */
.fin-act {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 5px;
    border: 0.5px solid var(--border);
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary);
    white-space: nowrap;
    transition: all .1s;
}
.fin-act:hover { background: var(--surface-secondary); color: var(--text-primary); border-color: var(--accent); }
.fin-act.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.fin-act.primary:hover { opacity: .85; }
.fin-act.success { background: #3B6D11; color: #fff; border-color: #3B6D11; }
.fin-act.danger  { background: #A32D2D; color: #fff; border-color: #A32D2D; }

/* ── Overdue row highlight ──────────────────────────────── */
.row-overdue { background: rgba(239,68,68,.04); }

/* ── Danger badge (days overdue) ───────────────────────── */
.fin-badge-danger {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    background: #A32D2D;
    color: #fff;
    border-radius: 3px;
    padding: 1px 4px;
    font-weight: 600;
}

/* ── Loading / empty states ─────────────────────────────── */
.fin-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 48px;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 13px;
}
.fin-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: fin-spin .8s linear infinite;
    flex-shrink: 0;
}
@keyframes fin-spin { to { transform: rotate(360deg); } }

.fin-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 24px;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
}

.fin-table-footer {
    font-size: 11px;
    color: var(--text-secondary);
    padding: 9px 14px;
    border-top: 0.5px solid var(--border);
}

/* ── AR Ageing buckets ──────────────────────────────────── */
.fin-bucket-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}
@media (max-width: 900px) { .fin-bucket-row { grid-template-columns: repeat(3, 1fr); } }

.fin-bucket {
    background: var(--surface-secondary);
    border: 0.5px solid var(--border);
    border-top: 3px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    transition: box-shadow .15s;
}
.fin-bucket:hover { box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.fin-bucket-val { font-size: 15px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.fin-bucket-sub { font-size: 10px; color: var(--text-secondary); margin-top: 2px; }
.fin-bucket--current { border-top-color: #3B6D11; }
.fin-bucket--30      { border-top-color: #185FA5; }
.fin-bucket--60      { border-top-color: #EF9F27; }
.fin-bucket--90      { border-top-color: #D85A30; }
.fin-bucket--120     { border-top-color: #E24B4A; }
.fin-bucket--over120 { border-top-color: #A32D2D; }