/*
 * app-grid.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Reusable data-table component for list / register pages.
 * Wrap any <table> with class="app-grid" to get a modern, dense,
 * theme-aware grid: sticky header, zebra rows, hover, right-aligned
 * money columns, status pills, totals footer and empty-state row.
 *
 * Deploy to : /include/styles/app-grid.css
 * Include in: /views/layout/page_foot.inc  (once, globally)
 *
 *   <link rel="stylesheet" href="/include/styles/app-grid.css">
 *
 * Load ORDER: after vendor CSS, BEFORE dark-mode.css so the dark
 * overrides below win. (Or keep the html.dark-mode rules here — they
 * use the same --dm-* vars and !important, so order is forgiving.)
 *
 * Column helpers — add to any <th>/<td>:
 *   .num    right-align + tabular figures (money / counts)
 *   .ctr    centre-align (codes, ids, short flags)
 *   .name   allow wrapping + min-width (long text columns)
 *   .nowrap force single line
 *
 * Status pills — <span class="pill pill-ok">…</span>:
 *   .pill-new  .pill-proc  .pill-ok  .pill-done  .pill-stop
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Grid shell ─────────────────────────────────────────────────── */
.app-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .86rem;
}

    /* ── Sticky header ──────────────────────────────────────────────── */
    .app-grid thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--dm-surface2, #f1f4f9);
        color: var(--dm-text, #2a3342);
        font-weight: 600;
        font-size: .74rem;
        letter-spacing: .03em;
        text-transform: uppercase;
        padding: 10px 12px;
        white-space: nowrap;
        border-bottom: 2px solid var(--dm-border, #dee2e6);
        text-align: left;
    }

        .app-grid thead th a {
            color: inherit;
            text-decoration: none;
        }

            .app-grid thead th a:hover {
                text-decoration: underline;
            }

    /* ── Body cells ─────────────────────────────────────────────────── */
    .app-grid tbody td {
        padding: 8px 12px;
        border-bottom: 1px solid var(--dm-border, #eef0f3);
        vertical-align: middle;
        white-space: nowrap;
    }

    .app-grid tbody tr:nth-child(even) {
        background: var(--dm-row-alt, #f8fafc);
    }

    .app-grid tbody tr:hover {
        background: var(--dm-hover, #eef4ff);
    }

    /* ── Column alignment helpers ───────────────────────────────────── */
    .app-grid .num {
        text-align: right;
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

    .app-grid .ctr {
        text-align: center;
    }

    .app-grid .name {
        white-space: normal;
        min-width: 160px;
    }

    .app-grid .nowrap {
        white-space: nowrap;
    }

    /* ── Totals footer ──────────────────────────────────────────────── */
    .app-grid tfoot td {
        padding: 10px 12px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        border-top: 2px solid var(--dm-border, #dee2e6);
        background: var(--dm-surface2, #f1f4f9);
    }

    /* ── "View" / row action as a quiet button ──────────────────────── */
    .app-grid .view-link {
        display: inline-block;
        padding: 2px 10px;
        border-radius: 6px;
        font-size: .78rem;
        text-decoration: none;
        border: 1px solid var(--dm-border, #cdd5e0);
        color: var(--dm-accent, #0d6efd);
    }

        .app-grid .view-link:hover {
            background: var(--dm-accent, #0d6efd);
            color: #fff;
        }

    /* ── Empty state row ────────────────────────────────────────────── */
    .app-grid .empty {
        text-align: center;
        padding: 36px 12px;
        color: var(--dm-text-muted, #8a94a6);
    }

/* ═══════════════════════════════════════════════════════════════════
   STATUS PILLS — colour by workflow stage. Reusable on any page.
   ═══════════════════════════════════════════════════════════════════ */
.pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
}

.pill-new {
    background: #e7f1ff;
    color: #0a58ca;
}
/* early / submitted   */
.pill-proc {
    background: #fff3cd;
    color: #9a6700;
}
/* in-progress         */
.pill-ok {
    background: #d1f3e0;
    color: #136c43;
}
/* approved / done     */
.pill-done {
    background: #e2e3e5;
    color: #41464b;
}
/* closed / disbursed  */
.pill-stop {
    background: #f8d7da;
    color: #b02a37;
}
/* rejected / declined */

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */
html.dark-mode .pill-new {
    background: #16314f;
    color: #7fb2ff;
}

html.dark-mode .pill-proc {
    background: #3b2e0a;
    color: #fde047;
}

html.dark-mode .pill-ok {
    background: #14301f;
    color: #86efac;
}

html.dark-mode .pill-done {
    background: #272d3d;
    color: #aab2c0;
}

html.dark-mode .pill-stop {
    background: #3b1212;
    color: #fca5a5;
}

/* The grid already reads --dm-* variables, so header / rows / footer
   adapt automatically in dark mode. These explicit rules just ensure
   the grid still themes correctly even if app-grid.css loads AFTER
   dark-mode.css (in which case the var() fallbacks would otherwise
   not apply the dark surface). */
html.dark-mode .app-grid thead th,
html.dark-mode .app-grid tfoot td {
    background: var(--dm-surface2) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .app-grid tbody td {
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .app-grid tbody tr:nth-child(even) {
    background: var(--dm-row-alt) !important;
}

html.dark-mode .app-grid tbody tr:hover {
    background: var(--dm-hover) !important;
}