/* ============================================================
   style.css
   デザインシステムの共通トークン。全申請画面(残業/時間外訪問/O.C/休暇)で
   同一のカード・ボタン・入力UIを使うことで「休暇だけ別アプリ」を防ぐ。
   ============================================================ */

:root {
  --brand-600: #1b8562;
  --brand-700: #186f52;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Segoe UI", sans-serif;
}

/* ---- カード共通 ---- */
.app-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(16, 24, 40, 0.04);
}

/* ---- 主操作ボタン(1画面1つに限定する運用ルール) ---- */
.btn-primary {
  background-color: var(--brand-600);
  color: #fff;
  border-radius: 0.75rem;
  font-weight: 600;
  padding: 0.875rem 1rem;
  transition: background-color 0.15s ease, transform 0.05s ease;
  box-shadow: 0 2px 6px rgba(27, 133, 98, 0.25);
}
.btn-primary:hover { background-color: var(--brand-700); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { background-color: #9ca3af; box-shadow: none; cursor: not-allowed; }

.btn-secondary {
  background-color: #fff;
  color: #4b5563;
  border: 1px solid #d1d5db;
  border-radius: 0.75rem;
  font-weight: 500;
  padding: 0.875rem 1rem;
}
.btn-secondary:hover { background-color: #f9fafb; }

.btn-outline-brand {
  background-color: #fff;
  color: var(--brand-700);
  border: 1.5px solid var(--brand-500, #249b74);
  border-radius: 0.75rem;
  font-weight: 600;
  padding: 0.75rem 1rem;
}

.btn-danger-outline {
  background-color: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 0.625rem;
  font-weight: 500;
}
.btn-danger-outline:hover { background-color: #fee2e2; }

.btn-danger {
  background-color: #dc2626;
  color: #fff;
  border-radius: 0.75rem;
  font-weight: 600;
}
.btn-danger:hover { background-color: #b91c1c; }

/* ---- 誤タップ防止: 編集/削除ボタンは小さく分離し、削除は必ず確認ダイアログ経由 ---- */
.row-action-btn {
  min-width: 3.25rem;
  text-align: center;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
}

/* ---- 日付/時刻入力の統一スタイル(全申請共通) ---- */
.field-input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  background-color: #fff;
}
.field-input:focus {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(27, 133, 98, 0.12);
}
.field-label {
  font-size: 0.8125rem;
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 0.375rem;
  display: block;
}

/* ---- ステータスバッジ ---- */
.badge-pending  { background-color: #fef3c7; color: #92400e; }
.badge-approved { background-color: #d1fae5; color: #065f46; }
.badge-rejected { background-color: #fee2e2; color: #991b1b; }
.badge-neutral  { background-color: #e5e7eb; color: #374151; }

/* ---- 種別カラー帯(月次入力確認の一覧カード左端) ---- */
.stripe-overtime      { border-left: 4px solid #10b981; }
.stripe-offsite_visit { border-left: 4px solid #0ea5e9; }
.stripe-oc            { border-left: 4px solid #f59e0b; }
.stripe-leave         { border-left: 4px solid #f43f5e; }

/* ---- ボトムナビ余白対策(スマホ版で下部空白を作らない) ---- */
.mobile-safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* PC管理者画面: サイドバー付きレイアウト用 */
@media (min-width: 1024px) {
  .admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
}