body {
    padding: 0;
    margin: 0;
    font-family: Calibri, "Trebuchet MS", sans-serif;
} 

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 760px) {
    .reports-flow-row {
        flex-direction: column;
        align-items: stretch;
    }

    .reports-flow-secondary {
        grid-template-columns: 1fr;
    }

    .reports-flow-meta {
        min-width: 0;
    }

    .reports-worker-summary {
        justify-content: flex-start;
    }
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -48px;
    background: #2b135f;
    color: #ffffff;
    padding: 10px 14px;
    z-index: 500;
}

.skip-link:focus {
    top: 12px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #2b135f;
    margin: 0;
    margin-top: 1vw;
    margin-bottom: 1vw;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
    margin-top: 0;
}

h6 {
    text-transform: uppercase;
    font-size: 100%;
}

a,
a:link,
a:focus,
a:visited {
    color: #ee3897;
    text-decoration: none;
}

a:focus,
button:focus,
input:focus,
label:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.wrapper {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    min-height: 100vh;
}

button,
a.btn,
button.pink,
a.btn.pink {
    background: #ee3897;
    border: 1px outset rgba(0, 0, 0, 0.5);
    margin: 1px;
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 0.9rem;
    padding: 8px 12px;
    text-transform: uppercase;
    display: inline-block;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
}

button:active,
a.btn:active,
button.pink:active,
a.btn.pink:active {
    border: 1px inset rgba(0, 0, 0, 0.5);
    background: #f157a5;
    box-shadow: none;
}

button.secondary,
a.btn.secondary {
    background: #2b135f;
}

hr {
    border: 0;
    margin-block: max(1vw, 20px);
    margin-inline: 0;
    padding: 0;
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, transparent, #ee3897, transparent) 1;
}

.nav {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 99;
    align-items: flex-start;
    background: #2b135f;
}

