.report-table-wrap, .security-table-wrap { scrollbar-color: rgba(56,189,248,.45) rgba(2,6,23,.35); scrollbar-width: thin; } .compact-table th, .compact-table td { padding: .7rem .85rem; white-space: nowrap; } .compact-table thead th { position: sticky; top: 0; z-index: 1; background: #0f172a; }
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root { font-family: 'DM Sans', sans-serif; color-scheme: dark; } .font-display, h1, h2 { font-family: 'Space Grotesk', sans-serif; } body { background-image: radial-gradient(circle at 12% 0%, rgba(19, 78, 74, .28), transparent 35%), linear-gradient(145deg, #020617, #0f172a 55%, #071b28); } .nav-link:hover { color: #a5f3fc; } .eyebrow { color: #67e8f9; font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; } .page-title { margin-top: .5rem; font: 700 clamp(2.2rem, 5vw, 4rem)/1.05 'Space Grotesk', sans-serif; letter-spacing: -.04em; } .section-title { margin-top: .25rem; font: 700 1.5rem 'Space Grotesk', sans-serif; } .panel { border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; background: rgba(15,23,42,.72); padding: 1.5rem; box-shadow: 0 20px 80px rgba(0,0,0,.2); } label { display: block; color: #cbd5e1; font-size: .95rem; font-weight: 600; margin-bottom: .35rem; } input, select, textarea { display: block; width: 100%; border: 1px solid rgba(255,255,255,.16); border-radius: .85rem; background: rgba(2,6,23,.85); padding: .85rem 1.1rem; font-size: 1rem; line-height: 1.5; color: #f8fafc; outline: none; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: box-shadow .2s ease, border-color .2s ease, background .2s ease; } select { cursor: pointer; } input:focus, select:focus, textarea:focus { border-color: #38bdf8; background: rgba(2,6,23,.95); box-shadow: 0 0 0 3px rgba(56,189,248,.25), 0 2px 4px rgba(0,0,0,.3); } .button { border: 0; border-radius: .75rem; padding: .85rem 1.35rem; font-weight: 700; font-size: .95rem; transition: transform .2s, opacity .2s, background .2s; } .button:hover { transform: translateY(-1px); } .button:disabled { cursor: not-allowed; opacity: .45; } .primary { background: #38bdf8; color: #020617; } .secondary { border: 1px solid rgba(56,189,248,.3); background: rgba(56,189,248,.08); color: #e0f2fe; } .notice { border-radius: .85rem; margin-bottom: 1.25rem; padding: .95rem 1.2rem; font-size: .95rem; } .success { border: 1px solid rgba(52,211,153,.25); background: rgba(16,185,129,.1); color: #a7f3d0; } .error { border: 1px solid rgba(251,113,133,.25); background: rgba(244,63,94,.1); color: #fecdd3; } .map-panel { min-height: 450px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; } .person-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgba(255,255,255,.08); padding: 1rem 0; } .avatar { display: grid; height: 3rem; width: 3rem; place-items: center; border-radius: 50%; background: #0e7490; color: #e0f2fe; font-weight: 700; font-size: 1.1rem; } .badge, .status { border-radius: 999px; padding: .35rem .75rem; font-size: .75rem; font-weight: 700; } .badge { background: rgba(56,189,248,.1); color: #38bdf8; } .camera-wrap { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 1rem; background: #020617; border: 1px solid rgba(255,255,255,.12); } video { height: 100%; width: 100%; object-fit: cover; transition: transform .2s ease; } .video-user-mode { transform: scaleX(-1); } .video-environment-mode { transform: scaleX(1); } .camera-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #64748b; } .camera-overlay-badge { position: absolute; top: .75rem; left: .75rem; display: flex; items-center: center; gap: .5rem; padding: .4rem .8rem; border-radius: 9999px; font-size: .75rem; font-weight: 700; backdrop-filter: blur(8px); z-index: 10; } .status-dot { height: .55rem; width: .55rem; border-radius: 50%; background: #34d399; box-shadow: 0 0 12px #34d399; } table { width: 100%; border-collapse: collapse; text-align: left; font-size: .9rem; } th { color: #64748b; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; } th, td { padding: 1rem 1.25rem; } tbody tr { border-top: 1px solid rgba(255,255,255,.07); } .status-success { background: rgba(52,211,153,.12); color: #6ee7b7; } .status-failed { background: rgba(251,113,133,.12); color: #fda4af; } .panel, .camera-card { transition: box-shadow .2s ease; } .panel:hover { box-shadow: 0 24px 90px rgba(0,0,0,.3); } .data-table-row:hover { background: rgba(255,255,255,.03); } .modal-overlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(2,6,23,.82); backdrop-filter: blur(8px); animation: modal-fade .18s ease; } .modal-overlay.flex { display: flex; } .modal-panel { position: relative; z-index: 10000; width: 100%; background: #0f172a; border: 1px solid rgba(255,255,255,.1); border-radius: 1.25rem; box-shadow: 0 30px 90px rgba(0,0,0,.6); padding: 1.5rem; animation: modal-pop .2s ease; } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .modal-title { font: 700 1.1rem 'Space Grotesk', sans-serif; } .modal-close { display: grid; place-items: center; height: 2.2rem; width: 2.2rem; flex-shrink: 0; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #f8fafc; font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background .2s ease, transform .2s ease; } .modal-close:hover { background: rgba(255,255,255,.16); transform: rotate(90deg); } @keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-pop { from { opacity: 0; transform: scale(.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .pagination-button { border-radius: .6rem; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #cbd5e1; padding: .4rem .85rem; font-size: .8rem; font-weight: 600; transition: background .2s ease; } .pagination-button:hover:not(:disabled) { background: rgba(255,255,255,.12); } .pagination-button:disabled { opacity: .4; cursor: not-allowed; } .camera-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; text-align: center; padding: 1rem; }