@font-face {
    font-family: 'Aleo';
    src: url('../fonts/Aleo-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aleo';
    src: url('../fonts/Aleo-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@media (prefers-color-scheme: light) {
    :root {
        --background-gradient: linear-gradient( 190deg, hsl(30deg 50% 96%) 0%, hsl(30deg 37% 95%) 8%, hsl(30deg 29% 93%) 17%, hsl(30deg 24% 92%) 25%, hsl(30deg 20% 90%) 33%, hsl(30deg 17% 89%) 42%, hsl(30deg 15% 87%) 50%, hsl(30deg 14% 86%) 58%, hsl(30deg 12% 84%) 67%, hsl(30deg 11% 82%) 75%, hsl(30deg 10% 81%) 83%, hsl(30deg 9% 79%) 92%, hsl(30deg 9% 77%) 100% );
        --title-colour: var(--mid-heavy-grey);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-gradient: linear-gradient( 15deg, hsl(240deg 2% 10%) 0%, hsl(240deg 2% 11%) 8%, hsl(240deg 1% 12%) 17%, hsl(240deg 1% 13%) 25%, hsl(240deg 1% 14%) 33%, hsl(240deg 1% 15%) 42%, hsl(240deg 1% 16%) 50%, hsl(240deg 1% 17%) 58%, hsl(240deg 0% 18%) 67%, hsl(240deg 0% 19%) 75%, hsl(240deg 0% 20%) 83%, hsl(240deg 0% 21%) 92%, hsl(0deg 0% 22%) 100% );
        --title-colour: var(--mid-heavy-grey);
    }
}

:root {
    --border-radius: 14px;
}

/* App-wide dialog skin: paints the page-background gradient behind every Lemur dialog
   (OpenDialogAsync, ConfirmAsync, ShowMessageAsync all render the `.dialog` root). The
   Lemur `.dialog` rule sets background-color; this adds the gradient image on top, so the
   property does not clash regardless of CSS-isolation specificity. The title bar keeps its
   own --hover-colour background, sitting over the gradient. Scoped to PortalWeb only.
   Transparent (chromeless) dialogs opt out — they paint their own surface. */
.dialog:not(.dialog--transparent) {
    background-image: var(--background-gradient);
}

* {
    box-sizing: border-box;
}

/* ── Confirmation dialogs (Log out / Leave page) ──────────────────────────────
   Bespoke confirm cards matching the COPE dialog design system. Rendered directly in
   the popup-layer wrapper (no Lemur Dialog chrome) via ConfirmDialogs.*Async; the shell
   class styles the card. The `.popup-layer` ancestor out-specifies Lemur's CSS-isolation
   rule for `.popup-layer__dialog`. Hanken Grotesk @font-face is defined in login.css
   (both stylesheets load globally). */
.popup-layer .popup-layer__dialog.confirm-shell {
    width: 380px;
    max-width: 100%;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(8, 16, 11, 0.45);
    overflow: hidden;
    font-family: 'Hanken Grotesk', system-ui, sans-serif;
    color: #272a27;
}

.confirm-card {
    padding: 26px 28px 24px;
}

.confirm-header {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 14px;
}

.confirm-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-icon--brand {
    background: #eef3ee;
    color: #1d4a39;
}

.confirm-icon--danger {
    background: #f7ece9;
    color: #9d4031;
}

.confirm-title {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #272a27;
}

.confirm-body {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.55;
    color: #6f756e;
}

.confirm-actions {
    display: flex;
    gap: 10px;
}

/* Dialog buttons are ordinary .app-btn buttons (see AppButton / the panel components) that also
   stretch to share the action row equally. This is the only dialog-specific button rule now —
   the look and the shadow/hover/press behaviours all come from .app-btn. */
.dialog-btn {
    flex: 1;
}

/* ── Invoice accept / reject dialogs ──────────────────────────────────────────
   Reuse the .confirm-* card vocabulary (shell, header, icon, title, actions, btn) and add the
   pieces specific to these two dialogs: the wider 432px shell, the reject textarea, the optional
   PO-ref input, and the accept confirmation checkbox row. See InvoiceRejectPanel /
   InvoiceAcceptPanel. */
.popup-layer .popup-layer__dialog.invoice-dialog-shell {
    width: 432px;
}

/* Success-toned icon for the Accept dialog (the brand variant is reserved for the darker green). */
.confirm-icon--success {
    background: #e8f1ea;
    color: #2e6b4f;
}

.invoice-field-label {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #6f756e;
}

.invoice-textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 96px;
    padding: 12px 13px;
    border: 1.5px solid #d3cdc2;
    border-radius: 11px;
    background: #fff;
    color: #272a27;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.55;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    margin-bottom: 22px;
}

    .invoice-textarea::placeholder {
        color: #a9ada6;
    }

    .invoice-textarea--danger:focus {
        border-color: #9d4031;
        box-shadow: 0 0 0 3px rgba(157, 64, 49, 0.12);
    }

.invoice-input {
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 0 13px;
    border: 1.5px solid #d3cdc2;
    border-radius: 11px;
    background: #fff;
    color: #272a27;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    margin-bottom: 22px;
}

    .invoice-input:focus {
        border-color: #1d4a39;
        box-shadow: 0 0 0 3px rgba(29, 74, 57, 0.12);
    }

.invoice-confirm-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 15px;
    border-radius: 12px;
    border: 1.5px solid #d3cdc2;
    background: #faf8f4;
    cursor: pointer;
    margin-bottom: 22px;
    transition: border-color .15s, background .15s;
}

    .invoice-confirm-row.is-checked {
        border-color: #2e6b4f;
        background: #e8f1ea;
    }

