/* Custom styles for The Dome Retreats Influencer Analysis Dashboard */

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

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

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

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

/* Brand fit score styling */
.score-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
}

.score-highly-recommended {
    @apply bg-emerald-100 text-emerald-800 border border-emerald-200;
}

.score-recommended {
    @apply bg-blue-100 text-blue-800 border border-blue-200;
}

.score-consider {
    @apply bg-yellow-100 text-yellow-800 border border-yellow-200;
}

.score-not-recommended {
    @apply bg-red-100 text-red-800 border border-red-200;
}

/* Profile data styling */
.profile-summary {
    @apply space-y-2;
}

.profile-metric {
    @apply flex items-center space-x-2 text-sm;
}

.profile-metric .icon {
    @apply text-gray-400 w-4;
}

/* Analysis reasoning styles */
.analysis-content {
    @apply prose prose-sm max-w-none;
}

.analysis-content h4 {
    @apply text-lg font-semibold text-gray-800 mb-2;
}

.analysis-content ul {
    @apply list-disc list-inside space-y-1 text-gray-600;
}

.analysis-content .highlight-positive {
    @apply text-emerald-700 font-medium;
}

.analysis-content .highlight-negative {
    @apply text-red-700 font-medium;
}

/* Score breakdown styling */
.score-breakdown {
    @apply grid grid-cols-1 md:grid-cols-2 gap-4;
}

.score-item {
    @apply bg-gray-50 rounded-lg p-4;
}

.score-item-header {
    @apply flex items-center justify-between mb-2;
}

.score-item-label {
    @apply text-sm font-medium text-gray-700;
}

.score-item-value {
    @apply text-lg font-bold;
}

.score-bar {
    @apply w-full bg-gray-200 rounded-full h-2;
}

.score-bar-fill {
    @apply h-2 rounded-full transition-all duration-300;
}

/* Table enhancements */
.table-row-hover:hover {
    @apply bg-gray-50 cursor-pointer;
}

.table-cell-expandable {
    @apply max-w-xs overflow-hidden text-ellipsis whitespace-nowrap;
}

.table-cell-expanded {
    @apply max-w-none whitespace-normal;
}

/* Modal styling enhancements */
.modal-section {
    @apply mb-8;
}

.modal-section-title {
    @apply text-xl font-bold text-gray-800 mb-4 flex items-center;
}

.modal-section-content {
    @apply space-y-4;
}

/* Target audience tags */
.audience-tag {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700 mr-2 mb-2;
}

.red-flag-tag {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-700 mr-2 mb-2;
}

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

.loading-row {
    @apply space-y-3;
}

.loading-text {
    @apply h-4 bg-gray-200 rounded w-3/4;
}

.loading-text-short {
    @apply h-4 bg-gray-200 rounded w-1/2;
}

/* Responsive table */
@media (max-width: 768px) {
    .responsive-table {
        @apply block overflow-x-auto whitespace-nowrap;
    }
    
    .responsive-table table {
        @apply min-w-full;
    }
    
    .mobile-stack {
        @apply block space-y-2;
    }
    
    .mobile-stack-item {
        @apply flex justify-between items-center py-2 border-b border-gray-100;
    }
    
    .mobile-label {
        @apply text-sm font-medium text-gray-600;
    }
    
    .mobile-value {
        @apply text-sm text-gray-900;
    }
}

/* Animation enhancements */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

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

.slide-up {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Score visualization */
.score-circle {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    margin: 0 auto;
}

.score-circle.highly-recommended {
    background: conic-gradient(#10b981 var(--percentage, 0%), #e5e7eb var(--percentage, 0%));
}

.score-circle.recommended {
    background: conic-gradient(#3b82f6 var(--percentage, 0%), #e5e7eb var(--percentage, 0%));
}

.score-circle.consider {
    background: conic-gradient(#f59e0b var(--percentage, 0%), #e5e7eb var(--percentage, 0%));
}

.score-circle.not-recommended {
    background: conic-gradient(#ef4444 var(--percentage, 0%), #e5e7eb var(--percentage, 0%));
}

.score-circle::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: white;
}

.score-circle .score-text {
    position: relative;
    z-index: 1;
    color: #374151;
    font-size: 14px;
    font-weight: 700;
}

/* Enhanced button styles */
.btn-analyze {
    @apply bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white font-medium px-6 py-3 rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200;
}

.btn-secondary {
    @apply bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 font-medium px-6 py-3 rounded-lg shadow-sm hover:shadow-md transform hover:scale-105 transition-all duration-200;
}

/* Status indicators */
.status-processing {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800;
}

.status-completed {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800;
}

.status-error {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800;
}

/* Genspark branding */
.genspark-badge {
    @apply bg-gradient-to-r from-purple-500 to-blue-500 text-white px-3 py-1 rounded-full text-xs font-medium;
}

/* Tooltip styles */
.tooltip {
    @apply relative inline-block;
}

.tooltip .tooltiptext {
    @apply invisible absolute z-10 w-64 bg-gray-900 text-white text-sm rounded-lg py-2 px-3 opacity-0 transition-opacity duration-300;
    bottom: 125%;
    left: 50%;
    margin-left: -128px;
}

.tooltip:hover .tooltiptext {
    @apply visible opacity-100;
}

/* Authentication styles */
.pin-digit:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.pin-digit.animate-pulse {
    animation: pulse 0.5s ease-in-out;
}

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

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

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