/* nx-debugview.css - Local theme override */

/* DebugView styling — visible only in DEBUG build when component renders */
.nx-debugview {
    font-size: 0.9rem ;
    color: var(--nx-primary-fg) ;
    background: var(--nx-tertiary-bg) ;
    border: 1px solid var(--nx-border-color) ;
    border-radius: var(--nx-border-radius) ;
    padding: var(--nx-space-small) ;
    max-width: 1200px ;
    margin: var(--nx-space-small) 0 ;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02) ;
    line-height: 1.35 ;
    box-sizing: border-box ;
    grid-column: 1/-1 ;
}

    /* Heading */
    .nx-debugview > h3 {
        font-size: 1rem ;
        margin: 0 0 0.4rem 0 ;
        font-weight: 700 ;
        color: var(--nx-primary-fg) ;
    }

    /* small metadata rows */
    .nx-debugview > div {
        margin: 0.125rem 0 ;
        color: var(--nx-muted-fg) ;
        font-size: 0.85rem ;
    }

    /* horizontal rule */
    .nx-debugview hr {
        border: none ;
        height: 1px ;
        background: var(--nx-border-color) ;
        margin: var(--nx-space-small) 0 ;
    }

/* children container */
.nx-debugview-children {
    margin-top: var(--nx-space-small) ;
    padding-top: 0.35rem ;
    border-top: 1px dashed var(--nx-border-color) ;
}

/* notification list */
.nx-debugview ul {
    margin: 0.35rem 0 0 0 ;
    padding-left: var(--nx-space) ;
    list-style: disc ;
}

.nx-debugview li {
    margin: 0.25rem 0 ;
    padding: 0.35rem ;
    background: var(--nx-secondary-bg) ;
    border-radius: var(--nx-border-radius) ;
    display: flex ;
    gap: var(--nx-space-small) ;
    align-items: flex-start ;
    box-sizing: border-box ;
}

    /* make list content wrap and not overflow inside flex */
    .nx-debugview li > div:first-child {
        flex: 1 1 auto ;
        min-width: 0 ;
        word-break: break-word ;
    }

/* small action buttons */
.nx-debugview button {
    font-size: 0.82rem ;
    padding: 0.25rem 0.45rem ;
    border-radius: var(--nx-border-radius) ;
    background: transparent ;
    border: 1px solid var(--nx-border-color) ;
    color: var(--nx-primary-fg) ;
    cursor: pointer ;
}

    /* subtle hover for buttons */
    .nx-debugview button:hover {
        background: var(--nx-highlight-bg) ;
    }

/* responsive tweak */
@media (max-width: 640px) {
    .nx-debugview {
        font-size: 0.85rem ;
        padding: 0.45rem ;
    }

        .nx-debugview button {
            padding: 0.2rem 0.4rem ;
        }
}