/* Custom CSS for Instagram Content Planner */

* {
    font-family: 'Inter', sans-serif;
}

body {
    background-color: #f8fafc;
}

/* Inline Edit Form Styles */
.inline-edit-form {
    transition: all 0.3s ease-in-out;
    max-height: 0;
    overflow: hidden;
}

.inline-edit-form[style*="block"] {
    max-height: 1000px;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        max-height: 1000px;
        transform: translateY(0);
    }
}

.content-item {
    transition: all 0.2s ease-in-out;
    border-radius: 8px;
    overflow: hidden;
}

.content-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Navigation Styles */
.nav-link {
    @apply text-gray-600 hover:text-purple-600 font-medium transition-colors duration-200 px-4 py-2 rounded-lg;
}

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

.nav-link:hover {
    @apply bg-gray-50;
}

/* Tab Content */
.tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.tab-content.active {
    display: block;
}

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

/* Custom Form Styles */
.form-input {
    @apply w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-200;
}

.form-input:focus {
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}

/* Content Card Styles */
.content-card {
    @apply bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow duration-200;
}

.content-card:hover {
    transform: translateY(-2px);
}

/* Status Badges */
.status-badge {
    @apply px-3 py-1 rounded-full text-xs font-medium;
}

.status-planned {
    @apply bg-blue-100 text-blue-800;
}

.status-preparing {
    @apply bg-orange-100 text-orange-800;
}

.status-ready {
    @apply bg-green-100 text-green-800;
}

.status-published {
    @apply bg-purple-100 text-purple-800;
}

/* Format Badges */
.format-badge {
    @apply px-2 py-1 rounded text-xs font-medium;
}

.format-reels {
    @apply bg-pink-100 text-pink-800;
}

.format-carousel {
    @apply bg-blue-100 text-blue-800;
}

.format-single {
    @apply bg-green-100 text-green-800;
}

/* Category Badges */
.category-badge {
    @apply px-2 py-1 rounded text-xs font-medium;
}

.category-educational {
    @apply bg-blue-100 text-blue-700;
}

.category-inspirational {
    @apply bg-yellow-100 text-yellow-700;
}

.category-informative {
    @apply bg-green-100 text-green-700;
}

.category-entertainment {
    @apply bg-pink-100 text-pink-700;
}

.category-interactive {
    @apply bg-purple-100 text-purple-700;
}

.category-relational {
    @apply bg-indigo-100 text-indigo-700;
}

/* Calendar Styles */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.calendar-header {
    @apply bg-gray-100 p-3 text-center font-semibold text-gray-700 text-sm;
}

.calendar-day {
    @apply bg-white p-2 min-h-[120px] relative hover:bg-gray-50 transition-colors duration-200;
    display: flex;
    flex-direction: column;
}

.calendar-day.other-month {
    @apply bg-gray-50 text-gray-400;
}

.calendar-day.today {
    @apply bg-blue-50 border-2 border-blue-300;
}

.calendar-day.posting-day {
    @apply bg-gradient-to-br from-purple-50 to-pink-50 border border-purple-200;
}

.calendar-day.posting-day.today {
    @apply bg-gradient-to-br from-blue-100 to-purple-100 border-2 border-blue-400;
}

.calendar-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.calendar-day-number {
    @apply text-sm font-medium;
}

.posting-indicator {
    @apply text-purple-500 text-xs;
}

.posting-indicator i {
    font-size: 6px;
}

/* Suggested Content */
.suggested-content {
    @apply bg-purple-100 border border-purple-200 rounded p-2 mb-2 text-xs;
    flex-shrink: 0;
}

.suggested-format {
    @apply flex items-center gap-1 mb-1 text-purple-700 font-medium;
}

.suggested-format i {
    font-size: 10px;
}

.format-text {
    font-size: 10px;
}

.suggested-category {
    @apply text-purple-600 text-xs truncate;
    font-size: 9px;
}

/* Actual Content Items */
.calendar-content-item {
    @apply border rounded p-1 mb-1 text-xs flex-shrink-0;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
}

.calendar-content-item.format-reels {
    @apply bg-pink-100 text-pink-800 border-pink-200;
}

.calendar-content-item.format-carousel {
    @apply bg-blue-100 text-blue-800 border-blue-200;
}

.calendar-content-item.format-single {
    @apply bg-green-100 text-green-800 border-green-200;
}

.content-format i {
    font-size: 10px;
    width: 12px;
}

