html, body {
    height: 100%;
}

#form1 {
    height: 100%;
}

.columns > .column {
    min-height: 0;
}

    .columns > .column.is-narrow {
        min-height: 0;
    }

#NavMenu {
    width: 320px;
    min-width: 320px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--pa-border);
    padding: 1rem;
    background: #fff;
}

    #NavMenu .nav-fixed {
        flex: 0 0 auto;
    }

    #NavMenu .nav-scroll {
        flex: 1 1 auto;
        overflow-y: auto;
        padding-right: .5rem;
        min-height: 0;
    }

.columns > .column.is-narrow {
    flex: 0 0 auto;
}

#NavMenu .nav-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: .5rem;
}

#NavMenu .nav-fixed,
#NavMenu .nav-scroll {
    display: block;
}

.table.is-narrow td, .table.is-narrow th {
    font-size: 0.85rem;
}

.pa-calendar {
    padding: .75rem;
}

.pa-calendar__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.pa-calendar__title {
    font-weight: 700;
    color: var(--pa-text);
}

.pa-calendar__hint {
    font-size: .85rem;
    color: var(--pa-muted);
}

.pa-calendar__control {
    width: 100% !important;
    height: auto !important;
    font-size: .875rem;
    color: var(--pa-text);
}

    .pa-calendar__control table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        border: 1px solid var(--pa-border);
        border-radius: var(--pa-radius);
        overflow: hidden;
        background: #fff;
    }

    .pa-calendar__control .TitleStyle,
    .pa-calendar__control th[scope="colgroup"] {
        background: var(--pa-navy) !important;
        color: #fff !important;
        font-weight: 700;
        padding: .45rem .5rem;
        border-bottom: 1px solid rgba(255,255,255,.15);
    }

    .pa-calendar__control a {
        color: inherit;
        text-decoration: none;
        font-weight: 600;
    }

        .pa-calendar__control a:hover {
            text-decoration: underline;
        }

    .pa-calendar__control .DayHeaderStyle,
    .pa-calendar__control th[scope="col"] {
        background: #f3f4f6 !important;
        color: var(--pa-muted) !important;
        font-size: .75rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        padding: .35rem 0;
        border-bottom: 1px solid var(--pa-border);
    }

    .pa-calendar__control td {
        text-align: center;
        padding: .35rem 0;
        border-bottom: 1px solid var(--pa-border);
        border-right: 1px solid var(--pa-border);
    }

    .pa-calendar__control tr:last-child td {
        border-bottom: 0;
    }

    .pa-calendar__control td:last-child {
        border-right: 0;
    }

    .pa-calendar__control td a {
        display: inline-flex;
        width: 2rem;
        height: 2rem;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        color: var(--pa-text);
    }

        .pa-calendar__control td a:hover {
            background: rgba(0,0,0,.05);
        }

    .pa-calendar__control .TodayDayStyle {
        background: rgba(127,191,42,.12) !important;
    }

        .pa-calendar__control .TodayDayStyle a {
            font-weight: 700;
        }

    .pa-calendar__control .SelectedDayStyle {
        background: transparent !important;
    }

        .pa-calendar__control .SelectedDayStyle a {
            background: var(--pa-green) !important;
            color: #fff !important;
            font-weight: 700;
        }

    .pa-calendar__control .WeekendDayStyle {
        background: #fbfbfd !important;
    }

    .pa-calendar__control .OtherMonthDayStyle {
        color: #9ca3af !important;
    }

        .pa-calendar__control .OtherMonthDayStyle a {
            color: #9ca3af !important;
        }

.app-disclaimer {
    background: var(--pa-soft-bg, #f7f8fa);
    border-left: 3px solid var(--pa-accent-muted, #cfd8e3);
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
    color: var(--pa-text-primary, #2f3a45);
}

    .app-disclaimer p {
        margin-bottom: 0.75rem;
        line-height: 1.55;
    }

        .app-disclaimer p:last-child {
            margin-bottom: 0;
        }

.emphasis {
    font-weight: 600;
}

.emphasis-strong {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.emphasis-underline {
    text-decoration: underline;
    text-decoration-style: double;
    text-underline-offset: 3px;
}

.pa-page {
    align-items: stretch;
}

.pa-main {
    padding: 0 1rem 1rem 1rem;
}

.pa-banner {
    margin: 0.75rem 0 1rem 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
    background: var(--pa-soft-bg, #f7f8fa);
}

.pa-work {
    margin-bottom: 1rem;
}

.pa-controls > * {
    margin-bottom: 0.75rem;
}

.pa-effective-label {
    display: inline-block;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
    background: var(--pa-soft-bg, #f7f8fa);
}

.pa-aside {
    padding: 0 1rem 1rem 0;
}

.pa-unit-aside {
    width: 520px;
    max-height: calc(100vh - 140px);
    overflow: auto;
    position: sticky;
    top: 1rem;
}

    .pa-unit-aside .table-container {
        overflow: auto;
    }

.pa-tracs-shell {
    width: 100%;
}

.pa-page {
    align-items: flex-start;
}

.pa-main {
    padding-right: 1rem;
}

.pa-table {
    padding-left: 1rem;
}

.pa-table-box {
    width: 520px;
    max-height: calc(100vh - 180px);
    overflow: auto;
}

    .pa-table-box thead th {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 1;
    }

.pa-table {
    flex: 0 0 600px;
    max-width: 600px;
}

.pa-main {
    flex: 1 1 auto;
    min-width: 0;
}

.pa-table-box,
.pa-table-box .table-container {
    overflow-x: hidden;
}

.pa-unit-table {
    table-layout: fixed;
    width: 100%;
}

    .pa-unit-table th,
    .pa-unit-table td {
        padding: 0.25rem 0.45rem;
        vertical-align: top;
        overflow: hidden;
    }

    .pa-unit-table .col-contract {
        width: 90px;
    }

    .pa-unit-table .col-type {
        width: 150px;
    }

    .pa-unit-table .col-allowed {
        width: 80px;
    }

    .pa-unit-table .col-current {
        width: 170px;
    }

    .pa-unit-table .col-avail {
        width: 60px;
    }

.pa-prelist {
    font-family: var(--pa-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-size: 0.82rem;
    line-height: 1.25;
    white-space: pre;
    overflow: hidden;
}

.pa-unit-table tr.is-expanded td {
    background: var(--pa-soft-bg, #f7f8fa);
}

.pa-tracs-topbar {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem;
    background: var(--pa-surface, #fff);
    border-bottom: 1px solid var(--pa-border, #e5e7eb);
    position: sticky;
    top: 0;
    z-index: 20;
}

.pa-tracs-banner {
    flex: 1 1 auto;
    min-width: 0;
}

.pa-tracs-chrome {
    flex: 0 0 520px;
    max-width: 520px;
    position: relative;
}

.pa-project-ddl,
.pa-project-ddl .dropdown-trigger,
.pa-project-ddl .dropdown-trigger .button {
    width: 100%;
}

.pa-chrome-actions {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
}

    .pa-chrome-actions .button {
        flex: 1 1 0;
    }

.pa-chrome-work {
    position: absolute;
    top: calc(100% + .75rem);
    right: 0;
    width: 100%;
    z-index: 50;
}

.pa-chrome-work-inner {
    position: relative;
    padding: 1rem;
}

.pa-chrome-work-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
}

.pa-work-pane {
    min-height: 0;
    padding: 0.75rem;
}

    .pa-work-pane .dropdown,
    .pa-work-pane .dropdown-trigger,
    .pa-work-pane .dropdown-trigger .button,
    .pa-work-pane .dropdown-menu,
    .pa-work-pane .dropdown-content {
        width: 100%;
    }

.pa-chrome-work-inner {
    font-size: 0.9rem;
}

    .pa-chrome-work-inner .button,
    .pa-work-pane .button {
        font-size: 0.85rem;
        padding: 0.45rem 0.85rem;
    }

.pa-work-pane .dropdown-item {
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
}

.pa-chrome-work-inner .columns:last-child {
    margin-bottom: 0;
}

.pa-chrome-work-inner .column {
    padding: 0.25rem;
}

.pa-tracs-body {
    padding: 1rem;
}

#WorkUnitTaskButtonsWrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
    align-items: start;
}

    #WorkUnitTaskButtonsWrapper ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    #WorkUnitTaskButtonsWrapper .button {
        width: 100%;
        justify-content: center;
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
        height: auto;
    }

.pa-reprint {
    padding: 0.75rem 1rem 1rem;
}

    .pa-reprint .table {
        font-size: 0.9rem;
    }

        .pa-reprint .table th,
        .pa-reprint .table td {
            padding: 0.35rem 0.55rem;
            vertical-align: middle;
            white-space: nowrap;
        }

        .pa-reprint .table thead th {
            background: #fafafa;
            border-bottom: 1px solid #dbdbdb;
        }

        .pa-reprint .table td {
            border-color: #ededed;
        }

    .pa-reprint .button.is-small {
        padding: 0.25rem 0.5rem;
        font-size: 0.85rem;
    }

.pa-work-modal .modal-card {
    width: min(960px, calc(100vw - 4rem));
}

.pa-work-modal .modal-card-body {
    padding: 0;
}

.pa-work-iframe {
    width: 100%;
    height: min(70vh, 720px);
    min-height: 420px;
    border: 0;
    display: block;
}

.pa-work-modal .modal-card {
    width: min(980px, calc(100vw - 4rem));
    max-height: calc(100vh - 4rem);
}

.pa-work-modal .modal-card-body {
    padding: 0;
    overflow: hidden;
}

.pa-work-modal .pa-work-iframe {
    display: block;
    width: 100%;
    height: min(70vh, 720px);
    min-height: 420px;
    border: 0;
}

.pa-work-modal .modal-card {
    width: min(1100px, calc(100vw - 3rem));
    max-height: 85vh;
    min-height: 75vh;
}

.pa-work-modal .pa-work-iframe {
    height: min(80vh, 820px);
    min-height: 520px;
}

.pa-reprint .table-container {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 14rem);
}

.pa-reprint .pa-reprint-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    font-size: 0.9rem;
}

    .pa-reprint .pa-reprint-table th {
        white-space: normal;
    }

    .pa-reprint .pa-reprint-table td {
        white-space: nowrap;
    }

        .pa-reprint .pa-reprint-table td:nth-child(2),
        .pa-reprint .pa-reprint-table td:nth-child(3) {
            white-space: normal;
        }

.pa-work-modal .modal-card-body {
    overflow-y: auto;
}

#paChromeWork .columns {
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start;
}

.pa-reprint {
    max-width: 1100px;
    margin: 0 auto;
}

.pa-work-frame,
#paWorkFrame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 560px;
    border: 0;
}

.pa-work-modal .modal-card-body,
.pa-work-modal-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
}

.pa-work-modal .modal-card {
    height: min(80vh, 760px);
}

.pa-work-modal .modal-card-body {
    overflow: hidden;
}

.pa-sample-grid .box {
    padding: 1rem;
}

.pa-grid-table-container {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    overflow: auto;
    max-height: calc(100vh - 16rem);
}

.pa-grid-table {
    font-size: 0.85rem;
}

    .pa-grid-table th,
    .pa-grid-table td {
        padding: 0.35rem 0.5rem;
        vertical-align: middle;
        border-color: rgba(0,0,0,0.06);
    }

    .pa-grid-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: rgba(250,250,250,0.98);
        border-bottom: 1px solid rgba(0,0,0,0.10);
    }

    .pa-grid-table .pa-actions,
    .pa-grid-table .pa-actions-header {
        width: 9.5rem;
    }

    .pa-grid-table th.has-text-right,
    .pa-grid-table td.has-text-right {
        width: 6.5rem;
    }

    .pa-grid-table th.has-text-centered,
    .pa-grid-table td.has-text-centered {
        width: 5.75rem;
    }

    .pa-grid-table .pa-actions {
        white-space: nowrap;
    }

        .pa-grid-table .pa-actions .button.is-small {
            padding-left: 0.6rem;
            padding-right: 0.6rem;
            height: 1.85rem;
            line-height: 1;
        }

    .pa-grid-table td:nth-child(3),
    .pa-grid-table td:nth-child(4),
    .pa-grid-table th:nth-child(3),
    .pa-grid-table th:nth-child(4) {
        white-space: normal;
        min-width: 7rem;
    }

#UnitHistoryWrapper,
#SubTablesWrapper {
    width: min(1100px, calc(100% - 3rem));
    margin-left: auto;
    margin-right: auto;
}

#UnitHistoryWrapper {
    height: 350px;
    max-height: 350px;
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
}

#DelinquentCertsWrapper,
#TenantsDueWrapper,
#NewMoveInsWrapper {
    height: 210px;
    max-height: 210px;
    overflow-y: auto;
}

#UnitHistoryWrapper .pa-grid-table {
    margin-left: auto;
    margin-right: auto;
}

#UnitHistoryWrapper .pa-grid-table-container {
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

#SubTablesWrapper {
    position: relative;
    border-top: 1px solid var(--pa-border, rgba(0,0,0,0.10));
    padding-top: 1.25rem;
    margin-bottom: 1.25rem;
    height: 275px;
    max-height: 275px;
}

#SubTablesWrapper {
    display: grid;
    grid-template-columns: 33% 28% 33%;
    column-gap: 3%;
    align-items: start;
}

#DelinquentCertsWrapper {
    grid-column: 1;
}

#TenantsDueWrapper {
    grid-column: 2;
}

#NewMoveInsWrapper {
    grid-column: 3;
}

#DelinquentCertsWrapper,
#TenantsDueWrapper,
#NewMoveInsWrapper {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    background: #fff;
    padding: 0.75rem;
    min-height: 160px;
}

#SubTablesWrapper::before,
#SubTablesWrapper::after {
    content: "";
    position: absolute;
    top: 1.25rem;
    bottom: 0;
    width: 1px;
    background: var(--pa-border, rgba(0,0,0,0.10));
    pointer-events: none;
}

#SubTablesWrapper::before {
    left: calc(33% + 1.5%);
}

#SubTablesWrapper::after {
    left: calc(33% + 3% + 28% + 1.5%);
}

#UnitHistoryWrapper,
#UnitHistoryWrapper .pa-grid-table-container {
    box-sizing: border-box;
}

#UnitHistoryWrapper {
    overflow: hidden;
    overflow-y: auto;
}

#SubTablesWrapper {
    height: 240px;
    max-height: 240px;
}

#PendingSignaturesWrapper {
    width: min(1100px, calc(100% - 3rem));
    margin-left: auto;
    margin-right: auto;
    height: 680px;
    max-height: 680px;
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}

    #PendingSignaturesWrapper .pa-grid-table {
        margin-left: auto;
        margin-right: auto;
    }

    #PendingSignaturesWrapper .pa-grid-table-container {
        height: 100%;
        max-height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
    }

:root {
    --pa-chrome-panel-bg: #f9fdf4;
    --pa-chrome-panel-border: #eaf5db;
    --pa-chrome-button-bg: #f2f9e8;
    --pa-chrome-button-border: #c4db9c;
    --pa-default-white-color: #f9fdf4;
    --pa-default-white-border: #f2f9e8;
    --pa-hover-green-light: #F2F8E9;
    --pa-hover-green-medium: #eef3e7;
    --pa-hover-green-dark: #EEF3E7;
}

.pa-chrome-work-inner {
    background: var(--pa-chrome-panel-bg);
    border: 1px solid var(--pa-chrome-panel-border);
    border-radius: 12px;
}

.pa-chrome-actions .button.pa-chrome-action-active {
    background: var(--pa-chrome-button-bg);
    border-color: var(--pa-chrome-button-border);
}

    .pa-chrome-actions .button.pa-chrome-action-active:focus,
    .pa-chrome-actions .button.pa-chrome-action-active:focus-visible {
        box-shadow: 0 0 0 0.125em var(--pa-chrome-button-border);
    }

.menu-list a.is-disabled {
    pointer-events: none;
    opacity: 0.45;
    cursor: not-allowed;
    text-decoration: none;
}

.pa-chrome-actions .button.pa-chrome-action-active {
    color: #2f3a45;
}

