/* Custom styles for ByndCV */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* Apply Inter font globally */
* {
    font-family: "Inter", sans-serif;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}
select{
    appearance: none !important;
    -webkit-appearance: none !important ;
    -moz-appearance: none;
    appearance: none;
    background: none !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar-track {
    background: #374151;
}

.dark ::-webkit-scrollbar-thumb {
    background: #6b7280;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Hide scrollbar for step navigation */
.scrollbar-hide {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}

/* Custom animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out;
}

/* Custom button styles */

/* Custom icon: content library (Font Awesome style <i> usage) */
.fa-content-library {
    display: inline-block;
    width: 19px;
    height: 19px;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19'><rect width='2' height='18' rx='1'/><rect x='4' y='4' width='2' height='14' rx='1'/><rect x='8' y='2' width='2' height='16' rx='1'/><rect x='11.7612' y='2.3252' width='2.00149' height='16.5752' rx='1.00074' transform='rotate(-16.0168 11.7612 2.3252)'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19'><rect width='2' height='18' rx='1'/><rect x='4' y='4' width='2' height='14' rx='1'/><rect x='8' y='2' width='2' height='16' rx='1'/><rect x='11.7612' y='2.3252' width='2.00149' height='16.5752' rx='1.00074' transform='rotate(-16.0168 11.7612 2.3252)'/></svg>") no-repeat center / contain;
}

/* Step Indicator Styles */
.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
}

.step-indicator:hover {
    transform: scale(1.05);
}

.step-indicator .step-number {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s;
    background-color: #e5e7eb;
    color: #4b5563;
}

.dark .step-indicator .step-number {
    background-color: #374151;
    color: #9ca3af;
}

.step-indicator.active .step-number {
    background-color: #2563eb;
    color: white;
}

.step-indicator.completed .step-number {
    background-color: #10b981;
    color: white;
}

.step-indicator .step-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    margin-top: 0.5rem;
    transition: color 0.3s;
}

.dark .step-indicator .step-label {
    color: #9ca3af;
}

.step-indicator.active .step-label {
    color: #2563eb;
}

.dark .step-indicator.active .step-label {
    color: #60a5fa;
}

.step-indicator.completed .step-label {
    color: #10b981;
}

.dark .step-indicator.completed .step-label {
    color: #34d399;
}

.step-line {
    flex: 1 1 0%;
    height: 0.125rem;
    background-color: #e5e7eb;
    margin-left: 1rem;
    margin-right: 1rem;
    transition: background-color 0.3s;
}

.dark .step-line {
    background-color: #374151;
}

.step-indicator.completed + .step-line {
    background-color: #10b981;
}

/* Template Card Styles */
.template-card {
    transition: all 0.3s;
}

.template-card:hover {
    transform: scale(1.02);
}

.template-card.selected {
    border-color: #3b82f6;
    background-color: #eff6ff;
}

.dark .template-card.selected {
    background-color: #1e3a8a;
}

/* Color Option Styles */
.color-option {
    cursor: pointer;
    transition: all 0.2s;
}

.color-option:hover {
    transform: scale(1.1);
}

.color-option.selected {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6;
}

.dark .color-option.selected {
    box-shadow: 0 0 0 2px #1f2937, 0 0 0 4px #3b82f6;
}

/* Step Content Animation */
.step-content {
    transition: all 0.5s ease-in-out;
}

.step-content.hidden {
    opacity: 0;
    transform: translateX(2rem);
}

.step-content:not(.hidden) {
    opacity: 1;
    transform: translateX(0);
}

/* Slick Carousel Custom Styles */
.template-slick-slider {
    position: relative;
}

.template-slick-slider .slick-slide {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.template-slick-slider .slick-prev,
.template-slick-slider .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 2.5rem;
    height: 2.5rem;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    transition: background-color 0.2s;
}

.template-slick-slider .slick-prev:hover,
.template-slick-slider .slick-next:hover {
    background-color: #f9fafb;
}

