/* ============================================================
   Custom theme for Stash (trove.koalaitytime.dev)
   Paste this into: Settings → Interface → Custom CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

:root {
  --accent: #06457F;
}

/* --- Background: linear gradient (pattern adapted from reference
   ElegantFin/Midnight Matrix theme's --backgroundGradient:
   linear-gradient(0deg, darkerPoint 35%, lighterPoint)) --- */
html, body {
  background-color: #262B40; /* fallback */
  background-image: linear-gradient(0deg, #262B40 35%, #2C444C);
  background-attachment: fixed;
  background-size: cover;
}

#root,
.main.container-fluid {
  background-color: transparent !important;
}

/* --- Font family, everywhere --- */
body,
.main,
nav.top-nav {
  font-family: 'Ubuntu', sans-serif;
}

/* --- Main text color --- */
body,
.main,
.card,
.card-section-title,
.TruncatedText,
.scene-card__details,
.scene-card__date,
.gallery-card__details,
.gallery-card__date {
  color: #A8C4EC;
}

/* --- Base text size (main page) --- */
body,
.main,
.TruncatedText,
.scene-card__details,
.scene-card__date,
.gallery-card__details,
.gallery-card__date {
  font-size: 11px;
}

/* --- Filename text below each preview: 13px, centered --- */
.card-section-title,
.card-section-title .TruncatedText {
  font-size: 13px;
  justify-content: center;
  text-align: center;
}

/* --- Tighten the gap between the preview thumbnail and the filename --- */
.scene-card-preview,
.gallery-card-cover {
  margin-bottom: 0 !important;
}

.card-section {
  padding-top: 2px !important;
}

.card-section-title {
  margin-bottom: 2px !important;
}

/* --- Top nav bar --- */
nav.top-nav.bg-dark,
nav.top-nav .bg-dark {
  background-color: #06457F !important;
}

nav.top-nav .nav-link a,
nav.top-nav .nav-link {
  color: #A8C4EC;
  font-size: 13px;
}

/* --- Accent color (buttons, active states, links) --- */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
  background-color: #04365E !important;
  border-color: #04365E !important;
  color: #A8C4EC !important;
}

nav.top-nav .nav-link.active,
nav.top-nav .nav-link a.active {
  background-color: #06457F !important;
}

a,
a:hover {
  color: #06457F;
}

/* --- Cards: subtle accent border to tie theme together --- */
.card {
  border-color: #06457F !important;
  background-color: #06457F !important;
}

/* --- Preview cards specifically: transparent background so the page's
   radial gradient shows through the gap between the card's rounded
   corner and the (smaller-radius) preview thumbnail inside it --- */
.scene-card,
.gallery-card {
  background-color: transparent !important;
}

/* --- Video preview thumbnails: rounded corners (radius scale from
   reference ElegantFin/Midnight Matrix theme's --largeRadius: 1em) --- */
.scene-card-preview,
.scene-card-preview-image,
.scene-card-preview-video,
.gallery-card-cover,
.gallery-card-image {
  border-radius: 16px;
  overflow: hidden;
}

/* --- Box below the video showing its name/title --- */
.card-section {
  background-color: transparent;
}

/* --- Scrubber bar under video previews (on hover) --- */
.progress-bar,
.progress-indicator {
  background-color: #06457F !important;
}

/* --- Sidebar (left filter panel) --- */
.sidebar,
.sidebar-footer {
  background-color: #06457F !important;
}

/* --- Search / filter toolbar + its secondary row (grid/list toggle,
   tag toggle, zoom slider) on scenes/images/galleries/etc.: transparent
   so the page gradient shows through --- */
.filtered-list-toolbar {
  background-color: transparent !important;
}

.clearable-text-field.form-control,
.dropdown-toggle.btn-secondary,
.btn-secondary,
.btn.active.btn-secondary {
  background-color: #06457F !important;
  border-color: #06457F !important;
}

/* --- Preview card hover: purple border + top-to-bottom glow sweep
   (adapted from reference ElegantFin/Midnight Matrix theme's
   .card-hoverable border-glow + .cardOverlayContainer:after sweep) --- */
