/* assets/css/style.css */

/* 共通のフォームスタイル */
.kintai-kanri-form {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.kintai-kanri-form label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

.kintai-kanri-form input[type="text"],
.kintai-kanri-form input[type="password"],
.kintai-kanri-form select {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* ログインボタンのスタイル */
button#kintai-kanri-login-btn {
    width: 144px;
    height: 72px;
    background-color: #007bbb;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* 出勤・退社・有給ボタンのスタイル */
input#kintai-kanri-clock-in-btn,
input#kintai-kanri-clock-out-btn,
input#kintai-kanri-paid-leave-btn {
    width: 144px;
    height: 72px;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

input#kintai-kanri-clock-in-btn {  background-color: #38b48b; } /* 緑 */
input#kintai-kanri-clock-out-btn { background-color: #c53d43; } /* 赤 */
input#kintai-kanri-paid-leave-btn { background-color: #f59e0b; } /* 橙：有給 */

/* ボタンホバー時の効果 */
button#kintai-kanri-login-btn:hover,
input#kintai-kanri-clock-in-btn:hover,
input#kintai-kanri-clock-out-btn:hover,
input#kintai-kanri-paid-leave-btn:hover {
    opacity: 0.9;
}

/* 入力エリアをグリッドで整列 */
#tkk-register-form .tkk-fields {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2列 */
  gap: 16px 24px;                 /* 行・列の間隔 */
  align-items: end;
}

/* ボタンを中央に・上に余白 */
#tkk-register-form .tkk-actions {
  display: flex;
  justify-content: center;
  margin-top: 28px;               /* 入力欄との距離 */
}
#tkk-register-form .tkk-actions .tkk-btn {
  min-width: 220px;
  padding: 12px 20px;
}

/* モバイルでは1列に */
@media (max-width: 768px) {
  #tkk-register-form .tkk-fields { grid-template-columns: 1fr; }
}

/* ▼登録ボタン中央化（テーマ上書き対策） */
#tkk-register-form button[type="submit"],
#tkk-register-form input[type="submit"],
form#tkk-register-form .tkk-btn.tkk-orange {
  display: block !important;
  margin: 32px auto 0 !important;
  float: none !important;
  align-self: center !important;
  grid-column: 1 / -1 !important;
  flex-basis: 100% !important;
  min-width: 220px;
}

/* ▼ tkk ボタンの共通ベース（不足分） */
.tkk-btn {
  border: none;
  border-radius: 6px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  padding: 12px 20px;
}
.tkk-orange { background: #FFA500; } /* 登録＝オレンジ */

/* ===== Register form 強制レイアウト（テーマ上書き対策）===== */
form#tkk-register-form {
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 20px !important;
  background: #f9f9f9 !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
}

/* ラベルは必ず縦（上）に出す */
form#tkk-register-form .tkk-field label {
  display: block !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}

/* 入力UIは100%幅 */
form#tkk-register-form .tkk-field input,
form#tkk-register-form .tkk-field select {
/*  width: 100% !important;  */
  padding: 10px 12px !important;
  border: 1px solid #ccc !important;
  border-radius: 6px !important;
}


/* 入力エリア：2列グリッド（PC） */
form#tkk-register-form .tkk-fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
  gap: 16px 24px !important;
  align-items: end !important;
}

/* 送信ボタンは中央に・上に間隔 */
form#tkk-register-form .tkk-actions {
  display: flex !important;
  justify-content: center !important;
  margin-top: 28px !important;
}

/* ボタンの見た目 */
form#tkk-register-form .tkk-actions .tkk-btn {
  min-width: 220px !important;
  padding: 12px 20px !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  color: #fff !important;
  cursor: pointer !important;
}
form#tkk-register-form .tkk-actions .tkk-orange { background: #FFA500 !important; }

/* スマホは1列 */
@media (max-width: 768px) {
  form#tkk-register-form .tkk-fields { grid-template-columns: 1fr !important; }
}

/* 登録ボタン：行を占有して中央寄せ＋上に余白 */
.kintai-kanri-form .kintai-kanri-register-btn {
  display: block !important;
  width: auto;
  min-width: 220px;
  margin: 28px auto 0 !important;
  text-align: center;
  flex: 0 0 100% !important;
  grid-column: 1 / -1 !important;
}

