/*
 * Signage passive player — design tokens + fullscreen layout.
 *
 * The custom properties in :root are the platform branding contract. A tenant
 * stylesheet may override ONLY the whitelisted subset (--bg, --ink, --accent,
 * --accent-strong, --accent-soft, --border) via js/branding.js — never by
 * injecting raw CSS. Everything else here is layout the tenant cannot touch.
 */

:root {
    /* Whitelisted branding tokens (tenant-overridable). */
    --bg: #0b0d10;
    --ink: #f4f6f8;
    --accent: #1d88e5;
    --accent-strong: #0f6fc5;
    --accent-soft: #14324a;
    --border: #2a2f36;

    /* Non-branding layout tokens (fixed). */
    --chip-bg: rgba(0, 0, 0, 0.62);
    --chip-ink: #ffffff;
    --font-stack: "Roboto", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-stack);
    overflow: hidden; /* fullscreen signage: never scroll */
    -webkit-user-select: none;
    user-select: none;
    cursor: none; /* passive screen: no pointer */
}

/* The fullscreen stage the player renders into. */
.stage {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Slides fill the stage; images/video are full-bleed by default. */
.slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.slide-image,
.slide-video {
    object-fit: cover;
    background: var(--bg);
}

/* Idle placeholder shown when the playlist is empty. */
.slide-idle {
    background:
        radial-gradient(120% 120% at 50% 40%, var(--accent-soft) 0%, var(--bg) 70%);
}

/* Small caption overlay for a labelled slide ({nb,en} via i18n.resolveLabel).
   Flat, token-coloured; sits above the media but below chip/logo layers. */
.slide-caption {
    position: absolute;
    left: 28px;
    bottom: 96px;
    max-width: 60%;
    padding: 10px 18px;
    border-radius: 8px;
    background: var(--chip-bg);
    color: var(--chip-ink);
    border: 1px solid var(--border);
    font-size: 22px;
    letter-spacing: 0.2px;
    z-index: 10;
    pointer-events: none;
}

/* Tenant logo — hidden until branding provides one. */
.brand-logo {
    position: fixed;
    left: 28px;
    bottom: 24px;
    max-height: 56px;
    max-width: 220px;
    height: auto;
    width: auto;
    object-fit: contain;
    opacity: 0.9;
    z-index: 20;
    pointer-events: none;
}

/* Stale / offline status chip. Hidden while live. */
.status-chip {
    position: fixed;
    top: 20px;
    right: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--chip-bg);
    color: var(--chip-ink);
    font-size: 15px;
    letter-spacing: 0.2px;
    border: 1px solid var(--border);
    z-index: 30;
    pointer-events: none;
}

.status-chip[hidden] {
    display: none;
}

.status-chip::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e0a100; /* stale: amber */
}

.status-chip[data-state="offline"]::before {
    background: #d64545; /* offline: red */
}

.status-chip[data-state="not_provisioned"]::before {
    background: #d64545; /* not provisioned: red — needs operator action */
}

/* Small build/version label. */
.version-label {
    position: fixed;
    right: 12px;
    bottom: 10px;
    font-size: 11px;
    line-height: 1;
    color: var(--ink);
    opacity: 0.28;
    z-index: 20;
    pointer-events: none;
}

/* Degraded fallback for a screen with scripting disabled. */
.noscript {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    font-size: 20px;
    color: var(--ink);
}