/* ==========================================================================
   The room — the window wall and the walls, drawn around the floor plan.

   Loaded by both admin.html and booking.html, and shared on purpose: the admin
   places tables in this room and a customer books in it, so the two plans have to
   read the same. One definition here rather than a copy in each page's stylesheet,
   because a copy that drifted would put the window on a different side for the
   customer than for the person who arranged the tables.

   The room is fixed in the markup rather than stored anywhere: it is a fact about
   the café, not a preference. Nothing here is a control, and nothing is reserved —
   every cell of the plan is still placeable, and every table still draggable.

   The colours are local rather than the brand tokens. admin.css names them
   --primary/--text-light/--border while styles.css names them
   --primary-color/--text-light/--border-color, and admin.html does not load
   styles.css at all — so there is no token that exists on both pages.
   ========================================================================== */

.room-frame {
    /* The one size constant for the three pattern bands. Its own 1fr column
       absorbs whatever is left over. */
    --room-edge: 26px;
    /* The counter is taller than the other three because it holds a drawing, not
       a pattern — see .room-edge--bottom. The height is set by what the drawing
       needs: the till, a gap, then the label under it. */
    --room-edge-bottom: 112px;

    display: grid;
    grid-template-columns: var(--room-edge) minmax(0, 1fr) var(--room-edge);
    /* The middle row is `auto`, so it is whatever the plan already is and the frame
       takes its HEIGHT FROM the plan rather than dictating one to it — the bands
       stretch to match. That is what lets this work without knowing the row height,
       which it could not: the admin's rows are minmax(132px, auto) and the booking
       grid's are a value measured in JS per column width. Neither is a number to
       write down here. */
    grid-template-rows: var(--room-edge) auto var(--room-edge-bottom);
    gap: 0;                       /* the walls touch the room, as walls do */
}

/* The bands above and below span all three columns, and the ones at the sides tuck
   between them — so the room closes at the corners instead of leaving four notches. */
.room-edge--top    { grid-area: 1 / 1 / 2 / 4; }
.room-edge--bottom { grid-area: 3 / 1 / 4 / 4; }
.room-edge--left   { grid-area: 2 / 1; }
.room-edge--right  { grid-area: 2 / 3; }

.room-plan { grid-area: 2 / 2; }

/* Both grids are empty until their first fetch resolves, and a frame with nothing
   inside it collapses to two thin strips with the labels sliced off. One line, and
   it removes a flash of broken room on every single load. */
.room-plan:empty { min-height: 8rem; }

.room-edge {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Clipped rather than allowed out, so a long label can never escape the room. */
    overflow: hidden;
    font-size: 0.7rem;
    /* Pinned rather than inherited: the counter band sizes itself around the till
       plus this one line of type, and an inherited line-height would make that
       arithmetic depend on whichever page's stylesheet happened to be loaded. */
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--room-ink);
    background-color: var(--room-fill);

    /* Decoration, not a control. The drag decides where to drop with
       elementFromPoint over the plan, so anything that could be hit would sit
       between the pointer and the cell underneath it. This keeps the bands
       invisible to hit testing and to the tab order alike. */
    pointer-events: none;
}

/* The label sits on an opaque plate of the band's own fill colour.

   Each band is a pattern — glazing with a transom down the middle, brick coursing,
   a hatch behind the counter — and the pattern ran straight through the words.
   On the window wall the transom bisected "WINDOWS" lengthwise, and on the walls
   the courses crossed it, so the two labels a customer most needs to read were the
   two hardest to read. The plate interrupts the pattern for the length of the label
   and is cut from the same colour the pattern is drawn on, so nothing new is added
   to the drawing; the pattern simply stops, as it would for a real sign.

   Padding is written in logical properties because the side bands are
   `writing-mode: vertical-rl`: padding-inline follows the text run and padding-block
   crosses it, so one rule gives a long plate in all four bands without a second set
   of overrides for the vertical two. */
.room-edge-label {
    background: var(--room-fill);
    padding-block: 0.3em;
    padding-inline: 0.6em;
    border-radius: 2px;
}

/* The room's outside face. Drawn on all four so the plan is enclosed by one
   continuous line rather than four strips that happen to sit near each other. */
.room-edge--top    { border-top: 2px solid var(--room-outer); }
.room-edge--right  { border-right: 2px solid var(--room-outer); }
.room-edge--bottom { border-bottom: 2px solid var(--room-outer); }

/* ── The window wall (left) ───────────────────────────────────────────────── */

/* Drawn as glazing rather than tinted stripes: an outer and an inner frame line
   with a transom between them, divided into panes by mullions along the run. The
   frame runs the wall's full thickness, which is what makes it read as a window
   IN a wall rather than a blue band next to the plan. */
