/* ==========================================================================
   BGZ shared components — used on BOTH the public site and the dashboard.
   Naming: bgz-<block>, bgz-<block>__<element>, bgz-<block>--<modifier>.
   Values come from tokens.css only.
   ========================================================================== */

[x-cloak] { display: none !important; }

/* ── Buttons ── */
.bgz-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--bgz-space-2);
    padding: var(--bgz-space-2) var(--bgz-space-4);
    border: 1px solid transparent; border-radius: var(--bgz-radius-sm);
    font-family: inherit; font-size: var(--bgz-text-sm); font-weight: var(--bgz-weight-bold);
    line-height: 1.25; text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color var(--bgz-transition), color var(--bgz-transition), border-color var(--bgz-transition);
}
.bgz-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.bgz-btn--primary { background: var(--bgz-primary); color: var(--bgz-on-primary); }
.bgz-btn--primary:hover { background: var(--bgz-primary-hover); }

.bgz-btn--secondary { background: var(--bgz-surface); color: var(--bgz-text-muted); border-color: var(--bgz-border); }
.bgz-btn--secondary:hover { background: var(--bgz-surface-muted); color: var(--bgz-text); }

.bgz-btn--danger { background: var(--bgz-surface); color: var(--bgz-danger); border-color: color-mix(in srgb, var(--bgz-danger) 40%, white); }
.bgz-btn--danger:hover { background: var(--bgz-danger-soft); }

.bgz-btn--sm { padding: var(--bgz-space-1) var(--bgz-space-3); font-size: var(--bgz-text-xs); }

@media (max-width: 640px) {
    /* Comfortable tap targets on phones */
    .bgz-btn { padding: var(--bgz-space-3) var(--bgz-space-5); font-size: var(--bgz-text-base); }
    .bgz-btn--sm { padding: var(--bgz-space-2) var(--bgz-space-4); font-size: var(--bgz-text-sm); }
}

/* ── Form controls ── */
.bgz-label {
    display: block; margin-bottom: var(--bgz-space-1);
    font-size: var(--bgz-text-xs); font-weight: var(--bgz-weight-medium);
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--bgz-text-muted);
}
.bgz-label__hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--bgz-text-subtle); }

.bgz-input, .bgz-select, .bgz-textarea {
    width: 100%;
    padding: var(--bgz-space-2) var(--bgz-space-3);
    background: var(--bgz-surface); color: var(--bgz-text);
    border: 1px solid var(--bgz-border); border-radius: var(--bgz-radius-sm);
    font-family: inherit; font-size: var(--bgz-text-sm);
    transition: border-color var(--bgz-transition), box-shadow var(--bgz-transition);
}
.bgz-input:focus, .bgz-select:focus, .bgz-textarea:focus {
    outline: none; border-color: var(--bgz-primary);
    box-shadow: 0 0 0 3px var(--bgz-primary-soft);
}
.bgz-textarea { resize: vertical; min-height: 5rem; }

.bgz-check { display: inline-flex; align-items: center; gap: var(--bgz-space-2); font-size: var(--bgz-text-sm); color: var(--bgz-text); cursor: pointer; }
.bgz-check input { accent-color: var(--bgz-primary); width: 1rem; height: 1rem; }

.bgz-error { display: block; margin-top: var(--bgz-space-1); font-size: var(--bgz-text-xs); color: var(--bgz-danger); }

/* ── Form layout ── */
.bgz-form { display: flex; flex-direction: column; gap: var(--bgz-space-4); }
.bgz-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bgz-space-3); }
.bgz-form-grid--3 { grid-template-columns: 2fr 1fr 1fr; }
.bgz-form-section { margin: var(--bgz-space-2) 0 0; padding-top: var(--bgz-space-4); border-top: 1px solid var(--bgz-border-subtle); font-size: var(--bgz-text-sm); font-weight: var(--bgz-weight-bold); color: var(--bgz-text); }
@media (max-width: 640px) {
    .bgz-form-grid, .bgz-form-grid--3 { grid-template-columns: 1fr; }
}

/* ── Alerts ── */
.bgz-alert { padding: var(--bgz-space-3) var(--bgz-space-4); border-radius: var(--bgz-radius-md); border: 1px solid; font-size: var(--bgz-text-sm); }
.bgz-alert--danger  { background: var(--bgz-danger-soft);  border-color: color-mix(in srgb, var(--bgz-danger) 30%, white);  color: var(--bgz-danger); }
.bgz-alert--warning { background: var(--bgz-warning-soft); border-color: color-mix(in srgb, var(--bgz-warning) 30%, white); color: var(--bgz-warning); }
.bgz-alert--success { background: var(--bgz-success-soft); border-color: color-mix(in srgb, var(--bgz-success) 30%, white); color: var(--bgz-success); }

/* ── Text helpers ── */
.bgz-muted  { color: var(--bgz-text-muted); }
.bgz-subtle { color: var(--bgz-text-subtle); font-style: italic; }

/* ── Club brand (logo + name) — partials/brand.blade.php; public header and dashboard topbar ──
   Default: light on navy. .bgz-logo--dark for light backgrounds (login page). */
.bgz-logo { display: inline-flex; align-items: center; gap: var(--bgz-space-3); color: var(--bgz-on-navy); font-family: var(--bgz-font-display); font-size: var(--bgz-display-sm); font-weight: var(--bgz-weight-black); letter-spacing: 0.02em; line-height: 1.1; white-space: nowrap; }
.bgz-logo__img { height: var(--bgz-logo-size); width: auto; filter: invert(1); }
.bgz-logo__accent { color: var(--bgz-accent-pale); }