/* Custom styles for Countly.pl */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

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

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

/* Custom button styles */
.btn-primary {
    @apply bg-primary-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-primary-700 transition-colors;
}

.btn-secondary {
    @apply bg-gray-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-gray-700 transition-colors;
}

.btn-success {
    @apply bg-green-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-green-700 transition-colors;
}

.btn-danger {
    @apply bg-red-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-red-700 transition-colors;
}

/* Custom card styles */
.card {
    @apply bg-white rounded-lg shadow hover:shadow-lg transition-shadow;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-200;
}

.card-body {
    @apply p-6;
}

.card-footer {
    @apply px-6 py-4 border-t border-gray-200 bg-gray-50;
}

/* Custom form styles */
.form-group {
    @apply mb-4;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
}

.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary-500 focus:border-primary-500;
}

.form-select {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary-500 focus:border-primary-500;
}

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary-500 focus:border-primary-500;
}

/* Custom table styles */
.table {
    @apply min-w-full divide-y divide-gray-200;
}

.table-header {
    @apply bg-gray-50;
}

.table-header th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table-body {
    @apply bg-white divide-y divide-gray-200;
}

.table-row {
    @apply hover:bg-gray-50;
}

.table-cell {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

/* Custom badge styles */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
    @apply bg-red-100 text-red-800;
}

.badge-info {
    @apply bg-blue-100 text-blue-800;
}

.badge-gray {
    @apply bg-gray-100 text-gray-800;
}

/* Custom progress bar */
.progress {
    @apply w-full bg-gray-200 rounded-full h-2;
}

.progress-bar {
    @apply bg-primary-600 h-2 rounded-full transition-all duration-300;
}

/* Custom loading spinner */
.spinner {
    @apply animate-spin rounded-full h-4 w-4 border-b-2 border-primary-600;
}

/* Custom alert styles */
.alert {
    @apply p-4 rounded-md border;
}

.alert-success {
    @apply bg-green-50 border-green-200 text-green-700;
}

.alert-warning {
    @apply bg-yellow-50 border-yellow-200 text-yellow-700;
}

.alert-danger {
    @apply bg-red-50 border-red-200 text-red-700;
}

.alert-info {
    @apply bg-blue-50 border-blue-200 text-blue-700;
}

/* Custom modal styles */
.modal {
    @apply fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50;
}

.modal-content {
    @apply relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white;
}

/* Custom dropdown styles */
.dropdown {
    @apply relative inline-block text-left;
}

.dropdown-menu {
    @apply absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none;
}

.dropdown-item {
    @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100;
}

/* Custom pagination */
.pagination {
    @apply flex justify-center space-x-2;
}

.pagination-item {
    @apply px-3 py-2 text-sm font-medium rounded-lg;
}

.pagination-item-active {
    @apply bg-primary-600 text-white;
}

.pagination-item-inactive {
    @apply bg-gray-100 text-gray-700 hover:bg-gray-200;
}

/* Custom file upload */
.file-upload {
    @apply border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-primary-400 transition-colors;
}

.file-upload-active {
    @apply border-primary-400 bg-primary-50;
}

/* Custom stats cards */
.stat-card {
    @apply bg-white rounded-lg shadow p-6;
}

.stat-icon {
    @apply w-12 h-12 rounded-lg flex items-center justify-center;
}

.stat-value {
    @apply text-2xl font-bold text-gray-900;
}

.stat-label {
    @apply text-sm font-medium text-gray-600;
}

/* Custom navigation */
.nav-link {
    @apply text-gray-600 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium;
}

.nav-link-active {
    @apply text-primary-600 bg-primary-50;
}

/* Custom sidebar */
.sidebar {
    @apply w-64 bg-white shadow-lg;
}

.sidebar-item {
    @apply flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900;
}

.sidebar-item-active {
    @apply bg-primary-50 text-primary-700 border-r-2 border-primary-600;
}

/* Custom breadcrumb */
.breadcrumb {
    @apply flex items-center space-x-2 text-sm text-gray-500;
}

.breadcrumb-item {
    @apply hover:text-gray-700;
}

.breadcrumb-separator {
    @apply text-gray-400;
}

/* Custom empty state */
.empty-state {
    @apply text-center py-12;
}

.empty-state-icon {
    @apply w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6;
}

.empty-state-title {
    @apply text-xl font-semibold text-gray-900 mb-2;
}

.empty-state-description {
    @apply text-gray-600 mb-6;
}

/* Custom loading states */
.skeleton {
    @apply animate-pulse bg-gray-200 rounded;
}

.skeleton-text {
    @apply h-4 bg-gray-200 rounded;
}

.skeleton-avatar {
    @apply h-10 w-10 bg-gray-200 rounded-full;
}

/* Custom responsive utilities */
@media (max-width: 640px) {
    .mobile-hidden {
        display: none;
    }
    
    .mobile-full {
        width: 100%;
    }
}

