/* Dock layout styles: split panes, 60px gaps, rounded cards */
:root {
  --navbar-height: 44px;
  --split-gap: 18px; /* reduced gap between panes */
  --card-radius: 20px;
  --splitter-grip: #38393d;
  --card-bg: #ffffff;

}

#dock-root {
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  right: 0;
  bottom: 0; /* guarantees full-height below navbar */
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 12px; /* slight inner breathing room */
}

.dock {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0; /* prevent children from forcing overflow */
}

.dock-row { flex-direction: row; }
.dock-col { flex-direction: column; }

.dock-pane {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 220px; /* avoid push-out when resizing */
  min-height: 120px;
  box-sizing: border-box;
}

/* Ensure 50/50 split for main layout */
#dock-main > #pane-left,
#dock-main > #pane-right {
  flex: 1 1 50%;
}

/* 60px splitters serve as the visual gap; grip is centered */
.splitter {
  flex: 0 0 var(--split-gap);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: col-resize;
  z-index: 4; /* stay above iframes while dragging shield is active */
}
.splitter.horizontal { cursor: row-resize; }

.splitter .grip {
  background: var(--splitter-grip);
  border-radius: 8px;
}
.splitter.vertical .grip { width: 10px; height: 64px; }
.splitter.horizontal .grip { width: 64px; height: 10px; }

.dock-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.06);
  overflow: hidden;
  width: 100%;
  height: 100%;
  transition: border-radius .2s ease, box-shadow .2s ease, transform .2s ease;
}

.tabstrip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5.5px 10px;
  background: #f7f7f7;
  border-bottom: 1px solid #e6e6e6;
  position: relative;
  z-index: 2;
}
/* Keep the tabstrip clickable while a card is maximized over iframes */
.dock-card.maximized .tabstrip { position: relative; z-index: 101; background: rgba(248,250,252,0.92); backdrop-filter: blur(2px); }

.tabstrip .tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #ffffff;
  border: 1px solid #e1e1e1;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  color: #333;
  cursor: default;
  user-select: none;
}

.tabstrip .tab .tab-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.tabstrip .tab .tab-link {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #5c7080;
  text-decoration: none;
  border-radius: 3px;
  transition: all 0.15s ease;
}

.tabstrip .tab .tab-link:hover {
  background: #f5f8fa;
  color: #215DB0;
}

/* Clickable tab styling */
.tabstrip .clickable-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #ffffff;
  border: 1px solid #e1e1e1;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  color: #333;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

