(position: relative; z-index: 1) uzavřel do vlastní vrstvy. */ z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.78); } .shop-modal[hidden] { display: none; } .shop-modal-box { width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; border: 1px solid var(--gold-faint); background: var(--black-warm); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); } .shop-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--gold-glow); } .shop-modal-head h3 { margin: 0; font-family: var(--display); font-size: 17px; letter-spacing: 1.5px; color: var(--gold-hover); font-weight: 400; } .shop-modal-close { background: transparent; border: none; color: var(--gold-dim); font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 6px; transition: color 0.2s; } .shop-modal-close:hover { color: var(--gold-hover); } .shop-modal-body { display: flex; flex-direction: column; gap: 16px; padding: 20px; } /* Modal je svislý flex — pole by se v něm jinak roztahovala na výšku (dědí flex-grow z .shop-field, kde slouží k dělení šířky v řádku). */ .shop-modal-body > .shop-field { flex: 0 0 auto; } .shop-modal-row { display: flex; flex-wrap: wrap; align-items: flex-end; /* políčka zarovnaná na spodní hranu, i když se popisek zalomí */ gap: 14px; } .shop-modal-row .shop-field { flex: 1 1 160px; } .shop-modal-row .shop-field-qty { flex: 0 0 110px; } .shop-modal-row .shop-field-amount { flex: 1 1 120px; } .shop-modal-row .shop-field-unit { flex: 1 1 120px; } .shop-modal-actions { display: flex; justify-content: flex-end; gap: 12px; padding-top: 4px; } .shop-modal-cancel { padding: 12px 20px; background: transparent; border: 1px solid var(--gold-faint); color: var(--gold-dim); font-family: var(--sans); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: color 0.2s, border-color 0.2s; } .shop-modal-cancel:hover { color: var(--gold-hover); border-color: var(--gold); } /* ========================================================================== NÁKUPNÍ SEZNAM — „bílý papír" -------------------------------------------------------------------------- Jediné světlé místo v celém adminu, a schválně: nákupní lístek se má číst jako papír, ne jako další tmavá tabulka. Proto tady NEpoužíváme zlaté proměnné, ale vlastní tmavé barvy na bílé. ========================================================================== */ .shop-paper { background: #fff; border: 1px solid var(--gold-faint); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); padding: 18px 22px 22px; margin-bottom: 20px; /* Celý papír je bezpatkový — nákupní lístek není pozvánka na akci. */ font-family: var(--sans); } .shop-paper * { font-family: var(--sans); } /* Horní lišta papíru: jen „+" vpravo, žádný nadpis */ .shop-paper-top { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 14px; } /* Kulaté, zelené, nenápadné — ať to nekřičí, ale je jasné, co dělá. POZOR: zelená patří JEN na bílý papír nákupního seznamu. Ve zbytku adminu (Produkty, Kategorie) se stejné tlačítko obléká do černozlaté — viz .shop-add-dark níž. */ .shop-add-open { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #cfe3cf; background: #eef6ee; color: #4a7c53; font-family: var(--sans); font-size: 21px; font-weight: 400; line-height: 1; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; } .shop-add-open:hover { background: #dcecdc; border-color: #a9cfae; color: #3d6a45; } .shop-add-open:focus-visible { outline: 2px solid #7fae86; outline-offset: 2px; } .shop-paper-empty { margin: 0; padding: 26px 0; text-align: center; font-family: var(--sans); font-size: 14px; color: #6b6459; } .shop-paper-empty strong { color: #1a1a1a; } /* ===== POLOŽKY ===== */ .shop-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .shop-item { display: block; } /* Celá položka je jedno velké tlačítko — klik koupeno / zpět do nákupu */ .shop-item-toggle { display: block; } .shop-item-hit { width: 100%; display: flex; align-items: center; gap: 16px; padding: 11px 14px; background: #fff; border: 1px solid #e6e1d6; text-align: left; cursor: pointer; font-family: var(--sans); transition: background 0.15s, border-color 0.15s; } .shop-item-hit:hover { background: #faf7ef; border-color: #cfc7b4; } .shop-item-hit:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } .shop-item-hit.is-busy { opacity: 0.5; cursor: progress; } .shop-item-main { display: block; flex: 1 1 auto; min-width: 0; } .shop-item-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; } /* Název, velikost i počet kusů jsou stejně velké a tučné — to je to podstatné, co se čte při nákupu na jeden pohled. Zbytek (poznámka, kdo přidal) je vedle nich schválně drobný. */ .shop-item-title { font-size: 18px; font-weight: 700; color: #111; overflow-wrap: anywhere; } /* Velikost balení („0,75 l") hned za názvem */ .shop-item-unit { font-size: 18px; font-weight: 700; color: #111; white-space: nowrap; } .shop-item-note { display: block; margin-top: 3px; font-size: 13px; color: #55504a; overflow-wrap: anywhere; } /* Kdo přidal / kdo koupil — jen pro admina, drobným písmem pod názvem */ .shop-item-meta { display: block; margin-top: 2px; font-size: 11px; line-height: 1.5; color: #8c857a; } /* Kolikrát to koupit — vpravo, výrazně */ .shop-item-times { flex: 0 0 auto; font-size: 18px; font-weight: 700; color: #111; white-space: nowrap; } /* --- Koupeno: celá položka zešedne a přeškrtne se --- */ .shop-item.is-done .shop-item-hit { background: #f2f2f2; border-color: #dcdcdc; } .shop-item.is-done .shop-item-title, .shop-item.is-done .shop-item-unit, .shop-item.is-done .shop-item-times { text-decoration: line-through; text-decoration-thickness: 1px; color: #9a9a9a; } .shop-item.is-done .shop-item-note { color: #a3a3a3; text-decoration: line-through; } .shop-item.is-done .shop-item-meta { color: #a3a3a3; } .shop-item.is-done .shop-item-hit:hover { background: #ececec; border-color: #cfcfcf; } /* ===== ÚKLID SEZNAMU ===== */ .shop-clear-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 18px; border-top: 1px solid var(--gold-glow); } .shop-clear-actions button { padding: 11px 20px; background: transparent; border: 1px solid var(--gold-faint); color: var(--gold-dim); font-family: var(--sans); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: color 0.25s, border-color 0.25s, background 0.25s; } .shop-clear-actions .btn-approve { color: #9be19b; border-color: rgba(95, 181, 106, 0.4); } .shop-clear-actions .btn-approve:hover { background: var(--green-bg); border-color: var(--green); } .shop-clear-actions .btn-delete:hover { color: var(--red-light); border-color: rgba(232, 85, 85, 0.5); background: var(--red-bg); } /* ===== ČÍSELNÍK: PRODUKTY + KATEGORIE ===== Výpisy používají rovnou třídy z Účtů (.users-list / .user-row / .user-actions), takže se chovají i vypadají stejně. Tady jsou jen drobnosti navíc. */ .shop-products, .shop-categories { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--gold-glow); } /* Nadpis sekce zůstává na střed s linkou přes celou šířku (jako u Účtů), „+" se posadí doprava nad ni. */ .shop-section-head { position: relative; } .shop-section-head .shop-add-open { position: absolute; right: 0; top: 50%; transform: translateY(-60%); /* linka nadpisu je dole, tak trochu výš */ } /* Hranaté černozlaté „+" — stejný jazyk jako zbytek adminu. (Zelené kulaté zůstává výhradně na bílém papíru nákupního seznamu.) */ .shop-add-dark { width: 36px; height: 36px; border-radius: 0; border: 1px solid var(--gold-faint); background: var(--black-warm); color: var(--gold-hover); font-size: 22px; } .shop-add-dark:hover { background: var(--gold); border-color: var(--gold); color: var(--black-warm); } .shop-add-dark:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .shop-nocat { opacity: 0.65; font-style: italic; } /* Řádek číselníku má o sloupec méně než účet — ať se druhý sloupec neroztahuje přes půl obrazovky. */ .shop-row { grid-template-columns: minmax(180px, 1.2fr) minmax(160px, 1fr) minmax(200px, auto); } /* ===== MOBIL ===== */ @media (max-width: 760px) { .shop-add-btn { width: 100%; } .shop-section-head .shop-add-open { transform: translateY(-65%); } /* Řádek zůstává vodorovný — velký terč se hodí na mobilu ještě víc. Jen se zmenší odsazení. */ .shop-item-hit { padding: 11px 12px; gap: 12px; } /* Modal sedí u spodní hrany („bottom sheet"), ale nikdy nepřeteče přes obrazovku: box je jen tak vysoký, jak potřebuje, a když by přerostl, uvnitř se scrolluje. */ .shop-modal { padding: 0; align-items: flex-end; } .shop-modal-box { max-width: none; max-height: 90vh; max-height: 90dvh; /* dvh = bez lišty prohlížeče; starší mobily spadnou na vh výš */ } /* Spodní odsazení respektuje „home indicator" na iPhonech. */ .shop-modal-body { gap: 14px; padding: 18px 18px 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } .shop-modal-row { flex-direction: column; align-items: stretch; } /* Ve svislém směru se pole NESMÍ roztahovat — jinak mezi nimi zůstávaly prázdné díry a modal byl zbytečně přes celou výšku. */ .shop-modal-row .shop-field, .shop-modal-row .shop-field-qty, .shop-modal-row .shop-field-amount, .shop-modal-row .shop-field-unit { flex: 0 0 auto; } .shop-modal-actions { flex-direction: column-reverse; } .shop-modal-actions button { width: 100%; } } /* Řádky číselníku se lámou pod sebe ve stejném bodě jako Účty (600px), ne v 760px jako zbytek téhle záložky. */ @media (max-width: 600px) { .shop-row { grid-template-columns: 1fr; } }