/*
 * reports.css — shared styles for billwise/aging report pages.
 * Rules are scoped to `.report-page` so they cannot leak into the rest of the app.
 * Opt in on a page: <div class="report-page report-page--ar"> ... </div>
 */

.report-page .form-control,
.report-page .form-select { font-size: 12px !important; }
/* Table density/skin overrides removed — Bootstrap 5.3 defaults now apply. */

/* ── Stat cards ─────────────────────────────────────────────── */
.report-page .stat-card {
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid transparent;
}
.report-page .stat-card .stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    opacity: .75;
}
.report-page .stat-card .stat-value {
    font-size: 22px;
    font-weight: 700;
    margin-top: 4px;
    line-height: 1.1;
}
.report-page .stat-card .stat-icon { width: 32px; height: 32px; opacity: .7; }
.report-page .stat-card i.stat-icon { width: auto; height: auto; font-size: 28px; opacity: .2; }

.report-page .stat-card--primary { background: linear-gradient(135deg, #eff6ff, #dbeafe); border-color: #93c5fd; }
.report-page .stat-card--success { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border-color: #86efac; }
.report-page .stat-card--warning { background: linear-gradient(135deg, #fef3c7, #fde68a); border-color: #fcd34d; }
.report-page .stat-card--danger  { background: linear-gradient(135deg, #fff1f0, #fee2e2); border-color: #fca5a5; }
.report-page .stat-card--violet  { background: linear-gradient(135deg, #f5f3ff, #ede9fe); border-color: #c4b5fd; }

.report-page .stat-card--warning .stat-label,
.report-page .stat-card--warning .stat-value { color: #92400e; }
.report-page .stat-card--warning i.stat-icon { color: #b45309; }
.report-page .stat-card--violet .stat-label,
.report-page .stat-card--violet .stat-value,
.report-page .stat-card--violet i.stat-icon { color: #6d28d9; }

/* ── SVG icons used in billwise report ──────────────────────── */
.report-page .billwise-svg-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    vertical-align: -3px;
    shape-rendering: geometricPrecision;
}
.report-page .billwise-svg-icon--lg { width: 32px; height: 32px; }

/* Fixed-pixel column widths still used in report tables (harmless helpers) */
.report-page .col-w-40 { width: 40px; }
.report-page .col-w-36 { width: 36px; }
.report-page .col-w-60 { width: 60px; }
/* Custom .ar-table / .ap-table skins removed — tables use Bootstrap 5.3 defaults. */

/* ── AP status pill variants ───────────────────────────────── */
.report-page--ap .badge-ap-danger  { background: rgba(220,38,38,.12);  color: #dc2626; border: 1px solid rgba(220,38,38,.25); }
.report-page--ap .badge-ap-warning { background: rgba(202,138,4,.12);  color: #92400e; border: 1px solid rgba(202,138,4,.25); }
.report-page--ap .badge-ap-blue    { background: rgba(37,99,235,.12);  color: #1d4ed8; border: 1px solid rgba(37,99,235,.25); }
.report-page--ap .badge-ap-gray    { background: rgba(107,114,128,.1); color: #374151; border: 1px solid rgba(107,114,128,.25); }

/* ── Print ─────────────────────────────────────────────────── */
@media print {
    .report-page .no-print { display: none !important; }
    .report-page .card { border: none !important; box-shadow: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   Ledger-summary listings (debtors/list, creditors/list, etc.)
   These use the `.ns-*` class family already, so they don't need
   a wrapper — the class prefix scopes them.
───────────────────────────────────────────────────────────── */

.ns-report-card {
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

.ns-filter-bar {
    background: linear-gradient(180deg, #f7f9fc 0%, #eff3f8 100%);
    border-bottom: 1px solid #dfe3e8;
    border-radius: 8px 8px 0 0;
    padding: 14px 16px;
}
.ns-filter-bar .form-label {
    font-size: 11px;
    color: #5b6673;
    margin-bottom: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ns-kpi {
    border: 1px solid #e5e9ef;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fbfcfe;
}
.ns-kpi .kpi-label {
    font-size: 11px;
    color: #5b6673;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
    font-weight: 600;
}
.ns-kpi .kpi-value {
    font-size: 17px;
    font-weight: 700;
    color: #1f2937;
}

.ns-table-wrap {
    border-top: 1px solid #e5e9ef;
    margin-top: 14px;
    padding-top: 14px;
}

/* .ns-table skin removed — tables use Bootstrap 5.3 defaults.
   Column-width helpers kept because they're neutral of any table color scheme. */
.col-pct-4  { width: 4%; }
.col-pct-11 { width: 11%; }
.col-pct-12 { width: 12%; }
.col-pct-28 { width: 28%; }
.num        { text-align: right; font-variant-numeric: tabular-nums; }

.ns-link { color: #0f4f9e; text-decoration: none; }
.ns-link:hover { text-decoration: underline; }

@media (max-width: 992px) {
    .ns-action-stack .btn { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────
   Utility classes emitted by the inline-style codemod that are
   not guaranteed by stock Bootstrap 5.
───────────────────────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.text-justify   { text-align: justify; }