.pa-chrome-work-inner {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.pa-chrome-work-inner {
    border-width: 0.75px;
}

.pa-chrome-work-inner {
    background: var(--pa-chrome-panel-bg);
    border: 0.75px solid var(--pa-chrome-panel-border);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.pa-chrome-actions .button.pa-chrome-action-active {
    background: var(--pa-chrome-button-bg);
    border-color: var(--pa-chrome-button-border);
    color: #2f3a45;
}

    .pa-chrome-actions .button.pa-chrome-action-active:focus,
    .pa-chrome-actions .button.pa-chrome-action-active:focus-visible {
        box-shadow: 0 0 0 0.125em rgba(196, 219, 156, 0.35);
    }

/* ------------------------------
   59z1 work area layout
   (scoped: only affects the 59z1.aspx work block)
------------------------------- */

.pa-59z1 .pa-main {
    padding-right: 1rem;
}

.pa-59z1 .pa-work {
    padding: 1.25rem;
}

/* Convert Bulma columns to an explicit grid for predictable spacing */
.pa-59z1 .pa-59z1-workgrid {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) 2px 360px;
    gap: 1.25rem;
    align-items: start;
}

    /* Neutralize Bulma .columns negative margins when we repurpose it as a grid */
    .pa-59z1 .pa-59z1-workgrid.columns {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
    }


.pa-59z1 .pa-59z1-left {
    display: grid;
    grid-auto-rows: min-content;
    gap: 1.25rem;
}

.pa-59z1 .pa-59z1-right {
    min-width: 360px;
}

/* Grey vertical accent rule */
.pa-59z1 .pa-vrule {
    width: 2px;
    background: rgba(47, 58, 69, 0.28);
    border-radius: 999px;
    justify-self: stretch;
    margin: .75rem 0;
}

/* Top controls: centered label, no chevron */
.pa-59z1 .pa-ddl .button {
    justify-content: center;
    font-weight: 600;
    min-height: 54px;
    font-size: 1.05rem;
}

    .pa-59z1 .pa-ddl .button .icon {
        display: none;
    }

/* Unit + family row */
.pa-59z1 .pa-59z1-familyrow {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
    align-items: center;
}

.pa-59z1 .pa-59z1-familycheck {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .95rem;
}

/* Effective "entity" row */
.pa-59z1 .pa-entity {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: .75rem;
    align-items: center;
}

.pa-59z1 .pa-entity__part {
    height: 40px;
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
    background: #fff;
    display: flex;
    align-items: center;
}

.pa-59z1 .pa-effective {
    padding: 0 .75rem;
    justify-content: space-between;
}

.pa-59z1 .pa-effective__label {
    color: var(--pa-muted);
    font-weight: 700;
    letter-spacing: .01em;
}

.pa-59z1 .pa-effective__value {
    color: var(--pa-text);
    font-weight: 600;
}

.pa-59z1 .pa-note {
    padding: 0;
}

    .pa-59z1 .pa-note .input {
        height: 38px;
        border: 0;
        box-shadow: none;
    }

/* “include prior certs” only shows when AR is selected */
.pa-59z1 .pa-59z1-priorcerts {
    display: none;
    margin-top: .5rem;
}

    .pa-59z1 .pa-59z1-priorcerts.is-visible {
        display: flex;
    }

/* Calendar card rhythm */
.pa-59z1 .pa-calendar {
    padding: 1rem;
}

.pa-59z1 .pa-calendar__title {
    font-size: 1.05rem;
}

/* =========================================================
   59z1 — CONSOLIDATED WORK AREA STYLES (single source of truth)
   Scope: only affects .pa-59z1 page
   Requirements:
   - pa-work provides outer frame
   - calendar has NO border/gridlines; fits <= 360px tall; fills available width
   - Select Action / Select Unit are larger and full width to vrule minus Q
   - Define Q (outer spacing) and R (internal spacing)
   - Different Family checkbox + HHOH: R spacing; HHOH right-aligned
   - Effective row: balanced spacing; no extra wrapper borders added by these rules
   ========================================================= */

.pa-59z1 {
    --pa-q: 1.25rem; /* outer spacing */
    --pa-r: .75rem; /* inner spacing */
}

    /* Ensure this page doesn't inherit any column min-height stretching */
    .pa-59z1 .pa-page.columns {
        min-height: 0 !important;
        height: auto !important;
        align-items: flex-start !important;
    }

    /* Outer frame */
    .pa-59z1 .pa-work {
        background: #fff !important;
        border: 1px solid var(--pa-border, #e5e7eb) !important;
        border-radius: var(--pa-radius, 10px) !important;
        padding: var(--pa-q) !important;
        height: auto !important;
        min-height: 0 !important;
        align-self: flex-start !important;
    }

        /* Work grid: left | vrule | right */
        .pa-59z1 .pa-work .pa-59z1-workgrid {
            display: grid !important;
            grid-template-columns: minmax(420px, 1fr) 3px 460px !important;
            gap: var(--pa-q) !important;
            align-items: start !important;
            margin: 0 !important;
        }

            /* Neutralize Bulma padding inside the work grid */
            .pa-59z1 .pa-work .pa-59z1-workgrid > .column {
                padding: 0 !important;
            }

    /* Left stack spacing */
    .pa-59z1 .pa-59z1-left {
        display: grid !important;
        grid-auto-rows: min-content !important;
        row-gap: var(--pa-q) !important;
        min-width: 0 !important;
    }

    /* Vertical separator */
    .pa-59z1 .pa-vrule {
        width: 3px !important;
        background: rgba(47,58,69,.28) !important;
        border-radius: 999px !important;
        margin: var(--pa-q) 0 !important;
        min-height: 320px !important;
    }

    /* --- Select Action / Select Unit should be larger and full width --- */
    .pa-59z1 .pa-59z1-left .pa-ddl,
    .pa-59z1 .pa-59z1-left .dropdown,
    .pa-59z1 .pa-59z1-left .dropdown-trigger,
    .pa-59z1 .pa-59z1-left .dropdown-trigger .button {
        width: 100% !important;
    }

        .pa-59z1 .pa-59z1-left .pa-ddl .button,
        .pa-59z1 .pa-59z1-left .button.is-light {
            min-height: 54px !important;
            font-size: 1.05rem !important;
            font-weight: 600 !important;
        }

    /* --- Family row: checkbox left, HHOH right, R spacing --- */
    .pa-59z1 .pa-59z1-familyrow {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        column-gap: var(--pa-r) !important;
        align-items: center !important;
    }

        .pa-59z1 .pa-59z1-familyrow > :last-child {
            justify-self: end !important;
        }

    .pa-59z1 .pa-59z1-familycheck {
        margin-top: var(--pa-r) !important;
    }

    /* --- Effective row balance (no wrapper border additions) --- */
    .pa-59z1 .pa-entity {
        grid-template-columns: 220px 140px 1fr !important;
        gap: var(--pa-r) !important;
        align-items: center !important;
    }

    .pa-59z1 .pa-note .input {
        width: 100% !important;
    }

    /* --- Calendar column: no border/gridlines; fit <=360px; fill space --- */
    .pa-59z1 .pa-59z1-right {
        min-width: 460px !important;
    }

        /* Calendar card should NOT add a border; pa-work provides the frame */
        .pa-59z1 .pa-59z1-right .pa-card-lite.pa-calendar {
            border: 0 !important;
            box-shadow: none !important;
            background: transparent !important;
            padding: var(--pa-q) !important;
            height: 360px !important;
            max-height: 360px !important;
            overflow: visible !important;
            box-sizing: border-box !important;
        }

        /* Constrain inner body to keep within 360px */
        .pa-59z1 .pa-59z1-right .pa-calendar__body {
            height: calc(300px - (2 * var(--pa-q))) !important;
            max-height: calc(300px - (2 * var(--pa-q))) !important;
            overflow: hidden !important;
            width:320px;
        }

        /* Ensure calendar fills width/height; remove borders coming from base rules */
        .pa-59z1 .pa-59z1-right .pa-calendar__control,
        .pa-59z1 .pa-59z1-right .pa-calendar__control table {
            width: 100% !important;
            height: 100% !important;
            table-layout: fixed !important;
            border-collapse: collapse !important;
            border: 0 !important;
        }

            /* Remove ALL table/cell borders and gridlines */
            .pa-59z1 .pa-59z1-right .pa-calendar__control th,
            .pa-59z1 .pa-59z1-right .pa-calendar__control td,
            .pa-59z1 .pa-59z1-right .pa-calendar__control a,
            .pa-59z1 .pa-59z1-right .pa-calendar__control span {
                border: 0 !important;
                box-shadow: none !important;
                outline: none !important;
            }

            /* Slightly tighter to fit the 360px box */
            .pa-59z1 .pa-59z1-right .pa-calendar__control th {
                padding: 4px 0 !important;
                font-size: 12px !important;
            }

            .pa-59z1 .pa-59z1-right .pa-calendar__control td {
                padding: 0 !important;
            }

                .pa-59z1 .pa-59z1-right .pa-calendar__control td a,
                .pa-59z1 .pa-59z1-right .pa-calendar__control td span {
                    display: block !important;
                    padding: 4px 0 !important;
                    line-height: 1.05 !important;
                    font-size: 13px !important;
                }


/* =========================================================
   Custom dropdown (select -> button+menu)
========================================================= */

.pa-ddl {
    position: relative;
    width: 100%;
}

    .pa-ddl .js-ddl-select {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

.pa-ddl-menu {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,.10);
    padding: .35rem;
    max-height: 320px;
    overflow: auto;
    z-index: 8600;   /* must beat #paTopFloat (fixed, 8500) — see VIEW-AS BAR note below */
    display: none;
}

.pa-ddl.is-open .pa-ddl-menu {
    display: block;
}

.pa-ddl-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .6rem .75rem;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}

    .pa-ddl-item:hover {
        background: #f5f7fa;
    }

    .pa-ddl-item.is-active {
        background: #eef3ff;
        font-weight: 600;
    }


/* =========================================================
   Custom Project Select (matches pa large controls)
========================================================= */

.pa-project-ddl {
    position: relative;
    width: 100%;
}

    .pa-project-ddl .js-ddl-select {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

    /* Trigger button */
    .pa-project-ddl .js-ddl-btn {
        width: 100%;
        min-height: 54px;
        font-size: 1.05rem;
        font-weight: 600;
        border-radius: 10px;
        border: 1px solid var(--pa-default-white-border);
        background: var(--pa-default-white-color);
        box-shadow: 0 1px 2px rgba(0,0,0,.06);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1rem;
    }

        .pa-project-ddl .js-ddl-btn:focus {
            outline: none;
            border-color: rgba(47,58,69,.35);
            box-shadow: 0 0 0 3px rgba(47,58,69,.12);
        }

    /* Dropdown panel */
    .pa-project-ddl .pa-ddl-menu {
        position: absolute;
        top: calc(100% + .4rem);
        left: 0;
        right: 0;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 12px 30px rgba(0,0,0,.12);
        padding: .4rem;
        max-height: 340px;
        overflow: auto;
        z-index: 8600;   /* must beat #paTopFloat (fixed, 8500) */
        display: none;
    }

    .pa-project-ddl.is-open .pa-ddl-menu {
        display: block;
    }

    /* ISS-022: the trigger chevron flips up when the picker is open, so the
       open/close state is communicated (clicking again does close it, but
       nothing signalled that before). */
    .pa-project-ddl .js-ddl-btn .icon {
        transition: transform .15s ease;
    }
    .pa-project-ddl.is-open .js-ddl-btn .icon {
        transform: rotate(180deg);
    }

    /* Items */
    .pa-project-ddl .pa-ddl-item {
        display: block;
        width: 100%;
        padding: .65rem .85rem;
        border-radius: 8px;
        text-decoration: none;
        color: inherit;
        font-size: .98rem;
    }

        .pa-project-ddl .pa-ddl-item:hover {
            background: #f4f6f9;
        }

        .pa-project-ddl .pa-ddl-item.is-active {
            background: #eef3ff;
            font-weight: 600;
        }


        /* =========================================================
   Project Select – Green Theme Overrides
   Matches TRACS chrome + active button styling
========================================================= */

        /* Hover = pale chrome green */
        .pa-project-ddl .pa-ddl-item:hover {
            background: #eef3e7; /* pale green from chrome */
            border: 1px solid transparent;
        }

        /* Selected = active button green */
        .pa-project-ddl .pa-ddl-item.is-active {
            background: #dfead1; /* active button green */
            border: 1px solid #b7caa0; /* slightly darker green border */
            font-weight: 600;
        }

            /* Optional: keep hover slightly stronger when hovering active */
            .pa-project-ddl .pa-ddl-item.is-active:hover {
                background: #d6e5c4;
                border-color: #a8bf8b;
            }



/* ==============================
   Dropdown Search
============================== */

.pa-ddl-search-wrap {
    padding: .35rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: .35rem;
}

.pa-ddl-search {
    width: 100%;
    padding: .55rem .75rem;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    font-size: .9rem;
}

    .pa-ddl-search:focus {
        outline: none;
        border-color: #b7caa0;
        box-shadow: 0 0 0 3px rgba(183,202,160,.2);
    }


/* ==========================================
   js-ddl: hide native ASP DropDownList
   Keep in DOM for postback + ViewState
========================================== */

.pa-ddl-native {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* =========================
   Dashboard – stable layout
   ========================= */

.pa-dashboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 260px; /* restores visible height */
    gap: 2rem;
    margin-top: 1rem; /* tighter top spacing */
}

    /* Tiles */
    .pa-dashboard .pa-dash-tile {
        padding: 0;
        overflow: hidden;
        display: flex;
    }

    .pa-dashboard .pa-dash-tile__inner {
        flex: 1;
        padding: 1.25rem;
        box-sizing: border-box;
    }


    /* Nav cube (demo polymorphic cube) */
    .pa-dashboard .pa-dash-tile__inner .pa-cube-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        text-decoration: none;
        font-weight: 600;
        border-radius: 0;
    }

        .pa-dashboard .pa-dash-tile__inner .pa-cube-nav:hover {
            text-decoration: none;
        }

    /* While editing, keep nav cubes non-interactive (JS also prevents) */
    .pa-dashboard.is-editing .pa-dash-tile__inner .pa-cube-nav {
        pointer-events: none;
    }

/* Responsive */
@media (max-width: 1024px) {
    .pa-dashboard {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .pa-dashboard {
        grid-template-columns: 1fr;
    }
}

/* Tighten dashboard left/right only */
.pa-dashboard-page.section {
    padding-left: 0.5rem;
    padding-right: 0.75rem;
}

/* Remove container side padding for this page only */
.pa-dashboard-page .container.is-fluid {
    padding-left: 0;
    padding-right: 0;
}



/* Dashboard: 2-row viewport + scroll */
.pa-dashboard-workarea {
    --pa-dash-gap: 2rem;
    --pa-dash-tile-h: clamp(210px, 22vh, 280px);
    /* show exactly 2 rows worth of tiles */
    height: calc( (2 * var(--pa-dash-tile-h)) + (1 * var(--pa-dash-gap)) + (2 * 1.25rem) /* box padding top+bottom-ish */
    );
    overflow-y: auto;
    overflow-x: hidden;
}

/* Grid */
.pa-dashboard {
    display: grid;
    gap: var(--pa-dash-gap);
    grid-auto-rows: var(--pa-dash-tile-h);
}

    /* Single vs Multi column counts (drive by class on #paDashboard) */
    .pa-dashboard.is-single {
        grid-template-columns: repeat(3, 1fr);
    }

    .pa-dashboard.four-cubes {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Tiles */
    .pa-dashboard .pa-dash-tile {
        padding: 0;
        display: flex;
        overflow: hidden;
    }

    .pa-dashboard .pa-dash-tile__inner {
        flex: 1;
        padding: 1.25rem;
        box-sizing: border-box;
    }


.pa-dash-ghost {
    opacity: 0.35;
}

.pa-dash-chosen {
    cursor: grabbing;
}

.pa-dash-tile {
    cursor: grab;
}

/* Only in edit mode */
#paDashboard.is-reorder-enabled .pa-dash-tile {
    cursor: grab;
}

    #paDashboard.is-reorder-enabled .pa-dash-tile:active {
        cursor: grabbing;
    }

.pa-dash-ghost {
    opacity: .45;
}

/* ============================================================
   Dashboard remove button placement + edit-only visibility
============================================================ */

/* allow absolute-positioned X inside tiles */
.pa-dash-tile {
    position: relative;
}

/* X in top-right */
.pa-dash-remove.delete {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    left: auto;
    z-index: 2;
}

/* only show X when editing */
.pa-dashboard:not(.is-editing) .pa-dash-remove {
    display: none;
}

/* optional: show grab cursor only in edit mode */
.pa-dashboard.is-editing .pa-dash-tile {
    cursor: grab;
}

    .pa-dashboard.is-editing .pa-dash-tile:active {
        cursor: grabbing;
    }




/* =========================
   Dashboard – stable layout
   ========================= */

/* Dashboard: 2-row viewport + scroll */
.pa-dashboard-workarea {
    --pa-dash-gap: 2rem;
    --pa-dash-tile-h: clamp(210px, 22vh, 280px);
    height: calc((2 * var(--pa-dash-tile-h)) + (1 * var(--pa-dash-gap)) + (2 * 1.25rem));
    overflow-y: auto;
    overflow-x: hidden;
}

/* Grid */
.pa-dashboard {
    display: grid;
    gap: var(--pa-dash-gap);
    grid-auto-rows: var(--pa-dash-tile-h);
}

    /* 4-wide layout */
    .pa-dashboard.four-cubes {
        grid-template-columns: repeat(4, 1fr);
    }

/* Responsive */
@media (max-width: 1024px) {
    .pa-dashboard.four-cubes {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .pa-dashboard.four-cubes {
        grid-template-columns: 1fr;
    }
}

/* Tiles */
.pa-dashboard .pa-dash-tile {
    padding: 0;
    margin: 0;
    display: flex;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;  /* keeps border-top from adding to height */
    align-self: stretch;
}

.pa-dashboard .pa-dash-tile__inner {
    flex: 1;
    padding: 1.25rem;
    box-sizing: border-box;
}

/* Sortable helpers */
.pa-dash-ghost {
    opacity: .45;
}

.pa-dash-chosen {
    cursor: grabbing;
}

/* Only in edit mode */
.pa-dashboard.is-editing .pa-dash-tile {
    cursor: grab;
}

    .pa-dashboard.is-editing .pa-dash-tile:active {
        cursor: grabbing;
    }

/* X button placement + edit-only visibility */
.pa-dash-remove.delete {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    left: auto;
    z-index: 2;
}

.pa-dashboard:not(.is-editing) .pa-dash-remove {
    display: none;
}

/* Toolbox */
.pa-dashboard-toolbox {
    grid-column: 1 / -1;
    padding: 1rem;
    border: 1px dashed var(--pa-border, rgba(0,0,0,0.18));
    border-radius: 12px;
    background: rgba(0,0,0,0.02);
}

    .pa-dashboard-toolbox.is-hidden {
        display: none;
    }

.pa-toolbox-item {
    display: inline-flex;
    align-items: center;
    margin: .25rem .35rem 0 0;
    padding: .35rem .6rem;
    border: 1px solid var(--pa-border, rgba(0,0,0,0.18));
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    font-size: .9rem;
}

    .pa-toolbox-item:hover {
        background: rgba(0,0,0,0.03);
    }

    .pa-toolbox-item.is-disabled {
        opacity: .45;
        cursor: not-allowed;
        pointer-events: none;
    }
















/* ==== BLUE BASE LAYER (append-only; does not touch green accents) ==== */

:root {
    --pa-bg-ul: rgba(18, 56, 150, 0.88);
    --pa-bg-mid: rgba(86, 140, 230, 0.58);
    --pa-bg-lr: rgba(220, 236, 255, 0.96);
    --pa-shell-bg: rgba(255,255,255,0.10);
    --pa-shell-border: rgba(255,255,255,0.14);
    --pa-shell-shadow: 0 18px 50px rgba(0,0,0,0.25);
    --pa-card-bg: rgba(232, 242, 255, 0.72);
    --pa-card-border: rgba(255,255,255,0.40);
    --pa-card-shadow: 0 14px 28px rgba(0,0,0,0.18);
}

body {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--pa-bg-ul) 0%, var(--pa-bg-mid) 42%, var(--pa-bg-lr) 100% );
}

    /* If your master uses Bulma columns at the top level, this will hit.
   If not, it harmlessly does nothing. */
    body > .columns {
        margin: 18px;
        border-radius: 14px;
        overflow: hidden;
        background: var(--pa-shell-bg);
        box-shadow: var(--pa-shell-shadow);
        border: 1px solid var(--pa-shell-border);
    }

        body > .columns > .column,
        body > .columns > main.column {
            min-height: calc(100vh - 36px);
        }

