// Config browser — save/load modal over the lobby.
//
// ⚠️ Rendered inside the lobby's root, which is `pointer-events: none`, so this
// has to opt back in. A panel that declares neither is silently un-hit-testable
// in s&box — that was the lobby's own bug.

.configbrowser
{
    font-family: Inter;

    // Full-screen scrim, so a click outside the sheet cannot reach the lobby
    // behind it. A modal that lets you press the button underneath it is worse
    // than no modal.
    position: absolute;
    top: 0px; left: 0px;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;

    pointer-events: all;
    background-color: rgba( 4, 6, 10, 0.72 );

    .sheet
    {
        flex-direction: column;
        width: 460px;
        max-height: 70%;
        background-color: rgba( 16, 18, 22, 0.98 );
        border: 1px solid rgba( 255, 255, 255, 0.14 );
        border-radius: 8px;
        overflow: hidden;
    }

    .head
    {
        flex-direction: row;
        align-items: center;
        flex-shrink: 0;
        padding: 14px 18px;
        background-color: rgba( 255, 255, 255, 0.05 );
        border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );

        .title { font-size: 17px; color: #fff; }

        .map
        {
            margin-left: 10px;
            font-size: 12px;
            color: rgba( 255, 255, 255, 0.35 );
            flex-grow: 1;
        }

        .x
        {
            font-size: 15px;
            color: rgba( 255, 255, 255, 0.35 );
            padding: 2px 6px;
            border-radius: 4px;
            cursor: pointer;

            &:hover { color: #fff; background-color: rgba( 255, 255, 255, 0.10 ); }
        }
    }

    // ── save ────────────────────────────────────────────────────────────────

    .body
    {
        flex-direction: column;
        padding: 18px;

        .fieldlabel
        {
            font-size: 12px;
            color: rgba( 255, 255, 255, 0.40 );
            margin-bottom: 6px;
        }

        .nameentry
        {
            height: 34px;
            padding: 0px 10px;
            font-size: 15px;
            color: #fff;
            background-color: rgba( 0, 0, 0, 0.45 );
            border: 1px solid rgba( 255, 255, 255, 0.14 );
            border-radius: 4px;

            &:focus { border-color: #ffd479; }
        }

        .warn
        {
            margin-top: 8px;
            font-size: 12px;
            color: #ff8a8a;

            // Overwriting is a warning, not an error — the button still works.
            &.overwrite { color: #ffcf5c; }
        }

        .summary
        {
            margin-top: 14px;
            font-size: 12px;
            color: rgba( 255, 255, 255, 0.35 );
        }
    }

    // ── load ────────────────────────────────────────────────────────────────

    .list
    {
        flex-direction: column;
        flex-grow: 1;
        flex-shrink: 1;
        overflow-y: scroll;
        padding: 8px;

        .empty
        {
            padding: 22px;
            font-size: 13px;
            color: rgba( 255, 255, 255, 0.30 );
            align-items: center;
            justify-content: center;
        }

        .row
        {
            flex-direction: row;
            align-items: center;
            padding: 11px 14px;
            margin-bottom: 4px;
            border-radius: 4px;
            background-color: rgba( 255, 255, 255, 0.04 );
            cursor: pointer;

            &:hover { background-color: rgba( 255, 255, 255, 0.09 ); }

            .name { font-size: 15px; color: #fff; flex-grow: 1; }

            .badge
            {
                font-size: 11px;
                color: #7ad17a;
                padding: 2px 8px;
                border: 1px solid rgba( 122, 209, 122, 0.45 );
                border-radius: 10px;
            }

            &.sel
            {
                background-color: rgba( 255, 212, 121, 0.16 );
                border: 1px solid rgba( 255, 212, 121, 0.45 );
            }
        }
    }

    // ── footer ──────────────────────────────────────────────────────────────

    .foot
    {
        flex-direction: row;
        justify-content: flex-end;
        flex-shrink: 0;
        padding: 12px 18px;
        border-top: 1px solid rgba( 255, 255, 255, 0.08 );

        .btn
        {
            padding: 9px 20px;
            margin-left: 8px;
            font-size: 14px;
            color: #0e1014;
            background-color: #ffd479;
            border-radius: 4px;
            cursor: pointer;

            &:hover { background-color: #ffe1a0; }

            &.ghost
            {
                color: rgba( 255, 255, 255, 0.65 );
                background-color: rgba( 255, 255, 255, 0.07 );

                &:hover { color: #fff; background-color: rgba( 255, 255, 255, 0.14 ); }
                &.armed { color: #ff8a8a; border: 1px solid rgba( 255, 138, 138, 0.5 ); }
            }

            // Destructive actions never wear the same colour as the safe one.
            &.danger
            {
                color: #fff;
                background-color: #c0392b;

                &:hover { background-color: #e04b3c; }
            }

            &.disabled
            {
                color: rgba( 255, 255, 255, 0.25 );
                background-color: rgba( 255, 255, 255, 0.05 );
                cursor: default;
            }
        }
    }
}