/* Project-settings dialog — 2-pane (left group nav / right content). Global, not component-scoped:
   the dialog content is teleported under body > .rz-dialog-wrapper. Design tokens (--c-*, --fz-*,
   --f-*) resolve via the :has(.forge-shell) bridge in forge-workbench.css. */

.psettings {
    display: flex;
    flex-direction: column;
    width: 100%; /* the dialog box width is set via DialogOptions; fill its content area */
    height: min(520px, 78vh);
    font-family: var(--f-sans);
    color: var(--c-text);
}

.psettings__body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--c-bg-editor);
}

/* ── Left nav ── */
.psettings__nav {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .5rem;
    background: var(--c-bg-tool);
    border-right: 1px solid var(--c-border);
    overflow-y: auto;
}

.psettings__nav-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .5rem .65rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--c-text-dim);
    font-family: var(--f-sans);
    font-size: var(--fz-md);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

.psettings__nav-item:hover {
    background: var(--c-bg-hover);
    color: var(--c-text);
}

.psettings__nav-item.is-active {
    background: var(--c-bg-active);
    color: #fff;
    border-color: var(--c-border-strong);
}

.psettings__nav-item .rzi,
.psettings__nav-item .rz-icon {
    font-size: 18px;
}

/* ── Right content ── */
.psettings__content {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden auto;
    padding: 1.1rem 1.25rem;
}

.psettings__section-title {
    margin: 0 0 .25rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

.psettings__section-sub {
    margin: 0 0 1rem;
    font-size: var(--fz-sm);
    color: var(--c-text-mute);
}

.psettings__field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: 1rem;
}

.psettings__label {
    font-size: var(--fz-sm);
    color: var(--c-text-dim);
}

.psettings__hint {
    font-size: var(--fz-sm);
    color: var(--c-text-mute);
}

.psettings__row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* ── Env-vars editor ── */
.psettings__env {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.psettings__env-head,
.psettings__env-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr 32px;
    gap: .5rem;
    align-items: center;
}

.psettings__env-head {
    font-size: var(--fz-xs);
    color: var(--c-text-mute);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 0 .15rem;
}

.psettings__env input {
    width: 100%;
    box-sizing: border-box;
    background: var(--c-bg-deepest);
    border: 1px solid var(--c-border-strong);
    border-radius: 7px;
    padding: .45rem .6rem;
    color: var(--c-text);
    font-family: var(--f-mono);
    font-size: var(--fz-sm);
}

.psettings__env input:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(78, 201, 176, .22);
}

.psettings__env-del {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--c-border-strong);
    border-radius: 7px;
    background: transparent;
    color: var(--c-text-dim);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

.psettings__env-del:hover {
    background: var(--rz-danger-lighter, rgba(239, 95, 107, .14));
    color: var(--c-error);
    border-color: var(--c-error);
}

.psettings__env-empty {
    padding: .85rem;
    text-align: center;
    color: var(--c-text-mute);
    font-size: var(--fz-sm);
    border: 1px dashed var(--c-border);
    border-radius: 8px;
}

/* ── Footer ── */
.psettings__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    padding-top: .9rem;
    margin-top: .9rem;
    border-top: 1px solid var(--c-border);
}

.psettings__msg {
    margin-right: auto;
    font-size: var(--fz-sm);
    font-weight: 500;
}