/* =====================================================
   CPCS LIGHT LIQUID GLASS SIDEBAR
   Lighter water-glass treatment for CPCS branding
   ===================================================== */

#sidebar{
    width:240px;
    min-width:240px;
    flex:0 0 240px;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    height:100vh;
    z-index:90;
    isolation:isolate;
    background:#dff3ff;
}

.app{
    display:block !important;
    width:100%;
    min-height:100vh;
}

.main{
    width:calc(100% - 240px) !important;
    min-width:0;
    margin-left:240px !important;
}

#workspace{
    width:100%;
    min-width:0;
    margin-left:0 !important;
}

.cpcs-glass-sidebar{
    position:relative;
    height:100%;
    min-height:620px;
    padding:14px 13px 12px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    color:#0b2a4e;
    background:
        radial-gradient(circle at 16% 5%,rgba(255,255,255,.96),transparent 24%),
        radial-gradient(circle at 100% 28%,rgba(125,211,252,.44),transparent 38%),
        radial-gradient(circle at 8% 78%,rgba(186,230,253,.48),transparent 34%),
        linear-gradient(162deg,rgba(239,249,255,.96) 0%,rgba(218,241,255,.90) 38%,rgba(190,229,253,.82) 70%,rgba(225,245,255,.92) 100%);
    border-right:1px solid rgba(30,64,175,.10);
    box-shadow:
        18px 0 50px rgba(30,64,175,.09),
        inset -1px 0 rgba(255,255,255,.72),
        inset 0 1px rgba(255,255,255,.94);
    backdrop-filter:blur(40px) saturate(170%);
    -webkit-backdrop-filter:blur(40px) saturate(170%);
}

/* Slow refractive water fields. */
.cpcs-glass-sidebar::before{
    content:"";
    position:absolute;
    inset:-18%;
    pointer-events:none;
    background:
        radial-gradient(ellipse at 22% 22%,rgba(255,255,255,.86) 0 10%,transparent 28%),
        radial-gradient(ellipse at 80% 20%,rgba(56,189,248,.28) 0 10%,transparent 31%),
        radial-gradient(ellipse at 50% 76%,rgba(14,165,233,.18) 0 12%,transparent 32%),
        linear-gradient(118deg,transparent 24%,rgba(255,255,255,.48) 43%,transparent 58%);
    filter:blur(20px) saturate(125%);
    opacity:.84;
    transform:translate3d(-2%,0,0) rotate(-2deg);
    animation:cpcsWaterDrift 18s ease-in-out infinite alternate;
}

/* Fine caustics / glass highlights. */
.cpcs-glass-sidebar::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(105deg,rgba(255,255,255,.76),transparent 17% 72%,rgba(255,255,255,.28)),
        repeating-radial-gradient(ellipse at 15% 20%,rgba(255,255,255,.30) 0 1px,transparent 1px 20px);
    background-size:auto,46px 38px;
    mix-blend-mode:screen;
    opacity:.42;
    mask-image:linear-gradient(to bottom,#000 0 78%,transparent 100%);
}

.cpcs-liquid-field,
.cpcs-liquid-caustics{
    position:absolute;
    pointer-events:none;
    z-index:0;
}

.cpcs-liquid-field{
    border-radius:42% 58% 63% 37% / 41% 39% 61% 59%;
    filter:blur(27px) saturate(150%);
    opacity:.58;
    mix-blend-mode:multiply;
    will-change:transform;
}

.liquid-field-a{
    width:220px;
    height:240px;
    top:92px;
    right:-132px;
    background:radial-gradient(circle at 36% 38%,rgba(56,189,248,.38),rgba(37,99,235,.05) 54%,transparent 74%);
    animation:cpcsFloatA 13s ease-in-out infinite alternate;
}

.liquid-field-b{
    width:230px;
    height:260px;
    left:-150px;
    bottom:150px;
    background:radial-gradient(circle at 62% 46%,rgba(34,211,238,.25),rgba(14,116,144,.04) 56%,transparent 74%);
    animation:cpcsFloatB 16s ease-in-out infinite alternate;
}

.liquid-field-c{
    width:190px;
    height:200px;
    right:-92px;
    bottom:-38px;
    background:radial-gradient(circle at 38% 30%,rgba(96,165,250,.24),rgba(37,99,235,.04) 55%,transparent 73%);
    animation:cpcsFloatC 19s ease-in-out infinite alternate;
}

