/*
Theme Name: CCEDC Region 3 Resilience Team
Description: CCEDC WordPress theme.
Author: Antero Group
Template: generatepress
Version: 1.5
*/

.badge {
  display: inline-block;
  padding: 0.25em 0.75em;
  background-color: var(--accent-2);
	border-radius: 999px;
  color: var(--base-3);
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.status-badge { padding: 2px 8px; border-radius: 4px; font-size: 0.85em; color: #fff; }
.status-badge[data-status="Not Started"] { background: #999; }
.status-badge[data-status="In Progress"] { background: #2271b1; }
.status-badge[data-status="Completed"]  { background: #2e7d32; }
.status-badge[data-status="Deferred"]   { background: #b26a00; }

.progress-bar { background: #eee; border-radius: 4px; height: 8px; width: 120px; display: inline-block; overflow: hidden; }
.progress-bar-fill { background: #2271b1; height: 100%; }

/* Task Force Status Tracker */
.tf-tab-nav { display: flex; gap: 8px; margin-bottom: 1.5rem; border-bottom: 1px solid #e0e0e0; }
.tf-tab-btn { padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; color: #666; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tf-tab-btn.active { color: var(--accent, #153151); border-bottom-color: var(--accent, #153151); }
.tf-tab-hidden { display: none; }
.tf-status-summary { font-size: 14px; color: #555; margin-bottom: 1rem; }
.tf-status-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #e0e0e0; }
.tf-filter-label { display: inline-block; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; color: #777; cursor: pointer; }
.tf-tf-count-badge { text-transform: none; font-weight: 400; }
.tf-status-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.tf-pill { display: inline-block; border: 1px solid #ccc; background: #fff; color: #333 !important; padding: 6px 14px; border-radius: 999px; font-size: 13px; cursor: pointer; }
.tf-pill.active { background: var(--accent, #153151); border-color: var(--accent, #153151); color: #fff !important; }
.tf-tf-dropdown summary { list-style: none; }
.tf-tf-dropdown summary::-webkit-details-marker { display: none; }
.tf-tf-dropdown summary::after { content: ' \25BE'; }
.tf-tf-dropdown[open] summary::after { content: ' \25B4'; }
.tf-taskforce-checks { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; margin-top: 10px; padding: 12px; border: 1px solid #e0e0e0; border-radius: 6px; background: #fafafa; min-width: 260px; }
.tf-check { font-size: 14px; display: flex; align-items: center; gap: 6px; cursor: pointer; color: #333; }
.tf-check-all { padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid #e0e0e0; }
.tf-group { border: 1px solid #eee; border-radius: 6px; margin-bottom: 10px; overflow: hidden; }
.tf-group summary { padding: 12px 16px; font-size: 16px; font-weight: 600; cursor: pointer; background: #fafafa; list-style: none; }
.tf-group summary::-webkit-details-marker { display: none; }
.tf-group summary::after { content: ' \25BE'; float: right; }
.tf-group[open] summary::after { content: ' \25B4'; }
.tf-group-count { font-weight: 400; color: #888; font-size: 13px; }
.tf-group-link { font-size: 13px; margin-left: 10px; }
.tf-item-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid #f0f0f0; }
.tf-item-title { flex-grow: 1; font-size: 14px; }
.tf-item-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tf-item-percent { font-size: 13px; color: #666; }
.tf-item-badge { padding: 3px 10px; border-radius: 4px; color: #fff !important; font-size: 12px; white-space: nowrap; }
.tf-item-badge[data-status="Not Started"] { background: #999; }
.tf-item-badge[data-status="In Progress"] { background: #2271b1; }
.tf-item-badge[data-status="Completed"]  { background: #2e7d32; }
.tf-item-badge[data-status="Deferred"]   { background: #b26a00; }
.tf-no-results { color: #777; font-style: italic; padding: 1rem 0; }