/* nav surface only */
#NavMenu {
    background: rgba(6, 24, 90, 0.35);
    border-right: 1px solid rgba(255,255,255,0.14);
}




/* =========================================================
   BLUE THEME — match Image 1 (less “purple”, stronger nav)
   Append at bottom of _dev.css
   ========================================================= */

:root {
    /* Gradient: stronger blues, less transparency (prevents purple blending) */
    --pa-bg-ul: #1f4fd6; /* dark upper-left */
    --pa-bg-mid: #4f86ef; /* mid */
    --pa-bg-lr: #dbeaff; /* light lower-right */
    /* Shell */
    --pa-shell-bg: rgba(255,255,255,0.10);
    --pa-shell-border: rgba(255,255,255,0.14);
    --pa-shell-shadow: 0 18px 50px rgba(0,0,0,0.25);
    /* Cards: keep exactly in the “Image 1” feel (slightly tinted, not white) */
    --pa-card-bg: rgba(232, 242, 255, 0.74);
    --pa-card-border: rgba(255,255,255,0.45);
    --pa-card-shadow: 0 14px 28px rgba(0,0,0,0.18);
    /* Nav readability */
    --pa-nav-bg: #173fb6;
    --pa-nav-bg-2: #12318f;
    --pa-nav-label: rgba(255,255,255,0.78);
    --pa-nav-link: rgba(255,255,255,0.92);
    --pa-nav-hover: rgba(255,255,255,0.12);
}

/* Background gradient: opaque colors (prevents purple shift from blending) */
body {
    background: linear-gradient(135deg, var(--pa-bg-ul) 0%, var(--pa-bg-mid) 45%, var(--pa-bg-lr) 100% );
}

    /* Outer shell */
    body > .columns {
        margin: 18px;
        border-radius: 14px;
        overflow: hidden;
        background: var(--pa-shell-bg);
        box-shadow: var(--pa-shell-shadow);
        border: 1px solid var(--pa-shell-border);
    }

/* NAV: force blue + readable headers */
#NavMenu {
    background: linear-gradient(180deg, var(--pa-nav-bg) 0%, var(--pa-nav-bg-2) 100%) !important;
    border-right: 1px solid rgba(255,255,255,0.14);
}

    /* Section headers (“FORMS”, “TRANSACTIONS”, etc.) */
    #NavMenu .menu-label {
        color: var(--pa-nav-label) !important;
        letter-spacing: 0.05em;
    }

    /* Links */
    #NavMenu .menu-list a {
        color: var(--pa-nav-link) !important;
    }

        /* Hover only (does not touch your green “active” states elsewhere) */
        #NavMenu .menu-list a:hover {
            background: var(--pa-nav-hover) !important;
        }

/* Cards (keep scoped to BV pages so we don’t surprise others yet) */
.pa-59z1 .pa-work,
.pa-59z1 .pa-calendar,
.pa-59z1 .app-disclaimer,
.pa-59z1 .pa-table-box {
    background: var(--pa-card-bg) !important;
    border: 1px solid var(--pa-card-border);
    border-radius: 12px;
    box-shadow: var(--pa-card-shadow);
}


/* =========================================================
   NAV LINK READABILITY FIX
   (handles the “white pill” link backgrounds)
   ========================================================= */

/* If the nav link has a light background, make text dark */
#NavMenu .menu-list a {
    color: rgba(255,255,255,0.92) !important; /* default on blue */
}

    /* Many of your nav links are rendering as white “pills”.
   Force dark text for links that have a light background. */
    #NavMenu .menu-list a[style*="background"],
    #NavMenu .menu-list a.is-light,
    #NavMenu .menu-list a.has-background-white,
    #NavMenu .menu-list a.has-background-light,
    #NavMenu .menu-list li a {
        /* Don’t override the blue-style ones unless background is light */
    }

/* Hard override for the pill look you’re seeing */
#NavMenu .menu-list a {
    background: transparent !important;
    border-radius: 8px;
}

    /* Active / selected item */
    #NavMenu .menu-list a.is-active,
    #NavMenu .menu-list li.is-active > a {
        background: rgba(255,255,255,0.16) !important;
        color: rgba(255,255,255,0.96) !important;
    }

    /* Hover */
    #NavMenu .menu-list a:hover {
        background: rgba(255,255,255,0.12) !important;
        color: rgba(255,255,255,0.96) !important;
    }

/* If you still have “button-like” padding from old rules, normalize it */
#NavMenu .menu-list a {
    padding: 8px 10px !important;
    line-height: 1.2;
}


/* =========================================================
   OUTER SHELL — works for sandbox-only AND nested Tracs master
   ========================================================= */

/* Prefer the top-level wrapper if it exists */
body > .columns {
    margin: 18px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--pa-shell-bg);
    box-shadow: var(--pa-shell-shadow);
    border: 1px solid var(--pa-shell-border);
}

/* Fallback: any columns container that directly holds #NavMenu */
.columns:has(> #NavMenu) {
    margin: 18px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--pa-shell-bg);
    box-shadow: var(--pa-shell-shadow);
    border: 1px solid var(--pa-shell-border);
}

    /* Height alignment inside shell */
    .columns:has(> #NavMenu) > .column,
    .columns:has(> #NavMenu) > main.column {
        min-height: calc(100vh - 36px);
    }


/* =========================================================
   OUTER SHELL — deterministic (no :has(), works nested)
   ========================================================= */

.pa-shell {
    margin: 18px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--pa-shell-bg);
    box-shadow: var(--pa-shell-shadow);
    border: 1px solid var(--pa-shell-border);
}

    .pa-shell > .column,
    .pa-shell > main.column {
        min-height: calc(100vh - 36px);
    }


/* =========================================================
   TRACS SHELL SURFACE (this is what you’re actually seeing)
   ========================================================= */

/* Outer wrapper still provides margin + rounded clipping */
.pa-shell {
    margin: 18px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--pa-shell-shadow);
    border: 1px solid var(--pa-shell-border);
}

/* Inner wrapper becomes the painted surface */
.pa-tracs-shell {
    min-height: calc(100vh - 36px);
    background: var(--pa-shell-bg);
}

/* If there’s an existing solid bg on main, kill it so shell shows */
main.pa-main {
    background: transparent !important;
}

/* === PA SHELL: force it to be visible without changing body === */
.columns.is-gapless.pa-shell {
    margin: 18px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 50px rgba(0,0,0,0.25) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    background: rgba(255,255,255,0.10) !important;
}

/* Make sure the columns container isn't being forced full-bleed */
.columns.is-gapless {
    margin: 0 !important; /* default */
}

    /* If something is collapsing the shell height, stabilize it */
    .columns.is-gapless.pa-shell > .column,
    .columns.is-gapless.pa-shell > main.column {
        min-height: calc(100vh - 36px) !important;
    }

/* =======================================================================
   v1.1 overrides (2026-03-03)
   Goal: make pa-shell framing work with actual DOM (body>form>columns),
   avoid margin-induced scroll/shift, and prevent tracs wrapper whitewash.
   Keeps existing green interaction rules intact by not touching them.
   ======================================================================= */

/* Ensure no default body margin creates unintended top/side bars */
html, body {
    height: 100%;
}

body {
    margin: 0;
}

/* Outer app frame: use padding instead of margin to avoid layout shift/scroll */
.columns.is-gapless.pa-shell {
    min-height: 100vh;
    padding: 18px;
    box-sizing: border-box;
}

/* Tracs wrapper: do not repaint a translucent white layer over the gradient */
.pa-tracs-shell {
    background: transparent !important;
    border-radius: 16px;
    overflow: hidden;
}

.pa-tracs-body {
    background: transparent !important;
}

/* =======================================================================
   v1.2 overrides (2026-03-03)
   Goal: eliminate white "bars" revealed by pa-shell padding by ensuring
   the page (html/body) paints the same diagonal background gradient.
   Also keep Tracs/topbar transparent.
   ======================================================================= */

html, body {
    background: linear-gradient( to bottom right, var(--pa-bg-ul), var(--pa-bg-mid), var(--pa-bg-lr) ) !important;
}

/* Keep Tracs wrappers transparent (in case upstream paints white) */
.pa-tracs-shell,
.pa-tracs-body,
.pa-tracs-topbar {
    background: transparent !important;
}


/* =======================================================================
   v1.3 overrides (tight outer browser-card shell)
   ======================================================================= */

:root {
    --pa-shell-gap: 10px;
    --pa-shell-radius: 10px;
}

/* Prevent body scroll; shell handles layout */
html, body {
    height: 100%;
    overflow: hidden !important;
    margin: 0 !important;
}

/* Outer app card */
.pa-shell {
    height: calc(100vh - (var(--pa-shell-gap) * 2)) !important;
    width: calc(100vw - (var(--pa-shell-gap) * 2)) !important;
    margin: var(--pa-shell-gap) !important;
    padding: 0 !important;
    border-radius: var(--pa-shell-radius) !important;
    overflow: hidden !important;
}

    /* Ensure columns fill shell */
    .pa-shell.columns.is-gapless {
        height: 100% !important;
    }

/* Pane-level scrolling */
#NavMenu {
    height: 100%;
    overflow: auto;
}

.pa-main {
    height: 100%;
    overflow: auto;
}


/* ──────────────────────────────────────────────────────────────────────────
   v1.4 overrides (tight shell + remove separator line + tighter nav)
   Notes:
   - Keep prior colors/greens intact; only geometry/edges adjusted.
   - Prefer shadow “stroke” over a visible border.
   ────────────────────────────────────────────────────────────────────────── */

/* Tighten the outer “browser card” wrapper without a visible border line */
.pa-shell {
    margin: 6px; /* was 18px */
    border: 0 !important; /* remove visible 1px ring */
    border-radius: 12px; /* slightly tighter */
    /* subtle edge stroke via shadow, not border */
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 10px 28px rgba(0,0,0,0.22);
}

/* Remove the horizontal separator line under the top bar */
.pa-tracs-topbar {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* Ensure the main content background inherits the blue gradient (no white blocks) */
.pa-tracs-body,
.pa-tracs-shell {
    background: transparent;
}

/* Tighten left nav panel spacing (less padding / less vertical slack) */
#NavMenu {
    padding: 10px 10px 12px 10px; /* was 1rem */
}

    /* Bulma menu density tweaks for the left tree */
    #NavMenu .menu-label {
        margin-bottom: 6px;
        padding-top: 6px;
        padding-bottom: 4px;
    }

    #NavMenu .menu-list li {
        margin: 0;
    }

    #NavMenu .menu-list a {
        padding: 8px 12px; /* tighter click area */
        line-height: 1.15;
    }

    /* Reduce section gaps between menu groups */
    #NavMenu .menu + .menu {
        margin-top: 10px;
    }


/* =========================
   v1.5 overrides (lifted + flush shell)
   Goal: app "card" almost flush to viewport, no white gutters, no window scrolling.
   ========================= */

/* kill default page gutters + prevent window scroll */
html, body, form {
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

body {
    overflow: hidden; /* keep scrolling inside panes, not the window */
}

/* ensure anything outside the shell is NOT white (shows the same outer gradient instead) */
body {
    /* if your earlier variables exist, this will use them; otherwise it falls back safely */
    background: var(--pa-outer-bg, linear-gradient(135deg, #153a9b 0%, #d9eaff 100%));
}

/* make the shell a "nearly flush" lifted card */
.columns.is-gapless.pa-shell,
.pa-shell {
    margin: 2px !important; /* tighter than 6px/1px attempts that still showed white gutters */
    padding: 0 !important;
    height: calc(100vh - 4px) !important; /* fit viewport minus margins */
    border-radius: 12px !important;
    overflow: hidden !important; /* clip inner shadows/gradients so it reads as one app */
    box-shadow: 0 10px 26px rgba(0,0,0,0.22) !important; /* subtle lift */
}

/* remove any stray borders/lines that read as "boxes" */
.columns.is-gapless.pa-shell {
    border: 0 !important;
}

    /* remove column padding so nav is flush to the shell edge */
    .columns.is-gapless.pa-shell > .column {
        padding: 0 !important;
    }

/* nav: flush to shell edge, tighter internal padding */
#NavMenu {
    padding: 0 !important; /* flush edge */
    height: 100%;
}

    /*    #NavMenu .nav-fixed {

        height: 100%;
}*/

    /* keep the menu content padded (but not the outer wrapper) */
    #NavMenu .menu {
        margin: 0 !important;
        padding: 12px 10px 12px 10px;
    }

/* main: no window scroll; allow internal scroll if needed */
.pa-main {
    height: 100%;
    overflow: hidden !important;
}

.pa-tracs-shell {
    height: 100%;
}

.pa-tracs-body {
    height: 100%;
    overflow: auto; /* content scrolls here, not the page */
}

/* if any element still paints white behind the shell, force transparent */
.pa-tracs-shell,
.pa-tracs-body,
.pa-tracs-topbar {
    background: transparent !important;
}

/* =========================================================
   v1.6 overrides — "floating app card" fit-to-viewport
   Goal: equal tight inset on ALL sides (no body scroll),
         preserve existing palette/greens, no layout shifts.
   ========================================================= */

/* Kill browser default gaps + prevent viewport-scroll “shadow bars” */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important; /* app card owns scrolling */
}

/* Ensure Bulma columns don't introduce stray overflow */
.columns, .column {
    min-height: 0;
    min-width: 0;
}

/* Main app shell: pin to viewport with a very tight inset */
.pa-shell {
    /* Use fixed inset instead of width:100vw to avoid scrollbar math gaps */
    position: fixed;
    inset: 1px 0 0 1px; /* ultra-tight: 1px top/left, flush right/bottom */
    border-radius: 12px; /* keep the lifted card feel */
    overflow: hidden; /* clip inner content to rounded corners */
}

/* If you also have a nested shell in Tracs, keep it fill-parent */
.pa-tracs-shell {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/* Only the inner nav/content areas should scroll (not the whole window) */
#NavMenu,
.pa-main,
.pa-tracs-body {
    height: 100%;
    min-height: 0;
}

    /* Allow internal scrolling where needed without creating outer gaps */
    #NavMenu .nav-fixed {
        /*height: 100%;*/
        overflow: auto;
    }

.pa-main {
    overflow: auto; /* project pages can scroll inside the card */
}

/* Safety: some browsers add outline/gap on focus */
.pa-shell:focus,
.pa-shell *:focus {
    outline-offset: 2px;
}



/* === v1.8 overrides: tighten shell to viewport + show bottom/right edge === */

/* Ensure viewport math is sane */
html, body {
    height: 100%;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important; /* prevent page-level scrollbars */
    box-sizing: border-box;
}

/* Use a tiny page gutter so the app "floats" inside the browser */
:root {
    --pa-gutter: 6px; /* adjust if needed */
}

/* If Bulma adds margins to columns container, neutralize hard */
.columns.is-gapless.pa-shell {
    margin: 0 !important;
}

/* Outer app card */
.pa-shell {
    position: fixed;
    inset: var(--pa-gutter); /* top/right/bottom/left */
    width: auto !important;
    height: auto !important;
    overflow: hidden; /* keep bottom radius clean */
    border-radius: 10px; /* keep your existing radius feel */
    box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 12px 28px rgba(0,0,0,0.28); /* makes bottom/right edge readable */
}

    /* Make sure inner areas don't reintroduce page scroll */
    .pa-shell > .column,
    .pa-shell main,
    .pa-tracs-shell {
        height: 100%;
        min-height: 0;
    }

/* Main content column should fill without overflow */
.pa-main {
    overflow: hidden;
}

/* Content area can scroll internally if needed (later pages) */
.pa-tracs-body {
    overflow: auto;
    min-height: 0;
    height: calc(100% - var(--pa-tracs-topbar-h, 0px));
}

/* Avoid any accidental "bottom line" from borders */
.pa-shell, .pa-tracs-shell, .pa-tracs-topbar {
    border-bottom: none !important;
}

/* =====================
   v1.9 — app shell fit-to-viewport
   Goal: match top/left tightness, remove oversized right gap, and ensure the shell draws a real bottom edge.
   ===================== */

/* Ensure the document provides a stable 100% height canvas */
html, body {
    height: 100%;
    width: 100%;
}

body {
    margin: 0 !important;
    overflow: hidden; /* the app shell should own scrolling */
}

form#form1 {
    height: 100%;
}

/* Global box sizing to avoid 100vw/100% + padding causing right-side drift */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Make the outer shell a true "fit to view" card */
.pa-shell,
.pa-tracs-shell {
    position: fixed;
    top: var(--pa-app-inset, 6px);
    left: var(--pa-app-inset, 6px);
    right: var(--pa-app-inset, 6px);
    bottom: var(--pa-app-inset, 6px);
    /* Preserve your existing rounded / shadow styling, just ensure it renders on all edges */
    overflow: hidden;
    isolation: isolate;
}

    /* Ensure the internal Bulma columns consume the full shell height */
    .pa-shell > .columns,
    .pa-tracs-shell > .columns,
    .pa-shell .columns.is-gapless,
    .pa-tracs-shell .columns.is-gapless {
        height: 100%;
        min-height: 0;
    }

