.attendance-page { max-width: 820px; margin: 0 auto; padding: 28px 16px 60px; }
.attendance-brand { display: inline-block; margin-bottom: 20px; }
.attendance-brand img { display: block; width: 220px; max-width: 70vw; height: auto; }
.attendance-card { padding: 28px; border: 1px solid #d8e1eb; border-radius: 18px; background: white; }
.attendance-card h1 { font-size: clamp(26px, 5vw, 38px); line-height: 1.2; }
.attendance-card h2 { font-size: 19px; }
.attendance-card form > label { display: block; font-weight: 700; margin: 18px 0 8px; }
.attendance-card input:not([type=radio]):not([type=checkbox]):not([type=hidden]), .attendance-card select { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #adbfd1; border-radius: 8px; font: inherit; box-sizing: border-box; }
.attendance-card input[readonly] { background: #f4f8fc; }
.attendance-card fieldset, .attendance-card details { border: 1px solid #d8e1eb; padding: 16px; margin: 22px 0; border-radius: 10px; min-width: 0; }
.attendance-card legend { font-weight: 700; padding: 0 6px; }
.attendance-card summary { cursor: pointer; font-weight: 700; }
.attendance-card input[type=radio], .attendance-card input[type=checkbox] { width: 20px; height: 20px; vertical-align: middle; flex-shrink: 0; }
.attendance-session, .attendance-privacy, .attendance-warning { padding: 16px; background: #f4f8fc; border-radius: 8px; margin: 16px 0; overflow-wrap: anywhere; }
.attendance-warning { border-left: 4px solid #b47310; }
#signature-pad { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; background: #fff; border: 2px dashed #607289; border-radius: 8px; touch-action: none; }
.attendance-signature-actions { display: flex; gap: 12px; margin: 12px 0 20px; }
.attendance-consent { display: flex; gap: 10px; align-items: flex-start; }
.attendance-message { padding: 16px; background: #edf8ef; border: 1px solid #68a476; border-radius: 8px; margin: 18px 0; overflow-wrap: anywhere; }
.attendance-message.is-error { background: #fff1f1; border-color: #b33333; }
.attendance-card button { min-height: 44px; margin: 8px 0; }
.attendance-admin table { min-width: 1000px; }
.attendance-admin .attendance-filters { display: flex; flex-wrap: wrap; gap: 12px; }
.attendance-admin input, .attendance-admin select { padding: 8px; max-width: 100%; }
.attendance-admin .attendance-filters label { display: grid; gap: 4px; }
.attendance-admin .attendance-signature { max-width: 100%; width: 480px; border: 1px solid #d8e1eb; }
.attendance-admin .attendance-audit { white-space: pre-wrap; overflow-wrap: anywhere; }
.attendance-admin .attendance-session-settings { min-width: 230px; }
.attendance-admin .attendance-session-settings label { display: block; margin-bottom: 6px; }
.attendance-admin .attendance-session-settings input { width: 100%; box-sizing: border-box; }
@media (max-width: 600px) { .attendance-card { padding: 18px; } .attendance-page { padding: 18px 10px 40px; } .attendance-admin .admin-shell { display: block; } }
@media print { .attendance-admin .admin-sidebar, .attendance-admin form, .attendance-admin button, .attendance-admin .attendance-export-actions { display: none; } .attendance-admin .admin-table-shell { overflow: visible; } .attendance-admin table { min-width: 0; font-size: 9px; } }

.attendance-admin .course-picker { display: grid; gap: 6px; min-width: 260px; }
.attendance-admin .course-picker select[data-picker-results] { width: 100%; max-width: 520px; }
.attendance-admin .course-picker input[type=search] { width: 100%; max-width: 520px; box-sizing: border-box; }
.attendance-admin .attendance-link-sessions { display: grid; gap: 12px; margin-top: 12px; }
.attendance-admin .attendance-link-card { border: 1px solid #d5dde8; border-radius: 12px; padding: 14px; overflow-wrap: anywhere; }
.attendance-admin .attendance-link-card h4 { margin: 0 0 6px; }
.attendance-admin .attendance-link-card .outline-button { margin: 6px 6px 0 0; display: inline-block; }
.attendance-admin .attendance-past { display: block; margin-top: 8px; }
.attendance-admin .attendance-map-preview { margin: 16px 0; max-width: 480px; }
.attendance-admin .attendance-map-preview canvas { display: block; width: 100%; height: auto; border: 1px solid #d8e1eb; border-radius: 8px; }
.attendance-admin .attendance-map-preview figcaption { margin-top: 8px; font-size: 14px; }
.attendance-admin .attendance-filter-panel, .attendance-admin .attendance-record-panel { background: #fff; gap: 20px; }
.attendance-admin .attendance-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.attendance-admin .attendance-section-heading h3 { margin: 0; color: #15324f; font-size: 20px; }
.attendance-admin .attendance-section-heading p { margin: 6px 0 0; color: #607289; font-size: 14px; }
.attendance-admin .attendance-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 20px 16px; align-items: start; }
.attendance-admin .attendance-filters label { display: grid; gap: 8px; font-size: 13px; font-weight: 700; color: #344b63; min-width: 0; }
.attendance-admin .attendance-filters .course-picker { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; }
.attendance-admin .attendance-filters input:not([type=hidden]), .attendance-admin .attendance-filters select { width: 100%; max-width: none; height: 46px; min-height: 46px; margin: 0; padding: 10px 12px; border: 1px solid #ced9e5; border-radius: 8px; background: #fff; color: #15324f; font: inherit; font-weight: 400; box-sizing: border-box; }
.attendance-admin .attendance-filters input::placeholder { color: #7a8a9c; }
.attendance-admin .attendance-filters select[data-picker-results] { position: absolute; top: 74px; left: 0; z-index: 5; width: calc(50% - 8px); height: auto; min-height: 160px; box-shadow: 0 10px 24px rgba(17, 44, 82, .15); }
.attendance-admin .attendance-filter-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.attendance-admin .attendance-filter-footer p { margin: 0; color: #607289; font-size: 13px; }
.attendance-admin .attendance-filter-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.attendance-admin .attendance-dashboard-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 18px; border: 1px solid #005baa; border-radius: 8px; background: #005baa; color: #fff; font: inherit; font-size: 13px; font-weight: 700; line-height: 1.4; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.attendance-admin .attendance-dashboard-button:hover { background: #004887; border-color: #004887; }
.attendance-admin .attendance-dashboard-button-secondary { background: #fff; border-color: #ced9e5; color: #344b63; }
.attendance-admin .attendance-dashboard-button-secondary:hover { background: #f1f6fb; border-color: #99b4cf; }
.attendance-admin .attendance-dashboard-button::before, .attendance-admin .attendance-dashboard-button::after { content: none; }
.attendance-admin .attendance-filters input:focus-visible, .attendance-admin .attendance-filters select:focus-visible, .attendance-admin .attendance-dashboard-button:focus-visible, .attendance-admin .attendance-table-shell:focus-visible, .attendance-admin .attendance-record-link:focus-visible { outline: 3px solid #86b8ec; outline-offset: 3px; }
.attendance-admin .attendance-export-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-top: 1px solid #e6edf4; padding-top: 18px; }
.attendance-admin .attendance-export-label { margin-right: 8px; font-size: 13px; font-weight: 700; color: #344b63; }
.attendance-admin .attendance-export-actions p { flex-basis: 100%; margin: 0; font-size: 12px; color: #607289; }
.attendance-admin .attendance-record-count { display: inline-block; padding: 3px 9px; margin-left: 6px; border-radius: 6px; background: #edf3fa; font-size: 14px; vertical-align: middle; }
.attendance-admin .attendance-table-shell { overflow: auto; max-width: 100%; border: 1px solid #e1e8f0; border-radius: 10px; box-shadow: none; background: #fff; }
.attendance-admin .attendance-record-table { min-width: 1080px; font-size: 13px; }
.attendance-admin .attendance-record-table th { padding: 14px 16px; background: #f4f7fb; color: #52657c; font-size: 11px; letter-spacing: .05em; white-space: nowrap; }
.attendance-admin .attendance-record-table td { padding: 18px 16px; border-bottom: 1px solid #e9eef4; }
.attendance-admin .attendance-record-table td strong { font-size: 13px; line-height: 1.5; }
.attendance-admin .attendance-record-table td:nth-child(2) { min-width: 250px; max-width: 340px; overflow-wrap: anywhere; }
.attendance-admin .attendance-record-table td:nth-child(3) { min-width: 180px; }
.attendance-admin .attendance-record-table tbody tr:nth-child(even) { background: #fafbfd; }
.attendance-admin .attendance-record-table tbody tr:hover { background: #f0f6fc; }
.attendance-admin .attendance-record-table tbody tr:last-child td { border-bottom: 0; }
.attendance-admin .attendance-record-table .attendance-cell-meta { display: block; margin-top: 4px; color: #6a7b8e; font-size: 12px; line-height: 1.5; }
.attendance-admin .attendance-ip { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; min-width: 120px; }
.attendance-admin .attendance-status-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.attendance-admin .attendance-badge { display: inline-flex; align-items: center; padding: 4px 9px; border: 1px solid transparent; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.attendance-admin .attendance-badge-info { color: #185a9b; background: #eaf3ff; border-color: #d5e6fb; }
.attendance-admin .attendance-badge-success { color: #246647; background: #edf8f1; border-color: #d2ebdd; }
.attendance-admin .attendance-badge-neutral { color: #52657c; background: #f2f5f8; border-color: #e1e7ee; }
.attendance-admin .attendance-badge-warning { color: #855706; background: #fff8e8; border-color: #f5e3b5; }
.attendance-admin .attendance-badge-danger { color: #a33039; background: #fff0f1; border-color: #f3d4d8; }
.attendance-admin .attendance-record-link { display: inline-flex; align-items: center; gap: 8px; color: #005baa; font-weight: 700; white-space: nowrap; text-decoration: none; }
.attendance-admin .attendance-record-link:hover { text-decoration: underline; }
.attendance-admin .attendance-record-table .attendance-empty { padding: 48px 20px; text-align: center; }
.attendance-admin .attendance-empty a { display: inline-block; margin-top: 14px; color: #005baa; font-weight: 700; }
.attendance-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 1200px) {
    .attendance-admin .attendance-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-admin .attendance-filters .course-picker { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 600px) {
    .attendance-admin .attendance-filters, .attendance-admin .attendance-filters .course-picker { grid-template-columns: minmax(0, 1fr); }
    .attendance-admin .attendance-filters .course-picker { grid-row: auto; }
    .attendance-admin .attendance-filters select[data-picker-results] { width: 100%; }
    .attendance-admin .attendance-filter-footer, .attendance-admin .attendance-section-heading { flex-direction: column; align-items: flex-start; }
    .attendance-admin .attendance-filter-buttons { width: 100%; }
    .attendance-admin .attendance-filter-buttons > * { flex: 1; }
    .attendance-admin .attendance-export-label { flex-basis: 100%; }
}
@media print {
    .attendance-admin .attendance-filter-panel { display: none; }
    .attendance-admin .attendance-record-table { min-width: 0; font-size: 9px; }
}