/* GB.ABH Shared Component Library — canonical `ui-` namespace.
   The single set of cross-surface components (button, badge, form field, card,
   alert) consumed by the macros in templates/macros/ui.html and rendered
   identically on the guest guidebook, admin, local_guide, and office surfaces.

   Built entirely on the tokens in tokens.css. During the Epic 6 migration the
   legacy `.gb-btn` / `.admin-btn` / `.u-btn` / `.badge` classes are replaced by
   these `ui-` equivalents one surface at a time; the `ui-` prefix is chosen to
   avoid collisions with those legacy styles until migration completes. */

/* ── Accessibility baseline ─────────────────────────────────── */
/* Skip link: visually hidden until focused, then pinned top-left. */
.ui-skip-link {
    position: absolute;
    left: var(--space-2);
    top: -48px;
    z-index: 3000;
    padding: var(--space-2) var(--space-4);
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    transition: top 0.15s ease;
}
.ui-skip-link:focus { top: var(--space-2); outline: none; box-shadow: var(--focus-ring); }

/* Browsers give <button> its own UA text color (e.g. ButtonText) instead of
   inheriting the page's --text — invisible in dark mode for any icon-only
   button relying on currentColor (theme toggle, notification bell, etc). */
button { color: inherit; }

/* Global keyboard focus ring for elements without a bespoke one. */
:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
/* Don't double-ring components that define their own focus treatment. */
.ui-btn:focus-visible, .ui-input:focus-visible, .ui-textarea:focus-visible,
.ui-select:focus-visible, .ui-skip-link:focus-visible { outline: none; }
/* Skip-link targets receive focus programmatically; suppress the outline. */
[tabindex="-1"]:focus { outline: none; }

/* ── Button ─────────────────────────────────────────────────── */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--touch-target);
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-family, Inter, sans-serif);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}
.ui-btn:hover { text-decoration: none; }
.ui-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.ui-btn--sm { min-height: 32px; padding: 0 var(--space-3); font-size: var(--fs-xs); }

.ui-btn--primary   { background: var(--accent-color); color: #fff; }
.ui-btn--primary:hover { opacity: 0.9; }

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

.ui-btn--outline   { background: transparent; color: var(--accent-color); border-color: var(--accent-color); }
.ui-btn--outline:hover { background: var(--accent-color); color: #fff; }

.ui-btn--danger    { background: var(--state-error-bg); color: var(--state-error-fg); border-color: var(--state-error-fg); }
.ui-btn--danger:hover { opacity: 0.9; }

.ui-btn--ghost     { background: transparent; color: var(--text); }
.ui-btn--ghost:hover { background: var(--bg-surface); }

/* ── Badge ──────────────────────────────────────────────────── */
.ui-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.ui-badge--success { background: var(--state-success-bg); color: var(--state-success-fg); }
.ui-badge--error   { background: var(--state-error-bg);   color: var(--state-error-fg); }
.ui-badge--warning { background: var(--state-warning-bg); color: var(--state-warning-fg); }
.ui-badge--info    { background: var(--state-info-bg);    color: var(--state-info-fg); }
.ui-badge--neutral { background: var(--state-neutral-bg); color: var(--state-neutral-fg); }

/* ── Form field ─────────────────────────────────────────────── */
.ui-field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.ui-field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.ui-field__required { color: var(--state-error-fg); margin-left: 2px; }
.ui-field__hint { font-size: var(--fs-xs); color: var(--text-subtle); }
.ui-field__error { font-size: var(--fs-xs); color: var(--state-error-fg); }

/* Field row — several fields side by side, wrapping on narrow screens. */
.ui-field-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.ui-field-row > .ui-field { flex: 1 1 180px; }

/* Inline field — control and label on one row (checkbox/radio rows). */
.ui-field--inline { flex-direction: row; align-items: center; gap: var(--space-2); }
.ui-field--inline .ui-field__label { margin-bottom: 0; }

/* Help tip (#366) — pure-CSS hover/focus tooltip, CSP-safe (no JS). */
.ui-help { position: relative; display: inline-flex; vertical-align: middle; }
.ui-help__trigger {
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--text-subtle, #94a3b8);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    cursor: help;
    flex-shrink: 0;
}
.ui-help__bubble {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    width: max-content;
    max-width: 240px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #1a1a2e;
    color: #fff;
    font-size: var(--fs-xs, 0.75rem);
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    /* Hidden until the trigger is hovered or focused. */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.ui-help:hover .ui-help__bubble,
.ui-help:focus-within .ui-help__bubble {
    visibility: visible;
    opacity: 1;
}

.ui-input, .ui-textarea, .ui-select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    min-height: var(--touch-target);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text);
    font-family: var(--font-family, Inter, sans-serif);
    font-size: var(--fs-md);
}
.ui-textarea { min-height: 96px; resize: vertical; }
.ui-textarea--code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-sm);
    line-height: 1.5;
    tab-size: 2;
    white-space: pre;
}
.ui-input:focus, .ui-textarea:focus, .ui-select:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent-color); }
.ui-input[aria-invalid="true"], .ui-textarea[aria-invalid="true"], .ui-select[aria-invalid="true"] { border-color: var(--state-error-fg); }

/* ── Card ───────────────────────────────────────────────────── */
.ui-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.ui-card__header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); font-weight: 700; color: var(--text); }
.ui-card__body { padding: var(--space-5); }

