:root {

    --background: #f5f3ee;
    --card: #fbfaf7;
    --soft: #eeece7;
    --text: #25231f;
    --muted: #817c73;
    --border: #e2ded6;

    --purple: #ddd3ed;
    --purple-dark: #8770b6;

    --blue: #d8e6ef;
    --green: #dce9d5;
    --orange: #eadbc8;
    --red: #e8cfca;
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark {

    --background: #181817;
    --card: #232321;
    --soft: #2d2c29;

    --text: #f2f0eb;
    --muted: #a5a098;

    --border: #393733;

    --purple: #3b334a;
    --purple-dark: #a98bd5;

    --blue: #293842;
    --green: #29372a;
    --orange: #3d3328;
    --red: #3c2927;
}


body.dark {
    background: #0e0e0d;
}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    color: var(--text);

    background: #dfdcd5;

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

    transition:
        background .25s ease,
        color .25s ease;
}


button,
input,
select,
textarea {
    font: inherit;
}


button {
    cursor: pointer;
}


/* =========================================================
   APP
========================================================= */

.app {

    width: 100%;

    max-width: 760px;

    min-height: 100vh;

    margin: auto;

    background: var(--background);

    padding-bottom: 90px;

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

    transition:
        background .25s ease;
}


.hidden {
    display: none !important;
}


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

.topbar {

    height: 76px;

    padding:
        15px 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

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


.profile {

    display: flex;

    align-items: center;

    gap: 11px;
}


.avatar {

    width: 40px;

    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #f1efd9;

    border:
        1px solid #bac877;

    color: #25231f;

    font-weight: 700;
}


.app-title {

    font-size: 14px;

    font-weight: 700;
}


.app-subtitle {

    color: var(--muted);

    font-size: 11px;

    margin-top: 2px;
}


.top-actions {

    display: flex;

    gap: 8px;
}


.icon-button {

    width: 40px;

    height: 40px;

    border: none;

    border-radius: 50%;

    color: var(--text);

    background: var(--card);

    font-size: 18px;
}


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

main {
    padding: 24px;
}


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

.welcome {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin:
        8px 0 25px;
}


.eyebrow {

    color: var(--muted);

    font-size: 10px;

    letter-spacing: 1px;

    margin-bottom: 6px;
}


.welcome h1 {

    margin: 0;

    font-family: Georgia, serif;

    font-size: 30px;

    font-weight: 500;
}


#dateText {

    margin:
        7px 0 0;

    color: var(--muted);

    font-size: 13px;
}


/* =========================================================
   PROGRESS
========================================================= */

.overall-progress {

    display: flex;

    align-items: center;

    gap: 10px;
}


.overall-progress strong {

    display: block;

    font-size: 12px;
}


.overall-progress small {

    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 11px;
}


.progress-ring {

    width: 60px;

    height: 60px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        conic-gradient(
            var(--purple-dark) 0deg,
            #e4e0d9 0deg
        );
}


.progress-ring span {

    width: 48px;

    height: 48px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--background);

    font-size: 12px;

    font-weight: 700;
}


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

.search-box {

    height: 45px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        0 14px;

    margin-bottom: 25px;

    border-radius: 12px;

    background: var(--soft);
}


.search-box span {

    color: var(--muted);

    font-size: 22px;
}


.search-box input {

    width: 100%;

    border: none;

    outline: none;

    color: var(--text);

    background: transparent;

    font-size: 14px;
}


/* =========================================================
   SECTION
========================================================= */

.section-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin:
        18px 0 11px;
}


.section-header h2 {

    margin: 0;

    font-family: Georgia, serif;

    font-size: 20px;

    font-weight: 500;
}


.section-header span {

    color: var(--muted);

    font-size: 12px;
}


.upcoming-section {

    margin-top: 25px;
}


/* =========================================================
   FILTERS
========================================================= */

.filters {

    display: flex;

    gap: 7px;

    margin-bottom: 12px;
}


.filter {

    border: none;

    border-radius: 16px;

    padding:
        7px 13px;

    color: var(--muted);

    background: var(--soft);

    font-size: 11px;
}


.filter.active {

    color: #4d3a72;

    background: var(--purple);
}


/* =========================================================
   TASK
========================================================= */

.task {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px;

    margin:
        9px 0;

    border:
        1px solid transparent;

    border-radius: 14px;

    background: var(--card);

    box-shadow:
        0 2px 8px rgba(0,0,0,.035);

    transition:
        transform .15s ease,
        border .15s ease;
}


.task:hover {

    transform:
        translateY(-1px);

    border-color:
        var(--border);
}


