/* Vault pages: shared chrome on top of /coosada/site.css */
.hidden { display: none !important; }
.navbar .nav { flex: 1; }
.navbar .nav button.top { font-family: var(--f-disp); }
.panel { background: #fff; border: 1px solid var(--line); min-width: 0; display: flex; flex-direction: column; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; box-sizing: border-box; padding: 8px 16px; background: var(--navy); color: #fff; font-family: var(--f-disp); font-weight: 700; font-size: 17px; letter-spacing: .12em; text-transform: uppercase; }
.panel-head .hlead { display: flex; align-items: center; gap: 8px; color: #fff; font-size: inherit; }
.panel-body { padding: 16px; }
.stat-label { font-family: var(--f-disp); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.stat-value { font-family: var(--f-disp); font-weight: 700; font-size: 23px; line-height: 1; color: var(--navy); }
.vault-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-top: 16px; padding-bottom: 16px; padding-left: 200px; min-height: 64px; }
@media (max-width:1000px) { .vault-strip { padding-left: 140px; min-height: 52px; } }
@media (max-width:640px)  { .vault-strip { padding-left: 124px; } }
.vault-nav { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vault-nav .btn { font-size: 14px; padding: 9px 14px; }
table.vtable { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; }
table.vtable th { text-align: left; padding: 10px 12px; background: var(--paper); border-bottom: 2px solid var(--navy); font-family: var(--f-disp); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
table.vtable td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.vtable tr:hover td { background: var(--paper); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-family: var(--f-disp); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; }
.pill.evidence { background: var(--red); border-color: var(--red); color: #fff; }
.pill.linked { background: #E6F2E9; border-color: #1E7A3C; color: #134D27; }
.pill.unmatched, .pill.failed { background: #FFF4E0; border-color: var(--gold); color: #7A5A00; }
.pill.pending { background: #EEF1F6; }
.pill.export { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-sm { font-size: 13px !important; padding: 7px 12px !important; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 16px; align-items: end; }
.form-grid .field { margin-bottom: 0; }
.msg { margin-top: 12px; padding: 10px 14px; font-weight: 600; font-size: 14px; display: none; }
.msg.ok { display: block; background: #E6F2E9; border-left: 5px solid #1E7A3C; color: #134D27; }
.msg.err { display: block; background: #FBEAEA; border-left: 5px solid #B3261E; color: #7A1A14; }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.meta-cell { padding: 10px 14px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.meta-cell .stat-value { font-size: 17px; word-break: break-all; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); background: var(--paper); padding: 6px 10px; font-size: 13px; }
.chip button { border: 0; background: none; cursor: pointer; color: var(--red); font-weight: 700; }
.video-wrap { position: relative; background: #0B1A30; }
.video-wrap video { width: 100%; display: block; max-height: 60vh; }
.video-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.video-wrap.draw canvas { pointer-events: auto; cursor: crosshair; }
.gps-readout { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; padding: 10px 16px; background: var(--navy); border-left: 4px solid var(--red); color: #fff; font-size: 14px; font-variant-numeric: tabular-nums; }
.gps-readout a { color: var(--gold); }
.action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 16px; border-top: 1px solid var(--line); background: #fff; }
.action-bar input, .action-bar select { width: auto; padding: 10px 12px; }
.empty { padding: 36px 16px; text-align: center; color: var(--muted); }
.empty .material-symbols-outlined { font-size: 40px; color: var(--navy-3); display: block; margin-bottom: 8px; }
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--navy); }
.stat-strip .cell { padding: 16px 18px; border-right: 1px solid var(--line); }
.stat-strip .cell:last-child { border-right: 0; }
.split { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.split > .grow { flex: 1.7 1 560px; }
.split > .side { flex: 1 1 320px; }
.detail-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.detail-row span { color: var(--muted); }
.detail-row b { color: var(--navy); text-align: right; word-break: break-all; }
fieldset.editor-set { border: 1px solid var(--line); border-top: 4px solid var(--navy); background: #fff; padding: 16px 18px 14px; margin: 0; }
fieldset.editor-set legend { font-family: var(--f-disp); font-weight: 700; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); padding: 0 8px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.inline-form input { width: auto; padding: 8px 10px; }
.hash { font-family: ui-monospace, Consolas, monospace; font-size: 12px; letter-spacing: 0; }
.library-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--navy); padding: 14px 16px; }
.library-filters .field { margin: 0; min-width: 160px; flex: 1 1 160px; }
.library-filters .btn { height: 44px; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.clip { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); text-decoration: none; color: inherit; min-width: 0; }
.clip:hover { border-color: var(--navy); box-shadow: 0 8px 24px rgba(11, 37, 69, .12); }
.clip-still { position: relative; aspect-ratio: 16 / 9; background: var(--navy); overflow: hidden; }
.clip-still img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.clip-still .fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--gold); }
.clip-still .fallback .material-symbols-outlined { font-size: 48px; }
.clip-dur { position: absolute; z-index: 2; right: 8px; bottom: 8px; background: rgba(11, 37, 69, .9); color: #fff; font-family: var(--f-disp); font-weight: 600; font-size: 14px; letter-spacing: .04em; padding: 2px 8px; }
.clip-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.clip-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.clip-body .cam { font-family: var(--f-disp); font-weight: 700; font-size: 22px; letter-spacing: .04em; color: var(--navy); line-height: 1; }
.clip-body .when { font-size: 14px; color: var(--ink-2); }
.clip-body .fname { font-size: 13px; color: var(--muted); word-break: break-all; }

/* Operations console */
body.console { --side: 260px; margin: 0; background: #eef1f5; }
body.console main { margin-left: var(--side); padding-top: 64px; min-height: 100vh; background: #eef1f5; }
body.console .wrap { max-width: none; }
body.console .vault-strip { padding-left: 0; min-height: 0; }
.side-nav { position: fixed; z-index: 30; inset: 0 auto 0 0; width: var(--side, 260px); background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.side-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 16px 10px; text-decoration: none; color: var(--navy); font-family: var(--f-disp); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 20px; text-align: center; line-height: 1.1; }
.side-brand img { width: 168px; height: auto; }
.side-nav nav { display: flex; flex-direction: column; padding: 8px; gap: 2px; }
.side-nav nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); font-weight: 600; }
.side-nav nav a .material-symbols-outlined { font-size: 22px; color: var(--navy); }
.side-nav nav a.active, .side-nav nav a:hover { background: #f3f6fa; }
.side-nav nav a.active { box-shadow: inset 3px 0 0 var(--red); }
.side-user { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.side-user-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.side-user-text b { font-size: 14px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user-text span { font-size: 12px; color: var(--muted); text-transform: capitalize; }
.side-user button { border: 0; background: none; cursor: pointer; color: var(--navy); padding: 4px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-disp); font-weight: 700; font-size: 13px; letter-spacing: .04em; flex: 0 0 auto; }
.topbar { position: fixed; z-index: 20; top: 0; left: var(--side, 260px); right: 0; height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 20px; background: var(--navy); color: #fff; }
.top-search { flex: 1; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); border-radius: 8px; padding: 0 12px; max-width: 640px; }
.top-search .material-symbols-outlined { color: #C9D3E3; }
.top-search input { background: transparent; border: 0; color: #fff; width: 100%; padding: 10px 0; }
.top-search input::placeholder { color: #C9D3E3; }
.top-date { margin-left: auto; font-size: 13px; color: #C9D3E3; white-space: nowrap; }
body.console .topbar .menu-btn { display: none; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3); }
.who { display: inline-flex; align-items: center; gap: 8px; }
.thumb { width: 112px; height: 63px; object-fit: cover; background: var(--navy); display: block; border-radius: 2px; }
.thumb-fallback { width: 112px; height: 63px; background: var(--navy); color: var(--gold); display: flex; align-items: center; justify-content: center; }
.vrow { cursor: pointer; }
.vrow:hover td { background: #f7f9fc; }
.retain { margin: 0; padding: 12px 16px; background: #1d6fbf; color: #fff; font-weight: 650; }
.retain.evidence { background: var(--red); }
.vid-hud { position: absolute; inset: 8px 8px auto 8px; display: flex; justify-content: space-between; gap: 12px; color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.8); pointer-events: none; z-index: 2; }
.vid-hud span { background: rgba(0,0,0,.35); padding: 2px 6px; }
.map-frame { position: relative; height: calc(100vh - 180px); min-height: 420px; background: #d5dde6; border: 1px solid var(--line); }
.map-empty { padding: 28px; color: var(--muted); }
.live-layout { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.live-list { flex: 0 1 320px; background: #fff; border: 1px solid var(--line); max-height: calc(100vh - 180px); overflow: auto; }
.live-list button.cam { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: #fff; padding: 12px 14px; cursor: pointer; }
.live-list button.cam.active { background: #f3f6fa; box-shadow: inset 3px 0 0 var(--red); }
.live-stage { flex: 1 1 480px; min-width: 0; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; }
.live-stage video { width: 100%; background: #0B1A30; max-height: 62vh; display: block; }
.live-idle { min-height: 280px; display: flex; align-items: center; justify-content: center; color: #C9D3E3; background: #0B1A30; font-family: var(--f-disp); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 900px) {
  body.console main { margin-left: 0; }
  .topbar { left: 0; }
  body.console .topbar .menu-btn { display: inline-flex; }
  .side-nav { transform: translateX(-105%); transition: transform .2s ease; }
  body.nav-open .side-nav { transform: none; box-shadow: 8px 0 24px rgba(0,0,0,.2); }
  .top-date { display: none; }
}