/**
 * Copyright since 2025 Mifos Initiative
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

/* No explicit width/maxHeight is passed at every `dialog.open(CaptureImageDialogComponent)`
   call site (there are several, across clients-view/create/edit flows) — capping height and
   allowing internal scroll here, once, keeps the Cancel/Upload footer reachable on short
   viewports instead of relying on every caller to remember a maxHeight config. */
:host {
  display: block;
  max-height: 90vh;
  overflow-y: auto;
}

.capture-dialog {
  padding: 4px 4px 8px;
}

.capture-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;

  fa-icon {
    color: #1074b9;
    font-size: 18px;
  }
}

.capture-instructions {
  margin: 4px 0 14px;
  padding: 0 16px;
  font-size: 13px;
  color: rgb(0 0 0 / 60%);
}

.capture-frame {
  width: 100%;
  max-width: 640px;

  /* Capped in vh, not just px, so the frame shrinks on short viewports (laptop screens with
     browser chrome eating into the visible height) instead of pushing the Capture/Cancel/
     Upload buttons below the fold — `object-fit: cover` on the video means shrinking this box
     never reintroduces pillarboxing, it just changes how much of the live frame is visible. */
  max-height: 42vh;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 8px 24px -8px rgb(15 23 42 / 25%);
  border: 1px solid rgb(255 255 255 / 8%);

  /* Default (profile) frame follows the requested 4:3 capture stream. */
  aspect-ratio: 4 / 3;

  /* Signature capture uses a shorter, wider (16:9) frame — paper signatures are landscape-ish
     and this matches the wider resolution requested from getUserMedia, so the live preview
     fills the frame edge-to-edge instead of pillarboxing (black bars) inside a mismatched box. */
  &--signature {
    aspect-ratio: 16 / 9;
    max-height: 36vh;
  }
}

.capture-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  /* Chromium auto-injects a Picture-in-Picture toggle (and sometimes a cast button) as small
     square overlay icons in a bare <video>'s corners on hover — the `disablepictureinpicture`/
     `disableremoteplayback` attributes stop the *feature*, but these pseudo-elements are the
     belt-and-braces way to make sure the icons themselves never render. */
  &::-webkit-media-controls,
  &::-webkit-media-controls-panel,
  &::-internal-media-controls-overlay-cast-button {
    display: none !important;
  }
}

.capture-actions-row {
  display: flex;
  justify-content: center;
  margin: 16px 0 4px;
}

.capture-btn {
  border-radius: 999px !important;
  padding: 0 20px !important;
  height: 42px;
  font-weight: 600 !important;
}

.capture-dialog-footer {
  padding: 8px 4px 0 !important;

  .mat-mdc-raised-button {
    border-radius: 999px !important;
    font-weight: 600 !important;
  }
}