/* Wrangler Admin Theme — Dark Pink "Girly" Theme for DaisyUI 5 */

/* Custom theme definition (works with CDN, no build step) */
[data-theme="wrangler"] {
  color-scheme: dark;

  /* Base colors — deep dark with pink undertone */
  --color-base-100: oklch(20% 0.02 320);
  --color-base-200: oklch(16% 0.02 320);
  --color-base-300: oklch(13% 0.03 320);
  --color-base-content: oklch(90% 0.02 330);

  /* Primary — hot pink */
  --color-primary: oklch(65% 0.28 340);
  --color-primary-content: oklch(98% 0.01 340);

  /* Secondary — purple-pink */
  --color-secondary: oklch(55% 0.2 300);
  --color-secondary-content: oklch(95% 0.01 300);

  /* Accent — soft rose */
  --color-accent: oklch(75% 0.15 350);
  --color-accent-content: oklch(15% 0.02 350);

  /* Neutral */
  --color-neutral: oklch(25% 0.03 320);
  --color-neutral-content: oklch(85% 0.02 320);

  /* Status colors */
  --color-info: oklch(65% 0.15 250);
  --color-info-content: oklch(98% 0.01 250);
  --color-success: oklch(70% 0.2 160);
  --color-success-content: oklch(15% 0.02 160);
  --color-warning: oklch(75% 0.15 80);
  --color-warning-content: oklch(15% 0.02 80);
  --color-error: oklch(60% 0.25 20);
  --color-error-content: oklch(98% 0.01 20);
}

/* ============================================================
   Gradient Text & Typography
   ============================================================ */

/* Gradient text for page titles */
.title-gradient {
  background: linear-gradient(135deg, oklch(65% 0.28 340), oklch(75% 0.15 350), oklch(55% 0.2 300));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Gradient text for stat values */
.stat-value-gradient {
  background: linear-gradient(135deg, oklch(85% 0.05 340), oklch(90% 0.02 330));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   Girly Accents & Flair
   ============================================================ */

/* Pink glow on focused inputs */
[data-theme="wrangler"] .input:focus,
[data-theme="wrangler"] .select:focus,
[data-theme="wrangler"] .textarea:focus,
[data-theme="wrangler"] .checkbox:focus {
  box-shadow: 0 0 0 2px oklch(65% 0.28 340 / 0.3), 0 0 15px oklch(65% 0.28 340 / 0.15);
  border-color: oklch(65% 0.28 340 / 0.5);
}

/* Toggle switch glow when checked */
[data-theme="wrangler"] .toggle:checked {
  box-shadow: 0 0 10px oklch(65% 0.28 340 / 0.4);
}

/* Heart list markers for sidebar nav */
.nav-hearts li::marker {
  content: "\2665  ";
  color: oklch(65% 0.28 340);
}

/* Sidebar nav link transitions */
.nav-hearts a {
  transition: all 0.2s ease;
  border-radius: 0.5rem;
}

.nav-hearts a:hover:not(.sidebar-active) {
  background: oklch(65% 0.28 340 / 0.08);
  box-shadow: 0 0 15px oklch(65% 0.28 340 / 0.1);
}

/* Sparkle dividers */
.divider-sparkle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: oklch(65% 0.28 340 / 0.5);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
}

.divider-sparkle::before,
.divider-sparkle::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    oklch(65% 0.28 340 / 0.3),
    oklch(55% 0.2 300 / 0.2),
    transparent
  );
}

/* Sparkle animation for buttons */
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(180deg); }
}

.btn-sparkle {
  position: relative;
  overflow: hidden;
}

.btn-sparkle::after {
  content: "\2728";
  position: absolute;
  top: -2px;
  right: -2px;
  font-size: 0.7rem;
  animation: sparkle 2s ease-in-out infinite;
  pointer-events: none;
}

