// SIGHT EDITOR — a dev panel, so it reads as one.
//
// ⚠️ MODELLED ON SckPartEditor.razor.scss, NOT SHARING IT. Razor components scope their own styles
// and a shared sheet would make either tuner's tweak silently change the other — the same argument
// every other tuner in this project makes about its copy.
//
// ⛔ TOP RIGHT AND NARROW, WHICH IS THE OPPOSITE OF THE PART EDITOR AND DELIBERATE. The thing being
// judged here is a sight, and a sight sits in the MIDDLE of the screen when the weapon is up. The
// part editor lives top-left over a hip-held gun; this one has to leave the centre alone.

.sight {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    font-family: Inter;

    &.hidden {
        opacity: 0;
        pointer-events: none;
    }
}

// ⚠️ ACROSS THE WHOLE SCREEN AND UNDER THE PANEL. The drag happens where the piece is, which is
// nowhere near the controls — so the surface that takes the mouse has to be everything else.
.canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}

// Dead centre: where the sight has to end up.
.dot {
    width: 5px;
    height: 5px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.6);

    &.live {
        width: 9px;
        height: 9px;
        border-radius: 5px;
        background-color: rgba(255, 150, 40, 0.95);
    }
}

.panel {
    position: absolute;
    right: 30px;
    top: 24px;
    flex-direction: column;
    width: 330px;
    max-height: 92%;
    overflow-y: scroll;
    background-color: rgba(8, 10, 12, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 4px;
    padding: 14px 16px 16px;

    // ⚠️ The ROOT is pointer-events:none and the CANVAS takes the rest; the panel has to take its
    // own clicks or no slider on it can be dragged.
    pointer-events: all;
}

.head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.92);
}

.close {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;

    &:hover { color: rgba(255, 255, 255, 0.95); }
}

.state {
    font-size: 11px;
    color: rgba(150, 220, 170, 0.85);
    margin-bottom: 10px;
    padding: 5px 7px;
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 3px;

    // ⛔ THE PANEL SAYING "AIMING" WHILE THE WEAPON IS AT THE HIP IS THE BUG THIS TOOL WAS BUILT
    // AFTER. When the pose has not taken, the line that says so has to be impossible to skim past.
    &.bad {
        color: rgba(255, 170, 120, 0.95);
        background-color: rgba(200, 80, 30, 0.16);
    }
}

.warn {
    font-size: 11px;
    color: rgba(255, 190, 120, 0.9);
    margin: 6px 0;
}

.group {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.40);
    margin: 10px 0 5px;
}

.list {
    flex-direction: column;
    margin-bottom: 4px;
}

.item {
    flex-direction: row;
    align-items: center;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.80);
    cursor: pointer;

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

    &.sel {
        background-color: rgba(255, 150, 40, 0.18);
        color: rgba(255, 255, 255, 0.98);
    }

    // ⚠️ DIMMED, NOT HIDDEN. A piece that is not on yet is the next thing you are going to click.
    &.off {
        color: rgba(255, 255, 255, 0.35);
    }
}

.box {
    width: 15px;
    height: 15px;
    margin-right: 8px;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 2px;
    color: rgba(255, 255, 255, 0.85);
}

.nm {
    font-family: Consolas;
    font-size: 12px;
    width: 34px;
}

.at {
    margin-left: auto;
    font-family: Consolas;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.40);
}

.row {
    flex-direction: row;
    align-items: center;
    margin-bottom: 3px;
}

.label {
    width: 46px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
}

.s {
    flex-grow: 1;
    margin-right: 8px;
}

.num {
    width: 52px;
    font-family: Consolas;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    text-align: right;
}

.out {
    margin-top: 9px;
    padding: 6px 7px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    font-family: Consolas;
    font-size: 10px;
    color: rgba(190, 220, 255, 0.85);
    word-break: break-all;
}

.buttons {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 9px;
}

.btn {
    padding: 5px 9px;
    margin: 0 5px 5px 0;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.80);
    cursor: pointer;

    &:hover { border-color: rgba(255, 255, 255, 0.45); }

    &.on {
        background-color: rgba(255, 150, 40, 0.22);
        border-color: rgba(255, 150, 40, 0.55);
        color: rgba(255, 255, 255, 0.97);
    }

    &.copy {
        background-color: rgba(60, 180, 110, 0.20);
        border-color: rgba(60, 180, 110, 0.50);
    }
}