/* =====================================================================
   Montana RMS — sign-in, split-screen.

   The photograph of the bar carries the left half; the form sits on clean
   paper to the right. Loaded only by login.php, after app.css, so it can
   use the palette already defined there rather than a second set of
   colours.
   ===================================================================== */

.auth-body { min-height: 100vh; background: var(--ink); }

.auth-split { display: flex; min-height: 100vh; }

/* ------------------------------------------------------ image panel */

.auth-image-panel {
  position: relative;
  flex: 0 0 55%;
  /* A 1800px resample of bg_login.jpeg — the 2560px original is 395 KB for
     a panel that is never wider than about half a screen. */
  background: url('../bg_login-web.jpg') center/cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.8rem 3rem;
  overflow: hidden;
}

/* The photograph is already dark and heavily red. The wash is angled so
   the corners that carry text go darkest, which is what lets white type
   hold against the neon behind it. */
.auth-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(9, 13, 11, .62) 0%,
    rgba(9, 13, 11, .34) 45%,
    rgba(9, 13, 11, .82) 100%
  );
  z-index: 0;
}

/* The logo is a full lockup — mountain and wordmark together — so it
   stands on its own here rather than sitting beside a repeat of the name
   in type. Only the tagline follows it. */
.auth-brand {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.auth-brand-logo {
  width: 72px;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, .55));
}
/* If the file is ever missing, the alt text still names the business, so
   the panel keeps its brand instead of showing a broken-image icon. */
.auth-brand-logo.is-missing {
  width: auto;
  font-family: var(--serif);
  font-size: 24px;
  color: #fff;
}

.auth-brand-name {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .66);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
}

.auth-image-caption { position: relative; z-index: 1; }

.auth-caption-tag {
  font-size: .78rem;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #d8a05c;
  font-weight: 600;
  margin-bottom: 1.2rem;
}

.auth-caption-title {
  font-family: var(--serif);
  font-size: clamp(2.3rem, 4.2vw, 3.6rem);
  font-weight: 500;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 1.2rem;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .5);
}
.auth-caption-title em { font-style: italic; color: #d8a05c; }

.auth-caption-sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, .68);
  line-height: 1.8;
  max-width: 380px;
  margin: 0;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .55);
}

/* ------------------------------------------------------- form panel */

.auth-form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  padding: 3rem 2rem;
}

.auth-form-inner { width: 100%; max-width: 400px; }

.auth-form-tag {
  font-size: .58rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 600;
  margin-bottom: .75rem;
}

.auth-form-title {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .5rem;
  line-height: 1.15;
}

.auth-form-sub {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 2rem;
}

.auth-alert {
  padding: .75rem 1rem;
  font-size: .78rem;
  margin-bottom: 1.4rem;
  border: 1px solid;
  border-radius: 6px;
  line-height: 1.5;
}
.auth-alert--stop { background: var(--stop-soft); border-color: #e8c6bf; color: var(--stop); }
.auth-alert--ok   { background: var(--ok-soft);   border-color: #c3ddd2; color: var(--ok); }

/* ---------------------------------------------------------- fields */

.auth-form .form-group { margin-bottom: 1.25rem; }

.auth-form .form-group label {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--ink-soft);
  margin-bottom: .45rem;
  text-transform: uppercase;
}

/* Deliberately more rounded and softer than the ledger inputs used
   inside the app — this is the one screen that is not a ledger. */
.auth-form .form-group input[type=text],
.auth-form .form-group input[type=password] {
  width: 100%;
  font-family: var(--sans);
  font-size: .9rem;
  color: var(--ink);
  background: #faf8f4;
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  padding: .78rem 1rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.auth-form .form-group input[type=text]:focus,
.auth-form .form-group input[type=password]:focus {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(176, 112, 42, .12);
  background: #fff;
}

.auth-form .form-group input::placeholder { color: #bbb; }

.auth-submit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .9rem 1.5rem;
  cursor: pointer;
  transition: background .2s, transform .15s;
  margin-top: .5rem;
}
.auth-submit-btn:hover { background: var(--brass); transform: translateY(-1px); }
.auth-submit-btn:active { transform: none; }

.auth-switch {
  text-align: center;
  font-size: .78rem;
  color: var(--muted);
  margin-top: 1.6rem;
  line-height: 1.6;
}
.auth-switch a { color: var(--brass); text-decoration: none; font-weight: 500; }
.auth-switch a:hover { text-decoration: underline; }

/* ------------------------------------------------------ responsive */

@media (max-width: 820px) {
  .auth-split { flex-direction: column; }

  /* Stacked, the panel is short and the brand sits close to the caption,
     so they get a floor of their own rather than being pushed apart by
     space-between alone. */
  .auth-image-panel {
    flex: none;
    min-height: 300px;
    padding: 2rem;
    gap: 1.75rem;
  }
  .auth-brand-logo { width: 62px; }
  .auth-caption-tag { letter-spacing: 3px; margin-bottom: .7rem; }
  .auth-caption-title { font-size: 1.8rem; margin-bottom: 0; }
  .auth-caption-sub { display: none; }

  .auth-form-panel { padding: 2.5rem 1.5rem; }
}

@media (max-width: 480px) {
  .auth-image-panel { min-height: 260px; padding: 1.6rem; }
  .auth-brand-logo { width: 54px; }
  .auth-caption-tag { font-size: .68rem; letter-spacing: 2.5px; }
  .auth-caption-title { font-size: 1.62rem; }
  .auth-form-inner { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-submit-btn:hover { transform: none; }
}