body {
    font-family: Arial, sans-serif;
    margin: 0;
    background: #f5f5f5;
    color: #222;
}

.site-header {
    background: #243447;
    color: white;
    padding: 1rem 0;
}

.wrap {
    width: min(1000px, 92%);
    margin: 0 auto;
}

.grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

.card,
.hero {
    background: white;
    padding: 1.25rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

label {
    display: block;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
}

input,
button,
textarea,
select {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    box-sizing: border-box;
}

textarea {
    min-height: 7rem;
    resize: vertical;
}

button {
    margin-top: 1rem;
    cursor: pointer;
}

.message {
    margin-top: 1rem;
    min-height: 1.5rem;
}

.quick-kiosk-message {
    background: #eef6ff;
    border: 1px solid #b7d7f5;
    border-radius: 12px;
    color: #174a75;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 1rem 0;
    min-height: 1.4rem;
    padding: 0.85rem 1rem;
}

.quick-kiosk-message:empty {
    display: none;
}

.quick-kiosk-message.is-error {
    background: #f8d7da;
    border-color: #e5a8ad;
    color: #7c1e25;
}

.quick-usage-button {
    min-height: 5rem;
    border-radius: 14px;
    font-size: 1.25rem;
    font-weight: 700;
}

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

.checkin-row {
    border-top: 1px solid #ddd;
    padding: 0.75rem 0;
}

#currentCheckinsSection {
    margin-top: 2rem;
}


#currentCheckinsSection {
    margin-top: 2rem;
}

#toggleCurrentCheckinsButton {
    width: 100%;
}

#currentCheckinsPanel {
    margin-top: 1rem;
}

.checkin-row {
    border-top: 1px solid #ddd;
    padding: 0.75rem 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
}

.checkoutButton {
    width: auto;
    padding: 0.5rem 0.75rem;
}

#classCheckinSection {
    margin-top: 2rem;
}

#toggleClassCheckinButton {
    width: 100%;
}

#classCheckinPanel {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #ddd;
}

#todayCheckinsSection {
    margin-top: 2rem;
}

#toggleTodayCheckinsButton {
    width: 100%;
}

#todayCheckinsPanel {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #ddd;
}

.today-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin: 1rem 0;
}

.summary-card {
    background: #f1f1f1;
    padding: 0.75rem;
    border-radius: 10px;
    text-align: center;
}

.summary-card strong {
    display: block;
    font-size: 1.75rem;
}

.summary-card span {
    font-size: 0.85rem;
}

.today-row {
    border-top: 1px solid #ddd;
    padding: 0.75rem 0;
}

@media (max-width: 800px) {
    .today-summary-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.admin-card {
    display: block;
    background: #f1f1f1;
    padding: 1rem;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    border: 1px solid #ddd;
}

.admin-card:hover {
    background: #e9e9e9;
}

.admin-card h2 {
    margin-top: 0;
}

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

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

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

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

.admin-table th {
    background: #f1f1f1;
}

/* Row edited but not saved */
.row-dirty {
    background-color: #fff7cc;
}

/* Row successfully saved */
.row-saved {
    background-color: #d4edda;
    transition: background-color 1s ease;
}

/* Inputs inside edited rows */
.row-dirty input,
.row-dirty select {
    background-color: #fff7cc;
}

.saveStatus {
    margin-left: 0.5rem;
    font-size: 0.85rem;
    color: #2e7d32;
    font-weight: 500;
}

.row-needs-review {
    outline: 2px solid #f0c36d;
}

.row-needs-review td:first-child::before {
    content: "Needs review";
    display: block;
    font-size: 0.75rem;
    font-weight: bold;
    color: #8a5a00;
}

.kiosk-status {
    padding: 1.25rem;
    border-radius: 16px;
    margin: 1rem 0;
    text-align: center;
}

.kiosk-status-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.kiosk-status-detail {
    font-size: 1.1rem;
}

.kiosk-status-checkin,
.kiosk-status-newStudent {
    background: #d4edda;
}

.kiosk-status-checkout {
    background: #dbeafe;
}

.kiosk-status-duplicate {
    background: #fff3cd;
}

.kiosk-status-error {
    background: #f8d7da;
}

#newStudentStep {
    background: #eef6ff;
    padding: 1rem;
    border-radius: 16px;
}

