/* ═══════════════════════════════════════════════════════════════
   RAVEN AI FUSION — UIKit Styles
   frontend/css/ui_kit.css

   Styles for the UIKit dialog/toast primitives.
   ALL values reference tokens.css custom properties — no bare
   colours, spacings, or z-indexes here.

   LOAD ORDER: after tokens.css, after style.css.

   Spec: dev-dev-docs/ux/2026-06-10-ux-overhaul-implementation-spec.md §FE-1
   ═══════════════════════════════════════════════════════════════ */


/* ── DIALOG BACKDROP ─────────────────────────────────────────── */

.rv-kit-backdrop {
  position: fixed;
  inset: 0;
  background: var(--rv-color-bg-overlay);
  /* GPU-accelerated entrance — opacity only, no layout triggers */
  opacity: 0;
  transition: opacity var(--rv-dur-normal) var(--rv-ease-out);
  z-index: var(--rv-z-dialog);
  /* Centre the dialog wrapper */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rv-space-4);
}

.rv-kit-backdrop--open {
  opacity: 1;
}


/* ── DIALOG WRAPPER (the accessible dialog element) ─────────── */

.rv-kit-dialog-wrapper {
  /* Wrapper is transparent; the .rv-kit-dialog box inside carries chrome */
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  /* Slide-up entrance: use transform, never top/height */
  transform: translateY(12px) scale(0.97);
  opacity: 0;
  transition:
    transform var(--rv-dur-normal) var(--rv-ease-spring),
    opacity   var(--rv-dur-fast)   var(--rv-ease-out);
}

.rv-kit-backdrop--open .rv-kit-dialog-wrapper {
  transform: translateY(0) scale(1);
  opacity: 1;
}


/* ── DIALOG BOX ─────────────────────────────────────────────── */

.rv-kit-dialog {
  background: var(--rv-color-bg-panel);
  border: 1px solid var(--rv-color-border-bright);
  border-radius: var(--rv-r-lg);
  box-shadow: var(--rv-shadow-xl), var(--rv-shadow-accent);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--rv-font-ui);
  font-size: var(--rv-fs-base);
  color: var(--rv-color-text-primary);
  max-height: 80vh;
}

.rv-kit-dialog--danger {
  border-color: var(--rv-color-variant-error);
  box-shadow: var(--rv-shadow-xl), 0 0 24px rgba(255, 23, 68, 0.2);
}

.rv-kit-dialog--warn {
  border-color: var(--rv-color-variant-warn);
}

.rv-kit-dialog--success {
  border-color: var(--rv-color-variant-success);
}


/* ── DIALOG HEADER ──────────────────────────────────────────── */

.rv-kit-dialog__header {
  padding: var(--rv-space-5) var(--rv-space-6);
  border-bottom: 1px solid var(--rv-color-border);
  background: var(--rv-color-bg-card);
  flex-shrink: 0;
}

.rv-kit-dialog__title {
  font-size: var(--rv-fs-lg);
  font-weight: var(--rv-fw-semibold);
  letter-spacing: var(--rv-ls-wide);
  text-transform: uppercase;
  color: var(--rv-color-text-primary);
  margin: 0;
}

.rv-kit-dialog--danger  .rv-kit-dialog__title { color: var(--rv-color-variant-error); }
.rv-kit-dialog--warn    .rv-kit-dialog__title { color: var(--rv-color-variant-warn); }
.rv-kit-dialog--success .rv-kit-dialog__title { color: var(--rv-color-variant-success); }


/* ── DIALOG BODY ────────────────────────────────────────────── */

.rv-kit-dialog__body {
  padding: var(--rv-space-6);
  overflow-y: auto;
  flex: 1 1 auto;
  /* Custom scrollbar — inherit from global */
  scrollbar-width: thin;
  scrollbar-color: var(--line2, rgba(255, 255, 255, 0.08)) transparent;
}

.rv-kit-dialog__message {
  font-size: var(--rv-fs-base);
  color: var(--rv-color-text-secondary);
  line-height: var(--rv-lh-normal);
  margin: 0;
  /* Guard: never below the 11px floor */
  min-font-size: var(--rv-fs-xs);
}


