/* ---------------------------------------------------------------------------
   The public, unauthenticated tender screens: the open tender list, a tender
   advert and the guest bidding flow.

   Loaded only by resources/views/tender/layout.blade.php. Deliberately
   standalone: no AdminLTE, no Bootstrap, no Font Awesome, no jQuery. The
   supplier this flow exists for is often on a metered connection, so the whole
   page stays a few KB plus one font file, and icons are inline SVG.

   Colours, spacing and type follow the NRC visual identity: NRC Orange
   (#FD5A00, taken from the master logo in public/img) is the brand signature -
   the identity rule, the active step marker, and the one accent button that
   marks the path NRC would rather a supplier took. Everything else stays
   neutral, with the DPS blue the supplier meets in the rest of the system used
   for ordinary interactive elements. Corners are near-square, as in the NRC
   mark.

   Written with logical properties (margin-inline, padding-inline, border-inline)
   so the Arabic rendering mirrors correctly under dir="rtl".
--------------------------------------------------------------------------- */

:root {
    /* One page width for the masthead and every page beneath it, wide enough
       to keep laptop gutters small. Readability at this width comes from the
       measure caps inside it: --read bounds a line of prose, and label/value
       rows lay out as two columns. */
    --page-max: 1600px;
    --read: 80ch;

    --nrc-orange: #fd5a00;
    /* The brand orange reaches only 3.2:1 against white, so it cannot carry
       button text. These are the same hue taken down until they can: the fill
       at 4.9:1 and the hover at 6.5:1, both past WCAG AA. The pure brand
       orange stays where it is decoration - rules and markers. */
    --nrc-orange-fill: #c74400;
    --nrc-orange-fill-dark: #a63b00;
    --nrc-ink: #1a1a1a;
    --nrc-ink-soft: #444a4f;
    --nrc-muted: #6a7178;
    --nrc-line: #dcdfe3;
    --nrc-line-strong: #b7bdc4;
    --nrc-surface: #fff;
    --nrc-canvas: #f2f3f5;
    --nrc-blue: #0072bc;
    --nrc-blue-dark: #005a96;
    --nrc-blue-tint: #eef6fc;
    --nrc-danger: #b3261e;
    --nrc-danger-bg: #fdecea;
    --nrc-success: #1c6b3f;
    --nrc-success-bg: #e8f4ed;
    --nrc-notice-bg: #fdf4ec;
    --nrc-radius: 3px;
    --nrc-shadow: 0 1px 2px rgba(26, 26, 26, .06);
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'IBM Plex Sans', 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--nrc-ink);
    background: var(--nrc-canvas);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

/* --- Identity bar ------------------------------------------------------- */

.masthead {
    background: var(--nrc-surface);
    border-block-start: 4px solid var(--nrc-orange);
    border-block-end: 1px solid var(--nrc-line);
}

.masthead-inner {
    max-width: var(--page-max);
    margin-inline: auto;
    padding: .6rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    text-decoration: none;
}

.brand img {
    display: block;
    height: 34px;
    width: auto;
}

.brand-name {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.2;
    color: var(--nrc-ink);
    border-inline-start: 1px solid var(--nrc-line);
    padding-inline-start: .75rem;
}

/* --- Language pill ------------------------------------------------------ */

.lang {
    position: relative;
    flex: 0 0 auto;
}

.lang summary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .9rem;
    font-size: .8125rem;
    color: var(--nrc-ink-soft);
    background: var(--nrc-surface);
    border: 1px solid var(--nrc-line-strong);
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.lang summary::-webkit-details-marker {
    display: none;
}

.lang summary:hover {
    color: var(--nrc-ink);
    border-color: var(--nrc-muted);
}

.lang summary svg {
    stroke: var(--nrc-muted);
    fill: none;
}

.lang[open] summary {
    color: var(--nrc-ink);
    border-color: var(--nrc-ink);
}

.lang-menu {
    position: absolute;
    inset-block-start: calc(100% + .35rem);
    inset-inline-end: 0;
    z-index: 20;
    min-width: 9.5rem;
    padding: .25rem 0;
    background: var(--nrc-surface);
    border: 1px solid var(--nrc-line);
    border-radius: var(--nrc-radius);
    box-shadow: 0 6px 20px rgba(26, 26, 26, .12);
}

.lang-menu a {
    display: block;
    padding: .45rem 1rem;
    font-size: .875rem;
    color: var(--nrc-ink-soft);
    text-decoration: none;
}

.lang-menu a:hover {
    background: var(--nrc-canvas);
    color: var(--nrc-ink);
}

.lang-menu a.is-active {
    font-weight: 600;
    color: var(--nrc-ink);
    box-shadow: inset 3px 0 0 var(--nrc-orange);
}

