/* ==========================
   GOOGLE FONT
========================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* ==========================
   VARIABLES
========================== */
:root{

    --bg:#F8F8F6;
    --surface:#FFFFFF;

    --text:#1F2937;
    --muted:#6B7280;

    --border:#E5E7EB;

    --primary:#C8D3FF;
    --primary-dark:#8EA8FF;

    --logo:#FFCA94;


    /* ==========================
       EVENT COLOURS
    ========================== */

    --event-coursework:#A4DF92;
    --event-personal:#DFA4DC;
    --event-study:#90B1DF;

}

/* ==========================
   RESET
========================== */

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

/* ==========================
   BODY
========================== */

body{

    font-family:'Outfit',sans-serif;
    background:var(--bg);

    min-height:100vh;

    display:flex;

}

/* ==========================
   SIDEBAR
========================== */

.sidebar{

    width:150px;
    height:100vh;

    display:flex;
    flex-direction:column;
    align-items:center;

    padding:25px 0;

    flex-shrink:0;

}

/* ==========================
   LOGO
========================== */

.logo{

    margin-top:-50px;

}

.logo-image{

    width:200px;
    height:auto;

    display:block;

}

/* ==========================
   NAVIGATION
========================== */

.nav-pill{

    background:var(--surface);

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

    border-radius:999px;

    padding:16px 12px;

    display:flex;
    flex-direction:column;

    gap:18px;

    box-shadow:0 8px 30px rgba(0,0,0,.03);

}

/* ==========================
   NAV ITEM
========================== */

.nav-item{

    width:52px;
    height:52px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--muted);

    text-decoration:none;

    transition:all .25s ease;

}

/* Hover */

.nav-item:hover{

    background:#FFF2E2;

    color:var(--text);

    transform:translateY(-2px);

}

/* Active */

.nav-item.active{

    background:var(--logo);

    color:var(--text);

    box-shadow:0 6px 18px rgba(255,202,148,.35);

}

/* Icons */

.nav-item svg{

    width:22px;
    height:22px;

    stroke-width:2;

}

/* ==========================
   ACCOUNT
========================== */

.account-pill{

    margin-top:auto;

    background:var(--surface);

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

    border-radius:999px;

    padding:14px 12px;

    display:flex;
    flex-direction:column;

    gap:18px;

    margin-bottom:-10px;

    box-shadow:0 8px 30px rgba(0,0,0,.03);

}

/* ==========================
   MAIN CONTENT
========================== */

.main-content{

    flex:1;

    padding:40px 60px;

}

/* ==========================

   HEADER

========================== */

.dashboard-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:-10px;

}

/* ==========================
   WELCOME
========================== */

.welcome h1{

    font-size:2rem;
    font-weight:600;

    color:var(--text);

    margin-bottom:8px;

}

.welcome p{

    font-size:1rem;

    color:var(--muted);

}

/* ==========================

   HEADER PILL

========================== */
.header-pill{

    display:flex;

    align-items:center;

    gap:8px;              /* Space between the icons */

    background:var(--surface);

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

    border-radius:999px;

    padding:10px;

    box-shadow:0 8px 30px rgba(0,0,0,.03);

    margin-left:320px;     /* ← Move the pill horizontally */

    margin-right:auto;    /* ← Push the search bar to the far right */

}

/* ==========================

   HEADER ICONS

========================== */

.header-icon{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    text-decoration:none;

    color:var(--muted);

    transition:all .25s ease;

}

.header-icon:hover{

    background:#FFF2E2;

    color:var(--text);

    transform:translateY(-2px);

}

.header-icon.active{

    background:var(--logo);

    color:var(--text);

    box-shadow:0 6px 18px rgba(255,202,148,.35);

}

.header-icon svg{

    width:22px;

    height:22px;

    stroke-width:2;

}

/* ==========================
   SEARCH BAR
========================== */

.search-bar{

    display:flex;
    align-items:center;
    gap:12px;

    width:320px;          /* Change width here */

    padding:14px 18px;

    background:var(--surface);

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

    border-radius:999px;

    box-shadow:0 8px 30px rgba(0,0,0,.03);

    transition:.25s ease;

}

.search-bar:focus-within{

    border-color:var(--logo);

    box-shadow:0 8px 30px rgba(255,202,148,.20);

}

.search-bar svg{

    width:20px;
    height:20px;

    color:var(--muted);

    flex-shrink:0;

}

