/* The office wall display (Pages/Jobs/WallDisplay.razor, docs/wall-display.md).
 *
 * Made for a TV across a room: dark (a lit white screen all day glares and burns in), the app's palette brightened
 * for a dark ground, and big type. Everything is sized in em from a font size that follows the screen's height, so
 * the board is laid out the same on a 720p, 1080p or 4K TV and always fits without scrolling. Each column is an
 * 11-row grid: a full tile takes two rows and a compact one one (WallBoard.ColumnBudget and WallBoard.Fit choose).
 */

.wall-layout {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #0B1220;
}

.wall {
    /* Ground, surfaces and ink: the app's slate ("Dark" #1F2A3C, ink #111C2E) for a dark screen. */
    --wall-bg: #0B1220;
    --wall-surface: #162033;
    --wall-surface-2: #1F2A3C;
    --wall-line: #2A3850;
    --wall-text: #F1F5F9;
    --wall-muted: #94A3B8;
    --wall-primary: #3B82F6;

    /* The stages: the app's status colours, lifted to read on the dark ground. */
    --wall-not-booked: #94A3B8;
    --wall-booked: #60A5FA;
    --wall-on-the-way: #38BDF8;
    --wall-on-site: #A78BFA;
    --wall-working: #FBBF24;
    --wall-finishing: #2DD4BF;
    --wall-done: #34D399;
    --wall-on-hold: #FB923C;
    --wall-abandoned: #F87171;
    --wall-cancelled: #64748B;

    /* 20px at 1080 lines high. */
    font-size: calc(100vh / 54);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--wall-text);
    background: var(--wall-bg);
    height: 100vh;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 0.8em;
    padding: 1em 1.2em 0.8em;
    box-sizing: border-box;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.wall *, .wall *::before, .wall *::after {
    box-sizing: border-box;
}

.wall.wall--idle, .wall.wall--idle * {
    cursor: none !important;
}

.wall-muted {
    color: var(--wall-muted);
}

/* ---- The header: the company and the day, who is on call while closed, the clock, and whether it is live. */

.wall-header {
    display: flex;
    align-items: center;
    gap: 1.2em;
    min-width: 0;
}

.wall-heading {
    min-width: 0;
    flex: 0 1 auto;
}

.wall-company {
    font-family: "Inter Tight", "Inter", sans-serif;
    font-size: 1.9em;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wall-date {
    font-size: 1.1em;
    color: var(--wall-muted);
    white-space: nowrap;
}

.wall-oncall {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 0.6em;
    justify-content: flex-end;
    flex-wrap: wrap;
    max-height: 4.6em;
    overflow: hidden;
}

.wall-oncall-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.45em 0.9em;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.18);
    border: 1px solid rgba(96, 165, 250, 0.55);
    font-size: 0.95em;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wall-oncall-chip--gap {
    background: rgba(220, 38, 38, 0.22);
    border-color: var(--wall-abandoned);
}

.wall-oncall-icon.mud-icon-root {
    font-size: 1.2em;
}

.wall-controls {
    display: flex;
    align-items: center;
    gap: 0.4em;
    transition: opacity 0.3s;
}

/* Nobody is at the TV: the buttons fade with the pointer, and the board keeps its room. Not while one has the keyboard's
   focus, or someone tabbing to them couldn't see where they are. */
.wall--idle .wall-controls {
    opacity: 0;
}

.wall--idle .wall-controls:focus-within {
    opacity: 1;
}

.wall-control {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.4em 0.7em;
    border-radius: 0.5em;
    border: 1px solid var(--wall-line);
    background: var(--wall-surface);
    color: var(--wall-text);
    font: inherit;
    font-size: 0.85em;
    cursor: pointer;
    text-decoration: none;
}

.wall-control:hover, .wall-control:focus-visible {
    border-color: var(--wall-primary);
    color: var(--wall-text);
}

