/* ===========================================================
   changemgmt.css — Change Management (ADKAR) module (.cm-* namespace)
   =========================================================== */
.cm { display: flex; flex-direction: column; gap: 14px; }

/* header */
.cm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cm-head-l { display: flex; flex-direction: column; min-width: 0; }
.cm-title { display: flex; align-items: center; gap: 10px; }
.cm-title h3 { margin: 0; font-size: 18px; }
.cm-badge { background: linear-gradient(135deg, #7c3aed, #5b3aa6); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 4px 9px; border-radius: 6px; }
.cm-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* tabs */
.cm-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line, #e6ddd2); padding-bottom: 2px; }
.cm-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--muted, #8a7d6c); cursor: pointer; border-radius: 6px 6px 0 0; }
.cm-tab:hover { background: var(--hover, #f6f1ea); color: var(--text, #2a2018); }
.cm-tab.on { color: #7c3aed; border-bottom-color: #7c3aed; background: #f5f1fd; }

/* KPI grid */
.cm-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.cm-kpi { background: var(--card, #fff); border: 1px solid var(--line, #e6ddd2); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-kpi.accent { border-color: #c8a6f0; background: linear-gradient(180deg, #faf6ff, #fff); }
.cm-kpi-v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text, #2a2018); overflow-wrap: anywhere; }
.cm-kpi-l { font-size: 11px; color: var(--muted, #8a7d6c); font-weight: 600; }
.cm-kpi-s { font-size: 10.5px; color: var(--muted, #a89b88); }
.cm-kpi.cm-k-green { border-left: 4px solid #2f7d32; } .cm-kpi.cm-k-amber { border-left: 4px solid #e0921f; } .cm-kpi.cm-k-red { border-left: 4px solid #cf3c2e; } .cm-kpi.cm-k-grey { border-left: 4px solid #b3a48d; }

/* RAG banner */
.cm-rag { border-radius: 10px; padding: 11px 14px; font-size: 13px; border: 1px solid; }
.cm-rag b { margin-right: 4px; }
.cm-rag-green { background: #eef7ee; border-color: #bfe0c0; color: #245c27; }
.cm-rag-amber { background: #fdf5e6; border-color: #f0d9a8; color: #8a5d12; }
.cm-rag-red { background: #fdecea; border-color: #f3c2bd; color: #8f2a22; }
.cm-rag-grey { background: #f4f1ec; border-color: #ddd3c5; color: #6a5f50; }

/* rings */
.cm-rings { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-around; }
.cm-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cm-ring { display: block; }
.cm-ring-v { font-size: 19px; font-weight: 700; fill: var(--text, #2a2018); }
.cm-ring-s { font-size: 11px; fill: var(--muted, #8a7d6c); }
.cm-ring-lbl { font-size: 11px; font-weight: 600; color: var(--muted, #6a5f50); }

/* dashboard grid */
.cm-dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cm-dash-grid.cm-2col { grid-template-columns: repeat(2, 1fr); }
.cm-card { padding: 12px 14px; }
.cm-card-h { font-size: 13px; font-weight: 700; color: var(--text, #2a2018); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }

/* charts */
.cm-chart { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cm-donut { display: block; }
.cm-donut-v { font-size: 15px; font-weight: 700; fill: var(--text, #2a2018); }
.cm-donut-s { font-size: 10px; fill: var(--muted, #8a7d6c); }
.cm-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; }
.cm-leg { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted, #6a5f50); }
.cm-leg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.cm-matrix { width: 100%; max-width: 340px; height: auto; }
.cm-axt { font-size: 10px; fill: var(--muted, #8a7d6c); }
.cm-quad { font-size: 9px; fill: #b8530f; font-weight: 600; }

/* horizontal bars */
.cm-bars { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.cm-bar-row { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 8px; }
.cm-bar-lbl { font-size: 11.5px; color: var(--text, #4a4036); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-bar-track { background: var(--hover, #f1ebe2); border-radius: 5px; height: 14px; overflow: hidden; }
.cm-bar-fill { display: block; height: 100%; background: #7c3aed; border-radius: 5px; min-width: 2px; }
.cm-bar-v { font-size: 11px; color: var(--muted, #6a5f50); font-variant-numeric: tabular-nums; }

.cm-empty { padding: 18px; text-align: center; color: var(--muted, #8a7d6c); font-size: 13px; }
.cm-act-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* lists (upcoming activities / comms) */
.cm-list { display: flex; flex-direction: column; gap: 6px; }
.cm-list-row { display: flex; align-items: center; gap: 9px; }
.cm-pin { font-size: 11px; font-weight: 700; color: #7c3aed; background: #f1ebfb; border-radius: 6px; padding: 2px 6px; min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }
.cm-list-main { flex: 1; min-width: 0; }

/* status chips */
.cm-st { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: 10px; white-space: nowrap; background: #eef1f4; color: #4a5560; border: 1px solid #dde3ea; }
.cm-st-in-progress, .cm-st-scheduled, .cm-st-drafted, .cm-st-uploaded { background: #fdf3e3; color: #8a5d12; border-color: #f0dcae; }
.cm-st-on-track, .cm-st-complete, .cm-st-done, .cm-st-sent, .cm-st-approved, .cm-st-reviewed { background: #e8f4e8; color: #2f6f23; border-color: #c4e3c0; }
.cm-st-at-risk, .cm-st-blocked, .cm-st-cancelled { background: #fdecea; color: #a4332a; border-color: #f1c4be; }

/* ADKAR roadmap */
.cm-road { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.cm-stage { flex: 1 1 180px; min-width: 170px; background: var(--card, #fff); border: 1px solid var(--line, #e6ddd2); border-radius: 10px; padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: box-shadow .12s, transform .12s; }
.cm-stage:hover { box-shadow: 0 3px 10px rgba(0,0,0,.08); transform: translateY(-1px); }
.cm-stage-top { display: flex; gap: 9px; align-items: flex-start; }
.cm-stage-badge { width: 28px; height: 28px; border-radius: 8px; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cm-stage-bar { background: var(--hover, #f1ebe2); border-radius: 5px; height: 8px; overflow: hidden; }
.cm-stage-fill { display: block; height: 100%; border-radius: 5px; min-width: 2px; }
.cm-stage-meta { display: flex; justify-content: space-between; align-items: center; }
.cm-stage-foot { display: flex; justify-content: space-between; font-size: 11px; }
.cm-road-arrow { align-self: center; color: var(--muted, #b3a48d); font-size: 18px; }

/* tables */
.cm-table { width: 100%; font-size: 12.5px; }
.cm-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted, #8a7d6c); white-space: nowrap; }
.cm-table td { vertical-align: middle; }
.cm-row { cursor: pointer; }
.cm-row:hover { background: var(--hover, #faf6f0); }
.cm-neg { color: #cf3c2e; font-weight: 600; }
.cm-sent { font-weight: 600; }
.cm-heat td { text-align: center; }
.cm-heat td:first-child { text-align: left; }
.cm-score { max-width: 64px; padding: 3px 5px; text-align: center; }

.cm-ragpill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 10px; }
.cm-green { background: #e6f4e6; color: #245c27; } .cm-amber { background: #fbeecd; color: #8a5d12; } .cm-red { background: #fbdcd7; color: #8f2a22; } .cm-grey { background: #ece7df; color: #6a5f50; }

/* engagement summary */
.cm-eng { display: flex; flex-direction: column; gap: 6px; }
.cm-eng-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.cm-dot-i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.cm-eng-l { flex: 1; }

/* editor */
.cm-editor { display: flex; flex-direction: column; gap: 12px; min-width: min(720px, 92vw); }
.cm-ed-head { display: flex; align-items: center; gap: 10px; }
.cm-ed-id { font-size: 12px; color: #fff; background: #7c3aed; padding: 3px 8px; border-radius: 6px; }
.cm-ed-tabs { display: flex; gap: 3px; flex-wrap: wrap; border-bottom: 1px solid var(--line, #e6ddd2); }
.cm-ed-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 6px 11px; font-size: 12.5px; font-weight: 600; color: var(--muted, #8a7d6c); cursor: pointer; }
.cm-ed-tab.on { color: #7c3aed; border-bottom-color: #7c3aed; }
.cm-ed-body { min-height: 120px; }
.cm-ed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; }
.cm-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cm-f-full { grid-column: 1 / -1; }
.cm-f-l { font-size: 11px; font-weight: 600; color: var(--muted, #8a7d6c); }
.cm-danger { color: #cf3c2e; }

/* stage activities */
.cm-acts { display: flex; flex-direction: column; gap: 7px; }
.cm-act-row { display: grid; grid-template-columns: 2fr 1.1fr 1.1fr 1fr 1fr auto auto auto; gap: 6px; align-items: center; }
.cm-act-row .fld { min-width: 0; }

/* evidence */
.cm-evidence { display: flex; flex-direction: column; gap: 7px; }
.cm-ev-row { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line, #eadfce); border-radius: 8px; padding: 7px 10px; }
.cm-ev-ico { font-size: 16px; }
.cm-ev-meta { flex: 1; min-width: 0; }
.cm-ev-st { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9px; background: #eef1f4; }
.cm-ev-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.cm-ev-add .fld[type="text"] { flex: 1; min-width: 180px; }

/* audit */
.cm-audit { display: flex; flex-direction: column; gap: 5px; max-height: 320px; overflow: auto; }
.cm-audit-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; border-bottom: 1px dashed var(--line, #eadfce); padding-bottom: 4px; }
.cm-audit-f { color: var(--text, #4a4036); }

/* responsive */
@media (max-width: 1100px) {
  .cm-kpis { grid-template-columns: repeat(3, 1fr); }
  .cm-dash-grid, .cm-dash-grid.cm-2col { grid-template-columns: repeat(2, 1fr); }
  .cm-ed-grid { grid-template-columns: repeat(2, 1fr); }
  .cm-act-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .cm-kpis { grid-template-columns: repeat(2, 1fr); }
  .cm-dash-grid, .cm-dash-grid.cm-2col { grid-template-columns: 1fr; }
  .cm-ed-grid { grid-template-columns: 1fr; }
  .cm-editor { min-width: 0; }
  .cm-act-row { grid-template-columns: 1fr; }
}
@media print { .cm-tabs, .cm-head-actions, .cm-act-row { display: none !important; } }
