/* Site theme: background, text and accent come from the default theme (Settings > Site > Identity),
   set on <html> by App.razor; the values here are only fallbacks. Menu and card backgrounds are
   derived from them; the selected menu entry uses the accent colour. */
:root {
    --bs-body-bg: #1a1a2e;
    --bs-body-color: #e0e0e0;
    --accent: #e87a2a;
    --sidebar-bg: color-mix(in srgb, var(--bs-body-bg) 92%, var(--bs-body-color) 8%);
    --card-bg: color-mix(in srgb, var(--bs-body-bg) 92%, var(--bs-body-color) 8%);
}

html, body {
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--bs-body-color);
    height: 100%;
    margin: 0;
}

/* The page background is on <html> and <body> stays transparent, so the watermark (body::before,
   z-index -1) is drawn between the background and the content */
html {
    background-color: var(--bs-body-bg);
}

body {
    background-color: transparent;
}

.theme-scope {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.theme-editor-scope .page-card,
.theme-editor-scope .upload-drop-zone,
.theme-editor-scope .modal-content,
.theme-editor-scope .page-preview {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.theme-editor-scope .btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
}

/* Layout */
.page {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 250px;
    background-color: var(--sidebar-bg);
    border-right: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    /* Keep the sidebar (and the language flags at its bottom) visible while the page scrolls */
    position: sticky;
    top: 0;
    height: 100vh;
}

/* Language flags (bottom of the sidebar, login page) */
.sidebar .sidebar-footer {
    padding: 0.75rem 1.2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.language-flags {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.language-flag {
    display: inline-flex;
    border-radius: 0.2rem;
    outline: 2px solid transparent;
    outline-offset: 2px;
    opacity: 0.55;
    transition: opacity 0.15s, outline-color 0.15s;
}

.language-flag img {
    width: 1.33rem;
    height: 0.89rem;
    object-fit: cover;
    border-radius: 0.2rem;
    display: block;
}

.language-flag:hover,
.language-flag:focus-visible {
    opacity: 1;
}

.language-flag.active {
    opacity: 1;
    outline-color: var(--accent);
}

.sidebar .brand {
    padding: 1rem 1.2rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-decoration: none;
    display: block;
}

.sidebar .nav-scrollable {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.sidebar .nav-item {
    padding: 0 0.5rem;
}

.sidebar .nav-link {
    color: #b0b0b0;
    padding: 0.6rem 1rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.15s;
}

.sidebar .nav-link:hover {
    color: #fff;
    background-color: rgba(255,255,255,0.08);
}

.sidebar .nav-link.active {
    /* Selected entry: text and icon in the accent colour of the default theme, no background */
    color: var(--accent);
    background-color: transparent;
    font-weight: 600;
}

/* Sub-menu entries (Settings > TV / Site / Users / Information) */
.sidebar .nav-item.nav-sub {
    padding-left: 1.25rem;
}

.sidebar .nav-item.nav-sub .nav-link {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.sidebar .nav-section {
    padding: 0.8rem 1.2rem 0.3rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #666;
    font-weight: 600;
}

.sidebar .user-info {
    padding: 0.8rem 1.2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem;
    color: #888;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.top-row {
    background-color: var(--sidebar-bg);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 0.5rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    position: relative;
}

.top-row a {
    color: #b0b0b0;
    text-decoration: none;
    font-size: 0.875rem;
}

.top-row a:hover {
    color: #fff;
}

.content {
    padding: 1.5rem;
    flex: 1;
}

/* Cards */
.card {
    background-color: var(--card-bg);
    border: 1px solid rgba(255,255,255,0.1);
}

.card-header {
    background-color: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Tables */
.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255,255,255,0.03);
    --bs-table-hover-bg: rgba(255,255,255,0.06);
    color: var(--bs-body-color);
}

/* Form controls dark */
.form-control, .form-select {
    background-color: rgba(0,0,0,0.3);
    border-color: rgba(255,255,255,0.15);
    color: var(--bs-body-color);
}

.form-control:focus, .form-select:focus {
    background-color: rgba(0,0,0,0.4);
    border-color: var(--accent);
    color: var(--bs-body-color);
    box-shadow: 0 0 0 0.2rem rgba(232,122,42,0.35);
}

/* Buttons */
.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
}

.btn-primary:hover {
    background-color: color-mix(in srgb, var(--accent) 85%, black);
    border-color: color-mix(in srgb, var(--accent) 85%, black);
}

/* Badge styles */
.badge-html {
    background-color: #0f3460;
    color: #7ec8e3;
}

.badge-image {
    background-color: #2d4a22;
    color: #8fbc8f;
}

/* Modal dark */
.modal-content {
    background-color: var(--card-bg);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--bs-body-color);
}

/* HTML editor (Jodit, dark theme): follow the site theme colours */
.html-editor-host .jodit-container.jodit_theme_dark {
    --jd-color-background-default: var(--bs-body-bg);
    --jd-color-panel: var(--card-bg);
    --jd-color-background-light-gray: var(--card-bg);
    --jd-color-text: var(--bs-body-color);
    --jd-color-border: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.15);
}

.html-editor-host .jodit_theme_dark .jodit-wysiwyg {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* The editing area is the virtual TV screen (same rules as .tv-screen-content), shown at real size in a
   dark bezel (horizontal scrolling on narrow windows). html-editor.js centres the content vertically. */
.html-editor-host .jodit-container .jodit-workplace {
    background-color: #0b0b0d !important;  /* Jodit's dark theme paints it too */
    padding: 16px;
    overflow-x: auto;
}

.html-editor-host .jodit-container .jodit-workplace .jodit-wysiwyg {
    box-sizing: border-box;
    width: calc(var(--screen-w, 1280) * 1px);
    min-height: calc(var(--screen-h, 720) * 1px) !important;   /* Jodit sets min-height:100% inline */
    height: auto;
    margin: 0 auto;
    padding: 21px;
    overflow: visible;
    outline: 1px solid rgba(255,255,255,0.25);
}

/* Content that does not fit: dashed line at the bottom of the screen (what is below is reduced on the TV) */
.html-editor-host .jodit-container .jodit-workplace .jodit-wysiwyg.screen-overflow {
    background-image: linear-gradient(to right, rgba(255, 193, 7, 0.8) 50%, transparent 50%);
    background-size: 16px 2px;
    background-repeat: repeat-x;
    background-position: 0 calc(var(--screen-h, 720) * 1px - 2px);
}

.html-editor-host .jodit-wysiwyg table td,
.html-editor-host .jodit-wysiwyg table th {
    border-color: var(--tv-table-border);
}

.html-editor-screen-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    align-items: center;
    margin-top: 0.35rem;
    font-size: 0.875rem;
}

/* TV preview in the editor dialog: same frame format as the TV screen */
.html-editor-preview {
    background-color: #0b0b0d;
    padding: 16px;
}

.html-editor-preview > .tv-frame {
    width: min(100%, calc((100vh - 260px) * var(--screen-w, 1280) / var(--screen-h, 720)));
    aspect-ratio: var(--screen-w, 1280) / var(--screen-h, 720);
    margin: 0 auto;
    background-color: var(--bs-body-bg);
    outline: 1px solid rgba(255,255,255,0.25);
}

.html-editor-host .jodit_theme_dark .jodit-toolbar__box:not(:empty),
.html-editor-host .jodit_theme_dark .jodit-status-bar {
    background-color: var(--card-bg);
    border-color: rgba(255,255,255,0.15);
}

.html-editor-loading {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(255,255,255,0.2);
    border-radius: 0.375rem;
}

.modal-header {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.modal-footer {
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* Nav tabs */
.nav-tabs {
    border-bottom-color: rgba(255,255,255,0.15);
}

.nav-tabs .nav-link {
    color: #b0b0b0;
}

.nav-tabs .nav-link.active {
    background-color: var(--card-bg);
    border-color: rgba(255,255,255,0.15) rgba(255,255,255,0.15) var(--card-bg);
    color: #fff;
}

.nav-tabs .nav-link:hover {
    border-color: rgba(255,255,255,0.1);
    color: #fff;
}

/* Page card in editor */
.page-card {
    background-color: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.15s;
}

.page-card:hover {
    border-color: var(--accent);
}

.page-card .page-preview {
    width: calc(72px * var(--screen-w, 1280) / var(--screen-h, 720));   /* screen format */
    height: 72px;
    border-radius: 0.25rem;
    overflow: hidden;
    background-color: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #666;
    flex-shrink: 0;
}

/* Image pages only (direct child): images inside HTML content keep the size set in the editor */
.page-card .page-preview > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Page thumbnail: an exact miniature of the TV screen (see .tv-frame) */
.page-card .page-preview > .tv-frame {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Upload drop zone */
.upload-drop-zone {
    position: relative;
    border: 2px dashed rgba(255,255,255,0.2);
    border-radius: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    color: #888;
    margin-bottom: 1rem;
    transition: all 0.2s;
    cursor: pointer;
}

.upload-drop-zone:hover,
.upload-drop-zone.drag-over {
    border-color: var(--accent);
    background-color: rgba(233,69,96,0.05);
    color: #ccc;
}

.upload-drop-zone-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* Settings > TV logo: 3 x 3 position grid and a small TV with the page area, a sample page and the logo */
.tv-logo-position-grid {
    display: grid;
    grid-template-columns: repeat(3, 2.25rem);
    gap: 0.25rem;
}

.tv-settings-preview {
    position: relative;
    width: 100%;
    max-width: 26rem;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--bs-body-bg);
    border: 6px solid #0b0b0d;
    border-radius: 0.375rem;
    outline: 1px solid rgba(255,255,255,0.2);
}

.tv-settings-preview .tv-settings-preview-page {
    position: absolute;
    inset: 0;
}

.tv-settings-preview .tv-logo-area {
    position: absolute;
    inset: var(--tv-logo-margin, 0%);
}

.tv-settings-preview .tv-settings-preview-page {
    z-index: 1;
    pointer-events: none;
}

/* Shows where the page is: what is drawn on the TV screen */
.tv-settings-preview .tv-screen {
    background-color: color-mix(in srgb, var(--accent) 12%, transparent);
    outline: 3px dashed color-mix(in srgb, var(--accent) 70%, transparent);
    outline-offset: -3px;
}

/* Settings sections (SettingsCard): the title opens / closes the section */
.settings-section-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.settings-section-toggle:hover {
    color: var(--accent);
}

.settings-section-toggle:focus-visible,
.settings-extra-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.settings-chevron {
    transition: transform 0.2s;
    font-size: 0.9em;
}

.settings-chevron.open {
    transform: rotate(180deg);
}

/* A closed section has no body: no border under its title */
.settings-section .card-header:last-child {
    border-bottom: 0;
}

/* Opener of the additional configuration, at the bottom of the section */
.settings-extra {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.settings-extra-body {
    margin-top: 1rem;
}

/* Settings > Site > Identity: logo preview */
.identity-logo-preview {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: contain;
    padding: 0.35rem;
    border-radius: 0.375rem;
    background-color: var(--bs-body-bg);
    border: 1px solid rgba(255,255,255,0.15);
}

/* Colour swatches (Settings > Theme) */
.theme-swatch {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(255,255,255,0.3);
}

/* Fullscreen player */
.player-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    z-index: 9999;
    overflow: hidden;
}

/* Faint logo watermark of the website: fixed opacity (15 %), behind the content, so it only shows
   where there is no opaque background (cards, side menu). See the html / body rules above. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--site-logo, url('/identity/logo')) center / min(50vw, 50vh) no-repeat;
    opacity: 0.15;
    pointer-events: none;
    z-index: -1;
}

/* /tv: the pages always use the whole screen */
.player-page {
    position: absolute;
    inset: 0;
}

/* The logo is placed inside the screen minus its margin (Settings > TV logo: --tv-logo-margin is a % of
   the width for left / right and of the height for top / bottom); the margin never changes the pages */
.tv-logo-area {
    position: absolute;
    inset: var(--tv-logo-margin, 0%);
}

/* /tv logo (Settings > TV logo): --tv-logo-scale of the largest logo that fits in the page (the screen
   format rectangle inside the logo area, like the scaled HTML pages), at one of 9 positions, behind (z 0)
   or in front of (z 2) the pages */
.tv-logo-area {
    z-index: var(--tv-logo-z, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    container-type: size;
}

.tv-logo-box {
    width: 100%;     /* browsers without container units: the whole page area */
    height: 100%;
    display: flex;
    justify-content: var(--tv-logo-x, center);
    align-items: var(--tv-logo-y, center);
}

@supports (width: 1cqw) {
    .tv-logo-box {
        width: min(100cqw, calc(100cqh * var(--screen-w, 1280) / var(--screen-h, 720)));
        height: auto;
        aspect-ratio: var(--screen-w, 1280) / var(--screen-h, 720);
    }
}

.tv-logo-box > img {
    width: var(--tv-logo-scale, 50%);
    height: var(--tv-logo-scale, 50%);
    object-fit: contain;
    object-position: var(--tv-logo-object-position, center center);
    opacity: var(--tv-logo-opacity, 0.2);
}

.player-page {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.player-page.active {
    opacity: 1;
}

/* Image pages only (direct child): images inside HTML content keep the size set in the editor */
.player-page > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.player-page > .tv-frame {
    width: 100%;
    height: 100%;
}

/* ===== Virtual TV screen =====================================================================
   Every HTML page is laid out on a fixed screen (--screen-w x --screen-h, 720 px high: format chosen
   in Settings, set on <html> by App.razor), then that whole screen is scaled
   to the real one (letterbox) by signage.fitScreens(): the layout is the same in the editor, the
   thumbnails and on /tv, whatever the size of the TV. The editor's editing area uses the same rules
   (.html-editor-host .jodit-wysiwyg below): keep both in sync. */
.tv-frame {
    position: relative;
    overflow: hidden;
}

.tv-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--screen-w, 1280) * 1px);
    height: calc(var(--screen-h, 720) * 1px);
    overflow: hidden;
    transform-origin: 0 0;
    /* JS sets transform: translate(...) scale(...) */
}

.tv-screen-content {
    position: absolute;   /* JS sets width, translate (centering) and scale (overflow / zoom to fit) */
    top: 0;
    left: 0;
    transform-origin: 0 0;
}

.tv-screen-content,
.html-editor-host .jodit-wysiwyg {
    color: var(--bs-body-color);
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
}

/* Fixed sizes: Bootstrap's heading sizes depend on the browser width (vw), not on the screen */
.tv-screen-content h1, .html-editor-host .jodit-wysiwyg h1 { font-size: 40px; }
.tv-screen-content h2, .html-editor-host .jodit-wysiwyg h2 { font-size: 32px; }
.tv-screen-content h3, .html-editor-host .jodit-wysiwyg h3 { font-size: 28px; }
.tv-screen-content h4, .html-editor-host .jodit-wysiwyg h4 { font-size: 24px; }
.tv-screen-content h5, .html-editor-host .jodit-wysiwyg h5 { font-size: 20px; }
.tv-screen-content h6, .html-editor-host .jodit-wysiwyg h6 { font-size: 16px; }

/* Outer margins would shift the vertical centring */
.tv-screen-content > :first-child,
.html-editor-host .jodit-wysiwyg > :first-child { margin-top: 0; }
.tv-screen-content > :last-child,
.html-editor-host .jodit-wysiwyg > :last-child { margin-bottom: 0; }

/* Same table and image defaults as the editor (Jodit's editing styles) */
.tv-screen-content img { max-width: 100%; }
.tv-screen-content table {
    border-collapse: collapse;
    empty-cells: show;
    margin-top: 1em;
    margin-bottom: 1em;
    max-width: 100%;
}
.tv-screen-content table td,
.tv-screen-content table th {
    border: 1px solid var(--tv-table-border);
    min-width: 2em;
    padding: .4em;
    vertical-align: middle;
}
.tv-screen-content > table:first-child { margin-top: 0; }
.tv-screen-content > table:last-child { margin-bottom: 0; }

:root { --tv-table-border: rgba(255,255,255,0.15); }

.player-controls {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s;
    display: flex;
    align-items: center;
}

.player-container:hover .player-controls {
    opacity: 1;
}

/* Screensaver overlay */
.screensaver-overlay {
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: #000;
}

.screensaver-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.screensaver-dismiss-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: default;
}

/* Validation */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid var(--accent);
}

.validation-message {
    color: var(--accent);
}

/* Blazor error boundary */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Responsive sidebar toggle */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        z-index: 1000;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.3s;
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 999;
        background: rgba(0,0,0,0.5);
    }

    .sidebar-toggle {
        font-size: 1.25rem;
        line-height: 1;
    }
}

#blazor-error-ui {
    background: #b32121;
    padding: 0.5rem 1rem;
    color: white;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 10001;
    display: none;
}