/* ============================================================
 * /map Layers card — small rotating cube chips inside the
 * dmc.MultiSelect dropdown options. Mirrors the /map/worlds
 * cube but scaled to ~52px so it fits a dropdown row.
 *
 * Pure CSS. Theme tokens (harbor / tidal) keep the gradient
 * fallback (used when a tileset has no tiles yet) adaptive in
 * light + dark.
 * ============================================================ */


.map-layers-cube-stage {
    width:       52px;
    height:      52px;
    perspective: 280px;
    position:    relative;
    flex-shrink: 0;
}

.map-layers-cube {
    position:        relative;
    width:           100%;
    height:          100%;
    transform-style: preserve-3d;
    animation:       map-layers-cube-rotate 14s linear infinite;
}

.map-layers-cube-face {
    position:           absolute;
    width:              52px;
    height:             52px;
    background-color:   var(--mantine-color-harbor-7);
    background-size:    cover;
    background-position:center;
    border-radius:      4px;
    box-shadow:         inset 0 0 8px rgba(0,0,0,0.30);
    border:             1px solid var(--mantine-color-tidal-5);
    backface-visibility:hidden;
}

/* Gradient fallback for empty faces — same harbor / tidal palette as
 * the /map/worlds cube but flatter so it reads cleanly at 52px. */
.map-layers-cube-face::before {
    content:        '';
    position:       absolute;
    inset:          0;
    border-radius:  inherit;
    background:
        radial-gradient(circle at 30% 25%,
            light-dark(var(--mantine-color-tidal-3), var(--mantine-color-tidal-7)) 0%,
            light-dark(var(--mantine-color-harbor-5), var(--mantine-color-harbor-9)) 80%);
    z-index:        -1;
    opacity:        0.85;
}

.map-layers-cube-front  { transform: rotateY(   0deg) translateZ(26px); }
.map-layers-cube-back   { transform: rotateY( 180deg) translateZ(26px); }
.map-layers-cube-right  { transform: rotateY(  90deg) translateZ(26px); }
.map-layers-cube-left   { transform: rotateY( -90deg) translateZ(26px); }
.map-layers-cube-top    { transform: rotateX(  90deg) translateZ(26px); }
.map-layers-cube-bottom { transform: rotateX( -90deg) translateZ(26px); }

@keyframes map-layers-cube-rotate {
    0%   { transform: rotateX(-14deg) rotateY(   0deg); }
    100% { transform: rotateX(-14deg) rotateY( 360deg); }
}

/* Pause when the dropdown row is hovered so the user can read the
 * front face. Same idea as the /map/worlds card. */
.map-layers-option:hover .map-layers-cube,
.map-layers-option[data-combobox-active] .map-layers-cube {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .map-layers-cube { animation: none; }
}


/* ---------- Dropdown row polish ----------
 *
 * Mantine's default option highlight uses the theme's primary color at
 * a light shade — and our `primaryShade` is `harbor`, which is the
 * same blue palette as the cube faces. The two collide visually: the
 * cube blends into the highlight and the label washes out.
 *
 * Override scoped to the Layers card's MultiSelect via the marker
 * class set on the dropdown + option in `map_panel.py`. We replace
 * the harbor-tinted highlight with a neutral surface that lets the
 * cube + text stand on their own card.
 */
.map-layers-dropdown {
    /* Slightly more breathing room inside the dropdown body since the
     * cube chip is taller than the default MultiSelect row. */
    padding-block: 6px;
}

.map-layers-option {
    border-radius: 8px;
    padding: 6px 8px;
    margin-block: 2px;
    /* Subtle neutral surface — same idea as a Paper inside the option
     * row so the cube has its own card-like backdrop. Adapts in dark
     * mode via `light-dark` so the contrast against the cube faces
     * stays readable on both schemes. */
    background: light-dark(
        var(--mantine-color-gray-0),
        var(--mantine-color-dark-6)
    );
    border: 1px solid transparent;
    transition: background-color 120ms ease, border-color 120ms ease,
                box-shadow      120ms ease;
}

.map-layers-option:hover,
.map-layers-option[data-combobox-active] {
    /* Neutral lift — same palette as the row at rest but a half-shade
     * brighter, plus a thin tidal-tinted border so the active row
     * reads as "selected" without competing with the cube's blue. */
    background: light-dark(
        var(--mantine-color-white),
        var(--mantine-color-dark-5)
    );
    border-color: light-dark(
        var(--mantine-color-tidal-3),
        var(--mantine-color-tidal-7)
    );
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Mantine paints `--mantine-primary-color-light` on the option's
 * background when active. Force it transparent so our backdrop wins. */
.map-layers-option[data-combobox-active] {
    --mantine-color-default-hover: transparent;
}

/* The cube chip needs a tiny lift so it doesn't read as flat blue
 * against the option's neutral backdrop. A faint ring + drop-shadow
 * makes the rotation legible at 52px. */
.map-layers-option .map-layers-cube-stage {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.18));
}


/* ---------- Tree polish inside the Layers card ----------
 *
 * TreeViewPro mounts via MUI and uses MUI palette tokens by default,
 * which clash with the Mantine surface inside the floating card. A
 * couple of overrides keep the rows compact + harbor-tinted.
 */
#map-layers-card .MuiTreeView-root {
    --mui-palette-text-primary: var(--mantine-color-text);
    background:                 transparent;
    color:                      var(--mantine-color-text);
}
#map-layers-card .MuiTreeItem-label {
    font-size:   13px;
    color:       var(--mantine-color-text);
}
#map-layers-card .MuiTreeItem-content {
    border-radius: 6px;
    padding-block: 3px;
}
#map-layers-card .MuiTreeItem-content:hover {
    background: light-dark(
        var(--mantine-color-harbor-1),
        var(--mantine-color-dark-6)
    );
}