/* Main column must also stretch so the bottom radius is visible */
.pa-main {
    height: 100%;
    min-height: 0;
}



/* ==========================================================================
   v1.16 FIXUP (keep v1.9 shell feel, restore nav + content flow)
   - DO NOT move the shell rules above; this section intentionally overrides
     v1.9 conflicts with tighter, deterministic layout.
   ========================================================================== */

/* Tunable shell inset (independent per edge) */
:root {
    --pa-app-inset-top: 2px;
    --pa-app-inset-left: 3px;
    --pa-app-inset-right: 2px;
    --pa-app-inset-bottom: 2px;
    --pa-nav-w: 320px;
}

/* Shell: apply ONLY to the outer columns wrapper (not the inner tracs shell) */
.columns.is-gapless.pa-shell,
.pa-shell {
    position: fixed !important;
    top: var(--pa-app-inset-top) !important;
    left: var(--pa-app-inset-left) !important;
    right: var(--pa-app-inset-right) !important;
    bottom: var(--pa-app-inset-bottom) !important;
    overflow: hidden !important;
    isolation: isolate !important;
    display: flex !important; /* keep Bulma columns behavior even if overridden */
    height: auto !important; /* determined by top/bottom */
}

/* IMPORTANT: the inner tracs shell must stay in-flow inside the main column */
.pa-tracs-shell {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Columns: keep left nav + main content side-by-side */
.columns.is-gapless.pa-shell > .column.is-narrow {
    flex: 0 0 var(--pa-nav-w) !important;
    width: var(--pa-nav-w) !important;
    min-width: var(--pa-nav-w) !important;
}

.columns.is-gapless.pa-shell > .pa-main,
.columns.is-gapless.pa-shell > main.pa-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow: hidden !important; /* scrolling is inside .pa-tracs-body */
}

/* Nav: restore the working v1.4 structure and prevent later v1.9 overrides */
#NavMenu {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* because outer shell is fixed */
    overflow: hidden !important;
    padding: 12px 10px !important;
}

.nav-fixed {
    height: 100% !important;
    overflow: hidden !important;
}

.nav-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
}

/* Ensure page content renders in the work area (not under the nav) */
.pa-tracs-body {
    height: 100% !important;
    min-height: 0 !important;
    overflow: auto !important;
}

/* Safety: prevent any generic 'position: fixed' rules from grabbing the wrong wrapper */
main.pa-main > .pa-shell {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
}


/* =========================
   v1.17 NAV SCROLL FIX
   Goal: keep v1.9 shell behavior, but restore full left menu rendering.
   Symptom: only "Quick Actions" block shows; lower sections clipped.
   Fix: make left column a flex column, keep header auto-height, and let .nav-scroll own scrolling.
   ========================= */

.column.is-narrow #NavMenu {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0; /* critical so child overflow works */
}

    .column.is-narrow #NavMenu .nav-fixed {
        position: sticky; /* keeps the top block pinned without breaking layout */
        top: 0;
        flex: 0 0 auto;
        overflow: visible;
        z-index: 2;
    }

    .column.is-narrow #NavMenu .nav-scroll {
        flex: 1 1 auto;
        min-height: 0; /* critical so it can shrink and scroll */
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 8px; /* breathing room so last items aren't cut off */
    }

    /* If any earlier rule forced a max-height on these, neutralize it. */
    .column.is-narrow #NavMenu .nav-scroll,
    .column.is-narrow #NavMenu .nav-fixed {
        max-height: none !important;
    }

/* Prevent parent containers from clipping the menu area */
.column.is-narrow,
.column.is-narrow .menu {
    min-height: 0;
}

/* === v1.18: nav scroll fix (Forms/etc. collapsed to bottom) === */
/* === v1.18: nav scroll fix (Forms/etc. collapsed to bottom) ===
   Problem: the second nav block (.nav-scroll) is ending up with ~0px height.
   Fix: make the left nav a real column flex layout with an explicit flex-grow scroll region. */
#NavMenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* critical: allows children to shrink and scroll */
}

/* Ensure the left column can actually stretch to fill the shell */
.pa-shell .column.is-narrow,
.pa-tracs-shell .column.is-narrow {
    height: 100%;
    min-height: 0;
}

/* Fixed header section stays sized to content */
#NavMenu .nav-fixed {
    flex: 0 0 auto;
}

/* Scroll section takes the remaining height */
#NavMenu .nav-scroll {
    flex: 1 1 auto;
    min-height: 0; /* critical: enables overflow container sizing */
    overflow: auto;
}

/* If any earlier rule pinned nav-scroll, undo it */
#NavMenu .nav-scroll {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
}




.button:not(.pa-primary):not(.pa-secondary):hover {
    background: rgba(0,0,0,.03);
}


/* -------------------------
   Buttons (semantic helpers)
   Use alongside Bulma: class="button pa-primary" etc.
-------------------------- */
.button.pa-primary {
    background: var(--pa-hover-green-medium);
    border-color: var(--pa-chrome-button-border);
    color: #fff;
}

.chrome-button {
    background: var(--pa-hover-green-medium);
    border: 1px solid var(--pa-chrome-button-border);
}






/* ==========================================================================
   PA v1.19 – Targeted overrides (layout stability + chrome contrast)
   - Fix: Nav scroll area collapsing (caused by conflicting height rules)
   - Fix: Chrome action buttons / dropdown active + hover contrast
   Append-only: safe to paste at very bottom.
   ========================================================================== */

/* --- NAV: ensure fixed header + scroll body behave inside the fixed app shell --- */
#NavMenu {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* inherit from shell */
    min-height: 0 !important; /* allow flex child to shrink for scrolling */
    overflow: hidden !important; /* nav-scroll owns scrolling */
}

    #NavMenu .nav-fixed {
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #NavMenu .nav-scroll {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }

/* If Bulma column defaults or earlier rules introduce min-height issues */
.pa-shell .column.is-narrow,
.pa-tracs-shell .column.is-narrow,
.pa-shell .column.pa-main,
.pa-tracs-shell .column.pa-main {
    min-height: 0 !important;
}

/* --- CHROME: define a few extra “not-white” surfaces + stronger active affordance --- */
:root {
    /* One notch darker than your current "white" tint, still lighter than pane green    F8FCF3      */

    --pa-surface-tint-white: #FBFFF6; /* this is white-green */
    --pa-surface-tint-0: #F8FCF3; /* this is white-green */
    --pa-surface-tint-1: #f9fdf4; /* current this is light-green */
    --pa-surface-tint-2: #f2f9e8; /* slightly darker */
    --pa-surface-tint-3: #eaf5db; /* border/stronger tint */
    --pa-surface-tint-4: #E9EDE5; /* stronger tint */
    --pa-surface-tint-5: #eef3e7; /* stronger tint */
    /* Action-state contrast */
    --pa-chrome-button-hover-bg: #eef6e3;
    --pa-chrome-button-active-bg: #dfeec9;
    --pa-chrome-button-active-border: #98ba5e;
    /* Dropdown item hover/active */
    --pa-ddl-item-hover-bg: #eef6e3;
    --pa-ddl-item-active-bg: #dfeec9;
}


/* Default buttons: keep neutral/quiet */
.button:not(.pa-primary):not(.pa-secondary) {
    background: var(--pa-surface-tint-white);
    border: 1px solid var(--pa-surface-tint-2);
    color: var(--pa-text);
}

input {
    background: var(--pa-surface-tint-white);
    border: 1px solid var(--pa-surface-tint-2);
}



/* Default buttons: keep neutral/quiet */
.button:not(.pa-primary):not(.pa-secondary) {
    background: var(--pa-surface-tint-white) !important;
    border-color: var(--pa-surface-tint-2);
    color: var(--pa-text);
}




/* Project selector trigger + menu surface (only within the top-right chrome cluster) */
.pa-tracs-topbar .pa-project-ddl .dropdown-trigger .button,
.pa-tracs-topbar .pa-project-ddl .js-ddl-btn,
.pa-tracs-topbar .pa-project-ddl .dropdown-content {
    background: var(--pa-surface-tint-white) !important;
    border-color: var(--pa-surface-tint-2) !important;
}

