@layer features {

/* ── Capacity Monitoring page ── */
.qc-cap-panel { padding: 16px 18px; }
/* Header: title+hint on left, actions on right. `flex: 1 1 auto;
 * min-width: 0` on the left lets the hint text shrink/ellipsis instead
 * of pushing the actions onto the next line (Image #179 task 1 —
 * Resources Planning's long hint was forcing the wrap). Actions stay
 * `flex-shrink: 0` so they never compress. */
.qc-cap-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: nowrap; }
.qc-cap-header-left { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
/* Section hint — MODEC caption typography. */
.qc-cap-hint {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 1.66;
  letter-spacing: 0.4px;
  color: rgba(0, 0, 0, 0.6);
}
/* `align-items: flex-end` so every header control (Custom dropdown,
 * date pickers, Refresh, Manage menu) lines up on a single bottom
 * baseline. The date pickers' wrappers are taller than their siblings
 * by the floating-label gap on top — center-alignment dropped their
 * bottoms below the rest of the row; flex-end pulls them up. */
.qc-cap-header-actions { display: flex; gap: 8px; align-items: flex-end; flex-wrap: nowrap; flex-shrink: 0; }
.qc-cap-select, .qc-cap-date { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--color-border-default); font-size: var(--font-size-xs); background: var(--color-bg-surface); }
/* Cap the window preset so it doesn't stretch to fill the row — wide
   enough to read every preset label cleanly. */
.qc-cap-window-select { width: auto; min-width: 160px; max-width: 200px; }
.qc-cap-btn { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--color-border-default); background: var(--color-bg-surface); color: var(--color-text-primary); font-size: var(--font-size-xs); cursor: pointer; }
/* The global `button:hover` rule in styles.css (specificity 0,1,1) flips
   the background to var(--color-text-primary), which would leave dark text invisible on
   dark bg. Re-set bg + color here at equal specificity (0,2,0) so this
   class wins. */
.qc-cap-btn:hover { background: var(--color-bg-surface-alt); color: var(--color-text-primary); border-color: var(--color-text-muted); }
.qc-cap-btn-primary { background: var(--color-text-primary); color: var(--color-text-inverse); border-color: var(--color-text-primary); }
.qc-cap-btn-primary:hover { background: var(--color-text-primary); color: var(--color-text-inverse); border-color: var(--color-text-primary); }
/* Inline status banner (loading wrapper / error text). MODEC body2. */
.qc-cap-state {
  padding: 24px 0;
  font-family: var(--font-family-sans);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.43;
  letter-spacing: 0.15px;
  color: rgba(0, 0, 0, 0.6);
}
.qc-cap-error { color: var(--color-danger-text); }

/* While the Resources Monitoring page is loading, suppress any real
   section that progressively renders so users only see the skeleton —
   the page reveals all data at once when loading completes. */
#qcCapacityView.qc-cap-loading-active #qcCapTeamSummary,
#qcCapacityView.qc-cap-loading-active #qcCapWorkload,
#qcCapacityView.qc-cap-loading-active #qcCapDeliveryMonitoring,
#qcCapacityForecastView.qc-cap-loading-active #qcFcstTiles,
#qcCapacityForecastView.qc-cap-loading-active #qcFcstDeliveryPlan {
  display: none !important;
}

/* Skeleton placeholders that visualize the page structure during load.
   Each block uses a shimmer gradient so it reads as "loading content"
   rather than "empty container". */
.qc-cap-skeleton { margin-top: 8px; }
.qc-cap-skel-section { padding: 18px 0; margin: 16px 0; /* MODEC: removed border + bg wrapper */ }
.qc-cap-skel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
/* QC skeletons share the design system's `.ds-skeleton` shimmer — same
 * neutral palette and timing so a loading QC card visually matches a
 * loading Plans card. Sizes stay feature-scoped (heights below). */