#newStudentStep input {
    font-size: 1.25rem;
    padding: 0.75rem;
}

.reason-button-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin: 1rem 0;
}

.reasonButton {
    min-height: 4rem;
    font-size: 1rem;
    border-radius: 14px;
}

.reasonButton.selected {
    outline: 3px solid #333;
    font-weight: 700;
}

.reasonPrompt {
    font-weight: 700;
    font-size: 1.2rem;
}

.reason-note-help,
.reason-empty-message {
    color: #8a5a00;
    font-weight: 700;
}

@media (max-width: 700px) {
    .reason-button-grid {
        grid-template-columns: 1fr;
    }
}

.quick-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.quick-stat-card {
    background: #f1f1f1;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    min-width: 150px;
}

.quick-stat-link {
    color: inherit;
    text-decoration: none;
}

.quick-stat-card strong {
    display: block;
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.4rem;
}

.quick-stat-card span {
    font-size: 0.85rem;
}

.warning-stat {
    background: #fff3cd;
}

@media (max-width: 1000px) {
    .quick-stats-grid {
        grid-auto-flow: column;
        grid-auto-columns: minmax(150px, 45vw);
        grid-template-columns: none;
    }
}

@media (max-width: 600px) {
    .quick-stats-grid {
        grid-auto-columns: minmax(150px, 70vw);
    }
}

.bell-admin-wrap {
    width: min(1180px, 94%);
}

.bell-admin-header,
.bell-panel-title-row,
.bell-builder-periods-header,
.bell-calendar-toolbar {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
}

.bell-admin-header h1,
.bell-schedule-card h2,
.bell-panel-title-row h2,
.bell-builder-periods-header h3 {
    margin-top: 0;
}

.bell-primary-action,
.bell-secondary-action,
.bell-remove-period-button,
.bell-danger-action {
    width: auto;
    border: 1px solid #cfd7df;
    border-radius: 8px;
    background: #243447;
    color: #fff;
    font-weight: 700;
}

.bell-secondary-action,
.bell-remove-period-button {
    background: #fff;
    color: #243447;
}

.bell-remove-period-button {
    margin-top: 0;
    padding: 0.5rem 0.75rem;
}

.bell-danger-action {
    background: #8a1f1f;
    border-color: #8a1f1f;
    color: #fff;
}

.bell-primary-action:disabled {
    background: #9aa5af;
    border-color: #9aa5af;
    cursor: not-allowed;
}

.bell-builder-header-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.bell-unsaved-indicator {
    background: #fff7cc;
    border: 1px solid #f0c36d;
    border-radius: 999px;
    color: #6d4c00;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.35rem 0.65rem;
    white-space: nowrap;
}

.bell-muted {
    color: #5f6b76;
    margin: 0.25rem 0 0;
}

.bell-overview-section {
    margin: 1.5rem 0;
}

.bell-schedule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.bell-schedule-card,
.bell-empty-card {
    background: #fff;
    border: 1px solid #dde4eb;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.bell-schedule-card.is-editing {
    outline: 3px solid #2f6f9f;
}

.bell-schedule-card-header,
.bell-card-actions,
.bell-badge-row {
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    align-items: flex-start;
}

.bell-schedule-card-header p {
    margin: 0.25rem 0 0;
    color: #5f6b76;
}

