/* ========================================
   HUMBOLDT EVENTS — COMPONENTS
   Buttons, cards, badges, forms, modals, tables
   ======================================== */

/* ========================================
   BUTTONS
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    /* A variant-less .btn — or a custom btn-* that only adds layout, like the venue geocode
       button — otherwise falls back to the browser's white button face on the dark theme.
       Every variant below sets its own background, so it wins over this default. */
    background: var(--bg-input);
    color: var(--text);
    border: none;
    border-radius: var(--radius-sm);
    padding: 10px 20px;
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-primary { background: var(--accent); color: var(--text-inverse); }
.btn-primary:hover { box-shadow: var(--shadow-glow); }

.btn-secondary {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: var(--accent); }

.btn-danger { background: var(--error); color: #fff; }
.btn-danger:hover { opacity: 0.9; }

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    padding: 6px 12px;
}
.btn-ghost:hover { color: var(--accent); background: var(--accent-muted); }

.btn-outline {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
}
.btn-outline:hover { background: var(--accent-muted); }

.btn-sm { padding: 6px 12px; font-size: var(--text-xs); }
.btn-lg { padding: 14px 28px; font-size: var(--text-lg); }
.btn-xl { padding: 18px 36px; font-size: var(--text-xl); }
.btn-icon { padding: 8px; min-width: 36px; min-height: 36px; }
.btn-block { width: 100%; }

.btn-group { display: inline-flex; gap: 0; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.btn-group .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.btn.active,
.btn-group .btn.active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }
/* Primary buttons are accent by default; give the selected state a visible ring */
.btn-primary.active { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--accent); }

/* ========================================
   CARDS
   ======================================== */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: all var(--transition-base);
}
.card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
}
.card-flat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}
.card-flat:hover { border-color: var(--border); box-shadow: none; }

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

/* ========================================
   EVENT CARDS
   ======================================== */

/* --- Grid variant --- */
.event-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.event-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.event-card__image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-input);
}
.event-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.event-card__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(120% 120% at 80% 10%, rgba(0, 255, 157, 0.12), transparent 50%),
        linear-gradient(160deg, var(--bg-card-hover), var(--bg-card));
}
.event-card__image--placeholder svg,
.event-card__image--placeholder .event-card__placeholder {
    width: 56px;
    height: 56px;
    color: var(--text-dim);
    opacity: 0.65;
}

.event-card__badges {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    right: var(--space-sm);
    display: flex;
    justify-content: space-between;
    gap: var(--space-xs);
    flex-wrap: wrap;
    z-index: 2;
}

/* Badges overlaid on card images need solid readable pills — works over
   real photos AND the placeholder background. */
.event-card__badges .badge {
    background: rgba(8, 10, 12, 0.82);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.event-card__badges .badge-price,
.event-card__badges .badge-free {
    color: var(--accent);
}
.event-card__badges .badge-cat-music     { color: var(--cat-music); }
.event-card__badges .badge-cat-comedy    { color: var(--cat-comedy); }
.event-card__badges .badge-cat-theater   { color: var(--cat-theater); }
.event-card__badges .badge-cat-festival  { color: var(--cat-festival); }
.event-card__badges .badge-cat-sports    { color: var(--cat-sports); }
.event-card__badges .badge-cat-community { color: var(--cat-community); }
.event-card__badges .badge-cat-arts      { color: var(--cat-arts); }
.event-card__badges .badge-cat-outdoor   { color: var(--cat-outdoor); }
.event-card__badges .badge-cat-food      { color: var(--cat-food); }
.event-card__badges .badge-cat-education { color: var(--cat-education); }
.event-card__badges .badge-cat-government{ color: var(--cat-government); }
.event-card__badges .badge-cat-market    { color: var(--cat-market); }
.event-card__badges .badge-cat-film      { color: var(--cat-film); }
.event-card__badges .badge-cat-dance     { color: var(--cat-dance); }
.event-card__badges .badge-cat-charity   { color: var(--cat-charity); }
.event-card__badges .badge-cat-other     { color: var(--cat-other); }

.event-card__body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex: 1;
}

