/* =========================================================
   FOCUSFLOW
   Advanced Productivity Dashboard
   ========================================================= */


/* ================= ROOT ================= */

:root {

    --bg: #f4f5fb;

    --surface: #ffffff;

    --surface2: #f8f8fd;

    --text: #171927;

    --muted: #73798d;

    --line: #e8e9f1;

    --primary: #7257ff;

    --primary2: #a66cff;

    --cyan: #2bc7d8;

    --green: #20b982;

    --orange: #ffad45;

    --red: #ef5d72;

    --shadow:
        0 20px 60px rgba(45,37,94,.09);

    --radius: 22px;
}


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

[data-theme="dark"] {

    --bg: #0b0d14;

    --surface: #151823;

    --surface2: #1b1f2c;

    --text: #f5f6fb;

    --muted: #9ca3b8;

    --line: #282d3c;

    --shadow:
        0 20px 60px rgba(0,0,0,.28);
}


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

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background: var(--bg);

    color: var(--text);

    font-family:
        Arial,
        sans-serif;

    transition: .25s;
}


button,
input,
select,
textarea {

    font: inherit;

}


button {

    cursor: pointer;

}


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

.app {

    min-height: 100vh;

    display: flex;

}


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

.sidebar {

    width: 255px;

    position: fixed;

    inset: 0 auto 0 0;

    background: var(--surface);

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

    padding: 24px 15px;

    z-index: 20;

    transition: .25s;

}


.brand {

    display: flex;

    gap: 11px;

    align-items: center;

    padding:
        3px 10px 28px;

}


.brand-mark {

    width: 43px;

    height: 43px;

    border-radius: 15px;

    display: grid;

    place-items: center;

    color: white;

    font-size: 22px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary2)
        );

    box-shadow:
        0 10px 25px #7257ff55;

}


.brand strong {

    font-size: 20px;

    display: block;

}


.brand small {

    color: var(--muted);

    font-size: 10px;

}


.nav-title {

    padding:
        12px 12px 7px;

    color: var(--muted);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


.nav {

    display: block;

    width: 100%;

    border: 0;

    background: transparent;

    color: var(--muted);

    padding: 12px;

    border-radius: 13px;

    text-align: left;

    margin: 3px 0;

    font-weight: 600;

    transition: .2s;

}


.nav:hover {

    background: var(--surface2);

    color: var(--primary);

    transform:
        translateX(3px);

}


.nav.active {

    background:
        linear-gradient(
            100deg,
            #7257ff18,
            #a66cff08
        );

    color: var(--primary);

    box-shadow:
        inset 3px 0 var(--primary);

}


/* ================= STREAK ================= */

.streak {

    position: absolute;

    bottom: 20px;

    left: 15px;

    right: 15px;

    padding: 17px;

    border-radius: 18px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #7257ff,
            #a66cff
        );

    overflow: hidden;

}


.streak:after {

    content: "";

    position: absolute;

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background: #ffffff22;

    right: -25px;

    top: -30px;

}


.streak b {

    position: relative;

    z-index: 1;

}


.streak small {

    display: block;

    margin-top: 5px;

    opacity: .82;

    position: relative;

    z-index: 1;

}


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

main {

    margin-left: 255px;

    width:
        calc(100% - 255px);

    min-width: 0;

}


/* ================= TOPBAR ================= */

.topbar {

    height: 72px;

    background:
        var(--surface);

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

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 30px;

    position: sticky;

    top: 0;

    z-index: 10;

}


.top-left {

    display: flex;

    align-items: center;

    gap: 12px;

}


.crumb {

    color: var(--muted);

    font-size: 13px;

}


.menu {

    display: none;

    border: 0;

    background: var(--surface2);

    color: var(--text);

    padding: 9px;

    border-radius: 10px;

}


.top-actions {

    display: flex;

    gap: 9px;

    align-items: center;

}


.icon-btn,
.avatar {

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

    background:
        var(--surface);

    color: var(--text);

    width: 39px;

    height: 39px;

    border-radius: 12px;

    display: grid;

    place-items: center;

}


.avatar {

    background: #ffe3ef;

    color: #a73d73;

    border: 0;

    font-weight: 800;

}


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

.page {

    max-width: 1450px;

    margin: auto;

    padding: 34px;

}


.eyebrow {

    font-size: 11px;

    letter-spacing: 1.8px;

    color: var(--primary);

    font-weight: 800;

}


.heading {

    font-size: 39px;

    margin: 7px 0;

}


.sub {

    color: var(--muted);

    line-height: 1.6;

}


/* ================= HERO ================= */

.hero {

    display: flex;

    justify-content: space-between;

    gap: 25px;

    align-items: center;

    margin-bottom: 25px;

}