.bell-badge-row {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.bell-badge {
    display: inline-block;
    border-radius: 999px;
    padding: 0.25rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.bell-badge-default {
    background: #e8f3ff;
    color: #174a75;
}

.bell-badge-active {
    background: #d4edda;
    color: #1f6b34;
}

.bell-badge-inactive {
    background: #f1f1f1;
    color: #555;
}

.bell-schedule-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin: 1rem 0;
}

.bell-schedule-meta div {
    min-width: 0;
}

.bell-schedule-meta dt {
    font-size: 0.78rem;
    color: #5f6b76;
}

.bell-schedule-meta dd {
    margin: 0.2rem 0 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.bell-period-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 2rem;
}

.bell-period-preview span {
    background: #f1f4f7;
    border: 1px solid #dde4eb;
    border-radius: 999px;
    padding: 0.3rem 0.5rem;
    font-size: 0.82rem;
}

.bell-card-actions {
    margin-top: 1rem;
    justify-content: flex-start;
}

.bell-builder-panel,
.bell-calendar-panel,
.bell-date-assignment-panel {
    margin: 1.5rem 0;
}

.bell-builder-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem 1rem;
}

.bell-builder-notes-field {
    grid-column: span 3;
}

.bell-periods-section {
    background: #f8fafc;
    border: 2px solid #d7e1ea;
    border-radius: 8px;
    margin-top: 1.25rem;
    padding: 1rem;
}

.bell-periods-section.bell-periods-needs-period {
    background: #fff7cc;
    border-color: #f0c36d;
}

.bell-period-requirement {
    color: #8a5a00;
    font-weight: 700;
    margin: 0.25rem 0 0;
}

.bell-passing-helper {
    min-width: 12rem;
}

.bell-builder-form-grid select,
.bell-builder-form-grid textarea,
.bell-period-builder-table select,
.bell-date-assignment-panel select,
.bell-date-assignment-panel textarea,
.bell-calendar-campus-control select,
.bell-passing-helper input {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    box-sizing: border-box;
}

.bell-builder-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
}

.bell-builder-actions .message {
    margin-top: 0;
}

.bell-period-builder-table input,
.bell-period-builder-table select {
    min-width: 8rem;
}

.bell-period-builder-table input[type="checkbox"] {
    min-width: 0;
    width: auto;
}

.bell-period-builder-table th,
.bell-period-builder-table td {
    vertical-align: middle;
}

.bell-period-move-col {
    width: 4.5rem;
    text-align: center;
}

.bell-row-move-controls {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}

.bell-icon-button,
.bell-inline-button {
    width: auto;
    margin-top: 0;
    border: 1px solid #cfd7df;
    border-radius: 6px;
    background: #fff;
    color: #243447;
    font-weight: 700;
    padding: 0.35rem 0.55rem;
}

.bell-icon-button {
    min-width: 2rem;
}

.bell-icon-button:disabled {
    color: #9aa5af;
    cursor: not-allowed;
    opacity: 0.55;
}

.bell-add-period-bottom {
    margin-top: 0.9rem;
}

.bell-end-helper {
    color: #5f6b76;
    font-size: 0.82rem;
    margin-top: 0.35rem;
    white-space: nowrap;
}

.bell-period-row-removed {
    background: #f1f1f1;
    color: #707070;
    text-decoration: line-through;
}

.bell-period-row-removed input {
    color: #707070;
    background: #eeeeee;
}

.periodDisplay {
    display: inline-block;
    min-width: 4rem;
    font-weight: 700;
}

.periodDisplay[hidden],
.bell-auto-checkout-toggle[hidden],
.bell-row-move-controls[hidden],
.bell-end-helper[hidden] {
    display: none;
}

.bell-auto-checkout-toggle {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    margin-top: 0;
}

.bell-duration-cell,
.bell-gap-cell {
    font-weight: 700;
    white-space: nowrap;
}

.bell-time-warning {
    background: #fff3cd;
    border: 1px solid #f0c36d;
    border-radius: 8px;
    color: #6d4c00;
    font-weight: 700;
    margin: 0.85rem 0;
    padding: 0.75rem;
}

.bell-time-warning-row {
    background: #fff8df;
}

.bell-time-warning-field {
    border-color: #c87b00;
    box-shadow: 0 0 0 2px rgba(200, 123, 0, 0.2);
}

