@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap');

:root {
    --font-sans: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === Scrollbar Global — moderno, delgado, gradiente indigo === */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.5), rgba(139, 92, 246, 0.5));
}
html { scrollbar-width: thin; scrollbar-color: rgba(99, 102, 241, 0.3) transparent; }

/* === Scrollbar Utilities === */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; }
.custom-scrollbar:hover::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3));
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.55), rgba(139, 92, 246, 0.55));
}
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.custom-scrollbar:hover { scrollbar-color: rgba(99, 102, 241, 0.4) transparent; }

/* === Entrance Animations === */
.animate-enter {
    animation: enterUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(12px);
}

.animate-scale {
    animation: scaleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Apple-style spring animation */
.animate-spring {
    animation: springIn 0.55s cubic-bezier(0.16, 1.2, 0.3, 1) forwards;
    opacity: 0;
    transform: scale(0.92);
}

/* Stagger children */
.stagger-children > * {
    opacity: 0;
    animation: enterUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.35s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(9) { animation-delay: 0.45s; }
.stagger-children > *:nth-child(10) { animation-delay: 0.5s; }

@keyframes enterUp {
    to { opacity: 1; transform: translateY(0); }
}

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

@keyframes springIn {
    to { opacity: 1; transform: scale(1); }
}

/* === Cursor Blink === */
.cursor-blink {
    animation: blink 1s step-end infinite;
    display: inline-block;
    vertical-align: baseline;
    margin-left: 2px;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* === Glassmorphism === */
.glass {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}



/* === Apple-style focus ring === */
.apple-focus:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25);
}

/* === Sidebar transition === */
.sidebar-link {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark mode hover enhancement */
.dark .sidebar-link:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Active sidebar link (used by JS) */
.sidebar-link.active {
    background: rgba(99, 102, 241, 0.08);
    color: #4338ca;
}
.dark .sidebar-link.active {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    border-left: 3px solid #6366f1;
    padding-left: calc(0.75rem - 3px);
}

/* Active sidebar icon container */
.sidebar-link.active .sidebar-icon {
    background: rgba(99, 102, 241, 0.12);
}
.dark .sidebar-link.active .sidebar-icon {
    background: rgba(99, 102, 241, 0.35);
}

/* Active sidebar icon */
.sidebar-link.active .sidebar-icon i {
    color: #4338ca;
}
.dark .sidebar-link.active .sidebar-icon i {
    color: #a5b4fc;
}

/* === Card hover lift (subtle) === */
.card-lift {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}
.dark .card-lift:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

/* === Floating Animation (subtle) === */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* === Slide in from right === */
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.animate-slide-right {
    animation: slideInRight 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* === Fade in === */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade {
    animation: fadeIn 0.3s ease-out forwards;
}

/* === Shimmer loading === */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, #f4f4f5 25%, #e4e4e7 50%, #f4f4f5 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 0.75rem;
}
.dark .skeleton {
    background: linear-gradient(90deg, #27272a 25%, #3f3f46 50%, #27272a 75%);
    background-size: 200% 100%;
}

/* === Active nav indicator (Apple style) === */
.nav-indicator {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

/* === iOS date input fix (prevents overflow on Safari mobile) === */
input[type="date"],
input[type="datetime-local"] {
    display: block !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button,
input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-clear-button {
    display: none !important;
}

/* === Prevent horizontal overflow in modals (iOS date input fix) === */
#modal-content {
    overflow-x: hidden !important;
}