/*! © 2026 Cyber Affinity LLC. All rights reserved. Use is subject to https://www.cyber-affinity.com/terms — copying or redistributing this code is not permitted. */
/* Affinity PM Lite — builds on /styles.css tokens */
.pm-main { padding: 28px 0 64px; }
.pm-wrap { max-width: 1320px; margin: 0 auto; padding: 0 20px; }
.pm-intro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 18px; }
.pm-intro .eyebrow { margin: 0; }
.pm-lede { margin: 0; color: var(--muted); flex: 1 1 380px; }
.pm-save { margin: 0; font-size: 13px; color: var(--muted); }
.pm-save.warn { color: #fde047; }

.pm-header { display: grid; grid-template-columns: 1fr auto; gap: 12px 20px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.pm-title { display: grid; gap: 4px; min-width: 0; }
.pm-name, .pm-tagline { background: transparent; border: 1px solid transparent; padding: 4px 8px; margin-left: -8px; border-radius: 8px; }
.pm-name { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
.pm-tagline { color: var(--muted); }
.pm-name:hover, .pm-tagline:hover { border-color: var(--line); }
.pm-status { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pm-health { font-weight: 700; font-size: 14px; border-radius: 999px; padding: 4px 12px; cursor: help; }
.pm-health.green { background: rgba(52, 211, 153, 0.15); color: #6ee7b7; }
.pm-health.yellow { background: rgba(253, 224, 71, 0.15); color: #fde047; }
.pm-health.red { background: rgba(248, 113, 113, 0.15); color: #fca5a5; }
.pm-pct { font-size: 14px; color: var(--muted); }
.pm-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }

.pm-btn { font: inherit; font-size: 14px; font-weight: 600; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; cursor: pointer; display: inline-flex; align-items: center; }
.pm-btn:hover { border-color: var(--accent); }
.pm-btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pm-btn.danger { color: #fca5a5; }
.pm-btn.small { font-size: 13px; padding: 5px 10px; justify-self: start; }

.pm-tabs { display: flex; gap: 4px; margin: 18px 0 14px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.pm-tab { font: inherit; font-size: 15px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: 10px 14px; cursor: pointer; white-space: nowrap; }
.pm-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.pm-tab.locked { color: #7d8fa6; }
.pm-tab:hover { color: var(--text); }

.pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.pm-stack { display: grid; gap: 16px; }
.pm-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 10px; min-width: 0; }
.pm-card h2 { font-size: 16px; margin: 0; color: var(--accent-2); letter-spacing: 0; }
.pm-card label { font-size: 13px; }
.pm-card input, .pm-card select, .pm-card textarea { font-size: 14px; padding: 8px 10px; }
.pm-empty { color: var(--muted); margin: 0; font-size: 14px; }
.pm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pm-li, .pm-row { display: flex; gap: 6px; align-items: center; }
.pm-rows { display: grid; gap: 6px; }
.pm-row > input:first-child { flex: 1 1 auto; min-width: 0; }
.pm-row-ms input[type="date"] { flex: 0 0 150px; }
.pm-row-sh { flex-wrap: wrap; }
.pm-row-sh > * { flex: 1 1 130px; }
.pm-row-sh > .pm-x { flex: 0 0 auto; }
.pm-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; color: var(--muted); }
.pm-check input { width: auto; accent-color: var(--accent); }
.pm-x { background: none; border: 0; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; flex: 0 0 auto; }
.pm-x:hover { color: #fca5a5; background: rgba(248, 113, 113, 0.1); }

.pm-locked-card { text-align: left; font: inherit; color: var(--text); cursor: pointer; border-style: dashed; background: transparent; }
.pm-locked-card h2 { color: var(--muted); }
.pm-locked-card p { margin: 0; color: var(--muted); font-size: 14px; }
.pm-locked-card:hover { border-color: var(--accent); }
.pm-link { color: var(--accent); font-weight: 600; font-size: 14px; }
.pm-inline-lock { justify-self: start; font: inherit; font-size: 13px; color: var(--muted); background: none; border: 1px dashed var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.pm-inline-lock:hover { color: var(--accent); border-color: var(--accent); }

.pm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.pm-stats > div { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; }
.pm-stats b { font-size: 22px; }
.pm-stats span { font-size: 12px; color: var(--muted); }
.pm-stats .red b { color: #fca5a5; }
.pm-stats .yellow b { color: #fde047; }
.pm-pipeline { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--bg); }
.pm-pipeline span { flex-basis: 0; min-width: 4px; }
.pm-pipeline span.zero { opacity: 0.25; }
.pm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.pm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

.pm-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pm-filters input[type="search"] { flex: 1 1 200px; width: auto; }
.pm-filters select { width: auto; }
.pm-inline { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.pm-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.pm-table { width: 100%; border-collapse: collapse; min-width: 1060px; }
.pm-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.pm-table td { padding: 6px; border-bottom: 1px solid var(--line); }
.pm-table td input, .pm-table td select { padding: 6px 8px; font-size: 13px; border-color: transparent; background: transparent; }
.pm-table td input:hover, .pm-table td select:hover { border-color: var(--line); }
.pm-table td:first-child { min-width: 240px; }
.pm-table td.overdue input { color: #fca5a5; font-weight: 600; }
.pm-table td.due-soon input { color: #fde047; font-weight: 600; }
.pm-table select.state-green { color: #34d399; }
.pm-table select.state-yellow { color: #fde047; }
.pm-table select.state-red { color: #f87171; }
.pm-table select.state-blue { color: #60a5fa; }
.pm-table select.state-gray { color: #9fb3c8; }

/* Gantt */
.pm-gantt { overflow-x: auto; }
.pm-gantt-head, .pm-gantt-row { display: grid; grid-template-columns: 240px minmax(560px, 1fr); }
.pm-gantt-head { font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.pm-gantt-axis { position: relative; height: 26px; }
.pm-gantt-axis span { position: absolute; top: 6px; transform: translateX(-1px); padding-left: 4px; border-left: 1px solid var(--line); white-space: nowrap; }
.pm-gantt-group { border-bottom: 1px solid var(--line); padding: 4px 0 8px; }
.pm-gantt-glabel { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-2); padding: 8px 0 4px; }
.pm-gantt-row { min-height: 34px; align-items: center; }
.pm-gantt-name { display: grid; padding-right: 12px; min-width: 0; }
.pm-gantt-name span { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-gantt-name small { font-size: 12px; color: var(--muted); }
.pm-gantt-track { position: relative; height: 26px; background: rgba(255, 255, 255, 0.02); border-radius: 6px; }
.pm-today { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--accent); opacity: 0.7; z-index: 1; }
.pm-bar { position: absolute; top: 4px; height: 18px; border-radius: 5px; font-size: 11px; font-weight: 700; color: #04201c; display: flex; align-items: center; padding: 0 6px; overflow: hidden; white-space: nowrap; min-width: 6px; }
.bar-ontime { background: #34d399; }
.bar-soon { background: #fde047; }
.bar-overdue { background: #f87171; }
.bar-done { background: #60a5fa; opacity: 0.75; }
.bar-notstarted, .bar-nodate { background: #7481ab; color: #e6eef7; }
.pm-legend i.bar-ontime, .pm-legend i.bar-soon, .pm-legend i.bar-overdue, .pm-legend i.bar-done, .pm-legend i.bar-notstarted { position: static; }

/* Locked feature views + dialog */
.pm-locked-view { max-width: 760px; }
.pm-locked-view h2 { font-size: 26px; color: var(--text); }
.pm-locked-body { color: var(--muted); font-size: 16px; margin: 0; }
.pm-sample { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.pm-dialog { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; max-width: 520px; width: calc(100% - 32px); }
.pm-dialog::backdrop { background: rgba(3, 10, 20, 0.7); }
.pm-dialog h2 { margin: 0 0 8px; font-size: 22px; }
.pm-dialog p { color: var(--muted); }
.pm-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.pm-rag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.pm-rag { border-radius: 8px; padding: 10px; display: grid; gap: 2px; font-size: 13px; }
.pm-rag.green { background: rgba(52, 211, 153, 0.15); color: #6ee7b7; }
.pm-rag.yellow { background: rgba(253, 224, 71, 0.15); color: #fde047; }
.pm-rag.red { background: rgba(248, 113, 113, 0.15); color: #fca5a5; }
.pm-sample-doc { display: grid; gap: 8px; font-size: 14px; }
.pm-sample-doc ul { margin: 0; padding-left: 18px; color: var(--muted); }
.pm-sample-doc small { color: var(--muted); }
.pm-sample-bar, .pm-sample-mix { display: flex; height: 10px; border-radius: 999px; overflow: hidden; }
.pm-sample-bar .pass, .pm-sample-mix .g { background: #34d399; }
.pm-sample-bar .fail, .pm-sample-mix .r { background: #f87171; }
.pm-sample-bar .pend { background: #7481ab; }
.pm-sample-mix .y { background: #fde047; }

@media (max-width: 720px) {
  .pm-header { grid-template-columns: 1fr; }
  .pm-status { align-items: flex-start; }
  .pm-grid { grid-template-columns: 1fr; }
  .pm-gantt-head, .pm-gantt-row { grid-template-columns: 150px minmax(480px, 1fr); }
}
.pm-table td select { min-width: 128px; }
.pm-table td input[type="date"] { min-width: 140px; }