@charset "UTF-8";

/* =====================================================
   Color Variables (Lawson style & GA-like)
===================================================== */
:root {
  /* Lawson Colors */
  --lawson-blue: #005bac;
  --lawson-blue-dark: #004a8f;
  --lawson-light: #eaf2fb;
  --lawson-border: #d6e4f5;

  /* GA-like Monotone */
  --bg-gray: #f8f9fa;
  --card-bg: #ffffff;
  --border-light: #dadce0;

  /* Typography */
  --text-main: #202124;
  --text-sub: #5f6368;
}

/* =====================================================
   Base & Reset
===================================================== */
body {
  width: 100%;
  background: var(--bg-gray);
  font-family: 'Google Sans', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
  color: var(--text-main);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

a {
  color: var(--lawson-blue);
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover {
  color: var(--lawson-blue-dark);
}

button {
  cursor: pointer;
}

.errors {
  color: #c5221f;
  font-size: 13px;
  margin-bottom: 12px;
}

/* =====================================================
   Flash Messages (Global)
===================================================== */
.flash {
  position: fixed;
  top: 80px; /* ヘッダーの下に綺麗に出るように調整 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 90%;
  max-width: 600px;
}

.flash.is-entering {
  animation: toastFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.flash p {
  position: relative;
  padding: 12px 16px 12px 48px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.flash p.notice {
  background: var(--lawson-light);
  color: var(--lawson-blue);
  border: 1px solid var(--lawson-blue);
}
.flash p.notice::before {
  content: "ℹ️";
  position: absolute;
  left: 16px;
  top: 12px;
}

.flash p.alert {
  background: #fce8e6;
  color: #c5221f;
  border: 1px solid #c5221f;
}
.flash p.alert::before {
  content: "⚠️";
  position: absolute;
  left: 16px;
  top: 12px;
}

.flash button {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
}
.flash button:hover { opacity: 1; }

@keyframes toastFadeIn {
  from { opacity: 0; transform: translate(-50%, -20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* =====================================================
   Modals (Global)
===================================================== */
body.modal-open { overflow: hidden; }

.modal, .local-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000; /* ヘッダーより上に */
}

.modal.open, .local-modal.open { display: flex; }

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
}

.modal-window {
  position: relative;
  background: #fff;
  width: min(980px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  animation: modalFade .2s ease-out;
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-header h2 { margin: 0; font-size: 18px; color: var(--text-main); }
.modal-close { cursor: pointer; font-size: 24px; line-height: 1; color: #999; border: none; background: transparent; }
.modal-body { padding: 20px; overflow-y: auto; }

@keyframes modalFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =====================================================
   GA-Like Components (Cards & Tables)
===================================================== */
.card {
  background: var(--card-bg);
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
  padding: 24px;
  margin-bottom: 24px;
}

.card h3 {
  font-size: 16px;
  color: var(--text-main);
  margin-top: 0;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
}

th {
  background: #fafafa;
  color: var(--text-sub);
  font-weight: 500;
  font-size: 13px;
}

tbody tr:hover { background-color: #f8f9fa; }

/* Detail Table (詳細画面用) */
table.detail-table th {
  width: 200px;
  background-color: var(--bg-gray);
  border-right: 1px solid #fff;
}
table.detail-table tr:last-child th,
table.detail-table tr:last-child td { border-bottom: none; }

/* =====================================================
   Forms & Inputs
===================================================== */
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-weight: 500;
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 6px;
}

input[type="text"], input[type="email"], input[type="password"], input[type="date"], select {
  width: 100%;
  max-width: 480px;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
}

input:focus, select:focus {
  outline: none;
  border-color: var(--lawson-blue);
  box-shadow: 0 0 0 2px rgba(0, 91, 172, 0.2);
}

.help-text { font-size: 12px; color: var(--text-sub); margin-top: 6px; margin-bottom: 0; }

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 24px;
}

/* =====================================================
   Buttons
===================================================== */
.btn-primary, .btn-secondary, .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
  margin-right: 3px;
}

form.button_to { margin: 0; display: inline-block; }

.btn-primary { background: var(--lawson-blue); color: #fff; }
.btn-primary:hover { background: var(--lawson-blue-dark); box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3); color: #fff; text-decoration: none;}

.btn-secondary { background: transparent; color: var(--lawson-blue); border: 1px solid var(--border-light); }
.btn-secondary:hover { background: var(--lawson-light); border-color: var(--lawson-blue); text-decoration: none;}

.btn-danger { background: transparent; color: #c5221f; border: 1px solid #ebccd1; }
.btn-danger:hover { background: #fce8e6; border-color: #c5221f; text-decoration: none;}

button:disabled, .btn-primary:disabled, .btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* =====================================================
   Layout Helpers (2カラムレイアウト用)
===================================================== */
.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
}
.form-row > .card, .form-row > .card-column {
  flex: 1 1 calc(50% - 12px);
  min-width: 320px;
  box-sizing: border-box;
}
.form-row > .card { margin-bottom: 0; }
.card-column { display: flex; flex-direction: column; gap: 24px; }
.card-column .card { margin-bottom: 0; }

/* =====================================================
   Toggle Switch
===================================================== */
.toggle-switch { display: inline-flex; align-items: center; cursor: pointer; gap: 12px; user-select: none; }
.toggle-switch input[type="checkbox"] { display: none; }
.toggle-switch .track { position: relative; width: 44px; height: 24px; background: var(--border-light); border-radius: 12px; transition: background 0.3s ease; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); }
.toggle-switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.toggle-switch input[type="checkbox"]:checked + .track { background: var(--lawson-blue); }
.toggle-switch input[type="checkbox"]:checked + .track::after { transform: translateX(20px); }
.toggle-switch .label-text { font-size: 14px; font-weight: 500; color: var(--text-sub); transition: color 0.3s ease; }

/* =====================================================
   Modern Custom Select (汎用)
===================================================== */
.modern-select-wrapper { position: relative; width: 100%; max-width: 400px; font-size: 14px; color: var(--text-main); user-select: none; }
.modern-select-wrapper .select-trigger { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--card-bg); border: 1px solid var(--border-light); border-radius: 4px; cursor: pointer; transition: all 0.2s ease; min-height: 42px; box-sizing: border-box; }
.modern-select-wrapper .select-trigger:hover { border-color: var(--lawson-blue); }
.modern-select-wrapper .select-arrow { width: 14px; height: 14px; color: var(--text-sub); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.modern-select-wrapper.is-open .select-trigger { border-color: var(--lawson-blue); box-shadow: 0 0 0 2px rgba(0, 91, 172, 0.1); }
.modern-select-wrapper.is-open .select-arrow { transform: rotate(180deg); }
.modern-select-wrapper .select-options { position: absolute; top: calc(100% + 4px); left: 0; width: 100%; margin: 0; padding: 6px; list-style: none; background: var(--card-bg); border: 1px solid var(--border-light); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.modern-select-wrapper.is-open .select-options { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.modern-select-wrapper .option { padding: 8px 12px; border-radius: 4px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; font-size: 13px; }
.modern-select-wrapper .option:hover { background: var(--bg-gray); color: var(--lawson-blue); }
.modern-select-wrapper .option.is-selected { background: var(--lawson-light); color: var(--lawson-blue); font-weight: bold; }
.modern-select-wrapper .select-label.is-blank { color: var(--text-sub); }
.modern-select-wrapper .select-options::-webkit-scrollbar { width: 6px; }
.modern-select-wrapper .select-options::-webkit-scrollbar-track { background: transparent; margin: 4px 0; }
.modern-select-wrapper .select-options::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.modern-select-wrapper .select-options::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* =====================================================
   Legacy Layout (Mypage等の互換用・不要なら将来削除)
===================================================== */
.admin-header { position: fixed; top: 0; left: 0; width: 100%; height: 56px; background: var(--card-bg); border-bottom: 1px solid var(--border-light); display: flex; align-items: center; padding: 0 16px; box-sizing: border-box; z-index: 950; box-shadow: 0 1px 2px 0 rgba(60,64,67,0.1); }
.container { padding-top: 56px; min-height: 100vh; box-sizing: border-box; }
.wrap { display: flex; min-height: calc(100vh - 56px); }
.aside { width: 240px; background: var(--card-bg); border-right: 1px solid var(--border-light); padding: 16px 8px; flex-shrink: 0; overflow-y: auto; }
.main { flex: 1; padding: 24px; box-sizing: border-box; min-width: 0; }

/* SP用ドロワー互換 */
.drawer-overlay { display: none; }
@media (max-width: 768px) {
  body.drawer-open { overflow: hidden; }
  .admin-header .menu { display: block; }
  .aside { position: fixed; top: 56px; left: -260px; height: calc(100vh - 56px); width: 240px; border-right: 1px solid var(--border-light); z-index: 900; transition: left 0.3s ease; }
  .aside.open { left: 0; }
  .modal-overlay.drawer-overlay.open { display: block; position: fixed; top: 56px; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 890; }
}