/* command.css · Command Center skin layout extras */

.cc-monitor { padding: 24px 32px 64px; display: flex; flex-direction: column; gap: 18px; }
.cc-monitor-head { display: flex; justify-content: space-between; align-items: flex-end; }
.cc-monitor-actions { display: flex; gap: 8px; align-items: center; }

.cc-cam-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.cc-cam {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cc-cam-feed {
  aspect-ratio: 16/9;
  position: relative;
  background:
    radial-gradient(circle at 30% 30%, rgba(77,168,255,0.10), transparent 50%),
    linear-gradient(180deg, #0d1426 0%, #050913 100%);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 10px 12px;
}
.cc-cam-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.cc-cam-overlay { position: relative; display: flex; justify-content: space-between; align-items: center; z-index: 1; }
.cc-cam-id { font-family: var(--font-mono); font-size: var(--fs-11, 11px); color: var(--fg-muted); }
.cc-cam-meta {
  position: relative;
  z-index: 1;
  font-size: var(--fs-12);
  color: var(--fg-default);
  display: flex; justify-content: space-between; align-items: center;
}
.cc-cam-meta span:first-child { color: var(--fg-strong); font-weight: 500; }
.cc-cam-meta .ar-mono { color: var(--fg-muted); }
.cc-cam-offline .cc-cam-feed {
  background: linear-gradient(135deg, #1a0f0f 0%, #0c0508 100%);
}
.cc-cam-warning .cc-cam-feed {
  background: linear-gradient(135deg, #1f1a08 0%, #0d0a04 100%);
}

/* Override topbar look in command */
[data-skin="command"] .ar-topbar {
  background: rgba(15,23,42,0.80);
}
[data-skin="command"] .ar-header {
  background: rgba(15,23,42,0.80);
}
[data-skin="command"] .ar-table tbody tr:hover { background: var(--bg-subtle); }
[data-skin="command"] .ar-table th { background: var(--bg-canvas); }
[data-skin="command"] .ar-progress { background: var(--bg-subtle); }

/* View toggle visual in command */
[data-skin="command"] .ar-view-toggle { background: rgba(15,23,42,0.92); border: 1px solid var(--border-strong); }