/* ============================================================
   FLOOR PLAN EXPAND / SHRINK CONTROLS
   Buttons around the SVG canvas (+/- rows and columns)
   ============================================================ */


.floor-controls-container {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}


.svg-wrapper {
    position: relative;
    border: 1px solid var(--dc-n-1000);
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

#floorplan {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Floating zoom controls overlay ── */
.canvas-zoom-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--dc-n-200);
    border-radius: 7px;
    padding: 4px 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 20;
    user-select: none;
}

.canvas-zoom-controls button {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: var(--dc-n-900);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: background 0.15s;
}

.canvas-zoom-controls button:hover {
    background: var(--dc-n-50);
    color: var(--dc-n-1000);
}

.canvas-zoom-controls button.active {
    background: #e8f0fe;
    color: #1a73e8;
}

.canvas-zoom-controls #zoomDisplay {
    min-width: 42px;
    text-align: center;
    font-size: var(--dc-text-sm);
    font-weight: 600;
    color: var(--dc-n-900);
    cursor: pointer;
    padding: 0 2px;
    border-radius: 4px;
    transition: background 0.15s;
}

.canvas-zoom-controls #zoomDisplay:hover {
    background: var(--dc-n-50);
    color: var(--dc-n-1000);
}

/* The four picture buttons in this row. They used to be two typographic characters
   (rotate, and the arrows) beside two emoji (a hand, a padlock, a thermometer): the
   font drew half of them and the operating system the other half, so they came out at
   different weights, refused the button colour, and changed shape between Windows and
   a Mac. Now all four are the set's own SVG, painted through a mask, so hover and
   .active recolour them like any other text. Drawn on ::before, not on the button, so
   the button keeps its own background for those states. */
.canvas-zoom-controls button.czb-icon::before {
    content: "";
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--czb-icon) center / contain no-repeat;
            mask: var(--czb-icon) center / contain no-repeat;
}
.czb-icon--rotate    { --czb-icon: url('../images/icon_rotate.svg'); }
.czb-icon--pan       { --czb-icon: url('../images/icon_pan.svg'); }
.czb-icon--tray-load { --czb-icon: url('../images/icon_tray_load.svg'); }
/* Auto-scroll lock: js/zoom.js swaps the two classes as the state changes. */
.czb-icon--lock      { --czb-icon: url('../images/icon_lock.svg'); }
.czb-icon--unlock    { --czb-icon: url('../images/icon_unlock.svg'); }

.canvas-zoom-divider {
    width: 1px;
    height: 18px;
    background: var(--dc-n-200);
    margin: 0 3px;
}

/* Which tray the heat map is drawn for. Only shown while the map is on, so the
   toolbar keeps its width in every other mode. */
.tray-load-switch {
    display: inline-flex;
    gap: 2px;
    margin-left: 2px;
}

.canvas-zoom-controls .tray-load-switch button {
    width: auto;
    padding: 0 8px;
    font-size: var(--dc-text-xs);
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* Colour ladder of the heat map — a size chart, not a gradient, so it is spelled
   out. Sits opposite the zoom controls so neither covers the other. */
.tray-load-legend {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 20;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--dc-n-200);
    border-radius: 7px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 8px 10px;
    font-size: var(--dc-text-xs);
    color: var(--dc-n-900);
    user-select: none;
    pointer-events: none;
}

.tray-load-legend .tl-lg-head {
    font-weight: 700;
    color: var(--dc-n-750);
    margin-bottom: 5px;
}

.tray-load-legend .tl-lg-row {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.6;
}

.tray-load-legend .tl-lg-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    flex: none;
}

.tray-load-legend .tl-lg-peak {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--dc-n-50);
    color: var(--dc-n-750);
}

.tray-load-legend .tl-lg-warn { color: #b34700; margin-top: 3px; }

/* Hover read-out over one tray cell. Fixed to the viewport: the canvas pans and
   zooms under it, and the panel must not travel with the drawing.

   3000 stays a literal on purpose. It sits between --dc-z-modal and the zoom tier,
   which would put it over a plain dialog - and it cannot reach one: it appears only
   while the pointer is over a tray cell on a live canvas, and no dialog is open then.
   A token here would have exactly one user and would say less than this does. */
.tray-load-tip {
    position: fixed;
    z-index: 3000;
    display: none;
    /* Wide enough for the widest drawing plus the padding — see TIP_VIEW_W. */
    max-width: 360px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--dc-n-200);
    border-radius: 7px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    padding: 9px 11px;
    font-size: var(--dc-text-xs);
    color: var(--dc-n-950);
    pointer-events: none;
}

.tray-load-tip .tl-tip-head {
    font-weight: 700;
    font-size: var(--dc-text-xs);
    color: var(--dc-n-750);
    margin-bottom: 4px;
}

.tray-load-tip .tl-tip-sum {
    font-size: var(--dc-text-md);
    margin-bottom: 6px;
}

/* One line per cable product: the colour it has in the drawing, how many, how thick. */
.tray-load-tip .tl-tip-cab {
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.7;
    white-space: nowrap;
}

.tray-load-tip .tl-tip-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid var(--dc-n-1000);
    flex: none;
}

.tray-load-tip .tl-tip-cab-n { font-weight: 700; }
.tray-load-tip .tl-tip-cab-d { color: var(--dc-n-700); margin-left: auto; padding-left: 8px; }

