@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Barlow:wght@300;400;500;600&family=Barlow+Condensed:wght@400;600;700;800&display=swap";:root{--bg: #f0f4f8;--surface: #ffffff;--surface2: #f8fafc;--border: #dde3ec;--primary: #668aba;--accent: #44a5dc;--accent2: #7eadcf;--green: #16a34a;--red: #dc2626;--amber: #d97706;--text: #1a2540;--muted: #64748b;--mono: "Barlow", sans-serif;--display: "Barlow Condensed", sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--mono);font-size:14px;line-height:1.6;min-height:100vh}.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(68,165,220,.1) 0%,transparent 70%),var(--bg)}.login-card{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--primary);padding:52px 44px;text-align:center;width:380px;box-shadow:0 4px 24px #1a254014;border-radius:4px}.login-logo{width:180px;height:auto;margin:0 auto 28px;display:block}.login-sub{color:var(--muted);font-size:12px;letter-spacing:2px;text-transform:uppercase;margin-bottom:36px}.btn-login{display:flex;align-items:center;gap:10px;justify-content:center;width:100%;background:var(--primary);color:#fff;border:none;padding:14px 24px;font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:background .15s,transform .1s;border-radius:2px}.btn-login:hover{background:var(--accent);transform:translateY(-1px)}.btn-login:active{transform:translateY(0)}.login-note{margin-top:16px;color:var(--muted);font-size:11px;letter-spacing:.5px}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:56px;background:var(--primary);position:sticky;top:0;z-index:10;box-shadow:0 2px 8px #1a254026}.header-left{display:flex;align-items:center;gap:12px}.header-logo{height:28px;width:auto;display:block;filter:brightness(0) invert(1)}.header-right{display:flex;align-items:center;gap:16px}.user-name{color:#fffc;font-size:12px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn-logout{background:none;border:1px solid rgba(255,255,255,.4);color:#ffffffe6;padding:6px 14px;font-family:var(--mono);font-size:12px;cursor:pointer;border-radius:2px;transition:border-color .15s,background .15s}.btn-logout:hover{border-color:#fff;background:#ffffff1a;color:#fff}.app-main{flex:1;max-width:760px;margin:0 auto;width:100%;padding:24px 16px}.tab-bar{display:flex;border-bottom:2px solid var(--border);margin-bottom:28px}.tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);padding:12px 20px;font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:color .15s,border-color .15s;margin-bottom:-2px}.tab:hover{color:var(--text)}.tab.active{color:var(--primary);border-bottom-color:var(--primary)}.bay-key{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:10px 16px;margin-bottom:24px;font-size:12px}.bay-key-label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-right:4px}.bay-key-item{display:flex;align-items:center;gap:7px;color:var(--text)}.bay-key-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.bay-key-dot.a{background:var(--primary)}.bay-key-dot.b{background:var(--accent)}.section-date{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text);margin-bottom:20px}.bays-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media (max-width: 500px){.bays-grid{grid-template-columns:1fr}}.bay-card{background:var(--surface);border:1px solid var(--border);padding:20px;border-radius:4px;box-shadow:0 1px 4px #1a25400f;transition:box-shadow .2s}.bay-card:hover{box-shadow:0 3px 10px #1a25401a}.bay-card.available{border-top:3px solid var(--green)}.bay-card.occupied{border-top:3px solid var(--red)}.bay-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.bay-name{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--text)}.bay-status-badge{font-size:10px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;padding:3px 9px;border-radius:20px}.bay-status-badge.green{background:#dcfce7;color:var(--green)}.bay-status-badge.red{background:#fee2e2;color:var(--red)}.bay-empty{color:var(--muted);font-size:12px;font-style:italic;letter-spacing:.5px;padding:8px 0}.booking-entry{background:#f8fafc;border:1px solid var(--border);border-left:3px solid var(--accent2);padding:12px;margin-bottom:10px;border-radius:2px}.booking-entry.visitor{border-left-color:var(--amber)}.booking-entry.staff{border-left-color:var(--primary)}.booking-top{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}.type-chip,.slot-chip{font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:2px 8px;border-radius:20px}.type-chip.visitor{background:#fef3c7;color:var(--amber)}.type-chip.staff{background:#dbeafe;color:var(--primary)}.slot-chip{background:#f1f5f9;color:var(--muted);border:1px solid var(--border);border-radius:20px}.booking-name{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:.5px;margin-bottom:10px;color:var(--text)}.btn-cancel{background:none;border:1px solid rgba(220,38,38,.3);color:var(--red);padding:5px 12px;font-family:var(--mono);font-size:11px;cursor:pointer;border-radius:2px;transition:background .15s;width:100%}.btn-cancel:hover:not(:disabled){background:#fee2e2}.btn-cancel:disabled{opacity:.4;cursor:not-allowed}.booking-panel{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--primary);padding:28px 24px;border-radius:4px;box-shadow:0 1px 4px #1a25400f}.panel-title{font-family:var(--display);font-size:28px;font-weight:800;letter-spacing:2px;text-transform:uppercase;margin-bottom:28px;color:var(--primary)}.field-group{margin-bottom:22px}.field-label{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.toggle-group{display:flex;gap:8px;flex-wrap:wrap}.toggle-btn{background:var(--surface2);border:1px solid var(--border);color:var(--muted);padding:10px 18px;font-family:var(--mono);font-size:13px;cursor:pointer;transition:all .15s;border-radius:2px;white-space:nowrap}.toggle-btn:hover:not(.disabled){border-color:var(--accent);color:var(--text)}.toggle-btn.active{background:#dbeafe;border-color:var(--primary);color:var(--primary)}.toggle-btn.disabled{opacity:.35;cursor:not-allowed}.lock-note{font-size:11px;margin-left:4px}.date-input,.text-input{background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:10px 14px;font-family:var(--mono);font-size:13px;width:100%;outline:none;border-radius:2px;transition:border-color .15s,box-shadow .15s}.date-input:focus,.text-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #668aba1f}.date-input{color-scheme:light}.static-field{background:var(--surface2);border:1px solid var(--border);color:var(--muted);padding:10px 14px;font-size:13px;border-radius:2px}.alert{padding:12px 16px;border-radius:2px;font-size:13px;margin-bottom:18px;border-left:3px solid}.alert.error{background:#fee2e2;border-color:var(--red);color:#991b1b}.alert.success{background:#dcfce7;border-color:var(--green);color:#166534}.btn-submit{width:100%;background:var(--primary);color:#fff;border:none;padding:15px;font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:background .15s,transform .1s;margin-bottom:16px;border-radius:2px}.btn-submit:hover:not(:disabled){background:var(--accent);transform:translateY(-1px)}.btn-submit:disabled{opacity:.4;cursor:not-allowed;transform:none}.hint-text{color:var(--muted);font-size:12px;text-align:center;line-height:1.8}.hint-text strong{color:var(--amber)}.loading-dots{display:flex;gap:8px;padding:40px;justify-content:center}.loading-dots span{width:8px;height:8px;background:var(--primary);border-radius:50%;animation:pulse 1.2s ease-in-out infinite}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}@keyframes pulse{0%,80%,to{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}.toggle-btn{border-radius:20px}.btn-submit,.btn-login{border-radius:12px}.btn-cancel,.btn-logout{border-radius:20px}.tab{border-radius:8px 8px 0 0}.field-hint{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.5}.history-panel{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--primary);padding:28px 24px;border-radius:4px;box-shadow:0 1px 4px #1a25400f}.filter-bar{display:flex;gap:8px;margin-bottom:24px}.filter-btn{background:var(--surface2);border:1px solid var(--border);color:var(--muted);padding:8px 20px;font-family:var(--mono);font-size:13px;cursor:pointer;border-radius:20px;transition:all .15s}.filter-btn:hover{border-color:var(--accent);color:var(--text)}.filter-btn.active{background:#dbeafe;border-color:var(--primary);color:var(--primary);font-weight:500}.history-empty{color:var(--muted);font-size:13px;text-align:center;padding:40px 0;font-style:italic}.history-list{display:flex;flex-direction:column;gap:10px}.history-entry{background:var(--surface2);border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:4px;padding:14px 16px;transition:box-shadow .15s}.history-entry.past{border-left-color:var(--border);opacity:.7}.history-entry:hover{box-shadow:0 2px 8px #1a254014}.history-date{font-family:var(--display);font-size:16px;font-weight:700;color:var(--text);margin-bottom:8px;letter-spacing:.5px}.history-detail{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}.history-bay{font-family:var(--display);font-size:15px;font-weight:700;color:var(--primary);letter-spacing:1px;text-transform:uppercase}@media (max-width: 600px){.app-header{padding:0 14px}.header-logo{height:22px}.user-name{display:none}.app-main{padding:16px 12px}.tab{padding:10px 12px;font-size:13px}.tab-bar{gap:2px}.bay-key{gap:10px;font-size:11px;padding:8px 12px}.panel-title{font-size:22px}.booking-panel,.history-panel{padding:20px 16px}.toggle-btn{padding:10px 14px;font-size:12px}.btn-submit{font-size:16px;padding:14px}.bays-grid{grid-template-columns:1fr}.section-date{font-size:20px}.bay-name{font-size:18px}.history-detail{gap:6px}.login-card{width:94vw;padding:36px 24px}.login-logo{width:140px}}.avail-grid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.avail-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:52px;border-radius:10px;border:2px solid transparent;cursor:pointer;transition:all .15s;font-family:var(--mono);gap:2px}.avail-day{font-size:9px;text-transform:uppercase;letter-spacing:.5px;opacity:.7}.avail-date{font-family:var(--display);font-size:16px;font-weight:700;line-height:1}.avail-cell.free{background:#bbf7d0;color:#14532d;border-color:#86efac}.avail-cell.partial{background:#fde68a;color:#78350f;border-color:#f59e0b;border-width:2px}.avail-cell.full{background:#ef4444;color:#fff;border-color:#b91c1c;border-width:2px;opacity:.85}.avail-cell.free.weekend{background:#a7f3d0;border-color:#6ee7b7}.avail-cell.partial.weekend{background:#fcd34d;border-color:#d97706}.avail-cell.full.weekend{background:#dc2626;border-color:#991b1b}.avail-cell.selected{border-color:var(--primary)!important;box-shadow:0 0 0 3px #668aba4d;transform:scale(1.08);opacity:1!important;text-decoration:none!important}.avail-cell:hover:not(.selected){border-color:var(--accent);transform:scale(1.05)}.avail-legend{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px}.legend-item{font-size:11px;display:flex;align-items:center;gap:5px;letter-spacing:.3px}.legend-item:before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;flex-shrink:0}.legend-item.free:before{background:#bbf7d0;border:1.5px solid #86efac}.legend-item.partial:before{background:#fde68a;border:1.5px solid #f59e0b}.legend-item.full:before{background:#ef4444;border:1.5px solid #b91c1c}.legend-item.free{color:#14532d}.legend-item.partial{color:#78350f}.legend-item.full{color:#991b1b}.selected-date{margin-top:6px;color:var(--primary);font-size:12px}.selected-date strong{color:var(--text)}@media (max-width: 600px){.avail-cell{width:44px;height:44px}.avail-date{font-size:14px}}.booking-mobile,.booking-bookedby{font-size:12px;color:var(--muted);margin-bottom:8px;letter-spacing:.3px}.app-footer{text-align:center;padding:12px;font-size:11px;color:var(--muted);letter-spacing:1px;border-top:1px solid var(--border);background:var(--surface)}.tab.tab-admin{color:var(--amber)}.tab.tab-admin.active{color:var(--amber);border-bottom-color:var(--amber)}.bay-card.partial{border-top:3px solid var(--amber)}.bay-status-badge.amber{background:#fef3c7;color:var(--amber)}.admin-panel{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--amber);padding:28px 24px;border-radius:4px;box-shadow:0 1px 4px #1a25400f}.admin-entry{border-left-color:var(--primary)}.admin-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted);margin-bottom:10px}.admin-created{font-style:italic}.audit-list{display:flex;flex-direction:column;gap:10px}.audit-entry{background:var(--surface2);border:1px solid var(--border);border-left:3px solid var(--border);border-radius:4px;padding:12px 16px}.audit-entry.created{border-left-color:var(--green)}.audit-entry.cancelled{border-left-color:var(--red)}.audit-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.audit-badge{font-size:11px;font-weight:600;letter-spacing:.5px;padding:2px 10px;border-radius:20px}.audit-badge.created{background:#dcfce7;color:var(--green)}.audit-badge.cancelled{background:#fee2e2;color:var(--red)}.audit-time{font-size:11px;color:var(--muted)}.audit-detail{font-size:13px;color:var(--text);margin-bottom:4px}.audit-who{font-size:12px;color:var(--muted)}.audit-admin{color:var(--amber);font-style:italic}.admins-list{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.admin-row{display:flex;align-items:center;justify-content:space-between;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 14px}.admin-email{font-size:13px;color:var(--text)}.admin-add{display:flex;flex-direction:column}*,*:before,*:after{box-sizing:border-box}body{margin:0}
