/* Extra styles for the vanilla-JS components (style.css is the original compiled Tailwind build). */
.om-select-menu {
  position: absolute; z-index: 60; padding: 4px; max-height: 300px; overflow-y: auto;
  background: hsl(var(--popover)); color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px);
  box-shadow: 0 10px 30px rgb(0 0 0 / .4); font-size: .875rem;
}
.om-select-item { padding: 6px 8px; border-radius: 4px; cursor: pointer; }
.om-select-item:hover, .om-select-item.is-selected { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

#om-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.om-toast {
  background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 12px 16px;
  box-shadow: 0 10px 30px rgb(0 0 0 / .4); font-size: .875rem;
}
.om-toast p { margin-top: 2px; color: hsl(var(--muted-foreground)); }

/* Mobile navigation panel (opened by the hamburger button below md) */
.om-mobile-menu {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 16px 12px;
  border-top: 1px solid hsl(var(--border)); background: hsl(var(--background));
}
.om-mobile-menu[hidden] { display: none; }
.om-mobile-menu a {
  display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 6px;
  color: hsl(var(--foreground)); font-size: .9rem;
}
.om-mobile-menu a:hover { background: hsl(var(--accent)); }
.om-mobile-menu svg { width: 16px; height: 16px; color: hsl(var(--muted-foreground)); }
@media (min-width: 768px) { .om-mobile-menu { display: none !important; } }

/* Dialogs: keep tall forms scrollable inside the viewport */
.om-dialog-scroll { max-height: 90vh; overflow-y: auto; }

/* The hidden attribute must win over Tailwind display utilities (flex, grid, ...). */
[hidden] { display: none !important; }