.qc-cap-skel-bar, .qc-cap-skel-tile, .qc-cap-skel-card, .qc-cap-skel-row, .qc-cap-skel-calendar {
  background: linear-gradient(
    90deg,
    var(--c-neutral-200) 0%,
    var(--c-neutral-100) 50%,
    var(--c-neutral-200) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: ds-skeleton-shimmer 1.5s ease-in-out infinite;
}
.qc-cap-skel-bar       { height: 16px; }
.qc-cap-skel-bar.short { width: 240px; height: 20px; }
.qc-cap-skel-bar.tiny  { width: 110px; height: 14px; }
.qc-cap-skel-tiles  { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.qc-cap-skel-tile   { height: 130px; }
.qc-cap-skel-calendar { margin-top: 14px; height: 180px; }
.qc-cap-skel-cards  { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
.qc-cap-skel-card   { height: 230px; }
.qc-cap-skel-rows   { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.qc-cap-skel-row    { height: 32px; }
/* (Local @keyframes qc-skel-shimmer removed — now uses ds-skeleton-shimmer.) */

@media (max-width: 1100px) {
  .qc-cap-skel-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qc-cap-skel-cards { grid-template-columns: 1fr; }
}

/* Prominent loading banner — clearer than a plain "Loading…" line so users
   know data is still on the way while sections render progressively. */
#qcCapLoading:not(.hidden), #qcFcstLoading:not(.hidden) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 24px;
  margin: 18px 0;
  background: var(--color-bg-surface);
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
#qcCapLoading:not(.hidden)::before, #qcFcstLoading:not(.hidden)::before {
  content: "";
  display: inline-block;
  width: 22px; height: 22px;
  border: 2.5px solid var(--color-border-default);
  border-top-color: var(--color-text-link);
  border-radius: 50%;
  animation: qc-cap-spin 0.8s linear infinite;
  flex: 0 0 auto;
}
@keyframes qc-cap-spin { to { transform: rotate(360deg); } }

/* ── Team Capacity panel — dashboard tiles ── */
/* ── Section expand/collapse toggle ────────────────────────────────────
 * Chevron icon button in each section header; rotates 180° (down → up)
 * via [aria-expanded="false"] when the section is collapsed. The handler
 * (`attachSectionToggleHandlerOnce` in team-capacity.js) toggles the
 * `is-collapsed` class on the panel; the CSS rule below hides everything
 * inside the panel except the header. Default state is expanded. */
.qc-cap-section-toggle {
  width: 32px; height: 32px;
  min-width: 32px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: rgba(0, 0, 0, 0.54);
  cursor: pointer;
  box-shadow: none;
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.qc-cap-section-toggle:hover { background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.87); }
.qc-cap-section-toggle:focus-visible { outline: 2px solid rgba(63, 91, 255, 0.5); outline-offset: 1px; }
.qc-cap-section-toggle-icon {
  display: inline-flex;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.qc-cap-section-toggle[aria-expanded="false"] .qc-cap-section-toggle-icon {
  transform: rotate(180deg);
}
/* Hide everything inside a collapsed panel EXCEPT the header. */
.qc-cap-team-summary-panel.is-collapsed > :not(.qc-cap-team-summary-header),
.qc-cap-team-workload-panel.is-collapsed > :not(.qc-cap-team-workload-header),
.qc-dp-panel.is-collapsed > :not(.qc-dp-panel-header) {
  display: none;
}
/* When collapsed, drop the bottom border under the header so the section
 * frame reads as a clean tight strip instead of "header with dangling rule". */
.qc-cap-team-summary-panel.is-collapsed > .qc-cap-team-summary-header,
.qc-cap-team-workload-panel.is-collapsed > .qc-cap-team-workload-header,
.qc-dp-panel.is-collapsed > .qc-dp-panel-header {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* ── Section wrappers (Team Capacity / Team Workload / Delivery Monitoring) ──
 * Each top-level area on Resources Monitoring gets a soft-bordered card
 * frame so the page reads as three discrete sections instead of one long
 * scroll. Uniform spec across all three:
 *   - 1.5px soft grey border + 12px radius
 *   - Surface background (white)
 *   - 16px internal padding
 *   - Header with bottom-bordered divider (already styled per-section)
 *   - 20px vertical gap between sections */
.qc-cap-team-summary-panel {
  padding: 16px 18px;
  margin: 20px 0;
  background: var(--color-bg-surface);
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
}

/* ── qc-icon — Feather-style SVG glyphs, replace site-wide emoji ──
 * 16×16 by default, 14×14 in tight chip contexts. Always uses
 * currentColor for stroke so the icon inherits its container's tier
 * color (`.load-green` → green ring, etc.). See public/qc-monitoring/icons.js */
.qc-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
/* Inline-with-text size for chips and legend pills — slightly smaller so
 * the icon doesn't dominate the label. */
.qc-cap-load-tile-tier-chip .qc-icon,
.qc-cap-team-summary-legend-item .qc-icon {
  width: 14px;
  height: 14px;
}
/* Filled dot variant (color legends) — no stroke, fill comes from inline. */
.qc-icon--dot {
  stroke: none;
  fill: currentColor;
  width: 8px;
  height: 8px;
}


} /* end @layer features */