/*
 * Structure follows docs/UI_Referenz_EUSurvey.md and screens 01/02:
 * one column, sections separated by rules, required fields with a red
 * asterisk, hint text in italics under the field label, yellow highlight for
 * the intro box and the objection field, dark blue header and table heads.
 *
 * Only what Bootstrap does not already provide is defined here.
 */

:root {
    --vk-blue: #16425b;
    --vk-blue-dark: #0f2f42;
    --vk-yellow: #fcf8d8;
    --vk-yellow-border: #e8e0a8;
    --vk-required: #c0392b;
    --vk-rule: #b9c6cf;
}

body {
    background: #fff;
    color: #212529;
}

/* -- header ------------------------------------------------------------ */

.vk-header {
    background: var(--vk-blue);
    color: #fff;
    padding: .75rem 0;
    margin-bottom: 2rem;
}

.vk-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.vk-header__nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* The account group sits at the far right. margin-inline-start:auto rather
   than relying on the container's space-between: on the sign-in page there is
   no navigation beside it, and a lone child would otherwise fall to the left. */
.vk-header__account {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-inline-start: auto;
}

.vk-header__user {
    opacity: .85;
    font-size: .95rem;
}

.vk-header__link {
    background: none;
    border: 0;
    color: #fff;
    padding: 0;
    text-decoration: underline;
    font-size: .95rem;
}

/* -- page -------------------------------------------------------------- */

.vk-main {
    max-width: 62rem;
    padding-bottom: 4rem;
}

/* Screens 01/02: a horizontal rule separates every section. */
.vk-rule {
    border: 0;
    border-top: 1px solid var(--vk-rule);
    margin: 2rem 0;
}

/* -- intro box (screen 01) --------------------------------------------- */

.vk-intro {
    background: var(--vk-yellow);
    border: 1px solid var(--vk-yellow-border);
    padding: 1.5rem 1.75rem;
}

.vk-intro__title {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.vk-intro__body p:last-child {
    margin-bottom: 0;
}

.vk-intro__deadline {
    margin-top: 1rem;
    font-weight: 700;
}

/* The visibility notice is rendered by the system and is not part of the
   free-text field (spec 5.3). It is styled apart so it cannot be mistaken
   for something an administrator typed. */
.vk-notice {
    border-left: 4px solid var(--vk-blue);
    background: #eef3f6;
    padding: .9rem 1.1rem;
    margin-top: 1rem;
}

/* -- question block (screen 02) ---------------------------------------- */

.vk-item__question {
    font-size: 1.05rem;
    margin-bottom: .75rem;
}

.vk-required {
    color: var(--vk-required);
    font-weight: 700;
}

.vk-hint {
    font-style: italic;
    color: #555;
    font-size: .9rem;
}

/* Screen 02: the two options sit indented under the question, not flush with
   it. The same 1.25rem the document link uses, so the two indents on the page
   agree with each other. */
.vk-choices {
    margin-bottom: 1rem;
    padding-inline-start: 1.25rem;
}

.vk-comment {
    background: var(--vk-yellow);
    border: 1px solid var(--vk-yellow-border);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.vk-comment textarea {
    max-width: 48rem;
}

.vk-counter {
    font-size: .85rem;
    color: #555;
}

.vk-counter--bad {
    color: var(--vk-required);
    font-weight: 600;
}

.vk-document {
    margin-bottom: .5rem;
}

.vk-document__label {
    font-weight: 600;
}

.vk-document__link {
    display: block;
    margin-left: 1.25rem;
}

/* -- result table (screens 04, spec 5.4) -------------------------------- */

.vk-results {
    overflow-x: auto;
}

.vk-results table {
    border-collapse: collapse;
    width: 100%;
}

.vk-results th,
.vk-results td {
    border: 1px solid #cfd8dd;
    padding: .5rem .65rem;
    vertical-align: top;
    font-size: .92rem;
}

.vk-results thead th {
    background: var(--vk-blue);
    color: #fff;
    font-weight: 600;
    text-align: left;
}

.vk-results tbody tr:nth-child(even) {
    background: #f6f8f9;
}

/* Keeps "Q2 MS122" on one line. Without it the column header breaks inside
   the identifier, which is the one part a reader scans for. */
.vk-nowrap {
    white-space: nowrap;
}

.vk-status--not-voted {
    color: #6c757d;
    font-style: italic;
}

.vk-overdue {
    color: var(--vk-required);
    font-weight: 600;
}

/* The arrow after a document link: it opens in a new tab, and a reader
   deserves to know that before the click, not after. Screen readers get the
   words instead, through Bootstrap's .visually-hidden. */
.vk-newtab {
    margin-left: .3em;
    font-size: .85em;
    text-decoration: none;
    display: inline-block;
}

/* The preview banner. Deliberately unlike anything else on the page: what it
   frames is a faithful copy of the partner view, so the only thing telling
   the two apart is this strip. */
.vk-preview {
    background: var(--vk-blue);
    color: #fff;
    padding: .75rem 1.1rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
}

.vk-preview a {
    color: #fff;
    text-decoration: underline;
    margin-inline-start: .5rem;
}