/*
 * Brand / theme layer on top of Bootstrap 5 (loaded first in base.html.twig).
 * Bootstrap provides the grid, tables, forms, buttons and utilities; this file
 * only adds the MediWeb look (Lato, brand colour, page chrome) and form polish.
 */

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/lato-300.ttf") format("truetype");
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/lato-400.ttf") format("truetype");
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/lato-400.ttf") format("truetype");
}

:root {
    --brand: #0590e5;
    --brand-dark: #0571b3;
    --ink: #2b2f33;
    --muted: #6c757d;
    --line: #e3e6ea;

    /* Re-theme Bootstrap components that use these CSS variables. */
    --bs-primary: var(--brand);
    --bs-link-color: var(--brand);
    --bs-link-hover-color: var(--brand-dark);
}

html {
    background: #eef1f4;
}

body {
    color: var(--ink);
    font-family: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Public evaluation form: white sheet on a soft background ---------- */
body.evaluation-form {
    /* Matches the original ecmo.mediweb.us Bootstrap .container width (1105px at
       desktop) so the rating tables render at the same width as the original. */
    max-width: 1105px;
    margin: 2rem auto 3rem;
    padding: 0 0 2rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .75rem;
    box-shadow: 0 8px 30px rgba(16, 24, 40, .06);
}

body.evaluation-form > * {
    padding-left: clamp(1rem, 4vw, 2.5rem);
    padding-right: clamp(1rem, 4vw, 2.5rem);
}

.page-title {
    margin: 0 0 1.5rem;
    padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .2px;
    border-radius: .75rem .75rem 0 0;
}

/* activity heading definition list */
body.evaluation-form dl.row {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--line);
}

body.evaluation-form dl.row dt {
    color: var(--muted);
    font-weight: 700;
}

/* section blocks */
.fieldset {
    margin: 2rem 0;
}

.fieldset > h3 {
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--brand);
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.fieldset > h3 .fst-italic {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--muted);
}

/* rating / speaker tables */
.table {
    --bs-table-border-color: var(--line);
    margin-bottom: 0;
}

/* On desktop/tablet the rating tables fill the sheet width, exactly like the
   original (Bootstrap display:table; width:100%). On phones they switch to their
   own horizontal scroll so the right-hand rating columns aren't clipped. */
.table-speakers,
.table-expectations {
    width: 100%;
}

.mobile-rating-label {
    display: none;
}

/* Row-header cells (the question/statement text) are exposed to screen readers
   via scope="row" but should still look like plain left-aligned body cells. */
.table th.prompt-cell {
    background: #fff;
    font-weight: 400;
    text-align: left;
}

.table th {
    background: #f6f7f9;
    font-weight: 700;
    vertical-align: middle;
}

.table-speakers > tbody > tr > th,
.table-speakers th[scope="col"] {
    background: #e4f1fb;
    color: var(--brand-dark);
}

.table td,
.table th {
    vertical-align: middle;
}

.table .form-check-input {
    margin: 0 auto;
    float: none;
    width: 1.15em;
    height: 1.15em;
}

.table .form-check {
    padding: 0;
    min-height: 0;
    display: flex;
    justify-content: center;
}

/* brand-coloured selected controls */
.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

.form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(5, 144, 229, .25);
}

/* brand button (overrides Bootstrap's primary via its component variables) */
.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
    --bs-btn-focus-shadow-rgb: 5, 144, 229;
}

