/* ============================================
   BADGES STYLESHEET
   All badge-related styles extracted for optimization
   ============================================ */

/* ============================================
   STANDARD BADGES
   Status indicators and labels
   ============================================ */

.badge{
  display:inline-block;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid var(--line);
  font-weight:700;
  font-size:.85rem;
  white-space:normal;
  word-wrap:break-word;
  max-width:100%;
}

/* Badge Color Variants */
.badge.ok{
  background:rgba(76,175,80,.15);
  color:#81c784;
}
.badge.warn{
  background:rgba(255,204,0,.15);
  color:#ffe598;
}
.badge.danger{
  background:rgba(255,107,107,.15);
  color:#ffd1d1;
}

/* Light theme badge overrides */
[data-theme="light"] .badge.ok{
  background:rgba(76,175,80,.15);  /* Darker green background */
  color:#2e7d32;  /* Dark green text for better contrast */
}
[data-theme="light"] .badge.warn{
  background:rgba(217,119,6,.15);  /* Darker orange background */
  color:#92400e;  /* Dark brown/orange text for better contrast */
}
[data-theme="light"] .badge.danger{
  background:rgba(255,107,107,.15);  /* Darker red background */
  color:#b71c1c;  /* Dark red text for better contrast */
}

/* ============================================
   CONTEXT-SPECIFIC BADGE STYLES
   ============================================ */

/* Firefighters page - status column and badges */
#firefighters-table td:nth-child(7),
.firefighters-status-cell{
  white-space:nowrap;
}
#firefighters-table td:nth-child(7) .badge,
.firefighters-status-cell .badge{
  white-space:nowrap;
}

/* ============================================
   NOTICES
   Warning and informational notices
   ============================================ */

.notice-warn{
  background:rgba(255,204,0,.12);
  border:1px solid #1b2636;
  border-radius:12px;
  padding:10px 14px;
  color:#ffe598;
}

/* ============================================
   NAVIGATION BADGES
   Badge indicators on navigation items
   ============================================ */

.nav-badge{
  position:absolute;
  top:-5px;
  border-radius:4px;
  width:24px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:700;
  line-height:1;
  border:2px solid var(--bg);
  padding:0 2px;
  box-sizing:border-box;
}

/* Navigation badge variants */
.nav-badge.needs-config{
  background:#ffcc00;
  color:#041019;
  right:-5px;
}
/* Date-related nav badges - keep here for navigation positioning, but use date colors */
.nav-badge.overdue{
  background:#ff6b6b;
  color:#fff;
}
.nav-badge.need-start-date{
  background:#ff9800;
  color:#fff;
}
.nav-badge.due-soon{
  background:#ff7700;
  color:#fff;
}

/* Navigation badge positioning utilities */
.nav-badge.right-0{
  right:-5px;
}
.nav-badge.right-1{
  right:23px;
}
.nav-badge.right-2{
  right:51px;
}
.nav-badge.right-3{
  right:79px;
}
.nav-badge.right-4{
  right:107px;
}