/* @visteras/ui — generated from packages/ui/src/ui.css by packages/ui/scripts/build-static.mjs — do not edit by hand */
/*
 * @visteras/ui — component styles (dialog).
 *
 * Accent: every app defines --visteras-accent (and optionally
 * --visteras-accent-hover / --visteras-on-accent) in its own stylesheet:
 *   Vector orange, Studio blue, Publish teal, Collage purple, Inspire amber.
 * Nothing here hardcodes an accent colour. The neutral dark-chrome surface
 * values below are shared defaults that an app may override in :root.
 */
:root {
  --vui-surface: #2b2b2b;
  --vui-surface-header: #202020;
  --vui-border: #444444;
  --vui-border-subtle: #3a3a3a;
  --vui-text: #e0e0e0;
  --vui-text-strong: #ffffff;
  --vui-text-muted: #999999;
  --vui-btn-bg: #333333;
  --vui-btn-bg-hover: #3a3a3a;
  --vui-btn-text: #cccccc;
  --vui-overlay-bg: rgba(0, 0, 0, 0.55);
  --vui-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
  --vui-radius: 8px;
  --vui-radius-sm: 4px;
  --vui-dialog-font-size: 12px;
  --vui-dialog-title-size: 13px;
  --vui-dialog-width: 420px;
  --vui-z-dialog: 6000;
}

.vui-overlay {
  position: fixed;
  inset: 0;
  background: var(--vui-overlay-bg);
  z-index: var(--vui-z-dialog);
}

.vui-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(var(--vui-dialog-width), calc(100vw - 40px));
  background-color: var(--vui-surface);
  color: var(--vui-text);
  border: 1px solid var(--vui-border);
  border-radius: var(--vui-radius);
  box-shadow: var(--vui-shadow);
  overflow: hidden;
  z-index: calc(var(--vui-z-dialog) + 1);
  box-sizing: border-box;
  font-family: var(--ui-font, inherit);
  font-size: var(--vui-dialog-font-size);
}

.vui-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background-color: var(--vui-surface-header);
  border-bottom: 1px solid var(--vui-border-subtle);
}

.vui-dialog-title {
  font-size: var(--vui-dialog-title-size);
  font-weight: 600;
  color: var(--vui-text-strong);
}

.vui-dialog-close {
  background: none;
  border: none;
  color: var(--vui-text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.vui-dialog-close:hover { color: var(--vui-text-strong); }

.vui-dialog-body { padding: 16px; line-height: 1.5; }
.vui-dialog-body p { margin: 0; }
.vui-dialog-body b { color: var(--vui-text-strong); }

.vui-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 16px 16px;
}

.vui-btn {
  min-width: 84px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--vui-radius-sm);
  font-family: inherit;
  font-size: var(--vui-dialog-font-size);
  cursor: pointer;
}
.vui-btn-secondary {
  background-color: var(--vui-btn-bg);
  color: var(--vui-btn-text);
  border: 1px solid var(--vui-border);
}
.vui-btn-secondary:hover { background-color: var(--vui-btn-bg-hover); color: var(--vui-text-strong); }
.vui-btn-accent {
  background-color: var(--visteras-accent);
  color: var(--visteras-on-accent, var(--vui-text-strong));
  border: none;
  font-weight: 600;
}
.vui-btn-accent:hover { background-color: var(--visteras-accent-hover, var(--visteras-accent)); }
.vui-btn:focus-visible,
.vui-btn.vui-focus-ring:focus { outline: 2px solid var(--visteras-accent); outline-offset: 2px; }

/* Omarchy Logo Easter Egg Accent Overlays */
/* Studio (Blue) */
.logo.logo-omarchy-active img,
.logo img.logo-omarchy-active,
a.logo-omarchy-active img {
  filter: brightness(0) saturate(100%) invert(32%) sepia(98%) saturate(2250%) hue-rotate(212deg) brightness(98%) contrast(97%) !important;
}

