/* 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 {
    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;
}

/* ボタンホバー時の効果 */
button#kintai-kanri-login-btn:hover,
input#kintai-kanri-clock-in-btn:hover,
input#kintai-kanri-clock-out-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;     /* 親がflexでも中央に */
  grid-column: 1 / -1 !important;    /* 親がgridなら1行占有 */
  flex-basis: 100% !important;       /* 親がflexで横並びでも1列使う */
  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;  /* ← 上の隙間 + 中央寄せ（左右auto） */
  text-align: center;

  /* 親が flex / grid の場合でも1行占有させる */
  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;             /* 親が float レイアウトでも改行 */
  flex: 0 0 100% !important;          /* 親が flex でも1行占有して次段へ */
  grid-column: -2 / -1 !important;    /* 親が grid なら最後の列（=権限列）に配置 */
  justify-self: start !important;     /* grid時、列の左側に揃える（右端にしたいなら end） */
}

/* モバイルは中央に（任意） */
@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; }
}