/*
 * =============================================
 *  MAIN STYLESHEET
 * =============================================
 *  Description: This file contains custom styles for the Recruitment Panel application.
 *               It includes component styling, animations, and a comprehensive theme engine
 *               that uses CSS variables for dynamic theme switching.
 * =============================================
 */

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

/* Base styles and layout */
body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

:root, .theme-default-light {
  --background: 0, 0%, 100%;
  --foreground: 222.2, 84%, 4.9%;
  --card: 0, 0%, 100%;
  --card-foreground: 222.2, 84%, 4.9%;
  --popover: 0, 0%, 100%;
  --popover-foreground: 222.2, 84%, 4.9%;
  --primary: 222.2, 47.4%, 11.2%;
  --primary-foreground: 210, 40%, 98%;
  --secondary: 210, 40%, 96.1%;
  --secondary-foreground: 222.2, 47.4%, 11.2%;
  --muted: 210, 40%, 96.1%;
  --muted-foreground: 215.4, 16.3%, 46.9%;
  --accent: 210, 40%, 96.1%;
  --accent-foreground: 222.2, 47.4%, 11.2%;
  --destructive: 0, 84.2%, 60.2%;
  --destructive-foreground: 210, 40%, 98%;
  --success: 142.1, 76.2%, 36.3%;
  --success-foreground: 210, 40%, 98%;
  --warning: 47.9, 95.8%, 53.1%;
  --warning-foreground: 222.2, 47.4%, 11.2%;
  --border: 214.3, 31.8%, 91.4%;
  --input: 214.3, 31.8%, 91.4%;
  --ring: 222.2, 84%, 4.9%;
  --radius: 0.5rem;
  --chart-1: 222.2, 47.4%, 11.2%;
  --chart-2: 142.1, 76.2%, 36.3%;
  --chart-3: 343.6, 91.4%, 49.8%;
  --chart-4: 37.1, 94.2%, 51.8%;
  --chart-5: 298.1, 94.6%, 47.1%;
}

.dark, .theme-default-dark {
  --background: 222.2, 84%, 4.9%;
  --foreground: 210, 40%, 98%;
  --card: 222.2, 84%, 4.9%;
  --card-foreground: 210, 40%, 98%;
  --popover: 222.2, 84%, 4.9%;
  --popover-foreground: 210, 40%, 98%;
  --primary: 210, 40%, 98%;
  --primary-foreground: 222.2, 47.4%, 11.2%;
  --secondary: 217.2, 32.6%, 17.5%;
  --secondary-foreground: 210, 40%, 98%;
  --muted: 217.2, 32.6%, 17.5%;
  --muted-foreground: 215, 20.2%, 65.1%;
  --accent: 217.2, 32.6%, 17.5%;
  --accent-foreground: 210, 40%, 98%;
  --destructive: 0, 62.8%, 30.6%;
  --destructive-foreground: 210, 40%, 98%;
  --success: 142.1, 70.6%, 45.3%;
  --success-foreground: 210, 40%, 98%;
  --warning: 47.9, 95.8%, 53.1%;
  --warning-foreground: 222.2, 47.4%, 11.2%;
  --border: 217.2, 32.6%, 17.5%;
  --input: 217.2, 32.6%, 17.5%;
  --ring: 212.7, 26.8%, 83.9%;
  --chart-1: 210, 40%, 98%;
  --chart-2: 142.1, 70.6%, 45.3%;
  --chart-3: 343.6, 85.4%, 59.8%;
  --chart-4: 37.1, 90.2%, 61.8%;
  --chart-5: 298.1, 90.6%, 57.1%;
}

/* Theme: Agência Love (Dark) */
.dark.theme-agencia-love-dark {
  --background: 260, 30%, 10%;
  --foreground: 260, 20%, 90%;
  --card: 260, 30%, 12%;
  --card-foreground: 260, 20%, 90%;
  --popover: 260, 30%, 12%;
  --popover-foreground: 260, 20%, 90%;
  --primary: 330, 85%, 60%;
  --primary-foreground: 330, 50%, 10%;
  --secondary: 260, 40%, 25%;
  --secondary-foreground: 260, 20%, 90%;
  --muted: 260, 40%, 25%;
  --muted-foreground: 260, 15%, 60%;
  --accent: 260, 40%, 35%;
  --accent-foreground: 260, 20%, 90%;
  --destructive: 0, 72%, 51%;
  --destructive-foreground: 0, 0%, 100%;
  --success: 142.1, 70.6%, 45.3%;
  --success-foreground: 210, 40%, 98%;
  --warning: 47.9, 95.8%, 53.1%;
  --warning-foreground: 222.2, 47.4%, 11.2%;
  --border: 260, 40%, 20%;
  --input: 260, 40%, 20%;
  --ring: 330, 85%, 70%;
  --chart-1: 330, 85%, 60%;
  --chart-2: 260, 70%, 65%;
  --chart-3: 175, 100%, 50%;
  --chart-4: 37.1, 90.2%, 61.8%;
  --chart-5: 298.1, 90.6%, 57.1%;
}

