.az-content-body {
    min-height: 600px !important;
}

@media (min-width: 992px) {
    .az-content {
        padding: 15px 0;
    }
}

.ui-autocomplete {
    z-index: 1200 !important
}

.az-logo {
    font-size: 32px;
}

    .az-logo img {
        height: 50px;
    }

.selected-project-label{
    margin-bottom: 0px;
}

.selected-project{
    margin-top: -5px;
    margin-bottom: 0px;
    font-size: 15px;
    font-weight: 700;
}

.custom-dropdown-icon{
    font-size: 22px;
    color: #232424;
    margin-left: -10px;
}

.spinner-border-sm {
    width: 14px;
    height: 14px;
    border-width: 0.2em;
}

/* Target the modal container */
.modal {
    margin-top: 50px !important;
}

/* Scrollable modals: cap height to keep footer visible under the 50px top margin offset */
.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 60px);
}


.ms-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    padding: 5px 8px;

    background-color: white;
    color: #333;

    border: 1px solid #d6d6d6;
    border-radius: 6px;

    text-decoration: none;
    font-size: 13px;
    font-weight: 600;

    transition: all 0.2s ease;
}

.ms-login-btn:hover {
    background-color: #f5f5f5;
    color: #000;
}

.ms-icon {
    width: 18px;
    height: 18px;
}

.project-title {
    width: unset !important;
    background-color: #035E53;
    border-radius: 15px;
    padding: 10px 15px 5px 15px;
    color: white;
    font-weight: normal;
}

    .project-title:hover {
        color: white;
    }

.eclipse {
    overflow: hidden;
}

.az-dashboard-one-title {
    margin-bottom: 15px;
}

.az-content-title {
    font-size: 22px;
    font-weight: 700;
    color: #1c273c;
    margin-bottom: 3px;
}

.setting-title {
    font-size: 15px;
    font-weight: 700;
    color: #036358;
    margin-bottom: 15px;
}

.az-header-menu-icon span {
    color: #5d5e5f !important;
}

.az-profile-menu {
    margin-left: 10px;
}

.az-content-breadcrumb {
    font-size: 12px;
    color: #5d5e5f;
    text-transform: initial;
}

@media (min-width: 992px) {
    .az-content-header-right {
        display: flex;
        align-items: center;
    }
}

.az-content-header-right {
    display: block;
    text-align: right;
}

    .az-content-header-right .btn:first-of-type, .az-content-header-right .sp-container button:first-of-type, .sp-container .az-content-header-right button:first-of-type {
        margin-left: 0;
    }

.page-item.disabled .page-link {
    color: #5d5e5f;
}

.badge{
    border-radius: 5px;
}

.badge-pp{
    width:30px;
}

.badge-status {
    width: 50px;
}

.badge-success {
    background-color: #2B7E01;
}

.badge-info {
    background-color: #128091;
}

.badge-secondary {
    background-color: #667593;
}

.form-control {
    height: 31px;
    border-radius: 0;
    border-radius: 5px;
}


textarea {
    resize:both;
}

.check-box {
    /*box-sizing: border-box;*/
    padding: 0;
    margin: 0;
    width: initial !important;
}

.checkbox-large {
    width: 20px !important;
    margin:auto;
}

.form-group {
    margin-bottom: 0.5rem;
}

.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    height: 30px;
    border-radius: 5px;
}

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 30px;
    }

.e-reportviewer-viewer .e-native-toolbar {
    z-index: 500 !important; /* or lower, depending on your site */
}

.nav {
    z-index: 11000 !important;
}

.az-menu-sub {
    border-radius: 5px;
    z-index: 11000!important;
}

.dropdown-menu {
    border-radius: 5px;
}

.row {
    margin-left: 0px;
    margin-right: 0px;
}

.dataTables_length .bs-select label {
    color: #036358 !important;
}

.table td {
    padding: 9px 10px;
    line-height: 1;
}

