/* Professional styling for cycle info panel */
.cycle-name-link {
	font-weight: bold;
	font-size: large;
}
.cml-cycle-panel {
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  padding: 0.5rem 0.5rem !important;
  box-shadow: 0 2px 6px rgba(16,24,40,0.04);
}

.cml-cycle-panel .ui-panel-content {
    border: none !important;
}

.cml-cycle-header {
  display: flex; 
  gap: 0.5rem; 
  align-items: center;
  padding: 0.5rem 0;
}

.cml-cycle-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0b2545;
  min-width: 15rem;
}

.cml-cycle-meta {
  text-align: right;
  font-size: 0.95rem;
}

.cml-cycle-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.85rem;
  color: #fff;
}

/* status color variants (common statuses) */
.cml-cycle-status-NEW { background-color: #2e7d32; }    /* green */
.cml-cycle-status-PLANNED { background-color: #2e7d32; }    /* green */
.cml-cycle-status-ACTIVE { background-color: #1565c0; }  /* blue */
.cml-cycle-status-CLOSING { background-color: #f9a825; } /* amber */
.cml-cycle-status-CLOSED { background-color: #9e9e9e; }  /* grey */

.cml-cycle-dates {
  max-width: 15rem;
}
.cml-cycle-details {
  max-width: 20rem;
}

.cml-cycle-info {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* space between items */
  padding: 0.5rem;
}

/* Default sizing for children: do not force full-width, allow wrapping. */
.cml-cycle-info > * {
  flex: 0 1 auto;
}

/* Keep the date panel at a sensible width so it doesn't collapse too small. */
.cml-cycle-info .cml-cycle-dates {
  flex: 0 0 15rem; /* fixed base width, but can be overridden by responsive rules */
}

/* Make PrimeFaces vertical divider stretch to match sibling height and not collapse.
   Cover common PrimeFaces divider class names so this works across versions. */
.cml-cycle-info .ui-divider-vertical,
.cml-cycle-info .ui-divider {
  align-self: stretch;
  margin: 0 0.5rem;
}

/* Small screens: stack items vertically for readability */
@media (max-width: 720px) {
  .cml-cycle-info { flex-direction: column; gap: 0.5rem; }
  .cml-cycle-info .cml-cycle-dates { flex: 0 0 auto; max-width: none; }
  .cml-cycle-info .ui-divider-vertical, .cml-cycle-info .ui-divider { align-self: auto; }
}

.cml-cycle-dates .caption {
  color: #6b7280;
  font-weight: 600;
  max-width: 5rem;
  font-size: 75%;
}

.cml-cycle-dates .value {
  color: #0b2545;
  font-weight: 500;
  font-size: 75%;
}

.cml-cycle-details .caption {
  color: #6b7280;
  font-weight: 600;
  max-width: 5rem;
  font-size: 75%;
}

.cml-cycle-details .value {
  color: #0b2545;
  font-weight: 500;
  font-size: 75%;
}

.cml-cycle-kpis-panel {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.cml-kpi-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #fbfdff;
  border: 1px solid #f1f5f9;
}

.cml-kpi-caption { color: #334155; font-weight:600; }
.cml-kpi-value { color: #0b2545; font-size:1.05rem; font-weight:700; }
.cml-kpi-ts { color: #6b7280; font-size:0.85rem; text-align:right; }

/* card variant for KPIs */
.cml-kpi-card {
  border-radius: 8px;
  padding: 10px;
  min-width: 15rem;
  position: relative; /* allow absolute positioned elements inside (refresh icon) */
}
.cml-kpi-card .ui-card-title {
  font-size: 100% !important;
}

.cml-cycle-board {
  /* rounded corners and soft shadow to lift panels visually */
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(11,37,69,0.08), 0 2px 6px rgba(11,37,69,0.04);
  background: #ffffff; /* ensures visible rounded background on varied layouts */
  overflow: hidden; /* keep children clipped to rounded corners */
}

/* If a PrimeFaces panel sits inside the board, make sure its surface follows the rounding */
.cml-cycle-board .ui-panel {
  border-radius: inherit;
  overflow: hidden;
}

/* Remove default PrimeFaces card padding for KPI cards so our internal layout controls spacing */
.cml-kpi-card .ui-card-body,
.cml-kpi-card .ui-card-content {
  padding: 0 !important;
}

.cml-kpi-card-body { padding: 6px 2px 0 2px; /* center content and stack vertically for KPI visuals */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cml-kpi-card-title {
	text-align: center;
}
.cml-kpi-card-tools {
	text-align: center;
}

.cml-kpi-card .cml-kpi-value { font-size:1.875rem; font-weight:700; margin-bottom:6px; }
.cml-kpi-card .cml-kpi-ts { font-size:0.8rem; color:#6b7280; }
.cml-kpi-bar { height:0.375rem; background:#e6eef8; border-radius:0.5rem; margin-top:0.5rem; overflow:hidden; box-shadow: inset 0 3px 6px rgba(0,0,0,0.06); }
.cml-kpi-bar-fill { height:100%; background:linear-gradient(90deg,#2e7d32,#66bb6a); width:0%; transition:width .8s ease; box-shadow: 0 4px 10px rgba(11,37,69,0.06), inset 0 1px 0 rgba(255,255,255,0.18); border-radius:0.5rem; }

/* Circular progress variant used in KPI cards. Uses CSS custom property --pct (0-100) set inline */
.cml-kpi-circle {
  margin: 1rem;
  --size: 9rem;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* use the CSS custom property as a percentage value (e.g. 83%) */
  background: conic-gradient(#2e7d32 var(--pct), #e6eef8 var(--pct));
  margin-top: 0.5rem;
  flex: 0 0 auto;
  /* Smooth borders and subtle 3D depth */
  box-shadow: 0 8px 18px rgba(16,24,40,0.08), inset 0 2px 6px rgba(255,255,255,0.02);
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  transition: background .6s ease, box-shadow .4s ease;
}

.cml-kpi-circle::after {
  /* inner white circle to create ring effect; adjust thickness by changing the subtraction value.
     Previously we subtracted 16px; to increase the ring thickness (double) we subtract 2rem (32px).
     This yields a ring thickness of ~1rem on each side for the current --size. */
  content: "";
  position: absolute;
  /* reduce ring thickness by half (previously subtracted 4rem) */
  width: calc(var(--size) - 2rem);
  height: calc(var(--size) - 2rem);
  background: #fff;
  /* subtle inner bevel to create 3D ring effect */
  box-shadow: inset 0 6px 10px rgba(0,0,0,0.06), inset 0 -4px 8px rgba(255,255,255,0.65);
  border: 0.04rem solid rgba(0,0,0,0.04);
  border-radius: 50%;
  z-index: 1;
}

.cml-kpi-circle-value {
  position: relative; /* above the pseudo element */
  font-weight: 700;
  color: #0b2545;
  /* prefer rem for font sizing */
  /* increased 50% for emphasis */
  font-size: 1.5rem;
  /* embossed text for depth and legibility */
  text-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 2px 6px rgba(11,37,69,0.06);
  z-index: 2;
}

/* Responsive tweaks */
@media (max-width: 720px) {
  .cml-kpi-row { grid-template-columns: 1fr; }
  .cml-cycle-meta { text-align:left; }
}