.nav a.logo {
    background: white;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 8px 18px 10px;
    display: inline-flex;
    position: absolute;
    text-decoration: none;
    width: 95px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.nav a.logo img {
    max-width: 100%;
    display: block;
}

.nav nav {
    width: calc(100% - 140px);
    margin-left: 140px;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, transparent, #ee3897, transparent) 1;	
}

.navtabs {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: white;
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex: 1 1 auto;
}

.nav-list li {
    display: inline-flex;
    align-items: center;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.nav-list li a,
.nav-list li a:hover,
.nav-list li a:focus,
.nav-list li a:active,
.nav-list li a:visited {
    display: block;
    color: white;
    padding: 8px 18px;
}

.nav-list li a.btn,
.nav-list li a.btn:hover,
.nav-list li a.btn:focus,
.nav-list li a.btn:active,
.nav-list li a.btn:visited {
    color: white;
    padding: 8px 12px;
}

.nav-list li a:not(.btn):hover {
    background: #ee3897;
}

.nav-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.nav-actions form {
    margin: 0;
}

.nav-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.nav-toggle-label {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(43, 19, 95, 0.3);
}

.nav-toggle-icon {
    position: relative;
    width: 20px;
    height: 2px;
    background: #ffffff;
    display: block;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    background: #ffffff;
}

.nav-toggle-icon::before {
    top: -6px;
}

.nav-toggle-icon::after {
    top: 6px;
}

.nav-toggle:checked + .nav-toggle-label .nav-toggle-icon {
    background: transparent;
}

.nav-toggle:checked + .nav-toggle-label .nav-toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.nav-toggle:checked + .nav-toggle-label .nav-toggle-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

.gradientbox {
    position: relative;
    max-width: 100%;
}

.gradientbox::before {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background: linear-gradient(270deg, #ee3897, #2b135f);
    z-index: 0;
    opacity: 0.8;
}

.gradientbox::after {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background: black;
    z-index: 0;
    opacity: 0.3;
}

.head {
    position: relative;
    padding-bottom: 48px;
    padding-top: 42px;
    background: linear-gradient(270deg, #ee3897, #2b135f), url("./images/group-photo.jpg");
    background-size: cover;
    background-position: center center;
    background-blend-mode: color;
    display: grid;
    color: white;
    grid-template-columns: 1fr auto;
    grid-gap: 20px;
    justify-content: center;
    padding-inline: 10vw;
}

.head > * {
    position: relative;
    z-index: 1;
}

.head .headimg {
    grid-column-start: -2;
    filter: drop-shadow(5px 5px 20px black);
    max-width: 100%;
    margin: auto;
    max-height: 300px;
}

.head .headblurb {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 200px;
}

.head .headblurb .headtitle {
    font-size: min(6vw, 42pt);
    line-height: 85%;
    margin: 0;
    color: white;
}

.head .headblurb .headsubtitle {
    font-size: min(2.4vw, 1.1rem);
    line-height: 150%;
}

.internal-head {
    padding-bottom: 24px;
}

.main {
    margin-top: -50px;
    position: relative;
    z-index: 1;
}

.gridholder {
    padding-inline: 8vw;
    display: grid;
    grid-column-gap: max(1vw, 20px);
    grid-template-columns: 1fr;
}

@media screen and (min-width: 800px) {
    .gridholder.grid2 {
        grid-template-columns: 1fr 1fr;
    }

    .gridholder.grid3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.gridholder .gridbox {
    background: white;
    padding: max(1vw, 20px) 3vw;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-image: linear-gradient(to top, #cccccc, transparent, transparent) 1;
    margin-bottom: max(1vw, 20px);
}

.gridholder .gridbox:has(.gradientbox) {
    padding: 1vw;
}

@media screen and (min-width: 800px) {
    .gridholder .gridbox.span2 {
        grid-column: span 2;
    }

    .gridholder .gridbox.row2 {
        grid-row: span 2;
    }
}

.gridholder .gridbox .gradientbox img {
    width: 100%;
    mix-blend-mode: normal;
    margin-bottom: -4px;
    position: relative;
    object-fit: cover;
    z-index: 1;
    filter: brightness(0.8);
}

.gridholder .gridbox .gradientbox img:hover {
    mix-blend-mode: luminosity;
    filter: brightness(0.6);
}

.gridholder .gridbox form {
    margin: 0;
}

.footer {
    background: #cccccc;
    padding-block: 20px;
    padding-inline: 8vw;
    margin-top: 20px;
    border-top: 3px solid;
    border-image: linear-gradient(to right, transparent, #ee3897, transparent) 1;	
}

.footer a {
    padding-left: 1vw;
}

.footer p {
    margin: 0;
    font-size: 0.95rem;
}

.footer h6 {
    margin-bottom: 12px;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li + li {
    margin-top: 8px;
}

.footer-links a {
    padding-left: 0;
}

.field + .field {
    margin-top: 1vw;
}

.field {
    display: grid;
    gap: 8px;
    align-content: start;
    min-width: 0;
}

.field label {
    width: auto;
    text-align: left;
    display: block;
    padding-right: 0;
    font-weight: 700;
    color: #2b135f;
}

.field label:not(:empty)::after {
    content: ":";
}

.field input {
    max-width: none;
}

.field input[type="email"],
.field input[type="password"],
.field input[type="text"],
.field input[type="datetime-local"],
.field select,
.field textarea {
    width: 100%;
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid #bdbdbd;
    box-sizing: border-box;
    font: inherit;
}

.field textarea {
    min-height: 110px;
    resize: vertical;
}

.panel {
    background: #ffffff;
    border: 1px solid #ddd6ea;
    padding: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.plain-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plain-list li + li {
    margin-top: 10px;
}

.attachment-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.attachment-delete-form {
    margin: 0;
    flex: 0 0 auto;
}

.attachment-link {
    font-size: 0.85rem;
    line-height: 1.2;
    min-width: 0;
    overflow-wrap: anywhere;
}

.grid {
    display: grid;
    gap: 20px;
}

.home-entry {
    display: grid;
    gap: 20px;
}

.home-primary-grid {
    display: grid;
    gap: 20px;
}

.home-primary-card {
    background: #ffffff;
    border: 1px solid #ddd6ea;
    padding: 24px;
}

.home-primary-card-highlight {
    background: linear-gradient(180deg, #fff6fb, #ffffff);
}

.home-checklist li {
    position: relative;
    padding-left: 18px;
}

.home-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ee3897;
}

.home-steps-grid {
    display: grid;
    gap: 16px;
}

.home-step {
    padding: 14px 16px;
    background: #fcf7fd;
    border: 1px solid #eadff4;
}

.home-step p {
    margin-top: 8px;
}

.case-submit-intro {
    margin: 0 0 14px;
    color: #5e5574;
    font-size: 0.95rem;
    line-height: 1.5;
}

@media screen and (min-width: 800px) {
    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-primary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .case-submit-layout {
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    }

    .case-view-layout {
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    }

    .case-submit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .field-span-2 {
        grid-column: span 2;
    }

    .case-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-steps-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

fieldset.panel {
    margin-top: 20px;
}

fieldset.panel legend {
    padding: 0 6px;
}

.case-hero {
    margin-bottom: 20px;
}

.case-submit-layout {
    display: grid;
    gap: 20px;
    align-items: start;
}

.case-view-layout {
    display: grid;
    gap: 20px;
    align-items: start;
}

.case-view-summary {
    background: linear-gradient(180deg, #fff6fb, #ffffff);
}

.case-status-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
}

.case-status-actions form {
    margin: 0;
    flex: 0 0 auto;
}

.status-action-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

button.status-action-button.compact,
a.btn.status-action-button.compact {
    padding: 6px 8px;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
}

.status-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    line-height: 1;
}

.status-action-icon-sleep {
    gap: 1px;
}

.status-action-icon-sleep span:nth-child(1) {
    font-size: 0.58rem;
    transform: translateY(2px);
}

.status-action-icon-sleep span:nth-child(2) {
    font-size: 0.72rem;
    transform: translateY(-1px);
}

.status-action-icon-sleep span:nth-child(3) {
    font-size: 0.86rem;
    transform: translateY(-4px);
}

.status-action-icon svg {
    width: 12px;
    height: 12px;
    display: block;
    fill: currentColor;
}

.case-view-main {
    display: grid;
    gap: 20px;
}

.case-management-warning {
    margin: 0 0 12px;
    font-size: 0.92rem;
    color: #6d4b67;
}

.case-management-grid {
    display: grid;
    gap: 16px;
}

.case-management-form h3 {
    margin: 0 0 10px;
    font-size: 1rem;
}

.case-internal-empty {
    margin-top: 16px;
    color: #7f6b9f;
}

.case-internal-panel {
    background: linear-gradient(180deg, #f6efff, #fdfaff);
    border-color: #d7c2ef;
}

.case-internal-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

.case-internal-summary::-webkit-details-marker {
    display: none;
}

.case-internal-summary h2 {
    margin: 0;
}

.case-internal-caret {
    width: 10px;
    height: 10px;
    border-right: 2px solid #8b6db0;
    border-bottom: 2px solid #8b6db0;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex: 0 0 auto;
}

.case-internal-panel[open] .case-internal-caret {
    transform: rotate(225deg);
}

.case-internal-panel .case-submit-form {
    margin-top: 14px;
}

@media (min-width: 960px) {
    .case-management-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.case-internal-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.case-internal-item {
    padding: 10px 12px;
    background: #fcf7fd;
    border: 1px solid #eadff4;
}

.case-internal-item-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: 6px;
    color: #5e5574;
    font-size: 0.85rem;
}

.case-internal-item p {
    margin: 0;
}

.case-timeline {
    display: grid;
    gap: 10px;
}

.case-timeline-group {
    display: grid;
    gap: 8px;
    padding: 8px 0 2px 14px;
    border-left: 4px solid #ee3897;
}

.case-timeline-group-header {
    display: grid;
    gap: 2px;
}

.case-timeline-group-date {
    color: #2b135f;
    font-size: 0.95rem;
    font-weight: 700;
}

.case-timeline-group-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #7f6b9f;
    font-size: 0.8rem;
    font-weight: 700;
}

.case-timeline-group-secret {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #6a5790;
}

.case-timeline-group-secret-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.case-timeline-group-secret-icon svg {
    width: 12px;
    height: 12px;
    display: block;
    fill: currentColor;
}

.case-updates-more {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    clear: both;
}

.case-updates-more-button {
    width: 50%;
    border: 0;
    background: transparent;
    box-shadow: none;
    margin: 0;
    padding: 12px 0 4px;
    text-transform: none;
}

.case-updates-more-button:hover,
.case-updates-more-button:focus {
    background: transparent;
    box-shadow: none;
    color: #ee3897;
}

.case-updates-more-button:active {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.case-updates-more-chevron {
    display: block;
    width: 100%;
    height: 12px;
    position: relative;
}

.case-updates-more-chevron::before,
.case-updates-more-chevron::after {
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    border-top: 3px solid #f4c5dd;
}

.case-updates-more-chevron::before {
    left: 0;
    transform-origin: top right;
    transform: skewY(8deg);
}

.case-updates-more-chevron::after {
    right: 0;
    transform-origin: top left;
    transform: skewY(-8deg);
}

.case-updates-more-button:hover .case-updates-more-chevron::before,
.case-updates-more-button:hover .case-updates-more-chevron::after,
.case-updates-more-button:focus .case-updates-more-chevron::before,
.case-updates-more-button:focus .case-updates-more-chevron::after {
    border-top-color: #ee3897;
}

.case-timeline-item {
    position: relative;
    padding: 4px 0 8px;
}

.case-timeline-item + .case-timeline-item {
    border-top: 1px solid #f4c5dd;
    padding-top: 8px;
}

.case-timeline-item.is-internal {
    padding: 8px 10px 10px;
    background: #f5effb;
    border: 1px solid #e1d5f1;
    border-radius: 4px;
}

.case-timeline-item.is-internal + .case-timeline-item {
    border-top: 0;
}

.case-timeline-item.is-hidden {
    display: none;
}

.case-timeline-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.case-timeline-body,
.case-timeline-time {
    margin: 0;
}

.case-timeline-time {
    color: #5e5574;
    font-size: 0.8rem;
    white-space: nowrap;
}

.case-update-attachments {
    margin-top: 8px;
}

.case-attachment-preview {
    margin-top: 10px;
    border: 1px solid #eadff4;
    background: #fcf7fd;
    padding: 8px;
}

.case-attachment-preview img,
.case-attachment-preview iframe {
    display: block;
    width: 100%;
    max-width: 100%;
}

.case-attachment-preview img {
    height: auto;
}

.case-attachment-preview iframe {
    min-height: 320px;
    border: 0;
    background: #ffffff;
}

.case-timeline-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}

.case-timeline-header h3,
.case-timeline-header p {
    margin: 0;
}

.case-timeline-header p {
    color: #5e5574;
    font-size: 0.85rem;
}

.case-submit-aside {
    background: linear-gradient(180deg, #fff6fb, #ffffff);
}

.case-status-help {
    margin: -4px 0 14px;
    color: #5e5574;
    font-size: 0.92rem;
    line-height: 1.5;
}

.case-submit-checklist li {
    position: relative;
    padding-left: 18px;
}

.case-submit-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ee3897;
}

.case-submit-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
}

.case-submit-grid .field {
    margin-top: 0;
}

.field-span-2 {
    grid-column: auto;
}

.case-submit-categories {
    background: #fcf7fd;
}

.case-category-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

.case-category-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #eadff4;
    background: #ffffff;
}

.field label.case-category-option::after {
    content: none;
}

.case-urgent-option {
    justify-content: flex-start;
    background: #fff7fb;
    border-color: #f1c7dc;
}

.case-urgent-option span {
    font-size: 0.95rem;
}

.case-category-option input {
    margin: 0;
}

.actions {
    margin-top: 20px;
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff0f7;
    border: 1px solid #f4c5dd;
    color: #2b135f;
    font-size: 0.82rem;
    line-height: 1.2;
}

.dashboard-account-panel,
.dashboard-alerts-panel,
.dashboard-column {
    display: grid;
    gap: 14px;
}

.dashboard-account-panel {
    gap: 0;
}

.dashboard-account-summary {
    display: grid;
    gap: 4px;
}

.dashboard-account-title {
    color: #2b135f;
    font-size: 1.1rem;
    font-weight: 700;
}

.dashboard-account-summary-toggle {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
}

.dashboard-account-summary-toggle::-webkit-details-marker {
    display: none;
}

.dashboard-account-caret {
    width: 10px;
    height: 10px;
    border-right: 2px solid #b00c62;
    border-bottom: 2px solid #b00c62;
    transform: rotate(45deg);
    flex: 0 0 auto;
    margin-right: 6px;
}

.dashboard-account-panel[open] .dashboard-account-caret {
    transform: rotate(225deg);
    margin-top: 6px;
}

.dashboard-account-body {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.dashboard-account-form {
    margin-top: 6px;
}

.dashboard-availability-form {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #ead9ec;
}

.dashboard-availability-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

.dashboard-availability-header h3,
.dashboard-availability-header p {
    margin: 0;
}

.dashboard-availability-header p {
    font-size: 0.92rem;
    color: #5e5574;
}

.dashboard-availability-fields {
    display: grid;
    gap: 14px;
    align-items: end;
}

.dashboard-availability-help {
    margin: 8px 0 0;
    font-size: 0.84rem;
    color: #6b6479;
}

.dashboard-account-fields {
    display: grid;
    gap: 14px;
    align-items: end;
}

.dashboard-account-form .field,
.dashboard-availability-form .field {
    margin-top: 0;
}

.dashboard-account-form label,
.dashboard-availability-form label {
    font-size: 0.86rem;
}

.dashboard-account-form input,
.dashboard-account-form select,
.dashboard-availability-form input,
.dashboard-availability-form select {
    padding: 8px 10px;
}

.dashboard-account-readonly p {
    margin: 0;
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid #ddd6ea;
    background: #fcf7fd;
    color: #5e5574;
    box-sizing: border-box;
}

.dashboard-account-save {
    align-self: end;
}

.dashboard-account-save-button {
    min-width: 38px;
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.dashboard-account-save-button svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: #ffffff;
}

.icon-button {
    min-width: 24px;
    width: 24px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

button.icon-button.compact,
a.btn.icon-button.compact {
    padding: 0;
}

.icon-button svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: #ffffff;
}

.dashboard-account-summary p,
.dashboard-alerts-panel p,
.dashboard-empty,
.dashboard-case-date,
.dashboard-case-overview,
.dashboard-case-update {
    margin: 0;
}

.dashboard-account-summary p,
.dashboard-empty,
.dashboard-case-date,
.dashboard-case-overview,
.dashboard-case-update {
    color: #5e5574;
}

.dashboard-columns {
    display: grid;
    gap: 20px;
}

.dashboard-column {
    align-content: start;
}

.dashboard-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-case-card {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid #ecddea;
    border-radius: 12px;
    background: #fff8fb;
}

.dashboard-case-card + .dashboard-case-card {
    margin-top: 10px;
}

.dashboard-case-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-case-main {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.dashboard-case-line {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #2b135f;
    font-size: 0.95rem;
    line-height: 1.3;
}

.dashboard-case-reference {
    color: #310c58;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.member-membership-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 0.8rem;
    color: #5e5574;
}

.membership-review-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.membership-review-badge.is-confirmed {
    background: #f9d4ea;
    color: #b00c62;
}

.membership-review-badge.is-unconfirmed {
    background: #f2ecf8;
    color: #310c58;
}

.dashboard-case-status,
.case-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
}

.dashboard-case-status-icon,
.case-status-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dashboard-case-status-icon svg,
.case-status-badge-icon svg {
    width: 12px;
    height: 12px;
    display: block;
    fill: currentColor;
}

.dashboard-case-status-dot,
.case-status-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
    display: block;
}

.dashboard-case-status-sleep,
.case-status-badge-sleep {
    display: inline-flex;
    gap: 1px;
    line-height: 1;
}

.dashboard-case-status-sleep span:nth-child(1),
.case-status-badge-sleep span:nth-child(1) {
    font-size: 0.5rem;
    transform: translateY(2px);
}

.dashboard-case-status-sleep span:nth-child(2),
.case-status-badge-sleep span:nth-child(2) {
    font-size: 0.64rem;
    transform: translateY(-1px);
}

.dashboard-case-status-sleep span:nth-child(3),
.case-status-badge-sleep span:nth-child(3) {
    font-size: 0.78rem;
    transform: translateY(-3px);
}

.dashboard-case-status.is-draft,
.case-status-badge.is-draft {
    background: #f4eff9;
    color: #6d4e8e;
}

.dashboard-case-status.is-new,
.case-status-badge.is-new {
    background: #fff1f8;
    color: #b00c62;
}

.dashboard-case-status.is-pending,
.case-status-badge.is-pending {
    background: #fff7e8;
    color: #9b6400;
}

.dashboard-case-status.is-awaiting,
.case-status-badge.is-awaiting {
    background: #fef2ff;
    color: #8a2f8f;
}

.dashboard-case-status.is-ready,
.case-status-badge.is-ready {
    background: #eef7ff;
    color: #215f96;
}

.dashboard-case-status.is-caseworker-wait,
.case-status-badge.is-caseworker-wait {
    background: #f4efff;
    color: #5a3aa1;
}

.dashboard-case-status.is-assigned,
.case-status-badge.is-assigned {
    background: #f0f3ff;
    color: #3957a8;
}

.dashboard-case-status.is-dormant,
.case-status-badge.is-dormant {
    background: #f6f3fb;
    color: #5e5574;
}

.dashboard-case-status.is-closed,
.case-status-badge.is-closed {
    background: #eef8f2;
    color: #2f7a46;
}

.dashboard-case-status.is-default,
.case-status-badge.is-default {
    background: #f4f1f8;
    color: #5e5574;
}

.dashboard-case-type {
    font-weight: 700;
}

.dashboard-case-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dashboard-case-overview,
.dashboard-case-update {
    font-size: 0.88rem;
    line-height: 1.35;
}

.dashboard-case-assigned {
    font-size: 0.9rem;
    color: #310c58;
}

.dashboard-subsection {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f0c4da;
}

.dashboard-case-card-compact .dashboard-case-assigned {
    margin-top: 4px;
}

.dashboard-case-overview {
    color: #7f6b9f;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dashboard-case-update-time {
    display: inline-block;
    color: #7f6b9f;
}

.dashboard-case-separator {
    color: #b9a7ce;
}

.dashboard-case-view {
    flex: 0 0 auto;
}

.case-list-card {
    display: grid;
    gap: 10px;
    border: 1px solid #eadff4;
    border-radius: 12px;
    background: #fff9fc;
}

.case-list-card h2,
.case-list-card p {
    margin: 0;
}

.reports-panel {
    display: grid;
    gap: 1rem;
}

.reports-flow-row {
    background: #fff7fb;
    border: 1px solid #f0d7e6;
    border-radius: 1rem;
    padding: 1rem;
}

.reports-flow-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.reports-flow-meta h3 {
    margin: 0;
}

.reports-muted {
    margin: 0.15rem 0 0;
    color: #75606a;
    font-size: 0.92rem;
}

.reports-table-wrap {
    overflow-x: auto;
}

.reports-filter-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.9rem;
    align-items: end;
}

.reports-filter-field {
    min-width: 240px;
    margin-top: 0;
}

.reports-scope-form {
    justify-content: flex-start;
}

.reports-table th,
.reports-table td {
    font-size: 0.94rem;
    padding: 0.6rem 0.75rem;
    vertical-align: top;
}

.all-cases-table {
    min-width: 980px;
}

.all-cases-table td {
    line-height: 1.35;
}

.all-cases-table .case-status-badge {
    margin-bottom: 0;
}

.all-cases-row.is-draft {
    background: #efe5fb;
}

.all-cases-row.is-new {
    background: #ffddec;
}

.all-cases-row.is-pending {
    background: #ffe9bf;
}

.all-cases-row.is-awaiting {
    background: #f6ddff;
}

.all-cases-row.is-ready {
    background: #dceeff;
}

.all-cases-row.is-caseworker-wait {
    background: #ffd6df;
}

.all-cases-row.is-assigned {
    background: #dfe5ff;
}

.all-cases-row.is-dormant {
    background: #e8e2ef;
}

.all-cases-row.is-closed {
    background: #d9f1df;
}

.all-cases-row.is-draft:hover,
.all-cases-row.is-new:hover,
.all-cases-row.is-pending:hover,
.all-cases-row.is-awaiting:hover,
.all-cases-row.is-ready:hover,
.all-cases-row.is-caseworker-wait:hover,
.all-cases-row.is-assigned:hover,
.all-cases-row.is-dormant:hover,
.all-cases-row.is-closed:hover {
    filter: brightness(0.97);
}

.reports-types-cell {
    min-width: 18rem;
}

.reports-sort-button {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.reports-sort-button::after {
    content: "\2195";
    font-size: 0.85em;
    color: #b00c62;
}

.reports-sort-button[data-sort-active="true"][data-sort-direction="asc"]::after {
    content: "\2191";
}

.reports-sort-button[data-sort-active="true"][data-sort-direction="desc"]::after {
    content: "\2193";
}

.reports-flow-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    color: #6e5962;
    font-size: 0.92rem;
}

.reports-flow-dynamic-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.9rem;
    margin-bottom: 0.75rem;
    color: #6e5962;
    font-size: 0.86rem;
}

.reports-flow-dynamic-swatch {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    margin-right: 0.4rem;
    border: 1px solid rgba(43, 19, 95, 0.18);
    border-radius: 999px;
    vertical-align: -0.12rem;
}

.reports-legend-swatch {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    margin-right: 0.4rem;
    border-radius: 999px;
    vertical-align: -0.1rem;
}

.reports-legend-swatch.is-resolved,
.reports-flow-bar-segment.is-resolved {
    background: #d45c88;
}

.reports-legend-swatch.is-open,
.reports-flow-bar-segment.is-open {
    background: #f5bfd5;
}

.reports-legend-swatch.is-closed-week,
.reports-flow-bar-segment.is-closed-week {
    background: #8d4f6b;
}

.reports-legend-swatch.is-new-week,
.reports-flow-bar-segment.is-new-week {
    background: #d45c88;
}

.reports-legend-swatch.is-existing-week,
.reports-flow-bar-segment.is-existing-week {
    background: #f5bfd5;
}

.reports-flow-chart-wrap {
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.reports-flow-svg {
    display: block;
    width: 100%;
    min-width: 720px;
    height: auto;
}

.reports-flow-gridline-svg {
    stroke: #ecd6e1;
    stroke-width: 1;
}

.reports-flow-axis-line {
    stroke: #d8c0ce;
    stroke-width: 1;
}

.reports-flow-axis-label,
.reports-flow-column-label-svg {
    fill: #6e5962;
    font-size: 12px;
    font-family: Calibri, "Trebuchet MS", sans-serif;
}

.reports-flow-column-bg {
    fill: rgba(248, 232, 240, 0.32);
}

.reports-flow-existing-rect {
    fill: #f5bfd5;
}

.reports-flow-new-rect {
    fill: #d45c88;
}

.reports-flow-stacked-segment {
    stroke: rgba(255, 255, 255, 0.75);
    stroke-width: 0.8;
}

.reports-tooltip {
    position: fixed;
    z-index: 1000;
    max-width: 16rem;
    padding: 0.5rem 0.65rem;
    border-radius: 0.75rem;
    background: rgba(43, 19, 95, 0.94);
    color: #fff;
    font-size: 0.85rem;
    line-height: 1.35;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(43, 19, 95, 0.22);
    transform: translateY(-100%);
}

.case-list-meta-line {
    margin-top: 0;
}

.case-list-overview,
.case-list-detail {
    color: #5e5574;
    line-height: 1.4;
}

.membership-review-form {
    display: grid;
    gap: 14px;
}

.membership-review-filter-panel {
    margin-bottom: 20px;
}

.membership-review-filter-form {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(180px, auto) auto;
    gap: 12px;
    align-items: end;
}

.membership-review-filter-form .field {
    margin-top: 0;
}

.membership-review-filter-actions {
    margin-top: 0;
}

.triage-filter-panel {
    margin-bottom: 20px;
}

.triage-filter-form {
    display: grid;
    grid-template-columns: minmax(240px, 1.4fr) minmax(180px, auto) minmax(180px, auto) auto;
    gap: 12px;
    align-items: end;
}

.triage-filter-form .field,
.triage-action-form .field {
    margin-top: 0;
}

.triage-filter-actions {
    margin-top: 0;
}

.stack-list {
    display: grid;
    gap: 20px;
}

.membership-review-card {
    gap: 12px;
}

.membership-review-summary-toggle {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    cursor: pointer;
}

.membership-review-summary-toggle::-webkit-details-marker {
    display: none;
}

.membership-review-card.is-pending-review {
    background: linear-gradient(180deg, #fff6fb, #ffffff);
    border-color: #f4c5dd;
}

.membership-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.membership-review-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.membership-review-identity-text {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.membership-review-title-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.membership-review-title-row h2 {
    margin: 0;
}

.membership-review-alert-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ee3897;
}

.membership-review-alert-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}

.membership-review-meta,
.membership-review-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: baseline;
}

.membership-review-meta {
    color: #7f6b9f;
    font-size: 0.84rem;
}

.membership-review-summary .case-list-detail {
    margin: 0;
}

.membership-review-form {
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    margin-top: 14px;
}

.membership-review-form .field {
    margin-top: 0;
}

.membership-review-column {
    display: grid;
    gap: 12px;
    align-content: start;
}

.membership-review-column-identity,
.membership-review-column-status {
    width: fit-content;
    min-width: 0;
}

.membership-review-column-identity input,
.membership-review-column-status select {
    min-width: 180px;
}

.membership-review-column-note {
    min-width: 0;
}

.membership-review-recent-cases {
    display: grid;
    gap: 6px;
    grid-column: 1 / 3;
    align-self: end;
}

.membership-review-recent-cases h3 {
    margin: 0;
    font-size: 0.95rem;
}

.membership-review-recent-case-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
    color: #5e5574;
    font-size: 0.88rem;
}

.membership-review-recent-case-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
}

.membership-review-recent-case-ref {
    color: #310c58;
    font-weight: 700;
}

.membership-review-recent-case-date {
    color: #7f6b9f;
}

.membership-review-actions {
    margin-top: 0;
}

.triage-case-card.is-high-urgency {
    border-color: #f4c5dd;
    box-shadow: inset 4px 0 0 #ee3897;
}

.triage-case-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    gap: 18px;
    align-items: start;
}

.triage-case-main {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.triage-case-line {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.triage-case-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.triage-case-summary .case-list-detail {
    margin: 0;
}

.triage-department-flag {
    color: #7c1f56;
    background: #fff1f8;
    border: 1px solid #f2cade;
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
}

.triage-case-side {
    display: grid;
    gap: 10px;
    align-content: start;
}

.triage-view-link {
    justify-self: end;
}

.triage-action-form {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e6dfef;
    border-radius: 8px;
    background: #faf8fc;
}

.triage-member-update-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.triage-offer-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: 8px;
}

.triage-offer-fieldset legend {
    padding: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #310c58;
}

.triage-offer-checkboxes {
    display: grid;
    gap: 6px;
}

.triage-offer-option {
    display: flex;
    gap: 8px;
    align-items: start;
    font-size: 0.9rem;
    color: #5e5574;
}

.triage-offer-summary {
    display: grid;
    gap: 4px;
    color: #5e5574;
}

.triage-offer-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 4px;
    font-size: 0.88rem;
}

.organisation-intro {
    margin-bottom: 1rem;
}

.organisation-intro p {
    margin: 0;
}

.organisation-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.4fr);
    gap: 1rem;
    align-items: start;
}