/* Fibre type spelled out beside the product, so the colour is never the only clue. */
.tray-load-tip .tl-tip-cab-f {
    color: var(--dc-n-800);
    background: var(--dc-n-50);
    border-radius: 3px;
    padding: 0 4px;
    font-size: var(--dc-text-2xs);
    font-weight: 600;
}

/* Every tray the bundle fits in, smallest first. All drawn to one scale, so the panel is
   the same size at every cell and the sizes can be compared against each other. */
.tray-load-tip .tl-tip-trays {
    margin-top: 7px;
    border-top: 1px solid var(--dc-n-50);
    padding-top: 6px;
}

/* Label under the drawing, not beside it: side by side the two competed for the panel
   width, and the widest tray had its drawing squeezed by max-width — which is exactly the
   one thing these drawings must never do, since they are all to one scale. */
.tray-load-tip .tl-tip-tray {
    padding: 3px 4px 4px;
    border-radius: 4px;
}

/* The first row is the size the map recommends and colours the cell by. */
.tray-load-tip .tl-tip-tray.is-pick {
    background: #eef4fb;
    box-shadow: inset 0 0 0 1px #cddff0;
}

.tray-load-tip .tl-tip-tray-lbl {
    font-size: var(--dc-text-2xs);
    color: var(--dc-n-700);
    white-space: nowrap;
    margin-top: 2px;
}

/* The recommendation names itself in words, so its caption carries a whole sentence and
   is allowed to wrap; the other rows are a bare size on one line. */
.tray-load-tip .tl-tip-tray.is-pick .tl-tip-tray-lbl {
    color: #1a4a7a;
    font-size: var(--dc-text-xs);
    white-space: normal;
}

/* The tray in cross-section: cables stacked against the near wall, hatched reserve.
   Never scaled by CSS — the whole point is that every drawing shares one scale. */
.tray-load-tip .tl-tip-svg {
    display: block;
}

.tray-load-tip .tl-svg-lbl {
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    fill: #222;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 3px;
}

.tray-load-tip .tl-svg-lbl--dim { fill: #777; font-weight: 600; }

.tray-load-tip .tl-tip-warn  { color: #b34700; }
.tray-load-tip .tl-tip-empty { color: var(--dc-n-500); }

/* ── Backdrop edit mode: a panel under the zoom controls ─────────────────────
   It was a horizontal bar, and it came out 736px wide against the zoom bar's 362,
   hanging directly beneath it — a ragged right edge, and the bar lay across the top
   of the drawing. Turned ninety degrees it is 186px and hugs the right margin, so
   the two read as one column of canvas controls. It covers more area this way
   (about 45 700 px² against 27 000) and that is the trade: a strip at the edge
   instead of a band over the plan.

   Surface, radius and shadow are copied from .canvas-zoom-controls deliberately —
   these are the same kind of thing and there is no reason for two answers.

   No !important anywhere: the four that used to be here existed because one broad
   `button` rule fought its own modifiers. The modifiers come after it now. */
.backdrop-panel {
    position: absolute;
    top: 54px;
    right: 12px;
    width: 186px;
    padding: 8px 10px 9px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--dc-n-200);
    border-radius: 7px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-size: var(--dc-text-sm);
    color: var(--dc-n-900);
    user-select: none;
    z-index: 200;
}

.backdrop-panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.backdrop-panel-head {
    font-weight: 600;
    margin-bottom: 7px;
}

/* Which backdrop the panel is holding — the world image or one zone's own. */
.backdrop-panel-target {
    font-size: var(--dc-text-xs);
    font-weight: 600;
    color: #1a73e8;
    background: #e8f0fe;
    border-radius: 3px;
    padding: 1px 6px;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Full width of the panel, so a group reads as a group. */
.backdrop-panel-div {
    border-top: 1px solid var(--dc-n-100);
    margin: 8px -10px;
}

.backdrop-panel-label { color: var(--dc-n-700); }

/* The opacity percentage and the size in metres — the readout the manual scaling is
   done against. */
.backdrop-panel-value { font-weight: 600; }

.backdrop-panel input[type=range] {
    display: block;
    width: 100%;
    height: 4px;
    margin: 7px 0 0;
    accent-color: #1a73e8;
    cursor: pointer;
}

.backdrop-panel button {
    display: block;
    width: 100%;
    height: 26px;
    padding: 0 8px;
    text-align: left;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--dc-n-900);
    font-size: var(--dc-text-sm);
    font-weight: normal;
    cursor: pointer;
    transition: background 0.15s;
}

.backdrop-panel button:hover { background: var(--dc-n-50); color: var(--dc-n-1000); }
.backdrop-panel button.active { background: #e8f0fe; color: #1a73e8; }

/* These two carry the panel in front of them on purpose. `.backdrop-panel button`
   above is a class plus a tag and outweighs a bare class, so `.backdrop-panel-remove`
   alone loses its colour and `.backdrop-panel-done` loses its weight - silently, and
   only these two properties. That is what the four !important here used to be paying
   for. Specificity is cheaper than shouting. */

/* Destructive, and it says so in words. It used to sit one button away from the exit
   in a row; it now has a group to itself. */
.backdrop-panel .backdrop-panel-remove { color: var(--dc-c-error-hover); }
.backdrop-panel .backdrop-panel-remove:hover {
    background: #fdecea;
    color: var(--dc-c-error-hover);
}

.backdrop-panel .backdrop-panel-done { font-weight: 600; }