/* BIM Explorer 1.5 - "Openspace" (Rob, 5 Nov 2026), the look Metre2 Mail and Calendar use. Loaded last.
   Light = blueprint paper, dark = deep navy blueprint. Inter + JetBrains Mono are bundled (fonts/, OFL),
   so nothing loads from Google Fonts any more. Drawing grid behind near-opaque panels with hairline
   edges, JetBrains Mono uppercase labels, blue accent, amber for Pro. The 3D scene's background and
   grid follow the theme (bim-openspace.js). Tooltips are drawn by bim-openspace.js and kept inside
   the window, so the CSS ones from forma-shell.css are switched off here. */
@font-face { font-family: 'Inter'; src: url('fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrains-mono-var.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }

html[data-theme],
html[data-theme="light"],
html[data-theme="light"] body {
  --os-blue: #1d5fe0 !important; --os-blue-2: #3f7cf0 !important; --os-amber: #e8590c !important;
  --os-page: #f3f6fb !important; --os-solid: #ffffff !important;
  --os-glass: rgba(255,255,255,.86) !important; --os-glass-strong: rgba(255,255,255,.95) !important;
  --os-grid-major: rgba(29,95,224,.09) !important; --os-grid-minor: rgba(29,95,224,.045) !important;
  --os-halo-1: rgba(120,170,255,.22) !important; --os-halo-2: rgba(150,190,255,.25) !important;
  --os-tint: rgba(29,95,224,.1) !important; --os-tint-border: rgba(29,95,224,.42) !important;
  --os-row-hover: rgba(29,95,224,.045) !important; --os-row-sel: rgba(29,95,224,.09) !important;
  --os-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 44px -28px rgba(20,50,110,.38) !important;
  --os-tip-bg: #0b1b33 !important; --os-tip-text: #f3f6fb !important;
  --bg-primary: #f3f6fb !important; --bg-secondary: #ffffff !important; --bg-tertiary: rgba(29,95,224,.06) !important;
  --bg-panel: rgba(255,255,255,.86) !important; --panel-bg: rgba(255,255,255,.86) !important;
  --surface-soft: rgba(29,95,224,.04) !important; --surface-raised: #ffffff !important; --surface-wash: rgba(29,95,224,.03) !important;
  --panel-border: rgba(29,95,224,.14) !important; --border: rgba(29,95,224,.12) !important;
  --text-primary: #0b1b33 !important; --text-secondary: #4a5d7a !important; --text-muted: #7d8fab !important; --text-dim: #7d8fab !important;
  --accent: #1d5fe0 !important; --accent-hover: #123f9e !important; --accent-light: rgba(29,95,224,.1) !important;
  --accent-dim: rgba(29,95,224,.1) !important; --accent-glow: rgba(29,95,224,.35) !important;
  --scene-bg: #e8eef8 !important;
  --success: #12a26b !important; --warning: #d98a00 !important; --danger: #e5484d !important;
  --os-font: 'Inter', 'Segoe UI', system-ui, sans-serif; --os-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;
  color-scheme: light !important;
}
html[data-theme="dark"],
html[data-theme="dark"] body {
  --os-blue: #5ad1ff !important; --os-blue-2: #8ee0ff !important; --os-amber: #ff9a3d !important;
  --os-page: #050d18 !important; --os-solid: #0b1524 !important;
  --os-glass: rgba(7,13,24,.86) !important; --os-glass-strong: rgba(9,16,29,.95) !important;
  --os-grid-major: rgba(90,170,255,.055) !important; --os-grid-minor: rgba(90,170,255,.035) !important;
  --os-halo-1: rgba(32,110,190,.22) !important; --os-halo-2: rgba(40,80,160,.18) !important;
  --os-tint: rgba(90,209,255,.12) !important; --os-tint-border: rgba(90,209,255,.45) !important;
  --os-row-hover: rgba(90,209,255,.05) !important; --os-row-sel: rgba(90,209,255,.09) !important;
  --os-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 30px 80px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(160,210,255,.06) !important;
  --os-tip-bg: #eaf2ff !important; --os-tip-text: #050d18 !important;
  --bg-primary: #050d18 !important; --bg-secondary: #0b1524 !important; --bg-tertiary: rgba(120,180,255,.08) !important;
  --bg-panel: rgba(7,13,24,.86) !important; --panel-bg: rgba(7,13,24,.86) !important;
  --surface-soft: rgba(120,180,255,.05) !important; --surface-raised: #0b1524 !important; --surface-wash: rgba(120,180,255,.035) !important;
  --panel-border: rgba(120,180,255,.13) !important; --border: rgba(120,180,255,.1) !important;
  --text-primary: #eaf2ff !important; --text-secondary: #9fb0c8 !important; --text-muted: #627590 !important; --text-dim: #627590 !important;
  --accent: #5ad1ff !important; --accent-hover: #8ee0ff !important; --accent-light: rgba(90,209,255,.12) !important;
  --accent-dim: rgba(90,209,255,.12) !important; --accent-glow: rgba(90,209,255,.4) !important;
  --scene-bg: #050d18 !important;
  --success: #3ddc97 !important; --warning: #ffb347 !important; --danger: #ff6b7a !important;
  color-scheme: dark !important;
}

/* ---------- page, grid */
html[data-theme] body {
  font-family: var(--os-font) !important;
  -webkit-font-smoothing: antialiased;
  background: radial-gradient(ellipse 70% 60% at 62% 58%, var(--os-halo-1), transparent 70%),
              radial-gradient(ellipse 60% 50% at 10% 0%, var(--os-halo-2), transparent 70%), var(--os-page) !important;
}
html[data-theme] body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(var(--os-grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--os-grid-major) 1px, transparent 1px),
                    linear-gradient(var(--os-grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--os-grid-minor) 1px, transparent 1px);
  background-size: 240px 240px, 240px 240px, 48px 48px, 48px 48px;
}
html[data-theme] #viewport { background: var(--scene-bg) !important; }

/* ---------- top bar, panels, status bar: glass with hairline edges */
html[data-theme] .topbar {
  background: var(--os-glass-strong) !important;
  border-bottom: 1px solid var(--panel-border) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
html[data-theme] .forma-nav { background: transparent !important; border-color: var(--panel-border) !important; border-radius: 9px !important; }
html[data-theme] .forma-left-panel,
html[data-theme] .side-panel {
  background: var(--os-glass) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--os-shadow) !important;
}
html[data-theme] .forma-left-panel-section,
html[data-theme] .forma-left-panel-section-head,
html[data-theme] .forma-left-panel .tab-content,
html[data-theme] .panel-tabs,
html[data-theme] .panel-body,
html[data-theme] .stats-bar,
html[data-theme] .breadcrumbs { background: transparent !important; }
html[data-theme] .stats-bar {
  background: var(--os-glass-strong) !important; border-top: 1px solid var(--panel-border) !important;
  font-family: var(--os-mono) !important; font-size: 10.5px !important; letter-spacing: .06em;
}
html[data-theme] .stats-bar * { font-family: var(--os-mono) !important; }

/* mono, uppercase, spaced labels */
html[data-theme] .forma-left-panel-section-head,
html[data-theme] .forma-help-kicker,
html[data-theme] .forma-library-kicker,
html[data-theme] .bimx-samples-kicker {
  font-family: var(--os-mono) !important; font-size: 10.5px !important; font-weight: 500 !important;
  letter-spacing: .18em !important; text-transform: uppercase; color: var(--text-secondary) !important;
}
html[data-theme] .forma-left-panel-section-head { border-bottom-color: var(--panel-border) !important; padding: 12px 14px 9px !important; }
html[data-theme] .panel-tab {
  font-family: var(--os-mono) !important; font-size: 10px !important; font-weight: 500 !important;
  letter-spacing: .06em !important; text-transform: uppercase; color: var(--text-secondary) !important;
  padding: 0 8px !important; border-radius: 6px !important; border: 1px solid transparent !important; background: transparent !important;
}
html[data-theme] .panel-tab:hover { background: var(--os-row-hover) !important; color: var(--text-primary) !important; }
html[data-theme] .panel-tab.active {
  background: var(--os-tint) !important; color: var(--os-blue) !important; border-color: var(--os-tint-border) !important;
}
html[data-theme] .tree-item .count,
html[data-theme] .tree-count,
html[data-theme] .tree-item [class*="count"] { font-family: var(--os-mono) !important; color: var(--text-muted) !important; }
html[data-theme] .tree-item:hover { background: var(--os-row-hover) !important; }
html[data-theme] .tree-item.selected,
html[data-theme] .tree-item.active { background: var(--os-row-sel) !important; color: var(--os-blue) !important; }

/* ---------- buttons */
html[data-theme] .forma-shell-btn,
html[data-theme] .forma-chip,
html[data-theme] .forma-first-card button {
  background: var(--bg-secondary) !important; border: 1px solid var(--panel-border) !important; border-radius: 8px !important;
  color: var(--text-primary) !important; box-shadow: none !important;
}
html[data-theme] .forma-shell-btn:hover,
html[data-theme] .forma-chip:hover { border-color: var(--os-tint-border) !important; color: var(--os-blue) !important; }
html[data-theme] .forma-shell-btn.primary {
  background: var(--os-blue) !important; border-color: var(--os-blue) !important; color: var(--os-solid) !important;
  box-shadow: 0 6px 18px -8px var(--accent-glow) !important;
}
html[data-theme="light"] .forma-shell-btn.primary { color: #ffffff !important; }
html[data-theme] .forma-shell-btn.primary:hover { filter: brightness(1.08); color: var(--os-solid) !important; }
html[data-theme="light"] .forma-shell-btn.primary:hover { color: #ffffff !important; }

/* viewport toolbars: floating glass strips */
html[data-theme] .viewport-overlay .toolbar-group {
  background: var(--os-glass-strong) !important; border: 1px solid var(--panel-border) !important;
  border-radius: 11px !important; box-shadow: var(--os-shadow) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html[data-theme] .tool-btn { color: var(--text-secondary) !important; }
html[data-theme] .tool-btn:hover { background: var(--os-tint) !important; color: var(--os-blue) !important; }
html[data-theme] .tool-btn[aria-pressed="true"] {
  background: var(--os-blue) !important; border-color: var(--os-blue) !important; color: var(--os-solid) !important;
  box-shadow: 0 6px 18px -8px var(--accent-glow) !important;
}
html[data-theme="light"] .tool-btn[aria-pressed="true"] { color: #ffffff !important; }
html[data-theme] .theme-toggle { color: var(--text-secondary) !important; background: transparent !important; }
html[data-theme] .theme-toggle:hover { color: var(--os-blue) !important; background: var(--os-tint) !important; }

/* drop zone / first screen */
html[data-theme] .drop-zone {
  background-color: transparent !important;
  background-image: linear-gradient(var(--os-grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--os-grid-major) 1px, transparent 1px),
                    linear-gradient(var(--os-grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--os-grid-minor) 1px, transparent 1px) !important;
  background-size: 240px 240px, 240px 240px, 48px 48px, 48px 48px !important;
}
html[data-theme] .drop-border {
  background: var(--os-glass-strong) !important; border: 1px dashed var(--os-tint-border) !important;
  border-radius: 18px !important; box-shadow: var(--os-shadow) !important;
}
html[data-theme] .drop-border h2 { font-weight: 650 !important; letter-spacing: -.02em; color: var(--text-primary) !important; }
html[data-theme] .forma-empty-icon { color: var(--os-blue) !important; }
html[data-theme] .forma-first-muted { font-family: var(--os-mono) !important; font-size: 10.5px !important; letter-spacing: .1em; text-transform: uppercase; }

/* overlays */
html[data-theme] .forma-help-modal,
html[data-theme] .forma-library-modal,
html[data-theme] .cmd-palette,
html[data-theme] .ks-pro-panel { background: var(--os-solid) !important; border: 1px solid var(--panel-border) !important; border-radius: 16px !important; }
html[data-theme] .forma-help-subject.active { background: var(--os-tint) !important; color: var(--os-blue) !important; border-color: var(--os-tint-border) !important; }

/* Pro: amber */
html[data-theme] .bimx-pro-tag,
html[data-theme] .panel-tab-pro { font-family: var(--os-mono) !important; }

/* notification toast */
html[data-theme] #notification { font-family: var(--os-font) !important; border-radius: 10px !important; }

/* ---------- tooltips (bim-openspace.js): one element, positioned in JS, kept inside the window */
html.bimx-js-tips [data-tooltip]:not(.forma-linked-pill button)::before { display: none !important; }
html.bimx-js-tips [data-tooltip]:not(.panel-tab):not([data-forma-command]):not([data-forma-export-command]):not([data-selection-to-boq]):not([data-selection-open-boq])::after { display: none !important; }
#bimxTip {
  position: fixed; z-index: 2147483000; left: 0; top: 0; max-width: min(300px, calc(100vw - 16px));
  padding: 6px 9px; border-radius: 7px; background: var(--os-tip-bg); color: var(--os-tip-text);
  font: 500 11.5px/1.35 var(--os-font, 'Inter', system-ui, sans-serif); letter-spacing: 0; text-transform: none;
  box-shadow: 0 10px 24px rgba(9,24,38,.28); pointer-events: none; white-space: normal; overflow-wrap: anywhere;
  opacity: 0; transform: translateY(2px); transition: opacity .1s ease, transform .1s ease; visibility: hidden;
}
#bimxTip.show { opacity: 1; transform: none; visibility: visible; }

/* ---------- sample picker (bim-samples.js) */
.bimx-samples-overlay {
  position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px;
  background: rgba(5,13,24,.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bimx-samples-modal {
  width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--os-solid, #fff); color: var(--text-primary); border: 1px solid var(--panel-border);
  border-radius: 16px; box-shadow: 0 28px 70px -24px rgba(20,50,110,.42); padding: 20px 22px 16px; font-family: var(--os-font);
}
.bimx-samples-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.bimx-samples-head h2 { margin: 4px 0 2px; font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.bimx-samples-head p { margin: 0; color: var(--text-secondary); font-size: 13px; }
.bimx-samples-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .bimx-samples-grid { grid-template-columns: 1fr; } }
.bimx-sample {
  display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--panel-border); background: var(--bg-secondary); color: var(--text-primary); font: inherit;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.bimx-sample:hover, .bimx-sample:focus-visible { border-color: var(--os-tint-border); box-shadow: 0 6px 18px -8px var(--accent-glow); transform: translateY(-1px); outline: 0; }
.bimx-sample-no { font: 500 10.5px var(--os-mono); letter-spacing: .18em; color: var(--os-blue); text-transform: uppercase; }
.bimx-sample strong { font-size: 15px; font-weight: 650; }
.bimx-sample-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; flex: 1; }
.bimx-sample-meta { font: 500 10px var(--os-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); line-height: 1.5; }
.bimx-sample-src { font: 500 10px var(--os-mono); letter-spacing: .08em; color: var(--os-amber); text-transform: uppercase; }
.bimx-samples-credit {
  margin: 14px 2px 0; padding-top: 12px; border-top: 1px solid var(--panel-border);
  font-size: 11.5px; line-height: 1.5; color: var(--text-secondary);
}
.bimx-samples-credit code { font-family: var(--os-mono); font-size: 10.5px; overflow-wrap: anywhere; }
html[data-theme] .panel-tabs { gap: 4px !important; padding: 8px !important; border-bottom: 1px solid var(--panel-border) !important; }