/* RAREITEM Icon System — include after the existing stylesheet
   ต้นฉบับ: Documents/Codex/2026-08-03/dku/rareitem-icon-system.css — คัดลอกเข้าโปรเจกต์ 15 ส.ค. 2569
   ส่วนที่เพิ่ม: คลาส .ri สำหรับวาดไอคอนด้วย CSS mask (ดูเหตุผลในหัวไฟล์ .js)
   สีทุกตัวมาจาก currentColor จึงเปลี่ยนตาม active / hover / disabled ได้เอง */

.ri-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 1;
}

.ri-icon {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  stroke: currentColor;
}

/* Use this on navigation links and text buttons. */
.ri-with-icon {
  display: inline-flex;
  align-items: center;
  gap: .5rem;          /* ~8px ตามที่กำหนดไว้ */
}

/* ตัวไอคอนแบบ mask — ใช้คู่กับคลาส .ri-<ชื่อ> ที่ถูกสร้างจาก rareitem-icon-system.js */
.ri {
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: -3px;
}
/* ระยะห่างไอคอนกับข้อความ ~8px ตามที่กำหนด — ใช้กับไอคอนที่นำหน้าข้อความในบรรทัดเดียวกัน */
.ri-lead { margin-right: 8px; }
.ri-sm { width: 15px; height: 15px; vertical-align: -2px; }
.ri-lg { width: 20px; height: 20px; vertical-align: -4px; }
.ri-xl { width: 24px; height: 24px; vertical-align: -5px; }

/* Use this for a coloured icon tile at the start of a dashboard card. */
.ri-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .9rem;
  color: #5D24AF;
  background: #f1e9ff;
}

.ri-icon-tile.is-magenta { color: #ffffff; background: linear-gradient(135deg, #5D24AF, #D92CC5); }
.ri-icon-tile.is-cyan { color: #177b9a; background: #e6f8fd; }
.ri-icon-tile.is-alert { color: #b63c2f; background: #fff0ee; }