/*
 * Paperclip — 3D Glassmorphism Theme
 * Depth, glass, gradients, glow — premium feel
 */

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

/* ===== Keyframes ===== */
@keyframes subtleFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-2px); }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== Dark Mode — Deep Space ===== */
.dark {
  --background: #0a0a0f !important;
  --foreground: #e8e6e3 !important;

  --card: rgba(255, 255, 255, 0.04) !important;
  --card-foreground: #e8e6e3 !important;

  --popover: rgba(22, 22, 30, 0.92) !important;
  --popover-foreground: #e8e6e3 !important;

  --primary: #7c6aef !important;
  --primary-foreground: #ffffff !important;

  --secondary: rgba(255, 255, 255, 0.06) !important;
  --secondary-foreground: #e8e6e3 !important;

  --muted: rgba(255, 255, 255, 0.06) !important;
  --muted-foreground: #8a8a8e !important;

  --accent: rgba(124, 106, 239, 0.1) !important;
  --accent-foreground: #e8e6e3 !important;

  --destructive: #ff6b6b !important;
  --destructive-foreground: #ffffff !important;

  --border: rgba(255, 255, 255, 0.08) !important;
  --input: rgba(255, 255, 255, 0.08) !important;
  --ring: #7c6aef !important;

  --chart-1: #7c6aef !important;
  --chart-2: #38bdf8 !important;
  --chart-3: #f472b6 !important;
  --chart-4: #34d399 !important;
  --chart-5: #fbbf24 !important;

  --sidebar: rgba(12, 12, 18, 0.85) !important;
  --sidebar-foreground: #e8e6e3 !important;
  --sidebar-primary: #7c6aef !important;
  --sidebar-primary-foreground: #ffffff !important;
  --sidebar-accent: rgba(124, 106, 239, 0.12) !important;
  --sidebar-accent-foreground: #e8e6e3 !important;
  --sidebar-border: rgba(255, 255, 255, 0.06) !important;
  --sidebar-ring: #7c6aef !important;

  --radius: 0.75rem !important;
  --radius-sm: 0.5rem !important;
  --radius-md: 0.75rem !important;
  --radius-lg: 1rem !important;
  --radius-xl: 1.25rem !important;

  --font-sans: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  --font-body: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
}

/* ===== Light Mode — Frosted Glass ===== */
:root {
  color-scheme: light !important;

  --background: #f0eef6 !important;
  --foreground: #1a1a2e !important;

  --card: rgba(255, 255, 255, 0.6) !important;
  --card-foreground: #1a1a2e !important;

  --popover: rgba(255, 255, 255, 0.85) !important;
  --popover-foreground: #1a1a2e !important;

  --primary: #6c5ce7 !important;
  --primary-foreground: #ffffff !important;

  --secondary: rgba(255, 255, 255, 0.5) !important;
  --secondary-foreground: #1a1a2e !important;

  --muted: rgba(108, 92, 231, 0.06) !important;
  --muted-foreground: #6b6b80 !important;

  --accent: rgba(108, 92, 231, 0.08) !important;
  --accent-foreground: #1a1a2e !important;

  --destructive: #e03e3e !important;
  --destructive-foreground: #ffffff !important;

  --border: rgba(0, 0, 0, 0.06) !important;
  --input: rgba(0, 0, 0, 0.06) !important;
  --ring: #6c5ce7 !important;

  --chart-1: #6c5ce7 !important;
  --chart-2: #0ea5e9 !important;
  --chart-3: #ec4899 !important;
  --chart-4: #10b981 !important;
  --chart-5: #f59e0b !important;

  --sidebar: rgba(255, 255, 255, 0.45) !important;
  --sidebar-foreground: #1a1a2e !important;
  --sidebar-primary: #6c5ce7 !important;
  --sidebar-primary-foreground: #ffffff !important;
  --sidebar-accent: rgba(108, 92, 231, 0.1) !important;
  --sidebar-accent-foreground: #1a1a2e !important;
  --sidebar-border: rgba(0, 0, 0, 0.06) !important;
  --sidebar-ring: #6c5ce7 !important;

  --radius: 0.75rem !important;
  --radius-sm: 0.5rem !important;
  --radius-md: 0.75rem !important;
  --radius-lg: 1rem !important;
  --radius-xl: 1.25rem !important;

  --font-sans: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  --font-body: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
}

