/* ==========================================================================
   Admin Mobile Dashboard — Panel Interface (port exact)
   ========================================================================== */

#chic-portal {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #0a0c0f;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 9999;
}

#chic-portal *,
#chic-portal *::before,
#chic-portal *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

#chic-portal .frame {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #000;
    overflow: hidden;
    cursor: pointer;
}

/* ═══════════════════════════════════ LEFT PANEL ═══════════════════════════════════ */
#chic-portal .left-wrap {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 45.8%;
    z-index: 10;
    overflow: hidden;
}
#chic-portal .left-wrap .backdrop {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 75% 55% at 48% 48%,
        #1a1d22 0%, #16191e 25%, #121518 50%, #0e1013 75%, #0a0c0f 100%);
    box-shadow: inset 0 0 80px rgba(0,0,0,0.5);
}
#chic-portal .icon-nav {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 3.5vh, 40px);
    z-index: 5;
    opacity: 0;
    transition: opacity 0.3s ease 0s;
    pointer-events: none;
}
#chic-portal .left-wrap.open .icon-nav {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.5s ease 0.3s;
}
#chic-portal .icon-item {
    width: clamp(30px, 6vmin, 52px);
    height: clamp(30px, 6vmin, 52px);
    position: relative;
    cursor: pointer;
    transition: transform 0.25s ease;
}
#chic-portal .icon-item:hover { transform: scale(1.15); }
#chic-portal .icon-item:active { transform: scale(0.93); }
#chic-portal .icon-item svg {
    width: 100%; height: 100%;
    display: block;
    filter:
        drop-shadow(-1.5px -1.5px 1px rgba(0,0,0,0.9))
        drop-shadow(1.5px 1.5px 1.5px rgba(45,52,65,0.6));
}
#chic-portal .icon-item svg path,
#chic-portal .icon-item svg circle,
#chic-portal .icon-item svg line {
    fill: none;
    stroke: #2e3542;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#chic-portal .icon-item.active svg {
    filter:
        drop-shadow(-1.5px -1.5px 1.2px rgba(0,0,0,0.95))
        drop-shadow(2px 2px 2px rgba(55,65,80,0.7));
}
#chic-portal .icon-item.active svg path,
#chic-portal .icon-item.active svg circle,
#chic-portal .icon-item.active svg line {
    stroke: #3a4455;
    stroke-width: 2.2;
}

#chic-portal .brand-text {
    position: absolute;
    top: 6%; left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(9px, 1.6vmin, 14px);
    font-weight: 600;
    letter-spacing: 0.35em;
    color: #2a2f38;
    text-shadow:
        -1px -1px 1px rgba(0,0,0,0.7),
         1px  1px 1px rgba(55,62,75,0.4);
    pointer-events: none;
    user-select: none;
}

#chic-portal .left-slider {
    position: absolute; inset: 0;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
#chic-portal .left-wrap.open .left-slider { transform: translateX(-92%); }

#chic-portal .panel-left {
    position: absolute; inset: 0;
    overflow: hidden;
}
#chic-portal .panel-left .surface {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 75% 55% at 48% 48%,
        #3d4149 0%, #383d45 18%, #333940 35%,
        #2d3239 55%, #262b32 72%, #21262d 85%, #1e2228 100%);
}
#chic-portal .panel-left .highlight {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 35% 25% at 46% 46%,
        rgba(73,83,93,0.25) 0%, transparent 100%);
}
#chic-portal .panel-left .edge-right {
    position: absolute;
    top: 0; right: 0; bottom: 0; width: 8%;
    background: linear-gradient(to right,
        transparent 0%, rgba(80,90,105,0.22) 50%,
        rgba(90,100,112,0.32) 80%, rgba(65,72,82,0.5) 100%);
}
#chic-portal .panel-left .depth {
    position: absolute; inset: 0;
    box-shadow: 10px 0 25px 5px rgba(0,0,0,0.65), 5px 0 10px rgba(0,0,0,0.45);
    pointer-events: none;
}
#chic-portal .left-slider::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: -45px; width: 45px;
    background: linear-gradient(to right,
        rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.45) 25%,
        rgba(0,0,0,0.2) 55%, transparent 100%);
    pointer-events: none; z-index: 20;
}

/* ═══════════════════════════════════ RIGHT COLUMN ═══════════════════════════════════ */
#chic-portal .right-col {
    position: absolute;
    top: 0; bottom: 0; left: 46.6%; right: 0;
    display: flex; flex-direction: column;
    gap: 0.55%; z-index: 1;
}
#chic-portal .panel-wrap {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
#chic-portal .panel-wrap:last-child { flex: 1; }

/* TOP RIGHT */
#chic-portal .top-right-wrap { height: 42.7%; }
#chic-portal .top-right-wrap .backdrop {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 55% 55%,
        #161c22 0%, #121820 25%, #0e1418 50%, #0a1014 75%, #080c10 100%);
    box-shadow: inset 0 0 60px rgba(0,0,0,0.5);
}
#chic-portal .top-right-wrap .slider {
    position: absolute; inset: 0;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
#chic-portal .top-right-wrap.open .slider { transform: translateY(-90%); }
#chic-portal .panel-top-right { position: absolute; inset: 0; overflow: hidden; }
#chic-portal .panel-top-right .surface {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 58% 58%,
        #3a4750 0%, #353f48 15%, #303a43 32%,
        #2b343d 48%, #252e36 65%, #1f2830 82%, #1a2229 100%);
}
#chic-portal .panel-top-right .cap-left {
    position: absolute; top: 0; left: 0; bottom: 0; width: 7%;
    background: linear-gradient(to right,
        #10141a 0%, #161a20 12%, #1a1e24 25%, #1f2328 38%,
        #242a30 52%, #282e36 68%, rgba(43,50,58,0.4) 85%, transparent 100%);
}
#chic-portal .panel-top-right .cap-bottom {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3.5%;
    background: linear-gradient(to bottom,
        transparent 0%, rgba(0,0,0,0.06) 30%, rgba(0,0,0,0.18) 65%, rgba(0,0,0,0.4) 100%);
}
#chic-portal .panel-top-right .inner-glow {
    position: absolute; inset: 0;
    box-shadow: inset 0 0 55px rgba(0,0,0,0.2);
}

