/*
 * Enquiry dashboard.
 *
 * Blue, white and yellow, following the colour direction we agreed with the
 * client.
 *
 * I checked every foreground/background pair I use for text against WCAG 2.1
 * AA (4.5:1 for body text, 3:1 for large text). The lowest I ended up with is
 * 5.47:1. I never put text on the yellow: #F2C230 on white measures 1.63:1,
 * which fails badly, so I use it only for borders, accent bars and the unread
 * marker.
 */

:root {
    --dash-blue: #12466F;      /* 9.42:1 on white */
    --dash-blue-mid: #1B5E96;  /* 6.24:1 on white */
    --dash-blue-pale: #EAF2F8;
    --dash-yellow: #F2C230;    /* accents only, never behind text */
    --dash-ink: #1C2733;       /* 14.1:1 on white */
    --dash-muted: #5A6672;     /* 5.47:1 on white, the lowest pair used */
    --dash-line: #D8E0E8;
    --dash-bg: #FFFFFF;

    /*
     * Type scale. The page root is set to 62.5% (10px) by milligram, so
     * 1rem here = 10px, not the browser default 16px. Every dashboard font
     * size below is written against that 10px root so the scale stays
     * legible and consistent — the old values (0.78rem-0.92rem) were
     * written as if 1rem = 16px and rendered as low as 7.8px.
     */
    --dash-fs-xs: 1.2rem;   /* 12px: badges, table headers, small labels */
    --dash-fs-sm: 1.3rem;   /* 13px: secondary/meta text */
    --dash-fs-md: 1.4rem;   /* 14px: buttons */
    --dash-fs-lg: 1.8rem;   /* 18px: card titles */
    --dash-fs-xl: 2.4rem;   /* 24px: page title */
    --dash-fs-stat: 2.8rem; /* 28px: stat card numbers */
}

/* The shared layout wraps every page in milligram's .container, which caps
   out at 112rem (1120px). That's narrower than this table needs, so widen
   it on the dashboard pages that load this stylesheet.

   160rem rather than 1600px. The root is 62.5%, so 1rem is 10px and the two
   are the same width at default settings, but the rem version grows with the
   reader's own font size instead of ignoring it. min() with 100% keeps the
   page inside the viewport on a narrow screen rather than letting it set a
   width the screen cannot honour. */
.main .container {
    max-width: min(160rem, 100%);
}

.dash {
    max-width: min(160rem, 100%);
    margin: 0 auto;
    padding: 24px 20px 64px;
    color: var(--dash-ink);
}

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

.dash__header {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 3px solid var(--dash-yellow);
}

.dash__title {
    margin: 0;
    font-size: var(--dash-fs-xl);
    color: var(--dash-blue);
}

.dash__header-actions {
    display: flex;
    gap: 8px;
}

/* ---------- buttons ---------- */

.dash__btn {
    display: inline-block;
    height: auto;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--dash-blue);
    border-radius: 4px;
    background: var(--dash-blue);
    color: #FFFFFF;
    font-family: inherit;
    font-size: var(--dash-fs-md);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.dash__btn:hover,
.dash__btn:focus {
    background: var(--dash-blue-mid);
    border-color: var(--dash-blue-mid);
    color: #FFFFFF;
}

.dash__btn--ghost {
    background: #FFFFFF;
    color: var(--dash-blue);
}

.dash__btn--ghost:hover,
.dash__btn--ghost:focus {
    background: var(--dash-blue-pale);
    color: var(--dash-blue);
}

.dash__btn--small {
    width: 100px;
    padding: 4px 10px;
    font-size: var(--dash-fs-xs);
    text-align: center;
}

/* I keep a visible focus ring so the dashboard is usable from the keyboard. */
.dash__btn:focus-visible,
.dash__table a:focus-visible {
    outline: 3px solid var(--dash-yellow);
    outline-offset: 2px;
}

/* ---------- summary cards ---------- */

