/* Vertbooks — sign-in pages.
 *
 * Loaded by resources/views/layouts/sign-in.blade.php after the template CSS
 * and vertbooks-theme.css. The page is two columns: the form on the start
 * side, a gradient panel with the product on the end side. Everything here
 * is prefixed vb-auth / vb-field so nothing leaks into the app.
 *
 * Colours come from the theme variables (--primary, --vb-gradient) so the
 * sign-in page can never drift from the app it opens.
 */

.vb-auth-body {
  margin: 0;
  background: #fff;
  color: #16201b;
}

.vb-auth {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

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

.vb-auth__form {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}

.vb-auth__inner {
  width: 100%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.vb-auth__logo {
  display: inline-flex;
  width: fit-content;
  line-height: 0;
}
.vb-auth__logo img {
  height: 34px;
  width: auto;
}

.vb-auth__title {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: #16201b;
}

.vb-auth__lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #5a6b62;
}

.vb-auth__fields {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

/* A field: label, a soft rounded well around the input, and its error. */
.vb-field label {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #5a6b62;
}

.vb-field__wrap {
  position: relative;
  border-radius: 1rem;
  border: 1px solid #dde8e0;
  background: rgba(22, 32, 27, 0.035);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.vb-field__wrap:focus-within {
  border-color: rgba(0, 148, 68, 0.75);
  background: rgba(0, 148, 68, 0.06);
  box-shadow: 0 0 0 3px rgba(0, 148, 68, 0.12);
}
.vb-field__wrap input {
  display: block;
  width: 100%;
  padding: 0.95rem 1rem;
  border: 0;
  border-radius: 1rem;
  background: transparent;
  font-size: 0.925rem;
  line-height: 1.4;
  color: #16201b;
  outline: none;
  box-shadow: none;
}
.vb-field__wrap input::placeholder {
  color: #8b9a91;
}
.vb-field__wrap input.has-toggle {
  padding-inline-end: 3.25rem;
}

/* The eye. It is a <button> with the isax icon classes on it, so the
   template's own toggle script (assets/js/script.js) works unchanged. */
.vb-field__wrap .vb-field__toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  margin: 0;
  transform: none;
  inset-inline-end: 0.35rem;
  display: inline-flex;
  align-items: center;
  padding: 0 0.6rem;
  border: 0;
  background: transparent;
  color: #5a6b62;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 0.75rem;
  transition: color 0.2s ease;
}
.vb-field__toggle:hover { color: #16201b; }
.vb-field__toggle:focus-visible {
  outline: 2px solid var(--primary, #009444);
  outline-offset: -4px;
}

.vb-field.is-invalid .vb-field__wrap {
  border-color: #c0392b;
  background: rgba(192, 57, 43, 0.05);
}
.vb-field__error {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: #c0392b;
}

.vb-auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
}

.vb-check {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  cursor: pointer;
  color: #16201b;
}
.vb-check input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--primary, #009444);
}

.vb-auth__link {
  color: var(--primary, #009444);
  text-decoration: none;
  font-weight: 500;
}
.vb-auth__link:hover { text-decoration: underline; color: var(--primary-hover, #00753a); }

.vb-auth__submit {
  display: block;
  width: 100%;
  padding: 0.95rem 1.25rem;
  border: 0;
  border-radius: 1rem;
  background: var(--vb-gradient, #009444);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.vb-auth__submit:hover { filter: brightness(1.06); }
.vb-auth__submit:active { transform: translateY(1px); }
.vb-auth__submit:focus-visible {
  outline: 2px solid var(--primary, #009444);
  outline-offset: 3px;
}

.vb-auth__note {
  margin: 0;
  text-align: center;
  font-size: 0.875rem;
  color: #5a6b62;
}

/* The company chooser: one radio row per account, as a soft card. */
.vb-choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  border: 1px solid #dde8e0;
  background: rgba(22, 32, 27, 0.035);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.vb-choice:hover { border-color: rgba(0, 148, 68, 0.45); }
.vb-choice:has(input:checked) {
  border-color: rgba(0, 148, 68, 0.75);
  background: rgba(0, 148, 68, 0.06);
}
.vb-choice input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--primary, #009444);
}
.vb-choice span { font-size: 0.925rem; font-weight: 500; }

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

.vb-auth__panel { display: none; }

@media (min-width: 900px) {
  .vb-auth { flex-direction: row; }
  .vb-auth__form { padding: 3rem 2.5rem; }
  .vb-auth__title { font-size: 2.75rem; }
  .vb-auth__panel {
    display: block;
    flex: 1 1 0;
    position: relative;
    padding: 1rem;
  }
}

.vb-auth__panel-inner {
  position: absolute;
  inset: 1rem;
  overflow: hidden;
  border-radius: 1.5rem;
  background: var(--vb-gradient, linear-gradient(135deg, #8dc63f 0%, #009444 55%, #00a79d 100%));
  padding: 3rem;
  display: flex;
  flex-direction: column;
}

.vb-auth__tagline {
  margin: 0;
  max-width: 14ch;
  color: #fff;
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

/* The product itself, bleeding off the bottom-end corner so the panel reads
   as a window onto it rather than a picture of it. */
.vb-auth__shot {
  margin-top: 2.5rem;
  width: 125%;
  max-width: none;
  border-radius: 14px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.5);
  transform: translateY(2%);
  align-self: flex-start;
}
[dir="rtl"] .vb-auth__shot { align-self: flex-end; }

/* -------------------------------------------------------------- motion */

.animate-element {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(14px);
  animation: vbFadeSlideIn 0.7s cubic-bezier(0.16, 0.84, 0.32, 1) forwards;
}
.animate-slide-right {
  opacity: 0;
  filter: blur(8px);
  transform: translateX(28px);
  animation: vbSlideIn 0.8s cubic-bezier(0.16, 0.84, 0.32, 1) forwards;
}
[dir="rtl"] .animate-slide-right { transform: translateX(-28px); }

.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
.animate-delay-400 { animation-delay: 0.4s; }
.animate-delay-500 { animation-delay: 0.5s; }
.animate-delay-600 { animation-delay: 0.6s; }
.animate-delay-700 { animation-delay: 0.7s; }
.animate-delay-800 { animation-delay: 0.8s; }
.animate-delay-900 { animation-delay: 0.9s; }

@keyframes vbFadeSlideIn {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes vbSlideIn {
  to { opacity: 1; filter: blur(0); transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .animate-element,
  .animate-slide-right {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
}