/* Modern Dark Theme by cj13 v1.2 */
 :root {
     --nav-color: #212121;
     --body-color: #191919;
     --card-color: #2a2a2a;
     --plex-yelow: #e5a00d;
     --tag-color: #555555;
}
 #scrubber-position-indicator {
     background-color: #e5a00d;
}
 .scrubber-tags-background {
     background-color: #e5a00d;
     opacity: 30%;
}
 body {
     width: 100%;
     height: 100%;
     background: var(--body-color);
}
 .text-white {
     color: #cbced2 !important;
}
 #root {
     position: absolute;
     width: 100%;
     height: 100%;
     z-index: 2;
}
 div.react-select__menu, div.dropdown-menu {
     background-color: var(--card-color);
}
 * {
     scrollbar-color: hsla(0, 0%, 100%, .2) transparent;
}
 .bg-dark {
     background-color: var(--nav-color)!important;
}
 .card {
     background-color: #30404d;
     border-radius: 3px;
     box-shadow: 0 0 0 1px rgba(16, 22, 26, .4), 0 0 0 rgba(16, 22, 26, 0), 0 0 0 rgba(16, 22, 26, 0);
     padding: 20px;
     background-color: var(--card-color);
}
 .text-input, .text-input:focus, .text-input[readonly], .text-input:disabled {
     background-color: var(--card-color);
}
 #scrubber-forward {
     background-color: transparent;
     border: 1px solid #555;
}
 .scrubber-button {
     background-color: transparent;
     border: 1px solid #555;
}
 .bg-secondary {
     background-color: var(--card-color) !important;
}
 .text-white {
     color: #eee !important;
}
 .border-secondary {
     border-color: #2f3335 !important;
}
 .btn-secondary.filter-item.col-1.d-none.d-sm-inline.form-control {
     background-color: rgba(0, 0, 0, .15);
}
 .btn-secondary {
     color: #eee;
     background-color: rgba(0, 0, 0, .15);
     border-color: var(--tag-color);
}
 .pagination .btn:last-child {
     border-right: 1px solid var(--tag-color);
}
 .pagination .btn:first-child {
     border-left: 1px solid var(--tag-color);
}
 a {
     color: hsla(0, 0%, 100%, .45);
}
 .btn.active {
     background-color: #2f3335;
     color: #f5f8fa;
}
 minimal.w-100.active.btn.btn-primary {
     background-color: #2f3335;
     color: #f5f8fa;
}
 .btn-primary {
     color: #fff;
     background-color: #cc7b19;
     border-color: #cc7b19;
     font-weight: bold;
}
 .btn-primary:hover {
     color: #fff;
     background-color: #e59029;
     border-color: #e59029 font-weight: bold;
}
 .nav-tabs .nav-link.active {
     color: #eee;
}
 .nav-tabs .nav-link.active:hover {
     border-bottom-color: #eee;
     outline: 0;
}
 .nav-tabs .nav-link {
     color: hsla(0,0%,100%,.65);
}
 .tag-item {
     background-color: var(--tag-color);
     color: #fff;
}
 .input-control, .input-control:focus {
     background-color: rgba(16, 22, 26, .3);
}
 #performer-page .image-container .performer {
     background-color: rgba(0, 0, 0, .45);
     box-shadow: 0 0 2px rgba(0, 0, 0, .35);
}
 .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
     color: #fff;
     border-color: #eee;
}
 .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
     background-color: var(--nav-color);
}
 .btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
     box-shadow: none;
}
 .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
     color: #fff;
     background-color: #2f3335;
     border-color: #eee;
}
 input[type="range"]::-moz-range-track {
     background: hsla(0, 0%, 100%, .25);
}
 input[type="range"]::-moz-range-thumb {
     background: #bcbcbc;
}
 div.react-select__control {
     background-color: hsla(0, 0%, 39.2%, .4);
     color: #182026;
     border-color: var(--card-color);
     cursor: pointer;
}
 .scene-wall-item-text-container {
     background: radial-gradient(farthest-corner at 50% 50%, rgba(50, 50, 50, .5) 50%, #323232 100%);
     color: #eee;
}
 .filter-container, .operation-container {
     background-color: rgba(0, 0, 0, .15);
     box-shadow: none;
     margin-top: -10px;
     padding: 10px;
}
 .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
     width: 100%;
     margin-right: 0px;
     margin-left: 0px;
}
 .btn-link {
     font-weight: 500;
     color: #eee;
     text-decoration: none;
}
 button.minimal.brand-link.d-none.d-md-inline-block.btn.btn-primary {
     text-transform: uppercase;
     font-weight: bold;
}
 a:hover {
     color: hsla(0, 0%, 100%, .7);
}
 option {
     background-color: var(--nav-color);
}
 .folder-list .btn-link {
     color: #2c2e30;
}
 #performer-scraper-popover {
     z-index: 10;
}
 .filter-container, .operation-container {
     background-color: transparent;
}
 .search-item {
     background-color: var(--card-color);
}
 .selected-result {
     background-color: var(--card-color);
}
 .selected-result:hover {
     background-color: var(--card-color);
}
 .performer-select-active .react-select__control, .studio-select-active .react-select__control {
     background-color: hsla(0, 0%, 39.2%, .4);
}
 #scene-edit-details .edit-buttons-container {
     margin: 0px;
     background: var(--body-color);
}
 #tasks-panel .tasks-panel-queue {
     background: var(--body-color);
}
 .job-table.card {
     background-color: var(--card-color);
}
 .modal-header, .modal-body, .modal-footer {
     background-color: #2d3744;
     background-repeat: no-repeat;
     background-size: cover;
     background-attachment: fixed;
    /* background-position: center;
     */
}
 .folder-list .btn-link {
     color: #fff;
}
 .modal-header, .modal-body, .modal-footer {
     background-color: #30404d;
     color: #f5f8fa;
     background-repeat: no-repeat;
     background-size: cover;
     background-attachment: fixed;
     background-position: center;
}
 @media (max-width: 575.98px) and (orientation: portrait) {
     .scene-card-preview-image {
         height: calc(100vw * (9 / 16));
    }
     .gallery-tabs .mr-auto.nav.nav-tabs {
         display: grid;
         grid-auto-flow: column;
         text-align: center;
         left: 0;
         right: 0;
         position: fixed;
    }
     .VideoPlayer.portrait .video-js {
         height: 56.25vw;
    }
     .gallery-container .tab-content {
         top: 3rem;
         position: fixed;
         height: calc(100vh - 6.5rem);
    }
     .gallery-tabs {
         display: none;
    }
     .btn-toolbar {
         padding-top: 1rem;
    }
     body {
         padding: 0rem 0 5rem;
    }
     .scene-tabs .mr-auto.nav.nav-tabs {
         background-color: #121212;
         display: grid;
         grid-auto-flow: column;
         height: 3rem;
         left: 0;
         margin: 0;
         margin-bottom: 0;
         max-height: 3rem;
         padding-bottom: 2.2rem;
         padding-top: 0.1rem;
         position: fixed;
         right: 0;
         text-align: center;
         top: calc(100vw * (9 / 16));
         white-space: nowrap;
         z-index: 20;
    }
     .scene-tabs.order-xl-first.order-last {
         height: calc(100vh - (100vw * (9 / 16) + 8.5rem));
         top: calc((100vw * (9 / 16)) + 5rem);
         position: fixed;
    }
     .tab-content {
         overflow-y: auto;
         overflow-x: hidden;
    }
     .studio-card {
         width: 100%;
         height: 294px;
    }
     .movie-card {
         width: 45%;
    }
     .performer-card-image {
         height: 19rem;
    }
     .performer-card {
         width: 14rem;
         height: 27.5rem;
    }
     .scene-performers .performer-card-image {
         height: 19rem;
    }
     .scene-performers .performer-card {
         width: 14rem;
         height: 27.5rem;
    }
     .movie-card .TruncatedText {
         display: none;
    }
     .nav-tabs .nav-link.active:hover {
         outline: 0;
         border-bottom: 2px solid 
    }
     #performer-details-tab-edit{
         display: none;
    }
     #performer-details-tab-operations{
         display: none;
    }
     .scene-tabs .ml-auto.btn-group {
         position: fixed;
         right: 1rem;
         top: calc((100vw * (9 / 16)) + 2.7rem);
    }
     .stats-element {
         flex-grow: 1;
         margin: auto 0rem;
    }
     .stats {
         margin-left: 0px;
    }
     .top-nav {
         bottom: 0;
         top: auto;
    }
     div[data-rb-event-key="/images"] {
         display: none;
    }
     div[data-rb-event-key="/scenes/markers"] {
         display: none;
    }
     .row.justify-content-center.scene-performers {
         max-height: 450px;
         display: flex;
         flex-direction: column;
         overflow: auto;
         border-top: solid 2px #2d3035;
         border-bottom: solid 2px #2d3035;
         padding-top: .5rem;
         padding-bottom: .5rem;
    }
     .scene-tabs {
         max-height: 100%;
    }
}
 dd {
     word-break: break-word;
}
 .btn-secondary {
     color: hsla(0,0%,100%,.65);
}
 .btn-secondary:hover {
     color: white;
     z-index: 0;
     border-color: var(--nav-color);
     background-color: rgba(0, 0, 0, .15);
}
 .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show>.btn-secondary.dropdown-toggle {
     background-color: rgba(0, 0, 0, .35);
}
 .btn-secondary:focus, .btn-secondary.focus {
     background-color: rgba(0, 0, 0, .35);
}
 .scrubber-wrapper {
     background-color: rgba(0, 0, 0, .3);
     border-style: ridge;
     border-color: #555555;
}
 a.minimal:hover:not(:disabled), button.minimal:hover:not(:disabled) {
     background: none;
     color: white;
}
 .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
     color: var(--plex-yelow);
     border-bottom: solid;
     background: none;
}
 a.minimal, button.minimal {
     color: hsla(0,0%,100%,.65);
}
 .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
     background: none;
     border-left: solid;
     color: var(--plex-yelow);
}
 .nav-link {
     color: hsla(0,0%,100%,.65);
}
 .nav-link:hover, .nav-link:focus {
     color: white;
     background-color: hsla(0,0%,100%,.08);
}
 .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
     background-color: transparent;
}
 .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show>.btn-secondary.dropdown-toggle {
     background: none;
     color: var(--plex-yelow);
     border-bottom: solid;
}
 .nav-tabs .nav-link.active {
     color: var(--plex-yelow);
     background: none;
}
 .nav-tabs .nav-link:hover {
     border-bottom: none;
}
 .custom-control-input:checked~.custom-control-label:before {
     color: #fff;
     border-color: var(--plex-yelow);
     background-color: var(--plex-yelow);
}
 .custom-switch .custom-control-input:disabled:checked~.custom-control-label:before {
     background-color: var(--plex-yelow);
}
 .btn-primary.disabled, .btn-primary:disabled {
     color: #fff;
     background-color: #e59029;
     border-color: #e59029;
     font-weight: bold;
}
 .btn-primary:focus, .btn-primary.focus {
     background-color: #cc7b19;
     border-color: #cc7b19;
     font-weight: bold;
}
 .btn-danger {
     color: hsla(0,0%,100%,.75);
     background-color: #b32;
     border-color: #b32;
     font-weight: bold;
}
 .btn-danger:hover {
     color: white;
     background-color: #b32;
     border-color: #b32;
}
 .brand-link {
     background-color: var(--nav-color)!important;
}
 .hover-popover-content {
     max-width: 32rem;
     text-align: center;
     background: var(--nav-color);
}
 .progress-bar {
     background-color: var(--plex-yelow);
}
 .modal-header, .modal-body, .modal-footer {
     background-color: var(--body-color);
}
 .btn-secondary.disabled, .btn-secondary:disabled {
     background-color: var(--card-color);
     border-color: var(--card-color);
     border-left: none!important;
     border-right: none!important;
}
 #queue-viewer .current {
     background-color: var(--card-color);
}
 .tab-content .card-popovers .btn {
     padding-left: .4rem;
     padding-right: .4rem;
}
/* .gallery-tabs, .scene-tabs, .scene-player-container {
     background-color: var(--nav-color);
}
 */
 .react-select__menu-portal {
     z-index: 2;
}
 .video-js .vjs-play-progress {
     background-color: #e5a00d;
}
/* Ruban diagonal pour la bannière First DP */
.vsc-tag-banner--first-dp {
  position: absolute;
  top: 14px;
  right: -50px;           
  width: 200px;           /* largeur que tu avais */
  text-align: center;
  background: linear-gradient(135deg, #FFD700, #FFC700, #FFB700); /* dégradé doré */
  color: white;
  font-weight: bold;
  transform: rotate(45deg); /* rotation que tu avais */
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  z-index: 10;
  padding: 4px 0;
  border-radius: 2px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  overflow: hidden;       /* nécessaire pour la brillance */
}

/* Brillance animée */
.vsc-tag-banner--first-dp::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  transform: skewX(-30deg);
  animation: shine 2s infinite;
}

