*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; padding: 0; background: #111; color: #eee;
  font-family: Verdana, sans-serif; min-height: 100vh;
}

/* ── login screen ─────────────────────────────────────────── */
#login-screen {
  display: flex; justify-content: center; align-items: center;
  height: 100vh; background: #111;
}
#login-box {
  background: #1a1a1a; border: 1px solid #333; border-radius: 8px;
  padding: 30px 40px; text-align: center; width: 320px;
}
#login-box h2 { margin: 0 0 20px; font-size: 18px; color: #8af; }
#login-box label { display: block; text-align: left; font-size: 12px; color: #888; margin-top: 10px; }
#login-box input {
  width: 100%; padding: 6px 10px; margin-top: 3px; background: #2a2a2a;
  border: 1px solid #555; border-radius: 4px; color: #eee; font-size: 13px;
}
#login-box button {
  margin-top: 18px; padding: 7px 24px; font-size: 14px; font-weight: bold;
  border-radius: 5px; cursor: pointer; border: 1px solid #60A080;
  background: #60A080; color: #fff; width: 100%;
}
#login-box button:hover { background: #70b090; }
#login-error { color: #e88; font-size: 12px; margin-top: 10px; min-height: 16px; }

/* ── top bar ──────────────────────────────────────────────── */
#bar {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  padding: 7px 10px; background: #1a1a1a; border-bottom: 1px solid #333;
  flex-wrap: wrap; position: sticky; top: 0; z-index: 100;
}
#bar button {
  padding: 5px 14px; font-size: 13px; font-weight: bold; border-radius: 4px;
  cursor: pointer; border: 1px solid #555; background: #2a2a2a; color: #ccc;
}
#bar button:hover { background: #444; color: #fff; }
.btn-on  { background: #60A080 !important; border-color: #60A080 !important; color: #fff !important; }
.btn-off { background: #553333 !important; border-color: #804040 !important; color: #e08080 !important; }
.layout-active { background: #3a5a7a !important; border-color: #5a8aaa !important; color: #aaddff !important; }
#status { font-size: 12px; color: #aaa; min-width: 180px; text-align: center; }

/* ── settings panel ──────────────────────────────────────── */
#settings-panel {
  display: none; margin: 8px auto; max-width: 960px; padding: 12px 16px;
  border: 1px solid #444; border-radius: 6px; background: #1e1e1e; text-align: left;
}
#settings-panel h3 { margin: 0 0 10px; font-size: 13px; color: #8af; }
.cam-cfg {
  border: 1px solid #333; border-radius: 5px; padding: 10px; margin-bottom: 8px;
  background: #161616;
}
.cam-cfg h4 { margin: 0 0 8px; font-size: 12px; color: #aaa; }
.srow { display: flex; gap: 8px; }
.srow > div { flex: 1; }
.srow label { display: block; margin-top: 6px; font-size: 11px; color: #888; }
.srow input, .srow select {
  width: 100%; padding: 4px 7px; margin-top: 2px; background: #2a2a2a;
  border: 1px solid #555; border-radius: 3px; color: #eee; font-size: 12px;
}
.cfg-row2 { display: flex; gap: 8px; margin-top: 6px; }
.cfg-row2 > div { flex: 1; }
.cfg-row2 label { display: block; font-size: 11px; color: #888; }
.cfg-row2 input, .cfg-row2 select {
  width: 100%; padding: 4px 7px; margin-top: 2px; background: #2a2a2a;
  border: 1px solid #555; border-radius: 3px; color: #eee; font-size: 12px;
}
#global-cfg { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
#global-cfg > div { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #aaa; }
#global-cfg input, #global-cfg select {
  padding: 4px 7px; background: #2a2a2a; border: 1px solid #555;
  border-radius: 3px; color: #eee; font-size: 12px;
}
#global-cfg button {
  padding: 4px 12px; font-size: 12px; font-weight: bold; border-radius: 4px;
  cursor: pointer; border: 1px solid #555; background: #2a2a2a; color: #ccc;
}
#global-cfg button:hover { background: #444; color: #fff; }
#settings-notice { font-size: 11px; color: #888; margin-bottom: 8px; }
#import-file { display: none; }
#linked-instances-panel {
  margin: 10px 0 14px;
  padding: 10px;
  border: 1px solid #333;
  border-radius: 6px;
  background: #171717;
}
#linked-instances-summary {
  font-size: 11px;
  color: #999;
  margin-bottom: 8px;
}
#linked-instances-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.linked-instance-card {
  border: 1px solid #2e3a44;
  border-radius: 6px;
  padding: 10px;
  background: #12181d;
}
.linked-instance-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.linked-instance-title {
  font-size: 13px;
  color: #aaddff;
  font-weight: bold;
}
.linked-instance-meta {
  font-size: 11px;
  color: #aaa;
  margin-top: 4px;
}
.linked-instance-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.linked-instance-actions button {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #555;
  background: #2a2a2a;
  color: #ccc;
}
.linked-instance-actions button:hover { background: #444; color: #fff; }
.linked-instance-actions .btn-danger {
  border-color: #804040;
  color: #e08080;
  background: #553333;
}
.linked-instance-actions .btn-danger:hover {
  background: #804040;
  color: #fff;
}
.linked-instance-cameras {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px;
}
.linked-instance-edit {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #2b3944;
  border-radius: 6px;
  background: #0e1419;
}
.linked-instance-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.linked-instance-edit-grid label,
.linked-instance-inline-actions label {
  font-size: 11px;
  color: #b7c1c8;
}
.linked-instance-edit-grid input {
  width: 100%;
  margin-top: 3px;
  padding: 6px;
  border-radius: 4px;
  border: 1px solid #4a4a4a;
  background: #1e1e1e;
  color: #ddd;
  box-sizing: border-box;
}
.linked-instance-inline-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.linked-source-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 4;
  background: rgba(19, 60, 90, 0.92);
  color: #d7efff;
  border: 1px solid #4f87aa;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: bold;
  max-width: calc(100% - 16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.linked-camera-chip {
  border: 1px solid #31404a;
  border-radius: 4px;
  padding: 6px 8px;
  background: #0f1418;
  font-size: 11px;
  color: #cfd8df;
}
.linked-empty {
  font-size: 11px;
  color: #777;
  padding: 6px 0;
}

/* ── camera grid ─────────────────────────────────────────── */
#grid-wrap { padding: 6px; }
#cam-grid { display: grid; gap: 4px; width: 100%; }

/* layout modes — 12 slots */
#cam-grid.layout-3x4 { grid-template-columns: repeat(3, 1fr); }
#cam-grid.layout-4x3 { grid-template-columns: repeat(4, 1fr); }
#cam-grid.layout-2x6 { grid-template-columns: repeat(2, 1fr); }
#cam-grid.layout-1x1 { grid-template-columns: 1fr; }

#cam-grid.layout-1x1 .cam-cell {
  width: 100%;
  aspect-ratio: auto;
  min-height: clamp(360px, 70vh, 900px);
}

/* ── camera cell ─────────────────────────────────────────── */
.cam-cell {
  position: relative; background: #000; border: 2px solid #333;
  border-radius: 4px; overflow: hidden; cursor: pointer;
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
}
.cam-cell img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
.cam-cell video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; background: #000;
}
.cam-cell .cam-label {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 2px 6px;
  font-size: 11px; color: #eee; background: rgba(0,0,0,0.55);
  pointer-events: none; z-index: 5;
}