.organisation-panel {
    display: grid;
    gap: 0.85rem;
}

.organisation-section-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 0.75rem;
}

.organisation-section-header h2 {
    margin-bottom: 0.15rem;
}

.organisation-section-header p {
    margin: 0;
    color: #6e5b83;
    font-size: 0.88rem;
}

.organisation-list {
    gap: 0.65rem;
}

.organisation-create-form,
.organisation-edit-form {
    display: grid;
    gap: 0.65rem;
}

.organisation-create-inline {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.organisation-edit-inline {
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.organisation-department-form {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 250px) auto;
    align-items: end;
}

.organisation-row {
    display: flex;
    align-items: end;
    gap: 0.6rem;
    padding: 0.8rem 0.9rem;
}

.organisation-inline-field label {
    font-size: 0.74rem;
    margin-bottom: 0.25rem;
}

.organisation-row-actions,
.organisation-delete-button-form {
    margin: 0;
}

.organisation-delete-button-form .pink.compact,
.organisation-row-actions .secondary.compact {
    min-width: 0;
}

@media (max-width: 1100px) {
    .organisation-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 960px) {
    .organisation-create-inline,
    .organisation-edit-inline,
    .organisation-department-form,
    .organisation-row {
        grid-template-columns: 1fr;
    }

    .organisation-row {
        display: grid;
        align-items: stretch;
    }
}

.dashboard-offer-alert {
    display: grid;
    gap: 8px;
    padding: 12px 0;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 12px;
    background: #fff0f7;
    border: 1px solid #efcfe2;
}

.dashboard-alert-group {
    display: grid;
    gap: 10px;
}

.dashboard-alert-group + .dashboard-alert-group {
    margin-top: 16px;
}

.dashboard-alert-group h3 {
    margin: 0;
    font-size: 0.95rem;
    color: #5a365a;
}

.dashboard-alert-group-offers {
    padding: 0;
    border: 0;
    background: transparent;
}

.dashboard-alert-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.dashboard-alert-dismiss-form {
    margin: 0;
    flex: 0 0 auto;
}

.dashboard-alert-dismiss-button {
    background: #2b135f;
    min-width: 22px;
    width: 22px;
    height: 22px;
}

.dashboard-alert-dismiss-button svg {
    width: 14px;
    height: 14px;
}

.dashboard-offer-alert + .dashboard-offer-alert {
    border-top: 1px solid #f4c5dd;
}

.dashboard-offer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: #7f6b9f;
    font-size: 0.88rem;
}