/* Dark mode styles for slick controls */
.dark .template-slick-slider .slick-prev,
.dark .template-slick-slider .slick-next {
    background-color: #1f2937; /* gray-800 */
    border-color: #4b5563; /* gray-600 */
    color: #d1d5db; /* gray-300 */
}

.dark .template-slick-slider .slick-prev:hover,
.dark .template-slick-slider .slick-next:hover {
    background-color: #374151; /* gray-700 */
}

/* Force logout overlay backdrop in case of overrides */
#logout-modal {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.template-slick-slider .slick-prev {
    left: -1rem;
}

.template-slick-slider .slick-next {
    right: -1rem;
}

.template-slick-slider .slick-prev:before,
.template-slick-slider .slick-next:before {
    display: none;
}

.template-slick-slider .slick-prev svg,
.template-slick-slider .slick-next svg {
    width: 1.25rem;
    height: 1.25rem;
}

.template-slick-slider .slick-dots {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.template-slick-slider .slick-dots li {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.template-slick-slider .slick-dots li button:before {
    color: #9ca3af;
    font-size: 1.125rem;
}

.template-slick-slider .slick-dots li.slick-active button:before {
    color: #2563eb;
}

/* Hide default Slick dots if needed */
.template-slick-slider .slick-dots {
    display: none;
}


/* Dashboard specific styles */

/* Smooth animations for My CVs section */
.my-cvs-content {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

.my-cvs-chevron {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
}

.my-cvs-chevron.rotated {
    transform: rotate(180deg);
}

/* My CVs header hover effect */
#sidebar .mb-6 .flex.items-center.justify-between {
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 0.5rem;
    transform: translateZ(0); /* Enable hardware acceleration */
}

#sidebar .mb-6 .flex.items-center.justify-between:hover {
    background-color: rgba(243, 244, 246, 0.5);
    transform: translateY(-1px) translateZ(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Dark mode hover state for sidebar header */
.dark #sidebar .mb-6 .flex.items-center.justify-between:hover {
    background-color: rgba(31, 41, 55, 0.6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* CV items micro-interactions */
.my-cvs-content a {
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateZ(0);
    position: relative;
}

.my-cvs-content a:hover {
    transform: translateX(4px) translateZ(0);
    color: #3B82F6 !important;
}

.my-cvs-content a::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #3B82F6, #8B5CF6);
    transition: width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 1px;
}

.my-cvs-content a:hover::before {
    width: 4px;
}

.dark .my-cvs-content a:hover {
    color: #60A5FA !important;
}

.dark .my-cvs-content a::before {
    background: linear-gradient(90deg, #60A5FA, #A78BFA);
}

/* Smooth sidebar transitions */
#sidebar {
    transition: width 0.3s ease-in-out;
}

#main-content {
    transition: margin-left 0.3s ease-in-out;
}

/* Language dropdown animations */
#language-dropdown {
    transition: all 0.2s ease-in-out;
    transform-origin: bottom right;
}

#language-dropdown.hidden {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    pointer-events: none;
}

#language-dropdown:not(.hidden) {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.language-option {
    transition: background-color 0.2s ease-in-out;
}

.language-option:hover {
    transform: translateX(2px);
    transition: all 0.2s ease-in-out;
}

/* Dark mode hover background for language options */
.dark .language-option:hover {
    background-color: rgba(55, 65, 81, 0.4);
}

/* Profile dropdown animations */
#profile-dropdown {
    transition: all 0.2s ease-in-out;
    transform-origin: top right;
}

#profile-dropdown.hidden {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
    pointer-events: none;
}

#profile-dropdown:not(.hidden) {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.profile-menu-item {
    transition: all 0.2s ease-in-out;
}

.profile-menu-item:hover {
    transform: translateX(2px);
}

/* Logout modal animations */
#logout-modal {
    transition: all 0.3s ease-in-out;
    opacity: 0;
    pointer-events: none;
}

