/* =====================================================================
   01. RESET / BASE
===================================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #0b0c0e;
  color: #fff;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}


/* =====================================================================
   02. HEADER
===================================================================== */

/* Header layout */

.site-header {
  display: grid;
  grid-template-columns: 400px 1fr 400px;
  align-items: center;

  width: 100%;
  height: 150px;
  min-height: 150px;
  padding: 0 22px;

  background: #111;
  border-bottom: 1px solid #222;
}


/* Logo */

.header-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  height: 150px;
  overflow: visible;
}

.header-logo img {
  display: block;

  width: auto;
  height: 120px;

  max-width: none;
  max-height: none;

  object-fit: contain;
}


/* Search */

.header-search {
  width: 100%;
  max-width: 600px;
  justify-self: center;
}

.header-search input {
  width: 100%;
  height: 32px;
  padding: 0 14px;

  border: 1px solid #333;
  border-radius: 6px;

  background: #1b1b1b;
  color: #fff;

  font-size: 13px;
}

.header-search input:focus {
  outline: none;
  border-color: #555;
}


/* Header actions */

.header-actions {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  justify-self: end;
}


/* Three-dot menu button */

.header-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;
  padding: 0;

  border: none;
  border-radius: 6px;

  background: transparent;
  color: #bbb;

  cursor: pointer;
}

.header-menu-button:hover {
  background: #242424;
  color: #fff;
}

.header-menu-button svg {
  width: 20px;
  height: 20px;
}


/* Dropdown menu */

.header-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1000;

  width: 180px;
  padding: 6px;

  background: #1b1b1b;

  border: 1px solid #333;
  border-radius: 8px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.header-menu[hidden] {
  display: none;
}


/* Menu items */

.header-menu-item,
a.header-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;

  width: 100%;
  padding: 9px 10px;

  border: none;
  border-radius: 5px;

  background: transparent;
  color: #ddd;

  font-size: 13px;
  text-align: left;
  text-decoration: none !important;

  cursor: pointer;
}

.header-menu-item:hover {
  background: #292929;
  color: #fff;
}

.header-menu-item svg {
  width: 16px;
  height: 16px;
}

.header-menu-divider {
  height: 1px;
  margin: 5px 4px;
  background: #333;
}

.header-menu-logout {
  color: #e57373;
}

.header-menu-logout:hover {
  background: rgba(229, 115, 115, 0.1);
  color: #ef9a9a;
}


/* =====================================================================
   03. PAGE LAYOUT / INDEPENDENT SCROLLING
===================================================================== */

.page-layout {
  display: flex;
  gap: 32px;

  height: calc(100vh - 150px);
  min-height: 0;

  padding: 24px 50px 36px;

  overflow: hidden;
}

.main-content {
  flex: 1;

  min-width: 0;
  min-height: 0;
  height: 100%;

  padding-right: 8px;

  overflow-x: hidden;
  overflow-y: auto;
}


/* =====================================================================
   04. ACTOR SIDEBAR
===================================================================== */

.actor-sidebar {
  width: 240px;
  height: 100%;
  min-height: 0;

  flex-shrink: 0;
  align-self: stretch;

  padding: 18px;

  overflow-x: hidden;
  overflow-y: auto;

  background: #111;
  border-radius: 14px;
}

.actor-sidebar h2 {
  margin: 0 0 14px;
  font-size: 18px;
}

.actor-link {
  display: block;

  padding: 8px 12px;

  color: #ddd;

  font-size: 14px;
  text-decoration: none;

  border-radius: 8px;

  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.actor-link:hover {
  background-color: #c1121f;
  color: #fff;
  text-decoration: none;
}

.actor-count {
  margin-left: 8px;

  color: #999;
  font-size: 0.9em;
}

.actor-link.active {
  background-color: #e50914;
  color: #fff;
}

.actor-link.active:hover {
  text-decoration: none;
}

.actor-link.active .actor-count {
  color: #fff;
}


/* =====================================================================
   05. TOOLBAR / SORT CONTROLS
===================================================================== */

#actor-sort,
#video-sort {
  padding: 8px;

  border: 0;
  border-radius: 8px;

  background: #222;
  color: #fff;
}

