/* Orange Cat LMS - Modern Theme System & Component Styles */

.hidden {
  display: none !important;
}

:root, [data-theme="orange-cat"] {
  --primary: #f97316;
  --primary-hover: #ea580c;
  --primary-light: #ffedd5;
  --primary-glow: rgba(249, 115, 22, 0.25);
  --bg-main: #fcfaf8;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;
  --border: #f1ebe5;
  --border-strong: #e5ddd4;
  --text-main: #1f2937;
  --text-muted: #6b7280;
  --text-dim: #9ca3af;
  --accent: #fb923c;
  --badge-bg: #fff7ed;
  --badge-text: #c2410c;
  --card-shadow: 0 4px 20px -2px rgba(249, 115, 22, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
}

[data-theme="midnight-cat"] {
  --primary: #ff8a3d;
  --primary-hover: #ff7014;
  --primary-light: #2a1b12;
  --primary-glow: rgba(255, 138, 61, 0.35);
  --bg-main: #0b0f17;
  --bg-card: #131a26;
  --bg-sidebar: #0f1520;
  --border: #1f293d;
  --border-strong: #2c3a54;
  --text-main: #f3f4f6;
  --text-muted: #9ca3af;
  --text-dim: #64748b;
  --accent: #fb923c;
  --badge-bg: #271a13;
  --badge-text: #fdba74;
  --card-shadow: 0 4px 25px -2px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 138, 61, 0.08);
}

[data-theme="calico-matcha"] {
  --primary: #15803d;
  --primary-hover: #166534;
  --primary-light: #dcfce7;
  --primary-glow: rgba(21, 128, 61, 0.25);
  --bg-main: #f6f8f5;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;
  --border: #e2e8df;
  --border-strong: #cbd5c5;
  --text-main: #1e2920;
  --text-muted: #536456;
  --text-dim: #88998b;
  --accent: #ea580c;
  --badge-bg: #f0fdf4;
  --badge-text: #166534;
  --card-shadow: 0 4px 20px -2px rgba(21, 128, 61, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
}

[data-theme="ocean-breeze"] {
  --primary: #0284c7;
  --primary-hover: #0369a1;
  --primary-light: #e0f2fe;
  --primary-glow: rgba(2, 132, 199, 0.25);
  --bg-main: #f0f7fb;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;
  --border: #e1eef6;
  --border-strong: #cbe0ef;
  --text-main: #0f172a;
  --text-muted: #475569;
  --text-dim: #94a3b8;
  --accent: #f97316;
  --badge-bg: #f0f9ff;
  --badge-text: #0369a1;
  --card-shadow: 0 4px 20px -2px rgba(2, 132, 199, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
}

[data-theme="sunset-sakura"] {
  --primary: #e11d48;
  --primary-hover: #be123c;
  --primary-light: #ffe4e6;
  --primary-glow: rgba(225, 29, 72, 0.25);
  --bg-main: #fdf6f7;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;
  --border: #fae4e8;
  --border-strong: #f3cbd2;
  --text-main: #27171a;
  --text-muted: #6b4d53;
  --text-dim: #a17f86;
  --accent: #fb923c;
  --badge-bg: #fff1f2;
  --badge-text: #9f1239;
  --card-shadow: 0 4px 20px -2px rgba(225, 29, 72, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
}

body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Glass & Card styles */
.cat-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-card:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 30px -4px var(--primary-glow);
}

.cat-sidebar {
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border);
}

.cat-btn-primary {
  background-color: var(--primary);
  color: #ffffff;
  box-shadow: 0 2px 10px var(--primary-glow);
  transition: all 0.2s ease;
}

.cat-btn-primary:hover {
  background-color: var(--primary-hover);
  transform: translateY(-1px);
}

.cat-btn-secondary {
  background-color: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-strong);
  transition: all 0.2s ease;
}

