/* Copyright (c) 2025 In Flux Studio Co. All rights reserved. See LICENSE. */
#app {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#aspectRatioPreview {
  display: inline-block;
  margin-left: 0.625rem;
}

#delete-selected-btn[disabled] {
  display: none;
}

#message {
  bottom: 1rem;
  line-height: 1.5rem;
  position: fixed;
  right: 1rem;
  word-wrap: break-word;
  z-index: 1000;
}

#message.update {
  animation: flash 0.3s;
}

#preview-container {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  max-height: 60vh;
  text-align: center;
}

#preview-modal {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

#upload-all-btn[disabled] {
  display: none;
}

.asset-comparison-container {
  background-color: var(--ground);
  border: 0.1rem solid var(--graphic);
  border-radius: 0.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 1.5rem;
  padding: 1rem;
}

.asset-info {
  flex: 1;
}

.asset-info h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-item {
  background-color: var(--section);
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
  padding: 0.75rem;
}

.asset-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  padding: 0.5rem;
}

.asset-preview {
  align-items: center;
  background-color: grey;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.asset-selection {
  align-items: center;
  display: flex;
}

.asset-selection-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.asset-selection-list .asset-item {
  border: 0.1rem solid var(--graphic);
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.asset-selection-list .asset-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.asset-selection-list .asset-preview {
  align-items: center;
  background-color: var(--section);
  display: flex;
  height: 100px;
  justify-content: center;
}

.asset-selection-list .select-asset {
  background-color: var(--c2);
  border: none;
  color: white;
  cursor: pointer;
  padding: 0.5rem;
  /* transition: background-color 0.2s; */
}

.asset-selection-list .select-asset:hover {
  background-color: var(--ground-hover);
  color: var(--figure-focus);
}

.audio-preview-container {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.buttons-group {
  display: flex;
  flex-wrap: wrap;
}

.changes-list {
  border: 0.1rem solid #ddd;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
  max-height: 300px;
  overflow-y: auto;
  padding: 10px;
}

.checkbox-list {
  border: 0.1rem solid var(--graphic);
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  margin: 1rem 0;
  margin-top: 0.3125rem;
  max-height: 12.5rem;
  overflow-y: auto;
  padding: 1rem;
}

.close {
  color: #555;
  cursor: pointer;
  position: absolute;
  right: 1rem;
  top: 1rem;
}

/* Stack-modal values table — only the table-level rules live here.
   Column-specific styling comes from util classes on individual <td>s
   (`.text-right` on the index cell, `.full-width` on the filename cell);
   other columns auto-size to their content. */
#stack-values-container {
  width: 100%;
  border-collapse: collapse;
}

.combination-count {
  background-color: var(--section);
  border-radius: 0.25rem;
  font-weight: bold;
  margin-top: 1rem;
  padding: 0.5rem;
  text-align: center;
}

.combination-count #total-combinations {
  color: var(--c2);
}

.composite-video,
.composite-image {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.config-control {
  align-items: center;
  display: flex;
  min-width: 300px;
}

.config-control label {
  white-space: nowrap;
}

.config-item {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
}

.current-asset-container {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.current-asset-container .asset-info {
  background-color: var(--ground);
  border-radius: 0.25rem;
  padding: 0.5rem;
  width: 100%;
}

.current-asset-container .asset-type {
  color: var(--figure-subtle);
  font-size: 0.9rem;
}

.current-asset-container,
.replacement-asset-container {
  align-items: center;
  background-color: var(--section);
  border-radius: 0.25rem;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-height: 13rem;
  overflow: hidden;
  width: 100%;
}

.current-render-row {
  background-color: var(--ground-positive);
}

.current-render-row.canceled {
  background-color: var(--ground-negative);
}

.current-render-row.completed {
  background-color: var(--ground-positive);
}

.current-render-row.failed {
  background-color: var(--ground-negative);
}

.current-time-marker {
  background-color: var(--figure);
  height: 100%;
  pointer-events: none;
  width: 0.5rem;
  border: 0.2rem solid var(--ground);
}

.data-table {
  background-color: var(--ground);
  border-collapse: collapse;
  margin-top: 1rem;
  width: 100%;
  color: var(--figure);
  font-weight: bold;
  white-space: nowrap;
}

.data-table .resolution-preview {
  height: 3rem;
  margin: 0 auto;
  width: 6rem;
}

.data-table {
  background-color: var(--section);
}

/* .data-table th,
.data-table td {
  border-bottom: 1px solid var(--graphic);
  padding: 0.75rem 1rem;
  text-align: left;
} */

.data-table {
  background-color: var(--section);
}

.drop-area {
  background-color: var(--ground);
  border: 0.2rem dashed var(--graphic);
  border-radius: 0.5rem;
  cursor: pointer;
  padding: 30px;
  text-align: center;
  /* transition:
    background-color 0.2s,
    border-color 0.2s; */
}

.drop-area.highlight {
  background-color: var(--ground-positive);
  border-color: var(--c2);
}

.edit-file-icon {
  padding: 1rem;
  text-align: center;
}

.edit-file-icon,
.font-sample,
.text-file-icon,
.timeline-preview,
.unknown-preview {
  align-items: center;
  background-color: var(--ground);
  border: 0.1rem solid var(--graphic);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  width: 100%;
}

.edit-form {
  display: flex;
  flex: 1;
}

.edit-form input {
  flex: 1;
}

.empty-state,
.loading {
  color: var(--figure-subtle);
  font-style: italic;
  padding: 1rem;
  text-align: center;
}

.encoding-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.encoding-description {
  color: var(--figure-subtle);
  font-size: 0.9em;
  margin-bottom: 10px;
}

.encoding-details {
  margin-bottom: 10px;
}

.encoding-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin-top: 20px;
}

.encoding-name {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.encoding-options {
  background-color: var(--section);
  border-radius: 4px;
  border-top: 1px solid var(--section);
  font-family: monospace;
  font-size: 0.9em;
  margin-top: 10px;
  overflow-x: auto;
  padding: 8px;
  padding-top: 10px;
}

/* Justification: encoding management page container — pages/encodings.html
   uses this as the outer padding for the encoding list region. Page-specific
   wrapper that doesn't compose from existing utilities. */
.encodings-container {
  padding: 20px;
}

/* Justification: read-only chip list of encodings on a format card. The
   wrapping behavior is layout-driven, not flex/grid utility behavior, and
   each chip uses .encoding-tag (immediately below). */
.encodings-list {
  display: flex;
  flex-wrap: wrap;
}

/* Justification: shared preview-figure layout used by cards, property rows,
   clip-details, and the resolved-asset coordinator's preview surfaces. The
   max-width/max-height caps prevent intrinsic-sized media (1080p video,
   large images) from blowing out the layout. Cannot use a .column utility
   because the children need max-width:100% bound by the container's caps,
   which utilities don't express. */
[data-component='preview-figure'] {
  flex: 0 0 auto;
  width: auto;
  max-width: 13rem;
  max-height: 13rem;
  display: flex;
  flex-direction: column;
}

[data-component='preview-figure'] img,
[data-component='preview-figure'] video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Justification: compact variant for inline table/list contexts — 3rem
   thumbnail strip, no width cap so the row controls width. Cannot inline
   on a parent because the same preview-figure element renders in both
   card and table contexts with shared markup. */
[data-component='preview-figure'].compact {
  max-height: 3rem;
  max-width: none;
}

[data-component='preview-figure'].compact img,
[data-component='preview-figure'].compact video {
  max-height: 3rem;
}

[data-component='property-row'] [data-component='preview-figure'] {
  max-width: 8rem;
  max-height: 5rem;
  overflow: hidden;
}

[data-component='property-row'] [data-component='preview-figure'] img,
[data-component='property-row'] [data-component='preview-figure'] video,
[data-component='property-row'] [data-component='preview-figure'] audio {
  max-height: 5rem;
}

#clip-details [data-component='preview-figure'] {
  max-width: 8rem;
  max-height: 8rem;
  height: auto;
  overflow: visible;
}

#clip-details [data-component='preview-figure'] img,
#clip-details [data-component='preview-figure'] video {
  max-width: 8rem;
  max-height: 8rem;
  object-fit: contain;
}

/* Card view: figures fill their card cell instead of the default 13rem cap.
   Without this override, asset thumbnails render at a fixed cap and leave
   empty space inside the larger card. */
[data-state='cards'] [data-component='preview-figure'] {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

[data-component='property-row'] label {
  color: var(--figure);
  min-width: 13ch;
  flex-shrink: 0;
}

.field-error {
  color: var(--figure-error);
}

/* Justification: structural sibling of .field-error for non-blocking validation (tag mismatch warnings), cannot reuse .field-error because warnings must not imply submission will fail */
.field-warning {
  color: var(--figure-warning);
  font-size: 0.85rem;
}

.error-message {
  background-color: #f8d7da;
  border: 0.1rem solid #f5c6cb;
  border-left: 4px solid #c62828;
  border-radius: 4px;
  color: #dc3545;
  display: block;
  margin: 1rem 0;
  padding: 1.5rem;
  width: 100%;
}

.error-message h3 {
  color: #c62828;
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.error-message li {
  margin: 0.25rem 0;
}

.error-message p {
  margin: 0.5rem 0;
}

.error-message ul {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.extraction-status {
  border-radius: 0.25rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
}

.extraction-status.error {
  background-color: #f9d6d5;
  color: #922b21;
}

.extraction-status.in-progress {
  background-color: #f9e79f;
  color: #7d6608;
}

.extraction-status.success {
  background-color: #d4efdf;
  color: #196f3d;
}

.form-hint {
  color: var(--figure-subtle);
  font-style: italic;
}

/* Justification: shared form-row spacing used across login, signup,
   project-create, asset-rename, encoding-edit, and other modals. The 0.5rem
   gap is the form-internal spacing standard; cannot compose from a utility
   because the class is referenced directly in many HTML templates that
   already exist. Lighter-weight than the previous projects.css version
   (which set width/border/box-sizing on the wrapper). */
.form-group {
  margin-bottom: 0.5rem;
}

/* Format preset buttons for timeline creation */

.preset-btn {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--background);
  color: var(--text);
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.15s ease;
}

.preset-btn:hover {
  background: var(--background-hover);
  border-color: var(--border-hover);
}

.preset-btn.active {
  background: var(--ground);
  border-color: var(--c2);
  color: var(--c3);
}

/* Custom resolution inputs */
.custom-resolution {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.custom-resolution input {
  width: 100px;
}

.resolution-separator {
  color: var(--text-muted);
  font-weight: 500;
}

/* Platform format selection row */
.platform-format-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.75rem;
}

.platform-format-row .custom-inputs {
  display: flex;
  align-items: center;
}

.platform-format-row .custom-inputs input[type='number'] {
  width: 80px;
}

/* Selected formats list with chips */
.selected-formats-list {
  display: flex;
  flex-wrap: wrap;
  min-height: 2rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--background-subtle);
}

.selected-formats-list .empty-hint {
  margin: 0;
  font-size: 0.875rem;
}

/* Format chip for selected formats */
.format-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
  background: var(--ground);
  border: 1px solid var(--border);
  border-radius: 16px;
  font-size: 0.8125rem;
  color: var(--text);
}

.format-chip .btn-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--background-hover);
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.format-chip .btn-remove:hover {
  background: var(--c2);
  color: white;
}