.invoice-confirm-box {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 6px;
    border: 1.5px solid #bcc0b8;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s, background .15s;
}

.invoice-confirm-row.is-checked .invoice-confirm-box {
    border-color: #2e6b4f;
    background: #2e6b4f;
}

.invoice-confirm-tick {
    opacity: 0;
    transition: opacity .15s;
}

.invoice-confirm-row.is-checked .invoice-confirm-tick {
    opacity: 1;
}

.invoice-confirm-text {
    font-size: 14px;
    line-height: 1.5;
    color: #3c4140;
}

.invoice-dialog-error {
    margin: -12px 0 16px;
    font-size: 13px;
    line-height: 1.4;
    color: #9d4031;
}

/* ── Buttons (.app-btn) ───────────────────────────────────────────────────────
   The single button vocabulary for the whole app — in-page buttons (via AppButton.razor) and
   the dialog panel buttons (raw <button>s carrying .app-btn + .dialog-btn). border-box +
   inline-flex centring means each call site keeps its own explicit height/width (passed via
   Style) with the label centred. Dialog buttons add .dialog-btn for flex:1 to fill the row. */
.app-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 12px vertical is the standard button height; a call site with no explicit height ends up
       this tall. Call sites should set width (not height) — a fixed height smaller than this
       would clip the label under border-box. */
    padding: 12px 16px;
    border-radius: 11px;
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}

    /* Gentle pop-out on hover, then press-in on click — the same interaction as the header
       toolbar / banner controls, kept subtle (a few % either way). :active is declared after
       :hover so a press overrides the hover scale. */
    .app-btn:hover {
        transform: scale(1.03);
    }

    .app-btn:active {
        transform: scale(0.96);
    }

.app-btn--secondary {
    border: 1.5px solid #d3cdc2;
    background: transparent;
    color: #3c4140;
    /* Soft grey drop shadow (like the SectionWrapper card shadow, but lighter). */
    box-shadow: 0 2px 6px rgba(60, 65, 64, 0.16);
}

    .app-btn--secondary:hover {
        border-color: #b9b2a4;
        background: #faf8f4;
    }

/* Filled pills get the Lemur-timed hover lift: fade in fast / out slowly. */
.app-btn--primary,
.app-btn--danger {
    transition: background-color 1.2s, box-shadow .15s, transform .1s;
}

.app-btn--primary {
    background: #1d4a39;
    color: #f3f1ea;
    /* Drop shadow tinted in the button's own brand green. */
    box-shadow: 0 2px 6px rgba(29, 74, 57, 0.3);
}

    .app-btn--primary:hover {
        background-color: #2b6c50;
        transition: background-color 0.2s, box-shadow .15s, transform .1s;
    }

