/*
 * Shared styles for the auth pages (login, choice, catalog, upload, admin).
 *
 * Only rules that are identical across pages live here; everything else
 * stays in each page's own <style> block. Load this stylesheet BEFORE the
 * page's inline <style> so page-specific rules keep winning the cascade
 * (e.g. admin.html overrides the body background with its flat colors).
 */

/* Base reset — identical on all pages */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

/* Page background/typography — shared by login, choice, catalog and upload.
   admin.html overrides the background colors in its own <style>. */
body {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-family: system-ui, -apple-system, sans-serif;
    color: #333;
}

@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        color: #e0e0e0;
    }
}

/* Navbar user info — shared by catalog and admin (catalog adds min-width
   in its own <style>) */
.user-info {
    font-size: 0.9rem;
    color: #666;
}

@media (prefers-color-scheme: dark) {
    .user-info {
        color: #999;
    }
}

/* Form layout — shared by login, upload and admin */
.form-group {
    margin-bottom: 1.5rem;
}

/* Message colors — shared across pages. The base .message box model
   (padding/margin/animation) differs per page and stays in the page styles.
   upload.html's .success-message intentionally uses a softer green and
   also stays in the page styles. */
.message.error,
.error-message {
    background: #fee;
    color: #c33;
    border: 1px solid #fcc;
}

.message.success {
    background: #efe;
    color: #3c3;
    border: 1px solid #cfc;
}

@media (prefers-color-scheme: dark) {
    .message.error,
    .error-message {
        background: #3a2222;
        color: #ff9999;
        border-color: #5a3333;
    }

    .message.success {
        background: #223322;
        color: #99ff99;
        border-color: #335533;
    }
}

/* Empty-state icon — shared by catalog and admin */
.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* Shared animations. The per-page .loader rules differ visually
   (16px white vs 40px indigo vs 16px indigo) and stay in the pages;
   only the keyframes are common. */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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