/* Format preview display */
.format-preview {
  display: flex;
  padding: 0.5rem;
  background: var(--background-subtle);
  border-radius: 4px;
  color: var(--text-muted);
}

/* Format-list preview thumbnail: 40×30 neutral placeholder. The aspect-ratio
   is set inline per format; width/colors/border are uniform across rows. */
[data-component='preview-box'] {
  width: 40px;
  max-height: 30px;
  background-color: var(--section);
  border: 1px solid var(--graphic);
  border-radius: 0.125rem;
}

/* Bulk-action toolbar: hidden by default, flex when shown via data-state */
[data-control='bulk-actions'] {
  display: none;
}

[data-control='bulk-actions'][data-state='visible'] {
  display: flex;
}

/*
 * Data attribute state management (IFS-Designer audit)
 * Replaces CSS class-based state management with semantic data attributes.
 *
 * Usage: Apply data-state attribute to elements instead of CSS classes.
 *   HTML: <div data-state="hidden">...</div>
 *   JS:   element.dataset.state = 'loading';
 *
 * Available states:
 *   - hidden/visible: Show/hide elements
 *   - expanded/collapsed: Toggle expandable sections
 *   - loading/disabled: Reduce opacity and block interaction
 *   - active: Highlight focused/selected state
 *   - error: Visual error indication
 *   - selected: Selection highlight with box-shadow
 */
[data-state='hidden'] {
  display: none !important;
}