.content-title {
    font-size: 9px;
    line-height: 1.2;
    flex: 1;
}

/* Add Content Button */
.add-content-btn {
    @apply bg-purple-500 text-white rounded-full w-6 h-6 flex items-center justify-center mt-auto;
    @apply hover:bg-purple-600 transition-colors duration-200 flex-shrink-0;
    font-size: 10px;
}

.add-content-btn:hover {
    transform: scale(1.1);
}

/* Loading Animation */
.loading {
    @apply animate-pulse;
}

/* Mobile-First Responsive Design */

/* Mobile adjustments (Default - up to 640px) */
.calendar-day {
    min-height: 80px;
    padding: 0.25rem;
}

.calendar-header {
    padding: 0.5rem 0.25rem;
    font-size: 0.75rem;
}

.calendar-content-item {
    font-size: 8px;
    padding: 1px 2px;
    min-height: 18px;
}

.suggested-content {
    padding: 4px;
    margin-bottom: 4px;
}

.format-text {
    font-size: 8px;
}

.suggested-category {
    font-size: 7px;
}

.content-title {
    font-size: 7px;
}

.add-content-btn {
    width: 18px;
    height: 18px;
    font-size: 8px;
}

/* Navigation mobile adjustments */
.nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    text-align: center;
}

.nav-link i {
    display: none;
}

/* Form inputs on mobile */
.form-input {
    padding: 0.75rem;
    font-size: 16px; /* Prevents zoom on iOS */
}

/* Button styles */
.btn-primary {
    @apply bg-gradient-to-r from-purple-600 to-pink-600 text-white py-3 px-6 rounded-lg font-semibold;
    @apply hover:from-purple-700 hover:to-pink-700 transition duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-800 py-3 px-6 rounded-lg font-semibold;
    @apply hover:bg-gray-300 transition duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50;
}

/* Button adjustments */
.btn-primary, .btn-secondary {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}

/* Card spacing on mobile */
.content-card {
    padding: 1rem;
    margin-bottom: 0.75rem;
}

/* Stats cards on mobile */
.stats-card {
    padding: 1rem;
    text-align: center;
}

.stats-number {
    font-size: 1.25rem;
    font-weight: 700;
}

.stats-label {
    font-size: 0.75rem;
    color: #6b7280;
}

/* Chart containers on mobile */
.chart-container {
    height: 200px !important;
    position: relative;
    margin: 1rem 0;
}

/* Modal adjustments on mobile */
.modal-content {
    margin: 1rem;
    max-width: calc(100vw - 2rem);
    padding: 1rem;
}

/* Instagram stats section mobile */
.instagram-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.instagram-stat-card {
    padding: 0.75rem;
    text-align: center;
}

/* Weekly schedule mobile */
.weekly-day-item {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
}

.day-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.day-name {
    font-size: 0.875rem;
    font-weight: 600;
}

.day-date {
    font-size: 0.75rem;
    color: #6b7280;
}

/* Action buttons mobile */
.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.quick-add-btn, .accept-suggestion-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    width: 100%;
}

