/* ═══════════════════════════════════════════════════
   Manual Pengguna — Bengkel Pintar ERP
   Extra styles on top of assets/style.css
═══════════════════════════════════════════════════ */

/* ── Role Pills ─────────────────────────────── */
.role-pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:20px;
  font-size:11px; font-weight:600; letter-spacing:.3px;
}
.role-admin    { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe }
.role-sa       { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0 }
.role-kasir    { background:#fff7ed; color:#c2410c; border:1px solid #fed7aa }
.role-mekanik  { background:#fdf4ff; color:#7e22ce; border:1px solid #e9d5ff }
.role-operator { background:#ecfeff; color:#0e7490; border:1px solid #a5f3fc }
.role-gudang   { background:#fefce8; color:#a16207; border:1px solid #fef08a }
.role-finance  { background:#f0f9ff; color:#0369a1; border:1px solid #bae6fd }
.role-hcm      { background:#fdf2f8; color:#9d174d; border:1px solid #fbcfe8 }
.role-manager  { background:#f8f9fa; color:#374151; border:1px solid #d1d5db }

/* ── Manual Hero ─────────────────────────────── */
.manual-hero {
  background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 50%, #2563eb 100%);
  border-radius: 14px; padding: 36px 40px; margin-bottom: 28px; color: #fff;
  position: relative; overflow: hidden;
}
.manual-hero::before {
  content:''; position:absolute; right:-60px; top:-60px;
  width:300px; height:300px; border-radius:50%;
  background: rgba(255,255,255,.05);
}
.manual-hero h1 { font-size:26px; font-weight:800; margin-bottom:6px; line-height:1.2 }
.manual-hero p  { font-size:13px; opacity:.85; max-width:580px; line-height:1.7 }
.manual-hero .hero-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px }
.manual-hero .hero-meta .role-pill { opacity:.95 }

/* ── Step Block ─────────────────────────────── */
.steps-section { margin-bottom:36px }
.steps-section .sec-title { margin-bottom:14px }

.step-list { display:flex; flex-direction:column; gap:0 }
.step-block {
  display:flex; gap:20px; padding:0 0 28px 0; position:relative;
}
.step-block:last-child { padding-bottom:0 }
/* vertical connector line */
.step-block::before {
  content:''; position:absolute; left:18px; top:44px; bottom:0;
  width:2px; background:#e2e8f0;
}
.step-block:last-child::before { display:none }

.step-num {
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  background:#1d4ed8; color:#fff; font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 4px #eff6ff; z-index:1; margin-top:2px;
}
.step-content { flex:1; min-width:0 }
.step-content h3 { font-size:14px; font-weight:700; color:#0f172a; margin-bottom:4px }
.step-content p  { font-size:12.5px; color:#475569; line-height:1.65; margin-bottom:10px }
.step-content .step-note {
  background:#eff6ff; border-left:3px solid #3b82f6;
  border-radius:4px; padding:8px 12px; font-size:11.5px; color:#1d4ed8;
  margin-top:6px;
}
.step-content .step-warn {
  background:#fff7ed; border-left:3px solid #f97316;
  border-radius:4px; padding:8px 12px; font-size:11.5px; color:#c2410c;
  margin-top:6px;
}
.step-content .step-ok {
  background:#f0fdf4; border-left:3px solid #16a34a;
  border-radius:4px; padding:8px 12px; font-size:11.5px; color:#15803d;
  margin-top:6px;
}

/* ── Manual Screenshot ───────────────────────── */
.manual-screen {
  margin:12px 0 4px; border-radius:10px; overflow:hidden;
  border:1px solid #e2e8f0;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  background:#fff;
}
.screen-bar {
  background:#f8fafc; border-bottom:1px solid #e2e8f0;
  padding:8px 12px; display:flex; align-items:center; gap:8px;
}
.screen-dots { display:flex; gap:5px }
.screen-dot  { width:10px; height:10px; border-radius:50% }
.screen-dot.r { background:#fc5f57 }
.screen-dot.y { background:#febc2e }
.screen-dot.g { background:#29c341 }
.screen-url  { font-size:11px; color:#64748b; margin-left:4px; font-family:monospace }
.screen-img  { display:block; width:100%; height:auto }

/* caption under screenshot */
.screen-caption {
  font-size:11px; color:#64748b; text-align:center;
  padding:6px 12px 10px; font-style:italic;
}

/* ── Flow Card ───────────────────────────────── */
.flow-cards  { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px }
.flow-card {
  background:#fff; border:1px solid #e2e8f0; border-radius:10px;
  padding:14px 16px; flex:1; min-width:160px;
}
.flow-card .fc-num {
  font-size:22px; font-weight:800; color:#3b82f6; line-height:1
}
.flow-card .fc-title { font-size:12px; font-weight:600; margin-top:2px }
.flow-card .fc-desc  { font-size:11px; color:#64748b; margin-top:4px; line-height:1.5 }

/* ── Quick Ref Table ─────────────────────────── */
.qr-table { width:100%; border-collapse:collapse; font-size:12px }
.qr-table th {
  background:#f8fafc; padding:8px 12px; text-align:left;
  font-weight:600; color:#374151; border-bottom:2px solid #e2e8f0;
}
.qr-table td { padding:8px 12px; border-bottom:1px solid #f1f5f9; vertical-align:top }
.qr-table tr:last-child td { border-bottom:none }
.qr-table tr:hover td { background:#f8fafc }

/* ── Info / Warning / Tip Callouts ──────────── */
.callout {
  border-radius:8px; padding:12px 16px; margin:14px 0;
  display:flex; gap:10px; align-items:flex-start; font-size:12.5px;
}
.callout-icon { font-size:16px; flex-shrink:0; margin-top:1px }
.callout-blue  { background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af }
.callout-amber { background:#fffbeb; border:1px solid #fde68a; color:#92400e }
.callout-green { background:#f0fdf4; border:1px solid #bbf7d0; color:#14532d }
.callout-red   { background:#fef2f2; border:1px solid #fecaca; color:#7f1d1d }

/* ── Sub Feature Cards ───────────────────────── */
.feature-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-bottom:24px }
.feature-card {
  background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:16px;
  transition:box-shadow .15s;
}
.feature-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.08) }
.feature-card .fc-icon { font-size:22px; margin-bottom:8px }
.feature-card h4 { font-size:13px; font-weight:700; margin-bottom:4px; color:#0f172a }
.feature-card p  { font-size:11.5px; color:#64748b; line-height:1.5 }
.feature-card .fc-link { font-size:11px; color:#3b82f6; margin-top:8px; display:block }

/* ── Menu Map ────────────────────────────────── */
.menu-map { display:flex; flex-direction:column; gap:2px; margin-bottom:20px }
.mm-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 14px; background:#fff; border:1px solid #f1f5f9;
  border-radius:6px; font-size:12.5px;
}
.mm-item .mm-icon { font-size:14px; width:20px; text-align:center; flex-shrink:0 }
.mm-item .mm-label { font-weight:600; color:#1e293b; flex:1 }
.mm-item .mm-desc  { font-size:11px; color:#64748b }
.mm-item .mm-url   { font-size:10.5px; color:#94a3b8; font-family:monospace }

/* ── Role Header Banner ─────────────────────── */
.role-banner {
  border-radius:10px; padding:18px 22px; margin-bottom:24px;
  display:flex; align-items:center; gap:16px;
}
.rb-admin    { background:#eff6ff; border:1px solid #bfdbfe }
.rb-sa       { background:#f0fdf4; border:1px solid #bbf7d0 }
.rb-kasir    { background:#fff7ed; border:1px solid #fed7aa }
.rb-mekanik  { background:#fdf4ff; border:1px solid #e9d5ff }
.rb-operator { background:#ecfeff; border:1px solid #a5f3fc }
.rb-gudang   { background:#fefce8; border:1px solid #fef08a }
.rb-finance  { background:#f0f9ff; border:1px solid #bae6fd }
.rb-hcm      { background:#fdf2f8; border:1px solid #fbcfe8 }

.role-banner .rb-icon { font-size:36px; flex-shrink:0 }
.role-banner .rb-title { font-size:18px; font-weight:800; line-height:1.2 }
.role-banner .rb-sub   { font-size:12px; color:#64748b; margin-top:3px }
.role-banner .rb-pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px }

/* ── Checklist ───────────────────────────────── */
.checklist { list-style:none; display:flex; flex-direction:column; gap:5px; margin:8px 0 14px }
.checklist li {
  display:flex; align-items:flex-start; gap:8px;
  font-size:12.5px; color:#334155;
}
.checklist li::before {
  content:'✓'; font-size:12px; font-weight:700; color:#16a34a;
  flex-shrink:0; margin-top:1px;
}

/* ── Keyboard shortcuts ──────────────────────── */
kbd {
  background:#f1f5f9; border:1px solid #cbd5e1; border-radius:4px;
  padding:1px 6px; font-size:11px; font-family:monospace; color:#334155;
}

/* ── Screenshot 2-col layout ─────────────────── */
.screens-2col { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px }
@media(max-width:900px) { .screens-2col { grid-template-columns:1fr } }

/* ── Explain Card Inner Elements (ec-*) ─────────── */
.ec-icon  { font-size:22px; margin-bottom:7px }
.ec-title { font-size:13px; font-weight:700; color:#0f172a; margin-bottom:4px }
.ec-desc  { font-size:11.5px; color:#64748b; line-height:1.6 }

/* Reduce spacing for manual pages compared to flow-docs */
.manual-page .section { margin-bottom:32px }
.manual-page .page-content { padding-bottom:60px }