/*
 * Freebuff Image Host — Styles
 *
 * Development: Uses Tailwind CSS CDN (add to HTML head)
 * Production:  npx tailwindcss -i ./src/input.css -o ./public/assets/css/app.css --minify
 */

/* ─── Base ─────────────────────────────────────────────────────── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ─── Theme Variables ──────────────────────────────────────────── */
:root {
    --bg-body: #ffffff;
    --bg-surface: #f8fafc;
    --bg-surface-alt: #f1f5f9;
    --bg-elevated: #e2e8f0;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --radius: 0.5rem;
}

html.dark {
    --bg-body: #09090b;
    --bg-surface: #18181b;
    --bg-surface-alt: #27272a;
    --bg-elevated: #3f3f46;
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --border: #27272a;
    --border-strong: #3f3f46;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-body);
    color: var(--text-primary);
}

/* ─── Light-mode Tailwind zinc overrides ───────────────────────── */
html:not(.dark) .bg-zinc-950 { background-color: var(--bg-body); }
html:not(.dark) .bg-zinc-900 { background-color: var(--bg-surface); }
html:not(.dark) .bg-zinc-900\/50 { background-color: color-mix(in srgb, var(--bg-surface) 50%, transparent); }
html:not(.dark) .bg-zinc-800 { background-color: var(--bg-surface-alt); }

html:not(.dark) .border-zinc-800 { border-color: var(--border); }
html:not(.dark) .border-zinc-700 { border-color: var(--border-strong); }

html:not(.dark) .text-zinc-100 { color: var(--text-primary); }
html:not(.dark) .text-zinc-200 { color: var(--text-primary); }
html:not(.dark) .text-zinc-300 { color: var(--text-secondary); }
html:not(.dark) .text-zinc-400 { color: var(--text-secondary); }
html:not(.dark) .text-zinc-500 { color: var(--text-muted); }
html:not(.dark) .text-zinc-600 { color: var(--text-muted); }

html:not(.dark) .placeholder-zinc-500::-webkit-input-placeholder { color: var(--text-muted); }
html:not(.dark) .placeholder-zinc-500::placeholder { color: var(--text-muted); }

html:not(.dark) .bg-zinc-800\/90 { background-color: color-mix(in srgb, var(--bg-surface-alt) 90%, transparent); }
html:not(.dark) .bg-zinc-800\/60 { background-color: color-mix(in srgb, var(--bg-surface-alt) 60%, transparent); }
html:not(.dark) .hover\:bg-zinc-800\/60:hover { background-color: color-mix(in srgb, var(--bg-surface-alt) 60%, transparent); }
html:not(.dark) .bg-zinc-800\/80 { background-color: color-mix(in srgb, var(--bg-surface-alt) 80%, transparent); }

html:not(.dark) .bg-black\/60 { background-color: rgba(0, 0, 0, 0.5); }
html:not(.dark) .bg-black\/90 { background-color: rgba(0, 0, 0, 0.85); }
html:not(.dark) .bg-black\/40 { background-color: rgba(0, 0, 0, 0.35); }

html:not(.dark) .hover\:bg-zinc-700:hover { background-color: var(--bg-elevated); }
html:not(.dark) .hover\:bg-zinc-900\/50:hover { background-color: color-mix(in srgb, var(--bg-surface) 50%, transparent); }

/* Selection checkbox in light mode */
html:not(.dark) .bg-zinc-800\/80 { background-color: var(--bg-surface-alt); }