.kintai-kanri-register-btn {
    width: 144px;
    height: 72px;
    background-color: orange;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 50px auto 0;
}

.kintai-kanri-register-btn {
  width: 144px;
  height: 72px;
  background-color: orange;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: block !important;
  margin: 80px 0 0 auto !important;
  clear: both !important;
  flex: 0 0 100% !important;
  grid-column: -2 / -1 !important;
  justify-self: start !important;
}

/* モバイルは中央に（任意） */
@media (max-width: 768px){
  .kintai-kanri-register-btn{
    margin: 16px auto 0 !important;
    width: 100%;
    max-width: 320px;
  }
}

/* Kiosk */
.tkk-kiosk{ display:flex; justify-content:center; }
.tkk-kiosk-card{ max-width:720px; width:100%; padding:20px; background:#fff; border-radius:12px; box-shadow:0 4px 18px rgba(0,0,0,.06); }
.tkk-row{ margin-bottom:16px; }
.tkk-row label{ display:block; font-weight:700; margin-bottom:6px; }
.tkk-input{ width:100%; padding:12px 14px; border:1px solid #d7d7d7; border-radius:8px; font-size:18px; }
.tkk-pad{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.tkk-key{ padding:14px 0; font-size:20px; border-radius:10px; border:1px solid #ddd; background:#f7f7f7; cursor:pointer; }
.tkk-actions{ display:flex; gap:16px; justify-content:center; margin-top:14px; }
.tkk-btn{ min-width:180px; padding:16px 20px; font-weight:700; color:#fff; border:none; border-radius:10px; cursor:pointer; font-size:20px; }
.tkk-in{ background:#16a34a; }  /* 出勤=緑 */
.tkk-out{ background:#e11d48; } /* 退社=赤 */
.tkk-msg{ text-align:center; margin-top:10px; font-weight:700; }

@media (max-width:768px){
  .tkk-btn{ width:100%; max-width:260px; }
}

/* 休みボタン */
.tkk-btn.tkk-leave{ background:#f59e0b; color:#fff; }

/* モーダル */
.tkk-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  display:none; z-index:9999; padding:16px;
}
.tkk-modal-card{
  max-width:480px; margin:6vh auto; background:#fff; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.2); padding:20px;
}
.tkk-modal-title{ margin:0 0 8px; font-size:20px; font-weight:700; }
.tkk-modal-label{ display:block; font-weight:700; margin:8px 0 6px; }
.tkk-modal-note{ font-size:12px; color:#666; margin-top:6px; }
.tkk-modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.tkk-btn.tkk-gray{ background:#6b7280; color:#fff; }

/* ===== User Editor を登録フォームと同じ見た目に揃える ===== */

/* 2カラムのフィールドレイアウト（登録フォームと同じクラス名を想定） */
#tkk-user-editor .tkk-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px){
  #tkk-user-editor .tkk-fields { grid-template-columns: 1fr; }
}

/* --- 更新ボタンを登録ボタンと同じサイズ＆中央配置に --- */
/* 1) 包装コンテナがある場合 */
#tkk-user-editor .tkk-actions {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
/* 2) 直接ボタンだけが置かれている場合でも強制で中央＆大きく */
#tkk-user-editor .button,
#tkk-user-editor .button-primary,
#tkk-user-editor .tkk-btn {
  min-width: 220px;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
}
#tkk-user-editor .button-primary {
  background: #FFA500 !important;
  border-color: #FFA500 !important;
  color: #fff !important;
}
#tkk-user-editor .button-primary,
#tkk-user-editor .tkk-btn.tkk-orange {
  display: block;
  margin: 28px auto 0;  /* 中央配置 */
}

/* --- PIN「表示」ボタンを大きく・押しやすく --- */
#tkk-user-editor #tkk_pin_toggle {
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-weight: 600;
  background: #f3f4f6; /* 明るいグレー */
  color: #111827;
  border: none;
  cursor: pointer;
}
#tkk-user-editor #tkk_pin_toggle:hover { filter: brightness(0.96); }

/* 説明テキストのトーンを統一 */
#tkk-user-editor .description { color:#6b7280; font-size: 12px; margin-top: 6px; }