/* =========================================
   [common.css] 全站共用
========================================= */

body {
  background-color: #f8fafc;
  color: #1e293b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.bg-indigo-900 {
  background-color: #312e81 !important;
}
.text-teal-400 {
  color: #2dd4bf !important;
}
.text-indigo-200 {
  color: #c7d2fe !important;
}
.text-indigo-100 {
  color: #e0e7ff !important;
}
.bg-indigo-950-50 {
  background-color: rgba(30, 27, 75, 0.5);
  border: 1px solid #4338ca;
  transition: all 0.2s;
}
.bg-indigo-950-50:hover {
  background-color: #3730a3;
  color: #ffffff !important;
}

.card-custom {
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.text-teal-600 {
  color: #0d9488 !important;
}
.text-indigo-600 {
  color: #4f46e5 !important;
}
.bg-slate-100 {
  background-color: #f1f5f9 !important;
}

.form-select,
.form-control {
  min-height: 42px;
  border-color: #cbd5e1;
  background-color: #f8fafc;
}
.form-select:focus,
.form-control:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);
}
.form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.25rem;
}

.input-group-text {
  border-color: #cbd5e1;
  background-color: #f8fafc;
  color: #475569;
}

.btn-teal {
  background-color: #14b8a6;
  color: #020617;
  font-weight: bold;
  transition: all 0.2s;
}
.btn-teal:hover {
  background-color: #2dd4bf;
  color: #020617;
}
.btn-indigo {
  background-color: #312e81;
  color: white;
  border-radius: 0.75rem;
  font-weight: bold;
  transition: all 0.2s;
}
.btn-indigo:hover {
  background-color: #3730a3;
  color: white;
}

.icheck-indigo > input:first-child:not(:checked):not(:disabled):hover + label::before {
  border-color: #4f46e5;
}
.icheck-indigo > input:first-child:checked + label::before {
  background-color: #4f46e5;
  border-color: #4f46e5;
}

.bg-blue-50 {
  background-color: #eff6ff !important;
}
.border-blue-500 {
  border-left: 4px solid #3b82f6 !important;
}
.text-blue-800 {
  color: #1e40af !important;
}
.text-blue-600 {
  color: #2563eb !important;
}

.bg-amber-50 {
  background-color: #fffbeb !important;
}
.border-amber-500 {
  border-left: 4px solid #f59e0b !important;
}
.text-amber-800 {
  color: #92400e !important;
}

@media (min-width: 992px) {
  .row-cols-lg-7 > * {
    flex: 0 0 auto;
    width: 14.285714%;
  }
}

.legend-box {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 0.25rem;
  border: 1px solid transparent;
}
.legend-free {
  background-color: #d1fae5;
  border-color: #6ee7b7;
}
.legend-selected {
  background-color: #0284c7;
  border-color: #0284c7;
}
.legend-pending {
  background-color: #fef3c7;
  border-color: #fcd34d;
}
.legend-booked {
  background-color: #fee2e2;
  border-color: #fca5a5;
}

.sticky-bottom-bar {
  background-color: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid #334155;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
}
.sticky-bottom-bar.show {
  transform: translateY(0);
}

.cursor-pointer {
  cursor: pointer !important;
}
.cursor-default {
  cursor: default !important;
}
.cursor-not-allowed {
  cursor: not-allowed !important;
}

/* =========================================
   [自訂 Bootstrap 分頁元件顏色 (Indigo 主題)]
   ========================================= */
.pagination {
  --bs-pagination-color: #4f46e5;
  --bs-pagination-hover-color: #3730a3;
  --bs-pagination-hover-bg: #e0e7ff;
  --bs-pagination-focus-color: #3730a3;
  --bs-pagination-focus-bg: #e0e7ff;
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.25);
  --bs-pagination-active-color: #ffffff;
  --bs-pagination-active-bg: #4f46e5; /* 背景色改為系統主色 */
  --bs-pagination-active-border-color: #4f46e5;
}

.pagination .page-link {
  font-weight: 500;
}
.pagination .page-item:first-child .page-link {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.pagination .page-item:last-child .page-link {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}