@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html,
body {
    background: #eef3f8;
    color: #243447;
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14.5px;
    max-width: 100%;
    overflow-x: hidden;
}

h1:focus {
    outline: none;
}

a,
.btn-link {
    color: #15588e;
}

.btn {
    border-radius: 5px;
    font-weight: 700;
}

.btn-primary {
    background-color: #15588e;
    border-color: #15588e;
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #0f4775;
    border-color: #0f4775;
}

.content {
    padding-top: 1.5rem;
}

.page-heading {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.upload-page-heading {
    margin-left: auto;
    margin-right: auto;
    max-width: 64rem;
    text-align: center;
}

.upload-page-heading .page-description {
    margin-left: auto;
    margin-right: auto;
}

.eyebrow {
    color: #488f4d;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    margin: 0 0 .2rem;
    text-transform: uppercase;
}

.page-heading h2 {
    color: #0b2e63;
    font-size: clamp(1.55rem, 2.2vw, 2.15rem);
    font-weight: 900;
    letter-spacing: 0;
    margin: 0;
}

.page-description {
    color: #526272;
    font-size: .98rem;
    line-height: 1.55;
    margin: .45rem 0 0;
    max-width: 54rem;
}

.upload-layout {
    align-items: start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(24rem, 1.4fr) minmax(18rem, .8fr);
    margin: 0 auto;
    max-width: 72rem;
}

.upload-panel,
.requirements-panel {
    background: #ffffff;
    border: 1px solid #d7e0ea;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(15, 40, 64, .08);
    padding: 1.25rem;
}

.upload-card {
    align-items: center;
    display: flex;
    flex-direction: column;
    min-height: 21rem;
    padding: 2rem;
    text-align: center;
}

.upload-card-icon {
    align-items: center;
    background: linear-gradient(135deg, #0f8ac8, #15588e);
    border-radius: 50%;
    box-shadow: 0 12px 24px rgba(21, 88, 142, .22);
    color: #ffffff;
    display: inline-flex;
    font-size: 4.25rem;
    height: 7.25rem;
    justify-content: center;
    margin-bottom: 1.1rem;
    width: 7.25rem;
}

.upload-card-copy h3 {
    color: #0b2e63;
    font-size: 1.25rem;
    font-weight: 900;
    margin: 0;
}

.upload-card-copy p {
    color: #526272;
    margin: .35rem 0 1.35rem;
}

.upload-panel-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.1rem;
}

.upload-panel h3,
.requirements-panel h3 {
    color: #0b2e63;
    font-size: 1.1rem;
    font-weight: 900;
    margin: 0;
}

.upload-panel-header p {
    color: #64748b;
    margin: .25rem 0 0;
}

.status-badge {
    background: #e9f6ec;
    border: 1px solid #b7dec0;
    border-radius: 999px;
    color: #276832;
    font-size: .78rem;
    font-weight: 800;
    padding: .3rem .65rem;
    white-space: nowrap;
}

.form-label {
    color: #334155;
    font-weight: 800;
}

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

.form-control:focus {
    border-color: #15588e;
    box-shadow: 0 0 0 .2rem rgba(21, 88, 142, .16);
}

.file-picker {
    align-items: stretch;
    border: 1px solid #c7d7e7;
    border-radius: 6px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    margin: 0 auto;
    max-width: 38rem;
    overflow: hidden;
    text-align: left;
    width: 100%;
}

.file-picker-button {
    align-items: center;
    border-radius: 0;
    display: inline-flex;
    gap: .45rem;
    justify-content: center;
    margin: 0;
    min-width: 11rem;
}

.selected-file {
    background: #f8fbfe;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: .7rem .9rem;
}

.selected-file-label {
    color: #0b2e63;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-file-meta {
    color: #64748b;
    font-size: .82rem;
}

.upload-actions {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin: 1.25rem 0;
}

/* In-page message banner: errors, save confirmations, and the longer advisory
   notices (an edit already open on a contract, a rejection comment).

   Full width and left-aligned. It was previously capped at 38rem and centred,
   which suited a one-line file-upload status but left a multi-sentence notice
   crammed into a narrow column with the rest of the row empty. Every use in the
   app is an in-page banner of this kind, so the cap is removed here rather than
   overridden per page. */
.upload-status-bar {
    align-items: flex-start;
    background: #eaf7fb;
    border: 1px solid #b9e7f3;
    border-radius: 6px;
    color: #07516c;
    display: flex;
    font-weight: 700;
    gap: .6rem;
    justify-content: flex-start;
    line-height: 1.4;
    min-height: 2.8rem;
    padding: .7rem .9rem;
    width: 100%;
}

.status-dot {
    background: #1f9d55;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(31, 157, 85, .14);
    flex: 0 0 auto;
    height: .55rem;
    /* Nudged down to sit on the first line of text now that the banner aligns to
       the top — a centred dot floats oddly beside a three-line message. */
    margin-top: .4rem;
    width: .55rem;
}

.upload-status-bar.is-working .status-dot {
    animation: status-pulse 1.2s ease-in-out infinite;
    background: #0b6aa2;
}

.upload-status-bar.is-success {
    background: #ebf8ee;
    border-color: #b7dec0;
    color: #276832;
}

.upload-status-bar.is-error {
    background: #fff1f1;
    border-color: #efc0c0;
    color: #8b1d1d;
}

.upload-status-bar.is-error .status-dot {
    background: #b32121;
    box-shadow: 0 0 0 4px rgba(179, 33, 33, .12);
}

.upload-error-panel {
    background: #fff7f7;
    border: 1px solid #efc0c0;
    border-left: 4px solid #b32121;
    border-radius: 6px;
    color: #7c1c1c;
    margin-bottom: .85rem;
    max-width: 38rem;
    padding: .8rem 1rem;
    width: 100%;
}

.upload-error-panel ul {
    margin: .45rem 0 0;
    padding-left: 1.2rem;
}

.processing-result {
    background: #f8fbfe;
    border: 1px solid #d7e4ef;
    border-radius: 6px;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(6rem, 1fr));
    margin-top: .85rem;
    max-width: 38rem;
    padding: .85rem 1rem;
    width: 100%;
}

