/* VudioPlayer: fixed-bottom overlay plus floating video pane.
   Ported from BOSS's addins/bx-common-components/player/player.css.
   Loaded globally by layouts/header.html.twig; inert until a page calls init(). */

/* The height of the bottom bar, and therefore the height of the strip of
   viewport a page must not put anything it wants read into. Published as a
   custom property so a floating panel on a host page can clear it by name
   rather than by a number copied out of this file - voice tracking's recorder
   sat at bottom:4rem, which is 64px, and the player covered its bottom 26px
   including the Reset and Cancel buttons. See voice_tracking/assets/css/vt_local.css. */
:root {
    --vudio-player-height: 90px;
}

.vudio-player {
    position: fixed;
    bottom: -100px;
    left: 0;
    width: 100%;
    height: var(--vudio-player-height);
    background-color: #181818;
    color: white;
    z-index: 9999;
    transition: bottom 0.3s ease-in-out;
    border-top: 1px solid #282828;
    box-sizing: border-box;
    overflow: hidden;
    max-width: 100vw;
}

.vudio-player--visible {
    bottom: 0;
}

/* Reserve space at the bottom of the page so the fixed overlay doesn't hide content. */
body.vudio-player-active {
    padding-bottom: var(--vudio-player-height);
}

.vudio-player__close-btn {
    margin-left: 12px;
    font-size: 14px;
    opacity: 0.7;
}
.vudio-player__close-btn:hover {
    opacity: 1;
}

/* -------- Floating video pane (types 2/3) -------- */
.vudio-video-pane {
    position: fixed;
    background: #000;
    border: 1px solid #282828;
    border-radius: 4px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    z-index: 10000; /* sits above .vudio-player */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    cursor: move; /* whole pane is draggable */
    /* NB: no overflow:hidden, it would clip the jQuery UI resize handles. */
}
.vudio-video-pane button,
.vudio-video-pane .ui-resizable-handle { cursor: default; }
.vudio-video-pane .ui-resizable-n,
.vudio-video-pane .ui-resizable-s { cursor: ns-resize; }
.vudio-video-pane .ui-resizable-e,
.vudio-video-pane .ui-resizable-w { cursor: ew-resize; }

.vudio-video-pane:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    border: none;
    border-radius: 0;
    cursor: default;
}
.vudio-video-pane:fullscreen .vudio-video-pane__video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Resize handles. jQuery UI adds .ui-resizable-handle divs but ships no size
   unless jquery-ui.css is loaded. Give them visible size + hover affordance. */