[data-state='expanded'] {
  /* Expandable sections */
  display: block;
  max-height: none;
}

[data-state='collapsed'] {
  /* Collapsed sections */
  display: none;
}

[data-state='loading'] {
  /* Loading state - can be styled with animations */
  opacity: 0.6;
  pointer-events: none;
}

[data-state='disabled'] {
  /* Disabled state */
  opacity: 0.5;
  pointer-events: none;
}

[data-state='active'] {
  /* Active/focused state */
  background: var(--ground);
  border-color: var(--c2);
}

[data-state='error'] {
  /* Error state */
  color: var(--figure-error);
  border-color: var(--figure-negative);
}

/**
 * Render Status Text
 *
 * Status text stays in the default figure color — state is conveyed by
 * adjacent badge backgrounds and icons, not by tinting the label text.
 * Apply via data-status attribute on status elements.
 */
[data-status='not-rendered'],
[data-status='queued'],
[data-status='rendering'],
[data-status='completed'],
[data-status='failed'],
[data-status='canceled'],
[data-status='skipped'] {
  color: var(--figure);
}

[data-state='selected'] {
  /* Selected state */
  border: 0.1rem solid var(--ground-selected);
  box-shadow: 0 0 1rem var(--ground-selected);
}

/* Asset table styles for property variations modal */

/* Asset preview styles */
.asset-preview-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Apply compact preview pattern to container's figure child (matches list-view table pattern) */
.asset-preview-container figure {
  max-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.asset-preview-container figure img,
.asset-preview-container figure video {
  max-height: 3rem;
  max-width: 5rem;
  object-fit: contain;
}

/* Asset preview images: Use 'contain' to preserve native aspect ratios
 * without cropping or distortion. May show letterboxing when container
 * aspect ratio doesn't match image aspect ratio. */
.asset-preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Preserve aspect ratio instead of cropping */
}

/* Asset preview proxy - flexible container for aspect-ratio-preserving thumbnails */
.asset-preview-proxy {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.asset-preview-proxy img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Asset table preview placeholders (icons/fallbacks) */

/* Asset table icon colors */

.file-list {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}

.file-name {
  flex: 1;
  flex-grow: 1;
  margin-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-type-indicator {
  border-radius: 0.3rem;
  color: var(--figure);
  display: inline-block;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 0.1rem 0.4rem;
  text-align: center;
  text-transform: uppercase;
}

/* Asset type badge backgrounds - dynamically constructed as file-type-${category} */
.file-type-video {
  background-color: var(--c1);
}

.file-type-audio {
  background-color: var(--c2);
}

.file-type-edit {
  background-color: var(--c3);
}

.file-type-font {
  background-color: var(--c4);
}

.file-type-image {
  background-color: var(--c5);
}

.file-type-other {
  background-color: var(--ground-negative);
}

.file-upload-item {
  align-items: center;
  border-bottom: 1px solid var(--figure);
  display: flex;
  padding: 0.5rem;
  /* transition:
    opacity 0.3s ease,
    transform 0.3s ease; */
}

.file-upload-item.upload-complete {
  opacity: 0;
  transform: translateX(20px);
}

.font-heading {
  font-size: 2rem;
}

.font-preview {
  background-color: var(--ground);
  font-family: 'Arial', sans-serif;
  overflow: hidden;
  padding: 1rem;
  text-align: center;
}

.font-sample {
  background-color: var(--ground);
  font-family: 'Arial', sans-serif;
  padding: 0;
  text-align: center;
}

.font-text {
  background-color: var(--ground);
  text-align: left;
}

.formats-container {
  overflow-x: auto;
  padding: 1rem;
}

.info-message {
  background-color: #d1ecf1;
  border: 0.1rem solid #bee5eb;
  border-radius: 4px;
  color: #17a2b8;
  font-weight: bold;
  padding: 1.5rem;
}

.labeled {
  aspect-ratio: 16/9;
  background-color: var(--section);
  border-radius: 0.3rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  height: 5rem;
  overflow: hidden;
  position: relative;
  /* transition:
    transform 0.2s,
    box-shadow 0.2s; */
  width: 5rem;
}

.labeled .edit-file-icon,
.labeled .font-sample,
.labeled .text-file-icon,
.labeled .timeline-preview,
.labeled .unknown-preview {
  align-items: center;
  background-color: var(--ground);
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  text-align: center;
}

.labeled .label {
  flex: 1;
  font-size: 0.75rem;
  margin: 0;
  max-width: calc(100% - 1.5rem);
  overflow: hidden;
  padding: 0.25rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.labeled .select-asset {
  /* background-color: transparent; */
  border-radius: 0;
  box-shadow: none;
  flex-shrink: 0;
  height: 1rem;
  margin-left: auto;
  padding: 0.125rem;
  position: static;
  width: 1rem;
}

.labeled audio {
  margin-top: auto;
  width: 100%;
}

.labeled img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.labeled img,
.labeled video {
  flex: 1;
  height: auto;
  min-height: 5rem;
  object-fit: contain; /* Preserve aspect ratio instead of cropping */
}

.labeled:hover {
  box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
  transform: translateY(-0.1rem);
}

.loading-message {
  align-items: center;
  color: #6c757d;
  display: flex;
  font-style: italic;
  height: 100%;
  justify-content: center;
  min-height: 130px;
}

.media-preview-item .clip-preview {
  align-items: center;
  background-color: var(--section);
  display: flex;
  flex: 1;
  justify-content: center;
  min-height: 120px;
  overflow: hidden;
}

/* Modal system: dialog sizes → content flexes → body scrolls */
.modal {
  display: none;
}

/* Preset table for resolution selection */
.preset-table {
  border-collapse: collapse;
  width: 100%;
}

.preset-table th,
.preset-table td {
  padding: 0.5rem;
  text-align: left;
}

.preset-table tbody tr {
  cursor: pointer;
}

.preset-table tbody tr:hover {
  background-color: var(--ground);
}

.preset-table tbody tr:has(input:checked) {
  background-color: var(--primary-bg);
}

/* Modal open states - simplified for dialog elements */
.modal.open {
  display: flex !important;
}

.modal .close {
  cursor: pointer;
  font-size: 24px;
  font-weight: bold;
  position: absolute;
  right: 1.5rem;
  top: 10px;
}

.modal-actions {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.modal-close,
.modal .close {
  color: var(--figure-subtle);
  cursor: pointer;
  font-size: 28px;
  font-weight: bold;
}
/* 
.modal-close:hover,
.modal-close:focus,
.modal .close:hover,
.modal .close:focus {
  color: var(--figure);
  text-decoration: none;
}
 */

/* Modal content: flex column, constrained to dialog. No overflow — body scrolls. */
.modal-content {
  background-color: var(--ground);
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  padding: 0.5rem;
}

.modal-content > header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

/* Modal body: the ONLY scroll container in the modal stack */
.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.modal-body.column {
  height: auto;
}

.modal-footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
  gap: 0.5rem;
}

/* Modal forms should fill available space */
.modal-content > form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* reset align-items inherited from measured-light.css `form` so footer
     + body stretch full-width instead of centering at content-width */
  align-items: stretch;
}

/* Fixed form fields section - doesn't scroll */
.modal-form-fields {
  flex: 0 0 auto;
}

/* Asset carousel - fixed dialog height so it doesn't resize with content */
#asset-carousel-dialog[open] {
  height: 89vh;
  width: 89vw;
}

#asset-carousel-dialog[open] .modal-content {
  height: 100%;
  max-height: 100%;
}