/* Scrollbar light mode */
html:not(.dark) ::-webkit-scrollbar-track { background: #f1f5f9; }
html:not(.dark) ::-webkit-scrollbar-thumb { background: #cbd5e1; }
html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Subtle depth for cards in light mode — flat white-on-white otherwise
   reads as harsh/flat; a faint shadow gives just enough separation
   without gradients or heavy borders. Dark mode already has enough
   contrast from its own surface colors and doesn't need this. */
html:not(.dark) .rounded-lg.border,
html:not(.dark) .rounded-xl.border {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
}

/* ─── Upload job status colors (theme-aware, not tied to generic
   Tailwind red/emerald utilities so they can't regress the toast or
   lightbox fixes that intentionally keep those elements dark-styled) ── */
.job-status-success { color: #34d399; }
.job-status-error   { color: #f87171; }
.job-status-waiting { color: #71717a; }
.job-status-uploading { color: #a1a1aa; }

html:not(.dark) .job-status-success { color: #059669; }
html:not(.dark) .job-status-error   { color: #dc2626; }
html:not(.dark) .job-status-waiting { color: #94a3b8; }
html:not(.dark) .job-status-uploading { color: #64748b; }

/* ─── Respect reduced-motion preference ──────────────────────────
   Loading spinners keep spinning (they convey real state, not
   decoration), but purely cosmetic transitions/animations are
   disabled for users who've asked the OS to minimize motion. */
@media (prefers-reduced-motion: reduce) {
    *:not(.animate-spin):not(.animate-spin *) {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

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

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

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

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ─── Focus styles ─────────────────────────────────────────────── */
button:focus-visible,
input:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid rgb(161 161 170);
    outline-offset: 2px;
}

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

::-webkit-scrollbar-track {
    background: rgb(24 24 27);
}

::-webkit-scrollbar-thumb {
    background: rgb(63 63 70);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(82 82 91);
}

/* ─── Image card ───────────────────────────────────────────────── */
.image-card {
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.image-card:hover {
    transform: translateY(-1px);
}

/* ─── Checkbox (sr-only keeps it accessible, custom visual) ────── */
.select-checkbox input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Light-mode: keep selection checkbox dark */
html:not(.dark) .select-checkbox .bg-zinc-800\/80 { background-color: #27272a; }
html:not(.dark) .select-checkbox .border-zinc-500 { border-color: #71717a; }
html:not(.dark) .select-checkbox .bg-zinc-100 { background-color: #fafafa; }
html:not(.dark) .select-checkbox .border-zinc-100 { border-color: #fafafa; }

/* Light-mode: image card hover border */
html:not(.dark) .hover\:border-zinc-600:hover { border-color: #94a3b8; }
html:not(.dark) .hover\:border-zinc-500:hover { border-color: #64748b; }
html:not(.dark) .active\:border-zinc-400:active { border-color: #475569; }

/* Light-mode: delete buttons — the dark-red/light-red combo tuned for the
   zinc-950 dashboard background is nearly invisible on white, so give
   these a proper light-red treatment instead. Scoped by selector (not the
   raw Tailwind red-900/red-400 classes) so it doesn't touch the toast or
   confirm-dialog, which intentionally stay dark-themed in light mode. */
html:not(.dark) .action-delete,
html:not(.dark) .recent-delete,
html:not(.dark) .lightbox-action-delete,
html:not(.dark) #details-action-delete,
html:not(.dark) #delete-selected-btn {
    background-color: #fee2e2;
    color: #dc2626;
}
html:not(.dark) .action-delete:hover,
html:not(.dark) .recent-delete:hover,
html:not(.dark) .lightbox-action-delete:hover,
html:not(.dark) #details-action-delete:hover,
html:not(.dark) #delete-selected-btn:hover {
    background-color: #fecaca;
    color: #b91c1c;
}

/* ─── Toast container ──────────────────────────────────────────── */
#toast-container {
    pointer-events: none;
}

#toast-container > div {
    pointer-events: auto;
}

/* Toasts stay dark in light mode */
html:not(.dark) #toast-container > div {
    background-color: #18181b;
    border-color: #27272a;
    color: #e4e4e7;
}

/* ─── Upload zone keyboard focus ───────────────────────────────── */
#upload-zone:focus-visible {
    outline: 2px solid rgb(161 161 170);
    outline-offset: 2px;
}

/* ─── Dialog backdrop ──────────────────────────────────────────── */
#confirm-dialog {
    transition: background-color 0.15s ease;
}

/* Confirmation dialog stays dark-themed in light mode. #dialog-title and
   #dialog-message carry their own text-zinc-* classes, which the global
   light-mode overrides above would otherwise remap to *light*-theme text
   colors — landing as dark-on-dark on this still-dark dialog. Restore
   the true dark-mode values for them specifically, same pattern as the
   details panel and lightbox fixes. */
html:not(.dark) .dialog-content {
    background-color: #18181b;
    border-color: #27272a;
    color: #fafafa;
}
html:not(.dark) #dialog-title {
    color: #fafafa;
}
html:not(.dark) #dialog-message {
    color: #a1a1aa;
}
html:not(.dark) #dialog-cancel {
    background-color: #27272a;
    color: #d4d4d8;
}
html:not(.dark) #dialog-cancel:hover {
    background-color: #3f3f46;
}

/* ─── Responsive utilities ─────────────────────────────────────── */
@media (max-width: 640px) {
    /* Smaller grid gap on tiny screens */
    #image-grid {
        gap: 0.5rem;
    }

    /* Action buttons stack on very narrow screens */
    .image-card .flex.items-center.gap-1 {
        flex-wrap: wrap;
    }
}

/* ─── Selection ring animation ─────────────────────────────────── */
.image-card.ring-1 {
    box-shadow: 0 0 0 1px rgb(161 161 170);
}

/* ─── Details Panel ────────────────────────────────────────────── */
#details-panel {
    will-change: transform;
}

/* Light-mode: panel stays dark */
html:not(.dark) #details-panel {
    background-color: #18181b;
    border-color: #27272a;
    color: #fafafa;
}

html:not(.dark) #details-panel label {
    color: #71717a;
}

html:not(.dark) #details-panel .bg-zinc-800 {
    background-color: #27272a;
}

html:not(.dark) #details-panel button {
    background-color: #27272a;
    color: #d4d4d8;
}

html:not(.dark) #details-panel button:hover {
    background-color: #3f3f46;
}

/* The panel deliberately stays dark-themed in light mode (see above), but
   the generic light-mode overrides for text-zinc-* below remap those
   classes to *light*-theme text colors, which land on this still-dark
   panel as unreadable dark-on-dark text. Restore the true dark-mode
   values for anything inside the panel. */
html:not(.dark) #details-panel .text-zinc-100 { color: #f4f4f5; }
html:not(.dark) #details-panel .text-zinc-200 { color: #e4e4e7; }
html:not(.dark) #details-panel .text-zinc-300 { color: #d4d4d8; }
html:not(.dark) #details-panel .text-zinc-400 { color: #a1a1aa; }
html:not(.dark) #details-panel .text-zinc-500 { color: #71717a; }
html:not(.dark) #details-panel .hover\:text-zinc-100:hover { color: #f4f4f5; }
html:not(.dark) #details-panel .hover\:text-zinc-200:hover { color: #e4e4e7; }

/* ─── Lightbox ──────────────────────────────────────────────────── */
/* Same situation: the lightbox stays black/dark in light mode, so its
   text must keep its dark-mode colors instead of the light-mode remap. */
html:not(.dark) #lightbox .text-zinc-100 { color: #f4f4f5; }
html:not(.dark) #lightbox .text-zinc-200 { color: #e4e4e7; }
html:not(.dark) #lightbox .text-zinc-300 { color: #d4d4d8; }
html:not(.dark) #lightbox .text-zinc-400 { color: #a1a1aa; }
html:not(.dark) #lightbox .text-zinc-500 { color: #71717a; }
html:not(.dark) #lightbox .bg-zinc-800 { background-color: #27272a; }
html:not(.dark) #lightbox .hover\:bg-zinc-700:hover { background-color: #3f3f46; }
html:not(.dark) #lightbox .hover\:text-zinc-100:hover { color: #f4f4f5; }
html:not(.dark) #lightbox .hover\:text-zinc-200:hover { color: #e4e4e7; }

/* ─── Filter bar selects / search input ──────────────────────── */
#filter-bar select,
#filter-bar input[type="search"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#filter-bar select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2371717a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2rem;
}

/* Lightbox ─────────────────────────────────────────────────── */
#lightbox {
    transition: background-color 0.2s ease;
}

#lightbox-img {
    transition: opacity 0.15s ease;
    max-height: calc(100vh - 140px);
    max-width: 100%;
}

/* Thumbnail area acts as a click target for the lightbox */
.image-card .aspect-square {
    cursor: zoom-in;
}

/* Prevent lightbox buttons from triggering card click propagation */
#lightbox button {
    cursor: pointer;
}

/* Lightbox nav arrows — hide on very small screens, show on tap */
@media (max-width: 480px) {
    #lightbox-prev,
    #lightbox-next {
        opacity: 0.7;
    }
    #lightbox-prev:active,
    #lightbox-next:active {
        opacity: 1;
    }
}