/* cell overlay controls */
.cam-cell .cell-controls {
  position: absolute; top: 0; left: 0; right: 0; padding: 3px 4px;
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(rgba(0,0,0,0.6), transparent);
  z-index: 5; opacity: 0; transition: opacity 0.2s;
}
.cam-cell:hover .cell-controls { opacity: 1; }
.cell-controls button, .cell-controls select {
  padding: 2px 8px; font-size: 10px; font-weight: bold; border-radius: 3px;
  cursor: pointer; border: 1px solid #666; background: rgba(42,42,42,0.85);
  color: #ccc; line-height: 1;
}
.cell-controls button:hover { background: rgba(96,160,128,0.85); color: #fff; }
.cell-controls select {
  padding: 2px 4px; font-size: 10px; background: rgba(42,42,42,0.85);
  border: 1px solid #666; color: #ccc; border-radius: 3px;
}
.cell-controls select option { background: #2a2a2a; color: #eee; }

/* still mode toggle */
.cell-controls .toggle-still {
  min-width: 36px; text-align: center;
}
.cell-controls .toggle-still.on {
  background: rgba(96,160,128,0.85) !important; color: #fff !important;
}

/* selected / highlighted */
.cam-cell.selected { border-color: #60A080; box-shadow: 0 0 0 2px #60A080; }
.cam-cell.selected .cam-label { background: rgba(60,120,80,0.75); color: #fff; }

/* unconfigured cell placeholder */
.cam-cell.unconfigured {
  border: 2px dashed #333; background: #0a0a0a; cursor: default;
}
.cam-cell.unconfigured .cam-label {
  background: transparent; text-align: center; width: 100%;
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-size: 12px; color: #555;
}

/* ── PTZ + controls bar ─────────────────────────────────── */
#controls {
  display: flex; justify-content: center; align-items: center; gap: 20px;
  padding: 6px; flex-wrap: wrap;
}
#ptz-label { font-size: 11px; color: #888; text-align: center; min-width: 80px; }
#ptz {
  display: inline-grid; grid-template-columns: repeat(3, 50px);
  grid-template-rows: repeat(3, 36px); gap: 3px;
}
#ptz button {
  background: #2a2a2a; border: 1px solid #555; border-radius: 4px;
  color: #ccc; font-size: 13px; font-weight: bold; cursor: pointer;
}
#ptz button:hover { background: #60A080; color: #fff; }
#ptz .home { background: #3a2a2a; border-color: #775555; color: #e08080; font-size: 10px; }
#btn-reboot {
  padding: 5px 14px; font-size: 12px; font-weight: bold; border-radius: 4px;
  cursor: pointer; border: 1px solid #804040; background: #553333; color: #e08080;
}
#btn-reboot:hover { background: #804040; color: #fff; }

/* ── fullscreen overlay ─────────────────────────────────── */
#fs-overlay {
  display: none; position: fixed; inset: 0; background: #000;
  z-index: 9999; cursor: zoom-out;
}
#fs-overlay img, #fs-overlay video {
  width: 100%; height: 100%; object-fit: contain; display: block;
  pointer-events: none;
}
#fs-close {
  position: absolute; top: 10px; right: 16px; font-size: 22px; color: #fff;
  cursor: pointer; z-index: 10000; background: rgba(0,0,0,0.5);
  border: none; border-radius: 4px; padding: 2px 10px;
}
#fs-label {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  font-size: 14px; color: #eee; background: rgba(0,0,0,0.6);
  padding: 4px 14px; border-radius: 4px; pointer-events: none;
}

/* ── responsive ─────────────────────────────────────────── */
@media (max-width: 1200px) {
  #cam-grid.layout-3x4,
  #cam-grid.layout-4x3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  #cam-grid.layout-3x4,
  #cam-grid.layout-4x3,
  #cam-grid.layout-2x6 { grid-template-columns: 1fr; }
  #bar { gap: 6px; padding: 5px 6px; }
  #bar button { padding: 4px 8px; font-size: 11px; }
}