.vudio-video-pane .ui-resizable-handle {
    position: absolute;
    background: transparent;
}
.vudio-video-pane .ui-resizable-n,
.vudio-video-pane .ui-resizable-s {
    left: 0;
    width: 100%;
    height: 6px;
    cursor: ns-resize;
}
.vudio-video-pane .ui-resizable-n { top: -3px; }
.vudio-video-pane .ui-resizable-s { bottom: -3px; }
.vudio-video-pane .ui-resizable-e,
.vudio-video-pane .ui-resizable-w {
    top: 0;
    width: 6px;
    height: 100%;
    cursor: ew-resize;
}
.vudio-video-pane .ui-resizable-e { right: -3px; }
.vudio-video-pane .ui-resizable-w { left: -3px; }
.vudio-video-pane .ui-resizable-ne,
.vudio-video-pane .ui-resizable-nw,
.vudio-video-pane .ui-resizable-se,
.vudio-video-pane .ui-resizable-sw {
    width: 14px;
    height: 14px;
    z-index: 2;
}
.vudio-video-pane .ui-resizable-ne { top: -3px; right: -3px; cursor: nesw-resize; }
.vudio-video-pane .ui-resizable-nw { top: -3px; left: -3px;  cursor: nwse-resize; }
.vudio-video-pane .ui-resizable-se { bottom: -3px; right: -3px; cursor: nwse-resize; }
.vudio-video-pane .ui-resizable-sw { bottom: -3px; left: -3px;  cursor: nesw-resize; }
/* Subtle visual hint on the SE corner so users know it's grabbable */
.vudio-video-pane .ui-resizable-se {
    background:
        linear-gradient(135deg, transparent 45%, #666 45%, #666 55%, transparent 55%),
        linear-gradient(135deg, transparent 65%, #666 65%, #666 75%, transparent 75%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0.7;
}
.vudio-video-pane__header {
    background: #181818;
    color: #b3b3b3;
    padding: 4px 10px;
    cursor: move;
    font-size: 12px;
    user-select: none;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.vudio-video-pane__title {
    font-weight: 500;
}
.vudio-video-pane__close {
    background: none;
    border: none;
    color: #b3b3b3;
    font-size: 14px;
    padding: 0 2px;
    margin-left: 8px;
    cursor: pointer;
    opacity: 0.7;
    line-height: 1;
}
.vudio-video-pane__close:hover {
    opacity: 1;
    color: #fff;
}
.vudio-video-pane__video {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
    min-height: 0;
    object-fit: contain;
}

/* -------- Bottom bar layout -------- */
.vudio-player__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

.vudio-player__left {
    display: flex;
    align-items: center;
    width: 30%;
    min-width: 0;
    flex-shrink: 1;
}

.vudio-player__left .vudio-player__trackart {
    width: 56px;
    height: 56px;
    margin-right: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.vudio-player__left .vudio-player__track-info {
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 1;
}

.vudio-player__left .vudio-player__track-title {
    font-size: 14px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vudio-player__left .vudio-player__track-artist {
    margin-top: -2px;
    font-size: 14px;
    font-style: italic;
    color: #b3b3b3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vudio-player__center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 40%;
    min-width: 0;
}

.vudio-player__control-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.vudio-player__control-btn {
    background: none;
    border: none;
    color: #b3b3b3;
    font-size: 16px;
    margin: 0 10px;
    cursor: pointer;
    transition: color 0.2s, transform 0.1s;
}

.vudio-player__control-btn:hover {
    color: white;
}

.vudio-player__control-btn:active {
    transform: scale(0.95);
}

.vudio-player__control-btn--active {
    color: #1db954;
}

.vudio-player__play-pause-btn {
    background-color: white;
    color: black;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.vudio-player__play-pause-btn:hover {
    background-color: #f0f0f0;
    color: black;
    transform: scale(1.05);
}

.vudio-player__progress-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.vudio-player__progress-row span {
    font-size: 11px;
    color: #b3b3b3;
    min-width: 35px;
}

.vudio-player__progress-bar {
    flex: 1;
    margin: 0 10px;
    height: 8px;
    -webkit-appearance: none;
    background: #4f4f4f;
    border-radius: 4px;
    outline: none;
}

.vudio-player__progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    margin-top: 0px; /* -4px centres on the track; +2px nudges it down */
}

.vudio-player__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 30%;
    min-width: 0;
    flex-shrink: 0;
}

.vudio-player__volume-control {
    display: flex;
    align-items: center;
    width: 125px;
    max-width: 100%;
    flex-shrink: 1;
}

.vudio-player__volume-control i {
    color: #b3b3b3;
    margin-right: 8px;
}

.vudio-player__volume-bar {
    flex: 1;
    min-width: 0;
    height: 4px;
    -webkit-appearance: none;
    background: #4f4f4f;
    border-radius: 2px;
    outline: none;
}

.vudio-player__volume-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    margin-top: -2px; /* Center thumb on track */
}

.vudio-player__volume-control:hover .vudio-player__volume-bar::-webkit-slider-thumb {
    opacity: 1;
}

/* -------- Host-page row highlight --------
   Bootstrap's .table-active covers most tables; these keep the playing row
   legible in the scheduling board's dense category tables, which restyle rows. */
[data-player-container] tr.table-active {
    background-color: rgba(0, 0, 0, 0.05);
}

[data-player-container] tr.table-active td {
    color: #000;
}

/* The play control is normally revealed on row hover (.show-on-hover); keep it
   visible on the playing row so the pause icon doesn't vanish when the mouse
   moves away. */
[data-player-container] tr.table-active .show-on-hover {
    visibility: visible;
}

/* -------- Volume, and where it is worth drawing --------

   The slider writes `HTMLMediaElement.volume` and nothing else - there is no
   Web Audio gain node in this component - so on iOS it is a dead control. Apple
   reserves output level to the hardware buttons and ignores the property, which
   makes the slider pure decoration on the one platform this ticket is about.

   `player.js` adds this class; see isIOS() there for why the detection is a
   sniff and not a feature test. Hiding it is not a loss on iOS because there was
   never anything behind it. */
.vudio-player--no-volume .vudio-player__volume-control {
    display: none;
}

/* -------- Phone layout (VUD-200) --------

   Three fixed percentage columns cannot hold their own contents at phone width.
   At 371px the left column resolved to 98px, of which the artwork took 68, so
   the track title was painted into 30px and needed 105; the right column was
   98px holding a 125px volume control, so the control spilled left across the
   centre. Six pairs of controls overlapped each other, the loop icon sitting on
   top of the title and the volume slider running through the Next button.

   The columns become a two row grid below: artwork, title, transport and Close
   on the first row, and the seek bar across the full width on the second. The
   two wrapper divs use `display: contents` so their children become grid items
   directly - the markup in player.js is untouched.

   Volume is hidden here as well as on iOS. On a phone the device's own buttons
   are the volume control, and the 125px the slider wanted is worth more spent on
   the track title. */
@media (max-width: 576px) {
    /* Two rows, but a shorter bar than the desktop three-column one. Changing
       this without changing the height below would put the bar back over the
       page content, and dropdown.js reads this same property to decide when to
       flip a menu upward, so a stale value reopens BUG-89. */
    :root {
        --vudio-player-height: 78px;
    }

    .vudio-player__container {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        column-gap: 8px;
        row-gap: 4px;
        align-items: center;
        padding: 8px 12px;
    }

    /* Promote the children of the centre and right wrappers into the grid. */
    .vudio-player__center,
    .vudio-player__right {
        display: contents;
    }

    .vudio-player__left {
        grid-area: 1 / 1 / 2 / 2;
        width: auto;
    }

    .vudio-player__left .vudio-player__trackart {
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }

    /* min-width:0 is load bearing. `overflow: hidden` already lets this block
       shrink, but the grid column it sits in is `1fr` and would otherwise be
       sized by the longest word in the title. */
    .vudio-player__left .vudio-player__track-info {
        min-width: 0;
    }

    .vudio-player__left .vudio-player__track-title,
    .vudio-player__left .vudio-player__track-artist {
        font-size: 13px;
        line-height: 16px;
    }

    .vudio-player__control-row {
        grid-area: 1 / 2 / 2 / 3;
        justify-self: end;
        margin-bottom: 0;
    }

    /* 32px square with 3px either side gives a 38px touch pitch, which is close
       enough to the 44px Apple asks for in a bar this short, and keeps all four
       transport controls rather than dropping one for space. */
    .vudio-player__control-btn {
        min-width: 32px;
        height: 32px;
        margin: 0 3px;
        font-size: 15px;
    }

    .vudio-player__close-btn {
        grid-area: 1 / 3 / 2 / 4;
        margin-left: 4px;
    }

    .vudio-player__volume-control {
        display: none;
    }

    .vudio-player__progress-row {
        grid-area: 2 / 1 / 3 / 4;
        width: auto;
    }

    .vudio-player__progress-row span {
        min-width: 32px;
    }

    /* A slim track is hard to hit with a thumb, so the bar keeps its 8px but the
       thumb grows and stops relying on hover to appear. */
    .vudio-player__progress-bar::-webkit-slider-thumb {
        width: 18px;
        height: 18px;
    }
}