.search-bar input{

    width:100%;

    border:none;
    outline:none;

    background:transparent;

    font-family:'Outfit',sans-serif;
    font-size:0.95rem;

    color:var(--text);

}

.search-bar input::placeholder{

    color:var(--muted);

}

/* ==========================

   TOP WIDGETS

========================== */

.top-widgets{

    display:flex;

    gap:25px;

    margin-top: auto;

}

/* ==========================
   CALENDAR WIDGET
========================== */

.calendar-widget{

    background:var(--surface);

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

    border-radius:24px;

    margin-top:70px;

    margin-left:-10px;

    padding:25px;

    width:650px;

    box-shadow:0 8px 30px rgba(0,0,0,.03);

}


/* Header */

.calendar-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}


.calendar-header h2{

    font-size:1.25rem;

    color:var(--text);

}


/* Controls */

.calendar-controls{

    display:flex;

    gap:8px;

}


.calendar-controls button{

    width:36px;
    height:36px;

    border:none;

    border-radius:50%;

    background:transparent;

    cursor:pointer;

    color:var(--muted);

    display:flex;

    align-items:center;

    justify-content:center;

}


.calendar-controls button:hover{

    background:#FFF2E2;

    color:var(--text);

}



/* Weekdays */

.calendar-weekdays{

    display:grid;

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

    text-align:center;

    margin-bottom:12px;

    color:var(--muted);

    font-size:.85rem;

}


/* Days */

.calendar-days{

    display:grid;

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

    gap:8px;

}


.calendar-day{

    width:40px;
    height:40px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    cursor:pointer;

    color:var(--text);

    transition:.2s ease;

    justify-self:center;

}


.calendar-day:hover{

    background:#FFF2E2;

}


.calendar-day.today{

    background:var(--logo);

    color:var(--text);

}


.calendar-day.selected{

    background:var(--primary);

}


.calendar-day.empty{

    cursor:default;

}

.calendar-day.has-event{

    position:relative;

}

.calendar-day.has-event::after{

    content:"";

    position:absolute;

    bottom:4px;
    left:50%;

    transform:translateX(-50%);

    width:7px;
    height:7px;

    border-radius:50%;

}

.calendar-day.coursework::after{

    background:var(--event-coursework);

}

.calendar-day.study::after{

    background:var(--event-study);

}

.calendar-day.personal::after{

    background:var(--event-personal);

}




/* ==========================

   TODAY'S FOCUS

========================== */

.focus-widget{

    background:var(--surface);

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

    border-radius:24px;

    margin-top: 70px;

    width:625px;

    height:600;

    padding:18px;

    box-shadow:0 8px 30px rgba(0,0,0,.03);

 

}

.focus-widget .widget-title{

    margin-bottom:20px;

}

.focus-widget svg{

    width:22px;

    color:var(--muted);

}

/* Main Focus */

.focus-main{

    background:#FFF8EF;

    border-radius:16px;

    padding:15px;

    margin-bottom:20px;

}

.focus-main h3{

    font-size:1rem;

    font-weight:600;

    color:var(--text);

    margin-bottom:6px;

}

.focus-main p{

    color:var(--muted);

    font-size:.85rem;

}

/* Checklist */

.focus-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.focus-item{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:.85rem;

    color:var(--text);

}

.focus-item svg{

    width:18px;

    height:18px;

    color:var(--logo);

}

/* ==========================
   BOTTOM WIDGETS
========================== */

.bottom-widgets{

    display:flex;

    gap:25px;

    margin-top:15px;

}

/* ==========================
   PROGRESS WIDGET
========================== */
.progress-widget{

    background:var(--surface);

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

    border-radius:24px;

    margin-top: 20px;

    margin-left: -10px;

    padding:18px;

    width:325px;

    height:260px;

    box-shadow:0 8px 30px rgba(0,0,0,.03);

    

}



/* Header */
.widget-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:15px;

}


.widget-title h2{

    font-size:1.25rem;

    color:var(--text);

}


.widget-title svg{

    width:22px;

    color:var(--muted);

}

.progress-main{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

}

/* Circle */
.progress-circle{

    width:100px;
    height:100px;

    border-radius:50%;

    background:
    conic-gradient(
        var(--logo) 60%,
        #F1F1ED 60%
    );

    display:flex;
    align-items:center;
    justify-content:center;

}


.progress-inner{

    width:72px;

    height:72px;

    background:var(--surface);

    border-radius:50%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}