.app-btn--danger {
    background: #9d4031;
    color: #f7ece9;
    /* Drop shadow tinted in the button's own danger red. */
    box-shadow: 0 2px 6px rgba(157, 64, 49, 0.3);
}

    .app-btn--danger:hover {
        background-color: #bf4e3c;
        transition: background-color 0.2s, box-shadow .15s, transform .1s;
    }

/* Compact height modifier — for a button that must line up with a short input (e.g. a Search
   button beside a TextBox2). Zeroes the vertical padding so the shorter height can't clip the
   label under border-box; the inline-flex centring keeps the label vertically centred. */
.app-btn--compact {
    height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.app-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

    /* A disabled button shouldn't pop or press (e.g. the Library buttons before a doc loads). */
    .app-btn:disabled:hover,
    .app-btn:disabled:active {
        transform: none;
    }

    /* No hover lift while disabled. */
    .app-btn--primary:disabled:hover {
        background-color: #1d4a39;
    }

    .app-btn--danger:disabled:hover {
        background-color: #9d4031;
    }

/* ── Cancellation & upload dialogs ────────────────────────────────────────────
   Reuse the .confirm-* / .invoice-* card vocabulary; add per-dialog widths and the pieces
   specific to these dialogs. See CancelAssessmentPanel / UploadDocumentPanel (the referral
   cancel reuses ConfirmPanel via ConfirmDialogs.CancelReferralAsync). */
.popup-layer .popup-layer__dialog.cancel-referral-shell {
    width: 432px;
}

.popup-layer .popup-layer__dialog.cancel-assessment-shell {
    width: 460px;
}

.popup-layer .popup-layer__dialog.upload-dialog-shell {
    width: 496px;
}

/* Cancel assessment: reason sub-label + optional-note label. */
.cancel-reason-label {
    font-size: 14px;
    font-weight: 600;
    color: #3c4140;
    margin: 0 0 9px;
}

.cancel-reason-list {
    margin-bottom: 18px;
}

.cancel-note-label {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    color: #6f756e;
    margin: 0 0 8px;
}

/* Upload: bold field labels. */
.upload-field-label {
    display: block;
    margin: 0 0 7px;
    font-size: 14px;
    font-weight: 600;
    color: #3c4140;
}

/* Upload: custom document-type dropdown. */
.upload-dd {
    position: relative;
    margin-bottom: 18px;
}

.upload-dd-trigger {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 11px;
    border: 1.5px solid #d3cdc2;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.upload-dd-placeholder {
    color: #a9ada6;
}

.upload-dd-value {
    color: #272a27;
}

.upload-dd-chevron {
    flex: 0 0 auto;
    transition: transform .15s;
}

    .upload-dd-chevron.is-open {
        transform: rotate(180deg);
    }

/* Transparent click-catcher that closes the dropdown when clicking elsewhere. */
.upload-dd-overlay {
    position: fixed;
    inset: 0;
    z-index: 10;
}

.upload-dd-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 11;
    background: #fff;
    border: 1px solid #e4e0d6;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(8, 16, 11, 0.18);
    padding: 6px;
}

.upload-dd-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: #3c4140;
    cursor: pointer;
    transition: background .15s;
}

    .upload-dd-option:hover {
        background: #f3f5f1;
    }

    .upload-dd-option.is-selected {
        background: #e8f1ea;
        color: #1d4a39;
        font-weight: 600;
    }

/* Upload: file chooser (styled button segment + filename cell). */
.upload-file {
    display: flex;
    align-items: stretch;
    border: 1.5px solid #d3cdc2;
    border-radius: 11px;
    overflow: hidden;
    margin-bottom: 24px;
}

.upload-file-choose {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 15px;
    background: #faf8f4;
    border-right: 1.5px solid #d3cdc2;
    color: #3c4140;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

    .upload-file-choose:hover {
        background: #f1ede4;
    }

.upload-file-input {
    display: none;
}

.upload-file-name {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 11px 14px;
    font-size: 14px;
    color: #272a27;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    .upload-file-name.is-empty {
        color: #a9ada6;
    }

h3 {
    margin: 0px 0px 6px 0px;
    padding: 0;
    font-size: 24px;
    font-weight: normal;
}