/* No border-right here (removed per issue #7) — the sidebar and Platforms & Formats columns
   share the same --pa-panel background and the same header-bar height/border-bottom (see
   .pa-brand / .pa-platforms__topbar), so a vertical divider between them read as an unwanted
   seam rather than a real boundary. The Platforms & Formats / Output boundary keeps its divider
   (.pa-platforms still has border-right) since those two columns don't share a background. */
.pa-sidebar {
  width: 25%;
  flex: 0 0 25%;
  height: 100%;
  overflow: hidden;
  background: var(--pa-panel);
  color: var(--pa-text-primary);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Brand header — a fixed height shared with .pa-platforms__topbar/.pa-output__topbar (see
   theme.css's --pa-header-bar-h) so the row below it ("Project details" / "Platforms & Formats"
   / "Output") lines up across all three columns instead of "Platforms & Formats" floating above
   the other two. */

.pa-brand {
  position: relative;
  flex: 0 0 auto;
  height: var(--pa-header-bar-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid var(--pa-border);
}

/* Shown once isExportUnlocked() is true (see sidebar.js) — positioned at the header bar's top
   right rather than inline next to the title so it reads as a status flag, not part of the
   wordmark itself. */
.pa-brand__pro-badge {
  position: absolute;
  top: 8px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg-dark);
  background: var(--accent);
  padding: 2px 8px;
  border-radius: 3px;
}

.pa-sidebar__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.pa-brand__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pa-brand__logo {
  height: 26px;
  width: auto;
  display: block;
}

.pa-brand__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--pa-text-primary);
}

/* Project section */

.pa-project {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 24px 24px;
  border-bottom: 1px solid var(--pa-border);
}

.pa-project__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.pa-field-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pa-text-secondary);
}

.pa-field-label__required {
  color: var(--pa-amber-text);
}

.pa-date-field {
  flex: 0 1 138px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pa-date-field__wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.pa-date-field__input {
  width: 100%;
  min-width: 128px;
  height: 34px;
  box-sizing: border-box;
  background: var(--pa-field);
  border: 1px solid var(--pa-border);
  border-radius: 4px;
  color: var(--pa-text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 9px 34px 9px 12px;
  outline: none;
}

.pa-date-field__input[data-complete="false"] {
  border-color: var(--pa-amber);
}

.pa-date-field__input:focus {
  border-color: var(--accent);
}

.pa-date-field__picker-icon {
  position: absolute;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--pa-text-secondary);
}

/*
 * The real native date input, sized and positioned exactly over the calendar icon rather than
 * hidden at 1x1px. This makes "click the icon" a genuine click on the native control, so the
 * browser opens its own picker with zero JS — showPicker() is fragile (spotty/inconsistent
 * support outside Chromium) and unnecessary once the real control is what's actually clickable.
 */
.pa-date-field__native {
  position: absolute;
  right: 4px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
}

.pa-date-field__wrapper:has(.pa-date-field__native:hover) .pa-date-field__picker-icon {
  color: var(--accent-dark);
}

.pa-name-field {
  flex: 1 1 140px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pa-name-field__input {
  width: 100%;
  height: 34px;
  box-sizing: border-box;
  background: var(--pa-field);
  border: 1px solid var(--pa-border);
  border-radius: 4px;
  color: var(--pa-text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 9px 12px;
  outline: none;
}

.pa-name-field__input[data-complete="false"] {
  border-color: var(--pa-amber);
}

.pa-name-field__input:focus {
  border-color: var(--accent);
}

/* Source files section */

.pa-source-files {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 24px 32px;
}

.pa-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 16px;
  border: 1px dashed var(--pa-border-strong);
  border-radius: 4px;
  background: var(--pa-field);
  text-align: center;
  cursor: pointer;
}

.pa-drop-zone:hover {
  border-color: var(--accent);
  background: var(--pa-field-hover);
}

.pa-drop-zone__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pa-text-secondary);
}

.pa-drop-zone__hint {
  font-size: 11px;
  line-height: 1.5;
  color: var(--pa-text-tertiary);
}

.pa-strip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pa-strip-row__label {
  font-size: 12px;
  color: var(--pa-text-secondary);
}

.pa-metadata-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--pa-border);
  border-radius: 4px;
}

.pa-metadata-fields[data-disabled="true"] {
  opacity: 0.55;
}

.pa-metadata-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pa-metadata-field .pa-field-label {
  flex: 0 0 62px;
}

.pa-metadata-field__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  box-sizing: border-box;
  background: var(--pa-field);
  border: 1px solid var(--pa-border);
  border-radius: 4px;
  color: var(--pa-text-primary);
  font-family: var(--font-body);
  font-size: 12px;
  padding: 0 10px;
  outline: none;
}

.pa-metadata-field__input:focus {
  border-color: var(--accent);
}

.pa-metadata-field__input:disabled {
  cursor: not-allowed;
}

.pa-metadata-fields__hint {
  font-size: 10px;
  line-height: 1.5;
  color: var(--pa-text-tertiary);
}

.pa-quality-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pa-quality-row__label {
  font-size: 12px;
  color: var(--pa-text-secondary);
}

.pa-quality-row__control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.pa-quality-row__value {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pa-text-primary);
}

.pa-quality-row__slider {
  width: 72px;
  accent-color: var(--accent);
}

.pa-source-files__actions {
  display: flex;
  align-self: flex-end;
  gap: 8px;
}

/* File groups / rows */

.pa-file-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pa-file-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--pa-border);
}

.pa-file-group__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pa-text-secondary);
}

.pa-file-group__action {
  background: transparent;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pa-text-tertiary);
}

.pa-file-group__action:hover {
  color: var(--accent-dark);
}

.pa-file-group__action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.pa-file-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, #3a3a3a, #1f1f1f);
  color: #5a5a5a;
  font-size: 15px;
  line-height: 1;
  filter: none;
  opacity: 1;
}

.pa-file-thumb[data-has-preview="true"] {
  background-size: cover;
  background-position: center;
}

.pa-file-thumb[data-excluded="true"] {
  filter: grayscale(1);
  opacity: 0.45;
}

.pa-file-thumb__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 26, 26, 0.35);
}

.pa-file-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  opacity: 1;
}

.pa-file-text[data-excluded="true"] {
  opacity: 0.45;
}

.pa-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 400;
  color: var(--pa-text-primary);
}

.pa-file-name[data-open="true"] {
  font-weight: 600;
}

.pa-file-status {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--pa-text-secondary);
}

.pa-file-status[data-tone="warning"] {
  color: var(--pa-amber-text);
}

.pa-file-status[data-tone="excluded"] {
  color: var(--pa-text-muted);
}