/*
 * สีแต้มต่อของพอร์ทัล (CU-z8nrz7fah0)
 *
 * ชุดเดียวกับแอปพนักงาน (tamto-liff-react/tailwind.config.ts) — แอปในเครือแต้มต่อใช้สีเดียวกัน
 * โหลดต่อจาก style(.min).css ของธีม Xtreme และ tamto-theme(-min).css ที่สร้างด้วยสคริปต์
 *
 * หน้าต่าง ๆ ใช้สีผ่านตัวแปรเหล่านี้ (var(--tt-brand)) ไม่ฝังเลขสีเอง
 * — เปลี่ยนสีครั้งหน้าแก้ที่นี่ที่เดียว แล้วรัน scripts/brand/build_theme_overrides.py
 */
:root {
  --tt-brand: #C8342B;          /* ปุ่มหลัก แถบบน หน้าล็อกอิน แท็บที่เลือก — ตัวขาวบนพื้นนี้ 5.27:1 */
  --tt-brand-strong: #B22A22;   /* พื้นแดงใหญ่ / hover / pressed */
  --tt-brand-tint: #FBEAE8;     /* พื้นจางของแถวที่ชี้ / แท็บ */
  --tt-danger: #9E1B2A;         /* ลบ ผิดพลาด — crimson แยกจากแบรนด์ */
  --tt-success: #2E7D32;        /* สำเร็จ ชำระแล้ว */
  --tt-warning: #9A4207;        /* ต้องสนใจ */
  --tt-link: #2962FF;           /* ลิงก์ตัวอักษร และปุ่ม info */
  --tt-link-strong: #1E40AF;

  /*
   * สีประจำผลิตภัณฑ์ — "ตัวตน" ของผลิตภัณฑ์ ไม่ใช่ความหมายของปุ่ม
   * เดิมยืมสีปุ่มมาใช้ (TRO = primary, SMS = danger, INSURE = info, HR = success)
   * พอเปลี่ยนสีปุ่ม สีผลิตภัณฑ์จะเปลี่ยนตาม และ TRO กับ SMS จะเป็นแดงเหมือนกัน — จึงแยกออกมา
   * TRO/INSURE/HR ใช้เฉดเดียวกับป้ายแอปในเมนู (.app-1/.app-2/.app-3) ทุกสีตัวขาวผ่าน AA
   */
  --tt-app-tro: #533E98;
  --tt-app-insure: #1C4488;
  --tt-app-hr: #0F563F;
  --tt-app-sms: #B22A22;
  --tt-app-bill: #5F6B76;
}

.badge-app-tro, .btn-app-tro { background-color: var(--tt-app-tro); border-color: var(--tt-app-tro); color: #fff; }
.badge-app-insure, .btn-app-insure { background-color: var(--tt-app-insure); border-color: var(--tt-app-insure); color: #fff; }
.badge-app-hr, .btn-app-hr { background-color: var(--tt-app-hr); border-color: var(--tt-app-hr); color: #fff; }
.badge-app-sms, .btn-app-sms { background-color: var(--tt-app-sms); border-color: var(--tt-app-sms); color: #fff; }
.badge-app-bill, .btn-app-bill { background-color: var(--tt-app-bill); border-color: var(--tt-app-bill); color: #fff; }
.btn-app-tro:hover, .btn-app-insure:hover, .btn-app-hr:hover, .btn-app-sms:hover, .btn-app-bill:hover {
  color: #fff;
  filter: brightness(0.88);
}
.btn-app-tro:focus-visible, .btn-app-insure:focus-visible, .btn-app-hr:focus-visible,
.btn-app-sms:focus-visible, .btn-app-bill:focus-visible {
  outline: 2px solid var(--tt-link-strong);
  outline-offset: 2px;
}