/* ./css/ikukyu-kpi-cards.css */

/* =========================
   Ikukyu KPI Cards (pastel compact style)
========================= */
.ikukyu-kpi-section{
  margin-top: 12px;
}

.ikukyu-kpi-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

.ikukyu-kpi-title{
  margin:0;
  font-size:18px;
  font-weight:900;
  color:#131722;
  letter-spacing:.01em;
}

.ikukyu-kpi-period{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.95);
  color:#6b7280;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  box-shadow: var(--shadow-soft-sm);
}

.ikukyu-kpi-status{
  margin:0 0 10px;
  font-size:12px;
  color:#6b7280;
}
.ikukyu-kpi-status.is-loading { color:#64748b; }
.ikukyu-kpi-status.is-ok      { color:#0f766e; }
.ikukyu-kpi-status.is-warn    { color:#a16207; }
.ikukyu-kpi-status.is-error   { color:#b91c1c; }

.ikukyu-kpi-card-list{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}

/* =========================
   Card base
========================= */
.ikukyu-kpi-card{
  --card-bg-1: #ffffff;
  --card-bg-2: #f7f8fb;
  --card-accent: #8aa0b8;
  --card-accent-soft: rgba(138,160,184,.14);

  position:relative;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.88);
  background:linear-gradient(180deg, var(--card-bg-1) 0%, var(--card-bg-2) 100%);
  box-shadow: var(--shadow-soft-sm);
  padding:10px;
  overflow:hidden;
}

.ikukyu-kpi-card::before{
  content:"";
  position:absolute;
  right:-24px;
  top:-24px;
  width:80px;
  height:80px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.92), rgba(255,255,255,0) 70%);
  pointer-events:none;
}

/* パステル差分（カード種別） */
.ikukyu-kpi-card.is-total{
  --card-bg-1: #fff2f7;
  --card-bg-2: #ffeaf2;
  --card-accent: #ef7da0;
  --card-accent-soft: rgba(239,125,160,.16);
}

.ikukyu-kpi-card.is-childcare{
  --card-bg-1: #eef7ff;
  --card-bg-2: #e7f1ff;
  --card-accent: #69a7ff;
  --card-accent-soft: rgba(105,167,255,.16);
}

.ikukyu-kpi-card.is-birth{
  --card-bg-1: #fff9ee;
  --card-bg-2: #fff2e2;
  --card-accent: #f3a35b;
  --card-accent-soft: rgba(243,163,91,.16);
}

.ikukyu-kpi-card.is-empty,
.ikukyu-kpi-card.is-loading{
  background: #fafafa;
  border:1px dashed #d8dde7;
  box-shadow:none;
}

/* =========================
   Head
========================= */
.ikukyu-kpi-card__head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-bottom:8px;
}

.ikukyu-kpi-card__title-wrap{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

.ikukyu-kpi-card__icon{
  width:24px;
  height:24px;
  border-radius:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.92);
  box-shadow: 0 2px 8px rgba(18,24,38,.05);
  font-size:13px;
  line-height:1;
}

.ikukyu-kpi-card__title{
  margin:0;
  font-size:13px;
  font-weight:900;
  color:#0f172a;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ikukyu-kpi-card__chip{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  height:20px;
  padding:0 7px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.9);
  color:#6b7280;
  font-size:10px;
  font-weight:800;
}

.ikukyu-kpi-card__sub{
  position:relative;
  z-index:1;
  margin-top:2px;
  font-size:10px;
  color:#8a93a4;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================
   Main highlight
========================= */
.ikukyu-kpi-main{
  position:relative;
  z-index:1;
  border-radius:14px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(20,24,34,.04);
  padding:8px 9px;
  margin-bottom:8px;
}

.ikukyu-kpi-main__top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:6px;
}

.ikukyu-kpi-main__label{
  font-size:10px;
  color:#64748b;
  font-weight:700;
}

.ikukyu-kpi-main__sub{
  font-size:10px;
  color:#8a93a4;
  font-weight:700;
}

.ikukyu-kpi-main__value-row{
  margin-top:4px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:6px;
}

.ikukyu-kpi-main__value{
  font-size:24px;
  line-height:1;
  font-weight:900;
  color:#111827;
  font-variant-numeric: tabular-nums;
  letter-spacing:-.02em;
}

.ikukyu-kpi-main__unit{
  font-size:11px;
  color:#64748b;
  font-weight:700;
  margin-left:4px;
}

.ikukyu-kpi-main__dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: var(--card-accent);
  box-shadow: 0 0 0 4px var(--card-accent-soft);
  margin-bottom:3px;
  flex:0 0 auto;
}

/* =========================
   Cells grid (compact pills style)
========================= */
.ikukyu-kpi-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:6px;
}

.ikukyu-kpi-cell{
  border-radius:12px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(20,24,34,.04);
  padding:7px 8px 6px;
  min-width:0;
}

.ikukyu-kpi-cell__label{
  display:block;
  font-size:9px;
  line-height:1.1;
  color:#7b8494;
  font-weight:700;
  margin-bottom:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ikukyu-kpi-cell__value{
  display:block;
  font-size:12px;
  font-weight:900;
  color:#111827;
  font-variant-numeric: tabular-nums;
  line-height:1.1;
  word-break:break-word;
}

.ikukyu-kpi-cell__sub{
  display:block;
  margin-top:3px;
  font-size:10px;
  color:#7b8494;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 値の状態色（必要なら JS で class 付与） */
.ikukyu-kpi-cell__value.is-good { color:#1f9f77; }
.ikukyu-kpi-cell__value.is-bad  { color:#d65873; }
.ikukyu-kpi-cell__value.is-flat { color:#6b7280; }

/* =========================
   Footer / note
========================= */
.ikukyu-kpi-footnote{
  position:relative;
  z-index:1;
  margin-top:8px;
  padding-top:7px;
  border-top:1px solid rgba(20,24,34,.05);
  font-size:9px;
  color:#9aa3b2;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================
   Empty
========================= */
.ikukyu-kpi-empty{
  border:1px dashed #d8dde7;
  border-radius:14px;
  padding:14px;
  background:rgba(255,255,255,.5);
  color:#6b7280;
  font-size:13px;
}
.ikukyu-kpi-empty p{ margin:0; }

/* =========================
   Skeleton
========================= */
.ikukyu-kpi-card--skeleton .sk{
  border-radius:10px;
  background: linear-gradient(90deg, #eef2f7 25%, #f7f9fc 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: ikukyuShimmer 1.2s ease infinite;
}
.ikukyu-kpi-card--skeleton .sk1{ height:14px; width:48%; margin-bottom:8px; }
.ikukyu-kpi-card--skeleton .sk2{ height:46px; width:100%; margin-bottom:7px; }
.ikukyu-kpi-card--skeleton .sk3{ height:34px; width:100%; margin-bottom:6px; }
.ikukyu-kpi-card--skeleton .sk4{ height:10px; width:68%; }

@keyframes ikukyuShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* =========================
   Responsive
========================= */
@media (max-width: 720px){
  .ikukyu-kpi-grid{
    grid-template-columns: 1fr;
  }

  .ikukyu-kpi-main__value{
    font-size:22px;
  }

  .ikukyu-kpi-cell__value{
    font-size:12px;
  }
}