/* Bluebeam Advanced Feature — styles for the advanced PDF-editor.
 * ------------------------------------------------------------------------- */

/* ── Markup design tokens — ONE system shared by the advanced rail, the top
 *    properties bar AND the engine's right toolbox (overridden in
 *    initial-design.css using these same variables). ─────────────────────── */
/* LIGHT theme (owner decision — the dark chrome was rejected): the advanced
   rail/top bar/dialogs match the app's light look, a shade darker than the
   plan area for contrast, separated by the existing hairline borders. */
:root {
  --gxm-bg0: #eceae4;                    /* deepest chrome              */
  --gxm-bg1: #f6f4ef;                    /* panels                      */
  --gxm-bg2: #ffffff;                    /* controls                    */
  --gxm-bg3: #f0ece4;                    /* control hover               */
  --gxm-line: rgba(0, 0, 0, .08);        /* hairlines                   */
  --gxm-line2: rgba(0, 0, 0, .16);       /* control borders             */
  --gxm-text: #2a2a28;
  --gxm-dim: #6f6d66;
  --gxm-accent: #2f6feb;
  --gxm-accent-soft: rgba(47, 111, 235, .22);
  --gxm-r: 8px;                          /* panel radius                */
  --gxm-rc: 6px;                         /* control radius              */
  --gxm-ease: cubic-bezier(.22, 1, .36, 1);
  --gxm-t: .16s;                         /* standard transition length  */
}
@keyframes gxmPop { from { opacity: 0; transform: scale(.96) translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes gxmFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .bb-topbar *, .bb-rail *, .bb-modal, .bb-modal-back, .bb-ctx, .bb-toast { transition: none !important; animation: none !important; }
}

/* Parts are hidden until the overlay gets the .bb-advanced class */
.bb-topbar, .bb-rail { display: none; }
.idz-overlay.bb-advanced .bb-topbar { display: flex; }
.idz-overlay.bb-advanced .bb-rail   { display: flex; }

/* ── The tick in the Markup header ───────────────────────────────────────── */
.idz-adv-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; cursor: pointer; user-select: none; margin-right: 4px;
}
.idz-adv-toggle input { cursor: pointer; margin: 0; }

/* ── Top properties bar ──────────────────────────────────────────────────── */
/* FLOATS over the top of the plan area (absolute in .idz-body) so its
   auto-hide (renderProps display toggle) never reflows the plan — an in-flow
   bar shifted the plan mid-click and broke re-selecting markups. */
.idz-overlay .idz-body { position: relative; }
.bb-topbar {
  /* spans the PLAN AREA only: clear of the left sidebar (344px) and of the
     right toolbox + rail (274px + 46px) so it never covers either. */
  position: absolute; top: 0; left: 344px; right: 320px; z-index: 30;
  align-items: center; gap: 14px;
  padding: 6px 14px; min-height: 44px;
  background: linear-gradient(var(--gxm-bg1), var(--gxm-bg0));
  color: var(--gxm-text);
  border-bottom: 1px solid var(--gxm-line);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
  flex: 0 0 auto; flex-wrap: wrap;
}
.bb-topbar-name {
  font-weight: 600; font-size: 12px; white-space: nowrap;
  color: var(--gxm-dim); min-width: 150px;
  text-transform: uppercase; letter-spacing: .05em;
}
.bb-topbar-props { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; animation: gxmFade var(--gxm-t) ease; }

.bb-ctl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gxm-dim); }
.bb-ctl span { white-space: nowrap; }
.bb-ctl input[type=color] {
  width: 28px; height: 26px; padding: 2px; border: 1px solid var(--gxm-line2);
  border-radius: var(--gxm-rc); background: var(--gxm-bg2); cursor: pointer;
  transition: border-color var(--gxm-t) var(--gxm-ease), transform .12s var(--gxm-ease);
}
.bb-ctl input[type=color]:hover { border-color: var(--gxm-accent); transform: translateY(-1px); }