/* ── DIALOG FOOTER ──────────────────────────────────────────── */

.rv-kit-dialog__footer {
  padding: var(--rv-space-4) var(--rv-space-6);
  border-top: 1px solid var(--rv-color-border);
  background: var(--rv-color-bg-card);
  display: flex;
  justify-content: flex-end;
  gap: var(--rv-space-3);
  flex-shrink: 0;
}


/* ── BUTTONS ────────────────────────────────────────────────── */

.rv-kit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rv-font-ui);
  font-size: var(--rv-fs-sm);
  font-weight: var(--rv-fw-medium);
  letter-spacing: var(--rv-ls-wide);
  text-transform: uppercase;
  padding: var(--rv-space-2) var(--rv-space-5);
  border-radius: var(--rv-r-base);
  border: 1px solid transparent;
  cursor: pointer;
  outline: none;
  transition:
    opacity   var(--rv-dur-fast) var(--rv-ease-out),
    transform var(--rv-dur-fast) var(--rv-ease-out);
  min-width: 80px;
  white-space: nowrap;
  user-select: none;
}

.rv-kit-btn:focus-visible {
  outline: 2px solid var(--rv-color-accent);
  outline-offset: 2px;
}

.rv-kit-btn:active {
  transform: translateY(1px);
}

/* Primary */
.rv-kit-btn--primary {
  background: var(--rv-color-accent);
  color: var(--rv-color-text-on-accent);
  border-color: var(--rv-color-accent);
}
.rv-kit-btn--primary:hover {
  opacity: 0.88;
}

/* Danger variant of primary */
.rv-kit-btn--danger {
  background: var(--rv-color-variant-error);
  color: #ffffff;
  border-color: var(--rv-color-variant-error);
}
.rv-kit-btn--danger:hover {
  opacity: 0.88;
}

/* Ghost */
.rv-kit-btn--ghost {
  background: transparent;
  color: var(--rv-color-text-secondary);
  border-color: var(--rv-color-border-bright);
}
.rv-kit-btn--ghost:hover {
  color: var(--rv-color-text-primary);
  border-color: var(--rv-color-accent-border);
  background: var(--rv-color-accent-glow);
}


/* ── PROMPT FORM ────────────────────────────────────────────── */

.rv-kit-prompt__form-el {
  display: contents;   /* transparent form element — layout handled by __body */
}

.rv-kit-prompt__form {
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-5);
}

.rv-kit-prompt__message {
  /* Inherits .rv-kit-dialog__message, add bottom spacing */
  margin-bottom: var(--rv-space-2);
}

.rv-kit-prompt__error {
  font-size: var(--rv-fs-xs);
  color: var(--rv-color-variant-error);
  margin: 0;
}


/* ── FORM FIELDS ────────────────────────────────────────────── */

.rv-kit-field {
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-1);
}

.rv-kit-field__label {
  font-size: var(--rv-fs-xs);
  font-weight: var(--rv-fw-medium);
  letter-spacing: var(--rv-ls-wider);
  text-transform: uppercase;
  color: var(--rv-color-text-secondary);
}

.rv-kit-field__control {
  font-family: var(--rv-font-ui);
  font-size: var(--rv-fs-base);
  color: var(--rv-color-text-primary);
  background: var(--rv-color-bg-root);
  border: 1px solid var(--rv-color-border-bright);
  border-radius: var(--rv-r-base);
  padding: var(--rv-space-2) var(--rv-space-3);
  outline: none;
  width: 100%;
  transition:
    border-color var(--rv-dur-fast) var(--rv-ease-out),
    box-shadow   var(--rv-dur-fast) var(--rv-ease-out);
  /* Prevent height-change animations — GPU safe */
  appearance: none;
  -webkit-appearance: none;
}

.rv-kit-field__control::placeholder {
  color: var(--rv-color-text-muted);
}

.rv-kit-field__control:focus {
  border-color: var(--rv-color-accent);
  box-shadow: 0 0 0 2px var(--rv-color-accent-glow);
}

.rv-kit-field__textarea {
  resize: vertical;
  min-height: 80px;
  line-height: var(--rv-lh-normal);
}