[dir=rtl] .lang-menu a.is-active {
    box-shadow: inset -3px 0 0 var(--nrc-orange);
}

/* --- Page frame --------------------------------------------------------- */

/* Vertical rhythm is tight: on a small phone every extra rem of air is another
   scroll between the deadline and the button that acts on it. */
.wrap {
    max-width: var(--page-max);
    margin-inline: auto;
    padding: 1rem 1rem 2rem;
}

/* The way back out of a page - the supplier arrives here from an advert, a
   printed notice or an email, so the browser's back button is not always the
   answer. Placed above the first card on every screen that has a parent. */
.backlink {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-block-end: .625rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--nrc-ink-soft);
    text-decoration: none;
}

.backlink:hover {
    color: var(--nrc-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.backlink svg {
    stroke: currentColor;
    fill: none;
}

[dir=rtl] .backlink svg {
    transform: scaleX(-1);
}

.card {
    background: var(--nrc-surface);
    border: 1px solid var(--nrc-line);
    border-radius: var(--nrc-radius);
    box-shadow: var(--nrc-shadow);
    padding: 1.125rem 1.25rem;
}

.card + .card,
.card + form,
form + .card,
.card + .aside {
    margin-block-start: .75rem;
}

.card-quiet {
    background: transparent;
    box-shadow: none;
    border-style: dashed;
    padding: 1.125rem 1.5rem;
}

h1 {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.25;
    margin: 0;
}

h2 {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 .875rem;
}

p {
    margin: 0 0 .75rem;
    max-inline-size: var(--read);
}

p:last-child {
    margin-block-end: 0;
}

.eyebrow {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nrc-muted);
    margin: 0 0 .35rem;
}

.subject {
    font-size: .9375rem;
    color: var(--nrc-ink-soft);
    margin: .35rem 0 0;
}

.muted {
    color: var(--nrc-muted);
    font-size: .875rem;
}

.lede {
    color: var(--nrc-ink-soft);
    margin-block-start: 1rem;
}

/* --- Tender summary ----------------------------------------------------- */

.summary {
    margin: 1rem 0 0;
    border-block-start: 1px solid var(--nrc-line);
    font-size: .9375rem;
}

/* A heading already leaves its own space below it; stacking that on top of the
   block's own top margin opened a gap twice the size it needed to be. */
h2 + .summary,
h2 + .steps,
h2 + .note {
    margin-block-start: 0;
}

/* A grid rather than space-between, which on a wide page pushes label and
   value to opposite edges. The label column stops growing at 14rem, so the
   value always sits beside its label. */
.summary > div {
    display: grid;
    grid-template-columns: minmax(7rem, 14rem) 1fr;
    align-items: baseline;
    gap: .25rem 1.5rem;
    padding: .4rem 0;
    border-block-end: 1px solid var(--nrc-line);
}

.summary dt {
    color: var(--nrc-muted);
    font-size: .875rem;
    margin: 0;
}

.summary dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* A qualifier under a value - "in six days" beneath a deadline. */
.summary dd .muted {
    display: block;
    font-weight: 400;
}

.actions + p {
    margin-block-start: 1rem;
}

/* --- Step indicator ----------------------------------------------------- */

.steps {
    display: flex;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    gap: .25rem;
    counter-reset: step;
}

.steps li {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    color: var(--nrc-muted);
    border-block-start: 3px solid var(--nrc-line);
    padding-block-start: .6rem;
    min-width: 0;
}

.steps li span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.steps li::before {
    counter-increment: step;
    content: counter(step);
    flex: 0 0 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--nrc-line);
    color: var(--nrc-ink-soft);
    font-size: .6875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.steps .is-done {
    color: var(--nrc-ink-soft);
    border-block-start-color: var(--nrc-line-strong);
}

.steps .is-done::before {
    background: var(--nrc-line-strong);
    color: var(--nrc-surface);
}

.steps .is-current {
    color: var(--nrc-ink);
    font-weight: 600;
    border-block-start-color: var(--nrc-orange);
}

.steps .is-current::before {
    background: var(--nrc-orange);
    color: var(--nrc-surface);
}

/* --- Notes -------------------------------------------------------------- */

.note {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin-block-start: 1rem;
    padding: .75rem .875rem;
    background: var(--nrc-blue-tint);
    border-inline-start: 3px solid var(--nrc-blue);
    font-size: .9375rem;
    color: var(--nrc-ink-soft);
}

.note svg {
    flex: 0 0 18px;
    margin-block-start: .2rem;
    stroke: var(--nrc-blue);
}

.note p {
    margin: 0;
}

.note + form,
.summary + form {
    display: block;
    margin-block-start: 1.5rem;
}

.note-caution {
    background: var(--nrc-notice-bg);
    border-inline-start-color: var(--nrc-orange);
}

.note-caution svg {
    stroke: var(--nrc-orange);
}

/* --- Forms -------------------------------------------------------------- */

.field {
    margin-block-end: .875rem;
}

.field:last-of-type {
    margin-block-end: 0;
}

label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--nrc-ink);
    margin: 0 0 .3rem;
}

