/* ═══════════════════════════════════════════════════════════════════════
   FolksPMS Docs — PMS-specific components layered on style.css + site.css
   (page-by-page cards, pillar map, flow diagrams, Gantt replica, sub-nav)
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --pri:#4338ca; --pri-d:#3730a3; --pri-l:#e0e7ff; --pri-bg:#eef2ff;
  --acc:#06b6d4; --acc-d:#0891b2;
  --ok:#10b981; --warn:#f59e0b; --danger:#ef4444;
  --ink:#1a1f36; --ink-2:#4a5375; --ink-3:#8b94b1; --line:#e6e9f2;
}

/* ── PILLAR MAP (7 pillars → module chips) ─────────────────────────────── */
.pillar-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:18px 0; }
.pillar-card{
  background:#fff; border:1.5px solid var(--line); border-radius:14px;
  padding:18px 20px; border-top:4px solid var(--pri);
}
.pillar-card.p2{ border-top-color:#0ea5e9; }
.pillar-card.p3{ border-top-color:var(--acc); }
.pillar-card.p4{ border-top-color:var(--ok); }
.pillar-card.p5{ border-top-color:var(--warn); }
.pillar-card.p6{ border-top-color:#9333ea; }
.pillar-card.p7{ border-top-color:#ef4444; }
.pillar-card h4{ font-size:15px; font-weight:800; color:var(--ink); margin:0 0 4px; display:flex; align-items:center; gap:9px; }
.pillar-card .pc-sub{ font-size:12px; color:var(--ink-3); margin-bottom:12px; }
.pillar-card .pc-ico{ width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:15px;background:linear-gradient(135deg,var(--pri),var(--pri-d)); flex-shrink:0; }
.mod-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.mod-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--pri-bg); color:var(--pri-d);
  border:1px solid var(--pri-l); border-radius:8px;
  padding:5px 10px; font-size:12px; font-weight:600; text-decoration:none;
  transition:background .12s,transform .12s;
}
.mod-chip:hover{ background:var(--pri-l); transform:translateY(-1px); }
.mod-chip .mc-code{ font:700 10px/1 'Cascadia Code',Consolas,monospace; background:#fff; border:1px solid var(--pri-l); border-radius:5px; padding:2px 5px; color:var(--pri); }

/* ── PAGE CARD (one per documented Razor page) ─────────────────────────── */
.page-card{
  background:#fff; border:1.5px solid var(--line); border-radius:12px;
  padding:18px 22px; margin:16px 0; box-shadow:0 2px 8px rgba(67,56,202,.05);
  scroll-margin-top:84px; page-break-inside:avoid;
}
.page-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.page-head h4{ font-size:16px; font-weight:800; color:var(--ink); margin:0; }
.page-type{
  font:800 10px/1 'Cascadia Code',Consolas,monospace; letter-spacing:.6px;
  text-transform:uppercase; color:#fff; padding:4px 9px; border-radius:6px; flex-shrink:0;
}
.pt-list{ background:linear-gradient(135deg,#4338ca,#3730a3); }
.pt-entry{ background:linear-gradient(135deg,#0891b2,#0e7490); }
.pt-detail{ background:linear-gradient(135deg,#0ea5e9,#0369a1); }
.pt-report{ background:linear-gradient(135deg,#9333ea,#6b21a8); }
.pt-gantt{ background:linear-gradient(135deg,#f59e0b,#b45309); }
.pt-admin{ background:linear-gradient(135deg,#64748b,#334155); }
.route-chip{
  margin-left:auto; font:600 11.5px/1 'Cascadia Code',Consolas,monospace;
  background:#0b1022; color:#67e8f9; border-radius:6px; padding:5px 10px; white-space:nowrap;
}
.page-card .pc-purpose{ font-size:13px; color:var(--ink-2); margin:6px 0 12px; }
.page-card h5{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--pri-d); margin:14px 0 8px; }
.mini-actions{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.mini-actions .ma{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  color:var(--ink-2); background:#f8fafc; border:1px solid var(--line); border-radius:7px; padding:5px 11px;
}
.mini-actions .ma i{ color:var(--pri); font-size:11px; }

/* ── FLOW DIAGRAM (horizontal chain) ───────────────────────────────────── */
.flow{ display:flex; flex-wrap:wrap; align-items:stretch; gap:0; margin:18px 0; }
.flow-step{
  position:relative; flex:1 1 0; min-width:120px;
  background:#fff; border:1.5px solid var(--line); border-radius:10px;
  padding:13px 14px 13px 16px; margin-right:22px; text-align:left;
}
.flow-step:last-child{ margin-right:0; }
.flow-step::after{
  content:"\f061"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; right:-19px; top:50%; transform:translateY(-50%);
  color:var(--pri); font-size:14px; z-index:2;
}
.flow-step:last-child::after{ content:none; }
.flow-step .fs-ico{ font-size:17px; color:var(--pri); margin-bottom:6px; display:block; }
.flow-step .fs-t{ font-size:12.5px; font-weight:800; color:var(--ink); }
.flow-step .fs-d{ font-size:11px; color:var(--ink-3); margin-top:2px; line-height:1.4; }
.flow-step.s-acc{ border-top:3px solid var(--acc); }
.flow-step.s-acc .fs-ico{ color:var(--acc); }
.flow-step.s-ok{ border-top:3px solid var(--ok); }
.flow-step.s-ok .fs-ico{ color:var(--ok); }
.flow-step.s-warn{ border-top:3px solid var(--warn); }
.flow-step.s-warn .fs-ico{ color:var(--warn); }
.flow-step.s-danger{ border-top:3px solid var(--danger); }
.flow-step.s-danger .fs-ico{ color:var(--danger); }

/* ── GANTT REPLICA ─────────────────────────────────────────────────────── */
.gantt-mock{ background:#fff; border:1.5px solid var(--line); border-radius:10px; overflow:hidden; margin:16px 0; }
.gantt-mock .gm-head{ display:grid; grid-template-columns:200px 1fr; background:#0b1022; color:#c7d2fe; font-size:11px; font-weight:700; }
.gantt-mock .gm-head .gm-week{ display:grid; grid-template-columns:repeat(8,1fr); }
.gantt-mock .gm-head .gm-week span{ padding:8px 4px; text-align:center; border-left:1px solid rgba(255,255,255,.08); }
.gantt-mock .gm-head .gm-task-h{ padding:8px 12px; }
.gantt-row{ display:grid; grid-template-columns:200px 1fr; border-top:1px solid var(--line); align-items:center; }
.gantt-row .gm-task{ padding:9px 12px; font-size:12px; color:var(--ink); font-weight:600; }
.gantt-row .gm-track{ position:relative; height:34px; background:repeating-linear-gradient(90deg,#fff 0,#fff calc(12.5% - 1px),#eef2ff calc(12.5% - 1px),#eef2ff 12.5%); }
.gantt-bar{ position:absolute; top:8px; height:18px; border-radius:5px; background:linear-gradient(135deg,var(--pri),var(--pri-d)); box-shadow:0 1px 4px rgba(67,56,202,.3); }
.gantt-bar.b-acc{ background:linear-gradient(135deg,var(--acc),var(--acc-d)); }
.gantt-bar.b-ok{ background:linear-gradient(135deg,#10b981,#047857); }
.gantt-bar.b-warn{ background:linear-gradient(135deg,#f59e0b,#b45309); }
.gantt-milestone{ position:absolute; top:7px; width:18px; height:18px; background:#ef4444; transform:rotate(45deg); border-radius:3px; box-shadow:0 1px 4px rgba(239,68,68,.4); }

/* ── FIGURE caption ────────────────────────────────────────────────────── */
.figure{ margin:16px 0; }
.figure .fig-cap{ font-size:11.5px; color:var(--ink-3); text-align:center; margin-top:7px; font-style:italic; }
.figure img{ width:100%; border:1.5px solid var(--line); border-radius:10px; box-shadow:0 6px 24px rgba(20,26,60,.12); display:block; }
.shot-badge{ display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:#fff; background:linear-gradient(135deg,var(--ok),#047857); border-radius:5px; padding:3px 8px; }

/* ── MODULE SUB-NAV (page list inside a module chapter) ────────────────── */
.subpage-nav{ display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 6px; }
.subpage-nav a{ font-size:12px; font-weight:600; color:var(--pri-d); background:var(--pri-bg); border:1px solid var(--pri-l); border-radius:7px; padding:5px 10px; text-decoration:none; }
.subpage-nav a:hover{ background:var(--pri-l); }

/* ── XREF chip (manual <-> workbook) ───────────────────────────────────── */
.xref{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--acc-d); background:#ecfeff; border:1px solid #cffafe; border-radius:7px; padding:4px 10px; text-decoration:none; }
.xref:hover{ background:#cffafe; }

/* ── SP / TABLE reference chips ────────────────────────────────────────── */
.db-chip{ display:inline-block; font:600 11px/1 'Cascadia Code',Consolas,monospace; background:#eef2ff; color:#3730a3; border:1px solid #e0e7ff; border-radius:5px; padding:3px 7px; margin:2px 3px 2px 0; }
.db-chip.sp{ background:#ecfeff; color:#155e75; border-color:#cffafe; }
.db-chip.dev{ background:#faf5ff; color:#6b21a8; border-color:#e9d5ff; }

/* nicer two/three-col stat row reused on landing/manual */
.stat-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:16px 0; }
.stat-card{ background:#0b1022; border-radius:12px; padding:16px 18px; }
.stat-card .sc-n{ font-size:26px; font-weight:800; background:linear-gradient(135deg,#818cf8,#22d3ee); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-card .sc-l{ font-size:11px; color:#94a3b8; text-transform:uppercase; letter-spacing:.6px; font-weight:600; margin-top:3px; }

@media (max-width:1080px){
  .pillar-grid{ grid-template-columns:1fr; }
  .stat-3{ grid-template-columns:1fr; }
}
@media print{
  .page-card,.gantt-mock,.flow,.pillar-card{ page-break-inside:avoid; }
}