:root { --ink: #111820; --muted: #5d6975; --paper: #f4f6f8; --panel: #fff; --line: #d9e0e7; --blue: #173a5e; --green: #16835a; --yellow: #e9ad19; --red: #c9413a; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--blue); }
.eyebrow { margin: 0 0 .2rem; color: var(--muted); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.monitor-shell { min-height: 100vh; padding: 1.25rem 18rem 1.25rem 1.5rem; background: #101923; color: #fff; }
.monitor-header { display: flex; align-items: center; justify-content: space-between; min-height: 5rem; }
.monitor-header h1 { margin: 0; font-size: clamp(2rem, 3vw, 3.4rem); font-weight: 800; }
.monitor-header .eyebrow { color: #aab9c7; }
.connection-warning { padding: .8rem 1rem; background: #ffcf33; color: #211b00; border-radius: .65rem; font-weight: 800; }
.access-qr-panel { position: fixed; z-index: 2; inset: 1rem 1rem auto auto; width: 15.5rem; padding: 1rem; border-radius: .85rem; background: #fff; color: var(--ink); text-align: center; box-shadow: 0 1rem 3rem #0005; }
.access-qr-panel h2 { font-size: 1rem; margin: 0 0 .6rem; }
.access-qr-panel img { display: block; width: 100%; aspect-ratio: 1; }
.access-qr-panel img.qr-unavailable { opacity: .22; filter: grayscale(1); }
.access-qr-panel p { margin: .45rem 0 0; font-size: .86rem; }
.status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.status-column { min-height: calc(100vh - 8rem); padding: .8rem; border-radius: .8rem; background: #182532; }
.status-column > header { display: flex; justify-content: space-between; align-items: center; padding: .2rem .2rem .8rem; border-bottom: .3rem solid; }
.status-column-success > header { border-color: var(--green); } .status-column-warning > header { border-color: var(--yellow); } .status-column-danger > header { border-color: var(--red); }
.status-column h2 { margin: 0; font-size: 1.45rem; }
.status-column header span { display: grid; place-items: center; min-width: 2.2rem; height: 2.2rem; border-radius: 99rem; background: #ffffff1c; font-weight: 800; }
.vehicle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-top: .75rem; }
.vehicle-card { position: relative; overflow: hidden; min-width: 0; padding: .65rem .7rem; background: #fff; color: var(--ink); border-left: .45rem solid; border-radius: .55rem; }
.vehicle-card.status-success { border-color: var(--green); } .vehicle-card.status-warning { border-color: var(--yellow); } .vehicle-card.status-danger { border-color: var(--red); }
.vehicle-card.is-stale { outline: .22rem solid #ffcf33; outline-offset: -.22rem; }
.vehicle-card h3 { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; } .vehicle-card p { margin: .14rem 0; }
.vehicle-plate { font-size: 1.15rem; font-weight: 750; letter-spacing: .04em; }
.vehicle-note, .vehicle-card time { color: var(--muted); font-size: .9rem; }
.status-label { font-weight: 800; }
.stale-warning { display: inline-block; float: right; margin-left: .5rem; padding: .25rem .45rem; border-radius: .3rem; background: #ffcf33; color: #211b00; font-size: .75rem; text-transform: uppercase; }
.monitor-empty { display: grid; place-items: center; min-height: 60vh; border: .15rem dashed #ffffff42; border-radius: 1rem; font-size: 2rem; color: #c9d3dc; }
.mobile-shell, .admin-shell, .login-shell { width: min(100% - 2rem, 68rem); margin: 2rem auto; padding: clamp(1rem, 4vw, 2rem); background: var(--panel); border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 .8rem 2rem #1b2c3c12; }
.login-shell { max-width: 30rem; }
.login-shell input { display: block; width: 100%; margin: .4rem 0 1rem; padding: .75rem; border: 1px solid #aeb8c2; border-radius: .45rem; }
.mobile-shell { max-width: 42rem; }
.mobile-shell input[type="search"], .admin-shell input, .admin-shell select { display: block; width: 100%; margin: .4rem 0 1rem; padding: .75rem; border: 1px solid #aeb8c2; border-radius: .45rem; }
.vehicle-list { display: grid; gap: .65rem; margin-top: 1rem; }
.vehicle-list-item { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: .55rem; color: inherit; text-decoration: none; }
.vehicle-list-item:hover { background: #eef4f8; border-color: #8096aa; }
.mobile-shell form { display: grid; gap: .8rem; margin-top: 1.5rem; }
.mobile-shell form .btn { min-height: 4rem; font-size: 1.1rem; font-weight: 800; }
.status-confirmation-modal .modal-content { overflow: hidden; border: 0; border-radius: 1rem; box-shadow: 0 1.25rem 3.5rem #10192338; }
.status-confirmation-modal .modal-header, .status-confirmation-modal .modal-footer { padding: 1rem 1.25rem; }
.status-confirmation-modal .modal-body { padding: 1.25rem; }
.status-confirmation-modal .btn-close { min-width: 2.75rem; min-height: 2.75rem; margin: -.5rem -.5rem -.5rem auto; }
.status-confirmation-modal .modal-footer .btn { min-width: 8.5rem; min-height: 3rem; }
.status-confirmation-vehicle { display: grid; gap: .1rem; padding: 1rem; border-radius: .75rem; background: var(--paper); }
.status-confirmation-vehicle strong { font-size: 1.2rem; }
.admin-shell nav { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.25rem; }
.admin-shell table { width: 100%; border-collapse: collapse; }
.admin-shell th, .admin-shell td { padding: .7rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.admin-shell form { margin-bottom: .75rem; }
.status-empty { color: #aab9c7; }
@media (max-width: 1500px) and (min-width: 901px) { .vehicle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .monitor-shell { padding-right: 1rem; } .access-qr-panel { position: static; width: 100%; margin: 1rem 0; } .access-qr-panel img { width: 12rem; margin: auto; } .status-grid { grid-template-columns: 1fr; } .status-column { min-height: 0; } .vehicle-grid { grid-template-columns: 1fr; } .vehicle-list-item { flex-direction: column; } }