/* Tenant-aware chrome + platform-admin form helpers.
   Separate from thinklab.css to minimise regression risk on event day. */

/* --- Tenant chrome: org + event logos rendered in a slim top bar --- */
.tl-tenant-chrome {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 0.6rem 1rem;
    /* Wired through --tl-chrome-bg from _Layout.cshtml so per-org/event
       overrides can flip the bar to white/light without editing CSS. */
    background: var(--tl-chrome-bg, #ffffff);
    /* No border-bottom — the colour contrast between a light chrome and the
       dark station body was drawing a visible hairline, and against a dark
       chrome (event override) a light 8%-opaque line was still catching the
       eye. The colour-change alone is visual separation enough. */
    flex-shrink: 0;
}

/* When the tenant chrome bar is rendered on top, .tl-display's min-height:100vh
   would push its bottom past the viewport — its absolute-positioned footer
   (QR + ThinkLab text) lands BELOW the visible area and gets clipped by the
   container's overflow:hidden.
   Fix: make the body a flex-column and let .tl-display fill the remaining
   height instead of declaring 100vh for itself. Chrome-less pages (legacy
   /station, /showroom, /, /display) are untouched — no .has-tenant-chrome
   class means default block layout stays active. */
body.has-tenant-chrome {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}
body.has-tenant-chrome .tl-display {
    flex: 1 1 0;      /* take remaining vertical space */
    min-height: 0;    /* allow shrinking below the default min-content height */
}

.tl-tenant-chrome-logo {
    height: 40px;
    max-width: 220px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

@media (max-width: 600px) {
    .tl-tenant-chrome-logo {
        height: 30px;
        max-width: 140px;
    }
}

/* Floating "Mein Bereich" link — formerly an inline-style block on _Layout.
   Pulled into the stylesheet so the offset-when-chrome-present case (avoid
   overlapping a wide event logo) reads cleanly and the styling is reusable. */
.tl-my-area-link {
    position: fixed;
    right: 0.75rem;
    z-index: 1050;
    padding: 0.4rem 0.75rem;
    background: rgba(26, 39, 68, 0.85);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.85rem;
    border: 1px solid rgba(184, 145, 58, 0.5);
}

.tl-my-area-link:hover {
    color: #fff;
    background: rgba(26, 39, 68, 0.95);
    text-decoration: none;
}

/* --- Primary-colour accent wiring (keep narrow: only the obvious places) --- */
.tl-btn-primary {
    background: var(--tl-primary, #b8913a);
    border-color: var(--tl-primary, #b8913a);
}

.tl-btn-primary:hover {
    filter: brightness(1.1);
}

/* --- Platform-admin form layout --- */
.tl-form {
    background: rgba(0, 0, 0, 0.3);
    padding: 1.25rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.tl-form label {
    color: #d4c28a;
    font-weight: 500;
}

.tl-form-section {
    background: rgba(0, 0, 0, 0.2);
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.tl-form-section h3 {
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
    color: #d4c28a;
}

/* ============================================================================
   PHASE 5a post-deploy CSS fixes
   Kept separate from thinklab.css so regression risk on the main stylesheet
   (3400+ lines) stays low. Each block carries a WHY comment.
   ============================================================================ */

/* ---- Fix 1: Showroom grid on mobile -------------------------------------
   Root cause: .tl-showroom-grid uses repeat(auto-fill, minmax(240px,1fr)),
   and .tl-showroom-spotlight spans 2 columns × 2 rows. On viewports where
   only one 240px column fits, the spotlight forces an implicit second track,
   making the grid wider than the container → the "second column" of every
   row renders partially off-screen. Lock to 2 equal columns on mobile and
   drop the spotlight multi-span there, collapse to a single column below
   380px where two 1fr tracks are too cramped.
*/
@media (max-width: 640px) {
    .tl-showroom-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
    .tl-showroom-spotlight {
        grid-column: 1 / -1;   /* full-row width */
        grid-row: auto;        /* stop spanning 2 rows */
    }
    .tl-showroom-spotlight img {
        aspect-ratio: 16 / 10; /* wider on a full-bleed tile */
    }
}
@media (max-width: 380px) {
    .tl-showroom-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Fix 2 (refined): Thumbnails full-bleed, watermark always visible ---
   Earlier approach used object-fit: contain which produced letterbox bars
   on portrait watermarked images (~1024×1184) and looked un-premium.
   New approach: keep the 1/1 tile, object-fit: cover but anchor to BOTTOM.
     - Watermark-branded (portrait): bottom 240×240 window of the scaled image
       is visible → the logo frame stays, only ~13% of the sky/top is cropped.
     - Legacy square (1024×1024): exact fit, no cropping.
   Result: uniform grid, full-bleed tiles, watermark logos intact.
*/
.tl-showroom-card img,
.tl-showroom-spotlight img {
    object-fit: cover;
    object-position: center bottom;
    background: transparent;
}

/* ---- Fix 3 (refined): Display viewport — reserve footer zone -----------
   Root cause on 1920×980 (laptop on TV with Chrome-taskbar): my earlier
   tight-landscape query only hit 901–1600px, so at 1920 the default layout
   applied with padding 2rem, max-widths 65vw+35vw and max-height calc(100vh
   - 4rem). The image-stage then extended into the footer's y-range
   (position:absolute bottom:1.25rem, ~60px tall = y=900–960), overlapping
   the ThinkLab-Branding + Kontakt-QR. The image's transform:scale(1) creates
   a stacking context that can hide the absolute-positioned footer visually
   on some render paths.
   Fix: reserve a 110px vertical zone at the bottom of .tl-display-result so
   the image-stage can never reach into the footer's y-range; force the
   footer (and the conn-status dot) to a high z-index as a belt-and-braces
   guard.
*/
@media (min-aspect-ratio: 1/1) and (min-width: 901px) and (max-width: 1600px) {
    .tl-display-result {
        padding: 1rem 1rem 110px 1rem;
        gap: 1rem;
    }
    .tl-display-image-stage {
        max-width: 60vw;
        max-height: calc(100vh - 1rem - 110px);
    }
    .tl-display-side {
        max-width: 36vw;
        min-width: 240px;
        padding: 1.25rem;
    }
}

/* Wider landscape viewports (1601px+, typical 1920×1080 / 2560×1440 event
   TVs — also covers the 1920×980 laptop case). Reserve footer zone via
   padding-bottom; keep the original generous max-widths otherwise. */
@media (min-aspect-ratio: 1/1) and (min-width: 1601px) {
    .tl-display-result {
        padding-bottom: 110px;
    }
    .tl-display-image-stage {
        max-height: calc(100vh - 2rem - 110px);
    }
}

/* Footer chrome always on top — image's transform creates a stacking
   context, so without an explicit z-index the footer can be visually
   obscured even though it's later in DOM. */
.tl-display-footer-left,
.tl-conn-status,
.tl-slideshow-badge {
    z-index: 50;
}

/* Defensive: the footer-left is position:absolute inside an overflow:hidden
   container; cap its width so it can never extend past the viewport, and
   scale the QR with viewport width on small screens. */
.tl-display-footer-left {
    max-width: calc(100vw - 3rem);
    flex-wrap: nowrap;
}
.tl-display-footer-left .tl-brand-qr img {
    width: clamp(48px, 5vw, 80px);
    height: clamp(48px, 5vw, 80px);
}
.tl-display-footer-left .tl-brand-think,
.tl-display-footer-left .tl-brand-lab {
    font-size: clamp(1.1rem, 1.5vw, 1.6rem);
}