.event-card__title {
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-card__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.event-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.event-card__footer {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md) var(--space-md);
    border-top: 1px solid var(--border-light);
    margin-top: auto;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* --- List variant --- */
.event-card--list {
    flex-direction: row;
    align-items: center;
}
.event-card--list .event-card__image {
    width: 120px;
    min-width: 120px;
    aspect-ratio: 1;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.event-card--list .event-card__body { flex: 1; padding: var(--space-md); }
@media (max-width: 639px) {
    .event-card--list .event-card__image {
        width: 80px;
        min-width: 80px;
    }
}

/* --- Sponsored/Featured event card --- */
.event-card--sponsored {
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
    position: relative;
}
.event-card--sponsored::before {
    content: 'Sponsored';
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    background: var(--accent);
    color: var(--text-inverse);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
    z-index: 3;
}

/* ========================================
   BADGES
   ======================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}
.badge-free     { background: var(--accent-muted); color: var(--accent); }
.badge-price    { background: var(--accent-muted); color: var(--accent); }
/* A postponed show is a warning, not a highlight: amber, not the accent green. */
.badge-postponed { background: rgba(251, 191, 36, 0.18); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.4); }
.badge-age      { background: rgba(255,255,255,0.1); color: var(--text-muted); }
[data-theme="light"] .badge-age { background: rgba(0,0,0,0.06); }
/* Status pills: shared by the admin tables and the dashboards. */
.status-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
}
.status-pill--running  { background: rgba(96,165,250,0.2); color: var(--info); }
.status-pill--completed{ background: var(--accent-muted); color: var(--accent); }
.status-pill--failed   { background: rgba(248,113,113,0.2); color: var(--error); }
.status-pill--partial  { background: rgba(255,183,77,0.2); color: var(--warning); }
.status-pill--pending  { background: rgba(255,183,77,0.2); color: var(--warning); }
.status-pill--active   { background: var(--accent-muted); color: var(--accent); }
.status-pill--draft    { background: rgba(255,255,255,0.1); color: var(--text-muted); }
.status-pill--paused   { background: rgba(255,183,77,0.2); color: var(--warning); }
.status-pill--paid     { background: var(--accent-muted); color: var(--accent); }
.status-pill--overdue  { background: rgba(248,113,113,0.2); color: var(--error); }

/* Membership badges: accent green for supporters, gold for sponsors, brighter gold for lifetime. */
.badge--supporter { background: var(--accent-muted); color: var(--accent); border: 1px solid rgba(0, 255, 157, 0.35); }
.badge--sponsor   { background: rgba(251, 191, 36, 0.18); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.4); }
.badge--lifetime  { background: rgba(251, 191, 36, 0.3); color: #ffd76a; border: 1px solid rgba(251, 191, 36, 0.7); font-weight: 700; }
.badge--muted   { background: rgba(255,255,255,0.1); color: var(--text-muted); }
[data-theme="light"] .badge--muted { background: rgba(0,0,0,0.06); }

.badge-pending  { background: rgba(255,183,77,0.2); color: var(--warning); }
.badge-approved { background: var(--accent-muted); color: var(--accent); }
.badge-rejected { background: rgba(248,113,113,0.2); color: var(--error); }
.badge-verified { background: var(--accent-muted); color: var(--accent); }
.badge-info     { background: rgba(96,165,250,0.2); color: var(--info); }

/* Category badges */
.badge-cat-music     { background: rgba(0,255,157,0.15); color: var(--cat-music); }
.badge-cat-comedy    { background: rgba(251,191,36,0.15); color: var(--cat-comedy); }
.badge-cat-theater   { background: rgba(192,132,252,0.15); color: var(--cat-theater); }
.badge-cat-festival  { background: rgba(251,146,60,0.15); color: var(--cat-festival); }
.badge-cat-sports    { background: rgba(56,189,248,0.15); color: var(--cat-sports); }
.badge-cat-community { background: rgba(167,139,250,0.15); color: var(--cat-community); }
.badge-cat-arts      { background: rgba(244,114,182,0.15); color: var(--cat-arts); }
.badge-cat-outdoor   { background: rgba(52,211,153,0.15); color: var(--cat-outdoor); }
.badge-cat-food      { background: rgba(251,113,133,0.15); color: var(--cat-food); }
.badge-cat-education { background: rgba(129,140,248,0.15); color: var(--cat-education); }
.badge-cat-government{ background: rgba(148,163,184,0.15); color: var(--cat-government); }
.badge-cat-market    { background: rgba(252,211,77,0.15); color: var(--cat-market); }
.badge-cat-film      { background: rgba(232,121,249,0.15); color: var(--cat-film); }
.badge-cat-dance     { background: rgba(45,212,191,0.15); color: var(--cat-dance); }
.badge-cat-charity   { background: rgba(248,113,113,0.15); color: var(--cat-charity); }
.badge-cat-other     { background: rgba(156,163,175,0.15); color: var(--cat-other); }

/* ========================================
   FORMS
   ======================================== */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-md);
    /* Anchor for absolutely-positioned children (the typeahead dropdown), which would
       otherwise position against some far-away ancestor and float in the wrong place. */
    position: relative;
}
.form-label {
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: 600;
    display: block;
}
.form-label--required::after {
    content: ' *';
    color: var(--error);
}
/* Native controls that ignored the theme: the file picker button and the range slider
   (its default accent is blue, which is off-palette). */
input[type="file"] {
    color: var(--text-muted);
    font-size: var(--text-sm);
    cursor: pointer;
}
input[type="file"]::file-selector-button {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 6px 12px;
    margin-right: var(--space-sm);
    font: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
}
input[type="file"]::file-selector-button:hover {
    border-color: var(--accent);
    color: var(--accent);
}
input[type="range"] { accent-color: var(--accent); }

.form-input,
.form-select,
.form-textarea {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
    line-height: 1.5;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-muted);
}
.form-input.error,
.form-select.error,
.form-textarea.error { border-color: var(--error); }
.form-input.error:focus { box-shadow: 0 0 0 3px rgba(248,113,113,0.2); }