#actor-sort {
  width: 100%;
  margin-bottom: 14px;
}

#video-sort {
  min-width: 170px;
}

.video-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;

  margin-bottom: 18px;
}

.video-toolbar label {
  color: #bbb;
  font-size: 14px;
}


/* =====================================================================
   06. VIDEO GRID
===================================================================== */

#video-container {
  width: 100%;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}


/* Video card */

.video-card {
  overflow: hidden;

  background: #111;
  border-radius: 10px;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.video-card:hover {
  z-index: 2;

  transform: scale(1.04);
  background: #181818;
}


/* Thumbnail */

.thumb-wrap {
  position: relative;

  width: 100%;
  aspect-ratio: 16 / 9;

  background: #1b1b1b;
}

.video-thumbnail {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* Play overlay */

.play-icon {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.45);

  opacity: 0;

  transition: opacity 0.2s ease;
}

.video-card:hover .play-icon {
  opacity: 1;
}

.play-icon svg {
  width: 52px;
  height: 52px;
}


/* Video information */

.video-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  min-height: 0;
  padding: 8px 10px 12px;
}

.video-info h3 {
  display: -webkit-box;
  overflow: hidden;

  margin: 0;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


/* Metadata */

.video-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-top: 8px;
}

.video-card-details {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.video-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  min-height: 24px;
  padding: 4px 9px;

  border-radius: 999px;

  background: #262626;
  color: #bdbdbd;

  font-size: 12px;
  font-weight: 600;
  line-height: 1;

  white-space: nowrap;
}

.video-meta-pill svg {
  width: 14px;
  height: 14px;
}

.video-tech-meta {
  margin-top: 4px;
  margin-bottom: 6px;

  font-size: 0.82rem;

  opacity: 0.7;
}


/* Tags */

.video-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.tag-pill {
  padding: 2px 8px;

  border-radius: 999px;

  color: #fff;

  font-size: 11px;
  font-weight: 600;

  white-space: nowrap;
}


/* Card actions */

.video-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-left: auto;
}


/* Delete button */

.video-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;
  padding: 0;

  border: none;
  border-radius: 6px;

  background: transparent;
  color: #888;

  cursor: pointer;
}

.video-delete-btn .trash-icon {
  display: block;

  width: 17px;
  height: 17px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.video-delete-btn:hover {
  background: rgba(239, 83, 80, 0.12);
  color: #ef5350;
}

.video-delete-btn:disabled {
  opacity: 0.4;
  cursor: wait;
}


/* =====================================================================
   07. EMPTY / ERROR STATES
===================================================================== */

.error,
.empty {
  grid-column: 1 / -1;

  color: #ccc;

  font-size: 16px;
}


/* =====================================================================
   08. VIDEO PLAYER MODAL
===================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: none;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.9);
}

.modal.open {
  display: flex;
}

.modal-content {
  position: relative;

  width: 85vw;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
}

.modal-content video {
  width: 100%;
  height: 100%;

  border: 0;

  background: #000;
}

.close-button {
  position: absolute;
  top: -46px;
  right: 0;

  border: 0;

  background: none;
  color: #fff;

  font-size: 40px;
  line-height: 1;

  cursor: pointer;
}

body.modal-open {
  overflow: hidden;
}


/* =====================================================================
   09. ADD VIDEO
===================================================================== */

/* Add Video button */

.add-video-btn {
  padding: 10px 18px;

  border: 0;
  border-radius: 8px;

  font-weight: 600;

  cursor: pointer;
}


/* Modal */

.add-video-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;

  display: none;
  align-items: center;
  justify-content: center;
}

.add-video-modal.open {
  display: flex;
}

.add-video-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.72);

  backdrop-filter: blur(4px);
}

