/* ===== Fallback: TopUnity Variables (Teal Brand) ===== */
:root {
  /* Brand core (Teal) */
  --tu-primary-700: #014b43;
  --tu-primary-600: #01584f;
  --tu-primary-500: #016b61;
  --tu-primary-450: #0f8378;
  --tu-primary-400: #1b9a8e;
  --tu-primary-350: #3ab1a6;
  --tu-primary-300: #63c4bb;
  --tu-primary-250: #86d3cb;
  --tu-primary-200: #a9e2db;
  --tu-primary-100: #cdefea;

  /* RGB helper */
  --tu-primary-700-rgb: 1, 75, 67;
  --tu-primary-600-rgb: 1, 88, 79;
  --tu-primary-500-rgb: 1, 107, 97;
  --tu-primary-400-rgb: 27, 154, 142;
  --tu-primary-300-rgb: 99, 196, 187;
  --tu-primary-200-rgb: 169, 226, 219;

  /* Text & bg */
  --tu-text: #0f1e1c;
  --tu-text-secondary: #1b9a8e;
  --tu-bg: #f4fbfa;
  --tu-bg-section: #eaf8f6;
  --tu-bg-dark: #013a34;

  /* Ant Design tokens fallback */
  --ant-color-primary: var(--tu-primary-500);
  --ant-color-link: var(--tu-primary-400);
  --ant-color-link-hover: var(--tu-primary-300);

  --tu-text-on-dark: #e9fcfa;
  --tu-border: #e2e8ea;
  --tu-success: #28c76f;
  --tu-danger: #ea5455;

  /* Glow & shadow */
  --tu-glow-outer: 0 12px 28px rgba(1, 107, 97, 0.22), 0 2px 6px rgba(0, 0, 0, 0.08);
  --tu-glow-soft: 0 8px 22px rgba(99, 196, 187, 0.28);
  --tu-ring: 0 0 0 4px rgba(99, 196, 187, 0.28);

  /* Gradients */
  --tu-grad-hero: linear-gradient(135deg, var(--tu-primary-700) 0%, var(--tu-primary-500) 45%, var(--tu-primary-300) 100%);
  --tu-grad-accent: linear-gradient(118deg, var(--tu-primary-450) 0%, var(--tu-primary-600) 100%);
  --tu-grad-soft: linear-gradient(180deg, rgba(169, 226, 219, 0.25), rgba(99, 196, 187, 0.22));
}

/* ===================================================================== */
/* ========================= Global Tabs (Teal) ========================= */
/* ===================================================================== */

/* ตัดเส้นขีดล่าง default ทั้งหมด */
.ant-tabs-nav::before {
  border-bottom: none !important;
}

/* ระยะห่าง nav จาก content */
.ant-tabs-nav {
  margin: 0 0 20px !important;
  padding-top: 4px !important;
}

/* list ของ tab: ใช้ flex + ช่องว่างเล็กๆ */
.ant-tabs-nav-list {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
}

/* reset container ของ tab */
.ant-tabs .ant-tabs-tab {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* ======================== ปุ่มแท็บหลัก ======================== */
/* pill style กลมๆ ใช้ได้ทุกหน้า */
.ant-tabs .ant-tabs-tab .ant-tabs-tab-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  min-width: 190px;
  height: 42px;
  padding: 0 20px;

  border-radius: 999px !important;
  border: 1px solid rgba(var(--tu-primary-500-rgb), 0.22) !important;
  background: rgba(var(--tu-primary-500-rgb), 0.03) !important;

  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--tu-primary-500) !important;

  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.04),
    0 0 0 0 rgba(1, 107, 97, 0);

  transition: all 0.18s ease-out;
  cursor: pointer;
}

/* hover state */
.ant-tabs .ant-tabs-tab:hover .ant-tabs-tab-btn {
  background: rgba(var(--tu-primary-400-rgb), 0.08) !important;
  border-color: rgba(var(--tu-primary-400-rgb), 0.7) !important;
  color: var(--tu-primary-400) !important;
  box-shadow:
    0 6px 14px rgba(var(--tu-primary-400-rgb), 0.18),
    0 0 0 0 rgba(1, 107, 97, 0);
  transform: translateY(-1px);
}