/* ========================================
   MULTI-SELECT (checkbox dropdown)
   ======================================== */
.multi-select { position: relative; width: auto; min-width: 150px; }
.multi-select__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    width: 100%;
    cursor: pointer;
    text-align: left;
}
.multi-select__caret { color: var(--text-muted); font-size: 10px; margin-left: auto; }
.multi-select__panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid #3d3d49;
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
    padding: var(--space-xs);
}
.multi-select__panel--open { display: block; }
.multi-select__option {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text);
    white-space: nowrap;
}
.multi-select__option:hover { background: var(--bg-input); }
.multi-select__option:has(input:checked) { background: var(--accent-muted); }
.multi-select__option input { accent-color: var(--accent); cursor: pointer; }
.multi-select__option--action { font-weight: 600; color: var(--accent); }
.multi-select__divider { height: 1px; background: var(--border); margin: 4px 2px; }
.form-error { color: var(--error); font-size: var(--text-xs); margin-top: 2px; }
.form-hint  { color: var(--text-muted); font-size: var(--text-xs); margin-top: 2px; }
.form-textarea { min-height: 100px; resize: vertical; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}
@media (max-width: 639px) {
    .form-row { grid-template-columns: 1fr; }
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    font-size: var(--text-sm);
}
.form-checkbox input[type="checkbox"] {
    accent-color: var(--accent);
    width: 18px;
    height: 18px;
}

/* ========================================
   TOAST NOTIFICATIONS
   ======================================== */
.toast-container {
    position: fixed;
    bottom: calc(var(--bottom-bar-height) + 16px);
    right: 16px;
    left: 16px;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
@media (min-width: 768px) {
    .toast-container {
        bottom: 24px;
        left: auto;
        max-width: 380px;
    }
}

.toast {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: toast-in 300ms ease forwards;
    font-size: var(--text-sm);
    pointer-events: auto;
}
.toast-success { border-left: 3px solid var(--success); }
.toast-error   { border-left: 3px solid var(--error); }
.toast-info    { border-left: 3px solid var(--info); }
.toast-warning { border-left: 3px solid var(--warning); }
.toast-dismiss {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    font-size: var(--text-lg);
}
@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(10px); }
}

/* ========================================
   INLINE ALERTS
   ======================================== */
.alert {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}
.alert-success { background: var(--accent-muted); color: var(--accent); border: 1px solid var(--accent); }
.alert-error   { background: rgba(248,113,113,0.15); color: var(--error); border: 1px solid var(--error); }
.alert-warning { background: rgba(255,183,77,0.15); color: var(--warning); border: 1px solid var(--warning); }
.alert-info    { background: rgba(96,165,250,0.15); color: var(--info); border: 1px solid var(--info); }

/* ========================================
   PAGINATION
   ======================================== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-lg) 0;
}
.pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}
.pagination__btn:hover { border-color: var(--accent); color: var(--accent); }
a.pagination__btn { text-decoration: none; }
.pagination__btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.pagination__ellipsis { color: var(--text-muted); padding: 0 4px; }
.pagination__btn.active {
    background: var(--accent);
    color: var(--text-inverse);
    border-color: var(--accent);
}
.pagination__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.pagination__ellipsis { color: var(--text-dim); padding: 0 var(--space-xs); }

.load-more-btn {
    display: block;
    width: 100%;
    padding: var(--space-md);
    margin-top: var(--space-lg);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}
.load-more-btn:hover { border-color: var(--accent); color: var(--accent); }
.load-more-btn:disabled {
    opacity: 0.5;
    cursor: default;
    color: var(--text-muted);
}

/* ========================================
   SKELETON LOADERS
   ======================================== */
.skeleton {
    background: linear-gradient(90deg,
        var(--bg-card) 25%,
        var(--bg-input) 50%,
        var(--bg-card) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}
.skeleton-text { height: 16px; margin-bottom: 8px; }
.skeleton-text--sm { height: 12px; width: 60%; }
.skeleton-heading { height: 24px; width: 70%; margin-bottom: 12px; }
.skeleton-image { aspect-ratio: 16/9; border-radius: var(--radius-md); }
.skeleton-card {
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ========================================
   CONTENT TRANSITIONS
   ======================================== */
.content-area {
    transition: opacity var(--transition-base);
}
.content-area.loading {
    opacity: 0.4;
    pointer-events: none;
}

/* Stagger animation */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.stagger-item {
    animation: fade-in-up 400ms ease forwards;
    opacity: 0;
}
.stagger-item:nth-child(1) { animation-delay: 0ms; }
.stagger-item:nth-child(2) { animation-delay: 50ms; }
.stagger-item:nth-child(3) { animation-delay: 100ms; }
.stagger-item:nth-child(4) { animation-delay: 150ms; }
.stagger-item:nth-child(5) { animation-delay: 200ms; }
.stagger-item:nth-child(6) { animation-delay: 250ms; }
.stagger-item:nth-child(n+7) { animation-delay: 300ms; }

/* ========================================
   AVATAR
   ======================================== */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    object-fit: cover;
    background: var(--bg-input);
    border: 2px solid var(--border);
}
.avatar--sm { width: 28px; height: 28px; }
.avatar--lg { width: 64px; height: 64px; }
.avatar--xl { width: 96px; height: 96px; }
.avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-muted);
    color: var(--accent);
    font-weight: 700;
    font-size: var(--text-sm);
}

