/* ── Detail Panel ── */
.detail-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.detail-overlay.open { opacity: 1; pointer-events: all; }

.detail-panel {
  position: fixed; top: 0; right: -520px; bottom: 0;
  width: 520px;
  background: var(--panel-bg);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(0,0,0,0.1);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transition: right 0.25s ease;
  overflow: hidden;
}
.detail-panel.open { right: 0; }

.panel-header {
  /* flex-start (not center) so the close button stays pinned top-right when
     the title wraps to a second line. */
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.panel-header h3 {
  font-size: 14px; font-weight: 600; line-height: 1.35;
  /* Long project names wrap to at most 2 lines, ellipsis beyond. The panel is
     a flex column with an auto-height header, so the extra line just grows the
     header and the scrollable body flexes down — nothing assumes a fixed
     header height. Full name available via the title attribute (detail.js). */
  overflow: hidden; text-overflow: ellipsis; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  flex: 1; margin-right: 12px;
}
.panel-close {
  background: none; border: none; font-size: 20px; cursor: pointer;
  color: var(--text-muted); padding: 0; line-height: 1;
}
.panel-close:hover { color: var(--text-primary); }
.last-modified {
  font-size: 11px; color: var(--text-muted); padding: 0 0 4px;
}
/* ── QA Submit Modal ── */
.qa-submit-modal { width: 480px; max-width: 95vw; max-height: 85vh; overflow-y: auto; }
.qa-submit-field { margin-bottom: 12px; }
.qa-submit-field:last-of-type { margin-bottom: 0; }
.qa-submit-field label { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; }
.qa-submit-field input[type="text"] { width: 100%; font-size: 13px; padding: 8px 10px; }
.qa-submit-field textarea {
  width: 100%; font-size: 13px; padding: 8px 10px;
  font-family: inherit; background: var(--input-bg);
  border: 1px solid var(--input-border); border-radius: 6px;
  color: var(--text-primary); resize: vertical;
}
.qa-submit-readonly { font-size: 13px; color: var(--text-primary); padding: 2px 0; }

/* ── Submit Modal Buttons ── */
.qa-submit-actions { display: flex; gap: 8px; margin-top: 14px; }
.qa-submit-actions button {
  flex: 1; padding: 10px; font-size: 14px; font-family: inherit;
  border-radius: 6px; cursor: pointer;
}
.qa-submit-actions button:disabled { opacity: 0.6; cursor: not-allowed; }
.qa-submit-actions .btn-cancel {
  background: var(--input-bg); border: 1px solid var(--border);
  color: var(--text-secondary);
}
.qa-submit-actions .btn-cancel:hover { border-color: var(--text-muted); color: var(--text-primary); }

/* ── Drag & Drop File Zone ── */
.qa-drop-zone {
  border: 2px dashed var(--border); border-radius: 8px;
  padding: 20px; text-align: center; cursor: pointer;
  background: var(--bg-primary);
  transition: border-color 0.15s, background 0.15s;
}
.qa-drop-zone:hover, .qa-drop-zone.dragover {
  border-color: var(--accent); background: var(--accent-light);
}
.qa-drop-zone-icon { font-size: 24px; margin-bottom: 6px; opacity: 0.5; }
.qa-drop-zone-text { font-size: 12px; color: var(--text-muted); }
.qa-drop-zone-text strong { color: var(--accent); }
.qa-drop-zone input[type="file"] { display: none; }
.qa-drop-zone-files {
  margin-top: 8px; text-align: left;
  display: flex; flex-direction: column; gap: 3px;
}
.qa-drop-zone-file {
  font-size: 11px; color: var(--text-secondary);
  padding: 3px 6px; background: var(--bg-secondary);
  border-radius: 4px; display: flex; align-items: center; gap: 4px;
}
.qa-drop-zone-file-size { color: var(--text-muted); font-size: 10px; }

/* ── QA Status Badges ── */
.qa-status-badge {
  display: inline-block; padding: 3px 10px; border-radius: 10px;
  font-size: 11px; font-weight: 500;
}
.qa-status-in-qa { background: rgba(33,150,243,0.12); color: #2196F3; }
.qa-status-back-qsa { background: rgba(255,152,0,0.15); color: #e68900; }
.qa-status-complete { background: rgba(76,175,80,0.12); color: #4CAF50; }
/* Active Review overlay — italic In QA variant. Same color (qa-status-in-qa)
   so it groups visually with In QA; italic distinguishes the variant. */
.qa-status-reviewing { font-style: italic; }

.view-only-badge {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px; margin-left: 8px;
  background: rgba(140,145,157,0.15); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.3px; vertical-align: middle;
}

.panel-body {
  flex: 1; overflow-y: auto; padding: 20px;
}
.panel-section {
  margin-bottom: 20px;
}
.panel-section-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted);
  margin-bottom: 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border-light);
}

/* ── Collapsible Groups ── */
.panel-group { margin-bottom: 16px; }
.panel-group-header {
  cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted);
  padding: 6px 0 4px; border-bottom: 1px solid var(--border-light);
  margin-bottom: 8px;
}
.panel-group-header:hover { color: var(--text-secondary); }
.panel-group-chevron { font-size: 9px; display: inline-block; }
.panel-group:not(.collapsed) .panel-group-chevron { transform: rotate(90deg); }
.panel-group.collapsed .panel-group-chevron { transform: rotate(0deg); }
.panel-group.collapsed .panel-group-body { display: none; }
.panel-group.collapsed .panel-group-header { margin-bottom: 0; border-bottom-color: transparent; }