#logout-modal.show {
    opacity: 1;
    pointer-events: auto;
}

/* Modal backdrop animation */
#logout-modal {
    background: rgba(0, 0, 0, 0);
    transition: background-color 0.3s ease-in-out;
}

#logout-modal.show {
    background: rgba(0, 0, 0, 0.5);
}

/* Modal box bouncing animation */
#logout-modal .bg-white,
#logout-modal .dark\\:bg-gray-800 {
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: scale(0.3) translateY(-100px);
    opacity: 0;
}

#logout-modal.show .bg-white,
#logout-modal.show .dark\\:bg-gray-800 {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Main layout responsive height */
.main-layout {
    min-height: calc(100vh - 138px);
}

@media (max-width: 768px) {
    .main-layout {
        min-height: calc(100vh - 120px);
    }
}

@media (max-width: 640px) {
    .main-layout {
        min-height: calc(100vh - 110px);
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .dark {
        background: white !important;
        color: black !important;
    }
}

/* Collapsed sidebar polish for BYNDCV */
#byndcv-sidebar[data-collapsed="true"] {
    width: 4rem; /* 64px */
}

#byndcv-sidebar[data-collapsed="true"] .sidebar-text,
#byndcv-sidebar[data-collapsed="true"] .sidebar-content {
    display: none !important;
}

/* Center icon-only rows when collapsed */
#byndcv-sidebar[data-collapsed="true"] .flex.items-center {
    justify-content: center;
}

/* Remove extra left indents when collapsed */
#byndcv-sidebar[data-collapsed="true"] .ml-7,
#byndcv-sidebar[data-collapsed="true"] .pl-10 {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Hide numeric badges in collapsed state to avoid overlap */
#byndcv-sidebar[data-collapsed="true"] .inline-flex {
    display: none !important;
}

/* Ensure icons are centered with no stray margins */
#byndcv-sidebar[data-collapsed="true"] a i,
#byndcv-sidebar[data-collapsed="true"] a svg {
    margin: 0 !important;
}

/* Explicit z-index values for arbitrary Tailwind classes */
.z-\[99999\] {
    z-index: 99999 !important;
}

.z-\[50\] {
    z-index: 50 !important;
}

.z-\[40\] {
    z-index: 40 !important;
}

/* Ensure modals and overlays have correct stacking */
#byndcv-signup-modal,
#byndcv-signin-modal,
#byndcv-forgot-password-modal {
    z-index: 99999 !important;
}

#byndcv-sidebar-overlay {
    z-index: 40 !important;
}

#byndcv-sidebar {
    z-index: 50 !important;
}

/* Ensure profile dropdown and other absolute positioned elements work */
#byndcv-profile-dropdown {
    z-index: 50 !important;
}

@keyframes ai-capture-sheen {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

#add-task-modal.ai-capture-active [data-ai-capture-link] {
    animation: ai-capture-text-pulse 1.1s ease-in-out infinite;
    font-weight: 600;
}

@keyframes ai-capture-text-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}

#add-task-modal.ai-capture-active input:not([type="file"]),
#add-task-modal.ai-capture-active select,
#add-task-modal.ai-capture-active textarea,
#add-task-modal.ai-capture-active [data-opportunity-editor-area] {
    background-image: linear-gradient(110deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.2) 45%, rgba(59, 130, 246, 0.08) 70%);
    background-size: 200% 100%;
    animation: ai-capture-sheen 1.2s linear infinite;
}

#add-task-modal.ai-capture-active input[data-ai-capture-link] {
    background-image: none;
    animation: ai-capture-text-pulse 1.1s ease-in-out infinite;
}

#add-task-modal.ai-capture-active [data-opportunity-editor-area] {
    border-radius: 0 0 0.5rem 0.5rem;
}

#add-task-modal.ai-capture-active .ai-capture-button {
    opacity: 0.8;
    cursor: wait;
}