/* ========================================
   USER TYPE BADGES
   ======================================== */
.user-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
}
.user-type-badge--band    { background: rgba(192,132,252,0.2); color: #c084fc; }
.user-type-badge--venue   { background: rgba(251,146,60,0.2); color: #fb923c; }
.user-type-badge--advertiser { background: rgba(96,165,250,0.2); color: #60a5fa; }
.user-type-badge--verified { border: 1px solid var(--accent); }

/* ========================================
   ARTIST / VENUE CARDS
   ======================================== */
.entity-card {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    text-decoration: none;
    color: inherit;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.entity-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-sm);
}
.entity-card__image {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: var(--radius-md);
    object-fit: cover;
    background: var(--bg-input);
}
.entity-card__info { flex: 1; min-width: 0; }
.entity-card__name {
    font-weight: 700;
    font-size: var(--text-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.entity-card__meta { font-size: var(--text-sm); color: var(--text-muted); }

/* ========================================
   UPLOAD ZONE
   ======================================== */
.upload-zone {
    /* It is a <label>, so it needs to be a block/flex box: an inline box's border and
       padding do not push the line box, which made the dashed border ride up over the
       photo grid above it. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
}
.upload-zone:hover,
.upload-zone.drag-active {
    border-color: var(--accent);
    background: var(--accent-muted);
}
.upload-zone__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-md);
    color: var(--text-muted);
}
.upload-zone__text { color: var(--text-muted); font-size: var(--text-sm); }
.upload-zone__text strong { color: var(--accent); }
.upload-zone input[type="file"] { display: none; }

/* ========================================
   COMMENT
   ======================================== */
.comment {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border-light);
}
.comment:last-child { border-bottom: none; }
.comment__body { flex: 1; }
.comment__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}
.comment__author { font-weight: 600; font-size: var(--text-sm); }
.comment__time { color: var(--text-muted); font-size: var(--text-xs); }
.comment__text { font-size: var(--text-sm); line-height: 1.6; }
.comment__actions {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}
.comment__replies {
    margin-left: var(--space-xl);
    border-left: 2px solid var(--border-light);
    padding-left: var(--space-md);
}

/* ========================================
   TABS
   ======================================== */
.tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: all var(--transition-fast);
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: var(--font-sans);
}
.tab:hover { color: var(--text); }
.tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ========================================
   TABLES (admin)
   ======================================== */
.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.table th {
    background: var(--bg-input);
    padding: var(--space-md);
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}
.table td {
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--bg-card-hover); }

@media (max-width: 767px) {
    .table-responsive th { display: none; }
    .table-responsive td {
        display: flex;
        justify-content: space-between;
        padding: var(--space-sm) var(--space-md);
    }
    .table-responsive td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
        margin-right: var(--space-md);
    }
    .table-responsive tr {
        display: block;
        border-bottom: 1px solid var(--border);
        margin-bottom: var(--space-sm);
    }
}

/* ========================================
   EMPTY STATES
   ======================================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl) var(--space-lg);
    text-align: center;
}
.empty-state__icon {
    width: 120px;
    height: 120px;
    margin-bottom: var(--space-lg);
    opacity: 0.5;
}
.empty-state__title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-sm);
}
.empty-state__text {
    color: var(--text-muted);
    font-size: var(--text-base);
    margin-bottom: var(--space-lg);
    max-width: 400px;
}

/* ========================================
   STAT CARDS (admin)
   ======================================== */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
}
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}
.stat-card__label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
}
.stat-card__value {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--accent);
}
.stat-card__change {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

/* ========================================
   PROGRESS BAR
   ======================================== */
.progress-container {
    height: 8px;
    background: var(--bg-input);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background: var(--accent-gradient);
    width: 0%;
    transition: width var(--transition-base);
    border-radius: var(--radius-full);
}

/* ========================================
   FILTER BAR
   ======================================== */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
}
.filter-bar .form-select {
    width: auto;
    min-width: 140px;
    padding: 8px 12px;
    font-size: var(--text-sm);
}

.filter-trigger { display: none; }
@media (max-width: 1023px) {
    .filter-bar { display: none; }
    .filter-trigger { display: inline-flex; }
}

/* Slide-up filter panel (mobile) */
.filter-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--space-lg);
    z-index: var(--z-modal);
    transform: translateY(100%);
    transition: transform var(--transition-base);
    max-height: 70vh;
    overflow-y: auto;
}
.filter-panel.open { transform: translateY(0); }
.filter-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}
.filter-panel__backdrop {
    position: fixed;
    inset: 0;
    background: var(--bg-modal);
    z-index: calc(var(--z-modal) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}
.filter-panel__backdrop.open { opacity: 1; pointer-events: auto; }

/* ========================================
   VIEW TOGGLE (Grid / List)
   ======================================== */
.view-toggle {
    display: inline-flex;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    overflow: hidden;
}
.view-toggle__btn {
    padding: 6px 10px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
}
.view-toggle__btn:hover { color: var(--text); }
.view-toggle__btn.active {
    background: var(--accent);
    color: var(--text-inverse);
}

/* ========================================
   WENT WITH (event sidebar)
   ======================================== */
.went-with-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}
.went-with-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: var(--text-sm);
}
.went-with-list a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    text-decoration: none;
}
.went-with-list a:hover { color: var(--accent); }