.dash__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 12px;
    margin: 20px 0;
    padding: 0;
    list-style: none;
}

.dash__stat {
    padding: 14px 16px;
    border: 1px solid var(--dash-line);
    border-left: 4px solid var(--dash-blue);
    border-radius: 4px;
    background: #FFFFFF;
}

.dash__stat--accent {
    border-left-color: var(--dash-yellow);
    background: var(--dash-blue-pale);
}

.dash__stat-value {
    display: block;
    font-size: var(--dash-fs-stat);
    font-weight: 700;
    color: var(--dash-blue);
}

.dash__stat-label {
    display: block;
    font-size: var(--dash-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dash-muted);
}

/* ---------- filters ---------- */

/*
 * The filter bar fits as many controls per row as the width allows.
 *
 * It used to be seven named columns that snapped to one at 880px, so at 900px
 * you got seven cramped boxes and at 879px a tall stack, with nothing in
 * between. auto-fit works it out per width instead: the columns stay at least
 * 14rem, and the browser fits however many of those it can and shares out the
 * remainder. No breakpoint needed, and it holds up at sizes nobody thought to
 * test.
 *
 * min(100%, 14rem) rather than a bare 14rem, so on a screen narrower than a
 * single column the column shrinks to the screen instead of overflowing it.
 */
.dash__filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 12px;
    align-items: end;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid var(--dash-line);
    border-radius: 4px;
    background: var(--dash-blue-pale);
}

.dash__filters .input {
    margin: 0;
}

.dash__filters label {
    display: block;
    margin-bottom: 4px;
    font-size: var(--dash-fs-xs);
    font-weight: 600;
    color: var(--dash-muted);
}

.dash__filters input,
.dash__filters select {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--dash-line);
    border-radius: 3px;
    background: #FFFFFF;
    color: var(--dash-ink);
}

.dash__filter-actions {
    display: flex;
    gap: 8px;
}

/* The 880px breakpoint that used to sit here is gone. auto-fit above covers
   every width on its own, so there is nothing left for it to do. */

/* ---------- table ---------- */

.dash__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--dash-line);
    border-radius: 4px;
}

.dash__table {
    width: 100%;
    border-collapse: collapse;
    background: #FFFFFF;
}

.dash__table th,
.dash__table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--dash-line);
    vertical-align: top;
    overflow-wrap: break-word;
}

/* Fixed column widths so the enquiries table always fits its container
   instead of forcing a horizontal scrollbar — long emails/subjects/badges
   wrap instead of bleeding past their column. Compliance and Actions get
   the largest share since a compliance pill or a stacked button pair needs
   the room. Scoped to this modifier (rather than the bare .dash__table)
   because the column count/meaning is specific to the enquiries table —
   the audit trail and admin tables have different columns and are fine
   with the browser's normal auto layout. */
/* 100rem is the same 1000px at default settings, but it grows with the
   reader's font size, so raising the text size gives the columns more room
   rather than squeezing the same width harder.

   I kept the min-width rather than letting this collapse to 100%. Seven
   columns of customer data on a phone would be about 50px each, which is
   unreadable; the wrapper scrolls sideways instead, which is the better of
   the two bad options for a dense table. */
.dash__table--enquiries {
    min-width: 100rem;
    table-layout: fixed;
}

.dash__table--enquiries th:nth-child(1) { width: 16%; }
.dash__table--enquiries th:nth-child(2) { width: 9%; }
.dash__table--enquiries th:nth-child(3) { width: 11%; }
.dash__table--enquiries th:nth-child(4) { width: 15%; }
.dash__table--enquiries th:nth-child(5) { width: 8%; }
.dash__table--enquiries th:nth-child(6) { width: 15%; }
.dash__table--enquiries th:nth-child(7) { width: 9%; }
.dash__table--enquiries th:nth-child(8) { width: 17%; text-align: center; }

