/* widgets/project/project.css
 *
 * Project widget layout
 * - Respects widget style (solid / glass / transparent)
 * - No extra inner "card" backgrounds
 */

.widget .widget-body-inner.widget-project {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;

  /* IMPORTANT:
   * Do NOT set background, border, or box-shadow here.
   * The outer .widget + .widget-inner handle chrome.
   */
}

/* Header: title + phase line */

.widget .widget-body-inner.widget-project .project-header {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.widget .widget-body-inner.widget-project .project-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

.widget .widget-body-inner.widget-project .project-phase {
  font-size: 0.8rem;
  opacity: 0.8;
}

/* Progress section */

.widget .widget-body-inner.widget-project .project-progress {
  margin-top: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.widget .widget-body-inner.widget-project .project-progress-bar {
  position: relative;
  width: 100%;
  height: 0.4rem;
  border-radius: 999px;
  overflow: hidden;

  /* Small track, not a full card.
   * Neutral by default; adjusted slightly for transparent vs solid/glass.
   */
  background: rgba(255, 255, 255, 0.18);
}

/* Slightly darker track on transparent widgets so it reads on bright BGs */
.widget.widget--transparent
  .widget-body-inner.widget-project
  .project-progress-bar {
  background: rgba(0, 0, 0, 0.18);
}

.widget .widget-body-inner.widget-project .project-progress-bar-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Width is controlled inline via style="width: 17%;" */
  background: var(--accent-color, #7cf27c);
}

/* Label under progress bar */

.widget .widget-body-inner.widget-project .project-progress-label {
  font-size: 0.8rem;
  opacity: 0.9;
}

/* Meta line */

.widget .widget-body-inner.widget-project .project-meta {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.3;
  opacity: 0.8;
}