/* Bridge AI shared interface rules.
   Linked after each page's own <style>, so it sets the shared look of buttons, badges, focus,
   form states, toasts and icons. It does not set sizes or layout; pages keep those. */

:root {
    --ui-radius-sm: 6px;
    --ui-radius: 8px;
    --ui-radius-lg: 12px;
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-6: 24px;
    --ui-text: #fff;
    --ui-text-2: rgba(255,255,255,0.55);
    --ui-text-3: rgba(255,255,255,0.3);
    --ui-line: rgba(255,255,255,0.07);
    --ui-line-2: rgba(255,255,255,0.12);
    --ui-surface: #0d0d0d;
    --ui-focus: rgba(255,255,255,0.75);
    /* Status colours: only for state, never decoration */
    --ui-ok: #00ff88;
    --ui-warn: #fbbf24;
    --ui-err: #ff4040;
}

/* Keyboard focus is always visible */
a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible,
[tabindex]:focus-visible, input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
}

/* Buttons: four variants. Pages set size; these set colour and state.
   primary   - the one main action in a view
   secondary - other actions (.btn-ghost is the older name for the same thing)
   text      - low-emphasis actions inside content
   danger    - removes or disconnects something */
.btn-primary { background: #fff; color: #000; border-color: #fff; }
.btn-primary:hover { background: rgba(255,255,255,0.88); border-color: rgba(255,255,255,0.88); }
.btn-secondary, .btn-ghost { background: rgba(255,255,255,0.04); color: var(--ui-text-2); border-color: var(--ui-line-2); }
.btn-secondary:hover, .btn-ghost:hover { background: rgba(255,255,255,0.08); color: var(--ui-text); }
.btn-text { background: transparent; color: var(--ui-text-2); border-color: transparent; }
.btn-text:hover { color: var(--ui-text); text-decoration: underline; text-underline-offset: 3px; }
.btn-danger { background: rgba(255,64,64,0.08); color: var(--ui-err); border-color: rgba(255,64,64,0.25); }
.btn-danger:hover { background: rgba(255,64,64,0.14); }
.btn:disabled, .btn[aria-disabled="true"], .btn-primary:disabled, .btn-danger:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}
.btn[aria-busy="true"] { cursor: progress; }

/* Status badges: add one of these to an existing badge element */
.badge-ok { background: rgba(0,255,136,0.08); color: var(--ui-ok); border: 1px solid rgba(0,255,136,0.2); }
.badge-warn { background: rgba(251,191,36,0.08); color: var(--ui-warn); border: 1px solid rgba(251,191,36,0.2); }
.badge-err { background: rgba(255,64,64,0.08); color: var(--ui-err); border: 1px solid rgba(255,64,64,0.2); }
.badge-neutral { background: rgba(255,255,255,0.05); color: var(--ui-text-2); border: 1px solid var(--ui-line-2); }

/* Form states, matching BridgeValidate (validation.js) */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
    border-color: rgba(255,64,64,0.6) !important;
}
.field-help { font-size: 12px; color: var(--ui-text-3); margin-top: 6px; line-height: 1.5; }
.field-error { font-size: 12px; color: var(--ui-err); margin-top: 6px; line-height: 1.5; }

/* Toast (BridgeAPI.ui.toast) */
.bridge-toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 10000;
    display: flex; align-items: center; gap: 10px;
    max-width: min(420px, calc(100vw - 48px));
    padding: 12px 16px;
    background: #111; color: var(--ui-text);
    border: 1px solid var(--ui-line-2); border-radius: 10px;
    font-size: 13px; line-height: 1.45;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
.bridge-toast svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--ui-ok); }
.bridge-toast.is-error svg { color: var(--ui-err); }
.bridge-toast.is-error { border-color: rgba(255,64,64,0.35); }

/* Empty state: say what is missing and what to do next */
.ui-empty { text-align: center; padding: 32px 16px; color: var(--ui-text-3); font-size: 13px; line-height: 1.6; }
.ui-empty-title { color: var(--ui-text-2); font-weight: 600; font-size: 14px; margin-bottom: 4px; }

/* Loading placeholder */
.ui-skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08), rgba(255,255,255,0.04));
    background-size: 200% 100%;
    animation: ui-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--ui-radius-sm);
}
@keyframes ui-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Icons that sit in text take the text size (icons.js renders them) */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex-shrink: 0; stroke-width: 2; }
.spin { animation: ui-spin 0.9s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .spin, .ui-skeleton { animation: none; }
}