button[type="submit"].btn-primary {
    margin-top: 1rem;
    padding: .6rem 2.2rem;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* help & validation text */
.field-help {
    margin-bottom: .35rem;
    color: var(--muted);
    font-size: .9rem;
}

.field-error,
.has-error .form-label,
.has-error .col-form-label,
.has-error legend {
    color: var(--brand);
    font-weight: 600;
}

.field-error {
    font-size: .875rem;
    margin-top: .25rem;
}

.table-error {
    display: block;
}

.alert-error {
    margin-bottom: 1.25rem;
    padding: .85rem 1rem;
    color: #842029;
    background: #f8d7da;
    border: 1px solid #f1aeb5;
    border-radius: .5rem;
}

tr.has-error > * {
    background: #fdf3f4;
}

/* ---------- Public form: phone layout ---------- */
@media (max-width: 767.98px) {
    body.evaluation-form {
        width: 100%;
        min-height: 100dvh;
        margin: 0;
        padding-bottom: 1.5rem;
        overflow-x: hidden;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body.evaluation-form > * {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    body.evaluation-form .page-title {
        margin-bottom: 1rem;
        padding: 1.15rem 1rem;
        border-radius: 0;
        font-size: 1.25rem;
        line-height: 1.3;
    }

    body.evaluation-form dl.row {
        --bs-gutter-x: 0;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }

    body.evaluation-form dl.row dt {
        margin-top: .55rem;
        font-size: .82rem;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    body.evaluation-form dl.row dd {
        margin-bottom: 0;
        font-size: 1rem;
    }

    .public-evaluation-form > p {
        margin-bottom: 1.25rem;
    }

    .fieldset {
        margin: 1.5rem 0;
    }

    .fieldset > h3 {
        margin-bottom: .8rem;
        font-size: .98rem;
        line-height: 1.45;
    }

    .public-evaluation-form .table-speakers,
    .public-evaluation-form .table-expectations,
    .public-evaluation-form .table-speakers > tbody,
    .public-evaluation-form .table-expectations > tbody {
        display: block;
        width: 100%;
    }

    .public-evaluation-form .table-speakers,
    .public-evaluation-form .table-expectations {
        border: 0;
    }

    .public-evaluation-form .rating-desktop-head,
    .public-evaluation-form .rating-desktop-heading {
        display: none;
    }

    .public-evaluation-form .speaker-rating-group {
        margin-bottom: 1rem;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: .65rem;
        background: #fff;
    }

    .public-evaluation-form .speaker-rating-heading {
        display: block;
    }

    .public-evaluation-form .speaker-rating-heading .speaker-name {
        display: block;
        width: 100%;
        padding: .8rem .9rem;
        border: 0;
        background: #e4f1fb;
        color: var(--brand-dark);
        font-size: 1rem;
    }

    .public-evaluation-form .rating-question-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem;
        width: 100%;
        margin-bottom: .8rem;
        padding: .85rem;
        border: 1px solid var(--line);
        border-radius: .65rem;
        background: #fff;
    }

    .public-evaluation-form .speaker-rating-group .rating-question-row {
        margin: 0;
        border: 0;
        border-top: 1px solid var(--line);
        border-radius: 0;
    }

    .public-evaluation-form .rating-question-row > .prompt-cell {
        display: block;
        grid-column: 1 / -1;
        width: auto;
        padding: 0 0 .25rem;
        border: 0;
        background: transparent;
        color: var(--ink);
        font-weight: 700;
        line-height: 1.4;
    }

    .public-evaluation-form .rating-question-row > td {
        display: block;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .public-evaluation-form .mobile-rating-choice {
        display: flex;
        align-items: center;
        min-height: 3rem;
        gap: .55rem;
        padding: .65rem .7rem;
        border: 1px solid #ccd3da;
        border-radius: .55rem;
        background: #f8f9fa;
        text-align: left;
        cursor: pointer;
    }

    .public-evaluation-form .mobile-rating-choice:has(input:checked) {
        border-color: var(--brand);
        background: #eaf6fd;
        color: var(--brand-dark);
        font-weight: 700;
    }

    .public-evaluation-form .mobile-rating-label {
        display: inline;
        line-height: 1.2;
    }

    .public-evaluation-form .table .form-check-input {
        flex: 0 0 auto;
        width: 1.3rem;
        height: 1.3rem;
        margin: 0;
    }

    .public-evaluation-form .choice-field {
        padding: .85rem;
        border: 1px solid var(--line);
        border-radius: .65rem;
    }

    .public-evaluation-form .choice-field legend {
        float: none;
        width: 100%;
        margin-bottom: .55rem;
        padding: 0;
        font-weight: 700;
        line-height: 1.4;
    }

    .public-evaluation-form .yes-no-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem;
    }

    .public-evaluation-form .mobile-choice-option {
        min-height: 3rem;
        margin: 0;
        padding: .65rem .65rem .65rem 2.35rem;
        border: 1px solid #ccd3da;
        border-radius: .55rem;
        background: #f8f9fa;
    }

    .public-evaluation-form .mobile-check-option {
        display: flex;
        align-items: flex-start;
        min-height: 3rem;
        gap: .65rem;
        margin-bottom: .55rem;
        padding: .7rem .75rem;
        border: 1px solid var(--line);
        border-radius: .55rem;
        background: #f8f9fa;
        line-height: 1.35;
    }

    .public-evaluation-form .mobile-check-option .form-check-input {
        flex: 0 0 auto;
        width: 1.25rem;
        height: 1.25rem;
        margin: .05rem 0 0;
    }

    .public-evaluation-form .form-control {
        min-height: 3rem;
        font-size: 1rem;
    }

    .public-evaluation-form textarea.form-control {
        min-height: 7.5rem;
    }

    .public-evaluation-form button[type="submit"].btn-primary {
        width: 100%;
        min-height: 3.2rem;
        margin-top: .5rem;
        padding: .75rem 1rem;
    }
}

/* ---------- Confirmation page ---------- */
body.evaluation-form .confirmation,
.confirmation {
    margin: 3rem auto;
    max-width: 720px;
    padding: 2.5rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .75rem;
    box-shadow: 0 8px 30px rgba(16, 24, 40, .06);
    text-align: center;
}

.confirmation h1 {
    color: var(--brand-dark);
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

/* ---------- Admin login ---------- */
body.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.login-form {
    width: 100%;
    max-width: 23rem;
    padding: 2.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .85rem;
    box-shadow: 0 12px 40px rgba(16, 24, 40, .12);
}

.login-form h1 {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    color: var(--ink);
}

.login-form label {
    display: block;
    margin: .85rem 0 .35rem;
    font-weight: 600;
}

.login-form input[type="email"],
.login-form input[type="password"] {
    display: block;
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid #ced4da;
    border-radius: .5rem;
    font-size: 1rem;
}

.login-form input:focus {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(5, 144, 229, .2);
}

.login-form .btn {
    width: 100%;
    margin-top: 1.5rem;
    padding: .65rem;
    font-size: 1.05rem;
    font-weight: 700;
}