/**
 * works.css
 * Web版(会社HPのSTAFF ONLYから開く狩野設備Works)だけに追加するスタイル。
 * 既存のstyle.css / admin.cssを土台にして、ログイン画面など「Web版にしか無い部品」と、
 * PC・iPhoneどちらでも押しやすい大きさの調整だけをここに書く。
 * 色は会社ホームページ(css/style.css)と同じ空色・珊瑚色を使い、見た目の違和感をなくす。
 */

:root {
  --works-sky: #0EA5E9;
  --works-sky-dark: #0284C7;
  --works-coral: #F97316;
  --works-danger: #DC2626;
}

/* ===== ログイン画面 ===== */
.login-box {
  max-width: 380px;
  margin: 8vh auto 0;
  padding: 2rem 1.5rem 2.5rem;
  /* 入力欄を白地に固定したため、カード側も白に揃える(存在しない変数を参照していた) */
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(15, 23, 42, .12);
}

.login-logo {
  font-size: 1.5rem;
  font-weight: 900;
  text-align: center;
  color: var(--works-sky);
  letter-spacing: .02em;
}

.login-sub {
  margin: .35rem 0 1.75rem;
  text-align: center;
  font-size: .85rem;
  color: var(--text-muted, #64748B);
}

.login-box label {
  display: block;
  margin-bottom: 1rem;
  font-size: .9rem;
  font-weight: 700;
}

/* iOS Safariは文字サイズが16px未満の入力欄にフォーカスすると画面を勝手に拡大するため、
   入力欄は必ず16px以上にする(現場でiPhoneから入力したときに画面がずれないようにするため)。 */
/* ログイン画面の入力欄は、端末が夜間モード(ダークモード)でも必ず読めるように
   「白地に黒文字」で固定する。
   以前は背景だけ白で文字色は端末のテーマ任せだったため、スマホが夜間モードだと
   白い文字が白い背景に重なって、入力した文字が見えなくなっていた。 */
.login-box input,
#screen-password-change input {
  width: 100%;
  margin-top: .35rem;
  padding: .85rem .9rem;
  font-size: 16px;
  border: 1px solid #c8cfd8;
  border-radius: 10px;
  background: #ffffff;
  color: #111111;
  /* iOSのSafariは入力欄の文字色を独自に上書きすることがあるため、こちらでも指定する */
  -webkit-text-fill-color: #111111;
  opacity: 1;
}

/* iPhoneのパスワード自動入力で背景が変わっても、文字が読めるようにする */
.login-box input:-webkit-autofill,
#screen-password-change input:-webkit-autofill {
  -webkit-text-fill-color: #111111;
  box-shadow: 0 0 0 1000px #ffffff inset;
}

/* 未入力時の案内文字は、入力した文字と区別できる薄さにする */
.login-box input::placeholder,
#screen-password-change input::placeholder {
  color: #9aa3ad;
  -webkit-text-fill-color: #9aa3ad;
  opacity: 1;
}

.login-box input:focus {
  outline: 2px solid var(--works-sky);
  outline-offset: 1px;
  border-color: var(--works-sky);
}

/* 手袋をしたままでも押せるように、主要ボタンは高さを確保する */
.btn-login {
  width: 100%;
  min-height: 52px;
  margin-top: .5rem;
  font-size: 1.05rem;
}

.login-message {
  min-height: 1.25rem;
  margin-top: .75rem;
  color: var(--works-danger);
  font-size: .85rem;
  text-align: center;
  word-break: break-word;
}

/* ===== パスワード変更のお願いバナー ===== */
.password-banner {
  margin: 0 0 1rem;
  padding: .75rem .9rem;
  background: rgba(249, 115, 22, .12);
  border: 1px solid rgba(249, 115, 22, .35);
  border-radius: 12px;
  font-size: .875rem;
  line-height: 1.6;
}

.password-banner .btn-link {
  font-weight: 700;
  color: var(--works-coral);
}

/* ===== 管理画面トップバーのリンク ===== */
.topbar-link {
  margin-right: .5rem;
  font-size: .85rem;
  color: var(--works-sky);
  text-decoration: none;
  white-space: nowrap;
}

.topbar-link:hover {
  text-decoration: underline;
}

/* ===== 画面幅への対応 =====
   現場のiPhone(幅375〜430px)を基準にしつつ、事務所のPC(Edge/Chrome)で開いたときに
   文字や余白が間延びしないように、広い画面では本文の最大幅を決めて中央に寄せる。 */
@media (min-width: 768px) {
  #app {
    max-width: 720px;
    margin: 0 auto;
  }

  .login-box {
    margin-top: 12vh;
  }
}

/* iPhoneの横画面(縦が狭い)ではログイン画面が縦に収まらなくなるため、余白を詰める */
@media (max-height: 520px) {
  .login-box {
    margin-top: 2vh;
    padding: 1.25rem 1.25rem 1.5rem;
  }

  .login-sub {
    margin-bottom: 1rem;
  }
}

/* iPhone X以降のホームバー・ノッチに本文が隠れないようにする */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

#app {
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

/* ===== 写真AI解析(Web版のみ) ===== */
.photo-ai-preview {
  margin: 1rem 0;
  text-align: center;
}

.photo-ai-preview img {
  max-width: 100%;
  max-height: 40vh;
  border-radius: 12px;
  border: 1px solid var(--border, #d8dee6);
}

/* 写真を選ぶボタンも現場で押しやすい高さにする */
#btn-photo-ai-select {
  width: 100%;
  min-height: 52px;
}


/* 白地のカードに載せるため、文字色も固定する(端末のテーマで薄くならないように) */
.login-box label { color: #1c1c1e; }
.login-box .hint { color: #64748b; }
.login-box .hint a { color: var(--works-sky); }