/* Panel independiente de gestión de incidencias BIM - Fase 18.7. */
:root { --issues-width: 430px; }

.workspace-shell {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.workspace-shell > .app {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: 0;
}
.workspace-shell.resizing,
.workspace-shell.resizing * { cursor: col-resize !important; }

.issues-panel-splitter {
  position: relative;
  flex: 0 0 10px;
  width: 10px;
  min-width: 10px;
  height: 100%;
  z-index: 24;
  background: #1e293b;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
}
.issues-panel-splitter::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #2588d8;
  opacity: .72;
}
.issues-panel-splitter:hover,
.issues-panel-splitter.dragging { background: #0f8bd7; }
.issues-panel-splitter.hidden { display: none !important; }

.issues-panel-shell {
  position: relative;
  flex: 0 0 var(--issues-width, 430px);
  width: var(--issues-width, 430px);
  min-width: 0;
  max-width: none;
  height: 100%;
  z-index: 23;
  display: flex;
  flex-direction: column;
  background: #111820;
  color: #edf2f7;
  border-left: 1px solid #374451;
  box-shadow: -8px 0 20px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.issues-panel-shell.hidden { display: none !important; }

.issues-panel-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 54px;
  padding: 8px 10px;
  background: #1b232c;
  border-bottom: 1px solid #35404b;
}
.issues-panel-heading {
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.issues-panel-heading strong {
  display: block;
  font-size: 15px;
  line-height: 1;
  color: #fff;
}

.issues-primary-button,
.issues-secondary-button,
.issues-danger-button,
.issues-icon-button,
.issues-upload-button {
  appearance: none;
  border: 1px solid #4b5967;
  border-radius: 5px;
  background: #29343f;
  color: #f8fafc;
  min-height: 30px;
  padding: 0 9px;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}
.issues-primary-button { background: #0f6cbd; border-color: #2588d8; }
.issues-primary-button:hover { background: #1478c9; }
.issues-secondary-button:hover,
.issues-upload-button:hover,
.issues-icon-button:hover { background: #354350; border-color: #627384; }
.issues-danger-button { background: #3a2428; border-color: #78404a; color: #ffb9c2; }
.issues-danger-button:hover { background: #4b2b31; }
.issues-primary-button:disabled,
.issues-secondary-button:disabled,
.issues-upload-button:has(input:disabled) { opacity: .48; cursor: default; }
.issues-icon-button { min-width: 30px; padding: 0; }
.issues-icon-button.danger { color: #ff9da9; }

.issues-menu-tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background: #151d25;
  border-bottom: 1px solid #35404b;
}
.issues-menu-tab {
  position: relative;
  min-width: 0;
  min-height: 39px;
  padding: 0 7px;
  border: 0;
  border-right: 1px solid #303b46;
  border-radius: 0;
  background: transparent;
  color: #9eacba;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.issues-menu-tab:last-child { border-right: 0; }
.issues-menu-tab:hover { background: #202b35; color: #edf4f9; }
.issues-menu-tab.active {
  color: #fff;
  background: #17344b;
  box-shadow: inset 0 -3px 0 #2588d8;
}
.issues-menu-tab:disabled { opacity: .42; cursor: default; }
.issues-menu-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 18px;
  margin-left: 3px;
  padding: 0 5px;
  border-radius: 999px;
  background: #2d3a46;
  color: #c8d5de;
  font-size: 8px;
}
.issues-menu-tab.active .issues-menu-count { background: #0f6cbd; color: #fff; }

.issues-menu-content {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.issues-menu-view {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #111820;
}
.issues-menu-view.hidden { display: none !important; }

.issues-list-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 9px;
  background: #18212a;
  border-bottom: 1px solid #303b46;
}
.issues-marker-toggle {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  color: #c9d3dc;
  font-size: 10px;
  user-select: none;
  cursor: pointer;
}
.issues-marker-toggle input {
  flex: 0 0 auto;
  margin: 0;
  accent-color: #1988d4;
  cursor: pointer;
}
.issues-marker-toggle-header {
  flex: 0 1 auto;
  max-width: calc(100% - 95px);
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.issues-marker-toggle-header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.issues-marker-toggle-header:hover {
  background: #26323d;
  border-color: #4b5967;
  color: #fff;
}
.issues-marker-toggle-header:focus-within {
  outline: 2px solid rgba(37, 136, 216, .72);
  outline-offset: 1px;
}

.issues-panel-toolbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 8px 9px;
  border-bottom: 1px solid #303b46;
  background: #151d25;
}
.issues-search { grid-column: 1 / -1; }
.issues-search,
.issues-select,
.issues-input,
.issues-textarea {
  width: 100%;
  border: 1px solid #465462;
  border-radius: 5px;
  background: #202a34;
  color: #f2f5f7;
  outline: none;
  font: inherit;
  font-size: 12px;
}
.issues-search,
.issues-select,
.issues-input { height: 32px; padding: 0 8px; }
.issues-textarea { min-height: 74px; padding: 8px 9px; resize: vertical; }
.issues-search:focus,
.issues-select:focus,
.issues-input:focus,
.issues-textarea:focus { border-color: #3b97db; box-shadow: 0 0 0 1px #3b97db; }

.issues-stats {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 7px 9px;
  border-bottom: 1px solid #303b46;
  background: #151d25;
}
.issues-stat-card {
  min-width: 0;
  padding: 5px 4px;
  text-align: center;
  background: #202a34;
  border: 1px solid #35424e;
  border-radius: 5px;
}
.issues-stat-card strong { display: block; color: #fff; font-size: 14px; }
.issues-stat-card span { color: #9eacba; font-size: 9px; }

.issues-list-pane {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 7px;
  background: #111820;
}
.issues-list { display: grid; gap: 6px; }
.issue-list-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: stretch;
  gap: 5px;
}
.issue-list-delete-button {
  appearance: none;
  width: 30px;
  min-width: 30px;
  padding: 0;
  border: 1px solid #6f3a43;
  border-radius: 5px;
  background: #342126;
  color: #ffabb6;
  font: inherit;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.issue-list-delete-button:hover,
.issue-list-delete-button:focus-visible {
  background: #512a31;
  border-color: #a95160;
  color: #ffffff;
  outline: none;
}
.issue-list-card {
  --issue-status-color: #ef4444;
  position: relative;
  width: 100%;
  display: block;
  padding: 8px 9px 8px 12px;
  text-align: left;
  color: #edf2f7;
  background: #1d2630;
  border: 1px solid #34414d;
  border-radius: 5px;
  cursor: pointer;
}
.issue-list-card::before {
  content: '';
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 4px;
  width: 3px;
  border-radius: 3px;
  background: var(--issue-status-color);
}
.issue-list-card:hover { background: #25313c; border-color: #536474; }
.issue-list-card.active { background: #17344b; border-color: #2d8dce; box-shadow: inset 0 0 0 1px rgba(67,158,219,.3); }
.issue-list-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.issue-list-card-top strong { font-size: 11px; color: #cdd7e0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.issue-status-badge {
  flex: 0 0 auto;
  color: #ffffff;
  font-size: 9px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--issue-status-color) 72%, #ffffff 28%);
  border-radius: 999px;
  background: var(--issue-status-color);
}
.issue-list-title { margin-top: 5px; color: #fff; font-size: 12px; font-weight: 650; line-height: 1.35; }
.issue-list-meta { margin-top: 5px; color: #94a4b3; font-size: 10px; }
.issue-list-labels { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.issue-list-label {
  --issue-label-color: #2563eb;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--issue-label-color) 70%, #fff 12%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--issue-label-color) 24%, #18212a);
  color: #eef7ff;
  font-size: 8px;
}

.issues-empty,
.issues-subtle {
  padding: 11px;
  color: #8797a6;
  text-align: center;
  font-size: 11px;
}
.issues-empty.hidden,
.issues-subtle.hidden { display: none !important; }

.issues-details-view,
.issues-history-view,
.issues-settings-view { overflow: auto; background: #151d25; }
.issues-editor { padding: 10px; }
.issues-editor.hidden { display: none !important; }
.issues-editor-empty {
  flex: 1 1 auto;
  display: grid;
  place-content: center;
  min-height: 100%;
  padding: 28px;
  text-align: center;
  color: #8797a6;
  font-size: 12px;
}
.issues-editor-empty.hidden { display: none !important; }
.issues-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.issues-editor-heading strong { font-size: 13px; color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.issues-editor-heading-actions { display: flex; gap: 5px; }
.issues-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.issues-field { min-width: 0; display: grid; gap: 4px; }
.issues-field.full { grid-column: 1 / -1; }
.issues-field > span { color: #aab7c3; font-size: 10px; font-weight: 650; }
.issues-field > small { color: #708393; font-size: 9px; line-height: 1.35; }
.issues-status-select-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.issues-status-color-swatch {
  width: 12px;
  height: 12px;
  border: 1px solid color-mix(in srgb, var(--issue-current-status-color, #ef4444) 72%, #fff 28%);
  border-radius: 50%;
  background: var(--issue-current-status-color, #ef4444);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--issue-current-status-color, #ef4444) 18%, transparent);
}
.issues-status-select-wrap .issues-select {
  min-width: 0;
  background: var(--issue-current-status-color, #ef4444);
  border-color: var(--issue-current-status-color, #ef4444);
  color: #fff;
  font-weight: 750;
  color-scheme: dark;
}
.issues-status-select-wrap .issues-select option { color: #fff; font-weight: 700; }
.issues-date-input-wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: stretch;
  min-width: 0;
}
.issues-date-text-input {
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.issues-date-picker-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 0;
  border: 1px solid #2588d8;
  border-left: 0;
  border-radius: 0 5px 5px 0;
  background: #0f6cbd;
  color: #ffffff;
  cursor: pointer;
}
.issues-date-picker-button:hover,
.issues-date-picker-button:focus-visible {
  background: #1780cf;
  color: #ffffff;
  outline: none;
}
.issues-date-picker-button svg { width: 18px; height: 18px; display: block; }
.issues-date-native-picker {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.issue-linked-elements {
  min-height: 31px;
  display: flex;
  align-items: center;
  padding: 6px 8px;
  color: #ffcd84;
  background: #332b1e;
  border: 1px solid #5d4a2d;
  border-radius: 5px;
  font-size: 10px;
}
.issue-linked-elements.ready { color: #a6e6c1; background: #183126; border-color: #2b5e44; }
.issues-section { margin-top: 10px; padding-top: 9px; border-top: 1px solid #33404b; }
.issues-section-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 7px; }
.issues-section-title strong { color: #eef3f7; font-size: 11px; }
.issues-section-actions { display: flex; gap: 5px; }
.issues-upload-button { display: inline-flex; align-items: center; justify-content: center; }
.issues-upload-button input { display: none; }

.issue-attachments-list { display: grid; gap: 6px; }
.issue-attachment-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 7px;
  padding: 5px;
  background: #1d2731;
  border: 1px solid #34424e;
  border-radius: 5px;
}
.issue-attachment-card img,
.issue-evidence-thumb {
  width: 72px;
  height: 46px;
  object-fit: cover;
  border-radius: 3px;
  background: #0d1319;
  cursor: zoom-in;
}
.issue-attachment-info { min-width: 0; display: grid; gap: 3px; }
.issue-attachment-info strong { overflow: hidden; color: #e8eef3; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.issue-attachment-info span { color: #8797a6; font-size: 9px; }
.issue-comment-compose { display: grid; gap: 6px; }
.issue-comment-compose .issues-textarea { min-height: 58px; }
.issue-comment-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.issue-comment-pending { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.issue-pending-evidence { position: relative; width: 76px; padding: 3px; border: 1px solid #3f4d59; border-radius: 5px; background: #1d2731; }
.issue-pending-evidence img { width: 68px; height: 44px; object-fit: cover; border-radius: 3px; cursor: zoom-in; }
.issue-pending-evidence button { position: absolute; top: -6px; right: -6px; min-width: 22px; min-height: 22px; width: 22px; height: 22px; border-radius: 50%; }
.issue-comments-list { display: grid; gap: 6px; margin-top: 8px; }
.issue-comment { padding: 7px 8px; background: #1c2630; border: 1px solid #34424e; border-radius: 5px; }
.issue-comment-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.issue-comment-meta { min-width: 0; color: #7f91a1; font-size: 9px; line-height: 1.35; }
.issue-comment-card-actions { flex: 0 0 auto; display: grid; justify-items: stretch; gap: 4px; }
.issue-comment-edit-button,
.issue-comment-delete-button { min-height: 24px; padding: 0 7px; border: 1px solid #465766; border-radius: 4px; background: #26333e; color: #d9e5ed; font: inherit; font-size: 9px; font-weight: 700; cursor: pointer; }
.issue-comment-edit-button:hover { background: #334451; border-color: #678095; }
.issue-comment-delete-button { min-width: 34px; color: #ff9aa2; font-size: 15px; line-height: 1; }
.issue-comment-delete-button:hover { background: #482b31; border-color: #d85b66; color: #ffffff; }
.issue-comment-text { margin-top: 4px; color: #e7edf2; font-size: 11px; line-height: 1.4; white-space: pre-wrap; }
.issue-evidence-gallery { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.issue-evidence-gallery .issue-evidence-thumb { width: 82px; height: 52px; }
.issues-editor-footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #33404b; }

.issues-history-content { min-height: 100%; padding: 10px; }
.issues-history-content.hidden { display: none !important; }
.issues-view-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #33404b;
}
.issues-view-heading strong { display: block; color: #fff; font-size: 13px; }
.issues-view-heading span { display: block; margin-top: 3px; color: #91a1af; font-size: 10px; }
.issue-history-list { display: grid; gap: 0; }
.issues-history-full-list { padding: 2px 4px 20px; }
.issue-history-entry { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 7px; padding: 0 0 12px; color: #dce5eb; font-size: 10px; }
.issue-history-dot { width: 7px; height: 7px; margin-top: 4px; border: 2px solid #73b8e6; border-radius: 50%; background: #17212a; box-shadow: 0 0 0 3px #17212a; }
.issue-history-entry:not(:last-child) .issue-history-dot::after { content: ''; display: block; width: 1px; height: 100%; min-height: 38px; margin: 7px 0 0 1px; background: #344552; }
.issue-history-entry strong { color: #eaf1f5; font-size: 10px; }
.issue-history-detail { margin-top: 2px; color: #a8b6c1; line-height: 1.35; white-space: pre-wrap; }
.issue-history-meta { margin-top: 3px; color: #718493; font-size: 9px; }

.issues-settings-view { padding: 10px; gap: 10px; }
.issues-config-section {
  flex: 0 0 auto;
  padding: 10px;
  background: #18212a;
  border: 1px solid #35404b;
  border-radius: 6px;
}
.issues-config-heading strong { display: block; color: #fff; font-size: 12px; }
.issues-config-heading span { display: block; margin-top: 3px; color: #91a1af; font-size: 10px; }
.issues-team-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 6px; margin-top: 9px; }
.issues-team-form #issuesTeamEmailInput { grid-column: 1 / 2; }
.issues-team-form #issuesTeamAddButton { grid-column: 2 / 3; }
.issues-team-list { display: grid; gap: 5px; margin-top: 8px; }
.issues-team-member {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 6px 7px;
  border: 1px solid #35424e;
  border-radius: 5px;
  background: #202a34;
}
.issues-team-member.editable .issues-input { flex: 1 1 140px; min-width: 0; }
.issues-team-member.editable .issues-secondary-button,
.issues-team-member.editable .issues-icon-button { flex: 0 0 auto; }
.issues-team-member strong { display: block; color: #edf3f7; font-size: 11px; }
.issues-team-member span { display: block; margin-top: 2px; color: #8797a6; font-size: 9px; }
.issues-labels-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px auto;
  gap: 6px;
  align-items: center;
  margin-top: 9px;
}
.issues-color-input {
  width: 42px;
  height: 32px;
  padding: 2px;
  border: 1px solid #465462;
  border-radius: 5px;
  background: #202a34;
  cursor: pointer;
}
.issues-labels-list { display: grid; gap: 6px; margin-top: 8px; }
.issues-label-definition {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 30px;
  gap: 6px;
  align-items: center;
  padding: 6px;
  border: 1px solid #35424e;
  border-radius: 5px;
  background: #202a34;
}

.issues-placement-banner {
  position: fixed;
  left: 50%;
  top: 74px;
  transform: translateX(-50%);
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 24px);
  padding: 9px 11px;
  border-radius: 6px;
  color: #fff;
  background: #14344b;
  border: 1px solid #3492cf;
  box-shadow: 0 12px 30px rgba(0,0,0,.34);
  font-size: 12px;
}
.issues-placement-banner.hidden { display: none !important; }
#viewerCanvas.issue-placement-active { cursor: crosshair !important; }

.issues-marker-layer { position: absolute; inset: 0; z-index: 12; overflow: hidden; pointer-events: none; }
.issues-marker-layer.hidden { display: none !important; }
.issue-model-marker {
  --issue-marker-color: #ef4444;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.45));
}
.issue-model-marker.offscreen { display: none; }
.issue-model-marker-label {
  order: 1;
  min-width: 38px;
  max-width: 150px;
  padding: 3px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 4px;
  background: var(--issue-marker-color);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}
.issue-model-marker-dot { order: 2; display: block; width: 12px; height: 12px; margin-top: -1px; border: 2px solid #fff; border-radius: 50%; background: var(--issue-marker-color); }
.issue-model-marker:hover { z-index: 4; transform-origin: bottom center; }
.issue-model-marker:hover .issue-model-marker-label { filter: brightness(1.12); }

.issues-image-preview {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 14px 18px 12px;
  background: rgba(2,6,12,.92);
}
.issues-image-preview.hidden { display: none !important; }
.issues-image-preview-toolbar {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 6px;
  border: 1px solid #465564;
  border-radius: 7px;
  background: rgba(22,31,40,.96);
  box-shadow: 0 8px 24px rgba(0,0,0,.32);
}
.issues-image-preview-toolbar span { min-width: 48px; text-align: center; color: #fff; font-size: 11px; font-weight: 750; }
.issues-image-preview-close { position: fixed; top: 14px; right: 16px; z-index: 2; }
.issues-image-preview-viewport {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  cursor: zoom-in;
  touch-action: none;
  user-select: none;
}
.issues-image-preview-viewport.zoomed { cursor: grab; }
.issues-image-preview-viewport.zoomed:active { cursor: grabbing; }
.issues-image-preview img {
  max-width: min(1100px, 94vw);
  max-height: calc(100vh - 116px);
  object-fit: contain;
  border-radius: 7px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  transform-origin: center center;
  will-change: transform;
  pointer-events: none;
  user-select: none;
}
.issues-image-preview-help { justify-self: center; color: #9aa9b6; font-size: 10px; text-align: center; }

@media (max-width: 900px), (pointer: coarse) and (max-width: 1100px) {
  .workspace-shell { flex-direction: column; }
  .workspace-shell > .app { flex: 1 1 auto; width: 100%; height: auto !important; min-height: 0; }
  .issues-panel-splitter { display: none !important; }
  .issues-panel-shell {
    flex: 0 0 min(52vh, 520px);
    width: 100%;
    height: min(52vh, 520px);
    border-left: 0;
    border-top: 1px solid #374451;
    box-shadow: 0 -8px 20px rgba(0,0,0,.18);
  }
}

@media (max-width: 700px) {
  .issues-menu-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .issues-menu-tab:nth-child(2) { border-right: 0; }
  .issues-menu-tab:nth-child(-n+2) { border-bottom: 1px solid #303b46; }
  .issues-panel-toolbar { grid-template-columns: 1fr 1fr; }
  .issues-form-grid { grid-template-columns: 1fr; }
  .issues-field.full { grid-column: 1; }
  .issues-team-form { grid-template-columns: 1fr; }
  .issues-team-form #issuesTeamEmailInput,
  .issues-team-form #issuesTeamAddButton { grid-column: 1; }
  .issues-list-actions { align-items: flex-start; flex-direction: column; }
  .issues-marker-toggle { justify-content: flex-start; }
  .issues-marker-toggle-header { max-width: calc(100% - 90px); }
  .issues-placement-banner { top: calc(var(--mobile-header-height, 58px) + 6px); font-size: 11px; }
}

@media (max-width: 560px) {
  .issues-labels-form { grid-template-columns: minmax(0, 1fr) 42px; }
  .issues-labels-form #issuesLabelAddButton { grid-column: 1 / -1; }
  .issues-label-definition { grid-template-columns: 42px minmax(0, 1fr) 30px; }
  .issues-label-definition .issues-secondary-button { grid-column: 1 / -1; }
  .issues-editor-heading { align-items: flex-start; flex-direction: column; }
  .issues-editor-heading-actions { width: 100%; flex-wrap: wrap; }
}