/* Tablet adjustments (641px to 1024px) */
@media (min-width: 641px) {
    .calendar-day {
        min-height: 100px;
        padding: 0.5rem;
    }
    
    .calendar-header {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
    
    .nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    .nav-link i {
        display: inline;
        margin-right: 0.5rem;
    }
    
    .instagram-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .chart-container {
        height: 300px !important;
    }
    
    .action-buttons {
        flex-direction: row;
    }
    
    .quick-add-btn, .accept-suggestion-btn {
        width: auto;
    }
}

/* Desktop adjustments (1025px and up) */
@media (min-width: 1025px) {
    .calendar-day {
        min-height: 120px;
        padding: 0.75rem;
    }
    
    .calendar-content-item {
        font-size: 10px;
        padding: 2px 4px;
        min-height: 22px;
    }
    
    .format-text {
        font-size: 10px;
    }
    
    .suggested-category {
        font-size: 9px;
    }
    
    .content-title {
        font-size: 9px;
    }
    
    .add-content-btn {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }
    
    .chart-container {
        height: 400px !important;
    }
    
    .modal-content {
        margin: 2rem auto;
        padding: 2rem;
        max-width: 600px;
    }
}

/* Large desktop (1280px and up) */
@media (min-width: 1280px) {
    .calendar-day {
        min-height: 140px;
        padding: 1rem;
    }
    
    .modal-content {
        max-width: 800px;
    }
    
    .chart-container {
        height: 450px !important;
    }
}

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

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

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

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

/* Hover effects */
.hover-scale {
    transition: transform 0.2s ease-in-out;
}

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

/* Button Styles */
.btn-primary {
    @apply bg-gradient-to-r from-purple-600 to-pink-600 text-white py-2 px-4 rounded-lg font-semibold hover:from-purple-700 hover:to-pink-700 transition-all duration-200 shadow-md hover:shadow-lg;
}

.btn-secondary {
    @apply bg-white text-gray-700 py-2 px-4 rounded-lg font-semibold border border-gray-300 hover:bg-gray-50 transition-all duration-200;
}

.btn-danger {
    @apply bg-red-500 text-white py-2 px-4 rounded-lg font-semibold hover:bg-red-600 transition-all duration-200;
}

/* Modal Styles */
.modal {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
    display: none;
    backdrop-filter: blur(2px);
}

.modal.active {
    display: flex;
}

.modal-content {
    @apply bg-white rounded-lg shadow-xl w-full mx-4 p-6;
    animation: slideUp 0.3s ease-out;
    max-height: 90vh;
    overflow-y: auto;
}

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

/* Instagram Modal Specific */
.modal-content .instagram-input {
    @apply w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent;
}

.modal-content .instagram-input:focus {
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}

/* Modal Header */
.modal-header {
    @apply flex justify-between items-center mb-6 pb-4 border-b border-gray-200;
}

/* Info Box in Modal */
.modal-info-box {
    @apply mb-6 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg;
}

.modal-info-box .info-icon {
    @apply text-blue-600 mr-3 mt-1 flex-shrink-0;
}

.modal-info-box .info-content {
    @apply text-sm text-blue-800;
}

.modal-info-box .info-list {
    @apply mt-3 list-decimal list-inside space-y-1 text-xs text-blue-700;
}

/* Auto Update Indicator */
.auto-update-indicator {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
    background: linear-gradient(45deg, #10b981, #34d399);
    color: white;
    animation: pulse 2s infinite;
}

.auto-update-indicator.disabled {
    @apply bg-gray-400;
    animation: none;
}

/* Success/Error Messages */
.alert {
    @apply p-4 rounded-lg mb-4 border;
}

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

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

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

/* Content List Item Styles */
.content-item {
    @apply border border-gray-200 rounded-lg p-4 mb-3 hover:shadow-md transition-all duration-200;
}

.content-item:hover {
    border-color: #a855f7;
}

.content-meta {
    @apply flex flex-wrap items-center gap-2 text-sm text-gray-600 mt-2;
}

.content-actions {
    @apply flex items-center gap-2 mt-3;
}

/* Chart Container */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

.chart-container canvas {
    max-height: 100% !important;
    max-width: 100% !important;
}

/* Hook Card Styles */
.hook-card {
    @apply border-l-4 border-purple-500 bg-purple-50 p-4 rounded-r-lg;
}

.hook-example {
    @apply bg-white p-3 rounded border border-purple-200 mt-2 italic;
}

/* Settings Form */
.settings-option {
    @apply border border-gray-200 rounded-lg p-4 cursor-pointer hover:bg-gray-50 transition-colors duration-200;
}

.settings-option.selected {
    @apply border-purple-500 bg-purple-50;
}

/* Weekly Schedule Styles */
.weekly-day-item {
    @apply border rounded-lg p-4 transition-all duration-200;
}

.weekly-day-item.posting-day {
    @apply border-purple-200 bg-gradient-to-r from-purple-50 to-pink-50;
}

.weekly-day-item.rest-day {
    @apply border-gray-200 bg-gray-50;
}

.weekly-day-item.today {
    @apply border-blue-300 bg-gradient-to-r from-blue-50 to-purple-50 shadow-md;
}

.weekly-day-item.past {
    @apply opacity-60;
}

.weekly-day-item.auto-suggested {
    @apply border-purple-300 bg-gradient-to-r from-purple-100 to-pink-100 shadow-lg;
    position: relative;
}

.weekly-day-item.auto-suggested::before {
    content: '🤖';
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 12px;
}

.day-header {
    @apply flex justify-between items-center mb-3;
}

.day-info {
    @apply flex items-center gap-2;
}

.day-name {
    @apply font-semibold text-gray-800;
}

.day-date {
    @apply text-sm text-gray-600;
}

.today-badge {
    @apply bg-blue-500 text-white text-xs px-2 py-1 rounded-full font-medium;
}

.auto-badge {
    @apply bg-purple-500 text-white text-xs px-2 py-1 rounded-full font-medium ml-1;
}

.auto-suggestion-header {
    @apply flex items-center mb-2 pb-1 border-b border-purple-200;
}

.suggestion-title {
    @apply flex items-start mb-2 p-2 bg-yellow-50 border border-yellow-200 rounded;
}

.suggestion-hook {
    @apply mt-2 p-2 bg-gray-50 border-l-2 border-purple-300 rounded-r;
}

.action-buttons {
    @apply flex gap-2 mt-3;
}

.accept-suggestion-btn {
    @apply bg-gradient-to-r from-green-500 to-green-600 text-white text-sm px-3 py-1 rounded hover:from-green-600 hover:to-green-700 transition-colors duration-200 flex-1;
}

.quick-add-btn.secondary {
    @apply bg-gray-500 hover:bg-gray-600 flex-1;
}

.suggested-content-details.auto-suggestion {
    @apply border-2 border-purple-300 bg-gradient-to-br from-purple-50 to-pink-50;
}

/* Notification Badge */
.notification-badge {
    @apply bg-red-500 text-white text-xs px-1 py-0.5 rounded-full font-medium ml-2 animate-pulse;
    font-size: 10px;
}

/* Instagram Stats Styles */
.instagram-stat-card {
    @apply bg-gradient-to-r rounded-lg p-4 border transition-all duration-200 hover:shadow-md;
}

.instagram-stat-card .stat-value {
    @apply text-2xl font-bold mb-1;
}

.instagram-stat-card .stat-change {
    @apply text-xs flex items-center;
}

.instagram-stat-card .stat-change.positive {
    @apply text-green-600;
}

.instagram-stat-card .stat-change.negative {
    @apply text-red-600;
}

.instagram-stat-card .stat-change.neutral {
    @apply text-gray-500;
}

/* Instagram Charts */
.instagram-chart-container {
    @apply border border-gray-200 rounded-lg p-4 hover:shadow-sm transition-shadow duration-200;
}

.instagram-chart-title {
    @apply font-semibold mb-3 flex items-center text-gray-800;
}

/* Auto-update indicator */
.auto-update-indicator {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs;
    background: linear-gradient(45deg, #10b981, #34d399);
    color: white;
    animation: pulse 2s infinite;
}

.auto-update-indicator.manual {
    @apply bg-gray-400;
    animation: none;
}

/* Stats loading animation */
.stats-loading {
    @apply animate-pulse;
}

.stats-loading .stat-value,
.stats-loading .stat-change {
    @apply bg-gray-200 rounded;
    height: 1rem;
    width: 4rem;
}

/* Chart hover effects */
.chart-container:hover {
    @apply shadow-lg;
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Instagram brand colors */
.instagram-gradient {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.instagram-text {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.posting-details {
    @apply space-y-2;
}

.existing-content {
    @apply flex items-center p-2 bg-green-50 border border-green-200 rounded;
}

.suggested-content-details {
    @apply space-y-2 p-3 bg-white border border-purple-200 rounded;
}

.suggestion-row {
    @apply flex items-center text-sm;
}

.suggestion-row.optimal-time {
    @apply bg-purple-50 -mx-1 px-1 py-1 rounded;
}

.suggestion-text {
    @apply text-gray-700;
}

.engagement-tip {
    @apply ml-auto text-xs text-purple-600 font-medium;
}

.quick-add-btn {
    @apply bg-purple-500 text-white text-sm px-3 py-1 rounded hover:bg-purple-600 transition-colors duration-200 mt-2;
}

.rest-day-info {
    @apply flex items-center justify-center py-2;
}

/* Responsive Weekly Schedule */
@media (max-width: 768px) {
    .weekly-day-item {
        @apply p-3;
    }
    
    .day-header {
        @apply mb-2;
    }
    
    .suggested-content-details {
        @apply p-2;
    }
    
    .suggestion-row {
        @apply text-xs;
    }
    
    .quick-add-btn {
        @apply text-xs px-2 py-1;
    }
}

/* Utility Classes */
.text-gradient {
    background: linear-gradient(45deg, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.glass-effect {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.8);
}

.shadow-custom {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .calendar-day {
        break-inside: avoid;
    }
}