.hero-art {

    width: 255px;

    height: 175px;

    border-radius: 32px;

    position: relative;

    display: grid;

    place-items: center;

    font-size: 65px;

    background:
        linear-gradient(
            135deg,
            #e9e4ff,
            #ffe7f2
        );

    box-shadow: var(--shadow);

    overflow: hidden;

}


[data-theme="dark"]
.hero-art {

    background:
        linear-gradient(
            135deg,
            #252044,
            #352132
        );

}


.hero-art span {

    position: absolute;

    font-size: 26px;

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

}


.hero-art span:nth-child(2) {

    left: 25px;

    top: 22px;

}


.hero-art span:nth-child(3) {

    right: 25px;

    bottom: 20px;

    animation-delay: .8s;

}


@keyframes float {

    50% {

        transform:
            translateY(-8px)
            rotate(5deg);

    }

}


/* ================= BUTTON ================= */

.primary {

    border: 0;

    color: white !important;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary2)
        );

    padding: 12px 18px;

    border-radius: 12px;

    font-weight: 700;

    box-shadow:
        0 10px 25px #7257ff33;

}


.primary:hover {

    transform:
        translateY(-1px);

}


/* ================= STATISTICS ================= */

.stats {

    display: grid;

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

    gap: 17px;

}


.card,
.panel {

    background: var(--surface);

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

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

}


.card {

    padding: 20px;

}


.stat-icon {

    width: 45px;

    height: 45px;

    border-radius: 14px;

    display: grid;

    place-items: center;

    background: var(--surface2);

    font-size: 21px;

}


.card small {

    display: block;

    color: var(--muted);

    margin-top: 13px;

}


.card .number {

    font-size: 30px;

    font-weight: 700;

    margin-top: 3px;

}


.trend {

    font-size: 11px;

    color: var(--green);

    margin-top: 5px;

}


/* ================= GRIDS ================= */

.grid2 {

    display: grid;

    grid-template-columns:
        1.35fr .9fr;

    gap: 18px;

    margin-top: 18px;

}


.panel {

    padding: 21px;

}


.panel-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}


.panel h2 {

    font-size: 18px;

    margin: 0 0 15px;

}


.link {

    border: 0;

    background: none;

    color: var(--primary);

    font-weight: 700;

}


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

.task {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

    padding: 14px 2px;

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

}


.task:last-child {

    border: 0;

}


.task-main {

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;

}


.check {

    width: 22px;

    height: 22px;

    flex: 0 0 auto;

    border:
        2px solid #cfd3df;

    background: transparent;

    border-radius: 7px;

    color: white;

}


.check.done {

    background: var(--green);

    border-color: var(--green);

}


.task b {

    font-size: 13px;

}


.task small {

    display: block;

    color: var(--muted);

    font-size: 10px;

    margin-top: 4px;

}


.badge {

    display: inline-block;

    padding: 5px 8px;

    border-radius: 20px;

    font-size: 9px;

    font-weight: 800;

}


.high {

    background: #ffe5e9;

    color: #c74759;

}


.medium {

    background: #fff0d6;

    color: #a36d08;

}


.low {

    background: #dcf7eb;

    color: #16805d;

}


.delete {

    border: 0;

    background: transparent;

    color: var(--muted);

    padding: 5px;

}


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

.note {

    width: 100%;

    min-height: 150px;

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

    background:
        var(--surface2);

    color: var(--text);

    border-radius: 14px;

    padding: 13px;

    resize: vertical;

}


.note:focus,
input:focus,
select:focus {

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px #7257ff15;

    outline: 0;

}


/* ================= QUICK ================= */

.quick {

    display: grid;

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

    gap: 10px;

}


.quick button {

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

    background:
        var(--surface2);

    color: var(--text);

    padding: 15px;

    border-radius: 14px;

    text-align: left;

}


.quick b,
.quick small {

    display: block;

    margin-top: 6px;

}


.quick small {

    font-size: 10px;

    color: var(--muted);

}


/* ================= TOOLBAR ================= */

.toolbar {

    display: flex;

    gap: 9px;

    margin-bottom: 15px;

    flex-wrap: wrap;

}


.input,
.select {

    padding:
        11px 13px;

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

    border-radius: 11px;

    background:
        var(--surface2);

    color:
        var(--text);

    min-width: 150px;

}


.grow {

    flex: 1;

}


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

.task-layout {

    display: grid;

    grid-template-columns:
        1fr 315px;

    gap: 18px;

}


.form {

    display: grid;

    gap: 10px;

}


.form input,
.form select {

    width: 100%;

}


/* ================= KANBAN ================= */

.kanban {

    display: grid;

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

    gap: 15px;

    margin-top: 15px;

}


.column {

    background:
        var(--surface2);

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

    border-radius: 17px;

    padding: 13px;

    min-height: 330px;

}


.column h3 {

    font-size: 14px;

    margin: 4px;

}


.kcard {

    background:
        var(--surface);

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

    border-radius: 14px;

    padding: 14px;

    margin: 10px 0;

    cursor: grab;

    box-shadow:
        0 8px 20px #00000008;

}


