h1:focus {
    outline: none;
}

body {
    margin: 0;
    color: #1f2937;
    background: #f8fafc;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.platform-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 17rem minmax(0, 1fr);
    background: #f4f7fb;
}

.platform-sidebar {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 1rem;
    color: #e8eef8;
    background: #17253a;
}

.platform-sidebar .app-brand {
    margin-bottom: 1.5rem;
}

.platform-sidebar .app-nav {
    display: grid;
    gap: .35rem;
}

.platform-sidebar .app-nav a {
    padding: .7rem .8rem;
    border-radius: .55rem;
    color: #cbd7e7;
    text-decoration: none;
}

.platform-sidebar .app-nav a:hover,
.platform-sidebar .app-nav a.active {
    color: #fff;
    background: #263a57;
}

.platform-sidebar .app-logout {
    margin-top: auto;
}

.platform-main {
    min-width: 0;
}

.platform-topbar {
    display: flex;
    min-height: 4rem;
    align-items: center;
    justify-content: space-between;
    padding: .75rem clamp(1rem, 3vw, 2.25rem);
    border-bottom: 1px solid #dce4ef;
    background: #fff;
    font-weight: 750;
}

.platform-content {
    max-width: 90rem;
    margin: 0 auto;
}

.platform-stat-grid,
.platform-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.platform-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.platform-stat-grid article {
    display: grid;
    gap: .5rem;
}

.platform-stat-grid span {
    color: #66758b;
}

.platform-stat-grid strong {
    color: #17253a;
    font-size: 2rem;
}

.platform-actions {
    display: grid;
    justify-items: start;
}

.platform-filters {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(10rem, .35fr) auto;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.platform-definition-list {
    display: grid;
    gap: .75rem;
    margin: 0;
}

.platform-definition-list div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid #e5eaf1;
}

.platform-definition-list dt {
    color: #66758b;
}

.platform-definition-list dd {
    margin: 0;
    text-align: right;
    font-weight: 700;
}

.platform-detail-actions,
.platform-audit-meta,
.platform-audit-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.platform-audit-filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(9rem, 1fr)) auto;
    align-items: end;
    gap: .85rem;
    margin-bottom: 1rem;
}

.platform-audit-list {
    display: grid;
    gap: .8rem;
}

.platform-audit-event {
    display: grid;
    gap: .85rem;
}

.platform-audit-event-main {
    display: grid;
    grid-template-columns: 10.5rem minmax(0, 1fr);
    gap: 1rem;
}

.platform-audit-event-main time,
.platform-audit-meta {
    color: #66758b;
    font-size: .88rem;
}

.platform-audit-event-main p {
    margin: .3rem 0;
}

.platform-audit-reason {
    padding: .6rem .75rem;
    border-left: .2rem solid #9aa9bd;
    background: #f6f8fb;
}

.platform-audit-details {
    border-top: 1px solid #e5eaf1;
    padding-top: .75rem;
}

.platform-audit-details summary {
    cursor: pointer;
    color: #304a6d;
    font-weight: 700;
}

.platform-audit-state-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: .8rem;
    margin-top: .8rem;
}

.platform-audit-state {
    padding: .8rem;
    border-radius: .6rem;
    background: #f7f9fc;
}

.platform-audit-state h3 {
    margin: 0 0 .5rem;
    font-size: .95rem;
}

.platform-audit-state dl {
    display: grid;
    gap: .45rem;
    margin: 0;
}

.platform-audit-state dl div {
    display: grid;
    grid-template-columns: minmax(8rem, .7fr) minmax(0, 1fr);
    gap: .6rem;
}

.platform-audit-state dt {
    color: #66758b;
}

.platform-audit-state dd {
    margin: 0;
    overflow-wrap: anywhere;
    font-weight: 650;
}

.platform-audit-pagination {
    justify-content: flex-end;
    margin-top: 1rem;
}

.platform-page-header {
    align-items: center;
}

.platform-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .7rem;
}

.platform-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem;
    margin-bottom: 1rem;
}

.platform-kpi-card {
    position: relative;
    display: grid;
    min-height: 7.25rem;
    align-content: center;
    gap: .25rem;
    overflow: hidden;
}

.platform-kpi-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: .25rem;
    background: #9aabba;
    content: "";
}

.platform-kpi-card span,
.platform-kpi-card small,
.platform-muted,
.platform-section-heading > span {
    color: #66758b;
}

.platform-kpi-card strong {
    color: #17253a;
    font-size: clamp(1.7rem, 2.5vw, 2.2rem);
    line-height: 1.1;
}

