From bd83211f38e85c00fcb7f163edbe0fecd03c5bc2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?= Date: Tue, 31 Mar 2026 18:16:49 +0200 Subject: [PATCH] fix --- shopping_app/static/css/style.css | 110 + shopping_app/static/css/style.css.bak | 5931 +++++++++++++++++ shopping_app/static/js/functions.js | 20 - shopping_app/static/js/functions.js.bak | 510 ++ shopping_app/static/js/receipt_section.js | 57 +- shopping_app/static/js/receipt_section.js.bak | 55 + shopping_app/templates/list_share.html | 26 +- shopping_app/templates/list_share.html.bak | 346 + shopping_app/templates/main.html | 10 +- 9 files changed, 6999 insertions(+), 66 deletions(-) create mode 100644 shopping_app/static/css/style.css.bak create mode 100644 shopping_app/static/js/functions.js.bak create mode 100644 shopping_app/static/js/receipt_section.js.bak create mode 100644 shopping_app/templates/list_share.html.bak diff --git a/shopping_app/static/css/style.css b/shopping_app/static/css/style.css index 9e717e9..3d649c2 100644 --- a/shopping_app/static/css/style.css +++ b/shopping_app/static/css/style.css @@ -5929,3 +5929,113 @@ body:not(.sorting-active) .drag-handle { right: 0; } } + + +/* v5.2 create-list unity + receipt collapse fix */ +.endpoint-main_page .create-list-input-group { + display: flex; + flex-wrap: nowrap !important; + align-items: stretch; + overflow: hidden; + border-radius: 16px; + border: 1px solid rgba(255, 255, 255, 0.12); + background: rgba(7, 17, 31, 0.9); + box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); +} + +.endpoint-main_page .create-list-input-group > .create-list-title-input, +.endpoint-main_page .create-list-input-group > .form-control { + border: 0 !important; + border-right: 1px solid rgba(255, 255, 255, 0.08) !important; + border-radius: 0 !important; + background: transparent !important; + box-shadow: none !important; +} + +.endpoint-main_page .create-list-input-group > .create-list-title-input:focus, +.endpoint-main_page .create-list-input-group > .form-control:focus { + background: rgba(255, 255, 255, 0.02) !important; + box-shadow: none !important; +} + +.endpoint-main_page .create-list-input-group > .create-list-temp-toggle, +.endpoint-main_page .create-list-input-group > #tempToggle { + min-width: 9.5rem; + border: 0 !important; + border-radius: 0 !important; + background: rgba(255, 255, 255, 0.04) !important; + box-shadow: none !important; +} + +.endpoint-main_page .create-list-input-group > .create-list-temp-toggle.is-active, +.endpoint-main_page .create-list-input-group > #tempToggle.is-active { + background: rgba(41, 209, 125, 0.18) !important; +} + +.endpoint-main_page .create-list-temp-toggle__label { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 100%; +} + +.endpoint-main_page .create-list-input-group:focus-within { + border-color: rgba(41, 209, 125, 0.55); + box-shadow: 0 0 0 0.18rem rgba(41, 209, 125, 0.12), 0 10px 28px rgba(0, 0, 0, 0.18); +} + +.receipt-disclosure { + display: block; + padding: 0; + text-align: left; +} + +.receipt-disclosure, +.receipt-disclosure:hover, +.receipt-disclosure:focus, +.receipt-disclosure:active { + width: 100%; + appearance: none; + -webkit-appearance: none; +} + +.receipt-disclosure:focus-visible { + outline: none; +} + +.receipt-section--restoring { + transition: none !important; +} + +@media (max-width: 767.98px) { + .endpoint-main_page .create-list-input-group { + border-radius: 14px; + } + + .endpoint-main_page .create-list-input-group > .create-list-temp-toggle, + .endpoint-main_page .create-list-input-group > #tempToggle { + min-width: 8.25rem; + padding-left: .8rem; + padding-right: .8rem; + font-size: .9rem; + } +} + +@media (max-width: 575.98px) { + .endpoint-main_page .create-list-input-group > .create-list-title-input, + .endpoint-main_page .create-list-input-group > .form-control { + padding-left: .85rem; + padding-right: .7rem; + font-size: .95rem; + } + + .endpoint-main_page .create-list-input-group > .create-list-temp-toggle, + .endpoint-main_page .create-list-input-group > #tempToggle { + min-width: 7.6rem; + font-size: .84rem; + } + + .receipt-disclosure { + border-radius: 16px; + } +} diff --git a/shopping_app/static/css/style.css.bak b/shopping_app/static/css/style.css.bak new file mode 100644 index 0000000..9e717e9 --- /dev/null +++ b/shopping_app/static/css/style.css.bak @@ -0,0 +1,5931 @@ +/* ========================================================= + Variables (single source of truth) +========================================================= */ +:root { + /* brand / info */ + --primary: #184076; + --primary-border: #153866; + --primary-text: #e6f0ff; + + --info: var(--primary); + --info-border: var(--primary-border); + --info-text: var(--primary-text); + + /* success */ + --success: #1c6930; + --success-border: #165024; + --success-text: #eaffea; + + /* warning */ + --warning: #665c1e; + --warning-border: #4d4415; + --warning-text: #fffbe5; + + /* danger */ + --danger: #6e1a1e; + --danger-border: #531417; + --danger-text: #ffeaea; + + /* neutrals / dark */ + --dark-900: #181a1b; + --dark-800: #1c1f22; + --dark-750: #1f2225; + --dark-700: #212529; + --dark-650: #23272a; + --dark-600: #2a2d31; + --dark-550: #2b2f33; + --dark-500: #2c2f33; + --dark-480: #2c3034; + --dark-470: #2a2d31; + --dark-450: #3a3f44; + --dark-400: #343a40; + --dark-350: #3d4248; + --dark-300: #495057; + + --text-strong: #f8f9fa; + --text: #e2e3e5; + --text-dim: #e1e1e1; + --muted: #6c757d; + + /* defaults */ + --progress-default: #3d7bd6; +} + +/* ========================================================= + Utilities & Sizes +========================================================= */ + +.large-checkbox { + width: 1.5em; + height: 1.5em; +} + +.clickable-item { + cursor: pointer; +} + +.progress-thin { + height: 12px; +} + +.item-not-checked { + background-color: var(--dark-500) !important; + color: #fff !important; +} + +#empty-placeholder { + font-style: italic; + pointer-events: none; +} + +.fade-out { + opacity: 0; + transition: opacity 0.5s ease; +} + +@media (pointer: fine) { + .only-mobile { + display: none !important; + } +} + +/* Bootstrap bg overrides via variables */ +.bg-success { + background-color: var(--success) !important; +} + +.bg-warning { + background-color: var(--warning) !important; +} + +/* ========================================================= + Buttons +========================================================= */ +/* Primary */ +.btn-primary { + background-color: var(--primary) !important; + border-color: var(--primary-border) !important; +} + +.btn-primary:hover, +.btn-primary:focus, +.btn-primary:active { + background-color: #13315f !important; + border-color: #10284f !important; +} + +/* Success */ +.btn-success { + background-color: var(--success) !important; + border-color: var(--success-border) !important; + color: #fff !important; +} + +.btn-success:hover, +.btn-success:focus, +.btn-success:active { + background-color: #155627 !important; + border-color: #124521 !important; + color: #fff !important; +} + +/* Warning */ +.btn-warning { + background-color: var(--warning) !important; + border-color: var(--warning-border) !important; + color: var(--warning-text) !important; +} + +.btn-warning:hover, +.btn-warning:focus, +.btn-warning:active { + background-color: #5c4c17 !important; + border-color: #3e3610 !important; + color: var(--warning-text) !important; +} + +/* Outline */ +.btn-outline-success { + color: var(--success) !important; + border-color: var(--success) !important; +} + +.btn-outline-success:hover, +.btn-outline-success:focus, +.btn-outline-success:active { + background-color: var(--success) !important; + border-color: var(--success-border) !important; + color: #fff !important; +} + +.btn-outline-warning { + color: #d9c97a !important; + border-color: var(--warning) !important; +} + +.btn-outline-warning:hover, +.btn-outline-warning:focus, +.btn-outline-warning:active { + background-color: var(--warning) !important; + border-color: var(--warning-border) !important; + color: var(--warning-text) !important; +} + +/* File input button */ +input[type="file"]::file-selector-button { + background-color: #1b4a29; + color: #f0f0f0; + border: none; + padding: .5em 1em; + border-radius: 4px; + font-weight: bold; + cursor: pointer; + transition: background .2s; +} + +/* ========================================================= + Forms +========================================================= */ +.form-select, +.form-control, +textarea.form-control { + background-color: var(--dark-700) !important; + color: var(--text-strong) !important; + border: 1px solid var(--dark-300) !important; +} + +.form-select:focus, +.form-control:focus, +textarea.form-control:focus { + background-color: var(--dark-800) !important; + border-color: var(--primary) !important; + color: #fff !important; + box-shadow: 0 0 0 .25rem rgba(24, 64, 118, .35) !important; +} + +.form-control:disabled, +textarea.form-control:disabled { + background-color: var(--dark-550) !important; + color: var(--muted) !important; + cursor: not-allowed; +} + +/* Switch */ +.form-switch .form-check-input { + background-color: var(--dark-400) !important; + border-color: var(--dark-300) !important; +} + +.form-switch .form-check-input:checked { + background-color: var(--primary) !important; + border-color: var(--primary-border) !important; +} + +/* Placeholders */ +.form-control::placeholder, +.bg-dark .form-control::placeholder { + color: #aaa !important; + opacity: 1 !important; +} + +/* Paired corners (utility) */ +#tempToggle { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.create-list-input-group > input.form-control { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +/* XXL custom checkbox */ +input[type="checkbox"].large-checkbox { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + width: 1.5em; + height: 1.5em; + margin: 0; + padding: 0; + outline: none; + background: none; + cursor: pointer; + position: relative; + vertical-align: middle; +} + +input[type="checkbox"].large-checkbox::before { + content: '✗'; + color: #dc3545; + font-size: 1.6em; + font-weight: 700; + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + line-height: 1; + transition: color .2s; +} + +input[type="checkbox"].large-checkbox:checked::before { + content: '✓'; + color: #fff; +} + +input[type="checkbox"].large-checkbox:disabled::before { + opacity: .5; + cursor: not-allowed; +} + +input[type="checkbox"].large-checkbox:disabled { + cursor: not-allowed; +} + +/* Tom-Select / TS */ +.tom-dark .ts-control { + background-color: var(--dark-700) !important; + color: #fff !important; + border: 1px solid var(--dark-300) !important; + border-radius: .375rem; + min-height: 38px; + padding: .25rem .5rem; + box-sizing: border-box; +} + +.tom-dark .ts-control .item { + background-color: var(--dark-400) !important; + color: #fff !important; + border-radius: .25rem; + padding: 2px 8px; + margin-right: 4px; +} + +.ts-dropdown { + background-color: var(--dark-700) !important; + color: #fff !important; + border: 1px solid var(--dark-300); + border-radius: .375rem; + z-index: 9999 !important; + max-height: 300px; + overflow-y: auto; +} + +.ts-dropdown .active { + background-color: var(--dark-300) !important; + color: #fff !important; +} + +td select.tom-dark { + width: 100%; + max-width: 100%; + box-sizing: border-box; +} + +/* ========================================================= + Alerts, Badges, Background helpers +========================================================= */ +/* Alerts */ +.alert-success { + background-color: #225d36 !important; + color: var(--success-text) !important; + border-color: #174428 !important; +} + +.alert-danger { + background-color: #7a1f23 !important; + color: var(--danger-text) !important; + border-color: #531417 !important; +} + +.alert-info { + background-color: var(--primary) !important; + color: var(--primary-text) !important; + border-color: var(--primary-border) !important; +} + +.alert-warning { + background-color: var(--warning) !important; + color: var(--warning-text) !important; + border-color: var(--warning-border) !important; +} + +.alert-light { + background-color: #3a3f44 !important; + color: var(--text-strong) !important; + border-color: var(--dark-480) !important; +} + +/* Badges */ +.badge.bg-success, +.badge.text-bg-success { + background-color: #225d36 !important; + color: var(--success-text) !important; +} + +.badge.bg-danger, +.badge.text-bg-danger { + background-color: #7a1f23 !important; + color: var(--danger-text) !important; +} + +.badge.bg-info, +.badge.text-bg-info { + background-color: #1d3a4d !important; + color: #eaf6ff !important; +} + +.badge.bg-warning, +.badge.text-bg-warning { + background-color: var(--warning) !important; + color: var(--warning-text) !important; +} + +.badge.bg-secondary, +.badge.text-bg-secondary { + background-color: var(--dark-400) !important; + color: #e2e3e5 !important; +} + +.badge.bg-primary, +.badge.text-bg-primary { + background-color: var(--primary) !important; + color: var(--primary-text) !important; +} + +.badge.bg-light, +.badge.text-bg-light { + background-color: var(--dark-350) !important; + color: #f1f3f5 !important; +} + +.badge.bg-dark, +.badge.text-bg-dark { + background-color: var(--dark-900) !important; + color: var(--text-strong) !important; +} + +/* ========================================================= + Progress +========================================================= */ +.progress-dark { + background-color: var(--dark-700) !important; + border-radius: 20px !important; + overflow: hidden; +} + +.progress { + background-color: #2a2d31 !important; + border-radius: 20px !important; +} + +.progress-bar { + border-radius: 0 !important; + transition: width .4s ease, background-color .4s ease; + background-color: var(--progress-default) !important; +} + +.progress-bar:first-child { + border-top-left-radius: 20px !important; + border-bottom-left-radius: 20px !important; +} + +.progress-bar:last-child { + border-top-right-radius: 20px !important; + border-bottom-right-radius: 20px !important; +} + +.progress-bar.bg-success { + background-color: var(--success) !important; +} + +.progress-bar.bg-danger { + background-color: var(--danger) !important; +} + +.progress-bar.bg-warning { + background-color: var(--warning) !important; + color: #fff !important; +} + +.progress-bar.bg-info { + background-color: #16425a !important; +} + +/* Label (parent must be position-relative) */ +.progress-label { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + pointer-events: none; + white-space: nowrap; +} + +/* ========================================================= + Cards & Tables +========================================================= */ +.card { + background-color: var(--dark-500) !important; + border: 1px solid var(--dark-450) !important; + color: var(--text) !important; +} + +.card-header, +.card-footer { + background-color: var(--dark-650) !important; + border-color: var(--dark-450) !important; + color: #f1f3f5 !important; +} + +.card .table { + border-radius: 0 !important; + overflow: hidden; + margin-bottom: 0; +} + +.table-responsive { + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} + +.table-responsive table { + min-width: 1000px; +} + +.table-dark.table-striped tbody tr:nth-of-type(odd) { + background-color: rgba(255, 255, 255, .025); +} + +.table-dark tbody tr:hover { + background-color: rgba(255, 255, 255, .04); +} + +.table-dark thead th { + background-color: var(--dark-800); + color: var(--text-dim); + font-weight: 500; + border-bottom: 1px solid var(--dark-450); +} + +.table-dark td, +.table-dark th { + padding: .6rem .75rem; + vertical-align: middle; + border-top: 1px solid var(--dark-450); +} + +/* ========================================================= + Navs & Pagination +========================================================= */ +.nav-tabs .nav-link.active, +.nav-tabs .nav-item.show .nav-link { + background-color: var(--dark-500) !important; + color: var(--text-strong) !important; + border-color: var(--dark-450) var(--dark-450) var(--dark-500) !important; +} + +.page-link { + color: #e0e0e0 !important; + background-color: var(--dark-750) !important; + border: 1px solid var(--dark-450) !important; +} + +.page-link:hover, +.page-link:focus { + color: #fff !important; + background-color: var(--dark-400) !important; + border-color: var(--dark-300) !important; +} + +.page-item.active .page-link { + color: #fff !important; + background-color: var(--primary) !important; + border-color: var(--primary-border) !important; +} + +.page-item.disabled .page-link { + color: var(--muted) !important; + background-color: var(--dark-550) !important; + border-color: var(--dark-450) !important; +} + +/* ========================================================= + Lists & Misc UI +========================================================= */ +.list-group-item { + display: flex; + align-items: center; + justify-content: space-between; +} + +/* Zachowaj ostre krawędzie tylko dla list flush (np. w panelach edycji) */ +.list-group-flush > .list-group-item:first-child, +.list-group-flush > .list-group-item:last-child { + border-radius: 0 !important; +} + +#items li.hide-purchased { + display: none !important; +} + +#mass-add-list li { + transition: background .2s; +} + +#mass-add-list li.active { + background: #198754 !important; + color: #fff !important; + border: 1px solid #000 !important; +} + +.quantity-input { + width: 60px; + background: var(--dark-400); + color: #fff; + border: 1px solid var(--dark-300); + border-radius: 4px; + text-align: center; +} + +.add-btn { + margin-left: 10px; +} + +.quantity-controls { + min-width: 120px; + display: flex; + align-items: center; + justify-content: flex-end; + gap: 4px; +} + +/* ========================================================= + Toasts & Info Bar +========================================================= */ +.toast { + animation: fadeInUp .5s ease; +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Base toast when not using text-bg-* */ +.toast:not([class*="text-bg-"]) { + background-color: var(--dark-500) !important; + color: #f1f1f1 !important; + border: 1px solid var(--dark-450) !important; + animation: fadeInUp .5s ease; +} + +.toast .toast-body { + color: inherit !important; +} + +.toast .btn-close { + filter: invert(1) grayscale(100%) brightness(200%); +} + +/* Typed toasts (override Bootstrap text-bg-*) */ +.toast.text-bg-primary { + background-color: var(--info) !important; + color: var(--info-text) !important; + border-color: var(--info-border) !important; +} + +.toast.text-bg-info { + background-color: var(--info) !important; + color: var(--info-text) !important; + border-color: var(--info-border) !important; +} + +.toast.text-bg-success { + background-color: var(--success) !important; + color: var(--success-text) !important; + border-color: var(--success-border) !important; +} + +.toast.text-bg-warning { + background-color: var(--warning) !important; + color: var(--warning-text) !important; + border-color: var(--warning-border) !important; +} + +.toast.text-bg-danger { + background-color: var(--danger) !important; + color: var(--danger-text) !important; + border-color: var(--danger-border) !important; +} + +.toast-body { + color: #fff !important; + font-weight: 500 !important; +} + +.info-bar-fixed { + width: 100%; + color: var(--text-strong); + background-color: var(--dark-700); + border-radius: 12px 12px 0 0; + text-align: center; + padding: 10px 10px; + font-size: .95rem; + box-sizing: border-box; + margin-top: 2rem; + box-shadow: 0 -1px 4px rgba(0, 0, 0, .25); +} + +@media (max-width: 768px) { + .info-bar-fixed { + position: static; + font-size: .85rem; + padding: 8px 4px; + border-radius: 0; + } +} + +/* ========================================================= + Modals (incl. fullscreen chart modal) +========================================================= */ +.modal-content { + background-color: var(--dark-470) !important; + color: #f1f1f1 !important; + border: 1px solid var(--dark-450) !important; +} + +.modal-header, +.modal-footer { + background-color: var(--dark-650) !important; + border-color: var(--dark-450) !important; +} + +/* Fullscreen chart modal */ +#chartFullscreenModal .modal-dialog { + max-width: 100vw; + width: 100vw; + margin: 0; +} + +#chartFullscreenModal .modal-content { + height: 100vh; + border-radius: 0; +} + +#chartFullscreenModal .modal-body { + display: flex; + flex: 1 1 auto; + padding: 0; + overflow: hidden; +} + +#chartFullscreenCanvas { + display: block; + width: 100%; + height: 100%; +} + +/* ========================================================= + Dropdown (TS already above) — active +========================================================= */ +.ts-dropdown .active { + background-color: var(--dark-300) !important; +} + +.list-group-item.bg-success { + background-color: var(--success) !important; + border-color: var(--success-border) !important; + color: var(--success-text) !important; + --bs-bg-opacity: 1 !important; +} + +.list-group-item.bg-warning { + background-color: var(--warning) !important; + border-color: var(--warning-border) !important; + color: var(--warning-text) !important; + --bs-bg-opacity: 1 !important; +} + +.btn-outline-light { + color: #f8f9fa !important; + border-color: #f8f9fa !important; + background-color: transparent !important; + /* brak białego tła domyślnie */ +} + +.btn-outline-light:hover, +.btn-outline-light:focus { + background-color: #6c757d !important; + /* szare, jak wcześniej */ + color: #fff !important; + border-color: #6c757d !important; +} + +.btn-outline-light:active, +.btn-outline-light.active, +.show>.btn-outline-light.dropdown-toggle { + background-color: #5a6268 !important; + /* ciemniejsze szare na active */ + color: #fff !important; + border-color: #545b62 !important; +} + +.btn-outline-info { + color: var(--info) !important; + border-color: var(--info) !important; + background-color: transparent !important; +} + +.btn-outline-info:hover, +.btn-outline-info:focus { + background-color: #1d4d8c !important; + border-color: #1d4d8c !important; + color: var(--info-text) !important; +} + +.btn-outline-info:active, +.btn-outline-info.active, +.show>.btn-outline-info.dropdown-toggle { + background-color: var(--info) !important; + border-color: var(--info-border) !important; + color: var(--info-text) !important; +} + +/* Tekstowe kolory */ +.text-success { + color: var(--success) !important; +} + +.text-warning { + color: var(--warning) !important; +} + +.text-info { + color: var(--info) !important; +} + +.text-danger { + color: var(--danger) !important; +} + + +.settings-category-card { + background: rgba(255,255,255,.03); + border: 1px solid rgba(255,255,255,.09); + border-radius: 16px; + padding: 1rem; + height: 100%; +} + +.settings-category-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: .75rem; +} + +.settings-category-name { + font-size: 1rem; + font-weight: 700; + line-height: 1.2; +} + +.settings-override-badge { + white-space: nowrap; +} + +.settings-color-controls { + display: flex; + align-items: stretch; + gap: .75rem; +} + +.settings-color-controls .category-color { + width: 72px; + min-width: 72px; + height: auto; + padding: .35rem; + border-radius: 14px !important; + border: 1px solid rgba(255,255,255,.14); + background: rgba(255,255,255,.04); +} + +.settings-color-actions { + display: flex; + flex: 1 1 auto; +} + +.settings-color-actions .btn { + flex: 1 1 0; + min-height: 44px; + border-radius: 14px !important; + display: inline-flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.settings-color-actions .btn + .btn { + margin-left: .5rem; +} + +@media (min-width: 992px) { + .settings-category-name { + font-size: 1.08rem; + } +} + +@media (max-width: 767.98px) { + .settings-category-card { + padding: .9rem; + } + + .settings-color-controls { + flex-direction: column; + } + + .settings-color-controls .category-color { + width: 100%; + min-width: 0; + height: 48px; + } + + .settings-color-actions { + flex-direction: column; + } + + .settings-color-actions .btn + .btn { + margin-left: 0; + margin-top: .5rem; + } +} + +/* ========== Kolorowe wskaźniki pod pickerem ========== */ +.color-indicators .indicator { + display: grid; + grid-template-columns: auto 1fr auto; + align-items: center; + gap: .5rem; +} + +.color-indicators .bar { + height: 10px; + border-radius: 6px; + border: 1px solid rgba(255,255,255,.25); + box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); +} + +/* ========== Swatch + zapisy heksowe ========== */ +.swatch { + width: 16px; + height: 16px; + border-radius: 50%; + display: inline-block; + border: 1px solid rgba(0,0,0,.15); +} + +.hex, +.hex-label { + font-variant-numeric: lining-nums; + letter-spacing: .2px; +} + +/* ========== OCR textarea ========== */ +.settings-ocr-textarea { + font: inherit; + line-height: 1.45; +} + +/* ========== Odznaka poziomu czułości ========== */ +.sens-badge { font-weight: 600; } +.sens-low { background: rgba(108,117,125,.25); color: #ced4da; } /* szary */ +.sens-mid { background: rgba(13,110,253,.25); color: #9ec5fe; } /* niebieski */ +.sens-high { background: rgba(220,53,69,.25); color: #f1aeb5; } /* czerwony */ + +/* ========================================================= + COMPACT: przyciski akcji na listach + - Desktop: standard Bootstrap + - <=576px: kompakt +========================================================= */ + +/* <=420px: tylko emoji */ +@media (max-width: 420px) { + .btn-group-compact .btn-text { + display: none !important; + } + + .btn-group-compact .btn { + padding: 0.22rem 0.45rem; + min-width: auto; + font-size: 0.9rem; + line-height: 1.1; + } +} + +/* 421–576px: lekko ciaśniej, ale tekst zostaje */ +@media (min-width: 421px) and (max-width: 576px) { + .btn-group-compact .btn { + padding: 0.24rem 0.45rem; + font-size: 0.82rem; + line-height: 1.1; + } + + .btn-group-compact .btn-text { + font-size: 0.75rem; + } +} + + +/* ================================================ + RESPONSIVE NAVBAR + ================================================ */ + +/* Wąskie ekrany (np. iPhone 11) */ +@media (max-width: 420px) { + + .navbar .container-fluid { + gap: 4px; + } + + .navbar-brand-compact { + font-size: 0.9rem !important; + margin-right: 0.25rem; + white-space: nowrap; + } + .navbar-brand-compact .navbar-brand-text { + font-size: 0.95em; + } + + .user-info-compact { + font-size: 0.72rem !important; + line-height: 0.9; + white-space: nowrap; + } + .user-info-compact .badge { + font-size: 0.68rem; + padding: 0.2rem 0.45rem; + } + + .nav-buttons-compact .nav-btn-text { + display: none !important; + } + .nav-buttons-compact { + gap: 0.35rem !important; + flex-wrap: nowrap; + } + .nav-buttons-compact .btn { + padding: 0.22rem 0.45rem; + min-width: auto; + line-height: 1.1; + } +} + + +/* Małe ekrany (np. 421-576px) */ +@media (min-width: 421px) and (max-width: 576px) { + .navbar .container-fluid { + gap: 8px; + } + + .navbar-brand-compact { + font-size: 1.25rem !important; + white-space: nowrap; + } + + .user-info-compact { + font-size: 0.8rem !important; + white-space: nowrap; + } + .user-info-compact .badge { + font-size: 0.75rem; + } + + .nav-buttons-compact { + flex-wrap: nowrap; + } + .nav-buttons-compact .btn { + font-size: 0.8rem; + padding: 0.25rem 0.45rem; + } + .nav-buttons-compact .nav-btn-text { + font-size: 0.75rem; + } +} + +@media (max-width: 420px) { + .user-label-desktop { display: none !important; } + .user-label-mobile { display: inline !important; } +} + +@media (min-width: 421px) { + .user-label-desktop { display: inline !important; } + .user-label-mobile { display: none !important; } +} + +.category-dot-pure { + width: 10px; + height: 10px; + display: inline-block; + flex: 0 0 auto; + border-radius: 50%; + border: 2px solid rgba(255, 255, 255, 0.8); + background-clip: padding-box; + vertical-align: middle; + margin-left: 0.35rem; + opacity: 1; + padding: 0; + line-height: 1; + font-size: 0; + text-indent: -9999px; + overflow: hidden; + box-shadow: 0 1px 3px rgba(0,0,0,0.4); +} + +.category-dot-pure::before, +.category-dot-pure::after { + content: none !important; +} + + +/* Hover efekt */ +.category-dot:hover { + transform: scale(1.3) !important; + box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important; +} + + +.list-title { + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + max-width: 70% !important; + display: inline-block !important; +} + +/* Bardzo małe ekrany */ +@media (max-width: 420px) { + .list-title { + max-width: 60% !important; + } +} + +/* ===== 2026 app refresh ===== */ +:root { + --app-bg: #07111f; + --app-bg-soft: #0d1b2d; + --app-surface: rgba(11, 23, 39, 0.88); + --app-surface-strong: rgba(15, 28, 46, 0.98); + --app-surface-muted: rgba(255, 255, 255, 0.04); + --app-border: rgba(255, 255, 255, 0.1); + --app-border-strong: rgba(255, 255, 255, 0.16); + --app-text: #f3f8ff; + --app-text-muted: #9fb0c8; + --app-success: #27d07d; + --app-warning: #f6c453; + --app-danger: #ff6b7a; + --app-shadow: 0 18px 50px rgba(0, 0, 0, 0.28); + --app-radius: 22px; +} + +html, body { + min-height: 100%; + background-color: var(--app-bg); + background-image: + radial-gradient(circle at top left, rgba(39, 208, 125, 0.18), transparent 24%), + radial-gradient(circle at top right, rgba(74, 144, 226, 0.16), transparent 22%), + linear-gradient(180deg, #09111d 0%, #08121f 38%, #060d18 100%); + background-repeat: no-repeat; + color: var(--app-text); +} + +html { + color-scheme: dark; +} + +body.app-body { + position: relative; + min-height: 100vh; + min-height: 100dvh; + min-height: 100svh; + display: flex; + flex-direction: column; + margin: 0; + font-feature-settings: "ss01" on, "cv02" on; + overflow-x: hidden; +} + + +@supports (padding: env(safe-area-inset-top)) { + html, body { + min-height: calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)); + } +} + +.app-backdrop { + position: fixed; + inset: 0; + pointer-events: none; + background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 28%); +} + +.app-header { + z-index: 1035; + padding: calc(0.75rem + env(safe-area-inset-top, 0px)) 0 0; + backdrop-filter: blur(12px); +} + +.app-navbar { + background: transparent; +} + +.app-navbar .container-xxl { + border: 1px solid var(--app-border); + background: rgba(6, 15, 27, 0.74); + backdrop-filter: blur(16px); + border-radius: 999px; + min-height: 68px; + box-shadow: var(--app-shadow); +} + +.app-brand { + display: inline-flex; + align-items: center; + gap: 0.85rem; + font-weight: 800; + color: var(--app-text) !important; +} + +.app-brand__icon { + display: inline-grid; + place-items: center; + width: 2.6rem; + height: 2.6rem; + border-radius: 16px; + background: linear-gradient(135deg, rgba(39,208,125,0.22), rgba(74,144,226,0.18)); + box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); +} + +.app-brand__title { color: #ffffff; } +.app-brand__accent { color: #7ce4a8; margin-left: 0.3rem; } + +.app-navbar__actions, +.app-navbar__meta { + display: flex; + align-items: center; + gap: 0.5rem; + flex-wrap: wrap; +} + +.app-user-chip { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.4rem 0.45rem 0.4rem 0.75rem; + border-radius: 999px; + background: rgba(255,255,255,0.05); + border: 1px solid rgba(255,255,255,0.08); +} + +.app-user-chip__label { + font-size: 0.75rem; + color: var(--app-text-muted); + text-transform: uppercase; + letter-spacing: 0.08em; +} + +.app-main { + flex: 1 0 auto; + padding: 1rem 0 2.5rem; +} + +.app-content-frame { + padding: 0.25rem 0 0; +} + +.app-footer { + margin-top: auto; + padding: 1rem 0 calc(1.35rem + env(safe-area-inset-bottom, 0px)); +} + +.app-footer__inner { + border-top: 1px solid rgba(255,255,255,0.08); + padding-top: 1.25rem; +} + +h1, h2, h3, h4, h5, h6 { + color: #ffffff; + letter-spacing: -0.02em; +} + +.card, +.modal-content, +.dropdown-menu, +.list-group-item, +.table, +.alert, +.pagination .page-link, +.nav-tabs, +.input-group-text, +.form-control, +.form-select, +.btn, +.progress, +.toast { + border-radius: 18px; +} + +.card, +.modal-content, +.table-responsive, +.alert, +.list-group-item, +.pagination .page-link, +.nav-tabs, +.input-group-text, +.form-control, +.form-select, +.progress, +.toast, +.page-link, +.table, +.btn-group > .btn { + border-color: var(--app-border) !important; +} + +.card, +.modal-content, +.table-responsive, +.alert, +.list-group-item, +.progress, +.toast { + background: var(--app-surface) !important; + box-shadow: var(--app-shadow); + backdrop-filter: blur(10px); +} + +.card-body, +.modal-body, +.modal-header, +.modal-footer { + background: transparent; +} + +.bg-dark, +.table-dark, +.list-group-item.bg-dark, +.modal-content.bg-dark, +.card.bg-dark, +.card.bg-secondary, +.list-group-item.item-not-checked { + background: var(--app-surface) !important; + color: var(--app-text) !important; +} + +.card.bg-secondary.bg-opacity-10, +#share-card { + background: linear-gradient(180deg, rgba(16, 29, 49, 0.96), rgba(10, 20, 36, 0.94)) !important; +} + +.table-dark { + --bs-table-bg: transparent; + --bs-table-striped-bg: rgba(255,255,255,0.03); + --bs-table-hover-bg: rgba(255,255,255,0.05); + --bs-table-color: var(--app-text); + margin-bottom: 0; +} + +.table > :not(caption) > * > * { + padding: 0.9rem 1rem; + border-bottom-color: rgba(255,255,255,0.08); +} + +.list-group { + gap: 0.8rem; +} + +.list-group-item { + margin-bottom: 0; + padding: 1rem 1rem; + color: var(--app-text) !important; +} + +.list-group-item.bg-success { + background: linear-gradient(135deg, rgba(39,208,125,0.92), rgba(22,150,91,0.96)) !important; +} + +.list-group-item.bg-warning { + background: linear-gradient(135deg, rgba(246,196,83,0.96), rgba(224,164,26,0.96)) !important; + color: #1c1b17 !important; +} + +.btn { + border-radius: 14px; + font-weight: 600; + padding: 0.7rem 1rem; + box-shadow: none; +} + +.btn-sm { + padding: 0.55rem 0.85rem; + border-radius: 12px; +} + +.btn-success, +.btn-outline-success:hover { + background: linear-gradient(135deg, #29d17d, #1ea860); + border-color: rgba(41,209,125,0.9); +} + +.btn-outline-light, +.btn-outline-secondary, +.btn-outline-warning, +.btn-outline-primary, +.btn-outline-success { + background: rgba(255,255,255,0.02); +} + +.btn:hover, +.btn:focus { + transform: translateY(-1px); +} + +.form-control, +.form-select, +.input-group-text { + min-height: 48px; + background: rgba(5, 13, 23, 0.86) !important; + color: var(--app-text) !important; + box-shadow: none !important; +} + +.form-control::placeholder { color: rgba(210, 224, 244, 0.45); } +.form-control:focus, +.form-select:focus { + border-color: rgba(39,208,125,0.5) !important; + box-shadow: 0 0 0 0.2rem rgba(39,208,125,0.15) !important; +} + +.nav-tabs { + gap: 0.5rem; + border-bottom: none; + background: rgba(255,255,255,0.03); + padding: 0.4rem; +} + +.nav-tabs .nav-link { + border-radius: 14px; + color: var(--app-text-muted); + border: none; + padding: 0.8rem 1rem; +} + +.nav-tabs .nav-link.active { + background: rgba(39,208,125,0.12); + color: #fff; +} + +.progress { + overflow: hidden; + background: rgba(255,255,255,0.06); + min-height: 1rem; +} + +.badge { + border: 1px solid rgba(255,255,255,0.08); +} + +.pagination .page-link { + background: rgba(255,255,255,0.03); + color: var(--app-text); + margin: 0 0.15rem; +} + +.pagination .page-item.active .page-link { + background: rgba(39,208,125,0.18); + color: #fff; +} + +.modal-content { + overflow: hidden; +} + +.toast-container { z-index: 1200; } + +#items .list-group-item { + border-radius: 18px !important; + padding: 1rem 1rem; +} + +#items .btn-group { + gap: 0.4rem; +} + +#items .btn-group .btn { + border-radius: 12px !important; +} + +.large-checkbox { + width: 1.35rem; + height: 1.35rem; + accent-color: #29d17d; +} + +#share-card .badge, +#total-expense1, +#total-expense2, +#total-expense { + background: transparent; + color: #dfffea !important; +} + +#share-card, +.card, +.table-responsive, +.alert, +.modal-content, +#expenseChartWrapper, +#categoryChartWrapper { + border-radius: var(--app-radius) !important; +} + +.endpoint-login .app-content-frame, +.endpoint-system_auth .app-content-frame, +.endpoint-page_not_found .app-content-frame, +.endpoint-forbidden .app-content-frame { + max-width: 560px; + margin: 3rem auto 0; +} + +.endpoint-main_page .list-group-item, +.endpoint-expenses .card, +.endpoint-admin_panel .card, +.endpoint-view_list .card, +.endpoint-shared_list .card, +.endpoint-edit_my_list .card, +[class*="endpoint-admin_"] .card { + overflow: hidden; +} + +input[type="checkbox"].form-check-input { + width: 2.9rem; + height: 1.5rem; +} + +hr { + border-color: rgba(255,255,255,0.08); +} + +@media (max-width: 991.98px) { + .app-header { + padding-top: 0.55rem; + } + + .app-navbar .container-xxl { + border-radius: 26px; + padding-top: 0.8rem; + padding-bottom: 0.8rem; + align-items: flex-start; + } + + .app-navbar__actions, + .app-navbar__meta { + width: 100%; + justify-content: flex-start; + } +} + +@media (max-width: 767.98px) { + .app-main { + padding-top: 0.7rem; + } + + .card-body, + .list-group-item, + .modal-body, + .modal-header, + .modal-footer, + .table > :not(caption) > * > * { + padding-left: 0.85rem; + padding-right: 0.85rem; + } + + .btn-group, + .d-flex.gap-2, + .d-flex.gap-3 { + gap: 0.45rem !important; + } + + .btn-group > .btn, + .btn.w-100, + .input-group > .btn { + min-height: 46px; + } + + .input-group:not(.ui-password-group) { + flex-wrap: wrap; + gap: 0.55rem; + } + + .input-group:not(.ui-password-group) > .form-control, + .input-group:not(.ui-password-group) > .form-select, + .input-group:not(.ui-password-group) > .btn, + .input-group:not(.ui-password-group) > .input-group-text { + width: 100% !important; + flex: 1 1 100% !important; + border-radius: 14px !important; + max-width: 100% !important; + } + + #items .d-flex.align-items-center.gap-2.flex-grow-1 { + width: 100%; + align-items: flex-start !important; + } + + #items .btn-group { + width: 100%; + margin-top: 0.85rem; + } + + #items .btn-group .btn { + flex: 1 1 0; + } + + .table-responsive { + border-radius: 18px; + } + + .pagination { + flex-wrap: wrap; + gap: 0.25rem; + justify-content: center; + } +} + +/* ========================================================= + Compact minimalist pass +========================================================= */ +:root { + --app-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); + --app-radius: 14px; +} + +body.app-body { + font-size: 0.96rem; + line-height: 1.4; +} + +.app-header { + padding: 0.35rem 0 0; +} + +.app-navbar .container-xxl { + min-height: 54px; + border-radius: 18px; + box-shadow: 0 8px 22px rgba(0,0,0,0.16); +} + +.app-brand { + gap: 0.6rem; + font-size: 0.98rem; +} + +.app-brand__icon { + width: 2.1rem; + height: 2.1rem; + border-radius: 12px; + font-size: 1rem; +} + +.app-brand__title, +.app-brand__accent { + font-size: 0.98rem; +} + +.app-user-chip { + padding: 0.28rem 0.38rem 0.28rem 0.58rem; + gap: 0.4rem; +} + +.app-user-chip__label { + font-size: 0.68rem; + letter-spacing: 0.06em; +} + +.app-main { + padding: 0.65rem 0 1.4rem; +} + +.app-content-frame { + padding-top: 0.1rem; +} + +.app-footer { + margin-top: auto; + padding: 0.5rem 0 calc(0.85rem + env(safe-area-inset-bottom, 0px)); +} + +.app-footer__inner { + padding-top: 0.75rem; +} + +h1, h2, h3, h4, h5, h6 { + letter-spacing: -0.015em; + line-height: 1.15; +} + +h1, .h1 { font-size: clamp(1.45rem, 2vw, 1.9rem); } +h2, .h2 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); } +h3, .h3 { font-size: clamp(1.02rem, 1.5vw, 1.2rem); } + +.card, +.modal-content, +.dropdown-menu, +.list-group-item, +.table, +.alert, +.pagination .page-link, +.nav-tabs, +.input-group-text, +.form-control, +.form-select, +.btn, +.progress, +.toast { + border-radius: 12px; +} + +.card, +.modal-content, +.table-responsive, +.alert, +.list-group-item, +.progress, +.toast { + box-shadow: 0 4px 14px rgba(0,0,0,0.12); + backdrop-filter: blur(8px); +} + +.card-header, +.card-footer, +.card-body, +.modal-header, +.modal-body, +.modal-footer { + padding: 0.75rem 0.85rem; +} + +.table > :not(caption) > * > * { + padding: 0.62rem 0.7rem; +} + +.table-responsive table { + min-width: 860px; +} + +.list-group { + gap: 0.5rem; +} + +.list-group-item { + padding: 0.72rem 0.8rem; +} + +.alert { + padding: 0.7rem 0.85rem; + margin-bottom: 0.8rem; +} + +.badge { + font-weight: 600; + padding: 0.38em 0.58em; +} + +.btn { + border-radius: 10px; + font-weight: 600; + padding: 0.52rem 0.8rem; + min-height: 40px; +} + +.btn-sm { + padding: 0.4rem 0.64rem; + min-height: 34px; + border-radius: 9px; +} + +.form-control, +.form-select, +.input-group-text { + min-height: 40px; + padding: 0.5rem 0.72rem; +} + +textarea.form-control { + min-height: 96px; +} + +.progress { + min-height: 0.8rem; +} + +.progress-label { + font-size: 0.72rem; + font-weight: 600; +} + +.nav-tabs { + gap: 0.35rem; + padding: 0.25rem; +} + +.nav-tabs .nav-link { + padding: 0.55rem 0.7rem; + border-radius: 10px; +} + +#items .list-group-item { + border-radius: 12px !important; + padding: 0.75rem 0.8rem; +} + +#items .btn-group { + gap: 0.25rem; +} + +#items .btn-group .btn { + border-radius: 9px !important; +} + +input[type="checkbox"].form-check-input { + width: 2.5rem; + height: 1.35rem; +} + +.large-checkbox { + width: 1.2rem; + height: 1.2rem; +} + +.toast { + padding: 0; +} + +.endpoint-main_page .card h2, +.endpoint-expenses .card h2, +.endpoint-edit_my_list .card h2, +.endpoint-login .card h2, +.endpoint-system_auth .card h2, +.endpoint-admin_panel .card h2, +[class*="endpoint-admin_"] .card h2 { + margin-bottom: 0.35rem; +} + +.endpoint-main_page .card p, +.endpoint-expenses .card p, +.endpoint-edit_my_list .card p, +.endpoint-login .card p, +.endpoint-system_auth .card p, +.endpoint-admin_panel .card p, +[class*="endpoint-admin_"] .card p { + margin-bottom: 0; +} + +@media (max-width: 991.98px) { + .app-navbar .container-xxl { + border-radius: 16px; + padding-top: 0.55rem; + padding-bottom: 0.55rem; + } +} + +@media (max-width: 767.98px) { + body.app-body { + font-size: 0.93rem; + } + + .app-header { + padding-top: 0.25rem; + } + + .app-main { + padding-top: 0.45rem; + } + + .app-navbar .container-xxl { + min-height: 50px; + border-radius: 14px; + } + + .app-brand { + gap: 0.45rem; + font-size: 0.92rem; + } + + .app-brand__icon { + width: 1.9rem; + height: 1.9rem; + border-radius: 10px; + } + + .app-user-chip { + padding: 0.22rem 0.32rem 0.22rem 0.5rem; + } + + .card-header, + .card-footer, + .card-body, + .modal-header, + .modal-body, + .modal-footer, + .list-group-item, + .table > :not(caption) > * > * { + padding-left: 0.68rem; + padding-right: 0.68rem; + } + + .list-group-item, + #items .list-group-item { + padding-top: 0.62rem; + padding-bottom: 0.62rem; + } + + .btn-group, + .d-flex.gap-2, + .d-flex.gap-3 { + gap: 0.35rem !important; + } + + .btn-group > .btn, + .btn.w-100, + .input-group > .btn, + .btn, + .form-control, + .form-select, + .input-group-text { + min-height: 38px; + } + + .input-group { + gap: 0.4rem; + } + + .table-responsive { + border-radius: 12px; + } + + .progress-label { + font-size: 0.66rem; + } + + .app-footer { + padding-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px)); + } +} + +/* === unified UI refresh: forms / tables / admin tools === */ +:root { + --ui-surface-1: rgba(10, 14, 24, 0.78); + --ui-surface-2: rgba(18, 25, 39, 0.92); + --ui-surface-3: rgba(33, 44, 67, 0.88); + --ui-border: rgba(255, 255, 255, 0.12); + --ui-border-strong: rgba(255, 255, 255, 0.18); + --ui-text-soft: rgba(255, 255, 255, 0.72); + --ui-success-soft: rgba(25, 135, 84, 0.18); + --ui-warning-soft: rgba(255, 193, 7, 0.16); +} + +.card, +.table-responsive, +.modal-content, +.dropdown-menu, +.toast, +.alert, +.list-group-item { + border: 1px solid var(--ui-border); +} + +.card.bg-dark, +.modal-content.bg-dark, +.dropdown-menu-dark, +.list-group-item.bg-dark, +.table-dark { + background: linear-gradient(180deg, var(--ui-surface-2), rgba(8, 12, 20, 0.96)) !important; +} + +.card.bg-secondary.bg-opacity-10, +.admin-shortcuts, +#bulkBar .card { + background: linear-gradient(180deg, rgba(22, 29, 45, 0.88), rgba(12, 18, 30, 0.88)) !important; +} + +.form-label, +label.form-label { + display: inline-flex; + align-items: center; + gap: 0.35rem; + margin-bottom: 0.45rem; + font-size: 0.92rem; + font-weight: 600; + color: rgba(255,255,255,0.84); +} + +.form-text, +.text-secondary, +.text-white-50 { + color: var(--ui-text-soft) !important; +} + +.form-control, +.form-select, +.input-group-text, +textarea.form-control, +.form-control-color { + background: rgba(255,255,255,0.04) !important; + border: 1px solid var(--ui-border-strong) !important; + color: #fff !important; + box-shadow: none; + transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .18s ease; +} + +.form-control::placeholder, +textarea.form-control::placeholder { + color: rgba(255,255,255,0.42); +} + +.form-control:focus, +.form-select:focus, +textarea.form-control:focus, +.form-check-input:focus, +.btn:focus, +.btn:focus-visible { + border-color: rgba(25, 135, 84, 0.6) !important; + box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.16) !important; +} + +.input-group > .form-control, +.input-group > .form-select, +.input-group > .btn, +.input-group > .input-group-text { + min-height: 42px; +} + +textarea.form-control { + line-height: 1.45; + resize: vertical; +} + +.form-check { + padding: 0.65rem 0.9rem 0.65rem 2.8rem; + background: rgba(255,255,255,0.04); + border: 1px solid var(--ui-border); + border-radius: 12px; +} + +.form-check.form-switch { + min-height: 42px; +} + +.form-check-input { + background-color: rgba(255,255,255,0.14); + border-color: rgba(255,255,255,0.22); +} + +.btn { + letter-spacing: 0.01em; + transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease; +} + +.btn:hover, +.btn:focus-visible { + transform: translateY(-1px); +} + +.btn-success, +.btn-outline-success, +.btn-outline-light:hover, +.btn-outline-light:focus-visible, +.btn-outline-secondary:hover, +.btn-outline-secondary:focus-visible { + box-shadow: 0 10px 24px rgba(0,0,0,0.16); +} + +.btn-outline-light, +.btn-outline-secondary, +.btn-outline-warning, +.btn-outline-danger, +.btn-outline-success { + background: rgba(255,255,255,0.03); +} + +.btn-outline-light:hover, +.btn-outline-light:focus-visible { + background: rgba(255,255,255,0.1); +} + +.btn-outline-secondary:hover, +.btn-outline-secondary:focus-visible { + background: rgba(108, 117, 125, 0.18); +} + +.btn-outline-warning:hover, +.btn-outline-warning:focus-visible { + background: var(--ui-warning-soft); +} + +.btn-outline-danger:hover, +.btn-outline-danger:focus-visible { + background: rgba(220, 53, 69, 0.16); +} + +.btn-outline-success:hover, +.btn-outline-success:focus-visible { + background: var(--ui-success-soft); +} + +.btn-group-compact, +.admin-shortcuts .d-flex, +.stack-form, +.page-actions { + gap: 0.4rem; +} + +.btn-group-compact .btn { + padding: 0.3rem 0.55rem; + font-size: 0.82rem; +} + +.btn-group-compact .btn-text { + font-size: 0.78rem; +} + +.table-toolbar { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 0.75rem; + margin-bottom: 0.85rem; +} + +.table-toolbar__search { + max-width: 420px; + width: 100%; +} + +.table-toolbar__meta { + min-width: 120px; + text-align: right; +} + +.table { + --bs-table-bg: transparent; + --bs-table-striped-bg: rgba(255,255,255,0.02); + --bs-table-hover-bg: transparent; + --bs-table-border-color: rgba(255,255,255,0.08); + margin-bottom: 0; +} + +.table > :not(caption) > * > * { + border-bottom-width: 1px; + vertical-align: middle; +} + +.table thead th { + position: sticky; + top: 0; + z-index: 1; + background: rgba(11, 17, 28, 0.98) !important; + text-transform: uppercase; + letter-spacing: 0.05em; + font-size: 0.74rem; + color: rgba(255,255,255,0.72); + border-bottom-color: rgba(255,255,255,0.14); +} + +.table tbody tr { + transition: background-color .15s ease, transform .15s ease; +} + +.table tbody tr:hover > * { + background: rgba(255,255,255,0.04) !important; +} + +.table td code, +.api-code-block code { + display: inline-block; + padding: 0.28rem 0.48rem; + border-radius: 8px; + background: rgba(255,255,255,0.08); + color: #d6f5e6; +} + +.api-code-block { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.pagination .page-link { + background: rgba(255,255,255,0.03); + border-color: var(--ui-border); + color: #fff; +} + +.pagination .page-item.active .page-link { + background: rgba(25, 135, 84, 0.95); + border-color: rgba(25, 135, 84, 0.95); +} + +.dropdown-item { + border-radius: 8px; +} + +.dropdown-item:hover, +.dropdown-item:focus { + background: rgba(255,255,255,0.08); +} + +form[data-unsaved-warning="true"].is-dirty { + position: relative; +} + +form[data-unsaved-warning="true"].is-dirty::after { + content: 'Niezapisane zmiany'; + position: sticky; + bottom: 0.75rem; + left: 100%; + display: inline-flex; + margin-top: 1rem; + padding: 0.38rem 0.68rem; + border-radius: 999px; + background: rgba(255, 193, 7, 0.18); + border: 1px solid rgba(255, 193, 7, 0.36); + color: #ffe08a; + font-size: 0.76rem; + font-weight: 700; +} + + +.ui-password-toggle.is-active { + background: rgba(255,255,255,0.1); +} + +.app-content-frame > h2 + .card, +.app-content-frame > .card:first-of-type { + margin-top: 0; +} + +@media (max-width: 767.98px) { + .table-toolbar { + align-items: stretch; + } + + .table-toolbar__meta { + text-align: left; + } + + .admin-shortcuts .btn { + flex: 1 1 calc(50% - 0.55rem); + } + + form[data-unsaved-warning="true"].is-dirty::after { + left: auto; + bottom: auto; + position: static; + margin-top: 0.75rem; + } +} + + +.admin-page-head { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 0.85rem; + flex-wrap: wrap; +} + +[data-admin-nav-body] { + display: flex; +} + +@media (max-width: 767.98px) { + [data-admin-nav-body] { + display: none; + width: 100%; + } + + [data-admin-nav-body].is-open { + display: flex; + } + + .admin-page-head > * { + width: 100%; + } + + .admin-page-head .btn { + width: 100%; + } + + .table-responsive table.table, + .is-admin-area table.table { + min-width: 100%; + } + + .table-responsive table.table thead, + .is-admin-area table.table thead { + display: none; + } + + .table-responsive table.table, + .table-responsive table.table tbody, + .table-responsive table.table tr, + .table-responsive table.table td, + .is-admin-area table.table, + .is-admin-area table.table tbody, + .is-admin-area table.table tr, + .is-admin-area table.table td { + display: block; + width: 100%; + } + + .table-responsive table.table tbody, + .is-admin-area table.table tbody { + display: grid; + gap: 0.8rem; + } + + .table-responsive table.table tr, + .is-admin-area table.table tr { + border: 1px solid rgba(255,255,255,0.08); + border-radius: 16px; + padding: 0.35rem 0.55rem; + background: rgba(255,255,255,0.02); + box-shadow: 0 8px 24px rgba(0,0,0,0.16); + } + + .table-responsive table.table td, + .is-admin-area table.table td { + border: 0; + padding: 0.5rem 0.35rem; + } + + .table-responsive table.table td::before, + .is-admin-area table.table td::before { + content: attr(data-label); + display: block; + margin-bottom: 0.18rem; + font-size: 0.72rem; + text-transform: uppercase; + letter-spacing: 0.04em; + color: rgba(255,255,255,0.58); + } + + .table-responsive table.table td:last-child, + .is-admin-area table.table td:last-child { + padding-bottom: 0.2rem; + } + + .table-responsive table.table td .btn, + .table-responsive table.table td .input-group, + .table-responsive table.table td .form-select, + .table-responsive table.table td .form-control, + .is-admin-area table.table td .btn, + .is-admin-area table.table td .input-group, + .is-admin-area table.table td .form-select, + .is-admin-area table.table td .form-control { + width: 100%; + } + + .table-responsive table.table td .d-flex, + .table-responsive table.table td .btn-group, + .is-admin-area table.table td .d-flex, + .is-admin-area table.table td .btn-group { + flex-wrap: wrap; + } +} + + +.list-action-block .input-group .btn, +.list-action-block .btn, +.endpoint-shared_list .input-group .btn, +.endpoint-shared_list .list-share-page .btn { + min-height: 44px; +} + +.endpoint-shared_list .input-group, +.list-action-block .input-group { + align-items: stretch; +} + +@media (max-width: 767.98px) { + .endpoint-admin_panel .table-responsive table thead { + display: none; + } + .endpoint-admin_panel .table-responsive table, + .endpoint-admin_panel .table-responsive tbody, + .endpoint-admin_panel .table-responsive tr, + .endpoint-admin_panel .table-responsive td { + display: block; + width: 100%; + } + .endpoint-admin_panel .table-responsive tr { + border: 1px solid rgba(255,255,255,.08); + border-radius: 16px; + margin-bottom: 1rem; + padding: .75rem; + background: rgba(255,255,255,.02); + } + .endpoint-admin_panel .table-responsive td { + border: 0; + padding: .35rem 0; + } +} + + +/* responsive fixes 2026-03 */ +.app-navbar .container-xxl {flex-wrap: nowrap; align-items: center;} +.app-navbar__actions {display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-end;} +.app-navbar__actions .btn {white-space: nowrap;} +.table-responsive {overflow-x: clip;} +.table-responsive table {width:100%; min-width:0 !important;} +@media (max-width: 991.98px) { + .app-navbar .container-xxl {display:grid; grid-template-columns:auto 1fr auto; gap:.5rem; align-items:center;} + .app-navbar__meta {display:none;} + .app-brand {min-width:0;} + .app-brand__title,.app-brand__accent {font-size:1rem;} + .app-navbar__actions {max-width:100%; gap:.35rem;} + .app-navbar__actions .btn {padding:.35rem .55rem; font-size:.78rem;} +} +@media (max-width: 430px) { + .app-navbar .container-xxl {grid-template-columns:minmax(0,1fr) auto; } + .app-brand {overflow:hidden;} + .app-brand > span:last-child {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} + .app-navbar__actions {grid-column:1 / -1; justify-content:stretch;} + .app-navbar__actions .btn {flex:1 1 calc(50% - .35rem); text-align:center;} +} +@media (max-width: 767.98px) { + .app-content-frame .table-responsive table.table, + .app-content-frame table.table:not(.keep-horizontal) {display:block; width:100%;} + .app-content-frame .table-responsive table.table thead, + .app-content-frame table.table:not(.keep-horizontal) thead {display:none;} + .app-content-frame .table-responsive table.table tbody, + .app-content-frame .table-responsive table.table tr, + .app-content-frame .table-responsive table.table td, + .app-content-frame table.table:not(.keep-horizontal) tbody, + .app-content-frame table.table:not(.keep-horizontal) tr, + .app-content-frame table.table:not(.keep-horizontal) td {display:block; width:100%;} + .app-content-frame .table-responsive table.table tr, + .app-content-frame table.table:not(.keep-horizontal) tr {border:1px solid var(--dark-300); border-radius:1rem; margin-bottom:.85rem; padding:.35rem .25rem; background:var(--dark-700);} + .app-content-frame .table-responsive table.table td, + .app-content-frame table.table:not(.keep-horizontal) td {border:none; padding:.5rem .75rem; text-align:left !important;} + .app-content-frame .table-responsive table.table td::before, + .app-content-frame table.table:not(.keep-horizontal) td::before {content:attr(data-label); display:block; font-size:.72rem; color:#9ba3aa; margin-bottom:.2rem; text-transform:uppercase;} + .app-content-frame .table-responsive {overflow:visible;} +} + +/* fix: admin tables, api tokens, share page, navbar */ +.admin-table-responsive { + overflow-x: auto !important; + -webkit-overflow-scrolling: touch; +} + + +.admin-table-responsive--wide table { + min-width: 1180px; +} + +.admin-table-responsive--full table { + width: 100% !important; + min-width: 100% !important; + table-layout: auto; +} + +.endpoint-edit_categories .admin-table-responsive--full table th, +.endpoint-edit_categories .admin-table-responsive--full table td, +.endpoint-api_tokens .admin-table-responsive--full table th, +.endpoint-api_tokens .admin-table-responsive--full table td { + white-space: normal; + vertical-align: middle; +} + +.endpoint-edit_categories .admin-table-responsive--full table th:last-child, +.endpoint-edit_categories .admin-table-responsive--full table td:last-child { + width: 30%; +} + +.is-admin-area .table-responsive td, +.is-admin-area .table-responsive th { + white-space: normal; +} + +.api-chip { + display: inline-block; + max-width: 22rem; + padding: .28rem .55rem; + border-radius: .75rem; + background: rgba(255,255,255,.08); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: middle; +} + +.api-chip--wrap { + white-space: normal; + overflow-wrap: anywhere; + word-break: break-word; +} + +.form-check-spaced { + display: flex; + align-items: flex-start; + gap: .7rem; + padding-left: 0; + margin-bottom: .65rem; +} + +.form-check-spaced .form-check-input { + position: static; + margin: .2rem 0 0; + flex: 0 0 auto; +} + +.form-check-spaced .form-check-label { + margin: 0; + line-height: 1.35; +} + +.list-item-actions { + gap: .4rem; + flex-wrap: wrap; + justify-content: flex-end; +} + +.list-item-actions .btn { + border-radius: .8rem !important; + min-width: 2.6rem; +} + +.share-submit-btn { + min-width: 8rem; + font-weight: 600; +} + +.endpoint-list_share .input-group, +.endpoint-shared_list .input-group { + align-items: stretch; +} + +.endpoint-list_share .input-group > .form-control, +.endpoint-list_share .input-group > .btn, +.endpoint-shared_list .input-group > .form-control, +.endpoint-shared_list .input-group > .btn { + min-height: 46px; +} + +.endpoint-list_share .input-group > .btn, +.endpoint-shared_list .input-group > .btn { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; +} + +@media (max-width: 767.98px) { + .table-responsive { + overflow-x: auto !important; + } + + .is-admin-area .table-responsive table.table.keep-horizontal, + .endpoint-api_tokens .table-responsive table.table, + .endpoint-admin_panel .table-responsive table.table, + .endpoint-lists_access .table-responsive table.table, + .endpoint-user_management .table-responsive table.table, + .endpoint-edit_categories .table-responsive table.table { + display: table; + width: max-content; + min-width: 980px !important; + } + + .endpoint-api_tokens .admin-table-responsive--full table.table, + .endpoint-edit_categories .admin-table-responsive--full table.table { + width: 100%; + min-width: 980px !important; + } + + .is-admin-area .table-responsive table.table.keep-horizontal thead, + .endpoint-api_tokens .table-responsive table.table thead, + .endpoint-admin_panel .table-responsive table.table thead, + .endpoint-lists_access .table-responsive table.table thead, + .endpoint-user_management .table-responsive table.table thead { + display: table-header-group; + } + + .is-admin-area .table-responsive table.table.keep-horizontal tbody, + .endpoint-api_tokens .table-responsive table.table tbody, + .endpoint-admin_panel .table-responsive table.table tbody, + .endpoint-lists_access .table-responsive table.table tbody, + .endpoint-user_management .table-responsive table.table tbody { + display: table-row-group; + } + + .is-admin-area .table-responsive table.table.keep-horizontal tr, + .endpoint-api_tokens .table-responsive table.table tr, + .endpoint-admin_panel .table-responsive table.table tr, + .endpoint-lists_access .table-responsive table.table tr, + .endpoint-user_management .table-responsive table.table tr { + display: table-row; + border: 0; + padding: 0; + background: transparent; + box-shadow: none; + } + + .is-admin-area .table-responsive table.table.keep-horizontal td, + .endpoint-api_tokens .table-responsive table.table td, + .endpoint-admin_panel .table-responsive table.table td, + .endpoint-lists_access .table-responsive table.table td, + .endpoint-user_management .table-responsive table.table td { + display: table-cell; + width: auto; + border-top: 1px solid var(--dark-450); + padding: .65rem .75rem; + } + + .endpoint-api_tokens .table-responsive table.table td::before, + .endpoint-admin_panel .table-responsive table.table td::before, + .endpoint-lists_access .table-responsive table.table td::before, + .endpoint-user_management .table-responsive table.table td::before { + display: none; + content: none; + } +} + +@media (max-width: 575.98px) { + .app-navbar .container-xxl { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + } + + .app-navbar__meta { + display: none; + } + + .app-brand { + min-width: 0; + overflow: hidden; + } + + .app-brand > span:last-child { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .app-navbar__actions { + grid-column: 1 / -1; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: .45rem; + width: 100%; + } + + .app-navbar__actions .btn { + width: 100%; + padding: .45rem .5rem; + font-size: .78rem; + } + + .share-submit-btn { + min-width: 6.75rem; + } + + .list-item-actions { + width: 100%; + justify-content: flex-start; + margin-top: .5rem; + } +} + + +/* admin/settings consistency fixes */ +.form-switch-compact .form-check-input { + width: 2.35rem; + height: 1.2rem; + margin-top: .1rem; +} +.form-switch-compact .form-check-label { + padding-top: .02rem; +} +.form-check-spaced { + gap: .45rem; +} +.access-editor .input-group > .form-control, +.access-editor .input-group > .btn { + min-height: 40px; +} +.endpoint-admin_edit_categories .table-responsive, +.endpoint-admin_lists_access .table-responsive, +.endpoint-admin_settings .table-responsive, +.endpoint-list_products .table-responsive { + overflow-x: auto !important; +} +.endpoint-admin_edit_categories .table-responsive table.table.keep-horizontal, +.endpoint-admin_lists_access .table-responsive table.table.keep-horizontal, +.endpoint-list_products .table-responsive table.table.keep-horizontal { + min-width: 1000px !important; +} +.endpoint-admin_edit_categories .app-content-frame, +.endpoint-admin_lists_access .app-content-frame, +.endpoint-admin_settings .app-content-frame, +.endpoint-list_products .app-content-frame { + overflow: visible; +} +@media (max-width: 767.98px) { + .form-switch-compact .form-check-input { width: 2rem; height: 1.05rem; } +} + + +/* v4.1 admin/table/share fixes */ +.admin-table-responsive table { + width: 100%; + min-width: 100%; +} +.admin-table-responsive--wide table, +.table-responsive .keep-horizontal { + width: max-content; + min-width: 100%; +} +.endpoint-admin_panel .admin-table-responsive--wide table { + width: 100%; + min-width: 100%; +} +.endpoint-admin_panel .admin-panel-table th:last-child, +.endpoint-admin_panel .admin-panel-table td:last-child { + width: 1%; + white-space: nowrap; +} +.endpoint-admin_lists_access .admin-table-responsive--wide table { + min-width: 1120px; +} +.endpoint-admin_lists_access .access-editor .tokens { + min-height: 2rem; +} +.endpoint-admin_lists_access .access-editor .token, +.endpoint-admin_edit_my_list .access-editor .token { + max-width: 100%; +} +.endpoint-admin_lists_access .access-editor .token span, +.endpoint-admin_edit_my_list .access-editor .token span { + pointer-events: none; +} +.endpoint-admin_lists_access .mono { + white-space: nowrap; +} +.form-check-spaced { + gap: .35rem; +} +.form-check-spaced .form-check-input, +input[type="checkbox"].form-check-input, +.table-select-checkbox { + width: .95rem !important; + height: .95rem !important; + min-width: .95rem !important; + min-height: .95rem !important; + margin-top: .18rem; +} +.form-switch-compact .form-check-input { + width: 1.8rem !important; + height: .95rem !important; +} +.large-checkbox { + transform: none; + transform-origin: center; +} + +.shopping-item-main > .large-checkbox { + flex: 0 0 1.5em; + align-self: center; +} +.list-item-actions { + display: flex; + align-items: center; + gap: .45rem; + flex-wrap: wrap; +} +.list-item-actions .btn { + min-width: 2.25rem; + padding: .42rem .62rem; +} +.endpoint-list_share .list-group-item, +.endpoint-shared_list .list-group-item { + gap: .75rem; +} +.endpoint-list_share .list-item-actions, +.endpoint-shared_list .list-item-actions { + margin-left: auto; +} +.endpoint-list_share .input-group, +.endpoint-shared_list .input-group { + flex-wrap: nowrap; +} +.endpoint-list_share .input-group > .form-control, +.endpoint-shared_list .input-group > .form-control { + min-width: 0; +} +.endpoint-list_share .share-submit-btn, +.endpoint-shared_list .share-submit-btn { + min-width: 7.25rem; + border-radius: .9rem !important; +} +@media (max-width: 991.98px) { + .endpoint-admin_panel .admin-panel-table { + min-width: 1000px; + } +} +@media (max-width: 767.98px) { + .endpoint-admin_panel .admin-table-responsive--wide table, + .endpoint-admin_lists_access .admin-table-responsive--wide table, + .endpoint-api_tokens .admin-table-responsive--wide table { + width: max-content; + min-width: 980px !important; + } + .endpoint-list_share .input-group, + .endpoint-shared_list .input-group { + flex-wrap: wrap; + } + .endpoint-list_share .share-submit-btn, + .endpoint-shared_list .share-submit-btn { + width: 100%; + } +} +@media (max-width: 430px) { + .app-brand__icon { + width: 2rem; + height: 2rem; + font-size: 1rem; + } + .app-brand__title, .app-brand__accent { + font-size: 1rem; + } + .app-navbar__actions { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .app-navbar__actions .btn { + padding: .38rem .45rem; + font-size: .74rem; + } +} + +.endpoint-admin_api_tokens .admin-table-responsive--wide table { width: 100%; min-width: 100%; } +@media (max-width: 767.98px) { .endpoint-admin_api_tokens .admin-table-responsive--wide table { width:max-content; min-width: 980px !important; } } +.table-responsive { overflow-x: auto; } + + +/* v6 tweaks */ +.create-list-switch, +.hide-purchased-switch { + display: inline-flex; + align-items: center; + gap: .5rem; + padding: .45rem .8rem .45rem 2.35rem; + min-height: 0; + width: auto; + background: rgba(255,255,255,0.04); + border: 1px solid var(--ui-border); + border-radius: 12px; +} +.create-list-switch .form-check-input, +.hide-purchased-switch .form-check-input { + width: 2rem !important; + height: 1rem !important; + margin-top: 0; +} +.create-list-switch .form-check-label, +.hide-purchased-switch .form-check-label { + margin-left: .15rem; +} +.endpoint-admin_lists_access .card > .card-body > .table-responsive, +.endpoint-admin_api_tokens .card > .card-body > .table-responsive { + width: 100%; +} +.endpoint-admin_lists_access .table.keep-horizontal, +.endpoint-admin_api_tokens .table.keep-horizontal { + min-width: 100%; +} + + +/* v7.1 share/main fixes */ +.create-list-checkbox { + align-items: center; + gap: .55rem; +} +.create-list-checkbox .form-check-input { + margin-top: 0; +} +.endpoint-list_share #items .list-group-item, +.endpoint-shared_list #items .list-group-item { + display: flex; + justify-content: space-between; + align-items: center; + gap: .75rem; +} +.endpoint-list_share #items .list-group-item > .d-flex.flex-grow-1, +.endpoint-shared_list #items .list-group-item > .d-flex.flex-grow-1 { + min-width: 0; + flex: 1 1 auto; +} +.endpoint-list_share .list-item-actions, +.endpoint-shared_list .list-item-actions { + flex: 0 0 auto; + margin-left: auto; + justify-content: flex-end; +} +.endpoint-list_share .list-item-actions .btn, +.endpoint-shared_list .list-item-actions .btn { + min-width: 2.5rem; +} +.endpoint-list_share .hide-purchased-switch, +.endpoint-shared_list .hide-purchased-switch { + align-items: center; +} +.endpoint-list_share .hide-purchased-switch .form-check-input, +.endpoint-shared_list .hide-purchased-switch .form-check-input { + margin-top: 0; +} +@media (max-width: 767.98px) { + .endpoint-list_share #items .list-group-item, + .endpoint-shared_list #items .list-group-item { + align-items: flex-start; + } + .endpoint-list_share .list-item-actions, + .endpoint-shared_list .list-item-actions { + width: 100%; + margin-left: 0; + justify-content: flex-start; + } +} + + +/* v9.1 switch and share consistency fixes */ +.create-list-input-group > .form-control { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} +.create-list-input-group > #tempToggle { + min-width: 9.75rem; + font-weight: 600; + white-space: nowrap; +} +.hide-purchased-switch.form-check { + display: inline-flex; + align-items: center; + gap: .7rem; + padding: .55rem .95rem; + padding-left: .95rem; + border-radius: 14px; + background: rgba(255,255,255,.04); + border: 1px solid var(--ui-border); +} +.hide-purchased-switch .form-check-input { + flex: 0 0 auto; + float: none; + width: 2.9em !important; + height: 1.5em !important; + margin: 0 !important; + cursor: pointer; +} +.hide-purchased-switch .form-check-label { + margin: 0 !important; + white-space: nowrap; + cursor: pointer; +} + +.endpoint-list_share .list-item-actions, +.endpoint-shared_list .list-item-actions { + gap: .5rem; +} + +.endpoint-list_share .list-item-actions .btn, +.endpoint-shared_list .list-item-actions .btn { + min-width: 2.75rem; + min-height: 2.5rem; + padding: .5rem .72rem; +} + +.endpoint-list_share .app-navbar__actions .btn, +.endpoint-shared_list .app-navbar__actions .btn { + border-radius: .9rem !important; +} + +/* unified bootstrap-like switches */ +.switch-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: .8rem; +} + +.form-check.form-switch.app-switch { + display: inline-flex; + align-items: center; + gap: .75rem; + min-height: auto; + margin: 0; + padding: .72rem .95rem; + padding-left: .95rem; + background: rgba(255,255,255,.04); + border: 1px solid var(--ui-border); + border-radius: 14px; +} + +.form-check.form-switch.app-switch .form-check-input { + float: none; + flex: 0 0 auto; + width: 2.9em !important; + height: 1.55em !important; + margin: 0 !important; + cursor: pointer; + background-color: var(--dark-400) !important; + border-color: var(--dark-300) !important; +} + +.form-check.form-switch.app-switch .form-check-input:checked { + background-color: var(--primary) !important; + border-color: var(--primary-border) !important; +} + +.form-check.form-switch.app-switch .form-check-input:focus { + box-shadow: 0 0 0 .18rem rgba(24, 64, 118, .22) !important; +} + +.form-check.form-switch.app-switch .form-check-label { + margin: 0 !important; + line-height: 1.35; + cursor: pointer; +} + +.form-check.form-switch.app-switch.form-switch-compact { + width: 100%; + justify-content: flex-start; +} + +.form-check.form-switch.app-switch.form-switch-compact .form-check-input { + width: 2.9em !important; + height: 1.55em !important; +} + +.hide-purchased-switch.form-check.app-switch { + width: auto; +} + +.endpoint-edit_my_list .switch-grid .app-switch, +.endpoint-admin_edit_list .switch-grid .app-switch { + width: 100%; +} + +/* consolidation pass 2026-03-30: merged safe duplicates and overlapping hotfixes */ +/* final UX polish 2026-03-14 */ +:root { + --nav-btn-height: 2.8rem; +} + +.app-navbar .container-xxl { + display: flex; + align-items: center; + justify-content: space-between; + gap: .8rem; + row-gap: .55rem; + flex-wrap: nowrap; +} + +.app-navbar__actions { + display: flex; + align-items: stretch; + justify-content: flex-end; + gap: .5rem; + flex-wrap: nowrap; + min-width: 0; +} + +.app-navbar__actions .btn, +.app-nav-action { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 0; + min-height: var(--nav-btn-height); + padding: .6rem .95rem; + white-space: nowrap; + line-height: 1; +} + +.app-navbar__actions .btn > span, +.app-nav-action > span { + display: inline-flex; + align-items: center; +} + +.form-check.form-switch.app-switch { + min-height: 3.2rem; + padding: .78rem 1rem; + border-radius: 16px; +} + +.form-check.form-switch.app-switch .form-check-input { + width: 3.15em !important; + height: 1.7em !important; + background-position: left center; +} + +.form-check.form-switch.app-switch .form-check-label { + display: inline-flex; + align-items: center; + min-height: 1.7rem; + font-weight: 500; +} + +.hide-purchased-switch.form-check.app-switch { + width: auto; + max-width: 100%; +} + +.endpoint-edit_my_list .switch-grid { + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); +} + +.endpoint-edit_my_list .switch-grid .app-switch, +.endpoint-admin_edit_list .switch-grid .app-switch { + width: 100%; + min-height: 3.35rem; +} + +/* boxed checks in api token form */ +.endpoint-admin_api_tokens .stack-form .form-check-spaced, +.endpoint-api_tokens .stack-form .form-check-spaced { + align-items: center; + gap: .85rem; + margin: 0 0 .72rem; + padding: .75rem .9rem; + border: 1px solid var(--ui-border); + border-radius: 14px; + background: rgba(255,255,255,.04); +} + +.endpoint-admin_api_tokens .stack-form .form-check-spaced .form-check-input, +.endpoint-api_tokens .stack-form .form-check-spaced .form-check-input { + margin: 0; +} + +.endpoint-admin_api_tokens .stack-form .form-check-spaced .form-check-label, +.endpoint-api_tokens .stack-form .form-check-spaced .form-check-label { + flex: 1 1 auto; +} + +/* admin tables full width on desktop, scroll only on smaller screens */ +.endpoint-admin_panel .table-responsive, +.endpoint-admin_lists_access .table-responsive { + overflow-x: auto; +} + +.endpoint-admin_panel .table-responsive > table.table, +.endpoint-admin_lists_access .table-responsive > table.table { + width: 100% !important; + min-width: 100% !important; + table-layout: auto; +} + +.endpoint-admin_lists_access td:nth-child(6) { + min-width: 19rem; +} + +.endpoint-admin_lists_access td:nth-child(6) > .d-flex, +.endpoint-admin_lists_access td:nth-child(6) > .text-warning { + width: 100%; +} + +.endpoint-admin_lists_access td:nth-child(6) > .text-warning { + display: block; +} + +/* ========================================================= + Share page toolbar and shared-list header actions +========================================================= */ +.share-page-toolbar { + display: flex; + align-items: center; + justify-content: flex-end; + gap: .75rem; + width: 100%; +} + +.share-page-toolbar__spacer { + flex: 1 1 auto; +} + +.share-page-toolbar .form-check { + margin-bottom: 0; +} + +.endpoint-list_share .app-navbar__actions, +.endpoint-shared_list .app-navbar__actions { + align-items: stretch; +} + +.endpoint-list_share .app-navbar__actions .btn, +.endpoint-shared_list .app-navbar__actions .btn { + min-height: var(--nav-btn-height); +} + +@media (max-width: 991.98px) { + .app-navbar .container-xxl { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + gap: .6rem; + } + + .app-navbar__meta { + display: none; + } + + .app-brand { + min-width: 0; + overflow: hidden; + } + + .app-brand > span:last-child { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .app-navbar__actions { + grid-column: 1 / -1; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: .45rem; + width: 100%; + } + + .app-navbar__actions .btn, + .app-nav-action { + width: 100%; + padding: .55rem .6rem; + } + + .endpoint-admin_panel .table-responsive > table.table, + .endpoint-admin_lists_access .table-responsive > table.table { + width: max-content !important; + min-width: 980px !important; + } +} + +@media (max-width: 767.98px) { + .share-page-toolbar { + justify-content: stretch; + } + + .share-page-toolbar__spacer { + display: none; + } + + .hide-purchased-switch { + padding-left: 2.95rem; + } + + .hide-purchased-switch.form-check.app-switch { + width: 100%; + } + + .switch-grid, + .endpoint-edit_my_list .switch-grid { + grid-template-columns: 1fr; + } +} + + +/* final polish v2 */ +:root { + --nav-btn-height: 2.35rem; +} + +.app-navbar__actions { + gap: .4rem; +} + +.app-navbar__actions .btn, +.app-nav-action { + min-height: var(--nav-btn-height); + padding: .42rem .78rem; + font-size: .92rem; + border-radius: .9rem !important; +} + +.form-check.form-switch.app-switch { + min-height: 2.95rem; + padding: .65rem .9rem; +} + +.form-check.form-switch.app-switch .form-check-input { + width: 2.75em !important; + height: 1.45em !important; + transition: background-position .18s ease-in-out, background-color .18s ease-in-out, border-color .18s ease-in-out, box-shadow .18s ease-in-out !important; +} + +.form-check.form-switch.app-switch .form-check-label { + min-height: 1.45rem; +} + +.endpoint-admin_templates .table-responsive { + overflow-x: auto; +} + +.endpoint-admin_templates .table-responsive > table.table { + width: 100% !important; + min-width: 100% !important; + table-layout: auto; +} + +@media (max-width: 991.98px) { + .app-navbar__actions .btn, + .app-nav-action { + font-size: .86rem; + padding: .48rem .6rem; + } + + .endpoint-admin_templates .table-responsive > table.table { + width: max-content !important; + min-width: 900px !important; + } +} + + +/* responsive mobile category badges + smaller animated switches */ +.mobile-list-heading { + width: 100%; + min-width: 0; + max-width: 100%; + justify-content: flex-start; +} + +.mobile-list-heading__title { + min-width: 0; +} + +.mobile-category-badges { + display: inline-flex; + align-items: center; + gap: .3rem; + min-width: 0; + max-width: 100%; +} + +.mobile-category-badge { + display: inline-flex; + align-items: center; + justify-content: center; + font-size: .68rem; + line-height: 1; + padding: .26rem .52rem; + opacity: .95; +} + +.mobile-category-badge__dot { + display: none; + width: .55rem; + height: .55rem; + border-radius: 999px; + background: currentColor; +} + +.mobile-category-badges.is-compact .mobile-category-badge { + width: .9rem; + min-width: .9rem; + height: .9rem; + padding: 0; + border-radius: 999px; +} + +.mobile-category-badges.is-compact .mobile-category-badge__text { + display: none; +} + +.mobile-category-badges.is-compact .mobile-category-badge__dot { + display: block; +} + +.form-check.form-switch.app-switch { + min-height: 2.75rem; + padding: .58rem .82rem; +} + +.form-check.form-switch.app-switch .form-check-input, +.hide-purchased-switch .form-check-input { + width: 2.45em !important; + height: 1.3em !important; + background-position: left center !important; + transition: background-position .18s ease-in-out, background-color .18s ease-in-out, border-color .18s ease-in-out, box-shadow .18s ease-in-out !important; +} + +.form-check.form-switch.app-switch .form-check-input:checked, +.hide-purchased-switch .form-check-input:checked { + background-position: right center !important; +} + +.form-check.form-switch.app-switch .form-check-label { + min-height: 1.3rem; +} + +.hide-purchased-switch.form-check.app-switch { + padding: .5rem .82rem; +} + +@media (max-width: 576px) { + .mobile-list-heading { + display: inline-flex; + max-width: 100%; + } + + .mobile-list-heading__title { + max-width: 100%; + } +} + + +.endpoint-main_page .list-group-item > .main-list-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.75rem; + width: 100%; + flex-wrap: nowrap; +} + +.endpoint-main_page .list-main-meta { + min-width: 0; + flex: 1 1 auto; +} + +.endpoint-main_page .list-main-title { + display: flex; + align-items: center; + align-content: center; + flex-wrap: wrap; + gap: 0.15rem; + min-width: 0; + line-height: 1; +} + +.endpoint-main_page .list-main-actions { + flex: 0 0 auto; + align-self: center; +} + +@media (max-width: 575.98px) { + .endpoint-main_page .list-group-item > .main-list-row { + flex-direction: column; + align-items: stretch; + } + + .endpoint-main_page .list-main-actions { + width: 100%; + } +} + +/* mobile UX fixes 2026-03-14 */ +.list-main-title__link { + min-width: 0; + display: inline-flex; + align-items: center; + align-content: center; + flex-wrap: wrap; + gap: .15rem; + line-height: 1; +} + +.shopping-item-row { + gap: .75rem; +} + +.shopping-item-main { + min-width: 0; + flex: 1 1 auto; + flex-wrap: wrap; +} + +.shopping-item-main span[id^="name-"] { + min-width: 0; +} + +.shopping-item-actions { + flex: 0 0 auto; + margin-left: auto; + align-self: flex-start; +} + +.shopping-compact-input-group { + flex-wrap: nowrap !important; + align-items: stretch; +} + +.shopping-qty-input { + flex: 0 0 4.5rem; + max-width: 4.5rem; +} + +.shopping-compact-submit { + flex: 0 0 auto; + width: auto; + white-space: nowrap; +} + + +@media (max-width: 991.98px) { + .app-navbar__actions { + grid-template-columns: repeat(auto-fit, minmax(8.25rem, max-content)); + justify-content: end; + } + + .app-navbar__actions .btn, + .app-nav-action { + width: auto; + min-width: 8.25rem; + justify-self: end; + } +} + +@media (max-width: 575.98px) { + .endpoint-main_page .list-group-item > .main-list-row { + flex-direction: row; + align-items: center; + } + + .endpoint-main_page .list-main-actions { + width: auto; + margin-left: auto; + } + + .endpoint-main_page .list-main-actions .btn { + padding: .38rem .52rem; + min-width: 2.35rem; + } + + .endpoint-main_page .list-main-title { + display: flex; + flex-wrap: wrap; + gap: .15rem; + } + + .endpoint-main_page .list-main-meta { + flex: 1 1 auto; + min-width: 0; + } + + .endpoint-main_page .list-main-title__link { + min-width: 0; + max-width: 100%; + } + + .shopping-item-row { + align-items: flex-start !important; + } + + .shopping-item-actions { + width: auto; + margin-top: 0; + margin-left: auto; + justify-content: flex-end; + } + + .shopping-item-actions .btn { + min-width: 2.35rem; + padding: .38rem .52rem; + } + + .shopping-compact-input-group { + display: flex; + } + + .shopping-compact-input-group > .form-control { + min-width: 0; + } + + .shopping-qty-input { + flex-basis: 4rem; + max-width: 4rem; + } + + .shopping-compact-submit { + min-width: auto; + padding-left: .8rem; + padding-right: .8rem; + } + + .ui-password-group > .ui-password-toggle { + min-width: 2.75rem; + padding-left: .7rem; + padding-right: .7rem; + } +} + + +/* UX refactor 2026-03-14 b */ +.app-navbar-toggler { + border-color: rgba(255,255,255,.28); + padding: .3rem .55rem; +} + +.app-navbar-toggler:focus { + box-shadow: 0 0 0 .2rem rgba(255,255,255,.1); +} + +.app-navbar-toggler .navbar-toggler-icon { + filter: invert(1) grayscale(1); +} + +#createListTempToggle, +.create-list-temp-toggle { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; +} + +.create-list-input-group > .form-control { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.create-list-input-group > .create-list-temp-toggle { + background: transparent; + white-space: nowrap; +} + +.list-toolbar { + width: 100%; +} + +.list-toolbar--share { + justify-content: flex-end; +} + +.hide-purchased-switch--minimal { + border: 0; + background: transparent; + padding: 0; + margin-left: auto; +} + +.shopping-item-row { + padding: .8rem .95rem; +} + +.shopping-item-main { + display: flex; + align-items: center; + gap: .75rem; + width: 100%; +} + +.shopping-item-content { + flex: 1 1 auto; + min-width: 0; +} + +.shopping-item-head { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: .75rem; +} + +.shopping-item-text { + min-width: 0; + display: flex; + align-items: center; + gap: .35rem; + flex-wrap: wrap; +} + +.shopping-item-name { + min-width: 0; + overflow-wrap: break-word; + word-break: normal; +} + +.shopping-item-text .info-line { + flex-basis: 100%; + margin-top: .1rem; + overflow-wrap: break-word; + word-break: normal; +} + +.shopping-item-actions { + display: inline-flex; + flex-wrap: nowrap; + gap: .35rem; +} + +.shopping-product-input-group > .shopping-product-name-input, +.shopping-expense-input-group > .shopping-expense-amount-input { + flex: 1 1 auto; +} + +.shopping-product-input-group > .shopping-qty-input { + flex: 0 0 4.5rem; + max-width: 4.5rem; + text-align: center; +} + +.shopping-expense-input-group > .shopping-compact-submit, +.shopping-product-input-group > .shopping-compact-submit { + flex: 0 0 auto; +} + +.endpoint-list .shopping-product-input-group > .shopping-compact-submit, +.endpoint-list_share .shopping-product-input-group > .shopping-compact-submit, +.endpoint-shared_list .shopping-product-input-group > .shopping-compact-submit, +.endpoint-list .shopping-expense-input-group > .shopping-compact-submit, +.endpoint-list_share .shopping-expense-input-group > .shopping-compact-submit, +.endpoint-shared_list .shopping-expense-input-group > .shopping-compact-submit { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; + border-top-right-radius: .9rem !important; + border-bottom-right-radius: .9rem !important; + margin-left: 0; +} + +.endpoint-list .shopping-product-input-group, +.endpoint-list_share .shopping-product-input-group, +.endpoint-shared_list .shopping-product-input-group, +.endpoint-list .shopping-expense-input-group, +.endpoint-list_share .shopping-expense-input-group, +.endpoint-shared_list .shopping-expense-input-group { + flex-wrap: nowrap; +} + +@media (max-width: 991.98px) { + .navbar-collapse .app-navbar__actions { + padding-top: .6rem; + justify-content: flex-end; + } +} + +@media (max-width: 575.98px) { + .app-navbar__actions { + width: 100%; + justify-content: flex-end; + } + + .app-navbar__actions .btn, + .app-nav-action { + min-width: 0; + width: auto; + } + + .shopping-item-main { + gap: .55rem; + } + + .shopping-item-head { + gap: .45rem; + } + + .shopping-item-actions { + margin-left: auto; + align-self: flex-start; + } + + .shopping-item-actions .btn { + min-width: 2.2rem; + padding: .34rem .48rem; + } + + .shopping-product-input-group > .shopping-product-name-input, + .shopping-expense-input-group > .shopping-expense-amount-input { + flex: 0 0 60%; + min-width: 0; + } + + .shopping-product-input-group > .shopping-qty-input { + flex: 0 0 15%; + max-width: 15%; + min-width: 0; + } + + .shopping-product-input-group > .shopping-compact-submit { + flex: 0 0 25%; + width: 25%; + min-width: 0; + padding-left: .55rem; + padding-right: .55rem; + font-size: .95rem; + } + + .shopping-expense-input-group > .shopping-compact-submit { + padding-left: .7rem; + padding-right: .7rem; + } + + .list-toolbar { + align-items: flex-start !important; + } + + .list-toolbar__sort { + flex: 0 0 auto; + } + + .hide-purchased-switch--minimal { + font-size: .95rem; + } +} + + +/* UX tweak 2026-03-14 c: hamburger with full labels */ +@media (max-width: 991.98px) { + .navbar-collapse .app-navbar__actions { + width: 100%; + display: flex; + flex-direction: column; + align-items: stretch; + gap: .5rem; + } + + .navbar-collapse .app-navbar__actions .btn, + .navbar-collapse .app-nav-action { + width: 100%; + min-width: 0; + justify-content: flex-start; + text-align: left; + padding-left: .9rem; + padding-right: .9rem; + } + + .navbar-collapse .app-navbar__actions .btn > span, + .navbar-collapse .app-nav-action > span { + display: inline !important; + } +} + + +/* form input/button unification fix 2026-03-15 */ +.endpoint-list .shopping-product-input-group, +.endpoint-list_share .shopping-product-input-group, +.endpoint-shared_list .shopping-product-input-group, +.endpoint-list .shopping-expense-input-group, +.endpoint-list_share .shopping-expense-input-group, +.endpoint-shared_list .shopping-expense-input-group { + display: flex; + flex-wrap: nowrap !important; + align-items: stretch; + gap: 0 !important; +} + +.endpoint-list .shopping-product-input-group > .form-control, +.endpoint-list_share .shopping-product-input-group > .form-control, +.endpoint-shared_list .shopping-product-input-group > .form-control, +.endpoint-list .shopping-expense-input-group > .form-control, +.endpoint-list_share .shopping-expense-input-group > .form-control, +.endpoint-shared_list .shopping-expense-input-group > .form-control, +.endpoint-list .shopping-product-input-group > .btn, +.endpoint-list_share .shopping-product-input-group > .btn, +.endpoint-shared_list .shopping-product-input-group > .btn, +.endpoint-list .shopping-expense-input-group > .btn, +.endpoint-list_share .shopping-expense-input-group > .btn, +.endpoint-shared_list .shopping-expense-input-group > .btn { + position: relative; + min-height: 46px; + box-shadow: none; +} + +.endpoint-list .shopping-product-input-group > .shopping-product-name-input, +.endpoint-list_share .shopping-product-input-group > .shopping-product-name-input, +.endpoint-shared_list .shopping-product-input-group > .shopping-product-name-input, +.endpoint-list .shopping-expense-input-group > .shopping-expense-amount-input, +.endpoint-list_share .shopping-expense-input-group > .shopping-expense-amount-input, +.endpoint-shared_list .shopping-expense-input-group > .shopping-expense-amount-input { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +.endpoint-list .shopping-product-input-group > .shopping-qty-input, +.endpoint-list_share .shopping-product-input-group > .shopping-qty-input, +.endpoint-shared_list .shopping-product-input-group > .shopping-qty-input { + border-radius: 0 !important; + border-left-width: 0 !important; +} + +.endpoint-list .shopping-product-input-group > .shopping-compact-submit, +.endpoint-list_share .shopping-product-input-group > .shopping-compact-submit, +.endpoint-shared_list .shopping-product-input-group > .shopping-compact-submit, +.endpoint-list .shopping-expense-input-group > .shopping-compact-submit, +.endpoint-list_share .shopping-expense-input-group > .shopping-compact-submit, +.endpoint-shared_list .shopping-expense-input-group > .shopping-compact-submit { + display: inline-flex; + align-items: center; + justify-content: center; + gap: .35rem; + margin-left: 0 !important; + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; + border-top-right-radius: .9rem !important; + border-bottom-right-radius: .9rem !important; + border-left-width: 0 !important; +} + +.endpoint-list .shopping-product-input-group > .shopping-compact-submit, +.endpoint-list .shopping-expense-input-group > .shopping-compact-submit, +.endpoint-list_share .shopping-product-input-group > .shopping-compact-submit, +.endpoint-list_share .shopping-expense-input-group > .shopping-compact-submit, +.endpoint-shared_list .shopping-product-input-group > .shopping-compact-submit, +.endpoint-shared_list .shopping-expense-input-group > .shopping-compact-submit, +.endpoint-list .share-submit-btn, +.endpoint-list_share .share-submit-btn, +.endpoint-shared_list .share-submit-btn { + min-width: 7.25rem; +} + +.shopping-btn-icon { + line-height: 1; +} + +.shopping-btn-label { + line-height: 1; +} + +@media (max-width: 767.98px) { + .endpoint-list .shopping-product-input-group, + .endpoint-list_share .shopping-product-input-group, + .endpoint-shared_list .shopping-product-input-group, + .endpoint-list .shopping-expense-input-group, + .endpoint-list_share .shopping-expense-input-group, + .endpoint-shared_list .shopping-expense-input-group { + width: 100%; + } + + .endpoint-list .shopping-product-input-group > .shopping-product-name-input, + .endpoint-list_share .shopping-product-input-group > .shopping-product-name-input, + .endpoint-shared_list .shopping-product-input-group > .shopping-product-name-input { + flex: 0 0 60% !important; + max-width: 60% !important; + min-width: 0; + } + + .endpoint-list .shopping-product-input-group > .shopping-qty-input, + .endpoint-list_share .shopping-product-input-group > .shopping-qty-input, + .endpoint-shared_list .shopping-product-input-group > .shopping-qty-input { + flex: 0 0 15% !important; + max-width: 15% !important; + min-width: 0; + padding-left: .35rem; + padding-right: .35rem; + } + + .endpoint-list .shopping-product-input-group > .shopping-compact-submit, + .endpoint-list_share .shopping-product-input-group > .shopping-compact-submit, + .endpoint-shared_list .shopping-product-input-group > .shopping-compact-submit { + flex: 0 0 25% !important; + width: 25% !important; + min-width: 0 !important; + padding-left: .4rem; + padding-right: .4rem; + } + + .endpoint-list .shopping-expense-input-group > .shopping-expense-amount-input, + .endpoint-list_share .shopping-expense-input-group > .shopping-expense-amount-input, + .endpoint-shared_list .shopping-expense-input-group > .shopping-expense-amount-input { + flex: 1 1 auto !important; + min-width: 0; + } + + .endpoint-list .shopping-expense-input-group > .shopping-compact-submit, + .endpoint-list_share .shopping-expense-input-group > .shopping-compact-submit, + .endpoint-shared_list .shopping-expense-input-group > .shopping-compact-submit { + flex: 0 0 5rem !important; + width: 5rem !important; + min-width: 5rem !important; + padding-left: .35rem; + padding-right: .35rem; + } + + .endpoint-list .shopping-product-input-group > .shopping-compact-submit .shopping-btn-label, + .endpoint-list_share .shopping-product-input-group > .shopping-compact-submit .shopping-btn-label, + .endpoint-shared_list .shopping-product-input-group > .shopping-compact-submit .shopping-btn-label, + .endpoint-list .shopping-expense-input-group > .shopping-compact-submit .shopping-btn-label, + .endpoint-list_share .shopping-expense-input-group > .shopping-compact-submit .shopping-btn-label, + .endpoint-shared_list .shopping-expense-input-group > .shopping-compact-submit .shopping-btn-label { + display: none; + } + + .endpoint-list .shopping-product-input-group > .shopping-compact-submit .shopping-btn-icon, + .endpoint-list_share .shopping-product-input-group > .shopping-compact-submit .shopping-btn-icon, + .endpoint-shared_list .shopping-product-input-group > .shopping-compact-submit .shopping-btn-icon, + .endpoint-list .shopping-expense-input-group > .shopping-compact-submit .shopping-btn-icon, + .endpoint-list_share .shopping-expense-input-group > .shopping-compact-submit .shopping-btn-icon, + .endpoint-shared_list .shopping-expense-input-group > .shopping-compact-submit .shopping-btn-icon { + margin: 0; + font-size: 1rem; + } +} + + +/* endpoint fix for /list route */ +.endpoint-view_list .shopping-product-input-group, +.endpoint-view_list .shopping-expense-input-group { + display: flex; + flex-wrap: nowrap !important; + align-items: stretch; + gap: 0 !important; + width: 100%; +} + +.endpoint-view_list .shopping-product-input-group > .form-control, +.endpoint-view_list .shopping-expense-input-group > .form-control, +.endpoint-view_list .shopping-product-input-group > .btn, +.endpoint-view_list .shopping-expense-input-group > .btn { + position: relative; + min-height: 46px; + box-shadow: none; +} + +.endpoint-view_list .shopping-product-input-group > .shopping-product-name-input, +.endpoint-view_list .shopping-expense-input-group > .shopping-expense-amount-input { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +.endpoint-view_list .shopping-product-input-group > .shopping-qty-input { + border-radius: 0 !important; + border-left-width: 0 !important; +} + +.endpoint-view_list .shopping-product-input-group > .shopping-compact-submit, +.endpoint-view_list .shopping-expense-input-group > .shopping-compact-submit, +.endpoint-view_list .share-submit-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: .35rem; + margin-left: 0 !important; + min-width: 7.25rem; + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; + border-top-right-radius: .9rem !important; + border-bottom-right-radius: .9rem !important; + border-left-width: 0 !important; +} + +@media (max-width: 767.98px) { + .endpoint-view_list .shopping-product-input-group > .shopping-product-name-input { + flex: 0 0 60% !important; + max-width: 60% !important; + min-width: 0; + } + + .endpoint-view_list .shopping-product-input-group > .shopping-qty-input { + flex: 0 0 15% !important; + max-width: 15% !important; + min-width: 0; + padding-left: .35rem; + padding-right: .35rem; + } + + .endpoint-view_list .shopping-product-input-group > .shopping-compact-submit { + flex: 0 0 25% !important; + width: 25% !important; + min-width: 0 !important; + padding-left: .4rem; + padding-right: .4rem; + } + + .endpoint-view_list .shopping-expense-input-group > .shopping-expense-amount-input { + flex: 1 1 auto !important; + min-width: 0; + } + + .endpoint-view_list .shopping-expense-input-group > .shopping-compact-submit { + flex: 0 0 5rem !important; + width: 5rem !important; + min-width: 5rem !important; + padding-left: .35rem; + padding-right: .35rem; + } + + .endpoint-view_list .shopping-product-input-group > .shopping-compact-submit .shopping-btn-label, + .endpoint-view_list .shopping-expense-input-group > .shopping-compact-submit .shopping-btn-label { + display: none; + } + + .endpoint-view_list .shopping-product-input-group > .shopping-compact-submit .shopping-btn-icon, + .endpoint-view_list .shopping-expense-input-group > .shopping-compact-submit .shopping-btn-icon { + margin: 0; + font-size: 1rem; + } +} + +/* --- JS render + progress bar consistency patch --- */ +#progress-bar-purchased { + background: linear-gradient(135deg, rgba(39,208,125,0.96), rgba(22,150,91,0.98)) !important; +} + +#progress-bar-not-purchased { + background: linear-gradient(135deg, rgba(246,196,83,0.96), rgba(224,164,26,0.98)) !important; +} + +#progress-bar-remaining { + background: rgba(255,255,255,0.08) !important; +} + + +/* ========================================================= + Shopping item rows: shared base alignment + mobile fixes +========================================================= */ +/* v10.2 item row consistency and mobile share fixes */ +.shopping-item-text { + line-height: 1.35; +} + +.shopping-item-text .info-line { + display: inline; + flex-basis: auto; + margin-top: 0; + white-space: normal; +} + +.shopping-item-text .info-line > span { + display: inline; +} + +.shopping-item-text .item-added-by-meta { + color: currentColor; + opacity: .72; + font-size: .92em; +} + +.shopping-item-text .item-added-by-meta b { + font-weight: 600; +} + +.shopping-item-name, +.shopping-item-text .info-line { + overflow-wrap: break-word; + word-break: normal; +} + +.shopping-item-actions { + flex: 0 0 auto; +} + +@media (max-width: 575.98px) { + .shopping-item-head { + flex-wrap: wrap; + align-items: flex-start; + } + + .shopping-item-text { + flex: 1 1 100%; + min-width: 0; + } + + .shopping-item-actions { + width: 100%; + margin-left: 0; + justify-content: flex-end; + } +} + + +/* v10.3 alignment fixes for list/share */ +.hide-purchased-switch--right { + display: inline-flex !important; + align-items: center; + justify-content: flex-end; + gap: .6rem; + width: auto; + margin-left: auto; + padding: 0 !important; + border: 0 !important; + background: transparent !important; + box-shadow: none !important; +} + +.hide-purchased-switch--right::before, +.hide-purchased-switch--right::after { + display: none !important; +} + +.hide-purchased-switch--right .form-check-input { + order: 1; + margin: 0; + float: none; + flex: 0 0 auto; +} + +.hide-purchased-switch--right .form-check-label { + order: 0; + margin: 0 !important; + white-space: nowrap; +} + +.list-action-row { + display: flex; + flex-wrap: nowrap; + align-items: stretch; + gap: .65rem; +} + +.list-action-row__form { + display: flex; + flex: 1 1 50%; +} + +.list-action-row__btn { + width: 100%; +} + +.list-action-row > .list-action-row__btn { + flex: 1 1 50%; +} + +.shopping-item-head { + flex-wrap: nowrap; + align-items: center; +} + +.shopping-item-text { + flex: 1 1 auto; + min-width: 0; +} + +.shopping-item-text .info-line { + flex-basis: auto; +} + +.shopping-item-actions { + align-items: center; + justify-content: flex-end; + flex: 0 0 auto; + white-space: nowrap; +} + +.shopping-item-actions .btn { + flex: 0 0 auto; +} + +@media (max-width: 575.98px) { + .shopping-item-main { + align-items: center; + } + + .shopping-item-head { + flex-wrap: nowrap; + align-items: center; + gap: .4rem; + } + + .shopping-item-text { + flex: 1 1 auto; + min-width: 0; + gap: .25rem; + } + + .shopping-item-actions { + width: auto; + margin-left: auto; + gap: .25rem; + } + + .shopping-item-actions .btn { + min-width: 2rem; + padding: .3rem .42rem; + } + + .hide-purchased-switch--right { + width: auto; + max-width: 100%; + } + + .list-action-row { + gap: .5rem; + } + + .list-action-row > .list-action-row__btn, + .list-action-row__form { + flex: 1 1 50%; + min-width: 0; + } + + .list-action-row__btn { + padding-left: .55rem; + padding-right: .55rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + + +/* layout polish 2026-03-15: toolbar, sorting and item alignment */ +.list-header-toolbar { + width: 100%; +} + +.list-header-toolbar > h2 { + flex: 1 1 auto; + min-width: 0; +} + +.list-header-toolbar .list-toolbar { + flex: 0 0 auto; + width: auto; + margin-left: auto; +} + +.list-toolbar__sort.btn { + display: inline-flex; + align-items: center; + justify-content: center; + white-space: nowrap; + border-width: 1px !important; +} + +.drag-handle { + display: none !important; + cursor: grab; +} + +body.sorting-active .drag-handle { + display: inline-flex !important; +} + +body.sorting-active .shopping-item-row { + cursor: grab; +} + +body.sorting-active .shopping-item-row:active, +body.sorting-active .drag-handle:active { + cursor: grabbing; +} + +body.sorting-active .shopping-item-row .large-checkbox { + pointer-events: none; +} + +.endpoint-list_share .shopping-item-name, +.endpoint-list_share .shopping-item-text .info-line, +.endpoint-shared_list .shopping-item-name, +.endpoint-shared_list .shopping-item-text .info-line { + overflow-wrap: break-word; + word-break: normal; +} + +.endpoint-list_share input[type="checkbox"].large-checkbox::before, +.endpoint-shared_list input[type="checkbox"].large-checkbox::before, +.endpoint-view_list input[type="checkbox"].large-checkbox::before { + font-size: 1.7em; +} + +@media (max-width: 575.98px) { + .endpoint-view_list .list-toolbar { + display: grid !important; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center !important; + gap: .4rem !important; + flex-wrap: nowrap !important; + } + + .endpoint-view_list .list-toolbar__sort.btn { + min-width: 0; + padding: .35rem .55rem; + font-size: .82rem; + } + + .endpoint-view_list .hide-purchased-switch--right { + min-width: 0; + gap: .25rem; + font-size: .82rem; + } + + .endpoint-view_list .hide-purchased-switch--right .form-check-label { + margin-left: .25rem !important; + white-space: nowrap; + } + + .endpoint-view_list .hide-purchased-switch--right .form-check-input { + transform: scale(.92); + transform-origin: center; + } + + .list-header-toolbar { + align-items: flex-start !important; + } + + .list-header-toolbar .list-toolbar { + width: 100%; + justify-content: flex-end !important; + } +} + +/* hotfix 2026-03-15 v3: /share item layout parity with /list */ +/* hotfix 2026-03-15: /share item layout parity with /list */ +.endpoint-list_share .shopping-item-row, +.endpoint-shared_list .shopping-item-row { + overflow: hidden; + padding: .8rem .95rem; +} + +.endpoint-list_share .shopping-item-main, +.endpoint-shared_list .shopping-item-main, +.endpoint-view_list .shopping-item-main, +.endpoint-list .shopping-item-main { + display: flex; + align-items: center; + gap: .75rem; + width: 100%; +} + +.endpoint-list_share .shopping-item-content, +.endpoint-shared_list .shopping-item-content, +.endpoint-view_list .shopping-item-content, +.endpoint-list .shopping-item-content { + flex: 1 1 auto; + min-width: 0; + width: auto; +} + +.endpoint-list_share .shopping-item-head, +.endpoint-shared_list .shopping-item-head, +.endpoint-view_list .shopping-item-head, +.endpoint-list .shopping-item-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: .75rem; +} + +.endpoint-list_share .shopping-item-text, +.endpoint-shared_list .shopping-item-text, +.endpoint-view_list .shopping-item-text, +.endpoint-list .shopping-item-text { + flex: 1 1 auto; + min-width: 0; + display: flex; + align-items: center; + align-content: center; + gap: .35rem; + flex-wrap: wrap; +} + +.endpoint-list_share .shopping-item-name, +.endpoint-shared_list .shopping-item-name, +.endpoint-view_list .shopping-item-name, +.endpoint-list .shopping-item-name { + display: inline; + min-width: 0; + max-width: 100%; + white-space: normal; + overflow-wrap: break-word; + word-break: normal; +} + +.endpoint-list_share .shopping-item-text .badge, +.endpoint-shared_list .shopping-item-text .badge, +.endpoint-view_list .shopping-item-text .badge, +.endpoint-list .shopping-item-text .badge, +.endpoint-list_share .shopping-item-text .info-line, +.endpoint-shared_list .shopping-item-text .info-line, +.endpoint-view_list .shopping-item-text .info-line, +.endpoint-list .shopping-item-text .info-line { + align-self: center; +} + +.endpoint-list_share .shopping-item-text .info-line, +.endpoint-shared_list .shopping-item-text .info-line, +.endpoint-view_list .shopping-item-text .info-line, +.endpoint-list .shopping-item-text .info-line { + display: block; + flex: 0 0 100%; + width: 100%; + margin-top: .1rem; + white-space: normal; + overflow-wrap: break-word; + word-break: normal; +} + +.endpoint-list_share .shopping-item-actions, +.endpoint-shared_list .shopping-item-actions, +.endpoint-view_list .shopping-item-actions, +.endpoint-list .shopping-item-actions { + display: inline-flex; + flex: 0 0 auto; + flex-wrap: nowrap; + align-items: center; + align-self: center; + justify-content: flex-end; + gap: .35rem; + margin-left: 0; + white-space: nowrap; +} + +.endpoint-list_share .shopping-item-actions .btn, +.endpoint-shared_list .shopping-item-actions .btn { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 2.25rem; + padding: .34rem .48rem; +} + +.endpoint-list_share .shopping-item-main > .large-checkbox, +.endpoint-shared_list .shopping-item-main > .large-checkbox, +.endpoint-view_list .shopping-item-main > .large-checkbox { + flex: 0 0 auto; + align-self: center; +} + +@media (max-width: 575.98px) { + .endpoint-list_share .shopping-item-main, + .endpoint-shared_list .shopping-item-main, + .endpoint-view_list .shopping-item-main, + .endpoint-list .shopping-item-main { + gap: .55rem; + } + + .endpoint-list_share .shopping-item-head, + .endpoint-shared_list .shopping-item-head, + .endpoint-view_list .shopping-item-head, + .endpoint-list .shopping-item-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: .45rem; + } + + .endpoint-list_share .shopping-item-text, + .endpoint-shared_list .shopping-item-text, + .endpoint-view_list .shopping-item-text, + .endpoint-list .shopping-item-text { + flex: 1 1 auto; + min-width: 0; + gap: .25rem; + } + + .endpoint-list_share .shopping-item-actions, + .endpoint-shared_list .shopping-item-actions, + .endpoint-view_list .shopping-item-actions, + .endpoint-list .shopping-item-actions { + align-self: start; + width: auto; + margin-left: auto; + gap: .25rem; + } + + .endpoint-list_share .shopping-item-actions .btn, + .endpoint-shared_list .shopping-item-actions .btn { + min-width: 2rem; + padding: .3rem .42rem; + } +} + +.endpoint-list_share input[type="checkbox"].large-checkbox::before, +.endpoint-shared_list input[type="checkbox"].large-checkbox::before { + font-size: 1.75em; +} + +/* mobile menu simplification 2026-03-15 */ +.app-mobile-menu { + display: flex; + align-items: center; +} + +.app-mobile-menu__toggle { + display: inline-flex; + align-items: center; + justify-content: center; + width: 3rem; + height: 3rem; + border-radius: 14px; + background: rgba(255,255,255,0.04); +} + +.app-mobile-menu__panel { + min-width: 14rem; + padding: .4rem; + border-radius: 16px; + background: linear-gradient(180deg, rgba(14,22,35,0.98), rgba(9,15,26,0.98)) !important; + border: 1px solid rgba(255,255,255,0.1); + box-shadow: 0 18px 36px rgba(0,0,0,0.28); +} + +.app-mobile-menu__item { + display: flex; + align-items: center; + gap: .55rem; + min-height: 2.6rem; + padding: .55rem .75rem; + color: #fff; + border-radius: 12px; +} + +.app-mobile-menu__item:hover, +.app-mobile-menu__item:focus { + background: rgba(255,255,255,0.08); + color: #fff; +} + +@media (min-width: 992px) { + .app-mobile-menu { + display: none !important; + } +} + + +/* v5.1 create-list temp toggle mobile/Desktop fix */ +.create-list-input-group { + display: flex; + flex-wrap: nowrap !important; + align-items: stretch; + gap: 0 !important; +} + +.create-list-input-group > .form-control { + flex: 1 1 auto !important; + width: 1% !important; + min-width: 0 !important; + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +.create-list-input-group > .create-list-temp-toggle, +.create-list-input-group > #tempToggle { + flex: 0 0 auto !important; + width: auto !important; + min-width: 10rem; + margin-left: -1px; + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; + border-top-right-radius: 14px !important; + border-bottom-right-radius: 14px !important; + background: rgba(255,255,255,0.03) !important; + border-color: var(--app-border) !important; + color: var(--app-text) !important; + transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; +} + +.create-list-input-group > .create-list-temp-toggle.is-active, +.create-list-input-group > #tempToggle.is-active { + background: rgba(41, 209, 125, 0.16) !important; + border-color: rgba(41, 209, 125, 0.72) !important; + color: #9bf0c1 !important; + box-shadow: inset 0 0 0 1px rgba(41, 209, 125, 0.15); +} + +.create-list-input-group > .create-list-temp-toggle:hover, +.create-list-input-group > #tempToggle:hover, +.create-list-input-group > .create-list-temp-toggle:focus, +.create-list-input-group > #tempToggle:focus { + background: rgba(255,255,255,0.06) !important; + color: var(--app-text) !important; +} + +.create-list-input-group > .create-list-temp-toggle.is-active:hover, +.create-list-input-group > #tempToggle.is-active:hover, +.create-list-input-group > .create-list-temp-toggle.is-active:focus, +.create-list-input-group > #tempToggle.is-active:focus { + background: rgba(41, 209, 125, 0.2) !important; + color: #b7f7d2 !important; +} + +@media (max-width: 767.98px) { + .create-list-input-group { + gap: 0 !important; + } + + .create-list-input-group > .form-control { + padding-left: .9rem; + padding-right: .75rem; + } + + .create-list-input-group > .create-list-temp-toggle, + .create-list-input-group > #tempToggle { + min-width: 8.75rem; + padding-left: .85rem; + padding-right: .85rem; + font-size: .92rem; + letter-spacing: 0; + } +} + + +.endpoint-list_share .shopping-item-actions, +.endpoint-shared_list .shopping-item-actions, +.endpoint-view_list .shopping-item-actions, +.endpoint-list .shopping-item-actions { + gap: .35rem !important; + min-height: 2.35rem !important; +} + +.endpoint-list_share .shopping-action-btn, +.endpoint-shared_list .shopping-action-btn, +.endpoint-view_list .shopping-action-btn, +.endpoint-list .shopping-action-btn { + width: 2.35rem !important; + height: 2.35rem !important; + min-width: 2.35rem !important; + min-height: 2.35rem !important; + padding: 0 !important; + border-radius: .7rem !important; + font-size: 1rem !important; + line-height: 1 !important; +} + +.endpoint-list_share .shopping-action-btn--wide, +.endpoint-shared_list .shopping-action-btn--wide, +.endpoint-view_list .shopping-action-btn--wide, +.endpoint-list .shopping-action-btn--wide { + width: auto !important; + min-width: 5.9rem !important; + padding: 0 .8rem !important; +} +.endpoint-list_share .shopping-action-btn--countdown, +.endpoint-shared_list .shopping-action-btn--countdown, +.endpoint-view_list .shopping-action-btn--countdown, +.endpoint-list .shopping-action-btn--countdown { + width: auto !important; + min-width: 3.2rem !important; + padding: 0 .65rem !important; +} + + +.endpoint-list_share .shopping-action-btn > *, +.endpoint-shared_list .shopping-action-btn > *, +.endpoint-view_list .shopping-action-btn > *, +.endpoint-list .shopping-action-btn > * { + line-height: 1 !important; +} + +@media (max-width: 575.98px) { + .endpoint-list_share .shopping-action-btn, + .endpoint-shared_list .shopping-action-btn, + .endpoint-view_list .shopping-action-btn, + .endpoint-list .shopping-action-btn { + width: 2.15rem !important; + height: 2.15rem !important; + min-width: 2.15rem !important; + min-height: 2.15rem !important; + border-radius: .65rem !important; + } + + .endpoint-list_share .shopping-action-btn--wide, + .endpoint-shared_list .shopping-action-btn--wide, + .endpoint-view_list .shopping-action-btn--wide, + .endpoint-list .shopping-action-btn--wide { + min-width: 5.4rem !important; + padding: 0 .72rem !important; + } +} + +@media (max-width: 575.98px) { + .endpoint-list_share .shopping-action-btn--countdown, + .endpoint-shared_list .shopping-action-btn--countdown, + .endpoint-view_list .shopping-action-btn--countdown, + .endpoint-list .shopping-action-btn--countdown { + min-width: 3rem !important; + padding: 0 .55rem !important; + } +} + +body:not(.sorting-active) .drag-handle { + display: none !important; +} + + +/* ========================================================= + Consistent form controls + password toggle +========================================================= */ +:root { + --ui-control-height: 42px; + --ui-control-radius: 14px; + --ui-control-focus-ring: 0 0 0 .25rem rgba(24, 64, 118, .18); +} + +.ui-consistent-input { + min-height: var(--ui-control-height) !important; + border-radius: var(--ui-control-radius) !important; +} + +.ui-password-group { + display: flex !important; + flex-wrap: nowrap !important; + align-items: stretch !important; + width: 100% !important; + gap: 0 !important; + overflow: hidden !important; + border: 1px solid var(--ui-border-strong) !important; + border-radius: var(--ui-control-radius) !important; + background: rgba(255,255,255,0.04) !important; + background-image: none !important; + box-shadow: none !important; +} + +.ui-password-group:focus-within { + border-color: rgba(25, 135, 84, 0.6) !important; + box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.16) !important; +} + +.ui-password-group > .form-control { + flex: 1 1 auto !important; + width: 1% !important; + min-width: 0 !important; + min-height: var(--ui-control-height) !important; + border: 0 !important; + border-radius: 0 !important; + box-shadow: none !important; + background: transparent !important; + background-color: transparent !important; + background-image: none !important; + background-clip: padding-box !important; +} + +.ui-password-group > .form-control:focus { + box-shadow: none !important; + background: transparent !important; + background-color: transparent !important; +} + +.ui-password-group > .ui-password-toggle { + appearance: none !important; + -webkit-appearance: none !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + flex: 0 0 46px !important; + width: 46px !important; + min-width: 46px !important; + min-height: var(--ui-control-height) !important; + padding: 0 !important; + margin: 0 !important; + cursor: pointer !important; + background: transparent !important; + background-color: transparent !important; + background-image: none !important; + color: rgba(255,255,255,0.72) !important; + border: 0 !important; + border-left: 1px solid rgba(255, 255, 255, 0.10) !important; + border-radius: 0 !important; + box-shadow: none !important; + line-height: 1 !important; +} + +.ui-password-group > .ui-password-toggle:hover, +.ui-password-group > .ui-password-toggle:focus, +.ui-password-group > .ui-password-toggle:focus-visible { + background: rgba(255,255,255,0.03) !important; + background-color: rgba(255,255,255,0.03) !important; + color: #fff !important; + border-left-color: rgba(255,255,255,0.16) !important; + box-shadow: none !important; + outline: none !important; +} + +.ui-password-group > .ui-password-toggle.is-active { + background: rgba(255,255,255,0.05) !important; + background-color: rgba(255,255,255,0.05) !important; + color: #fff !important; +} + +.ui-password-group > .ui-password-toggle > * { + pointer-events: none !important; +} + +.endpoint-login form .form-control:not(.form-control-sm), +.endpoint-system_auth form .form-control:not(.form-control-sm), +.endpoint-edit_my_list form .form-control:not(.form-control-sm):not(.form-control-plaintext), +.endpoint-edit_list form .form-control:not(.form-control-sm):not(.form-control-plaintext), +.endpoint-user_management form .form-control:not(.form-control-sm), +.endpoint-user_management .modal .form-control:not(.form-control-sm), +.endpoint-edit_my_list form .form-select, +.endpoint-edit_list form .form-select, +.endpoint-user_management form .form-select, +.endpoint-user_management .modal .form-select { + min-height: var(--ui-control-height) !important; +} + +.endpoint-login form .form-control.ui-consistent-input, +.endpoint-system_auth form .form-control.ui-consistent-input, +.endpoint-edit_my_list form .ui-consistent-input, +.endpoint-edit_list form .ui-consistent-input, +.endpoint-user_management form .ui-consistent-input, +.endpoint-user_management .modal .ui-consistent-input { + border-radius: var(--ui-control-radius) !important; +} + +/* + Password fields use only the generic ui-password-group rules above. + Keep endpoint-specific overrides out of login/system_auth/admin screens, + otherwise future changes start fighting through selector specificity. +*/ +.ui-password-group > .form-control.ui-consistent-input { + border-radius: 0 !important; +} + +.endpoint-edit_my_list .access-editor .access-input, +.endpoint-edit_list .input-group.input-group-sm .form-control { + min-height: var(--ui-control-height) !important; +} + +@media (max-width: 575.98px) { + .ui-password-group > .ui-password-toggle { + flex-basis: 44px !important; + width: 44px !important; + min-width: 44px !important; + } +} + +/* wyróżnienie pola dodawania produktu */ +.endpoint-list .shopping-entry-card, +.endpoint-list_share .shopping-entry-card, +.endpoint-shared_list .shopping-entry-card, +.endpoint-view_list .shopping-entry-card { + background: linear-gradient(180deg, rgba(25, 135, 84, 0.16), rgba(13, 17, 23, 0.92)); + border: 1px solid rgba(25, 135, 84, 0.42); + border-radius: 1rem; + padding: .9rem; + box-shadow: 0 .5rem 1.2rem rgba(0, 0, 0, 0.18); +} + +.endpoint-list .shopping-entry-card__label, +.endpoint-list_share .shopping-entry-card__label, +.endpoint-shared_list .shopping-entry-card__label, +.endpoint-view_list .shopping-entry-card__label { + display: inline-flex; + align-items: center; + gap: .4rem; + margin-bottom: .2rem; + font-size: .95rem; + font-weight: 700; + color: #d1f7df; +} + +.endpoint-list .shopping-entry-card__hint, +.endpoint-list_share .shopping-entry-card__hint, +.endpoint-shared_list .shopping-entry-card__hint, +.endpoint-view_list .shopping-entry-card__hint { + margin-bottom: .75rem; + color: rgba(255, 255, 255, 0.72); + font-size: .82rem; + line-height: 1.35; +} + +.endpoint-list .shopping-entry-card .shopping-product-input-group, +.endpoint-list_share .shopping-entry-card .shopping-product-input-group, +.endpoint-shared_list .shopping-entry-card .shopping-product-input-group, +.endpoint-view_list .shopping-entry-card .shopping-product-input-group { + margin-bottom: 0 !important; +} + +.endpoint-list .shopping-entry-card .shopping-product-input-group > .form-control, +.endpoint-list_share .shopping-entry-card .shopping-product-input-group > .form-control, +.endpoint-shared_list .shopping-entry-card .shopping-product-input-group > .form-control, +.endpoint-view_list .shopping-entry-card .shopping-product-input-group > .form-control { + border-color: rgba(25, 135, 84, 0.55) !important; + background: rgba(17, 24, 39, 0.95) !important; +} + +.endpoint-list .shopping-entry-card .shopping-product-input-group > .form-control::placeholder, +.endpoint-list_share .shopping-entry-card .shopping-product-input-group > .form-control::placeholder, +.endpoint-shared_list .shopping-entry-card .shopping-product-input-group > .form-control::placeholder, +.endpoint-view_list .shopping-entry-card .shopping-product-input-group > .form-control::placeholder { + color: rgba(255, 255, 255, 0.62); +} + +.endpoint-list .shopping-entry-card .shopping-product-input-group > .shopping-product-name-input:focus, +.endpoint-list_share .shopping-entry-card .shopping-product-input-group > .shopping-product-name-input:focus, +.endpoint-shared_list .shopping-entry-card .shopping-product-input-group > .shopping-product-name-input:focus, +.endpoint-view_list .shopping-entry-card .shopping-product-input-group > .shopping-product-name-input:focus { + box-shadow: inset 0 0 0 1px rgba(25, 135, 84, 0.25), 0 0 0 .2rem rgba(25, 135, 84, 0.18); +} + +@media (max-width: 767.98px) { + .endpoint-list .shopping-entry-card, + .endpoint-list_share .shopping-entry-card, + .endpoint-shared_list .shopping-entry-card, + .endpoint-view_list .shopping-entry-card { + padding: .8rem; + border-radius: .95rem; + } + + .endpoint-list .shopping-entry-card__label, + .endpoint-list_share .shopping-entry-card__label, + .endpoint-shared_list .shopping-entry-card__label, + .endpoint-view_list .shopping-entry-card__label { + font-size: .92rem; + } + + .endpoint-list .shopping-entry-card__hint, + .endpoint-list_share .shopping-entry-card__hint, + .endpoint-shared_list .shopping-entry-card__hint, + .endpoint-view_list .shopping-entry-card__hint { + font-size: .78rem; + margin-bottom: .65rem; + } +} + +/* ========== /expenses mobile fixes: separate range pickers + better wrapping ========== */ +.endpoint-expenses .expenses-range-toolbar { + width: 100%; +} + +.endpoint-expenses .expenses-range-group { + flex-wrap: wrap; + justify-content: center; + width: 100%; +} + +.endpoint-expenses .expenses-range-group > .btn { + white-space: nowrap; +} + +.endpoint-expenses .expenses-date-range { + align-items: stretch; +} + +@media (max-width: 767.98px) { + .endpoint-expenses .expenses-range-toolbar { + justify-content: stretch !important; + overflow: visible; + padding-bottom: 0; + } + + .endpoint-expenses .expenses-range-group { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.55rem; + width: 100%; + min-width: 0; + } + + .endpoint-expenses .expenses-table-toolbar .expenses-range-group { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .endpoint-expenses .expenses-range-group > .btn { + flex: initial !important; + width: 100%; + min-width: 0; + padding-inline: 0.55rem; + font-size: 0.95rem; + } + + .endpoint-expenses .expenses-date-range { + display: grid !important; + grid-template-columns: 52px minmax(0, 1fr); + gap: 0.55rem; + width: 100%; + max-width: 100% !important; + flex-wrap: wrap !important; + } + + .endpoint-expenses .expenses-date-range > .input-group-text, + .endpoint-expenses .expenses-date-range > .form-control, + .endpoint-expenses .expenses-date-range > .btn { + width: 100% !important; + min-width: 0 !important; + flex: initial !important; + border-radius: 0.85rem !important; + } + + .endpoint-expenses .expenses-date-range > .btn { + grid-column: 1 / -1; + } +} + + +/* /share expense entry card aligned with product card */ +.endpoint-list .shopping-entry-card--expense, +.endpoint-list_share .shopping-entry-card--expense, +.endpoint-shared_list .shopping-entry-card--expense, +.endpoint-view_list .shopping-entry-card--expense { + background: linear-gradient(180deg, rgba(13, 110, 253, 0.16), rgba(13, 17, 23, 0.92)); + border-color: rgba(13, 110, 253, 0.42); +} + +.endpoint-list .shopping-entry-card--expense .shopping-entry-card__label, +.endpoint-list_share .shopping-entry-card--expense .shopping-entry-card__label, +.endpoint-shared_list .shopping-entry-card--expense .shopping-entry-card__label, +.endpoint-view_list .shopping-entry-card--expense .shopping-entry-card__label { + color: #d7e9ff; +} + +.endpoint-list .shopping-entry-card--expense .shopping-expense-input-group, +.endpoint-list_share .shopping-entry-card--expense .shopping-expense-input-group, +.endpoint-shared_list .shopping-entry-card--expense .shopping-expense-input-group, +.endpoint-view_list .shopping-entry-card--expense .shopping-expense-input-group { + margin-bottom: 0 !important; +} + +.endpoint-list .shopping-entry-card--expense .shopping-expense-input-group > .form-control, +.endpoint-list_share .shopping-entry-card--expense .shopping-expense-input-group > .form-control, +.endpoint-shared_list .shopping-entry-card--expense .shopping-expense-input-group > .form-control, +.endpoint-view_list .shopping-entry-card--expense .shopping-expense-input-group > .form-control { + border-color: rgba(13, 110, 253, 0.55) !important; + background: rgba(17, 24, 39, 0.95) !important; +} + +.endpoint-list .shopping-entry-card--expense .shopping-expense-input-group > .form-control::placeholder, +.endpoint-list_share .shopping-entry-card--expense .shopping-expense-input-group > .form-control::placeholder, +.endpoint-shared_list .shopping-entry-card--expense .shopping-expense-input-group > .form-control::placeholder, +.endpoint-view_list .shopping-entry-card--expense .shopping-expense-input-group > .form-control::placeholder { + color: rgba(255, 255, 255, 0.62); +} + +.endpoint-list .shopping-entry-card--expense .shopping-expense-input-group > .shopping-expense-amount-input:focus, +.endpoint-list_share .shopping-entry-card--expense .shopping-expense-input-group > .shopping-expense-amount-input:focus, +.endpoint-shared_list .shopping-entry-card--expense .shopping-expense-input-group > .shopping-expense-amount-input:focus, +.endpoint-view_list .shopping-entry-card--expense .shopping-expense-input-group > .shopping-expense-amount-input:focus { + box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.25), 0 0 0 .2rem rgba(13, 110, 253, 0.18); +} + +.endpoint-list .share-submit-btn--expense, +.endpoint-list_share .share-submit-btn--expense, +.endpoint-shared_list .share-submit-btn--expense, +.endpoint-view_list .share-submit-btn--expense { + color: #8ec5ff; + border-color: rgba(13, 110, 253, 0.72) !important; + background: rgba(13, 110, 253, 0.12); +} + +.endpoint-list .share-submit-btn--expense:hover, +.endpoint-list_share .share-submit-btn--expense:hover, +.endpoint-shared_list .share-submit-btn--expense:hover, +.endpoint-view_list .share-submit-btn--expense:hover, +.endpoint-list .share-submit-btn--expense:focus, +.endpoint-list_share .share-submit-btn--expense:focus, +.endpoint-shared_list .share-submit-btn--expense:focus, +.endpoint-view_list .share-submit-btn--expense:focus { + color: #fff; + border-color: rgba(13, 110, 253, 0.9) !important; + background: rgba(13, 110, 253, 0.22); + box-shadow: 0 0 0 .2rem rgba(13, 110, 253, 0.16); +} + +/* UX polish 2026-03-19: list quick actions card */ +.list-quick-actions { + display: grid; + gap: .9rem; + padding: 1rem; + border: 1px solid rgba(255,255,255,.08); + border-radius: 1rem; + background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); + box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.14); +} + +.list-quick-actions__header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: .75rem; +} + +.list-quick-actions__eyebrow { + font-size: .72rem; + letter-spacing: .08em; + text-transform: uppercase; + color: rgba(255,255,255,.58); + margin-bottom: .15rem; +} + +.list-quick-actions__title { + font-size: 1rem; + font-weight: 700; + color: #fff; + line-height: 1.2; +} + +.list-quick-actions__hint { + font-size: .82rem; + color: rgba(255,255,255,.62); + text-align: right; + max-width: 18rem; +} + +.list-quick-actions__grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: .75rem; +} + +.list-quick-actions__form { + display: block; +} + +.list-quick-actions__action.btn { + width: 100%; + min-height: 78px; + display: flex; + align-items: flex-start; + gap: .75rem; + padding: .9rem 1rem; + border-radius: .95rem; + text-align: left; + white-space: normal; +} + +.list-quick-actions__action--primary.btn { + border-color: rgba(255,255,255,.2); + background: rgba(255,255,255,.03); +} + +.list-quick-actions__action--secondary.btn { + border-color: rgba(13,110,253,.5); + background: rgba(13,110,253,.08); +} + +.list-quick-actions__icon { + flex: 0 0 auto; + font-size: 1.05rem; + line-height: 1; + margin-top: .1rem; +} + +.list-quick-actions__content { + display: grid; + gap: .2rem; + min-width: 0; +} + +.list-quick-actions__label { + font-size: .95rem; + font-weight: 600; + color: #fff; + line-height: 1.25; +} + +.list-quick-actions__desc { + font-size: .81rem; + color: rgba(255,255,255,.66); + line-height: 1.35; +} + +@media (max-width: 767.98px) { + .list-quick-actions { + padding: .9rem; + gap: .75rem; + } + + .list-quick-actions__header { + flex-direction: column; + gap: .35rem; + } + + .list-quick-actions__hint { + max-width: none; + text-align: left; + } + + .list-quick-actions__grid { + grid-template-columns: 1fr; + } + + .list-quick-actions__action.btn { + min-height: 72px; + padding: .85rem .9rem; + } +} + + +/* ========================================================= + Mobile navbar and user chip +========================================================= */ +.app-navbar__meta--mobile { + display: none; +} + +.app-user-chip--mobile { + max-width: min(46vw, 15rem); + min-width: 0; + padding-left: .6rem; + padding-right: .4rem; +} + +.app-user-chip--mobile .badge { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +@media (max-width: 991.98px) { + .app-navbar .container-xxl { + grid-template-columns: minmax(0, 1fr) auto auto; + } + + .app-navbar__meta--mobile { + display: flex !important; + width: auto; + justify-content: flex-end; + justify-self: end; + grid-column: 2; + min-width: 0; + max-width: min(42vw, 12rem); + } + + .app-user-chip--mobile { + display: inline-flex; + } + + .app-mobile-menu { + grid-column: 3; + justify-self: end; + } +} + +@media (max-width: 575.98px) { + .app-brand__icon { + width: 2.25rem; + height: 2.25rem; + } + + .app-user-chip--mobile { + gap: .35rem; + padding: .34rem .38rem .34rem .5rem; + } + + .app-user-chip--mobile .app-user-chip__label { + font-size: .62rem; + letter-spacing: .05em; + } + + .app-user-chip--mobile .badge { + font-size: .72rem; + max-width: 5.9rem; + } +} + +@media (max-width: 430px) { + .app-navbar .container-xxl { + grid-template-columns: minmax(0, 1fr) auto auto; + gap: .45rem; + } + + .app-user-chip--mobile { + max-width: min(38vw, 8.5rem); + } + + .app-user-chip--mobile .app-user-chip__label { + display: none; + } +} + +/* --- Main page list progress consistency --- */ +.endpoint-main_page .list-group-item { + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: flex-start; +} + +.endpoint-main_page .main-list-progress-wrap { + display: block; + width: 100%; + flex: 0 0 100%; + margin-top: 0.8rem !important; +} + +.endpoint-main_page .list-group-item > .main-list-row + .main-list-progress-wrap { + align-self: stretch; +} + +.endpoint-main_page .main-list-progress { + width: 100%; + height: 16px; + margin-top: 0 !important; + border: 1px solid rgba(255, 255, 255, 0.08); + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)), + var(--dark-700) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.05), + 0 4px 10px rgba(0, 0, 0, 0.18); +} + +.endpoint-main_page .main-list-progress .progress-bar.bg-success { + background: linear-gradient(135deg, rgba(40, 199, 111, 0.98), rgba(22, 163, 74, 0.98)) !important; +} + +.endpoint-main_page .main-list-progress .progress-bar.bg-warning { + background: linear-gradient(135deg, rgba(245, 189, 65, 0.98), rgba(217, 119, 6, 0.98)) !important; +} + +.endpoint-main_page .main-list-progress .progress-bar.bg-transparent { + background: rgba(255, 255, 255, 0.08) !important; +} + +.endpoint-main_page .main-list-progress__label { + max-width: calc(100% - 0.85rem); + padding: 0 0.45rem; + overflow: hidden; + text-overflow: ellipsis; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); + letter-spacing: 0.01em; +} + +@media (max-width: 575.98px) { + .endpoint-main_page .main-list-progress { + height: 15px; + } + + .endpoint-main_page .main-list-progress__label { + font-size: 0.64rem; + } +} + +.endpoint-main_page #mainStatsCollapse.collapsing, +.endpoint-main_page #mainStatsCollapse.show { + overflow: visible; +} + +.endpoint-main_page .main-summary-card { + height: 100%; + padding: 1rem 1rem 1.05rem; + border-radius: 1rem; + border: 1px solid rgba(255, 255, 255, 0.08); + background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)), rgba(9, 16, 28, 0.88); + box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2); +} + +.endpoint-main_page .main-summary-card__eyebrow { + font-size: 0.72rem; + text-transform: uppercase; + letter-spacing: 0.08em; + color: rgba(255, 255, 255, 0.65); + margin-bottom: 0.2rem; +} + +.endpoint-main_page .main-summary-card__title { + font-size: 1.05rem; +} + +.endpoint-main_page .main-summary-stats { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.7rem; +} + +.endpoint-main_page .main-summary-stat { + padding: 0.65rem 0.75rem; + border-radius: 0.85rem; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.06); +} + +.endpoint-main_page .main-summary-stat__label { + display: block; + font-size: 0.73rem; + color: rgba(255, 255, 255, 0.66); + margin-bottom: 0.15rem; +} + + +@media (max-width: 575.98px) { + .endpoint-main_page .main-summary-card { + padding: 0.9rem; + } + + .endpoint-main_page .main-summary-stats { + grid-template-columns: 1fr; + } +} + +@media (max-width: 575.98px) { + .endpoint-list_share .shopping-item-head, + .endpoint-shared_list .shopping-item-head { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: start; + column-gap: .45rem; + } + + .endpoint-list_share .shopping-item-actions, + .endpoint-shared_list .shopping-item-actions { + align-self: start; + margin-left: 0; + justify-self: end; + } +} + +@media (max-width: 575.98px) { + .endpoint-list_share .shopping-item-main, + .endpoint-shared_list .shopping-item-main { + align-items: center; + } + + .endpoint-list_share .shopping-item-text, + .endpoint-shared_list .shopping-item-text, + .endpoint-list_share .shopping-item-main > .large-checkbox, + .endpoint-shared_list .shopping-item-main > .large-checkbox, + .endpoint-list_share .shopping-item-actions, + .endpoint-shared_list .shopping-item-actions { + align-self: center; + } + + .endpoint-list_share .shopping-item-actions, + .endpoint-shared_list .shopping-item-actions { + margin-left: auto; + justify-self: auto; + } +} + +.endpoint-list #items, +.endpoint-view_list #items, +.endpoint-list_share #items, +.endpoint-shared_list #items { + display: flex; + flex-direction: column; +} + +.endpoint-list #items > .list-group-item, +.endpoint-view_list #items > .list-group-item, +.endpoint-list_share #items > .list-group-item, +.endpoint-shared_list #items > .list-group-item { + margin: 0 !important; + border-width: 1px !important; + box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important; + background-clip: padding-box; +} + +.endpoint-list #items > .list-group-item + .list-group-item, +.endpoint-view_list #items > .list-group-item + .list-group-item, +.endpoint-list_share #items > .list-group-item + .list-group-item, +.endpoint-shared_list #items > .list-group-item + .list-group-item { + margin-top: 0 !important; + border-top-width: 1px !important; +} + +/* ========================================================= + Preview product list +========================================================= */ + +.preview-product-list { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.preview-product-summary { + padding: 0 0 0.85rem; + margin-bottom: 0.1rem; + border-bottom: 1px solid rgba(255,255,255,0.08); +} + +.preview-product-section { + display: flex; + flex-direction: column; + gap: 0.65rem; +} + +.preview-product-section-title { + margin: 0; + font-size: 1.05rem; + font-weight: 700; +} + +.preview-modal-items { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +#productPreviewModal .preview-modal-list-item { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.75rem; + width: 100%; + min-width: 0; + padding: 0.9rem 1rem; + margin: 0 !important; + border-radius: 16px !important; + border: 1px solid rgba(255,255,255,0.08) !important; + background: linear-gradient(180deg, rgba(11,22,40,0.92) 0%, rgba(8,16,30,0.92) 100%) !important; + box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); +} + +#productPreviewModal .preview-modal-list-item:first-child, +#productPreviewModal .preview-modal-list-item:last-child, +#productPreviewModal .list-group-flush > .list-group-item:first-child, +#productPreviewModal .list-group-flush > .list-group-item:last-child { + border-radius: 16px !important; +} + +#productPreviewModal .preview-modal-list-item__name { + min-width: 0; + overflow-wrap: anywhere; + flex: 1 1 auto; +} + +#productPreviewModal .preview-modal-list-item .badge { + flex-shrink: 0; + min-width: 2.5rem; + border-radius: 10px; +} + + +/* ========================================================= + Receipt disclosure (share view) +========================================================= */ +.receipt-disclosure { + width: 100%; + cursor: pointer; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 20px; + background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)); + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); + transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; +} + +.receipt-disclosure:hover, +.receipt-disclosure:focus-visible { + transform: translateY(-1px); + border-color: rgba(255, 255, 255, 0.18); + box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24); + outline: none; +} + +.receipt-disclosure.is-open { + border-color: rgba(24, 64, 118, 0.9); + background: linear-gradient(135deg, rgba(24, 64, 118, 0.22), rgba(255, 255, 255, 0.03)); +} + +.receipt-disclosure__content { + display: flex; + align-items: center; + gap: 14px; + padding: 16px 18px; +} + +.receipt-disclosure__icon { + display: grid; + place-items: center; + width: 48px; + height: 48px; + border-radius: 14px; + background: rgba(255, 255, 255, 0.06); + font-size: 1.25rem; + flex-shrink: 0; +} + +.receipt-disclosure__text { + min-width: 0; + flex: 1; +} + +.receipt-disclosure__eyebrow { + font-size: 0.72rem; + letter-spacing: 0.08em; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.52); + margin-bottom: 2px; +} + +.receipt-disclosure__title { + font-size: 1rem; + font-weight: 600; + color: var(--text-strong); +} + +.receipt-disclosure__meta { + display: flex; + align-items: center; + gap: 12px; + margin-left: auto; + flex-shrink: 0; +} + +.receipt-disclosure__count { + min-width: 34px; + padding: 6px 10px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.08); + color: var(--text-strong); + font-size: 0.875rem; + text-align: center; +} + +.receipt-disclosure__chevron { + font-size: 1.15rem; + color: rgba(255, 255, 255, 0.7); + transition: transform 0.2s ease; +} + +.receipt-disclosure.is-open .receipt-disclosure__chevron { + transform: rotate(180deg); +} + +@media (max-width: 575.98px) { + .receipt-disclosure__content { + padding: 14px; + gap: 12px; + } + + .receipt-disclosure__icon { + width: 42px; + height: 42px; + border-radius: 12px; + } + + .receipt-disclosure__meta { + gap: 10px; + } + + .receipt-disclosure__title { + font-size: 0.95rem; + } +} + + +/* ========================================================= + Final form-control normalization for edit/admin screens +========================================================= */ +.endpoint-edit_my_list .stack-form > .mb-3 > .ui-consistent-input, +.endpoint-edit_my_list .stack-form > .mb-4 > .ui-consistent-input, +.endpoint-edit_my_list .stack-form .row .ui-consistent-input, +.endpoint-edit_list form > .mb-3 > .ui-consistent-input, +.endpoint-edit_list form > .mb-4 > .ui-consistent-input, +.endpoint-edit_list form .row .ui-consistent-input, +.endpoint-user_management .row > [class*="col-"] > .ui-consistent-input, +.endpoint-user_management .modal .ui-consistent-input { + border-radius: var(--ui-control-radius) !important; +} + +.endpoint-edit_my_list .ts-wrapper.single .ts-control, +.endpoint-edit_list .ts-wrapper.single .ts-control, +.endpoint-edit_my_list .ts-wrapper.multi .ts-control, +.endpoint-edit_list .ts-wrapper.multi .ts-control { + min-height: var(--ui-control-height) !important; + border-radius: var(--ui-control-radius) !important; +} + +/* Share hub redesign (mobile-first) */ +.share-hub { + border: 1px solid rgba(79, 142, 255, 0.18); + background: linear-gradient(180deg, rgba(11, 24, 43, 0.98), rgba(8, 17, 31, 0.96)) !important; +} + +.share-hub .card-body { + padding: 1rem; +} + +.share-hub__top { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 0.9rem; + margin-bottom: 0.85rem; +} + +.share-hub__eyebrow, +.share-sheet__eyebrow { + font-size: 0.72rem; + letter-spacing: 0.08em; + text-transform: uppercase; + color: rgba(186, 210, 240, 0.62); + margin-bottom: 0.35rem; +} + +.share-hub__title { + font-size: 1.1rem; + font-weight: 700; +} + +.share-hub__status, +.share-sheet__section-head { + display: flex; + flex-wrap: wrap; + gap: 0.45rem; + align-items: center; +} + +.share-state-badge { + display: inline-flex; + align-items: center; + gap: 0.3rem; + min-height: 32px; + padding: 0.45rem 0.72rem; + font-size: 0.76rem; + font-weight: 600; + border: 1px solid rgba(255, 255, 255, 0.08); +} + +.share-state-badge--public { + background: rgba(41, 209, 125, 0.16); + color: #dfffea; +} + +.share-state-badge--private { + background: rgba(255, 255, 255, 0.06); + color: #edf5ff; +} + +.share-state-badge--link { + background: rgba(79, 142, 255, 0.14); + color: #d7e7ff; +} + +.share-state-badge--people { + background: rgba(255, 255, 255, 0.08); + color: #edf5ff; +} + +.share-hub__note { + color: rgba(210, 224, 244, 0.74); + font-size: 0.92rem; + line-height: 1.45; +} + +.share-hub__linkbox { + border: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(255, 255, 255, 0.035); + border-radius: 16px; + padding: 0.85rem 0.95rem; +} + +.share-hub__linklabel { + font-size: 0.72rem; + text-transform: uppercase; + letter-spacing: 0.07em; + color: rgba(186, 210, 240, 0.58); + margin-bottom: 0.3rem; +} + +.share-hub__linkvalue { + color: #f4f8ff; + font-size: 0.95rem; + line-height: 1.45; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.share-hub__actions { + display: grid; + grid-template-columns: 1fr; + gap: 0.65rem; +} + +.share-hub__primary, +.share-hub__secondary, +.share-hub__manage, +.share-sheet__toggle, +.share-sheet__sticky-actions .btn, +.share-sheet__linkstack .btn, + + +.share-hub__manage { + white-space: nowrap; +} + +.share-sheet { + height: auto !important; + max-height: min(90vh, 760px); + border-top-left-radius: 24px; + border-top-right-radius: 24px; + border: 1px solid rgba(255, 255, 255, 0.06); + background: linear-gradient(180deg, rgba(8, 18, 33, 0.995), rgba(6, 13, 24, 0.99)) !important; + box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.42); +} + +.share-sheet__header { + align-items: flex-start; + padding: 0.85rem 1rem 0.6rem; +} + +.share-sheet__body { + padding: 0 1rem calc(1rem + env(safe-area-inset-bottom)); + overflow-y: auto; +} + +.share-sheet__grabber { + width: 52px; + height: 5px; + border-radius: 999px; + margin: 0 auto 0.8rem; + background: rgba(255, 255, 255, 0.22); +} + +.share-sheet__section { + border: 1px solid rgba(255, 255, 255, 0.07); + background: rgba(255, 255, 255, 0.035); + border-radius: 18px; + padding: 0.95rem; + margin-bottom: 0.9rem; +} + +.share-sheet__section-head { + justify-content: space-between; + margin-bottom: 0.7rem; + font-weight: 600; +} + +.share-sheet__linkstack, +.share-access-panel__input { + display: grid; + grid-template-columns: 1fr; + gap: 0.65rem; +} + +.share-access-panel .tokens { + min-height: 2rem; +} + +.share-access-panel .token { + background: rgba(255, 255, 255, 0.03); +} + +.share-sheet__sticky-actions { + position: sticky; + bottom: 0; + padding-top: 0.3rem; + background: linear-gradient(180deg, rgba(6, 13, 24, 0), rgba(6, 13, 24, 0.96) 28%); +} + +@media (min-width: 576px) { + .share-hub .card-body, + .share-sheet__header, + .share-sheet__body { + padding-left: 1.2rem; + padding-right: 1.2rem; + } + + .share-sheet__linkstack, + .share-access-panel__input { + grid-template-columns: 1fr auto; + align-items: center; + } +} + +@media (min-width: 768px) { + .share-hub .card-body { + padding: 1.15rem 1.2rem; + } + + .share-hub__actions { + grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); + } + + .share-sheet { + max-width: 760px; + margin: 0 auto; + left: 0; + right: 0; + } +} diff --git a/shopping_app/static/js/functions.js b/shopping_app/static/js/functions.js index bb0f4df..e332151 100644 --- a/shopping_app/static/js/functions.js +++ b/shopping_app/static/js/functions.js @@ -476,26 +476,6 @@ function updateListSmoothly(newItems) { applyHidePurchased(); } - -document.addEventListener("DOMContentLoaded", function () { - const receiptSection = document.getElementById("receiptSection"); - const toggleBtn = document.querySelector('[data-bs-target="#receiptSection"]'); - - if (!receiptSection || !toggleBtn) return; - - if (localStorage.getItem("receiptSectionOpen") === "true") { - new bootstrap.Collapse(receiptSection, { toggle: true }); - } - - receiptSection.addEventListener('shown.bs.collapse', function () { - localStorage.setItem("receiptSectionOpen", "true"); - }); - - receiptSection.addEventListener('hidden.bs.collapse', function () { - localStorage.setItem("receiptSectionOpen", "false"); - }); -}); - document.addEventListener("DOMContentLoaded", function () { const toggle = document.getElementById('hidePurchasedToggle'); if (!toggle) return; diff --git a/shopping_app/static/js/functions.js.bak b/shopping_app/static/js/functions.js.bak new file mode 100644 index 0000000..bb0f4df --- /dev/null +++ b/shopping_app/static/js/functions.js.bak @@ -0,0 +1,510 @@ +function updateItemState(itemId, isChecked) { + const checkbox = document.querySelector(`#item-${itemId} input[type='checkbox']`); + if (checkbox) { + checkbox.checked = isChecked; + checkbox.disabled = false; + const li = checkbox.closest('li'); + li.classList.remove('opacity-50', 'is-pending', 'bg-light', 'text-dark', 'bg-success', 'text-white', 'bg-warning', 'item-not-checked'); + + if (isChecked) { + li.classList.add('bg-success', 'text-white'); + } else { + li.classList.add('item-not-checked'); + } + + li.querySelectorAll('.shopping-item-spinner, .spinner-border').forEach(sp => sp.remove()); + } + updateProgressBar(); + applyHidePurchased(); +} + +function updateProgressBar() { + const barPurchased = document.getElementById('progress-bar-purchased'); + const barNotPurchased = document.getElementById('progress-bar-not-purchased'); + const barRemaining = document.getElementById('progress-bar-remaining'); + const progressLabel = document.getElementById('progress-label'); + const percentValueEl = document.getElementById('percent-value'); + + if (!barPurchased || !barNotPurchased || !barRemaining || !progressLabel) { + return; + } + + const items = document.querySelectorAll('#items li'); + const total = items.length; + + const purchased = Array.from(items).filter(li => li.classList.contains('bg-success')).length; + const notPurchased = Array.from(items).filter(li => li.classList.contains('bg-warning')).length; + const remaining = total - purchased - notPurchased; + + const percentPurchased = total > 0 ? (purchased / total) * 100 : 0; + const percentNotPurchased = total > 0 ? (notPurchased / total) * 100 : 0; + const percentRemaining = total > 0 ? (remaining / total) * 100 : 0; + + const percent = total > 0 ? Math.round((purchased / total) * 100) : 0; + + barPurchased.style.width = `${percentPurchased}%`; + barNotPurchased.style.width = `${percentNotPurchased}%`; + barRemaining.style.width = `${percentRemaining}%`; + + progressLabel.textContent = `${percent}%`; + progressLabel.classList.toggle('text-white', percent < 51); + progressLabel.classList.toggle('text-dark', percent >= 51); + + const purchasedCountEl = document.getElementById('purchased-count'); + const totalCountEl = document.getElementById('total-count'); + + if (purchasedCountEl) purchasedCountEl.textContent = purchased; + if (totalCountEl) totalCountEl.textContent = total; + if (percentValueEl) percentValueEl.textContent = percent; +} + +function addItem(listId) { + const name = document.getElementById('newItem').value; + const quantityInput = document.getElementById('newQuantity'); + let quantity = 1; + + if (quantityInput) { + quantity = parseInt(quantityInput.value); + if (isNaN(quantity) || quantity < 1) { + quantity = 1; + } + } + + if (name.trim() === '') return; + + socket.emit('add_item', { list_id: listId, name: name, quantity: quantity }); + + document.getElementById('newItem').value = ''; + if (quantityInput) quantityInput.value = 1; + document.getElementById('newItem').focus(); +} + +function deleteItem(id) { + if (confirm('Na pewno usunąć produkt?')) { + socket.emit('delete_item', { item_id: id }); + } +} + +function editItem(id, oldName, oldQuantity) { + const finalName = String(oldName ?? '').trim(); + let newQuantity = parseInt(oldQuantity, 10); + + if (!finalName) { + showToast('Nazwa produktu nie może być pusta.', 'warning'); + return; + } + + if (isNaN(newQuantity) || newQuantity < 1) { + newQuantity = 1; + } + + socket.emit('edit_item', { item_id: id, new_name: finalName, new_quantity: newQuantity }); +} + +function openEditItemModal(event, id, oldName, oldQuantity) { + if (event && typeof event.stopPropagation === 'function') { + event.stopPropagation(); + } + + const modalEl = document.getElementById('editItemModal'); + const idInput = document.getElementById('editItemId'); + const nameInput = document.getElementById('editItemName'); + const quantityInput = document.getElementById('editItemQuantity'); + + if (!modalEl || !idInput || !nameInput || !quantityInput || typeof bootstrap === 'undefined') { + editItem(id, oldName, oldQuantity); + return; + } + + idInput.value = id; + nameInput.value = String(oldName ?? '').trim(); + + const parsedQuantity = parseInt(oldQuantity, 10); + quantityInput.value = !isNaN(parsedQuantity) && parsedQuantity > 0 ? parsedQuantity : 1; + + const modal = bootstrap.Modal.getOrCreateInstance(modalEl); + modal.show(); + + setTimeout(() => { + nameInput.focus(); + nameInput.select(); + }, 150); +} + +function submitExpense(listId) { + const amountInput = document.getElementById('expenseAmount'); + const amount = parseFloat(amountInput.value); + if (isNaN(amount) || amount <= 0) { + showToast('Podaj poprawną kwotę!'); + return; + } + socket.emit('add_expense', { + list_id: listId, + amount: amount + }); + amountInput.value = ''; +} + +function copyLink(link) { + if (navigator.share) { + navigator.share({ + title: 'Udostępnij link', + text: 'Udostępniam link do listy:', + url: link + }).then(() => { + showToast('Link udostępniony!'); + }).catch((err) => { + tryClipboard(link); + }); + return; + } + tryClipboard(link); +} + +function tryClipboard(link) { + if (navigator.clipboard && window.isSecureContext) { + navigator.clipboard.writeText(link).then(() => { + showToast('Link skopiowany do schowka!'); + }).catch((err) => { + console.error('Błąd clipboard API:', err); + fallbackCopyText(link); + }); + } else { + fallbackCopyText(link); + } +} + +function fallbackCopyText(text) { + const textarea = document.createElement('textarea'); + textarea.value = text; + textarea.style.position = 'fixed'; + textarea.style.top = 0; + textarea.style.left = 0; + textarea.style.opacity = 0; + document.body.appendChild(textarea); + textarea.focus(); + textarea.select(); + + try { + const successful = document.execCommand('copy'); + if (successful) { + showToast('Link skopiowany do schowka!'); + } else { + showToast('Nie udało się skopiować linku', 'warning'); + } + } catch (err) { + console.error('Fallback błąd kopiowania:', err); + showToast('Nie udało się skopiować linku', 'warning'); + } + + document.body.removeChild(textarea); +} + +function openList(link) { + window.open(link, '_blank'); +} + +function applyHidePurchased(isInit = false) { + const toggle = document.getElementById('hidePurchasedToggle'); + if (!toggle) return; + const hide = toggle.checked; + + const items = document.querySelectorAll('#items li'); + + items.forEach(li => { + const isCheckedItem = + li.classList.contains('bg-success') || // kupione + li.classList.contains('bg-warning'); // niekupione + + if (isCheckedItem) { + if (hide) { + if (isInit) { + // Jeśli inicjalizacja: od razu ukryj + li.classList.add('hide-purchased'); + li.classList.remove('fade-out'); + } else { + // Z animacją + li.classList.add('fade-out'); + setTimeout(() => { + li.classList.add('hide-purchased'); + }, 700); + } + } else { + // Odsłanianie + li.classList.remove('hide-purchased'); + setTimeout(() => { + li.classList.remove('fade-out'); + }, 10); + } + } else { + // Element nieoznaczony — zawsze pokazany + li.classList.remove('hide-purchased', 'fade-out'); + } + }); +} + +function formatShareUrlPreview(url) { + return String(url || '').replace(/^https?:\/\//, ''); +} + +function setVisibilityBadgeState(el, isPublic, publicLabel = '🌍 Publiczna', privateLabel = '🔒 Prywatna') { + if (!el) return; + el.classList.remove('share-state-badge--public', 'share-state-badge--private'); + el.classList.add(isPublic ? 'share-state-badge--public' : 'share-state-badge--private'); + el.textContent = isPublic ? publicLabel : privateLabel; +} + +function updateShareVisibilityUI(data) { + const shareUrl = data?.share_url || ''; + const isPublic = !!data?.is_public; + + const shareUrlInput = document.getElementById('shareUrlInput'); + const shareUrlPreview = document.getElementById('shareUrlPreview'); + const copyBtn = document.getElementById('copyBtn'); + const toggleBtn = document.getElementById('toggleVisibilityBtn'); + const mainNote = document.getElementById('shareVisibilityNote'); + const sheetNote = document.getElementById('shareSheetVisibilityNote'); + const mainOpenBtn = document.getElementById('openShareModeBtn'); + const sheetOpenBtn = document.getElementById('openShareModeBtnSheet'); + + if (shareUrlInput) shareUrlInput.value = shareUrl; + if (shareUrlPreview) shareUrlPreview.textContent = formatShareUrlPreview(shareUrl); + if (copyBtn) copyBtn.disabled = false; + if (mainOpenBtn) mainOpenBtn.href = shareUrl; + if (sheetOpenBtn) sheetOpenBtn.href = shareUrl; + + setVisibilityBadgeState(document.getElementById('shareVisibilityBadge'), isPublic); + setVisibilityBadgeState(document.getElementById('shareSheetVisibilityBadge'), isPublic, 'Publiczna', 'Prywatna'); + + if (mainNote) { + mainNote.textContent = isPublic + ? 'Lista działa publicznie i przez link udostępniania.' + : 'Lista działa przez link udostępniania i dla zaproszonych osób.'; + } + + if (sheetNote) { + sheetNote.textContent = isPublic + ? 'Lista jest widoczna publicznie i nadal działa przez link.' + : 'Lista nie jest publiczna, ale nadal działa przez link i dla zaproszonych osób.'; + } + + if (toggleBtn) { + toggleBtn.innerHTML = isPublic ? '🙈 Ustaw jako prywatną' : '🌍 Uczyń publiczną'; + } +} + +function toggleVisibility(listId) { + fetch('/toggle_visibility/' + listId, { method: 'POST' }) + .then(response => response.json()) + .then(data => { + updateShareVisibilityUI(data); + showToast(data.is_public ? 'Lista jest teraz publiczna.' : 'Lista jest teraz prywatna.', 'success'); + }) + .catch(() => { + showToast('Nie udało się zmienić widoczności listy.', 'danger'); + }); +} + +function markNotPurchasedModal(e, id) { + e.stopPropagation(); + const reason = prompt("Podaj powód oznaczenia jako niekupione:"); + if (reason !== null) { + socket.emit('mark_not_purchased', { item_id: id, reason: reason }); + } +} + +function showToast(message, type = 'primary') { + const toastContainer = document.getElementById('toast-container'); + const toast = document.createElement('div'); + toast.className = `toast align-items-center text-bg-${type} border-0 show`; + toast.setAttribute('role', 'alert'); + toast.innerHTML = `
${message}
`; + toastContainer.appendChild(toast); + setTimeout(() => { toast.remove(); }, 1750); +} + + +function escapeHtml(value) { + return String(value ?? '') + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + .replace(/'/g, '''); +} + + +function isListDifferent(oldItems, newItems) { + if (oldItems.length !== newItems.length) return true; + + const oldIds = Array.from(oldItems).map(li => parseInt(li.id.replace('item-', ''), 10)).sort(); + const newIds = newItems.map(i => i.id).sort(); + + for (let i = 0; i < newIds.length; i++) { + if (oldIds[i] !== newIds[i]) { + return true; + } + } + return false; +} + + +function renderItem(item, isShare = window.IS_SHARE, optionsOrShowEditOnly = false) { + const options = (typeof optionsOrShowEditOnly === 'object' && optionsOrShowEditOnly !== null) + ? optionsOrShowEditOnly + : { showEditOnly: !!optionsOrShowEditOnly }; + + const showEditOnly = !!options.showEditOnly; + const temporaryShareUndo = !!options.temporaryShareUndo; + const countdownSeconds = Math.max(0, parseInt(options.countdownSeconds, 10) || 15); + + const li = document.createElement('li'); + li.id = `item-${item.id}`; + li.dataset.name = String(item.name || '').toLowerCase(); + li.dataset.isShare = isShare ? 'true' : 'false'; + li.className = `list-group-item shopping-item-row clickable-item ${item.purchased ? 'bg-success text-white' + : item.not_purchased ? 'bg-warning text-dark' + : 'item-not-checked' + }`; + + const isOwner = window.IS_OWNER === true || window.IS_OWNER === 'true'; + const isArchived = window.IS_ARCHIVED === true || window.IS_ARCHIVED === 'true'; + const safeName = escapeHtml(item.name || ''); + const nameForEdit = JSON.stringify(String(item.name || '')); + const quantity = Number.isInteger(item.quantity) ? item.quantity : parseInt(item.quantity, 10) || 1; + const quantityBadge = quantity > 1 + ? `x${quantity}` + : ''; + + const canEditListItem = !isShare; + const canShowShareActions = isShare && !showEditOnly && !temporaryShareUndo; + const canMarkNotPurchased = !item.not_purchased && !isArchived; + const checkboxHtml = ``; + + const infoParts = []; + if (item.note) { + infoParts.push(`[ ${escapeHtml(item.note)} ]`); + } + if (item.not_purchased_reason) { + infoParts.push(`[ Powód: ${escapeHtml(item.not_purchased_reason)} ]`); + } + const addedByDisplay = item.added_by_display || (isShare ? item.added_by : ''); + const addedById = item.added_by_id != null ? Number(item.added_by_id) : null; + const ownerId = item.owner_id != null ? Number(item.owner_id) : null; + const shouldShowAddedBy = !!addedByDisplay && (addedById === null || ownerId === null || addedById !== ownerId); + if (shouldShowAddedBy) { + infoParts.push(`· dodał/a: ${escapeHtml(addedByDisplay)}`); + } + const infoHtml = infoParts.length + ? `${infoParts.join(' ')}` + : ''; + + const iconBtn = 'btn btn-outline-light btn-sm shopping-action-btn'; + const wideBtn = 'btn btn-outline-light btn-sm shopping-action-btn shopping-action-btn--wide'; + let actionButtons = ''; + + if (canEditListItem) { + const dragHandleButton = window.isSorting + ? `` + : ''; + + actionButtons += ` + ${dragHandleButton} + + `; + } + + if (item.not_purchased) { + actionButtons += ` + `; + } else if (!isShare || canShowShareActions || isOwner) { + actionButtons += ` + `; + } + + if (temporaryShareUndo) { + actionButtons += ` + + + `; + } else if (canShowShareActions || (!isShare && isOwner)) { + actionButtons += ` + `; + } + + li.innerHTML = ` +
+ ${checkboxHtml} +
+
+
+ ${safeName} + ${quantityBadge} + ${infoHtml} +
+
+ ${actionButtons} +
+
+
+
`; + + return li; +} + +function updateListSmoothly(newItems) { + const itemsContainer = document.getElementById('items'); + const existingItemsMap = new Map(); + + Array.from(itemsContainer.querySelectorAll('li')).forEach(li => { + const id = parseInt(li.id.replace('item-', ''), 10); + existingItemsMap.set(id, li); + }); + + const fragment = document.createDocumentFragment(); + + newItems.forEach(item => { + const li = renderItem(item); + fragment.appendChild(li); + }); + + itemsContainer.innerHTML = ''; + itemsContainer.appendChild(fragment); + + updateProgressBar(); + toggleEmptyPlaceholder(); + applyHidePurchased(); +} + + +document.addEventListener("DOMContentLoaded", function () { + const receiptSection = document.getElementById("receiptSection"); + const toggleBtn = document.querySelector('[data-bs-target="#receiptSection"]'); + + if (!receiptSection || !toggleBtn) return; + + if (localStorage.getItem("receiptSectionOpen") === "true") { + new bootstrap.Collapse(receiptSection, { toggle: true }); + } + + receiptSection.addEventListener('shown.bs.collapse', function () { + localStorage.setItem("receiptSectionOpen", "true"); + }); + + receiptSection.addEventListener('hidden.bs.collapse', function () { + localStorage.setItem("receiptSectionOpen", "false"); + }); +}); + +document.addEventListener("DOMContentLoaded", function () { + const toggle = document.getElementById('hidePurchasedToggle'); + if (!toggle) return; + + const savedState = localStorage.getItem('hidePurchasedToggle'); + toggle.checked = savedState === 'true'; + applyHidePurchased(true); + toggle.addEventListener('change', function () { + localStorage.setItem('hidePurchasedToggle', toggle.checked ? 'true' : 'false'); + applyHidePurchased(); + }); +}); \ No newline at end of file diff --git a/shopping_app/static/js/receipt_section.js b/shopping_app/static/js/receipt_section.js index 73caa51..78876b1 100644 --- a/shopping_app/static/js/receipt_section.js +++ b/shopping_app/static/js/receipt_section.js @@ -1,55 +1,54 @@ document.addEventListener("DOMContentLoaded", function () { const receiptSection = document.getElementById("receiptSection"); - const toggleEl = document.querySelector('[data-bs-target="#receiptSection"]'); + const toggleEl = document.getElementById("toggleReceiptBtn"); - if (!receiptSection || !toggleEl) return; + if (!receiptSection || !toggleEl || typeof bootstrap === "undefined") return; + if (receiptSection.dataset.receiptInit === "1") return; + receiptSection.dataset.receiptInit = "1"; + const storageKey = receiptSection.dataset.receiptStorageKey || "receiptSectionOpen"; const collapse = bootstrap.Collapse.getOrCreateInstance(receiptSection, { toggle: false }); - - if (localStorage.getItem("receiptSectionOpen") === "true") { - collapse.show(); - } - const titleEl = toggleEl.querySelector(".receipt-disclosure__title"); - function updateUI() { - const isShown = receiptSection.classList.contains("show"); + function isShown() { + return receiptSection.classList.contains("show"); + } - toggleEl.classList.toggle("is-open", isShown); - toggleEl.setAttribute("aria-expanded", isShown ? "true" : "false"); + function persist(state) { + localStorage.setItem(storageKey, state ? "true" : "false"); + } + + function updateUI() { + const shown = isShown(); + toggleEl.classList.toggle("is-open", shown); + toggleEl.setAttribute("aria-expanded", shown ? "true" : "false"); if (titleEl) { - titleEl.textContent = isShown - ? "Ukryj sekcję paragonów" - : "Pokaż sekcję paragonów"; + titleEl.textContent = shown ? "Ukryj sekcję paragonów" : "Pokaż sekcję paragonów"; } } - function toggleSection() { + toggleEl.addEventListener("click", function () { collapse.toggle(); - } - - toggleEl.addEventListener("click", function (event) { - event.preventDefault(); - toggleSection(); - }); - - toggleEl.addEventListener("keydown", function (event) { - if (event.key === "Enter" || event.key === " ") { - event.preventDefault(); - toggleSection(); - } }); receiptSection.addEventListener("shown.bs.collapse", function () { - localStorage.setItem("receiptSectionOpen", "true"); + persist(true); updateUI(); }); receiptSection.addEventListener("hidden.bs.collapse", function () { - localStorage.setItem("receiptSectionOpen", "false"); + persist(false); updateUI(); }); + if (localStorage.getItem(storageKey) === "true") { + receiptSection.classList.add("receipt-section--restoring"); + collapse.show(); + requestAnimationFrame(function () { + receiptSection.classList.remove("receipt-section--restoring"); + }); + } + updateUI(); }); diff --git a/shopping_app/static/js/receipt_section.js.bak b/shopping_app/static/js/receipt_section.js.bak new file mode 100644 index 0000000..73caa51 --- /dev/null +++ b/shopping_app/static/js/receipt_section.js.bak @@ -0,0 +1,55 @@ +document.addEventListener("DOMContentLoaded", function () { + const receiptSection = document.getElementById("receiptSection"); + const toggleEl = document.querySelector('[data-bs-target="#receiptSection"]'); + + if (!receiptSection || !toggleEl) return; + + const collapse = bootstrap.Collapse.getOrCreateInstance(receiptSection, { toggle: false }); + + if (localStorage.getItem("receiptSectionOpen") === "true") { + collapse.show(); + } + + const titleEl = toggleEl.querySelector(".receipt-disclosure__title"); + + function updateUI() { + const isShown = receiptSection.classList.contains("show"); + + toggleEl.classList.toggle("is-open", isShown); + toggleEl.setAttribute("aria-expanded", isShown ? "true" : "false"); + + if (titleEl) { + titleEl.textContent = isShown + ? "Ukryj sekcję paragonów" + : "Pokaż sekcję paragonów"; + } + } + + function toggleSection() { + collapse.toggle(); + } + + toggleEl.addEventListener("click", function (event) { + event.preventDefault(); + toggleSection(); + }); + + toggleEl.addEventListener("keydown", function (event) { + if (event.key === "Enter" || event.key === " ") { + event.preventDefault(); + toggleSection(); + } + }); + + receiptSection.addEventListener("shown.bs.collapse", function () { + localStorage.setItem("receiptSectionOpen", "true"); + updateUI(); + }); + + receiptSection.addEventListener("hidden.bs.collapse", function () { + localStorage.setItem("receiptSectionOpen", "false"); + updateUI(); + }); + + updateUI(); +}); diff --git a/shopping_app/templates/list_share.html b/shopping_app/templates/list_share.html index a798c72..eefe776 100644 --- a/shopping_app/templates/list_share.html +++ b/shopping_app/templates/list_share.html @@ -138,22 +138,22 @@ 💸 Łącznie wydano: {{ '%.2f'|format(total_expense) }} PLN

- + + + -
+
{% set receipt_pattern = 'list_' ~ list.id %}
diff --git a/shopping_app/templates/list_share.html.bak b/shopping_app/templates/list_share.html.bak new file mode 100644 index 0000000..a798c72 --- /dev/null +++ b/shopping_app/templates/list_share.html.bak @@ -0,0 +1,346 @@ +{% extends 'base.html' %} +{% block title %}Lista: {{ list.title }}{% endblock %} +{% block content %} + +
+

+ 🛍️ {{ list.title }} + + {% if list.is_archived %} + (Archiwalna) + {% endif %} + + {% if total_expense > 0 %} + + 💸 {{ '%.2f'|format(total_expense) }} PLN + + {% else %} + + {% endif %} + + {% if list.category_badges %} + {% for cat in list.category_badges %} + + {{ cat.name }} + + {% endfor %} + {% endif %} +

+ + +
+ +
    + {% for item in items %} + +
  • + +
    + +
    +
    +
    + {{ item.name }} + {% if item.quantity and item.quantity > 1 %} + x{{ item.quantity }} + {% endif %} + {% set info_parts = [] %} + {% if item.note %}{% set _ = info_parts.append('[ ' ~ item.note ~ ' ]') %}{% endif %} + {% if item.not_purchased_reason %}{% set _ = info_parts.append('[ Powód: ' ~ item.not_purchased_reason ~ ' ]') %}{% endif %} + {% if item.added_by_display %}{% set _ = info_parts.append('· dodał/a: ' ~ item.added_by_display ~ '') %}{% endif %} + {% if info_parts %} + {{ info_parts | join(' ') | safe }} + {% endif %} +
    +
    + {% if item.not_purchased %} + + {% else %} + + {% endif %} + + +
    +
    +
    +
    +
    • + {% else %} +
  • + Brak produktów w tej liście. +
    • + {% endfor %} +
+ +{% if not list.is_archived %} +
+
➕ Dodaj produkt
+
Wpisz nazwę produktu i ilość, potem kliknij Dodaj.
+
+ + + +
+
+{% endif %} + +{% if not list.is_archived %} +
+
+ 💰 Dodaj wydatek + + + 💸 Łączna suma: {{ '%.2f'|format(total_expense) }} PLN + +
+ +
Wpisz kwotę wydatku i kliknij Zapisz.
+ +
+ + + +
+
+{% endif %} + + + + + +
+ {% set receipt_pattern = 'list_' ~ list.id %} + +
+
+
+
+
+
📄 Paragony
+

+ Przeglądaj dodane paragony, wrzucaj nowe i rozliczaj je przez OCR. +

+
+
+ {{ receipts|length }} plik{% if receipts|length != 1 %}i{% endif %} + {% if list.is_archived %} + Lista archiwalna + {% elif current_user.is_authenticated %} + Możesz dodawać + {% else %} + Tylko podgląd + {% endif %} +
+
+ +
+
+
+
+
📸 Dodane paragony
+ {% if receipts %} + Kliknij miniaturę, aby otworzyć podgląd + {% endif %} +
+ +
+ {% if receipts %} + {% for r in receipts %} +
+ +
+ Paragon {{ loop.index }} +
+
Paragon {{ loop.index }}
+
+
+ +
+ {% endfor %} + {% else %} +
+ +
+ {% endif %} +
+
+
+ +
+
+
+
+
+
🔍 Analiza paragonów (OCR)
+

+ System spróbuje automatycznie rozpoznać kwoty. Sprawdź wynik i kliknij „Dodaj”, aby dopisać wydatek. +

+
+
+ + {% if current_user.is_authenticated %} + + {% else %} +
+ ⚠️ Tylko zalogowani użytkownicy mogą zlecać analizę OCR. +
+ {% endif %} +
+
+ + {% if not list.is_archived and current_user.is_authenticated %} +
+
📤 Dodaj nowy paragon
+

Możesz dodać zdjęcie z aparatu, z galerii albo plik PDF.

+ +
+ +
+ + + + + + + + +
+ + + +
+
+
+ {% elif list.is_archived %} +
+
📤 Dodawanie zablokowane
+

Ta lista jest archiwalna, więc nie można już dodawać nowych paragonów.

+
+ {% elif not current_user.is_authenticated %} +
+
🔐 Dodawanie wymaga logowania
+

Zaloguj się, aby dodawać paragony i uruchamiać analizę OCR.

+
+ {% endif %} +
+
+
+
+
+
+
+ + + + +{% block scripts %} + + + + + + + + +{% endblock %} + +{% endblock %} \ No newline at end of file diff --git a/shopping_app/templates/main.html b/shopping_app/templates/main.html index 97879b1..e3b9c19 100644 --- a/shopping_app/templates/main.html +++ b/shopping_app/templates/main.html @@ -29,12 +29,14 @@
-
+
+ class="form-control bg-dark text-white border-secondary create-list-title-input" + aria-label="Nazwa nowej listy">