/* @mentions inside comments */
.mention {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.mention:hover { text-decoration: underline; }

/* ========================================
   DIRECT MESSAGES
   ======================================== */
.dm-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    align-items: start;
}
@media (min-width: 900px) {
    .dm-layout { grid-template-columns: 320px minmax(0, 1fr); }
}
.dm-sidebar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.dm-thread-list { display: flex; flex-direction: column; max-height: 70vh; overflow-y: auto; }
.dm-thread {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-light);
    text-decoration: none;
    color: var(--text);
}
.dm-thread:hover { background: var(--bg-card-hover); }
.dm-thread--active { background: var(--accent-muted); }
.dm-thread__body { flex: 1; min-width: 0; }
.dm-thread__name { display: block; font-size: var(--text-sm); font-weight: 600; }
.dm-thread__snippet {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dm-thread__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.dm-thread__badge {
    background: var(--accent);
    color: var(--text-inverse);
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
}
.dm-thread--unread .dm-thread__name { color: var(--accent); }

.dm-pane {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    min-height: 420px;
    max-height: 75vh;
}
.dm-empty { display: flex; align-items: center; justify-content: center; flex: 1; padding: var(--space-lg); }
.dm-pane__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border);
}
.dm-pane__name { font-weight: 600; color: var(--text); text-decoration: none; }
.dm-pane__name:hover { color: var(--accent); }
.dm-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.dm-message { display: flex; flex-direction: column; align-items: flex-start; max-width: 78%; }
.dm-message--mine { align-self: flex-end; align-items: flex-end; }
.dm-bubble {
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    word-break: break-word;
}
.dm-message--mine .dm-bubble { background: var(--accent-muted); border-color: transparent; }
.dm-text { margin: 0; }
.dm-photo {
    display: block;
    max-width: 240px;
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
}
.dm-time { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.dm-composer {
    border-top: 1px solid var(--border);
    padding: var(--space-sm) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}
.dm-composer__input { min-height: 52px; resize: vertical; }
.dm-composer__actions { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

/* ========================================
   TOOLTIPS (js/tooltips.js)
   ======================================== */
.tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-tooltip);
    max-width: 280px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    color: var(--text);
    font-size: var(--text-xs);
    line-height: 1.35;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease;
}
.tooltip.open { opacity: 1; }
.tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
}
.tooltip[data-pos="top"]::after {
    top: 100%;
    border-top-color: var(--border);
}
.tooltip[data-pos="bottom"]::after {
    bottom: 100%;
    border-bottom-color: var(--border);
}

/* ========================================
   EVENT PHOTO TAGS
   ======================================== */
.event-photo__tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px 8px;
    font-size: var(--text-xs);
    background: var(--bg-card);
    border-top: 1px solid var(--border-light);
}
.event-photo__tag {
    color: var(--accent);
    text-decoration: none;
}
.event-photo__tag:hover { text-decoration: underline; }
.event-photo__tag-add {
    margin-left: auto;
    background: none;
    border: 1px dashed var(--border);
    border-radius: var(--radius-full);
    color: var(--text-muted);
    font-size: var(--text-xs);
    padding: 2px 8px;
    cursor: pointer;
}
.event-photo__tag-add:hover { color: var(--accent); border-color: var(--accent); }
.event-photo__tag-picker {
    padding: var(--space-sm);
    background: var(--bg-card);
    border-top: 1px solid var(--border);
}

/* ========================================
   AD SLOTS (Layout::adHtml / renderAdSlot)
   ======================================== */
/* Banners were left-aligned because they are block images with no container
   styling at all; centre them and give them breathing room. */
.promo-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: var(--space-lg) 0;
}
/* Small, deliberately understated label so advertising is never disguised.
   It is only rendered alongside a real creative (see Layout::adHtml). */
.promo-slot__label {
    align-self: center;
    padding: 1px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.6;
    cursor: help;
}
.promo-slot img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    display: block;
}
.promo-slot--featured { margin-top: var(--space-sm); }
/* Inside a sidebar card the banner fills the card instead of floating centred. */
/* Stacked rail creatives: js/ads.js appends more until the rail matches the page
   content height, so they need consistent spacing as a column. */
.promo-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}
/* In a rail card the "Advertisement" heading does the labelling, so the creative
   carries no badge of its own. */
.promo-slot--in-card { margin: 0; }
.sidebar-section .promo-slot { margin: 0; align-items: center; }
.sidebar-section .promo-slot__label { align-self: flex-start; }
/* Never stretch a creative: show it at its own size and only scale it DOWN to fit
   the rail. `width: 100%` here turned a 300x250 ad into a page-wide banner whenever
   the rail was laid out full width. */