.platform-kpi-card.tone-primary::before { background: #2f6fed; }
.platform-kpi-card.tone-success::before { background: #16836f; }
.platform-kpi-card.tone-student::before { background: #7655c8; }
.platform-kpi-card.tone-staff::before { background: #2879a8; }
.platform-kpi-card.tone-warning::before { background: #d08a18; }
.platform-kpi-card.tone-danger::before { background: #bd3b43; }

.platform-signal-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: .9rem 1rem;
    border: 1px solid #ead6a9;
    border-radius: .75rem;
    color: #664b12;
    background: #fff9e9;
}

.platform-signal-bar div {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.platform-signal-bar div span {
    padding: .25rem .55rem;
    border-radius: 999px;
    background: #f8e8be;
    font-size: .84rem;
    font-weight: 700;
}

.platform-signal-bar a,
.platform-section-heading a {
    color: #1c5dac;
    font-weight: 750;
    text-decoration: none;
}

.platform-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(19rem, .75fr);
    gap: 1rem;
}

.platform-dashboard-wide,
.platform-dashboard-activity {
    min-width: 0;
}

.platform-dashboard-activity {
    grid-column: 1 / -1;
}

.platform-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.platform-section-heading h2,
.platform-section-heading p {
    margin: 0;
}

.platform-section-heading .eyebrow {
    margin-bottom: .2rem;
}

.platform-risk-list,
.platform-compact-list {
    display: grid;
}

.platform-risk-row,
.platform-compact-list a {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .78rem 0;
    border-top: 1px solid #e7ecf2;
    color: #243752;
    text-decoration: none;
}

.platform-risk-row:first-child,
.platform-compact-list a:first-child {
    border-top: 0;
}

.platform-risk-row div,
.platform-compact-list a > span:first-child,
.platform-table-primary,
.platform-attention-cell {
    display: grid;
    min-width: 0;
    gap: .2rem;
}

.platform-risk-row small,
.platform-compact-list small,
.platform-table-primary small,
.platform-attention-cell small {
    overflow: hidden;
    color: #66758b;
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.platform-activity-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.platform-activity-list li {
    position: relative;
    min-width: 0;
    padding: .9rem .9rem .9rem 1.35rem;
    border: 1px solid #e1e8f0;
    border-radius: .7rem;
    background: #f9fbfd;
}

.platform-activity-marker {
    position: absolute;
    top: 1.05rem;
    left: .65rem;
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: #2f6fed;
}

.platform-activity-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .4rem;
}

.platform-activity-heading time,
.platform-activity-list small {
    color: #66758b;
    font-size: .78rem;
}

.platform-activity-list p {
    margin: .4rem 0;
    line-height: 1.45;
}

.platform-institution-filters {
    grid-template-columns: minmax(14rem, 1.3fr) repeat(3, minmax(10rem, .65fr)) auto;
}

.platform-institution-table-panel {
    padding: 0;
    overflow: hidden;
}

.platform-institution-table-panel .table-summary {
    justify-content: flex-start;
    gap: .7rem;
    border-bottom: 1px solid #e5eaf1;
}

.platform-institution-table-panel .table-summary span {
    margin: 0;
    font-weight: 400;
}

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

.platform-institution-table th {
    white-space: nowrap;
}

.platform-institution-table td:first-child {
    min-width: 12rem;
}

.platform-institution-table .platform-usage-meter {
    min-width: 6.5rem;
}

.platform-table-primary .status {
    justify-self: start;
}

.platform-usage-meter {
    display: grid;
    gap: .4rem;
}

.platform-usage-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.platform-usage-heading span,
.platform-usage-meter small {
    color: #66758b;
    font-size: .8rem;
}

.platform-usage-track {
    height: .45rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e8edf3;
}

.platform-usage-track span {
    display: block;
    width: var(--platform-usage);
    height: 100%;
    border-radius: inherit;
    background: #278477;
}

.platform-usage-meter.usage-attention .platform-usage-track span { background: #d18b19; }
.platform-usage-meter.usage-critical .platform-usage-track span,
.platform-usage-meter.usage-exceeded .platform-usage-track span { background: #c7434b; }

.platform-usage-meter.is-compact {
    gap: .25rem;
}

.platform-usage-meter.is-compact .platform-usage-heading span {
    display: none;
}

.platform-usage-meter.is-compact small {
    font-size: .72rem;
    white-space: nowrap;
}

.platform-advanced-management {
    margin-top: 1.25rem;
    border-top: 1px solid #e1e8f0;
    padding-top: 1rem;
}

.platform-advanced-management > summary {
    cursor: pointer;
    color: #304a6d;
    font-weight: 750;
}

.platform-advanced-management-content {
    margin-top: 1rem;
    padding: 0 1rem 1rem;
    border: 1px solid #e1e8f0;
    border-radius: .7rem;
    background: #f9fbfd;
}

.platform-detail-hero {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #dde5ee;
}

.platform-detail-nav {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    gap: .25rem;
    margin: 0 0 1rem;
    padding: .35rem;
    overflow-x: auto;
    border: 1px solid #dbe4ee;
    border-radius: .75rem;
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 .4rem 1.2rem rgb(30 51 79 / 6%);
}

.platform-detail-nav a {
    flex: 0 0 auto;
    padding: .55rem .75rem;
    border-radius: .5rem;
    color: #435873;
    font-size: .88rem;
    font-weight: 750;
    text-decoration: none;
}

.platform-detail-nav a:hover,
.platform-detail-nav a:focus-visible {
    color: #173c71;
    background: #edf3fb;
}

.platform-detail-section {
    margin-bottom: 1rem;
    scroll-margin-top: 4.5rem;
}

.platform-definition-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 1.5rem;
}

.platform-usage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}

.platform-usage-grid article {
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: .7rem;
    background: #f9fbfd;
}

.platform-usage-grid h3 {
    margin: 0 0 .75rem;
    color: #31455f;
    font-size: .92rem;
}

.platform-pilot-defaults {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
    margin-bottom: 1rem;
}

.platform-pilot-defaults > div {
    display: grid;
    gap: .15rem;
    padding: .8rem;
    border: 1px solid #dce6f1;
    border-radius: .65rem;
    background: #f7faff;
}

.platform-pilot-defaults strong {
    color: #173c71;
    font-size: 1.25rem;
}

.platform-pilot-defaults span {
    color: #66758b;
    font-size: .78rem;
}

.platform-pilot-usage {
    margin-top: 1rem;
}

.platform-pilot-management-grid {
    display: grid;
    grid-template-columns: minmax(15rem, .8fr) minmax(24rem, 1.2fr);
    gap: 1rem;
    margin-top: 1rem;
}

.platform-pilot-operation {
    margin: 0;
    padding: 1rem;
    border: 1px solid #dce6f1;
    border-radius: .7rem;
    background: #f9fbfd;
}

.platform-personnel-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.platform-personnel-summary > strong {
    min-width: 4rem;
    color: #173c71;
    font-size: 2.5rem;
    text-align: center;
}

.platform-personnel-summary span {
    color: #30445e;
    font-weight: 750;
}

.platform-personnel-summary p {
    margin: .25rem 0 0;
    color: #66758b;
}

@media (max-width: 850px) {
    .platform-shell {
        grid-template-columns: 1fr;
    }

    .platform-sidebar {
        position: static;
    }

    .platform-sidebar .app-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .platform-sidebar .app-logout {
        margin-top: 1rem;
    }

    .platform-stat-grid,
    .platform-detail-grid,
    .platform-filters,
    .platform-audit-filters {
        grid-template-columns: 1fr;
    }

    .platform-kpi-grid,
    .platform-dashboard-grid,
    .platform-definition-grid,
    .platform-usage-grid,
    .platform-pilot-defaults,
    .platform-pilot-management-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .platform-dashboard-activity {
        grid-column: auto;
    }

    .platform-activity-list {
        grid-template-columns: 1fr;
    }

    .platform-signal-bar {
        grid-template-columns: 1fr;
    }

    .platform-audit-event-main {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .platform-pilot-defaults,
    .platform-pilot-management-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 580px) {
    .platform-page-header,
    .platform-section-heading,
    .platform-personnel-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .platform-header-actions,
    .platform-header-actions .button {
        width: 100%;
    }

    .platform-kpi-grid,
    .platform-dashboard-grid,
    .platform-definition-grid,
    .platform-usage-grid {
        grid-template-columns: 1fr;
    }
}

.foundation-shell {
    max-width: 48rem;
    margin: 12vh auto;
    padding: 2rem;
}

.foundation-shell h1 {
    margin-bottom: 1.5rem;
}

.foundation-shell p {
    line-height: 1.6;
}

.auth-shell {
    width: min(calc(100% - 2rem), 29rem);
    max-width: 29rem;
    margin: clamp(2rem, 10vh, 6rem) auto;
    padding: clamp(1.4rem, 4vw, 2rem);
    border: 1px solid #dce4ef;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 1rem 2.5rem rgb(30 51 79 / 10%);
}

.auth-heading {
    margin-bottom: 1.35rem;
}

.auth-brand {
    margin: 0 0 .55rem;
    color: #176f67;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.auth-shell h1 {
    margin: 0;
    color: #15233a;
    font-size: clamp(1.65rem, 6vw, 2rem);
}

.auth-shell .auth-intro {
    margin: .35rem 0 0;
    color: #66758b;
}

.auth-form,
.auth-field {
    display: grid;
}

.auth-form {
    gap: 1rem;
}

.auth-field {
    gap: .4rem;
}

.auth-field label,
.auth-shell > label,
.auth-shell > :is(password-activation, password-reset, administrator-recovery, passkey-activation) label {
    color: #344963;
    font-size: .9rem;
    font-weight: 700;
}

.auth-field input,
.auth-shell > :is(password-activation, password-reset, administrator-recovery, passkey-activation) input {
    width: 100%;
    min-height: 2.8rem;
    padding: .65rem .75rem;
    border: 1px solid #bfcbd9;
    border-radius: .55rem;
    color: #1e304a;
    background: #fff;
}

.auth-field input:focus,
.auth-shell > :is(password-activation, password-reset, administrator-recovery, passkey-activation) input:focus {
    border-color: #4d9b91;
    outline: 3px solid rgb(44 126 219 / 22%);
    outline-offset: 1px;
}

.auth-submit,
.auth-shell > :is(password-activation, password-reset, administrator-recovery, passkey-activation) button {
    display: inline-flex;
    min-height: 2.8rem;
    align-items: center;
    justify-content: center;
    padding: .68rem 1rem;
    border: 1px solid transparent;
    border-radius: .55rem;
    color: #fff;
    background: #176f67;
    cursor: pointer;
    font: inherit;
    font-weight: 750;
}

.auth-submit:hover:not(:disabled),
.auth-shell > :is(password-activation, password-reset, administrator-recovery, passkey-activation) button:hover:not(:disabled) {
    background: #105c56;
}

.auth-submit:disabled,
.auth-shell > :is(password-activation, password-reset, administrator-recovery, passkey-activation) button:disabled {
    cursor: not-allowed;
    opacity: .58;
}

.auth-submit-secondary {
    border-color: #b8c8d8;
    color: #2c425f;
    background: #fff;
}

.auth-submit-secondary:hover:not(:disabled) {
    background: #f3f7fa;
}

.auth-alternative {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e1e7ef;
}

.auth-error {
    margin: 0;
}

.auth-error:empty {
    display: none;
}

.login-shell {
    display: grid;
    width: min(calc(100% - 3rem), 70rem);
    max-width: 70rem;
    min-height: min(42rem, calc(100dvh - 4rem));
    grid-template-columns: minmax(0, 1.08fr) minmax(22rem, .92fr);
    margin: 2rem auto;
    padding: 0;
    overflow: hidden;
    border-color: #cfd9e7;
    border-radius: 1.35rem;
    box-shadow: 0 1.5rem 4rem rgb(18 35 63 / 16%);
}

.login-hero {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(2rem, 5vw, 4rem);
    color: #e8f1f7;
    background: #12233f;
}

.login-brand-lockup {
    display: flex;
    align-items: center;
    gap: .85rem;
    color: #fff;
    font-size: 1.12rem;
    font-weight: 800;
}

.login-brand-mark {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    place-items: center;
    border-radius: .8rem;
    color: #12233f;
    background: #86d3c5;
    letter-spacing: -.03em;
}

.login-hero-copy {
    max-width: 31rem;
    padding: 3rem 0;
}

.login-eyebrow {
    margin: 0 0 .9rem;
    color: #9edfd4;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.login-shell .login-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.login-hero-copy > p:last-child {
    max-width: 29rem;
    margin: 1.3rem 0 0;
    color: #c5d4e5;
    font-size: 1.02rem;
}

.login-trust-note {
    margin: 0;
    padding-top: 1.2rem;
    border-top: 1px solid rgb(255 255 255 / 15%);
    color: #aebed1;
    font-size: .88rem;
}

.login-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4.25rem);
    background: #fff;
}

.login-card .auth-heading {
    margin-bottom: 1.7rem;
}

.login-card h2 {
    margin: 0;
    color: #15233a;
    font-size: clamp(1.65rem, 3vw, 2.1rem);
    line-height: 1.2;
    letter-spacing: -.02em;
}

.login-card .auth-submit {
    min-height: 3rem;
    margin-top: .15rem;
}

.auth-field-hint {
    margin: -.25rem 0 0;
    color: #66758b;
    font-size: .82rem;
}

.pilot-activation-shell {
    width: min(calc(100% - 3rem), 70rem);
    max-width: 70rem;
    margin: 2rem auto;
    padding: 0;
    overflow: hidden;
    border-color: #cfd9e7;
    border-radius: 1.35rem;
    box-shadow: 0 1.5rem 4rem rgb(18 35 63 / 16%);
}

.pilot-activation-shell .login-hero {
    padding: clamp(2rem, 5vw, 3.5rem);
}

.pilot-activation-shell .login-hero-copy {
    padding: 1.5rem 0;
}

.pilot-activation-shell .login-card {
    justify-content: flex-start;
    padding: clamp(2rem, 5vw, 3.5rem);
}

.pilot-activation-shell .auth-heading {
    margin-bottom: 1.25rem;
}

.pilot-activation-shell .auth-form {
    gap: .85rem;
}

.pilot-activation-shell .auth-form .form-grid {
    gap: .85rem 1rem;
}

.pilot-activation-shell .pilot-activation-submit {
    width: 100%;
    margin-top: .25rem;
}

@media (max-width: 760px) {
    .login-shell {
        width: min(calc(100% - 1.5rem), 32rem);
        min-height: 0;
        grid-template-columns: 1fr;
        margin: .75rem auto;
        border-radius: 1rem;
    }

    .login-hero {
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .login-hero-copy {
        padding: 1.2rem 0 0;
    }

    .login-shell .login-hero h1 {
        font-size: clamp(1.7rem, 8vw, 2.35rem);
    }

    .login-hero-copy > p:last-child {
        margin-top: .85rem;
        font-size: .94rem;
    }

    .login-trust-note {
        display: none;
    }

    .login-card {
        padding: 1.5rem;
    }

    .pilot-activation-shell {
        width: min(calc(100% - 1.5rem), 32rem);
        min-height: 0;
        margin: .75rem auto;
        border-radius: 1rem;
    }

    .pilot-activation-shell .login-hero,
    .pilot-activation-shell .login-card {
        padding: 1.5rem;
    }

    .pilot-activation-shell .login-hero-copy {
        padding: 1rem 0 0;
    }

    .pilot-activation-shell .auth-form .form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 390px) {
    .login-shell {
        width: calc(100% - 1rem);
        margin: .5rem auto;
    }

    .login-hero,
    .login-card {
        padding: 1.25rem;
    }

    .pilot-activation-shell .login-hero,
    .pilot-activation-shell .login-card {
        padding: 1.25rem;
    }
}

.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: "Beklenmeyen bir hata oluştu."
    }

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

.curriculum-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.curriculum-topics-panel {
    grid-column: 1 / -1;
}

.curriculum-onboarding {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .9fr);
    gap: 1.25rem 2rem;
    align-items: center;
    border-color: #b8d5cb;
    background: linear-gradient(135deg, #f3fbf8 0%, #fff 72%);
}

.curriculum-onboarding-copy h2,
.curriculum-onboarding-copy p,
.curriculum-reviewed-note {
    margin-bottom: .55rem;
}

.curriculum-reviewed-note {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .65rem;
    color: #48645c;
    font-size: .82rem;
}

.curriculum-onboarding-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-column: 1 / -1;
    gap: .65rem;
    margin: 0;
}

.curriculum-onboarding-stats div {
    min-width: 0;
    padding: .75rem;
    border: 1px solid #d9e8e3;
    border-radius: .65rem;
    background: rgba(255, 255, 255, .8);
}

.curriculum-onboarding-stats dt {
    color: #65766f;
    font-size: .72rem;
}

.curriculum-onboarding-stats dd {
    margin: .2rem 0 0;
    color: #244c40;
    font-size: 1.1rem;
    font-weight: 750;
}

.curriculum-onboarding-actions {
    display: grid;
    justify-items: start;
    gap: .45rem;
}

.curriculum-setup-guidance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.curriculum-column,
.assignment-item-card,
.student-item-result {
    min-width: 0;
}

.inline-create,
.student-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: end;
}

.inline-create input,
.student-search-row input {
    flex: 1 1 13rem;
}

.catalog-list {
    display: grid;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: .5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.catalog-list li {
    display: grid;
    min-width: 0;
    gap: .15rem;
    padding: .75rem;
    border: 1px solid #dbe3ec;
    border-radius: .65rem;
    overflow-wrap: anywhere;
}

.catalog-list button {
    display: grid;
    width: 100%;
    gap: .15rem;
    padding: .75rem;
    border: 1px solid #dbe3ec;
    border-radius: .65rem;
    color: inherit;
    background: #fff;
    cursor: pointer;
    text-align: left;
    overflow-wrap: anywhere;
}

.catalog-list button:hover,
.catalog-list button.is-selected {
    border-color: #4d9b91;
    background: #edf9f6;
}

.catalog-list button:focus-visible {
    outline: 3px solid rgb(44 126 219 / 35%);
    outline-offset: 2px;
}

.assignment-plan-form,
.assignment-item-list,
.assignment-student-cards,
.student-item-results {
    display: grid;
    gap: 1rem;
}

.topic-picker {
    display: grid;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: .75rem;
}

.topic-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: .5rem;
    border: 0;
    padding: 0;
}

.topic-checkboxes label,
.student-selection-row {
    display: flex;
    gap: .7rem;
    align-items: center;
}

.assignment-item-card,
.student-item-result {
    padding: 1rem;
    border: 1px solid #dbe3ec;
    border-radius: .75rem;
    background: #fff;
}

.student-selection-vertical {
    display: grid;
    max-height: min(28rem, 55vh);
    margin-top: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid #dbe3ec;
    border-radius: .75rem;
}

.student-selection-row {
    padding: .75rem 1rem;
    border-bottom: 1px solid #e8edf3;
}

.student-selection-row:last-child {
    border-bottom: 0;
}

.student-selection-row span {
    display: grid;
}

.assignment-review-row {
    display: grid;
    gap: .65rem;
    padding: .85rem 1rem;
}

.assignment-review-row-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.assignment-review-row-summary {
    display: grid;
    min-width: 12rem;
    gap: .25rem;
}

.assignment-review-row-summary > small,
.assignment-review-context {
    color: #66758b;
}

.assignment-review-context {
    margin: .25rem 0 0;
    font-size: .86rem;
}

.assignment-review-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.assignment-review-row-actions {
    min-width: 0;
    justify-content: flex-end;
}

.assignment-review-details {
    margin-top: .65rem;
    padding-top: .65rem;
    border-top: 1px solid #e3e9f1;
}

.assignment-review-detail-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: .55rem .85rem;
    margin: 0;
}

.assignment-review-detail-grid > div {
    min-width: 0;
    padding: .5rem .6rem;
    border-radius: .45rem;
    background: #f7f9fc;
}

.assignment-review-detail-grid dt {
    color: #6b7a8e;
    font-size: .72rem;
    font-weight: 750;
}

.assignment-review-detail-grid dd {
    margin: .12rem 0 0;
    color: #2d425e;
    font-size: .84rem;
    overflow-wrap: anywhere;
}

.student-item-results {
    margin-top: 1rem;
}

.student-item-result {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.student-item-result > div:first-child {
    display: grid;
    gap: .4rem;
}

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

    .curriculum-onboarding {
        grid-template-columns: 1fr;
    }

    .curriculum-onboarding-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-item-result,
    .assignment-review-row-main {
        align-items: stretch;
        flex-direction: column;
    }

    .assignment-review-row-actions {
        justify-content: flex-start;
    }

    .student-item-result .review-actions {
        display: grid;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

.assignment-resource-picker {
    border: 1px solid var(--border-color, #d9dee7);
    border-radius: .65rem;
    display: grid;
    gap: .4rem;
    margin: .75rem 0;
    max-height: 13rem;
    overflow: auto;
    padding: .55rem .7rem .7rem;
}

.assignment-resource-picker legend {
    font-weight: 700;
    padding: 0 .3rem;
}

.assignment-resource-picker legend small {
    font-weight: 400;
}

.assignment-resource-option {
    align-items: center;
    display: grid;
    gap: .6rem;
    grid-template-columns: minmax(0, 1fr) 8.5rem;
}

.assignment-resource-option label,
.assignment-resource-option label span {
    display: flex;
    gap: .45rem;
    min-width: 0;
}

.assignment-resource-option label span {
    flex-direction: column;
    gap: 0;
}

.assignment-resource-option input[type="number"] {
    min-width: 0;
}

@media (max-width: 640px) {
    .assignment-resource-option {
        grid-template-columns: 1fr;
    }
}