/* ===== HTML & Body — Gradient background ===== */
html {
  color-scheme: light !important;
}
html.dark {
  color-scheme: dark !important;
}

body {
  font-family: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  letter-spacing: -0.01em !important;
  line-height: 1.6 !important;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(108, 92, 231, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(56, 189, 248, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(244, 114, 182, 0.05) 0%, transparent 60%),
    #f0eef6 !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
}

.dark body {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(124, 106, 239, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 90%, rgba(56, 189, 248, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(244, 114, 182, 0.04) 0%, transparent 60%),
    #0a0a0f !important;
  background-attachment: fixed !important;
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
}

h1 {
  background: linear-gradient(135deg, #6c5ce7, #38bdf8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.dark h1 {
  background: linear-gradient(135deg, #a78bfa, #38bdf8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ===== Glass Cards — 3D depth with frosted glass ===== */
[class*="card"],
[class*="Card"] {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(16px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 16px !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1) !important;
  transform: translateZ(0) !important;
}

[class*="card"]:hover,
[class*="Card"]:hover {
  transform: translateY(-3px) translateZ(0) !important;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.06),
    0 16px 48px rgba(108, 92, 231, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(108, 92, 231, 0.2) !important;
}

.dark [class*="card"],
.dark [class*="Card"] {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.dark [class*="card"]:hover,
.dark [class*="Card"]:hover {
  transform: translateY(-3px) translateZ(0) !important;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 8px 16px rgba(0, 0, 0, 0.2),
    0 16px 48px rgba(124, 106, 239, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(124, 106, 239, 0.3) !important;
}

/* ===== Buttons — 3D with glow ===== */
button, [role="button"] {
  font-weight: 600 !important;
  border-radius: 12px !important;
  transition: all 200ms cubic-bezier(0.23, 1, 0.32, 1) !important;
  transform: translateZ(0) !important;
  position: relative !important;
}

button:hover, [role="button"]:hover {
  transform: translateY(-1px) translateZ(0) !important;
  opacity: 1 !important;
}

button:active, [role="button"]:active {
  transform: translateY(1px) scale(0.98) translateZ(0) !important;
}

/* Primary buttons — gradient + glow */
button[class*="primary"],
button[class*="Primary"],
a[class*="primary"],
a[class*="Primary"] {
  background: linear-gradient(135deg, #6c5ce7, #7c6aef, #8b7cf6) !important;
  box-shadow:
    0 2px 8px rgba(108, 92, 231, 0.3),
    0 4px 16px rgba(108, 92, 231, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  border: none !important;
}

button[class*="primary"]:hover,
button[class*="Primary"]:hover,
a[class*="primary"]:hover,
a[class*="Primary"]:hover {
  box-shadow:
    0 4px 12px rgba(108, 92, 231, 0.4),
    0 8px 24px rgba(108, 92, 231, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.dark button[class*="primary"],
.dark button[class*="Primary"],
.dark a[class*="primary"],
.dark a[class*="Primary"] {
  background: linear-gradient(135deg, #7c6aef, #8b7cf6, #a78bfa) !important;
  box-shadow:
    0 2px 8px rgba(124, 106, 239, 0.35),
    0 4px 16px rgba(124, 106, 239, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* ===== Sidebar — frosted glass panel ===== */
[data-sidebar], nav, aside {
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.dark [data-sidebar], .dark nav, .dark aside {
  border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* Sidebar items — pill hover with glow */
[data-sidebar] a:hover,
[data-sidebar] button:hover,
nav a:hover,
aside a:hover {
  background: rgba(108, 92, 231, 0.1) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 12px rgba(108, 92, 231, 0.06) !important;
}

.dark [data-sidebar] a:hover,
.dark [data-sidebar] button:hover,
.dark nav a:hover,
.dark aside a:hover {
  background: rgba(124, 106, 239, 0.12) !important;
  box-shadow: 0 0 12px rgba(124, 106, 239, 0.08) !important;
}

/* Active sidebar items */
[data-sidebar] a[data-active="true"],
[data-sidebar] a[aria-current="page"],
nav a[data-active="true"],
nav a[aria-current="page"] {
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.15), rgba(56, 189, 248, 0.08)) !important;
  border-radius: 10px !important;
  box-shadow:
    0 0 16px rgba(108, 92, 231, 0.08),
    inset 0 0 0 1px rgba(108, 92, 231, 0.15) !important;
}

/* ===== Tables — glass rows with depth ===== */
table {
  border-collapse: separate !important;
  border-spacing: 0 4px !important;
}

th {
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.05em !important;
  color: var(--muted-foreground) !important;
  padding: 0.75rem 1rem !important;
}

td {
  padding: 0.75rem 1rem !important;
  border: none !important;
}

tbody tr {
  border-radius: 12px !important;
  transition: all 200ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}

tbody tr:hover {
  background: rgba(108, 92, 231, 0.06) !important;
  transform: scale(1.005) !important;
  box-shadow: 0 2px 12px rgba(108, 92, 231, 0.06) !important;
}

.dark tbody tr:hover {
  background: rgba(124, 106, 239, 0.08) !important;
  box-shadow: 0 2px 12px rgba(124, 106, 239, 0.08) !important;
}

tbody tr td:first-child {
  border-radius: 12px 0 0 12px !important;
}

tbody tr td:last-child {
  border-radius: 0 12px 12px 0 !important;
}

/* ===== Inputs — glass style with glow focus ===== */
input, textarea, select {
  font-family: inherit !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  transition: all 200ms cubic-bezier(0.23, 1, 0.32, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.dark input, .dark textarea, .dark select {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: rgba(108, 92, 231, 0.5) !important;
  box-shadow:
    0 0 0 3px rgba(108, 92, 231, 0.12),
    0 0 20px rgba(108, 92, 231, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  outline: none !important;
}

.dark input:focus, .dark textarea:focus, .dark select:focus {
  border-color: rgba(124, 106, 239, 0.5) !important;
  box-shadow:
    0 0 0 3px rgba(124, 106, 239, 0.15),
    0 0 20px rgba(124, 106, 239, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* ===== Scrollbars — glowing thin bar ===== */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(108, 92, 231, 0.3), rgba(56, 189, 248, 0.2)) !important;
  border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(108, 92, 231, 0.5), rgba(56, 189, 248, 0.4)) !important;
}

/* ===== Tooltips & Popovers — floating glass ===== */
[role="tooltip"],
[data-state="open"][data-side] {
  border-radius: 12px !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.08),
    0 16px 48px rgba(0, 0, 0, 0.06) !important;
}

.dark [role="tooltip"],
.dark [data-state="open"][data-side] {
  background: rgba(22, 22, 30, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.2),
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 16px 48px rgba(0, 0, 0, 0.2) !important;
}

/* ===== Dialogs/Modals — floating glass panel ===== */
[role="dialog"] {
  border-radius: 20px !important;
  backdrop-filter: blur(24px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.06),
    0 16px 48px rgba(0, 0, 0, 0.1),
    0 32px 80px rgba(108, 92, 231, 0.08) !important;
  animation: subtleFloat 4s ease-in-out infinite !important;
}

.dark [role="dialog"] {
  background: rgba(18, 18, 26, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.3),
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 32px 80px rgba(124, 106, 239, 0.1) !important;
}

/* Dialog backdrop — blurred overlay */
[role="dialog"] ~ [data-state],
[class*="overlay"],
[class*="Overlay"] {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* ===== Badges & Tags — glass pills ===== */
[class*="badge"],
[class*="Badge"] {
  font-weight: 600 !important;
  border-radius: 20px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 3px 10px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

/* ===== Links ===== */
a {
  text-decoration: none !important;
  transition: all 200ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}

a:hover {
  color: #6c5ce7 !important;
}
.dark a:hover {
  color: #a78bfa !important;
}

/* ===== Selection — purple glow ===== */
::selection {
  background-color: rgba(108, 92, 231, 0.25) !important;
  color: inherit !important;
}
.dark ::selection {
  background-color: rgba(124, 106, 239, 0.3) !important;
}

/* ===== Dividers — gradient line ===== */
hr, [role="separator"] {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(108, 92, 231, 0.15), transparent) !important;
}

.dark hr, .dark [role="separator"] {
  background: linear-gradient(90deg, transparent, rgba(124, 106, 239, 0.2), transparent) !important;
}

/* ===== Code blocks — dark glass ===== */
code, pre {
  font-size: 0.875em !important;
  border-radius: 10px !important;
}

code:not(pre code) {
  background: rgba(108, 92, 231, 0.08) !important;
  color: #6c5ce7 !important;
  padding: 0.2em 0.5em !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
}

.dark code:not(pre code) {
  background: rgba(124, 106, 239, 0.15) !important;
  color: #a78bfa !important;
}

pre {
  background: rgba(0, 0, 0, 0.03) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.dark pre {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* ===== Images & Avatars — 3D ring ===== */
img[class*="avatar"],
img[class*="Avatar"],
[class*="avatar"] img,
[class*="Avatar"] img {
  border-radius: 50% !important;
  box-shadow:
    0 0 0 2px rgba(108, 92, 231, 0.2),
    0 2px 8px rgba(108, 92, 231, 0.15) !important;
  transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}

img[class*="avatar"]:hover,
img[class*="Avatar"]:hover,
[class*="avatar"]:hover img,
[class*="Avatar"]:hover img {
  box-shadow:
    0 0 0 3px rgba(108, 92, 231, 0.3),
    0 4px 16px rgba(108, 92, 231, 0.2) !important;
  transform: scale(1.05) !important;
}

/* ===== Progress bars — gradient glow ===== */
[role="progressbar"] > *,
progress::-webkit-progress-value {
  background: linear-gradient(90deg, #6c5ce7, #38bdf8, #6c5ce7) !important;
  background-size: 200% auto !important;
  animation: shimmer 3s linear infinite !important;
  border-radius: 999px !important;
  box-shadow: 0 0 12px rgba(108, 92, 231, 0.3) !important;
}

/* ===== Tabs — underline glow style ===== */
[role="tablist"] {
  border-bottom: 1px solid var(--border) !important;
}

[role="tab"][data-state="active"],
[role="tab"][aria-selected="true"] {
  color: #6c5ce7 !important;
  box-shadow: inset 0 -2px 0 #6c5ce7 !important;
}

.dark [role="tab"][data-state="active"],
.dark [role="tab"][aria-selected="true"] {
  color: #a78bfa !important;
  box-shadow: inset 0 -2px 0 #a78bfa !important;
}

/* ===== Switches & Toggles ===== */
[role="switch"][data-state="checked"],
[role="switch"][aria-checked="true"] {
  background: linear-gradient(135deg, #6c5ce7, #7c6aef) !important;
  box-shadow: 0 0 12px rgba(108, 92, 231, 0.3) !important;
}

/* ===== Notification dots / indicators ===== */
[class*="dot"],
[class*="indicator"] {
  box-shadow: 0 0 8px currentColor !important;
}

/* ===== Smooth global transition ===== */
*, *::before, *::after {
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1) !important;
}