/* ==========================================================================
   Techmin auth screens (sign in / signed out)
   light: Figma node 5:20649 (login) · 8:42493 (logout)
   dark:  Figma node 5:41142 (login) · 5:42075 (logout)

   The mockup draws a two-column card — form/message on the left, a photo on
   the right, over a decorative full-bleed background pattern. Both the photo
   and the pattern resolve to the exact same fill in the source Figma file:
   its own "image unavailable" glyph, not real artwork (the file's external
   image reference is dead). Shipping that glyph would read as a broken
   image, so this build drops the right column and the pattern outright and
   keeps a single centred panel — everything else in the mockup (colours,
   type, the shield-check icon, which is a real vector layer) is kept as-is.

   The card itself needs no rules here — `.card` already carries the frame
   (border, square corners, no shadow) from content-techmin.css, and
   `.form-control` / `.form-check` / `.btn` already carry their geometry from
   forms-techmin.css and buttons-techmin.css. This file only adds what those
   don't: the page backdrop, and the one button colour the mockup uses
   nowhere else in the system — a tinted accent, not the solid `.btn-primary`.
   ========================================================================== */

/* --- Light theme --- */
:root {
  --au-heading: #000;
  --au-muted: rgba(0, 0, 0, .75);
  --au-footer: #404040;
  --au-bg: #faf4f0;
  --au-btn-bg: rgba(0, 122, 255, .2);
  --au-btn-bg-hover: rgba(0, 122, 255, .32);
  --au-btn-color: #007aff;
}

/* --- Dark theme ---
   The mockup fills the dark frame with its own gradient (teal to near-black),
   not the flat --hd-bg / --fc-range-track #171717 the rest of the interface
   uses for a working surface — auth is a standalone screen, not part of the
   app shell, so it keeps the mockup's own backdrop. */
[data-bs-theme="dark"] {
  --au-heading: #e5e5e5;
  --au-muted: #d4d4d4;
  --au-footer: #fafaf9;
  --au-bg: linear-gradient(180deg, #061415 0%, #023d50 100%);
}

body.auth-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--au-bg);
}

/* The mockup pins the footer to the bottom of a fixed 1200px canvas. A real
   viewport has no fixed height, so the footer is a normal flow item at the
   end of a full-height flex column instead — same result, no magic number. */
.auth-shell {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}

.auth-card {
  width: 100%;
  max-width: 460px;
}

/* Бренд: значок плюс название текстом — та же связка, что в шапке сайдбара.
   Раньше здесь стояла одна широкая картинка-надпись (logo1.png, 259x70), из-за
   которой экран логина и сайдбар показывали разный бренд: «CRMHub» в alt против
   «Maxton» в меню. Одно изображение на всю систему это и снимает. */
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 32px;
  text-decoration: none;
}

.auth-brand-logo {
  width: auto;
  height: 40px;
}

/* Только для загруженного логотипа: квадратная коробка, чтобы картинка любых
   пропорций не растягивала строку. У штатного logo-icon.png (187x142) остаётся
   width:auto, то есть без настройки вид не меняется ни на пиксель. */
