/* PyCams — customizations layered on AdminLTE / Bootstrap 5 */

.pc-auth-card {
  max-width: 400px;
  margin: 8vh auto;
}

.pc-camera-tile {
  position: relative;
  background: #000;
  border-radius: .25rem;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.pc-camera-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}
.pc-camera-tile .pc-camera-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: .25rem .5rem;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
}
.pc-camera-tile .pc-camera-offline {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: .85rem;
}

.pc-grid-1 { grid-template-columns: 1fr; }
.pc-grid-4 { grid-template-columns: repeat(2, 1fr); }
.pc-grid-9 { grid-template-columns: repeat(3, 1fr); }
.pc-camera-grid { display: grid; gap: .5rem; }

.pc-mono { font-family: var(--bs-font-monospace); font-size: .875em; }

.pc-pill { display: inline-block; padding: .15em .6em; font-size: .72rem; font-weight: 600;
  letter-spacing: .04em; border-radius: 999px; text-transform: uppercase; }
.pc-pill-on  { background: rgba(40,167,69,.15); color: #28a745; border: 1px solid rgba(40,167,69,.3); }
.pc-pill-off { background: rgba(108,117,125,.15); color: #6c757d; border: 1px solid rgba(108,117,125,.3); }

.pc-ptz-pad {
  position: absolute;
  top: .35rem;
  right: .35rem;
  display: grid;
  grid-template-columns: repeat(3, 1.6rem);
  gap: .15rem;
  opacity: .35;
  transition: opacity .15s;
}
.pc-camera-tile:hover .pc-ptz-pad { opacity: .9; }
.pc-ptz-pad button {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.5);
  color: #fff;
  border-radius: .2rem;
  font-size: .7rem;
  line-height: 1;
}
.pc-ptz-pad button:active { background: rgba(0,0,0,.8); }
.pc-ptz-pad button.pc-ptz-pending { background: rgba(13,110,253,.6); }
.pc-ptz-pad button.pc-ptz-error { background: rgba(220,53,69,.85); }