/* active state */
.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  background: linear-gradient(135deg, var(--tu-primary-700), var(--tu-primary-500), var(--tu-primary-300)) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: var(--tu-text-on-dark) !important;
  font-weight: 600;

  box-shadow:
    0 10px 24px rgba(var(--tu-primary-500-rgb), 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.4) inset;

  transform: translateY(-1px);
}

/* focus ด้วยคีย์บอร์ด */
.ant-tabs .ant-tabs-tab .ant-tabs-tab-btn:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 5px rgba(var(--tu-primary-300-rgb), 0.85),
    0 10px 24px rgba(var(--tu-primary-500-rgb), 0.32);
}

/* disabled tab */
.ant-tabs .ant-tabs-tab.ant-tabs-tab-disabled .ant-tabs-tab-btn {
  background: #f3f4f6 !important;
  border-color: #e5e7eb !important;
  color: #9ca3af !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ========================= Ink Bar ========================= */
/* ทำเป็นขีด gradient บางๆ ใต้ tab group */
.ant-tabs .ant-tabs-ink-bar {
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(var(--tu-primary-300-rgb), 0.9), rgba(var(--tu-primary-500-rgb), 0.9)) !important;
  box-shadow: 0 2px 6px rgba(var(--tu-primary-300-rgb), 0.35);
}

/* ====================== Card Type Tabs ====================== */
.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
  padding: 0 !important;
  border: none !important;
}
.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab .ant-tabs-tab-btn {
  border-radius: 999px 999px 0 0 !important;
}
.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active .ant-tabs-tab-btn {
  background: linear-gradient(135deg, var(--tu-primary-700), var(--tu-primary-500)) !important;
  color: var(--tu-text-on-dark) !important;
}

/* vertical tabs (ซ้าย/ขวา) – ทำให้เป็น pill เต็มแถว */
.ant-tabs-left > .ant-tabs-nav .ant-tabs-tab .ant-tabs-tab-btn,
.ant-tabs-right > .ant-tabs-nav .ant-tabs-tab .ant-tabs-tab-btn {
  min-width: 0 !important;
  width: 100% !important;
  justify-content: flex-start !important;
}

/* ======================= Tabs Responsive ======================= */
@media (max-width: 1024px) {
  .ant-tabs .ant-tabs-tab .ant-tabs-tab-btn {
    min-width: 170px;
    padding: 0 16px;
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .ant-tabs-nav-list {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* ไม่บังคับให้กินเต็มแถวทุกแท็บ */
  .ant-tabs .ant-tabs-tab {
    flex: 0 0 auto;
  }

  .ant-tabs .ant-tabs-tab .ant-tabs-tab-btn {
    width: auto;
    min-width: 140px; /* หรือ 130/150 ปรับได้ */
    padding: 0 14px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .ant-tabs .ant-tabs-tab .ant-tabs-tab-btn {
    height: 40px;
    font-size: 13px;
    padding: 0 14px;
  }
}

/* ===================================================================== */
/* ========================= Keyboard (Teal) =========================== */
/* ===================================================================== */

.keyboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 260px;
  margin: 30px auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid var(--tu-border);
  box-shadow: 0 8px 24px rgba(var(--tu-primary-500-rgb), 0.06);
}

.key {
  padding: 16px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  background-color: rgba(var(--tu-primary-200-rgb), 0.25);
  border: 1px solid rgba(var(--tu-primary-200-rgb), 0.7);
  border-radius: 12px;
  text-align: center;
  color: var(--tu-primary-500);
  transition: all 0.2s ease;
  user-select: none;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.key:hover {
  background-color: rgba(var(--tu-primary-200-rgb), 0.4);
  color: var(--tu-primary-400);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(var(--tu-primary-400-rgb), 0.18);
}

.key:active {
  background-color: rgba(var(--tu-primary-300-rgb), 0.85);
  color: #ffffff;
  border-color: var(--tu-primary-300);
  transform: scale(0.97);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.18);
}

/* Responsive keyboard */
@media (max-width: 480px) {
  .keyboard {
    max-width: 100%;
    padding: 16px;
  }
  .key {
    font-size: 16px;
    padding: 14px;
  }
}