/* Sparkle float animation for decorative elements */
@keyframes sparkle-float {
  0%, 100% { opacity: 0.4; transform: translateY(0) scale(1); }
  50% { opacity: 1; transform: translateY(-3px) scale(1.1); }
}

.sparkle-icon {
  display: inline-block;
  animation: sparkle-float 2s ease-in-out infinite;
}

/* ============================================================
   Card Effects
   ============================================================ */

@keyframes border-shimmer {
  0% { border-color: oklch(65% 0.28 340 / 0.15); }
  50% { border-color: oklch(55% 0.2 300 / 0.25); }
  100% { border-color: oklch(65% 0.28 340 / 0.15); }
}

/* Pink glow + animated shimmer on cards */
.card-glow {
  box-shadow: 0 0 20px oklch(65% 0.28 340 / 0.08);
  border-color: oklch(65% 0.28 340 / 0.12);
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
  animation: border-shimmer 4s ease-in-out infinite;
}

.card-glow:hover {
  box-shadow: 0 0 30px oklch(65% 0.28 340 / 0.2), 0 0 60px oklch(55% 0.2 300 / 0.05);
  transform: translateY(-1px);
}

/* Status-dependent card glow variants */
.card-glow-success {
  box-shadow: 0 0 20px oklch(70% 0.2 160 / 0.08);
  border-color: oklch(70% 0.2 160 / 0.12);
}

.card-glow-error {
  box-shadow: 0 0 20px oklch(60% 0.25 20 / 0.08);
  border-color: oklch(60% 0.25 20 / 0.12);
}

/* Stat card gradient accent borders */
.stat-pink {
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, oklch(65% 0.28 340), oklch(75% 0.15 350)) 1;
}

.stat-purple {
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, oklch(55% 0.2 300), oklch(65% 0.28 340)) 1;
}

.stat-rose {
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, oklch(75% 0.15 350), oklch(55% 0.2 300)) 1;
}

/* ============================================================
   Buttons
   ============================================================ */

/* Gradient primary buttons */
[data-theme="wrangler"] .btn-primary {
  background: linear-gradient(135deg, oklch(65% 0.28 340), oklch(55% 0.22 310));
  border: none;
  box-shadow: 0 0 15px oklch(65% 0.28 340 / 0.3);
  transition: all 0.2s ease;
}

[data-theme="wrangler"] .btn-primary:hover {
  background: linear-gradient(135deg, oklch(70% 0.28 340), oklch(60% 0.22 310));
  box-shadow: 0 0 25px oklch(65% 0.28 340 / 0.5);
  transform: translateY(-1px);
}

/* ============================================================
   Badges
   ============================================================ */

[data-theme="wrangler"] .badge-success {
  box-shadow: 0 0 8px oklch(70% 0.2 160 / 0.3);
}

[data-theme="wrangler"] .badge-error {
  box-shadow: 0 0 8px oklch(60% 0.25 20 / 0.3);
}

[data-theme="wrangler"] .badge-primary {
  box-shadow: 0 0 8px oklch(65% 0.28 340 / 0.3);
}

[data-theme="wrangler"] .badge-warning {
  box-shadow: 0 0 8px oklch(75% 0.15 80 / 0.3);
}

/* ============================================================
   Tables
   ============================================================ */

[data-theme="wrangler"] .table tbody tr {
  transition: background 0.15s ease;
}

[data-theme="wrangler"] .table tbody tr:hover {
  background: oklch(65% 0.28 340 / 0.04) !important;
}

[data-theme="wrangler"] .table thead tr {
  border-bottom: 1px solid oklch(65% 0.28 340 / 0.15);
}

/* ============================================================
   Modals
   ============================================================ */

[data-theme="wrangler"] .modal-backdrop {
  backdrop-filter: blur(4px);
  background: oklch(10% 0.05 320 / 0.7);
}

[data-theme="wrangler"] .modal-box {
  box-shadow: 0 0 40px oklch(65% 0.28 340 / 0.15), 0 0 80px oklch(55% 0.2 300 / 0.05);
}

