/* 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 (2026-07-10) — lets the footer pin to the bottom of the viewport via margin-top:auto below when the wallet is short/empty. */ .tk-page { max-width: 640px; margin: 0 auto; padding: 24px 16px 20px; display: flex; flex-direction: column; gap: 18px; min-height: calc(100vh - var(--navbar-h)); min-height: calc(100dvh - var(--navbar-h)); } /* 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. */ .tk-page .lg-footer-link { margin-top: auto; padding-top: 2px; } .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: 999px; padding: 4.8px 9.6px 4.8px 8px; } .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); } .tk-add-btn { flex-shrink: 0; } /* 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: 10px; 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: 12px; 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: 16px; 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); } /* 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); } .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: 8px; 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; color: var(--text-secondary); margin-left: auto; } .tk-reject-box { padding: 10px 12px; border-radius: 10px; 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: 10px; 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); 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: 9px; 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