/* Sandbox.razor.css — Blindside sandbox left-panel controls.
   Gold-on-dark; board panels reuse your existing global board styles. */

.sb-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 14px 22px;
    overflow-y: auto;
    max-height: calc(100vh - 120px);
}

.panel-card-left.sb-panel,
.sb-trays.sb-trays--right {
    max-width: 350px;
    margin-inline: auto;
}
.panel-card-right.sb-panel {
    max-width: 450px;
    margin-inline: auto;
}
    /* ── Labels / groups ── */
    .sb-group {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

.sb-label {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8a7a52;
}

/* ── Custom Format dropdown (lockable options) ── */
.sb-dd {
    position: relative;
}

.sb-dd__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 9px;
    border: 1px solid rgba(213, 166, 66, 0.4);
    background: rgba(0, 0, 0, 0.3);
    color: #e6dfcb;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 120ms ease;
}

    .sb-dd__toggle:hover {
        border-color: rgba(213, 166, 66, 0.7);
    }

.sb-dd__chev {
    margin-left: auto;
    color: #8a7a52;
    font-size: 11px;
}

.sb-dd.is-open .sb-dd__chev {
    transform: rotate(180deg);
}

.sb-dd__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: 4px;
    list-style: none;
    border-radius: 9px;
    border: 1px solid rgba(213, 166, 66, 0.4);
    background: #17140f;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

.sb-dd__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    color: #e6dfcb;
    cursor: pointer;
}

    .sb-dd__item:hover {
        background: rgba(213, 166, 66, 0.1);
    }

    .sb-dd__item.is-selected {
        background: rgba(213, 166, 66, 0.16);
    }

    .sb-dd__item.is-locked {
        color: #7d745e;
    }
/* muted, but fully clickable */
.sb-lock {
    font-size: 12px;
    line-height: 1;
}

/* ── Native selects (Variant / Modifier) ── */
.sb-select {
    padding: 9px 12px;
    border-radius: 9px;
    border: 1px solid rgba(213, 166, 66, 0.4);
    background: rgba(0, 0, 0, 0.3);
    color: #e6dfcb;
    font-size: 14px;
}

    .sb-select:focus {
        outline: none;
        border-color: rgba(213, 166, 66, 0.8);
    }

