/* 生産管理WEB ログイン画面（FkzLogin）スタイル */
/* ※ヘッダー・ボタン・配色（カラー変数）は生産管理WEB共通スタイル（fkz-common.css）を使用する */
/* l-＝レイアウト用クラス／p-＝画面固有のクラス */

/* メインコンテンツ（ログインフォームを画面中央へ配置する） */
.l-login {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

/* ログインフォームの枠 */
.p-login-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--primary);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}
/* 管理者ログインの場合は枠の上端の色を変えて、一般のログインと区別できるようにする */
.p-login-card.is-admin { border-top-color: var(--calc); }

/* ログインフォームのタイトル部 */
.p-login-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.p-login-card__icon { flex-shrink: 0; width: 40px; height: 40px; }
.p-login-card__system { font-size: .8rem; font-weight: 700; color: #5a6b82; }
.p-login-card__title { font-size: 1.25rem; font-weight: 800; color: var(--primary-dark); }
.p-login-card.is-admin .p-login-card__title { color: var(--calc); }

/* ログインフォームの入力部 */
.p-login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px 26px;
}
.p-login-form__row { display: flex; flex-direction: column; gap: 5px; }
.p-login-form__row label { font-size: .86rem; font-weight: 700; color: #2b3a50; }
.p-login-form__row input {
  height: 38px;
  padding: 0 10px;
  border: 1px solid #b7bdc7;
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
}
.p-login-form__row input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* エラーメッセージ（初期状態は非表示。エラー時に is-show を付けて表示する） */
.p-login-form__error { display: none; }
.p-login-form__error.is-show {
  display: block;
  padding: 8px 10px;
  border: 1px solid #dba0a0;
  border-radius: var(--radius);
  background: #fdeaea;
  color: var(--danger);
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.5;
}

/* ログインボタン */
.p-login-form__submit {
  justify-content: center;
  width: 100%;
  height: 40px;
  margin-top: 6px;
  font-size: .95rem;
}
/* ログイン処理中はボタンを押せないことがわかるようにする */
.p-login-form__submit:disabled { opacity: .6; cursor: default; filter: none; }