.cat-btn-secondary:hover {
  background-color: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

/* Presence badges */
.badge-present {
  background-color: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.badge-remote {
  background-color: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}
.badge-on_leave {
  background-color: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}
.badge-offline {
  background-color: #f3f4f6;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Pulsing present dot */
.pulse-green {
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: pulseGreenAnim 2s infinite;
}

@keyframes pulseGreenAnim {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

/* Cute cat paw animation */
.cat-paw-bounce {
  animation: pawWiggle 3s ease-in-out infinite alternate;
}

@keyframes pawWiggle {
  0% { transform: rotate(-5deg) scale(1); }
  50% { transform: rotate(5deg) scale(1.05); }
  100% { transform: rotate(-5deg) scale(1); }
}

/* Modal Backdrop Animation */
.modal-enter {
  opacity: 0;
  transform: scale(0.96) translateY(10px);
}
.modal-active {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

/* ================= SLEEPING & NAUGHTY CAT ANIMATIONS ================= */

/* Gentle sleeping tummy breathing */
@keyframes catSleepBreathe {
  0%, 100% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.03) translateY(-2px);
  }
}

.cat-sleeping-breathe {
  animation: catSleepBreathe 3.2s ease-in-out infinite;
  transform-origin: bottom center;
}

/* Floating Zzz letters */
@keyframes zzzFloatUp {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.6);
  }
  30% {
    opacity: 0.95;
    transform: translate(4px, -12px) scale(0.9);
  }
  70% {
    opacity: 0.7;
    transform: translate(-3px, -24px) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(6px, -38px) scale(1.3);
  }
}

.zzz-particle-1 {
  animation: zzzFloatUp 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0s;
}
.zzz-particle-2 {
  animation: zzzFloatUp 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 1.1s;
}
.zzz-particle-3 {
  animation: zzzFloatUp 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 2.2s;
}

/* Soft tail wag */
@keyframes catTailWag {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(16deg);
  }
  75% {
    transform: rotate(-14deg);
  }
}

.cat-tail-wag {
  animation: catTailWag 4s ease-in-out infinite;
  transform-origin: 15% 50%;
}

/* Naughty paw swatting */
@keyframes naughtySwat {
  0%, 75%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  80% {
    transform: rotate(-25deg) translateY(5px);
  }
  86% {
    transform: rotate(20deg) translateY(-4px);
  }
  92% {
    transform: rotate(-10deg) translateY(2px);
  }
}

.cat-paw-swat {
  animation: naughtySwat 4.5s ease-in-out infinite;
  transform-origin: top right;
}

/* Tipping over object animation */
@keyframes tipOver {
  0%, 78%, 100% {
    transform: rotate(0deg);
  }
  82% {
    transform: rotate(-35deg) translateY(4px);
  }
  92% {
    transform: rotate(-28deg) translateY(3px);
  }
}

.item-tipped {
  animation: tipOver 4.5s ease-in-out infinite;
  transform-origin: bottom left;
}

/* Bouncing yarn roll */
@keyframes yarnBatRoll {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  20% {
    transform: translateX(12px) rotate(45deg);
  }
  50% {
    transform: translateX(-8px) rotate(-30deg);
  }
  80% {
    transform: translateX(6px) rotate(20deg);
  }
}

.yarn-ball-bounce {
  animation: yarnBatRoll 3.8s ease-in-out infinite;
}

/* Pop speech bubble */
.cat-speech-bubble {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.cat-speech-bubble:hover {
  transform: scale(1.06) translateY(-2px);
}

/* ================= ROAMING SCREEN CAT MASCOT (15-SECOND DRIFT) ================= */
#cat-zone-top {
  transition: top 1.4s cubic-bezier(0.34, 1.25, 0.64, 1), 
              left 1.4s cubic-bezier(0.34, 1.25, 0.64, 1), 
              right 1.4s cubic-bezier(0.34, 1.25, 0.64, 1), 
              transform 1.4s cubic-bezier(0.34, 1.25, 0.64, 1);
  will-change: top, left, transform;
}

@keyframes catRoamBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  25% {
    transform: translateY(-10px) scale(1.06) rotate(-4deg);
  }
  50% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  75% {
    transform: translateY(-7px) scale(1.04) rotate(4deg);
  }
}

.cat-is-roaming {
  animation: catRoamBounce 0.7s ease-in-out 2 !important;
}