.bell-time-warning-cell {
    background: #fff3cd;
    color: #8a5a00;
}

.bell-time-flash {
    animation: bell-warning-flash 0.8s ease;
}

@keyframes bell-warning-flash {
    0% {
        background: #ffd6a3;
    }

    100% {
        background: #fff8df;
    }
}

.bell-calendar-campus-control {
    min-width: 14rem;
}

.bell-calendar-toolbar {
    margin: 1rem 0;
}

.bell-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.5rem;
}

.bell-calendar-weekday {
    font-weight: 700;
    color: #5f6b76;
    text-align: center;
    padding: 0.4rem;
}

.bell-calendar-cell {
    min-height: 7rem;
    width: 100%;
    padding: 0.6rem;
    margin-top: 0;
    border: 1px solid #dde4eb;
    border-radius: 8px;
    background: #fff;
    color: #222;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.bell-calendar-cell:hover {
    border-color: #2f6f9f;
}

.bell-calendar-cell strong {
    font-size: 0.82rem;
}

.bell-calendar-cell span {
    overflow-wrap: anywhere;
}

.bell-calendar-day {
    font-size: 1.1rem;
    font-weight: 700;
}

.bell-calendar-empty {
    background: transparent;
    border: 0;
}

.bell-calendar-cell.has-default {
    background: #f4f9ff;
}

.bell-calendar-cell.has-override {
    background: #fff7cc;
}

.bell-calendar-cell.has-closed {
    background: #fde2e2;
    border-color: #d98c8c;
}

.bell-calendar-cell.has-inactive-schedule {
    border-color: #c87b00;
}

.bell-calendar-cell.has-none {
    background: #f7f7f7;
    color: #606060;
}

.bell-note-preview {
    color: #174a75;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: underline;
}

.bell-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(20, 28, 36, 0.55);
    display: grid;
    place-items: start center;
    overflow-y: auto;
    padding: 4rem 1rem;
}

.bell-modal-overlay[hidden] {
    display: none;
}

.bell-modal-card {
    width: min(680px, 96vw);
    position: relative;
}

.bell-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: auto;
    margin-top: 0;
    border: 1px solid #cfd7df;
    border-radius: 999px;
    background: #fff;
    color: #243447;
    font-weight: 700;
    padding: 0.35rem 0.65rem;
}

.bell-assignment-summary {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0;
}

.bell-assignment-summary dt {
    color: #5f6b76;
    font-size: 0.82rem;
}

.bell-assignment-summary dd {
    margin: 0.2rem 0 0;
    font-weight: 700;
}

.bell-full-note {
    background: #f8fafc;
    border: 1px solid #dde4eb;
    border-radius: 8px;
    margin: 1rem 0;
    padding: 0.85rem;
}

.bell-full-note p {
    margin-bottom: 0;
    white-space: pre-wrap;
}

.bell-field-label {
    display: block;
    font-weight: 700;
    margin-top: 0.75rem;
    margin-bottom: 0.35rem;
}

.bell-schedule-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.bell-schedule-choice {
    min-height: 5rem;
    margin-top: 0;
    border: 2px solid #cfd7df;
    border-radius: 8px;
    background: #fff;
    color: #243447;
    text-align: left;
}

.bell-schedule-choice strong,
.bell-schedule-choice span,
.bell-schedule-choice em {
    display: block;
}

.bell-schedule-choice span,
.bell-schedule-choice em {
    margin-top: 0.25rem;
    font-size: 0.88rem;
}

.bell-schedule-choice.selected {
    border-color: #2f6f9f;
    background: #e8f3ff;
}

.bell-assignment-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1rem;
}

.bell-warning-text {
    color: #8a5a00;
    font-weight: 700;
}

.reason-admin-wrap {
    width: min(1180px, 94%);
}

.reason-admin-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
    margin-bottom: 1.25rem;
}

.reason-admin-form button {
    width: auto;
}