.sidebar-section .promo-slot a { display: block; max-width: 100%; }
.sidebar-section .promo-slot img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

/* ========================================
   CHIP PICKER (friend tagging: "who was with you?")
   ======================================== */
.chip-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    max-height: 200px;
    overflow-y: auto;
}
.chip-picker__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-input);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.chip-picker__item:hover { border-color: var(--accent); }
.chip-picker__item:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-muted);
    color: var(--accent);
}
.chip-picker__item input { accent-color: var(--accent); }
.chip-picker__badge {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ========================================
   @-MENTIONS (picked tokens, see js/mentions.js)
   ======================================== */
.mention {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.mention:hover { text-decoration: underline; }
.mention--venue, .mention--artist, .mention--event { font-weight: 600; }

.mention-picker {
    position: relative;
    z-index: 40;
    margin-top: 4px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.mention-picker__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-light);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.mention-picker__item:last-child { border-bottom: none; }
.mention-picker__item:hover,
.mention-picker__item.is-active { background: var(--accent-muted); }
.mention-picker__label { font-weight: 600; }
.mention-picker__meta { color: var(--text-muted); font-size: var(--text-xs); white-space: nowrap; }

/* ========================================
   NOTIFICATIONS (bell list + /notifications/)
   ======================================== */
.notif-list {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.notif {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-light);
    color: var(--text);
    text-decoration: none;
    transition: background var(--transition-fast);
}
.notif:last-child { border-bottom: none; }
.notif:hover { background: var(--bg-card-hover); }
.notif--unread { background: var(--accent-muted); }
.notif__text {
    flex: 1;
    min-width: 0;
    font-size: var(--text-sm);
    line-height: 1.4;
}
.notif__time {
    display: block;
    color: var(--text-muted);
    font-size: var(--text-xs);
    margin-top: 2px;
}
.notif__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--accent);
}

/* ========================================
   MODALS
   ======================================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--bg-modal);
    z-index: var(--z-modal);
    display: none;
    align-items: flex-end;
    justify-content: center;
}
.modal-backdrop.open { display: flex; }
.modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--space-lg);
    animation: modal-in 300ms ease forwards;
}
.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}
.modal__close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--text-2xl);
    cursor: pointer;
    line-height: 1;
}
.modal__close:hover { color: var(--text); }

@media (min-width: 768px) {
    .modal-backdrop { align-items: center; }
    .modal {
        max-width: 560px;
        border-radius: var(--radius-lg);
        animation: modal-in-center 300ms ease forwards;
    }
}
@keyframes modal-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes modal-in-center {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ========================================
   FAVORITE BUTTON
   ======================================== */
.btn[data-favorite].active {
    background: var(--accent);
    color: var(--text-inverse);
    border-color: var(--accent);
}

/* ========================================
   HOLDING / SERVICE CARDS + CONTACT
   ======================================== */
.svc-icon { width: 52px; height: 52px; color: var(--accent); margin-bottom: var(--space-sm); }
.svc-icon svg { width: 100%; height: 100%; display: block; }
.print-bundle-card { display: flex; flex-direction: column; }
.print-bundle-card p { flex: 1; }

.contact-wrap {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-xl);
    max-width: 920px;
    margin: var(--space-lg) auto 0;
    text-align: left;
}
.contact-form .form-group { margin-bottom: var(--space-md); }
.contact-form label { display: block; margin-bottom: var(--space-xs); font-weight: 600; }
.contact-aside {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: var(--space-lg);
    align-self: start;
}
.holding-cta { text-align: center; margin-top: var(--space-lg); }
@media (max-width: 700px) { .contact-wrap { grid-template-columns: 1fr; } }

/* ========================================
   ADMIN "VIEW AS" MODE
   ======================================== */
.view-as-banner {
    background: var(--accent-muted);
    border-bottom: 1px solid var(--accent);
}
.view-as-banner__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-sm) var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    font-size: var(--text-sm);
    color: var(--accent);
}
.view-as-banner__inner strong { color: var(--accent); }

/* --- List view: full-width rows, not grid cells --- */
.event-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.event-list .event-card {
    width: 100%;
}
.event-card--list {
    min-height: 132px;
}
.event-card--list .event-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}
.event-card--list .event-card__title {
    font-size: var(--font-size-md);
    margin: 0;
}
.event-card--list .event-card__image img {
    height: 100%;
    object-fit: cover;
}
.event-card--list:hover {
    background: var(--bg-card-hover);
}
@media (max-width: 639px) {
    .event-card--list { min-height: 104px; }
}

/* List row internals (date/venue/price/categories live in the body, not the image) */
.event-card__badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.event-card--list .event-card__when { font-weight: 600; }
.event-card--list .event-card__venue { color: var(--text-muted); }
.event-card--list .event-card__meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.event-card__go {
    align-self: center;
    padding: 0 var(--space-md);
    color: var(--text-muted);
    font-size: 20px;
}
.event-card--list:hover .event-card__go { color: var(--accent); }