.progress-inner span{

    font-size:1.2rem;

    font-weight:600;

    color:var(--text);

}


.progress-inner small{

    color:var(--muted);

}



/* Text */

.progress-info{

    text-align:center;

    margin-top:12px;

}


.progress-info h3{

    font-size:1.2rem;

    color:var(--text);

}


.progress-info p{
    font-size: .8rem;

    color:var(--muted);

}



/* Stats */


.progress-stats{

    display:flex;

    justify-content:space-around;

    gap:20px;

    margin-top:40px;

}



.stat{

    display:flex;

    align-items:center;

    gap:12px;

}



.stat-icon{

    width:36px;

    height:36px;

    border-radius:50%;

    background:#FFF2E2;

    display:flex;

    align-items:center;

    justify-content:center;

}



.stat-icon svg{

    width:20px;

    color:var(--text);

}


.stat h4{

    font-size:.95rem;

}


.stat p{

    font-size:.8rem;

    color:var(--muted);

}

/* ==========================
   NOTES WIDGET
========================== */


.notes-widget{

    background:var(--surface);

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

    border-radius:24px;

    padding:18px;

    width:300px;

    height:260px;

    margin-top: 20px;

    box-shadow:0 8px 30px rgba(0,0,0,.03);

    

}


/* Header */

.notes-widget .widget-title{

    margin-bottom:20px;

}


/* Content */

.note-content{

    background:#FFF8EF;

    border-radius:16px;

    padding:15px;

    height:160px;

}


.note-content p{

    font-size:.9rem;

    color:var(--text);

    margin-bottom:10px;

}


.note-content ul{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:10px;

}


.note-content li{

    font-size:.85rem;

    color:var(--muted);

    position:relative;

    padding-left:18px;

}


.note-content li::before{

    content:"";

    width:7px;

    height:7px;

    background:var(--logo);

    border-radius:50%;

    position:absolute;

    left:0;

    top:7px;

}

/* ==========================
   ASSIGNMENTS WIDGET
========================== */


.assignments-widget{

    background:var(--surface);

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

    border-radius:24px;

    padding:18px;

    width:625px;

    height:265px;

    margin-top: 15px;

    box-shadow:0 8px 30px rgba(0,0,0,.03);



}




.widget-title{

    margin-bottom:20px;

}





.assignment-list{

    display:flex;

    flex-direction:column;

    gap:15px;

}





.assignment-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#FAFAF8;

    padding:14px;

    border-radius:16px;

}





.assignment-item h3{

    font-size:.9rem;

    font-weight:600;

    color:var(--text);

    margin-bottom:5px;

}




.assignment-item p{

    font-size:.8rem;

    color:var(--muted);

}





.due-badge{

    background:var(--primary);

    color:var(--text);

    padding:6px 10px;

    border-radius:999px;

    font-size:.75rem;

}





.due-badge.urgent{

    background:var(--logo);

}

/* ==========================
   EVENT MODAL
========================== */

.modal-overlay{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;
    justify-content:center;

    background:rgba(31,41,55,.25);

    backdrop-filter:blur(8px);

    opacity:0;
    visibility:hidden;

    transition:.25s ease;

    z-index:1000;

}

.modal-overlay.show{

    opacity:1;

    visibility:visible;

}

/* ==========================
   MODAL
========================== */

.event-modal{

    width:460px;

    background:var(--surface);

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

    border-radius:24px;

    padding:28px;

    box-shadow:0 30px 60px rgba(0,0,0,.15);

    transform:translateY(20px) scale(.98);

    transition:.25s ease;

}

.modal-overlay.show .event-modal{

    transform:translateY(0) scale(1);

}

/* ==========================
   TITLE
========================== */

.event-modal h2{

    font-size:1.5rem;

    color:var(--text);

    margin-bottom:24px;

}

/* ==========================
   INPUT GROUP
========================== */

.input-group{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-bottom:18px;

}

.input-group label{

    font-size:.85rem;

    font-weight:500;

    color:var(--muted);

}

/* ==========================
   INPUTS
========================== */

.input-group input,
.input-group select,
.input-group textarea{

    width:100%;

    padding:14px 16px;

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

    border-radius:14px;

    background:var(--bg);

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

    font-size:.95rem;

    color:var(--text);

    outline:none;

    transition:.2s ease;

}

.input-group textarea{

    resize:none;

}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus{

    border-color:var(--logo);

    box-shadow:0 0 0 4px rgba(255,202,148,.18);

}

