/* Budget Manager — pixel parity with the React Budget Manager.
   Neutral chrome (title bar, grid header) is matched to React; the
   per-project brand colors are preserved only on the action badge.
   Scoped to this page — other manager grids are unaffected. */

/* Cream page canvas behind the card: React `.app-content` (#faf8f5). */
.mgr-root {
    background-color: #faf8f5;
}

/* ── Layout / height chain ───────────────────────────────────────────────
   The grid fills the work area (with a minimum height) and scrolls its own
   rows internally; the page itself does not scroll horizontally, and only
   scrolls vertically if the viewport is shorter than the grid's minimum.
   `min-width:0` on the flex chain lets the grid shrink and use its own
   horizontal scroll instead of overflowing the page. */
.mgr-scroll {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    /* Match React `.app-content` inset (24px 12px 12px 48px). The Bootstrap
       ps-4/pe-3/pt-3 utilities only give 18/12/12; React indents the content
       48px on the left, which is the gap the client flagged. Keep top at 12px
       (the banner sits directly above) and add the 12px bottom React has. */
    padding: 12px 12px 12px 48px !important;
}

.mgr-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

.mgr-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

.mgr-manager {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

/* The active tab pane (Tab.razor) fills, so the grid inside can grow. */
.mgr-manager .tabbed-pane-active {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

/* Grid fills its pane with a sensible minimum height. */
.mgr-manager .mgr-grid,
.mgr-manager .actions-grid {
    flex: 1 1 auto;
    min-height: 260px;
    min-width: 0;
    height: auto;
}

/* ── Page module title bar: React `.content-title` ───────────────────────
   Full-width gray band with the black budget glyph, bled to the very top of
   the content area (kills the white gap under the project banner) and out to
   the container edges (container has mt-5 + ps-4/pe-3). */
.mgr-content-title {
    display: flex;
    align-items: center;
    background-color: #d9d9d9;
    color: #222;
    font-size: 14.4px;
    font-weight: 700;
    line-height: 1.2;
    padding: 12px 48px;
    /* Bottom margin matches React `.content-title` (20px gap to the card). The
       -48px left margin bleeds the gray band back out to the content-area edge
       (cancelling the 48px container inset above) while the 48px left padding
       keeps the title text on the card's left edge — exactly as React does. */
    margin: -12px -16px 20px -48px;
    border-bottom: 1px solid #d9d9d9;
    flex: 0 0 auto;
}

/* Blazor's <FocusOnNavigate Selector="h1"> focuses this title band after every
   route change (it's the first h1), which drew a UA focus outline that read as
   the whole title being "selected". Keep the a11y focus, hide the outline —
   no keyboard user tabs to an h1. */
.mgr-content-title:focus,
.mgr-content-title:focus-visible {
    outline: none;
}

.mgr-content-title-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0);
    margin-right: 6.4px;
}

/* ── Card wrapper (React `.reports-page-card` / `.reports-page-body`) ─────
   Transparent outer; the body is the white bordered card holding the tabs
   and grid, with a rounded bottom. */
.mgr-card {
    background-color: transparent;
}

/* "Budget Manager" header row — the #333 rule below it is React's black line
   (`.portal-header-row` border-bottom). */
.mgr-portal-header-row {
    border-bottom: 1px solid #333;
    flex: 0 0 auto;
}

.mgr-portal-header {
    color: #222;
    font-size: 12.8px;
    font-weight: 700;
    line-height: 1.2;
    padding: 4.8px 12px;
}

