/* =========================================================
   PatheVolaille — Homepage custom theme
   Modern glassmorphism, Plex-orange accents, soft motion
   ========================================================= */

:root {
  --pv-accent:        255, 165, 0;     /* Plex orange */
  --pv-accent-soft:   255, 165, 0, .12;
  --pv-bg-1:          12, 14, 22;      /* deep slate */
  --pv-bg-2:          22, 27, 41;      /* mid slate */
  --pv-glass:         255, 255, 255, .04;
  --pv-glass-hi:      255, 255, 255, .08;
  --pv-stroke:        255, 255, 255, .07;
  --pv-stroke-hi:     255, 165, 0, .35;
  --pv-text-dim:      210, 220, 240, .65;
  --pv-radius:        14px;
  --pv-radius-lg:     20px;
  --pv-shadow:        0 10px 30px -12px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.25);
}

/* ------- Page background: living gradient + subtle grain ------- */
html, body {
  background:
    radial-gradient(900px 600px at 8% -10%,  rgba(var(--pv-accent), .14), transparent 60%),
    radial-gradient(800px 600px at 100% 0%,  rgba(120, 90, 255, .12),     transparent 60%),
    radial-gradient(1200px 800px at 50% 110%, rgba(40, 200, 255, .08),    transparent 60%),
    linear-gradient(180deg, rgb(var(--pv-bg-1)), rgb(var(--pv-bg-2)));
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .5;
  mix-blend-mode: overlay;
  z-index: 0;
}

#page_container, #information-widgets, #__next {
  position: relative;
  z-index: 1;
}

/* ------- Header: clock & resources as floating glass tiles ------- */
#information-widgets {
  gap: 14px !important;
  padding: 14px 18px !important;
  margin-bottom: 8px;
}

#information-widgets > div,
.information-widget,
.information-widget-resources,
.information-widget-datetime,
.information-widget-search {
  background: rgba(var(--pv-glass));
  border: 1px solid rgba(var(--pv-stroke));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-radius: var(--pv-radius);
  padding: 12px 16px !important;
  box-shadow: var(--pv-shadow);
  transition: border-color .25s ease, transform .25s ease;
}

#information-widgets > div:hover {
  border-color: rgba(var(--pv-stroke-hi));
}

/* Clock — make it the hero */
.information-widget-datetime {
  background:
    linear-gradient(135deg, rgba(var(--pv-accent), .10), rgba(120, 90, 255, .08)),
    rgba(var(--pv-glass));
}
.information-widget-datetime * {
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
}

/* Resources progress bars */
.information-widget-resources .bg-theme-300,
.information-widget-resources .bg-theme-200 { background: rgba(255,255,255,.06) !important; }
.information-widget-resources [class*="rounded-full"][class*="bg-"] {
  background: linear-gradient(90deg, rgba(var(--pv-accent),.95), rgba(255,210,120,.95)) !important;
  box-shadow: 0 0 12px rgba(var(--pv-accent), .55);
}

/* ------- Section headers (Media / Pipeline / Infrastructure) ------- */
h1, h2, .services-group-name, #__next h2 {
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase;
  font-size: 12px !important;
  color: rgba(var(--pv-text-dim)) !important;
  position: relative;
  padding-left: 10px !important;
  margin-bottom: 10px !important;
}
h1::before, h2::before, .services-group-name::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgb(var(--pv-accent)), rgba(255,90,90,.9));
  transform: translateY(-50%);
  box-shadow: 0 0 10px rgba(var(--pv-accent), .6);
}

/* ------- Service cards: glass tiles with hover lift ------- */
#services .service-card,
.service-card,
[id^="service-"] > div {
  background: rgba(var(--pv-glass)) !important;
  border: 1px solid rgba(var(--pv-stroke)) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-radius: var(--pv-radius) !important;
  box-shadow: var(--pv-shadow);
  transition:
    transform .25s cubic-bezier(.2,.7,.2,1),
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease;
  overflow: hidden;
  position: relative;
}

/* subtle top sheen */
#services .service-card::before,
.service-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  pointer-events: none;
}

#services .service-card:hover,
.service-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--pv-stroke-hi)) !important;
  background: rgba(var(--pv-glass-hi)) !important;
  box-shadow:
    0 14px 40px -14px rgba(0,0,0,.6),
    0 0 0 1px rgba(var(--pv-accent), .15),
    0 0 24px -6px rgba(var(--pv-accent), .25);
}

/* Service icon: rounded square w/ glow on hover */
.service-card img,
.service-card svg {
  border-radius: 10px;
  transition: transform .3s ease, filter .3s ease;
}
.service-card:hover img,
.service-card:hover svg {
  transform: scale(1.05);
  filter: drop-shadow(0 0 8px rgba(var(--pv-accent), .55));
}

/* Service name + description */
.service-card .font-medium {
  font-weight: 600 !important;
  letter-spacing: .2px;
}
.service-card .text-theme-500,
.service-card .text-theme-700,
.service-card .text-xs {
  color: rgba(var(--pv-text-dim)) !important;
}

/* Status dot */
.status-dot,
[class*="bg-emerald"],
[class*="bg-green"] {
  box-shadow: 0 0 8px currentColor;
}

/* ------- Widget data rows (custom API + native widgets) ------- */
.service-card [data-testid="widget"] > div,
.service-card .grid > div,
.service-card .flex.flex-col.justify-center {
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 6px 10px !important;
  transition: background .2s ease, border-color .2s ease;
}

.service-card [data-testid="widget"] > div:hover {
  background: rgba(var(--pv-accent-soft));
  border-color: rgba(var(--pv-stroke-hi));
}

/* Widget label / value typography */
.service-card .text-theme-800,
.service-card .text-theme-200,
.service-card .font-bold {
  font-variant-numeric: tabular-nums;
  font-weight: 700 !important;
  color: #fff !important;
}

/* ------- Bookmarks: pill-row look ------- */
#bookmarks .bookmark-text,
.bookmark a,
[id^="bookmark-"] {
  background: rgba(var(--pv-glass)) !important;
  border: 1px solid rgba(var(--pv-stroke)) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(10px);
  transition: all .2s ease;
}
[id^="bookmark-"]:hover {
  border-color: rgba(var(--pv-stroke-hi)) !important;
  transform: translateY(-1px);
}

/* ------- Quick launch / search bar ------- */
#quicklaunch input,
#information-widgets input {
  background: rgba(0,0,0,.25) !important;
  border: 1px solid rgba(var(--pv-stroke)) !important;
  border-radius: 10px !important;
  color: #fff !important;
}
#quicklaunch input:focus {
  outline: none !important;
  border-color: rgba(var(--pv-accent), .6) !important;
  box-shadow: 0 0 0 3px rgba(var(--pv-accent), .15);
}

/* ------- Scrollbars ------- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.08);
  border-radius: 10px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--pv-accent), .35); }

/* ------- Mobile polish ------- */
@media (max-width: 768px) {
  #information-widgets { flex-wrap: wrap; }
  .information-widget-datetime { font-size: 1.1rem !important; }
}

/* ------- Tiny entrance animation for cards ------- */
@keyframes pv-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#services .service-card,
.service-card {
  animation: pv-fade-up .45s ease both;
}