/* ============================================================
   Sidebar
   ============================================================ */

/* Sidebar gradient background */
[data-theme="wrangler"] .drawer-side aside {
  background: linear-gradient(180deg, oklch(18% 0.03 320), oklch(14% 0.04 310));
}

/* Active nav item with glow */
.sidebar-active {
  background: oklch(65% 0.28 340 / 0.15);
  border-right: 2px solid oklch(65% 0.28 340);
  color: oklch(65% 0.28 340);
  box-shadow: inset 0 0 20px oklch(65% 0.28 340 / 0.08), 0 0 15px oklch(65% 0.28 340 / 0.1);
}

/* Logo border gradient */
.sidebar-logo-border {
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, oklch(65% 0.28 340 / 0.3), transparent) 1;
}

/* Sidebar footer decoration */
.sidebar-footer {
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: oklch(65% 0.28 340 / 0.25);
  text-align: center;
}

/* ============================================================
   Main Content Area
   ============================================================ */

/* Subtle background gradient */
[data-theme="wrangler"] .drawer-content {
  background: linear-gradient(160deg, oklch(18% 0.015 320), oklch(20% 0.02 330), oklch(17% 0.025 310));
}

/* Page entrance animation */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-enter {
  animation: fade-up 0.3s ease-out;
}

/* ============================================================
   Empty States
   ============================================================ */

.empty-state svg {
  filter: drop-shadow(0 0 10px oklch(65% 0.28 340 / 0.2));
}

.empty-state p {
  color: oklch(65% 0.28 340 / 0.5);
}

/* ============================================================
   Avatar Glow
   ============================================================ */

.avatar-glow .avatar > div {
  box-shadow: 0 0 12px oklch(65% 0.28 340 / 0.4), 0 0 24px oklch(55% 0.2 300 / 0.15);
}

/* ============================================================
   Flash messages
   ============================================================ */

@keyframes flash-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.flash-message {
  animation: flash-in 0.3s ease-out;
  border-left: 3px solid transparent;
}

.flash-message.alert-success {
  border-image: linear-gradient(180deg, oklch(70% 0.2 160), oklch(65% 0.15 180)) 1;
}

.flash-message.alert-error {
  border-image: linear-gradient(180deg, oklch(60% 0.25 20), oklch(55% 0.2 0)) 1;
}

.flash-message.alert-warning {
  border-image: linear-gradient(180deg, oklch(75% 0.15 80), oklch(70% 0.12 60)) 1;
}

.flash-message.alert-info {
  border-image: linear-gradient(180deg, oklch(65% 0.15 250), oklch(60% 0.12 270)) 1;
}

/* ============================================================
   Splash Page — Cow Herd Animation
   ============================================================ */

@keyframes drift {
  0% {
    transform: translateX(110vw);
  }
  100% {
    transform: translateX(-40vw);
  }
}

@keyframes drift-reverse {
  0% {
    transform: translateX(-40vw);
  }
  100% {
    transform: translateX(110vw);
  }
}

.cow {
  position: fixed;
  white-space: pre;
  font-family: monospace;
  color: oklch(90% 0.02 330 / var(--cow-opacity, 0.25));
  animation: drift var(--cow-speed, 25s) linear infinite;
  animation-delay: var(--cow-delay, 0s);
  top: var(--cow-top, 50%);
  font-size: var(--cow-size, 0.6rem);
  z-index: 0;
  pointer-events: none;
  line-height: 1.1;
}

/* Reverse direction — applied to ~50% of cows */
.cow-reverse {
  animation-name: drift-reverse;
}

/* --- Funky cow vibe animations --- */

