/* Plyr brand overrides.
 *
 * Loaded after plyr.css on the delivery image-detail page and the archive
 * video-edit page. Re-skins the player to match the studio interface:
 * brand orange accent (--color-accent from input.css's @theme) instead of
 * Plyr's default cyan, GT Pressura Mono on numeric time/menu text, slightly
 * tighter spacing, and tooltip/menu surfaces aligned with the zinc palette
 * used everywhere else in the admin UI.
 *
 * Variable names come straight from plyr.css; no DOM selector overrides
 * here so future Plyr upgrades won't fight us.
 */

:root {
  /* Primary accent — progress fill, focus rings, hover highlights, range thumb */
  --plyr-color-main: #ff5c1f;
  --plyr-focus-visible-color: #ff5c1f;

  /* Typography — match the rest of the studio chrome */
  --plyr-font-family: var(--font-sans, system-ui, sans-serif);
  --plyr-font-size-time: 13px;
  --plyr-font-size-menu: 13px;
  --plyr-font-weight-regular: 500;

  /* Video surface */
  --plyr-video-background: #000;

  /* Range slider — replace cyan thumb with white-on-orange for contrast on
     dark video backgrounds, with a soft shadow for legibility. */
  --plyr-range-thumb-background: #fff;
  --plyr-range-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  --plyr-range-thumb-height: 14px;
  --plyr-range-track-height: 4px;
  --plyr-range-fill-background: #ff5c1f;
  --plyr-video-range-track-background: rgba(255, 255, 255, 0.25);
  --plyr-video-progress-buffered-background: rgba(255, 255, 255, 0.4);

  /* Tooltips on the scrubber preview */
  --plyr-tooltip-background: rgba(15, 15, 15, 0.9);
  --plyr-tooltip-color: #fff;
  --plyr-tooltip-radius: 4px;
  --plyr-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);

  /* Settings menu (quality, speed) */
  --plyr-menu-background: rgba(15, 15, 15, 0.92);
  --plyr-menu-color: #fff;
  --plyr-menu-radius: 6px;
  --plyr-menu-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  --plyr-menu-back-border-color: rgba(255, 255, 255, 0.1);
  --plyr-menu-back-border-shadow-color: rgba(0, 0, 0, 0.4);

  /* Controls — slightly smaller icons, monospace time block */
  --plyr-control-icon-size: 16px;
  --plyr-control-spacing: 8px;
  --plyr-control-radius: 4px;

  /* Captions (unused today but matched in case we add them later) */
  --plyr-captions-background: rgba(0, 0, 0, 0.7);
  --plyr-captions-text-color: #fff;
}

/* The time display is the single most "monospace-wants-this" surface in
 * the controls. Plyr doesn't expose a CSS variable for it specifically, so
 * a targeted selector is fine — Plyr's own class names are stable across
 * minor versions.
 */
.plyr__time {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-feature-settings: "tnum" 1;
}

/* Quality menu values look better tabular-numeric too (720, 1080, 2160). */
.plyr__menu__container [role="menuitemradio"] {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-feature-settings: "tnum" 1;
}

/* Fullscreen: release any caller-applied size caps so the video fills
 * the viewport. Templates set max-h-[70vh] / aspect-ratio on the inline
 * preview; without these resets those carry into fullscreen mode and
 * the video stays at its inline size while the Plyr wrapper goes
 * full-bleed. Covers both Plyr's class-based fullscreen and native :fullscreen.
 */
.plyr--fullscreen-active video,
.plyr:fullscreen video {
  max-height: none !important;
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}