/* Action buttons: inactive / hover / active */
.pa-tracs-topbar .pa-chrome-actions .button {
    background: var(--pa-surface-tint-white) !important;
    border-color: var(--pa-default-white-border, var(--pa-surface-tint-2)) !important;
}

    /* Hover */
    .pa-tracs-topbar .pa-chrome-actions .button:hover {
        background: var(--pa-chrome-button-hover-bg) !important;
        border-color: var(--pa-chrome-button-border, #c4db9c) !important;
    }

    /* Active (supports multiple ways you might mark active) */
    .pa-tracs-topbar .pa-chrome-actions .button.is-active,
    .pa-tracs-topbar .pa-chrome-actions .button.active,
    .pa-tracs-topbar .pa-chrome-actions .button[aria-current="page"],
    .pa-tracs-topbar .pa-chrome-actions .button[aria-pressed="true"] {
        background: var(--pa-chrome-button-active-bg) !important;
        border-color: var(--pa-chrome-button-active-border) !important;
        box-shadow: 0 0 0 2px rgba(152, 186, 94, .25) !important;
    }



.pa-chrome-work .pa-chrome-work-inner .input,
.pa-chrome-work .pa-chrome-work-inner input,
.pa-chrome-work .pa-chrome-work-inner textarea,
.pa-chrome-work .pa-chrome-work-inner select,
.pa-chrome-work .pa-chrome-work-inner .select select {
    background: var(--pa-surface-tint-white) !important;
    border-color: var(--pa-surface-tint-2) !important;
}

    .pa-chrome-work .pa-chrome-work-inner .input:focus,
    .pa-chrome-work .pa-chrome-work-inner input:focus,
    .pa-chrome-work .pa-chrome-work-inner textarea:focus,
    .pa-chrome-work .pa-chrome-work-inner select:focus,
    .pa-chrome-work .pa-chrome-work-inner .select select:focus {
        border-color: var(--pa-chrome-button-active-border) !important;
        box-shadow: 0 0 0 2px rgba(152, 186, 94, .25) !important;
    }

/* Dropdown menu items (searchable dropdown + Bulma dropdown items) */
.pa-tracs-topbar .dropdown-item:hover,
.pa-tracs-topbar .dropdown-item.is-active,
.pa-tracs-topbar .dropdown-content a.dropdown-item:hover {
    background: var(--pa-surface-tint-5) !important;
}

.pa-tracs-topbar .dropdown-item.is-active,
.pa-tracs-topbar .dropdown-content a.dropdown-item.is-active,
.pa-tracs-topbar .dropdown-content a.dropdown-item[aria-current="true"] {
    background: var(--pa-ddl-item-active-bg) !important;
}

/* Keep link text readable in tinted surfaces */
.pa-tracs-topbar .dropdown-item,
.pa-tracs-topbar .dropdown-item a {
    color: inherit !important;
}


/* ==========================================================================
   v1.20 — ProjectPages fluid fill (scroll fix for DemoMerge / DemoMerge2)
   Problem: .pa-tracs-body { height: 100% } overflows the shell by the topbar
   height, so the form bottom is clipped and unscrollable.
   Fix: make .pa-tracs-shell a flex column; body takes the remaining height.
   ========================================================================== */
.pa-tracs-shell {
    display: flex !important;
    flex-direction: column !important;
}

.pa-chrome-toggle-row,
.pa-tracs-topbar {
    flex: 0 0 auto !important;
}

.pa-tracs-body {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: auto !important;
}


/* ==========================================================================
   Dashboard tile color palette — 6-color nth-child cycle
   Each tile gets a colored top accent stripe + matching soft tint background.
   ========================================================================== */
.pa-dashboard .pa-dash-tile:nth-child(6n+1) { background: #eff6ff !important; border-top: 4px solid #3b82f6; }
.pa-dashboard .pa-dash-tile:nth-child(6n+2) { background: #f0fdf8 !important; border-top: 4px solid #0d9488; }
.pa-dashboard .pa-dash-tile:nth-child(6n+3) { background: #f5f3ff !important; border-top: 4px solid #7c3aed; }
.pa-dashboard .pa-dash-tile:nth-child(6n+4) { background: #fffbeb !important; border-top: 4px solid #d97706; }
.pa-dashboard .pa-dash-tile:nth-child(6n+5) { background: #fff1f2 !important; border-top: 4px solid #e11d48; }
.pa-dashboard .pa-dash-tile:nth-child(6n+6) { background: #f0fdf4 !important; border-top: 4px solid #16a34a; }

/* Per-cube color overrides — attribute selector beats nth-child */
.pa-dashboard .pa-dash-tile[data-cube-color=""]       { background: var(--pa-card-bg) !important; border-top: 4px solid var(--pa-card-border) !important; box-shadow: var(--pa-card-shadow) !important; }
.pa-dashboard .pa-dash-tile[data-cube-color="blue"]   { background: #ffffff !important; border-top: 4px solid #3b82f6 !important; }
.pa-dashboard .pa-dash-tile[data-cube-color="teal"]   { background: #f0fdf8 !important; border-top: 4px solid #0d9488 !important; }
.pa-dashboard .pa-dash-tile[data-cube-color="purple"] { background: #f5f3ff !important; border-top: 4px solid #7c3aed !important; }
.pa-dashboard .pa-dash-tile[data-cube-color="amber"]  { background: #fffbeb !important; border-top: 4px solid #d97706 !important; }
.pa-dashboard .pa-dash-tile[data-cube-color="rose"]   { background: #fff1f2 !important; border-top: 4px solid #e11d48 !important; }
.pa-dashboard .pa-dash-tile[data-cube-color="green"]  { background: #f0fdf4 !important; border-top: 4px solid #16a34a !important; }

/* Gear (color-pick) button — top-left, edit mode only */
.pa-dash-color-btn {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    z-index: 2;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1;
    padding: 2px 3px;
    border-radius: 3px;
    opacity: 0.45;
    transition: opacity 0.15s, background 0.15s;
    color: inherit;
}
.pa-dash-color-btn:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08);
}
.pa-dashboard:not(.is-editing) .pa-dash-color-btn {
    display: none;
}

/* Color picker popover */
.pa-color-picker {
    position: absolute;
    top: 2.1rem;
    left: 0.4rem;
    z-index: 20;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
    padding: 0.45rem 0.55rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.pa-color-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.1s, border-color 0.1s;
    padding: 0;
    outline: none;
}
.pa-color-swatch:hover,
.pa-color-swatch.is-active {
    transform: scale(1.25);
    border-color: #111;
}
.pa-color-swatch--default {
    background: linear-gradient(135deg, #e5e7eb 50%, #9ca3af 50%);
}


/* ==========================================================================
   Dashboard v2 — floating tiles, sticky footer
   Tiles float directly on the gradient; white box wrapper is gone.
   Edit/Save + cube catalog pin to the bottom as a footer strip.
   ========================================================================== */

/* Page fills tracs-body; flex column lets footer stick to bottom */
.pa-dashboard-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Scrollable tile region — grows to fill space above the footer */
.pa-dashboard-scroll {
    --pa-dash-gap: 2rem;
    --pa-dash-tile-h: clamp(210px, 22vh, 280px);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.25rem 1.25rem 0.75rem;
}

/* Grid inside scroll region: let it grow naturally (no fixed height) */
.pa-dashboard-scroll .pa-dashboard {
    height: auto !important;
}

/* Sticky footer bar */
.pa-dashboard-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.07);
    flex-wrap: wrap;
}

/* Toolbox inside footer — horizontal pill strip, not a grid item */
.pa-dashboard-footer .pa-dashboard-toolbox {
    grid-column: unset !important;
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    border: 1px dashed rgba(255,255,255,0.20);
    border-radius: 8px;
    padding: 0.3rem 0.65rem;
    background: transparent;
}

/* "Add:" label in the toolbox */
.pa-toolbox-label {
    font-size: 0.78em;
    opacity: 0.6;
    white-space: nowrap;
    margin-right: 0.15rem;
}

/* Toolbox items in footer context: lighter, compact */
.pa-dashboard-footer .pa-toolbox-item {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.25);
    color: inherit;
    font-size: 0.82rem;
    padding: 0.25rem 0.55rem;
}

    .pa-dashboard-footer .pa-toolbox-item:hover {
        background: rgba(255,255,255,0.28);
    }


/* ── Toolbox chip delete button (user-created cubes only) ── */
.pa-toolbox-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 5px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 11px;
    line-height: 1;
    opacity: 0.45;
    cursor: pointer;
    flex-shrink: 0;
}

    .pa-toolbox-delete:hover {
        opacity: 1;
        background: rgba(0,0,0,0.12);
    }

/* ── Property bubble row ────────────────────────────────── */
.pa-prop-bubbles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 0 2px;
    min-height: 0;
}

.pa-prop-bubble {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.6;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.12);
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
}

    .pa-prop-bubble:hover {
        background: rgba(255,255,255,0.22);
        border-color: rgba(255,255,255,0.4);
    }

    .pa-prop-bubble.is-active {
        background: #16a34a;
        border-color: #16a34a;
        color: #fff;
    }

/* ── Multi-select project dropdown ─────────────────────── */
.pa-ddl-item--check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

    .pa-ddl-item--check input[type="checkbox"] {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        cursor: pointer;
    }

    .pa-ddl-item--check span {
        flex: 1 1 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ── Household member row header + delete ───────────────── */
.member-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .member-block-header h4 {
        margin: 0;
    }

.btn-member-delete {
    font-size: 1rem;
    line-height: 1;
    padding: 0 4px;
    border: none;
    background: transparent;
    color: inherit;
    opacity: 0.4;
    cursor: pointer;
    text-decoration: none;
}

    .btn-member-delete:hover {
        opacity: 1;
        color: #e11d48;
    }

/* ── New Cube modal ─────────────────────────────────────── */
.pa-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.45);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .pa-modal-overlay.is-hidden {
        display: none !important;
    }

.pa-modal {
    background: var(--pa-chrome-bg, #fff);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    padding: 1.5rem 1.6rem;
    min-width: 300px;
    max-width: 400px;
    width: 90%;
}

.pa-modal-header {
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--pa-border, rgba(0,0,0,0.12));
}

.pa-modal-title {
    font-size: 0.95rem;
    font-weight: 600;
}

.pa-modal-body {
    margin-bottom: 1.25rem;
}

.pa-modal-field {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}

.pa-modal-label {
    min-width: 60px;
    font-size: 0.82rem;
    opacity: 0.65;
    font-weight: 500;
}

.pa-modal-value {
    font-size: 0.88rem;
    opacity: 0.8;
}

.pa-modal-footer {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}








































/* ===== TRACS CHROME: minimal, scoped color + state logic (Palette A) ===== */
:root {
    --pa-chrome-panel-bg: #eef5e1;
    --pa-chrome-panel-border: #d8e9bf;
    --pa-chrome-control-bg: #f9fdf4;
    --pa-chrome-control-border: #c4db9c;
    --pa-chrome-active-bg: #e6f1d4;
    --pa-chrome-active-border: #a9cc73;
    --pa-chrome-ring: #a9cc73;
}

/* Work pane surfaces + form controls (scoped; avoids “buck wild” global overrides) */
.pa-chrome-work .pa-chrome-work-inner {
    background: var(--pa-surface-tint-2) !important;
    border-color: var(--pa-surface-tint-3) !important;
}

/* Keep top bar itself transparent (prevents the “whole banner turns green” problem) */
.pa-tracs-topbar,
.pa-tracs-topbarwrap {
    background: transparent !important;
}

/* Work panel surface */
.pa-chrome-work-inner {
    background: var(--pa-surface-tint-2) !important;
    border-color: var(--pa-surface-tint-3) !important;
}

    /* Controls inside the expanded panel: inputs/selects/buttons get “white-green” */
    .pa-chrome-work-inner .input,
    .pa-chrome-work-inner input,
    .pa-chrome-work-inner textarea,
    .pa-chrome-work-inner select,
    .pa-chrome-work-inner .select select,
    .pa-tracs-topbar .pa-project-ddl .js-ddl-btn,
    .pa-tracs-topbar .pa-project-ddl .dropdown-content {
        background: var(--pa-surface-tint-white) !important;
        border-color: var(--pa-surface-tint-2) !important;
    }

/* Top-right action buttons: inactive = control bg */
.pa-tracs-topbar .pa-chrome-actions .button {
    background: var(--pa-surface-tint-white) !important;
    border-color: var(--pa-surface-tint-2) !important;
}

    /* Hover: transparent + ring (independent of bg color; does NOT require pure white) */
    .pa-tracs-topbar .pa-chrome-actions .button:hover {
        background: transparent !important;
        border-color: var(--pa-chrome-ring) !important;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--pa-chrome-ring) 55%, transparent) !important;
    }

    /* Active: your “good hover color” becomes active, with slightly stronger border */
    .pa-tracs-topbar .pa-chrome-actions .button.is-active,
    .pa-tracs-topbar .pa-chrome-actions .button.active,
    .pa-tracs-topbar .pa-chrome-actions .button[aria-current="page"],
    .pa-tracs-topbar .pa-chrome-actions .button[aria-pressed="true"],
    .pa-tracs-topbar .pa-chrome-actions .button[aria-expanded="true"],
    .pa-tracs-topbar .pa-chrome-actions .button.pa-chrome-action-active {
        background: var(--pa-surface-tint-5) !important;
        border-color: var(--pa-surface-tint-4) !important;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--pa-surface-tint-3) 55%, transparent) !important;
    }


/* ===== BV50059 (3-box layout: 1 + 2 on left, t on right) ===== */
.pa-50059 {
    --pa-50059-gap: 1rem;
    --pa-50059-left-w: 58%;
    --pa-50059-box1-h: 430px;
    --pa-50059-box2-h: 240px;
}

    /* Outer layout */
    .pa-50059 .pa-50059-layout {
        display: flex;
        gap: var(--pa-50059-gap);
        align-items: flex-start;
        width: 100%;
    }

    /* Left stack */
    .pa-50059 .pa-50059-left {
        flex: 0 0 var(--pa-50059-left-w);
        min-width: 560px;
        display: flex;
        flex-direction: column;
        gap: var(--pa-50059-gap);
    }

    /* Right box */
    .pa-50059 .pa-50059-right {
        flex: 1 1 auto;
        min-width: 420px;
    }

    /* Boxes */
    .pa-50059 .pa-50059-box {
        overflow: hidden; /* scrolling is on the inner .pa-50059-scroll */
    }

    .pa-50059 .pa-50059-box1 {
        height: var(--pa-50059-box1-h);
    }

    .pa-50059 .pa-50059-box2 {
        height: var(--pa-50059-box2-h);
    }

    .pa-50059 .pa-50059-boxt {
        /* Hug content (table) by default; constrain growth and scroll internally */
        height: auto;
        max-height: calc(var(--pa-50059-box1-h) + var(--pa-50059-box2-h) + var(--pa-50059-gap));
    }

    /* Scroll regions (vertical only) */
    .pa-50059 .pa-50059-scroll {
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Ensure table panel scrolls vertically (not horizontally) */
    .pa-50059 .pa-50059-boxt .table-container {
        max-height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }







/* =========================================
   59z1 – Force 3-column internal layout
   ========================================= */

.pa-59z1 .pa-work {
    height: 100%;
}

    .pa-59z1 .pa-work .pa-59z1-workgrid {
        display: grid !important;
        grid-template-columns: minmax(420px, 1fr) 3px 460px !important;
        gap: 1.25rem !important;
        align-items: start !important;
        margin: 0 !important;
    }

/* Left stack */
.pa-59z1 .pa-59z1-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    min-width: 0;
}

/* Divider */
.pa-59z1 .pa-vrule {
    width: 3px !important;
    background: rgba(47,58,69,.28) !important;
    border-radius: 999px !important;
    align-self: stretch !important;
    margin: 0 !important;
}

/* Right column (calendar area) */
.pa-59z1 .pa-59z1-right {
    min-width: 460px !important;
}

/* Prevent horizontal overflow */
.pa-59z1 .pa-59z1-left,
.pa-59z1 .pa-59z1-right {
    overflow-x: hidden;
}






/* =========================================================
   59z1 – Fix left controls stacking (tall, not wide)
   Forces the LEFT side controls to stack vertically even if
   they are wrapped in Bulma .columns/.column.
   ========================================================= */

.pa-59z1 .pa-5921-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    min-width: 0;
}

    /* If the controls are grouped in Bulma .columns, make them vertical */
    .pa-59z1 .pa-5921-left .columns {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 1rem !important;
        margin: 0 !important; /* kill Bulma negative margins */
    }

        /* Each .column becomes full-width row */
        .pa-59z1 .pa-5921-left .columns > .column {
            width: 100% !important;
            flex: 0 0 auto !important;
            padding: 0 !important; /* kill Bulma column padding */
        }

    /* Make the big dropdown/button controls actually fill the row */
    .pa-59z1 .pa-5921-left .dropdown,
    .pa-59z1 .pa-5921-left .dropdown-trigger,
    .pa-59z1 .pa-5921-left .dropdown-trigger .button,
    .pa-59z1 .pa-5921-left .pa-ddl,
    .pa-59z1 .pa-5921-left .pa-ddl .js-ddl-btn {
        width: 100% !important;
    }





/* =========================================================
   59z1/BV50059 – make the 3-column workgrid fill Box 1 height
   Fixes: "going wide not tall" (workgrid stuck ~182px tall)
   ========================================================= */

/* Box 1: ensure the inner work block has a real height to stretch into */
.pa-50059 .pa-50059-box1 .pa-work,
.pa-59z1 .pa-work {
    height: 100%;
    min-height: 0;
}

/* Workgrid must fill height (works for both class spellings if you have both) */
.pa-50059 .pa-50059-box1 .pa-59z1-workgrid,
.pa-59z1 .pa-59z1-workgrid,
.pa-59z1 .pa-5921-workgrid {
    height: 100% !important;
    min-height: 0 !important;
    align-items: stretch !important;
}

/* The 3 columns must also stretch */
.pa-50059 .pa-50059-box1 .pa-59z1-left,
.pa-59z1 .pa-59z1-left,
.pa-59z1 .pa-5921-left,
.pa-50059 .pa-50059-box1 .pa-59z1-right,
.pa-59z1 .pa-59z1-right,
.pa-59z1 .pa-5921-right {
    height: 100% !important;
    min-height: 0 !important;
}

/* Left column: stack sections top-to-bottom and allow internal spacing */
.pa-50059 .pa-50059-box1 .pa-59z1-left,
.pa-59z1 .pa-59z1-left,
.pa-59z1 .pa-5921-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

/* Right column: let the calendar/card occupy available height without forcing viewport scroll */
.pa-50059 .pa-50059-box1 .pa-59z1-right,
.pa-59z1 .pa-59z1-right,
.pa-59z1 .pa-5921-right {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
/* =========================================================
   BV50059 – Box 1 3-column work layout
   Layout: [ left controls ] | [ vrule ] | [ calendar ]
   Scope: ONLY this page (.pa-50059)
   ========================================================= */

.pa-50059 .pa-50059-box1 .pa-work {
    display: grid !important;
    grid-template-columns: minmax(420px, 1fr) 3px 460px !important;
    gap: 1.25rem !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}

    /* LEFT wrapper (override Bulma .columns flex) */
    .pa-50059 .pa-50059-box1 .pa-work > .pa-5921-workgrid.columns {
        display: block !important;
        margin: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }

    /* Divider column */
    .pa-50059 .pa-50059-box1 .pa-work > .pa-vrule {
        align-self: stretch !important;
        margin: 0 !important;
    }

    /* RIGHT column (calendar area) */
    .pa-50059 .pa-50059-box1 .pa-work > .pa-5921-right {
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }



/* =========================================================
   BV50059 – reduce calendar height so controls below show
   ========================================================= */

.pa-50059 .pa-5921-right {
    display: flex;
    flex-direction: column;
}

    /* calendar container */
    .pa-50059 .pa-5921-right .card,
    .pa-50059 .pa-5921-right .calendar,
    .pa-50059 .pa-5921-right .datepicker {
        max-height: 340px;
        overflow-y: auto;
    }

    /* ensure items under calendar remain visible */
    .pa-50059 .pa-5921-right .field,
    .pa-50059 .pa-5921-right .control,
    .pa-50059 .pa-5921-right .buttons {
        flex-shrink: 0;
    }





















/* ========================================================================== */
/*  PAULHUS — OVERRIDES (APPEND-ONLY BLOCK)                                    */
/*  Dashboard sliver (Win11 show-desktop style) next to Tracs chrome            */
/*  Paste this whole block at the very end of _dev.css                          */
/* ========================================================================== */

:root {
    /* TWEAKS */
    --pa-dashboard-sliver-gap: -10px; /* distance from chrome box */
    --pa-dashboard-sliver-width: 10px; /* thickness of sliver */
}

/* Top bar must be a flex row so the sliver can stretch to chrome height */
.pa-tracs-topbar {
    display: flex;
    align-items: stretch; /* makes children match the tallest sibling */
}

/* Ensure the chrome container has a real, stable height to match */
#paTracsChrome {
    display: flex;
    flex-direction: column;
}

/* Win11-style “sliver” control */
.pa-dashboard-sliver {
    /* sizing + placement */
    align-self: stretch;
    width: var(--pa-dashboard-sliver-width);
    margin-right: var(--pa-dashboard-sliver-gap);
    /* force: do NOT allow any earlier fixed heights to win */
    height: auto !important;
    min-height: 0 !important;
    /* appearance */
    border-radius: 999px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

    /* Hover glow */
    .pa-dashboard-sliver:hover {
        background: rgba(255,255,255,0.35);
        border-color: #c4db9c;
        box-shadow: 0 0 6px rgba(196,219,156,0.60), 0 1px 4px rgba(0,0,0,0.18);
    }

    /* Subtle press */
    .pa-dashboard-sliver:active {
        transform: translateY(1px);
        box-shadow: 0 0 3px rgba(196,219,156,0.50), inset 0 1px 2px rgba(0,0,0,0.25);
    }

/* If it’s a LinkButton (<a>), keep it looking like a control */
a.pa-dashboard-sliver {
    text-decoration: none;
}










:root {
    --pa-dashboard-sliver-gap: -6px;
    --pa-dashboard-sliver-width: 7px;
    --pa-dashboard-sliver-vpad: 4px;
    --pa-dashboard-sliver-vpadoffset: -2.5px;
    /* hover growth */
    --pa-dashboard-sliver-hover-scale-x: 1.25;
    --pa-dashboard-sliver-hover-scale-y: 1.12;
    /* glow tuning */
    --pa-dashboard-sliver-glow: rgba(196,219,156,0.65);
    --pa-dashboard-sliver-glow-size: 6px;
}

/* layout */
.pa-tracs-topbar {
    display: flex;
    align-items: stretch;
}

.pa-dashboard-sliverwrap {
    display: flex;
    align-items: stretch;
    margin-right: var(--pa-dashboard-sliver-gap);
    padding: calc(var(--pa-dashboard-sliver-vpad) - var(--pa-dashboard-sliver-vpadoffset)) 0 var(--pa-dashboard-sliver-vpad) 0;
}

/* base sliver */
.pa-dashboard-sliver {
    position: relative;
    display: block;
    width: var(--pa-dashboard-sliver-width);
    height: 100%;
    border-radius: 999px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    cursor: pointer;
    transform-origin: center;
    transition: transform 140ms cubic-bezier(.2,.7,.3,1), background 120ms ease, border-color 120ms ease, box-shadow 140ms ease;
}

    /* reveal glow layer */
    .pa-dashboard-sliver::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 999px;
        opacity: 0;
        pointer-events: none;
        box-shadow: 0 0 var(--pa-dashboard-sliver-glow-size) var(--pa-dashboard-sliver-glow), 0 0 calc(var(--pa-dashboard-sliver-glow-size) * 1.6) rgba(196,219,156,0.35);
        transition: opacity 140ms ease;
    }

    /* hover */
    .pa-dashboard-sliver:hover {
        transform: scale( var(--pa-dashboard-sliver-hover-scale-x), var(--pa-dashboard-sliver-hover-scale-y) );
        background: rgba(255,255,255,0.32);
        border-color: #c4db9c;
    }

        .pa-dashboard-sliver:hover::before {
            opacity: 1;
        }

    /* press */
    .pa-dashboard-sliver:active {
        transform: scale( calc(var(--pa-dashboard-sliver-hover-scale-x) * 0.9), calc(var(--pa-dashboard-sliver-hover-scale-y) * 0.9) );
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.25), 0 0 3px rgba(196,219,156,0.45);
    }



/* =========================================
   Chrome dropdown arrow accent
   ========================================= */

.pa-chrome-panel .select::after {
    border-color: #9dbb63; /* your green family */
    transition: transform 120ms cubic-bezier(.2,.7,.3,1), border-color 120ms ease, filter 120ms ease;
}

/* hover – arrow brightens slightly */
.pa-chrome-panel .select:hover::after {
    border-color: #c4db9c;
    filter: drop-shadow(0 0 2px rgba(196,219,156,0.65));
}

/* focus/open – arrow glows subtly */
.pa-chrome-panel .select select:focus + .select::after,
.pa-chrome-panel .select:focus-within::after {
    border-color: #d6ecb6;
    transform: scale(1.1);
    filter: drop-shadow(0 0 3px rgba(196,219,156,0.75));
}





.flatpickr-calendar {
    z-index: 99999 !important;
}

















/* =========================================================
   Minimal master toggle CSS
   Append to the bottom of _dev.css
   ========================================================= */