.tabstrip .clickable-tab:hover {
  background: #f5f8fa;
  border-color: #d8e1e8;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.tabstrip .clickable-tab .external-icon {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.tabstrip .clickable-tab:hover .external-icon {
  transform: translateX(2px);
}
.tabstrip .tab.asset-chip { position: relative; padding-right: 28px; cursor: default; }
.tabstrip .tab.asset-chip .chip-close { all: unset; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; display: inline-flex; align-items:center; justify-content:center; color:#5c7080; cursor:pointer; }
.tabstrip .tab.asset-chip .chip-close:hover { color:#182026; }
/* When chip-close is a sibling button (current markup), style like max-btn */
.tabstrip > .chip-close { all: unset; width: 28px; height: 28px; display:flex; align-items:center; justify-content:center; margin: 0 4px; border-radius:6px; color: var(--va-text); cursor:pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease; }
.tabstrip > .chip-close:hover { background:#eef2f6; }
.tabstrip > .chip-close:active { transform: scale(0.98); }
.tabstrip > .chip-close:focus-visible { outline: 2px solid #215DB0; outline-offset: 2px; border-radius:6px; }
.tabstrip > .chip-close svg { width: 18px; height: 18px; stroke-width: 2; }
.tabstrip .tab:active { cursor: default; }

.tabstrip .max-btn {
  margin-left: auto;
  border: none;
  background: transparent;
  font-size: 14px; /* button font-size (icons use own size) */
  line-height: 1;
  cursor: pointer;
  color: var(--va-text);
  width: 28px;   /* larger hit area */
  height: 28px;  /* larger hit area */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.tabstrip .max-btn:hover {
  background: rgba(0,0,0,0.06);
}
.tabstrip .max-btn:active { transform: scale(0.98); }
.tabstrip .max-btn:focus-visible { outline: 2px solid #215DB0; outline-offset: 2px; border-radius: 6px; }
.tabstrip .max-btn svg { width: 18px; height: 18px; }

/* Icon switching for expand/collapse states */
.tabstrip .max-btn.expand .icon-expand {
  display: block;
}

.tabstrip .max-btn.expand .icon-collapse {
  display: none;
}

.tabstrip .max-btn.collapse .icon-expand {
  display: none;
}

.tabstrip .max-btn.collapse .icon-collapse {
  display: block;
}

.dock-content {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #fff;
  overflow: hidden; /* clip children to rounded card */
  z-index: 1;
}

/* Ensure embedded viewers fill available space */
.dock-content iframe#showcase-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  border-radius: inherit;
}

.dock-content #map, .dock-content #map .leaflet-container {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  border-radius: inherit;
}

/* Layers toggle control styling */
.va-layer-ctrl { background:#fff; border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,0.2); overflow:visible; }
.va-layer-ctrl .va-layer-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; color:#182026 !important; background-repeat:no-repeat; background-position:center; background-size:18px 18px; box-sizing:border-box; padding:0; line-height:0; border:0; }
.va-layer-ctrl .va-layer-btn { 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 13.74a2 2 0 0 1-2 0L2.5 8.87a1 1 0 0 1 0-1.74L11 2.26a2 2 0 0 1 2 0l8.5 4.87a1 1 0 0 1 0 1.74z'/%3E%3Cpath d='m20 14.285 1.5.845a1 1 0 0 1 0 1.74L13 21.74a2 2 0 0 1-2 0l-8.5-4.87a1 1 0 0 1 0-1.74l1.5-.845'/%3E%3C/svg%3E"); }
.va-layer-ctrl svg { width:18px; height:18px; display:block; }
.va-layer-ctrl svg path { stroke:#182026; }
.va-layer-ctrl .va-layer-panel { position:absolute; right:0; margin-top:4px; background:#fff; border:1px solid #e1e6ea; border-radius:6px; padding:6px 8px; box-shadow:0 4px 12px rgba(0,0,0,0.15); }
.va-layer-ctrl .va-layer-item { display:flex; align-items:center; gap:6px; font-size:12px; color:#182026; white-space:nowrap; padding:4px 2px; }

.dock-content #pid-box {
  position: absolute;
  inset: 0;
}

/* Asset container - better spaced styling */
.asset-container {
  padding: 8px 10px !important;
  font-size: 12px;
  line-height: 1.4;
}

.asset-container h3, .asset-container h4 {
  margin: 10px 0 6px 0;
  font-size: 13px;
}

/* Asset card content - better spaced styling with Roboto for values */
/* Asset card styling - now uses dock-card structure with tabstrip */

/* Equipment header in details panel */
.equipment-header {
  padding: 12px 16px;
  border-bottom: 1px solid #e6e6e6;
  background: #f8f9fa;
  margin-bottom: 8px;
}

.equipment-tag {
  font-weight: 800;
  font-family: 'JetBrains Mono', 'IBM Plex Sans', monospace;
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.equipment-sub {
  color: #5c7080;
  font-size: 12px;
  font-weight: 500;
}
/* MI button styling - Single-line application button with nice arrow icon */
.asset-info .mi-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;
  min-width: 180px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: relative;
}
.asset-info .mi-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;
}
.asset-info .mi-logo img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  /* keep original logo colors */
  filter: none;
}
.asset-info .mi-logo .button-text {
  font-size: 11px;
  font-weight: 500;
  color: #ffffff;
  flex-grow: 1;
}
.asset-info .mi-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);
}
.asset-info .mi-logo:hover::after {
  opacity: 1;
  transform: translateX(2px);
}


/* Asset tabs within card - compact size matching drawing tabs */
.asset-tabs { display:flex; gap:6px; padding:6px 8px; background:#f8fafc; border-bottom:1px solid #e6e6e6; }
.asset-tab { all:unset; padding:4px 8px; border:1px solid var(--va-border); border-radius:3px; background:#fff; color:#182026; font-weight:700; cursor:pointer; font-family:'JetBrains Mono','IBM Plex Sans', monospace; font-size:12px; display:inline-flex; align-items:center; }
.asset-tab.active { box-shadow: inset 0 0 0 1px #215DB0; color:#215DB0; }
.asset-panels { padding:8px 10px; overflow:auto; height: calc(100% - 88px); }
.asset-panel { display:none; }
.asset-panel.active { display:block; }

/* Inspection table - better spaced with Roboto for data */
.asset-insp-title { font-weight:800; margin:8px 0 6px 0; font-family:'JetBrains Mono','IBM Plex Sans', monospace; font-size:12px; }
/* Calendar heatmap styles */
.insp-heatmap { position: relative; display:flex; gap:2px; padding:6px 0 8px 0; align-items:flex-start; }
.insp-week { display:flex; flex-direction:column; gap:2px; }
.insp-day { width:10px; height:10px; background:#ebedf0; border-radius:2px; box-sizing:border-box; }
.insp-day.lvl-0 { background:#ebedf0; }
.insp-day.lvl-1 { background:#9be9a8; }
.insp-day.lvl-2 { background:#40c463; }
.insp-day.lvl-3 { background:#30a14e; }
.insp-day.lvl-4 { background:#216e39; }
.insp-day.upcoming { outline: 2px solid #215DB0; background:#fff; }
.insp-months { display:flex; gap:2px; margin:4px 0; }
.insp-month-label { width:12px; text-align:center; font-size:10px; color:#5c7080; }
.insp-legend { display:flex; flex-direction:column; flex-wrap:wrap; align-items:flex-start; gap:6px; margin-top:8px; color:#5c7080; font-size:11px; }
.insp-legend .insp-day { width:10px; height:10px; display:inline-block; }
.insp-legend .legend-upcoming { margin-left: 8px; display:inline-flex; align-items:center; gap:4px; }
.insp-legend .legend-item { display:inline-flex; align-items:center; gap:6px; color:#182026; font-weight:600; }
.insp-heatmap-tooltip { position:absolute; display:none; padding:4px 6px; background:#182026; color:#fff; font-size:11px; border-radius:3px; pointer-events:none; z-index:2; }

/* Scheduled 12 months timeline */
.insp-year { display:flex; gap:8px; margin-top:8px; }
.insp-month { flex:1 1 0; min-width:54px; }
.insp-month-head { font-size:11px; color:#5c7080; margin-bottom:4px; }
.insp-month-lane { position:relative; height:12px; background:#f1f3f5; border-radius:6px; }
.insp-marker { position:absolute; top:50%; width:8px; height:8px; border-radius:50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 2px #fff; }
.insp-legend .legend-dot { width:10px; height:10px; border-radius:50%; display:inline-block; margin:0 4px 0 8px; }

/* Method lanes timeline */
.insp-axis { display:flex; gap:0; margin:4px 0 6px 90px; }
.insp-axis-tick { flex:1 1 0; text-align:center; font-size:11px; color:#394b59; font-weight:600; }
.insp-lanes { display:flex; flex-direction:column; gap:8px; }
.insp-lane { display:flex; align-items:center; gap:10px; }
.insp-lane-label { width:80px; text-align:right; font-size:11px; color:#182026; font-weight:600; }
.insp-lane-track { position:relative; flex:1 1 auto; height:10px; background:#c7ced6; border-radius:6px; }
.insp-lane-track .insp-marker { background:#215DB0; }
.insp-lane-track .insp-marker.past { background:#1C6E42; }
.insp-lane-track .insp-marker.future { background:#EC9A3C; }
.asset-insp-table { width:100%; margin-left:0; border-collapse: collapse; font-size:12px; }
.asset-panel[data-tab="asset-inspections"] .asset-insp-table { width:calc(100% - 90px); margin-left:90px; }
.asset-insp-table th, .asset-insp-table td { text-align:left; padding:5px 7px; border-bottom:1px solid #eceff2; }
.asset-insp-table th:nth-child(1), .asset-insp-table td:nth-child(1) { width: 160px; }
.asset-insp-table th { background:#f8fafc; font-weight:700; font-family:'JetBrains Mono','IBM Plex Sans', monospace; }
.asset-insp-table td { font-family: 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; }

/* Blueprint-like Non-Ideal State */
.bp-nonideal { display:flex; align-items:center; gap:12px; padding:14px; border:1px dashed var(--va-border); border-radius:8px; background:#ffffff; color:#5c7080; }
.bp-nonideal .ni-icon { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; color:#bfccd6; }
.bp-nonideal .ni-body { display:flex; flex-direction:column; gap:4px; }
.bp-nonideal .ni-title { font-weight:800; color:#182026; font-size:14px; }
.bp-nonideal .ni-desc { font-size:12px; }
.bp-nonideal .ni-actions { margin-top:6px; display:flex; gap:6px; }
.bp-nonideal .ni-btn { all:unset; padding:6px 10px; border:1px solid var(--va-border); border-radius:3px; cursor:pointer; font-weight:700; font-size:12px; color:#182026; background:#fff; }
.bp-nonideal .ni-btn.primary { background:#137cbd; color:#fff; border-color:#137cbd; }

/* Ensure Leaflet respects rounding */
.dock-content #map .leaflet-container {
  border-radius: inherit;
}

/* Maximize state - takes entire viewport */
#dock-root .dock-card.maximized {
  position: fixed !important;
  z-index: 6000 !important;
  top: var(--navbar-height) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: calc(100vh - var(--navbar-height)) !important;
  border-radius: 0 !important; /* no rounded corners when maximized for full coverage */
  box-shadow: none !important;
  background: var(--va-surface) !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Floating exit button for maximized cards */
.dock-exit-btn { position:absolute; top:8px; right:8px; z-index: 102; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #d8e1e8; background:#ffffff; color:#182026; border-radius:6px; cursor:pointer; box-shadow:0 2px 6px rgba(16,22,26,0.15); }
.dock-exit-btn:hover { background:#f3f6f9; }

/* Prevent body scroll jank while maximized */
body.dock-maximized {
  overflow: hidden;
}

/* Two-column layout for Equipment Details when maximized on wide screens */
@media (min-width: 900px) {
  .dock-card.maximized .asset-tabs { display: none; }
  .dock-card.maximized .asset-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    height: calc(100% - 12px);
    overflow: hidden;
  }
  .dock-card.maximized .asset-panel {
    display: block;
    max-height: 100%;
    overflow: auto;
    background: #ffffff;
    border: 1px solid var(--va-border);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(16,22,26,0.06);
    padding: 12px 12px 14px;
  }
  .dock-card.maximized .asset-panel[data-tab="asset-details"] { grid-column: 1; }
  .dock-card.maximized .asset-panel[data-tab="asset-inspections"] { grid-column: 2; }

  /* Panel titles as subtle chips inside cards */
  .dock-card.maximized .asset-panel[data-tab="asset-details"]::before,
  .dock-card.maximized .asset-panel[data-tab="asset-inspections"]::before {
    content: attr(data-title);
    display: inline-block;
    margin: 0 0 8px 0;
    padding: 4px 10px;
    background: #ffffff;
    border: 1px solid var(--va-border);
    border-radius: 3px; /* square-ish tabs like small view */
    font-family: 'JetBrains Mono','IBM Plex Sans', monospace;
    font-weight: 700;
    font-size: 12px;
    color: #182026;
  }
}

/* Full-viewport transparent overlay used during drag to capture mouse over iframes */
.dock-drag-shield {
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5000;
  background: transparent;
}

/* Subtle zoom-in animation on maximize */
.dock-card.maximized { animation: dock-zoom-in 160ms ease; }
@keyframes dock-zoom-in { from { transform: scale(0.985); opacity: .98; } to { transform: scale(1); opacity: 1; } }

/* Zoom slider (volume-like) in P&IDs header */
.zoom-ctrl { display:inline-flex; align-items:center; gap:10px; margin: 0 10px; position:relative; }
.tabstrip[data-pane="pane-bottom"] .zoom-ctrl { margin: 0 auto; } /* center inside Drawings tabstrip */
.zoom-ctrl .zoom-label { font-size:12px; color:#182026; font-weight:700; }
/* Custom slider */
.va-slider { position: relative; width: 260px; height: 20px; display:inline-block; }
.va-slider .va-track { position:absolute; left:0; right:0; top:50%; height:6px; transform: translateY(-50%); background:#d3dae1; border-radius:999px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); }
.va-slider .va-fill { position:absolute; left:0; top:0; bottom:0; width:50%; background:#215DB0; border-radius:999px; box-shadow:none; }
.va-slider .va-thumb { position:absolute; top:50%; left:50%; width:14px; height:14px; transform: translate(-50%, -50%); background:#fff; border: 2px solid #215DB0; border-radius:50%; box-shadow: 0 1px 2px rgba(0,0,0,0.18); display:flex; align-items:center; justify-content:center; }
.va-slider:focus, .va-slider:focus-visible { outline: none; }
.va-slider:focus-within .va-thumb { box-shadow: 0 0 0 3px rgba(33,93,176,0.25), 0 1px 2px rgba(0,0,0,0.18); }
.va-slider .va-bubble { position:absolute; top:-28px; padding:2px 6px; border-radius:3px; background:#182026; color:#fff; font-size:11px; white-space:nowrap; transform: translateY(-2px); pointer-events:none; }
.va-slider .va-bubble::after { content:''; position:absolute; top:100%; left:10px; border:6px solid transparent; border-top-color:#182026; }

/* Overlay expansion (80% width/height with dim background) */