html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---- RPIA CIS theme ---- */
:root {
    --rpia-navy: #0b2e4f;
    --rpia-navy-dark: #082338;
    --rpia-gold: #c9a04e;
    --rpia-accent: #1769aa;
}

body {
    background-color: #f4f6f8;
    color: #1f2937;
}

.rpia-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.rpia-page > main {
    flex: 1 0 auto;
    width: 100%;
}

/* Top navbar */
.rpia-navbar {
    background-color: var(--rpia-navy);
    border-bottom: 3px solid var(--rpia-gold);
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.rpia-navbar .navbar-brand {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.rpia-navbar .navbar-brand span {
    color: var(--rpia-gold);
}

.rpia-navbar .nav-link {
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
}

.rpia-navbar .nav-link:hover {
    color: #fff;
}

.rpia-navbar .nav-link.active {
    color: #fff;
    border-bottom: 2px solid var(--rpia-gold);
}

.rpia-navbar .navbar-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.btn-primary {
    background-color: var(--rpia-accent);
    border-color: var(--rpia-accent);
}

a {
    color: var(--rpia-accent);
}

/* Footer */
.rpia-footer {
    flex-shrink: 0;
    background-color: var(--rpia-navy-dark);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    padding: 0.65rem 1.25rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.rpia-footer-confidential {
    grid-column: 2;
    text-align: center;
    font-weight: 600;
    color: var(--rpia-gold);
}

.rpia-footer-copy {
    grid-column: 3;
    text-align: right;
}

/* Clickable list rows (whole-row navigation). */
tr.row-link { cursor: pointer; }
tr.row-link:hover > td { background-color: #e9f1fb; }

/* Detail-page tabs — give inactive tabs visible chrome so the strip reads as tabs, not links. */
.nav-tabs {
    border-bottom-color: var(--rpia-border-strong);
}
.nav-tabs .nav-link {
    color: var(--rpia-muted);
    background-color: #eef2f7;
    border-color: var(--rpia-border) var(--rpia-border) var(--rpia-border-strong);
    margin-right: 3px;
    font-weight: 500;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--rpia-navy);
    background-color: #e4eaf2;
    border-color: var(--rpia-border-strong);
}
.nav-tabs .nav-link.active {
    color: var(--rpia-navy);
    background-color: #fff;
    border-color: var(--rpia-border-strong) var(--rpia-border-strong) #fff;
    font-weight: 600;
}

/* Fixed-layout tables keep their columns from reflowing as you page through data. */
.table.rpia-fixed { table-layout: fixed; }
.table.rpia-fixed th, .table.rpia-fixed td { overflow-wrap: anywhere; }

/* Home hero */
.rpia-hero {
    text-align: center;
    padding: 4rem 1rem;
}

.rpia-hero h1 {
    color: var(--rpia-navy);
    font-weight: 700;
}

.rpia-hero-crest {
    display: block;
    width: 260px;
    max-width: 70vw;
    height: auto;
    margin: 0 auto 1.75rem;
    border-radius: 6px;
}

/* Login */
.login-shell {
    /* Positioning context for .login-version. Without it the stamp anchors to the document and
       drifts off the bottom of a short viewport instead of sitting in the corner. */
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--rpia-navy) 0%, var(--rpia-navy-dark) 100%);
    padding: 1.5rem;
}

.login-stage {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}

.login-shield {
    flex: 0 0 auto;
    width: 320px;
    max-width: 40vw;
    height: auto;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.45));
}

.login-card {
    flex: 0 0 400px;
    width: 400px;
    max-width: 100%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
    padding: 2rem;
}

