/**
 * Workspace shell theme — PR / DaVinci-inspired pro tool surfaces.
 * Load after workspace.css, eagle-parity.css, workspace-layout.css.
 */

html,
body {
  background: var(--cg-bg-raised) !important;
  color: var(--cg-text);
  font-family: var(--cg-font);
}

/*
 * Kill system focus rings (often bright white on dark UI) across the workspace.
 * Brand selected/active states keep their own border / fill — not this outline.
 */
:focus,
:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

button,
a,
summary,
input,
select,
textarea,
[role='button'],
[tabindex],
.shot-item,
.view-btn,
.filter-btn,
.icon-btn,
.premium-btn {
  -webkit-tap-highlight-color: transparent;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0 !important;
}

input[type='range']:focus,
input[type='range']:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.scale-control input.ws-card-scale-range:focus,
.scale-control input.ws-card-scale-range:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* —— Title bar —— */
.title-bar {
  height: var(--workspace-title-h, 52px) !important;
  background: var(--cg-surface) !important;
  border-bottom: 1px solid var(--cg-line) !important;
  box-shadow: none !important;
}

.import-btn,
.top-settings-btn,
.pin-btn {
  background: transparent !important;
  border: 1px solid var(--cg-line) !important;
  border-radius: var(--cg-radius-sm) !important;
  color: var(--cg-text-secondary) !important;
  height: 26px;
  font-weight: 550;
}

.import-btn:hover,
.top-settings-btn:hover,
.pin-btn:hover {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--cg-text) !important;
}

.top-export-btn {
  background: var(--cg-brand) !important;
  border: 1px solid var(--cg-brand) !important;
  color: #0a0a0c !important;
  font-weight: 650 !important;
  border-radius: var(--cg-radius-sm) !important;
  box-shadow: none !important;
}

.top-export-btn:hover {
  background: var(--cg-brand-hover) !important;
  border-color: var(--cg-brand-hover) !important;
}

/* —— Main layout —— */
.main-app-wrapper {
  background: var(--cg-bg-raised) !important;
}

.split-workspace {
  flex: 1 1 0 !important;
  min-height: 0 !important;
}

.footer-shortcuts {
  margin-top: var(--workspace-card-gutter, var(--workspace-split-gap, 4px)) !important;
  border: 1px solid var(--cg-line) !important;
  border-radius: var(--cg-radius-md) !important;
  background: var(--cg-surface, #101012) !important;
}

.workspace-middle,
.workspace-right {
  background: var(--cg-surface) !important;
  border: 1px solid var(--cg-line) !important;
  border-radius: var(--cg-radius-md) !important;
  box-shadow: none !important;
}

.player-wrapper.video-viewport-host {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  background: transparent !important;
}

.program-monitor-shell {
  border: 1px solid var(--cg-line) !important;
  border-radius: var(--cg-radius-md) !important;
  background: var(--cg-surface, #101012) !important;
  overflow: hidden !important;
}

.program-monitor-surface {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  background: var(--cg-surface, #101012) !important;
  overflow: hidden !important;
}

.program-monitor-surface > #playerBox.player-container,
#playerBox.player-container {
  width: var(--program-video-w, 100%) !important;
  height: var(--program-video-h, 100%) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  background: var(--cg-surface, #101012) !important;
}

#playerBox.player-container:not(.empty) {
  aspect-ratio: unset !important;
}

#playerBox.player-container.empty {
  aspect-ratio: unset !important;
  background: #000 !important;
}

.split-workspace .layout-resizer:hover::before,
.split-workspace .layout-resizer.is-active::before {
  background: var(--cg-brand) !important;
}

.split-workspace .layout-resizer.is-active {
  background: var(--cg-brand-dim) !important;
}

.stage-row-resizer {
  flex: 0 0 var(--workspace-split-gap, 4px) !important;
  height: var(--workspace-split-gap, 4px) !important;
  margin: 0 !important;
  background: transparent !important;
  z-index: 200 !important;
}

.stage-row-resizer::before {
  content: none !important;
  display: none !important;
}

.stage-row-resizer.is-active {
  background: transparent !important;
}

.workspace-transport-stack {
  gap: 0 !important;
}

/* Transport dashboard — integrated into player shell (no separate card) */
.dashboard {
  background: var(--cg-surface) !important;
  border: 1px solid var(--cg-line) !important;
  border-radius: var(--cg-radius-md) !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: visible;
}

.workspace-left-stage-tail > .dashboard {
  flex: 0 0 auto;
  width: 100%;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
  overflow: visible !important;
}

.dashboard .control-console {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

.dashboard .icon-group-capsule {
  /* Option D: flatter island chips */
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.dashboard .lcd-monitor {
  background: rgba(0, 0, 0, 0.45) !important;
  border-color: var(--cg-line) !important;
  color: var(--cg-muted) !important;
  font-family: var(--cg-font-mono) !important;
}

.player-timecode #curTime {
  color: var(--cg-text) !important;
}

.player-timecode,
.timeline-header-timecode {
  font-family: var(--cg-font-timecode) !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: 'tnum' 1, 'zero' 0 !important;
}

/* —— AI row: flat tool strip, no banner box —— */
.ai-lab-bar {
  background: var(--cg-surface-2) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 12px !important;
  gap: 10px !important;
}

.ai-title {
  color: var(--cg-text) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

.ai-dot {
  background: var(--cg-brand) !important;
  box-shadow: 0 0 6px var(--cg-brand-glow) !important;
}

#sensVal {
  color: var(--cg-muted) !important;
  font-size: 10px !important;
  font-family: var(--cg-font-mono) !important;
  font-variant-numeric: tabular-nums;
  width: 34px;
}

input[type='range'].ai-range,
.scale-control input {
  accent-color: var(--cg-brand) !important;
}

#scoutBtn {
  /* Soft brand chip — not solid capsule */
  background: var(--cg-brand-dim, rgba(163, 230, 53, 0.14)) !important;
  border: 1px solid rgba(163, 230, 53, 0.45) !important;
  color: var(--cg-brand, #a3e635) !important;
  font-weight: 650 !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}

#scoutBtn:hover:not(:disabled) {
  background: rgba(163, 230, 53, 0.22) !important;
  border-color: rgba(163, 230, 53, 0.65) !important;
  color: var(--cg-brand-hover, #b8f04a) !important;
}

.premium-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--cg-line) !important;
  color: var(--cg-text-secondary) !important;
  border-radius: var(--cg-radius-sm) !important;
}

