/* Cycle Time Monitoring — screenshot-aligned layout */

body.ct-page .nav-item.active {
  background: #e8f0fe;
  color: var(--blue);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--blue);
}
body.ct-page .nav-item.active .ic { color: var(--blue); }

.nav-badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.sidebar-logout {
  width: 100%;
  margin-top: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: #5b647a;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ct-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 58%, var(--blue) 100%);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: var(--shadow);
}
.ct-header-left h1 {
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.2px;
}
.ct-header-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 5px;
  color: rgba(255,255,255,.9);
  font-size: 13px;
  font-weight: 600;
}
.ct-header-meta b { color: #fff; }
.ct-meta-sep { color: rgba(255,255,255,.45); }
.ct-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255,255,255,.92);
  font-size: 12.5px;
  font-weight: 600;
}
.ct-header-right b { color: #fff; }
.ct-refresh {
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  transition: background .2s ease, transform .2s ease;
}
.ct-refresh:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }

.sidebar-logout .ic,
.ct-refresh .ic {
  width: 14px;
  height: 14px;
  stroke-width: 2.1;
}

.ct-header .icon-inline,
.ct-header .ic {
  color: rgba(255,255,255,.92);
}

body.ct-page .kpi-row {
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
body.ct-page .kpi-card {
  min-height: 94px;
  padding: 10px 12px;
  border-radius: 10px;
}
body.ct-page .kpi-icon { font-size: 21px; }
body.ct-page .kpi-label {
  font-size: 9px;
  color: #1b2a86;
}
body.ct-page .kpi-value {
  font-size: 24px;
}
.kpi-status-label {
  color: #6b748c;
  font-size: 10px;
  font-weight: 700;
}

.ct-grid-2 {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 12px;
  margin-bottom: 12px;
}
.ct-grid-1 { margin-bottom: 12px; }
.ct-grid-2 .card,
.ct-grid-1 .card {
  margin-bottom: 0;
  border-radius: 10px;
}

.ct-card-head-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ct-filters {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ct-filters label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6b748c;
  font-size: 10px;
  font-weight: 700;
}
.ct-filters select {
  min-width: 134px;
  border: 1px solid #cfd6e8;
  background: #fff;
  color: var(--navy);
  border-radius: 8px;
  padding: 7px 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
}

body.ct-page .card-head {
  padding: 14px 18px 10px;
}
body.ct-page .card-head h2 {
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
}
body.ct-page .card-head .muted {
  color: var(--muted);
  font-size: 11px;
}
body.ct-page .table-wrap {
  padding: 0 14px 14px;
}
body.ct-page .data-table {
  font-size: 12px;
}
body.ct-page .data-table thead th {
  background: var(--header-row);
  color: #fff;
  padding: 10px 12px;
}
body.ct-page .data-table tbody td {
  padding: 9px 12px;
}
body.ct-page .data-table tfoot td {
  padding: 11px 12px;
  background: #eef1fb;
}

/* Show 5 data rows; scroll within subsection when there are more */
body.ct-page .data-table.ct-table-scroll {
  --ct-row-height: 34px;
  table-layout: fixed;
  width: 100%;
}
body.ct-page .data-table.ct-table-scroll thead,
body.ct-page .data-table.ct-table-scroll tbody tr,
body.ct-page .data-table.ct-table-scroll tfoot,
body.ct-page .data-table.ct-table-scroll tfoot tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
body.ct-page .data-table.ct-table-scroll tbody {
  display: block;
  max-height: calc(var(--ct-row-height) * 5);
  overflow-y: auto;
  overflow-x: hidden;
}
body.ct-page .data-table.ct-table-scroll tbody::-webkit-scrollbar {
  width: 6px;
}
body.ct-page .data-table.ct-table-scroll tbody::-webkit-scrollbar-thumb {
  background: #c5cde0;
  border-radius: 6px;
}
body.ct-page .data-table.ct-table-scroll tbody tr {
  height: var(--ct-row-height);
}
body.ct-page .data-table.ct-table-scroll tbody td {
  vertical-align: middle;
}

.ct-pareto-wrap {
  --ct-pareto-row-height: 26px;
  --ct-pareto-visible-rows: 5;
  max-height: calc(24px + var(--ct-pareto-row-height) * var(--ct-pareto-visible-rows) + 28px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 14px 10px;
}
.ct-pareto-wrap::-webkit-scrollbar {
  width: 6px;
}
.ct-pareto-wrap::-webkit-scrollbar-thumb {
  background: #c5cde0;
  border-radius: 6px;
}
.ct-pareto {
  width: 100%;
  min-height: 260px;
  display: block;
}
.ct-chart-label {
  font-size: 10px;
  fill: #5b647a;
  font-family: "Poppins", sans-serif;
}

.ct-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: -1px;
}
.ct-swatch.blue { background: #3b82f6; }
.ct-swatch.green { background: #7fb069; }
.ct-swatch.orange { background: #f28c28; }
.ct-swatch.purple { background: #9b59b6; }

.ct-row-pending {
  background: #fde2e2 !important;
}
.ct-log-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
.ct-log-status.pending { color: var(--red); }
.ct-log-status.logged { color: var(--green); }
.ct-warning-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0 10px 10px;
  padding: 10px 14px;
  border: 1px solid #f4cccc;
  background: #fdecec;
  color: #9b2c2c;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}
.ct-history-btn {
  border: 1px solid #c7b7d8;
  background: #fff;
  color: #4a2a6a;
  padding: 7px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 1300px) {
  body.ct-page .kpi-row { grid-template-columns: repeat(3, 1fr); }
  .ct-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  body.ct-page .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .ct-header,
  .ct-card-head-split,
  .ct-warning-bar { flex-direction: column; align-items: flex-start; }
}