.reason-admin-form select,
.reason-admin-table select,
.reason-admin-table input {
    width: 100%;
    padding: 0.65rem;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.reason-admin-table button {
    width: auto;
    margin-top: 0;
}

.permission-admin-wrap {
    width: min(1180px, 94%);
}

.permission-admin-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
    margin-bottom: 1rem;
}

.permission-admin-form select,
.permission-admin-form input,
.permission-admin-form button {
    width: 100%;
}

.inline-checkbox {
    align-items: center;
    display: inline-flex;
    gap: 0.4rem;
    margin: 0;
    white-space: nowrap;
}

.inline-checkbox input,
.kiosk-mode-options input {
    width: auto;
}

.wide-input {
    min-width: 12rem;
}

.user-management-tabs,
.user-detail-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.user-management-tabs button,
.user-detail-tabs button {
    width: auto;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #1f2937;
}

.user-management-tabs button.active,
.user-detail-tabs button.active {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

.user-management-panel,
.user-detail-section {
    display: none;
}

.user-management-panel.active,
.user-detail-section.active {
    display: block;
}

.user-directory-tools,
.bulk-user-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
    margin: 0.75rem 0;
}

.user-directory-tools label {
    min-width: 170px;
}

.user-row-inactive {
    color: #64748b;
    background: #f8fafc;
}

.status-badge {
    display: inline-block;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    background: #e2e8f0;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 700;
}

.status-approved {
    background: #dcfce7;
    color: #166534;
}

.status-pending {
    background: #fef3c7;
    color: #92400e;
}

.status-rejected,
.status-inactive {
    background: #fee2e2;
    color: #991b1b;
}

.user-management-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.user-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3vh 1rem;
    overflow-y: auto;
}

.user-detail-modal[hidden] {
    display: none;
}

.user-detail-panel {
    position: relative;
    width: min(1100px, 100%);
    background: #fff;
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.user-detail-close {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: auto;
}

.setup-link-box,
.mini-record {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    overflow-wrap: anywhere;
}

.small-input {
    min-width: 5rem;
}

.access-summary-list {
    display: grid;
    gap: 0.25rem;
    max-height: 7rem;
    min-width: 16rem;
    overflow: auto;
}

.access-summary-list span {
    background: #f1f4f7;
    border: 1px solid #dde4eb;
    border-radius: 999px;
    display: inline-block;
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
}

.current-checkins-wrap {
    width: min(1280px, 94%);
}

.kiosk-group-heading {
    background: #f8fafc;
    border: 1px solid #dde4eb;
    border-radius: 8px;
    margin: 1.25rem 0 0.5rem;
    padding: 0.65rem 0.85rem;
}

.dirtyIndicator {
    color: #8a5a00;
    display: block;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.permission-checkbox-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0.75rem;
}

.permission-checkbox-grid label {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin: 0;
}

.permission-checkbox-grid input {
    width: auto;
}

.template-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.templateChip {
    width: auto;
    margin-top: 0;
    border: 1px solid #cfd7df;
    border-radius: 999px;
    background: #fff;
    color: #243447;
    font-weight: 700;
    padding: 0.55rem 0.8rem;
}

.templateChip.selected {
    background: #e8f3ff;
    border-color: #2f6f9f;
}

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

.permission-grid-editor {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) repeat(3, 6rem);
    gap: 0;
    margin: 1rem 0;
    overflow-x: auto;
}

.permission-grid-editor > div,
.permission-radio-cell {
    border-bottom: 1px solid #ddd;
    padding: 0.55rem;
}

.permission-grid-header {
    background: #f1f1f1;
    font-weight: 700;
}

.permission-radio-cell {
    display: flex;
    justify-content: center;
    margin: 0;
}

.permission-radio-cell input,
.permission-export-toggle input {
    width: auto;
}

.need-change-panel {
    background: #fff7cc;
    border: 1px solid #f0c36d;
    border-radius: 8px;
    margin-top: 1rem;
    padding: 1rem;
}

.need-change-panel h2 {
    margin-top: 0;
}

.need-change-panel li {
    margin-bottom: 0.5rem;
}