.table thead th, .table thead td {
    color: #036358;
    padding-left: 10px;
    font-size: 12px;
}

table.dataTable thead > tr > th.sorting::before, table.dataTable thead > tr > th.sorting::after {
    color: #036358;
    opacity: .2;
    line-height: 11px;
    right: 0px;
}

.btn {
    font-size: 13px;
    min-height: 29px;
    border-radius: 5px;
    line-height: 13px;
    padding: 9px 15px;
}

.btn-sm {
  font-size: 11px;
  min-height: 20px;
  border-radius: 5px;
  line-height: 11px;
  padding: 5px 8px;
}

.alert {
    border-radius: 5px;
}

.select2-selection {
    border-radius: 5px;
}

.btn-primary:not(:disabled):not(.disabled):active {
    background-color: #0cb09d;
    border-color: #0cb09d;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #0cb09d;
}

/* Restore correct text/background on outline buttons when focused but not hovered (post-click resting state) */
.btn-outline-primary:not(:hover):focus,
.btn-outline-primary:not(:hover):focus-visible {
    color: #035E53;
    background-color: transparent;
}
a.btn-outline-primary:visited:not(:hover) {
    color: #035E53;
}
.btn-outline-secondary:not(:hover):focus,
.btn-outline-secondary:not(:hover):focus-visible {
    color: #7987a1;
    background-color: transparent;
}
a.btn-outline-secondary:visited:not(:hover) {
    color: #7987a1;
}



.fa-lg {
    font-size: 1.1em;
    line-height: .75em;
    vertical-align: -0.0667em
}

.text-danger {
    color: #D42537 !important;
}

.text-info {
    color: #117888 !important;
}

.text-muted {
    color: #5d5e5f !important;
}


.bg-success-soft {
    color: #1f5c01 !important;
    background-color: #d8efcc !important;
    border-color: #c8e9b8 !important;
}

.bg-danger-soft {
    color: #721c24 !important;
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
}

.bg-warning-soft {
    color: #856404 !important;
    background-color: #fbf3db !important;
    border-color: #ffeeba !important;
}

.bg-info-soft {
    color: #232424 !important;
    background-color: #d4f5fa !important;
    border-color: #7dc5d0 !important;
}

.bg-light-blue {
    background-color: #ecf6fc !important;
}

.bg-light-green {
    background-color: #edfbf3 !important;
}

.bg-gray-100 {
    border-radius: 5px;
}

.bg-theme-light {
    background-color: #ebf6f6 !important;
}

.bg-theme-soft {
    background-color: #e0efef !important;
}

.bg-theme-dim {
    background-color: #d4e9e8 !important;
}

.card {
    border-radius: 5px;
}

.table-responsive {
    border-radius: 5px;
}

.panel-group {
    background-color: whitesmoke;
}

.panel-body {
    background-color: white;
}

/* Change Request / Cost Simulation commodity impact summary (Views/ChangeRequest/Edit.cshtml).
   The Removed / Changed / Added headings and the two Total Impact rows are five separate
   containers, so they are laid out on a shared column grid to make Cost and Carbon Cost
   stack vertically down the block. Widths are in rem (not em) deliberately: the headings
   and the total rows render at different font sizes and must still share the same columns.
   min-width rather than width so an unusually long value grows its own column instead of
   overflowing into its neighbour. */
.crf-impact-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.crf-impact-label {
    min-width: 22rem;
}

.crf-impact-cost {
    min-width: 13rem;
    text-align: right;
    white-space: nowrap;
}

.crf-impact-carbon {
    min-width: 14rem;
    text-align: right;
    white-space: nowrap;
}

/* Below the lg breakpoint there is not enough width for the grid — fall back to
   natural inline flow rather than wrapping every figure onto its own line. */
@media (max-width: 991.98px) {
    .crf-impact-label,
    .crf-impact-cost,
    .crf-impact-carbon {
        min-width: 0;
        text-align: left;
    }
}