.cpcs-liquid-caustics{
    inset:0;
    background:
        linear-gradient(130deg,transparent 0 32%,rgba(255,255,255,.62) 42%,transparent 52% 100%),
        radial-gradient(ellipse at 30% 68%,rgba(255,255,255,.38),transparent 26%);
    transform:translateX(-20%);
    opacity:.50;
    animation:cpcsCausticSweep 21s ease-in-out infinite;
}

@keyframes cpcsWaterDrift{
    0%{transform:translate3d(-5%,-2%,0) rotate(-3deg) scale(1)}
    55%{transform:translate3d(4%,2%,0) rotate(2deg) scale(1.06)}
    100%{transform:translate3d(-1%,5%,0) rotate(-1deg) scale(1.03)}
}
@keyframes cpcsFloatA{from{transform:translate3d(0,-10px,0) rotate(-8deg) scale(.98)}to{transform:translate3d(-28px,38px,0) rotate(10deg) scale(1.12)}}
@keyframes cpcsFloatB{from{transform:translate3d(0,0,0) rotate(7deg) scale(1)}to{transform:translate3d(34px,-42px,0) rotate(-8deg) scale(1.1)}}
@keyframes cpcsFloatC{from{transform:translate3d(0,0,0) rotate(-6deg)}to{transform:translate3d(-24px,-32px,0) rotate(12deg) scale(1.08)}}
@keyframes cpcsCausticSweep{0%,100%{transform:translateX(-26%) translateY(-2%);opacity:.32}50%{transform:translateX(20%) translateY(3%);opacity:.62}}

/* =====================================================
   BRAND — full uploaded CPCS logo, uncropped
   ===================================================== */
.cpcs-sidebar-brand{
    position:relative;
    z-index:2;
    min-height:92px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:5px 0 13px;
    border-bottom:1px solid rgba(15,76,129,.10);
}

.cpcs-brand-logo-window{
    position:relative;
    width:100%;
    min-width:0;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.cpcs-brand-logo{
    display:block;
    width:210px;
    max-width:100%;
    height:auto;
    transform:none;
    filter:drop-shadow(0 8px 18px rgba(15,76,129,.10));
    user-select:none;
    -webkit-user-drag:none;
}

.cpcs-sidebar-context{
    position:relative;
    z-index:2;
    margin:11px 7px 8px;
    display:flex;
    align-items:center;
    gap:7px;
    font-size:8px;
    font-weight:850;
    letter-spacing:.13em;
    color:#3f6f9f;
    text-transform:uppercase;
}
.context-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#16a34a;
    box-shadow:0 0 0 4px rgba(22,163,74,.10),0 0 14px rgba(22,163,74,.22);
}

/* =====================================================
   NAVIGATION
   ===================================================== */
.cpcs-primary-nav,
.cpcs-secondary-nav{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:6px;
    margin:0;
    padding:0;
}

.cpcs-secondary-nav{
    margin-top:8px;
    margin-bottom:8px;
    padding-top:8px;
    border-top:1px solid rgba(15,76,129,.09);
}

.cpcs-nav-item{
    position:relative;
    width:100%;
    min-height:55px;
    padding:8px 9px;
    display:grid;
    grid-template-columns:36px minmax(0,1fr) 6px;
    align-items:center;
    gap:9px;
    border:1px solid rgba(255,255,255,.42);
    border-radius:15px;
    background:rgba(255,255,255,.28);
    color:#244b72;
    text-align:left;
    cursor:pointer;
    font:inherit;
    box-shadow:inset 0 1px rgba(255,255,255,.72),0 7px 20px rgba(30,64,175,.025);
    backdrop-filter:blur(18px) saturate(145%);
    -webkit-backdrop-filter:blur(18px) saturate(145%);
    transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease;
}
.cpcs-nav-item:hover{
    transform:translateX(2px);
    background:rgba(255,255,255,.54);
    border-color:rgba(147,197,253,.54);
    box-shadow:inset 0 1px rgba(255,255,255,.90),0 10px 26px rgba(30,64,175,.06);
    color:#0b315d;
}
.cpcs-nav-item.active{
    background:linear-gradient(135deg,rgba(37,99,235,.91),rgba(14,116,190,.82));
    border-color:rgba(255,255,255,.60);
    box-shadow:inset 0 1px rgba(255,255,255,.34),0 14px 30px rgba(37,99,235,.18);
    color:#fff;
}

