diff --git a/shopping_app/routes_main.py b/shopping_app/routes_main.py index d86dab1..859ed83 100644 --- a/shopping_app/routes_main.py +++ b/shopping_app/routes_main.py @@ -594,9 +594,9 @@ def view_list(list_id): percent = (purchased_count / total_count * 100) if total_count > 0 else 0 for item in items: - if item.added_by != shopping_list.owner_id: + if item.added_by and item.added_by != shopping_list.owner_id: item.added_by_display = ( - item.added_by_user.username if item.added_by_user else "?" + item.added_by_user.username if item.added_by_user else None ) else: item.added_by_display = None diff --git a/shopping_app/static/css/style.css b/shopping_app/static/css/style.css index faf83ed..8c562a8 100644 --- a/shopping_app/static/css/style.css +++ b/shopping_app/static/css/style.css @@ -54,6 +54,15 @@ /* ========================================================= Utilities & Sizes ========================================================= */ +/* + Main structure of this file: + 1. Design tokens / utilities + 2. Bootstrap overrides + 3. Forms / tables / toasts / modals + 4. Shared layout components + 5. Endpoint-specific sections + 6. Responsive fixes and hotfixes +*/ .large-checkbox { width: 1.5em; height: 1.5em; @@ -973,7 +982,7 @@ td select.tom-dark { /* 421–576px: lekko ciaśniej, ale tekst zostaje */ @media (min-width: 421px) and (max-width: 576px) { .btn-group-compact .btn { - padding: 0.25rem 0.5rem; + padding: 0.24rem 0.45rem; font-size: 0.82rem; line-height: 1.1; } @@ -983,19 +992,6 @@ td select.tom-dark { } } -/* Medium-narrow screens */ -@media (min-width: 421px) and (max-width: 576px) { - .btn-group-compact .btn { - padding: 0.24rem 0.45rem; /* ciaśniej */ - font-size: 0.82rem; - line-height: 1.1; - } - - .btn-group-compact .btn-text { - font-size: 0.75rem; - } -} - /* ================================================ RESPONSIVE NAVBAR @@ -2555,18 +2551,6 @@ form[data-unsaved-warning="true"].is-dirty::after { border-bottom-left-radius: 0 !important; } -.app-navbar .container-xxl { - row-gap: .55rem; -} - -.app-navbar__actions { - min-width: 0; -} - -.app-navbar__actions .btn { - min-width: 0; -} - @media (max-width: 767.98px) { .table-responsive { overflow-x: auto !important; @@ -2977,48 +2961,23 @@ input[type="checkbox"].form-check-input, white-space: nowrap; cursor: pointer; } -.share-page-toolbar { - gap: .75rem; -} -.share-page-toolbar__spacer { - flex: 1 1 auto; -} + .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; } -@media (max-width: 767.98px) { - .create-list-input-group { - flex-wrap: nowrap !important; - } - .create-list-input-group > .form-control { - min-width: 0; - } - .create-list-input-group > #tempToggle { - min-width: 8.75rem; - font-size: .92rem; - } - .share-page-toolbar { - justify-content: flex-end; - } - .share-page-toolbar__spacer { - display: none; - } - .hide-purchased-switch { - padding-left: 2.95rem; - } -} - /* unified bootstrap-like switches */ .switch-grid { @@ -3085,17 +3044,7 @@ input[type="checkbox"].form-check-input, width: 100%; } -@media (max-width: 767.98px) { - .switch-grid { - grid-template-columns: 1fr; - } - - .hide-purchased-switch.form-check.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; @@ -3106,6 +3055,7 @@ input[type="checkbox"].form-check-input, align-items: center; justify-content: space-between; gap: .8rem; + row-gap: .55rem; flex-wrap: nowrap; } @@ -3123,6 +3073,7 @@ input[type="checkbox"].form-check-input, display: inline-flex; align-items: center; justify-content: center; + min-width: 0; min-height: var(--nav-btn-height); padding: .6rem .95rem; white-space: nowrap; @@ -3217,7 +3168,9 @@ input[type="checkbox"].form-check-input, display: block; } -/* share page toolbar and header buttons */ +/* ========================================================= + Share page toolbar and shared-list header actions +========================================================= */ .share-page-toolbar { display: flex; align-items: center; @@ -3226,6 +3179,10 @@ input[type="checkbox"].form-check-input, width: 100%; } +.share-page-toolbar__spacer { + flex: 1 1 auto; +} + .share-page-toolbar .form-check { margin-bottom: 0; } @@ -3289,10 +3246,19 @@ input[type="checkbox"].form-check-input, 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; } @@ -4143,6 +4109,9 @@ input[type="checkbox"].form-check-input, } +/* ========================================================= + Shopping item rows: shared base alignment + mobile fixes +========================================================= */ /* v10.2 item row consistency and mobile share fixes */ .shopping-item-text { line-height: 1.35; @@ -4430,111 +4399,10 @@ body.sorting-active .shopping-item-row .large-checkbox { } /* 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; -} - -.endpoint-list_share .shopping-item-main, -.endpoint-shared_list .shopping-item-main { - align-items: center; -} - -.endpoint-list_share .shopping-item-content, -.endpoint-shared_list .shopping-item-content { - flex: 1 1 auto; - min-width: 0; - width: 100%; -} - -.endpoint-list_share .shopping-item-head, -.endpoint-shared_list .shopping-item-head { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - align-items: center; - column-gap: .65rem; - row-gap: .35rem; -} - -.endpoint-list_share .shopping-item-text, -.endpoint-shared_list .shopping-item-text { - display: flex; - flex-wrap: wrap; - align-items: center; - align-content: center; - min-width: 0; - width: 100%; - gap: .35rem; -} - -.endpoint-list_share .shopping-item-name, -.endpoint-shared_list .shopping-item-name { - display: inline; - min-width: 0; - max-width: 100%; - white-space: normal; - overflow-wrap: anywhere; - word-break: break-word; -} - -.endpoint-list_share .shopping-item-text .info-line, -.endpoint-shared_list .shopping-item-text .info-line { - display: block; - flex: 0 0 100%; - width: 100%; - margin-top: .15rem; - white-space: normal; - overflow-wrap: anywhere; - word-break: break-word; -} - -.endpoint-list_share .shopping-item-actions, -.endpoint-shared_list .shopping-item-actions { - display: inline-flex; - flex-wrap: nowrap; - align-items: center; - align-self: center; - justify-content: flex-end; - 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; -} - -.endpoint-list_share .shopping-item-main > .large-checkbox, -.endpoint-shared_list .shopping-item-main > .large-checkbox, -.endpoint-view_list .shopping-item-main > .large-checkbox { - align-self: center; -} - -@media (max-width: 575.98px) { - .endpoint-list_share .shopping-item-head, - .endpoint-shared_list .shopping-item-head { - grid-template-columns: minmax(0, 1fr) auto; - align-items: start; - } - - .endpoint-list_share .shopping-item-actions, - .endpoint-shared_list .shopping-item-actions { - align-self: start; - gap: .3rem; - } - - .endpoint-list_share .shopping-item-actions .btn, - .endpoint-shared_list .shopping-item-actions .btn { - min-width: 2.15rem; - padding: .32rem .45rem; - } -} - -/* hotfix 2026-03-15 v4: /share parity with /list */ -.endpoint-list_share .shopping-item-row, -.endpoint-shared_list .shopping-item-row { padding: .8rem .95rem; } @@ -4606,8 +4474,10 @@ body.sorting-active .shopping-item-row .large-checkbox { 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; } @@ -4621,16 +4491,12 @@ body.sorting-active .shopping-item-row .large-checkbox { } .endpoint-list_share .shopping-item-main > .large-checkbox, -.endpoint-shared_list .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; } -.endpoint-list_share input[type="checkbox"].large-checkbox::before, -.endpoint-shared_list input[type="checkbox"].large-checkbox::before { - font-size: 1.75em; -} - @media (max-width: 575.98px) { .endpoint-list_share .shopping-item-main, .endpoint-shared_list .shopping-item-main { @@ -4654,6 +4520,7 @@ body.sorting-active .shopping-item-row .large-checkbox { .endpoint-list_share .shopping-item-actions, .endpoint-shared_list .shopping-item-actions { + align-self: start; width: auto; margin-left: auto; gap: .25rem; @@ -4666,6 +4533,11 @@ body.sorting-active .shopping-item-row .large-checkbox { } } +.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; @@ -5117,6 +4989,8 @@ body.sorting-active .shopping-item-row .large-checkbox { 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, @@ -5131,74 +5005,9 @@ body:not(.sorting-active) .drag-handle { } -/* final hotfix 2026-03-17: consistent password toggle on auth/admin */ -.ui-password-group { - display: flex !important; - flex-wrap: nowrap !important; - align-items: stretch !important; - gap: 0 !important; - width: 100%; -} - -.ui-password-group > .form-control { - flex: 1 1 auto !important; - width: 1% !important; - min-width: 0 !important; - max-width: none !important; - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; - border-right: 0 !important; -} - -.ui-password-group > .ui-password-toggle { - appearance: none; - -webkit-appearance: none; - display: inline-flex !important; - align-items: center; - justify-content: center; - flex: 0 0 46px !important; - width: 46px !important; - min-width: 46px !important; - padding: 0 !important; - margin: 0 !important; - background: var(--dark-700) !important; - color: var(--text-strong) !important; - border: 1px solid var(--dark-300) !important; - border-left: 0 !important; - border-top-right-radius: 14px !important; - border-bottom-right-radius: 14px !important; - border-top-left-radius: 0 !important; - border-bottom-left-radius: 0 !important; - box-shadow: none !important; - outline: none !important; - line-height: 1; - transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; -} - -.ui-password-group > .ui-password-toggle:hover, -.ui-password-group > .ui-password-toggle:focus, -.ui-password-group > .ui-password-toggle:focus-visible { - background: var(--dark-800) !important; - color: #fff !important; - border-color: var(--primary) !important; - box-shadow: 0 0 0 .25rem rgba(24, 64, 118, .18) !important; -} - -.ui-password-group > .ui-password-toggle.is-active { - background: #2a3550 !important; - color: #fff !important; -} - -@media (max-width: 575.98px) { - .ui-password-group > .ui-password-toggle { - flex-basis: 44px !important; - width: 44px !important; - min-width: 44px !important; - } -} - - -/* final hotfix 2026-03-17b: password toggle parity on login/system-auth/admin-users */ +/* ========================================================= + Password toggle group: shared final version for login/auth/admin +========================================================= */ .ui-password-group { display: flex !important; flex-wrap: nowrap !important; @@ -5647,7 +5456,9 @@ body:not(.sorting-active) .drag-handle { } -/* mobile user chip 2026-03-19 */ +/* ========================================================= + Mobile navbar and user chip +========================================================= */ .app-navbar__meta--mobile { display: none; } @@ -5667,16 +5478,28 @@ body:not(.sorting-active) .drag-handle { } @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) { @@ -5701,26 +5524,6 @@ body:not(.sorting-active) .drag-handle { } } - -/* mobile navbar layout fix 2026-03-19 */ -@media (max-width: 991.98px) { - .app-navbar .container-xxl { - grid-template-columns: minmax(0, 1fr) auto auto; - } - - .app-navbar__meta--mobile { - grid-column: 2; - justify-self: end; - min-width: 0; - max-width: min(42vw, 12rem); - } - - .app-mobile-menu { - grid-column: 3; - justify-self: end; - } -} - @media (max-width: 430px) { .app-navbar .container-xxl { grid-template-columns: minmax(0, 1fr) auto auto; @@ -5884,14 +5687,6 @@ body:not(.sorting-active) .drag-handle { align-items: center; } - .endpoint-list_share .shopping-item-head, - .endpoint-shared_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-list_share .shopping-item-main > .large-checkbox, @@ -5907,3 +5702,30 @@ body:not(.sorting-active) .drag-handle { justify-self: auto; } } + +/* hotfix 2026-03-30: first list item visual parity on /list and /share */ +.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; +} diff --git a/shopping_app/static/css/style_bk.zip b/shopping_app/static/css/style_bk.zip new file mode 100644 index 0000000..ec10b2d Binary files /dev/null and b/shopping_app/static/css/style_bk.zip differ diff --git a/shopping_app/static/css/style_nieuporzadkowane.css b/shopping_app/static/css/style_nieuporzadkowane.css deleted file mode 100644 index 00d406c..0000000 --- a/shopping_app/static/css/style_nieuporzadkowane.css +++ /dev/null @@ -1,5859 +0,0 @@ -/* ========================================================= - 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 (inputs, selects, switches, placeholders) -========================================================= */ -.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.25rem 0.5rem; - font-size: 0.82rem; - line-height: 1.1; - } - - .btn-group-compact .btn-text { - font-size: 0.75rem; - } -} - -/* Medium-narrow screens */ -@media (min-width: 421px) and (max-width: 576px) { - .btn-group-compact .btn { - padding: 0.24rem 0.45rem; /* ciaśniej */ - 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 { - flex-wrap: wrap; - gap: 0.55rem; - } - - .input-group > .form-control, - .input-group > .form-select, - .input-group > .btn, - .input-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 { - min-width: 52px; -} - -.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 .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; -} - -.app-navbar .container-xxl { - row-gap: .55rem; -} - -.app-navbar__actions { - min-width: 0; -} - -.app-navbar__actions .btn { - min-width: 0; -} - -@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; -} -.share-page-toolbar { - gap: .75rem; -} -.share-page-toolbar__spacer { - flex: 1 1 auto; -} -.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; -} -@media (max-width: 767.98px) { - .create-list-input-group { - flex-wrap: nowrap !important; - } - .create-list-input-group > .form-control { - min-width: 0; - } - .create-list-input-group > #tempToggle { - min-width: 8.75rem; - font-size: .92rem; - } - .share-page-toolbar { - justify-content: flex-end; - } - .share-page-toolbar__spacer { - display: none; - } - .hide-purchased-switch { - padding-left: 2.95rem; - } -} - - -/* 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%; -} - -@media (max-width: 767.98px) { - .switch-grid { - grid-template-columns: 1fr; - } - - .hide-purchased-switch.form-check.app-switch { - width: 100%; - } -} - - -/* 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; - 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-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 header buttons */ -.share-page-toolbar { - display: flex; - align-items: center; - justify-content: flex-end; - gap: .75rem; - width: 100%; -} - -.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; - } - - .hide-purchased-switch.form-check.app-switch { - width: 100%; - } - - .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; -} - -.ui-password-group { - flex-wrap: nowrap; -} - -.ui-password-group > .form-control { - min-width: 0; -} - -.ui-password-group > .ui-password-toggle { - flex: 0 0 auto; - width: auto; - min-width: 3rem; -} - -@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; -} - - -/* 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 */ -.endpoint-list_share .shopping-item-row, -.endpoint-shared_list .shopping-item-row { - overflow: hidden; -} - -.endpoint-list_share .shopping-item-main, -.endpoint-shared_list .shopping-item-main { - align-items: center; -} - -.endpoint-list_share .shopping-item-content, -.endpoint-shared_list .shopping-item-content { - flex: 1 1 auto; - min-width: 0; - width: 100%; -} - -.endpoint-list_share .shopping-item-head, -.endpoint-shared_list .shopping-item-head { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - align-items: center; - column-gap: .65rem; - row-gap: .35rem; -} - -.endpoint-list_share .shopping-item-text, -.endpoint-shared_list .shopping-item-text { - display: flex; - flex-wrap: wrap; - align-items: center; - align-content: center; - min-width: 0; - width: 100%; - gap: .35rem; -} - -.endpoint-list_share .shopping-item-name, -.endpoint-shared_list .shopping-item-name { - display: inline; - min-width: 0; - max-width: 100%; - white-space: normal; - overflow-wrap: anywhere; - word-break: break-word; -} - -.endpoint-list_share .shopping-item-text .info-line, -.endpoint-shared_list .shopping-item-text .info-line { - display: block; - flex: 0 0 100%; - width: 100%; - margin-top: .15rem; - white-space: normal; - overflow-wrap: anywhere; - word-break: break-word; -} - -.endpoint-list_share .shopping-item-actions, -.endpoint-shared_list .shopping-item-actions { - display: inline-flex; - flex-wrap: nowrap; - align-items: center; - align-self: center; - justify-content: flex-end; - 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; -} - -.endpoint-list_share .shopping-item-main > .large-checkbox, -.endpoint-shared_list .shopping-item-main > .large-checkbox, -.endpoint-view_list .shopping-item-main > .large-checkbox { - align-self: center; -} - -@media (max-width: 575.98px) { - .endpoint-list_share .shopping-item-head, - .endpoint-shared_list .shopping-item-head { - grid-template-columns: minmax(0, 1fr) auto; - align-items: start; - } - - .endpoint-list_share .shopping-item-actions, - .endpoint-shared_list .shopping-item-actions { - align-self: start; - gap: .3rem; - } - - .endpoint-list_share .shopping-item-actions .btn, - .endpoint-shared_list .shopping-item-actions .btn { - min-width: 2.15rem; - padding: .32rem .45rem; - } -} - -/* hotfix 2026-03-15 v4: /share parity with /list */ -.endpoint-list_share .shopping-item-row, -.endpoint-shared_list .shopping-item-row { - padding: .8rem .95rem; -} - -.endpoint-list_share .shopping-item-main, -.endpoint-shared_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 { - flex: 1 1 auto; - min-width: 0; - width: auto; -} - -.endpoint-list_share .shopping-item-head, -.endpoint-shared_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 { - 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 { - 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-list_share .shopping-item-text .info-line, -.endpoint-shared_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 { - 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 { - display: inline-flex; - flex: 0 0 auto; - flex-wrap: nowrap; - align-items: center; - justify-content: flex-end; - gap: .35rem; - 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 { - flex: 0 0 auto; - align-self: center; -} - -.endpoint-list_share input[type="checkbox"].large-checkbox::before, -.endpoint-shared_list input[type="checkbox"].large-checkbox::before { - font-size: 1.75em; -} - -@media (max-width: 575.98px) { - .endpoint-list_share .shopping-item-main, - .endpoint-shared_list .shopping-item-main { - gap: .55rem; - } - - .endpoint-list_share .shopping-item-head, - .endpoint-shared_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 { - flex: 1 1 auto; - min-width: 0; - gap: .25rem; - } - - .endpoint-list_share .shopping-item-actions, - .endpoint-shared_list .shopping-item-actions { - 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; - } -} - -/* 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; - } -} - - -/* Login/auth password field fixes */ -.endpoint-login form .form-control, -.endpoint-system_auth form .form-control { - min-height: 42px; - border-radius: 14px !important; -} - -.endpoint-login .ui-password-group, -.endpoint-system_auth .ui-password-group { - display: flex !important; - flex-wrap: nowrap !important; - align-items: stretch !important; - gap: 0 !important; -} - -.endpoint-login .ui-password-group > .form-control, -.endpoint-system_auth .ui-password-group > .form-control { - width: auto !important; - flex: 1 1 auto !important; - max-width: none !important; - border-radius: 14px 0 0 14px !important; - border-right: 0 !important; -} - -.endpoint-login .ui-password-group > .ui-password-toggle, -.endpoint-system_auth .ui-password-group > .ui-password-toggle { - appearance: none; - -webkit-appearance: none; - display: inline-flex !important; - align-items: center; - justify-content: center; - flex: 0 0 46px !important; - width: 46px !important; - min-width: 46px !important; - padding: 0 !important; - margin: 0 !important; - color: rgba(255,255,255,.78); - background: #1f2738 !important; - border: 1px solid var(--bs-border-color, #495057) !important; - border-left: 0 !important; - border-radius: 0 14px 14px 0 !important; - outline: none !important; - box-shadow: none !important; - line-height: 1; - font-size: 1rem; -} - -.endpoint-login .ui-password-group > .ui-password-toggle:hover, -.endpoint-login .ui-password-group > .ui-password-toggle:focus, -.endpoint-system_auth .ui-password-group > .ui-password-toggle:hover, -.endpoint-system_auth .ui-password-group > .ui-password-toggle:focus { - color: #fff; - background: #253047 !important; - outline: none !important; - box-shadow: none !important; -} - -.endpoint-login .ui-password-group > .ui-password-toggle.is-active, -.endpoint-system_auth .ui-password-group > .ui-password-toggle.is-active { - background: #2a3550 !important; -} - -@media (max-width: 575.98px) { - .endpoint-login .ui-password-group, - .endpoint-system_auth .ui-password-group { - width: 100%; - } - - .endpoint-login .ui-password-group > .form-control, - .endpoint-system_auth .ui-password-group > .form-control { - width: auto !important; - flex: 1 1 auto !important; - } - - .endpoint-login .ui-password-group > .ui-password-toggle, - .endpoint-system_auth .ui-password-group > .ui-password-toggle { - flex: 0 0 44px !important; - width: 44px !important; - min-width: 44px !important; - } -} - -/* final hotfix 2026-03-17: list/share parity, pending spinner, auth inputs */ -.shopping-item-row { - position: relative; -} - -.shopping-item-spinner { - position: absolute; - top: .7rem; - right: .7rem; - z-index: 2; - pointer-events: none; -} - -.shopping-item-row.is-pending .shopping-item-actions { - opacity: .72; -} - -.shopping-item-actions { - display: inline-flex; - flex: 0 0 auto; - flex-wrap: nowrap; - align-items: center; - justify-content: flex-end; - gap: .35rem; - min-height: 2.35rem; -} - -.shopping-action-btn { - display: inline-flex !important; - align-items: center; - justify-content: center; - width: 2.35rem; - height: 2.35rem; - min-width: 2.35rem; - padding: 0 !important; - line-height: 1; - border-radius: .7rem !important; - flex: 0 0 2.35rem; -} - -.shopping-action-btn--wide { - width: auto; - min-width: 5.9rem; - padding: 0 .8rem !important; - flex: 0 0 auto; -} -.shopping-action-btn--countdown { - width: auto !important; - min-width: 3.2rem !important; - padding: 0 .65rem !important; - font-variant-numeric: tabular-nums; - opacity: 1 !important; -} - - -.endpoint-list_share .shopping-item-actions, -.endpoint-shared_list .shopping-item-actions, -.endpoint-list .shopping-item-actions { - min-height: 2.35rem; -} - -.endpoint-list_share .shopping-action-btn, -.endpoint-shared_list .shopping-action-btn, -.endpoint-list .shopping-action-btn { - width: 2.35rem; - height: 2.35rem; - min-width: 2.35rem; - border-radius: .7rem !important; -} - -.endpoint-list_share .shopping-action-btn--wide, -.endpoint-shared_list .shopping-action-btn--wide, -.endpoint-list .shopping-action-btn--wide { - width: auto; - min-width: 5.9rem; -} -.endpoint-list_share .shopping-action-btn--countdown, -.endpoint-shared_list .shopping-action-btn--countdown, -.endpoint-list .shopping-action-btn--countdown { - width: auto; - min-width: 3.2rem; -} - - -@media (max-width: 575.98px) { - .shopping-item-spinner { - top: .55rem; - right: .55rem; - } - - .shopping-action-btn, - .endpoint-list_share .shopping-action-btn, - .endpoint-shared_list .shopping-action-btn, - .endpoint-list .shopping-action-btn { - width: 2.15rem; - height: 2.15rem; - min-width: 2.15rem; - border-radius: .65rem !important; - } - - .shopping-action-btn--wide, - .endpoint-list_share .shopping-action-btn--wide, - .endpoint-shared_list .shopping-action-btn--wide, - .endpoint-list .shopping-action-btn--wide { - width: auto; - min-width: 5.4rem; - padding: 0 .72rem !important; - } -} - .shopping-action-btn--countdown, - .endpoint-list_share .shopping-action-btn--countdown, - .endpoint-shared_list .shopping-action-btn--countdown, - .endpoint-list .shopping-action-btn--countdown { - min-width: 3rem; - padding: 0 .55rem !important; - } -} - -.endpoint-login .card .form-control, -.endpoint-system_auth .card .form-control, -.endpoint-user_management .ui-password-group > .form-control, -.endpoint-user_management .modal .ui-password-group > .form-control { - min-height: 42px; - border-radius: 14px !important; -} - -.endpoint-user_management .ui-password-group, -.endpoint-user_management .modal .ui-password-group { - display: flex !important; - flex-wrap: nowrap !important; - align-items: stretch !important; - gap: 0 !important; -} - -.endpoint-user_management .ui-password-group > .form-control, -.endpoint-user_management .modal .ui-password-group > .form-control { - flex: 1 1 auto !important; - width: auto !important; - max-width: none !important; - border-radius: 14px 0 0 14px !important; - border-right: 0 !important; -} - -.endpoint-user_management .ui-password-group > .ui-password-toggle, -.endpoint-user_management .modal .ui-password-group > .ui-password-toggle { - appearance: none; - -webkit-appearance: none; - display: inline-flex !important; - align-items: center; - justify-content: center; - flex: 0 0 46px !important; - width: 46px !important; - min-width: 46px !important; - padding: 0 !important; - margin: 0 !important; - color: rgba(255,255,255,.78); - background: #1f2738 !important; - border: 1px solid var(--bs-border-color, #495057) !important; - border-left: 0 !important; - border-radius: 0 14px 14px 0 !important; - outline: none !important; - box-shadow: none !important; - line-height: 1; - font-size: 1rem; -} - -.endpoint-user_management .ui-password-group > .ui-password-toggle:hover, -.endpoint-user_management .ui-password-group > .ui-password-toggle:focus, -.endpoint-user_management .modal .ui-password-group > .ui-password-toggle:hover, -.endpoint-user_management .modal .ui-password-group > .ui-password-toggle:focus { - color: #fff; - background: #253047 !important; - box-shadow: none !important; -} - - -/* v14 fixes: share/list action parity + sort handle visibility */ -.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; - } -} - .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; -} - - -/* final hotfix 2026-03-17: consistent password toggle on auth/admin */ -.ui-password-group { - display: flex !important; - flex-wrap: nowrap !important; - align-items: stretch !important; - gap: 0 !important; - width: 100%; -} - -.ui-password-group > .form-control { - flex: 1 1 auto !important; - width: 1% !important; - min-width: 0 !important; - max-width: none !important; - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; - border-right: 0 !important; -} - -.ui-password-group > .ui-password-toggle { - appearance: none; - -webkit-appearance: none; - display: inline-flex !important; - align-items: center; - justify-content: center; - flex: 0 0 46px !important; - width: 46px !important; - min-width: 46px !important; - padding: 0 !important; - margin: 0 !important; - background: var(--dark-700) !important; - color: var(--text-strong) !important; - border: 1px solid var(--dark-300) !important; - border-left: 0 !important; - border-top-right-radius: 14px !important; - border-bottom-right-radius: 14px !important; - border-top-left-radius: 0 !important; - border-bottom-left-radius: 0 !important; - box-shadow: none !important; - outline: none !important; - line-height: 1; - transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; -} - -.ui-password-group > .ui-password-toggle:hover, -.ui-password-group > .ui-password-toggle:focus, -.ui-password-group > .ui-password-toggle:focus-visible { - background: var(--dark-800) !important; - color: #fff !important; - border-color: var(--primary) !important; - box-shadow: 0 0 0 .25rem rgba(24, 64, 118, .18) !important; -} - -.ui-password-group > .ui-password-toggle.is-active { - background: #2a3550 !important; - color: #fff !important; -} - -@media (max-width: 575.98px) { - .ui-password-group > .ui-password-toggle { - flex-basis: 44px !important; - width: 44px !important; - min-width: 44px !important; - } -} - - -/* final hotfix 2026-03-17b: password toggle parity on login/system-auth/admin-users */ -.ui-password-group { - display: flex !important; - flex-wrap: nowrap !important; - align-items: stretch !important; - width: 100% !important; -} - -.ui-password-group > .form-control { - flex: 1 1 auto !important; - width: 1% !important; - min-width: 0 !important; - min-height: 42px !important; - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; - border-right: 0 !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: 42px !important; - padding: 0 !important; - margin: 0 !important; - cursor: pointer !important; - background-color: var(--dark-700) !important; - background-image: none !important; - color: var(--text-strong) !important; - border: 1px solid var(--dark-300) !important; - border-left: 0 !important; - border-top-left-radius: 0 !important; - border-bottom-left-radius: 0 !important; - border-top-right-radius: 14px !important; - border-bottom-right-radius: 14px !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-color: var(--dark-800) !important; - color: #fff !important; - border-color: var(--primary) !important; - box-shadow: 0 0 0 .25rem rgba(24, 64, 118, .18) !important; - outline: none !important; -} - -.ui-password-group > .ui-password-toggle.is-active { - background-color: var(--dark-800) !important; - color: #fff !important; -} - -.ui-password-group > .ui-password-toggle > * { - pointer-events: none !important; -} - -.endpoint-login .ui-password-group > .ui-password-toggle, -.endpoint-system_auth .ui-password-group > .ui-password-toggle, -.endpoint-user_management .ui-password-group > .ui-password-toggle, -.endpoint-user_management .modal .ui-password-group > .ui-password-toggle { - background-color: var(--dark-700) !important; - color: var(--text-strong) !important; - border-color: var(--dark-300) !important; -} - -.endpoint-login .ui-password-group > .ui-password-toggle:hover, -.endpoint-login .ui-password-group > .ui-password-toggle:focus, -.endpoint-login .ui-password-group > .ui-password-toggle:focus-visible, -.endpoint-system_auth .ui-password-group > .ui-password-toggle:hover, -.endpoint-system_auth .ui-password-group > .ui-password-toggle:focus, -.endpoint-system_auth .ui-password-group > .ui-password-toggle:focus-visible, -.endpoint-user_management .ui-password-group > .ui-password-toggle:hover, -.endpoint-user_management .ui-password-group > .ui-password-toggle:focus, -.endpoint-user_management .ui-password-group > .ui-password-toggle:focus-visible, -.endpoint-user_management .modal .ui-password-group > .ui-password-toggle:hover, -.endpoint-user_management .modal .ui-password-group > .ui-password-toggle:focus, -.endpoint-user_management .modal .ui-password-group > .ui-password-toggle:focus-visible { - background-color: var(--dark-800) !important; - border-color: var(--primary) !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 user chip 2026-03-19 */ -.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__meta--mobile { - display: flex !important; - width: auto; - justify-content: flex-end; - min-width: 0; - } - - .app-user-chip--mobile { - display: inline-flex; - } -} - -@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; - } -} - - -/* mobile navbar layout fix 2026-03-19 */ -@media (max-width: 991.98px) { - .app-navbar .container-xxl { - grid-template-columns: minmax(0, 1fr) auto auto; - } - - .app-navbar__meta--mobile { - grid-column: 2; - justify-self: end; - min-width: 0; - max-width: min(42vw, 12rem); - } - - .app-mobile-menu { - grid-column: 3; - justify-self: end; - } -} - -@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; - } -} - -/* --- Main page progress summary cards --- */ -.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; - } -} diff --git a/shopping_app/static/css/style_old.css b/shopping_app/static/css/style_old.css deleted file mode 100644 index 6e3a3db..0000000 --- a/shopping_app/static/css/style_old.css +++ /dev/null @@ -1,417 +0,0 @@ -/* --- Rozmiary i kursory --- */ -.large-checkbox { - width: 1.5em; - height: 1.5em; -} - -.clickable-item { - cursor: pointer; -} - -/* --- Kolory tła (nadpisane klasy Bootstrapa) --- */ -.bg-success { - background-color: #1e7e34 !important; -} - -.btn-outline-light:hover { - background-color: #ffc107 !important; - color: #000 !important; - border-color: #ffc107 !important; -} - -.progress-dark { - background-color: #212529 !important; - border-radius: 20px !important; - overflow: hidden; -} - -.progress-bar { - border-radius: 0 !important; - transition: width 0.4s ease, background-color 0.4s ease; -} - -.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; -} - - -/* rodzic już ma position-relative */ -.progress-label { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - pointer-events: none; - /* klikalne przyciski obok paska nie ucierpią */ - white-space: nowrap; -} - -.progress-thin { - height: 12px; -} - -.item-not-checked { - background-color: #2c2f33 !important; - color: white !important; -} - -/* --- Styl przycisku wyboru pliku --- */ -input[type="file"]::file-selector-button { - background-color: #225d36; - color: #fff; - border: none; - padding: 0.5em 1em; - border-radius: 4px; - font-weight: bold; - cursor: pointer; - transition: background 0.2s; -} - -/* --- Ciemniejsze alerty Bootstrapa --- */ -.alert-success { - background-color: #225d36 !important; - color: #eaffea !important; - border-color: #174428 !important; -} - -.alert-danger { - background-color: #7a1f23 !important; - color: #ffeaea !important; - border-color: #531417 !important; -} - -.alert-info { - background-color: #1d3a4d !important; - color: #eaf6ff !important; - border-color: #152837 !important; -} - -.alert-warning { - background-color: #665c1e !important; - color: #fffbe5 !important; - border-color: #4d4415 !important; -} - -/* Badge - kolory pasujące do ciemnych alertów */ -.badge.bg-success, -.badge.text-bg-success { - background-color: #225d36 !important; - color: #eaffea !important; -} - -.badge.bg-danger, -.badge.text-bg-danger { - background-color: #7a1f23 !important; - color: #ffeaea !important; -} - -.badge.bg-info, -.badge.text-bg-info { - background-color: #1d3a4d !important; - color: #eaf6ff !important; -} - -.badge.bg-warning, -.badge.text-bg-warning { - background-color: #665c1e !important; - color: #fffbe5 !important; -} - -.badge.bg-secondary, -.badge.text-bg-secondary { - background-color: #343a40 !important; - color: #e2e3e5 !important; -} - -.badge.bg-primary, -.badge.text-bg-primary { - background-color: #184076 !important; - color: #e6f0ff !important; -} - -.badge.bg-light, -.badge.text-bg-light { - background-color: #444950 !important; - color: #f8f9fa !important; -} - -.badge.bg-dark, -.badge.text-bg-dark { - background-color: #181a1b !important; - color: #f8f9fa !important; -} - -/* --- Styl dla własnych checkboxów --- */ -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.5em; - font-weight: bold; - position: absolute; - left: 0; - top: 50%; - transform: translateY(-50%); - line-height: 1; - transition: color 0.2s; -} - -input[type="checkbox"].large-checkbox:checked::before { - content: '✓'; - color: #ffffff; -} - -input[type="checkbox"].large-checkbox:disabled::before { - opacity: 0.5; - cursor: not-allowed; -} - -input[type="checkbox"].large-checkbox:disabled { - cursor: not-allowed; -} - -#tempToggle { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -input.form-control { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.info-bar-fixed { - width: 100%; - color: #f8f9fa; - background-color: #212529; - border-radius: 12px 12px 0 0; - text-align: center; - padding: 10px 10px; - font-size: 0.95rem; - box-sizing: border-box; - margin-top: 2rem; - box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.25); -} - -@media (max-width: 768px) { - .info-bar-fixed { - position: static; - font-size: 0.85rem; - padding: 8px 4px; - border-radius: 0; - } -} - -.table-responsive { - overflow-x: auto; - -webkit-overflow-scrolling: touch; -} - -.table-responsive table { - min-width: 1000px; -} - -.bg-dark .form-control::placeholder { - color: #ccc !important; - opacity: 1; -} - -.toast-body { - color: #ffffff !important; - font-weight: 500 !important; -} - -.toast { - animation: fadeInUp 0.5s ease; -} - -@keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(20px); - } - - to { - opacity: 1; - transform: translateY(0); - } -} - -#mass-add-list li.active { - background: #198754 !important; - color: #fff !important; - border: 1px solid #000000 !important; -} - -#mass-add-list li { - transition: background 0.2s; -} - -.quantity-input { - width: 60px; - background: #343a40; - color: #fff; - border: 1px solid #495057; - 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; -} - -.list-group-item { - display: flex; - align-items: center; - justify-content: space-between; -} - -#empty-placeholder { - font-style: italic; - pointer-events: none; -} - -#items li.hide-purchased { - display: none !important; -} - -/* 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; -} - -.fade-out { - opacity: 0; - transition: opacity 0.5s ease; -} - -@media (pointer: fine) { - .only-mobile { - display: none !important; - } -} - - -.ts-dropdown .active { - background-color: #495057 !important; -} - -.pagination-dark .page-link { - color: #fff; - background-color: #212529; - border: 1px solid #495057; -} - -.pagination-dark .page-link:hover { - background-color: #343a40; - border-color: #6c757d; - color: #fff; -} - -.pagination-dark .page-item.active .page-link { - background-color: #0d6efd; - border-color: #0d6efd; - color: #fff; -} - -.pagination-dark .page-item.disabled .page-link { - background-color: #2b3035; - border-color: #495057; - color: #6c757d; -} - -.tom-dark .ts-control { - background-color: #212529 !important; - color: #fff !important; - border: 1px solid #495057 !important; - border-radius: 0.375rem; - min-height: 38px; - padding: 0.25rem 0.5rem; - box-sizing: border-box; -} - -.tom-dark .ts-control .item { - background-color: #343a40 !important; - color: #fff !important; - border-radius: 0.25rem; - padding: 2px 8px; - margin-right: 4px; -} - -.ts-dropdown { - background-color: #212529 !important; - color: #fff !important; - border: 1px solid #495057; - border-radius: 0.375rem; - z-index: 9999 !important; - max-height: 300px; - overflow-y: auto; -} - -.ts-dropdown .active { - background-color: #495057 !important; - color: #fff !important; -} - -td select.tom-dark { - width: 100%; - max-width: 100%; - box-sizing: border-box; -} - -.table-dark.table-striped tbody tr:nth-of-type(odd) { - background-color: rgba(255, 255, 255, 0.025); -} - -.table-dark tbody tr:hover { - background-color: rgba(255, 255, 255, 0.04); -} - -.table-dark thead th { - background-color: #1c1f22; - color: #e1e1e1; - font-weight: 500; - border-bottom: 1px solid #3a3f44; -} - -.table-dark td, -.table-dark th { - padding: 0.6rem 0.75rem; - vertical-align: middle; - border-top: 1px solid #3a3f44; -} - -.card .table { - border-radius: 0 !important; - overflow: hidden; - margin-bottom: 0; -} \ No newline at end of file diff --git a/shopping_app/templates/_list_progress.html b/shopping_app/templates/_list_progress.html index 04e3cae..e304d4f 100644 --- a/shopping_app/templates/_list_progress.html +++ b/shopping_app/templates/_list_progress.html @@ -2,30 +2,32 @@ {% set purchased_count = purchased_count or 0 %} {% set not_purchased_count = not_purchased_count or 0 %} {% set accounted_count = purchased_count + not_purchased_count %} -{% set percent = (purchased_count / total_count * 100) if total_count > 0 else 0 %} -{% set purchased_percent = (purchased_count / total_count * 100) if total_count > 0 else 0 %} -{% set not_purchased_percent = (not_purchased_count / total_count * 100) if total_count > 0 else 0 %} {% set remaining_count = (total_count - accounted_count) if total_count > accounted_count else 0 %} -{% set remaining_percent = (remaining_count / total_count * 100) if total_count > 0 else 100 %} + +{% set percent = ((purchased_count / total_count) * 100) if total_count > 0 else 0 %} +{% set purchased_percent = ((purchased_count / total_count) * 100) if total_count > 0 else 0 %} +{% set not_purchased_percent = ((not_purchased_count / total_count) * 100) if total_count > 0 else 0 %} +{% set remaining_percent = ((remaining_count / total_count) * 100) if total_count > 0 else 0 %}
+ style="width: {{ '%.6f'|format(purchased_percent) }}%" + aria-valuemin="0" aria-valuemax="100" + aria-valuenow="{{ percent|round(0)|int }}">
- Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0) }}%) + Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0)|int }}%) {% if total_expense > 0 %} — 💸 {{ '%.2f'|format(total_expense) }} PLN{% endif %}
- + \ No newline at end of file diff --git a/shopping_app/templates/list.html b/shopping_app/templates/list.html index 4bb1259..924a8f4 100644 --- a/shopping_app/templates/list.html +++ b/shopping_app/templates/list.html @@ -70,7 +70,7 @@
Postęp listy — {{ purchased_count }}/{{ total_count }} kupionych - ({{ percent|int }}%) + ({{ percent|round(0)|int }}%)