.add-video-dialog {
  position: relative;
  z-index: 1;

  width: min(1180px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);

  padding: 28px;

  overflow-y: auto;

  background: #151515;
  border-radius: 16px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.add-video-dialog h2 {
  margin: 0 0 24px;
}

/* =========================================================
   ADD VIDEO — TWO COLUMN LAYOUT
========================================================= */

.add-video-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.9fr);
  gap: 28px;
  align-items: start;
}


.add-video-left,
.add-video-right {
  min-width: 0;
}


/* Right-hand ingestion column */

.add-video-right {
  position: sticky;
  top: 0;
}


/*
 * The ingestion panel used to sit inline beneath the form.
 * It now fills the right-hand column.
 */

.add-video-right .add-video-ingestion {
  margin: 0;
}


/* Thumbnail can now use the full width of the left column */

#add-video-thumbnail-preview {
    width: 100%;
    max-width: 100%;
    max-height: 190px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}


/* Progress bar belongs beneath the ingestion panel */

.add-video-upload-progress-wrap {
  margin-top: 16px;
}

#add-video-upload-progress {
  display: block;
  width: 100%;
}


/* Keep the percentage / byte count aligned to the right */

#add-video-upload-progress-text {
  margin-top: 6px;

  color: #888;

  font-size: 12px;
  text-align: right;
}


/* Actions remain across the bottom of the complete modal */

.add-video-actions {
  margin-top: 24px;
}

#add-video-thumbnail-panel {
    padding: 12px;
}

#add-video-thumbnail-status {
    margin-top: 8px;
}

#add-video-thumbnail-actions {
    margin-top: 8px;
}

/* ---------------------------------------------------------
   MANUAL PORTRAIT THUMBNAIL POSITIONING
--------------------------------------------------------- */

#add-video-thumbnail-preview.is-croppable {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    /*
     * We handle vertical movement ourselves.
     * Horizontal touch gestures remain available.
     */
    touch-action: pan-x;
}

#add-video-thumbnail-preview.is-croppable.is-dragging {
    cursor: grabbing;
}

/* =========================================================
   RESPONSIVE FALLBACK
========================================================= */

@media (max-width: 900px) {

  .add-video-dialog {
    width: min(620px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    padding: 20px;
  }

  .add-video-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .add-video-right {
    position: static;
  }

  .add-video-right .add-video-ingestion {
    margin-top: 4px;
  }

}


.add-video-close {
  position: absolute;
  top: 12px;
  right: 16px;

  border: 0;

  background: none;
  color: inherit;

  font-size: 30px;

  cursor: pointer;
}


/* Form fields */

.add-video-field {
  margin-bottom: 20px;
}

.add-video-field label {
  display: block;

  margin-bottom: 7px;

  font-size: 14px;
  font-weight: 600;
}

.add-video-field input[type="text"],
.add-video-field input[type="file"] {
  width: 100%;
}

.add-video-field input[type="text"] {
  padding: 11px 12px;

  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;

  background: rgba(255, 255, 255, 0.06);
  color: inherit;
}

.add-video-file-info {
  margin-top: 8px;

  font-size: 13px;

  opacity: 0.7;
}


/* Actor rows */

.add-video-actor-row {
  position: relative;

  display: flex;
  gap: 8px;

  margin-bottom: 10px;
}

.add-video-actor-row input {
  flex: 1;
}

.add-video-actor-wrapper {
  position: relative;
  flex: 1;
}

.add-video-remove-actor {
  width: 38px;

  border: 0;
  border-radius: 8px;

  cursor: pointer;
}


/* Actor autocomplete */

.add-video-actor-suggestions {
  position: absolute;
  top: calc(100% + 3px);
  right: 0;
  left: 0;
  z-index: 20;

  display: none;

  max-height: 220px;

  overflow-y: auto;

  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;

  background: #202020;
}

.add-video-actor-suggestions.open {
  display: block;
}

.add-video-actor-suggestion {
  padding: 9px 12px;
  cursor: pointer;
}

.add-video-actor-suggestion:hover {
  background: rgba(255, 255, 255, 0.08);
}


/* Actions */

.add-video-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;

  margin-top: 24px;
}