.nav-icon{
    width:36px;
    height:36px;
    border-radius:12px;
    display:grid;
    place-items:center;
    color:#1e5d97;
    background:rgba(255,255,255,.50);
    border:1px solid rgba(255,255,255,.68);
    box-shadow:inset 0 1px rgba(255,255,255,.88);
}
.nav-icon svg{width:17px;height:17px}
.nav-icon.atlas{color:#2453a6;background:linear-gradient(145deg,rgba(224,231,255,.82),rgba(219,234,254,.72))}
.cpcs-nav-item.active .nav-icon{background:rgba(255,255,255,.17);color:#fff;border-color:rgba(255,255,255,.20)}

.nav-copy{min-width:0}
.nav-copy strong{display:block;font-size:10.8px;line-height:1.2;font-weight:780}
.nav-copy small{display:block;margin-top:4px;font-size:8.3px;color:#6685a5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpcs-nav-item.active .nav-copy small{color:#dbeafe}
.nav-active-dot{width:5px;height:5px;border-radius:50%;background:transparent}
.cpcs-nav-item.active .nav-active-dot{background:#dbeafe;box-shadow:0 0 0 4px rgba(219,234,254,.17)}

.cpcs-sidebar-spacer{flex:1;min-height:16px}

.cpcs-sidebar-project{
    position:relative;
    z-index:2;
    margin:0 2px 7px;
    padding:9px;
    display:grid;
    grid-template-columns:31px minmax(0,1fr);
    align-items:center;
    gap:8px;
    border:1px solid rgba(255,255,255,.55);
    border-radius:13px;
    background:rgba(255,255,255,.34);
    box-shadow:inset 0 1px rgba(255,255,255,.84);
    backdrop-filter:blur(15px);
}
.project-icon{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;background:rgba(219,234,254,.75);color:#2563eb}
.project-icon svg{width:15px;height:15px}
.cpcs-sidebar-project small{display:block;font-size:7.2px;letter-spacing:.1em;color:#4f77a0;font-weight:850}
.cpcs-sidebar-project strong{display:block;margin-top:4px;font-size:8.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#173c62}

.cpcs-sidebar-user{
    position:relative;
    z-index:2;
    width:100%;
    padding:10px 8px;
    display:grid;
    grid-template-columns:34px minmax(0,1fr) 8px;
    align-items:center;
    gap:9px;
    border:0;
    border-top:1px solid rgba(15,76,129,.10);
    background:transparent;
    color:inherit;
    text-align:left;
    font:inherit;
    cursor:pointer;
    border-radius:13px;
    transition:background .18s ease;
}
.cpcs-sidebar-user:hover{background:rgba(255,255,255,.46)}
.sidebar-avatar{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#2563eb,#60a5fa);color:#fff;font-size:10px;font-weight:900;box-shadow:0 7px 18px rgba(37,99,235,.20)}
.sidebar-user-copy{min-width:0}
.sidebar-user-copy strong{display:block;color:#173c62;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-copy small{display:block;margin-top:4px;color:#6685a5;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-state{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.10)}
.cpcs-sidebar-footer{position:relative;z-index:2;padding:8px 8px 0;display:flex;align-items:center;justify-content:space-between;color:#6b8baa;font-size:6.8px;font-weight:850;letter-spacing:.09em}

@media(max-width:900px){
    #sidebar{width:84px;min-width:84px;flex-basis:84px}
    .main{width:calc(100% - 84px)!important;margin-left:84px!important}
    .cpcs-glass-sidebar{padding:13px 9px 11px}
    .cpcs-sidebar-brand{min-height:72px;padding:2px 0 12px}
    .cpcs-brand-logo-window{height:55px;overflow:hidden}
    .cpcs-brand-logo{width:160px;max-width:none;transform:translateX(-38px)}
    .cpcs-sidebar-context,.nav-copy,.nav-active-dot,.cpcs-sidebar-project,.sidebar-user-copy,.sidebar-user-state,.cpcs-sidebar-footer{display:none!important}
    .cpcs-nav-item{grid-template-columns:1fr;place-items:center;min-height:54px;padding:8px}
    .nav-icon{width:38px;height:38px}
    .cpcs-sidebar-user{display:flex;justify-content:center;padding:11px 0 0}
    .sidebar-avatar{width:36px;height:36px}
}

@media(max-width:600px){
    #sidebar{width:72px;min-width:72px;flex-basis:72px}
    .main{width:calc(100% - 72px)!important;margin-left:72px!important}
    .cpcs-glass-sidebar{padding-left:7px;padding-right:7px}
    .cpcs-brand-logo{width:150px;transform:translateX(-39px)}
    .nav-icon{width:36px;height:36px}
    .cpcs-nav-item{min-height:51px;border-radius:13px}
}

@media(prefers-reduced-motion:reduce){
    .cpcs-glass-sidebar::before,
    .cpcs-liquid-field,
    .cpcs-liquid-caustics{animation:none!important}
    .cpcs-glass-sidebar *{transition:none!important}
}


/* =====================================================
   FRONTEND V1 — LOGOUT + MOBILE DRAWER
===================================================== */
.cpcs-sidebar-mobile-scrim{display:none}

.cpcs-sidebar-logout{
    position:relative;
    z-index:2;
    width:100%;
    min-height:34px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    margin-top:4px;
    padding:0 10px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#6b8baa;
    font:inherit;
    font-size:8px;
    font-weight:750;
    cursor:pointer;
}
.cpcs-sidebar-logout:hover{background:rgba(255,255,255,.48);color:#b91c1c}
.cpcs-sidebar-logout svg{width:13px;height:13px}

@media(max-width:900px) and (min-width:701px){
    .cpcs-sidebar-logout{justify-content:center;padding:0}
    .cpcs-sidebar-logout span{display:none}
}

@media(max-width:700px){
    #sidebar{
        width:0!important;
        min-width:0!important;
        flex-basis:0!important;
        overflow:visible!important;
        z-index:300!important;
    }
    .main{
        width:100%!important;
        margin-left:0!important;
    }
    #sidebar .cpcs-glass-sidebar{
        position:fixed;
        inset:0 auto 0 0;
        width:min(292px,86vw);
        padding:16px 13px 13px;
        transform:translateX(-105%);
        transition:transform .24s cubic-bezier(.2,.75,.3,1);
        box-shadow:24px 0 70px rgba(15,23,42,.16);
    }
    #sidebar.is-mobile-open .cpcs-glass-sidebar{transform:translateX(0)}
    #sidebar .cpcs-sidebar-mobile-scrim{
        display:block;
        position:fixed;
        inset:0;
        z-index:-1;
        border:0;
        background:rgba(15,23,42,.28);
        backdrop-filter:blur(6px);
        opacity:0;
        pointer-events:none;
        transition:opacity .2s ease;
    }
    #sidebar.is-mobile-open .cpcs-sidebar-mobile-scrim{
        z-index:0;
        opacity:1;
        pointer-events:auto;
    }
    #sidebar .cpcs-sidebar-brand{min-height:80px;padding:3px 4px 13px}
    #sidebar .cpcs-brand-logo-window{height:62px;overflow:visible}
    #sidebar .cpcs-brand-logo{width:100%;max-width:215px;transform:none}
    #sidebar .cpcs-sidebar-context,
    #sidebar .nav-copy,
    #sidebar .nav-active-dot,
    #sidebar .sidebar-user-copy,
    #sidebar .sidebar-user-state,
    #sidebar .cpcs-sidebar-footer{display:block!important}
    #sidebar .cpcs-sidebar-project{display:grid!important}
    #sidebar .cpcs-nav-item{
        grid-template-columns:36px minmax(0,1fr) 6px;
        place-items:initial;
        min-height:53px;
        padding:8px 9px;
    }
    #sidebar .cpcs-sidebar-user{
        display:grid;
        grid-template-columns:34px minmax(0,1fr) 8px;
        justify-content:initial;
        padding:10px 8px;
    }
    #sidebar .cpcs-sidebar-footer{display:flex!important}
    #sidebar .cpcs-sidebar-logout{justify-content:flex-start;padding:0 10px}
    #sidebar .cpcs-sidebar-logout span{display:inline}
    body.cpcs-mobile-nav-open{overflow:hidden}
}

@media(prefers-reduced-motion:reduce){
    #sidebar .cpcs-glass-sidebar,
    #sidebar .cpcs-sidebar-mobile-scrim{transition:none!important}
}