.sticky-save-bar {
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 100;
    border-top: 1px solid #dee2e6;
    padding: 10px 0;
    margin-top: 16px;
}

.next-step-bar {
    background-color: #e8f4fd;
    border: 1px solid #bee3f8;
}

.next-step-bar.next-step-waiting {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

.cr-timeline {
    position: relative;
    padding-left: 24px;
}

.cr-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: #dee2e6;
}

.cr-timeline-item {
    position: relative;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
}

.cr-timeline-dot {
    position: absolute;
    left: -21px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #dee2e6;
}

.cr-timeline-content {
    flex: 1;
}

.cr-timeline-dot.badge-primary   { background-color: #007bff; }
.cr-timeline-dot.badge-success   { background-color: #28a745; }
.cr-timeline-dot.badge-danger    { background-color: #dc3545; }
.cr-timeline-dot.badge-warning   { background-color: #ffc107; }
.cr-timeline-dot.badge-secondary { background-color: #6c757d; }
.cr-timeline-dot.badge-info      { background-color: #17a2b8; }
.cr-timeline-dot.badge-dark      { background-color: #343a40; }

.help-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #035E53;
    color: #fff !important;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: center;
    line-height: 44px;
    font-size: 22px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 8px rgba(0,0,0,0.28);
    transition: background-color 0.2s;
}

.help-fab:hover,
.help-fab:focus {
    background-color: #0cb09d;
    outline: none;
}

/* ============================ Dashboard ============================ */

/* Change-request / favourites lists. They sit at the bottom of the dashboard
   and are allowed to grow; a generous cap keeps very long lists from running
   away, falling back to an internal scroll with a sticky header. */
.dash-scroll {
    max-height: 600px;
    overflow-y: auto;
}

.dash-scroll table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #fff;
}

/* Fixed-height chart area so the analytics grid stays uniform and compact. */
.dash-chart {
    position: relative;
    height: 160px;
    width: 100%;
}

/* #756 — expand affordance on a chart card. Added by dashboard.loader.js only to
   cards whose data was collapsed into an "All others" slice, so the class is
   applied at runtime rather than sitting in the card markup. */
.dash-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dash-expand {
    border: 0;
    background: transparent;
    padding: 0 2px;
    line-height: 1;
    color: #97a3b9;
    cursor: pointer;
}

    /* #813: brand palette swatch 1 (Blue), matching Dashboard.cs. */
    .dash-expand:hover,
    .dash-expand:focus {
        color: #4A6FA5;
    }

/* The expand modal sizes its canvas from the row count (~22px a bar), so the body
   is what scrolls once the list outgrows the viewport. */
.chart-modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

/* KPI stat tiles — icon centred on top, label + value centred beneath. */
.kpi-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 12px;
    height: 100%;
}

a.kpi-tile.kpi-link {
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

a.kpi-tile.kpi-link:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.kpi-tile .kpi-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    color: #fff;
    font-size: 18px;
}

.kpi-tile .kpi-icon.bg-teal { background-color: #17a2b8; }
.kpi-tile .kpi-icon.bg-indigo { background-color: #654788; }
.kpi-tile .kpi-icon.bg-primary { background-color: #0d6efd; }
.kpi-tile .kpi-icon.bg-warning { background-color: #f0ad4e; }
.kpi-tile .kpi-icon.bg-muted { background-color: #c5cbd6; }

.kpi-tile .kpi-label {
    margin: 0 0 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #97a3b9;
}

/* Secondary line under a KPI value (e.g. Position % beneath Total Potential Cost). */
.kpi-tile .kpi-sub {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #97a3b9;
}

/* Subtle "i" affordance signalling the tile carries a calculation tooltip. */
.kpi-tile .kpi-info {
    font-size: 10px;
    color: #c5cbd6;
    margin-left: 2px;
}

.kpi-tile[title] {
    cursor: help;
}

.kpi-tile[title]:hover .kpi-info {
    color: #97a3b9;
}

.kpi-tile .kpi-value {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #1c273c;
    line-height: 1.1;
}

/* Pending Approvals tile turns amber when there is something to action. */
.kpi-tile.kpi-tile-warning {
    border-top: 3px solid #f0ad4e;
}

.kpi-tile.kpi-tile-warning .kpi-value {
    color: #d9892b;
}

/* Placeholder KPI tiles (no data yet) — muted, dashed. */
.kpi-tile.kpi-tile-placeholder {
    border: 1px dashed #c5cbd6;
    box-shadow: none;
}

.kpi-tile.kpi-tile-placeholder .kpi-value {
    color: #c5cbd6;
}

/* Venue Map card fills its column so it matches the charts' height. */
.dash-map-card .card-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 300px;
}

.dash-map-card #venueMap {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    border-radius: 6px;
}

/* Admin-only "Preview dashboard as" bar for switching role layouts without re-login. */
.dash-preview-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 12px;
    background-color: #f5f6fa;
    border: 1px dashed #c5cbd6;
    border-radius: 6px;
    font-size: 13px;
}

/* Project logo shown to the right of the Epsylon brand logo. */
.az-header-left .project-logo {
    height: 44px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    vertical-align: middle;
    border-radius: 4px;
    margin-left: 16px;
    background-color: #fff;
}

/* Slightly taller header to give the project logo room. */
.az-header {
    height: 72px;
}

@media (min-width: 992px) {
    .az-header {
        height: 72px;
    }
}

/* #846: a marked (non-production) environment tints the header to match the banner from
   _EnvironmentBanner, so the difference holds even when the banner has scrolled away. */
.env-marked .az-header {
    background-color: #fff4dc;
    border-bottom: 3px solid #f59f00;
}

/* Widen the app container at xl (>=1200px) to fit the extra top-level "Changes"
   nav item. Scoped to .container so the header, page content, and footer all
   share the same width and stay aligned. Overrides azia-pro.css's 1140px cap
   (site.css is loaded after azia-pro.css, so this wins at equal specificity). */
@media (min-width: 1200px) {
    .container {
        max-width: 1280px;
    }
}

/* ============================ Report gallery ============================ */

/* The report picker (/Reports/Index) is a browsable card grid grouped by
   category, with a sticky search + category chip bar. Card hover and the icon
   badge deliberately reuse the dashboard KPI tile vocabulary above. */

.rpt-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: #f4f5f8;
    padding: 10px 0 8px;
    margin-bottom: 5px;
}

.rpt-search {
    position: relative;
    max-width: 380px;
    margin-bottom: 10px;
}

.rpt-search .rpt-search-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #97a3b9;
    font-size: 13px;
    pointer-events: none;
}

.rpt-search .form-control {
    padding-left: 34px;
}

.rpt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rpt-chip {
    border: 1px solid #dfe1e8;
    background-color: #fff;
    color: #596882;
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.rpt-chip:hover {
    border-color: #b4bdce;
    color: #1c273c;
}

.rpt-chip.active {
    background-color: #0168fa;
    border-color: #0168fa;
    color: #fff;
}

.rpt-chip-count {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
    opacity: 0.7;
}

.rpt-section {
    margin-top: 28px;
}

/* #769. These were an 11px muted uppercase eyebrow - smaller and fainter than the
   .rpt-card-name inside their own section, so a category header did not read as the
   heading of the cards under it. Now the largest, darkest text in the section, with a
   rule to close the block off from the next category. */
.rpt-section-title {
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #dfe1e8;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    color: #1c273c;
}

.rpt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

/* Whole card is the link to the report viewer; the star inside opts out. */
a.rpt-card {
    display: flex;
    flex-direction: column;
    padding: 14px 16px 16px;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

a.rpt-card:hover,
a.rpt-card:focus {
    color: inherit;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.rpt-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

.rpt-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eef2fb;
    color: #0168fa;
    font-size: 15px;
}

.rpt-card-fav {
    font-size: 15px;
    line-height: 1;
    padding: 4px;
    margin: -4px -4px 0 0;
    cursor: pointer;
}

.rpt-card-fav.text-secondary {
    opacity: 0.35;
}

a.rpt-card:hover .rpt-card-fav.text-secondary,
.rpt-card-fav:hover {
    opacity: 1;
}

.rpt-card-name {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: #1c273c;
    line-height: 1.35;
}

.rpt-card-desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #7987a1;
}

.rpt-empty {
    text-align: center;
    padding: 50px 0;
    color: #97a3b9;
}

/* ============================ Report viewer panel ============================ */

/* #797. Context rail down the left of /Reports/ReportViewer - the report's identity
   plus the administrator's Instructions - so the user is not dropped onto a bare Bold
   toolbar. Deliberately reuses the gallery card's icon badge and muted body colour, so
   arriving from a card feels like the same object opened rather than a new screen. */

/* max-width + min-width:0 keep the row inside the page. The Bold viewer reports a wide
   intrinsic size, and without these the row grows to fit it and pushes the whole page
   sideways - which is what put the viewer's parameter panel off the right-hand edge.

   #807. The page is now container-fluid, so this max-width is the ONLY thing bounding the
   report - it is load-bearing, not cosmetic. #797 went full-bleed without a cap and had to
   be reverted for exactly the reason above.

   1700px is sized on the COMMON landscape report: 1008pt = 1344px, plus the 220px rail and
   the 12px gap = 1576px, leaving ~120px of headroom. 15 of the 25 RDLs are that size and
   all of them stop scrolling sideways. The one A3 landscape report (1191pt = 1588px, so
   1820px with the rail) still scrolls, by ~120px instead of ~500px - deliberately not
   chased, because a cap that cleared it would sit within ~50px of the unbounded width that
   put the parameter panel off-screen in the first place.

   Raise this only against a real report: the acceptance test is an AutoRender = 0 report
   with many parameters - the CR Listing has eight - opening with its parameter panel fully
   on screen.

   The two custom properties give the rail and the viewer one shared height so the columns
   stay level. Both were pinned at 800px, which left a tall empty band under the report on
   anything bigger than a laptop. The subtraction is the header plus this page's own
   vertical padding; the min keeps it usable on a short window, where the Bold viewer
   scrolls its own content as it always has. */
.rptv-layout {
    display: flex;
    align-items: stretch;
    gap: 12px;
    max-width: 1700px;
    margin: 0 auto;
    --rptv-height: calc(100vh - 140px);
    --rptv-min-height: 600px;
}

/* Kept deliberately narrow: every pixel here comes off the report beside it. */
/* Both overflow axes are stated deliberately. CSS computes a `visible` axis to `auto` as
   soon as the other axis is not visible, so `overflow-y: auto` on its own silently turned
   overflow-x into auto as well and hung a dead horizontal scrollbar off the rail. The rail
   can genuinely need to scroll down - Instructions runs to 1000 characters - but it must
   never scroll sideways. */
.rptv-panel {
    flex: 0 0 220px;
    height: var(--rptv-height);
    min-height: var(--rptv-min-height);
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 16px;
    background-color: #fff;
    border: 1px solid #dfe1e8;
    border-radius: 4px;
}

.rptv-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid #dfe1e8;
}

/* Same badge as .rpt-card-icon - the gallery card the user just clicked. */
.rptv-panel-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eef2fb;
    color: #0168fa;
    font-size: 15px;
}

.rptv-panel-cat {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7987a1;
}

.rptv-panel-title {
    margin: 2px 0 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #1c273c;
}

.rptv-panel-block {
    margin-bottom: 16px;
}

.rptv-panel-label {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7987a1;
}

.rptv-panel-text {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #596882;
}

/* Instructions are free text typed by an administrator; honour the line breaks
   they typed rather than running the whole thing into one paragraph. */
.rptv-panel-instructions {
    white-space: pre-line;
}

/* Pinned to the bottom of the rail - the panel is a column flexbox. */
.rptv-panel-foot {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #dfe1e8;
}

.rptv-panel-back {
    font-size: 12px;
    color: #0168fa;
}

/* min-width: 0 lets the Bold viewer scroll a wide report inside this column instead of
   stretching it - a flex item is min-width:auto by default, which would size this column
   to the report's full width and take the page with it. That, with max-width, is what
   keeps the row inside the page.

   Deliberately NO overflow here. It briefly carried overflow-x: auto as a backstop against
   a report wider than its column, which was doubly wrong: CSS computes the untouched
   overflow-y to auto the moment overflow-x is not visible, so it produced TWO scrollbars on
   a fixed-height box whose child is exactly as tall - both of them dead, because the Bold
   viewer does its own scrolling inside. Leave the scrolling to the viewer. */
.rptv-viewer {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    height: var(--rptv-height);
    min-height: var(--rptv-min-height);
}

/* Below the Bootstrap lg breakpoint the rail would leave the viewer too narrow to be
   usable, so it becomes a header band above the report instead. */
@media (max-width: 991.98px) {
    .rptv-layout {
        flex-direction: column;
    }

    /* Stacked, the rail grows to its content, so it needs no scrolling on either axis.
       Both axes again: releasing only overflow-y would leave overflow-x: hidden standing
       from the rule above, and a hidden axis computes the visible one back to auto - the
       same dead-scrollbar trap, just reintroduced at narrow widths.

       #807: min-height has to be released alongside the height. Releasing height alone
       leaves --rptv-min-height standing, which turns three short paragraphs into a 600px
       band above every report on a phone. */
    .rptv-panel {
        flex: 0 0 auto;
        height: auto;
        min-height: 0;
        overflow: visible;
    }
}

/* ============================ Project picker hint ============================ */

/* #772. Callout under the project chevron, shown only until the user picks their first
   project. It sits inside the .dropdown (which Bootstrap already positions relative), so
   it anchors to the icon with no JS. pointer-events: none is load-bearing - the dropdown
   is opened by a jQuery handler on '.az-header .dropdown > a' with an outside-click
   closer (azia-pro.js), and an interactive overlay here would swallow the very click it
   is asking for. */
.proj-hint {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 8000;
    margin-top: 10px;
    padding: 7px 12px;
    width: max-content;
    max-width: 210px;
    border-radius: 4px;
    background-color: #035E53;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    box-shadow: 0 2px 8px rgba(0,0,0,0.28);
    pointer-events: none;
}

.proj-hint-arrow {
    position: absolute;
    top: -6px;
    right: 12px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #035E53;
}

/* #861. Budget boxes filled by a paste from Excel flash briefly so the user sees what changed. */
.budget-pasted {
    background-color: #fff3cd;
    transition: background-color 1.5s ease-out;
}

/* #862. Budget amounts read as numbers: right-aligned in every Budget screen box. */
#txtBudgetValue,
#txtProject_Total,
#tblVenue input[id^="txtVenue_"],
#tblCategory input[id^="txtCategory_"] {
    text-align: right;
}

/* 1.004h. Contract Unit Prices: the draft price revision editor. */
.price-grid .price-new {
    width: 110px;
    display: inline-block;
    text-align: right;
}

.price-grid .price-cur {
    white-space: nowrap;
}

.price-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    vertical-align: middle;
    border: 1px solid #e0d6b4;
}

.price-draft-open {
    border-left: 4px solid #ffc107;
}

/* Save / Apply stay in reach on a long price list. */
.price-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: .75rem 0;
    background-color: #fff;
    border-top: 1px solid #e3e7ed;
}