/* Brand alignment with the public Colisao site (see public/assets/landing/styles.css).
   Only recolors the theme's existing HSL custom properties - no structural changes,
   so it is safe to load on every admin page. */
:root {
  /* This theme has no dark palette - stop browsers/OS from auto-dark-moding it. */
  color-scheme: light;

  --base-h: 216;
  --base-s: 98%;
  --base-l: 52%;

  --primary-h: 216;
  --primary-s: 98%;
  --primary-l: 52%;
}

/* Login/register/password-reset cards (admin + client portal): the logo is a fixed-width
   inline-block with no auto margins, so it sits flush against the left edge while the
   heading text below it is also left-aligned - reads as off-center. Center just the logo. */
.account-heading {
  text-align: center;
}

.account-heading__logo {
  margin-left: auto;
  margin-right: auto;
}

.account-heading__title,
.account-heading__text {
  text-align: left;
}

/* Site header logo (public frontend, e.g. /atendimento, ticket list): the real logo file
   is portrait (192x288), and this theme's .navbar-brand.logo img only caps max-width, so
   the height scales up unconstrained and blows out the header. Cap the height instead. */
.navbar-brand.logo img {
  height: 44px;
  width: auto;
  max-width: none;
}

/* Admin auth pages (login, forgot password, code verify, reset) no longer include the
   vendor's marketing sidebar (see admin/auth/auth_sidebar.blade.php) - without it,
   .account-content still assumed a --left-width gap and the dark account-bg.png photo
   set on .account-section bled through on the right. Make the section a single
   centered light card at every screen size. */
.account-section:not(:has(.account-left)) {
  background-color: hsl(var(--section-bg));
  align-items: center;
  justify-content: center;
}

.account-section:not(:has(.account-left)) .account-content {
  width: 100%;
  max-width: none;
  padding: 40px 16px;
  justify-content: center;
}

.account-section:not(:has(.account-left)) .account-form {
  background-color: hsl(var(--white));
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 10px 30px hsl(var(--black) / 0.06);
}

@media screen and (max-width: 575px) {
  .account-section:not(:has(.account-left)) .account-form {
    padding: 24px;
  }
}