/* Asset carousel - media sizing within modal */
#asset-carousel-dialog [data-carousel-main] img,
#asset-carousel-dialog [data-carousel-main] video {
  max-height: 65vh;
  max-width: 100%;
  object-fit: contain;
}

/* Asset carousel - filmstrip footer */
#asset-carousel-dialog .modal-footer {
  height: auto;
  max-height: none;
  overflow: hidden;
}

/* Asset carousel - options row (proxy/autoplay toggles) */
#asset-carousel-dialog [data-carousel-options] {
  flex-shrink: 0;
}

/* Asset carousel - transport controls */
#asset-carousel-dialog [data-carousel-transport] {
  flex-shrink: 0;
}

/* Asset carousel - thumbnail strip */
#asset-carousel-dialog [data-carousel-strip] {
  --carousel-strip-height: 8rem; /* Fibonacci scale */
  height: var(--carousel-strip-height);
  align-items: center;
  overflow: hidden;
}

/* Asset carousel - thumbnail strip items: share width equally */
#asset-carousel-dialog [data-carousel-strip] > * {
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#asset-carousel-dialog [data-carousel-strip] img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

#asset-carousel-dialog [data-carousel-strip] figure {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Asset carousel - current thumbnail highlight */
#asset-carousel-dialog [data-carousel-current='true'] {
  border: 0.2rem solid var(--c2);
  box-sizing: border-box;
}

.modified-item {
  color: #fd7e14;
}

.multiselect {
  background-color: var(--ground);
  border: 0.1rem solid var(--graphic);
  border-radius: 0.25rem;
  min-height: 6rem;
  padding: 0.5rem;
  width: 100%;
}

.multiselect option {
  border-radius: 0.25rem;
  margin-bottom: 0.25rem;
  padding: 0.5rem;
}

.multiselect option:checked {
  background-color: var(--section);
  color: var(--figure);
}

.nav-item {
  margin: 0 0.5rem;
}

.nav-link {
  text-decoration: none;
}

.nav-link:hover {
  background-color: var(--ground-hover);
  color: var(--figure-hover);
}

/* Logo links - pointer only, no hover color */
.nav-link:has(.welcome-image):hover {
  background-color: transparent;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  /* Markerless nav — opt out of the bare ul,ol prose indent + 65ch measure. */
  padding: 0;
  max-width: none;
}

.notification {
  border-radius: 4px;
  bottom: 70px;
  box-shadow: 0 0.2rem 10px var(--shadow-color);
  color: var(--figure);
  background-color: var(--ground);
  left: 50%;
  max-width: 90%;
  opacity: 0;
  padding: 10px 20px;
  position: fixed;
  text-align: center;
  transform: translateX(-50%) translateY(100px);
  /* transition:
    transform 0.2s,
    opacity 0.2s; */
  z-index: 2000;
}

.notification.error {
  color: var(--figure-negative);
  background-color: var(--ground-negative);
}

.notification.info {
  color: var(--figure-positive);
  background-color: var(--ground-positive);
}

