/* =========================================================
   RondoServ Ultra-Premium Theme for Shelfmark
   Matches Homarr & Jellyfin Dark/Glassmorphism Theme
   ========================================================= */

:root,
[data-theme="dark"],
[data-theme="light"],
html,
body {
  --primary-color: #6366f1 !important;
  --primary-dark: #4f46e5 !important;
  --background-color: #0b0e14 !important;
  --text-color: #ffffff !important;
  --heading-color: #ffffff !important;
  --card-background: rgba(18, 22, 31, 0.82) !important;
  --border-color: rgba(99, 102, 241, 0.20) !important;
  --input-background: rgba(14, 18, 26, 0.90) !important;
  --bg: #0b0e14 !important;
  --text: #ffffff !important;
  --border-muted: rgba(99, 102, 241, 0.20) !important;
  --bg-soft: rgba(18, 22, 31, 0.85) !important;
  --hover-surface: rgba(99, 102, 241, 0.18) !important;
  --hover-action: rgba(99, 102, 241, 0.30) !important;
  --hover-row: rgba(99, 102, 241, 0.18) !important;
  --scrollbar-thumb: rgba(99, 102, 241, 0.55) !important;
  --scrollbar-thumb-hover: rgba(168, 85, 247, 0.75) !important;
}

/* Background Atmosphere */
html, body, #root {
  background: radial-gradient(circle at 15% 15%, rgba(99, 102, 241, 0.14), transparent 50%),
              radial-gradient(circle at 85% 85%, rgba(168, 85, 247, 0.10), transparent 50%),
              #0b0e14 !important;
  color: #ffffff !important;
  font-family: Inter, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  min-height: 100vh !important;
}

/* Universal Text Contrast Fixes for Dark Mode */
.text-gray-900,
.text-gray-800,
.text-gray-700,
.text-neutral-900,
.text-neutral-800,
.text-slate-900,
.text-slate-800 {
  color: #f8fafc !important;
}

.text-gray-600,
.text-gray-500,
.text-slate-500,
.text-slate-400 {
  color: #94a3b8 !important;
}

/* App Header & Navbar Glass */
header,
nav {
  background: rgba(11, 14, 20, 0.85) !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.20) !important;
}

/* =========================================================
   Top Navigation & Action Buttons (Activity, Libraries, Menu)
   ========================================================= */
header button,
header a,
button[aria-label*="activity" i],
button[title="Activity"],
button[aria-label="User menu"] {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

header button svg,
header a svg,
button[aria-label*="activity" i] svg,
button[title="Activity"] svg,
button[aria-label="User menu"] svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

header button span,
header a span,
button[aria-label*="activity" i] span,
button[title="Activity"] span {
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
}

header button:hover,
header a:hover,
button[aria-label*="activity" i]:hover,
button[title="Activity"]:hover,
button[aria-label="User menu"]:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.90), rgba(168, 85, 247, 0.90)) !important;
  border-color: rgba(168, 85, 247, 0.65) !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 4px 18px rgba(99, 102, 241, 0.45) !important;
}

/* Activity Notification Badge */
button[aria-label*="activity" i] span[class*="rounded-full"],
button[title="Activity"] span[class*="rounded-full"] {
  background: linear-gradient(135deg, #ef4444, #f43f5e) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.8) !important;
  border: 1px solid #ffffff !important;
}

/* User Menu Dropdown */
header [class*="shadow-lg"],
header [class*="rounded-lg"] {
  background: rgba(14, 18, 26, 0.95) !important;
  border: 1px solid rgba(99, 102, 241, 0.30) !important;
  box-shadow: 0 12px 35px -5px rgba(0, 0, 0, 0.7), 0 0 15px rgba(99, 102, 241, 0.2) !important;
  backdrop-filter: blur(20px) !important;
}

header [class*="shadow-lg"] a,
header [class*="shadow-lg"] button {
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

header [class*="shadow-lg"] a:hover,
header [class*="shadow-lg"] button:hover {
  background: rgba(99, 102, 241, 0.25) !important;
  transform: none !important;
}

/* =========================================================
   Glassmorphism Containers, Cards & Modals
   ========================================================= */
header,
nav,
.search-wrapper,
.details-container,
.dropdown-trigger,
.modal-overlay .details-container,
[role="dialog"],
div[class*="bg-white"],
div[class*="bg-gray-"],
div[class*="bg-neutral-"],
div[class*="bg-slate-"],
div[class*="bg-zinc-"],
div[class*="rounded-lg"],
div[class*="rounded-xl"],
div[class*="rounded-2xl"] {
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
}

/* Book Cards & List Items */
div[class*="grid"] > div,
div[class*="card"],
div[class*="border"] {
  border-color: rgba(99, 102, 241, 0.18) !important;
}

/* Interactive Card Elevation & Glow */
div[class*="grid"] > div:hover,
div[class*="card"]:hover,
.hover-row:hover {
  border-color: rgba(99, 102, 241, 0.50) !important;
  box-shadow: 0 12px 30px -8px rgba(99, 102, 241, 0.35), 0 0 15px rgba(168, 85, 247, 0.20) !important;
}

/* Search Bar & Inputs */
input,
select,
textarea,
.search-input {
  background: rgba(14, 18, 26, 0.85) !important;
  border: 1px solid rgba(99, 102, 241, 0.25) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
}

input:focus,
select:focus,
textarea:focus,
.search-input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.30), 0 0 15px rgba(99, 102, 241, 0.20) !important;
  outline: none !important;
}

/* Primary Action Buttons */
button[class*="bg-blue-"],
button[class*="bg-indigo-"],
button[class*="bg-primary"],
button.primary-btn,
button[type="submit"] {
  background: linear-gradient(135deg, #6366f1, #a855f7) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

button[class*="bg-blue-"]:hover,
button[class*="bg-indigo-"]:hover,
button[class*="bg-primary"]:hover,
button.primary-btn:hover,
button[type="submit"]:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.55) !important;
}

/* Modal Dialogs & Details */
.details-container,
[role="dialog"] {
  background: rgba(14, 18, 26, 0.95) !important;
  border: 1px solid rgba(99, 102, 241, 0.30) !important;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.85), 0 0 25px rgba(99, 102, 241, 0.25) !important;
  border-radius: 20px !important;
}

/* Badges & Tags */
span[class*="badge"],
span[class*="tag"],
span[class*="chip"],
span[class*="rounded-full"] {
  background: rgba(99, 102, 241, 0.18) !important;
  border: 1px solid rgba(99, 102, 241, 0.30) !important;
  color: #e0e7ff !important;
}

/* Custom Sleek Scrollbars */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: rgba(11, 14, 20, 0.6);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6366f1, #a855f7);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #818cf8, #c084fc);
}