/* DRIFT_BETA_DASHBOARD_20260926_1 */
.monitor-page { font-family:Arial,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; }
.monitor-page * { box-sizing:border-box; }
.monitor-page [hidden] { display:none!important; }
.monitor-page a { color:inherit; }
.monitor-page button,.monitor-page input,.monitor-page select { font:inherit; }
.monitor-page :focus-visible { outline:2px solid #36dcf2; outline-offset:4px; }
.monitor-top { min-height:76px; height:auto; gap:22px; padding-top:14px; padding-bottom:14px; }
.monitor-top .brand { text-decoration:none; white-space:nowrap; letter-spacing:-.5px; }
.brand small { color:#42d5ed; font-size:11px; letter-spacing:1.5px; vertical-align:middle; margin-left:7px; }
.account { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px 14px; min-width:0; }
.account-label { color:#98afc5; font-size:12px; }
#accountName { max-width:260px; font-size:14px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
#accountError { flex-basis:100%; text-align:right; color:#ffb6ad; font-size:12px; }
#accountError:empty { display:none; }
.outline-button { background:#0d2e4a; border:1px solid #2b6685; color:#e5f6ff; padding:10px 15px; border-radius:8px; cursor:pointer; white-space:nowrap; font-size:13px!important; min-height:40px; }
.outline-button:hover { border-color:#35cce9; background:#124260; }
.outline-button:disabled { opacity:.6; cursor:wait; }
.monitor-page .tabs { min-height:62px; padding:10px 20px; gap:12px; }
.monitor-page .tabs a { color:#16c5e8; min-width:142px; text-align:center; font-size:14px; text-decoration:none; }
.monitor-page .tabs .active { color:#fff; box-shadow:0 4px 20px #00b9e020; }
.monitor-layout { display:grid; grid-template-columns:240px minmax(0,1fr); min-height:calc(100vh - 138px); }
.monitor-sidebar { background:#092341; border-right:1px solid #174564; padding:32px 20px 24px; display:flex; flex-direction:column; }
.section-label { font-size:10px; letter-spacing:2px; color:#50bdd5; font-weight:700; }
.monitor-sidebar h2 { font-size:18px; margin:12px 0 24px; }
.scope-list { display:grid; gap:8px; }
.scope { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; padding:13px 14px; border:1px solid transparent; border-radius:9px; background:transparent; color:#a7c2d8; font-size:13px!important; text-align:left; cursor:pointer; }
.scope span { font-variant-numeric:tabular-nums; padding:3px 7px; border-radius:5px; font-size:12px; background:#12334e; }
.scope:hover { background:#103556; color:#fff; }
.scope.active { background:#0c4166; border-color:#167290; color:#7ae7fa; }
.scope.active span { background:#095371; color:#a1f1ff; }
.side-divider { height:1px; background:#1a405d; margin:28px 0; }
.field-label { font-size:12px; color:#a8c1d6; margin-bottom:10px; }
#taskFilter { width:100%; min-height:43px; padding:10px; border:1px solid #2c5270; border-radius:8px; background:#12314e; color:#dfedfa; font-size:12px; }
.side-description,.side-bottom p { font-size:12px; color:#8fa9c1; line-height:1.75; }
.side-bottom { padding-top:60px; margin-top:auto; }
.side-link { display:flex; justify-content:space-between; gap:8px; padding:12px 0; font-size:12px; color:#bcd4e7!important; text-decoration:none; }
.side-link:hover { color:#49d8f1!important; }
.monitor-content { max-width:1640px; width:100%; margin:0 auto; padding:32px 36px 24px; align-self:start; }
.monitor-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:25px; }
.eyebrow { color:#60bed4; font-size:10px; letter-spacing:1.8px; margin:0 0 10px; font-weight:700; }
.monitor-heading h1 { font-size:28px; letter-spacing:-1px; margin:0 0 10px; }
.subheading { font-size:13px; color:#a6bdd2; margin:0; line-height:1.6; }
.refresh-area { display:flex; align-items:center; gap:14px; }
#updatedAt { font-size:12px; color:#94aec6; white-space:nowrap; }
.status-notice { margin:0 0 20px; border:1px solid #477d91; background:#0c334c; padding:12px 16px; color:#c8e5f2; border-radius:9px; font-size:13px; line-height:1.6; }
.status-notice:empty { display:none; }
.status-notice.error { border-color:#875a44; background:#3a2b29; color:#ffd1b6; }
.summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:30px; }
.summary-item { background:linear-gradient(115deg,#103354,#0c2947); border:1px solid #1e5073; border-radius:12px; padding:18px 22px; }
.summary-item>span { color:#bad0e1; font-size:13px; display:flex; align-items:center; gap:7px; }
.summary-item>div { margin:12px 0 8px; display:flex; align-items:baseline; gap:7px; }
.summary-item strong { font-size:32px; font-weight:700; font-variant-numeric:tabular-nums; }
.summary-item small { color:#9db6ca; font-size:12px; }
.summary-item p { color:#8eabc3; font-size:11px; margin:0; line-height:1.5; }
.live-summary strong { color:#56e2c1; }
.status-dot { width:6px; height:6px; border-radius:50%; display:inline-block; background:currentColor; }
.live-summary .status-dot { color:#56e2c1; }
.grid-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; }
.grid-toolbar>div { display:flex; align-items:center; gap:12px; }
.grid-toolbar h2 { font-size:17px; margin:0; }
#visibleCount { color:#8eb4cd; font-size:12px; }
.camera-search input { background:#0a2845; color:#eef9ff; border:1px solid #255471; border-radius:8px; padding:10px 13px; min-height:40px; width:228px; font-size:12px; }
.camera-search input::placeholder { color:#8cacbf; }
.camera-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.camera-card { overflow:hidden; background:#0b2743; border:1px solid #245374; border-radius:13px; box-shadow:0 8px 24px #00142a28; min-width:0; }
.card-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:16px 18px; }
.card-heading h3 { font-size:15px; margin:0; letter-spacing:.4px; }
.live-pill { font-size:10px; font-weight:700; letter-spacing:.8px; border-radius:5px; padding:5px 8px; background:#244059; color:#abc0d3; white-space:nowrap; }
.live-pill.live { color:#66ecd2; background:#0c4c49; }
.live-pill.unknown { color:#f8cb80; background:#4c3d28; }
.camera-stage { position:relative; aspect-ratio:16/9; background:#061322; overflow:hidden; }
.camera-stage video { display:block; width:100%; height:100%; object-fit:contain; }
.video-message { position:absolute; inset:0; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:10px; padding:20px; color:#a2b7c8; background:#061322f2; text-align:center; }
.video-message svg { width:30px; height:30px; margin-bottom:2px; color:#59758c; }
.video-message strong { font-size:13px; font-weight:500; }
.video-message small { font-size:11px; color:#718fa6; line-height:1.5; }
.video-message button { margin-top:4px; }
.card-content { padding:16px 18px; }
.card-assignment { display:flex; align-items:baseline; gap:8px; min-width:0; margin-bottom:8px; }
.card-assignment .label { color:#829fb8; font-size:11px; flex-shrink:0; }
.card-assignment strong { color:#d4e7f4; font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-task { font-size:11px; color:#8eabc4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-height:15px; margin:0; }
.card-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid #1b405e; margin-top:16px; padding-top:14px; }
.camera-connection { font-size:11px; color:#94aabd; display:flex; align-items:center; gap:6px; }
.camera-connection.connected { color:#59d7bb; }
.open-camera { display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; background:#0b749f; border:1px solid #168db1; color:#e8fcff!important; font-size:12px; border-radius:7px; padding:10px 12px; white-space:nowrap; }
.open-camera:hover { background:#098fb7; border-color:#40cee4; }
.monitor-footnote { color:#829fb8; font-size:11px; line-height:1.7; margin:20px 0 0; }
.empty-state { padding:60px 24px; text-align:center; color:#a8bfd3; border:1px dashed #2a5471; border-radius:12px; font-size:14px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link { position:fixed; top:-100px; left:16px; z-index:999; background:#16c5e8; color:#051b30!important; padding:12px; border-radius:6px; }
.skip-link:focus { top:10px; }
@media(min-width:1800px) { .monitor-content { padding-left:48px; padding-right:48px; } }
@media(max-width:1100px) { .monitor-layout { grid-template-columns:205px minmax(0,1fr); } .monitor-content { padding:26px 22px; } .monitor-heading { align-items:flex-start; } .refresh-area { flex-direction:column; align-items:flex-end; gap:10px; } .camera-grid { gap:14px; } .card-bottom { flex-wrap:wrap; } }
@media(max-width:850px) { .monitor-layout { display:block; } .monitor-sidebar { border-right:0; border-bottom:1px solid #174564; padding:16px 20px; } .monitor-sidebar h2,.section-label,.side-divider,.side-bottom,.field-label,.side-description { display:none; } .scope-list { grid-template-columns:repeat(3,minmax(0,1fr)); } #taskFilter { margin-top:12px; } .monitor-content { padding:24px 20px; } .monitor-page .tabs { overflow-x:auto; justify-content:flex-start; } .monitor-page .tabs a { min-width:124px; padding:11px 20px; } }
@media(max-width:560px) { .monitor-top { padding:16px 18px; flex-wrap:wrap; gap:14px; } .account { width:100%; justify-content:space-between; gap:8px; } .account-label { display:none; } #accountName { max-width:calc(100% - 110px); } .monitor-heading { gap:10px; } .monitor-heading h1 { font-size:24px; } .eyebrow { font-size:8px; letter-spacing:1px; } .subheading { font-size:12px; } #updatedAt { font-size:10px; } .refresh-area .outline-button { padding:8px 10px; } .summary-grid { gap:8px; margin-bottom:24px; } .summary-item { padding:14px 12px; } .summary-item strong { font-size:27px; } .summary-item>span { font-size:11px; } .summary-item p { display:none; } .scope { padding:10px 9px; font-size:11px!important; } .scope span { padding:2px 5px; } .camera-grid { grid-template-columns:1fr; gap:18px; } .grid-toolbar { flex-wrap:wrap; gap:12px; } .camera-search,.camera-search input { width:100%; } .monitor-content { padding:22px 16px; } }

/* DRIFT_DASHBOARD_FILTERS_20260927_1 */
#departmentFilter { width:100%; min-height:43px; padding:10px; border:1px solid #2c5270; border-radius:8px; background:#12314e; color:#dfedfa; font-size:12px; }
.task-filter-label { margin-top:18px; }
.camera-toolbar-actions { flex-wrap:wrap; justify-content:flex-end; }
.camera-view-buttons { display:flex; gap:5px; }
.camera-view-button { display:grid; place-items:center; width:40px; height:40px; padding:9px; border:1px solid #2b6685; border-radius:7px; background:#10314e; color:#91aec3; cursor:pointer; }
.camera-view-button svg { width:21px; height:21px; }
.camera-view-button:hover { color:white; border-color:#31c6e8; }
.camera-view-button.active { color:white; background:#007faa; border-color:#36d9f6; }
.camera-selection-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:12px 14px; margin-bottom:20px; border:1px solid #1c4968; border-radius:9px; background:#0a2844; font-size:12px; }
.select-visible,.camera-choice { display:flex; align-items:center; gap:10px; cursor:pointer; min-width:0; }
.camera-selection-bar input,.camera-choice input { width:17px; height:17px; margin:0; flex-shrink:0; accent-color:#06b5dc; cursor:pointer; }
.card-heading h3 { min-width:0; }
.camera-choice span { overflow-wrap:anywhere; }
#selectedCameraCount { color:#9cbdcf; }
#showSelectedCameras { margin-left:auto; }
#showSelectedCameras[aria-pressed="true"] { background:#075774; border-color:#20beda; }
.clear-selection { border:0; background:transparent; color:#a5c5d9; min-height:40px; padding:8px; cursor:pointer; }
.clear-selection:disabled { opacity:.45; cursor:default; }
.camera-card.selected { border-color:#28bfdf; }
.camera-list { grid-template-columns:1fr!important; gap:12px; }
.camera-list .camera-card { display:grid; grid-template-columns:180px minmax(130px,.8fr) minmax(210px,1.2fr); grid-template-areas:"preview heading detail"; align-items:center; }
.camera-list .card-heading { grid-area:heading; flex-wrap:wrap; align-content:center; padding:14px; }
.camera-list .camera-stage { grid-area:preview; width:180px; }
.camera-list .card-content { grid-area:detail; padding:14px; min-width:0; }
.camera-list .card-bottom { margin-top:10px; padding-top:10px; flex-wrap:wrap; }
.camera-list .video-message { padding:8px; gap:4px; }
.camera-list .video-message svg,.camera-list .video-message small { display:none; }
.camera-list .video-message strong { font-size:11px; }
.camera-list .video-message button { font-size:10px!important; min-height:28px; padding:4px 8px; }
@media(max-width:1000px) {
  .monitor-sidebar .field-label { display:block; margin-top:16px; margin-bottom:8px; }
  #taskFilter { margin-top:0; }
  .grid-toolbar { flex-wrap:wrap; }
  .camera-toolbar-actions { margin-left:auto; }
}
@media(max-width:650px) {
  .camera-list .camera-card { grid-template-columns:130px minmax(0,1fr); grid-template-areas:"heading heading" "preview detail"; align-items:start; }
  .camera-list .card-heading { flex-wrap:nowrap; padding:12px; }
  .camera-list .camera-stage { width:130px; margin:0 0 12px 12px; }
  .camera-list .card-content { padding:0 12px 12px 22px; }
  .camera-list .card-bottom { gap:8px; }
}
@media(max-width:560px) {
  .grid-toolbar .camera-toolbar-actions { width:100%; flex-wrap:nowrap; gap:8px; }
  .camera-toolbar-actions .camera-search { flex:1; min-width:0; }
  .camera-toolbar-actions .camera-search input { width:100%; }
  .camera-selection-bar { gap:8px 12px; padding:10px; }
  #showSelectedCameras { margin-left:0; }
}

/* DRIFT_DASHBOARD_TOOLBAR_20260927_2 */
.camera-selection-bar { align-items:flex-end; gap:10px 20px; }
.camera-selection-summary { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; min-height:40px; }
.camera-selection-controls { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin-left:auto; min-width:0; }
.selection-filter { display:grid; gap:6px; width:174px; min-width:0; }
.selection-filter>span { color:#a9c5d7; font-size:11px; }
.selection-filter #departmentFilter,.selection-filter #taskFilter { width:100%; min-width:0; min-height:40px; margin:0; padding:9px 10px; }
.camera-selection-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.camera-selection-bar #showSelectedCameras { margin-left:0; }
.selection-filter-note { flex-basis:100%; margin:0; font-size:11px; line-height:1.6; color:#8caec4; }
@media(max-width:1200px) {
  .camera-selection-controls { flex:1 1 100%; margin-left:0; }
  .selection-filter { flex:1 1 150px; }
}
@media(max-width:560px) {
  .camera-selection-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .selection-filter { width:100%; }
  .camera-selection-buttons { grid-column:1/-1; }
}