/* ===========================================================================
   LOGIN — staff sign-in and the client portal's own
   ---------------------------------------------------------------------------
   Two things make this file different from components.css:

   1. application/views/authentication/includes/head.php:3 renders <html> with
      NO data-theme attribute, so the html[data-theme] prefix used everywhere
      else matches nothing here. Rules are scoped by body class instead.

   2. That same head opens an inline <style> at line 13 -- AFTER
      app_compile_css('admin-auth') -- hardcoding body colour and font. A <link>
      of ours loses ties to it on source order, so anything that ties is also
      emitted as a <style> on app_admin_authentication_head, which fires later
      still (line 58).

   The login takes the active theme by default. Per-business customisation
   (layout presets, background image, welcome copy) is the second half of this
   phase and needs its design approved first.
   =========================================================================== */

body.login_admin {
  background-color: var(--crm-canvas) !important;
  background-image: var(--thm-backdrop) !important;
  background-attachment: fixed !important;
  color: var(--crm-ink-2);
}

body.login_admin .authentication-form-wrapper > form,
body.login_admin .authentication-form-wrapper .tw-bg-white {
  background: var(--thm-surface-fill) !important;
  border-color: var(--thm-surface-stroke) !important;
  border-radius: var(--thm-surface-radius) !important;
  box-shadow: inset 0 1px 0 var(--thm-surface-highlight), var(--thm-surface-shadow) !important;
}

body.login_admin h1,
body.login_admin .tw-text-neutral-800 {
  color: var(--crm-ink) !important;
}

body.login_admin p,
body.login_admin .tw-text-neutral-600 {
  color: var(--crm-ink-2) !important;
}

body.login_admin .form-control {
  background: var(--thm-sunken-fill);
  border-color: var(--thm-surface-stroke);
  border-radius: var(--thm-control-radius);
  color: var(--crm-ink);
}

body.login_admin .form-control:focus {
  border-color: var(--thm-elevated-stroke);
  box-shadow: 0 0 0 3px var(--thm-focus-ring);
}

body.login_admin .btn-primary {
  border-radius: var(--thm-control-radius);
  border-color: transparent;
}

body.login_admin .control-label {
  color: var(--crm-ink);
}

/* The other authentication screens share the same head and wrapper but not the
   login_admin body class, so they are matched by the wrapper alone. */
body:not(.admin) .authentication-form-wrapper > form {
  background: var(--thm-surface-fill);
  border-color: var(--thm-surface-stroke);
  border-radius: var(--thm-surface-radius);
}

/* --- the client portal's login ------------------------------------------
   Runs through the portal theme, so it already has data-theme and the
   portal rules in components.css. Only its own panel needs saying. */

html[data-theme] body.customers .login-heading {
  color: var(--crm-ink);
}

/* application/views/themes/perfex/views/login.php puts the heading and the
   form in two col-md-4 col-md-offset-4 columns inside a .container that is a
   fixed 1170px wide. That ties the form's width and position to the screen,
   not to the layout: in the split layout it cannot fit its half, and in the
   bleed layout it cannot move aside. The presets used to aim at a
   .login-wrapper the portal does not have, so three of them did nothing and
   the split one scattered the page. The column is freed from the grid once,
   here; each preset only says where it goes. */
body.customers_login #content .mtop40 > .col-md-offset-4 {
  float: none;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* The primary button, again.
   components.css themes it under html[data-theme], which matches nothing on
   this page -- the very constraint documented at the top of this file, and
   easy to forget the moment you write a rule anywhere else. Every component
   the login shows needs its rule repeated here, scoped by body class. */

body.login_admin .btn-primary,
body:not(.admin) .authentication-form-wrapper .btn-primary {
  background: var(--crm-brand);
  border-color: var(--crm-brand);
  color: var(--thm-on-brand);
  box-shadow: inset 0 1px 0 var(--thm-surface-highlight);
}

body.login_admin .btn-primary:hover,
body.login_admin .btn-primary:focus {
  background: var(--crm-brand);
  border-color: var(--crm-brand);
  color: var(--thm-on-brand);
  filter: brightness(1.08);
}
