/* The masjid display (Pages/Display), drawn like the Flutter app's DisplayScreen. Everything is designed at 1280×720
   (TV, landscape) and 420×860 (phone, portrait) and scaled to fit, as Flutter does:
   --u  one design pixel of the prayer-times area (container query units of .pt-display-stage), and
   --v  one design pixel of the whole screen (the bar above a slide and the news bar).
   Colors are the masjid's own (--pt-* scoped on .pt-display): its main colour, light from Sunrise to Maghrib. */

.pt-display {
    --v: min(calc(100vw / 1280), calc(100vh / 720));
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--pt-background);
    color: var(--pt-text);
    font-family: var(--pt-font);
    line-height: 1.2;
    outline: none;
    transition: background-color 2s, color 2s;
}

@media (max-aspect-ratio: 11/10) {
    .pt-display {
        --v: min(calc(100vw / 420), calc(100vh / 860));
    }
}

/* The admin's Preview: the same screen inside a 16:9 frame on the page (Pages/Admin/Preview.razor), scaled to the frame
   rather than the window. */
.pt-preview-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--pt-radius-md);
    container-type: size;
}

.pt-display.is-embedded {
    --v: min(calc(100cqw / 1280), calc(100cqh / 720));
    position: absolute;
}

.pt-display-message.is-embedded {
    position: absolute;
    inset: 0;
    min-height: 0;
    background: var(--pt-card);
}

.pt-display-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    container-type: size;
}

.pt-display-layer {
    position: absolute;
    inset: 0;
    animation: pt-fade var(--pt-motion-display, 600ms) ease-in-out;
}

@keyframes pt-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pt-display-message {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pt-space-6);
}

/* ── Two-line texts (DualText) ─────────────────────────────────────────────── */

.pt-dual {
    display: inline-flex;
    flex-direction: column;
    max-width: 100%;
}

.pt-dual-main,
.pt-dual-second {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-dual-second {
    font-size: calc(1em * var(--dual-scale, 0.55));
    font-weight: 400;
    color: var(--dual-color, var(--pt-muted));
}

/* An element that shrinks its content to fit (js/pt.js fitAll). */
[data-fit] {
    overflow: hidden;
    min-width: 0;
}

[data-fit] > * {
    display: inline-block;
    white-space: nowrap;
}

/* ── The prayer times ──────────────────────────────────────────────────────── */

.pt-times {
    --u: min(calc(100cqw / 1280), calc(100cqh / 720));
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: calc(40 * var(--u));
}

/* Header, landscape: [logo] name / Gregorian date ……… clock / Hijri date [settings]. */
.pt-display-header {
    display: flex;
    align-items: flex-start;
}

.pt-avatar.mud-avatar {
    flex: none;
    width: calc(56 * var(--u));
    height: calc(56 * var(--u));
    margin-inline-end: calc(16 * var(--u));
    background: var(--pt-accent);
    color: var(--pt-on-accent);
}

.pt-avatar img {
    width: 100%;
    height: 100%;
}

.pt-avatar .mud-icon-root {
    width: calc(30 * var(--u));
    height: calc(30 * var(--u));
}

.pt-head-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(4 * var(--u));
}

.pt-display-name {
    font-size: calc(28 * var(--u));
    font-weight: 600;
}

.pt-display-gregorian,
.pt-display-hijri {
    font-size: calc(18 * var(--u));
}

.pt-head-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(4 * var(--u));
}

.pt-display-clock {
    font-size: calc(64 * var(--u));
    line-height: 1;
    font-weight: 600;
}

.pt-display-settings.mud-icon-button {
    flex: none;
    padding: calc(8 * var(--u));
    color: var(--pt-muted);
}

.pt-display-settings .mud-icon-root {
    width: calc(22 * var(--u));
    height: calc(22 * var(--u));
}

/* Center: the one thing the screen says now. */
.pt-display-center {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(12 * var(--u)) 0;
}

.pt-center-state {
    flex: none;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: calc(12 * var(--u));
    animation: pt-fade var(--pt-motion-display, 600ms) ease-in-out;
}

.pt-center-label {
    font-size: calc(24 * var(--u));
    color: var(--pt-muted);
}

.pt-center-headline {
    font-size: calc(72 * var(--u));
    line-height: 1.15;
    font-weight: 600;
    color: var(--pt-accent);
}

/* Cards, landscape: a row of six. */
.pt-cards {
    display: flex;
}

.pt-card-frame {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 calc(6 * var(--u));
    padding: calc(14 * var(--u));
    border: calc(2 * var(--u)) solid transparent;
    border-radius: calc(16 * var(--u));
    background: var(--pt-card);
    transition: background-color var(--pt-motion-display, 600ms), border-color var(--pt-motion-display, 600ms);
}

.pt-card-frame.is-highlighted {
    background: var(--pt-accent-surface);
    border-color: var(--pt-accent);
}

.pt-card-name {
    font-size: calc(22 * var(--u));
    font-weight: 500;
}

.pt-card-time {
    margin-top: calc(10 * var(--u));
    font-size: calc(40 * var(--u));
    font-weight: 600;
}

.pt-card-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(44 * var(--u));
    font-size: calc(20 * var(--u));
    color: var(--pt-accent);
}