/* ── Drag Handle ── */
.panel-group-drag {
  cursor: grab; color: var(--text-muted); font-size: 11px;
  opacity: 0.3; padding: 0 2px; letter-spacing: -1px;
}
.panel-group-drag:hover { opacity: 0.7; }
.panel-group.sortable-ghost { opacity: 0.3; }
.panel-group.sortable-chosen { box-shadow: 0 2px 8px rgba(0,0,0,0.15); border-radius: 4px; }

.panel-collapse-controls {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-bottom: 10px;
}
.panel-collapse-btn {
  background: none; border: none; font-size: 10px;
  color: var(--text-muted); cursor: pointer; padding: 0;
  font-family: inherit; text-transform: uppercase; letter-spacing: 0.03em;
}
.panel-collapse-btn:hover { color: var(--accent); }
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.field-group { display: flex; flex-direction: column; gap: 2px; }
.field-group.full-width { grid-column: 1 / -1; }
.field-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted);
}
.field-value {
  font-size: 13px; color: var(--text-primary);
  padding: 4px 0; min-height: 24px;
}
.field-value.na { color: var(--text-muted); font-style: italic; }
.intake-group { margin-bottom: 12px; }
.intake-group-title { font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
/* Row spacing inside QA Intake sections only (2026-05-19). intake-group is a
 * plain block container (not a grid), so field-group children stack via
 * natural block flow with no row-gap mechanism. The single-column context
 * had the same label-to-control ambiguity Grady reported on qa-queue.html.
 * Counterpart to the qa-queue.css row-gap:14px fix earlier today; different
 * CSS mechanism appropriate to single-column block flow, same readability
 * goal. Scoped to .intake-group via descendant selector — other .field-group
 * elements on the engagement detail panel (Project Info / Dates / Milestones
 * / Status / Hours / QA Submission / LoE / Sub-Projects / Burn Rate /
 * Planning Calculator / Consultants / QA Analysts) are unaffected. No
 * :last-child reset needed — margin collapse between Special Instructions'
 * 10px margin-bottom and intake-group's 12px margin-bottom produces a 12px
 * section-end gap (max of adjacent parent/last-child margins). Section-end
 * spacing therefore unchanged from pre-fix. */
.intake-group .field-group { margin-bottom: 10px; }

/* .saq-pill / .saq-pill-static / .saq-pill-group + theme overrides moved to
   components.css 2026-05-18 — both the engagement detail panel (index.html,
   loads detail.css) and the QA queue intake form (qa-queue.html, does NOT
   load detail.css) render these pills. Asgard override remains in base.css. */

/* Detail panel timeline (revision history) */
.detail-timeline-entry { padding: 8px 0; border-bottom: 1px solid var(--border); }
.detail-timeline-entry:last-child { border-bottom: none; }
.detail-timeline-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-timeline-action {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: 0.3px;
}
.detail-timeline-user { font-size: 12px; font-weight: 500; color: var(--text-primary); }
.detail-timeline-time { font-size: 11px; color: var(--text-muted); }
.detail-timeline-notes { font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }
.detail-timeline-files { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.detail-timeline-file { font-size: 11px; color: var(--accent); text-decoration: none; display: inline-flex; align-items: baseline; gap: 0; max-width: 100%; }
.detail-timeline-file:hover { text-decoration: underline; }
.detail-timeline-file-hidden { color: var(--text-muted); cursor: default; }
.detail-timeline-file-hidden:hover { text-decoration: none; }
.detail-timeline-file-size { color: var(--text-muted); font-size: 10px; flex-shrink: 0; margin-left: 4px; }
.file-name-stem { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; display: inline-block; vertical-align: bottom; }
.file-name-ext { white-space: nowrap; flex-shrink: 0; }
.field-group input, .field-group select, .field-group textarea {
  font-size: 13px; padding: 6px 8px; width: 100%;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
  border-radius: 6px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.field-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
  cursor: pointer;
}
.field-group textarea { resize: vertical; min-height: 60px; font-family: inherit; }

/* ── Source Changes Warning ── */
.source-changes-warning {
  background: rgba(230, 137, 0, 0.08);
  border: 1px solid rgba(230, 137, 0, 0.3);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
[data-theme="dark"] .source-changes-warning {
  background: rgba(255, 183, 77, 0.08);
  border-color: rgba(255, 183, 77, 0.25);
}
[data-theme="c128"] .source-changes-warning {
  background: rgba(51, 255, 51, 0.06);
  border-color: rgba(51, 255, 51, 0.2);
}
[data-theme="ur6000"] .source-changes-warning {
  background: rgba(255, 176, 0, 0.06);
  border-color: rgba(255, 176, 0, 0.2);
}
[data-theme="haven3019"] .source-changes-warning {
  background: rgba(126, 184, 212, 0.06);
  border-color: rgba(126, 184, 212, 0.2);
}
[data-theme="high-contrast"] .source-changes-warning {
  background: rgba(255, 255, 0, 0.10);
  border-color: #ffffff;
}
.source-changes-warning .sc-title {
  font-weight: 600;
  font-size: 12px;
  color: #e68900;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
[data-theme="dark"] .source-changes-warning .sc-title { color: #ffb74d; }
[data-theme="c128"] .source-changes-warning .sc-title { color: #33ff33; }
[data-theme="ur6000"] .source-changes-warning .sc-title { color: #ffb000; }
[data-theme="haven3019"] .source-changes-warning .sc-title { color: #7eb8d4; }
[data-theme="high-contrast"] .source-changes-warning .sc-title { color: #ffff00; }
.source-changes-warning .sc-field {
  font-size: 11px;
  padding: 3px 0;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.source-changes-warning .sc-field-name {
  font-weight: 600;
  min-width: 120px;
  color: var(--text-secondary);
}
.source-changes-warning .sc-old { text-decoration: line-through; opacity: 0.6; }
.source-changes-warning .sc-arrow { opacity: 0.4; }
.source-changes-warning .sc-new { font-weight: 500; }
.source-changes-warning .sc-dismiss {
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid rgba(230, 137, 0, 0.4);
  background: transparent;
  color: #e68900;
  border-radius: 3px;
  cursor: pointer;
}
.source-changes-warning .sc-dismiss:hover { background: rgba(230, 137, 0, 0.1); }
[data-theme="dark"] .source-changes-warning .sc-dismiss { color: #ffb74d; border-color: rgba(255, 183, 77, 0.4); }
[data-theme="dark"] .source-changes-warning .sc-dismiss:hover { background: rgba(255, 183, 77, 0.1); }
[data-theme="c128"] .source-changes-warning .sc-dismiss { color: #33ff33; border-color: rgba(51, 255, 51, 0.4); }
[data-theme="c128"] .source-changes-warning .sc-dismiss:hover { background: rgba(51, 255, 51, 0.1); }
[data-theme="ur6000"] .source-changes-warning .sc-dismiss { color: #ffb000; border-color: rgba(255, 176, 0, 0.4); }
[data-theme="ur6000"] .source-changes-warning .sc-dismiss:hover { background: rgba(255, 176, 0, 0.1); }
[data-theme="haven3019"] .source-changes-warning .sc-dismiss { color: #7eb8d4; border-color: rgba(126, 184, 212, 0.4); }
[data-theme="haven3019"] .source-changes-warning .sc-dismiss:hover { background: rgba(126, 184, 212, 0.1); }
[data-theme="high-contrast"] .source-changes-warning .sc-dismiss { color: #ffff00; border-color: #ffffff; }
[data-theme="high-contrast"] .source-changes-warning .sc-dismiss:hover { background: rgba(255, 255, 0, 0.15); }

/* ── Custom autocomplete dropdown (replaces datalist) ── */
.autocomplete-wrap {
  position: relative; flex: 1; min-width: 0;
}
.autocomplete-wrap input[type="text"] { width: 100%; }
.autocomplete-list {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  max-height: 180px; overflow-y: auto;
  background: var(--panel-bg);
  border: 1px solid var(--input-border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  z-index: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.autocomplete-list.open { display: block; }
.autocomplete-option {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.1s;
}
.autocomplete-option:hover,
.autocomplete-option.highlighted {
  background: var(--accent);
  color: #fff;
}
[data-theme="c128"] .autocomplete-option:hover,
[data-theme="c128"] .autocomplete-option.highlighted { background: #122012; color: #33ff33; }
[data-theme="ur6000"] .autocomplete-option:hover,
[data-theme="ur6000"] .autocomplete-option.highlighted { background: #1a1400; color: #ffb000; }
[data-theme="haven3019"] .autocomplete-option:hover,
[data-theme="haven3019"] .autocomplete-option.highlighted { background: #1a2535; color: #7eb8d4; }
[data-theme="high-contrast"] .autocomplete-option:hover,
[data-theme="high-contrast"] .autocomplete-option.highlighted { background: #ffff00; color: #000000; }
.autocomplete-empty {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.consultant-list {
  display: flex; flex-direction: column; gap: 4px;
}
.consultant-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 8px; background: var(--badge-bg); border-radius: 4px; font-size: 12px;
  position: relative;
}
.consultant-role { color: var(--text-muted); font-size: 11px; }
.consultant-item .consultant-remove {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 14px; padding: 0 2px; line-height: 1; opacity: 0.6;
}
.consultant-item .consultant-remove:hover { opacity: 1; color: #dc3545; }
.consultant-item.manual { border-left: 3px solid var(--accent); }
.consultant-item.lead { border-left: 3px solid #e68a00; font-weight: 600; }
.consultant-name-group { flex: 1; min-width: 0; }
.consultant-name-group .consultant-role { margin-left: 6px; }
.consultant-item > .alloc-hint { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
.split-input-wrap { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; }
.split-input-wrap .consultant-split { border: 1px solid var(--border); border-radius: 3px; background: var(--bg-primary); color: var(--text-primary); padding: 1px 2px; width: 52px; min-width: 52px; text-align: center; font-size: 11px; }
.split-input-wrap .consultant-split:focus { border-color: var(--accent); outline: none; }
.split-pct-label { font-size: 10px; color: var(--text-muted); }
.add-consultant-row {
  display: flex; gap: 6px; margin-top: 8px; align-items: center;
}
.add-consultant-row select, .add-consultant-row input[type="text"] { flex: 1; }

/* Planning module */
.planning-module {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}
.planning-inputs {
  display: flex; gap: 10px; align-items: flex-end; margin-bottom: 12px;
}
.planning-inputs .field-group { flex: 1; }
.planning-preview {
  display: none;
  gap: 8px;
  padding: 10px;
  background: var(--bg-secondary);
  border: 1px dashed var(--accent);
  border-radius: 6px;
  margin-top: 8px;
}
.planning-preview.visible { display: grid; grid-template-columns: 1fr 1fr; }
.planning-preview .preview-item {
  display: flex; flex-direction: column; gap: 1px;
}
.planning-preview .preview-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; }
.planning-preview .preview-value { font-size: 12px; color: var(--accent); font-weight: 500; }
.planning-actions { display: flex; gap: 8px; margin-top: 10px; }

.panel-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── Hours Allocation (shared between detail + admin) ── */
:root {
  --alloc-pm: #6366f1;
  --alloc-qa1: #06b6d4;
  --alloc-qa2: #8b5cf6;
  --alloc-qa3: #ec4899;
  --alloc-consultant: #22c55e;
  --alloc-unalloc: #d1d5de;
}
[data-theme="dark"] {
  --alloc-pm: #818cf8;
  --alloc-qa1: #22d3ee;
  --alloc-qa2: #a78bfa;
  --alloc-qa3: #f472b6;
  --alloc-consultant: #4ade80;
  --alloc-unalloc: #3a3f4e;
}
[data-theme="c128"] {
  --alloc-pm: #1a6b1a;
  --alloc-qa1: #0d5c3d;
  --alloc-qa2: #2d7a2d;
  --alloc-qa3: #0a6633;
  --alloc-consultant: #3d8a3d;
  --alloc-unalloc: #1a4a1a;
}
[data-theme="ur6000"] {
  --alloc-pm: #6b4a00;
  --alloc-qa1: #5c3d00;
  --alloc-qa2: #7a5a00;
  --alloc-qa3: #664200;
  --alloc-consultant: #8a6a00;
  --alloc-unalloc: #3d2e00;
}
[data-theme="haven3019"] {
  --alloc-pm: #2a5070;
  --alloc-qa1: #1e5a6a;
  --alloc-qa2: #3a607a;
  --alloc-qa3: #1a4a65;
  --alloc-consultant: #4a7090;
  --alloc-unalloc: #2a3f55;
}
[data-theme="high-contrast"] {
  --alloc-pm: #0000cc;
  --alloc-qa1: #008080;
  --alloc-qa2: #6a0dad;
  --alloc-qa3: #cc0066;
  --alloc-consultant: #006600;
  --alloc-unalloc: #333333;
}
.alloc-bar-container {
  display: flex; height: 22px; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--border); margin-bottom: 8px;
}
.alloc-bar-segment {
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; min-width: 0;
  transition: width 0.3s ease;
}
.alloc-bar-segment.seg-pm { background: var(--alloc-pm); }
.alloc-bar-segment.seg-qa1 { background: var(--alloc-qa1); }
.alloc-bar-segment.seg-qa2 { background: var(--alloc-qa2); }
.alloc-bar-segment.seg-qa3 { background: var(--alloc-qa3); }
.alloc-bar-segment.seg-consultant { background: var(--alloc-consultant); }
.alloc-bar-segment.seg-unalloc { background: var(--alloc-unalloc); color: var(--text-muted); }
.alloc-legend {
  display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--text-secondary);
}
.alloc-legend-item {
  display: flex; align-items: center; gap: 4px;
}
.alloc-legend-dot {
  width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
}
.alloc-legend-hours {
  color: var(--text-muted); font-size: 10px;
}
.alloc-hint {
  font-size: 10px; color: var(--text-muted); margin-top: 2px;
}

/* ── Sub-project navigation spans ──────────────────────────────────────
 *
 * Used by the "Sub-project of X" banner on a child's detail panel and by
 * each row in the parent's Sub-Projects subsection. Rendered as
 * <span class="subproject-link" data-code="..."> rather than <a href> —
 * Freya does not expose URLs in the UI. The accent color token gives
 * theme-aware contrast on every theme (including Asgard) where browser
 * default link blue would be unreadable.
 *
 * Keyboard activation: spans carry role="button" tabindex="0" so
 * keyboard-only users can Tab to them and trigger via Enter/Space. The
 * focus ring uses the existing --accent token for visibility.
 */
.subproject-link {
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}
.subproject-link:hover {
  text-decoration: underline;
}
.subproject-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}