.login-brand {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-brand h1 {
    color: var(--rpia-navy);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.login-brand h1 span {
    color: var(--rpia-gold);
}

.login-brand p {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0;
}

.login-confidential {
    text-align: center;
    color: #9ca3af;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    margin-top: 1.25rem;
    margin-bottom: 0;
}

/* Build stamp, bottom-left of the page. .login-shell is the full-viewport flex container, so
   this anchors to the page rather than to the sign-in card. Tabular figures stop the number
   changing width as it climbs from 2.9 to 2.10. */
.login-version {
    position: absolute;
    left: 1rem;
    bottom: 0.75rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

/* Side by side on desktop; stack the crest above the card only on narrow screens. */
@media (max-width: 720px) {
    .login-stage {
        flex-direction: column;
        gap: 2rem;
    }
    .login-shield {
        width: 200px;
        max-width: 60vw;
    }
    .login-card {
        flex-basis: auto;
        width: 100%;
    }
}

/* Reports */
.report-header { border-bottom: 2px solid var(--rpia-navy); margin-bottom: 1rem; padding-bottom: 0.5rem; }
.report-card { display: block; border: 1px solid #dee2e6; border-radius: 8px; padding: 1rem; height: 100%; text-decoration: none; color: inherit; transition: box-shadow .15s; }
.report-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); color: inherit; }
.report-card h3 { font-size: 1rem; color: var(--rpia-navy); margin-bottom: .25rem; }
.report-card p { font-size: .85rem; color: #6b7280; margin: 0; }

/* ---- RPIA modern UI pass ---- */
:root {
    --rpia-surface: #ffffff;
    --rpia-border: #e3e7ec;
    --rpia-border-strong: #d6dbe1;
    --rpia-muted: #64748b;
    --rpia-text: #1f2937;
    --rpia-row-hover: #f7f9fb;
    --rpia-shadow: 0 1px 2px rgba(16, 40, 67, .04), 0 6px 18px rgba(16, 40, 67, .06);
}

html, body {
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

main h1, main .h1, main h2, main .h2 {
    color: var(--rpia-navy);
    font-weight: 700;
    letter-spacing: -.01em;
}

.card {
    border: 1px solid var(--rpia-border);
    border-radius: 12px;
    box-shadow: var(--rpia-shadow);
}

.card-header {
    background: #fff;
    border-bottom: 1px solid var(--rpia-border);
    color: var(--rpia-navy);
    font-weight: 600;
}

.btn { border-radius: 8px; font-weight: 500; }
.btn-primary { background-color: var(--rpia-navy); border-color: var(--rpia-navy); }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus { background-color: #0e3a63; border-color: #0e3a63; }
.btn-outline-primary { color: #33506b; border-color: var(--rpia-border-strong); }
.btn-outline-primary:hover { background-color: #eef3f8; color: var(--rpia-navy); border-color: #b9c4cf; }
.btn-outline-secondary { color: #5b6470; border-color: var(--rpia-border-strong); }
.btn-outline-secondary:hover { background-color: #f1f3f5; color: #33414f; border-color: #b9c4cf; }

.form-label { font-size: .82rem; font-weight: 500; color: #475569; margin-bottom: .25rem; }
.form-control, .form-select { border-radius: 8px; border-color: var(--rpia-border-strong); }
.form-control:focus, .form-select:focus { border-color: var(--rpia-accent); box-shadow: 0 0 0 .2rem rgba(23, 105, 170, .15); }

.table-responsive {
    background: var(--rpia-surface);
    border: 1px solid var(--rpia-border);
    border-top: 3px solid var(--rpia-gold);
    border-radius: 12px;
    box-shadow: var(--rpia-shadow);
    overflow: hidden;
}

.table { margin-bottom: 0; }

.table > thead > tr > th {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--rpia-navy);
    background: #eef2f7;
    border-bottom: 2px solid var(--rpia-navy);
    padding: .85rem 1rem;
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: .95rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #eef1f4;
    color: var(--rpia-text);
}

.table > tbody > tr:last-child > td { border-bottom: 0; }
.table-striped { --bs-table-striped-bg: #f6f8fb; }
.table-hover > tbody > tr:hover > * { background-color: #e9f1fb; }
.table-hover > tbody > tr:hover > td:first-child { box-shadow: inset 3px 0 0 var(--rpia-navy); }

/* A muted dash for empty cells so the grid doesn't read as full of holes. */
.table.rpia-fixed tbody td:empty::after { content: "—"; color: var(--rpia-muted); }

/* Long free-text cells in a list: show the first couple of lines and keep the rows scannable.
   Screen only - on paper the whole note has to be there, and the print rule below undoes it.
   The clamp lives on an inner div because -webkit-box on a <td> breaks table layout. */
/* Deggy checkpoint location on the out-of-town list. Sits under the note rather than inside it:
   the note is clamped to two lines, and appended text would fall past the cut on exactly the rows
   with the most to say. Kept to one line - the values are short, and a wrapped one would undo the
   row-height budget the pager is tuned to. */
.rpia-deggy {
    margin-top: .2rem;
    font-size: .78rem;
    color: #1e5b2c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rpia-deggy-tag {
    display: inline-block;
    background: #eaf4ec;
    border: 1px solid #cfe3d5;
    border-radius: 3px;
    padding: 0 .3rem;
    margin-right: .25rem;
    font-size: .68rem;
    font-weight: 700;
}

/* On paper the whole value has to be there, like the notes above it. */
@media print {
    .rpia-deggy { white-space: normal; overflow: visible; }
}

@media screen {
    /* max-height rather than -webkit-line-clamp: something in the table cascade resolves the
       display back to flow-root, and line-clamp needs display:-webkit-box to do anything. Capping
       the height works whatever the display ends up being. */
    .rpia-clamp-2 {
        max-height: 3em;   /* about two lines at this font size */
        overflow: hidden;
    }
}

/* Supervisor review state on the dispatch list.
   A tint, not a block of colour: 88% of calls in the last ninety days are reviewed, so a solid
   green would be almost the whole screen and the eye would stop seeing it. The unreviewed ones are
   the exception worth spotting, so those carry the stronger edge. Both keep a badge as well -
   colour on its own is no use to a colour-blind officer, and it does not survive printing. */
tr.rpia-reviewed > td { background-color: #f2fbf5; }
tr.rpia-reviewed:hover > td { background-color: #e8f6ee; }
tr.rpia-reviewed > td:first-child { box-shadow: inset 3px 0 0 #2f9e5e; }

tr.rpia-unreviewed > td { background-color: #fdf3f3; }
tr.rpia-unreviewed:hover > td { background-color: #fbe9e9; }
tr.rpia-unreviewed > td:first-child { box-shadow: inset 3px 0 0 #c0392b; }

/* The striping would otherwise fight the tint on alternate rows. */
.table-striped > tbody > tr.rpia-reviewed:nth-of-type(odd) > td,
.table-striped > tbody > tr.rpia-unreviewed:nth-of-type(odd) > td { background-color: inherit; }
.table-striped > tbody > tr.rpia-reviewed:nth-of-type(odd) > * { --bs-table-accent-bg: transparent; }
.table-striped > tbody > tr.rpia-unreviewed:nth-of-type(odd) > * { --bs-table-accent-bg: transparent; }

@media print {
    /* Keep the distinction on paper, where the tints wash out. */
    tr.rpia-unreviewed > td:first-child { box-shadow: inset 3px 0 0 #000; }
}

/* Filterable list headers (click a header to filter; selected filter is highlighted). */
.rpia-th-filter { color: inherit; text-decoration: none; cursor: pointer; }
.rpia-th-filter:hover { text-decoration: underline; }
.rpia-th-select { border: 0; background: transparent; color: var(--rpia-navy); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; padding: 0; max-width: 100%; }
th.rpia-th-active { background: #fbf3df; }
th.rpia-th-active .rpia-th-filter, th.rpia-th-active .rpia-th-select { color: #8a6d1f; }

.badge { font-weight: 500; border-radius: 20px; padding: .38em .7em; }
.badge.text-bg-success { background-color: #e7f6ec !important; color: #1b7e3c !important; }
.badge.text-bg-warning { background-color: #fdf1dd !important; color: #8a5a00 !important; }
.badge.text-bg-secondary { background-color: #eef0f2 !important; color: #5b6470 !important; }
.badge.text-bg-danger { background-color: #fcebeb !important; color: #a32d2d !important; }
.badge.text-bg-info { background-color: #e6f1fb !important; color: #185fa5 !important; }
.badge.text-bg-primary { background-color: #e6edf7 !important; color: #1d4e89 !important; }
.badge.rpia-badge-purple { background-color: #efe7fb !important; color: #6b3fa0 !important; }
.badge.rpia-badge-teal { background-color: #ddf3ef !important; color: #0f766e !important; }
/* Bright, solid indicator pills (stand out from the soft category pills). */
.badge.rpia-badge-alert { background-color: #e11900 !important; color: #fff !important; }
.badge.rpia-badge-away { background-color: #2563eb !important; color: #fff !important; }

.pagination { gap: 5px; }
.page-link { border: 1px solid var(--rpia-border); border-radius: 8px; color: var(--rpia-accent); }
.page-link:hover { background: #eef3f8; border-color: #b9c4cf; }
.page-item.active .page-link { background: var(--rpia-navy); border-color: var(--rpia-navy); }
.page-item.disabled .page-link { color: #9aa4b0; }

.rpia-navbar .dropdown-menu {
    border: 1px solid var(--rpia-border);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(8, 35, 56, .16);
    padding: .35rem;
    margin-top: .45rem;
}

.rpia-navbar .dropdown-item { border-radius: 6px; font-size: .9rem; padding: .45rem .7rem; }
.rpia-navbar .dropdown-item:hover, .rpia-navbar .dropdown-item:focus { background: #eef3f8; color: var(--rpia-navy); }

.rpia-kv { display: flex; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid #f0f2f5; font-size: .9rem; }
.rpia-kv:last-child { border-bottom: 0; }
.rpia-kv .rpia-k { flex: 0 0 40%; color: var(--rpia-muted); }
.rpia-kv .rpia-v { flex: 1; color: var(--rpia-text); }

.alert { border-radius: 10px; }

/* Colored section cards on detail pages: a left accent bar + a tinted header per section. */
.rpia-section { border-left: 4px solid var(--rpia-border-strong); }
.rpia-accent-navy   { border-left-color:#0b2e4f; } .rpia-accent-navy   > .card-header { background:#eef2f7; color:#0b2e4f; }
.rpia-accent-teal   { border-left-color:#0f766e; } .rpia-accent-teal   > .card-header { background:#ddf3ef; color:#0f766e; }
.rpia-accent-gold   { border-left-color:#c9a04e; } .rpia-accent-gold   > .card-header { background:#fbf3df; color:#8a6d1f; }
.rpia-accent-purple { border-left-color:#6b3fa0; } .rpia-accent-purple > .card-header { background:#efe7fb; color:#6b3fa0; }
.rpia-accent-blue   { border-left-color:#185fa5; } .rpia-accent-blue   > .card-header { background:#e6f1fb; color:#185fa5; }
.rpia-accent-green  { border-left-color:#1b7e3c; } .rpia-accent-green  > .card-header { background:#e7f6ec; color:#1b7e3c; }
.rpia-accent-red    { border-left-color:#a32d2d; } .rpia-accent-red    > .card-header { background:#fcebeb; color:#a32d2d; }
.rpia-accent-slate  { border-left-color:#5b6470; } .rpia-accent-slate  > .card-header { background:#eef0f2; color:#5b6470; }

@media print {
    .rpia-navbar, .rpia-footer, .no-print, form.no-print { display: none !important; }
    .rpia-page > main { padding: 0 !important; }
    a[href] { color: #000 !important; text-decoration: none; }
    .table { font-size: 11px; }
    body { background: #fff; }
    /* Client-side pagination hides rows with an inline display:none. Paper has no pager, so a
       printed report has to carry the whole period rather than whichever page was on screen. */
    table.js-paginate tbody tr { display: table-row !important; }
}