.checkbox {

    width: 21px;

    height: 21px;

    min-width: 21px;

    display: grid;

    place-items: center;

    border:
        1.7px solid #8d877e;

    border-radius: 50%;

    background: transparent;

    color: white;
}


.checkbox.completed {

    border-color:
        var(--purple-dark);

    background:
        var(--purple-dark);
}


.checkbox.completed::after {

    content: "✓";

    font-size: 13px;
}


.task-content {

    flex: 1;

    min-width: 0;
}


.task-title {

    font-size: 14px;

    font-weight: 600;
}


.task-title.completed {

    color: #999;

    text-decoration:
        line-through;
}


.task-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 5px;

    color: var(--muted);

    font-size: 11px;
}


.subject-tag {

    padding:
        4px 8px;

    border-radius: 8px;

    background: var(--soft);
}


.subject-tag.physics {
    background: var(--blue);
}


.subject-tag.chemistry {
    background: var(--green);
}


.subject-tag.maths {
    background: var(--purple);
}


.subject-tag.electronics {
    background: var(--orange);
}


.subject-tag.test {
    background: var(--red);
}


.subject-tag.revision {
    background: var(--purple);
}


.subject-tag.personal {
    background: var(--blue);
}


.subject-tag.assignment {
    background: var(--green);
}


.subject-tag.project {
    background: var(--orange);
}


.subject-tag.other {
    background: var(--soft);
}


.task-arrow {

    color: #aaa;

    font-size: 19px;
}


/* =========================================================
   WEEK PLAN
========================================================= */

.week {

    margin-top: 22px;
}


.week-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        12px 4px 5px;
}


.week-header h3 {

    margin: 0;

    font-family: Georgia, serif;

    font-size: 17px;

    font-weight: 500;
}


.week-header span {

    color: var(--muted);

    font-size: 11px;
}


.day-label {

    margin:
        15px 4px 6px;

    color: var(--muted);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .5px;

    text-transform: uppercase;
}


.empty {

    padding: 25px;

    color: var(--muted);

    text-align: center;

    font-size: 13px;
}


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

.page-header {

    display: grid;

    grid-template-columns:
        44px 1fr 60px;

    align-items: center;

    margin-bottom: 20px;
}


.page-header h1 {

    margin: 0;

    text-align: center;

    font-family: Georgia, serif;

    font-size: 24px;

    font-weight: 500;
}


.back-button {

    width: 40px;

    height: 40px;

    border: none;

    border-radius: 50%;

    color: var(--text);

    background: var(--card);

    font-size: 25px;
}


.calendar-today {

    border: none;

    border-radius: 16px;

    padding:
        7px 10px;

    color: #4d3a72;

    background: var(--purple);

    font-size: 11px;
}


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

.calendar-card {

    padding: 17px;

    border-radius: 18px;

    background: var(--card);

    box-shadow:
        0 2px 10px rgba(0,0,0,.035);
}


.calendar-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 18px;
}


.calendar-header h2 {

    margin: 0;

    font-family: Georgia, serif;

    font-size: 19px;

    font-weight: 500;
}


.calendar-header button {

    width: 36px;

    height: 36px;

    border: none;

    border-radius: 50%;

    color: var(--text);

    background: var(--soft);

    font-size: 22px;
}


.weekdays,
.calendar-grid {

    display: grid;

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

    gap: 5px;
}


.weekdays span {

    padding-bottom: 8px;

    color: var(--muted);

    text-align: center;

    font-size: 11px;
}


.calendar-day {

    min-height: 43px;

    position: relative;

    border: none;

    border-radius: 10px;

    color: var(--text);

    background: transparent;

    font-size: 12px;
}


.calendar-day:hover {

    background: var(--soft);
}


.calendar-day.other-month {

    color: #888;
}


.calendar-day.today {

    color: #4d3a72;

    background: var(--purple);

    font-weight: 700;
}


.calendar-day.selected {

    outline:
        2px solid var(--purple-dark);

    outline-offset:
        -2px;
}


.calendar-dot {

    position: absolute;

    left: 50%;

    bottom: 5px;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: var(--purple-dark);

    transform:
        translateX(-50%);
}


.selected-date-section {

    margin-top: 25px;
}


/* =========================================================
   PROGRESS PAGE
========================================================= */

.big-progress-card {

    padding:
        30px 20px;

    border-radius: 18px;

    color: var(--text);

    background: var(--purple);

    text-align: center;
}


.big-ring {

    width: 130px;

    height: 130px;

    display: grid;

    place-items: center;

    margin:
        0 auto 20px;

    border-radius: 50%;

    background:
        conic-gradient(
            var(--purple-dark) 0deg,
            #eee9f3 0deg
        );
}