.add-video-primary-btn,
.add-video-secondary-btn {
  padding: 10px 16px;

  border: 0;
  border-radius: 8px;

  cursor: pointer;
}

.add-video-primary-btn {
  font-weight: 700;
}

.add-video-status {
  min-height: 20px;

  font-size: 14px;
}


/* =========================================================
   ADD VIDEO — INGESTION MANAGER
   =========================================================

   Visual status panel displayed while a video moves through
   analysis, duplicate detection, Backblaze upload, catalogue
   creation and thumbnail publishing.

   Stage states are controlled by add-video.js:

       is-pending
       is-active
       is-complete
       is-warning
       is-failed
========================================================= */


.add-video-ingestion {
  margin: 20px 0 16px;
  padding: 18px 20px;

  background: #151515;
  border: 1px solid #303030;
  border-radius: 10px;
}


/*
 * Respect the native hidden attribute.
 *
 * This is important because add-video.js controls visibility using:
 *
 *     addVideoIngestion.hidden = true / false
 */
.add-video-ingestion[hidden] {
  display: none;
}


/* =========================================================
   HEADER
========================================================= */

.add-video-ingestion-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 18px;
}


.add-video-ingestion-label {
  margin-bottom: 6px;

  color: #888;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}


.add-video-ingestion-name {
  max-width: 520px;

  color: #fff;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;

  overflow-wrap: anywhere;
}


.add-video-ingestion-size {
  margin-top: 4px;

  color: #888;

  font-size: 12px;
}


.add-video-ingestion-percent {
  flex: 0 0 auto;

  color: #fff;

  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}


/* =========================================================
   INGESTION STAGES
========================================================= */

.add-video-ingestion-stages {
  display: grid;

  gap: 8px;
}


.add-video-ingestion-stage {
  display: flex;
  align-items: center;

  gap: 10px;

  min-height: 25px;

  color: #777;

  font-size: 13px;
  line-height: 1.3;

  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}


/*
 * Fixed-width icon column prevents the stage labels moving
 * horizontally when ○ changes to ●, ✓, ⚠ or ✕.
 */
.add-video-stage-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  min-width: 18px;

  font-weight: 700;
  line-height: 1;
}


/* =========================================================
   PENDING
========================================================= */

.add-video-ingestion-stage.is-pending {
  color: #666;
}


/* =========================================================
   ACTIVE
========================================================= */

.add-video-ingestion-stage.is-active {
  color: #fff;

  font-weight: 600;
}


.add-video-ingestion-stage.is-active
.add-video-stage-icon {
  color: #e50914;
}


/*
 * Gentle pulse on the active-stage marker.

 * Only the marker animates, rather than the complete row, so
 * the display remains easy to read during long uploads.
 */
.add-video-ingestion-stage.is-active
.add-video-stage-icon {
  animation: add-video-stage-pulse 1.4s ease-in-out infinite;
}


@keyframes add-video-stage-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }

}


/* =========================================================
   COMPLETE
========================================================= */

.add-video-ingestion-stage.is-complete {
  color: #d7d7d7;
}


.add-video-ingestion-stage.is-complete
.add-video-stage-icon {
  color: #4caf50;

  animation: none;
}


/* =========================================================
   WARNING
========================================================= */

.add-video-ingestion-stage.is-warning {
  color: #d7d7d7;
}


.add-video-ingestion-stage.is-warning
.add-video-stage-icon {
  color: #f0ad4e;

  animation: none;
}


/* =========================================================
   FAILED
========================================================= */

.add-video-ingestion-stage.is-failed {
  color: #fff;
}


.add-video-ingestion-stage.is-failed
.add-video-stage-icon {
  color: #e50914;

  animation: none;
}