.dash__table thead th {
    background: var(--dash-blue);
    color: #FFFFFF;
    font-size: var(--dash-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dash__table thead th a,
.dash__table thead th a:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.dash__table thead th a.asc::after { content: " \25B2"; }
.dash__table thead th a.desc::after { content: " \25BC"; }

.dash__table tbody tr:hover {
    background: var(--dash-blue-pale);
}

/* I mark unread rows with a yellow edge. I do not rely on colour alone: the
   status column still spells the state out, so this works without colour
   vision. */
.dash__table tbody tr.is-unread {
    box-shadow: inset 4px 0 0 var(--dash-yellow);
    font-weight: 600;
}

.dash__nowrap { white-space: nowrap; }

.dash__preview {
    display: block;
    margin-top: 2px;
    font-size: var(--dash-fs-sm);
    font-weight: 400;
    color: var(--dash-muted);
}

/* display:flex directly on a <td> inside a table-layout:fixed table renders
   inconsistently across browsers — the flex content can paint past the
   column's fixed width instead of wrapping inside it. Plain inline-block
   buttons with their own margin wrap safely within the cell instead. */
.dash__actions-col .dash__btn {
    margin: 0 6px 6px 0;
}

.dash__actions-col form {
    display: inline;
}

.dash__empty {
    padding: 32px 12px;
    text-align: center;
    color: var(--dash-muted);
}

/* ---------- status badges ---------- */

.dash__badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--dash-line);
    font-size: var(--dash-fs-xs);
    font-weight: 600;
    white-space: nowrap;
}

.dash__badge--new {
    background: #FFF7DE;
    border-color: var(--dash-yellow);
    color: #6B4E00;           /* 7.7:1 on #FFF7DE */
}

.dash__badge--read {
    background: var(--dash-blue-pale);
    border-color: var(--dash-blue-mid);
    color: var(--dash-blue);
}

.dash__badge--archived {
    background: #F3F5F7;
    color: var(--dash-muted);
}

/*
 * Job request statuses.
 *
 * A separate set from the enquiry ones above, because they answer a different
 * question: an enquiry status is "has anyone read this message", a job request
 * status is "what did the office decide about this work". Reusing the same
 * colours would suggest the two columns mean the same thing.
 *
 * Submitted borrows the unread yellow, since a submitted request is exactly
 * the one nobody has acted on yet. Archived falls through to the shared grey
 * rule above rather than being repeated here.
 *
 * Every pair is checked against WCAG 2.1 AA (4.5:1), same as the rest.
 */

.dash__badge--submitted {
    background: #FFF7DE;
    border-color: var(--dash-yellow);
    color: #6B4E00;           /* 7.7:1 on #FFF7DE */
}

.dash__badge--reviewing {
    background: var(--dash-blue-pale);
    border-color: var(--dash-blue-mid);
    color: var(--dash-blue);  /* 8.1:1 on #EAF2F8 */
}

.dash__badge--approved {
    background: #E6F4EA;
    border-color: #2E7D32;
    color: #1E4620;           /* 9.47:1 on #E6F4EA */
}

.dash__badge--declined {
    background: #FCE8E6;
    border-color: #D93025;
    color: #8A1C1C;           /* 7.87:1 on #FCE8E6 */
}

/* Workflow stage (Enquiry/Approved/Scheduled/Completed) - deliberately its
   own blue rather than reusing a status/compliance colour, since it is a
   third, independent piece of state and conflating its colour with either
   of the others would make a badge lie about which one changed. */
.dash__badge--stage {
    background: var(--dash-blue-pale);
    border-color: var(--dash-blue-mid);
    color: var(--dash-blue);
}

/*
 * Compliance status. Green/orange/red rather than the blue/yellow used
 * above, on purpose: this is a pass/fail regulatory signal, not a workflow
 * stage, and it needs to read at a glance in a column of many rows. Each
 * pair is checked against WCAG 2.1 AA (4.5:1), same as every other badge
 * here.
 */

