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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/* Blazor's FocusOnNavigate (App.razor) moves keyboard focus to the page's h1
   on every navigation for screen readers; h1 isn't normally focusable, so
   browsers draw a default focus rectangle around it. The focus move itself
   is the accessibility win - the visible ring is just noise for sighted
   users, so suppress it here rather than per page. */
h1:focus {
    outline: none;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.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."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.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;
}

body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    margin: 0;
    color: #1a1a1a;
}

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

.topnav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.75rem 1.5rem;
    background: #1b3a57;
    color: white;
}

.topnav a {
    color: #d8e6f3;
    text-decoration: none;
}

.topnav a:hover, .topnav a.active {
    color: white;
    text-decoration: underline;
}

.topnav .brand-logo {
    height: 36px;
    width: auto;
    border-radius: 4px;
    flex-shrink: 0;
}

.topnav .brand {
    font-weight: 600;
    font-size: 1.1rem;
}

.topnav .spacer {
    flex: 1;
}

.topnav .user {
    color: #d8e6f3;
    font-size: 0.9rem;
}

/* On desktop the links live in a wrapper div (so it can be collapsed on
   mobile), but display:contents makes that wrapper invisible to layout - its
   children join the .topnav flex row directly, so the desktop look is
   unchanged from a single flat row. */
.topnav-links {
    display: contents;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .topnav {
        flex-wrap: wrap;
    }

    .menu-toggle {
        display: block;
    }

    .topnav-links {
        display: none;
        flex-basis: 100%;
    }

    .topnav-links.open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        width: 100%;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .topnav-links.open .spacer {
        display: none;
    }

    .topnav-links.open a,
    .topnav-links.open .link-button,
    .topnav-links.open .user {
        padding: 0.4rem 0;
    }
}

.link-button {
    background: none;
    border: none;
    color: #d8e6f3;
    text-decoration: underline;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
}

.content {
    padding: 1.5rem;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.access-denied {
    padding: 2rem;
    text-align: center;
    color: #b32121;
}

table.data {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

table.data th, table.data td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #ddd;
}

/* table.data has width:100%, so on a narrow screen with many columns the
   browser shrinks each column to fit - including action-button cells, which
   forces "Approve"/"Reject" to wrap onto separate lines with almost no gap
   between them (looks like they're stacked on top of each other). Forcing
   these cells not to wrap makes the table (inside its overflow-x:auto
   wrapper) grow past 100% instead, so it scrolls horizontally rather than
   crushing the buttons. */
table.data td.actions {
    white-space: nowrap;
}

table.data td.actions button {
    margin-right: 0.4rem;
}

table.data td.actions button:last-child {
    margin-right: 0;
}

table.data th {
    background: #f2f5f8;
}

table.data tbody tr:nth-child(even) {
    background: #f8fafc;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.5rem;
    max-width: 700px;
}

.form-grid label {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    gap: 0.25rem;
}

.form-grid input, .form-grid select, .form-grid textarea {
    padding: 0.4rem;
    font-size: 1rem;
}

.form-actions {
    margin-top: 1rem;
    grid-column: 1 / -1;
}

.error-message {
    color: #b32121;
    margin: 0.5rem 0;
}

.auth-page {
    max-width: 400px;
    margin: 3rem auto;
    padding: 0 1rem;
}

.auth-page h1 {
    text-align: center;
    color: #1b3a57;
    margin-bottom: 1.5rem;
}

.auth-form,
.card-form {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(27, 58, 87, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.auth-form label,
.card-form label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #33475b;
}

.auth-form input,
.card-form input,
.card-form select {
    padding: 0.65rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-form input:focus,
.card-form input:focus,
.card-form select:focus {
    outline: none;
    border-color: #1b3a57;
    box-shadow: 0 0 0 3px rgba(27, 58, 87, 0.15);
}

.auth-form button[type="submit"],
.card-form button[type="submit"] {
    background: #1b3a57;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.auth-form button[type="submit"]:hover:not(:disabled),
.card-form button[type="submit"]:hover:not(:disabled) {
    background: #142d44;
}

.auth-form button[type="submit"]:disabled,
.card-form button[type="submit"]:disabled {
    opacity: 0.7;
    cursor: default;
}

.auth-form p {
    text-align: center;
    margin: 0;
}

.auth-form .error-message {
    color: #b32121;
}

.auth-form a {
    color: #1b3a57;
    font-weight: 600;
}