.premium-btn:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--cg-text) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

/* —— Timeline —— */
.timeline-container {
  background: var(--cg-surface-2) !important;
  border: 0 !important;
  border-radius: 0 !important;
}

#rulerCanvas {
  background: var(--cg-surface-2) !important;
  border-bottom-color: var(--cg-line) !important;
}

.scrollbar-track {
  background: var(--cg-surface) !important;
  border: 0 !important;
}

/* —— Shot library + AI inspector heads: shared height so dividers align —— */
.right-panel-header,
.workspace-right .right-panel-card-head {
  box-sizing: border-box !important;
  height: var(--ws-side-panel-head-h, 42px) !important;
  min-height: var(--ws-side-panel-head-h, 42px) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid var(--cg-line) !important;
}

.right-panel-header {
  background: var(--cg-surface) !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  position: sticky;
  top: 0;
  z-index: 40;
}

.workspace-right .right-panel-card-head {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

:root[data-density='compact'] {
  --ws-side-panel-head-h: 36px;
}

#shotList.shot-list,
.right-panel-scroll.shot-list {
  background: var(--cg-surface) !important;
  padding: 0 8px 8px !important;
}

.selection-wrapper {
  background: var(--cg-surface) !important;
}

.shot-item {
  border-width: 1px !important;
  border-color: var(--cg-line) !important;
  background: var(--cg-surface-2) !important;
  border-radius: var(--cg-radius-sm) !important;
}

.shot-item:hover {
  border-color: rgba(255, 255, 255, 0.14) !important;
  transform: none !important;
}

.shot-item.selected {
  border-color: var(--cg-brand) !important;
  background: var(--cg-brand-dim) !important;
  box-shadow: inset 0 0 0 1px var(--cg-brand-line) !important;
}

/* Playback highlight: secondary blue (distinct from selection) */
.shot-item.seq-playing {
  border-color: var(--cg-accent-blue) !important;
  box-shadow: inset 0 0 0 1px var(--cg-accent-blue-line) !important;
  background: var(--cg-accent-blue-dim) !important;
}

.filter-btn {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--cg-muted) !important;
  font-weight: 550 !important;
  box-shadow: none !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.filter-btn.active {
  /* Secondary to top mode-switch: brand text + 1px hairline (matches panel separators) */
  background: transparent !important;
  border: 0 !important;
  color: var(--cg-brand, #a3e635) !important;
  font-weight: 650 !important;
  box-shadow: inset 0 -1px 0 var(--cg-brand, #a3e635) !important;
}

.view-btn {
  border-radius: var(--cg-radius-sm) !important;
  border-color: var(--cg-line) !important;
  background: transparent !important;
}

.view-btn.active {
  background: transparent !important;
  color: var(--cg-brand, #a3e635) !important;
  border-color: var(--cg-line) !important;
  box-shadow: none !important;
}

.batch-select-check.active {
  background: var(--cg-brand) !important;
  border-color: var(--cg-brand) !important;
  color: #0a0a0c !important;
}

.batch-select-entry:hover {
  border-color: var(--cg-brand-line) !important;
  color: var(--cg-brand) !important;
}

/* —— Inspector —— */
.inspector-header {
  background: var(--cg-surface) !important;
  border-bottom: 1px solid var(--cg-line) !important;
  color: var(--cg-text) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.workspace-right {
  padding: 0 !important;
  gap: 0 !important;
  background: var(--cg-surface) !important;
}

.right-panel-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

.inspector-export-card,
#exportPopoutPanel {
  background: #141416 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 12px !important;
  box-shadow:
    0 0 0 1px rgba(163, 230, 53, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 20px 56px rgba(0, 0, 0, 0.62) !important;
  isolation: isolate;
}

.inspector-export-card .right-panel-card-head,
.inspector-export-card .inspector-export-dock {
  background: #141416 !important;
}

.inspector-export-card .export-dock-select,
.inspector-export-card .export-path-btn,
.inspector-export-card .export-path-field {
  background: #121212 !important;
}

/* Preview modals — page-player export-result parity */
.collage-preview-backdrop,
.contact-sheet-preview-backdrop {
  background: rgba(6, 6, 8, 0.68) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.collage-preview-card,
.contact-sheet-preview-card {
  background: #121214 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.58) !important;
}

.collage-preview-bar,
.contact-sheet-preview-bar {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 54px !important;
  padding: 10px 14px 10px 10px !important;
  background: linear-gradient(180deg, rgba(24, 24, 26, 0.98), rgba(18, 18, 20, 0.98)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.cutgo-preview-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.cutgo-preview-accent {
  width: 3px;
  height: 16px;
  border-radius: 999px;
  background: var(--cg-brand, #a3e635);
  box-shadow: 0 0 8px rgba(163, 230, 53, 0.45);
  flex-shrink: 0;
}

.collage-preview-meta,
.contact-sheet-preview-meta {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #8e8e93 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collage-preview-close,
.contact-sheet-preview-close {
  border: none !important;
  background: transparent !important;
  color: #636366 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  padding: 4px 6px !important;
  border-radius: 8px !important;
  cursor: pointer;
}

.collage-preview-close:hover,
.contact-sheet-preview-close:hover {
  color: #f5f5f7 !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.collage-preview-export,
.contact-sheet-preview-export {
  margin-left: 0 !important;
  min-height: 32px;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-sizing: border-box;
  border: 1px solid rgba(163, 230, 53, 0.55) !important;
  background: var(--cg-brand, #a3e635) !important;
  color: #0a0a0a !important;
  cursor: pointer;
}

.collage-preview-export:hover:not(:disabled),
.contact-sheet-preview-export:hover:not(:disabled) {
  background: var(--cg-brand-hover, #b8f04a) !important;
  box-shadow: 0 0 14px rgba(163, 230, 53, 0.32) !important;
}

.collage-preview-export:disabled,
.contact-sheet-preview-export:disabled {
  opacity: 0.45 !important;
  cursor: default !important;
  box-shadow: none !important;
}

.cutgo-preview-foot {
  flex: 0 0 auto;
  padding: 9px 16px 11px;
  font-size: 11px;
  color: #8e8e93;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(14, 14, 16, 0.96);
}

.inspect-detail input,
.inspect-detail textarea {
  background: var(--cg-surface-2) !important;
  border-color: var(--cg-line) !important;
  border-radius: var(--cg-radius-sm) !important;
}

.tag {
  background: var(--cg-accent-blue-dim) !important;
  color: var(--cg-accent-blue) !important;
  border-color: var(--cg-accent-blue-line) !important;
}

/* —— Controls & states —— */
.icon-btn.active-blue {
  color: var(--cg-brand) !important;
  background: var(--cg-brand-dim) !important;
}

.speed-item.active {
  color: var(--cg-brand) !important;
  background: var(--cg-brand-dim) !important;
}

.empty-state {
  background: linear-gradient(180deg, var(--cg-surface-2), var(--cg-bg-raised)) !important;
}

.empty-state h1 {
  font-size: 22px !important;
  font-weight: 650 !important;
  color: var(--cg-text) !important;
}

.empty-state button {
  background: var(--cg-brand) !important;
  color: #0a0a0c !important;
  font-weight: 650 !important;
  border-radius: var(--cg-radius-sm) !important;
}

#dropOverlay {
  background: rgba(163, 230, 53, 0.06) !important;
  border-color: var(--cg-brand-line) !important;
}

#dropOverlay div {
  background: var(--cg-surface) !important;
  border: 1px solid var(--cg-line) !important;
  border-radius: var(--cg-radius-lg) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
}

.loading div,
.scene-detect-modal-card {
  background: var(--cg-surface) !important;
  border-color: var(--cg-line) !important;
}

.scene-detect-summary {
  color: var(--cg-brand) !important;
}

.scene-detect-dialog-check input {
  accent-color: var(--cg-brand) !important;
}

.scene-detect-dialog-primary {
  background: var(--cg-brand) !important;
  border-color: var(--cg-brand) !important;
  color: #0a0a0c !important;
}

.scene-detect-dialog-primary:hover:not(:disabled),
.scene-detect-dialog-primary:focus-visible:not(:disabled),
.scene-detect-dialog-primary:active:not(:disabled) {
  background: var(--cg-brand-hover) !important;
  border-color: var(--cg-brand-hover) !important;
  /* Override .premium-btn:hover light text — keep dark on lime. */
  color: #0a0a0c !important;
}

.export-dock-primary {
  background: var(--cg-brand) !important;
  border-color: rgba(163, 230, 53, 0.55) !important;
  color: #0a0a0c !important;
}

.export-dock-primary:hover:not(:disabled),
.export-dock-primary:focus-visible:not(:disabled),
.export-dock-primary:active:not(:disabled) {
  background: var(--cg-brand-hover) !important;
  color: #0a0a0c !important;
}

.export-panel-check input {
  accent-color: var(--cg-brand) !important;
}

.settings-footer .primary,
.cutgo-settings-modal .settings-footer .primary {
  background: var(--cg-brand) !important;
  border-color: var(--cg-brand) !important;
  color: #0a0a0c !important;
}

.cutgo-settings-modal .settings-tab.active {
  color: #fff !important;
  background: var(--cg-brand-dim) !important;
  border-left: 2px solid var(--cg-brand) !important;
}

.cutgo-settings-modal .settings-shell {
  background: var(--cg-surface) !important;
  border-color: var(--cg-line) !important;
}

.cutgo-settings-modal .settings-sidebar {
  background: var(--cg-surface-2) !important;
  border-right-color: var(--cg-line) !important;
}

.cutgo-settings-modal .setting-card {
  background: var(--cg-bg-raised) !important;
  border-color: var(--cg-line) !important;
}

@keyframes shot-incoming-flash {
  0%,
  100% {
    border-color: var(--cg-line);
    box-shadow: none;
    background: var(--cg-surface-2);
  }
  18%,
  55% {
    border-color: var(--cg-brand);
    box-shadow: inset 0 0 0 1px var(--cg-brand-line);
    background: var(--cg-brand-dim);
  }
}

/* Letterbox / pillarbox — match control console chrome, not pure black */
#playerBox.player-container,
.player-container,
#playerBox.player-container video,
#playerBox video {
  background: var(--cg-surface, #101012) !important;
}

/* Hide Chromium native PiP overlay on the program monitor (workspace owns transport). */
#playerBox video::-webkit-media-controls-picture-in-picture-button,
#playerBox #video::-webkit-media-controls-picture-in-picture-button {
  display: none !important;
}

.player-wrapper.video-viewport-host:not(:has(#playerBox.empty)) .program-monitor-surface {
  background: var(--cg-surface, #101012) !important;
}