// Dev menu. Ported from Docs/ui-design/devmenu-artifact.html — keep the two in
// step, that file is where the design iterating happens.
//
// ⚠️ Inter, because it is the font s&box actually SHIPS
// (addons/base/Assets/fonts/Inter-*.ttf). Poppins appears in ~60 shipped .scss
// files but has no font file anywhere in the install, and asking for a missing
// font renders every label as a grey block — layout correct, glyphs gone.

.devmenu
{
    font-family: Inter;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    pointer-events: none;

    .frame
    {
        pointer-events: all;
        flex-direction: column;
        width: 820px;
        max-height: 80%;
        background-color: rgba( 14, 16, 20, 0.96 );
        border: 1px solid rgba( 255, 255, 255, 0.12 );
        border-radius: 6px;
    }

    .titlebar
    {
        flex-direction: row;
        align-items: center;
        padding: 16px 22px;
        border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );

        .title { font-size: 20px; font-weight: 600; color: #fff; }
        .hint  { margin-left: auto; font-size: 13px; color: rgba( 255,255,255,0.4 ); }
    }

    .tabs
    {
        flex-direction: row;
        padding: 8px 16px 0px 16px;
        border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );

        .tab
        {
            padding: 11px 20px;
            font-size: 16px;
            color: rgba( 255, 255, 255, 0.55 );
            border-bottom: 2px solid transparent;
            cursor: pointer;

            &:hover { color: #fff; }
            &.active { color: #fff; border-bottom: 2px solid #4a9eff; }
        }
    }

    .body
    {
        flex-direction: column;
        padding: 8px 16px 16px 16px;
        overflow: scroll;
    }

    // ── categories ──────────────────────────────────────────────────────────
    .cat
    {
        flex-direction: column;
        border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );
    }

    .cat-head
    {
        flex-direction: row;
        align-items: center;
        padding: 12px 6px;
        cursor: pointer;

        &:hover { color: #4a9eff; }

        .cat-name { font-size: 16px; color: #fff; margin-left: 10px; }
        .count
        {
            margin-left: auto;
            font-size: 13px;
            color: rgba( 255, 255, 255, 0.35 );
        }
    }

    // ⚠️ Stands in for the artifact's SVG icons. s&box UI is Facepunch's own
    // layout engine, not a browser DOM, so inline <svg><use> is not assumed to
    // work — a coloured dot carries the same grouping information with no
    // dependency on SVG support. Swap for real icons once that is verified.
    .dot
    {
        width: 10px;
        height: 10px;
        border-radius: 5px;
        flex-shrink: 0;
    }

    // ── tools ───────────────────────────────────────────────────────────────
    .tools
    {
        flex-direction: column;
        padding: 2px 0px 10px 0px;
    }

    .tool
    {
        flex-direction: row;
        align-items: center;
        padding: 10px 14px;
        margin-bottom: 4px;
        background-color: rgba( 255, 255, 255, 0.05 );
        border: 1px solid rgba( 255, 255, 255, 0.08 );
        border-radius: 4px;
        cursor: pointer;

        &:hover
        {
            background-color: rgba( 74, 158, 255, 0.28 );
            border: 1px solid rgba( 74, 158, 255, 0.4 );
        }

        .tool-name { font-size: 15px; color: #fff; margin-left: 10px; }
        .keys
        {
            margin-left: auto;
            font-size: 12px;
            color: rgba( 255, 255, 255, 0.35 );
        }

        // Not wired yet. Dimmed so an unimplemented tool never reads as a
        // broken one.
        &.todo
        {
            opacity: 0.5;

            &:hover
            {
                background-color: rgba( 255, 255, 255, 0.05 );
                border: 1px solid rgba( 255, 255, 255, 0.08 );
            }
        }
    }
}