/* ============================================================
   Demo-only helpers
   ------------------------------------------------------------
   style.css is the untouched production theme. This file adds
   the few alert variants and presentation helpers used by the
   static demo pages only. Delete it if you do not need them.
   ============================================================ */

/* Alert variants (built from the same palette as .badge-*) */
.alert-success {
    background: #f0fdf4;
    border-color: #86efac;
    color: #166534;
}
.dark .alert-success {
    background: rgb(20 83 45 / 0.3);
    border-color: rgb(34 197 94 / 0.4);
    color: #86efac;
}

.alert-info {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1e40af;
}
.dark .alert-info {
    background: rgb(30 58 138 / 0.4);
    border-color: rgb(59 130 246 / 0.4);
    color: #bfdbfe;
}

.alert-destructive {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}
.dark .alert-destructive {
    background: rgb(127 29 29 / 0.35);
    border-color: rgb(239 68 68 / 0.4);
    color: #fca5a5;
}

/* Component gallery helpers */
.demo-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.demo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.demo-section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: hsl(var(--muted-foreground));
    margin-bottom: 10px;
}

.demo-swatch {
    height: 64px;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    display: flex;
    align-items: flex-end;
    padding: 8px;
    font-size: 11px;
    font-weight: 600;
}

.demo-swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.demo-page-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
}

@media (max-width: 900px) {
    .demo-page-grid {
        grid-template-columns: 1fr;
    }
}

/* Keep the demo table from stretching the page on small screens */
.table-wrap {
    max-width: 100%;
}