/* DSC Vendor Bidding Portal: white masthead with the DSC logo and a red top edge, DSC Blue menu bar, plain tables. */
:root {
    --dsc-blue: #174e6e;
    --dsc-blue-dark: #0f3a53;
    --dsc-red: #9c1c2c;
    --dsc-link: #0069b3;
    --portal-table-head: #eef3f6;
    --portal-border: #d6dde6;
    --bs-link-color: var(--dsc-link);
    --bs-link-color-rgb: 0, 105, 179;
}

body { background: #fff; color: #1f2937; }
h1, h2, h3 { color: var(--dsc-blue); }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }

.skip-link { position: absolute; left: -10000px; top: auto; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 1000; background: #fff; padding: .5rem 1rem; outline: 3px solid var(--dsc-blue); }

.portal-masthead { border-top: 4px solid var(--dsc-red); border-bottom: 1px solid #e5e7eb; background: #fff; }
.portal-masthead-inner { display: flex; align-items: center; gap: 1rem; padding-top: .5rem; padding-bottom: .5rem; }
.portal-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.portal-title { display: block; color: var(--dsc-blue); font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
.portal-subtitle { display: block; color: #4b5563; font-size: .85rem; }
.portal-account-links { margin-left: auto; display: flex; gap: 1rem; }
.portal-account-links a { color: var(--dsc-blue); font-weight: 600; text-decoration: none; }
.portal-account-links a:hover, .portal-account-links a:focus-visible { text-decoration: underline; }

.portal-menu { background: var(--dsc-blue); }
.portal-menu-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; min-height: 2.5rem; }
.portal-menu-links { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; padding: 0; }
/* White links on the blue bar: only the bar's own links and the company and user buttons, never the dropdown items inside
   .portal-menu. .show keeps an open button white (Bootstrap's .btn.show would otherwise darken its text on the blue bar). */
.portal-menu-links a, .portal-user-button, .portal-user-button.show { color: #fff; font-weight: 600; text-decoration: none; }
.portal-menu-links a:hover, .portal-menu-links a:focus-visible, .portal-user-button:hover, .portal-user-button:focus-visible { color: #fff; text-decoration: underline; }
.portal-menu-user { margin-left: auto; display: flex; align-items: center; gap: 1rem; color: #e5eef4; }
.portal-menu .dropdown-item { color: #1f2937; font-weight: 400; }

.portal-main { padding-top: 1rem; padding-bottom: 2rem; }
.portal-table thead th { background: var(--portal-table-head); color: var(--dsc-blue); }
.portal-side { border: 1px solid var(--portal-border); border-radius: .25rem; background: #f6f9fb; padding: 1rem; }
.portal-form-group { border: 1px solid var(--portal-border); border-radius: .25rem; padding: 1rem; margin-bottom: 1rem; }
.form-caption { display: block; margin-bottom: .5rem; font-weight: 700; color: var(--dsc-blue); }
.required-marker { color: var(--dsc-red); }
/* The footer (_Footer.cshtml): DSC's address, contact details and information links in three columns from md, stacked below. */
.portal-footer { border-top: 1px solid #e5e7eb; background: #f6f9fb; padding: 1.5rem 0; color: #4b5563; font-size: .9rem; }
.portal-footer-title { display: block; margin-bottom: .25rem; color: var(--dsc-blue); font-weight: 700; }
.portal-footer li { padding: .2rem 0; }

/* The home page banner: the h1, the lead sentence (_HomeIntro) and the account buttons on a light DSC Blue panel. */
.portal-hero { background: var(--portal-table-head); border: 1px solid var(--portal-border); border-radius: .25rem; padding: 1.5rem; margin-bottom: 1.5rem; }
.portal-hero > .lead { max-width: 40rem; color: #374151; }
@media (min-width: 768px) { .portal-hero > h1 { font-size: 2rem; } }

/* The home page's Current Solicitations with nothing open: a dashed panel with a decorative icon, a title, a sentence and, for
   visitors, an outline Create account button (the banner above already has the solid one). */
.portal-empty { border: 1px dashed #b8c4d0; border-radius: .25rem; background: #f6f9fb; padding: 2rem 1rem; margin-bottom: 1rem; text-align: center; }
.portal-empty > p { max-width: 32rem; margin-left: auto; margin-right: auto; color: #4b5563; }
.portal-empty > .portal-empty-title { margin-top: .5rem; margin-bottom: .25rem; color: var(--dsc-blue); font-size: 1.1rem; font-weight: 700; }
.portal-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--portal-table-head); color: var(--dsc-blue); font-size: 1.35rem; }

/* The home page's How It Works: three steps side by side from md, stacked below. The filled DSC Blue number is decorative
   (aria-hidden); the list's order carries the sequence. */
.portal-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 768px) { .portal-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.portal-steps > li { display: flex; align-items: flex-start; gap: .75rem; border: 1px solid var(--portal-border); border-radius: .25rem; padding: .75rem 1rem; }
.portal-step-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--dsc-blue); color: #fff; font-weight: 700; }
.portal-step-title { display: block; color: var(--dsc-blue); font-weight: 700; }

/* The home page's Current Solicitations below md: each row stacks into a bordered card, the column headers are hidden visually, and
   each date cell shows its header (data-label) above the value. The view gives the table explicit ARIA roles, since display: block
   drops the table semantics in some browsers. Screen readers already announce the hidden column header, so the label has empty alt
   text ("/ """); a browser without that syntax keeps the first content line. */
@media (max-width: 767.98px) {
    .portal-table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .portal-table-stack, .portal-table-stack tbody, .portal-table-stack tr, .portal-table-stack td { display: block; }
    .portal-table-stack tr { border: 1px solid var(--portal-border); border-radius: .25rem; padding: .5rem .75rem; margin-bottom: .75rem; }
    .portal-table-stack td { border: 0; padding: .2rem 0; }
    .portal-table-stack td[data-label]::before { content: attr(data-label); content: attr(data-label) / ""; display: block; color: #4b5563; font-size: .8rem; }
}

/* A bid opening within 7 days: DSC red and bold, so the cue is not colour alone; the view adds hidden text for screen readers. */
.due-soon { color: var(--dsc-red); font-weight: 700; }

/* The project page's timeline: a vertical rail. A passed date has a filled DSC Blue marker with a check, an upcoming one an outlined
   marker. The rail is blue down to "Today" (a DSC red dot and bold red text) and grey after it. Each date also says "passed" or
   "upcoming" in hidden text, so the cue is not colour alone. */
.portal-timeline { list-style: none; margin: 0; padding: 0; }
.portal-timeline > li { position: relative; min-height: 1.5rem; padding: 0 0 1rem 2.25rem; }
.portal-timeline > li:last-child { padding-bottom: 0; }
.portal-timeline > li::after { content: ""; position: absolute; left: calc(.75rem - 1.5px); top: 1.5rem; bottom: 0; width: 3px; background: var(--portal-border); }
.portal-timeline > li.is-passed::after { background: var(--dsc-blue); }
.portal-timeline > li.portal-timeline-today::after { top: 0; }
.portal-timeline > li:last-child::after { display: none; }
.portal-timeline-marker { position: absolute; z-index: 1; left: 0; top: 0; width: 1.5rem; height: 1.5rem; border: 2px solid var(--dsc-blue); border-radius: 50%; background: #fff; }
.is-passed > .portal-timeline-marker { background: var(--dsc-blue); }
.is-passed > .portal-timeline-marker::after { content: ""; position: absolute; left: .4rem; top: .15rem; width: .4rem; height: .7rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.portal-timeline-today > .portal-timeline-marker { left: .3125rem; top: .3125rem; width: .875rem; height: .875rem; border: 0; background: var(--dsc-red); }
.portal-timeline-label { display: block; font-weight: 600; line-height: 1.5rem; }
.portal-timeline-when { display: block; color: #4b5563; }
.portal-timeline-today-text { display: block; color: var(--dsc-red); font-weight: 700; line-height: 1.5rem; }

/* The project page's Ask a question card: the privacy promise as a callout, and the live character count (charcount.js), which turns
   amber near the limit and DSC red at it. */
.portal-ask { border-color: var(--portal-border); }
.portal-callout { display: flex; align-items: flex-start; gap: .5rem; background: var(--portal-table-head); color: var(--dsc-blue); border-radius: .25rem; padding: .5rem .75rem; }
.portal-callout > i { margin-top: .2rem; }
.portal-charcount { white-space: nowrap; }
.portal-charcount.is-near { color: #8a5a00; font-weight: 600; }
.portal-charcount.is-full { color: var(--dsc-red); font-weight: 700; }

/* The project page's published questions and answers: a filled DSC Blue "Q" beside DSC's wording and a green "A" beside the answer
   (decorative: each paragraph also says "Question:" or "Answer:" in hidden text), and the search box for a long list (qasearch.js). */
.portal-count { color: #4b5563; font-weight: 400; }
.portal-qa { border-color: var(--portal-border); }
.portal-qa-row { display: flex; align-items: flex-start; gap: .75rem; }
.portal-qa-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: .85rem; font-weight: 700; }
.portal-qa-mark.is-q { background: var(--dsc-blue); color: #fff; }
.portal-qa-mark.is-a { background: #e3f1e6; color: #1e5a2b; }
.portal-qa-question { color: var(--dsc-blue); font-weight: 600; padding-top: .1rem; }
.portal-qa-search { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.portal-qa-search > input { flex: 1 1 16rem; max-width: 32rem; }
.portal-qa mark { padding: 0 .1em; }

/* The proposal editor's files: a card per required document (and "Other") with a status badge, each file with an icon, size, time
   and uploader, the results of the last uploads, and the drop zone and progress rows that upload.js adds to each slot's form. */
.portal-slot { border-color: var(--portal-border); }
.portal-file { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: .4rem 0; border-top: 1px solid var(--portal-border); }
.portal-file > i { color: var(--dsc-blue); font-size: 1.15rem; }
.portal-file-name { font-weight: 600; overflow-wrap: anywhere; }
.portal-file-meta { color: #4b5563; font-size: .875rem; }
.portal-file > form { margin-left: auto; }
.portal-dropzone.is-enhanced { border: 2px dashed var(--portal-border); border-radius: .25rem; padding: .75rem; background: #fbfcfd; }
.portal-dropzone.is-dragover { border-color: var(--dsc-blue); background: var(--portal-table-head); }
.portal-dropzone-hint { margin: .5rem 0 0; color: #4b5563; }
.portal-upload-queue:not(:empty) { margin-top: .5rem; }
.portal-upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: .25rem 0; }
.portal-upload-row > progress { flex: 1 1 8rem; max-width: 16rem; height: .5rem; }
.portal-upload-name { font-weight: 600; overflow-wrap: anywhere; }

/* The proposal editor's Ready to submit panel: what Submit needs (a file, a district, the certification), each done (a green check)
   or not (a red cross, and a link to where to fix it), and the required documents as an amber warning only. The words for each state
   are in the line too, in hidden text, so the icon is never the only cue. readiness.js keeps the district and certification lines
   current. */
.portal-ready { border: 1px solid var(--portal-border); border-radius: .25rem; background: #f6f9fb; padding: .75rem 1rem; }
.portal-ready-item { display: flex; align-items: flex-start; gap: .5rem; padding: .25rem 0; }
.portal-ready-icon { flex: none; width: 1.25rem; text-align: center; color: var(--dsc-red); }
.portal-ready-item.is-done .portal-ready-icon { color: #1e7e34; }
.portal-ready-item.is-warning .portal-ready-icon { color: #8a5a00; }
.portal-ready-item:not(.is-done) .when-done, .portal-ready-item.is-done .when-not { display: none; }
.portal-ready-missing { margin: .25rem 0 .25rem 1.1rem; padding: 0; }

/* A dashboard tile: a whole-card link. */
.portal-tile { color: inherit; border-color: var(--portal-border); }
.portal-tile:hover, .portal-tile:focus-visible { border-color: var(--dsc-blue); background: #f6f9fb; }
.portal-tile-title { display: block; color: var(--dsc-blue); font-weight: 700; }

.btn-primary {
    --bs-btn-bg: var(--dsc-blue); --bs-btn-border-color: var(--dsc-blue);
    --bs-btn-hover-bg: var(--dsc-blue-dark); --bs-btn-hover-border-color: var(--dsc-blue-dark);
    --bs-btn-active-bg: var(--dsc-blue-dark); --bs-btn-active-border-color: var(--dsc-blue-dark);
}
.btn-outline-primary {
    --bs-btn-color: var(--dsc-blue); --bs-btn-border-color: var(--dsc-blue);
    --bs-btn-hover-bg: var(--dsc-blue); --bs-btn-hover-border-color: var(--dsc-blue);
    --bs-btn-active-bg: var(--dsc-blue); --bs-btn-active-border-color: var(--dsc-blue);
}

/* Focus (WCAG 1.4.11): Bootstrap's ring is a 50% light blue and a focused field's border is #86b7fe, both under 3:1, so buttons and
   form fields get a solid DSC Blue outline. On the blue menu bar the company and user buttons get a white one instead. */
.btn:focus-visible, .form-control:focus, .form-select:focus { outline: 2px solid var(--dsc-blue); outline-offset: 2px; }
.portal-menu .btn:focus-visible { outline-color: #fff; }

/* The honeypot field (Honeypot.cs): off-screen, never shown. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* A vendor's note keeps its line breaks (the service stores them as \n), on the receipt and anywhere else it is shown as text:
   a question and its answer on the project page too. */
.portal-note { white-space: pre-line; }

/* Printing a receipt: no menu, footer, buttons, skip link or dismissible status line; the page itself fills the paper. */
@media print {
    .skip-link, .portal-menu, .portal-footer, .btn, .no-print, .alert-dismissible { display: none !important; }
    .portal-main { padding: 0; }
    body { color: #000; }
    a { color: inherit; text-decoration: none; }
}