/* ============================================
   TEAM_REGION.CSS
   Uses CLASSES not IDs for region/team badges
   so they never override table cell text color
   ============================================ */

/* ── Availability ───────────────────────────── */
#yes { color: var(--green); font-weight: 600; }
#no  { color: var(--red);   font-weight: 600; }

/* ── Region border wrappers (large table cells) */
#NA   { border: solid 3px #ff5b5b; padding: 2px; border-radius: 5px; }
#EU   { border: solid 3px #73ffa9; padding: 2px; border-radius: 5px; }
#MENA { border: solid 3px orange;  padding: 2px; border-radius: 5px; }
#SAM  { border: solid 3px #01f401; padding: 2px; border-radius: 5px; }
#OCE  { border: solid 3px #0079ea; padding: 2px; border-radius: 5px; }
#APAC { border: solid 3px #d500d5; padding: 2px; border-radius: 5px; }
#SSA  { border: solid 3px yellow;  padding: 2px; border-radius: 5px; }

/* ── Region badges — USE CLASSES e.g. class="region-badge na" ── */
/* Change JS: regionCell.id = regionID  →  regionCell.className = 'region-badge ' + regionID */
.region-badge { padding: 2px 6px; border-radius: 5px; font-size: 0.85em; font-weight: 600; display: inline-block; }
.na   { background-color: #973737; }
.eu   { background-color: #008d36; }
.mena { background-color: #9e6700;  }
.sam  { background-color: #007200; }
.oce  { background-color: #004280; }
.apac { background-color: #830083; }
.ssa  { background-color: #7c7c00;  }