/**
 * DemoLab Frontend Styles
 *
 * Uses CSS variables from tpl_tdclab for visual consistency.
 * All classes prefixed with demolab- to avoid collisions.
 */

/* ========================================================================
   Hero
   ======================================================================== */

.demolab-hero {
    text-align: center;
    padding: var(--space-16, 4rem) var(--space-4, 1rem);
    margin-bottom: var(--space-10, 2.5rem);
}

.demolab-hero h1 {
    font-size: var(--font-size-3xl, 2rem);
    font-weight: 700;
    color: var(--color-heading, #1E293B);
    margin: 0 0 var(--space-4, 1rem);
    line-height: 1.2;
}

.demolab-hero p {
    font-size: var(--font-size-lg, 1.125rem);
    color: var(--color-text-muted, #64748B);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ========================================================================
   Filters
   ======================================================================== */

.demolab-filters {
    margin-bottom: var(--space-8, 2rem);
}

.demolab-filter-form {
    max-width: 700px;
    margin: 0 auto;
}

.demolab-filter-row {
    display: flex;
    gap: var(--space-3, 0.75rem);
    align-items: stretch;
}

.demolab-filter-row__search {
    position: relative;
    flex: 1;
    min-width: 0;
}

.demolab-filter-row__icon {
    position: absolute;
    left: var(--space-3, 0.75rem);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted, #6B7280);
    pointer-events: none;
}

.demolab-search-input {
    width: 100%;
    padding-left: calc(var(--space-3, 0.75rem) + 18px + var(--space-2, 0.5rem)) !important;
    background: var(--color-bg-card, #FFFFFF) !important;
}

.demolab-select {
    min-width: 160px;
    width: auto !important;
    box-sizing: border-box;
    background: var(--color-bg-card, #FFFFFF) !important;
}

.demolab-filter-row .btn {
    white-space: nowrap;
}

/* ========================================================================
   Empty State
   ======================================================================== */

.demolab-empty {
    text-align: center;
    padding: var(--space-16, 4rem) var(--space-4, 1rem);
    color: var(--color-text-muted, #64748B);
}

/* ========================================================================
   Demo Detail — Header
   ======================================================================== */

.demolab-demo__header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10, 2.5rem);
    align-items: start;
    margin-bottom: var(--space-10, 2.5rem);
}

.demolab-demo__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
    margin-bottom: var(--space-4, 1rem);
}

.demolab-demo__header-content h1 {
    font-size: var(--font-size-3xl, 2rem);
    font-weight: 700;
    color: var(--color-heading, #1E293B);
    margin: 0 0 var(--space-4, 1rem);
    line-height: 1.2;
}

.demolab-demo__intro {
    color: var(--color-text, #334155);
    line-height: 1.7;
    margin-bottom: var(--space-6, 1.5rem);
}

.demolab-demo__intro p:last-child {
    margin-bottom: 0;
}

/* ========================================================================
   Demo Detail — Sidebar (image, buttons, credentials)
   ======================================================================== */

.demolab-demo__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-6, 1.5rem);
}

.demolab-demo__image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg, 0.75rem);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.demolab-demo__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
}

.demolab-demo__actions .btn {
    text-align: center;
}

/* ========================================================================
   Demo Detail — Credentials
   ======================================================================== */

.demolab-credentials-box {
    background: var(--color-bg-card, #FFFFFF);
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: var(--border-radius-lg, 0.75rem);
    padding: var(--space-6, 1.5rem);
}

.demolab-credentials-box__heading {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-heading, #1E293B);
    margin-bottom: var(--space-3, 0.75rem);
    padding-bottom: var(--space-3, 0.75rem);
    border-bottom: 1px solid var(--color-border, #E5E7EB);
}

.demolab-credentials-box__row {
    display: flex;
    align-items: baseline;
    gap: var(--space-4, 1rem);
    padding: var(--space-2, 0.5rem) 0;
}

.demolab-credentials-box__row + .demolab-credentials-box__row {
    border-top: 1px solid var(--color-border, #E5E7EB);
}

.demolab-credentials-box__label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-text-muted, #64748B);
    min-width: 100px;
    flex-shrink: 0;
}

.demolab-credentials-box__value {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text, #334155);
    word-break: break-all;
}

a.demolab-credentials-box__value {
    color: var(--color-primary, #2563EB);
    text-decoration: none;
}

a.demolab-credentials-box__value:hover {
    text-decoration: underline;
}

code.demolab-credentials-box__value {
    background: var(--color-bg-alt, #F1F3F6);
    padding: 0.15em 0.5em;
    border-radius: var(--border-radius-sm, 0.25rem);
    font-size: var(--font-size-sm, 0.875rem);
    font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
    letter-spacing: 0.025em;
}

/* ========================================================================
   Demo Detail — Instructions
   ======================================================================== */

.demolab-demo__instructions {
    margin-bottom: var(--space-10, 2.5rem);
}

.demolab-demo__instructions h2 {
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: 600;
    color: var(--color-heading, #1E293B);
    margin: 0 0 var(--space-4, 1rem);
}

.demolab-instructions-content {
    background: var(--color-bg-card, #FFFFFF);
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: var(--border-radius-lg, 0.75rem);
    padding: var(--space-6, 1.5rem) var(--space-8, 2rem);
    color: var(--color-text, #334155);
    line-height: 1.7;
}

.demolab-instructions-content h3 {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: 600;
    color: var(--color-heading, #1E293B);
    margin: var(--space-6, 1.5rem) 0 var(--space-3, 0.75rem);
}

.demolab-instructions-content h3:first-child {
    margin-top: 0;
}

.demolab-instructions-content ol,
.demolab-instructions-content ul {
    padding-left: var(--space-6, 1.5rem);
    margin-bottom: var(--space-4, 1rem);
}

.demolab-instructions-content li {
    margin-bottom: var(--space-2, 0.5rem);
}

.demolab-instructions-content code {
    background: var(--color-bg-alt, #F1F3F6);
    padding: 0.15em 0.4em;
    border-radius: var(--border-radius-sm, 0.25rem);
    font-size: 0.9em;
}

/* ========================================================================
   Demo Detail — Back Link
   ======================================================================== */

.demolab-demo__back {
    margin-top: var(--space-10, 2.5rem);
    padding-top: var(--space-6, 1.5rem);
    border-top: 1px solid var(--color-border, #E5E7EB);
}

/* ========================================================================
   Pagination
   ======================================================================== */

.demolab-pagination {
    margin-top: var(--space-10, 2.5rem);
    display: flex;
    justify-content: center;
}

/* ========================================================================
   Responsive
   ======================================================================== */

@media (max-width: 768px) {
    .demolab-hero {
        padding: var(--space-10, 2.5rem) var(--space-4, 1rem);
    }

    .demolab-hero h1 {
        font-size: var(--font-size-2xl, 1.5rem);
    }

    .demolab-filter-row {
        flex-direction: column;
    }

    .demolab-filter-row__search {
        width: 100%;
    }

    .demolab-select {
        width: 100%;
    }

    .demolab-demo__header {
        grid-template-columns: 1fr;
        gap: var(--space-6, 1.5rem);
    }

    .demolab-demo__sidebar {
        order: -1;
    }

    .demolab-credentials-box__row {
        flex-direction: column;
        gap: var(--space-1, 0.25rem);
    }

    .demolab-credentials-box__label {
        min-width: auto;
    }
}