/* Blueprint-esque light theme + JetBrains Mono */
:root {
  --va-font: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --va-text: #182026;
  --va-subtext: #5c7080;
  --va-bg: #D3D8DE; /* darker gray background */
  --va-surface: #ffffff;
  --va-border: #d8e1e8;
  --va-accent: #2D72D2;
  --va-accent-strong: #184A90;
  --va-muted: #ced9e0;
}

html, body { font-family: var(--va-font); color: var(--va-text); background: var(--va-bg); }
/* Headings prefer JetBrains Mono with IBM Plex fallback */
h1, h2, h3, h4, h5, h6 { font-family: 'JetBrains Mono','IBM Plex Sans', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Top navbar: keep dark but tighten spacing */
/* Keep navbar simple and legible; don't alter button styles */
.custom-menu, .ui.top.fixed.menu { font-family: var(--va-font); }
.ui.top.fixed.menu.inverted { background: #000000; }
.ui.top.fixed.menu { height: 44px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ui.top.fixed.menu .item, .ui.top.fixed.menu .button { font-family: var(--va-font); padding-top: 4px; padding-bottom: 4px; }
.ui.top.fixed.menu .item { color: #e6edf3; }
.fixed-menu { height: 44px !important; }

/* Navbar layout polish */
.custom-menu { background-color:#1C2127 !important; }
.custom-menu .logo-item img { height:30px; width:auto; display:block; }
.custom-menu .ui.search .ui.icon.input input {
  background: #383E47; /* darker slate */
  border: 1px solid #404854; /* subtle edge */
  color: #e6edf3;
  border-radius: 18px;
  padding: 6px 14px;
}
.custom-menu .ui.search .ui.icon.input i.search.icon { color:#e6edf3 !important; }

/* Make all navbar buttons look consistent (Blueprint-like) */
.custom-menu .ui.button,
.custom-menu .bp5-button { background:#215DB0 !important; color:#fff !important; border-radius:0 !important; border:1px solid #215DB0 !important; padding:4px 12px !important; height:28px !important; line-height:20px !important; display:inline-flex !important; align-items:center !important; font-weight:700 !important; }
.custom-menu .ui.button:hover,
.custom-menu .bp5-button:hover { background:#184990 !important; border-color:#184990 !important; }

/* Navbar refinements (dark, modern) */
.custom-menu { background-color:#1C2127 !important; border-bottom:1px solid rgba(255,255,255,0.1) !important; }
.custom-menu .ui.search .ui.icon.input input { background: #383E47; border:1px solid #404854; color:#e6edf3; border-radius:20px; padding:8px 15px; }
.custom-menu .logo-item img { width:110px; height:auto; }

/* Custom navbar (non-Semantic) */
.va-navbar { position: fixed; top:0; left:0; right:0; height:44px; background:#1C2127; border-bottom:1px solid rgba(255,255,255,0.08); display:grid; grid-template-columns:auto 1fr auto; align-items:center; z-index:2600; }
.va-nav-left { display:flex; align-items:center; justify-content:flex-start; height:100%; padding:0 12px; }
.va-logo { height:16px; width:auto; display:block;}
/* Absolutely center search so it remains visually 50/50 regardless of right-side width */
.va-nav-center { position:fixed; left:50%; transform:translateX(-50%); top:0; height:44px; display:flex; align-items:center; justify-content:center; pointer-events:auto; z-index:2601; width:auto; }
.va-search { width:520px; max-width:90%; position: relative; }
.va-search .ui.icon.input {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.va-search .ui.icon.input input { padding-right:28px; }
.va-search .ui.icon.input i.search.icon { position:absolute; right:8px; top:50%; transform:translateY(-50%); margin:0; color:#e6edf3 !important; }
.va-search .ui.icon.input input { background: #383E47; border:1px solid #404854; color:#e6edf3; border-radius:18px; padding:6px 14px; height:28px; line-height:28px; }
.va-search .ui.icon.input input,
.va-search .ui.icon.input input::placeholder,
.va-search .results,
.va-search .results * { font-family: 'JetBrains Mono','IBM Plex Sans', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; color:#e6edf3; }
.va-search .results { max-height: 200px; overflow-y: auto; width: 100%; }
/* Normalize the magnifier icon: remove circular background from Semantic UI */
.va-search .ui.icon.input i.search.icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  border-radius: 0 !important;
  padding: 0 !important;
  pointer-events: none;
}
.va-search .ui.icon.input i.search.icon { color:#e6edf3 !important; }
.va-nav-right { justify-self:end; align-self:center; height:44px; display:flex; align-items:center; justify-content:flex-end; gap:10px; padding-right:12px; }
.va-btn { display:inline-flex; align-items:center; height:28px; padding:0 12px; background:#215DB0; color:#fff; font-weight:700; text-decoration:none; border:1px solid #215DB0; border-radius:0; white-space:nowrap; font-size:12px; line-height:28px; }
.va-btn:hover { background:#184990; border-color:#184990; color:#d0d6dc; }
.va-btn:active, .va-btn:focus { color:#d0d6dc; }
.va-help-btn { all: unset; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; background:transparent; color:#e6edf3; border:1px solid rgba(255,255,255,0.35); border-radius:4px; cursor:pointer; }
.va-help-btn:hover { background:rgba(255,255,255,0.1); color:#fff; border-color:rgba(255,255,255,0.5); }
.va-badge { display:inline-flex; align-items:center; justify-content:center; height:28px; padding:0 10px; background:transparent; color:#e6edf3; border:1px solid rgba(255,255,255,0.35); border-radius:4px; font-weight:700; font-size:12px; letter-spacing:0.2px; }

/* Tab strips to resemble Blueprint tabs */
.tabstrip {
  background: #f8fafc;
  border-bottom: 1px solid var(--va-border);
}
.tabstrip .tab {
  background: var(--va-surface);
  border: 1px solid var(--va-border);
  color: var(--va-text);
  font-family: 'JetBrains Mono','IBM Plex Sans', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.tabstrip .tab:hover { border-color: var(--va-muted); }
.tabstrip .max-btn {
  color: var(--va-subtext);
}

/* Cards: sharper Blueprint elevations */
.dock-card {
  background: var(--va-surface);
  box-shadow: 0 1px 1px rgba(16,22,26,0.1), 0 0 0 1px rgba(16,22,26,0.08);
}

/* Splitters: subtle Blueprint handle */
.splitter .grip { background: #494a4b; }
.splitter.vertical .grip { width: 6px; }
.splitter.horizontal .grip { height: 6px; }

/* Inputs and search */
.ui.search .prompt { font-family: var(--va-font); }
.ui.search .results { border-color: var(--va-border); font-family: var(--va-font) !important; }
.ui.search .result, .ui.search .results .result .title, .ui.search .results .result .description { font-family: var(--va-font) !important; }

/* Remove odd focus outlines from iframes/maps but keep keyboard focus elsewhere */
.dock-card iframe:focus, .dock-card #map:focus, .dock-card #map .leaflet-container:focus { outline: none; }

/* Leaflet controls font */
.leaflet-control { font-family: var(--va-font); }

/* Map pin styles (dark blue default, green selected) */
.custom-div-icon .va-pin-wrap { position: relative; display:block; }
.custom-div-icon .va-svg-pin { display:block; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)); }
.custom-div-icon .va-pin-pulse { position:absolute; left:50%; top:108%; width:12px; height:12px; transform: translate(-50%, 0); border:3px solid rgba(33,93,176,0.7); border-radius:50%; opacity:0; animation: va-pin-pulse 0.9s ease-out 3; pointer-events:none; }
@keyframes va-pin-pulse { 0% { transform: translate(-50%, 0) scale(0.7); opacity: .85; } 70% { transform: translate(-50%, 0) scale(2.0); opacity: 0.3; } 100% { transform: translate(-50%, 0) scale(2.4); opacity: 0; } }

/* Leaflet control + popup harmonization */
.leaflet-control-zoom a,
.leaflet-control a.leaflet-control-layers-toggle {
  background:#ffffff !important; color:#1f2933 !important; border:1px solid #d8e1e8 !important;
  width:28px; height:28px; line-height:28px; border-radius:6px !important; box-shadow:0 1px 2px rgba(16,22,26,0.12);
}
/* Make sure the default Layers toggle shows an icon even without external assets */
.leaflet-control a.leaflet-control-layers-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23182026' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5Z'/%3E%3Cpath d='m2 17 10 5 10-5'/%3E%3Cpath d='m2 12 10 5 10-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
}
.leaflet-control-zoom a:hover,
.leaflet-control a.leaflet-control-layers-toggle:hover { background:#f2f5f8 !important; }
/* Stabilize Leaflet control stack to avoid hover jiggle */
.leaflet-bar a { border-bottom: 1px solid #d8e1e8 !important; }
.leaflet-bar a:last-child { border-bottom: none !important; }
.leaflet-control-attribution { background: rgba(255,255,255,0.85); color:#5c7080; font: 11px/1.2 var(--va-font); border-radius:4px; padding:2px 6px; }
.leaflet-popup-content-wrapper { background:#fff; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,0.15); font-family: var(--va-font); padding:0; overflow:hidden; }
.leaflet-popup-content { margin:0; padding:6px 26px 6px 10px; font-size:12px; }
.leaflet-popup-tip { background:#252a31; }

/* Map controls: remove hover movement and transitions */
.leaflet-control .leaflet-bar a,
.leaflet-control a.leaflet-control-layers-toggle {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  line-height: 28px;
  transition: background-color .12s ease, color .12s ease !important;
  transform: none !important;
}
.leaflet-control .leaflet-bar a:hover,
.leaflet-control .leaflet-bar a:active,
.leaflet-control a.leaflet-control-layers-toggle:hover,
.leaflet-control a.leaflet-control-layers-toggle:active {
  transform: none !important;
  margin: 0 !important;
  border-width: 1px !important;
}

/* P&IDs header inside its card should not overflow */
#pid-box .ui.menu { margin: 0; border: 0; border-bottom: 1px solid var(--va-border); box-shadow: none; }
#pid-box .ui.menu .item { padding: 6px 8px; }

/* Pan indicator for P&ID viewer */
.pid-pan-indicator {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 5;
}
.pid-pan-indicator.visible { opacity: 1; }
.pid-pan-indicator svg { width: 16px; height: 16px; display:block; }
.pid-panning svg { cursor: grabbing !important; }

/* Blueprint-like modal styling applied to Semantic UI modal markup */
.ui.dimmer.modals.visible.active { background: rgba(16,22,26,0.4); }
.ui.modal {
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(16,22,26,0.2), 0 2px 8px rgba(16,22,26,0.15) !important;
  background: var(--va-surface) !important;
  color: var(--va-text) !important;
  font-family: var(--va-font) !important;
}
.ui.modal > .header {
  font-weight: 700;
  padding: 14px 18px;
  border-bottom: 1px solid var(--va-border);
}
.ui.modal > .content { padding: 18px; }
.ui.modal > .actions { padding: 12px 18px; border-top: 1px solid var(--va-border); }
.ui.modal .button.primary { background: var(--va-accent-strong); color: #fff; }
.ui.modal .button.secondary { background: #f5f8fa; color: var(--va-text); border: 1px solid var(--va-border); }

/* PID Blueprint-style tabs */
.bp-tabs-header { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 6px 8px; background: #f8fafc; border-bottom: 1px solid var(--va-border); gap: 8px; }
.bp-tabs-actions { display: flex; gap: 6px; align-items: center; }
.bp-tabs-strip { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bp-tab-item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--va-border); border-radius: 3px; background: #fff; color: var(--va-text); cursor: pointer; font-weight: 700; font-size: 12px; font-family: 'JetBrains Mono','IBM Plex Sans', monospace; }
.bp-tab-item.active { box-shadow: inset 0 0 0 1px #215DB0; color: #215DB0; }
.bp-tab-close { all: unset; display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; color: #5c7080; border-radius: 3px; }
.bp-tab-close:hover { background: #eef2f6; color: #182026; }
.bp-panels { position: relative; width: 100%; height: calc(100% - 44px); overflow: hidden; }
.bp-panel { display: none; height: 100%; position: relative; overflow: auto; }
.bp-panel.active { display: block; }
/* Make inline SVGs fill the panel */
.bp-panel > svg { width: 100% !important; height: 100% !important; display: block; }

/* Reuse icon button styling */
.bp-icon-btn { all: unset; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: #5c7080; cursor: pointer; }
.bp-icon-btn:hover { background: #eef2f6; color: #182026; }

/* Next button chip */
.bp-next { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid var(--va-border); border-radius:3px; background:#fff; color:#182026; font-weight:700; font-size:12px; font-family:'JetBrains Mono','IBM Plex Sans', monospace; cursor:pointer; }
.bp-next:hover { background:#eef2f6; }

/* P&ID toolbar removed as requested */
.pid-tool .tip { position:absolute; left:42px; top:50%; transform:translateY(-50%); background:#182026; color:#fff; padding:4px 8px; font-size:12px; border-radius:4px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease; }
.pid-tool:hover .tip { opacity:1; }

/* Generic loader (spinner) */
.va-loader-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: transparent; z-index: 10; }
.spinner { width:34px; height:34px; border:3px solid rgba(24,32,38,0.18); border-top-color:#215DB0; border-radius:50%; animation:spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* IDP2 button styling (header actions) */
/* Remove old small-icon sizing and use a full-width chip like MI */
/* Note: a previous rule set width/height to 20px; this replaces it. */
/* Keep this block before the detailed styles below for clarity. */
.bp-tabs-actions .idp2-logo { width:auto; height:auto; opacity:0.95; transition:opacity 0.2s ease; margin-right:6px; }
.bp-tabs-actions .idp2-logo:hover { opacity:1; }

/* IDP2 button styling - Single-line application button with nice arrow icon */
.bp-tabs-actions .idp2-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px; /* slightly shorter */
  background: #000000; /* solid dark, clearer contrast */
  border: none;        /* no border */
  border-radius: 0;    /* squared corners */
  text-decoration: none;
  transition: all 0.2s ease;
  margin-right: 8px;
  min-width: 200px;
  width: auto;
  height: auto;
  white-space: nowrap; /* keep on one line */
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: relative;
}
.bp-tabs-actions .idp2-logo::after {
  content: '';
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15,3 21,3 21,9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  margin-left: auto;
  opacity: 1; /* ensure icon is bright white */
  transition: all 0.2s ease;
}
.bp-tabs-actions .idp2-logo img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  /* keep original logo colors */
  filter: none;
}
.bp-tabs-actions .idp2-logo .button-text {
  font-size: 11px;
  font-weight: 500;
  color: #ffffff;
  flex-grow: 1;
  white-space: nowrap; /* prevent wrapping */
}
.bp-tabs-actions .idp2-logo:hover {
  background: #111111; /* subtle hover without border */
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.bp-tabs-actions .idp2-logo:hover::after {
  opacity: 1;
  transform: translateX(2px);
}

.va-billboard { position:absolute; top:14px; left:14px; max-width: 420px; background:#1C2127; color:#e6edf3; border:1px solid rgba(255,255,255,0.12); border-radius:10px; box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.2); z-index: 50; overflow:hidden; }
.va-billboard .bb-header { display:flex; align-items:center; justify-content:flex-end; gap:6px; padding:6px 8px; border-bottom:1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.15); }
.va-billboard .bb-body { padding:12px 14px 10px; }
.va-billboard .bb-title { font-weight:800; color:#fff; margin:0 0 6px 0; font-size:14px; }
.va-billboard .bb-desc { color:#cbd5e1; font-size:12px; margin:0 0 10px 0; }
.va-billboard .bb-actions { display:flex; align-items:center; gap:8px; padding:0 14px 12px; }
.va-billboard .bb-btn { all:unset; display:inline-flex; align-items:center; justify-content:center; height:26px; padding:0 10px; background:#215DB0; color:#fff; font-weight:700; text-decoration:none; border:1px solid #215DB0; border-radius:4px; font-size:12px; cursor:pointer; }
.va-billboard .bb-btn:hover { background:#184990; border-color:#184990; }
.va-billboard .bb-icon { all:unset; display:inline-flex; width:26px; height:26px; align-items:center; justify-content:center; border-radius:6px; color:#cbd5e1; cursor:pointer; }
.va-billboard .bb-icon:hover { background: rgba(255,255,255,0.08); color:#fff; }
.va-billboard .bb-close { margin-left:auto; }

/* Hide the entire tabs header when no tabs are present */
.bp-tabs-header:has(.bp-tabs-strip[style*="display: none"]) { display: none !important; }

/* Hide fullscreen per-drawing (requested) */
.bp-tabs-actions #fullscreen-button { display:none; }

/* Default P&ID panel behavior: only show when active, or when no drawing tabs are active */
.bp-panel[data-tab="first"] { display: none; }
.bp-panel[data-tab="first"].active { display: block; }
/* When there are no active drawing tabs, show the default panel */
#tab-manager:not(:has(.bp-panel.active:not([data-tab="first"]))) .bp-panel[data-tab="first"] { display: block; }

/* Hide Matterport onboarding and help elements */
iframe[id*="showcase"] .onboarding,
iframe[id*="showcase"] .help,
iframe[id*="showcase"] .guides,
iframe[id*="showcase"] [class*="onboarding"],
iframe[id*="showcase"] [class*="help"],
iframe[id*="showcase"] [class*="guide"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Breadcrumbs prompt */
.bp-breadcrumbs { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; margin: 0 0 0 12px; border: 1px solid var(--va-border); background: #fff; border-radius: 6px; font-family: 'JetBrains Mono','IBM Plex Sans', monospace; color: var(--va-text); box-shadow: 0 1px 1px rgba(16,22,26,0.05); }
.bp-breadcrumbs.in-nav { display:inline-flex; vertical-align: middle; }
.bp-breadcrumbs .crumb { font-weight: 700; color: #394b59; }
.bp-breadcrumbs .crumb.primary { background: #137cbd; color: #fff; padding: 3px 8px; border-radius: 3px; text-decoration: none; }
.bp-breadcrumbs .sep { color: #8a9ba8; }
.right-section{ position:absolute; right:12px; top:50%; transform: translateY(-50%); height:auto; display:flex; align-items:center; gap:10px; }
.right-section .item{ padding:0 !important; }
.demo-tag{ display:inline-flex; align-items:center; justify-content:center; height:28px; padding:0 10px; background:transparent; color:#e6edf3; border:1px solid rgba(255,255,255,0.3); border-radius:4px; font-weight:700; font-size:12px; letter-spacing:0.2px; }

/* Asset card maximize/minimize functionality */
.dock-card.maximized {
  position: relative;
  z-index: 100;
}

/* Maximize button styling */
.max-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.max-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* Icon styling - ensure black color */
.max-btn svg {
  color: #000000;
  stroke: #000000;
}

/* Smooth transitions for expand/contract */
#asset-pane, #map-subpane, .splitter {
  transition: all 0.3s ease;
}