/* AMBER */
#chic-portal .amber-wrap { height: 36.0%; }
#chic-portal .amber-wrap .backdrop {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 72% 62% at 55% 46%,
        #4a3208 0%, #3e2a06 20%, #322204 40%, #261a02 60%, #1a1200 80%, #120c00 100%);
    box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
}
#chic-portal .amber-wrap .slider {
    position: absolute; inset: 0;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
#chic-portal .amber-wrap.open .slider { transform: translateX(92%); }
#chic-portal .panel-amber { position: absolute; inset: 0; overflow: hidden; }
#chic-portal .panel-amber .surface {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 70% at 54% 48%,
        #f0a212 0%, #eda010 15%, #e89810 35%,
        #e09010 55%, #d68810 72%, #ce8210 85%, #c87e10 100%);
}
#chic-portal .panel-amber .cap-left {
    position: absolute; top: 0; left: 0; bottom: 0; width: 4%;
    background: linear-gradient(to right,
        #3a2808 0%, #6a4808 25%, #a86a0c 50%, #cc8014 72%, transparent 100%);
}
#chic-portal .panel-amber .cap-top {
    position: absolute; top: 0; left: 0; right: 0; height: 3%;
    background: linear-gradient(to bottom,
        #502a00 0%, #905c0c 30%, #c47c14 58%, transparent 100%);
}
#chic-portal .panel-amber .cap-bottom {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3%;
    background: linear-gradient(to bottom,
        transparent 0%, #c47c14 42%, #905c0c 70%, #502a00 100%);
}
#chic-portal .panel-amber .cap-corner-tl {
    position: absolute; top: 0; left: 0; width: 6%; height: 5%;
    background: radial-gradient(ellipse at 0% 0%,
        rgba(25,12,0,0.85) 0%, rgba(50,28,0,0.4) 50%, transparent 100%);
}
#chic-portal .panel-amber .cap-corner-bl {
    position: absolute; bottom: 0; left: 0; width: 6%; height: 5%;
    background: radial-gradient(ellipse at 0% 100%,
        rgba(25,10,0,0.7) 0%, rgba(50,28,0,0.3) 50%, transparent 100%);
}
#chic-portal .panel-amber .inner-glow {
    position: absolute; inset: 0;
    box-shadow: inset 0 0 25px rgba(0,0,0,0.06);
}

/* TEAL */
#chic-portal .teal-wrap { flex: 1; }
#chic-portal .teal-wrap .backdrop {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 78% 62% at 55% 42%,
        #061820 0%, #051418 20%, #041014 40%, #030c10 60%, #02080c 80%, #010406 100%);
    box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
}
#chic-portal .teal-wrap .slider {
    position: absolute; inset: 0;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
#chic-portal .teal-wrap.open .slider { transform: translateY(88%); }
#chic-portal .panel-teal { position: absolute; inset: 0; overflow: hidden; }
#chic-portal .panel-teal .surface {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 78% 62% at 55% 42%,
        #0c3340 0%, #0a2e38 15%, #082a32 30%,
        #06262e 48%, #04222a 65%, #031e25 82%, #021a20 100%);
}
#chic-portal .panel-teal .cap-left {
    position: absolute; top: 0; left: 0; bottom: 0; width: 7%;
    background: linear-gradient(to right,
        #020810 0%, #030c16 15%, #04101c 30%, #051420 48%,
        #071824 62%, #091c28 78%, transparent 100%);
}
#chic-portal .panel-teal .cap-top {
    position: absolute; top: 0; left: 0; right: 0; height: 5%;
    background: linear-gradient(to bottom,
        rgba(0,4,10,0.7) 0%, rgba(2,10,18,0.45) 35%, rgba(4,18,26,0.2) 65%, transparent 100%);
}
#chic-portal .panel-teal .cap-corner-tl {
    position: absolute; top: 0; left: 0; width: 10%; height: 10%;
    background: radial-gradient(ellipse at 0% 0%, rgba(0,2,6,0.7) 0%, transparent 100%);
}
#chic-portal .panel-teal .inner-glow {
    position: absolute; inset: 0;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.28);
}

/* LIGHT SWEEP */
#chic-portal .light-sweep {
    position: absolute; inset: 0; pointer-events: none;
    opacity: 0; transition: opacity 0.5s ease;
}
#chic-portal .frame:hover .light-sweep { opacity: 1; }
#chic-portal .panel-left .light-sweep {
    background: radial-gradient(ellipse 50% 40% at var(--lx,50%) var(--ly,50%),
        rgba(255,255,255,0.04) 0%, transparent 100%);
}
#chic-portal .panel-top-right .light-sweep {
    background: radial-gradient(ellipse 55% 45% at var(--lx,50%) var(--ly,50%),
        rgba(255,255,255,0.035) 0%, transparent 100%);
}
#chic-portal .panel-amber .light-sweep {
    background: radial-gradient(ellipse 55% 45% at var(--lx,50%) var(--ly,50%),
        rgba(255,220,120,0.06) 0%, transparent 100%);
}
#chic-portal .panel-teal .light-sweep {
    background: radial-gradient(ellipse 55% 45% at var(--lx,50%) var(--ly,50%),
        rgba(100,220,220,0.03) 0%, transparent 100%);
}