/* ============================
   Login page (kitchen yellow theme)
   iPad以下(<=1024px)はスマホ扱い
   ============================ */

.login-wrapper{
  min-height: calc(100vh - 40px);
  display: flex;
  align-items: flex-start; /* center → flex-start */
  justify-content: center;
  padding-top: 48px;       /* ←ここで位置調整 */
}

/* 既存 .card を活かして上書き */
.login-card{
  width: 100%;
  max-width: 420px;
  padding: 22px 18px 20px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  border: 1px solid rgba(249,168,37,.25);
}

/* タイトル下を少し詰める */
.login-title{
  margin-bottom: 8px; /* 14px → 8px */
  text-align:center;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #f9a825;
}

/* メッセージ文の上下を詰める */
.login-alert{
  margin: 6px 0 8px; /* 10px 0 12px → 圧縮 */
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff8e1;
  color: #6a4f00;
  border: 1px solid rgba(251,192,45,.55);
  font-size: .95rem;
  line-height: 1.4;
}
.login-alert--error{
  background: #fff3f3;
  color: #7a1c1c;
  border-color: rgba(220,53,69,.35);
}
.login-alert--warn{
  background: #fff8e1;
  color: #6a4f00;
  border-color: rgba(251,192,45,.55);
}

/* table をスマホ向けフォームに見せる */
/* フォーム行間を詰める */
.login-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px; /* 10px → 6px */
}

/* ラベルと入力欄の距離を詰める */
.login-table th{
  text-align: left;
  font-size: .85rem;
  color: #666;
  font-weight: 700;
  padding-bottom: 2px; /* 6px → 2px */
  display: block; /* ←スマホで縦並び化 */
}
.login-table td{
  padding: 0;
  display: block; /* ←スマホで縦並び化 */
}

/* Djangoフォームの input に効かせる */
.login-table input[type="text"],
.login-table input[type="password"]{
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  font-size: 1rem;
  border-radius: 12px;
  border: 1px solid #ddd;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.login-table input[type="text"]:focus,
.login-table input[type="password"]:focus{
  outline: none;
  border-color: #fbc02d;
  box-shadow: 0 0 0 3px rgba(251,192,45,.22);
}

/* ボタン */
.login-actions{
  margin-top: 8px;
}
.btn-login{
  width: 100%;
  padding: 12px 14px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #fbc02d, #f9a825);
  box-shadow: 0 10px 18px rgba(249,168,37,.22);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-login:hover{
  filter: brightness(1.02);
}
.btn-login:active{
  transform: translateY(1px);
  box-shadow: 0 6px 12px rgba(249,168,37,.18);
}

/* iPad以下は「スマホ扱い」を強める */
@media (max-width: 1024px){
  .login-wrapper{ padding: 20px 12px; }
  .login-card{ border-radius: 22px; }
}

/* PCだけ少し整える（任意） */
@media (min-width: 1025px){
  .login-wrapper{ padding: 24px; }
}