.room-edge--left {
    --room-fill:  #E4EFF8;
    --room-ink:   #2C5470;
    --room-outer: #7FA6C2;
    background-image:
        /* the transom, lengthwise down the middle of the wall */
        linear-gradient(to right,
            transparent calc(50% - 1px),
            rgba(44, 84, 112, 0.55) calc(50% - 1px) calc(50% + 1px),
            transparent calc(50% + 1px)),
        /* the mullions, across it */
        repeating-linear-gradient(to bottom,
            rgba(44, 84, 112, 0.55) 0 2px,
            transparent            2px 28px);
    border-left:  2px solid var(--room-outer);
    border-right: 2px solid var(--room-outer);
    writing-mode: vertical-rl;
}

/* ── The walls (top and right) ────────────────────────────────────────────── */

/* Poché — walls are filled dark in a plan, and that is most of what separates them
   from the window at a glance — with brick coursing over the top. The second,
   fainter gradient adds the perpends, without which it reads as plain stripes. */
.room-edge--top,
.room-edge--right {
    --room-fill:  #C6B7A2;
    --room-ink:   #3B3025;
    --room-outer: #8A7A66;
    background-image:
        repeating-linear-gradient(to bottom,
            rgba(59, 48, 37, 0.40) 0 2px,
            transparent           2px 14px),
        repeating-linear-gradient(to right,
            rgba(59, 48, 37, 0.22) 0 1px,
            transparent           1px 28px);
}

.room-edge--right { writing-mode: vertical-rl; }

/* ── The counter (bottom) ─────────────────────────────────────────────────── */

/* The one band that is a drawing rather than a pattern: a till, centred, with the
   label beneath it. It is a background image so the room stays defined in this one
   file — inline SVG would have to be duplicated into both pages' markup, and the
   two copies would drift.

   The till is inline SVG, so `#` is written %23. It is line art on a transparent
   ground: a customer display on its pole, the screen housing rising above the deck,
   a receipt slot, and two keypads — 3 x 3 and 4 x 3, as in the reference. The
   keypads are SVG <pattern> fills rather than 21 loose rects. The buttons inside
   them carry their own thinner stroke: at the full weight the outlines of a key
   that small fill in solid and the two keypads become two dark slabs. */
.room-edge--bottom {
    --room-fill:  #F6EDE1;
    --room-ink:   #6B4526;
    --room-outer: #B99A78;
    align-items: flex-end;                 /* the label sits under the till */
    padding-bottom: 6px;
    background-image:
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%235E3F26' stroke-width='3.5' stroke-linejoin='round'><defs><pattern id='a' x='16' y='64' width='13.33' height='14.67' patternUnits='userSpaceOnUse'><rect x='2.2' y='2.2' width='8.9' height='10.3' rx='1.2' stroke-width='2.4'/></pattern><pattern id='b' x='62' y='64' width='12.5' height='14.67' patternUnits='userSpaceOnUse'><rect x='2.2' y='2.2' width='8.1' height='10.3' rx='1.2' stroke-width='2.4'/></pattern></defs><rect x='8' y='3' width='58' height='23' rx='3'/><rect x='15' y='8' width='44' height='13' rx='1.5'/><rect x='32' y='26' width='8' height='13'/><rect x='64' y='20' width='52' height='38' rx='3'/><rect x='70' y='25' width='40' height='28' rx='1.5'/><rect x='6' y='38' width='110' height='78' rx='3'/><rect x='16' y='46' width='38' height='10' rx='1.5'/><rect x='16' y='64' width='40' height='44' rx='2'/><rect x='16' y='64' width='40' height='44' rx='2' fill='url(%23a)' stroke='none'/><rect x='62' y='64' width='50' height='44' rx='2'/><rect x='62' y='64' width='50' height='44' rx='2' fill='url(%23b)' stroke='none'/></svg>"),
        /* a faint diagonal hatch behind it, so the rest of the counter is not blank */
        repeating-linear-gradient(45deg,
            rgba(107, 69, 38, 0.10) 0 2px,
            transparent            2px 10px);
    background-repeat: no-repeat, repeat;
    background-position: center 8px, 0 0;
    background-size: auto 76px, auto;
}

/* ── Narrow screens ───────────────────────────────────────────────────────── */

/* Five columns at phone width is already tight, so the bands give up as much room
   as they can — but they keep their words. A customer on a phone is exactly who
   benefits from knowing which side the window is on, and a pattern on its own does
   not say it. The counter keeps its drawing too, just smaller. */
@media (max-width: 640px) {
    .room-frame {
        --room-edge: 20px;
        --room-edge-bottom: 74px;
    }
    .room-edge          { font-size: 0.58rem; letter-spacing: 0.03em; }
    .room-edge--bottom  { padding-bottom: 4px;
                          background-position: center 5px, 0 0;
                          background-size: auto 46px, auto; }
}