.big-ring span {

    width: 105px;

    height: 105px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--purple);

    font-size: 23px;

    font-weight: 700;
}


.big-progress-card h2 {

    margin:
        5px 0;

    font-family: Georgia, serif;

    font-weight: 500;
}


.big-progress-card p {

    max-width: 350px;

    margin:
        7px auto 0;

    color: var(--muted);

    font-size: 13px;
}


.subject-progress {

    margin-top: 18px;
}


.subject-progress-card {

    padding: 16px;

    margin:
        9px 0;

    border-radius: 14px;

    background: var(--card);
}


.subject-progress-card > div:first-child {

    display: flex;

    justify-content: space-between;

    margin-bottom: 10px;

    font-size: 13px;
}


.subject-progress-card span {

    color: var(--muted);
}


.progress-bar {

    height: 8px;

    overflow: hidden;

    border-radius: 10px;

    background: var(--soft);
}


.progress-bar div {

    width: 0%;

    height: 100%;

    border-radius: inherit;

    background: var(--purple-dark);

    transition:
        width .25s ease;
}


/* =========================================================
   BOTTOM NAV
========================================================= */

.bottom-nav {

    position: fixed;

    left: 50%;

    bottom: 0;

    width: min(760px,100%);

    height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-around;

    transform:
        translateX(-50%);

    background:
        color-mix(
            in srgb,
            var(--background) 95%,
            transparent
        );

    backdrop-filter:
        blur(12px);

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

    z-index: 30;
}


.nav-item {

    min-width: 75px;

    height: 56px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 3px;

    border: none;

    border-radius: 13px;

    color: var(--muted);

    background: transparent;
}


.nav-item span {
    font-size: 20px;
}


.nav-item small {
    font-size: 10px;
}


.nav-item.active {

    color: var(--text);

    background: var(--soft);
}


/* =========================================================
   MODALS
========================================================= */

.modal {

    position: fixed;

    inset: 0;

    z-index: 100;

    display: grid;

    place-items: center;

    padding: 20px;

    background:
        rgba(0,0,0,.48);
}


.modal-card {

    width:
        min(430px,100%);

    max-height:
        90vh;

    overflow-y: auto;

    position: relative;

    padding: 25px;

    border-radius: 20px;

    background: var(--card);

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);
}


.close-modal {

    position: absolute;

    top: 13px;

    right: 15px;

    width: 32px;

    height: 32px;

    border: none;

    border-radius: 50%;

    color: var(--text);

    background: var(--soft);

    font-size: 20px;
}


.subject-pill {

    display: inline-block;

    padding:
        6px 10px;

    border-radius: 10px;

    background: var(--purple);

    font-size: 11px;
}


.modal-card h2 {

    margin:
        16px 0 7px;

    font-family: Georgia, serif;

    font-weight: 500;
}


.modal-card > p {

    color: var(--muted);

    font-size: 13px;
}


.detail-row {

    display: flex;

    justify-content: space-between;

    padding:
        14px 0;

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

    font-size: 13px;
}


.complete-button {

    width: 100%;

    border: none;

    border-radius: 12px;

    padding: 13px;

    margin-top: 8px;

    color: white;

    background: var(--purple-dark);

    font-weight: 600;
}


.delete-button {

    width: 100%;

    border: none;

    border-radius: 12px;

    padding: 13px;

    margin-top: 8px;

    color: #b85a51;

    background: var(--red);

    font-weight: 600;
}


/* =========================================================
   ADD TASK FORM
========================================================= */

#addTaskForm {

    display: flex;

    flex-direction: column;

    gap: 14px;
}


#addTaskForm label {

    display: flex;

    flex-direction: column;

    gap: 6px;

    color: var(--text);

    font-size: 12px;

    font-weight: 600;
}


#addTaskForm input,
#addTaskForm select,
#addTaskForm textarea {

    width: 100%;

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

    border-radius: 10px;

    padding: 11px;

    outline: none;

    color: var(--text);

    background: var(--soft);

    font-size: 13px;
}


#addTaskForm textarea {

    min-height: 80px;

    resize: vertical;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:560px) {

    main {
        padding: 18px;
    }


    .topbar {
        padding:
            14px 18px;
    }


    .welcome h1 {
        font-size: 26px;
    }


    .overall-progress > div:last-child {
        display: none;
    }


    .progress-ring {
        width: 54px;
        height: 54px;
    }


    .progress-ring span {
        width: 43px;
        height: 43px;
    }


    .calendar-day {
        min-height: 39px;
    }

}