:root {
    color-scheme: light dark;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-color: inherit;
}

body {
    font-family: Arial, sans-serif;
    background-image: linear-gradient(to bottom, #FFFFFF 0%, #E6E6E6 73%, #A1A1A1 100%);
    background-attachment: fixed;
    color: black;
    border-color: #C7C7C7;
    display: grid;
    grid-template-areas: "header" "sidebar-left" "main" "sidebar-right";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    justify-content: center;
    gap: 1rem;
    margin: 0 auto;
    padding: 0 1rem;
    min-height: 100vh;
}
@media (min-width: 61rem) {  /* Medium+ screens */
    body.sidebar {
        grid-template-areas: "header header" "sidebar-left main" "sidebar-right main";
        grid-template-columns: 20rem 40rem;
        grid-template-rows: auto auto 1fr;
    }
    body.sidebar.qr-layout {
        grid-template-columns: 20rem minmax(0, 1fr);
    }
}
@media (min-width: 84rem) {  /* Large+ screens */
    body,
    body.sidebar {
        grid-template-areas: "header header header" "sidebar-left main sidebar-right";
        grid-template-columns: 20rem 40rem 20rem;
        grid-template-rows: auto 1fr;
    }
    body.sidebar.qr-layout {
        grid-template-columns: 20rem minmax(0, 1fr) 20rem;
    }
}
@media (prefers-color-scheme: dark) {
    body {
        background-image: linear-gradient(to bottom, #2a2a2a 0%, #1c1c1c 73%, #111 100%);
        color: white;
        border-color: #4A4A4A;
    }
}

header {
    grid-area: header;
    width: 100%;
    padding: 1rem 1.5rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}
header img {
    margin-right: auto;
    max-width: 197px;
    height: auto;
    width: 100%;
}

.header-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
header button {
    margin-left: 0.5rem;
    white-space: nowrap;
}

header button.profile {
    padding: 0.5rem;
}

hr {
    border-width: 1px;
    border-style: solid;
    max-width: 36rem;
    width: calc(100% - 6rem);
    margin: 1rem auto;
}

h1 {
    max-width: 40rem;
    margin: 0 auto;
    padding: 1rem;
    font-size: 1.75rem;
}

h1 img {
    max-width: 16rem;
    margin: auto;
    display: block;
    height: auto;
}

h2 {
    max-width: 40rem;
    margin: 0 auto;
    padding: 1rem 1rem 0;
    font-size: 1.25rem;
    opacity: 0.7;
}

main.overview-page h1,
main.overview-page h2,
main.overview-page section.school-chart,
main.overview-page section.students {
    max-width: 110rem;
    margin-left: auto;
    margin-right: auto;
}

main.overview-page section.students {
    padding: 1.5rem;
}

main.overview-page .qr-header h1 {
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: 2rem;
}

main.overview-page .qr-header .qr-eyebrow {
    margin-bottom: 0.4rem;
}

.toolbar-row {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

h3 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

h4 {
    font-size: 1rem;
    font-weight: bold;
}

p {
    font-size: 0.9rem;
    color: #444;
    margin-top: 0.25rem;
}
@media (prefers-color-scheme: dark) {
    p {
        color: #ccc;
    }
}

.subtle {
    font-size: 0.9rem;
    color: #555;
    margin: 0.25rem auto;
    max-width: 40rem;
    padding: 0 1rem;
}
@media (prefers-color-scheme: dark) {
    .subtle {
        color: #cfcfcf;
    }
}

.qr-page h1 {
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: 2rem;
}

.qr-header {
    max-width: 110rem;
    margin: 0.5rem 0 0.25rem;
    background: transparent;
    border: 0;
}
@media (prefers-color-scheme: dark) {
    .qr-header {
        background: transparent;
    }
}

.qr-header .subtle {
    max-width: none;
    padding: 0;
}

.qr-header-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.qr-back {
    max-width: 110rem;
    margin: 0.15rem 0 0;
    padding: 0 1.5rem 0.5rem;
}

.qr-back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.85rem;
    text-decoration: none;
    font-weight: 600;
}
.qr-back-button:hover {
    background: #e2e8f0;
}
@media (prefers-color-scheme: dark) {
    .qr-back-button {
        background: #111827;
        border-color: #1f2937;
        color: #e2e8f0;
    }
    .qr-back-button:hover {
        background: #1f2937;
    }
}

.qr-eyebrow {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
    font-weight: 600;
    margin: 0;
}
@media (prefers-color-scheme: dark) {
    .qr-eyebrow {
        color: #94a3b8;
    }
}

aside.sidebar-left {
    grid-area: sidebar-left;
}

@media (min-width: 61rem) {
    body.overview-layout aside.sidebar-left {
        border-right: 1px solid;
        border-color: inherit;
        padding-right: 1rem;
    }
}

.collapsable-sidebar-group {
    margin: 0 auto;
    padding: 0.5rem;
    background-color: white;
    border-width: 1px;
    border-style: solid;
    border-radius: 0.5rem;
    max-width: 40rem;
    margin-bottom: 1rem;
}
@media (prefers-color-scheme: dark) {
    .collapsable-sidebar-group {
        background-color: #181818;
    }
}

.collapsable-sidebar-group input[type="checkbox"] {
    display: none;
}

.sidebar-select {
    max-width: 40rem;
    margin: 0 auto 1rem;
    padding: 0 0.5rem;
}

.sidebar-select-label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
    margin: 0 25px 0.35rem;
}


.school-picker {
    position: relative;
}

.school-picker-button {
    width: 100%;
    border-width: 1px;
    border-style: solid;
    border-radius: 999px;
    padding: 0.6rem 1rem;
    font-size: 1.05rem;
    font-weight: 600;
    background-color: white;
    color: inherit;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.school-picker-button::after {
    content: "▼";
    font-size: 0.75rem;
    margin-left: 0.75rem;
}

.school-picker.open .school-picker-button::after {
    content: "▲";
}

.school-picker-button:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.school-picker-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9;
}

.school-picker-panel {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    z-index: 10;
    background-color: white;
    border-width: 1px;
    border-style: solid;
    border-radius: 0.75rem;
    padding: 0.5rem;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
}

.school-picker.open .school-picker-backdrop,
.school-picker.open .school-picker-panel {
    display: block;
}

.school-picker-search {
    width: 100%;
    border-width: 1px;
    border-style: solid;
    border-radius: 0.6rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.school-picker-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 22rem;
    overflow-y: auto;
}

.school-picker-list li a {
    display: block;
    padding: 0.4rem 0.5rem;
    text-decoration: none;
    color: inherit;
    border-radius: 0.4rem;
}

.school-picker-list li a:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.school-picker-list li a.active {
    font-weight: 600;
}

@media (prefers-color-scheme: dark) {
    .school-picker-button,
    .school-picker-panel,
    .school-picker-search {
        background-color: #181818;
    }

    .school-picker-list li a:hover {
        background-color: rgba(255, 255, 255, 0.08);
    }
}

.collapsable-sidebar-group label {
    display: flex;
    cursor: pointer;
    font-size: 1.25rem;
    width: 100%;
    padding: 0.5rem;
}
.collapsable-sidebar-group label::before {
    content: "▶";
    display: inline-block;
    width: 1em;
    margin-right: 0.25em;
}

.collapsable-sidebar-group label i {
    margin-right: 0.5rem;
}

.collapsable-sidebar-group nav {
    margin-top: 0.5rem;
    padding: 0.5rem 0.25rem;
    border-top: 1px solid;
    border-color: inherit;
    width: 100%;
}
.collapsable-sidebar-group nav a {
    margin: 0.25rem 0;
    text-decoration: none;
    color: inherit;
    padding: 0.25rem;
    border-radius: 0.4rem;
    font-size: 13pt;
}
.collapsable-sidebar-group nav a:hover {
    text-decoration: none;
}

.collapsable-sidebar-group nav.group-tree a.group-parent {
    font-weight: 600;
}

.collapsable-sidebar-group nav.group-tree span.group-parent {
    display: block;
    padding: 0.25rem;
    font-weight: 600;
    opacity: 0.9;
}

.collapsable-sidebar-group nav.group-tree a.group-child {
    padding-left: 1.25rem;
}

.collapsable-sidebar-group nav.group-tree a.group-page {
    padding-left: 2.5rem;
    font-size: 0.9rem;
    opacity: 0.85;
}

.collapsable-sidebar-group nav.group-tree a.active {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.collapsable-sidebar-group nav a.active {
    background-color: rgba(0, 0, 0, 0.08);
    text-decoration: none;
    font-weight: 700;
}

.menu-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.menu-link span {
    line-height: 2;
    display: inline-flex;
    align-items: center;
}

.menu-link .menu-icon {
    width: 1.3em;
}

@media (prefers-color-scheme: dark) {
    .collapsable-sidebar-group nav a.active {
        background-color: rgba(255, 255, 255, 0.12);
    }
}

/* Small screen: collapsed by default */
.collapsable-sidebar-group > *:not(label):not(input) {
    display: none;
}
.collapsable-sidebar-group input:checked ~ *:not(label):not(input) {
    display: block;
}
.collapsable-sidebar-group input:checked + label::before {
    content: "▼";
}

/* Medium / Large screen: open by default, arrow logic inverted */
@media (min-width: 61rem) {
    .collapsable-sidebar-group > *:not(label):not(input) {
        display: block;
    }
    .collapsable-sidebar-group input:checked ~ *:not(label):not(input) {
        display: none;
    }
    .collapsable-sidebar-group label::before {
        content: "▼";
    }
    .collapsable-sidebar-group input:checked + label::before {
        content: "▶";
    }
}

main {
    grid-area: main;
}

main.account-page {
    padding-left: 0.5rem;
}

main.account-page .qr-header,
main.account-page h1,
main.account-page h2,
main.account-page section {
    margin-left: 0;
    margin-right: auto;
}

aside.sidebar-right {
    grid-area: sidebar-right;
}

section {
    max-width: 40rem;
    margin: 0.5rem auto;
    padding: 1rem;
    background-color: white;
    border-width: 1px;
    border-style: solid;
    border-radius: 0.5rem;
}
@media (prefers-color-scheme: dark) {
    section {
        background-color: #181818;
    }
}

dialog {
    margin: auto;
    width: calc(100% - 4rem);
    padding: 1.5rem 2rem;
    border: 3px solid #3f6ea3;
    border-radius: 1rem;
    max-width: 30rem;
}
@media (prefers-color-scheme: dark) {
    dialog {
        border-color: #5a6f88;
    }
}
dialog::backdrop {
    background: rgba(0, 0, 0, 0.65);
}

dialog h3 {
    text-align: center;
    width: 100%;
    display: inline-block;
    padding: 0 1rem 1rem;
    line-height: 1rem;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: inherit;
}

button {
    background-color: #002554;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
button[disabled] {
    background-color: gray !important;
    cursor: not-allowed;
}
button:hover {
    background-color: #3a7fd1;
}

.icon-button {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.icon-button:hover {
    background: #e2e8f0;
}
@media (prefers-color-scheme: dark) {
    .icon-button {
        background: #111827;
        color: #e2e8f0;
        border-color: #1f2937;
    }
    .icon-button:hover {
        background: #1f2937;
    }
}

i.icon-img {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

button.red {
    background-color: #e14647;
}
button.red:hover {
    background-color: #c33434;
}

button.wide {
    width: 100%;
}

.error {
    color: red;
    border: 1px solid red;
    padding: 1rem 1.4rem;
    background-color: rgba(255,0,0, 0.1);
    border-radius: 0.5rem;
}

.error p {
    color: red;
    margin-top: 0;
    font-weight: bold;
}

.button-set {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

section.qr-codes > .button-set {
    justify-content: center;
}

.qr-page section.qr-codes {
    max-width: 110rem;
    padding: 1.5rem;
}

.qr-detail-page .summary-cards {
    max-width: 110rem;
}

.qr-detail-panel {
    max-width: 110rem;
    margin: 0.5rem auto 1.5rem;
    padding: 1.5rem;
    border: 1px solid;
    border-color: inherit;
    border-radius: 12px;
    background: #f8fafc;
}
@media (prefers-color-scheme: dark) {
    .qr-detail-panel {
        background: #0b1220;
    }
}

@media (prefers-color-scheme: dark) {
    .qr-detail-label {
        color: #94a3b8;
    }
}

.qr-detail-grid {
    display: grid;
    grid-template-columns: minmax(16rem, 22rem) minmax(14rem, 28rem);
    grid-template-rows: auto auto;
    gap: 1.5rem;
    align-items: start;
    justify-content: start;
}

.qr-detail-preview {
    display: grid;
    gap: 1rem;
    justify-items: center;
    text-align: center;
    align-self: start;
    grid-column: 1;
    grid-row: 1;
}

.qr-detail-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    width: 100%;
    max-width: 28rem;
    align-self: start;
    grid-column: 2;
    grid-row: 1;
}

.qr-detail-panel .qr-preview-image {
    margin: 0 auto;
}

.qr-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: left;
}

.qr-detail-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.qr-detail-value {
    font-size: 0.95rem;
    font-weight: 600;
}

.qr-detail-actions {
    justify-content: center;
    margin-top: 0.5rem;
    grid-column: 1;
    grid-row: 2;
}

.event-log {
    max-width: 110rem;
    margin: 0.5rem auto 1.5rem;
}

.event-page .toolbar-section-header,
.event-page section.event-log {
    max-width: 110rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.event-page {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    justify-self: stretch;
}

@media (min-width: 84rem) {
    body.sidebar.qr-layout main.event-page {
        grid-column: 2 / 4;
    }

    body.sidebar.qr-layout main.qr-page {
        grid-column: 2 / 4;
    }

    body.sidebar.qr-layout main.overview-page {
        grid-column: 2 / 4;
    }
}

.event-page .qr-header,
.event-page .summary-cards,
.event-page .toolbar-section-header,
.event-page section.event-log {
    max-width: none;
}

.event-page .qr-header {
    margin: 0.5rem auto;
}

.event-page .qr-eyebrow {
    margin-bottom: 0.2rem;
}

.event-page h1 {
    font-size: 1.75rem;
}

.qr-detail-page section.event-log {
    padding: 1.5rem;
    border: 1px solid;
    border-color: inherit;
    border-radius: 12px;
    background: #ffffff;
}
@media (prefers-color-scheme: dark) {
    .qr-detail-page section.event-log {
        background: #0b1220;
    }
}

.toolbar-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
    flex-direction: column;
}

.toolbar-section-header .subtle {
    margin: 0.15rem 0 0;
    padding: 0;
    max-width: none;
}

.event-page .qr-header .subtle {
    margin: 0;
}

.toolbar-section-header h2 {
    margin: 0;
    padding: 0;
}

.toolbar-section-header .table-toolbar {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}

.toolbar {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 0.35rem;
    margin-left: auto;
    flex-wrap: wrap;
    align-content: flex-end;
}

.toolbar .toolbar-selects,
.toolbar .toolbar-dates {
    display: flex;
    gap: 0.35rem;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.toolbar .toolbar-search-field,
.toolbar .toolbar-action {
    align-self: flex-end;
}

.toolbar .toolbar-search-field {
    margin-left: 0;
    width: min(18rem, 100%);
}

.table-toolbar .select-field span {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.2rem;
}

.table-toolbar .select-field select,
.table-toolbar .select-field input[type="date"] {
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 0.35rem 0.5rem;
    font-size: 0.9rem;
    height: 36px;
}

@media (prefers-color-scheme: dark) {
    .table-toolbar .select-field select,
    .table-toolbar .select-field input[type="date"] {
        border-color: #1f2937;
    }
    .table-toolbar .select-field span {
        color: #94a3b8;
    }
}

.event-log table {
    table-layout: fixed;
}

.event-log thead {
    background: #f8fafc;
}

.event-log thead th {
    text-align: left;
    padding: 0.75rem;
    border-bottom: 1px solid #d7dee7;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
    .event-log thead {
        background: #0b1220;
    }
    .event-log thead th {
        color: #94a3b8;
    }
}

@media (max-width: 56.25rem) {
    .qr-detail-grid {
        grid-template-columns: 1fr;
    }

    .qr-detail-preview,
    .qr-detail-meta {
        grid-column: auto;
    }

    .qr-detail-actions {
        grid-column: auto;
        grid-row: auto;
    }

    .toolbar-section-header {
        flex-wrap: wrap;
    }

    .toolbar .toolbar-selects,
    .toolbar .toolbar-dates {
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}

.event-page section.event-log table {
    border-collapse: collapse;
    table-layout: fixed;
}

.event-page section.event-log thead {
    display: table-header-group;
}

.event-page section.event-log tbody {
    display: table-row-group;
}

.event-page section.event-log thead tr,
.event-page section.event-log tbody tr {
    display: table-row;
}

.event-page section.event-log thead th,
.event-page section.event-log tbody td {
    display: table-cell;
    padding: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.event-page section.event-log tbody tr:last-child td {
    border-bottom: 0;
}

.event-page section.event-log tbody tr:hover td {
    background: #f1f5f9;
}

.event-page section.event-log .event-col-student {
    white-space: nowrap;
}

.event-page section.event-log .event-col-qr {
    width: 8.5rem;
}

.event-page section.event-log .event-col-compliance {
    width: 7.5rem;
    text-align: center;
}

.event-page section.event-log .event-col-student .person-name,
.event-page section.event-log .event-col-student .person-subtle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

@media (prefers-color-scheme: dark) {
    .event-page section.event-log thead th,
    .event-page section.event-log tbody td {
        border-color: #1f2937;
    }
    .event-page section.event-log tbody tr:hover td {
        background: #111827;
    }
}

@media (max-width: 45rem) {
    .qr-detail-panel {
        padding: 1rem;
    }

    .qr-detail-preview {
        text-align: center;
    }

    .qr-detail-meta {
        grid-template-columns: 1fr;
    }

    .toolbar {
        justify-content: flex-end;
    }
}

.toolbar-section-header {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.toolbar-section-header h2 {
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
    max-width: none;
}

.toolbar-shell {
    display: inline-flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin-left: auto;
}

.toolbar-actions {
    display: inline-flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin-top: 0;
}

.qr-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.demo-panel {
    margin-left: auto;
    display: grid;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: rgba(15, 23, 42, 0.04);
    min-width: 220px;
    min-height: 72px;
}

.demo-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.demo-panel-eyebrow {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: #64748b;
}

.demo-panel-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.demo-panel-controls select {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 0.4rem 0.6rem;
    background: #ffffff;
    color: inherit;
    font-weight: 600;
    min-width: 160px;
}

@media (prefers-color-scheme: dark) {
    .demo-panel {
        border-color: #1f2937;
        background: rgba(15, 23, 42, 0.6);
    }

    .demo-panel-eyebrow {
        color: #94a3b8;
    }

    .demo-panel-controls select {
        background: #0b1220;
        border-color: #1f2937;
    }
}

.toolbar-section-title .subtle {
    margin: 0.15rem 0 0;
    padding: 0;
    max-width: none;
}

.toolbar-section-header button {
    white-space: nowrap;
}

.toolbar-section-header .table-toolbar {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
}

section.event-log table,
section.qr-codes table {
    table-layout: fixed;
}

table thead tr th {
    border-bottom: 1px solid;
    border-color: inherit;
    padding: 0 0.5rem 0.5rem;
}

table tbody tr {
    position: relative;
}

table tbody tr td {
    padding: 0.5rem;
    border-width: 0 0 1px 0;
    border-style: solid;
}

section.event-log th,
section.event-log td,
section.qr-codes th,
section.qr-codes td {
    overflow-wrap: anywhere;
    word-break: break-word;
}
section.event-log th,
section.event-log td {
    white-space: normal;
}

section.event-log td .person-name,
section.event-log td .person-subtle {
    overflow-wrap: anywhere;
    word-break: break-word;
}

table tbody tr:last-child td {
    border-width: 0;
    padding-bottom: 0;
}

table[data-row-link] tbody tr {
    cursor: pointer;
}
table[data-row-link] tbody tr:hover {
    background-color: #f0f4ff;
}
@media (prefers-color-scheme: dark) {
    table[data-row-link] tbody tr:hover {
        background-color: #1f2735;
    }
}

.qr-page section.qr-codes table {
    border-collapse: collapse;
    table-layout: fixed;
}

.qr-page section.qr-codes thead {
    background: #f8fafc;
}

.qr-page section.qr-codes thead th {
    border-bottom: 1px solid #d7dee7;
    padding: 0.75rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    text-align: left;
}
@media (prefers-color-scheme: dark) {
    .qr-page section.qr-codes thead th {
        color: #94a3b8;
    }
}

@media (prefers-color-scheme: dark) {
    .qr-page section.qr-codes thead {
        background: #0b1220;
    }
}

.qr-page section.qr-codes tbody td {
    background: transparent;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.75rem;
}
.qr-page section.qr-codes table[data-row-link] tbody tr:hover td {
    background: #f1f5f9;
}
.qr-page section.qr-codes td[colspan] {
    text-align: center;
    background: transparent;
    border: 0;
    padding: 1rem 0;
}
@media (prefers-color-scheme: dark) {
    .qr-page section.qr-codes tbody td {
        background: transparent;
        border-color: #1f2937;
    }
    .qr-page section.qr-codes table[data-row-link] tbody tr:hover td {
        background: #111827;
    }
}

.qr-primary-cell .person-name {
    font-size: 1rem;
}

.type-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #0f172a;
    font-size: 0.75rem;
    font-weight: 600;
}
@media (prefers-color-scheme: dark) {
    .type-chip {
        background: #1f2937;
        color: #e2e8f0;
    }
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.status-active {
    background: #dcfce7;
    color: #166534;
}
.status-inactive {
    background: #fef3c7;
    color: #92400e;
}
.status-expired {
    background: #fee2e2;
    color: #991b1b;
}
@media (prefers-color-scheme: dark) {
    .status-active {
        background: #14532d;
        color: #dcfce7;
    }
    .status-inactive {
        background: #78350f;
        color: #fef3c7;
    }
    .status-expired {
        background: #7f1d1d;
        color: #fee2e2;
    }
}

.text-field {
    position:relative;
    margin:2em 0;
}
.text-field input {
    font-size:1.3em;
    line-height:1.3em;
    border:1px none #0077c8;
    border-bottom-style:solid;
    width:100%;
    background: transparent;
    resize: vertical;
}
.text-field input:focus {
    outline:none;
}
.text-field input:invalid {
    box-shadow:none;
}
.text-field label {
    color:#aaa;
    font-size:1.2em;
    position:absolute;
    pointer-events:none;
    left:0.5em;
    top:0.1em;
    transition:300ms ease all;
    user-select:none;
}
.text-field input:disabled ~ label,
.text-field input:read-only ~ label,
.text-field input:focus ~ label,
.text-field input:not(:placeholder-shown) ~ label {
    top:-1.1em;
    font-size:0.8em;
    color:#888;
}

.table-toolbar {
    display: flex;
    gap: 0.5rem 1rem;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    padding: 0.5rem;
    background: #8881;
    border-radius: 4px;
}

.qr-page .table-toolbar {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.qr-toolbar {
    justify-content: flex-end;
    align-items: flex-end;
    gap: 0.35rem;
    flex-wrap: nowrap;
}

.toolbar-search-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 18rem;
    max-width: 18rem;
    min-width: 14rem;
    height: 36px;
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
}

.toolbar-search-field i {
    color: #94a3b8;
    font-size: 0.9rem;
}

.toolbar-search-field input {
    border: 0;
    background: transparent;
    font-size: 0.95rem;
    width: 100%;
    color: inherit;
    height: 100%;
}

.toolbar-search-field input:focus {
    outline: none;
}

@media (prefers-color-scheme: dark) {
    .toolbar-search-field {
        background: transparent;
        border-color: #1f2937;
    }

    .toolbar-search-field i {
        color: #64748b;
    }
}

.table-toolbar .text-field {
    margin: 0;
    flex: 1 1 12rem;
    min-width: 10rem;
}

.toolbar-selects,
.toolbar-dates {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.select-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #555;
}

.select-field select,
.select-field input[type="datetime-local"],
.select-field input[type="date"],
.select-field input[type="number"],
.select-field input[type="text"] {
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    border: 1px solid;
    border-color: inherit;
    background: transparent;
    color: inherit;
    font-size: 0.9rem;
}

.toolbar-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: inherit;
}

.toolbar-field input[type="date"] {
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    border: 1px solid;
    border-color: inherit;
    background: transparent;
    color: inherit;
    font-size: 0.9rem;
}

.toolbar-status {
    display: flex;
    gap: 0.5rem;
}

.toolbar-status input[type="radio"] {
    display: none;
}

.toolbar-status label {
    padding: 0.35rem 0.75rem;
    border: 1px solid;
    border-color: inherit;
    border-radius: 4px;
    font-size: 0.9rem;
    line-height:1.4rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}
.toolbar-status label:hover {
    background-color: #3a7fd1;
}
.toolbar-status input[type="radio"]:checked + label {
    background-color: #002554;
    color: white;
}

.qr-page .toolbar-status label {
    background: #ffffff;
    border-color: #d7dee7;
    color: #1f2937;
}
.qr-page .toolbar-status label:hover {
    background: #e2e8f0;
}
.qr-page .toolbar-status input[type="radio"]:checked + label {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}
@media (prefers-color-scheme: dark) {
    .qr-page .toolbar-status label {
        background: #111827;
        border-color: #1f2937;
        color: #e2e8f0;
    }
    .qr-page .toolbar-status label:hover {
        background: #1f2937;
    }
}

th.sorted-asc::after {
    content: " ▲";
}
th.sorted-desc::after {
    content: " ▼";
}

table.sortable th {
    cursor: pointer;
    user-select: none;
}

.csv-export {
    flex: 0 0 auto;
    margin-left: 0;
}

.qr-page section.qr-codes th:nth-child(1),
.qr-page section.qr-codes td:nth-child(1),
.qr-page section.qr-codes th:nth-child(2),
.qr-page section.qr-codes td:nth-child(2) {
    white-space: nowrap;
}

.qr-page section.qr-codes th,
.qr-page section.qr-codes td {
    overflow-wrap: normal;
    word-break: normal;
}

.toolbar-counter {
    flex: 0 0 auto;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    opacity: 0.5;
}

.toolbar .toolbar-selects {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
}

.qr-toolbar .select-field {
    min-width: 6rem;
}

.summary-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem;
    max-width: 40rem;
    margin: 0.5rem auto 1rem;
    background: #eef2f7;
}
@media (prefers-color-scheme: dark) {
    .summary-cards {
        background: #141414;
    }
}

.qr-page .summary-cards {
    max-width: 110rem;
    margin: 0.25rem auto 1.25rem;
    padding: 0;
    background: transparent;
    border: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
}

.summary-card {
    flex: 1 1 8.5rem;
    border: 1px solid;
    border-color: inherit;
    border-radius: 8px;
    padding: 0.75rem;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
@media (max-width: 20rem) {
    .summary-cards {
        padding: 0.75rem;
    }
    .summary-card {
        flex-basis: 100%;
    }
}
@media (prefers-color-scheme: dark) {
    .summary-card {
        background: #202020;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }
}

.qr-page .summary-card {
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}
@media (prefers-color-scheme: dark) {
    .qr-page .summary-card {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    }
}

.summary-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #666;
}
@media (prefers-color-scheme: dark) {
    .summary-label {
        color: #aaa;
    }
}

.summary-value {
    font-size: 1.4rem;
    font-weight: bold;
    margin-top: 0.25rem;
}

.person-cell {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.person-name {
    font-weight: 600;
}

.person-subtle {
    font-size: 0.8rem;
    color: #666;
}
@media (prefers-color-scheme: dark) {
    .person-subtle {
        color: #aaa;
    }
}

.streak-negative {
    color: #b91c1c;
    font-weight: 600;
}
@media (prefers-color-scheme: dark) {
    .streak-negative {
        color: #f87171;
    }
}

.issue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.qr-create details {
    border: 1px solid;
    border-color: inherit;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin: 0 0 1.5rem;
}
.qr-create summary,
.qr-manage summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid;
    border-color: inherit;
    border-radius: 999px;
}
.qr-create summary::-webkit-details-marker {
    display: none;
}
.qr-manage summary::-webkit-details-marker {
    display: none;
}
.qr-create-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
    align-items: end;
}
.qr-create-form .button-set {
    margin-top: 0;
    justify-content: flex-start;
}
.checkbox-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.qr-preview-image {
    border: 1px solid;
    border-color: inherit;
    border-radius: 12px;
    background: #fff;
}

@media print {
    @page {
        margin: 0.5in;
    }

    body * {
        visibility: hidden !important;
    }

    .qr-detail-page .qr-header,
    .qr-detail-page .qr-header *,
    .qr-detail-page .qr-detail-panel,
    .qr-detail-page .qr-detail-panel * {
        visibility: visible !important;
    }

    body {
        display: block;
        padding: 0 !important;
        margin: 0 !important;
        background: #fff !important;
        color: #0f172a !important;
    }

    .qr-detail-page .qr-header {
        position: fixed;
        inset: 0.5in 0.5in auto;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }

    .qr-detail-page .qr-header-text {
        align-items: center;
        text-align: center;
        gap: 0.15in;
    }

    .qr-detail-page .qr-header .qr-eyebrow {
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #64748b !important;
    }

    .qr-detail-page .qr-header h1 {
        font-size: 1.6rem;
        color: #0f172a !important;
    }

    .qr-detail-page .qr-detail-panel {
        position: fixed;
        inset: 1.7in 0.5in 0.5in;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    .qr-detail-page .qr-detail-grid {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.3in;
        color: #0f172a !important;
        text-align: center;
    }

    .qr-detail-page .qr-detail-preview {
        display: flex;
        justify-content: center;
        align-self: center;
    }

    .qr-detail-page .qr-preview-image {
        width: min(4.75in, 70vw);
        height: auto;
        aspect-ratio: 1 / 1;
        border: 0 !important;
        border-radius: 0;
    }

    .qr-detail-page .qr-detail-meta {
        max-width: 5.5in;
        width: 100%;
        justify-items: center;
        align-self: center;
    }

    .qr-detail-page .qr-detail-item {
        text-align: center;
    }

    .qr-detail-page .qr-detail-label {
        color: #64748b !important;
    }

    .qr-detail-page .qr-detail-value {
        color: #0f172a !important;
    }

    .qr-detail-page .qr-detail-actions,
    .qr-detail-page .summary-cards,
    .qr-detail-page .qr-back,
    .qr-detail-page .event-log {
        display: none !important;
    }
}


section.my-profile a {
    display: inline-block;
    margin-top: 1rem;
    color: #4a90e2;
    font-size: 0.9rem;
    text-decoration: none;
}

section.my-profile a:hover {
    text-decoration: underline;
}

section.my-profile form.editing button.edit-profile {
    display: none;
}
section.my-profile form:not(.editing) button[data-action] {
    display: none;
}
section.my-profile form:not(.editing) input:disabled {
    color:inherit;
    border-bottom-color:#888;
}

section.qr-manage form.qr-manage-form.editing button.qr-edit {
    display: none;
}
section.qr-manage form.qr-manage-form:not(.editing) button[data-action] {
    display: none;
}
section.qr-manage form.qr-manage-form:not(.editing) input:disabled,
section.qr-manage form.qr-manage-form:not(.editing) select:disabled {
    color: #777;
    border-color: #888;
    opacity: 1;
}
@media (prefers-color-scheme: dark) {
    .select-field {
        color: #d8d8d8;
    }
    .select-field select,
    .select-field input[type="datetime-local"],
    .select-field input[type="date"],
    .select-field input[type="number"],
    .select-field input[type="text"] {
        color: #f2f2f2;
        border-color: #6b6b6b;
        background-color: #1b1b1b;
    }
    .table-toolbar .select-field {
        color: #d8d8d8;
    }
    section.qr-manage h2 {
        opacity: 1;
    }
    section.qr-manage .select-field,
    section.qr-manage .checkbox-field {
        color: #d8d8d8;
    }
    section.qr-manage form.qr-manage-form:not(.editing) input:disabled,
    section.qr-manage form.qr-manage-form:not(.editing) select:disabled {
        color: #b8b8b8;
        border-color: #6b6b6b;
        background-color: #1b1b1b;
    }
}

section.account-group[data-group-type=family] header {
    flex-direction: column;
    border-width: 0 0 1px;
    border-style: solid;
    padding: 0 1rem 0.5rem;
    margin-bottom: 1rem;
}

section.account-group[data-group-type=family] aside.subscription-info {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1rem;
    padding-left: 1rem;
    border-left: 3px solid #4a90e2;
}

section.account-group[data-group-type=family] ul.members {
    list-style-type: none;
    padding: 0;
    margin-top: 1rem;
}

section.account-group[data-group-type=family] ul.members li.family-member {
    margin-top: 1rem;
    padding: 0.5rem;
    background-color: rgba(128,128,128,0.15);
    border-radius: 0.25rem;
    box-shadow: 0 1px 3px rgba(128, 128, 128, 0.1);
}

section.login button.text-button {
    color: inherit;
    background: none;
}

section.login .remember-me {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0.25rem;
    font-size: 0.95rem;
}

section.login .remember-me input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
}

section.app {
    text-align: center;
}

section.app details {
    font-size: 0.8rem;
}

section.app details summary {
    cursor: pointer;
    margin: 2rem 0 0.75rem;
}

section.app details ul {
    list-style: none;
}

section.app details ul li a {
    margin-top: 0.5em;
    line-height: 1.5rem;
}

section.schools a {
    color: #4a90e2;
    font-size: 0.9rem;
}

section.school-chart figure {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
}
@media (min-width: 42rem) {
    section.school-chart figure {
        flex-direction: row;
        gap: 2rem;
    }
}

.school-chart-layout {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

@media (min-width: 42rem) {
    .school-chart-layout {
        flex-direction: row;
        align-items: stretch;
        justify-content: flex-start;
        gap: 2.5rem;
    }
}

.chart-panel {
    flex: 1 1 0;
    padding: 1.25rem 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}

.chart-panel .qr-eyebrow {
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    text-align: left;
    width: 100%;
}

.compliance-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.compliance-panel figure {
    margin: 0;
    align-items: center;
}

.issue-summary {
    min-width: 20rem;
}

.issue-summary-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.issue-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 1.05rem;
}

.issue-summary-label {
    flex: 1 1 auto;
    padding-right: 1.5rem;
}

.issue-summary-count {
    flex: 0 0 auto;
    min-width: 2.5rem;
    text-align: right;
}

.issue-summary-row:last-child {
    border-bottom: 0;
}

.issue-summary-label {
    color: inherit;
}

.issue-summary-count {
    font-weight: 600;
    color: #475569;
}

.issue-summary-empty {
    font-size: 1rem;
    color: #64748b;
}

@media (prefers-color-scheme: dark) {
    .chart-panel {
        border-color: #1f2937;
        background: #0b1220;
    }
    .issue-summary-row {
        border-bottom-color: #1f2937;
    }
    .issue-summary-count {
        color: #94a3b8;
    }
    .issue-summary-empty {
        color: #94a3b8;
    }
}

section.students table thead #name {
    width: auto;
}

main.overview-page section.students table {
    table-layout: fixed;
}

main.overview-page section.students thead {
    background: #f8fafc;
}

main.overview-page section.students thead th {
    border-bottom: 1px solid #d7dee7;
    padding: 0.75rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    text-align: left;
    font-weight: 500;
}
@media (prefers-color-scheme: dark) {
    main.overview-page section.students thead th {
        color: #94a3b8;
    }
}

@media (prefers-color-scheme: dark) {
    main.overview-page section.students thead {
        background: #0b1220;
    }
}

main.overview-page section.students tbody td {
    background: transparent;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.75rem;
}
main.overview-page section.students table[data-row-link] tbody tr:hover td,
main.overview-page section.students table tbody tr:hover td {
    background: #f1f5f9;
}
@media (prefers-color-scheme: dark) {
    main.overview-page section.students tbody td {
        background: transparent;
        border-color: #1f2937;
    }
    main.overview-page section.students table[data-row-link] tbody tr:hover td,
    main.overview-page section.students table tbody tr:hover td {
        background: #111827;
    }
}

main.overview-page section.students td[colspan] {
    text-align: center;
    background: transparent;
    border: 0;
    padding: 1rem 0;
}

main.overview-page section.students th,
main.overview-page section.students td {
    overflow-wrap: normal;
    word-break: normal;
}

@media (max-width: 45rem) {
    main.overview-page section.students table {
        border-spacing: 0;
    }

    main.overview-page section.students thead {
        display: none;
    }

    main.overview-page section.students tbody,
    main.overview-page section.students tr,
    main.overview-page section.students td {
        display: block;
        width: 100%;
    }

    main.overview-page section.students tbody tr {
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        background: #ffffff;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem 1.5rem;
        align-items: start;
    }

    main.overview-page section.students tbody td {
        border: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    main.overview-page section.students tbody td::before {
        content: attr(data-label);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 0.7rem;
        color: #64748b;
    }

    main.overview-page section.students td[colspan] {
        justify-content: center;
        text-align: center;
    }

    main.overview-page section.students td[colspan]::before {
        display: none;
    }
}

@media (max-width: 45rem) and (prefers-color-scheme: dark) {
    main.overview-page section.students tbody tr {
        background: #111827;
        border-color: #1f2937;
    }

    main.overview-page section.students tbody td::before {
        color: #94a3b8;
    }
}

section.account-group[data-group-type=school] {
    display: none;
}
label[for='alias'],
label[for='locale'],
label[for='timezone'] {
    display: none;
}
input[id='alias'],
input[id='locale'],
input[id='timezone']{
    display: none;
}

.icon-active { --fa: "\f14a"; color: #238823; }
.icon-inactive { --fa: "\f056"; color: #88888852; }
.icon-disabled { --fa: "\f057"; color: #d2222c; }

.policy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

main.policy-page .qr-header,
main.policy-page .policy-grid,
main.policy-page form {
    max-width: 40rem;
    margin-left: 0;
    margin-right: auto;
}

main.policy-page .qr-header {
    margin: 0.5rem 0 0.25rem;
    padding: 0.5rem 0 0;
}

main.policy-page .policy-grid {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

main.policy-page section {
    margin: 0.5rem 0;
}

.policy-join-code {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid;
    border-color: inherit;
    background: rgba(0, 0, 0, 0.02);
}

.policy-join-code-label {
    font-size: 0.8rem;
    color: #555;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.policy-join-code-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: inherit;
    letter-spacing: 0.04em;
}

.policy-paused-help {
    margin-top: 0.5rem;
}

.section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0.5rem 0 0.25rem;
}

.section-header-row h2 {
    margin-left: 0;
    text-align: left;
}

#policy-form section > .checkbox-field {
    margin: 0.75rem 0;
}

#policy-form .schedule-card > .checkbox-field {
    margin-bottom: 1rem;
}

.policy-textarea {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid;
    border-color: inherit;
    background: transparent;
    color: inherit;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.85rem;
    min-height: 120px;
}

.schedule-card .schedule-editor {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.schedule-day {
    border-radius: 12px;
    border: 1px solid;
    border-color: inherit;
    padding: 12px;
    background: transparent;
}

.schedule-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.schedule-details {
    border: 1px solid;
    border-color: inherit;
    border-radius: 12px;
    background: transparent;
    padding: 0;
}

.schedule-details[open] {
    padding-bottom: 10px;
}

.schedule-summary {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 12px;
}

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

.schedule-summary-title {
    font-size: 1.1rem;
    font-weight: 700;
}

.schedule-summary-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e2e8f0;
    margin-left: auto;
}

.schedule-summary-chevron {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.schedule-summary-chevron .chevron-down,
.schedule-summary-chevron .chevron-up {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.schedule-details[open] .schedule-summary-chevron .chevron-down {
    display: none;
}

.schedule-details:not([open]) .schedule-summary-chevron .chevron-up {
    display: none;
}

.schedule-details-body {
    padding: 0 14px 12px;
}

.status-toggle {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.8rem;
    color: #555;
}

.status-toggle-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
    font-weight: 700;
}

.status-toggle-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 6px;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 999px;
}

.status-toggle-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    cursor: pointer;
    border-radius: 999px;
    padding: 2px;
    color: #0f172a;
    text-align: center;
    white-space: nowrap;
}

.status-toggle-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.status-toggle-option input:checked + span {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border-radius: 999px;
}

.status-toggle-option span {
    padding: 10px 16px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.paused-row {
    margin-top: 8px;
}

.website-details {
    border: 1px solid;
    border-color: inherit;
    border-radius: 12px;
    background: transparent;
    padding: 0;
}

.website-details[open] {
    padding-bottom: 10px;
}

.website-summary {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 12px;
}

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

.website-summary-title {
    font-size: 1.1rem;
    font-weight: 700;
}

.website-summary-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e2e8f0;
    margin-left: auto;
}

.website-summary-chevron {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.website-summary-chevron .chevron-down,
.website-summary-chevron .chevron-up {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.website-details[open] .website-summary-chevron .chevron-down {
    display: none;
}

.website-details:not([open]) .website-summary-chevron .chevron-up {
    display: none;
}

.website-details-body {
    padding: 0 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.switch-field {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    font-weight: 600;
}

.switch-control {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.switch-field input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switch-slider {
    width: 44px;
    height: 26px;
    background: #cbd5e1;
    border-radius: 999px;
    position: relative;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.switch-slider::after {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.switch-field input:checked + .switch-slider {
    background: #22c55e;
}

.switch-field input:checked + .switch-slider::after {
    transform: translateX(18px);
}

.website-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.website-input {
    flex: 1;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid;
    border-color: inherit;
    background: transparent;
    color: inherit;
}

.website-allowed-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.website-allowed-list.is-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.website-allowed-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid;
    border-color: inherit;
    background: rgba(0, 0, 0, 0.02);
}

.website-allowed-text {
    font-weight: 600;
}

.schedule-day-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.schedule-action-button {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
}

.schedule-action-button .icon-img {
    width: 18px;
    height: 18px;
}

.schedule-action-button:hover {
    background: #e2e8f0;
}

.schedule-remove-button {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.05rem;
}

.schedule-remove-button:hover {
    background: rgba(239, 68, 68, 0.12);
}

.schedule-intervals {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.schedule-interval {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    align-items: center;
    gap: 8px;
}

.schedule-interval input {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid;
    border-color: inherit;
    background: transparent;
    color: inherit;
}

.primary-button {
    background: #1e3a8a;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 600;
    cursor: pointer;
}

.secondary-button {
    background: #e2e8f0;
    color: #0f172a;
    border: none;
    border-radius: 10px;
    padding: 6px 12px;
    font-weight: 600;
    cursor: pointer;
}

.text-button {
    background: transparent;
    border: none;
    color: #2563eb;
    font-weight: 600;
    cursor: pointer;
}

.schedule-copy-dialog {
    border: none;
    border-radius: 16px;
    padding: 0;
    max-width: 30rem;
    width: calc(100% - 2rem);
}

.schedule-copy-content {
    padding: 18px 20px 16px;
}

.schedule-copy-days {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 12px 0 16px;
}

.schedule-copy-day {
    border: none;
    border-radius: 12px;
    background: #e2e8f0;
    color: #0f172a;
    padding: 8px 10px;
    width: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    font-weight: 600;
}

.schedule-copy-day.is-source {
    cursor: default;
    opacity: 1;
}

.schedule-copy-day.is-selected {
    background: #1e3a8a;
    color: #ffffff;
}

.schedule-copy-day-short {
    font-size: 0.95rem;
}

@media (prefers-color-scheme: dark) {
    .status-toggle-label {
        color: #94a3b8;
    }

    .schedule-summary {
        background: rgba(148, 163, 184, 0.12);
    }

    .website-summary {
        background: rgba(148, 163, 184, 0.12);
    }

    .status-toggle-options {
        background: #1f2937;
    }

    .status-toggle-option {
        color: #e2e8f0;
    }

    .status-toggle-option input:checked + span {
        background: #111827;
        box-shadow: none;
    }

    .website-summary-label {
        background: #1f2937;
        color: #e2e8f0;
    }

    .switch-slider {
        background: #334155;
    }

    .switch-field input:checked + .switch-slider {
        background: #16a34a;
    }

    .schedule-summary-label {
        background: #1f2937;
        color: #e2e8f0;
    }

    .schedule-action-button:hover {
        background: #1f2937;
    }

    .schedule-remove-button:hover {
        background: rgba(239, 68, 68, 0.2);
    }

    .schedule-copy-day {
        background: #1f2937;
        color: #e2e8f0;
    }

    .schedule-copy-day.is-selected {
        background: #1e3a8a;
        color: #ffffff;
    }
}

@media (max-width: 45rem) {
    .schedule-copy-dialog {
        max-width: 100%;
    }

    .schedule-copy-days {
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .schedule-copy-day {
        flex: 0 0 56px;
    }

    .schedule-interval {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 45rem) {
    .qr-header {
        padding: 1.25rem;
    }

    .toolbar-section-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .toolbar-section-header button {
        align-self: flex-end;
    }

    .toolbar-search-field {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .toolbar .toolbar-selects {
        width: 100%;
        justify-content: flex-start;
    }

    .toolbar {
        flex-wrap: wrap;
    }
}

@media (max-width: 61rem) {
    .qr-page .summary-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .qr-page section.qr-codes {
        padding: 1.25rem;
    }

    main.overview-page section.students {
        padding: 1.25rem;
    }

    .toolbar-section-header {
        flex-wrap: wrap;
    }

    .toolbar-section-title {
        width: 100%;
    }

    .toolbar-section-header .table-toolbar {
        width: 100%;
        justify-content: flex-end;
    }

    .toolbar {
        width: 100%;
    }

    .toolbar-search-field {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .toolbar .toolbar-selects {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .toolbar .select-field {
        min-width: 9rem;
        flex: 1 1 9rem;
    }

    .toolbar-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .toolbar-shell {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}

@media (max-width: 32.5rem) {
    .qr-header {
        padding: 1rem;
    }

    .qr-page section.qr-codes {
        padding: 1rem;
    }

    main.overview-page section.students {
        padding: 1rem;
    }

    .toolbar-actions {
        justify-content: flex-start;
    }

    .toolbar .select-field {
        min-width: 100%;
        flex: 1 1 100%;
    }
}

@media (max-width: 48rem) {
    .qr-page .summary-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 34rem) {
    .qr-page .summary-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 45rem) {
    .qr-page section.qr-codes table {
        border-spacing: 0;
    }

    .qr-page section.qr-codes thead {
        display: none;
    }

    .qr-page section.qr-codes tbody,
    .qr-page section.qr-codes tr,
    .qr-page section.qr-codes td {
        display: block;
        width: 100%;
    }

    .qr-page section.qr-codes tbody tr {
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        background: #ffffff;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(4, auto);
        gap: 0.75rem 1.5rem;
        align-items: start;
    }

    .qr-page section.qr-codes tbody td {
        border: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .qr-page section.qr-codes tbody td::before {
        content: attr(data-label);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 0.7rem;
        color: #64748b;
    }

    .qr-page section.qr-codes tbody td:nth-child(-n+4) {
        grid-column: 1;
    }

    .qr-page section.qr-codes tbody td:nth-child(n+5) {
        grid-column: 2;
    }

    .qr-page section.qr-codes tbody td:nth-child(1) { grid-row: 1; }
    .qr-page section.qr-codes tbody td:nth-child(5) { grid-row: 1; }
    .qr-page section.qr-codes tbody td:nth-child(2) { grid-row: 2; }
    .qr-page section.qr-codes tbody td:nth-child(6) { grid-row: 2; }
    .qr-page section.qr-codes tbody td:nth-child(3) { grid-row: 3; }
    .qr-page section.qr-codes tbody td:nth-child(7) { grid-row: 3; }
    .qr-page section.qr-codes tbody td:nth-child(4) { grid-row: 4; }

    .qr-page section.qr-codes tbody td.qr-primary-cell {
        display: flex;
        flex-direction: column;
    }

    .qr-page section.qr-codes td[colspan] {
        justify-content: center;
        text-align: center;
    }

    .qr-page section.qr-codes th,
    .qr-page section.qr-codes td {
        white-space: normal;
    }

    .qr-detail-page section.event-log table {
        border-spacing: 0;
    }

    .qr-detail-page section.event-log thead {
        display: none;
    }

    .qr-detail-page section.event-log tbody,
    .qr-detail-page section.event-log tr,
    .qr-detail-page section.event-log td {
        display: block;
        width: 100%;
    }

    .qr-detail-page section.event-log tbody tr {
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        background: #ffffff;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem 1.5rem;
        align-items: start;
    }

    .qr-detail-page section.event-log tbody td {
        border: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .qr-detail-page section.event-log tbody td::before {
        content: attr(data-label);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 0.7rem;
        color: #64748b;
    }

    .qr-detail-page section.event-log td[colspan] {
        justify-content: center;
        text-align: center;
    }

    .qr-detail-page section.event-log td[colspan]::before {
        display: none;
    }
}

@media (max-width: 70.125rem) {
    .event-page section.event-log table {
        border-spacing: 0;
    }

    .event-page section.event-log thead {
        display: none;
    }

    .event-page section.event-log tbody,
    .event-page section.event-log tr,
    .event-page section.event-log td {
        display: block;
        width: 100%;
    }

    .event-page section.event-log tbody tr {
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        background: #ffffff;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem 1.5rem;
        align-items: start;
    }

    .event-page section.event-log tbody td {
        border: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .event-page section.event-log tbody td::before {
        content: attr(data-label);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 0.7rem;
        color: #64748b;
    }

    .event-page section.event-log td[colspan] {
        justify-content: center;
        text-align: center;
    }

    .event-page section.event-log td[colspan]::before {
        display: none;
    }
}

@media (max-width: 70.125rem) and (prefers-color-scheme: dark) {
    .event-page section.event-log tbody tr {
        background: #111827;
        border-color: #1f2937;
    }

    .event-page section.event-log tbody td::before {
        color: #94a3b8;
    }
}

@media (max-width: 45rem) and (prefers-color-scheme: dark) {
    .qr-page section.qr-codes tbody tr {
        background: #111827;
        border-color: #1f2937;
    }

    .qr-page section.qr-codes tbody td::before {
        color: #94a3b8;
    }

    .qr-detail-page section.event-log tbody tr {
        background: #111827;
        border-color: #1f2937;
    }

    .qr-detail-page section.event-log tbody td::before {
        color: #94a3b8;
    }
}

.event-log table td,
.event-log table th {
    word-break: break-word;
}

.event-log table td {
    max-width: 260px;
}

.qr-create-summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 12px;
    background: #0f172a;
    color: #f8fafc;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
    user-select: none;
}

.qr-create-summary::-webkit-details-marker {
    display: none;
}