.mgr-card-body {
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 0 0 3.2px 3.2px;
    padding: 4px 12px 12px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

/* ── Tabs: React `.portal-tab` look ──────────────────────────────────────
   10.4px text; inactive #999; active keeps the project secondary color with
   a thin 1px underline (React's active tab is themed, not black). A #d9d9d9
   rule runs under the whole tab strip. Scoped override of the shared Tabbed
   component for this page only. */
.mgr-manager .tab-text.tabbed-tab-text {
    font-size: 10.4px !important;
    margin-right: 0 !important;
    /* Drop the component's default 2.4px left margin so the label centers
       within the 16px tab padding (otherwise it rides right-of-centre and
       widens the tab by 2.4px). */
    margin-left: 0 !important;
}

.mgr-manager .tab-text.tabbed-tab-text:not(.tab-selected) {
    color: #999 !important;
    stroke: #999 !important;
    font-weight: 500 !important;
}

/* Active tab = project SECONDARY color (the base .tab-selected has no !important,
   so a primary-colored rule could win in a clean build — force secondary here). */
.mgr-manager .tab-text.tabbed-tab-text.tab-selected {
    color: var(--projectrac-secondary-color) !important;
    stroke: var(--projectrac-secondary-color) !important;
    font-weight: 600 !important;
}

.mgr-manager .tab-selected {
    border-bottom-width: 1.6px !important;
    height: auto !important;
}

.mgr-manager .tab-selected-border {
    border-bottom-width: 1.6px !important;
    border-bottom-color: var(--projectrac-secondary-color) !important;
}

.mgr-manager .tab-inactive-border {
    border-bottom-width: 1px !important;
    border-bottom-color: #d9d9d9 !important;
}

/* Continuous separator line under the whole tab row (React `.aa-tabs-row`
   border-bottom), and a shorter row with tabs bottom-aligned so their
   underlines sit on that line. */
.mgr-manager .projectrac-condensed {
    border-bottom: 1px solid #d9d9d9;
    align-items: flex-end;
}

.mgr-manager .projectrac-condensed > .btn {
    padding-top: 4px !important;
    /* React `.portal-tab` has 16px left/right padding; the shared Tabbed
       component hard-codes `padding:0` inline + a `me-3` gap, so the underline
       hugs the text. Override to 16px padding and drop the margin so tabs sit
       adjacent like React (the underline is widened below to span it). */
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 0 !important;
    margin-right: 0 !important;
    min-height: 0 !important;
}

/* React's tabs have no leading spacer; the component injects an empty `.ps-2`
   (8px) before the label, which offsets the text. Drop it so the label centers
   within the 16px padding. */
.mgr-manager .projectrac-condensed > .btn .tab-text .ps-2 {
    display: none !important;
}

/* Trim the tall bottom padding on the tab underline divs and pull them down
   1px so the active underline overlaps the row's separator line. The negative
   L/R margins stretch the underline (a child div, so it would otherwise only
   be as wide as the text) out to the tab's full padded width — matching
   React, where the underline is a border-bottom on the padded `.portal-tab`. */
.mgr-manager .tab-selected-border,
.mgr-manager .tab-inactive-border {
    padding-bottom: 3px !important;
    margin-bottom: -1px;
    margin-left: -16px;
    margin-right: -16px;
}

/* ── Grid header: React `.aa-table thead th` ─────────────────────────────
   Neutral gray header (overrides the app-wide primary-color themed header),
   React's font size, weight and padding. */
.mgr-manager .mgr-grid .k-table-th {
    background-color: #d9d9d9 !important;
    color: #222 !important;
    padding: 4.8px 9.6px;
    border-left: none !important;
    border-right: 1px solid #e0e0e0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    vertical-align: middle;
}

/* Header text lives in an inner .k-column-title span that keeps the app's
   11px scale — force React's 9.6px / 600 there directly. */
.mgr-manager .mgr-grid .k-table-th,
.mgr-manager .mgr-grid .k-table-th .k-cell-inner,
.mgr-manager .mgr-grid .k-table-th .k-link,
.mgr-manager .mgr-grid .k-table-th .k-column-title {
    font-size: 9.6px !important;
    font-weight: 600 !important;
}

/* ── Grid data cells: React `.aa-table tbody td` ─────────────────────────*/
.mgr-manager .mgr-grid .k-table-td {
    font-size: 8.8px !important;
    color: #333;
    padding: 3.2px 9.6px;
    border-left: none !important;
    border-right: 1px solid #e0e0e0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    vertical-align: middle;
}

/* Last column has no right border (React); avoids a line at the grid edge. */
.mgr-manager .mgr-grid .k-table-th:last-child,
.mgr-manager .mgr-grid .k-table-td:last-child {
    border-right: none !important;
}

/* Right-aligned numeric / date columns, matching React. Class-based so each
   page applies it to its own columns (positions differ): put `mgr-col-right`
   in the column's HeaderClass, and wrap the cell value in a `.mgr-cell-right`
   element. (Budget: Date + Deadline; Contract/Financial: Date.) */
.mgr-manager .mgr-grid .k-table-th.mgr-col-right {
    text-align: right;
}
.mgr-manager .mgr-grid .mgr-cell-right {
    display: block;
    text-align: right;
}

/* Consultant / Company column — clip long vendor names to a single line with
   an ellipsis (React does the same), keeping row heights uniform. Wrap the
   cell value in `.mgr-cell-ellipsis` and give it a `title` for the full name. */
.mgr-manager .mgr-grid .mgr-cell-ellipsis {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Telerik renders the header title inside a flex `.k-cell-inner`/`.k-link`,
   which ignores `text-align: right` — so push the title to the end of the
   flex row for right-aligned headers, matching React. */
.mgr-manager .mgr-grid .k-table-th.mgr-col-right .k-cell-inner,
.mgr-manager .mgr-grid .k-table-th.mgr-col-right .k-link {
    justify-content: flex-end;
}

/* Subtle zebra striping, matching React's `.aa-alt-row` (#fafafa). */
.mgr-manager .mgr-grid .k-table-row.k-table-alt-row,
.mgr-manager .mgr-grid .k-table-alt-row > .k-table-td {
    background-color: #fafafa;
}

/* ── Status pill: React `.aa-status` ─────────────────────────────────────
   Geometry (8.4px/500, 0 6.4px pad, 17.6px tall, 2.4px radius) and a 4.8px
   dot, replacing the app's larger themed pill for this page. */
.mgr-manager .mgr-grid .rounded-status {
    display: inline-flex !important;
    align-items: center;
    font-size: 8.4px !important;
    font-weight: 500 !important;
    padding: 0 6.4px !important;
    height: 17.6px;
    border-radius: 2.4px !important;
    line-height: 1;
    white-space: nowrap;
}

.mgr-manager .mgr-grid .rounded-status svg {
    width: 4.8px !important;
    height: 4.8px !important;
    flex-shrink: 0;
    margin-right: 4px !important;
}

/* Exact React status colors (text / background) + matching dot fill. */
.mgr-manager .mgr-grid .status-in-process,
.mgr-manager .mgr-grid .status-open,
.mgr-manager .mgr-grid .status-internal {
    color: #2874a6 !important;
    background-color: #d6eaf8 !important;
}
.mgr-manager .mgr-grid .status-in-process-circle,
.mgr-manager .mgr-grid .status-open-circle { fill: #2874a6 !important; }

.mgr-manager .mgr-grid .status-on-hold,
.mgr-manager .mgr-grid .status-returned,
.mgr-manager .mgr-grid .status-paused {
    color: #b7950b !important;
    background-color: #fef9e7 !important;
}
.mgr-manager .mgr-grid .status-on-hold-circle { fill: #b7950b !important; }

.mgr-manager .mgr-grid .status-draft {
    color: #7d3c98 !important;
    background-color: #f4ecf7 !important;
}
.mgr-manager .mgr-grid .status-draft-circle { fill: #7d3c98 !important; }

.mgr-manager .mgr-grid .status-approved,
.mgr-manager .mgr-grid .status-closed,
.mgr-manager .mgr-grid .status-completed {
    color: #2a7f2a !important;
    background-color: rgba(44, 162, 76, 0.18) !important;
}
.mgr-manager .mgr-grid .status-approved-circle,
.mgr-manager .mgr-grid .status-open-circle.status-approved-circle { fill: #2a7f2a !important; }

.mgr-manager .mgr-grid .status-rejected,
.mgr-manager .mgr-grid .status-overdue {
    color: #cc2222 !important;
    background-color: rgba(217, 54, 54, 0.18) !important;
}
.mgr-manager .mgr-grid .status-rejected-circle { fill: #cc2222 !important; }

.mgr-manager .mgr-grid .status-canceled,
.mgr-manager .mgr-grid .status-cancelled,
.mgr-manager .mgr-grid .status-unknown {
    color: #777 !important;
    background-color: #eee !important;
}
.mgr-manager .mgr-grid .status-canceled-circle,
.mgr-manager .mgr-grid .status-unknown-circle { fill: #777 !important; }

.mgr-manager .mgr-grid .status-pending-approval {
    color: #856404 !important;
    background-color: #fff3cd !important;
}
.mgr-manager .mgr-grid .status-pending-approval-circle { fill: #856404 !important; }

/* Lift the Filter / New Form action cluster off the tab-row divider so a small
   ~2.6px gap sits below the buttons, matching React (where the buttons are
   centered in a taller row). The cluster is Tabbed's `justify-content-end`
   wrapper — a direct child of the row, bottom-aligned — so a margin-bottom
   here nudges the whole cluster up without disturbing the tab underlines. */
.mgr-manager .projectrac-condensed > .justify-content-end {
    margin-bottom: 1.6px;
}

/* ── New Form button: React's action button (secondary fill, 9.6px/500,
   0 8px pad, 22.4px tall, 3.2px radius), right-aligned to the grid edge. ─*/
.mgr-manager .mgr-newform {
    margin-right: 0 !important;
}
.mgr-manager .mgr-newform .dropdown-toggle {
    background-color: var(--projectrac-secondary-color);
    color: var(--projectrac-secondary-text-color, #fff);
    font-size: 9.6px;
    font-weight: 500;
    line-height: 1;
    padding: 0 8px;
    height: 22.4px;
    border-radius: 3.2px;
    border: none;
    display: inline-flex;
    align-items: center;
}
.mgr-manager .mgr-newform .dropdown-toggle:hover,
.mgr-manager .mgr-newform .dropdown-toggle:focus {
    background-color: var(--projectrac-secondary-color);
    color: var(--projectrac-secondary-text-color, #fff);
    filter: brightness(0.94);
}

/* Task 4: leading + on the New Form button — the actual React plus icon
   (aa-add-doc-icon: 9.6px, white, 2.4px gap). Using the image (centered by
   background-position) guarantees vertical centering, unlike a text glyph. */
.mgr-manager .mgr-newform .dropdown-toggle::before {
    content: "";
    display: inline-block;
    width: 9.6px;
    height: 9.6px;
    background: url("/icons/Plus-Icon.png") no-repeat center / contain;
    filter: brightness(0) invert(1);
    margin-right: 2.4px;
}

/* Task 5: a more pronounced dropdown chevron. */
.mgr-manager .mgr-newform .dropdown-toggle::after {
    border-top: 5px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-bottom: 0;
    margin-left: 7px;
    vertical-align: middle;
}

/* ── New Form dropdown MENU — React `.bm-new-form-menu` / `.bm-new-form-item`
   (BudgetManagerPage.css; the Contract and Financial copies are identical).
   The toggle above was already styled, but the menu itself was still on
   Bootstrap's `.dropdown-menu` / `.dropdown-item` defaults — hence the larger,
   black, roomier items. React tints the panel with the env accent rather than
   leaving it white. ─────────────────────────────────────────────────────*/
.mgr-manager .mgr-newform .dropdown-menu {
    min-width: 144px;
    padding: 3.2px 0;
    margin-top: 1.6px;
    background: color-mix(in srgb, var(--projectrac-secondary-color) 20%, white);
    border: 1px solid var(--projectrac-secondary-color);
    border-radius: 3.2px;
    box-shadow: 0 3.2px 9.6px rgba(0, 0, 0, 0.12);
}

.mgr-manager .mgr-newform .dropdown-item {
    display: block;
    width: 100%;
    padding: 4.8px 9.6px;
    background: none;
    border: none;
    text-align: left;
    font-family: inherit;
    font-size: 9.6px !important;   /* app-wide rules force a larger size */
    font-weight: 500 !important;
    /* !important: app.css L1541 `div.dropdown > ul > li > a` sets
       `color: var(--projectrac-secondary-color) !important`, which paints these
       items in the project accent. React's menu text is a plain #333. */
    color: #333 !important;
    cursor: pointer;
}

    /* !important: app.css has `a.dropdown-item:hover` with an !important
       background, and these items are <a> elements. */
    .mgr-manager .mgr-newform .dropdown-item:hover,
    .mgr-manager .mgr-newform .dropdown-item:focus {
        background-color: color-mix(in srgb, var(--projectrac-secondary-color) 40%, white) !important;
        color: #333;
        border-radius: 0;
    }

    /* The leading plus is a Telerik font icon here; scale it to the 9.6px text
       so it does not drive the item's height. */
    .mgr-manager .mgr-newform .dropdown-item .k-icon,
    .mgr-manager .mgr-newform .dropdown-item .k-font-icon {
        font-size: 9.6px;
        width: 9.6px;
        height: 9.6px;
        margin-right: 2.4px;
    }

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

/* ── Amount: `$` left, value right (React `.aa-amount-cell`) ─────────────*/
.mgr-manager .mgr-grid .mgr-amount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.mgr-manager .mgr-grid .mgr-amount-sign {
    color: #333;
}

/* ── First column: a plain light-gray magnifying glass (no filled badge),
   with a matching magnifier icon in the header. ─────────────────────────*/
.mgr-manager .mgr-grid .k-command-cell {
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
}

/* 17.6px, not 20: the button now wraps React's .aa-edit-badge/.aa-view-badge,
   which are themselves 17.6px. At 20px the button — not the badge or the status
   pill — was the tallest thing in the row and drove it to 27.4px. */
.mgr-manager .mgr-grid .k-command-cell .k-button {
    width: 17.6px;
    height: 17.6px;
    min-width: 17.6px;
    padding: 0;
    background-color: transparent;
    border: none;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mgr-manager .mgr-grid .k-command-cell .k-button svg {
    width: 14px;
    height: 14px;
    fill: #b0b0b0 !important;
    transition: fill 0.15s ease;
}

.mgr-manager .mgr-grid .k-command-cell .k-button:hover svg {
    fill: #777 !important;
}

/* Header icon on the first (command) column — React's Edit-icon, forced black.
   Drawn on the cell itself rather than as an <img> in a HeaderTemplate: Telerik
   wraps header content in `.k-cell-inner > .k-link`, a flex row that will not
   centre a lone icon, and an explicit HeaderTemplate also forces the column's
   body into a <ChildContent> wrapper. A mask (not background-image) so the glyph
   is pure black whatever colour the PNG ships — React does the same with
   `filter: brightness(0)` on `.aa-header-icon`. */
.mgr-manager .mgr-grid .k-table-th:first-child {
    position: relative;
}

    .mgr-manager .mgr-grid .k-table-th:first-child::before {
        content: '';
        position: absolute;
        inset: 0;
        background-color: #222;
        -webkit-mask: url("/icons/Edit-icon.png") center / 12.8px 12.8px no-repeat;
        mask: url("/icons/Edit-icon.png") center / 12.8px 12.8px no-repeat;
    }

/* Links (col 2) header icon — React's Links icon. */
.mgr-manager .mgr-grid .k-table-th:nth-child(2) {
    background-image: url("/icons/Links-icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12.8px 12.8px;
}

/* Links cell column — centered, tight padding. */
.mgr-manager .mgr-grid .k-table-td:nth-child(2) {
    text-align: center;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* My-icon column (col 3) — React `.bm-col-icon` (BudgetManagerPage.css:66-76,
   and the cm-/fm- twins). Header carries the icon only; the body cell is empty
   on EVERY row in all three managers (`<td className="bm-col-icon"></td>`).
   Both side borders are dropped so the column reads as the left edge of
   Action / Approval rather than a third gutter cell, and the next column loses
   its left padding to butt against it (React `.bm-col-aa { padding-left: 0 }`).
   Width 36.8px = the 17.6px `.aa-header-icon-wrap` + 9.6px padding each side,
   which is what React's `width:1px; white-space:nowrap` shrinks to. */
/* Masked, not background-image, so the glyph is pure black whatever colour the
   PNG ships — React does the same with `filter: brightness(0)` on
   `.aa-header-icon`. Same treatment as the first (Edit) column above. */
.mgr-manager .mgr-grid th.mgr-col-my {
    position: relative;
}

    .mgr-manager .mgr-grid th.mgr-col-my::before {
        content: '';
        position: absolute;
        inset: 0;
        background-color: #222;
        -webkit-mask: url("/icons/My-icon.png") center / 12.8px 12.8px no-repeat;
        mask: url("/icons/My-icon.png") center / 12.8px 12.8px no-repeat;
    }
/* The header is reached by class (`HeaderClass`), the body cells by position:
   Telerik's GridColumn exposes HeaderClass but has NO `Class` parameter for its
   cells — passing one compiles but throws at runtime ("does not have a property
   matching the name 'Class'"). The alternative is an OnCellRender handler per
   column; positional selectors are what the Links column above already uses. */
.mgr-manager .mgr-grid th.mgr-col-my,
.mgr-manager .mgr-grid .k-table-td:nth-child(3) {
    border-right: none !important;
    border-left: none !important;
    padding-left: 9.6px !important;
    padding-right: 9.6px !important;
}
.mgr-manager .mgr-grid th.mgr-col-my + th,
.mgr-manager .mgr-grid .k-table-td:nth-child(4) {
    padding-left: 0 !important;
}

/* Amount header `$` left / label right (React), and let the flex fill the
   Telerik header wrappers (sort icons are hidden so there's room now).
   Amount is column 6 (edit, links, My-icon, Action/Approval, Form #, Amount). */
.mgr-manager .mgr-grid .mgr-amount-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 78px;
}
/* Telerik keeps .k-column-title content-sized; let the fixed-width amount
   header flex overflow it (visibly) so `$` and the label sit at the two
   edges. Applied via HeaderClass `mgr-col-amount` (position differs per page). */
.mgr-manager .mgr-grid .k-table-th.mgr-col-amount .k-cell-inner,
.mgr-manager .mgr-grid .k-table-th.mgr-col-amount .k-link,
.mgr-manager .mgr-grid .k-table-th.mgr-col-amount .k-column-title {
    overflow: visible !important;
}
.mgr-manager .mgr-grid .mgr-links-icon {
    width: 12px;
    height: 12px;
    object-fit: contain;
    cursor: pointer;
    filter: brightness(0);
    opacity: 0.45;
    vertical-align: middle;
    transition: opacity 0.15s ease;
}
.mgr-manager .mgr-grid .mgr-links-icon:hover { opacity: 0.75; }

/* React's headers have no persistent sort arrows — hide Telerik's (loud,
   themed-red) sort indicator; column-header click still sorts. */
.mgr-manager .mgr-grid .k-sort-icon,
.mgr-manager .mgr-grid .k-sort-order {
    display: none !important;
}

/* ── Task 6: Filter button (React `.aa-filter-toggle`) ───────────────────*/
.mgr-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22.4px;
    padding: 0 9.6px;
    font-size: 9.6px;
    font-weight: 500;
    color: #333;
    background-color: rgb(234, 233, 231);
    border: none;
    border-radius: 3.2px;
    line-height: 1;
}
.mgr-filter-btn:hover {
    background-color: #c9c9c9;
    color: #333;
}
.mgr-filter-btn.active,
.mgr-filter-btn.has-filters {
    background-color: var(--projectrac-secondary-color);
    color: var(--projectrac-secondary-text-color, #fff);
}
.mgr-filter-icon {
    width: 11px;
    height: 11px;
    object-fit: contain;
    filter: brightness(0) opacity(0.65);
}
.mgr-filter-btn.active .mgr-filter-icon,
.mgr-filter-btn.has-filters .mgr-filter-icon {
    filter: brightness(0) invert(1);
}

/* ── Task 6: Filter control pane (React `.aa-filter-bar`) ────────────────*/
.mgr-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4.8px;
    padding: 8px 0 4px;
}
.mgr-filter-input {
    height: 24px;
    font-size: 9.6px;
    color: #333;
    padding: 0 6.4px;
    border: 1px solid #d9d9d9;
    border-radius: 2.4px;
    background: #fff;
    box-sizing: border-box;
}
.mgr-filter-input:focus {
    outline: none;
    border-color: var(--projectrac-secondary-color);
}
.mgr-filter-amount { width: 64px; }
.mgr-filter-date { width: 116px; }
.mgr-filter-action { min-width: 130px; }
.mgr-filter-desc { min-width: 160px; flex: 1 1 auto; max-width: 240px; }
.mgr-filter-sep { font-size: 9.6px; color: #777; }
.mgr-filter-clear {
    height: 24px;
    font-size: 9.6px;
    padding: 0 9.6px;
    border: none;
    border-radius: 2.4px;
    background: #ececec;
    color: #333;
    cursor: pointer;
}
.mgr-filter-clear:hover { background: #dcdcdc; }

/* ── Budget Reports (React BudgetReportsPage parity: top grid + PDF flyout) ──
   Static single-tab row + active label (React `.aa-tabs-row` / `.portal-tab active`),
   a clickable report-title link, and the icon-column header glyph. The grid itself
   is the shared PortalGrid (React `.aa-table`). */
.br-tabs-row {
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid #d9d9d9;
}
.br-tabs-row .br-tab {
    font-size: 10.4px;
    font-weight: 600;
    color: var(--projectrac-secondary-color);
    padding: 4px 16px 3px;
    border-bottom: 1.6px solid var(--projectrac-secondary-color);
    margin-bottom: -1px;
}
.br-tabs-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    padding-bottom: 1.6px;
}
/* Clickable report title (React `.aa-action-link`). */
.br-link {
    color: var(--projectrac-secondary-color);
    cursor: pointer;
    font-weight: 500;
}
.br-link:hover { text-decoration: underline; }
/* Module reports (budget/contract/financial/schedule): the report name is neutral
   at rest and only takes the secondary color on hover (React `.aa-action-link`).
   Scoped to `.br-link-hoveronly` so the Project Reports screens keep the default. */
.br-link.br-link-hoveronly { color: inherit; }
.br-link.br-link-hoveronly:hover { color: var(--projectrac-secondary-color); }
/* Project Reports (Development / MAP / Minutes / Monthly): React's document
   title is PLAIN TEXT -- `.aa-table td.rep-doc-title { font-weight: 500 }` with
   no link color and no hover, because opening is handled by the first-column
   view tile (which this port also has). The pointer cursor is kept since, unlike
   React, the title here is still a click target. */
.br-doc-title {
    color: inherit;
    font-weight: 500;
    cursor: pointer;
}
/* Icon column — header budget glyph + row doc icon, both centered in a 17.6px
   box with `margin:0 auto` so the header icon and every row icon share one
   vertical axis (React `.aa-header-icon-wrap` / `.aa-view-badge`). */
.br-head-icon-wrap,
.br-view-badge {
    width: 17.6px;
    height: 17.6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
/* Header glyph (React `.aa-header-icon`): 12.8px pure-black budget icon. */
.br-head-icon {
    width: 12.8px;
    height: 12.8px;
    object-fit: contain;
    filter: brightness(0);
}
/* Row open badge (React `.aa-view-badge` + `.aa-view-icon`): a 9.6px doc icon,
   light gray at rest, project-secondary on row hover. Uses the icon as a mask so
   the color is exact (not a filter approximation). */
.br-view-badge {
    background: transparent;
    border: none;
    border-radius: 3.2px;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s;
}
.br-view-icon {
    display: inline-block;
    width: 9.6px;
    height: 9.6px;
    background-color: #888;
    -webkit-mask: url("/icons/Document-icon2.png") no-repeat center / contain;
    mask: url("/icons/Document-icon2.png") no-repeat center / contain;
    transition: background-color 0.2s;
}
.br-view-badge:hover .br-view-icon,
.pg-table tbody tr:hover .br-view-icon {
    background-color: var(--projectrac-secondary-color);
}
/* Icon column tight to the next column, with NO separator between col 1 and 2 in
   either the header or the body (React `.aa-icon-col`: narrow, border-right none;
   the neighbour drops its left border). Zero side padding lets the 17.6px badge
   center in the narrow cell without clipping, pulling the Report column in close. */
.pg-table th.br-icon-col,
.pg-table td.br-icon-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right: none !important;
}
.pg-table th.br-icon-col + th,
.pg-table td.br-icon-col + td {
    border-left: none !important;
}

/* Project Reports row icon = magnifying glass (React `View-icon2.png`), replacing
   the Budget doc icon. Defined after `.br-view-icon` so the mask-image override wins. */
.br-view-icon.br-view-search {
    -webkit-mask-image: url("/icons/View-icon2.png");
    mask-image: url("/icons/View-icon2.png");
}

/* "+ Add Document" action button (React `.aa-add-doc-btn`): themed fill + plus icon. */
.br-add-doc-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22.4px;
    padding: 0 9.6px;
    font-size: 9.6px;
    font-weight: 500;
    line-height: 1;
    border: none;
    border-radius: 3.2px;
    background-color: var(--projectrac-secondary-color);
    color: var(--projectrac-secondary-text-color, #fff);
    cursor: pointer;
}
.br-add-doc-btn:hover { filter: brightness(0.94); }
.br-add-doc-icon {
    width: 9.6px;
    height: 9.6px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* ── PDF flyout: right slide-out drawer (React PdfSlideout parity) ──────────
   80%-wide drawer over a dark overlay, brand-colored 56px header (expand +
   title + close), pdf.js viewer body. Replaces the old splitter side-pane. */
.pdf-flyout-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1700;
}
.pdf-flyout {
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    height: 100%;
    background: #fff;
    box-shadow: -3.2px 0 9.6px rgba(0, 0, 0, 0.15);
    z-index: 1701;
    transform: translateX(100%);
    transition: transform 0.3s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}
.pdf-flyout.open { transform: translateX(0); }
.pdf-flyout.expanded { width: 100%; }
.pdf-flyout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12.8px;
    height: 56px;
    box-sizing: border-box;
    background-color: var(--projectrac-primary-color, #333);
    color: #fff;
    flex-shrink: 0;
}
.pdf-flyout-title { font-size: 12px; font-weight: 600; }
.pdf-flyout-header-left { display: flex; align-items: center; gap: 12.8px; }
.pdf-flyout-expand {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 17.6px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.pdf-flyout-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 20.8px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.pdf-flyout-expand:hover,
.pdf-flyout-close:hover { color: rgba(255, 255, 255, 0.8); }
.pdf-flyout-body { flex: 1; overflow: hidden; }
.pdf-flyout-embed { width: 100%; height: 100%; display: block; }