@keyframes shine {
  0% {
    left: -50%;
  }
  100% {
    left: 100%;
  }
}

}
/* S'assurer que la vignette de scène peut contenir des éléments absolus */
.scene-card {
  position: relative;
  overflow: hidden;
}
/* Cibler uniquement la bannière Rating: 5 */
.rating-banner.rating-5 {
  color: transparent;       /* cache le texte */
  background-color: #d63333; /* conserve le fond rouge */
  position: absolute;
  top: 14px;                /* distance du haut */
  left: -50px;              /* départ hors de la vignette pour diagonale */
  width: 200px;             /* même largeur que First DP */
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  transform: rotate(-36deg); /* rotation diagonale vers le coin supérieur gauche */
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  z-index: 10;
  padding: 4px 0;
  border-radius: 2px;
  overflow: hidden;
}

/* Ajouter 5 étoiles clignotantes centrées sur le ruban */
.rating-banner.rating-5::after {
  content: '★★★★★';
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  animation: blink 2s infinite alternate;
}

@keyframes blink {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}
/* Forcer le texte blanc sur le ruban et tous ses enfants */
.vsc-tag-banner--first-IR,
.vsc-tag-banner--first-IR * {
  color: #fff !important; /* texte blanc */
  text-shadow: 1px 1px 3px rgba(255,255,255,0.8) !important; /* brillance luxe */
}

/* Ruban diagonal noir mat */
.vsc-tag-banner--first-IR {
  position: absolute;
  top: 14px;
  right: -50px;
  width: 200px;
  text-align: center;

  background: #111; /* noir mat */
  font-weight: 700;
  transform: rotate(45deg);

  box-shadow: 0 2px 4px rgba(0,0,0,0.4);

  z-index: 10;
  padding: 4px 0;
  border-radius: 2px;

  overflow: hidden;

  /* Forcer texte blanc même si gradient */
  color: #fff !important;
  text-shadow: 1px 1px 3px rgba(255,255,255,0.8) !important;
  -webkit-background-clip: unset !important; /* désactive gradient text */
}

/* Reflet très discret sur le ruban */
.vsc-tag-banner--first-IR::after {
  content: '';
  position: absolute;
  top: 0;
  left: -70%;
  width: 40%;
  height: 100%;
  background: rgba(255, 255, 255, 0.08); /* reflet très subtil */
  transform: skewX(-30deg);
  animation: shine 3s infinite linear;
  opacity: 0.4;
}

/* Animation shine */
@keyframes shine {
  0% { left: -70%; }
  100% { left: 130%; }
}