.need-change-panel span,
.need-change-panel a {
    display: block;
}

.location-tree-wrap {
    width: min(1180px, 94%);
}

.location-tree-header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.location-tree {
    display: grid;
    gap: 0.85rem;
    margin: 1rem 0;
}

.location-drilldown {
    display: grid;
    gap: 1rem;
    margin: 1rem 0;
}

.tree-breadcrumb {
    background: #f8fafc;
    border: 1px solid #dde4eb;
    border-radius: 8px;
    color: #243447;
    font-weight: 700;
    margin-top: 0.75rem;
    padding: 0.65rem 0.85rem;
}

.drill-row {
    border-top: 1px solid #e2e8ef;
    padding-top: 0.85rem;
}

.drill-row-header {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.65rem;
}

.drill-row-header h2 {
    margin: 0;
}

.drill-row-add {
    margin: 0;
    width: auto;
}

.drill-row-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tree-node {
    position: relative;
}

.tree-children {
    border-left: 2px solid #d8e0e8;
    display: grid;
    gap: 0.75rem;
    margin-left: 1.3rem;
    padding: 0.75rem 0 0.15rem 1.25rem;
    position: relative;
}

.tree-connector {
    background: #d8e0e8;
    height: 2px;
    left: 0;
    position: absolute;
    top: 1.8rem;
    width: 1rem;
}

.tree-card {
    align-items: stretch;
    background: #fff;
    border: 1px solid #ccd6df;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: space-between;
    max-width: 44rem;
    overflow: hidden;
}

.drill-card {
    cursor: pointer;
    min-width: 14rem;
    padding: 0.75rem;
    text-align: left;
}

.tree-card-active {
    border-left: 5px solid #2f6f9f;
}

.tree-card-inactive {
    background: #f1f3f5;
    border-color: #c7ccd1;
    border-left: 5px solid #8a939b;
    color: #66717b;
    filter: grayscale(0.35);
}

.tree-card-readonly {
    border-style: dashed;
}

.tree-card-selected {
    background: #e8f3ff;
    border-color: #164d73;
    box-shadow: 0 0 0 3px rgba(47, 111, 159, 0.26);
}

.tree-card-muted {
    opacity: 0.58;
}

.tree-card-muted:hover,
.tree-card-muted:focus-within {
    opacity: 0.88;
}

.tree-card-body {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex: 1;
    gap: 0.8rem;
    margin: 0;
    padding: 0.85rem 1rem;
    text-align: left;
    width: auto;
}

.tree-card-body:hover {
    background: #f6f9fb;
}

.tree-cue {
    color: #2f6f9f;
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 800;
    min-width: 1rem;
    text-align: center;
}

.tree-card-main {
    display: grid;
    gap: 0.2rem;
}

.tree-shortcode,
.tree-meta {
    color: #566575;
    font-size: 0.9rem;
}

.tree-badge {
    align-self: center;
    background: #e8f3ff;
    border-radius: 999px;
    color: #244b6b;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25rem 0.55rem;
}

.tree-card-inactive .tree-badge {
    background: #d7dce0;
    color: #4b555f;
}

.tree-card-actions {
    align-items: center;
    display: flex;
    gap: 0.45rem;
    padding: 0.65rem;
}

.tree-icon-button,
.tree-plus-button,
.tree-top-add,
.tree-modal-close {
    width: auto;
}

.tree-icon-button {
    background: #eef3f7;
    border: 1px solid #ccd6df;
    color: #243447;
    margin: 0;
    padding: 0.45rem 0.6rem;
}

.tree-plus-button,
.tree-top-add {
    align-items: center;
    background: #2f6f9f;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 1.2rem;
    font-weight: 800;
    justify-content: center;
    margin: 0;
}

.tree-plus-button {
    height: 2.35rem;
    padding: 0;
    width: 2.35rem;
}

.tree-top-add {
    gap: 0.35rem;
    margin: 0.5rem 0 1rem;
    padding: 0.55rem 0.9rem;
}