/* Custom stepper — replaces the native number-input spinner arrows. */
.bb-step {
  display: inline-flex; align-items: stretch; height: 26px;
  background: var(--gxm-bg2); border: 1px solid var(--gxm-line2);
  border-radius: var(--gxm-rc); overflow: hidden;
  transition: border-color var(--gxm-t) var(--gxm-ease);
}
.bb-step:focus-within { border-color: var(--gxm-accent); }
.bb-step-btn {
  width: 22px; border: 0; background: transparent; color: var(--gxm-dim);
  font-size: 14px; line-height: 1; cursor: pointer; padding: 0; user-select: none;
  transition: background var(--gxm-t) var(--gxm-ease), color var(--gxm-t) var(--gxm-ease);
}
.bb-step-btn:hover { background: var(--gxm-bg3); color: #111; }
.bb-step-btn:active { background: var(--gxm-accent); color: #fff; }
.bb-num {
  width: 36px; height: 100%; padding: 0; font-size: 12px; text-align: center;
  background: transparent; color: var(--gxm-text); border: 0; outline: none;
  -moz-appearance: textfield; appearance: textfield;
}
.bb-num::-webkit-inner-spin-button, .bb-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.bb-range { width: 78px; vertical-align: middle; accent-color: var(--gxm-accent); cursor: pointer; }
.bb-sel {
  height: 26px; padding: 0 22px 0 8px; font-size: 12px;
  background: var(--gxm-bg2) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5"><path d="M1 1l3 3 3-3" fill="none" stroke="%239aa3b2" stroke-width="1.5" stroke-linecap="round"/></svg>') no-repeat right 7px center;
  color: var(--gxm-text); border: 1px solid var(--gxm-line2);
  border-radius: var(--gxm-rc); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  transition: border-color var(--gxm-t) var(--gxm-ease);
}
.bb-sel:hover, .bb-sel:focus { border-color: var(--gxm-accent); outline: none; }
.bb-ctl-group { display: inline-flex; gap: 2px; }
.bb-ctl-btn {
  min-width: 26px; height: 26px; padding: 0 8px;
  font-size: 13px; line-height: 1; cursor: pointer;
  background: var(--gxm-bg2); color: var(--gxm-text);
  border: 1px solid var(--gxm-line2); border-radius: var(--gxm-rc);
  transition: background var(--gxm-t) var(--gxm-ease), border-color var(--gxm-t) var(--gxm-ease), transform .12s var(--gxm-ease);
}
.bb-ctl-btn:hover { background: var(--gxm-bg3); transform: translateY(-1px); }
.bb-ctl-btn:active { transform: translateY(0) scale(.96); }
.bb-ctl-btn.on { background: var(--gxm-accent); color: #fff; border-color: var(--gxm-accent); box-shadow: 0 2px 8px var(--gxm-accent-soft); }
.bb-ctl-btn.bb-b { font-weight: 800; }
.bb-ctl-btn.bb-i { font-style: italic; font-family: Georgia, serif; }

/* ── Left tool rail ──────────────────────────────────────────────────────── */
.bb-rail {
  flex-direction: column; align-items: center; gap: 4px;
  width: 46px; flex: 0 0 46px; padding: 8px 0;
  background: linear-gradient(to right, var(--gxm-bg1), var(--gxm-bg0));
  border-left: 1px solid var(--gxm-line);
  overflow-y: auto; scrollbar-width: none;
}
.bb-rail::-webkit-scrollbar { display: none; }
.bb-rail-sep { width: 26px; height: 1px; margin: 5px 0; background: var(--gxm-line2); }
.bb-tool {
  position: relative;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  color: #55534d; background: transparent;
  border: 1px solid transparent; border-radius: var(--gxm-rc); cursor: pointer;
  transition: background var(--gxm-t) var(--gxm-ease), color var(--gxm-t) var(--gxm-ease),
              transform .12s var(--gxm-ease), box-shadow var(--gxm-t) var(--gxm-ease);
}
.bb-tool:hover { background: var(--gxm-bg3); color: #111; transform: scale(1.08); }
.bb-tool:active { transform: scale(.92); }
.bb-tool.active {
  background: var(--gxm-accent); color: #fff; border-color: var(--gxm-accent);
  box-shadow: 0 0 0 1px var(--gxm-accent), 0 3px 12px var(--gxm-accent-soft);
}
.bb-tool.bb-soon { opacity: .5; }
.bb-tool.bb-soon:hover { opacity: .8; }
.bb-tool .bb-tip {
  position: absolute; right: 42px; top: 50%;
  transform: translateY(-50%) translateX(4px);
  white-space: nowrap; background: var(--gxm-bg0); color: var(--gxm-text);
  font-size: 11px; padding: 4px 9px; border-radius: var(--gxm-rc);
  pointer-events: none; opacity: 0; z-index: 30;
  border: 1px solid var(--gxm-line2); box-shadow: 0 4px 14px rgba(0,0,0,.4);
  transition: opacity var(--gxm-t) var(--gxm-ease), transform var(--gxm-t) var(--gxm-ease);
}
.bb-tool:hover .bb-tip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ── Annotation layer (mounted inside the plan) ──────────────────────────── */
.bb-layer {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: auto;   /* always interactive; idle empty mousedowns bubble to
                             the plan for pan (we don't stopPropagation on them) */
}
.bb-layer.bb-cur-text { cursor: crosshair; }
.bb-layer.bb-cur-draw { cursor: crosshair; }
/* View-only mode (advanced tick OFF): markups stay visible but fully
   click-through so the normal toolbox behaves exactly as before. */
.bb-layer.bb-view, .bb-layer.bb-view * { pointer-events: none !important; }
/* No native text-selection while interacting with markups (it made dragging
   janky and highlighted text in other boxes). Editing re-enables it below. */
.bb-layer, .bb-layer * { -webkit-user-select: none; user-select: none; }
.bb-textbox-text.editing, .bb-measure-label.editing { -webkit-user-select: text; user-select: text; }

/* vector sublayer + rich (html) sublayer */
.bb-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bb-svg .bb-mk { pointer-events: none; }
.bb-svg .bb-hit { pointer-events: all; }
.bb-layer:not(.bb-armed) .bb-svg .bb-hit { cursor: move; }
/* selected vector shapes get a faint blue glow along the shape */
.bb-svg .bb-mk.sel .bb-hit { stroke: rgba(47, 111, 235, 0.30); }
.bb-html { position: absolute; inset: 0; pointer-events: none; }
.bb-html > * { pointer-events: auto; }

/* vertex handles for vector marks (constant screen size) */
.bb-vh {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  background: #fff; border: 1.5px solid #2f6feb; border-radius: 2px;
  cursor: grab; z-index: 6;
}
.bb-del.vec { margin: -22px 0 0 -22px; }

/* per-arrow remove button, offset just above-right of each tip handle */
.bb-tipdel {
  position: absolute; width: 16px; height: 16px; margin: -22px 0 0 8px;
  display: flex; align-items: center; justify-content: center;
  background: #e11d2a; color: #fff; border-radius: 50%; font-size: 12px;
  line-height: 1; cursor: pointer; z-index: 7; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.bb-tipdel:hover { transform: scale(1.15); }

.bb-rubber {
  position: absolute; border: 1px dashed #2f6feb;
  background: rgba(47,111,235,.08); pointer-events: none;
}

/* ── Text box ────────────────────────────────────────────────────────────── */
.bb-textbox {
  position: absolute; container-type: size;   /* enables cqh so text scales */
  pointer-events: auto; box-sizing: border-box;
  border: 1px solid transparent;
}
.bb-textbox.sel, .bb-imgbox.sel { outline: 1.5px solid #2f6feb; outline-offset: 1px; }

/* image box */
.bb-imgbox { position: absolute; pointer-events: auto; box-sizing: border-box; border: 1px solid transparent; }
.bb-imgbox img { width: 100%; height: 100%; object-fit: fill; display: block; pointer-events: none; cursor: move; }

/* top-bar separator */
.bb-sep { width: 1px; height: 20px; background: rgba(255,255,255,.15); display: inline-block; }
.bb-textbox-text {
  width: 100%; height: 100%; overflow: hidden;
  padding: calc(4px * var(--z, 1)) calc(6px * var(--z, 1)); box-sizing: border-box;
  line-height: 1.25; word-break: break-word; white-space: pre-wrap;
  outline: none; cursor: move;
}
.bb-textbox-text.editing { cursor: text; background: rgba(255,255,255,.75); overflow: auto; }
.bb-textbox .bb-ph { opacity: .5; font-style: italic; }

/* resize handles (shown when selected) */
.bb-h { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid #2f6feb; border-radius: 2px; display: none; z-index: 6; }
.bb-textbox.sel .bb-h, .bb-imgbox.sel .bb-h { display: block; }
.bb-h-nw { left: -5px; top: -5px; cursor: nwse-resize; }
.bb-h-n  { left: 50%; top: -5px; margin-left: -5px; cursor: ns-resize; }
.bb-h-ne { right: -5px; top: -5px; cursor: nesw-resize; }
.bb-h-e  { right: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }
.bb-h-se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.bb-h-s  { left: 50%; bottom: -5px; margin-left: -5px; cursor: ns-resize; }
.bb-h-sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.bb-h-w  { left: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }

.bb-del {
  position: absolute; right: -9px; top: -9px; width: 18px; height: 18px;
  display: none; align-items: center; justify-content: center;
  background: #e11d2a; color: #fff; border-radius: 50%; font-size: 13px;
  line-height: 1; cursor: pointer; z-index: 7;
}
.bb-textbox.sel .bb-del, .bb-imgbox.sel .bb-del { display: flex; }

/* ── Measurement labels ──────────────────────────────────────────────────── */
.bb-measure-label {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
  background: rgba(17,20,26,.85); color: #fff; font-size: 12px; font-weight: 600;
  padding: 2px 7px; border-radius: 4px; white-space: nowrap; cursor: pointer;
  border: 1px solid rgba(255,255,255,.15);
}
.bb-measure-label.sel { outline: 1.5px solid #2f6feb; }
/* Dimension labels: JUST the number in the line's colour — no plate, no border.
   A white text halo keeps it readable over the drawing. (Area/length keep the
   dark chip.) */
.bb-measure-label.bb-dim {
  background: none; border: none; box-shadow: none; padding: 0;
  color: var(--dimc, #c026d3);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px; font-weight: 800; letter-spacing: -.01em;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}
.bb-measure-label.bb-dim.sel { outline: none; }
.bb-measure-label.editing { background: #fff; color: #111; cursor: text; outline: 1.5px solid #2f6feb; }
.bb-measure-label.bb-dim.editing { background: #fff; color: #111; outline: 1.5px solid #2f6feb; text-shadow: none; padding: 1px 6px; }

/* ── Calibration hint ────────────────────────────────────────────────────── */
.bb-cal-hint {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  background: #2f6feb; color: #fff; font-size: 13px; padding: 7px 14px;
  border-radius: 8px; z-index: 55; pointer-events: none; box-shadow: 0 2px 10px rgba(0,0,0,.3);
}

/* ── Modal (scale popup, calibrate distance) ─────────────────────────────── */
.bb-modal-back {
  position: absolute; inset: 0; z-index: 70; display: flex;
  align-items: center; justify-content: center; background: rgba(0,0,0,.45);
  animation: gxmFade .15s ease;
}
.bb-modal {
  width: min(420px, 90%); background: var(--gxm-bg1); color: var(--gxm-text);
  border: 1px solid var(--gxm-line2); border-radius: 10px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  animation: gxmPop .18s var(--gxm-ease);
}
.bb-modal-h { padding: 14px 16px; font-weight: 600; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.bb-modal-b { padding: 14px 16px; font-size: 13px; line-height: 1.5; color: #4a4a45; }
.bb-modal-b p { margin: 0 0 8px; }
.bb-modal-cur { color: #1d7a3e; }
.bb-modal-f { padding: 12px 16px; display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid rgba(255,255,255,.08); }
.bb-modal-f .bb-ctl-btn { height: 30px; padding: 0 14px; }

/* scale dialog rows */
.bb-row { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.bb-lbl { min-width: 66px; color: #aeb4bf; }
.bb-radio { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.bb-radio input { margin: 0; cursor: pointer; }
.bb-wide { flex: 1; min-width: 0; }
.bb-hide { display: none !important; }
.bb-scale-modal .bb-sel { height: 28px; }

/* ── On-box arrow controls for callouts (visible when selected) ──────────── */
.bb-cobar { position: absolute; top: -32px; left: -2px; display: none; gap: 4px; z-index: 8; white-space: nowrap; }
.bb-callout.sel .bb-cobar { display: flex; }
.bb-cobtn {
  height: 24px; padding: 0 9px; font-size: 12px; line-height: 1; cursor: pointer;
  background: #fff; color: #2a2a28; border: 1px solid rgba(0,0,0,.22);
  border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.bb-cobtn:hover { background: #2f6feb; border-color: #2f6feb; color: #fff; }

/* ── Right-click context menu (callout arrows) ───────────────────────────── */
.bb-ctx {
  /* MUST beat the Markup overlay (z-index 4000) — the menu is appended to
     document.body, so anything lower renders invisibly behind the window. */
  position: fixed; z-index: 5000; min-width: 150px;
  background: var(--gxm-bg1); color: var(--gxm-text); border: 1px solid var(--gxm-line2);
  border-radius: var(--gxm-r); padding: 4px; box-shadow: 0 8px 28px rgba(0,0,0,.5);
  animation: gxmPop .14s var(--gxm-ease); transform-origin: top left;
}
.bb-ctx-item { padding: 7px 12px; font-size: 13px; border-radius: 5px; cursor: pointer; transition: background var(--gxm-t) var(--gxm-ease); }
.bb-ctx-item:hover { background: var(--gxm-accent); color: #fff; }
.bb-ctx-item.danger:hover { background: #e11d2a; }

/* ── Static (PDF-export) rendering of advanced markups ───────────────────── */
.bb-static { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 4; }
.bb-static-html { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.bb-static-html * { pointer-events: none !important; }
.bb-static .bb-hit { pointer-events: none !important; }
/* measurement labels shrink with the export plan (--z set on the plan box) */
.idz-export .bb-measure-label { transform: translate(-50%, -50%) scale(var(--z, 1)); }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.bb-toast {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px);
  background: #11141a; color: #e6e9ef; font-size: 13px;
  padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12);
  opacity: 0; transition: opacity .2s, transform .2s; z-index: 60; pointer-events: none;
}
.bb-toast.in { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Key-label dialog input */
.bb-key-input {
  width: 100%; height: 32px; margin-top: 10px; padding: 0 10px;
  background: var(--gxm-bg2); color: var(--gxm-text);
  border: 1px solid var(--gxm-line2); border-radius: var(--gxm-rc);
  font-size: 13px; outline: none; box-sizing: border-box;
  transition: border-color var(--gxm-t) var(--gxm-ease);
}
.bb-key-input:focus { border-color: var(--gxm-accent); }

/* Scale status badge in the top properties bar */
.bb-scale-badge {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.bb-scale-badge.ok { background: rgba(63, 185, 106, .14); color: #1d7a3e; border: 1px solid rgba(29, 122, 62, .35); }
.bb-scale-badge.warn { background: rgba(255, 158, 66, .16); color: #a15b13; border: 1px solid rgba(161, 91, 19, .4); }