/* ═══════════════════════════════════════════════════════════
   Plan Markup Viewer — css/plan-markup-viewer.css
   Full-screen plan viewer with annotation overlay.
   ═══════════════════════════════════════════════════════════ */

/* ═══ CONTAINER (full-screen overlay) ═══ */
.pmv-container {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  flex-direction: column;
  background: #0a0a0a;
  color: #e0e0e0;
  font-family: var(--font, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: 13px;
}

/* ═══ TOOLBAR ═══ */
.pmv-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: #1a1a1a;
  border-bottom: 1px solid #2a2a2a;
  gap: 12px;
  flex-shrink: 0;
  height: 44px;
}

.pmv-toolbar-left,
.pmv-toolbar-center,
.pmv-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pmv-toolbar-center {
  flex: 1;
  justify-content: center;
}

.pmv-page-info {
  font-size: 13px;
  font-weight: 600;
  color: #ccc;
  white-space: nowrap;
}

.pmv-page-select {
  background: #222;
  color: #ccc;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
  max-width: 160px;
}

/* Toolbar buttons */
.pmv-btn {
  background: #222;
  color: #ccc;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.pmv-btn:hover {
  background: #333;
  border-color: #555;
}

.pmv-close {
  font-size: 16px;
  padding: 4px 8px;
  color: #999;
}
.pmv-close:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

