/* Dokumente und Einbettung (UX 6 NCNXDASH-72, Bedienkonzept 4.5): Auswahlliste mit Archiv als zweiter Zeile und
 * Favoriten-Stern, iframe über die restliche Höhe mit Skeleton. Nur Tokens, keine Hex-Werte.
 */

/* Seiten ohne App-Rahmen (Anmeldung, in DocuWare eingebettete Seiten /integration/*), ab 320 px. */
.nx-bare { box-sizing: border-box; min-height: 100dvh; padding: var(--nx-space-4); background: var(--nx-bg); }
.nx-bare:focus { outline: none; }

@media (max-width: 480px) {
    .nx-bare { padding: var(--nx-space-3); }
}

.nx-embed {
    --nx-embed-height: max(24rem, calc(100dvh - var(--nx-shell-topbar-h, 56px) - 13rem));
    display: grid;
    grid-template-columns: 18rem minmax(0, 1fr);
    gap: var(--nx-space-4);
    align-items: start;
}

.nx-embed__list {
    max-height: var(--nx-embed-height);
    overflow: auto;
    padding: var(--nx-space-2);
    border: var(--nx-border-w) solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
}

.nx-embed__select { display: none; }
.nx-embed__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--nx-space-1); }

.nx-embed__item { display: flex; align-items: stretch; border-radius: var(--nx-radius-sm); }
.nx-embed__item:hover { background: var(--nx-ui-hover); }
.nx-embed__item.is-active { background: var(--nx-ui-hover); box-shadow: inset 3px 0 0 var(--nx-accent); }

.nx-embed__open {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--nx-space-2);
    padding: var(--nx-space-2) var(--nx-space-2) var(--nx-space-2) var(--nx-space-3);
    border: 0;
    background: none;
    color: var(--nx-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.nx-embed__mark { flex-shrink: 0; width: 4px; align-self: stretch; border-radius: var(--nx-radius-pill); }
.nx-embed__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Namen brechen um statt abgeschnitten zu werden (Befund der Bestandsaufnahme: verdeckte Texte). */
.nx-embed__name { font-size: var(--nx-text-small); font-weight: var(--nx-weight-semibold); overflow-wrap: anywhere; }
.nx-embed__cabinet { font-size: var(--nx-text-micro); color: var(--nx-text-secondary); overflow-wrap: anywhere; }
.nx-embed__item.is-active .nx-embed__name { color: var(--nx-text); }

.nx-embed__star {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: none;
    color: var(--nx-text-muted);
    cursor: pointer;
}

.nx-embed__star svg path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.nx-embed__star:hover { color: var(--nx-text); }
.nx-embed__star.is-on { color: var(--nx-emphasis); }
.nx-embed__star.is-on svg path { fill: var(--nx-accent); stroke: var(--nx-emphasis); }

@media (pointer: coarse) {
    .nx-embed__star { width: var(--nx-tap-min); }
    .nx-embed__open { min-height: var(--nx-tap-min); }
}

.nx-embed__frames {
    position: relative;
    height: var(--nx-embed-height);
    overflow: hidden;
    border: var(--nx-border-w) solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
}

.nx-embed__frame { display: block; width: 100%; height: 100%; border: 0; background: var(--nx-white); }
.nx-embed__frame[hidden] { display: none; }
.nx-embed__loading { position: absolute; inset: 0; padding: var(--nx-space-4); background: var(--nx-surface); }
.nx-embed__loading .nx-skeleton, .nx-embed__loading .nx-skeleton__shape { height: 100%; }

@media (max-width: 767px) {
    .nx-embed { grid-template-columns: minmax(0, 1fr); }
    .nx-embed__list { max-height: none; padding: 0; border: 0; background: none; }
    .nx-embed__select { display: block; }
    .nx-embed__items { display: none; }
    .nx-embed__frames { --nx-embed-height: max(24rem, calc(100dvh - var(--nx-shell-topbar-h, 56px) - 16rem)); }
}