#todoPage { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: max(var(--page-padding),env(safe-area-inset-top)) max(var(--page-padding),env(safe-area-inset-right)) max(var(--page-padding),env(safe-area-inset-bottom)) max(var(--page-padding),env(safe-area-inset-left)); background: linear-gradient(rgba(8,10,12,.28),rgba(8,10,12,.62)),url('../images/backToDoMobile.jpg') center/cover no-repeat; }
.todo-box,.todo-box2 { width: min(100%,960px); border: 1px solid var(--panel-border); border-radius: 20px; background: var(--panel-bg); box-shadow: 0 18px 50px rgba(0,0,0,.3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.todo-box { display: flex; flex-direction: column; gap: 12px; padding: clamp(16px,4vw,22px); }
.todo-box button { width: 100%; }
#todoError { width: 100%; color: var(--danger); font-size: .92rem; line-height: 1.35; }
.todo-box button:disabled { cursor: wait; opacity: .65; }
.todo-box2 { min-width: 0; padding: clamp(10px,3vw,18px); }
.todo-table-container { max-height: min(62dvh,620px); overflow: auto; border-radius: 12px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#todoTable { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 0; color: #181a1e; }
#todoTable th,#todoTable td { padding: 13px 14px; border-right: 1px solid #d9dde2; border-bottom: 1px solid #d9dde2; background: rgba(255,255,255,.94); text-align: left; line-height: 1.35; }
#todoTable th:last-child,#todoTable td:last-child { border-right: 0; }
#todoTable th { position: sticky; top: 0; z-index: 1; background: #292c31; color: #fff; font-size: .9rem; }
#todoTable tbody tr { cursor: pointer; }
#todoTable tbody tr:nth-child(even) td { background: rgba(240,242,245,.96); }
#todoTable tbody tr:hover td { background: #3b4047; color: #fff; }
#todoTable .action-column { width: 58px; padding: 5px; text-align: center; }
.delete-todo-button { width: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid rgba(130,25,25,.3); border-radius: 10px; background: #8f2525; color: #fff; font-weight: 400; line-height: 1; }
.delete-todo-button:hover { background: #b52d2d; }
.delete-todo-button:disabled { cursor: wait; opacity: .55; }
.delete-todo-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.date-compact,.author-initial { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (min-width: 700px) {
    #todoPage { gap: 20px; background-image: linear-gradient(rgba(8,10,12,.22),rgba(8,10,12,.56)),url('../images/backToDo.jpg'); }
    .todo-box { flex-flow: row wrap; align-items: center; }
    .todo-box input { flex: 1; min-width: 0; }
    .todo-box button { width: auto; min-width: 180px; }
    #todoError { flex-basis: 100%; }
}

@media (max-width: 699px) {
    #todoPage { gap: 12px; padding: 14px; }
    .todo-box { gap: 10px; padding: 14px; }
    .todo-box input { min-height: 52px; }
    .todo-box #addTodoBtn { display: none; }
    .todo-box2 { padding: 8px; background: rgba(15,18,22,.58); }
    .todo-table-container { max-height: none; overflow: visible; border-radius: 14px; }
    #todoTable { display: block; min-width: 0; }
    #todoTable thead { display: none; }
    #todoTable tbody { display: grid; gap: 9px; }
    #todoTable tbody tr { display: grid; grid-template-columns: minmax(0,1fr) auto 52px; grid-template-areas: "item item action" "date author action"; align-items: center; min-width: 0; overflow: hidden; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 5px 16px rgba(0,0,0,.16); cursor: default; }
    #todoTable th,#todoTable td { width: auto; padding: 0; border: 0; background: transparent !important; color: #181a1e !important; overflow-wrap: anywhere; }
    #todoTable .todo-item { grid-area: item; padding: 13px 10px 3px 14px; font-size: 1.12rem; font-weight: 750; line-height: 1.25; }
    #todoTable .todo-date { grid-area: date; padding: 3px 8px 13px 14px; color: #686d74 !important; font-size: .76rem; white-space: nowrap; }
    #todoTable .todo-author { grid-area: author; padding: 3px 5px 10px; }
    #todoTable .action-column { grid-area: action; align-self: stretch; display: grid; place-items: center; width: 52px; padding: 4px; border-left: 1px solid #e0e2e5; }
    #todoTable .date-full,#todoTable .author-full { display: none; }
    #todoTable .date-compact { display: inline; }
    #todoTable .author-initial { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #292c31; color: #fff; font-size: .82rem; font-weight: 800; text-transform: uppercase; }
    .delete-todo-button { width: 44px; min-width: 44px; min-height: 44px; border-radius: 11px; }
}