/* ═══════════════════════════════════════════════════════════════
   MůjFlix — GLASS THEME
   Port JellyfinGlassTheme → celá aplikace MůjFlix.
   Přidat jako POSLEDNÍ stylesheet v index.html:
   <link rel="stylesheet" href="styles-glass.css" />
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ── TOKENY 1:1 z JellyfinGlassTheme ── */
:root {
  --jg-bg:         #000000;
  --jg-surface:    #0a0a0a;
  --jg-dark-a:     rgba(17,24,39,0.85);
  --jg-mid-a:      rgba(29,38,53,0.85);
  --jg-border:     hsl(214,13%,32%);
  --jg-border-d:   hsl(214,13%,22%);
  --jg-border-l:   hsla(0,0%,100%,0.2);
  --jg-sel:        rgb(55,65,81);
  --jg-sel-a:      rgba(55,65,81,0.5);
  --jg-active-a:   rgba(255,255,255,0.1);
  --jg-active:     #e0e0e0;
  --jg-text:       #dedede;
  --jg-dim:        #777777;
  --jg-shadow:     0 20px 50px rgba(0,0,0,0.9);
  --jg-card-grad:  linear-gradient(0deg, rgb(0 0 0 / 90%), 40%, transparent);
  --jg-hover-v:    linear-gradient(0deg, transparent, rgb(255 255 255 / 6%) 45%, rgb(255 255 255 / 6%) 55%, transparent);
  --jg-blur-xs:    blur(2px);
  --jg-blur-sm:    blur(5px);
  --jg-blur-md:    blur(10px);
  --jg-blur-lg:    blur(20px);
  --jg-r-xl:       1.25em;
  --jg-r-lg:       14px;
  --jg-r-sm:       8px;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL FONT + BODY
═══════════════════════════════════════════════════════════════ */
html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif !important;
  font-optical-sizing: auto !important;
  font-weight: 425 !important;
  -webkit-tap-highlight-color: transparent !important;
}

body,
body * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  letter-spacing: -0.015em !important;
}

body {
  background: var(--jg-bg) !important;
  color: var(--jg-text) !important;
}

/* ── Scrollbar global ── */
* {
  scrollbar-width: thin !important;
  scrollbar-color: var(--jg-border-d) transparent !important;
}
::-webkit-scrollbar { width: 3px !important; height: 3px !important; }
::-webkit-scrollbar-thumb { background: var(--jg-border-d) !important; border-radius: 3px !important; }
::-webkit-scrollbar-track { background: transparent !important; }

/* ── Selection ── */
::selection { background: var(--jg-active-a) !important; }

/* ═══════════════════════════════════════════════════════════════
   PROFIL GATE — login page portovany
═══════════════════════════════════════════════════════════════ */
#mfProfileGate {
  background: var(--jg-bg) !important;
}

.pg-container {
  background: rgba(30,40,54,0.7) !important;
  border-radius: var(--jg-r-xl) !important;
  border: 0px solid var(--jg-border) !important;
  backdrop-filter: var(--jg-blur-sm) !important;
  -webkit-backdrop-filter: var(--jg-blur-sm) !important;
  box-shadow: var(--jg-shadow) !important;
  padding: 2em !important;
}

.pg-title {
  font-weight: 800 !important;
  color: white !important;
  letter-spacing: -0.5px !important;
}

.pg-avatar {
  background: var(--jg-surface) !important;
  border: 0px solid var(--jg-border-d) !important;
  border-radius: var(--jg-r-lg) !important;
  transition: transform 125ms ease, box-shadow 0.2s ease !important;
}

.pg-profile-item:hover .pg-avatar {
  transform: scale(1.05) !important;
  box-shadow: var(--jg-shadow) !important;
}

