/* Digital HR - Custom Styles — Dark Theme */

/* Hide Alpine.js elements before load */
[x-cloak] {
    display: none !important;
}

/* Smooth page transitions */
[x-show] {
    transition: opacity 0.15s ease-in-out;
}

/* Custom scrollbar (dark) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.2);
}

/* Toast slide-up animation */
@keyframes slideUp {
    from { transform: translateY(1rem); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.animate-slide-up {
    animation: slideUp 0.3s ease-out;
}

/* Sidebar active indicator */
.sidebar-active { position: relative; }
.sidebar-active::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 60%;
    background: #818cf8;
    border-radius: 0 2px 2px 0;
}

/* Pulse animation for running searches */
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.pulse-dot { animation: pulse-dot 1.5s ease-in-out infinite; }

/* Card hover effect (dark) */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Score badge colors — keep as-is, they have good contrast */
.score-high { background: #dcfce7; color: #15803d; }
.score-medium { background: #fef9c3; color: #a16207; }
.score-low { background: #fee2e2; color: #dc2626; }

/* Input focus ring */
input:focus, select:focus, textarea:focus {
    outline: none;
}

/* Modal backdrop */
.modal-backdrop {
    backdrop-filter: blur(4px);
}

/* Loading spinner (dark) */
.spinner {
    border: 2px solid rgba(255,255,255,0.1);
    border-top-color: #818cf8;
    border-radius: 50%;
    width: 20px; height: 20px;
    animation: spin 0.6s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}


/* ═══════════════════════════════════════════════════════
   DARK THEME OVERRIDES
   Remap Tailwind light classes to dark palette
   ═══════════════════════════════════════════════════════ */

/* ─── Body & Root ─── */
body.bg-gray-50,
body {
    background: #09090b !important;
    color: #e4e4e7 !important;
}

/* Loading screen */
#app-loading {
    background: #09090b !important;
    color: #a1a1aa !important;
}

/* ─── Sidebar ─── */
aside.bg-gray-900 {
    background: #0c0c0f !important;
    border-right: 1px solid rgba(255,255,255,0.06);
}
aside .border-gray-700 {
    border-color: rgba(255,255,255,0.08) !important;
}
aside .bg-brand-500,
aside .bg-blue-500 {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
}
aside button.bg-gray-700\/70,
aside button[class*="bg-gray-700"] {
    background: rgba(99,102,241,0.15) !important;
    color: #c7d2fe !important;
}
aside button:hover {
    background: rgba(99,102,241,0.1) !important;
}
aside .text-gray-300 {
    color: #71717a !important;
}
aside .text-gray-400 {
    color: #52525b !important;
}
aside .text-gray-600 {
    color: #3f3f46 !important;
}

/* ─── Main Content Area ─── */
main.overflow-auto {
    background: #09090b !important;
}

/* Top header bar */
header.bg-white {
    background: rgba(9,9,11,0.9) !important;
    backdrop-filter: blur(12px);
    border-color: rgba(255,255,255,0.06) !important;
}
header .text-gray-500 {
    color: #71717a !important;
}
header h2.text-xl {
    color: #fafafa !important;
}

/* ─── Cards (bg-white) ─── */
.bg-white {
    background: rgba(24,24,27,0.7) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
/* Make sure nested bg-white doesn't double-darken */
.bg-white .bg-white {
    background: rgba(39,39,42,0.6) !important;
}

/* ─── Borders ─── */
.border-gray-200,
.border-gray-100 {
    border-color: rgba(255,255,255,0.08) !important;
}
.border-gray-300 {
    border-color: rgba(255,255,255,0.12) !important;
}

/* ─── Text Colors ─── */
.text-gray-900 {
    color: #fafafa !important;
}
.text-gray-800 {
    color: #e4e4e7 !important;
}
.text-gray-700 {
    color: #d4d4d8 !important;
}
.text-gray-600 {
    color: #a1a1aa !important;
}
main .text-gray-500 {
    color: #71717a !important;
}
main .text-gray-400 {
    color: #52525b !important;
}
.text-gray-300 {
    color: #52525b !important;
}

/* ─── Backgrounds ─── */
.bg-gray-50 {
    background: rgba(24,24,27,0.5) !important;
}
.bg-gray-100 {
    background: rgba(39,39,42,0.6) !important;
}
.bg-gray-200 {
    background: rgba(39,39,42,0.8) !important;
}

/* ─── Inputs, Selects, Textareas ─── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
    background: rgba(24,24,27,0.8) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #e4e4e7 !important;
}
input::placeholder,
textarea::placeholder {
    color: #52525b !important;
}
input:focus,
select:focus,
textarea:focus {
    border-color: rgba(99,102,241,0.5) !important;
    box-shadow: 0 0 0 2px rgba(99,102,241,0.2) !important;
}
/* Select option dropdowns */
select option {
    background: #18181b;
    color: #e4e4e7;
}

/* Checkbox */
input[type="checkbox"] {
    background: rgba(24,24,27,0.8) !important;
    border-color: rgba(255,255,255,0.2) !important;
}

/* ─── Brand Colors → Indigo ─── */
.bg-brand-600,
.bg-brand-700,
.bg-blue-600 {
    background: linear-gradient(135deg, #6366f1, #7c3aed) !important;
}
.bg-brand-600:hover,
.bg-brand-700:hover,
.bg-blue-600:hover {
    box-shadow: 0 0 20px rgba(99,102,241,0.3) !important;
}
.bg-brand-50 {
    background: rgba(99,102,241,0.12) !important;
}
.bg-brand-100 {
    background: rgba(99,102,241,0.15) !important;
}
.text-brand-600,
.text-brand-700,
.text-brand-800 {
    color: #a5b4fc !important;
}
.hover\:text-brand-800:hover {
    color: #c7d2fe !important;
}
.border-brand-200,
.border-brand-300 {
    border-color: rgba(99,102,241,0.3) !important;
}
.ring-brand-500 {
    --tw-ring-color: rgba(99,102,241,0.4) !important;
}
.ring-brand-200 {
    --tw-ring-color: rgba(99,102,241,0.2) !important;
}

/* ─── Green Buttons ─── */
.bg-green-600 {
    background: linear-gradient(135deg, #059669, #10b981) !important;
}
.bg-green-600:hover {
    box-shadow: 0 0 16px rgba(16,185,129,0.3) !important;
}

/* ─── Purple Buttons ─── */
.bg-purple-600 {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
}
.bg-purple-600:hover {
    box-shadow: 0 0 16px rgba(168,85,247,0.3) !important;
}

/* ─── Status Badges (keep readable on dark) ─── */
.bg-green-100 {
    background: rgba(34,197,94,0.12) !important;
}
.bg-green-50 {
    background: rgba(34,197,94,0.08) !important;
}
.text-green-700,
.text-green-600 {
    color: #4ade80 !important;
}
.bg-red-100 {
    background: rgba(239,68,68,0.12) !important;
}
.bg-red-50 {
    background: rgba(239,68,68,0.08) !important;
}
.text-red-700,
.text-red-600,
.text-red-500 {
    color: #f87171 !important;
}
.bg-yellow-100 {
    background: rgba(234,179,8,0.12) !important;
}
.text-yellow-700 {
    color: #fbbf24 !important;
}
.bg-blue-100 {
    background: rgba(96,165,250,0.12) !important;
}
.bg-blue-50 {
    background: rgba(96,165,250,0.08) !important;
}
.text-blue-700,
.text-blue-600 {
    color: #93c5fd !important;
}
.bg-purple-100 {
    background: rgba(168,85,247,0.12) !important;
}
.text-purple-700 {
    color: #c084fc !important;
}

/* ─── Amber / Warning Badges ─── */
.bg-amber-50 {
    background: rgba(245,158,11,0.08) !important;
}
.bg-amber-100,
.border-amber-100 {
    border-color: rgba(245,158,11,0.15) !important;
    background: rgba(245,158,11,0.08) !important;
}
.text-amber-700,
.text-amber-600 {
    color: #fbbf24 !important;
}

/* ─── Sky / Telegram ─── */
.bg-sky-50 {
    background: rgba(14,165,233,0.08) !important;
}
.border-sky-200 {
    border-color: rgba(14,165,233,0.2) !important;
}
.text-sky-700 {
    color: #38bdf8 !important;
}

/* ─── Teal ─── */
.bg-teal-100 {
    background: rgba(20,184,166,0.12) !important;
}
.text-teal-700 {
    color: #2dd4bf !important;
}

/* ─── Contact info card ─── */
.bg-blue-50\/50 {
    background: rgba(96,165,250,0.06) !important;
}
.border-blue-100 {
    border-color: rgba(96,165,250,0.12) !important;
}

/* ─── Shadow overrides (dark needs subtler shadows) ─── */
.shadow-sm {
    box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.03) !important;
}
.shadow-md,
.hover\:shadow-md:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05) !important;
}
.shadow-lg {
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
.shadow-xl,
.shadow-2xl {
    box-shadow: 0 12px 48px rgba(0,0,0,0.6) !important;
}

/* ─── Search Progress Modal ─── */
.bg-black\/50 {
    background: rgba(0,0,0,0.7) !important;
}

/* ─── Position Modal ─── */
div[x-show="showPositionModal"] .bg-white {
    background: #18181b !important;
    border: 1px solid rgba(255,255,255,0.1);
}
div[x-show="showPositionModal"] .border-gray-100 {
    border-color: rgba(255,255,255,0.08) !important;
}
div[x-show="showPositionModal"] .text-gray-700 {
    color: #a1a1aa !important;
}

/* ─── Activity Widget ─── */
.fixed.bottom-4.right-4 .bg-white {
    background: rgba(24,24,27,0.95) !important;
    backdrop-filter: blur(12px);
    border-color: rgba(255,255,255,0.1) !important;
}
.fixed.bottom-4.right-4 .bg-gray-50 {
    background: rgba(39,39,42,0.8) !important;
}
.fixed.bottom-4.right-4 .text-gray-600 {
    color: #a1a1aa !important;
}
.fixed.bottom-4.right-4 .text-gray-400 {
    color: #52525b !important;
}
.fixed.bottom-4.right-4 .text-gray-700 {
    color: #d4d4d8 !important;
}
.fixed.bottom-4.right-4 .bg-green-50 {
    background: rgba(34,197,94,0.08) !important;
}
.fixed.bottom-4.right-4 .bg-red-50 {
    background: rgba(239,68,68,0.08) !important;
}
/* Active pill button */
.fixed.bottom-4.right-4 button.bg-gray-900 {
    background: linear-gradient(135deg, #6366f1, #7c3aed) !important;
}

/* ─── Search progress log entries ─── */
.bg-green-50.border.border-green-100 {
    background: rgba(34,197,94,0.08) !important;
    border-color: rgba(34,197,94,0.15) !important;
}
.bg-blue-50.border.border-blue-100 {
    background: rgba(96,165,250,0.08) !important;
    border-color: rgba(96,165,250,0.15) !important;
}
.bg-red-50.border.border-red-100 {
    background: rgba(239,68,68,0.08) !important;
    border-color: rgba(239,68,68,0.15) !important;
}
.bg-gray-50.border.border-gray-100 {
    background: rgba(39,39,42,0.5) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* ─── Search log <pre> ─── */
pre.bg-gray-50 {
    background: rgba(24,24,27,0.8) !important;
    color: #a1a1aa !important;
}

/* ─── Skills / Tags ─── */
span.bg-brand-50 {
    background: rgba(99,102,241,0.12) !important;
    color: #a5b4fc !important;
}
span.bg-gray-100.text-gray-600 {
    background: rgba(255,255,255,0.06) !important;
    color: #a1a1aa !important;
}

/* ─── Contact buttons ─── */
a.bg-white.border.border-gray-200 {
    background: rgba(39,39,42,0.6) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #d4d4d8 !important;
}
a.bg-green-50.border.border-green-200 {
    background: rgba(34,197,94,0.1) !important;
    border-color: rgba(34,197,94,0.2) !important;
}
a.bg-sky-50.border.border-sky-200 {
    background: rgba(14,165,233,0.1) !important;
    border-color: rgba(14,165,233,0.2) !important;
}

/* ─── Edit / Delete Buttons ─── */
button.bg-gray-100.text-gray-700 {
    background: rgba(255,255,255,0.06) !important;
    color: #a1a1aa !important;
    border: 1px solid rgba(255,255,255,0.08);
}
button.bg-gray-100.text-gray-700:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #e4e4e7 !important;
}
button.bg-red-50.text-red-600 {
    background: rgba(239,68,68,0.08) !important;
    border: 1px solid rgba(239,68,68,0.12);
}
button.bg-red-50.text-red-600:hover {
    background: rgba(239,68,68,0.15) !important;
}

/* ─── Progress bars ─── */
.bg-gray-100.rounded-full,
.h-2.bg-gray-100,
.h-1.bg-gray-100,
.h-1.bg-gray-200 {
    background: rgba(255,255,255,0.08) !important;
}

/* ─── Hover states for position cards ─── */
.hover\:border-brand-300:hover {
    border-color: rgba(99,102,241,0.4) !important;
}
.group:hover .group-hover\:text-brand-600,
.group:hover .group-hover\:text-brand-500 {
    color: #a5b4fc !important;
}

/* ─── Misc utility overrides ─── */
.hover\:bg-gray-100:hover {
    background: rgba(255,255,255,0.06) !important;
}
.hover\:bg-gray-200:hover {
    background: rgba(255,255,255,0.08) !important;
}
.hover\:bg-gray-50:hover {
    background: rgba(255,255,255,0.04) !important;
}
.hover\:bg-gray-800:hover {
    background: rgba(99,102,241,0.1) !important;
}

/* New/unseen badge */
.bg-red-500.text-white.animate-pulse {
    background: linear-gradient(135deg, #ef4444, #f97316) !important;
}

/* ─── Candidate Selection Ring ─── */
.ring-2.ring-brand-500 {
    box-shadow: 0 0 0 2px rgba(99,102,241,0.5) !important;
}

/* ─── Font smoothing ─── */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}