/*
 * 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. */
.main .container {
    max-width: 1600px;
}

.dash {
    max-width: 1600px;
    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(140px, 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 ---------- */

.dash__filters {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr auto;
    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;
}

@media (max-width: 880px) {
    .dash__filters {
        grid-template-columns: 1fr;
    }
}

/* ---------- 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. */
.dash__table--enquiries {
    min-width: 1000px;
    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);
}

/* 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;
    }
}