/* Disco cow: color-cycling glow */
@keyframes disco-pulse {
  0%   { color: oklch(75% 0.3 340 / var(--cow-opacity)); text-shadow: 0 0 8px oklch(65% 0.28 340 / 0.4); }
  25%  { color: oklch(75% 0.3 290 / var(--cow-opacity)); text-shadow: 0 0 8px oklch(55% 0.2 290 / 0.4); }
  50%  { color: oklch(75% 0.3 200 / var(--cow-opacity)); text-shadow: 0 0 8px oklch(65% 0.15 200 / 0.4); }
  75%  { color: oklch(75% 0.3 100 / var(--cow-opacity)); text-shadow: 0 0 8px oklch(75% 0.15 100 / 0.4); }
  100% { color: oklch(75% 0.3 340 / var(--cow-opacity)); text-shadow: 0 0 8px oklch(65% 0.28 340 / 0.4); }
}

.cow-disco {
  animation: drift var(--cow-speed, 25s) linear infinite,
             disco-pulse 3s ease-in-out infinite;
  animation-delay: var(--cow-delay, 0s);
}

/* Party cow: wiggly excitement */
@keyframes party-wiggle {
  0%, 100% { transform: translateX(var(--drift-x, 0)) rotate(0deg); }
  25%      { transform: translateX(var(--drift-x, 0)) rotate(3deg) translateY(-4px); }
  75%      { transform: translateX(var(--drift-x, 0)) rotate(-3deg) translateY(4px); }
}

.cow-party {
  animation: drift var(--cow-speed, 25s) linear infinite,
             party-wiggle 0.8s ease-in-out infinite;
  animation-delay: var(--cow-delay, 0s);
}

/* Flip cow: upside-down and proud */
.cow-flip {
  transform-origin: center;
  filter: drop-shadow(0 0 6px oklch(55% 0.2 300 / 0.3));
}

/* Wobble cow: side-to-side swagger */
@keyframes wobble {
  0%, 100% { transform: translateX(var(--drift-x, 0)) skewX(0deg); }
  25%      { transform: translateX(var(--drift-x, 0)) skewX(5deg); }
  75%      { transform: translateX(var(--drift-x, 0)) skewX(-5deg); }
}

.cow-wobble {
  animation: drift var(--cow-speed, 25s) linear infinite,
             wobble 2s ease-in-out infinite;
  animation-delay: var(--cow-delay, 0s);
}

/* Ghost cow: fading in and out eerily */
@keyframes ghostfade {
  0%, 100% { opacity: var(--cow-opacity, 0.2); filter: blur(0px); }
  50%      { opacity: calc(var(--cow-opacity, 0.2) * 0.3); filter: blur(2px); }
}

.cow-ghost {
  animation: drift var(--cow-speed, 25s) linear infinite,
             ghostfade 4s ease-in-out infinite;
  animation-delay: var(--cow-delay, 0s);
}

/* Bounce cow: hoppy little baby */
@keyframes bounce-hop {
  0%, 100% { transform: translateX(var(--drift-x, 0)) translateY(0); }
  50%      { transform: translateX(var(--drift-x, 0)) translateY(-12px); }
}

.cow-bounce {
  animation: drift var(--cow-speed, 25s) linear infinite,
             bounce-hop 0.6s ease-in-out infinite;
  animation-delay: var(--cow-delay, 0s);
}

/* Rainbow cow: full hue rotation */
@keyframes rainbow-shift {
  0%   { filter: hue-rotate(0deg) brightness(1.2); }
  100% { filter: hue-rotate(360deg) brightness(1.2); }
}

.cow-rainbow {
  animation: drift var(--cow-speed, 25s) linear infinite,
             rainbow-shift 6s linear infinite;
  animation-delay: var(--cow-delay, 0s);
  color: oklch(70% 0.25 340 / var(--cow-opacity));
}

/* Fancy cow: gentle bob with a warm glow */
@keyframes fancy-bob {
  0%, 100% { transform: translateX(var(--drift-x, 0)) translateY(0) rotate(-1deg); }
  50%      { transform: translateX(var(--drift-x, 0)) translateY(-3px) rotate(1deg); }
}

