@import url('../tokens.css');

body { margin: 0; background: var(--bg-base); color: var(--text-primary); }

.admin-header {
  background: oklch(0.20 0.01 250);
  color: var(--bg-base);
  padding: 16px 24px;
}
.admin-header h1 { margin: 0 0 12px; color: var(--bg-base); }

.admin-tabs button {
  background: transparent;
  border: none;
  color: var(--bg-base);
  padding: 10px 20px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  font-size: var(--text-base);
}
.admin-tabs button.active {
  border-bottom-color: var(--color-pass);
  font-weight: 700;
}

#admin-main { padding: 24px; max-width: 1280px; margin: 0 auto; }

table.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-surface);
  border-radius: 8px;
  overflow: hidden;
}
.admin-table th, .admin-table td {
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}
.admin-table thead {
  background: var(--bg-overlay);
  font-size: var(--text-sm);
  font-weight: 600;
}
.admin-table img.thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
}

.btn {
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
}
.btn:hover { background: var(--bg-hover); }
.btn-primary {
  background: var(--color-pass);
  color: white;
  border-color: var(--color-pass);
}
.btn-danger {
  background: var(--color-critical);
  color: white;
  border-color: var(--color-critical);
}
.btn-sm {
  padding: 6px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
}

/* 操作欄：固定窄寬度 + 按鈕 wrap 成 2x2 */
.col-actions { width: 1%; white-space: nowrap; }
.action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  min-width: 140px;
}

/* 近 3 日簽到按鈕：行內表格樣式 */
.btn-count {
  text-align: left;
  padding: 8px 12px;
  line-height: 1.4;
}
.btn-count div { font-size: var(--text-sm); }
.btn-count strong { color: var(--color-pass); font-size: var(--text-base); }

/* 警示名單：建立新名單表單 — 用 grid 排，每欄都有足夠寬度 */
.new-list-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
  gap: 16px;
  align-items: end;
  margin-bottom: 24px;
  padding: 20px;
  background: var(--bg-surface);
  border-radius: 12px;
}
.new-list-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
}
.new-list-form select,
.new-list-form input {
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: var(--text-base);
}
.new-list-form .btn-primary {
  padding: 14px 24px;
  white-space: nowrap;
}
.new-list-form .custom-id-wrap[hidden] { display: none; }
@media (max-width: 720px) {
  .new-list-form {
    grid-template-columns: 1fr;
  }
}

/* 校準參數頁：每個欄位一行，label 左、input 右 */
.tuning-row {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 16px;
  align-items: center;
  margin: 10px 0;
  padding: 12px 16px;
  background: var(--bg-surface);
  border-radius: 8px;
}
.tuning-label { font-size: var(--text-base); color: var(--text-primary); }
.tuning-row input {
  padding: 10px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-base);
  font-size: var(--text-base);
  text-align: right;
}

/* 相似度測試器 / 備份列 — 一行排得開 */
.similarity-tester {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px;
  background: var(--bg-surface);
  border-radius: 8px;
}
.similarity-tester select {
  flex: 1;
  min-width: 160px;
  padding: 10px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-base);
  font-size: var(--text-base);
}
#sim-result { width: 100%; font-size: var(--text-lg); font-weight: 700; color: var(--color-pass); }

.backup-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.backup-row input[type=password],
.backup-row input[type=file] {
  padding: 10px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-base);
  font-size: var(--text-sm);
}

.filter-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.filter-row input, .filter-row select {
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text-primary);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0.20 0.01 250 / 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal {
  background: var(--bg-base);
  padding: 24px;
  border-radius: 12px;
  max-width: 720px;
  max-height: 90vh;
  overflow: auto;
}

/* Toast — 點儲存後的視覺確認 */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 28px;
  border-radius: 24px;
  font-size: var(--text-base);
  font-weight: 600;
  color: white;
  box-shadow: 0 8px 24px oklch(0.20 0.01 250 / 0.25);
  z-index: 2000;
  animation: toast-in 0.25s ease-out;
}
.toast-success { background: var(--color-pass); }
.toast-error { background: var(--color-critical); }
.toast-info { background: var(--color-info); }
@keyframes toast-in {
  from { transform: translate(-50%, 40px); opacity: 0; }
}