* {
    box-sizing:border-box}

body {
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:#eef3f8;
    color:#17233b}

.topbar {
    background:#073b7a;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 18px;
    min-height:58px}

.brand {
    font-size:29px;
    font-weight:800;
    color:#fff;
    text-decoration:none}

    .topbar nav {
    display:flex;
    gap:12px;
    flex-wrap:wrap}

.topbar nav a {
    color:#fff;
    text-decoration:none;
    font-weight:700}

.topbar-user {
    display:inline-flex;
    align-items:center;
    padding:5px 11px;
    border-radius:16px;
    background:rgba(255,255,255,.16);
    color:#fff;
    font-weight:700;
    white-space:nowrap}

    .container {
    max-width:1280px;
    margin:auto;
    padding:16px}

.card {
    background:#fff;
    border-radius:13px;
    box-shadow:0 2px 10px rgba(0,0,0,.09);
    padding:16px;
    margin-bottom:15px}

.hero {
    text-align:center;
    padding:30px}

.hero img {
    width: 80%;
    max-width: 900px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 14px;
}

.btn,button,input[type=submit] {
    display:inline-block;
    border:0;
    border-radius:9px;
    padding:10px 15px;
    background:#0b67c2;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    cursor:pointer}

.btn.secondary {
    background:#58677b}

.btn.danger {
    background:#b72c2c}

.btn.good {
    background:#16843b}

.btn.orange {
    background:#d56b00}

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

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

.form-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:12px}

label {
    display:block;
    font-weight:700;
    margin-bottom:4px}

input,select,textarea {
    width:100%;
    padding:10px;
    border:1px solid #aeb9c7;
    border-radius:8px;
    font:inherit}

table {
    width:100%;
    border-collapse:collapse;
    background:#fff}

th,td {
    padding:9px;
    border-bottom:1px solid #dde4ec;
    text-align:left}

th {
    background:#e7eef7}

.flash {
    padding:12px;
    border-radius:8px;
    margin-bottom:12px}

.flash.success {
    background:#dff3e4}

.flash.error {
    background:#ffe2e2}

.muted {
    color:#66758a}

.clock-card {
    text-align:center;
    background:linear-gradient(135deg,#073b7a,#0b67c2);
    color:#fff;
    border-radius:14px;
    padding:10px 16px;
    margin-bottom:10px}

.clock-time {
    font-size:clamp(34px,6vw,74px);
    font-weight:800;
    line-height:1}

.clock-date {
    font-size:clamp(17px,2vw,26px)}

.classbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap}


.current-class-caption {
    display:block;
    margin-bottom:2px;
    color:#66758a;
    font-size:clamp(15px,1.5vw,20px);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.current-class-label {
    display:inline-block;
    margin-right:10px;
    font-size:clamp(34px,5vw,72px);
    font-weight:900;
    line-height:1.05;
    color:#073b7a;
}

.summary {
    display:flex;
    gap:8px;
    flex-wrap:wrap}

.pill {
    padding:7px 11px;
    border-radius:999px;
    font-weight:700;
    background:#dbe7f5}

    .student-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
    gap:7px}

.student-card {
    border:2px solid #c6d1df;
    border-radius:10px;
    background:#fff;
    padding:8px;
    min-height:72px;
    cursor:pointer;
    position:relative}

    .student-card .name {
    font-weight:800;
    font-size:17px}

.student-card .status {
    font-size:13px;
    margin-top:4px}

.student-card.in_class {
    background:#dff3e4;
    border-left:8px solid #16843b}

.student-card.neutral {
    background:#fff;
    border-left:8px solid #c6d1df;
}

.student-card.out {
    border-left:8px solid #d56b00}

.student-card.overdue {
    background:#ffe4e4;
    border-color:#bd2929;
    animation:pulse 1.6s infinite}

.student-card.unknown {
    border-left:8px solid #8b96a5}

.student-card.absent {
    opacity:.65;
    border-left:8px solid #bb2d3b}

.timer {
    font-weight:800}

.destination-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:12px}

.destination {
    font-size:20px;
    padding:23px 10px}

.modal {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.62);
    z-index:20;
    align-items:center;
    justify-content:center;
    padding:15px}

.modal.open {
    display:flex}

.modal-box {
    background:#fff;
    max-width:850px;
    width:100%;
    max-height:92vh;
    overflow:auto;
    border-radius:16px;
    padding:20px}

.modal-title {
    font-size:30px;
    font-weight:800;
    text-align:center;
    margin:0 0 14px}

.close {
    float:right;
    background:#687789}

.badge {
    display:inline-block;
    padding:4px 8px;
    border-radius:999px;
    background:#e5ebf3;
    font-size:12px}

.warning {
    background:#fff0cc;
    border-left:6px solid #dc8700;
    padding:12px}

.subscription-warning {
    background:#fff4d2;
    border-radius:9px;
    padding:10px;
    margin-bottom:10px}

.kiosk .container {
    max-width:1500px}

.compact td,.compact th {
    padding:6px}

.tabs {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:12px}

@keyframes pulse {
    50% {
    box-shadow:0 0 0 5px rgba(190,30,30,.15)}

}

@media (max-width: 700px) {
    .topbar {
    align-items:flex-start}

    .topbar nav {
    font-size:13px}

    .container {
    padding:8px}

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

    .student-card .name {
    font-size:15px}

}




/* Student photos */
.student-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 178px;
}

.student-photo {
    width: 92px;
    height: 92px;
    margin-bottom: 8px;
    border: 3px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.22);
    background: #dce5ef;
}

.student-list-photo {
    display: block;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    background: #dce5ef;
}

.student-photo-editor {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.student-edit-photo {
    width: 140px;
    height: 140px;
    border: 3px solid #c6d1df;
    border-radius: 16px;
    object-fit: cover;
    background: #dce5ef;
}

.form-submit {
    display: flex;
    align-items: flex-end;
}

.table-scroll {
    overflow-x: auto;
}

small.muted {
    display: block;
    margin-top: 5px;
}

/* Browser-side student photo cropper */
.student-upload-preview {
    display: block;
    width: 90px;
    height: 90px;
    margin-top: 10px;
    border: 2px solid #c6d1df;
    border-radius: 12px;
    object-fit: cover;
    background: #dce5ef;
}

.photo-crop-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, 0.78);
}

.photo-crop-modal.open {
    display: flex;
}

.photo-crop-dialog {
    width: min(520px, 100%);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    padding: 20px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.35);
}

.photo-crop-dialog h2 {
    margin-top: 0;
}

.photo-crop-stage {
    position: relative;
    width: min(400px, 100%);
    aspect-ratio: 1 / 1;
    margin: 14px auto;
    overflow: hidden;
    border-radius: 12px;
    background: #e5e7eb;
    touch-action: none;
}

.photo-crop-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
}

.photo-crop-canvas.dragging {
    cursor: grabbing;
}

.photo-crop-guide {
    position: absolute;
    inset: 8%;
    pointer-events: none;
    border: 2px dashed rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.18);
}

.photo-zoom-label {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    font-weight: 700;
}

.photo-zoom {
    width: 100%;
}

.photo-crop-actions {
    justify-content: flex-end;
    margin-top: 16px;
}

/* Hall-pass printing and mobile display */
.print-choice-box {
    max-width: 520px;
    text-align: center;
}

.print-choice-actions {
    justify-content: center;
    margin-top: 24px;
}

.hall-pass-page,
.mobile-pass-page {
    min-height: 100vh;
    margin: 0;
    background: #e9eef5;
}

.pass-overlay {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 24px;
    background: rgba(15, 23, 42, 0.78);
}

.pass-popup {
    width: min(720px, 100%);
    padding: 22px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

.hall-pass-document {
    box-sizing: border-box;
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    padding: 28px;
    border: 5px solid #173b64;
    border-radius: 18px;
    background: #ffffff;
    text-align: center;
}

.hall-pass-heading {
    margin-bottom: 18px;
    color: #173b64;
    font-size: clamp(32px, 7vw, 56px);
    font-weight: 900;
    letter-spacing: 0.09em;
}

.hall-pass-photo {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 5px solid #173b64;
    border-radius: 50%;
    background: #f1f5f9;
}

.hall-pass-student-name {
    margin: 16px 0 22px;
    color: #111827;
    font-size: clamp(28px, 6vw, 44px);
    font-weight: 900;
}

.hall-pass-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    text-align: left;
}

.hall-pass-details > div {
    padding: 14px;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
}

.hall-pass-details span,
.hall-pass-details strong {
    display: block;
}

.hall-pass-details span {
    margin-bottom: 5px;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.hall-pass-details strong {
    color: #111827;
    font-size: 20px;
}

.hall-pass-qr-section {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 2px dashed #94a3b8;
}

.hall-pass-qr {
    display: block;
    width: 210px;
    height: 210px;
    margin: 0 auto;
}

.hall-pass-qr-section p {
    margin: 9px auto 0;
    max-width: 360px;
    color: #475569;
}

.pass-popup-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.mobile-pass-wrap {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 14px;
}

.mobile-hall-pass {
    max-width: 520px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.2);
}

.mobile-pass-note {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 2px dashed #94a3b8;
    color: #173b64;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
}

.expired-pass-message {
    width: min(520px, calc(100% - 32px));
    margin: 80px auto;
    padding: 28px;
    border-radius: 16px;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.15);
}

@media (max-width: 600px) {
    .hall-pass-document {
        padding: 18px;
    }

    .hall-pass-details {
        grid-template-columns: 1fr;
    }

    .hall-pass-photo {
        width: 125px;
        height: 125px;
    }

    .hall-pass-qr {
        width: 180px;
        height: 180px;
    }
}

@media print {
    body.hall-pass-page {
        background: #ffffff;
    }

    .pass-overlay {
        position: static;
        display: block;
        padding: 0;
        background: #ffffff;
    }

    .pass-popup {
        width: 100%;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .hall-pass-document {
        max-width: none;
        min-height: 9.5in;
        border-color: #000000;
        break-inside: avoid;
    }

    .no-print {
        display: none !important;
    }
}

/* Live hall-pass status */
.live-pass { transition: border-color .25s, background-color .25s; }
.live-pass.pass-green { border-color: #15803d; background: #f0fdf4; }
.live-pass.pass-yellow { border-color: #ca8a04; background: #fefce8; }
.live-pass.pass-orange { border-color: #ea580c; background: #fff7ed; }
.live-pass.pass-red { border-color: #b91c1c; background: #fef2f2; }
.live-pass.pass-returned { border-color: #2563eb; background: #eff6ff; }
.live-pass.pass-canceled,
.live-pass.pass-expired { border-color: #64748b; background: #f1f5f9; filter: grayscale(.25); }
.pass-school-name { margin-bottom: 5px; font-size: 20px; font-weight: 900; color: #334155; }
.pass-status-banner { margin: 0 auto 8px; padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,.8); font-size: 18px; font-weight: 900; letter-spacing: .04em; }
.pass-number { margin-bottom: 14px; color: #64748b; font-weight: 800; }
.pass-destination-label { margin-top: 10px; color: #64748b; font-size: 15px; font-weight: 800; text-transform: uppercase; }
.pass-destination { margin: 4px 0; color: #111827; font-size: clamp(26px, 6vw, 42px); font-weight: 900; }
.pass-location { color: #475569; font-size: 18px; font-weight: 700; }
.live-elapsed { margin: 16px 0; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.82); font-size: 24px; font-weight: 900; }
.cancel-pass-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cancel-pass-form input { min-width: 220px; }
.btn.danger { background: #b91c1c; color: #fff; }

/* Activity-log search and pass controls */
.log-search-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 14px;
    align-items: end;
}

.log-search-form label {
    display: grid;
    gap: 6px;
    font-weight: 700;
}

.log-search-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-column: 1 / -1;
}

.table-scroll {
    overflow-x: auto;
}

.inline-form {
    display: inline;
    margin: 0;
}

.small-btn {
    padding: 7px 10px;
    font-size: 14px;
    white-space: nowrap;
}

.status-label.canceled {
    color: #64748b;
    font-weight: 800;
}

@media (max-width: 850px) {
    .log-search-form {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
}

@media (max-width: 520px) {
    .log-search-form {
        grid-template-columns: 1fr;
    }
}

/* Keep a printed hall pass on one letter-size page. */
@page {
    size: letter portrait;
    margin: 0.25in;
}

@media print {
    html,
    body.hall-pass-page {
        width: 8in;
        height: 10.5in;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .pass-overlay,
    .pass-popup {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .hall-pass-document {
        width: 100%;
        max-width: 7.5in;
        min-height: 0;
        max-height: 10in;
        margin: 0 auto;
        padding: 0.18in;
        border-width: 3px;
        border-radius: 10px;
        page-break-inside: avoid;
        break-inside: avoid-page;
        overflow: hidden;
    }

    .pass-school-name {
        margin-bottom: 2px;
        font-size: 15px;
    }

    .hall-pass-heading {
        margin-bottom: 6px;
        font-size: 28px;
        letter-spacing: 0.05em;
    }

    .pass-status-banner {
        margin-bottom: 4px;
        padding: 5px 10px;
        font-size: 13px;
    }

    .pass-number {
        margin-bottom: 6px;
        font-size: 12px;
    }

    .hall-pass-photo {
        width: 90px;
        height: 90px;
        border-width: 3px;
    }

    .hall-pass-student-name {
        margin: 5px 0 7px;
        font-size: 27px;
    }

    .pass-destination-label {
        margin-top: 3px;
        font-size: 11px;
    }

    .pass-destination {
        margin: 1px 0;
        font-size: 25px;
    }

    .pass-location {
        font-size: 13px;
    }

    .live-elapsed {
        margin: 6px 0;
        padding: 6px;
        font-size: 17px;
    }

    .hall-pass-details {
        gap: 5px;
    }

    .hall-pass-details > div {
        padding: 6px 8px;
        border-width: 1px;
        border-radius: 6px;
    }

    .hall-pass-details span {
        margin-bottom: 1px;
        font-size: 9px;
    }

    .hall-pass-details strong {
        font-size: 13px;
    }

    .hall-pass-qr-section {
        margin-top: 7px;
        padding-top: 6px;
        border-top-width: 1px;
    }

    .hall-pass-qr {
        width: 125px;
        height: 125px;
    }

    .hall-pass-qr-section p {
        margin-top: 3px;
        max-width: none;
        font-size: 9px;
        line-height: 1.15;
    }
}
.pass-action-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.pass-action-buttons .inline-form {
    margin: 0;
}


/* Teacher dashboard and bell schedule */
.dashboard-heading,
.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 16px;
    margin: 18px 0;
}

.metric-card {
    background: #fff;
    border-radius: 16px;
    padding: 22px;
    text-align: center;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.09);
}

.metric-number {
    display: block;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
}

.metric-label {
    display: block;
    margin-top: 8px;
    color: #475569;
    font-weight: 700;
}

.dashboard-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.current-period-card {
    border: 2px solid #bbf7d0;
    background: #f0fdf4;
    border-radius: 14px;
    padding: 18px;
}

.current-period-card h3 {
    margin: 10px 0 8px;
    font-size: 1.5rem;
}

.next-period {
    margin-top: 14px;
    padding: 12px;
    border-radius: 10px;
    background: #f8fafc;
}

.destination-summary-list > div,
.out-student-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
}

.out-student-row {
    display: grid;
    grid-template-columns: 54px minmax(160px, 1fr) minmax(130px, 1fr) 90px;
}

.dashboard-student-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.out-student-name span {
    display: block;
    color: #64748b;
    font-size: 0.9rem;
}

.bell-form {
    grid-template-columns: 1.3fr 1.3fr 1fr 0.8fr 0.8fr auto;
    align-items: end;
}

.form-button-cell {
    display: flex;
    align-items: end;
}

.empty-period-card {
    text-align: center;
    padding: 35px;
}

@media (max-width: 900px) {
    .dashboard-metrics {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }

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

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

@media (max-width: 600px) {
    .dashboard-metrics,
    .bell-form {
        grid-template-columns: 1fr;
    }

    .out-student-row {
        grid-template-columns: 48px 1fr;
    }

    .out-student-row > div:nth-child(3),
    .out-student-row > div:nth-child(4) {
        grid-column: 2;
    }
}

/* Compact, unified teacher dashboard */
.compact-dashboard-heading { margin-bottom: 12px; }
.compact-dashboard-heading h1 { margin-bottom: 3px; }
.compact-metrics { margin-bottom: 14px; }
.dashboard-grid-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.dashboard-panel { margin: 0; min-width: 0; }
.dashboard-panel h2 { margin: 0; }
.dashboard-panel .section-heading { margin-bottom: 10px; }
.dashboard-panel .section-heading p { margin: 2px 0 0; }
.compact-period-card { padding: 12px; margin-bottom: 10px; }
.compact-period-card h3 { margin: 6px 0 2px; }
.compact-period-card p { margin: 0; }
.empty-inline, .all-clear { padding: 11px; border-radius: 9px; background: #f3f7fb; }
.all-clear { background: #e5f7e8; }
.quick-add-row { display: grid; grid-template-columns: minmax(140px, 1fr) auto auto; gap: 8px; align-items: center; margin-bottom: 10px; }
.quick-add-row input, .quick-add-row button { margin: 0; }
.inline-check { display: flex; gap: 5px; align-items: center; white-space: nowrap; font-size: .9rem; }
.inline-check input { width: auto; }
.compact-manage-list, .compact-student-list, .compact-out-list { display: grid; gap: 7px; max-height: 340px; overflow: auto; padding-right: 2px; }
.manage-row, .student-manage-row, .compact-out-row { display: grid; align-items: center; gap: 9px; padding: 8px; border: 1px solid #dfe7ef; border-radius: 9px; background: #fff; }
.manage-row { grid-template-columns: minmax(0, 1fr) auto; }
.student-manage-row { grid-template-columns: 42px minmax(0, 1fr) auto; }
.compact-out-row { grid-template-columns: 42px minmax(0, 1fr) auto auto; }
.manage-row small, .student-manage-row small, .compact-out-row small { display: block; color: #667085; margin-top: 2px; }
.student-manage-row .student-list-photo, .compact-out-row .dashboard-student-photo { width: 40px; height: 40px; margin: 0; }
.btn.small { padding: 6px 10px; font-size: .86rem; }
.dashboard-search { margin: 0 0 9px; }
.compact-schedule-form { display: grid; grid-template-columns: 1.1fr 1.1fr 1fr .85fr .85fr auto; gap: 7px; margin-bottom: 10px; }
.compact-schedule-form input, .compact-schedule-form select, .compact-schedule-form button { margin: 0; min-width: 0; }
.narrow-card { max-width: 900px; margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
    .dashboard-grid-main { grid-template-columns: 1fr; }
    .compact-schedule-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .compact-schedule-form button { grid-column: span 2; }
}

@media (max-width: 600px) {
    .quick-add-row { grid-template-columns: 1fr; }
    .compact-out-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
    .compact-out-row > span:nth-last-child(2) { grid-column: 2 / 4; }
    .compact-schedule-form { grid-template-columns: 1fr; }
    .compact-schedule-form button { grid-column: auto; }
}

/* Bell schedule management actions */
.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.action-row form {
    margin: 0;
}

/* Students who remained out after their scheduled period ended. */
.compact-out-row.previous-period-out {
    border-left: 5px solid #c2410c;
    background: #fff7ed;
}

.previous-period-note {
    display: block;
    margin-top: 3px;
    color: #9a3412;
    font-weight: 700;
}


/* Dashboard subscription and navigation additions */
.topbar-subscription {
    display: inline-flex;
    align-items: center;
    padding: .4rem .7rem;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 700;
    white-space: nowrap;
}
.topbar-subscription.active { background: #dcfce7; color: #166534; }
.topbar-subscription.expired { background: #fee2e2; color: #991b1b; }
.page-return-link { margin: 0 0 1rem; }
.login-create-account { margin-top: 1.25rem; text-align: center; }

/* Compact browser layout for the teacher hall-pass viewer. */
@media screen {
    body.hall-pass-page {
        overflow: hidden;
    }

    body.hall-pass-page .pass-overlay {
        padding: 8px;
    }

    body.hall-pass-page .pass-popup {
        width: min(680px, 100%);
        max-height: calc(100vh - 16px);
        padding: 10px;
        overflow-y: auto;
        border-radius: 14px;
    }

    body.hall-pass-page .hall-pass-document {
        max-width: 610px;
        padding: 12px 18px;
        border-width: 4px;
        border-radius: 14px;
    }

    body.hall-pass-page .pass-school-name {
        margin-bottom: 1px;
        font-size: 15px;
        line-height: 1.1;
    }

    body.hall-pass-page .hall-pass-heading {
        margin-bottom: 5px;
        font-size: clamp(25px, 4vh, 34px);
        line-height: 1;
        letter-spacing: 0.055em;
    }

    body.hall-pass-page .pass-status-banner {
        margin-bottom: 3px;
        padding: 5px 10px;
        font-size: 13px;
        line-height: 1.1;
    }

    body.hall-pass-page .pass-number {
        margin-bottom: 5px;
        font-size: 12px;
        line-height: 1;
    }

    body.hall-pass-page .hall-pass-photo {
        width: clamp(82px, 12vh, 110px);
        height: clamp(82px, 12vh, 110px);
        border-width: 3px;
    }

    body.hall-pass-page .hall-pass-student-name {
        margin: 4px 0 6px;
        font-size: clamp(24px, 4vh, 34px);
        line-height: 1.05;
    }

    body.hall-pass-page .pass-destination-label {
        margin-top: 2px;
        font-size: 11px;
        line-height: 1.1;
    }

    body.hall-pass-page .pass-destination {
        margin: 1px 0;
        font-size: clamp(22px, 3.8vh, 31px);
        line-height: 1.05;
    }

    body.hall-pass-page .pass-location {
        font-size: 13px;
        line-height: 1.15;
    }

    body.hall-pass-page .live-elapsed {
        margin: 5px 0;
        padding: 5px 8px;
        font-size: 17px;
        line-height: 1.1;
    }

    body.hall-pass-page .hall-pass-details {
        gap: 5px;
    }

    body.hall-pass-page .hall-pass-details > div {
        padding: 5px 8px;
        border-width: 1px;
        border-radius: 7px;
    }

    body.hall-pass-page .hall-pass-details span {
        margin-bottom: 1px;
        font-size: 9px;
        line-height: 1.1;
    }

    body.hall-pass-page .hall-pass-details strong {
        font-size: 13px;
        line-height: 1.15;
    }

    body.hall-pass-page .hall-pass-qr-section {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 10px;
        margin-top: 6px;
        padding-top: 5px;
        text-align: left;
        border-top-width: 1px;
    }

    body.hall-pass-page .hall-pass-qr {
        width: clamp(92px, 14vh, 125px);
        height: clamp(92px, 14vh, 125px);
        margin: 0;
    }

    body.hall-pass-page .hall-pass-qr-section p {
        margin: 0;
        max-width: none;
        font-size: 11px;
        line-height: 1.25;
    }

    body.hall-pass-page .pass-popup-actions {
        gap: 7px;
        margin-top: 7px;
    }

    body.hall-pass-page .pass-popup-actions .btn,
    body.hall-pass-page .cancel-pass-form input {
        min-height: 34px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

@media screen and (max-width: 600px) {
    body.hall-pass-page {
        overflow: auto;
    }

    body.hall-pass-page .pass-overlay {
        position: static;
        min-height: 100vh;
        align-items: flex-start;
    }

    body.hall-pass-page .pass-popup {
        max-height: none;
        overflow: visible;
    }

    body.hall-pass-page .hall-pass-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Previous-day unresolved hall passes */
.unresolved-pass-section {
    margin-top: 14px;
    padding: 13px;
    border: 2px solid #f59e0b;
    border-radius: 12px;
    background: #fffbeb;
}
.unresolved-pass-section h3 { margin: 0 0 4px; color: #92400e; }
.previous-day-unresolved {
    grid-template-columns: 42px minmax(0, 1fr) auto minmax(125px, auto);
    border-left: 6px solid #dc2626;
    background: #fff7ed;
}
.unresolved-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.current-out-heading { margin: 15px 0 8px; }
@media (max-width: 700px) {
    .previous-day-unresolved { grid-template-columns: 42px minmax(0, 1fr); }
    .previous-day-unresolved > .timer,
    .previous-day-unresolved > .unresolved-actions { grid-column: 2; justify-content: flex-start; }
}

/* Previous-day unresolved hall passes */
.unresolved-pass-section {
    margin-top: 14px;
    padding: 14px;
    border: 2px solid #f59e0b;
    border-radius: 12px;
    background: #fff7ed;
}
.unresolved-pass-section h3 {
    margin: 0 0 4px;
    color: #9a3412;
}
.previous-day-unresolved {
    border-left: 5px solid #dc2626;
    background: #fff;
}
.unresolved-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}
@media (max-width: 700px) {
    .unresolved-actions {
        grid-column: 2 / -1;
        justify-content: flex-start;
    }
}