/* Breco AI Pro - staged extensions (10/4/26): Pro Tools, sheet manager, revision compare, accuracy check, proposal pro, help, tour. */
.bx-tools{margin:10px 0 0 0;border:1px solid var(--line);border-radius:8px;background:rgba(10,17,32,.55);}
.bx-tools>summary{cursor:pointer;padding:9px 10px;font-weight:700;font-size:13px;letter-spacing:.03em;color:var(--accent);list-style:none;}
.bx-tools>summary::-webkit-details-marker{display:none}
.bx-tools>summary:after{content:"▾";float:right;color:var(--steel)}
.bx-tools[open]>summary:after{content:"▴"}
.bx-tools .bx-tool-list{display:flex;flex-direction:column;gap:6px;padding:0 8px 10px 8px;}
.bx-tools .btn{width:100%;justify-content:flex-start;}
.bx-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;background:#0B1424;border:1px solid var(--accent);color:var(--ink);padding:10px 16px;border-radius:8px;font-size:13px;max-width:90vw;box-shadow:0 6px 30px rgba(0,0,0,.6);}
.bx-overlay{position:fixed;inset:0;z-index:65;background:rgba(1,3,7,.86);display:flex;align-items:stretch;justify-content:center;padding:14px;box-sizing:border-box;}
.bx-panel{background:var(--panel,#0B1424);border:1px solid var(--line-bright,#2C5788);border-radius:10px;display:flex;flex-direction:column;width:100%;max-width:1400px;max-height:100%;min-height:0;box-sizing:border-box;color:var(--ink);overflow:hidden;}
.bx-panel.narrow{max-width:760px;align-self:center;max-height:calc(100dvh - 28px);}
.bx-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);flex:0 0 auto;}
.bx-head h3{margin:0;font-size:16px;font-family:var(--font-display);flex:1;min-width:0;}
.bx-body{padding:12px 14px;overflow:auto;flex:1 1 auto;min-height:0;-webkit-overflow-scrolling:touch;}
.bx-foot{padding:10px 14px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;flex:0 0 auto;}
.bx-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0;}
.bx-row label{font-size:12px;color:var(--steel);}
.bx-row select,.bx-row input[type=text],.bx-row input[type=number],.bx-panel input[type=text],.bx-panel input[type=number],.bx-panel input[type=date],.bx-panel select,.bx-panel textarea{background:var(--void-2,#0A1120);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:13px;max-width:100%;box-sizing:border-box;}
.bx-panel textarea{width:100%;font-family:inherit;}
.bx-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.bx-table th{text-align:left;color:var(--steel);font-weight:700;padding:6px 6px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel,#0B1424);}
.bx-table td{padding:5px 6px;border-bottom:1px solid rgba(30,51,85,.6);vertical-align:middle;}
.bx-table td input{width:100%;min-width:60px;}
.bx-tag{display:inline-block;border:1px solid var(--line-bright);border-radius:10px;padding:1px 8px;font-size:11px;font-weight:700;color:var(--accent);}
.bx-tag.warn{color:#FFB22E;border-color:#FFB22E}.bx-tag.bad{color:#FF6B9D;border-color:#FF6B9D}.bx-tag.good{color:#4CE0A0;border-color:#4CE0A0}.bx-tag.mute{color:var(--steel);border-color:var(--line)}
.bx-note{font-size:12px;color:var(--steel);line-height:1.5;margin:6px 0;}
.bx-card{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:8px 0;background:rgba(10,17,32,.5);}
.bx-grid{display:grid;gap:10px;}
.bx-thumb{width:84px;height:60px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:4px;}
.bx-cmp-wrap{display:flex;flex:1;min-height:0;gap:8px;}
.bx-cmp-view{flex:1;min-width:0;position:relative;background:#222;border:1px solid var(--line);border-radius:6px;overflow:hidden;touch-action:none;}
.bx-cmp-view canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block;}
.bx-cmp-side{flex:0 0 250px;overflow:auto;border:1px solid var(--line);border-radius:6px;padding:8px;font-size:12.5px;}
.bx-reg{padding:6px;border:1px solid var(--line);border-radius:6px;margin:4px 0;cursor:pointer;}
.bx-reg:hover,.bx-reg.on{border-color:var(--accent);background:rgba(47,216,255,.08)}
@media (max-width:760px){
  .bx-overlay{padding:0}
  .bx-panel{border-radius:0;max-height:100dvh;height:100dvh}
  .bx-panel.narrow{align-self:stretch;max-height:100dvh}
  .bx-cmp-wrap{flex-direction:column}
  .bx-cmp-side{flex:0 0 auto;max-height:34vh}
  .bx-table{font-size:12px}
  .bx-body{padding:10px}
}
/* takeoff polish */
.bx-scalebar{pointer-events:none;position:absolute;top:50px;left:14px;z-index:5;background:rgba(255,178,46,.14);border:1px solid #FFB22E;color:#FFD9A0;font-size:12px;font-weight:600;padding:6px 10px;border-radius:7px;display:flex;gap:8px;align-items:center;max-width:min(300px,calc(100% - 28px));font-size:11.5px;line-height:1.3;flex-wrap:wrap;}
.bx-scalebar.ok{background:rgba(76,224,160,.12);border-color:#4CE0A0;color:#BFF5DC}
.bx-badge{display:inline-block;font-size:10.5px;font-weight:700;border-radius:8px;padding:0 6px;margin-left:5px;border:1px solid var(--line-bright);color:var(--accent)}
.bx-badge.warn{color:#FFB22E;border-color:#FFB22E}.bx-badge.good{color:#4CE0A0;border-color:#4CE0A0}.bx-badge.bad{color:#FF6B9D;border-color:#FF6B9D}
.bx-hintbar{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);z-index:6;background:rgba(6,11,22,.94);border:1px solid var(--accent);border-radius:8px;padding:7px 12px;font-size:12.5px;color:var(--ink);max-width:90%;}
/* tour */
.bx-tour-shade{position:fixed;inset:0;z-index:150;background:transparent}
.bx-tour-ring{position:fixed;z-index:151;border:3px solid var(--accent);border-radius:8px;box-shadow:0 0 0 9999px rgba(1,3,7,.72),0 0 24px rgba(47,216,255,.7);pointer-events:none;transition:all .25s}
.bx-tour-card{position:fixed;z-index:152;width:min(340px,calc(100vw - 24px));background:#0B1424;border:1px solid var(--accent);border-radius:10px;padding:14px;box-shadow:0 10px 40px rgba(0,0,0,.7);color:var(--ink)}
.bx-tour-card h4{margin:0 0 6px 0;font-family:var(--font-display);font-size:14px}
.bx-tour-card p{margin:0 0 10px 0;font-size:13px;line-height:1.5;color:#C5D6F2}
/* help center */
.bx-help-art{border-bottom:1px solid var(--line);padding:8px 0}
.bx-help-art summary{cursor:pointer;font-weight:700;font-size:13.5px}
.bx-help-art div{font-size:13px;line-height:1.6;color:#C5D6F2;margin-top:6px}
/* proposal pro blocks (screen + print) */
.doc .bx-doc-block{margin-top:14px;page-break-inside:avoid}
.doc .bx-doc-block ul{margin:4px 0 0 18px;padding:0;font-size:12.5px;color:#1A2233;line-height:1.55}
.doc .bx-accept{border:1.5px solid #1A2233;border-radius:4px;padding:12px 14px;margin-top:18px;page-break-inside:avoid;color:#1A2233;background:#fff}
.doc .bx-accept .ln{display:flex;gap:20px;margin-top:22px}
.doc .bx-accept .ln div{flex:1;border-top:1px solid #1A2233;padding-top:4px;font-size:11px;color:#5C6B7A}
.doc .bx-accept p{font-size:12px;margin:0;line-height:1.5}
.doc .bx-docid{font-size:10px;color:#5C6B7A;margin-top:8px;font-family:var(--font-mono)}
@media print{
  .bx-tools,.bx-toast,.bx-overlay,.bx-scalebar,.bx-hintbar,.bx-tour-shade,.bx-tour-ring,.bx-tour-card,.bx-no-print{display:none !important}
  .doc .bx-doc-block ul{color:#000}
}
/* mobile polish */
@media (max-width:640px){
  .btn,.nav-btn{min-height:40px}
  .btn.small{min-height:36px;padding:7px 11px}
  .toolbar{flex-wrap:nowrap !important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:8px}
  .toolbar .btn{flex:0 0 auto}
  .bx-scalebar{top:auto;bottom:70px;left:8px;right:8px;max-width:none}
  .bx-hintbar{bottom:110px}
  .modal input,.modal select,.modal textarea{font-size:16px}
  .bx-panel input,.bx-panel select,.bx-panel textarea{font-size:16px}
  .top-util{gap:4px}
}
@supports (padding:max(0px)){
  .bx-overlay{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right))}
  .bx-foot{padding-bottom:max(10px,env(safe-area-inset-bottom))}
}
@media (pointer:coarse){ .toolbar .btn,.tool-btn{min-height:42px;min-width:42px} }

/* ===== Phone layout fix (10/4/26): before this the plan canvas sat BELOW the fold on a 390x844 phone (top at y=818) and the view was overflow:hidden,
   so the plan could not be reached. Header/status/toolbar rows now scroll sideways in one line each; the AI/Find bars are folded behind a button;
   the items panel is a tappable bar that expands upward. ===== */
@media (max-width:820px){
  .main{height:100vh;height:100dvh}
  .topbar{padding:6px 10px !important;gap:4px 8px !important}
  .topbar .sub{display:none}
  .topbar h1{font-size:14px;margin:0}
  #topActions{flex-wrap:nowrap !important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  #topActions::-webkit-scrollbar{display:none}
  .status-bar{flex-wrap:nowrap !important;overflow-x:auto;padding:4px 10px !important;gap:10px;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .status-bar .scope-toggle-group{flex-wrap:nowrap !important;width:auto !important;flex:0 0 auto}
  .status-bar .scope-toggle-btn{white-space:nowrap}
  #viewTakeoff .cmd-bar,#viewTakeoff .find-bar,#viewTakeoff .find-bar-result,#viewTakeoff .cmd-bar-console{display:none}
  #viewTakeoff.bx-bars-open .cmd-bar,#viewTakeoff.bx-bars-open .find-bar{display:flex}
  #viewTakeoff.bx-bars-open .find-bar-result:not(.hidden),#viewTakeoff.bx-bars-open .cmd-bar-console:not(.hidden){display:block}
  .toolbar{flex-wrap:nowrap !important;overflow-x:auto;padding:6px 8px !important;gap:6px !important;-webkit-overflow-scrolling:touch}
  .toolbar .btn{padding:8px 12px !important;font-size:13px !important;flex:0 0 auto}
  .toolbar>span:not(.sep){display:none}
  .canvas-area{min-height:0 !important}
  .side-panel{max-height:58vh !important;flex:0 0 auto}
  .side-panel.bx-collapsed{max-height:none !important}
  .side-panel.bx-collapsed>*:not(.side-panel-head){display:none !important}
  .side-panel-head{padding:8px 12px !important;display:flex;align-items:center;gap:8px;flex-wrap:wrap;cursor:pointer}
  .side-panel-head h3{margin:0 !important}
  .side-panel-head:after{content:"▲ items";margin-left:auto;font-size:12px;color:var(--accent)}
  .side-panel:not(.bx-collapsed) .side-panel-head:after{content:"▼ hide"}
  .view{padding-left:10px;padding-right:10px}
}

.bx-scalebar button,.bx-scalebar a{pointer-events:auto}
.bx-hintbar{pointer-events:none}
/* R18 (10/14/26) Takeoff height fix: on desktop/tablet the sidebar (~3600px of content) overflowed and made the whole page scroll, so scrolling
   down showed empty background under the 100vh main/plan viewer. The sidebar now scrolls inside its own column; the page stays one viewport tall. */
/* R21 (10/16/26, Oscar): R18 own-column sidebar scroll removed; sidebar is back to the r17 look and behaviour (page scrolls as one). */
/* Tall toolbars (1366x768 / 1024 tablet) squeezed the plan to 222px / 0px: the plan keeps at least ~55% of the viewport and the
   toolbar column scrolls if the bars don't fit (pointer coords use live getBoundingClientRect, so tracing stays exact). */
@media (min-width:821px){
  .takeoff-wrap>div:first-child{overflow:hidden}
  .takeoff-wrap #toolbar{flex:0 0 auto;max-height:max(150px,32vh);max-height:max(150px,32dvh);overflow-y:auto;overflow-x:hidden}
  .takeoff-wrap .canvas-area{flex:1 1 auto;min-height:0}
}