/* Theme: Deep Indigo (Light) */
.theme-deep-indigo-light {
    --primary: 243, 89%, 67%; --primary-foreground: 255, 100%, 100%;
    --secondary: 239, 55%, 95%; --secondary-foreground: 243, 45%, 30%;
    --accent: 243, 80%, 97%; --accent-foreground: 243, 60%, 40%;
    --background: 240, 67%, 99%; --foreground: 244, 38%, 18%;
    --card: 255, 100%, 100%; --card-foreground: 244, 38%, 18%;
    --muted: 239, 55%, 95%; --muted-foreground: 243, 20%, 45%;
    --border: 239, 30%, 90%; --input: 239, 30%, 90%; --ring: 243, 89%, 67%;
    --chart-1: 243, 89%, 67%; --chart-2: 263, 70%, 55%;
}

/* Theme: Deep Indigo (Dark) */
.dark.theme-deep-indigo-dark {
    --primary: 243, 89%, 72%; --primary-foreground: 243, 20%, 10%;
    --secondary: 244, 33%, 22%; --secondary-foreground: 240, 60%, 95%;
    --accent: 244, 40%, 28%; --accent-foreground: 240, 60%, 95%;
    --background: 245, 42%, 11%; --foreground: 240, 67%, 99%;
    --card: 245, 39%, 15%; --card-foreground: 240, 67%, 99%;
    --muted: 244, 33%, 22%; --muted-foreground: 240, 25%, 65%;
    --border: 244, 33%, 22%; --input: 244, 33%, 22%; --ring: 243, 89%, 72%;
    --chart-1: 243, 89%, 72%; --chart-2: 263, 70%, 65%;
}

/* Theme: Cyber Neon */
.dark.theme-cyber-neon {
    --primary: 175, 100%, 50%; --primary-foreground: 257, 100%, 5%;
    --secondary: 257, 60%, 15%; --secondary-foreground: 175, 80%, 80%;
    --accent: 325, 100%, 50%; --accent-foreground: 325, 100%, 95%;
    --background: 257, 100%, 8%; --foreground: 257, 30%, 90%;
    --card: 257, 80%, 12%; --card-foreground: 257, 30%, 90%;
    --muted: 257, 60%, 15%; --muted-foreground: 257, 20%, 60%;
    --border: 257, 50%, 25%; --input: 257, 50%, 25%; --ring: 175, 100%, 50%;
    --chart-1: 175, 100%, 50%; --chart-2: 325, 100%, 60%;
}

/* Theme: Rose Dream */
.theme-rose-dream {
    --primary: 340, 82%, 61%; --primary-foreground: 0, 0%, 100%;
    --secondary: 345, 60%, 96%; --secondary-foreground: 340, 40%, 20%;
    --accent: 345, 70%, 97%; --accent-foreground: 340, 50%, 30%;
    --background: 0, 0%, 100%; --foreground: 340, 30%, 15%;
    --card: 345, 20%, 99%; --card-foreground: 340, 30%, 15%;
    --muted: 345, 60%, 96%; --muted-foreground: 340, 15%, 45%;
    --border: 345, 40%, 92%; --input: 345, 40%, 92%; --ring: 340, 82%, 61%;
    --chart-1: 340, 82%, 61%; --chart-2: 20, 85%, 65%;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* Custom background for Agência Love theme */
html.theme-agencia-love-dark body {
    background-color: hsl(var(--background)); /* Ensure base color */
    background-image: radial-gradient(circle at 1% 1%, hsla(var(--primary), 0.1), transparent 30%),
                      radial-gradient(circle at 99% 99%, hsla(260, 70%, 65%, 0.15), transparent 40%);
    background-attachment: fixed;
}

/* Custom button style for Agência Love theme */
.theme-agencia-love-dark .bg-primary {
    background-image: linear-gradient(to right, hsl(var(--primary)), hsl(330, 85%, 55%));
    border: none;
    transition: all 0.3s ease;
}

.theme-agencia-love-dark .hover\:bg-primary\/90:hover {
    background-image: linear-gradient(to right, hsl(var(--primary)), hsl(330, 85%, 55%));
    opacity: 0.9;
    box-shadow: 0 0 15px hsla(var(--primary), 0.5);
}

/* =============================================
 *  2. ANIMATIONS & TRANSITIONS
 * ============================================= */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes zoom-in-95 { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .5; } }

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toast-exit {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}


