/* Application styles */

/*
 * Custom CSS, and the rule for adding to it: only for things Tailwind genuinely
 * cannot express, and every rule says which thing.
 *
 * Tailwind's whole argument is that styling lives at the point of use. A large
 * stylesheet beside it quietly rebuilds the framework the utilities replaced,
 * and then there are two places a colour can come from. The three rules below
 * each exist because a utility class cannot produce the effect at all.
 *
 * These were three copies of the same inline <style> block in the layouts this
 * replaces -- one per layout, drifted apart, and none of them findable by
 * searching for a class name.
 */

/*
 * A faint dot grid for empty states.
 *
 * Tailwind cannot express this: it is a repeating radial gradient, which has no
 * utility because there is no bounded set of values to generate. Inline styles
 * were the alternative, and they cannot be themed.
 */
.pattern-bg {
  background-image: radial-gradient(circle at 1px 1px, rgb(148 163 184 / 0.25) 1px, transparent 0);
  background-size: 16px 16px;
}

/*
 * A "not allowed" cursor that still shows a tooltip.
 *
 * `pointer-events: none` on a disabled control is the usual fix and it kills the
 * title tooltip with it -- so the user sees a dead control and no explanation.
 * Keeping pointer events and overriding the cursor keeps the explanation.
 */
.cursor-blocked {
  cursor: not-allowed;
}

.cursor-blocked > * {
  pointer-events: none;
}

/*
 * Tooltip styling for elements carrying `data-tooltip`.
 *
 * Tailwind has no pseudo-element content utility, and the whole tooltip is a
 * ::after. The alternative is a JavaScript tooltip library, which is a
 * dependency and a runtime cost for a string of text.
 */
[data-tooltip] {
  position: relative;
}

[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  border-radius: 6px;
  background: rgb(15 23 42);
  padding: 4px 8px;
  font-size: 12px;
  color: white;
  z-index: 20;
}