/* Sandbox mode: card payments are on Stripe test keys, and real venues and artists use this site
   before launch. Shown only where money is handled (checkout modal, Box Office tab, invoice and
   ticket pages, Services tab) — deliberately loud, solid amber with dark text, because an early
   subtle version was legible but easy to miss. */
.sandbox-notice {
    background: #ffb74d;
    color: #1a1200;
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 12px;
}
.sandbox-notice strong { color: #1a1200; font-weight: 800; }

/* ---- Ticket quantity picker (event page) ---------------------------------------------------- */
.ticket-picker .qty {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 2px;
}
.qty__btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.qty__btn:hover { background: var(--accent-muted); color: var(--accent); }
.qty__count { min-width: 1.6rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.ticket-picker__bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border);
}
.ticket-picker__sum { font-weight: 700; }
.ticket-picker__acts { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
@media (max-width: 560px) {
    .ticket-picker__bar { flex-direction: column; align-items: stretch; }
    .ticket-picker__acts .btn { flex: 1; }
}

/* A little air under the picker, so the fee note is not against the card's edge. */
.ticket-picker { padding-bottom: 2px; }
.ticket-picker + .text-xs { margin-bottom: 2px; }

/* ========================================
   SHARE SHEET
   Monochrome, label-led tiles: the palette
   rule keeps brand colours out, and the
   service names carry the meaning.
   ======================================== */
.share { display: inline-flex; }
.share__icon { flex: none; vertical-align: -3px; }

.share-modal__title { margin: 0; font-size: var(--text-xl); }
.share-modal__subject {
    margin: 0 0 var(--space-md);
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.share-modal__subject + .share-modal__detail {
    margin: calc(-1 * var(--space-sm)) 0 var(--space-md);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.share__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
.share__target {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--space-sm) 6px;
    background: var(--bg-input, var(--bg-card));
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.share__target:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}
.share__target .share__icon { width: 22px; height: 22px; }

.share__link-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: 4px;
}
.share__link {
    width: 100%;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.share__friend { margin-top: var(--space-md); }
.share__friend-title {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-md);
}
.share__friend-search { width: 100%; margin-bottom: var(--space-xs); }
.share__friend-results {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 4px;
}
.share__friend-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: 8px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
}
.share__friend-item:hover { background: var(--bg-input, rgba(255, 255, 255, .05)); }
.share__friend-item > span:nth-child(2) { flex: 1; min-width: 0; }
.share__friend-send { color: var(--accent); font-weight: 600; }
.share__friend-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex: none;
}
.share__friend-avatar--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input, rgba(255, 255, 255, .06));
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
}

.share__msg { margin: var(--space-sm) 0 0; font-size: var(--text-sm); min-height: 1em; }
.share__msg--success { color: var(--accent); }
.share__msg--error { color: var(--danger, #ff8fa3); }

/* Internal marker: this entry is demo content, hidden from the public. Dashed and muted so it
   reads as a staff note rather than a status of the event itself. */
.badge-demo {
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed var(--border);
    color: var(--text-muted);
}

/* Any form control that missed the .form-input/.form-select/.form-textarea class falls back to the
   browser's white default, which is unreadable on the dark theme. The admin pages and the
   band/venue dashboards (both body.admin) had several — the tour-date form, Create Event, Upload
   Menu, Posts, the Profile forms and an admin settings field. Style every control that is not a
   checkbox, radio, file or button; width stays with the layout. */
body.admin input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
body.admin select,
body.admin textarea {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.5;
}
body.admin input:focus,
body.admin select:focus,
body.admin textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-muted);
}
/* Native pickers follow the theme (the date field's calendar popup was white). */
[data-theme="dark"] body.admin input,
[data-theme="dark"] body.admin select,
[data-theme="dark"] body.admin textarea {
    color-scheme: dark;
}

