/* What Production and Director Review share: the player transport, the EDL picker and the notes column. */

/* ---------------------------------------------------------------- player transport */

.player-controls { color: var(--text); font-family: var(--font-family); }
.player-controls [hidden] { display: none !important; }
.player-controls__row { align-items: center; display: flex; gap: 12px; min-width: 0; }
.player-controls__timeline { flex: 1; min-width: 0; position: relative; }

.player-controls__play,
.player-controls__icon {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  flex: none;
  justify-content: center;
  padding: 0;
}
.player-controls__play:disabled { cursor: default; opacity: 0.4; }
.player-controls__play .icon { fill: currentColor; }
.player-frame { color: var(--text); flex: none; font-size: 11px; font-variant-numeric: tabular-nums; line-height: 13px; white-space: nowrap; }

/* The scrubber: a thin track filled in purple up to the playhead (--progress is set as it moves). */
.player-controls__scrubber {
  appearance: none;
  background: linear-gradient(to right, var(--accent) 0 var(--progress, 0%), #3f3f46 var(--progress, 0%) 100%);
  border-radius: 2px;
  cursor: pointer;
  display: block;
  height: 4px;
  margin: 0;
  width: 100%;
}
.player-controls__scrubber:disabled { cursor: default; opacity: 0.5; }
.player-controls__scrubber::-webkit-slider-thumb { appearance: none; background: #fff; border-radius: 50%; height: 10px; opacity: 0; transition: opacity 0.12s; width: 10px; }
.player-controls__scrubber::-moz-range-thumb { background: #fff; border: 0; border-radius: 50%; height: 10px; opacity: 0; width: 10px; }
.player-controls__scrubber:hover::-webkit-slider-thumb, .player-controls__scrubber:focus-visible::-webkit-slider-thumb { opacity: 1; }
.player-controls__scrubber:hover::-moz-range-thumb, .player-controls__scrubber:focus-visible::-moz-range-thumb { opacity: 1; }
.player-controls__scrubber:focus-visible { outline: none; }

/* Sound: the speaker, with its level sliding out beside it on hover. */
.player-controls__sound { align-items: center; display: flex; flex: none; gap: 6px; }
.player-controls__volume {
  appearance: none;
  background: linear-gradient(to right, #e5e5e5 0 var(--progress, 100%), #3f3f46 var(--progress, 100%) 100%);
  border-radius: 2px;
  cursor: pointer;
  height: 3px;
  opacity: 0;
  transition: opacity 0.15s, width 0.15s;
  width: 0;
}
.player-controls__volume::-webkit-slider-thumb { appearance: none; background: #fff; border-radius: 50%; height: 9px; width: 9px; }
.player-controls__volume::-moz-range-thumb { background: #fff; border: 0; border-radius: 50%; height: 9px; width: 9px; }
.player-controls__sound:hover .player-controls__volume,
.player-controls__sound:focus-within .player-controls__volume { opacity: 1; width: 64px; }

/* Overlay layout: one slim bar over the bottom of the picture. */
.player-controls--overlay { background: rgba(0, 0, 0, 0.7); padding: 8px; }
.player-controls--overlay .player-controls__row { gap: 12px; height: 13px; }
.player-controls--overlay .player-controls__play { height: 13px; width: 13px; }
.player-controls--overlay .player-controls__icon { height: 13px; width: 13px; }

/* Bar layout: the line under the picture, its note markers, then the transport row. */
.player-controls--bar { background: var(--surface-card); display: flex; flex-direction: column; }
.player-controls--bar .player-controls__timeline { padding-bottom: 0; }
.player-controls--bar .player-controls__scrubber { border-radius: 0; height: 3px; }
.player-controls--bar .player-controls__markers { border-bottom: 1px solid #23242a; height: 36px; position: relative; }
.player-controls--bar .player-controls__timeline:has(.player-controls__markers[hidden]) { border-bottom: 1px solid #23242a; }
.player-controls__marker {
  background: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  height: 14px;
  padding: 0;
  position: absolute;
  top: 11px;
  transform: translateX(-50%);
  transition: transform 0.12s;
  width: 14px;
}
.player-controls__marker:hover { transform: translateX(-50%) scale(1.2); }
.player-controls__marker.is-selected { background: #f6c427; }
.player-controls--bar .player-controls__row { gap: 16px; padding: 20px 22px; }
.player-controls--bar .player-controls__play { background: #f5f5f5; border-radius: var(--radius-md); color: #0a0a0a; height: 44px; width: 44px; }
.player-controls--bar .player-controls__play:hover:not(:disabled) { background: #fff; }
.player-controls--bar .player-frame { font-size: 18px; font-weight: 500; line-height: 24px; }
.player-controls__hint { color: var(--text-dim); font-size: 15px; white-space: nowrap; }
.player-controls__spacer { flex: 1; }
.player-controls--bar .player-controls__icon { border: 1px solid var(--line-strong); border-radius: var(--radius-lg); height: 44px; width: 44px; }
.player-controls--bar .player-controls__icon:hover { background: rgba(255, 255, 255, 0.06); }

@media (max-width: 1280px) {
  .player-controls__hint { display: none; }
}

/* ---------------------------------------------------------------- EDL picker */

.edl-picker { display: flex; flex-direction: column; gap: 8px; }
.edl-picker__apply { align-items: center; color: var(--text-secondary); cursor: pointer; display: flex; font-family: var(--font-ui); font-size: 12px; gap: 8px; line-height: 16px; }
.edl-picker__apply input { appearance: none; border: 1px solid var(--line-strong); border-radius: 4px; cursor: pointer; height: 16px; margin: 0; position: relative; width: 16px; }
.edl-picker__apply input:checked { background: var(--accent); border-color: var(--accent); }
.edl-picker__apply input:checked::after { border: solid #fff; border-width: 0 2px 2px 0; content: ""; height: 8px; left: 5px; position: absolute; top: 1px; transform: rotate(45deg); width: 4px; }
.edl-picker .production-select { width: 100%; }
.edl-picker__status { color: var(--text-dim); font-size: 11px; line-height: 15px; }

/* ---------------------------------------------------------------- notes column */

.notes-panel { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 16px; }
.notes-panel__heading { display: flex; flex: none; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.notes-panel__title { color: #fff; font-family: var(--font-ui); font-size: 16px; font-weight: 600; line-height: 22px; margin: 0; }
.notes-panel__controls { align-items: center; display: flex; gap: 8px; justify-content: space-between; min-height: 28px; }

/* The "⋮" menu of tick boxes for which kinds of entry a list shows (filterMenu.js). */
.filter-menu { display: inline-flex; position: relative; }
.filter-menu__trigger { background: rgba(255, 255, 255, 0.04); border-color: var(--line-card); position: relative; }
.filter-menu__trigger[aria-expanded="true"] { background: rgba(255, 255, 255, 0.1); }
/* A dot while the ticks differ from the usual ones, so a filtered list is never mistaken for the usual one. */
.filter-menu__trigger.is-filtered::after { background: var(--accent); border: 2px solid var(--surface-card, #111); border-radius: 50%; content: ""; height: 8px; position: absolute; right: -3px; top: -3px; width: 8px; }
.filter-menu__menu {
  background: #0a0a0a;
  border: 1px solid var(--line-card);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px 0 0;
  min-width: 9.5rem;
  padding: 6px;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 30;
}
.filter-menu__menu[hidden] { display: none; }
.filter-menu__legend { border: 0; clip: rect(0 0 0 0); height: 1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
.filter-menu__option { align-items: center; border-radius: var(--radius); color: var(--text); cursor: pointer; display: flex; font-family: var(--font-ui); font-size: 13px; gap: 10px; line-height: 18px; padding: 4px 8px; user-select: none; }
.filter-menu__option:hover { background: rgba(255, 255, 255, 0.06); }
.filter-menu__option input { appearance: none; background: transparent; border: 1px solid var(--line-strong); border-radius: 3px; cursor: pointer; flex: none; height: 16px; margin: 0; position: relative; width: 16px; }
.filter-menu__option input:checked { background: #e5e5e5; border-color: #e5e5e5; }
.filter-menu__option input:checked::after { border: solid #0a0a0a; border-width: 0 2px 2px 0; content: ""; height: 8px; left: 5px; position: absolute; top: 1px; transform: rotate(45deg); width: 4px; }
.filter-menu__option input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.notes-panel__list { flex: 1; min-height: 0; overflow-y: auto; }

.director-notes { display: flex; flex-direction: column; gap: 5px; list-style: none; margin: 0; padding: 0; }
.director-note {
  border: 1px solid transparent;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  transition: background-color 0.12s, border-color 0.12s;
}
.director-note--selectable { cursor: pointer; }
.director-note--selectable:hover { background: rgba(255, 255, 255, 0.03); }
.director-note.is-selected { background: var(--highlight-soft); border-color: var(--highlight); }
.director-note--outside-cut { opacity: 0.5; }
.director-note__header { align-items: baseline; display: flex; font-family: var(--font-ui); font-size: 10px; gap: 5px; line-height: 13px; min-width: 0; }
.director-note__where { color: var(--highlight); flex: none; font-weight: 700; }
.director-note__author { color: #70747d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.director-note__role { border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--text-secondary); flex: none; font-size: 9px; font-weight: 600; line-height: 12px; padding: 0 5px; }
.director-note__role--lead { border-color: rgba(103, 159, 219, 0.6); color: #9cc3ec; }
.director-note__role--director { border-color: rgba(139, 92, 246, 0.6); color: #c4b5fd; }
.director-note__role--client { border-color: rgba(85, 185, 109, 0.6); color: #7fd08f; }
.director-note__role--production { border-color: rgba(224, 169, 44, 0.6); color: var(--highlight); }
.director-note__time { color: #70747d; flex: none; margin-left: auto; white-space: nowrap; }
.director-note__message { color: #fff; font-family: var(--font-ui); font-size: 12px; line-height: 16px; margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.director-note__image-link { align-self: flex-start; display: block; }
.director-note__image { border-radius: 2px; display: block; height: 56px; object-fit: cover; width: 102px; }
.director-note__empty { color: var(--text-dim); font-size: 12px; padding: 8px 0; }
.director-note__error { color: var(--status-red); font-size: 12px; padding: 8px 0; }

.director-note-form { display: flex; flex: none; flex-direction: column; gap: 7px; position: relative; }
.director-note-form__input { min-height: 96px; }
.director-note-form__footer { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
.director-note-form__hint { color: var(--text-dim); font-family: var(--font-ui); font-size: 10px; line-height: 16px; }
.director-note-form__submit { background: #e5e5e5; color: #0a0a0a; }
.director-note-form__submit:hover:not(:disabled) { background: #fff; }
.director-note-form__submit:disabled { opacity: 0.5; }
/* While a note is being written the form brightens up*/
.director-note-form:focus-within .director-note-form__input { color: #fff; }
.director-note-form:focus-within .director-note-form__hint { color: #fff; }
.director-note-form:focus-within .director-note-form__submit:disabled { opacity: 0.75; }
.director-note-form__tooltip {
  align-self: flex-start;
  background: #fff;
  border-radius: var(--radius-lg);
  color: #0a0a0a;
  font-family: var(--font-ui);
  font-size: 12px;
  margin-bottom: 4px;
  padding: 6px 8px;
  position: relative;
}
.director-note-form__tooltip::after { background: #fff; bottom: -4px; content: ""; height: 8px; left: 50%; position: absolute; transform: translateX(-50%) rotate(45deg); width: 8px; }