.processing-result > div {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.processing-result-label {
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.processing-result code {
    color: #0b2e63;
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.upload-warning-panel {
    background: #fff9e9;
    border: 1px solid #eadca7;
    border-left: 4px solid #b7791f;
    border-radius: 6px;
    color: #704b12;
    margin-top: .85rem;
    max-width: 38rem;
    padding: .8rem 1rem;
    width: 100%;
}

.upload-warning-panel ul {
    margin: .45rem 0 0;
    padding-left: 1.2rem;
}

.upload-status-bar.is-warning {
    background: #fff9e9;
    border-color: #eadca7;
    color: #704b12;
}

.upload-status-bar.is-warning .status-dot {
    background: #b7791f;
    box-shadow: 0 0 0 4px rgba(183, 121, 31, .12);
}

@keyframes status-pulse {
    50% {
        opacity: .45;
        transform: scale(.82);
    }
}

.requirements-panel {
    padding: 1.35rem;
}

.requirements-panel-header {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.requirements-panel ul {
    color: #526272;
    line-height: 1.55;
    margin: .75rem 0 0;
    padding-left: 1.2rem;
}

.requirements-panel li + li {
    margin-top: .45rem;
}

.validation-steps {
    display: grid;
    gap: .85rem;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

.validation-steps li {
    align-items: flex-start;
    background: #f8fbfe;
    border: 1px solid #e1eaf3;
    border-radius: 6px;
    color: #43566b;
    display: grid;
    gap: .75rem;
    grid-template-columns: auto minmax(0, 1fr);
    line-height: 1.45;
    padding: .85rem;
}

.step-number {
    background: #e9f6ec;
    border: 1px solid #b7dec0;
    border-radius: 4px;
    color: #276832;
    font-size: .78rem;
    font-weight: 900;
    line-height: 1;
    padding: .35rem .45rem;
    white-space: nowrap;
}

.auth-message-panel {
    background: #ffffff;
    border: 1px solid #d7e0ea;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(15, 40, 64, .08);
    margin: 0 auto;
    max-width: 48rem;
    padding: 1.5rem;
}

.auth-message-panel h2 {
    color: #0b2e63;
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 0;
    margin: 0 0 .4rem;
}

.auth-message-panel p {
    color: #526272;
    line-height: 1.55;
    margin: 0 0 1rem;
}

.auth-message-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.auth-error-code {
    background: #fff8e6;
    border-left: 4px solid #c77800;
    color: #5f4300 !important;
    font-weight: 700;
    padding: .65rem .8rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #b32121;
}

.validation-message {
    color: #b32121;
}

@media (max-width: 700px) {
    .processing-result {
        grid-template-columns: 1fr;
    }
}

/* Shown when an unhandled exception has killed the circuit. Everything on the
   page still looks normal at that point but nothing responds, so this bar is
   the only thing saying why, and as a pale yellow strip along the bottom it was
   easy to sit in front of without noticing.

   Block layout, not flex: Blazor reveals it by setting an inline
   style.display = "block", which beats anything declared here. Above
   SweetAlert2 (1060) on purpose - if a dialog is open when the circuit dies,
   the dialog is the dead thing and this has to be readable over it. */
#blazor-error-ui {
    background: #8a1c16;
    bottom: 0;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .35);
    color: #ffffff;
    display: none;
    font-size: 1rem;
    font-weight: 600;
    left: 0;
    padding: .9rem 3rem 1rem 1.25rem;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .reload {
    background: #ffffff;
    border-radius: 6px;
    color: #8a1c16;
    display: inline-block;
    font-weight: 700;
    margin-left: 1rem;
    padding: .35rem .95rem;
    text-decoration: none;
    white-space: nowrap;
}

#blazor-error-ui .reload:hover {
    background: #ffe9e7;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

.blazor-error-boundary {
    background: #b32121;
    color: #ffffff;
    padding: 1rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ============================================================
   SHARED DATA-GRID STYLING
   Global (not scoped) so every grid in the app looks identical.
   Apply to a table:  class="table data-table"
   and to its head:   class="custom-table-header"
   Optionally wrap in: <div class="data-table-wrap">

   NOTE ON SPECIFICITY: Bootstrap paints cell backgrounds through
   `.table > :not(caption) > * > *` (--bs-table-bg), which beats a
   plain `tr` background. The striping/hover rules below therefore
   target `> td` so they actually win, and hover is declared after
   striping so it takes precedence on equal specificity.
   ============================================================ */

/* Navy header band. */
.custom-table-header {
    background-color: #183866 !important;
    color: #ffffff !important;
}

.custom-table-header th {
    background-color: #183866 !important;
    border-color: #183866 !important;
    color: #ffffff !important;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: .7rem .75rem;
    vertical-align: middle;
    white-space: nowrap;
}

/* Header icons sit just before the label. */
.custom-table-header th > i,
.custom-table-header th > .fa-solid,
.custom-table-header th > .fa-regular {
    margin-right: .4rem;
    opacity: .95;
}

/* Sortable headers. */
.custom-table-header th[role="button"] {
    cursor: pointer;
    user-select: none;
}

.custom-table-header th[role="button"]:hover {
    background-color: #1f4a80 !important;
}

.custom-table-header th .fa-sort {
    opacity: .55;
}

/* ---- Body ---- */
.data-table {
    margin-bottom: 0;
    width: 100%;
}

.data-table > tbody > tr > td {
    border-top: 1px solid #e8edf3;
    padding: .6rem .75rem;
    vertical-align: middle;
}

/* Zebra striping. */
.data-table > tbody > tr:nth-of-type(even) > td {
    background-color: #f5f8fc;
}

/* Hover — declared after striping so it wins. */
.data-table > tbody > tr:hover > td {
    background-color: #e9f1fb;
}

/* Honour the shorthand form too, for tables that keep .table-hover. */
.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, .02);
}

/* Rounded, clipped container with a subtle lift. */
.data-table-wrap {
    background: #fff;
    border: 1px solid #d7e0ea;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(15, 40, 64, .06);
    overflow: auto;
}

/* Scrollable variant keeps the navy header pinned. */
.data-table-wrap.is-scrollable {
    max-height: 24rem;
}

.data-table-wrap.is-scrollable .custom-table-header th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* ---- Cell decorations ---- */
/* Dark pill for identifiers (contract #, provider id, …). */
.cell-id {
    background: #eef2f7;
    border: 1px solid #d7e0ea;
    border-radius: 5px;
    color: #183866;
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    padding: .18rem .5rem;
    text-decoration: none;
    white-space: nowrap;
}

a.cell-id:hover {
    background: #dfe8f4;
    color: #0b2e63;
}

/* Stops a short column being widened by its own heading. A table lays out to
   fit the widest cell in each column, header included, so "Amendment" over a
   column of four-character values reserves space the values never use. Not a
   fixed width: this caps what the header can claim and lets the content decide
   the rest. */
.data-table th.col-narrow {
    width: 1%;
    white-space: nowrap;
}

/* A date as a rounded pill, for grids where a column of plain MM/dd/yyyy takes
   more width than the value deserves. Fully rounded rather than the 5px of
   .cell-id, so a date is distinguishable from an identifier at a glance without
   reading it. Tabular figures keep the columns of digits aligned down the
   grid, which a proportional font does not. */
.date-pill {
    background: #eef4fb;
    border: 1px solid #d7e0ea;
    border-radius: 999px;
    color: #31465c;
    display: inline-block;
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    padding: .12rem .5rem;
    white-space: nowrap;
}

/* Emphasised primary column (names/titles). */
.cell-strong {
    color: #1f2937;
    font-weight: 700;
}

/* Green pill for money in a grid — contract values, budget line amounts,
   deliverable prices, amendment amounts.

   Global rather than per-component on purpose: the same decoration is used by
   the contracts list, the reports search and the published-contract view, and
   Blazor scoped CSS would need it copied into each one, which is exactly how
   three slightly different money styles would drift into existence.

   Tabular numerals keep the digits aligned down the column despite the pill
   background. */
.cell-amount {
    background: #48854d;
    border-radius: 999px;
    color: #ffffff;
    display: inline-block;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    padding: .2rem .65rem;
    white-space: nowrap;
}

/* No amount recorded. A green pill around a blank reads as a real figure of
   zero, so an absent value drops the pill entirely and shows a muted dash. */
.cell-amount.is-none {
    background: transparent;
    color: #a3adba;
    font-weight: 500;
    padding-left: 0;
    padding-right: 0;
}

/* FLAIR account code — the eight segments joined as L1.GF.SF.FID.BE.IBI.CAT.YR.
   Monospaced so the segments line up down the column and a short or missing one
   is obvious at a glance. Used by the intake budget grid and the published view. */
.flair-code {
    background: #f3f6fa;
    border: 1px solid #e3eaf2;
    border-radius: 4px;
    color: #33507a;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: .74rem;
    letter-spacing: -.01em;
    padding: .15rem .4rem;
    white-space: nowrap;
}

/* Solid green pill — counts (e.g. Sites) and identifiers sourced from PALM. */
.count-badge {
    background: #48854d;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    font-size: .76rem;
    font-weight: 700;
    min-width: 1.9rem;
    padding: .16rem .45rem;
    text-align: center;
}

/* Green variant of the identifier pill — PALM supplier IDs.
   Deliberately kept green while contract identifiers are blue: they are
   different things, and one colour for both made a supplier ID look like a
   contract number in the provider grids. */
.cell-id.is-green {
    background: #48854d;
    border-color: #48854d;
    color: #fff;
}

a.cell-id.is-green:hover {
    background: #3b6f3f;
    border-color: #3b6f3f;
    color: #fff;
}

/* DCF blue variant — contract numbers and contract codes. */
.cell-id.is-blue {
    background: #003467;
    border-color: #003467;
    color: #fff;
}

a.cell-id.is-blue:hover {
    background: #002748;
    border-color: #002748;
    color: #fff;
}

/* Muted "empty grid" row. */
.data-table .grid-empty {
    color: #64748b;
    padding: 2rem .75rem;
    text-align: center;
}

/* ---- Row actions ---- */
.grid-actions {
    display: inline-flex;
    gap: .35rem;
    white-space: nowrap;
}

/* Solid blue View/primary row button. */
.btn-grid {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 5px;
    display: inline-flex;
    font-size: .8rem;
    font-weight: 600;
    gap: .3rem;
    line-height: 1.2;
    padding: .3rem .6rem;
    text-decoration: none;
}

.btn-grid-view {
    background: #1268c3;
    border-color: #1268c3;
    color: #fff;
}

.btn-grid-view:hover {
    background: #0f579f;
    color: #fff;
}

/* DCF blue. Used for Open on the contracts grid and for the inline row Edit
   buttons in the wizard's provider / budget / deliverable / amendment lists —
   the same "work on this row" action in every case, so one colour. */
.btn-grid-edit {
    background: #fff;
    border-color: #003467;
    color: #003467;
}

.btn-grid-edit:hover {
    background: #e9f3ff;
    border-color: #002748;
    color: #002748;
}

.btn-grid-danger {
    background: #fff;
    border-color: #c1362f;
    color: #c1362f;
}

.btn-grid-danger:hover {
    background: #fdecea;
    color: #a02b25;
}

/* ---- Footer: "Showing 1 to 10 of N entries" + pagination ---- */
.grid-footer {
    align-items: center;
    border-top: 1px solid #eef2f7;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
    padding: .85rem 1.25rem;
}

.grid-footer .grid-count {
    color: #526272;
    font-size: .88rem;
}

.grid-footer .grid-count strong {
    color: #183866;
}

/* Pre-login hero — rendered by App.razor's NotAuthorized for anonymous users
   who hit a protected page. The negative margins cancel .app-main's padding
   (1.5rem 2rem 3rem in MainLayout.razor.css — keep the two in sync) so the hero
   spans full width; the image is then scaled to fit within the viewport
   (both width and height) so the whole image shows without overflowing. */
.pre-login {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: -1.5rem -2rem -3rem;
}

@media (max-width: 800px) {
    .pre-login {
        margin: -1rem;
    }
}

.pre-login-hero {
    display: block;
    height: auto;
    max-height: calc(100vh - 8rem); /* fit under the header + sub-nav, no scroll */
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

.dcf-ext-template-footer {
    background-color: #003467 !important;
    color: #ffffff !important;
}

.dcf-ext-template-prefooter-row {
    background-color: #003467 !important;
}

.dcf-ext-template-edgesection {
    background-color: #115ba4 !important;
    color: #ffffff !important;
}

.dcf-ext-template-footer h5,
.dcf-ext-template-footer a.dcf-ext-template-link {
    color: #ffffff !important;
}

.dcf-ext-template-footer a.dcf-ext-template-link:hover {
    color: #e9f3ff !important;
}

.emergency-card {
    background-color: #ffffff !important;
    color: #243447 !important;
}

.emergency-card-header {
    background-color: #951c1a !important;
    color: #ffffff !important;
}

.emergency-card .list-group-item {
    background-color: #ffffff !important;
    color: #243447 !important;
}

@media (max-width: 900px) {
    .upload-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .upload-panel-header {
        flex-direction: column;
    }

    .upload-card {
        padding: 1.35rem;
    }

    .upload-card-icon {
        font-size: 3.25rem;
        height: 5.75rem;
        width: 5.75rem;
    }

    .file-picker {
        grid-template-columns: 1fr;
    }

    .file-picker-button {
        min-height: 2.8rem;
        width: 100%;
    }

    .selected-file {
        text-align: center;
    }
}