/* ==========================================================
   CIBM Studio Pro
   Welcome Dashboard
========================================================== */

#welcomeWorkspace{

    position:absolute;

    inset:0;

    overflow:auto;

    background:#F4F7FB;

    padding:40px;

}

/* ==========================================================
   Main Page
========================================================== */

#welcomePage{

    max-width:1700px;

    margin:auto;

}

/* ==========================================================
   Hero
========================================================== */

#welcomeHero{

    background:

    linear-gradient(

        135deg,

        var(--cibm-blue),

        var(--cibm-blue-dark)

    );

    color:white;

    border-radius:20px;

    padding:70px;

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

    margin-bottom:30px;

}

.heroContent{

    max-width:900px;

}

.brand{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:20px;

}

.brandName{

    font-size:48px;

    font-weight:700;

    letter-spacing:3px;

}

.productName{

    font-size:30px;

    font-weight:300;

    opacity:.9;

}

#welcomeHero h1{

    font-size:42px;

    margin-bottom:20px;

}

#welcomeHero p{

    font-size:18px;

    opacity:.92;

    line-height:1.7;

    margin-bottom:35px;

}

/* ==========================================================
   Hero Buttons
========================================================== */

.heroButtons{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

}

.heroButtons button{

    padding:14px 28px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.25s;

}

.primaryButton{

    background:white;

    color:var(--cibm-blue);

}

.heroButtons button:not(.primaryButton){

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

    color:white;

    border:1px solid rgba(255,255,255,.30);

}

.heroButtons button:hover{

    transform:translateY(-3px);

}

/* ==========================================================
   Quick Actions
========================================================== */

#quickActions{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

    margin-bottom:30px;

}

.actionCard{

    background:white;

    border-radius:16px;

    padding:30px;

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

    transition:.25s;

    cursor:pointer;

}

.actionCard:hover{

    transform:translateY(-5px);

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

}

.actionCard .icon{

    font-size:38px;

    margin-bottom:18px;

}

.actionCard h3{

    margin-bottom:10px;

    color:var(--gray-800);

}

.actionCard p{

    color:var(--gray-500);

    line-height:1.5;

}

/* ==========================================================
   Dashboard Grid
========================================================== */

#welcomeGrid{

    display:grid;

    grid-template-columns:2fr 2fr 1.2fr;

    gap:30px;

}

/* ==========================================================
   Panels
========================================================== */

.dashboardPanel{

    background:white;

    border-radius:16px;

    padding:28px;

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

}

.dashboardPanel h2{

    margin-bottom:22px;

    color:var(--gray-800);

}

/* ==========================================================
   Recent Documents
========================================================== */

.documentCard{

    padding:18px;

    border-radius:10px;

    border:1px solid var(--gray-200);

    margin-bottom:14px;

    transition:.2s;

    cursor:pointer;

}

.documentCard:hover{

    background:#F8FBFF;

    border-color:var(--cibm-blue);

}

/* ==========================================================
   Templates
========================================================== */

.templateGrid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:14px;

}

.templateCard{

    padding:18px;

    border-radius:10px;

    background:#F8FAFC;

    text-align:center;

    transition:.2s;

    cursor:pointer;

}

.templateCard:hover{

    background:var(--cibm-blue);

    color:white;

}

/* ==========================================================
   Sidebar
========================================================== */

.dashboardSidebar{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.dashboardSidebar ul{

    list-style:none;

}

.dashboardSidebar li{

    padding:10px 0;

    border-bottom:1px solid var(--gray-200);

}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:1300px){

    #quickActions{

        grid-template-columns:repeat(2,1fr);

    }

    #welcomeGrid{

        grid-template-columns:1fr;

    }

}