.wall-clock {
    font-family: "Inter Tight", "Inter", sans-serif;
    font-size: 3em;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

.wall-live {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-size: 0.95em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.wall-live-dot {
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background: currentColor;
}

.wall-live--on {
    color: var(--wall-done);
}

.wall-live--off {
    color: var(--wall-working);
}

/* ---- The totals. */

.wall-counts {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.8em;
}

.wall-count {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.55em 1em 0.6em;
    border-radius: 0.8em;
    background: var(--wall-surface);
    border: 1px solid var(--wall-line);
    border-top: 0.3em solid var(--wall-line);
    min-width: 0;
}

.wall-count-value {
    font-family: "Inter Tight", "Inter", sans-serif;
    font-size: 2.7em;
    font-weight: 700;
    line-height: 1;
}

.wall-count-label {
    margin-top: 0.25em;
    font-size: 0.95em;
    font-weight: 600;
    color: var(--wall-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wall-count--progress { border-top-color: var(--wall-working); }
.wall-count--done { border-top-color: var(--wall-done); }
.wall-count--alert { border-top-color: var(--wall-abandoned); background: rgba(220, 38, 38, 0.16); }
.wall-count--alert .wall-count-value { color: #FCA5A5; }
.wall-count--warn { border-top-color: var(--wall-on-hold); background: rgba(234, 88, 12, 0.14); }
.wall-count--warn .wall-count-value { color: #FDBA74; }

/* ---- The columns: one per fitter, and the unallocated jobs. */

.wall-lanes {
    display: grid;
    grid-template-columns: repeat(var(--wall-columns, 1), minmax(0, 28em));
    justify-content: center;
    gap: 0.8em;
    min-height: 0;
}

.wall-lane {
    container: wall-lane / inline-size;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    min-width: 0;
    border-radius: 0.8em;
    background: var(--wall-surface);
    border: 1px solid var(--wall-line);
    overflow: hidden;
}

.wall-lane-header {
    padding: 0.6em 0.8em 0.55em;
    border-bottom: 1px solid var(--wall-line);
    background: var(--wall-surface-2);
    min-width: 0;
}

.wall-lane-name {
    font-size: 1.3em;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wall-lane-sub {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-top: 0.15em;
    font-size: 0.9em;
    color: var(--wall-muted);
    white-space: nowrap;
    overflow: hidden;
}

.wall-lane--unallocated {
    border-color: rgba(248, 113, 113, 0.6);
}

.wall-lane--unallocated .wall-lane-header {
    background: rgba(220, 38, 38, 0.22);
}

.wall-lane--absent .wall-lane-header {
    background: #1A2232;
}

.wall-absence-badge {
    padding: 0.05em 0.5em;
    border-radius: 0.35em;
    background: #334155;
    color: var(--wall-text);
    font-weight: 700;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wall-lane-body {
    display: grid;
    grid-template-rows: repeat(11, minmax(0, 1fr));
    gap: 0.4em;
    padding: 0.5em;
    min-height: 0;
    overflow: hidden;
}

.wall-empty, .wall-absent-fill {
    grid-row: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6em;
    color: var(--wall-muted);
    font-size: 1.1em;
    text-align: center;
}

/* Off all day: the column filled, as the old diary did. */
.wall-absent-fill {
    font-size: 1.8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #CBD5E1;
    background: repeating-linear-gradient(135deg, #1A2232 0, #1A2232 0.9em, #202A3D 0.9em, #202A3D 1.8em);
}

/* ---- The tiles. */

.wall-tile {
    --stage: var(--wall-booked);
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2em;
    min-height: 0;
    min-width: 0;
    padding: 0.4em 0.65em 0.4em 0.8em;
    border-radius: 0.6em;
    background: var(--wall-surface-2);
    border-left: 0.45em solid var(--stage);
    overflow: hidden;
}

/* One line, from the left: when the column is narrow the postcode gives way first, then the stage's name is cut short;
   the time and the plate never are. (Centred, as a full tile's lines are, the overflow ate the time from the left.) */
.wall-tile--compact {
    grid-row: span 1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3em;
    padding: 0.15em 0.5em 0.15em 0.6em;
}

/* The job the fitter is on now, or the next one: ringed in its own colour. */
.wall-tile--current {
    box-shadow: 0 0 0 0.15em var(--stage), 0 0 1.2em -0.2em var(--stage);
    background: #243149;
}

.wall-stage--done {
    opacity: 0.55;
}

.wall-stage--not-booked { --stage: var(--wall-not-booked); }
.wall-stage--booked { --stage: var(--wall-booked); }
.wall-stage--on-the-way { --stage: var(--wall-on-the-way); }
.wall-stage--on-site { --stage: var(--wall-on-site); }
.wall-stage--working { --stage: var(--wall-working); }
.wall-stage--finishing { --stage: var(--wall-finishing); }
.wall-stage--done { --stage: var(--wall-done); }
.wall-stage--on-hold { --stage: var(--wall-on-hold); }
.wall-stage--abandoned { --stage: var(--wall-abandoned); }
.wall-stage--cancelled { --stage: var(--wall-cancelled); }

.wall-tile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    min-width: 0;
}

.wall-tile-time {
    flex: none;
    font-family: "Inter Tight", "Inter", sans-serif;
    font-size: 1.45em;
    font-weight: 700;
    line-height: 1.05;
}

/* Compact tiles are the later and the finished jobs: a little smaller, so time, plate and stage share one line. */
.wall-tile--compact .wall-tile-time {
    font-size: 1.05em;
}

.wall-tile--compact .wall-stage {
    font-size: 0.75em;
    padding: 0.1em 0.4em;
}

/* The stage's name, always written: the colour helps, but is never the only way to tell. In a column too narrow for
   it beside the time, it is cut short rather than pushing the time out. */
.wall-stage {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: auto;
    padding: 0.12em 0.45em;
    border-radius: 0.35em;
    background: var(--stage);
    color: #0B1220;
    font-size: 0.82em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.wall-tile-vehicle {
    display: flex;
    align-items: center;
    gap: 0.5em;
    min-width: 0;
}

/* A UK rear plate, as on the schedule's cards. */
.wall-plate {
    flex: none;
    padding: 0.02em 0.35em;
    border-radius: 0.2em;
    border: 1px solid rgba(0, 0, 0, 0.6);
    background: #FFD500;
    color: #111;
    font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    font-size: 1.15em;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.wall-tile--compact .wall-plate {
    font-size: 0.85em;
}

.wall-tile-aside, .wall-tile-line {
    min-width: 0;
    font-size: 0.95em;
    color: #CBD5E1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wall-tile-aside {
    color: var(--wall-muted);
}

.wall-tile-postcode {
    margin-right: 0.45em;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--wall-text);
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.wall-tile--compact .wall-tile-postcode {
    font-size: 0.95em;
}

/* In a compact tile the postcode gives way: cut short, and gone altogether rather than squeezing the stage. */
/* A compact tile has room for the postcode only in a wide column (a branch's board with a few fitters): beside the
   time, the plate and the stage it pushed the stage's name out in a column of six. Without container queries (an old
   TV browser) it simply isn't shown there. */
.wall-tile-postcode--squeeze {
    display: none;
    min-width: 0;
    margin-right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

@container wall-lane (min-width: 21em) {
    .wall-tile-postcode--squeeze {
        display: inline;
    }
}

.wall-summary {
    grid-row: span 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6em;
    border: 1px dashed var(--wall-line);
    color: var(--wall-muted);
    font-size: 1em;
    font-weight: 700;
}

.wall-summary--done {
    color: var(--wall-done);
    border-color: rgba(52, 211, 153, 0.45);
}

.wall-message {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6em;
    color: var(--wall-muted);
}

.wall-message--error {
    color: #FCA5A5;
}

/* ---- The footer: who is off, the page of fitters, and how fresh the board is. */

.wall-footer {
    display: flex;
    align-items: center;
    gap: 1.2em;
    min-width: 0;
    font-size: 1em;
}

.wall-off {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wall-off-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wall-muted);
}

.wall-off-person {
    font-weight: 600;
}

.wall-pages {
    display: flex;
    gap: 0.4em;
}

.wall-page-dot {
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background: var(--wall-line);
}

.wall-page-dot--on {
    background: var(--wall-text);
}

.wall-updated {
    color: var(--wall-muted);
    white-space: nowrap;
}

.wall-updated--stale {
    color: var(--wall-working);
    font-weight: 700;
}

/* The branch menu is MudBlazor's, drawn in the popover layer above the board. */
.wall-branch-menu .mud-menu-activator {
    display: inline-flex;
}