.pa-toggle-btn {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 8px;
    background: rgba(255,255,255,.88);
    color: var(--pa-text, #2f3a45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

    .pa-toggle-btn:hover {
        background: rgba(255,255,255,.96);
    }

    .pa-toggle-btn::before {
        content: "";
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(135deg);
    }

.pa-nav-toggle-wrap {
    display: flex;
    justify-content: flex-end;
    padding: 8px 8px 0 8px;
}

.pa-shell.pa-nav-collapsed > .column.is-narrow {
    flex: 0 0 56px !important;
    width: 56px !important;
    min-width: 56px !important;
}

.pa-shell.pa-nav-collapsed #NavMenu {
    width: 56px !important;
    min-width: 56px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.pa-shell.pa-nav-collapsed .pa-nav-toggle-wrap {
    justify-content: center;
    padding: 8px 0 0 0;
}

.pa-shell.pa-nav-collapsed #NavMenu .nav-scroll,
.pa-shell.pa-nav-collapsed #NavMenu .nav-fixed > *:not(.pa-nav-toggle-wrap) {
    display: none !important;
}

.pa-shell.pa-nav-collapsed .pa-nav-toggle::before {
    transform: rotate(-45deg);
}

.pa-chrome-toggle-row {
    display: none;
    justify-content: center;
    padding: 6px 0 2px 0;
}

.pa-tracs-banner-actions {
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}

.pa-tracs-shell.pa-chrome-collapsed .pa-tracs-chrome,
.pa-tracs-shell.pa-chrome-collapsed .pa-tracs-banner-actions {
    display: none !important;
}

.pa-tracs-shell.pa-chrome-collapsed .pa-chrome-toggle-row {
    display: flex;
}

.pa-tracs-shell.pa-chrome-collapsed .pa-chrome-toggle::before {
    transform: rotate(45deg);
}











:root {
    --cube-accent-30: #49a86e;
    --cube-accent-60: #65b56c;
    --cube-accent-90: #8ec36c;
    --cube-accent-120: #c7be63;
    --cube-accent-upcoming: #8fa8d8;
}

.pa-cube-project-label {
    margin-bottom: .35rem;
    font-size: .8rem;
    font-weight: 600;
    opacity: .78;
}

.pa-cube-metric-title {
    margin-bottom: .15rem;
    font-size: 1rem;
    font-weight: 700;
}

.pa-cube-metric-subtitle {
    margin-bottom: .65rem;
    font-size: .8rem;
    opacity: .72;
}

.pa-cube-metric-value {
    font-size: 2rem;
    font-weight: 700;
}

.pa-cube-summary-divider {
    height: 1px;
    margin: .15rem 0;
    background: rgba(0,0,0,.18);
}

.pa-cube-summary-spacer {
    height: .8rem;
}

.pa-cube-summary-row.is-muted {
    opacity: .62;
}

.pa-cube-chart-header {
    margin: .35rem 0 .65rem;
    font-size: .8rem;
    font-weight: 600;
}

.pa-cube-bar-chart {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: .6rem;
    align-items: end;
    height: 180px;
}

.pa-cube-bar {
    border-radius: 8px 8px 0 0;
}






























/* 50059Entry BV-shell merge patch */
.pa-50059-entry .pa-50059-entry-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pa-50059-entry .pa-59z1-action,
.pa-50059-entry .pa-59z1-unitfam,
.pa-50059-entry .pa-control,
.pa-50059-entry .pa-50059-entry-panel,
.pa-50059-entry .pa-calendar,
.pa-50059-entry .pa-50059-entry-docline,
.pa-50059-entry .pa-50059-entry-checks,
.pa-50059-entry .pa-50059-entry-submit,
.pa-50059-entry .pa-50059-entry-inline-note {
    width: 100%;
}

.pa-50059-entry .pa-50059-entry-panel {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.pa-50059-entry #TICRadioWrapper,
.pa-50059-entry #TICTypeWrapper,
.pa-50059-entry #Sec8TICRadioWrapper,
.pa-50059-entry #Sec8TICTypeWrapper,
.pa-50059-entry #TICDescWrapper,
.pa-50059-entry #Sec8TICDescWrapper {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: center;
}

.pa-50059-entry .pa-50059-entry-checks,
.pa-50059-entry .pa-50059-entry-flags {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: center;
}

.pa-50059-entry .pa-50059-entry-docline input[type="text"],
.pa-50059-entry .pa-50059-entry-docline .aspNetDisabled {
    width: 100%;
}

.pa-50059-entry .pa-50059-entry-submit .button,
.pa-50059-entry .pa-50059-entry-submit input[type="submit"],
.pa-50059-entry .pa-50059-entry-submit input[type="button"] {
    min-width: 8rem;
}











/* 50059Entry BV-shell repair patch */
.pa-50059-entry .pa-50059-entry-scroll {
    overflow-y: auto;
    overflow-x: hidden;
}

.pa-50059-entry .pa-50059-entry-work {
    display: block !important;
    height: auto !important;
    min-height: 100%;
}

.pa-50059-entry .pa-50059-entry-scrollshell {
    min-height: 100%;
    padding: 0.25rem;
}

.pa-50059-entry .pa-50059-entry-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.pa-50059-entry .pa-59z1-left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: auto !important;
    min-height: 0 !important;
}

.pa-50059-entry .pa-59z1-action,
.pa-50059-entry .pa-59z1-unitfam,
.pa-50059-entry .pa-control,
.pa-50059-entry .pa-50059-entry-panel,
.pa-50059-entry .pa-calendar,
.pa-50059-entry .pa-50059-entry-docline,
.pa-50059-entry .pa-50059-entry-checks,
.pa-50059-entry .pa-50059-entry-submit,
.pa-50059-entry .pa-50059-entry-inline-note,
.pa-50059-entry .pa-50059-entry-flags,
.pa-50059-entry .pa-50059-entry-docline input[type="text"] {
    width: 100%;
    max-width: 100%;
}

.pa-50059-entry .pa-control,
.pa-50059-entry .pa-50059-entry-panel,
.pa-50059-entry .pa-calendar,
.pa-50059-entry .pa-50059-entry-inline-note,
.pa-50059-entry .pa-50059-entry-docline,
.pa-50059-entry .pa-50059-entry-checks,
.pa-50059-entry .pa-50059-entry-flags,
.pa-50059-entry .pa-50059-entry-submit {
    display: block;
    clear: both;
}

.pa-50059-entry .pa-59z1-action > .pa-control + .pa-control,
.pa-50059-entry .pa-59z1-left > * + * {
    margin-top: 1rem;
}

.pa-50059-entry .pa-50059-entry-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pa-50059-entry #TICRadioWrapper,
.pa-50059-entry #TICTypeWrapper,
.pa-50059-entry #Sec8TICRadioWrapper,
.pa-50059-entry #Sec8TICTypeWrapper,
.pa-50059-entry #TICDescWrapper,
.pa-50059-entry #Sec8TICDescWrapper,
.pa-50059-entry #Sec8TICWorkWrapper,
.pa-50059-entry #TICWorkWrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
}

.pa-50059-entry .pa-50059-entry-checks,
.pa-50059-entry .pa-50059-entry-flags,
.pa-50059-entry #Sec8TICRadioWrapper,
.pa-50059-entry #TICRadioWrapper,
.pa-50059-entry #TICTypeWrapper,
.pa-50059-entry #Sec8TICTypeWrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
}

.pa-50059-entry .pa-calendar {
    margin-top: 0;
}

.pa-50059-entry .pa-50059-entry-submit {
    padding-bottom: 0.25rem;
}

    .pa-50059-entry .pa-50059-entry-submit .button,
    .pa-50059-entry .pa-50059-entry-submit input[type="submit"],
    .pa-50059-entry .pa-50059-entry-submit input[type="button"] {
        min-width: 8rem;
    }

.pa-50059-entry .pa-table-box .table-container {
    overflow-x: auto;
}

.pa-50059-entry .pa-table-pre {
    white-space: pre-line;
}













/* 50059Entry latest repair patch */
.pa-50059-entry .pa-50059-box1 {
    overflow: hidden;
}

.pa-50059-entry .pa-50059-entry-scroll {
    padding: 1rem;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.pa-50059-entry .pa-50059-entry-work {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
}

.pa-50059-entry .pa-50059-entry-shell {
    display: block !important;
    width: 100% !important;
    min-height: 100% !important;
    padding: 1.25rem !important;
    /*background: #dbe3f0 !important;*/
    border: 1px solid rgba(255,255,255,.45) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.pa-50059-entry .pa-50059-entry-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    width: 100% !important;
    min-width: 0 !important;
}

.pa-50059-entry .pa-59z1-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
}

    .pa-50059-entry .pa-59z1-left > .pa-59z1-action {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
    }

.pa-50059-entry .pa-control,
.pa-50059-entry .pa-50059-entry-panel,
.pa-50059-entry .pa-59z1-unitfam,
.pa-50059-entry .pa-calendar,
.pa-50059-entry .pa-50059-entry-docline,
.pa-50059-entry .pa-50059-entry-checks,
.pa-50059-entry .pa-50059-entry-flags,
.pa-50059-entry .pa-50059-entry-inline-note,
.pa-50059-entry .pa-50059-entry-submit,
.pa-50059-entry #panNewUnit {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    clear: both !important;
}

.pa-50059-entry .pa-ddl,
.pa-50059-entry .pa-ddl .js-ddl-btn,
.pa-50059-entry .pa-ddl .pa-ddl-menu {
    width: 100% !important;
}

.pa-50059-entry .pa-ddl {
    position: relative !important;
    z-index: 20;
}

    .pa-50059-entry .pa-ddl.is-open {
        z-index: 2000;
    }

.pa-50059-entry .pa-ddl-menu {
    /* 8600, not 2100: #paTopFloat floats the banners at 8500, so a 50059 dropdown opened
       while a view-as preview is active was covered too (backlog #7, same root cause). */
    z-index: 8600 !important;
}

.pa-50059-entry .pa-59z1-familyrow,
.pa-50059-entry .pa-50059-entry-checks,
.pa-50059-entry .pa-50059-entry-flags,
.pa-50059-entry #TICRadioWrapper,
.pa-50059-entry #TICTypeWrapper,
.pa-50059-entry #TICDescWrapper,
.pa-50059-entry #TICWorkWrapper,
.pa-50059-entry #Sec8TICRadioWrapper,
.pa-50059-entry #Sec8TICTypeWrapper,
.pa-50059-entry #Sec8TICDescWrapper,
.pa-50059-entry #Sec8TICWorkWrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .75rem 1rem !important;
    align-items: center !important;
}

.pa-50059-entry .pa-59z1-familyrow {
    align-items: flex-start !important;
}

    .pa-50059-entry .pa-59z1-familyrow > .pa-ddl,
    .pa-50059-entry .pa-59z1-familyrow > select,
    .pa-50059-entry .pa-59z1-familyrow > span {
        flex: 1 1 320px;
        min-width: 0;
    }

.pa-50059-entry .pa-59z1-familycheck {
    flex: 0 0 auto;
    padding-top: .35rem;
}

.pa-50059-entry .pa-50059-entry-docline input[type="text"],
.pa-50059-entry .pa-50059-entry-docline .aspNetDisabled,
.pa-50059-entry .pa-date,
.pa-50059-entry .pa-date-input {
    width: 100% !important;
    max-width: 100% !important;
}

.pa-50059-entry .pa-calendar {
    margin: 0 !important;
    max-width: 32rem;
}

.pa-50059-entry .pa-50059-entry-submit {
    padding-bottom: .25rem !important;
}

    .pa-50059-entry .pa-50059-entry-submit input[type="submit"],
    .pa-50059-entry .pa-50059-entry-submit input[type="button"],
    .pa-50059-entry .pa-50059-entry-submit .button {
        min-width: 8rem;
    }

.pa-50059-entry .pa-table-box,
.pa-50059-entry .pa-50059-boxt {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

    .pa-50059-entry .pa-table-box .table-container,
    .pa-50059-entry .pa-50059-boxt .table-container {
        max-height: none !important;
        overflow: visible !important;
    }

    .pa-50059-entry .pa-table-box table {
        table-layout: auto !important;
    }

.pa-50059-entry .pa-table-pre {
    white-space: pre-line !important;
}





























/* 50059Entry final visual fix
   Targets the current page markup without moving controls. */

/* Box 1: keep the outer white shell neutral and put the blue panel on the
   actual control stack so it extends for the full scroll length. */
.pa-50059-entry .pa-50059-entry-shell {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
}

.pa-50059-entry .pa-50059-entry-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    /*width: min(100%, 440px) !important;*/
    min-width: 0 !important;
    padding: 1.25rem !important;
    background: #dbe3f0 !important;
    border: 1px solid rgba(255,255,255,.45) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 16px 24px rgba(35,46,72,.10) !important;
}

.pa-50059-entry .pa-59z1-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 75% !important;
    min-width: 0 !important;
    height: auto !important;
}

    .pa-50059-entry .pa-59z1-left > * {
        width: 100% !important;
        max-width: 100% !important;
    }

.pa-50059-entry .pa-control,
.pa-50059-entry .pa-50059-entry-panel,
.pa-50059-entry .pa-59z1-unitfam,
.pa-50059-entry .pa-calendar,
.pa-50059-entry .pa-50059-entry-docline,
.pa-50059-entry .pa-50059-entry-checks,
.pa-50059-entry .pa-50059-entry-flags,
.pa-50059-entry .pa-50059-entry-inline-note,
.pa-50059-entry .pa-50059-entry-submit,
.pa-50059-entry #panNewUnit {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    clear: both !important;
}

.pa-50059-entry .pa-50059-entry-checks,
.pa-50059-entry .pa-50059-entry-flags,
.pa-50059-entry #TICRadioWrapper,
.pa-50059-entry #TICTypeWrapper,
.pa-50059-entry #TICDescWrapper,
.pa-50059-entry #TICWorkWrapper,
.pa-50059-entry #Sec8TICRadioWrapper,
.pa-50059-entry #Sec8TICTypeWrapper,
.pa-50059-entry #Sec8TICDescWrapper,
.pa-50059-entry #Sec8TICWorkWrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .75rem 1rem !important;
    align-items: center !important;
}

.pa-50059-entry .pa-59z1-familyrow {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    gap: .75rem 1rem !important;
    align-items: start !important;
}

.pa-50059-entry .pa-59z1-familycheck {
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
    padding-top: .35rem !important;
}

.pa-50059-entry .pa-50059-entry-docline input[type="text"],
.pa-50059-entry .pa-date,
.pa-50059-entry .pa-date-input {
    width: 100% !important;
    max-width: 100% !important;
}

.pa-50059-entry .pa-calendar {
    margin: 0 !important;
}

/* Restore greenish site feel on the custom dropdown buttons. */
.pa-50059-entry .pa-ddl,
.pa-50059-entry .pa-ddl .js-ddl-btn,
.pa-50059-entry .pa-ddl .pa-ddl-menu {
    width: 100% !important;
}

.pa-50059-entry .pa-ddl {
    position: relative !important;
    z-index: 20;
}

    .pa-50059-entry .pa-ddl.is-open {
        z-index: 2000 !important;
    }

.pa-50059-entry .pa-ddl-menu {
    /* 8600, not 2100: #paTopFloat floats the banners at 8500, so a 50059 dropdown opened
       while a view-as preview is active was covered too (backlog #7, same root cause). */
    z-index: 8600 !important;
}

.pa-50059-entry .pa-ddl .js-ddl-btn {
    background: var(--pa-surface-tint-1) !important;
    border: 1px solid var(--pa-surface-tint-3) !important;
    color: var(--pa-text) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
}

    .pa-50059-entry .pa-ddl .js-ddl-btn:hover,
    .pa-50059-entry .pa-ddl.is-open .js-ddl-btn,
    .pa-50059-entry .pa-ddl .js-ddl-btn:focus {
        background: var(--pa-ddl-item-hover-bg) !important;
        border-color: var(--pa-chrome-button-active-border) !important;
    }

/* Keep Continue visually inside the same stack card. */
.pa-50059-entry .pa-50059-entry-submit {
    padding-bottom: .25rem !important;
}

    .pa-50059-entry .pa-50059-entry-submit input[type="submit"],
    .pa-50059-entry .pa-50059-entry-submit input[type="button"],
    .pa-50059-entry .pa-50059-entry-submit .button {
        min-width: 8rem;
        background: var(--pa-surface-tint-1) !important;
        border: 1px solid var(--pa-surface-tint-3) !important;
    }

/* Right table: disable sticky behavior on this page and force the body to
   paint immediately instead of waiting for a later reflow/postback. */
.pa-50059-entry .pa-unit-aside {
    position: static !important;
    top: auto !important;
    max-height: none !important;
}