.tree-empty {
    background: #f8fafc;
    border: 1px dashed #ccd6df;
    border-radius: 8px;
    color: #566575;
    max-width: 32rem;
    padding: 0.85rem 1rem;
}

.tree-modal {
    align-items: center;
    background: rgba(17, 24, 39, 0.45);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 50;
}

.tree-modal[hidden] {
    display: none;
}

.tree-modal-panel {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
    max-height: 92vh;
    max-width: 42rem;
    overflow: auto;
    padding: 1.25rem;
    position: relative;
    width: min(42rem, 96vw);
}

.tree-modal-close {
    background: #eef3f7;
    color: #243447;
    margin: 0;
    padding: 0.35rem 0.65rem;
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.tree-modal-context,
.tree-shortcode-preview {
    color: #566575;
    font-size: 0.95rem;
}

.camera-panel,
.pass-capture-prompt {
    background: #f8fafc;
    border: 1px solid #dde4eb;
    border-radius: 8px;
    margin-top: 0.75rem;
    padding: 0.85rem;
}

.camera-panel video,
.pass-capture-panel video {
    background: #111827;
    border-radius: 8px;
    display: block;
    max-height: 55vh;
    max-width: 100%;
    width: 100%;
}

.pass-capture-modal {
    align-items: center;
    background: rgba(17, 24, 39, 0.55);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 60;
}

.pass-capture-modal[hidden] {
    display: none;
}

.pass-capture-panel {
    background: #fff;
    border-radius: 8px;
    max-width: 42rem;
    padding: 1rem;
    position: relative;
    width: min(42rem, 96vw);
}

.passCaptureClose {
    background: #eef3f7;
    color: #243447;
    margin: 0;
    padding: 0.35rem 0.65rem;
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: auto;
}

.pass-flag-list,
.pass-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.pass-flag-badge {
    background: #e8f3ff;
    border: 1px solid #c7dff3;
    border-radius: 999px;
    color: #244b6b;
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
}

.pass-action-row button,
.pass-action-link {
    font-size: 0.85rem;
    margin-top: 0.35rem;
    width: auto;
}

.checkin-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.checkin-filter-tabs a {
    background: #eef3f7;
    border: 1px solid #ccd6df;
    border-radius: 999px;
    color: #243447;
    font-weight: 700;
    padding: 0.45rem 0.75rem;
    text-decoration: none;
}

.checkin-filter-tabs a.active {
    background: #2f6f9f;
    border-color: #2f6f9f;
    color: #fff;
}

.pass-thumb-button {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    width: auto;
}

.pass-thumb-button img {
    border: 1px solid #ccd6df;
    border-radius: 6px;
    display: block;
    height: 64px;
    object-fit: cover;
    width: 84px;
}

.pass-empty-text,
.checkout-status,
.dirtyIndicator {
    color: #566575;
    display: inline-block;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.dirtyIndicator {
    color: #8a5a00;
    font-weight: 700;
}

.pass-flag-toggle-list {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.35rem;
}

.pass-flag-toggle {
    align-items: center;
    display: flex;
    font-size: 0.85rem;
    gap: 0.35rem;
    white-space: nowrap;
}

.pass-flag-toggle input {
    width: auto;
}

.pass-photo-modal {
    align-items: center;
    background: rgba(17, 24, 39, 0.6);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 70;
}

.pass-photo-modal[hidden] {
    display: none;
}

.pass-photo-modal-panel {
    background: #fff;
    border-radius: 8px;
    max-height: 92vh;
    max-width: 58rem;
    padding: 1rem;
    position: relative;
}

.pass-photo-modal-panel img {
    display: block;
    max-height: 82vh;
    max-width: 90vw;
}

.kiosk-directory-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.kiosk-card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin: 1rem 0;
}

.kiosk-directory-card {
    background: #fff;
    border: 1px solid #ccd6df;
    border-left: 5px solid #2f6f9f;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 1rem;
}

.kiosk-card-title-row {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.kiosk-card-title-row h2 {
    font-size: 1.1rem;
    margin: 0;
}

.kiosk-card-details {
    display: grid;
    gap: 0.25rem 0.75rem;
    grid-template-columns: auto 1fr;
    margin: 0.85rem 0;
}

.kiosk-card-details dt {
    color: #566575;
    font-weight: 700;
}

.kiosk-card-details dd {
    margin: 0;
}

.kiosk-card-actions,
.kiosk-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.button-link {
    background: #2f6f9f;
    border-radius: 6px;
    color: #fff;
    display: inline-block;
    font-weight: 700;
    padding: 0.55rem 0.85rem;
    text-decoration: none;
}

.kiosk-editor-panel {
    max-width: 58rem;
}

.kiosk-form-section {
    border-top: 1px solid #e2e8ef;
    margin-top: 1rem;
    padding-top: 1rem;
}

.kiosk-form-section h3 {
    margin-top: 0;
}

.kiosk-placement-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kiosk-page .camera-panel video {
    max-height: 58vh;
    object-fit: contain;
}

@media (max-width: 700px) {
    .kiosk-page {
        font-size: 17px;
    }

    .kiosk-page .wrap {
        margin: 0;
        padding: 0.75rem;
        width: 100%;
    }

    .kiosk-page .card {
        border-radius: 8px;
        padding: 1rem;
    }

    .kiosk-page h1 {
        font-size: 1.65rem;
        line-height: 1.2;
    }

    .kiosk-page h2 {
        font-size: 1.35rem;
    }

    .kiosk-page label {
        display: block;
        font-size: 1rem;
        margin-top: 0.85rem;
    }

    .kiosk-page input,
    .kiosk-page select,
    .kiosk-page textarea,
    .kiosk-page button {
        box-sizing: border-box;
        font-size: 1rem;
        max-width: 100%;
        width: 100%;
    }

    .kiosk-page input,
    .kiosk-page select,
    .kiosk-page textarea {
        min-height: 48px;
    }

    .kiosk-page button {
        margin-top: 0.6rem;
        min-height: 48px;
        padding: 0.75rem 1rem;
    }

    .kiosk-page .reason-button-grid,
    .kiosk-page .today-summary-grid,
    .kiosk-page .pass-action-row {
        grid-template-columns: 1fr;
    }

    .kiosk-page .camera-panel,
    .kiosk-page .pass-capture-prompt {
        padding: 0.75rem;
    }

    .kiosk-page .camera-panel video,
    .kiosk-page .pass-capture-panel video {
        max-height: 52vh;
        width: 100%;
    }

    .kiosk-page .checkin-row,
    .kiosk-page .today-row,
    .kiosk-page .summary-card {
        font-size: 1rem;
    }

    .kiosk-directory-header,
    .kiosk-placement-grid {
        grid-template-columns: 1fr;
        flex-direction: column;
    }
}

@media (max-width: 900px) {
    .bell-admin-header,
    .bell-panel-title-row,
    .bell-builder-periods-header,
    .bell-calendar-toolbar,
    .bell-builder-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .bell-primary-action,
    .bell-secondary-action,
    .bell-danger-action {
        width: 100%;
    }

    .bell-builder-form-grid {
        grid-template-columns: 1fr;
    }

    .bell-builder-notes-field {
        grid-column: span 1;
    }

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

    .bell-calendar-weekday,
    .bell-calendar-empty {
        display: none;
    }

    .bell-schedule-choice-grid,
    .bell-assignment-actions {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .bell-builder-header-actions,
    .bell-row-move-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .reason-admin-form {
        grid-template-columns: 1fr;
    }

    .permission-admin-form,
    .permission-checkbox-grid {
        grid-template-columns: 1fr;
    }

    .location-tree-header,
    .tree-card {
        align-items: stretch;
        flex-direction: column;
    }

    .tree-card-actions {
        justify-content: flex-end;
    }

    .tree-children {
        margin-left: 0.65rem;
        padding-left: 0.9rem;
    }
}