.cow-fancy {
  animation: drift var(--cow-speed, 25s) linear infinite,
             fancy-bob 3s ease-in-out infinite;
  animation-delay: var(--cow-delay, 0s);
  text-shadow: 0 0 12px oklch(75% 0.15 60 / 0.3);
}

/* Float cow: dreamy slow levitation */
@keyframes float-up {
  0%, 100% { transform: translateX(var(--drift-x, 0)) translateY(0); }
  50%      { transform: translateX(var(--drift-x, 0)) translateY(-8px); }
}

.cow-float {
  animation: drift var(--cow-speed, 25s) linear infinite,
             float-up 4s ease-in-out infinite;
  animation-delay: var(--cow-delay, 0s);
  text-shadow: 0 0 10px oklch(65% 0.28 340 / 0.25);
}

/* Fast cow: zooms across quicker, slight tilt */
.cow-fast {
  transform: skewX(-8deg);
  filter: drop-shadow(4px 0 2px oklch(55% 0.2 300 / 0.2));
}

/* Reverse-direction overrides for vibe cows (swap drift → drift-reverse) */
.cow-reverse.cow-disco {
  animation: drift-reverse var(--cow-speed, 25s) linear infinite,
             disco-pulse 3s ease-in-out infinite;
  animation-delay: var(--cow-delay, 0s);
}
.cow-reverse.cow-party {
  animation: drift-reverse var(--cow-speed, 25s) linear infinite,
             party-wiggle 0.8s ease-in-out infinite;
  animation-delay: var(--cow-delay, 0s);
}
.cow-reverse.cow-wobble {
  animation: drift-reverse var(--cow-speed, 25s) linear infinite,
             wobble 2s ease-in-out infinite;
  animation-delay: var(--cow-delay, 0s);
}
.cow-reverse.cow-ghost {
  animation: drift-reverse var(--cow-speed, 25s) linear infinite,
             ghostfade 4s ease-in-out infinite;
  animation-delay: var(--cow-delay, 0s);
}
.cow-reverse.cow-bounce {
  animation: drift-reverse var(--cow-speed, 25s) linear infinite,
             bounce-hop 0.6s ease-in-out infinite;
  animation-delay: var(--cow-delay, 0s);
}
.cow-reverse.cow-rainbow {
  animation: drift-reverse var(--cow-speed, 25s) linear infinite,
             rainbow-shift 6s linear infinite;
  animation-delay: var(--cow-delay, 0s);
}
.cow-reverse.cow-fancy {
  animation: drift-reverse var(--cow-speed, 25s) linear infinite,
             fancy-bob 3s ease-in-out infinite;
  animation-delay: var(--cow-delay, 0s);
}
.cow-reverse.cow-float {
  animation: drift-reverse var(--cow-speed, 25s) linear infinite,
             float-up 4s ease-in-out infinite;
  animation-delay: var(--cow-delay, 0s);
}

/* Splash login card */
.splash-card {
  position: relative;
  z-index: 10;
  backdrop-filter: blur(12px);
  background: oklch(16% 0.02 320 / 0.85);
  border: 1px solid oklch(65% 0.28 340 / 0.2);
}

.splash-card:hover {
  border-color: oklch(65% 0.28 340 / 0.4);
}

/* Radial glow behind splash card */
.splash-glow {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(65% 0.28 340 / 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   HTMX loading indicator
   ============================================================ */

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: inline-block;
}

.htmx-request.htmx-indicator {
  display: inline-block;
}

/* Pulse animation for loading */
@keyframes pulse-pink {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.loading-pulse {
  animation: pulse-pink 1.5s ease-in-out infinite;
  color: oklch(65% 0.28 340);
}

/* ============================================================
   Scrollbar styling
   ============================================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: oklch(13% 0.03 320);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, oklch(35% 0.08 340), oklch(25% 0.05 320));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, oklch(45% 0.12 340), oklch(35% 0.08 320));
}