/* โทนทั้งไซต์ — slate เย็น + เหลืองคม (ตัดน้ำตาล/อำพัน) */

:root {
  --sian-bg: #0b1118;
  --sian-surface: #121a24;
  --sian-surface-2: #182232;
  --sian-line: rgba(148, 163, 184, 0.18);
  --sian-text: #e2e8f0;
  --sian-muted: #94a3b8;
  --sian-accent: #f5e84a;
  --sian-accent-ink: #0b1118;
  --sian-info: #38bdf8;
  --sian-pick: #34d399;
}

/* พื้นหลังแบรนด์ */
.bg-sian-darker {
  --tw-bg-opacity: 1;
  background-color: rgb(11 17 24 / var(--tw-bg-opacity, 1)) !important;
}
.bg-sian-darker\/50 {
  background-color: rgba(11, 17, 24, 0.5) !important;
}
.bg-sian-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(18 26 36 / var(--tw-bg-opacity, 1)) !important;
}
.bg-sian-dark\/50 {
  background-color: rgba(18, 26, 36, 0.5) !important;
}
.bg-sian-dark\/80 {
  background-color: rgba(18, 26, 36, 0.8) !important;
}
.bg-sian-dark\/90 {
  background-color: rgba(18, 26, 36, 0.9) !important;
}
.to-sian-darker {
  --tw-gradient-to: #0b1118 var(--tw-gradient-to-position) !important;
}
.from-sian-dark {
  --tw-gradient-from: #121a24 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(18 26 36 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.text-sian-dark {
  --tw-text-opacity: 1;
  color: rgb(11 17 24 / var(--tw-text-opacity, 1)) !important;
}

/* เหลืองแบรนด์ — โทนเย็นคม ไม่ใช่อำพัน */
.bg-sian-yellow {
  --tw-bg-opacity: 1;
  background-color: rgb(245 232 74 / var(--tw-bg-opacity, 1)) !important;
}
.bg-sian-yellow\/10 {
  background-color: rgba(245, 232, 74, 0.1) !important;
}
.text-sian-yellow {
  --tw-text-opacity: 1;
  color: rgb(245 232 74 / var(--tw-text-opacity, 1)) !important;
}
.border-sian-yellow {
  --tw-border-opacity: 1;
  border-color: rgb(245 232 74 / var(--tw-border-opacity, 1)) !important;
}
.border-sian-yellow\/20 {
  border-color: rgba(245, 232, 74, 0.2) !important;
}
.border-sian-yellow\/25 {
  border-color: rgba(245, 232, 74, 0.25) !important;
}
.border-sian-yellow\/30 {
  border-color: rgba(245, 232, 74, 0.3) !important;
}
.border-sian-yellow\/40 {
  border-color: rgba(245, 232, 74, 0.4) !important;
}
.border-sian-yellow\/50 {
  border-color: rgba(245, 232, 74, 0.5) !important;
}
.ring-sian-yellow\/50 {
  --tw-ring-color: rgba(245, 232, 74, 0.5) !important;
}
.from-sian-yellow\/10 {
  --tw-gradient-from: rgba(245, 232, 74, 0.1) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(245 232 74 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* เทา Tailwind ที่ใช้เป็นการ์ด — ดึงให้เย็น */
.bg-gray-800,
.bg-gray-800\/50,
.bg-gray-800\/60 {
  background-color: rgba(24, 34, 50, 0.92) !important;
}
.bg-gray-900,
.bg-gray-900\/50 {
  background-color: rgb(15 23 42) !important;
}
.from-gray-900 {
  --tw-gradient-from: #0f172a var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-gray-800 {
  --tw-gradient-to: #182232 var(--tw-gradient-to-position) !important;
}
.from-gray-800 {
  --tw-gradient-from: #182232 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(24 34 50 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.border-gray-700,
.border-gray-700\/40,
.border-gray-700\/80 {
  border-color: rgba(148, 163, 184, 0.22) !important;
}
.border-gray-600,
.border-gray-600\/40 {
  border-color: rgba(148, 163, 184, 0.28) !important;
}
.text-gray-300 {
  color: #cbd5e1 !important;
}
.text-gray-400 {
  color: #94a3b8 !important;
}
.text-gray-500 {
  color: #64748b !important;
}

/* ตัดอำพัน/น้ำตาล → ฟ้า/เหลืองคม */
.border-amber-600,
.border-amber-700\/40 {
  border-color: rgba(56, 189, 248, 0.35) !important;
}
.bg-amber-500\/5,
.bg-amber-500\/15,
.bg-amber-600\/20,
.bg-amber-900\/20,
.bg-amber-900\/50 {
  background-color: rgba(56, 189, 248, 0.1) !important;
}
.bg-amber-600 {
  background-color: #0ea5e9 !important;
}
.text-amber-200,
.text-amber-200\/90,
.text-amber-300 {
  color: #bae6fd !important;
}

.border-yellow-500,
.border-yellow-500\/40 {
  border-color: rgba(245, 232, 74, 0.4) !important;
}
.bg-yellow-500\/10,
.bg-yellow-500\/15,
.bg-yellow-500\/20 {
  background-color: rgba(245, 232, 74, 0.12) !important;
}
.ring-yellow-500\/35 {
  --tw-ring-color: rgba(245, 232, 74, 0.35) !important;
}
.text-yellow-400 {
  color: #f5e84a !important;
}
.hover\:text-yellow-300:hover {
  color: #f8f59a !important;
}
.hover\:bg-yellow-500:hover {
  background-color: #f5e84a !important;
}

/* header / footer ให้คมขึ้น */
body.bg-sian-darker {
  background-color: var(--sian-bg) !important;
  color: var(--sian-text);
}
header.bg-sian-dark {
  background-color: rgba(12, 18, 28, 0.96) !important;
  border-bottom-color: rgba(245, 232, 74, 0.55) !important;
  backdrop-filter: blur(8px);
}
footer.bg-sian-darker {
  background-color: #080d14 !important;
  border-top-color: rgba(148, 163, 184, 0.16) !important;
}

/* การ์ดทั่วไปที่ยังใช้ rounded + dark */
.rounded-lg.bg-sian-dark,
.rounded-xl.bg-sian-dark {
  border: 1px solid var(--sian-line);
}

/* ช่องค้นหาทีมบนตาราง */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.schedule-team-filter {
  margin-top: 1.05rem;
  padding: 1.05rem 1.05rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--sian-line);
  background:
    linear-gradient(180deg, rgba(24, 34, 50, 0.92) 0%, rgba(12, 18, 28, 0.96) 100%);
}

.schedule-team-filter__bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
}

.schedule-team-filter__label {
  flex: 0 0 auto;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--sian-accent);
  line-height: 1.5;
  margin: 0;
}

