/* ----------------------------------------------------------
   Layout: NO grid. #dashboard-grid is just a zero-size anchor
   sitting at the exact center of .dashboard-area (the same
   point the rotating rings are centered on). Every panel is
   absolutely positioned from that point, so the whole cluster
   stays centered on the circle at any screen size.

   Tweak the look here:
     --panel-h / --panel-w : size of every panel
     --gap-v : distance from the center to the INNER edge of the
               top / bottom panels
     --gap-h : distance from the center to the INNER edge of the
               left / right panels
   (bigger gap = panels sit further out from the circle)
   ---------------------------------------------------------- */
.dashboard-grid {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;

    --ring: min(54vh, 38vw);            /* same size as .reticle in index.html */
    --r: calc(var(--ring) * 0.4);       /* radius of the circle (r=40 of the 100 viewBox) */

    --panel-h: 21.5vh;
    --panel-w: calc(var(--panel-h) * 1.5);
    --pad: calc(var(--panel-w) * 0.12); /* keeps content clear of the big cut corners */

    --gap-v: calc(var(--r) * 0.7);
    --gap-h: calc(var(--r) * 0.6);
}

/* ----------------------------------------------------------
   Orientation: panels sit around the center (top / right /
   bottom / left). Each panel has big cut corners on the side
   that faces the center, and small cuts on the outer side.
   The position class (panel--top etc.) comes from panels.js.
   Each class sets 4 shape variables used by .panel, ::before
   and ::after below:
     --clip        outer shape
     --clip-in     shape of the thin inner border (::before)
     --clip-first  first point of --clip (closes the outline loop)
     --frame-in    inner edge of the outline (::after)
   ---------------------------------------------------------- */
.panel--top {
    left: calc(var(--panel-w) / -2);
    bottom: var(--gap-v);
    --clip: 30px 0, calc(100% - 30px) 0, 100% 30px, 100% 70%, 75% 100%, 25% 100%, 0 70%, 0 30px;
    --clip-in: 27px 0, calc(100% - 27px) 0, 100% 27px, 100% 70%, 75% 100%, 25% 100%, 0 70%, 0 27px;
    --clip-first: 30px 0;
    --frame-in: 30.83px 2px, 2px 30.83px, 2px 70%, 25% calc(100% - 2px), 75% calc(100% - 2px),
        calc(100% - 2px) 70%, calc(100% - 2px) 30.83px, calc(100% - 30.83px) 2px, 30.83px 2px;
}

/* keep the 'LCL-M // 01' style label clear of the big cut corners */
.panel--bottom .panel-designation { left: calc(25% + 10px); }
.panel--right  .panel-designation { left: auto; right: 20px; }

/* left / right panels: label nudged up and icon nudged down so they no longer overlap */
.panel--left  .panel-designation,
.panel--right .panel-designation { top: 8px; }

.panel--left  .icon-placeholder,
.panel--right .icon-placeholder { position: relative; top: 2vh; }

/* keep text/icon clear of the big cut corners */
.panel--top    { padding-bottom: var(--pad); }
.panel--bottom { padding-top: var(--pad); }
.panel--left   { padding-right: var(--pad); padding-bottom: 20px; }
.panel--right  { padding-left: var(--pad); padding-bottom: 20px; }

.panel--right {
    left: var(--gap-h);
    top: calc(var(--panel-h) / -2);
    --clip: 30% 0, calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30% 100%, 0 75%, 0 25%;
    --clip-in: 30% 0, calc(100% - 27px) 0, 100% 27px, 100% calc(100% - 27px), calc(100% - 27px) 100%, 30% 100%, 0 75%, 0 25%;
    --clip-first: 30% 0;
    --frame-in: 30% 2px, calc(100% - 30.83px) 2px, calc(100% - 2px) 30.83px,
        calc(100% - 2px) calc(100% - 30.83px), calc(100% - 30.83px) calc(100% - 2px),
        30% calc(100% - 2px), 2px 75%, 2px 25%, 30% 2px;
}

.panel--bottom {
    left: calc(var(--panel-w) / -2);
    top: var(--gap-v);
    --clip: 0 30%, 25% 0, 75% 0, 100% 30%, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px);
    --clip-in: 0 30%, 25% 0, 75% 0, 100% 30%, 100% calc(100% - 27px), calc(100% - 27px) 100%, 27px 100%, 0 calc(100% - 27px);
    --clip-first: 0 30%;
    --frame-in: 2px 30%, 25% 2px, 75% 2px, calc(100% - 2px) 30%,
        calc(100% - 2px) calc(100% - 30.83px), calc(100% - 30.83px) calc(100% - 2px),
        30.83px calc(100% - 2px), 2px calc(100% - 30.83px), 2px 30%;
}

