:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202c39;
  background: #f5f6f8;
  font-synthesis: none;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
main { width: min(100%, 72rem); margin: 0 auto; padding: 24px 32px; flex: 1; }
.page-header { display: flex; align-items: center; min-height: 48px; margin-bottom: 20px; border-bottom: 1px solid #e1e5ea; }
h1 { font-size: 1.1rem; font-weight: 650; margin: 0 0 14px; letter-spacing: -.02em; }
.key-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); grid-auto-rows: minmax(136px, auto); gap: 12px; }
.kiosk-main { width: 100%; max-width: none; padding: 16px clamp(8px, 1.2vw, 20px); }
.kiosk-main .key-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 780px) { .kiosk-main .key-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 570px) { .kiosk-main .key-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 330px) { .kiosk-main .key-grid { grid-template-columns: minmax(0, 1fr); } }
button, input { font: inherit; min-height: 48px; }
button { cursor: pointer; padding: 12px 16px; border: 1px solid #ccd3dc; border-radius: 10px; background: #fff; color: inherit; touch-action: manipulation; }
button:disabled { cursor: wait; opacity: .6; }
.key-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 0; width: 100%; padding: 20px 14px; text-align: center; overflow-wrap: anywhere; }
.available { background: #edf7ef; border-color: #a6cdb0; color: #244b32; }
.checked_out { background: #fbefee; border-color: #dfb2ae; color: #663b37; }
.room-number { display: block; max-width: 100%; font-size: 2rem; line-height: 1.15; letter-spacing: -.035em; font-weight: 700; color: #24312b; }
.checked_out .room-number { color: #432d2c; }
.key-holder { display: block; max-width: 100%; font-size: .9rem; line-height: 1.45; }
.checked_out .key-holder { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.key-surname { display: block; font-size: 1.06rem; font-weight: 650; line-height: 1.25; }
.key-given { display: block; font-size: .84rem; line-height: 1.35; }
.key-checkout-time { display: block; color: #855754; font-size: 1.06rem; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.2; }
:focus-visible { outline: 3px solid #356bc7; outline-offset: 3px; }
@media (hover: hover) {
  .key-tile:hover { border-color: #688a73; box-shadow: 0 2px 8px rgb(25 40 30 / .07); }
  .checked_out:hover { border-color: #a27370; }
}
#dashboard-message:empty, #modal-error:empty, #borrower-info:empty, #confirmation:empty { display: none; }
#dashboard-message { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 4; width: max-content; max-width: calc(100vw - 32px); padding: 10px 16px; margin: 0; border: 1px solid #d3dce5; border-radius: 12px; background: #fff; color: #41516a; box-shadow: 0 4px 18px rgb(30 45 60 / .09); font-size: .85rem; line-height: 1.4; pointer-events: none; }
[role="alert"] { color: #992d29; font-size: .9rem; line-height: 1.5; }
dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; border: 1px solid #dde2e9; border-radius: 18px; padding: 24px; color: #202c39; box-shadow: 0 24px 80px rgb(15 23 42 / .18); }
dialog::backdrop { background: rgb(23 32 45 / .38); }
dialog h2 { font-size: 1.35rem; line-height: 1.3; margin: 0 0 16px; overflow-wrap: anywhere; }
#borrower-info { color: #5b6574; font-size: .9rem; line-height: 1.5; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
label[for="employee-search"] { display: block; font-size: .85rem; font-weight: 600; margin-top: 8px; }
input[type="search"] { display: block; width: 100%; padding: 10px 12px; margin-top: 8px; border: 1px solid #cbd3dd; border-radius: 10px; background: #fafbfd; color: inherit; }
#employee-search { max-width: 22rem; }
#employee-results { max-height: min(40dvh, 360px); overflow-y: auto; margin: 12px 0; overscroll-behavior: contain; }
.employee-option { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px; border-radius: 8px; cursor: pointer; overflow-wrap: anywhere; font-size: .9rem; line-height: 1.4; }
.employee-option:has(input:checked) { background: #edf2f9; }
.employee-option input { min-height: auto; width: 20px; height: 20px; flex-shrink: 0; accent-color: #354f73; }
#confirmation { font-size: 1.25rem; font-weight: 500; line-height: 1.6; padding: 16px; margin: 12px 0 20px; border: 1px solid #e1e7ee; border-radius: 12px; background: #f7f9fc; overflow-wrap: anywhere; }
.dialog-actions { display: flex; gap: 10px; margin-top: 20px; }
.dialog-actions button { flex: 1; min-width: 0; }
#confirm-operation { color: #fff; background: #30445e; border-color: #30445e; font-weight: 600; }
#cancel-operation { color: #465365; background: #f7f8fa; border-color: #dde2e9; }
.page-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; padding: 6px 20px; color: #687383; font-size: .7rem; line-height: 1.5; }
.page-footer a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration-color: #b7c0cd; text-underline-offset: 3px; overflow-wrap: anywhere; }
.project-label { font-weight: 650; color: #566172; }
[hidden] { display: none !important; }
@media (max-width: 560px) {
  main { padding: 16px; }
  .page-header { margin-bottom: 16px; }
  .key-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; grid-auto-rows: minmax(132px, auto); }
  .key-tile { padding: 16px 10px; }
  .room-number { font-size: 1.65rem; }
  .key-holder { font-size: .85rem; }
  .key-surname, .key-checkout-time { font-size: 1rem; }
  .key-given { font-size: .8rem; }
  dialog { padding: 20px; }
  .page-footer { padding: 6px 16px; gap: 0 12px; }
}
@media (max-width: 340px) { .key-grid { grid-template-columns: minmax(0, 1fr); } }
/* Administration shares the kiosk typography and dialog controls. */
.settings-button { margin-left: auto; margin-bottom: 14px; display: inline-flex; align-items: center; justify-content: center; width: 48px; padding: 10px; border: 0; background: transparent; color: #647084; }
.settings-button:hover { background: #e9edf2; }
.primary-button { background: #30445e; color: white; border-color: #30445e; font-weight: 600; }
#admin-login-form > label, #reference-form label:not(.checkbox-label) { display: block; font-size: .9rem; margin: 12px 0 6px; }
#admin-pin, #reference-form input:not([type="checkbox"]) { display: block; width: 100%; border: 1px solid #cbd3dd; border-radius: 10px; padding: 10px 12px; }
#admin-pin { font-size: 1.4rem; letter-spacing: .3em; }
#admin-login-error:empty, #admin-error:empty, #reference-error:empty, #admin-message:empty { display: none; }
.admin-header { gap: 14px; flex-wrap: wrap; }
.admin-header h1 { margin-right: auto; }
.admin-header a, .admin-header button { margin-bottom: 14px; }
.admin-header a { color: inherit; min-height: 48px; display: inline-flex; align-items: center; }
.admin-note { font-size: .85rem; color: #647084; line-height: 1.5; }
.admin-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.admin-section { min-width: 0; }
.admin-section h2 { font-size: 1.1rem; }
.admin-toolbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.admin-toolbar input[type="search"] { margin: 0; }
.checkbox-label { display: flex; gap: 10px; align-items: center; min-height: 48px; font-size: .9rem; }
.checkbox-label input { width: 20px; height: 20px; min-height: 20px; }
.admin-record { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 4px 0; border-bottom: 1px solid #e1e6ec; overflow-wrap: anywhere; }
.admin-record strong { flex: 1; min-width: 0; font-size: .95rem; font-weight: 550; }
.admin-record.is-inactive strong { color: #7c8795; font-weight: 400; }
.admin-record > button { flex-shrink: 0; min-height: 44px; padding: 8px 10px; margin: 0; font-size: .8rem; background: transparent; border-color: transparent; color: #4e627c; }
.admin-active-control { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; width: 44px; height: 48px; cursor: pointer; }
.admin-active-control input { appearance: none; width: 24px; height: 24px; min-height: 24px; padding: 0; margin: 0; border: 2px solid #a1aab5; border-radius: 6px; background: #f0f2f5; cursor: pointer; }
.admin-active-control input:checked { background: #39805b; border-color: #39805b; }
.admin-active-control input:checked::after { content: ''; display: block; width: 6px; height: 12px; margin: 1px 6px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.admin-active-control input:focus-visible { outline: 3px solid #6587ae; outline-offset: 3px; }
.admin-active-control input:disabled { opacity: .55; cursor: wait; }
.delete-action { display: block; margin: 18px 0 0; padding: 6px 2px; min-height: 44px; border: 0; background: transparent; color: #9e3d3d; font-size: .85rem; }
.delete-action[hidden] { display: none; }
.danger-button { background: #963e3e; color: white; border-color: #963e3e; }
.reference-import-dialog { width: min(740px, calc(100vw - 32px)); }
.reference-import-dialog > label { font-size: .9rem; }
.reference-import-text { display: block; width: 100%; resize: vertical; min-height: 150px; margin: 10px 0; padding: 12px; border: 1px solid #cbd3dd; border-radius: 10px; font: inherit; font-size: .9rem; }
.import-summary { font-weight: 550; font-size: .9rem; line-height: 1.6; }
.import-rows { max-height: 270px; overflow: auto; border: 1px solid #e1e6ec; border-radius: 8px; }
.import-rows table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; font-size: .8rem; }
.import-rows th, .import-rows td { padding: 9px; vertical-align: top; overflow-wrap: anywhere; }
.import-rows th { background: #f0f3f6; font-weight: 500; }
.import-rows th:first-child { width: 64px; }
.import-rows tr + tr { border-top: 1px solid #edf0f4; }
.reference-import-error:empty, #reference-delete-error:empty { display: none; }
@media (max-width: 850px) { .admin-sections { grid-template-columns: minmax(0, 1fr); } }
/* Kiosk: the key grid is the primary content, with quiet supporting controls. */
.dashboard-tools { display: flex; justify-content: flex-end; margin: -8px 0 8px; }
.dashboard-tools .settings-button { margin-bottom: 0; }
#dashboard-message.success-notification { color: #315341; background: #f4faf5; border-color: #d8e7dc; }
.loan-dialog-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.loan-dialog-header h2 { flex: 1; margin: 0; font-size: 1rem; color: #637083; font-weight: 550; }
.dialog-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 48px; padding: 4px; border: 0; background: transparent; color: #637083; font-size: 1.6rem; line-height: 1; }
.confirmation-employee { font-weight: 750; color: #233d5e; }
.confirmation-room { display: inline; font-weight: 750; color: #233d5e; border-radius: 5px; padding: 1px 5px; background: #e4ebf5; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.borrower-name { font-weight: 650; color: #3e5067; }
.employee-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.employee-label small { color: #687587; font-size: .8rem; }
@media (max-width: 560px) { #confirmation { font-size: 1.15rem; padding: 14px; } }
/* Compact kiosk navigation and the read-only loan-cycle logbook. */
.kiosk-tabs { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 12px; background: #eceff3; }
.kiosk-tabs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 18px; border-radius: 9px; color: #5a677a; font-size: .9rem; font-weight: 550; text-decoration: none; }
.kiosk-tabs a[aria-current="page"] { color: #263b55; background: #fff; box-shadow: 0 1px 3px rgb(30 40 60 / .06); }
.dashboard-tools { justify-content: flex-start; align-items: center; gap: 12px; margin-bottom: 16px; }
.journal-filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin: 18px 0 8px; }
.journal-filters label { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: .8rem; color: #59687b; }
.journal-filters input { width: 100%; margin: 0; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid #cbd3dd; border-radius: 10px; color: #24344a; background: #fafbfd; font: inherit; }
.journal-search { flex: 1 1 240px; }
.journal-filters label:not(.journal-search) { flex: 0 1 160px; }
.journal-reset { display: inline-flex; align-items: center; min-height: 48px; color: #647084; font-size: .85rem; text-underline-offset: 3px; }
.journal-timezone { margin: 12px 0 22px; color: #6b7687; font-size: .75rem; }
.journal-group { margin: 0 0 28px; }
.journal-group h2 { margin: 0 0 10px; color: #3b4c63; font-size: 1rem; font-weight: 600; }
.journal-table { width: 100%; table-layout: fixed; border-collapse: collapse; text-align: left; background: #fff; }
.journal-table th, .journal-table td { padding: 14px 16px; vertical-align: top; overflow-wrap: anywhere; }
.journal-table thead th { font-weight: 500; font-size: .8rem; color: #6a7789; background: #f0f3f6; }
.journal-table thead th:first-child { width: 20%; }
.journal-table tbody tr + tr { border-top: 1px solid #edf0f4; }
.journal-room { color: #283b52; font-size: 1.1rem; font-weight: 650; }
.journal-person { display: block; font-size: .9rem; line-height: 1.45; }
.journal-table time { display: block; font-size: .78rem; color: #6a7789; margin-top: 5px; }
.journal-pending { color: #8a672f; font-size: .85rem; line-height: 1.5; }
.journal-mobile-label { display: none; }
.journal-empty { margin-top: 28px; color: #657287; font-size: .9rem; }
.journal-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 24px 0 12px; font-size: .85rem; }
.journal-pagination a { display: inline-flex; align-items: center; min-height: 48px; padding: 8px; color: #354f73; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 560px) {
  .kiosk-tabs a { padding: 8px 14px; }
  .journal-filters { gap: 10px; }
  .journal-search { flex-basis: 100%; }
  .journal-filters label:not(.journal-search) { flex: 1 1 130px; }
  .journal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .journal-table, .journal-table tbody, .journal-table tr, .journal-table th, .journal-table td { display: block; width: 100%; }
  .journal-table tbody tr { padding: 8px 0; }
  .journal-table th, .journal-table td { padding: 7px 14px; }
  .journal-mobile-label { display: block; color: #738094; font-size: .7rem; margin-bottom: 4px; }
}
:root { --device-note-color: #667085; }
.registration-page { max-width: 30rem; margin: 3rem auto; padding: 1rem; }
.registration-page input, #access-pin-form input { display: block; width: 100%; max-width: 26rem; margin: .4rem 0 1rem; }
.device-record { display: flex; justify-content: space-between; gap: 1rem; }
.device-record small { display: block; color: var(--device-note-color); margin-top: .2rem; }
.device-record strong { overflow-wrap: anywhere; }