/* PortalGrid — a direct port of the React portal grid chrome (`.aa-table` in
   HomePage.css / ActionsApprovalsPage.css and `.pi-directory-table` in
   ProjectInfoPage.css). Plain-table look shared by the Actions/Approvals and
   Project Directory grids: neutral sticky header band, zebra rows, #e0e0e0
   hairlines, internal vertical scroll, and the "Showing N" count footer.
   Values mirror the React source 1:1 (the app renders at scale, so the
   fractional px are intentional). */

/* ── Shell: fills the tab pane, footer pinned to the bottom ───────────────*/
.pg-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 260px;
    min-width: 0;
    /* 12px gap below the tab row / filter bar, matching React
       (`.pi-directory-table-wrapper` margin-top + `.aa-tab-content` padding-top). */
    margin-top: 12px;
}

/* ── Scroll region (React `.aa-table-wrapper` + the Actions/Manager override
   that adds a top border, #d9d9d9 outline and a white bg) ─────────────────*/
.pg-table-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-bottom: none;
}

/* ── Table (React `.aa-table`) ────────────────────────────────────────────*/
.pg-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 9.6px;
    table-layout: auto;
    background: #fff;
}

/* Sticky header on thead (React keeps the whole thead sticky, not per-th, to
   avoid seams under the page's transform: scale). */
.pg-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.pg-table thead th {
    background-color: #eae8e5;
    color: #222;
    padding: 4.8px 9.6px;
    height: 24px;
    text-align: left;
    /* !important beats the app-wide grid/table font rules (11px/700), matching
       manager.css's approach — React header is 9.6px / 600. */
    font-weight: 600 !important;
    font-size: 9.6px !important;
    /* Top border comes from the wrapper (#d9d9d9); a th border-top would double
       up, so only bottom + right hairlines here. The app-wide `table th`
       rule (app.css) forces a 1px WHITE border-left/right with !important, which
       renders as loud white seams on the gray header — override it back to React's
       subtle #e0e0e0 (and drop the left border) with a higher-specificity
       !important so the column separator reads as lightly as React's. */
    border-top: none !important;
    border-bottom: 1.6px solid #e0e0e0 !important;
    border-right: 1.6px solid #e0e0e0 !important;
    border-left: none !important;
    white-space: nowrap;
}

/* No separator at the grid's outer right edge (React). The col1↔col2 separator is
   kept by default (React `.cm-col-edit` on the Project Reports pages shows one);
   grids that want NO separator after an icon-only first column opt out per-column
   with `.br-icon-col` (Budget/module reports, Actions). */
.pg-table thead th:last-child {
    border-right: none !important;
}

.pg-table thead th {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* React column-sizing model (`.aap-table th/td { width:1px; white-space:nowrap }`):
   a shrink column hugs its content and never wraps; the flex/`pg-col-wrap`
   column (Description) has no width and absorbs the remainder, so short text
   never wraps and long text wraps within a wide column. */
.pg-table th.pg-col-shrink,
.pg-table td.pg-col-shrink {
    width: 1px;
}

/* ── Data cells (React `.aa-table tbody td`) ──────────────────────────────*/
.pg-table tbody td {
    padding: 3.2px 9.6px;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    color: #333;
    height: 19.2px;
    font-size: 8.8px !important;
    font-weight: 500 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-table tbody td:last-child {
    border-right: none;
}

/* Zebra + hover (React `.aa-alt-row` #fafafa; hover #f3f3f3 / alt #efefef). */
.pg-alt-row {
    background-color: #fafafa;
}

.pg-table tbody tr:hover {
    background-color: #f3f3f3;
}

.pg-table tbody tr.pg-alt-row:hover {
    background-color: #efefef;
}

/* ── Alignment + wrap helpers ─────────────────────────────────────────────*/
.pg-th-right { text-align: right; }
.pg-th-center { text-align: center; }
.pg-td-right { text-align: right; }
.pg-td-center { text-align: center; }

/* A column that should wrap over lines instead of clipping (React `.aap-col-desc`
   width:auto; white-space:normal). */
.pg-table td.pg-col-wrap {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.pg-empty-row {
    text-align: center;
    color: #999;
    padding: 32px 9.6px !important;
}

/* ── Count footer (React `.aa-table-footer`, bg from the Actions override) ──*/
.pg-footer {
    margin-top: auto;
    flex-shrink: 0;
    background-color: rgb(234, 233, 231);
    padding: 4.8px 9.6px;
    height: 28.8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 8.8px;
    font-weight: 500;
    color: #999;
    border: 1.6px solid #e0e0e0;
}

/* ── Amount cell: `$` left, value right (React `.aa-amount-cell`) ──────────*/
.pg-amount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.pg-amount-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* ── Status pill (React `.aa-status`) ─────────────────────────────────────*/
.pg-status {
    display: inline-flex;
    align-items: center;
    font-size: 8.4px;
    font-weight: 500;
    padding: 0 6.4px;
    border-radius: 2.4px;
    height: 17.6px;
    line-height: 1;
    white-space: nowrap;
}
.pg-status::before {
    content: '';
    width: 4.8px;
    height: 4.8px;
    border-radius: 50%;
    margin-right: 4px;
    flex-shrink: 0;
}

.pg-status-in-process, .pg-status-open, .pg-status-internal {
    color: #2874a6; background-color: #d6eaf8;
}
.pg-status-in-process::before, .pg-status-open::before, .pg-status-internal::before { background-color: #2874a6; }

.pg-status-on-hold, .pg-status-returned, .pg-status-paused {
    color: #b7950b; background-color: #fef9e7;
}
.pg-status-on-hold::before, .pg-status-returned::before, .pg-status-paused::before { background-color: #b7950b; }

.pg-status-draft { color: #7d3c98; background-color: #f4ecf7; }
.pg-status-draft::before { background-color: #7d3c98; }

.pg-status-pending-approval { color: #856404; background-color: #fff3cd; }
.pg-status-pending-approval::before { background-color: #856404; }

.pg-status-approved, .pg-status-closed, .pg-status-completed {
    color: #2a7f2a; background-color: rgba(44, 162, 76, 0.18);
}
.pg-status-approved::before, .pg-status-closed::before, .pg-status-completed::before { background-color: #2a7f2a; }

.pg-status-rejected, .pg-status-overdue {
    color: #cc2222; background-color: rgba(217, 54, 54, 0.18);
}
.pg-status-rejected::before, .pg-status-overdue::before { background-color: #cc2222; }

.pg-status-cancelled, .pg-status-canceled, .pg-status-unknown {
    color: #777; background-color: #eee;
}
.pg-status-cancelled::before, .pg-status-canceled::before, .pg-status-unknown::before { background-color: #777; }

/* ── Command / open button (Actions first column magnifier / pencil) ──────*/
.pg-cmd-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.pg-cmd-btn svg {
    width: 14px;
    height: 14px;
    fill: #b0b0b0;
    transition: fill 0.15s ease;
}
.pg-cmd-btn:hover svg { fill: #777; }
.pg-cmd-btn .pg-cmd-overdue { fill: #cc2222; }

/* ── Header person icon in the Action/Approval column (React `.aa-header`) ─*/
.pg-aa-header {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    vertical-align: middle;
}
.pg-header-person {
    width: 12.8px;
    height: 12.8px;
    object-fit: contain;
    filter: brightness(0);
}

/* ── Responsibility: small themed user icon before the name (React) ───────*/
.pg-resp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pg-resp-icon {
    width: 10.4px;
    height: 10.4px;
    color: var(--projectrac-secondary-color);
    flex-shrink: 0;
}