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

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

- - -
- - - -{% if not list.is_archived %} -
-
➕ Dodaj produkt
-
Wpisz nazwę produktu i ilość, potem kliknij Dodaj.
-
- - - -
-
-{% endif %} - -{% if not list.is_archived %} -
-
- 💰 Dodaj wydatek - - - 💸 Łączna suma: {{ '%.2f'|format(total_expense) }} PLN - -
- -
Wpisz kwotę wydatku i kliknij Zapisz.
- -
- - - -
-
-{% endif %} - - - - - -
- {% set receipt_pattern = 'list_' ~ list.id %} - -
-
-
-
-
-
📄 Paragony
-

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

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

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

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

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

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

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

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

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

-
- {% endif %} -
-
-
-
-
-
-
- - - - -{% block scripts %} - - - - - - - - -{% endblock %} - -{% endblock %} \ No newline at end of file