/**
 * Curriculum Checklist — Progress-specific styles
 * File: cck-progress.css
 * Visual direction:
 * - premium minimalist
 * - ivory / off-white surfaces
 * - deep navy typography
 * - restrained rainbow accents
 * - soft dashboard-card hierarchy
 */

/* =========================
   Generic progress wrappers
   ========================= */

.cck-progress-block{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cck-progress-block > *{
  width: 100%;
}

/* =========================
   Shared card polish
   ========================= */

.cck-progress-summary-card,
.cck-subject-progress-card,
.cck-last-completed-card{
  position: relative;
  background: #FCFBF7;
  border: 1px solid rgba(12, 44, 67, 0.08);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(12, 44, 67, 0.05);
  padding: 14px 16px;
  overflow: visible;
}

.cck-progress-summary-card::before,
.cck-subject-progress-card::before,
.cck-last-completed-card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(233,123,123,0.42),
    rgba(233,176,123,0.42),
    rgba(233,223,123,0.42),
    rgba(134,224,163,0.42),
    rgba(127,215,230,0.42),
    rgba(138,167,234,0.42),
    rgba(181,154,232,0.42),
    rgba(232,143,201,0.42)
  );
  pointer-events: none;
}

/* =========================
   Progress summary card
   ========================= */

.cck-progress-summary-card{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cck-progress-summary-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.cck-progress-summary-heading,
.cck-progress-summary-title{
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.4;
  font-weight: 800;
  color: #0C2C43;
}

.cck-progress-summary-percent{
  font-size: 1rem;
  line-height: 1;
  font-weight: 800;
  color: #0C2C43;
  white-space: nowrap;
}

.cck-progress-summary-bar{
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: visible;
  background: #E6EBEF;
}

.cck-progress-summary-fill{
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(233,123,123,0.88),
    rgba(233,176,123,0.88),
    rgba(233,223,123,0.88),
    rgba(134,224,163,0.88),
    rgba(127,215,230,0.88),
    rgba(138,167,234,0.88),
    rgba(181,154,232,0.88),
    rgba(232,143,201,0.88)
  );
}

.cck-progress-summary-meta{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(12, 44, 67, 0.66);
}

.cck-progress-summary-text{
  color: #355166;
}

.cck-progress-summary-remaining{
  color: rgba(12, 44, 67, 0.58);
}

.cck-progress-summary-stats{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cck-progress-stat{
  min-width: 92px;
}

.cck-progress-stat-label{
  display: block;
  font-size: 0.74rem;
  line-height: 1.35;
  color: rgba(12, 44, 67, 0.56);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cck-progress-stat-value{
  display: block;
  font-size: 0.9rem;
  line-height: 1.35;
  font-weight: 700;
  color: #0C2C43;
}

/* =========================
   Subject progress list/cards
   ========================= */

.cck-subject-progress-section{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cck-subject-progress-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.cck-subject-progress-card{
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 16px;
}

.cck-subject-progress-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.cck-subject-progress-title{
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.5;
  font-weight: 800;
  color: #0C2C43;
}

.cck-subject-progress-right{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.cck-subject-progress-weight{
  font-size: 0.78rem;
  line-height: 1.35;
  font-weight: 700;
  color: rgba(12, 44, 67, 0.55);
}

.cck-subject-progress-percent{
  font-size: 0.92rem;
  line-height: 1.2;
  font-weight: 800;
  color: #0C2C43;
}

.cck-subject-progress-bar{
  position: relative;
  width: 100%;
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: #E6EBEF;
}

.cck-subject-progress-fill{
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(233,123,123,0.88),
    rgba(233,176,123,0.88),
    rgba(233,223,123,0.88),
    rgba(134,224,163,0.88),
    rgba(127,215,230,0.88),
    rgba(138,167,234,0.88),
    rgba(181,154,232,0.88),
    rgba(232,143,201,0.88)
  );
}

.cck-subject-progress-meta{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.84rem;
  line-height: 1.55;
  color: rgba(12, 44, 67, 0.66);
}

/* =========================
   Last completed card
   ========================= */

.cck-last-completed-card{
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 16px;
}

.cck-last-completed-title{
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  font-weight: 800;
  color: #0C2C43;
}

.cck-last-completed-body{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cck-last-completed-item{
  font-size: 0.94rem;
  line-height: 1.55;
  font-weight: 700;
  color: #0C2C43;
  word-break: break-word;
}

.cck-last-completed-subject{
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(12, 44, 67, 0.60);
}

.cck-last-completed-date{
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(12, 44, 67, 0.48);
}

.cck-last-completed-none{
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(12, 44, 67, 0.60);
}

/* =========================
   Standalone pie helper stack
   ========================= */

.cck-dashboard-stack{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cck-dashboard-stack > *{
  width: 100%;
}

/* =========================
   Pending/loading hooks
   ========================= */

.cck-progress-summary-card.is-loading,
.cck-subject-progress-card.is-loading,
.cck-last-completed-card.is-loading,
.cck-progress-pie-card.is-loading{
  opacity: 0.75;
  pointer-events: none;
}

.cck-progress-summary-card.is-saving,
.cck-subject-progress-card.is-saving,
.cck-last-completed-card.is-saving,
.cck-progress-pie-card.is-saving{
  opacity: 0.82;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 640px){
  .cck-progress-summary-meta,
  .cck-subject-progress-meta{
    flex-direction: column;
    align-items: flex-start;
  }

  .cck-progress-summary-stats{
    gap: 10px;
  }

  .cck-subject-progress-list{
    grid-template-columns: 1fr;
  }
}