/* ===========================
   SmartMitraAI Dashboard
   =========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --primary:#355CFF;
    --primary-dark:#2348d8;
    --secondary:#7B61FF;

    --sidebar:#0B1739;

    --background:#F4F7FE;

    --card:#FFFFFF;

    --text:#20263A;

    --text-light:#707A8A;

    --border:#E6EAF5;

    --success:#1BC47D;

    --shadow:0 15px 40px rgba(0,0,0,.08);

    --radius:18px;

}

body{

    font-family:'Poppins',sans-serif;

    background:var(--background);

    color:var(--text);

}

/* ===========================
        Layout
=========================== */

.container{

    display:flex;

    min-height:100vh;

}

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

.sidebar{

    width:270px;

    background:linear-gradient(180deg,#08152F,#10235A);

    color:white;

    padding:30px 20px;

    display:flex;

    flex-direction:column;

}

.logo{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:45px;

}

.logo i{

    font-size:32px;

    color:#8BB7FF;

}

.logo h2{

    font-size:24px;

}

.sidebar ul{

    list-style:none;

}

.sidebar li{

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px;

    border-radius:14px;

    cursor:pointer;

    margin-bottom:8px;

    transition:.35s;

}

.sidebar li:hover{

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

}

.sidebar li.active{

    background:linear-gradient(90deg,var(--primary),var(--secondary));

}

.sidebar i{

    width:25px;

}

.upgrade{

    margin-top:auto;

    border:none;

    padding:16px;

    border-radius:14px;

    background:linear-gradient(90deg,var(--primary),var(--secondary));

    color:white;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.upgrade:hover{

    transform:translateY(-3px);

}

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

.main{

    flex:1;

    padding:35px;

}

/* ===========================
        Top Bar
=========================== */

.topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.topbar h1{

    font-size:34px;

}

.topbar p{

    color:var(--text-light);

    margin-top:5px;

}

.top-icons{

    display:flex;

    align-items:center;

    gap:18px;

}

.top-icons i{

    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:white;

    box-shadow:var(--shadow);

    cursor:pointer;

}

.top-icons img{

    width:46px;

    height:46px;

    border-radius:50%;

    cursor:pointer;

}

/* ===========================
        Cards
=========================== */

.cards{

    display:grid;

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

    gap:20px;

    margin-bottom:30px;

}

.card{

    background:white;

    border-radius:var(--radius);

    padding:25px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.card:hover{

    transform:translateY(-8px);

}

.card span{

    color:var(--text-light);

    font-size:14px;

}

.card h2{

    margin:10px 0;

    font-size:32px;

}

.card small{

    color:var(--success);

    font-weight:500;

}

/* ===========================
        AI Card
=========================== */

.ai-card{

    background:linear-gradient(135deg,#EEF3FF,#F7F1FF);

    border-radius:25px;

    box-shadow:var(--shadow);

    padding:35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.ai-card h2{

    margin-bottom:12px;

}

.ai-card p{

    color:var(--text-light);

}

.ai-card button{

    margin-top:22px;

    border:none;

    background:linear-gradient(90deg,var(--primary),var(--secondary));

    color:white;

    padding:14px 28px;

    border-radius:40px;

    cursor:pointer;

    font-size:15px;

    transition:.35s;

}

.ai-card button:hover{

    transform:translateY(-3px);

}

.ai-card img{

    width:180px;

    animation:float 3s ease-in-out infinite;

}

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}

/* ===========================
        Bottom Area
=========================== */

.bottom{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

}

.schedule,
.activity{

    background:white;

    padding:25px;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.bottom h3{

    margin-bottom:20px;

}

.bottom ul{

    list-style:none;

}

.bottom li{

    padding:16px 0;

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

    color:#555;

}

.bottom li:last-child{

    border:none;

}

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

@media(max-width:1200px){

.cards{

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

}

}

@media(max-width:900px){

.sidebar{

display:none;

}

.main{

padding:20px;

}

.bottom{

grid-template-columns:1fr;

}

.ai-card{

flex-direction:column;

text-align:center;

}

.ai-card img{

margin-top:30px;

}

}

@media(max-width:700px){

.cards{

grid-template-columns:1fr;

}

.topbar{

flex-direction:column;

align-items:flex-start;

gap:20px;

}

}


/* Header */

.header-right{

display:flex;

align-items:center;

gap:20px;

}

.search-box{

width:320px;

background:white;

display:flex;

align-items:center;

padding:12px 18px;

border-radius:50px;

box-shadow:var(--shadow);

}

.search-box input{

border:none;

outline:none;

width:100%;

font-size:15px;

margin-left:10px;

background:none;

}

.icon{

position:relative;

width:48px;

height:48px;

background:white;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

box-shadow:var(--shadow);

cursor:pointer;

}

.badge{

position:absolute;

top:-5px;

right:-5px;

width:20px;

height:20px;

border-radius:50%;

background:red;

color:white;

font-size:12px;

display:flex;

justify-content:center;

align-items:center;

}

/* Cards */

.card-top{

display:flex;

justify-content:space-between;

align-items:center;

}

.card-icon{

width:60px;

height:60px;

border-radius:18px;

display:flex;

justify-content:center;

align-items:center;

font-size:24px;

color:white;

}

.blue{

background:#3A7BFF;

}

.purple{

background:#7A4DFF;

}

.orange{

background:#FF9D00;

}

.green{

background:#19B36B;

}

/* AI */

.ai-left{

max-width:60%;

}

.ai-right img{

width:230px;

}

.welcome{

display:inline-block;

background:#E8F0FF;

padding:8px 18px;

border-radius:30px;

margin-bottom:20px;

font-size:14px;

color:#355CFF;

}

.buttons{

margin-top:30px;

display:flex;

gap:15px;

}

.primary{

background:linear-gradient(90deg,#355CFF,#6A4BFF);

color:white;

border:none;

padding:14px 28px;

border-radius:30px;

cursor:pointer;

}

.secondary{

background:white;

border:none;

padding:14px 28px;

border-radius:30px;

cursor:pointer;

box-shadow:var(--shadow);

}

.dashboard-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

margin-top:30px;

}

.panel{

background:white;

padding:25px;

border-radius:22px;

box-shadow:var(--shadow);

}

.panel-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.panel-header a{

text-decoration:none;

color:#355CFF;

font-weight:600;

}

.schedule-item{

display:flex;

gap:20px;

padding:18px 0;

border-bottom:1px solid #ECECEC;

}

.schedule-item:last-child{

border:none;

}

.time{

width:70px;

font-weight:700;

color:#355CFF;

}

.activity-item{

display:flex;

gap:15px;

padding:18px 0;

border-bottom:1px solid #ECECEC;

align-items:center;

}

.activity-item:last-child{

border:none;

}

.activity-item i{

width:45px;

height:45px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:#EEF3FF;

color:#355CFF;

font-size:18px;

}

.charts{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

margin-top:25px;

}

.chart-card{

background:white;

padding:25px;

border-radius:22px;

box-shadow:var(--shadow);

height:420px;

}

canvas{

margin-top:20px;

}


.calendar-card{

background:white;

padding:25px;

border-radius:20px;

box-shadow:var(--shadow);

}

.calendar-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.days,
#dates{

display:grid;

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

gap:10px;

text-align:center;

}

.days div{

font-weight:600;

padding:10px;

}

#dates div{

padding:12px;

border-radius:10px;

cursor:pointer;

transition:.3s;

}

#dates div:hover{

background:#355CFF;

color:white;

}

.today{

background:#355CFF;

color:white;

}

.floating-ai{

position:fixed;

bottom:30px;

right:30px;

width:70px;

height:70px;

background:linear-gradient(135deg,#355CFF,#7A4DFF);

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

color:white;

font-size:30px;

cursor:pointer;

box-shadow:0 10px 35px rgba(0,0,0,.25);

animation:float 2.5s infinite;

}

.quick-actions{

display:grid;

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

gap:20px;

margin:30px 0;

}

.action{

background:white;

padding:25px;

border-radius:20px;

text-align:center;

box-shadow:var(--shadow);

cursor:pointer;

transition:.3s;

}

.action:hover{

transform:translateY(-8px);

}

.action i{

font-size:32px;

margin-bottom:15px;

color:#355CFF;

}

.logo{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:40px;

}

.logo-left{

    display:flex;

    align-items:center;

    gap:10px;

}

#menuBtn{

    background:none;

    border:none;

    color:white;

    font-size:22px;

    cursor:pointer;

}

.sidebar.close{

    width:90px;

}

.sidebar.close h2,

.sidebar.close li span,

.sidebar.close .upgrade{

    display:none;

}

.sidebar.close li{

    justify-content:center;

}

.sidebar{

    transition:.4s;
}

.main{

    transition:.4s;
}

.card{

animation:fadeUp .8s ease;

}

.card:nth-child(2){

animation-delay:.1s;

}

.card:nth-child(3){

animation-delay:.2s;

}

.card:nth-child(4){

animation-delay:.3s;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}