/* =========================================================
   COMPLETION RESULT
========================================================= */

.add-video-ingestion-result {
  margin-top: 16px;
  padding-top: 14px;

  border-top: 1px solid #303030;

  color: #ccc;

  font-size: 13px;
  line-height: 1.65;
}


.add-video-ingestion-result[hidden] {
  display: none;
}


.add-video-ingestion-result strong {
  color: #fff;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}


/* =========================================================
   EXISTING BACKBLAZE PROGRESS BAR
   =========================================================

   These rules enhance the progress controls already present
   in pornflix.html rather than replacing them.
========================================================= */

#add-video-upload-progress-wrap {
  margin: 14px 0 18px;
}


#add-video-upload-progress {
  display: block;

  width: 100%;
  height: 8px;

  overflow: hidden;

  border: 0;
  border-radius: 999px;

  background: #303030;
}


/* Chrome / Safari */
#add-video-upload-progress::-webkit-progress-bar {
  background: #303030;

  border-radius: 999px;
}


#add-video-upload-progress::-webkit-progress-value {
  background: #e50914;

  border-radius: 999px;

  transition: width 0.15s linear;
}


/* Firefox */
#add-video-upload-progress::-moz-progress-bar {
  background: #e50914;

  border-radius: 999px;
}


#add-video-upload-progress-text {
  margin-top: 7px;

  color: #888;

  font-size: 12px;
  text-align: right;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .add-video-ingestion {
    margin-top: 16px;
    padding: 14px;
  }


  .add-video-ingestion-header {
    gap: 12px;

    margin-bottom: 15px;
  }


  .add-video-ingestion-name {
    max-width: 240px;

    font-size: 14px;
  }


  .add-video-ingestion-percent {
    font-size: 17px;
  }


  .add-video-ingestion-stage {
    gap: 8px;

    font-size: 12px;
  }


  .add-video-stage-icon {
    width: 16px;
    min-width: 16px;
  }

}

/* =====================================================================
   10. DELETE VIDEO MODAL
===================================================================== */

.delete-video-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(0, 0, 0, 0.78);

  backdrop-filter: blur(4px);
}

.delete-video-modal.open {
  display: flex;
}

.delete-video-dialog {
  width: min(440px, 100%);
  padding: 26px;

  background: #171717;
  color: #fff;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65);
}

.delete-video-dialog h2 {
  margin: 0 0 18px;

  font-size: 1.35rem;
}

.delete-video-warning {
  margin: 0 0 10px;

  color: rgba(255, 255, 255, 0.8);
}

.delete-video-dialog ul {
  margin: 0 0 20px;
  padding-left: 20px;

  color: rgba(255, 255, 255, 0.7);

  line-height: 1.6;
}

.delete-video-details {
  display: flex;
  flex-direction: column;
  gap: 4px;

  padding: 14px;

  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

#deleteVideoTitle {
  font-size: 0.95rem;
}

#deleteVideoUid {
  color: rgba(255, 255, 255, 0.5);

  font-size: 0.78rem;
}

.delete-video-final-warning {
  margin: 18px 0;

  color: rgba(255, 255, 255, 0.55);

  font-size: 0.82rem;
}


/* Delete actions */

.delete-video-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.delete-video-cancel,
.delete-video-confirm {
  padding: 9px 14px;

  border: 0;
  border-radius: 7px;

  font: inherit;
  font-size: 0.82rem;

  cursor: pointer;
}

.delete-video-cancel {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.delete-video-cancel:hover {
  background: rgba(255, 255, 255, 0.16);
}

.delete-video-confirm {
  background: #c62828;
  color: #fff;
}

.delete-video-confirm:hover {
  background: #e53935;
}

.delete-video-confirm:disabled,
.delete-video-cancel:disabled {
  opacity: 0.5;
  cursor: wait;
}


/* =====================================================================
   11. RESPONSIVE
===================================================================== */

@media (max-width: 1200px) {
  .video-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}