.dashboard-offer-note {
    margin: 0;
    font-size: 0.9rem;
    color: #5e5574;
}

.dashboard-offer-actions {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.dashboard-offer-actions form {
    margin: 0;
    flex: 0 0 auto;
}

.membership-review-caret {
    width: 10px;
    height: 10px;
    border-right: 2px solid #b00c62;
    border-bottom: 2px solid #b00c62;
    transform: rotate(45deg);
    flex: 0 0 auto;
}

.membership-review-card[open] .membership-review-caret {
    transform: rotate(225deg);
}

@media screen and (max-width: 960px) {
    .membership-review-filter-form {
        grid-template-columns: 1fr 1fr;
    }

    .membership-review-filter-actions {
        grid-column: span 2;
    }

    .membership-review-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .membership-review-column {
        width: auto;
    }

    .membership-review-column-note {
        grid-column: span 2;
    }

    .membership-review-recent-cases {
        grid-column: span 2;
    }

    .triage-filter-form {
        grid-template-columns: 1fr 1fr;
    }

    .triage-filter-actions {
        grid-column: span 2;
    }

    .triage-case-row {
        grid-template-columns: 1fr;
    }

    .triage-view-link {
        justify-self: start;
    }
}

@media screen and (max-width: 640px) {
    .membership-review-filter-form {
        grid-template-columns: 1fr;
    }

    .membership-review-filter-actions {
        grid-column: auto;
    }

    .membership-review-form {
        grid-template-columns: 1fr;
    }

    .membership-review-column-note {
        grid-column: auto;
    }

    .membership-review-recent-cases {
        grid-column: auto;
    }

    .triage-filter-form {
        grid-template-columns: 1fr;
    }

    .triage-filter-actions {
        grid-column: auto;
    }

    .membership-review-header,
    .membership-review-meta,
    .membership-review-summary,
    .membership-review-summary-toggle,
    .membership-review-title-row,
    .membership-review-identity,
    .membership-review-identity-text {
        display: grid;
        gap: 6px;
    }
}

@media screen and (min-width: 700px) and (max-width: 1214px) {
    .dashboard-account-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-availability-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-account-save {
        grid-column: 2;
        justify-self: end;
    }
}

@media screen and (min-width: 1215px) {
    .dashboard-account-fields {
        grid-template-columns: minmax(170px, 220px) minmax(170px, 220px) minmax(180px, 240px) minmax(130px, 170px) auto;
    }

    .dashboard-availability-fields {
        grid-template-columns: minmax(220px, 280px) minmax(170px, 220px) auto;
    }

    .dashboard-columns.is-two-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.auth-card {
    max-width: 760px;
}

.auth-card.admin-users {
    max-width: none;
}

.auth-card h1 {
    margin-bottom: 20px;
}

.auth-split {
    max-width: 100%;
}

.auth-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: max(2vw, 24px);
}

.auth-panel {
    min-width: 0;
}

.auth-panel-accent {
    background: #fff2f8;
    border: 1px solid #f4c5dd;
    padding: 20px;
}

.mfa-secret-card {
    background: #fff8fc;
    border: 1px solid #f4c5dd;
    padding: 16px 18px;
    margin-bottom: 20px;
}

.mfa-qr {
    width: min(280px, 100%);
    margin-bottom: 18px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid #f4c5dd;
}

.mfa-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.mfa-secret,
.mfa-uri {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.mfa-secret {
    font-size: 1.15rem;
    letter-spacing: 0.08em;
}

.admin-user-badge {
    background: #2b135f;
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-users-table-wrap {
    overflow: auto;
    border: 1px solid #ddd6ea;
    background: #ffffff;
}

.admin-users-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.admin-users-toolbar p {
    margin: 0;
}

.admin-users-filter {
    flex: 0 0 min(380px, 100%);
}

.admin-users-toolbar-actions {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 10px;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.admin-users-filter input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #bdbdbd;
    box-sizing: border-box;
}

.admin-users-table {
    width: 100%;
    min-width: 1200px;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.admin-users-table th,
.admin-users-table td {
    padding: 6px 7px;
    vertical-align: top;
    border-bottom: 1px solid #ece7f5;
}

.admin-users-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: left;
    background: #f7f3fb;
    color: #2b135f;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
}

.admin-users-table tbody tr:hover {
    background: #fcf9ff;
}

.admin-cell-label {
    display: none;
    margin-bottom: 4px;
    color: #5f4a8b;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.reports-workload-table th {
    position: static;
    vertical-align: bottom;
    height: 168px;
    width: 40px;
    padding: 0 4px 10px;
    text-align: center;
    background: transparent;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.72rem;
    color: #6d5a8c;
}

.reports-workload-table {
    min-width: 0;
    table-layout: auto;
}

.reports-workload-table td {
    font-size: 0.82rem;
    overflow: visible;
}

.reports-workload-table th:first-child,
.reports-workload-table th:nth-child(8),
.reports-workload-table th:nth-child(9) {
    width: 48px;
}

.reports-workload-table .reports-sort-button {
    min-width: 0;
    padding: 0;
    justify-content: flex-end;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #6d5a8c;
    background: transparent;
    border: 0;
    box-shadow: none;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    transform-origin: center;
    white-space: nowrap;
    line-height: 1;
}

.reports-workload-table .reports-sort-button::after {
    margin: 3px 0 0;
    font-size: 0.7rem;
    color: #b889a8;
}

.reports-workload-table .reports-types-cell {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
}

.reports-workload-table td:nth-child(2),
.reports-workload-table td:nth-child(3),
.reports-workload-table td:nth-child(4),
.reports-workload-table td:nth-child(5),
.reports-workload-table td:nth-child(6),
.reports-workload-table td:nth-child(7) {
    white-space: nowrap;
}

.reports-workload-table td:nth-child(8) {
    white-space: nowrap;
}

.reports-workload-table .reports-categories-cell {
    width: 100%;
}

.reports-category-line {
    display: block;
    line-height: 1.25;
}

.reports-category-line + .reports-category-line {
    margin-top: 0.18rem;
}

.admin-user-cell {
    min-width: 240px;
}

.admin-user-primary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-inline-form-name {
    display: block;
}

.admin-name-input {
    min-width: 150px;
}

.admin-user-secondary {
    margin-top: 2px;
    color: #5e5574;
    word-break: break-word;
    font-size: 0.83rem;
}

.admin-log-device-cell {
    min-width: 280px;
}

.admin-date-cell {
    white-space: nowrap;
    color: #5e5574;
    font-size: 0.83rem;
}

.admin-state {
    display: inline-flex;
    align-items: center;
    padding: 2px 5px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.admin-state.is-active {
    background: #e7f6ee;
    color: #0f6a3b;
}

.admin-state.is-inactive {
    background: #fbe7ec;
    color: #9d224b;
}

.admin-state.is-neutral {
    background: #efeaf7;
    color: #5f4a8b;
}

.admin-action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.admin-action-group-stack {
    display: grid;
    gap: 6px;
    min-width: 220px;
}

.admin-disclosure {
    min-width: 220px;
}

.admin-disclosure-summary {
    cursor: pointer;
    color: #2b135f;
    font-weight: 700;
    list-style: none;
}

.admin-disclosure-summary::-webkit-details-marker {
    display: none;
}

.admin-disclosure-summary::before {
    content: "+";
    display: inline-block;
    width: 16px;
    margin-right: 6px;
}

.admin-disclosure[open] .admin-disclosure-summary::before {
    content: "-";
}

.admin-disclosure-panel {
    margin-top: 6px;
}

.admin-inline-form {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

.admin-inline-form-stack {
    display: grid;
    gap: 8px;
}

.admin-inline-form select,
.compact-input {
    width: 100%;
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid #bdbdbd;
    background: #ffffff;
    box-sizing: border-box;
    font-size: 0.84rem;
}

button.compact,
a.btn.compact {
    padding: 4px 6px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 10, 33, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}

.modal-backdrop[hidden] {
    display: none !important;
}

.modal-card {
    width: min(480px, 100%);
    background: #ffffff;
    border: 2px solid #2b135f;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    padding: 22px 24px;
}

.modal-card p {
    margin-top: 12px;
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.alert,
.status {
    padding: 10px 14px;
    margin-bottom: 15px;
}

.alert {
    background: #fff0f7;
    border-left: 4px solid #ee3897;
}

.status {
    background: #f3eefb;
    border-left: 4px solid #2b135f;
}

.btn.google-login {
    display: flex;
    align-items: center;
    width: 200px;
    margin: auto;
    text-decoration: none;
    font-weight: 500;
    color: #fff;
    overflow: hidden;
    border-radius: 5px;
    background-color: #ee3897;
    cursor: pointer;
}

.btn.google-login .icon {
    display: inline-flex;
    height: 100%;
    padding: 5px 10px;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background-color: white;
    margin-right: 15px;
}

.btn.google-login .icon svg {
    fill: #ee3897;
}

.btn.google-login:hover {
    background-color: #f157a5;
}

.btn.google-login:hover .icon {
    background-color: #2b135f;
}

.btn.google-login:hover .icon svg {
    fill: white;
}

@media screen and (max-width: 799px) {
    .field input,
    .field input[type="email"],
    .field input[type="password"],
    .field input[type="text"],
    .field input[type="datetime-local"],
    .field select,
    .field textarea {
        width: 100%;
        max-width: 100%;
    }

    .nav {
        background: #2b135f;
    }

    .nav nav {
        width: calc(100% - 132px);
        margin-left: 132px;
    }

    .navtabs {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding-top: 2px;
    }

    .nav-toggle-label {
        display: inline-flex;
        align-self: flex-end;
    }

    .nav-list,
    .nav-actions {
        display: none;
        width: 100%;
    }

    .nav-toggle:checked + .nav-toggle-label + .nav-list,
    .nav-toggle:checked ~ .nav-actions {
        display: flex;
    }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        border-bottom: 0;
        background: rgba(43, 19, 95, 0.94);
        gap: 0;
    }

    .nav-list li {
        display: block;
        width: 100%;
        margin: 0;
        border-bottom: 1px solid;
        border-image: linear-gradient(to right, transparent, #ee3897, transparent) 1;
    }

    .nav-list li a,
    .nav-list li a:hover,
    .nav-list li a:focus,
    .nav-list li a:active,
    .nav-list li a:visited {
        padding: 12px 16px;
    }

    .nav-list li a.btn,
    .nav-list li a.btn:hover,
    .nav-list li a.btn:focus,
    .nav-list li a.btn:active,
    .nav-list li a.btn:visited {
        margin: 10px 16px;
        text-align: center;
        padding: 10px 12px;
    }

    .nav-actions {
        justify-content: stretch;
    }

    .nav-actions .btn,
    .nav-actions button {
        width: 100%;
        text-align: center;
        padding: 10px 12px;
    }

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

    .auth-panel-accent {
        padding: 16px;
    }

    .admin-users-toolbar {
        display: grid;
        gap: 8px;
    }

    .admin-users-filter {
        flex-basis: auto;
    }

    .admin-users-toolbar-actions {
        justify-content: stretch;
    }
}

@media screen and (max-width: 1214px) {
    .auth-card.admin-users {
        max-width: none;
    }

    .admin-users-table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .admin-users-table {
        min-width: 0;
        border-collapse: separate;
    }

    .admin-users-table thead {
        display: none;
    }

    .admin-users-table,
    .admin-users-table tbody,
    .admin-users-table tr,
    .admin-users-table td {
        display: block;
        width: 100%;
    }

    .admin-users-table tr {
        background: #ffffff;
        border: 1px solid #ddd6ea;
        margin-bottom: 10px;
        padding: 9px;
        box-sizing: border-box;
    }

    .admin-users-table tr[hidden] {
        display: none !important;
    }

    .admin-users-table td {
        border: 0;
        padding: 0;
    }

    .admin-users-table td + td {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #ece7f5;
    }

    .admin-cell-label {
        display: block;
    }

    .admin-inline-form {
        display: grid;
        gap: 4px;
        align-items: stretch;
    }

    .admin-action-group {
        display: grid;
        gap: 4px;
    }

    .admin-action-group-stack {
        min-width: 0;
    }

    .admin-user-cell,
    .admin-log-device-cell,
    .admin-disclosure {
        min-width: 0;
    }

    .admin-date-cell {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .head {
        grid-template-columns: 1fr;
        padding-inline: 8vw;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .head .headimg {
        grid-column-start: auto;
        max-height: 190px;
    }
}