/* ==============================================================
   Photoview Modern Facelift — Hunter 🦁
   Injects modern design patterns on top of Photoview's Tailwind UI.
   All selectors use high specificity to override bundled styles.
   ============================================================== */

/* --- Google Font: Inter --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* --- CSS Custom Properties (light) --- */
:root {
  --pv-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --pv-radius-sm: 8px;
  --pv-radius-md: 12px;
  --pv-radius-lg: 16px;
  --pv-radius-xl: 20px;
  --pv-shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --pv-shadow-md: 0 4px 12px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04);
  --pv-shadow-lg: 0 10px 25px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04);
  --pv-shadow-xl: 0 20px 40px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
  --pv-accent: #6366f1;
  --pv-accent-light: #818cf8;
  --pv-accent-subtle: rgba(99,102,241,0.08);
  --pv-bg: #f8f9fc;
  --pv-card: #ffffff;
  --pv-sidebar: #ffffff;
  --pv-header: rgba(255,255,255,0.85);
  --pv-border: #e9edf2;
  --pv-text-primary: #1a1d24;
  --pv-text-secondary: #6b7280;
  --pv-text-tertiary: #9ca3af;
  --pv-input-bg: #f1f3f6;
  --pv-input-border: #e5e7eb;
  --pv-hover: #f1f4f9;
}

/* --- Dark mode overrides --- */
html.dark {
  --pv-bg: #0f1117;
  --pv-card: #1a1d26;
  --pv-sidebar: #14161e;
  --pv-header: rgba(15,17,23,0.88);
  --pv-border: #262933;
  --pv-text-primary: #edf0f5;
  --pv-text-secondary: #9ca3b3;
  --pv-text-tertiary: #6b7280;
  --pv-input-bg: #1e202a;
  --pv-input-border: #2a2d38;
  --pv-hover: #1e212c;
  --pv-accent: #818cf8;
  --pv-accent-light: #a5b4fc;
  --pv-accent-subtle: rgba(129,140,248,0.1);
  --pv-shadow-sm: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15);
  --pv-shadow-md: 0 4px 12px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.15);
  --pv-shadow-lg: 0 10px 25px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.15);
  --pv-shadow-xl: 0 20px 40px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.15);
}

/* =================================================================
   BASE / TYPOGRAPHY
   ================================================================= */
#root, body, html {
  font-family: var(--pv-font) !important;
  background-color: var(--pv-bg) !important;
  color: var(--pv-text-primary) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar styling (Webkit) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--pv-text-tertiary);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--pv-text-secondary);
}

/* =================================================================
   HEADER / TOP BAR
   ================================================================= */
/* Target: the sticky header bar — the fixed top section */
#root > div > div:first-child > div:first-child {
  background: var(--pv-header) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--pv-border) !important;
  box-shadow: var(--pv-shadow-sm) !important;
}

/* Header logo text — the light-weight branding in the header */
[class*="text-2xl"][class*="font-light"] {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--pv-text-primary) !important;
}

/* =================================================================
   SIDEBAR
   ================================================================= */
/* Sidebar panel */
#root > div > div > div:nth-child(2),
[class*="fixed"][class*="bottom-0"][class*="lg:top-"][class*="z-30"],
div[class*="fixed"][class*="w-full"][class*="lg:w-\\[240px\\]"] {
  background: var(--pv-sidebar) !important;
  border-right: 1px solid var(--pv-border) !important;
  box-shadow: var(--pv-shadow-md) !important;
}

/* Sidebar album list section headings */
[class*="uppercase"][class*="text-gray-700"],
[class*="dark:text-gray-200"] {
  color: var(--pv-text-secondary) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
}

/* Sidebar items / links */
[class*="flex-grow"][class*="pl-2"][class*="text-sm"] {
  font-weight: 500 !important;
}

/* Sidebar navigation icons */
[class*="w-12"][class*="h-12"][class*="rounded-lg"],
[class*="w-14"][class*="h-14"] {
  border-radius: var(--pv-radius-sm) !important;
}

/* =================================================================
   SEARCH BAR
   ================================================================= */
/* Search input wrapper */
[class*="rounded-md"][class*="bg-gray-50"] {
  background: var(--pv-input-bg) !important;
  border: 1px solid var(--pv-input-border) !important;
  border-radius: var(--pv-radius-md) !important;
  transition: all 0.2s ease !important;
}
[class*="rounded-md"][class*="bg-gray-50"]:focus-within {
  background: var(--pv-card) !important;
  border-color: var(--pv-accent-light) !important;
  box-shadow: 0 0 0 3px var(--pv-accent-subtle) !important;
}

/* Search input */
input[type="text"],
input[type="search"] {
  background: transparent !important;
  font-family: var(--pv-font) !important;
}

/* =================================================================
   ALBUM / MEDIA CARDS
   ================================================================= */
/* Album cover images — soften corners */
img[class*="object-cover"],
video[class*="object-cover"] {
  border-radius: var(--pv-radius-sm) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Album card wrapper (white card with shadow) */
[class*="shadow-md"][class*="border"][class*="rounded"][class*="p-2"],
div[class*="border rounded p-2"],
div[class*="bg-white"][class*="dark:bg-dark-bg2"][class*="shadow-md"] {
  background: var(--pv-card) !important;
  border: 1px solid var(--pv-border) !important;
  border-radius: var(--pv-radius-md) !important;
  box-shadow: var(--pv-shadow-sm) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  overflow: hidden !important;
}

/* Album card hover effect */
div[class*="bg-white"][class*="dark:bg-dark-bg2"][class*="shadow-md"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--pv-shadow-lg) !important;
}