.pmv-export {
  background: var(--blue, #14b8a6);
  color: #fff;
  border-color: var(--blue, #14b8a6);
}
.pmv-export:hover {
  background: var(--blue-hover, #0d9488);
  border-color: var(--blue-hover, #0d9488);
}

/* ═══ TOOL BUTTONS ═══ */
.pmv-tool-group {
  display: flex;
  gap: 2px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 2px;
}

.pmv-tool {
  background: transparent;
  color: #999;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
  min-width: 32px;
  text-align: center;
}
.pmv-tool:hover {
  background: #2a2a2a;
  color: #ddd;
}
.pmv-tool.active {
  background: var(--blue, #14b8a6);
  color: #fff;
}

/* ═══ COLOR BUTTONS ═══ */
.pmv-color-group {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}

.pmv-color-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.pmv-color-btn:hover {
  transform: scale(1.15);
}
.pmv-color-btn.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
}

/* ═══ ZOOM CONTROLS ═══ */
.pmv-zoom-level {
  font-size: 12px;
  color: #888;
  min-width: 42px;
  text-align: center;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

/* ═══ BODY LAYOUT ═══ */
.pmv-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ═══ THUMBNAILS STRIP (left) ═══ */
.pmv-thumbnails {
  width: 100px;
  background: #111;
  border-right: 1px solid #2a2a2a;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pmv-thumb {
  position: relative;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.pmv-thumb:hover {
  border-color: #555;
}
.pmv-thumb.active {
  border-color: var(--blue, #14b8a6);
}
.pmv-thumb img {
  width: 100%;
  display: block;
  border-radius: 2px;
}

.pmv-thumb-label {
  display: block;
  text-align: center;
  font-size: 10px;
  color: #888;
  padding: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pmv-thumb-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--blue, #14b8a6);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 8px;
  min-width: 14px;
  text-align: center;
}

/* ═══ CANVAS AREA (center) ═══ */
.pmv-canvas-area {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0d0d;
  /* Checkerboard background for transparency */
  background-image:
    linear-gradient(45deg, #111 25%, transparent 25%),
    linear-gradient(-45deg, #111 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #111 75%),
    linear-gradient(-45deg, transparent 75%, #111 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.pmv-canvas-wrapper {
  position: relative;
  transform-origin: center center;
  transition: none;
  cursor: grab;
  max-width: 100%;
  max-height: 100%;
}

.pmv-page-image {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 44px);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* SVG overlay — sits exactly on top of the image */
.pmv-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.pmv-overlay .pmv-ann-svg {
  pointer-events: all;
}

/* ═══ ANNOTATION FLASH ═══ */
@keyframes pmv-flash-anim {
  0%, 100% { opacity: 1; }
  25% { opacity: 0.3; }
  50% { opacity: 1; }
  75% { opacity: 0.3; }
}

.pmv-ann-svg.pmv-flash {
  animation: pmv-flash-anim 0.5s ease-in-out 3;
}

/* ═══ REGION HIGHLIGHT PULSE ═══ */
.pmv-ann-svg rect.region-highlight {
  animation: pmv-region-pulse 2s ease-in-out infinite;
}
@keyframes pmv-region-pulse {
  0%, 100% { stroke-opacity: 1; }
  50% { stroke-opacity: 0.4; }
}

/* ═══ ANNOTATIONS PANEL (right) ═══ */
.pmv-annotations-panel {
  width: 280px;
  background: #111;
  border-left: 1px solid #2a2a2a;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}

.pmv-ann-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid #2a2a2a;
  gap: 6px;
}

.pmv-ann-title {
  font-weight: 600;
  font-size: 13px;
  color: #ccc;
}

.pmv-ann-filter {
  background: #1a1a1a;
  color: #aaa;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 11px;
}

.pmv-ann-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}

.pmv-ann-empty {
  color: #555;
  text-align: center;
  padding: 20px 10px;
  font-size: 12px;
}

.pmv-ann-item {
  position: relative;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pmv-ann-item:hover {
  background: #222;
  border-color: #444;
}
.pmv-ann-item.ai {
  border-left: 3px solid #6366f1;
}
.pmv-ann-item.manual {
  border-left: 3px solid #3b82f6;
}

.pmv-ann-item-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pmv-ann-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pmv-ann-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 28px;
  text-align: center;
  line-height: 18px;
}

.pmv-ann-item-title-inline {
  font-size: 12px;
  color: #ccc;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pmv-ann-item-label {
  font-weight: 600;
  font-size: 12px;
  color: #ddd;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pmv-ann-item-page {
  font-size: 10px;
  color: #888;
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}

.pmv-ann-item-title {
  font-size: 11px;
  color: #aaa;
  margin-top: 3px;
  line-height: 1.3;
}

.pmv-ann-item-detail {
  font-size: 10px;
  color: #777;
  margin-top: 2px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pmv-ann-delete {
  background: none;
  border: none;
  color: #555;
  cursor: pointer;
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 3px;
}
.pmv-ann-delete:hover {
  background: #dc2626;
  color: #fff;
}

.pmv-ann-stats {
  padding: 6px 10px;
  border-top: 1px solid #2a2a2a;
  font-size: 11px;
  color: #666;
  text-align: center;
}

/* ═══ POPUP (annotation detail) ═══ */
.pmv-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1e1e1e;
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  padding: 14px 18px;
  min-width: 280px;
  max-width: 420px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  z-index: 100;
  animation: pmv-popup-in 0.2s ease-out;
}

@keyframes pmv-popup-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.pmv-popup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.pmv-popup-label {
  font-weight: 700;
  font-size: 15px;
  flex: 1;
}

.pmv-popup-source {
  font-size: 10px;
  color: #888;
  padding: 1px 6px;
  background: #2a2a2a;
  border-radius: 4px;
}

.pmv-popup-close {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 3px;
}
.pmv-popup-close:hover {
  color: #fff;
  background: #dc2626;
}

.pmv-popup-title {
  font-size: 13px;
  color: #ddd;
  margin-bottom: 6px;
  line-height: 1.4;
}

.pmv-popup-detail {
  font-size: 12px;
  color: #aaa;
  line-height: 1.5;
  margin-bottom: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.pmv-popup-meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: #666;
}

.pmv-popup-cat {
  background: #222;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: capitalize;
}

.pmv-popup-link {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
}

/* Region description in popup */
.pmv-popup-region-desc {
  background: #1a2332;
  color: #60a5fa;
  font-size: 11px;
  font-style: italic;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
  border-left: 2px solid #3b82f6;
}
.light .pmv-popup-region-desc {
  background: #eff6ff;
  color: #1d4ed8;
  border-left-color: #3b82f6;
}

/* Inferred sheet ID warning */
.pmv-popup-inferred {
  background: #44300a;
  color: #fbbf24;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.light .pmv-popup-inferred {
  background: #fef3c7;
  color: #92400e;
}

.pmv-ann-inferred {
  font-size: 10px;
  margin-left: 2px;
  color: #d97706;
}


/* ═══ VIEW ON SHEET BUTTON (used in rfi-followups.js) ═══ */
.rfi-view-on-sheet-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #1a1a2e;
  color: #6366f1;
  border: 1px solid #2d2d5e;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-left: 4px;
  white-space: nowrap;
}
.rfi-view-on-sheet-btn:hover {
  background: #2d2d5e;
  border-color: #6366f1;
  color: #a5b4fc;
}

/* Open Markup Viewer button (in results header) */
.rfi-open-viewer-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--blue, #14b8a6);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.rfi-open-viewer-btn:hover {
  background: var(--blue-hover, #0d9488);
}

/* ═══ LIGHT MODE SUPPORT ═══ */
.light .pmv-container {
  background: #f5f5f5;
  color: #333;
}
.light .pmv-toolbar {
  background: #fff;
  border-bottom-color: #e0e0e0;
}
.light .pmv-btn {
  background: #f0f0f0;
  color: #555;
  border-color: #ddd;
}
.light .pmv-btn:hover {
  background: #e0e0e0;
  border-color: #bbb;
}
.light .pmv-close:hover {
  background: #dc2626;
  color: #fff;
}
.light .pmv-tool-group {
  background: #f5f5f5;
  border-color: #ddd;
}
.light .pmv-tool {
  color: #666;
}
.light .pmv-tool:hover {
  background: #e8e8e8;
  color: #333;
}
.light .pmv-page-info { color: #555; }
.light .pmv-page-select {
  background: #fff;
  color: #555;
  border-color: #ddd;
}
.light .pmv-zoom-level { color: #888; }
.light .pmv-thumbnails {
  background: #fafafa;
  border-right-color: #e0e0e0;
}
.light .pmv-thumb.active {
  border-color: var(--blue, #14b8a6);
}
.light .pmv-canvas-area {
  background: #e8e8e8;
  background-image:
    linear-gradient(45deg, #ddd 25%, transparent 25%),
    linear-gradient(-45deg, #ddd 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ddd 75%),
    linear-gradient(-45deg, transparent 75%, #ddd 75%);
}
.light .pmv-annotations-panel {
  background: #fafafa;
  border-left-color: #e0e0e0;
}
.light .pmv-ann-header { border-bottom-color: #e0e0e0; }
.light .pmv-ann-title { color: #333; }
.light .pmv-ann-filter {
  background: #fff;
  color: #666;
  border-color: #ddd;
}
.light .pmv-ann-item {
  background: #fff;
  border-color: #e0e0e0;
}
.light .pmv-ann-item:hover {
  background: #f5f5f5;
  border-color: #ccc;
}
.light .pmv-ann-item-label { color: #333; }
.light .pmv-ann-item-title-inline { color: #444; }
.light .pmv-ann-item-title { color: #555; }
.light .pmv-ann-item-detail { color: #888; }
.light .pmv-ann-stats { border-top-color: #e0e0e0; color: #999; }
.light .pmv-popup {
  background: #fff;
  border-color: #ddd;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
.light .pmv-popup-label { color: inherit; }
.light .pmv-popup-title { color: #333; }
.light .pmv-popup-detail { color: #666; }

.light .rfi-view-on-sheet-btn {
  background: #eef2ff;
  color: #4f46e5;
  border-color: #c7d2fe;
}
.light .rfi-view-on-sheet-btn:hover {
  background: #c7d2fe;
  border-color: #4f46e5;
}


/* ═══ SCROLLBAR STYLING ═══ */
.pmv-thumbnails::-webkit-scrollbar,
.pmv-ann-list::-webkit-scrollbar {
  width: 5px;
}
.pmv-thumbnails::-webkit-scrollbar-track,
.pmv-ann-list::-webkit-scrollbar-track {
  background: transparent;
}
.pmv-thumbnails::-webkit-scrollbar-thumb,
.pmv-ann-list::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 3px;
}
.pmv-thumbnails::-webkit-scrollbar-thumb:hover,
.pmv-ann-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.light .pmv-thumbnails::-webkit-scrollbar-thumb,
.light .pmv-ann-list::-webkit-scrollbar-thumb {
  background: #ccc;
}


/* ═══ ANNOTATION EDIT BUTTON & FORM ═══ */
.pmv-ann-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 2px;
}
.pmv-ann-edit {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 3px;
}
.pmv-ann-edit:hover { color: #3b82f6; }

.pmv-edit-form { padding: 4px 0; display: flex; flex-direction: column; gap: 6px; }
.pmv-edit-row { display: flex; flex-direction: column; gap: 2px; }
.pmv-edit-row label { font-size: 10px; text-transform: uppercase; color: #64748b; font-weight: 600; letter-spacing: 0.3px; }
.pmv-edit-row input, .pmv-edit-row select, .pmv-edit-row textarea {
  background: #0f172a; border: 1px solid #475569; color: #e2e8f0;
  padding: 4px 8px; border-radius: 4px; font-size: 12px; font-family: inherit;
}
.pmv-edit-row input:focus, .pmv-edit-row select:focus, .pmv-edit-row textarea:focus {
  border-color: #3b82f6; outline: none;
}
.pmv-edit-colors { display: flex; gap: 4px; }
.pmv-edit-color { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.pmv-edit-color:hover { border-color: rgba(255,255,255,0.5); }
.pmv-edit-color.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.3); }
.pmv-edit-actions { display: flex; gap: 6px; margin-top: 4px; }
.pmv-edit-save { background: #3b82f6; color: #fff; border: none; padding: 5px 12px; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; }
.pmv-edit-save:hover { background: #2563eb; }
.pmv-edit-cancel { background: transparent; color: #94a3b8; border: 1px solid #475569; padding: 5px 12px; border-radius: 4px; font-size: 11px; cursor: pointer; }
.pmv-edit-cancel:hover { color: #e2e8f0; }

/* Light mode edit form */
.light .pmv-ann-edit { color: #94a3b8; }
.light .pmv-ann-edit:hover { color: #3b82f6; }
.light .pmv-edit-row label { color: #64748b; }
.light .pmv-edit-row input, .light .pmv-edit-row select, .light .pmv-edit-row textarea {
  background: #fff; border-color: #cbd5e1; color: #334155;
}
.light .pmv-edit-row input:focus, .light .pmv-edit-row select:focus, .light .pmv-edit-row textarea:focus {
  border-color: #3b82f6;
}
.light .pmv-edit-color.active { border-color: #334155; box-shadow: 0 0 0 2px rgba(0,0,0,0.2); }
.light .pmv-edit-cancel { color: #64748b; border-color: #cbd5e1; }
.light .pmv-edit-cancel:hover { color: #334155; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 900px) {
  .pmv-thumbnails { width: 70px; }
  .pmv-annotations-panel { width: 220px; }
  .pmv-thumb-label { font-size: 9px; }
}

@media (max-width: 600px) {
  .pmv-thumbnails { display: none; }
  .pmv-annotations-panel { display: none; }
  .pmv-toolbar-center { display: none; }
}