/* static/css/style.css */
body {
    font-family: 'Inter', sans-serif;
    background-color: #0d1117; /* Fallback color */
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(34, 211, 238, 0.01), /* Grid line color */
            rgba(34, 211, 238, 0.01) 1px, /* Grid line thickness */
            transparent 1px,
            transparent 50px /* Grid line spacing */
        ),
        repeating-linear-gradient(
            90deg,
            rgba(34, 211, 238, 0.01), /* Grid line color */
            rgba(34, 211, 238, 0.01) 1px, /* Grid line thickness */
            transparent 1px,
            transparent 50px /* Grid line spacing */
        ),
        linear-gradient(180deg, #1a1f36 0%, #0c0e1a 70%, #0a0c13 100%),
        radial-gradient(ellipse at center, rgba(34, 211, 238, 0.05) 0%, transparent 70%);
    background-size:
        50px 50px,
        50px 50px,
        100% 100%,
        100% 100%;
    background-position: 0 0, 0 0, 0 0, 0 0; /* JS will adjust */
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    background-blend-mode: normal, normal, normal, overlay;
    color: #D1D5DB; /* Tailwind's text-gray-300 */
    display: flex;
    flex-direction: column;
    /* justify-content: center; // We might remove this for pages with more content */
    align-items: center;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden; /* Allow vertical scroll, hide horizontal */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.name-container {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInName 1s ease-out forwards;
    animation-delay: 0.5s;
}

@keyframes fadeInName {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-link {
    position: relative;
    overflow: visible;
    transition: color 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInLink 0.6s ease-out forwards;
    cursor: pointer;
    padding: 0.75rem 1rem;
    --underline-scale: 0;
    --underline-origin: left;
}

.nav-link:nth-child(1) { animation-delay: 1.0s; }
.nav-link:nth-child(2) { animation-delay: 1.2s; }
.nav-link:nth-child(3) { animation-delay: 1.4s; }
/* If you have more nav links (e.g. back to home on movies page), you might need more animation delays or a general approach */

@keyframes fadeInLink {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #22D3EE; /* Tailwind cyan-400 */
    transform: scaleX(var(--underline-scale));
    transform-origin: var(--underline-origin);
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.nav-link:hover {
    color: #67E8F9; /* Lighter cyan on hover */
    transform: translateY(-2px);
}

/* .content-wrapper is defined in index.html, we'll make it more generic if needed for base.html */
/* We'll define a main-content area for scrolling within the base template */
.main-content-area {
    width: 100%;
    max-width: 64rem; /* Tailwind's max-w-6xl */
    padding: 1rem; /* p-4 */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center; /* Default, can be overridden */
    /* overflow-y: auto; /* Allow scrolling for content within this area if needed */
}


@media (min-width: 768px) {
    .nav-links-container { /* This class is in index.html's nav */
        gap: 3rem;
    }
    .nav-link {
        padding: 1rem 1.5rem;
    }
}

/* Specific styles for movies.html will be added here or done with Tailwind */
/* For example, form and table styles */
.form-section, .list-section {
    @apply bg-slate-800 bg-opacity-50 p-6 rounded-lg shadow-xl mb-8 w-full;
}

.form-input {
    @apply mt-1 block w-full bg-slate-700 border-slate-600 text-gray-300 rounded-md shadow-sm focus:border-cyan-500 focus:ring focus:ring-cyan-500 focus:ring-opacity-50;
}

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

.btn-primary {
    @apply mt-4 px-6 py-2 bg-cyan-600 hover:bg-cyan-500 text-white font-semibold rounded-lg shadow-md transition-colors duration-150 ease-in-out;
}
.btn-secondary {
     @apply px-4 py-2 bg-sky-600 hover:bg-sky-500 text-white font-semibold rounded-lg shadow-md transition-colors duration-150 ease-in-out;
}

.btn-danger {
    @apply px-3 py-1 bg-red-600 hover:bg-red-500 text-white text-sm font-semibold rounded-md shadow-sm transition-colors duration-150 ease-in-out;
}

table.movie-table {
    @apply w-full text-left border-collapse;
}
table.movie-table th, table.movie-table td {
    @apply p-3 border-b border-slate-700;
}
table.movie-table th {
    @apply text-sm font-semibold text-gray-400 bg-slate-800 uppercase tracking-wider;
}
table.movie-table td {
    @apply text-gray-300;
}