/* ══════════════════════════════════════════
   Blueprint Markup — Drawing Review & Annotation
   ══════════════════════════════════════════ */

/* ── Main Layout ── */
.bpm-viewer{display:flex;flex-direction:column;gap:16px}
.bpm-top-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bpm-drawing-select{flex:1;min-width:200px}
.bpm-drawing-select select{width:100%;padding:8px 12px;background:var(--graphite);border:1px solid rgba(181,183,185,.15);border-radius:8px;color:#fff;font-size:13px;font-weight:600;font-family:inherit}
.bpm-drawing-select select:focus{outline:none;border-color:var(--bronze)}
.bpm-revision-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;color:#6abf69;background:rgba(106,191,105,.10);border:1px solid rgba(106,191,105,.20);white-space:nowrap}
.bpm-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;background:rgba(181,183,185,.06);border:1px solid rgba(181,183,185,.12);border-radius:8px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap;font-family:inherit}
.bpm-btn:hover{color:#fff;border-color:rgba(140,106,62,.40);background:rgba(140,106,62,.10)}
.bpm-btn.active,.bpm-btn--primary{color:var(--bronze);border-color:rgba(140,106,62,.50);background:rgba(140,106,62,.15)}
.bpm-btn--primary:hover{background:rgba(140,106,62,.25)}
.bpm-btn svg{width:14px;height:14px;flex-shrink:0}

/* ── Canvas Workspace ── */
.bpm-workspace{position:relative;display:flex;background:rgba(28,30,33,.6);border:1px solid rgba(181,183,185,.12);border-radius:var(--r);overflow:hidden}
.bpm-workspace--sidebar-open .bpm-canvas-wrap{flex:1;min-width:0}

/* ── Toolbar ── */
.bpm-toolbar{display:flex;align-items:center;gap:4px;padding:8px 12px;background:rgba(46,49,54,.95);border-bottom:1px solid rgba(181,183,185,.10);flex-wrap:wrap}
.bpm-toolbar-group{display:flex;align-items:center;gap:4px}
.bpm-toolbar-sep{width:1px;height:22px;background:rgba(181,183,185,.12);margin:0 4px;flex-shrink:0}
.bpm-tool{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:rgba(181,183,185,.04);border:1px solid rgba(181,183,185,.10);border-radius:8px;color:var(--muted);cursor:pointer;transition:all .15s}
.bpm-tool:hover{color:#fff;border-color:rgba(140,106,62,.30);background:rgba(140,106,62,.08)}
.bpm-tool.active{color:var(--bronze);border-color:rgba(140,106,62,.50);background:rgba(140,106,62,.15)}
.bpm-tool svg{width:16px;height:16px}
.bpm-tool-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:0 6px;white-space:nowrap}
.bpm-color-swatch{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer;transition:transform .1s}
.bpm-color-swatch.active{border-color:#fff;transform:scale(1.15)}
.bpm-zoom-display{font-size:11px;font-weight:700;color:var(--muted);min-width:40px;text-align:center;letter-spacing:.02em}

/* ── Canvas Area ── */
.bpm-canvas-wrap{flex:1;min-width:0;display:flex;flex-direction:column}
.bpm-canvas-container{position:relative;flex:1;min-height:520px;overflow:hidden;cursor:crosshair;background:repeating-linear-gradient(0deg,transparent,transparent 19px,rgba(181,183,185,.03) 19px,rgba(181,183,185,.03) 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,rgba(181,183,185,.03) 19px,rgba(181,183,185,.03) 20px);background-color:rgba(15,17,20,.85)}
.bpm-canvas-container.bpm-tool-pan{cursor:grab}
.bpm-canvas-container.bpm-tool-pan:active{cursor:grabbing}
.bpm-canvas-container.bpm-tool-select{cursor:default}

.bpm-drawing-layer{position:absolute;top:0;left:0;transform-origin:0 0;transition:none}
.bpm-drawing-layer img{display:block;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.bpm-overlay-canvas{position:absolute;top:0;left:0;pointer-events:auto}

/* ── Placeholder ── */
.bpm-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px}
.bpm-placeholder svg{width:56px;height:56px;color:var(--muted);opacity:.25;margin-bottom:12px}
.bpm-placeholder p{font-size:14px;color:var(--muted);margin:0 0 4px}
.bpm-placeholder small{font-size:12px;color:var(--muted);opacity:.6}

/* ── Markup Pins on Canvas ── */
.bpm-marker{position:absolute;z-index:3;cursor:pointer;transition:transform .1s}
.bpm-marker:hover{transform:scale(1.12)}
.bpm-marker-dot{width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.45);box-shadow:0 2px 8px rgba(0,0,0,.35)}
.bpm-marker-num{transform:rotate(45deg);font-size:10px;font-weight:800;color:#fff}
.bpm-marker--comment .bpm-marker-dot{background:#3b82f6}
.bpm-marker--issue .bpm-marker-dot{background:#ef4444}
.bpm-marker--note .bpm-marker-dot{background:#f59e0b}
.bpm-marker.bpm-marker--selected .bpm-marker-dot{border-color:#fff;box-shadow:0 0 0 3px rgba(140,106,62,.5),0 2px 12px rgba(0,0,0,.5)}

/* ── Sidebar ── */
.bpm-sidebar{width:380px;flex-shrink:0;background:rgba(46,49,54,.97);border-left:1px solid rgba(181,183,185,.10);display:none;flex-direction:column;overflow:hidden}
.bpm-workspace--sidebar-open .bpm-sidebar{display:flex}
.bpm-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(181,183,185,.10);gap:8px}
.bpm-sidebar-title{font-size:14px;font-weight:700;color:#fff;margin:0;display:flex;align-items:center;gap:6px}
.bpm-sidebar-close{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:color .15s}
.bpm-sidebar-close:hover{color:#fff}
.bpm-sidebar-body{flex:1;overflow-y:auto;padding:0}
.bpm-sidebar-tabs{display:flex;border-bottom:1px solid rgba(181,183,185,.10)}
.bpm-sidebar-tab{flex:1;padding:10px;text-align:center;font-size:12px;font-weight:650;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit}
.bpm-sidebar-tab:hover{color:#fff}
.bpm-sidebar-tab.active{color:var(--bronze);border-bottom-color:var(--bronze)}
.bpm-sidebar-panel{display:none;padding:14px}
.bpm-sidebar-panel.active{display:block}

/* ── Comment Thread ── */
.bpm-thread{display:grid;gap:10px}
.bpm-comment{background:rgba(28,30,33,.5);border:1px solid rgba(181,183,185,.08);border-radius:10px;padding:12px;transition:border-color .15s}
.bpm-comment:hover{border-color:rgba(181,183,185,.15)}
.bpm-comment-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.bpm-comment-avatar{width:28px;height:28px;border-radius:50%;background:rgba(140,106,62,.15);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--bronze);flex-shrink:0}
.bpm-comment-author{font-size:12px;font-weight:700;color:#fff}
.bpm-comment-role{font-size:10px;color:var(--muted);font-weight:600}
.bpm-comment-time{font-size:10px;color:var(--muted);margin-left:auto;white-space:nowrap}
.bpm-comment-body{font-size:13px;color:var(--ash);line-height:1.5}
.bpm-comment-body .bpm-mention{color:#63b3ed;font-weight:600;cursor:pointer}
.bpm-comment-body .bpm-mention:hover{text-decoration:underline}
.bpm-comment-actions{display:flex;gap:10px;margin-top:8px;padding-top:6px;border-top:1px solid rgba(181,183,185,.06)}
.bpm-comment-action{background:none;border:none;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:3px;transition:color .15s;font-family:inherit}
.bpm-comment-action:hover{color:var(--bronze)}
.bpm-comment-action svg{width:12px;height:12px}
.bpm-reply-count{font-size:11px;font-weight:600;color:#63b3ed;cursor:pointer;margin-top:6px;display:inline-flex;align-items:center;gap:4px}
.bpm-reply-count:hover{text-decoration:underline}

/* ── Reply Thread Nested ── */
.bpm-replies{padding-left:16px;border-left:2px solid rgba(140,106,62,.20);margin-top:8px;display:grid;gap:8px}

/* ── Comment Composer ── */
.bpm-composer{padding:12px 14px;border-top:1px solid rgba(181,183,185,.10);background:rgba(46,49,54,.90)}
.bpm-composer-inner{position:relative}
.bpm-composer textarea{width:100%;min-height:60px;padding:10px 12px;background:rgba(28,30,33,.6);border:1px solid rgba(181,183,185,.12);border-radius:8px;color:#fff;font-size:13px;font-family:inherit;resize:vertical;line-height:1.5}
.bpm-composer textarea::placeholder{color:var(--muted)}
.bpm-composer textarea:focus{outline:none;border-color:rgba(140,106,62,.50)}
.bpm-composer-actions{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.bpm-composer-hint{font-size:11px;color:var(--muted)}

/* ── Mention Dropdown ── */
.bpm-mention-dropdown{position:absolute;bottom:100%;left:0;right:0;background:var(--graphite);border:1px solid rgba(181,183,185,.15);border-radius:8px;max-height:180px;overflow-y:auto;z-index:10;display:none;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.bpm-mention-dropdown.open{display:block}
.bpm-mention-option{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;transition:background .1s}
.bpm-mention-option:hover,.bpm-mention-option.highlighted{background:rgba(140,106,62,.12)}
.bpm-mention-option-avatar{width:24px;height:24px;border-radius:50%;background:rgba(140,106,62,.12);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--bronze);flex-shrink:0}
.bpm-mention-option-name{font-size:12px;font-weight:600;color:#fff}
.bpm-mention-option-role{font-size:10px;color:var(--muted)}

/* ── Markup List (sidebar) ── */
.bpm-markup-list{display:grid;gap:8px}
.bpm-markup-entry{display:flex;gap:10px;padding:10px 12px;background:rgba(28,30,33,.5);border:1px solid rgba(181,183,185,.08);border-radius:8px;cursor:pointer;transition:border-color .15s;align-items:flex-start}
.bpm-markup-entry:hover{border-color:rgba(140,106,62,.35)}
.bpm-markup-entry.active{border-color:rgba(140,106,62,.50);background:rgba(140,106,62,.06)}
.bpm-markup-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bpm-markup-icon--comment{background:rgba(59,130,246,.15);color:#3b82f6}
.bpm-markup-icon--issue{background:rgba(239,68,68,.15);color:#ef4444}
.bpm-markup-icon--note{background:rgba(245,158,11,.15);color:#f59e0b}
.bpm-markup-icon svg{width:14px;height:14px}
.bpm-markup-info{flex:1;min-width:0}
.bpm-markup-info-title{font-size:12px;font-weight:650;color:#fff;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bpm-markup-info-meta{font-size:10px;color:var(--muted)}
.bpm-markup-info-preview{font-size:11px;color:var(--ash);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bpm-markup-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;white-space:nowrap;flex-shrink:0}
.bpm-markup-badge--open{background:rgba(59,130,246,.12);color:#3b82f6}
.bpm-markup-badge--resolved{background:rgba(106,191,105,.12);color:#6abf69}

/* ── Revision Timeline ── */
.bpm-revisions{display:grid;gap:10px}
.bpm-revision{display:flex;gap:10px;padding:12px;background:rgba(28,30,33,.5);border:1px solid rgba(181,183,185,.08);border-radius:8px;transition:border-color .15s;cursor:pointer}
.bpm-revision:hover{border-color:rgba(140,106,62,.35)}
.bpm-revision.active{border-color:rgba(140,106,62,.50);background:rgba(140,106,62,.06)}
.bpm-revision-ver{font-size:11px;font-weight:700;color:var(--bronze);background:rgba(140,106,62,.12);padding:3px 10px;border-radius:5px;flex-shrink:0;align-self:flex-start;letter-spacing:.02em}
.bpm-revision-detail{flex:1;min-width:0}
.bpm-revision-name{font-size:13px;font-weight:650;color:#fff}
.bpm-revision-meta{font-size:11px;color:var(--muted);margin-top:2px}
.bpm-revision-stats{display:flex;gap:10px;margin-top:6px}
.bpm-revision-stat{font-size:10px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:3px}
.bpm-revision-stat svg{width:12px;height:12px}

/* ── Upload Modal ── */
.bpm-upload-overlay{position:fixed;inset:0;background:rgba(15,17,20,.75);z-index:100;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.bpm-upload-overlay.open{display:flex}
.bpm-upload-modal{background:var(--graphite);border:1px solid rgba(181,183,185,.12);border-radius:14px;width:100%;max-width:520px;margin:20px;overflow:hidden}
.bpm-upload-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid rgba(181,183,185,.10)}
.bpm-upload-header h3{font-size:15px;font-weight:700;color:#fff;margin:0;display:flex;align-items:center;gap:8px}
.bpm-upload-header h3 svg{width:18px;height:18px;color:var(--bronze)}
.bpm-upload-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:20px;line-height:1}
.bpm-upload-body{padding:18px}
.bpm-upload-drop{border:2px dashed rgba(181,183,185,.15);border-radius:10px;padding:32px 20px;text-align:center;cursor:pointer;transition:border-color .15s}
.bpm-upload-drop:hover{border-color:rgba(140,106,62,.4)}
.bpm-upload-drop svg{width:40px;height:40px;color:var(--bronze);margin-bottom:8px}
.bpm-upload-drop p{font-size:13px;color:var(--ash);margin:0 0 4px;font-weight:600}
.bpm-upload-drop small{font-size:11px;color:var(--muted)}
.bpm-upload-field{margin-top:14px}
.bpm-upload-field label{display:block;font-size:12px;font-weight:650;color:var(--muted);margin-bottom:4px}
.bpm-upload-field input,.bpm-upload-field select{width:100%;padding:8px 12px;background:rgba(28,30,33,.5);border:1px solid rgba(181,183,185,.12);border-radius:8px;color:#fff;font-size:13px;font-family:inherit}
.bpm-upload-field input:focus,.bpm-upload-field select:focus{outline:none;border-color:rgba(140,106,62,.5)}
.bpm-upload-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid rgba(181,183,185,.10)}

/* ── Shape Tooltip ── */
.bpm-shape-tooltip{position:absolute;z-index:8;background:var(--graphite);border:1px solid rgba(181,183,185,.15);border-radius:8px;padding:8px 10px;font-size:11px;color:var(--ash);max-width:200px;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.4);display:none}

/* ── Filter Bar ── */
.bpm-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bpm-filter{padding:5px 12px;border-radius:6px;font-size:11px;font-weight:650;color:var(--muted);background:rgba(181,183,185,.05);border:1px solid rgba(181,183,185,.10);cursor:pointer;transition:all .15s;font-family:inherit}
.bpm-filter:hover{color:#fff;border-color:rgba(140,106,62,.30)}
.bpm-filter.active{color:var(--bronze);border-color:rgba(140,106,62,.45);background:rgba(140,106,62,.12)}

/* ── Stats Row ── */
.bpm-stats{display:flex;gap:8px;flex-wrap:wrap}
.bpm-stat-card{flex:1;min-width:100px;padding:12px 14px;background:rgba(28,30,33,.5);border:1px solid rgba(181,183,185,.08);border-radius:10px;text-align:center}
.bpm-stat-val{font-size:20px;font-weight:800;color:#fff;line-height:1}
.bpm-stat-label{font-size:10px;font-weight:650;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}

/* ── Empty State ── */
.bpm-empty{text-align:center;padding:40px 20px;color:var(--muted)}
.bpm-empty svg{width:48px;height:48px;opacity:.25;margin-bottom:10px}
.bpm-empty p{font-size:13px;margin:0 0 12px}

/* ══════════════════════════════════════════
   Responsive — Tablet
   ══════════════════════════════════════════ */
@media(max-width:900px){
  .bpm-sidebar{width:320px}
  .bpm-canvas-container{min-height:420px}
  .bpm-stats{gap:6px}
  .bpm-stat-card{min-width:80px;padding:10px}
  .bpm-stat-val{font-size:17px}
}

@media(max-width:768px){
  .bpm-workspace{flex-direction:column}
  .bpm-sidebar{width:100%;border-left:none;border-top:1px solid rgba(181,183,185,.10);max-height:50vh}
  .bpm-canvas-container{min-height:340px}
  .bpm-toolbar{gap:3px;padding:6px 8px}
  .bpm-tool{width:30px;height:30px}
  .bpm-tool svg{width:14px;height:14px}
  .bpm-top-bar{flex-direction:column;align-items:stretch}
  .bpm-stats{flex-direction:column}
  .bpm-stat-card{min-width:auto}
}

@media(max-width:640px){
  .bpm-canvas-container{min-height:260px}
  .bpm-tool-label{display:none}
}

/* ── Mobile Field Optimization ── */
@media(max-width:900px){
  /* Touch targets — min 44px for toolbar and interactive elements */
  .bpm-tool{width:44px;height:44px}
  .bpm-btn{min-height:44px;padding:10px 16px;font-size:13px}
  .bpm-btn--primary{min-height:44px}
  .bpm-color-swatch{width:28px;height:28px}
  .bpm-filter{min-height:44px;padding:8px 14px;font-size:12px;display:inline-flex;align-items:center}
  .bpm-sidebar-tab{min-height:44px;padding:12px;font-size:13px}
  .bpm-sidebar-close{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
  .bpm-markup-entry{min-height:48px;padding:12px 14px}
  .bpm-comment-action{min-height:36px;padding:6px 4px;font-size:12px}
  .bpm-upload-close{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
  .bpm-revision{min-height:48px;padding:14px}

  /* Input font size — 16px prevents iOS zoom */
  .bpm-drawing-select select{font-size:16px;min-height:48px;padding:10px 14px}
  .bpm-composer textarea{font-size:16px;min-height:70px}
  .bpm-upload-field input,
  .bpm-upload-field select{font-size:16px;min-height:48px;padding:10px 14px}

  /* Readable text for outdoor use */
  .bpm-sidebar-title{font-size:15px}
  .bpm-comment-body{font-size:14px}
  .bpm-comment-author{font-size:13px}
  .bpm-markup-info-title{font-size:13px}
  .bpm-markup-info-preview{font-size:12px}
  .bpm-revision-name{font-size:14px}
  .bpm-revision-meta{font-size:12px}
  .bpm-stat-val{font-size:18px}
  .bpm-stat-label{font-size:11px}
  .bpm-zoom-display{font-size:12px}

  /* Card and item spacing */
  .bpm-comment{padding:14px}
  .bpm-sidebar-panel{padding:14px}
  .bpm-toolbar{padding:8px 10px;gap:6px}
  .bpm-toolbar-group{gap:6px}

  /* Full-width buttons on small screens */
  .bpm-upload-actions{flex-direction:column}
  .bpm-upload-actions .bpm-btn{width:100%;justify-content:center}
  .bpm-composer-actions{flex-direction:column;gap:8px}
  .bpm-composer-actions .bpm-btn{width:100%;justify-content:center}
}