/*
|--------------------------------------------------------------------------
| DP OS Enterprise
| Core Styles v1.0
|--------------------------------------------------------------------------
*/

:root{

    --dpoe-primary:#2563eb;
    --dpoe-primary-hover:#1d4ed8;

    --dpoe-dark:#0f172a;
    --dpoe-dark-2:#1e293b;

    --dpoe-bg:#f5f7fb;
    --dpoe-surface:#ffffff;

    --dpoe-border:#e5e7eb;

    --dpoe-text:#111827;
    --dpoe-text-light:#64748b;

    --dpoe-success:#22c55e;
    --dpoe-warning:#f59e0b;
    --dpoe-danger:#ef4444;

    --dpoe-radius:18px;

    --dpoe-shadow:
        0 12px 35px rgba(15,23,42,.08);

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:var(--dpoe-bg);

    color:var(--dpoe-text);

}

a{

    text-decoration:none;

    color:inherit;

}

button{

    font:inherit;

    cursor:pointer;

}

input,
select,
textarea{

    font:inherit;

    outline:none;

}

#dpoe-app{

    display:flex;

    min-height:100vh;

    background:var(--dpoe-bg);

}

/*--------------------------------------------------------------
SIDEBAR
--------------------------------------------------------------*/

.dpoe-sidebar{

    width:280px;

    background:linear-gradient(
        180deg,
        var(--dpoe-dark),
        var(--dpoe-dark-2)
    );

    color:#fff;

    display:flex;

    flex-direction:column;

    padding:30px;

    box-shadow:6px 0 30px rgba(0,0,0,.08);

}

.dpoe-logo{

    margin-bottom:45px;

}

.dpoe-logo h2{

    font-size:30px;

    font-weight:800;

    line-height:1;

}

.dpoe-logo span{

    display:block;

    margin-top:8px;

    font-size:12px;

    letter-spacing:3px;

    text-transform:uppercase;

    opacity:.65;

}

.dpoe-menu{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.dpoe-menu a{

    padding:15px 18px;

    border-radius:14px;

    color:#cbd5e1;

    transition:.25s;

    font-weight:600;

}

.dpoe-menu a:hover{

    background:rgba(255,255,255,.08);

    color:#fff;

}

.dpoe-menu a.active{

    background:var(--dpoe-primary);

    color:#fff;

}

/*--------------------------------------------------------------
CONTENT
--------------------------------------------------------------*/

.dpoe-content{

    flex:1;

    padding:40px;

}

.dpoe-header{

    margin-bottom:35px;

}

.dpoe-header h1{

    font-size:34px;

    font-weight:800;

}

.dpoe-header p{

    margin-top:8px;

    color:var(--dpoe-text-light);

}

.dpoe-cards{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(260px,1fr));

    gap:25px;

}

.dpoe-card{

    background:#fff;

    border-radius:20px;

    padding:30px;

    border:1px solid var(--dpoe-border);

    box-shadow:var(--dpoe-shadow);

    transition:.25s;

}

.dpoe-card:hover{

    transform:translateY(-4px);

}

/*--------------------------------------------------------------
RESPONSIVE
--------------------------------------------------------------*/

@media(max-width:992px){

    #dpoe-app{

        flex-direction:column;

    }

    .dpoe-sidebar{

        width:100%;

        min-height:auto;

    }

    .dpoe-content{

        padding:25px;

    }

}

@media(max-width:768px){

    .dpoe-header h1{

        font-size:28px;

    }

    .dpoe-cards{

        grid-template-columns:1fr;

    }

}