/*
 * Tailo Bifrost — Canvas brand overrides.
 *
 * Hooked in via BrandConfig.css_overrides → /bifrost-overrides.css. The
 * file lives under ops/canvas-fly/public/ and is COPY'd into
 * /opt/canvas/public/ in the Dockerfile, so Rails serves it statically.
 *
 * Limited to: layout fixes, brand-image sizing, mild rounding. The
 * actual logo images come in via BrandConfig variables
 * (`ic-brand-header-image`, `ic-brand-Login-logomark`, etc.) — this
 * file does NOT replace logos with text or pseudo-elements; that path
 * fights the variables and produced broken hybrid output.
 */

/* ===========================================================================
 * Login page layout
 * ===========================================================================
 *
 * Stock Canvas .ic-Login__actions is a flex row: [Stay-signed-in +
 * Forgot password] on the left, [Log In] on the right. With a narrower
 * coloured container the button gets squashed onto the same row as
 * Forgot Password. Stack vertically and full-width the button.
 */
.ic-Login__actions {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 1rem !important;
}
.ic-Login__actions .ic-Form-control--login {
  width: 100% !important;
  margin: 0 !important;
}
.ic-Login__actions .Button--login {
  width: 100% !important;
  font-size: 1rem !important;
  padding-top: 0.7rem !important;
  padding-bottom: 0.7rem !important;
}

/* ===========================================================================
 * Brand-image sizing
 * ===========================================================================
 *
 * Canvas slots brand images via background-image on specific elements
 * with no explicit width/height — they assume the uploaded asset has
 * sensible intrinsic dimensions. SVGs without `width` / `height` attrs
 * (like our tailoFavLight.svg) render at their viewBox size which can
 * be huge. PNGs at their pixel dimensions, ditto. Constrain each slot.
 */

/* Top-left brand mark inside the global-nav sidebar (small square). */
.ic-app-header__logomark {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  width: 48px !important;
  height: 48px !important;
  margin: 8px auto !important;
}

/* Big wordmark on the login page (top of form). */
.ic-Login__logomark,
.ic-Login__logomark-container {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  width: 220px !important;
  height: 60px !important;
  margin: 0 auto 1rem !important;
}

/* `ic-brand-watermark` paints a big floating element on the login body
 * background. We don't want a free-floating decorative mark — kill it. */
.ic-brand-watermark,
.ic-Login__bg-watermark,
.ic-Login__watermark {
  display: none !important;
}

/* ===========================================================================
 * Form polish — small radius, slight padding, nothing exotic
 * ===========================================================================
 */
.ic-Login .ic-Input,
.ic-Login__form input[type="text"],
.ic-Login__form input[type="password"],
.ic-Login__form input[type="email"] {
  border-radius: 0.5rem !important;
}
.ic-Login {
  border-radius: 0.75rem !important;
}
.Button,
button.btn,
.btn {
  border-radius: 0.5rem !important;
}