/* House contest ad: an image alone does not say what it is, so a caption says it. */
.promo-slot--house { border: 1px solid var(--accent-muted); border-radius: var(--radius-md); overflow: hidden; }
.promo-cta { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.promo-slot--house .promo-cta img { display: block; width: 100%; height: auto; }
.promo-cta__body {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    background: var(--bg-input); border-top: 1px solid var(--border-light);
}
.promo-cta__eyebrow {
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
    color: var(--accent); border: 1px solid var(--accent-muted); border-radius: var(--radius-full);
    padding: 3px 9px; white-space: nowrap;
}
.promo-cta__title { font-weight: 700; font-size: 15px; }
.promo-cta__cta { margin-left: auto; color: var(--accent); font-weight: 700; white-space: nowrap; }
@media (max-width: 560px) {
    .promo-cta__body { flex-wrap: wrap; }
    .promo-cta__cta { margin-left: 0; }
}

/* Inline ad dropped into a long list (calendar timeline, or between loaded batches). It is a
   full-width banner, not a grid cell: in the events grid it spans every column. */
.promo-inline { grid-column: 1 / -1; margin: var(--space-md) 0; }
.promo-inline .promo-slot { margin: 0; width: 100%; align-items: stretch; }
.promo-inline .promo-slot img { width: 100%; height: auto; max-width: none; }

/* ---- Ticket seating (checkout) --------------------------------------------------------------
   Only seat-mapped tiers use these: the seating plan image and the seat buttons. A general-
   admission checkout renders no seat markup at all. */
.seat-tier .seat-map { display: block; max-width: 100%; height: auto; margin: 10px 0; border: 1px solid var(--border); border-radius: var(--radius-md); }
.seat-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.seat {
    min-width: 38px; padding: 6px 8px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text);
    font-size: 12px; font-weight: 600; cursor: pointer;
}
.seat:hover:not(:disabled) { border-color: var(--accent); }
.seat--chosen { background: var(--accent); color: #04221a; border-color: var(--accent); }
.seat--taken { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.seat-hint { margin: 6px 0 0; }

/* ========================================
   ACHIEVEMENTS / BADGES
   ======================================== */
.ach-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: flex-start;
}
.ach {
    width: 116px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    position: relative;
}
.ach:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.ach--sm { width: 68px; }
.ach__ring {
    position: relative;
    width: 104px;
    height: 104px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ach--sm .ach__ring { width: 64px; height: 64px; }
.ach__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    /* The art carries transparent padding; draw it larger than its slot, allowed to overlap a bit. */
    transform: scale(1.06);
}
.ach--sm .ach__img { transform: scale(1.0); }
.ach__num {
    position: absolute;
    left: 50%;
    bottom: 20%;
    transform: translateX(-50%);
    color: #ffe6a8;
    font-weight: 800;
    font-size: 22px;
    line-height: 1;
    text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}
.ach--sm .ach__num { font-size: 14px; bottom: 18%; }
.ach__stat {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 3px;
    white-space: nowrap;
}
/* Only a badge with no art yet falls back to a tile, so the circle lives here, not on the frame. */
.ach__fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.4));
    font-weight: 800;
    color: var(--accent);
    font-size: 1.5rem;
}
.ach__name {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4em;
    font-size: var(--text-xs);
    line-height: 1.2;
    margin-top: 6px;
    color: var(--text);
}
.ach--off .ach__name { color: var(--text-muted); }
.ach--off .ach__ring {
    filter: grayscale(0.85) brightness(0.62);
    opacity: 0.7;
}
.ach--sm .ach__name { display: none; }
.ach__prog {
    display: block;
    width: 60%;
    height: 4px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.08);
    margin: 6px 0 0;
    overflow: hidden;
}
.ach__prog > span { display: block; height: 100%; width: 0; background: var(--accent); }
.ach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--space-md);
    margin: var(--space-sm) 0 var(--space-lg);
}
.ach-group { margin-bottom: var(--space-lg); }
.ach-group__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
}
.ach-group__title { font-size: var(--text-md); margin: 0; }
.ach-group__count { color: var(--accent); font-weight: 700; font-size: var(--text-sm); }

/* Event-card badge hint: the badge(s) marking "going" here would earn you. */
.badge-hint {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 46px;
    height: 46px;
    cursor: pointer;
    z-index: 4;
}
.badge-hint__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
}
.badge-hint--stack::before,
.badge-hint--stack::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.22);
    z-index: -1;
}
.badge-hint--stack::before { transform: translate(4px, 4px); }
.badge-hint--stack::after { transform: translate(8px, 8px); }
.badge-hint__count {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: var(--accent);
    color: #04221a;
    font-weight: 800;
    font-size: 11px;
    line-height: 1;
    padding: 3px 5px;
    border-radius: var(--radius-full);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Badge detail popup */
.badge-pop {
    max-width: 540px;
    width: 92vw;
    padding: 0;
}
.badge-pop__scroll {
    max-height: 78vh;
    overflow-y: auto;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.badge-pop__card {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}
.badge-pop__art { flex: 0 0 150px; }
.badge-pop__img { width: 150px; height: 150px; object-fit: contain; display: block; }
.badge-pop__body { min-width: 0; }
.badge-pop__group {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--text-xs);
    color: var(--accent);
    font-weight: 700;
}
.badge-pop__name { margin: 2px 0 8px; font-size: var(--text-lg); }
.badge-pop__cond, .badge-pop__desc { margin: 0 0 8px; font-size: var(--text-sm); line-height: 1.45; }
.badge-pop__desc { color: var(--text-muted); }
.badge-pop__missing { margin: 4px 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.badge-pop__earned { margin: 4px 0 0; font-size: var(--text-sm); color: var(--accent); font-weight: 700; }
.badge-pop__prog {
    height: 6px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    margin: 8px 0 3px;
}
.badge-pop__prog > span { display: block; height: 100%; background: var(--accent); }
.badge-pop__stats {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: 8px;
}
.badge-pop__stats strong { color: var(--text); }
@media (max-width: 520px) {
    .badge-pop__card { flex-direction: column; align-items: center; text-align: center; }
}

/* Homepage intro: visible, descriptive copy Google can use for the snippet (the meta description
   alone was too thin, and the sidebar ad's alt text was being picked instead). */
.home-intro {
    max-width: 72ch;
    margin: 0 0 var(--space-lg);
    color: var(--text-muted);
    font-size: var(--text-md);
    line-height: 1.6;
}