/*
 * The element inspector (structurizr-inspector.js). .sx-inspector is the
 * floating panel; .sx-insp is its content, which the review page also uses
 * inline.
 */

.sx-inspector {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 20;
    width: 360px;
    max-width: calc(100% - 1.5rem);
    max-height: calc(100% - 1.5rem);
    overflow-y: auto;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
}
.sx-inspector[hidden] { display: none; }
.sx-inspector .sx-insp { padding: 0.9rem 1rem 1.1rem; }

.sx-insp { font-size: 0.875rem; }

.sx-insp-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.sx-insp-titles { flex: 1 1 auto; min-width: 0; }
.sx-insp-close { flex-shrink: 0; margin-top: 0.15rem; }

.sx-insp-kind {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}
.sx-insp-name {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0.1rem 0 0.15rem;
    overflow-wrap: anywhere;
}
.sx-insp-sub { color: var(--bs-secondary-color); }

.sx-insp-desc { margin: 0.75rem 0 0.6rem; }
.is-missing {
    color: var(--bs-secondary-color);
    font-style: italic;
}

.sx-insp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
}
.sx-insp-actions .btn { font-size: 0.78rem; padding: 0.15rem 0.5rem; }

.sx-insp-section { margin-top: 1rem; }
.sx-insp-heading {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin: 0 0 0.35rem;
}
.sx-insp-count {
    font-weight: 500;
    letter-spacing: 0;
}

.sx-insp-rels, .sx-insp-plain, .sx-insp-findings {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sx-insp-rels > li {
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.sx-insp-rels > li:last-child { border-bottom: 0; }
.sx-insp-rel-line { display: flex; gap: 0.4rem; }
.sx-insp-arrow { color: var(--bs-secondary-color); }
.sx-insp-rel-meta {
    padding-left: 1.2rem;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}
.sx-insp-more { padding-top: 0.3rem; }

.sx-insp-element { font-weight: 500; }
a.sx-insp-element { text-decoration: none; }
a.sx-insp-element:hover { text-decoration: underline; }

.sx-insp-plain > li { padding: 0.1rem 0; overflow-wrap: anywhere; }
.sx-insp-view-kind {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.sx-insp-findings > li {
    display: flex;
    gap: 0.45rem;
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.25rem;
    border-left: 3px solid var(--bs-warning);
    background: var(--bs-warning-bg-subtle);
    border-radius: 0 0.25rem 0.25rem 0;
}
.sx-insp-findings > li.is-blocking {
    border-left-color: var(--bs-danger);
    background: var(--bs-danger-bg-subtle);
}

.sx-insp-empty {
    margin: 0;
    color: var(--bs-secondary-color);
}

.sx-insp-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.sx-insp-tags .badge { font-weight: 500; }
[data-bs-theme="dark"] .sx-insp-tags .badge {
    background: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
}

@media print {
    .sx-inspector { display: none !important; }
}