.pa-50059-entry .pa-table-box,
.pa-50059-entry .pa-50059-boxt {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

    .pa-50059-entry .pa-table-box .table-container,
    .pa-50059-entry .pa-50059-boxt .table-container {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .pa-50059-entry .pa-table-box table,
    .pa-50059-entry .pa-table-box tbody,
    .pa-50059-entry .pa-table-box tr,
    .pa-50059-entry .pa-table-box td,
    .pa-50059-entry .pa-table-box th {
        visibility: visible !important;
        opacity: 1 !important;
    }

.pa-50059-entry .pa-table-pre {
    display: block !important;
    white-space: pre-line !important;
}






/* =========================================================
   Error card — independent control styling
   Visual target: same soft lifted feel as date card
   ========================================================= */

.pa-error-card {
    display: block;
    width: 50%;
    max-width: 100%;
    margin: 0;
}

.pa-error-card__body {
    background: #dbe3f0;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 16px 24px rgba(35,46,72,.10);
    padding: 0.9rem 1rem;
    color: #2f3a45;
    line-height: 1.35;
    min-height: 44px;
    display: flex;
    align-items: center;
}

    /* label normalization */
    .pa-error-card__body span,
    .pa-error-card__body label {
        display: block;
        width: 100%;
        margin: 0;
        color: inherit;
        font-weight: 500;
    }

/* optional stronger error tone without turning it red-boxy */
.pa-error-card.is-error .pa-error-card__body {
    border-color: rgba(179, 88, 88, .24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 16px 24px rgba(35,46,72,.10);
}

/* if banner area is tight, keeps card from crashing into neighbors */
.pa-tracs-banner .pa-error-card + * {
    margin-top: .5rem;
}



/* keep sliver attached to chrome on the right */
.pa-tracs-topbar {
    justify-content: flex-start !important;
}

.pa-tracs-banner {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.pa-tracs-banner-actions {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: stretch !important;
}

#TracsProjects_panLoggedInChromeBar,
[id$="_panLoggedInChromeBar"] {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: stretch !important;
}









/* =========================================================
   Legacy shell/card
   For old full-page content hosted inside new legacy master
   ========================================================= */

.pa-legacy-shell {
    padding: 1.5rem 1.75rem 2rem 1.75rem;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.pa-legacy-card {
    background: rgba(232, 242, 255, 0.74);
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 14px 28px rgba(0,0,0,.18);
    padding: 1.5rem 1.75rem;
    box-sizing: border-box;
    height: calc(100vh - 170px);
    max-height: calc(100vh - 170px);
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

    /* Legacy pages often bring old table/body defaults */
    .pa-legacy-card table {
        max-width: 100%;
    }

    .pa-legacy-card img {
        max-width: 100%;
        height: auto;
    }

    /* Optional: keep very old pages from hugging edges */
    .pa-legacy-card > :first-child {
        margin-top: 0;
    }

    .pa-legacy-card > :last-child {
        margin-bottom: 0;
    }








.pa-tracs-banner-row {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    width: 100%;
    margin-bottom: .75rem;
}

    .pa-tracs-banner-row > .pa-error-card {
        flex: 1 1 50%;
        min-width: 0;
        display: flex;
    }

        .pa-tracs-banner-row > .pa-error-card > .pa-error-card__body {
            width: 100%;
        }

    /* only the controls card should float right when it's the only one shown */
    .pa-tracs-banner-row > #paErrorControls:only-child {
        margin-left: auto;
        flex: 0 1 calc(50% - .5rem);
    }

    /* error card alone stays on the left */
    .pa-tracs-banner-row > #paErrorCard:only-child {
        margin-left: 0;
        flex: 0 1 calc(50% - .5rem);
    }



.pa-ddl.is-disabled .js-ddl-btn {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.pa-ddl.is-disabled .pa-ddl-menu {
    display: none !important;
}





.input.is-danger {
    border-color: #f14668;
    color: #f14668;
}



/* legacy pages: keep bottom margin when TRACS chrome is expanded */
.pa-tracs-shell:not(.pa-chrome-collapsed) .pa-legacy-card {
    height: calc(100vh - 235px) !important;
    max-height: calc(100vh - 235px) !important;
}












/* =========================================================
   LOGIN PAGE — center inside existing TRACS body area
   Do not redefine chrome height; inherit remaining space.
   ========================================================= */

.pa-legacy-shell.pa-login {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    box-sizing: border-box !important;
}

    .pa-legacy-shell.pa-login .pa-legacy-card {
        width: min(380px, 100%) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 1.5rem 1.75rem !important;
    }

    .pa-legacy-shell.pa-login h2 {
        margin-top: 0;
        margin-bottom: 1rem;
    }

    .pa-legacy-shell.pa-login .pa-form-field {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        margin-bottom: 0.9rem;
    }

        .pa-legacy-shell.pa-login .pa-form-field label {
            font-weight: 600;
            margin: 0;
        }

    .pa-legacy-shell.pa-login .pa-form-actions {
        margin-top: 0.5rem;
        margin-bottom: 1rem;
    }

    .pa-legacy-shell.pa-login input[type="text"],
    .pa-legacy-shell.pa-login input[type="password"] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .pa-legacy-shell.pa-login p {
        margin: 0;
    }

.pa-legacy-shell.pa-login {
    min-height: calc(100% - 44px) !important;
    height: calc(100% - 44px) !important;
}


















/* ===== dev592 placeholder page ===== */
.pa592-page {
    padding: 1.5rem;
}

.pa592-shell {
    max-width: 1600px;
}

.pa592-topbar,
.pa592-card {
    background: rgba(250, 250, 251, 0.94);
    border: 1px solid rgba(215, 221, 234, 0.9);
    border-radius: 22px;
    box-shadow: 0 12px 30px rgba(26, 43, 82, 0.12);
}

.pa592-topbar {
    padding: 1.25rem 1.25rem 1rem;
    margin-bottom: 1rem;
}

.pa592-topbar__main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pa592-kicker {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7892;
}

.pa592-title {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.1;
    color: #273246;
}

.pa592-subtitle {
    margin: 0.4rem 0 0;
    color: #627087;
}

.pa592-topbar__actions {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pa592-btn {
    min-width: 7.5rem;
    border-radius: 12px;
    font-weight: 600;
}

.pa592-context-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.pa592-stat {
    background: #eef3fb;
    border: 1px solid #d7ddea;
    border-radius: 16px;
    padding: 0.85rem 1rem;
}

.pa592-stat__label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #75829a;
}

.pa592-stat__value {
    display: block;
    color: #243145;
    font-weight: 700;
}

.pa592-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1rem;
    align-items: start;
}

.pa592-main,
.pa592-aside {
    min-width: 0;
}

.pa592-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pa592-card {
    padding: 1rem 1rem 1.1rem;
}

.pa592-card--sticky {
    position: sticky;
    top: 1rem;
}

.pa592-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.pa592-card__title {
    margin: 0;
    font-size: 1.05rem;
    color: #243145;
}

.pa592-card__desc {
    margin: 0.3rem 0 0;
    color: #6b7892;
    font-size: 0.92rem;
}

.pa592-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    background: #e8f0ff;
    color: #2f67d8;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.pa592-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
}

.pa592-form-grid--tight {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pa592-field {
    min-width: 0;
}

.pa592-field--wide {
    grid-column: 1 / -1;
}

.pa592-field label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6f7c94;
}

.pa592-placeholder,
.pa592-note-strip {
    min-height: 44px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    border: 1px solid #d7ddea;
    background: #eef3fb;
    color: #28354a;
    padding: 0.75rem 0.9rem;
}

.pa592-note-strip {
    background: #fff6de;
    border-color: #eedeb1;
    color: #67562f;
}

.pa592-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pa592-chip,
.pa592-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #eef3fb;
    border: 1px solid #d7ddea;
    padding: 0.35rem 0.65rem;
    font-size: 0.84rem;
    color: #34425a;
}

.pa592-segmented {
    display: inline-flex;
    gap: 0.3rem;
    padding: 0.25rem;
    background: #eef3fb;
    border: 1px solid #d7ddea;
    border-radius: 12px;
}

    .pa592-segmented button {
        border: 0;
        background: transparent;
        color: #5d6b84;
        font-weight: 600;
        padding: 0.45rem 0.8rem;
        border-radius: 9px;
        cursor: pointer;
    }

        .pa592-segmented button.is-active {
            background: #fff;
            color: #2f67d8;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        }

.pa592-inline-form {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 0.9rem;
}

.pa592-inline-form--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
}

.pa592-mini-field span {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6f7c94;
}

.pa592-table-wrap {
    border: 1px solid #d7ddea;
    border-radius: 16px;
    overflow: hidden;
}

.pa592-table {
    margin-bottom: 0;
    background: #fff;
}

    .pa592-table thead th {
        background: #f4f6fb;
        color: #5e6d85;
        font-size: 0.77rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-width: 0 0 1px;
    }

    .pa592-table td,
    .pa592-table th {
        vertical-align: middle;
    }

    .pa592-table td {
        color: #29364a;
    }

.pa592-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 1rem;
    align-items: start;
}

.pa592-mini-panel {
    border: 1px solid #d7ddea;
    border-radius: 16px;
    background: #eef3fb;
    overflow: hidden;
}

    .pa592-mini-panel h3 {
        margin: 0;
        padding: 0.85rem 1rem;
        border-bottom: 1px solid #d7ddea;
        color: #243145;
        font-size: 0.98rem;
    }

.pa592-mini-panel__body {
    padding: 1rem;
}

.pa592-radio-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    color: #34425a;
}

.pa592-row-2up {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.pa592-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.pa592-summary-box {
    background: #dff4ff;
    border: 1px solid #9fd8ee;
    border-radius: 14px;
    padding: 0.8rem;
}

    .pa592-summary-box span {
        display: block;
        margin-bottom: 0.3rem;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #4b617d;
    }

    .pa592-summary-box strong {
        display: block;
        font-size: 1.1rem;
        color: #1f3046;
    }

.pa592-divider {
    height: 1px;
    background: #d7ddea;
    margin: 1rem 0;
}

.pa592-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    color: #34425a;
}

.pa592-help-copy {
    color: #445167;
}

@media screen and (max-width: 1200px) {
    .pa592-layout,
    .pa592-split,
    .pa592-row-2up {
        grid-template-columns: 1fr;
    }

    .pa592-aside {
        order: -1;
    }

    .pa592-card--sticky {
        position: static;
    }
}

@media screen and (max-width: 980px) {
    .pa592-context-grid,
    .pa592-form-grid,
    .pa592-form-grid--tight,
    .pa592-inline-form,
    .pa592-inline-form--compact,
    .pa592-summary-grid {
        grid-template-columns: 1fr;
    }

    .pa592-topbar__main,
    .pa592-card__header {
        flex-direction: column;
    }

    .pa592-topbar__actions {
        justify-content: flex-start;
    }
}




/* dev592 v3 - append-only placeholder styles */

.dev592-page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
}

    .dev592-page .card {
        background: linear-gradient(180deg, #f9fbff 0%, #f5f7fb 100%);
        border: 1px solid #d9e0ec;
        border-radius: 18px;
        box-shadow: 0 10px 24px rgba(29, 49, 84, 0.08);
        overflow: hidden;
    }

.dev592-hero {
    padding: 1.25rem 1.25rem 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #eff5ff 0%, #f8fbff 55%, #eef3fb 100%);
}

.dev592-hero__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dev592-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #56708f;
    margin-bottom: 0.4rem;
}

.dev592-title {
    margin: 0;
    font-size: 1.65rem;
    line-height: 1.15;
    color: #24344b;
}

.dev592-subtitle {
    margin: 0.45rem 0 0;
    max-width: 760px;
    color: #607088;
}

.dev592-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.dev592-context-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.dev592-context-item {
    padding: 0.85rem 0.95rem;
    background: rgba(255,255,255,0.72);
    border: 1px solid #d8e2f0;
    border-radius: 14px;
}

.dev592-context-label,
.dev592-field span,
.dev592-summary-strip span,
.dev592-total-card span {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #68819d;
    margin-bottom: 0.3rem;
}

.dev592-context-value,
.dev592-field strong,
.dev592-summary-strip strong,
.dev592-total-card strong {
    color: #22334a;
    font-weight: 700;
}

.dev592-section {
    margin-bottom: 1rem;
}

.dev592-section__header {
    padding: 1rem 1.1rem 0.55rem;
    border-bottom: 1px solid #e5ebf3;
    background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(246,248,252,0.75) 100%);
}

    .dev592-section__header h2,
    .dev592-note h3 {
        margin: 0;
        font-size: 1.05rem;
        color: #27384f;
    }

    .dev592-section__header p,
    .dev592-note p {
        margin: 0.35rem 0 0;
        color: #697a90;
    }

.dev592-section__body,
.dev592-note {
    padding: 1rem 1.1rem 1.1rem;
}

.dev592-dropzone {
    border: 2px dashed #cad5e5;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    padding: 1rem;
}

.dev592-dropzone--compact {
    padding-bottom: 0.8rem;
}

.dev592-dropzone__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #45617f;
    margin-bottom: 0.85rem;
}

.dev592-form-preview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.dev592-field,
.dev592-total-card {
    padding: 0.9rem 0.95rem;
    border-radius: 14px;
    border: 1px solid #dce4ef;
    background: #f8fbff;
}

.dev592-table-shell {
    border: 1px solid #dce4ef;
    border-radius: 14px;
    overflow: hidden;
}

.dev592-table-shell__head,
.dev592-table-shell__row {
    display: grid;
    grid-template-columns: 2fr 1.3fr 1.2fr 0.7fr;
    gap: 0.75rem;
    padding: 0.8rem 0.9rem;
}

.dev592-table-shell__head {
    background: #edf3fb;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #5c7390;
}

.dev592-table-shell__row {
    background: #ffffff;
    border-top: 1px solid #e8edf5;
    color: #31445e;
}

.dev592-summary-strip,
.dev592-total-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

    .dev592-summary-strip > div {
        padding: 0.9rem 0.95rem;
        border-radius: 14px;
        background: #eef5ff;
        border: 1px solid #d6e3f6;
    }

.dev592-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.dev592-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    background: #eef3fb;
    border: 1px solid #d8e1ee;
    color: #4a607d;
    font-weight: 600;
}

.dev592-total-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dev592-total-card.is-accent {
    background: linear-gradient(180deg, #e8f0ff 0%, #dce9ff 100%);
    border-color: #bed4ff;
}

@media (max-width: 980px) {
    .dev592-hero__top {
        flex-direction: column;
    }

    .dev592-actions {
        justify-content: flex-start;
    }

    .dev592-context-grid,
    .dev592-form-preview,
    .dev592-summary-strip,
    .dev592-total-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .dev592-page {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .dev592-context-grid,
    .dev592-form-preview,
    .dev592-summary-strip,
    .dev592-total-grid,
    .dev592-table-shell__head,
    .dev592-table-shell__row {
        grid-template-columns: 1fr;
    }
}






















.section-header {
    margin-bottom: 8px;
}

    .section-header h3 {
        font-size: 15px;
        font-weight: 600;
        color: #2c3e50;
    }



.dev592-section {
    background: #f8f9fb;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 18px;
    border: 1px solid #dfe5ef;
}

.form-row {
    margin-bottom: 10px;
}


.summary-block {
    background: #eef3fb;
    border: 1px solid #d7e2f2;
    border-radius: 10px;
    padding: 14px;
    margin-top: 12px;
}



.action-row {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}









/* tighten grid look */
#gvFam {
    border-collapse: collapse;
    font-size: 12px;
}

    #gvFam th {
        background: #eef3fb;
        color: #2c3e50;
        font-weight: 600;
        padding: 6px 8px;
        border-bottom: 1px solid #d6e0ef;
    }

    #gvFam td {
        padding: 4px 6px;
        border-bottom: 1px solid #e5eaf3;
    }

    #gvFam tr:hover {
        background: #f5f8ff;
    }

    /* kill rigid widths */
    #gvFam td input,
    #gvFam td select {
        width: auto !important;
        min-width: 50px;
    }










/* =============================================================================
   voucher-workbench-sample.css
   Voucher Workbench page styles.
   Depends on: paulhus-app.css tokens (--pa-navy, --pa-green, --pa-border etc.)
   ============================================================================= */


/* -----------------------------------------------------------------------------
   Page shell
   ----------------------------------------------------------------------------- */
.pa-vwb-page {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pa-vwb-shell {
    display: flex;
    flex-direction: column;
}

.pa-vwb-card {
    background: #fff;
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}


/* -----------------------------------------------------------------------------
   Topbar — period carousel + action buttons
   ----------------------------------------------------------------------------- */
.pa-vwb-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--pa-border);
    background: #fff;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Period carousel — show max 4 slots (3 months + History); overflow slots are
   hidden by JS (display:none), so the row itself needn't clip. */
.pa-vwb-periods {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.pa-vwb-period {
    padding: 5px 16px;
    font-size: 0.82rem;
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
    background: #fff;
    cursor: pointer;
    color: var(--pa-muted);
    white-space: nowrap;
    line-height: 1.5;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    text-align: center;
}

    .pa-vwb-period:hover {
        background: #f5f5f8;
        color: var(--pa-text);
    }

    /* Selected pill — the ONLY one that gets the filled highlight. */
    .pa-vwb-period.is-active {
        background: #EEEDFE;
        border-color: #AFA9EC;
        color: #3C3489;
        font-weight: 600;
    }

    /* Current month, when it is NOT the selected pill — a subtle tint/outline
       so users can still spot "now", without competing with the active pill. */
    .pa-vwb-period.is-current:not(.is-active) {
        border-color: #C9C5F2;
        color: #3C3489;
    }

    .pa-vwb-period.is-run {
        background: rgba(127, 191, 42, 0.1);
        border-color: var(--pa-green);
        color: #3a5c0a;
    }

    /* Run + waiting in the transmit queue — amber, between run and sent. */
    .pa-vwb-period.is-queued {
        background: #fdf3e0;
        border-color: #e0b45c;
        color: #7a5510;
    }

    .pa-vwb-period.is-transmitted {
        background: #e2f4ec;
        border-color: #6dc295;
        color: #0e4d2b;
    }

/* History dropdown — slot 4 */
.pa-vwb-history-ddl {
    position: relative;
    flex-shrink: 0;
}

.pa-vwb-history-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 150px;
    background: #fff;
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow);
    z-index: 50;
    padding: 4px 0;
}

    .pa-vwb-history-menu.is-open {
        display: block;
    }

    .pa-vwb-history-menu button {
        display: block;
        width: 100%;
        text-align: left;
        padding: 5px 12px;
        font-size: 0.8rem;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--pa-text);
    }

        .pa-vwb-history-menu button:hover {
            background: #f5f5f8;
        }

/* Action buttons group */
.pa-vwb-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    flex-wrap: wrap;
}


/* -----------------------------------------------------------------------------
   Main tab bar — "Current & Delinquent" / "Due & Active"
   ----------------------------------------------------------------------------- */
.pa-vwb-tabs-bar {
    display: flex;
    border-bottom: 1px solid var(--pa-border);
    background: #fff;
    padding: 0 12px;
}

.pa-vwb-tab {
    position: relative;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    color: var(--pa-muted);
    white-space: nowrap;
    transition: color 0.12s, border-color 0.12s;
    margin-bottom: -1px;
}

    .pa-vwb-tab:hover {
        color: var(--pa-text);
    }

    .pa-vwb-tab.is-active {
        color: #3C3489;
        border-bottom-color: #534AB7;
    }

/* Missing signature count badge on tab */
.pa-vwb-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e53e3e;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    vertical-align: middle;
}

/* BB-17 — "needs re-run" banner on the voucher topbar. Amber = the run is stale.
   Red (.is-transmitted) = it was already transmitted, so HUD holds the older
   numbers and this is a correction, not just a re-run. Full-width row under the
   action buttons; it must not push the buttons around, hence its own line. */
.pa-vwb-rerun {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin-top: 6px;
    padding: 5px 9px;
    border-left: 3px solid #b7791f;
    border-radius: 3px;
    background: #fffaf0;
    color: #744210;
    font-size: 0.78rem;
    line-height: 1.35;
}

.pa-vwb-rerun.is-transmitted {
    border-left-color: #c53030;
    background: #fff5f5;
    color: #822727;
}

.pa-vwb-rerun-note {
    flex: 1 1 100%;
    opacity: 0.85;
    font-size: 0.74rem;
}


/* -----------------------------------------------------------------------------
   Tab panels
   ----------------------------------------------------------------------------- */
.pa-vwb-tab-panel {
    display: block;
}


/* -----------------------------------------------------------------------------
   Column header row
   ----------------------------------------------------------------------------- */
.pa-vwb-head {
    background: #f5f5f8;
    border-bottom: 1px solid var(--pa-border);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pa-muted);
}


/* -----------------------------------------------------------------------------
   Grid rows — shared column layout
   ----------------------------------------------------------------------------- */