.dash__badge--compliance-met {
    background: #E6F4EA;
    border-color: #2E7D32;
    color: #1E4620;            /* 9.47:1 on #E6F4EA */
}

.dash__badge--compliance-partial {
    background: #FFF1E0;
    border-color: #E08A00;
    color: #7A4100;            /* 7.32:1 on #FFF1E0 */
}

.dash__badge--compliance-pending {
    background: #FCE8E6;
    border-color: #D93025;
    color: #8A1C1C;            /* 7.87:1 on #FCE8E6 */
}

/* ---------- detail card ---------- */

.dash__card {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--dash-line);
    border-top: 4px solid var(--dash-blue);
    border-radius: 4px;
    background: #FFFFFF;
}

.dash__card-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
}

.dash__card-title {
    margin: 0 0 4px;
    font-size: var(--dash-fs-lg);
    color: var(--dash-blue);
}

.dash__card-sub {
    margin: 0;
    color: var(--dash-muted);
    font-size: var(--dash-fs-sm);
}

.dash__card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.dash__meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 16px;
    margin: 18px 0;
    padding: 14px 0;
    border-top: 1px solid var(--dash-line);
    border-bottom: 1px solid var(--dash-line);
    font-size: var(--dash-fs-md);
}

.dash__meta dt {
    font-weight: 600;
    color: var(--dash-muted);
}

.dash__meta dd {
    margin: 0;
}

.dash__message {
    padding: 16px;
    border-radius: 4px;
    background: #FBFCFD;
    border: 1px solid var(--dash-line);
    line-height: 1.6;
    white-space: normal;
    overflow-wrap: anywhere;
}

.dash__card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    margin-top: 18px;
}

/* Without this the notes field's wrapper and the submit button are flex
   siblings with the default align-items:stretch, so the button balloons to
   match the taller textarea instead of sizing to its own content. */
.dash__card-actions .input {
    flex: 1 1 260px;
    margin: 0;
}

.dash__card-actions .dash__btn {
    flex: 0 0 auto;
}

.dash__card-actions form {
    display: inline;
}

/* ---------- paginator ---------- */

.dash__paginator {
    margin-top: 18px;
    text-align: center;
    color: var(--dash-muted);
    font-size: var(--dash-fs-md);
}

.dash__paginator .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    padding: 0;
    list-style: none;
}

.dash__paginator .pagination li a,
.dash__paginator .pagination li.active a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid var(--dash-line);
    border-radius: 3px;
    color: var(--dash-blue);
    text-decoration: none;
}

.dash__paginator .pagination li.active a {
    background: var(--dash-blue);
    color: #FFFFFF;
    border-color: var(--dash-blue);
}

/* ---------- login ---------- */

/* The shared top-nav logo would be redundant next to the big centered one
   below, so hide it on this page only. */
body:has(.auth-wrapper) .top-nav {
    display: none;
}

.auth-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 90vh;
    padding: 40px 20px;
}

.auth-brand {
    margin-bottom: 40px;
}

.auth-logo {
    display: block;
    height: 12rem;
    width: auto;
    margin: 0 auto;
}

.auth-back {
    display: block;
    width: 100%;
    max-width: 460px;
    margin: 0 0 14px;
    color: var(--dash-muted);
    font-size: var(--dash-fs-sm);
    font-weight: 600;
    text-decoration: none;
}

.auth-back:hover,
.auth-back:focus {
    color: var(--dash-blue);
    text-decoration: underline;
}

.auth-form {
    width: 100%;
    max-width: 460px;
    margin: 0;
}

.auth-form--wide {
    max-width: 680px;
}

.auth-field-grid {
    display: grid;
    gap: 0 18px;
    grid-template-columns: 1fr 1fr;
}

.auth-secondary {
    margin: 22px 0 0;
    text-align: center;
}