/* ── Upgrade CTA (showroom mode) ── */
.sb-upgrade {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(85, 214, 208, 0.35);
    background: radial-gradient(120% 100% at 0% 0%, rgba(85, 214, 208, 0.08), transparent 60%), rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.sb-upgrade__title {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 1px;
    color: #f4d98a;
}

.sb-upgrade__text {
    font-size: 12.5px;
    line-height: 1.45;
    color: #b6ad97;
}

.sb-upgrade__btn {
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: .4px;
    color: #201b14;
    background: linear-gradient(180deg, #f4d98a, #cf9f3d 55%, #9c7320);
    box-shadow: 0 4px 14px rgba(213, 166, 66, 0.3);
    cursor: pointer;
    transition: transform 120ms ease;
}

    .sb-upgrade__btn:hover {
        transform: translateY(-1px);
    }

/* ── Trays ── */
.sb-trays {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Showroom mute: everything visible, nothing touchable. Handlers also guard,
   so this is belt-and-braces, not the only line of defense. */
.is-muted {
    opacity: 0.55;
    filter: grayscale(0.25) contrast(0.9);
}

    .is-muted .sb-tray__piece,
    .is-muted .sb-count__btn,
    .is-muted .sb-rand,
    .is-muted .sb-toggle,
    .is-muted .sb-seed,
    .is-muted .sb-btn {
        pointer-events: none;
    }

.sb-tray {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.sb-tray__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-family: 'Cinzel', serif;
    font-size: 12.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--seat) 50%, #e6dfcb);
    background: linear-gradient(90deg, color-mix(in srgb, var(--seat) 14%, transparent), transparent 70%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sb-tray__swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--seat);
    box-shadow: 0 0 6px color-mix(in srgb, var(--seat) 60%, transparent);
}

.sb-tray__row {
    display: grid;
    grid-template-columns: 34px 1fr auto auto auto;
    align-items: center;
    column-gap: 8px;
    padding: 4px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

    .sb-tray__row.is-selected {
        background: rgba(213, 166, 66, 0.12);
        box-shadow: inset 2px 0 0 #d5a642;
    }

.sb-tray__piece {
    width: 32px;
    height: 32px;
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    transition: border-color 100ms ease, background 100ms ease;
}

    .sb-tray__piece:hover {
        border-color: rgba(213, 166, 66, 0.5);
        background: rgba(213, 166, 66, 0.08);
    }

.sb-tray__row.is-selected .sb-tray__piece {
    border-color: #d5a642;
}

.sb-tray__piece img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sb-tray__name {
    font-size: 12.5px;
    color: #cfc6ab;
}

.sb-tray__max {
    font-size: 10.5px;
    color: #7d745e;
    white-space: nowrap;
}

/* up/down numeric control */
.sb-count {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(213, 166, 66, 0.35);
    border-radius: 7px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
}

    .sb-count.is-off {
        opacity: 0.35;
    }

        .sb-count.is-off .sb-count__btn {
            pointer-events: none;
        }

.sb-count__btn {
    width: 22px;
    height: 24px;
    border: none;
    background: transparent;
    color: #d5a642;
    font-size: 14px;
    cursor: pointer;
}

    .sb-count__btn:hover {
        background: rgba(213, 166, 66, 0.15);
    }

.sb-count__val {
    min-width: 22px;
    text-align: center;
    font-size: 13px;
    color: #f2ecda;
    font-variant-numeric: tabular-nums;
}

.sb-rand {
    padding: 3px 8px;
    border: 1px solid rgba(85, 214, 208, 0.4);
    border-radius: 6px;
    background: transparent;
    color: #55d6d0;
    font-size: 10px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 100ms ease, color 100ms ease;
}

    .sb-rand:hover {
        background: rgba(85, 214, 208, 0.12);
    }

    .sb-rand.is-on {
        background: rgba(85, 214, 208, 0.2);
        color: #a7f0ec;
        box-shadow: 0 0 8px rgba(85, 214, 208, 0.25);
    }

/* ── Toggles ── */
.sb-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sb-toggle {
    flex: 1 1 auto;
    padding: 8px 10px;
    border: 1px solid rgba(213, 166, 66, 0.35);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    color: #cfc6ab;
    font-size: 12px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    white-space: nowrap;
}

    .sb-toggle:hover {
        border-color: rgba(213, 166, 66, 0.6);
    }

    .sb-toggle.is-on {
        background: rgba(213, 166, 66, 0.16);
        border-color: #d5a642;
        color: #f4d98a;
    }

/* ── Summary chips ── */
.sb-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sb-summary__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--seat, #d5a642) 45%, transparent);
    background: color-mix(in srgb, var(--seat, #d5a642) 12%, transparent);
    font-size: 12px;
    color: #e6dfcb;
    font-variant-numeric: tabular-nums;
}

.sb-summary__chip--decay {
    --seat: #7a5c3a;
}

/* ── Seed row ── */
.sb-seedrow {
    flex-direction: row;
    gap: 8px;
}

.sb-seed {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px;
    border-radius: 9px;
    border: 1px solid rgba(213, 166, 66, 0.4);
    background: rgba(0, 0, 0, 0.3);
    color: #e6dfcb;
    font-size: 13px;
}

    .sb-seed:focus {
        outline: none;
        border-color: rgba(213, 166, 66, 0.8);
    }

    .sb-seed::placeholder {
        color: #7d745e;
    }

/* ── Buttons ── */
.sb-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sb-actions--final {
    margin-top: 2px;
}

.sb-btn {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 12px;
    border-radius: 9px;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: .4px;
    cursor: pointer;
    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
    white-space: nowrap;
}

    .sb-btn:disabled {
        opacity: 0.45;
        cursor: default;
        pointer-events: none;
    }

    .sb-btn:active {
        transform: none;
    }

.sb-btn--primary {
    border: none;
    color: #201b14;
    background: linear-gradient(180deg, #f4d98a, #cf9f3d 55%, #9c7320);
    box-shadow: 0 4px 14px rgba(213, 166, 66, 0.3);
}

    .sb-btn--primary:hover {
        transform: translateY(-1px);
    }

.sb-btn--ghost {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(213, 166, 66, 0.4);
    color: #d5a642;
}

    .sb-btn--ghost:hover {
        background: rgba(213, 166, 66, 0.1);
    }

.sb-btn--gold {
    border: none;
    color: #201b14;
    background: linear-gradient(180deg, #f4d98a, #cf9f3d 55%, #9c7320);
    box-shadow: 0 4px 14px rgba(213, 166, 66, 0.3);
}

    .sb-btn--gold:hover {
        transform: translateY(-1px);
    }

.sb-btn--save {
    background: rgba(85, 214, 208, 0.12);
    border: 1px solid rgba(85, 214, 208, 0.45);
    color: #7de4de;
}

    .sb-btn--save:hover {
        background: rgba(85, 214, 208, 0.2);
    }

    .sb-btn--save.is-locked {
        opacity: 0.55;
        border-color: rgba(213, 166, 66, 0.4);
        color: #b6ad97;
    }

.sb-save-ratio {
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* ── Validate message ── */
.sb-validate {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12.5px;
}

    .sb-validate.is-ok {
        color: #8fd694;
        border: 1px solid rgba(111, 191, 115, 0.4);
        background: rgba(111, 191, 115, 0.08);
    }

    .sb-validate.is-bad {
        color: #e0837a;
        border: 1px solid rgba(207, 107, 95, 0.4);
        background: rgba(207, 107, 95, 0.08);
    }

@media (prefers-reduced-motion: reduce) {
    .sb-btn--primary:hover, .sb-btn--gold:hover, .sb-upgrade__btn:hover {
        transform: none;
    }
}

/* Naming modal — Blindside gold-on-dark. Scope into Sandbox.razor.css or
   keep as SandboxNameModal.razor.css if you make this a child component. */

.sbmodal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 5, 4, 0.72);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    animation: sbmodal-fade 140ms ease-out;
}

@keyframes sbmodal-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.sbmodal {
    width: min(420px, 92vw);
    padding: 22px 22px 18px;
    border-radius: 14px;
    border: 1px solid rgba(213, 166, 66, 0.4);
    background: linear-gradient(180deg, #1b1813, #141210);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    animation: sbmodal-rise 180ms cubic-bezier(.16,.84,.44,1);
}

@keyframes sbmodal-rise {
    from {
        transform: translateY(12px) scale(.98);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

.sbmodal__title {
    margin: 0 0 14px;
    font-family: 'Cinzel', serif;
    font-size: 18px;
    letter-spacing: .5px;
    color: #f4d98a;
}

.sbmodal__input {
    width: 100%;
    padding: 11px 13px;
    border-radius: 9px;
    border: 1px solid rgba(213, 166, 66, 0.45);
    background: rgba(0, 0, 0, 0.35);
    color: #e6dfcb;
    font-size: 15px;
    box-sizing: border-box;
}

    .sbmodal__input:focus {
        outline: none;
        border-color: rgba(213, 166, 66, 0.85);
    }

    .sbmodal__input::placeholder {
        color: #7d745e;
    }

.sbmodal__meta {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
}

.sbmodal__count {
    font-size: 11px;
    color: #7d745e;
    font-variant-numeric: tabular-nums;
}

.sbmodal__error {
    margin-top: 8px;
    padding: 8px 11px;
    border-radius: 8px;
    font-size: 12.5px;
    color: #e0a37a;
    border: 1px solid rgba(207, 140, 95, 0.4);
    background: rgba(207, 140, 95, 0.08);
}

.sbmodal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.sbmodal__btn {
    padding: 10px 20px;
    border-radius: 9px;
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: .4px;
    cursor: pointer;
    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

    .sbmodal__btn:disabled {
        opacity: 0.5;
        cursor: default;
    }

    .sbmodal__btn:active {
        transform: none;
    }

.sbmodal__btn--ghost {
    background: transparent;
    border: 1px solid rgba(213, 166, 66, 0.4);
    color: #d5a642;
}

    .sbmodal__btn--ghost:hover {
        background: rgba(213, 166, 66, 0.1);
    }

.sbmodal__btn--primary {
    border: none;
    color: #201b14;
    background: linear-gradient(180deg, #f4d98a, #cf9f3d 55%, #9c7320);
    box-shadow: 0 4px 14px rgba(213, 166, 66, 0.3);
}

    .sbmodal__btn--primary:hover:not(:disabled) {
        transform: translateY(-1px);
    }

@media (prefers-reduced-motion: reduce) {
    .sbmodal-overlay, .sbmodal {
        animation: none;
    }

    .sbmodal__btn--primary:hover {
        transform: none;
    }
}

/* Recent-sandboxes dropdown additions. Reuses .sb-dd / .sb-group / .sb-label /
   .sbmodal from the sandbox + naming-modal styles. Only NEW selectors here. */

.sb-dd__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-dd__dirty {
    color: #55d6d0;
    font-size: 10px;
    line-height: 1;
}
/* teal unsaved dot */

.sb-dd__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sb-dd__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-dd__date {
    font-size: 11px;
    color: #7d745e;
    flex: 0 0 auto;
}

.sb-dd__empty {
    padding: 10px 12px;
    font-size: 13px;
    color: #7d745e;
    font-style: italic;
    text-align: center;
}

/* Destructive action in the confirm dialog. */
.sbmodal__body {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #c4bba3;
}

.sbmodal__btn--danger {
    border: none;
    color: #f4e3df;
    background: linear-gradient(180deg, #b6483c, #8f342a);
    box-shadow: 0 4px 14px rgba(160, 60, 50, 0.3);
}

    .sbmodal__btn--danger:hover {
        filter: brightness(1.08);
    }