.panel--left {
    right: var(--gap-h);
    top: calc(var(--panel-h) / -2);
    --clip: 30px 0, 70% 0, 100% 25%, 100% 75%, 70% 100%, 30px 100%, 0 calc(100% - 30px), 0 30px;
    --clip-in: 27px 0, 70% 0, 100% 25%, 100% 75%, 70% 100%, 27px 100%, 0 calc(100% - 27px), 0 27px;
    --clip-first: 30px 0;
    --frame-in: 30.83px 2px, 70% 2px, calc(100% - 2px) 25%, calc(100% - 2px) 75%,
        70% calc(100% - 2px), 30.83px calc(100% - 2px), 2px calc(100% - 30.83px), 2px 30.83px, 30.83px 2px;
}

.panel {
    position: absolute;
    width: var(--panel-w);
    height: var(--panel-h);
    background-color: rgba(68, 177, 213, 0.17);
    border: 2px solid var(--eva-amber);
    /* Classic Mecha/Evangelion chamfered corners */
    clip-path: polygon(var(--clip));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* listed explicitly (was "all") so the panels don't lag behind when the window is resized */
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
        border-color 0.15s ease-in-out, transform 0.15s ease-in-out;
    box-shadow: inset 0 0 70px rgba(68, 176, 213, 0.3);
}

.panel::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px solid rgba(255, 140, 0, 0.3);
    clip-path: polygon(var(--clip-in));
    pointer-events: none;
}

/* Outline that follows the cut corners (the CSS border can't draw on a clipped diagonal) */
.panel::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background-color:  rgba(68, 177, 213,1);
    pointer-events: none;
    transition: background-color 0.15s ease-in-out;
    /* outer edge, back to its first point, then the inner edge (2px in) */
    clip-path: polygon(evenodd, var(--clip), var(--clip-first), var(--frame-in));
}

.panel:hover::after {
    background-color: #5AFFA1; /* matches the hover border-color */
}

.panel:hover {
    background-color: rgba(90, 255, 161, 0.15);
    box-shadow: inset 0 0 60px rgba(90, 255, 161, 0.4), 0 0 20px var(--eva-amber-glow);
    border-color: #5AFFA1;
    transform: scale(1.01); /* Subtle grow */
}

.panel:hover .panel-title {
    color: #fff;
    text-shadow: 0 0 15px #fff;
}

.panel-designation {
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: clamp(0.65rem, 1.4vh, 0.9rem);
    opacity: 0.7;
}

.panel-barcode {
    position: absolute;
    bottom: 15px;
    right: 20px;
    font-family: 'Teko', sans-serif;
    font-size: clamp(1rem, 2.4vh, 1.5rem);
    letter-spacing: 5px;
    opacity: 0.4;
}

.icon-placeholder {
    width: clamp(40px, calc(12vh - 24px), 100px);
    height: clamp(40px, calc(12vh - 24px), 100px);
    border: 1px dashed var(--eva-amber);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: clamp(0.7rem, 1.6vh, 1rem);
    padding: 10px;
    margin-bottom: clamp(8px, 2vh, 20px);
    background: rgba(255, 140, 0, 0.05);
    color: var(--eva-amber);
    transition: all 0.2s;
}

.panel:hover .icon-placeholder {
    border-color: var(--eva-green);
    color: var(--eva-green);
    background: rgba(57, 255, 20, 0.15);
    text-shadow: 0 0 8px var(--eva-green-glow);
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.3);
}

.panel-title {
    font-family: 'Teko', sans-serif;
    font-size: clamp(1.1rem, min(4.2vh, 1.8vw), 2.4rem);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    color: var(--eva-amber);
    text-shadow: 0 0 10px var(--eva-amber-glow);
    transition: color 0.2s;
}

.icon-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================================================
   MOBILE — the whole cluster (panels, their content and the
   ring) is designed at one fixed reference size and scaled
   uniformly by --k, which panels.js sets from the free space.
   Reference cluster = 556 x 620 (REF_W / REF_H in panels.js).
   ========================================================== */
@media (max-width: 1200px) {
    .dashboard-grid {
        --ring: 500px;      /* keep equal to the .reticle width in index.html */
        --gap-v: 156px;     /* top / bottom panels: center -> inner edge */
        --gap-h: 44px;      /* left / right panels: center -> inner edge */
        --panel-h: 150px;
        --panel-w: 230px;
        transform: scale(var(--k, 0.5));
    }

    .panel--left  .icon-placeholder,
    .panel--right .icon-placeholder { top: 10px; }

    .panel-designation { font-size: 10px; }
    .panel-barcode { font-size: 16px; }
    .icon-placeholder { width: 52px; height: 52px; padding: 5px; margin-bottom: 8px; font-size: 10px; }
    .panel-title { font-size: 26px; }
}