/* ========================================================================
   PLEX MODERN DARK UI THEME — GLOBAL (ADMIN / USER / LANDING)
   Unified Build — Homepage 1.7+
   ======================================================================== */

/* ------------------------------------------------------------------------
   GLOBAL BACKGROUND, TEXT, LAYOUT
   ------------------------------------------------------------------------ */

html, body {
  background: linear-gradient(180deg, #000 0%, #0a0a0a 40%, #111 100%) !important;
  color: #e8e8e8 !important;
  font-weight: 400 !important;
  height: auto !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
}

:root {
  --color-accent: #E5A00D !important;
}

/* ------------------------------------------------------------------------
   HEADER / FOOTER
   ------------------------------------------------------------------------ */

header, footer {
  background: rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(10px) brightness(1.2);
  border-top: 1px solid rgba(229,160,13,0.25) !important;
  border-bottom: 1px solid rgba(229,160,13,0.25) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

footer {
  margin-top: 8px !important;
  padding: 4px 12px !important;
}

/* ------------------------------------------------------------------------
   TITLES
   ------------------------------------------------------------------------ */

.service-group-title,
h1, h2, h3 {
  color: #FFC107 !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  letter-spacing: .2px;
  text-shadow: 0 0 8px rgba(229,160,13,0.4);
}

/* ------------------------------------------------------------------------
   LINKS
   ------------------------------------------------------------------------ */

a { color: #E5A00D !important; }
a:hover { filter: brightness(1.25) !important; }

/* ========================================================================
   SERVICE CARDS (Widget Panels)
   ======================================================================== */

li.service .service-card {
  background: rgba(20,20,20,0.35) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(229,160,13,0.25) !important;
  backdrop-filter: blur(18px) saturate(140%) brightness(1.05);
  transition: 0.2s ease;
  box-shadow:
    inset 0 0 12px rgba(255,255,255,0.04),
    0 10px 26px rgba(0,0,0,0.55),
    0 0 12px rgba(229,160,13,0.15);
  margin-top: 3px !important;
}

li.service .service-card:hover {
  background: rgba(40,40,40,0.45) !important;
  backdrop-filter: blur(22px) saturate(150%) brightness(1.25);
  transform: translateY(-3px);
  border-color: #E5A00D !important;
  box-shadow:
    inset 0 0 15px rgba(255,255,255,0.05),
    0 14px 32px rgba(0,0,0,0.7),
    0 0 18px rgba(229,160,13,0.3);
}

.service-name {
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: .4px;
  text-shadow: 0 0 6px rgba(0,0,0,0.5);
}

/* ========================================================================
   SERVICE BLOCKS (Movies / TV / Metrics Inside Cards)
   ======================================================================== */

.service-block {
  background: rgba(0,0,0,0.35) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(229,160,13,0.18) !important;
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    inset 0 0 10px rgba(0,0,0,0.45),
    0 0 10px rgba(255,175,0,0.15);
}

.service-block .font-thin {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}

.service-block .font-bold {
  color: #FFC107 !important;
  font-weight: 600 !important;
  text-shadow: 0 0 6px rgba(255,175,0,0.35);
}

/* ========================================================================
   HEADER LOGO — PERFECTLY ALIGNED CUSTOM HEIGHT
   ======================================================================== */

#information-widgets .information-widget-logo {
  height: 60px !important;
  display: flex !important;
  align-items: flex-start !important;
}

#information-widgets .information-widget-logo img {
  height: 60px !important;
  width: auto !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  margin-left: 0px !important;
  object-fit: contain !important;
  display: block !important;
}

/* ========================================================================
   TAUTULLI ROW LAYOUT
   ======================================================================== */

li.service[data-name="Tautulli"] .flex.flex-col.pb-1.mx-1 > div {
  background: rgba(8,8,8,0.85) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(229,160,13,0.25) !important;
  padding: 2px 6px !important;
  margin-top: 2px !important;
  height: 24px !important;
  backdrop-filter: blur(14px) saturate(150%);
}

li.service[data-name="Tautulli"] * {
  font-size: .80rem !important;
  color: #e8e8e8 !important;
}

li.service[data-name="Tautulli"] [title] {
  color: #fff !important;
  font-weight: 600 !important;
}

li.service[data-name="Tautulli"] svg {
  color: #E5A00D !important;
  stroke: #E5A00D !important;
  fill: #E5A00D !important;
}

/* ========================================================================
   GLOBAL PROGRESS BARS
   ======================================================================== */

.relative.h-5.w-full.rounded-md.bg-theme-200\/50,
.relative.h-5.w-full.rounded-md.dark\:bg-theme-900\/20 {
  background-color: rgba(56,41,9,0.25) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 0 3px rgba(255,255,255,0.02),
    0 0 3px rgba(229,160,13,0.14),
    0 0 6px rgba(229,160,13,0.08);
  transition: box-shadow .25s ease-in-out;
}

.relative.h-5.w-full.rounded-md.bg-theme-200\/50 > .absolute.h-5,
.relative.h-5.w-full.rounded-md.dark\:bg-theme-900\/20 > .absolute.h-5 {
  background-color: #382909 !important;
  border-radius: 10px !important;
  top: 2px !important;
  left: 2px !important;
  height: calc(100% - 4px) !important;
  max-width: calc(100% - 4px) !important;
}

.relative.h-5.w-full.rounded-md { margin-bottom: 6px !important; }

.relative.h-5.w-full.rounded-md:hover {
  box-shadow:
    inset 0 0 4px rgba(255,255,255,0.03),
    0 0 4px rgba(229,160,13,0.18),
    0 0 8px rgba(229,160,13,0.10);
}

/* ========================================================================
   RESOURCE WIDGETS (System Status / Storage / Network)
   ======================================================================== */

.widget-container + .text-center.text-theme-800,
.widget-container + .text-center.dark\:text-theme-200,
.text-center.text-xs.text-theme-800,
.text-center.text-xs.dark\:text-theme-200 {
  color: #E5A00D !important;
}

.information-widget-resource * {
  color: #e8e8e8 !important;
}

.information-widget-resource svg[fill="none"] * {
  stroke: #E5A00D !important;
}

.information-widget-resource svg[fill="currentColor"] * {
  fill: #E5A00D !important;
}

.information-widget-resource svg:not([fill]) * {
  stroke: #E5A00D !important;
}

.information-widget-resource .bg-theme-800\/30,
.information-widget-resource .dark\:bg-theme-200\/20 {
  background-color: rgba(229,160,13,0.25) !important;
}

.information-widget-resource .bg-theme-800\/70,
.information-widget-resource .dark\:bg-theme-200\/50,
.information-widget-resource [style*="width"] {
  background-color: #E5A00D !important;
}

.information-widget-error {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ========================================================================
   REFRESH BUTTON
   ======================================================================== */

#revalidate svg {
  color: #E5A00D !important;
}

#revalidate svg:hover {
  filter: brightness(1.3) !important;
  transform: scale(1.05);
}