.optional {
    font-weight: 400;
    color: var(--nrc-muted);
}

/* The marker is decoration: the input's own required attribute is what a
   screen reader announces, so this is hidden from the accessibility tree and
   explained once per form by .required-note. */
.req {
    color: var(--nrc-danger);
    margin-inline-start: .15rem;
}

.required-note {
    margin: 0 0 .875rem;
    font-size: .8125rem;
    color: var(--nrc-muted);
}

.required-note .req {
    margin-inline-start: 0;
}

.hint {
    display: block;
    font-weight: 400;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--nrc-muted);
    margin-block-start: .1rem;
}

input[type=text],
input[type=email],
input[type=tel],
select {
    display: block;
    width: 100%;
    height: 42px;
    padding: 0 .75rem;
    font-family: inherit;
    font-size: .9375rem;
    color: var(--nrc-ink);
    background: var(--nrc-surface);
    border: 1px solid var(--nrc-line-strong);
    border-radius: var(--nrc-radius);
    appearance: none;
}

select {
    padding-inline-end: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236a7178' stroke-width='1.75'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
}

[dir=rtl] select {
    background-position: left .75rem center;
}

input:hover,
select:hover {
    border-color: var(--nrc-muted);
}

input:focus,
select:focus,
.btn:focus-visible,
a:focus-visible {
    outline: 2px solid var(--nrc-blue);
    outline-offset: 1px;
    border-color: var(--nrc-blue);
}

input.is-invalid,
select.is-invalid {
    border-color: var(--nrc-danger);
}

.field-error {
    display: block;
    margin-block-start: .3rem;
    font-size: .8125rem;
    color: var(--nrc-danger);
}

.code-input {
    max-width: 12rem;
    height: 52px;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .35em;
    text-indent: .35em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    margin-block-start: 1.125rem;
}

/* --- Buttons and links -------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 11rem;
    padding: .5rem 1.5rem;
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--nrc-radius);
    cursor: pointer;
}

.btn-primary {
    background: var(--nrc-blue);
    border-color: var(--nrc-blue);
    color: #fff;
}

.btn-primary:hover {
    background: var(--nrc-blue-dark);
    border-color: var(--nrc-blue-dark);
}

/* The one orange button on the page, marking the route NRC would rather the
   supplier took ("Sign in to bid"). Never put two on a screen. */
.btn-accent {
    background: var(--nrc-orange-fill);
    border-color: var(--nrc-orange-fill);
    color: #fff;
}

.btn-accent:hover {
    background: var(--nrc-orange-fill-dark);
    border-color: var(--nrc-orange-fill-dark);
}

.btn-secondary {
    background: var(--nrc-surface);
    border-color: var(--nrc-line-strong);
    color: var(--nrc-ink);
}

.btn-secondary:hover {
    border-color: var(--nrc-muted);
}

.btn-link {
    background: none;
    border: 0;
    padding: .5rem 0;
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--nrc-blue-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.btn-link:hover {
    color: var(--nrc-ink);
}

.aside {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1rem;
    font-size: .9375rem;
    color: var(--nrc-ink-soft);
}

/* --- Tender advert content ---------------------------------------------- */

/* The description is rich text written by procurement, so the tags it may
   contain are styled here rather than left to the browser defaults. */
.prose {
    font-size: .9375rem;
    color: var(--nrc-ink-soft);
    overflow-wrap: break-word;
    max-inline-size: var(--read);
}

.prose > :first-child {
    margin-block-start: 0;
}

.prose > :last-child {
    margin-block-end: 0;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--nrc-ink);
    margin: 1.25rem 0 .5rem;
}

.prose p,
.prose ul,
.prose ol,
.prose table {
    margin: 0 0 .75rem;
}

.prose ul,
.prose ol {
    padding-inline-start: 1.25rem;
}

.prose li {
    margin-block-end: .25rem;
}

.prose a {
    color: var(--nrc-blue-dark);
}

.prose img {
    max-width: 100%;
    height: auto;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.prose th,
.prose td {
    border: 1px solid var(--nrc-line);
    padding: .4rem .6rem;
    text-align: start;
}

.prose th {
    background: var(--nrc-canvas);
    font-weight: 600;
    color: var(--nrc-ink);
}

.scroll-x {
    overflow-x: auto;
}

/* --- Document rows ------------------------------------------------------ */

.doc {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .875rem 1rem;
    border: 1px solid var(--nrc-line);
    border-radius: var(--nrc-radius);
    background: var(--nrc-surface);
    text-decoration: none;
    color: inherit;
}

.doc:hover {
    border-color: var(--nrc-muted);
}

.doc svg {
    flex: 0 0 22px;
    stroke: var(--nrc-blue);
    fill: none;
}

.doc-body {
    min-width: 0;
    flex: 1 1 auto;
}

.doc-name {
    display: block;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--nrc-ink);
}