.scene-card,
.gallery-card {
  position: relative;
  border: 2px solid transparent !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.scene-card:hover,
.gallery-card:hover {
  border-color: #0474C4 !important;
  box-shadow: 0 0 16px rgba(4, 116, 196, 0.35), 0 0 40px rgba(4, 116, 196, 0.15);
}

/* glow band sweeps from top to bottom once per hover-in, via transition
   (not an infinite keyframe loop) — mirrors the reference technique */
.scene-card::after,
.gallery-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, transparent, rgba(4, 116, 196, 0.35) 45%, rgba(4, 116, 196, 0.35) 55%, transparent);
  pointer-events: none;
  transform: translateY(-100%);
  transition: transform 0.65s;
  z-index: 5;
}

.scene-card:hover::after,
.gallery-card:hover::after {
  transform: translateY(100%);
}

/* --- Video player: rounded corners matching the preview cards --- */
.video-js {
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* --- Video player: seek bar --- */
.vjs-progress-holder,
.vjs-load-progress {
  background-color: #A8C4EC !important;
}

.vjs-play-progress {
  background-color: #5379AE !important;
}

/* --- Video player: control bar buttons (play/pause, skip, prev/next,
   mute, AD/CC/audio/settings menus, etc.) — dark purple circle, lighter
   purple icon. Scoped to DIRECT children only: menu-style buttons (AD,
   CC, audio, settings, playback rate) render as a wrapper <div> with a
   near-identical nested <button> inside it, both matching ".vjs-button" —
   styling both created two overlapping, differently-sized circles.
   The auto-start button is excluded entirely — it's a custom toggle-
   switch widget (a sliding thumb + track), not a plain icon button, and
   forcing it into a fixed circle broke its own slider layout. --- */
.vjs-control-bar > .vjs-button:not(.vjs-autostart-button),
.vjs-control-bar > .vjs-menu-button-popup,
.vjs-control-bar .vjs-volume-panel > .vjs-mute-control {
  background-color: #262B40 !important;
  border-radius: 50% !important;
  color: #A8C4EC !important;
  width: 36px !important;
  height: 36px !important;
  margin: 4px 3px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* the nested inner button (menu-popup toggle): fill the parent circle
   instead of drawing its own — no separate background/size of its own */
.vjs-control-bar > .vjs-menu-button-popup > button.vjs-button {
  background-color: transparent !important;
  border-radius: 50% !important;
  color: inherit !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* --- Auto-start toggle widget: recolor to the theme's purple palette
   and enlarge to match the other 36px controls. Structure: a shared
   ::after track (pill shape, rotated 90deg) behind a ::before thumb
   whose color/position changes with state (.vjs-icon-play-circle =
   enabled/"on", .vjs-icon-cancel = disabled/"off"). --- */
.vjs-control-bar > .vjs-autostart-button {
  width: 70px !important;
  height: 44px !important;
}

/* track — shared by both states: medium-light purple (was near-white) */
.video-js .vjs-autostart-button.vjs-icon-play-circle::after,
.video-js .vjs-autostart-button.vjs-icon-cancel::after {
  background-color: #5379AE !important;
  opacity: 1 !important;
  width: 20px !important;
  height: 56px !important;
}

/* thumb — "on" (auto-start enabled): dark purple, matching the other
   playback buttons' circle color */
.video-js .vjs-autostart-button.vjs-icon-play-circle::before {
  background-color: #262B40 !important;
  color: #A8C4EC !important;
  font-size: 20px !important;
  padding: 8px !important;
}

/* thumb — "off" (auto-start disabled): light purple */
.video-js .vjs-autostart-button.vjs-icon-cancel::before {
  background-color: #A8C4EC !important;
  color: #262B40 !important;
  font-size: 20px !important;
  padding: 8px !important;
}

/* icon glyph: force it to fit and center cleanly inside the circle.
   Video.js's own base CSS sets `.vjs-icon-placeholder:before { font-size:
   1.8em }`, scaling the glyph relative to the span's font-size — this
   was causing icons to overflow their 36px circles. Auto-start button
   excluded — see note above. */
.vjs-control-bar .vjs-button:not(.vjs-autostart-button) .vjs-icon-placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
}

.vjs-control-bar .vjs-button:not(.vjs-autostart-button) .vjs-icon-placeholder:before,
.vjs-control-bar .vjs-button:not(.vjs-autostart-button) .vjs-icon-placeholder::before {
  font-size: 18px !important;
  line-height: 36px !important;
}

/* previous/next "skip" buttons render their glyph via a ::before directly
   on the BUTTON itself (a separate plugin mechanism), not through the
   inner .vjs-icon-placeholder span like every other button — a plain
   width/height override lost a cascade tie-break for `width` specifically
   on this selector, so absolute-position + inset:0 sidesteps that by not
   depending on width/height resolving correctly at all. */
.vjs-control-bar .vjs-icon-previous-item,
.vjs-control-bar .vjs-icon-next-item {
  position: relative !important;
}

.vjs-control-bar .vjs-icon-previous-item::before,
.vjs-control-bar .vjs-icon-next-item::before {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
}

/* play button: same 36px size as every other control (was 44px, which
   now stands out now that the rest are fixed and uniform) */

/* playback-rate ("1x") text sits in a sibling element positioned exactly
   over the button; the button's now-opaque circle was painting on top
   of it and hiding it, so bring the text forward */
.vjs-playback-rate-value {
  z-index: 1 !important;
  pointer-events: none;
  font-size: 14px !important;
  line-height: 36px !important;
}

/* --- Video player: large centered play button (before playback starts) --- */
.vjs-big-play-button {
  background-color: #262B40 !important;
  border-color: #262B40 !important;
  border-radius: 50% !important;
  color: #A8C4EC !important;
  width: 80px !important;
  height: 80px !important;
  line-height: 80px !important;
}

.vjs-big-play-button .vjs-icon-placeholder:before,
.vjs-big-play-button .vjs-icon-placeholder::before {
  font-size: 36px !important;
  line-height: 80px !important;
}

/* --- Left-side scene detail panel: Details / Similar / Queue / Markers /
   Filters / File Info / History / Edit tabs --- */
.scene-tabs .nav-tabs .nav-link {
  color: #A8C4EC;
}

.scene-tabs .nav-tabs .nav-link.active {
  background-color: #06457F !important;
  color: #A8C4EC !important;
  border-color: #06457F !important;
}

.scene-tabs .queue-controls {
  background-color: #06457F !important;
}

.scene-tabs .badge-secondary {
  background-color: #06457F !important;
  color: #A8C4EC !important;
}

/* --- Scene/video divider (collapses the left tab panel): break out of
   the default full-row stretch so JS can size/position it to match the
   video player's bounds instead — see Custom JavaScript. --- */
.scene-divider button {
  align-self: flex-start !important;
  border-radius: 6px !important;
  width: 12px !important;
}

/* small gap between the scene-tabs panel's content and the divider */
.scene-tabs {
  padding-right: 12px !important;
}

/* --- Rating stars: transparent background instead of the generic
   .btn-secondary dark purple fill --- */
.rating-stars .btn {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* --- Scrubber show/hide toggle button (added via Custom JavaScript) --- */
.stash-scrubber-hidden {
  display: none !important;
}

.stash-scrubber-toggle-btn {
  display: block;
  margin: 6px auto;
  padding: 4px 14px;
  background-color: #262B40;
  color: #A8C4EC;
  border: none;
  border-radius: 14px;
  font-size: 12px;
  font-family: 'Ubuntu', sans-serif;
  cursor: pointer;
}

.stash-scrubber-toggle-btn:hover {
  background-color: #0474C4;
}

/* --- Top nav bar: icons only, larger, with spacing --- */
nav.top-nav .navbar-nav {
  gap: 4px;
}

nav.top-nav .btn-primary span {
  display: none;
}

nav.top-nav .nav-menu-icon {
  font-size: 22px !important;
}

/* --- Settings page: border around the left-hand menu --- */
.nav-pills {
  border: 1px solid #06457F;
  border-radius: 8px;
  padding: 6px;
}

/* --- Settings page: hover highlight on left-hand menu items --- */
.nav-pills .nav-link:hover {
  background-color: #5379AE !important;
  color: #A8C4EC !important;
}

.nav-pills .nav-link.active {
  background-color: #06457F !important;
  color: #A8C4EC !important;
}

/* --- Settings page: switch toggles — darker blue when enabled,
   lighter blue when disabled --- */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #06457F !important;
  border-color: #06457F !important;
}

.custom-switch .custom-control-label::before {
  background-color: #5379AE !important;
  border-color: #5379AE !important;
}

.custom-switch .custom-control-label::after {
  background-color: #A8C4EC !important;
}

/* --- Buttons throughout the site: oval/pill shape, darker blue fill
   with a matching (same-color) border --- */
.btn-primary,
.btn-secondary {
  background-color: #04365E !important;
  border-color: #04365E !important;
  border-radius: 999px !important;
}