/* Custom CSS for Prostomowa.pl */

/* Base styles and utilities */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0.5rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Line clamp utility */
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Focus improvements */
.focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
}

/* Smooth transitions */
.transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom animations */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradient-x {
    0%, 100% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(100%);
    }
}

.animate-gradient-x {
    animation: gradient-x 6s ease-in-out infinite;
    background-size: 200% 100%;
}

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

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

.animate-slide-down {
    animation: slide-down 0.3s ease-out;
}

/* Custom button styles */
.btn-primary {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors;
}

.btn-secondary {
    @apply inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-colors;
}

/* Form enhancements */
.form-input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:border-primary-500;
}

.form-input:invalid {
    @apply border-red-500 focus:border-red-500 focus:ring-red-500;
}

.form-textarea {
    @apply form-input resize-y min-h-[100px];
}

.form-select {
    @apply form-input pr-10 bg-no-repeat bg-right bg-center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-size: 1rem;
}

/* File upload zone */
.file-upload-zone {
    @apply border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-primary-400 transition-colors cursor-pointer;
}

.file-upload-zone:hover {
    @apply bg-primary-50 dark:bg-primary-900/20;
}

.file-upload-zone.drag-over {
    @apply border-primary-400 bg-primary-50 dark:bg-primary-900/20;
}

/* Card styles */
.card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700;
}

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

.card-body {
    @apply px-6 py-4;
}

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

/* Alert styles */
.alert {
    @apply p-4 rounded-lg border;
}

.alert-success {
    @apply bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-700 dark:text-green-200;
}

.alert-error {
    @apply bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-700 dark:text-red-200;
}

.alert-warning {
    @apply bg-yellow-50 border-yellow-200 text-yellow-800 dark:bg-yellow-900/20 dark:border-yellow-700 dark:text-yellow-200;
}

.alert-info {
    @apply bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-900/20 dark:border-blue-700 dark:text-blue-200;
}

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

.badge-primary {
    @apply bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200;
}

.badge-success {
    @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
}

.badge-error {
    @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
}

.badge-gray {
    @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200;
}

/* Loading spinner */
.spinner {
    @apply animate-spin h-5 w-5;
}

/* Confidence score indicators */
.confidence-high {
    @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
}

.confidence-medium {
    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
}

.confidence-low {
    @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
}

/* Category colors */
.category-zus {
    @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200;
}

.category-bank {
    @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
}

.category-ubezpieczenia {
    @apply bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200;
}

.category-sad {
    @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
}

.category-inne {
    @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200;
}

/* Prose improvements for content */
.prose {
    @apply text-gray-700 dark:text-gray-300;
}

.prose h1 {
    @apply text-3xl font-bold text-gray-900 dark:text-white mb-6;
}

.prose h2 {
    @apply text-2xl font-semibold text-gray-900 dark:text-white mb-4 mt-8;
}

.prose h3 {
    @apply text-xl font-medium text-gray-900 dark:text-white mb-3 mt-6;
}

.prose p {
    @apply mb-4 leading-relaxed;
}

.prose ul, .prose ol {
    @apply mb-4 pl-6;
}

.prose li {
    @apply mb-2;
}

.prose a {
    @apply text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 underline;
}

.prose strong {
    @apply font-semibold text-gray-900 dark:text-white;
}

.prose code {
    @apply bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm font-mono;
}

.prose blockquote {
    @apply border-l-4 border-primary-200 dark:border-primary-800 pl-4 italic text-gray-600 dark:text-gray-400 mb-4;
}

/* Table styles */
.table {
    @apply min-w-full divide-y divide-gray-200 dark:divide-gray-700;
}

.table thead {
    @apply bg-gray-50 dark:bg-gray-800;
}

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

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300;
}

.table tbody tr:nth-child(even) {
    @apply bg-gray-50 dark:bg-gray-800/50;
}

/* Mobile improvements */
@media (max-width: 640px) {
    .mobile-stack {
        @apply flex flex-col space-y-2;
    }
    
    .mobile-stack > * {
        @apply w-full;
    }
    
    .mobile-hide {
        @apply hidden;
    }
    
    .mobile-full {
        @apply w-full;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
    
    body {
        @apply text-black bg-white;
    }
    
    .card {
        @apply border border-gray-300 shadow-none;
    }
    
    .btn-primary, .btn-secondary {
        @apply border border-gray-300 bg-white text-black;
    }
}

/* High contrast mode improvements */
@media (prefers-contrast: high) {
    .card {
        @apply border-2;
    }
    
    .btn-primary {
        @apply border-2 border-primary-800;
    }
    
    .btn-secondary {
        @apply border-2;
    }
    
    .form-input {
        @apply border-2;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .animate-spin {
        animation: none;
    }
}

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

::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-400 dark:bg-gray-600 rounded;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500 dark:bg-gray-500;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: theme(colors.gray.400) theme(colors.gray.100);
}

.dark * {
    scrollbar-color: theme(colors.gray.600) theme(colors.gray.800);
}

/* Ad slot placeholder styling */
.ad-slot-placeholder {
    min-height: 90px;
    width: 100%;
    overflow: hidden;
}

.ad-slot-placeholder ins.adsbygoogle {
    width: 100%;
    min-height: 90px;
}

/* Ensure ads are responsive */
@media (max-width: 768px) {
    .ad-slot-placeholder {
        min-height: 150px;
    }
    
    .ad-slot-placeholder [data-ad-slot] {
        min-height: 150px;
    }
}

/* Skip link styling */
.skip-link:focus {
    position: absolute;
    top: 0;
    left: 0;
    background: theme(colors.primary.600);
    color: white;
    padding: 0.5rem 1rem;
    text-decoration: none;
    z-index: 1000;
    border-radius: 0 0 0.375rem 0;
}

/* Loading overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-overlay .spinner {
    @apply h-12 w-12 text-white;
}

/* Cookie banner positioning */
#cookie-banner {
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Ensure proper contrast for all interactive elements */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid theme(colors.primary.500);
    outline-offset: 2px;
}

/* Error page styling */
.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Feedback buttons */
.feedback-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

@media (max-width: 640px) {
    .feedback-buttons {
        flex-direction: column;
    }
}

/* Template copy button positioning */
.template-container {
    position: relative;
}

.copy-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.template-container:hover .copy-button {
    opacity: 1;
}

/* Ensure proper spacing for icons */
.icon-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Utility classes for common patterns */
.section-spacing {
    @apply py-8 sm:py-12 lg:py-16;
}

.container-padding {
    @apply px-4 sm:px-6 lg:px-8;
}

.text-gradient {
    background: linear-gradient(135deg, theme(colors.primary.600), theme(colors.primary.800));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Ensure all interactive elements meet WCAG contrast requirements */
.high-contrast {
    color: #000;
    background: #fff;
}

.dark .high-contrast {
    color: #fff;
    background: #000;
}