/* Custom styles */
.gallery-item {
    transition: transform 0.2s ease-in-out;
}

.gallery-item:hover {
    transform: translateY(-5px);
}

/* Prevent FOUC and ensure stable container sizes */
html {
    height: 100%;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

main {
    flex: 1 0 auto;
    width: 100%;
    min-width: 0; /* Prevent flex item from overflowing */
}

footer {
    flex-shrink: 0;
}

/* Container stability styles */
.max-w-7xl {
    max-width: 80rem !important; /* 1280px */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Ensure main content container maintains its size */
main .max-w-7xl {
    flex-shrink: 0;
    min-width: 0;
}

/* Prevent content from shrinking during loading */
.content-container {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    flex-shrink: 0;
}

/* Ensure navigation container is stable */
nav .max-w-7xl {
    flex-shrink: 0;
    min-width: 0;
}

/* Loading animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Responsive grid */
@media (max-width: 640px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1025px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Form styles */
.form-input {
    @apply rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
}

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

.form-error {
    @apply mt-1 text-sm text-red-600;
}

/* Button styles */
.btn-primary {
    @apply bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
}

.btn-secondary {
    @apply bg-white text-gray-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
}

/* Card styles */
.card {
    @apply bg-white rounded-lg shadow-md overflow-hidden;
}

.card-header {
    @apply px-4 py-5 sm:px-6;
}

.card-body {
    @apply px-4 py-5 sm:p-6;
}

/* Modal styles */
.modal {
    @apply fixed inset-0 z-10 overflow-y-auto;
}

.modal-backdrop {
    @apply fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity;
}

.modal-content {
    @apply relative bg-white rounded-lg shadow-xl transform transition-all sm:max-w-lg sm:w-full;
}

/* Notification styles */
.notification {
    @apply fixed top-0 right-0 m-4 p-4 rounded-lg shadow-lg;
}

.notification-success {
    @apply bg-green-500 text-white;
}

.notification-error {
    @apply bg-red-500 text-white;
}

.notification-warning {
    @apply bg-yellow-500 text-white;
}

/* Tooltip styles */
.tooltip {
    @apply absolute z-10 bg-gray-900 text-white text-xs rounded py-1 px-2;
}

/* Avatar styles */
.avatar {
    @apply rounded-full h-8 w-8 object-cover;
}

.avatar-lg {
    @apply rounded-full h-16 w-16 object-cover;
}

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

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

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

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

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

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

/* Custom scrollbar */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f7fafc;
}

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

/* Explore page card styles */
.explore-card {
    height: 320px; /* Fixed height: 48px (image) + 128px (content) + padding */
    display: flex;
    flex-direction: column;
}

.explore-card .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.explore-card .card-content > a {
    flex-shrink: 0;
}

.explore-card .card-content > div {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.explore-card h3 {
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.explore-card p {
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.explore-card p.hidden {
    display: none;
}

.explore-card .flex.items-center.justify-between {
    margin-top: auto;
    flex-shrink: 0;
}

/* Saved page card styles */
.saved-card {
    height: 320px; /* Fixed height: 48px (image) + 128px (content) + padding */
    display: flex;
    flex-direction: column;
}

.saved-card .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.saved-card .card-content > a {
    flex-shrink: 0;
}

.saved-card .card-content > div {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.saved-card h3 {
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saved-card p {
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saved-card p.hidden {
    display: none;
}

.saved-card .flex.items-center.justify-between {
    margin-top: auto;
    flex-shrink: 0;
}

/* User page card styles */
.user-card {
    height: 320px; /* Fixed height: 48px (image) + 128px (content) + padding */
    display: flex;
    flex-direction: column;
}

.user-card .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.user-card .card-content > a {
    flex-shrink: 0;
}

.user-card .card-content > div {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.user-card h3 {
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-card p {
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-card p.hidden {
    display: none;
}

.user-card .flex.items-center.justify-between {
    margin-top: auto;
    flex-shrink: 0;
}

/* Profile page card styles */
.profile-card {
    height: 320px; /* Fixed height: 48px (image) + 128px (content) + padding */
    display: flex;
    flex-direction: column;
}

.profile-card .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.profile-card .card-content > a {
    flex-shrink: 0;
}

.profile-card .card-content > div {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.profile-card h3 {
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-card p {
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-card p.hidden {
    display: none;
}

.profile-card .flex.items-center.justify-between {
    margin-top: auto;
    flex-shrink: 0;
}

/* Series page card styles */
.series-card {
    height: 320px; /* Fixed height: 48px (image) + 128px (content) + padding */
    display: flex;
    flex-direction: column;
}

.series-card .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.series-card .card-content > a {
    flex-shrink: 0;
}

.series-card .card-content > div {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.series-card h3 {
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.series-card p {
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.series-card p.hidden {
    display: none;
}

.series-card .flex.items-center.justify-between {
    margin-top: auto;
    flex-shrink: 0;
}

/* Item page card styles */
.item-card {
    height: 320px; /* Fixed height: 48px (image) + 128px (content) + padding */
    display: flex;
    flex-direction: column;
}

.item-card .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.item-card .card-content > a {
    flex-shrink: 0;
}

.item-card .card-content > div {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.item-card h3 {
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-card p {
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-card p.hidden {
    display: none;
}

.item-card .flex.items-center.justify-between {
    margin-top: auto;
    flex-shrink: 0;
}

/* Like and Save button styles */
.like-btn.liked {
    color: #ef4444;
}

.like-btn.liked svg {
    fill: currentColor;
}

.save-btn.saved {
    color: #3b82f6;
}

.save-btn.saved svg {
    fill: currentColor;
}

/* 3D hover effect */
.explore-card:hover,
.saved-card:hover,
.user-card:hover,
.profile-card:hover,
.series-card:hover,
.item-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Ensure username doesn't overlap with actions */
.explore-card .flex.items-center.min-w-0,
.saved-card .flex.items-center.min-w-0,
.user-card .flex.items-center.min-w-0,
.profile-card .flex.items-center.min-w-0,
.series-card .flex.items-center.min-w-0,
.item-card .flex.items-center.min-w-0 {
    min-width: 0;
    flex: 1;
}

.explore-card .flex.items-center.min-w-0 a,
.saved-card .flex.items-center.min-w-0 a,
.user-card .flex.items-center.min-w-0 a,
.profile-card .flex.items-center.min-w-0 a,
.series-card .flex.items-center.min-w-0 a,
.item-card .flex.items-center.min-w-0 a {
    min-width: 0;
    flex: 1;
}

.explore-card .flex.items-center.min-w-0 span,
.saved-card .flex.items-center.min-w-0 span,
.user-card .flex.items-center.min-w-0 span,
.profile-card .flex.items-center.min-w-0 span,
.series-card .flex.items-center.min-w-0 span,
.item-card .flex.items-center.min-w-0 span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.explore-card .flex.items-center.space-x-3,
.saved-card .flex.items-center.space-x-3,
.user-card .flex.items-center.space-x-3,
.profile-card .flex.items-center.space-x-3,
.series-card .flex.items-center.space-x-3,
.item-card .flex.items-center.space-x-3 {
    flex-shrink: 0;
    margin-left: 8px;
}