.schedule-team-filter__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.schedule-team-filter__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.schedule-team-filter__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--sian-muted);
  pointer-events: none;
  line-height: 0;
  opacity: 0.9;
}

.schedule-team-filter__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.95rem 2.85rem 0.95rem 3.05rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(8, 13, 20, 0.88);
  color: var(--sian-text);
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.025em;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.schedule-team-filter__input::placeholder {
  color: #8794a8;
  letter-spacing: 0.02em;
  opacity: 1;
}

.schedule-team-filter__input::-webkit-search-decoration,
.schedule-team-filter__input::-webkit-search-cancel-button,
.schedule-team-filter__input::-webkit-search-results-button,
.schedule-team-filter__input::-webkit-search-results-decoration {
  display: none;
}

.schedule-team-filter__input:hover {
  border-color: rgba(148, 163, 184, 0.35);
}

.schedule-team-filter__input:focus {
  border-color: rgba(245, 232, 74, 0.55);
  box-shadow: 0 0 0 3px rgba(245, 232, 74, 0.12);
  background: rgba(11, 17, 24, 0.96);
}

.schedule-team-filter__clear {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
  color: var(--sian-muted);
  cursor: pointer;
  line-height: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.schedule-team-filter__clear.hidden {
  display: none !important;
}

.schedule-team-filter__clear:hover {
  background: rgba(245, 232, 74, 0.18);
  color: var(--sian-accent);
}

.schedule-team-filter__meta {
  flex: 0 0 auto;
  min-width: 3.5rem;
  text-align: right;
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--sian-muted);
  white-space: nowrap;
}

.schedule-team-filter__empty {
  margin: 0.7rem 0 0;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.18);
  color: #9ec9e0;
  font-size: 0.8125rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

@media (max-width: 480px) {
  .schedule-team-filter {
    padding: 0.8rem 0.75rem 0.85rem;
  }

  .schedule-team-filter__row {
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .schedule-team-filter__input {
    font-size: 0.9rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .schedule-team-filter__meta {
    width: 100%;
    text-align: left;
    min-width: 0;
  }
}