/* Portrait (phone): the header in two rows, the prayers as a list. */
@container (max-aspect-ratio: 11/10) {
    .pt-times {
        --u: min(calc(100cqw / 420), calc(100cqh / 860));
        padding: calc(20 * var(--u));
    }

    .pt-display-header {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "avatar name settings"
            "gregorian gregorian clock"
            "hijri hijri clock";
        align-items: center;
    }

    .pt-head-main,
    .pt-head-side {
        display: contents;
    }

    .pt-avatar.mud-avatar {
        grid-area: avatar;
        margin-inline-end: calc(12 * var(--u));
    }

    .pt-display-name {
        grid-area: name;
    }

    .pt-display-settings {
        grid-area: settings;
    }

    .pt-display-gregorian {
        grid-area: gregorian;
        margin-top: calc(12 * var(--u));
    }

    .pt-display-hijri {
        grid-area: hijri;
        margin-top: calc(4 * var(--u));
        align-items: flex-start !important;
        text-align: start !important;
    }

    .pt-display-clock {
        grid-area: clock;
        align-self: end;
        margin-top: calc(12 * var(--u));
        font-size: calc(52 * var(--u));
    }

    .pt-cards {
        flex-direction: column;
        gap: calc(6 * var(--u));
    }

    .pt-card-frame {
        flex: none;
        flex-direction: row;
        margin: 0;
        padding: calc(8 * var(--u)) calc(14 * var(--u));
    }

    .pt-card-name {
        flex: 1;
        min-width: 0;
        font-size: calc(20 * var(--u));
        align-items: flex-start !important;
        text-align: start !important;
    }

    .pt-card-footer {
        order: 2;
        width: calc(90 * var(--u));
        height: auto;
        font-size: calc(16 * var(--u));
    }

    .pt-card-time {
        order: 3;
        width: calc(84 * var(--u));
        margin-top: 0;
        font-size: calc(28 * var(--u));
        text-align: end;
    }
}

/* ── Slides, and the status bar above them ─────────────────────────────────── */

.pt-slide-layer {
    display: flex;
    flex-direction: column;
    background: var(--pt-background);
}

.pt-slide-area {
    position: relative;
    flex: 1;
    min-height: 0;
    container-type: size;
}

.pt-slide {
    position: absolute;
    inset: 0;
}

.pt-slide-media {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
}

.pt-slide-media img,
.pt-slide-media video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* A text slide: sized from the slide's shortest side, the second-language text small underneath. */
.pt-slide-text {
    --s: min(100cqw, 100cqh);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--s) * 0.08);
}

.pt-slide-text > .pt-slide-text-content {
    max-width: 84cqw;
    white-space: normal;
    text-align: center;
}

.pt-slide-text-main,
.pt-slide-text-second {
    margin: 0;
    line-height: 1.3;
    white-space: pre-line;
}

.pt-slide-text-main {
    font-size: calc(var(--s) * 0.075);
    color: #FFFFFF;
}

.pt-slide-text-second {
    margin-top: calc(var(--s) * 0.04);
    font-size: calc(var(--s) * 0.042);
    color: rgba(255, 255, 255, 0.6);
}

/* The bar above a slide: [logo] name ……… what the screen says now ……… clock, on the masjid's own background. */
.pt-slide-bar {
    flex: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: calc(24 * var(--v));
    padding: calc(14 * var(--v)) calc(32 * var(--v));
    border-bottom: calc(3 * var(--v)) solid var(--pt-accent);
    background: var(--pt-background);
    --u: var(--v);
}

.pt-slide-bar-side {
    min-width: 0;
    display: flex;
    align-items: center;
}

.pt-slide-bar-side.is-end {
    justify-content: flex-end;
}

.pt-slide-bar-name {
    font-size: calc(24 * var(--v));
    font-weight: 600;
}

.pt-slide-bar-clock {
    font-size: calc(44 * var(--v));
    line-height: 1;
    font-weight: 600;
}

.pt-slide-bar .pt-center-state {
    gap: calc(4 * var(--v));
}

.pt-slide-bar .pt-center-label {
    font-size: calc(18 * var(--v));
}

.pt-slide-bar .pt-center-headline {
    font-size: calc(40 * var(--v));
}

/* Portrait: the status over the full width, the clock beside it; the name is on the prayer times. */
@media (max-aspect-ratio: 11/10) {
    .pt-slide-bar {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: calc(12 * var(--v)) calc(16 * var(--v));
    }

    .pt-slide-bar-side:not(.is-end) {
        display: none;
    }

    .pt-slide-bar-clock {
        font-size: calc(32 * var(--v));
    }

    .pt-slide-bar .pt-center-headline {
        font-size: calc(30 * var(--v));
    }
}

/* ── News bar ──────────────────────────────────────────────────────────────── */

.pt-ticker {
    flex: none;
    display: flex;
    align-items: center;
    height: calc(48 * var(--v));
    overflow: hidden;
    background: var(--pt-accent);
    color: var(--pt-on-accent);
    font-size: calc(22 * var(--v));
    font-weight: 500;
    line-height: 1.2;
}

/* A slide gets the whole screen under its bar; the news bar keeps scrolling out of sight and is back with the times. */
.pt-display.has-slide .pt-ticker {
    display: none;
}

.pt-ticker-track {
    display: flex;
    width: max-content;
    white-space: pre;
    will-change: transform;
}

.pt-ticker-still {
    width: 100%;
    padding: 0 var(--pt-space-4);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}