/* ============================================================
   tailwind-supplement.css
   Hand-written utility classes that are genuinely MISSING from
   the pre-compiled styles/main.css (a purged Tailwind build with
   no source config in-repo, so it can't simply be recompiled).
   New markup added the emerald palette + a handful of plain
   utilities that were never generated, so they rendered unstyled
   (e.g. the emerald "save"/savings text showed default black).
   Load this AFTER main.css. Keep in sync when new classes appear.

   2026-06-10: pricing.html and dashboard.html no longer use this
   file — they load styles/tailwind-utilities.css, a REAL Tailwind
   build generated from their markup (see /var/www/titanray/
   tailwind/README.md). This file now serves request.html ONLY.

   NOTE: arbitrary classes like bg-[linear-gradient(...)] and
   drop-shadow-[...rgba...] are ALREADY in main.css (escaped with
   the \2c comma form) — do NOT re-add them here or you override
   Tailwind's --tw-drop-shadow filter var-chain with a flat filter.
   ============================================================ */

/* --- emerald palette (savings / discount text) --- */
.text-emerald-200 { color:#a7f3d0; }
.text-emerald-300 { color:#6ee7b7; }
.text-emerald-400 { color:#34d399; }
.text-emerald-500 { color:#10b981; }
.text-emerald-300\/80 { color:rgb(110 231 183 / 0.8); }
.text-emerald-400\/80 { color:rgb(52 211 153 / 0.8); }

/* --- misc utilities missing from the purged build --- */
.gap-1\.5 { gap:0.375rem; }
.cursor-not-allowed { cursor:not-allowed; }
.pointer-events-none { pointer-events:none; }
.pointer-events-auto { pointer-events:auto; }
.pt-18 { padding-top:4.5rem; }
.z-\[9999\] { z-index:9999; }

/* --- responsive padding (curved footer section) --- */
@media (min-width:640px) { .sm\:pt-14 { padding-top:3.5rem; } }
@media (min-width:768px) { .md\:pt-16 { padding-top:4rem; } }

/* --- 2026-06-10 full audit: utilities missing from the purged build ---
   Found by auditing every class attribute on pricing/dashboard/request
   against their loaded stylesheets. The purged build predates much of the
   dashboard + request markup, so common utilities are absent. Visible
   casualties: text-zinc-500 rendered BLACK (payment-history count label;
   JS class swaps zinc→emerald flashed black→green), spinners didn't spin,
   the mobile hamburger never formed an X. */

/* spacing */
.mb-1 { margin-bottom:0.25rem; }
.mb-2 { margin-bottom:0.5rem; }
.mb-4 { margin-bottom:1rem; }
.mb-6 { margin-bottom:1.5rem; }
.my-6 { margin-top:1.5rem; margin-bottom:1.5rem; }
.p-4 { padding:1rem; }
.pt-1 { padding-top:0.25rem; }
.pt-6 { padding-top:1.5rem; }
.pb-0 { padding-bottom:0; }
.pl-1 { padding-left:0.25rem; }
.pr-1 { padding-right:0.25rem; }
.py-12 { padding-top:3rem; padding-bottom:3rem; }
.gap-3 { gap:0.75rem; }
.gap-y-2 { row-gap:0.5rem; }
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { margin-top:0.625rem; }

/* sizing */
.min-w-0 { min-width:0; }
.w-8 { width:2rem; }
.w-10 { width:2.5rem; }
.h-1\.5 { height:0.375rem; }
.w-\[800px\] { width:800px; }
.max-w-\[1920px\] { max-width:1920px; }

/* flex / layout */
.flex-row { flex-direction:row; }
.ml-auto { margin-left:auto; }
.justify-start { justify-content:flex-start; }
.justify-end { justify-content:flex-end; }
.overflow-y-auto { overflow-y:auto; }
.isolate { isolation:isolate; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.break-all { word-break:break-all; }

/* typography */
.text-2xl { font-size:1.5rem; line-height:2rem; }
.text-\[9px\] { font-size:9px; }
.text-\[10px\] { font-size:10px; }
.leading-tight { line-height:1.25; }
.tracking-\[0\.22em\] { letter-spacing:0.22em; }
.tabular-nums { font-variant-numeric:tabular-nums; }
.underline-offset-4 { text-underline-offset:4px; }
.hover\:underline:hover { text-decoration-line:underline; }

/* text colors */
.text-zinc-500 { color:#71717a; }
.text-amber-100 { color:#fef3c7; }
.text-amber-400 { color:#fbbf24; }
.text-blue-400 { color:#60a5fa; }
.hover\:text-violet-200:hover { color:#ddd6fe; }

/* backgrounds */
.bg-violet-500 { background-color:#8b5cf6; }
.bg-violet-600 { background-color:#7c3aed; }
.bg-zinc-800 { background-color:#27272a; }
.bg-zinc-700\/40 { background-color:rgb(63 63 70 / 0.4); }
.bg-zinc-800\/50 { background-color:rgb(39 39 42 / 0.5); }
.bg-zinc-800\/60 { background-color:rgb(39 39 42 / 0.6); }
.bg-zinc-900\/60 { background-color:rgb(24 24 27 / 0.6); }
.bg-zinc-950\/30 { background-color:rgb(9 9 11 / 0.3); }
.bg-amber-500\/10 { background-color:rgb(245 158 11 / 0.1); }
.bg-\[\#5865F2\]\/15 { background-color:rgb(88 101 242 / 0.15); }
.hover\:bg-violet-500:hover { background-color:#8b5cf6; }
.hover\:bg-violet-500\/5:hover { background-color:rgb(139 92 246 / 0.05); }
.hover\:bg-violet-500\/10:hover { background-color:rgb(139 92 246 / 0.1); }
.hover\:bg-zinc-700\/50:hover { background-color:rgb(63 63 70 / 0.5); }
.hover\:bg-zinc-700\/60:hover { background-color:rgb(63 63 70 / 0.6); }

/* borders */
.rounded { border-radius:0.25rem; }
.border-2 { border-width:2px; }
.border-4 { border-width:4px; }
.border-solid { border-style:solid; }
.border-white { border-color:#fff; }
.border-white\/30 { border-color:rgb(255 255 255 / 0.3); }
.border-violet-500 { border-color:#8b5cf6; }
.border-violet-400\/30 { border-color:rgb(167 139 250 / 0.3); }
.border-red-400\/20 { border-color:rgb(248 113 113 / 0.2); }
.border-amber-500\/20 { border-color:rgb(245 158 11 / 0.2); }
.border-t-white { border-top-color:#fff; }
.border-t-violet-400 { border-top-color:#a78bfa; }
.border-r-transparent { border-right-color:transparent; }

/* effects / states */
.opacity-75 { opacity:0.75; }
.shadow-xl { box-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
.shadow-\[0_0_48px_rgba\(0\2c 0\2c 0\2c 0\.35\)\] { box-shadow:0 0 48px rgba(0,0,0,0.35); }
.shadow-\[0_0_48px_rgba\(0\2c 0\2c 0\2c 0\.45\)\] { box-shadow:0 0 48px rgba(0,0,0,0.45); }
.hover\:opacity-80:hover { opacity:0.8; }
.hover\:scale-105:hover { --tw-scale-x:1.05; --tw-scale-y:1.05; transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.disabled\:cursor-not-allowed:disabled { cursor:not-allowed; }
.disabled\:opacity-30:disabled { opacity:0.3; }
.disabled\:opacity-50:disabled { opacity:0.5; }
.disabled\:opacity-60:disabled { opacity:0.6; }
.disabled\:hover\:bg-zinc-950\/30:disabled:hover { background-color:rgb(9 9 11 / 0.3); }
.disabled\:hover\:text-zinc-300:disabled:hover { color:#d4d4d8; }

/* animation */
.animate-spin { animation:tw-suppl-spin 1s linear infinite; }
@keyframes tw-suppl-spin { to { transform:rotate(360deg); } }

/* mobile hamburger → X (bang-important; rotates compose with the existing
   `transform` var-chain in main.css, so set the variable, not transform) */
.\!rotate-45 { --tw-rotate:45deg !important; }
.\!-rotate-45 { --tw-rotate:-45deg !important; }
.\!top-1 { top:0.25rem !important; }
.\!top-1\.5 { top:0.375rem !important; }
.\!left-1\/2 { left:50% !important; }
.\!w-0 { width:0px !important; }

/* responsive */
@media (min-width:640px) {
  .sm\:gap-2 { gap:0.5rem; }
  .sm\:ml-2 { margin-left:0.5rem; }
  .sm\:ml-4 { margin-left:1rem; }
  .sm\:p-5 { padding:1.25rem; }
  .sm\:p-6 { padding:1.5rem; }
  .sm\:p-8 { padding:2rem; }
  .sm\:pr-7 { padding-right:1.75rem; }
  .sm\:py-10 { padding-top:2.5rem; padding-bottom:2.5rem; }
  .sm\:w-auto { width:auto; }
  .sm\:w-28 { width:7rem; }
}
@media (min-width:768px) {
  .md\:mb-0 { margin-bottom:0; }
  .md\:space-y-10 > :not([hidden]) ~ :not([hidden]) { margin-top:2.5rem; }
}
@media (min-width:1024px) {
  .lg\:h-16 { height:4rem; }
  .lg\:pt-20 { padding-top:5rem; }
}
@media (min-width:1280px) {
  .xl\:h-16 { height:4rem; }
}

/* --- black overlay tints (modal backdrops) ---
   The ENTIRE bg-black/<opacity> family is missing from the purged build, so
   modal backdrops using it rendered fully transparent: dashboard account
   settings / email / username / password / discord-unlink / delete-account,
   and request.html media info. (admin.html is unaffected — it loads the
   Tailwind CDN JIT which generates these at runtime.) */
.bg-black\/60 { background-color:rgb(0 0 0 / 0.6); }
.bg-black\/70 { background-color:rgb(0 0 0 / 0.7); }
.bg-black\/75 { background-color:rgb(0 0 0 / 0.75); }
.bg-black\/80 { background-color:rgb(0 0 0 / 0.8); }
.bg-black\/90 { background-color:rgb(0 0 0 / 0.9); }

/* --- request.html media-info modal reskin (rqm-*) ---
   Mirrors the Jellyfin plugin's request modal: pill chips, gradient CTA
   buttons, round cast avatars, and the seasons/episodes availability
   accordion. Custom classes because the purged Tailwind build cannot grow. */

.rqm-chip {
  padding: 2px 10px;
  border-radius: 9999px;
  background: rgba(9, 9, 11, 0.45);
  border: 1px solid rgba(196, 181, 253, 0.12);
  color: #a1a1aa;
  white-space: nowrap;
}

.rqm-chip-rated {
  border-color: rgba(255, 255, 255, 0.2);
  color: #d4d4d8;
}

.rqm-type-badge {
  padding: 2px 10px;
  border-radius: 9999px;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #c4b5fd;
  white-space: nowrap;
}

.rqm-genre {
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 11px;
  background: rgba(39, 39, 42, 0.6);
  border: 1px solid rgba(196, 181, 253, 0.15);
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
}

/* CTA buttons (all request-button states) */
.rqm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
  text-decoration: none;
}

.rqm-btn:hover:not(:disabled) {
  transform: scale(1.01);
}

.rqm-btn-primary {
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 50%, #a78bfa 100%);
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.35);
}

.rqm-btn-watch {
  background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
}

.rqm-btn-done {
  background: rgba(63, 63, 70, 0.5);
  color: rgba(255, 255, 255, 0.45);
  cursor: not-allowed;
}

.rqm-btn-pending {
  background: rgba(217, 119, 6, 0.3);
  color: #fbbf24;
  cursor: not-allowed;
}

/* Round cast avatars */
.rqm-cast-card {
  flex-shrink: 0;
  width: 84px;
  text-align: center;
}

.rqm-cast-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto;
  display: block;
  background: rgba(39, 39, 42, 0.8);
  border: 1px solid rgba(196, 181, 253, 0.12);
}

.rqm-cast-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #52525b;
}

.rqm-cast-name {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  color: #e4e4e7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rqm-cast-role {
  font-size: 9px;
  color: #71717a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Seasons / episodes accordion */
.rqm-season {
  margin-bottom: 8px;
  border: 1px solid rgba(196, 181, 253, 0.08);
  border-radius: 10px;
  background: rgba(9, 9, 11, 0.3);
  overflow: hidden;
}

.rqm-season-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  text-align: left;
  font-size: 13px;
  transition: background 0.15s ease;
}

.rqm-season-head:hover {
  background: rgba(139, 92, 246, 0.08);
}

.rqm-season-name {
  font-weight: 600;
  white-space: nowrap;
}

.rqm-season-count {
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rqm-season-badge {
  padding: 1px 9px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.rqm-season-badge.is-available {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
}

.rqm-season-badge.is-partial {
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fde68a;
}

.rqm-season-badge.is-processing {
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.35);
  color: #93c5fd;
}

.rqm-season-badge.is-missing {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #fca5a5;
}

.rqm-season-badge.is-unaired {
  background: rgba(63, 63, 70, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.5);
}

.rqm-season-chev {
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.rqm-season-head.is-open .rqm-season-chev {
  transform: rotate(180deg);
}

.rqm-episodes {
  border-top: 1px solid rgba(196, 181, 253, 0.08);
  padding: 6px 12px 10px;
}

.rqm-season-searchall {
  display: flex;
  justify-content: flex-end;
  padding: 4px 0 6px;
}

.rqm-episode {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.rqm-episode:last-child {
  border-bottom: none;
}

.rqm-ep-num {
  color: rgba(255, 255, 255, 0.4);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
}

.rqm-ep-title {
  flex: 1;
  min-width: 0;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rqm-ep-status {
  font-size: 11px;
  white-space: nowrap;
}

.rqm-ep-status.is-available { color: #6ee7b7; }
.rqm-ep-status.is-processing { color: #93c5fd; }
.rqm-ep-status.is-missing { color: #fca5a5; }
.rqm-ep-status.is-unaired { color: rgba(255, 255, 255, 0.4); }

.rqm-ep-search {
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #c4b5fd;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.rqm-ep-search:hover:not(:disabled) {
  background: rgba(139, 92, 246, 0.3);
}

.rqm-ep-search:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.rqm-ep-search.is-sent {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #6ee7b7;
  opacity: 1;
}

.rqm-btn:disabled {
  cursor: not-allowed;
}

.rqm-btn-primary:disabled {
  opacity: 0.7;
  box-shadow: none;
}

/* --- de-bubbled modal sections + banner backdrop (matches the plugin) --- */
#mediaInfoContent {
  position: relative;
}

.rqm-content {
  position: relative;
  z-index: 1;
}

.rqm-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 240px;
  z-index: 0;
  background-size: cover;
  background-position: center 20%;
  opacity: 0.25;
  pointer-events: none;
  /* Slight feather at the top, heavier across the bottom half */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 22%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 22%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0) 100%);
}

/* Section headings match the plugin's (no bubbles; content blends into the card) */
.rqm-heading {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Ratings badges double as links to IMDb/RT/Metacritic/TMDB */
.rqm-rating-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.rqm-rating-link:hover {
  opacity: 0.75;
}

.rqm-link-ind {
  width: 10px;
  height: 10px;
  color: #71717a;
  flex-shrink: 0;
}

.rqm-rating-link:hover .rqm-link-ind {
  color: #a1a1aa;
}