@import url('/dashboard.css');

.hidden { display: none !important; }
.login-card { position: relative; max-width: 420px; margin: 12vh auto; padding: 36px; background: white; border: 1px solid var(--line); box-shadow: 10px 10px 0 var(--mint); }
.login-card h1 { margin-bottom: 28px; }
.login-card label { display: grid; gap: 7px; margin: 18px 0; font: var(--font-small) var(--font-family); }
button { border: 1px solid var(--line); padding: 12px; font: inherit; background: var(--ink); color: white; cursor: pointer; }
button.secondary { background: white; color: var(--ink); }
.error { color: #a33; min-height: 20px; }
.header-tools { display: grid; justify-items: end; gap: 16px; }
.heading, .account, .row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.account { color: var(--muted); font: var(--font-small) var(--font-family); }
nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 0; }
nav button { padding: 9px 12px; background: transparent; color: var(--ink); font: var(--font-small) var(--font-family); }
nav button.active { background: var(--ink); color: white; }
.panel { padding: 32px 0; }
.dashboard-panel { padding: 0; }
.container-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.card, .row, .diagnostic { padding: 20px; background: rgba(255,255,255,.75); border: 1px solid var(--line); }
.list { display: grid; gap: 8px; margin: 20px 0; }
.row small { display: block; color: var(--muted); font: var(--font-small) var(--font-family); margin-top: 6px; overflow-wrap: anywhere; }
.inline-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.inline-form label { display: grid; gap: 6px; }
.diagnostic { margin-top: 20px; white-space: pre-wrap; overflow: auto; max-height: 480px; font: 10px/1.5 'DM Mono', monospace; }
.subsection { margin-top: 38px; }
.config-forms { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.config-forms form { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); background: white; }
.config-forms h4 { margin: 0 0 8px; }
.config-forms input, .inline-form input { min-width: 0; }
select { min-width: 0; border: 1px solid var(--line); padding: 12px; background: white; color: var(--ink); font: inherit; }
.logging-active { color: var(--orange); }
.history-export { margin: 24px 0; padding: 20px; border: 1px solid var(--line); }
.history-export p { margin: 12px 0; }
.config-edit { display: grid; gap: 10px; padding: 16px; background: white; }
.config-edit label { display: grid; gap: 6px; }
.config-edit fieldset { display: grid; gap: 8px; border: 1px solid var(--line); }
.config-edit .access-option { display: flex; align-items: center; gap: 8px; }
.config-edit .access-option input { width: auto; }
.container-beacons { margin: 16px 0 0 20px; padding: 4px 0 4px 16px; border-left: 2px solid var(--line); }
.container-beacons h4 { margin: 8px 0; }
.config-beacon { margin: 8px 0; }
button:disabled { opacity: .5; cursor: wait; }
.report-row { display: block; overflow-x: auto; font: 10px/1.5 'DM Mono', monospace; }
.report-line { display: block; white-space: nowrap; font: inherit; }
.door-value { display: inline-block; width: 6ch; white-space: pre; font-family: var(--font-family); }
.report-field { display: inline-block; }
.report-time { min-width: 26ch; }
.report-mac { min-width: 24ch; }
.report-battery { min-width: 10ch; }
.report-rssi { min-width: 13ch; }
.rssi-value { display: inline-block; min-width: 4ch; text-align: right; }
.report-temperature { min-width: 13ch; }
.report-humidity { min-width: 8ch; }
.report-gateway { min-width: 9ch; }
.report-position { min-width: 19ch; }
.beacon-report-status { padding: 5px 8px; font: var(--font-small) var(--font-family); white-space: nowrap; }
.beacon-online { background: var(--mint); }
.beacon-delayed { background: #fff4dd; color: #805000; }
.beacon-offline, .beacon-never { background: #ffe3e3; color: #8b2424; font-weight: bold; }
.connectivity-section { margin: 18px 0; padding: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.75); }
.connectivity-section h3 { margin: 0 0 12px; }
.connectivity-section > .list { margin-bottom: 0; }
.connectivity-section .report-line { white-space: normal; overflow-wrap: anywhere; }
.connectivity-section .report-row { overflow: visible; }
#beacon-status-list { display: block; }
#beacon-status-section h3 { font: 10px/1.5 'DM Mono', monospace; }
#beacon-status-summary,
#beacon-status-note,
#beacon-status-list { font: 10px/1.5 'DM Mono', monospace; }
#beacon-status-list .beacon-status-row { display: grid; grid-template-columns: minmax(0,1fr) 16ch; align-items: center; gap: 12px; padding: 3px 8px; border: 0; border-bottom: 1px solid var(--line); font: inherit; }
.beacon-status-data { min-width: 0; overflow-x: auto; }
.beacon-status-fields { display: grid; grid-template-columns: 8ch 27ch 37ch 15ch 41ch minmax(28ch,1fr); width: max-content; min-width: 100%; white-space: nowrap; }
#beacon-status-list .beacon-report-status { justify-self: end; text-align: center; width: 16ch; padding: 2px 5px; font: inherit; }
.range-controls input[type="datetime-local"] { width: 290px; max-width: calc(100vw - 110px); min-height: 48px; padding: 12px 14px; font-size: var(--font-body); }
#beacon-reports-section .range-controls { font: 10px/1.5 'DM Mono', monospace; }
#beacon-reports-section .range-controls input,
#beacon-reports-section .range-controls select,
#beacon-reports-section .range-controls button { font: inherit; }
.connectivity-log-window { max-height: 68vh; overflow: auto; overscroll-behavior: contain; padding: 0 14px 14px; border: 1px solid var(--line); background: rgba(255,255,255,.45); }
.connectivity-log-window .report-line { white-space: nowrap; overflow-wrap: normal; }
.connectivity-log-window .subsection { margin-top: 16px; }
.connectivity-log-window .list { gap: 4px; margin: 8px 0; }
.connectivity-log-window .row { padding: 9px 12px; }
.connectivity-log-window .row strong { font-size: inherit; }
.connectivity-log-window .row small { font: 10px/1.45 'DM Mono', monospace; }
.connectivity-log-window .report-row,
.connectivity-log-window .report-line { font: 10px/1.5 'DM Mono', monospace; }
.connectivity-log-window h3 { margin: 16px 0 8px; font-size: var(--font-body); }
.connectivity-log-window details { margin: 14px 0; }
.connectivity-log-window .compact-log-list { display: block; width: max-content; min-width: 100%; }
.connectivity-log-window .compact-log-list .row { padding: 3px 8px; border: 0; border-bottom: 1px solid var(--line); overflow: visible; }
.user-card { padding: 18px; border: 2px solid var(--line); background: white; box-shadow: 4px 4px 0 var(--mint); margin: 8px 0 18px; }
.user-card > .row { border: 0; padding: 0 0 14px; }
.user-card > details { border-top: 1px solid var(--line); padding: 12px 0; }
.user-card > details > summary { cursor: pointer; font-weight: 500; }
.storage-notice { padding: 16px; margin: 16px 0; border: 2px solid var(--orange); background: #fff4dd; overflow-wrap: anywhere; }
.system-metrics { margin: 20px 0 30px; padding: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.75); }
.system-metrics h3 { margin-top: 0; }
.backup-row { flex-wrap: wrap; }
.backup-actions { display: grid; gap: 12px; }
.backup-download { display: inline-flex; align-items: center; gap: 8px; padding: 12px; background: var(--ink); color: white; text-decoration: none; }
.backup-actions a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.backup-guide { max-width: 960px; margin: 32px auto; padding: 0 24px; line-height: 1.65; }
.backup-guide pre { padding: 16px; overflow-x: auto; background: white; border: 1px solid var(--line); font-size: var(--font-small); }
.backup-guide table { width: 100%; border-collapse: collapse; }
.backup-guide th, .backup-guide td { text-align: left; padding: 8px; border: 1px solid var(--line); }
.danger-button { background: #8b2424; color: white; }
.history-summary { margin-top: 0; }
.history-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; }
.history-metrics > div { padding: 14px; border: 1px solid var(--line); background: white; }
.history-metrics dt { color: var(--muted); font-size: var(--font-small); }
.history-metrics dd { margin: 8px 0 0; font-size: var(--font-large); font-weight: 600; }
.capacity-note, .retention-warning { color: var(--muted); font-size: var(--font-small); line-height: 1.6; }
.retention-actions { max-width: 560px; margin-top: 24px; }
.retention-action { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); background: white; }
.retention-action h4, .retention-action p { margin: 0; }
.retention-action p { color: var(--muted); font-size: var(--font-body); line-height: 1.5; }
.retention-action input { width: 100%; min-width: 0; }
.retention-action button { margin-top: 6px; }
.admin-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0; }
@media (max-width: 760px) {
    .heading { align-items: flex-start; flex-direction: column; }
    .header-tools { justify-items: start; gap: 0; padding-bottom: 18px; }
    .inline-form, .config-forms, .retention-actions { grid-template-columns: 1fr; }
    .row { align-items: flex-start; flex-wrap: wrap; }
}
@media (max-width: 480px) {
    .login-card { margin: 8vh 18px; padding: 24px; }
    .range-controls label { flex-wrap: wrap; }
}