/**
 * Curriculum Checklist — Frontend shared styles
 * File: cck-frontend.css
 * Visual direction:
 * - premium minimalist
 * - ivory / off-white surfaces
 * - deep navy typography
 * - restrained rainbow accents
 * - clean dashboard-card feel
 */

/* =========================
   Shared wrappers / spacing
   ========================= */

.cck-inline-message,
.cck-empty-state{
  width: 100%;
  border: 1px solid rgba(12, 44, 67, 0.08);
  background: #FCFBF7;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 6px 18px rgba(12, 44, 67, 0.05);
  color: #355166;
  font-size: 0.94rem;
  line-height: 1.65;
}

.cck-empty-state p,
.cck-inline-message p{
  margin: 0;
}

.cck-inline-message strong,
.cck-empty-state strong{
  color: #0C2C43;
}

/* Small inline pie notices */
.cck-pie-guest,
.cck-pie-error{
  display: inline-block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(12, 44, 67, 0.08);
  background: #F8F6F1;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(12, 44, 67, 0.72);
}

.cck-pie-error{
  background: #FDF2F4;
  border-color: #F2C9CF;
  color: #8D2C35;
}

/* =========================
   Progress pie / donut card
   ========================= */

.cck-progress-pie-card{
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(12, 44, 67, 0.08);
  border-radius: 16px;
  background-color: #FCFBF7;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 30% auto;
  box-shadow: 0 6px 18px rgba(12, 44, 67, 0.05);
  min-width: 0;
  overflow: hidden;
}

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

.cck-progress-pie{
  width: var(--cck-size, 90px);
  height: var(--cck-size, 90px);
  min-width: var(--cck-size, 90px);
  border-radius: 50%;
  position: relative;
  flex: 0 0 auto;
  background: conic-gradient(var(--cck-track, #E6EBEF) 0 360deg);
}

/* reversed rainbow gradient */
.cck-progress-pie::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    rgba(232,143,201,0.95),
    rgba(181,154,232,0.95),
    rgba(138,167,234,0.95),
    rgba(127,215,230,0.95),
    rgba(134,224,163,0.95),
    rgba(233,223,123,0.95),
    rgba(233,176,123,0.95),
    rgba(233,123,123,0.95),
    rgba(232,143,201,0.95)
  );
  -webkit-mask: conic-gradient(#000 0 calc(var(--cck-p, 0) * 1%), transparent 0);
          mask: conic-gradient(#000 0 calc(var(--cck-p, 0) * 1%), transparent 0);
}

.cck-progress-pie::after{
  content: "";
  position: absolute;
  inset: var(--cck-th, 10px);
  border-radius: 50%;
  background: #FCFBF7;
  z-index: 2;
}

.cck-progress-pie-inner{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.cck-progress-pie-percent{
  font-size: 1.12rem;
  line-height: 1;
  font-weight: 800;
  color: #0C2C43;
}

.cck-progress-pie-meta{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
  position: relative;
  z-index: 2;
}

.cck-progress-pie-title{
  font-size: 0.95rem;
  line-height: 1.4;
  font-weight: 800;
  color: #0C2C43;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cck-progress-pie-sub{
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(12, 44, 67, 0.72);
  word-break: break-word;
}

.cck-progress-pie-extra{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 3px;
}

.cck-progress-pie-extra-item{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #F3F1EA;
  border: 1px solid rgba(12, 44, 67, 0.06);
  color: rgba(12, 44, 67, 0.68);
  font-size: 0.76rem;
  line-height: 1.35;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}

/* =========================
   Shared summary / cards
   ========================= */

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

.cck-summary-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;
}

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

.cck-summary-text{
  margin: 0;
  color: rgba(12, 44, 67, 0.72);
  font-size: 0.92rem;
  line-height: 1.65;
}

/* =========================
   Generic utility classes
   ========================= */

.cck-visually-hidden{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.cck-text-muted{
  color: rgba(12, 44, 67, 0.58) !important;
}

.cck-text-strong{
  color: #0C2C43 !important;
  font-weight: 700 !important;
}

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

@media (max-width: 640px){
  .cck-progress-pie-card{
    max-width: 100%;
    padding: 12px 14px;
    background-size: 24% auto;
    background-position: right 10px center;
  }

  .cck-progress-pie{
    width: 72px;
    height: 72px;
    min-width: 72px;
  }

  .cck-progress-pie-percent{
    font-size: 1rem;
  }

  .cck-progress-pie-title{
    font-size: 0.9rem;
  }

  .cck-progress-pie-sub{
    font-size: 0.85rem;
  }
}