/* Vector (Orange) */
.visteras_vector_logo_wrap.logo-omarchy-active img,
.visteras_vector_logo_wrap img.logo-omarchy-active {
  filter: brightness(0) saturate(100%) invert(54%) sepia(74%) saturate(2333%) hue-rotate(345deg) brightness(101%) contrast(97%) !important;
}

/* Publish (Teal) */
.visteras_publish_logo_wrap.logo-omarchy-active img,
.visteras_publish_logo_wrap img.logo-omarchy-active {
  filter: brightness(0) saturate(100%) invert(57%) sepia(61%) saturate(2182%) hue-rotate(134deg) brightness(97%) contrast(85%) !important;
}

/* Collage (Purple) */
.visteras_collage_logo_wrap.logo-omarchy-active img,
.visteras_collage_logo_wrap img.logo-omarchy-active {
  filter: brightness(0) saturate(100%) invert(44%) sepia(85%) saturate(2975%) hue-rotate(248deg) brightness(101%) contrast(95%) !important;
}

/* Inspire (Gold / Amber) */
.visteras_inspire_logo_wrap.logo-omarchy-active img,
.visteras_inspire_logo_wrap img.logo-omarchy-active {
  filter: brightness(0) saturate(100%) invert(67%) sepia(69%) saturate(2032%) hue-rotate(357deg) brightness(102%) contrast(95%) !important;
}

/* Generic Fallback */
.logo-omarchy-active img,
img.logo-omarchy-active {
  filter: brightness(0) saturate(100%) invert(32%) sepia(98%) saturate(2250%) hue-rotate(212deg) brightness(98%) contrast(97%) !important;
}

/* ── Icon button groups (panels / Properties) ──────────────────────────────
 * One look for every icon toggle/action row: fixed-size cells, left-aligned,
 * equal gaps, no stretched cells; one active state (accent border, darker
 * fill — the accent is the app's --visteras-accent). Works on <button> and
 * on SVG-Edit <se-button> hosts (Vector neutralises their inner box).
 * !important + the group selector: wins over older per-app button rules.
 */
.vui-icon-group { display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; align-items: center !important; gap: var(--vui-icon-btn-gap, 2px) !important; box-sizing: border-box !important; }
.vui-icon-group > .vui-icon-btn { flex: 0 0 var(--vui-icon-btn-width, 28px) !important; width: var(--vui-icon-btn-width, 28px) !important; min-width: 0 !important; height: var(--vui-icon-btn-height, 24px) !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; background: #2a2a2a !important; border: 1px solid #3d3d3d !important; border-radius: var(--vui-icon-btn-radius, 3px) !important; color: #cccccc !important; box-shadow: none !important; cursor: pointer !important; transition: background-color 0.12s, border-color 0.12s, color 0.12s !important; }
.vui-icon-group > .vui-icon-btn svg,
.vui-icon-group > .vui-icon-btn img { width: var(--vui-icon-btn-icon-size, 16px) !important; height: var(--vui-icon-btn-icon-size, 16px) !important; display: block !important; pointer-events: none !important; }
.vui-icon-group > .vui-icon-btn:hover { background: #383838 !important; border-color: #555555 !important; color: #ffffff !important; }
.vui-icon-group > .vui-icon-btn.active,
.vui-icon-group > .vui-icon-btn[aria-pressed="true"],
.vui-icon-group > .vui-icon-btn[pressed] { background: #1a1a1a !important; border-color: var(--visteras-accent) !important; color: #ffffff !important; box-shadow: none !important; }
.vui-icon-group > .vui-icon-btn:disabled,
.vui-icon-group > .vui-icon-btn[disabled],
.vui-icon-group > .vui-icon-btn.disabled { opacity: 0.4 !important; cursor: default !important; background: #2a2a2a !important; border-color: #3d3d3d !important; }
.vui-icon-group > .vui-icon-btn[hidden],
.vui-icon-group > .vui-icon-btn[style*="display: none"],
.vui-icon-group > .vui-icon-btn[style*="display:none"] { display: none !important; }