/*
 * 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.
 */

/* Org theming (League settings → Branding). Public-surface layouts set
 * --brand-color from the organization record; these rules consume it with
 * the stock TeamLens orange as the fallback. Kept out of the Tailwind build
 * so org colors never require a CSS rebuild. */
.brand-bg {
  background-color: var(--brand-color, #ea580c);
}
.brand-bg:hover {
  filter: brightness(0.92);
}
/* Secondary accent + the org's chosen font theme (--brand-font), consumed by
 * public layouts; both fall back to the app default when unset. */
.brand-secondary-bg {
  background-color: var(--brand-secondary, var(--brand-color, #ea580c));
}
.brand-font {
  font-family: var(--brand-font, inherit);
}

/* ---------------------------------------------------------------------------
 * Keyboard focus safety net (WCAG 2.4.7).
 *
 * `button_classes` states a focus ring per variant, but plenty of links and
 * hand-rolled controls do not, and some of them carry a permanent `outline`
 * utility that silently suppresses the browser's own ring. Declaring this in
 * Tailwind's `base` layer (already opened by tailwind.css, so this appends to
 * it) means it lands *below* every `focus-visible:outline-*` utility: it fills
 * the gaps without ever overriding a deliberate ring, including the white and
 * orange-400 rings the film room needs on its dark surfaces.
 * ------------------------------------------------------------------------ */
@layer base {
  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  [role="button"]:focus-visible,
  [role="tab"]:focus-visible,
  [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid #ea580c; /* orange-600 */
    outline-offset: 2px;
  }
}

/* ---------------------------------------------------------------------------
 * Invalid fields.
 *
 * Rails' default `field_error_proc` wraps the offending input *and* its label
 * in `<div class="field_with_errors">`, which turns an inline label into a
 * block and breaks two-column form grids. `display: contents` keeps the
 * wrapper out of layout entirely while still giving us a hook to tint the
 * label and to draw the error outline on the control itself. Paired with the
 * `form_field_error` helper, which supplies aria-invalid/aria-describedby.
 * ------------------------------------------------------------------------ */
.field_with_errors {
  display: contents;
}
.field_with_errors > label {
  color: #b91c1c; /* red-700 */
}
.field_with_errors > input:not([type="checkbox"]):not([type="radio"]),
.field_with_errors > select,
.field_with_errors > textarea {
  outline: 1px solid #dc2626; /* red-600 */
  outline-offset: -1px;
}
.field_with_errors > input:focus,
.field_with_errors > select:focus,
.field_with_errors > textarea:focus {
  outline-width: 2px;
  outline-offset: -2px;
}