/* ── MediaSqueeze Custom Styles ── */

/* Drag and drop hover state */
.drag-over { border-color: #3b82f6; background-color: #eff6ff; }

/* Video.js matrix skin */
.vjs-matrix.video-js { width: 100%; height: auto; aspect-ratio: 16/9; }

/* ── Studio (Cinemagraph) Canvas Overlay ── */
#studio-container { position: relative; width: 100%; border-radius: 1rem; overflow: hidden; background: #000; }
#mask-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; display: none; cursor: crosshair; }
#freeze-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; display: none; object-fit: contain; }

.mode-painting #mask-canvas,
.mode-painting #freeze-frame { display: block; }
.mode-painting #studio-player { visibility: hidden; }

/* ── Reframe Player ── */
#reframe-container { position: relative; }
#reframe-container .video-js { width: 100% !important; }
#reframe-container .video-js video { width: 100%; height: auto; display: block; }
#reframe-container .vjs-control-bar { z-index: 50 !important; }
#reframe-container .vjs-big-play-button { z-index: 50 !important; }
#reframe-container .vjs-loading-spinner { z-index: 50 !important; }

/* ── Reusable Component Classes ── */

/* Small uppercase labels used throughout the UI */
.label-xs {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Card component base */
.card {
    background: white;
    padding: 1.25rem;
    border-radius: 1rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    border: 1px solid rgb(241 245 249);
}

/* Format badge in job history */
.format-badge {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: rgb(248 250 252);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 900;
    color: rgb(148 163 184);
    text-transform: uppercase;
    letter-spacing: -0.05em;
}

/* Section header style */
.section-header {
    font-size: 0.75rem;
    font-weight: 900;
    color: rgb(148 163 184);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Tool mode button — active */
.mode-btn-active {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transition: all 150ms;
}

/* Tool mode button — inactive */
.mode-btn-inactive {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    background: white;
    color: rgb(148 163 184);
    border: 1px solid rgb(226 232 240);
    border-radius: 0.5rem;
    transition: all 150ms;
}
.mode-btn-inactive:hover { background: rgb(248 250 252); }