/* =================================================================
   TIMELINE / PHOTO GRID
   ================================================================= */
/* Photo grid items — nicer hover */
div[class*="relative"][class*="overflow-hidden"] img {
  border-radius: calc(var(--pv-radius-sm) - 2px) !important;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
div[class*="relative"][class*="overflow-hidden"]:hover img {
  transform: scale(1.03) !important;
}

/* =================================================================
   BUTTONS
   ================================================================= */
button, [role="button"], a[role="button"] {
  border-radius: var(--pv-radius-sm) !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}

/* Primary action buttons */
button[class*="bg-blue"],
button[class*="text-white"] {
  background: var(--pv-accent) !important;
  border-color: var(--pv-accent) !important;
}
button[class*="bg-blue"]:hover,
button[class*="text-white"]:hover {
  background: var(--pv-accent-light) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(99,102,241,0.3) !important;
}

/* =================================================================
   MODAL / LIGHTBOX
   ================================================================= */
/* Lightbox background overlay */
div[class*="fixed"][class*="inset-0"][class*="z-40"] {
  backdrop-filter: blur(8px) !important;
  background: rgba(0,0,0,0.7) !important;
}

/* Lightbox content */
div[class*="max-w-\\[calc\\(100\\%-16px\\)\\]"] {
  border-radius: var(--pv-radius-lg) !important;
  box-shadow: var(--pv-shadow-xl) !important;
  overflow: hidden !important;
}

/* =================================================================
   SETTINGS PAGE
   ================================================================= */
/* Settings forms / cards */
div[class*="max-w-6xl"] div[class*="bg-white"],
div[class*="dark:bg-dark-bg"] {
  background: var(--pv-card) !important;
  border: 1px solid var(--pv-border) !important;
  border-radius: var(--pv-radius-md) !important;
  box-shadow: var(--pv-shadow-sm) !important;
}

/* =================================================================
   SHARED ALBUM VIEW
   ================================================================= */
/* Public share page backgrounds */
body:has(div[id="share-root"]),
div[id="share-root"] {
  background: var(--pv-bg) !important;
}

/* =================================================================
   TOOLTIP / TOAST NOTIFICATIONS
   ================================================================= */
/* Toast messages */
[class*="fixed"][class*="top-0"][class*="right-0"],
div[role="alert"] {
  border-radius: var(--pv-radius-md) !important;
  box-shadow: var(--pv-shadow-lg) !important;
  border: 1px solid var(--pv-border) !important;
  backdrop-filter: blur(8px) !important;
}

/* =================================================================
   PROGRESS / SCAN INDICATOR
   ================================================================= */
/* Scan progress bar */
[class*="h-\\[3px\\]"][class*="overflow-hidden"] {
  border-radius: 99px !important;
}
[class*="h-\\[3px\\]"] > div {
  background: linear-gradient(90deg, var(--pv-accent), var(--pv-accent-light)) !important;
  border-radius: 99px !important;
}

/* =================================================================
   SIDEBAR ALBUM LIST — nicer items
   ================================================================= */
/* Sidebar album entries */
[class*="flex items-center"][class*="cursor-pointer"]:hover {
  background: var(--pv-hover) !important;
  border-radius: var(--pv-radius-sm) !important;
}

/* Active sidebar item */
[class*="flex items-center"][class*="bg-\\[\\#f1f8ff\\]"],
[class*="dark:bg-\\[#171f28\\]"] {
  border-radius: var(--pv-radius-sm) !important;
}

/* =================================================================
   DETAILED VIEW — right sidebar (EXIF, info)
   ================================================================= */
/* Photo detail sidebar */
[class*="w-\\[360px\\]"],
[class*="lg:w-\\[420px\\]"] {
  background: var(--pv-card) !important;
  border-left: 1px solid var(--pv-border) !important;
}

/* =================================================================
   MISC GLOBAL TWEAKS
   ================================================================= */
/* All horizontal rules */
hr {
  border-color: var(--pv-border) !important;
}

/* Remove default shadow-separator in favor of our own */
[class*="shadow-separator"] {
  box-shadow: var(--pv-shadow-sm) !important;
}

/* All images inside cards — nicer crop/rounding */
[class*="rounded"] img,
img[class*="rounded"] {
  border-radius: inherit !important;
}

/* Section headers on settings etc. */
h1, h2, h3 {
  font-family: var(--pv-font) !important;
  letter-spacing: -0.01em !important;
}

/* =================================================================
   DARK MODE SPECIFIC OVERRIDES
   ================================================================= */
html.dark #root > div > div:first-child > div:first-child {
  border-bottom-color: var(--pv-border) !important;
}

/* Ensure the gradient accent buttons still look good */
html.dark button[class*="bg-gradient"] {
  box-shadow: none !important;
}

/* =================================================================
   HEADER LOGO / TITLE
   ================================================================= */
/* The Photoview logo + title in header */
[class*="flex items-center"] svg + [class*="hidden"] {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}