/* ── Alert (static, page-level; transient toasts handled in A2) ── */
.ui-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    margin-bottom: var(--space-5);
}
.ui-alert--success { background: var(--state-success-bg); color: var(--state-success-fg); }
.ui-alert--error   { background: var(--state-error-bg);   color: var(--state-error-fg); }
.ui-alert--warning { background: var(--state-warning-bg); color: var(--state-warning-fg); }
.ui-alert--info    { background: var(--state-info-bg);    color: var(--state-info-fg); }
.ui-alert__dismiss { margin-left: auto; background: none; border: none; cursor: pointer; font-size: var(--fs-md); opacity: 0.6; padding: 0 var(--space-1); line-height: 1; color: inherit; }
.ui-alert__dismiss:hover { opacity: 1; }

/* ── Toasts (transient feedback; driven by static/js/feedback.js) ── */
.ui-toast-region {
    position: fixed;
    bottom: var(--space-5);
    right: var(--space-5);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: min(360px, calc(100vw - 2 * var(--space-4)));
    pointer-events: none;
}
.ui-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-size: var(--fs-sm);
    background: var(--bg-card);
    color: var(--text);
    border-left: 4px solid var(--state-neutral-fg);
    animation: ui-toast-in 0.2s ease;
}
.ui-toast--success { border-left-color: var(--state-success-fg); }
.ui-toast--error   { border-left-color: var(--state-error-fg); }
.ui-toast--warning { border-left-color: var(--state-warning-fg); }
.ui-toast--info    { border-left-color: var(--state-info-fg); }
/* Award-like milestone feedback (onboarding celebration toasts) — a warmer,
   bouncier entrance than the standard toasts so it reads as a distinct,
   noteworthy moment rather than routine save-confirmation feedback. */
.ui-toast--celebration {
    border-left-color: var(--state-warning-fg);
    background: linear-gradient(135deg, var(--state-warning-bg), var(--bg-card) 70%);
    box-shadow: var(--shadow-lg);
    animation: ui-toast-celebrate-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ui-toast__icon { font-size: var(--fs-lg); line-height: 1; flex-shrink: 0; }
.ui-toast--leaving { opacity: 0; transition: opacity 0.2s ease; }
.ui-toast__msg { flex: 1; }
.ui-toast__dismiss { background: none; border: none; cursor: pointer; font-size: var(--fs-lg); line-height: 1; color: inherit; opacity: 0.6; padding: 0 var(--space-1); }
.ui-toast__dismiss:hover { opacity: 1; }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ui-toast-celebrate-in {
    0% { opacity: 0; transform: translateY(16px) scale(0.9); }
    60% { opacity: 1; transform: translateY(-4px) scale(1.03); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Top progress bar (HTMX request feedback) ───────────────── */
.ui-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 100%;
    z-index: 2100;
    background: var(--accent-color);
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.ui-progress--active { opacity: 1; animation: ui-progress-indeterminate 1s ease-in-out infinite; }
@keyframes ui-progress-indeterminate {
    0%   { transform: scaleX(0);   transform-origin: left; }
    50%  { transform: scaleX(0.7); transform-origin: left; }
    100% { transform: scaleX(1);   transform-origin: right; }
}

/* ── HTMX inline indicator helper (opt-in via hx-indicator) ──── */
.htmx-indicator { opacity: 0; transition: opacity 0.15s ease; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ── Spinner ────────────────────────────────────────────────── */
.ui-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-pill);
    animation: ui-spin 0.6s linear infinite;
    vertical-align: -0.15em;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ── Empty state ────────────────────────────────────────────── */
.ui-empty { text-align: center; padding: var(--space-7) var(--space-4); color: var(--text-muted); }
.ui-empty__icon { font-size: var(--fs-2xl); line-height: 1; margin-bottom: var(--space-3); opacity: 0.7; }
.ui-empty__title { font-size: var(--fs-lg); font-weight: 700; color: var(--text); margin-bottom: var(--space-2); }
.ui-empty__msg { font-size: var(--fs-sm); margin-bottom: var(--space-4); }

/* ── Skeleton (loading placeholder) ─────────────────────────── */
.ui-skeleton { display: block; }
.ui-skeleton-line {
    height: 0.8em;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--bg-surface) 25%, var(--border) 37%, var(--bg-surface) 63%);
    background-size: 400% 100%;
    animation: ui-shimmer 1.4s ease infinite;
}
.ui-skeleton-line--w40 { width: 40%; }
.ui-skeleton-line--w60 { width: 60%; }
.ui-skeleton-line--w80 { width: 80%; }
@keyframes ui-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ── Icon (macros/icons.html icon()) ────────────────────────── */
.ui-icon {
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

/* ── Screen-reader-only content ─────────────────────────────── */
.ui-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;
}

/* ── Data table ─────────────────────────────────────────────── */
.ui-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.ui-table th {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.ui-table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}
.ui-table tbody tr:hover { background: var(--bg-surface); }
.ui-table--compact th,
.ui-table--compact td { padding: var(--space-1) var(--space-2); }
.ui-table__actions { text-align: right; white-space: nowrap; }
.ui-table__num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Tabs ───────────────────────────────────────────────────── */
/* Markup: <div class="ui-tabs" role="tablist"><button class="ui-tab"
   role="tab" aria-selected="true">…</button>…</div>. Active state via
   .ui-tab--active or aria-selected. */
.ui-tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-4);
    overflow-x: auto;
}
.ui-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: var(--space-2) var(--space-3);
    min-height: var(--touch-target);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color 120ms ease, border-color 120ms ease;
}
.ui-tab:hover { color: var(--text); }
.ui-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.ui-tab--active,
.ui-tab[aria-selected="true"] {
    color: var(--text);
    font-weight: 600;
    border-bottom-color: var(--accent-color);
}

/* ── Reduced motion (a11y) ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ui-toast, .ui-progress--active, .ui-spinner, .ui-skeleton-line { animation: none; }
    .ui-toast--leaving { transition: none; }
}