/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Pointer cursor for all clickable elements.
 * Tailwind v4 Preflight no longer sets cursor: pointer on buttons, so we
 * restore it here for every interactive control across the app. */
button:not(:disabled),
summary,
label[for],
select,
[role="button"],
[role="tab"],
[role="link"],
[role="menuitem"],
[role="option"],
[type="button"]:not(:disabled),
[type="submit"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="checkbox"],
[type="radio"],
[onclick],
[data-action*="click"] {
  cursor: pointer;
}

button:disabled,
[type="button"]:disabled,
[type="submit"]:disabled,
[type="reset"]:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}

/* Smooth expand/collapse for collapsible task messages */
details[open] > summary .caret {
  transform: rotate(90deg);
}

details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 200ms ease, content-visibility 200ms ease allow-discrete;
}

details[open]::details-content {
  block-size: auto;
}

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
}

/* Fast CSS tooltips: add data-tooltip="..." to any element. Unlike the native
 * `title` attribute (which the browser delays ~1s before showing), this appears
 * almost immediately on hover/focus. */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 6px;
  background: #111827;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 80ms ease 40ms;
  z-index: 50;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
}