.auth-brand-logo.brand-custom {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.auth-brand-name {
  font-family: Poppins, "Noto Sans", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  color: var(--au-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-heading {
  margin-bottom: 10px;
  font-family: Poppins, "Noto Sans", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 22px;
  color: var(--au-heading);
  text-align: center;
}

.auth-subtext {
  margin-bottom: 0;
  font-family: Poppins, "Noto Sans", sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: var(--au-muted);
  text-align: center;
}

.auth-form {
  margin-top: 26px;
}

.auth-field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
}

.auth-field-link {
  font-family: Poppins, "Noto Sans", sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: var(--au-muted);
  text-decoration: none;
}

.auth-field-link:hover {
  color: var(--au-muted);
  text-decoration: underline;
}

.auth-divider-text {
  margin-bottom: 0;
  font-family: Poppins, "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: var(--au-muted);
  text-align: center;
}

.auth-below {
  font-family: Poppins, "Noto Sans", sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: var(--au-muted);
  text-align: center;
}

/* `--fc-dark` (forms-techmin.css) already swaps #0a0a0a / #fafaf9 between
   themes — the same swap the mockup draws for this link, so it is reused
   rather than redeclared. */
.auth-below a {
  color: var(--fc-dark);
  font-weight: 700;
  text-decoration: none;
}

.auth-below a:hover {
  text-decoration: underline;
}

.auth-footer {
  flex: 0 0 auto;
  padding: 20px 24px;
  font-family: Poppins, "Noto Sans", sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: var(--au-footer);
  text-align: center;
}

/* --------------------------------------------------------------------------
   "Log In" button
   The mockup's primary action here is not `.btn-primary` (solid #007aff) —
   it is a light tint of the same accent, with the accent itself as the label
   colour. Nothing else in the system uses this treatment, so it is its own
   variant rather than a change to buttons-techmin.css.
   -------------------------------------------------------------------------- */

.btn-auth {
  --bs-btn-color: var(--au-btn-color);
  --bs-btn-bg: var(--au-btn-bg);
  --bs-btn-border-color: transparent;
  --bs-btn-font-weight: 700;
  --bs-btn-hover-color: var(--au-btn-color);
  --bs-btn-hover-bg: var(--au-btn-bg-hover);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 0, 122, 255;
  --bs-btn-active-color: var(--au-btn-color);
  --bs-btn-active-bg: var(--au-btn-bg-hover);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--au-btn-color);
  --bs-btn-disabled-bg: var(--au-btn-bg);
  --bs-btn-disabled-border-color: transparent;
}

/* --------------------------------------------------------------------------
   "Sign in with" row
   The mockup tints each square with a brand colour at 20% opacity — and
   those four colours are, component for component, the same accent/danger/
   info/dark quartet buttons-techmin.css already defines (verified against
   the mockup's flat light-theme hex: rgba(color, .2) over white rounds to
   the exact value drawn). So the tint is expressed as alpha over the
   existing palette instead of four new colours, and it holds for both
   themes without an override — except dark/light, which already swap
   between themes the same way `.btn-dark` does.
   -------------------------------------------------------------------------- */

.auth-social-btn {
  --bs-btn-padding-x: 15.4px;
  --bs-btn-padding-y: 11.7px;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-font-size: 16px;
  --bs-btn-border-radius: 0;
}

.auth-social-btn-facebook,
.auth-social-btn-google,
.auth-social-btn-twitter,
.auth-social-btn-github {
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-active-color: var(--bs-btn-color);
  --bs-btn-active-bg: var(--bs-btn-hover-bg);
  --bs-btn-disabled-color: var(--bs-btn-color);
  --bs-btn-disabled-bg: var(--bs-btn-bg);
}

.auth-social-btn-facebook {
  --bs-btn-color: #007aff;
  --bs-btn-bg: rgba(0, 122, 255, .2);
  --bs-btn-hover-bg: rgba(0, 122, 255, .32);
}

.auth-social-btn-google {
  --bs-btn-color: #d03f3f;
  --bs-btn-bg: rgba(208, 63, 63, .2);
  --bs-btn-hover-bg: rgba(208, 63, 63, .32);
}

.auth-social-btn-twitter {
  --bs-btn-color: #33b0e0;
  --bs-btn-bg: rgba(51, 176, 224, .2);
  --bs-btn-hover-bg: rgba(51, 176, 224, .32);
}

.auth-social-btn-github {
  --bs-btn-color: #0a0a0a;
  --bs-btn-bg: rgba(10, 10, 10, .2);
  --bs-btn-hover-bg: rgba(10, 10, 10, .32);
}

[data-bs-theme="dark"] .auth-social-btn-github {
  --bs-btn-color: #fafaf9;
  --bs-btn-bg: rgba(250, 250, 249, .2);
  --bs-btn-hover-bg: rgba(250, 250, 249, .32);
}

/* --------------------------------------------------------------------------
   Logout screen
   The shield-check is a real exported vector (Figma node 8:42514 / 5:42096),
   stroked #007aff in both themes in the mockup itself — no theme override
   needed.
   -------------------------------------------------------------------------- */

.auth-logout-icon {
  display: block;
  margin: 36px auto 0;
}