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: 1000;
    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: 1000;
        display: none;
    }

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

    /* 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;
    display: flex;
    overflow: hidden;
    position: relative;
}

.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-block;
    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;
}










































/* ===== 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 {
    z-index: 2100 !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 {
    z-index: 2100 !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;
    }