/* DigitalSignage.css - Module-specific styles for Digital Signage content management */
/* Uses design tokens exclusively - no hardcoded values */

/* Hotel panels container */
.signage-hotels {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2) 0;
}

/* =============================================
   SLIDE GRID
   Horizontal thumbnail strip with numbering
   ============================================= */

.signage-slides {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.signage-slide-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.signage-slide-thumb {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-md);
    background: var(--bg-layer-4);
    width: 200px;
}

.signage-slide-thumb img {
    width: 100%;
    height: 112px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
}

.signage-slide-empty {
    width: 100%;
    height: 112px;
    background: var(--bg-layer-2);
    border-radius: var(--border-radius-sm);
}

.signage-slide-number {
    position: absolute;
    top: var(--space-1);
    left: var(--space-1);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-layer-1);
    border-radius: var(--border-radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    border: var(--border-width-1) solid var(--border-subtle);
}

.signage-slide-name {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: center;
    word-break: break-all;
}

/* =============================================
   SETTINGS
   ============================================= */

.signage-settings {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-2);
    border-top: var(--border-width-1) solid var(--border-subtle);
}

.signage-settings-title {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

.signage-settings-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
}

/* `display: grid` above outranks the browser's own [hidden] rule, so setting the
   attribute alone left the hidden behaviour block on screen -- a slideshow group went
   on offering a tablet's idle timer. Found by looking at the screen; a test asserting
   el.hidden passed happily, because the attribute WAS set. */
.signage-settings-fields[hidden] {
    display: none;
}

/* Save button alignment */
.signage-save {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--space-2);
}

/* Compact upload zone inside a display body */
.signage-display-body .file-upload-zone .upload-zone-label {
    padding: var(--space-3);
    min-height: auto;
}

/* =============================================
   ADD LOCATION MODAL
   ============================================= */

.signage-add-location-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.signage-form-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: 0;
}

/* =============================================
   TV PREVIEW OVERLAY
   ============================================= */

.signage-preview-overlay {
    position: fixed;
    inset: 0;
    background: var(--modal-backdrop);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.signage-preview-overlay.active {
    display: flex;
}

/* Close button - top right of viewport */
.signage-preview-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 1;
    background: none;
    border: none;
    padding: 0;
}

/* =============================================
   DEVICE FRAME
   Landscape bezel for a wall screen; portrait for a table tablet.
   Colours come from the platform device tokens -- there is one set of device
   chrome in this design system and this is it.
   ============================================= */

.signage-tv-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.signage-tv-screen {
    height: 80vh;
    max-height: 700px;
    aspect-ratio: 9 / 16;
    background: var(--bg-device-frame);
    border-radius: var(--border-radius-md);
    padding: var(--space-2);
    box-shadow:
        0 0 0 2px var(--bg-device-bezel),
        var(--shadow-device),
        inset 0 0 0 1px var(--bg-device-bezel);
    overflow: hidden;
}

/* A menu is read on a tablet held upright, at a table. */
.signage-tv-screen--tablet {
    aspect-ratio: 3 / 4;
}

.signage-tv-screen iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--border-radius-sm);
    background: var(--bg-device-screen);
}

/* Stand beneath the screen */
.signage-tv-stand {
    width: 120px;
    height: 24px;
    background: var(--bg-device-nav);
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
}

/* =============================================
   GROUPS (TLP-1021)
   ============================================= */

.signage-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2) 0;
}

.signage-group-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.signage-displays {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* The look this group applies, at a glance, so nobody opens the form to find out
   what a new display in it will inherit. */
.signage-brand {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    padding: var(--space-3);
    margin: 0;
    background: var(--bg-layer-3);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-md);
}

.signage-brand-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.signage-brand dt {
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.signage-brand dd {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.signage-brand-logo {
    max-height: 24px;
    max-width: 120px;
    object-fit: contain;
}

.signage-swatches {
    display: flex;
    gap: var(--space-1);
}

/* The one place a colour outside the token set is legitimate: it IS the operator's
   chosen colour, passed in as a custom property so nothing is hardcoded here. */
.signage-swatch {
    width: 16px;
    height: 16px;
    border-radius: var(--border-radius-sm);
    border: var(--border-width-1) solid var(--border-default);
    /* Fallback, not decoration: the property is set inline per swatch, so without
       one a group that has not chosen this colour resolves to nothing at all. */
    background: var(--signage-swatch, var(--bg-layer-2));
}

/* =============================================
   THE ADDRESS
   ============================================= */

.signage-address {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-layer-3);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-md);
}

.signage-address-label {
    flex: 0 0 auto;
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.signage-address-url {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    font-size: var(--text-xs);
    color: var(--text-primary);
    user-select: all;
}

.signage-address-actions {
    flex: 0 0 auto;
    display: flex;
    gap: var(--space-2);
}

.signage-display-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-3) 0;
}

/* =============================================
   GROUP FORM
   ============================================= */

.signage-group-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.signage-group-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    background: var(--bg-layer-3);
    border-radius: var(--border-radius-sm);
}

.signage-group-logo img {
    max-height: 48px;
    max-width: 160px;
    object-fit: contain;
}

.signage-group-form .file-upload-zone .upload-zone-label {
    padding: var(--space-3);
    min-height: auto;
}

/* The empty estate's action, centred under the message and given its own breathing
   room. Matches .registry-empty-action, .complaints-empty-action and
   .lost-found-empty-action, which solve the identical problem. */
.signage-empty-action {
    display: flex;
    justify-content: center;
    padding-top: var(--space-3);
}