/* ─── Player Drawer ─────────────────────────────────────────── */ .dink-drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(9,22,38,0.40); z-index: 280; /* iOS Safari sometimes won't forward a tap to `click` on a plain non-interactive div unless it looks clickable (cursor:pointer) — see feedback_mobile_interaction_blindspot memory. */ cursor: pointer; } .dink-drawer-backdrop.is-open { display: block; animation: fadeIn 0.18s ease; } .dink-drawer-panel { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw; background: #fff; box-shadow: -12px 0 40px rgba(9,22,38,0.18); flex-direction: column; z-index: 281; } .dink-drawer-panel.is-open { display: flex; animation: slideInRight 0.26s cubic-bezier(0.2,0.9,0.3,1.02); } .dink-drawer-header { padding: 20px 22px; border-bottom: 1px solid #EEF2F6; display: flex; align-items: center; gap: 13px; flex-shrink: 0; } .dink-drawer-close { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--c-border); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: auto; font-size: 18px; color: var(--c-text-2); line-height: 1; } .dink-drawer-body { flex: 1; overflow-y: auto; padding: 20px 22px; } .dink-drawer-footer { padding: 14px 22px; border-top: 1px solid #EEF2F6; display: flex; gap: 10px; flex-shrink: 0; } .dink-drawer-section { margin-bottom: 22px; } .dink-drawer-section-title { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; color: #5E6A76; text-transform: uppercase; margin-bottom: 11px; } .dink-drawer-info-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid #F0F3F6; font-size: 13.5px; } .dink-drawer-info-row:first-child { border-top: none; } .dink-drawer-info-row__label { color: #5E6A76; } .dink-drawer-info-row__value { font-weight: 650; color: var(--c-text); text-align: right; } /* ─── Member tags + notes (drawer sub-panel, club-management-plan Etap 3) ────── */ /* Distinct hue set from .dink-group-chip (blue/green/amber/gray) and .dink-sk (green/amber/gray) already used in the same drawer, so tags read as their own category. */ :root { --c-tag-violet: #6D4AA3; --c-tag-violet-tint: #F1EBFA; --c-tag-teal: #0E7A73; --c-tag-teal-tint: #E3F5F3; --c-tag-terracotta: #A04E2B; --c-tag-terracotta-tint: #FBE9E1; /* darkened from #B25730 — axe color-contrast on bold 12.5px chip text was 4.15:1, below the 4.5:1 AA threshold */ --c-tag-slate: #445269; --c-tag-slate-tint: #EDF0F4; } .dink-tag-list { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; } .dink-tag-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 4px 6px 4px 11px; border-radius: 999px; } .dink-tag-chip.violet { background: var(--c-tag-violet-tint); color: var(--c-tag-violet); } .dink-tag-chip.teal { background: var(--c-tag-teal-tint); color: var(--c-tag-teal); } .dink-tag-chip.terracotta { background: var(--c-tag-terracotta-tint); color: var(--c-tag-terracotta); } .dink-tag-chip.slate { background: var(--c-tag-slate-tint); color: var(--c-tag-slate); } .dink-tag-chip button { border: none; background: rgba(0,0,0,.08); color: inherit; width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; cursor: pointer; padding: 0; } /* Same pill for "+ Dodaj tag" and "+ Dodaj opiekuna"; two class names on purpose, so a selector for one never matches the other (a shared class broke exactly that in tests). */ .dink-add-tag-btn, .dink-add-guardian-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; padding: 4px 11px 4px 9px; border-radius: 999px; border: 1px dashed var(--c-border-2); background: #fff; color: var(--c-text-2); cursor: pointer; } .dink-add-tag-btn:hover, .dink-add-guardian-btn:hover { border-color: var(--c-primary); color: var(--c-primary); } .dink-tag-popover { margin-top: 10px; border: 1px solid var(--c-border); border-radius: 12px; padding: 12px; background: var(--c-bg-app); } .dink-tag-popover-row { display: flex; gap: 8px; margin-bottom: 9px; } .dink-tag-popover input[type="text"] { flex: 1; border: 1px solid var(--c-border-2); border-radius: 8px; padding: 7px 10px; font-size: 13px; font-family: inherit; outline: none; } .dink-tag-popover input[type="text"]:focus { border-color: var(--c-primary); } .dink-color-swatches { display: flex; gap: 7px; margin-bottom: 11px; } .dink-color-swatch { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; padding: 0; } .dink-color-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .dink-color-swatch:has(input:checked) { border-color: var(--c-text); box-shadow: 0 0 0 2px #fff inset; } .dink-color-swatch.violet { background: var(--c-tag-violet); } .dink-color-swatch.teal { background: var(--c-tag-teal); } .dink-color-swatch.terracotta { background: var(--c-tag-terracotta); } .dink-color-swatch.slate { background: var(--c-tag-slate); } .dink-existing-tag-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .dink-suggest-chip { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; cursor: pointer; border: 1px solid var(--c-border-2); background: #fff; color: var(--c-text-2); } .dink-suggest-chip:hover { border-color: var(--c-primary); color: var(--c-primary); } .dink-helper-text { font-size: 11.5px; color: var(--c-text-muted); margin-top: 2px; } .dink-note-view { font-size: 13.5px; line-height: 1.55; color: var(--c-text); white-space: pre-wrap; } .dink-note-meta { font-size: 11.5px; color: var(--c-text-muted); margin-top: 8px; } .dink-note-empty { font-size: 13.5px; color: var(--c-text-muted); font-style: italic; } .dink-icon-btn { border: none; background: transparent; color: var(--c-text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 2px 4px; } .dink-icon-btn:hover { color: var(--c-primary); } textarea.dink-note-edit { width: 100%; min-height: 84px; border: 1px solid var(--c-border-2); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; font-family: inherit; line-height: 1.5; resize: vertical; outline: none; color: var(--c-text); box-sizing: border-box; } textarea.dink-note-edit:focus { border-color: var(--c-primary); } .dink-note-edit-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 9px; } .dink-btn-mini { font-size: 12.5px; font-weight: 700; padding: 6px 13px; border-radius: 8px; border: 1px solid var(--c-border-2); background: #fff; color: var(--c-text-2); cursor: pointer; } .dink-btn-mini.primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; } .dink-btn-mini.success { background: var(--c-success); border-color: var(--c-success); color: #fff; } .dink-drawer-section-title--row { display: flex; align-items: center; justify-content: space-between; } /* Native
for the "add tag"/"edit note" popovers — no JS, matches the established club-leave-cta-ux pattern for collapsible admin-panel affordances. */ .dink-drawer-section > summary { cursor: pointer; list-style: none; } .dink-drawer-section > summary::-webkit-details-marker { display: none; } /* ─── Animations ─────────────────────────────────────────────── */ @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes popIn { from { opacity: 0; transform: scale(0.94) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ─── Search field with icon ─────────────────────────────────── */ .dink-search-wrap { position: relative; } .dink-search-wrap .dink-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; pointer-events: none; } .dink-search-wrap input { width: 100%; box-sizing: border-box; padding: 10px 13px 10px 36px; font-size: 14px; border: 1.5px solid #DCE3EA; border-radius: 10px; outline: none; font-family: inherit; color: var(--c-text); background: #fff; transition: border-color 0.15s; } .dink-search-wrap input:focus { border-color: var(--c-primary); } /* Sticky filter on long people lists (mobile only) — stays reachable while scrolling, parked right under the club topbar (56px). Desktop keeps it inline. */ @media (max-width: 991.98px) { .dink-search-wrap--sticky { position: sticky; top: 56px; /* height of .dink-topbar */ z-index: 20; max-width: none !important; margin: -4px -14px 16px; /* bleed to .club-content edges so the backdrop fills the row */ padding: 10px 14px; background: var(--c-bg-content); border-bottom: 1px solid var(--c-border); } } /* ─── Page header (all club admin pages) ────────────────────── */ .dink-page-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; } .dink-page-title { margin: 0; font-size: 26px; font-weight: 800; color: var(--c-text); letter-spacing: -0.5px; line-height: 1.15; } .dink-page-subtitle { font-size: 14px; color: var(--c-text-2); margin-top: 4px; } .dink-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ─── Reports: collapsible hours tree (Venue → Group → Day) ─── */ .dink-report-venue { background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; } .dink-report-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; margin: 0; text-align: left; border: 0; background: transparent; color: inherit; } button.dink-report-row { cursor: pointer; } button.dink-report-row:hover { background: #F1F4F7; } .dink-report-row + .dink-report-row, .dink-report-group, .dink-report-day { border-top: 1px solid var(--c-border); } .dink-report-group > .dink-report-row { padding-left: 34px; } .dink-report-day { padding: 8px 14px 8px 54px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--c-text-2); } .dink-report-name { font-weight: 700; color: var(--c-text); } .dink-report-group .dink-report-name { font-weight: 600; font-size: 14px; } .dink-report-hours { margin-left: auto; font-weight: 700; white-space: nowrap; color: var(--c-text); } .dink-report-day .dink-report-hours { font-weight: 600; } .dink-report-bar { flex: 1; height: 8px; max-width: 200px; background: #e9ecef; border-radius: 4px; overflow: hidden; } /* display:block is load-bearing, not tidiness: the fill is a , and an INLINE element ignores height, so `height:100%` resolved to zero and every proportion bar in every report rendered as an empty grey track. Latent since the reports shipped — the visual gate never caught it because a bar that is present but 0px tall looks like a deliberately light track, not a missing element. */ .dink-report-bar__fill { display: block; height: 100%; border-radius: 4px; background: var(--c-primary); } .dink-report-chevron { flex-shrink: 0; transition: transform 0.15s; color: var(--c-text-muted); } .dink-report-row[aria-expanded="true"] .dink-report-chevron { transform: rotate(90deg); } .dink-report-count { font-size: 12px; color: var(--c-text-muted); } /* Flat one-level list (Zajęcia per trener): fixed name + count columns so every bar starts and is measured from the same x — otherwise a long name shortens its own bar and the rows can't be compared. */ .dink-report-flat .dink-report-name { flex: 0 0 220px; min-width: 0; } .dink-report-flat .dink-report-count { flex: 0 0 72px; text-align: right; } @media (max-width: 575.98px) { .dink-report-flat .dink-report-name { flex: 1 1 auto; } .dink-report-flat .dink-report-bar { display: none; } } /* ─── Token-based flash messages ────────────────────────────── */ .dink-flash { border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; font-size: 14px; position: relative; } .dink-flash--ok { background: #E7F4EC; border: 1px solid #A8DDB8; color: #157A3F; } .dink-flash--err { background: #FDF1F1; border: 1px solid #F0B0B0; color: #C13333; } .dink-flash--warn { background: #FBEFD9; border: 1px solid #F0CE87; color: #8A5A0C; } .dink-flash--info { background: #EAF1F9; border: 1px solid #B6CEE6; color: #0C447C; } .dink-flash__close { position: absolute; top: 10px; right: 12px; background: none; border: none; cursor: pointer; font-size: 16px; color: inherit; opacity: 0.6; line-height: 1; } .dink-flash__close:hover { opacity: 1; } /* Generic "this is the row an action just changed" fade, driven by app.js's anchor-highlight listener — a full-page redirect after any form submit re-renders the whole list, so without this there is no visual link between "I clicked X" and "here's what changed" (2026-09-13 manual QA, Skrzynka z banku: recategorizing a transaction made it seem to vanish). */ .dink-row-highlight { animation: dink-row-highlight-fade 2.5s ease-out; } @keyframes dink-row-highlight-fade { 0% { background-color: var(--c-primary-tint); } 100% { background-color: transparent; } } /* Small, de-emphasized withdraw/decline action — sits below the primary action so it never competes visually with "Potwierdzam" / the confirmed-state flash. A