/* Vyravo enterprise v2 login presentation styles */

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body.f-login-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--fui-canvas);
  color: var(--fui-text);
  font-family: var(--fui-font-sans);
  box-sizing: border-box;
}

/* Brand header */
.f-login-header {
  width: 100%;
  border-bottom: var(--fui-border-width) solid var(--fui-border);
  background-color: var(--fui-surface);
  box-sizing: border-box;
}

.f-login-header-inner {
  max-width: var(--fui-content-max);
  margin: 0 auto;
  min-height: var(--fui-header-height);
  padding: var(--fui-space-3) var(--fui-page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fui-space-4);
  box-sizing: border-box;
}

.f-login-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.f-login-logo {
  display: block;
  width: clamp(108px, 18vw, 164px);
  max-width: 100%;
  height: auto;
  aspect-ratio: 4.461 / 1;
}

/* Locale picker in header */
.f-login-locale-picker {
  display: inline-flex;
  align-items: center;
  gap: var(--fui-space-2);
}

.f-login-locale-icon {
  color: var(--fui-text-muted);
  width: var(--fui-icon-sm);
  height: var(--fui-icon-sm);
  flex-shrink: 0;
}

.f-login-locale-select {
  width: auto;
  min-width: 124px;
  height: var(--fui-touch-target);
  min-height: var(--fui-touch-target);
  padding-inline: var(--fui-space-3);
  font-size: var(--fui-font-caption);
  line-height: var(--fui-line-caption);
  background-color: var(--fui-surface);
  border-color: var(--fui-border-strong);
  border-radius: var(--fui-radius-control);
  cursor: pointer;
}

/* Main content area */
.f-login-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--fui-space-10) var(--fui-page-gutter);
  box-sizing: border-box;
  width: 100%;
}

.f-login-container {
  width: 100%;
  max-width: var(--fui-dialog-width);
  display: flex;
  flex-direction: column;
  gap: var(--fui-space-6);
  box-sizing: border-box;
}

/* Sign-in card */
.f-login-card {
  padding: var(--fui-space-8);
  border: var(--fui-border-width) solid var(--fui-border);
  border-radius: var(--fui-radius-card);
  background-color: var(--fui-surface);
  box-shadow: var(--fui-shadow-xs);
  box-sizing: border-box;
  width: 100%;
}

.f-login-card-header {
  display: flex;
  flex-direction: column;
  gap: var(--fui-space-1);
  margin-bottom: var(--fui-space-6);
}

.f-login-title {
  font-size: var(--fui-font-section);
  line-height: var(--fui-line-section);
  font-weight: var(--fui-weight-semibold);
  letter-spacing: var(--fui-letter-heading);
  color: var(--fui-text);
  margin: var(--fui-space-1) 0 0 0;
}

.f-login-intro {
  font-size: var(--fui-font-ui);
  line-height: var(--fui-line-ui);
  color: var(--fui-text-secondary);
  margin: 0;
}

/* Form layout */
.f-login-form {
  display: flex;
  flex-direction: column;
  gap: var(--fui-space-4);
  width: 100%;
}

.f-login-form .f-field {
  display: flex;
  flex-direction: column;
  gap: var(--fui-space-2);
  width: 100%;
}

.f-login-form .f-label {
  font-weight: var(--fui-weight-medium);
  font-size: var(--fui-font-ui);
  line-height: var(--fui-line-ui);
  color: var(--fui-text);
}

.f-login-form .f-input {
  min-height: var(--fui-touch-target);
  font-size: var(--fui-font-ui);
  line-height: var(--fui-line-ui);
  padding: var(--fui-space-2) var(--fui-space-3);
  border: var(--fui-border-width) solid var(--fui-border-control);
  border-radius: var(--fui-radius-control);
  background-color: var(--fui-surface);
  color: var(--fui-text);
  box-sizing: border-box;
  width: 100%;
}

.f-login-submit {
  width: 100%;
  min-height: var(--fui-touch-target);
  font-size: var(--fui-font-ui);
  font-weight: var(--fui-weight-semibold);
  margin-top: var(--fui-space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fui-space-2);
}

/* Error alert box */
.f-login-error {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--fui-space-2);
  padding: var(--fui-space-3) var(--fui-space-4);
  background-color: var(--fui-danger-subtle);
  border: var(--fui-border-width) solid var(--fui-danger);
  border-radius: var(--fui-radius-control);
  color: var(--fui-danger);
  font-size: var(--fui-font-caption);
  line-height: var(--fui-line-caption);
  box-sizing: border-box;
}

.f-login-error:empty {
  display: none !important;
}

/* Quiet footer */
.f-login-footer {
  text-align: center;
  padding: 0 var(--fui-space-2);
}

.f-login-footer p {
  color: var(--fui-text-muted);
  font-size: var(--fui-font-caption);
  line-height: var(--fui-line-caption);
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .f-login-header-inner {
    padding: var(--fui-space-3) var(--fui-page-gutter-mobile);
  }

  .f-login-main {
    padding: var(--fui-space-6) var(--fui-page-gutter-mobile);
  }

  .f-login-card {
    padding: var(--fui-space-6);
  }
}

@media (max-width: 360px) {
  .f-login-header-inner {
    padding: var(--fui-space-2) var(--fui-page-gutter-mobile);
  }

  .f-login-main {
    padding: var(--fui-space-4) var(--fui-page-gutter-mobile);
  }

  .f-login-card {
    padding: var(--fui-space-4);
  }

  .f-login-logo {
    width: 120px;
  }

  .f-login-locale-select {
    min-width: 104px;
    padding-inline: var(--fui-space-2);
  }
}