/* ========================================================================
   CHEVRONS
   ======================================================================== */

button > svg.transition-all {
  color: #E5A00D !important;
}

button:hover > svg.transition-all {
  color: #FFC107 !important;
}

/* ========================================================================
   LAYOUT NORMALIZATION
   ======================================================================== */

#page_wrapper,
#inner_wrapper,
#services,
#information-widgets,
#content,
.main-content {
  height: auto !important;
  min-height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

#services [class*="grid"],
#information-widgets [class*="grid"],
#services [class*="gap-y"],
#information-widgets [class*="gap-y"] {
  row-gap: .5rem !important;
  gap: .5rem !important;
}

#services li.service { margin-bottom: 0 !important; }

.service-group-title {
  margin-top: 12px !important;
  margin-bottom: 4px !important;
}

.service-group-title + div {
  margin-top: 4px !important;
}

#services > div,
#information-widgets > div {
  margin-bottom: 2px !important;
}

hr,
[class*="border-theme"] {
  border-color: rgba(229,160,13,0.45) !important;
  opacity: .85 !important;
  margin: 6px 0 !important;
}

/* Remove random Tailwind vertical spacing */
[class*="mt-"],
[class*="pt-"] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ========================================================================
   GENERIC SERVICE ROWS (qBittorrent, Radarr, Sonarr, Jellyseerr, etc.)
   ======================================================================== */

li.service .service-card div.relative.h-5.rounded-md.bg-theme-200\/50:not(.w-full),
li.service .service-card div.relative.h-5.rounded-md.dark\:bg-theme-900\/20:not(.w-full) {
  background: rgba(8,8,8,0.85) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(229,160,13,0.25) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  padding: 2px 8px !important;
  margin: 2px 4px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow:
    inset 0 0 3px rgba(255,255,255,0.02),
    0 0 3px rgba(229,160,13,0.14),
    0 0 6px rgba(229,160,13,0.08) !important;
}

li.service .service-card div.relative.h-5.rounded-md.bg-theme-200\/50:not(.w-full) *,
li.service .service-card div.relative.h-5.rounded-md.dark\:bg-theme-900\/20:not(.w-full) * {
  color: #e8e8e8 !important;
  font-size: 0.80rem !important;
}

li.service .service-card div.relative.h-5.rounded-md.bg-theme-200\/50:not(.w-full) a,
li.service .service-card div.relative.h-5.rounded-md.dark\:bg-theme-900\/20:not(.w-full) a {
  color: #E5A00D !important;
}