/* ===== 隱藏 / 顯示 ===== */
.hidden { display: none !important; }

/* ===== 狀態標籤 ===== */
.status-available {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 9999px;
  font-size: 12px; font-weight: 500;
  background: #d1fae5; color: #065f46;
}
.status-in_venue {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 9999px;
  font-size: 12px; font-weight: 500;
  background: #dbeafe; color: #1e40af;
}
.status-borrowed {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 9999px;
  font-size: 12px; font-weight: 500;
  background: #ffedd5; color: #9a3412;
}

/* ===== 按鈕 ===== */
.btn-primary {
  font-weight: 500; border-radius: 12px; border: none; cursor: pointer;
  padding: 10px 20px; font-size: 14px; display: inline-block;
  background: #2563eb; color: #fff;
  transition: background 0.15s;
}
.btn-primary:hover:not(:disabled)   { background: #1d4ed8; }
.btn-primary:disabled               { opacity: .5; cursor: not-allowed; }

.btn-success {
  font-weight: 500; border-radius: 12px; border: none; cursor: pointer;
  padding: 10px 20px; font-size: 14px; display: inline-block;
  background: #059669; color: #fff;
  transition: background 0.15s;
}
.btn-success:hover:not(:disabled)   { background: #047857; }
.btn-success:disabled               { opacity: .5; cursor: not-allowed; }

.btn-warning {
  font-weight: 500; border-radius: 12px; border: none; cursor: pointer;
  padding: 10px 20px; font-size: 14px; display: inline-block;
  background: #f97316; color: #fff;
  transition: background 0.15s;
}
.btn-warning:hover:not(:disabled)   { background: #ea6c0a; }
.btn-warning:disabled               { opacity: .5; cursor: not-allowed; }

.btn-danger {
  font-weight: 500; border-radius: 12px; border: none; cursor: pointer;
  padding: 10px 20px; font-size: 14px; display: inline-block;
  background: #ef4444; color: #fff;
  transition: background 0.15s;
}
.btn-danger:hover:not(:disabled)    { background: #dc2626; }
.btn-danger:disabled                { opacity: .5; cursor: not-allowed; }

.btn-secondary {
  font-weight: 500; border-radius: 12px; border: none; cursor: pointer;
  padding: 10px 20px; font-size: 14px; display: inline-block;
  background: #f3f4f6; color: #374151;
  transition: background 0.15s;
}
.btn-secondary:hover:not(:disabled) { background: #e5e7eb; }
.btn-secondary:disabled             { opacity: .5; cursor: not-allowed; }

.btn-sm { padding: 6px 12px !important; font-size: 13px !important; border-radius: 8px !important; }

/* ===== 表單 ===== */
.form-input, .form-select {
  width: 100%; border: 1px solid #d1d5db; border-radius: 12px;
  padding: 10px 14px; font-size: 14px; background: #fff;
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box; display: block;
}
.form-input:focus, .form-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.form-label {
  display: block; font-size: 13px; font-weight: 500;
  color: #4b5563; margin-bottom: 6px;
}
textarea.form-input { resize: vertical; }

/* ===== 卡片 ===== */
.card {
  background: #fff; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border: 1px solid #f3f4f6;
}

/* ===== 頁首 ===== */
.page-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: #fff;
  border-bottom: 1px solid #f3f4f6;
  position: sticky; top: 0; z-index: 10;
}

/* ===== 載入動畫 ===== */
.loading-spinner {
  border: 3px solid #e5e7eb; border-top-color: #3b82f6;
  border-radius: 50%; width: 28px; height: 28px;
  animation: spin 0.7s linear infinite; display: inline-block;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Toast 通知 ===== */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: #111827; color: white;
  padding: 12px 20px; border-radius: 12px;
  font-size: 14px; z-index: 9999; white-space: nowrap;
  animation: toastIn 0.25s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.toast.success { background: #059669; }
.toast.error   { background: #dc2626; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}