/* ==========================
   BUTTONS
========================== */

.modal-buttons{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    margin-top:28px;

}

.modal-buttons button{

    border:none;

    border-radius:999px;

    padding:12px 22px;

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

    font-size:.9rem;

    font-weight:500;

    cursor:pointer;

    transition:.25s ease;

}

/* Cancel */

#cancel-event{

    background:#F3F4F6;

    color:var(--text);

}

#cancel-event:hover{

    background:#E5E7EB;

}

/* Save */

#save-event{

    background:var(--logo);

    color:var(--text);

    box-shadow:0 8px 20px rgba(255,202,148,.35);

}

#save-event:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 26px rgba(255,202,148,.45);

}

/* ==========================
   EVENT MANAGER MODAL
========================== */


.event-manager-modal{

    width:420px;

    background:var(--surface);

    border-radius:28px;

    padding:25px;

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

    box-shadow:
    0 30px 70px rgba(0,0,0,.15);

}





/* ==========================
   HEADER
========================== */


.event-manager-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:25px;

}



.event-manager-header h2{

    font-size:1.4rem;

    color:var(--text);

}



.event-manager-header p{

    margin-top:5px;

    color:var(--muted);

    font-size:.85rem;

}





#close-manager{

    width:36px;

    height:36px;

    border:none;

    border-radius:50%;

    background:#F3F4F6;

    color:var(--muted);

    cursor:pointer;

    transition:.2s ease;

}



#close-manager:hover{

    background:#FFF2E2;

    color:var(--text);

}





/* ==========================
   EVENTS CONTAINER
========================== */


.manager-events{

    display:flex;

    flex-direction:column;

    gap:15px;

    max-height:350px;

    overflow-y:auto;

}






/* ==========================
   EVENT CARD
========================== */


.event-card{

    background:#FAFAF8;

    border-radius:18px;

    padding:16px;

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

}





.event-card-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;

}



.event-card h3{

    font-size:1rem;

    color:var(--text);

}




/* DELETE BUTTON */


.delete-event{

    width:32px;

    height:32px;

    border:none;

    border-radius:50%;

    background:#F3F4F6;

    color:var(--muted);

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.2s ease;

}


.delete-event:hover{

    background:#FFE4E4;

    color:#EF4444;

}



.delete-event svg{

    width:16px;

}





/* ==========================
   TIME
========================== */


.event-time{

    display:flex;

    align-items:center;

    gap:6px;

    color:var(--muted);

    font-size:.85rem;

}



.event-time svg{

    width:16px;

}





/* ==========================
   CATEGORY
========================== */


.event-category{

    display:inline-flex;

    margin-top:10px;

    padding:5px 12px;

    border-radius:999px;

    font-size:.75rem;

}



.event-category.coursework{

    background:var(--event-coursework);

}



.event-category.study{

    background:var(--event-study);

}



.event-category.personal{

    background:var(--event-personal);

}




/* ==========================
   NOTES
========================== */


.event-notes{

    margin-top:10px;

    color:var(--muted);

    font-size:.85rem;

}





/* ==========================
   ADD EVENT BUTTON
========================== */


.primary-btn{

    width:100%;

    margin-top:20px;

    background:var(--logo);

    color:var(--text);

    border:none;

    padding:13px;

    border-radius:999px;

    cursor:pointer;

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

    font-size:.9rem;

    transition:.25s ease;

}



.primary-btn:hover{

    transform:translateY(-2px);

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

}

/* ==========================
   DASHBOARD ENTRANCE
========================== */
/* ==========================
   DASHBOARD ENTRANCE
========================== */


/* WELCOME */

.welcome-animation{

    opacity:0;

    transform:translateY(20px);

    animation:slideUp .6s ease forwards;

    animation-delay:.1s;

}



/* TOP ROW */

.top-animation{

    opacity:0;

    transform:translateY(30px);

    animation:slideUp .7s ease forwards;

    animation-delay:.3s;

}



/* BOTTOM ROW */

.bottom-animation{

    opacity:0;

    transform:translateY(30px);

    animation:slideUp .7s ease forwards;

    animation-delay:.5s;

}




@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}

.calendar-widget,
.focus-widget,
.progress-widget,
.notes-widget,
.assignments-widget{

    transition:.3s ease;

}


.calendar-widget:hover,
.focus-widget:hover,
.progress-widget:hover,
.notes-widget:hover,
.assignments-widget:hover{


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

}