.auth-card {
    padding: 44px 40px;
    border: 1px solid var(--dash-line);
    border-top: 4px solid var(--dash-blue);
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 12px 32px rgba(18, 70, 111, 0.12);
}

.auth-title {
    margin: 0 0 28px;
    text-align: center;
    font-size: 3.2rem;
    color: var(--dash-blue);
}

.auth-card label {
    font-size: var(--dash-fs-md);
    font-weight: 600;
    color: var(--dash-muted);
}

.auth-card input {
    height: 4.6rem;
    background: var(--dash-blue-pale);
    border: 1px solid var(--dash-line);
    border-radius: 4px;
    font-size: var(--dash-fs-md);
}

.auth-card input:focus {
    background: #FFFFFF;
    border-color: var(--dash-blue);
}

.auth-password-wrap {
    position: relative;
}

.auth-password-wrap input {
    /* Room for the toggle button so typed text never runs under it. */
    padding-right: 6.5rem;
}

.auth-password-toggle {
    /* top/bottom 0 + margin auto centers the button vertically within the
       wrap's full height, regardless of its exact rendered height - more
       reliable than top:50%/translateY, which drifted toward the bottom. */
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0.6rem;
    margin: auto 0;
    height: fit-content;
    padding: 0.6rem 0.8rem;
    border: none;
    background: none;
    color: var(--dash-blue);
    font-family: inherit;
    font-size: var(--dash-fs-xs);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus {
    text-decoration: underline;
}

.auth-submit {
    display: block;
    width: 100%;
    height: auto;
    margin: 16px 0 0;
    padding: 16px;
    border: none;
    border-radius: 4px;
    background: var(--dash-blue);
    color: #FFFFFF;
    font-family: inherit;
    font-size: var(--dash-fs-lg);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
}

.auth-submit:hover,
.auth-submit:focus {
    background: var(--dash-blue-mid);
}

@media (max-width: 640px) {
    .auth-card {
        padding: 32px 24px;
    }

    .auth-field-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- office navigation ---------- */

/*
 * The client could not tell contact enquiries and job requests apart, because
 * nothing on screen separated them. This sidebar gives each its own entry with
 * a one line description, so the difference is stated rather than implied.
 *
 * Grid rather than float, and it collapses to a single column on a narrow
 * screen so the nav sits above the content on a phone instead of squeezing
 * the table.
 *
 * The sidebar is a proportion of the page, not a fixed 232px. At a fixed
 * width it took a fifth of a laptop and a fourteenth of a wide monitor, which
 * is the same nav looking cramped on one screen and lost on the other.
 *
 * minmax gives it a floor and a ceiling so the ratio cannot run away: never
 * narrower than 16rem, where "Contact enquiries" starts wrapping, and never
 * wider than a fifth of the page, where it starts stealing room the table
 * needs. Between those it just tracks the page width.
 */

.dash--with-nav {
    display: grid;
    grid-template-columns: minmax(16rem, 20%) 1fr;
    gap: clamp(1.6rem, 2%, 2.8rem);
    align-items: start;
}

/*
 * em, not px, in the media queries below.
 *
 * Media query em is always 16px regardless of the 62.5% root, so 56.25em is
 * the same 900px it was. The difference is that it now also responds to
 * someone who has raised their browser's default font size: their text is
 * bigger, so the layout collapses to one column sooner, which is the point at
 * which it actually needs to.
 */
@media (max-width: 56.25em) {
    .dash--with-nav {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.dash__main {
    min-width: 0; /* lets the table scroll instead of blowing out the grid */
}

.dash__nav {
    position: sticky;
    top: 20px;
    padding: 16px 0;
    border-right: 1px solid var(--dash-line);
}

@media (max-width: 56.25em) {
    .dash__nav {
        position: static;
        border-right: none;
        border-bottom: 1px solid var(--dash-line);
    }
}

.dash__nav-heading {
    margin: 0 12px 6px;
    font-size: var(--dash-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dash-muted);
}

.dash__nav-list {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.dash__nav-list--footer {
    margin-bottom: 0;
    padding-top: 12px;
    border-top: 1px solid var(--dash-line);
}

.dash__nav-item {
    margin: 0;
}

.dash__nav-link {
    display: block;
    padding: 8px 12px;
    border-left: 3px solid transparent;
    color: var(--dash-ink);
    font-size: var(--dash-fs-md);
    font-weight: 600;
    text-decoration: none;
}

.dash__nav-link:hover,
.dash__nav-link:focus {
    background: var(--dash-blue-pale);
    color: var(--dash-blue);
}

/*
 * The current section is marked three ways: a filled background, a left bar,
 * and aria-current in the markup. Colour alone would leave it invisible to a
 * screen reader and unreliable for anyone with a colour vision difference.
 */
.dash__nav-link.is-current {
    background: var(--dash-blue-pale);
    border-left-color: var(--dash-blue);
    color: var(--dash-blue);
}

.dash__nav-link:focus-visible {
    outline: 3px solid var(--dash-yellow);
    outline-offset: -3px;
}


/* ---------- compliance call to action ---------- */

/*
 * This was a ghost button sitting next to "Back to list", so the action you
 * came to the page to perform looked identical to the one that takes you away
 * from it. The client's feedback was that they could not find it.
 *
 * It is now solid blue, matching the site rather than introducing a new
 * colour. #12466F on white is 9.42:1, so white text on it clears WCAG AA
 * comfortably at any size.
 */

.dash__btn--compliance {
    background: var(--dash-blue);
    border-color: var(--dash-blue);
    color: #FFFFFF;
    font-weight: 700;
}

.dash__btn--compliance:hover,
.dash__btn--compliance:focus {
    background: var(--dash-blue-mid);
    border-color: var(--dash-blue-mid);
    color: #FFFFFF;
}

/*
 * Outstanding work gets the yellow accent bar. The yellow is never behind the
 * text: #F2C230 on white is 1.63:1 and would fail badly as a text background.
 * It sits to the left of white-on-blue, which keeps the contrast intact while
 * still drawing the eye.
 */
.dash__btn--compliance.is-outstanding {
    box-shadow: inset 4px 0 0 var(--dash-yellow);
    padding-left: 18px;
}

.dash__btn--compliance.dash__btn--small.is-outstanding {
    padding-left: 14px;
}

/* ---------- sign-in page ---------- */

/*
 * One narrow column. A login form stretched across a full-width page reads as
 * unfinished, and long input fields make a password harder to check.
 */
/* min() so the login card never sets a width the phone cannot honour. At
   460px fixed it overflowed the narrowest handsets by a few pixels and took
   the whole page sideways with it. */
.dash--narrow {
    max-width: min(46rem, 100%);
}

.login__roles {
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid var(--dash-line);
    border-radius: 4px;
    background: var(--dash-blue-pale);
}

.login__roles legend {
    padding: 0 6px;
    margin: 0;
}

/*
 * The radios sit on one line each with their label beside them, which is the
 * arrangement people expect and which gives a large click target. CakePHP
 * renders input then label as siblings, so this styles the pair rather than
 * wrapping them.
 */
.login__roles input[type="radio"] {
    width: auto;
    margin: 0 8px 0 0;
    vertical-align: middle;
}

.login__roles label {
    display: inline-block;
    margin: 6px 20px 6px 0;
    font-size: var(--dash-fs-md);
    font-weight: 600;
    color: var(--dash-ink);
    cursor: pointer;
}

.login__roles input[type="radio"]:focus-visible {
    outline: 3px solid var(--dash-yellow);
    outline-offset: 2px;
}

.login__form .input {
    margin-bottom: 14px;
}

.login__form input[type="text"],
.login__form input[type="password"] {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--dash-line);
    border-radius: 3px;
    background: #FFFFFF;
    color: var(--dash-ink);
}