/* tickets.css — /p/my/tickets (Ticket Settings) full-page ticket management. Design source: WEBSYS_MD/MEMBERSHIP_REQUIREMENTS.md §15.4 / §6.1–§6.2. Boarding-pass style cards, one per ticket, full management actions — the dashboard wallet card (my.css .my-ticket) is glanceable/info-only; this page is where edit/delete/verify/WTS actually happen. */ /* Body background painted immediately, matching every other /p page — this file was the one gap, causing a white flash before JS mounts .tk-page (2026-07-08 fix). */ body { margin: 0; background: var(--space-gradient), var(--bg-primary); background-repeat: no-repeat; background-attachment: fixed; } /* min-height: 0 (2026-08-17 fix) — #tickets-root carries the .my-page class (see my.css) purely to inherit its display:flex/flex-direction:column so .tk-page below can stretch to full width (see the width:100% comment below). .my-page's own min-height:calc(100dvh - navbar-h) is a side effect nobody wanted here — .tk-page (its child) already has that exact same min-height rule and correctly subtracts navbar-h from it. On Android Chrome in standalone/PWA mode, #tickets-root's OWN copy of that calc was measured live to resolve to 100dvh alone, silently NOT subtracting navbar-h (837px measured vs the 781px .tk-page correctly computed, on a device where innerHeight was 837 and navbar was 56px) — #tickets-root ended up 56px taller than its own child, adding 56px of real extra scrollable space below where the footer visually sits. Overriding it to 0 here removes the redundant/buggy calc entirely; .tk-page's own min-height already does everything this page needs. */ #tickets-root { min-height: 0; } /* min-height (2026-07-10) — lets the footer pin to the bottom of the viewport via margin-top:auto below when the wallet is short/empty. */ /* width:100% (2026-08-14) — without it, .tk-page only had max-width, so it shrank to its widest child's content size (the stats row) instead of stretching to fill its flex parent (.my-page) when the ticket grid had too few cards to reach max-width on its own — page visibly jumped wider the moment a 2nd ticket forced the grid to fill the available width. */ .tk-page { width: 100%; max-width: 640px; margin: 0 auto; padding: 24px 16px 20px; display: flex; flex-direction: column; gap: 18px; min-height: calc(100vh - var(--navbar-total-h)); min-height: calc(100dvh - var(--navbar-total-h)); } .tk-content { display: flex; flex-direction: column; gap: 18px; } /* margin-top: auto (2026-07-10) pins the footer to the bottom of the viewport; padding-top keeps the tuned 18px gap + 2px = 20px total for the overflow case, where auto resolves to 0. padding-bottom: 0 (2026-08-17 fix) — #tickets-root also carries the .my-page class (see my.css), so without this override the footer here silently inherited .my-page .lg-footer-link's padding-bottom:20px on top of .tk-page's own 20px padding-bottom, doubling the gap to 40px. This line exists purely to break that cross-file leak. */ .tk-page .lg-footer-link { margin-top: auto; padding-top: 2px; padding-bottom: 0; } .tk-header { display: flex; flex-direction: column; gap: 10px; } .tk-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 9.6px; color: var(--text-secondary); text-decoration: none; cursor: pointer; background: rgba(var(--surface-rgb),0.06); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4.8px 9.6px 4.8px 8px; } @media (hover: hover) { .tk-back:hover { background: rgba(var(--surface-rgb),0.1); } } .tk-header__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .tk-title { font-size: 20px; font-weight: 700; } .tk-sub { font-size: 12px; color: var(--text-secondary); } /* Solid-fill CTA treatment (2026-08-13) — scoped to .tk-add-btn only, not .tk-btn--gold generally, since that shared modifier is also used by ~10 other lower-emphasis buttons across the site. Selector needs the .tk-btn--gold class repeated (0,2,0) to beat that shared modifier's own (0,1,0) rule, which is defined later in this file and was silently winning on source order alone, leaving the button looking like a plain outline instead of the intended solid fill (2026-08-13 fix). */ .tk-add-btn.tk-btn--gold { flex-shrink: 0; /* Same gold gradient as the site's other primary gold CTAs (my.css's round-trip badge/button), not a flat fill, for visual consistency. */ background: linear-gradient(120deg, var(--cta-grad-hi), var(--cta-grad-lo)); border-color: transparent; color: var(--brand-gold-ink); font-weight: 700; font-size: 13px; padding: 11px 20px; box-shadow: 0 4px 14px rgba(var(--accent-gold-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, .18); transition: transform 0.15s ease, box-shadow 0.15s ease; } @media (hover: hover) { .tk-add-btn.tk-btn--gold:hover { /* Re-declared, not inherited (2026-08-13 fix) — .tk-btn:hover below ties this rule's specificity outside of :hover and, being later in the file, was winning on hover and resetting `background` (shorthand) to none, silently wiping the gradient back to the plain neutral hover tint. */ background: linear-gradient(120deg, var(--cta-grad-hi), var(--cta-grad-lo)); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(var(--accent-gold-rgb), 0.6), inset 0 1px 0 rgba(255, 255, 255, .18); } } /* Advance ticket pickup reminder banner */ .tk-pickup-banner { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0; padding: 12px 14px; background: rgba(var(--accent-teal-rgb),0.08); border: 1px solid rgba(var(--accent-teal-rgb),0.35); border-radius: var(--radius-lg); font-size: 12.5px; line-height: 1.55; color: var(--text-primary); } .tk-pickup-banner__icon { font-size: 16px; flex-shrink: 0; line-height: 1.3; } .tk-pickup-banner__date { color: var(--accent-teal); font-weight: 700; } .tk-pickup-banner__link { color: var(--accent-teal); text-decoration: underline; white-space: nowrap; } /* Stats summary */ .tk-stats { display: flex; gap: 10px; } .tk-stat { flex: 1; padding: 12px; /* Dimmer than .tk-card (--bg-elevated) so the summary reads as a distinct, lower-emphasis strip rather than another ticket in the list. */ background: rgba(var(--surface-rgb),0.03); border: 1px solid var(--border); border-radius: var(--radius-xl); text-align: center; } .tk-stat__v { font-size: 22px; font-weight: 700; } .tk-stat__k { font-size: 10px; color: var(--text-secondary); margin-top: 2px; } .tk-list { display: flex; flex-direction: column; gap: 14px; } /* Responsive grid: 1 column (mobile) -> 2 (tablet) -> 3 (desktop), never jumping straight from 3 to 1. */ @media (min-width: 600px) { .tk-page { max-width: 1100px; } .tk-list { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; } .tk-card { height: 100%; } } @media (min-width: 1024px) { .tk-list { grid-template-columns: repeat(3, 1fr); } } .tk-card { position: relative; display: flex; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-3xl); overflow: hidden; } .tk-card--verified { border-color: var(--ticket-border, var(--border)); } .tk-card--sold { opacity: 0.55; filter: grayscale(0.6); } .tk-card__rail { width: 5px; flex-shrink: 0; } .tk-card__body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; } .tk-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .tk-card__head-left { display: flex; flex-direction: column; gap: 3px; } .tk-card__num { font-size: 12px; color: var(--text-secondary); font-weight: 600; } .tk-primary-badge { font-size: 10px; font-weight: 700; color: var(--accent-gold-text); } /* Head-pill colors for the sale states — reuses .my-badge's shape/sizing from my.css, just adding the color variants that don't exist there. */ .tk-badge--forsale { background: rgba(var(--accent-teal-rgb),0.16); color: var(--accent-teal-text); } .tk-badge--sold { background: rgba(var(--surface-rgb),0.08); color: var(--text-secondary); } .tk-hero { display: flex; gap: 22px; flex-wrap: wrap; } .tk-hero__item { display: flex; flex-direction: column; gap: 2px; } .tk-hero__k { font-size: 11px; color: var(--text-secondary); } .tk-hero__v { font-size: 28px; font-weight: 700; color: var(--text-primary); line-height: 1; } .tk-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .tk-meta__round { padding: 6px 10px; border-radius: var(--radius-md); font-size: 12px; font-weight: 700; background: rgba(var(--surface-rgb),0.06); } .tk-meta__date { display: flex; flex-direction: column; font-size: 11px; color: var(--text-secondary); } .tk-price { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-left: auto; } .tk-reg-dates { display: flex; flex-direction: column; gap: 2px; } .tk-reg-dates__line { font-size: 10px; color: var(--text-secondary); opacity: 0.75; } .tk-reject-box { padding: 10px 12px; border-radius: var(--radius-lg); background: rgba(var(--like-red-rgb), 0.1); color: var(--danger-text); font-size: 11px; font-weight: 400; } .tk-mod-notice { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--radius-lg); background: rgba(var(--accent-gold-rgb),0.12); border: 1px solid rgba(var(--accent-gold-rgb),0.3); } .tk-mod-notice__text { color: var(--accent-gold-text); font-size: 11px; font-weight: 500; flex: 1; } .tk-divider { height: 0; border-top: 1px solid var(--border); } /* Single action: hug the right edge at its natural size. 2+ actions: span the full row, text buttons sharing the space evenly while icon-only buttons (edit/delete) stay compact — and never wrap to a second line. */ .tk-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; } .tk-actions--single { justify-content: flex-end; } .tk-actions--single .tk-btn { flex: 0 0 auto; } .tk-actions:not(.tk-actions--single) .tk-btn:not(.tk-btn--icon) { flex: 1 1 0; min-width: 0; } /* Unverified+listed: verify button gets its own full-width row, the rest wrap below. Selector needs 5 class-level steps (not 3) to beat the `:not(.tk-actions--single) :not(.tk-btn--icon)` rule above (0,4,0) on specificity — a 3-step version silently loses to it. */ .tk-actions--verify-full { flex-wrap: wrap; } .tk-actions--verify-full.tk-actions .tk-btn:not(.tk-btn--icon):first-child { flex-basis: 100%; } .tk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border: 1px solid rgba(var(--surface-rgb),0.15); border-radius: var(--radius-md); background: rgba(var(--surface-rgb),0.05); color: var(--text-primary); font: 600 11px var(--font-thai); cursor: pointer; transition: background 0.12s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; /* .tk-btn was written for