.kcard:active {

    cursor: grabbing;

}


.kcard h4 {

    margin: 8px 0;

    font-size: 13px;

}


.kcard small {

    color: var(--muted);

}


/* ================= PROJECTS ================= */

.project-grid {

    display: grid;

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

    gap: 15px;

}


.project-art {

    height: 115px;

    display: grid;

    place-items: center;

    font-size: 53px;

    background:
        linear-gradient(
            135deg,
            #eeeaff,
            #ffeaf4
        );

}


[data-theme="dark"]
.project-art {

    background:
        linear-gradient(
            135deg,
            #272342,
            #352333
        );

}


.project-body {

    padding: 16px;

}


.project-body h3 {

    margin: 0 0 7px;

    font-size: 17px;

}


.project-body p {

    color: var(--muted);

    font-size: 12px;

}


.bar {

    height: 7px;

    background:
        var(--line);

    border-radius: 20px;

    overflow: hidden;

}


.bar i {

    display: block;

    height: 100%;

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

    border-radius: 20px;

}


/* ================= GOALS ================= */

.goal {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px 0;

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

}


.goal:last-child {

    border: 0;

}


.goal-icon {

    font-size: 27px;

}


.goal-info {

    flex: 1;

}


.goal-info h3 {

    font-size: 13px;

    margin: 0 0 4px;

}


.goal-info small {

    color: var(--muted);

    font-size: 10px;

}


.goal button {

    border: 0;

    background:
        var(--surface2);

    color:
        var(--primary);

    border-radius: 9px;

    padding: 7px;

}


.inline {

    display: flex;

    gap: 8px;

}


.inline input {

    min-width: 0;

    flex: 1;

}


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

.calendar {

    display: grid;

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

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

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

    margin-top: 14px;

}


.cal-head,
.day {

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

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

    padding: 9px;

}


.cal-head {

    text-align: center;

    color: var(--muted);

    font-size: 10px;

    font-weight: 800;

}


.day {

    min-height: 90px;

}


.day.today {

    box-shadow:
        inset 0 0 0 2px
        var(--primary);

}


.event {

    margin-top: 5px;

    padding: 5px;

    border-radius: 5px;

    background:
        #7257ff16;

    color:
        var(--primary);

    font-size: 9px;

    white-space: nowrap;

    overflow: hidden;

}


/* ================= FOCUS TIMER ================= */

.focus {

    text-align: center;

}


.timer {

    font-size: 92px;

    font-weight: 700;

    color: var(--primary);

    letter-spacing: 2px;

    margin: 20px;

}


.timer-actions button {

    margin: 4px;

    padding:
        11px 17px;

    border-radius: 11px;

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

    background:
        var(--surface);

    color:
        var(--text);

}


.presets {

    margin-top: 12px;

}


.tips {

    display: grid;

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

    gap: 14px;

    margin-top: 20px;

}


.tip {

    padding: 18px;

    background:
        var(--surface2);

    border-radius: 15px;

}


.tip b,
.tip small {

    display: block;

    margin-top: 6px;

}


.tip small {

    color: var(--muted);

}


/* ================= CHART ================= */

.chart-wrap {

    height: 300px;

}


.chart {

    width: 100%;

    height: 100%;

}


.mini-stats {

    display: grid;

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

    gap: 12px;

    margin-top: 15px;

}


.mini-stats .card {

    box-shadow: none;

}


/* ================= TOAST ================= */

.toast {

    position: fixed;

    right: 20px;

    bottom: 20px;

    background: #171a24;

    color: white;

    padding: 12px 16px;

    border-radius: 12px;

    z-index: 99;

    box-shadow:
        0 15px 35px #0004;

}


/* ================= RESPONSIVE ================= */

@media(max-width:1050px) {

    .sidebar {

        transform:
            translateX(-100%);

    }

    .sidebar.open {

        transform:
            translateX(0);

    }

    main {

        margin-left: 0;

        width: 100%;

    }

    .menu {

        display: block;

    }

    .stats {

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

    }

    .task-layout,
    .grid2 {

        grid-template-columns:
            1fr;

    }

    .project-grid {

        grid-template-columns:
            1fr 1fr;

    }

}


@media(max-width:650px) {

    .page {

        padding:
            22px 14px;

    }

    .topbar {

        padding:
            0 14px;

    }

    .heading {

        font-size: 29px;

    }

    .hero-art {

        display: none;

    }

    .stats,
    .kanban,
    .project-grid,
    .tips {

        grid-template-columns:
            1fr;

    }

    .quick,
    .mini-stats {

        grid-template-columns:
            1fr;

    }

    .toolbar > * {

        width: 100%;

    }

    .calendar {

        font-size: 10px;

    }

    .day {

        min-height: 65px;

    }

    .event {

        display: none;

    }

    .timer {

        font-size: 60px;

    }

}