.pa-vwb-cols {
    display: grid;
    grid-template-columns: 52px /* unit   */
    140px /* last   */
    100px /* first  */
    160px /* dates  */
    52px /* type   */
    50px /* tr     */
    60px /* hap    */
    60px /* cr     */
    50px /* ua     */
    50px /* hold   */
    1fr; /* actions */
    gap: 0;
    align-items: center;
}

    .pa-vwb-cols .cell {
        padding: 5px 6px;
        font-size: 0.82rem;
        color: var(--pa-text);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

        .pa-vwb-cols .cell.unit {
            font-weight: 600;
            font-size: 0.8rem;
        }

.pa-vwb-row {
    border-bottom: 1px solid var(--pa-border);
    transition: background 0.1s;
}

    .pa-vwb-row:hover {
        background: #f9f9fb;
    }

    .pa-vwb-row.compact .cell {
        padding: 3px 6px;
    }

    /* Row state colors */
    .pa-vwb-row.row-on-hold {
        background: #fffbeb;
    }

        .pa-vwb-row.row-on-hold:hover {
            background: #fef9e0;
        }

    .pa-vwb-row.row-missing-sig {
        background: #fff7f7;
    }

        .pa-vwb-row.row-missing-sig:hover {
            background: #fff0f0;
        }

    /* Delinquent row — yellow highlight, matches legacy */
    .pa-vwb-row.row-term-flag {
        background: #fffde7;
    }

        .pa-vwb-row.row-term-flag:hover {
            background: #fff9c4;
        }


/* -----------------------------------------------------------------------------
   Band titles
   ----------------------------------------------------------------------------- */
.pa-vwb-band {
    display: flex;
    flex-direction: column;
}

.pa-vwb-band-title {
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-top: 1px solid var(--pa-border);
    border-bottom: 1px solid var(--pa-border);
    color: var(--pa-muted);
    background: #f9f9fb;
}

    .pa-vwb-band-title.band-current {
        color: #3C3489;
        background: #EEEDFE;
        border-color: #d0cdee;
    }

    .pa-vwb-band-title.band-delinquent {
        color: #7a3a00;
        background: #fff3e0;
        border-color: #f5c97a;
    }

    .pa-vwb-band-title.band-due {
        color: #27500A;
        background: rgba(127, 191, 42, 0.1);
        border-color: #c5dd97;
    }

.pa-vwb-band-body {
    display: flex;
    flex-direction: column;
}


/* -----------------------------------------------------------------------------
   Totals bar
   ----------------------------------------------------------------------------- */
.pa-vwb-totals {
    display: flex;
    gap: 16px;
    padding: 6px 12px;
    border-top: 1px solid var(--pa-border);
    background: #f9f9fb;
    font-size: 0.8rem;
    color: var(--pa-muted);
    flex-wrap: wrap;
}

    .pa-vwb-totals strong {
        color: var(--pa-text);
        font-weight: 600;
    }


/* -----------------------------------------------------------------------------
   Mini-pane tabs — Reg lines / Adjustments / Special claims / New rent
   ----------------------------------------------------------------------------- */
.pa-vwb-mini-bar {
    display: flex;
    border-top: 1px solid var(--pa-border);
    border-bottom: 1px solid var(--pa-border);
    background: #f9f9fb;
    padding: 0 8px;
    overflow-x: auto;
    gap: 0;
}

.pa-vwb-mini-tab {
    padding: 5px 12px;
    font-size: 0.78rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    color: var(--pa-muted);
    white-space: nowrap;
    transition: color 0.12s, border-color 0.12s;
    margin-bottom: -1px;
}

    .pa-vwb-mini-tab:hover {
        color: var(--pa-text);
    }

    .pa-vwb-mini-tab.is-active {
        color: #3C3489;
        border-bottom-color: #534AB7;
        font-weight: 500;
    }

.pa-vwb-mini-pane {
    padding: 8px 12px;
}

.pa-vwb-mini-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--pa-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pa-vwb-mini-table {
    font-size: 0.8rem !important;
}

    .pa-vwb-mini-table th {
        font-size: 0.72rem !important;
        color: var(--pa-muted);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }


/* -----------------------------------------------------------------------------
   Actions column links
   ----------------------------------------------------------------------------- */
.pa-vwb-row-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.pa-act-link {
    font-size: 0.75rem;
    color: var(--pa-blue);
    cursor: pointer;
    text-decoration: none;
    padding: 1px 0;
}

    .pa-act-link:hover {
        text-decoration: underline;
    }


/* -----------------------------------------------------------------------------
   Rent Workbox — draggable floating panel
   ----------------------------------------------------------------------------- */
.pa-vwb-workbox {
    position: fixed;
    top: 120px;
    right: 24px;
    width: 680px;
    max-width: calc(100vw - 48px);
    background: #fff;
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow);
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pa-vwb-workbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--pa-navy);
    cursor: grab;
    user-select: none;
}

    .pa-vwb-workbox-header:active {
        cursor: grabbing;
    }

.pa-vwb-workbox-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
}

.pa-vwb-workbox-tabs {
    display: flex;
    border-bottom: 1px solid var(--pa-border);
    background: #f9f9fb;
    padding: 0 8px;
}

.pa-vwb-workbox-tab {
    padding: 6px 12px;
    font-size: 0.8rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    color: var(--pa-muted);
    white-space: nowrap;
    transition: color 0.12s, border-color 0.12s;
    margin-bottom: -1px;
}

    .pa-vwb-workbox-tab:hover {
        color: var(--pa-text);
    }

    .pa-vwb-workbox-tab.is-active {
        color: #3C3489;
        border-bottom-color: #534AB7;
        font-weight: 500;
    }

.pa-vwb-workbox-datebar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--pa-border);
    background: #fafafa;
}

.pa-vwb-workbox-date-label {
    font-size: 0.78rem;
    color: var(--pa-muted);
    white-space: nowrap;
}

.pa-vwb-workbox-date-input {
    width: 110px;
    padding: 3px 8px;
    font-size: 0.8rem;
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
}

    .pa-vwb-workbox-date-input:focus {
        outline: none;
        border-color: #534AB7;
        box-shadow: 0 0 0 2px rgba(83, 74, 183, 0.15);
    }

.pa-vwb-workbox-pane {
    overflow-y: auto;
    max-height: 380px;
    padding: 0 12px 10px;
}

.pa-vwb-workbox-pane-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--pa-muted);
    padding: 8px 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pa-rr-table {
    font-size: 0.78rem !important;
}

    .pa-rr-table th {
        font-size: 0.7rem !important;
        white-space: nowrap;
    }

    .pa-rr-table td {
        white-space: nowrap;
    }


/* -----------------------------------------------------------------------------
   Toggle buttons (nav + chrome) — if not already in _dev.css
   ----------------------------------------------------------------------------- */
.pa-toggle-btn {
    width: 28px;
    height: 28px;
    background: none;
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

    .pa-toggle-btn:hover {
        background: #f5f5f8;
    }


/* -----------------------------------------------------------------------------
   Chrome collapsed / open states
   ----------------------------------------------------------------------------- */
.pa-chrome-collapsed .pa-tracs-chrome {
    display: none;
}

.pa-nav-collapsed #NavMenu .menu,
.pa-nav-collapsed #NavMenu .menu-label {
    display: none;
}

.pa-nav-collapsed #NavMenu {
    width: 48px;
    min-width: 48px;
    padding: 0.5rem;
}

/* -----------------------------------------------------------------------------
   Banner title card — hide when chrome is collapsed
   Direct children of .pa-tracs-banner are TracsBanner placeholder cards;
   error cards inside .pa-tracs-banner-row are grandchildren and stay visible.
   ----------------------------------------------------------------------------- */
.pa-chrome-collapsed .pa-tracs-banner > .pa-error-card {
    display: none;
}

/* ISS-017: collapsing the top chrome must take the WHOLE banner region with it.
   The search omnibox is a direct child of .pa-tracs-banner and was being left
   behind (collapse looked half-done); hide it with the rest of the chrome. */
.pa-chrome-collapsed .pa-tracs-banner > .pa-omni {
    display: none;
}

/* -----------------------------------------------------------------------------
   Chrome toggle buttons — sliver pull-tab style (matches pa-dashboard-sliver)
   ----------------------------------------------------------------------------- */

/* Kill the arrow indicator — slivers have no icon */
.pa-chrome-toggle::before {
    display: none !important;
}

/* Sliver appearance */
.pa-chrome-toggle {
    width:        7px !important;
    height:       auto;
    min-height:   36px;
    align-self:   stretch;
    border-radius: 999px;
    background:   rgba(255,255,255,0.15);
    border:       1px solid rgba(255,255,255,0.25);
    box-shadow:   0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.20);
    cursor:       pointer;
    padding:      0;
    flex-shrink:  0;
    transition:   transform 140ms cubic-bezier(.2,.7,.3,1),
                  background 120ms ease,
                  border-color 120ms ease,
                  box-shadow 140ms ease;
}

    .pa-chrome-toggle:hover {
        background:   rgba(255,255,255,0.32);
        border-color: #c4db9c;
        transform:    scaleX(1.3) scaleY(1.06);
    }

    .pa-chrome-toggle:active {
        transform:  scaleX(1.1);
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.25), 0 0 3px rgba(196,219,156,0.45);
    }

/* Toggle row (collapsed) — center the expand sliver vertically in the row */
.pa-chrome-toggle-row {
    align-items: center;
    min-height:  40px;
    padding:     4px 0;
}

/* Topbar needs relative so the collapse tab can be absolute inside it */
.pa-tracs-topbar {
    position: relative;
}

/* Collapse button — horizontal pull tab pinned to bottom-center of banner area */
.pa-tracs-banner-actions {
    position:  absolute;
    bottom:    0;
    left:      50%;
    transform: translateX(-50%) translateY(50%);
    padding:   0;
    z-index:   10;
}

/* Override the vertical-sliver defaults — collapse tab is a horizontal pill */
.pa-tracs-banner-actions .pa-chrome-toggle {
    width:      130px !important;
    height:     11px !important;
    min-height: 0    !important;
    align-self: auto;
}

    /* Hover grows vertically (pill is horizontal now) */
    .pa-tracs-banner-actions .pa-chrome-toggle:hover {
        transform: scaleX(1.1) scaleY(1.4);
    }

    .pa-tracs-banner-actions .pa-chrome-toggle:active {
        transform: scaleX(1.04) scaleY(1.2);
    }

/* Expand button (toggle row, visible when chrome is collapsed) —
   same horizontal pill as the collapse tab                        */
.pa-chrome-toggle-row .pa-chrome-toggle {
    width:      130px !important;
    height:     11px !important;
    min-height: 0    !important;
    align-self: auto;
}

    .pa-chrome-toggle-row .pa-chrome-toggle:hover {
        transform: scaleX(1.1) scaleY(1.4);
    }

    .pa-chrome-toggle-row .pa-chrome-toggle:active {
        transform:  scaleX(1.04) scaleY(1.2);
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.25), 0 0 3px rgba(196,219,156,0.45);
    }

/* --------------------------------------------------------
   Left nav toggle — vertical sliver pinned to right edge
   -------------------------------------------------------- */

/* Kill the arrow indicator */
.pa-nav-toggle::before {
    display: none !important;
}

/* Anchor the nav panel; allow the sliver to hang outside the right edge.
   Several earlier blocks set overflow:hidden !important — must beat them. */
#NavMenu {
    position: relative !important;
    overflow: visible !important;
}

/* Collapsed state still clips the nav content correctly (higher specificity wins) */
.pa-shell.pa-nav-collapsed #NavMenu {
    overflow: hidden !important;
}

/* nav-fixed has position:sticky from an earlier block — that makes IT the
   containing block for the absolute wrap, not #NavMenu. Kill it so the
   absolute wrap climbs all the way up to #NavMenu (position:relative). */
#NavMenu .nav-fixed,
.column.is-narrow #NavMenu .nav-fixed {
    position: static !important;
}

/* Lift the toggle wrap out of flow; pin to right edge, centered vertically.
   translateX(calc(50% - 10px)) pulls it back to sit on the dark nav
   background, mirroring the same 10px offset from the seam.                */
.pa-nav-toggle-wrap {
    position:  absolute;
    right:     0;
    top:       50%;
    transform: translateY(-50%) translateX(calc(50% - 10px));
    padding:   0;
    z-index:   5;
    display:   flex;
    justify-content: flex-end;
}

/* Collapsed: #NavMenu has overflow:hidden !important (keeps nav items clipped),
   so pull the sliver back fully inside the narrow nav so it isn't clipped.   */
.pa-shell.pa-nav-collapsed .pa-nav-toggle-wrap {
    justify-content: flex-end;
    padding:         0;
    top:             50%;
    transform:       translateY(-50%) translateX(0);
}

/* The nav toggle button — vertical pill, white-on-dark glass (same as chrome toggles) */
.pa-nav-toggle {
    width:         11px  !important;
    height:        130px !important;
    min-width:     0;
    min-height:    0;
    border-radius: 999px;
    background:    rgba(255,255,255,0.15);
    border:        1px solid rgba(255,255,255,0.25);
    box-shadow:    0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.20);
    cursor:        pointer;
    padding:       0;
    transition:    transform 140ms cubic-bezier(.2,.7,.3,1),
                   background 120ms ease,
                   border-color 120ms ease,
                   box-shadow 140ms ease;
}

    .pa-nav-toggle:hover {
        background:   rgba(255,255,255,0.32);
        border-color: #c4db9c;
        transform:    scaleY(1.06) scaleX(1.3);
    }

    .pa-nav-toggle:active {
        transform:  scaleY(1.02) scaleX(1.1);
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.25), 0 0 3px rgba(196,219,156,0.45);
    }

/* Guard: now that #NavMenu is overflow:visible (so the sliver can straddle
   the seam), prevent nav text / content from bleeding into the content area */
#NavMenu .nav-scroll,
#NavMenu .nav-fixed {
    overflow-x: hidden;
}

/* =============================================================================
   ISS-021 (2026-07-23, Talos) — soften the shared warning-yellow another notch.
   Nyra: "it still reads intense." Bulma's `.notification.is-warning.is-light`
   fills at full warning saturation @ 90% lightness. Desaturate + lift lightness
   so the whole one-banner language (work-queue banner, View-As bar, 50059
   business-rule banners) calms down together — one override, one house tone.
   ============================================================================= */
.notification.is-warning.is-light {
    --bulma-notification-s: 76%;
    --bulma-notification-background-l: 94%;
}

/* =============================================================================
   PAGE TITLE BAR (2026-07-31, backlog #28-adjacent — Nyra's ask)
   "i wanna have all the pages like this" — the soft lifted card the two 50059
   pages were using, promoted to every page via TracsProjectPage.master.

   Its own component ON PURPOSE. MAT10/MAT10Hotma were borrowing `.pa-error-card`
   for this, which is a lie in a stylesheet: warnings and errors now bubble
   through Bulma notifications and a separate error box, so a title dressed as an
   error card would drift with error styling it has no business tracking.
   `.pa-error-card` keeps its real job (the master's ErrorControls region).

   Visual target is unchanged — same soft lifted feel as the date card — because
   the current look IS the approved one.
   ============================================================================= */

.pa-page-title {
    display: block;
    width: 50%;
    max-width: 100%;
    margin: 0;
}

.pa-page-title__body {
    background: #dbe3f0;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 16px 24px rgba(35,46,72,.10);
    padding: 0.9rem 1rem;
    color: #2f3a45;
    line-height: 1.35;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.pa-page-title__main {
    font-size: 1.05em;
    font-weight: 700;
    color: #1d3e73;
}

.pa-page-title__sub {
    font-size: .82em;
    color: #5a6e90;
}

    /* Subtitles carry markup on several pages (ResolveUrl links). Keep inherited
       colour so an inline style="color:inherit" isn't needed per link. */
    .pa-page-title__sub a {
        color: inherit;
        text-decoration: underline;
    }

    /* A subtitle placeholder a page never filled must not leave a gap. */
    .pa-page-title__sub:empty {
        display: none;
    }

/* The card is wide-ish on desktop but must not be a 50% sliver on a phone. */
@media (max-width: 900px) {
    .pa-page-title {
        width: 100%;
    }
}

/* =============================================================================
   VIEW-AS BAR (backlog #7, 2026-07-31)
   Nyra: "The persistent 'viewing as' bar overlaps and blocks clicking the picker
   dropdown. Needs close/minimize." Two distinct problems:

   1. STACKING. The picker menu sat at z-index 1000; the banners it was losing to are
      inside #paTopFloat, which is position:FIXED at z-index 8500 (ISS-020 floated them
      over the page instead of leaving them in flow). Raised both .pa-ddl-menu rules to
      8600 — an OPEN dropdown legitimately outranks a passive banner — still below the
      99999 overlay. Fixed at the dropdown, not by lowering the banner stack, because
      the menu should beat page banners generally rather than just this one.
   2. FOOTPRINT. The bar can now collapse to a slim pill.

   Exit preview stays visible in BOTH states. Collapsing must never hide the way
   out of a preview — that is the exact failure VA-3's banner exists to prevent.
   ============================================================================= */

.pa-viewas {
    position: relative;   /* so the minimize button can be positioned within the bar */
}

.pa-viewas-toggle {
    float: right;
    margin-left: 12px;
    border: 1px solid rgba(184,134,11,.45);
    background: rgba(255,255,255,.55);
    color: #7a5c08;
    border-radius: 6px;
    padding: 0 8px;
    font-size: .95em;
    line-height: 1.6;
    cursor: pointer;
    transition: transform .15s ease;
}
.pa-viewas-toggle:hover { background: #fff; }

/* Collapsed: swap the sentence for the pill, and rotate the caret. */
.pa-viewas .pa-viewas-mini { display: none; }
.pa-viewas.is-mini { padding: 5px 16px; }
.pa-viewas.is-mini .pa-viewas-full { display: none; }
.pa-viewas.is-mini .pa-viewas-mini { display: inline; }
.pa-viewas.is-mini .pa-viewas-toggle { transform: rotate(180deg); }

/* Login "trouble signing in" help (Nyra 7/31). Plain text on purpose — no mailto:, no
   clipboard copy, no mail-client launcher: a signed-out user on a shared or locked-down
   machine gets an error or somebody else's Outlook from those. Readable + retypeable wins.
   `user-select:all` so one click still selects the whole address for copying by hand. */
.pa-login-help { font-size:.9em; color:#4c5a72; }
.pa-login-contact { font-weight:700; color:#1d3e73; white-space:nowrap; user-select:all; }