@keyframes bell-shake {
  0%, 100% { transform: rotate(0); }
  10%, 30%, 50%, 70%, 90% { transform: rotate(-10deg); }
  20%, 40%, 60%, 80% { transform: rotate(10deg); }
}

@keyframes slide-down-fade {
  from {
      opacity: 0;
      transform: translateY(-10px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes typing-dot-bounce {
  0%, 80%, 100% {
    transform: scale(0);
  } 40% {
    transform: scale(1.0);
  }
}

.animate-in { animation: fadeIn 0.5s ease-out forwards; }
.fade-in-0 { animation: fadeIn 0.5s ease-out forwards; }
.zoom-in-95 { animation: zoom-in-95 0.3s ease-out forwards; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-bell-shake { animation: bell-shake 0.7s cubic-bezier(.36,.07,.19,.97) both; }


/* =============================================
 *  3. UTILITY & COMPONENT STYLES
 * ============================================= */
.toast-item {
  will-change: transform, opacity;
  animation: toast-enter 0.3s ease-out forwards;
}

.toast-item.toast-exit {
  animation: toast-exit 0.3s ease-in forwards;
}


.notification-preview {
  animation: slide-down-fade 0.4s ease-out forwards;
}

.typing-indicator span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
  margin: 0 2px;
  animation: typing-dot-bounce 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: -0.16s;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: hsl(var(--primary));
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid hsl(var(--background));
  margin-top: -6px; /* Center thumb on track */
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: hsl(var(--primary));
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid hsl(var(--background));
}

.bg-primary { background-color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.hover\:bg-primary\/90:hover { background-color: hsla(var(--primary), 0.9); }

.bg-secondary { background-color: hsl(var(--secondary)); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
.hover\:bg-secondary\/80:hover { background-color: hsla(var(--secondary), 0.8); }

.bg-destructive { background-color: hsl(var(--destructive)); }
.text-destructive-foreground { color: hsl(var(--destructive-foreground)); }
.hover\:bg-destructive\/80:hover { background-color: hsla(var(--destructive), 0.8); }

.bg-success { background-color: hsl(var(--success)); }
.text-success-foreground { color: hsl(var(--success-foreground)); }
.hover\:bg-success\/80:hover { background-color: hsla(var(--success), 0.8); }

.bg-warning { background-color: hsl(var(--warning)); }
.text-warning-foreground { color: hsl(var(--warning-foreground)); }
.hover\:bg-warning\/80:hover { background-color: hsla(var(--warning), 0.8); }

.bg-background { background-color: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }

.bg-card { background-color: hsl(var(--card)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }

.border-border { border-color: hsl(var(--border)); }
.border-input { border-color: hsl(var(--input)); }

.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.hover\:bg-accent:hover { background-color: hsl(var(--accent)); }
.hover\:text-accent-foreground:hover { color: hsl(var(--accent-foreground)); }

.bg-muted { background-color: hsl(var(--muted)); }
.hover\:bg-muted\/50:hover { background-color: hsla(var(--muted), 0.5); }

.rounded-md { border-radius: var(--radius); }
.rounded-lg { border-radius: calc(var(--radius) + 2px); }
.rounded-full { border-radius: 9999px; }

.focus-visible\:ring-ring:focus-visible { --tw-ring-color: hsl(var(--ring)); }
.focus-visible\:ring-2:focus-visible { box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)); }

/* Custom properties for chart colors */
.chart-1 { background-color: hsl(var(--chart-1)); }
.chart-2 { background-color: hsl(var(--chart-2)); }
.chart-3 { background-color: hsl(var(--chart-3)); }
.chart-4 { background-color: hsl(var(--chart-4)); }
.chart-5 { background-color: hsl(var(--chart-5)); }