/* public/css/components.css
 *
 * Site-wide UI components: focus ring, the one button system, and the
 * confirm dialog used by window.confirmDialog() (views/layouts/header.php).
 * Loaded LAST in header.php so these definitions win over any older
 * page-level .btn-* rules — pages may still add *layout* tweaks (width,
 * margin, alignment) under a more specific selector, but should never
 * restyle a button's colors, size or shape.
 *
 * Usage:  <button class="btn btn-primary">Save</button>
 *   variants  btn-primary | btn-secondary | btn-ghost | btn-danger |
 *             btn-danger-ghost | btn-success | btn-warning | btn-info | btn-link
 *   sizes     btn-sm | btn-lg      modifiers  btn-block | btn-icon | is-loading
 */

/* ── Form controls inherit the page font (browsers default them to system UI) ── */
button, input, select, textarea, optgroup { font-family: inherit; }

/* ── Focus ──────────────────────────────────────────────────────────────── */
/* One visible ring for keyboard users everywhere; mouse clicks don't show it. */
:focus-visible {
    outline: 2px solid var(--arena-cyan, #00D9FF);
    outline-offset: 2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--arena-cyan, #00D9FF);
    outline-offset: 0;
}

/* Visually hidden but read by screen readers. */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Buttons: shared base ───────────────────────────────────────────────── */
/* Variant classes carry the base too, so legacy markup that only says
   class="btn-primary" (no .btn) still gets the full button. */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger,
.btn-danger-ghost,
.btn-success,
.btn-warning,
.btn-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 40px;
    padding: 0 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 10px);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    transform: none;
    transition: background-color .15s, border-color .15s, color .15s, filter .15s, box-shadow .15s;
    -webkit-user-select: none;
    user-select: none;
}
.btn i, .btn svg,
[class^="btn-"] > i { flex-shrink: 0; }

/* ── Variants ───────────────────────────────────────────────────────────── */
.btn-primary {
    background: var(--arena-grad, linear-gradient(135deg, #00D9FF, #3b82f6));
    color: #04121a;
    font-weight: 700;
}
.btn-primary:hover { filter: brightness(1.08); color: #04121a; box-shadow: 0 4px 16px -4px rgba(0, 217, 255, .45); }

.btn-secondary {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}
.btn-secondary:hover { background: color-mix(in srgb, var(--bg-tertiary) 80%, #fff 8%); border-color: rgba(148, 180, 225, .32); color: var(--text-primary); }

.btn-ghost {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--bg-hover); border-color: rgba(148, 180, 225, .32); color: var(--text-primary); }

.btn-danger {
    background: #dc2626;
    color: #fff;
}
.btn-danger:hover { background: #ef4444; color: #fff; }

/* Destructive but not the main action (Leave, Remove, Cancel booking…) */
.btn-danger-ghost {
    background: transparent;
    border-color: rgba(239, 68, 68, .45);
    color: #fca5a5;
}
.btn-danger-ghost:hover { background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .7); color: #fecaca; }

.btn-success {
    background: #16a34a;
    color: #fff;
}
.btn-success:hover { background: #22c55e; color: #fff; }

.btn-warning {
    background: #f59e0b;
    color: #1c1302;
}
.btn-warning:hover { background: #fbbf24; color: #1c1302; }

.btn-info {
    background: #2563eb;
    color: #fff;
}
.btn-info:hover { background: #3b82f6; color: #fff; }

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--arena-cyan, #00D9FF);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }

/* ── Sizes & modifiers ──────────────────────────────────────────────────── */
.btn-sm { min-height: 32px; padding: 0 .75rem; font-size: .8rem; gap: .4rem; border-radius: var(--radius-sm, 8px); }
.btn-lg { min-height: 48px; padding: 0 1.5rem; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }
/* Scoped to .btn so older standalone .btn-icon helpers (profile.css) keep
   their own sizing. */
.btn.btn-icon { width: 40px; padding: 0; }
.btn.btn-icon.btn-sm { width: 32px; }
.btn.btn-icon.btn-lg { width: 48px; }

/* ── States ─────────────────────────────────────────────────────────────── */
.btn:disabled, .btn.disabled, .btn[aria-disabled="true"],
.btn-primary:disabled, .btn-secondary:disabled, .btn-ghost:disabled,
.btn-danger:disabled, .btn-danger-ghost:disabled, .btn-success:disabled,
.btn-warning:disabled, .btn-info:disabled {
    opacity: .5;
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
    pointer-events: none;
}

/* Loading: keeps the button's width, hides the label, shows a spinner. */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    top: 50%; left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-color: rgba(255, 255, 255, .85) rgba(255, 255, 255, .85) transparent transparent;
    border-radius: 50%;
    animation: btn-spin .7s linear infinite;
}
.btn-primary.is-loading::after,
.btn-warning.is-loading::after { border-color: #04121a #04121a transparent transparent; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Row of actions: primary on the right, destructive pushed to the left. */
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.btn-row .btn-row-start { margin-right: auto; }
.btn-row.center { justify-content: center; }
@media (max-width: 520px) {
    .btn-row > .btn, .btn-row > [class^="btn-"] { flex: 1 1 auto; }
}

/* ── Confirm dialog (window.confirmDialog) ──────────────────────────────── */
.cdlg-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(8, 14, 24, .62);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .18s;
}
.cdlg-overlay.open { opacity: 1; }
.cdlg {
    width: 100%;
    max-width: 420px;
    padding: 22px 22px 18px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 14px);
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .55);
    transform: translateY(8px) scale(.98);
    transition: transform .18s;
}
.cdlg-overlay.open .cdlg { transform: none; }
.cdlg-title {
    margin: 0 0 .5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.cdlg-msg {
    margin: 0 0 1.25rem;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--text-secondary);
    white-space: pre-line;
}
.cdlg-actions { display: flex; justify-content: flex-end; gap: .6rem; }

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .btn.is-loading::after { animation-duration: .7s !important; animation-iteration-count: infinite !important; }
}