/* ─── Gerador de Carrossel IA — Custom Styles ─────────────────────────────── */

/* ── Base ───────────────────────────────────────────────────────────────────── */

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

:root {
    --brand-primary:   #6366f1;
    --brand-secondary: #818cf8;
    --bg-page:         #030712;   /* gray-950 */
    --bg-card:         #111827;   /* gray-900 */
    --border-color:    #1f2937;   /* gray-800 */
    --text-primary:    #f9fafb;   /* gray-50  */
    --text-secondary:  #9ca3af;   /* gray-400 */
}

html, body {
    margin: 0;
    padding: 0;
}

/* ── Typography ─────────────────────────────────────────────────────────────── */

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar (webkit) ─────────────────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track  { background: #1f2937; }
::-webkit-scrollbar-thumb  { background: #4b5563; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #6b7280; }

/* ── Form inputs (override browser defaults) ────────────────────────────────── */

input[type="color"] {
    padding: 2px;
    cursor: pointer;
}

input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #374151;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--brand-primary);
    cursor: pointer;
    border: 2px solid #1f2937;
}

input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--brand-primary);
    cursor: pointer;
    border: 2px solid #1f2937;
}

/* ── Card hover effects ─────────────────────────────────────────────────────── */

.card-hover {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.15);
}

/* ── Carousel card image ────────────────────────────────────────────────────── */

.carousel-card-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* ── Loading spinner animation ──────────────────────────────────────────────── */

@keyframes spin {
    to { transform: rotate(360deg); }
}

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

/* ── Status badges ──────────────────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.badge-ready      { background: #14532d; color: #86efac; }
.badge-draft      { background: #374151; color: #d1d5db; }
.badge-generating { background: #78350f; color: #fde68a; }
.badge-failed     { background: #7f1d1d; color: #fca5a5; }

/* ── Flash messages ─────────────────────────────────────────────────────────── */

.flash-success {
    background: rgba(20, 83, 45, 0.5);
    border: 1px solid #166534;
    color: #86efac;
}

.flash-error {
    background: rgba(127, 29, 29, 0.5);
    border: 1px solid #991b1b;
    color: #fca5a5;
}

/* ── Button states ──────────────────────────────────────────────────────────── */

button:disabled,
button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── File input ─────────────────────────────────────────────────────────────── */

input[type="file"]::file-selector-button {
    cursor: pointer;
}

/* ── Details/Summary (log data) ─────────────────────────────────────────────── */

details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}

/* ── Table responsive ───────────────────────────────────────────────────────── */

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Prose clamp ────────────────────────────────────────────────────────────── */

.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Toast (optional future use) ───────────────────────────────────────────── */

.toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-success {
    background: #14532d;
    color: #86efac;
    border: 1px solid #166534;
}

.toast-error {
    background: #7f1d1d;
    color: #fca5a5;
    border: 1px solid #991b1b;
}