/* ============================================================
   StudyBuddy — Planner (page 4)
   ============================================================ */

.planner-grid {
    display: grid;
    grid-template-columns: minmax(300px, 380px) 1fr;
    gap: 1.4rem;
    align-items: start;
}

@media (max-width: 880px) {
    .planner-grid {
        grid-template-columns: 1fr;
    }
}

.todo h2, .timetable h2 {
    font-size: 1.25rem;
}

/* ---------- progress chart ---------- */
.progress {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    padding: 1rem 1.1rem;
    margin-bottom: 1.1rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

    .progress.empty {
        opacity: .55;
    }

.progress-ring {
    position: relative;
    width: 104px;
    height: 104px;
    flex: none;
}

    .progress-ring svg {
        width: 104px;
        height: 104px;
        transform: rotate(-90deg);
    }

.ring-track {
    fill: none;
    stroke: var(--line-2);
    stroke-width: 12;
}

.ring-fill {
    fill: none;
    stroke: var(--go);
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 327;
    stroke-dashoffset: 327; /* 2πr, r=52 ≈ 326.7 */
    transition: stroke-dashoffset .5s cubic-bezier(.4,0,.2,1);
}

.ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.ring-pct {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text);
    line-height: 1;
}

.ring-lbl {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    margin-top: 2px;
}

.progress-legend {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: .9rem;
}

    .progress-legend .leg {
        display: flex;
        align-items: center;
        gap: .5rem;
        color: var(--muted);
    }

        .progress-legend .leg b {
            font-family: var(--mono);
            color: var(--text);
            margin-left: auto;
            padding-left: 1.2rem;
        }

    .progress-legend .total {
        border-top: 1px solid var(--line);
        padding-top: .5rem;
        margin-top: .1rem;
    }

    .progress-legend .dot {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        flex: none;
    }

.dot-done {
    background: var(--go);
}

.dot-left {
    background: var(--line-2);
}

@media (max-width: 420px) {
    .progress {
        flex-direction: column;
        text-align: center;
    }

    .progress-legend {
        width: 100%;
    }
}


/* ---------- to-do ---------- */
.todo-add {
    display: flex;
    gap: .55rem;
    margin-bottom: 1rem;
}

    .todo-add .input {
        flex: 1;
    }

.todo-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.todo-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .7rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card);
    animation: pop .2s ease both;
}

@keyframes pop {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.todo-check {
    appearance: none;
    width: 20px;
    height: 20px;
    flex: none;
    border: 2px solid var(--line-2);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    transition: background .15s ease, border-color .15s ease;
}

    .todo-check:checked {
        background: var(--go);
        border-color: var(--go);
    }

        .todo-check:checked::after {
            content: "✓";
            position: absolute;
            inset: 0;
            color: #fff;
            font-size: .8rem;
            display: grid;
            place-items: center;
        }

    .todo-check:focus-visible {
        outline: 3px solid var(--go-50);
        outline-offset: 1px;
    }

.todo-text {
    flex: 1;
    font-size: .95rem;
    word-break: break-word;
}

.todo-item.done .todo-text {
    color: var(--muted);
    text-decoration: line-through;
}

.todo-del {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1;
    padding: .25rem .4rem;
    border-radius: 6px;
    opacity: .6;
    transition: opacity .15s ease, background .15s ease, color .15s ease;
}

    .todo-del:hover {
        opacity: 1;
        color: var(--danger);
        background: var(--danger-50);
    }

.todo-empty {
    color: var(--muted);
    text-align: center;
    padding: 1.6rem 1rem;
    background: var(--surface-2);
    border: 1px dashed var(--line-2);
    border-radius: var(--r-sm);
}

.todo-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    font-size: .85rem;
}

/* ---------- timetable ---------- */
.grid-scroll {
    overflow-x: auto;
    margin-top: .9rem;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.grid {
    border-collapse: collapse;
    width: 100%;
    min-width: 560px;
    font-size: .85rem;
}

    .grid th, .grid td {
        border: 1px solid var(--line);
        padding: 0;
    }

    .grid thead th {
        background: var(--ink);
        color: var(--on-dark);
        font-family: var(--display);
        font-weight: 600;
        padding: .6rem .4rem;
        position: sticky;
        top: 0;
        font-size: .82rem;
    }

        .grid thead th:first-child {
            background: var(--ink-2);
        }

    .grid .time-col {
        background: var(--surface-2);
        font-family: var(--mono);
        font-size: .72rem;
        color: var(--muted);
        white-space: nowrap;
        padding: .5rem .6rem;
        text-align: right;
        width: 78px;
        font-weight: 600;
    }

    .grid td.cell {
        background: var(--card);
    }

        .grid td.cell input {
            width: 100%;
            border: none;
            background: transparent;
            font: inherit;
            font-size: .82rem;
            padding: .55rem .5rem;
            color: var(--text);
            min-width: 90px;
        }

            .grid td.cell input:focus {
                outline: none;
                background: var(--accent-50);
                box-shadow: inset 0 0 0 2px var(--accent);
            }

        .grid td.cell.filled {
            background: var(--accent-50);
        }

            .grid td.cell.filled input {
                font-weight: 600;
                color: var(--accent-600);
            }

    .grid tbody tr:hover td.cell {
        background: #EEF4F5;
    }

        .grid tbody tr:hover td.cell.filled {
            background: var(--accent-50);
        }