.pg-name {
  color: var(--jg-text) !important;
  font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════
   HLAVNÍ STRÁNKA — BACKGROUND
═══════════════════════════════════════════════════════════════ */
.app-bg,
#appBg,
.background-container {
  background: var(--jg-bg) !important;
}

/* Hero backdrop — backgroundContainer.withBackdrop portovany */
.hero-backdrop,
.home-backdrop,
#heroBg,
.backdrop-img {
  opacity: 0.9 !important;
  background: linear-gradient(0deg, var(--jg-bg), 45%, rgba(17,24,39,0.25)) !important;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER / TOP BAR — skinHeader-blurred portovany
═══════════════════════════════════════════════════════════════ */
.app-header,
.main-header,
#mfHeader,
.top-bar {
  background: linear-gradient(180deg, rgba(30,40,54,0.95) 30%, 55%, transparent 90%) !important;
  backdrop-filter: var(--jg-blur-md) !important;
  -webkit-backdrop-filter: var(--jg-blur-md) !important;
  border-bottom: 0px solid var(--jg-border-d) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PROFIL BADGE (vpravo nahoře)
═══════════════════════════════════════════════════════════════ */
#mfProfileBadge,
.profile-badge {
  background: var(--jg-sel-a) !important;
  border: 0px solid var(--jg-border) !important;
  border-radius: var(--jg-r-lg) !important;
  backdrop-filter: var(--jg-blur-sm) !important;
  color: var(--jg-text) !important;
  box-shadow: var(--jg-shadow) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DOCK — appfooter portovany
═══════════════════════════════════════════════════════════════ */
#mfDock,
.dock,
.bottom-nav {
  background: rgba(10,10,10,0.92) !important;
  border-top: 0px solid var(--jg-border-d) !important;
  backdrop-filter: var(--jg-blur-lg) !important;
  -webkit-backdrop-filter: var(--jg-blur-lg) !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.6) !important;
}

.dock-btn {
  color: var(--jg-dim) !important;
  border-radius: var(--jg-r-lg) !important;
  transition: all 0.125s !important;
}

.dock-btn:hover {
  background: var(--jg-active-a) !important;
  color: var(--jg-text) !important;
}

.dock-btn.active {
  color: var(--jg-active) !important;
}

.dock-btn.active .dock-label {
  color: var(--jg-active) !important;
}

.dock-label {
  color: var(--jg-dim) !important;
  font-size: 0.6rem !important;
  font-weight: 500 !important;
}

.dock-sep {
  background: var(--jg-border-d) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SEARCH BAR
═══════════════════════════════════════════════════════════════ */
.search-bar,
.search-input,
.uni-input,
input[type="search"],
input[type="text"] {
  background: rgba(0,0,0,0.5) !important;
  border: 0px solid var(--jg-border-l) !important;
  border-radius: 4em !important;
  color: white !important;
  font-family: inherit !important;
  backdrop-filter: blur(10px) !important;
  transition: border-color 0.2s !important;
}

.search-input:focus,
.uni-input:focus,
input[type="search"]:focus,
input[type="text"]:focus {
  border-color: var(--jg-dim) !important;
  outline: none !important;
}

.search-input::placeholder,
.uni-input::placeholder {
  color: var(--jg-dim) !important;
}

/* ═══════════════════════════════════════════════════════════════
   KARTY — .cardScalable portovany 1:1
═══════════════════════════════════════════════════════════════ */

/* Série karty, film karty atd. */
.series-card,
.movie-card,
.content-card,
.ep-card,
[class*="-card"]:not([class*="disco-card"]):not(.disco-card *):not(#dr-popup *) {
  background: var(--jg-surface) !important;
  border-radius: var(--jg-r-lg) !important;
  border: 0px solid var(--jg-border-d) !important;
  overflow: hidden !important;
  box-shadow: 0 0 0.25em rgba(0,0,0,0.4) !important;
  transition: transform 125ms ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

[class*="-card"]:not([class*="disco-card"]):not(.disco-card *):not(#dr-popup *):hover {
  transform: scale(1.02) !important;
  border-color: white !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.9) !important;
  filter: brightness(1.1) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SERIES MODAL — detailPage portovany
═══════════════════════════════════════════════════════════════ */
#seriesModal,
.series-modal,
.modal-overlay {
  background: var(--jg-bg) !important;
}

/* Modal hero — itemBackdrop portovany */
#seriesModal .modal-hero,
.modal-hero {
  background: var(--jg-bg) !important;
}

#seriesModal .modal-hero-img,
.modal-hero-img {
  filter: saturate(1.1) !important;
  transition: transform 0.375s ease !important;
}

/* Modal hero overlay — --headerColorGradient portovany */
#seriesModal .modal-hero-overlay,
.modal-hero-overlay {
  background: linear-gradient(180deg,
    rgba(30,40,54,0.95) 30%,
    transparent 90%) !important;
}

/* Modal hero obsah — detail page primárni container */
#seriesModal .modal-hero-content,
.modal-hero-content {
  background: transparent !important;
}

#seriesModal .modal-hero-content h2,
#seriesModal .modal-title,
.modal-title {
  font-weight: 200 !important; /* nameContainer h1 font-weight:200 */
  color: white !important;
  letter-spacing: -1px !important;
}

/* Modal body */
#modalBody,
.modal-body,
#seriesModal .modal-body {
  background: var(--jg-bg) !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--jg-border-d) transparent !important;
}

/* Meta row — itemMiscInfo portovany */
.modal-meta-row,
.meta-row {
  color: var(--jg-dim) !important;
}

/* Tlačítka v modalu — detailButton portovany */
.btn-continue,
.btn-shuffle,
.modal-btn,
.btn-primary {
  background: var(--jg-active) !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 3em !important;
  font-weight: 700 !important;
  box-shadow: 0 0 30px rgba(255,255,255,0.1) !important;
  transition: all 0.125s !important;
  letter-spacing: 0.5px !important;
}

.btn-continue:hover,
.btn-shuffle:hover,
.modal-btn:hover,
.btn-primary:hover {
  background: white !important;
  transform: scale(1.02) !important;
}

/* Secondary btns */
.btn-secondary,
.btn-outline {
  color: var(--jg-text) !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 50% !important;
  transition: all 0.125s !important;
}

.btn-secondary:hover,
.btn-outline:hover {
  background: white !important;
  color: black !important;
}

/* Episode karty */
.ep-card,
.episode-card {
  background: var(--jg-sel-a) !important;
  border: 0px solid var(--jg-border-d) !important;
  border-radius: var(--jg-r-lg) !important;
  transition: all 0.125s !important;
}

.ep-card:hover,
.episode-card:hover {
  background: var(--jg-active-a) !important;
  border-color: var(--jg-border) !important;
}

/* Progress bar — itemProgressBar portovany */
.ep-progress,
.progress-bar,
[class*="progress"] {
  height: 3px !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: var(--jg-r-lg) !important;
  overflow: hidden !important;
}

.ep-progress-inner,
.progress-bar-fill,
[class*="progress-fill"] {
  background: var(--jg-active) !important;
  border-radius: 0 var(--jg-r-lg) var(--jg-r-lg) 0 !important;
}

/* Season pills — emby-tab-button portovany */
.modal-sc-pills .nav-btn,
.season-pill,
.tab-btn {
  background: var(--jg-dark-a) !important;
  border-radius: var(--jg-r-lg) !important;
  color: var(--jg-text) !important;
  border: none !important;
  font-weight: 400 !important;
  transition: all 0.125s !important;
  padding: 0 1.25em !important;
  height: 2.5em !important;
}

.modal-sc-pills .nav-btn.active,
.season-pill.active,
.tab-btn.active {
  background: var(--jg-active) !important;
  color: black !important;
  font-weight: 600 !important;
}

.modal-sc-pills .nav-btn:hover:not(.active),
.season-pill:hover:not(.active),
.tab-btn:hover:not(.active) {
  background: rgba(255,255,255,0.12) !important;
  color: white !important;
}

/* ═══════════════════════════════════════════════════════════════
   CINEMA MODAL
═══════════════════════════════════════════════════════════════ */
#cinemaModal,
.cinema-modal {
  background: var(--jg-bg) !important;
}

#cinemaTopBar,
.cinema-top-bar {
  background: linear-gradient(180deg, rgba(30,40,54,0.95) 30%, transparent 90%) !important;
  backdrop-filter: var(--jg-blur-md) !important;
  -webkit-backdrop-filter: var(--jg-blur-md) !important;
  border-bottom: none !important;
}

/* Cinema source buttons */
.cinema-source-btn,
[class*="source-btn"] {
  background: var(--jg-sel-a) !important;
  border: 0px solid var(--jg-border) !important;
  border-radius: var(--jg-r-sm) !important;
  color: var(--jg-text) !important;
  transition: all 0.125s !important;
  backdrop-filter: var(--jg-blur-sm) !important;
}

.cinema-source-btn:hover,
[class*="source-btn"]:hover {
  background: var(--jg-active-a) !important;
  border-color: var(--jg-border) !important;
}

.cinema-source-btn.active,
[class*="source-btn"].active {
  background: var(--jg-active) !important;
  color: black !important;
  border-color: transparent !important;
}

/* Glass panel — dialog portovany */
.glass-panel,
.glass-card,
[class*="glass"] {
  background: rgba(10,10,10,0.92) !important;
  border: 0px solid var(--jg-border) !important;
  border-radius: var(--jg-r-lg) !important;
  backdrop-filter: var(--jg-blur-sm) !important;
  -webkit-backdrop-filter: var(--jg-blur-sm) !important;
  box-shadow: var(--jg-shadow) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TOAST / NOTIFICATIONS — toast portovany
═══════════════════════════════════════════════════════════════ */
.toast,
#toast,
.notification,
[class*="toast"] {
  background: rgba(10,10,10,0.92) !important;
  border: 0px solid var(--jg-border) !important;
  border-radius: var(--jg-r-sm) !important;
  color: var(--jg-text) !important;
  backdrop-filter: var(--jg-blur-sm) !important;
  box-shadow: var(--jg-shadow) !important;
  font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════
   WATCHLIST / RATING OVERLAY — dialog portovany
═══════════════════════════════════════════════════════════════ */
#watchlistOverlay,
#ratingOverlay,
.wl-modal,
.overlay-modal {
  background: var(--jg-bg) !important;
}

.wl-content,
.rating-content,
.overlay-content {
  background: rgba(30,40,54,0.85) !important;
  border: 0px solid var(--jg-border) !important;
  border-radius: var(--jg-r-lg) !important;
  backdrop-filter: var(--jg-blur-sm) !important;
  box-shadow: var(--jg-shadow) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SETTINGS / ADMIN — dialog portovany
═══════════════════════════════════════════════════════════════ */
.admin-body,
.settings-body,
.customize-body {
  background: var(--jg-bg) !important;
}

.settings-card,
.admin-card,
.settings-section {
  background: var(--jg-sel-a) !important;
  border: 0px solid var(--jg-border-d) !important;
  border-radius: var(--jg-r-lg) !important;
  backdrop-filter: var(--jg-blur-sm) !important;
}

/* ── Select / Input fields — emby-select, emby-input portovany ── */
select,
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
textarea {
  background: rgba(0,0,0,0.5) !important;
  border: 0px solid var(--jg-border-l) !important;
  border-radius: var(--jg-r-sm) !important;
  color: white !important;
  font-family: inherit !important;
  backdrop-filter: blur(10px) !important;
  padding: 0.5em !important;
  transition: border-color 0.2s !important;
}
select:focus,
input:focus,
textarea:focus {
  border-color: var(--jg-dim) !important;
  outline: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   LIST ITEMS — listItem portovany
═══════════════════════════════════════════════════════════════ */
.list-item,
.ep-list-item,
[class*="list-item"] {
  border-radius: 0.7em !important;
  transition: background 0.125s !important;
  color: var(--jg-text) !important;
}

.list-item:hover,
[class*="list-item"]:hover {
  background: rgba(255,255,255,0.125) !important;
  backdrop-filter: var(--jg-blur-lg) !important;
}

/* ═══════════════════════════════════════════════════════════════
   GENRE / FILTER CHIPS — emby-tab-button portovany
═══════════════════════════════════════════════════════════════ */
.genre-chip,
.filter-chip,
.category-chip,
[class*="-chip"]:not(#dr-popup *) {
  background: var(--jg-dark-a) !important;
  border-radius: var(--jg-r-lg) !important;
  color: var(--jg-text) !important;
  border: none !important;
  font-weight: 400 !important;
  transition: all 0.125s !important;
  padding: 0 1.25em !important;
  height: 2.5em !important;
}

.genre-chip.active,
.filter-chip.active,
[class*="-chip"].active {
  background: var(--jg-active) !important;
  color: black !important;
  font-weight: 600 !important;
}

.genre-chip:hover:not(.active),
[class*="-chip"]:hover:not(.active) {
  background: rgba(255,255,255,0.12) !important;
  color: white !important;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS GLOBALNE — emby-button portovany
═══════════════════════════════════════════════════════════════ */
button:not([class*="dock"]):not([class*="disco"]):not(#dr-popup *):not(.pg-profile-item):not(.ai-bubble-close) {
  transition: all 0.125s !important;
}

/* ── Icon buttons ── */
.icon-btn,
.paper-btn,
[class*="icon-btn"] {
  color: var(--jg-text) !important;
  background: transparent !important;
  border-radius: 50% !important;
  transition: all 0.125s !important;
}

.icon-btn:hover,
[class*="icon-btn"]:hover {
  background: rgba(255,255,255,0.05) !important;
  color: white !important;
}

/* ═══════════════════════════════════════════════════════════════
   STARRATING / HODNOCENÍ
═══════════════════════════════════════════════════════════════ */
.star-icon,
.star,
[class*="star"] {
  /* starIcon — gradient text */
  background: linear-gradient(to right, #90cea1, #01b4e4) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════════════════════════ */
#modalBody::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.customize-body::-webkit-scrollbar,
.admin-body::-webkit-scrollbar {
  width: 3px !important;
}
#modalBody::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
  background: var(--jg-border-d) !important;
  border-radius: 3px !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION TITLES — sectionTitle portovany
═══════════════════════════════════════════════════════════════ */
.section-title,
.row-title,
h2.title,
[class*="section-title"] {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--jg-text) !important;
  letter-spacing: -0.3px !important;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE FIXES
═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* blurLargest: blur(12px) na mobile 1:1 */
  .universe-overlay .disco-header,
  #mfDock,
  .dock {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }
}