.notification.warning {
  color: var(--figure-warning, #8a6d3b);
  background-color: var(--ground-warning, #fcf8e3);
}

.notification-clip-link {
  cursor: pointer;
  text-decoration: underline;
}

.notification[data-visible='true'] {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.notification.success {
  color: var(--figure-positive);
  background-color: var(--ground-positive);
}

/* Justification: fixed top-center notification positioning with slide-in; no util.css equivalent */
.notification.top-center {
  top: 2rem;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%) translateY(-100px);
  text-align: left;
  max-width: 28rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  opacity: 0;
  transition:
    transform 0.2s,
    opacity 0.2s;
}

/* Justification: active state for .top-center slide-in */
.notification.top-center.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

[data-role='notification-message'] {
  flex: 1;
  line-height: 1.4;
}

[data-role='notification-close'] {
  background: none;
  border: none;
  color: var(--figure);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  opacity: 0.8;
}

[data-role='notification-close']:hover {
  opacity: 1;
}

/* Notification actions container */
[data-role='notification-actions'] {
  display: flex;
  margin-top: 0.5rem;
}

/* Notification action buttons */
[data-role='notification-action'] {
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
}

/* Justification: column layout + fixed width for multi-line post-processing progress */
.notification.top-center.post-processing-notification {
  width: max-content;
  max-width: 24rem;
  flex-direction: column;
}

.post-processing-header {
  display: flex;
  align-items: center;
  width: 100%;
}

.post-processing-header [data-role='post-processing-title'] {
  flex: 1;
  font-weight: 600;
}

.post-processing-separator {
  border: none;
  border-top: 1px solid var(--graphic);
  margin: 0;
}

.post-processing-stages {
  display: flex;
  flex-direction: column;
}

.post-processing-stage {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.post-processing-stage-label {
  color: var(--figure);
}

/* Justification: per-stage <progress> needs a thin, full-row-width bar with appearance:none to drop native chrome. Cannot use util.css since the <progress> height + appearance overrides are element-specific, and measured-light.css owns no <progress> presets. */
.post-processing-stage-progress {
  width: 100%;
  height: 0.375rem;
  appearance: none;
}

.post-processing-stage-status {
  color: var(--figure-subtle);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.post-processing-stage.complete .post-processing-stage-status {
  color: var(--figure-positive);
}

.post-processing-stage.complete .post-processing-stage-progress {
  display: none;
}

/* Justification: column layout + fixed width for multi-line upload progress */
.notification.top-center.upload-progress-summary {
  width: max-content;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
}

[data-role='upload-progress-header'] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

[data-role='upload-progress-title'] {
  font-weight: 600;
}

[data-role='upload-progress-bar'] {
  height: 0.375rem;
  width: 100%;
  min-width: 12rem;
  background-color: var(--c2);
  border-radius: 0.1875rem;
  overflow: hidden;
}

[data-role='upload-progress-fill'] {
  height: 100%;
  background-color: var(--figure-positive);
  transition: width 0.3s ease-out;
}

[data-role='upload-progress-stats'] {
  display: flex;
  white-space: nowrap;
}

[data-role='upload-progress-stat'] {
  display: flex;
  align-items: center;
}

[data-role='upload-progress-stat'][data-state='completed'] {
  color: var(--figure-positive);
}

[data-role='upload-progress-stat'][data-state='failed'] {
  color: var(--figure-negative);
}

[data-role='upload-progress-stat'][data-state='remaining'] {
  color: var(--figure);
}

[data-role='upload-progress-percentage'] {
  font-weight: 600;
  text-align: right;
}

/* Flattened Property Controls — both property-row and editable-property-wrapper
   data-components use the same flex-row layout. The editable-property-wrapper
   component (in editable-property-wrapper.ts) uses a CSS *class* for its column
   layout, not data-component, so no conflict. */
[data-component='property-row'],
[data-component='editable-property-wrapper'] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Stack binding wrapper uses up to three rows:
   Row 1: Asset label, name, and select button
   Row 2: Stack dropdown
   Row 3: Preview dropdown (when stack is bound)
   See: property-row-factory.ts createStackBindingRow() */
[data-component='stack-binding-wrapper'] {
  flex-direction: column;
  align-items: stretch;
}

/* Stack binding dropdown - horizontal inline layout for label + select */
[data-component='stack-binding-dropdown'] {
  display: flex;
  align-items: center;
}

/* Preview value row - horizontal inline layout for label + select */
[data-component='preview-value-row'] {
  display: flex;
  align-items: center;
}

[data-component='preview-value-row'] label {
  color: var(--figure);
  min-width: 13ch;
  flex-shrink: 0;
}

/* Format override indicator styling - matches .modified-item pattern */
[data-override-source='format_override'] .property-label {
  color: #fd7e14;
}

/* Format override indicator for clip details property rows */
[data-has-format-override='true'] > label {
  color: #fd7e14;
}

/* Empty text preview styling */
[data-element='current-text-preview'][data-empty='true'] {
  font-style: italic;
  opacity: 0.6;
}

/* Audio visualization loading states */
img.audio-visualization {
  transition: opacity 0.2s ease;
}

img.audio-visualization[data-load-state='loading'] {
  opacity: 0.5;
}

img.audio-visualization[data-load-state='loaded'] {
  opacity: 1;
}

img.audio-visualization[data-load-state='error'] {
  display: none;
}

.inline-control {
  flex: 0 0 auto;
}

.range-display {
  min-width: 3rem;
  text-align: center;
  font-family: monospace;
}

.placeholder-image {
  align-items: center;
  background-color: var(--section);
  border: 0.1rem dashed var(--graphic);
  color: var(--figure-subtle);
  display: flex;
  font-style: italic;
  height: 150px;
  justify-content: center;
  width: 100%;
}

.placeholder-image,
.video-error,
.audio-error {
  display: none;
}

.preview-container {
  align-items: center;
  border-radius: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 150px;
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 1rem;
}

/* Clip Preview Container - shared between timeline and variations pages */
/* Source of truth: src/shared/constants/preview-sizing.ts */
#clip-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  overflow: hidden;
  position: relative;
  /* Height from preview sizing constants */
  height: 21rem; /* PREVIEW_HEIGHT_REM (Fibonacci scale) */
  /* Width determined by aspect-ratio (set via JS) */
}

/* Child video/img elements positioned absolutely to fill container */
#clip-preview > video,
#clip-preview > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* object-fit set via inline style from clip settings (contain/cover/fill) */
}

.preview-image {
  background-color: grey;
  max-height: 13rem;
  max-width: 13rem;
  object-fit: contain;
}

.text-clip-preview {
  background-color: grey;
  max-height: 34rem;
  max-width: 34rem;
  object-fit: contain;
}

/* Timeline preview should fill container without max-width constraint */
#clip-preview .text-clip-preview {
  max-width: none;
  max-height: none;
}

/* Text editor preview — uses data-element selectors, no custom classes */
[data-element='preview-container'] {
  position: relative;
  overflow: hidden;
}

[data-element='preview-background'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
}

[data-element='preview-container'] > [data-element='preview-image'] {
  position: relative;
  z-index: 1;
}

[data-element='preview-toggle-label'] {
  cursor: pointer;
}

[data-element='preview-toggle-label'] [data-element='loading-indicator'] {
  pointer-events: none;
}

.preview-video {
  aspect-ratio: 1 / 1;
  max-height: 8rem;
  max-width: 8rem;
  object-fit: contain;
}

#preview-modal .preview-video {
  max-height: 70vh;
  max-width: 80vw;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

#preview-modal .preview-image {
  max-height: 70vh;
  max-width: 80vw;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Preview error container styles */

/* Dark theme for modal error containers */

.project-form {
  display: flex;
}

.project-form input {
  flex: 1;
  padding: 8px;
}

.project-info {
  background-color: var(--section);
  border: 0.1rem solid var(--graphic);
  border-radius: 0.5rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
}

.project-item {
  box-shadow: 0 0 0.3rem 0rem var(--graphic);
  display: flex;
  padding: 0.5rem;
}

.project-name {
  flex: 1;
}

.remove-file-btn {
  border: none;
  border-radius: 3px;
  color: #f44336;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
}

.remove-file-btn:hover {
  text-decoration: underline;
}

.replace-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.selected {
  border: 0.1rem solid var(--ground-selected);
  box-shadow: 0 0 1rem var(--ground-selected);
}

[data-selected='true'] {
  color: var(--figure-selected);
  background-color: var(--ground-selected);
  border: 1rem var(--graphic-selected);
}

/* Folder-style selection indicator (Mac Finder arrow) */
[data-folder='true'] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

[data-folder='true']::after {
  content: '📂';
  margin-left: 0.5rem;
  flex-shrink: 0;
}

[role='tab'] {
  border-radius: 0.5rem 0.5rem 0 0;
  border-bottom: 0.1rem solid var(--graphic-selected);
}

[role='tabpanel'] {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  background-color: var(--section);
  border-radius: 0 0 0.5rem 0.5rem;
}

[aria-selected='true'] {
  background-color: var(--ground);
}

button[role='tab'][aria-selected='false'] {
  color: var(--figure-subtle);
  background-color: var(--ground);
}

button[role='tab'][aria-selected='false']:hover {
  color: var(--figure-hover);
  background-color: var(--ground-hover);
}

.resolution-box {
  aspect-ratio: 1080 / 1080;
  background-color: rgba(66, 135, 245, 0.1);
  height: 100%;
  width: auto;
}

.resolution-preview {
  align-items: center;
  display: flex;
  height: 8rem;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.result-container {
  background-color: #f5f5f5;
  border-radius: 0.5rem;
  margin-top: 1.5rem;
  min-height: 13rem;
  padding: 1rem;
}

.section-label {
  color: var(--figure-subtle);
  font-size: 0.8rem;
}

.select-asset {
  align-self: flex-end;
  background-color: var(--c2);
  border: none;
  border-radius: 0.25rem;
  box-shadow: -1px 1px 1px var(--graphic);
  color: white;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  position: relative;
  right: 0rem;
  top: 0rem;
  z-index: 10;
}

.select-asset:hover {
  background-color: var(--ground-hover);
  color: var(--figure-focus);
}

[data-component='property-row'] .radio-option {
  display: flex !important;
  align-items: center;
  min-width: auto;
}

.stat-item {
  background-color: white;
  border: 0.1rem solid #e9ecef;
  border-radius: 0.5rem;
  padding: 10px 1.5rem;
}

.stat-label {
  color: #6c757d;
  display: block;
  font-size: 0.9em;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.stat-value {
  color: #212529;
  font-size: 1.1em;
}

.success-message {
  background-color: #d4edda;
  border: 0.1rem solid #c3e6cb;
  border-radius: 4px;
  color: #28a745;
  font-weight: bold;
  margin-bottom: 20px;
  padding: 1.5rem;
}

.system-actions-container {
  background-color: var(--ground);
  box-shadow: 0 0.5rem 1rem var(--shadow-color);
  box-sizing: border-box;
}

.system-messages-container {
  align-items: center;
  background-color: var(--ground);
  border-radius: 0;
  border-top: 1px solid var(--graphic);
  bottom: 0;
  box-shadow: 0 -0.2rem 10px var(--shadow-color);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  left: 0;
  max-width: 100%;
  padding: 10px 20px;
  position: fixed;
  right: 0;
  width: 100%;
  z-index: 1000;
}

.table-actions {
  display: flex;
  justify-content: flex-end;
}

.table-actions button {
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
}

.text-file-icon {
  color: var(--figure);
  text-align: center;
}

.text-preview {
  background-color: var(--ground);
  color: var(--figure);
  text-align: center;
}

.text-preview p {
  font-family: monospace;
}

.time-display {
  background: var(--section);
  border-radius: 0.3rem;
  font-family: monospace;
  margin-left: 1rem;
  min-width: 140px;
  padding: 0.5rem;
  text-align: center;
}

.timeline-label {
  font-size: 0.8rem;
  color: var(--graphic);
  position: absolute;
  transform: translateX(50%);
}

.timeline-marker {
  border-left: 0.1rem solid var(--ground);
  height: 100%;
  position: absolute;
}

.timeline-ruler {
  border-top: 0.1rem solid var(--ground);
  cursor: pointer;
  /* Absolutely position to fill parent height */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}

.unified-upload-form {
  background-color: var(--section);
  border: 0.1rem solid var(--graphic);
  border-radius: 0.5rem;
  padding: 1.5rem;
}

.unknown-preview .preview-not-available {
  color: var(--figure-subtle);
  text-align: center;
}

.upload-form {
  background-color: var(--section);
  border-radius: 0.5rem;
  padding: 1.5rem;
}

@keyframes flash {
  0% {
    background-color: var(--figure);
  }

  100% {
    background-color: var(--ground);
  }
}

.success-message {
  color: #28a745;
  padding: 1.5rem;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 4px;
  margin-bottom: 20px;
}

.error-message {
  color: #dc3545;
  padding: 1.5rem;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
}

.info-message {
  color: #17a2b8;
  padding: 1.5rem;
  background-color: #d1ecf1;
  border: 1px solid #bee5eb;
  border-radius: 4px;
}

.stat-item {
  background-color: white;
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 10px 1.5rem;
}

.stat-label {
  color: #6c757d;
  display: block;
  font-size: 0.9em;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.stat-value {
  color: #212529;
  font-size: 1.1em;
}

.loading-message {
  align-items: center;
  color: #6c757d;
  display: flex;
  font-style: italic;
  height: 100%;
  justify-content: center;
  min-height: 130px;
}

/* Animation for highlighting a clip when selected from URL */
@keyframes flash-highlight {
  0% {
    box-shadow: 0 0 0 0.2rem white;
  }

  50% {
    box-shadow: 0 0 0 4px #4a90e2;
  }

  100% {
    box-shadow: 0 0 0 0.2rem white;
  }
}

/* Sync columns */

/* Sync status icons */

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Tooltip for copied text */
.tooltip {
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  color: white;
  font-size: 1.2rem;
  left: 50%;
  opacity: 0;
  padding: 0.5rem 8px;
  pointer-events: none;
  position: absolute;
  top: -2.5rem;
  transform: translateX(-50%);
  /* transition: opacity 0.3s; */
  white-space: nowrap;
  z-index: 100;
}

.tooltip.show {
  opacity: 1;
}

/* Notifications */

.error-message,
.info-message,
.success-message {
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 1.5rem;
  position: relative;
}

.error-message {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

.info-message {
  background-color: #d1ecf1;
  border: 1px solid #bee5eb;
  color: #0c5460;
}

.success-message {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.asset-preview-figure.inline img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* Preserve aspect ratio instead of cropping */
}

/* Preview loading states */

/* Preview spinner animation */
.preview-spinner {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}

.spinner-dot {
  animation: spinner-bounce 1.4s ease-in-out infinite;
  background-color: var(--c2);
  border-radius: 50%;
  height: 0.5rem;
  width: 0.5rem;
}

.spinner-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.spinner-dot:nth-child(2) {
  animation-delay: -0.16s;
}

.spinner-dot:nth-child(3) {
  animation-delay: 0s;
}

@keyframes spinner-bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

/* Asset preview media elements */
.asset-preview-image,
.asset-preview-video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.asset-preview-video {
  background-color: var(--section);
}

/* Error preview states */
.error-preview-container {
  align-items: center;
  background-color: var(--backgroun-error);
  border: 0.2rem solid var(--graphic-error);
  border-radius: 0.25rem;
  color: var(--figure-error);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 130px;
  padding: 1rem;
  text-align: center;
}

.error-preview-container .error-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.error-preview-container .error-message {
  background-color: transparent;
  border: none;
  color: inherit;
  font-style: italic;
  margin-bottom: 0.5rem;
  padding: 0;
}

.error-preview-container .retry-button {
  background-color: var(--ground-hover);
  border: none;
  border-radius: 0.25rem;
  color: var(--figure-focus);
  cursor: pointer;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  /* transition: background-color 0.2s; */
}

.error-preview-container .retry-button:hover {
  background-color: var(--ground-negative);
}

/* Unsupported preview states */
.unsupported-preview-container {
  align-items: center;
  background-color: var(--section);
  border: 0.2rem dashed var(--graphic);
  border-radius: 0.25rem;
  color: var(--figure-subtle);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 130px;
  padding: 1rem;
  text-align: center;
}

.unsupported-preview-container .info-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.unsupported-preview-container .info-message {
  background-color: transparent;
  border: none;
  color: inherit;
  font-style: italic;
  padding: 0;
}

/* Processing states for audio/video */

/* Loading and accessibility improvements */
.preview-placeholder {
  align-items: center;
  background-color: var(--section);
  border: 0.2rem dashed var(--graphic);
  border-radius: 0.25rem;
  color: var(--figure-subtle);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 130px;
  padding: 1rem;
  text-align: center;
}

/* Status indicators */

[data-asset-type='processing'] .asset-preview-figure {
  opacity: 0.6;
}

[data-asset-type='error'] .asset-preview-figure {
  border: 0.2rem solid var(--graphic-error);
}

/* Asset preview error and placeholder styles for elegant fallback */
.asset-preview-error,
.asset-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  /* min-height: 8rem; */
  padding: 1rem;
  background-color: var(--ground);
  border: 1px dashed var(--weaker);
  border-radius: 0.25rem;
  color: var(--weaker);
  font-size: 0.875rem;
  text-align: center;
  position: relative;
}

.asset-preview-error::before,
.asset-placeholder::before {
  content: '⚠';
  display: block;
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

.asset-preview-error {
  background-color: var(--ground-error);
  border-color: var(--graphic-error);
  color: var(--figure-error);
}

.asset-preview-error::before {
  content: '❌';
  color: var(--figure-error);
  opacity: 0.7;
}

/* Animation for placeholder while loading */
.asset-placeholder.loading::before {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.7;
  }
}

/* Responsive preview adjustments */
@media (max-width: 768px) {
  .error-preview-container,
  .unsupported-preview-container,
  .preview-placeholder {
    min-height: 100px;
    padding: 0.75rem;
  }

  .preview-spinner {
    margin-top: 0.25rem;
  }

  .spinner-dot {
    height: 0.375rem;
    width: 0.375rem;
  }
}

/* =================================
   CONFIRM DIALOG STYLES
   ================================= */

.confirm-dialog {
  border: none;
  border-radius: 0.5rem;
  padding: 0;
  width: fit-content;
  min-width: 400px;
  max-width: 90vw;
}

.confirm-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
  /* backdrop-filter: blur(0.1rem); */
}

.confirm-dialog-content {
  background-color: var(--ground);
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

.confirm-dialog-header {
  border-bottom: 1px solid var(--graphic);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.confirm-dialog-header h3 {
  color: var(--figure);
  margin: 0;
  font-size: 1.25rem;
}

.confirm-dialog-body {
  margin-bottom: 1.5rem;
}

.confirm-dialog-body p {
  color: var(--figure);
  margin: 0;
  line-height: 1.5rem;
  white-space: pre-line;
}

.confirm-dialog-footer {
  display: flex;
  justify-content: flex-end;
}

/* Progress bar styles moved to src/shared/components/progress-bar/progress-bar.css */

/* Upload progress bar container (layout only) */
.upload-progress-cell {
  width: 100%;
}

/* ============================================================================
   Tag Pill/Chip Styles
   Reusable tag display components used in asset lists, property variations, etc.
   ============================================================================ */

/* Container for tag list */
.asset-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
}

/* Individual tag pill - uses --tag-hue for unique colors per tag ID */
/* Lightness/chroma from --tag-l-on/--tag-c-on (measured-light.css) - matches filter panel */
[data-role='asset-tag'] {
  --tag-hue: 160;
  display: inline-block;
  background: oklch(var(--tag-l-on) var(--tag-c-on) var(--tag-hue));
  color: var(--figure);
  padding: 0.125rem 0.5rem;
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
}

/* Overflow indicator (+N more) */
[data-role='asset-tags-overflow'] {
  display: inline-block;
  color: var(--figure-subtle);
  font-size: 0.5rem;
  font-style: italic;
  /* padding: 0.125rem 0.25rem; */
}

/* Empty state */
[data-role='asset-tags-empty'] {
  color: var(--figure-subtle, #9ca3af);
  /* font-size: 0.8rem; */
  font-style: italic;
}

.asset-tags--compact [data-role='asset-tag'] {
  padding: 0 0.3rem;
  font-size: 0.8rem;
}

.asset-tags--compact [data-role='asset-tags-overflow'] {
  font-size: 0.8rem;
  /* padding: 0.0625rem 0.125rem; */
}

/* Dark theme support for tags - uses centralized --tag-l-on/--tag-c-on */
@media (prefers-color-scheme: dark) {
  [data-role='asset-tag'] {
    background: oklch(var(--tag-l-on) var(--tag-c-on) var(--tag-hue));
    color: var(--figure);
  }

  [data-role='asset-tags-overflow'],
  [data-role='asset-tags-empty'] {
    --figure-subtle: #9ca3af;
  }
}

/* ============================================================================
   Tag Filter Component
   Horizontal row of toggle buttons for filtering assets by tags
   ============================================================================ */

/* ============================================================================
   Filter Panel Component
   Reusable filter panel with pill toggles and action buttons.
   Uses data-* attributes for component identification.
   Color system uses oklch with --filter-hue CSS variable.
   ============================================================================ */

[data-control='filter-toggles'] {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0.5rem;
  gap: 0.5rem;
}

[data-control='filter-toggles'] > * {
  flex: 0 0 var(--filter-col-width, 21ch);
}

[data-role='filter-toggle'] {
  position: relative;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* Neutral modifier for special filters like "No tag" or "Unassigned" */
[data-role='filter-toggle'][data-state='neutral'] [data-role='filter-label'] {
  background: var(--ground);
  color: var(--figure);
}

/* Label styled as pill - uses --filter-hue for unique colors per option */
/* Lightness/chroma from --tag-l-on/--tag-c-on (measured-light.css) */
[data-role='filter-label'] {
  display: inline-block;
  background: oklch(var(--tag-l-on) var(--tag-c-on) var(--filter-hue, 180));
  color: var(--figure);
  padding: 0.3em;
  flex-shrink: 0; /* Prevent label from shrinking in flex container */
}

[data-role='filter-count'] {
  color: var(--figure-subtle);
  font-size: 0.8rem;
  margin-left: 0.3rem;
  margin-right: 0.5rem;
}

/* Dropdown inside filter toggle (for clip tag dialog pinned value selection) */
[data-role='filter-value'] {
  margin-left: 0.2rem;
  font-size: 0.8rem;
  padding: 0 0.2rem;
}

/* Delete button for filter options */
[data-role='filter-delete'] {
  margin-left: 0.25rem;
  padding: 0 0.25rem;
  background: transparent;
  border: none;
  color: var(--figure-subtle);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

[data-role='filter-delete']:hover {
  opacity: 1;
  color: var(--accent-red, #e74c3c);
}

/* Checkbox - inherits global styles from measured-light.css, size override */
[data-role='filter-checkbox'] {
  width: 1rem;
  height: 1rem;
  min-width: 1rem; /* Prevent shrinking in flex container */
  flex-shrink: 0;
  margin: 0 0.25rem 0 0;
}

/* Empty state */
[data-role='filter-empty'] {
  color: var(--figure-subtle);
  font-style: italic;
}

/* ============================================================================
   Media Preview Placeholder States
   Used by preview-component.ts for audio/video/image preview states
   ============================================================================ */

/* Base styles for media preview placeholders (no inline styles) */
.video-preview-processing,
.audio-preview-processing,
.proxy-image-processing {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--section, #f5f5f5);
  border: 0.125rem dashed var(--graphic, #ccc);
  border-radius: 0.25rem;
  color: var(--figure-subtle, #666);
  font-size: 0.875rem;
}

/* Video placeholder - taller */
.video-preview-processing {
  min-height: 8rem;
}

/* Audio placeholder - shorter */
/* .audio-preview-processing {
  min-height: 5rem;
} */

/* Image placeholder - no min-height needed, emoji fits naturally */
/* .proxy-image-processing {
  min-height: 8rem;
} */

/* Error states for media previews */
.video-preview-error,
.audio-preview-error {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ground-negative);
  border: 0.125rem dashed var(--graphic-error);
  border-radius: 0.25rem;
  color: var(--figure-error);
  font-size: 0.875rem;
}

.video-preview-error {
  min-height: 7.5rem;
}

.audio-preview-error {
  min-height: 5rem;
}

/* =============================================================================
   Editable Property Wrapper
   Dirty state tracking with Save/Undo/Reset buttons per property
   See: editable-property-wrapper.ts
   ============================================================================= */

/* Container for editable property with dirty state tracking */
.editable-property-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
}

/* Dirty state indicator - orange label when property has unsaved changes */
[data-edit-state='dirty'] > [data-component='property-row'] > label:first-child,
[data-edit-state='dirty'] > label:first-child,
[data-edit-state='dirty'] [data-element='property-label'] {
  color: #fd7e14; /* matches .modified-item */
  font-weight: bold;
}

/* Saving state indicator */
[data-edit-state='saving']
  > [data-component='property-row']
  > label:first-child,
[data-edit-state='saving'] > label:first-child,
[data-edit-state='saving'] [data-element='property-label'] {
  color: var(--c2);
}

/* Format override indicator - shows when property has a format-specific override */
/* Uses data-override-source which is dynamically updated on save/reset */
/* Note: Orange background removed intentionally - Reset button is sufficient indicator */

/* Format override indicator icon (🔳) */
[data-element='format-override-indicator'] {
  color: var(--ground-warning);
  font-size: 0.9rem;
  margin-left: 0.25rem;
}

[data-element='format-override-indicator'][hidden] {
  display: none;
}

/* Editable value container inline layout */
.editable-value-container {
  display: flex;
  align-items: center;
}

.editable-value-container [data-element='unit'] {
  color: var(--figure-subtle);
  font-size: 0.9rem;
}

/* ===========================
   Origin Preset Selector
   =========================== */

[data-element='origin-heading'] {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

[data-element='origin-grid'] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 6.25rem;
  height: 6.25rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--color-border, #333);
  border-radius: 0.25rem;
  padding: 0.25rem;
  background-color: var(--color-surface-secondary, #1a1a1a);
}

[data-element='origin-grid'] button {
  border: none;
  border-radius: 0.125rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s;
  background-color: var(--color-surface, #2a2a2a);
}

[data-element='origin-grid'] button[aria-pressed='true'] {
  background-color: var(--color-primary, #3b82f6);
}

[data-element='origin-grid'] button .origin-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: background-color 0.15s;
  background-color: var(--color-text-secondary, #888);
}

[data-element='origin-grid'] button[aria-pressed='true'] .origin-dot {
  background-color: white;
}

[data-element='custom-indicator'] {
  font-size: 0.75rem;
  color: var(--color-text-secondary, #888);
  margin-bottom: 0.5rem;
}

[data-element='margin-group'] {
  display: flex;
  flex-direction: column;
}

[data-element='margin-group'] label {
  font-size: 0.875rem;
}

/* ===========================
   Shared Logo SVG Fills
   Uses CSS variables from measured-light.css
   =========================== */

.ifs-logo__c1 {
  fill: var(--logo-c1);
}

.ifs-logo__c2 {
  fill: var(--logo-c2);
}

.ifs-logo__c3 {
  fill: var(--logo-c3);
}

/* Connector Line Overlay — shared utility (src/shared/utils/connector-line.ts) */
svg[data-connector-line] {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}

svg[data-connector-line] line {
  stroke: var(--graphic);
  stroke-width: 1.5;
  stroke-dasharray: 4 2;
}