.doc-meta {
    display: block;
    font-size: .8125rem;
    color: var(--nrc-muted);
}

.doc-action {
    flex: 0 0 auto;
    font-size: .875rem;
    font-weight: 600;
    color: var(--nrc-blue-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Tender list -------------------------------------------------------- */

/* Kept as the hook for a page that wants a narrower measure than the default;
   nothing sets it today. */
body.wrap-narrow {
    --page-max: 900px;
}

.list-head {
    margin-block-end: 1rem;
}

.tender-list {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

/* The stacked-cards rule above would otherwise push every card after the
   first down a row's worth inside the grid, where the gap already spaces them. */
.tender-list > .card + .card {
    margin-block-start: 0;
}

.tender-card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.25rem;
}

.tender-card h2 {
    font-size: 1rem;
    line-height: 1.35;
    margin: 0;
}

/* A card in the grid is ~22rem wide, too narrow for the two-column layout
   above without wrapping values onto three lines, so these rows keep the
   label-left / value-right reading. */
.tender-card .summary > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
}

.tender-card .summary dd {
    text-align: end;
}

.tender-card .summary {
    margin-block-start: 0;
    flex: 1 1 auto;
}

.tender-card .actions {
    margin-block-start: 0;
}

.tender-card h2 a {
    color: inherit;
    text-decoration: none;
}

.tender-card h2 a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tender-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: .15rem .5rem;
    border-radius: 2px;
    background: var(--nrc-canvas);
    border: 1px solid var(--nrc-line);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--nrc-ink-soft);
}

.badge-urgent {
    background: var(--nrc-notice-bg);
    border-color: rgba(253, 90, 0, .35);
    color: #a63b00;
}

/* --- Filters, count and paging ------------------------------------------ */

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-block-start: .75rem;
    padding: 1rem;
}

.filter-field {
    flex: 1 1 12rem;
    min-width: 0;
}

.filter-grow {
    flex: 2 1 18rem;
}

.filter-field label {
    font-size: .8125rem;
    margin-block-end: .25rem;
}

.filters input[type=search] {
    display: block;
    width: 100%;
    height: 42px;
    padding: 0 .75rem;
    font-family: inherit;
    font-size: .9375rem;
    color: var(--nrc-ink);
    background: var(--nrc-surface);
    border: 1px solid var(--nrc-line-strong);
    border-radius: var(--nrc-radius);
    appearance: none;
}

.filter-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
}

.filter-actions .btn {
    min-width: 8rem;
}

.result-count {
    margin: 1rem 0 .625rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--nrc-muted);
}

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-block-start: 1.5rem;
}

.pager .btn {
    min-width: 7rem;
}

.pager-status {
    font-size: .875rem;
    color: var(--nrc-muted);
}

.btn.is-disabled {
    opacity: .5;
    cursor: default;
}

.empty {
    text-align: center;
    color: var(--nrc-muted);
    padding: 2.5rem 1rem;
}

/* --- Alerts ------------------------------------------------------------- */

.alert {
    padding: .75rem .875rem;
    margin-block-end: .75rem;
    border-radius: var(--nrc-radius);
    border-inline-start: 3px solid;
    font-size: .9375rem;
}

.alert-error {
    background: var(--nrc-danger-bg);
    border-color: var(--nrc-danger);
    color: #7a1a15;
}

.alert-success {
    background: var(--nrc-success-bg);
    border-color: var(--nrc-success);
    color: #13502e;
}

.alert p {
    margin: 0;
}

.alert ul {
    margin: 0;
    padding-inline-start: 1.1rem;
}

/* --- Footer ------------------------------------------------------------- */

.page-footer {
    border-block-start: 1px solid var(--nrc-line);
    padding: 1rem 1rem 1.5rem;
    text-align: center;
    font-size: .8125rem;
    color: var(--nrc-muted);
}

.page-footer a {
    color: var(--nrc-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-inline: .35rem;
}

.page-footer a:hover {
    color: var(--nrc-ink);
}

/* --- Narrow screens ----------------------------------------------------- */

@media (max-width: 30rem) {
    .wrap {
        padding: .75rem .75rem 1.75rem;
    }

    .card {
        padding: 1rem;
    }

    .btn {
        width: 100%;
    }

    .steps li span {
        display: none;
    }

    .steps li {
        flex-basis: auto;
    }

    .steps .is-current span {
        display: block;
    }

    .summary > div,
    .tender-card .summary > div {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .tender-card .summary dd {
        text-align: start;
    }
}