/* The theme is always resolved to an explicit `data-theme` on (see the inline script in index.html) - "system" mode is handled there by following the OS setting, so the stylesheet never needs a prefers-color-scheme query of its own. */ :root { color-scheme: light; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; } :root[data-theme="dark"] { color-scheme: dark; } body { margin: 0; background: #f5f6f8; color: #1f2933; overflow-x: hidden; } .app { max-width: 560px; margin: 0 auto; padding: 1.5rem 1rem 3rem; } header { display: flex; align-items: flex-start; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; } .header-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; } .session-menu { position: relative; } .session-btn { display: flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 999px; border: 2px solid transparent; background: #e4e7eb; color: #495057; cursor: pointer; } .session-btn.online { border-color: #2b8a3e; } .session-btn.offline { border-color: #f7b32b; } .session-btn.cached { border-color: #1f6feb; } .session-dropdown { min-width: 200px; padding: 0.5rem 0; } .session-status-line { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.8rem 0.5rem; font-size: 0.85rem; color: #495057; } .status-dot { width: 0.6rem; height: 0.6rem; border-radius: 999px; background: #f7b32b; } .status-dot.online { background: #2b8a3e; } .status-dot.cached { background: #1f6feb; } .session-email { padding: 0 0.8rem 0.4rem; font-size: 0.8rem; color: #616e7c; overflow-wrap: anywhere; } .auth-screen { min-height: 80vh; display: flex; align-items: center; justify-content: center; } .auth-card { width: 100%; max-width: 340px; background: white; border-radius: 8px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .auth-back { border: none; background: transparent; color: #1f6feb; font-size: 0.85rem; padding: 0 0 0.5rem; cursor: pointer; } .auth-card h1 { margin: 0 0 0.25rem; font-size: 1.6rem; } .auth-card h2 { margin: 0 0 1rem; font-size: 1rem; color: #616e7c; font-weight: 500; } .auth-error { color: #c92a2a; font-size: 0.85rem; margin: 0 0 0.75rem; } .auth-info { color: #2b8a3e; font-size: 0.85rem; margin: 0 0 0.75rem; } .auth-submit { display: block; width: 100%; border: none; background: #1f6feb; color: white; font-size: 0.95rem; padding: 0.6rem; border-radius: 6px; cursor: pointer; margin-bottom: 0.5rem; } .auth-submit:disabled { opacity: 0.6; cursor: default; } .auth-switch { display: block; width: 100%; border: none; background: transparent; color: #1f6feb; font-size: 0.85rem; padding: 0.3rem; cursor: pointer; } .trash-btn { position: relative; border: none; background: #e4e7eb; color: #495057; display: flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 999px; cursor: pointer; } .trash-btn .child-count { position: absolute; top: -0.35rem; right: -0.35rem; } .settings-menu { position: relative; } .settings-btn { border: none; background: #e4e7eb; color: #495057; display: flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 999px; cursor: pointer; } .settings-dropdown { position: absolute; right: 0; top: calc(100% + 0.4rem); background: #fff; border: 1px solid #d0d7de; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); min-width: 220px; z-index: 20; overflow: hidden; } .settings-item { display: block; width: 100%; text-align: left; border: none; background: transparent; padding: 0.6rem 0.8rem; font-size: 0.85rem; cursor: pointer; } .settings-item:hover { background: #f1f3f5; } .settings-section { border-top: 1px solid #e4e7eb; margin-top: 0.3rem; padding-top: 0.3rem; } .settings-section-label { padding: 0.3rem 0.8rem 0.1rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: #616e7c; } .settings-item.theme-option { display: flex; align-items: center; gap: 0.5rem; } /* Fixed-width slot so the labels line up whether or not the check mark is shown. */ .theme-option .theme-check { width: 1em; text-align: center; color: #1f6feb; } .google-import-select-actions { display: flex; gap: 0.5rem; margin: 0.5rem 0; } .google-import-select-actions button { font-size: 0.85rem; padding: 0.25rem 0.6rem; } .google-import-lists { list-style: none; margin: 0.5rem 0; padding: 0; max-height: 260px; overflow-y: auto; } .google-import-lists li { padding: 0.3rem 0; } .breadcrumbs { margin: 1rem 0; font-size: 0.9rem; } .breadcrumbs a { color: #1f6feb; cursor: pointer; } .breadcrumbs .sep { margin: 0 0.35rem; color: #9aa5b1; } /* While an item is being dragged, each breadcrumb becomes a valid drop target so the item can be nested onto any ancestor list, not just the one currently open. Breadcrumb links reuse the same `.nest-target` marker class the row-level drop chevron uses (so the shared drag-detection code picks them up via `.closest(".nest-target")`), so every property that class sets for the chevron's absolutely-positioned overlay has to be reset back to plain inline-link layout here. */ .breadcrumbs a.nest-target { position: static; top: auto; right: auto; bottom: auto; width: auto; display: inline; padding: 0.15rem 0.45rem; background: none; color: #1f6feb; border-radius: 999px; outline: 1px dashed #1f6feb; outline-offset: 1px; } .breadcrumbs a.nest-target.drag-over { background: rgba(31, 111, 235, 0.55); color: white; outline-style: solid; } .composer { display: flex; gap: 0.4rem; margin-bottom: 1rem; min-width: 0; } .composer input { flex: 1; min-width: 0; padding: 0.6rem 0.7rem; border: 1px solid #cbd2d9; border-radius: 6px; font-size: 1rem; } .composer button:not(.composer-mode-btn) { flex-shrink: 0; padding: 0.6rem 0.8rem; border: none; border-radius: 6px; background: #1f6feb; color: white; font-size: 0.9rem; cursor: pointer; } .composer button.toggle { background: #e4e7eb; color: #1f2933; } .composer button.toggle.active { background: #f7b32b; color: #1f2933; } .composer-kind { flex-shrink: 0; max-width: 4.6rem; padding: 0.6rem 0.3rem; border: 1px solid #cbd2d9; border-radius: 6px; font-size: 0.9rem; background: white; color: #1f2933; } .composer-mode-btn { display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #323f4b !important; color: #495057; padding: 0.5rem 0.6rem !important; } .composer-search input { flex: 1; } .composer-bar { margin-bottom: 1rem; } .list-header { margin-bottom: 0.75rem; } .list-header-row { display: flex; align-items: flex-start; gap: 0.5rem; } .list-header-text { flex: 1; min-width: 0; font-size: 1.15rem; font-weight: 600; cursor: pointer; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .list-header-text.expanded { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } .list-header-notes { margin: 0.3rem 0 0; font-size: 0.85rem; color: #616e7c; cursor: pointer; white-space: pre-wrap; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .list-header-notes.expanded { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } .list-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; } .show-hidden { display: block; font-size: 0.85rem; color: #616e7c; } .copy-list-btn { border: none; background: #e4e7eb; color: #495057; font-size: 0.8rem; padding: 0.3rem 0.7rem; border-radius: 999px; cursor: pointer; } .items { list-style: none; margin: 0; padding: 0; } /* Item-sized empty space after the last row while dragging, so there's somewhere to drop onto in order to move an item to the very end of the list. */ .drop-gap { height: 3rem; margin-bottom: 0.5rem; border-radius: 6px; box-sizing: border-box; border: 2px dashed transparent; } .drop-gap.drag-over { border-color: #1f6feb; background: rgba(31, 111, 235, 0.08); } .item { /* Anchors the absolutely positioned .nest-target shown while dragging. */ position: relative; background: #000; color: #f5f6f8; padding: 0.6rem 0.8rem; user-select: none; -webkit-user-select: none; } /* The row the dragged item would be nested inside if released right now. An outline (rather than a border) so the row keeps its exact size, inset so it isn't painted over by the neighbouring rows. */ .item.nest-hover { outline: 2px solid #fff; outline-offset: -2px; } .item.hidden-row { opacity: 0.5; } .item.nested-row { cursor: default; } .item.nested-row .item-main { cursor: pointer; touch-action: auto; } .item.dragging { outline: 2px dashed #1f6feb; outline-offset: 2px; opacity: 0.92; } .item.up-item { cursor: pointer; color: #616e7c; } .item.up-item .item-main { cursor: pointer; } .item.up-item .item-text { font-weight: 600; } .item-main { display: flex; align-items: flex-start; gap: 0.5rem; cursor: grab; touch-action: none; } .item-main:active { cursor: grabbing; } /* Nudged down a hair so they line up with the cap-height of the text's first line, rather than its own top edge. */ .item-main > input[type="checkbox"], .item-main > .note-icon, .item-main > .list-icon, .item-main > .nest-hover-icon { margin-top: 0.2em; } /* "Drop here to nest inside this row" target, shown on every other row while a drag is in progress. It's laid over the right part of the row and spans the row's full height (padding included), so the targets of adjacent rows touch with no gap between them - otherwise moving the pointer from one row's target to the next would briefly pass over plain row, which reads as a reorder and makes the dragged item jump back and forth. */ .nest-target { position: absolute; top: 0; right: 0; bottom: 0; width: 45%; display: flex; align-items: center; justify-content: flex-end; padding-right: 0.8rem; box-sizing: border-box; background: linear-gradient(to right, rgba(31, 111, 235, 0) 0%, rgba(31, 111, 235, 0.35) 45%); color: #74a9ff; cursor: pointer; } .nest-target.drag-over { background: rgba(31, 111, 235, 0.55); color: white; } /* Left-hand icon while the row is the nest target: mirrors the chevron on the right so the whole row reads as "the dragged item goes in here". */ .nest-hover-icon { display: flex; flex-shrink: 0; color: #fff; width: 16px; height: 16px; } .item-title-group { display: flex; flex-direction: column; flex: 1; min-width: 0; } .item-text { font-size: 1.2rem; cursor: pointer; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .item.done .item-text { text-decoration: line-through; color: #9aa5b1; } .item-notes-preview { font-size: 0.75rem; color: #9aa5b1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .note-icon { color: #7048e8; flex-shrink: 0; width: 16px; height: 16px; } .list-icon { color: #1f6feb; flex-shrink: 0; width: 16px; height: 16px; } .child-count { font-size: 0.7rem; color: #616e7c; background: #e4e7eb; padding: 0.1rem 0.45rem; border-radius: 999px; min-width: 1em; text-align: center; } .list-header-count { flex-shrink: 0; } .dates-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #9aa5b1; } .unsynced-count { font-size: 0.7rem; color: #fff; background: #c92a2a; padding: 0.1rem 0.45rem; border-radius: 999px; min-width: 1em; text-align: center; margin-left: 0.35rem; } .more-btn, .edit-btn { display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: #9aa5b1; cursor: pointer; flex-shrink: 0; padding: 0.25rem; border-radius: 4px; } .item-main .edit-btn { width: 2.1rem; height: 2.1rem; box-sizing: border-box; } /* While a drag is in progress the .nest-target overlay takes this button's place, but the button stays in the flow (just invisible) so the row keeps its exact height - otherwise every row would shrink the moment a drag starts. */ .item-main .edit-btn.drag-placeholder { visibility: hidden; } .more-btn:hover, .edit-btn:hover { background: #f1f3f5; color: #495057; } .item-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; } .item-actions button { border: none; background: #f1f3f5; color: #495057; font-size: 0.75rem; padding: 0.25rem 0.55rem; border-radius: 4px; cursor: pointer; } .item-actions .remove { color: #c92a2a; } .notes { display: block; width: 100%; box-sizing: border-box; margin-top: 0.5rem; padding: 0.5rem; border-radius: 4px; border: 1px solid #cbd2d9; font-family: inherit; font-size: 0.85rem; min-height: 3rem; resize: vertical; } .list-manager-current { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; margin-bottom: 0.75rem; background: #f8f9fa; border-radius: 6px; font-weight: 600; } .list-manager-search { display: block; width: 100%; box-sizing: border-box; padding: 0.5rem; margin-bottom: 0.5rem; border: 1px solid #cbd2d9; border-radius: 4px; font-size: 1rem; } .list-manager-list .item.subtle { opacity: 0.7; } .list-manager-actions { margin-top: 1rem; } .empty { color: #9aa5b1; text-align: center; margin-top: 2rem; } .confirm-remove { margin-top: 0.5rem; padding: 0.6rem; background: #fff5f5; border: 1px solid #ffc9c9; border-radius: 6px; font-size: 0.85rem; } .confirm-remove p { margin: 0 0 0.5rem; } .confirm-children { display: block; margin-bottom: 0.5rem; } .confirm-actions { display: flex; gap: 0.5rem; } .confirm-actions button { border: none; background: #e4e7eb; padding: 0.3rem 0.7rem; border-radius: 4px; cursor: pointer; } .confirm-actions button.remove { background: #c92a2a; color: white; } .editor-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 20; } .editor { background: white; border-radius: 8px; padding: 1.25rem; width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; box-sizing: border-box; } .editor.editor-large { max-width: 640px; } .editor h2 { margin-top: 0; } /* The item editor is a full page (its own history entry - see `Route` in main.rs) rather than a dialog floating over a dimmed backdrop, so back/Cancel/Save land the user exactly where they were in the list instead of just toggling a layer on top of it. */ .editor-overlay.item-editor-page { align-items: stretch; justify-content: stretch; background: #f5f6f8; padding: 0; } .editor.item-editor { border-radius: 0; max-width: 640px; max-height: none; min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); } .editor-title { margin: 0 0 0.75rem; line-height: 1.25; overflow-wrap: anywhere; } .editor-field { display: block; margin-bottom: 0.75rem; } .editor-field span { display: block; font-size: 0.8rem; color: #616e7c; margin-bottom: 0.25rem; } .editor-field-label { display: flex !important; align-items: center; gap: 0.35rem; } .copy-btn { display: flex; align-items: center; justify-content: center; border: none; background: #e4e7eb; color: #495057; cursor: pointer; padding: 0.15rem 0.35rem; border-radius: 4px; } .copy-btn:hover { background: #dde1e6; } .editor-field input { width: 100%; box-sizing: border-box; padding: 0.5rem; border: 1px solid #cbd2d9; border-radius: 4px; font-size: 1rem; } .editor-type { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; font-size: 0.85rem; } .editor-type-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; } .editor-notes-field .notes { min-height: 4rem; font-size: 1rem; transition: min-height 0.15s ease; } .editor-notes-field .notes.notes-large { min-height: 12rem; } .editor.editor-large .editor-notes-field .notes { min-height: 16rem; } .editor-schedule { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; padding: 0.6rem; background: #f8f9fa; border-radius: 4px; font-size: 0.85rem; } .editor-schedule-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; } .editor-schedule-row .amount-input { width: 3.5rem; } .editor-schedule-hint { color: #616e7c; } .editor-schedule-recur-toggle { display: flex; align-items: center; gap: 0.3rem; } .editor-schedule input[type="datetime-local"], .editor-schedule input[type="number"], .editor-schedule select { padding: 0.3rem; border: 1px solid #cbd2d9; border-radius: 4px; font-size: 0.85rem; } .editor-secondary-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; } .editor-type button, .editor-secondary-actions button, .editor-actions button { border: none; background: #e4e7eb; padding: 0.4rem 0.8rem; border-radius: 4px; cursor: pointer; } .editor-secondary-actions .remove { color: #c92a2a; } .editor-meta { font-size: 0.75rem; color: #9aa5b1; margin-bottom: 1rem; } .editor-actions { display: flex; gap: 0.5rem; justify-content: flex-end; } .trash-header { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0; } .trash-header button { border: none; background: #e4e7eb; padding: 0.3rem 0.7rem; border-radius: 4px; cursor: pointer; } .trash-item .item-main { cursor: default; } .admin-user-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .admin-user-row { background: white; border-radius: 6px; padding: 0.6rem 0.8rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; } .admin-user-info { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-width: 0; } .admin-user-email { font-weight: 600; overflow-wrap: anywhere; } .admin-user-status { font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.02em; } .admin-user-status.status-pending { background: #fff3bf; color: #7d5a00; } .admin-user-status.status-approved { background: #d3f9d8; color: #2b8a3e; } .admin-user-status.status-disabled { background: #ffe3e3; color: #c92a2a; } .admin-user-badge { font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: #d0ebff; color: #1864ab; } .admin-user-you { font-size: 0.75rem; color: #9aa5b1; } .admin-user-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; } .admin-user-actions button { border: none; background: #e4e7eb; padding: 0.3rem 0.7rem; border-radius: 4px; font-size: 0.8rem; cursor: pointer; } .admin-user-actions button.remove { color: #c92a2a; } @media (max-width: 600px) { .app { padding-bottom: 6rem; } .composer-bar { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom)); background: #f5f6f8; box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1); z-index: 10; } .item-editor { padding-bottom: 5rem; } .item-editor-page .editor-actions { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom)); background: #f5f6f8; box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1); z-index: 21; } .item-editor-page .editor-actions button { flex: 1; } } :root[data-theme="dark"] { body { background: #1f2933; color: #f5f6f8; } .composer input { background: #323f4b; color: #f5f6f8; border-color: #52606d; } .composer button.toggle { background: #52606d; color: #f5f6f8; } .item-actions button { background: #3e4c59; color: #cbd2d9; } .notes { background: #3e4c59; color: #f5f6f8; border-color: #52606d; } .list-manager-current { background: #2c3947; } .list-manager-search { background: #3e4c59; border-color: #52606d; color: #f5f6f8; } .trash-btn, .child-count, .trash-header button, .confirm-actions button, .editor-type button, .editor-secondary-actions button, .editor-actions button, .copy-list-btn, .composer-kind, .composer-mode-btn, .copy-btn { background: #3e4c59; color: #cbd2d9; } .copy-btn:hover { background: #52606d; } .list-header-notes { color: #9aa5b1; } .composer-kind { border-color: #52606d; } .confirm-remove { background: #3e2a2a; border-color: #5c2b2b; } .editor { background: #323f4b; color: #f5f6f8; } .editor-overlay.item-editor-page, .item-editor-page .editor-actions { background: #1f2933; } .editor.item-editor { background: #1f2933; } .editor-field input { background: #3e4c59; color: #f5f6f8; border-color: #52606d; } .editor-schedule { background: #2c3947; } .editor-schedule input[type="datetime-local"], .editor-schedule input[type="number"], .editor-schedule select { background: #3e4c59; color: #f5f6f8; border-color: #52606d; } .editor-schedule-hint { color: #9aa5b1; } .composer-bar { background: #1f2933; } .auth-card { background: #323f4b; color: #f5f6f8; } .auth-card h2 { color: #cbd2d9; } .settings-btn, .session-btn { background: #3e4c59; color: #cbd2d9; } .settings-dropdown { background: #323f4b; border-color: #52606d; } .settings-item { color: #f5f6f8; } .settings-item:hover { background: #3e4c59; } .settings-section { border-top-color: #52606d; } .settings-section-label { color: #9aa5b1; } .theme-option .theme-check { color: #74a9ff; } .session-status-line, .session-email { color: #cbd2d9; } .item-notes-preview { color: #9aa5b1; } .more-btn, .edit-btn { color: #9aa5b1; } .more-btn:hover, .edit-btn:hover { background: #3e4c59; color: #f5f6f8; } .admin-user-row { background: #323f4b; } .admin-user-actions button { background: #3e4c59; color: #cbd2d9; } }