#todoGrid {
    display: grid;
    /* grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); */
    gap: 12px;
    margin-top: 12px;
    padding: 0;
    list-style: none;
}

.todo-item {
    border: 1px solid #d0d7de;
    padding: 10px 12px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative; /* allow child offset */
    transition: transform .12s ease, box-shadow .18s ease;
}

.todo-title {
    font-weight: 600;
    color: #0f172a;
    word-break: break-word;
}

.todo-meta {
    font-size: 0.9rem;
    color: #6b7280;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.status {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.8rem;
    color: #fff;
}

    .status.done {
        background: #10b981;
    }

    .status.pending {
        background: #f59e0b;
    }

.todo-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #6b7280;
    padding: 18px;
    border: 1px dashed #e5e7eb;
    border-radius: 6px;
    background: #fafafa;
}

.todo-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-small {
    padding: 4px 8px;
    font-size: 0.85rem;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    cursor: pointer;
}

/* refresh button loading state */
#refreshAllBtn.loading {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #1e40af;
    transform: translateY(1px);
    cursor: default;
    opacity: 0.95;
}
    /* show a small marker after the text when loading */
    #refreshAllBtn.loading::after {
        content: ' ⟳';
        font-weight: 600;
    }

/* New: child variant to make an inserted box visually smaller than its parent */
.todo-child {
    /* Slightly narrower and tighter padding so it appears smaller than the reference item */
    max-width: 92%;
    margin: 0 auto;
    padding: 8px 10px;
    font-size: 0.95rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    transition: box-shadow .18s ease, transform .12s ease;
    transform-origin: top center;
}
    /* optional subtle scale on creation for emphasis */
    .todo-child.highlight-create {
        transform: scale(0.992);
    }

    /* Display the child visually to the left of its parent */
    .todo-child.left {
        /* Shift left relative to normal flow so the new item sits left of the parent */
        transform: translateX(10%) scale(0.992);
        margin-left: 0;
        justify-self: start;
        z-index: 5; /* lift above neighbors */
    }

    /* If grid cell prevents horizontal shift, allow slight overlap by negative margin */
    .todo-child.left-overlap {
        /* margin-left: 8%; */
    }

/* New styles for todo details section */
.todo-details {
    margin-top: 8px;
    padding: 8px;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #e6eef8;
    font-size: 0.9rem;
    color: #0f172a;
}

    .todo-details dl {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 4px 8px;
        margin: 0;
    }

    .todo-details dt {
        font-weight: 600;
        color: #0f172a;
        opacity: 0.85;
    }

    .todo-details dd {
        margin: 0;
        color: #374151;
        word-break: break-word;
        opacity: 0.95;
    }

/* Kerfi list style (small nested list) */
.kerfi-list {
    margin-top: 6px;
    font-size: 0.9rem;
    color: #1f2937;
}

    .kerfi-list ul {
        margin: 6px 0 0 18px;
        padding: 0;
    }

    .kerfi-list li {
        margin: 2px 0;
        list-style: disc;
    }

.kerfi-note {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 6px;
}

/* Tilkynning list (documents under kerfi) */
.tilkynning-list {
    margin-top: 6px;
    font-size: 0.85rem;
    color: #374151;
    padding-left: 14px;
    border-left: 2px solid #eef2ff;
}

    .tilkynning-list ul {
        margin: 6px 0 0 16px;
        padding: 0;
    }

    .tilkynning-list li {
        margin: 2px 0;
        list-style: circle;
    }