/* Custom print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break {
        page-break-after: always;
    }
}

/* Custom dark mode support (future enhancement) */
@media (prefers-color-scheme: dark) {
    .dark-mode {
        @apply bg-gray-900 text-white;
    }
}

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

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
    }
    50% {
        box-shadow: 0 0 40px rgba(59, 130, 246, 0.8);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes pulse-glow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes bounce-gentle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes rotate-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes scale-in {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Animation classes */
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

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

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

.animate-shimmer {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

.animate-gradient-shift {
    background-size: 200% 200%;
    animation: gradient-shift 3s ease infinite;
}

.animate-bounce-gentle {
    animation: bounce-gentle 2s ease-in-out infinite;
}

.animate-rotate-slow {
    animation: rotate-slow 20s linear infinite;
}

.animate-scale-in {
    animation: scale-in 0.5s ease-out forwards;
}

/* Hover effects */
.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
}

/* Glass morphism effects */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-dark {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gradient text effects */
.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-blue {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Modern button styles */
.btn-modern {
    @apply relative overflow-hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transition: all 0.3s ease;
}

.btn-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn-modern:hover::before {
    left: 100%;
}

.btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Card hover effects */
.card-modern {
    @apply transition-all duration-500;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

.card-modern:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

/* Loading states */
.loading-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Scroll animations */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Parallax effects */
.parallax-slow {
    transform: translateY(var(--scroll, 0));
}

.parallax-fast {
    transform: translateY(calc(var(--scroll, 0) * 0.5));
}

/* Modern shadows */
.shadow-modern {
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.shadow-modern-lg {
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.shadow-modern-xl {
    box-shadow: 0 30px 80px rgba(0,0,0,0.2);
}

/* Gradient borders */
.border-gradient {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #667eea, #764ba2) border-box;
}

/* Text effects */
.text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.text-shadow-lg {
    text-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Ripple effect */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}

/* Selection styles */
::selection {
    background: rgba(59, 130, 246, 0.3);
    color: #1f2937;
}

::-moz-selection {
    background: rgba(59, 130, 246, 0.3);
    color: #1f2937;
}

/* Clean card styles without problematic borders */
.feature-card, .security-badge {
    display: flex;
    align-items: center;
    padding: 1rem;
    margin: 0;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.feature-card:hover, .security-badge:hover {
    transform: translateY(-1px);
}

/* Ensure proper spacing */
.grid-cols-2 {
    gap: 1rem;
}

/* Fix for mobile responsiveness */
@media (max-width: 768px) {
    .grid-cols-2 {
        @apply grid-cols-1;
    }
    
    .feature-card, .security-badge {
        @apply p-3;
    }
}

/* Animation improvements */
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
}

.animate-fade-in-up.delay-100 {
    animation-delay: 0.1s;
}

.animate-fade-in-up.delay-200 {
    animation-delay: 0.2s;
}

.animate-fade-in-up.delay-300 {
    animation-delay: 0.3s;
}

.animate-fade-in-up.delay-400 {
    animation-delay: 0.4s;
}

.animate-fade-in-up.delay-500 {
    animation-delay: 0.5s;
}

.animate-fade-in-up.delay-600 {
    animation-delay: 0.6s;
}

/* Clean styles without problematic elements */
.feature-text, .security-text {
    color: #374151;
    font-weight: 500;
}

/* Ensure proper spacing between elements */
.grid-cols-2 {
    gap: 1rem;
    align-items: stretch;
}

/* Mobile fixes */
@media (max-width: 640px) {
    .feature-card, .security-badge {
        min-height: 50px;
        padding: 0.75rem;
    }
}

/* Add subtle hover effects */
.feature-card:hover, .security-badge:hover {
    transform: translateY(-1px);
}

/* Fix for text overflow and overlapping */
.grid-cols-2 > div {
    position: relative;
    overflow: hidden;
}

.grid-cols-2 > div .flex-1 {
    min-width: 0;
    overflow: hidden;
}

.grid-cols-2 > div .flex-1 span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Ensure proper spacing between cards */
.grid-cols-2 {
    gap: 1rem;
    align-items: stretch;
}

/* Mobile responsive fixes */
@media (max-width: 640px) {
    .grid-cols-2 {
        @apply grid-cols-1;
    }
    
    .grid-cols-2 > div .flex-1 span {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }
}

/* Password toggle icon fixes */
#password-toggle {
    pointer-events: auto !important;
    cursor: pointer !important;
    transition: all 0.2s ease;
    z-index: 10;
    position: relative;
}

#password-toggle:hover {
    color: #6b7280 !important;
    transform: scale(1.1);
}

#password-toggle:active {
    transform: scale(0.95);
}

/* Ensure password input container allows clicks */
.password-input-container {
    position: relative;
}

.password-input-container .absolute {
    pointer-events: none;
}

.password-input-container .absolute #password-toggle {
    pointer-events: auto;
}

/* Focus states for password toggle */
#password-toggle:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Accessibility improvements */
#password-toggle[aria-label] {
    cursor: pointer;
}

/* Mobile touch improvements */
@media (max-width: 640px) {
    #password-toggle {
        padding: 8px;
        margin: -8px;
        border-radius: 4px;
    }
    
    /* Ensure minimum touch target size */
    button, a, input[type="button"], input[type="submit"] {
        min-height: 56px;
        min-width: 56px;
        padding: 16px 20px;
    }
    
    /* Better button styling for mobile */
    .btn-mobile {
        min-height: 56px;
        padding: 16px 24px;
        font-size: 16px;
        border-radius: 8px;
    }
    
    /* Better spacing for mobile */
    .container, .max-w-7xl, .max-w-6xl, .max-w-4xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Improve table responsiveness */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Better modal spacing on mobile */
    .fixed.inset-0 {
        padding: 0.5rem;
    }
    
    /* Improve button spacing */
    .flex.space-x-2 > * + * {
        margin-left: 0.25rem;
    }
    
    /* Better text sizing for mobile */
    .text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
    
    .text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}

/* Very small screens (320px and below) */
@media (max-width: 320px) {
    .text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    
    .text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    
    .px-4 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .py-2 {
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
    }
}

/* Landscape mobile improvements */
@media (max-width: 768px) and (orientation: landscape) {
    .h-screen {
        height: 100vh;
        max-height: 100vh;
    }
    
    .py-24 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .py-12 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}