select.rv-kit-field__control {
  cursor: pointer;
  /* Custom arrow via background image (pure CSS, no JS) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238fa3bc' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--rv-space-3) center;
  padding-right: var(--rv-space-8);
}

select.rv-kit-field__control option {
  background: var(--rv-color-bg-panel);
  color: var(--rv-color-text-primary);
}

.rv-kit-field__hint {
  font-size: var(--rv-fs-xs);
  color: var(--rv-color-text-muted);
  line-height: var(--rv-lh-normal);
}


/* ── TOAST CONTAINER ────────────────────────────────────────── */

.rv-kit-toast-container {
  position: fixed;
  bottom: var(--rv-space-6);
  right: var(--rv-space-6);
  z-index: var(--rv-z-toast);
  display: flex;
  flex-direction: column-reverse;   /* newest toast at bottom */
  gap: var(--rv-space-2);
  pointer-events: none;             /* let map stay clickable through gaps */
  max-width: 380px;
  width: calc(100vw - var(--rv-space-12));
}


/* ── TOAST ──────────────────────────────────────────────────── */

.rv-kit-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--rv-space-3);
  padding: var(--rv-space-3) var(--rv-space-4);
  border-radius: var(--rv-r-md);
  border: 1px solid var(--rv-color-border-bright);
  background: var(--rv-color-bg-card);
  box-shadow: var(--rv-shadow-md);
  font-family: var(--rv-font-ui);
  font-size: var(--rv-fs-sm);
  color: var(--rv-color-text-primary);
  line-height: var(--rv-lh-normal);
  /* Entrance: slide from right + opacity — GPU transforms only */
  transform: translateX(24px);
  opacity: 0;
  transition:
    transform var(--rv-dur-normal) var(--rv-ease-spring),
    opacity   var(--rv-dur-fast)   var(--rv-ease-out);
}

.rv-kit-toast--visible {
  transform: translateX(0);
  opacity: 1;
}

/* Variant accent bars via border-left */
.rv-kit-toast--info    { border-left: 3px solid var(--rv-color-variant-info); }
.rv-kit-toast--success { border-left: 3px solid var(--rv-color-variant-success); }
.rv-kit-toast--warn    { border-left: 3px solid var(--rv-color-variant-warn); }
.rv-kit-toast--error   { border-left: 3px solid var(--rv-color-variant-error); }

.rv-kit-toast__icon {
  flex-shrink: 0;
  font-size: var(--rv-fs-sm);
  margin-top: 1px;
  font-weight: var(--rv-fw-bold);
  font-style: normal;
}
.rv-kit-toast--info    .rv-kit-toast__icon { color: var(--rv-color-variant-info); }
.rv-kit-toast--success .rv-kit-toast__icon { color: var(--rv-color-variant-success); }
.rv-kit-toast--warn    .rv-kit-toast__icon { color: var(--rv-color-variant-warn); }
.rv-kit-toast--error   .rv-kit-toast__icon { color: var(--rv-color-variant-error); }

.rv-kit-toast__message {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.rv-kit-toast__dismiss {
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--rv-color-text-muted);
  font-size: var(--rv-fs-lg);
  line-height: 1;
  padding: 0;
  margin-top: -1px;
  font-family: var(--rv-font-ui);
  transition: color var(--rv-dur-fast) var(--rv-ease-out);
}
.rv-kit-toast__dismiss:hover {
  color: var(--rv-color-text-primary);
}
.rv-kit-toast__dismiss:focus-visible {
  outline: 2px solid var(--rv-color-accent);
  border-radius: var(--rv-r-sm);
}


/* ── RESPONSIVE ADJUSTMENTS (tablet and below) ──────────────── */

@media (max-width: 640px) {
  .rv-kit-dialog-wrapper {
    max-width: 100%;
  }

  .rv-kit-toast-container {
    left: var(--rv-space-3);
    right: var(--rv-space-3);
    bottom: var(--rv-space-3);
    width: auto;
    max-width: 100%;
  }

  .rv-kit-dialog__footer {
    flex-direction: column-reverse;
  }

  .rv-kit-btn {
    width: 100%;
    justify-content: center;
  }
}